@constructor-io/constructorio-ui-autocomplete 1.20.1 → 1.20.3

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

@@ -29,8 +29,9 @@ const DefaultRenderSectionItemsList = function ({ section }) {
     }
     if (!((_a = section === null || section === void 0 ? void 0 : section.data) === null || _a === void 0 ? void 0 : _a.length))
         return null;
+    // @deprecated `cio-sectionName` will be removed in the next major release
     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)(sectionTitle)),
+        react_1.default.createElement("h5", { className: 'cio-section-name 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

@@ -182,7 +182,7 @@ import '@constructor-io/constructorio-ui-autocomplete/styles.css';
   right: 24px;
 }
 
-.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {
+.cio-autocomplete.custom-autocomplete-styles .cio-section-name {
   margin: 5px 3px;
 }
 

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -58,6 +58,7 @@ const useCioAutocomplete = (options) => {
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient, cioJsClientOptions });
     // Get autocomplete sections (autocomplete + recommendations + custom)
     const { activeSections, activeSectionsWithData, zeroStateActiveSections, request } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
+    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, } = (0, useDownShift_1.default)({ setQuery, items, onSubmit, cioClient, previousQuery });
@@ -69,7 +70,7 @@ const useCioAutocomplete = (options) => {
         query,
         sections: activeSectionsWithData,
         request,
-        featureToggles: (0, utils_1.getSearchSuggestionFeatures)(request),
+        featureToggles: features,
         isOpen: isOpen && (items === null || items === void 0 ? void 0 : items.length) > 0,
         getMenuProps: () => (Object.assign(Object.assign({}, getMenuProps()), { className: 'cio-results', 'data-testid': 'cio-results' })),
         getLabelProps,
@@ -78,7 +79,9 @@ const useCioAutocomplete = (options) => {
         getItemProps: (item) => {
             const { index, sectionId } = (0, utils_1.getItemPosition)({ item, items });
             const sectionItemTestId = `cio-item-${sectionId === null || sectionId === void 0 ? void 0 : sectionId.replace(' ', '')}`;
-            return Object.assign(Object.assign({}, getItemProps({ item, index })), { className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId });
+            return Object.assign(Object.assign({}, getItemProps({ item, index })), { 
+                // @deprecated `sectionItemTestId` will be removed as a className in the next major version
+                className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId });
         },
         getInputProps: () => (Object.assign(Object.assign({}, getInputProps({
             onChange: (e) => {
@@ -92,7 +95,9 @@ const useCioAutocomplete = (options) => {
                 if (options.onFocus) {
                     options.onFocus();
                 }
-                if (zeroStateActiveSections && openOnFocus !== false) {
+                if (zeroStateActiveSections &&
+                    openOnFocus !== false &&
+                    features.featureDisplayZeroStateRecommendations) {
                     openMenu();
                 }
                 if (query === null || query === void 0 ? void 0 : query.length) {
@@ -140,33 +145,46 @@ const useCioAutocomplete = (options) => {
             'data-testid': 'cio-form',
         }),
         getSectionProps: (section) => {
-            var _a;
-            const { type } = section;
-            let sectionTitle;
-            // Add the indexSectionName as a class to the section container to make sure it gets the styles
+            var _a, _b;
+            // @deprecated ClassNames derived from this fn will be removed in the next major version
+            const getDeprecatedClassNames = () => {
+                const { type } = section;
+                let sectionTitle;
+                const indexSectionName = type !== 'custom' && section.indexSectionName
+                    ? (0, utils_1.toKebabCase)(section.indexSectionName)
+                    : '';
+                switch (type) {
+                    case 'recommendations':
+                        sectionTitle = section.podId;
+                        break;
+                    case 'autocomplete':
+                        sectionTitle = section.displayName || section.indexSectionName;
+                        break;
+                    case 'custom':
+                        sectionTitle = section.displayName;
+                        break;
+                    default:
+                        sectionTitle = section.displayName || section.indexSectionName;
+                        break;
+                }
+                return `${sectionTitle} ${indexSectionName}`;
+            };
+            // Always add the indexSectionName (defaults to Products) as a class to the section container for 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) : '';
-            switch (type) {
-                case 'recommendations':
-                    sectionTitle = section.podId;
-                    break;
-                case 'autocomplete':
-                    sectionTitle = section.displayName || section.indexSectionName;
-                    break;
-                case 'custom':
-                    sectionTitle = section.displayName;
-                    break;
-                default:
-                    sectionTitle = section.displayName || section.indexSectionName;
-                    break;
-            }
+            const sectionListingType = (0, typeGuards_1.isCustomSection)(section)
+                ? 'custom'
+                : (0, utils_1.toKebabCase)(section.indexSectionName || ((_a = section.data[0]) === null || _a === void 0 ? void 0 : _a.section) || 'Products');
             const attributes = {
-                className: `${sectionTitle} cio-section  ${indexSectionName}`,
+                className: `cio-section cio-section-${sectionListingType} ${getDeprecatedClassNames()}`,
                 ref: section.ref,
                 role: 'none',
-                'data-cnstrc-section': (_a = section.data[0]) === null || _a === void 0 ? void 0 : _a.section,
+                'data-cnstrc-section': (_b = section.data[0]) === null || _b === void 0 ? void 0 : _b.section,
             };
+            if ((0, typeGuards_1.isCustomSection)(section)) {
+                attributes['data-cnstrc-custom-section'] = true;
+                attributes['data-cnstrc-custom-section-name'] = section.displayName;
+            }
             // Add data attributes for recommendations
             if ((0, typeGuards_1.isRecommendationsSection)(section)) {
                 attributes['data-cnstrc-recommendations'] = true;

package/lib/cjs/hooks/useFetchRecommendationPod.js

@@ -15,14 +15,18 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
             }));
             const recommendationsPodResults = {};
             const recommendationsPodsData = {};
-            responses.forEach(({ response }, index) => {
+            responses.forEach(({ response, request }, index) => {
                 const { pod, results } = response;
                 if (pod === null || pod === void 0 ? void 0 : pod.id) {
                     recommendationsPodResults[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.indexSectionName, podId: pod.id }));
                     });
-                    recommendationsPodsData[pod.id] = { displayName: pod.display_name, podId: pod.id };
+                    recommendationsPodsData[pod.id] = {
+                        displayName: pod.display_name,
+                        podId: pod.id,
+                        request,
+                    };
                 }
             });
             try {

package/lib/cjs/hooks/useSections.js

@@ -8,9 +8,9 @@ const useDebouncedFetchSections_1 = tslib_1.__importDefault(require("./useDeboun
 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;
+    const zeroStateActiveSections = !query.length && (zeroStateSections === null || zeroStateSections === void 0 ? void 0 : zeroStateSections.length);
     // Define All Sections
-    const activeSections = zeroStateActiveSections ? zeroStateSections : sections;
+    const [activeSections, setActiveSections] = (0, react_1.useState)(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) => (0, typeGuards_1.isAutocompleteSection)(config)), [activeSections]);
@@ -19,6 +19,22 @@ function useSections(query, cioClient, sections, zeroStateSections, advancedPara
     const { sectionsData: autocompleteResults, request } = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
     // Fetch Recommendations Results
     const { recommendationsResults, podsData } = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections);
+    // 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 (zeroStateActiveSections) {
+            if (!features.featureDisplayZeroStateRecommendations) {
+                setActiveSections([]);
+            }
+            else {
+                setActiveSections(zeroStateSections);
+            }
+        }
+        else {
+            setActiveSections(sections);
+        }
+    }, [zeroStateSections, zeroStateActiveSections, sections, podsData]);
     // Merge Recommendation Pods Display Name from Dashboard
     const activeSectionConfigs = (0, react_1.useMemo)(() => activeSections.map((config) => {
         const mergedConfig = config;

package/lib/cjs/utils.js

@@ -1,14 +1,15 @@
 "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.toKebabCase = 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.getFeatures = 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 version_1 = tslib_1.__importDefault(require("./version"));
-function getSearchSuggestionFeatures(request) {
+function getFeatures(request) {
     var _a, _b;
     let featureDisplaySearchSuggestionImages = false;
     let featureDisplaySearchSuggestionResultCounts = false;
+    let featureDisplayZeroStateRecommendations = true;
     if (((_a = request === null || request === void 0 ? void 0 : request.features) === null || _a === void 0 ? void 0 : _a.custom_autosuggest_ui) === true) {
         switch ((_b = request === null || request === void 0 ? void 0 : request.feature_variants) === null || _b === void 0 ? void 0 : _b.custom_autosuggest_ui) {
             case 'custom_autosuggest_ui_result_count':
@@ -21,6 +22,9 @@ function getSearchSuggestionFeatures(request) {
                 featureDisplaySearchSuggestionImages = true;
                 featureDisplaySearchSuggestionResultCounts = true;
                 break;
+            case 'custom_autosuggest_ui_disable_recommendations_in_zero_state':
+                featureDisplayZeroStateRecommendations = false;
+                break;
             default:
                 break;
         }
@@ -28,9 +32,10 @@ function getSearchSuggestionFeatures(request) {
     return {
         featureDisplaySearchSuggestionImages,
         featureDisplaySearchSuggestionResultCounts,
+        featureDisplayZeroStateRecommendations,
     };
 }
-exports.getSearchSuggestionFeatures = getSearchSuggestionFeatures;
+exports.getFeatures = getFeatures;
 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));

package/lib/cjs/version.js

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

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

@@ -25,8 +25,9 @@ const DefaultRenderSectionItemsList = function ({ section }) {
     }
     if (!section?.data?.length)
         return null;
+    // @deprecated `cio-sectionName` will be removed in the next major release
     return (React.createElement("li", { ...getSectionProps(section) },
-        React.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, camelToStartCase(sectionTitle)),
+        React.createElement("h5", { className: 'cio-section-name 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

@@ -178,7 +178,7 @@ import '@constructor-io/constructorio-ui-autocomplete/styles.css';
   right: 24px;
 }
 
-.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {
+.cio-autocomplete.custom-autocomplete-styles .cio-section-name {
   margin: 5px 3px;
 }
 

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -3,11 +3,11 @@ import { useMemo, useState } from 'react';
 import useCioClient from './useCioClient';
 import useDownShift from './useDownShift';
 import usePrevious from './usePrevious';
-import { getItemPosition, getItemsForActiveSections, getSearchSuggestionFeatures, trackRecommendationView, toKebabCase, } from '../utils';
+import { getItemPosition, getItemsForActiveSections, getFeatures, trackRecommendationView, toKebabCase, } from '../utils';
 import useConsoleErrors from './useConsoleErrors';
 import useSections from './useSections';
 import useRecommendationsObserver from './useRecommendationsObserver';
-import { isAutocompleteSection, isRecommendationsSection } from '../typeGuards';
+import { isAutocompleteSection, isCustomSection, isRecommendationsSection } from '../typeGuards';
 export const defaultSections = [
     {
         indexSectionName: 'Search Suggestions',
@@ -54,6 +54,7 @@ const useCioAutocomplete = (options) => {
     const cioClient = useCioClient({ apiKey, cioJsClient, cioJsClientOptions });
     // Get autocomplete sections (autocomplete + recommendations + custom)
     const { activeSections, activeSectionsWithData, zeroStateActiveSections, request } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
+    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, } = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery });
@@ -65,7 +66,7 @@ const useCioAutocomplete = (options) => {
         query,
         sections: activeSectionsWithData,
         request,
-        featureToggles: getSearchSuggestionFeatures(request),
+        featureToggles: features,
         isOpen: isOpen && items?.length > 0,
         getMenuProps: () => ({
             ...getMenuProps(),
@@ -80,6 +81,7 @@ const useCioAutocomplete = (options) => {
             const sectionItemTestId = `cio-item-${sectionId?.replace(' ', '')}`;
             return {
                 ...getItemProps({ item, index }),
+                // @deprecated `sectionItemTestId` will be removed as a className in the next major version
                 className: `cio-item ${sectionItemTestId}`,
                 'data-testid': sectionItemTestId,
             };
@@ -98,7 +100,9 @@ const useCioAutocomplete = (options) => {
                 if (options.onFocus) {
                     options.onFocus();
                 }
-                if (zeroStateActiveSections && openOnFocus !== false) {
+                if (zeroStateActiveSections &&
+                    openOnFocus !== false &&
+                    features.featureDisplayZeroStateRecommendations) {
                     openMenu();
                 }
                 if (query?.length) {
@@ -151,32 +155,45 @@ const useCioAutocomplete = (options) => {
             'data-testid': 'cio-form',
         }),
         getSectionProps: (section) => {
-            const { type } = section;
-            let sectionTitle;
-            // Add the indexSectionName as a class to the section container to make sure it gets the styles
+            // @deprecated ClassNames derived from this fn will be removed in the next major version
+            const getDeprecatedClassNames = () => {
+                const { type } = section;
+                let sectionTitle;
+                const indexSectionName = type !== 'custom' && section.indexSectionName
+                    ? toKebabCase(section.indexSectionName)
+                    : '';
+                switch (type) {
+                    case 'recommendations':
+                        sectionTitle = section.podId;
+                        break;
+                    case 'autocomplete':
+                        sectionTitle = section.displayName || section.indexSectionName;
+                        break;
+                    case 'custom':
+                        sectionTitle = section.displayName;
+                        break;
+                    default:
+                        sectionTitle = section.displayName || section.indexSectionName;
+                        break;
+                }
+                return `${sectionTitle} ${indexSectionName}`;
+            };
+            // Always add the indexSectionName (defaults to Products) as a class to the section container for 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) : '';
-            switch (type) {
-                case 'recommendations':
-                    sectionTitle = section.podId;
-                    break;
-                case 'autocomplete':
-                    sectionTitle = section.displayName || section.indexSectionName;
-                    break;
-                case 'custom':
-                    sectionTitle = section.displayName;
-                    break;
-                default:
-                    sectionTitle = section.displayName || section.indexSectionName;
-                    break;
-            }
+            const sectionListingType = isCustomSection(section)
+                ? 'custom'
+                : toKebabCase(section.indexSectionName || section.data[0]?.section || 'Products');
             const attributes = {
-                className: `${sectionTitle} cio-section  ${indexSectionName}`,
+                className: `cio-section cio-section-${sectionListingType} ${getDeprecatedClassNames()}`,
                 ref: section.ref,
                 role: 'none',
                 'data-cnstrc-section': section.data[0]?.section,
             };
+            if (isCustomSection(section)) {
+                attributes['data-cnstrc-custom-section'] = true;
+                attributes['data-cnstrc-custom-section-name'] = section.displayName;
+            }
             // Add data attributes for recommendations
             if (isRecommendationsSection(section)) {
                 attributes['data-cnstrc-recommendations'] = true;

package/lib/mjs/hooks/useFetchRecommendationPod.js

@@ -12,7 +12,7 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
             })));
             const recommendationsPodResults = {};
             const recommendationsPodsData = {};
-            responses.forEach(({ response }, index) => {
+            responses.forEach(({ response, request }, index) => {
                 const { pod, results } = response;
                 if (pod?.id) {
                     recommendationsPodResults[pod.id] = results?.map((item) => ({
@@ -21,7 +21,11 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
                         section: recommendationPods[index]?.indexSectionName,
                         podId: pod.id,
                     }));
-                    recommendationsPodsData[pod.id] = { displayName: pod.display_name, podId: pod.id };
+                    recommendationsPodsData[pod.id] = {
+                        displayName: pod.display_name,
+                        podId: pod.id,
+                        request,
+                    };
                 }
             });
             try {

package/lib/mjs/hooks/useSections.js

@@ -1,13 +1,13 @@
 /* eslint-disable max-params */
 import { createRef, useEffect, useMemo, useRef, useState } from 'react';
-import { getActiveSectionsWithData } from '../utils';
+import { getActiveSectionsWithData, getFeatures } from '../utils';
 import useDebouncedFetchSection from './useDebouncedFetchSections';
 import useFetchRecommendationPod from './useFetchRecommendationPod';
 import { isAutocompleteSection, isRecommendationsSection } from '../typeGuards';
 export default function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
-    const zeroStateActiveSections = !query.length && zeroStateSections;
+    const zeroStateActiveSections = !query.length && zeroStateSections?.length;
     // Define All Sections
-    const activeSections = zeroStateActiveSections ? zeroStateSections : sections;
+    const [activeSections, setActiveSections] = useState(zeroStateActiveSections ? zeroStateSections : sections);
     const sectionsRefs = useRef(activeSections.map(() => createRef()));
     const [activeSectionsWithData, setActiveSectionsWithData] = useState([]);
     const autocompleteSections = useMemo(() => activeSections?.filter((config) => isAutocompleteSection(config)), [activeSections]);
@@ -16,6 +16,21 @@ export default function useSections(query, cioClient, sections, zeroStateSection
     const { sectionsData: autocompleteResults, request } = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
     // Fetch Recommendations Results
     const { recommendationsResults, podsData } = useFetchRecommendationPod(cioClient, recommendationsSections);
+    // Remove sections if necessary
+    useEffect(() => {
+        const features = getFeatures(Object.values(podsData || {})?.[0]?.request);
+        if (zeroStateActiveSections) {
+            if (!features.featureDisplayZeroStateRecommendations) {
+                setActiveSections([]);
+            }
+            else {
+                setActiveSections(zeroStateSections);
+            }
+        }
+        else {
+            setActiveSections(sections);
+        }
+    }, [zeroStateSections, zeroStateActiveSections, sections, podsData]);
     // Merge Recommendation Pods Display Name from Dashboard
     const activeSectionConfigs = useMemo(() => activeSections.map((config) => {
         const mergedConfig = config;

package/lib/mjs/utils.js

@@ -1,9 +1,10 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { isRecommendationsSection } from './typeGuards';
 import version from './version';
-export function getSearchSuggestionFeatures(request) {
+export function getFeatures(request) {
     let featureDisplaySearchSuggestionImages = false;
     let featureDisplaySearchSuggestionResultCounts = false;
+    let featureDisplayZeroStateRecommendations = true;
     if (request?.features?.custom_autosuggest_ui === true) {
         switch (request?.feature_variants?.custom_autosuggest_ui) {
             case 'custom_autosuggest_ui_result_count':
@@ -16,6 +17,9 @@ export function getSearchSuggestionFeatures(request) {
                 featureDisplaySearchSuggestionImages = true;
                 featureDisplaySearchSuggestionResultCounts = true;
                 break;
+            case 'custom_autosuggest_ui_disable_recommendations_in_zero_state':
+                featureDisplayZeroStateRecommendations = false;
+                break;
             default:
                 break;
         }
@@ -23,6 +27,7 @@ export function getSearchSuggestionFeatures(request) {
     return {
         featureDisplaySearchSuggestionImages,
         featureDisplaySearchSuggestionResultCounts,
+        featureDisplayZeroStateRecommendations,
     };
 }
 export const getItemPosition = ({ item, items }) => {

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.20.1';
+export default '1.20.3';

package/lib/styles.css

@@ -61,7 +61,9 @@
   margin-top: 5px;
 }
 
-.cio-autocomplete .cio-sectionName {
+/* @deprecated in favor of .cio-section-name */
+.cio-autocomplete .cio-sectionName,
+.cio-autocomplete .cio-section-name {
   margin: 15px 0;
   font-size: 1rem;
 }
@@ -70,7 +72,9 @@
   padding: 0;
 }
 
-.cio-autocomplete .cio-item.cio-item-SearchSuggestions {
+/* @deprecated in favor of .cio-section-search-suggestions */
+.cio-autocomplete .cio-item.cio-item-SearchSuggestions,
+.cio-autocomplete .cio-section-search-suggestions .cio-item {
   flex-direction: row;
   min-width: 160px;
   justify-content: space-between;
@@ -92,11 +96,15 @@
   border-radius: 4px;
 }
 
-.cio-autocomplete .products {
+/* @deprecated in favor of .cio-section-products */
+.cio-autocomplete .products,
+.cio-autocomplete .cio-section-products {
   padding: 0 5px;
 }
 
-.cio-autocomplete .products .cio-item {
+/* @deprecated in favor of .cio-section-products .cio-item */
+.cio-autocomplete .products .cio-item,
+.cio-autocomplete .cio-section-products .cio-item {
   display: inline-flex;
   align-items: center;
   width: 25%;
@@ -134,4 +142,4 @@
 .cio-autocomplete .cio-suggestion-count {
   font-size: 0.8rem;
   margin-left: 8px;
-}
+}

package/lib/types/components/Autocomplete/CioAutocompleteProvider.d.ts

@@ -7,6 +7,7 @@ export declare const CioAutocompleteContext: React.Context<{
     featureToggles: {
         featureDisplaySearchSuggestionImages: boolean;
         featureDisplaySearchSuggestionResultCounts: boolean;
+        featureDisplayZeroStateRecommendations: boolean;
     };
     isOpen: boolean;
     getMenuProps: () => any;

package/lib/types/constants.d.ts

@@ -25,7 +25,7 @@ export declare const onSubmitDefault: (submitEvent: AutocompleteSubmitEvent) =>
 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";
 export declare const openOnFocusDescription = "Use `openOnFocus: false` to show suggestions after a user clears their query, but not when they initially apply focus to the search input field";
 export declare const multipleSectionsDescription = "Use as many different `recommendations` and `custom` sections as you'd like and in whatever order you would like!";
-export declare const customStylesDescription = "\nBy default, importing react components or hooks from this library does not pull any css into your project.\n\nIf you wish to use some starter styles from this library, add an import statement similar to the example import statement below:\n\n`\nimport '@constructor-io/constructorio-ui-autocomplete/styles.css';\n`\n\n<i></i>\n\n- To opt out of all default styling, do not import the `styles.css` stylesheet.\n- The path and syntax in the example above may change depending on your module bundling strategy\n- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.\n- All starter styles in this library are scoped within the `.cio-autocomplete` css selector.\n- These starter styles are intended to be extended by layering in your own css rules\n- If you like, you can override the container's className like so:\n`autocompleteClassName='custom-autocomplete-container'`\n- If you like, you can pass additional className(s) of your choosing like so:\n`autocompleteClassName='cio-autocomplete custom-autocomplete-container'`\n\n\n```css\n/* Custom Style Sheet */\n.cio-autocomplete.custom-autocomplete-styles form {\n  height: 44px;\n  width: 600px;\n  border-radius: 8px;\n  background-color: rgb(247, 247, 247);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-input {\n  font-weight: bold;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-form button {\n  width: 44px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {\n  right: 24px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {\n  margin: 5px 3px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-results {\n  width: 620px;\n  max-height: 334px;\n  overflow: hidden;\n  border-radius: 0px 0px 8px 8px;\n  color: rgb(51, 51, 51);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .products p {\n  padding: 5px 5px 0;\n}\n```\n";
+export declare const customStylesDescription = "\nBy default, importing react components or hooks from this library does not pull any css into your project.\n\nIf you wish to use some starter styles from this library, add an import statement similar to the example import statement below:\n\n`\nimport '@constructor-io/constructorio-ui-autocomplete/styles.css';\n`\n\n<i></i>\n\n- To opt out of all default styling, do not import the `styles.css` stylesheet.\n- The path and syntax in the example above may change depending on your module bundling strategy\n- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.\n- All starter styles in this library are scoped within the `.cio-autocomplete` css selector.\n- These starter styles are intended to be extended by layering in your own css rules\n- If you like, you can override the container's className like so:\n`autocompleteClassName='custom-autocomplete-container'`\n- If you like, you can pass additional className(s) of your choosing like so:\n`autocompleteClassName='cio-autocomplete custom-autocomplete-container'`\n\n\n```css\n/* Custom Style Sheet */\n.cio-autocomplete.custom-autocomplete-styles form {\n  height: 44px;\n  width: 600px;\n  border-radius: 8px;\n  background-color: rgb(247, 247, 247);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-input {\n  font-weight: bold;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-form button {\n  width: 44px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {\n  right: 24px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-section-name {\n  margin: 5px 3px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-results {\n  width: 620px;\n  max-height: 334px;\n  overflow: hidden;\n  border-radius: 0px 0px 8px 8px;\n  color: rgb(51, 51, 51);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .products p {\n  padding: 5px 5px 0;\n}\n```\n";
 export declare const advancedParametersDescription = "The stories below show how optional fields within this `advancedParameters` object that can be used to fine-tune the autosuggest data returned from constructor's servers.";
 export declare const advancedParametersDefaultDescription = "Passing an `advancedParameters` object is optional. Passing an empty object for the `advancedParameters` field behaves the same as not passing an `advancedParameters` object at all.";
 export declare const termsWithGroupSuggestionsDescription = "Pass integers for the `numTermsWithGroupSuggestions` and `numGroupsSuggestedPerTerm` fields to add suggested group filters to search term suggestions. Not all suggested search terms will have group filters, so these integers are upper limits, used to specify the maximum number of terms with group filters and the maximum number of suggested group filters per term.\n\nTo see this in action:\n1. Type \"pan\" in the example below.\n  - Notice how the user is presented with a search term of \"all week flex pant\" as well as \"all week flex pant in Chinos\" and \"all week flex pant baby in Athleisure Pants & Joggers\"\n2. Navigate to the \"Terms With Group Suggestions\" story (using the navigation menu to the left)\n3. Then use the Controls to adjust the values of `numTermsWithGroupSuggestions` to `3` and `numGroupsSuggestedPerTerm` to `1`\n4. Next, type \"pan\" in the example autocomplete input field.\n  - Notice how the user is presented with three different search terms that have a maximum of one \"in {group}\" suggestion each";

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

@@ -8,6 +8,7 @@ declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     featureToggles: {
         featureDisplaySearchSuggestionImages: boolean;
         featureDisplaySearchSuggestionResultCounts: boolean;
+        featureDisplayZeroStateRecommendations: boolean;
     };
     isOpen: boolean;
     getMenuProps: () => any;

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

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

package/lib/types/types.d.ts

@@ -137,4 +137,5 @@ export type Translations = {
 export interface PodData {
     podId: string;
     displayName: string;
+    request: Partial<AutocompleteRequestType>;
 }

package/lib/types/utils.d.ts

@@ -8,9 +8,10 @@ export type GetItemPosition = (args: {
     index: number;
     sectionId: string;
 };
-export declare function getSearchSuggestionFeatures(request: Partial<AutocompleteRequestType>): {
+export declare function getFeatures(request: Partial<AutocompleteRequestType>): {
     featureDisplaySearchSuggestionImages: boolean;
     featureDisplaySearchSuggestionResultCounts: boolean;
+    featureDisplayZeroStateRecommendations: boolean;
 };
 export declare const getItemPosition: GetItemPosition;
 type CamelToStartCase = (camelCaseString: string) => string;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.20.1";
+declare const _default: "1.20.3";
 export default _default;

package/package.json

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