@constructor-io/constructorio-ui-autocomplete 1.7.2 → 1.8.1

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
+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.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_M57QS8SMPdLdLx4x';
 /// //////////////////////////////
@@ -186,8 +186,25 @@ import '@constructor-io/constructorio-ui-autocomplete/styles.css';
 }
 \`\`\`
 `;
-exports.advancedParametersDescription = `Pass an \`advancedParameters\` object to configure more options for the data included in the results requested from constructor's servers. The stories below show examples of the optional fields within this \`advancedParameters\` object that can be used to fine-tune the autosuggest data returned from constructor's servers.`;
-exports.advancedParametersDefaultDescription = `Passing an \`advancedParameters\` object is optional. Passing an empty object for the \`advancedParameters\` field behaves the same as not passing an \`advancedParameters\` object at all. This has no impact on the results returned by default.`;
-exports.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. To see this in action:
-- type "bab" in the example below. Notice how the user is presented with a search term of "baby" as well as "baby in Bodysuits" and "baby in Baby Organic Cotton"
-- navigate to the "Terms With Group Suggestions" story (using the navigation menu to the left), then use the Controls to adjust the values of \`numTermsWithGroupSuggestions\` to \`3\` and \`numGroupsSuggestedPerTerm\` to \`1\`. Next, type "dan" in the example autocomplete input field. Notice how the user is presented with three different search terms that have a maximum of one "in {group}" suggestion each`;
+exports.advancedParametersDescription = `The stories below show how optional fields within this \`advancedParameters\` object that can be used to fine-tune the autosuggest data returned from constructor's servers.`;
+exports.advancedParametersDefaultDescription = `Passing an \`advancedParameters\` object is optional. Passing an empty object for the \`advancedParameters\` field behaves the same as not passing an \`advancedParameters\` object at all.`;
+exports.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.
+
+To see this in action:
+1. Type "pan" in the example below.
+  - 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"
+2. Navigate to the "Terms With Group Suggestions" story (using the navigation menu to the left)
+3. Then use the Controls to adjust the values of \`numTermsWithGroupSuggestions\` to \`3\` and \`numGroupsSuggestedPerTerm\` to \`1\`
+4. Next, type "pan" in the example autocomplete input field.
+  - Notice how the user is presented with three different search terms that have a maximum of one "in {group}" suggestion each`;
+exports.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\`.
+
+To see this in action:
+1. Type "short" in the example below.
+  - Notice how the user is presented with only short pants as results.
+  - This is because the results are currently filtered to belong to the "Shorts" group.
+2. Navigate to the "Filtered Suggestions" story (using the navigation menu to the left)
+3. Then use the Controls to adjust the values of \`"group_id"\` to \`"1030"\`.
+4. Next, type "short" in the example autocomplete input field.
+  - Notice how the user is presented with only short sleeved items as results.
+  - This is because we are filtering to the "Shirts" group`;

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -21,7 +21,7 @@ exports.defaultSections = [
     },
 ];
 const useCioAutocomplete = (options) => {
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = 'What can we help you find today?', sections = exports.defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters = {}, } = options;
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = 'What can we help you find today?', sections = exports.defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters, } = options;
     const [query, setQuery] = (0, react_1.useState)('');
     const previousQuery = (0, usePrevious_1.default)(query);
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });

package/lib/cjs/hooks/useDebouncedFetchSections.js

@@ -30,20 +30,17 @@ const transformResponse = (response, options) => {
     });
     return newSectionsData;
 };
-const autocompleteParameters = {
-    resultsPerSection: {},
-    // numResults: 8,
-    // hiddenFields: [],
-    // filters: {},
-    // variationsMap: {}
-};
 const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advancedParameters) => {
     const [sectionsData, setSectionsData] = (0, react_1.useState)({});
     const debouncedSearchTerm = (0, useDebounce_1.default)(query);
-    const { numTermsWithGroupSuggestions = 0, numGroupsSuggestedPerTerm = 0 } = advancedParameters;
-    if (autocompleteSections) {
-        autocompleteParameters.resultsPerSection = autocompleteSections.reduce((acc, sectionConfig) => (Object.assign(Object.assign({}, acc), { [sectionConfig.identifier]: (sectionConfig === null || sectionConfig === void 0 ? void 0 : sectionConfig.numResults) || 8 })), {});
-    }
+    const { numTermsWithGroupSuggestions = 0, numGroupsSuggestedPerTerm = 0 } = advancedParameters || {};
+    const autocompleteParameters = (0, react_1.useMemo)(() => {
+        const decoratedParameters = Object.assign({}, advancedParameters);
+        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 })), {});
+        }
+        return decoratedParameters;
+    }, [autocompleteSections, advancedParameters]);
     (0, react_1.useEffect)(() => {
         (() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
             if (debouncedSearchTerm.trim()) {
@@ -56,6 +53,7 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
                     setSectionsData(newSectionsData);
                 }
                 catch (error) {
+                    // eslint-disable-next-line no-console
                     console.log(error);
                 }
             }
@@ -63,7 +61,13 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
                 setSectionsData({});
             }
         }))();
-    }, [debouncedSearchTerm, cioClient, numTermsWithGroupSuggestions, numGroupsSuggestedPerTerm]);
+    }, [
+        debouncedSearchTerm,
+        cioClient,
+        numTermsWithGroupSuggestions,
+        numGroupsSuggestedPerTerm,
+        autocompleteParameters,
+    ]);
     return sectionsData;
 };
 exports.default = useDebouncedFetchSection;

package/lib/cjs/hooks/useFetchRecommendationPod.js

@@ -26,6 +26,7 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
                 setRecommendationResults(recommendationPodResults);
             }
             catch (error) {
+                // eslint-disable-next-line no-console
                 console.log(error);
             }
         });

package/lib/cjs/hooks/useSections.js

@@ -8,7 +8,7 @@ const useFetchRecommendationPod_1 = tslib_1.__importDefault(require("./useFetchR
 function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
     const zeroStateActiveSections = !query.length && zeroStateSections;
     const [activeSections, setActiveSections] = (0, react_1.useState)(zeroStateActiveSections ? zeroStateSections : sections);
-    const autocompleteSections = activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'autocomplete' || !config.type);
+    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);

package/lib/mjs/constants.js

@@ -182,8 +182,25 @@ import '@constructor-io/constructorio-ui-autocomplete/styles.css';
 }
 \`\`\`
 `;
-export const advancedParametersDescription = `Pass an \`advancedParameters\` object to configure more options for the data included in the results requested from constructor's servers. The stories below show examples of the optional fields within this \`advancedParameters\` object that can be used to fine-tune the autosuggest data returned from constructor's servers.`;
-export const advancedParametersDefaultDescription = `Passing an \`advancedParameters\` object is optional. Passing an empty object for the \`advancedParameters\` field behaves the same as not passing an \`advancedParameters\` object at all. This has no impact on the results returned by default.`;
-export 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. To see this in action:
-- type "bab" in the example below. Notice how the user is presented with a search term of "baby" as well as "baby in Bodysuits" and "baby in Baby Organic Cotton"
-- navigate to the "Terms With Group Suggestions" story (using the navigation menu to the left), then use the Controls to adjust the values of \`numTermsWithGroupSuggestions\` to \`3\` and \`numGroupsSuggestedPerTerm\` to \`1\`. Next, type "dan" in the example autocomplete input field. Notice how the user is presented with three different search terms that have a maximum of one "in {group}" suggestion each`;
+export const advancedParametersDescription = `The stories below show how optional fields within this \`advancedParameters\` object that can be used to fine-tune the autosuggest data returned from constructor's servers.`;
+export const advancedParametersDefaultDescription = `Passing an \`advancedParameters\` object is optional. Passing an empty object for the \`advancedParameters\` field behaves the same as not passing an \`advancedParameters\` object at all.`;
+export 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.
+
+To see this in action:
+1. Type "pan" in the example below.
+  - 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"
+2. Navigate to the "Terms With Group Suggestions" story (using the navigation menu to the left)
+3. Then use the Controls to adjust the values of \`numTermsWithGroupSuggestions\` to \`3\` and \`numGroupsSuggestedPerTerm\` to \`1\`
+4. Next, type "pan" in the example autocomplete input field.
+  - Notice how the user is presented with three different search terms that have a maximum of one "in {group}" suggestion each`;
+export 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\`.
+
+To see this in action:
+1. Type "short" in the example below.
+  - Notice how the user is presented with only short pants as results.
+  - This is because the results are currently filtered to belong to the "Shorts" group.
+2. Navigate to the "Filtered Suggestions" story (using the navigation menu to the left)
+3. Then use the Controls to adjust the values of \`"group_id"\` to \`"1030"\`.
+4. Next, type "short" in the example autocomplete input field.
+  - Notice how the user is presented with only short sleeved items as results.
+  - This is because we are filtering to the "Shirts" group`;

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -17,7 +17,7 @@ export const defaultSections = [
     },
 ];
 const useCioAutocomplete = (options) => {
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = 'What can we help you find today?', sections = defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters = {}, } = options;
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = 'What can we help you find today?', sections = defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters, } = options;
     const [query, setQuery] = useState('');
     const previousQuery = usePrevious(query);
     const cioClient = useCioClient({ apiKey, cioJsClient });

package/lib/mjs/hooks/useDebouncedFetchSections.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import useDebounce from './useDebounce';
 const transformResponse = (response, options) => {
     const { numTermsWithGroupSuggestions, numGroupsSuggestedPerTerm } = options;
@@ -31,23 +31,20 @@ const transformResponse = (response, options) => {
     });
     return newSectionsData;
 };
-const autocompleteParameters = {
-    resultsPerSection: {},
-    // numResults: 8,
-    // hiddenFields: [],
-    // filters: {},
-    // variationsMap: {}
-};
 const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advancedParameters) => {
     const [sectionsData, setSectionsData] = useState({});
     const debouncedSearchTerm = useDebounce(query);
-    const { numTermsWithGroupSuggestions = 0, numGroupsSuggestedPerTerm = 0 } = advancedParameters;
-    if (autocompleteSections) {
-        autocompleteParameters.resultsPerSection = autocompleteSections.reduce((acc, sectionConfig) => ({
-            ...acc,
-            [sectionConfig.identifier]: sectionConfig?.numResults || 8,
-        }), {});
-    }
+    const { numTermsWithGroupSuggestions = 0, numGroupsSuggestedPerTerm = 0 } = advancedParameters || {};
+    const autocompleteParameters = useMemo(() => {
+        const decoratedParameters = { ...advancedParameters };
+        if (autocompleteSections) {
+            decoratedParameters.resultsPerSection = autocompleteSections.reduce((acc, sectionConfig) => ({
+                ...acc,
+                [sectionConfig.identifier]: sectionConfig?.numResults || 8,
+            }), {});
+        }
+        return decoratedParameters;
+    }, [autocompleteSections, advancedParameters]);
     useEffect(() => {
         (async () => {
             if (debouncedSearchTerm.trim()) {
@@ -60,6 +57,7 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
                     setSectionsData(newSectionsData);
                 }
                 catch (error) {
+                    // eslint-disable-next-line no-console
                     console.log(error);
                 }
             }
@@ -67,7 +65,13 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
                 setSectionsData({});
             }
         })();
-    }, [debouncedSearchTerm, cioClient, numTermsWithGroupSuggestions, numGroupsSuggestedPerTerm]);
+    }, [
+        debouncedSearchTerm,
+        cioClient,
+        numTermsWithGroupSuggestions,
+        numGroupsSuggestedPerTerm,
+        autocompleteParameters,
+    ]);
     return sectionsData;
 };
 export default useDebouncedFetchSection;

package/lib/mjs/hooks/useFetchRecommendationPod.js

@@ -21,6 +21,7 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
                 setRecommendationResults(recommendationPodResults);
             }
             catch (error) {
+                // eslint-disable-next-line no-console
                 console.log(error);
             }
         };

package/lib/mjs/hooks/useSections.js

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { getActiveSectionsWithData } from '../utils';
 import useDebouncedFetchSection from './useDebouncedFetchSections';
 import useFetchRecommendationPod from './useFetchRecommendationPod';
 export default function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
     const zeroStateActiveSections = !query.length && zeroStateSections;
     const [activeSections, setActiveSections] = useState(zeroStateActiveSections ? zeroStateSections : sections);
-    const autocompleteSections = activeSections?.filter((config) => config.type === 'autocomplete' || !config.type);
+    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);

package/lib/types/constants.d.ts

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

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

@@ -1,5 +1,5 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types/types';
 import { AutocompleteResultSections, UserDefinedSection, AdvancedParameters } from '../types';
-declare const useDebouncedFetchSection: (query: string, cioClient: Nullable<ConstructorIOClient>, autocompleteSections: UserDefinedSection[], advancedParameters: AdvancedParameters) => AutocompleteResultSections;
+declare const useDebouncedFetchSection: (query: string, cioClient: Nullable<ConstructorIOClient>, autocompleteSections: UserDefinedSection[], advancedParameters?: AdvancedParameters) => AutocompleteResultSections;
 export default useDebouncedFetchSection;

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

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

package/lib/types/types.d.ts

@@ -1,6 +1,7 @@
 import { GetItemPropsOptions } from 'downshift';
 import { ReactNode } from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { IAutocompleteParameters } from '@constructor-io/constructorio-client-javascript/lib/types';
 export type CioClientConfig = {
     apiKey?: string;
     cioJsClient?: ConstructorIOClient;
@@ -8,7 +9,7 @@ export type CioClientConfig = {
 export type AdvancedParameters = {
     numTermsWithGroupSuggestions?: number;
     numGroupsSuggestedPerTerm?: number;
-};
+} & Omit<IAutocompleteParameters, 'resultsPerSection'>;
 export type CioAutocompleteProps = CioClientConfig & {
     openOnFocus?: boolean;
     onSubmit: OnSubmit;

package/package.json

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