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

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

@@ -8,7 +8,7 @@ const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
     var _a, _b;
-    const { getSectionProps, query, getFormProps, advancedParameters } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const { getSectionProps, query, getFormProps, advancedParameters, getItemProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
     const { displayShowAllResultsButton, translations } = advancedParameters || {};
     const { onSubmit } = getFormProps();
     const { type, displayName } = section;
@@ -36,7 +36,7 @@ const DefaultRenderSectionItemsList = function ({ section }) {
         react_1.default.createElement("h5", { className: 'cio-section-name cio-sectionName', "aria-hidden": true }, (0, utils_1.camelToStartCase)(sectionTitle)),
         react_1.default.createElement("ul", { className: 'cio-section-items', role: 'none' }, (_b = section === null || section === void 0 ? void 0 : section.data) === null || _b === void 0 ? void 0 : _b.map((item) => {
             if (typeof (section === null || section === void 0 ? void 0 : section.renderItem) === 'function') {
-                return section.renderItem({ item, query });
+                return section.renderItem({ item, query, getItemProps });
             }
             return (react_1.default.createElement(SectionItem_1.default, { item: item, key: item === null || item === void 0 ? void 0 : item.id, displaySearchTermHighlights: section.displaySearchTermHighlights }));
         })),

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:
@@ -215,7 +216,7 @@ To see this in action:
 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\`.
+exports.filteredSuggestionsDescription = `Pass a \`filters\` object under \`advancedParameters\` to apply filters to the suggestions. Any parameter supported by <a href="https://docs.constructor.com/reference/autocomplete-autocomplete-results" target="__blank">our autocomplete endpoint</a> can be passed under \`advancedParameters\`.
 
 To see this in action:
 1. Type "short" in the example below.
@@ -240,5 +241,6 @@ exports.translationsDescription = `Pass a \`translations\` object to display tra
 \`\`\`
 `;
 exports.customRenderItemDescription = `Customize the rendering of individual items within a Section by providing a \`renderItem\` function. This function allows you to define how each item should be rendered.
+- Make sure to call \`getItemProps(item)\` and spread like this \`<div {...getItemProps(item)}/>\` on the container of each custom rendered item or else tracking will not work.
 `;
 exports.displayShowAllResultsButtonDescription = `Pass a boolean to \`displayShowAllResultsButton\` to display a button at the bottom of the Products section to show all results. This button will submit the form and trigger the \`onSubmit\` callback.`;

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/utils.js

@@ -102,8 +102,8 @@ ${templateCode}
 exports.getStoryParams = getStoryParams;
 exports.functionStrings = {
     onSubmit: `(submitEvent) => console.dir(submitEvent)`,
-    renderItem: `({ item, query }) => (
-                      <div>
+    renderItem: `({ item, query, getItemProps }) => (
+                      <div {...getItemProps(item)}>
                           <a href={item.data?.url}>
                             <h3>{item.value}</h3>
                             <img src={item.data?.image_url} alt={item.value} />

package/lib/cjs/version.js

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

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

@@ -4,7 +4,7 @@ import { camelToStartCase, translate } from '../../../utils';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
-    const { getSectionProps, query, getFormProps, advancedParameters } = useContext(CioAutocompleteContext);
+    const { getSectionProps, query, getFormProps, advancedParameters, getItemProps } = useContext(CioAutocompleteContext);
     const { displayShowAllResultsButton, translations } = advancedParameters || {};
     const { onSubmit } = getFormProps();
     const { type, displayName } = section;
@@ -32,7 +32,7 @@ const DefaultRenderSectionItemsList = function ({ section }) {
         React.createElement("h5", { className: 'cio-section-name cio-sectionName', "aria-hidden": true }, camelToStartCase(sectionTitle)),
         React.createElement("ul", { className: 'cio-section-items', role: 'none' }, section?.data?.map((item) => {
             if (typeof section?.renderItem === 'function') {
-                return section.renderItem({ item, query });
+                return section.renderItem({ item, query, getItemProps });
             }
             return (React.createElement(SectionItem, { item: item, key: item?.id, displaySearchTermHighlights: section.displaySearchTermHighlights }));
         })),

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:
@@ -211,7 +212,7 @@ To see this in action:
 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\`.
+export const filteredSuggestionsDescription = `Pass a \`filters\` object under \`advancedParameters\` to apply filters to the suggestions. Any parameter supported by <a href="https://docs.constructor.com/reference/autocomplete-autocomplete-results" target="__blank">our autocomplete endpoint</a> can be passed under \`advancedParameters\`.
 
 To see this in action:
 1. Type "short" in the example below.
@@ -236,5 +237,6 @@ export const translationsDescription = `Pass a \`translations\` object to displa
 \`\`\`
 `;
 export const customRenderItemDescription = `Customize the rendering of individual items within a Section by providing a \`renderItem\` function. This function allows you to define how each item should be rendered.
+- Make sure to call \`getItemProps(item)\` and spread like this \`<div {...getItemProps(item)}/>\` on the container of each custom rendered item or else tracking will not work.
 `;
 export const displayShowAllResultsButtonDescription = `Pass a boolean to \`displayShowAllResultsButton\` to display a button at the bottom of the Products section to show all results. This button will submit the form and trigger the \`onSubmit\` callback.`;

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/utils.js

@@ -86,8 +86,8 @@ ${templateCode}
 };
 export const functionStrings = {
     onSubmit: `(submitEvent) => console.dir(submitEvent)`,
-    renderItem: `({ item, query }) => (
-                      <div>
+    renderItem: `({ item, query, getItemProps }) => (
+                      <div {...getItemProps(item)}>
                           <a href={item.data?.url}>
                             <h3>{item.value}</h3>
                             <img src={item.data?.image_url} alt={item.value} />

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.23.16';
+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";
@@ -29,10 +30,10 @@ export declare const customStylesDescription = "\nBy default, importing react co
 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";
+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.com/reference/autocomplete-autocomplete-results\" 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.";
 export declare const fetchZeroStateOnFocusDescription = "Pass a boolean to `fetchZeroStateOnFocus` to override the zero state fetching behavior from initial render to input focus.";
 export declare const translationsDescription = "Pass a `translations` object to display translatable words in your preferred language.\n\n- Current translatable keys:\n```\n  {\n    \"in\": \"...\",\n    \"show all results\": \"...\"\n  }\n```\n";
-export declare const customRenderItemDescription = "Customize the rendering of individual items within a Section by providing a `renderItem` function. This function allows you to define how each item should be rendered.\n";
+export declare const customRenderItemDescription = "Customize the rendering of individual items within a Section by providing a `renderItem` function. This function allows you to define how each item should be rendered.\n- Make sure to call `getItemProps(item)` and spread like this `<div {...getItemProps(item)}/>` on the container of each custom rendered item or else tracking will not work.\n";
 export declare const displayShowAllResultsButtonDescription = "Pass a boolean to `displayShowAllResultsButton` to display a button at the bottom of the Products section to show all results. This button will submit the form and trigger the `onSubmit` callback.";

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[];
@@ -94,6 +95,7 @@ export type SectionConfiguration = {
     renderItem?: (props: {
         item: Item;
         query: string;
+        getItemProps: (item: Item) => any;
     }) => ReactNode;
 };
 export interface AutocompleteSectionConfiguration extends SectionConfiguration {

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.23.16";
+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.16",
+  "version": "1.23.18",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",