@athoscommerce/snap-preact 1.12.0 → 1.13.0

package/dist/cjs/components/src/components/Atoms/Price/Price.js

@@ -35,7 +35,7 @@ exports.Price = (0, mobx_react_lite_1.observer)((properties) => {
         treePath: globalTreePath,
     };
     const props = (0, utilities_1.mergeProps)('price', globalTheme, defaultProps, properties);
-    const { lineThrough, value, format, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, raw, className, internalClassName, } = props;
+    const { lineThrough, value, format, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, code, showCode, raw, className, internalClassName, } = props;
     const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('price', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -54,7 +54,7 @@ exports.Price = (0, mobx_react_lite_1.observer)((properties) => {
     }
     const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     if (formattedPrice) {
-        return raw ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedPrice })) : ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("span", { ...styling, className: (0, classnames_1.default)('ss__price', { 'ss__price--strike': lineThrough }, className, internalClassName), children: [!format && symbol && !symbolAfter ? (0, jsx_runtime_1.jsx)("span", { className: 'ss__price__symbol', children: symbol }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), (0, jsx_runtime_1.jsx)("span", { className: 'ss__price__value', children: formattedPrice }), !format && symbol && symbolAfter ? (0, jsx_runtime_1.jsx)("span", { className: 'ss__price__symbol', children: symbol }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] }) }));
+        return raw ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedPrice })) : ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("span", { ...styling, className: (0, classnames_1.default)('ss__price', { 'ss__price--strike': lineThrough }, className, internalClassName), children: [!format && symbol && !symbolAfter ? (0, jsx_runtime_1.jsx)("span", { className: 'ss__price__symbol', children: symbol }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), (0, jsx_runtime_1.jsx)("span", { className: 'ss__price__value', children: formattedPrice }), !format && symbol && symbolAfter ? (0, jsx_runtime_1.jsx)("span", { className: 'ss__price__symbol', children: symbol }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), !format && showCode && code ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ['\u00A0', (0, jsx_runtime_1.jsx)("span", { className: 'ss__price__code', children: code })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))] }) }));
     }
     else {
         return null;

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

@@ -21,5 +21,5 @@ exports.CustomComponentWrapper = (0, mobx_react_lite_1.observer)((properties) =>
     const { children } = props;
     const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     const path = styling['ss-path'];
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, children: (0, utilities_1.cloneWithProps)(children, { treePath: path, theme: globalTheme }) }) }));
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, children: (0, utilities_1.cloneWithProps)(children, { treePath: path, theme: props.theme }) }) }));
 });

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

@@ -15,8 +15,6 @@ const Image_1 = require("../../Atoms/Image");
 const Button_1 = require("../../Atoms/Button");
 const hooks_2 = require("../../../hooks");
 const deepmerge_1 = __importDefault(require("deepmerge"));
-// Pointer travel (px) past which a press is treated as a drag rather than a click.
-const DRAG_CLICK_THRESHOLD = 5;
 const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayNavigation = false, showNavigation }) => {
     return (0, react_1.css)({
         position: 'relative',
@@ -61,8 +59,10 @@ const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayN
                 height: '100%',
                 objectFit: 'cover',
                 display: 'block',
-                // Prevent image dragging
+                // pointer-events:none isn't fully reliable for blocking native image drag
+                // this plus draggable={false} below covers all browsers
                 pointerEvents: 'none',
+                WebkitUserDrag: 'none',
             },
         },
         '.ss__slideshow__slide--content': {
@@ -75,10 +75,6 @@ const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayN
         },
         '.ss__slideshow__slide--clickable': {
             cursor: 'pointer',
-            '&:hover img': {
-                opacity: 0.9,
-                transition: 'opacity 0.2s ease',
-            },
             '&:focus-visible': {
                 outline: '2px solid #005fcc',
                 outlineOffset: '2px',
@@ -168,9 +164,10 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
         ariaLabel: 'slideshow',
         touchDragging: true,
         dragThreshold: 50,
+        dragClickThreshold: 10,
     };
     const props = (0, utilities_1.mergeProps)('slideshow', globalTheme, defaultProps, properties);
-    const { className, slides, fallbackImage, autoPlay, autoPlayInterval, showNavigation, showPagination, loop, alwaysShowNavigation, slidesToShow, slideImageAlt, centerInsufficientSlides, ariaLabel, ariaLabelledBy, disableStyles, slideWidth, startIndex, gap, treePath, overlayNavigation, dragThreshold, } = props;
+    const { className, slides, fallbackImage, autoPlay, autoPlayInterval, showNavigation, showPagination, loop, alwaysShowNavigation, slidesToShow, slideImageAlt, centerInsufficientSlides, ariaLabel, ariaLabelledBy, disableStyles, slideWidth, startIndex, gap, treePath, overlayNavigation, dragThreshold, dragClickThreshold, } = props;
     const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('slideshow', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -180,6 +177,9 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
         Image: {
             // default props
             fallback: fallbackImage,
+            // images are draggable by default in every browser
+            // a native image drag can hijack our custom drag and eat the mouseup
+            draggable: false,
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -272,9 +272,17 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
     }, []);
     // Touch/Drag state
     const [isDragging, setIsDragging] = (0, hooks_1.useState)(false);
-    const [startX, setStartX] = (0, hooks_1.useState)(0);
-    const [currentX, setCurrentX] = (0, hooks_1.useState)(0);
+    // refs, not state - only read inside the drag handlers, never in render
+    // the document mouseup listener below is bound once per drag, so its closure goes stale
+    // refs stay current even from that stale closure, state would not
+    const startXRef = (0, hooks_1.useRef)(0);
+    const currentXRef = (0, hooks_1.useRef)(0);
     const [dragOffset, setDragOffset] = (0, hooks_1.useState)(0);
+    // the track's on-screen translateX (px) captured when the current drag began
+    // starting a drag turns off the CSS transition immediately
+    // without this, interrupting an in-flight transition would snap the track to its target
+    // null means there's no drag in progress
+    const dragBaseTranslatePxRef = (0, hooks_1.useRef)(null);
     // Normalize slides to SlideshowSlide format
     const normalizedSlides = slides.map((slide, index) => {
         if (typeof slide === 'string') {
@@ -366,15 +374,33 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
     if (totalSlides <= visibleSlides) {
         touchDragging = false;
     }
+    // how far you need to drag before it counts as a navigation
+    // smaller of dragThreshold and 30% of a slide's width
+    const getNavigationThreshold = () => {
+        const trackContainerWidth = trackRef.current?.parentElement?.offsetWidth || 0;
+        const slideWidthPx = trackContainerWidth / visibleSlides;
+        return Math.min(dragThreshold, slideWidthPx * 0.3);
+    };
     // Touch/Mouse event handlers for dragging
     const handleDragStart = (clientX) => {
         if (!touchDragging)
             return;
+        // capture the track's actual current position, mid-transition or not
+        // the track has no margin and fills its parent's width
+        // so the gap between their left edges is exactly the current translateX in px
+        dragBaseTranslatePxRef.current = null;
+        if (trackRef.current?.parentElement) {
+            dragBaseTranslatePxRef.current = trackRef.current.getBoundingClientRect().left - trackRef.current.parentElement.getBoundingClientRect().left;
+        }
         hasDraggedRef.current = false;
         setIsPlaying(false);
         setIsDragging(true);
-        setStartX(clientX);
-        setCurrentX(clientX);
+        // a previous drag's mouseup may never have arrived (e.g. a native image drag hijacked it)
+        // that would leave dragOffset stuck from that aborted drag
+        // reset it so this drag always starts clean, not stacked on stale movement
+        setDragOffset(0);
+        startXRef.current = clientX;
+        currentXRef.current = clientX;
         // Pause autoplay during drag
         if (intervalRef.current) {
             clearInterval(intervalRef.current);
@@ -383,11 +409,12 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
     const handleDragMove = (clientX) => {
         if (!isDragging || !touchDragging)
             return;
-        setCurrentX(clientX);
-        const diff = clientX - startX;
-        // Past a few pixels of travel this is a drag, not a click — flag it so the trailing
-        // click (fired after mouseup/touchend) doesn't trigger slide onClick handlers.
-        if (Math.abs(diff) > DRAG_CLICK_THRESHOLD) {
+        currentXRef.current = clientX;
+        const diff = clientX - startXRef.current;
+        // past a few pixels this counts as a drag, not a click
+        // flags it so the trailing click after mouseup doesn't fire onClick
+        // clamped to the nav threshold so a drag big enough to navigate is always flagged
+        if (Math.abs(diff) > Math.min(dragClickThreshold, getNavigationThreshold())) {
             hasDraggedRef.current = true;
         }
         setDragOffset(diff);
@@ -395,10 +422,8 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
     const handleDragEnd = () => {
         if (!isDragging || !touchDragging)
             return;
-        const diff = currentX - startX;
-        const trackContainerWidth = trackRef.current?.parentElement?.offsetWidth || 0;
-        const slideWidthPx = trackContainerWidth / visibleSlides;
-        const threshold = Math.min(dragThreshold, slideWidthPx * 0.3); // 30% of slide width or dragThreshold, whichever is smaller
+        const diff = currentXRef.current - startXRef.current;
+        const threshold = getNavigationThreshold();
         if (Math.abs(diff) > threshold) {
             if (diff > 0 && (loop || currentIndex > 0)) {
                 // Dragged right - go to previous
@@ -411,6 +436,7 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
         }
         setIsDragging(false);
         setDragOffset(0);
+        dragBaseTranslatePxRef.current = null;
         // Resume autoplay if it was playing
         if (isPlaying && normalizedSlides.length > computedSlidesToShow) {
             intervalRef.current = setInterval(() => {
@@ -553,7 +579,13 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
     // Simplified transform calculation
     let translateX;
     let translateUnit;
-    if (slideWidth) {
+    if (isDragging && dragBaseTranslatePxRef.current !== null) {
+        // while dragging, move from the position captured in handleDragStart
+        // not from currentIndex, so an interrupted transition continues smoothly
+        translateX = dragBaseTranslatePxRef.current + dragOffset;
+        translateUnit = 'px';
+    }
+    else if (slideWidth) {
         // Fixed-width mode: translate by pixel amounts (slideWidth + gap per slide)
         const slideStepPx = slideWidth + (gap ?? 0);
         translateX = -(currentIndex * slideStepPx);
@@ -626,20 +658,17 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
                                 handleDragMove(touch.clientX);
                             }
                             : undefined, onTouchEnd: touchDragging ? handleDragEnd : undefined, 
-                        // Mouse events (for desktop dragging)
+                        // mouse events for desktop dragging
+                        // move/up are handled by the document listeners below, not here
+                        // that keeps the drag tracking even if the cursor leaves the track
+                        // and avoids firing handleDragEnd twice on a release over the track
                         // @ts-ignore - mouse events
                         onMouseDown: touchDragging
                             ? (event) => {
                                 event.preventDefault();
                                 handleDragStart(event.clientX);
                             }
-                            : undefined, 
-                        // Mouse events (for desktop dragging)
-                        // @ts-ignore - mouse events
-                        onMouseUp: touchDragging ? handleDragEnd : undefined, 
-                        // Mouse events (for desktop dragging)
-                        // @ts-ignore - mouse events
-                        onMouseMove: touchDragging ? handleMouseMove : undefined, children: normalizedSlides.map((slide, index) => {
+                            : undefined, children: normalizedSlides.map((slide, index) => {
                             const isVisible = index >= currentIndex && index < currentIndex + computedSlidesToShow;
                             const hasClickHandler = !!slide.onClick;
                             const hasContent = !!slide.content;

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

@@ -463,38 +463,42 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
         RecommendationTemplateResultComponent = recs.RecommendationTemplateResultComponent;
         recsController = recs.recsController;
     }
-    const findModule = (module) => {
+    const findModule = (module, rowCounter) => {
         //new row
         if (typeof module !== 'string') {
-            const children = module?.map((subModule) => findModule(subModule));
+            const children = module?.map((subModule) => findModule(subModule, rowCounter));
             const hasContent = module.some((subModule, i) => subModule !== '_' && children[i]);
             if (!hasContent)
                 return null;
-            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__row", children: children });
+            return (0, jsx_runtime_1.jsx)("div", { className: `ss__autocomplete__row ss__autocomplete__row--${rowCounter.value++}`, children: children });
         }
         if (module == 'c1' && column1?.layout?.length) {
-            const children = column1.layout.map((m) => findModule(m));
+            const c1RowCounter = { value: 0 };
+            const children = column1.layout.map((m) => findModule(m, c1RowCounter));
             const hasContent = column1.layout.some((m, i) => (Array.isArray(m) ? Boolean(children[i]) : m !== '_' && Boolean(children[i])));
             if (!hasContent)
                 return null;
             return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c1", children: children });
         }
         if (module == 'c2' && column2?.layout?.length) {
-            const children = column2.layout.map((m) => findModule(m));
+            const c2RowCounter = { value: 0 };
+            const children = column2.layout.map((m) => findModule(m, c2RowCounter));
             const hasContent = column2.layout.some((m, i) => (Array.isArray(m) ? Boolean(children[i]) : m !== '_' && Boolean(children[i])));
             if (!hasContent)
                 return null;
             return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c2", children: children });
         }
         if (module == 'c3' && column3?.layout?.length) {
-            const children = column3.layout.map((m) => findModule(m));
+            const c3RowCounter = { value: 0 };
+            const children = column3.layout.map((m) => findModule(m, c3RowCounter));
             const hasContent = column3.layout.some((m, i) => (Array.isArray(m) ? Boolean(children[i]) : m !== '_' && Boolean(children[i])));
             if (!hasContent)
                 return null;
             return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c3", children: children });
         }
         if (module == 'c4' && column4?.layout?.length) {
-            const children = column4.layout.map((m) => findModule(m));
+            const c4RowCounter = { value: 0 };
+            const children = column4.layout.map((m) => findModule(m, c4RowCounter));
             const hasContent = column4.layout.some((m, i) => (Array.isArray(m) ? Boolean(children[i]) : m !== '_' && Boolean(children[i])));
             if (!hasContent)
                 return null;
@@ -573,8 +577,9 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
         controller.log.warn(`unsupported layout found. ${props.layout}`);
         layout = [];
     }
+    const topRowCounter = { value: 0 };
     /***************************************/
     return visible && layout?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__autocomplete', { 'ss__autocomplete--terms': props.layout === 'terms' }, { 'ss__autocomplete--mobile': props.layout === 'mobile' }, { 'ss__autocomplete--desktop': props.layout === 'desktop' }, { 'ss__autocomplete--tablet': props.layout === 'tablet' }, className, internalClassName), onClick: (e) => e.stopPropagation(), ref: (e) => (0, hooks_2.useA11y)(e, 0, false, onReset), children: [(0, jsx_runtime_1.jsx)("span", { role: 'link', ref: (e) => (0, hooks_2.useA11y)(e), onClick: () => props.onReset && props.onReset(), className: "ss__autocomplete__close-button", style: { position: 'absolute', top: '-10000000px', left: '-1000000px' }, ...mergedLang.closeButton?.all }), layout?.map((module) => {
-                    return findModule(module);
+                    return findModule(module, topRowCounter);
                 })] }) })) : null;
 });

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

@@ -478,38 +478,42 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         })), theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })) : null;
     // Module renderers. Each returns the corresponding region, or null when it has nothing to
     // show (so empty columns/rows collapse). Columns (c1/c2) recurse into their own layouts.
-    const findModule = (module) => {
+    const findModule = (module, rowCounter) => {
         // new row
         if (typeof module !== 'string') {
-            const children = module.map((subModule) => findModule(subModule));
+            const children = module.map((subModule) => findModule(subModule, rowCounter));
             const hasContent = module.some((subModule, i) => subModule !== '_' && children[i]);
             if (!hasContent)
                 return null;
-            return (0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__row", children: children });
+            return (0, jsx_runtime_1.jsx)("div", { className: `ss__quickview__row ss__quickview__row--${rowCounter.value++}`, children: children });
         }
         if (module == 'c1' && column1?.layout?.length) {
-            const children = column1.layout.map((m) => findModule(m));
+            const c1RowCounter = { value: 0 };
+            const children = column1.layout.map((m) => findModule(m, c1RowCounter));
             const hasContent = column1.layout.some((m, i) => (Array.isArray(m) ? Boolean(children[i]) : m !== '_' && Boolean(children[i])));
             if (!hasContent)
                 return null;
             return (0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__column ss__quickview__column--c1", children: children });
         }
         if (module == 'c2' && column2?.layout?.length) {
-            const children = column2.layout.map((m) => findModule(m));
+            const c2RowCounter = { value: 0 };
+            const children = column2.layout.map((m) => findModule(m, c2RowCounter));
             const hasContent = column2.layout.some((m, i) => (Array.isArray(m) ? Boolean(children[i]) : m !== '_' && Boolean(children[i])));
             if (!hasContent)
                 return null;
             return (0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__column ss__quickview__column--c2", children: children });
         }
         if (module == 'c3' && column3?.layout?.length) {
-            const children = column3.layout.map((m) => findModule(m));
+            const c3RowCounter = { value: 0 };
+            const children = column3.layout.map((m) => findModule(m, c3RowCounter));
             const hasContent = column3.layout.some((m, i) => (Array.isArray(m) ? Boolean(children[i]) : m !== '_' && Boolean(children[i])));
             if (!hasContent)
                 return null;
             return (0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__column ss__quickview__column--c3", children: children });
         }
         if (module == 'c4' && column4?.layout?.length) {
-            const children = column4.layout.map((m) => findModule(m));
+            const c4RowCounter = { value: 0 };
+            const children = column4.layout.map((m) => findModule(m, c4RowCounter));
             const hasContent = column4.layout.some((m, i) => (Array.isArray(m) ? Boolean(children[i]) : m !== '_' && Boolean(children[i])));
             if (!hasContent)
                 return null;
@@ -607,6 +611,7 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         quickviewManager.sourceController?.log.warn(`unsupported layout found. ${props.layout}`);
         layout = [];
     }
+    const topRowCounter = { value: 0 };
     const closeButton = ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "close", internalClassName: "ss__quickview__close", icon: "close-thin", lang: { button: lang.closeButton }, onClick: () => onClose(), theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__quickview', className, internalClassName), children: error || loading || product ? ((0, jsx_runtime_1.jsxs)("div", { ...contentProps, children: [closeButton, error ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__error", role: "alert", children: error.message })) : loading ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__loading", ...mergedLang.loadingText?.all })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [layout?.map((module) => findModule(module)), (0, jsx_runtime_1.jsx)(Gallery_1.Gallery, { images: galleryImages, open: galleryOpen, startIndex: galleryIndex, onClose: () => setGalleryOpen(false), alt: name, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }))] })) : null }) }));
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__quickview', className, internalClassName), children: error || loading || product ? ((0, jsx_runtime_1.jsxs)("div", { ...contentProps, children: [closeButton, error ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__error", role: "alert", children: error.message })) : loading ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__loading", ...mergedLang.loadingText?.all })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [layout?.map((module) => findModule(module, topRowCounter)), (0, jsx_runtime_1.jsx)(Gallery_1.Gallery, { images: galleryImages, open: galleryOpen, startIndex: galleryIndex, onClose: () => setGalleryOpen(false), alt: name, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }))] })) : null }) }));
 });

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

@@ -54,20 +54,25 @@ const useLayoutOptions = (props, globalTheme) => {
         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((key) => {
-            const paths = key.split(' ');
-            const componentTypeAndName = paths.splice(-1).pop() ?? '';
-            const [componentType] = componentTypeAndName.split('.');
-            if (globalTheme.components &&
-                componentType == 'toolbar' &&
-                (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)) {
+            // a key may target multiple treepaths as a comma-separated list (see ThemeStore's
+            // prefixComponentKeys/normalizeCommaSeparatedKeys) - it applies if ANY part matches
+            const parts = key.includes(',') ? key.split(/\s*,\s*/) : [key];
+            const matchesToolbar = parts.some((part) => {
+                const paths = part.split(' ');
+                const componentTypeAndName = paths.splice(-1).pop() ?? '';
+                const [componentType] = componentTypeAndName.split('.');
+                return (componentType == 'toolbar' &&
+                    (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));
+            });
+            if (globalTheme.components && matchesToolbar) {
                 const toolbarConfig = globalTheme.components[key];
                 if (toolbarConfig?.layout && toolbarConfig.layout.toString().indexOf('layoutSelector') > -1) {
                     shouldUseOverrides = true;