@constructor-io/constructorio-ui-autocomplete 1.9.2 → 1.12.0

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.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';
 /// //////////////////////////////
@@ -97,6 +97,7 @@ exports.zeroStateDescription = `- when the text input field has no text, we call
 /// //////////////////////////////
 // Storybook Stories
 /// //////////////////////////////
+exports.fullFeaturedAndStyledExampleDescription = `Using the default options, the library displays clean and minimal visual elements, with the intent of making it easy for consumers to easily extend and customize the styles to suit unique needs. The example below shows a full featured and styled example to demonstrate what is possible using Constructor.io's advanced Autocomplete UI library.`;
 exports.apiKeyDescription = `Pass an \`apiKey\` to request results from constructor's servers`;
 exports.cioJsClientDescription = `If you are already using an instance of the \`ConstructorIOClient\`, you can pass a \`cioJsClient\` instead of an \`apiKey\` to request results from constructor's servers
 
@@ -210,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/useDebouncedFetchSections.js

@@ -32,10 +32,12 @@ const transformResponse = (response, options) => {
 };
 const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advancedParameters) => {
     const [sectionsData, setSectionsData] = (0, react_1.useState)({});
-    const debouncedSearchTerm = (0, useDebounce_1.default)(query);
+    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 })), {});
         }

package/lib/cjs/version.js

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

package/lib/mjs/constants.js

@@ -94,6 +94,7 @@ export const zeroStateDescription = `- when the text input field has no text, we
 /// //////////////////////////////
 // Storybook Stories
 /// //////////////////////////////
+export const fullFeaturedAndStyledExampleDescription = `Using the default options, the library displays clean and minimal visual elements, with the intent of making it easy for consumers to easily extend and customize the styles to suit unique needs. The example below shows a full featured and styled example to demonstrate what is possible using Constructor.io's advanced Autocomplete UI library.`;
 export const apiKeyDescription = `Pass an \`apiKey\` to request results from constructor's servers`;
 export const cioJsClientDescription = `If you are already using an instance of the \`ConstructorIOClient\`, you can pass a \`cioJsClient\` instead of an \`apiKey\` to request results from constructor's servers
 
@@ -206,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/useDebouncedFetchSections.js

@@ -33,12 +33,14 @@ const transformResponse = (response, options) => {
 };
 const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advancedParameters) => {
     const [sectionsData, setSectionsData] = useState({});
-    const debouncedSearchTerm = useDebounce(query);
+    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,

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.9.2';
+export default '1.12.0';

package/lib/types/constants.d.ts

@@ -5,6 +5,7 @@ export declare const hookDescription = "- import `useCioAutocomplete` and call t
 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 section object must have an `identifier`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8\n\nWhen no values are passed for the `sections` argument, the following defaults are used:\n\n```jsx\n[\n  {\n    identifier: 'Search Suggestions',\n    type: 'autocomplete',\n    numResults: 8\n  },\n  {\n    identifier: '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 section object must have an `identifier`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8";
+export declare const fullFeaturedAndStyledExampleDescription = "Using the default options, the library displays clean and minimal visual elements, with the intent of making it easy for consumers to easily extend and customize the styles to suit unique needs. The example below shows a full featured and styled example to demonstrate what is possible using Constructor.io's advanced Autocomplete UI library.";
 export declare const apiKeyDescription = "Pass an `apiKey` to request results from constructor's servers";
 export declare const cioJsClientDescription = "If you are already using an instance of the `ConstructorIOClient`, you can pass a `cioJsClient` instead of an `apiKey` to request results from constructor's servers\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)";
 export declare const placeholderDescription = "Pass a `placeholder` to override the default input field placeholder text shown to users before they start typing their query";
@@ -29,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/types.d.ts

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

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.9.2";
+declare const _default: "1.12.0";
 export default _default;

package/package.json

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