@moneyforward/mfui-components 4.3.1 → 4.6.0

package/dist/src/Accordion/Accordion.d.ts

@@ -1,6 +1,6 @@
 import { type AccordionProps, type AccordionItemProps } from './Accordion.types';
 declare function AccordionBase({ children, size, width, defaultOpenItems }: AccordionProps): import("react/jsx-runtime").JSX.Element;
-declare function AccordionItem({ children, id, enableAutoUnmount }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ children, id, enableAutoUnmount, open, onOpenStateChanged }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
 /**
  * The `Accordion` component.
  *
@@ -24,6 +24,26 @@ declare function AccordionItem({ children, id, enableAutoUnmount }: AccordionIte
  *   </Accordion.Item>
  * </Accordion>
  * ```
+ *
+ * Each `Accordion.Item` can also be controlled with the `open` and `onOpenStateChanged` props, which lets a trigger
+ * outside the Accordion tree drive it. In that case you own the `aria-expanded` and `aria-controls` attributes of
+ * your own trigger, and `enableAutoUnmount={false}` keeps the collapsed content mounted.
+ *
+ * @example
+ * ```jsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <>
+ *   <button type="button" aria-expanded={isOpen} aria-controls="accordion-1" onClick={() => setIsOpen(!isOpen)}>
+ *     Toggle
+ *   </button>
+ *   <Accordion>
+ *     <Accordion.Item id="accordion-1" open={isOpen} enableAutoUnmount={false}>
+ *       <Accordion.Target>Content for section 1</Accordion.Target>
+ *     </Accordion.Item>
+ *   </Accordion>
+ * </>
+ * ```
  */
 export declare const Accordion: typeof AccordionBase & {
     /**

package/dist/src/Accordion/Accordion.js

@@ -41,12 +41,16 @@ function AccordionBase({ children, size = 'medium', width, defaultOpenItems = []
     };
     return (_jsx("div", { style: containerStyle, children: _jsx(AccordionContext.Provider, { value: contextValue, children: children }) }));
 }
-function AccordionItem({ children, id, enableAutoUnmount = true }) {
+function AccordionItem({ children, id, enableAutoUnmount = true, open, onOpenStateChanged }) {
     const { openItems, toggleItem } = useAccordionContext();
-    const isOpen = openItems[id] || false;
+    const isControlled = open !== undefined;
+    const isOpen = open ?? openItems[id] ?? false;
     const toggle = useCallback(() => {
-        toggleItem(id);
-    }, [toggleItem, id]);
+        if (!isControlled) {
+            toggleItem(id);
+        }
+        onOpenStateChanged?.(!isOpen);
+    }, [isControlled, toggleItem, id, onOpenStateChanged, isOpen]);
     const contextValue = useMemo(() => ({
         isOpen,
         toggle,
@@ -100,6 +104,26 @@ const AccordionTarget = forwardRef(({ children, className, style, ...props }, re
  *   </Accordion.Item>
  * </Accordion>
  * ```
+ *
+ * Each `Accordion.Item` can also be controlled with the `open` and `onOpenStateChanged` props, which lets a trigger
+ * outside the Accordion tree drive it. In that case you own the `aria-expanded` and `aria-controls` attributes of
+ * your own trigger, and `enableAutoUnmount={false}` keeps the collapsed content mounted.
+ *
+ * @example
+ * ```jsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <>
+ *   <button type="button" aria-expanded={isOpen} aria-controls="accordion-1" onClick={() => setIsOpen(!isOpen)}>
+ *     Toggle
+ *   </button>
+ *   <Accordion>
+ *     <Accordion.Item id="accordion-1" open={isOpen} enableAutoUnmount={false}>
+ *       <Accordion.Target>Content for section 1</Accordion.Target>
+ *     </Accordion.Item>
+ *   </Accordion>
+ * </>
+ * ```
  */
 export const Accordion = Object.assign(AccordionBase, {
     /**

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

@@ -42,6 +42,27 @@ export type AccordionItemProps = {
      * @default true
      */
     enableAutoUnmount?: boolean;
+    /**
+     * The open state of this accordion item.
+     * You only need to use this prop if you want to control the item programmatically, for example when the trigger
+     * lives outside the Accordion tree. While this prop is defined, it takes precedence over the `defaultOpenItems` of
+     * the Accordion and over the internal state, so you have to update it yourself in response to
+     * `onOpenStateChanged`. Supply it consistently: do not switch an item between controlled and uncontrolled.
+     *
+     * When you drive the item from your own trigger outside the Accordion, you own its `aria-expanded` and
+     * `aria-controls` attributes. `Accordion.Target` renders the item `id` as its DOM `id`, so
+     * `aria-controls={id}` points at it. Note that with the default `enableAutoUnmount` the target is unmounted
+     * while collapsed, so `aria-controls` refers to an element that does not exist yet; set
+     * `enableAutoUnmount={false}` to keep the target in the DOM.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the open state of this accordion item is toggled by `Accordion.Trigger`.
+     * It is called in both controlled and uncontrolled mode.
+     *
+     * @param open - The new open state of the accordion item.
+     */
+    onOpenStateChanged?: (open: boolean) => void;
 };
 /**
  * Props for the Accordion.Trigger component

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/Breadcrumbs/Breadcrumbs.js

@@ -102,7 +102,7 @@ export const Breadcrumbs = forwardRef(({ items, wrap = false, customLinkComponen
         if (wrap || !listRef.current)
             return;
         const observer = new ResizeObserver((entries) => {
-            const entry = entries[0];
+            const [entry] = entries;
             if (entry) {
                 setContainerWidth(entry.contentRect.width);
             }

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/CheckboxCard/CheckboxCard.js

@@ -29,5 +29,7 @@ export const CheckboxCard = forwardRef(({ label, layout = 'vertical', renderDeta
         disableResponsive,
         isResponsive: Boolean(responsiveSlot.narrowViewport),
     });
-    return (_jsxs("div", { className: cx(classes.root, 'mfui-CheckboxCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-CheckboxCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(Checkbox, { ref: ref, ...props, className: cx(classes.input, 'mfui-CheckboxCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-CheckboxCard__label'), children: label })] }) }), responsiveSlot.narrowViewport && disableResponsive ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-CheckboxCard__details'), children: responsiveSlot.narrowViewport(checkboxState) })] })) : responsiveSlot.narrowViewport ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-CheckboxCard__details'), children: responsiveSlot.narrowViewport(checkboxState) })] })) : responsiveSlot.base ? (_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) })) : null] }));
+    return (_jsxs("div", { className: cx(classes.root, 'mfui-CheckboxCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-CheckboxCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(Checkbox, { ref: ref, ...props, className: cx(classes.input, 'mfui-CheckboxCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-CheckboxCard__label'), children: label })] }) }), responsiveSlot.narrowViewport ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-CheckboxCard__details'), children: responsiveSlot.narrowViewport(checkboxState) })] })) : (
+            /* For function-based renderDetailsSlot or ResponsiveSlot with only base, use single details element */
+            responsiveSlot.base && (_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) })))] }));
 });

package/dist/src/DataTable/DataTable.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement, useMemo, forwardRef } from 'react';
+import { Children, isValidElement, useMemo, useRef, forwardRef } from 'react';
 import { DataTableProvider } from './DataTableProvider';
 import { dataTableSlotRecipe } from '../../styled-system/recipes';
 import { DataTableBody } from './DataTableBody';
@@ -13,8 +13,15 @@ import { DataTableRow } from './DataTableRow';
 import { DataTableSortButton } from './DataTableSortButton';
 import { cx } from '../../styled-system/css';
 import { isComponentOrWrapped } from '../utilities/react/isComponentOrWrapped';
+import { mergeRefs } from '../utilities/dom/mergeRefs';
+import { useTableEdgeCellMarkers } from '../utilities/dom/useTableEdgeCellMarkers';
 const Base = forwardRef(({ className, size = 'medium', enableRowSelection = false, enableRowClickSelection = false, fixedHeader = false, showVerticalBorder = false, leftFixedColumnIndex, rightFixedColumnIndex, layout = 'default', wrapperProps, loading = false, emptyStateSlot, children, ...props }, ref) => {
     const classes = dataTableSlotRecipe({ layout });
+    const tableRef = useRef(null);
+    // `:first-child` / `:last-child` cannot tell which grid column a cell renders in, so the
+    // table-edge spacing of the cell recipes misfires on the rows a `rowSpan` extends into.
+    // This marks the displaced cells so that spacing can be cancelled on them.
+    useTableEdgeCellMarkers(tableRef);
     // Check if DataTable has any rows by looking for DataTable.Body with DataTable.Row children
     const hasRows = useMemo(() => {
         if (loading)
@@ -39,7 +46,7 @@ const Base = forwardRef(({ className, size = 'medium', enableRowSelection = fals
     }, [children, loading]);
     const shouldShowEmptyState = !hasRows && !!emptyStateSlot && !loading;
     return (_jsx(DataTableProvider, { size: size, enableRowSelection: enableRowSelection, enableRowClickSelection: enableRowClickSelection, 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__wrapper', wrapperProps?.className), children: [_jsx("table", { ref: mergeRefs(ref, tableRef), 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

@@ -9,6 +9,15 @@ import { type DataTableSlotRecipeVariant } from '../../styled-system/recipes';
  * - `amount`: Right-aligned numeric content (amounts, balances, etc.)
  */
 export type CellDataType = 'text' | 'amount';
+/**
+ * The function that wraps the built-in selection checkbox of `DataTable.HeaderRow` or `DataTable.Row`.
+ *
+ * It receives the selection checkbox element and returns the content to render in the checkbox cell.
+ * The returned content must contain the passed element, because the row owns the checkbox itself.
+ *
+ * @param checkbox - The built-in selection checkbox element.
+ */
+export type DataTableSelectionCheckboxWrapper = (checkbox: ReactNode) => ReactNode;
 /**
  * The props for the `DataTable` component.
  *
@@ -40,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.
      *
@@ -81,6 +90,9 @@ export type DataTableProps = {
      * If the fixed column width might be changed with any interaction, such as disclosure, removing row or translating,
      * please add `table-layout: fixed` to the DataTable and specify the width of the each column.
      *
+     * **Not supported together with merged cells.** The index is counted in source order, which a
+     * `colSpan` / `rowSpan` shifts, so the fixed column is resolved on the wrong cells.
+     *
      * @default undefined
      */
     leftFixedColumnIndex?: number;
@@ -91,6 +103,9 @@ export type DataTableProps = {
      * If the fixed column width might be changed with any interaction, such as disclosure, removing row or translating,
      * please add `table-layout: fixed` to the DataTable and specify the width of the each column.
      *
+     * **Not supported together with merged cells.** The index is counted in source order, which a
+     * `colSpan` / `rowSpan` shifts, so the fixed column is resolved on the wrong cells.
+     *
      * @default undefined
      */
     rightFixedColumnIndex?: number;

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,21 +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();
-    // Count the number of header cells
+    // 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, 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: _jsx(Checkbox, { checked: checkboxProps?.checked, indeterminate: checkboxProps?.indeterminate, "aria-label": checkboxProps?.['aria-label'] ?? 'すべての行を選択', disabled: checkboxProps?.disabled, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick }) })) : 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/DataTableHeaderRow/DataTableHeaderRow.types.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type CheckboxProps } from '../../Checkbox';
+import { type DataTableSelectionCheckboxWrapper } from '../DataTable.types';
 /**
  * The props for the `DataTableHeaderRow` component.
  *
@@ -24,6 +25,23 @@ export type DataTableHeaderRowProps = {
      * @property onClick - The handler called when the checkbox is clicked (for event propagation control).
      *
      * @property disabled - Whether the checkbox is disabled.
+     *
+     * @property wrapper - The function that wraps the checkbox, for example with the `Tooltip` component.
+     * It receives the checkbox element and must render it as it is, because the header row owns the checkbox itself.
+     * Keep the `Tooltip` component with its default `trigger` (`['hover', 'focus']`) so that keyboard users can also
+     * read the content; a tooltip opened by a click would duplicate the action of the checkbox.
+     * When the content restates the accessible name of the checkbox, pass `hideFromScreenReader` to the `Tooltip`
+     * component to avoid announcing the same information twice.
+     *
+     * ```tsx
+     * <DataTable.HeaderRow
+     *   checkboxProps={{
+     *     wrapper: (checkbox) => <Tooltip content="すべて選択">{checkbox}</Tooltip>,
+     *   }}
+     * >
+     * ```
      */
-    checkboxProps?: Pick<CheckboxProps, 'aria-label' | 'checked' | 'indeterminate' | 'onChange' | 'disabled' | 'onClick'>;
+    checkboxProps?: Pick<CheckboxProps, 'aria-label' | 'checked' | 'indeterminate' | 'onChange' | 'disabled' | 'onClick'> & {
+        wrapper?: DataTableSelectionCheckboxWrapper;
+    };
 } & ComponentPropsWithRef<'tr'>;

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,17 +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, 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;
@@ -71,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: _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 }) })) : 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';