@constructor-io/constructorio-ui-plp 1.8.1 → 1.8.3

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

@@ -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) && (react_1.default.createElement(FilterOptionsList_1.default, { isCollapsed: isCollapsed, multipleFacet: 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 })),
         (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/UseFilterOptionsList.js

@@ -4,15 +4,16 @@ const tslib_1 = require("tslib");
 const react_1 = require("react");
 const useOptionsList_1 = tslib_1.__importDefault(require("../../hooks/useOptionsList"));
 function useFilterOptionsList(props) {
-    const { multipleFacet: facet, initialNumOptions, modifyRequestMultipleFilter, isCollapsed, } = props;
+    const { initialNumOptions, modifyRequestMultipleFilter, isCollapsed } = props;
+    const facet = 'facet' in props ? props.facet : props.multipleFacet;
     const { isShowAll, setIsShowAll, optionsToRender, setOptionsToRender } = (0, useOptionsList_1.default)({
         options: facet.options,
         initialNumOptions,
     });
     const [selectedOptionMap, setSelectedOptionMap] = (0, react_1.useState)({});
     const onOptionSelect = (optionValue) => {
-        const newMap = Object.assign({}, selectedOptionMap);
-        newMap[optionValue] = !newMap[optionValue];
+        const newMap = facet.type === 'multiple' ? Object.assign({}, selectedOptionMap) : {};
+        newMap[optionValue] = !selectedOptionMap[optionValue];
         const selectedOptions = Object.keys(newMap).filter((key) => newMap[key]);
         setSelectedOptionMap(newMap);
         modifyRequestMultipleFilter(selectedOptions.length ? selectedOptions : null);

package/lib/cjs/version.js

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

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { isMultipleOrBucketedFacet, isRangeFacet } from '../../utils';
+import { isMultipleOrBucketedFacet, isRangeFacet, isSingleFacet } from '../../utils';
 import FilterOptionsList from './FilterOptionsList';
 import FilterRangeSlider from './FilterRangeSlider';
 export default function FilterGroup(props) {
@@ -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) && (React.createElement(FilterOptionsList, { isCollapsed: isCollapsed, multipleFacet: facet, modifyRequestMultipleFilter: onFilterSelect(facet.name), initialNumOptions: initialNumOptions })),
+        (isMultipleOrBucketedFacet(facet) || isSingleFacet(facet)) && (React.createElement(FilterOptionsList, { isCollapsed: isCollapsed, facet: facet, modifyRequestMultipleFilter: onFilterSelect(facet.name), initialNumOptions: initialNumOptions })),
         isRangeFacet(facet) && (React.createElement(FilterRangeSlider, { isCollapsed: isCollapsed, rangedFacet: facet, modifyRequestRangeFilter: onFilterSelect(facet.name), sliderStep: facetSliderSteps?.[facet.name] || sliderStep }))));
 }

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

@@ -1,15 +1,16 @@
 import { useEffect, useState } from 'react';
 import useOptionsList from '../../hooks/useOptionsList';
 export default function useFilterOptionsList(props) {
-    const { multipleFacet: facet, initialNumOptions, modifyRequestMultipleFilter, isCollapsed, } = props;
+    const { initialNumOptions, modifyRequestMultipleFilter, isCollapsed } = props;
+    const facet = 'facet' in props ? props.facet : props.multipleFacet;
     const { isShowAll, setIsShowAll, optionsToRender, setOptionsToRender } = useOptionsList({
         options: facet.options,
         initialNumOptions,
     });
     const [selectedOptionMap, setSelectedOptionMap] = useState({});
     const onOptionSelect = (optionValue) => {
-        const newMap = { ...selectedOptionMap };
-        newMap[optionValue] = !newMap[optionValue];
+        const newMap = facet.type === 'multiple' ? { ...selectedOptionMap } : {};
+        newMap[optionValue] = !selectedOptionMap[optionValue];
         const selectedOptions = Object.keys(newMap).filter((key) => newMap[key]);
         setSelectedOptionMap(newMap);
         modifyRequestMultipleFilter(selectedOptions.length ? selectedOptions : null);

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.8.1';
+export default '1.8.3';

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

@@ -1,12 +1,19 @@
-import { PlpMultipleFacet } from '../../types';
-export interface UseFilterOptionsListProps {
-    multipleFacet: PlpMultipleFacet;
+import { PlpMultipleFacet, PlpSingleFacet } from '../../types';
+interface UseFilterOptionsListPropsBase {
     modifyRequestMultipleFilter: (selectedOptions: Array<string> | null) => void;
     initialNumOptions: number;
     isCollapsed: boolean;
 }
+interface UseFilterOptionsListPropsLegacy extends UseFilterOptionsListPropsBase {
+    /** @deprecated Use `facet` instead */
+    multipleFacet: PlpMultipleFacet | PlpSingleFacet;
+}
+interface UseFilterOptionsListPropsNew extends UseFilterOptionsListPropsBase {
+    facet: PlpMultipleFacet | PlpSingleFacet;
+}
+export type UseFilterOptionsListProps = UseFilterOptionsListPropsLegacy | UseFilterOptionsListPropsNew;
 export default function useFilterOptionsList(props: UseFilterOptionsListProps): {
-    facet: PlpMultipleFacet;
+    facet: PlpMultipleFacet | PlpSingleFacet;
     initialNumOptions: number;
     modifyRequestMultipleFilter: (selectedOptions: string[] | null) => void;
     isCollapsed: boolean;
@@ -18,3 +25,4 @@ export default function useFilterOptionsList(props: UseFilterOptionsListProps):
     setSelectedOptionMap: import("react").Dispatch<import("react").SetStateAction<{}>>;
     onOptionSelect: (optionValue: string) => void;
 };
+export {};

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.8.1";
+declare const _default: "1.8.3";
 export default _default;

package/package.json

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