@constructor-io/constructorio-ui-autocomplete 1.18.0 → 1.19.0

package/lib/cjs/components/Autocomplete/AutocompleteResults/AutocompleteResults.js

@@ -2,9 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../utils");
 const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 const SectionItemsList_1 = tslib_1.__importDefault(require("../SectionItemsList/SectionItemsList"));
-const DefaultRenderResults = ({ sections }) => sections === null || sections === void 0 ? void 0 : sections.map((section) => (react_1.default.createElement(SectionItemsList_1.default, { section: section, key: section.identifier })));
+const DefaultRenderResults = ({ sections }) => sections === null || sections === void 0 ? void 0 : sections.map((section) => {
+    const { type } = section;
+    let key = section.displayName;
+    switch (type) {
+        case 'recommendations':
+            key = section.podId;
+            break;
+        case 'custom':
+            key = (0, utils_1.toKebabCase)(section.displayName);
+            break;
+        case 'autocomplete':
+            key = section.indexSectionName;
+            break;
+        default:
+            key = section.indexSectionName;
+            break;
+    }
+    return react_1.default.createElement(SectionItemsList_1.default, { section: section, key: key });
+});
 function AutocompleteResults(props) {
     const { children = DefaultRenderResults } = props;
     const { sections, isOpen, getMenuProps, getItemProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);

package/lib/cjs/components/Autocomplete/SectionItemsList/SectionItemsList.js

@@ -9,11 +9,28 @@ const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 const DefaultRenderSectionItemsList = function ({ section }) {
     var _a, _b;
     const { getSectionProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
-    const sectionName = (section === null || section === void 0 ? void 0 : section.displayName) || (section === null || section === void 0 ? void 0 : section.identifier);
+    const { type, displayName } = section;
+    let sectionTitle = displayName;
+    if (!sectionTitle) {
+        switch (type) {
+            case 'recommendations':
+                sectionTitle = section.podId;
+                break;
+            case 'autocomplete':
+                sectionTitle = section.indexSectionName;
+                break;
+            case 'custom':
+                sectionTitle = section.displayName;
+                break;
+            default:
+                sectionTitle = section.indexSectionName;
+                break;
+        }
+    }
     if (!((_a = section === null || section === void 0 ? void 0 : section.data) === null || _a === void 0 ? void 0 : _a.length))
         return null;
     return (react_1.default.createElement("li", Object.assign({}, getSectionProps(section)),
-        react_1.default.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, (0, utils_1.camelToStartCase)(sectionName)),
+        react_1.default.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, (0, utils_1.camelToStartCase)(sectionTitle)),
         react_1.default.createElement("ul", { className: 'cio-section-items', role: 'none' }, (_b = section === null || section === void 0 ? void 0 : section.data) === null || _b === void 0 ? void 0 : _b.map((item) => (react_1.default.createElement(SectionItem_1.default, { item: item, key: item === null || item === void 0 ? void 0 : item.id, displaySearchTermHighlights: section.displaySearchTermHighlights }))))));
 };
 function SectionItemsList(props) {

package/lib/cjs/constants.js

@@ -55,24 +55,28 @@ The following stories show how different options affect the hook's behavior!
 /// //////////////////////////////
 // Storybook Pages
 /// //////////////////////////////
-exports.sectionsDescription = `- by default, typing a query will fetch data for search suggestions and Products
+exports.sectionsDescription = `- by default, typing a query will fetch data for Search Suggestions and Products
 - to override this, pass an array of sections objects
 - the order of the objects in the \`sections\` array determines the order of the results
-- each section object must have an \`identifier\`
+- each autocomplete section object must have a \`indexSectionName\`
+- each recommendation section object must have a \`podId\`
+- each custom section object must have a \`displayName\`
 - each section object can specify a \`type\`
 - each section object can override the default \`numResults\` of 8
 
+\`indexSectionName\` refers to a section under an index. The default sections are "Products" and "Search Suggestions". You can find all the sections that exist in your index under the "Indexes" tab of Constructor dashboard.
+
 When no values are passed for the \`sections\` argument, the following defaults are used:
 
 \`\`\`jsx
 [
   {
-    identifier: 'Search Suggestions',
+    indexSectionName: 'Search Suggestions',
     type: 'autocomplete',
     numResults: 8
   },
   {
-    identifier: 'Products',
+    indexSectionName: 'Products',
     type: 'autocomplete',
     numResults: 8
   }
@@ -92,7 +96,9 @@ exports.zeroStateDescription = `- when the text input field has no text, we call
 - when \`zeroStateSections\` has sections, the menu will open on user focus by default
 - set \`openOnFocus\` to false, to only show \`zeroStateSections\` after user has typed and then cleared the text input, instead of as soon as the user focuses on the text input
 - the order of the objects in the \`zeroStateSections\` array determines the order of the results
-- each section object must have an \`identifier\`
+- each autocomplete section object must have a \`indexSectionName\`
+- each recommendation section object must have a \`podId\`
+- each custom section object must have a \`displayName\`
 - each section object can specify a \`type\`
 - each section object can override the default \`numResults\` of 8`;
 /// //////////////////////////////

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -10,18 +10,48 @@ const utils_1 = require("../utils");
 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");
 exports.defaultSections = [
     {
-        identifier: 'Search Suggestions',
+        indexSectionName: 'Search Suggestions',
         type: 'autocomplete',
     },
     {
-        identifier: 'Products',
+        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 useCioAutocomplete = (options) => {
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', sections = exports.defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, } = options;
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, } = options;
+    let { sections = exports.defaultSections, zeroStateSections } = options;
+    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 [query, setQuery] = (0, react_1.useState)(defaultInput || '');
     const previousQuery = (0, usePrevious_1.default)(query);
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient, cioJsClientOptions });
@@ -110,17 +140,38 @@ const useCioAutocomplete = (options) => {
         }),
         getSectionProps: (section) => {
             var _a;
-            const sectionName = (section === null || section === void 0 ? void 0 : section.displayName) || (section === null || section === void 0 ? void 0 : section.identifier);
+            const { type, displayName } = section;
+            let sectionTitle = displayName;
+            // Add the indexSectionName as a class to the section container to make sure it gets the styles
+            // Even if the section is a recommendation pod, if the results are "Products" or "Search Suggestions"
+            // ... they should be styled accordingly
+            const indexSectionName = type !== 'custom' && section.indexSectionName ? (0, utils_1.toKebabCase)(section.indexSectionName) : '';
+            if (!sectionTitle) {
+                switch (type) {
+                    case 'recommendations':
+                        sectionTitle = section.podId;
+                        break;
+                    case 'autocomplete':
+                        sectionTitle = section.indexSectionName;
+                        break;
+                    case 'custom':
+                        sectionTitle = section.displayName;
+                        break;
+                    default:
+                        sectionTitle = section.indexSectionName;
+                        break;
+                }
+            }
             const attributes = {
-                className: `${sectionName} cio-section`,
+                className: `${sectionTitle} cio-section  ${indexSectionName}`,
                 ref: section.ref,
                 role: 'none',
                 'data-cnstrc-section': (_a = section.data[0]) === null || _a === void 0 ? void 0 : _a.section,
             };
             // Add data attributes for recommendations
-            if (section.type === 'recommendations') {
+            if ((0, typeGuards_1.isRecommendationsSection)(section)) {
                 attributes['data-cnstrc-recommendations'] = true;
-                attributes['data-cnstrc-recommendations-pod-id'] = section.identifier;
+                attributes['data-cnstrc-recommendations-pod-id'] = section.podId;
             }
             return attributes;
         },

package/lib/cjs/hooks/useDebouncedFetchSections.js

@@ -42,7 +42,7 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
         // eslint-disable-next-line no-param-reassign
         decoratedParameters === null || decoratedParameters === void 0 ? true : delete decoratedParameters.debounce;
         if (autocompleteSections) {
-            decoratedParameters.resultsPerSection = autocompleteSections.reduce((acc, sectionConfig) => (Object.assign(Object.assign({}, acc), { [sectionConfig.identifier]: (sectionConfig === null || sectionConfig === void 0 ? void 0 : sectionConfig.numResults) || 8 })), {});
+            decoratedParameters.resultsPerSection = autocompleteSections.reduce((acc, sectionConfig) => (Object.assign(Object.assign({}, acc), { [sectionConfig.indexSectionName]: (sectionConfig === null || sectionConfig === void 0 ? void 0 : sectionConfig.numResults) || 8 })), {});
         }
         return decoratedParameters;
     }, [autocompleteSections, advancedParameters]);
@@ -51,11 +51,13 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
             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);
+                    if (response) {
+                        const newSectionsData = transformResponse(response, {
+                            numTermsWithGroupSuggestions,
+                            numGroupsSuggestedPerTerm,
+                        });
+                        setSectionsData(newSectionsData);
+                    }
                 }
                 catch (error) {
                     // eslint-disable-next-line no-console

package/lib/cjs/hooks/useFetchRecommendationPod.js

@@ -9,8 +9,8 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
             return;
         const fetchRecommendationResults = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
             const responses = yield Promise.all(recommendationPods.map((_a) => {
-                var { identifier: podId } = _a, parameters = tslib_1.__rest(_a, ["identifier"]);
-                return cioClient.recommendations.getRecommendations(podId, parameters);
+                var { podId, indexSectionName } = _a, parameters = tslib_1.__rest(_a, ["podId", "indexSectionName"]);
+                return cioClient.recommendations.getRecommendations(podId, Object.assign(Object.assign({}, parameters), { section: indexSectionName }));
             }));
             const recommendationPodResults = {};
             responses.forEach(({ response }, index) => {
@@ -18,7 +18,7 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
                 if (pod === null || pod === void 0 ? void 0 : pod.id) {
                     recommendationPodResults[pod.id] = results === null || results === void 0 ? void 0 : results.map((item) => {
                         var _a, _b;
-                        return (Object.assign(Object.assign({}, item), { id: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.id, section: ((_b = recommendationPods[index]) === null || _b === void 0 ? void 0 : _b.section) || 'Products', podId: pod.id }));
+                        return (Object.assign(Object.assign({}, item), { id: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.id, section: (_b = recommendationPods[index]) === null || _b === void 0 ? void 0 : _b.indexSectionName, podId: pod.id }));
                     });
                 }
             });

package/lib/cjs/hooks/useRecommendationsObserver.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
+const typeGuards_1 = require("../typeGuards");
 /**
  * Custom hook that observes the visibility of recommendation sections and calls trackRecommendationView event.
  * This is done by using the IntersectionObserver API to observe the visibility of each recommendation section.
@@ -16,7 +17,7 @@ const react_1 = require("react");
 function useRecommendationsObserver(menuIsOpen, sections, constructorIO, trackRecommendationView) {
     // Get refs for each section
     const refs = sections
-        .filter((section) => section.type === 'recommendations')
+        .filter((section) => (0, typeGuards_1.isRecommendationsSection)(section))
         .map((section) => section.ref);
     (0, react_1.useEffect)(() => {
         const intersectionObserverOptions = {

package/lib/cjs/hooks/useSections.js

@@ -6,14 +6,15 @@ 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"));
+const typeGuards_1 = require("../typeGuards");
 function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
     const zeroStateActiveSections = !query.length && zeroStateSections;
     // Define All Sections
     const activeSections = zeroStateActiveSections ? zeroStateSections : sections;
     const sectionsRefs = (0, react_1.useRef)(activeSections.map(() => (0, react_1.createRef)()));
     const [activeSectionsWithData, setActiveSectionsWithData] = (0, react_1.useState)([]);
-    const autocompleteSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'autocomplete' || !config.type), [activeSections]);
-    const recommendationsSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'recommendations'), [activeSections]);
+    const autocompleteSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => (0, typeGuards_1.isAutocompleteSection)(config)), [activeSections]);
+    const recommendationsSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => (0, typeGuards_1.isRecommendationsSection)(config)), [activeSections]);
     // Fetch Autocomplete Results
     const { sectionsData: autocompleteResults, request } = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
     // Fetch Recommendations Results

package/lib/cjs/typeGuards.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCustomSection = exports.isInGroupSuggestion = exports.isSearchSuggestion = exports.isProduct = void 0;
+exports.isRecommendationsSection = exports.isAutocompleteSection = exports.isCustomSection = exports.isInGroupSuggestion = exports.isSearchSuggestion = exports.isProduct = void 0;
 function isProduct(item) {
     return item.section === 'Products';
 }
@@ -14,6 +14,14 @@ function isInGroupSuggestion(item) {
 }
 exports.isInGroupSuggestion = isInGroupSuggestion;
 function isCustomSection(config) {
-    return config.data !== undefined;
+    return config.type === 'custom';
 }
 exports.isCustomSection = isCustomSection;
+function isAutocompleteSection(config) {
+    return config.type === 'autocomplete' || !config.type;
+}
+exports.isAutocompleteSection = isAutocompleteSection;
+function isRecommendationsSection(config) {
+    return config.type === 'recommendations';
+}
+exports.isRecommendationsSection = isRecommendationsSection;

package/lib/cjs/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.translate = exports.getItemsForActiveSections = exports.trackRecommendationView = exports.escapeRegExp = exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getItemPosition = exports.getSearchSuggestionFeatures = void 0;
+exports.translate = exports.getItemsForActiveSections = exports.trackRecommendationView = exports.escapeRegExp = exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.toKebabCase = exports.camelToStartCase = exports.getItemPosition = exports.getSearchSuggestionFeatures = 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");
@@ -44,6 +44,12 @@ const camelToStartCase = (camelCaseString) => camelCaseString
     // uppercase the first character
     .replace(/^./, (str) => str.toUpperCase());
 exports.camelToStartCase = camelToStartCase;
+const toKebabCase = (str) => str
+    .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase();
+exports.toKebabCase = toKebabCase;
 function isTrackingRequestSent(trackingRequestUrl) {
     var _a, _b;
     // eslint-disable-next-line
@@ -123,17 +129,22 @@ exports.getCioClient = getCioClient;
 const getActiveSectionsWithData = (activeSections, sectionResults, sectionsRefs) => {
     const activeSectionsWithData = [];
     activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((sectionConfig, index) => {
-        const { identifier } = sectionConfig;
+        const { type } = sectionConfig;
         let sectionData;
-        if ((0, typeGuards_1.isCustomSection)(sectionConfig)) {
-            // Copy id from data to the top level
-            sectionData = sectionConfig.data.map((item) => {
-                var _a;
-                return (Object.assign(Object.assign({}, item), { id: (item === null || item === void 0 ? void 0 : item.id) || ((_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.id) }));
-            });
-        }
-        else {
-            sectionData = sectionResults[identifier];
+        switch (type) {
+            case 'recommendations':
+                sectionData = sectionResults[sectionConfig.podId];
+                break;
+            case 'custom':
+                // Copy id from data to the top level
+                sectionData = sectionConfig.data.map((item) => {
+                    var _a;
+                    return (Object.assign(Object.assign({}, item), { id: (item === null || item === void 0 ? void 0 : item.id) || ((_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.id) }));
+                });
+                break;
+            default:
+                // Autocomplete
+                sectionData = sectionResults[sectionConfig.indexSectionName];
         }
         if (Array.isArray(sectionData)) {
             const section = Object.assign(Object.assign({}, sectionConfig), { data: sectionData });
@@ -153,7 +164,8 @@ exports.escapeRegExp = escapeRegExp;
 const trackRecommendationView = (target, activeSectionsWithData, cioClient) => {
     if (target.dataset.cnstrcRecommendationsPodId) {
         // Pull recommendations from activeSectionsWithData by podId surfaced on target
-        const recommendationSection = activeSectionsWithData.find((section) => section.identifier === target.dataset.cnstrcRecommendationsPodId);
+        const recommendationSection = activeSectionsWithData.find((section) => (0, typeGuards_1.isRecommendationsSection)(section) &&
+            section.podId === target.dataset.cnstrcRecommendationsPodId);
         const recommendationItems = recommendationSection === null || recommendationSection === void 0 ? void 0 : recommendationSection.data.map((item) => {
             var _a, _b;
             return ({

package/lib/cjs/version.js

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

package/lib/mjs/components/Autocomplete/AutocompleteResults/AutocompleteResults.js

@@ -1,7 +1,26 @@
 import React, { useContext } from 'react';
+import { toKebabCase } from '../../../utils';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 import SectionItemsList from '../SectionItemsList/SectionItemsList';
-const DefaultRenderResults = ({ sections }) => sections?.map((section) => (React.createElement(SectionItemsList, { section: section, key: section.identifier })));
+const DefaultRenderResults = ({ sections }) => sections?.map((section) => {
+    const { type } = section;
+    let key = section.displayName;
+    switch (type) {
+        case 'recommendations':
+            key = section.podId;
+            break;
+        case 'custom':
+            key = toKebabCase(section.displayName);
+            break;
+        case 'autocomplete':
+            key = section.indexSectionName;
+            break;
+        default:
+            key = section.indexSectionName;
+            break;
+    }
+    return React.createElement(SectionItemsList, { section: section, key: key });
+});
 export default function AutocompleteResults(props) {
     const { children = DefaultRenderResults } = props;
     const { sections, isOpen, getMenuProps, getItemProps } = useContext(CioAutocompleteContext);

package/lib/mjs/components/Autocomplete/SectionItemsList/SectionItemsList.js

@@ -5,11 +5,28 @@ import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
     const { getSectionProps } = useContext(CioAutocompleteContext);
-    const sectionName = section?.displayName || section?.identifier;
+    const { type, displayName } = section;
+    let sectionTitle = displayName;
+    if (!sectionTitle) {
+        switch (type) {
+            case 'recommendations':
+                sectionTitle = section.podId;
+                break;
+            case 'autocomplete':
+                sectionTitle = section.indexSectionName;
+                break;
+            case 'custom':
+                sectionTitle = section.displayName;
+                break;
+            default:
+                sectionTitle = section.indexSectionName;
+                break;
+        }
+    }
     if (!section?.data?.length)
         return null;
     return (React.createElement("li", { ...getSectionProps(section) },
-        React.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, camelToStartCase(sectionName)),
+        React.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, camelToStartCase(sectionTitle)),
         React.createElement("ul", { className: 'cio-section-items', role: 'none' }, section?.data?.map((item) => (React.createElement(SectionItem, { item: item, key: item?.id, displaySearchTermHighlights: section.displaySearchTermHighlights }))))));
 };
 export default function SectionItemsList(props) {

package/lib/mjs/constants.js

@@ -52,24 +52,28 @@ The following stories show how different options affect the hook's behavior!
 /// //////////////////////////////
 // Storybook Pages
 /// //////////////////////////////
-export const sectionsDescription = `- by default, typing a query will fetch data for search suggestions and Products
+export const sectionsDescription = `- by default, typing a query will fetch data for Search Suggestions and Products
 - to override this, pass an array of sections objects
 - the order of the objects in the \`sections\` array determines the order of the results
-- each section object must have an \`identifier\`
+- each autocomplete section object must have a \`indexSectionName\`
+- each recommendation section object must have a \`podId\`
+- each custom section object must have a \`displayName\`
 - each section object can specify a \`type\`
 - each section object can override the default \`numResults\` of 8
 
+\`indexSectionName\` refers to a section under an index. The default sections are "Products" and "Search Suggestions". You can find all the sections that exist in your index under the "Indexes" tab of Constructor dashboard.
+
 When no values are passed for the \`sections\` argument, the following defaults are used:
 
 \`\`\`jsx
 [
   {
-    identifier: 'Search Suggestions',
+    indexSectionName: 'Search Suggestions',
     type: 'autocomplete',
     numResults: 8
   },
   {
-    identifier: 'Products',
+    indexSectionName: 'Products',
     type: 'autocomplete',
     numResults: 8
   }
@@ -89,7 +93,9 @@ export const zeroStateDescription = `- when the text input field has no text, we
 - when \`zeroStateSections\` has sections, the menu will open on user focus by default
 - set \`openOnFocus\` to false, to only show \`zeroStateSections\` after user has typed and then cleared the text input, instead of as soon as the user focuses on the text input
 - the order of the objects in the \`zeroStateSections\` array determines the order of the results
-- each section object must have an \`identifier\`
+- each autocomplete section object must have a \`indexSectionName\`
+- each recommendation section object must have a \`podId\`
+- each custom section object must have a \`displayName\`
 - each section object can specify a \`type\`
 - each section object can override the default \`numResults\` of 8`;
 /// //////////////////////////////

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -2,22 +2,52 @@ import { useMemo, useState } from 'react';
 import useCioClient from './useCioClient';
 import useDownShift from './useDownShift';
 import usePrevious from './usePrevious';
-import { getItemPosition, getItemsForActiveSections, getSearchSuggestionFeatures, trackRecommendationView, } from '../utils';
+import { getItemPosition, getItemsForActiveSections, getSearchSuggestionFeatures, trackRecommendationView, toKebabCase, } from '../utils';
 import useConsoleErrors from './useConsoleErrors';
 import useSections from './useSections';
 import useRecommendationsObserver from './useRecommendationsObserver';
+import { isAutocompleteSection, isRecommendationsSection } from '../typeGuards';
 export const defaultSections = [
     {
-        identifier: 'Search Suggestions',
+        indexSectionName: 'Search Suggestions',
         type: 'autocomplete',
     },
     {
-        identifier: 'Products',
+        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 useCioAutocomplete = (options) => {
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', sections = defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, } = options;
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, } = options;
+    let { sections = defaultSections, zeroStateSections } = options;
+    sections = useMemo(() => {
+        if (sections) {
+            return convertLegacyParametersAndAddDefaults(sections);
+        }
+        return sections;
+    }, [sections]);
+    zeroStateSections = useMemo(() => {
+        if (zeroStateSections) {
+            return convertLegacyParametersAndAddDefaults(zeroStateSections);
+        }
+        return zeroStateSections;
+    }, [zeroStateSections]);
     const [query, setQuery] = useState(defaultInput || '');
     const previousQuery = usePrevious(query);
     const cioClient = useCioClient({ apiKey, cioJsClient, cioJsClientOptions });
@@ -120,17 +150,38 @@ const useCioAutocomplete = (options) => {
             'data-testid': 'cio-form',
         }),
         getSectionProps: (section) => {
-            const sectionName = section?.displayName || section?.identifier;
+            const { type, displayName } = section;
+            let sectionTitle = displayName;
+            // Add the indexSectionName as a class to the section container to make sure it gets the styles
+            // Even if the section is a recommendation pod, if the results are "Products" or "Search Suggestions"
+            // ... they should be styled accordingly
+            const indexSectionName = type !== 'custom' && section.indexSectionName ? toKebabCase(section.indexSectionName) : '';
+            if (!sectionTitle) {
+                switch (type) {
+                    case 'recommendations':
+                        sectionTitle = section.podId;
+                        break;
+                    case 'autocomplete':
+                        sectionTitle = section.indexSectionName;
+                        break;
+                    case 'custom':
+                        sectionTitle = section.displayName;
+                        break;
+                    default:
+                        sectionTitle = section.indexSectionName;
+                        break;
+                }
+            }
             const attributes = {
-                className: `${sectionName} cio-section`,
+                className: `${sectionTitle} cio-section  ${indexSectionName}`,
                 ref: section.ref,
                 role: 'none',
                 'data-cnstrc-section': section.data[0]?.section,
             };
             // Add data attributes for recommendations
-            if (section.type === 'recommendations') {
+            if (isRecommendationsSection(section)) {
                 attributes['data-cnstrc-recommendations'] = true;
-                attributes['data-cnstrc-recommendations-pod-id'] = section.identifier;
+                attributes['data-cnstrc-recommendations-pod-id'] = section.podId;
             }
             return attributes;
         },

package/lib/mjs/hooks/useDebouncedFetchSections.js

@@ -47,7 +47,7 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
         if (autocompleteSections) {
             decoratedParameters.resultsPerSection = autocompleteSections.reduce((acc, sectionConfig) => ({
                 ...acc,
-                [sectionConfig.identifier]: sectionConfig?.numResults || 8,
+                [sectionConfig.indexSectionName]: sectionConfig?.numResults || 8,
             }), {});
         }
         return decoratedParameters;
@@ -57,11 +57,13 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
             if (debouncedSearchTerm.trim()) {
                 try {
                     const response = await cioClient?.autocomplete.getAutocompleteResults(debouncedSearchTerm, autocompleteParameters);
-                    const newSectionsData = transformResponse(response, {
-                        numTermsWithGroupSuggestions,
-                        numGroupsSuggestedPerTerm,
-                    });
-                    setSectionsData(newSectionsData);
+                    if (response) {
+                        const newSectionsData = transformResponse(response, {
+                            numTermsWithGroupSuggestions,
+                            numGroupsSuggestedPerTerm,
+                        });
+                        setSectionsData(newSectionsData);
+                    }
                 }
                 catch (error) {
                     // eslint-disable-next-line no-console