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

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

@@ -5,22 +5,32 @@ const react_1 = tslib_1.__importStar(require("react"));
 const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 const typeGuards_1 = require("../../../typeGuards");
 function SectionItem(props) {
-    var _a;
+    var _a, _b, _c, _d, _e;
     const { item, children } = props;
-    const { getItemProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const { getItemProps, advancedParameters } = (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 }),
-            react_1.default.createElement("p", { "data-testid": 'cio-text' }, item.value)));
+            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)));
     }
     else if ((0, typeGuards_1.isInGroupSuggestion)(item)) {
         defaultChildren = react_1.default.createElement("p", { className: 'cio-term-in-group' },
             "in ",
             item.groupName);
     }
+    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),
+            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", null, item.value);
+        defaultChildren = react_1.default.createElement("p", { className: 'cio-custom-text' }, item.value);
     }
     return react_1.default.createElement("li", Object.assign({}, getItemProps(item)), children || defaultChildren);
 }

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_M57QS8SMPdLdLx4x';
 /// //////////////////////////////
@@ -208,3 +208,4 @@ To see this in action:
 4. Next, type "short" in the example autocomplete input field.
   - Notice how the user is presented with only short sleeved items as results.
   - This is because we are filtering to the "Shirts" group`;
+exports.termsWithImagesAndCountsDescription = `Pass boolean flags for \`displaySearchSuggestionImages\` and \`displaySearchSuggestionResultCounts\` fields to display images and counts for search suggestions. These fields need to be made displayable before they can be used. Please contact your Constructor Integration Engineer for details.`;

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -109,6 +109,7 @@ const useCioAutocomplete = (options) => {
         cioClient,
         autocompleteClassName,
         selectedItem: items[highlightedIndex],
+        advancedParameters,
     };
 };
 exports.default = useCioAutocomplete;

package/lib/cjs/typeGuards.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCustomSection = exports.isInGroupSuggestion = exports.isProduct = void 0;
+exports.isCustomSection = exports.isInGroupSuggestion = exports.isSearchSuggestion = exports.isProduct = void 0;
 function isProduct(item) {
-    var _a;
-    return ((_a = item.data) === null || _a === void 0 ? void 0 : _a.image_url) !== undefined;
+    return item.section === 'Products';
 }
 exports.isProduct = isProduct;
+function isSearchSuggestion(item) {
+    return item.section === 'Search Suggestions';
+}
+exports.isSearchSuggestion = isSearchSuggestion;
 function isInGroupSuggestion(item) {
     return item.groupName !== undefined;
 }

package/lib/cjs/utils.js

@@ -100,7 +100,11 @@ const getActiveSectionsWithData = (activeSections, sectionResults) => {
         const { identifier } = config;
         let data;
         if ((0, typeGuards_1.isCustomSection)(config)) {
-            data = config.data;
+            // Copy id from data to the top level
+            data = config.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) }));
+            });
         }
         else {
             data = sectionResults[identifier];

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

@@ -1,22 +1,32 @@
 import React, { useContext } from 'react';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
-import { isProduct, isInGroupSuggestion } from '../../../typeGuards';
+import { isProduct, isInGroupSuggestion, isSearchSuggestion } from '../../../typeGuards';
 export default function SectionItem(props) {
     const { item, children } = props;
-    const { getItemProps } = useContext(CioAutocompleteContext);
+    const { getItemProps, advancedParameters } = 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 }),
-            React.createElement("p", { "data-testid": 'cio-text' }, item.value)));
+            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)));
     }
     else if (isInGroupSuggestion(item)) {
         defaultChildren = React.createElement("p", { className: 'cio-term-in-group' },
             "in ",
             item.groupName);
     }
+    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),
+            displaySearchSuggestionResultCounts && item.data?.total_num_results && (React.createElement("p", { className: 'cio-suggestion-count' },
+                "(",
+                item.data?.total_num_results,
+                ")"))));
+    }
     else {
-        defaultChildren = React.createElement("p", null, item.value);
+        defaultChildren = React.createElement("p", { className: 'cio-custom-text' }, item.value);
     }
     return React.createElement("li", { ...getItemProps(item) }, children || defaultChildren);
 }

package/lib/mjs/constants.js

@@ -204,3 +204,4 @@ To see this in action:
 4. Next, type "short" in the example autocomplete input field.
   - Notice how the user is presented with only short sleeved items as results.
   - This is because we are filtering to the "Shirts" group`;
+export const termsWithImagesAndCountsDescription = `Pass boolean flags for \`displaySearchSuggestionImages\` and \`displaySearchSuggestionResultCounts\` fields to display images and counts for search suggestions. These fields need to be made displayable before they can be used. Please contact your Constructor Integration Engineer for details.`;

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -120,6 +120,7 @@ const useCioAutocomplete = (options) => {
         cioClient,
         autocompleteClassName,
         selectedItem: items[highlightedIndex],
+        advancedParameters,
     };
 };
 export default useCioAutocomplete;

package/lib/mjs/typeGuards.js

@@ -1,5 +1,8 @@
 export function isProduct(item) {
-    return item.data?.image_url !== undefined;
+    return item.section === 'Products';
+}
+export function isSearchSuggestion(item) {
+    return item.section === 'Search Suggestions';
 }
 export function isInGroupSuggestion(item) {
     return item.groupName !== undefined;

package/lib/mjs/utils.js

@@ -84,7 +84,11 @@ export const getActiveSectionsWithData = (activeSections, sectionResults) => {
         const { identifier } = config;
         let data;
         if (isCustomSection(config)) {
-            data = config.data;
+            // Copy id from data to the top level
+            data = config.data.map((item) => ({
+                ...item,
+                id: item?.id || item?.data?.id,
+            }));
         }
         else {
             data = sectionResults[identifier];

package/lib/styles.css

@@ -70,9 +70,11 @@
   padding: 0;
 }
 
-.cio-autocomplete .cio-item-SearchSuggestions {
-  flex-direction: column;
+.cio-autocomplete .cio-item.cio-item-SearchSuggestions {
+  flex-direction: row;
   min-width: 160px;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .cio-autocomplete .cio-item {
@@ -103,12 +105,12 @@
   padding: 5px 0;
 }
 
-.cio-autocomplete .cio-item p {
+.cio-autocomplete .cio-item .cio-product-text {
   margin: 0;
   overflow: hidden;
 }
 
-.cio-autocomplete .cio-item img {
+.cio-autocomplete .cio-item .cio-product-image {
   width: 100%;
   max-width: 100px;
   max-height: 100px;
@@ -117,3 +119,19 @@
 .cio-autocomplete .cio-term-in-group {
   padding-left: 10px;
 }
+
+.cio-autocomplete .cio-suggestion-image {
+  height: 32px;
+  width: 32px;
+  margin-right: 8px;
+  object-fit: contain;
+}
+
+.cio-autocomplete .cio-suggestion-text {
+  flex-grow: 1;
+}
+
+.cio-autocomplete .cio-suggestion-count {
+  font-size: 0.8rem;
+  margin-left: 8px;
+}

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

@@ -21,5 +21,6 @@ export declare const CioAutocompleteContext: React.Context<{
     cioClient: import("@constructor-io/constructorio-client-javascript/lib/types").Nullable<import("@constructor-io/constructorio-client-javascript")>;
     autocompleteClassName: string;
     selectedItem: import("../../types").Item;
+    advancedParameters: import("../../types").AdvancedParameters | undefined;
 }>;
 export default function CioAutocompleteProvider(props: CioAutocompleteProps): JSX.Element;

package/lib/types/constants.d.ts

@@ -27,3 +27,4 @@ export declare const advancedParametersDescription = "The stories below show how
 export declare const advancedParametersDefaultDescription = "Passing an `advancedParameters` object is optional. Passing an empty object for the `advancedParameters` field behaves the same as not passing an `advancedParameters` object at all.";
 export declare const termsWithGroupSuggestionsDescription = "Pass integers for the `numTermsWithGroupSuggestions` and `numGroupsSuggestedPerTerm` fields to add suggested group filters to search term suggestions. Not all suggested search terms will have group filters, so these integers are upper limits, used to specify the maximum number of terms with group filters and the maximum number of suggested group filters per term.\n\nTo see this in action:\n1. Type \"pan\" in the example below.\n  - Notice how the user is presented with a search term of \"all week flex pant\" as well as \"all week flex pant in Chinos\" and \"all week flex pant baby in Athleisure Pants & Joggers\"\n2. Navigate to the \"Terms With Group Suggestions\" story (using the navigation menu to the left)\n3. Then use the Controls to adjust the values of `numTermsWithGroupSuggestions` to `3` and `numGroupsSuggestedPerTerm` to `1`\n4. Next, type \"pan\" in the example autocomplete input field.\n  - Notice how the user is presented with three different search terms that have a maximum of one \"in {group}\" suggestion each";
 export declare const filteredSuggestionsDescription = "Pass a `filters` object under `advancedParameters` to apply filters to the suggestions. Any parameter supported by <a href=\"https://docs.constructor.io/rest_api/autocomplete_queries/\" target=\"__blank\">our autocomplete endpoint</a> can be passed under `advancedParameters`.\n\nTo see this in action:\n1. Type \"short\" in the example below.\n  - Notice how the user is presented with only short pants as results.\n  - This is because the results are currently filtered to belong to the \"Shorts\" group.\n2. Navigate to the \"Filtered Suggestions\" story (using the navigation menu to the left)\n3. Then use the Controls to adjust the values of `\"group_id\"` to `\"1030\"`.\n4. Next, type \"short\" in the example autocomplete input field.\n  - Notice how the user is presented with only short sleeved items as results.\n  - This is because we are filtering to the \"Shirts\" group";
+export declare const termsWithImagesAndCountsDescription = "Pass boolean flags for `displaySearchSuggestionImages` and `displaySearchSuggestionResultCounts` fields to display images and counts for search suggestions. These fields need to be made displayable before they can be used. Please contact your Constructor Integration Engineer for details.";

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

@@ -22,5 +22,6 @@ declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     cioClient: import("@constructor-io/constructorio-client-javascript/lib/types").Nullable<import("@constructor-io/constructorio-client-javascript")>;
     autocompleteClassName: string;
     selectedItem: import("../types").Item;
+    advancedParameters: import("../types").AdvancedParameters | undefined;
 };
 export default useCioAutocomplete;

package/lib/types/typeGuards.d.ts

@@ -1,4 +1,5 @@
-import { CustomSection, InGroupSuggestion, Item, Product, UserDefinedSection } from './types';
+import { CustomSection, InGroupSuggestion, Item, Product, UserDefinedSection, SearchSuggestion } from './types';
 export declare function isProduct(item: Item): item is Product;
+export declare function isSearchSuggestion(item: Item): item is SearchSuggestion;
 export declare function isInGroupSuggestion(item: Item): item is InGroupSuggestion;
 export declare function isCustomSection(config: UserDefinedSection): config is CustomSection;

package/lib/types/types.d.ts

@@ -1,7 +1,8 @@
 import { GetItemPropsOptions } from 'downshift';
 import { ReactNode } from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { IAutocompleteParameters } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { IAutocompleteParameters, SearchSuggestion as SearchSuggestionFromClient, Product as ProductFromClient, Item as ItemBase } from '@constructor-io/constructorio-client-javascript/lib/types';
+export type { IAutocompleteParameters } from '@constructor-io/constructorio-client-javascript/lib/types';
 export type CioClientConfig = {
     apiKey?: string;
     cioJsClient?: ConstructorIOClient;
@@ -9,6 +10,8 @@ export type CioClientConfig = {
 export interface AdvancedParametersBase {
     numTermsWithGroupSuggestions?: number;
     numGroupsSuggestedPerTerm?: number;
+    displaySearchSuggestionImages?: boolean;
+    displaySearchSuggestionResultCounts?: boolean;
 }
 export type AdvancedParameters = AdvancedParametersBase & Omit<IAutocompleteParameters, 'resultsPerSection'>;
 export type CioAutocompleteProps = CioClientConfig & {
@@ -37,13 +40,6 @@ export type ItemPropsOptions = DownshiftGetItemPropsOptions & {
     indexOffset?: number;
 };
 export type GetItemProps = (options: ItemPropsOptions) => object;
-export interface ItemBase extends Record<string, any> {
-    id: string;
-    section: string;
-    url?: string;
-    value?: string;
-    data?: Record<string, any>;
-}
 export type Item = Product | SearchSuggestion | InGroupSuggestion | ItemBase;
 export type GetAutocompleteResultsOptions = {
     [sectionIdentifier: string]: {
@@ -78,37 +74,13 @@ export interface CustomSection extends SectionConfiguration {
 }
 export type Section = AutocompleteSection | RecommendationsSection | CustomSection;
 export type UserDefinedSection = CustomSection | SectionConfiguration;
-export type Product = ItemBase & {
+export type Product = ProductFromClient & {
     section: 'Products';
-    data: {
-        facets: {
-            name: string;
-            values: string[];
-        }[];
-        group_ids: string[];
-        id: string;
-        image_url: string;
-        url: string;
-        variation_id?: string;
-    };
-    is_slotted: boolean;
-    labels: Record<string, unknown>;
-    matched_terms: string[];
-    value: string;
 };
-export type SearchSuggestion = ItemBase & {
+export type SearchSuggestion = SearchSuggestionFromClient & {
     section: 'Search Suggestions';
-    data: {
-        id: string;
-        url?: string;
-    };
-    is_slotted: boolean;
-    labels: Record<string, unknown>;
-    matched_terms: string[];
-    value: string;
 };
 export type InGroupSuggestion = SearchSuggestion & {
     groupId: string;
     groupName: string;
 };
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.8.4",
+  "version": "1.9.0",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",