@moneyforward/mfui-components 4.5.0 → 4.6.0

package/dist/src/Badge/Badge.d.ts

@@ -5,7 +5,7 @@ import { type BadgeProps } from './Badge.types';
  *  - If `dot` is `true`, the badge will be displayed as a dot.
  *  - If `count` is not `undefined`, the badge will be displayed as a number calculated by `digit` prop.
  *  - If `children` is not `undefined`, the badge will be displayed in the top-right corner of the children.
- *   - In addition, the `aria-describedby` attribute will be added to the children to link the aria-label of the badge.
+ *   - In addition, the `aria-describedby` attribute will be added to the children to link the visually hidden label of the badge.
  *
  * Also extends the props of `<span>` element.
  *

package/dist/src/Badge/Badge.js

@@ -9,13 +9,13 @@ import { Typography } from '../Typography';
  *  - If `dot` is `true`, the badge will be displayed as a dot.
  *  - If `count` is not `undefined`, the badge will be displayed as a number calculated by `digit` prop.
  *  - If `children` is not `undefined`, the badge will be displayed in the top-right corner of the children.
- *   - In addition, the `aria-describedby` attribute will be added to the children to link the aria-label of the badge.
+ *   - In addition, the `aria-describedby` attribute will be added to the children to link the visually hidden label of the badge.
  *
  * Also extends the props of `<span>` element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
  */
-export const Badge = forwardRef(({ dot, count: number, digit, className, children, ...props }, ref) => {
+export const Badge = forwardRef(({ dot, count: number, digit, className, children, 'aria-label': ariaLabel, ...props }, ref) => {
     const classes = badgeSlotRecipe({ hasChildren: children !== undefined });
     const displayContent = (() => {
         if (number === undefined)
@@ -25,10 +25,10 @@ export const Badge = forwardRef(({ dot, count: number, digit, className, childre
         const maxValue = 10 ** digit - 1;
         return number > maxValue ? `${String(maxValue)}+` : String(number);
     })();
-    const badgeId = useId();
+    const labelId = useId();
     const displayBadge = dot !== undefined || number !== undefined;
     // If the badge is not displayed, just return the children.
     if (!displayBadge)
         return children;
-    return (_jsxs("span", { ref: ref, className: cx(classes.root, 'mfui-Badge__root', className), id: badgeId, ...props, children: [children ? cloneElement(children, { 'aria-describedby': badgeId }) : null, _jsx("span", { className: cx(classes.indicator, 'mfui-Badge__indicator'), children: number !== undefined ? _jsx(Typography, { variant: "condensedBody", children: displayContent }) : null })] }));
+    return (_jsxs("span", { ref: ref, className: cx(classes.root, 'mfui-Badge__root', className), ...props, children: [children ? cloneElement(children, { 'aria-describedby': labelId }) : null, _jsx("span", { className: cx(classes.indicator, 'mfui-Badge__indicator'), children: number !== undefined ? (_jsx(Typography, { "aria-hidden": true, variant: "condensedBody", children: displayContent })) : null }), _jsx("span", { id: labelId, className: cx(classes.srOnlyLabel, 'mfui-Badge__srOnlyLabel'), children: ariaLabel })] }));
 });

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

@@ -50,7 +50,9 @@ export type BadgeProps = {
      * The invisible label to specify how you want the badge to be recognized and read by screen readers.
      * This prop is required.
      *
-     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
+     * The value is not set as an `aria-label` attribute, because it is prohibited on role-less elements.
+     * Instead, it is rendered as visually hidden text inside the badge.
+     * When `children` is specified, that text is also referenced by the `aria-describedby` attribute of the children.
      *
      * @example
      * ```jsx

package/dist/src/Checkbox/Checkbox.js

@@ -21,6 +21,13 @@ export const Checkbox = forwardRef(({ className, label, indeterminate = false, n
     const checkboxGroupContext = useContext(CheckboxGroupContext);
     const [localChecked, setLocalChecked] = useState(!!defaultChecked);
     const [localIndeterminate, setLocalIndeterminate] = useState(indeterminate);
+    // Adjusted during render (React's documented pattern for resyncing state to a changed
+    // prop) rather than in an effect, so the UI never flashes the stale value for one frame.
+    const [prevIndeterminateProp, setPrevIndeterminateProp] = useState(indeterminate);
+    if (indeterminate !== prevIndeterminateProp) {
+        setPrevIndeterminateProp(indeterminate);
+        setLocalIndeterminate(indeterminate);
+    }
     const classes = checkboxSlotRecipe();
     const WrapperTag = label ? 'label' : 'span';
     const wrapperProps = {
@@ -36,9 +43,6 @@ export const Checkbox = forwardRef(({ className, label, indeterminate = false, n
             checkboxInputRef.current.indeterminate = checkboxGroupContext.values === undefined ? localIndeterminate : false;
         }
     }, [checkboxInputRef, localIndeterminate, checkboxGroupContext.values]);
-    useEffect(() => {
-        setLocalIndeterminate(indeterminate);
-    }, [indeterminate]);
     const icon = (() => {
         if (isIndeterminate) {
             return _jsx(CheckboxIndeterminate, {});

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

@@ -49,8 +49,8 @@ export type DataTableProps = {
      * - Clicking the row, including its checkbox cell, calls the `checkboxProps.onChange` of the `DataTable.Row` component once.
      *   The checkbox stops responding to clicks on its own, so a single click never toggles the selection twice.
      *   The checkbox cell does not have independent hover, focus, or active styles; the checkbox icon follows the row state.
-     * - The row is focusable, and pressing Enter or Space while the row itself is focused toggles the selection.
-     *   The checkbox is removed from the tab order, so keyboard selection is handled through the row.
+     * - The checkbox stays in the tab order and is the keyboard control: pressing Enter or Space while it is focused toggles the selection.
+     *   While the checkbox is focused, the focus indicator is displayed on the whole row.
      * - The row selection is not toggled when the click originates from another interactive element inside the row,
      *   such as a button or a link, or when the row or its checkbox is disabled.
      *

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

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import { DisclosureBasicCollapsed, DisclosureBasicExpanded, DisclosureNestedCollapsed, DisclosureNestedExpanded, } from '@moneyforward/mfui-icons-react';
 import { dataTableCellSlotRecipe } from '../../../styled-system/recipes';
 import { FocusIndicator } from '../../FocusIndicator';
@@ -10,6 +10,8 @@ import { cx } from '../../../styled-system/css';
 import { useFixedColumns } from '../../utilities/dom/useFixedColumns';
 import { handleCheckboxCellClick } from '../utils/handleCheckbox';
 import { mergeRefs } from '../../utilities/dom/mergeRefs';
+import { useIsomorphicLayoutEffect } from '../../utilities/react/useIsomorphicLayoutEffect';
+import { useDataTableRowActionContext } from '../DataTableRowActionContext';
 export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text', className, isRowHighlighted, isRowHeader = false, disabled = false, depth = 0, columnIndex, disclosureIconProps: nestingIconProps, style, ...props }, ref) => {
     const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection, enableRowClickSelection, showVerticalBorder, layout, } = useDataTableContext();
     const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = useFixedColumns({
@@ -20,6 +22,21 @@ export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text',
     });
     const isCheckboxCell = enableRowSelection && columnIndex === 0;
     const isCheckboxCellInteractive = isCheckboxCell && !enableRowClickSelection;
+    // Take part in hosting the row action button of a clickable row. The row picks the host among
+    // the registered cells, so the button reaches a cell however the consumer composes the row.
+    const rowAction = useDataTableRowActionContext();
+    const registerRowActionCell = rowAction?.registerCell;
+    const [isRowActionHost, setIsRowActionHost] = useState(false);
+    useIsomorphicLayoutEffect(() => {
+        const element = cellRef.current;
+        if (!registerRowActionCell || !element) {
+            return;
+        }
+        return registerRowActionCell({ element, isRowHeader, setIsHost: setIsRowActionHost });
+        // `columnIndex` changes when the consumer reorders keyed cells, and the re-registration lets
+        // the row pick the host again by the new cell positions.
+    }, [registerRowActionCell, isRowHeader, cellRef, columnIndex]);
+    const rowActionButtonProps = isRowActionHost ? rowAction?.buttonProps : undefined;
     const classes = dataTableCellSlotRecipe({
         size,
         type,
@@ -27,7 +44,7 @@ export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text',
         fixedColumn: isFixedColumn,
         edgeFixedColumn: isEdgeFixedColumn,
         isCheckboxCell,
-        isCheckboxCellInteractive: isCheckboxCellInteractive || undefined,
+        isCheckboxCellInteractive: isCheckboxCellInteractive ? true : undefined,
         verticalBorder: showVerticalBorder,
         layout,
         // Passing `false` would emit a class for the unused `false` variant value, changing the
@@ -59,8 +76,8 @@ export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text',
     // A row header identifies its row, so it must be a `th` for assistive technology.
     // `scope` is only interpreted on `th`, which is why it cannot be passed to a plain cell.
     const Tag = isRowHeader ? 'th' : 'td';
-    return (_jsx(Tag, { ref: mergeRefs(ref, cellRef), scope: isRowHeader ? 'row' : undefined, className: cx(classes.root, 'mfui-DataTableCell__root', 
-        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__root', className), style: { ...style, ...fixedPositionStyles, zIndex: isFixedColumn ? 1 : undefined }, ...props, children: cellContent }));
+    return (_jsxs(Tag, { ref: mergeRefs(ref, cellRef), scope: isRowHeader ? 'row' : undefined, className: cx(classes.root, 'mfui-DataTableCell__root', 
+        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__root', className), style: { ...style, ...fixedPositionStyles, zIndex: isFixedColumn ? 1 : undefined }, ...props, children: [rowActionButtonProps ? (_jsx("button", { type: "button", className: cx(classes.rowActionButton, 'mfui-DataTableCell__rowActionButton'), "data-mfui-content": "data-table-row-action-button", ...rowActionButtonProps })) : null, cellContent] }));
 });
 DataTableCell.displayName = 'DataTableCell';
 function CellContent({ children, depth, disclosureIconProps, classes, }) {

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

@@ -109,7 +109,7 @@ export type DataTableCellProps = {
      *
      * `aria-expanded` is set automatically based on `isOpen`:
      * on the cell button when the cell is interactive (`onClickCell`),
-     * or on the row when the row is interactive (`onClickRow`).
+     * or on the visually hidden row action button when the row is interactive (`onClickRow`).
      *
      * Note: the attribute on the cell button is fully derived from `isOpen`
      * and cannot be overridden, while an `aria-expanded` passed to

package/dist/src/DataTable/DataTableHeaderRow/DataTableHeaderRow.js

@@ -1,23 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement, useEffect } from 'react';
+import { cloneElement, forwardRef, isValidElement, useEffect } from 'react';
 import { dataTableHeaderRowSlotRecipe } from '../../../styled-system/recipes';
 import { useDataTableContext } from '../DataTableProvider';
 import { DataTableHeaderCell } from '../DataTableHeaderCell';
 import { Checkbox } from '../../Checkbox';
 import { cx } from '../../../styled-system/css';
 import { isComponentOrWrapped } from '../../utilities/react/isComponentOrWrapped';
+import { flattenChildren } from '../../utilities/react/flattenChildren';
 export const DataTableHeaderRow = forwardRef(({ children, checkboxProps, className, ...props }, ref) => {
     const { enableRowSelection, setNumberColumns } = useDataTableContext();
     const classes = dataTableHeaderRowSlotRecipe();
     // Building the element before wrapping keeps everything the header row owns on the Checkbox itself.
     const selectionCheckbox = (_jsx(Checkbox, { checked: checkboxProps?.checked, indeterminate: checkboxProps?.indeterminate, "aria-label": checkboxProps?.['aria-label'] ?? 'すべての行を選択', disabled: checkboxProps?.disabled, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick }));
-    // Count the number of header cells
+    // Count the number of header cells, plus the selection checkbox column rendered
+    // below when `enableRowSelection` is on (it isn't part of `children`).
     useEffect(() => {
-        const headerCells = Children.toArray(children).filter((child) => isValidElement(child) && isComponentOrWrapped(child, DataTableHeaderCell));
-        setNumberColumns(headerCells.length);
+        const headerCells = flattenChildren(children).filter((child) => isValidElement(child) && isComponentOrWrapped(child, DataTableHeaderCell));
+        setNumberColumns(headerCells.length + (enableRowSelection ? 1 : 0));
     }, [children, enableRowSelection, setNumberColumns]);
     return (_jsxs("tr", { className: cx(classes.root, 'mfui-DataTableHeaderRow__root', 
-        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderRow__root', className), ...props, ref: ref, children: [enableRowSelection ? (_jsx(DataTableHeaderCell, { columnIndex: 0, disabled: checkboxProps?.disabled, children: checkboxProps?.wrapper ? checkboxProps.wrapper(selectionCheckbox) : selectionCheckbox })) : null, Children.map(children, (child, index) => {
+        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderRow__root', className), ...props, ref: ref, children: [enableRowSelection ? (_jsx(DataTableHeaderCell, { columnIndex: 0, disabled: checkboxProps?.disabled, children: checkboxProps?.wrapper ? checkboxProps.wrapper(selectionCheckbox) : selectionCheckbox })) : null, flattenChildren(children).map((child, index) => {
                 if (!isValidElement(child)) {
                     return child;
                 }

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

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement, useRef } from 'react';
+import { cloneElement, forwardRef, isValidElement, useCallback, useMemo, useRef, useState } from 'react';
+import { DataTableRowActionContext, } from '../DataTableRowActionContext';
 import { dataTableRowSlotRecipe } from '../../../styled-system/recipes';
 import { DataTableCell } from '../DataTableCell';
 import { Checkbox } from '../../Checkbox';
 import { useDataTableContext } from '../DataTableProvider';
 import { cx } from '../../../styled-system/css';
 import { isComponentOrWrapped } from '../../utilities/react/isComponentOrWrapped';
+import { flattenChildren } from '../../utilities/react/flattenChildren';
+import { useIsomorphicLayoutEffect } from '../../utilities/react/useIsomorphicLayoutEffect';
+const ROW_ACTION_BUTTON_SELECTOR = '[data-mfui-content="data-table-row-action-button"]';
 const INTERACTIVE_ELEMENT_SELECTOR = [
     'a[href]',
     'button',
@@ -33,17 +37,32 @@ function isClickFromNestedInteractiveElement(event) {
     if (!(event.target instanceof Element)) {
         return false;
     }
+    // A click inside a nested table (e.g. a DataTable rendered in a cell) belongs to the inner row.
+    if (event.target.closest('tr') !== event.currentTarget) {
+        return true;
+    }
     const interactiveElement = event.target.closest(INTERACTIVE_ELEMENT_SELECTOR);
-    return interactiveElement !== null && interactiveElement !== event.currentTarget;
+    if (interactiveElement === null || interactiveElement === event.currentTarget) {
+        return false;
+    }
+    // The visually hidden row action button exists to trigger the row click itself,
+    // so its click must not be treated as a nested interactive element's click.
+    return !interactiveElement.matches(ROW_ACTION_BUTTON_SELECTOR);
 }
-export const DataTableRow = forwardRef(({ children, disabled = false, highlighted, checkboxProps, className, onClickRow, selectable, ...props }, ref) => {
+export const DataTableRow = forwardRef(({ children, disabled = false, highlighted, checkboxProps, className, onClickRow, rowActionButtonProps, selectable, 'aria-expanded': ariaExpandedProp, ...props }, ref) => {
     const { enableRowSelection: contextEnableRowSelection, enableRowClickSelection, layout } = useDataTableContext();
     const selectionCheckboxRef = useRef(null);
     const isSelectable = selectable ?? contextEnableRowSelection;
-    const isRowHighlighted = isSelectable ? (checkboxProps?.checked ?? highlighted) : highlighted;
+    // A selected row is always highlighted, and `highlighted` stays an independent signal on top of it,
+    // so that a row can be marked (e.g. as the one opened in a detail panel) while it is not selected.
+    const isRowHighlighted = isSelectable ? highlighted === true || checkboxProps?.checked === true : highlighted;
     // Only a row whose selection can actually be toggled becomes the trigger of the row selection.
     const isRowClickSelectable = !!enableRowClickSelection && isSelectable && !disabled && !checkboxProps?.disabled;
     const isInteractive = (onClickRow !== undefined || isRowClickSelectable) && !disabled;
+    // The row click itself is exposed to keyboard and screen reader users through the row action
+    // button. The row click selection is exposed through the selection checkbox instead.
+    // A disabled row keeps the button as a disabled one so that the row action stays discoverable.
+    const hasRowActionButton = onClickRow !== undefined;
     const classes = dataTableRowSlotRecipe({
         layout,
         highlighted: isRowHighlighted,
@@ -51,20 +70,85 @@ export const DataTableRow = forwardRef(({ children, disabled = false, highlighte
         rowClickSelectable: isRowClickSelectable,
         disabled,
     });
+    // Fragments are expanded so that cells wrapped in a Fragment (e.g. `<>{items.map(...)}</>`)
+    // are recognized by the cell inspection below.
+    const flatChildren = useMemo(() => flattenChildren(children), [children]);
+    const isCellElement = (child) => isValidElement(child) && isComponentOrWrapped(child, DataTableCell);
     // When the interactive row itself toggles a disclosure (a child cell shows the disclosure icon
-    // but does not handle the click by itself), expose the expanded state on the row.
-    const disclosureIconProps = Children.toArray(children)
-        .filter((child) => isValidElement(child) && isComponentOrWrapped(child, DataTableCell))
+    // but does not handle the click by itself), expose the expanded state on the row action button.
+    const disclosureIconProps = flatChildren
+        .filter(isCellElement)
         .find((cell) => cell.props.disclosureIconProps && !cell.props.onClickCell)?.props.disclosureIconProps;
-    const ariaExpanded = onClickRow !== undefined && !disabled && disclosureIconProps ? (disclosureIconProps.isOpen ?? false) : undefined;
+    const derivedAriaExpanded = hasRowActionButton && disclosureIconProps ? (disclosureIconProps.isOpen ?? false) : undefined;
+    const rowActionAriaExpanded = ariaExpandedProp ?? derivedAriaExpanded;
+    // The default name is given by `aria-label`, so a consumer `aria-label` replaces it and a consumer
+    // `aria-labelledby` takes precedence over it by the accessible name computation.
+    // A row that toggles a disclosure says so, since its expanded state is exposed on the button.
+    const defaultRowActionLabel = disclosureIconProps ? '行を開閉' : '行の操作';
+    const resolvedRowActionButtonProps = useMemo(() => hasRowActionButton
+        ? {
+            ...rowActionButtonProps,
+            // An explicitly undefined consumer label must not leave the button without a name.
+            'aria-label': rowActionButtonProps?.['aria-label'] ?? defaultRowActionLabel,
+            ...(rowActionAriaExpanded !== undefined && { 'aria-expanded': rowActionAriaExpanded }),
+            ...(disabled && { disabled }),
+        }
+        : undefined, [hasRowActionButton, rowActionButtonProps, defaultRowActionLabel, rowActionAriaExpanded, disabled]);
+    // The cells register themselves through the context, so the button reaches a cell wherever the
+    // consumer renders it (intermediate components, wrappers, Fragments). The version state makes the
+    // host selection below run again whenever a cell mounts or unmounts.
+    const rowActionCellEntries = useRef(new Set());
+    const [rowActionCellsVersion, setRowActionCellsVersion] = useState(0);
+    const registerRowActionCell = useCallback((entry) => {
+        rowActionCellEntries.current.add(entry);
+        setRowActionCellsVersion((version) => version + 1);
+        return () => {
+            rowActionCellEntries.current.delete(entry);
+            setRowActionCellsVersion((version) => version + 1);
+        };
+    }, []);
+    // The first cell in the row hosts the button, skipping a row header cell so that the button label
+    // does not become part of the row header name. The selection cell, rendered by the row itself,
+    // therefore hosts it whenever the row is selectable.
+    const hasWarnedMissingRowActionHost = useRef(false);
+    useIsomorphicLayoutEffect(() => {
+        // The registration order follows the mount order, which differs from the visual order when a
+        // cell mounts later, so sort by the position of the cell element in the row.
+        const entries = [...rowActionCellEntries.current].toSorted((a, b) => a.element.cellIndex - b.element.cellIndex);
+        const host = hasRowActionButton ? (entries.find((entry) => !entry.isRowHeader) ?? entries[0]) : undefined;
+        entries.forEach((entry) => {
+            entry.setIsHost(entry === host);
+        });
+        if (hasRowActionButton && host === undefined && !hasWarnedMissingRowActionHost.current) {
+            hasWarnedMissingRowActionHost.current = true;
+            console.warn('[MFUI] DataTable.Row received onClickRow, but the row action button was not rendered because ' +
+                'the row contains no DataTable.Cell, so the row cannot be operated with a keyboard or screen reader. ' +
+                'Render the cells of the row with DataTable.Cell.');
+        }
+    }, [hasRowActionButton, rowActionCellsVersion]);
+    // The cells of a row without the button do not register, so such a row does not pay for the host selection.
+    const rowActionContextValue = useMemo(() => ({
+        buttonProps: resolvedRowActionButtonProps,
+        registerCell: hasRowActionButton ? registerRowActionCell : undefined,
+    }), [hasRowActionButton, resolvedRowActionButtonProps, registerRowActionCell]);
     // Forwarding the interaction to the checkbox lets the consumer keep handling the row selection in
     // `checkboxProps.onChange` only, and the change event carries the real next checked state.
     const toggleSelectionByRowInteraction = () => {
         selectionCheckboxRef.current?.click();
     };
+    // The focus indicator is displayed on the whole row while the selection checkbox is focused, so the
+    // selection also toggles with Enter, which a native checkbox ignores, in addition to Space.
+    const handleKeyDownSelectionCheckbox = (event) => {
+        if (isRowClickSelectable && event.key === 'Enter') {
+            // Prevents the implicit form submission.
+            event.preventDefault();
+            toggleSelectionByRowInteraction();
+        }
+    };
     // Building the element before wrapping keeps everything the row owns on the Checkbox itself, so that the
     // ref-based toggle and the recipe selectors keep working with a consumer-supplied wrapper in between.
-    const selectionCheckbox = (_jsx(Checkbox, { ref: selectionCheckboxRef, className: cx(classes.selectionCheckbox, 'mfui-DataTableRow__selectionCheckbox'), checked: checkboxProps?.checked, "aria-label": checkboxProps?.['aria-label'] ?? '行を選択', disabled: disabled || checkboxProps?.disabled, tabIndex: isRowClickSelectable ? -1 : undefined, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick }));
+    const selectionCheckbox = (_jsx(Checkbox, { ref: selectionCheckboxRef, className: cx(classes.selectionCheckbox, 'mfui-DataTableRow__selectionCheckbox'), checked: checkboxProps?.checked, "aria-label": checkboxProps?.['aria-label'] ?? '行を選択', disabled: disabled || checkboxProps?.disabled, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick, onKeyDown: handleKeyDownSelectionCheckbox }));
+    // Handles pointer clicks anywhere in the row and the bubbled click of the row action button.
     const handleClickRow = (event) => {
         if (disabled || isClickFromNestedInteractiveElement(event)) {
             return;
@@ -74,29 +158,17 @@ export const DataTableRow = forwardRef(({ children, disabled = false, highlighte
         }
         onClickRow?.(event);
     };
-    const handleKeyDownRow = (event) => {
-        if (!disabled && event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) {
-            if (isRowClickSelectable) {
-                // Not to scroll the page when the Space key is pressed on the focused row.
-                event.preventDefault();
-                toggleSelectionByRowInteraction();
-            }
-            onClickRow?.(event);
-        }
-    };
-    return (_jsxs("tr", { ref: ref, className: cx(classes.root, 'mfui-DataTableRow__root', 
-        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridRow__root', className), ...(ariaExpanded !== undefined && { 'aria-expanded': ariaExpanded }), ...props, 
-        // When the row is clickable, the role should be 'button' in order to allow screen readers to understand the row is clickable.
-        role: isInteractive ? 'button' : 'row', tabIndex: isInteractive ? 0 : undefined, ...(disabled && { 'aria-disabled': disabled }), onClick: handleClickRow, onKeyDown: handleKeyDownRow, children: [isSelectable ? (_jsx(DataTableCell, { columnIndex: 0, isRowHighlighted: isRowHighlighted, disabled: disabled, children: checkboxProps?.wrapper ? checkboxProps.wrapper(selectionCheckbox) : selectionCheckbox })) : null, Children.map(children, (child, index) => {
-                if (!isValidElement(child)) {
+    return (_jsx(DataTableRowActionContext.Provider, { value: rowActionContextValue, children: _jsxs("tr", { ref: ref, className: cx(classes.root, 'mfui-DataTableRow__root', 
+            /* TODO: Remove in v5.0.0 */ 'mfui-DataGridRow__root', className), ...(!hasRowActionButton && ariaExpandedProp !== undefined && { 'aria-expanded': ariaExpandedProp }), ...props, ...(disabled && { 'aria-disabled': disabled }), onClick: handleClickRow, children: [isSelectable ? (_jsx(DataTableCell, { columnIndex: 0, isRowHighlighted: isRowHighlighted, disabled: disabled, children: checkboxProps?.wrapper ? checkboxProps.wrapper(selectionCheckbox) : selectionCheckbox })) : null, flatChildren.map((child, index) => {
+                    if (!isValidElement(child)) {
+                        return child;
+                    }
+                    if (isComponentOrWrapped(child, DataTableCell)) {
+                        // Add selectable offset to columnIndex if selectable is true
+                        const columnIndex = isSelectable ? index + 1 : index;
+                        return cloneElement(child, { isRowHighlighted, columnIndex, disabled });
+                    }
                     return child;
-                }
-                if (isComponentOrWrapped(child, DataTableCell)) {
-                    // Add selectable offset to columnIndex if selectable is true
-                    const columnIndex = isSelectable ? index + 1 : index;
-                    return cloneElement(child, { isRowHighlighted, columnIndex, disabled });
-                }
-                return child;
-            })] }));
+                })] }) }));
 });
 DataTableRow.displayName = 'DataTableRow';

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

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef } from 'react';
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef } from 'react';
 import { type CheckboxProps } from '../../Checkbox';
 import { type DataTableSelectionCheckboxWrapper } from '../DataTable.types';
 /**
@@ -11,7 +11,7 @@ import { type DataTableSelectionCheckboxWrapper } from '../DataTable.types';
 export type DataTableRowProps = {
     /**
      * Whether the row is disabled.
-     * When true, interaction when the row is clicked and the checkbox for selectable feature will be disabled.
+     * When true, interaction when the row is clicked, the row action button and the checkbox for selectable feature will be disabled.
      * The row content remains visible with appropriate styling for readability.
      * Interactive elements passed as a children for DataTable.Cell won't be disabled automatically.
      *
@@ -19,8 +19,13 @@ export type DataTableRowProps = {
      */
     disabled?: boolean;
     /**
-     * The state of the row whether it is highlighted without a selected.
-     * This prop displays a highlighted background color regardless of the `enableRowSelection` prop of the DataTable component.
+     * Whether the row displays the highlighted background color.
+     * This prop works regardless of the `enableRowSelection` prop of the `DataTable` component: on a selectable table
+     * the row is highlighted when this prop is `true` OR when `checkboxProps.checked` is `true`, so a row can be
+     * highlighted while it is not selected.
+     *
+     * Note that the highlighted background is the same color as the selected one, so on a selectable table the
+     * selection checkbox, not the background, is what tells a selected row from a merely highlighted one.
      *
      * @default false
      */
@@ -47,10 +52,6 @@ export type DataTableRowProps = {
      * When the content restates the accessible name of the checkbox, pass `hideFromScreenReader` to the `Tooltip`
      * component to avoid announcing the same information twice.
      *
-     * Note that when the `enableRowClickSelection` prop of the `DataTable` component is `true`, the checkbox is removed
-     * from the tab order and the focusable element is the row, which is outside the wrapper. A tooltip in the wrapper is
-     * then opened by hover only, so do not put information that keyboard users need in it in that case.
-     *
      * ```tsx
      * <DataTable.Row
      *   checkboxProps={{
@@ -64,25 +65,53 @@ export type DataTableRowProps = {
     };
     /**
      * The callback function that is called when the row is clicked.
-     * If provided, the row can be focused and the focus indicator is displayed.
      *
-     * This prop will be passed to the `onClick` and `onKeyDown` of the `tr` element.
-     * When the element is clicked, the event is passed to the `onClickRow` prop, but event isn't passed when the Enter or Space key is pressed.
+     * If provided, a visually hidden button is rendered inside the row so that keyboard and
+     * screen reader users can perform the row action without making the `tr` element itself
+     * interactive. The `tr` element keeps the `row` role and is not focusable, so the controls
+     * inside the cells stay reachable. Activating the button (Enter or Space) triggers this
+     * callback via the bubbled click event, and the focus indicator is displayed on the row
+     * while the button is focused. The accessible name of the button can be customized with
+     * the `rowActionButtonProps` prop.
+     *
+     * The button is hosted by the first `DataTableCell` of the row that is not a row header (the
+     * selection checkbox cell when the row is selectable), wherever the cell is rendered in the
+     * React tree: intermediate components, wrapper components and Fragments are all fine. If the
+     * row renders no `DataTableCell` at all, the button is not rendered, the row becomes unusable
+     * with a keyboard or screen reader, and a warning is logged.
      *
      * Note that this callback is NOT called when the click originates from an interactive
      * descendant inside the row — e.g. a button, link, input (including `Checkbox`), select,
      * label, or an element with an interactive ARIA role such as `checkbox` or `menuitem`.
      * Handle those interactions on the descendant itself (e.g. the `Checkbox`'s `onChange`).
-     * Likewise, Enter or Space triggers this callback only while the row itself is focused,
-     * not while a focusable descendant is focused.
      *
      * When the `enableRowClickSelection` prop of the `DataTable` component is `true`, the selection checkbox stops
-     * responding to clicks on its own, so this callback is called for the clicks on the checkbox cell as well.
+     * responding to pointer clicks on its own, so this callback is called for the clicks on the checkbox cell as well.
      * Do not toggle the row selection here in that case, otherwise the selection is toggled twice.
+     * Toggling the checkbox with the keyboard does not call this callback.
      *
      * @default undefined
      */
-    onClickRow?: (event: React.MouseEvent<HTMLTableRowElement> | React.KeyboardEvent<HTMLTableRowElement>) => void;
+    onClickRow?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
+    /**
+     * The properties for the visually hidden button that makes the clickable row accessible
+     * to keyboard and screen reader users.
+     * This prop is available when the `onClickRow` prop is provided.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the button. default is '行の操作', or '行を開閉' when the
+     * row toggles a disclosure (a cell has `disclosureIconProps` without `onClickCell`).
+     *
+     * @property aria-labelledby - The id of the element that names the button, e.g. the row header cell.
+     * It takes precedence over `aria-label`.
+     *
+     * @property aria-describedby - The id of the element that describes the button.
+     *
+     * @property aria-controls - The id of the element that the row action expands or collapses.
+     *
+     * @property id - The id of the button, e.g. to move the focus back to the row action after closing a dialog.
+     */
+    rowActionButtonProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-controls' | 'id'>;
     /**
      * Whether the table rows are selectable.
      * If `true`, the checkbox cell will be added to the first column of header and each row.

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

@@ -0,0 +1,34 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * The attributes of the visually hidden row action button, resolved by `DataTableRow`.
+ */
+export type RowActionButtonProps = Pick<ComponentPropsWithoutRef<'button'>, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-controls' | 'aria-expanded' | 'id' | 'disabled'>;
+/**
+ * A cell that registered itself as a candidate host of the row action button.
+ */
+export type RowActionCellEntry = {
+    /** The rendered cell element, used to order the candidates by their position in the row. */
+    element: HTMLTableCellElement;
+    /** Row header cells host the button only when the row has no other cell. */
+    isRowHeader: boolean;
+    /** Called by the row when the cell becomes, or stops being, the host. */
+    setIsHost: (isHost: boolean) => void;
+};
+export type DataTableRowActionContextValue = {
+    /** The attributes of the row action button, or `undefined` when the row has no row action. */
+    buttonProps: RowActionButtonProps | undefined;
+    /**
+     * Registers a cell as a candidate host of the row action button, or `undefined` when the row has
+     * no row action so that the cells skip the registration.
+     *
+     * @returns The function that unregisters the cell.
+     */
+    registerCell: ((entry: RowActionCellEntry) => () => void) | undefined;
+};
+/**
+ * Lets any `DataTableCell` rendered inside a `DataTableRow` take part in hosting the row action
+ * button, regardless of how the consumer composes the cells (intermediate components, wrappers,
+ * Fragments). The row decides which registered cell hosts the button.
+ */
+export declare const DataTableRowActionContext: import("react").Context<DataTableRowActionContextValue | null>;
+export declare const useDataTableRowActionContext: () => DataTableRowActionContextValue | null;

package/dist/src/DataTable/DataTableRowActionContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+/**
+ * Lets any `DataTableCell` rendered inside a `DataTableRow` take part in hosting the row action
+ * button, regardless of how the consumer composes the cells (intermediate components, wrappers,
+ * Fragments). The row decides which registered cell hosts the button.
+ */
+export const DataTableRowActionContext = createContext(null);
+export const useDataTableRowActionContext = () => useContext(DataTableRowActionContext);

package/dist/src/DateTimeSelection/DatePicker/DatePickerCalendar/DatePickerCalendar.js

@@ -22,9 +22,13 @@ export function DatePickerCalendar({ value, onChange, minDate, maxDate, checkDis
     const { viewingValue, setViewingValue, pendingFocusDate, setPendingFocusDate } = useBasePickerContext();
     const [internalValue, setInternalValue] = useState(value);
     const calendarLocale = useCalendarLocale();
-    useEffect(() => {
+    // Adjusted during render (React's documented pattern for resyncing state to a changed
+    // prop) rather than in an effect, so the UI never flashes the stale value for one frame.
+    const [prevValueProp, setPrevValueProp] = useState(value);
+    if (value !== prevValueProp) {
+        setPrevValueProp(value);
         setInternalValue(value);
-    }, [value]);
+    }
     const setValue = useCallback((date, event) => {
         setInternalValue(date);
         onChange?.(date, event);
@@ -81,7 +85,7 @@ export function DatePickerCalendar({ value, onChange, minDate, maxDate, checkDis
         newDate.setFullYear(year);
         setViewingValue(newDate);
     }, [setViewingValue, viewingValue]);
-    const shouldFilterYears = !!(minDate || maxDate);
+    const shouldFilterYears = !!(minDate ?? maxDate);
     const filterYear = useCallback((y) => {
         const normalizedMinDate = minDate ? new Date(minDate) : undefined;
         const normalizedMaxDate = maxDate ? new Date(maxDate) : undefined;

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerCalendar/DateRangePickerCalendar.js

@@ -39,5 +39,5 @@ export function DateRangePickerCalendar({ viewingMonth, handleKeyboardNavigation
         };
         return (_jsx(DateRangePickerDateCell, { ...rest, date: date, selected: selected, inRange: inRange, disabled: disabled, isRangeStart: isStart, isRangeEnd: isEnd, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: handleFocus, onMouseLeave: clearPreview, onBlur: clearPreview }, date.toISOString()));
     }, [isDateDisabled, isRangeStart, isRangeEnd, isInRange, handleDateClick, handlePreview, clearPreview]);
-    return (_jsx("div", { className: cx(classNames.root, 'mfui-DateRangePickerCalendar__root'), children: _jsx(CalendarGrid, { viewingValue: viewingMonth, renderDateCell: renderDateCell, pendingFocusDate: pendingFocusDate ?? undefined, value: temporaryStart || temporaryEnd, onDateClick: undefined, onPendingFocusDateChange: setPendingFocusDate, onKeyboardNavigation: handleKeyboardNavigation }) }));
+    return (_jsx("div", { className: cx(classNames.root, 'mfui-DateRangePickerCalendar__root'), children: _jsx(CalendarGrid, { viewingValue: viewingMonth, renderDateCell: renderDateCell, pendingFocusDate: pendingFocusDate ?? undefined, value: temporaryStart ?? temporaryEnd, onDateClick: undefined, onPendingFocusDateChange: setPendingFocusDate, onKeyboardNavigation: handleKeyboardNavigation }) }));
 }

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/utilities/createDateRangePickerPopoverTestUtility.js

@@ -5,7 +5,7 @@ export function createDateRangePickerPopoverTestUtility({ user }) {
         // Look for the previous month button by finding buttons that might contain previous month indicators
         const allButtons = screen.getAllByRole('button');
         // The previous month button is typically the first IconButton in the navigation
-        return (allButtons.find((button) => button.getAttribute('aria-label')?.includes('月') || button.getAttribute('aria-label')?.includes('month')) ??
+        return (allButtons.find((button) => !!button.getAttribute('aria-label')?.includes('月') || !!button.getAttribute('aria-label')?.includes('month')) ??
             allButtons.find((button) => button.querySelector('svg')) ??
             allButtons[0]);
     }
@@ -15,7 +15,7 @@ export function createDateRangePickerPopoverTestUtility({ user }) {
         // Find the button with next month aria-label
         const nextButton = allButtons.find((button) => {
             const label = button.getAttribute('aria-label');
-            return label?.includes('次の') || label?.includes('Next');
+            return !!label?.includes('次の') || !!label?.includes('Next');
         });
         return nextButton ?? allButtons[1]; // fallback to second button
     }