@constructor-io/constructorio-ui-plp 1.5.0 → 1.6.0

package/lib/cjs/components/ProductCard/ProductCard.js

@@ -7,11 +7,13 @@ const callbacks_1 = require("../../hooks/callbacks");
 const ProductSwatch_1 = tslib_1.__importDefault(require("../ProductSwatch"));
 const useProduct_1 = tslib_1.__importDefault(require("../../hooks/useProduct"));
 const utils_1 = require("../../utils");
+const RenderPropsWrapper_1 = tslib_1.__importDefault(require("../RenderPropsWrapper/RenderPropsWrapper"));
 const constants_1 = require("../../constants");
 /**
  * ProductCard component that has Constructor tracking built-in.
  */
 function ProductCard(props) {
+    var _a;
     const [isRolloverImageShown, setIsRolloverImageShown] = (0, react_1.useState)(false);
     const cardRef = (0, react_1.useRef)(null);
     const { item, children } = props;
@@ -52,26 +54,27 @@ function ProductCard(props) {
         }
         handleRolloverImageState(false);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null, typeof children === 'function' ? (children({
-        item,
-        productInfo,
-        formatPrice,
-        onAddToCart,
-        onClick,
-        onMouseEnter,
-        onMouseLeave,
-        isRolloverImageShown,
-        productCardCnstrcDataAttributes: cnstrcData,
-    })) : (react_1.default.createElement("a", Object.assign({}, cnstrcData, { className: 'cio-product-card', href: itemUrl, ref: cardRef, onClick: (e) => { var _a; return onClick(e, item, (_a = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _a === void 0 ? void 0 : _a.variationId); } }),
-        react_1.default.createElement("div", { className: 'cio-image-container', onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
-            react_1.default.createElement("img", { alt: itemName, src: itemImageUrl, className: 'cio-image' }),
-            rolloverImage && (react_1.default.createElement("img", { alt: `${itemName} rollover`, src: rolloverImage, loading: 'lazy', className: (0, utils_1.concatStyles)('cio-image cio-rollover-image', isRolloverImageShown && 'is-active') }))),
-        react_1.default.createElement("div", { className: 'cio-content' },
-            react_1.default.createElement("div", { className: 'cio-item-prices-container' },
-                hasSalePrice && (react_1.default.createElement("div", { className: 'cio-item-price', id: 'cio-sale-price' }, formatPrice(salePrice))),
-                Number(itemPrice) >= 0 && (react_1.default.createElement("div", { className: (0, utils_1.concatStyles)('cio-item-price', hasSalePrice && 'cio-item-price-strikethrough') }, formatPrice(itemPrice)))),
-            react_1.default.createElement("div", { className: 'cio-item-name' }, itemName),
-            productSwatch && react_1.default.createElement(ProductSwatch_1.default, { swatchObject: productSwatch })),
-        react_1.default.createElement("button", { className: 'cio-add-to-cart-button', type: 'button', onClick: (e) => { var _a; return onAddToCart(e, item, itemPrice, (_a = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _a === void 0 ? void 0 : _a.variationId); } }, "Add to Cart")))));
+    return (react_1.default.createElement(RenderPropsWrapper_1.default, { props: {
+            item,
+            productInfo,
+            formatPrice,
+            onAddToCart,
+            onClick,
+            onMouseEnter,
+            onMouseLeave,
+            isRolloverImageShown,
+            productCardCnstrcDataAttributes: cnstrcData,
+        }, override: children, htmlOverride: (_a = state.renderOverrides.productCard) === null || _a === void 0 ? void 0 : _a.renderHtml, topLevelAttributes: Object.assign(Object.assign({}, cnstrcData), { className: 'cio-product-card' }) },
+        react_1.default.createElement("a", Object.assign({}, cnstrcData, { className: 'cio-product-card', href: itemUrl, ref: cardRef, onClick: (e) => { var _a; return onClick(e, item, (_a = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _a === void 0 ? void 0 : _a.variationId); } }),
+            react_1.default.createElement("div", { className: 'cio-image-container', onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+                react_1.default.createElement("img", { alt: itemName, src: itemImageUrl, className: 'cio-image' }),
+                rolloverImage && (react_1.default.createElement("img", { alt: `${itemName} rollover`, src: rolloverImage, loading: 'lazy', className: (0, utils_1.concatStyles)('cio-image cio-rollover-image', isRolloverImageShown && 'is-active') }))),
+            react_1.default.createElement("div", { className: 'cio-content' },
+                react_1.default.createElement("div", { className: 'cio-item-prices-container' },
+                    hasSalePrice && (react_1.default.createElement("div", { className: 'cio-item-price', id: 'cio-sale-price' }, formatPrice(salePrice))),
+                    Number(itemPrice) >= 0 && (react_1.default.createElement("div", { className: (0, utils_1.concatStyles)('cio-item-price', hasSalePrice && 'cio-item-price-strikethrough') }, formatPrice(itemPrice)))),
+                react_1.default.createElement("div", { className: 'cio-item-name' }, itemName),
+                productSwatch && react_1.default.createElement(ProductSwatch_1.default, { swatchObject: productSwatch })),
+            react_1.default.createElement("button", { className: 'cio-add-to-cart-button', type: 'button', onClick: (e) => { var _a; return onAddToCart(e, item, itemPrice, (_a = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _a === void 0 ? void 0 : _a.variationId); } }, "Add to Cart"))));
 }
 exports.default = ProductCard;

package/lib/cjs/components/ProductCard/index.js

@@ -2,5 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const ProductCard_1 = tslib_1.__importDefault(require("./ProductCard"));
-tslib_1.__exportStar(require("./ProductCard"), exports);
 exports.default = ProductCard_1.default;

package/lib/cjs/components/RenderPropsWrapper/CustomHtmlRender.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+function CustomHtmlRender(props) {
+    const { renderHtml, topLevelAttributes = {} } = props, otherProps = tslib_1.__rest(props, ["renderHtml", "topLevelAttributes"]);
+    const ref = (0, react_1.useRef)(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const customElement = renderHtml(otherProps);
+    const isDomElement = customElement instanceof HTMLElement;
+    const isReactNode = (0, react_1.isValidElement)(customElement);
+    if (isDomElement && ref.current) {
+        ref.current.innerHTML = ''; // Clear previous content
+        ref.current.appendChild(customElement);
+    }
+    if (isReactNode) {
+        return customElement;
+    }
+    if (isDomElement) {
+        return react_1.default.createElement("div", Object.assign({}, topLevelAttributes, { ref: ref }));
+    }
+    return null;
+}
+exports.default = CustomHtmlRender;

package/lib/cjs/components/RenderPropsWrapper/RenderPropsWrapper.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable no-nested-ternary */
+const react_1 = tslib_1.__importDefault(require("react"));
+const CustomHtmlRender_1 = tslib_1.__importDefault(require("./CustomHtmlRender"));
+function RenderPropsWrapper({ props, children, override, htmlOverride, topLevelAttributes, }) {
+    const isRenderProps = typeof override === 'function';
+    const isJSX = typeof override === 'object';
+    const isHtmlOverride = typeof htmlOverride === 'function';
+    return (react_1.default.createElement(react_1.default.Fragment, null, isRenderProps ? (override(props)) : isJSX ? (override) : isHtmlOverride ? (react_1.default.createElement(CustomHtmlRender_1.default, Object.assign({}, props, { renderHtml: htmlOverride, topLevelAttributes: topLevelAttributes }))) : (
+    // Default implementation
+    children)));
+}
+exports.default = RenderPropsWrapper;

package/lib/cjs/hooks/useCioPlpProvider.js

@@ -7,7 +7,7 @@ const defaultGetters = tslib_1.__importStar(require("../utils/itemFieldGetters")
 const defaultFormatters = tslib_1.__importStar(require("../utils/formatters"));
 const defaultUrlHelpers = tslib_1.__importStar(require("../utils/urlHelpers"));
 function useCioPlpProvider(props) {
-    const { apiKey, formatters, callbacks, itemFieldGetters, urlHelpers, staticRequestConfigs = {}, cioClient: customCioClient, cioClientOptions: customCioClientOptions = {}, } = props;
+    const { apiKey, formatters, callbacks, itemFieldGetters, urlHelpers, staticRequestConfigs = {}, renderOverrides = {}, cioClient: customCioClient, cioClientOptions: customCioClientOptions = {}, } = props;
     const [cioClientOptions, setCioClientOptions] = (0, react_1.useState)(customCioClientOptions);
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioClient: customCioClient, options: cioClientOptions });
     const contextValue = (0, react_1.useMemo)(() => ({
@@ -19,6 +19,7 @@ function useCioPlpProvider(props) {
         formatters: Object.assign(Object.assign({}, defaultFormatters), formatters),
         callbacks: Object.assign({}, callbacks),
         urlHelpers: Object.assign(Object.assign({}, defaultUrlHelpers), urlHelpers),
+        renderOverrides: Object.assign({}, renderOverrides),
     }), [
         cioClient,
         cioClientOptions,
@@ -26,6 +27,7 @@ function useCioPlpProvider(props) {
         formatters,
         callbacks,
         urlHelpers,
+        renderOverrides,
         staticRequestConfigs,
     ]);
     return contextValue;

package/lib/cjs/version.js

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

package/lib/mjs/components/ProductCard/ProductCard.js

@@ -4,6 +4,7 @@ import { useOnAddToCart, useOnProductCardClick } from '../../hooks/callbacks';
 import ProductSwatch from '../ProductSwatch';
 import useProductInfo from '../../hooks/useProduct';
 import { concatStyles, getProductCardCnstrcDataAttributes } from '../../utils';
+import RenderPropsWrapper from '../RenderPropsWrapper/RenderPropsWrapper';
 import { EMITTED_EVENTS } from '../../constants';
 /**
  * ProductCard component that has Constructor tracking built-in.
@@ -48,25 +49,26 @@ export default function ProductCard(props) {
         }
         handleRolloverImageState(false);
     };
-    return (React.createElement(React.Fragment, null, typeof children === 'function' ? (children({
-        item,
-        productInfo,
-        formatPrice,
-        onAddToCart,
-        onClick,
-        onMouseEnter,
-        onMouseLeave,
-        isRolloverImageShown,
-        productCardCnstrcDataAttributes: cnstrcData,
-    })) : (React.createElement("a", { ...cnstrcData, className: 'cio-product-card', href: itemUrl, ref: cardRef, onClick: (e) => onClick(e, item, productSwatch?.selectedVariation?.variationId) },
-        React.createElement("div", { className: 'cio-image-container', onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
-            React.createElement("img", { alt: itemName, src: itemImageUrl, className: 'cio-image' }),
-            rolloverImage && (React.createElement("img", { alt: `${itemName} rollover`, src: rolloverImage, loading: 'lazy', className: concatStyles('cio-image cio-rollover-image', isRolloverImageShown && 'is-active') }))),
-        React.createElement("div", { className: 'cio-content' },
-            React.createElement("div", { className: 'cio-item-prices-container' },
-                hasSalePrice && (React.createElement("div", { className: 'cio-item-price', id: 'cio-sale-price' }, formatPrice(salePrice))),
-                Number(itemPrice) >= 0 && (React.createElement("div", { className: concatStyles('cio-item-price', hasSalePrice && 'cio-item-price-strikethrough') }, formatPrice(itemPrice)))),
-            React.createElement("div", { className: 'cio-item-name' }, itemName),
-            productSwatch && React.createElement(ProductSwatch, { swatchObject: productSwatch })),
-        React.createElement("button", { className: 'cio-add-to-cart-button', type: 'button', onClick: (e) => onAddToCart(e, item, itemPrice, productSwatch?.selectedVariation?.variationId) }, "Add to Cart")))));
+    return (React.createElement(RenderPropsWrapper, { props: {
+            item,
+            productInfo,
+            formatPrice,
+            onAddToCart,
+            onClick,
+            onMouseEnter,
+            onMouseLeave,
+            isRolloverImageShown,
+            productCardCnstrcDataAttributes: cnstrcData,
+        }, override: children, htmlOverride: state.renderOverrides.productCard?.renderHtml, topLevelAttributes: { ...cnstrcData, className: 'cio-product-card' } },
+        React.createElement("a", { ...cnstrcData, className: 'cio-product-card', href: itemUrl, ref: cardRef, onClick: (e) => onClick(e, item, productSwatch?.selectedVariation?.variationId) },
+            React.createElement("div", { className: 'cio-image-container', onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+                React.createElement("img", { alt: itemName, src: itemImageUrl, className: 'cio-image' }),
+                rolloverImage && (React.createElement("img", { alt: `${itemName} rollover`, src: rolloverImage, loading: 'lazy', className: concatStyles('cio-image cio-rollover-image', isRolloverImageShown && 'is-active') }))),
+            React.createElement("div", { className: 'cio-content' },
+                React.createElement("div", { className: 'cio-item-prices-container' },
+                    hasSalePrice && (React.createElement("div", { className: 'cio-item-price', id: 'cio-sale-price' }, formatPrice(salePrice))),
+                    Number(itemPrice) >= 0 && (React.createElement("div", { className: concatStyles('cio-item-price', hasSalePrice && 'cio-item-price-strikethrough') }, formatPrice(itemPrice)))),
+                React.createElement("div", { className: 'cio-item-name' }, itemName),
+                productSwatch && React.createElement(ProductSwatch, { swatchObject: productSwatch })),
+            React.createElement("button", { className: 'cio-add-to-cart-button', type: 'button', onClick: (e) => onAddToCart(e, item, itemPrice, productSwatch?.selectedVariation?.variationId) }, "Add to Cart"))));
 }

package/lib/mjs/components/ProductCard/index.js

@@ -1,3 +1,2 @@
 import ProductCard from './ProductCard';
-export * from './ProductCard';
 export default ProductCard;

package/lib/mjs/components/RenderPropsWrapper/CustomHtmlRender.js

@@ -0,0 +1,20 @@
+import React, { useRef, isValidElement } from 'react';
+export default function CustomHtmlRender(props) {
+    const { renderHtml, topLevelAttributes = {}, ...otherProps } = props;
+    const ref = useRef(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const customElement = renderHtml(otherProps);
+    const isDomElement = customElement instanceof HTMLElement;
+    const isReactNode = isValidElement(customElement);
+    if (isDomElement && ref.current) {
+        ref.current.innerHTML = ''; // Clear previous content
+        ref.current.appendChild(customElement);
+    }
+    if (isReactNode) {
+        return customElement;
+    }
+    if (isDomElement) {
+        return React.createElement("div", { ...topLevelAttributes, ref: ref });
+    }
+    return null;
+}

package/lib/mjs/components/RenderPropsWrapper/RenderPropsWrapper.js

@@ -0,0 +1,11 @@
+/* eslint-disable no-nested-ternary */
+import React from 'react';
+import CustomHtmlRender from './CustomHtmlRender';
+export default function RenderPropsWrapper({ props, children, override, htmlOverride, topLevelAttributes, }) {
+    const isRenderProps = typeof override === 'function';
+    const isJSX = typeof override === 'object';
+    const isHtmlOverride = typeof htmlOverride === 'function';
+    return (React.createElement(React.Fragment, null, isRenderProps ? (override(props)) : isJSX ? (override) : isHtmlOverride ? (React.createElement(CustomHtmlRender, { ...props, renderHtml: htmlOverride, topLevelAttributes: topLevelAttributes })) : (
+    // Default implementation
+    children)));
+}

package/lib/mjs/hooks/useCioPlpProvider.js

@@ -4,7 +4,7 @@ import * as defaultGetters from '../utils/itemFieldGetters';
 import * as defaultFormatters from '../utils/formatters';
 import * as defaultUrlHelpers from '../utils/urlHelpers';
 export default function useCioPlpProvider(props) {
-    const { apiKey, formatters, callbacks, itemFieldGetters, urlHelpers, staticRequestConfigs = {}, cioClient: customCioClient, cioClientOptions: customCioClientOptions = {}, } = props;
+    const { apiKey, formatters, callbacks, itemFieldGetters, urlHelpers, staticRequestConfigs = {}, renderOverrides = {}, cioClient: customCioClient, cioClientOptions: customCioClientOptions = {}, } = props;
     const [cioClientOptions, setCioClientOptions] = useState(customCioClientOptions);
     const cioClient = useCioClient({ apiKey, cioClient: customCioClient, options: cioClientOptions });
     const contextValue = useMemo(() => ({
@@ -16,6 +16,7 @@ export default function useCioPlpProvider(props) {
         formatters: { ...defaultFormatters, ...formatters },
         callbacks: { ...callbacks },
         urlHelpers: { ...defaultUrlHelpers, ...urlHelpers },
+        renderOverrides: { ...renderOverrides },
     }), [
         cioClient,
         cioClientOptions,
@@ -23,6 +24,7 @@ export default function useCioPlpProvider(props) {
         formatters,
         callbacks,
         urlHelpers,
+        renderOverrides,
         staticRequestConfigs,
     ]);
     return contextValue;

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.5.0';
+export default '1.6.0';

package/lib/types/components/ProductCard/ProductCard.d.ts

@@ -1,56 +1,6 @@
 import React from 'react';
-import { CnstrcData, IncludeRenderProps, Item, ProductInfoObject } from '../../types';
-interface Props {
-    /**
-     * Constructor's Transformed API Item Object.
-     */
-    item: Item;
-}
-/**
- * Props that will be passed to the renderProps function
- */
-export interface ProductCardRenderProps extends ProductCardProps {
-    /**
-     * Function to format the price. Defaults to "$0.00".
-     * Set globally at the CioPlp provider level.
-     */
-    formatPrice: (price: number) => string;
-    /**
-     * Object containing information about the current product, variation
-     */
-    productInfo: ProductInfoObject;
-    /**
-     * Callback to run on add-to-cart event.
-     * Set globally at the CioPlp provider level.
-     */
-    onAddToCart: (event: React.MouseEvent, item: Item, revenue: number, selectedVariation: string) => void;
-    /**
-     * Callback to run on Product Card Click.
-     * Set globally at the CioPlp provider level.
-     */
-    onClick: (event: React.MouseEvent, item: Item) => void;
-    /**
-     * Callback to run on Product Card Mouse Enter.
-     * Set globally at the CioPlp provider level.
-     */
-    onMouseEnter: (event: React.MouseEvent, item: Item) => void;
-    /**
-     * Callback to run on Product Card Mouse Leave.
-     * Set globally at the CioPlp provider level.
-     */
-    onMouseLeave: (event: React.MouseEvent, item: Item) => void;
-    /**
-     * Boolean to show/hide the rollover image.
-     */
-    isRolloverImageShown: boolean;
-    /**
-     * Data Attributes to surface on parent div of product card.
-     */
-    productCardCnstrcDataAttributes: CnstrcData;
-}
-export type ProductCardProps = IncludeRenderProps<Props, ProductCardRenderProps>;
+import { ProductCardProps } from '../../types';
 /**
  * ProductCard component that has Constructor tracking built-in.
  */
 export default function ProductCard(props: ProductCardProps): React.JSX.Element;
-export {};

package/lib/types/components/ProductCard/index.d.ts

@@ -1,3 +1,2 @@
 import ProductCard from './ProductCard';
-export * from './ProductCard';
 export default ProductCard;

package/lib/types/components/RenderPropsWrapper/CustomHtmlRender.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+interface CustomHtmlRenderProps<T> {
+    renderHtml: (props: T) => HTMLElement | ReactNode;
+    topLevelAttributes?: object;
+}
+export default function CustomHtmlRender<T>(props: T & CustomHtmlRenderProps<T>): React.JSX.Element | null;
+export {};

package/lib/types/components/RenderPropsWrapper/RenderPropsWrapper.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+import { RenderPropsChildren } from '../../types';
+export interface ReactPropsWrapperProps<T> {
+    /**
+     * The props to be passed to the render props function provided
+     */
+    props: T;
+    /**
+     * The default implementation to be nested within the wrapper
+     */
+    children: ReactNode;
+    /**
+     * One of Function<T> | JSX. Overrides default implementation
+     */
+    override?: RenderPropsChildren<T>;
+    /**
+     * One of Function<T> -> HTMLElement. Overrides default implementation
+     */
+    htmlOverride?: (props: T) => HTMLElement | ReactNode;
+    /**
+     * Object containing the attributes to be spread on the top-level div. To be used with `htmlOverride`
+     */
+    topLevelAttributes?: object;
+}
+export default function RenderPropsWrapper<T>({ props, children, override, htmlOverride, topLevelAttributes, }: ReactPropsWrapperProps<T>): React.JSX.Element;

package/lib/types/index.d.ts

@@ -28,7 +28,6 @@ export type { FiltersProps, FiltersWithRenderProps } from './components/Filters'
 export type { GroupsProps, GroupsWithRenderProps } from './components/Groups';
 export type { MobileModalProps } from './components/MobileModal';
 export type { PaginationProps, PaginationWithRenderProps } from './components/Pagination';
-export type { ProductCardProps } from './components/ProductCard';
 export type { ProductSwatchProps } from './components/ProductSwatch';
 export type { SortProps, SortWithRenderProps } from './components/Sort';
 export type { UseOptionsListProps } from './hooks/useOptionsList';

package/lib/types/types.d.ts

@@ -28,6 +28,60 @@ export interface Callbacks {
     onSwatchClick?: (event: React.MouseEvent, swatch: SwatchItem) => void;
     onRedirect?: (url: string) => void;
 }
+interface ProductCardBaseProps {
+    /**
+     * Constructor's Transformed API Item Object.
+     */
+    item: Item;
+}
+/**
+ * Props that will be passed to the renderProps function
+ */
+export interface ProductCardRenderProps extends ProductCardProps {
+    /**
+     * Function to format the price. Defaults to "$0.00".
+     * Set globally at the CioPlp provider level.
+     */
+    formatPrice: (price: number) => string;
+    /**
+     * Object containing information about the current product, variation
+     */
+    productInfo: ProductInfoObject;
+    /**
+     * Callback to run on add-to-cart event.
+     * Set globally at the CioPlp provider level.
+     */
+    onAddToCart: (event: React.MouseEvent, item: Item, revenue: number, selectedVariation: string) => void;
+    /**
+     * Callback to run on Product Card Click.
+     * Set globally at the CioPlp provider level.
+     */
+    onClick: (event: React.MouseEvent, item: Item) => void;
+    /**
+     * Callback to run on Product Card Mouse Enter.
+     * Set globally at the CioPlp provider level.
+     */
+    onMouseEnter: (event: React.MouseEvent, item: Item) => void;
+    /**
+     * Callback to run on Product Card Mouse Leave.
+     * Set globally at the CioPlp provider level.
+     */
+    onMouseLeave: (event: React.MouseEvent, item: Item) => void;
+    /**
+     * Boolean to show/hide the rollover image.
+     */
+    isRolloverImageShown: boolean;
+    /**
+     * Data Attributes to surface on parent div of product card.
+     */
+    productCardCnstrcDataAttributes: CnstrcData;
+}
+export type ProductCardProps = IncludeRenderProps<ProductCardBaseProps, ProductCardRenderProps>;
+export interface RenderOverrides {
+    productCard?: {
+        renderHtml?: (props: ProductCardRenderProps) => HTMLElement | ReactNode;
+    };
+}
 export type PlpSearchData = PlpSearchDataResults | PlpSearchDataRedirect;
 export interface PlpSearchDataResults {
     resultId: string;
@@ -96,6 +150,7 @@ export interface PlpContextValue {
     formatters: Formatters;
     callbacks: Callbacks;
     urlHelpers: UrlHelpers;
+    renderOverrides: RenderOverrides;
 }
 export interface PrimaryColorStyles {
     '--primary-color-h': string;
@@ -154,6 +209,7 @@ export interface CioPlpProviderProps {
     formatters?: Partial<Formatters>;
     callbacks?: Partial<Callbacks>;
     itemFieldGetters?: Partial<ItemFieldGetters>;
+    renderOverrides?: Partial<RenderOverrides>;
     urlHelpers?: Partial<UrlHelpers>;
     initialSearchResponse?: SearchResponse;
     initialBrowseResponse?: GetBrowseResultsResponse;
@@ -242,6 +298,7 @@ export type CnstrcData = Record<`data-cnstrc-${string}`, string | number | boole
 export type PropsWithChildren<P> = P & {
     children?: ReactNode;
 };
+export type RenderPropsChildren<RenderProps> = ((props: RenderProps) => ReactNode) | ReactNode;
 /**
  * Composes a type for a Component that accepts
  * - Props P,

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.5.0";
+declare const _default: "1.6.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-plp",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Constructor PLP UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",