@sonic-equipment/ui 0.0.118 → 1.0.0

package/dist/background-overlay/background-overlay-manager.js

@@ -0,0 +1,297 @@
+import { getCssPropertyValue } from '../shared/utils/css.js';
+import { createUUID } from '../shared/utils/uuid.js';
+
+/**
+ * BackgroundOverlayManager is a singleton class that manages the background overlay elements.
+ * It creates, updates, and removes the background overlay elements as needed.
+ */
+class BackgroundOverlayManager {
+    /**
+     * Gets the z-index from a css variable using a given overlay name.
+     * @private
+     * @param overlayName - The name of the overlay.
+     * @returns The z-index of the overlay.
+     */
+    static _getZIndexByOverlayName(overlayName) {
+        if (BackgroundOverlayManager._overlayZIndexes[overlayName])
+            return BackgroundOverlayManager._overlayZIndexes[overlayName];
+        const zIndex = Number.parseFloat(String(getCssPropertyValue(`--background-overlay-${overlayName}`)));
+        if (Number.isNaN(zIndex))
+            throw new Error(`Unable to determine z-index for CSS property: --background-overlay-${overlayName}`);
+        return (BackgroundOverlayManager._overlayZIndexes[overlayName] = zIndex);
+    }
+    /**
+     * Gets, or creates, the background DOM element to use as the dim layer.
+     * When the element is created, it is appended to the document body.
+     * The element is also given an ID and a class name.
+     * @private
+     * @returns The background DOM element.
+     */
+    static _getElement() {
+        if (BackgroundOverlayManager._element)
+            return BackgroundOverlayManager._element;
+        if (!document)
+            throw new Error('Not running in browser? document is not defined.');
+        const element = (BackgroundOverlayManager._element =
+            document.createElement('div'));
+        element.id = 'background-overlay';
+        element.classList.add('background-overlay');
+        element.addEventListener('click', BackgroundOverlayManager._onClick);
+        document.body.append(element);
+        return element;
+    }
+    /**
+     * Removes the background DOM element visually by removing the 'visible' class.
+     * @private
+     */
+    static _removeElement() {
+        if (document) {
+            document.documentElement.style.overflow = 'unset';
+        }
+        BackgroundOverlayManager._element?.classList.remove('visible');
+    }
+    /**
+     * Gets the current, visual, most in front, overlay entry from the overlay queue.
+     * @private
+     * @returns The current overlay entry.
+     */
+    static get _currentOverlayEntry() {
+        return BackgroundOverlayManager._overlayQueue
+            .sort((a, b) => b.zIndex - a.zIndex || b.timestamp - a.timestamp)
+            .find(entry => entry.isVisible);
+    }
+    /**
+     * Get the overlay entry by instance ID.
+     * @private
+     * @param instanceId - The instance ID of the overlay entry.
+     * @returns The overlay entry.
+     */
+    static _getOverlayEntryByInstanceId(instanceId) {
+        return BackgroundOverlayManager._overlayQueue.find(entry => entry.instanceId === instanceId);
+    }
+    /**
+     * Removes the overlay entry by instance ID from the overlay queue.
+     * This method also calls the onClose function of the entry if it exists.
+     * @private
+     * @param instanceId - The instance ID of the overlay entry.
+     * @returns Void
+     */
+    static _removeOverlayEntry(instanceId) {
+        const entry = BackgroundOverlayManager._getOverlayEntryByInstanceId(instanceId);
+        entry?.onClose?.();
+        BackgroundOverlayManager._overlayQueue =
+            BackgroundOverlayManager._overlayQueue.filter(entry => entry.instanceId !== instanceId);
+        BackgroundOverlayManager._rerender();
+    }
+    /**
+     * Rerenders the background overlay element.
+     * This method updates the z-index of the element and adds the 'visible' class.
+     * If there is no current overlay entry, it removes the element.
+     * @private
+     * @returns Void
+     */
+    static _rerender() {
+        const currentOverlayZindex = BackgroundOverlayManager._currentOverlayEntry?.zIndex;
+        if (currentOverlayZindex === undefined)
+            return this._removeElement();
+        BackgroundOverlayManager._getElement().style.zIndex =
+            String(currentOverlayZindex);
+        if (document) {
+            document.documentElement.style.overflow = 'hidden';
+        }
+        BackgroundOverlayManager._getElement().classList.add('visible');
+    }
+    /**
+     * Mounts an overlay instance.
+     * This method creates a new overlay entry in the overlay queue.
+     * It also sets the z-index and timestamp of the entry.
+     * @public
+     * @param instanceId - The instance ID of the overlay entry.
+     * @param isVisible - A boolean indicating whether the overlay is visible or not.
+     * @param onClick - A function to call when the overlay is clicked.
+     * @param onClose - A function to call when the overlay is closed.
+     * @param overlayName - The name of the overlay.
+     * @returns Void
+     */
+    static mountInstance({ instanceId, isVisible, onClick, onClose, overlayName, }) {
+        const zIndex = BackgroundOverlayManager._getZIndexByOverlayName(overlayName);
+        const timestamp = Date.now();
+        BackgroundOverlayManager._overlayQueue.push({
+            instanceId,
+            isVisible,
+            onClick,
+            onClose,
+            timestamp,
+            zIndex,
+        });
+        BackgroundOverlayManager._rerender();
+    }
+    /**
+     * Unmounts an overlay instance.
+     * This method removes the overlay entry from the overlay queue.
+     * @public
+     * @param instanceId - The instance ID of the overlay entry.
+     * @returns Void
+     */
+    static unmountInstance(instanceId) {
+        BackgroundOverlayManager._removeOverlayEntry(instanceId);
+    }
+    /**
+     * Updates an overlay instance.
+     * This method updates the properties of the overlay entry in the overlay queue.
+     * It also sets the z-index of the entry.
+     * @public
+     * @param instanceId - The instance ID of the overlay entry.
+     * @param isVisible - A boolean indicating whether the overlay is visible or not.
+     * @param onClick - A function to call when the overlay is clicked.
+     * @param onClose - A function to call when the overlay is closed.
+     * @param overlayName - The name of the overlay.
+     * @returns Void
+     */
+    static updateInstance({ instanceId, isVisible, onClick, onClose, overlayName, }) {
+        const zIndex = BackgroundOverlayManager._getZIndexByOverlayName(overlayName);
+        const instance = BackgroundOverlayManager._getOverlayEntryByInstanceId(instanceId);
+        if (!instance)
+            return;
+        instance.isVisible = isVisible;
+        instance.onClick = onClick;
+        instance.onClose = onClose;
+        instance.zIndex = zIndex;
+        BackgroundOverlayManager._rerender();
+    }
+    /**
+     * Shows or hides the overlay.
+     * This method updates the visibility of the overlay entry in the overlay queue.
+     * @public
+     * @param instanceId - The instance ID of the overlay entry.
+     * @param isOpen - A boolean indicating whether to show or hide the overlay.
+     * @returns Void
+     */
+    static showOverlay({ instanceId, isOpen, }) {
+        const entry = BackgroundOverlayManager._getOverlayEntryByInstanceId(instanceId);
+        if (!entry)
+            return;
+        entry.isVisible = isOpen;
+        BackgroundOverlayManager._rerender();
+    }
+    /**
+     * Creates a new background overlay instance.
+     * This method returns a new instance of the BackgroundOverlay class.
+     * @public
+     * @returns A new instance of the BackgroundOverlay class.
+     */
+    static createBackgroundOverlay() {
+        return new BackgroundOverlay();
+    }
+}
+Object.defineProperty(BackgroundOverlayManager, "_element", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: null
+});
+Object.defineProperty(BackgroundOverlayManager, "_overlayZIndexes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {}
+});
+Object.defineProperty(BackgroundOverlayManager, "_overlayQueue", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: []
+});
+/**
+ * Handles the click event on the background overlay element.
+ * This method stops the event from propagating and prevents the default action.
+ * It also calls the onClick function of the current overlay entry if it exists.
+ * @private
+ * @param e - The mouse event.
+ * @returns Void
+ */
+Object.defineProperty(BackgroundOverlayManager, "_onClick", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const currentOverlayEntry = BackgroundOverlayManager._currentOverlayEntry;
+        if (!currentOverlayEntry)
+            return;
+        return currentOverlayEntry.onClick?.();
+    }
+});
+/**
+ * BackgroundOverlay is a class that represents a single background overlay.
+ * It is used to create and manage the background overlay elements.
+ * It is a wrapper around the BackgroundOverlayManager class.
+ */
+class BackgroundOverlay {
+    constructor() {
+        /**
+         * The ID of the overlay instance.
+         * This is a unique identifier for the overlay instance.
+         * @private
+         * @default A unique UUID string.
+         */
+        Object.defineProperty(this, "_instanceId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: createUUID()
+        });
+        /**
+         * A boolean indicating whether the overlay instance is mounted.
+         * This is used to determine whether to create or update the overlay instance.
+         * @private
+         * @default false
+         */
+        Object.defineProperty(this, "_isMounted", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+    }
+    /**
+     * Mounts or updates the overlay instance.
+     * This method creates or updates the overlay instance with the given properties.
+     * @returns Void
+     */
+    mountOrUpdate({ isVisible = false, onClick, onClose, overlayName, }) {
+        (this._isMounted
+            ? BackgroundOverlayManager.updateInstance
+            : BackgroundOverlayManager.mountInstance)({
+            instanceId: this._instanceId,
+            isVisible,
+            onClick,
+            onClose,
+            overlayName,
+        });
+        this._isMounted = true;
+    }
+    /**
+     * Unmounts the overlay instance.
+     * This method removes the overlay instance visually and from the overlay queue
+     * @returns Void
+     */
+    unmount() {
+        BackgroundOverlayManager.unmountInstance(this._instanceId);
+    }
+    /**
+     * Shows or hides the overlay.
+     * This method updates the visibility of the overlay instance.
+     * @param isOpen - A boolean indicating whether to show or hide the overlay.
+     * @returns Void
+     */
+    show(isOpen) {
+        BackgroundOverlayManager.showOverlay({
+            instanceId: this._instanceId,
+            isOpen,
+        });
+    }
+}
+
+export { BackgroundOverlayManager };

package/dist/background-overlay/background-overlay.d.ts

@@ -1,7 +1,17 @@
+import './background-overlay.module.css';
+type Position = 'in-front' | 'behind-header' | 'behind-announcement';
 interface BackgroundOverlayProps {
-    className?: string;
+    /** Whether the overlay is open or not. */
     isOpen: boolean;
+    /** Function to call when the overlay is clicked. */
     onClick?: VoidFunction;
+    /** Function to call when the overlay is closed. */
+    onClose?: VoidFunction;
+    /** Position of the overlay. Can be 'in-front' or 'behind-header' */
+    position?: Position;
 }
-export declare function BackgroundOverlay({ className, isOpen, onClick, }: BackgroundOverlayProps): React.ReactPortal | null;
+/**
+ * BackgroundOverlay is a component that renders a "virtual" background overlay.
+ */
+export declare function BackgroundOverlay({ isOpen, onClick, onClose, position, }: BackgroundOverlayProps): null;
 export {};

package/dist/background-overlay/background-overlay.js

@@ -0,0 +1,40 @@
+"use client";
+import { useState, useEffect } from 'react';
+import { BackgroundOverlayManager } from './background-overlay-manager.js';
+
+/**
+ * BackgroundOverlay is a component that renders a "virtual" background overlay.
+ */
+function BackgroundOverlay({ isOpen, onClick, onClose, position = 'in-front', }) {
+    /**
+     * An instance of the BackgroundOverlay class is
+     * created using the BackgroundOverlayManager.
+     */
+    const [backgroundOverlay, setBackgroundOverlay] = useState();
+    useEffect(() => {
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+        setBackgroundOverlay(backgroundOverlay => {
+            if (backgroundOverlay)
+                return backgroundOverlay;
+            return BackgroundOverlayManager.createBackgroundOverlay();
+        });
+        /* Mount or update the background overlay instance */
+        backgroundOverlay?.mountOrUpdate({
+            isVisible: isOpen,
+            onClick,
+            onClose,
+            overlayName: position,
+        });
+    }, [backgroundOverlay, isOpen, onClick, onClose, position]);
+    useEffect(() => {
+        /* Show or hide the background overlay */
+        backgroundOverlay?.show(isOpen);
+    }, [backgroundOverlay, isOpen]);
+    useEffect(() => {
+        /* Unmount the background overlay instance */
+        return () => backgroundOverlay?.unmount();
+    }, [backgroundOverlay]);
+    return null;
+}
+
+export { BackgroundOverlay };

package/dist/badges/badge/badge.d.ts

@@ -1,5 +1,8 @@
+export type BadgeStatus = 'off' | 'on' | 'indeterminate' | 'disabled';
 export interface BadgeProps {
+    className?: string;
     count?: number;
-    variant?: 'red' | 'orange' | 'green';
+    label?: string;
+    status?: BadgeStatus;
 }
-export declare function Badge({ count, variant }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ className, count, label, status }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/badges/badge/badge.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import styles from './badge.module.css.js';
+
+// TODO: why is it animating on mount? and when I set lastCount to count by default it never animates
+function Badge({ className, count, label, status }) {
+    const lastCount = useRef(null);
+    useEffect(() => {
+        lastCount.current = count;
+    }, [count]);
+    return (jsx("span", { "aria-label": label, className: clsx(styles.badge, status && styles[status], {
+            [styles['is-animating']]: count !== undefined && count !== lastCount.current,
+        }, className), children: count }, count));
+}
+
+export { Badge };

package/dist/badges/badge/badge.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"badge":"badge-module-X5Au9","disabled":"badge-module-LoUsz","off":"badge-module-qE3YB","indeterminate":"badge-module-YnGju","on":"badge-module-N4lDJ","is-animating":"badge-module-Q03Go","badge-pulse":"badge-module-uFNdF"};
+
+export { styles as default };

package/dist/badges/badge/icon-with-badge/icon-with-badge.d.ts

@@ -1,6 +1,13 @@
-import { ReactNode } from 'react';
+import { IconSize } from '../../../icon/icon';
+import { IconName } from '../../../icons';
+import { BadgeStatus } from '../badge';
 export interface IconWithBadgeProps {
-    badge: ReactNode;
-    icon: ReactNode;
+    badgeCount?: number;
+    badgeLabel?: string;
+    badgeStatus?: BadgeStatus;
+    className?: string;
+    icon: IconName;
+    label?: string;
+    size?: IconSize;
 }
-export declare function IconWithBadge({ badge, icon }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconWithBadge({ badgeCount, badgeLabel, badgeStatus, className, icon, label, size, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/badges/badge/icon-with-badge/icon-with-badge.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Icon } from '../../../icon/icon.js';
+import { Badge } from '../badge.js';
+import styles from './icon-with-badge.module.css.js';
+
+function IconWithBadge({ badgeCount, badgeLabel, badgeStatus, className, icon, label, size, }) {
+    return (jsxs("div", { "aria-label": label, className: clsx(styles['icon-with-badge'], className), children: [jsx(Icon, { className: styles['icon'], name: icon, size: size }), (badgeCount || badgeStatus) && (jsx(Badge, { className: styles['badge'], count: badgeCount, label: badgeLabel, status: badgeStatus }))] }));
+}
+
+export { IconWithBadge };

package/dist/badges/badge/icon-with-badge/icon-with-badge.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"icon-with-badge":"icon-with-badge-module-eCTIN","icon":"icon-with-badge-module-z8YPt","badge":"icon-with-badge-module-X4Tjx"};
+
+export { styles as default };

package/dist/badges/tag/tag.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './tag.module.css.js';
+
+function Tag({ children }) {
+    if (!children)
+        return null;
+    return (jsxs("div", { className: styles.tag, children: [jsx("div", { className: styles.body, "data-test-selector": "tag", children: children }), jsx("svg", { className: styles.shape, height: "16", viewBox: "0 0 9 16", width: "9", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.92461763,0 L0,0 L0,16 L1.92461763,16 L6.4117887,16 L8.87489381,7.57121588 C9.23711515,6.3325062 8.79482383,4.99454094 7.78060408,4.2560794 L1.92461763,0 Z", fill: "currentColor" }) })] }));
+}
+
+export { Tag };

package/dist/badges/tag/tag.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
+
+export { styles as default };

package/dist/base.css

@@ -1,3 +1,52 @@
+/*  Spire default CSS below that needs to be countered in components for the timebeing 
+    This CSS can be removed when Spire is dropped. This CSS is not included within Spire context
+    and only serves as a simulation of Spire styling in Storybook.
+    shared/reset.module.css contains reset styles that overwrite this Spire CSS */
+
+html {
+  box-sizing: border-box;
+  block-size: 100%;
+}
+
+body {
+  margin: 0;
+  background: #fff;
+  block-size: 100%;
+  color: #000;
+  font-size: 16px;
+  font-weight: 400;
+  hyphens: auto;
+  line-height: 1.5;
+}
+
+* {
+  font-weight: normal;
+}
+
+span,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+  opacity: 1;
+}
+
+input[type='password'] {
+  font-family: 'Verdana', sans-serif !important;
+  font-size: 20px !important;
+}
+
 /*********************************************************
   *
   *  Base styling for the entire application

package/dist/breadcrumbs/breadcrumb.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Breadcrumbs, Breadcrumb as Breadcrumb$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { Link } from '../buttons/link/link.js';
+import { Icon } from '../icon/icon.js';
+import styles from './breadcrumb.module.css.js';
+
+function Breadcrumb({ links }) {
+    if (links.length <= 1)
+        return null;
+    const linksWithoutFirst = links.slice(1);
+    const homeLink = links[0];
+    const previousLink = links.at(-2);
+    const isHomeLink = previousLink === undefined || previousLink === homeLink;
+    const href = previousLink?.href || homeLink?.href;
+    const label = previousLink?.label || homeLink?.label;
+    if (!homeLink)
+        return null;
+    return (jsxs(Breadcrumbs, { className: styles.breadcrumbs, children: [jsx(Breadcrumb$1, { className: clsx(styles.breadcrumb, styles.short), children: jsxs(Link, { className: styles.link, href: href, isDisabled: false, title: label, children: [jsx(Icon, { className: styles.icon, name: "ArrowLeft", size: "xxs" }), isHomeLink ? (jsx(Icon, { className: styles.icon, name: "HomeSolid", size: "xxs" })) : (jsx("span", { children: previousLink.label }))] }) }), jsx(Breadcrumb$1, { className: clsx(styles.breadcrumb, styles.long), children: jsx(Link, { className: styles.link, href: homeLink.href, title: homeLink.label, children: jsx(Icon, { className: clsx(styles['home-icon'], styles.icon), name: "HomeSolid", size: "xxs" }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, link.href + link.label || index)))] }));
+}
+function BreadcrumbLongItem({ index, isDisabled, link, }) {
+    return (jsx(Breadcrumb$1, { className: clsx(styles.breadcrumb, styles.long), children: jsxs(Link, { className: styles.link, color: "secondary", href: link.href, isDisabled: isDisabled, title: link.label, children: [jsx(Icon, { className: clsx(styles.icon, styles['previous-icon']), name: "ArrowLeft" }), link.label] }) }, index));
+}
+
+export { Breadcrumb };

package/dist/breadcrumbs/breadcrumb.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ","short":"breadcrumb-module-ToeDB","long":"breadcrumb-module-np5GK"};
+
+export { styles as default };

package/dist/buttons/add-to-cart-button/add-to-cart-button.d.ts

@@ -1,9 +1,7 @@
-type AddToCartState = 'initial' | 'spinner' | 'manual-input';
 interface AddToCartButtonProps {
-    initialState?: AddToCartState;
     isDisabled?: boolean;
     onChange: (quantity: number) => void;
     quantity: number;
 }
-export declare function AddToCartButton({ initialState, isDisabled, onChange, quantity, }: AddToCartButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AddToCartButton({ isDisabled, onChange: _onChange, quantity: _quantity, }: AddToCartButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/buttons/add-to-cart-button/add-to-cart-button.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import clsx from 'clsx';
+import { NumberField } from '../../forms/fields/number-field/number-field.js';
+import { Icon } from '../../icon/icon.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { useDebouncedCallback } from '../../shared/hooks/use-debounced-callback.js';
+import { ensureNumber } from '../../shared/utils/number.js';
+import { Button } from '../button/button.js';
+import styles from './add-to-cart-button.module.css.js';
+
+function AddToCartButton({ isDisabled = false, onChange: _onChange, quantity: _quantity, }) {
+    const [quantity, setQuantity] = useState(_quantity);
+    const [currentState, setState] = useState(quantity > 0 ? 'input' : 'initial');
+    const [hasFocus, setHasFocus] = useState(false);
+    const buttonRef = useRef(null);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (quantity > 0 && currentState === 'initial') {
+            // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+            if (document?.activeElement === buttonRef.current)
+                setHasFocus(true);
+            // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+            setState('input');
+        }
+        if (quantity === 0 && currentState === 'input') {
+            // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+            if (document?.activeElement === inputRef.current)
+                setHasFocus(true);
+            // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+            setState('initial');
+        }
+    }, [quantity, currentState]);
+    const onChange = useCallback((quantity) => {
+        _onChange(quantity);
+        setQuantity(quantity);
+    }, [_onChange]);
+    return (jsxs("div", { className: styles['add-to-cart-button'], "data-test-selector": "addToCartButton", children: [currentState === 'initial' && (jsx(InitialState, { buttonRef: buttonRef, hasFocus: hasFocus, isDisabled: isDisabled, onAddToCart: () => {
+                    onChange(1);
+                }, onHasFocussed: () => {
+                    setHasFocus(false);
+                } })), currentState === 'input' && (jsx(InputState, { hasFocus: hasFocus, inputRef: inputRef, isDisabled: isDisabled, onChange: onChange, onHasFocussed: () => {
+                    setHasFocus(false);
+                }, quantity: quantity }))] }));
+}
+/* initial state: button */
+function InitialState({ buttonRef, hasFocus, isDisabled, onAddToCart, onHasFocussed, }) {
+    const t = useFormattedMessage();
+    useEffect(() => {
+        if (hasFocus) {
+            buttonRef?.current?.focus();
+            onHasFocussed?.();
+        }
+    }, [hasFocus, buttonRef, onHasFocussed]);
+    return (jsx(Button, { ref: buttonRef, condensed: true, "aria-label": t('Add to cart'), className: clsx(styles['initial'], isDisabled && styles['disabled']), icon: jsx(Icon, { name: "CartSolid" }), onClick: () => {
+            if (!isDisabled)
+                onAddToCart();
+        }, size: "md" }));
+}
+/* input state: spinner buttons and manual input */
+function InputState({ hasFocus, inputRef, isDisabled, onChange: _onChange, onHasFocussed, quantity, }) {
+    const t = useFormattedMessage();
+    const [internalQuantity, setInternalQuantity] = useState(quantity);
+    const [manualQuantity, setManualQuantity] = useState(null);
+    const isManualInput = useMemo(() => manualQuantity !== null, [manualQuantity]);
+    const isSpinnerInput = useMemo(() => manualQuantity === null, [manualQuantity]);
+    const onChangeDebounced = useDebouncedCallback((quantity) => _onChange(quantity), 1500);
+    useEffect(() => {
+        if (hasFocus) {
+            inputRef?.current?.focus();
+            onHasFocussed?.();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasFocus]);
+    useEffect(() => {
+        // clear debounced when switching to manual input or when quantity is 0 (returning to initial state)
+        if (isManualInput)
+            onChangeDebounced.cancel();
+    }, [isManualInput, onChangeDebounced]);
+    const onKeyUp = (e) => {
+        if (isSpinnerInput)
+            return;
+        if (e.key === 'Enter')
+            confirmManualQuantity();
+        if (e.key === 'Escape') {
+            /* returns to spinner input and restarts a debounce timer for the internalQuantity on the field */
+            setManualQuantity(null);
+            onChangeDebounced(internalQuantity);
+        }
+    };
+    const onSpinnerChange = (quantity) => {
+        if (Number.isNaN(quantity))
+            return;
+        setInternalQuantity(quantity);
+        if (quantity === 0) {
+            onChangeDebounced.cancel();
+            _onChange(0);
+        }
+        else {
+            onChangeDebounced(quantity);
+        }
+    };
+    const onManualInput = (e) => {
+        const value = ensureNumber(e.currentTarget.value, 0);
+        setManualQuantity(value);
+    };
+    const confirmManualQuantity = () => {
+        const value = ensureNumber(manualQuantity, 0);
+        setInternalQuantity(value);
+        setManualQuantity(null);
+        _onChange(value);
+        inputRef?.current?.focus();
+    };
+    return (jsxs("div", { className: clsx(styles['input-container'], isManualInput && styles['has-button'], isSpinnerInput && styles['has-spinner']), children: [jsx(NumberField, { ref: inputRef, autoGrow: true, className: styles['input'], "data-test-selector": "quantity", isReadOnly: isDisabled, label: t('Quantity'), maxLength: 4, maxValue: 9999, minValue: 0, name: "quantity", onChange: onSpinnerChange, onInput: onManualInput, onKeyUp: onKeyUp, size: "md", value: isSpinnerInput ? internalQuantity : manualQuantity || 0, withButtons: isSpinnerInput }), isManualInput && (jsx(Button, { condensed: true, "data-test-selector": "confirm", onClick: confirmManualQuantity, size: "md", children: t('OK') }))] }));
+}
+
+export { AddToCartButton };

package/dist/buttons/add-to-cart-button/add-to-cart-button.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"add-to-cart-button":"add-to-cart-button-module-GdrDp","initial":"add-to-cart-button-module-D5UBe","disabled":"add-to-cart-button-module-ySzuS","input-container":"add-to-cart-button-module-bRV8v","has-button":"add-to-cart-button-module-Jw4Wr","input":"add-to-cart-button-module-UFRIT"};
+
+export { styles as default };