@constructor-io/constructorio-ui-autocomplete 1.13.0 → 1.13.1

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

@@ -8,8 +8,9 @@ const SectionItemText_1 = tslib_1.__importDefault(require("./SectionItemText"));
 function SectionItem(props) {
     var _a, _b, _c, _d, _e;
     const { item, children, displaySearchTermHighlights } = props;
-    const { getItemProps, advancedParameters, query } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
-    const { displaySearchSuggestionImages, displaySearchSuggestionResultCounts } = advancedParameters || {};
+    const { getItemProps, advancedParameters, query, featureToggles } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const { featureDisplaySearchSuggestionImages, featureDisplaySearchSuggestionResultCounts } = featureToggles;
+    const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, } = advancedParameters || {};
     let defaultChildren;
     if ((0, typeGuards_1.isProduct)(item)) {
         defaultChildren = (react_1.default.createElement(react_1.default.Fragment, null,

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
+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.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';
 /// //////////////////////////////
@@ -211,3 +211,4 @@ To see this in action:
   - Notice how the user is presented with only short sleeved items as results.
   - 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.`;

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -26,7 +26,7 @@ const useCioAutocomplete = (options) => {
     const previousQuery = (0, usePrevious_1.default)(query);
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
     // Get autocomplete sections (autocomplete + recommendations + custom)
-    const { activeSections, activeSectionsWithData, zeroStateActiveSections } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
+    const { activeSections, activeSectionsWithData, zeroStateActiveSections, request } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
     const items = (0, useItems_1.default)(activeSectionsWithData);
     const downshift = (0, useDownShift_1.default)({ setQuery, items, onSubmit, cioClient, previousQuery });
@@ -36,6 +36,8 @@ const useCioAutocomplete = (options) => {
     return {
         query,
         sections: activeSectionsWithData,
+        request,
+        featureToggles: (0, utils_1.getSearchSuggestionFeatures)(request),
         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,

package/lib/cjs/hooks/useDebouncedFetchSections.js

@@ -28,14 +28,19 @@ const transformResponse = (response, options) => {
             }
         });
     });
-    return newSectionsData;
+    return { sectionsData: newSectionsData, request: response === null || response === void 0 ? void 0 : response.request };
 };
 const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advancedParameters) => {
-    const [sectionsData, setSectionsData] = (0, react_1.useState)({});
-    const debouncedSearchTerm = (0, useDebounce_1.default)(query);
+    const [sectionsData, setSectionsData] = (0, react_1.useState)({
+        sectionsData: {},
+        request: {},
+    });
+    const debouncedSearchTerm = (0, useDebounce_1.default)(query, advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.debounce);
     const { numTermsWithGroupSuggestions = 0, numGroupsSuggestedPerTerm = 0 } = advancedParameters || {};
     const autocompleteParameters = (0, react_1.useMemo)(() => {
         const decoratedParameters = Object.assign({}, advancedParameters);
+        // 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 })), {});
         }
@@ -58,7 +63,7 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
                 }
             }
             else if (!debouncedSearchTerm) {
-                setSectionsData({});
+                setSectionsData({ sectionsData: {}, request: {} });
             }
         }))();
     }, [

package/lib/cjs/hooks/useDownShift.js

@@ -9,7 +9,9 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
     onSelectedItemChange({ selectedItem }) {
         var _a;
         if (selectedItem) {
-            setQuery(selectedItem.value || '');
+            if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.section) === 'Search Suggestions') {
+                setQuery(selectedItem.value || '');
+            }
             if (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) {
                 if (onSubmit)
                     onSubmit({ item: selectedItem, originalQuery: previousQuery });

package/lib/cjs/hooks/useSections.js

@@ -11,7 +11,7 @@ function useSections(query, cioClient, sections, zeroStateSections, advancedPara
     const autocompleteSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'autocomplete' || !config.type), [activeSections]);
     const recommendationsSections = activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'recommendations');
     // Fetch Autocomplete Results
-    const autocompleteResults = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
+    const { sectionsData: autocompleteResults, request } = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
     // Fetch Recommendations Results
     const recommendationsResults = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections);
     const sectionResults = Object.assign(Object.assign({}, autocompleteResults), recommendationsResults);
@@ -31,6 +31,7 @@ function useSections(query, cioClient, sections, zeroStateSections, advancedPara
         activeSections,
         activeSectionsWithData,
         zeroStateActiveSections,
+        request,
     };
 }
 exports.default = useSections;

package/lib/cjs/utils.js

@@ -1,10 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.escapeRegExp = exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getItemPosition = void 0;
+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;
 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) {
+    var _a, _b;
+    let featureDisplaySearchSuggestionImages = false;
+    let featureDisplaySearchSuggestionResultCounts = false;
+    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':
+                featureDisplaySearchSuggestionResultCounts = true;
+                break;
+            case 'custom_autosuggest_ui_image':
+                featureDisplaySearchSuggestionImages = true;
+                break;
+            case 'custom_autosuggest_ui_image_result_count':
+                featureDisplaySearchSuggestionImages = true;
+                featureDisplaySearchSuggestionResultCounts = true;
+                break;
+            default:
+                break;
+        }
+    }
+    return {
+        featureDisplaySearchSuggestionImages,
+        featureDisplaySearchSuggestionResultCounts,
+    };
+}
+exports.getSearchSuggestionFeatures = getSearchSuggestionFeatures;
 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.9.3';
+exports.default = '1.13.0';

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

@@ -4,8 +4,9 @@ import { isProduct, isInGroupSuggestion, isSearchSuggestion } from '../../../typ
 import SectionItemText from './SectionItemText';
 export default function SectionItem(props) {
     const { item, children, displaySearchTermHighlights } = props;
-    const { getItemProps, advancedParameters, query } = useContext(CioAutocompleteContext);
-    const { displaySearchSuggestionImages, displaySearchSuggestionResultCounts } = advancedParameters || {};
+    const { getItemProps, advancedParameters, query, featureToggles } = useContext(CioAutocompleteContext);
+    const { featureDisplaySearchSuggestionImages, featureDisplaySearchSuggestionResultCounts } = featureToggles;
+    const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, } = advancedParameters || {};
     let defaultChildren;
     if (isProduct(item)) {
         defaultChildren = (React.createElement(React.Fragment, null,

package/lib/mjs/constants.js

@@ -207,3 +207,4 @@ To see this in action:
   - Notice how the user is presented with only short sleeved items as results.
   - 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.`;

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import useCioClient from './useCioClient';
 import useDownShift from './useDownShift';
 import usePrevious from './usePrevious';
-import { getItemPosition } from '../utils';
+import { getItemPosition, getSearchSuggestionFeatures } from '../utils';
 import useConsoleErrors from './useConsoleErrors';
 import useSections from './useSections';
 import useItems from './useItems';
@@ -22,7 +22,7 @@ const useCioAutocomplete = (options) => {
     const previousQuery = usePrevious(query);
     const cioClient = useCioClient({ apiKey, cioJsClient });
     // Get autocomplete sections (autocomplete + recommendations + custom)
-    const { activeSections, activeSectionsWithData, zeroStateActiveSections } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
+    const { activeSections, activeSectionsWithData, zeroStateActiveSections, request } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
     const items = useItems(activeSectionsWithData);
     const downshift = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery });
@@ -32,6 +32,8 @@ const useCioAutocomplete = (options) => {
     return {
         query,
         sections: activeSectionsWithData,
+        request,
+        featureToggles: getSearchSuggestionFeatures(request),
         isOpen: isOpen && items?.length > 0,
         getMenuProps: () => ({
             ...getMenuProps(),

package/lib/mjs/hooks/useDebouncedFetchSections.js

@@ -29,16 +29,21 @@ const transformResponse = (response, options) => {
             }
         });
     });
-    return newSectionsData;
+    return { sectionsData: newSectionsData, request: response?.request };
 };
 const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advancedParameters) => {
-    const [sectionsData, setSectionsData] = useState({});
-    const debouncedSearchTerm = useDebounce(query);
+    const [sectionsData, setSectionsData] = useState({
+        sectionsData: {},
+        request: {},
+    });
+    const debouncedSearchTerm = useDebounce(query, advancedParameters?.debounce);
     const { numTermsWithGroupSuggestions = 0, numGroupsSuggestedPerTerm = 0 } = advancedParameters || {};
     const autocompleteParameters = useMemo(() => {
         const decoratedParameters = {
             ...advancedParameters,
         };
+        // eslint-disable-next-line no-param-reassign
+        delete decoratedParameters?.debounce;
         if (autocompleteSections) {
             decoratedParameters.resultsPerSection = autocompleteSections.reduce((acc, sectionConfig) => ({
                 ...acc,
@@ -64,7 +69,7 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
                 }
             }
             else if (!debouncedSearchTerm) {
-                setSectionsData({});
+                setSectionsData({ sectionsData: {}, request: {} });
             }
         })();
     }, [

package/lib/mjs/hooks/useDownShift.js

@@ -6,7 +6,9 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
     itemToString: (item) => item?.value || '',
     onSelectedItemChange({ selectedItem }) {
         if (selectedItem) {
-            setQuery(selectedItem.value || '');
+            if (selectedItem?.section === 'Search Suggestions') {
+                setQuery(selectedItem.value || '');
+            }
             if (selectedItem?.value) {
                 if (onSubmit)
                     onSubmit({ item: selectedItem, originalQuery: previousQuery });

package/lib/mjs/hooks/useSections.js

@@ -8,7 +8,7 @@ export default function useSections(query, cioClient, sections, zeroStateSection
     const autocompleteSections = useMemo(() => activeSections?.filter((config) => config.type === 'autocomplete' || !config.type), [activeSections]);
     const recommendationsSections = activeSections?.filter((config) => config.type === 'recommendations');
     // Fetch Autocomplete Results
-    const autocompleteResults = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
+    const { sectionsData: autocompleteResults, request } = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
     // Fetch Recommendations Results
     const recommendationsResults = useFetchRecommendationPod(cioClient, recommendationsSections);
     const sectionResults = { ...autocompleteResults, ...recommendationsResults };
@@ -28,5 +28,6 @@ export default function useSections(query, cioClient, sections, zeroStateSection
         activeSections,
         activeSectionsWithData,
         zeroStateActiveSections,
+        request,
     };
 }

package/lib/mjs/utils.js

@@ -1,6 +1,30 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { isCustomSection } from './typeGuards';
 import version from './version';
+export function getSearchSuggestionFeatures(request) {
+    let featureDisplaySearchSuggestionImages = false;
+    let featureDisplaySearchSuggestionResultCounts = false;
+    if (request?.features?.custom_autosuggest_ui === true) {
+        switch (request?.feature_variants?.custom_autosuggest_ui) {
+            case 'custom_autosuggest_ui_result_count':
+                featureDisplaySearchSuggestionResultCounts = true;
+                break;
+            case 'custom_autosuggest_ui_image':
+                featureDisplaySearchSuggestionImages = true;
+                break;
+            case 'custom_autosuggest_ui_image_result_count':
+                featureDisplaySearchSuggestionImages = true;
+                featureDisplaySearchSuggestionResultCounts = true;
+                break;
+            default:
+                break;
+        }
+    }
+    return {
+        featureDisplaySearchSuggestionImages,
+        featureDisplaySearchSuggestionResultCounts,
+    };
+}
 export const getItemPosition = ({ item, items }) => {
     const index = items.findIndex((itemInFlatList) => itemInFlatList?.id === item?.id);
     const sectionId = items[index]?.section;

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.9.3';
+export default '1.13.0';

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

@@ -3,6 +3,11 @@ import { CioAutocompleteProps } from '../../types';
 export declare const CioAutocompleteContext: React.Context<{
     query: string;
     sections: import("../../types").Section[];
+    request: Partial<import("@constructor-io/constructorio-client-javascript/lib/types").AutocompleteRequestType>;
+    featureToggles: {
+        featureDisplaySearchSuggestionImages: boolean;
+        featureDisplaySearchSuggestionResultCounts: boolean;
+    };
     isOpen: boolean;
     getMenuProps: () => any;
     getLabelProps: (options?: import("downshift").UseComboboxGetLabelPropsOptions | undefined) => any;

package/lib/types/constants.d.ts

@@ -30,3 +30,4 @@ export declare const advancedParametersDefaultDescription = "Passing an `advance
 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";
 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.";

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

@@ -4,6 +4,11 @@ export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
 declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     query: string;
     sections: import("../types").Section[];
+    request: Partial<import("@constructor-io/constructorio-client-javascript/lib/types").AutocompleteRequestType>;
+    featureToggles: {
+        featureDisplaySearchSuggestionImages: boolean;
+        featureDisplaySearchSuggestionResultCounts: boolean;
+    };
     isOpen: boolean;
     getMenuProps: () => any;
     getLabelProps: (options?: import("downshift").UseComboboxGetLabelPropsOptions | undefined) => any;

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

@@ -1,5 +1,5 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
-import { AutocompleteResultSections, RecommendationsSection } from '../types';
-declare const useFetchRecommendationPod: (cioClient: Nullable<ConstructorIOClient>, recommendationPods: RecommendationsSection[]) => AutocompleteResultSections;
+import { RecommendationsSection, SectionsData } from '../types';
+declare const useFetchRecommendationPod: (cioClient: Nullable<ConstructorIOClient>, recommendationPods: RecommendationsSection[]) => SectionsData;
 export default useFetchRecommendationPod;

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

@@ -5,4 +5,5 @@ export default function useSections(query: string, cioClient: Nullable<Construct
     activeSections: UserDefinedSection[];
     activeSectionsWithData: import("../types").Section[];
     zeroStateActiveSections: false | UserDefinedSection[] | undefined;
+    request: Partial<import("@constructor-io/constructorio-client-javascript/lib/types").AutocompleteRequestType>;
 };

package/lib/types/types.d.ts

@@ -1,7 +1,7 @@
 import { GetItemPropsOptions } from 'downshift';
 import { ReactNode } from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { IAutocompleteParameters, SearchSuggestion as SearchSuggestionFromClient, Product as ProductFromClient, Item as ItemBase } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { IAutocompleteParameters, SearchSuggestion as SearchSuggestionFromClient, Product as ProductFromClient, Item as ItemBase, AutocompleteRequestType } from '@constructor-io/constructorio-client-javascript/lib/types';
 export type { IAutocompleteParameters } from '@constructor-io/constructorio-client-javascript/lib/types';
 export type CioClientConfig = {
     apiKey?: string;
@@ -12,13 +12,14 @@ export interface AdvancedParametersBase {
     numGroupsSuggestedPerTerm?: number;
     displaySearchSuggestionImages?: boolean;
     displaySearchSuggestionResultCounts?: boolean;
+    debounce?: number;
 }
 export type AdvancedParameters = AdvancedParametersBase & Omit<IAutocompleteParameters, 'resultsPerSection'>;
 export type CioAutocompleteProps = CioClientConfig & {
     openOnFocus?: boolean;
     onSubmit: OnSubmit;
     onFocus?: () => void;
-    onChange?: (string: any) => void;
+    onChange?: (input: string) => void;
     placeholder?: string;
     children?: ReactNode;
     sections?: UserDefinedSection[];
@@ -46,9 +47,13 @@ export type GetAutocompleteResultsOptions = {
         numResults: number;
     };
 };
+export type SectionsData = {
+    [key: string]: Item[] | undefined;
+};
 /** CIO API Response Data */
 export type AutocompleteResultSections = {
-    [key: string]: Item[] | undefined;
+    sectionsData: SectionsData;
+    request: Partial<AutocompleteRequestType>;
 };
 type SectionType = 'autocomplete' | 'recommendations' | 'custom';
 export type SectionConfiguration = {

package/lib/types/utils.d.ts

@@ -1,5 +1,6 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { OnSubmit, Item, Section, UserDefinedSection, AutocompleteResultSections } from './types';
+import { AutocompleteRequestType } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { OnSubmit, Item, Section, UserDefinedSection, SectionsData } from './types';
 export type GetItemPosition = (args: {
     item: Item;
     items: Item[];
@@ -7,6 +8,10 @@ export type GetItemPosition = (args: {
     index: number;
     sectionId: string;
 };
+export declare function getSearchSuggestionFeatures(request: Partial<AutocompleteRequestType>): {
+    featureDisplaySearchSuggestionImages: boolean;
+    featureDisplaySearchSuggestionResultCounts: boolean;
+};
 export declare const getItemPosition: GetItemPosition;
 type CamelToStartCase = (camelCaseString: string) => string;
 export declare const camelToStartCase: CamelToStartCase;
@@ -32,6 +37,6 @@ export declare const stringifyWithDefaults: (obj: {
 }) => string;
 export declare const disableStoryActions: (story: any) => void;
 export declare const getCioClient: (apiKey?: string) => ConstructorIOClient | null;
-export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionResults: AutocompleteResultSections) => Section[];
+export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionResults: SectionsData) => Section[];
 export declare const escapeRegExp: (string: string) => string;
 export {};

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.9.3";
+declare const _default: "1.13.0";
 export default _default;

package/package.json

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