@constructor-io/constructorio-ui-plp 1.8.4 → 1.10.0

package/lib/cjs/components/Filters/FilterGroup.js

@@ -6,7 +6,7 @@ const utils_1 = require("../../utils");
 const FilterOptionsList_1 = tslib_1.__importDefault(require("./FilterOptionsList"));
 const FilterRangeSlider_1 = tslib_1.__importDefault(require("./FilterRangeSlider"));
 function FilterGroup(props) {
-    const { facet, setFilter, initialNumOptions = 10, sliderStep, facetSliderSteps } = props;
+    const { facet, setFilter, initialNumOptions = 10, sliderStep, facetSliderSteps, isHiddenFilterOptionFn, } = props;
     const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(false);
     const toggleIsCollapsed = () => setIsCollapsed(!isCollapsed);
     const onFilterSelect = (facetName) => (value) => {
@@ -16,7 +16,7 @@ function FilterGroup(props) {
         react_1.default.createElement("button", { className: 'cio-filter-header', type: 'button', onClick: toggleIsCollapsed },
             facet.displayName,
             react_1.default.createElement("i", { className: `cio-arrow ${isCollapsed ? 'cio-arrow-up' : 'cio-arrow-down'}` })),
-        ((0, utils_1.isMultipleOrBucketedFacet)(facet) || (0, utils_1.isSingleFacet)(facet)) && (react_1.default.createElement(FilterOptionsList_1.default, { isCollapsed: isCollapsed, facet: facet, modifyRequestMultipleFilter: onFilterSelect(facet.name), initialNumOptions: initialNumOptions })),
+        ((0, utils_1.isMultipleOrBucketedFacet)(facet) || (0, utils_1.isSingleFacet)(facet)) && (react_1.default.createElement(FilterOptionsList_1.default, { isCollapsed: isCollapsed, facet: facet, modifyRequestMultipleFilter: onFilterSelect(facet.name), initialNumOptions: initialNumOptions, isHiddenFilterOptionFn: isHiddenFilterOptionFn })),
         (0, utils_1.isRangeFacet)(facet) && (react_1.default.createElement(FilterRangeSlider_1.default, { isCollapsed: isCollapsed, rangedFacet: facet, modifyRequestRangeFilter: onFilterSelect(facet.name), sliderStep: (facetSliderSteps === null || facetSliderSteps === void 0 ? void 0 : facetSliderSteps[facet.name]) || sliderStep }))));
 }
 exports.default = FilterGroup;

package/lib/cjs/components/Filters/Filters.js

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const FilterGroup_1 = tslib_1.__importDefault(require("./FilterGroup"));
 const useFilter_1 = tslib_1.__importDefault(require("../../hooks/useFilter"));
 function Filters(props) {
-    const { children, initialNumOptions } = props, useFiltersProps = tslib_1.__rest(props, ["children", "initialNumOptions"]);
+    const { children, initialNumOptions, isHiddenFilterOptionFn } = props, useFiltersProps = tslib_1.__rest(props, ["children", "initialNumOptions", "isHiddenFilterOptionFn"]);
     const { facets, setFilter, sliderStep, facetSliderSteps, clearFilters } = (0, useFilter_1.default)(useFiltersProps);
     return (react_1.default.createElement(react_1.default.Fragment, null, typeof children === 'function' ? (children({
         facets,
@@ -14,6 +14,6 @@ function Filters(props) {
         sliderStep,
         facetSliderSteps,
         clearFilters,
-    })) : (react_1.default.createElement("div", { className: 'cio-filters' }, facets.map((facet) => (react_1.default.createElement(FilterGroup_1.default, { facet: facet, initialNumOptions: initialNumOptions, setFilter: setFilter, sliderStep: sliderStep, facetSliderSteps: facetSliderSteps, key: facet.name })))))));
+    })) : (react_1.default.createElement("div", { className: 'cio-filters' }, facets.map((facet) => (react_1.default.createElement(FilterGroup_1.default, { facet: facet, initialNumOptions: initialNumOptions, setFilter: setFilter, sliderStep: sliderStep, facetSliderSteps: facetSliderSteps, isHiddenFilterOptionFn: isHiddenFilterOptionFn, key: facet.name })))))));
 }
 exports.default = Filters;

package/lib/cjs/components/Filters/UseFilterOptionsList.js

@@ -3,12 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = require("react");
 const useOptionsList_1 = tslib_1.__importDefault(require("../../hooks/useOptionsList"));
+const useCioPlpContext_1 = require("../../hooks/useCioPlpContext");
 function useFilterOptionsList(props) {
-    const { initialNumOptions, modifyRequestMultipleFilter, isCollapsed } = props;
+    const { initialNumOptions, modifyRequestMultipleFilter, isCollapsed, isHiddenFilterOptionFn } = props;
     const facet = 'facet' in props ? props.facet : props.multipleFacet;
+    const { getIsHiddenFilterOptionField } = (0, useCioPlpContext_1.useCioPlpContext)().itemFieldGetters;
+    const isHiddenOptionFn = (0, react_1.useCallback)((option) => (typeof isHiddenFilterOptionFn === 'function' && isHiddenFilterOptionFn(option)) ||
+        (typeof getIsHiddenFilterOptionField === 'function' &&
+            getIsHiddenFilterOptionField(option)) ||
+        false, [isHiddenFilterOptionFn, getIsHiddenFilterOptionField]);
     const { isShowAll, setIsShowAll, optionsToRender, setOptionsToRender } = (0, useOptionsList_1.default)({
         options: facet.options,
         initialNumOptions,
+        isHiddenOptionFn,
+        nestedOptionsKey: 'options', // Enable recursive filtering for hierarchical facet options
     });
     const [selectedOptionMap, setSelectedOptionMap] = (0, react_1.useState)({});
     const onOptionSelect = (optionValue) => {

package/lib/cjs/hooks/useFilter.js

@@ -1,15 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const react_1 = require("react");
 const useCioPlpContext_1 = require("./useCioPlpContext");
 const useRequestConfigs_1 = tslib_1.__importDefault(require("./useRequestConfigs"));
 function useFilter(props) {
-    const { facets, sliderStep, facetSliderSteps } = props;
+    const { facets, sliderStep, facetSliderSteps, isHiddenFilterFn } = props;
     const contextValue = (0, useCioPlpContext_1.useCioPlpContext)();
     if (!contextValue) {
         throw new Error('useFilter must be used within a component that is a child of <CioPlp />');
     }
+    const { getIsHiddenFilterField } = contextValue.itemFieldGetters;
     const { getRequestConfigs, setRequestConfigs } = (0, useRequestConfigs_1.default)();
+    const isHiddenFilter = (0, react_1.useCallback)((facet) => (typeof isHiddenFilterFn === 'function' && isHiddenFilterFn(facet)) ||
+        (typeof getIsHiddenFilterField === 'function' && getIsHiddenFilterField(facet)) ||
+        false, [isHiddenFilterFn, getIsHiddenFilterField]);
+    const filteredFacets = (0, react_1.useMemo)(() => facets.filter((facet) => !isHiddenFilter(facet)), [facets, isHiddenFilter]);
     const setFilter = (filterName, filterValue) => {
         const newFilters = getRequestConfigs().filters || {};
         newFilters[filterName] = filterValue;
@@ -23,7 +29,7 @@ function useFilter(props) {
         setRequestConfigs({ filters: {}, page: 1 });
     };
     return {
-        facets,
+        facets: filteredFacets,
         setFilter,
         sliderStep,
         facetSliderSteps,

package/lib/cjs/hooks/useGroups.js

@@ -36,6 +36,7 @@ function useGroups(props) {
         options: groupOptions,
         initialNumOptions: numOptionsProps,
         isHiddenOptionFn,
+        nestedOptionsKey: 'children', // Enable recursive filtering for group children
     });
     const [selectedGroupId, setSelectedGroupId] = (0, react_1.useState)();
     const onOptionSelect = (groupId) => {

package/lib/cjs/hooks/useOptionsList.js

@@ -2,9 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const defaultIsHiddenOptionFn = () => false;
+/**
+ * Recursively filters options and their nested children
+ */
+function filterOptionsRecursively(options, isHiddenFn, nestedKey) {
+    return options
+        .filter((option) => !isHiddenFn(option))
+        .map((option) => {
+        const nestedOptions = option[nestedKey];
+        if (Array.isArray(nestedOptions) && nestedOptions.length > 0) {
+            return Object.assign(Object.assign({}, option), { [nestedKey]: filterOptionsRecursively(nestedOptions, isHiddenFn, nestedKey) });
+        }
+        return option;
+    });
+}
 function useOptionsList(props) {
-    const { options, initialNumOptions = 5, isHiddenOptionFn = defaultIsHiddenOptionFn } = props;
-    const filteredOptions = (0, react_1.useMemo)(() => options.filter((option) => !isHiddenOptionFn(option)), [isHiddenOptionFn, options]);
+    const { options, initialNumOptions = 5, isHiddenOptionFn = defaultIsHiddenOptionFn, nestedOptionsKey, } = props;
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        if (nestedOptionsKey) {
+            return filterOptionsRecursively(options, isHiddenOptionFn, nestedOptionsKey);
+        }
+        return options.filter((option) => !isHiddenOptionFn(option));
+    }, [isHiddenOptionFn, options, nestedOptionsKey]);
     const [isShowAll, setIsShowAll] = (0, react_1.useState)(false);
     const [optionsToRender, setOptionsToRender] = (0, react_1.useState)(filteredOptions);
     (0, react_1.useEffect)(() => {

package/lib/cjs/utils/dataAttributeHelpers.js

@@ -16,6 +16,7 @@ exports.cnstrcDataAttrs = {
         zeroResults: 'data-cnstrc-zero-result',
         slCampaignId: 'data-cnstrc-sl-campaign-id',
         slCampaignOwner: 'data-cnstrc-sl-campaign-owner',
+        resultPage: 'data-cnstrc-result-page',
     },
     search: {
         searchContainer: 'data-cnstrc-search',
@@ -53,18 +54,20 @@ function getProductCardCnstrcDataAttributes(productInfo, options) {
 }
 exports.getProductCardCnstrcDataAttributes = getProductCardCnstrcDataAttributes;
 function getPlpContainerCnstrcDataAttributes(data, requestConfigs, isLoading = false) {
-    var _a, _b;
+    var _a, _b, _c;
     if (!data || (!(0, typeHelpers_1.isPlpSearchDataResults)(data) && !(0, typeHelpers_1.isPlpBrowseDataResults)(data)))
         return {};
     const { filterName, filterValue } = requestConfigs;
     const pageType = (0, requestConfigsHelpers_1.getPageType)(requestConfigs);
     const isZeroResults = data.response.totalNumResults === 0;
+    const resultPage = ((_a = data === null || data === void 0 ? void 0 : data.request) === null || _a === void 0 ? void 0 : _a.page) || requestConfigs.page || 1;
     let dataCnstrc = {};
     switch (pageType) {
         case 'browse':
             dataCnstrc = {
                 [exports.cnstrcDataAttrs.browse.browseContainer]: true,
                 [exports.cnstrcDataAttrs.common.numResults]: data.response.totalNumResults,
+                [exports.cnstrcDataAttrs.common.resultPage]: resultPage,
                 [exports.cnstrcDataAttrs.common.resultId]: data.resultId,
                 [exports.cnstrcDataAttrs.browse.filterName]: filterName,
                 [exports.cnstrcDataAttrs.browse.filterValue]: filterValue,
@@ -75,9 +78,10 @@ function getPlpContainerCnstrcDataAttributes(data, requestConfigs, isLoading = f
                 [exports.cnstrcDataAttrs.search.searchContainer]: true,
                 [exports.cnstrcDataAttrs.common.resultId]: data.resultId,
                 [exports.cnstrcDataAttrs.common.numResults]: data.response.totalNumResults,
+                [exports.cnstrcDataAttrs.common.resultPage]: resultPage,
             };
             // Add search term
-            if ((_a = data.request) === null || _a === void 0 ? void 0 : _a.term) {
+            if ((_b = data.request) === null || _b === void 0 ? void 0 : _b.term) {
                 dataCnstrc[exports.cnstrcDataAttrs.search.searchTerm] = data.request.term;
             }
             break;
@@ -94,7 +98,7 @@ function getPlpContainerCnstrcDataAttributes(data, requestConfigs, isLoading = f
             dataCnstrc[exports.cnstrcDataAttrs.common.zeroResults] = true;
         }
         // Add section if it's not "Products"
-        if (((_b = data.request) === null || _b === void 0 ? void 0 : _b.section) && data.request.section !== 'Products') {
+        if (((_c = data.request) === null || _c === void 0 ? void 0 : _c.section) && data.request.section !== 'Products') {
             dataCnstrc[exports.cnstrcDataAttrs.common.section] = data.request.section;
         }
     }

package/lib/cjs/utils/itemFieldGetters.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemUrl = exports.getIsHiddenGroupField = exports.getSwatchPreview = exports.getSwatches = exports.getRolloverImage = exports.getSalePrice = exports.getPrice = void 0;
+exports.getItemUrl = exports.getIsHiddenFilterOptionField = exports.getIsHiddenFilterField = 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;
@@ -45,6 +45,16 @@ function getIsHiddenGroupField(group) {
     return (_a = group === null || group === void 0 ? void 0 : group.data) === null || _a === void 0 ? void 0 : _a.cio_plp_hidden;
 }
 exports.getIsHiddenGroupField = getIsHiddenGroupField;
+function getIsHiddenFilterField(facet) {
+    var _a;
+    return (_a = facet === null || facet === void 0 ? void 0 : facet.data) === null || _a === void 0 ? void 0 : _a.cio_plp_hidden;
+}
+exports.getIsHiddenFilterField = getIsHiddenFilterField;
+function getIsHiddenFilterOptionField(option) {
+    var _a;
+    return (_a = option === null || option === void 0 ? void 0 : option.data) === null || _a === void 0 ? void 0 : _a.cio_plp_hidden;
+}
+exports.getIsHiddenFilterOptionField = getIsHiddenFilterOptionField;
 function getItemUrl(item) {
     return item === null || item === void 0 ? void 0 : item.url;
 }

package/lib/cjs/utils/urlHelpers.js

@@ -111,6 +111,10 @@ function getUrlFromState(state, url) {
         if (exports.defaultQueryStringMap[key] === undefined) {
             return;
         }
+        // Don't append page=1 to URL since it's the default and affects SEO
+        if (key === 'page' && val === 1) {
+            return;
+        }
         let encodedVal = '';
         if (key === 'filters' && state.filters) {
             getFilterParamsFromState(params, state.filters);

package/lib/cjs/version.js

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

package/lib/mjs/components/Filters/FilterGroup.js

@@ -3,7 +3,7 @@ import { isMultipleOrBucketedFacet, isRangeFacet, isSingleFacet } from '../../ut
 import FilterOptionsList from './FilterOptionsList';
 import FilterRangeSlider from './FilterRangeSlider';
 export default function FilterGroup(props) {
-    const { facet, setFilter, initialNumOptions = 10, sliderStep, facetSliderSteps } = props;
+    const { facet, setFilter, initialNumOptions = 10, sliderStep, facetSliderSteps, isHiddenFilterOptionFn, } = props;
     const [isCollapsed, setIsCollapsed] = useState(false);
     const toggleIsCollapsed = () => setIsCollapsed(!isCollapsed);
     const onFilterSelect = (facetName) => (value) => {
@@ -13,6 +13,6 @@ export default function FilterGroup(props) {
         React.createElement("button", { className: 'cio-filter-header', type: 'button', onClick: toggleIsCollapsed },
             facet.displayName,
             React.createElement("i", { className: `cio-arrow ${isCollapsed ? 'cio-arrow-up' : 'cio-arrow-down'}` })),
-        (isMultipleOrBucketedFacet(facet) || isSingleFacet(facet)) && (React.createElement(FilterOptionsList, { isCollapsed: isCollapsed, facet: facet, modifyRequestMultipleFilter: onFilterSelect(facet.name), initialNumOptions: initialNumOptions })),
+        (isMultipleOrBucketedFacet(facet) || isSingleFacet(facet)) && (React.createElement(FilterOptionsList, { isCollapsed: isCollapsed, facet: facet, modifyRequestMultipleFilter: onFilterSelect(facet.name), initialNumOptions: initialNumOptions, isHiddenFilterOptionFn: isHiddenFilterOptionFn })),
         isRangeFacet(facet) && (React.createElement(FilterRangeSlider, { isCollapsed: isCollapsed, rangedFacet: facet, modifyRequestRangeFilter: onFilterSelect(facet.name), sliderStep: facetSliderSteps?.[facet.name] || sliderStep }))));
 }

package/lib/mjs/components/Filters/Filters.js

@@ -3,7 +3,7 @@ import React from 'react';
 import FilterGroup from './FilterGroup';
 import useFilter from '../../hooks/useFilter';
 export default function Filters(props) {
-    const { children, initialNumOptions, ...useFiltersProps } = props;
+    const { children, initialNumOptions, isHiddenFilterOptionFn, ...useFiltersProps } = props;
     const { facets, setFilter, sliderStep, facetSliderSteps, clearFilters } = useFilter(useFiltersProps);
     return (React.createElement(React.Fragment, null, typeof children === 'function' ? (children({
         facets,
@@ -11,5 +11,5 @@ export default function Filters(props) {
         sliderStep,
         facetSliderSteps,
         clearFilters,
-    })) : (React.createElement("div", { className: 'cio-filters' }, facets.map((facet) => (React.createElement(FilterGroup, { facet: facet, initialNumOptions: initialNumOptions, setFilter: setFilter, sliderStep: sliderStep, facetSliderSteps: facetSliderSteps, key: facet.name })))))));
+    })) : (React.createElement("div", { className: 'cio-filters' }, facets.map((facet) => (React.createElement(FilterGroup, { facet: facet, initialNumOptions: initialNumOptions, setFilter: setFilter, sliderStep: sliderStep, facetSliderSteps: facetSliderSteps, isHiddenFilterOptionFn: isHiddenFilterOptionFn, key: facet.name })))))));
 }

package/lib/mjs/components/Filters/UseFilterOptionsList.js

@@ -1,11 +1,19 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import useOptionsList from '../../hooks/useOptionsList';
+import { useCioPlpContext } from '../../hooks/useCioPlpContext';
 export default function useFilterOptionsList(props) {
-    const { initialNumOptions, modifyRequestMultipleFilter, isCollapsed } = props;
+    const { initialNumOptions, modifyRequestMultipleFilter, isCollapsed, isHiddenFilterOptionFn } = props;
     const facet = 'facet' in props ? props.facet : props.multipleFacet;
+    const { getIsHiddenFilterOptionField } = useCioPlpContext().itemFieldGetters;
+    const isHiddenOptionFn = useCallback((option) => (typeof isHiddenFilterOptionFn === 'function' && isHiddenFilterOptionFn(option)) ||
+        (typeof getIsHiddenFilterOptionField === 'function' &&
+            getIsHiddenFilterOptionField(option)) ||
+        false, [isHiddenFilterOptionFn, getIsHiddenFilterOptionField]);
     const { isShowAll, setIsShowAll, optionsToRender, setOptionsToRender } = useOptionsList({
         options: facet.options,
         initialNumOptions,
+        isHiddenOptionFn,
+        nestedOptionsKey: 'options', // Enable recursive filtering for hierarchical facet options
     });
     const [selectedOptionMap, setSelectedOptionMap] = useState({});
     const onOptionSelect = (optionValue) => {

package/lib/mjs/hooks/useFilter.js

@@ -1,12 +1,18 @@
+import { useCallback, useMemo } from 'react';
 import { useCioPlpContext } from './useCioPlpContext';
 import useRequestConfigs from './useRequestConfigs';
 export default function useFilter(props) {
-    const { facets, sliderStep, facetSliderSteps } = props;
+    const { facets, sliderStep, facetSliderSteps, isHiddenFilterFn } = props;
     const contextValue = useCioPlpContext();
     if (!contextValue) {
         throw new Error('useFilter must be used within a component that is a child of <CioPlp />');
     }
+    const { getIsHiddenFilterField } = contextValue.itemFieldGetters;
     const { getRequestConfigs, setRequestConfigs } = useRequestConfigs();
+    const isHiddenFilter = useCallback((facet) => (typeof isHiddenFilterFn === 'function' && isHiddenFilterFn(facet)) ||
+        (typeof getIsHiddenFilterField === 'function' && getIsHiddenFilterField(facet)) ||
+        false, [isHiddenFilterFn, getIsHiddenFilterField]);
+    const filteredFacets = useMemo(() => facets.filter((facet) => !isHiddenFilter(facet)), [facets, isHiddenFilter]);
     const setFilter = (filterName, filterValue) => {
         const newFilters = getRequestConfigs().filters || {};
         newFilters[filterName] = filterValue;
@@ -20,7 +26,7 @@ export default function useFilter(props) {
         setRequestConfigs({ filters: {}, page: 1 });
     };
     return {
-        facets,
+        facets: filteredFacets,
         setFilter,
         sliderStep,
         facetSliderSteps,

package/lib/mjs/hooks/useGroups.js

@@ -32,6 +32,7 @@ export default function useGroups(props) {
         options: groupOptions,
         initialNumOptions: numOptionsProps,
         isHiddenOptionFn,
+        nestedOptionsKey: 'children', // Enable recursive filtering for group children
     });
     const [selectedGroupId, setSelectedGroupId] = useState();
     const onOptionSelect = (groupId) => {

package/lib/mjs/hooks/useOptionsList.js

@@ -1,8 +1,30 @@
 import { useEffect, useMemo, useState } from 'react';
 const defaultIsHiddenOptionFn = () => false;
+/**
+ * Recursively filters options and their nested children
+ */
+function filterOptionsRecursively(options, isHiddenFn, nestedKey) {
+    return options
+        .filter((option) => !isHiddenFn(option))
+        .map((option) => {
+        const nestedOptions = option[nestedKey];
+        if (Array.isArray(nestedOptions) && nestedOptions.length > 0) {
+            return {
+                ...option,
+                [nestedKey]: filterOptionsRecursively(nestedOptions, isHiddenFn, nestedKey),
+            };
+        }
+        return option;
+    });
+}
 export default function useOptionsList(props) {
-    const { options, initialNumOptions = 5, isHiddenOptionFn = defaultIsHiddenOptionFn } = props;
-    const filteredOptions = useMemo(() => options.filter((option) => !isHiddenOptionFn(option)), [isHiddenOptionFn, options]);
+    const { options, initialNumOptions = 5, isHiddenOptionFn = defaultIsHiddenOptionFn, nestedOptionsKey, } = props;
+    const filteredOptions = useMemo(() => {
+        if (nestedOptionsKey) {
+            return filterOptionsRecursively(options, isHiddenOptionFn, nestedOptionsKey);
+        }
+        return options.filter((option) => !isHiddenOptionFn(option));
+    }, [isHiddenOptionFn, options, nestedOptionsKey]);
     const [isShowAll, setIsShowAll] = useState(false);
     const [optionsToRender, setOptionsToRender] = useState(filteredOptions);
     useEffect(() => {

package/lib/mjs/utils/dataAttributeHelpers.js

@@ -13,6 +13,7 @@ export const cnstrcDataAttrs = {
         zeroResults: 'data-cnstrc-zero-result',
         slCampaignId: 'data-cnstrc-sl-campaign-id',
         slCampaignOwner: 'data-cnstrc-sl-campaign-owner',
+        resultPage: 'data-cnstrc-result-page',
     },
     search: {
         searchContainer: 'data-cnstrc-search',
@@ -53,12 +54,14 @@ export function getPlpContainerCnstrcDataAttributes(data, requestConfigs, isLoad
     const { filterName, filterValue } = requestConfigs;
     const pageType = getPageType(requestConfigs);
     const isZeroResults = data.response.totalNumResults === 0;
+    const resultPage = data?.request?.page || requestConfigs.page || 1;
     let dataCnstrc = {};
     switch (pageType) {
         case 'browse':
             dataCnstrc = {
                 [cnstrcDataAttrs.browse.browseContainer]: true,
                 [cnstrcDataAttrs.common.numResults]: data.response.totalNumResults,
+                [cnstrcDataAttrs.common.resultPage]: resultPage,
                 [cnstrcDataAttrs.common.resultId]: data.resultId,
                 [cnstrcDataAttrs.browse.filterName]: filterName,
                 [cnstrcDataAttrs.browse.filterValue]: filterValue,
@@ -69,6 +72,7 @@ export function getPlpContainerCnstrcDataAttributes(data, requestConfigs, isLoad
                 [cnstrcDataAttrs.search.searchContainer]: true,
                 [cnstrcDataAttrs.common.resultId]: data.resultId,
                 [cnstrcDataAttrs.common.numResults]: data.response.totalNumResults,
+                [cnstrcDataAttrs.common.resultPage]: resultPage,
             };
             // Add search term
             if (data.request?.term) {

package/lib/mjs/utils/itemFieldGetters.js

@@ -33,6 +33,12 @@ export function getSwatchPreview(variation) {
 export function getIsHiddenGroupField(group) {
     return group?.data?.cio_plp_hidden;
 }
+export function getIsHiddenFilterField(facet) {
+    return facet?.data?.cio_plp_hidden;
+}
+export function getIsHiddenFilterOptionField(option) {
+    return option?.data?.cio_plp_hidden;
+}
 export function getItemUrl(item) {
     return item?.url;
 }

package/lib/mjs/utils/urlHelpers.js

@@ -99,6 +99,10 @@ export function getUrlFromState(state, url) {
         if (defaultQueryStringMap[key] === undefined) {
             return;
         }
+        // Don't append page=1 to URL since it's the default and affects SEO
+        if (key === 'page' && val === 1) {
+            return;
+        }
         let encodedVal = '';
         if (key === 'filters' && state.filters) {
             getFilterParamsFromState(params, state.filters);

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.8.4';
+export default '1.10.0';

package/lib/types/components/Filters/FilterGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PlpFacet } from '../../types';
+import type { PlpFacet, PlpFacetOption } from '../../types';
 import { UseFilterReturn } from '../../hooks/useFilter';
 export interface FilterGroupProps {
     facet: PlpFacet;
@@ -7,5 +7,10 @@ export interface FilterGroupProps {
     initialNumOptions?: number;
     sliderStep?: number;
     facetSliderSteps?: Record<string, number>;
+    /**
+     * Function that takes in a PlpFacetOption and returns `true` if the option should be hidden from the final render
+     * @returns boolean
+     */
+    isHiddenFilterOptionFn?: (option: PlpFacetOption) => boolean;
 }
 export default function FilterGroup(props: FilterGroupProps): React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IncludeRenderProps } from '../../types';
+import { IncludeRenderProps, PlpFacetOption } from '../../types';
 import { UseFilterProps, UseFilterReturn } from '../../hooks/useFilter';
 export type FiltersProps = UseFilterProps & {
     /**
@@ -7,6 +7,11 @@ export type FiltersProps = UseFilterProps & {
      * The remaining options will be hidden under a "Show All" button
      */
     initialNumOptions?: number;
+    /**
+     * Function that takes in a PlpFacetOption and returns `true` if the option should be hidden from the final render
+     * @returns boolean
+     */
+    isHiddenFilterOptionFn?: (option: PlpFacetOption) => boolean;
 };
 export type FiltersWithRenderProps = IncludeRenderProps<FiltersProps, UseFilterReturn>;
 export default function Filters(props: FiltersWithRenderProps): React.JSX.Element;

package/lib/types/components/Filters/UseFilterOptionsList.d.ts

@@ -1,8 +1,13 @@
-import { PlpMultipleFacet, PlpSingleFacet } from '../../types';
+import { PlpFacetOption, PlpMultipleFacet, PlpSingleFacet } from '../../types';
 interface UseFilterOptionsListPropsBase {
     modifyRequestMultipleFilter: (selectedOptions: Array<string> | null) => void;
     initialNumOptions: number;
     isCollapsed: boolean;
+    /**
+     * Function that takes in a PlpFacetOption and returns `true` if the option should be hidden from the final render
+     * @returns boolean
+     */
+    isHiddenFilterOptionFn?: (option: PlpFacetOption) => boolean;
 }
 interface UseFilterOptionsListPropsLegacy extends UseFilterOptionsListPropsBase {
     /** @deprecated Use `facet` instead */
@@ -19,8 +24,8 @@ export default function useFilterOptionsList(props: UseFilterOptionsListProps):
     isCollapsed: boolean;
     isShowAll: boolean;
     setIsShowAll: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    optionsToRender: import("../../types").PlpFacetOption[];
-    setOptionsToRender: import("react").Dispatch<import("react").SetStateAction<import("../../types").PlpFacetOption[]>>;
+    optionsToRender: PlpFacetOption[];
+    setOptionsToRender: import("react").Dispatch<import("react").SetStateAction<PlpFacetOption[]>>;
     selectedOptionMap: {};
     setSelectedOptionMap: import("react").Dispatch<import("react").SetStateAction<{}>>;
     onOptionSelect: (optionValue: string) => void;

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

@@ -19,5 +19,10 @@ export interface UseFilterProps {
      * Per-facet slider step configuration
      */
     facetSliderSteps?: Record<string, number>;
+    /**
+     * Function that takes in a PlpFacet and returns `true` if the facet should be hidden from the final render
+     * @returns boolean
+     */
+    isHiddenFilterFn?: (facet: PlpFacet) => boolean;
 }
 export default function useFilter(props: UseFilterProps): UseFilterReturn;

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

@@ -13,6 +13,11 @@ export interface UseOptionsListProps<T> {
      * @returns boolean
      */
     isHiddenOptionFn?: (option: T) => boolean;
+    /**
+     * Key name for nested options array (e.g., 'options' for hierarchical facets, 'children' for groups).
+     * When provided, filtering will be applied recursively to nested options.
+     */
+    nestedOptionsKey?: string;
 }
 export default function useOptionsList<T>(props: UseOptionsListProps<T>): {
     initialNumOptions: number;

package/lib/types/types.d.ts

@@ -17,6 +17,8 @@ export interface ItemFieldGetters {
     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;
+    getIsHiddenFilterField: (facet: PlpFacet) => boolean | undefined;
+    getIsHiddenFilterOptionField: (option: PlpFacetOption) => boolean | undefined;
     getItemUrl: (item: Item) => string | undefined;
 }
 export interface Formatters {
@@ -279,13 +281,13 @@ export interface PlpFacetOption {
     count: number;
     displayName: string;
     value: string;
-    data: object;
+    data: Record<string, any>;
     range?: ['-inf' | number, 'inf' | number];
     options?: Array<PlpHierarchicalFacetOption>;
 }
 export interface PlpHierarchicalFacetOption extends PlpFacetOption {
     options: Array<PlpHierarchicalFacetOption>;
-    data: object & {
+    data: Record<string, any> & {
         parentValue: string | null;
     };
 }

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

@@ -18,6 +18,7 @@ export declare const cnstrcDataAttrs: {
         zeroResults: string;
         slCampaignId: string;
         slCampaignOwner: string;
+        resultPage: string;
     };
     search: {
         searchContainer: string;

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

@@ -1,8 +1,10 @@
-import { ItemFieldGetters, Item, SwatchItem, Variation, PlpItemGroup } from '../types';
+import { ItemFieldGetters, Item, SwatchItem, Variation, PlpItemGroup, PlpFacet, PlpFacetOption } 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;
+export declare function getIsHiddenFilterField(facet: PlpFacet): any;
+export declare function getIsHiddenFilterOptionField(option: PlpFacetOption): any;
 export declare function getItemUrl(item: Item): string | undefined;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.8.4";
+declare const _default: "1.10.0";
 export default _default;

package/package.json

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