@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/components/Molecules/ErrorHandler/ErrorHandler.js

@@ -1,37 +1,24 @@
 "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.ErrorHandler = 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 Icon_1 = require("../../Atoms/Icon/Icon");
-var Button_1 = require("../../Atoms/Button/Button");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var warnColour = new utilities_1.Colour('#ecaa15');
-var errorColour = new utilities_1.Colour('#cc1212');
-var infoColour = new utilities_1.Colour('#4c3ce2');
-var defaultStyles = function (_a) {
-    var _b, _c;
-    var theme = _a.theme;
+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 Icon_1 = require("../../Atoms/Icon/Icon");
+const Button_1 = require("../../Atoms/Button/Button");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const warnColour = new utilities_1.Colour('#ecaa15');
+const errorColour = new utilities_1.Colour('#cc1212');
+const infoColour = new utilities_1.Colour('#4c3ce2');
+const defaultStyles = ({ theme }) => {
     return (0, react_1.css)({
         borderRadius: '2px',
         display: 'flex',
@@ -54,7 +41,7 @@ var defaultStyles = function (_a) {
         '& .ss__error-handler__button': {
             backgroundColor: 'unset',
             color: 'inherit',
-            borderColor: (_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,
+            borderColor: theme?.variables?.colors?.primary,
             width: ['150px', 'fit-content'],
             margin: '5px 10px',
             '&:hover': {
@@ -124,68 +111,76 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.ErrorHandler = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.ErrorHandler = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('errorHandler', globalTheme, defaultProps, properties);
-    var controller = props.controller, error = props.error, disableStyles = props.disableStyles, onRetryClick = props.onRetryClick, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _b = (0, hooks_1.useCustomComponentOverride)('errorHandler', props), overrideElement = _b.overrideElement, shouldRenderDefault = _b.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('errorHandler', globalTheme, defaultProps, properties);
+    const { controller, error, disableStyles, onRetryClick, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('errorHandler', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        icon: __assign(__assign({ 
+    const subProps = {
+        icon: {
             // default props
-            size: '18px', internalClassName: 'ss__error-handler__icon' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            size: '18px',
+            internalClassName: 'ss__error-handler__icon',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        buttonRetry: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        buttonRetry: {
             // default props
-            internalClassName: 'ss__error-handler__button', icon: 'rotate-right' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__error-handler__button',
+            icon: 'rotate-right',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
+            theme: props.theme,
+            treePath,
+        },
     };
-    var errorObject = ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.error) || error;
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const errorObject = controller?.store?.error || error;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         warningText: {
-            value: "Warning:",
+            value: `Warning:`,
         },
         infoText: {
-            value: "Info:",
+            value: `Info:`,
         },
         errorText: {
-            value: "Error:",
+            value: `Error:`,
         },
         reloadText: {
-            value: "Retry",
+            value: `Retry`,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_1.useLang)(lang, {
-        controller: controller,
-    });
-    return Object.values(snap_store_mobx_1.ErrorType).includes(errorObject === null || errorObject === void 0 ? void 0 : errorObject.type) && (errorObject === null || errorObject === void 0 ? void 0 : errorObject.message) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__error-handler', "ss__error-handler--".concat(errorObject.type), className, internalClassName) }, styling, { children: (function () {
-                var _a, _b, _c;
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_1.useLang)(lang, {
+        controller,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return Object.values(snap_store_mobx_1.ErrorType).includes(errorObject?.type) && errorObject?.message ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__error-handler', `ss__error-handler--${errorObject.type}`, className, internalClassName), ...styling, children: (() => {
                 switch (errorObject.type) {
                     case snap_store_mobx_1.ErrorType.WARNING:
-                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__error-handler__message", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'warn' })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "ss__error-handler__message__type" }, (_a = mergedLang.warningText) === null || _a === void 0 ? void 0 : _a.all)), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__content", children: errorObject.message })] }), (errorObject === null || errorObject === void 0 ? void 0 : errorObject.code) == 429 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.buttonRetry, { onClick: function (e) {
-                                        onRetryClick ? onRetryClick(e) : controller === null || controller === void 0 ? void 0 : controller.search();
-                                    } }, mergedLang.reloadText.attributes, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "ss__error-handler__button__text" }, mergedLang.reloadText.value)) }))) : null] }));
+                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__error-handler__message", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, icon: 'warn' }), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__type", ...mergedLang.warningText?.all }), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__content", children: errorObject.message })] }), errorObject?.code == 429 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.buttonRetry, onClick: (e) => {
+                                        onRetryClick ? onRetryClick(e) : controller?.search();
+                                    }, ...mergedLang.reloadText.attributes, children: (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__button__text", ...mergedLang.reloadText.value }) })) : null] }));
                     case snap_store_mobx_1.ErrorType.ERROR:
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__error-handler__message", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'error' })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "ss__error-handler__message__type" }, (_b = mergedLang.errorText) === null || _b === void 0 ? void 0 : _b.all)), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__content", children: errorObject.message })] }));
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__error-handler__message", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, icon: 'error' }), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__type", ...mergedLang.errorText?.all }), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__content", children: errorObject.message })] }));
                     case snap_store_mobx_1.ErrorType.INFO:
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__error-handler__message", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'info' })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "ss__error-handler__message__type" }, (_c = mergedLang.infoText) === null || _c === void 0 ? void 0 : _c.all)), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__content", children: errorObject.message })] }));
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__error-handler__message", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, icon: 'info' }), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__type", ...mergedLang.infoText?.all }), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__content", children: errorObject.message })] }));
                 }
-            })() })) })) : null;
+            })() }) })) : null;
 });

package/dist/cjs/components/src/components/Molecules/FacetGridOptions/FacetGridOptions.js

@@ -1,71 +1,56 @@
 "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.FacetGridOptions = 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 providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var toolbox_1 = require("../../../toolbox");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (_a) {
-    var _b;
-    var _c, _d;
-    var columns = _a.columns, gapSize = _a.gapSize, gridSize = _a.gridSize, theme = _a.theme;
+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 providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const toolbox_1 = require("../../../toolbox");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({ columns, gapSize, gridSize, theme }) => {
     return (0, react_1.css)({
         display: 'flex',
         flexFlow: 'row wrap',
-        gridTemplateColumns: columns ? "repeat(".concat(columns, ", 1fr)") : "repeat(auto-fill, minmax(".concat(gridSize, ", 1fr))"),
+        gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : `repeat(auto-fill, minmax(${gridSize}, 1fr))`,
         gap: gapSize,
-        gridAutoRows: "1fr",
-        '& .ss__facet-grid-options__option': (_b = {
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                flex: '0 1 auto',
-                border: '1px solid',
-                borderColor: ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _c === void 0 ? void 0 : _c.colors) === null || _d === void 0 ? void 0 : _d.primary) || 'initial',
-                textAlign: 'center',
-                wordBreak: 'break-all',
-                boxSizing: 'border-box',
-                padding: '1em 0',
-                width: "calc(100% / ".concat(columns, " - ").concat(2 * Math.round((columns + 2) / 2), "px)"),
-                margin: "0 ".concat(gapSize, " ").concat(gapSize, " 0")
-            },
-            _b[":nth-of-type(".concat(columns, "n)")] = {
+        gridAutoRows: `1fr`,
+        '& .ss__facet-grid-options__option': {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flex: '0 1 auto',
+            border: '1px solid',
+            borderColor: theme?.variables?.colors?.primary || 'initial',
+            textAlign: 'center',
+            wordBreak: 'break-all',
+            boxSizing: 'border-box',
+            padding: '1em 0',
+            width: `calc(100% / ${columns} - ${2 * Math.round((columns + 2) / 2)}px)`,
+            margin: `0 ${gapSize} ${gapSize} 0`,
+            [`:nth-of-type(${columns}n)`]: {
                 marginRight: '0',
             },
-            _b['&.ss__facet-grid-options__option--filtered'] = {
+            '&.ss__facet-grid-options__option--filtered': {
                 background: '#ccc',
                 color: '#333',
             },
-            _b['&:hover:not(.ss__facet-grid-options__option--filtered)'] = {
+            '&:hover:not(.ss__facet-grid-options__option--filtered)': {
                 cursor: 'pointer',
                 background: '#f8f8f8',
                 color: '#333',
             },
-            _b['& .ss__facet-grid-options__option__value'] = {
+            '& .ss__facet-grid-options__option__value': {
                 '&.ss__facet-grid-options__option__value--smaller': {
                     fontSize: '70%',
                 },
             },
-            _b),
+        },
         '@supports (display: grid)': {
             display: 'grid',
             '& .ss__facet-grid-options__option': {
@@ -87,52 +72,50 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.FacetGridOptions = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.FacetGridOptions = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         columns: 4,
         gapSize: '8px',
         gridSize: '45px',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('facetGridOptions', globalTheme, defaultProps, properties);
-    var values = props.values, onClick = props.onClick, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, facet = props.facet, horizontal = props.horizontal, className = props.className, internalClassName = props.internalClassName;
-    var _a = (0, hooks_1.useCustomComponentOverride)('facetGridOptions', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('facetGridOptions', globalTheme, defaultProps, properties);
+    const { values, onClick, previewOnFocus, valueProps, facet, horizontal, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('facetGridOptions', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
     if (horizontal) {
         props.columns = 0;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var facetValues = values || (facet === null || facet === void 0 ? void 0 : facet.refinedValues);
-    return (facetValues === null || facetValues === void 0 ? void 0 : facetValues.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-grid-options', className, internalClassName), children: facetValues.map(function (value) {
-                var _a, _b, _c;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const facetValues = values || facet?.refinedValues;
+    return facetValues?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__facet-grid-options', className, internalClassName), children: facetValues.map((value) => {
                 //initialize lang
-                var defaultLang = {
+                const defaultLang = {
                     gridOption: {
                         attributes: {
-                            'aria-label': "".concat(value.filtered
-                                ? "remove selected filter ".concat((facet === null || facet === void 0 ? void 0 : facet.label) || '', " - ").concat(value.label)
-                                : (facet === null || facet === void 0 ? void 0 : facet.label)
-                                    ? "filter by ".concat(facet === null || facet === void 0 ? void 0 : facet.label, " - ").concat(value.label)
-                                    : "filter by ".concat(value.label)),
+                            'aria-label': `${value.filtered
+                                ? `remove selected filter ${facet?.label || ''} - ${value.label}`
+                                : facet?.label
+                                    ? `filter by ${facet?.label} - ${value.label}`
+                                    : `filter by ${value.label}`}`,
                         },
                     },
                 };
                 //deep merge with props.lang
-                var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-                var mergedLang = (0, hooks_1.useLang)(lang, {
-                    facet: facet,
-                    value: value,
-                });
-                return ((0, jsx_runtime_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href }, valueProps, { onClick: function (e) {
-                        var _a, _b;
-                        (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.onClick(e);
+                const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                const mergedLang = (0, hooks_1.useLang)(lang, {
+                    facet,
+                    value,
+                }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                return ((0, jsx_runtime_1.jsx)("a", { className: (0, classnames_1.default)('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), href: value.url?.link?.href, ...valueProps, onClick: (e) => {
+                        value.url?.link?.onClick(e);
                         onClick && onClick(e);
-                    } }, (previewOnFocus ? (0, toolbox_1.createHoverProps)(function () { return (value === null || value === void 0 ? void 0 : value.preview) && value.preview(); }) : {}), (_c = mergedLang.gridOption) === null || _c === void 0 ? void 0 : _c.all, { children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('ss__facet-grid-options__option__value', {
+                    }, ...(previewOnFocus ? (0, toolbox_1.createHoverProps)(() => value?.preview && value.preview()) : {}), ...mergedLang.gridOption?.all, children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('ss__facet-grid-options__option__value', {
                             'ss__facet-grid-options__option__value--smaller': value.label.length > 3,
-                        }), children: value.label }) })));
-            }) })) })) : null;
+                        }), children: value.label }) }));
+            }) }) })) : null;
 });

package/dist/cjs/components/src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.js

@@ -1,34 +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.FacetHierarchyOptions = 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 providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var toolbox_1 = require("../../../toolbox");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var Icon_1 = require("../../Atoms/Icon");
-var defaultStyles = function (_a) {
-    var _b, _c;
-    var _d, _e, _f, _g, _h, _j, _k, _l;
-    var theme = _a.theme, horizontal = _a.horizontal, returnIcon = _a.returnIcon;
+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 providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const toolbox_1 = require("../../../toolbox");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const Icon_1 = require("../../Atoms/Icon");
+const defaultStyles = ({ theme, horizontal, returnIcon }) => {
     if (horizontal) {
         return (0, react_1.css)({
             display: 'flex',
@@ -43,24 +29,23 @@ var defaultStyles = function (_a) {
                 },
                 '&.ss__facet-hierarchy-options__option--filtered': {
                     fontWeight: 'bold',
-                    color: (_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,
+                    color: theme?.variables?.colors?.primary,
                     marginRight: '2em',
                     '&:hover': {
                         cursor: 'default',
                         background: 'unset',
                     },
                 },
-                '&.ss__facet-hierarchy-options__option--return': (_b = {
-                        '.ss__icon': {
-                            padding: '0 0 0 2px',
-                        }
+                '&.ss__facet-hierarchy-options__option--return': {
+                    '.ss__icon': {
+                        padding: '0 0 0 2px',
                     },
-                    _b[!returnIcon ? '&:before' : ''] = {
-                        content: "".concat(returnIcon ? '""' : "'\\0000ab'"),
+                    [!returnIcon ? '&:before' : '']: {
+                        content: `${returnIcon ? '""' : "'\\0000ab'"}`,
                         padding: '0 2px 0 0',
-                        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: theme?.variables?.colors?.primary,
                     },
-                    _b),
+                },
                 '& .ss__facet-hierarchy-options__option__value': {
                     '& .ss__facet-hierarchy-options__option__value__count': {
                         fontSize: '0.8em',
@@ -82,7 +67,7 @@ var defaultStyles = function (_a) {
                 },
                 '&.ss__facet-hierarchy-options__option--filtered': {
                     fontWeight: 'bold',
-                    color: (_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.primary,
+                    color: theme?.variables?.colors?.primary,
                     '&:hover': {
                         cursor: 'default',
                         background: 'unset',
@@ -91,17 +76,16 @@ var defaultStyles = function (_a) {
                         paddingLeft: '16px',
                     },
                 },
-                '&.ss__facet-hierarchy-options__option--return': (_c = {
-                        '.ss__icon': {
-                            padding: '0 0 0 2px',
-                        }
+                '&.ss__facet-hierarchy-options__option--return': {
+                    '.ss__icon': {
+                        padding: '0 0 0 2px',
                     },
-                    _c[!returnIcon ? '&:before' : ''] = {
-                        content: "".concat(returnIcon ? '""' : "'\\0000ab'"),
+                    [!returnIcon ? '&:before' : '']: {
+                        content: `${returnIcon ? '""' : "'\\0000ab'"}`,
                         padding: '0 2px 0 0',
-                        color: (_l = (_k = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _k === void 0 ? void 0 : _k.colors) === null || _l === void 0 ? void 0 : _l.primary,
+                        color: theme?.variables?.colors?.primary,
                     },
-                    _c),
+                },
                 '& .ss__facet-hierarchy-options__option__value': {
                     marginLeft: '8px',
                     '& .ss__facet-hierarchy-options__option__value__count': {
@@ -113,51 +97,55 @@ var defaultStyles = function (_a) {
         });
     }
 };
-exports.FacetHierarchyOptions = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.FacetHierarchyOptions = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('facetHierarchyOptions', globalTheme, defaultProps, properties);
-    var values = props.values, hideCount = props.hideCount, returnIcon = props.returnIcon, onClick = props.onClick, previewOnFocus = props.previewOnFocus, horizontal = props.horizontal, valueProps = props.valueProps, facet = props.facet, disableStyles = props.disableStyles, treePath = props.treePath, className = props.className, internalClassName = props.internalClassName;
-    var _a = (0, hooks_1.useCustomComponentOverride)('facetHierarchyOptions', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('facetHierarchyOptions', globalTheme, defaultProps, properties);
+    const { values, hideCount, returnIcon, onClick, previewOnFocus, horizontal, valueProps, facet, disableStyles, treePath, className, internalClassName, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('facetHierarchyOptions', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        icon: __assign(__assign({ internalClassName: 'ss__facet-hierarchy-options__icon' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+    const subProps = {
+        icon: {
+            internalClassName: 'ss__facet-hierarchy-options__icon',
+            // default props
+            // 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 facetValues = values || (facet === null || facet === void 0 ? void 0 : facet.refinedValues);
-    return (facetValues === null || facetValues === void 0 ? void 0 : facetValues.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-hierarchy-options', { 'ss__facet-hierarchy-options--horizontal': horizontal }, className, internalClassName), children: facetValues.map(function (value) {
-                var _a, _b, _c;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const facetValues = values || facet?.refinedValues;
+    return facetValues?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__facet-hierarchy-options', { 'ss__facet-hierarchy-options--horizontal': horizontal }, className, internalClassName), children: facetValues.map((value) => {
                 //initialize lang
-                var defaultLang = {
+                const defaultLang = {
                     hierarchyOption: {
                         attributes: {
-                            'aria-label': "".concat(value.filtered
-                                ? "selected ".concat(value.label)
-                                : (facet === null || facet === void 0 ? void 0 : facet.label)
-                                    ? "filter by ".concat(facet === null || facet === void 0 ? void 0 : facet.label, " - ").concat(value.label)
-                                    : "filter by ".concat(value.label)),
+                            'aria-label': `${value.filtered
+                                ? `selected ${value.label}`
+                                : facet?.label
+                                    ? `filter by ${facet?.label} - ${value.label}`
+                                    : `filter by ${value.label}`}`,
                         },
                     },
                 };
                 //deep merge with props.lang
-                var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-                var mergedLang = (0, hooks_1.useLang)(lang, {
-                    facet: facet,
-                    value: value,
-                });
-                return ((0, jsx_runtime_1.jsxs)("a", __assign({ className: (0, classnames_1.default)('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }), href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href }, valueProps, { onClick: function (e) {
-                        var _a, _b;
-                        (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.onClick(e);
+                const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                const mergedLang = (0, hooks_1.useLang)(lang, {
+                    facet,
+                    value,
+                }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                return ((0, jsx_runtime_1.jsxs)("a", { className: (0, classnames_1.default)('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }), href: value.url?.link?.href, ...valueProps, onClick: (e) => {
+                        value.url?.link?.onClick(e);
                         onClick && onClick(e);
-                    } }, (previewOnFocus ? (0, toolbox_1.createHoverProps)(function () { return (value === null || value === void 0 ? void 0 : value.preview) && value.preview(); }) : {}), (_c = mergedLang.hierarchyOption) === null || _c === void 0 ? void 0 : _c.all, { children: [returnIcon && value.history && !value.filtered && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof returnIcon == 'string' ? { icon: returnIcon } : returnIcon)))), (0, jsx_runtime_1.jsxs)("span", { className: "ss__facet-hierarchy-options__option__value", children: [value.label, !hideCount && (value === null || value === void 0 ? void 0 : value.count) > 0 && !value.filtered && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__facet-hierarchy-options__option__value__count", children: ["(", value.count, ")"] }))] })] })));
-            }) })) })) : null;
+                    }, ...(previewOnFocus ? (0, toolbox_1.createHoverProps)(() => value?.preview && value.preview()) : {}), ...mergedLang.hierarchyOption?.all, children: [returnIcon && value.history && !value.filtered && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof returnIcon == 'string' ? { icon: returnIcon } : returnIcon) })), (0, jsx_runtime_1.jsxs)("span", { className: "ss__facet-hierarchy-options__option__value", children: [value.label, !hideCount && value?.count > 0 && !value.filtered && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__facet-hierarchy-options__option__value__count", children: ["(", value.count, ")"] }))] })] }));
+            }) }) })) : null;
 });