@constructor-io/constructorio-ui-autocomplete 1.14.1 → 1.15.1

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.debounceDescription = exports.termsWithImagesAndCountsDescription = exports.filteredSuggestionsDescription = exports.termsWithGroupSuggestionsDescription = exports.advancedParametersDefaultDescription = exports.advancedParametersDescription = exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDefault = exports.onSubmitDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
+exports.debounceDescription = exports.termsWithImagesAndCountsDescription = exports.filteredSuggestionsDescription = exports.termsWithGroupSuggestionsDescription = exports.advancedParametersDefaultDescription = exports.advancedParametersDescription = exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDefault = exports.onSubmitDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientOptionsDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_M57QS8SMPdLdLx4x';
 /// //////////////////////////////
@@ -102,6 +102,7 @@ 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.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

@@ -21,10 +21,10 @@ exports.defaultSections = [
     },
 ];
 const useCioAutocomplete = (options) => {
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = 'What can we help you find today?', sections = exports.defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters, } = options;
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', sections = exports.defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters, } = options;
     const [query, setQuery] = (0, react_1.useState)('');
     const previousQuery = (0, usePrevious_1.default)(query);
-    const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
+    const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient, cioJsClientOptions });
     // Get autocomplete sections (autocomplete + recommendations + custom)
     const { activeSections, activeSectionsWithData, zeroStateActiveSections, request } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)

package/lib/cjs/hooks/useCioClient.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const utils_1 = require("../utils");
-const useCioClient = ({ apiKey, cioJsClient }) => {
+const useCioClient = ({ apiKey, cioJsClient, 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, utils_1.getCioClient)(apiKey), [apiKey, cioJsClient]);
+    return (0, react_1.useMemo)(() => cioJsClient || (0, utils_1.getCioClient)(apiKey, cioJsClientOptions), [apiKey, cioJsClient, cioJsClientOptions]);
 };
 exports.default = useCioClient;

package/lib/cjs/hooks/useDebouncedFetchSections.js

@@ -6,7 +6,7 @@ const useDebounce_1 = tslib_1.__importDefault(require("./useDebounce"));
 const transformResponse = (response, options) => {
     const { numTermsWithGroupSuggestions, numGroupsSuggestedPerTerm } = options;
     const newSectionsData = {};
-    Object.keys(response.sections).forEach((section) => {
+    Object.keys((response === null || response === void 0 ? void 0 : response.sections) || {}).forEach((section) => {
         newSectionsData[section] = [];
         const sectionItems = response.sections[section].map((item) => {
             var _a;

package/lib/cjs/utils.js

@@ -110,13 +110,9 @@ const disableStoryActions = (story) => {
     story.parameters.actions = { argTypesRegex: null };
 };
 exports.disableStoryActions = disableStoryActions;
-const getCioClient = (apiKey) => {
-    if (apiKey) {
-        const cioClient = new constructorio_client_javascript_1.default({
-            apiKey,
-            sendTrackingEvents: true,
-            version: `cio-ui-autocomplete-${version_1.default}`,
-        });
+const getCioClient = (apiKey, cioJsClientOptions) => {
+    if (apiKey && typeof window !== 'undefined') {
+        const cioClient = new constructorio_client_javascript_1.default(Object.assign({ apiKey, sendTrackingEvents: true, version: `cio-ui-autocomplete-${version_1.default}` }, cioJsClientOptions));
         // 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.14.0';
+exports.default = '1.15.1';

package/lib/mjs/constants.js

@@ -99,6 +99,7 @@ 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 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

@@ -17,10 +17,10 @@ export const defaultSections = [
     },
 ];
 const useCioAutocomplete = (options) => {
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = 'What can we help you find today?', sections = defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters, } = options;
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', sections = defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters, } = options;
     const [query, setQuery] = useState('');
     const previousQuery = usePrevious(query);
-    const cioClient = useCioClient({ apiKey, cioJsClient });
+    const cioClient = useCioClient({ apiKey, cioJsClient, cioJsClientOptions });
     // Get autocomplete sections (autocomplete + recommendations + custom)
     const { activeSections, activeSectionsWithData, zeroStateActiveSections, request } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)

package/lib/mjs/hooks/useCioClient.js

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

package/lib/mjs/hooks/useDebouncedFetchSections.js

@@ -3,7 +3,7 @@ import useDebounce from './useDebounce';
 const transformResponse = (response, options) => {
     const { numTermsWithGroupSuggestions, numGroupsSuggestedPerTerm } = options;
     const newSectionsData = {};
-    Object.keys(response.sections).forEach((section) => {
+    Object.keys(response?.sections || {}).forEach((section) => {
         newSectionsData[section] = [];
         const sectionItems = response.sections[section].map((item) => ({
             ...item,

package/lib/mjs/utils.js

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

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.14.0';
+export default '1.15.1';

package/lib/types/constants.d.ts

@@ -8,6 +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 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/types.d.ts

@@ -1,11 +1,12 @@
 import { GetItemPropsOptions } 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 } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { IAutocompleteParameters, SearchSuggestion as SearchSuggestionFromClient, Product as ProductFromClient, Item as ItemBase, AutocompleteRequestType, ConstructorClientOptions } from '@constructor-io/constructorio-client-javascript/lib/types';
 export type { IAutocompleteParameters } from '@constructor-io/constructorio-client-javascript/lib/types';
 export type CioClientConfig = {
     apiKey?: string;
     cioJsClient?: ConstructorIOClient;
+    cioJsClientOptions?: ConstructorClientOptions;
 };
 export interface AdvancedParametersBase {
     numTermsWithGroupSuggestions?: number;

package/lib/types/utils.d.ts

@@ -1,5 +1,5 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { AutocompleteRequestType } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { AutocompleteRequestType, ConstructorClientOptions } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { OnSubmit, Item, Section, UserDefinedSection, SectionsData } from './types';
 export type GetItemPosition = (args: {
     item: Item;
@@ -36,7 +36,7 @@ export declare const stringifyWithDefaults: (obj: {
     onSubmit: OnSubmit;
 }) => string;
 export declare const disableStoryActions: (story: any) => void;
-export declare const getCioClient: (apiKey?: string) => ConstructorIOClient | null;
+export declare const getCioClient: (apiKey?: string, cioJsClientOptions?: ConstructorClientOptions) => ConstructorIOClient | null;
 export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionResults: SectionsData) => Section[];
 export declare const escapeRegExp: (string: string) => string;
 export {};

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.14.0";
+declare const _default: "1.15.1";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.14.1",
+  "version": "1.15.1",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -37,9 +37,6 @@
     "test-storybook:ci": "start-server-and-test storybook:ci http://localhost:6006 test-storybook",
     "build-storybook": "storybook build -o 'docs'",
     "serve-built-storybook": "npx http-server docs",
-    "verify-node-version": "chmod +x ./scripts/verify-node-version.sh && ./scripts/verify-node-version.sh",
-    "preversion": "node ./src/generateVersion.js",
-    "version": "npm run verify-node-version && npm run build-storybook && git add -u ./docs && git add ./docs/* && git add ./src/version.ts && npm run compile",
     "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles && vite build"
   },
   "author": "constructor.io",