@constructor-io/constructorio-ui-plp 1.11.0 → 1.12.1

package/lib/cjs/components/CioPlpGrid/CioPlpGrid.js

@@ -71,7 +71,7 @@ function CioPlpGrid(props) {
                 react_1.default.createElement("div", { className: 'cio-product-tiles-container' },
                     react_1.default.createElement(MobileModal_1.default, { isOpen: isFilterOpen, setIsOpen: setIsFilterOpen },
                         isSearchPage && (react_1.default.createElement(Groups_1.default, Object.assign({ groups: data.response.groups }, groupsConfigs))),
-                        react_1.default.createElement(Filters_1.default, { facets: filters.facets })), (_e = (_d = data.response) === null || _d === void 0 ? void 0 : _d.results) === null || _e === void 0 ? void 0 :
+                        react_1.default.createElement(Filters_1.default, Object.assign({ facets: filters.facets }, filterConfigs))), (_e = (_d = data.response) === null || _d === void 0 ? void 0 : _d.results) === null || _e === void 0 ? void 0 :
                     _e.map((item) => (react_1.default.createElement("div", { className: 'cio-product-tile', key: item.itemId },
                         react_1.default.createElement(ProductCard_1.default, { key: item.itemId, item: item }))))),
                 react_1.default.createElement("div", { className: 'cio-pagination-container' },

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

@@ -5,18 +5,33 @@ const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
 const FilterOptionsList_1 = tslib_1.__importDefault(require("./FilterOptionsList"));
 const FilterRangeSlider_1 = tslib_1.__importDefault(require("./FilterRangeSlider"));
+const RenderPropsWrapper_1 = tslib_1.__importDefault(require("../RenderPropsWrapper/RenderPropsWrapper"));
+const useCioPlpContext_1 = require("../../hooks/useCioPlpContext");
 function FilterGroup(props) {
-    const { facet, setFilter, initialNumOptions = 10, sliderStep, facetSliderSteps, isHiddenFilterOptionFn, } = props;
+    var _a, _b, _c, _d;
+    const { facet, setFilter, initialNumOptions = 10, sliderStep, facetSliderSteps, isHiddenFilterOptionFn, componentOverrides: componentOverridesProp, } = props;
+    const context = (0, useCioPlpContext_1.useCioPlpContext)();
+    const componentOverrides = componentOverridesProp !== null && componentOverridesProp !== void 0 ? componentOverridesProp : (_a = context === null || context === void 0 ? void 0 : context.componentOverrides) === null || _a === void 0 ? void 0 : _a.filterGroup;
     const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(false);
     const toggleIsCollapsed = () => setIsCollapsed(!isCollapsed);
     const onFilterSelect = (facetName) => (value) => {
         setFilter(facetName, value);
     };
-    return (react_1.default.createElement("li", { className: 'cio-filter-group' },
-        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, 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 }))));
+    const renderProps = {
+        facet,
+        isCollapsed,
+        toggleIsCollapsed,
+        onFilterSelect: onFilterSelect(facet.name),
+    };
+    return (react_1.default.createElement(RenderPropsWrapper_1.default, { props: renderProps, override: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.reactNode },
+        react_1.default.createElement("li", { className: 'cio-filter-group' },
+            react_1.default.createElement(RenderPropsWrapper_1.default, { props: renderProps, override: (_b = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.header) === null || _b === void 0 ? void 0 : _b.reactNode },
+                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(RenderPropsWrapper_1.default, { props: renderProps, override: (_c = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.optionsList) === null || _c === void 0 ? void 0 : _c.reactNode },
+                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(RenderPropsWrapper_1.default, { props: renderProps, override: (_d = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.rangeSlider) === null || _d === void 0 ? void 0 : _d.reactNode },
+                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/hooks/useCioPlpProvider.js

@@ -8,7 +8,7 @@ const defaultFormatters = tslib_1.__importStar(require("../utils/formatters"));
 const defaultUrlHelpers = tslib_1.__importStar(require("../utils/urlHelpers"));
 const shopifyDefaults_1 = require("../utils/shopifyDefaults");
 function useCioPlpProvider(props) {
-    const { apiKey, formatters, callbacks, itemFieldGetters, urlHelpers, staticRequestConfigs = {}, renderOverrides = {}, cioClient: customCioClient, cioClientOptions: customCioClientOptions = {}, useShopifyDefaults = false, } = props;
+    const { apiKey, formatters, callbacks, itemFieldGetters, urlHelpers, staticRequestConfigs = {}, renderOverrides = {}, cioClient: customCioClient, cioClientOptions: customCioClientOptions = {}, useShopifyDefaults = false, componentOverrides = {}, } = 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)(() => ({
@@ -21,6 +21,7 @@ function useCioPlpProvider(props) {
         callbacks: Object.assign(Object.assign({}, (useShopifyDefaults && shopifyDefaults_1.shopifyDefaults.callbacks)), callbacks),
         urlHelpers: Object.assign(Object.assign(Object.assign({}, defaultUrlHelpers), (useShopifyDefaults && shopifyDefaults_1.shopifyDefaults.urlHelpers)), urlHelpers),
         renderOverrides: Object.assign({}, renderOverrides),
+        componentOverrides: Object.assign({}, componentOverrides),
     }), [
         cioClient,
         cioClientOptions,
@@ -31,6 +32,7 @@ function useCioPlpProvider(props) {
         renderOverrides,
         staticRequestConfigs,
         useShopifyDefaults,
+        componentOverrides,
     ]);
     return contextValue;
 }

package/lib/cjs/version.js

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

package/lib/mjs/components/CioPlpGrid/CioPlpGrid.js

@@ -67,7 +67,7 @@ export default function CioPlpGrid(props) {
                 React.createElement("div", { className: 'cio-product-tiles-container' },
                     React.createElement(MobileModal, { isOpen: isFilterOpen, setIsOpen: setIsFilterOpen },
                         isSearchPage && (React.createElement(Groups, { groups: data.response.groups, ...groupsConfigs })),
-                        React.createElement(Filters, { facets: filters.facets })),
+                        React.createElement(Filters, { facets: filters.facets, ...filterConfigs })),
                     data.response?.results?.map((item) => (React.createElement("div", { className: 'cio-product-tile', key: item.itemId },
                         React.createElement(ProductCard, { key: item.itemId, item: item }))))),
                 React.createElement("div", { className: 'cio-pagination-container' },

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

@@ -2,17 +2,31 @@ import React, { useState } from 'react';
 import { isMultipleOrBucketedFacet, isRangeFacet, isSingleFacet } from '../../utils';
 import FilterOptionsList from './FilterOptionsList';
 import FilterRangeSlider from './FilterRangeSlider';
+import RenderPropsWrapper from '../RenderPropsWrapper/RenderPropsWrapper';
+import { useCioPlpContext } from '../../hooks/useCioPlpContext';
 export default function FilterGroup(props) {
-    const { facet, setFilter, initialNumOptions = 10, sliderStep, facetSliderSteps, isHiddenFilterOptionFn, } = props;
+    const { facet, setFilter, initialNumOptions = 10, sliderStep, facetSliderSteps, isHiddenFilterOptionFn, componentOverrides: componentOverridesProp, } = props;
+    const context = useCioPlpContext();
+    const componentOverrides = componentOverridesProp ?? context?.componentOverrides?.filterGroup;
     const [isCollapsed, setIsCollapsed] = useState(false);
     const toggleIsCollapsed = () => setIsCollapsed(!isCollapsed);
     const onFilterSelect = (facetName) => (value) => {
         setFilter(facetName, value);
     };
-    return (React.createElement("li", { className: 'cio-filter-group' },
-        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, isHiddenFilterOptionFn: isHiddenFilterOptionFn })),
-        isRangeFacet(facet) && (React.createElement(FilterRangeSlider, { isCollapsed: isCollapsed, rangedFacet: facet, modifyRequestRangeFilter: onFilterSelect(facet.name), sliderStep: facetSliderSteps?.[facet.name] || sliderStep }))));
+    const renderProps = {
+        facet,
+        isCollapsed,
+        toggleIsCollapsed,
+        onFilterSelect: onFilterSelect(facet.name),
+    };
+    return (React.createElement(RenderPropsWrapper, { props: renderProps, override: componentOverrides?.reactNode },
+        React.createElement("li", { className: 'cio-filter-group' },
+            React.createElement(RenderPropsWrapper, { props: renderProps, override: componentOverrides?.header?.reactNode },
+                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(RenderPropsWrapper, { props: renderProps, override: componentOverrides?.optionsList?.reactNode },
+                React.createElement(FilterOptionsList, { isCollapsed: isCollapsed, facet: facet, modifyRequestMultipleFilter: onFilterSelect(facet.name), initialNumOptions: initialNumOptions, isHiddenFilterOptionFn: isHiddenFilterOptionFn }))),
+            isRangeFacet(facet) && (React.createElement(RenderPropsWrapper, { props: renderProps, override: componentOverrides?.rangeSlider?.reactNode },
+                React.createElement(FilterRangeSlider, { isCollapsed: isCollapsed, rangedFacet: facet, modifyRequestRangeFilter: onFilterSelect(facet.name), sliderStep: facetSliderSteps?.[facet.name] || sliderStep }))))));
 }

package/lib/mjs/hooks/useCioPlpProvider.js

@@ -5,7 +5,7 @@ import * as defaultFormatters from '../utils/formatters';
 import * as defaultUrlHelpers from '../utils/urlHelpers';
 import { shopifyDefaults } from '../utils/shopifyDefaults';
 export default function useCioPlpProvider(props) {
-    const { apiKey, formatters, callbacks, itemFieldGetters, urlHelpers, staticRequestConfigs = {}, renderOverrides = {}, cioClient: customCioClient, cioClientOptions: customCioClientOptions = {}, useShopifyDefaults = false, } = props;
+    const { apiKey, formatters, callbacks, itemFieldGetters, urlHelpers, staticRequestConfigs = {}, renderOverrides = {}, cioClient: customCioClient, cioClientOptions: customCioClientOptions = {}, useShopifyDefaults = false, componentOverrides = {}, } = props;
     const [cioClientOptions, setCioClientOptions] = useState(customCioClientOptions);
     const cioClient = useCioClient({ apiKey, cioClient: customCioClient, options: cioClientOptions });
     const contextValue = useMemo(() => ({
@@ -22,6 +22,7 @@ export default function useCioPlpProvider(props) {
             ...urlHelpers,
         },
         renderOverrides: { ...renderOverrides },
+        componentOverrides: { ...componentOverrides },
     }), [
         cioClient,
         cioClientOptions,
@@ -32,6 +33,7 @@ export default function useCioPlpProvider(props) {
         renderOverrides,
         staticRequestConfigs,
         useShopifyDefaults,
+        componentOverrides,
     ]);
     return contextValue;
 }

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.11.0';
+export default '1.12.1';

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { PlpFacet, PlpFacetOption } from '../../types';
+import type { IncludeComponentOverrides } from '@constructor-io/constructorio-ui-components';
+import type { PlpFacet, PlpFacetOption, FilterGroupOverrides } from '../../types';
 import { UseFilterReturn } from '../../hooks/useFilter';
-export interface FilterGroupProps {
+export interface FilterGroupProps extends IncludeComponentOverrides<FilterGroupOverrides> {
     facet: PlpFacet;
     setFilter: UseFilterReturn['setFilter'];
     initialNumOptions?: number;

package/lib/types/index.d.ts

@@ -25,6 +25,7 @@ export type { BreadcrumbsProps } from './components/Breadcrumbs';
 export type { CioPlpProps } from './components/CioPlp';
 export type { CioPlpGridProps, CioPlpGridWithRenderProps } from './components/CioPlpGrid';
 export type { FiltersProps, FiltersWithRenderProps } from './components/Filters';
+export type { FilterGroupProps } from './components/Filters/FilterGroup';
 export type { GroupsProps, GroupsWithRenderProps } from './components/Groups';
 export type { MobileModalProps } from './components/MobileModal';
 export type { PaginationProps, PaginationWithRenderProps } from './components/Pagination';

package/lib/types/types.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ReactNode } from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { ConstructorClientOptions, Group as ApiGroup, Facet as ApiFacet, Result, SearchResponse, GetBrowseResultsResponse, VariationsMap, FilterExpression, FmtOptions, Nullable, SearchRequestType, SearchResponseType, Redirect, SearchParameters, BrowseRequestType, FacetOption as ApiFacetOption } from '@constructor-io/constructorio-client-javascript/lib/types';
+import type { ComponentOverrideProps } from '@constructor-io/constructorio-ui-components';
 export { Nullable, ConstructorIOClient, SearchResponseType, SearchParameters, Redirect, ApiFacet, ApiFacetOption, ApiGroup, };
 export interface ApiHierarchicalFacetOption extends ApiFacetOption {
     options: Array<ApiHierarchicalFacetOption>;
@@ -155,6 +156,7 @@ export interface PlpContextValue {
     callbacks: Callbacks;
     urlHelpers: UrlHelpers;
     renderOverrides: RenderOverrides;
+    componentOverrides: PlpComponentOverrides;
 }
 export interface PrimaryColorStyles {
     '--primary-color-h': string;
@@ -219,6 +221,7 @@ export interface CioPlpProviderProps {
     initialBrowseResponse?: GetBrowseResultsResponse;
     staticRequestConfigs?: Partial<RequestConfigs>;
     useShopifyDefaults?: boolean;
+    componentOverrides?: PlpComponentOverrides;
 }
 export type UseSortReturn = {
     sortOptions: PlpSortOption[];
@@ -324,3 +327,34 @@ export type IncludeRawResponse<TransformedType, OriginalType> = TransformedType
  * Given a Type T and a set of keys K (pipe-delimited string), make those keys optional.
  */
 export type MakeOptional<Type, Keys extends string & keyof Partial<Type>> = Omit<Type, Keys> & Partial<Pick<Type, Keys>>;
+/**
+ * Render props passed to every FilterGroup override function.
+ * Provides the full state needed to rebuild any part of a filter group.
+ */
+export interface FilterGroupRenderProps {
+    /** The facet data for this filter group */
+    facet: PlpFacet;
+    /** Whether this filter group is currently collapsed */
+    isCollapsed: boolean;
+    /** Toggle the collapsed state */
+    toggleIsCollapsed: () => void;
+    /** Callback to apply a filter value for this facet */
+    onFilterSelect: (value: PlpFilterValue) => void;
+}
+/**
+ * Component override slots available on `FilterGroup`.
+ *
+ * Top-level `reactNode` replaces the entire `<li>` filter group element.
+ * Each nested key maps to a sub-component that can be replaced via `ComponentOverrideProps<FilterGroupRenderProps>`:
+ * - **header** — replaces the header button (facet name + collapse arrow)
+ * - **optionsList** — replaces the `FilterOptionsList` (checkboxes + "Show All" toggle)
+ * - **rangeSlider** — replaces the `FilterRangeSlider` (min/max inputs + slider track)
+ */
+export type FilterGroupOverrides = ComponentOverrideProps<FilterGroupRenderProps> & {
+    header?: ComponentOverrideProps<FilterGroupRenderProps>;
+    optionsList?: ComponentOverrideProps<FilterGroupRenderProps>;
+    rangeSlider?: ComponentOverrideProps<FilterGroupRenderProps>;
+};
+export interface PlpComponentOverrides {
+    filterGroup?: FilterGroupOverrides;
+}

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.11.0";
+declare const _default: "1.12.1";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-plp",
-  "version": "1.11.0",
+  "version": "1.12.1",
   "description": "Constructor PLP UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",
@@ -54,11 +54,12 @@
     "storybook-docs-dev": "storybook dev --docs -p 6007",
     "serve-built-storybook": "npx http-server docs",
     "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles && vite build",
-    "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause' --excludePackages 'picocolors@1.0.0'",
+    "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause;ISC' --excludePackages 'picocolors@1.0.0;graceful-fs@4.2.11;lightningcss@1.31.1;lightningcss-android-arm64@1.31.1;lightningcss-darwin-arm64@1.31.1;lightningcss-darwin-x64@1.31.1;lightningcss-freebsd-x64@1.31.1;lightningcss-linux-arm-gnueabihf@1.31.1;lightningcss-linux-arm64-gnu@1.31.1;lightningcss-linux-arm64-musl@1.31.1;lightningcss-linux-x64-gnu@1.31.1;lightningcss-linux-x64-musl@1.31.1;lightningcss-win32-arm64-msvc@1.31.1;lightningcss-win32-x64-msvc@1.31.1'",
     "prepare": "husky install"
   },
   "peerDependencies": {
     "@constructor-io/constructorio-client-javascript": "^2.35.14",
+    "@constructor-io/constructorio-ui-components": "^1.3.2",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0",
     "tslib": "^2.4.0"
@@ -104,7 +105,7 @@
     "eslint-plugin-storybook": "^0.12.0",
     "husky": "^8.0.0",
     "jest": "^28.1.3",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest-environment-jsdom": "^30.3.0",
     "license-checker": "^25.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -114,11 +115,15 @@
     "typescript": "^4.9.4",
     "vite": "^6.3.5",
     "vite-plugin-css-injected-by-js": "^3.1.0",
-    "webpack": "^5.94.0"
+    "webpack": "^5.94.0",
+    "@constructor-io/constructorio-ui-components": "^1.3.2"
   },
   "dependencies": {
     "classnames": "^2.5.1"
   },
+  "overrides": {
+    "lightningcss": "1.31.1"
+  },
   "volta": {
     "node": "22.18.0",
     "npm": "10.9.3"