@moneyforward/mfui-components 4.5.0 → 4.7.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.d.ts

@@ -72,7 +72,7 @@ export declare const DataTable: import("react").ForwardRefExoticComponent<Omit<D
      * Body.displayName = 'CustomDataTableBody'; // Will cause hooks violation
      * ```
      */
-    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("./DataTableBody").DataTableBodyProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
     /**
      * The `DataTableCell` component.
      * This component should be used inside the `DataTable` component.

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, useRef, forwardRef } from 'react';
+import { Children, isValidElement, useCallback, useMemo, useRef, useState, forwardRef } from 'react';
 import { DataTableProvider } from './DataTableProvider';
 import { dataTableSlotRecipe } from '../../styled-system/recipes';
 import { DataTableBody } from './DataTableBody';
@@ -18,6 +18,20 @@ import { useTableEdgeCellMarkers } from '../utilities/dom/useTableEdgeCellMarker
 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);
+    // A virtualized body needs the element that owns `overflow: auto`, which is the wrapper below.
+    // A ref object would still be `null` when the body's layout effects run, because host refs are
+    // attached child-first, so the element is held in state and the body re-renders once it lands.
+    const [scrollElement, setScrollElement] = useState(null);
+    // A virtualized body mounts only a window of its rows, so the row count it publishes here is what
+    // keeps `aria-rowcount` honest. It stays `null` while no body is virtualized.
+    const [virtualizedRowCount, setVirtualizedRowCount] = useState(null);
+    const [headerRowCount, setHeaderRowCount] = useState(0);
+    const registerHeaderRow = useCallback(() => {
+        setHeaderRowCount((count) => count + 1);
+        return () => {
+            setHeaderRowCount((count) => count - 1);
+        };
+    }, []);
     // `: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.
@@ -29,6 +43,7 @@ const Base = forwardRef(({ className, size = 'medium', enableRowSelection = fals
         const bodyElement = Children.toArray(children).find((child) => isValidElement(child) &&
             (isComponentOrWrapped(child, DataTableBody) ||
                 (typeof child.type !== 'string' &&
+                    typeof child.type !== 'symbol' &&
                     'displayName' in child.type &&
                     child.type.displayName === 'DataGridBody')));
         if (!bodyElement || !isValidElement(bodyElement))
@@ -38,16 +53,21 @@ const Base = forwardRef(({ className, size = 'medium', enableRowSelection = fals
             const bodyChildren = Children.toArray(bodyElement.props.children);
             return bodyChildren.some((child) => isValidElement(child) &&
                 (isComponentOrWrapped(child, DataTableRow) ||
+                    // A `Fragment` has a symbol as its type, which `in` cannot search.
                     (typeof child.type !== 'string' &&
+                        typeof child.type !== 'symbol' &&
                         'displayName' in child.type &&
                         child.type.displayName === 'DataGridRow')));
         }
         return false;
     }, [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', 
+    // A virtualized body holds only a window of its rows, so the mounted rows are not the row count.
+    // This is spread before `props` so that a consumer-supplied `aria-rowcount` still wins.
+    const ariaRowCountProps = virtualizedRowCount !== null ? { 'aria-rowcount': virtualizedRowCount + headerRowCount } : undefined;
+    return (_jsx(DataTableProvider, { size: size, enableRowSelection: enableRowSelection, enableRowClickSelection: enableRowClickSelection, fixedHeader: fixedHeader, showVerticalBorder: showVerticalBorder, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, loading: loading, layout: layout, scrollElement: scrollElement, virtualizedRowCount: virtualizedRowCount, setVirtualizedRowCount: setVirtualizedRowCount, headerRowCount: headerRowCount, registerHeaderRow: registerHeaderRow, children: _jsxs("div", { ...wrapperProps, ref: setScrollElement, className: cx(classes.wrapper, 'mfui-DataTable__wrapper', 
             /* 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__table', className), ...ariaRowCountProps, ...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] }) }));
 });
 Base.displayName = 'DataTable';

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/DataTableBody/DataTableBody.d.ts

@@ -1 +1,2 @@
-export declare const DataTableBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+import { type DataTableBodyProps } from './DataTableBody.types';
+export declare const DataTableBody: import("react").ForwardRefExoticComponent<Omit<DataTableBodyProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/src/DataTable/DataTableBody/DataTableBody.js

@@ -1,19 +1,83 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, Fragment, isValidElement, useCallback, useEffect, useMemo, useState, } from 'react';
+import { useVirtualizedRows, VIRTUAL_ROW_INDEX_ATTRIBUTE } from './hooks/useVirtualizedRows';
 import { dataTableBodySlotRecipe } from '../../../styled-system/recipes';
 import { cx } from '../../../styled-system/css';
 import { useDataTableContext } from '../DataTableProvider';
 import { DataTableRow } from '../DataTableRow';
 import { DataTableCell } from '../DataTableCell';
+import { mergeRefs } from '../../utilities/dom/mergeRefs';
 const NUMBER_OF_LOADING_ROWS = 4;
-export const DataTableBody = forwardRef(({ className, ...props }, ref) => {
-    const { numberColumns, loading } = useDataTableContext();
+/**
+ * React 19 exposes the ref of an element through its props, while React 18 keeps it on the element
+ * itself. Both are supported peers, so both have to be read to merge rather than clobber a
+ * consumer-supplied ref on a row.
+ *
+ * @param element - The row element to read the ref from.
+ *
+ * @returns The ref the consumer put on the row, if any.
+ */
+function getRowRef(element) {
+    return element.props.ref ?? element.ref;
+}
+export const DataTableBody = forwardRef(({ className, children, enableVirtualization = false, virtualizationOptions, ...props }, ref) => {
+    const { numberColumns, loading, scrollElement, setVirtualizedRowCount, headerRowCount } = useDataTableContext();
     const classes = dataTableBodySlotRecipe();
+    // The body is held in state so that its offset below the `<thead>` can be read while rendering.
+    const [bodyElement, setBodyElement] = useState(null);
+    const bodyRef = useMemo(() => mergeRefs(ref, setBodyElement), [ref]);
+    const rows = useMemo(() => (enableVirtualization ? Children.toArray(children) : []), [children, enableVirtualization]);
+    const isVirtualized = enableVirtualization && !loading;
+    // `Children.toArray` gives every element a key, so measured heights stay with their row on reorder.
+    const getRowKey = useCallback((index) => {
+        const row = rows[index];
+        return isValidElement(row) && row.key != null ? row.key : index;
+    }, [rows]);
+    // Called before the `loading` branch below returns, so that the hook order stays stable.
+    const { virtualRows, paddingTop, paddingBottom, measureElement } = useVirtualizedRows({
+        enabled: isVirtualized,
+        scrollElement,
+        rowCount: rows.length,
+        getItemKey: getRowKey,
+        scrollMargin: bodyElement?.offsetTop ?? 0,
+        ...virtualizationOptions,
+    });
+    // Only a window of the rows is mounted, so the table cannot count them. Publishing the real
+    // count is what lets the table report `aria-rowcount` instead of the mounted count.
+    useEffect(() => {
+        if (!isVirtualized)
+            return;
+        setVirtualizedRowCount(rows.length);
+        return () => {
+            setVirtualizedRowCount(null);
+        };
+    }, [isVirtualized, rows.length, setVirtualizedRowCount]);
+    const bodyClassName = cx(classes.root, 'mfui-DataTableBody__root', 
+    /* TODO: Remove in v5.0.0 */ 'mfui-DataGridBody__root', className);
     if (loading) {
-        return (_jsx("tbody", { className: cx(classes.root, 'mfui-DataTableBody__root', 
-            /* TODO: Remove in v5.0.0 */ 'mfui-DataGridBody__root', className), ...props, ref: ref, children: Array.from({ length: NUMBER_OF_LOADING_ROWS }).map((_, rowIndex) => (_jsx(DataTableRow, { children: Array.from({ length: numberColumns }).map((_, colIndex) => (_jsx(DataTableCell, {}, colIndex))) }, rowIndex))) }));
+        return (_jsx("tbody", { className: bodyClassName, ...props, ref: ref, children: Array.from({ length: NUMBER_OF_LOADING_ROWS }).map((_, rowIndex) => (_jsx(DataTableRow, { children: Array.from({ length: numberColumns }).map((_, colIndex) => (_jsx(DataTableCell, {}, colIndex))) }, rowIndex))) }));
     }
-    return (_jsx("tbody", { className: cx(classes.root, 'mfui-DataTableBody__root', 
-        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridBody__root', className), ...props, ref: ref }));
+    if (!isVirtualized) {
+        return (_jsx("tbody", { className: bodyClassName, ...props, ref: ref, children: children }));
+    }
+    // `numberColumns` already counts the selection checkbox column, and falls back to a single
+    // column when the table renders no header row for it to count.
+    const spacerColSpan = Math.max(numberColumns, 1);
+    // The spacer stands in for the rows that are not mounted, so it reserves their height without
+    // being announced as a row of the table.
+    const renderSpacer = (position, height) => (_jsx("tr", { role: "presentation", "data-mfui-virtual-spacer": position, children: _jsx("td", { colSpan: spacerColSpan, className: classes.spacer, style: { height } }) }));
+    return (_jsxs("tbody", { className: bodyClassName, ...props, ref: bodyRef, children: [paddingTop > 0 ? renderSpacer('start', paddingTop) : null, virtualRows.map((virtualRow) => {
+                const child = rows[virtualRow.index];
+                // A `Fragment` cannot take the measuring ref or the ARIA attributes, so it is left as it is.
+                if (!isValidElement(child) || child.type === Fragment) {
+                    return child;
+                }
+                return cloneElement(child, {
+                    [VIRTUAL_ROW_INDEX_ATTRIBUTE]: virtualRow.index,
+                    // The header rows come first in the table, so the first data row is the row after them.
+                    'aria-rowindex': child.props['aria-rowindex'] ?? virtualRow.index + headerRowCount + 1,
+                    ref: mergeRefs(getRowRef(child), measureElement),
+                });
+            }), paddingBottom > 0 ? renderSpacer('end', paddingBottom) : null] }));
 });
 DataTableBody.displayName = 'DataTableBody';

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

@@ -1,4 +1,9 @@
 import { type ComponentPropsWithRef } from 'react';
+import { type VirtualizerOptions } from '@tanstack/react-virtual';
+/**
+ * The options for the row virtualization of the `DataTableBody` component.
+ */
+export type DataTableBodyVirtualizationOptions = Pick<VirtualizerOptions<HTMLElement, Element>, 'estimateSize' | 'overscan'>;
 /**
  * The props for the `DataTableBody` component.
  *
@@ -6,4 +11,79 @@ import { type ComponentPropsWithRef } from 'react';
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
  */
-export type DataTableBodyProps = ComponentPropsWithRef<'tbody'>;
+export type DataTableBodyProps = {
+    /**
+     * Whether to render only the rows near the viewport (row virtualization).
+     *
+     * When enabled, the body mounts a window of its `DataTable.Row` children instead of all of them,
+     * and reserves the height of the rows it leaves out with spacer rows. This removes the DOM and
+     * mount cost of a large table, which is what dominates at thousands of rows.
+     * Note that the rows are still *created* by the consumer's own `map`, so creating the row elements
+     * stays O(number of rows).
+     *
+     * Row heights are measured as the rows mount, so rows whose content wraps to different heights
+     * are supported.
+     *
+     * Requirements:
+     *
+     * - An ancestor has to constrain the height of the `DataTable`, because the wrapper of the
+     *   `DataTable` is the element that scrolls and it is `height: 100%`.
+     * - The table has to use `table-layout: fixed` with explicit column widths. Column widths are
+     *   otherwise derived from the mounted rows only, so they shift while scrolling.
+     *   `getColumnWidthFromContentWidth` turns a content width into the matching column width.
+     *
+     * `aria-rowcount` on the table and `aria-rowindex` on each row are set for you, so that assistive
+     * technology is told the real row count rather than the number of mounted rows. Both stay
+     * overridable by the values you pass yourself.
+     *
+     * **Not supported together with merged cells.** A `rowSpan` reaches across rows that virtualization
+     * unmounts, so the merged cell is lost as soon as the row that owns it scrolls out of the window.
+     *
+     * **Each child has to be a single `DataTable.Row`.** A `Fragment` that groups several rows is
+     * windowed as one row and its rows are not measured, so pass the rows as a flat list instead.
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * <div style={{ height: 500 }}>
+     *   <DataTable fixedHeader style={{ tableLayout: 'fixed' }}>
+     *     <colgroup>
+     *       <col style={{ width: getColumnWidthFromContentWidth(96, { position: 'first' }) }} />
+     *       <col />
+     *     </colgroup>
+     *     <DataTable.Header>
+     *       <DataTable.HeaderRow>
+     *         <DataTable.HeaderCell>行</DataTable.HeaderCell>
+     *         <DataTable.HeaderCell>エラー内容</DataTable.HeaderCell>
+     *       </DataTable.HeaderRow>
+     *     </DataTable.Header>
+     *     <DataTable.Body enableVirtualization>
+     *       {rows.map((row) => (
+     *         <DataTable.Row key={row.id}>
+     *           <DataTable.Cell>{row.line}</DataTable.Cell>
+     *           <DataTable.Cell>{row.message}</DataTable.Cell>
+     *         </DataTable.Row>
+     *       ))}
+     *     </DataTable.Body>
+     *   </DataTable>
+     * </div>
+     * ```
+     */
+    enableVirtualization?: boolean;
+    /**
+     * The configuration of the row virtualization.
+     * Only applies when `enableVirtualization` is `true`.
+     *
+     * @property estimateSize - The estimated height of a row in pixels, used until the row is measured. Defaults to `() => 44`.
+     * @property overscan - The number of rows rendered outside the visible area, on each side. Defaults to `8`.   *
+     * @example
+     * ```tsx
+     * <DataTable.Body
+     *   enableVirtualization
+     *   virtualizationOptions={{ estimateSize: () => 36, overscan: 12 }}
+     * >
+     * ```
+     */
+    virtualizationOptions?: DataTableBodyVirtualizationOptions;
+} & ComponentPropsWithRef<'tbody'>;

package/dist/src/DataTable/DataTableBody/hooks/useVirtualizedRows.d.ts

@@ -0,0 +1,64 @@
+import { type Key } from 'react';
+import { type VirtualItem } from '@tanstack/react-virtual';
+import { type DataTableBodyVirtualizationOptions } from '../DataTableBody.types';
+/**
+ * The attribute the virtualizer reads the row index from while measuring a mounted row.
+ * TanStack's default is `data-index`, which the repository's `data-mfui-` prefix rule forbids.
+ */
+export declare const VIRTUAL_ROW_INDEX_ATTRIBUTE = "data-mfui-index";
+export type UseVirtualizedRowsParams = {
+    /**
+     * Whether the rows are windowed.
+     */
+    enabled: boolean;
+    /**
+     * The element that scrolls the rows. It is `null` until it is mounted.
+     */
+    scrollElement: HTMLElement | null;
+    /**
+     * The total number of rows the body holds, not the number of mounted rows.
+     */
+    rowCount: number;
+    /**
+     * The distance in pixels from the top of the scroll element's content to the first row,
+     * which is the height of the `<thead>` above the body.
+     */
+    scrollMargin: number;
+    /**
+     * Returns a stable key for the row at the index, so that measured heights follow the row
+     * rather than its position when rows are reordered.
+     */
+    getItemKey?: (index: number) => Key;
+} & Partial<DataTableBodyVirtualizationOptions>;
+export type UseVirtualizedRowsReturn = {
+    /**
+     * The rows to mount, which is the visible rows plus the overscan.
+     * It is empty when virtualization is disabled.
+     */
+    virtualRows: VirtualItem[];
+    /**
+     * The height in pixels the spacer row before the window has to reserve.
+     */
+    paddingTop: number;
+    /**
+     * The height in pixels the spacer row after the window has to reserve.
+     */
+    paddingBottom: number;
+    /**
+     * The ref callback that measures a mounted row.
+     * The row must carry the index in {@link VIRTUAL_ROW_INDEX_ATTRIBUTE}.
+     */
+    measureElement: (node: Element | null) => void;
+};
+/**
+ * Windows the rows of a `DataTable.Body` with `@tanstack/react-virtual`, so that only the rows near
+ * the viewport are mounted.
+ *
+ * Rows are measured as they mount rather than trusted to `estimateSize`, so rows whose content wraps
+ * to different heights are supported.
+ *
+ * @param params - The virtualization configuration.
+ *
+ * @returns The rows to mount and the spacer heights that stand in for the rows that are not mounted.
+ */
+export declare function useVirtualizedRows({ enabled, scrollElement, rowCount, scrollMargin, estimateSize, overscan, getItemKey, }: UseVirtualizedRowsParams): UseVirtualizedRowsReturn;

package/dist/src/DataTable/DataTableBody/hooks/useVirtualizedRows.js

@@ -0,0 +1,53 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+/**
+ * The attribute the virtualizer reads the row index from while measuring a mounted row.
+ * TanStack's default is `data-index`, which the repository's `data-mfui-` prefix rule forbids.
+ */
+export const VIRTUAL_ROW_INDEX_ATTRIBUTE = 'data-mfui-index';
+/**
+ * The estimated height of a row in pixels, used before a row has been measured.
+ * It only affects the scroll range of the not-yet-mounted rows, because every mounted row is
+ * measured for real.
+ */
+const DEFAULT_ESTIMATED_ROW_HEIGHT = 44;
+/**
+ * The number of rows rendered outside the visible area, on each side.
+ */
+const DEFAULT_OVERSCAN = 8;
+/**
+ * Windows the rows of a `DataTable.Body` with `@tanstack/react-virtual`, so that only the rows near
+ * the viewport are mounted.
+ *
+ * Rows are measured as they mount rather than trusted to `estimateSize`, so rows whose content wraps
+ * to different heights are supported.
+ *
+ * @param params - The virtualization configuration.
+ *
+ * @returns The rows to mount and the spacer heights that stand in for the rows that are not mounted.
+ */
+export function useVirtualizedRows({ enabled, scrollElement, rowCount, scrollMargin, estimateSize = () => DEFAULT_ESTIMATED_ROW_HEIGHT, overscan = DEFAULT_OVERSCAN, getItemKey, }) {
+    // Always call useVirtualizer to keep the hook order stable, but with 0 count when disabled.
+    const virtualizer = useVirtualizer({
+        count: enabled ? rowCount : 0,
+        getScrollElement: () => scrollElement,
+        estimateSize,
+        overscan,
+        enabled,
+        getItemKey,
+        indexAttribute: VIRTUAL_ROW_INDEX_ATTRIBUTE,
+        // The rows start below the `<thead>`, not at the top of the scroll element, so without the margin
+        // the window would be shifted down by the header height.
+        scrollMargin,
+    });
+    const virtualRows = enabled ? virtualizer.getVirtualItems() : [];
+    const [firstVirtualRow] = virtualRows;
+    const lastVirtualRow = virtualRows.at(-1);
+    // `start` / `end` include the scroll margin while `getTotalSize()` does not, so the margin is
+    // removed to get distances within the body.
+    return {
+        virtualRows,
+        paddingTop: firstVirtualRow ? firstVirtualRow.start - scrollMargin : 0,
+        paddingBottom: lastVirtualRow ? virtualizer.getTotalSize() - (lastVirtualRow.end - scrollMargin) : 0,
+        measureElement: virtualizer.measureElement,
+    };
+}

package/dist/src/DataTable/DataTableBody/index.d.ts

@@ -1,2 +1,2 @@
 export { DataTableBody } from './DataTableBody';
-export type { DataTableBodyProps } from './DataTableBody.types';
+export type { DataTableBodyProps, DataTableBodyVirtualizationOptions } from './DataTableBody.types';

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

@@ -1,12 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { Children, cloneElement, forwardRef, isValidElement } from 'react';
 import { dataTableHeaderSlotRecipe } from '../../../styled-system/recipes';
 import { useDataTableContext } from '../DataTableProvider';
+import { DataTableHeaderRow } from '../DataTableHeaderRow';
 import { cx } from '../../../styled-system/css';
+import { isComponentOrWrapped } from '../../utilities/react/isComponentOrWrapped';
 export const DataTableHeader = forwardRef(({ children, className, ...props }, ref) => {
     const { fixedHeader } = useDataTableContext();
     const classes = dataTableHeaderSlotRecipe({ fixedHeader });
+    // Each header row needs its own position for `aria-rowindex`, which only the header can tell.
+    const items = Children.toArray(children);
+    const headerRows = items.filter((child) => isValidElement(child) && isComponentOrWrapped(child, DataTableHeaderRow));
     return (_jsx("thead", { className: cx(classes.root, 'mfui-DataTableHeader__root', 
-        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeader__root', className), ...props, ref: ref, children: children }));
+        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeader__root', className), ...props, ref: ref, children: items.map((child) => {
+            const headerRowIndex = headerRows.indexOf(child) + 1;
+            if (headerRowIndex === 0 || !isValidElement(child)) {
+                return child;
+            }
+            return cloneElement(child, { headerRowIndex });
+        }) }));
 });
 DataTableHeader.displayName = 'DataTableHeader';

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

@@ -1,23 +1,28 @@
 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';
-export const DataTableHeaderRow = forwardRef(({ children, checkboxProps, className, ...props }, ref) => {
-    const { enableRowSelection, setNumberColumns } = useDataTableContext();
+import { flattenChildren } from '../../utilities/react/flattenChildren';
+export const DataTableHeaderRow = forwardRef(({ children, checkboxProps, className, headerRowIndex = 1, ...props }, ref) => {
+    const { enableRowSelection, setNumberColumns, registerHeaderRow, virtualizedRowCount } = useDataTableContext();
     const classes = dataTableHeaderRowSlotRecipe();
+    // A virtualized body offsets the `aria-rowindex` of its rows by the number of header rows, which
+    // only the header rows themselves can report.
+    useEffect(() => registerHeaderRow(), [registerHeaderRow]);
     // 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), ...(virtualizedRowCount !== null && { 'aria-rowindex': headerRowIndex }), ...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

@@ -44,4 +44,13 @@ export type DataTableHeaderRowProps = {
     checkboxProps?: Pick<CheckboxProps, 'aria-label' | 'checked' | 'indeterminate' | 'onChange' | 'disabled' | 'onClick'> & {
         wrapper?: DataTableSelectionCheckboxWrapper;
     };
+    /**
+     * **Do not pass this prop manually.**
+     *
+     * The 1-based position of this row among the header rows.
+     * Used for the `aria-rowindex` of the row while the body is virtualized.
+     *
+     * @default undefined
+     */
+    headerRowIndex?: number;
 } & ComponentPropsWithRef<'tr'>;