@constructor-io/constructorio-ui-autocomplete 1.23.10 → 1.23.12

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

@@ -17,7 +17,7 @@ function DefaultRenderInput({ getFormProps, getInputProps, getLabelProps, setQue
             react_1.default.createElement("div", { className: 'cio-icon' },
                 react_1.default.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
                     react_1.default.createElement("path", { d: 'M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z' })))),
-        react_1.default.createElement("button", { className: 'cio-submit-btn', "data-testid": 'cio-submit-btn', disabled: !inputProps.value, type: 'submit', "aria-label": 'Submit Search' },
+        react_1.default.createElement("button", { className: 'cio-submit-btn', "data-testid": 'cio-submit-btn', disabled: !inputProps.value, "data-cnstrc-search-submit-btn": true, type: 'submit', "aria-label": 'Submit Search' },
             react_1.default.createElement("div", { className: 'cio-icon' },
                 react_1.default.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
                     react_1.default.createElement("path", { d: 'M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z' }))))));

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/components/Autocomplete/SectionItemsList/SectionItemsList.js

@@ -8,7 +8,9 @@ const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
     var _a, _b;
-    const { getSectionProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const { getSectionProps, getFormProps, advancedParameters } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const { displayShowAllResultsButton, translations } = advancedParameters || {};
+    const { onSubmit } = getFormProps();
     const { type, displayName } = section;
     let sectionTitle = displayName;
     if (!sectionTitle) {
@@ -32,7 +34,11 @@ const DefaultRenderSectionItemsList = function ({ section }) {
     // @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("ul", { className: 'cio-section-items', role: 'none' }, (_b = section === null || section === void 0 ? void 0 : section.data) === null || _b === void 0 ? void 0 : _b.map((item) => (react_1.default.createElement(SectionItem_1.default, { item: item, key: item === null || item === void 0 ? void 0 : item.id, displaySearchTermHighlights: section.displaySearchTermHighlights }))))));
+        react_1.default.createElement("ul", { className: 'cio-section-items', role: 'none' }, (_b = section === null || section === void 0 ? void 0 : section.data) === null || _b === void 0 ? void 0 : _b.map((item) => (react_1.default.createElement(SectionItem_1.default, { item: item, key: item === null || item === void 0 ? void 0 : item.id, displaySearchTermHighlights: section.displaySearchTermHighlights })))),
+        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))))));
 };
 function SectionItemsList(props) {
     const { section, children = DefaultRenderSectionItemsList } = props;

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.translationsDescription = exports.fetchZeroStateOnFocusDescription = exports.debounceDescription = 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.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientOptionsDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
+exports.displayShowAllResultsButtonDescription = exports.translationsDescription = exports.fetchZeroStateOnFocusDescription = exports.debounceDescription = 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.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientOptionsDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_M57QS8SMPdLdLx4x';
 /// //////////////////////////////
@@ -234,7 +234,9 @@ exports.translationsDescription = `Pass a \`translations\` object to display tra
 - Current translatable keys:
 \`\`\`
   {
-    "in": "..."
+    "in": "...",
+    "show all results": "..."
   }
 \`\`\`
 `;
+exports.displayShowAllResultsButtonDescription = `Pass a boolean to \`displayShowAllResultsButton\` to display a button at the bottom of the Products section to show all results. This button will submit the form and trigger the \`onSubmit\` callback.`;

package/lib/cjs/hooks/useFetchRecommendationPod.js

@@ -42,7 +42,7 @@ const useFetchRecommendationPod = (cioClient, recommendationPods, fetchZeroState
             return;
         fetchRecommendationResults();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cioClient]);
+    }, [cioClient, recommendationPods]);
     return { fetchRecommendationResults, recommendationsResults, podsData };
 };
 exports.default = useFetchRecommendationPod;

package/lib/cjs/utils.js

@@ -206,6 +206,7 @@ exports.getItemsForActiveSections = getItemsForActiveSections;
 const translate = (word, translations) => {
     const localTranslations = {
         in: 'in',
+        'show all results': 'show all results',
     };
     if (translations)
         return translations[word];

package/lib/cjs/version.js

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

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

@@ -14,7 +14,7 @@ function DefaultRenderInput({ getFormProps, getInputProps, getLabelProps, setQue
             React.createElement("div", { className: 'cio-icon' },
                 React.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
                     React.createElement("path", { d: 'M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z' })))),
-        React.createElement("button", { className: 'cio-submit-btn', "data-testid": 'cio-submit-btn', disabled: !inputProps.value, type: 'submit', "aria-label": 'Submit Search' },
+        React.createElement("button", { className: 'cio-submit-btn', "data-testid": 'cio-submit-btn', disabled: !inputProps.value, "data-cnstrc-search-submit-btn": true, type: 'submit', "aria-label": 'Submit Search' },
             React.createElement("div", { className: 'cio-icon' },
                 React.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
                     React.createElement("path", { d: 'M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z' }))))));

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/components/Autocomplete/SectionItemsList/SectionItemsList.js

@@ -1,10 +1,12 @@
 import React, { useContext } from 'react';
 import SectionItem from '../SectionItem/SectionItem';
-import { camelToStartCase } from '../../../utils';
+import { camelToStartCase, translate } from '../../../utils';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
-    const { getSectionProps } = useContext(CioAutocompleteContext);
+    const { getSectionProps, getFormProps, advancedParameters } = useContext(CioAutocompleteContext);
+    const { displayShowAllResultsButton, translations } = advancedParameters || {};
+    const { onSubmit } = getFormProps();
     const { type, displayName } = section;
     let sectionTitle = displayName;
     if (!sectionTitle) {
@@ -28,7 +30,11 @@ const DefaultRenderSectionItemsList = function ({ section }) {
     // @deprecated `cio-sectionName` will be removed in the next major release
     return (React.createElement("li", { ...getSectionProps(section) },
         React.createElement("h5", { className: 'cio-section-name cio-sectionName', "aria-hidden": true }, camelToStartCase(sectionTitle)),
-        React.createElement("ul", { className: 'cio-section-items', role: 'none' }, section?.data?.map((item) => (React.createElement(SectionItem, { item: item, key: item?.id, displaySearchTermHighlights: section.displaySearchTermHighlights }))))));
+        React.createElement("ul", { className: 'cio-section-items', role: 'none' }, section?.data?.map((item) => (React.createElement(SectionItem, { item: item, key: item?.id, displaySearchTermHighlights: section.displaySearchTermHighlights })))),
+        displayShowAllResultsButton &&
+            type === 'autocomplete' &&
+            section.indexSectionName === 'Products' && (React.createElement("div", { className: 'cio-section-footer' },
+            React.createElement("button", { "data-cnstrc-search-submit-btn": true, className: 'cio-show-all-results-button', type: 'button', onClick: onSubmit }, translate('show all results', translations))))));
 };
 export default function SectionItemsList(props) {
     const { section, children = DefaultRenderSectionItemsList } = props;

package/lib/mjs/constants.js

@@ -230,7 +230,9 @@ export const translationsDescription = `Pass a \`translations\` object to displa
 - Current translatable keys:
 \`\`\`
   {
-    "in": "..."
+    "in": "...",
+    "show all results": "..."
   }
 \`\`\`
 `;
+export const displayShowAllResultsButtonDescription = `Pass a boolean to \`displayShowAllResultsButton\` to display a button at the bottom of the Products section to show all results. This button will submit the form and trigger the \`onSubmit\` callback.`;

package/lib/mjs/hooks/useFetchRecommendationPod.js

@@ -41,7 +41,7 @@ const useFetchRecommendationPod = (cioClient, recommendationPods, fetchZeroState
             return;
         fetchRecommendationResults();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cioClient]);
+    }, [cioClient, recommendationPods]);
     return { fetchRecommendationResults, recommendationsResults, podsData };
 };
 export default useFetchRecommendationPod;

package/lib/mjs/utils.js

@@ -188,6 +188,7 @@ export const getItemsForActiveSections = (activeSectionsWithData) => {
 export const translate = (word, translations) => {
     const localTranslations = {
         in: 'in',
+        'show all results': 'show all results',
     };
     if (translations)
         return translations[word];

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.23.10';
+export default '1.23.12';

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 {
@@ -142,4 +150,28 @@
 .cio-autocomplete .cio-suggestion-count {
   font-size: 0.8rem;
   margin-left: 8px;
+}
+
+.cio-autocomplete .cio-section-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.cio-autocomplete .cio-section-footer .cio-show-all-results-button {
+  background: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border: 1px black solid;
+  border-radius: 5px;
+  padding: 5px;
+  flex-basis: calc(100%/3);
+  margin: 15px;
+  background-color: white;
+  text-transform: capitalize;
+}
+
+.cio-autocomplete .cio-section-footer .cio-show-all-results-button:hover {
+  background-color: hsl(0, 0%, 90%);
 }

package/lib/types/constants.d.ts

@@ -33,4 +33,5 @@ export declare const filteredSuggestionsDescription = "Pass a `filters` object u
 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.";
 export declare const debounceDescription = "Pass an integer to `debounce` to override the recommended, default delay employed for debouncing autocomplete network requests between keystrokes as your users type into the text input field. The default value is 250, which results in a debounce delay of 250 milliseconds.";
 export declare const fetchZeroStateOnFocusDescription = "Pass a boolean to `fetchZeroStateOnFocus` to override the zero state fetching behavior from initial render to input focus.";
-export declare const translationsDescription = "Pass a `translations` object to display translatable words in your preferred language.\n\n- Current translatable keys:\n```\n  {\n    \"in\": \"...\"\n  }\n```\n";
+export declare const translationsDescription = "Pass a `translations` object to display translatable words in your preferred language.\n\n- Current translatable keys:\n```\n  {\n    \"in\": \"...\",\n    \"show all results\": \"...\"\n  }\n```\n";
+export declare const displayShowAllResultsButtonDescription = "Pass a boolean to `displayShowAllResultsButton` to display a button at the bottom of the Products section to show all results. This button will submit the form and trigger the `onSubmit` callback.";

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

@@ -1,7 +1,7 @@
 import ConstructorIO from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { AdvancedParameters, UserDefinedSection, Section } from '../types';
-export default function useSections(query: string, cioClient: Nullable<ConstructorIO>, sections: UserDefinedSection[], zeroStateSections: UserDefinedSection[] | undefined, advancedParameters?: AdvancedParameters): {
+export default function useSections(query: string, cioClient: Nullable<ConstructorIO>, sections: UserDefinedSection[], zeroStateSections?: UserDefinedSection[], advancedParameters?: AdvancedParameters): {
     fetchRecommendationResults: () => Promise<void>;
     activeSections: UserDefinedSection[];
     activeSectionsWithData: Section[];

package/lib/types/types.d.ts

@@ -13,6 +13,7 @@ export interface AdvancedParametersBase {
     numGroupsSuggestedPerTerm?: number;
     displaySearchSuggestionImages?: boolean;
     displaySearchSuggestionResultCounts?: boolean;
+    displayShowAllResultsButton?: boolean;
     debounce?: number;
     translations?: Translations;
     fetchZeroStateOnFocus?: boolean;
@@ -133,6 +134,7 @@ export type HTMLPropsWithCioDataAttributes<T = any> = React.DetailedHTMLProps<Re
 };
 export type Translations = {
     in?: string;
+    'show all results'?: string;
 };
 export interface PodData {
     podId: string;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.23.10";
+declare const _default: "1.23.12";
 export default _default;

package/package.json

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