@moneyforward/mfui-components 4.1.0 → 4.1.2

package/dist/src/GlobalHeader/GlobalHeader.d.ts

@@ -2,5 +2,8 @@ import { type GlobalHeaderProps } from './GlobalHeader.types';
 /**
  * The global header component.
  * The global header component is a top-level navigation component that is used to display the application's logo and navigation elements.
+ *
+ * `GlobalHeader` should generally be paired with `MainNavigation` for the primary navigation area.
+ * If you need a self-contained layout that already includes both header and navigation features, use `Sidebar` instead.
  */
 export declare function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, experimentalApplicationsMenuButtonProps, logoSlot, rightPaneSlot, disableResponsive, }: GlobalHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/GlobalHeader/GlobalHeader.js

@@ -8,6 +8,9 @@ import { ApplicationsExperimentalIcon } from './ApplicationsExperimentalIcon';
 /**
  * The global header component.
  * The global header component is a top-level navigation component that is used to display the application's logo and navigation elements.
+ *
+ * `GlobalHeader` should generally be paired with `MainNavigation` for the primary navigation area.
+ * If you need a self-contained layout that already includes both header and navigation features, use `Sidebar` instead.
  */
 export function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, experimentalApplicationsMenuButtonProps, logoSlot, rightPaneSlot, disableResponsive = false, }) {
     const responsive = !disableResponsive;

package/dist/src/MainNavigation/MainNavigation.d.ts

@@ -5,5 +5,8 @@ import { type MainNavigationProps, type MainNavigationRef } from './MainNavigati
  *
  * When the viewport is narrow, the navigation will be displayed as a drawer.
  * When the viewport is not narrow, the navigation will be displayed as a sidebar.
+ *
+ * `MainNavigation` is intended to be paired with `GlobalHeader`. If you need a self-contained
+ * layout that already includes both header and navigation features, use `Sidebar` instead.
  */
 export declare const MainNavigation: import("react").ForwardRefExoticComponent<MainNavigationProps & import("react").RefAttributes<MainNavigationRef>>;

package/dist/src/MainNavigation/MainNavigation.js

@@ -8,6 +8,9 @@ import { NarrowViewportMainNavigation } from './NarrowViewportMainNavigation';
  *
  * When the viewport is narrow, the navigation will be displayed as a drawer.
  * When the viewport is not narrow, the navigation will be displayed as a sidebar.
+ *
+ * `MainNavigation` is intended to be paired with `GlobalHeader`. If you need a self-contained
+ * layout that already includes both header and navigation features, use `Sidebar` instead.
  */
 export const MainNavigation = forwardRef(({ className, featureShortcut, navigationItems, disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, nestedNavigationDisplay, isCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }, ref) => {
     const commonProps = {

package/dist/src/SidePane/hooks/useSidePaneStateController.js

@@ -56,10 +56,14 @@ export function useSidePaneStateController({ open, onClose, ref, insideElement }
     // Autofocus to the pane window (`role="dialog"` element) when it opens.
     // Screen readers honor `aria-modal` only when focus is on the `role="dialog"`
     // element or its descendants, so the root wrapper must not be the focus target.
+    // `preventScroll` is required because the pane window starts outside its container
+    // (the slide-in animation begins at `right: -100%`). Without it the browser scrolls
+    // the container to reveal the pane, which shifts the surrounding content and hides
+    // the animation — `overflow: hidden` containers are still programmatically scrollable.
     useEffect(() => {
         if (!localOpen)
             return;
-        (insideElement ?? sidePaneElement)?.focus();
+        (insideElement ?? sidePaneElement)?.focus({ preventScroll: true });
     }, [insideElement, sidePaneElement, localOpen]);
     return {
         localOpen,

package/dist/src/Sidebar/Sidebar.d.ts

@@ -10,6 +10,9 @@ declare function SidebarBase({ className, logoSlot, mainNavigationItems, extraNa
  * A navigation layout component that combines a logo header, a navigation area,
  * and a footer with icon menu and user information.
  *
+ * `Sidebar` is a self-contained alternative to `GlobalHeader` and `MainNavigation`, since it
+ * already includes both header and navigation features.
+ *
  * The width is resizable via the drag handle on the right edge. See the `WidthPersistence` story for
  * an example of persisting the width across reloads via `onWidthChange` and `defaultWidth`.
  *

package/dist/src/Sidebar/Sidebar.js

@@ -51,6 +51,9 @@ function SidebarToggleButton({ isCollapsed, ariaLabel, navId, onClick, }) {
  * A navigation layout component that combines a logo header, a navigation area,
  * and a footer with icon menu and user information.
  *
+ * `Sidebar` is a self-contained alternative to `GlobalHeader` and `MainNavigation`, since it
+ * already includes both header and navigation features.
+ *
  * The width is resizable via the drag handle on the right edge. See the `WidthPersistence` story for
  * an example of persisting the width across reloads via `onWidthChange` and `defaultWidth`.
  *

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.2",
   "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"
   },