@athoscommerce/snap-preact 1.11.0 → 1.12.1-beta.152

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

@@ -0,0 +1,298 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Gallery = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const compat_1 = require("preact/compat");
+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 deepmerge_1 = __importDefault(require("deepmerge"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_2 = require("../../../hooks");
+const Button_1 = require("../../Atoms/Button");
+const Image_1 = require("../../Atoms/Image");
+const defaultStyles = () => {
+    return (0, react_1.css)({
+        position: 'fixed',
+        inset: 0,
+        zIndex: 10010, // above the quickview modal content (10006) and the dropdown portal (10007); full ladder in QuickviewModal defaultStyles
+        display: 'flex',
+        flexDirection: 'column',
+        background: 'rgba(0, 0, 0, 0.9)',
+        '& .ss__gallery__toolbar': {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: '8px',
+            padding: '12px 16px',
+        },
+        // button and icon chrome (color, background, border) comes from Button/Icon props (not CSS)
+        // so that theme overrides targeting those components (e.g. `gallery button.zoom-in`) are not
+        // out-specified here — these rules stick to layout the sub-components have no props for
+        '& .ss__gallery__button': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 0,
+            boxSizing: 'border-box',
+            borderRadius: '4px',
+            width: '40px',
+            height: '40px',
+            fontSize: '1.3em',
+            lineHeight: 1,
+            cursor: 'pointer',
+            '&.ss__button--disabled': {
+                opacity: 0.4,
+                cursor: 'default',
+            },
+        },
+        '& .ss__gallery__counter': {
+            color: '#fff',
+            marginRight: 'auto',
+            padding: '0 8px',
+            fontSize: '0.9em',
+        },
+        '& .ss__gallery__stage': {
+            position: 'relative',
+            flex: '1 1 auto',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
+        },
+        '& .ss__gallery__image': {
+            maxWidth: '90vw',
+            maxHeight: '80vh',
+            objectFit: 'contain',
+            userSelect: 'none',
+            touchAction: 'none',
+            transformOrigin: 'center center',
+            transition: 'transform 0.05s linear',
+        },
+        '& .ss__gallery__nav': {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            height: '100%',
+            width: '64px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 0,
+            boxSizing: 'border-box',
+            borderRadius: 0,
+            fontSize: '2em',
+            lineHeight: 1,
+            cursor: 'pointer',
+            zIndex: 1,
+            '&:hover': {
+                // a wash layered via backgroundImage so it composes with (rather than defeats)
+                // a backgroundColor set through Button props or theme overrides
+                backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.085))',
+            },
+        },
+        '& .ss__gallery__nav--prev': {
+            left: 0,
+        },
+        '& .ss__gallery__nav--next': {
+            right: 0,
+        },
+    });
+};
+exports.Gallery = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+        startIndex: 0,
+        zoomMin: 1,
+        zoomMax: 4,
+        zoomStep: 0.5,
+        swipeThreshold: 40,
+    };
+    const props = (0, utilities_1.mergeProps)('gallery', globalTheme, defaultProps, properties);
+    const { images, open, startIndex, onClose, alt, className, internalClassName } = props;
+    const zoomMin = props.zoomMin;
+    const zoomMax = props.zoomMax;
+    const zoomStep = props.zoomStep;
+    const swipeThreshold = props.swipeThreshold;
+    const clampZoom = (value) => Math.min(zoomMax, Math.max(zoomMin, value));
+    const [index, setIndex] = (0, hooks_1.useState)(startIndex || 0);
+    const [zoom, setZoom] = (0, hooks_1.useState)(zoomMin);
+    const [pan, setPan] = (0, hooks_1.useState)({ x: 0, y: 0 });
+    const dragRef = (0, hooks_1.useRef)(null);
+    const touchRef = (0, hooks_1.useRef)(null);
+    const count = images?.length || 0;
+    //initialize lang
+    const defaultLang = {
+        gallery: {
+            attributes: {
+                'aria-label': 'Image gallery',
+            },
+        },
+        zoomOutButton: {
+            attributes: {
+                'aria-label': 'Zoom out',
+            },
+        },
+        zoomInButton: {
+            attributes: {
+                'aria-label': 'Zoom in',
+            },
+        },
+        closeButton: {
+            attributes: {
+                'aria-label': 'Close gallery',
+            },
+        },
+        prevButton: {
+            attributes: {
+                'aria-label': 'Previous image',
+            },
+        },
+        nextButton: {
+            attributes: {
+                'aria-label': 'Next image',
+            },
+        },
+    };
+    //deep merge with props.lang
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {});
+    // Reset to the clicked image (and clear zoom/pan) whenever the gallery opens or the start changes.
+    (0, hooks_1.useEffect)(() => {
+        if (open) {
+            setIndex(Math.min(Math.max(startIndex || 0, 0), Math.max(count - 1, 0)));
+            setZoom(zoomMin);
+            setPan({ x: 0, y: 0 });
+        }
+    }, [open, startIndex, count]);
+    const goTo = (next) => {
+        if (count === 0)
+            return;
+        const wrapped = (next + count) % count;
+        setIndex(wrapped);
+        setZoom(zoomMin);
+        setPan({ x: 0, y: 0 });
+    };
+    const showPrev = () => goTo(index - 1);
+    const showNext = () => goTo(index + 1);
+    const zoomIn = () => setZoom((z) => clampZoom(z + zoomStep));
+    const zoomOut = () => setZoom((z) => {
+        const next = clampZoom(z - zoomStep);
+        if (next === zoomMin)
+            setPan({ x: 0, y: 0 });
+        return next;
+    });
+    // Keyboard controls while open.
+    (0, hooks_1.useEffect)(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            switch (e.key) {
+                case 'Escape':
+                    onClose && onClose();
+                    break;
+                case 'ArrowRight':
+                    showNext();
+                    break;
+                case 'ArrowLeft':
+                    showPrev();
+                    break;
+                case '+':
+                case '=':
+                    zoomIn();
+                    break;
+                case '-':
+                case '_':
+                    zoomOut();
+                    break;
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [open, index, count]);
+    // Dialog focus management — same pattern as QuickviewModal/QuickviewSlideout:
+    // remember what had focus before the gallery opened (the gallery portals to document.body,
+    // outside any surrounding focus trap), move focus into the gallery on open, restore on close.
+    const rootRef = (0, hooks_1.useRef)(null);
+    const previousFocusRef = (0, hooks_1.useRef)(null);
+    const wasOpenRef = (0, hooks_1.useRef)(false);
+    (0, hooks_1.useEffect)(() => {
+        const isOpenNow = Boolean(open && count > 0);
+        if (isOpenNow && !wasOpenRef.current) {
+            previousFocusRef.current = document.activeElement || null;
+            const closeEl = rootRef.current?.querySelector('.ss__gallery__close');
+            (closeEl || rootRef.current)?.focus();
+        }
+        else if (!isOpenNow && wasOpenRef.current) {
+            previousFocusRef.current?.focus?.();
+            previousFocusRef.current = null;
+        }
+        wasOpenRef.current = isOpenNow;
+    });
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    if (!open || count === 0)
+        return null;
+    // Drag-to-pan when zoomed in.
+    const onPointerDown = (e) => {
+        if (zoom <= zoomMin)
+            return;
+        // Block the browser defaults (native image drag, text selection) that would cancel the
+        // pointermove stream, and capture the pointer so the drag survives leaving the image bounds.
+        e.preventDefault();
+        e.currentTarget?.setPointerCapture?.(e.pointerId);
+        dragRef.current = { startX: e.clientX, startY: e.clientY, baseX: pan.x, baseY: pan.y };
+    };
+    const onPointerMove = (e) => {
+        if (!dragRef.current)
+            return;
+        setPan({ x: dragRef.current.baseX + (e.clientX - dragRef.current.startX), y: dragRef.current.baseY + (e.clientY - dragRef.current.startY) });
+    };
+    const endDrag = () => {
+        dragRef.current = null;
+    };
+    // Dismiss when the dark backdrop itself is clicked (not the image or a control). Works on
+    // the overlay root and the stage, both of which are `e.currentTarget` only for backdrop hits.
+    const onBackdropClick = (e) => {
+        if (e.target === e.currentTarget)
+            onClose && onClose();
+    };
+    // Mobile: horizontal touch-swipe paginates (only when not zoomed — zoom uses drag-to-pan).
+    const onTouchStart = (e) => {
+        if (e.touches && e.touches.length === 1) {
+            touchRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+        }
+    };
+    const onTouchEnd = (e) => {
+        const start = touchRef.current;
+        touchRef.current = null;
+        if (!start || zoom > zoomMin || count <= 1)
+            return;
+        const touch = e.changedTouches && e.changedTouches[0];
+        if (!touch)
+            return;
+        const dx = touch.clientX - start.x;
+        const dy = touch.clientY - start.y;
+        // Require a dominantly-horizontal swipe past the threshold.
+        if (Math.abs(dx) > swipeThreshold && Math.abs(dx) > Math.abs(dy)) {
+            if (dx < 0)
+                showNext();
+            else
+                showPrev();
+        }
+    };
+    const currentSrc = images[index];
+    return (0, compat_1.createPortal)((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__gallery', className, internalClassName), role: "dialog", "aria-modal": "true", ...mergedLang.gallery?.attributes, ref: (e) => {
+                rootRef.current = e;
+                (0, hooks_2.useA11y)(e, 0, true, () => onClose && onClose());
+            }, onClick: onBackdropClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__gallery__toolbar", children: [count > 1 && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__gallery__counter", children: [index + 1, " / ", count] })), (0, jsx_runtime_1.jsx)(Button_1.Button, { name: "zoom-out", internalClassName: "ss__gallery__button ss__gallery__zoom-out", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.12)", borderColor: "transparent", icon: { icon: 'minus', color: 'currentColor' }, lang: { button: lang.zoomOutButton }, disabled: zoom <= zoomMin, onClick: zoomOut, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { name: "zoom-in", internalClassName: "ss__gallery__button ss__gallery__zoom-in", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.12)", borderColor: "transparent", icon: { icon: 'plus', color: 'currentColor' }, lang: { button: lang.zoomInButton }, disabled: zoom >= zoomMax, onClick: zoomIn, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { name: "close", internalClassName: "ss__gallery__button ss__gallery__close", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.12)", borderColor: "transparent", icon: { icon: 'close', color: 'currentColor' }, lang: { button: lang.closeButton }, onClick: () => onClose && onClose(), theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__gallery__stage", onClick: onBackdropClick, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, children: [count > 1 && ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "prev", internalClassName: "ss__gallery__nav ss__gallery__nav--prev", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.06)", borderColor: "transparent", icon: { icon: 'angle-left', color: 'currentColor' }, lang: { button: lang.prevButton }, onClick: showPrev, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) })), (0, jsx_runtime_1.jsx)(Image_1.Image, { internalClassName: "ss__gallery__image", src: currentSrc, alt: alt || '', draggable: false, style: {
+                                transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                                cursor: zoom > zoomMin ? (dragRef.current ? 'grabbing' : 'grab') : 'default',
+                            }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerLeave: endDrag, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) }), count > 1 && ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "next", internalClassName: "ss__gallery__nav ss__gallery__nav--next", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.06)", borderColor: "transparent", icon: { icon: 'angle-right', color: 'currentColor' }, lang: { button: lang.nextButton }, onClick: showNext, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) }))] })] }) }), document.body);
+});

package/dist/cjs/components/src/components/Molecules/Gallery/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Gallery"), exports);

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

@@ -118,11 +118,28 @@ exports.Modal = (0, mobx_react_lite_1.observer)((properties) => {
             document.body.style.overflow = '';
         };
     }, [showContent, lockScroll]);
+    // The resize listener below is registered once (on mount), so it must read the open/lock state
+    // through refs — capturing `showContent` directly would freeze its mount-time value in the
+    // listener closure. The quickview modal mounts open, so that stale `true` would re-lock the
+    // page on any resize after the modal was closed.
+    const showContentRef = (0, hooks_1.useRef)(showContent);
+    const lockScrollRef = (0, hooks_1.useRef)(lockScroll);
+    showContentRef.current = showContent;
+    lockScrollRef.current = lockScroll;
     (0, hooks_1.useEffect)(() => {
         const existingButton = buttonSelector ? (typeof buttonSelector === 'string' ? document.querySelector(buttonSelector) : buttonSelector) : null;
+        // Re-asserts the scroll lock after a resize: other components (e.g. Slideout) write
+        // `document.body.style.overflow` on render and can clobber the lock while the modal is open.
+        // The delay lets those renders settle first; `unmounted` keeps a pending re-lock from firing
+        // after cleanup has already released the body.
+        let unmounted = false;
+        let overflowTimeout;
         const debouncedHandleResize = (0, snap_toolbox_1.debounce)(() => {
-            setTimeout(() => {
-                if (showContent && lockScroll) {
+            clearTimeout(overflowTimeout);
+            overflowTimeout = setTimeout(() => {
+                if (unmounted)
+                    return;
+                if (showContentRef.current && lockScrollRef.current) {
                     document.body.style.overflow = 'hidden';
                 }
                 else {
@@ -141,6 +158,8 @@ exports.Modal = (0, mobx_react_lite_1.observer)((properties) => {
         }
         window.addEventListener('resize', debouncedHandleResize);
         return () => {
+            unmounted = true;
+            clearTimeout(overflowTimeout);
             window.removeEventListener('resize', debouncedHandleResize);
             if (existingButton) {
                 existingButton.removeEventListener('click', clickListener);

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

@@ -100,7 +100,7 @@ exports.OverlayBadge = (0, mobx_react_lite_1.observer)((properties) => {
             name: slot.name,
             top: index == 0,
             bottom: index == sectionSlots.length - 1,
-            badges: result?.display.badges?.atLocation(`${section}/${slot.tag}`).slice(0, limit),
+            badges: result?.display?.badges?.atLocation(`${section}/${slot.tag}`).slice(0, limit),
         }))
             .filter((slot) => slot.badges?.length);
         return {

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

@@ -0,0 +1,115 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductDetailTable = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const mobx_1 = require("mobx");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const ProductDetail_1 = require("../../Atoms/ProductDetail");
+const ProductDetail_2 = require("../../Atoms/ProductDetail/ProductDetail");
+const Price_1 = require("../../Atoms/Price");
+const Image_1 = require("../../Atoms/Image");
+const Rating_1 = require("../Rating");
+const defaultStyles = () => {
+    return (0, react_1.css)({
+        width: '100%',
+        borderCollapse: 'collapse',
+        fontSize: '0.9em',
+        '& tr': {
+            borderBottom: '1px solid #eee',
+        },
+        '& tr:last-of-type': {
+            borderBottom: 'none',
+        },
+        '& th, & td': {
+            padding: '10px 0',
+            textAlign: 'left',
+            verticalAlign: 'top',
+        },
+        '& th': {
+            width: '40%',
+            paddingRight: '16px',
+            fontWeight: 500,
+            color: '#666',
+            textTransform: 'uppercase',
+            fontSize: '0.85em',
+            letterSpacing: '0.02em',
+        },
+        '& td': {
+            color: '#1a1a1a',
+            // Typed values render components whose defaults center them (Rating flex-centers its
+            // stars, Image stretches and letterboxes via objectFit) — left-align both so every
+            // display type lines up with the plain text values.
+            '& .ss__rating': {
+                justifyContent: 'flex-start',
+            },
+            '& .ss__image': {
+                alignItems: 'flex-start',
+                // Cap images at a row-scale thumbnail (width stays auto, preserving aspect ratio)
+                // so a full-size product image can't dwarf the table.
+                '& img': {
+                    maxHeight: '100px',
+                },
+            },
+        },
+    });
+};
+exports.ProductDetailTable = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('productDetailTable', globalTheme, defaultProps, properties);
+    const { result, displayFields, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('productDetailTable', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    // Render only the configured fields that resolve to a non-empty value (preserves the opt-in
+    // behaviour: with no displayFields, nothing renders).
+    const displayedFields = (displayFields || []).filter((detail) => (0, ProductDetail_2.renderDetailValue)((0, ProductDetail_2.getProductFieldValue)(result, detail.field)) !== '');
+    if (displayedFields.length === 0)
+        return null;
+    const renderValue = (detail) => {
+        const rawValue = (0, ProductDetail_2.getProductFieldValue)(result, detail.field);
+        const componentProps = { theme: props.theme, treePath, ...(0, utilities_1.defined)({ disableStyles }) };
+        switch (detail.type) {
+            case 'price': {
+                const value = Number(rawValue);
+                if (!isNaN(value)) {
+                    return (0, jsx_runtime_1.jsx)(Price_1.Price, { value: value, ...componentProps });
+                }
+                break;
+            }
+            case 'rating': {
+                const value = Number(rawValue);
+                if (!isNaN(value)) {
+                    return (0, jsx_runtime_1.jsx)(Rating_1.Rating, { value: value, ...componentProps });
+                }
+                break;
+            }
+            case 'image': {
+                // An image field may resolve to an array of URLs — display the first.
+                const src = Array.isArray(rawValue) || (0, mobx_1.isObservableArray)(rawValue) ? Array.from(rawValue)[0] : rawValue;
+                if (typeof src === 'string' && src) {
+                    return (0, jsx_runtime_1.jsx)(Image_1.Image, { src: src, alt: detail.label || detail.field, ...componentProps });
+                }
+                break;
+            }
+            case 'html':
+                return (0, jsx_runtime_1.jsx)(ProductDetail_1.ProductDetail, { result: result, field: detail.field, html: true, ...componentProps });
+        }
+        // 'text' (the default) — and the fallback when a typed value doesn't fit its type.
+        return (0, jsx_runtime_1.jsx)(ProductDetail_1.ProductDetail, { result: result, field: detail.field, ...componentProps });
+    };
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("table", { ...styling, className: (0, classnames_1.default)('ss__product-detail-table', className, internalClassName), children: (0, jsx_runtime_1.jsx)("tbody", { children: displayedFields.map((detail, index) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { scope: "row", children: detail.label ?? detail.field }), (0, jsx_runtime_1.jsx)("td", { children: renderValue(detail) })] }, `${detail.field}-${index}`))) }) }) }));
+});

package/dist/cjs/components/src/components/Molecules/ProductDetailTable/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ProductDetailTable"), exports);

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

@@ -0,0 +1,136 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuantityPicker = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const hooks_2 = require("../../../hooks");
+const Button_1 = require("../../Atoms/Button");
+const defaultStyles = () => {
+    return (0, react_1.css)({
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '5px',
+        '&.ss__quantity-picker--disabled': {
+            opacity: 0.7,
+        },
+        '& .ss__quantity-picker__label-wrapper': {
+            display: 'inline-flex',
+            alignItems: 'center',
+        },
+        '& .ss__quantity-picker__controls-wrapper': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '5px',
+        },
+        '& .ss__quantity-picker__input': {
+            width: '60px',
+            textAlign: 'center',
+            padding: '5px',
+            boxSizing: 'border-box',
+        },
+    });
+};
+exports.QuantityPicker = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        min: 1,
+        step: 1,
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('quantityPicker', globalTheme, defaultProps, properties);
+    const { value, startValue, min, max, step, disabled, hideButtons, label, onChange, disableStyles, className, internalClassName, theme: ______, treePath, lang, style: _, styleScript: __, themeStyleScript: ___, name: ____, ...additionalProps } = props;
+    // whole numbers only, never negative, within min/max
+    const minimum = Math.max(0, Math.trunc(min));
+    const clamp = (num) => {
+        let clamped = Math.trunc(num);
+        if (isNaN(clamped)) {
+            clamped = minimum;
+        }
+        clamped = Math.max(minimum, clamped);
+        if (typeof max == 'number') {
+            clamped = Math.min(Math.trunc(max), clamped);
+        }
+        return clamped;
+    };
+    // useState is called unconditionally (rules of hooks): a `value` prop that transitions between
+    // undefined and defined across renders must not shift hook order. In controlled mode the
+    // internal state is simply ignored and the quantity derives from the prop.
+    const [internalQuantity, setQuantityState] = (0, hooks_1.useState)(clamp(startValue ?? minimum));
+    const stateful = value === undefined;
+    const quantity = stateful ? internalQuantity : clamp(value);
+    // raw input text while typing - committed (clamped) on blur
+    const [editingValue, setEditingValue] = (0, hooks_1.useState)(undefined);
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('quantityPicker', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const commit = (e, newValue) => {
+        if (disabled) {
+            return;
+        }
+        const clamped = clamp(newValue);
+        if (stateful) {
+            setQuantityState(clamped);
+        }
+        if (clamped !== quantity) {
+            onChange && onChange(e, clamped);
+        }
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        quantityInput: {
+            attributes: {
+                'aria-label': 'quantity',
+            },
+        },
+        decrementButton: {
+            attributes: {
+                'aria-label': 'decrease quantity',
+            },
+        },
+        incrementButton: {
+            attributes: {
+                'aria-label': 'increase quantity',
+            },
+        },
+    };
+    //deep merge with props.lang
+    const _lang = (0, deepmerge_1.default)(defaultLang, lang || {});
+    const mergedLang = (0, hooks_2.useLang)(_lang, {
+        quantity,
+        min: minimum,
+        max,
+        disabled,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    const subProps = {
+        button: {
+            // default props
+            internalClassName: 'ss__quantity-picker__button',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__quantity-picker', { 'ss__quantity-picker--disabled': disabled }, className, internalClassName), ...additionalProps, children: [label && ((0, jsx_runtime_1.jsx)("div", { className: "ss__quantity-picker__label-wrapper", children: (0, jsx_runtime_1.jsx)("span", { className: "ss__quantity-picker__label", children: label }) })), (0, jsx_runtime_1.jsxs)("div", { className: "ss__quantity-picker__controls-wrapper", children: [!hideButtons && ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, name: "decrement", internalClassName: (0, classnames_1.default)(subProps.button.internalClassName, 'ss__quantity-picker__button--decrement'), disabled: disabled || quantity <= minimum, onClick: (e) => commit(e, quantity - step), icon: 'minus-thin', ...mergedLang.decrementButton?.attributes })), (0, jsx_runtime_1.jsx)("input", { className: "ss__quantity-picker__input", type: "number", inputMode: "numeric", min: minimum, max: max, step: step, value: editingValue ?? quantity, disabled: disabled, onInput: (e) => setEditingValue(e.target.value), onBlur: (e) => {
+                                if (editingValue !== undefined) {
+                                    const parsed = parseFloat(editingValue);
+                                    commit(e, isNaN(parsed) ? quantity : parsed);
+                                    setEditingValue(undefined);
+                                }
+                            }, ...mergedLang.quantityInput?.all }), !hideButtons && ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, name: "increment", internalClassName: (0, classnames_1.default)(subProps.button.internalClassName, 'ss__quantity-picker__button--increment'), disabled: disabled || (typeof max == 'number' && quantity >= max), onClick: (e) => commit(e, quantity + step), icon: 'plus-thin', ...mergedLang.incrementButton?.attributes }))] })] }) }));
+});

package/dist/cjs/components/src/components/Molecules/QuantityPicker/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./QuantityPicker"), exports);