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

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

@@ -8,7 +8,7 @@ const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
     var _a, _b;
-    const { getSectionProps, getFormProps, advancedParameters } = (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 } = section;
@@ -34,7 +34,12 @@ 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) => {
+            if (typeof (section === null || section === void 0 ? void 0 : section.renderItem) === 'function') {
+                return section.renderItem({ item, query });
+            }
+            return (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' },

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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.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';
 /// //////////////////////////////
@@ -239,4 +239,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.
+`;
 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/utils.js

@@ -102,6 +102,15 @@ ${templateCode}
 exports.getStoryParams = getStoryParams;
 exports.functionStrings = {
     onSubmit: `(submitEvent) => console.dir(submitEvent)`,
+    renderItem: `({ item, query }) => (
+                      <div>
+                          <a href={item.data?.url}>
+                            <h3>{item.value}</h3>
+                            <img src={item.data?.image_url} alt={item.value} />
+                          </a>
+                          <p>{item.data?.price}</p>
+                      </div>
+                    )`,
 };
 const stringifyWithDefaults = (obj) => {
     // Stringify non-function values normally. Add a template block for functions to be replaced later

package/lib/cjs/version.js

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

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

@@ -4,7 +4,7 @@ import { camelToStartCase, translate } from '../../../utils';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
-    const { getSectionProps, getFormProps, advancedParameters } = useContext(CioAutocompleteContext);
+    const { getSectionProps, query, getFormProps, advancedParameters } = useContext(CioAutocompleteContext);
     const { displayShowAllResultsButton, translations } = advancedParameters || {};
     const { onSubmit } = getFormProps();
     const { type, displayName } = section;
@@ -30,7 +30,12 @@ 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) => {
+            if (typeof section?.renderItem === 'function') {
+                return section.renderItem({ item, query });
+            }
+            return (React.createElement(SectionItem, { item: item, key: item?.id, displaySearchTermHighlights: section.displaySearchTermHighlights }));
+        })),
         displayShowAllResultsButton &&
             type === 'autocomplete' &&
             section.indexSectionName === 'Products' && (React.createElement("div", { className: 'cio-section-footer' },

package/lib/mjs/constants.js

@@ -235,4 +235,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.
+`;
 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/utils.js

@@ -86,6 +86,15 @@ ${templateCode}
 };
 export const functionStrings = {
     onSubmit: `(submitEvent) => console.dir(submitEvent)`,
+    renderItem: `({ item, query }) => (
+                      <div>
+                          <a href={item.data?.url}>
+                            <h3>{item.value}</h3>
+                            <img src={item.data?.image_url} alt={item.value} />
+                          </a>
+                          <p>{item.data?.price}</p>
+                      </div>
+                    )`,
 };
 export const stringifyWithDefaults = (obj) => {
     // Stringify non-function values normally. Add a template block for functions to be replaced later

package/lib/mjs/version.js

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

package/lib/types/constants.d.ts

@@ -34,4 +34,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";
 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

@@ -90,6 +90,10 @@ export type SectionConfiguration = {
     numResults?: number;
     displaySearchTermHighlights?: boolean;
     ref?: React.RefObject<HTMLElement>;
+    renderItem?: (props: {
+        item: Item;
+        query: string;
+    }) => ReactNode;
 };
 export interface AutocompleteSectionConfiguration extends SectionConfiguration {
     type?: 'autocomplete';

package/lib/types/utils.d.ts

@@ -32,6 +32,7 @@ export declare const getStoryParams: (storyCode: any, templateCode: any, importC
 };
 export declare const functionStrings: {
     onSubmit: string;
+    renderItem: string;
 };
 export declare const stringifyWithDefaults: (obj: any) => string;
 export declare const disableStoryActions: (story: any) => void;

package/lib/types/version.d.ts

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

package/package.json

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