Support getItemProps for custom renderItem

src/components/Autocomplete/SectionItemsList/SectionItemsList.tsx

@@ -16,7 +16,7 @@ type SectionItemsListProps = {
 
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList: RenderSectionItemsList = function ({ section }) {
-  const { getSectionProps, query, getFormProps, advancedParameters } =
+  const { getSectionProps, query, getFormProps, advancedParameters, getItemProps } =
     useContext(CioAutocompleteContext);
   const { displayShowAllResultsButton, translations } = advancedParameters || {};
   const { onSubmit } = getFormProps();
@@ -51,7 +51,7 @@ const DefaultRenderSectionItemsList: RenderSectionItemsList = function ({ sectio
       <ul className='cio-section-items' role='none'>
         {section?.data?.map((item) => {
           if (typeof section?.renderItem === 'function') {
-            return section.renderItem({ item, query });
+            return section.renderItem({ item, query, getItemProps });
           }
           return (
             <SectionItem

src/constants.ts

@@ -257,5 +257,6 @@ export const translationsDescription = `Pass a \`translations\` object to displa
 `;
 
 export const customRenderItemDescription = `Customize the rendering of individual items within a Section by providing a \`renderItem\` function. This function allows you to define how each item should be rendered.
+- Make sure to call \`getItemProps(item)\` and spread like this \`<div {...getItemProps(item)}/>\` on the container of each custom rendered item or else tracking will not work.
 `;
 export const displayShowAllResultsButtonDescription = `Pass a boolean to \`displayShowAllResultsButton\` to display a button at the bottom of the Products section to show all results. This button will submit the form and trigger the \`onSubmit\` callback.`;

src/stories/Autocomplete/Component/Sections.stories.tsx

@@ -210,8 +210,8 @@ CustomRenderItem.args = {
   sections: [
     {
       indexSectionName: 'Products',
-      renderItem: ({ item, query }) => (
-        <div>
+      renderItem: ({ item, query, getItemProps }) => (
+        <div {...getItemProps(item)} style={{ display: 'block' }}>
           <a href={item.data?.url}>
             <h3>{item.value}</h3>
             <img src={item.data?.image_url} alt={item.value} />
@@ -221,9 +221,6 @@ CustomRenderItem.args = {
         </div>
       ),
     },
-    {
-      indexSectionName: 'Search Suggestions',
-    },
   ],
 };
 addComponentStoryDescription(

src/types.ts

@@ -122,7 +122,11 @@ export type SectionConfiguration = {
   // This property will only take effect when using the component and not the hook
   displaySearchTermHighlights?: boolean;
   ref?: React.RefObject<HTMLElement>;
-  renderItem?: (props: { item: Item; query: string }) => ReactNode;
+  renderItem?: (props: {
+    item: Item;
+    query: string;
+    getItemProps: (item: Item) => any;
+  }) => ReactNode;
 };
 
 export interface AutocompleteSectionConfiguration extends SectionConfiguration {

src/utils.ts

@@ -115,8 +115,8 @@ ${templateCode}
 
 export const functionStrings = {
   onSubmit: `(submitEvent) => console.dir(submitEvent)`,
-  renderItem: `({ item, query }) => (
-                      <div>
+  renderItem: `({ item, query, getItemProps }) => (
+                      <div {...getItemProps(item)}>
                           <a href={item.data?.url}>
                             <h3>{item.value}</h3>
                             <img src={item.data?.image_url} alt={item.value} />