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

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,13 +3,14 @@ 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, _c;
-    const { getSectionProps, query, getFormProps, advancedParameters, getItemProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const { getSectionProps, query, getFormProps, advancedParameters } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
     const { displayShowAllResultsButton, translations } = advancedParameters || {};
     const { onSubmit } = getFormProps();
     const { type, displayName, displayNoResultsMessage } = section;
@@ -42,7 +43,7 @@ const DefaultRenderSectionItemsList = function ({ 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' }, (_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

@@ -245,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/version.js

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

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,11 +1,12 @@
 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, displayNoResultsMessage } = section;
@@ -38,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

@@ -241,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/version.js

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

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

@@ -36,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/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.23.25";
+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.25",
+  "version": "1.23.26",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",