@constructor-io/constructorio-ui-autocomplete 1.9.1 → 1.9.3

package/lib/cjs/{src/components → 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/{src/components → 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/{src/constants.js → 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.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_M57QS8SMPdLdLx4x';
 /// //////////////////////////////
@@ -97,6 +97,7 @@ exports.zeroStateDescription = `- when the text input field has no text, we call
 /// //////////////////////////////
 // Storybook Stories
 /// //////////////////////////////
+exports.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.`;
 exports.apiKeyDescription = `Pass an \`apiKey\` to request results from constructor's servers`;
 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
 
@@ -108,6 +109,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/{src/utils.js → utils.js}

@@ -1,10 +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 package_json_1 = require("../package.json");
+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));
@@ -89,7 +89,7 @@ const getCioClient = (apiKey) => {
         return new constructorio_client_javascript_1.default({
             apiKey,
             sendTrackingEvents: true,
-            version: `cio-ui-autocomplete-${package_json_1.version}`,
+            version: `cio-ui-autocomplete-${version_1.default}`,
         });
     }
     return null;
@@ -117,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.3';

package/lib/mjs/{src/components → 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/{src/components → 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/{src/constants.js → constants.js}

@@ -94,6 +94,7 @@ export const zeroStateDescription = `- when the text input field has no text, we
 /// //////////////////////////////
 // Storybook Stories
 /// //////////////////////////////
+export 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 const apiKeyDescription = `Pass an \`apiKey\` to request results from constructor's servers`;
 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
 
@@ -105,6 +106,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/{src/utils.js → utils.js}

@@ -1,6 +1,6 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { isCustomSection } from './typeGuards';
-import { version as packageVersion } from '../package.json';
+import version from './version';
 export const getItemPosition = ({ item, items }) => {
     const index = items.findIndex((itemInFlatList) => itemInFlatList?.id === item?.id);
     const sectionId = items[index]?.section;
@@ -74,7 +74,7 @@ export const getCioClient = (apiKey) => {
         return new ConstructorIOClient({
             apiKey,
             sendTrackingEvents: true,
-            version: `cio-ui-autocomplete-${packageVersion}`,
+            version: `cio-ui-autocomplete-${version}`,
         });
     }
     return null;
@@ -100,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.3';

package/lib/types/{src/components → 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/{src/constants.d.ts → constants.d.ts}

@@ -5,6 +5,7 @@ export declare const hookDescription = "- import `useCioAutocomplete` and call t
 export declare const sectionsDescription = "- by default, typing a query will fetch data for search suggestions and Products\n- to override this, pass an array of sections objects\n- the order of the objects in the `sections` array determines the order of the results\n- each section object must have an `identifier`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8\n\nWhen no values are passed for the `sections` argument, the following defaults are used:\n\n```jsx\n[\n  {\n    identifier: 'Search Suggestions',\n    type: 'autocomplete',\n    numResults: 8\n  },\n  {\n    identifier: 'Products',\n    type: 'autocomplete',\n    numResults: 8\n  }\n]\n```\n";
 export declare const userEventsDescription = "- pass callback functions to respond to user events\n- if provided, the onFocus callback function will be called each time the user focuses on the text input field\n- if provided, the onChange callback function will be called each time the user changes the value in the text input field\n- the onSubmit callback function will be called each time the user submits the form\n- the user can submit the form by pressing the enter key in the text input field, clicking a submit button within the form, clicking on a result, or pressing enter while a result is selected\n\n> \u26A0\uFE0F NOTE \u26A0\uFE0F Use the Storybook Canvas Actions tab to explore the behavior of all of these `OnEvent` callback functions as you interact with our Default User Events example rendered in the Canvas. In the stories below, Storybook Canvas Actions have been disabled to focus on each of these callback functions in isolation. Each of the example callback functions in the stories below log output to the console tab of the browser's developer tools.";
 export declare const zeroStateDescription = "- when the text input field has no text, we call this zero state\n- by default, the autocomplete shows nothing in the menu it's for zero state\n- to show zero state results, pass an array of section objects for `zeroStateSections`\n- when `zeroStateSections` has sections, the menu will open on user focus by default\n- set `openOnFocus` to false, to only show `zeroStateSections` after user has typed and then cleared the text input, instead of as soon as the user focuses on the text input\n- the order of the objects in the `zeroStateSections` array determines the order of the results\n- each section object must have an `identifier`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8";
+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 placeholderDescription = "Pass a `placeholder` to override the default input field placeholder text shown to users before they start typing their query";
@@ -14,6 +15,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/{src/types.d.ts → 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/{src/utils.d.ts → 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.3";
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "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",

package/lib/cjs/package.json

@@ -1,103 +0,0 @@
-{
-    "name": "@constructor-io/constructorio-ui-autocomplete",
-    "version": "1.9.1",
-    "description": "Constructor.io Autocomplete UI library for web applications",
-    "main": "lib/cjs/index.js",
-    "module": "lib/mjs/index.js",
-    "exports": {
-        "./styles.css": {
-            "import": "./lib/styles.css",
-            "require": "./lib/styles.css"
-        },
-        ".": {
-            "import": "./lib/mjs/index.js",
-            "require": "./lib/cjs/index.js"
-        },
-        "./constructorio-ui-autocomplete-bundled": {
-            "import": "./dist/constructorio-ui-autocomplete-bundled.js",
-            "require": "./dist/constructorio-ui-autocomplete-bundled.js"
-        }
-    },
-    "homepage": "https://github.com/Constructor-io/constructorio-ui-autocomplete#readme",
-    "types": "lib/types/index.d.ts",
-    "scripts": {
-        "lint": "eslint src --ext js,ts,jsx,tsx",
-        "check-types": "npx tsc --noEmit",
-        "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause'",
-        "copy-styles": "cp src/styles.css lib/styles.css",
-        "prepare": "husky install",
-        "dev": "storybook dev -p 6006",
-        "storybook:ci": "storybook dev --ci --quiet -p 6006",
-        "test-storybook": "test-storybook",
-        "test-storybook:watch": "test-storybook --watch",
-        "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",
-        "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"
-    },
-    "author": "constructor.io",
-    "license": "MIT",
-    "volta": {
-        "node": "16.17.0",
-        "npm": "8.19.2"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/Constructor-io/constructorio-ui-autocomplete.git"
-    },
-    "bugs": {
-        "url": "https://github.com/Constructor-io/constructorio-ui-autocomplete/issues"
-    },
-    "files": [
-        "lib/**/*",
-        "dist/constructorio-ui-autocomplete-bundled.js"
-    ],
-    "engines": {
-        "node": ">=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/testing-library": "^0.1.0",
-        "@types/react": "^18.0.20",
-        "@types/react-dom": "^18.0.6",
-        "@typescript-eslint/eslint-plugin": "^5.38.0",
-        "@typescript-eslint/parser": "^5.38.0",
-        "eslint": "^8.23.1",
-        "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-airbnb-typescript": "^17.0.0",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsx-a11y": "^6.6.1",
-        "eslint-plugin-prettier": "^4.2.1",
-        "eslint-plugin-react": "^7.31.11",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-storybook": "^0.6.12",
-        "husky": "^8.0.1",
-        "license-checker": "^25.0.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "start-server-and-test": "^1.15.2",
-        "storybook": "^7.0.14",
-        "typescript": "^4.8.3",
-        "vite": "^4.3.7",
-        "vite-plugin-css-injected-by-js": "^3.1.1",
-        "webpack": "^5.75.0"
-    },
-    "peerDependencies": {
-        "@constructor-io/constructorio-client-javascript": "^2.36.0",
-        "downshift": "^7.2.1",
-        "react": ">=16.12.0",
-        "react-dom": ">=16.12.0",
-        "tslib": "^2.5.0"
-    }
-}

package/lib/mjs/package.json

@@ -1,103 +0,0 @@
-{
-    "name": "@constructor-io/constructorio-ui-autocomplete",
-    "version": "1.9.1",
-    "description": "Constructor.io Autocomplete UI library for web applications",
-    "main": "lib/cjs/index.js",
-    "module": "lib/mjs/index.js",
-    "exports": {
-        "./styles.css": {
-            "import": "./lib/styles.css",
-            "require": "./lib/styles.css"
-        },
-        ".": {
-            "import": "./lib/mjs/index.js",
-            "require": "./lib/cjs/index.js"
-        },
-        "./constructorio-ui-autocomplete-bundled": {
-            "import": "./dist/constructorio-ui-autocomplete-bundled.js",
-            "require": "./dist/constructorio-ui-autocomplete-bundled.js"
-        }
-    },
-    "homepage": "https://github.com/Constructor-io/constructorio-ui-autocomplete#readme",
-    "types": "lib/types/index.d.ts",
-    "scripts": {
-        "lint": "eslint src --ext js,ts,jsx,tsx",
-        "check-types": "npx tsc --noEmit",
-        "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause'",
-        "copy-styles": "cp src/styles.css lib/styles.css",
-        "prepare": "husky install",
-        "dev": "storybook dev -p 6006",
-        "storybook:ci": "storybook dev --ci --quiet -p 6006",
-        "test-storybook": "test-storybook",
-        "test-storybook:watch": "test-storybook --watch",
-        "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",
-        "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"
-    },
-    "author": "constructor.io",
-    "license": "MIT",
-    "volta": {
-        "node": "16.17.0",
-        "npm": "8.19.2"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/Constructor-io/constructorio-ui-autocomplete.git"
-    },
-    "bugs": {
-        "url": "https://github.com/Constructor-io/constructorio-ui-autocomplete/issues"
-    },
-    "files": [
-        "lib/**/*",
-        "dist/constructorio-ui-autocomplete-bundled.js"
-    ],
-    "engines": {
-        "node": ">=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/testing-library": "^0.1.0",
-        "@types/react": "^18.0.20",
-        "@types/react-dom": "^18.0.6",
-        "@typescript-eslint/eslint-plugin": "^5.38.0",
-        "@typescript-eslint/parser": "^5.38.0",
-        "eslint": "^8.23.1",
-        "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-airbnb-typescript": "^17.0.0",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsx-a11y": "^6.6.1",
-        "eslint-plugin-prettier": "^4.2.1",
-        "eslint-plugin-react": "^7.31.11",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-storybook": "^0.6.12",
-        "husky": "^8.0.1",
-        "license-checker": "^25.0.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "start-server-and-test": "^1.15.2",
-        "storybook": "^7.0.14",
-        "typescript": "^4.8.3",
-        "vite": "^4.3.7",
-        "vite-plugin-css-injected-by-js": "^3.1.1",
-        "webpack": "^5.75.0"
-    },
-    "peerDependencies": {
-        "@constructor-io/constructorio-client-javascript": "^2.36.0",
-        "downshift": "^7.2.1",
-        "react": ">=16.12.0",
-        "react-dom": ">=16.12.0",
-        "tslib": "^2.5.0"
-    }
-}