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

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

@@ -14,7 +14,7 @@ function FilterOptionsList(props) {
             'cio-collapsible-is-open': !isCollapsed,
         }) },
         react_1.default.createElement("ul", { className: 'cio-filter-multiple-options-list cio-collapsible-inner' },
-            optionsToRender.map((option) => (react_1.default.createElement(FilterOptionListRow_1.default, { id: `${facet.name}-${option.value}`, optionValue: option.value, displayValue: option.displayName, displayCountValue: option.count.toString(), isChecked: selectedOptionMap[option.value] || false, onChange: onOptionSelect }))),
+            optionsToRender.map((option) => (react_1.default.createElement(FilterOptionListRow_1.default, { id: `${facet.name}-${option.value}`, key: option.value, optionValue: option.value, displayValue: option.displayName, displayCountValue: option.count.toString(), isChecked: selectedOptionMap[option.value] || false, onChange: onOptionSelect }))),
             initialNumOptions < facet.options.length && (react_1.default.createElement("button", { type: 'button', className: 'cio-see-all', onClick: () => setIsShowAll(!isShowAll) }, isShowAll ? 'Show Less' : 'Show All')))));
 }
 exports.default = FilterOptionsList;

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

@@ -7,12 +7,13 @@ 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 { facets, setFilter, sliderStep, facetSliderSteps } = (0, useFilter_1.default)(useFiltersProps);
+    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,
         setFilter,
         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 })))))));
 }
 exports.default = Filters;

package/lib/cjs/hooks/useFilter.js

@@ -10,9 +10,8 @@ function useFilter(props) {
         throw new Error('useFilter must be used within a component that is a child of <CioPlp />');
     }
     const { getRequestConfigs, setRequestConfigs } = (0, useRequestConfigs_1.default)();
-    const { filters: requestFilters } = getRequestConfigs();
     const setFilter = (filterName, filterValue) => {
-        const newFilters = requestFilters || {};
+        const newFilters = getRequestConfigs().filters || {};
         newFilters[filterName] = filterValue;
         // Remove filter entirely
         if (filterValue === null) {
@@ -20,11 +19,15 @@ function useFilter(props) {
         }
         setRequestConfigs({ filters: newFilters, page: 1 });
     };
+    const clearFilters = () => {
+        setRequestConfigs({ filters: {}, page: 1 });
+    };
     return {
         facets,
         setFilter,
         sliderStep,
         facetSliderSteps,
+        clearFilters,
     };
 }
 exports.default = useFilter;

package/lib/cjs/version.js

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

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

@@ -11,6 +11,6 @@ export default function FilterOptionsList(props) {
             'cio-collapsible-is-open': !isCollapsed,
         }) },
         React.createElement("ul", { className: 'cio-filter-multiple-options-list cio-collapsible-inner' },
-            optionsToRender.map((option) => (React.createElement(FilterOptionListRow, { id: `${facet.name}-${option.value}`, optionValue: option.value, displayValue: option.displayName, displayCountValue: option.count.toString(), isChecked: selectedOptionMap[option.value] || false, onChange: onOptionSelect }))),
+            optionsToRender.map((option) => (React.createElement(FilterOptionListRow, { id: `${facet.name}-${option.value}`, key: option.value, optionValue: option.value, displayValue: option.displayName, displayCountValue: option.count.toString(), isChecked: selectedOptionMap[option.value] || false, onChange: onOptionSelect }))),
             initialNumOptions < facet.options.length && (React.createElement("button", { type: 'button', className: 'cio-see-all', onClick: () => setIsShowAll(!isShowAll) }, isShowAll ? 'Show Less' : 'Show All')))));
 }

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

@@ -4,11 +4,12 @@ import FilterGroup from './FilterGroup';
 import useFilter from '../../hooks/useFilter';
 export default function Filters(props) {
     const { children, initialNumOptions, ...useFiltersProps } = props;
-    const { facets, setFilter, sliderStep, facetSliderSteps } = useFilter(useFiltersProps);
+    const { facets, setFilter, sliderStep, facetSliderSteps, clearFilters } = useFilter(useFiltersProps);
     return (React.createElement(React.Fragment, null, typeof children === 'function' ? (children({
         facets,
         setFilter,
         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 })))))));
 }

package/lib/mjs/hooks/useFilter.js

@@ -7,9 +7,8 @@ export default function useFilter(props) {
         throw new Error('useFilter must be used within a component that is a child of <CioPlp />');
     }
     const { getRequestConfigs, setRequestConfigs } = useRequestConfigs();
-    const { filters: requestFilters } = getRequestConfigs();
     const setFilter = (filterName, filterValue) => {
-        const newFilters = requestFilters || {};
+        const newFilters = getRequestConfigs().filters || {};
         newFilters[filterName] = filterValue;
         // Remove filter entirely
         if (filterValue === null) {
@@ -17,10 +16,14 @@ export default function useFilter(props) {
         }
         setRequestConfigs({ filters: newFilters, page: 1 });
     };
+    const clearFilters = () => {
+        setRequestConfigs({ filters: {}, page: 1 });
+    };
     return {
         facets,
         setFilter,
         sliderStep,
         facetSliderSteps,
+        clearFilters,
     };
 }

package/lib/mjs/version.js

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

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

@@ -4,6 +4,7 @@ export interface UseFilterReturn {
     setFilter: (filterName: string, filterValue: PlpFilterValue) => void;
     sliderStep?: number;
     facetSliderSteps?: Record<string, number>;
+    clearFilters: () => void;
 }
 export interface UseFilterProps {
     /**

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.4.6";
+declare const _default: "1.4.7";
 export default _default;

package/package.json

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