@athoscommerce/snap-preact 1.9.1 → 1.10.0

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

@@ -1,52 +1,40 @@
 "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.Facets = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var Facet_1 = require("../Facet");
-var providers_1 = require("../../../providers");
-var hooks_1 = require("../../../hooks");
-var utilities_1 = require("../../../utilities");
-var defaultStyles = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const Facet_1 = require("../Facet");
+const providers_1 = require("../../../providers");
+const hooks_1 = require("../../../hooks");
+const utilities_1 = require("../../../utilities");
+const defaultStyles = () => {
     return (0, react_1.css)({});
 };
-exports.Facets = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
-        facets: (_b = (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.facets,
+exports.Facets = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        facets: properties.controller?.store?.facets,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('facets', globalTheme, defaultProps, properties);
-    var limit = props.limit, onFacetOptionClick = props.onFacetOptionClick, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, controller = props.controller, treePath = props.treePath;
-    var _c = (0, hooks_1.useCustomComponentOverride)('facets', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    let props = (0, utilities_1.mergeProps)('facets', globalTheme, defaultProps, properties);
+    const { limit, onFacetOptionClick, disableStyles, className, internalClassName, controller, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('facets', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var facetClickEvent = function (e) {
+    const facetClickEvent = (e) => {
         onFacetOptionClick && onFacetOptionClick(e);
         // remove focus from input (close the autocomplete)
-        (controller === null || controller === void 0 ? void 0 : controller.setFocused) && (controller === null || controller === void 0 ? void 0 : controller.setFocused());
+        controller?.setFocused && controller?.setFocused();
     };
-    var themeDefaults = {
+    const themeDefaults = {
         components: {
             facetGridOptions: {
                 onClick: facetClickEvent,
@@ -63,21 +51,28 @@ exports.Facets = (0, mobx_react_lite_1.observer)(function (properties) {
         },
     };
     // merge deeply the themeDefaults with the theme props and the displaySettings theme props (do not merge arrays, but replace them)
-    var theme = (0, deepmerge_1.default)(themeDefaults, (props === null || props === void 0 ? void 0 : props.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
-    props = __assign(__assign({}, props), { theme: theme });
-    var facets = props.facets;
+    const theme = (0, deepmerge_1.default)(themeDefaults, props?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
+    props = {
+        ...props,
+        theme,
+    };
+    let { facets } = props;
     if (limit && facets && limit > 0) {
         facets = facets.slice(0, +limit);
     }
-    var subProps = {
-        facet: __assign(__assign({ 
+    const subProps = {
+        facet: {
             // default props
-            internalClassName: 'ss__facets__facet' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__facets__facet',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
+            theme: props.theme,
+            treePath,
+        },
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    return facets && (facets === null || facets === void 0 ? void 0 : facets.length) > 0 ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__facets', className, internalClassName) }, styling, { children: facets.map(function (facet) { return ((0, jsx_runtime_1.jsx)(Facet_1.Facet, __assign({}, subProps.facet, { facet: facet }), facet.field)); }) })) })) : null;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return facets && facets?.length > 0 ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__facets', className, internalClassName), ...styling, children: facets.map((facet) => ((0, jsx_runtime_1.jsx)(Facet_1.Facet, { ...subProps.facet, facet: facet }, facet.field))) }) })) : null;
 });

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

@@ -1,38 +1,25 @@
 "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.FacetsHorizontal = 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 deepmerge_1 = __importDefault(require("deepmerge"));
-var Facet_1 = require("../Facet");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var hooks_2 = require("../../../hooks");
-var Dropdown_1 = require("../../Atoms/Dropdown");
-var Icon_1 = require("../../Atoms/Icon");
-var Button_1 = require("../../Atoms/Button");
-var Slideout_1 = require("../../Molecules/Slideout");
-var Sidebar_1 = require("../Sidebar");
-var defaultStyles = function (_a) {
-    var _b, _c;
-    var theme = _a.theme;
+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 deepmerge_1 = __importDefault(require("deepmerge"));
+const Facet_1 = require("../Facet");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_2 = require("../../../hooks");
+const Dropdown_1 = require("../../Atoms/Dropdown");
+const Icon_1 = require("../../Atoms/Icon");
+const Button_1 = require("../../Atoms/Button");
+const Slideout_1 = require("../../Molecules/Slideout");
+const Sidebar_1 = require("../Sidebar");
+const defaultStyles = ({ theme }) => {
     return (0, react_1.css)({
         margin: '10px 0px',
         '& .ss__facets-horizontal__header': {
@@ -52,7 +39,7 @@ var defaultStyles = function (_a) {
                 marginLeft: '10px',
                 border: 'none',
                 padding: '0',
-                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: theme?.variables?.colors?.primary,
                 '&:hover': {
                     cursor: 'pointer',
                     textDecoration: 'underline',
@@ -100,29 +87,28 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         limit: 6,
         iconCollapse: 'angle-down',
         iconExpand: 'angle-up',
         clearAllText: 'Clear All',
         toggleSidebarButtonText: 'Filters',
-        facets: (_b = (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.facets,
+        facets: properties.controller?.store?.facets,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('facetsHorizontal', globalTheme, defaultProps, properties);
-    var facets = props.facets, limit = props.limit, alwaysShowToggleSidebarButton = props.alwaysShowToggleSidebarButton, hideToggleSidebarButton = props.hideToggleSidebarButton, onFacetOptionClick = props.onFacetOptionClick, showSelectedCount = props.showSelectedCount, hideSelectedCountParenthesis = props.hideSelectedCountParenthesis, clearAllIcon = props.clearAllIcon, showClearAllText = props.showClearAllText, iconExpand = props.iconExpand, clearAllText = props.clearAllText, iconCollapse = props.iconCollapse, toggleSidebarButtonText = props.toggleSidebarButtonText, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, controller = props.controller, treePath = props.treePath;
-    var _c = (0, hooks_2.useCustomComponentOverride)('facetsHorizontal', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    let props = (0, utilities_1.mergeProps)('facetsHorizontal', globalTheme, defaultProps, properties);
+    const { facets, limit, alwaysShowToggleSidebarButton, hideToggleSidebarButton, onFacetOptionClick, showSelectedCount, hideSelectedCountParenthesis, clearAllIcon, showClearAllText, iconExpand, clearAllText, iconCollapse, toggleSidebarButtonText, disableStyles, className, internalClassName, controller, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('facetsHorizontal', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var facetClickEvent = function (e) {
+    const facetClickEvent = (e) => {
         onFacetOptionClick && onFacetOptionClick(e);
     };
-    var themeDefaults = {
+    const themeDefaults = {
         components: {
             facetGridOptions: {
                 onClick: facetClickEvent,
@@ -139,10 +125,13 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)(function (properties)
         },
     };
     // merge deeply the themeDefaults with the theme prop
-    var theme = (0, deepmerge_1.default)(themeDefaults, (props === null || props === void 0 ? void 0 : props.theme) || {});
-    props = __assign(__assign({}, props), { theme: theme });
-    var facetsToShow = facets;
-    var isOverflowing = false;
+    const theme = (0, deepmerge_1.default)(themeDefaults, props?.theme || {});
+    props = {
+        ...props,
+        theme,
+    };
+    let facetsToShow = facets;
+    let isOverflowing = false;
     if (typeof limit != 'undefined' && Number.isInteger(limit) && facets) {
         isOverflowing = facets.length > +limit;
         if (limit > 0) {
@@ -152,86 +141,117 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)(function (properties)
             facetsToShow = [];
         }
     }
-    var _d = (0, hooks_1.useState)(false), sidebarOpenState = _d[0], setSidebarOpenState = _d[1];
-    var subProps = {
-        dropdown: __assign(__assign({ 
+    const [sidebarOpenState, setSidebarOpenState] = (0, hooks_1.useState)(false);
+    const subProps = {
+        dropdown: {
             // default props
-            internalClassName: 'ss__facets-horizontal__header__dropdown', disableClickOutside: true, disableOverlay: true, focusTrapContent: true }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__facets-horizontal__header__dropdown',
+            disableClickOutside: true,
+            disableOverlay: true,
+            focusTrapContent: true,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        button: __assign(__assign({}, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath,
+        },
+        button: {
+            // 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__dropdown__button__heading__icon' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__dropdown__button__heading__icon',
+            // 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") }),
-        facet: __assign(__assign({ 
+            theme: props?.theme,
+            treePath: `${treePath} dropdown button`,
+        },
+        facet: {
             // default props
-            internalClassName: "ss__facets-horizontal__content__facet", justContent: true, 
+            internalClassName: `ss__facets-horizontal__content__facet`,
+            justContent: true,
             // this should be turned on if there is ever a filters button rendering.
-            statefulOverflow: !hideToggleSidebarButton && (isOverflowing || alwaysShowToggleSidebarButton) ? true : undefined }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            statefulOverflow: !hideToggleSidebarButton && (isOverflowing || alwaysShowToggleSidebarButton) ? true : undefined,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: "".concat(treePath, " dropdown") }),
-        slideout: __assign(__assign({ 
+            theme: props?.theme,
+            treePath: `${treePath} dropdown`,
+        },
+        slideout: {
             // default props
-            internalClassName: 'ss__facets-horizontal__slideout', onChange: function (active) { return setSidebarOpenState(active); } }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__facets-horizontal__slideout',
+            onChange: (active) => setSidebarOpenState(active),
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        sidebar: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        sidebar: {
             // default props
-            internalClassName: 'ss__facets-horizontal__sidebar' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__facets-horizontal__sidebar',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        toggleSidebarButton: __assign(__assign({}, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath,
+        },
+        toggleSidebarButton: {
+            // 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 styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var _e = (0, hooks_1.useState)(undefined), selectedFacet = _e[0], setSelectedFacet = _e[1];
-    var innerRef = (0, hooks_2.useClickOutside)(function () {
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const [selectedFacet, setSelectedFacet] = (0, hooks_1.useState)(undefined);
+    const innerRef = (0, hooks_2.useClickOutside)(() => {
         selectedFacet && setSelectedFacet(undefined);
     });
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         toggleSidebarButtonText: {
             value: toggleSidebarButtonText,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_2.useLang)(lang, { facets: facets, sidebarOpenState: sidebarOpenState });
-    var ToggleSidebarButton = function (_a) {
-        var sidebarOpenState = _a.sidebarOpenState, setSidebarOpenState = _a.setSidebarOpenState, subProps = _a.subProps;
-        return ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.toggleSidebarButton, { internalClassName: "ss__facets-horizontal__header__toggle-sidebar", onClick: function () { return setSidebarOpenState(!sidebarOpenState); }, children: (0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.toggleSidebarButtonText.all)) })));
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, { facets: facets, sidebarOpenState: sidebarOpenState }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    const ToggleSidebarButton = ({ sidebarOpenState, setSidebarOpenState, subProps }) => {
+        return ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.toggleSidebarButton, internalClassName: "ss__facets-horizontal__header__toggle-sidebar", onClick: () => setSidebarOpenState(!sidebarOpenState), children: (0, jsx_runtime_1.jsx)("span", { ...mergedLang.toggleSidebarButtonText.all }) }));
     };
-    var renderSidebar = Boolean(!hideToggleSidebarButton && (isOverflowing || alwaysShowToggleSidebarButton));
+    const renderSidebar = Boolean(!hideToggleSidebarButton && (isOverflowing || alwaysShowToggleSidebarButton));
     //todo investigate keyboard navigation here when overlay prop is true/false
-    return (facetsToShow && (facetsToShow === null || facetsToShow === void 0 ? void 0 : facetsToShow.length) > 0) || isOverflowing ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__facets-horizontal', className, internalClassName), ref: innerRef }, styling, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facets-horizontal__header", children: [facetsToShow === null || facetsToShow === void 0 ? void 0 : facetsToShow.map(function (facet) {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            var selectedCount = ((_a = facet === null || facet === void 0 ? void 0 : facet.values) === null || _a === void 0 ? void 0 : _a.filter(function (value) { return value === null || value === void 0 ? void 0 : value.filtered; }).length) ||
-                                ((_b = facet === null || facet === void 0 ? void 0 : facet.active) === null || _b === void 0 ? void 0 : _b.high) !== ((_c = facet === null || facet === void 0 ? void 0 : facet.range) === null || _c === void 0 ? void 0 : _c.high) ||
-                                ((_d = facet === null || facet === void 0 ? void 0 : facet.active) === null || _d === void 0 ? void 0 : _d.low) !== ((_e = facet === null || facet === void 0 ? void 0 : facet.range) === null || _e === void 0 ? void 0 : _e.low);
+    return (facetsToShow && facetsToShow?.length > 0) || isOverflowing ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__facets-horizontal', className, internalClassName), ref: innerRef, ...styling, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facets-horizontal__header", children: [facetsToShow?.map((facet) => {
+                            const selectedCount = facet?.values?.filter((value) => value?.filtered).length ||
+                                facet?.active?.high !== facet?.range?.high ||
+                                facet?.active?.low !== facet?.range?.low;
                             //initialize lang
-                            var defaultLang = {
+                            const defaultLang = {
                                 dropdownButton: {
                                     attributes: {
-                                        'aria-label': "currently ".concat((selectedFacet === null || selectedFacet === void 0 ? void 0 : selectedFacet.field) === facet.field ? 'open' : 'collapsed', " ").concat(facet.label, " facet dropdown ").concat(((_f = facet.values) === null || _f === void 0 ? void 0 : _f.length) ? ((_g = facet.values) === null || _g === void 0 ? void 0 : _g.length) + ' options' : ''),
+                                        'aria-label': `currently ${selectedFacet?.field === facet.field ? 'open' : 'collapsed'} ${facet.label} facet dropdown ${facet.values?.length ? facet.values?.length + ' options' : ''}`,
                                     },
                                 },
                                 clearAllText: {
@@ -239,12 +259,12 @@ exports.FacetsHorizontal = (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, {
-                                selectedFacet: selectedFacet,
-                                facet: facet,
-                            });
-                            return ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { internalClassName: (0, classnames_1.default)(subProps.dropdown.internalClassName, "ss__facets-horizontal__header__dropdown--".concat(facet.display), "ss__facets-horizontal__header__dropdown--".concat(facet.field)), open: (selectedFacet === null || selectedFacet === void 0 ? void 0 : selectedFacet.field) === facet.field, onClick: function (e) {
+                            const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                            const mergedLang = (0, hooks_2.useLang)(lang, {
+                                selectedFacet,
+                                facet,
+                            }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                            return ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { ...subProps.dropdown, internalClassName: (0, classnames_1.default)(subProps.dropdown.internalClassName, `ss__facets-horizontal__header__dropdown--${facet.display}`, `ss__facets-horizontal__header__dropdown--${facet.field}`), open: selectedFacet?.field === facet.field, onClick: (e) => {
                                     // @ts-ignore - this is a workaround for the fact that selectedFacet is not defined when the onclick is triggered by the escape key.
                                     if (selectedFacet !== facet && e.code !== 'Escape') {
                                         setSelectedFacet(facet);
@@ -252,10 +272,11 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)(function (properties)
                                     else {
                                         setSelectedFacet(undefined);
                                     }
-                                }, button: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__dropdown__button__heading" }, mergedLang.dropdownButton.attributes, { children: [(0, jsx_runtime_1.jsxs)("div", { 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) {
+                                }, button: (0, jsx_runtime_1.jsxs)("div", { className: "ss__dropdown__button__heading", ...mergedLang.dropdownButton.attributes, children: [(0, jsx_runtime_1.jsxs)("div", { 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, {}))] }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, ((selectedFacet === null || selectedFacet === void 0 ? void 0 : selectedFacet.field) === facet.field
-                                            ? __assign({}, (typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand)) : __assign({}, (typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse)))))] })), disableOverlay: false, children: (0, jsx_runtime_1.jsx)(Facet_1.Facet, __assign({}, subProps.facet, { facet: facet })) })));
-                        }), renderSidebar && (0, jsx_runtime_1.jsx)(ToggleSidebarButton, { sidebarOpenState: sidebarOpenState, setSidebarOpenState: setSidebarOpenState, subProps: subProps })] }), renderSidebar && ((0, jsx_runtime_1.jsx)(Slideout_1.Slideout, __assign({}, subProps.slideout, { active: sidebarOpenState, children: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, __assign({}, subProps.sidebar, { controller: controller })) })))] })) })) : 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, {}))] }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(selectedFacet?.field === facet.field
+                                                ? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand) }
+                                                : { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }) })] }), disableOverlay: false, children: (0, jsx_runtime_1.jsx)(Facet_1.Facet, { ...subProps.facet, facet: facet }) }));
+                        }), renderSidebar && (0, jsx_runtime_1.jsx)(ToggleSidebarButton, { sidebarOpenState: sidebarOpenState, setSidebarOpenState: setSidebarOpenState, subProps: subProps })] }), renderSidebar && ((0, jsx_runtime_1.jsx)(Slideout_1.Slideout, { ...subProps.slideout, active: sidebarOpenState, children: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { ...subProps.sidebar, controller: controller }) }))] }) })) : null;
 });

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

@@ -1,32 +1,20 @@
 "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.FilterSummary = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var Filter_1 = require("../../Molecules/Filter");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (props) {
-    var _a, _b, _c;
-    var variables = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.variables;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const Filter_1 = require("../../Molecules/Filter");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = (props) => {
+    const variables = props.theme?.variables;
     return (0, react_1.css)({
         '.ss__filter-summary__title': {
             fontSize: '1.2em',
@@ -48,9 +36,9 @@ var defaultStyles = function (props) {
             '.ss__filter-summary__filters': {
                 '.ss__filter': {
                     display: 'block',
-                    margin: "0 5px 5px 5px",
+                    margin: `0 5px 5px 5px`,
                     '.ss__filter__button': {
-                        padding: "0 0 0 0",
+                        padding: `0 0 0 0`,
                         border: 0,
                         '&, &:hover, &:not(.ss__button--disabled):hover, &.ss__button--disabled': {
                             backgroundColor: 'transparent',
@@ -61,11 +49,11 @@ var defaultStyles = function (props) {
                             '.ss__icon': {
                                 padding: '4px',
                                 backgroundColor: '#f8f8f8',
-                                border: "1px solid black",
-                                width: "8px",
-                                height: "8px",
-                                fill: (_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.primary,
-                                stroke: (_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.primary,
+                                border: `1px solid black`,
+                                width: `8px`,
+                                height: `8px`,
+                                fill: variables?.colors?.primary,
+                                stroke: variables?.colors?.primary,
                                 marginRight: '0px',
                             },
                         },
@@ -75,41 +63,45 @@ var defaultStyles = function (props) {
         },
     });
 };
-exports.FilterSummary = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.FilterSummary = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         title: 'Current Filters',
         type: 'inline',
         clearAllLabel: 'Clear All',
         clearAllIcon: 'close-thin',
         filterIcon: 'close-thin',
-        filters: (_b = (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.filters,
+        filters: properties.controller?.store?.filters,
         separator: ':',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('filterSummary', globalTheme, defaultProps, properties);
-    var filters = props.filters, title = props.title, type = props.type, filterIcon = props.filterIcon, clearAllIcon = props.clearAllIcon, separator = props.separator, hideFacetLabel = props.hideFacetLabel, hideTitle = props.hideTitle, clearAllLabel = props.clearAllLabel, hideClearAll = props.hideClearAll, onClick = props.onClick, onClearAllClick = props.onClearAllClick, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _e = (0, hooks_1.useCustomComponentOverride)('filterSummary', props), overrideElement = _e.overrideElement, shouldRenderDefault = _e.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('filterSummary', globalTheme, defaultProps, properties);
+    const { filters, title, type, filterIcon, clearAllIcon, separator, hideFacetLabel, hideTitle, clearAllLabel, hideClearAll, onClick, onClearAllClick, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('filterSummary', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        filter: __assign(__assign({ name: 'filter', 
+    const subProps = {
+        filter: {
+            name: 'filter',
             // default props
-            internalClassName: 'ss__filter-summary__filter' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            separator: separator,
-            hideFacetLabel: hideFacetLabel,
-            icon: filterIcon,
-        })), { 
+            internalClassName: 'ss__filter-summary__filter',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                separator,
+                hideFacetLabel,
+                icon: filterIcon,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
+            theme: props.theme,
+            treePath,
+        },
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         title: {
             value: title,
         },
@@ -118,15 +110,14 @@ exports.FilterSummary = (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_1.useLang)(lang, {
-        filters: filters,
-    });
-    return (filters === null || filters === void 0 ? void 0 : filters.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__filter-summary', { 'ss__filter-summary--list': type === 'list' }, { 'ss__filter-summary--inline': type === 'inline' }, className, internalClassName), children: [!hideTitle && (0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__filter-summary__title" }, (_c = mergedLang.title) === null || _c === void 0 ? void 0 : _c.all)), (0, jsx_runtime_1.jsxs)("div", { className: "ss__filter-summary__filters", children: [filters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(Filter_1.Filter, __assign({}, subProps.filter, { filter: filter, onClick: function (e) { return onClick && onClick(e, filter); } }))); }), !hideClearAll && ((0, jsx_runtime_1.jsx)(Filter_1.Filter, __assign({}, subProps.filter, { name: 'clear-all', icon: clearAllIcon, internalClassName: "".concat((_d = subProps === null || subProps === void 0 ? void 0 : subProps.filter) === null || _d === void 0 ? void 0 : _d.internalClassName, " ss__filter-summary__clear-all"), hideFacetLabel: true, valueLabel: clearAllLabel, onClick: function (e) {
-                                var _a;
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_1.useLang)(lang, {
+        filters,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return filters?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__filter-summary', { 'ss__filter-summary--list': type === 'list' }, { 'ss__filter-summary--inline': type === 'inline' }, className, internalClassName), children: [!hideTitle && (0, jsx_runtime_1.jsx)("div", { className: "ss__filter-summary__title", ...mergedLang.title?.all }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__filter-summary__filters", children: [filters.map((filter) => ((0, jsx_runtime_1.jsx)(Filter_1.Filter, { ...subProps.filter, filter: filter, onClick: (e) => onClick && onClick(e, filter) }))), !hideClearAll && ((0, jsx_runtime_1.jsx)(Filter_1.Filter, { ...subProps.filter, name: 'clear-all', icon: clearAllIcon, internalClassName: `${subProps?.filter?.internalClassName} ss__filter-summary__clear-all`, hideFacetLabel: true, valueLabel: clearAllLabel, onClick: (e) => {
                                 onClearAllClick && onClearAllClick(e);
-                                (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.urlManager.remove('filter').remove('page').go();
+                                properties.controller?.urlManager.remove('filter').remove('page').go();
                             }, lang: {
                                 filter: { attributes: { 'aria-label': clearAllLabel } },
-                            } })))] })] })) })) : null;
+                            } }))] })] }) })) : null;
 });