@moneyforward/mfui-components 4.1.0 → 4.1.1

package/dist/src/Toast/Toast.js

@@ -8,6 +8,8 @@ import { IconButton } from '../IconButton';
 import { Typography } from '../Typography';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
 import { ProgressIndicator } from '../ProgressIndicator';
+import { useLatest } from '../utilities/state/useLatest';
+const MIN_AUTO_DISMISS_DURATION_MS = 5000;
 /**
  * The general-purpose Toast component.
  * This component switches the variants of looks depends on the props: type and actionText.
@@ -17,7 +19,10 @@ export const Toast = forwardRef(({ className, type = 'success', actionSlot, mess
     const toastRef = useRef(null);
     const timerRef = useRef(null);
     const startTimeRef = useRef(null);
-    const localDurationRef = useRef(null);
+    const remainingDurationRef = useRef(0);
+    // Prevent duplicate callbacks when a consumer keeps an auto-dismissed Toast mounted.
+    const hasAutoDismissedRef = useRef(false);
+    const latestOnClose = useLatest(onClose);
     // The status is conveyed by the message content itself, so the status icon is decorative
     // and hidden from assistive technology unless a label is explicitly provided.
     const statusIconLabel = statusIconProps?.['aria-label'];
@@ -37,46 +42,54 @@ export const Toast = forwardRef(({ className, type = 'success', actionSlot, mess
         }
         return _jsx(Pending, { ...statusIconA11yProps });
     })();
-    // Handle the duration of the toast
+    // Keep cleanup tied to the duration lifecycle. Cleaning up in the focus-driven effect below
+    // would discard the remaining duration whenever focus enters or leaves the Toast.
     useEffect(() => {
-        // If the duration is not provided or under `5000`,
-        // the toast message will be displayed until it's closed via the close button.
-        if (!duration || duration < 5000) {
-            localDurationRef.current = 0;
+        remainingDurationRef.current = duration;
+        hasAutoDismissedRef.current = false;
+        return () => {
             if (timerRef.current) {
                 clearTimeout(timerRef.current);
             }
-            return;
-        }
-        localDurationRef.current = duration;
+            timerRef.current = null;
+            startTimeRef.current = null;
+        };
     }, [duration]);
     useEffect(() => {
-        // If localDurationRef is 0, the toast will not be closed automatically.
-        if (!localDurationRef.current || localDurationRef.current <= 0) {
+        if (duration < MIN_AUTO_DISMISS_DURATION_MS || hasAutoDismissedRef.current) {
             return;
         }
-        const isFocusVisible = !!toastRef.current &&
+        const isFocusWithinToast = !!toastRef.current &&
             !!activeElement &&
             (toastRef.current === activeElement ||
                 activeElement.closest('[data-mfui-content="toast-item"]') === toastRef.current);
-        // If the toast is not focused, start the timer to close the toast.
-        if (!isFocusVisible && !timerRef.current) {
-            startTimeRef.current = Date.now();
-            timerRef.current = setTimeout(() => {
-                onClose?.();
-            }, localDurationRef.current);
-            return;
-        }
-        // If the toast is focused, stop the timer and calculate the left time.
-        if (isFocusVisible) {
-            const passedTime = Date.now() - (startTimeRef.current ?? 0);
-            const leftTime = localDurationRef.current - passedTime;
-            if (timerRef.current) {
-                clearTimeout(timerRef.current);
+        if (isFocusWithinToast) {
+            if (!timerRef.current || startTimeRef.current === null) {
+                return;
             }
+            const passedTime = Date.now() - startTimeRef.current;
+            clearTimeout(timerRef.current);
             timerRef.current = null;
-            localDurationRef.current = leftTime;
+            startTimeRef.current = null;
+            remainingDurationRef.current = Math.max(remainingDurationRef.current - passedTime, 0);
+            return;
+        }
+        if (timerRef.current) {
+            return;
         }
-    }, [activeElement, onClose]);
+        if (remainingDurationRef.current <= 0) {
+            hasAutoDismissedRef.current = true;
+            latestOnClose.current?.();
+            return;
+        }
+        startTimeRef.current = Date.now();
+        timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            startTimeRef.current = null;
+            remainingDurationRef.current = 0;
+            hasAutoDismissedRef.current = true;
+            latestOnClose.current?.();
+        }, remainingDurationRef.current);
+    }, [activeElement, duration, latestOnClose]);
     return (_jsx(FocusIndicator, { children: _jsxs("div", { ref: mergeRefs(ref, toastRef), className: cx(classes.item, 'mfui-Toast__item', className), role: type === 'failure' ? 'alert' : 'status', "aria-live": type === 'failure' ? undefined : 'polite', "data-mfui-content": "toast-item", ...props, children: [_jsxs("div", { className: cx(classes.body, 'mfui-Toast__body'), children: [_jsxs("div", { className: cx(classes.message, 'mfui-Toast__message'), children: [_jsx("div", { className: cx(classes.leftIcon, 'mfui-Toast__leftIcon'), children: customIcon ?? icon }), _jsx(Typography, { children: message })] }), _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', disabled: !showCloseButton, onClick: onClose, children: _jsx(Close, {}) })] }), actionSlot ? _jsx("div", { className: cx(classes.footer, 'mfui-Toast__footer'), children: actionSlot }) : null] }) }));
 });

package/dist/src/Toast/ToastContainer/ToastContainer.js

@@ -74,14 +74,24 @@ export function ToastContainer({ items, onItemClose }) {
     }, [items, isMobile]);
     // Detect focus on the toast or its content
     useLayoutEffect(() => {
-        const checkFocusVisible = () => {
-            setActiveElement(document.activeElement);
+        const handleFocus = (event) => {
+            if (!(event.target instanceof Element)) {
+                return;
+            }
+            setActiveElement(event.target);
+        };
+        const handleBlur = (event) => {
+            // Losing window focus also has no related target, but DOM focus remains on the same element.
+            if (event.relatedTarget === null && !document.hasFocus()) {
+                return;
+            }
+            setActiveElement(event.relatedTarget instanceof Element ? event.relatedTarget : null);
         };
-        window.addEventListener('focus', checkFocusVisible, true);
-        window.addEventListener('blur', checkFocusVisible, true);
+        window.addEventListener('focus', handleFocus, true);
+        window.addEventListener('blur', handleBlur, true);
         return () => {
-            window.removeEventListener('focus', checkFocusVisible);
-            window.removeEventListener('blur', checkFocusVisible);
+            window.removeEventListener('focus', handleFocus, true);
+            window.removeEventListener('blur', handleBlur, true);
         };
     }, []);
     // Close the first toast when the "Esc" key is pressed and the toast or its content has a focus

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",
@@ -51,7 +51,7 @@
     "react-dom": "19.2.3",
     "storybook": "10.5.10",
     "ts-node": "10.9.2",
-    "tsx": "4.23.12",
+    "tsx": "4.23.13",
     "vitest": "4.1.11",
     "oxlint-config-mfui": "^1.0.0"
   },
@@ -63,8 +63,8 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@tanstack/react-virtual": "^3.13.18",
     "dayjs": "^1.11.13",
-    "@moneyforward/mfui-design-tokens": "^4.0.0",
-    "@moneyforward/mfui-icons-react": "^4.0.0"
+    "@moneyforward/mfui-icons-react": "^4.0.0",
+    "@moneyforward/mfui-design-tokens": "^4.0.0"
   },
   "scripts": {
     "prepare:panda": "panda codegen",