@moneyforward/mfui-components 3.30.0 → 3.31.1

package/dist/src/DataTable/DataTable.js

@@ -11,7 +11,7 @@ import { DataTableHeaderRow } from './DataTableHeaderRow';
 import { DataTableRow } from './DataTableRow';
 import { cx } from '../../styled-system/css';
 import { isComponentOrWrapped } from '../utilities/react/isComponentOrWrapped';
-const Base = forwardRef(({ className, size = 'medium', enableRowSelection = false, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, layout = 'default', wrapperProps, loading = false, emptyStateSlot, children, ...props }, ref) => {
+const Base = forwardRef(({ className, size = 'medium', enableRowSelection = false, fixedHeader = false, showVerticalBorder = false, leftFixedColumnIndex, rightFixedColumnIndex, layout = 'default', wrapperProps, loading = false, emptyStateSlot, children, ...props }, ref) => {
     const classes = dataTableSlotRecipe({ layout });
     // Check if DataTable has any rows by looking for DataTable.Body with DataTable.Row children
     const hasRows = useMemo(() => {
@@ -36,7 +36,7 @@ const Base = forwardRef(({ className, size = 'medium', enableRowSelection = fals
         return false;
     }, [children, loading]);
     const shouldShowEmptyState = !hasRows && !!emptyStateSlot && !loading;
-    return (_jsx(DataTableProvider, { size: size, enableRowSelection: enableRowSelection, fixedHeader: fixedHeader, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, loading: loading, layout: layout, children: _jsxs("div", { ...wrapperProps, className: cx(classes.wrapper, 'mfui-DataTable__wrapper', 
+    return (_jsx(DataTableProvider, { size: size, enableRowSelection: enableRowSelection, fixedHeader: fixedHeader, showVerticalBorder: showVerticalBorder, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, loading: loading, layout: layout, children: _jsxs("div", { ...wrapperProps, className: cx(classes.wrapper, 'mfui-DataTable__wrapper', 
             /* TODO: Remove in v5.0.0 */ 'mfui-DataGrid__wrapper', wrapperProps?.className), children: [_jsx("table", { ref: ref, className: cx(classes.table, 'mfui-DataTable__table', 
                     /* TODO: Remove in v5.0.0 */ 'mfui-DataGrid__table', className), ...props, children: children }), shouldShowEmptyState ? (_jsx("div", { className: cx(classes.emptyState, 'mfui-DataTable__emptyState', 
                     /* TODO: Remove in v5.0.0 */ 'mfui-DataGrid__emptyState'), role: "status", "aria-live": "polite", children: emptyStateSlot })) : null] }) }));

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

@@ -38,6 +38,15 @@ export type DataTableProps = {
      * @default false
      */
     fixedHeader?: boolean;
+    /**
+     * Whether to show vertical borders between columns.
+     * If `true`, a vertical border will be drawn between each column of the header and body.
+     *
+     * Enable this when using `colSpan` / `rowSpan` on cells to clarify the cell boundaries.
+     *
+     * @default false
+     */
+    showVerticalBorder?: boolean;
     /**
      * The layout of the data table.
      * It accepts `default` or `edge-to-edge`.

package/dist/src/DataTable/DataTableCell/DataTableCell.js

@@ -11,7 +11,7 @@ import { useFixedColumns } from '../../utilities/dom/useFixedColumns';
 import { handleCheckboxCellClick } from '../utils/handleCheckbox';
 import { mergeRefs } from '../../utilities/dom/mergeRefs';
 export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text', className, isRowHighlighted, disabled = false, depth = 0, columnIndex, disclosureIconProps: nestingIconProps, style, ...props }, ref) => {
-    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection, layout } = useDataTableContext();
+    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection, showVerticalBorder, layout, } = useDataTableContext();
     const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = useFixedColumns({
         enableRowSelection,
         columnIndex,
@@ -25,6 +25,7 @@ export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text',
         fixedColumn: isFixedColumn,
         edgeFixedColumn: isEdgeFixedColumn,
         isCheckboxCell: enableRowSelection && columnIndex === 0,
+        verticalBorder: showVerticalBorder,
         layout,
     });
     const handleClick = (event) => {

package/dist/src/DataTable/DataTableHeaderCell/DataTableHeaderCell.js

@@ -10,7 +10,7 @@ import { useFixedColumns } from '../../utilities/dom/useFixedColumns';
 import { handleCheckboxCellClick } from '../utils/handleCheckbox';
 import { mergeRefs } from '../../utilities/dom/mergeRefs';
 export const DataTableHeaderCell = forwardRef(({ children, type = 'text', sortButtonProps, sortOrder, ascendingIconProps, descendingIconProps, unsortedIconProps, className, columnIndex, disabled = false, ...props }, ref) => {
-    const { size, leftFixedColumnIndex, rightFixedColumnIndex, enableRowSelection } = useDataTableContext();
+    const { size, leftFixedColumnIndex, rightFixedColumnIndex, enableRowSelection, showVerticalBorder } = useDataTableContext();
     const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = useFixedColumns({
         enableRowSelection,
         columnIndex,
@@ -23,6 +23,7 @@ export const DataTableHeaderCell = forwardRef(({ children, type = 'text', sortBu
         fixedColumn: isFixedColumn,
         edgeFixedColumn: isEdgeFixedColumn,
         isCheckboxCell: enableRowSelection && columnIndex === 0,
+        verticalBorder: showVerticalBorder,
     });
     const isCheckboxCell = enableRowSelection && columnIndex === 0;
     const isStringChild = typeof children === 'string';

package/dist/src/DataTable/DataTableProvider.d.ts

@@ -4,7 +4,7 @@ export type DataTableSize = 'small' | 'medium';
 /**
  * The props for the `DataTableContext` component.
  */
-export type DataTableContextProps = Pick<DataTableProps, 'size' | 'enableRowSelection' | 'fixedHeader' | 'leftFixedColumnIndex' | 'rightFixedColumnIndex' | 'loading' | 'layout'>;
+export type DataTableContextProps = Pick<DataTableProps, 'size' | 'enableRowSelection' | 'fixedHeader' | 'showVerticalBorder' | 'leftFixedColumnIndex' | 'rightFixedColumnIndex' | 'loading' | 'layout'>;
 export type DataTableProviderValues = {
     numberColumns: number;
     setNumberColumns: (number: number) => void;
@@ -24,4 +24,4 @@ export declare const useDataTableContext: () => DataTableProviderValues;
  *
  * This should only be used in DataTable component.
  */
-export declare function DataTableProvider({ children, size, enableRowSelection, fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout, }: PropsWithChildren<DataTableContextProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableProvider({ children, size, enableRowSelection, fixedHeader, showVerticalBorder, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout, }: PropsWithChildren<DataTableContextProps>): import("react/jsx-runtime").JSX.Element;

package/dist/src/DataTable/DataTableProvider.js

@@ -10,6 +10,7 @@ export const DataTableContext = createContext({
     size: 'medium',
     enableRowSelection: false,
     fixedHeader: false,
+    showVerticalBorder: false,
     leftFixedColumnIndex: undefined,
     rightFixedColumnIndex: undefined,
     layout: 'default',
@@ -27,12 +28,13 @@ export const useDataTableContext = () => useContext(DataTableContext);
  *
  * This should only be used in DataTable component.
  */
-export function DataTableProvider({ children, size = 'medium', enableRowSelection = false, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout = 'default', }) {
+export function DataTableProvider({ children, size = 'medium', enableRowSelection = false, fixedHeader = false, showVerticalBorder = false, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout = 'default', }) {
     const [numberColumns, setNumberColumns] = useState(0);
     const contextValue = useMemo(() => ({
         size,
         enableRowSelection,
         fixedHeader,
+        showVerticalBorder,
         leftFixedColumnIndex,
         rightFixedColumnIndex,
         loading,
@@ -43,6 +45,7 @@ export function DataTableProvider({ children, size = 'medium', enableRowSelectio
         size,
         enableRowSelection,
         fixedHeader,
+        showVerticalBorder,
         leftFixedColumnIndex,
         rightFixedColumnIndex,
         loading,

package/dist/src/DataTable/DataTableRow/DataTableRow.js

@@ -6,6 +6,36 @@ import { Checkbox } from '../../Checkbox';
 import { useDataTableContext } from '../DataTableProvider';
 import { cx } from '../../../styled-system/css';
 import { isComponentOrWrapped } from '../../utilities/react/isComponentOrWrapped';
+const INTERACTIVE_ELEMENT_SELECTOR = [
+    'a[href]',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'label',
+    'summary',
+    '[role="button"]',
+    '[role="link"]',
+    '[role="checkbox"]',
+    '[role="menuitem"]',
+    '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]',
+    '[role="option"]',
+    '[role="radio"]',
+    '[role="switch"]',
+    '[role="tab"]',
+    '[role="textbox"]',
+    '[contenteditable=""]',
+    '[contenteditable="true"]',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+function isClickFromNestedInteractiveElement(event) {
+    if (!(event.target instanceof Element)) {
+        return false;
+    }
+    const interactiveElement = event.target.closest(INTERACTIVE_ELEMENT_SELECTOR);
+    return interactiveElement !== null && interactiveElement !== event.currentTarget;
+}
 export const DataTableRow = forwardRef(({ children, disabled = false, highlighted, checkboxProps, className, onClickRow, selectable, ...props }, ref) => {
     const { enableRowSelection: contextEnableRowSelection, layout } = useDataTableContext();
     const isSelectable = selectable ?? contextEnableRowSelection;
@@ -24,12 +54,13 @@ export const DataTableRow = forwardRef(({ children, disabled = false, highlighte
         .find((cell) => cell.props.disclosureIconProps && !cell.props.onClickCell)?.props.disclosureIconProps;
     const ariaExpanded = isInteractive && disclosureIconProps ? (disclosureIconProps.isOpen ?? false) : undefined;
     const handleClickRow = (event) => {
-        if (!disabled) {
-            onClickRow?.(event);
+        if (disabled || isClickFromNestedInteractiveElement(event)) {
+            return;
         }
+        onClickRow?.(event);
     };
     const handleKeyDownRow = (event) => {
-        if (!disabled && (event.key === 'Enter' || event.key === ' ')) {
+        if (!disabled && event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) {
             onClickRow?.(event);
         }
     };

package/dist/src/DateTimeSelection/shared/BasePicker/constants.d.ts

@@ -8,7 +8,7 @@ export declare const LABEL_SELECT_MONTH = "\u6708\u3092\u9078\u629E";
 export declare const LABEL_OPEN_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u958B\u304F";
 export declare const LABEL_CLOSE_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u9589\u3058\u308B";
 export declare const LABEL_TODAY = "\u4ECA\u65E5";
-type LabelKey = 'GO_TO_PREV_MONTH' | 'GO_TO_NEXT_MONTH' | 'GO_TO_PREV_YEAR' | 'GO_TO_NEXT_YEAR' | 'SELECT_MONTH' | 'OPEN_CALENDAR' | 'CLOSE_CALENDAR' | 'TODAY';
+type LabelKey = 'GO_TO_PREV_MONTH' | 'GO_TO_NEXT_MONTH' | 'GO_TO_PREV_YEAR' | 'GO_TO_NEXT_YEAR' | 'SELECT_MONTH' | 'SELECT_YEAR' | 'OPEN_CALENDAR' | 'CLOSE_CALENDAR' | 'TODAY';
 export declare const BASE_PICKER_LABELS: Record<NonNullable<BasePickerProps['calendarLocale']>, Record<LabelKey, string>>;
 export declare const DAY_ABBREVIATIONS: Record<NonNullable<BasePickerProps['calendarLocale']>, string[]>;
 export declare const DAY_FULL_NAMES: Record<NonNullable<BasePickerProps['calendarLocale']>, string[]>;

package/dist/src/DateTimeSelection/shared/BasePicker/constants.js

@@ -14,6 +14,7 @@ export const BASE_PICKER_LABELS = {
         GO_TO_PREV_YEAR: '前の年',
         GO_TO_NEXT_YEAR: '次の年',
         SELECT_MONTH: '月を選択',
+        SELECT_YEAR: '年を選択',
         OPEN_CALENDAR: 'カレンダーを開く',
         CLOSE_CALENDAR: 'カレンダーを閉じる',
         TODAY: '今日',
@@ -24,6 +25,7 @@ export const BASE_PICKER_LABELS = {
         GO_TO_PREV_YEAR: 'Previous year',
         GO_TO_NEXT_YEAR: 'Next year',
         SELECT_MONTH: 'Select month',
+        SELECT_YEAR: 'Select year',
         OPEN_CALENDAR: 'Open calendar',
         CLOSE_CALENDAR: 'Close calendar',
         TODAY: 'Today',

package/dist/src/DateTimeSelection/shared/YearSelector/YearSelector.js

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react';
 import { SelectBox } from '../../../SelectBox';
 import { yearSelectorSlotRecipe } from '../../../../styled-system/recipes';
 import { MAXIMUM_VIEWABLE_YEAR, MINIMUM_VIEWABLE_YEAR } from './constants';
+import { getBasePickerLabel } from '../BasePicker/constants';
 import { cx } from '../../../../styled-system/css';
 import { useCalendarLocale } from '../CalendarLocale/CalendarLocaleContext';
 import { useDisplayJapaneseCalendar } from '../CalendarLocale/DisplayJapaneseCalendarContext';
@@ -34,5 +35,10 @@ export function YearSelector({ value, onChange, filterYear, triggerProps, trigge
         }
     }, [onChange]);
     const classes = yearSelectorSlotRecipe();
-    return (_jsx(SelectBox, { value: selectedOption, options: options, size: "small", targetDOMNode: targetDOMNode, enableAutoScrollToSelectedOption: { block: 'center', behavior: 'instant' }, popoverContentProps: { className: cx(classes.optionPanel, 'mfui-YearSelector__optionPanel') }, triggerProps: triggerProps, triggerWrapperProps: triggerWrapperProps, onChange: handleChange }));
+    return (_jsx(SelectBox, { value: selectedOption, options: options, size: "small", targetDOMNode: targetDOMNode, enableAutoScrollToSelectedOption: { block: 'center', behavior: 'instant' }, popoverContentProps: { className: cx(classes.optionPanel, 'mfui-YearSelector__optionPanel') }, triggerProps: {
+            // The trigger has role="combobox", which does not support naming from its
+            // content, so an explicit accessible name is required.
+            'aria-label': getBasePickerLabel('SELECT_YEAR', calendarLocale),
+            ...triggerProps,
+        }, triggerWrapperProps: triggerWrapperProps, onChange: handleChange }));
 }

package/dist/src/DropdownMenu/DropdownMenu.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState, } from 'react';
 import { DropdownMenuButtonTrigger } from './DropdownMenuButtonTrigger';
 import { DropdownMenuContainer } from './DropdownMenuContainer';
 import { DropdownMenuDivider } from './DropdownMenuDivider';
@@ -29,7 +29,15 @@ import { DropdownMenuHeading } from './DropdownMenuHeading';
  */
 export function DropdownMenu({ icon, label, children, triggerProps, tooltipLabel, tooltipPlacement, triggerMiddleTruncate, triggerTypographyVariant, menuPopoverProps, disabled, targetDOMNode, enableAutoUnmount, onOpenStateChanged, onBlur, }) {
     const [menuDefaultFocusPosition, setMenuDefaultFocusPosition] = useState('first');
+    // Tracks keyboard activation (Enter / Space) of the trigger. The resulting click event usually
+    // has `detail === 0`, but Safari reports keyboard-triggered clicks with `detail === 1`, so the
+    // keydown itself is recorded as the reliable signal.
+    const isTriggerActivatedByKeyboardRef = useRef(false);
     const handleTriggerKeyDownLocal = useCallback((event) => {
+        // The flag only survives from an Enter / Space keydown to its follow-up click; any other key
+        // invalidates the pending keyboard activation so the flag cannot linger when the click never
+        // fires.
+        isTriggerActivatedByKeyboardRef.current = event.key === 'Enter' || event.key === ' ';
         switch (event.key) {
             case 'ArrowDown':
                 event.stopPropagation();
@@ -49,7 +57,23 @@ export function DropdownMenu({ icon, label, children, triggerProps, tooltipLabel
                 handleTriggerKeyDownLocal(event);
                 handleTriggerKeyDown(event);
             };
-            return icon ? (_jsx(IconButton, { ref: setTriggerRef, "aria-expanded": isPopoverOpen, "aria-haspopup": "menu", disabled: disabled, onKeyDown: handleKeyDownCommon, onBlur: handleTriggerBlur, onClick: togglePopover, ...triggerProps, "aria-label": label, children: icon })) : (_jsx(DropdownMenuButtonTrigger, { label: label, tooltipLabel: tooltipLabel, tooltipPlacement: tooltipPlacement, triggerMiddleTruncate: triggerMiddleTruncate, triggerTypographyVariant: triggerTypographyVariant, triggerProps: triggerProps, disabled: disabled, isPopoverOpen: isPopoverOpen, setTriggerRef: setTriggerRef, togglePopover: togglePopover, handleTriggerKeyDown: handleKeyDownCommon, handleTriggerBlur: handleTriggerBlur }));
+            const handleBlurCommon = (event) => {
+                // Focus leaving the trigger invalidates any pending keyboard activation (e.g. a Space
+                // keydown whose follow-up click never fired), so a later mouse click cannot be
+                // misclassified as keyboard activation.
+                isTriggerActivatedByKeyboardRef.current = false;
+                handleTriggerBlur(event);
+            };
+            const handleTriggerClick = (event) => {
+                // Opening with the keyboard (Enter / Space) focuses the first item, following the
+                // WAI-ARIA menu button pattern. Opening with the mouse focuses no item; the menu
+                // container receives focus instead so that arrow keys still work.
+                const isKeyboardActivation = isTriggerActivatedByKeyboardRef.current || event.detail === 0;
+                isTriggerActivatedByKeyboardRef.current = false;
+                setMenuDefaultFocusPosition(isKeyboardActivation ? 'first' : 'none');
+                togglePopover(event);
+            };
+            return icon ? (_jsx(IconButton, { ref: setTriggerRef, "aria-expanded": isPopoverOpen, "aria-haspopup": "menu", disabled: disabled, onKeyDown: handleKeyDownCommon, onBlur: handleBlurCommon, onClick: handleTriggerClick, ...triggerProps, "aria-label": label, children: icon })) : (_jsx(DropdownMenuButtonTrigger, { label: label, tooltipLabel: tooltipLabel, tooltipPlacement: tooltipPlacement, triggerMiddleTruncate: triggerMiddleTruncate, triggerTypographyVariant: triggerTypographyVariant, triggerProps: triggerProps, disabled: disabled, isPopoverOpen: isPopoverOpen, setTriggerRef: setTriggerRef, togglePopover: handleTriggerClick, handleTriggerKeyDown: handleKeyDownCommon, handleTriggerBlur: handleBlurCommon }));
         }, renderContent: ({ closePopover }) => (_jsx(DropdownMenuProvider, { value: { closeMenuPopover: closePopover }, children: _jsx(DropdownMenuContainer, { defaultFocusItem: menuDefaultFocusPosition, onClose: closePopover, children: children }) })), enableAutoFocusOnPopover: false, enableAutoUnmount: enableAutoUnmount, contentProps: {
             className: cx(classes.popover, menuPopoverProps?.className),
         }, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }));

package/dist/src/DropdownMenu/DropdownMenuButtonTrigger.d.ts

@@ -1,4 +1,4 @@
-import { type FocusEventHandler, type KeyboardEventHandler, type SyntheticEvent } from 'react';
+import { type FocusEventHandler, type KeyboardEventHandler, type MouseEventHandler } from 'react';
 import { type ButtonProps } from '../Button';
 import { type DropdownMenuButtonTriggerProps } from './DropdownMenu.types';
 type DropdownMenuButtonTriggerComponentProps = DropdownMenuButtonTriggerProps & {
@@ -25,7 +25,7 @@ type DropdownMenuButtonTriggerComponentProps = DropdownMenuButtonTriggerProps &
     /**
      * Toggles the open state of the dropdown menu.
      */
-    togglePopover: (event?: SyntheticEvent) => void;
+    togglePopover: MouseEventHandler<HTMLElement>;
     /**
      * Keyboard handler for the trigger (ArrowUp / ArrowDown focus behavior already merged in).
      */

package/dist/src/DropdownMenu/DropdownMenuContainer/DropdownMenuContainer.js

@@ -11,14 +11,21 @@ import { dropdownMenuContainerSlotRecipe } from '../../../styled-system/recipes'
 export const DropdownMenuContainer = forwardRef(({ children, className, defaultFocusItem: defaultFocus = 'first', style, onClose }, ref) => {
     const classes = dropdownMenuContainerSlotRecipe();
     const menuContainerRef = useRef(null);
+    const getFocusableItems = useCallback(() => menuContainerRef.current?.querySelectorAll('[data-mfui-menu-item]:is([data-mfui-focusable=true])'), []);
     useEffect(() => {
-        const focusableItems = menuContainerRef.current?.querySelectorAll('[data-mfui-menu-item]:is([data-mfui-focusable=true])');
+        if (defaultFocus === 'none') {
+            // No item should appear focused (e.g. the menu was opened with the mouse). Focus the
+            // container itself so keyboard interactions (Escape / ArrowDown / ArrowUp) keep working.
+            menuContainerRef.current?.focus({ preventScroll: true });
+            return;
+        }
+        const focusableItems = getFocusableItems();
         if (!focusableItems) {
             return;
         }
         const defaultFocusIndex = defaultFocus === 'first' ? 0 : focusableItems.length - 1;
         focusableItems[defaultFocusIndex]?.focus({ preventScroll: true });
-    }, [defaultFocus]);
+    }, [defaultFocus, getFocusableItems]);
     const handleKeyDown = useCallback((event) => {
         switch (event.key) {
             case 'Escape':
@@ -27,7 +34,25 @@ export const DropdownMenuContainer = forwardRef(({ children, className, defaultF
                 event.preventDefault();
                 onClose();
                 break;
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                // Focused items handle arrow navigation themselves and stop propagation, so this
+                // branch only runs while the container itself is focused (defaultFocusItem 'none'):
+                // ArrowDown moves focus to the first item and ArrowUp to the last one.
+                if (event.target !== event.currentTarget) {
+                    break;
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                const focusableItems = getFocusableItems();
+                if (!focusableItems || focusableItems.length === 0) {
+                    break;
+                }
+                const focusIndex = event.key === 'ArrowDown' ? 0 : focusableItems.length - 1;
+                focusableItems[focusIndex]?.focus();
+                break;
+            }
         }
-    }, [onClose]);
+    }, [onClose, getFocusableItems]);
     return (_jsx("div", { ref: mergeRefs(ref, menuContainerRef), "data-mfui-menu-container": true, role: "menu", className: cx(classes.root, 'mfui-DropdownMenuContainer__root', className), tabIndex: -1, style: style, onKeyDown: handleKeyDown, children: children }));
 });

package/dist/src/DropdownMenu/DropdownMenuContainer/DropdownMenuContainer.types.d.ts

@@ -1,7 +1,7 @@
 /**
  * The default focus position of the menu.
  */
-export type DropdownMenuDefaultFocusItem = 'first' | 'last';
+export type DropdownMenuDefaultFocusItem = 'first' | 'last' | 'none';
 export type DropdownMenuContainerProps = {
     /**
      * The content of the component.
@@ -16,10 +16,13 @@ export type DropdownMenuContainerProps = {
     /**
      * The default focus position of the dropdown menu.
      *
-     * It should be either 'first' or 'last'.
+     * It should be either 'first', 'last' or 'none'.
      *
      * If 'first', the first focusable item will be focused.
      * If 'last', the last focusable item will be focused.
+     * If 'none', no item will be focused; the menu container itself receives focus instead so that
+     * keyboard interactions (Escape / ArrowDown / ArrowUp) keep working. Use this when the menu is
+     * opened with a pointer, where visually focusing an item is not expected.
      *
      * @default 'first'
      */

package/dist/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.d.ts

@@ -12,4 +12,4 @@ import { type DropdownMenuItemProps } from './DropdownMenuItem.types';
  *
  * Otherwise, it will be rendered as a div element.
  */
-export declare function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, 'aria-labelledby': ariaLabelledby, ...rest }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, disabledMessage, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, ...rest }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.js

@@ -1,6 +1,7 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef } from 'react';
+import { Info } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../../styled-system/css';
 import { FocusIndicator } from '../../FocusIndicator';
 import { dropdownMenuItemSlotRecipe } from '../../../styled-system/recipes';
@@ -19,7 +20,7 @@ import { useDropdownMenuContext } from '../DropdownMenuContext';
  *
  * Otherwise, it will be rendered as a div element.
  */
-export function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, 'aria-labelledby': ariaLabelledby, ...rest }) {
+export function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, disabledMessage, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, ...rest }) {
     const classes = dropdownMenuItemSlotRecipe();
     const { closeMenuPopover } = useDropdownMenuContext();
     const id = useId();
@@ -87,5 +88,19 @@ export function DropdownMenuItem({ children, className, href, target, customLink
         : disabled
             ? { 'aria-disabled': true, 'data-disabled': '' }
             : {};
-    return (_jsx(FocusIndicator, { position: "inside", children: _jsx(Tag, { ...rest, ref: itemRef, ...(ariaLabelledby && { id }), "data-mfui-menu-item": true, role: "menuitem", className: cx(classes.root, 'mfui-DropdownMenuItem__root', className), tabIndex: -1, href: resolvedHref, target: target, "data-mfui-focusable": isFocusable, type: onClick ? 'button' : undefined, "aria-labelledby": ariaLabelledby ? `${ariaLabelledby} ${id}` : undefined, ...disabledProps, onKeyDown: handleKeyDown, onClick: isButton ? handleClick : undefined, children: typeof children === 'string' ? _jsx(Typography, { variant: "body", children: children }) : children }) }));
+    const showMessage = Boolean(disabled && disabledMessage);
+    const labelId = `${id}-label`;
+    const messageId = `${id}-message`;
+    const label = typeof children === 'string' ? _jsx(Typography, { variant: "body", children: children }) : children;
+    // With a message, the accessible name must reference only the label span so the message
+    // stays a description; without one, keep the existing self-reference via the item's own id.
+    const resolvedAriaLabelledby = showMessage
+        ? [ariaLabelledby, labelId].filter(Boolean).join(' ')
+        : ariaLabelledby
+            ? `${ariaLabelledby} ${id}`
+            : undefined;
+    const resolvedAriaDescribedby = showMessage
+        ? [ariaDescribedby, messageId].filter(Boolean).join(' ')
+        : ariaDescribedby;
+    return (_jsx(FocusIndicator, { position: "inside", children: _jsx(Tag, { ...rest, ref: itemRef, ...(ariaLabelledby && { id }), "data-mfui-menu-item": true, role: "menuitem", className: cx(classes.root, 'mfui-DropdownMenuItem__root', className), tabIndex: -1, href: resolvedHref, target: target, "data-mfui-focusable": isFocusable, type: onClick ? 'button' : undefined, "aria-labelledby": resolvedAriaLabelledby, "aria-describedby": resolvedAriaDescribedby, ...disabledProps, onKeyDown: handleKeyDown, onClick: isButton ? handleClick : undefined, children: showMessage ? (_jsxs("span", { className: cx(classes.content, 'mfui-DropdownMenuItem__content'), children: [_jsx("span", { id: labelId, children: label }), _jsxs("span", { id: messageId, className: cx(classes.disabledMessage, 'mfui-DropdownMenuItem__disabledMessage'), children: [_jsx(Info, { "aria-hidden": true, className: cx(classes.disabledMessageIcon, 'mfui-DropdownMenuItem__disabledMessageIcon') }), _jsx(Typography, { variant: "helpMessage", children: disabledMessage })] })] })) : (label) }) }));
 }

package/dist/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.types.d.ts

@@ -77,6 +77,12 @@ export type DropdownMenuItemProps = {
      * The class name to apply to the component.
      */
     className?: string;
+    /**
+     * An explanatory message displayed inline below the item label when the item is disabled.
+     * Rendered with an info icon. Ignored unless `disabled` is true.
+     * Exposed to screen readers as the item's accessible description (aria-describedby).
+     */
+    disabledMessage?: React.ReactNode;
     /**
      * The aria-labelledby attribute for accessibility.
      *

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

@@ -3,4 +3,4 @@ import { type MainNavigationProps } from './MainNavigation.types';
  * The component for the main navigation on the normal viewport.
  * This component must only be used in MainNavigation.tsx, do not export it.
  */
-export declare function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible, width, customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, }: MainNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible, width, customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }: MainNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/MainNavigation/BaseMainNavigation.js

@@ -13,7 +13,7 @@ import { Popover } from '../Popover';
  * The component for the main navigation on the normal viewport.
  * This component must only be used in MainNavigation.tsx, do not export it.
  */
-export function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible = false, width = 'normal', customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, }) {
+export function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible = false, width = 'normal', customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }) {
     const [localIsCollapsed, setLocalIsCollapsed] = useState(controlledIsCollapsed ?? false);
     const [openPopoverIndex, setOpenPopoverIndex] = useState(null);
     const isControlled = controlledIsCollapsed !== undefined;
@@ -28,7 +28,9 @@ export function BaseMainNavigation({ className, featureShortcut, navigationItems
     };
     const classes = baseMainNavigationSlotRecipe({ width, disableResponsive });
     const InternalLinkTag = customLinkComponent ?? 'a';
-    const toggleButtonLabel = isCollapsed ? 'ナビゲーションを拡げる' : 'ナビゲーションを折りたたむ';
+    const toggleButtonLabel = isCollapsed
+        ? (expandButtonProps?.label ?? 'ナビゲーションを拡げる')
+        : (collapseButtonProps?.label ?? 'ナビゲーションを折りたたむ');
     return (_jsxs("div", { "data-mfui-collapsed": isCollapsed, className: cx(classes.root, 'mfui-BaseMainNavigation__root', className), children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-BaseMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-BaseMainNavigation__featureShortcutAnchor'), children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsxs("nav", { id: navId, className: cx(classes.nav, 'mfui-BaseMainNavigation__nav'), children: [_jsx("ul", { className: cx(classes.list, 'mfui-BaseMainNavigation__list'), children: navigationItems.map((navigation, index) => {
                             const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
                             const isGroupMenu = 'isGroupMenu' in navigation && navigation.isGroupMenu;

package/dist/src/MainNavigation/MainNavigation.js

@@ -9,7 +9,7 @@ import { NarrowViewportMainNavigation } from './NarrowViewportMainNavigation';
  * When the viewport is narrow, the navigation will be displayed as a drawer.
  * When the viewport is not narrow, the navigation will be displayed as a sidebar.
  */
-export const MainNavigation = forwardRef(({ className, featureShortcut, navigationItems, disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, isCollapsed, onCollapsedChange, }, ref) => {
+export const MainNavigation = forwardRef(({ className, featureShortcut, navigationItems, disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, isCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }, ref) => {
     const commonProps = {
         className,
         featureShortcut,
@@ -17,5 +17,5 @@ export const MainNavigation = forwardRef(({ className, featureShortcut, navigati
         width,
         customLinkComponent,
     };
-    return (_jsxs(_Fragment, { children: [_jsx(BaseMainNavigation, { ...commonProps, enableCollapsible: enableCollapsible, disableResponsive: disableResponsive, isCollapsed: isCollapsed, onCollapsedChange: onCollapsedChange }), !disableResponsive && _jsx(NarrowViewportMainNavigation, { ...commonProps, ref: ref })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(BaseMainNavigation, { ...commonProps, enableCollapsible: enableCollapsible, disableResponsive: disableResponsive, isCollapsed: isCollapsed, onCollapsedChange: onCollapsedChange, collapseButtonProps: collapseButtonProps, expandButtonProps: expandButtonProps }), !disableResponsive && _jsx(NarrowViewportMainNavigation, { ...commonProps, ref: ref })] }));
 });

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

@@ -230,6 +230,24 @@ export type MainNavigationProps = {
      * This prop is only effective when `enableCollapsible` is `true`.
      */
     isCollapsed?: boolean;
+    /**
+     * The properties for the toggle button when the navigation is expanded (clicking will collapse).
+     * This prop is only effective when `enableCollapsible` is `true`.
+     *
+     * @property label - Accessible name for the toggle button. It is used for both the tooltip content and the `aria-label` of the toggle button. default is 'ナビゲーションを折りたたむ'.
+     */
+    collapseButtonProps?: {
+        label?: string;
+    };
+    /**
+     * The properties for the toggle button when the navigation is collapsed (clicking will expand).
+     * This prop is only effective when `enableCollapsible` is `true`.
+     *
+     * @property label - Accessible name for the toggle button. It is used for both the tooltip content and the `aria-label` of the toggle button. default is 'ナビゲーションを拡げる'.
+     */
+    expandButtonProps?: {
+        label?: string;
+    };
     /**
      * Callback function called when the collapsed state changes.
      * This is triggered when the toggle button is clicked.

package/dist/src/NumberBox/NumberBox.js

@@ -1,15 +1,19 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useLayoutEffect, useRef, useState, useEffect } from 'react';
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react';
 import { cx } from '../../styled-system/css';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
 import { TextBox } from '../TextBox';
 /**
- * Convert full-width digits, minus sign, and decimal point to half-width.
+ * Convert full-width digits, minus signs, and decimal points to half-width.
+ * Kana-mode IMEs can emit prolonged sound marks for the minus key.
  *
  * @param value - The string to convert.
  */
-const toHalfWidth = (value) => value.replaceAll(/[\uFF10-\uFF19\uFF0D\uFF0E]/g, (char) => String.fromCodePoint((char.codePointAt(0) ?? 0) - 0xfe_e0));
+const toHalfWidth = (value) => value
+    .replaceAll(/[\uFF10-\uFF19\uFF0D\uFF0E]/g, (char) => String.fromCodePoint((char.codePointAt(0) ?? 0) - 0xfe_e0))
+    .replaceAll(/[\u3002\uFF61]/g, '.')
+    .replaceAll(/[\u2212\u30FC\uFF70\u2015]/g, '-');
 /**
  * Sanitize input: convert full-width characters, then keep only valid numeric characters.
  * Allows: digits 0-9, a single leading minus, a single decimal point after a digit.
@@ -69,6 +73,35 @@ const formatWithCommas = (raw) => {
  * @param display - The formatted display string.
  */
 const stripFormatting = (display) => display.replaceAll(',', '');
+/**
+ * Map a display cursor position to the equivalent index in the raw numeric string.
+ *
+ * @param display - The formatted display string.
+ * @param displayCursor - The cursor position in the display string.
+ */
+const mapDisplayCursorToRaw = (display, displayCursor) => {
+    const commasBefore = (display.slice(0, displayCursor).match(/,/g) ?? []).length;
+    return displayCursor - commasBefore;
+};
+/**
+ * Map a raw numeric cursor position to the equivalent index in the formatted display string.
+ *
+ * @param formatted - The formatted display string.
+ * @param rawCursor - The cursor position in the raw numeric string.
+ */
+const mapRawCursorToDisplay = (formatted, rawCursor) => {
+    let rawCount = 0;
+    let index = 0;
+    for (const char of formatted) {
+        if (rawCount >= rawCursor) {
+            return index;
+        }
+        if (char !== ',')
+            rawCount += 1;
+        index += 1;
+    }
+    return formatted.length;
+};
 /**
  * NumberBox is a numeric input component that wraps TextBox.
  * It provides real-time comma formatting, full-width digit conversion,
@@ -79,6 +112,7 @@ const stripFormatting = (display) => display.replaceAll(',', '');
 export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign = 'right', style, enableClearButton, ...rest }, ref) => {
     const inputRef = useRef(null);
     const pendingCursorRef = useRef(null);
+    const [cursorRestoreToken, requestCursorRestore] = useReducer((count) => count + 1, 0);
     const [displayValue, setDisplayValue] = useState(() => formatWithCommas(sanitizeInput(String(value ?? defaultValue ?? ''))));
     // Sync with controlled value
     useEffect(() => {
@@ -89,16 +123,22 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
     // Restore cursor position after display value update
     useLayoutEffect(() => {
         if (pendingCursorRef.current !== null && inputRef.current) {
-            inputRef.current.setSelectionRange(pendingCursorRef.current, pendingCursorRef.current);
+            const input = inputRef.current;
+            const cursor = pendingCursorRef.current;
             pendingCursorRef.current = null;
+            if (input.value !== displayValue) {
+                input.value = displayValue;
+            }
+            input.setSelectionRange(cursor, cursor);
         }
-    }, [displayValue]);
+    }, [displayValue, cursorRestoreToken]);
     const handleChange = useCallback((event) => {
+        const inputDisplay = event.target.value;
         const cursorPos = event.target.selectionStart ?? 0;
-        const rawInput = stripFormatting(toHalfWidth(event.target.value));
-        // Calculate cursor position accounting for comma changes
-        const commasBefore = (displayValue.slice(0, cursorPos).match(/,/g) ?? []).length;
-        let rawCursor = cursorPos - commasBefore;
+        const prevSanitized = stripFormatting(displayValue);
+        const rawInput = stripFormatting(toHalfWidth(inputDisplay));
+        // Use the current input value so comma positions match the cursor.
+        let rawCursor = mapDisplayCursorToRaw(inputDisplay, cursorPos);
         // When two dots appear, the user is moving the decimal point.
         // Keep the newly typed dot (at rawCursor - 1) and remove the old one.
         let processedRawInput = rawInput;
@@ -114,22 +154,29 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
                     rawCursor -= 1;
             }
         }
-        const sanitized = sanitizeInput(processedRawInput);
-        const formatted = formatWithCommas(sanitized);
-        let newCursor = formatted.length;
-        let rawCount = 0;
-        let index = 0;
-        for (const char of formatted) {
-            if (rawCount >= rawCursor) {
-                newCursor = index;
-                break;
+        let sanitized = sanitizeInput(processedRawInput);
+        // Backspace right after a comma deletes the digit before the comma.
+        const isBackspaceOnComma = sanitized === prevSanitized && cursorPos < displayValue.length && displayValue[cursorPos] === ',';
+        if (isBackspaceOnComma) {
+            const rawPos = mapDisplayCursorToRaw(displayValue, cursorPos);
+            if (rawPos > 0) {
+                sanitized = prevSanitized.slice(0, rawPos - 1) + prevSanitized.slice(rawPos);
+                rawCursor = rawPos - 1;
             }
-            if (char !== ',')
-                rawCount += 1;
-            index += 1;
+        }
+        const formatted = formatWithCommas(sanitized);
+        let newCursor = mapRawCursorToDisplay(formatted, rawCursor);
+        // Rejected characters keep the cursor before the ignored input.
+        const rejectedCharCount = rawInput.length - sanitized.length;
+        if (sanitized === prevSanitized && !isBackspaceOnComma && rejectedCharCount > 0) {
+            const rawBeforeCursor = mapDisplayCursorToRaw(inputDisplay, cursorPos);
+            newCursor = mapRawCursorToDisplay(formatted, rawBeforeCursor - rejectedCharCount);
         }
         pendingCursorRef.current = newCursor;
         setDisplayValue(formatted);
+        if (formatted === displayValue) {
+            requestCursorRestore();
+        }
         onChange?.(sanitized);
     }, [displayValue, onChange]);
     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 }));

package/dist/src/SearchBox/SearchBox.js

@@ -14,10 +14,24 @@ import { normalizeFullWidth } from '../utilities/string/normalizeFullWidth';
 export const SearchBox = forwardRef(({ className, normalizeFullWidth: shouldNormalizeFullWidth = false, onChange, ...rest }, ref) => {
     const handleChange = useCallback((event) => {
         if (shouldNormalizeFullWidth) {
-            // Rewrite the native input so the displayed value reflects the normalization
-            // and the consumer's onChange sees the canonical half-width / composed-kana form.
-            // eslint-disable-next-line no-param-reassign
-            event.target.value = normalizeFullWidth(event.target.value);
+            const { value, selectionStart } = event.target;
+            const normalizedValue = normalizeFullWidth(value);
+            // Only rewrite the native input when normalization actually changes the value.
+            // Assigning to `value` resets the caret to the end even when the string is
+            // unchanged, so skipping the no-op assignment keeps the caret in place while
+            // the user edits mid-string.
+            if (normalizedValue !== value) {
+                // Map the caret by normalizing only the text before it. This keeps the caret
+                // correct even when normalization changes the string length (e.g. `ﾊﾟ` -> `パ`).
+                const caretPosition = selectionStart === null
+                    ? normalizedValue.length
+                    : normalizeFullWidth(value.slice(0, selectionStart)).length;
+                // Rewrite the native input so the displayed value reflects the normalization
+                // and the consumer's onChange sees the canonical half-width / composed-kana form.
+                // eslint-disable-next-line no-param-reassign
+                event.target.value = normalizedValue;
+                event.target.setSelectionRange(caretPosition, caretPosition);
+            }
         }
         onChange?.(event);
     }, [shouldNormalizeFullWidth, onChange]);

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

@@ -1,6 +1,8 @@
 /**
  * The general purpose SidePane component.
- * This component extends the props of `<div>` element with `role="dialog"`.
+ * This component extends the props of `<div>` element. The extended props and `ref` are
+ * applied to the root overlay element covering the viewport, while `role="dialog"` (and
+ * `aria-modal="true"` when `enableModal` is set) are set on the inner pane window element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */

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, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Close, PaneExpansionToRight, PaneExpansionToLeft } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { Heading } from '../Heading';
@@ -13,16 +13,20 @@ import { Portal, TargetDomNodeProvider, useAutomaticTargetDomNode } from '../Por
 import { FormFooter } from '../FormFooter';
 /**
  * The general purpose SidePane component.
- * This component extends the props of `<div>` element with `role="dialog"`.
+ * This component extends the props of `<div>` element. The extended props and `ref` are
+ * applied to the root overlay element covering the viewport, while `role="dialog"` (and
+ * `aria-modal="true"` when `enableModal` is set) are set on the inner pane window element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */
 export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onClose, className, children, actionSlot, formFooterProps, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
     const classes = sidePaneSlotRecipe({ position, nonModal: !enableModal });
+    const [insideElement, setInsideElement] = useState(null);
     const { localOpen, handleCloseSidePane, handleStopCloseSidePane, sidePaneElement, setSidePaneElement } = useSidePaneStateController({
         open,
         onClose,
         ref,
+        insideElement,
     });
     const handleBackdropClick = useCallback(() => {
         if (!disableBackdropClose) {
@@ -56,8 +60,8 @@ export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onCl
     const shouldRenderContent = enableAutoUnmount ? localOpen : true;
     const resolvedFormFooterPosition = formFooterProps?.position ?? 'sticky';
     const headingNode = title ? (_jsx(Heading, { variant: "pageHeading2", tag: "h2", children: title })) : null;
-    return (_jsx(TargetDomNodeProvider, { targetDomNode: sidePaneElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setSidePaneElement, role: "dialog", ...props, className: cx(classes.root, 'mfui-SidePane__root', className), tabIndex: -1, style: {
+    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", { "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("header", { 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("main", { 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, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("header", { 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("main", { 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/hooks/useSidePaneStateController.d.ts

@@ -3,6 +3,7 @@ type UseSidePaneStateController = {
     open?: boolean;
     onClose?: () => void;
     ref?: ForwardedRef<HTMLDivElement | null>;
+    insideElement?: HTMLElement | null;
 };
 /**
  * Custom hook to control the open/close state of a SidePane.
@@ -15,9 +16,13 @@ type UseSidePaneStateController = {
  *
  * @param options.onClose - Callback function to execute when closing the SidePane.
  *
- * @returns Object containing functions to handle closing the SidePane and ref Object to attach Dialog element.
+ * @param options.insideElement - The pane window element with `role="dialog"`. It receives
+ * default focus when the SidePane opens, keeping focus inside the `aria-modal` boundary.
+ *
+ * @returns Object containing the local open state, close/click handlers, and a callback
+ * ref (`setSidePaneElement`) to attach to the root overlay element.
  */
-export declare function useSidePaneStateController({ open, onClose, ref }: UseSidePaneStateController): {
+export declare function useSidePaneStateController({ open, onClose, ref, insideElement }: UseSidePaneStateController): {
     localOpen: boolean | undefined;
     handleCloseSidePane: () => void;
     handleStopCloseSidePane: (event: React.MouseEvent<HTMLDivElement>) => void;

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

@@ -12,9 +12,13 @@ import { useSidePaneOpenStateWithAnimation } from './useSidePaneOpenStateWithAni
  *
  * @param options.onClose - Callback function to execute when closing the SidePane.
  *
- * @returns Object containing functions to handle closing the SidePane and ref Object to attach Dialog element.
+ * @param options.insideElement - The pane window element with `role="dialog"`. It receives
+ * default focus when the SidePane opens, keeping focus inside the `aria-modal` boundary.
+ *
+ * @returns Object containing the local open state, close/click handlers, and a callback
+ * ref (`setSidePaneElement`) to attach to the root overlay element.
  */
-export function useSidePaneStateController({ open, onClose, ref }) {
+export function useSidePaneStateController({ open, onClose, ref, insideElement }) {
     const [sidePaneElement, setSidePaneElement] = useState(null);
     const { localOpen, openSidePane, closeSidePane } = useSidePaneOpenStateWithAnimation({ open, sidePaneElement });
     const setSidePaneElementRef = useCallback((element) => {
@@ -49,12 +53,14 @@ export function useSidePaneStateController({ open, onClose, ref }) {
     const handleStopCloseSidePane = useCallback((event) => {
         event.stopPropagation();
     }, []);
-    // Autofocus to the SidePane itself when it opens
+    // Autofocus to the pane window (`role="dialog"` element) when it opens.
+    // Screen readers honor `aria-modal` only when focus is on the `role="dialog"`
+    // element or its descendants, so the root wrapper must not be the focus target.
     useEffect(() => {
         if (!localOpen)
             return;
-        sidePaneElement?.focus();
-    }, [sidePaneElement, localOpen]);
+        (insideElement ?? sidePaneElement)?.focus();
+    }, [insideElement, sidePaneElement, localOpen]);
     return {
         localOpen,
         handleCloseSidePane,

package/dist/src/Tag/Tag.d.ts

@@ -7,4 +7,4 @@ import { type TagProps } from './Tag.types';
  *  - If `disabled` is `true` and `onClick` is provided, the tag will be displayed as disabled button.
  *  - If `showCloseButton` is `true`, the tag will be displayed with a close button.
  */
-export declare function Tag({ label, onClick, href, customLinkComponent, disabled, onClose, target, rel, className, }: TagProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tag({ label, onClick, href, customLinkComponent, disabled, onClose, closeButtonProps, target, rel, className, }: TagProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Tag/Tag.js

@@ -14,10 +14,10 @@ import { cx } from '../../styled-system/css';
  *  - If `disabled` is `true` and `onClick` is provided, the tag will be displayed as disabled button.
  *  - If `showCloseButton` is `true`, the tag will be displayed with a close button.
  */
-export function Tag({ label, onClick, href, customLinkComponent, disabled = false, onClose, target, rel, className, }) {
+export function Tag({ label, onClick, href, customLinkComponent, disabled = false, onClose, closeButtonProps, target, rel, className, }) {
     const isClickable = !!onClick || !!href;
     const classes = tagSlotRecipe({ interactable: isClickable, showCloseButton: !!onClose });
-    const closeButton = (_jsx(IconButton, { disabled: disabled, className: cx(classes.closeButton, 'mfui-Tag__closeButton'), "aria-label": `${label}を削除する`, onClick: onClose, children: _jsx(Close, {}) }));
+    const closeButton = (_jsx(IconButton, { disabled: disabled, className: cx(classes.closeButton, 'mfui-Tag__closeButton'), "aria-label": closeButtonProps?.['aria-label'] ?? `${label}を削除する`, onClick: onClose, children: _jsx(Close, {}) }));
     if (!isClickable) {
         return (_jsx(FocusIndicator, { children: _jsxs("span", { className: cx(classes.root, 'mfui-Tag__root', className), children: [_jsx(Typography, { variant: "condensedInput", children: label }), onClose ? closeButton : null] }) }));
     }

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

@@ -33,6 +33,13 @@ export type TagProps = {
      * The handler to close the tag. When this prop is provided, the close button will be shown
      */
     onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The properties for the close button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the close button. default is '{label}を削除する'.
+     */
+    closeButtonProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
     /**
      * Class name to be applied to the wrapper element.
      */

package/dist/styled-system/recipes/data-table-cell-slot-recipe.d.ts

@@ -7,6 +7,7 @@ interface DataTableCellSlotRecipeVariant {
 isCheckboxCell: boolean
 rowHighlighted: boolean
 fixedColumn: boolean
+verticalBorder: boolean
 edgeFixedColumn: "left" | "right"
 layout: "default" | "edge-to-edge"
 type: "text" | "amount"

package/dist/styled-system/recipes/data-table-cell-slot-recipe.js

@@ -52,6 +52,7 @@ const dataTableCellSlotRecipeVariantKeys = [
     "isCheckboxCell",
     "rowHighlighted",
     "fixedColumn",
+    "verticalBorder",
     "edgeFixedColumn",
     "layout",
     "type"
@@ -77,6 +78,9 @@ export const dataTableCellSlotRecipe = /* @__PURE__ */ Object.assign(dataTableCe
         "fixedColumn": [
             "true"
         ],
+        "verticalBorder": [
+            "true"
+        ],
         "edgeFixedColumn": [
             "left",
             "right"

package/dist/styled-system/recipes/data-table-header-cell-slot-recipe.d.ts

@@ -5,6 +5,7 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 interface DataTableHeaderCellSlotRecipeVariant {
   size: "small" | "medium"
 fixedColumn: boolean
+verticalBorder: boolean
 edgeFixedColumn: "left" | "right"
 isCheckboxCell: boolean
 type: "text" | "amount"

package/dist/styled-system/recipes/data-table-header-cell-slot-recipe.js

@@ -35,6 +35,7 @@ const dataTableHeaderCellSlotRecipeFn = memo((props = {}) => {
 const dataTableHeaderCellSlotRecipeVariantKeys = [
     "size",
     "fixedColumn",
+    "verticalBorder",
     "edgeFixedColumn",
     "isCheckboxCell",
     "type"
@@ -54,6 +55,9 @@ export const dataTableHeaderCellSlotRecipe = /* @__PURE__ */ Object.assign(dataT
         "fixedColumn": [
             "true"
         ],
+        "verticalBorder": [
+            "true"
+        ],
         "edgeFixedColumn": [
             "left",
             "right"

package/dist/styled-system/recipes/dropdown-menu-item-slot-recipe.d.ts

@@ -10,7 +10,7 @@ type DropdownMenuItemSlotRecipeVariantMap = {
   [key in keyof DropdownMenuItemSlotRecipeVariant]: Array<DropdownMenuItemSlotRecipeVariant[key]>
 }
 
-type DropdownMenuItemSlotRecipeSlot = "root"
+type DropdownMenuItemSlotRecipeSlot = "root" | "content" | "disabledMessage" | "disabledMessageIcon"
 
 export type DropdownMenuItemSlotRecipeVariantProps = {
   [key in keyof DropdownMenuItemSlotRecipeVariant]?: ConditionalValue<DropdownMenuItemSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/dropdown-menu-item-slot-recipe.js

@@ -6,6 +6,18 @@ const dropdownMenuItemSlotRecipeSlotNames = [
     [
         "root",
         "DropdownMenuItem__root"
+    ],
+    [
+        "content",
+        "DropdownMenuItem__content"
+    ],
+    [
+        "disabledMessage",
+        "DropdownMenuItem__disabledMessage"
+    ],
+    [
+        "disabledMessageIcon",
+        "DropdownMenuItem__disabledMessageIcon"
     ]
 ];
 const dropdownMenuItemSlotRecipeSlotFns = /* @__PURE__ */ dropdownMenuItemSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dropdownMenuItemSlotRecipeDefaultVariants, getSlotCompoundVariant(dropdownMenuItemSlotRecipeCompoundVariants, slotName))]);

package/dist/styles.css

@@ -229,9 +229,13 @@
   --mfui-colors-mfui\.color\.selected\.border\.none: #2e72d8ff;
   --mfui-colors-mfui\.color\.selected\.border\.hovered: #0d57b1ff;
   --mfui-colors-mfui\.color\.selected\.border\.pressed: #003e90ff;
-                --mfui-colors-mfui\.color\.signal-green\.content\.none: #008644ff;
+  --mfui-colors-mfui\.color\.selected\.text-on-background\.none: #165cb7ff;
+  --mfui-colors-mfui\.color\.selected\.text-on-background\.hovered: #004396ff;
+  --mfui-colors-mfui\.color\.selected\.text-on-background\.pressed: #072977ff;
+          --mfui-colors-mfui\.color\.signal-green\.content\.none: #008644ff;
                   --mfui-colors-mfui\.color\.signal-green\.sub-background\.none: #b3eac0ff;
-            --mfui-colors-mfui\.color\.signal-neutral\.sub-background\.none: #f3f3f3ff;
+      --mfui-colors-mfui\.color\.signal-green\.text-on-sub-background\.none: #006d36ff;
+      --mfui-colors-mfui\.color\.signal-neutral\.sub-background\.none: #f3f3f3ff;
       --mfui-colors-mfui\.color\.signal-red\.content\.none: #d7383cff;
   --mfui-colors-mfui\.color\.signal-red\.content\.hovered: #b40d24ff;
   --mfui-colors-mfui\.color\.signal-red\.content\.pressed: #8a0017ff;
@@ -242,9 +246,11 @@
   --mfui-colors-mfui\.color\.signal-red\.background\.hovered: #b40d24ff;
   --mfui-colors-mfui\.color\.signal-red\.background\.pressed: #8a0017ff;
   --mfui-colors-mfui\.color\.signal-red\.sub-background\.none: #ffd3ccff;
-            --mfui-colors-mfui\.color\.signal-yellow\.content\.none: #8b7200ff;
+      --mfui-colors-mfui\.color\.signal-red\.text-on-sub-background\.none: #ba1828ff;
+      --mfui-colors-mfui\.color\.signal-yellow\.content\.none: #8b7200ff;
                   --mfui-colors-mfui\.color\.signal-yellow\.sub-background\.none: #f7da90ff;
-            --mfui-shadows-mfui\.elevation\.plus-1\.shadow-1: 0px 1px 1px 1px #00000033;
+      --mfui-colors-mfui\.color\.signal-yellow\.text-on-sub-background\.none: #775a01ff;
+      --mfui-shadows-mfui\.elevation\.plus-1\.shadow-1: 0px 1px 1px 1px #00000033;
   --mfui-shadows-mfui\.elevation\.plus-1\.shadow-2: 0px 2px 2px 1px #0000001a;
   --mfui-shadows-mfui\.elevation\.plus-2\.shadow-1: 0px 4px 8px 0px #00000040;
   --mfui-shadows-mfui\.elevation\.plus-2\.shadow-2: 0px 6px 16px 0px #00000033;
@@ -818,6 +824,28 @@
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
 }
 
+.mfui-eMicFf {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.mfui-hsjcaJ {
+  gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
+  display: flex;
+  align-items: flex-start;
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+  overflow-wrap: break-word;
+}
+
+.mfui-imxNHe {
+  flex: 0 0 auto;
+  display: block;
+  width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.condensed);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.condensed);
+  margin-top: 2px;
+}
+
 .mfui-dHwbKW {
   gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
   display: inline-flex;
@@ -2331,6 +2359,8 @@
 .mfui-hveqnu {
   border: none;
   inset-inline: auto 0;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -2543,7 +2573,7 @@
 }
 
 .mfui-fhtZXM {
-  max-height: 160px;
+  max-height: 288px;
   width: fit-content;
 }
 
@@ -3067,7 +3097,7 @@
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.none);
   padding-block: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort) - 1px);
   padding-inline: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.horizontal\.comfort) - 1px);
-  color: var(--mfui-colors-mfui\.color\.selected\.sign\.none);
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.none);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.none);
 }
 
@@ -3081,7 +3111,7 @@
 
 .mfui-ljuOJV:is(:focus, [data-focus])[aria-current=page] {
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.hovered);
-  color: var(--mfui-colors-mfui\.color\.selected\.sign\.hovered);
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
 }
 
@@ -3091,7 +3121,7 @@
 
 .mfui-ljuOJV:is(:hover, [data-hover])[aria-current=page] {
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.hovered);
-  color: var(--mfui-colors-mfui\.color\.selected\.sign\.hovered);
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
 }
 
@@ -3101,7 +3131,7 @@
 
 .mfui-ljuOJV:is(:active, [data-active])[aria-current=page] {
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.pressed);
-  color: var(--mfui-colors-mfui\.color\.selected\.sign\.pressed);
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.pressed);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.pressed);
 }
 
@@ -7358,6 +7388,23 @@ li:last-child > .mfui-cXGJls {
   background-color: inherit;
 }
 
+.mfui-hGAWTy {
+  border-left-style: solid;
+  border-left-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-left-color: var(--mfui-colors-mfui\.color\.neutral\.thin-border\.none);
+  border-right-style: solid;
+  border-right-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-right-color: var(--mfui-colors-mfui\.color\.neutral\.thin-border\.none);
+}
+
+.mfui-hGAWTy:first-child {
+  border-left-width: 0;
+}
+
+.mfui-hGAWTy:last-child {
+  border-right-width: 0;
+}
+
 .mfui-izXzGC::before {
   border-right-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-right-style: solid;
@@ -7433,6 +7480,23 @@ li:last-child > .mfui-cXGJls {
   position: sticky;
 }
 
+.mfui-haQzOt {
+  border-left-style: solid;
+  border-left-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-left-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+  border-right-style: solid;
+  border-right-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-right-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+}
+
+.mfui-haQzOt:first-child {
+  border-left-width: 0;
+}
+
+.mfui-haQzOt:last-child {
+  border-right-width: 0;
+}
+
 .mfui-fGBQCd::before {
   border-right-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-right-style: solid;
@@ -7988,17 +8052,17 @@ li:last-child > .mfui-cXGJls {
 
 .mfui-cNbYAX {
   background-color: var(--mfui-colors-mfui\.color\.signal-green\.sub-background\.none);
-  color: var(--mfui-colors-mfui\.color\.signal-green\.content\.none);
+  color: var(--mfui-colors-mfui\.color\.signal-green\.text-on-sub-background\.none);
 }
 
 .mfui-bAfwQA {
   background-color: var(--mfui-colors-mfui\.color\.signal-red\.sub-background\.none);
-  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.none);
+  color: var(--mfui-colors-mfui\.color\.signal-red\.text-on-sub-background\.none);
 }
 
 .mfui-dZGLHT {
   background-color: var(--mfui-colors-mfui\.color\.signal-yellow\.sub-background\.none);
-  color: var(--mfui-colors-mfui\.color\.signal-yellow\.content\.none);
+  color: var(--mfui-colors-mfui\.color\.signal-yellow\.text-on-sub-background\.none);
 }
 
 .mfui-bqPyQm {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.30.0",
+  "version": "3.31.1",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",