@athoscommerce/snap-preact 1.9.1 → 1.10.1-beta.150

package/dist/cjs/components/src/hooks/useCreateController.js

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCreateController = void 0;
-var hooks_1 = require("preact/hooks");
-var useCreateController = function (snap, type, config) {
-    var _a = (0, hooks_1.useState)(undefined), controller = _a[0], setController = _a[1];
-    (0, hooks_1.useEffect)(function () {
+const hooks_1 = require("preact/hooks");
+const useCreateController = (snap, type, config) => {
+    const [controller, setController] = (0, hooks_1.useState)(undefined);
+    (0, hooks_1.useEffect)(() => {
         // check if the controller already exists, and use that if it does, otherwise create one
         snap
             .getController(config.id)
-            .then(function (controller) {
+            .then((controller) => {
             setController(controller);
         })
-            .catch(function () {
-            snap.createController(type, config).then(function (controller) {
+            .catch(() => {
+            snap.createController(type, config).then((controller) => {
                 setController(controller);
             });
         });

package/dist/cjs/components/src/hooks/useCustomComponentOverride.js

@@ -1,31 +1,19 @@
 "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.useCustomComponentOverride = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var providers_1 = require("../providers");
-var useComponent_1 = require("./useComponent");
-var useCustomComponentOverride = function (componentKey, props) {
-    var _a, _b;
-    var snap = (0, providers_1.useSnap)();
-    var map = (((_b = (_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component) === null || _b === void 0 ? void 0 : _b[componentKey]) || {});
-    var customComponent = props.customComponent;
-    var _c = (0, useComponent_1.useComponent)(map, customComponent), ComponentOverride = _c.ComponentOverride, shouldWaitForNamedOverride = _c.shouldWaitForNamedOverride;
-    var overrideElement = customComponent && ComponentOverride ? (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props, { customComponent: undefined })) : null;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const providers_1 = require("../providers");
+const useComponent_1 = require("./useComponent");
+const useCustomComponentOverride = (componentKey, props) => {
+    const snap = (0, providers_1.useSnap)();
+    const map = (snap?.templates?.library.import.component?.[componentKey] || {});
+    const { customComponent } = props;
+    const { ComponentOverride, shouldWaitForNamedOverride } = (0, useComponent_1.useComponent)(map, customComponent);
+    const overrideElement = customComponent && ComponentOverride ? (0, jsx_runtime_1.jsx)(ComponentOverride, { ...props, customComponent: undefined }) : null;
     return {
-        overrideElement: overrideElement,
+        overrideElement,
         shouldRenderDefault: !shouldWaitForNamedOverride && !overrideElement,
-        shouldWaitForNamedOverride: shouldWaitForNamedOverride,
+        shouldWaitForNamedOverride,
     };
 };
 exports.useCustomComponentOverride = useCustomComponentOverride;

package/dist/cjs/components/src/hooks/useDeepCompareEffect.js

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDeepCompareMemoize = useDeepCompareMemoize;
 exports.useDeepCompareEffect = useDeepCompareEffect;
-var hooks_1 = require("preact/hooks");
-var dequal_1 = require("dequal");
+const hooks_1 = require("preact/hooks");
+const dequal_1 = require("dequal");
 function useDeepCompareMemoize(value) {
-    var ref = (0, hooks_1.useRef)(value);
-    var signalRef = (0, hooks_1.useRef)(0);
+    const ref = (0, hooks_1.useRef)(value);
+    const signalRef = (0, hooks_1.useRef)(0);
     if (!(0, dequal_1.dequal)(value, ref.current)) {
         ref.current = value;
         signalRef.current += 1;
     }
-    return (0, hooks_1.useMemo)(function () { return ref.current; }, [signalRef.current]);
+    return (0, hooks_1.useMemo)(() => ref.current, [signalRef.current]);
 }
 function useDeepCompareEffect(callback, dependencies) {
     return (0, hooks_1.useEffect)(callback, [useDeepCompareMemoize(dependencies)]);

package/dist/cjs/components/src/hooks/useDisplaySettings.js

@@ -2,62 +2,59 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDisplaySettings = void 0;
 exports.useDisplaySettings = useDisplaySettings;
-var hooks_1 = require("preact/hooks");
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var useDeepCompareEffect_1 = require("./useDeepCompareEffect");
+const hooks_1 = require("preact/hooks");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const useDeepCompareEffect_1 = require("./useDeepCompareEffect");
 function useDisplaySettings(breakpointsObj) {
     if (!breakpointsObj || !Object.keys(breakpointsObj).length)
         return;
     // Call getDisplaySettings right away to prevent flashing
-    var _a = (0, hooks_1.useState)((0, exports.getDisplaySettings)(breakpointsObj)), displaySettings = _a[0], setDisplaySettings = _a[1];
-    var debouncedHandleResize;
-    var resetResizeListener = function () {
+    const [displaySettings, setDisplaySettings] = (0, hooks_1.useState)((0, exports.getDisplaySettings)(breakpointsObj));
+    let debouncedHandleResize;
+    const resetResizeListener = () => {
         function handleResize() {
             // Set display settings to state
             setDisplaySettings((0, exports.getDisplaySettings)(breakpointsObj));
         }
         // Add event listener
-        debouncedHandleResize = (0, snap_toolbox_1.debounce)(function () {
+        debouncedHandleResize = (0, snap_toolbox_1.debounce)(() => {
             handleResize();
         }, 50);
         window.addEventListener('resize', debouncedHandleResize);
     };
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         resetResizeListener();
         // Remove event listener on cleanup
-        return function () { return window.removeEventListener('resize', debouncedHandleResize); };
+        return () => window.removeEventListener('resize', debouncedHandleResize);
     }, []);
     // when breakpointsObj changes (due to computed values)
-    (0, useDeepCompareEffect_1.useDeepCompareEffect)(function () {
+    (0, useDeepCompareEffect_1.useDeepCompareEffect)(() => {
         setDisplaySettings((0, exports.getDisplaySettings)(breakpointsObj));
         resetResizeListener();
     }, [breakpointsObj]);
     return displaySettings;
 }
-var getDisplaySettings = function (breakpoints) {
-    var breakpointsSettings;
-    var currentScreenWidth = window.innerWidth;
-    var sortedList = Object.keys(breakpoints)
-        .map(function (str) { return +str; })
-        .sort(function (a, b) { return a - b; })
-        .map(function (vp) {
-        var _a;
-        return (_a = {}, _a[vp] = breakpoints[vp], _a);
-    });
+const getDisplaySettings = (breakpoints) => {
+    let breakpointsSettings;
+    const currentScreenWidth = window.innerWidth;
+    const sortedList = Object.keys(breakpoints)
+        .map((str) => +str)
+        .sort((a, b) => a - b)
+        .map((vp) => ({ [vp]: breakpoints[vp] }));
     if (sortedList.length) {
         //loop through and find the desired breakpoints setting
-        for (var i = 0; i < sortedList.length; i++) {
-            var entry = sortedList[i];
-            var breakpoint = parseInt(Object.keys(entry)[0]);
-            var isLastEntry = i + 1 === sortedList.length;
-            var isFirstEntry = i === 0;
+        for (let i = 0; i < sortedList.length; i++) {
+            const entry = sortedList[i];
+            const breakpoint = parseInt(Object.keys(entry)[0]);
+            const isLastEntry = i + 1 === sortedList.length;
+            const isFirstEntry = i === 0;
             if (isLastEntry || (isFirstEntry && currentScreenWidth < breakpoint)) {
                 // last entry or a '0' value breakpoint was not provided
                 breakpointsSettings = sortedList[i][breakpoint];
                 break;
             }
             else {
-                var nextBreakpoint = parseInt(Object.keys(sortedList[i + 1])[0]);
+                const nextBreakpoint = parseInt(Object.keys(sortedList[i + 1])[0]);
                 if (currentScreenWidth >= breakpoint && currentScreenWidth < nextBreakpoint) {
                     breakpointsSettings = sortedList[i][breakpoint];
                     break;

package/dist/cjs/components/src/hooks/useFuncDebounce.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFuncDebounce = void 0;
-var hooks_1 = require("preact/hooks");
-var useFuncDebounce = function (func, delay) {
+const hooks_1 = require("preact/hooks");
+const useFuncDebounce = (func, delay) => {
     // Use a ref to store the function
-    var funcRef = (0, hooks_1.useRef)(func);
+    const funcRef = (0, hooks_1.useRef)(func);
     funcRef.current = func;
-    (0, hooks_1.useEffect)(function () {
-        var handler = setTimeout(function () {
+    (0, hooks_1.useEffect)(() => {
+        const handler = setTimeout(() => {
             funcRef.current();
         }, delay);
-        return function () {
+        return () => {
             clearTimeout(handler);
         };
     }, [func, delay]); // re-call effect if func or delay changes

package/dist/cjs/components/src/hooks/useIntersection.js

@@ -1,27 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIntersection = void 0;
-var hooks_1 = require("preact/hooks");
-var useIntersection = function (ref, rootMargin, fireOnce) {
-    if (rootMargin === void 0) { rootMargin = '0px'; }
-    if (fireOnce === void 0) { fireOnce = false; }
+const hooks_1 = require("preact/hooks");
+const useIntersection = (ref, rootMargin = '0px', fireOnce = false) => {
     // State and setter for storing whether element is visible
-    var _a = (0, hooks_1.useState)(false), isIntersecting = _a[0], setIntersecting = _a[1];
-    (0, hooks_1.useEffect)(function () {
-        var observer = new IntersectionObserver(function (_a) {
-            var entry = _a[0];
+    const [isIntersecting, setIntersecting] = (0, hooks_1.useState)(false);
+    (0, hooks_1.useEffect)(() => {
+        const observer = new IntersectionObserver(([entry]) => {
             // Update our state when observer callback fires
             setIntersecting(entry.isIntersecting);
             if (fireOnce && entry.isIntersecting) {
                 observer.unobserve(ref.current);
             }
         }, {
-            rootMargin: rootMargin,
+            rootMargin,
         });
         if (ref.current) {
             observer.observe(ref.current);
         }
-        return function () {
+        return () => {
             observer.unobserve(ref.current);
         };
     }, []); // Empty array ensures that effect is only run on mount and unmount

package/dist/cjs/components/src/hooks/useIntersectionAdvanced.js

@@ -1,36 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIntersectionAdvanced = void 0;
-var hooks_1 = require("preact/hooks");
-var VISIBILITY_POLL_INTERVAL = 250;
-var useIntersectionAdvanced = function (ref, options) {
-    if (options === void 0) { options = {}; }
-    var _a = options.rootMargin, rootMargin = _a === void 0 ? '0px' : _a, _b = options.fireOnce, fireOnce = _b === void 0 ? false : _b, _c = options.threshold, threshold = _c === void 0 ? 0 : _c, _d = options.minVisibleTime, minVisibleTime = _d === void 0 ? 0 : _d;
+const hooks_1 = require("preact/hooks");
+const VISIBILITY_POLL_INTERVAL = 250;
+const useIntersectionAdvanced = (ref, options = {}) => {
+    const { rootMargin = '0px', fireOnce = false, threshold = 0, minVisibleTime = 0 } = options;
     // State and setter for storing whether element is visible
-    var _e = (0, hooks_1.useState)(false), isIntersecting = _e[0], setIntersecting = _e[1];
+    const [isIntersecting, setIntersecting] = (0, hooks_1.useState)(false);
     // Timer reference to track visibility duration
-    var visibleTimerRef = (0, hooks_1.useRef)(null);
+    const visibleTimerRef = (0, hooks_1.useRef)(null);
     // Track when the element started being visible
-    var visibleStartRef = (0, hooks_1.useRef)(null);
-    var _f = (0, hooks_1.useState)(0), counter = _f[0], setCounter = _f[1];
-    var updateRef = (0, hooks_1.useCallback)(function (el) {
+    const visibleStartRef = (0, hooks_1.useRef)(null);
+    const [counter, setCounter] = (0, hooks_1.useState)(0);
+    const updateRef = (0, hooks_1.useCallback)((el) => {
         ref.current = el;
-        setCounter(function (c) { return c + 1; });
+        setCounter((c) => c + 1);
     }, []);
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         setIntersecting(false);
-        var observer = null;
-        var pollInterval = null;
+        let observer = null;
+        let pollInterval = null;
         if (!window.IntersectionObserver || !ref.current) {
             return;
         }
-        var clearPoll = function () {
+        const clearPoll = () => {
             if (pollInterval) {
                 window.clearInterval(pollInterval);
                 pollInterval = null;
             }
         };
-        var handleVisible = function () {
+        const handleVisible = () => {
             // Start tracking visibility time if minVisibleTime is set
             if (minVisibleTime > 0) {
                 visibleStartRef.current = Date.now();
@@ -39,7 +38,7 @@ var useIntersectionAdvanced = function (ref, options) {
                     window.clearTimeout(visibleTimerRef.current);
                 }
                 // Set up a timer for the minimum visibility duration
-                visibleTimerRef.current = window.setTimeout(function () {
+                visibleTimerRef.current = window.setTimeout(() => {
                     setIntersecting(true);
                     if (fireOnce && ref.current && observer) {
                         observer.unobserve(ref.current);
@@ -54,7 +53,7 @@ var useIntersectionAdvanced = function (ref, options) {
                 }
             }
         };
-        var handleHidden = function () {
+        const handleHidden = () => {
             // Element is no longer visible
             if (visibleTimerRef.current) {
                 // Clear the timer if element goes out of view before minimum time
@@ -64,8 +63,7 @@ var useIntersectionAdvanced = function (ref, options) {
             visibleStartRef.current = null;
             setIntersecting(false);
         };
-        observer = new IntersectionObserver(function (_a) {
-            var entry = _a[0];
+        observer = new IntersectionObserver(([entry]) => {
             if (entry.isIntersecting) {
                 if (ref.current && elementIsVisible(ref.current)) {
                     clearPoll();
@@ -76,7 +74,7 @@ var useIntersectionAdvanced = function (ref, options) {
                     // Treat as hidden but start polling for visibility
                     handleHidden();
                     if (!pollInterval) {
-                        pollInterval = window.setInterval(function () {
+                        pollInterval = window.setInterval(() => {
                             if (!ref.current) {
                                 clearPoll();
                                 return;
@@ -95,13 +93,13 @@ var useIntersectionAdvanced = function (ref, options) {
                 handleHidden();
             }
         }, {
-            rootMargin: rootMargin,
-            threshold: threshold,
+            rootMargin,
+            threshold,
         });
         if (ref.current) {
             observer.observe(ref.current);
         }
-        return function () {
+        return () => {
             setIntersecting(false);
             clearPoll();
             if (visibleTimerRef.current) {
@@ -113,7 +111,7 @@ var useIntersectionAdvanced = function (ref, options) {
             }
         };
     }, [ref, counter]);
-    return { inViewport: isIntersecting, updateRef: updateRef };
+    return { inViewport: isIntersecting, updateRef };
 };
 exports.useIntersectionAdvanced = useIntersectionAdvanced;
 function elementIsVisible(el) {

package/dist/cjs/components/src/hooks/useLang.js

@@ -1,29 +1,18 @@
 "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.useLang = void 0;
-var useLang = function (lang, data) {
-    var returnObj = {};
-    Object.keys(lang).forEach(function (key) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        var currentLangSettings = lang && lang[key];
-        var currentObj = {};
+const useLang = (lang, data, additionalData) => {
+    const enrichedData = additionalData ? { ...data, ...additionalData } : data;
+    const returnObj = {};
+    Object.keys(lang).forEach((key) => {
+        const currentLangSettings = lang && lang[key];
+        const currentObj = {};
         if (currentLangSettings) {
-            if (currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.value) {
+            if (currentLangSettings?.value) {
                 if (typeof currentLangSettings.value == 'function') {
                     currentObj.value = {
                         'ss-lang': key,
-                        dangerouslySetInnerHTML: { __html: currentLangSettings.value(data) },
+                        dangerouslySetInnerHTML: { __html: currentLangSettings.value(enrichedData) },
                     };
                 }
                 else {
@@ -33,52 +22,56 @@ var useLang = function (lang, data) {
                     };
                 }
             }
-            if ((currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes) && Object.keys(currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes).length) {
+            if (currentLangSettings?.attributes && Object.keys(currentLangSettings?.attributes).length) {
                 currentObj.attributes = {
                     'ss-lang': key,
                 };
-                if ((_a = currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes) === null || _a === void 0 ? void 0 : _a['aria-label']) {
-                    if (typeof ((_b = currentLangSettings.attributes) === null || _b === void 0 ? void 0 : _b['aria-label']) == 'function') {
-                        currentObj.attributes['aria-label'] = currentLangSettings.attributes['aria-label'](data);
+                if (currentLangSettings?.attributes?.['aria-label']) {
+                    if (typeof currentLangSettings.attributes?.['aria-label'] == 'function') {
+                        currentObj.attributes['aria-label'] = currentLangSettings.attributes['aria-label'](enrichedData);
                     }
                     else {
                         currentObj.attributes['aria-label'] = currentLangSettings.attributes['aria-label'];
                     }
                 }
-                if ((_c = currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes) === null || _c === void 0 ? void 0 : _c['aria-valuetext']) {
-                    if (typeof ((_d = currentLangSettings.attributes) === null || _d === void 0 ? void 0 : _d['aria-valuetext']) == 'function') {
-                        currentObj.attributes['aria-valuetext'] = currentLangSettings.attributes['aria-valuetext'](data);
+                if (currentLangSettings?.attributes?.['aria-valuetext']) {
+                    if (typeof currentLangSettings.attributes?.['aria-valuetext'] == 'function') {
+                        currentObj.attributes['aria-valuetext'] = currentLangSettings.attributes['aria-valuetext'](enrichedData);
                     }
                     else {
                         currentObj.attributes['aria-valuetext'] = currentLangSettings.attributes['aria-valuetext'];
                     }
                 }
-                if ((_e = currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes) === null || _e === void 0 ? void 0 : _e.title) {
-                    if (typeof ((_f = currentLangSettings.attributes) === null || _f === void 0 ? void 0 : _f.title) == 'function') {
-                        currentObj.attributes['title'] = currentLangSettings.attributes['title'](data);
+                if (currentLangSettings?.attributes?.title) {
+                    if (typeof currentLangSettings.attributes?.title == 'function') {
+                        currentObj.attributes['title'] = currentLangSettings.attributes['title'](enrichedData);
                     }
                     else {
                         currentObj.attributes['title'] = currentLangSettings.attributes['title'];
                     }
                 }
-                if ((_g = currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes) === null || _g === void 0 ? void 0 : _g.alt) {
-                    if (typeof ((_h = currentLangSettings.attributes) === null || _h === void 0 ? void 0 : _h.alt) == 'function') {
-                        currentObj.attributes['alt'] = currentLangSettings.attributes['alt'](data);
+                if (currentLangSettings?.attributes?.alt) {
+                    if (typeof currentLangSettings.attributes?.alt == 'function') {
+                        currentObj.attributes['alt'] = currentLangSettings.attributes['alt'](enrichedData);
                     }
                     else {
                         currentObj.attributes['alt'] = currentLangSettings.attributes['alt'];
                     }
                 }
-                if ((_j = currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes) === null || _j === void 0 ? void 0 : _j.placeholder) {
-                    if (typeof ((_k = currentLangSettings.attributes) === null || _k === void 0 ? void 0 : _k.placeholder) == 'function') {
-                        currentObj.attributes['placeholder'] = currentLangSettings.attributes['placeholder'](data);
+                if (currentLangSettings?.attributes?.placeholder) {
+                    if (typeof currentLangSettings.attributes?.placeholder == 'function') {
+                        currentObj.attributes['placeholder'] = currentLangSettings.attributes['placeholder'](enrichedData);
                     }
                     else {
                         currentObj.attributes['placeholder'] = currentLangSettings.attributes['placeholder'];
                     }
                 }
             }
-            currentObj.all = __assign(__assign(__assign({}, currentObj.value), currentObj.attributes), { 'ss-lang': key });
+            currentObj.all = {
+                ...currentObj.value,
+                ...currentObj.attributes,
+                'ss-lang': key,
+            };
         }
         returnObj[key] = currentObj;
     });

package/dist/cjs/components/src/hooks/useLayoutOptions.js

@@ -1,29 +1,18 @@
 "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.useLayoutOptions = void 0;
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var useControllerStorage_1 = require("./useControllerStorage");
-var useLayoutOptions = function (props, globalTheme) {
-    var layoutOptions = (props === null || props === void 0 ? void 0 : props.layoutOptions) || [];
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const useControllerStorage_1 = require("./useControllerStorage");
+const useLayoutOptions = (props, globalTheme) => {
+    const layoutOptions = props?.layoutOptions || [];
     // Note: only store serializable identifiers (value/label) to avoid JSON.stringify failures
     // on option objects that may contain JSX (e.g. icon: { children: <span>...</span> })
     // verify selectedLayout is in layoutOptions - if not set it to the default one
     // Note: JSON.stringify is avoided here because option objects may contain JSX (non-serializable) values
-    var isSameOption = function (a, b) {
+    const isSameOption = (a, b) => {
         if (!a || !b)
             return false;
         if (a.value !== undefined && b.value !== undefined)
@@ -32,60 +21,62 @@ var useLayoutOptions = function (props, globalTheme) {
             return a.label === b.label;
         return false;
     };
-    var toStorable = function (option) { return (option ? { value: option.value, label: option.label } : option); };
+    const toStorable = (option) => (option ? { value: option.value, label: option.label } : option);
     // handle layoutOptions and selected option — store only serializable identifiers
     // Always call useControllerStorage to preserve hook order across renders
-    var _a = (0, useControllerStorage_1.useControllerStorage)(props.controller, 'layoutOptions', toStorable(layoutOptions.filter(function (option) { return option.default; }).pop())), storedSelection = _a[0], setStoredSelection = _a[1];
+    const [storedSelection, setStoredSelection] = (0, useControllerStorage_1.useControllerStorage)(props.controller, 'layoutOptions', toStorable(layoutOptions.filter((option) => option.default).pop()));
     // Early return if no layoutOptions - hooks have already been called above
     if (!layoutOptions.length) {
         return;
     }
     // Resolve the stored identifier back to the full option object (which may contain JSX)
-    var selectedLayout = layoutOptions.find(function (option) { return isSameOption(option, storedSelection); });
+    const selectedLayout = layoutOptions.find((option) => isSameOption(option, storedSelection));
     // verify storedSelection is in layoutOptions - if not reset to the default
     if (storedSelection && !selectedLayout) {
-        setStoredSelection(toStorable(layoutOptions.filter(function (option) { return option.default; }).pop()));
+        setStoredSelection(toStorable(layoutOptions.filter((option) => option.default).pop()));
     }
     props.theme = props.theme || {};
-    props.theme.components = __assign(__assign({}, (props.theme.components || {})), { layoutSelector: {
+    props.theme.components = {
+        ...(props.theme.components || {}),
+        layoutSelector: {
             options: layoutOptions,
-            onSelect: function (e, option) {
+            onSelect: (e, option) => {
                 if (option) {
                     setStoredSelection(toStorable(option));
                 }
             },
             selected: selectedLayout,
-        } });
-    var shouldUseOverrides = false;
+        },
+    };
+    let shouldUseOverrides = false;
     if (globalTheme.components && props.treePath) {
         // pull out the template (top level parent) component from the treePath to use in filtering out globalTheme overrides
-        var templateComponent_1 = props.treePath.split(' ')[0];
+        const templateComponent = props.treePath.split(' ')[0];
         // we only want to use overrides if one of the toolbars is actually rendering the layoutSelector
-        Object.keys(globalTheme.components).forEach(function (key) {
-            var _a;
-            var paths = key.split(' ');
-            var componentTypeAndName = (_a = paths.splice(-1).pop()) !== null && _a !== void 0 ? _a : '';
-            var componentType = componentTypeAndName.split('.')[0];
+        Object.keys(globalTheme.components).forEach((key) => {
+            const paths = key.split(' ');
+            const componentTypeAndName = paths.splice(-1).pop() ?? '';
+            const [componentType] = componentTypeAndName.split('.');
             if (globalTheme.components &&
                 componentType == 'toolbar' &&
-                (paths[0] == templateComponent_1 ||
-                    paths[0] == "*".concat(templateComponent_1) ||
-                    paths[0] == "*(M)".concat(templateComponent_1) ||
-                    paths[0] == "*(T)".concat(templateComponent_1) ||
-                    paths[0] == "*(D)".concat(templateComponent_1) ||
-                    paths[0] == "(M)".concat(templateComponent_1) ||
-                    paths[0] == "(T)".concat(templateComponent_1) ||
-                    paths[0] == "(D)".concat(templateComponent_1) ||
+                (paths[0] == templateComponent ||
+                    paths[0] == `*${templateComponent}` ||
+                    paths[0] == `*(M)${templateComponent}` ||
+                    paths[0] == `*(T)${templateComponent}` ||
+                    paths[0] == `*(D)${templateComponent}` ||
+                    paths[0] == `(M)${templateComponent}` ||
+                    paths[0] == `(T)${templateComponent}` ||
+                    paths[0] == `(D)${templateComponent}` ||
                     !paths.length)) {
-                var toolbarConfig = globalTheme.components[key];
-                if ((toolbarConfig === null || toolbarConfig === void 0 ? void 0 : toolbarConfig.layout) && toolbarConfig.layout.toString().indexOf('layoutSelector') > -1) {
+                const toolbarConfig = globalTheme.components[key];
+                if (toolbarConfig?.layout && toolbarConfig.layout.toString().indexOf('layoutSelector') > -1) {
                     shouldUseOverrides = true;
                 }
             }
         });
     }
     // grab overrides out of the "selected" or default layoutOptions and merge it in
-    if ((selectedLayout === null || selectedLayout === void 0 ? void 0 : selectedLayout.overrides) && shouldUseOverrides) {
+    if (selectedLayout?.overrides && shouldUseOverrides) {
         props.theme = (0, deepmerge_1.default)(props.theme, { components: selectedLayout.overrides.components });
     }
 };

package/dist/cjs/components/src/hooks/useMediaQuery.js

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMediaQuery = useMediaQuery;
-var hooks_1 = require("preact/hooks");
+const hooks_1 = require("preact/hooks");
 function useMediaQuery(query, runOnCleanup) {
     if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined')
         return false;
-    var mediaQuery = window.matchMedia(query);
-    var _a = (0, hooks_1.useState)(!!mediaQuery.matches), match = _a[0], setMatch = _a[1];
-    (0, hooks_1.useEffect)(function () {
+    const mediaQuery = window.matchMedia(query);
+    const [match, setMatch] = (0, hooks_1.useState)(!!mediaQuery.matches);
+    (0, hooks_1.useEffect)(() => {
         // sync state immediately in case query changed
         setMatch(!!mediaQuery.matches);
-        var handler = function () { return setMatch(!!mediaQuery.matches); };
+        const handler = () => setMatch(!!mediaQuery.matches);
         mediaQuery.addListener(handler);
-        return function () {
+        return () => {
             runOnCleanup instanceof Function && runOnCleanup();
             mediaQuery.removeListener(handler);
         };