@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/components/Templates/RecommendationGrid/RecommendationGrid.js

@@ -1,36 +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.RecommendationGrid = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var Result_1 = require("../../Molecules/Result");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
-var ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
-var ResultTracker_1 = require("../../Trackers/ResultTracker");
-var react_2 = require("react");
-var hooks_1 = require("preact/hooks");
-var hooks_2 = require("../../../hooks");
-var defaultStyles = function (_a) {
-    var gapSize = _a.gapSize, columns = _a.columns;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const Result_1 = require("../../Molecules/Result");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
+const ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
+const ResultTracker_1 = require("../../Trackers/ResultTracker");
+const react_2 = require("react");
+const hooks_1 = require("preact/hooks");
+const hooks_2 = require("../../../hooks");
+const defaultStyles = ({ gapSize, columns }) => {
     return (0, react_1.css)({
         maxWidth: '100%',
         maxHeight: '100%',
@@ -39,7 +27,7 @@ var defaultStyles = function (_a) {
             flexFlow: 'row wrap',
             gap: gapSize,
             gridTemplateRows: 'auto',
-            gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"),
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
             overflow: 'auto',
             '@supports (display: grid)': {
                 display: 'grid',
@@ -47,44 +35,57 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.RecommendationGrid = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
-        results: (_b = (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.results,
+exports.RecommendationGrid = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        results: properties.controller?.store?.results,
         gapSize: '20px',
-        title: (_g = (_f = (_e = (_d = (_c = properties.controller) === null || _c === void 0 ? void 0 : _c.store) === null || _d === void 0 ? void 0 : _d.profile) === null || _e === void 0 ? void 0 : _e.display) === null || _f === void 0 ? void 0 : _f.templateParameters) === null || _g === void 0 ? void 0 : _g.title,
+        title: properties.controller?.store?.profile?.display?.templateParameters?.title,
         treePath: globalTreePath,
     };
     //mergeprops only uses names that are passed via properties, so this cannot be put in the defaultProps
-    var _properties = __assign({ name: (_l = (_k = (_j = (_h = properties.controller) === null || _h === void 0 ? void 0 : _h.store) === null || _j === void 0 ? void 0 : _j.profile) === null || _k === void 0 ? void 0 : _k.tag) === null || _l === void 0 ? void 0 : _l.toLowerCase() }, properties);
-    var props = (0, utilities_1.mergeProps)('recommendationGrid', globalTheme, defaultProps, _properties);
-    if (!(((_m = properties.theme) === null || _m === void 0 ? void 0 : _m.type) == 'templates' || (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.type) == 'templates')) {
+    const _properties = {
+        name: properties.controller?.store?.profile?.tag?.toLowerCase(),
+        ...properties,
+    };
+    let props = (0, utilities_1.mergeProps)('recommendationGrid', globalTheme, defaultProps, _properties);
+    if (!(properties.theme?.type == 'templates' || globalTheme?.type == 'templates')) {
         // breakpoint settings are calculated in ThemeStore for snap templates
-        var displaySettings = (0, useDisplaySettings_1.useDisplaySettings)((props === null || props === void 0 ? void 0 : props.breakpoints) || {});
-        var theme_1 = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
-        props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme_1 });
+        const displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props?.breakpoints || {});
+        const theme = (0, deepmerge_1.default)(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
+        props = {
+            ...props,
+            ...displaySettings,
+            theme,
+        };
     }
-    var disableStyles = props.disableStyles, title = props.title, trim = props.trim, lazyRender = props.lazyRender, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, theme = props.theme, controller = props.controller;
-    var resultComponent = props.resultComponent;
-    var snap = (0, providers_1.useSnap)();
-    var isNamedResultComponent = typeof resultComponent === 'string';
-    var resultComponentName = isNamedResultComponent ? resultComponent : '';
-    var resultComponentMap = ((_o = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _o === void 0 ? void 0 : _o.library.import.component.result) || {};
-    var _p = (0, hooks_2.useComponent)(resultComponentMap, isNamedResultComponent ? resultComponentName : undefined), resultComponentOverride = _p.ComponentOverride, shouldWaitForNamedResultComponent = _p.shouldWaitForNamedOverride;
-    var resolvedResultComponent = isNamedResultComponent ? resultComponentOverride : resultComponent;
-    var mergedlazyRender = __assign({ enabled: true, offset: '10%' }, lazyRender);
-    var subProps = {
-        result: __assign(__assign({ 
+    const { disableStyles, title, trim, lazyRender, className, internalClassName, treePath, theme, controller } = props;
+    const resultComponent = props.resultComponent;
+    const snap = (0, providers_1.useSnap)();
+    const isNamedResultComponent = typeof resultComponent === 'string';
+    const resultComponentName = isNamedResultComponent ? resultComponent : '';
+    const resultComponentMap = snap?.templates?.library.import.component.result || {};
+    const { ComponentOverride: resultComponentOverride, shouldWaitForNamedOverride: shouldWaitForNamedResultComponent } = (0, hooks_2.useComponent)(resultComponentMap, isNamedResultComponent ? resultComponentName : undefined);
+    const resolvedResultComponent = isNamedResultComponent ? resultComponentOverride : resultComponent;
+    const mergedlazyRender = {
+        enabled: true,
+        offset: '10%',
+        ...lazyRender,
+    };
+    const subProps = {
+        result: {
             // default props
-            internalClassName: 'ss__recommendation-grid__result' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__recommendation-grid__result',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme }),
+            theme: props?.theme,
+        },
     };
-    var results = props.results || controller.store.results;
+    let results = props.results || controller.store.results;
     if (!props.columns && !props.rows) {
         props.rows = 1;
         props.columns = results.length;
@@ -92,52 +93,50 @@ exports.RecommendationGrid = (0, mobx_react_lite_1.observer)(function (propertie
     else if (props.columns && !props.rows) {
         props.rows = Math.floor(results.length / props.columns);
         if (trim) {
-            var remainder = results.length % props.columns;
+            const remainder = results.length % props.columns;
             results = results.slice(0, results.length - remainder);
         }
     }
     else if (props.rows && !props.columns) {
         if (trim) {
-            var remainder = results.length % props.rows;
+            const remainder = results.length % props.rows;
             results = results.slice(0, results.length - remainder);
         }
         props.columns = Math.ceil(results.length / props.rows);
     }
-    else if ((props === null || props === void 0 ? void 0 : props.columns) && (props === null || props === void 0 ? void 0 : props.rows) && props.columns > 0 && props.rows > 0) {
-        results = results === null || results === void 0 ? void 0 : results.slice(0, props.columns * props.rows);
+    else if (props?.columns && props?.rows && props.columns > 0 && props.rows > 0) {
+        results = results?.slice(0, props.columns * props.rows);
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var _q = (0, react_2.useState)(false), isVisible = _q[0], setIsVisible = _q[1];
-    var recsRef = (0, hooks_1.useRef)(null);
-    var inView = (mergedlazyRender === null || mergedlazyRender === void 0 ? void 0 : mergedlazyRender.enabled) ? (0, hooks_2.useIntersection)(recsRef, "".concat(mergedlazyRender.offset, " 0px ").concat(mergedlazyRender.offset, " 0px"), true) : true;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const [isVisible, setIsVisible] = (0, react_2.useState)(false);
+    const recsRef = (0, hooks_1.useRef)(null);
+    const inView = mergedlazyRender?.enabled ? (0, hooks_2.useIntersection)(recsRef, `${mergedlazyRender.offset} 0px ${mergedlazyRender.offset} 0px`, true) : true;
     if (inView) {
         setIsVisible(true);
     }
-    return (results === null || results === void 0 ? void 0 : results.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { ref: recsRef, className: (0, classnames_1.default)('ss__recommendation-grid', className, internalClassName), children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && (0, jsx_runtime_1.jsx)("h3", { className: "ss__recommendation-grid__title", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "ss__recommendation-grid__results", children: results.map(function (result) {
-                            return (function () {
-                                if (resolvedResultComponent && controller) {
-                                    return (0, utilities_1.cloneWithProps)(resolvedResultComponent, {
-                                        controller: controller,
-                                        result: result,
-                                        theme: isNamedResultComponent
-                                            ? (0, deepmerge_1.default)(theme || {}, {
-                                                components: {
-                                                    // in order to preserve theme overrides for resultComponent vs. customComponent
-                                                    result: {
-                                                        customComponent: resultComponent,
-                                                    },
+    return results?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, ref: recsRef, className: (0, classnames_1.default)('ss__recommendation-grid', className, internalClassName), children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && (0, jsx_runtime_1.jsx)("h3", { className: "ss__recommendation-grid__title", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "ss__recommendation-grid__results", children: results.map((result) => (() => {
+                            if (resolvedResultComponent && controller) {
+                                return (0, utilities_1.cloneWithProps)(resolvedResultComponent, {
+                                    controller,
+                                    result: result,
+                                    theme: isNamedResultComponent
+                                        ? (0, deepmerge_1.default)(theme || {}, {
+                                            components: {
+                                                // in order to preserve theme overrides for resultComponent vs. customComponent
+                                                result: {
+                                                    customComponent: resultComponent,
                                                 },
-                                            })
-                                            : theme,
-                                        treePath: treePath,
-                                    });
-                                }
-                                else {
-                                    if (shouldWaitForNamedResultComponent) {
-                                        return null;
-                                    }
-                                    return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { result: result, controller: controller, children: (0, jsx_runtime_1.jsx)(Result_1.Result, __assign({}, subProps.result, { result: result, controller: controller, treePath: treePath }), result.id) }));
+                                            },
+                                        })
+                                        : theme,
+                                    treePath,
+                                });
+                            }
+                            else {
+                                if (shouldWaitForNamedResultComponent) {
+                                    return null;
                                 }
-                            })();
-                        }) })] })) : ((0, jsx_runtime_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: results.map(function (result) { return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) })); }) })) })) })) : null;
+                                return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { result: result, controller: controller, children: (0, jsx_runtime_1.jsx)(Result_1.Result, { ...subProps.result, result: result, controller: controller, treePath: treePath }, result.id) }));
+                            }
+                        })()) })] })) : ((0, jsx_runtime_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: results.map((result) => ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }))) })) }) })) : null;
 });

package/dist/cjs/components/src/components/Templates/Search/Search.js

@@ -1,105 +1,91 @@
 "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.Search = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var Results_1 = require("../../Organisms/Results");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var Sidebar_1 = require("../../Organisms/Sidebar");
-var Toolbar_1 = require("../../Organisms/Toolbar");
-var NoResults_1 = require("../../Organisms/NoResults");
-var hooks_2 = require("../../../hooks");
-var useA11y_1 = require("../../../hooks/useA11y");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var useLayoutOptions_1 = require("../../../hooks/useLayoutOptions");
-var componentNameToClassName_1 = require("../../../utilities/componentNameToClassName");
-var Slideout_1 = require("../../Molecules/Slideout");
-var defaultStyles = function (props) {
-    var _a, _b;
-    var classNamePrefix = 'ss__search';
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const Results_1 = require("../../Organisms/Results");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const Sidebar_1 = require("../../Organisms/Sidebar");
+const Toolbar_1 = require("../../Organisms/Toolbar");
+const NoResults_1 = require("../../Organisms/NoResults");
+const hooks_2 = require("../../../hooks");
+const useA11y_1 = require("../../../hooks/useA11y");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const useLayoutOptions_1 = require("../../../hooks/useLayoutOptions");
+const componentNameToClassName_1 = require("../../../utilities/componentNameToClassName");
+const Slideout_1 = require("../../Molecules/Slideout");
+const defaultStyles = (props) => {
+    let classNamePrefix = 'ss__search';
     if (props.alias) {
-        classNamePrefix = "ss__".concat((0, componentNameToClassName_1.componentNameToClassName)(props.alias));
+        classNamePrefix = `ss__${(0, componentNameToClassName_1.componentNameToClassName)(props.alias)}`;
     }
-    var mobileQuery = props.mobileDisplayAt
+    const mobileQuery = props.mobileDisplayAt
         ? typeof props.mobileDisplayAt === 'boolean'
-            ? "(min-width: 0px)"
-            : "(max-width: ".concat(props.mobileDisplayAt, ")")
-        : "(max-width: 0px)";
-    return (0, react_1.css)((_a = {},
-        _a[".".concat(classNamePrefix, "__header-section")] = {
+            ? `(min-width: 0px)`
+            : `(max-width: ${props.mobileDisplayAt})`
+        : `(max-width: 0px)`;
+    return (0, react_1.css)({
+        [`.${classNamePrefix}__header-section`]: {
             marginBottom: '20px',
         },
-        _a[".".concat(classNamePrefix, "__main-section")] = {
+        [`.${classNamePrefix}__main-section`]: {
             display: 'flex',
             minHeight: '600px',
             gap: '20px',
         },
-        _a['.ss__sidebar'] = (_b = {
-                flex: '0 1 auto',
-                width: props.sidebarWidth,
-                '&:empty': {
-                    display: 'none',
-                }
+        '.ss__sidebar': {
+            flex: '0 1 auto',
+            width: props.sidebarWidth,
+            '&:empty': {
+                display: 'none',
             },
-            _b["@media ".concat(mobileQuery)] = {
+            [`@media ${mobileQuery}`]: {
                 width: '100%',
             },
-            _b),
-        _a[".".concat(classNamePrefix, "__content")] = {
+        },
+        [`.${classNamePrefix}__content`]: {
             width: '100%',
             boxSizing: 'border-box',
             display: 'flex',
             flexDirection: 'column',
             gap: '1em',
         },
-        _a));
+    });
 };
-exports.Search = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Search = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         toggleSidebarButtonText: 'Filters',
         sidebarWidth: '270px',
-        mobileDisplayAt: ((_b = (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.variables) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.tablet) ? "".concat((_d = (_c = globalTheme.variables) === null || _c === void 0 ? void 0 : _c.breakpoints) === null || _d === void 0 ? void 0 : _d.tablet, "px") : '991px',
+        mobileDisplayAt: globalTheme?.variables?.breakpoints?.tablet ? `${globalTheme.variables?.breakpoints?.tablet}px` : '991px',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)(properties.alias || 'search', globalTheme, defaultProps, properties);
-    var disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, controller = props.controller, hideSidebar = props.hideSidebar, toggleSidebarButtonText = props.toggleSidebarButtonText, hideTopToolbar = props.hideTopToolbar, hideMiddleToolbar = props.hideMiddleToolbar, hideBottomToolbar = props.hideBottomToolbar, resultComponent = props.resultComponent, hideToggleSidebarButton = props.hideToggleSidebarButton, mobileDisplayAt = props.mobileDisplayAt, toggleSidebarStartClosed = props.toggleSidebarStartClosed, treePath = props.treePath, alias = props.alias;
-    var classNamePrefix = 'ss__search';
+    const props = (0, utilities_1.mergeProps)(properties.alias || 'search', globalTheme, defaultProps, properties);
+    const { disableStyles, className, internalClassName, controller, hideSidebar, toggleSidebarButtonText, hideTopToolbar, hideMiddleToolbar, hideBottomToolbar, resultComponent, hideToggleSidebarButton, mobileDisplayAt, toggleSidebarStartClosed, treePath, alias, } = props;
+    let classNamePrefix = 'ss__search';
     if (props.alias) {
-        classNamePrefix = "ss__".concat((0, componentNameToClassName_1.componentNameToClassName)(props.alias));
+        classNamePrefix = `ss__${(0, componentNameToClassName_1.componentNameToClassName)(props.alias)}`;
     }
     // handle selected layoutOptions - must always call to preserve hook order
     (0, useLayoutOptions_1.useLayoutOptions)(props, globalTheme);
-    var store = controller.store;
-    var isMobile = (0, hooks_2.useMediaQuery)(mobileDisplayAt ? (typeof mobileDisplayAt == 'boolean' ? "(min-width: 0px)" : "(max-width: ".concat(mobileDisplayAt, ")")) : "(max-width: 0px)");
-    var _f = (0, hooks_1.useState)(Boolean(alias !== 'searchHorizontal' && !toggleSidebarStartClosed && !isMobile)), sidebarOpenState = _f[0], setSidebarOpenState = _f[1];
+    const store = controller.store;
+    const isMobile = (0, hooks_2.useMediaQuery)(mobileDisplayAt ? (typeof mobileDisplayAt == 'boolean' ? `(min-width: 0px)` : `(max-width: ${mobileDisplayAt})`) : `(max-width: 0px)`);
+    const [sidebarOpenState, setSidebarOpenState] = (0, hooks_1.useState)(Boolean(alias !== 'searchHorizontal' && !toggleSidebarStartClosed && !isMobile));
     // Track previous isMobile value to detect transitions and suppress slideout overlay animation occuring during resize to mobile.
-    var prevIsMobileRef = (0, hooks_1.useRef)(isMobile);
-    var justTransitionedToMobile = isMobile && !prevIsMobileRef.current;
-    (0, hooks_1.useEffect)(function () {
+    const prevIsMobileRef = (0, hooks_1.useRef)(isMobile);
+    const justTransitionedToMobile = isMobile && !prevIsMobileRef.current;
+    (0, hooks_1.useEffect)(() => {
         prevIsMobileRef.current = isMobile;
     });
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         if (isMobile) {
             // if we are on mobile, we want to close the slideout to start.
             setSidebarOpenState(false);
@@ -114,81 +100,135 @@ exports.Search = (0, mobx_react_lite_1.observer)(function (properties) {
         }
     }, [isMobile]);
     //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, { filters: store.filters, sidebarOpenState: sidebarOpenState });
-    var ToggleSidebar = function () {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("".concat(classNamePrefix, "__sidebar-toggle"), sidebarOpenState ? "".concat(classNamePrefix, "__sidebar-toggle--open") : ''), 
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, { filters: store.filters, sidebarOpenState: sidebarOpenState }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    const ToggleSidebar = () => {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(`${classNamePrefix}__sidebar-toggle`, sidebarOpenState ? `${classNamePrefix}__sidebar-toggle--open` : ''), 
             // @ts-ignore - this is fine.
-            active: sidebarOpenState, children: (0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.toggleSidebarButtonText.all)) }));
+            active: sidebarOpenState, children: (0, jsx_runtime_1.jsx)("span", { ...mergedLang.toggleSidebarButtonText.all }) }));
     };
-    var toggleSidebarButtonProps = {
-        onClick: function () {
+    const toggleSidebarButtonProps = {
+        onClick: () => {
             setSidebarOpenState(!sidebarOpenState);
             // need the timeout to allow the sidebar to open before focusing the first available element.
-            setTimeout(function () {
-                var _a;
+            setTimeout(() => {
                 // focus the first available elem when toggling the sidebar open.
                 if (!sidebarOpenState) {
-                    var firstAvailableElemToFocus = (_a = document.querySelector('.ss__sidebar')) === null || _a === void 0 ? void 0 : _a.querySelector(useA11y_1.FOCUSABLE_ELEMENTS);
+                    const firstAvailableElemToFocus = document.querySelector('.ss__sidebar')?.querySelector(useA11y_1.FOCUSABLE_ELEMENTS);
                     if (firstAvailableElemToFocus) {
                         firstAvailableElemToFocus.focus();
                     }
                 }
             });
         },
-        children: !hideToggleSidebarButton && store.loaded && (toggleSidebarButtonText || ((_e = mergedLang.toggleSidebarButtonText) === null || _e === void 0 ? void 0 : _e.value)) ? ToggleSidebar : undefined,
+        children: !hideToggleSidebarButton && store.loaded && (toggleSidebarButtonText || mergedLang.toggleSidebarButtonText?.value) ? ToggleSidebar : undefined,
     };
-    var subProps = {
-        TopToolbar: __assign(__assign({ 
+    const subProps = {
+        TopToolbar: {
             // default props
-            name: 'top', internalClassName: "".concat(classNamePrefix, "__header-section__toolbar--top-toolbar"), layout: [['banner.header'], ['searchHeader', '_']], toggleSideBarButton: __assign({}, toggleSidebarButtonProps) }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        MiddleToolbar: __assign(__assign({ 
+            name: 'top',
+            internalClassName: `${classNamePrefix}__header-section__toolbar--top-toolbar`,
+            layout: [['banner.header'], ['searchHeader', '_']],
+            toggleSideBarButton: { ...toggleSidebarButtonProps },
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        MiddleToolbar: {
             // default props
-            name: 'middle', internalClassName: "".concat(classNamePrefix, "__content__toolbar--middle-toolbar"), layout: isMobile
+            name: 'middle',
+            internalClassName: `${classNamePrefix}__content__toolbar--middle-toolbar`,
+            layout: isMobile
                 ? [['paginationInfo', '_'], ['button.sidebar-toggle', '_', 'sortBy'], ['banner.banner']]
-                : [['sortBy', 'perPage', '_', 'paginationInfo'], ['banner.banner']], toggleSideBarButton: __assign({}, toggleSidebarButtonProps) }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        BottomToolbar: __assign(__assign({ 
+                : [['sortBy', 'perPage', '_', 'paginationInfo'], ['banner.banner']],
+            toggleSideBarButton: { ...toggleSidebarButtonProps },
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        BottomToolbar: {
             // default props
-            name: 'bottom', internalClassName: "".concat(classNamePrefix, "__content__toolbar--bottom-toolbar"), layout: [['banner.footer'], ['_', 'pagination', '_']], toggleSideBarButton: __assign({}, toggleSidebarButtonProps) }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        Sidebar: __assign(__assign({ 
+            name: 'bottom',
+            internalClassName: `${classNamePrefix}__content__toolbar--bottom-toolbar`,
+            layout: [['banner.footer'], ['_', 'pagination', '_']],
+            toggleSideBarButton: { ...toggleSidebarButtonProps },
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        Sidebar: {
             // default props
-            layout: [['filterSummary'], ['facets'], ['banner.left']] }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        MobileSidebar: __assign(__assign({ 
+            layout: [['filterSummary'], ['facets'], ['banner.left']],
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        MobileSidebar: {
             // default props
-            layout: [['filterSummary'], ['facets'], ['banner.left']], hideApplyButton: false, hideClearButton: false, hideCloseButton: false, onToggleSidebar: function () { return setSidebarOpenState(function (prev) { return !prev; }); } }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        Results: __assign(__assign({ 
+            layout: [['filterSummary'], ['facets'], ['banner.left']],
+            hideApplyButton: false,
+            hideClearButton: false,
+            hideCloseButton: false,
+            onToggleSidebar: () => setSidebarOpenState((prev) => !prev),
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath: `${treePath} slideout`,
+        },
+        Results: {
             // default props
-            resultComponent: resultComponent }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        NoResults: __assign(__assign({}, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        Slideout: __assign(__assign({ 
+            resultComponent: resultComponent,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        NoResults: {
             // default props
-            width: props.sidebarWidth, internalClassName: "".concat(classNamePrefix, "__slideout"), onChange: function (active) { return setSidebarOpenState(active); } }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        Slideout: {
+            // default props
+            width: props.sidebarWidth,
+            internalClassName: `${classNamePrefix}__slideout`,
+            onChange: (active) => setSidebarOpenState(active),
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)(classNamePrefix, className, internalClassName, sidebarOpenState ? "".concat(classNamePrefix, "--sidebar-open") : ''), children: [(0, jsx_runtime_1.jsx)("div", { className: "".concat(classNamePrefix, "__header-section"), children: !hideTopToolbar && (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, __assign({}, subProps.TopToolbar, { controller: controller })) }), (0, jsx_runtime_1.jsxs)("div", { className: "".concat(classNamePrefix, "__main-section"), children: [!hideSidebar &&
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)(classNamePrefix, className, internalClassName, sidebarOpenState ? `${classNamePrefix}--sidebar-open` : ''), children: [(0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__header-section`, children: !hideTopToolbar && (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { ...subProps.TopToolbar, controller: controller }) }), (0, jsx_runtime_1.jsxs)("div", { className: `${classNamePrefix}__main-section`, children: [!hideSidebar &&
                             store.loaded &&
                             store.pagination.totalResults > 0 &&
-                            (isMobile ? ((0, jsx_runtime_1.jsx)(Slideout_1.Slideout, __assign({}, subProps.Slideout, { active: justTransitionedToMobile ? false : sidebarOpenState, children: (0, jsx_runtime_1.jsx)("div", { className: "".concat(classNamePrefix, "__sidebar"), children: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, __assign({}, subProps.MobileSidebar, { controller: controller })) }) }))) : sidebarOpenState ? ((0, jsx_runtime_1.jsx)("div", { className: "".concat(classNamePrefix, "__sidebar"), children: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, __assign({}, subProps.Sidebar, { controller: controller })) })) : null), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("".concat(classNamePrefix, "__content")), children: [!hideMiddleToolbar && (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, __assign({}, subProps.MiddleToolbar, { controller: controller })), store.pagination.totalResults ? ((0, jsx_runtime_1.jsx)(Results_1.Results, __assign({}, subProps.Results, { controller: controller }))) : (store.pagination.totalResults === 0 && (0, jsx_runtime_1.jsx)(NoResults_1.NoResults, __assign({}, subProps.NoResults, { controller: controller }))), !hideBottomToolbar && (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, __assign({}, subProps.BottomToolbar, { controller: controller }))] })] })] })) }));
+                            (isMobile ? ((0, jsx_runtime_1.jsx)(Slideout_1.Slideout, { ...subProps.Slideout, active: justTransitionedToMobile ? false : sidebarOpenState, children: (0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__sidebar`, children: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { ...subProps.MobileSidebar, controller: controller }) }) })) : sidebarOpenState ? ((0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__sidebar`, children: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { ...subProps.Sidebar, controller: controller }) })) : null), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(`${classNamePrefix}__content`), children: [!hideMiddleToolbar && (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { ...subProps.MiddleToolbar, controller: controller }), store.pagination.totalResults ? ((0, jsx_runtime_1.jsx)(Results_1.Results, { ...subProps.Results, controller: controller })) : (store.pagination.totalResults === 0 && (0, jsx_runtime_1.jsx)(NoResults_1.NoResults, { ...subProps.NoResults, controller: controller })), !hideBottomToolbar && (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { ...subProps.BottomToolbar, controller: controller })] })] })] }) }));
 });

package/dist/cjs/components/src/components/Templates/SearchCollapsible/SearchCollapsible.js

@@ -1,21 +1,10 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchCollapsible = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var Search_1 = require("../Search/Search");
-exports.SearchCollapsible = (0, mobx_react_lite_1.observer)(function (properties) {
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(Search_1.Search, __assign({}, properties, { alias: "searchCollapsible" })) }));
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const Search_1 = require("../Search/Search");
+exports.SearchCollapsible = (0, mobx_react_lite_1.observer)((properties) => {
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(Search_1.Search, { ...properties, alias: "searchCollapsible" }) }));
 });