@moneyforward/mfui-components 4.3.0 → 4.5.0

package/dist/src/MultipleSelectBox/MultipleSelectBox.js

@@ -339,29 +339,38 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
                 `${String(localSelectedValuesSet.size)}件選択中`) })) : null;
     const applyControlsNode = enableApplyControls ? (_jsxs(HStack, { gap: "horizontal.0-1of2", children: [_jsx(Button, { ref: cancelButtonRef, size: "small", priority: "secondary", onClick: handleCancelButtonClick, children: cancelButtonProps?.label ?? 'キャンセル' }), _jsx(Button, { ref: applyButtonRef, size: "small", priority: "primary", onClick: handleApplyButtonClick, children: applyButtonProps?.label ?? '適用' })] })) : null;
     const resolvedNotFoundMessage = typeof notFoundMessage === 'function' ? notFoundMessage(searchText.trim()) : notFoundMessage;
+    // 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-MultipleSelectBox__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 [
+            _jsx("li", { className: cx(classes.emptyMessage, 'mfui-MultipleSelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && resolvedNotFoundMessage
+                        ? resolvedNotFoundMessage
+                        : options.length > 0
+                            ? resolvedNotFoundMessage
+                            : emptyMessage }) }, "empty"),
+            !isVirtualized && renderInfiniteScrollError(),
+        ].filter(Boolean);
+    };
     const optionsNode = (_jsxs("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-MultipleSelectBox__scrollWrapper'), onScroll: enableInfiniteScroll ? handleInfiniteScroll : undefined, children: [_jsx("ul", { ref: listBoxRef, role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-MultipleSelectBox__listBox'), tabIndex: -1, style: isVirtualized && totalSize > 0
                     ? {
                         height: `${String(totalSize)}px`,
                         position: 'relative',
                     }
-                    : undefined, children: loading
-                    ? Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-MultipleSelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)))
-                    : isVirtualized && virtualItems.length > 0
-                        ? renderVirtualizedItems()
-                        : filteredOptions.length > 0
-                            ? [
-                                ...renderNonVirtualizedItems(),
-                                !isVirtualized && renderInfiniteScrollLoading(),
-                                !isVirtualized && renderInfiniteScrollError(),
-                            ].filter(Boolean)
-                            : [
-                                _jsx("li", { className: cx(classes.emptyMessage, 'mfui-MultipleSelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && resolvedNotFoundMessage
-                                            ? resolvedNotFoundMessage
-                                            : options.length > 0
-                                                ? resolvedNotFoundMessage
-                                                : emptyMessage }) }, "empty"),
-                                !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 createOptionAreaNode = isCreateOptionVisible ? (_jsxs("div", { className: cx(classes.createOptionArea, 'mfui-MultipleSelectBox__createOptionArea'), children: [_jsxs("button", { "data-mfui-content": "create-new-option", type: "button", className: cx(classes.createOptionButton, 'mfui-MultipleSelectBox__createOptionButton'), disabled: isCreating, onClick: handleCreateOption, children: [_jsx(Add, { "aria-hidden": true }), createOptionProps?.renderLabel?.(searchText.trim()) ?? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "strongBody", children: searchText.trim() }), _jsx(Typography, { variant: "body", children: "\u3092\u8FFD\u52A0" })] }))] }), createError ? (_jsx("div", { className: cx(classes.createOptionErrorMessage, 'mfui-MultipleSelectBox__createOptionErrorMessage'), children: _jsx(HelpMessage, { messageType: "error", children: createOptionProps?.renderErrorMessage?.(searchText.trim()) ??
                         `${searchText.trim()}を追加できませんでした。` }) })) : null] })) : null;
     return (_jsx(Popover, { renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsx(MultipleSelectBoxTrigger, { ref: triggerRef, wrapperRef: setTriggerRef, selectedOptions: localSelectedOptions, id: id, disabled: disabled, triggerProps: triggerProps, triggerWrapperProps: triggerWrapperProps, name: name, 

package/dist/src/MultipleSelectBox/hooks/useInitialFocusOnOptionPanelOpen.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { getDeepActiveElement } from '../utils/getDeepActiveElement';
+import { getDeepActiveElement } from '../../utilities/dom/getDeepActiveElement';
 import { isSelectableOption } from '../utils/isSelectableOption';
 /**
  * Control the focus when the option panel is opened.

package/dist/src/NavigationList/NavigationListItem/NavigationListItem.d.ts

@@ -6,5 +6,8 @@ import { type NavigationListItemProps } from './NavigationListItem.types';
  * If the href prop is provided, the item will be rendered as an anchor element.
  * If the onClick prop is provided (without href), it will be rendered as a button element.
  * Otherwise, it will be rendered as a div element and not interactive.
+ *
+ * The trailing navigation indicator is displayed whenever the item can be activated,
+ * that is when either the href or the onClick prop is provided.
  */
 export declare const NavigationListItem: import("react").ForwardRefExoticComponent<NavigationListItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/src/NavigationList/NavigationListItem/NavigationListItem.js

@@ -16,6 +16,9 @@ const ARIA_DISABLED_PROPS = { 'aria-disabled': true, 'data-mfui-disabled': '' };
  * If the href prop is provided, the item will be rendered as an anchor element.
  * If the onClick prop is provided (without href), it will be rendered as a button element.
  * Otherwise, it will be rendered as a div element and not interactive.
+ *
+ * The trailing navigation indicator is displayed whenever the item can be activated,
+ * that is when either the href or the onClick prop is provided.
  */
 export const NavigationListItem = forwardRef(({ title, icon, description, leadingContent, href, target, customLinkComponent, onClick, disabled, className, ...rest }, ref) => {
     const classes = navigationListItemSlotRecipe();
@@ -26,7 +29,8 @@ export const NavigationListItem = forwardRef(({ title, icon, description, leadin
             return 'button';
         return 'div';
     }, [href, customLinkComponent, onClick]);
-    const isInteractive = (href !== undefined || onClick !== undefined) && !disabled;
+    const isActivatable = href !== undefined || onClick !== undefined;
+    const isInteractive = isActivatable && !disabled;
     const resolvedHref = disabled ? undefined : href;
     const disabledProps = useMemo(() => {
         if (!disabled)
@@ -35,6 +39,6 @@ export const NavigationListItem = forwardRef(({ title, icon, description, leadin
             return BUTTON_DISABLED_PROPS;
         return ARIA_DISABLED_PROPS;
     }, [disabled, onClick, href]);
-    const innerElement = (_jsx(FocusIndicator, { hideWhiteBorder: true, position: "inside", children: _jsxs(Tag, { ...rest, href: resolvedHref, target: target, type: href === undefined && onClick !== undefined ? 'button' : undefined, "data-mfui-focusable": isInteractive, className: cx(classes.root, 'mfui-NavigationListItem__root', className), onClick: disabled ? undefined : onClick, ...disabledProps, children: [leadingContent != null ? (_jsx("span", { className: cx(classes.leading, 'mfui-NavigationListItem__leading'), children: leadingContent })) : null, _jsxs("span", { className: cx(classes.content, 'mfui-NavigationListItem__content'), children: [_jsxs("span", { className: cx(classes.title, 'mfui-NavigationListItem__title'), children: [icon != null ? (_jsx("span", { className: cx(classes.titleIcon, 'mfui-NavigationListItem__titleIcon'), children: icon })) : null, _jsx(Typography, { variant: "contentHeading", children: title })] }), description != null ? _jsx(Typography, { variant: "body", children: description }) : null] }), href !== undefined ? (_jsx("span", { className: cx(classes.trailing, 'mfui-NavigationListItem__trailing'), children: _jsx(NavigationToDetail, { "aria-hidden": true }) })) : null] }) }));
+    const innerElement = (_jsx(FocusIndicator, { hideWhiteBorder: true, position: "inside", children: _jsxs(Tag, { ...rest, href: resolvedHref, target: target, type: href === undefined && onClick !== undefined ? 'button' : undefined, "data-mfui-focusable": isInteractive, className: cx(classes.root, 'mfui-NavigationListItem__root', className), onClick: disabled ? undefined : onClick, ...disabledProps, children: [leadingContent != null ? (_jsx("span", { className: cx(classes.leading, 'mfui-NavigationListItem__leading'), children: leadingContent })) : null, _jsxs("span", { className: cx(classes.content, 'mfui-NavigationListItem__content'), children: [_jsxs("span", { className: cx(classes.title, 'mfui-NavigationListItem__title'), children: [icon != null ? (_jsx("span", { className: cx(classes.titleIcon, 'mfui-NavigationListItem__titleIcon'), children: icon })) : null, _jsx(Typography, { variant: "contentHeading", children: title })] }), description != null ? _jsx(Typography, { variant: "body", children: description }) : null] }), isActivatable ? (_jsx("span", { className: cx(classes.trailing, 'mfui-NavigationListItem__trailing'), children: _jsx(NavigationToDetail, { "aria-hidden": true }) })) : null] }) }));
     return _jsx("li", { ref: ref, children: innerElement });
 });

package/dist/src/NavigationList/NavigationListItem/NavigationListItem.types.d.ts

@@ -25,7 +25,8 @@ type ButtonProps = {
     customLinkComponent?: undefined;
     /**
      * The click handler for the navigation item.
-     * When provided without href, the item is rendered as a button element.
+     * When provided without href, the item is rendered as a button element
+     * and displays the same trailing navigation indicator as an anchor item.
      */
     onClick: ComponentPropsWithoutRef<'button'>['onClick'];
     /**

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

@@ -5,8 +5,13 @@ import React from 'react';
  * 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 declare const NumberBox: React.ForwardRefExoticComponent<Omit<import("..").TextBoxProps, "onChange" | "prefixSlot" | "suffixSlot"> & {
     onChange?: (value: string) => void;
     textAlign?: 'left' | 'right';
+    maxIntegerDigits?: number;
+    decimalPlaces?: number;
 } & React.RefAttributes<HTMLInputElement>>;

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);
@@ -117,7 +152,8 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
     // Sync with controlled value
     useEffect(() => {
         if (value !== undefined) {
-            setDisplayValue(formatWithCommas(sanitizeInput(String(value))));
+            const sanitized = sanitizeInput(String(value));
+            setDisplayValue(formatWithCommas(sanitized));
         }
     }, [value]);
     // Restore cursor position after display value update
@@ -164,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.
@@ -178,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

@@ -114,12 +114,12 @@ export function Popover({ renderTrigger, renderContent, open, onOpenStateChanged
             const documentActiveElement = document.activeElement;
             // In Shadow DOM environments, we need to handle focus detection differently
             const isInShadowDOM = rootNode instanceof ShadowRoot;
-            let isFocusStillWithinComponent = false;
+            // Both branches below assign this, so it deliberately has no initial value.
+            let isFocusStillWithinComponent;
             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/SidePane/hooks/useSidePaneStateController.js

@@ -41,13 +41,11 @@ export function useSidePaneStateController({ open, onClose, ref, insideElement }
      * Handles the close action for the side pane.
      */
     const handleCloseSidePane = useCallback(() => {
-        if (open !== undefined) {
-            onClose?.();
-        }
-        else {
+        // When `open` is controlled by the consumer, only notify; the consumer owns the state.
+        if (open === undefined) {
             closeSidePane();
-            onClose?.();
         }
+        onClose?.();
     }, [closeSidePane, open, onClose]);
     // Function to prevent the side pane from closing when clicking inside the side pane.
     const handleStopCloseSidePane = useCallback((event) => {

package/dist/src/SplitView/utils/parseSize.d.ts

@@ -10,6 +10,6 @@ import { type CSSProperties } from 'react';
  *
  * @returns Number value in pixels
  *
- * @throws Error if value is undefined or invalid
+ * @throws {Error} If value is undefined or invalid
  */
 export declare function parseSizeToNumber(value: CSSProperties['width'], propName?: string): number;

package/dist/src/SplitView/utils/parseSize.js

@@ -9,7 +9,7 @@
  *
  * @returns Number value in pixels
  *
- * @throws Error if value is undefined or invalid
+ * @throws {Error} If value is undefined or invalid
  */
 export function parseSizeToNumber(value, propName) {
     const propPrefix = propName ? `SplitView: ${propName}` : 'SplitView';
@@ -23,7 +23,9 @@ export function parseSizeToNumber(value, propName) {
         // Support pixel values like '300px'
         const match = /^(\d+(?:\.\d+)?)px$/.exec(value);
         if (match?.[1]) {
-            return Number.parseFloat(match[1]);
+            // The capture group is `\d+(?:\.\d+)?`, so `Number` matches the previous
+            // `Number.parseFloat` exactly.
+            return Number(match[1]);
         }
         // Warn about unsupported string formats but don't throw to avoid breaking the component
         const warningMessage = propName