@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/components/Organisms/Facet/Facet.js

@@ -1,45 +1,32 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Facet = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var FacetListOptions_1 = require("../../Molecules/FacetListOptions");
-var FacetGridOptions_1 = require("../../Molecules/FacetGridOptions");
-var FacetPaletteOptions_1 = require("../../Molecules/FacetPaletteOptions");
-var FacetHierarchyOptions_1 = require("../../Molecules/FacetHierarchyOptions");
-var FacetSlider_1 = require("../../Molecules/FacetSlider");
-var SearchInput_1 = require("../../Molecules/SearchInput");
-var Icon_1 = require("../../Atoms/Icon");
-var Dropdown_1 = require("../../Atoms/Dropdown");
-var types_1 = require("../../../types");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var useA11y_1 = require("../../../hooks/useA11y");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const FacetListOptions_1 = require("../../Molecules/FacetListOptions");
+const FacetGridOptions_1 = require("../../Molecules/FacetGridOptions");
+const FacetPaletteOptions_1 = require("../../Molecules/FacetPaletteOptions");
+const FacetHierarchyOptions_1 = require("../../Molecules/FacetHierarchyOptions");
+const FacetSlider_1 = require("../../Molecules/FacetSlider");
+const SearchInput_1 = require("../../Molecules/SearchInput");
+const Icon_1 = require("../../Atoms/Icon");
+const Dropdown_1 = require("../../Atoms/Dropdown");
+const types_1 = require("../../../types");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const useA11y_1 = require("../../../hooks/useA11y");
 // import { FacetToggle, FacetToggleProps } from '../../Molecules/FacetToggle';
-var hooks_2 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var Button_1 = require("../../Atoms/Button");
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var disableCollapse = _a.disableCollapse, color = _a.color, theme = _a.theme;
+const hooks_2 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const Button_1 = require("../../Atoms/Button");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const defaultStyles = ({ disableCollapse, color, theme }) => {
     return (0, react_1.css)({
         width: '100%',
         margin: '0 0 20px 0',
@@ -48,9 +35,9 @@ var defaultStyles = function (_a) {
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
-            color: color || ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary),
+            color: color || theme?.variables?.colors?.primary,
             border: 'none',
-            borderBottom: "2px solid ".concat(((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.primary) || '#ccc'),
+            borderBottom: `2px solid ${theme?.variables?.colors?.primary || '#ccc'}`,
             padding: '6px 0',
             '& .ss__facet__header__inner': {
                 display: 'flex',
@@ -63,7 +50,7 @@ var defaultStyles = function (_a) {
             marginLeft: '10px',
             border: 'none',
             padding: '0',
-            color: color || ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _f === void 0 ? void 0 : _f.colors) === null || _g === void 0 ? void 0 : _g.primary),
+            color: color || theme?.variables?.colors?.primary,
             '&:hover': {
                 textDecoration: 'underline',
             },
@@ -115,7 +102,7 @@ var defaultStyles = function (_a) {
         '.ss__facet__range-input': {
             flexDirection: 'row',
             display: 'flex',
-            border: "1px solid ".concat(((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _h === void 0 ? void 0 : _h.colors) === null || _j === void 0 ? void 0 : _j.secondary) || '#ccc'),
+            border: `1px solid ${theme?.variables?.colors?.secondary || '#ccc'}`,
             backgroundColor: 'white',
             alignItems: 'center',
             '.ss__facet__range-input__prefix': {
@@ -129,11 +116,10 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Facet = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         limit: 12,
         disableOverflow: false,
         iconCollapse: 'angle-up',
@@ -149,87 +135,147 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
         name: (0, snap_toolbox_1.fieldNameToComponentName)(properties.facet.field),
     };
-    var props = (0, utilities_1.mergeProps)('facet', globalTheme, defaultProps, properties);
+    let props = (0, utilities_1.mergeProps)('facet', globalTheme, defaultProps, properties);
+    // resolves the rendered display type - the displayType prop overrides the API display, but only
+    // list, grid and palette are interchangeable; other displays (slider, hierarchy, toggle) have data
+    // requirements that must match the API display, so misaligned overrides fall back to the API display
+    const interchangeableDisplays = [types_1.FacetDisplay.LIST, types_1.FacetDisplay.GRID, types_1.FacetDisplay.PALETTE];
+    const resolveDisplayType = () => {
+        // the store types display as a plain string, so it is narrowed here - the options switch renders
+        // its default case for any value outside of FacetDisplay
+        const apiDisplay = props.facet?.display;
+        if (props.displayType && interchangeableDisplays.includes(apiDisplay) && interchangeableDisplays.includes(props.displayType)) {
+            return props.displayType;
+        }
+        return apiDisplay;
+    };
+    let displayType = resolveDisplayType();
     //manual props override on a per facet display type level using the display prop
-    if (props.display && props.display[(_a = props.facet) === null || _a === void 0 ? void 0 : _a.display]) {
-        props = __assign(__assign({}, props), props.display[(_b = props.facet) === null || _b === void 0 ? void 0 : _b.display]);
+    if (props.display && props.display[displayType]) {
+        props = {
+            ...props,
+            ...props.display[displayType],
+        };
     }
     //manual props override on a per facet field type level using the fields prop
-    if (props.fields && props.fields[(_c = props.facet) === null || _c === void 0 ? void 0 : _c.field]) {
-        props = __assign(__assign({}, props), props.fields[(_d = props.facet) === null || _d === void 0 ? void 0 : _d.field]);
+    if (props.fields && props.fields[props.facet?.field]) {
+        props = {
+            ...props,
+            ...props.fields[props.facet?.field],
+        };
     }
-    var disableCollapse = props.disableCollapse, facet = props.facet, iconCollapse = props.iconCollapse, iconExpand = props.iconExpand, limit = props.limit, statefulOverflow = props.statefulOverflow, disableOverflow = props.disableOverflow, iconColor = props.iconColor, color = props.color, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, showSelectedCount = props.showSelectedCount, hideSelectedCountParenthesis = props.hideSelectedCountParenthesis, clearAllIcon = props.clearAllIcon, showClearAllText = props.showClearAllText, justContent = props.justContent, horizontal = props.horizontal, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _s = (0, hooks_2.useCustomComponentOverride)('facet', props), overrideElement = _s.overrideElement, shouldRenderDefault = _s.shouldRenderDefault;
+    // re-resolve in case the display or fields overrides set a displayType
+    displayType = resolveDisplayType();
+    const { disableCollapse, facet, iconCollapse, iconExpand, limit, statefulOverflow, disableOverflow, iconColor, color, previewOnFocus, valueProps, showSelectedCount, hideSelectedCountParenthesis, clearAllIcon, showClearAllText, justContent, horizontal, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('facet', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        dropdown: __assign(__assign({ 
+    const subProps = {
+        dropdown: {
             // default props
-            internalClassName: 'ss__facet__dropdown', disableClickOutside: true, disableOverlay: true }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__facet__dropdown',
+            disableClickOutside: true,
+            disableOverlay: true,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        icon: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        icon: {
             // default props
-            internalClassName: 'ss__facet__dropdown__icon', size: '12px', fill: iconColor || color }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__facet__dropdown__icon',
+            size: '12px',
+            fill: iconColor || color,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: "".concat(treePath, " dropdown") }),
-        button: __assign(__assign({}, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath: `${treePath} dropdown`,
+        },
+        button: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: "".concat(treePath, " dropdown") }),
-        showMoreLessIcon: __assign(__assign({ 
+            theme: props?.theme,
+            treePath: `${treePath} dropdown`,
+        },
+        showMoreLessIcon: {
             // default props
-            internalClassName: 'ss__facet__show-more-less__icon', size: '10px', fill: iconColor || color }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__facet__show-more-less__icon',
+            size: '10px',
+            fill: iconColor || color,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        facetHierarchyOptions: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        facetHierarchyOptions: {
             // default props
-            internalClassName: 'ss__facet__facet-hierarchy-options' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            previewOnFocus: previewOnFocus,
-            valueProps: valueProps,
-            horizontal: horizontal,
-        })), { 
+            internalClassName: 'ss__facet__facet-hierarchy-options',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                previewOnFocus,
+                valueProps,
+                horizontal,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        facetListOptions: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        facetListOptions: {
             // default props
-            internalClassName: 'ss__facet__facet-list-options' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            previewOnFocus: previewOnFocus,
-            valueProps: valueProps,
-            horizontal: horizontal,
-        })), { 
+            internalClassName: 'ss__facet__facet-list-options',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                previewOnFocus,
+                valueProps,
+                horizontal,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        facetGridOptions: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        facetGridOptions: {
             // default props
-            internalClassName: 'ss__facet__facet-grid-options' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            previewOnFocus: previewOnFocus,
-            valueProps: valueProps,
-            horizontal: horizontal,
-        })), { 
+            internalClassName: 'ss__facet__facet-grid-options',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                previewOnFocus,
+                valueProps,
+                horizontal,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        facetPaletteOptions: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        facetPaletteOptions: {
             // default props
-            internalClassName: 'ss__facet__facet-palette-options' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            previewOnFocus: previewOnFocus,
-            valueProps: valueProps,
-            horizontal: horizontal,
-        })), { 
+            internalClassName: 'ss__facet__facet-palette-options',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                previewOnFocus,
+                valueProps,
+                horizontal,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
         // facetToggle: {
         // 	// default props
         // 	className: 'ss__facet__facet-toggle',
@@ -241,38 +287,48 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
         // 	theme: props?.theme,
         // 	treePath,
         // },
-        facetSlider: __assign(__assign({ 
+        facetSlider: {
             // default props
-            internalClassName: 'ss__facet__facet-slider' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__facet__facet-slider',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        searchInput: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        searchInput: {
             // default props
-            internalClassName: 'ss__facet__search-input', clearSearchButton: {
-                onClick: function () {
-                    if (facet === null || facet === void 0 ? void 0 : facet.search) {
+            internalClassName: 'ss__facet__search-input',
+            clearSearchButton: {
+                onClick: () => {
+                    if (facet?.search) {
                         facet.search.input = '';
                     }
                 },
-            }, submitSearchButton: {
+            },
+            submitSearchButton: {
                 // to prevent focus styles and screenreaders
                 disableA11y: true,
-            } }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            },
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
     };
-    var limitedValues;
+    let limitedValues;
     function escapeRegExp(string) {
         return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
     }
-    var _t = (0, hooks_1.useState)(), overflowState = _t[0], setOverflowState = _t[1];
-    (0, hooks_1.useEffect)(function () {
+    const [overflowState, setOverflowState] = (0, hooks_1.useState)();
+    (0, hooks_1.useEffect)(() => {
         if (statefulOverflow) {
-            var interalOverflow = {
+            const interalOverflow = {
                 enabled: false,
                 limited: true,
                 limit: 0,
@@ -294,10 +350,9 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
                     this.calculate();
                 },
                 calculate: function () {
-                    var _a, _b;
                     if (this.limit > 0) {
-                        var remaining = ((_a = facet === null || facet === void 0 ? void 0 : facet.values) === null || _a === void 0 ? void 0 : _a.length) - this.limit;
-                        if (remaining > 0 && !((_b = facet === null || facet === void 0 ? void 0 : facet.search) === null || _b === void 0 ? void 0 : _b.input)) {
+                        const remaining = facet?.values?.length - this.limit;
+                        if (remaining > 0 && !facet?.search?.input) {
                             this.enabled = true;
                             if (this.limited) {
                                 this.remaining = remaining;
@@ -310,55 +365,64 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
                             this.enabled = false;
                         }
                     }
-                    setOverflowState(__assign({}, this));
+                    setOverflowState({ ...this });
                 },
             };
             setOverflowState(interalOverflow);
         }
     }, []);
-    if ((facet === null || facet === void 0 ? void 0 : facet.overflow) && limit && Number.isInteger(limit) && !disableOverflow) {
+    if (facet?.overflow && limit && Number.isInteger(limit) && !disableOverflow) {
         if (statefulOverflow) {
-            var values = (facet === null || facet === void 0 ? void 0 : facet.values) || [];
-            if ((_e = facet === null || facet === void 0 ? void 0 : facet.search) === null || _e === void 0 ? void 0 : _e.input) {
-                var search_1 = new RegExp(escapeRegExp((_f = facet === null || facet === void 0 ? void 0 : facet.search) === null || _f === void 0 ? void 0 : _f.input), 'i');
-                values = facet === null || facet === void 0 ? void 0 : facet.values.filter(function (value) { return String((value === null || value === void 0 ? void 0 : value.label) || '').match(search_1); });
+            let values = facet?.values || [];
+            if (facet?.search?.input) {
+                const search = new RegExp(escapeRegExp(facet?.search?.input), 'i');
+                values = facet?.values.filter((value) => String(value?.label || '').match(search));
             }
-            if ((overflowState === null || overflowState === void 0 ? void 0 : overflowState.enabled) && (overflowState === null || overflowState === void 0 ? void 0 : overflowState.limited)) {
-                values = values.slice(0, overflowState === null || overflowState === void 0 ? void 0 : overflowState.limit);
+            if (overflowState?.enabled && overflowState?.limited) {
+                values = values.slice(0, overflowState?.limit);
             }
-            if ((overflowState === null || overflowState === void 0 ? void 0 : overflowState.limit) !== limit) {
-                overflowState === null || overflowState === void 0 ? void 0 : overflowState.setLimit(limit);
+            if (overflowState?.limit !== limit) {
+                overflowState?.setLimit(limit);
             }
             limitedValues = values;
         }
         else {
-            (_g = facet.overflow) === null || _g === void 0 ? void 0 : _g.setLimit(limit);
-            limitedValues = facet === null || facet === void 0 ? void 0 : facet.refinedValues;
+            facet.overflow?.setLimit(limit);
+            limitedValues = facet?.refinedValues;
         }
     }
-    else if ((facet === null || facet === void 0 ? void 0 : facet.overflow) && Number.isInteger(limit)) {
-        limitedValues = facet === null || facet === void 0 ? void 0 : facet.values.slice(0, limit);
+    else if (facet?.overflow && Number.isInteger(limit)) {
+        limitedValues = facet?.values.slice(0, limit);
     }
     else {
-        limitedValues = facet === null || facet === void 0 ? void 0 : facet.values;
+        limitedValues = facet?.values;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     // Search within facet
-    var searchableFacet = {
-        allowableTypes: ((_h = properties.treePath) === null || _h === void 0 ? void 0 : _h.includes('autocomplete')) ? [] : ['list', 'grid', 'palette'],
-        searchFilter: function (e) {
-            if (facet === null || facet === void 0 ? void 0 : facet.search) {
+    const searchableFacet = {
+        allowableTypes: properties.treePath?.includes('autocomplete') ? [] : ['list', 'grid', 'palette'],
+        searchFilter: (e) => {
+            if (facet?.search) {
                 facet.search.input = e.target.value;
             }
         },
     };
-    var renderFacet = true;
-    if (facet.display == types_1.FacetDisplay.TOGGLE && facet && (facet === null || facet === void 0 ? void 0 : facet.values.length) !== 1) {
+    let renderFacet = true;
+    if (facet.display == types_1.FacetDisplay.TOGGLE && facet && facet?.values.length !== 1) {
         renderFacet = false;
     }
-    var facetContentProps = __assign({ limitedValues: limitedValues, overflowState: overflowState, searchableFacet: searchableFacet, subProps: subProps, className: className, internalClassName: internalClassName }, props);
+    const facetContentProps = {
+        limitedValues,
+        overflowState,
+        searchableFacet,
+        subProps,
+        className,
+        internalClassName,
+        ...props,
+        displayType,
+    };
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         showMoreText: {
             value: facetContentProps.showMoreText,
         },
@@ -367,7 +431,7 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
         },
         dropdownButton: {
             attributes: {
-                'aria-label': "currently ".concat((facet === null || facet === void 0 ? void 0 : facet.collapsed) ? 'collapsed' : 'open', " ").concat(facet.label, " facet dropdown ").concat(((_j = facet.values) === null || _j === void 0 ? void 0 : _j.length) ? ((_k = facet.values) === null || _k === void 0 ? void 0 : _k.length) + ' options' : ''),
+                'aria-label': `currently ${facet?.collapsed ? 'collapsed' : 'open'} ${facet.label} facet dropdown ${facet.values?.length ? facet.values?.length + ' options' : ''}`,
             },
         },
         clearAllText: {
@@ -378,107 +442,115 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_2.useLang)(lang, {
-        facet: facet,
-    });
-    var selectedCount = ((_l = facet === null || facet === void 0 ? void 0 : facet.values) === null || _l === void 0 ? void 0 : _l.filter(function (value) { return value === null || value === void 0 ? void 0 : value.filtered; }).length) ||
-        ((_m = facet === null || facet === void 0 ? void 0 : facet.active) === null || _m === void 0 ? void 0 : _m.high) !== ((_o = facet === null || facet === void 0 ? void 0 : facet.range) === null || _o === void 0 ? void 0 : _o.high) ||
-        ((_p = facet === null || facet === void 0 ? void 0 : facet.active) === null || _p === void 0 ? void 0 : _p.low) !== ((_q = facet === null || facet === void 0 ? void 0 : facet.range) === null || _q === void 0 ? void 0 : _q.low);
-    return facet && renderFacet ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet', "ss__facet--".concat(facet.field), "".concat(facet.collapsed ? 'ss__facet--collapsed' : ''), className, internalClassName, "".concat(facet.display ? "ss__facet--".concat(facet.display) : ''), (statefulOverflow ? (overflowState === null || overflowState === void 0 ? void 0 : overflowState.remaining) || 0 > 0 : (((_r = facet === null || facet === void 0 ? void 0 : facet.overflow) === null || _r === void 0 ? void 0 : _r.remaining) || 0) > 0) || (facet === null || facet === void 0 ? void 0 : facet.display) == 'slider'
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {
+        facet,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    const selectedCount = facet?.values?.filter((value) => value?.filtered).length ||
+        facet?.active?.high !== facet?.range?.high ||
+        facet?.active?.low !== facet?.range?.low;
+    return facet && renderFacet ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__facet', `ss__facet--${facet.field}`, `${facet.collapsed ? 'ss__facet--collapsed' : ''}`, className, internalClassName, `${displayType ? `ss__facet--${displayType}` : ''}`, (statefulOverflow ? overflowState?.remaining || 0 > 0 : (facet?.overflow?.remaining || 0) > 0) || facet?.display == 'slider'
                 ? ''
-                : 'ss__facet--showing-all'), children: justContent ? ((0, jsx_runtime_1.jsx)(FacetContent, __assign({}, facetContentProps, { mergedLang: mergedLang }))) : ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { open: disableCollapse || !(facet === null || facet === void 0 ? void 0 : facet.collapsed), onClick: function () { return !disableCollapse && facet.toggleCollapse && (facet === null || facet === void 0 ? void 0 : facet.toggleCollapse()); }, disableA11y: true, button: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__facet__header", ref: function (e) { return (0, useA11y_1.useA11y)(e, disableCollapse ? -1 : 0); }, role: "heading", "aria-level": 3 }, mergedLang.dropdownButton.attributes, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "ss__facet__header__inner", children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.dropdownButton.value, { children: facet === null || facet === void 0 ? void 0 : facet.label })), showSelectedCount && selectedCount && facet.type !== 'range' ? ((0, jsx_runtime_1.jsx)("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : "(".concat(selectedCount, ")") })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: function (e) {
+                : 'ss__facet--showing-all'), children: justContent ? ((0, jsx_runtime_1.jsx)(FacetContent, { ...facetContentProps, mergedLang: mergedLang })) : ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { ...subProps.dropdown, open: disableCollapse || !facet?.collapsed, onClick: () => !disableCollapse && facet.toggleCollapse && facet?.toggleCollapse(), disableA11y: true, button: (0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__header", ref: (e) => (0, useA11y_1.useA11y)(e, disableCollapse ? -1 : 0), role: "heading", "aria-level": 3, ...mergedLang.dropdownButton.attributes, children: [(0, jsx_runtime_1.jsxs)("span", { className: "ss__facet__header__inner", children: [(0, jsx_runtime_1.jsx)("span", { ...mergedLang.dropdownButton.value, children: facet?.label }), showSelectedCount && selectedCount && facet.type !== 'range' ? ((0, jsx_runtime_1.jsx)("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : `(${selectedCount})` })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: (e) => {
                                         e.stopPropagation();
-                                        facet === null || facet === void 0 ? void 0 : facet.clear.url.link.onClick();
-                                    }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? (0, jsx_runtime_1.jsx)("label", __assign({}, mergedLang.clearAllText.all)) : null }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))] }), !disableCollapse && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, ((facet === null || facet === void 0 ? void 0 : facet.collapsed)
-                            ? __assign({}, (typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand)) : __assign({}, (typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse))), { name: (facet === null || facet === void 0 ? void 0 : facet.collapsed) ? 'expand' : 'collapse' })))] })), children: (0, jsx_runtime_1.jsx)(FacetContent, __assign({}, facetContentProps, { mergedLang: mergedLang })) }))) })) })) : null;
+                                        facet?.clear.url.link.onClick();
+                                    }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? (0, jsx_runtime_1.jsx)("label", { ...mergedLang.clearAllText.all }) : null })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))] }), !disableCollapse && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(facet?.collapsed
+                                ? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand) }
+                                : { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }), name: facet?.collapsed ? 'expand' : 'collapse' }))] }), children: (0, jsx_runtime_1.jsx)(FacetContent, { ...facetContentProps, mergedLang: mergedLang }) })) }) })) : null;
 });
-var FacetContent = function (props) {
-    var _a, _b, _c, _d;
-    var searchableFacet = props.searchableFacet, subProps = props.subProps, className = props.className, internalClassName = props.internalClassName, limitedValues = props.limitedValues, facet = props.facet, statefulOverflow = props.statefulOverflow, limit = props.limit, overflowSlot = props.overflowSlot, optionsSlot = props.optionsSlot, searchable = props.searchable, iconOverflowMore = props.iconOverflowMore, iconOverflowLess = props.iconOverflowLess, disableOverflow = props.disableOverflow, previewOnFocus = props.previewOnFocus, rangeInputs = props.rangeInputs, rangeInputsPrefix = props.rangeInputsPrefix, rangeInputsInheritDefaultValues = props.rangeInputsInheritDefaultValues, rangeInputsSeparatorText = props.rangeInputsSeparatorText, justContent = props.justContent, valueProps = props.valueProps, hideShowMoreLessText = props.hideShowMoreLessText, treePath = props.treePath, mergedLang = props.mergedLang;
-    var _e = (0, hooks_1.useState)(rangeInputsInheritDefaultValues && facet.type === 'range' ? (_a = facet === null || facet === void 0 ? void 0 : facet.range) === null || _a === void 0 ? void 0 : _a.low : undefined), low = _e[0], setLow = _e[1];
-    var _f = (0, hooks_1.useState)(rangeInputsInheritDefaultValues && facet.type === 'range' ? (_b = facet === null || facet === void 0 ? void 0 : facet.range) === null || _b === void 0 ? void 0 : _b.high : undefined), high = _f[0], setHigh = _f[1];
-    (0, hooks_1.useEffect)(function () {
-        var _a, _b, _c, _d;
-        if (rangeInputsInheritDefaultValues && facet.type === 'range' && ((_a = facet === null || facet === void 0 ? void 0 : facet.active) === null || _a === void 0 ? void 0 : _a.high) !== high) {
-            setHigh((_b = facet === null || facet === void 0 ? void 0 : facet.active) === null || _b === void 0 ? void 0 : _b.high);
+const FacetContent = (props) => {
+    const { searchableFacet, subProps, className, internalClassName, limitedValues, facet, statefulOverflow, limit, overflowSlot, optionsSlot, searchable, iconOverflowMore, iconOverflowLess, disableOverflow, previewOnFocus, rangeInputs, rangeInputsPrefix, rangeInputsInheritDefaultValues, rangeInputsSeparatorText, rangeInputsSubmitOnBlur, hideRangeInputsSubmitButton, justContent, valueProps, hideShowMoreLessText, treePath, mergedLang, displayType, } = props;
+    const [low, setLow] = (0, hooks_1.useState)(rangeInputsInheritDefaultValues && facet.type === 'range' ? facet?.range?.low : undefined);
+    const [high, setHigh] = (0, hooks_1.useState)(rangeInputsInheritDefaultValues && facet.type === 'range' ? facet?.range?.high : undefined);
+    (0, hooks_1.useEffect)(() => {
+        if (rangeInputsInheritDefaultValues && facet.type === 'range' && facet?.active?.high !== high) {
+            setHigh(facet?.active?.high);
         }
-        if (rangeInputsInheritDefaultValues && facet.type === 'range' && ((_c = facet === null || facet === void 0 ? void 0 : facet.active) === null || _c === void 0 ? void 0 : _c.low) !== low) {
-            setLow((_d = facet === null || facet === void 0 ? void 0 : facet.active) === null || _d === void 0 ? void 0 : _d.low);
+        if (rangeInputsInheritDefaultValues && facet.type === 'range' && facet?.active?.low !== low) {
+            setLow(facet?.active?.low);
         }
     }, [facet]);
-    var onDragcb = function (vals) {
+    const onDragcb = (vals) => {
         setLow(vals[0]);
         setHigh(vals[1]);
     };
-    var onKeyUp = function (e) {
-        var _a, _b;
-        if (e.key === 'Enter') {
-            if (typeof low == 'number' && typeof high == 'number') {
-                (_b = (_a = submitButtonRef.current) === null || _a === void 0 ? void 0 : _a.base) === null || _b === void 0 ? void 0 : _b.click();
+    // submits the current low/high range input values to the url manager, clamping/swapping as needed.
+    // used by the submit button, the Enter key, and (optionally) blur, so it works even when the
+    // submit button isn't rendered (e.g. when rangeInputsSubmitButtonText is an empty string).
+    const submitRange = () => {
+        if (facet?.services?.urlManager &&
+            typeof low === 'number' &&
+            Number.isFinite(low) &&
+            typeof high === 'number' &&
+            Number.isFinite(high)) {
+            let currentLow = low;
+            let currentHigh = high;
+            //adjust ranges if high and low have swapped.
+            if (currentHigh < currentLow) {
+                currentLow = high;
+                currentHigh = low;
+                setLow(currentLow);
+                setHigh(currentHigh);
+            }
+            //adjust limits if state is too high or too low
+            if (facet?.range?.low !== undefined && currentLow < facet?.range?.low) {
+                currentLow = facet?.range?.low;
+                setLow(currentLow);
+            }
+            if (facet?.range?.high !== undefined && currentLow > facet?.range?.high) {
+                currentLow = facet?.range?.high;
+                setLow(currentLow);
             }
+            if (facet?.range?.low !== undefined && currentHigh < facet?.range?.low) {
+                currentHigh = facet?.range?.low;
+                setHigh(currentHigh);
+            }
+            if (facet?.range?.high !== undefined && currentHigh > facet?.range?.high) {
+                currentHigh = facet?.range?.high;
+                setHigh(currentHigh);
+            }
+            facet.services.urlManager.remove('page').set(`filter.${facet.field}`, { low: currentLow, high: currentHigh }).go();
+        }
+    };
+    const onKeyUp = (e) => {
+        if (e.key === 'Enter') {
+            submitRange();
+        }
+    };
+    const onBlur = () => {
+        if (rangeInputsSubmitOnBlur) {
+            submitRange();
         }
     };
-    var submitButtonRef = (0, hooks_1.useRef)();
-    var overflowState;
+    let overflowState;
     if (!statefulOverflow) {
         overflowState = facet.overflow;
     }
     else {
         overflowState = props.overflowState;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchable && searchableFacet.allowableTypes.includes(facet.display) && ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, __assign({}, subProps.searchInput, { onChange: searchableFacet.searchFilter, placeholderText: "Search ".concat(facet.label), treePath: treePath }))), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet__options', justContent ? className : '', justContent ? internalClassName : ''), children: (function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchable && searchableFacet.allowableTypes.includes(displayType) && ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, { ...subProps.searchInput, onChange: searchableFacet.searchFilter, placeholderText: `Search ${facet.label}`, treePath: treePath })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet__options', justContent ? className : '', justContent ? internalClassName : ''), children: (() => {
                     //manual options component
                     if (optionsSlot) {
-                        return (0, utilities_1.cloneWithProps)(optionsSlot, { facet: facet, valueProps: valueProps, limit: limit, previewOnFocus: previewOnFocus, treePath: treePath });
+                        return (0, utilities_1.cloneWithProps)(optionsSlot, { facet, valueProps, limit, previewOnFocus, treePath });
                     }
                     else {
-                        switch (facet === null || facet === void 0 ? void 0 : facet.display) {
+                        switch (displayType) {
                             // case FacetDisplay.TOGGLE:
                             // 	return <FacetToggle {...subProps.facetToggle} facet={facet as ValueFacet} />;
                             case types_1.FacetDisplay.SLIDER:
-                                return (0, jsx_runtime_1.jsx)(FacetSlider_1.FacetSlider, __assign({}, subProps.facetSlider, { onChange: onDragcb, facet: facet, treePath: treePath }));
+                                return (0, jsx_runtime_1.jsx)(FacetSlider_1.FacetSlider, { ...subProps.facetSlider, onChange: onDragcb, facet: facet, treePath: treePath });
                             case types_1.FacetDisplay.GRID:
-                                return ((0, jsx_runtime_1.jsx)(FacetGridOptions_1.FacetGridOptions, __assign({}, subProps.facetGridOptions, { values: limitedValues, facet: facet, treePath: treePath })));
+                                return ((0, jsx_runtime_1.jsx)(FacetGridOptions_1.FacetGridOptions, { ...subProps.facetGridOptions, values: limitedValues, facet: facet, treePath: treePath }));
                             case types_1.FacetDisplay.PALETTE:
-                                return ((0, jsx_runtime_1.jsx)(FacetPaletteOptions_1.FacetPaletteOptions, __assign({}, subProps.facetPaletteOptions, { values: limitedValues, facet: facet, treePath: treePath })));
+                                return ((0, jsx_runtime_1.jsx)(FacetPaletteOptions_1.FacetPaletteOptions, { ...subProps.facetPaletteOptions, values: limitedValues, facet: facet, treePath: treePath }));
                             case types_1.FacetDisplay.HIERARCHY:
-                                return ((0, jsx_runtime_1.jsx)(FacetHierarchyOptions_1.FacetHierarchyOptions, __assign({}, subProps.facetHierarchyOptions, { values: limitedValues, facet: facet, treePath: treePath })));
+                                return ((0, jsx_runtime_1.jsx)(FacetHierarchyOptions_1.FacetHierarchyOptions, { ...subProps.facetHierarchyOptions, values: limitedValues, facet: facet, treePath: treePath }));
                             default:
-                                return ((0, jsx_runtime_1.jsx)(FacetListOptions_1.FacetListOptions, __assign({}, subProps.facetListOptions, { values: limitedValues, facet: facet, treePath: treePath })));
+                                return ((0, jsx_runtime_1.jsx)(FacetListOptions_1.FacetListOptions, { ...subProps.facetListOptions, values: limitedValues, facet: facet, treePath: treePath }));
                         }
                     }
-                })() }), rangeInputs && (facet.type === 'range' || facet.type === 'range-buckets') && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__range-inputs", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__range-inputs__row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__range-input ss__facet__range-input--low", children: [rangeInputsPrefix && (0, jsx_runtime_1.jsx)("span", { className: "ss__facet__range-input__prefix", children: rangeInputsPrefix }), (0, jsx_runtime_1.jsx)("input", { type: "number", className: "ss__facet__range-input__input", value: low, onInput: function (e) { return (e.currentTarget.value ? setLow(Number(e.currentTarget.value)) : setLow(undefined)); }, onKeyUp: onKeyUp })] }), (0, jsx_runtime_1.jsx)("span", { className: "ss__facet__range-inputs__separator", children: rangeInputsSeparatorText }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__range-input ss__facet__range-input--high", children: [rangeInputsPrefix && (0, jsx_runtime_1.jsx)("span", { className: "ss__facet__range-input__prefix", children: rangeInputsPrefix }), (0, jsx_runtime_1.jsx)("input", { type: "number", className: "ss__facet__range-input__input", value: high, onInput: function (e) { return (e.currentTarget.value ? setHigh(Number(e.currentTarget.value)) : setHigh(undefined)); }, onKeyUp: onKeyUp })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "ss__facet__range-inputs__row ss__facet__range-inputs__row--button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { internalClassName: "ss__facet__range-input__button--submit", ref: submitButtonRef, onClick: function () {
-                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-                                if (((_a = facet === null || facet === void 0 ? void 0 : facet.services) === null || _a === void 0 ? void 0 : _a.urlManager) && typeof low === 'number' && typeof high === 'number') {
-                                    var currentLow = low;
-                                    var currentHigh = high;
-                                    //adjust ranges if high and low have swapped.
-                                    if (currentHigh < currentLow) {
-                                        currentLow = high;
-                                        currentHigh = low;
-                                        setLow(currentLow);
-                                        setHigh(currentHigh);
-                                    }
-                                    //adjust limits if state is too high or too low
-                                    if (((_b = facet === null || facet === void 0 ? void 0 : facet.range) === null || _b === void 0 ? void 0 : _b.low) !== undefined && currentLow < ((_c = facet === null || facet === void 0 ? void 0 : facet.range) === null || _c === void 0 ? void 0 : _c.low)) {
-                                        currentLow = (_d = facet === null || facet === void 0 ? void 0 : facet.range) === null || _d === void 0 ? void 0 : _d.low;
-                                        setLow(currentLow);
-                                    }
-                                    if (((_e = facet === null || facet === void 0 ? void 0 : facet.range) === null || _e === void 0 ? void 0 : _e.high) !== undefined && currentLow > ((_f = facet === null || facet === void 0 ? void 0 : facet.range) === null || _f === void 0 ? void 0 : _f.high)) {
-                                        currentLow = (_g = facet === null || facet === void 0 ? void 0 : facet.range) === null || _g === void 0 ? void 0 : _g.high;
-                                        setLow(currentLow);
-                                    }
-                                    if (((_h = facet === null || facet === void 0 ? void 0 : facet.range) === null || _h === void 0 ? void 0 : _h.low) !== undefined && currentHigh < ((_j = facet === null || facet === void 0 ? void 0 : facet.range) === null || _j === void 0 ? void 0 : _j.low)) {
-                                        currentHigh = (_k = facet === null || facet === void 0 ? void 0 : facet.range) === null || _k === void 0 ? void 0 : _k.low;
-                                        setHigh(currentHigh);
-                                    }
-                                    if (((_l = facet === null || facet === void 0 ? void 0 : facet.range) === null || _l === void 0 ? void 0 : _l.high) !== undefined && currentHigh > ((_m = facet === null || facet === void 0 ? void 0 : facet.range) === null || _m === void 0 ? void 0 : _m.high)) {
-                                        currentHigh = (_o = facet === null || facet === void 0 ? void 0 : facet.range) === null || _o === void 0 ? void 0 : _o.high;
-                                        setHigh(currentHigh);
-                                    }
-                                    facet.services.urlManager.remove('page').set("filter.".concat(facet.field), { low: currentLow, high: currentHigh }).go();
-                                }
-                            }, children: mergedLang.submitRangeButton.value ? (0, jsx_runtime_1.jsx)("label", __assign({}, mergedLang.submitRangeButton.all)) : null }) })] })), !disableOverflow && (overflowState === null || overflowState === void 0 ? void 0 : overflowState.enabled) && ((0, jsx_runtime_1.jsx)("div", { className: "ss__facet__show-more-less", "aria-live": "polite", onClick: function () { return overflowState === null || overflowState === void 0 ? void 0 : overflowState.toggle(); }, ref: function (e) { return (0, useA11y_1.useA11y)(e); }, children: overflowSlot ? ((0, utilities_1.cloneWithProps)(overflowSlot, { facet: facet, treePath: treePath })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.showMoreLessIcon, { treePath: treePath, name: ((overflowState === null || overflowState === void 0 ? void 0 : overflowState.remaining) || 0) > 0 ? 'overflow-more' : 'overflow-less' }, (((overflowState === null || overflowState === void 0 ? void 0 : overflowState.remaining) || 0) > 0
-                            ? __assign({}, (typeof iconOverflowMore == 'string' ? { icon: iconOverflowMore } : iconOverflowMore)) : __assign({}, (typeof iconOverflowLess == 'string' ? { icon: iconOverflowLess } : iconOverflowLess))))), !hideShowMoreLessText && ((0, jsx_runtime_1.jsx)("span", __assign({}, (((overflowState === null || overflowState === void 0 ? void 0 : overflowState.remaining) || 0) > 0 ? (_c = mergedLang.showMoreText) === null || _c === void 0 ? void 0 : _c.all : (_d = mergedLang.showLessText) === null || _d === void 0 ? void 0 : _d.all))))] })) }))] }));
+                })() }), rangeInputs && (facet.type === 'range' || facet.type === 'range-buckets') && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__range-inputs", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__range-inputs__row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__range-input ss__facet__range-input--low", children: [rangeInputsPrefix && (0, jsx_runtime_1.jsx)("span", { className: "ss__facet__range-input__prefix", children: rangeInputsPrefix }), (0, jsx_runtime_1.jsx)("input", { type: "number", className: "ss__facet__range-input__input", value: low, onInput: (e) => (e.currentTarget.value ? setLow(Number(e.currentTarget.value)) : setLow(undefined)), onKeyUp: onKeyUp, onBlur: onBlur })] }), (0, jsx_runtime_1.jsx)("span", { className: "ss__facet__range-inputs__separator", children: rangeInputsSeparatorText }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__range-input ss__facet__range-input--high", children: [rangeInputsPrefix && (0, jsx_runtime_1.jsx)("span", { className: "ss__facet__range-input__prefix", children: rangeInputsPrefix }), (0, jsx_runtime_1.jsx)("input", { type: "number", className: "ss__facet__range-input__input", value: high, onInput: (e) => (e.currentTarget.value ? setHigh(Number(e.currentTarget.value)) : setHigh(undefined)), onKeyUp: onKeyUp, onBlur: onBlur })] })] }), !hideRangeInputsSubmitButton && ((0, jsx_runtime_1.jsx)("div", { className: "ss__facet__range-inputs__row ss__facet__range-inputs__row--button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { internalClassName: "ss__facet__range-input__button--submit", onClick: submitRange, children: mergedLang.submitRangeButton.value ? (0, jsx_runtime_1.jsx)("label", { ...mergedLang.submitRangeButton.all }) : null }) }))] })), !disableOverflow && overflowState?.enabled && ((0, jsx_runtime_1.jsx)("div", { className: "ss__facet__show-more-less", "aria-live": "polite", onClick: () => overflowState?.toggle(), ref: (e) => (0, useA11y_1.useA11y)(e), children: overflowSlot ? ((0, utilities_1.cloneWithProps)(overflowSlot, { facet, treePath })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.showMoreLessIcon, treePath: treePath, name: (overflowState?.remaining || 0) > 0 ? 'overflow-more' : 'overflow-less', ...((overflowState?.remaining || 0) > 0
+                                ? { ...(typeof iconOverflowMore == 'string' ? { icon: iconOverflowMore } : iconOverflowMore) }
+                                : { ...(typeof iconOverflowLess == 'string' ? { icon: iconOverflowLess } : iconOverflowLess) }) }), !hideShowMoreLessText && ((0, jsx_runtime_1.jsx)("span", { ...((overflowState?.remaining || 0) > 0 ? mergedLang.showMoreText?.all : mergedLang.showLessText?.all) }))] })) }))] }));
 };