(Lookup): change naming convention to xxxRenderer

Author: msmx-mnakagawa

src/scripts/Lookup.tsx

@@ -745,12 +745,12 @@ type LookupDropdownProps = {
   loading?: boolean;
   listboxId: string;
   dropdownRef: Ref<HTMLDivElement>;
-  listHeader?: (
-    optionProps: React.HTMLAttributes<HTMLDivElement>
+  listHeaderRenderer?: (
+    rendererProps: React.HTMLAttributes<HTMLDivElement>
   ) => JSX.Element;
   listHeaderIdSeed: string;
-  listFooter?: (
-    optionProps: React.HTMLAttributes<HTMLDivElement>
+  listFooterRenderer?: (
+    rendererProps: React.HTMLAttributes<HTMLDivElement>
   ) => JSX.Element;
   listFooterIdSeed: string;
   filteredData: LookupEntry[];
@@ -771,9 +771,9 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
   loading,
   listboxId,
   dropdownRef,
-  listHeader,
+  listHeaderRenderer,
   listHeaderIdSeed,
-  listFooter,
+  listFooterRenderer,
   listFooterIdSeed,
   filteredData,
   focusedValue,
@@ -798,15 +798,15 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
           dropdownRef={dropdownRef}
           {...injectedProps}
         >
-          {listHeader ? (
+          {listHeaderRenderer ? (
             <ul
               className='slds-listbox slds-listbox_vertical'
               role='presentation'
               onKeyDown={onKeyDown}
               onBlur={onBlur}
             >
               <li role='presentation' className='slds-listbox__item'>
-                {listHeader({
+                {listHeaderRenderer({
                   id: getOptionId(listHeaderIdSeed),
                   className: 'slds-listbox__option',
                   role: 'option',
@@ -841,15 +841,15 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
               </li>
             ) : null}
           </ul>
-          {listFooter ? (
+          {listFooterRenderer ? (
             <ul
               className='slds-listbox slds-listbox_vertical'
               role='presentation'
               onKeyDown={onKeyDown}
               onBlur={onBlur}
             >
               <li role='presentation' className='slds-listbox__item'>
-                {listFooter({
+                {listFooterRenderer({
                   id: getOptionId(listFooterIdSeed),
                   className: 'slds-listbox__option',
                   role: 'option',
@@ -935,11 +935,11 @@ export type LookupProps = {
   lookupFilter?: Bivariant<
     (entry: LookupEntry, searchText?: string, scope?: string) => boolean
   >;
-  listHeader?: (
-    optionProps: React.HTMLAttributes<HTMLDivElement>
+  listHeaderRenderer?: (
+    rendererProps: React.HTMLAttributes<HTMLDivElement>
   ) => JSX.Element;
-  listFooter?: (
-    optionProps: React.HTMLAttributes<HTMLDivElement>
+  listFooterRenderer?: (
+    rendererProps: React.HTMLAttributes<HTMLDivElement>
   ) => JSX.Element;
   tooltip?: ReactNode;
   tooltipIcon?: string;
@@ -991,8 +991,8 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       disabled,
       loading,
       lookupFilter,
-      listHeader,
-      listFooter,
+      listHeaderRenderer,
+      listFooterRenderer,
       data = [],
       tooltip,
       tooltipIcon,
@@ -1068,18 +1068,18 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         ? data.filter((entry) => lookupFilter(entry, searchText, targetScope))
         : data;
       return [
-        listHeader ? listHeaderIdSeed : undefined,
+        listHeaderRenderer ? listHeaderIdSeed : undefined,
         ...filteredData.map((entry) => entry.value),
-        listFooter ? listFooterIdSeed : undefined,
+        listFooterRenderer ? listFooterIdSeed : undefined,
       ].filter((value) => value !== undefined);
     }, [
       data,
       lookupFilter,
       searchText,
       targetScope,
-      listHeader,
+      listHeaderRenderer,
       listHeaderIdSeed,
-      listFooter,
+      listFooterRenderer,
       listFooterIdSeed,
     ]);
 
@@ -1425,9 +1425,9 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                   loading={loading}
                   listboxId={listboxId}
                   dropdownRef={dropdownRef}
-                  listHeader={listHeader}
+                  listHeaderRenderer={listHeaderRenderer}
                   listHeaderIdSeed={listHeaderIdSeed}
-                  listFooter={listFooter}
+                  listFooterRenderer={listFooterRenderer}
                   listFooterIdSeed={listFooterIdSeed}
                   filteredData={filteredData}
                   focusedValue={focusedValue}
@@ -1473,9 +1473,9 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               loading={loading}
               listboxId={listboxId}
               dropdownRef={dropdownRef}
-              listHeader={listHeader}
+              listHeaderRenderer={listHeaderRenderer}
               listHeaderIdSeed={listHeaderIdSeed}
-              listFooter={listFooter}
+              listFooterRenderer={listFooterRenderer}
               listFooterIdSeed={listFooterIdSeed}
               filteredData={filteredData}
               focusedValue={focusedValue}

stories/Lookup.stories.tsx

@@ -374,11 +374,11 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
     opened: true,
     data: COMPANY_DATA,
     selected: null,
-    listHeader: (optionProps) => (
+    listHeaderRenderer: (rendererProps) => (
       <div
-        {...optionProps}
+        {...rendererProps}
         className={classnames(
-          optionProps.className,
+          rendererProps.className,
           'slds-listbox__option_term slds-media slds-media_center'
         )}
       >
@@ -392,11 +392,11 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
         </span>
       </div>
     ),
-    listFooter: (optionProps) => (
+    listFooterRenderer: (rendererProps) => (
       <div
-        {...optionProps}
+        {...rendererProps}
         className={classnames(
-          optionProps.className,
+          rendererProps.className,
           'slds-listbox__option_entity slds-media slds-media_center'
         )}
       >
@@ -480,11 +480,11 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
     defaultOpened: true,
     data: COMPANY_DATA,
     selected: null,
-    listHeader: (optionProps) => (
+    listHeaderRenderer: (rendererProps) => (
       <div
-        {...optionProps}
+        {...rendererProps}
         className={classnames(
-          optionProps.className,
+          rendererProps.className,
           'slds-listbox__option_term slds-media slds-media_center'
         )}
       >
@@ -498,11 +498,11 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
         </span>
       </div>
     ),
-    listFooter: (optionProps) => (
+    listFooterRenderer: (rendererProps) => (
       <div
-        {...optionProps}
+        {...rendererProps}
         className={classnames(
-          optionProps.className,
+          rendererProps.className,
           'slds-listbox__option_entity slds-media slds-media_center'
         )}
       >