@constructor-io/constructorio-ui-autocomplete 1.23.17 → 1.23.18

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.displayShowAllResultsButtonDescription = exports.customRenderItemDescription = exports.translationsDescription = exports.fetchZeroStateOnFocusDescription = exports.debounceDescription = exports.termsWithImagesAndCountsDescription = exports.filteredSuggestionsDescription = exports.termsWithGroupSuggestionsDescription = exports.advancedParametersDefaultDescription = exports.advancedParametersDescription = exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDefault = exports.onSubmitDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientOptionsDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
+exports.displayShowAllResultsButtonDescription = exports.customRenderItemDescription = exports.translationsDescription = exports.fetchZeroStateOnFocusDescription = exports.debounceDescription = exports.termsWithImagesAndCountsDescription = exports.filteredSuggestionsDescription = exports.termsWithGroupSuggestionsDescription = exports.advancedParametersDefaultDescription = exports.advancedParametersDescription = exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDefault = exports.onSubmitDescription = exports.onIsOpenChangeDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientOptionsDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_M57QS8SMPdLdLx4x';
 /// //////////////////////////////
@@ -129,6 +129,7 @@ exports.displaySearchTermHighlightsDescription = `Use constructor's auto highlig
 exports.customSectionDescription = `Use a custom section, by managing and passing your own data, with \`"type": "custom"\` and \`"data":[{...}]\``;
 exports.onFocusDescription = `Pass an \`onFocus\` callback function to execute some code each time the user applies focus to the text input field`;
 exports.onChangeDescription = `Pass an \`onChange\` callback function to execute some code each time the user changes the value of the text input field`;
+exports.onIsOpenChangeDescription = `Pass an \`onIsOpenChange\` callback function to execute some code each time the dropdown state changes ie: close/open`;
 exports.onSubmitDescription = `Pass an \`onSubmit\` callback function to execute some code after a user submits the search form.
 
   Your callback function will be invoked with a submit event containing useful metadata about the submit event:

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -41,7 +41,7 @@ const convertLegacyParametersAndAddDefaults = (sections) => sections.map((config
 const useCioAutocomplete = (options) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const memoizedOptions = (0, react_1.useMemo)(() => options, [JSON.stringify(options)]);
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, getSearchResultsUrl, } = memoizedOptions;
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, getSearchResultsUrl, onIsOpenChange, } = memoizedOptions;
     let { sections = exports.defaultSections, zeroStateSections } = memoizedOptions;
     sections = (0, react_1.useMemo)(() => {
         if (sections) {
@@ -63,7 +63,7 @@ const useCioAutocomplete = (options) => {
     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]);
-    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = (0, useDownShift_1.default)({ setQuery, items, onSubmit, cioClient, previousQuery });
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = (0, useDownShift_1.default)({ setQuery, items, onSubmit, cioClient, previousQuery, onIsOpenChange });
     // Log console errors
     (0, useConsoleErrors_1.default)(sections, activeSections);
     // Track recommendation view

package/lib/cjs/hooks/useDownShift.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const downshift_1 = require("downshift");
 const utils_1 = require("../utils");
 let idCounter = 0;
-const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '' }) => (0, downshift_1.useCombobox)({
+const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', onIsOpenChange, }) => (0, downshift_1.useCombobox)({
     id: `cio-autocomplete-${idCounter++}`,
     items,
     itemToString: (item) => (item === null || item === void 0 ? void 0 : item.value) || '',
@@ -50,5 +50,6 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
             }
         }
     },
+    onIsOpenChange,
 });
 exports.default = useDownShift;

package/lib/cjs/version.js

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

package/lib/mjs/constants.js

@@ -126,6 +126,7 @@ export const displaySearchTermHighlightsDescription = `Use constructor's auto hi
 export const customSectionDescription = `Use a custom section, by managing and passing your own data, with \`"type": "custom"\` and \`"data":[{...}]\``;
 export const onFocusDescription = `Pass an \`onFocus\` callback function to execute some code each time the user applies focus to the text input field`;
 export const onChangeDescription = `Pass an \`onChange\` callback function to execute some code each time the user changes the value of the text input field`;
+export const onIsOpenChangeDescription = `Pass an \`onIsOpenChange\` callback function to execute some code each time the dropdown state changes ie: close/open`;
 export const onSubmitDescription = `Pass an \`onSubmit\` callback function to execute some code after a user submits the search form.
 
   Your callback function will be invoked with a submit event containing useful metadata about the submit event:

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -37,7 +37,7 @@ const convertLegacyParametersAndAddDefaults = (sections) => sections.map((config
 const useCioAutocomplete = (options) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const memoizedOptions = useMemo(() => options, [JSON.stringify(options)]);
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, getSearchResultsUrl, } = memoizedOptions;
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, getSearchResultsUrl, onIsOpenChange, } = memoizedOptions;
     let { sections = defaultSections, zeroStateSections } = memoizedOptions;
     sections = useMemo(() => {
         if (sections) {
@@ -59,7 +59,7 @@ const useCioAutocomplete = (options) => {
     const features = useMemo(() => getFeatures(request), [request]);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
     const items = useMemo(() => getItemsForActiveSections(activeSectionsWithData), [activeSectionsWithData]);
-    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery });
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery, onIsOpenChange });
     // Log console errors
     useConsoleErrors(sections, activeSections);
     // Track recommendation view

package/lib/mjs/hooks/useDownShift.js

@@ -1,7 +1,7 @@
 import { useCombobox } from 'downshift';
 import { trackSearchSubmit } from '../utils';
 let idCounter = 0;
-const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '' }) => useCombobox({
+const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', onIsOpenChange, }) => useCombobox({
     id: `cio-autocomplete-${idCounter++}`,
     items,
     itemToString: (item) => item?.value || '',
@@ -47,5 +47,6 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
             }
         }
     },
+    onIsOpenChange,
 });
 export default useDownShift;

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.23.17';
+export default '1.23.18';

package/lib/types/constants.d.ts

@@ -20,6 +20,7 @@ export declare const displaySearchTermHighlightsDescription = "Use constructor's
 export declare const customSectionDescription = "Use a custom section, by managing and passing your own data, with `\"type\": \"custom\"` and `\"data\":[{...}]`";
 export declare const onFocusDescription = "Pass an `onFocus` callback function to execute some code each time the user applies focus to the text input field";
 export declare const onChangeDescription = "Pass an `onChange` callback function to execute some code each time the user changes the value of the text input field";
+export declare const onIsOpenChangeDescription = "Pass an `onIsOpenChange` callback function to execute some code each time the dropdown state changes ie: close/open";
 export declare const onSubmitDescription = "Pass an `onSubmit` callback function to execute some code after a user submits the search form.\n\n  Your callback function will be invoked with a submit event containing useful metadata about the submit event:\n  - if the user submits the text input:\n    - the `query` field will provide the value of that input field\n  - if the user selects a suggested item from the dropdown list:\n    - the `originalQuery` field will provide the value of the input field that generated the selected item\n    - an `item` object with information about the suggestion that the user selected";
 export declare const onSubmitDefault: (submitEvent: AutocompleteSubmitEvent) => void;
 export declare const zeroStateSectionsDescription = "Use `zeroStateSections` to show suggestions after a user applies focus to the search input field and before they start typing a query";

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UseComboboxReturnValue } from 'downshift';
+import { UseComboboxReturnValue, UseComboboxStateChange } from 'downshift';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { Item, OnSubmit } from '../types';
@@ -9,6 +9,7 @@ type UseDownShiftOptions = {
     onSubmit: OnSubmit;
     previousQuery?: string;
     cioClient: Nullable<ConstructorIOClient>;
+    onIsOpenChange?: (changes: UseComboboxStateChange<Item>) => void;
 };
 export type DownShift = UseComboboxReturnValue<Item>;
 type UseDownShift = (options: UseDownShiftOptions) => DownShift;

package/lib/types/types.d.ts

@@ -1,4 +1,4 @@
-import { GetItemPropsOptions } from 'downshift';
+import { GetItemPropsOptions, UseComboboxStateChange } 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, AutocompleteRequestType, ConstructorClientOptions, RecommendationsParameters } from '@constructor-io/constructorio-client-javascript/lib/types';
@@ -25,6 +25,7 @@ export type CioAutocompleteProps = CioClientConfig & {
     onSubmit: OnSubmit;
     onFocus?: () => void;
     onChange?: (input: string) => void;
+    onIsOpenChange?: (changes: UseComboboxStateChange<Item>) => void;
     placeholder?: string;
     children?: ReactNode;
     sections?: UserDefinedSection[];

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.23.17";
+declare const _default: "1.23.18";
 export default _default;

package/package.json

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