Add group ID

examples/geo/App.jsx

@@ -12,6 +12,7 @@ const noItemsMessage = 'We found no places that match your search'
 
 const listbox = [
   {
+    id: 'cities',
     name: 'Cities',
     ratio: 8,
     displayField: 'name',
@@ -21,6 +22,7 @@ const listbox = [
     searchType: 'startswith'
   },
   {
+    id: 'airports',
     name: 'Airports',
     ratio: 2,
     displayField: 'name',

examples/geo/components/groupName/groupName.jsx

@@ -3,6 +3,7 @@ import styles from './groupName.module.css'
 
 export default function GroupName(props) {
   const {
+    id,
     children: name
   } = props
 
@@ -11,7 +12,7 @@ export default function GroupName(props) {
     airports: '\u{2708}'
   }
 
-  const icon = icons[name.toLowerCase()] || ''
+  const icon = icons[id] || ''
 
   return (
     <>

src/lib/components/hooks/useData.js

@@ -100,6 +100,7 @@ export const fetcher = (query, listbox, defaultListbox, minQueryLength, maxItems
           value: item,
           text: itemText(item, listboxProp[groupIndex].displayField),
           groupIndex,
+          groupId: listboxProp[groupIndex].id,
           groupName: listboxProp[groupIndex].name,
           searchType: listboxProp[groupIndex].searchType,
           defaultListbox: isDefaultListbox

src/lib/components/itemFirst.jsx

@@ -10,7 +10,7 @@ export default function ItemFirst(props) {
 
   const groupHeading = !!groupName && (
     GroupName
-      ? <GroupName index={item.groupIndex}>{groupName}</GroupName>
+      ? <GroupName id={item.groupId} index={item.groupIndex}>{groupName}</GroupName>
       : groupName
   )
 

src/lib/index.jsx

@@ -49,6 +49,7 @@ const listboxRules = PropTypes.oneOfType([
     ]).isRequired,
     searchType: PropTypes.oneOf(searchTypes),
     displayField: PropTypes.string,
+    id: PropTypes.string,
     name: PropTypes.string.isRequired,
     ratio: PropTypes.number
   })),