@constructor-io/constructorio-ui-autocomplete 1.23.19 → 1.23.20

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -12,6 +12,7 @@ const useConsoleErrors_1 = tslib_1.__importDefault(require("./useConsoleErrors")
 const useSections_1 = tslib_1.__importDefault(require("./useSections"));
 const useRecommendationsObserver_1 = tslib_1.__importDefault(require("./useRecommendationsObserver"));
 const typeGuards_1 = require("../typeGuards");
+const useNormalizedProps_1 = tslib_1.__importDefault(require("./useNormalizedProps"));
 exports.defaultSections = [
     {
         indexSectionName: 'Search Suggestions',
@@ -22,39 +23,9 @@ exports.defaultSections = [
         type: 'autocomplete',
     },
 ];
-const convertLegacyParametersAndAddDefaults = (sections) => sections.map((config) => {
-    if ((0, typeGuards_1.isRecommendationsSection)(config)) {
-        if (config.identifier && !config.podId) {
-            return Object.assign(Object.assign({}, config), { podId: config.identifier });
-        }
-        if (!config.indexSectionName) {
-            return Object.assign(Object.assign({}, config), { indexSectionName: 'Products' });
-        }
-    }
-    if ((0, typeGuards_1.isAutocompleteSection)(config)) {
-        if (config.identifier && !config.indexSectionName) {
-            return Object.assign(Object.assign({}, config), { indexSectionName: config.identifier });
-        }
-    }
-    return 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, onIsOpenChange, } = memoizedOptions;
-    let { sections = exports.defaultSections, zeroStateSections } = memoizedOptions;
-    sections = (0, react_1.useMemo)(() => {
-        if (sections) {
-            return convertLegacyParametersAndAddDefaults(sections);
-        }
-        return sections;
-    }, [sections]);
-    zeroStateSections = (0, react_1.useMemo)(() => {
-        if (zeroStateSections) {
-            return convertLegacyParametersAndAddDefaults(zeroStateSections);
-        }
-        return zeroStateSections;
-    }, [zeroStateSections]);
+    const { sections, zeroStateSections, cioJsClientOptions, advancedParameters } = (0, useNormalizedProps_1.default)(options);
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', defaultInput, getSearchResultsUrl } = options, rest = tslib_1.__rest(options, ["onSubmit", "onChange", "openOnFocus", "apiKey", "cioJsClient", "placeholder", "autocompleteClassName", "defaultInput", "getSearchResultsUrl"]);
     const [query, setQuery] = (0, react_1.useState)(defaultInput || '');
     const previousQuery = (0, usePrevious_1.default)(query);
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient, cioJsClientOptions });
@@ -63,7 +34,11 @@ 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, onIsOpenChange });
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = (0, useDownShift_1.default)(Object.assign({ setQuery,
+        items,
+        onSubmit,
+        cioClient,
+        previousQuery }, rest));
     // Log console errors
     (0, useConsoleErrors_1.default)(sections, activeSections);
     // Track recommendation view

package/lib/cjs/hooks/useDownShift.js

@@ -1,55 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const downshift_1 = require("downshift");
 const utils_1 = require("../utils");
 let idCounter = 0;
-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) || '',
-    onSelectedItemChange({ selectedItem }) {
-        var _a;
-        if (selectedItem) {
-            if (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) {
-                if (onSubmit)
-                    onSubmit({ item: selectedItem, originalQuery: previousQuery });
-                try {
-                    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.section) === 'Search Suggestions') {
-                        setQuery(selectedItem.value || '');
-                        (0, utils_1.trackSearchSubmit)(cioClient, selectedItem.value, {
-                            originalQuery: previousQuery,
-                        });
+const useDownShift = (_a) => {
+    var { setQuery, items, onSubmit, cioClient, previousQuery = '' } = _a, rest = tslib_1.__rest(_a, ["setQuery", "items", "onSubmit", "cioClient", "previousQuery"]);
+    return (0, downshift_1.useCombobox)(Object.assign({ id: `cio-autocomplete-${idCounter++}`, // eslint-disable-line
+        items, itemToString: (item) => (item === null || item === void 0 ? void 0 : item.value) || '', onSelectedItemChange({ selectedItem }) {
+            var _a;
+            if (selectedItem) {
+                if (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) {
+                    if (onSubmit)
+                        onSubmit({ item: selectedItem, originalQuery: previousQuery });
+                    try {
+                        if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.section) === 'Search Suggestions') {
+                            setQuery(selectedItem.value || '');
+                            (0, utils_1.trackSearchSubmit)(cioClient, selectedItem.value, {
+                                originalQuery: previousQuery,
+                            });
+                        }
+                        // Autocomplete Select tracking
+                        // Recommendation Select tracking
+                        if (selectedItem.podId && ((_a = selectedItem.data) === null || _a === void 0 ? void 0 : _a.id) && selectedItem.strategy) {
+                            cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackRecommendationClick({
+                                itemName: selectedItem.value,
+                                itemId: selectedItem.data.id,
+                                variationId: selectedItem.data.variation_id,
+                                podId: selectedItem.podId,
+                                strategyId: selectedItem.strategy.id,
+                                section: selectedItem.section,
+                                resultId: selectedItem.result_id,
+                            });
+                            // Select tracking for all other Constructor sections:
+                            // (ie: Search Suggestions, Products, Custom Cio sections, etc)
+                            // This does not apply to custom user defined sections that aren't part of Constructor index
+                        }
+                        else if (selectedItem.result_id) {
+                            cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackAutocompleteSelect(selectedItem.value, {
+                                originalQuery: previousQuery,
+                                section: selectedItem.section,
+                            });
+                        }
                     }
-                    // Autocomplete Select tracking
-                    // Recommendation Select tracking
-                    if (selectedItem.podId && ((_a = selectedItem.data) === null || _a === void 0 ? void 0 : _a.id) && selectedItem.strategy) {
-                        cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackRecommendationClick({
-                            itemName: selectedItem.value,
-                            itemId: selectedItem.data.id,
-                            variationId: selectedItem.data.variation_id,
-                            podId: selectedItem.podId,
-                            strategyId: selectedItem.strategy.id,
-                            section: selectedItem.section,
-                            resultId: selectedItem.result_id,
-                        });
-                        // Select tracking for all other Constructor sections:
-                        // (ie: Search Suggestions, Products, Custom Cio sections, etc)
-                        // This does not apply to custom user defined sections that aren't part of Constructor index
+                    catch (error) {
+                        // eslint-disable-next-line no-console
+                        console.log(error);
                     }
-                    else if (selectedItem.result_id) {
-                        cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackAutocompleteSelect(selectedItem.value, {
-                            originalQuery: previousQuery,
-                            section: selectedItem.section,
-                        });
-                    }
-                }
-                catch (error) {
-                    // eslint-disable-next-line no-console
-                    console.log(error);
                 }
             }
-        }
-    },
-    onIsOpenChange,
-});
+        } }, rest));
+};
 exports.default = useDownShift;

package/lib/cjs/hooks/useNormalizedProps.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultSections = void 0;
+/* eslint-disable react-hooks/exhaustive-deps */
+const react_1 = require("react");
+const typeGuards_1 = require("../typeGuards");
+exports.defaultSections = [
+    {
+        indexSectionName: 'Search Suggestions',
+        type: 'autocomplete',
+    },
+    {
+        indexSectionName: 'Products',
+        type: 'autocomplete',
+    },
+];
+const convertLegacyParametersAndAddDefaults = (sections) => sections.map((config) => {
+    if ((0, typeGuards_1.isRecommendationsSection)(config)) {
+        if (config.identifier && !config.podId) {
+            return Object.assign(Object.assign({}, config), { podId: config.identifier });
+        }
+        if (!config.indexSectionName) {
+            return Object.assign(Object.assign({}, config), { indexSectionName: 'Products' });
+        }
+    }
+    if ((0, typeGuards_1.isAutocompleteSection)(config)) {
+        if (config.identifier && !config.indexSectionName) {
+            return Object.assign(Object.assign({}, config), { indexSectionName: config.identifier });
+        }
+    }
+    return config;
+});
+const normalizeSections = (sections) => {
+    if (sections) {
+        return convertLegacyParametersAndAddDefaults(sections);
+    }
+    return sections;
+};
+// Normalize and Memoize Objects to prevent infinite rerenders if users pass object literals to useCioAutocomplete
+const useNormalizedProps = (options) => {
+    const { sections = exports.defaultSections, zeroStateSections, cioJsClientOptions, advancedParameters, } = options;
+    const sectionsMemoized = (0, react_1.useMemo)(() => normalizeSections(sections), [JSON.stringify(sections)]);
+    const zeroStateSectionsMemoized = (0, react_1.useMemo)(() => normalizeSections(zeroStateSections), [JSON.stringify(zeroStateSections)]);
+    const cioJsClientOptionsMemoized = (0, react_1.useMemo)(() => cioJsClientOptions, [JSON.stringify(cioJsClientOptions)]);
+    const advancedParametersMemoized = (0, react_1.useMemo)(() => advancedParameters, [JSON.stringify(advancedParameters)]);
+    return {
+        sections: sectionsMemoized,
+        zeroStateSections: zeroStateSectionsMemoized,
+        cioJsClientOptions: cioJsClientOptionsMemoized,
+        advancedParameters: advancedParametersMemoized,
+    };
+};
+exports.default = useNormalizedProps;

package/lib/cjs/version.js

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

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -7,7 +7,8 @@ import { getItemPosition, getItemsForActiveSections, getFeatures, trackRecommend
 import useConsoleErrors from './useConsoleErrors';
 import useSections from './useSections';
 import useRecommendationsObserver from './useRecommendationsObserver';
-import { isAutocompleteSection, isCustomSection, isRecommendationsSection } from '../typeGuards';
+import { isCustomSection, isRecommendationsSection } from '../typeGuards';
+import useNormalizedProps from './useNormalizedProps';
 export const defaultSections = [
     {
         indexSectionName: 'Search Suggestions',
@@ -18,39 +19,9 @@ export const defaultSections = [
         type: 'autocomplete',
     },
 ];
-const convertLegacyParametersAndAddDefaults = (sections) => sections.map((config) => {
-    if (isRecommendationsSection(config)) {
-        if (config.identifier && !config.podId) {
-            return { ...config, podId: config.identifier };
-        }
-        if (!config.indexSectionName) {
-            return { ...config, indexSectionName: 'Products' };
-        }
-    }
-    if (isAutocompleteSection(config)) {
-        if (config.identifier && !config.indexSectionName) {
-            return { ...config, indexSectionName: config.identifier };
-        }
-    }
-    return 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, onIsOpenChange, } = memoizedOptions;
-    let { sections = defaultSections, zeroStateSections } = memoizedOptions;
-    sections = useMemo(() => {
-        if (sections) {
-            return convertLegacyParametersAndAddDefaults(sections);
-        }
-        return sections;
-    }, [sections]);
-    zeroStateSections = useMemo(() => {
-        if (zeroStateSections) {
-            return convertLegacyParametersAndAddDefaults(zeroStateSections);
-        }
-        return zeroStateSections;
-    }, [zeroStateSections]);
+    const { sections, zeroStateSections, cioJsClientOptions, advancedParameters } = useNormalizedProps(options);
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', defaultInput, getSearchResultsUrl, ...rest } = options;
     const [query, setQuery] = useState(defaultInput || '');
     const previousQuery = usePrevious(query);
     const cioClient = useCioClient({ apiKey, cioJsClient, cioJsClientOptions });
@@ -59,7 +30,14 @@ 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, onIsOpenChange });
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = useDownShift({
+        setQuery,
+        items,
+        onSubmit,
+        cioClient,
+        previousQuery,
+        ...rest,
+    });
     // 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 = '', onIsOpenChange, }) => useCombobox({
+const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', ...rest }) => useCombobox({
     id: `cio-autocomplete-${idCounter++}`,
     items,
     itemToString: (item) => item?.value || '',
@@ -47,6 +47,6 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
             }
         }
     },
-    onIsOpenChange,
+    ...rest,
 });
 export default useDownShift;

package/lib/mjs/hooks/useNormalizedProps.js

@@ -0,0 +1,50 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useMemo } from 'react';
+import { isAutocompleteSection, isRecommendationsSection } from '../typeGuards';
+export const defaultSections = [
+    {
+        indexSectionName: 'Search Suggestions',
+        type: 'autocomplete',
+    },
+    {
+        indexSectionName: 'Products',
+        type: 'autocomplete',
+    },
+];
+const convertLegacyParametersAndAddDefaults = (sections) => sections.map((config) => {
+    if (isRecommendationsSection(config)) {
+        if (config.identifier && !config.podId) {
+            return { ...config, podId: config.identifier };
+        }
+        if (!config.indexSectionName) {
+            return { ...config, indexSectionName: 'Products' };
+        }
+    }
+    if (isAutocompleteSection(config)) {
+        if (config.identifier && !config.indexSectionName) {
+            return { ...config, indexSectionName: config.identifier };
+        }
+    }
+    return config;
+});
+const normalizeSections = (sections) => {
+    if (sections) {
+        return convertLegacyParametersAndAddDefaults(sections);
+    }
+    return sections;
+};
+// Normalize and Memoize Objects to prevent infinite rerenders if users pass object literals to useCioAutocomplete
+const useNormalizedProps = (options) => {
+    const { sections = defaultSections, zeroStateSections, cioJsClientOptions, advancedParameters, } = options;
+    const sectionsMemoized = useMemo(() => normalizeSections(sections), [JSON.stringify(sections)]);
+    const zeroStateSectionsMemoized = useMemo(() => normalizeSections(zeroStateSections), [JSON.stringify(zeroStateSections)]);
+    const cioJsClientOptionsMemoized = useMemo(() => cioJsClientOptions, [JSON.stringify(cioJsClientOptions)]);
+    const advancedParametersMemoized = useMemo(() => advancedParameters, [JSON.stringify(advancedParameters)]);
+    return {
+        sections: sectionsMemoized,
+        zeroStateSections: zeroStateSectionsMemoized,
+        cioJsClientOptions: cioJsClientOptionsMemoized,
+        advancedParameters: advancedParametersMemoized,
+    };
+};
+export default useNormalizedProps;

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.23.19';
+export default '1.23.20';

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

@@ -1,6 +1,5 @@
-import { CioAutocompleteProps, Section, UserDefinedSection, HTMLPropsWithCioDataAttributes, Item } from '../types';
+import { Section, UserDefinedSection, HTMLPropsWithCioDataAttributes, Item, UseCioAutocompleteOptions } from '../types';
 export declare const defaultSections: UserDefinedSection[];
-export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
 declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     query: string;
     sections: Section[];

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

@@ -1,16 +1,14 @@
 /// <reference types="react" />
-import { UseComboboxReturnValue, UseComboboxStateChange } from 'downshift';
+import { UseComboboxProps, UseComboboxReturnValue } 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';
-type UseDownShiftOptions = {
+interface UseDownShiftOptions extends UseComboboxProps<Item> {
     setQuery: React.Dispatch<React.SetStateAction<string>>;
-    items: Item[];
     onSubmit: OnSubmit;
     previousQuery?: string;
     cioClient: Nullable<ConstructorIOClient>;
-    onIsOpenChange?: (changes: UseComboboxStateChange<Item>) => void;
-};
+}
 export type DownShift = UseComboboxReturnValue<Item>;
 type UseDownShift = (options: UseDownShiftOptions) => DownShift;
 declare const useDownShift: UseDownShift;

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

@@ -0,0 +1,9 @@
+import { UseCioAutocompleteOptions, UserDefinedSection } from '../types';
+export declare const defaultSections: UserDefinedSection[];
+declare const useNormalizedProps: (options: UseCioAutocompleteOptions) => {
+    sections: UserDefinedSection[];
+    zeroStateSections: UserDefinedSection[] | undefined;
+    cioJsClientOptions: import("@constructor-io/constructorio-client-javascript").ConstructorClientOptions | undefined;
+    advancedParameters: import("../types").AdvancedParameters | undefined;
+};
+export default useNormalizedProps;

package/lib/types/types.d.ts

@@ -1,4 +1,4 @@
-import { GetItemPropsOptions, UseComboboxStateChange } from 'downshift';
+import { GetItemPropsOptions, UseComboboxProps } 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';
@@ -19,13 +19,16 @@ export interface AdvancedParametersBase {
     fetchZeroStateOnFocus?: boolean;
 }
 export type AdvancedParameters = AdvancedParametersBase & Omit<IAutocompleteParameters, 'resultsPerSection'>;
-export type CioAutocompleteProps = CioClientConfig & {
+type OptionalItemsComboboxProps<Item> = Partial<UseComboboxProps<Item>> & {
+    items?: Item[];
+};
+export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
+export type CioAutocompleteProps = CioClientConfig & OptionalItemsComboboxProps<Item> & {
     openOnFocus?: boolean;
     getSearchResultsUrl?: (item: SearchSuggestion) => string;
     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.19";
+declare const _default: "1.23.20";
 export default _default;

package/package.json

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