@moneyforward/mfui-components 4.3.1 → 4.5.0

package/dist/src/NumberBox/NumberBox.js

@@ -102,14 +102,49 @@ const mapRawCursorToDisplay = (formatted, rawCursor) => {
     }
     return formatted.length;
 };
+/**
+ * Count the digit characters in a raw numeric string.
+ * The minus sign and the decimal point are not digits, so they are not counted.
+ *
+ * @param raw - The raw numeric string.
+ */
+const countDigits = (raw) => (raw.match(/\d/g) ?? []).length;
+/**
+ * Count the digit characters in the integer part of a raw numeric string, i.e. before the
+ * decimal point. `maxIntegerDigits` caps this count independently of `decimalPlaces`, so the
+ * two limits stack: `maxIntegerDigits={5}` with `decimalPlaces={2}` allows up to 7 digits total.
+ *
+ * @param raw - The raw numeric string.
+ */
+const countIntegerDigits = (raw) => {
+    const dotIndex = raw.indexOf('.');
+    return countDigits(dotIndex === -1 ? raw : raw.slice(0, dotIndex));
+};
+/**
+ * Count the decimal places a raw numeric string occupies.
+ * A trailing dot counts as one place because it commits the value to a decimal part:
+ * that is what lets `decimalPlaces={0}` reject the dot itself while `decimalPlaces={2}`
+ * still allows the in-progress `123.`.
+ *
+ * @param raw - The raw numeric string.
+ */
+const countDecimalPlaces = (raw) => {
+    const dotIndex = raw.indexOf('.');
+    if (dotIndex === -1)
+        return 0;
+    return Math.max(raw.length - dotIndex - 1, 1);
+};
 /**
  * NumberBox is a numeric input component that wraps TextBox.
  * It provides real-time comma formatting, full-width digit conversion,
  * and ignores invalid characters.
  *
  * The `onChange` callback receives the raw numeric string without commas.
+ *
+ * `maxIntegerDigits` and `decimalPlaces` cap how much the user can enter. Edits that would
+ * exceed either limit are silently rejected, so state the limit in an adjacent `HelpMessage`.
  */
-export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign = 'right', style, enableClearButton, ...rest }, ref) => {
+export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign = 'right', style, enableClearButton, maxIntegerDigits, decimalPlaces, ...rest }, ref) => {
     const inputRef = useRef(null);
     const pendingCursorRef = useRef(null);
     const [cursorRestoreToken, requestCursorRestore] = useReducer((count) => count + 1, 0);
@@ -165,6 +200,22 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
                 rawCursor = rawPos - 1;
             }
         }
+        // Reject an edit that breaks a limit, but only when it makes that measure worse.
+        // A value that arrives over the limit from the outside must stay editable back into range.
+        const exceedsDigitLimit = maxIntegerDigits !== undefined &&
+            countIntegerDigits(sanitized) > maxIntegerDigits &&
+            countIntegerDigits(sanitized) > countIntegerDigits(prevSanitized);
+        const exceedsDecimalLimit = decimalPlaces !== undefined &&
+            countDecimalPlaces(sanitized) > decimalPlaces &&
+            countDecimalPlaces(sanitized) > countDecimalPlaces(prevSanitized);
+        if (exceedsDigitLimit || exceedsDecimalLimit) {
+            // The display value does not change, so the cursor belongs before the rejected input.
+            const rawGained = Math.max(sanitized.length - prevSanitized.length, 0);
+            pendingCursorRef.current = mapRawCursorToDisplay(displayValue, Math.max(rawCursor - rawGained, 0));
+            // State is unchanged, so bump the token to make the layout effect restore the input.
+            requestCursorRestore();
+            return;
+        }
         const formatted = formatWithCommas(sanitized);
         let newCursor = mapRawCursorToDisplay(formatted, rawCursor);
         // Rejected characters keep the cursor before the ignored input.
@@ -179,7 +230,7 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
             requestCursorRestore();
         }
         onChange?.(sanitized);
-    }, [displayValue, onChange]);
+    }, [displayValue, onChange, maxIntegerDigits, decimalPlaces]);
     return (_jsx(TextBox, { ref: mergeRefs(ref, inputRef), ...rest, className: cx('mfui-NumberBox__root', rest.className), enableClearButton: Boolean(enableClearButton) && displayValue !== '', style: { textAlign, ...style }, value: displayValue, onChange: handleChange }));
 });
 NumberBox.displayName = 'NumberBox';

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/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

@@ -119,8 +119,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)

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

@@ -353,22 +353,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/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/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>>;

package/dist/src/SubNavigation/SubNavigation.js

@@ -1,17 +1,28 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DisclosureBasicCollapsed, Lock } from '@moneyforward/mfui-icons-react';
+import { forwardRef } from 'react';
 import { cx } from '../../styled-system/css';
 import { subNavigationSlotRecipe } from '../../styled-system/recipes';
 import { FocusIndicator } from '../FocusIndicator';
 import { Typography } from '../Typography';
 /**
  * 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 function SubNavigation({ orientation = 'vertical', navigationItems, customLinkComponent, renderNavigationLabel, headerSlot, className, }) {
+export const SubNavigation = forwardRef(({ orientation = 'vertical', navigationItems, customLinkComponent, renderNavigationLabel, headerSlot, className, ...rest }, ref) => {
     const hasLabelIcon = navigationItems.some(({ labelIcon }) => !!labelIcon);
     const classes = subNavigationSlotRecipe({ orientation, hasLabelIcon });
-    return (_jsxs("nav", { className: cx(classes.root, 'mfui-SubNavigation__root', className), children: [headerSlot ? (_jsx("div", { className: cx(classes.subNavigationHeader, 'mfui-SubNavigation__subNavigationHeader'), children: headerSlot })) : null, _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: navigationItems.map((navigationItem, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-SubNavigation__listItem'), children: renderNavigationItem(navigationItem, customLinkComponent, classes, 0, renderNavigationLabel) }, index))) })] }));
-}
+    return (_jsxs("nav", { ...rest, ref: ref, className: cx(classes.root, 'mfui-SubNavigation__root', className), children: [headerSlot ? (_jsx("div", { className: cx(classes.subNavigationHeader, 'mfui-SubNavigation__subNavigationHeader'), children: headerSlot })) : null, _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: navigationItems.map((navigationItem, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-SubNavigation__listItem'), children: renderNavigationItem(navigationItem, customLinkComponent, classes, 0, renderNavigationLabel) }, index))) })] }));
+});
+SubNavigation.displayName = 'SubNavigation';
 /**
  * Render a navigation item based on the following conditions:
  * - a link without children

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

@@ -33,6 +33,32 @@ type HorizontalSubNavigationProps = BaseSubNavigationProps & {
  * Common properties for both vertical and horizontal SubNavigation.
  */
 type BaseSubNavigationProps = {
+    /**
+     * The accessible name of the `<nav>` landmark.
+     *
+     * Set this when the page has other navigation landmarks (e.g. `MainNavigation`, `Breadcrumbs`).
+     * Describe this page's navigation (e.g. `"設定"`). Avoid including the role name;
+     * assistive technology already announces it.
+     */
+    'aria-label'?: string;
+    /**
+     * The ID of the element that names the `<nav>` landmark.
+     * Use this instead of `aria-label` when a visible heading already names the navigation.
+     *
+     * @example
+     * ```tsx
+     * function SettingsNavigation() {
+     *   const headingId = useId();
+     *   return (
+     *     <>
+     *       <h2 id={headingId}>設定</h2>
+     *       <SubNavigation navigationItems={items} aria-labelledby={headingId} />
+     *     </>
+     *   );
+     * }
+     * ```
+     */
+    'aria-labelledby'?: string;
     /**
      * The component to use as the link element instead of the general anchor element `<a>`.
      * The custom component must extend the HTMLAnchorElement interface.
@@ -109,7 +135,7 @@ type BaseSubNavigationProps = {
      * For overriding styles if you need.
      */
     className?: string;
-};
+} & Omit<ComponentPropsWithoutRef<'nav'>, 'children' | 'className' | 'aria-label' | 'aria-labelledby'>;
 /**
  * The union that discriminates whether each navigation item has children.
  */

package/dist/src/Tabs/hooks/useTabRegistry.js

@@ -44,14 +44,14 @@ function areTabListsEqual(a, b) {
     });
 }
 /**
- * Sorts the entries in place so they follow the order the tabs appear in the document.
+ * Returns the entries ordered by the position their elements appear in the document.
  * Entries whose element is not in the document yet keep their relative order, because
- * `Array#sort` is stable and the comparator reports them as equal.
+ * `Array#toSorted` is stable and the comparator reports them as equal.
  *
- * @param entries - The registered entries, sorted in place.
+ * @param entries - The registered entries to order.
  */
 function sortByDocumentPosition(entries) {
-    entries.sort((a, b) => {
+    return entries.toSorted((a, b) => {
         const aElement = a.elementRef.current;
         const bElement = b.elementRef.current;
         if (!aElement?.isConnected || !bElement?.isConnected)
@@ -81,7 +81,7 @@ export function useTabRegistry() {
     const entriesRef = useRef([]);
     const { registerTab, updateTab, unregisterTab } = useMemo(() => {
         const publish = () => {
-            sortByDocumentPosition(entriesRef.current);
+            entriesRef.current = sortByDocumentPosition(entriesRef.current);
             const nextTabs = entriesRef.current.map((entry) => entry.props);
             setTabs((previousTabs) => (areTabListsEqual(previousTabs, nextTabs) ? previousTabs : nextTabs));
         };

package/dist/src/ToggleSwitch/index.d.ts

@@ -1,2 +1,2 @@
 export * from './ToggleSwitch';
-export * from './ToggleSwitch.types';
+export type * from './ToggleSwitch.types';

package/dist/src/ToggleSwitch/index.js

@@ -1,2 +1 @@
 export * from './ToggleSwitch';
-export * from './ToggleSwitch.types';

package/dist/src/utilities/dom/containsAcrossShadowRoots.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Returns whether `node` is `ancestor` itself or a descendant of it, crossing shadow boundaries.
+ *
+ * `Node.contains()` walks the node tree only, so an element inside a shadow root is *not*
+ * reported as contained by the shadow host or by any of the host's ancestors. This function
+ * follows the chain of shadow hosts upwards, so focus inside a web component rendered within
+ * `ancestor` still counts as being inside it.
+ *
+ * Pair it with `getDeepActiveElement`, which pierces shadow roots downwards: a shadow-piercing
+ * lookup compared with the non-piercing `Node.contains()` reports the deepest focused element as
+ * outside every ancestor it actually lives in.
+ *
+ * @param ancestor - The node expected to contain `node`. A nullish ancestor contains nothing.
+ *
+ * @param node - The node to look for. A nullish node is never contained.
+ *
+ * @returns `true` when `node` is inside `ancestor`, across any number of shadow boundaries.
+ *
+ * @see https://dom.spec.whatwg.org/#dom-node-contains
+ */
+export declare const containsAcrossShadowRoots: (ancestor: Node | null | undefined, node: Node | null | undefined) => boolean;

package/dist/src/utilities/dom/containsAcrossShadowRoots.js

@@ -0,0 +1,33 @@
+/**
+ * Returns whether `node` is `ancestor` itself or a descendant of it, crossing shadow boundaries.
+ *
+ * `Node.contains()` walks the node tree only, so an element inside a shadow root is *not*
+ * reported as contained by the shadow host or by any of the host's ancestors. This function
+ * follows the chain of shadow hosts upwards, so focus inside a web component rendered within
+ * `ancestor` still counts as being inside it.
+ *
+ * Pair it with `getDeepActiveElement`, which pierces shadow roots downwards: a shadow-piercing
+ * lookup compared with the non-piercing `Node.contains()` reports the deepest focused element as
+ * outside every ancestor it actually lives in.
+ *
+ * @param ancestor - The node expected to contain `node`. A nullish ancestor contains nothing.
+ *
+ * @param node - The node to look for. A nullish node is never contained.
+ *
+ * @returns `true` when `node` is inside `ancestor`, across any number of shadow boundaries.
+ *
+ * @see https://dom.spec.whatwg.org/#dom-node-contains
+ */
+export const containsAcrossShadowRoots = (ancestor, node) => {
+    if (!ancestor || !node)
+        return false;
+    let current = node;
+    while (current) {
+        if (ancestor.contains(current))
+            return true;
+        const rootNode = current.getRootNode();
+        // Only a ShadowRoot has a host to continue from; a Document ends the walk.
+        current = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    }
+    return false;
+};

package/dist/src/utilities/dom/useFocusTrap.js

@@ -18,7 +18,7 @@ export function useFocusTrap({ onKeyDown, onPressingTabOnNotFocusableElement } =
         const wrapper = event.currentTarget;
         const focusingElement = wrapper.ownerDocument.activeElement;
         const focusableNodes = getFocusableNodes(wrapper);
-        const firstFocusableNode = focusableNodes[0];
+        const [firstFocusableNode] = focusableNodes;
         const lastFocusableNode = focusableNodes.at(-1);
         const focusingOnFirstNode = focusingElement === firstFocusableNode;
         const focusingOnLastNode = focusingElement === lastFocusableNode;