@constructor-io/constructorio-ui-autocomplete 1.9.0 → 1.9.2

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

@@ -4,33 +4,38 @@ const tslib_1 = require("tslib");
 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"));
 function SectionItem(props) {
     var _a, _b, _c, _d, _e;
-    const { item, children } = props;
-    const { getItemProps, advancedParameters } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const { item, children, displaySearchTermHighlights } = props;
+    const { getItemProps, advancedParameters, query } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
     const { displaySearchSuggestionImages, displaySearchSuggestionResultCounts } = advancedParameters || {};
     let defaultChildren;
     if ((0, typeGuards_1.isProduct)(item)) {
         defaultChildren = (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("img", { "data-testid": 'cio-img', src: (_a = item.data) === null || _a === void 0 ? void 0 : _a.image_url, alt: item.value, className: 'cio-product-image' }),
-            react_1.default.createElement("p", { "data-testid": 'cio-text', className: 'cio-product-text' }, item.value)));
+            react_1.default.createElement("p", { "data-testid": 'cio-text', className: 'cio-product-text' },
+                react_1.default.createElement(SectionItemText_1.default, { item: item, query: query, highlightSearchTerm: displaySearchTermHighlights }))));
     }
     else if ((0, typeGuards_1.isInGroupSuggestion)(item)) {
-        defaultChildren = react_1.default.createElement("p", { className: 'cio-term-in-group' },
-            "in ",
-            item.groupName);
+        defaultChildren = (react_1.default.createElement("p", { className: 'cio-term-in-group' },
+            "in",
+            ' ',
+            react_1.default.createElement(SectionItemText_1.default, { item: item, query: query, highlightSearchTerm: displaySearchTermHighlights })));
     }
     else if ((0, typeGuards_1.isSearchSuggestion)(item)) {
         defaultChildren = (react_1.default.createElement(react_1.default.Fragment, null,
             displaySearchSuggestionImages && ((_b = item.data) === null || _b === void 0 ? void 0 : _b.image_url) && (react_1.default.createElement("img", { src: (_c = item.data) === null || _c === void 0 ? void 0 : _c.image_url, alt: item.value, className: 'cio-suggestion-image' })),
-            react_1.default.createElement("p", { className: 'cio-suggestion-text' }, item.value),
+            react_1.default.createElement("p", { className: 'cio-suggestion-text' },
+                react_1.default.createElement(SectionItemText_1.default, { item: item, query: query, highlightSearchTerm: displaySearchTermHighlights })),
             displaySearchSuggestionResultCounts && ((_d = item.data) === null || _d === void 0 ? void 0 : _d.total_num_results) && (react_1.default.createElement("p", { className: 'cio-suggestion-count' },
                 "(", (_e = item.data) === null || _e === void 0 ? void 0 :
                 _e.total_num_results,
                 ")"))));
     }
     else {
-        defaultChildren = react_1.default.createElement("p", { className: 'cio-custom-text' }, item.value);
+        defaultChildren = (react_1.default.createElement("p", { className: 'cio-custom-text' },
+            react_1.default.createElement(SectionItemText_1.default, { item: item, query: query, highlightSearchTerm: displaySearchTermHighlights })));
     }
     return react_1.default.createElement("li", Object.assign({}, getItemProps(item)), children || defaultChildren);
 }

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const typeGuards_1 = require("../../../typeGuards");
+const utils_1 = require("../../../utils");
+function SectionItemText({ item, query, highlightSearchTerm, }) {
+    const itemText = (0, typeGuards_1.isInGroupSuggestion)(item) ? item.groupName : item.value;
+    if (highlightSearchTerm) {
+        const queryRegex = new RegExp(`(${(0, utils_1.escapeRegExp)(query)})`, 'gi');
+        const queryIncludedInText = queryRegex.test(itemText);
+        if (query && queryIncludedInText) {
+            const splitText = itemText.split(queryRegex);
+            return (react_1.default.createElement(react_1.default.Fragment, null, splitText.map((split, index) => {
+                // eslint-disable-next-line react/no-array-index-key
+                if (queryRegex.test(split))
+                    return react_1.default.createElement("b", { key: `matched-word-${index}` }, split);
+                return split;
+            })));
+        }
+    }
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return react_1.default.createElement(react_1.default.Fragment, null, itemText);
+}
+exports.default = SectionItemText;

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

@@ -12,7 +12,7 @@ const DefaultRenderSectionItemsList = function ({ section }) {
         return null;
     return (react_1.default.createElement("li", { className: `${sectionName} cio-section`, role: 'none' },
         react_1.default.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, (0, utils_1.camelToStartCase)(sectionName)),
-        react_1.default.createElement("ul", { className: 'cio-section-items', role: 'none' }, (_b = section === null || section === void 0 ? void 0 : section.data) === null || _b === void 0 ? void 0 : _b.map((item) => (react_1.default.createElement(SectionItem_1.default, { item: item, key: item === null || item === void 0 ? void 0 : item.id }))))));
+        react_1.default.createElement("ul", { className: 'cio-section-items', role: 'none' }, (_b = section === null || section === void 0 ? void 0 : section.data) === null || _b === void 0 ? void 0 : _b.map((item) => (react_1.default.createElement(SectionItem_1.default, { item: item, key: item === null || item === void 0 ? void 0 : item.id, displaySearchTermHighlights: section.displaySearchTermHighlights }))))));
 };
 function SectionItemsList(props) {
     const { section, children = DefaultRenderSectionItemsList } = props;

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
+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.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_M57QS8SMPdLdLx4x';
 /// //////////////////////////////
@@ -108,6 +108,7 @@ exports.contentDescription = `Override default \`sections\` to only suggest cont
 exports.numResultsDescription = `Override default \`numResults\` to only suggest 2 products per query`;
 exports.sectionOrderDescription = `Override default \`numResults\` to suggest products, then terms`;
 exports.recommendationsDescription = `Use constructor's recommendations service, with \`"type": "recommendations"\``;
+exports.displaySearchTermHighlightsDescription = `Use constructor's auto highlighting of words that match the search keyword, with \`"displaySearchTermHighlights": true\``;
 exports.customSectionDescription = `Use a custom section, by managing and passing your own data, with \`"type": "custom"\` and \`"data":[{...}]\``;
 exports.onFocusDescription = `Pass an \`onFocus\` callback function to execute some code each time the user applies focus to the text input field`;
 exports.onChangeDescription = `Pass an \`onChange\` callback function to execute some code each time the user changes the value of the text input field`;

package/lib/cjs/utils.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getItemPosition = void 0;
+exports.escapeRegExp = exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getItemPosition = 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");
+const version_1 = tslib_1.__importDefault(require("./version"));
 const getItemPosition = ({ item, items }) => {
     var _a;
     const index = items.findIndex((itemInFlatList) => (itemInFlatList === null || itemInFlatList === void 0 ? void 0 : itemInFlatList.id) === (item === null || item === void 0 ? void 0 : item.id));
@@ -88,7 +89,7 @@ const getCioClient = (apiKey) => {
         return new constructorio_client_javascript_1.default({
             apiKey,
             sendTrackingEvents: true,
-            version: 'cio-ui-autocomplete',
+            version: `cio-ui-autocomplete-${version_1.default}`,
         });
     }
     return null;
@@ -116,3 +117,5 @@ const getActiveSectionsWithData = (activeSections, sectionResults) => {
     return activeSectionsWithData;
 };
 exports.getActiveSectionsWithData = getActiveSectionsWithData;
+const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+exports.escapeRegExp = escapeRegExp;

package/lib/cjs/version.js

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

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

@@ -1,32 +1,37 @@
 import React, { useContext } from 'react';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 import { isProduct, isInGroupSuggestion, isSearchSuggestion } from '../../../typeGuards';
+import SectionItemText from './SectionItemText';
 export default function SectionItem(props) {
-    const { item, children } = props;
-    const { getItemProps, advancedParameters } = useContext(CioAutocompleteContext);
+    const { item, children, displaySearchTermHighlights } = props;
+    const { getItemProps, advancedParameters, query } = useContext(CioAutocompleteContext);
     const { displaySearchSuggestionImages, displaySearchSuggestionResultCounts } = advancedParameters || {};
     let defaultChildren;
     if (isProduct(item)) {
         defaultChildren = (React.createElement(React.Fragment, null,
             React.createElement("img", { "data-testid": 'cio-img', src: item.data?.image_url, alt: item.value, className: 'cio-product-image' }),
-            React.createElement("p", { "data-testid": 'cio-text', className: 'cio-product-text' }, item.value)));
+            React.createElement("p", { "data-testid": 'cio-text', className: 'cio-product-text' },
+                React.createElement(SectionItemText, { item: item, query: query, highlightSearchTerm: displaySearchTermHighlights }))));
     }
     else if (isInGroupSuggestion(item)) {
-        defaultChildren = React.createElement("p", { className: 'cio-term-in-group' },
-            "in ",
-            item.groupName);
+        defaultChildren = (React.createElement("p", { className: 'cio-term-in-group' },
+            "in",
+            ' ',
+            React.createElement(SectionItemText, { item: item, query: query, highlightSearchTerm: displaySearchTermHighlights })));
     }
     else if (isSearchSuggestion(item)) {
         defaultChildren = (React.createElement(React.Fragment, null,
             displaySearchSuggestionImages && item.data?.image_url && (React.createElement("img", { src: item.data?.image_url, alt: item.value, className: 'cio-suggestion-image' })),
-            React.createElement("p", { className: 'cio-suggestion-text' }, item.value),
+            React.createElement("p", { className: 'cio-suggestion-text' },
+                React.createElement(SectionItemText, { item: item, query: query, highlightSearchTerm: displaySearchTermHighlights })),
             displaySearchSuggestionResultCounts && item.data?.total_num_results && (React.createElement("p", { className: 'cio-suggestion-count' },
                 "(",
                 item.data?.total_num_results,
                 ")"))));
     }
     else {
-        defaultChildren = React.createElement("p", { className: 'cio-custom-text' }, item.value);
+        defaultChildren = (React.createElement("p", { className: 'cio-custom-text' },
+            React.createElement(SectionItemText, { item: item, query: query, highlightSearchTerm: displaySearchTermHighlights })));
     }
     return React.createElement("li", { ...getItemProps(item) }, children || defaultChildren);
 }

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { isInGroupSuggestion } from '../../../typeGuards';
+import { escapeRegExp } from '../../../utils';
+export default function SectionItemText({ item, query, highlightSearchTerm, }) {
+    const itemText = isInGroupSuggestion(item) ? item.groupName : item.value;
+    if (highlightSearchTerm) {
+        const queryRegex = new RegExp(`(${escapeRegExp(query)})`, 'gi');
+        const queryIncludedInText = queryRegex.test(itemText);
+        if (query && queryIncludedInText) {
+            const splitText = itemText.split(queryRegex);
+            return (React.createElement(React.Fragment, null, splitText.map((split, index) => {
+                // eslint-disable-next-line react/no-array-index-key
+                if (queryRegex.test(split))
+                    return React.createElement("b", { key: `matched-word-${index}` }, split);
+                return split;
+            })));
+        }
+    }
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return React.createElement(React.Fragment, null, itemText);
+}

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

@@ -8,7 +8,7 @@ const DefaultRenderSectionItemsList = function ({ section }) {
         return null;
     return (React.createElement("li", { className: `${sectionName} cio-section`, role: 'none' },
         React.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, camelToStartCase(sectionName)),
-        React.createElement("ul", { className: 'cio-section-items', role: 'none' }, section?.data?.map((item) => (React.createElement(SectionItem, { item: item, key: item?.id }))))));
+        React.createElement("ul", { className: 'cio-section-items', role: 'none' }, section?.data?.map((item) => (React.createElement(SectionItem, { item: item, key: item?.id, displaySearchTermHighlights: section.displaySearchTermHighlights }))))));
 };
 export default function SectionItemsList(props) {
     const { section, children = DefaultRenderSectionItemsList } = props;

package/lib/mjs/constants.js

@@ -105,6 +105,7 @@ export const contentDescription = `Override default \`sections\` to only suggest
 export const numResultsDescription = `Override default \`numResults\` to only suggest 2 products per query`;
 export const sectionOrderDescription = `Override default \`numResults\` to suggest products, then terms`;
 export const recommendationsDescription = `Use constructor's recommendations service, with \`"type": "recommendations"\``;
+export const displaySearchTermHighlightsDescription = `Use constructor's auto highlighting of words that match the search keyword, with \`"displaySearchTermHighlights": true\``;
 export const customSectionDescription = `Use a custom section, by managing and passing your own data, with \`"type": "custom"\` and \`"data":[{...}]\``;
 export const onFocusDescription = `Pass an \`onFocus\` callback function to execute some code each time the user applies focus to the text input field`;
 export const onChangeDescription = `Pass an \`onChange\` callback function to execute some code each time the user changes the value of the text input field`;

package/lib/mjs/utils.js

@@ -1,5 +1,6 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { isCustomSection } from './typeGuards';
+import version from './version';
 export const getItemPosition = ({ item, items }) => {
     const index = items.findIndex((itemInFlatList) => itemInFlatList?.id === item?.id);
     const sectionId = items[index]?.section;
@@ -73,7 +74,7 @@ export const getCioClient = (apiKey) => {
         return new ConstructorIOClient({
             apiKey,
             sendTrackingEvents: true,
-            version: 'cio-ui-autocomplete',
+            version: `cio-ui-autocomplete-${version}`,
         });
     }
     return null;
@@ -99,3 +100,4 @@ export const getActiveSectionsWithData = (activeSections, sectionResults) => {
     });
     return activeSectionsWithData;
 };
+export const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

package/lib/mjs/version.js

@@ -0,0 +1 @@
+export default '1.9.2';

package/lib/types/components/Autocomplete/SectionItem/SectionItem.d.ts

@@ -4,5 +4,6 @@ export interface SectionItemProps {
     item: Item;
     children?: ReactNode;
     key?: string;
+    displaySearchTermHighlights?: boolean;
 }
 export default function SectionItem(props: SectionItemProps): JSX.Element;

package/lib/types/components/Autocomplete/SectionItem/SectionItemText.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Item } from '../../../types';
+export interface SectionItemTextProps {
+    item: Item;
+    query: string;
+    highlightSearchTerm?: boolean;
+}
+export default function SectionItemText({ item, query, highlightSearchTerm, }: SectionItemTextProps): JSX.Element;

package/lib/types/constants.d.ts

@@ -14,6 +14,7 @@ export declare const contentDescription = "Override default `sections` to only s
 export declare const numResultsDescription = "Override default `numResults` to only suggest 2 products per query";
 export declare const sectionOrderDescription = "Override default `numResults` to suggest products, then terms";
 export declare const recommendationsDescription = "Use constructor's recommendations service, with `\"type\": \"recommendations\"`";
+export declare const displaySearchTermHighlightsDescription = "Use constructor's auto highlighting of words that match the search keyword, with `\"displaySearchTermHighlights\": true`";
 export declare const customSectionDescription = "Use a custom section, by managing and passing your own data, with `\"type\": \"custom\"` and `\"data\":[{...}]`";
 export declare const onFocusDescription = "Pass an `onFocus` callback function to execute some code each time the user applies focus to the text input field";
 export declare const onChangeDescription = "Pass an `onChange` callback function to execute some code each time the user changes the value of the text input field";

package/lib/types/types.d.ts

@@ -56,6 +56,7 @@ export type SectionConfiguration = {
     identifier: string;
     displayName?: string;
     numResults?: number;
+    displaySearchTermHighlights?: boolean;
 };
 export interface AutocompleteSection extends SectionConfiguration {
     type?: 'autocomplete';

package/lib/types/utils.d.ts

@@ -33,4 +33,5 @@ export declare const stringifyWithDefaults: (obj: {
 export declare const disableStoryActions: (story: any) => void;
 export declare const getCioClient: (apiKey?: string) => ConstructorIOClient | null;
 export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionResults: AutocompleteResultSections) => Section[];
+export declare const escapeRegExp: (string: string) => string;
 export {};

package/lib/types/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "1.9.2";
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -34,8 +34,9 @@
     "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",
-    "version": "npm run verify-node-version && npm run build-storybook && git add -u ./docs && git add ./docs/* && npm run compile",
-    "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles && vite build"
+    "preversion": "node ./src/generateVersion.js",
+    "version": "npm run preversion && 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": "node ./src/generateVersion.js && rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles && vite build"
   },
   "author": "constructor.io",
   "license": "MIT",