@constructor-io/constructorio-ui-autocomplete 1.12.0 → 1.13.1

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

@@ -8,8 +8,9 @@ const SectionItemText_1 = tslib_1.__importDefault(require("./SectionItemText"));
 function SectionItem(props) {
     var _a, _b, _c, _d, _e;
     const { item, children, displaySearchTermHighlights } = props;
-    const { getItemProps, advancedParameters, query } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
-    const { displaySearchSuggestionImages, displaySearchSuggestionResultCounts } = advancedParameters || {};
+    const { getItemProps, advancedParameters, query, featureToggles } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const { featureDisplaySearchSuggestionImages, featureDisplaySearchSuggestionResultCounts } = featureToggles;
+    const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, } = advancedParameters || {};
     let defaultChildren;
     if ((0, typeGuards_1.isProduct)(item)) {
         defaultChildren = (react_1.default.createElement(react_1.default.Fragment, null,

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -26,7 +26,7 @@ const useCioAutocomplete = (options) => {
     const previousQuery = (0, usePrevious_1.default)(query);
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
     // Get autocomplete sections (autocomplete + recommendations + custom)
-    const { activeSections, activeSectionsWithData, zeroStateActiveSections } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
+    const { activeSections, activeSectionsWithData, zeroStateActiveSections, request } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
     const items = (0, useItems_1.default)(activeSectionsWithData);
     const downshift = (0, useDownShift_1.default)({ setQuery, items, onSubmit, cioClient, previousQuery });
@@ -36,6 +36,8 @@ const useCioAutocomplete = (options) => {
     return {
         query,
         sections: activeSectionsWithData,
+        request,
+        featureToggles: (0, utils_1.getSearchSuggestionFeatures)(request),
         isOpen: isOpen && (items === null || items === void 0 ? void 0 : items.length) > 0,
         getMenuProps: () => (Object.assign(Object.assign({}, getMenuProps()), { className: 'cio-results', 'data-testid': 'cio-results' })),
         getLabelProps,

package/lib/cjs/hooks/useDebouncedFetchSections.js

@@ -28,10 +28,13 @@ const transformResponse = (response, options) => {
             }
         });
     });
-    return newSectionsData;
+    return { sectionsData: newSectionsData, request: response === null || response === void 0 ? void 0 : response.request };
 };
 const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advancedParameters) => {
-    const [sectionsData, setSectionsData] = (0, react_1.useState)({});
+    const [sectionsData, setSectionsData] = (0, react_1.useState)({
+        sectionsData: {},
+        request: {},
+    });
     const debouncedSearchTerm = (0, useDebounce_1.default)(query, advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.debounce);
     const { numTermsWithGroupSuggestions = 0, numGroupsSuggestedPerTerm = 0 } = advancedParameters || {};
     const autocompleteParameters = (0, react_1.useMemo)(() => {
@@ -60,7 +63,7 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
                 }
             }
             else if (!debouncedSearchTerm) {
-                setSectionsData({});
+                setSectionsData({ sectionsData: {}, request: {} });
             }
         }))();
     }, [

package/lib/cjs/hooks/useDownShift.js

@@ -9,7 +9,9 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
     onSelectedItemChange({ selectedItem }) {
         var _a;
         if (selectedItem) {
-            setQuery(selectedItem.value || '');
+            if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.section) === 'Search Suggestions') {
+                setQuery(selectedItem.value || '');
+            }
             if (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) {
                 if (onSubmit)
                     onSubmit({ item: selectedItem, originalQuery: previousQuery });

package/lib/cjs/hooks/useSections.js

@@ -11,7 +11,7 @@ function useSections(query, cioClient, sections, zeroStateSections, advancedPara
     const autocompleteSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'autocomplete' || !config.type), [activeSections]);
     const recommendationsSections = activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'recommendations');
     // Fetch Autocomplete Results
-    const autocompleteResults = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
+    const { sectionsData: autocompleteResults, request } = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
     // Fetch Recommendations Results
     const recommendationsResults = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections);
     const sectionResults = Object.assign(Object.assign({}, autocompleteResults), recommendationsResults);
@@ -31,6 +31,7 @@ function useSections(query, cioClient, sections, zeroStateSections, advancedPara
         activeSections,
         activeSectionsWithData,
         zeroStateActiveSections,
+        request,
     };
 }
 exports.default = useSections;

package/lib/cjs/utils.js

@@ -1,10 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.escapeRegExp = exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getItemPosition = exports.getSearchSuggestionFeatures = void 0;
 const tslib_1 = require("tslib");
 const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
 const typeGuards_1 = require("./typeGuards");
 const version_1 = tslib_1.__importDefault(require("./version"));
+function getSearchSuggestionFeatures(request) {
+    var _a, _b;
+    let featureDisplaySearchSuggestionImages = false;
+    let featureDisplaySearchSuggestionResultCounts = false;
+    if (((_a = request === null || request === void 0 ? void 0 : request.features) === null || _a === void 0 ? void 0 : _a.custom_autosuggest_ui) === true) {
+        switch ((_b = request === null || request === void 0 ? void 0 : request.feature_variants) === null || _b === void 0 ? void 0 : _b.custom_autosuggest_ui) {
+            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;
+            default:
+                break;
+        }
+    }
+    return {
+        featureDisplaySearchSuggestionImages,
+        featureDisplaySearchSuggestionResultCounts,
+    };
+}
+exports.getSearchSuggestionFeatures = getSearchSuggestionFeatures;
 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));

package/lib/cjs/version.js

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

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

@@ -4,8 +4,9 @@ import { isProduct, isInGroupSuggestion, isSearchSuggestion } from '../../../typ
 import SectionItemText from './SectionItemText';
 export default function SectionItem(props) {
     const { item, children, displaySearchTermHighlights } = props;
-    const { getItemProps, advancedParameters, query } = useContext(CioAutocompleteContext);
-    const { displaySearchSuggestionImages, displaySearchSuggestionResultCounts } = advancedParameters || {};
+    const { getItemProps, advancedParameters, query, featureToggles } = useContext(CioAutocompleteContext);
+    const { featureDisplaySearchSuggestionImages, featureDisplaySearchSuggestionResultCounts } = featureToggles;
+    const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, } = advancedParameters || {};
     let defaultChildren;
     if (isProduct(item)) {
         defaultChildren = (React.createElement(React.Fragment, null,

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import useCioClient from './useCioClient';
 import useDownShift from './useDownShift';
 import usePrevious from './usePrevious';
-import { getItemPosition } from '../utils';
+import { getItemPosition, getSearchSuggestionFeatures } from '../utils';
 import useConsoleErrors from './useConsoleErrors';
 import useSections from './useSections';
 import useItems from './useItems';
@@ -22,7 +22,7 @@ const useCioAutocomplete = (options) => {
     const previousQuery = usePrevious(query);
     const cioClient = useCioClient({ apiKey, cioJsClient });
     // Get autocomplete sections (autocomplete + recommendations + custom)
-    const { activeSections, activeSectionsWithData, zeroStateActiveSections } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
+    const { activeSections, activeSectionsWithData, zeroStateActiveSections, request } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
     const items = useItems(activeSectionsWithData);
     const downshift = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery });
@@ -32,6 +32,8 @@ const useCioAutocomplete = (options) => {
     return {
         query,
         sections: activeSectionsWithData,
+        request,
+        featureToggles: getSearchSuggestionFeatures(request),
         isOpen: isOpen && items?.length > 0,
         getMenuProps: () => ({
             ...getMenuProps(),

package/lib/mjs/hooks/useDebouncedFetchSections.js

@@ -29,10 +29,13 @@ const transformResponse = (response, options) => {
             }
         });
     });
-    return newSectionsData;
+    return { sectionsData: newSectionsData, request: response?.request };
 };
 const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advancedParameters) => {
-    const [sectionsData, setSectionsData] = useState({});
+    const [sectionsData, setSectionsData] = useState({
+        sectionsData: {},
+        request: {},
+    });
     const debouncedSearchTerm = useDebounce(query, advancedParameters?.debounce);
     const { numTermsWithGroupSuggestions = 0, numGroupsSuggestedPerTerm = 0 } = advancedParameters || {};
     const autocompleteParameters = useMemo(() => {
@@ -66,7 +69,7 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections, advanc
                 }
             }
             else if (!debouncedSearchTerm) {
-                setSectionsData({});
+                setSectionsData({ sectionsData: {}, request: {} });
             }
         })();
     }, [

package/lib/mjs/hooks/useDownShift.js

@@ -6,7 +6,9 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
     itemToString: (item) => item?.value || '',
     onSelectedItemChange({ selectedItem }) {
         if (selectedItem) {
-            setQuery(selectedItem.value || '');
+            if (selectedItem?.section === 'Search Suggestions') {
+                setQuery(selectedItem.value || '');
+            }
             if (selectedItem?.value) {
                 if (onSubmit)
                     onSubmit({ item: selectedItem, originalQuery: previousQuery });

package/lib/mjs/hooks/useSections.js

@@ -8,7 +8,7 @@ export default function useSections(query, cioClient, sections, zeroStateSection
     const autocompleteSections = useMemo(() => activeSections?.filter((config) => config.type === 'autocomplete' || !config.type), [activeSections]);
     const recommendationsSections = activeSections?.filter((config) => config.type === 'recommendations');
     // Fetch Autocomplete Results
-    const autocompleteResults = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
+    const { sectionsData: autocompleteResults, request } = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
     // Fetch Recommendations Results
     const recommendationsResults = useFetchRecommendationPod(cioClient, recommendationsSections);
     const sectionResults = { ...autocompleteResults, ...recommendationsResults };
@@ -28,5 +28,6 @@ export default function useSections(query, cioClient, sections, zeroStateSection
         activeSections,
         activeSectionsWithData,
         zeroStateActiveSections,
+        request,
     };
 }

package/lib/mjs/utils.js

@@ -1,6 +1,30 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { isCustomSection } from './typeGuards';
 import version from './version';
+export function getSearchSuggestionFeatures(request) {
+    let featureDisplaySearchSuggestionImages = false;
+    let featureDisplaySearchSuggestionResultCounts = false;
+    if (request?.features?.custom_autosuggest_ui === true) {
+        switch (request?.feature_variants?.custom_autosuggest_ui) {
+            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;
+            default:
+                break;
+        }
+    }
+    return {
+        featureDisplaySearchSuggestionImages,
+        featureDisplaySearchSuggestionResultCounts,
+    };
+}
 export const getItemPosition = ({ item, items }) => {
     const index = items.findIndex((itemInFlatList) => itemInFlatList?.id === item?.id);
     const sectionId = items[index]?.section;

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.12.0';
+export default '1.13.0';

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

@@ -3,6 +3,11 @@ import { CioAutocompleteProps } from '../../types';
 export declare const CioAutocompleteContext: React.Context<{
     query: string;
     sections: import("../../types").Section[];
+    request: Partial<import("@constructor-io/constructorio-client-javascript/lib/types").AutocompleteRequestType>;
+    featureToggles: {
+        featureDisplaySearchSuggestionImages: boolean;
+        featureDisplaySearchSuggestionResultCounts: boolean;
+    };
     isOpen: boolean;
     getMenuProps: () => any;
     getLabelProps: (options?: import("downshift").UseComboboxGetLabelPropsOptions | undefined) => any;

package/lib/types/hooks/useCioAutocomplete.d.ts

@@ -4,6 +4,11 @@ export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
 declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     query: string;
     sections: import("../types").Section[];
+    request: Partial<import("@constructor-io/constructorio-client-javascript/lib/types").AutocompleteRequestType>;
+    featureToggles: {
+        featureDisplaySearchSuggestionImages: boolean;
+        featureDisplaySearchSuggestionResultCounts: boolean;
+    };
     isOpen: boolean;
     getMenuProps: () => any;
     getLabelProps: (options?: import("downshift").UseComboboxGetLabelPropsOptions | undefined) => any;

package/lib/types/hooks/useFetchRecommendationPod.d.ts

@@ -1,5 +1,5 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
-import { AutocompleteResultSections, RecommendationsSection } from '../types';
-declare const useFetchRecommendationPod: (cioClient: Nullable<ConstructorIOClient>, recommendationPods: RecommendationsSection[]) => AutocompleteResultSections;
+import { RecommendationsSection, SectionsData } from '../types';
+declare const useFetchRecommendationPod: (cioClient: Nullable<ConstructorIOClient>, recommendationPods: RecommendationsSection[]) => SectionsData;
 export default useFetchRecommendationPod;

package/lib/types/hooks/useSections.d.ts

@@ -5,4 +5,5 @@ export default function useSections(query: string, cioClient: Nullable<Construct
     activeSections: UserDefinedSection[];
     activeSectionsWithData: import("../types").Section[];
     zeroStateActiveSections: false | UserDefinedSection[] | undefined;
+    request: Partial<import("@constructor-io/constructorio-client-javascript/lib/types").AutocompleteRequestType>;
 };

package/lib/types/types.d.ts

@@ -1,7 +1,7 @@
 import { GetItemPropsOptions } from 'downshift';
 import { ReactNode } from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { IAutocompleteParameters, SearchSuggestion as SearchSuggestionFromClient, Product as ProductFromClient, Item as ItemBase } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { IAutocompleteParameters, SearchSuggestion as SearchSuggestionFromClient, Product as ProductFromClient, Item as ItemBase, AutocompleteRequestType } from '@constructor-io/constructorio-client-javascript/lib/types';
 export type { IAutocompleteParameters } from '@constructor-io/constructorio-client-javascript/lib/types';
 export type CioClientConfig = {
     apiKey?: string;
@@ -19,7 +19,7 @@ export type CioAutocompleteProps = CioClientConfig & {
     openOnFocus?: boolean;
     onSubmit: OnSubmit;
     onFocus?: () => void;
-    onChange?: (string: any) => void;
+    onChange?: (input: string) => void;
     placeholder?: string;
     children?: ReactNode;
     sections?: UserDefinedSection[];
@@ -47,9 +47,13 @@ export type GetAutocompleteResultsOptions = {
         numResults: number;
     };
 };
+export type SectionsData = {
+    [key: string]: Item[] | undefined;
+};
 /** CIO API Response Data */
 export type AutocompleteResultSections = {
-    [key: string]: Item[] | undefined;
+    sectionsData: SectionsData;
+    request: Partial<AutocompleteRequestType>;
 };
 type SectionType = 'autocomplete' | 'recommendations' | 'custom';
 export type SectionConfiguration = {

package/lib/types/utils.d.ts

@@ -1,5 +1,6 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { OnSubmit, Item, Section, UserDefinedSection, AutocompleteResultSections } from './types';
+import { AutocompleteRequestType } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { OnSubmit, Item, Section, UserDefinedSection, SectionsData } from './types';
 export type GetItemPosition = (args: {
     item: Item;
     items: Item[];
@@ -7,6 +8,10 @@ export type GetItemPosition = (args: {
     index: number;
     sectionId: string;
 };
+export declare function getSearchSuggestionFeatures(request: Partial<AutocompleteRequestType>): {
+    featureDisplaySearchSuggestionImages: boolean;
+    featureDisplaySearchSuggestionResultCounts: boolean;
+};
 export declare const getItemPosition: GetItemPosition;
 type CamelToStartCase = (camelCaseString: string) => string;
 export declare const camelToStartCase: CamelToStartCase;
@@ -32,6 +37,6 @@ export declare const stringifyWithDefaults: (obj: {
 }) => string;
 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 getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionResults: SectionsData) => Section[];
 export declare const escapeRegExp: (string: string) => string;
 export {};

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.0";
+declare const _default: "1.13.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -13,6 +13,10 @@
       "import": "./lib/mjs/index.js",
       "require": "./lib/cjs/index.js"
     },
+    "./cjs": {
+      "import": "./lib/cjs/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"
@@ -35,8 +39,8 @@
     "serve-built-storybook": "npx http-server docs",
     "verify-node-version": "chmod +x ./scripts/verify-node-version.sh && ./scripts/verify-node-version.sh",
     "preversion": "node ./src/generateVersion.js",
-    "version": "npm run 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"
+    "version": "npm run verify-node-version && npm run build-storybook && git add -u ./docs && git add ./docs/* && git add ./src/version.ts",
+    "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles && vite build"
   },
   "author": "constructor.io",
   "license": "MIT",