fix(list-group): include item object into "onSelect" argument list

Author: assisrafael

demo/ListGroupExamples.jsx

@@ -35,6 +35,7 @@ export function ListGroupExamples() {
               {item.description}
             </>
           )}
+          onSelect={console.warn}
         />
       </div>
       <div className="col-6 mb-3">

src/list-group/ListGroupItem.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { safeClick } from '../utils/event-handlers';
 
-export function ListGroupItem({ index, isActive, children, linked, isDisabled, onSelect }) {
+export function ListGroupItem({ index, isActive, isDisabled, item, linked, onSelect, children }) {
   const classes = [
     'list-group-item',
     isActive && 'active',
@@ -12,16 +12,18 @@ export function ListGroupItem({ index, isActive, children, linked, isDisabled, o
     .filter((v) => v)
     .join(' ');
 
+  const onClick = safeClick(onSelect, index, item);
+
   if (linked) {
     return (
-      <a href="#" className={classes} onClick={safeClick(onSelect, index)}>
+      <a href="#" className={classes} onClick={onClick}>
         {children}
       </a>
     );
   }
 
   return (
-    <li className={classes} onClick={safeClick(onSelect, index)}>
+    <li className={classes} onClick={onClick}>
       {children}
     </li>
   );
@@ -36,6 +38,7 @@ ListGroupItem.propTypes = {
   index: PropTypes.number.isRequired,
   isActive: PropTypes.bool,
   isDisabled: PropTypes.bool,
+  item: PropTypes.object.isRequired,
   linked: PropTypes.bool.isRequired,
   onSelect: PropTypes.func,
 };

src/utils/event-handlers.js

@@ -1,9 +1,9 @@
-export function safeClick(callback, callbackArgs) {
+export function safeClick(callback, ...callbackArgs) {
   return (e) => {
     stopPropagation(e);
     e.preventDefault();
 
-    callback(callbackArgs);
+    callback(...callbackArgs);
   };
 }