@constructor-io/constructorio-ui-autocomplete 1.21.0 → 1.22.1

package/lib/cjs/beaconUtils.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.storeRecentAction = exports.getLastAction = exports.getRecentActions = exports.storeRecentSearch = exports.getRecentSearches = exports.storageGetArray = exports.storageGetItem = exports.cleanTerm = exports.storageSetItem = exports.getStorageEngine = exports.CONSTANTS = void 0;
+// eslint-disable-next-line import/no-cycle
+const utils_1 = require("./utils");
+exports.CONSTANTS = {
+    SEARCH_SUBMIT: 'SEARCH_SUBMIT',
+    RECENT_ACTIONS_STORAGE_KEY: {
+        scope: 'session',
+        key: '_constructorio_recent_actions',
+    },
+    RECENT_SEARCHES_STORAGE_KEY: {
+        scope: 'local',
+        key: '_constructorio_recent_searches',
+    },
+    SEARCH_TERM_STORAGE_KEY: {
+        scope: 'session',
+        key: '_constructorio_search_term',
+    },
+    RECENT_SEARCHES_STORAGE_COUNT: 100,
+    RECENT_ACTION_STORAGE_COUNT: 5,
+};
+// Return storage engine based on scope
+const getStorageEngine = (scope) => {
+    if (scope === 'local') {
+        return localStorage;
+    }
+    return sessionStorage;
+};
+exports.getStorageEngine = getStorageEngine;
+// Set item in storage
+const storageSetItem = (key, value) => {
+    try {
+        const storageEngine = (0, exports.getStorageEngine)(key.scope);
+        return storageEngine.setItem(key.key, value);
+    }
+    catch (e) {
+        (0, utils_1.logger)(`storageSetItem error: ${e}`);
+        return null;
+    }
+};
+exports.storageSetItem = storageSetItem;
+/*
+ * Use the text content of the resulting HTML node(s) created from the
+ * term
+ */
+const cleanTerm = (term) => {
+    // Remove all scripts and image tags from term
+    const tmp = document.implementation.createHTMLDocument('');
+    tmp.body.innerHTML = term;
+    const scriptsAndImages = [...tmp.body.querySelectorAll('script, img')];
+    scriptsAndImages.forEach((el) => {
+        tmp.body.removeChild(el);
+    });
+    const nodes = tmp.body.childNodes;
+    const texts = [...nodes].map((node) => node.innerText || node.textContent);
+    return texts.join('');
+};
+exports.cleanTerm = cleanTerm;
+// Retrieves item from storage for key
+const storageGetItem = (key) => {
+    try {
+        const storageEngine = (0, exports.getStorageEngine)(key.scope);
+        return storageEngine.getItem(key.key);
+    }
+    catch (e) {
+        (0, utils_1.logger)(`storageGetItem error: ${e}`);
+        return null;
+    }
+};
+exports.storageGetItem = storageGetItem;
+// Retrieve array from storage
+const storageGetArray = (key) => {
+    const item = (0, exports.storageGetItem)(key);
+    if (item) {
+        try {
+            const array = JSON.parse(item);
+            return array;
+        }
+        catch (e) {
+            (0, utils_1.logger)(`storageGetArray error: ${e}`);
+        }
+    }
+    return null;
+};
+exports.storageGetArray = storageGetArray;
+/*
+ * Returns a list of recent searches
+ */
+const getRecentSearches = () => {
+    const recentSearches = (0, exports.storageGetArray)(exports.CONSTANTS.RECENT_SEARCHES_STORAGE_KEY) || [];
+    // upgrade the array to store timestamps if it isn't already
+    recentSearches.forEach((item, i) => {
+        if (typeof item === 'string') {
+            recentSearches[i] = {
+                term: item,
+                ts: Date.now(),
+            };
+        }
+    });
+    return recentSearches;
+};
+exports.getRecentSearches = getRecentSearches;
+/*
+ * Stores a recent search
+ */
+const storeRecentSearch = (term, suggestionData) => {
+    const cleanedTerm = (0, exports.cleanTerm)(term.trim());
+    let recentSearches = (0, exports.getRecentSearches)();
+    if (cleanedTerm.length > 0) {
+        // this ensures it goes onto the end of the array, and only there
+        recentSearches = recentSearches.filter((item) => { var _a; return ((_a = item.term) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== cleanedTerm.toUpperCase(); });
+        // reset the section to the original section if it's present because that's
+        // the real section we want to store
+        if (suggestionData === null || suggestionData === void 0 ? void 0 : suggestionData.original_section) {
+            /* eslint-disable no-param-reassign */
+            suggestionData.section = suggestionData.original_section;
+            delete suggestionData.original_section;
+            delete suggestionData.is_meta_section;
+            /* eslint-enable no-param-reassign */
+        }
+        recentSearches.push({
+            term: cleanedTerm,
+            ts: Date.now(),
+            data: suggestionData,
+        });
+        while (recentSearches.length > exports.CONSTANTS.RECENT_SEARCHES_STORAGE_COUNT) {
+            recentSearches.shift();
+        }
+        (0, exports.storageSetItem)(exports.CONSTANTS.RECENT_SEARCHES_STORAGE_KEY, JSON.stringify(recentSearches));
+    }
+};
+exports.storeRecentSearch = storeRecentSearch;
+/*
+ * Returns a list of recent actions
+ */
+const getRecentActions = () => (0, exports.storageGetArray)(exports.CONSTANTS.RECENT_ACTIONS_STORAGE_KEY) || [];
+exports.getRecentActions = getRecentActions;
+/*
+ * Returns the last action
+ */
+const getLastAction = () => {
+    var _a;
+    const recentActions = (0, exports.getRecentActions)();
+    if (recentActions && recentActions.length) {
+        return (_a = recentActions[recentActions.length - 1]) === null || _a === void 0 ? void 0 : _a.action;
+    }
+    return null;
+};
+exports.getLastAction = getLastAction;
+/*
+ * Stores a recent action
+ * Currently only storing search submits, search loads and browse loads
+ */
+const storeRecentAction = (action) => {
+    let recentActions = (0, exports.getRecentActions)();
+    if (action) {
+        // Only add non-consecutive actions
+        if ((0, exports.getLastAction)() !== action) {
+            recentActions.push({
+                action,
+                ts: Date.now(),
+            });
+        }
+        if (recentActions.length > exports.CONSTANTS.RECENT_ACTION_STORAGE_COUNT) {
+            recentActions = recentActions.slice(-1 * exports.CONSTANTS.RECENT_ACTION_STORAGE_COUNT);
+        }
+        (0, exports.storageSetItem)(exports.CONSTANTS.RECENT_ACTIONS_STORAGE_KEY, JSON.stringify(recentActions));
+    }
+};
+exports.storeRecentAction = storeRecentAction;

package/lib/cjs/constants.js

@@ -34,6 +34,11 @@ const {
   // must be used for a hooks integrations
   query: string, // current input field value
   sections: [{...}], // array of sections data to render in menu list
+  totalNumResultsPerSection: {
+    "Products": number,
+    "Search Suggestions": number,
+    ...
+  }, // total number of product and search suggestion results (and other sections)
   getFormProps: () => ({...})), // prop getter for jsx form element
   getInputProps: () => ({...})), // prop getter for jsx input element
   getMenuProps: () => ({...})), // prop getter for jsx element rendering the results container

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 } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
+    const { 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]);
@@ -69,6 +69,7 @@ const useCioAutocomplete = (options) => {
     return {
         query,
         sections: activeSectionsWithData,
+        totalNumResultsPerSection,
         request,
         featureToggles: features,
         isOpen: isOpen && (items === null || items === void 0 ? void 0 : items.length) > 0,

package/lib/cjs/hooks/useDebouncedFetchSections.js

@@ -28,12 +28,18 @@ const transformResponse = (response, options) => {
             }
         });
     });
-    return { sectionsData: newSectionsData, request: response === null || response === void 0 ? void 0 : response.request };
+    return {
+        sectionsData: newSectionsData,
+        request: response === null || response === void 0 ? void 0 : response.request,
+        totalNumResultsPerSection: response === null || response === void 0 ? void 0 : response.total_num_results_per_section,
+    };
 };
 const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advancedParameters) => {
+    // This says sectionsData but it also contain request information
     const [sectionsData, setSectionsData] = (0, react_1.useState)({
         sectionsData: {},
         request: {},
+        totalNumResultsPerSection: {},
     });
     const debouncedSearchTerm = (0, useDebounce_1.default)(query, advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.debounce);
     const { numTermsWithGroupSuggestions = 0, numGroupsSuggestedPerTerm = 0 } = advancedParameters || {};
@@ -65,7 +71,7 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
                 }
             }
             else if (!debouncedSearchTerm) {
-                setSectionsData({ sectionsData: {}, request: {} });
+                setSectionsData({ sectionsData: {}, request: {}, totalNumResultsPerSection: {} });
             }
         }))();
     }, [

package/lib/cjs/hooks/useSections.js

@@ -16,7 +16,7 @@ function useSections(query, cioClient, sections, zeroStateSections, advancedPara
     const autocompleteSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => (0, typeGuards_1.isAutocompleteSection)(config)), [activeSections]);
     const recommendationsSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => (0, typeGuards_1.isRecommendationsSection)(config)), [activeSections]);
     // Fetch Autocomplete Results
-    const { sectionsData: autocompleteResults, request } = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
+    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);
     // Remove sections if necessary
@@ -56,6 +56,7 @@ function useSections(query, cioClient, sections, zeroStateSections, advancedPara
         activeSectionsWithData,
         zeroStateActiveSections,
         request,
+        totalNumResultsPerSection,
     };
 }
 exports.default = useSections;

package/lib/cjs/version.js

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

package/lib/mjs/beaconUtils.js

@@ -0,0 +1,157 @@
+// eslint-disable-next-line import/no-cycle
+import { logger } from './utils';
+export const CONSTANTS = {
+    SEARCH_SUBMIT: 'SEARCH_SUBMIT',
+    RECENT_ACTIONS_STORAGE_KEY: {
+        scope: 'session',
+        key: '_constructorio_recent_actions',
+    },
+    RECENT_SEARCHES_STORAGE_KEY: {
+        scope: 'local',
+        key: '_constructorio_recent_searches',
+    },
+    SEARCH_TERM_STORAGE_KEY: {
+        scope: 'session',
+        key: '_constructorio_search_term',
+    },
+    RECENT_SEARCHES_STORAGE_COUNT: 100,
+    RECENT_ACTION_STORAGE_COUNT: 5,
+};
+// Return storage engine based on scope
+export const getStorageEngine = (scope) => {
+    if (scope === 'local') {
+        return localStorage;
+    }
+    return sessionStorage;
+};
+// Set item in storage
+export const storageSetItem = (key, value) => {
+    try {
+        const storageEngine = getStorageEngine(key.scope);
+        return storageEngine.setItem(key.key, value);
+    }
+    catch (e) {
+        logger(`storageSetItem error: ${e}`);
+        return null;
+    }
+};
+/*
+ * Use the text content of the resulting HTML node(s) created from the
+ * term
+ */
+export const cleanTerm = (term) => {
+    // Remove all scripts and image tags from term
+    const tmp = document.implementation.createHTMLDocument('');
+    tmp.body.innerHTML = term;
+    const scriptsAndImages = [...tmp.body.querySelectorAll('script, img')];
+    scriptsAndImages.forEach((el) => {
+        tmp.body.removeChild(el);
+    });
+    const nodes = tmp.body.childNodes;
+    const texts = [...nodes].map((node) => node.innerText || node.textContent);
+    return texts.join('');
+};
+// Retrieves item from storage for key
+export const storageGetItem = (key) => {
+    try {
+        const storageEngine = getStorageEngine(key.scope);
+        return storageEngine.getItem(key.key);
+    }
+    catch (e) {
+        logger(`storageGetItem error: ${e}`);
+        return null;
+    }
+};
+// Retrieve array from storage
+export const storageGetArray = (key) => {
+    const item = storageGetItem(key);
+    if (item) {
+        try {
+            const array = JSON.parse(item);
+            return array;
+        }
+        catch (e) {
+            logger(`storageGetArray error: ${e}`);
+        }
+    }
+    return null;
+};
+/*
+ * Returns a list of recent searches
+ */
+export const getRecentSearches = () => {
+    const recentSearches = storageGetArray(CONSTANTS.RECENT_SEARCHES_STORAGE_KEY) || [];
+    // upgrade the array to store timestamps if it isn't already
+    recentSearches.forEach((item, i) => {
+        if (typeof item === 'string') {
+            recentSearches[i] = {
+                term: item,
+                ts: Date.now(),
+            };
+        }
+    });
+    return recentSearches;
+};
+/*
+ * Stores a recent search
+ */
+export const storeRecentSearch = (term, suggestionData) => {
+    const cleanedTerm = cleanTerm(term.trim());
+    let recentSearches = getRecentSearches();
+    if (cleanedTerm.length > 0) {
+        // this ensures it goes onto the end of the array, and only there
+        recentSearches = recentSearches.filter((item) => item.term?.toUpperCase() !== cleanedTerm.toUpperCase());
+        // reset the section to the original section if it's present because that's
+        // the real section we want to store
+        if (suggestionData?.original_section) {
+            /* eslint-disable no-param-reassign */
+            suggestionData.section = suggestionData.original_section;
+            delete suggestionData.original_section;
+            delete suggestionData.is_meta_section;
+            /* eslint-enable no-param-reassign */
+        }
+        recentSearches.push({
+            term: cleanedTerm,
+            ts: Date.now(),
+            data: suggestionData,
+        });
+        while (recentSearches.length > CONSTANTS.RECENT_SEARCHES_STORAGE_COUNT) {
+            recentSearches.shift();
+        }
+        storageSetItem(CONSTANTS.RECENT_SEARCHES_STORAGE_KEY, JSON.stringify(recentSearches));
+    }
+};
+/*
+ * Returns a list of recent actions
+ */
+export const getRecentActions = () => storageGetArray(CONSTANTS.RECENT_ACTIONS_STORAGE_KEY) || [];
+/*
+ * Returns the last action
+ */
+export const getLastAction = () => {
+    const recentActions = getRecentActions();
+    if (recentActions && recentActions.length) {
+        return recentActions[recentActions.length - 1]?.action;
+    }
+    return null;
+};
+/*
+ * Stores a recent action
+ * Currently only storing search submits, search loads and browse loads
+ */
+export const storeRecentAction = (action) => {
+    let recentActions = getRecentActions();
+    if (action) {
+        // Only add non-consecutive actions
+        if (getLastAction() !== action) {
+            recentActions.push({
+                action,
+                ts: Date.now(),
+            });
+        }
+        if (recentActions.length > CONSTANTS.RECENT_ACTION_STORAGE_COUNT) {
+            recentActions = recentActions.slice(-1 * CONSTANTS.RECENT_ACTION_STORAGE_COUNT);
+        }
+        storageSetItem(CONSTANTS.RECENT_ACTIONS_STORAGE_KEY, JSON.stringify(recentActions));
+    }
+};

package/lib/mjs/constants.js

@@ -31,6 +31,11 @@ const {
   // must be used for a hooks integrations
   query: string, // current input field value
   sections: [{...}], // array of sections data to render in menu list
+  totalNumResultsPerSection: {
+    "Products": number,
+    "Search Suggestions": number,
+    ...
+  }, // total number of product and search suggestion results (and other sections)
   getFormProps: () => ({...})), // prop getter for jsx form element
   getInputProps: () => ({...})), // prop getter for jsx input element
   getMenuProps: () => ({...})), // prop getter for jsx element rendering the results container

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 } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
+    const { 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]);
@@ -65,6 +65,7 @@ const useCioAutocomplete = (options) => {
     return {
         query,
         sections: activeSectionsWithData,
+        totalNumResultsPerSection,
         request,
         featureToggles: features,
         isOpen: isOpen && items?.length > 0,

package/lib/mjs/hooks/useDebouncedFetchSections.js

@@ -29,12 +29,18 @@ const transformResponse = (response, options) => {
             }
         });
     });
-    return { sectionsData: newSectionsData, request: response?.request };
+    return {
+        sectionsData: newSectionsData,
+        request: response?.request,
+        totalNumResultsPerSection: response?.total_num_results_per_section,
+    };
 };
 const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advancedParameters) => {
+    // This says sectionsData but it also contain request information
     const [sectionsData, setSectionsData] = useState({
         sectionsData: {},
         request: {},
+        totalNumResultsPerSection: {},
     });
     const debouncedSearchTerm = useDebounce(query, advancedParameters?.debounce);
     const { numTermsWithGroupSuggestions = 0, numGroupsSuggestedPerTerm = 0 } = advancedParameters || {};
@@ -71,7 +77,7 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
                 }
             }
             else if (!debouncedSearchTerm) {
-                setSectionsData({ sectionsData: {}, request: {} });
+                setSectionsData({ sectionsData: {}, request: {}, totalNumResultsPerSection: {} });
             }
         })();
     }, [

package/lib/mjs/hooks/useSections.js

@@ -13,7 +13,7 @@ export default function useSections(query, cioClient, sections, zeroStateSection
     const autocompleteSections = useMemo(() => activeSections?.filter((config) => isAutocompleteSection(config)), [activeSections]);
     const recommendationsSections = useMemo(() => activeSections?.filter((config) => isRecommendationsSection(config)), [activeSections]);
     // Fetch Autocomplete Results
-    const { sectionsData: autocompleteResults, request } = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
+    const { sectionsData: autocompleteResults, request, totalNumResultsPerSection, } = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
     // Fetch Recommendations Results
     const { recommendationsResults, podsData } = useFetchRecommendationPod(cioClient, recommendationsSections);
     // Remove sections if necessary
@@ -52,5 +52,6 @@ export default function useSections(query, cioClient, sections, zeroStateSection
         activeSectionsWithData,
         zeroStateActiveSections,
         request,
+        totalNumResultsPerSection,
     };
 }

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.21.0';
+export default '1.22.1';

package/lib/types/beaconUtils.d.ts

@@ -0,0 +1,27 @@
+export declare const CONSTANTS: {
+    SEARCH_SUBMIT: string;
+    RECENT_ACTIONS_STORAGE_KEY: {
+        scope: string;
+        key: string;
+    };
+    RECENT_SEARCHES_STORAGE_KEY: {
+        scope: string;
+        key: string;
+    };
+    SEARCH_TERM_STORAGE_KEY: {
+        scope: string;
+        key: string;
+    };
+    RECENT_SEARCHES_STORAGE_COUNT: number;
+    RECENT_ACTION_STORAGE_COUNT: number;
+};
+export declare const getStorageEngine: (scope: any) => Storage;
+export declare const storageSetItem: (key: any, value: any) => void | null;
+export declare const cleanTerm: (term: any) => string;
+export declare const storageGetItem: (key: any) => string | null;
+export declare const storageGetArray: (key: any) => any;
+export declare const getRecentSearches: () => any;
+export declare const storeRecentSearch: (term: any, suggestionData: any) => void;
+export declare const getRecentActions: () => any;
+export declare const getLastAction: () => any;
+export declare const storeRecentAction: (action: any) => void;

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

@@ -3,6 +3,7 @@ import { CioAutocompleteProps } from '../../types';
 export declare const CioAutocompleteContext: React.Context<{
     query: string;
     sections: import("../../types").Section[];
+    totalNumResultsPerSection: Record<string, number>;
     request: Partial<import("@constructor-io/constructorio-client-javascript/lib/types").AutocompleteRequestType>;
     featureToggles: {
         featureDisplaySearchSuggestionImages: boolean;

package/lib/types/constants.d.ts

@@ -1,7 +1,7 @@
 import { AutocompleteSubmitEvent } from './types';
 export declare const apiKey = "key_M57QS8SMPdLdLx4x";
 export declare const componentDescription = "- import `CioAutocomplete` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, an `apiKey` or `cioJsClient` are required, and an `onSubmit` callback must be passed. All other values are optional.\n- Use different props to configure the behavior of this component.\n- The following stories shows how different props affect the component's behavior\n\n> Note: when we say `cioJsClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
-export declare const hookDescription = "- import `useCioAutocomplete` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n  - accessibility\n- To use this hook, an `apiKey` or `cioJsClient` are required, and an `onSubmit` callback must be passed to the `useCioAutocomplete` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\n> **Important: Please note that all of the select or submit events should go through the `onSubmit` callback. The `getItemProps` hook returns click and keyboard handlers which should be applied to the elements using the spread operator (see code examples below). Adding an `onClick` event manually to the elements would override the default behavior of the library preventing it from sending tracking events and would cause different behavior between click and keyboard events. Selecting an item or submitting the search would both cause `onSubmit` to be called. **\n\nCalling the `useCioAutocomplete` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  query: string, // current input field value\n  sections: [{...}], // array of sections data to render in menu list\n  getFormProps: () => ({...})), // prop getter for jsx form element\n  getInputProps: () => ({...})), // prop getter for jsx input element\n  getMenuProps: () => ({...})), // prop getter for jsx element rendering the results container\n  getItemProps: (item) => ({...})), // prop getter for jsx element rendering each result\n  getSectionProps: (section: Section) => ({...})), // prop getter for jsx element rendering each section.\n\n  // available for use, but not required for all use cases\n  selectedItem: item, // undefined or current selected item (via hover or arrow keys)\n  isOpen: boolean, // current state of the menu list\n  openMenu: () => void, // open menu\n  closeMenu: () => void, // close menu\n  setQuery: () => void, // update the current input field value\n  getLabelProps: () => ({...})), // prop getter for a jsx label element\n  cioJsClient, // instance of constructorio-client-javascript\n } = useCioAutocomplete(args);\n```\n\n> Note: when we say `cioJsClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n\nThe following stories show how different options affect the hook's behavior!\n";
+export declare const hookDescription = "- import `useCioAutocomplete` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n  - accessibility\n- To use this hook, an `apiKey` or `cioJsClient` are required, and an `onSubmit` callback must be passed to the `useCioAutocomplete` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\n> **Important: Please note that all of the select or submit events should go through the `onSubmit` callback. The `getItemProps` hook returns click and keyboard handlers which should be applied to the elements using the spread operator (see code examples below). Adding an `onClick` event manually to the elements would override the default behavior of the library preventing it from sending tracking events and would cause different behavior between click and keyboard events. Selecting an item or submitting the search would both cause `onSubmit` to be called. **\n\nCalling the `useCioAutocomplete` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  query: string, // current input field value\n  sections: [{...}], // array of sections data to render in menu list\n  totalNumResultsPerSection: {\n    \"Products\": number,\n    \"Search Suggestions\": number,\n    ...\n  }, // total number of product and search suggestion results (and other sections)\n  getFormProps: () => ({...})), // prop getter for jsx form element\n  getInputProps: () => ({...})), // prop getter for jsx input element\n  getMenuProps: () => ({...})), // prop getter for jsx element rendering the results container\n  getItemProps: (item) => ({...})), // prop getter for jsx element rendering each result\n  getSectionProps: (section: Section) => ({...})), // prop getter for jsx element rendering each section.\n\n  // available for use, but not required for all use cases\n  selectedItem: item, // undefined or current selected item (via hover or arrow keys)\n  isOpen: boolean, // current state of the menu list\n  openMenu: () => void, // open menu\n  closeMenu: () => void, // close menu\n  setQuery: () => void, // update the current input field value\n  getLabelProps: () => ({...})), // prop getter for a jsx label element\n  cioJsClient, // instance of constructorio-client-javascript\n } = useCioAutocomplete(args);\n```\n\n> Note: when we say `cioJsClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n\nThe following stories show how different options affect the hook's behavior!\n";
 export declare const sectionsDescription = "- by default, typing a query will fetch data for Search Suggestions and Products\n- to override this, pass an array of sections objects\n- the order of the objects in the `sections` array determines the order of the results\n- each autocomplete section object must have a `indexSectionName`\n- each recommendation section object must have a `podId`\n- each custom section object must have a `displayName`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8\n\n`indexSectionName` refers to a section under an index. The default sections are \"Products\" and \"Search Suggestions\". You can find all the sections that exist in your index under the \"Indexes\" tab of Constructor dashboard.\n\nWhen no values are passed for the `sections` argument, the following defaults are used:\n\n```jsx\n[\n  {\n    indexSectionName: 'Search Suggestions',\n    type: 'autocomplete',\n    numResults: 8\n  },\n  {\n    indexSectionName: 'Products',\n    type: 'autocomplete',\n    numResults: 8\n  }\n]\n```\n";
 export declare const userEventsDescription = "- pass callback functions to respond to user events\n- if provided, the onFocus callback function will be called each time the user focuses on the text input field\n- if provided, the onChange callback function will be called each time the user changes the value in the text input field\n- the onSubmit callback function will be called each time the user submits the form\n- the user can submit the form by pressing the enter key in the text input field, clicking a submit button within the form, clicking on a result, or pressing enter while a result is selected\n\n> \u26A0\uFE0F NOTE \u26A0\uFE0F Use the Storybook Canvas Actions tab to explore the behavior of all of these `OnEvent` callback functions as you interact with our Default User Events example rendered in the Canvas. In the stories below, Storybook Canvas Actions have been disabled to focus on each of these callback functions in isolation. Each of the example callback functions in the stories below log output to the console tab of the browser's developer tools.";
 export declare const zeroStateDescription = "- when the text input field has no text, we call this zero state\n- by default, the autocomplete shows nothing in the menu it's for zero state\n- to show zero state results, pass an array of section objects for `zeroStateSections`\n- when `zeroStateSections` has sections, the menu will open on user focus by default\n- set `openOnFocus` to false, to only show `zeroStateSections` after user has typed and then cleared the text input, instead of as soon as the user focuses on the text input\n- the order of the objects in the `zeroStateSections` array determines the order of the results\n- each autocomplete section object must have a `indexSectionName`\n- each recommendation section object must have a `podId`\n- each custom section object must have a `displayName`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8";

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

@@ -4,6 +4,7 @@ export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
 declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     query: string;
     sections: Section[];
+    totalNumResultsPerSection: Record<string, number>;
     request: Partial<import("@constructor-io/constructorio-client-javascript/lib/types").AutocompleteRequestType>;
     featureToggles: {
         featureDisplaySearchSuggestionImages: boolean;

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

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

package/lib/types/types.d.ts

@@ -79,6 +79,7 @@ export type SectionsData = {
 export type AutocompleteResultSections = {
     sectionsData: SectionsData;
     request: Partial<AutocompleteRequestType>;
+    totalNumResultsPerSection: Record<string, number>;
 };
 type SectionType = 'autocomplete' | 'recommendations' | 'custom';
 export type SectionConfiguration = {

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.21.0";
+declare const _default: "1.22.1";
 export default _default;

package/package.json

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