Merge branch 'main' into ci-4083-autocomplete-os-ui-enable-forcing-into-testing-cells-for-ui

Author: Viktor Zavala

package-lock.json

@@ -221,7 +221,7 @@ describe('CioAutocomplete Client-Side Rendering', () => {
 
       options.forEach((option) => {
         const suggestionCount = option.querySelector('.cio-suggestion-count');
-        expect(suggestionCount).toBeInTheDocument();
+        expect(suggestionCount).not.toBeInTheDocument();
       });
     });
   });

spec/Components/CioAutocomplete/CioAutocomplete.test.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/SectionItem/CustomSectionItem.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 { translate } from '../../../utils/helpers';
 import { camelToStartCase } from '../../../utils/format';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
@@ -18,7 +19,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();
@@ -64,7 +65,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/components/Autocomplete/SectionItemsList/SectionItemsList.tsx

@@ -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.`;

src/constants.ts

@@ -21,6 +21,7 @@ import useSections from './useSections';
 import useRecommendationsObserver from './useRecommendationsObserver';
 import { isCustomSection, isRecommendationsSection } from '../typeGuards';
 import useNormalizedProps from './useNormalizedProps';
+import useCustomBlur from './useCustomBlur';
 
 export const defaultSections: UserDefinedSection[] = [
   {
@@ -88,6 +89,8 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
     ...rest,
   });
 
+  useCustomBlur(isOpen, closeMenu, autocompleteClassName);
+
   // Log console errors
   useConsoleErrors(sections, activeSections);
 

src/hooks/useCioAutocomplete.ts

@@ -0,0 +1,21 @@
+import { useCallback, useEffect } from 'react';
+
+const useCustomBlur = (isOpen: boolean, closeMenu: () => void, autocompleteClassName: string) => {
+  const handleDocumentClick = useCallback(
+    (event: MouseEvent) => {
+      if (isOpen && !(event.target as HTMLElement)?.closest(`.${autocompleteClassName}`)) {
+        closeMenu();
+      }
+    },
+    [closeMenu, isOpen, autocompleteClassName]
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleDocumentClick);
+    return () => {
+      document.removeEventListener('mousedown', handleDocumentClick);
+    };
+  }, [handleDocumentClick]);
+};
+
+export default useCustomBlur;

src/hooks/useCustomBlur.ts

@@ -69,6 +69,15 @@ const useDownShift: UseDownShift = ({
         }
       }
     },
+    stateReducer: (state, actionAndChanges) => {
+      const { type, changes } = actionAndChanges;
+
+      // Override dropdown close on blur
+      if (type === useCombobox.stateChangeTypes.InputBlur) {
+        return { ...changes, isOpen: state.isOpen };
+      }
+      return changes;
+    },
     ...rest,
   });
 

src/hooks/useDownShift.ts

@@ -484,7 +484,7 @@ InGroupSuggestions.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.type(canvas.getByTestId('cio-input'), 'socks', { delay: 100 });
   await sleep(1000);
-  expect(canvas.getAllByText('in Socks').length).toEqual(1);
+  expect(canvas.getAllByText('in Socks & Underwear').length).toEqual(1);
 };
 
 export const InGroupSuggestionsTwo = ComponentTemplate.bind({});

src/stories/tests/ComponentTests.stories.tsx

@@ -414,7 +414,7 @@ InGroupSuggestions.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.type(canvas.getByTestId('cio-input'), 'socks', { delay: 100 });
   await sleep(1000);
-  expect(canvas.getAllByText('in Socks').length).toEqual(1);
+  expect(canvas.getAllByText('in Socks & Underwear').length).toEqual(1);
 };
 
 export const InGroupSuggestionsTwo = HooksTemplate.bind({});