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

package/lib/cjs/components/ProductCard/ProductCard.css

@@ -8,6 +8,7 @@
 .cio-image-container {
   width: 100%;
   height: auto;
+  position: relative;
 }
 
 .cio-image {
@@ -16,6 +17,18 @@
   object-fit: cover;
 }
 
+.cio-rollover-image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+}
+
+.cio-rollover-image.is-active {
+  opacity: 1;
+}
+
 .cio-content {
   width: 100%;
 }
@@ -56,4 +69,4 @@
   height: 40px;
   font-size: 16px;
   cursor: pointer;
-}
+}

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

@@ -1,20 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const useCioPlpContext_1 = require("../../hooks/useCioPlpContext");
 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;
     const state = (0, useCioPlpContext_1.useCioPlpContext)();
     const productInfo = (0, useProduct_1.default)({ item });
-    const { productSwatch, itemName, itemPrice, itemImageUrl, itemUrl, salePrice, hasSalePrice } = productInfo;
+    const { productSwatch, itemName, itemPrice, itemImageUrl, itemUrl, salePrice, hasSalePrice, rolloverImage, } = productInfo;
     if (!state) {
         throw new Error('This component is meant to be used within the CioPlp provider.');
     }
@@ -26,22 +31,50 @@ function ProductCard(props) {
     const { formatPrice } = state.formatters;
     const onClick = (0, callbacks_1.useOnProductCardClick)(client, state.callbacks.onProductCardClick);
     const cnstrcData = (0, utils_1.getProductCardCnstrcDataAttributes)(productInfo);
-    return (react_1.default.createElement(react_1.default.Fragment, null, typeof children === 'function' ? (children({
-        item,
-        productInfo,
-        formatPrice,
-        onAddToCart,
-        onClick,
-        productCardCnstrcDataAttributes: cnstrcData,
-    })) : (react_1.default.createElement("a", Object.assign({}, cnstrcData, { className: 'cio-product-card', href: itemUrl, 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' },
-            react_1.default.createElement("img", { alt: itemName, src: itemImageUrl, className: 'cio-image' })),
-        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")))));
+    const handleRolloverImageState = (isShown) => {
+        var _a;
+        setIsRolloverImageShown(isShown);
+        if (isShown && rolloverImage) {
+            const event = new CustomEvent(constants_1.EMITTED_EVENTS.PRODUCT_CARD_IMAGE_ROLLOVER, {
+                detail: { item },
+                bubbles: true,
+            });
+            (_a = cardRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
+        }
+    };
+    const onMouseEnter = (event) => {
+        if (state.callbacks.onProductCardMouseEnter) {
+            state.callbacks.onProductCardMouseEnter(event, item);
+        }
+        handleRolloverImageState(true);
+    };
+    const onMouseLeave = (event) => {
+        if (state.callbacks.onProductCardMouseLeave) {
+            state.callbacks.onProductCardMouseLeave(event, item);
+        }
+        handleRolloverImageState(false);
+    };
+    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/constants.js

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEMO_API_KEY = void 0;
+exports.EMITTED_EVENTS = exports.DEMO_API_KEY = void 0;
 // eslint-disable-next-line import/prefer-default-export
 exports.DEMO_API_KEY = 'key_M57QS8SMPdLdLx4x';
+exports.EMITTED_EVENTS = {
+    PRODUCT_CARD_IMAGE_ROLLOVER: 'cio.ui-plp.productCardImageRollover',
+};

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/hooks/useProduct.js

@@ -6,7 +6,7 @@ const useCioPlpContext_1 = require("./useCioPlpContext");
 const utils_1 = require("../utils");
 const itemFieldGetters_1 = require("../utils/itemFieldGetters");
 const useProductInfo = ({ item }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const state = (0, useCioPlpContext_1.useCioPlpContext)();
     const productSwatch = (0, useProductSwatch_1.default)({ item });
     if (!item.data || !item.itemId || !item.itemName) {
@@ -14,13 +14,19 @@ const useProductInfo = ({ item }) => {
     }
     const getPrice = (0, utils_1.tryCatchify)(((_a = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _a === void 0 ? void 0 : _a.getPrice) || itemFieldGetters_1.getPrice);
     const getSalePrice = (0, utils_1.tryCatchify)(((_b = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _b === void 0 ? void 0 : _b.getSalePrice) || itemFieldGetters_1.getSalePrice);
-    const itemName = ((_c = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _c === void 0 ? void 0 : _c.itemName) || item.itemName;
-    const itemPrice = ((_d = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _d === void 0 ? void 0 : _d.price) || getPrice(item);
-    const itemImageUrl = ((_e = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _e === void 0 ? void 0 : _e.imageUrl) || item.imageUrl;
-    const itemUrl = ((_f = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _f === void 0 ? void 0 : _f.url) || item.url;
-    const variationId = (_g = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _g === void 0 ? void 0 : _g.variationId;
+    const getRolloverImage = (0, utils_1.tryCatchify)(((_c = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _c === void 0 ? void 0 : _c.getRolloverImage) || itemFieldGetters_1.getRolloverImage);
+    const itemName = ((_d = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _d === void 0 ? void 0 : _d.itemName) || item.itemName;
+    const itemPrice = ((_e = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _e === void 0 ? void 0 : _e.price) || getPrice(item);
+    const itemImageUrl = ((_f = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _f === void 0 ? void 0 : _f.imageUrl) || item.imageUrl;
+    const itemUrl = ((_g = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _g === void 0 ? void 0 : _g.url) || item.url;
+    const variationId = (_h = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _h === void 0 ? void 0 : _h.variationId;
+    let rolloverImage = (_j = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _j === void 0 ? void 0 : _j.rolloverImage;
+    // Fallback to item's rollover image if all variations don't have a rollover image
+    if (!rolloverImage && ((_k = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.swatchList) === null || _k === void 0 ? void 0 : _k.every((swatch) => !swatch.rolloverImage))) {
+        rolloverImage = getRolloverImage(item);
+    }
     const { itemId } = item;
-    let salePrice = ((_h = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _h === void 0 ? void 0 : _h.salePrice) || getSalePrice(item);
+    let salePrice = ((_l = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _l === void 0 ? void 0 : _l.salePrice) || getSalePrice(item);
     let hasSalePrice = true;
     if (!(0, utils_1.isValidSalePrice)(salePrice, itemPrice)) {
         salePrice = undefined;
@@ -35,6 +41,7 @@ const useProductInfo = ({ item }) => {
         variationId,
         itemId,
         salePrice,
+        rolloverImage,
         hasSalePrice,
     };
 };

package/lib/cjs/hooks/useProductSwatch.js

@@ -4,7 +4,7 @@ const react_1 = require("react");
 const useCioPlpContext_1 = require("./useCioPlpContext");
 const itemFieldGetters_1 = require("../utils/itemFieldGetters");
 const useProductSwatch = ({ item }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const [selectedVariation, setSelectedVariation] = (0, react_1.useState)();
     const [swatchList, setSwatchList] = (0, react_1.useState)([]);
     const state = (0, useCioPlpContext_1.useCioPlpContext)();
@@ -12,16 +12,17 @@ const useProductSwatch = ({ item }) => {
     const getPrice = ((_b = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _b === void 0 ? void 0 : _b.getPrice) || itemFieldGetters_1.getPrice;
     const getSalePrice = ((_c = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _c === void 0 ? void 0 : _c.getSalePrice) || itemFieldGetters_1.getSalePrice;
     const getSwatchPreview = ((_d = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _d === void 0 ? void 0 : _d.getSwatchPreview) || itemFieldGetters_1.getSwatchPreview;
+    const getRolloverImage = ((_e = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _e === void 0 ? void 0 : _e.getRolloverImage) || itemFieldGetters_1.getRolloverImage;
     (0, react_1.useEffect)(() => {
         if (item === null || item === void 0 ? void 0 : item.variations) {
             try {
-                setSwatchList(getSwatches(item, getPrice, getSwatchPreview, getSalePrice) || []);
+                setSwatchList(getSwatches(item, getPrice, getSwatchPreview, getSalePrice, getRolloverImage) || []);
             }
             catch (e) {
                 // do nothing
             }
         }
-    }, [item, getSwatches, getPrice, getSwatchPreview, getSalePrice]);
+    }, [item, getSwatches, getPrice, getSwatchPreview, getSalePrice, getRolloverImage]);
     (0, react_1.useEffect)(() => {
         if (item === null || item === void 0 ? void 0 : item.variations) {
             const initialSwatch = swatchList === null || swatchList === void 0 ? void 0 : swatchList.find((swatch) => (swatch === null || swatch === void 0 ? void 0 : swatch.variationId) === (item === null || item === void 0 ? void 0 : item.variationId));

package/lib/cjs/utils/itemFieldGetters.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSwatchPreview = exports.getSwatches = exports.getSalePrice = exports.getPrice = void 0;
+exports.getSwatchPreview = exports.getSwatches = exports.getRolloverImage = exports.getSalePrice = exports.getPrice = void 0;
 // eslint-disable-next-line import/prefer-default-export
 function getPrice(item) {
     return item.data.price;
@@ -10,7 +10,12 @@ function getSalePrice(item) {
     return item.data.sale_price;
 }
 exports.getSalePrice = getSalePrice;
-function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieveSalePrice) {
+function getRolloverImage(item) {
+    return item.data.rolloverImage;
+}
+exports.getRolloverImage = getRolloverImage;
+/* eslint-disable-next-line max-params */
+function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieveSalePrice, retrieveRolloverImage) {
     var _a;
     const swatchList = [];
     (_a = item === null || item === void 0 ? void 0 : item.variations) === null || _a === void 0 ? void 0 : _a.forEach((variation) => {
@@ -23,6 +28,7 @@ function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieveSalePri
                 price: retrievePrice(variation),
                 salePrice: retrieveSalePrice(variation),
                 swatchPreview: retrieveSwatchPreview(variation),
+                rolloverImage: retrieveRolloverImage(variation),
             });
         }
     });

package/lib/cjs/version.js

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

package/lib/mjs/components/ProductCard/ProductCard.css

@@ -8,6 +8,7 @@
 .cio-image-container {
   width: 100%;
   height: auto;
+  position: relative;
 }
 
 .cio-image {
@@ -16,6 +17,18 @@
   object-fit: cover;
 }
 
+.cio-rollover-image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+}
+
+.cio-rollover-image.is-active {
+  opacity: 1;
+}
+
 .cio-content {
   width: 100%;
 }
@@ -56,4 +69,4 @@
   height: 40px;
   font-size: 16px;
   cursor: pointer;
-}
+}

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

@@ -1,17 +1,21 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import { useCioPlpContext } from '../../hooks/useCioPlpContext';
 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.
  */
 export default function ProductCard(props) {
+    const [isRolloverImageShown, setIsRolloverImageShown] = useState(false);
+    const cardRef = useRef(null);
     const { item, children } = props;
     const state = useCioPlpContext();
     const productInfo = useProductInfo({ item });
-    const { productSwatch, itemName, itemPrice, itemImageUrl, itemUrl, salePrice, hasSalePrice } = productInfo;
+    const { productSwatch, itemName, itemPrice, itemImageUrl, itemUrl, salePrice, hasSalePrice, rolloverImage, } = productInfo;
     if (!state) {
         throw new Error('This component is meant to be used within the CioPlp provider.');
     }
@@ -23,21 +27,48 @@ export default function ProductCard(props) {
     const { formatPrice } = state.formatters;
     const onClick = useOnProductCardClick(client, state.callbacks.onProductCardClick);
     const cnstrcData = getProductCardCnstrcDataAttributes(productInfo);
-    return (React.createElement(React.Fragment, null, typeof children === 'function' ? (children({
-        item,
-        productInfo,
-        formatPrice,
-        onAddToCart,
-        onClick,
-        productCardCnstrcDataAttributes: cnstrcData,
-    })) : (React.createElement("a", { ...cnstrcData, className: 'cio-product-card', href: itemUrl, onClick: (e) => onClick(e, item, productSwatch?.selectedVariation?.variationId) },
-        React.createElement("div", { className: 'cio-image-container' },
-            React.createElement("img", { alt: itemName, src: itemImageUrl, className: 'cio-image' })),
-        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")))));
+    const handleRolloverImageState = (isShown) => {
+        setIsRolloverImageShown(isShown);
+        if (isShown && rolloverImage) {
+            const event = new CustomEvent(EMITTED_EVENTS.PRODUCT_CARD_IMAGE_ROLLOVER, {
+                detail: { item },
+                bubbles: true,
+            });
+            cardRef.current?.dispatchEvent(event);
+        }
+    };
+    const onMouseEnter = (event) => {
+        if (state.callbacks.onProductCardMouseEnter) {
+            state.callbacks.onProductCardMouseEnter(event, item);
+        }
+        handleRolloverImageState(true);
+    };
+    const onMouseLeave = (event) => {
+        if (state.callbacks.onProductCardMouseLeave) {
+            state.callbacks.onProductCardMouseLeave(event, item);
+        }
+        handleRolloverImageState(false);
+    };
+    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/constants.js

@@ -1,2 +1,5 @@
 // eslint-disable-next-line import/prefer-default-export
 export const DEMO_API_KEY = 'key_M57QS8SMPdLdLx4x';
+export const EMITTED_EVENTS = {
+    PRODUCT_CARD_IMAGE_ROLLOVER: 'cio.ui-plp.productCardImageRollover',
+};

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/hooks/useProduct.js

@@ -1,7 +1,7 @@
 import useProductSwatch from './useProductSwatch';
 import { useCioPlpContext } from './useCioPlpContext';
 import { tryCatchify, isValidSalePrice } from '../utils';
-import { getPrice as defaultGetPrice, getSalePrice as defaultGetSalePrice, } from '../utils/itemFieldGetters';
+import { getPrice as defaultGetPrice, getSalePrice as defaultGetSalePrice, getRolloverImage as defaultGetRolloverImage, } from '../utils/itemFieldGetters';
 const useProductInfo = ({ item }) => {
     const state = useCioPlpContext();
     const productSwatch = useProductSwatch({ item });
@@ -10,11 +10,17 @@ const useProductInfo = ({ item }) => {
     }
     const getPrice = tryCatchify(state?.itemFieldGetters?.getPrice || defaultGetPrice);
     const getSalePrice = tryCatchify(state?.itemFieldGetters?.getSalePrice || defaultGetSalePrice);
+    const getRolloverImage = tryCatchify(state?.itemFieldGetters?.getRolloverImage || defaultGetRolloverImage);
     const itemName = productSwatch?.selectedVariation?.itemName || item.itemName;
     const itemPrice = productSwatch?.selectedVariation?.price || getPrice(item);
     const itemImageUrl = productSwatch?.selectedVariation?.imageUrl || item.imageUrl;
     const itemUrl = productSwatch?.selectedVariation?.url || item.url;
     const variationId = productSwatch?.selectedVariation?.variationId;
+    let rolloverImage = productSwatch?.selectedVariation?.rolloverImage;
+    // Fallback to item's rollover image if all variations don't have a rollover image
+    if (!rolloverImage && productSwatch?.swatchList?.every((swatch) => !swatch.rolloverImage)) {
+        rolloverImage = getRolloverImage(item);
+    }
     const { itemId } = item;
     let salePrice = productSwatch?.selectedVariation?.salePrice || getSalePrice(item);
     let hasSalePrice = true;
@@ -31,6 +37,7 @@ const useProductInfo = ({ item }) => {
         variationId,
         itemId,
         salePrice,
+        rolloverImage,
         hasSalePrice,
     };
 };

package/lib/mjs/hooks/useProductSwatch.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useCioPlpContext } from './useCioPlpContext';
-import { getSwatches as defaultGetSwatches, getPrice as defaultGetPrice, getSwatchPreview as defaultGetSwatchPreview, getSalePrice as defaultGetSalePrice, } from '../utils/itemFieldGetters';
+import { getSwatches as defaultGetSwatches, getPrice as defaultGetPrice, getSwatchPreview as defaultGetSwatchPreview, getSalePrice as defaultGetSalePrice, getRolloverImage as defaultGetRolloverImage, } from '../utils/itemFieldGetters';
 const useProductSwatch = ({ item }) => {
     const [selectedVariation, setSelectedVariation] = useState();
     const [swatchList, setSwatchList] = useState([]);
@@ -9,16 +9,17 @@ const useProductSwatch = ({ item }) => {
     const getPrice = state?.itemFieldGetters?.getPrice || defaultGetPrice;
     const getSalePrice = state?.itemFieldGetters?.getSalePrice || defaultGetSalePrice;
     const getSwatchPreview = state?.itemFieldGetters?.getSwatchPreview || defaultGetSwatchPreview;
+    const getRolloverImage = state?.itemFieldGetters?.getRolloverImage || defaultGetRolloverImage;
     useEffect(() => {
         if (item?.variations) {
             try {
-                setSwatchList(getSwatches(item, getPrice, getSwatchPreview, getSalePrice) || []);
+                setSwatchList(getSwatches(item, getPrice, getSwatchPreview, getSalePrice, getRolloverImage) || []);
             }
             catch (e) {
                 // do nothing
             }
         }
-    }, [item, getSwatches, getPrice, getSwatchPreview, getSalePrice]);
+    }, [item, getSwatches, getPrice, getSwatchPreview, getSalePrice, getRolloverImage]);
     useEffect(() => {
         if (item?.variations) {
             const initialSwatch = swatchList?.find((swatch) => swatch?.variationId === item?.variationId);

package/lib/mjs/utils/itemFieldGetters.js

@@ -5,7 +5,11 @@ export function getPrice(item) {
 export function getSalePrice(item) {
     return item.data.sale_price;
 }
-export function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieveSalePrice) {
+export function getRolloverImage(item) {
+    return item.data.rolloverImage;
+}
+/* eslint-disable-next-line max-params */
+export function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieveSalePrice, retrieveRolloverImage) {
     const swatchList = [];
     item?.variations?.forEach((variation) => {
         if (retrieveSwatchPreview(variation)) {
@@ -17,6 +21,7 @@ export function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieve
                 price: retrievePrice(variation),
                 salePrice: retrieveSalePrice(variation),
                 swatchPreview: retrieveSwatchPreview(variation),
+                rolloverImage: retrieveRolloverImage(variation),
             });
         }
     });

package/lib/mjs/version.js

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