@moneyforward/mfui-components 4.3.1 → 4.6.0

package/dist/src/NumberBox/NumberBox.types.d.ts

@@ -21,4 +21,39 @@ export type NumberBoxProps = Omit<TextBoxProps, 'onChange' | 'prefixSlot' | 'suf
      * @default 'right'
      */
     textAlign?: 'left' | 'right';
+    /**
+     * The maximum number of digits (`0-9`) allowed in the integer part of the value, i.e.
+     * before the decimal point. The minus sign, the decimal point and the grouping commas
+     * are not counted.
+     *
+     * This limit is independent of `decimalPlaces`, so the two stack: `maxIntegerDigits={13}`
+     * combined with `decimalPlaces={2}` allows up to 13 integer digits and 2 decimal digits
+     * (15 digits total).
+     *
+     * An edit that would exceed the limit is silently rejected: the previous value and the
+     * cursor position are kept and `onChange` is not called. Because nothing is announced,
+     * state the limit up front in an adjacent `HelpMessage` referenced by `aria-describedby`
+     * (WCAG 2.2 3.3.2).
+     *
+     * The limit applies to typing and pasting only. A `value` or `defaultValue` that already
+     * exceeds it is displayed as is, and the user can still edit it back into range.
+     *
+     * @default undefined
+     */
+    maxIntegerDigits?: number;
+    /**
+     * The maximum number of digits allowed after the decimal point.
+     * `0` also rejects the decimal point itself, making the field integers-only.
+     *
+     * An edit that would exceed the limit is silently rejected: the previous value and the
+     * cursor position are kept and `onChange` is not called. Because nothing is announced,
+     * state the limit up front in an adjacent `HelpMessage` referenced by `aria-describedby`
+     * (WCAG 2.2 3.3.2).
+     *
+     * The limit applies to typing and pasting only. A `value` or `defaultValue` that already
+     * exceeds it is displayed as is, and the user can still edit it back into range.
+     *
+     * @default undefined
+     */
+    decimalPlaces?: number;
 };

package/dist/src/PageHeader/PageHeader.types.d.ts

@@ -44,6 +44,8 @@ export type PageHeaderProps = {
     showBackButton?: boolean;
     /**
      * It's for controlling the back button.
+     *
+     * The default `aria-label` is `戻る`, but set it to `{destination}へ戻る` (e.g. `請求書一覧へ戻る`) so that users know where the button navigates to.
      */
     backButtonProps?: Omit<IconButtonProps, 'outlined' | 'children'>;
     /**

package/dist/src/Pagination/Pagination.js

@@ -8,7 +8,10 @@ import { cx } from '../../styled-system/css';
  * The general-purpose Pagination component.
  * This component switches the looks depends on the props: showItemsCount, showPagePicker and showItemsPerPage.
  */
-export function Pagination({ 'aria-label': ariaLabel, currentPageNumber, totalItems, itemsPerPage, unitLabel = '件', prevButtonProps, pageSelectBoxProps, nextButtonProps, itemsPerPageProps = {}, itemsPerPageSelectBoxProps, showItemsCount = false, showPagePicker = false, showItemsPerPage = false, alignment = 'left', pageSuffixLabel = 'ページ', onPageChange, ...props }) {
+export function Pagination({ 'aria-label': ariaLabel, currentPageNumber, totalItems, itemsPerPage, unitLabel = '件', prevButtonProps, pageSelectBoxProps, nextButtonProps, itemsPerPageProps = {}, itemsPerPageSelectBoxProps, showItemsCount = false, showPagePicker = false, 
+// No default: `showItemsPerPage` is a required discriminant in both members of the
+// props union, so a default here is unreachable.
+showItemsPerPage, alignment = 'left', pageSuffixLabel = 'ページ', onPageChange, ...props }) {
     const { label = '1ページの表示数', options, onChange } = itemsPerPageProps;
     const totalPages = Math.ceil(totalItems / itemsPerPage);
     const classes = paginationSlotRecipe({ alignment });

package/dist/src/Popover/Popover.js

@@ -40,6 +40,15 @@ export function Popover({ renderTrigger, renderContent, open, onOpenStateChanged
         constrainToTriggerWidth: enableConstrainedContentWidth,
         enableCenteredLayoutOnNarrowViewport,
     });
+    // Mirrors `refs.floating.current` into state so `TargetDomNodeProvider` below can be
+    // given it directly, instead of reading a ref's `.current` during render (unsafe: a
+    // ref update never triggers the re-render needed to pass a fresh value to context
+    // consumers). `refs.setFloating` still runs so floating-ui keeps positioning it.
+    const [floatingElement, setFloatingElement] = useState(null);
+    const setFloatingRef = useCallback((node) => {
+        refs.setFloating(node);
+        setFloatingElement(node);
+    }, [refs]);
     // Fire onOpen / onClose *only* when the open state actually changes.
     // We keep a ref of the previous open state so a new toggleEvent while already
     // open does not retrigger `onOpen`, which previously caused unexpected focus
@@ -119,8 +128,7 @@ export function Popover({ renderTrigger, renderContent, open, onOpenStateChanged
             if (isInShadowDOM) {
                 // In Shadow DOM: check both shadow and document active elements
                 isFocusStillWithinComponent =
-                    isElementWithinComponent(shadowActiveElement) ||
-                        isElementWithinComponent(documentActiveElement);
+                    isElementWithinComponent(shadowActiveElement) || isElementWithinComponent(documentActiveElement);
                 // Special case: If shadow activeElement is null, it means focus has left the shadow DOM.
                 // We should trigger onBlur unless the document activeElement is still within our component
                 // (which would be the case if focus moved to the shadow host or related elements)
@@ -254,8 +262,8 @@ export function Popover({ renderTrigger, renderContent, open, onOpenStateChanged
             });
         };
     }, [isPopoverOpen, refs.reference, refs.floating]);
-    return (_jsxs(_Fragment, { children: [renderTrigger(options), shouldRenderTheContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsx("div", { ref: refs.setFloating, id: contentProps.id, tabIndex: contentProps.tabIndex ?? 0, "data-mfui-content": "popover-portal-content", "data-mfui-popover-depth": nestingDepth, className: cx(classes.root, 'mfui-Popover__root', contentProps.className), style: {
+    return (_jsxs(_Fragment, { children: [renderTrigger(options), shouldRenderTheContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsx("div", { ref: setFloatingRef, id: contentProps.id, tabIndex: contentProps.tabIndex ?? 0, "data-mfui-content": "popover-portal-content", "data-mfui-popover-depth": nestingDepth, className: cx(classes.root, 'mfui-Popover__root', contentProps.className), style: {
                         ...floatingStyles,
                         ...(!enableAutoUnmount && !isPopoverOpen && { display: 'none' }),
-                    }, onKeyDown: handleKeyDownPopover, children: _jsx(TargetDomNodeProvider, { targetDomNode: refs.floating.current, children: _jsx(PopoverContextProvider, { children: renderContent(options) }) }) }) })) : null] }));
+                    }, onKeyDown: handleKeyDownPopover, children: _jsx(TargetDomNodeProvider, { targetDomNode: floatingElement, children: _jsx(PopoverContextProvider, { children: renderContent(options) }) }) }) })) : null] }));
 }

package/dist/src/RadioButtonCard/RadioButtonCard.js

@@ -28,5 +28,7 @@ export const RadioButtonCard = forwardRef(({ label, layout = 'vertical', renderD
         disableResponsive,
         isResponsive: Boolean(responsiveSlot.narrowViewport),
     });
-    return (_jsxs("div", { className: cx(classes.root, 'mfui-RadioButtonCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-RadioButtonCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(RadioButton, { ref: ref, ...props, className: cx(classes.input, 'mfui-RadioButtonCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-RadioButtonCard__label'), children: label })] }) }), responsiveSlot.narrowViewport && disableResponsive ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.narrowViewport ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.base ? (_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) })) : null] }));
+    return (_jsxs("div", { className: cx(classes.root, 'mfui-RadioButtonCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-RadioButtonCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(RadioButton, { ref: ref, ...props, className: cx(classes.input, 'mfui-RadioButtonCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-RadioButtonCard__label'), children: label })] }) }), responsiveSlot.narrowViewport ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : (
+            /* For function-based renderDetailsSlot or ResponsiveSlot with only base, use single details element */
+            responsiveSlot.base && (_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) })))] }));
 });

package/dist/src/SelectBox/SelectBox.js

@@ -47,7 +47,7 @@ export const SelectBox = forwardRef((props, ref) => {
     const optionPanelRef = useRef(null);
     const scrollWrapperRef = useRef(null);
     const searchInputRef = useRef(null);
-    const [localSelectedOption, setLocalSelectedOption] = useState(() => defaultValue ?? null);
+    const [localSelectedOption, setLocalSelectedOption] = useState(() => value ?? defaultValue ?? null);
     const { isOpen: isOptionPanelOpen, toggle: toggleOptionPanel, close: closeOptionPanel, } = useDisclosure({
         value: false,
         onToggle: onOpenStateChanged,
@@ -63,17 +63,16 @@ export const SelectBox = forwardRef((props, ref) => {
             resetSearchText();
         }
     }, [isOptionPanelOpen, resetSearchText]);
-    const selectedOption = useMemo(() => {
-        if (value === undefined)
-            return null;
-        return value;
-    }, [value]);
-    useEffect(() => {
-        // Only update when value prop is explicitly provided (controlled mode)
+    // Adjusted during render (React's documented pattern for resyncing state to a
+    // changed prop) rather than in an effect, so the UI never flashes the stale value
+    // for one frame. Only fires when value prop is explicitly provided (controlled mode).
+    const [prevValue, setPrevValue] = useState(value);
+    if (value !== prevValue) {
+        setPrevValue(value);
         if (value !== undefined) {
-            setLocalSelectedOption(selectedOption);
+            setLocalSelectedOption(value);
         }
-    }, [selectedOption, value]);
+    }
     useUpdateEffect(() => {
         if (value === undefined) {
             setLocalSelectedOption(null);
@@ -353,22 +352,31 @@ export const SelectBox = forwardRef((props, ref) => {
     ]);
     // Render infinite scroll loading indicator
     const renderInfiniteScrollLoading = useCallback(() => isInfiniteScrollLoading && enableInfiniteScroll ? (_jsx("div", { className: cx(classes.infiniteScrollLoading, 'mfui-SelectBox__infiniteScrollLoading'), children: _jsx(ProgressIndicator, {}) }, "infinite-scroll-loading")) : null, [isInfiniteScrollLoading, enableInfiniteScroll, classes.infiniteScrollLoading]);
+    // Early returns rather than a four-level ternary: the branches are mutually exclusive
+    // and each returns a different shape (skeletons, virtualized rows, options, or the
+    // empty message).
+    const renderListContent = () => {
+        if (loading) {
+            return Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-SelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)));
+        }
+        if (isVirtualized && virtualItems.length > 0) {
+            return renderVirtualizedItems();
+        }
+        if (filteredOptions.length > 0) {
+            return [
+                ...renderNonVirtualizedItems(),
+                !isVirtualized && renderInfiniteScrollLoading(),
+                !isVirtualized && renderInfiniteScrollError(),
+            ].filter(Boolean);
+        }
+        return [renderEmptyMessage(), !isVirtualized && renderInfiniteScrollError()].filter(Boolean);
+    };
     const optionsNode = (_jsxs("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-SelectBox__scrollWrapper'), onScroll: enableInfiniteScroll ? handleInfiniteScroll : undefined, children: [_jsx("ul", { role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-SelectBox__listBox'), tabIndex: -1, style: isVirtualized
                     ? {
                         height: `${String(totalSize)}px`,
                         position: 'relative',
                     }
-                    : undefined, children: loading
-                    ? Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-SelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)))
-                    : isVirtualized && virtualItems.length > 0
-                        ? renderVirtualizedItems()
-                        : filteredOptions.length > 0
-                            ? [
-                                ...renderNonVirtualizedItems(),
-                                !isVirtualized && renderInfiniteScrollLoading(),
-                                !isVirtualized && renderInfiniteScrollError(),
-                            ].filter(Boolean)
-                            : [renderEmptyMessage(), !isVirtualized && renderInfiniteScrollError()].filter(Boolean) }), isVirtualized ? renderInfiniteScrollLoading() : null, isVirtualized ? renderInfiniteScrollError('div') : null, _jsx(OptionGroupLabelDescriptions, { groups: rendersHiddenGroupLabels ? optionGroupLabels : [] })] }));
+                    : undefined, children: renderListContent() }), isVirtualized ? renderInfiniteScrollLoading() : null, isVirtualized ? renderInfiniteScrollError('div') : null, _jsx(OptionGroupLabelDescriptions, { groups: rendersHiddenGroupLabels ? optionGroupLabels : [] })] }));
     const handleClearValue = () => {
         setLocalSelectedOption(null);
         onChange?.(null);

package/dist/src/SelectBox/hooks/useKeyboardNavigation.js

@@ -30,9 +30,15 @@ export function useKeyboardNavigation({ isOptionPanelOpen, loading, enableSearch
         return selectedIndex !== -1 ? selectedIndex : 0;
     }, [flatOptions, localSelectedOption]);
     const [tabbableOptionIndex, setTabbableOptionIndex] = useState(getDefaultTabbableIndex());
-    useEffect(() => {
+    // Adjusted during render (React's documented pattern for resyncing state to changed
+    // props) rather than in an effect, so the UI never flashes the stale index for one frame.
+    const [prevFlatOptions, setPrevFlatOptions] = useState(flatOptions);
+    const [prevLocalSelectedOption, setPrevLocalSelectedOption] = useState(localSelectedOption);
+    if (flatOptions !== prevFlatOptions || localSelectedOption !== prevLocalSelectedOption) {
+        setPrevFlatOptions(flatOptions);
+        setPrevLocalSelectedOption(localSelectedOption);
         setTabbableOptionIndex(getDefaultTabbableIndex());
-    }, [getDefaultTabbableIndex]);
+    }
     const resetTabbableIndex = useCallback(() => {
         setTabbableOptionIndex(getDefaultTabbableIndex());
     }, [getDefaultTabbableIndex]);

package/dist/src/SelectBox/utils/getFlatOptions.js

@@ -36,7 +36,7 @@ export function getFlatOptions(options) {
 export function escapeAttributeSelector(value) {
     const stringValue = String(value);
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (typeof window !== 'undefined' && window.CSS && typeof window.CSS.escape === 'function') {
+    if (typeof window !== 'undefined' && typeof window.CSS?.escape === 'function') {
         return window.CSS.escape(stringValue);
     }
     // Polyfill for CSS.escape

package/dist/src/SidePane/SidePane.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useId, useMemo, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Close, PaneExpansionToRight, PaneExpansionToLeft } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { Heading } from '../Heading';
@@ -8,6 +8,9 @@ import { IconButton } from '../IconButton';
 import { sidePaneSlotRecipe } from '../../styled-system/recipes';
 import { useSidePaneStateController } from './hooks/useSidePaneStateController';
 import { useFocusTrap } from '../utilities/dom/useFocusTrap';
+import { getFocusableNodes } from '../utilities/dom/getFocusableNodes';
+import { getDeepActiveElement } from '../utilities/dom/getDeepActiveElement';
+import { containsAcrossShadowRoots } from '../utilities/dom/containsAcrossShadowRoots';
 import { compatibleForwardRef } from '../utilities/react/compatibleForwardRef';
 import { Portal, TargetDomNodeProvider, useAutomaticTargetDomNode } from '../Portal';
 import { FormFooter } from '../FormFooter';
@@ -21,7 +24,7 @@ import { FormFooter } from '../FormFooter';
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */
-export const SidePane = compatibleForwardRef(({ open, title, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, renderHeading, onClose, className, children, actionSlot, formFooterProps, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
+export const SidePane = compatibleForwardRef(({ open, title, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, renderHeading, onClose, className, children, actionSlot, formFooterProps, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, disableClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
     const classes = sidePaneSlotRecipe({ position, nonModal: !enableModal });
     const [insideElement, setInsideElement] = useState(null);
     const { localOpen, handleCloseSidePane, handleStopCloseSidePane, sidePaneElement, setSidePaneElement } = useSidePaneStateController({
@@ -31,21 +34,98 @@ export const SidePane = compatibleForwardRef(({ open, title, 'aria-labelledby':
         insideElement,
     });
     const handleBackdropClick = useCallback(() => {
-        if (!disableBackdropClose) {
+        if (!disableClose && !disableBackdropClose) {
             handleCloseSidePane();
         }
-    }, [disableBackdropClose, handleCloseSidePane]);
+    }, [disableClose, disableBackdropClose, handleCloseSidePane]);
     const handleKeyDown = useCallback((event) => {
         if (event.key === 'Escape') {
+            // The event is swallowed even while closing is disabled, so that ESC inside a nested
+            // side pane never reaches an outer one.
             event.stopPropagation();
             event.preventDefault();
-            handleCloseSidePane();
+            if (!disableClose) {
+                handleCloseSidePane();
+            }
         }
         props.onKeyDown?.(event);
-    }, [handleCloseSidePane, props]);
+    }, [disableClose, handleCloseSidePane, props]);
+    // Whether the close button currently holds focus, tracked so the recovery effect below can
+    // tell focus the browser kicked out from under the user apart from focus that legitimately
+    // sits outside a non-modal pane.
+    const closeButtonHasFocusRef = useRef(false);
+    const handleCloseButtonFocus = useCallback(() => {
+        closeButtonHasFocusRef.current = true;
+    }, []);
+    const handleCloseButtonBlur = useCallback((event) => {
+        // `event.currentTarget.disabled`, not the `disableClose` prop: React applies DOM properties
+        // before it refreshes the delegated-event props, so the blur the browser dispatches while
+        // this button is being disabled is handled with the previous render's closure, where
+        // `disableClose` was still false. The DOM property is already up to date at that point, so
+        // a blur caused by disabling keeps the flag set for the effect below to consume, while an
+        // ordinary blur clears it.
+        closeButtonHasFocusRef.current = event.currentTarget.disabled;
+    }, []);
+    // A focused element that becomes `disabled` is blurred by the browser, moving focus to
+    // <body> — outside the `role="dialog"` subtree that `aria-modal` and the focus trap depend
+    // on (see useSidePaneStateController). Pull focus back to the pane window.
+    // `preventScroll` is required for the same reason as the autofocus effect in that hook.
+    useEffect(() => {
+        if (!disableClose || !localOpen) {
+            // Closing is possible again, or the pane is gone: drop the tracked focus so that a later
+            // transition into `disableClose` can never consume a stale `true`. The close button is
+            // enabled on these runs, so its own focus/blur handlers keep the flag accurate.
+            closeButtonHasFocusRef.current = false;
+            return;
+        }
+        if (!insideElement)
+            return;
+        if (enableModal) {
+            // `document.activeElement` stops at the shadow host when the pane is portalled into a
+            // shadow root (via `targetDOMNode`), so resolve from `insideElement`'s own root instead
+            // and follow nested shadow roots down to the truly focused element.
+            const rootNode = insideElement.getRootNode();
+            const activeElement = getDeepActiveElement(rootNode instanceof ShadowRoot ? rootNode : insideElement.ownerDocument);
+            // `sidePaneElement` (the overlay root), not `insideElement`: nested overlays portal into
+            // the overlay root via the TargetDomNodeProvider below, so focus inside a nested Dialog,
+            // listbox or calendar is legitimately outside the pane window and must not be stolen.
+            // The containment test has to cross shadow boundaries, which `Node.contains()` does not:
+            // the lookup above pierces shadow roots downwards, so focus inside a web component
+            // rendered in the pane resolves to a node that no ancestor `contains()`.
+            if (containsAcrossShadowRoots(sidePaneElement, activeElement))
+                return;
+            insideElement.focus({ preventScroll: true });
+            return;
+        }
+        // Non-modal panes (e.g. `EmbeddedSidePane`) trap nothing and have no `aria-modal` boundary
+        // to keep focus within, so a blanket restore would steal focus that legitimately sits
+        // outside the pane. Only recover when the close button itself held focus as it was
+        // disabled. Tracked focus state rather than the blur event itself, because browsers are
+        // inconsistent about firing `blur` on the disabled-while-focused fixup (jsdom never does),
+        // and React dispatches it with the pre-disable props.
+        if (!closeButtonHasFocusRef.current)
+            return;
+        closeButtonHasFocusRef.current = false;
+        insideElement.focus({ preventScroll: true });
+    }, [disableClose, enableModal, localOpen, insideElement, sidePaneElement]);
+    const handlePressingTabOnNotFocusableElement = useCallback((event) => {
+        // When every control is disabled — `disableClose` together with a submitting FormFooter,
+        // for instance — the overlay holds no focusable node and the trap has nothing to wrap to.
+        // Keep focus on the pane window instead of letting Tab escape the `aria-modal` boundary.
+        // Measured over `sidePaneElement` (the overlay root), which is the same subtree the trap
+        // itself measures as its `currentTarget`, and the same boundary as the effect above: a
+        // nested Dialog, listbox or calendar portalled in there is still keyboard reachable, so
+        // Tab must be left alone rather than pulled back to this pane window.
+        // (`sidePaneElement` is the node this handler is bound to, so it is never null here.)
+        if (!insideElement || !sidePaneElement || getFocusableNodes(sidePaneElement).length > 0)
+            return;
+        event.preventDefault();
+        insideElement.focus({ preventScroll: true });
+    }, [insideElement, sidePaneElement]);
     // Get the focus trap handler
     const { handleOnKeyDown: focusTrapKeyHandler } = useFocusTrap({
         onKeyDown: handleKeyDown,
+        onPressingTabOnNotFocusableElement: handlePressingTabOnNotFocusableElement,
     });
     // Only use focus trap for modal SidePanes
     const handleOnKeyDown = enableModal ? focusTrapKeyHandler : handleKeyDown;
@@ -67,5 +147,5 @@ export const SidePane = compatibleForwardRef(({ open, title, 'aria-labelledby':
     return (_jsx(TargetDomNodeProvider, { targetDomNode: sidePaneElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setSidePaneElement, ...props, className: cx(classes.root, 'mfui-SidePane__root', className), style: {
                     ...props.style,
                     ...(!enableAutoUnmount && !localOpen && { display: 'none' }),
-                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { ref: setInsideElement, role: "dialog", "aria-modal": enableModal ? 'true' : undefined, "aria-labelledby": ariaLabelledby ?? (title ? titleId : undefined), "aria-label": ariaLabel, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("div", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsxs("div", { className: cx(classes.content, 'mfui-SidePane__content'), children: [_jsx("div", { className: cx(classes.contentBody, 'mfui-SidePane__contentBody'), children: children }), resolvedFormFooterPosition === 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] }), formFooterProps && resolvedFormFooterPosition !== 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] })] }) })) : null }));
+                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { ref: setInsideElement, role: "dialog", "aria-modal": enableModal ? 'true' : undefined, "aria-labelledby": ariaLabelledby ?? (title ? titleId : undefined), "aria-label": ariaLabel, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("div", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', disabled: disableClose, onClick: handleCloseSidePane, onFocus: handleCloseButtonFocus, onBlur: handleCloseButtonBlur, children: closeButtonIcon }) })] })] }), _jsxs("div", { className: cx(classes.content, 'mfui-SidePane__content'), children: [_jsx("div", { className: cx(classes.contentBody, 'mfui-SidePane__contentBody'), children: children }), resolvedFormFooterPosition === 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] }), formFooterProps && resolvedFormFooterPosition !== 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] })] }) })) : null }));
 });

package/dist/src/SidePane/SidePane.types.d.ts

@@ -134,10 +134,49 @@ export type SidePaneBaseProps = {
     /**
      * Disables closing the side pane when clicking on the backdrop (modal mode only).
      * When true, the side pane can only be closed via buttons or the close button.
+     * The ESC key still closes the side pane. Use `disableClose` to suppress every
+     * closing trigger at once.
      *
      * @default false
      */
     disableBackdropClose?: boolean;
+    /**
+     * Disables every trigger that closes the side pane: the close button (rendered in the
+     * disabled style), the ESC key, and the backdrop click. Use it while an operation the
+     * user cannot cancel is in flight, such as a form submission.
+     *
+     * This does not block the `open` prop, so the side pane can always be closed programmatically.
+     *
+     * A modal side pane cannot be dismissed at all while this is true, so use it only for short,
+     * bounded operations, clear it on both success and failure, and show visible progress inside
+     * the pane so the user understands why closing is unavailable.
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * <SidePane
+     *   open={isOpen}
+     *   enableModal
+     *   title="Edit profile"
+     *   disableClose={isSubmitting}
+     *   onClose={handleClose}
+     *   formFooterProps={{
+     *     actionsSlot: (
+     *       <>
+     *         <Button disabled={isSubmitting} onClick={handleClose}>
+     *           キャンセル
+     *         </Button>
+     *         <Button priority="primary" loading={isSubmitting} onClick={handleSubmit}>
+     *           保存
+     *         </Button>
+     *       </>
+     *     ),
+     *   }}
+     * />
+     * ```
+     */
+    disableClose?: boolean;
     /**
      * Enable auto unmounting of the side pane content when it's not displayed.
      * When true, the side pane content will return null instead of hiding via CSS.

package/dist/src/SplitView/hooks/useSplitViewPanelVisibility.js

@@ -19,8 +19,11 @@ export function useSplitViewPanelVisibility(isOpen, controlledPanelSlot) {
     if (wasRightPanelVisibleOnMountRef.current === null) {
         wasRightPanelVisibleOnMountRef.current = isRightPanelVisible;
     }
-    // Initialize hasRightPanelBeenVisible based on initial render state
-    const [hasRightPanelBeenVisible, setHasRightPanelBeenVisible] = useState(() => wasRightPanelVisibleOnMountRef.current ?? false);
+    // Initialize hasRightPanelBeenVisible based on initial render state. Reads
+    // `isRightPanelVisible` directly rather than the ref just written above — on first
+    // render (the only render this initial value matters for) they're the same value, and
+    // this avoids passing a ref's `.current` into a function call during render.
+    const [hasRightPanelBeenVisible, setHasRightPanelBeenVisible] = useState(isRightPanelVisible);
     // Track previous visibility state
     // Note: This ref is updated in useSplitViewAnimation hook to ensure correct timing
     const previousIsRightPanelVisibleRef = useRef(isRightPanelVisible);

package/dist/src/SubNavigation/SubNavigation.d.ts

@@ -1,5 +1,14 @@
 import { type SubNavigationProps } from './SubNavigation.types';
 /**
  * This component is for the navigation links under the main navigation.
+ *
+ * The root element is a `<nav>` landmark. Name it with `aria-label` or `aria-labelledby` when the
+ * page has other navigation landmarks. No name is applied by default because the right name
+ * depends on what the navigation is for on each page.
+ *
+ * @example
+ * ```tsx
+ * <SubNavigation navigationItems={items} aria-label="設定" />
+ * ```
  */
-export declare function SubNavigation({ orientation, navigationItems, customLinkComponent, renderNavigationLabel, headerSlot, className, }: SubNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare const SubNavigation: import("react").ForwardRefExoticComponent<SubNavigationProps & import("react").RefAttributes<HTMLElement>>;