@moneyforward/mfui-components 4.6.0 → 4.7.0

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/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/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

@@ -7,9 +7,12 @@ 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();
+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, plus the selection checkbox column rendered
@@ -19,7 +22,7 @@ export const DataTableHeaderRow = forwardRef(({ children, checkboxProps, classNa
         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, flattenChildren(children).map((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'>;

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

@@ -5,10 +5,37 @@ export type DataTableSize = 'small' | 'medium';
  * The props for the `DataTableContext` component.
  */
 export type DataTableContextProps = Pick<DataTableProps, 'size' | 'enableRowSelection' | 'enableRowClickSelection' | 'fixedHeader' | 'showVerticalBorder' | 'leftFixedColumnIndex' | 'rightFixedColumnIndex' | 'loading' | 'layout'>;
+/**
+ * The values the `DataTable` owns and shares with its composition components.
+ *
+ * This should only be used in DataTable component.
+ */
+export type DataTableVirtualizationValues = {
+    /**
+     * The wrapper element of the table, which is the element that scrolls.
+     * It is `null` until the wrapper is mounted, and when the body is used outside a `DataTable`.
+     */
+    scrollElement: HTMLElement | null;
+    /**
+     * The number of rows the body holds while it is virtualized, or `null` when it is not.
+     * The body publishes it so that the table can report the real row count to assistive technology
+     * even though only a window of rows is mounted.
+     */
+    virtualizedRowCount: number | null;
+    setVirtualizedRowCount: (rowCount: number | null) => void;
+    /**
+     * The number of mounted header rows, which offsets the `aria-rowindex` of the body rows.
+     */
+    headerRowCount: number;
+    /**
+     * Registers a header row and returns the function to unregister it.
+     */
+    registerHeaderRow: () => () => void;
+};
 export type DataTableProviderValues = {
     numberColumns: number;
     setNumberColumns: (number: number) => void;
-} & DataTableContextProps;
+} & DataTableContextProps & DataTableVirtualizationValues;
 /**
  * The context for the `DataTable` component.
  *
@@ -24,4 +51,4 @@ export declare const useDataTableContext: () => DataTableProviderValues;
  *
  * This should only be used in DataTable component.
  */
-export declare function DataTableProvider({ children, size, enableRowSelection, enableRowClickSelection, fixedHeader, showVerticalBorder, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout, }: PropsWithChildren<DataTableContextProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableProvider({ children, size, enableRowSelection, enableRowClickSelection, fixedHeader, showVerticalBorder, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout, scrollElement, virtualizedRowCount, setVirtualizedRowCount, headerRowCount, registerHeaderRow, }: PropsWithChildren<DataTableContextProps & DataTableVirtualizationValues>): import("react/jsx-runtime").JSX.Element;

package/dist/src/DataTable/DataTableProvider.js

@@ -19,6 +19,15 @@ export const DataTableContext = createContext({
     setNumberColumns: () => {
         // Do nothing
     },
+    scrollElement: null,
+    virtualizedRowCount: null,
+    setVirtualizedRowCount: () => {
+        // Do nothing
+    },
+    headerRowCount: 0,
+    registerHeaderRow: () => () => {
+        // Do nothing
+    },
 });
 /**
  * The hook to use the `DataTableContext`.
@@ -29,7 +38,7 @@ export const useDataTableContext = () => useContext(DataTableContext);
  *
  * This should only be used in DataTable component.
  */
-export function DataTableProvider({ children, size = 'medium', enableRowSelection = false, enableRowClickSelection = false, fixedHeader = false, showVerticalBorder = false, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout = 'default', }) {
+export function DataTableProvider({ children, size = 'medium', enableRowSelection = false, enableRowClickSelection = false, fixedHeader = false, showVerticalBorder = false, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout = 'default', scrollElement, virtualizedRowCount, setVirtualizedRowCount, headerRowCount, registerHeaderRow, }) {
     const [numberColumns, setNumberColumns] = useState(0);
     const contextValue = useMemo(() => ({
         size,
@@ -43,6 +52,11 @@ export function DataTableProvider({ children, size = 'medium', enableRowSelectio
         layout,
         numberColumns,
         setNumberColumns,
+        scrollElement,
+        virtualizedRowCount,
+        setVirtualizedRowCount,
+        headerRowCount,
+        registerHeaderRow,
     }), [
         size,
         enableRowSelection,
@@ -54,6 +68,11 @@ export function DataTableProvider({ children, size = 'medium', enableRowSelectio
         loading,
         layout,
         numberColumns,
+        scrollElement,
+        virtualizedRowCount,
+        setVirtualizedRowCount,
+        headerRowCount,
+        registerHeaderRow,
     ]);
     return _jsx(DataTableContext.Provider, { value: contextValue, children: children });
 }

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

@@ -1,7 +1,7 @@
 export { DataTable } from './DataTable';
 export { getColumnWidthFromContentWidth } from './utils/getColumnWidthFromContentWidth';
 export type { DataTableProps } from './DataTable.types';
-export type { DataTableBodyProps } from './DataTableBody';
+export type { DataTableBodyProps, DataTableBodyVirtualizationOptions } from './DataTableBody';
 export type { DataTableCellProps } from './DataTableCell';
 export type { DataTableHeaderProps } from './DataTableHeader';
 export type { DataTableHeaderCellProps } from './DataTableHeaderCell';

package/dist/src/MultipleSelectBox/MultipleSelectBox.js

@@ -31,12 +31,15 @@ import { useVirtualizedMultipleSelectBoxOptions } from './hooks/useVirtualizedMu
 import { useInfiniteScroll } from '../utilities/dom/useInfiniteScroll';
 // How many skeleton items to render while the component is loading.
 const SKELETON_ITEM_COUNT = 4;
+// The default for an omitted `options` prop. A default written inline (`options = []`) is a new
+// array on every render, which invalidates every memoized value derived from the options.
+const EMPTY_OPTIONS = [];
 /**
  * The MultipleSelectBox component.
  * This component is separated from the SelectBox component because it has a different behavior.
  * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
  */
-export function MultipleSelectBox({ id, triggerProps, triggerWrapperProps, size, options = [], defaultValue, 
+export function MultipleSelectBox({ id, triggerProps, triggerWrapperProps, size, options = EMPTY_OPTIONS, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, clearButtonProps, disableClearButton = false, optionPanelProps, popoverWrapperProps, enableAllOptionsControls = false, enableApplyControls = false, showSelectedCount = false, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, renderPopoverHeader, renderOptionList, renderPopoverFooter, onOpenStateChanged, enableAutoUnmount = true, onBlur, showGroupOptionDivider, enableVirtualization = false, virtualizationOptions, infiniteScroll, enableCreateOption = false, onCreateOption, createOptionProps, }) {
     const classes = multipleSelectBoxSlotRecipe({ showGroupOptionDivider });
@@ -187,7 +190,7 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
     // Create an array of focusable (selectable and not disabled) options from filteredOptions
     const focusableOptions = useMemo(() => filteredOptions.filter((option) => isSelectableOption(option) && option.value != null && !isOptionDisabled(option)), [filteredOptions]);
     // Manage the keyboard navigation of options
-    const { handleOptionFocus, createKeyDownHandler, tabbableOptionIndex } = useOptionKeyboardNavigation({
+    const { handleOptionFocus, createKeyDownHandler, tabbableOptionIndex, resetTabbableIndex } = useOptionKeyboardNavigation({
         filteredOptions: focusableOptions,
         selectedValues: enableApplyControls ? temporaryValues : localSelectedValuesSet,
         onSelectOption: handleSelectOption,
@@ -373,7 +376,13 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
                     : undefined, children: renderListContent() }), isVirtualized ? renderInfiniteScrollLoading() : null, isVirtualized ? renderInfiniteScrollError('div') : null, _jsx(OptionGroupLabelDescriptions, { groups: rendersHiddenGroupLabels ? optionGroupLabels : [] })] }));
     const createOptionAreaNode = isCreateOptionVisible ? (_jsxs("div", { className: cx(classes.createOptionArea, 'mfui-MultipleSelectBox__createOptionArea'), children: [_jsxs("button", { "data-mfui-content": "create-new-option", type: "button", className: cx(classes.createOptionButton, 'mfui-MultipleSelectBox__createOptionButton'), disabled: isCreating, onClick: handleCreateOption, children: [_jsx(Add, { "aria-hidden": true }), createOptionProps?.renderLabel?.(searchText.trim()) ?? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "strongBody", children: searchText.trim() }), _jsx(Typography, { variant: "body", children: "\u3092\u8FFD\u52A0" })] }))] }), createError ? (_jsx("div", { className: cx(classes.createOptionErrorMessage, 'mfui-MultipleSelectBox__createOptionErrorMessage'), children: _jsx(HelpMessage, { messageType: "error", children: createOptionProps?.renderErrorMessage?.(searchText.trim()) ??
                         `${searchText.trim()}を追加できませんでした。` }) })) : null] })) : null;
+    const handleOpenStateChanged = (open) => {
+        // Every opening starts from the first selected option, not from the option focused last time.
+        if (open)
+            resetTabbableIndex();
+        toggleOptionPanel();
+    };
     return (_jsx(Popover, { renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsx(MultipleSelectBoxTrigger, { ref: triggerRef, wrapperRef: setTriggerRef, selectedOptions: localSelectedOptions, id: id, disabled: disabled, triggerProps: triggerProps, triggerWrapperProps: triggerWrapperProps, name: name, 
             // eslint-disable-next-line @typescript-eslint/no-deprecated
-            placeholder: placeholder, size: size, listBoxId: listBoxId, isOptionPanelOpen: isOptionPanelOpen, invalid: invalid, required: required, caution: caution, showDisplayValueAsTag: showDisplayValueAsTag, renderDisplayValue: renderDisplayValue, clearButtonProps: clearButtonProps, disableClearButton: disableClearButton, updateSelectedValues: updateSelectedValues, onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur })), contentProps: { className: classes.popover }, minWidth: optionPanelProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: optionPanelProps?.allowedPlacements, renderContent: () => (_jsxs("div", { ref: optionPanelRef, className: cx(classes.optionPanel, 'mfui-MultipleSelectBox__optionPanel', optionPanelProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: [enableSearchOptions || enableAllOptionsControls ? (_jsx(VStack, { className: cx(classes.menuHeader, 'mfui-MultipleSelectBox__menuHeader'), gap: "8px", children: renderPopoverHeader ? (renderPopoverHeader({ searchNode, allOptionsControlsNode })) : (_jsxs(_Fragment, { children: [searchNode, allOptionsControlsNode] })) })) : null, renderOptionList ? (renderOptionList({ optionsNode, createOptionAreaNode })) : (_jsxs(_Fragment, { children: [optionsNode, createOptionAreaNode] })), enableApplyControls || showSelectedCount ? (_jsx(HStack, { className: cx(classes.menuFooter, 'mfui-MultipleSelectBox__menuFooter'), justifyContent: "space-between", alignItems: "center", children: renderPopoverFooter ? (renderPopoverFooter({ selectedCountNode, applyControlsNode })) : (_jsxs(_Fragment, { children: [selectedCountNode, applyControlsNode] })) })) : null] })), open: isOptionPanelOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));
+            placeholder: placeholder, size: size, listBoxId: listBoxId, isOptionPanelOpen: isOptionPanelOpen, invalid: invalid, required: required, caution: caution, showDisplayValueAsTag: showDisplayValueAsTag, renderDisplayValue: renderDisplayValue, clearButtonProps: clearButtonProps, disableClearButton: disableClearButton, updateSelectedValues: updateSelectedValues, onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur })), contentProps: { className: classes.popover }, minWidth: optionPanelProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: optionPanelProps?.allowedPlacements, renderContent: () => (_jsxs("div", { ref: optionPanelRef, className: cx(classes.optionPanel, 'mfui-MultipleSelectBox__optionPanel', optionPanelProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: [enableSearchOptions || enableAllOptionsControls ? (_jsx(VStack, { className: cx(classes.menuHeader, 'mfui-MultipleSelectBox__menuHeader'), gap: "8px", children: renderPopoverHeader ? (renderPopoverHeader({ searchNode, allOptionsControlsNode })) : (_jsxs(_Fragment, { children: [searchNode, allOptionsControlsNode] })) })) : null, renderOptionList ? (renderOptionList({ optionsNode, createOptionAreaNode })) : (_jsxs(_Fragment, { children: [optionsNode, createOptionAreaNode] })), enableApplyControls || showSelectedCount ? (_jsx(HStack, { className: cx(classes.menuFooter, 'mfui-MultipleSelectBox__menuFooter'), justifyContent: "space-between", alignItems: "center", children: renderPopoverFooter ? (renderPopoverFooter({ selectedCountNode, applyControlsNode })) : (_jsxs(_Fragment, { children: [selectedCountNode, applyControlsNode] })) })) : null] })), open: isOptionPanelOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: handleOpenStateChanged, onBlur: onBlur }));
 }

package/dist/src/MultipleSelectBox/hooks/useOptionKeyboardNavigation.d.ts

@@ -34,5 +34,6 @@ export declare function useOptionKeyboardNavigation<T extends AllowedValueTypes
     tabbableOptionIndex: number;
     handleOptionFocus: (optionIndex: number) => void;
     createKeyDownHandler: (option: MultipleSelectBoxOption<T, AdditionalProps>) => KeyboardEventHandler<HTMLLIElement>;
+    resetTabbableIndex: () => void;
 };
 export {};