@openameba/spindle-ui 0.45.0 → 0.46.0

package/StackNotificationManager/hooks.mjs

@@ -0,0 +1,220 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useStackNotificationManagerContext, } from './StackNotificationManager';
+const MAX_STACK_SIZE_DESKTOP = 4;
+const MAX_STACK_SIZE_MOBILE = 3;
+/**
+ * Fallback for `MediaQueryList.onchange`
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/matches
+ */
+function addMQListener(mq, callback) {
+    if (mq.addEventListener) {
+        mq.addEventListener('change', callback);
+    }
+    else {
+        mq.addListener(callback);
+    }
+}
+/**
+ * Fallback for `MediaQueryList.onchange`
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/matches
+ */
+function removeMQListener(mq, callback) {
+    if (mq.removeEventListener) {
+        mq.removeEventListener('change', callback);
+    }
+    else {
+        mq.removeListener(callback);
+    }
+}
+const useBreakpoint = (breakpoint) => {
+    const mql = useRef(typeof window !== 'undefined' && window.matchMedia
+        ? window.matchMedia(breakpoint)
+        : undefined);
+    const [matches, setMatches] = useState(() => mql.current ? mql.current.matches : false);
+    const handleSetMatches = useCallback((e) => setMatches(e.matches), []);
+    useEffect(() => {
+        const current = mql.current;
+        if (current) {
+            addMQListener(current, handleSetMatches);
+        }
+        return () => {
+            if (current) {
+                removeMQListener(current, handleSetMatches);
+            }
+        };
+    }, []);
+    return matches;
+};
+const useMaxStackSize = () => {
+    const isMobile = useBreakpoint('(max-width: 464px)');
+    return isMobile ? MAX_STACK_SIZE_MOBILE : MAX_STACK_SIZE_DESKTOP;
+};
+export const useStackInteraction = () => {
+    const { setStack, setOffset: _setOffset } = useStackNotificationManagerContext();
+    const maxStackSize = useMaxStackSize();
+    const setActive = useCallback(({ id, active, position, }) => {
+        setStack((prev) => {
+            const _stack = prev[position] || [];
+            const stack = [..._stack];
+            let specifiedItem = stack.find((item) => item.id === id);
+            if (!specifiedItem) {
+                specifiedItem = {
+                    id,
+                    active: false,
+                    order: 0,
+                    isPreservingInternalActive: false,
+                    contentHeight: 0,
+                };
+                stack.push(specifiedItem);
+            }
+            const shouldUpdate = specifiedItem?.active !== active ||
+                specifiedItem?.isPreservingInternalActive;
+            if (!shouldUpdate) {
+                return prev;
+            }
+            const totalActiveItems = stack.reduce((res, v) => v.active || v.isPreservingInternalActive ? res + 1 : res, 0);
+            const isOverMaxStackSize = totalActiveItems >= maxStackSize;
+            if (active && isOverMaxStackSize) {
+                stack
+                    .sort((a, b) => (a.order > b.order ? 1 : -1))
+                    .find((item) => {
+                    if (item.active && !item.isPreservingInternalActive) {
+                        item.active = false;
+                        item.isPreservingInternalActive = true;
+                        return true;
+                    }
+                    return false;
+                });
+            }
+            return {
+                ...prev,
+                [position]: stack.map((s) => {
+                    const next = { ...s };
+                    if (next.id === id) {
+                        next.active = active;
+                        next.isPreservingInternalActive = false;
+                    }
+                    if (next.id !== id &&
+                        !active &&
+                        (specifiedItem?.order || 0) <= next.order) {
+                        next.order = Math.max(next.order - 1, 0);
+                    }
+                    if (next.id === id && active) {
+                        next.order = totalActiveItems;
+                    }
+                    return next;
+                }),
+            };
+        });
+    }, []);
+    const setOffset = ({ offset, position, }) => {
+        _setOffset((prev) => ({ ...prev, [position]: offset }));
+    };
+    const setContentHeight = ({ id, height, position, }) => {
+        setStack((prev) => {
+            const _stack = prev[position] || [];
+            const stack = [..._stack];
+            const specifiedItem = stack.find((item) => item.id === id);
+            if (!specifiedItem) {
+                return prev;
+            }
+            const next = { ...specifiedItem };
+            next.contentHeight = height;
+            return {
+                ...prev,
+                [position]: stack.map((s) => (s.id === id ? next : s)),
+            };
+        });
+    };
+    return {
+        setActive,
+        setOffset,
+        setContentHeight,
+    };
+};
+export const useStackNotificationManager = ({ id, position, }) => {
+    const { stackRef, setStack, offset } = useStackNotificationManagerContext();
+    const stack = stackRef.current;
+    const { setActive: _setActive, setOffset: _setOffset, setContentHeight: _setContentHeight, } = useStackInteraction();
+    const setActive = useCallback((active) => {
+        _setActive({ id, active, position });
+    }, [id, position]);
+    const setOffset = useCallback((offset) => {
+        _setOffset({ position, offset });
+    }, [position]);
+    const setContentHeight = useCallback((height) => {
+        _setContentHeight({ id, position, height });
+    }, [position]);
+    useEffect(() => {
+        setStack((prev) => {
+            const stack = prev[position] || [];
+            const item = stack?.find((s) => s.id === id);
+            if (item) {
+                return prev;
+            }
+            // If stack item does not find, create stack item.
+            return {
+                ...prev,
+                [position]: [
+                    ...stack,
+                    {
+                        id,
+                        active: false,
+                        order: 0,
+                        contentHeight: 0,
+                    },
+                ],
+            };
+        });
+        return () => {
+            setStack((prev) => {
+                return {
+                    ...prev,
+                    [position]: [...(prev[position]?.filter((s) => s.id !== id) || [])],
+                };
+            });
+        };
+    }, []);
+    const item = useMemo(() => stack[position]?.find((s) => s.id === id), [stack, id, position]);
+    const stackPosition = useMemo(() => {
+        const _stackItem = stack[position] || [];
+        const stackItem = [..._stackItem];
+        return stackItem
+            .sort((a, b) => (a.order > b.order ? 1 : -1))
+            .reduce((res, v) => (v.active || v.isPreservingInternalActive) &&
+            v.order < (item?.order || 0)
+            ? res + v.contentHeight
+            : res, 0);
+    }, [stack]);
+    return {
+        stackProps: {
+            ...(item || {}),
+            position,
+            offset: offset[position],
+            stackPosition,
+            setContentHeight,
+        },
+        setActive,
+        setOffset,
+    };
+};
+export const useRepeatedStackItem = ({ id, position, }) => {
+    const [idList, setIdList] = useState([]);
+    const lastIndex = useRef(0);
+    const { setActive } = useStackInteraction();
+    const append = useCallback(() => {
+        const nextId = `${id}-${lastIndex.current}`;
+        lastIndex.current += 1;
+        setActive({ id: nextId, position, active: true });
+        setIdList((prev) => [...prev, nextId]);
+    }, [id, position, idList]);
+    const onHide = useCallback((id) => {
+        setActive({ id, position, active: false });
+        setIdList((prev) => prev.filter((item) => item !== id));
+    }, [position]);
+    return {
+        idList,
+        append,
+        onHide,
+    };
+};

package/StackNotificationManager/index.d.ts

@@ -0,0 +1,3 @@
+export { StackNotificationManagerProvider, StackPosition, StackOffset, StackPositionOffset, ManagedStack, } from './StackNotificationManager';
+export { useStackNotificationManager, useStackInteraction, useRepeatedStackItem, } from './hooks';
+//# sourceMappingURL=index.d.ts.map

package/StackNotificationManager/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/StackNotificationManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gCAAgC,EAChC,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,YAAY,GACb,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,2BAA2B,EAC3B,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,SAAS,CAAC"}

package/StackNotificationManager/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRepeatedStackItem = exports.useStackInteraction = exports.useStackNotificationManager = exports.StackNotificationManagerProvider = void 0;
+var StackNotificationManager_1 = require("./StackNotificationManager");
+Object.defineProperty(exports, "StackNotificationManagerProvider", { enumerable: true, get: function () { return StackNotificationManager_1.StackNotificationManagerProvider; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useStackNotificationManager", { enumerable: true, get: function () { return hooks_1.useStackNotificationManager; } });
+Object.defineProperty(exports, "useStackInteraction", { enumerable: true, get: function () { return hooks_1.useStackInteraction; } });
+Object.defineProperty(exports, "useRepeatedStackItem", { enumerable: true, get: function () { return hooks_1.useRepeatedStackItem; } });
+//# sourceMappingURL=index.js.map

package/StackNotificationManager/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/StackNotificationManager/index.ts"],"names":[],"mappings":";;;AAAA,uEAMoC;AALlC,4IAAA,gCAAgC,OAAA;AAMlC,iCAIiB;AAHf,oHAAA,2BAA2B,OAAA;AAC3B,4GAAA,mBAAmB,OAAA;AACnB,6GAAA,oBAAoB,OAAA"}

package/StackNotificationManager/index.mjs

@@ -0,0 +1,2 @@
+export { StackNotificationManagerProvider, } from './StackNotificationManager';
+export { useStackNotificationManager, useStackInteraction, useRepeatedStackItem, } from './hooks';

package/Toast/Toast.css

@@ -1 +1 @@
-:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--Toast-z-index:1}.spui-Toast{box-sizing:border-box;left:0;padding:0 12px;position:fixed;right:0;text-align:center;z-index:var(--Toast-z-index)}.spui-Toast-content{align-items:center;border-radius:52px;box-shadow:0 11px 28px rgba(8,18,26,.24);box-sizing:border-box;display:inline-flex;margin:0;max-width:360px;min-height:48px;padding:0 16px 0 20px}.spui-Toast-contentInfo{flex-shrink:0;font-size:1.375rem;line-height:0;margin-right:8px}.spui-Toast-contentText{font-family:inherit;font-size:.875rem;font-weight:700;line-height:1.6;overflow:hidden;white-space:nowrap}.spui-Toast--top{top:0;transform:translateY(calc(var(--Toast--initial-height) - var(--Toast--offset-top)))}.spui-Toast--bottom{bottom:0;transform:translateY(calc(var(--Toast--initial-height)*-1 - var(--Toast--offset-bottom)*-1))}.spui-Toast--slide{opacity:0;transition:transform .3s ease,opacity .3s ease}.spui-Toast--hidden{visibility:hidden}.spui-Toast-slide--in{opacity:1;transition:transform .5s ease,opacity .5s ease}.spui-Toast-slide--in.spui-Toast--top{transform:translateY(var(--Toast--order-offset-top))}.spui-Toast-slide--in.spui-Toast--bottom{transform:translateY(var(--Toast--order-offset-bottom))}.spui-Toast-iconButton{--IconButton--neutral-backgroundColor:transparent;margin-left:12px}.spui-Toast-contentInfo--information{color:var(--color-object-high-emphasis-inverse)}.spui-Toast-content--information{background-color:var(--gray-80);color:var(--color-text-high-emphasis-inverse)}.spui-Toast-iconButton--information{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-Toast-contentInfo--confirmation{color:var(--color-object-accent-primary)}.spui-Toast-content--confirmation{background-color:var(--color-surface-primary);border:2px solid var(--color-border-low-emphasis);color:var(--color-text-accent-primary)}.spui-Toast-iconButton--confirmation{--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-color:var(--color-object-low-emphasis)}.spui-Toast-contentInfo--error{color:var(--color-object-high-emphasis-inverse)}.spui-Toast-content--error{background-color:var(--color-surface-caution);color:var(--color-text-high-emphasis-inverse)}.spui-Toast-iconButton--error{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}@media (prefers-reduced-motion:reduce){.spui-Toast--slide,.spui-Toast-slide--in{transition-duration:.1ms}}@media (max-width:384px){.spui-Toast-content{max-width:100%}}
+:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--Toast-z-index:1}.spui-Toast{box-sizing:border-box;left:0;opacity:0;padding:0 12px;pointer-events:none;position:fixed;right:0;text-align:center;z-index:var(--Toast-z-index)}.spui-Toast-content{align-items:center;border-radius:52px;box-shadow:0 11px 28px rgba(8,18,26,.24);box-sizing:border-box;display:inline-flex;margin:0;max-width:360px;min-height:48px;padding:0 16px 0 20px;pointer-events:auto}.spui-Toast-contentInfo{flex-shrink:0;font-size:1.375rem;line-height:0;margin-right:8px}.spui-Toast-contentText{font-family:inherit;font-size:.875rem;font-weight:700;line-height:1.6;overflow:hidden;white-space:nowrap}.spui-Toast--top{top:0;transform:translateY(calc(var(--Toast--initial-height) - var(--Toast--offset-top)))}.spui-Toast--bottom{bottom:0;transform:translateY(calc(var(--Toast--initial-height)*-1 - var(--Toast--offset-bottom)*-1))}.spui-Toast--slide{transition:transform .3s ease,opacity .3s ease}.spui-Toast--hidden{visibility:hidden}.spui-Toast-slide--in{opacity:1;transition:transform .5s ease,opacity .5s ease}.spui-Toast-slide--in.spui-Toast--top{transform:translateY(var(--Toast--order-offset-top))}.spui-Toast-slide--in.spui-Toast--bottom{transform:translateY(var(--Toast--order-offset-bottom))}.spui-Toast-iconButton{--IconButton--neutral-backgroundColor:transparent;margin-left:12px}.spui-Toast-contentInfo--information{color:var(--color-object-high-emphasis-inverse)}.spui-Toast-content--information{background-color:var(--gray-80);color:var(--color-text-high-emphasis-inverse)}.spui-Toast-iconButton--information{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-Toast-contentInfo--confirmation{color:var(--color-object-accent-primary)}.spui-Toast-content--confirmation{background-color:var(--color-surface-primary);border:2px solid var(--color-border-low-emphasis);color:var(--color-text-accent-primary)}.spui-Toast-iconButton--confirmation{--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-color:var(--color-object-low-emphasis)}.spui-Toast-contentInfo--error{color:var(--color-object-high-emphasis-inverse)}.spui-Toast-content--error{background-color:var(--color-surface-caution);color:var(--color-text-high-emphasis-inverse)}.spui-Toast-iconButton--error{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}@media (prefers-reduced-motion:reduce){.spui-Toast--slide,.spui-Toast-slide--in{transition-duration:.1ms}}@media (max-width:384px){.spui-Toast-content{max-width:100%}}

package/Toast/Toast.d.ts

@@ -1,22 +1,24 @@
-import React from 'react';
-declare type Position = 'top' | 'bottom';
+import React, { FC } from 'react';
+import { ManagedStack, StackPositionOffset } from '../StackNotificationManager';
+declare type Position = keyof Pick<ManagedStack, 'topCenter' | 'bottomCenter'>;
 declare type PositionOffset = {
-    [K in Position]?: number;
+    [K in keyof StackPositionOffset<'top' | 'bottom'>]?: StackPositionOffset[K];
 };
 declare type Variant = 'information' | 'confirmation' | 'error';
 declare type Props = {
     children?: React.ReactNode;
     active?: boolean;
-    order?: number;
     offset?: PositionOffset;
     duration?: number;
     onHide?: () => void;
     position?: Position;
     icon?: React.ReactNode;
     variant?: Variant;
+    setContentHeight?: (height: number) => void;
+    stackPosition?: number;
 };
 export declare const BLOCK_NAME = "spui-Toast";
 export declare const ANIMATION_DURATION = 300;
-export declare const Toast: ({ children, active, position, order, offset: _offset, onHide, icon, variant, }: Props) => React.ReactElement;
+export declare const Toast: FC<Props>;
 export {};
 //# sourceMappingURL=Toast.d.ts.map

package/Toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,aAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjC,aAAK,cAAc,GAAG;KACnB,CAAC,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM;CACzB,CAAC;AAEF,aAAK,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;AAExD,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,UAAU,eAAe,CAAC;AAGvC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAMtC,eAAO,MAAM,KAAK,mFASf,KAAK,KAAG,MAAM,YAoGhB,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAIhF,aAAK,QAAQ,GAAG,MAAM,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,cAAc,CAAC,CAAC;AACvE,aAAK,cAAc,GAAG;KACnB,CAAC,IAAI,MAAM,mBAAmB,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC;CAC5E,CAAC;AAEF,aAAK,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;AAExD,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,eAAe,CAAC;AAGvC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAMtC,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,KAAK,CAuI3B,CAAC"}

package/Toast/Toast.js

@@ -35,14 +35,17 @@ var VERTICAL_GAP = 20;
 var TOTAL_ANIMATION_DURATION = MAX_DURATION - exports.ANIMATION_DURATION;
 var Toast = function (_a) {
     var _b;
-    var children = _a.children, _c = _a.active, active = _c === void 0 ? false : _c, _d = _a.position, position = _d === void 0 ? 'top' : _d, _e = _a.order, order = _e === void 0 ? 0 : _e, _f = _a.offset, _offset = _f === void 0 ? {} : _f, onHide = _a.onHide, icon = _a.icon, _g = _a.variant, variant = _g === void 0 ? 'information' : _g;
-    var _h = (0, react_1.useState)(false), isShow = _h[0], setIsShow = _h[1];
+    var _c, _d;
+    var children = _a.children, _active = _a.active, _e = _a.position, position = _e === void 0 ? 'topCenter' : _e, _f = _a.offset, _offset = _f === void 0 ? {} : _f, onHide = _a.onHide, icon = _a.icon, _g = _a.variant, variant = _g === void 0 ? 'information' : _g, _h = _a.stackPosition, stackPosition = _h === void 0 ? 0 : _h, setContentHeight = _a.setContentHeight;
+    var _j = (0, react_1.useState)(false), isShow = _j[0], setIsShow = _j[1];
     var offset = {
-        top: _offset.top || 24,
-        bottom: _offset.bottom || 24,
+        top: (_c = _offset.top) !== null && _c !== void 0 ? _c : 24,
+        bottom: (_d = _offset.bottom) !== null && _d !== void 0 ? _d : 24,
     };
     var timeoutID = (0, react_1.useRef)(null);
-    var _j = (0, react_1.useState)(0), clientHeight = _j[0], setClientHeight = _j[1];
+    var _k = (0, react_1.useState)(0), clientHeight = _k[0], setClientHeight = _k[1];
+    var _l = (0, react_1.useState)(false), shouldAnimation = _l[0], setShouldAnimation = _l[1];
+    var _m = (0, react_1.useState)(false), active = _m[0], setActive = _m[1];
     var setIsShowWithTimeout = (0, react_1.useCallback)(function () {
         // Out animation is executed after `TOTAL_ANIMATION_DURATION` seconds.
         if (timeoutID.current === null && isShow) {
@@ -60,6 +63,7 @@ var Toast = function (_a) {
     var handleTransitionEnd = (0, react_1.useCallback)(function () {
         if (onHide && !isShow) {
             onHide();
+            setActive(false);
             timeoutID.current = null;
         }
     }, [isShow, setIsShow, onHide]);
@@ -72,23 +76,42 @@ var Toast = function (_a) {
             setIsShow(true);
         }
     }, [active]);
+    (0, react_1.useEffect)(function () {
+        if (isShow) {
+            setShouldAnimation(true);
+        }
+        if (!active) {
+            setShouldAnimation(false);
+        }
+    }, [active, isShow]);
     (0, react_1.useEffect)(function () {
         setIsShowWithTimeout();
         return resetTimeout;
     }, [setIsShowWithTimeout, resetTimeout]);
-    var contentHeight = clientHeight;
-    var offsetPosition = offset[position] || 0;
-    var orderOffset = order * (contentHeight + VERTICAL_GAP) + offsetPosition;
+    (0, react_1.useEffect)(function () {
+        if (_active) {
+            setActive(true);
+        }
+        if (!_active && isShow) {
+            setIsShow(false);
+        }
+    }, [_active, isShow]);
+    (0, react_1.useEffect)(function () {
+        setContentHeight === null || setContentHeight === void 0 ? void 0 : setContentHeight(clientHeight + VERTICAL_GAP);
+    }, [clientHeight]);
+    var positionPrefix = position.startsWith('top') ? 'top' : 'bottom';
+    var offsetPosition = offset[positionPrefix] || 0;
+    var orderOffset = stackPosition + offsetPosition;
     return (react_1.default.createElement("div", { style: (_b = {},
-            _b['--Toast--initial-height'] = "".concat(orderOffset - contentHeight + offsetPosition, "px"),
+            _b['--Toast--initial-height'] = "".concat(orderOffset - clientHeight + offsetPosition, "px"),
             _b['--Toast--order-offset-top'] = "".concat(orderOffset, "px"),
             _b['--Toast--order-offset-bottom'] = "".concat(-orderOffset, "px"),
             _b['--Toast--offset-top'] = "".concat(offset.top, "px"),
             _b['--Toast--offset-bottom'] = "".concat(offset.bottom, "px"),
             _b), className: [
             exports.BLOCK_NAME,
-            "".concat(exports.BLOCK_NAME, "--").concat(position),
-            "".concat(exports.BLOCK_NAME, "--slide"),
+            "".concat(exports.BLOCK_NAME, "--").concat(positionPrefix),
+            shouldAnimation && "".concat(exports.BLOCK_NAME, "--slide"),
             isShow && "".concat(exports.BLOCK_NAME, "-slide--in"),
             !active && "".concat(exports.BLOCK_NAME, "--hidden"),
         ]

package/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"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"}

package/Toast/Toast.mjs

@@ -7,14 +7,16 @@ export const ANIMATION_DURATION = 300;
 const MAX_DURATION = 4000;
 const VERTICAL_GAP = 20;
 const TOTAL_ANIMATION_DURATION = MAX_DURATION - ANIMATION_DURATION;
-export const Toast = ({ children, active = false, position = 'top', order = 0, offset: _offset = {}, onHide, icon, variant = 'information', }) => {
+export const Toast = ({ children, active: _active, position = 'topCenter', offset: _offset = {}, onHide, icon, variant = 'information', stackPosition = 0, setContentHeight, }) => {
     const [isShow, setIsShow] = useState(false);
     const offset = {
-        top: _offset.top || 24,
-        bottom: _offset.bottom || 24,
+        top: _offset.top ?? 24,
+        bottom: _offset.bottom ?? 24,
     };
     const timeoutID = useRef(null);
     const [clientHeight, setClientHeight] = useState(0);
+    const [shouldAnimation, setShouldAnimation] = useState(false);
+    const [active, setActive] = useState(false);
     const setIsShowWithTimeout = useCallback(() => {
         // Out animation is executed after `TOTAL_ANIMATION_DURATION` seconds.
         if (timeoutID.current === null && isShow) {
@@ -32,6 +34,7 @@ export const Toast = ({ children, active = false, position = 'top', order = 0, o
     const handleTransitionEnd = useCallback(() => {
         if (onHide && !isShow) {
             onHide();
+            setActive(false);
             timeoutID.current = null;
         }
     }, [isShow, setIsShow, onHide]);
@@ -44,23 +47,42 @@ export const Toast = ({ children, active = false, position = 'top', order = 0, o
             setIsShow(true);
         }
     }, [active]);
+    useEffect(() => {
+        if (isShow) {
+            setShouldAnimation(true);
+        }
+        if (!active) {
+            setShouldAnimation(false);
+        }
+    }, [active, isShow]);
     useEffect(() => {
         setIsShowWithTimeout();
         return resetTimeout;
     }, [setIsShowWithTimeout, resetTimeout]);
-    const contentHeight = clientHeight;
-    const offsetPosition = offset[position] || 0;
-    const orderOffset = order * (contentHeight + VERTICAL_GAP) + offsetPosition;
+    useEffect(() => {
+        if (_active) {
+            setActive(true);
+        }
+        if (!_active && isShow) {
+            setIsShow(false);
+        }
+    }, [_active, isShow]);
+    useEffect(() => {
+        setContentHeight?.(clientHeight + VERTICAL_GAP);
+    }, [clientHeight]);
+    const positionPrefix = position.startsWith('top') ? 'top' : 'bottom';
+    const offsetPosition = offset[positionPrefix] || 0;
+    const orderOffset = stackPosition + offsetPosition;
     return (React.createElement("div", { style: {
-            ['--Toast--initial-height']: `${orderOffset - contentHeight + offsetPosition}px`,
+            ['--Toast--initial-height']: `${orderOffset - clientHeight + offsetPosition}px`,
             ['--Toast--order-offset-top']: `${orderOffset}px`,
             ['--Toast--order-offset-bottom']: `${-orderOffset}px`,
             ['--Toast--offset-top']: `${offset.top}px`,
             ['--Toast--offset-bottom']: `${offset.bottom}px`,
         }, className: [
             BLOCK_NAME,
-            `${BLOCK_NAME}--${position}`,
-            `${BLOCK_NAME}--slide`,
+            `${BLOCK_NAME}--${positionPrefix}`,
+            shouldAnimation && `${BLOCK_NAME}--slide`,
             isShow && `${BLOCK_NAME}-slide--in`,
             !active && `${BLOCK_NAME}--hidden`,
         ]