(Lookup): try improving interfaces to accept functions

Author: msmx-mnakagawa

src/scripts/Lookup.tsx

@@ -745,9 +745,13 @@ type LookupDropdownProps = {
   loading?: boolean;
   listboxId: string;
   dropdownRef: Ref<HTMLDivElement>;
-  listHeader?: JSX.Element;
+  listHeader?: (
+    optionProps: React.HTMLAttributes<HTMLDivElement>
+  ) => JSX.Element;
   listHeaderIdSeed: string;
-  listFooter?: JSX.Element;
+  listFooter?: (
+    optionProps: React.HTMLAttributes<HTMLDivElement>
+  ) => JSX.Element;
   listFooterIdSeed: string;
   filteredData: LookupEntry[];
   focusedValue?: string;
@@ -802,16 +806,14 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
               onBlur={onBlur}
             >
               <li role='presentation' className='slds-listbox__item'>
-                <div
-                  id={getOptionId(listHeaderIdSeed)}
-                  className='slds-listbox__option'
-                  role='option'
-                  aria-selected='true'
-                  tabIndex={0}
-                  onFocus={() => onOptionFocus(listHeaderIdSeed)}
-                >
-                  {listHeader}
-                </div>
+                {listHeader({
+                  id: getOptionId(listHeaderIdSeed),
+                  className: 'slds-listbox__option',
+                  role: 'option',
+                  'aria-selected': 'true',
+                  tabIndex: 0,
+                  onFocus: () => onOptionFocus(listHeaderIdSeed),
+                })}
               </li>
             </ul>
           ) : null}
@@ -847,15 +849,13 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
               onBlur={onBlur}
             >
               <li role='presentation' className='slds-listbox__item'>
-                <div
-                  id={getOptionId(listFooterIdSeed)}
-                  className='slds-listbox__option'
-                  role='option'
-                  tabIndex={0}
-                  onFocus={() => onOptionFocus(listFooterIdSeed)}
-                >
-                  {listFooter}
-                </div>
+                {listFooter({
+                  id: getOptionId(listFooterIdSeed),
+                  className: 'slds-listbox__option',
+                  role: 'option',
+                  tabIndex: 0,
+                  onFocus: () => onOptionFocus(listFooterIdSeed),
+                })}
               </li>
             </ul>
           ) : null}
@@ -935,8 +935,12 @@ export type LookupProps = {
   lookupFilter?: Bivariant<
     (entry: LookupEntry, searchText?: string, scope?: string) => boolean
   >;
-  listHeader?: JSX.Element;
-  listFooter?: JSX.Element;
+  listHeader?: (
+    optionProps: React.HTMLAttributes<HTMLDivElement>
+  ) => JSX.Element;
+  listFooter?: (
+    optionProps: React.HTMLAttributes<HTMLDivElement>
+  ) => JSX.Element;
   tooltip?: ReactNode;
   tooltipIcon?: string;
 

stories/Lookup.stories.tsx

@@ -12,6 +12,7 @@ import CASES from './data/CASES';
 import SCOPES from './data/SCOPES';
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
 import { containerDecorator } from './util';
+import classnames from 'classnames';
 
 /**
  * example data set used for lookup datasource
@@ -373,8 +374,14 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
     opened: true,
     data: COMPANY_DATA,
     selected: null,
-    listHeader: (
-      <div className='slds-media slds-media_center slds-listbox__option_entity slds-listbox__option_term'>
+    listHeader: (optionProps) => (
+      <div
+        {...optionProps}
+        className={classnames(
+          optionProps.className,
+          'slds-listbox__option_term slds-media slds-media_center'
+        )}
+      >
         <span className='slds-media__figure slds-listbox__option-icon'>
           <Icon category='utility' icon='search' size='x-small' />
         </span>
@@ -385,8 +392,14 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
         </span>
       </div>
     ),
-    listFooter: (
-      <div className='slds-media slds-media_center slds-listbox__option_entity slds-listbox__option_term'>
+    listFooter: (optionProps) => (
+      <div
+        {...optionProps}
+        className={classnames(
+          optionProps.className,
+          'slds-listbox__option_entity slds-media slds-media_center'
+        )}
+      >
         <span className='slds-media__figure slds-listbox__option-icon'>
           <Icon category='utility' icon='add' size='x-small' />
         </span>
@@ -467,8 +480,14 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
     defaultOpened: true,
     data: COMPANY_DATA,
     selected: null,
-    listHeader: (
-      <div className='slds-media slds-media_center slds-listbox__option_entity slds-listbox__option_term'>
+    listHeader: (optionProps) => (
+      <div
+        {...optionProps}
+        className={classnames(
+          optionProps.className,
+          'slds-listbox__option_term slds-media slds-media_center'
+        )}
+      >
         <span className='slds-media__figure slds-listbox__option-icon'>
           <Icon category='utility' icon='search' size='x-small' />
         </span>
@@ -479,8 +498,14 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
         </span>
       </div>
     ),
-    listFooter: (
-      <div className='slds-media slds-media_center slds-listbox__option_entity slds-listbox__option_term'>
+    listFooter: (optionProps) => (
+      <div
+        {...optionProps}
+        className={classnames(
+          optionProps.className,
+          'slds-listbox__option_entity slds-media slds-media_center'
+        )}
+      >
         <span className='slds-media__figure slds-listbox__option-icon'>
           <Icon category='utility' icon='add' size='x-small' />
         </span>