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

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,
@@ -92,7 +93,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) {

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.2';

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -3,7 +3,7 @@ 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';
@@ -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(),
@@ -98,7 +99,9 @@ const useCioAutocomplete = (options) => {
                 if (options.onFocus) {
                     options.onFocus();
                 }
-                if (zeroStateActiveSections && openOnFocus !== false) {
+                if (zeroStateActiveSections &&
+                    openOnFocus !== false &&
+                    features.featureDisplayZeroStateRecommendations) {
                     openMenu();
                 }
                 if (query?.length) {

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.2';

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/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.2";
 export default _default;

package/package.json

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