@constructor-io/constructorio-ui-autocomplete 1.23.24 → 1.23.25

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function NoResults() {
+    return react_1.default.createElement("div", { className: 'cio-no-results-message' }, "No Results Found");
+}
+exports.default = NoResults;

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

@@ -5,13 +5,14 @@ const react_1 = tslib_1.__importStar(require("react"));
 const SectionItem_1 = tslib_1.__importDefault(require("../SectionItem/SectionItem"));
 const utils_1 = require("../../../utils");
 const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
+const NoResults_1 = tslib_1.__importDefault(require("../AutocompleteResults/NoResults"));
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
-    var _a, _b;
+    var _a, _b, _c;
     const { getSectionProps, query, getFormProps, advancedParameters, getItemProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
     const { displayShowAllResultsButton, translations } = advancedParameters || {};
     const { onSubmit } = getFormProps();
-    const { type, displayName } = section;
+    const { type, displayName, displayNoResultsMessage } = section;
     let sectionTitle = displayName;
     if (!sectionTitle) {
         switch (type) {
@@ -29,12 +30,17 @@ const DefaultRenderSectionItemsList = function ({ section }) {
                 break;
         }
     }
-    if (!((_a = section === null || section === void 0 ? void 0 : section.data) === null || _a === void 0 ? void 0 : _a.length))
+    // Display no results message
+    if (!((_a = section === null || section === void 0 ? void 0 : section.data) === null || _a === void 0 ? void 0 : _a.length) && displayNoResultsMessage)
+        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(NoResults_1.default, null)));
+    if (!((_b = section === null || section === void 0 ? void 0 : section.data) === null || _b === void 0 ? void 0 : _b.length))
         return null;
     // @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("ul", { className: 'cio-section-items', role: 'none' }, (_c = section === null || section === void 0 ? void 0 : section.data) === null || _c === void 0 ? void 0 : _c.map((item) => {
             if (typeof (section === null || section === void 0 ? void 0 : section.renderItem) === 'function') {
                 return section.renderItem({ item, query, getItemProps });
             }

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.displayShowAllResultsButtonDescription = exports.customRenderItemDescription = 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.onIsOpenChangeDescription = 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.customRenderItemDescription = 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.onIsOpenChangeDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.displayNoResultsMessageDescription = 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';
 /// //////////////////////////////
@@ -128,6 +128,7 @@ exports.numResultsDescription = `Override default \`numResults\` to only suggest
 exports.sectionOrderDescription = `Override default \`numResults\` to suggest products, then terms`;
 exports.recommendationsDescription = `Use constructor's recommendations service, with \`"type": "recommendations"\``;
 exports.displaySearchTermHighlightsDescription = `Use constructor's auto highlighting of words that match the search keyword, with \`"displaySearchTermHighlights": true\``;
+exports.displayNoResultsMessageDescription = `Display a no results message for this section, with \`"displayNoResultsMessage": true\``;
 exports.customSectionDescription = `Use a custom section, by managing and passing your own data, with \`"type": "custom"\` and \`"data":[{...}]\``;
 exports.onFocusDescription = `Pass an \`onFocus\` callback function to execute some code each time the user applies focus to the text input field`;
 exports.onChangeDescription = `Pass an \`onChange\` callback function to execute some code each time the user changes the value of the text input field`;

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -49,7 +49,7 @@ const useCioAutocomplete = (options) => {
         totalNumResultsPerSection,
         request,
         featureToggles: features,
-        isOpen: isOpen && (items === null || items === void 0 ? void 0 : items.length) > 0,
+        isOpen,
         getMenuProps: () => (Object.assign(Object.assign({}, getMenuProps()), { className: 'cio-results', 'data-testid': 'cio-results', 'data-cnstrc-autosuggest': '' })),
         getLabelProps,
         openMenu,

package/lib/cjs/version.js

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function NoResults() {
+    return React.createElement("div", { className: 'cio-no-results-message' }, "No Results Found");
+}

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

@@ -2,12 +2,13 @@ import React, { useContext } from 'react';
 import SectionItem from '../SectionItem/SectionItem';
 import { camelToStartCase, translate } from '../../../utils';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
+import NoResults from '../AutocompleteResults/NoResults';
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
     const { getSectionProps, query, getFormProps, advancedParameters, getItemProps } = useContext(CioAutocompleteContext);
     const { displayShowAllResultsButton, translations } = advancedParameters || {};
     const { onSubmit } = getFormProps();
-    const { type, displayName } = section;
+    const { type, displayName, displayNoResultsMessage } = section;
     let sectionTitle = displayName;
     if (!sectionTitle) {
         switch (type) {
@@ -25,6 +26,11 @@ const DefaultRenderSectionItemsList = function ({ section }) {
                 break;
         }
     }
+    // Display no results message
+    if (!section?.data?.length && displayNoResultsMessage)
+        return (React.createElement("li", { ...getSectionProps(section) },
+            React.createElement("h5", { className: 'cio-section-name cio-sectionName', "aria-hidden": true }, camelToStartCase(sectionTitle)),
+            React.createElement(NoResults, null)));
     if (!section?.data?.length)
         return null;
     // @deprecated `cio-sectionName` will be removed in the next major release

package/lib/mjs/constants.js

@@ -125,6 +125,7 @@ export const numResultsDescription = `Override default \`numResults\` to only su
 export const sectionOrderDescription = `Override default \`numResults\` to suggest products, then terms`;
 export const recommendationsDescription = `Use constructor's recommendations service, with \`"type": "recommendations"\``;
 export const displaySearchTermHighlightsDescription = `Use constructor's auto highlighting of words that match the search keyword, with \`"displaySearchTermHighlights": true\``;
+export const displayNoResultsMessageDescription = `Display a no results message for this section, with \`"displayNoResultsMessage": true\``;
 export const customSectionDescription = `Use a custom section, by managing and passing your own data, with \`"type": "custom"\` and \`"data":[{...}]\``;
 export const onFocusDescription = `Pass an \`onFocus\` callback function to execute some code each time the user applies focus to the text input field`;
 export const onChangeDescription = `Pass an \`onChange\` callback function to execute some code each time the user changes the value of the text input field`;

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -48,7 +48,7 @@ const useCioAutocomplete = (options) => {
         totalNumResultsPerSection,
         request,
         featureToggles: features,
-        isOpen: isOpen && items?.length > 0,
+        isOpen,
         getMenuProps: () => ({
             ...getMenuProps(),
             className: 'cio-results',

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.23.24';
+export default '1.23.25';

package/lib/styles.css

@@ -191,4 +191,9 @@
   cursor: pointer;
   width: 15px;
   height: 15px;
-}
+}
+
+.cio-autocomplete .cio-section-search-suggestions .cio-no-results-message {
+  min-width: 160px;
+  margin: 15px 3px;
+}

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

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

package/lib/types/constants.d.ts

@@ -17,6 +17,7 @@ export declare const numResultsDescription = "Override default `numResults` to o
 export declare const sectionOrderDescription = "Override default `numResults` to suggest products, then terms";
 export declare const recommendationsDescription = "Use constructor's recommendations service, with `\"type\": \"recommendations\"`";
 export declare const displaySearchTermHighlightsDescription = "Use constructor's auto highlighting of words that match the search keyword, with `\"displaySearchTermHighlights\": true`";
+export declare const displayNoResultsMessageDescription = "Display a no results message for this section, with `\"displayNoResultsMessage\": true`";
 export declare const customSectionDescription = "Use a custom section, by managing and passing your own data, with `\"type\": \"custom\"` and `\"data\":[{...}]`";
 export declare const onFocusDescription = "Pass an `onFocus` callback function to execute some code each time the user applies focus to the text input field";
 export declare const onChangeDescription = "Pass an `onChange` callback function to execute some code each time the user changes the value of the text input field";

package/lib/types/types.d.ts

@@ -94,6 +94,7 @@ export type SectionConfiguration = {
     displayName?: string;
     numResults?: number;
     displaySearchTermHighlights?: boolean;
+    displayNoResultsMessage?: boolean;
     ref?: React.RefObject<HTMLElement>;
     renderItem?: (props: {
         item: Item;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.23.24";
+declare const _default: "1.23.25";
 export default _default;

package/package.json

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