@constructor-io/constructorio-ui-autocomplete 1.23.17 → 1.23.19

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.displayShowAllResultsButtonDescription = exports.customRenderItemDescription = exports.translationsDescription = exports.fetchZeroStateOnFocusDescription = exports.debounceDescription = exports.termsWithImagesAndCountsDescription = exports.filteredSuggestionsDescription = exports.termsWithGroupSuggestionsDescription = exports.advancedParametersDefaultDescription = exports.advancedParametersDescription = exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDefault = exports.onSubmitDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientOptionsDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
+exports.displayShowAllResultsButtonDescription = exports.customRenderItemDescription = exports.translationsDescription = exports.fetchZeroStateOnFocusDescription = exports.debounceDescription = exports.termsWithImagesAndCountsDescription = exports.filteredSuggestionsDescription = exports.termsWithGroupSuggestionsDescription = exports.advancedParametersDefaultDescription = exports.advancedParametersDescription = exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDefault = exports.onSubmitDescription = exports.onIsOpenChangeDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientOptionsDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_M57QS8SMPdLdLx4x';
 /// //////////////////////////////
@@ -129,6 +129,7 @@ exports.displaySearchTermHighlightsDescription = `Use constructor's auto highlig
 exports.customSectionDescription = `Use a custom section, by managing and passing your own data, with \`"type": "custom"\` and \`"data":[{...}]\``;
 exports.onFocusDescription = `Pass an \`onFocus\` callback function to execute some code each time the user applies focus to the text input field`;
 exports.onChangeDescription = `Pass an \`onChange\` callback function to execute some code each time the user changes the value of the text input field`;
+exports.onIsOpenChangeDescription = `Pass an \`onIsOpenChange\` callback function to execute some code each time the dropdown state changes ie: close/open`;
 exports.onSubmitDescription = `Pass an \`onSubmit\` callback function to execute some code after a user submits the search form.
 
   Your callback function will be invoked with a submit event containing useful metadata about the submit event:

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -41,7 +41,7 @@ const convertLegacyParametersAndAddDefaults = (sections) => sections.map((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, } = memoizedOptions;
+    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) {
@@ -63,7 +63,7 @@ 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 });
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = (0, useDownShift_1.default)({ setQuery, items, onSubmit, cioClient, previousQuery, onIsOpenChange });
     // Log console errors
     (0, useConsoleErrors_1.default)(sections, activeSections);
     // Track recommendation view
@@ -108,7 +108,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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const downshift_1 = require("downshift");
 const utils_1 = require("../utils");
 let idCounter = 0;
-const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '' }) => (0, downshift_1.useCombobox)({
+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) || '',
@@ -50,5 +50,6 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
             }
         }
     },
+    onIsOpenChange,
 });
 exports.default = useDownShift;

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.17';
+exports.default = '1.23.19';

package/lib/mjs/constants.js

@@ -126,6 +126,7 @@ export const displaySearchTermHighlightsDescription = `Use constructor's auto hi
 export const customSectionDescription = `Use a custom section, by managing and passing your own data, with \`"type": "custom"\` and \`"data":[{...}]\``;
 export const onFocusDescription = `Pass an \`onFocus\` callback function to execute some code each time the user applies focus to the text input field`;
 export const onChangeDescription = `Pass an \`onChange\` callback function to execute some code each time the user changes the value of the text input field`;
+export const onIsOpenChangeDescription = `Pass an \`onIsOpenChange\` callback function to execute some code each time the dropdown state changes ie: close/open`;
 export const onSubmitDescription = `Pass an \`onSubmit\` callback function to execute some code after a user submits the search form.
 
   Your callback function will be invoked with a submit event containing useful metadata about the submit event:

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -37,7 +37,7 @@ const convertLegacyParametersAndAddDefaults = (sections) => sections.map((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, } = memoizedOptions;
+    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) {
@@ -59,7 +59,7 @@ 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 });
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery, onIsOpenChange });
     // Log console errors
     useConsoleErrors(sections, activeSections);
     // Track recommendation view
@@ -117,7 +117,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 = '' }) => useCombobox({
+const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', onIsOpenChange, }) => useCombobox({
     id: `cio-autocomplete-${idCounter++}`,
     items,
     itemToString: (item) => item?.value || '',
@@ -47,5 +47,6 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
             }
         }
     },
+    onIsOpenChange,
 });
 export default useDownShift;

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]);
+}

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

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import useDebouncedFetchSection from '../useDebouncedFetchSections';
+import useFetchRecommendationPod from '../useFetchRecommendationPod';
+import { isAutocompleteSection, isRecommendationsSection } from '../../typeGuards';
+export default function useSectionsResults(query, cioClient, activeSections, advancedParameters) {
+    // Fetch Autocomplete Results
+    const activeAutocompleteSections = useMemo(() => activeSections?.filter((config) => isAutocompleteSection(config)), [activeSections]);
+    const { sectionsData: autocompleteResults, request, totalNumResultsPerSection, } = useDebouncedFetchSection(query, cioClient, activeAutocompleteSections, advancedParameters);
+    // Fetch Recommendations Results
+    const activeRecommendationsSections = useMemo(() => activeSections?.filter((config) => isRecommendationsSection(config)), [activeSections]);
+    const { fetchRecommendationResults, recommendationsResults, podsData } = useFetchRecommendationPod(cioClient, activeRecommendationsSections, advancedParameters?.fetchZeroStateOnFocus);
+    return {
+        recommendations: {
+            results: recommendationsResults,
+            fetchRecommendationResults,
+            podsData,
+        },
+        autocomplete: {
+            results: autocompleteResults,
+            request,
+            totalNumResultsPerSection,
+        },
+    };
+}

package/lib/mjs/utils.js

@@ -130,14 +130,14 @@ export const getCioClient = (apiKey, cioJsClientOptions) => {
     }
     return null;
 };
-export const getActiveSectionsWithData = (activeSections, sectionResults, sectionsRefs) => {
+export const getActiveSectionsWithData = (activeSections, sectionsResults, sectionsRefs) => {
     const activeSectionsWithData = [];
-    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
@@ -148,8 +148,12 @@ export const getActiveSectionsWithData = (activeSections, sectionResults, sectio
                 break;
             default:
                 // Autocomplete
-                sectionData = sectionResults[sectionConfig.indexSectionName];
+                sectionData = sectionsResults[sectionConfig.indexSectionName];
         }
+        return sectionData;
+    };
+    activeSections?.forEach((sectionConfig, index) => {
+        const sectionData = getSectionData(sectionConfig);
         if (Array.isArray(sectionData)) {
             const section = {
                 ...sectionConfig,

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.23.17';
+export default '1.23.19';

package/lib/types/constants.d.ts

@@ -20,6 +20,7 @@ export declare const displaySearchTermHighlightsDescription = "Use constructor's
 export declare const customSectionDescription = "Use a custom section, by managing and passing your own data, with `\"type\": \"custom\"` and `\"data\":[{...}]`";
 export declare const onFocusDescription = "Pass an `onFocus` callback function to execute some code each time the user applies focus to the text input field";
 export declare const onChangeDescription = "Pass an `onChange` callback function to execute some code each time the user changes the value of the text input field";
+export declare const onIsOpenChangeDescription = "Pass an `onIsOpenChange` callback function to execute some code each time the dropdown state changes ie: close/open";
 export declare const onSubmitDescription = "Pass an `onSubmit` callback function to execute some code after a user submits the search form.\n\n  Your callback function will be invoked with a submit event containing useful metadata about the submit event:\n  - if the user submits the text input:\n    - the `query` field will provide the value of that input field\n  - if the user selects a suggested item from the dropdown list:\n    - the `originalQuery` field will provide the value of the input field that generated the selected item\n    - an `item` object with information about the suggestion that the user selected";
 export declare const onSubmitDefault: (submitEvent: AutocompleteSubmitEvent) => void;
 export declare const zeroStateSectionsDescription = "Use `zeroStateSections` to show suggestions after a user applies focus to the search input field and before they start typing a query";

package/lib/types/hooks/useDownShift.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UseComboboxReturnValue } from 'downshift';
+import { UseComboboxReturnValue, UseComboboxStateChange } from 'downshift';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { Item, OnSubmit } from '../types';
@@ -9,6 +9,7 @@ type UseDownShiftOptions = {
     onSubmit: OnSubmit;
     previousQuery?: string;
     cioClient: Nullable<ConstructorIOClient>;
+    onIsOpenChange?: (changes: UseComboboxStateChange<Item>) => void;
 };
 export type DownShift = UseComboboxReturnValue<Item>;
 type UseDownShift = (options: UseDownShiftOptions) => DownShift;

package/lib/types/hooks/{useSections.d.ts → useSections/index.d.ts}

@@ -1,11 +1,11 @@
 import ConstructorIO from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
-import { AdvancedParameters, UserDefinedSection, Section } from '../types';
+import { AdvancedParameters, UserDefinedSection } from '../../types';
 export default function useSections(query: string, cioClient: Nullable<ConstructorIO>, sections: UserDefinedSection[], zeroStateSections?: UserDefinedSection[], advancedParameters?: AdvancedParameters): {
     fetchRecommendationResults: () => Promise<void>;
     activeSections: UserDefinedSection[];
-    activeSectionsWithData: Section[];
-    zeroStateActiveSections: number | false | undefined;
+    activeSectionsWithData: import("../../types").Section[];
+    zeroStateActiveSections: boolean;
     request: Partial<import("@constructor-io/constructorio-client-javascript").AutocompleteRequestType>;
     totalNumResultsPerSection: Record<string, number>;
 };

package/lib/types/hooks/useSections/useActiveSections.d.ts

@@ -0,0 +1,6 @@
+import { PodData, UserDefinedSection } from '../../types';
+export default function useActiveSections(query: string, sections: UserDefinedSection[], podsData?: Record<string, PodData>, zeroStateSections?: UserDefinedSection[]): {
+    activeSections: UserDefinedSection[];
+    showZeroStateSections: boolean;
+    setActiveSections: import("react").Dispatch<import("react").SetStateAction<UserDefinedSection[]>>;
+};

package/lib/types/hooks/useSections/useActiveSectionsWithData.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+import { UserDefinedSection, Section, SectionsData } from '../../types';
+export default function useActiveSectionsWithData(sectionsResults: SectionsData, activeSections: UserDefinedSection[], sectionsRefs: React.MutableRefObject<RefObject<HTMLLIElement>[]>, query: string): Section[];

package/lib/types/hooks/useSections/useRemoveSections.d.ts

@@ -0,0 +1,2 @@
+import { PodData, UserDefinedSection } from '../../types';
+export default function useRemoveSections(sections: UserDefinedSection[], podsData: Record<string, PodData>, setActiveSections: any, showZeroStateSections: boolean, zeroStateSections?: UserDefinedSection[]): void;

package/lib/types/hooks/useSections/useSectionsResults.d.ts

@@ -0,0 +1,15 @@
+import ConstructorIO from '@constructor-io/constructorio-client-javascript';
+import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { AdvancedParameters, UserDefinedSection } from '../../types';
+export default function useSectionsResults(query: string, cioClient: Nullable<ConstructorIO>, activeSections: UserDefinedSection[], advancedParameters?: AdvancedParameters): {
+    recommendations: {
+        results: import("../../types").SectionsData;
+        fetchRecommendationResults: () => Promise<void>;
+        podsData: Record<string, import("../../types").PodData>;
+    };
+    autocomplete: {
+        results: import("../../types").SectionsData;
+        request: Partial<import("@constructor-io/constructorio-client-javascript").AutocompleteRequestType>;
+        totalNumResultsPerSection: Record<string, number>;
+    };
+};

package/lib/types/types.d.ts

@@ -1,4 +1,4 @@
-import { GetItemPropsOptions } from 'downshift';
+import { GetItemPropsOptions, UseComboboxStateChange } from 'downshift';
 import { ReactNode } from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { IAutocompleteParameters, SearchSuggestion as SearchSuggestionFromClient, Product as ProductFromClient, Item as ItemBase, AutocompleteRequestType, ConstructorClientOptions, RecommendationsParameters } from '@constructor-io/constructorio-client-javascript/lib/types';
@@ -25,6 +25,7 @@ export type CioAutocompleteProps = CioClientConfig & {
     onSubmit: OnSubmit;
     onFocus?: () => void;
     onChange?: (input: string) => void;
+    onIsOpenChange?: (changes: UseComboboxStateChange<Item>) => void;
     placeholder?: string;
     children?: ReactNode;
     sections?: UserDefinedSection[];

package/lib/types/utils.d.ts

@@ -37,7 +37,7 @@ export declare const functionStrings: {
 export declare const stringifyWithDefaults: (obj: any) => string;
 export declare const disableStoryActions: (story: any) => void;
 export declare const getCioClient: (apiKey?: string, cioJsClientOptions?: ConstructorClientOptions) => ConstructorIOClient | null;
-export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionResults: SectionsData, sectionsRefs: React.MutableRefObject<React.RefObject<HTMLLIElement>[]>) => Section[];
+export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionsResults: SectionsData, sectionsRefs: React.MutableRefObject<React.RefObject<HTMLLIElement>[]>) => Section[];
 export declare const escapeRegExp: (string: string) => string;
 export declare const trackRecommendationView: (target: HTMLElement, activeSectionsWithData: Section[], cioClient: Nullable<ConstructorIOClient>) => void;
 export declare const getItemsForActiveSections: (activeSectionsWithData: Section[]) => Item[];

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.23.17";
+declare const _default: "1.23.19";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.23.17",
+  "version": "1.23.19",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",