@constructor-io/constructorio-ui-autocomplete 1.23.18 → 1.23.20

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -12,6 +12,7 @@ const useConsoleErrors_1 = tslib_1.__importDefault(require("./useConsoleErrors")
 const useSections_1 = tslib_1.__importDefault(require("./useSections"));
 const useRecommendationsObserver_1 = tslib_1.__importDefault(require("./useRecommendationsObserver"));
 const typeGuards_1 = require("../typeGuards");
+const useNormalizedProps_1 = tslib_1.__importDefault(require("./useNormalizedProps"));
 exports.defaultSections = [
     {
         indexSectionName: 'Search Suggestions',
@@ -22,39 +23,9 @@ exports.defaultSections = [
         type: 'autocomplete',
     },
 ];
-const convertLegacyParametersAndAddDefaults = (sections) => sections.map((config) => {
-    if ((0, typeGuards_1.isRecommendationsSection)(config)) {
-        if (config.identifier && !config.podId) {
-            return Object.assign(Object.assign({}, config), { podId: config.identifier });
-        }
-        if (!config.indexSectionName) {
-            return Object.assign(Object.assign({}, config), { indexSectionName: 'Products' });
-        }
-    }
-    if ((0, typeGuards_1.isAutocompleteSection)(config)) {
-        if (config.identifier && !config.indexSectionName) {
-            return Object.assign(Object.assign({}, config), { indexSectionName: config.identifier });
-        }
-    }
-    return config;
-});
 const useCioAutocomplete = (options) => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const memoizedOptions = (0, react_1.useMemo)(() => options, [JSON.stringify(options)]);
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, getSearchResultsUrl, onIsOpenChange, } = memoizedOptions;
-    let { sections = exports.defaultSections, zeroStateSections } = memoizedOptions;
-    sections = (0, react_1.useMemo)(() => {
-        if (sections) {
-            return convertLegacyParametersAndAddDefaults(sections);
-        }
-        return sections;
-    }, [sections]);
-    zeroStateSections = (0, react_1.useMemo)(() => {
-        if (zeroStateSections) {
-            return convertLegacyParametersAndAddDefaults(zeroStateSections);
-        }
-        return zeroStateSections;
-    }, [zeroStateSections]);
+    const { sections, zeroStateSections, cioJsClientOptions, advancedParameters } = (0, useNormalizedProps_1.default)(options);
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', defaultInput, getSearchResultsUrl } = options, rest = tslib_1.__rest(options, ["onSubmit", "onChange", "openOnFocus", "apiKey", "cioJsClient", "placeholder", "autocompleteClassName", "defaultInput", "getSearchResultsUrl"]);
     const [query, setQuery] = (0, react_1.useState)(defaultInput || '');
     const previousQuery = (0, usePrevious_1.default)(query);
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient, cioJsClientOptions });
@@ -63,7 +34,11 @@ const useCioAutocomplete = (options) => {
     const features = (0, react_1.useMemo)(() => (0, utils_1.getFeatures)(request), [request]);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
     const items = (0, react_1.useMemo)(() => (0, utils_1.getItemsForActiveSections)(activeSectionsWithData), [activeSectionsWithData]);
-    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = (0, useDownShift_1.default)({ setQuery, items, onSubmit, cioClient, previousQuery, onIsOpenChange });
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = (0, useDownShift_1.default)(Object.assign({ setQuery,
+        items,
+        onSubmit,
+        cioClient,
+        previousQuery }, rest));
     // Log console errors
     (0, useConsoleErrors_1.default)(sections, activeSections);
     // Track recommendation view
@@ -108,7 +83,7 @@ const useCioAutocomplete = (options) => {
                     openMenu();
                 }
                 try {
-                    if ((advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.fetchZeroStateOnFocus) && (items === null || items === void 0 ? void 0 : items.length) === 0) {
+                    if (advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.fetchZeroStateOnFocus) {
                         fetchRecommendationResults();
                     }
                     (_a = cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker) === null || _a === void 0 ? void 0 : _a.trackInputFocus();

package/lib/cjs/hooks/useDownShift.js

@@ -1,55 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const downshift_1 = require("downshift");
 const utils_1 = require("../utils");
 let idCounter = 0;
-const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', onIsOpenChange, }) => (0, downshift_1.useCombobox)({
-    id: `cio-autocomplete-${idCounter++}`,
-    items,
-    itemToString: (item) => (item === null || item === void 0 ? void 0 : item.value) || '',
-    onSelectedItemChange({ selectedItem }) {
-        var _a;
-        if (selectedItem) {
-            if (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) {
-                if (onSubmit)
-                    onSubmit({ item: selectedItem, originalQuery: previousQuery });
-                try {
-                    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.section) === 'Search Suggestions') {
-                        setQuery(selectedItem.value || '');
-                        (0, utils_1.trackSearchSubmit)(cioClient, selectedItem.value, {
-                            originalQuery: previousQuery,
-                        });
+const useDownShift = (_a) => {
+    var { setQuery, items, onSubmit, cioClient, previousQuery = '' } = _a, rest = tslib_1.__rest(_a, ["setQuery", "items", "onSubmit", "cioClient", "previousQuery"]);
+    return (0, downshift_1.useCombobox)(Object.assign({ id: `cio-autocomplete-${idCounter++}`, // eslint-disable-line
+        items, itemToString: (item) => (item === null || item === void 0 ? void 0 : item.value) || '', onSelectedItemChange({ selectedItem }) {
+            var _a;
+            if (selectedItem) {
+                if (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) {
+                    if (onSubmit)
+                        onSubmit({ item: selectedItem, originalQuery: previousQuery });
+                    try {
+                        if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.section) === 'Search Suggestions') {
+                            setQuery(selectedItem.value || '');
+                            (0, utils_1.trackSearchSubmit)(cioClient, selectedItem.value, {
+                                originalQuery: previousQuery,
+                            });
+                        }
+                        // Autocomplete Select tracking
+                        // Recommendation Select tracking
+                        if (selectedItem.podId && ((_a = selectedItem.data) === null || _a === void 0 ? void 0 : _a.id) && selectedItem.strategy) {
+                            cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackRecommendationClick({
+                                itemName: selectedItem.value,
+                                itemId: selectedItem.data.id,
+                                variationId: selectedItem.data.variation_id,
+                                podId: selectedItem.podId,
+                                strategyId: selectedItem.strategy.id,
+                                section: selectedItem.section,
+                                resultId: selectedItem.result_id,
+                            });
+                            // Select tracking for all other Constructor sections:
+                            // (ie: Search Suggestions, Products, Custom Cio sections, etc)
+                            // This does not apply to custom user defined sections that aren't part of Constructor index
+                        }
+                        else if (selectedItem.result_id) {
+                            cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackAutocompleteSelect(selectedItem.value, {
+                                originalQuery: previousQuery,
+                                section: selectedItem.section,
+                            });
+                        }
                     }
-                    // Autocomplete Select tracking
-                    // Recommendation Select tracking
-                    if (selectedItem.podId && ((_a = selectedItem.data) === null || _a === void 0 ? void 0 : _a.id) && selectedItem.strategy) {
-                        cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackRecommendationClick({
-                            itemName: selectedItem.value,
-                            itemId: selectedItem.data.id,
-                            variationId: selectedItem.data.variation_id,
-                            podId: selectedItem.podId,
-                            strategyId: selectedItem.strategy.id,
-                            section: selectedItem.section,
-                            resultId: selectedItem.result_id,
-                        });
-                        // Select tracking for all other Constructor sections:
-                        // (ie: Search Suggestions, Products, Custom Cio sections, etc)
-                        // This does not apply to custom user defined sections that aren't part of Constructor index
+                    catch (error) {
+                        // eslint-disable-next-line no-console
+                        console.log(error);
                     }
-                    else if (selectedItem.result_id) {
-                        cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackAutocompleteSelect(selectedItem.value, {
-                            originalQuery: previousQuery,
-                            section: selectedItem.section,
-                        });
-                    }
-                }
-                catch (error) {
-                    // eslint-disable-next-line no-console
-                    console.log(error);
                 }
             }
-        }
-    },
-    onIsOpenChange,
-});
+        } }, rest));
+};
 exports.default = useDownShift;

package/lib/cjs/hooks/useNormalizedProps.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultSections = void 0;
+/* eslint-disable react-hooks/exhaustive-deps */
+const react_1 = require("react");
+const typeGuards_1 = require("../typeGuards");
+exports.defaultSections = [
+    {
+        indexSectionName: 'Search Suggestions',
+        type: 'autocomplete',
+    },
+    {
+        indexSectionName: 'Products',
+        type: 'autocomplete',
+    },
+];
+const convertLegacyParametersAndAddDefaults = (sections) => sections.map((config) => {
+    if ((0, typeGuards_1.isRecommendationsSection)(config)) {
+        if (config.identifier && !config.podId) {
+            return Object.assign(Object.assign({}, config), { podId: config.identifier });
+        }
+        if (!config.indexSectionName) {
+            return Object.assign(Object.assign({}, config), { indexSectionName: 'Products' });
+        }
+    }
+    if ((0, typeGuards_1.isAutocompleteSection)(config)) {
+        if (config.identifier && !config.indexSectionName) {
+            return Object.assign(Object.assign({}, config), { indexSectionName: config.identifier });
+        }
+    }
+    return config;
+});
+const normalizeSections = (sections) => {
+    if (sections) {
+        return convertLegacyParametersAndAddDefaults(sections);
+    }
+    return sections;
+};
+// Normalize and Memoize Objects to prevent infinite rerenders if users pass object literals to useCioAutocomplete
+const useNormalizedProps = (options) => {
+    const { sections = exports.defaultSections, zeroStateSections, cioJsClientOptions, advancedParameters, } = options;
+    const sectionsMemoized = (0, react_1.useMemo)(() => normalizeSections(sections), [JSON.stringify(sections)]);
+    const zeroStateSectionsMemoized = (0, react_1.useMemo)(() => normalizeSections(zeroStateSections), [JSON.stringify(zeroStateSections)]);
+    const cioJsClientOptionsMemoized = (0, react_1.useMemo)(() => cioJsClientOptions, [JSON.stringify(cioJsClientOptions)]);
+    const advancedParametersMemoized = (0, react_1.useMemo)(() => advancedParameters, [JSON.stringify(advancedParameters)]);
+    return {
+        sections: sectionsMemoized,
+        zeroStateSections: zeroStateSectionsMemoized,
+        cioJsClientOptions: cioJsClientOptionsMemoized,
+        advancedParameters: advancedParametersMemoized,
+    };
+};
+exports.default = useNormalizedProps;

package/lib/cjs/hooks/useSections/index.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable max-params */
+const react_1 = require("react");
+const useActiveSections_1 = tslib_1.__importDefault(require("./useActiveSections"));
+const useSectionsResults_1 = tslib_1.__importDefault(require("./useSectionsResults"));
+const useActiveSectionsWithData_1 = tslib_1.__importDefault(require("./useActiveSectionsWithData"));
+const useRemoveSections_1 = tslib_1.__importDefault(require("./useRemoveSections"));
+function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
+    const [podsData, setPodsData] = (0, react_1.useState)({});
+    // Get Active Sections defined by configuration object
+    const { activeSections, showZeroStateSections, setActiveSections } = (0, useActiveSections_1.default)(query, sections, podsData, zeroStateSections);
+    // create refs for active sections
+    const sectionsRefs = (0, react_1.useRef)(activeSections.map(() => (0, react_1.createRef)()));
+    // Get API results for each active section
+    const { recommendations, autocomplete } = (0, useSectionsResults_1.default)(query, cioClient, activeSections, advancedParameters);
+    // Access the Pods Data from the Recommendations response to update Active Sections configuration
+    (0, react_1.useEffect)(() => {
+        if (!recommendations.podsData) {
+            setPodsData(recommendations.podsData);
+        }
+    }, [recommendations.podsData]);
+    (0, useRemoveSections_1.default)(sections, podsData, setActiveSections, showZeroStateSections, zeroStateSections);
+    // Combine recommendations and autocomplete results in sectionsResults
+    const sectionsResults = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, autocomplete.results), recommendations.results)), [autocomplete.results, recommendations.results]);
+    // Return current active sections populated with data from the API response sectionsResults
+    const activeSectionsWithData = (0, useActiveSectionsWithData_1.default)(sectionsResults, activeSections, sectionsRefs, query);
+    return {
+        fetchRecommendationResults: recommendations.fetchRecommendationResults,
+        activeSections,
+        activeSectionsWithData,
+        zeroStateActiveSections: showZeroStateSections,
+        request: autocomplete.request,
+        totalNumResultsPerSection: autocomplete.totalNumResultsPerSection,
+    };
+}
+exports.default = useSections;

package/lib/cjs/hooks/useSections/useActiveSections.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const typeGuards_1 = require("../../typeGuards");
+function useActiveSections(query, sections, podsData, zeroStateSections) {
+    const showZeroStateSections = !query.length && !!(zeroStateSections === null || zeroStateSections === void 0 ? void 0 : zeroStateSections.length);
+    const [activeSections, setActiveSections] = (0, react_1.useState)(showZeroStateSections ? zeroStateSections : sections);
+    // Merge Recommendation Pods Display Name from Dashboard
+    const activeSectionsTransformed = (0, react_1.useMemo)(() => activeSections.map((config) => {
+        const mergedConfig = config;
+        if ((0, typeGuards_1.isRecommendationsSection)(config)) {
+            const podData = podsData === null || podsData === void 0 ? void 0 : podsData[config.podId];
+            const libraryDisplayName = config.displayName;
+            const dashboardDisplayName = podData === null || podData === void 0 ? void 0 : podData.displayName;
+            mergedConfig.displayName = libraryDisplayName || dashboardDisplayName;
+        }
+        return mergedConfig;
+    }), [activeSections, podsData]);
+    return {
+        activeSections: activeSectionsTransformed,
+        showZeroStateSections,
+        setActiveSections,
+    };
+}
+exports.default = useActiveSections;

package/lib/cjs/hooks/useSections/useActiveSectionsWithData.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+function useActiveSectionsWithData(sectionsResults, activeSections, sectionsRefs, query) {
+    const [activeSectionsWithData, setActiveSectionsWithData] = (0, react_1.useState)([]);
+    // Add to active sections the results data and refs when autocomplete results or recommendation results fetched
+    (0, react_1.useEffect)(() => {
+        const activeSectionsWithDataValue = (0, utils_1.getActiveSectionsWithData)(activeSections, sectionsResults, sectionsRefs);
+        if (activeSectionsWithDataValue.length || !query) {
+            setActiveSectionsWithData(activeSectionsWithDataValue);
+        }
+    }, [activeSections, sectionsResults, sectionsRefs, query]);
+    return activeSectionsWithData;
+}
+exports.default = useActiveSectionsWithData;

package/lib/cjs/hooks/useSections/useRemoveSections.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable max-params */
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+function useRemoveSections(sections, podsData, setActiveSections, showZeroStateSections, zeroStateSections) {
+    // Remove sections if necessary
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const features = (0, utils_1.getFeatures)((_b = (_a = Object.values(podsData || {})) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.request);
+        if (showZeroStateSections) {
+            if (!features.featureDisplayZeroStateRecommendations) {
+                setActiveSections([]);
+            }
+            else {
+                setActiveSections(zeroStateSections);
+            }
+        }
+        else {
+            setActiveSections(sections);
+        }
+    }, [zeroStateSections, showZeroStateSections, sections, podsData, setActiveSections]);
+}
+exports.default = useRemoveSections;

package/lib/cjs/hooks/useSections/useSectionsResults.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const useDebouncedFetchSections_1 = tslib_1.__importDefault(require("../useDebouncedFetchSections"));
+const useFetchRecommendationPod_1 = tslib_1.__importDefault(require("../useFetchRecommendationPod"));
+const typeGuards_1 = require("../../typeGuards");
+function useSectionsResults(query, cioClient, activeSections, advancedParameters) {
+    // Fetch Autocomplete Results
+    const activeAutocompleteSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => (0, typeGuards_1.isAutocompleteSection)(config)), [activeSections]);
+    const { sectionsData: autocompleteResults, request, totalNumResultsPerSection, } = (0, useDebouncedFetchSections_1.default)(query, cioClient, activeAutocompleteSections, advancedParameters);
+    // Fetch Recommendations Results
+    const activeRecommendationsSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => (0, typeGuards_1.isRecommendationsSection)(config)), [activeSections]);
+    const { fetchRecommendationResults, recommendationsResults, podsData } = (0, useFetchRecommendationPod_1.default)(cioClient, activeRecommendationsSections, advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.fetchZeroStateOnFocus);
+    return {
+        recommendations: {
+            results: recommendationsResults,
+            fetchRecommendationResults,
+            podsData,
+        },
+        autocomplete: {
+            results: autocompleteResults,
+            request,
+            totalNumResultsPerSection,
+        },
+    };
+}
+exports.default = useSectionsResults;

package/lib/cjs/utils.js

@@ -144,14 +144,14 @@ const getCioClient = (apiKey, cioJsClientOptions) => {
     return null;
 };
 exports.getCioClient = getCioClient;
-const getActiveSectionsWithData = (activeSections, sectionResults, sectionsRefs) => {
+const getActiveSectionsWithData = (activeSections, sectionsResults, sectionsRefs) => {
     const activeSectionsWithData = [];
-    activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((sectionConfig, index) => {
+    const getSectionData = (sectionConfig) => {
         const { type } = sectionConfig;
         let sectionData;
         switch (type) {
             case 'recommendations':
-                sectionData = sectionResults[sectionConfig.podId];
+                sectionData = sectionsResults[sectionConfig.podId];
                 break;
             case 'custom':
                 // Copy id from data to the top level
@@ -162,8 +162,12 @@ const getActiveSectionsWithData = (activeSections, sectionResults, sectionsRefs)
                 break;
             default:
                 // Autocomplete
-                sectionData = sectionResults[sectionConfig.indexSectionName];
+                sectionData = sectionsResults[sectionConfig.indexSectionName];
         }
+        return sectionData;
+    };
+    activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((sectionConfig, index) => {
+        const sectionData = getSectionData(sectionConfig);
         if (Array.isArray(sectionData)) {
             const section = Object.assign(Object.assign({}, sectionConfig), { data: sectionData });
             // If ref passed as part of `SectionConfiguration`, use it.

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.23.18';
+exports.default = '1.23.20';

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -7,7 +7,8 @@ import { getItemPosition, getItemsForActiveSections, getFeatures, trackRecommend
 import useConsoleErrors from './useConsoleErrors';
 import useSections from './useSections';
 import useRecommendationsObserver from './useRecommendationsObserver';
-import { isAutocompleteSection, isCustomSection, isRecommendationsSection } from '../typeGuards';
+import { isCustomSection, isRecommendationsSection } from '../typeGuards';
+import useNormalizedProps from './useNormalizedProps';
 export const defaultSections = [
     {
         indexSectionName: 'Search Suggestions',
@@ -18,39 +19,9 @@ export const defaultSections = [
         type: 'autocomplete',
     },
 ];
-const convertLegacyParametersAndAddDefaults = (sections) => sections.map((config) => {
-    if (isRecommendationsSection(config)) {
-        if (config.identifier && !config.podId) {
-            return { ...config, podId: config.identifier };
-        }
-        if (!config.indexSectionName) {
-            return { ...config, indexSectionName: 'Products' };
-        }
-    }
-    if (isAutocompleteSection(config)) {
-        if (config.identifier && !config.indexSectionName) {
-            return { ...config, indexSectionName: config.identifier };
-        }
-    }
-    return config;
-});
 const useCioAutocomplete = (options) => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const memoizedOptions = useMemo(() => options, [JSON.stringify(options)]);
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, getSearchResultsUrl, onIsOpenChange, } = memoizedOptions;
-    let { sections = defaultSections, zeroStateSections } = memoizedOptions;
-    sections = useMemo(() => {
-        if (sections) {
-            return convertLegacyParametersAndAddDefaults(sections);
-        }
-        return sections;
-    }, [sections]);
-    zeroStateSections = useMemo(() => {
-        if (zeroStateSections) {
-            return convertLegacyParametersAndAddDefaults(zeroStateSections);
-        }
-        return zeroStateSections;
-    }, [zeroStateSections]);
+    const { sections, zeroStateSections, cioJsClientOptions, advancedParameters } = useNormalizedProps(options);
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', defaultInput, getSearchResultsUrl, ...rest } = options;
     const [query, setQuery] = useState(defaultInput || '');
     const previousQuery = usePrevious(query);
     const cioClient = useCioClient({ apiKey, cioJsClient, cioJsClientOptions });
@@ -59,7 +30,14 @@ const useCioAutocomplete = (options) => {
     const features = useMemo(() => getFeatures(request), [request]);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
     const items = useMemo(() => getItemsForActiveSections(activeSectionsWithData), [activeSectionsWithData]);
-    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery, onIsOpenChange });
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = useDownShift({
+        setQuery,
+        items,
+        onSubmit,
+        cioClient,
+        previousQuery,
+        ...rest,
+    });
     // Log console errors
     useConsoleErrors(sections, activeSections);
     // Track recommendation view
@@ -117,7 +95,7 @@ const useCioAutocomplete = (options) => {
                     openMenu();
                 }
                 try {
-                    if (advancedParameters?.fetchZeroStateOnFocus && items?.length === 0) {
+                    if (advancedParameters?.fetchZeroStateOnFocus) {
                         fetchRecommendationResults();
                     }
                     cioClient?.tracker?.trackInputFocus();

package/lib/mjs/hooks/useDownShift.js

@@ -1,7 +1,7 @@
 import { useCombobox } from 'downshift';
 import { trackSearchSubmit } from '../utils';
 let idCounter = 0;
-const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', onIsOpenChange, }) => useCombobox({
+const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', ...rest }) => useCombobox({
     id: `cio-autocomplete-${idCounter++}`,
     items,
     itemToString: (item) => item?.value || '',
@@ -47,6 +47,6 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
             }
         }
     },
-    onIsOpenChange,
+    ...rest,
 });
 export default useDownShift;

package/lib/mjs/hooks/useNormalizedProps.js

@@ -0,0 +1,50 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useMemo } from 'react';
+import { isAutocompleteSection, isRecommendationsSection } from '../typeGuards';
+export const defaultSections = [
+    {
+        indexSectionName: 'Search Suggestions',
+        type: 'autocomplete',
+    },
+    {
+        indexSectionName: 'Products',
+        type: 'autocomplete',
+    },
+];
+const convertLegacyParametersAndAddDefaults = (sections) => sections.map((config) => {
+    if (isRecommendationsSection(config)) {
+        if (config.identifier && !config.podId) {
+            return { ...config, podId: config.identifier };
+        }
+        if (!config.indexSectionName) {
+            return { ...config, indexSectionName: 'Products' };
+        }
+    }
+    if (isAutocompleteSection(config)) {
+        if (config.identifier && !config.indexSectionName) {
+            return { ...config, indexSectionName: config.identifier };
+        }
+    }
+    return config;
+});
+const normalizeSections = (sections) => {
+    if (sections) {
+        return convertLegacyParametersAndAddDefaults(sections);
+    }
+    return sections;
+};
+// Normalize and Memoize Objects to prevent infinite rerenders if users pass object literals to useCioAutocomplete
+const useNormalizedProps = (options) => {
+    const { sections = defaultSections, zeroStateSections, cioJsClientOptions, advancedParameters, } = options;
+    const sectionsMemoized = useMemo(() => normalizeSections(sections), [JSON.stringify(sections)]);
+    const zeroStateSectionsMemoized = useMemo(() => normalizeSections(zeroStateSections), [JSON.stringify(zeroStateSections)]);
+    const cioJsClientOptionsMemoized = useMemo(() => cioJsClientOptions, [JSON.stringify(cioJsClientOptions)]);
+    const advancedParametersMemoized = useMemo(() => advancedParameters, [JSON.stringify(advancedParameters)]);
+    return {
+        sections: sectionsMemoized,
+        zeroStateSections: zeroStateSectionsMemoized,
+        cioJsClientOptions: cioJsClientOptionsMemoized,
+        advancedParameters: advancedParametersMemoized,
+    };
+};
+export default useNormalizedProps;

package/lib/mjs/hooks/useSections/index.js

@@ -0,0 +1,34 @@
+/* eslint-disable max-params */
+import { createRef, useEffect, useMemo, useRef, useState } from 'react';
+import useActiveSections from './useActiveSections';
+import useSectionsResults from './useSectionsResults';
+import useActiveSectionsWithData from './useActiveSectionsWithData';
+import useRemoveSections from './useRemoveSections';
+export default function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
+    const [podsData, setPodsData] = useState({});
+    // Get Active Sections defined by configuration object
+    const { activeSections, showZeroStateSections, setActiveSections } = useActiveSections(query, sections, podsData, zeroStateSections);
+    // create refs for active sections
+    const sectionsRefs = useRef(activeSections.map(() => createRef()));
+    // Get API results for each active section
+    const { recommendations, autocomplete } = useSectionsResults(query, cioClient, activeSections, advancedParameters);
+    // Access the Pods Data from the Recommendations response to update Active Sections configuration
+    useEffect(() => {
+        if (!recommendations.podsData) {
+            setPodsData(recommendations.podsData);
+        }
+    }, [recommendations.podsData]);
+    useRemoveSections(sections, podsData, setActiveSections, showZeroStateSections, zeroStateSections);
+    // Combine recommendations and autocomplete results in sectionsResults
+    const sectionsResults = useMemo(() => ({ ...autocomplete.results, ...recommendations.results }), [autocomplete.results, recommendations.results]);
+    // Return current active sections populated with data from the API response sectionsResults
+    const activeSectionsWithData = useActiveSectionsWithData(sectionsResults, activeSections, sectionsRefs, query);
+    return {
+        fetchRecommendationResults: recommendations.fetchRecommendationResults,
+        activeSections,
+        activeSectionsWithData,
+        zeroStateActiveSections: showZeroStateSections,
+        request: autocomplete.request,
+        totalNumResultsPerSection: autocomplete.totalNumResultsPerSection,
+    };
+}

package/lib/mjs/hooks/useSections/useActiveSections.js

@@ -0,0 +1,22 @@
+import { useMemo, useState } from 'react';
+import { isRecommendationsSection } from '../../typeGuards';
+export default function useActiveSections(query, sections, podsData, zeroStateSections) {
+    const showZeroStateSections = !query.length && !!zeroStateSections?.length;
+    const [activeSections, setActiveSections] = useState(showZeroStateSections ? zeroStateSections : sections);
+    // Merge Recommendation Pods Display Name from Dashboard
+    const activeSectionsTransformed = useMemo(() => activeSections.map((config) => {
+        const mergedConfig = config;
+        if (isRecommendationsSection(config)) {
+            const podData = podsData?.[config.podId];
+            const libraryDisplayName = config.displayName;
+            const dashboardDisplayName = podData?.displayName;
+            mergedConfig.displayName = libraryDisplayName || dashboardDisplayName;
+        }
+        return mergedConfig;
+    }), [activeSections, podsData]);
+    return {
+        activeSections: activeSectionsTransformed,
+        showZeroStateSections,
+        setActiveSections,
+    };
+}

package/lib/mjs/hooks/useSections/useActiveSectionsWithData.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+import { getActiveSectionsWithData } from '../../utils';
+export default function useActiveSectionsWithData(sectionsResults, activeSections, sectionsRefs, query) {
+    const [activeSectionsWithData, setActiveSectionsWithData] = useState([]);
+    // Add to active sections the results data and refs when autocomplete results or recommendation results fetched
+    useEffect(() => {
+        const activeSectionsWithDataValue = getActiveSectionsWithData(activeSections, sectionsResults, sectionsRefs);
+        if (activeSectionsWithDataValue.length || !query) {
+            setActiveSectionsWithData(activeSectionsWithDataValue);
+        }
+    }, [activeSections, sectionsResults, sectionsRefs, query]);
+    return activeSectionsWithData;
+}

package/lib/mjs/hooks/useSections/useRemoveSections.js

@@ -0,0 +1,20 @@
+/* eslint-disable max-params */
+import { useEffect } from 'react';
+import { getFeatures } from '../../utils';
+export default function useRemoveSections(sections, podsData, setActiveSections, showZeroStateSections, zeroStateSections) {
+    // Remove sections if necessary
+    useEffect(() => {
+        const features = getFeatures(Object.values(podsData || {})?.[0]?.request);
+        if (showZeroStateSections) {
+            if (!features.featureDisplayZeroStateRecommendations) {
+                setActiveSections([]);
+            }
+            else {
+                setActiveSections(zeroStateSections);
+            }
+        }
+        else {
+            setActiveSections(sections);
+        }
+    }, [zeroStateSections, showZeroStateSections, sections, podsData, setActiveSections]);
+}