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

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',
@@ -29,7 +30,21 @@ exports.defaultSections = [
 ];
 const useCioAutocomplete = (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 { 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)({

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.26.0';
+exports.default = '1.27.0';

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',
@@ -25,7 +26,21 @@ export const defaultSections = [
 ];
 const useCioAutocomplete = (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 { 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({

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.26.0';
+export default '1.27.0';

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

@@ -36,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
@@ -47,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
      */
@@ -90,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.
@@ -119,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/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.26.0";
+declare const _default: "1.27.0";
 export default _default;

package/package.json

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