Add icon and title selector in badge inputs

src/components/BadgeInput/index.tsx

@@ -18,6 +18,8 @@ export interface Props<O, N extends NameType, K extends OptionKey> {
     options: O[] | null | undefined;
     keySelector: (datum: O) => K;
     labelSelector: (datum: O) => string;
+    titleSelector?: (datum: O) => string | undefined;
+    iconSelector?: (datum: O) => React.ReactNode | undefined;
     onChange?: (value: K | undefined, name: N) => void;
     disabled?: boolean | undefined;
     selectedButtonVariant?: ButtonVariant;
@@ -46,6 +48,8 @@ function BadgeInput<O, N extends NameType, K extends OptionKey>(props: Props<O,
         disabled,
         labelSelector,
         keySelector,
+        titleSelector,
+        iconSelector,
         value,
         listClassName,
         containerClassName,
@@ -76,6 +80,8 @@ function BadgeInput<O, N extends NameType, K extends OptionKey>(props: Props<O,
     const rendererParams = useCallback((key: K, data: O) => ({
         name: keySelector(data),
         children: labelSelector(data),
+        title: titleSelector ? titleSelector(data) : undefined,
+        icons: iconSelector ? iconSelector(data) : undefined,
         disabled,
         variant: value === key ? selectedButtonVariant : buttonVariant,
         onClick: handleOptionClick,
@@ -87,6 +93,8 @@ function BadgeInput<O, N extends NameType, K extends OptionKey>(props: Props<O,
         ),
     }), [
         smallButtons,
+        titleSelector,
+        iconSelector,
         value,
         selectedButtonVariant,
         buttonClassName,

src/components/MultiBadgeInput/index.tsx

@@ -21,6 +21,8 @@ export interface Props<O, N extends NameType, K extends OptionKey> {
     options: O[] | null | undefined;
     keySelector: (datum: O) => K;
     labelSelector: (datum: O) => string;
+    titleSelector?: (datum: O) => string | undefined;
+    iconSelector?: (datum: O) => React.ReactNode | undefined;
     onChange?: (value: K[] | undefined, name: N) => void;
     disabled?: boolean | undefined;
     selectedButtonVariant?: ButtonVariant;
@@ -48,6 +50,8 @@ function MultiBadgeInput<O, N extends NameType, K extends OptionKey>(props: Prop
         disabled,
         labelSelector,
         keySelector,
+        titleSelector,
+        iconSelector,
         value,
         listClassName,
         containerClassName,
@@ -96,6 +100,8 @@ function MultiBadgeInput<O, N extends NameType, K extends OptionKey>(props: Prop
     const rendererParams = useCallback((key: K, data: O) => ({
         name: keySelector(data),
         children: labelSelector(data),
+        title: titleSelector ? titleSelector(data) : undefined,
+        icons: iconSelector ? iconSelector(data) : undefined,
         disabled,
         variant: valueMap?.[key] ? selectedButtonVariant : buttonVariant,
         onClick: handleOptionClick,
@@ -107,6 +113,8 @@ function MultiBadgeInput<O, N extends NameType, K extends OptionKey>(props: Prop
         ),
     }), [
         smallButtons,
+        titleSelector,
+        iconSelector,
         valueMap,
         selectedButtonVariant,
         buttonClassName,

storybook/stories/BadgeInput.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Story } from '@storybook/react/types-6-0';
+import { IoBugOutline } from 'react-icons/io5';
 import { useArgs } from '@storybook/client-api';
 
 import BadgeInput, { Props as BadgeInputProps } from '../../src/components/BadgeInput';
@@ -21,14 +22,19 @@ const Template: Story<BadgeInputProps<string, string, string>> = (args) => {
         {
             key: 'cats',
             label: 'Cats',
+            title: 'Meow!',
+            icon: undefined,
         },
         {
             key: 'dogs',
             label: 'Dogs',
+            title: 'Bhow Bhow!',
+            icon: undefined,
         },
         {
             key: 'monkeys',
             label: 'Monkeys',
+            icon: (<IoBugOutline />),
         },
     ];
 
@@ -40,6 +46,8 @@ const Template: Story<BadgeInputProps<string, string, string>> = (args) => {
             options={suggestionOptions}
             keySelector={(s) => s.key}
             labelSelector={(s) => s.label}
+            titleSelector={(s) => s.title}
+            iconSelector={(s) => s.icon}
             onChange={handleChange}
         />
     );