@constructor-io/constructorio-ui-plp 1.6.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/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.6.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/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.6.0';
+export default '1.6.1';

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

@@ -16,6 +16,7 @@ export interface ItemFieldGetters {
     getRolloverImage: (item: Item | Variation) => string | undefined;
     getSwatchPreview: (variation: Variation) => string;
     getSwatches: (item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice'], retrieveRolloverImage: ItemFieldGetters['getRolloverImage']) => SwatchItem[] | undefined;
+    getIsHiddenGroupField: (group: PlpItemGroup) => boolean | undefined;
 }
 export interface Formatters {
     formatPrice: (price?: number) => string;
@@ -290,7 +291,7 @@ export interface PlpItemGroup {
     groupId: string;
     displayName: string;
     count: number;
-    data: object | null;
+    data: Record<string, any> | null;
     children: Array<PlpItemGroup>;
     parents: Pick<PlpItemGroup, 'groupId' | 'displayName'>[];
 }

package/lib/types/utils/itemFieldGetters.d.ts

@@ -1,6 +1,7 @@
-import { ItemFieldGetters, Item, SwatchItem, Variation } from '../types';
+import { ItemFieldGetters, Item, SwatchItem, Variation, PlpItemGroup } from '../types';
 export declare function getPrice(item: Item | Variation): number;
 export declare function getSalePrice(item: Item | Variation): number | undefined;
 export declare function getRolloverImage(item: Item | Variation): string | undefined;
 export declare function getSwatches(item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice'], retrieveRolloverImage: ItemFieldGetters['getRolloverImage']): SwatchItem[] | undefined;
 export declare function getSwatchPreview(variation: Variation): string;
+export declare function getIsHiddenGroupField(group: PlpItemGroup): any;

package/lib/types/version.d.ts

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

package/package.json

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