@athoscommerce/snap-preact 1.9.0 → 1.10.0

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

@@ -1,43 +1,22 @@
 "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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = 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 deepmerge_1 = __importDefault(require("deepmerge"));
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var Checkbox_1 = require("../Checkbox");
-var hooks_2 = require("../../../hooks");
-var Icon_1 = require("../../Atoms/Icon");
-var defaultStyles = function (_a) {
-    var horizontal = _a.horizontal;
+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 deepmerge_1 = __importDefault(require("deepmerge"));
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Checkbox_1 = require("../Checkbox");
+const hooks_2 = require("../../../hooks");
+const Icon_1 = require("../../Atoms/Icon");
+const defaultStyles = ({ horizontal }) => {
     return (0, react_1.css)({
         display: 'flex',
         flexDirection: horizontal ? 'row' : 'column',
@@ -78,50 +57,58 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.List = (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.List = (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)('list', globalTheme, defaultProps, properties);
-    var titleText = props.titleText, onSelect = props.onSelect, native = props.native, multiSelect = props.multiSelect, hideOptionLabels = props.hideOptionLabels, hideOptionIcons = props.hideOptionIcons, hideOptionCheckboxes = props.hideOptionCheckboxes, disabled = props.disabled, hideTitleText = props.hideTitleText, options = props.options, requireSelection = props.requireSelection, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _c = (0, hooks_2.useCustomComponentOverride)('list', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('list', globalTheme, defaultProps, properties);
+    const { titleText, onSelect, native, multiSelect, hideOptionLabels, hideOptionIcons, hideOptionCheckboxes, disabled, hideTitleText, options, requireSelection, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('list', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var selected = props.selected;
-    var subProps = {
-        checkbox: __assign(__assign({ 
+    let selected = props.selected;
+    const subProps = {
+        checkbox: {
             // default props
-            native: native }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            native: native,
+            // 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__list__option__icon', size: '16px' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__list__option__icon',
+            size: '16px',
+            // 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);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     if (selected && !Array.isArray(selected)) {
         selected = [selected];
     }
     // selection state
-    var _d = (0, hooks_1.useState)(selected || []), selection = _d[0], setSelection = _d[1];
+    const [selection, setSelection] = (0, hooks_1.useState)(selected || []);
     // original selection state
-    var originalSelected = (0, hooks_1.useState)(selected || [])[0];
+    const [originalSelected] = (0, hooks_1.useState)(selected || []);
     // reset selection if 'selected' prop changes
     try {
         if (selected) {
-            var originalSelectedstr = JSON.stringify(originalSelected);
-            var selectedstr = JSON.stringify(selected);
-            var selectionstr = JSON.stringify(selection);
+            const originalSelectedstr = JSON.stringify(originalSelected);
+            const selectedstr = JSON.stringify(selected);
+            const selectionstr = JSON.stringify(selection);
             if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
                 setSelection(selected);
             }
@@ -130,22 +117,22 @@ exports.List = (0, mobx_react_lite_1.observer)(function (properties) {
     catch (e) {
         // noop
     }
-    var makeSelection = function (e, option) {
-        var newArray;
+    const makeSelection = (e, option) => {
+        let newArray;
         if (multiSelect) {
-            if (selection.find(function (select) { return select.value === option.value; })) {
-                newArray = __spreadArray([], selection, true);
-                newArray.splice(newArray.findIndex(function (select) { return select.value === option.value; }), 1);
+            if (selection.find((select) => select.value === option.value)) {
+                newArray = [...selection];
+                newArray.splice(newArray.findIndex((select) => select.value === option.value), 1);
                 if (newArray.length == 0 && requireSelection) {
                     newArray = [option];
                 }
             }
             else {
-                newArray = __spreadArray(__spreadArray([], selection, true), [option], false);
+                newArray = [...selection, option];
             }
         }
         else {
-            if (!requireSelection && selection.find(function (select) { return select.value === option.value; })) {
+            if (!requireSelection && selection.find((select) => select.value === option.value)) {
                 newArray = [];
             }
             else {
@@ -158,20 +145,19 @@ exports.List = (0, mobx_react_lite_1.observer)(function (properties) {
         setSelection(newArray);
     };
     //initialize lang
-    var defaultLang = {};
+    const defaultLang = {};
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_2.useLang)(lang, {
-        options: options,
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {
+        options,
         selectedOptions: selection,
-    });
-    return typeof options == 'object' && (options === null || options === void 0 ? void 0 : options.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__list', { 'ss__list--native': native, 'ss__list--disabled': disabled }, className, internalClassName), children: [(titleText || ((_a = lang === null || lang === void 0 ? void 0 : lang.title) === null || _a === void 0 ? void 0 : _a.value)) && !hideTitleText && ((0, jsx_runtime_1.jsx)("h5", __assign({ className: "ss__list__title" }, (_b = mergedLang.title) === null || _b === void 0 ? void 0 : _b.all, { children: titleText }))), (0, jsx_runtime_1.jsx)("ul", { className: "ss__list__options", role: "listbox", "aria-label": titleText, children: options.map(function (option) {
-                        var _a;
-                        var selected = selection.some(function (select) { return select.value == option.value; });
-                        return ((0, jsx_runtime_1.jsxs)("li", { className: (0, classnames_1.default)("ss__list__option ss__list__option--".concat(snap_toolbox_1.filters.handleize((_a = option.value) === null || _a === void 0 ? void 0 : _a.toString())), {
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return typeof options == 'object' && options?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__list', { 'ss__list--native': native, 'ss__list--disabled': disabled }, className, internalClassName), children: [(titleText || lang?.title?.value) && !hideTitleText && ((0, jsx_runtime_1.jsx)("h5", { className: "ss__list__title", ...mergedLang.title?.all, children: titleText })), (0, jsx_runtime_1.jsx)("ul", { className: `ss__list__options`, role: "listbox", "aria-label": titleText, children: options.map((option) => {
+                        const selected = selection.some((select) => select.value == option.value);
+                        return ((0, jsx_runtime_1.jsxs)("li", { className: (0, classnames_1.default)(`ss__list__option ss__list__option--${snap_toolbox_1.filters.handleize(option.value?.toString())}`, {
                                 'ss__list__option--selected': selected,
-                                'ss__list__option--disabled': option === null || option === void 0 ? void 0 : option.disabled,
-                                'ss__list__option--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
-                            }), ref: function (e) { return (0, hooks_2.useA11y)(e); }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, title: option.label, role: "option", "aria-selected": selected, "aria-disabled": option.disabled || (option === null || option === void 0 ? void 0 : option.available) === false, children: [!hideOptionCheckboxes && (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, __assign({}, subProps.checkbox, { checked: selected, disableA11y: true, "aria-label": option.label })), option.icon && !hideOptionIcons && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof option.icon == 'string' ? { icon: option.icon } : option.icon)))), !hideOptionLabels && (option.label || !option.icon) && ((0, jsx_runtime_1.jsx)("label", { className: "ss__list__option__label", children: option.label || option.value }))] }));
-                    }) })] })) })) : null;
+                                'ss__list__option--disabled': option?.disabled,
+                                'ss__list__option--unavailable': option?.available === false,
+                            }), ref: (e) => (0, hooks_2.useA11y)(e), onClick: (e) => !disabled && !option?.disabled && makeSelection(e, option), title: option.label, role: "option", "aria-selected": selected, "aria-disabled": option.disabled || option?.available === false, children: [!hideOptionCheckboxes && (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...subProps.checkbox, checked: selected, disableA11y: true, "aria-label": option.label }), option.icon && !hideOptionIcons && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof option.icon == 'string' ? { icon: option.icon } : option.icon) })), !hideOptionLabels && (option.label || !option.icon) && ((0, jsx_runtime_1.jsx)("label", { className: "ss__list__option__label", children: option.label || option.value }))] }));
+                    }) })] }) })) : null;
 });

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

@@ -1,35 +1,22 @@
 "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.LoadMore = 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 providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var hooks_2 = require("../../../hooks");
-var Button_1 = require("../../Atoms/Button");
-var Icon_1 = require("../../Atoms/Icon");
-var hooks_3 = require("../../../hooks");
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e;
-    var pagination = _a.pagination, progressIndicatorWidth = _a.progressIndicatorWidth, progressIndicatorSize = _a.progressIndicatorSize, color = _a.color, backgroundColor = _a.backgroundColor, 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 providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_2 = require("../../../hooks");
+const Button_1 = require("../../Atoms/Button");
+const Icon_1 = require("../../Atoms/Icon");
+const hooks_3 = require("../../../hooks");
+const defaultStyles = ({ pagination, progressIndicatorWidth, progressIndicatorSize, color, backgroundColor, theme }) => {
     return (0, react_1.css)({
         display: 'flex',
         flexDirection: 'column',
@@ -50,10 +37,10 @@ var defaultStyles = function (_a) {
         },
         '& .ss__load-more__icon': {
             marginLeft: '5px',
-            animation: "".concat((0, react_1.keyframes)({
-                '0%': { transform: "rotate(0deg)" },
-                '100%': { transform: "rotate(360deg)" },
-            }), " linear 1s infinite"),
+            animation: `${(0, react_1.keyframes)({
+                '0%': { transform: `rotate(0deg)` },
+                '100%': { transform: `rotate(360deg)` },
+            })} linear 1s infinite`,
         },
         '&.ss__load-more': {
             '& .ss__load-more__progress': {
@@ -62,11 +49,11 @@ var defaultStyles = function (_a) {
                 gap: '5px',
                 '& .ss__load-more__progress__indicator': {
                     width: progressIndicatorWidth,
-                    background: backgroundColor || ((_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.secondary) || '#f8f8f8',
+                    background: backgroundColor || theme?.variables?.colors?.secondary || '#f8f8f8',
                     borderRadius: progressIndicatorSize,
                     '& .ss__load-more__progress__indicator__bar': {
-                        width: pagination ? "".concat((pagination.end / pagination.totalResults) * 100, "%") : '',
-                        background: 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) || '#ccc',
+                        width: pagination ? `${(pagination.end / pagination.totalResults) * 100}%` : '',
+                        background: color || theme?.variables?.colors?.primary || '#ccc',
                         borderRadius: progressIndicatorSize,
                         height: progressIndicatorSize,
                     },
@@ -78,11 +65,10 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.LoadMore = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.LoadMore = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         loadMoreText: 'Load More',
         loadingLocation: 'button',
         loadingIcon: 'spinner',
@@ -90,47 +76,55 @@ exports.LoadMore = (0, mobx_react_lite_1.observer)(function (properties) {
         progressIndicatorSize: '5px',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('loadMore', globalTheme, defaultProps, properties);
-    var pagination = props.pagination, controller = props.controller, onClick = props.onClick, autoFetch = props.autoFetch, intersectionOffset = props.intersectionOffset, loading = props.loading, loadMoreText = props.loadMoreText, hideProgressIndicator = props.hideProgressIndicator, hideProgressText = props.hideProgressText, loadingLocation = props.loadingLocation, loadingIcon = props.loadingIcon, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _d = (0, hooks_2.useCustomComponentOverride)('loadMore', props), overrideElement = _d.overrideElement, shouldRenderDefault = _d.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('loadMore', globalTheme, defaultProps, properties);
+    const { pagination, controller, onClick, autoFetch, intersectionOffset, loading, loadMoreText, hideProgressIndicator, hideProgressText, loadingLocation, loadingIcon, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('loadMore', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var store = pagination || ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.pagination);
-    var isLoading = typeof loading == 'boolean' ? loading : (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.loading;
-    var isButtonDisabled = (isLoading && loadingLocation === 'button') || !Boolean(store === null || store === void 0 ? void 0 : store.next);
-    var subProps = {
-        button: __assign(__assign({ 
+    const store = pagination || controller?.store?.pagination;
+    const isLoading = typeof loading == 'boolean' ? loading : controller?.store?.loading;
+    const isButtonDisabled = (isLoading && loadingLocation === 'button') || !Boolean(store?.next);
+    const subProps = {
+        button: {
             // default props
-            internalClassName: (0, classnames_1.default)('ss__load-more__button', { 'ss__load-more__button--hidden': isLoading && loadingLocation === 'outside' }, { 'ss__load-more__button--disabled': isButtonDisabled }) }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: (0, classnames_1.default)('ss__load-more__button', { 'ss__load-more__button--hidden': isLoading && loadingLocation === 'outside' }, { 'ss__load-more__button--disabled': isButtonDisabled }),
+            // 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__load-more__icon' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__load-more__icon',
+            // 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,
+        },
     };
     if (!store) {
         return null;
     }
-    var styling = (0, utilities_1.mergeStyles)(__assign(__assign({}, props), { pagination: store }), defaultStyles);
-    var autoProps = {};
+    const styling = (0, utilities_1.mergeStyles)({ ...props, pagination: store }, defaultStyles);
+    const autoProps = {};
     if (autoFetch) {
-        var loadMoreRef = (0, hooks_1.useRef)(null);
+        const loadMoreRef = (0, hooks_1.useRef)(null);
         autoProps.ref = loadMoreRef;
-        var loadMoreInViewport = (0, hooks_2.useIntersection)(loadMoreRef, intersectionOffset || '0px');
-        var _e = (0, hooks_1.useState)(true), preventLoading = _e[0], setPreventLoading_1 = _e[1];
+        const loadMoreInViewport = (0, hooks_2.useIntersection)(loadMoreRef, intersectionOffset || '0px');
+        const [preventLoading, setPreventLoading] = (0, hooks_1.useState)(true);
         if (isLoading) {
-            setPreventLoading_1(true);
+            setPreventLoading(true);
         }
         else {
-            (0, hooks_3.useFuncDebounce)(function () {
-                setPreventLoading_1(false);
+            (0, hooks_3.useFuncDebounce)(() => {
+                setPreventLoading(false);
             }, 500);
         }
         if (loadMoreInViewport && store.next && !preventLoading) {
@@ -138,7 +132,7 @@ exports.LoadMore = (0, mobx_react_lite_1.observer)(function (properties) {
         }
     }
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         loadMoreButton: {
             value: loadMoreText,
             attributes: {
@@ -146,17 +140,16 @@ exports.LoadMore = (0, mobx_react_lite_1.observer)(function (properties) {
             },
         },
         progressText: {
-            value: "You've viewed ".concat(store === null || store === void 0 ? void 0 : store.end, " of ").concat(store === null || store === void 0 ? void 0 : store.totalResults, " products"),
+            value: `You've viewed ${store?.end} of ${store?.totalResults} products`,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_2.useLang)(lang, {
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {
         pagination: store,
-    });
-    return store.totalResults ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, autoProps, { className: (0, classnames_1.default)('ss__load-more', { 'ss__load-more--loading': isLoading }, { 'ss__load-more--autoFetch': autoFetch }, className, internalClassName), children: [!autoFetch && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ onClick: function (e) {
-                                var _a;
-                                (_a = store.next) === null || _a === void 0 ? void 0 : _a.url.go({ history: 'replace' });
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return store.totalResults ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, ...autoProps, className: (0, classnames_1.default)('ss__load-more', { 'ss__load-more--loading': isLoading }, { 'ss__load-more--autoFetch': autoFetch }, className, internalClassName), children: [!autoFetch && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: (e) => {
+                                store.next?.url.go({ history: 'replace' });
                                 onClick && onClick(e);
-                            } }, subProps.button, mergedLang.loadMoreButton.attributes, { children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.loadMoreButton.value, { children: loadMoreText })), loadingIcon && isLoading && loadingLocation === 'button' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof loadingIcon == 'string' ? { icon: loadingIcon } : loadingIcon)))) : null] })), loadingIcon && isLoading && loadingLocation === 'outside' && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof loadingIcon == 'string' ? { icon: loadingIcon } : loadingIcon))))] })), (!hideProgressIndicator || !hideProgressText) && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__load-more__progress', children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideProgressIndicator && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__load-more__progress__indicator', children: (0, jsx_runtime_1.jsx)("div", { className: "ss__load-more__progress__indicator__bar" }) })), !hideProgressText && ((0, jsx_runtime_1.jsx)("div", __assign({ "aria-atomic": "true", "aria-live": "polite", className: 'ss__load-more__progress__text' }, (_c = mergedLang.progressText) === null || _c === void 0 ? void 0 : _c.all)))] }) }))] })) })) : null;
+                            }, ...subProps.button, ...mergedLang.loadMoreButton.attributes, children: [(0, jsx_runtime_1.jsx)("span", { ...mergedLang.loadMoreButton.value, children: loadMoreText }), loadingIcon && isLoading && loadingLocation === 'button' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof loadingIcon == 'string' ? { icon: loadingIcon } : loadingIcon) })) : null] }), loadingIcon && isLoading && loadingLocation === 'outside' && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof loadingIcon == 'string' ? { icon: loadingIcon } : loadingIcon) }))] })), (!hideProgressIndicator || !hideProgressText) && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__load-more__progress', children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideProgressIndicator && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__load-more__progress__indicator', children: (0, jsx_runtime_1.jsx)("div", { className: `ss__load-more__progress__indicator__bar` }) })), !hideProgressText && ((0, jsx_runtime_1.jsx)("div", { "aria-atomic": "true", "aria-live": "polite", className: 'ss__load-more__progress__text', ...mergedLang.progressText?.all }))] }) }))] }) })) : null;
 });

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

@@ -1,32 +1,21 @@
 "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.Modal = 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 providers_1 = require("../../../providers");
-var hooks_2 = require("../../../hooks");
-var utilities_1 = require("../../../utilities");
-var useA11y_1 = require("../../../hooks/useA11y");
-var Overlay_1 = require("../../Atoms/Overlay");
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var defaultStyles = function () {
+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 providers_1 = require("../../../providers");
+const hooks_2 = require("../../../hooks");
+const utilities_1 = require("../../../utilities");
+const useA11y_1 = require("../../../hooks/useA11y");
+const Overlay_1 = require("../../Atoms/Overlay");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const defaultStyles = () => {
     return (0, react_1.css)({
         position: 'relative',
         '&.ss__modal--open': {
@@ -55,47 +44,51 @@ var defaultStyles = function () {
         },
     });
 };
-exports.Modal = (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.Modal = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         startOpen: false,
         disableA11y: false,
         lockScroll: true,
         overlayColor: 'rgba(0,0,0,0.8)',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('modal', globalTheme, defaultProps, properties);
-    var button = props.button, content = props.content, buttonSelector = props.buttonSelector, children = props.children, disabled = props.disabled, open = props.open, onClick = props.onClick, lockScroll = props.lockScroll, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, disableStyles = props.disableStyles, overlayColor = props.overlayColor, onOverlayClick = props.onOverlayClick, treePath = props.treePath;
-    var _b = (0, hooks_2.useCustomComponentOverride)('modal', props), overrideElement = _b.overrideElement, shouldRenderDefault = _b.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('modal', globalTheme, defaultProps, properties);
+    const { button, content, buttonSelector, children, disabled, open, onClick, lockScroll, startOpen, disableClickOutside, disableA11y, className, internalClassName, disableStyles, overlayColor, onOverlayClick, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('modal', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        overlay: __assign(__assign({ 
+    const subProps = {
+        overlay: {
             // default props
-            internalClassName: 'ss__modal__overlay', onClick: function (e) {
+            internalClassName: 'ss__modal__overlay',
+            onClick: (e) => {
                 onOverlayClick && onOverlayClick(e);
                 toggleShowContent();
-            } }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            color: overlayColor,
-        })), { 
+            },
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                color: overlayColor,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
     };
-    var showContent, setShowContent;
-    var stateful = open === undefined;
+    let showContent, setShowContent;
+    const stateful = open === undefined;
     if (stateful) {
-        _a = (0, hooks_1.useState)(startOpen), showContent = _a[0], setShowContent = _a[1];
+        [showContent, setShowContent] = (0, hooks_1.useState)(startOpen);
     }
     else {
         showContent = open;
     }
-    var innerRef;
+    let innerRef;
     if (!disableClickOutside) {
-        innerRef = (0, hooks_2.useClickOutside)(function () {
+        innerRef = (0, hooks_2.useClickOutside)(() => {
             if (showContent) {
                 if (!disabled) {
                     stateful && setShowContent && setShowContent(false);
@@ -103,32 +96,32 @@ exports.Modal = (0, mobx_react_lite_1.observer)(function (properties) {
             }
         });
     }
-    var toggleShowContent = function () {
+    const toggleShowContent = () => {
         if (stateful) {
             setShowContent &&
-                setShowContent(function (prev) {
+                setShowContent((prev) => {
                     return !prev;
                 });
         }
         // overflow will be handled by useEffect below
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     // Effect to lock/unlock scroll when modal opens/closes
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         if (showContent && lockScroll) {
             document.body.style.overflow = 'hidden';
         }
         else {
             document.body.style.overflow = '';
         }
-        return function () {
+        return () => {
             document.body.style.overflow = '';
         };
     }, [showContent, lockScroll]);
-    (0, hooks_1.useEffect)(function () {
-        var existingButton = buttonSelector ? (typeof buttonSelector === 'string' ? document.querySelector(buttonSelector) : buttonSelector) : null;
-        var debouncedHandleResize = (0, snap_toolbox_1.debounce)(function () {
-            setTimeout(function () {
+    (0, hooks_1.useEffect)(() => {
+        const existingButton = buttonSelector ? (typeof buttonSelector === 'string' ? document.querySelector(buttonSelector) : buttonSelector) : null;
+        const debouncedHandleResize = (0, snap_toolbox_1.debounce)(() => {
+            setTimeout(() => {
                 if (showContent && lockScroll) {
                     document.body.style.overflow = 'hidden';
                 }
@@ -137,7 +130,7 @@ exports.Modal = (0, mobx_react_lite_1.observer)(function (properties) {
                 }
             }, 100);
         }, 10);
-        var clickListener = function (e) {
+        const clickListener = (e) => {
             toggleShowContent();
             onClick && onClick(e);
         };
@@ -147,17 +140,17 @@ exports.Modal = (0, mobx_react_lite_1.observer)(function (properties) {
             }
         }
         window.addEventListener('resize', debouncedHandleResize);
-        return function () {
+        return () => {
             window.removeEventListener('resize', debouncedHandleResize);
             if (existingButton) {
                 existingButton.removeEventListener('click', clickListener);
             }
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__modal', { 'ss__modal--open': showContent }, { 'ss__modal--disabled': disabled }, className, internalClassName), ref: innerRef, children: [!buttonSelector && button && ((0, jsx_runtime_1.jsx)("div", { className: "ss__modal__button", ref: function (e) { return (!disableA11y ? (0, useA11y_1.useA11y)(e) : null); }, "aria-expanded": showContent, role: "button", onClick: function (e) {
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__modal', { 'ss__modal--open': showContent }, { 'ss__modal--disabled': disabled }, className, internalClassName), ref: innerRef, children: [!buttonSelector && button && ((0, jsx_runtime_1.jsx)("div", { className: "ss__modal__button", ref: (e) => (!disableA11y ? (0, useA11y_1.useA11y)(e) : null), "aria-expanded": showContent, role: "button", onClick: (e) => {
                         if (!disabled) {
                             toggleShowContent();
                             onClick && onClick(e);
                         }
-                    }, children: (0, utilities_1.cloneWithProps)(button, { open: showContent, toggleOpen: toggleShowContent, treePath: treePath }) })), (content || children) && showContent && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__modal__content", ref: function (e) { return (!disableA11y ? (0, useA11y_1.useA11y)(e) : null); }, children: [(0, utilities_1.cloneWithProps)(content, { open: showContent, toggleOpen: toggleShowContent, treePath: treePath }), (0, utilities_1.cloneWithProps)(children, { open: showContent, toggleOpen: toggleShowContent, treePath: treePath })] })), (0, jsx_runtime_1.jsx)(Overlay_1.Overlay, __assign({}, subProps.overlay, { active: Boolean(showContent) }))] })) }));
+                    }, children: (0, utilities_1.cloneWithProps)(button, { open: showContent, toggleOpen: toggleShowContent, treePath }) })), (content || children) && showContent && ((0, jsx_runtime_1.jsxs)("div", { className: `ss__modal__content`, ref: (e) => (!disableA11y ? (0, useA11y_1.useA11y)(e) : null), children: [(0, utilities_1.cloneWithProps)(content, { open: showContent, toggleOpen: toggleShowContent, treePath }), (0, utilities_1.cloneWithProps)(children, { open: showContent, toggleOpen: toggleShowContent, treePath })] })), (0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { ...subProps.overlay, active: Boolean(showContent) })] }) }));
 });