@moneyforward/mfui-components 3.30.0 → 3.32.0

package/dist/src/Breadcrumbs/Breadcrumbs.d.ts

@@ -10,4 +10,5 @@ export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<{
     items: import("./Breadcrumbs.types").BreadcrumbItem[];
     wrap?: boolean;
     customLinkComponent?: import("react").ElementType;
+    truncateButtonProps?: Pick<import("react").ComponentPropsWithoutRef<'button'>, 'aria-label'>;
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/dist/src/Breadcrumbs/Breadcrumbs.js

@@ -30,7 +30,7 @@ function Separator({ className }) {
  * when it has no `href`. If the last item has an `href`, it is rendered as a link and the
  * trail has no current-page item.
  */
-export const Breadcrumbs = forwardRef(({ items, wrap = false, customLinkComponent, className, 'aria-label': ariaLabel = '現在のページ位置', ...rest }, ref) => {
+export const Breadcrumbs = forwardRef(({ items, wrap = false, customLinkComponent, className, 'aria-label': ariaLabel = '現在のページ位置', truncateButtonProps, ...rest }, ref) => {
     const classes = breadcrumbsSlotRecipe({ wrap });
     // Decompose items into logical groups:
     // - rootItem:    items[0] (always shown, link)
@@ -159,7 +159,7 @@ export const Breadcrumbs = forwardRef(({ items, wrap = false, customLinkComponen
         setCurrentTruncated(!!(currentElement && currentElement.scrollWidth > currentElement.clientWidth));
     }, [containerWidth, collapsedCount, wrap]);
     const truncatedItems = middleItems.slice(0, collapsedCount);
-    return (_jsx("nav", { ref: ref, className: cx(classes.root, className), "aria-label": ariaLabel, ...rest, children: _jsxs("ol", { ref: listRef, className: classes.list, "data-mfui-all-collapsed": allCollapsed ? true : undefined, children: [rootItem ? (_jsxs("li", { ref: rootItemLiRef, className: classes.item, style: allCollapsed && rootMinWidth !== undefined ? { minWidth: rootMinWidth } : undefined, children: [_jsx(Tooltip, { hideFromScreenReader: true, content: rootItem.label, disabled: !rootTruncated, placement: "bottom", style: TOOLTIP_TRIGGER_STYLE, children: _jsx(TextLink, { ref: rootLinkRef, href: rootItem.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: rootItem.label }) }), _jsx(Separator, { className: classes.separator })] })) : null, collapsedCount > 0 ? (_jsxs("li", { className: classes.truncateItem, children: [_jsx(DropdownMenu, { label: "\u7701\u7565\u3055\u308C\u305F\u30A2\u30A4\u30C6\u30E0\u3092\u8868\u793A", icon: _jsx(MoreHorizontal, {}), triggerProps: {
+    return (_jsx("nav", { ref: ref, className: cx(classes.root, className), "aria-label": ariaLabel, ...rest, children: _jsxs("ol", { ref: listRef, className: classes.list, "data-mfui-all-collapsed": allCollapsed ? true : undefined, children: [rootItem ? (_jsxs("li", { ref: rootItemLiRef, className: classes.item, style: allCollapsed && rootMinWidth !== undefined ? { minWidth: rootMinWidth } : undefined, children: [_jsx(Tooltip, { hideFromScreenReader: true, content: rootItem.label, disabled: !rootTruncated, placement: "bottom", style: TOOLTIP_TRIGGER_STYLE, children: _jsx(TextLink, { ref: rootLinkRef, href: rootItem.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: rootItem.label }) }), _jsx(Separator, { className: classes.separator })] })) : null, collapsedCount > 0 ? (_jsxs("li", { className: classes.truncateItem, children: [_jsx(DropdownMenu, { label: truncateButtonProps?.['aria-label'] ?? '省略されたアイテムを表示', icon: _jsx(MoreHorizontal, {}), triggerProps: {
                                 className: classes.truncateButton,
                             }, children: truncatedItems.map((item, i) => item.href !== undefined ? (_jsx(DropdownMenu.Item, { href: item.href, customLinkComponent: customLinkComponent, children: item.label }, i)) : (_jsx(DropdownMenu.Item, { children: item.label }, i))) }), _jsx(Separator, { className: classes.separator })] })) : null, middleItems.map((item, i) => (_jsxs("li", { className: classes.item, style: i < collapsedCount ? { display: 'none' } : undefined, children: [_jsx(TextLink, { href: item.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: item.label }), _jsx(Separator, { className: classes.separator })] }, i))), parentItem ? (_jsxs("li", { ref: parentItemLiRef, className: classes.item, style: allCollapsed && parentMinWidth !== undefined ? { minWidth: parentMinWidth } : undefined, children: [_jsx(Tooltip, { hideFromScreenReader: true, content: parentItem.label, disabled: !parentTruncated, placement: "bottom", style: TOOLTIP_TRIGGER_STYLE, children: _jsx(TextLink, { ref: parentLinkRef, href: parentItem.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: parentItem.label }) }), _jsx(Separator, { className: classes.separator })] })) : null, currentItem ? (_jsx("li", { ref: currentItemLiRef, className: classes.item, "aria-current": lastItemIsCurrentPage ? 'page' : undefined, style: allCollapsed && currentMinWidth !== undefined ? { minWidth: currentMinWidth } : undefined, children: _jsx(Tooltip, { hideFromScreenReader: true, content: currentItem.label, disabled: !currentTruncated, placement: "bottom", style: TOOLTIP_TRIGGER_STYLE, children: lastItemIsCurrentPage ? (_jsx("span", { ref: currentItemRef, className: classes.currentItem, children: currentItem.label })) : (_jsx(TextLink, { ref: currentLinkRef, href: currentItem.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: currentItem.label })) }) })) : null] }) }));
 });

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

@@ -32,4 +32,11 @@ export type BreadcrumbsProps = {
      * Also applied to truncated items in the DropdownMenu.
      */
     customLinkComponent?: ElementType;
+    /**
+     * The properties for the "…" button that opens the menu of truncated items.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the button. Override this to localize the label. default is '省略されたアイテムを表示'.
+     */
+    truncateButtonProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
 } & ComponentPropsWithoutRef<'nav'>;

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.