@constructor-io/constructorio-ui-autocomplete 1.23.9 → 1.23.11

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

@@ -7,15 +7,15 @@ const typeGuards_1 = require("../../../typeGuards");
 const SectionItemText_1 = tslib_1.__importDefault(require("./SectionItemText"));
 const utils_1 = require("../../../utils");
 function SectionItem(props) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const { item, children, displaySearchTermHighlights } = props;
     const { getItemProps, advancedParameters, query, featureToggles } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
     const { featureDisplaySearchSuggestionImages, featureDisplaySearchSuggestionResultCounts } = featureToggles;
     const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, translations, } = 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' }),
+        defaultChildren = (react_1.default.createElement("a", { href: (_a = item.data) === null || _a === void 0 ? void 0 : _a.url },
+            react_1.default.createElement("img", { "data-testid": 'cio-img', src: (_b = item.data) === null || _b === void 0 ? void 0 : _b.image_url, alt: item.value, className: 'cio-product-image' }),
             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 }))));
     }
@@ -27,12 +27,12 @@ function SectionItem(props) {
     }
     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' })),
+            displaySearchSuggestionImages && ((_c = item.data) === null || _c === void 0 ? void 0 : _c.image_url) && (react_1.default.createElement("img", { src: (_d = item.data) === null || _d === void 0 ? void 0 : _d.image_url, alt: item.value, className: 'cio-suggestion-image' })),
             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,
+            displaySearchSuggestionResultCounts && ((_e = item.data) === null || _e === void 0 ? void 0 : _e.total_num_results) && (react_1.default.createElement("p", { className: 'cio-suggestion-count' },
+                "(", (_f = item.data) === null || _f === void 0 ? void 0 :
+                _f.total_num_results,
                 ")"))));
     }
     else {

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -63,7 +63,7 @@ const useCioAutocomplete = (options) => {
     const features = (0, react_1.useMemo)(() => (0, utils_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 { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps, } = (0, useDownShift_1.default)({ setQuery, items, onSubmit, cioClient, previousQuery });
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = (0, useDownShift_1.default)({ setQuery, items, onSubmit, cioClient, previousQuery });
     // Log console errors
     (0, useConsoleErrors_1.default)(sections, activeSections);
     // Track recommendation view
@@ -75,16 +75,17 @@ const useCioAutocomplete = (options) => {
         request,
         featureToggles: features,
         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' })),
+        getMenuProps: () => (Object.assign(Object.assign({}, getMenuProps()), { className: 'cio-results', 'data-testid': 'cio-results', 'data-cnstrc-autosuggest': '' })),
         getLabelProps,
         openMenu,
         closeMenu,
         getItemProps: (item) => {
+            var _a;
             const { index, sectionId } = (0, utils_1.getItemPosition)({ item, items });
             const sectionItemTestId = `cio-item-${sectionId === null || sectionId === void 0 ? void 0 : sectionId.replace(' ', '')}`;
-            return Object.assign(Object.assign({}, getItemProps({ item, index })), { 
+            return Object.assign(Object.assign({}, getItemPropsDownShift({ item, index })), { 
                 // @deprecated `sectionItemTestId` will be removed as a className in the next major version
-                className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId });
+                className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId, 'data-cnstrc-item-section': item.section, 'data-cnstrc-item-group': item.groupId, 'data-cnstrc-item-name': item.value, 'data-cnstrc-item-id': (_a = item.data) === null || _a === void 0 ? void 0 : _a.id });
         },
         getInputProps: () => (Object.assign(Object.assign({}, getInputProps({
             onChange: (e) => {
@@ -116,7 +117,7 @@ const useCioAutocomplete = (options) => {
                     // eslint-disable-next-line no-console
                     console.log(error);
                 }
-            }, className: 'cio-input', 'data-testid': 'cio-input', placeholder, onKeyDownCapture: ({ code, key, nativeEvent }) => {
+            }, className: 'cio-input', 'data-testid': 'cio-input', 'data-cnstrc-search-input': '', placeholder, onKeyDownCapture: ({ code, key, nativeEvent }) => {
                 const isEnter = code === 'Enter' || key === 'Enter';
                 const isHome = code === 'Home' || key === 'Home';
                 const isEnd = code === 'End' || key === 'End';
@@ -155,6 +156,7 @@ const useCioAutocomplete = (options) => {
             },
             className: 'cio-form',
             'data-testid': 'cio-form',
+            'data-cnstrc-search-form': '',
         }),
         getSectionProps: (section) => {
             var _a, _b;

package/lib/cjs/version.js

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

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

@@ -10,7 +10,7 @@ export default function SectionItem(props) {
     const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, translations, } = advancedParameters || {};
     let defaultChildren;
     if (isProduct(item)) {
-        defaultChildren = (React.createElement(React.Fragment, null,
+        defaultChildren = (React.createElement("a", { href: item.data?.url },
             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' },
                 React.createElement(SectionItemText, { item: item, query: query, highlightSearchTerm: displaySearchTermHighlights }))));

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -59,7 +59,7 @@ const useCioAutocomplete = (options) => {
     const features = useMemo(() => getFeatures(request), [request]);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
     const items = useMemo(() => getItemsForActiveSections(activeSectionsWithData), [activeSectionsWithData]);
-    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps, } = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery });
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps: getItemPropsDownShift, } = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery });
     // Log console errors
     useConsoleErrors(sections, activeSections);
     // Track recommendation view
@@ -75,6 +75,7 @@ const useCioAutocomplete = (options) => {
             ...getMenuProps(),
             className: 'cio-results',
             'data-testid': 'cio-results',
+            'data-cnstrc-autosuggest': '',
         }),
         getLabelProps,
         openMenu,
@@ -83,10 +84,14 @@ const useCioAutocomplete = (options) => {
             const { index, sectionId } = getItemPosition({ item, items });
             const sectionItemTestId = `cio-item-${sectionId?.replace(' ', '')}`;
             return {
-                ...getItemProps({ item, index }),
+                ...getItemPropsDownShift({ item, index }),
                 // @deprecated `sectionItemTestId` will be removed as a className in the next major version
                 className: `cio-item ${sectionItemTestId}`,
                 'data-testid': sectionItemTestId,
+                'data-cnstrc-item-section': item.section,
+                'data-cnstrc-item-group': item.groupId,
+                'data-cnstrc-item-name': item.value,
+                'data-cnstrc-item-id': item.data?.id,
             };
         },
         getInputProps: () => ({
@@ -124,6 +129,7 @@ const useCioAutocomplete = (options) => {
             },
             className: 'cio-input',
             'data-testid': 'cio-input',
+            'data-cnstrc-search-input': '',
             placeholder,
             onKeyDownCapture: ({ code, key, nativeEvent }) => {
                 const isEnter = code === 'Enter' || key === 'Enter';
@@ -165,6 +171,7 @@ const useCioAutocomplete = (options) => {
             },
             className: 'cio-form',
             'data-testid': 'cio-form',
+            'data-cnstrc-search-form': '',
         }),
         getSectionProps: (section) => {
             // @deprecated ClassNames derived from this fn will be removed in the next major version

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.23.9';
+export default '1.23.11';

package/lib/styles.css

@@ -91,6 +91,13 @@
   border-bottom: 3px solid transparent;
 }
 
+.cio-autocomplete .cio-item a {
+  color: inherit;
+  display: inline-flex;
+  text-decoration: inherit;
+  flex-direction: column;
+}
+
 .cio-autocomplete .cio-item[aria-selected='true'] {
   background-color: hsl(0, 0%, 90%);
   border-radius: 4px;
@@ -122,6 +129,7 @@
   width: 100%;
   max-width: 100px;
   max-height: 100px;
+  align-self: center;
 }
 
 .cio-autocomplete .cio-term-in-group {

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { GetItemProps, Section } from '../../../types';
+import { Item, Section } from '../../../types';
 export type RenderResults = (renderResultsArguments: {
     sections: Section[];
-    getItemProps: GetItemProps;
+    getItemProps: (item: Item) => any;
 }) => ReactNode;
 type AutocompleteResultsProps = {
     children?: RenderResults | ReactNode;

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

@@ -15,7 +15,7 @@ export declare const CioAutocompleteContext: React.Context<{
     getLabelProps: (options?: import("downshift").UseComboboxGetLabelPropsOptions | undefined) => any;
     openMenu: () => void;
     closeMenu: () => void;
-    getItemProps: (item: any) => any;
+    getItemProps: (item: import("../../types").Item) => any;
     getInputProps: () => any;
     getFormProps: () => {
         onSubmit: (event: any) => {
@@ -23,6 +23,7 @@ export declare const CioAutocompleteContext: React.Context<{
         };
         className: string;
         'data-testid': string;
+        'data-cnstrc-search-form': string;
     };
     getSectionProps: (section: import("../../types").Section) => import("../../types").HTMLPropsWithCioDataAttributes<any>;
     setQuery: React.Dispatch<React.SetStateAction<string>>;

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

@@ -1,4 +1,4 @@
-import { CioAutocompleteProps, Section, UserDefinedSection, HTMLPropsWithCioDataAttributes } from '../types';
+import { CioAutocompleteProps, Section, UserDefinedSection, HTMLPropsWithCioDataAttributes, Item } from '../types';
 export declare const defaultSections: UserDefinedSection[];
 export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
 declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
@@ -16,7 +16,7 @@ declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     getLabelProps: (options?: import("downshift").UseComboboxGetLabelPropsOptions | undefined) => any;
     openMenu: () => void;
     closeMenu: () => void;
-    getItemProps: (item: any) => any;
+    getItemProps: (item: Item) => any;
     getInputProps: () => any;
     getFormProps: () => {
         onSubmit: (event: any) => {
@@ -24,12 +24,13 @@ declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
         };
         className: string;
         'data-testid': string;
+        'data-cnstrc-search-form': string;
     };
     getSectionProps: (section: Section) => HTMLPropsWithCioDataAttributes<any>;
     setQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
     cioClient: import("@constructor-io/constructorio-client-javascript").Nullable<import("@constructor-io/constructorio-client-javascript/lib/types/constructorio")>;
     autocompleteClassName: string;
-    selectedItem: import("../types").Item;
+    selectedItem: Item;
     advancedParameters: import("../types").AdvancedParameters | undefined;
 };
 export default useCioAutocomplete;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.23.9";
+declare const _default: "1.23.11";
 export default _default;

package/package.json

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