@constructor-io/constructorio-ui-autocomplete 1.25.4 → 1.26.0

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.onIsOpenChangeDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.displayNoResultsMessageDescription = 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.displayNoResultsMessageDescription = exports.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioClientOptionsDescription = 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';
 /// //////////////////////////////
@@ -119,7 +119,9 @@ exports.apiKeyDescription = `Pass an \`apiKey\` to request results from construc
 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
 
 > 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)`;
-exports.cioJsClientOptionsDescription = `If you don't want to create an instance of the \`ConstructorIOClient\` but still want to customize some of the options, you can pass a \`cioJsClientOptions\` object. You can learn more about the possible values [here under the parameters section](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html).`;
+exports.cioClientOptionsDescription = `If you don't want to create an instance of the \`ConstructorIOClient\` but still want to customize some of the options, you can pass a \`cioClientOptions\` object. You can learn more about the possible values [here under the parameters section](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html).
+
+> Note: The legacy \`cioJsClientOptions\` prop is still supported for backwards compatibility, but \`cioClientOptions\` is now the preferred name.`;
 exports.placeholderDescription = `Pass a \`placeholder\` to override the default input field placeholder text shown to users before they start typing their query`;
 exports.searchSuggestionsDescription = `Override default \`sections\` to only suggest search terms`;
 exports.productsDescription = `Override default \`sections\` to only suggested products`;

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -28,11 +28,16 @@ exports.defaultSections = [
     },
 ];
 const useCioAutocomplete = (options) => {
-    const { sections, zeroStateSections, cioJsClientOptions, advancedParameters } = (0, useNormalizedProps_1.default)(options);
+    const { sections, zeroStateSections, cioClientOptions, 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 });
+    const cioClient = (0, useCioClient_1.default)({
+        apiKey,
+        cioJsClient,
+        cioClientOptions,
+        cioJsClientOptions: options.cioJsClientOptions,
+    });
     // Get autocomplete sections (autocomplete + recommendations + custom)
     const { fetchRecommendationResults, activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
     const features = (0, react_1.useMemo)(() => (0, features_1.getFeatures)(request), [request]);
@@ -60,12 +65,26 @@ const useCioAutocomplete = (options) => {
         openMenu,
         closeMenu,
         getItemProps: (item) => {
-            var _a;
+            var _a, _b;
             const { index, sectionId } = (0, helpers_1.getItemPosition)({ item, items });
             const sectionItemTestId = `cio-item-${sectionId === null || sectionId === void 0 ? void 0 : sectionId.replace(' ', '')}`;
-            return Object.assign(Object.assign({}, getItemPropsDownShift({ item, index })), { 
+            // Products always have links, Search Suggestions with getSearchResultsUrl have links
+            const hasLink = ((_a = item.data) === null || _a === void 0 ? void 0 : _a.url) || (item.section === 'Search Suggestions' && getSearchResultsUrl) || false;
+            const nonInteractiveItemsProps = {
+                tabIndex: 0,
+                onKeyDown: (event) => {
+                    const { code, key } = event;
+                    const isEnter = code === 'Enter' || key === 'Enter';
+                    if (isEnter) {
+                        event.preventDefault();
+                        // Trigger default click behavior
+                        getItemPropsDownShift({ item, index }).onClick(event);
+                    }
+                },
+            };
+            return Object.assign(Object.assign(Object.assign({}, getItemPropsDownShift({ item, index })), { 
                 // @deprecated `sectionItemTestId` will be removed as a className in the next major version
-                className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId, 'data-cnstrc-item-section': item.section, 'data-cnstrc-item-group': item.groupId, 'data-cnstrc-item-name': item.value, 'data-cnstrc-item-id': (_a = item.data) === null || _a === void 0 ? void 0 : _a.id });
+                className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId, 'data-cnstrc-item-section': item.section, 'data-cnstrc-item-group': item.groupId, 'data-cnstrc-item-name': item.value, 'data-cnstrc-item-id': (_b = item.data) === null || _b === void 0 ? void 0 : _b.id }), (hasLink ? {} : nonInteractiveItemsProps));
         },
         getInputProps: () => (Object.assign(Object.assign({}, getInputProps({
             onChange: (e) => {

package/lib/cjs/hooks/useCioClient.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const helpers_1 = require("../utils/helpers");
-const useCioClient = ({ apiKey, cioJsClient, cioJsClientOptions }) => {
+const useCioClient = ({ apiKey, cioJsClient, cioClientOptions, cioJsClientOptions, }) => {
     if (!apiKey && !cioJsClient) {
         // eslint-disable-next-line no-console
         console.error('Either apiKey or cioJsClient is required');
     }
-    return (0, react_1.useMemo)(() => cioJsClient || (0, helpers_1.getCioClient)(apiKey, cioJsClientOptions), [apiKey, cioJsClient, cioJsClientOptions]);
+    const mergedClientOptions = cioClientOptions !== null && cioClientOptions !== void 0 ? cioClientOptions : cioJsClientOptions;
+    return (0, react_1.useMemo)(() => cioJsClient || (0, helpers_1.getCioClient)(apiKey, mergedClientOptions), [apiKey, cioJsClient, mergedClientOptions]);
 };
 exports.default = useCioClient;

package/lib/cjs/hooks/useNormalizedProps.js

@@ -38,15 +38,15 @@ const normalizeSections = (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 { sections = exports.defaultSections, zeroStateSections, cioClientOptions, 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 cioClientOptionsMemoized = (0, react_1.useMemo)(() => cioClientOptions !== null && cioClientOptions !== void 0 ? cioClientOptions : cioJsClientOptions, [JSON.stringify(cioClientOptions), JSON.stringify(cioJsClientOptions)]);
     const advancedParametersMemoized = (0, react_1.useMemo)(() => advancedParameters, [JSON.stringify(advancedParameters)]);
     return {
         sections: sectionsMemoized,
         zeroStateSections: zeroStateSectionsMemoized,
-        cioJsClientOptions: cioJsClientOptionsMemoized,
+        cioClientOptions: cioClientOptionsMemoized,
         advancedParameters: advancedParametersMemoized,
     };
 };

package/lib/cjs/utils/helpers.js

@@ -61,9 +61,9 @@ const disableStoryActions = (story) => {
     story.parameters.actions = { argTypesRegex: null };
 };
 exports.disableStoryActions = disableStoryActions;
-const getCioClient = (apiKey, cioJsClientOptions) => {
+const getCioClient = (apiKey, cioClientOptions) => {
     if (apiKey && typeof window !== 'undefined') {
-        const cioClient = new constructorio_client_javascript_1.default(Object.assign(Object.assign({ apiKey, sendTrackingEvents: true, version: `cio-ui-autocomplete-${version_1.default}` }, cioJsClientOptions), { eventDispatcher: { waitForBeacon: false } }));
+        const cioClient = new constructorio_client_javascript_1.default(Object.assign(Object.assign({ apiKey, sendTrackingEvents: true, version: `cio-ui-autocomplete-${version_1.default}` }, cioClientOptions), { eventDispatcher: { waitForBeacon: false } }));
         // eslint-disable-next-line no-console
         cioClient.tracker.on('error', (error) => console.error(error));
         return cioClient;

package/lib/cjs/version.js

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

package/lib/mjs/constants.js

@@ -116,7 +116,9 @@ export const apiKeyDescription = `Pass an \`apiKey\` to request results from con
 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
 
 > 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 const cioJsClientOptionsDescription = `If you don't want to create an instance of the \`ConstructorIOClient\` but still want to customize some of the options, you can pass a \`cioJsClientOptions\` object. You can learn more about the possible values [here under the parameters section](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html).`;
+export const cioClientOptionsDescription = `If you don't want to create an instance of the \`ConstructorIOClient\` but still want to customize some of the options, you can pass a \`cioClientOptions\` object. You can learn more about the possible values [here under the parameters section](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html).
+
+> Note: The legacy \`cioJsClientOptions\` prop is still supported for backwards compatibility, but \`cioClientOptions\` is now the preferred name.`;
 export const placeholderDescription = `Pass a \`placeholder\` to override the default input field placeholder text shown to users before they start typing their query`;
 export const searchSuggestionsDescription = `Override default \`sections\` to only suggest search terms`;
 export const productsDescription = `Override default \`sections\` to only suggested products`;

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -24,11 +24,16 @@ export const defaultSections = [
     },
 ];
 const useCioAutocomplete = (options) => {
-    const { sections, zeroStateSections, cioJsClientOptions, advancedParameters } = useNormalizedProps(options);
+    const { sections, zeroStateSections, cioClientOptions, 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 });
+    const cioClient = useCioClient({
+        apiKey,
+        cioJsClient,
+        cioClientOptions,
+        cioJsClientOptions: options.cioJsClientOptions,
+    });
     // Get autocomplete sections (autocomplete + recommendations + custom)
     const { fetchRecommendationResults, activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
     const features = useMemo(() => getFeatures(request), [request]);
@@ -66,6 +71,20 @@ const useCioAutocomplete = (options) => {
         getItemProps: (item) => {
             const { index, sectionId } = getItemPosition({ item, items });
             const sectionItemTestId = `cio-item-${sectionId?.replace(' ', '')}`;
+            // Products always have links, Search Suggestions with getSearchResultsUrl have links
+            const hasLink = item.data?.url || (item.section === 'Search Suggestions' && getSearchResultsUrl) || false;
+            const nonInteractiveItemsProps = {
+                tabIndex: 0,
+                onKeyDown: (event) => {
+                    const { code, key } = event;
+                    const isEnter = code === 'Enter' || key === 'Enter';
+                    if (isEnter) {
+                        event.preventDefault();
+                        // Trigger default click behavior
+                        getItemPropsDownShift({ item, index }).onClick(event);
+                    }
+                },
+            };
             return {
                 ...getItemPropsDownShift({ item, index }),
                 // @deprecated `sectionItemTestId` will be removed as a className in the next major version
@@ -75,6 +94,7 @@ const useCioAutocomplete = (options) => {
                 'data-cnstrc-item-group': item.groupId,
                 'data-cnstrc-item-name': item.value,
                 'data-cnstrc-item-id': item.data?.id,
+                ...(hasLink ? {} : nonInteractiveItemsProps),
             };
         },
         getInputProps: () => ({

package/lib/mjs/hooks/useCioClient.js

@@ -1,10 +1,11 @@
 import { useMemo } from 'react';
 import { getCioClient } from '../utils/helpers';
-const useCioClient = ({ apiKey, cioJsClient, cioJsClientOptions }) => {
+const useCioClient = ({ apiKey, cioJsClient, cioClientOptions, cioJsClientOptions, }) => {
     if (!apiKey && !cioJsClient) {
         // eslint-disable-next-line no-console
         console.error('Either apiKey or cioJsClient is required');
     }
-    return useMemo(() => cioJsClient || getCioClient(apiKey, cioJsClientOptions), [apiKey, cioJsClient, cioJsClientOptions]);
+    const mergedClientOptions = cioClientOptions ?? cioJsClientOptions;
+    return useMemo(() => cioJsClient || getCioClient(apiKey, mergedClientOptions), [apiKey, cioJsClient, mergedClientOptions]);
 };
 export default useCioClient;

package/lib/mjs/hooks/useNormalizedProps.js

@@ -35,15 +35,15 @@ const normalizeSections = (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 { sections = defaultSections, zeroStateSections, cioClientOptions, 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 cioClientOptionsMemoized = useMemo(() => cioClientOptions ?? cioJsClientOptions, [JSON.stringify(cioClientOptions), JSON.stringify(cioJsClientOptions)]);
     const advancedParametersMemoized = useMemo(() => advancedParameters, [JSON.stringify(advancedParameters)]);
     return {
         sections: sectionsMemoized,
         zeroStateSections: zeroStateSectionsMemoized,
-        cioJsClientOptions: cioJsClientOptionsMemoized,
+        cioClientOptions: cioClientOptionsMemoized,
         advancedParameters: advancedParametersMemoized,
     };
 };

package/lib/mjs/utils/helpers.js

@@ -50,13 +50,13 @@ export const disableStoryActions = (story) => {
     // eslint-disable-next-line
     story.parameters.actions = { argTypesRegex: null };
 };
-export const getCioClient = (apiKey, cioJsClientOptions) => {
+export const getCioClient = (apiKey, cioClientOptions) => {
     if (apiKey && typeof window !== 'undefined') {
         const cioClient = new ConstructorIOClient({
             apiKey,
             sendTrackingEvents: true,
             version: `cio-ui-autocomplete-${version}`,
-            ...cioJsClientOptions,
+            ...cioClientOptions,
             eventDispatcher: { waitForBeacon: false },
         });
         // eslint-disable-next-line no-console

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.25.4';
+export default '1.26.0';

package/lib/types/constants.d.ts

@@ -8,7 +8,7 @@ export declare const zeroStateDescription = "- when the text input field has no
 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 cioJsClientOptionsDescription = "If you don't want to create an instance of the `ConstructorIOClient` but still want to customize some of the options, you can pass a `cioJsClientOptions` object. You can learn more about the possible values [here under the parameters section](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html).";
+export declare const cioClientOptionsDescription = "If you don't want to create an instance of the `ConstructorIOClient` but still want to customize some of the options, you can pass a `cioClientOptions` object. You can learn more about the possible values [here under the parameters section](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html).\n\n> Note: The legacy `cioJsClientOptions` prop is still supported for backwards compatibility, but `cioClientOptions` is now the preferred name.";
 export declare const placeholderDescription = "Pass a `placeholder` to override the default input field placeholder text shown to users before they start typing their query";
 export declare const searchSuggestionsDescription = "Override default `sections` to only suggest search terms";
 export declare const productsDescription = "Override default `sections` to only suggested products";

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

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

package/lib/types/types.d.ts

@@ -13,7 +13,11 @@ export type CioClientConfig = {
      */
     cioJsClient?: ConstructorIOClient;
     /**
-     * Pass a `cioJsClientOptions` object to customize the client's configurations w/o creating a new instance of `ConstructorIOClient`. You can learn more about the possible values [Here](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html)
+     * Pass a `cioClientOptions` object to customize the client's configurations w/o creating a new instance of `ConstructorIOClient`. You can learn more about the possible values [Here](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html)
+     */
+    cioClientOptions?: ConstructorClientOptions;
+    /**
+     * @deprecated Use `cioClientOptions` instead.
      */
     cioJsClientOptions?: ConstructorClientOptions;
 };

package/lib/types/utils/helpers.d.ts

@@ -26,7 +26,7 @@ export declare const functionStrings: {
     renderItem: string;
 };
 export declare const disableStoryActions: (story: any) => void;
-export declare const getCioClient: (apiKey?: string, cioJsClientOptions?: ConstructorClientOptions) => ConstructorIOClient | null;
+export declare const getCioClient: (apiKey?: string, cioClientOptions?: ConstructorClientOptions) => ConstructorIOClient | null;
 export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionsResults: SectionsData, sectionsRefs: React.MutableRefObject<React.RefObject<HTMLLIElement>[]>, podsData: Record<string, PodData>) => Section[];
 export declare const escapeRegExp: (string: string) => string;
 export declare const getItemsForActiveSections: (activeSectionsWithData: Section[]) => Item[];

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.25.4";
+declare const _default: "1.26.0";
 export default _default;

package/package.json

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