@constructor-io/constructorio-ui-autocomplete 1.23.14 → 1.23.16

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

@@ -5,6 +5,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../utils");
 const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 const SectionItemsList_1 = tslib_1.__importDefault(require("../SectionItemsList/SectionItemsList"));
+const CloseIcon_1 = tslib_1.__importDefault(require("./CloseIcon"));
 const DefaultRenderResults = ({ sections }) => sections === null || sections === void 0 ? void 0 : sections.map((section) => {
     const { type } = section;
     let key = section.displayName;
@@ -26,12 +27,14 @@ const DefaultRenderResults = ({ sections }) => sections === null || sections ===
 });
 function AutocompleteResults(props) {
     const { children = DefaultRenderResults } = props;
-    const { sections, isOpen, getMenuProps, getItemProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const { sections, isOpen, getMenuProps, getItemProps, closeMenu } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
     const hasResults = sections && sections.some((section) => { var _a; return (_a = section === null || section === void 0 ? void 0 : section.data) === null || _a === void 0 ? void 0 : _a.length; });
     const menuProps = Object.assign({}, getMenuProps());
     let content;
     if (isOpen && hasResults) {
-        content = typeof children === 'function' ? children({ sections, getItemProps }) : children;
+        content = (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(CloseIcon_1.default, { onClick: () => closeMenu() }),
+            typeof children === 'function' ? children({ sections, getItemProps }) : children));
     }
     else {
         content = null;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function CloseIcon(props) {
+    return (react_1.default.createElement("svg", Object.assign({}, props, { className: 'cio-close', version: '1.1', id: 'Layer_1', xmlns: 'http://www.w3.org/2000/svg', x: '0px', y: '0px', width: '122.878px', height: '122.88px', viewBox: '0 0 122.878 122.88', enableBackground: 'new 0 0 122.878 122.88', xmlSpace: 'preserve' }),
+        react_1.default.createElement("g", null,
+            react_1.default.createElement("path", { d: 'M1.426,8.313c-1.901-1.901-1.901-4.984,0-6.886c1.901-1.902,4.984-1.902,6.886,0l53.127,53.127l53.127-53.127 c1.901-1.902,4.984-1.902,6.887,0c1.901,1.901,1.901,4.985,0,6.886L68.324,61.439l53.128,53.128c1.901,1.901,1.901,4.984,0,6.886 c-1.902,1.902-4.985,1.902-6.887,0L61.438,68.326L8.312,121.453c-1.901,1.902-4.984,1.902-6.886,0 c-1.901-1.901-1.901-4.984,0-6.886l53.127-53.128L1.426,8.313L1.426,8.313z' }))));
+}
+exports.default = CloseIcon;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const SectionItemText_1 = tslib_1.__importDefault(require("./SectionItemText"));
+const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
+function SearchSuggestionItem(props) {
+    var _a, _b, _c, _d;
+    const { item, displaySearchTermHighlights } = props;
+    const { advancedParameters, query, featureToggles } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const { featureDisplaySearchSuggestionImages, featureDisplaySearchSuggestionResultCounts } = featureToggles;
+    const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, } = advancedParameters || {};
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        displaySearchSuggestionImages && ((_a = item.data) === null || _a === void 0 ? void 0 : _a.image_url) && (react_1.default.createElement("img", { src: (_b = item.data) === null || _b === void 0 ? void 0 : _b.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 && ((_c = item.data) === null || _c === void 0 ? void 0 : _c.total_num_results) && (react_1.default.createElement("p", { className: 'cio-suggestion-count' },
+            "(", (_d = item.data) === null || _d === void 0 ? void 0 :
+            _d.total_num_results,
+            ")"))));
+}
+exports.default = SearchSuggestionItem;

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

@@ -6,12 +6,12 @@ const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 const typeGuards_1 = require("../../../typeGuards");
 const SectionItemText_1 = tslib_1.__importDefault(require("./SectionItemText"));
 const utils_1 = require("../../../utils");
+const SearchSuggestionItem_1 = tslib_1.__importDefault(require("./SearchSuggestionItem"));
 function SectionItem(props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     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 || {};
+    const { getItemProps, advancedParameters, query, getSearchResultsUrl } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const { translations } = advancedParameters || {};
     let defaultChildren;
     if ((0, typeGuards_1.isProduct)(item)) {
         defaultChildren = (react_1.default.createElement("a", { href: (_a = item.data) === null || _a === void 0 ? void 0 : _a.url },
@@ -26,14 +26,13 @@ function SectionItem(props) {
             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 && ((_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 && ((_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,
-                ")"))));
+        if (getSearchResultsUrl) {
+            defaultChildren = (react_1.default.createElement("a", { className: 'suggestion-link', href: getSearchResultsUrl(item) },
+                react_1.default.createElement(SearchSuggestionItem_1.default, { item: item, displaySearchTermHighlights: displaySearchTermHighlights })));
+        }
+        else {
+            defaultChildren = (react_1.default.createElement(SearchSuggestionItem_1.default, { item: item, displaySearchTermHighlights: displaySearchTermHighlights }));
+        }
     }
     else {
         defaultChildren = (react_1.default.createElement("p", { className: 'cio-custom-text' },

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -41,7 +41,7 @@ const convertLegacyParametersAndAddDefaults = (sections) => sections.map((config
 const useCioAutocomplete = (options) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const memoizedOptions = (0, react_1.useMemo)(() => options, [JSON.stringify(options)]);
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, } = memoizedOptions;
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, getSearchResultsUrl, } = memoizedOptions;
     let { sections = exports.defaultSections, zeroStateSections } = memoizedOptions;
     sections = (0, react_1.useMemo)(() => {
         if (sections) {
@@ -211,6 +211,7 @@ const useCioAutocomplete = (options) => {
         autocompleteClassName,
         selectedItem: items[highlightedIndex],
         advancedParameters,
+        getSearchResultsUrl,
     };
 };
 exports.default = useCioAutocomplete;

package/lib/cjs/version.js

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

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

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { toKebabCase } from '../../../utils';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 import SectionItemsList from '../SectionItemsList/SectionItemsList';
+import CloseIcon from './CloseIcon';
 const DefaultRenderResults = ({ sections }) => sections?.map((section) => {
     const { type } = section;
     let key = section.displayName;
@@ -23,14 +24,16 @@ const DefaultRenderResults = ({ sections }) => sections?.map((section) => {
 });
 export default function AutocompleteResults(props) {
     const { children = DefaultRenderResults } = props;
-    const { sections, isOpen, getMenuProps, getItemProps } = useContext(CioAutocompleteContext);
+    const { sections, isOpen, getMenuProps, getItemProps, closeMenu } = useContext(CioAutocompleteContext);
     const hasResults = sections && sections.some((section) => section?.data?.length);
     const menuProps = {
         ...getMenuProps(),
     };
     let content;
     if (isOpen && hasResults) {
-        content = typeof children === 'function' ? children({ sections, getItemProps }) : children;
+        content = (React.createElement(React.Fragment, null,
+            React.createElement(CloseIcon, { onClick: () => closeMenu() }),
+            typeof children === 'function' ? children({ sections, getItemProps }) : children));
     }
     else {
         content = null;

package/lib/mjs/components/Autocomplete/AutocompleteResults/CloseIcon.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function CloseIcon(props) {
+    return (React.createElement("svg", { ...props, className: 'cio-close', version: '1.1', id: 'Layer_1', xmlns: 'http://www.w3.org/2000/svg', x: '0px', y: '0px', width: '122.878px', height: '122.88px', viewBox: '0 0 122.878 122.88', enableBackground: 'new 0 0 122.878 122.88', xmlSpace: 'preserve' },
+        React.createElement("g", null,
+            React.createElement("path", { d: 'M1.426,8.313c-1.901-1.901-1.901-4.984,0-6.886c1.901-1.902,4.984-1.902,6.886,0l53.127,53.127l53.127-53.127 c1.901-1.902,4.984-1.902,6.887,0c1.901,1.901,1.901,4.985,0,6.886L68.324,61.439l53.128,53.128c1.901,1.901,1.901,4.984,0,6.886 c-1.902,1.902-4.985,1.902-6.887,0L61.438,68.326L8.312,121.453c-1.901,1.902-4.984,1.902-6.886,0 c-1.901-1.901-1.901-4.984,0-6.886l53.127-53.128L1.426,8.313L1.426,8.313z' }))));
+}

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

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import SectionItemText from './SectionItemText';
+import { CioAutocompleteContext } from '../CioAutocompleteProvider';
+export default function SearchSuggestionItem(props) {
+    const { item, displaySearchTermHighlights } = props;
+    const { advancedParameters, query, featureToggles } = useContext(CioAutocompleteContext);
+    const { featureDisplaySearchSuggestionImages, featureDisplaySearchSuggestionResultCounts } = featureToggles;
+    const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, } = advancedParameters || {};
+    return (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' },
+            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,
+            ")"))));
+}

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

@@ -3,11 +3,11 @@ import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 import { isProduct, isInGroupSuggestion, isSearchSuggestion } from '../../../typeGuards';
 import SectionItemText from './SectionItemText';
 import { translate } from '../../../utils';
+import SearchSuggestionItem from './SearchSuggestionItem';
 export default function SectionItem(props) {
     const { item, children, displaySearchTermHighlights } = props;
-    const { getItemProps, advancedParameters, query, featureToggles } = useContext(CioAutocompleteContext);
-    const { featureDisplaySearchSuggestionImages, featureDisplaySearchSuggestionResultCounts } = featureToggles;
-    const { displaySearchSuggestionImages = featureDisplaySearchSuggestionImages, displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts, translations, } = advancedParameters || {};
+    const { getItemProps, advancedParameters, query, getSearchResultsUrl } = useContext(CioAutocompleteContext);
+    const { translations } = advancedParameters || {};
     let defaultChildren;
     if (isProduct(item)) {
         defaultChildren = (React.createElement("a", { href: item.data?.url },
@@ -22,14 +22,13 @@ export default function SectionItem(props) {
             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' },
-                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,
-                ")"))));
+        if (getSearchResultsUrl) {
+            defaultChildren = (React.createElement("a", { className: 'suggestion-link', href: getSearchResultsUrl(item) },
+                React.createElement(SearchSuggestionItem, { item: item, displaySearchTermHighlights: displaySearchTermHighlights })));
+        }
+        else {
+            defaultChildren = (React.createElement(SearchSuggestionItem, { item: item, displaySearchTermHighlights: displaySearchTermHighlights }));
+        }
     }
     else {
         defaultChildren = (React.createElement("p", { className: 'cio-custom-text' },

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -37,7 +37,7 @@ const convertLegacyParametersAndAddDefaults = (sections) => sections.map((config
 const useCioAutocomplete = (options) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const memoizedOptions = useMemo(() => options, [JSON.stringify(options)]);
-    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, } = memoizedOptions;
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, cioJsClientOptions, placeholder = 'What can we help you find today?', autocompleteClassName = 'cio-autocomplete', advancedParameters, defaultInput, getSearchResultsUrl, } = memoizedOptions;
     let { sections = defaultSections, zeroStateSections } = memoizedOptions;
     sections = useMemo(() => {
         if (sections) {
@@ -225,6 +225,7 @@ const useCioAutocomplete = (options) => {
         autocompleteClassName,
         selectedItem: items[highlightedIndex],
         advancedParameters,
+        getSearchResultsUrl,
     };
 };
 export default useCioAutocomplete;

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.23.14';
+export default '1.23.16';

package/lib/styles.css

@@ -98,6 +98,14 @@
   flex-direction: column;
 }
 
+.cio-autocomplete .cio-item .suggestion-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
 .cio-autocomplete .cio-item[aria-selected='true'] {
   background-color: hsl(0, 0%, 90%);
   border-radius: 4px;
@@ -174,4 +182,13 @@
 
 .cio-autocomplete .cio-section-footer .cio-show-all-results-button:hover {
   background-color: hsl(0, 0%, 90%);
+}
+
+.cio-autocomplete .cio-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  cursor: pointer;
+  width: 15px;
+  height: 15px;
 }

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function CloseIcon(props: any): JSX.Element;

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

@@ -31,5 +31,6 @@ export declare const CioAutocompleteContext: React.Context<{
     autocompleteClassName: string;
     selectedItem: import("../../types").Item;
     advancedParameters: import("../../types").AdvancedParameters | undefined;
+    getSearchResultsUrl: ((item: import("../../types").SearchSuggestion) => string) | undefined;
 }>;
 export default function CioAutocompleteProvider(props: CioAutocompleteProps): JSX.Element;

package/lib/types/components/Autocomplete/SectionItem/SearchSuggestionItem.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SearchSuggestion } from '../../../types';
+interface SearchSuggestionItemProps {
+    item: SearchSuggestion;
+    displaySearchTermHighlights?: boolean;
+}
+export default function SearchSuggestionItem(props: SearchSuggestionItemProps): JSX.Element;
+export {};

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

@@ -32,5 +32,6 @@ declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     autocompleteClassName: string;
     selectedItem: Item;
     advancedParameters: import("../types").AdvancedParameters | undefined;
+    getSearchResultsUrl: ((item: import("../types").SearchSuggestion) => string) | undefined;
 };
 export default useCioAutocomplete;

package/lib/types/types.d.ts

@@ -21,6 +21,7 @@ export interface AdvancedParametersBase {
 export type AdvancedParameters = AdvancedParametersBase & Omit<IAutocompleteParameters, 'resultsPerSection'>;
 export type CioAutocompleteProps = CioClientConfig & {
     openOnFocus?: boolean;
+    getSearchResultsUrl?: (item: SearchSuggestion) => string;
     onSubmit: OnSubmit;
     onFocus?: () => void;
     onChange?: (input: string) => void;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.23.14";
+declare const _default: "1.23.16";
 export default _default;

package/package.json

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