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

package/lib/cjs/components/CioPlp/CioPlp.js

@@ -6,8 +6,8 @@ const CioPlpProvider_1 = tslib_1.__importDefault(require("./CioPlpProvider"));
 const CioPlpGrid_1 = tslib_1.__importDefault(require("../CioPlpGrid"));
 // Wrapper component for CioPlpProvider with default Markup
 function CioPlp(props) {
-    const { children, initialSearchResponse, initialBrowseResponse, sortConfigs, paginationConfigs, filterConfigs } = props, rest = tslib_1.__rest(props, ["children", "initialSearchResponse", "initialBrowseResponse", "sortConfigs", "paginationConfigs", "filterConfigs"]);
-    const defaultMarkup = (react_1.default.createElement(CioPlpGrid_1.default, { initialSearchResponse: initialSearchResponse, initialBrowseResponse: initialBrowseResponse, sortConfigs: sortConfigs, paginationConfigs: paginationConfigs, filterConfigs: filterConfigs }));
+    const { children, initialSearchResponse, initialBrowseResponse, sortConfigs, paginationConfigs, filterConfigs, groupsConfigs } = props, rest = tslib_1.__rest(props, ["children", "initialSearchResponse", "initialBrowseResponse", "sortConfigs", "paginationConfigs", "filterConfigs", "groupsConfigs"]);
+    const defaultMarkup = (react_1.default.createElement(CioPlpGrid_1.default, { initialSearchResponse: initialSearchResponse, initialBrowseResponse: initialBrowseResponse, sortConfigs: sortConfigs, paginationConfigs: paginationConfigs, filterConfigs: filterConfigs, groupsConfigs: groupsConfigs }));
     return (react_1.default.createElement("div", { className: 'cio-plp' },
         react_1.default.createElement(CioPlpProvider_1.default, Object.assign({}, rest), children || defaultMarkup)));
 }

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

@@ -9,11 +9,12 @@ const useOptionsList_1 = tslib_1.__importDefault(require("./useOptionsList"));
 const useCioBreadcrumb_1 = tslib_1.__importDefault(require("./useCioBreadcrumb"));
 function useGroups(props) {
     var _a, _b;
-    const { groups, initialNumOptions: numOptionsProps } = props;
+    const { groups, initialNumOptions: numOptionsProps, isHiddenGroupFn } = props;
     const contextValue = (0, useCioPlpContext_1.useCioPlpContext)();
     if (!contextValue) {
         throw new Error('useGroups must be used within a component that is a child of <CioPlp />');
     }
+    const { getIsHiddenGroupField } = contextValue.itemFieldGetters;
     const { setFilter } = (0, useFilter_1.default)({ facets: [] });
     const { getRequestConfigs } = (0, useRequestConfigs_1.default)();
     const requestConfigs = getRequestConfigs();
@@ -26,10 +27,15 @@ function useGroups(props) {
     const setGroup = (groupId) => {
         setFilter('group_id', groupId);
     };
+    const isHiddenOptionFn = (0, react_1.useCallback)((group) => (typeof isHiddenGroupFn === 'function' && isHiddenGroupFn(group)) ||
+        (typeof getIsHiddenGroupField === 'function' && getIsHiddenGroupField(group)) ||
+        false, // Ensure that isHiddenOptionFn never returns undefined
+    [isHiddenGroupFn, getIsHiddenGroupField]);
     const { breadcrumbs, currentPage } = (0, useCioBreadcrumb_1.default)({ groups, filterValue: currentGroupId || 'all' }) || [];
     const { initialNumOptions, isShowAll, setIsShowAll, optionsToRender, setOptionsToRender } = (0, useOptionsList_1.default)({
         options: groupOptions,
         initialNumOptions: numOptionsProps,
+        isHiddenOptionFn,
     });
     const [selectedGroupId, setSelectedGroupId] = (0, react_1.useState)();
     const onOptionSelect = (groupId) => {

package/lib/cjs/hooks/useOptionsList.js

@@ -1,18 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
+const defaultIsHiddenOptionFn = () => false;
 function useOptionsList(props) {
-    const { options, initialNumOptions = 5 } = props;
+    const { options, initialNumOptions = 5, isHiddenOptionFn = defaultIsHiddenOptionFn } = props;
+    const filteredOptions = (0, react_1.useMemo)(() => options.filter((option) => !isHiddenOptionFn(option)), [isHiddenOptionFn, options]);
     const [isShowAll, setIsShowAll] = (0, react_1.useState)(false);
-    const [optionsToRender, setOptionsToRender] = (0, react_1.useState)(options);
+    const [optionsToRender, setOptionsToRender] = (0, react_1.useState)(filteredOptions);
     (0, react_1.useEffect)(() => {
         if (isShowAll) {
-            setOptionsToRender(options);
+            setOptionsToRender(filteredOptions);
         }
         else {
-            setOptionsToRender(options.slice(0, initialNumOptions));
+            setOptionsToRender(filteredOptions.slice(0, initialNumOptions));
         }
-    }, [isShowAll, options, initialNumOptions]);
+    }, [isShowAll, filteredOptions, initialNumOptions]);
     return {
         // props
         initialNumOptions,

package/lib/cjs/utils/itemFieldGetters.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSwatchPreview = exports.getSwatches = exports.getRolloverImage = exports.getSalePrice = exports.getPrice = void 0;
+exports.getIsHiddenGroupField = 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;
@@ -40,3 +40,8 @@ function getSwatchPreview(variation) {
     return (_a = variation === null || variation === void 0 ? void 0 : variation.data) === null || _a === void 0 ? void 0 : _a.swatchPreview;
 }
 exports.getSwatchPreview = getSwatchPreview;
+function getIsHiddenGroupField(group) {
+    var _a;
+    return (_a = group === null || group === void 0 ? void 0 : group.data) === null || _a === void 0 ? void 0 : _a.cio_plp_hidden;
+}
+exports.getIsHiddenGroupField = getIsHiddenGroupField;

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.1';

package/lib/mjs/components/CioPlp/CioPlp.js

@@ -3,8 +3,8 @@ import CioPlpProvider from './CioPlpProvider';
 import CioPlpGrid from '../CioPlpGrid';
 // Wrapper component for CioPlpProvider with default Markup
 export default function CioPlp(props) {
-    const { children, initialSearchResponse, initialBrowseResponse, sortConfigs, paginationConfigs, filterConfigs, ...rest } = props;
-    const defaultMarkup = (React.createElement(CioPlpGrid, { initialSearchResponse: initialSearchResponse, initialBrowseResponse: initialBrowseResponse, sortConfigs: sortConfigs, paginationConfigs: paginationConfigs, filterConfigs: filterConfigs }));
+    const { children, initialSearchResponse, initialBrowseResponse, sortConfigs, paginationConfigs, filterConfigs, groupsConfigs, ...rest } = props;
+    const defaultMarkup = (React.createElement(CioPlpGrid, { initialSearchResponse: initialSearchResponse, initialBrowseResponse: initialBrowseResponse, sortConfigs: sortConfigs, paginationConfigs: paginationConfigs, filterConfigs: filterConfigs, groupsConfigs: groupsConfigs }));
     return (React.createElement("div", { className: 'cio-plp' },
         React.createElement(CioPlpProvider, { ...rest }, children || defaultMarkup)));
 }

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

@@ -1,15 +1,16 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useCioPlpContext } from './useCioPlpContext';
 import useFilter from './useFilter';
 import useRequestConfigs from './useRequestConfigs';
 import useOptionsList from './useOptionsList';
 import useCioBreadcrumb from './useCioBreadcrumb';
 export default function useGroups(props) {
-    const { groups, initialNumOptions: numOptionsProps } = props;
+    const { groups, initialNumOptions: numOptionsProps, isHiddenGroupFn } = props;
     const contextValue = useCioPlpContext();
     if (!contextValue) {
         throw new Error('useGroups must be used within a component that is a child of <CioPlp />');
     }
+    const { getIsHiddenGroupField } = contextValue.itemFieldGetters;
     const { setFilter } = useFilter({ facets: [] });
     const { getRequestConfigs } = useRequestConfigs();
     const requestConfigs = getRequestConfigs();
@@ -22,10 +23,15 @@ export default function useGroups(props) {
     const setGroup = (groupId) => {
         setFilter('group_id', groupId);
     };
+    const isHiddenOptionFn = useCallback((group) => (typeof isHiddenGroupFn === 'function' && isHiddenGroupFn(group)) ||
+        (typeof getIsHiddenGroupField === 'function' && getIsHiddenGroupField(group)) ||
+        false, // Ensure that isHiddenOptionFn never returns undefined
+    [isHiddenGroupFn, getIsHiddenGroupField]);
     const { breadcrumbs, currentPage } = useCioBreadcrumb({ groups, filterValue: currentGroupId || 'all' }) || [];
     const { initialNumOptions, isShowAll, setIsShowAll, optionsToRender, setOptionsToRender } = useOptionsList({
         options: groupOptions,
         initialNumOptions: numOptionsProps,
+        isHiddenOptionFn,
     });
     const [selectedGroupId, setSelectedGroupId] = useState();
     const onOptionSelect = (groupId) => {

package/lib/mjs/hooks/useOptionsList.js

@@ -1,16 +1,18 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+const defaultIsHiddenOptionFn = () => false;
 export default function useOptionsList(props) {
-    const { options, initialNumOptions = 5 } = props;
+    const { options, initialNumOptions = 5, isHiddenOptionFn = defaultIsHiddenOptionFn } = props;
+    const filteredOptions = useMemo(() => options.filter((option) => !isHiddenOptionFn(option)), [isHiddenOptionFn, options]);
     const [isShowAll, setIsShowAll] = useState(false);
-    const [optionsToRender, setOptionsToRender] = useState(options);
+    const [optionsToRender, setOptionsToRender] = useState(filteredOptions);
     useEffect(() => {
         if (isShowAll) {
-            setOptionsToRender(options);
+            setOptionsToRender(filteredOptions);
         }
         else {
-            setOptionsToRender(options.slice(0, initialNumOptions));
+            setOptionsToRender(filteredOptions.slice(0, initialNumOptions));
         }
-    }, [isShowAll, options, initialNumOptions]);
+    }, [isShowAll, filteredOptions, initialNumOptions]);
     return {
         // props
         initialNumOptions,

package/lib/mjs/utils/itemFieldGetters.js

@@ -30,3 +30,6 @@ export function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieve
 export function getSwatchPreview(variation) {
     return variation?.data?.swatchPreview;
 }
+export function getIsHiddenGroupField(group) {
+    return group?.data?.cio_plp_hidden;
+}

package/lib/mjs/version.js

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

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/hooks/useGroups.d.ts

@@ -1,11 +1,16 @@
 import { PlpItemGroup } from '../types';
 import { UseOptionsListProps } from './useOptionsList';
 import { Breadcrumb } from './useCioBreadcrumb';
-export interface UseGroupProps extends Omit<UseOptionsListProps<PlpItemGroup>, 'options'> {
+export interface UseGroupProps extends Omit<UseOptionsListProps<PlpItemGroup>, 'options' | 'isHiddenOptionFn'> {
     /**
      * Used to build and render the groups filter dynamically
      */
     groups: Array<PlpItemGroup>;
+    /**
+     * Function that takes in a PlpItemGroup and returns `true` if the group should be hidden from the final render
+     * @returns boolean
+     */
+    isHiddenGroupFn?: (group: PlpItemGroup) => boolean;
 }
 export default function useGroups(props: UseGroupProps): {
     groupOptions: PlpItemGroup[];

package/lib/types/hooks/useOptionsList.d.ts

@@ -8,6 +8,11 @@ export interface UseOptionsListProps<T> {
      * The remaining options will be hidden under a "Show All" button
      */
     initialNumOptions?: number;
+    /**
+     * Function that takes in an option object T and returns `true` if it should NOT be rendered as an option
+     * @returns boolean
+     */
+    isHiddenOptionFn?: (option: T) => boolean;
 }
 export default function useOptionsList<T>(props: UseOptionsListProps<T>): {
     initialNumOptions: number;

package/lib/types/hooks/usePagination.d.ts

@@ -1,9 +1,19 @@
 export interface UsePaginationProps {
     /**
+     * **⚠️ Deprecation Notice ⚠️**
+     *
+     * _This field will be deprecated in v2._
+     * _If you're looking to change the number of items requested please use `staticRequestConfigs` instead._
+     *
      * Total number of results returned by the API response
      */
     totalNumResults: number;
     /**
+     * **⚠️ Deprecation Notice ⚠️**
+     *
+     * _This field will be deprecated in v2._
+     * _If you're looking to change the number of items requested please use `staticRequestConfigs` instead._
+     *
      * Number of results returned per page
      */
     resultsPerPage?: number;

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';