@constructor-io/constructorio-ui-autocomplete 1.6.0 → 1.7.1

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -5,11 +5,11 @@ const tslib_1 = require("tslib");
 const react_1 = require("react");
 const useCioClient_1 = tslib_1.__importDefault(require("./useCioClient"));
 const useDownShift_1 = tslib_1.__importDefault(require("./useDownShift"));
-const useDebouncedFetchSections_1 = tslib_1.__importDefault(require("./useDebouncedFetchSections"));
-const useFetchRecommendationPod_1 = tslib_1.__importDefault(require("./useFetchRecommendationPod"));
 const usePrevious_1 = tslib_1.__importDefault(require("./usePrevious"));
 const utils_1 = require("../utils");
-const typeGuards_1 = require("../typeGuards");
+const useConsoleErrors_1 = tslib_1.__importDefault(require("./useConsoleErrors"));
+const useSections_1 = tslib_1.__importDefault(require("./useSections"));
+const useItems_1 = tslib_1.__importDefault(require("./useItems"));
 exports.defaultSections = [
     {
         identifier: 'Search Suggestions',
@@ -21,50 +21,18 @@ exports.defaultSections = [
     },
 ];
 const useCioAutocomplete = (options) => {
-    const defaultPlaceholder = 'What can we help you find today?';
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = defaultPlaceholder, sections = exports.defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters = {}, } = options;
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = 'What can we help you find today?', sections = exports.defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters = {}, } = options;
     const [query, setQuery] = (0, react_1.useState)('');
     const previousQuery = (0, usePrevious_1.default)(query);
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
-    const zeroStateSectionsActive = !query.length && zeroStateSections;
-    let activeSections = zeroStateSectionsActive ? zeroStateSections : sections;
-    if (sections && !Array.isArray(sections)) {
-        // eslint-disable-next-line
-        console.error('useCioAutocomplete expects sections to reference an array of section configuration objects');
-        activeSections = [];
-    }
-    if (zeroStateSections && !Array.isArray(zeroStateSections)) {
-        // eslint-disable-next-line
-        console.error('useCioAutocomplete expects zeroStateSections to reference an array of section configuration objects');
-        activeSections = [];
-    }
-    const autocompleteSections = activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'autocomplete' || !config.type);
-    const recommendationsSections = activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'recommendations');
-    const autocompleteResults = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
-    const recommendationsResults = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections);
-    const sectionResults = Object.assign(Object.assign({}, autocompleteResults), recommendationsResults);
-    const activeSectionsWithData = [];
-    activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((config) => {
-        const { identifier } = config;
-        let data;
-        if ((0, typeGuards_1.isCustomSection)(config)) {
-            data = config.data;
-        }
-        else {
-            data = sectionResults[identifier];
-        }
-        if (Array.isArray(data)) {
-            activeSectionsWithData.push(Object.assign(Object.assign({}, config), { data }));
-        }
-    });
-    const items = [];
-    activeSectionsWithData === null || activeSectionsWithData === void 0 ? void 0 : activeSectionsWithData.forEach((config) => {
-        if (config === null || config === void 0 ? void 0 : config.data) {
-            items.push(...config.data);
-        }
-    });
-    const downshift = (0, useDownShift_1.default)({ setQuery, onChange, items, onSubmit, cioClient, previousQuery });
+    // Get autocomplete sections (autocomplete + recommendations + custom)
+    const { activeSections, activeSectionsWithData, zeroStateActiveSections } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
+    // Get dropdown items array from active sections (autocomplete + recommendations + custom)
+    const items = (0, useItems_1.default)(activeSectionsWithData);
+    const downshift = (0, useDownShift_1.default)({ setQuery, items, onSubmit, cioClient, previousQuery });
     const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex } = downshift;
+    // Log console errors
+    (0, useConsoleErrors_1.default)(sections, activeSections);
     return {
         query,
         sections: activeSectionsWithData,
@@ -78,12 +46,19 @@ const useCioAutocomplete = (options) => {
             const sectionItemTestId = `cio-item-${sectionId === null || sectionId === void 0 ? void 0 : sectionId.replace(' ', '')}`;
             return Object.assign(Object.assign({}, downshift.getItemProps({ item, index })), { className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId });
         },
-        getInputProps: () => (Object.assign(Object.assign({}, downshift.getInputProps()), { value: query, onFocus: () => {
+        getInputProps: () => (Object.assign(Object.assign({}, downshift.getInputProps({
+            onChange: (e) => {
+                setQuery(e.target.value);
+                if (onChange) {
+                    onChange(e.target.value);
+                }
+            },
+        })), { value: query, onFocus: () => {
                 var _a;
                 if (options.onFocus) {
                     options.onFocus();
                 }
-                if (zeroStateSectionsActive && openOnFocus !== false) {
+                if (zeroStateActiveSections && openOnFocus !== false) {
                     downshift.openMenu();
                 }
                 if (query === null || query === void 0 ? void 0 : query.length) {

package/lib/cjs/hooks/useConsoleErrors.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useConsoleErrors = (sections, zeroStateSections) => {
+    (0, react_1.useEffect)(() => {
+        if (sections && !Array.isArray(sections)) {
+            // eslint-disable-next-line
+            console.error('useCioAutocomplete expects sections to reference an array of section configuration objects');
+        }
+        if (zeroStateSections && !Array.isArray(zeroStateSections)) {
+            // eslint-disable-next-line
+            console.error('useCioAutocomplete expects zeroStateSections to reference an array of section configuration objects');
+        }
+    }, [sections, zeroStateSections]);
+};
+exports.default = useConsoleErrors;

package/lib/cjs/hooks/useDebouncedFetchSections.js

@@ -45,18 +45,24 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
         autocompleteParameters.resultsPerSection = autocompleteSections.reduce((acc, sectionConfig) => (Object.assign(Object.assign({}, acc), { [sectionConfig.identifier]: (sectionConfig === null || sectionConfig === void 0 ? void 0 : sectionConfig.numResults) || 8 })), {});
     }
     (0, react_1.useEffect)(() => {
-        if (debouncedSearchTerm) {
-            cioClient === null || cioClient === void 0 ? void 0 : cioClient.autocomplete.getAutocompleteResults(debouncedSearchTerm, autocompleteParameters).then((response) => {
-                const newSectionsData = transformResponse(response, {
-                    numTermsWithGroupSuggestions,
-                    numGroupsSuggestedPerTerm,
-                });
-                setSectionsData(newSectionsData);
-            });
-        }
-        else if (!debouncedSearchTerm) {
-            setSectionsData({});
-        }
+        (() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+            if (debouncedSearchTerm.trim()) {
+                try {
+                    const response = yield (cioClient === null || cioClient === void 0 ? void 0 : cioClient.autocomplete.getAutocompleteResults(debouncedSearchTerm, autocompleteParameters));
+                    const newSectionsData = transformResponse(response, {
+                        numTermsWithGroupSuggestions,
+                        numGroupsSuggestedPerTerm,
+                    });
+                    setSectionsData(newSectionsData);
+                }
+                catch (error) {
+                    console.log(error);
+                }
+            }
+            else if (!debouncedSearchTerm) {
+                setSectionsData({});
+            }
+        }))();
     }, [debouncedSearchTerm, cioClient, numTermsWithGroupSuggestions, numGroupsSuggestedPerTerm]);
     return sectionsData;
 };

package/lib/cjs/hooks/useDownShift.js

@@ -1,18 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const downshift_1 = require("downshift");
 let idCounter = 0;
-const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', onChange, }) => (0, downshift_1.useCombobox)({
+const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '' }) => (0, downshift_1.useCombobox)({
     id: `cio-autocomplete-${idCounter++}`,
     items,
     itemToString: (item) => (item === null || item === void 0 ? void 0 : item.value) || '',
-    onInputValueChange: ({ inputValue = '' }) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        setQuery(inputValue);
-        if (onChange) {
-            onChange(inputValue);
-        }
-    }),
     onSelectedItemChange({ selectedItem }) {
         var _a;
         if (selectedItem) {

package/lib/cjs/hooks/useFetchRecommendationPod.js

@@ -22,7 +22,12 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
                     });
                 }
             });
-            setRecommendationResults(recommendationPodResults);
+            try {
+                setRecommendationResults(recommendationPodResults);
+            }
+            catch (error) {
+                console.log(error);
+            }
         });
         fetchRecommendationResults();
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/lib/cjs/hooks/useItems.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const useItems = (activeSectionsWithData) => {
+    const items = [];
+    activeSectionsWithData === null || activeSectionsWithData === void 0 ? void 0 : activeSectionsWithData.forEach((config) => {
+        if (config === null || config === void 0 ? void 0 : config.data) {
+            items.push(...config.data);
+        }
+    });
+    return items;
+};
+exports.default = useItems;

package/lib/cjs/hooks/useSections.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const useDebouncedFetchSections_1 = tslib_1.__importDefault(require("./useDebouncedFetchSections"));
+const useFetchRecommendationPod_1 = tslib_1.__importDefault(require("./useFetchRecommendationPod"));
+function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
+    const zeroStateActiveSections = !query.length && zeroStateSections;
+    const [activeSections, setActiveSections] = (0, react_1.useState)(zeroStateActiveSections ? zeroStateSections : sections);
+    const autocompleteSections = activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'autocomplete' || !config.type);
+    const recommendationsSections = activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'recommendations');
+    // Fetch Autocomplete Results
+    const autocompleteResults = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
+    // Fetch Recommendations Results
+    const recommendationsResults = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections);
+    const sectionResults = Object.assign(Object.assign({}, autocompleteResults), recommendationsResults);
+    const activeSectionsWithData = (0, utils_1.getActiveSectionsWithData)(activeSections, sectionResults);
+    (0, react_1.useEffect)(() => {
+        setActiveSections(zeroStateActiveSections ? zeroStateSections : sections);
+    }, [query, sections, zeroStateSections, zeroStateActiveSections]);
+    (0, react_1.useEffect)(() => {
+        if (sections && !Array.isArray(sections)) {
+            setActiveSections([]);
+        }
+        if (zeroStateSections && !Array.isArray(zeroStateSections)) {
+            setActiveSections([]);
+        }
+    }, [sections, zeroStateSections]);
+    return {
+        activeSections,
+        activeSectionsWithData,
+        zeroStateActiveSections,
+    };
+}
+exports.default = useSections;

package/lib/cjs/utils.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.defaultArgumentsCode = exports.defaultOnSubmitCode = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getItemPosition = void 0;
+exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getItemPosition = void 0;
 const tslib_1 = require("tslib");
 const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
+const typeGuards_1 = require("./typeGuards");
 const getItemPosition = ({ item, items }) => {
     var _a;
     const index = items.findIndex((itemInFlatList) => (itemInFlatList === null || itemInFlatList === void 0 ? void 0 : itemInFlatList.id) === (item === null || item === void 0 ? void 0 : item.id));
@@ -57,23 +58,23 @@ ${templateCode}
     };
 };
 exports.getStoryParams = getStoryParams;
-exports.defaultOnSubmitCode = `"onSubmit": (submitEvent) => console.dir(submitEvent)`;
-const defaultArgumentsCode = (apiKey) => `"apiKey": "${apiKey}",
-  ${exports.defaultOnSubmitCode}`;
-exports.defaultArgumentsCode = defaultArgumentsCode;
+exports.functionStrings = {
+    onSubmit: `(submitEvent) => console.dir(submitEvent)`,
+};
 const stringifyWithDefaults = (obj) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { apiKey, onSubmit } = obj, rest = tslib_1.__rest(obj, ["apiKey", "onSubmit"]);
-    let res;
-    if (Object.keys(rest).length > 0) {
-        res = JSON.stringify(rest, null, '  ');
-    }
-    else {
-        res = `{
-}`;
-    }
-    res = res.replace('{', `{
-  ${(0, exports.defaultArgumentsCode)(apiKey)}`);
+    // Stringify non-function values normally. Add a template block for functions to be replaced later
+    let res = JSON.stringify(obj, (key, value) => (value instanceof Function ? `${key}_CODE` : value), '  ');
+    // Replace template blocks with function strings
+    Array.from(res.matchAll(/"(\w*)_CODE"/g)).forEach((match) => {
+        const [codePlaceholder, key] = match;
+        const functionString = exports.functionStrings[key];
+        if (functionString) {
+            res = res.replaceAll(codePlaceholder, functionString);
+        }
+        else {
+            console.error(`Function string for ${key} not found.`); // eslint-disable-line
+        }
+    });
     return res;
 };
 exports.stringifyWithDefaults = stringifyWithDefaults;
@@ -92,3 +93,21 @@ const getCioClient = (apiKey) => {
     return null;
 };
 exports.getCioClient = getCioClient;
+const getActiveSectionsWithData = (activeSections, sectionResults) => {
+    const activeSectionsWithData = [];
+    activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((config) => {
+        const { identifier } = config;
+        let data;
+        if ((0, typeGuards_1.isCustomSection)(config)) {
+            data = config.data;
+        }
+        else {
+            data = sectionResults[identifier];
+        }
+        if (Array.isArray(data)) {
+            activeSectionsWithData.push(Object.assign(Object.assign({}, config), { data }));
+        }
+    });
+    return activeSectionsWithData;
+};
+exports.getActiveSectionsWithData = getActiveSectionsWithData;

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import useCioClient from './useCioClient';
 import useDownShift from './useDownShift';
-import useDebouncedFetchSection from './useDebouncedFetchSections';
-import useFetchRecommendationPod from './useFetchRecommendationPod';
 import usePrevious from './usePrevious';
 import { getItemPosition } from '../utils';
-import { isCustomSection } from '../typeGuards';
+import useConsoleErrors from './useConsoleErrors';
+import useSections from './useSections';
+import useItems from './useItems';
 export const defaultSections = [
     {
         identifier: 'Search Suggestions',
@@ -17,50 +17,18 @@ export const defaultSections = [
     },
 ];
 const useCioAutocomplete = (options) => {
-    const defaultPlaceholder = 'What can we help you find today?';
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = defaultPlaceholder, sections = defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters = {}, } = options;
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = 'What can we help you find today?', sections = defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters = {}, } = options;
     const [query, setQuery] = useState('');
     const previousQuery = usePrevious(query);
     const cioClient = useCioClient({ apiKey, cioJsClient });
-    const zeroStateSectionsActive = !query.length && zeroStateSections;
-    let activeSections = zeroStateSectionsActive ? zeroStateSections : sections;
-    if (sections && !Array.isArray(sections)) {
-        // eslint-disable-next-line
-        console.error('useCioAutocomplete expects sections to reference an array of section configuration objects');
-        activeSections = [];
-    }
-    if (zeroStateSections && !Array.isArray(zeroStateSections)) {
-        // eslint-disable-next-line
-        console.error('useCioAutocomplete expects zeroStateSections to reference an array of section configuration objects');
-        activeSections = [];
-    }
-    const autocompleteSections = activeSections?.filter((config) => config.type === 'autocomplete' || !config.type);
-    const recommendationsSections = activeSections?.filter((config) => config.type === 'recommendations');
-    const autocompleteResults = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
-    const recommendationsResults = useFetchRecommendationPod(cioClient, recommendationsSections);
-    const sectionResults = { ...autocompleteResults, ...recommendationsResults };
-    const activeSectionsWithData = [];
-    activeSections?.forEach((config) => {
-        const { identifier } = config;
-        let data;
-        if (isCustomSection(config)) {
-            data = config.data;
-        }
-        else {
-            data = sectionResults[identifier];
-        }
-        if (Array.isArray(data)) {
-            activeSectionsWithData.push({ ...config, data });
-        }
-    });
-    const items = [];
-    activeSectionsWithData?.forEach((config) => {
-        if (config?.data) {
-            items.push(...config.data);
-        }
-    });
-    const downshift = useDownShift({ setQuery, onChange, items, onSubmit, cioClient, previousQuery });
+    // Get autocomplete sections (autocomplete + recommendations + custom)
+    const { activeSections, activeSectionsWithData, zeroStateActiveSections } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
+    // Get dropdown items array from active sections (autocomplete + recommendations + custom)
+    const items = useItems(activeSectionsWithData);
+    const downshift = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery });
     const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex } = downshift;
+    // Log console errors
+    useConsoleErrors(sections, activeSections);
     return {
         query,
         sections: activeSectionsWithData,
@@ -83,13 +51,20 @@ const useCioAutocomplete = (options) => {
             };
         },
         getInputProps: () => ({
-            ...downshift.getInputProps(),
+            ...downshift.getInputProps({
+                onChange: (e) => {
+                    setQuery(e.target.value);
+                    if (onChange) {
+                        onChange(e.target.value);
+                    }
+                },
+            }),
             value: query,
             onFocus: () => {
                 if (options.onFocus) {
                     options.onFocus();
                 }
-                if (zeroStateSectionsActive && openOnFocus !== false) {
+                if (zeroStateActiveSections && openOnFocus !== false) {
                     downshift.openMenu();
                 }
                 if (query?.length) {

package/lib/mjs/hooks/useConsoleErrors.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+const useConsoleErrors = (sections, zeroStateSections) => {
+    useEffect(() => {
+        if (sections && !Array.isArray(sections)) {
+            // eslint-disable-next-line
+            console.error('useCioAutocomplete expects sections to reference an array of section configuration objects');
+        }
+        if (zeroStateSections && !Array.isArray(zeroStateSections)) {
+            // eslint-disable-next-line
+            console.error('useCioAutocomplete expects zeroStateSections to reference an array of section configuration objects');
+        }
+    }, [sections, zeroStateSections]);
+};
+export default useConsoleErrors;

package/lib/mjs/hooks/useDebouncedFetchSections.js

@@ -49,20 +49,24 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
         }), {});
     }
     useEffect(() => {
-        if (debouncedSearchTerm) {
-            cioClient?.autocomplete
-                .getAutocompleteResults(debouncedSearchTerm, autocompleteParameters)
-                .then((response) => {
-                const newSectionsData = transformResponse(response, {
-                    numTermsWithGroupSuggestions,
-                    numGroupsSuggestedPerTerm,
-                });
-                setSectionsData(newSectionsData);
-            });
-        }
-        else if (!debouncedSearchTerm) {
-            setSectionsData({});
-        }
+        (async () => {
+            if (debouncedSearchTerm.trim()) {
+                try {
+                    const response = await cioClient?.autocomplete.getAutocompleteResults(debouncedSearchTerm, autocompleteParameters);
+                    const newSectionsData = transformResponse(response, {
+                        numTermsWithGroupSuggestions,
+                        numGroupsSuggestedPerTerm,
+                    });
+                    setSectionsData(newSectionsData);
+                }
+                catch (error) {
+                    console.log(error);
+                }
+            }
+            else if (!debouncedSearchTerm) {
+                setSectionsData({});
+            }
+        })();
     }, [debouncedSearchTerm, cioClient, numTermsWithGroupSuggestions, numGroupsSuggestedPerTerm]);
     return sectionsData;
 };

package/lib/mjs/hooks/useDownShift.js

@@ -1,15 +1,9 @@
 import { useCombobox } from 'downshift';
 let idCounter = 0;
-const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', onChange, }) => useCombobox({
+const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '' }) => useCombobox({
     id: `cio-autocomplete-${idCounter++}`,
     items,
     itemToString: (item) => item?.value || '',
-    onInputValueChange: async ({ inputValue = '' }) => {
-        setQuery(inputValue);
-        if (onChange) {
-            onChange(inputValue);
-        }
-    },
     onSelectedItemChange({ selectedItem }) {
         if (selectedItem) {
             setQuery(selectedItem.value || '');

package/lib/mjs/hooks/useFetchRecommendationPod.js

@@ -17,7 +17,12 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
                     }));
                 }
             });
-            setRecommendationResults(recommendationPodResults);
+            try {
+                setRecommendationResults(recommendationPodResults);
+            }
+            catch (error) {
+                console.log(error);
+            }
         };
         fetchRecommendationResults();
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/lib/mjs/hooks/useItems.js

@@ -0,0 +1,10 @@
+const useItems = (activeSectionsWithData) => {
+    const items = [];
+    activeSectionsWithData?.forEach((config) => {
+        if (config?.data) {
+            items.push(...config.data);
+        }
+    });
+    return items;
+};
+export default useItems;

package/lib/mjs/hooks/useSections.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { getActiveSectionsWithData } from '../utils';
+import useDebouncedFetchSection from './useDebouncedFetchSections';
+import useFetchRecommendationPod from './useFetchRecommendationPod';
+export default function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
+    const zeroStateActiveSections = !query.length && zeroStateSections;
+    const [activeSections, setActiveSections] = useState(zeroStateActiveSections ? zeroStateSections : sections);
+    const autocompleteSections = activeSections?.filter((config) => config.type === 'autocomplete' || !config.type);
+    const recommendationsSections = activeSections?.filter((config) => config.type === 'recommendations');
+    // Fetch Autocomplete Results
+    const autocompleteResults = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
+    // Fetch Recommendations Results
+    const recommendationsResults = useFetchRecommendationPod(cioClient, recommendationsSections);
+    const sectionResults = { ...autocompleteResults, ...recommendationsResults };
+    const activeSectionsWithData = getActiveSectionsWithData(activeSections, sectionResults);
+    useEffect(() => {
+        setActiveSections(zeroStateActiveSections ? zeroStateSections : sections);
+    }, [query, sections, zeroStateSections, zeroStateActiveSections]);
+    useEffect(() => {
+        if (sections && !Array.isArray(sections)) {
+            setActiveSections([]);
+        }
+        if (zeroStateSections && !Array.isArray(zeroStateSections)) {
+            setActiveSections([]);
+        }
+    }, [sections, zeroStateSections]);
+    return {
+        activeSections,
+        activeSectionsWithData,
+        zeroStateActiveSections,
+    };
+}

package/lib/mjs/utils.js

@@ -1,4 +1,5 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { isCustomSection } from './typeGuards';
 export const getItemPosition = ({ item, items }) => {
     const index = items.findIndex((itemInFlatList) => itemInFlatList?.id === item?.id);
     const sectionId = items[index]?.section;
@@ -44,22 +45,23 @@ ${templateCode}
         },
     };
 };
-export const defaultOnSubmitCode = `"onSubmit": (submitEvent) => console.dir(submitEvent)`;
-export const defaultArgumentsCode = (apiKey) => `"apiKey": "${apiKey}",
-  ${defaultOnSubmitCode}`;
+export const functionStrings = {
+    onSubmit: `(submitEvent) => console.dir(submitEvent)`,
+};
 export const stringifyWithDefaults = (obj) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { apiKey, onSubmit, ...rest } = obj;
-    let res;
-    if (Object.keys(rest).length > 0) {
-        res = JSON.stringify(rest, null, '  ');
-    }
-    else {
-        res = `{
-}`;
-    }
-    res = res.replace('{', `{
-  ${defaultArgumentsCode(apiKey)}`);
+    // Stringify non-function values normally. Add a template block for functions to be replaced later
+    let res = JSON.stringify(obj, (key, value) => (value instanceof Function ? `${key}_CODE` : value), '  ');
+    // Replace template blocks with function strings
+    Array.from(res.matchAll(/"(\w*)_CODE"/g)).forEach((match) => {
+        const [codePlaceholder, key] = match;
+        const functionString = functionStrings[key];
+        if (functionString) {
+            res = res.replaceAll(codePlaceholder, functionString);
+        }
+        else {
+            console.error(`Function string for ${key} not found.`); // eslint-disable-line
+        }
+    });
     return res;
 };
 export const disableStoryActions = (story) => {
@@ -75,3 +77,20 @@ export const getCioClient = (apiKey) => {
     }
     return null;
 };
+export const getActiveSectionsWithData = (activeSections, sectionResults) => {
+    const activeSectionsWithData = [];
+    activeSections?.forEach((config) => {
+        const { identifier } = config;
+        let data;
+        if (isCustomSection(config)) {
+            data = config.data;
+        }
+        else {
+            data = sectionResults[identifier];
+        }
+        if (Array.isArray(data)) {
+            activeSectionsWithData.push({ ...config, data });
+        }
+    });
+    return activeSectionsWithData;
+};

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

@@ -1,9 +1,9 @@
-import { CioAutocompleteProps, Item, Section, UserDefinedSection } from '../types';
+import { CioAutocompleteProps, UserDefinedSection } from '../types';
 export declare const defaultSections: UserDefinedSection[];
 export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
 declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     query: string;
-    sections: Section[];
+    sections: import("../types").Section[];
     isOpen: boolean;
     getMenuProps: () => any;
     getLabelProps: (options?: import("downshift").UseComboboxGetLabelPropsOptions | undefined) => any;
@@ -21,6 +21,6 @@ declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     setQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
     cioClient: import("@constructor-io/constructorio-client-javascript/lib/types/types").Nullable<import("@constructor-io/constructorio-client-javascript")>;
     autocompleteClassName: string;
-    selectedItem: Item;
+    selectedItem: import("../types").Item;
 };
 export default useCioAutocomplete;

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

@@ -0,0 +1,2 @@
+declare const useConsoleErrors: (sections: any, zeroStateSections: any) => void;
+export default useConsoleErrors;

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

@@ -9,7 +9,6 @@ type UseDownShiftOptions = {
     onSubmit: OnSubmit;
     previousQuery?: string;
     cioClient: Nullable<ConstructorIOClient>;
-    onChange?: (string: any) => void;
 };
 export type DownShift = UseComboboxReturnValue<Item>;
 type UseDownShift = (options: UseDownShiftOptions) => DownShift;