@constructor-io/constructorio-ui-autocomplete 1.25.5 → 1.27.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

@@ -17,6 +17,7 @@ const useRecommendationsObserver_1 = tslib_1.__importDefault(require("./useRecom
 const typeGuards_1 = require("../typeGuards");
 const useNormalizedProps_1 = tslib_1.__importDefault(require("./useNormalizedProps"));
 const useCustomBlur_1 = tslib_1.__importDefault(require("./useCustomBlur"));
+const shopifyDefaults_1 = require("../utils/shopifyDefaults");
 exports.defaultSections = [
     {
         indexSectionName: 'Search Suggestions',
@@ -28,11 +29,30 @@ exports.defaultSections = [
     },
 ];
 const useCioAutocomplete = (options) => {
-    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 { sections, zeroStateSections, cioClientOptions, advancedParameters } = (0, useNormalizedProps_1.default)(options);
+    const { onSubmit: onSubmitProp, onChange, openOnFocus, apiKey, cioJsClient, placeholder: placeholderProp, autocompleteClassName = 'cio-autocomplete', defaultInput, useShopifyDefaults, shopifySettings, getSearchResultsUrl } = options, rest = tslib_1.__rest(options, ["onSubmit", "onChange", "openOnFocus", "apiKey", "cioJsClient", "placeholder", "autocompleteClassName", "defaultInput", "useShopifyDefaults", "shopifySettings", "getSearchResultsUrl"]);
+    let placeholder = 'What can we help you find today?';
+    if (placeholderProp) {
+        placeholder = placeholderProp;
+    }
+    else if (useShopifyDefaults) {
+        placeholder = shopifyDefaults_1.shopifyDefaults.placeholder;
+    }
+    let onSubmit;
+    if (onSubmitProp) {
+        onSubmit = onSubmitProp;
+    }
+    else if (useShopifyDefaults) {
+        onSubmit = (e) => shopifyDefaults_1.shopifyDefaults.onSubmit(e, shopifySettings);
+    }
     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]);

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shopifyDefaults = void 0;
+const types_1 = require("../types");
+// eslint-disable-next-line import/prefer-default-export
+exports.shopifyDefaults = {
+    selector: '#cio-autocomplete-ui-container',
+    placeholder: 'Search',
+    onSubmit(event, shopifySettings) {
+        var _a;
+        /* Handle redirecting to a product page */
+        if ((0, types_1.isAutocompleteSelectSubmit)(event) && event.item.section === 'Products') {
+            const productUrl = (_a = event.item.data) === null || _a === void 0 ? void 0 : _a.url;
+            if (productUrl) {
+                let url;
+                try {
+                    url = new URL(productUrl);
+                }
+                catch (_b) {
+                    url = new URL(productUrl, location.origin);
+                }
+                const currentParams = new URLSearchParams(location.search);
+                currentParams.forEach((value, key) => {
+                    if (!url.searchParams.has(key)) {
+                        url.searchParams.set(key, value);
+                    }
+                });
+                window.location.href = url.toString();
+            }
+            return;
+        }
+        /* Handle redirecting to a search page */
+        let query = '';
+        if (!(0, types_1.isAutocompleteSelectSubmit)(event) && event.query) {
+            query = event.query;
+        }
+        if ((0, types_1.isAutocompleteSelectSubmit)(event) && event.item.section === 'Search Suggestions') {
+            query = event.item.value;
+        }
+        if (!query) {
+            return;
+        }
+        const queryParams = new URLSearchParams(location.search);
+        const shopifySearchUrl = (shopifySettings === null || shopifySettings === void 0 ? void 0 : shopifySettings.searchUrl) || '';
+        queryParams.set('q', query);
+        window.location.href = location.origin + shopifySearchUrl + '?' + queryParams.toString();
+    },
+};

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.25.5';
+exports.default = '1.27.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

@@ -13,6 +13,7 @@ import useRecommendationsObserver from './useRecommendationsObserver';
 import { isCustomSection, isRecommendationsSection } from '../typeGuards';
 import useNormalizedProps from './useNormalizedProps';
 import useCustomBlur from './useCustomBlur';
+import { shopifyDefaults } from '../utils/shopifyDefaults';
 export const defaultSections = [
     {
         indexSectionName: 'Search Suggestions',
@@ -24,11 +25,30 @@ export const defaultSections = [
     },
 ];
 const useCioAutocomplete = (options) => {
-    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 { sections, zeroStateSections, cioClientOptions, advancedParameters } = useNormalizedProps(options);
+    const { onSubmit: onSubmitProp, onChange, openOnFocus, apiKey, cioJsClient, placeholder: placeholderProp, autocompleteClassName = 'cio-autocomplete', defaultInput, useShopifyDefaults, shopifySettings, getSearchResultsUrl, ...rest } = options;
+    let placeholder = 'What can we help you find today?';
+    if (placeholderProp) {
+        placeholder = placeholderProp;
+    }
+    else if (useShopifyDefaults) {
+        placeholder = shopifyDefaults.placeholder;
+    }
+    let onSubmit;
+    if (onSubmitProp) {
+        onSubmit = onSubmitProp;
+    }
+    else if (useShopifyDefaults) {
+        onSubmit = (e) => shopifyDefaults.onSubmit(e, shopifySettings);
+    }
     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]);

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

@@ -0,0 +1,44 @@
+import { isAutocompleteSelectSubmit } from '../types';
+// eslint-disable-next-line import/prefer-default-export
+export const shopifyDefaults = {
+    selector: '#cio-autocomplete-ui-container',
+    placeholder: 'Search',
+    onSubmit(event, shopifySettings) {
+        /* Handle redirecting to a product page */
+        if (isAutocompleteSelectSubmit(event) && event.item.section === 'Products') {
+            const productUrl = event.item.data?.url;
+            if (productUrl) {
+                let url;
+                try {
+                    url = new URL(productUrl);
+                }
+                catch {
+                    url = new URL(productUrl, location.origin);
+                }
+                const currentParams = new URLSearchParams(location.search);
+                currentParams.forEach((value, key) => {
+                    if (!url.searchParams.has(key)) {
+                        url.searchParams.set(key, value);
+                    }
+                });
+                window.location.href = url.toString();
+            }
+            return;
+        }
+        /* Handle redirecting to a search page */
+        let query = '';
+        if (!isAutocompleteSelectSubmit(event) && event.query) {
+            query = event.query;
+        }
+        if (isAutocompleteSelectSubmit(event) && event.item.section === 'Search Suggestions') {
+            query = event.item.value;
+        }
+        if (!query) {
+            return;
+        }
+        const queryParams = new URLSearchParams(location.search);
+        const shopifySearchUrl = shopifySettings?.searchUrl || '';
+        queryParams.set('q', query);
+        window.location.href = location.origin + shopifySearchUrl + '?' + queryParams.toString();
+    },
+};

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.25.5';
+export default '1.27.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/useDownShift.d.ts

@@ -5,7 +5,7 @@ import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/ty
 import { Item, OnSubmit } from '../types';
 interface UseDownShiftOptions extends UseComboboxProps<Item> {
     setQuery: React.Dispatch<React.SetStateAction<string>>;
-    onSubmit: OnSubmit;
+    onSubmit?: OnSubmit;
     previousQuery?: string;
     cioClient: Nullable<ConstructorIOClient>;
 }

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;
 };
@@ -32,7 +36,10 @@ type OptionalItemsComboboxProps<Item> = Partial<UseComboboxProps<Item>> & {
     items?: Item[];
 };
 export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
-export type CioAutocompleteProps = CioClientConfig & OptionalItemsComboboxProps<Item> & {
+export type ShopifySettings = {
+    searchUrl: string;
+};
+export type CioAutocompletePropsBase = CioClientConfig & OptionalItemsComboboxProps<Item> & {
     /**
      * Set to `false` to show suggestions only after a user clears their query,
      * but not when they initially select the input
@@ -43,11 +50,6 @@ export type CioAutocompleteProps = CioClientConfig & OptionalItemsComboboxProps<
      * i.e. <a href=getSearchResultsUrl([selected_search_suggestion])>[Search Suggestion]</a>
      */
     getSearchResultsUrl?: (item: SearchSuggestion) => string;
-    /**
-     * Callback function that runs when the user submits a search.
-     * Usually used to trigger a redirect
-     */
-    onSubmit: OnSubmit;
     /**
      * Callback function that runs when the user focuses on the input
      */
@@ -86,7 +88,51 @@ export type CioAutocompleteProps = CioClientConfig & OptionalItemsComboboxProps<
      * Search input default value
      */
     defaultInput?: string;
+    /**
+     * Configuration settings for Shopify integration. Used when `useShopifyDefaults` is enabled.
+     *
+     * Allows you to customize the search URL and other Shopify-specific behaviors.
+     */
+    shopifySettings?: ShopifySettings;
+};
+export type CioAutocompletePropsWithShopifyDefaults = {
+    /**
+     * Callback function that runs when the user submits a search.
+     * Usually used to trigger a redirect.
+     * If provided, it will override Shopify defaults even when useShopifyDefaults is true.
+     */
+    onSubmit?: OnSubmit;
+    /**
+     * Set to `true` to apply Shopify-specific defaults for `onSubmit` behavior.
+     *
+     * When enabled, the autocomplete will automatically handle navigation:
+     * - **Product selections**: Redirects to the product URL (preserving query parameters)
+     * - **Search Suggestions**: Redirects to the search results page with the selected query
+     * - **Manual search**: Redirects to the search results page with the entered query
+     *
+     * **Note**: If you provide a custom `onSubmit` handler, it will override the Shopify defaults.
+     */
+    useShopifyDefaults: true;
+};
+export type CioAutocompletePropsWithoutShopifyDefaults = {
+    /**
+     * Callback function that runs when the user submits a search.
+     * Usually used to trigger a redirect.
+     */
+    onSubmit: OnSubmit;
+    /**
+     * Set to `true` to apply Shopify-specific defaults for `onSubmit` behavior.
+     *
+     * When enabled, the autocomplete will automatically handle navigation:
+     * - **Product selections**: Redirects to the product URL (preserving query parameters)
+     * - **Search Suggestions**: Redirects to the search results page with the selected query
+     * - **Manual search**: Redirects to the search results page with the entered query
+     *
+     * **Note**: If you provide a custom `onSubmit` handler, it will override the Shopify defaults.
+     */
+    useShopifyDefaults?: false;
 };
+export type CioAutocompleteProps = CioAutocompletePropsBase & (CioAutocompletePropsWithShopifyDefaults | CioAutocompletePropsWithoutShopifyDefaults);
 /**
  * AutocompleteSubmitEvent type is AutocompleteSelectSubmit or AutocompleteSearchSubmit.
  * Use isAutocompleteSearchSubmit or isAutocompleteSelectSubmit type predicates to safely access event properties.
@@ -115,7 +161,7 @@ export declare const isAutocompleteSelectSubmit: (event: AutocompleteSubmitEvent
  * @example if (isAutocompleteSearchSubmit(event)) { ... } // `item` and `originalQuery` are available
  */
 export declare const isAutocompleteSearchSubmit: (event: AutocompleteSubmitEvent) => event is AutocompleteSearchSubmit;
-export type OnSubmit = (event: AutocompleteSubmitEvent) => unknown;
+export type OnSubmit = (event: AutocompleteSubmitEvent, shopifySettings?: ShopifySettings) => unknown;
 export type DownshiftGetItemPropsOptions = GetItemPropsOptions<Item>;
 export type DownshiftGetItemProps = (options: GetItemPropsOptions<Item>) => object;
 export type ItemPropsOptions = DownshiftGetItemPropsOptions & {

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/utils/shopifyDefaults.d.ts

@@ -0,0 +1,13 @@
+import type { CioAutocompleteProps } from '../types';
+/**
+ * Shopify-specific default configurations for the autocomplete component.
+ *
+ * These defaults are designed to work seamlessly with Shopify themes and handle
+ * navigation patterns common in Shopify stores.
+ */
+export interface ShopifyDefaults {
+    onSubmit: NonNullable<CioAutocompleteProps['onSubmit']>;
+    selector: string;
+    placeholder: string;
+}
+export declare const shopifyDefaults: ShopifyDefaults;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.25.5";
+declare const _default: "1.27.0";
 export default _default;

package/package.json

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