@constructor-io/constructorio-ui-autocomplete 1.22.2 → 1.23.1

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.translationsDescription = exports.debounceDescription = exports.termsWithImagesAndCountsDescription = exports.filteredSuggestionsDescription = exports.termsWithGroupSuggestionsDescription = exports.advancedParametersDefaultDescription = exports.advancedParametersDescription = exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDefault = exports.onSubmitDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientOptionsDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
+exports.translationsDescription = exports.fetchZeroStateOnFocusDescription = exports.debounceDescription = exports.termsWithImagesAndCountsDescription = exports.filteredSuggestionsDescription = exports.termsWithGroupSuggestionsDescription = exports.advancedParametersDefaultDescription = exports.advancedParametersDescription = exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDefault = exports.onSubmitDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientOptionsDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_M57QS8SMPdLdLx4x';
 /// //////////////////////////////
@@ -228,6 +228,7 @@ To see this in action:
   - This is because we are filtering to the "Shirts" group`;
 exports.termsWithImagesAndCountsDescription = `Pass boolean flags for \`displaySearchSuggestionImages\` and \`displaySearchSuggestionResultCounts\` fields to display images and counts for search suggestions. These fields need to be made displayable before they can be used. Please contact your Constructor Integration Engineer for details.`;
 exports.debounceDescription = `Pass an integer to \`debounce\` to override the recommended, default delay employed for debouncing autocomplete network requests between keystrokes as your users type into the text input field. The default value is 250, which results in a debounce delay of 250 milliseconds.`;
+exports.fetchZeroStateOnFocusDescription = `Pass a boolean to \`fetchZeroStateOnFocus\` to override the zero state fetching behavior from initial render to input focus.`;
 exports.translationsDescription = `Pass a \`translations\` object to display translatable words in your preferred language.
 
 - Current translatable keys:

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -57,7 +57,7 @@ const useCioAutocomplete = (options) => {
     const previousQuery = (0, usePrevious_1.default)(query);
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient, cioJsClientOptions });
     // Get autocomplete sections (autocomplete + recommendations + custom)
-    const { activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
+    const { fetchRecommendationResults, activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = (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]);
@@ -105,13 +105,16 @@ const useCioAutocomplete = (options) => {
                     openMenu();
                 }
                 try {
+                    if ((advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.fetchZeroStateOnFocus) && (items === null || items === void 0 ? void 0 : items.length) === 0) {
+                        fetchRecommendationResults();
+                    }
                     (_a = cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker) === null || _a === void 0 ? void 0 : _a.trackInputFocus();
                 }
                 catch (error) {
                     // eslint-disable-next-line no-console
                     console.log(error);
                 }
-            }, className: 'cio-input', 'data-testid': 'cio-input', placeholder, onKeyDownCapture: ({ code, key }) => {
+            }, className: 'cio-input', 'data-testid': 'cio-input', placeholder, onKeyDownCapture: ({ code, key, nativeEvent }) => {
                 const isEnter = code === 'Enter' || key === 'Enter';
                 const isUserInput = highlightedIndex < 0;
                 if (isOpen && isEnter && isUserInput && (query === null || query === void 0 ? void 0 : query.length)) {
@@ -126,6 +129,10 @@ const useCioAutocomplete = (options) => {
                         console.log(error);
                     }
                 }
+                if (code === 'Home' || code === 'End') {
+                    // eslint-disable-next-line no-param-reassign
+                    nativeEvent.preventDownshiftDefault = true;
+                }
             } })),
         getFormProps: () => ({
             onSubmit: (event) => {

package/lib/cjs/hooks/useDebouncedFetchSections.js

@@ -54,7 +54,9 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
     }, [autocompleteSections, advancedParameters]);
     (0, react_1.useEffect)(() => {
         (() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-            if (debouncedSearchTerm.trim()) {
+            const trimmedTerm = debouncedSearchTerm.trim();
+            // Do not send a request if the encoded term is longer than 199 characters
+            if (trimmedTerm && encodeURIComponent(trimmedTerm).length < 200) {
                 try {
                     const response = yield (cioClient === null || cioClient === void 0 ? void 0 : cioClient.autocomplete.getAutocompleteResults(debouncedSearchTerm, autocompleteParameters));
                     if (response) {

package/lib/cjs/hooks/useFetchRecommendationPod.js

@@ -2,45 +2,47 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = require("react");
-const useFetchRecommendationPod = (cioClient, recommendationPods) => {
+const useFetchRecommendationPod = (cioClient, recommendationPods, fetchZeroStateOnFocus = false) => {
     const [recommendationsResults, setRecommendationsResults] = (0, react_1.useState)({});
     const [podsData, setPodsData] = (0, react_1.useState)({});
-    (0, react_1.useEffect)(() => {
+    const fetchRecommendationResults = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         if (!cioClient || !Array.isArray(recommendationPods) || recommendationPods.length === 0)
             return;
-        const fetchRecommendationResults = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-            const responses = yield Promise.all(recommendationPods.map((_a) => {
-                var { podId, indexSectionName } = _a, parameters = tslib_1.__rest(_a, ["podId", "indexSectionName"]);
-                return cioClient.recommendations.getRecommendations(podId, Object.assign(Object.assign({}, parameters), { section: indexSectionName }));
-            }));
-            const recommendationsPodResults = {};
-            const recommendationsPodsData = {};
-            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,
-                        request,
-                    };
-                }
-            });
-            try {
-                setRecommendationsResults(recommendationsPodResults);
-                setPodsData(recommendationsPodsData);
-            }
-            catch (error) {
-                // eslint-disable-next-line no-console
-                console.log(error);
+        const responses = yield Promise.all(recommendationPods.map((_a) => {
+            var { podId, indexSectionName } = _a, parameters = tslib_1.__rest(_a, ["podId", "indexSectionName"]);
+            return cioClient.recommendations.getRecommendations(podId, Object.assign(Object.assign({}, parameters), { section: indexSectionName }));
+        }));
+        const recommendationsPodResults = {};
+        const recommendationsPodsData = {};
+        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,
+                    request,
+                };
             }
         });
+        try {
+            setRecommendationsResults(recommendationsPodResults);
+            setPodsData(recommendationsPodsData);
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        if (fetchZeroStateOnFocus)
+            return;
         fetchRecommendationResults();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [cioClient]);
-    return { recommendationsResults, podsData };
+    return { fetchRecommendationResults, recommendationsResults, podsData };
 };
 exports.default = useFetchRecommendationPod;

package/lib/cjs/hooks/useRecommendationsObserver.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const typeGuards_1 = require("../typeGuards");
+const viewedRecommendations = new Set();
 /**
  * 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.
@@ -29,8 +30,9 @@ function useRecommendationsObserver(menuIsOpen, sections, constructorIO, trackRe
         const observer = new IntersectionObserver((entries) => {
             // For each section, check if it's intersecting
             entries.forEach((entry) => {
-                if (entry.isIntersecting) {
+                if (entry.isIntersecting && !viewedRecommendations.has(entry.target)) {
                     trackRecommendationView(entry.target, sections, constructorIO);
+                    viewedRecommendations.add(entry.target);
                 }
             });
         }, intersectionObserverOptions);
@@ -49,6 +51,12 @@ function useRecommendationsObserver(menuIsOpen, sections, constructorIO, trackRe
             });
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menuIsOpen, sections]);
+    // clear viewed recommendations when menu is closed
+    (0, react_1.useEffect)(() => {
+        if (!menuIsOpen) {
+            viewedRecommendations.clear();
+        }
     }, [menuIsOpen]);
 }
 exports.default = useRecommendationsObserver;

package/lib/cjs/hooks/useSections.js

@@ -18,7 +18,7 @@ function useSections(query, cioClient, sections, zeroStateSections, advancedPara
     // Fetch Autocomplete Results
     const { sectionsData: autocompleteResults, request, totalNumResultsPerSection, } = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
     // Fetch Recommendations Results
-    const { recommendationsResults, podsData } = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections);
+    const { fetchRecommendationResults, recommendationsResults, podsData } = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections, advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.fetchZeroStateOnFocus);
     // Remove sections if necessary
     (0, react_1.useEffect)(() => {
         var _a, _b;
@@ -52,6 +52,7 @@ function useSections(query, cioClient, sections, zeroStateSections, advancedPara
         setActiveSectionsWithData((0, utils_1.getActiveSectionsWithData)(activeSectionConfigs, sectionsResults, sectionsRefs));
     }, [autocompleteResults, recommendationsResults, activeSectionConfigs, podsData]);
     return {
+        fetchRecommendationResults,
         activeSections,
         activeSectionsWithData,
         zeroStateActiveSections,

package/lib/cjs/version.js

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

package/lib/mjs/constants.js

@@ -224,6 +224,7 @@ To see this in action:
   - This is because we are filtering to the "Shirts" group`;
 export const termsWithImagesAndCountsDescription = `Pass boolean flags for \`displaySearchSuggestionImages\` and \`displaySearchSuggestionResultCounts\` fields to display images and counts for search suggestions. These fields need to be made displayable before they can be used. Please contact your Constructor Integration Engineer for details.`;
 export const debounceDescription = `Pass an integer to \`debounce\` to override the recommended, default delay employed for debouncing autocomplete network requests between keystrokes as your users type into the text input field. The default value is 250, which results in a debounce delay of 250 milliseconds.`;
+export const fetchZeroStateOnFocusDescription = `Pass a boolean to \`fetchZeroStateOnFocus\` to override the zero state fetching behavior from initial render to input focus.`;
 export const translationsDescription = `Pass a \`translations\` object to display translatable words in your preferred language.
 
 - Current translatable keys:

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -53,7 +53,7 @@ const useCioAutocomplete = (options) => {
     const previousQuery = usePrevious(query);
     const cioClient = useCioClient({ apiKey, cioJsClient, cioJsClientOptions });
     // Get autocomplete sections (autocomplete + recommendations + custom)
-    const { activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
+    const { fetchRecommendationResults, activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = 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]);
@@ -110,6 +110,9 @@ const useCioAutocomplete = (options) => {
                     openMenu();
                 }
                 try {
+                    if (advancedParameters?.fetchZeroStateOnFocus && items?.length === 0) {
+                        fetchRecommendationResults();
+                    }
                     cioClient?.tracker?.trackInputFocus();
                 }
                 catch (error) {
@@ -120,7 +123,7 @@ const useCioAutocomplete = (options) => {
             className: 'cio-input',
             'data-testid': 'cio-input',
             placeholder,
-            onKeyDownCapture: ({ code, key }) => {
+            onKeyDownCapture: ({ code, key, nativeEvent }) => {
                 const isEnter = code === 'Enter' || key === 'Enter';
                 const isUserInput = highlightedIndex < 0;
                 if (isOpen && isEnter && isUserInput && query?.length) {
@@ -135,6 +138,10 @@ const useCioAutocomplete = (options) => {
                         console.log(error);
                     }
                 }
+                if (code === 'Home' || code === 'End') {
+                    // eslint-disable-next-line no-param-reassign
+                    nativeEvent.preventDownshiftDefault = true;
+                }
             },
         }),
         getFormProps: () => ({

package/lib/mjs/hooks/useDebouncedFetchSections.js

@@ -60,7 +60,9 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
     }, [autocompleteSections, advancedParameters]);
     useEffect(() => {
         (async () => {
-            if (debouncedSearchTerm.trim()) {
+            const trimmedTerm = debouncedSearchTerm.trim();
+            // Do not send a request if the encoded term is longer than 199 characters
+            if (trimmedTerm && encodeURIComponent(trimmedTerm).length < 200) {
                 try {
                     const response = await cioClient?.autocomplete.getAutocompleteResults(debouncedSearchTerm, autocompleteParameters);
                     if (response) {

package/lib/mjs/hooks/useFetchRecommendationPod.js

@@ -1,45 +1,47 @@
 import { useEffect, useState } from 'react';
-const useFetchRecommendationPod = (cioClient, recommendationPods) => {
+const useFetchRecommendationPod = (cioClient, recommendationPods, fetchZeroStateOnFocus = false) => {
     const [recommendationsResults, setRecommendationsResults] = useState({});
     const [podsData, setPodsData] = useState({});
-    useEffect(() => {
+    const fetchRecommendationResults = async () => {
         if (!cioClient || !Array.isArray(recommendationPods) || recommendationPods.length === 0)
             return;
-        const fetchRecommendationResults = async () => {
-            const responses = await Promise.all(recommendationPods.map(({ podId, indexSectionName, ...parameters }) => cioClient.recommendations.getRecommendations(podId, {
-                ...parameters,
-                section: indexSectionName,
-            })));
-            const recommendationsPodResults = {};
-            const recommendationsPodsData = {};
-            responses.forEach(({ response, request }, index) => {
-                const { pod, results } = response;
-                if (pod?.id) {
-                    recommendationsPodResults[pod.id] = results?.map((item) => ({
-                        ...item,
-                        id: item?.data?.id,
-                        section: recommendationPods[index]?.indexSectionName,
-                        podId: pod.id,
-                    }));
-                    recommendationsPodsData[pod.id] = {
-                        displayName: pod.display_name,
-                        podId: pod.id,
-                        request,
-                    };
-                }
-            });
-            try {
-                setRecommendationsResults(recommendationsPodResults);
-                setPodsData(recommendationsPodsData);
-            }
-            catch (error) {
-                // eslint-disable-next-line no-console
-                console.log(error);
+        const responses = await Promise.all(recommendationPods.map(({ podId, indexSectionName, ...parameters }) => cioClient.recommendations.getRecommendations(podId, {
+            ...parameters,
+            section: indexSectionName,
+        })));
+        const recommendationsPodResults = {};
+        const recommendationsPodsData = {};
+        responses.forEach(({ response, request }, index) => {
+            const { pod, results } = response;
+            if (pod?.id) {
+                recommendationsPodResults[pod.id] = results?.map((item) => ({
+                    ...item,
+                    id: item?.data?.id,
+                    section: recommendationPods[index]?.indexSectionName,
+                    podId: pod.id,
+                }));
+                recommendationsPodsData[pod.id] = {
+                    displayName: pod.display_name,
+                    podId: pod.id,
+                    request,
+                };
             }
-        };
+        });
+        try {
+            setRecommendationsResults(recommendationsPodResults);
+            setPodsData(recommendationsPodsData);
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    useEffect(() => {
+        if (fetchZeroStateOnFocus)
+            return;
         fetchRecommendationResults();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [cioClient]);
-    return { recommendationsResults, podsData };
+    return { fetchRecommendationResults, recommendationsResults, podsData };
 };
 export default useFetchRecommendationPod;

package/lib/mjs/hooks/useRecommendationsObserver.js

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { isRecommendationsSection } from '../typeGuards';
+const viewedRecommendations = new Set();
 /**
  * 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.
@@ -27,8 +28,9 @@ function useRecommendationsObserver(menuIsOpen, sections, constructorIO, trackRe
         const observer = new IntersectionObserver((entries) => {
             // For each section, check if it's intersecting
             entries.forEach((entry) => {
-                if (entry.isIntersecting) {
+                if (entry.isIntersecting && !viewedRecommendations.has(entry.target)) {
                     trackRecommendationView(entry.target, sections, constructorIO);
+                    viewedRecommendations.add(entry.target);
                 }
             });
         }, intersectionObserverOptions);
@@ -47,6 +49,12 @@ function useRecommendationsObserver(menuIsOpen, sections, constructorIO, trackRe
             });
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menuIsOpen, sections]);
+    // clear viewed recommendations when menu is closed
+    useEffect(() => {
+        if (!menuIsOpen) {
+            viewedRecommendations.clear();
+        }
     }, [menuIsOpen]);
 }
 export default useRecommendationsObserver;

package/lib/mjs/hooks/useSections.js

@@ -15,7 +15,7 @@ export default function useSections(query, cioClient, sections, zeroStateSection
     // Fetch Autocomplete Results
     const { sectionsData: autocompleteResults, request, totalNumResultsPerSection, } = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
     // Fetch Recommendations Results
-    const { recommendationsResults, podsData } = useFetchRecommendationPod(cioClient, recommendationsSections);
+    const { fetchRecommendationResults, recommendationsResults, podsData } = useFetchRecommendationPod(cioClient, recommendationsSections, advancedParameters?.fetchZeroStateOnFocus);
     // Remove sections if necessary
     useEffect(() => {
         const features = getFeatures(Object.values(podsData || {})?.[0]?.request);
@@ -48,6 +48,7 @@ export default function useSections(query, cioClient, sections, zeroStateSection
         setActiveSectionsWithData(getActiveSectionsWithData(activeSectionConfigs, sectionsResults, sectionsRefs));
     }, [autocompleteResults, recommendationsResults, activeSectionConfigs, podsData]);
     return {
+        fetchRecommendationResults,
         activeSections,
         activeSectionsWithData,
         zeroStateActiveSections,

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.22.2';
+export default '1.23.1';

package/lib/types/constants.d.ts

@@ -32,4 +32,5 @@ export declare const termsWithGroupSuggestionsDescription = "Pass integers for t
 export declare const filteredSuggestionsDescription = "Pass a `filters` object under `advancedParameters` to apply filters to the suggestions. Any parameter supported by <a href=\"https://docs.constructor.io/rest_api/autocomplete_queries/\" target=\"__blank\">our autocomplete endpoint</a> can be passed under `advancedParameters`.\n\nTo see this in action:\n1. Type \"short\" in the example below.\n  - Notice how the user is presented with only short pants as results.\n  - This is because the results are currently filtered to belong to the \"Shorts\" group.\n2. Navigate to the \"Filtered Suggestions\" story (using the navigation menu to the left)\n3. Then use the Controls to adjust the values of `\"group_id\"` to `\"1030\"`.\n4. Next, type \"short\" in the example autocomplete input field.\n  - Notice how the user is presented with only short sleeved items as results.\n  - This is because we are filtering to the \"Shirts\" group";
 export declare const termsWithImagesAndCountsDescription = "Pass boolean flags for `displaySearchSuggestionImages` and `displaySearchSuggestionResultCounts` fields to display images and counts for search suggestions. These fields need to be made displayable before they can be used. Please contact your Constructor Integration Engineer for details.";
 export declare const debounceDescription = "Pass an integer to `debounce` to override the recommended, default delay employed for debouncing autocomplete network requests between keystrokes as your users type into the text input field. The default value is 250, which results in a debounce delay of 250 milliseconds.";
+export declare const fetchZeroStateOnFocusDescription = "Pass a boolean to `fetchZeroStateOnFocus` to override the zero state fetching behavior from initial render to input focus.";
 export declare const translationsDescription = "Pass a `translations` object to display translatable words in your preferred language.\n\n- Current translatable keys:\n```\n  {\n    \"in\": \"...\"\n  }\n```\n";

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

@@ -1,7 +1,8 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { SectionsData, RecommendationsSectionConfiguration, PodData } from '../types';
-declare const useFetchRecommendationPod: (cioClient: Nullable<ConstructorIOClient>, recommendationPods: RecommendationsSectionConfiguration[]) => {
+declare const useFetchRecommendationPod: (cioClient: Nullable<ConstructorIOClient>, recommendationPods: RecommendationsSectionConfiguration[], fetchZeroStateOnFocus?: boolean) => {
+    fetchRecommendationResults: () => Promise<void>;
     recommendationsResults: SectionsData;
     podsData: Record<string, PodData>;
 };

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

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

package/lib/types/types.d.ts

@@ -15,6 +15,7 @@ export interface AdvancedParametersBase {
     displaySearchSuggestionResultCounts?: boolean;
     debounce?: number;
     translations?: Translations;
+    fetchZeroStateOnFocus?: boolean;
 }
 export type AdvancedParameters = AdvancedParametersBase & Omit<IAutocompleteParameters, 'resultsPerSection'>;
 export type CioAutocompleteProps = CioClientConfig & {

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.22.2";
+declare const _default: "1.23.1";
 export default _default;

package/package.json

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