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

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/SectionItem/CustomSectionItem.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
+function CustomSectionItem(props) {
+    const { renderItem, item, query } = props;
+    const { getItemProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const ref = (0, react_1.useRef)(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const customElement = (0, react_1.useMemo)(() => renderItem({ item, query, getItemProps }), [item]);
+    const isDomElement = customElement instanceof HTMLElement;
+    const isReactNode = (0, react_1.isValidElement)(customElement);
+    (0, react_1.useEffect)(() => {
+        if (isDomElement && ref.current) {
+            ref.current.innerHTML = ''; // Clear previous content
+            ref.current.appendChild(customElement);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [item]);
+    if (isReactNode) {
+        return customElement;
+    }
+    if (isDomElement) {
+        return react_1.default.createElement("div", Object.assign({}, getItemProps(item), { ref: ref }));
+    }
+    return null;
+}
+exports.default = CustomSectionItem;

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

@@ -3,15 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const SectionItem_1 = tslib_1.__importDefault(require("../SectionItem/SectionItem"));
+const CustomSectionItem_1 = tslib_1.__importDefault(require("../SectionItem/CustomSectionItem"));
 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;
-    const { getSectionProps, query, getFormProps, advancedParameters, getItemProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    var _a, _b, _c;
+    const { getSectionProps, query, getFormProps, advancedParameters } = (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,14 +31,19 @@ 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 });
+                return (react_1.default.createElement(CustomSectionItem_1.default, { renderItem: section.renderItem, item: item, query: query, key: item.id }));
             }
             return (react_1.default.createElement(SectionItem_1.default, { item: item, key: item === null || item === void 0 ? void 0 : item.id, displaySearchTermHighlights: section.displaySearchTermHighlights }));
         })),

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`;
@@ -244,5 +245,6 @@ exports.translationsDescription = `Pass a \`translations\` object to display tra
 `;
 exports.customRenderItemDescription = `Customize the rendering of individual items within a Section by providing a \`renderItem\` function. This function allows you to define how each item should be rendered.
 - Make sure to call \`getItemProps(item)\` and spread like this \`<div {...getItemProps(item)}/>\` on the container of each custom rendered item or else tracking will not work.
+- Supports both ReactNode and HTMLElement as a return type
 `;
 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/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.26';

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/SectionItem/CustomSectionItem.js

@@ -0,0 +1,25 @@
+import React, { useContext, useMemo, useEffect, useRef, isValidElement } from 'react';
+import { CioAutocompleteContext } from '../CioAutocompleteProvider';
+export default function CustomSectionItem(props) {
+    const { renderItem, item, query } = props;
+    const { getItemProps } = useContext(CioAutocompleteContext);
+    const ref = useRef(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const customElement = useMemo(() => renderItem({ item, query, getItemProps }), [item]);
+    const isDomElement = customElement instanceof HTMLElement;
+    const isReactNode = isValidElement(customElement);
+    useEffect(() => {
+        if (isDomElement && ref.current) {
+            ref.current.innerHTML = ''; // Clear previous content
+            ref.current.appendChild(customElement);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [item]);
+    if (isReactNode) {
+        return customElement;
+    }
+    if (isDomElement) {
+        return React.createElement("div", { ...getItemProps(item), ref: ref });
+    }
+    return null;
+}

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

@@ -1,13 +1,15 @@
 import React, { useContext } from 'react';
 import SectionItem from '../SectionItem/SectionItem';
+import CustomSectionItem from '../SectionItem/CustomSectionItem';
 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 { getSectionProps, query, getFormProps, advancedParameters } = 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 +27,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
@@ -32,7 +39,7 @@ const DefaultRenderSectionItemsList = function ({ 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) => {
             if (typeof section?.renderItem === 'function') {
-                return section.renderItem({ item, query, getItemProps });
+                return (React.createElement(CustomSectionItem, { renderItem: section.renderItem, item: item, query: query, key: item.id }));
             }
             return (React.createElement(SectionItem, { item: item, key: item?.id, displaySearchTermHighlights: section.displaySearchTermHighlights }));
         })),

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`;
@@ -240,5 +241,6 @@ export const translationsDescription = `Pass a \`translations\` object to displa
 `;
 export const customRenderItemDescription = `Customize the rendering of individual items within a Section by providing a \`renderItem\` function. This function allows you to define how each item should be rendered.
 - Make sure to call \`getItemProps(item)\` and spread like this \`<div {...getItemProps(item)}/>\` on the container of each custom rendered item or else tracking will not work.
+- Supports both ReactNode and HTMLElement as a return type
 `;
 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/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.26';

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/components/Autocomplete/SectionItem/CustomSectionItem.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { Item } from '../../../types';
+interface CustomItemProps {
+    item: Item;
+    renderItem: (props: {
+        item: Item;
+        query: string;
+        getItemProps: (item: Item) => any;
+    }) => HTMLElement | ReactNode;
+    query: string;
+}
+export default function CustomSectionItem(props: CustomItemProps): JSX.Element | null;
+export {};

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";
@@ -35,5 +36,5 @@ export declare const termsWithImagesAndCountsDescription = "Pass boolean flags f
 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    \"show all results\": \"...\"\n  }\n```\n";
-export declare const customRenderItemDescription = "Customize the rendering of individual items within a Section by providing a `renderItem` function. This function allows you to define how each item should be rendered.\n- Make sure to call `getItemProps(item)` and spread like this `<div {...getItemProps(item)}/>` on the container of each custom rendered item or else tracking will not work.\n";
+export declare const customRenderItemDescription = "Customize the rendering of individual items within a Section by providing a `renderItem` function. This function allows you to define how each item should be rendered.\n- Make sure to call `getItemProps(item)` and spread like this `<div {...getItemProps(item)}/>` on the container of each custom rendered item or else tracking will not work.\n- Supports both ReactNode and HTMLElement as a return type\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/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.26";
 export default _default;

package/package.json

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