@constructor-io/constructorio-ui-autocomplete 1.16.1 → 1.18.0

package/lib/cjs/components/Autocomplete/SectionItem/SectionItem.js

@@ -5,12 +5,13 @@ const react_1 = tslib_1.__importStar(require("react"));
 const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 const typeGuards_1 = require("../../../typeGuards");
 const SectionItemText_1 = tslib_1.__importDefault(require("./SectionItemText"));
+const utils_1 = require("../../../utils");
 function SectionItem(props) {
     var _a, _b, _c, _d, _e;
     const { item, children, displaySearchTermHighlights } = props;
     const { getItemProps, advancedParameters, query, featureToggles } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
     const { featureDisplaySearchSuggestionImages, featureDisplaySearchSuggestionResultCounts } = featureToggles;
-    const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, } = advancedParameters || {};
+    const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, translations, } = advancedParameters || {};
     let defaultChildren;
     if ((0, typeGuards_1.isProduct)(item)) {
         defaultChildren = (react_1.default.createElement(react_1.default.Fragment, null,
@@ -20,7 +21,7 @@ function SectionItem(props) {
     }
     else if ((0, typeGuards_1.isInGroupSuggestion)(item)) {
         defaultChildren = (react_1.default.createElement("p", { className: 'cio-term-in-group' },
-            "in",
+            (0, utils_1.translate)('in', translations),
             ' ',
             react_1.default.createElement(SectionItemText_1.default, { item: item, query: query, highlightSearchTerm: displaySearchTermHighlights })));
     }

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.cioJsClientOptionsDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
+exports.translationsDescription = 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';
 /// //////////////////////////////
@@ -214,3 +214,12 @@ To see this in action:
   - This is because we are filtering to the "Shirts" group`;
 exports.termsWithImagesAndCountsDescription = `Pass boolean flags for \`displaySearchSuggestionImages\` and \`displaySearchSuggestionResultCounts\` fields to display images and counts for search suggestions. These fields need to be made displayable before they can be used. Please contact your Constructor Integration Engineer for details.`;
 exports.debounceDescription = `Pass an integer to \`debounce\` to override the recommended, default delay employed for debouncing autocomplete network requests between keystrokes as your users type into the text input field. The default value is 250, which results in a debounce delay of 250 milliseconds.`;
+exports.translationsDescription = `Pass a \`translations\` object to display translatable words in your preferred language.
+
+- Current translatable keys:
+\`\`\`
+  {
+    "in": "..."
+  }
+\`\`\`
+`;

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -21,8 +21,8 @@ exports.defaultSections = [
     },
 ];
 const useCioAutocomplete = (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 { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', sections = exports.defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, } = options;
+    const [query, setQuery] = (0, react_1.useState)(defaultInput || '');
     const previousQuery = (0, usePrevious_1.default)(query);
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient, cioJsClientOptions });
     // Get autocomplete sections (autocomplete + recommendations + custom)

package/lib/cjs/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemsForActiveSections = exports.trackRecommendationView = exports.escapeRegExp = exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getItemPosition = exports.getSearchSuggestionFeatures = void 0;
+exports.translate = exports.getItemsForActiveSections = exports.trackRecommendationView = exports.escapeRegExp = exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getItemPosition = exports.getSearchSuggestionFeatures = void 0;
 const tslib_1 = require("tslib");
 const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
 const typeGuards_1 = require("./typeGuards");
@@ -182,3 +182,12 @@ const getItemsForActiveSections = (activeSectionsWithData) => {
     return items;
 };
 exports.getItemsForActiveSections = getItemsForActiveSections;
+const translate = (word, translations) => {
+    const localTranslations = {
+        in: 'in',
+    };
+    if (translations)
+        return translations[word];
+    return localTranslations[word] || word;
+};
+exports.translate = translate;

package/lib/cjs/version.js

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

package/lib/mjs/components/Autocomplete/SectionItem/SectionItem.js

@@ -2,11 +2,12 @@ import React, { useContext } from 'react';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 import { isProduct, isInGroupSuggestion, isSearchSuggestion } from '../../../typeGuards';
 import SectionItemText from './SectionItemText';
+import { translate } from '../../../utils';
 export default function SectionItem(props) {
     const { item, children, displaySearchTermHighlights } = props;
     const { getItemProps, advancedParameters, query, featureToggles } = useContext(CioAutocompleteContext);
     const { featureDisplaySearchSuggestionImages, featureDisplaySearchSuggestionResultCounts } = featureToggles;
-    const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, } = advancedParameters || {};
+    const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, translations, } = advancedParameters || {};
     let defaultChildren;
     if (isProduct(item)) {
         defaultChildren = (React.createElement(React.Fragment, null,
@@ -16,7 +17,7 @@ export default function SectionItem(props) {
     }
     else if (isInGroupSuggestion(item)) {
         defaultChildren = (React.createElement("p", { className: 'cio-term-in-group' },
-            "in",
+            translate('in', translations),
             ' ',
             React.createElement(SectionItemText, { item: item, query: query, highlightSearchTerm: displaySearchTermHighlights })));
     }

package/lib/mjs/constants.js

@@ -210,3 +210,12 @@ To see this in action:
   - This is because we are filtering to the "Shirts" group`;
 export const termsWithImagesAndCountsDescription = `Pass boolean flags for \`displaySearchSuggestionImages\` and \`displaySearchSuggestionResultCounts\` fields to display images and counts for search suggestions. These fields need to be made displayable before they can be used. Please contact your Constructor Integration Engineer for details.`;
 export const debounceDescription = `Pass an integer to \`debounce\` to override the recommended, default delay employed for debouncing autocomplete network requests between keystrokes as your users type into the text input field. The default value is 250, which results in a debounce delay of 250 milliseconds.`;
+export const translationsDescription = `Pass a \`translations\` object to display translatable words in your preferred language.
+
+- Current translatable keys:
+\`\`\`
+  {
+    "in": "..."
+  }
+\`\`\`
+`;

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -17,8 +17,8 @@ export const defaultSections = [
     },
 ];
 const useCioAutocomplete = (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 { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', sections = defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, } = options;
+    const [query, setQuery] = useState(defaultInput || '');
     const previousQuery = usePrevious(query);
     const cioClient = useCioClient({ apiKey, cioJsClient, cioJsClientOptions });
     // Get autocomplete sections (autocomplete + recommendations + custom)

package/lib/mjs/utils.js

@@ -165,3 +165,11 @@ export const getItemsForActiveSections = (activeSectionsWithData) => {
     });
     return items;
 };
+export const translate = (word, translations) => {
+    const localTranslations = {
+        in: 'in',
+    };
+    if (translations)
+        return translations[word];
+    return localTranslations[word] || word;
+};

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.16.1';
+export default '1.18.0';

package/lib/types/constants.d.ts

@@ -32,3 +32,4 @@ export declare const termsWithGroupSuggestionsDescription = "Pass integers for t
 export declare const filteredSuggestionsDescription = "Pass a `filters` object under `advancedParameters` to apply filters to the suggestions. Any parameter supported by <a href=\"https://docs.constructor.io/rest_api/autocomplete_queries/\" target=\"__blank\">our autocomplete endpoint</a> can be passed under `advancedParameters`.\n\nTo see this in action:\n1. Type \"short\" in the example below.\n  - Notice how the user is presented with only short pants as results.\n  - This is because the results are currently filtered to belong to the \"Shorts\" group.\n2. Navigate to the \"Filtered Suggestions\" story (using the navigation menu to the left)\n3. Then use the Controls to adjust the values of `\"group_id\"` to `\"1030\"`.\n4. Next, type \"short\" in the example autocomplete input field.\n  - Notice how the user is presented with only short sleeved items as results.\n  - This is because we are filtering to the \"Shirts\" group";
 export declare const termsWithImagesAndCountsDescription = "Pass boolean flags for `displaySearchSuggestionImages` and `displaySearchSuggestionResultCounts` fields to display images and counts for search suggestions. These fields need to be made displayable before they can be used. Please contact your Constructor Integration Engineer for details.";
 export declare const debounceDescription = "Pass an integer to `debounce` to override the recommended, default delay employed for debouncing autocomplete network requests between keystrokes as your users type into the text input field. The default value is 250, which results in a debounce delay of 250 milliseconds.";
+export declare const translationsDescription = "Pass a `translations` object to display translatable words in your preferred language.\n\n- Current translatable keys:\n```\n  {\n    \"in\": \"...\"\n  }\n```\n";

package/lib/types/types.d.ts

@@ -14,6 +14,7 @@ export interface AdvancedParametersBase {
     displaySearchSuggestionImages?: boolean;
     displaySearchSuggestionResultCounts?: boolean;
     debounce?: number;
+    translations?: Translations;
 }
 export type AdvancedParameters = AdvancedParametersBase & Omit<IAutocompleteParameters, 'resultsPerSection'>;
 export type CioAutocompleteProps = CioClientConfig & {
@@ -27,6 +28,7 @@ export type CioAutocompleteProps = CioClientConfig & {
     zeroStateSections?: UserDefinedSection[];
     autocompleteClassName?: string;
     advancedParameters?: AdvancedParameters;
+    defaultInput?: string;
 };
 export type AutocompleteSubmitEvent = {
     item: Item;
@@ -95,3 +97,6 @@ export type InGroupSuggestion = SearchSuggestion & {
 export type HTMLPropsWithCioDataAttributes<T = any> = React.DetailedHTMLProps<React.HTMLAttributes<T>, T> & {
     [key: `data-cnstrc-${string}`]: any;
 };
+export type Translations = {
+    in?: string;
+};

package/lib/types/utils.d.ts

@@ -1,6 +1,6 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { AutocompleteRequestType, Nullable, ConstructorClientOptions } from '@constructor-io/constructorio-client-javascript/lib/types';
-import { OnSubmit, Item, Section, UserDefinedSection, SectionsData } from './types';
+import { Item, Section, UserDefinedSection, SectionsData, Translations } from './types';
 export type GetItemPosition = (args: {
     item: Item;
     items: Item[];
@@ -31,14 +31,12 @@ export declare const getStoryParams: (storyCode: any, templateCode: any, importC
 export declare const functionStrings: {
     onSubmit: string;
 };
-export declare const stringifyWithDefaults: (obj: {
-    apiKey: string;
-    onSubmit: OnSubmit;
-}) => string;
+export declare const stringifyWithDefaults: (obj: any) => string;
 export declare const disableStoryActions: (story: any) => void;
 export declare const getCioClient: (apiKey?: string, cioJsClientOptions?: ConstructorClientOptions) => ConstructorIOClient | null;
 export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionResults: SectionsData, sectionsRefs: React.MutableRefObject<React.RefObject<HTMLLIElement>[]>) => Section[];
 export declare const escapeRegExp: (string: string) => string;
 export declare const trackRecommendationView: (target: HTMLElement, activeSectionsWithData: Section[], cioClient: Nullable<ConstructorIOClient>) => void;
 export declare const getItemsForActiveSections: (activeSectionsWithData: Section[]) => Item[];
+export declare const translate: (word: string, translations?: Translations) => any;
 export {};

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.16.1";
+declare const _default: "1.18.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.16.1",
+  "version": "1.18.0",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -63,14 +63,14 @@
   },
   "devDependencies": {
     "@cspell/eslint-plugin": "^6.18.1",
-    "@storybook/addon-a11y": "^7.0.14",
-    "@storybook/addon-actions": "^7.0.14",
-    "@storybook/addon-essentials": "^7.0.14",
-    "@storybook/addon-interactions": "^7.0.14",
-    "@storybook/addon-links": "^7.0.14",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/react-webpack5": "7.0.14",
-    "@storybook/test-runner": "^0.10.0",
+    "@storybook/addon-a11y": "^7.6.6",
+    "@storybook/addon-actions": "^7.6.6",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/react-webpack5": "7.6.6",
+    "@storybook/test-runner": "^0.13.0",
     "@storybook/testing-library": "^0.1.0",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
@@ -91,7 +91,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^1.15.2",
-    "storybook": "^7.0.14",
+    "storybook": "^7.6.6",
     "typescript": "^4.8.3",
     "vite": "^4.3.7",
     "vite-plugin-css-injected-by-js": "^3.1.1",