@constructor-io/constructorio-ui-autocomplete 1.23.27 → 1.23.29

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const utils_1 = require("../../../utils");
+const format_1 = require("../../../utils/format");
 const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 const SectionItemsList_1 = tslib_1.__importDefault(require("../SectionItemsList/SectionItemsList"));
 const CloseIcon_1 = tslib_1.__importDefault(require("./CloseIcon"));
@@ -14,7 +14,7 @@ const DefaultRenderResults = ({ sections }) => sections === null || sections ===
             key = section.podId;
             break;
         case 'custom':
-            key = (0, utils_1.toKebabCase)(section.displayName);
+            key = (0, format_1.toKebabCase)(section.displayName);
             break;
         case 'autocomplete':
             key = section.indexSectionName;

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

@@ -5,7 +5,7 @@ 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");
+const helpers_1 = require("../../../utils/helpers");
 const SearchSuggestionItem_1 = tslib_1.__importDefault(require("./SearchSuggestionItem"));
 function SectionItem(props) {
     var _a, _b;
@@ -21,7 +21,7 @@ function SectionItem(props) {
     }
     else if ((0, typeGuards_1.isInGroupSuggestion)(item)) {
         defaultChildren = (react_1.default.createElement("p", { className: 'cio-term-in-group' },
-            (0, utils_1.translate)('in', translations),
+            (0, helpers_1.translate)('in', translations),
             ' ',
             react_1.default.createElement(SectionItemText_1.default, { item: item, query: query, highlightSearchTerm: displaySearchTermHighlights })));
     }

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

@@ -3,11 +3,11 @@ 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");
+const helpers_1 = require("../../../utils/helpers");
 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 queryRegex = new RegExp(`(${(0, helpers_1.escapeRegExp)(query)})`, 'gi');
         const queryIncludedInText = queryRegex.test(itemText);
         if (query && queryIncludedInText) {
             const splitText = itemText.split(queryRegex);

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

@@ -4,7 +4,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const SectionItem_1 = tslib_1.__importDefault(require("../SectionItem/SectionItem"));
 const CustomSectionItem_1 = tslib_1.__importDefault(require("../SectionItem/CustomSectionItem"));
-const utils_1 = require("../../../utils");
+const helpers_1 = require("../../../utils/helpers");
+const format_1 = require("../../../utils/format");
 const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 const NoResults_1 = tslib_1.__importDefault(require("../AutocompleteResults/NoResults"));
 // eslint-disable-next-line func-names
@@ -34,13 +35,13 @@ const DefaultRenderSectionItemsList = function ({ section }) {
     // Display no results message
     if (!((_a = section === null || section === void 0 ? void 0 : section.data) === null || _a === void 0 ? void 0 : _a.length) && displayNoResultsMessage)
         return (react_1.default.createElement("li", Object.assign({}, getSectionProps(section)),
-            react_1.default.createElement("h5", { className: 'cio-section-name cio-sectionName', "aria-hidden": true }, (0, utils_1.camelToStartCase)(sectionTitle)),
+            react_1.default.createElement("h5", { className: 'cio-section-name cio-sectionName', "aria-hidden": true }, (0, format_1.camelToStartCase)(sectionTitle)),
             react_1.default.createElement(NoResults_1.default, null)));
     if (!((_b = section === null || section === void 0 ? void 0 : section.data) === null || _b === void 0 ? void 0 : _b.length))
         return null;
     // @deprecated `cio-sectionName` will be removed in the next major release
     return (react_1.default.createElement("li", Object.assign({}, getSectionProps(section)),
-        react_1.default.createElement("h5", { className: 'cio-section-name cio-sectionName', "aria-hidden": true }, (0, utils_1.camelToStartCase)(sectionTitle)),
+        react_1.default.createElement("h5", { className: 'cio-section-name cio-sectionName', "aria-hidden": true }, (0, format_1.camelToStartCase)(sectionTitle)),
         react_1.default.createElement("ul", { className: 'cio-section-items', role: 'none' }, (_c = section === null || section === void 0 ? void 0 : section.data) === null || _c === void 0 ? void 0 : _c.map((item) => {
             if (typeof (section === null || section === void 0 ? void 0 : section.renderItem) === 'function') {
                 return (react_1.default.createElement(CustomSectionItem_1.default, { renderItem: section.renderItem, item: item, query: query, key: item.id }));
@@ -50,7 +51,7 @@ const DefaultRenderSectionItemsList = function ({ section }) {
         displayShowAllResultsButton &&
             type === 'autocomplete' &&
             section.indexSectionName === 'Products' && (react_1.default.createElement("div", { className: 'cio-section-footer' },
-            react_1.default.createElement("button", { "data-cnstrc-search-submit-btn": true, className: 'cio-show-all-results-button', type: 'button', onClick: onSubmit }, (0, utils_1.translate)('show all results', translations))))));
+            react_1.default.createElement("button", { "data-cnstrc-search-submit-btn": true, className: 'cio-show-all-results-button', type: 'button', onClick: onSubmit }, (0, helpers_1.translate)('show all results', translations))))));
 };
 function SectionItemsList(props) {
     const { section, children = DefaultRenderSectionItemsList } = props;

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -7,7 +7,10 @@ const react_1 = require("react");
 const useCioClient_1 = tslib_1.__importDefault(require("./useCioClient"));
 const useDownShift_1 = tslib_1.__importDefault(require("./useDownShift"));
 const usePrevious_1 = tslib_1.__importDefault(require("./usePrevious"));
-const utils_1 = require("../utils");
+const helpers_1 = require("../utils/helpers");
+const format_1 = require("../utils/format");
+const tracking_1 = require("../utils/tracking");
+const features_1 = require("../utils/features");
 const useConsoleErrors_1 = tslib_1.__importDefault(require("./useConsoleErrors"));
 const useSections_1 = tslib_1.__importDefault(require("./useSections"));
 const useRecommendationsObserver_1 = tslib_1.__importDefault(require("./useRecommendationsObserver"));
@@ -32,9 +35,9 @@ const useCioAutocomplete = (options) => {
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient, cioJsClientOptions });
     // Get autocomplete sections (autocomplete + recommendations + custom)
     const { fetchRecommendationResults, activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
-    const features = (0, react_1.useMemo)(() => (0, utils_1.getFeatures)(request), [request]);
+    const features = (0, react_1.useMemo)(() => (0, features_1.getFeatures)(request), [request]);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
-    const items = (0, react_1.useMemo)(() => (0, utils_1.getItemsForActiveSections)(activeSectionsWithData), [activeSectionsWithData]);
+    const items = (0, react_1.useMemo)(() => (0, helpers_1.getItemsForActiveSections)(activeSectionsWithData), [activeSectionsWithData]);
     const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = (0, useDownShift_1.default)(Object.assign({ setQuery,
         items,
         onSubmit,
@@ -44,7 +47,7 @@ const useCioAutocomplete = (options) => {
     // Log console errors
     (0, useConsoleErrors_1.default)(sections, activeSections);
     // Track recommendation view
-    (0, useRecommendationsObserver_1.default)(isOpen, activeSectionsWithData, cioClient, utils_1.trackRecommendationView);
+    (0, useRecommendationsObserver_1.default)(isOpen, activeSectionsWithData, cioClient, tracking_1.trackRecommendationView);
     return {
         query,
         sections: activeSectionsWithData,
@@ -58,7 +61,7 @@ const useCioAutocomplete = (options) => {
         closeMenu,
         getItemProps: (item) => {
             var _a;
-            const { index, sectionId } = (0, utils_1.getItemPosition)({ item, items });
+            const { index, sectionId } = (0, helpers_1.getItemPosition)({ item, items });
             const sectionItemTestId = `cio-item-${sectionId === null || sectionId === void 0 ? void 0 : sectionId.replace(' ', '')}`;
             return Object.assign(Object.assign({}, getItemPropsDownShift({ item, index })), { 
                 // @deprecated `sectionItemTestId` will be removed as a className in the next major version
@@ -104,7 +107,7 @@ const useCioAutocomplete = (options) => {
                         onSubmit({ query });
                     }
                     try {
-                        (0, utils_1.trackSearchSubmit)(cioClient, query, { originalQuery: query });
+                        (0, tracking_1.trackSearchSubmit)(cioClient, query, { originalQuery: query });
                     }
                     catch (error) {
                         // eslint-disable-next-line no-console
@@ -123,7 +126,7 @@ const useCioAutocomplete = (options) => {
                     onSubmit({ query });
                 }
                 try {
-                    (0, utils_1.trackSearchSubmit)(cioClient, query, { originalQuery: query });
+                    (0, tracking_1.trackSearchSubmit)(cioClient, query, { originalQuery: query });
                 }
                 catch (error) {
                     // eslint-disable-next-line no-console
@@ -142,7 +145,7 @@ const useCioAutocomplete = (options) => {
                 const { type } = section;
                 let sectionTitle;
                 const indexSectionName = type !== 'custom' && section.indexSectionName
-                    ? (0, utils_1.toKebabCase)(section.indexSectionName)
+                    ? (0, format_1.toKebabCase)(section.indexSectionName)
                     : '';
                 switch (type) {
                     case 'recommendations':
@@ -165,7 +168,7 @@ const useCioAutocomplete = (options) => {
             // ... they should be styled accordingly
             const sectionListingType = (0, typeGuards_1.isCustomSection)(section)
                 ? 'custom'
-                : (0, utils_1.toKebabCase)(section.indexSectionName || ((_a = section.data[0]) === null || _a === void 0 ? void 0 : _a.section) || 'Products');
+                : (0, format_1.toKebabCase)(section.indexSectionName || ((_a = section.data[0]) === null || _a === void 0 ? void 0 : _a.section) || 'Products');
             const attributes = {
                 className: `cio-section cio-section-${sectionListingType} ${getDeprecatedClassNames()}`,
                 ref: section.ref,

package/lib/cjs/hooks/useCioClient.js

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

package/lib/cjs/hooks/useDownShift.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const downshift_1 = require("downshift");
-const utils_1 = require("../utils");
+const tracking_1 = require("../utils/tracking");
 let idCounter = 0;
 const useDownShift = (_a) => {
     var { setQuery, items, onSubmit, cioClient, previousQuery = '' } = _a, rest = tslib_1.__rest(_a, ["setQuery", "items", "onSubmit", "cioClient", "previousQuery"]);
@@ -16,7 +16,7 @@ const useDownShift = (_a) => {
                     try {
                         if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.section) === 'Search Suggestions') {
                             setQuery(selectedItem.value || '');
-                            (0, utils_1.trackSearchSubmit)(cioClient, selectedItem.value, {
+                            (0, tracking_1.trackSearchSubmit)(cioClient, selectedItem.value, {
                                 originalQuery: previousQuery,
                             });
                         }
@@ -37,7 +37,7 @@ const useDownShift = (_a) => {
                             // This does not apply to custom user defined sections that aren't part of Constructor index
                         }
                         else if (selectedItem.result_id) {
-                            (0, utils_1.trackAutocompleteSelect)(cioClient, selectedItem.value, {
+                            (0, tracking_1.trackAutocompleteSelect)(cioClient, selectedItem.value, {
                                 originalQuery: previousQuery,
                                 section: selectedItem.section,
                             });

package/lib/cjs/hooks/useSections/useActiveSectionsWithData.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable max-params */
 const react_1 = require("react");
-const utils_1 = require("../../utils");
+const helpers_1 = require("../../utils/helpers");
 function useActiveSectionsWithData(sectionsResults, activeSections, sectionsRefs, query, podsData) {
     const [activeSectionsWithData, setActiveSectionsWithData] = (0, react_1.useState)([]);
     // Add to active sections the results data and refs when autocomplete results or recommendation results fetched
     (0, react_1.useEffect)(() => {
-        const activeSectionsWithDataValue = (0, utils_1.getActiveSectionsWithData)(activeSections, sectionsResults, sectionsRefs, podsData);
+        const activeSectionsWithDataValue = (0, helpers_1.getActiveSectionsWithData)(activeSections, sectionsResults, sectionsRefs, podsData);
         if (activeSectionsWithDataValue.length || !query) {
             setActiveSectionsWithData(activeSectionsWithDataValue);
         }

package/lib/cjs/hooks/useSections/useRemoveSections.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable max-params */
 const react_1 = require("react");
-const utils_1 = require("../../utils");
+const features_1 = require("../../utils/features");
 function useRemoveSections(sections, podsData, setActiveSections, showZeroStateSections, zeroStateSections) {
     // Remove sections if necessary
     (0, react_1.useEffect)(() => {
         var _a, _b;
-        const features = (0, utils_1.getFeatures)((_b = (_a = Object.values(podsData || {})) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.request);
+        const features = (0, features_1.getFeatures)((_b = (_a = Object.values(podsData || {})) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.request);
         if (showZeroStateSections) {
             if (!features.featureDisplayZeroStateRecommendations) {
                 setActiveSections([]);

package/lib/cjs/{beaconUtils.js → utils/beaconUtils.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.storeRecentAction = exports.getLastAction = exports.getRecentActions = exports.storeRecentSearch = exports.getRecentSearches = exports.storageGetArray = exports.storageGetItem = exports.cleanTerm = exports.storageRemoveItem = exports.storageSetItem = exports.getStorageEngine = exports.CONSTANTS = void 0;
+exports.storeRecentAction = exports.getLastAction = exports.getRecentActions = exports.storeRecentSearch = exports.getRecentSearches = exports.cleanTerm = exports.CONSTANTS = void 0;
 // eslint-disable-next-line import/no-cycle
-const utils_1 = require("./utils");
+const storage_1 = require("./storage");
 exports.CONSTANTS = {
     SEARCH_SUBMIT: 'SEARCH_SUBMIT',
     RECENT_ACTIONS_STORAGE_KEY: {
@@ -20,38 +20,6 @@ exports.CONSTANTS = {
     RECENT_SEARCHES_STORAGE_COUNT: 100,
     RECENT_ACTION_STORAGE_COUNT: 5,
 };
-// Return storage engine based on scope
-const getStorageEngine = (scope) => {
-    if (scope === 'local') {
-        return localStorage;
-    }
-    return sessionStorage;
-};
-exports.getStorageEngine = getStorageEngine;
-// Set item in storage
-const storageSetItem = (key, value) => {
-    try {
-        const storageEngine = (0, exports.getStorageEngine)(key.scope);
-        return storageEngine.setItem(key.key, value);
-    }
-    catch (e) {
-        (0, utils_1.logger)(`storageSetItem error: ${e}`);
-        return null;
-    }
-};
-exports.storageSetItem = storageSetItem;
-// Remove item in storage
-const storageRemoveItem = (key) => {
-    try {
-        const storageEngine = (0, exports.getStorageEngine)(key.scope);
-        return storageEngine.removeItem(key.key);
-    }
-    catch (e) {
-        (0, utils_1.logger)(`storageRemoveItem error: ${e}`);
-        return null;
-    }
-};
-exports.storageRemoveItem = storageRemoveItem;
 /*
  * Use the text content of the resulting HTML node(s) created from the
  * term
@@ -69,38 +37,11 @@ const cleanTerm = (term) => {
     return texts.join('');
 };
 exports.cleanTerm = cleanTerm;
-// Retrieves item from storage for key
-const storageGetItem = (key) => {
-    try {
-        const storageEngine = (0, exports.getStorageEngine)(key.scope);
-        return storageEngine.getItem(key.key);
-    }
-    catch (e) {
-        (0, utils_1.logger)(`storageGetItem error: ${e}`);
-        return null;
-    }
-};
-exports.storageGetItem = storageGetItem;
-// Retrieve array from storage
-const storageGetArray = (key) => {
-    const item = (0, exports.storageGetItem)(key);
-    if (item) {
-        try {
-            const array = JSON.parse(item);
-            return array;
-        }
-        catch (e) {
-            (0, utils_1.logger)(`storageGetArray error: ${e}`);
-        }
-    }
-    return null;
-};
-exports.storageGetArray = storageGetArray;
 /*
  * Returns a list of recent searches
  */
 const getRecentSearches = () => {
-    const recentSearches = (0, exports.storageGetArray)(exports.CONSTANTS.RECENT_SEARCHES_STORAGE_KEY) || [];
+    const recentSearches = (0, storage_1.storageGetArray)(exports.CONSTANTS.RECENT_SEARCHES_STORAGE_KEY) || [];
     // upgrade the array to store timestamps if it isn't already
     recentSearches.forEach((item, i) => {
         if (typeof item === 'string') {
@@ -139,14 +80,14 @@ const storeRecentSearch = (term, suggestionData) => {
         while (recentSearches.length > exports.CONSTANTS.RECENT_SEARCHES_STORAGE_COUNT) {
             recentSearches.shift();
         }
-        (0, exports.storageSetItem)(exports.CONSTANTS.RECENT_SEARCHES_STORAGE_KEY, JSON.stringify(recentSearches));
+        (0, storage_1.storageSetItem)(exports.CONSTANTS.RECENT_SEARCHES_STORAGE_KEY, JSON.stringify(recentSearches));
     }
 };
 exports.storeRecentSearch = storeRecentSearch;
 /*
  * Returns a list of recent actions
  */
-const getRecentActions = () => (0, exports.storageGetArray)(exports.CONSTANTS.RECENT_ACTIONS_STORAGE_KEY) || [];
+const getRecentActions = () => (0, storage_1.storageGetArray)(exports.CONSTANTS.RECENT_ACTIONS_STORAGE_KEY) || [];
 exports.getRecentActions = getRecentActions;
 /*
  * Returns the last action
@@ -177,7 +118,7 @@ const storeRecentAction = (action) => {
         if (recentActions.length > exports.CONSTANTS.RECENT_ACTION_STORAGE_COUNT) {
             recentActions = recentActions.slice(-1 * exports.CONSTANTS.RECENT_ACTION_STORAGE_COUNT);
         }
-        (0, exports.storageSetItem)(exports.CONSTANTS.RECENT_ACTIONS_STORAGE_KEY, JSON.stringify(recentActions));
+        (0, storage_1.storageSetItem)(exports.CONSTANTS.RECENT_ACTIONS_STORAGE_KEY, JSON.stringify(recentActions));
     }
 };
 exports.storeRecentAction = storeRecentAction;

package/lib/cjs/utils/features.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFeatures = void 0;
+const storage_1 = require("./storage");
+const AUTOSUGGEST_CUSTOM_UI_VARIANTS = [
+    'custom_autosuggest_ui_result_count',
+    'custom_autosuggest_ui_image',
+    'custom_autosuggest_ui_image_result_count',
+    'custom_autosuggest_ui_disable_recommendations_in_zero_state',
+];
+const AUTOSUGGEST_CUSTOM_UI_STORAGE_KEY = {
+    scope: 'session',
+    key: '_constructorio_custom_autosuggest_ui',
+};
+const isCustomAutosuggestUiVariant = (variant) => AUTOSUGGEST_CUSTOM_UI_VARIANTS.includes(variant);
+const getCustomUiVariantFromStorage = () => {
+    const item = (0, storage_1.storageGetItem)(AUTOSUGGEST_CUSTOM_UI_STORAGE_KEY);
+    return item && isCustomAutosuggestUiVariant(item) ? item : null;
+};
+// eslint-disable-next-line import/prefer-default-export
+function getFeatures(request) {
+    var _a, _b, _c, _d;
+    let featureDisplaySearchSuggestionImages = false;
+    let featureDisplaySearchSuggestionResultCounts = false;
+    let featureDisplayZeroStateRecommendations = true;
+    let customAutosuggestUi = null;
+    if (((_a = request === null || request === void 0 ? void 0 : request.features) === null || _a === void 0 ? void 0 : _a.custom_autosuggest_ui) === true &&
+        isCustomAutosuggestUiVariant((_b = request === null || request === void 0 ? void 0 : request.feature_variants) === null || _b === void 0 ? void 0 : _b.custom_autosuggest_ui)) {
+        customAutosuggestUi = (_d = (_c = request === null || request === void 0 ? void 0 : request.feature_variants) === null || _c === void 0 ? void 0 : _c.custom_autosuggest_ui) !== null && _d !== void 0 ? _d : null;
+    }
+    // If a variant is set in the session storage, override the request variant
+    const customVariantFromStorage = getCustomUiVariantFromStorage();
+    if (customVariantFromStorage) {
+        customAutosuggestUi = customVariantFromStorage;
+    }
+    if (customAutosuggestUi !== null) {
+        switch (customAutosuggestUi) {
+            case 'custom_autosuggest_ui_result_count':
+                featureDisplaySearchSuggestionResultCounts = true;
+                break;
+            case 'custom_autosuggest_ui_image':
+                featureDisplaySearchSuggestionImages = true;
+                break;
+            case 'custom_autosuggest_ui_image_result_count':
+                featureDisplaySearchSuggestionImages = true;
+                featureDisplaySearchSuggestionResultCounts = true;
+                break;
+            case 'custom_autosuggest_ui_disable_recommendations_in_zero_state':
+                featureDisplayZeroStateRecommendations = false;
+                break;
+            default:
+                break;
+        }
+    }
+    return {
+        featureDisplaySearchSuggestionImages,
+        featureDisplaySearchSuggestionResultCounts,
+        featureDisplayZeroStateRecommendations,
+    };
+}
+exports.getFeatures = getFeatures;

package/lib/cjs/utils/format.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringifyWithDefaults = exports.toKebabCase = exports.camelToStartCase = void 0;
+const helpers_1 = require("./helpers");
+const camelToStartCase = (camelCaseString) => camelCaseString
+    // insert a space between lower & upper
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    // space before last upper in a sequence followed by lower
+    .replace(/\b([A-Z]+)([A-Z])([a-z])/, '$1 $2$3')
+    // uppercase the first letter
+    .replace(/([a-zA-Z])/, (str) => str.toUpperCase());
+exports.camelToStartCase = camelToStartCase;
+const toKebabCase = (str) => str
+    .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase();
+exports.toKebabCase = toKebabCase;
+const stringifyWithDefaults = (obj) => {
+    // Stringify non-function values normally. Add a template block for functions to be replaced later
+    let res = JSON.stringify(obj, (key, value) => (value instanceof Function ? `${key}_CODE` : value), '  ');
+    // Replace template blocks with function strings
+    Array.from(res.matchAll(/"(\w*)_CODE"/g)).forEach((match) => {
+        const [codePlaceholder, key] = match;
+        const functionString = helpers_1.functionStrings[key];
+        if (functionString) {
+            res = res.replaceAll(codePlaceholder, functionString);
+        }
+        else {
+            console.error(`Function string for ${key} not found.`); // eslint-disable-line
+        }
+    });
+    return res;
+};
+exports.stringifyWithDefaults = stringifyWithDefaults;

package/lib/cjs/utils/helpers.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logger = exports.translate = exports.getItemsForActiveSections = exports.escapeRegExp = exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.getItemPosition = void 0;
+const tslib_1 = require("tslib");
+const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
+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));
+    const sectionId = (_a = items[index]) === null || _a === void 0 ? void 0 : _a.section;
+    return { sectionId, index };
+};
+exports.getItemPosition = getItemPosition;
+function clearConstructorRequests() {
+    var _a;
+    // eslint-disable-next-line
+    if ((_a = window.localStorage) === null || _a === void 0 ? void 0 : _a._constructorio_requests) {
+        window.localStorage.removeItem('_constructorio_requests');
+    }
+}
+exports.clearConstructorRequests = clearConstructorRequests;
+// Function to emulate pausing between interactions
+function sleep(ms) {
+    // eslint-disable-next-line
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+exports.sleep = sleep;
+// More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+const getStoryParams = (storyCode, templateCode, importCode) => {
+    const code = `
+${importCode}
+${storyCode}
+${templateCode}
+`;
+    return {
+        docs: {
+            source: {
+                code,
+                language: 'jsx',
+                format: true,
+                type: 'code',
+            },
+        },
+    };
+};
+exports.getStoryParams = getStoryParams;
+exports.functionStrings = {
+    onSubmit: `(submitEvent) => console.dir(submitEvent)`,
+    renderItem: `({ item, query, getItemProps }) => (
+                      <div {...getItemProps(item)}>
+                          <a href={item.data?.url}>
+                            <h3>{item.value}</h3>
+                            <img src={item.data?.image_url} alt={item.value} />
+                          </a>
+                          <p>{item.data?.price}</p>
+                      </div>
+                    )`,
+};
+const disableStoryActions = (story) => {
+    // eslint-disable-next-line
+    story.parameters.actions = { argTypesRegex: null };
+};
+exports.disableStoryActions = disableStoryActions;
+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;
+    }
+    return null;
+};
+exports.getCioClient = getCioClient;
+const getActiveSectionsWithData = (activeSections, sectionsResults, sectionsRefs, podsData) => {
+    const activeSectionsWithData = [];
+    const getSectionData = (sectionConfig) => {
+        const { type } = sectionConfig;
+        let sectionData;
+        switch (type) {
+            case 'recommendations':
+                sectionData = sectionsResults[sectionConfig.podId];
+                break;
+            case 'custom':
+                // Copy id from data to the top level
+                sectionData = sectionConfig.data.map((item) => {
+                    var _a;
+                    return (Object.assign(Object.assign({}, item), { id: (item === null || item === void 0 ? void 0 : item.id) || ((_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.id) }));
+                });
+                break;
+            default:
+                // Autocomplete
+                sectionData = sectionsResults[sectionConfig.indexSectionName];
+        }
+        return sectionData;
+    };
+    activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((sectionConfig, index) => {
+        const sectionData = getSectionData(sectionConfig);
+        if (Array.isArray(sectionData)) {
+            const section = Object.assign(Object.assign({}, sectionConfig), { data: sectionData });
+            if (sectionConfig.type === 'recommendations') {
+                section.displayName =
+                    sectionConfig.displayName || podsData[sectionConfig.podId].displayName;
+            }
+            // If ref passed as part of `SectionConfiguration`, use it.
+            // Otherwise, use the ref from our library generated refs array
+            const userDefinedSectionRef = sectionConfig.ref;
+            const libraryGeneratedSectionRef = sectionsRefs.current[index];
+            section.ref = userDefinedSectionRef || libraryGeneratedSectionRef;
+            activeSectionsWithData.push(section);
+        }
+    });
+    return activeSectionsWithData;
+};
+exports.getActiveSectionsWithData = getActiveSectionsWithData;
+const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+exports.escapeRegExp = escapeRegExp;
+const getItemsForActiveSections = (activeSectionsWithData) => {
+    const items = [];
+    activeSectionsWithData === null || activeSectionsWithData === void 0 ? void 0 : activeSectionsWithData.forEach((config) => {
+        if (config === null || config === void 0 ? void 0 : config.data) {
+            items.push(...config.data);
+        }
+    });
+    return items;
+};
+exports.getItemsForActiveSections = getItemsForActiveSections;
+const translate = (word, translations) => {
+    const localTranslations = {
+        in: 'in',
+        'show all results': 'show all results',
+    };
+    if (translations)
+        return translations[word];
+    return localTranslations[word] || word;
+};
+exports.translate = translate;
+const logger = (error) => {
+    var _a;
+    try {
+        if (typeof process !== 'undefined' && ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.LOGGER)) {
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    }
+    catch (e) {
+        // process variable is not available and logger should not be active
+    }
+};
+exports.logger = logger;