Support renderItem in vanilla JS (#198)

* Support renderItem in vanilla JS

* Address comments

Author: mocca102

src/components/Autocomplete/SectionItem/CustomSectionItem.tsx

@@ -0,0 +1,42 @@
+import React, { ReactNode, useContext, useMemo, useEffect, useRef, isValidElement } from 'react';
+import { Item } from '../../../types';
+import { CioAutocompleteContext } from '../CioAutocompleteProvider';
+
+interface CustomItemProps {
+  item: Item;
+  renderItem: (props: {
+    item: Item;
+    query: string;
+    getItemProps: (item: Item) => any;
+  }) => HTMLElement | ReactNode;
+  query: string;
+}
+
+export default function CustomSectionItem(props: CustomItemProps) {
+  const { renderItem, item, query } = props;
+  const { getItemProps } = useContext(CioAutocompleteContext);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const customElement = useMemo(() => renderItem({ item, query, getItemProps }), [item]);
+
+  const isDomElement = customElement instanceof HTMLElement;
+  const isReactNode = isValidElement(customElement);
+
+  useEffect(() => {
+    if (isDomElement && ref.current) {
+      ref.current.innerHTML = ''; // Clear previous content
+      ref.current.appendChild(customElement);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [item]);
+
+  if (isReactNode) {
+    return customElement;
+  }
+
+  if (isDomElement) {
+    return <div {...getItemProps(item)} ref={ref} />;
+  }
+  return null;
+}

src/components/Autocomplete/SectionItemsList/SectionItemsList.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, useContext } from 'react';
 import { Section } from '../../../types';
 import SectionItem from '../SectionItem/SectionItem';
+import CustomSectionItem from '../SectionItem/CustomSectionItem';
 import { camelToStartCase, translate } from '../../../utils';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 import NoResults from '../AutocompleteResults/NoResults';
@@ -17,7 +18,7 @@ type SectionItemsListProps = {
 
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList: RenderSectionItemsList = function ({ section }) {
-  const { getSectionProps, query, getFormProps, advancedParameters, getItemProps } =
+  const { getSectionProps, query, getFormProps, advancedParameters } =
     useContext(CioAutocompleteContext);
   const { displayShowAllResultsButton, translations } = advancedParameters || {};
   const { onSubmit } = getFormProps();
@@ -63,7 +64,14 @@ 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, getItemProps });
+            return (
+              <CustomSectionItem
+                renderItem={section.renderItem}
+                item={item}
+                query={query}
+                key={item.id}
+              />
+            );
           }
           return (
             <SectionItem

src/constants.ts

@@ -262,5 +262,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.
+- Supports both ReactNode and HTMLElement as a return type
 `;
 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.`;