@moneyforward/mfui-components 4.5.0 → 4.7.0

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

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

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

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

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

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

package/dist/src/DataTable/DataTableRowActionContext.js

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

package/dist/src/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/DateTimeSelection/DatePicker/DatePickerCalendar/DatePickerCalendar.js

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

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

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

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

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

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerProvider/DateRangePickerProvider.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { dayjs } from '../../../utilities/date/dayjs';
 import { useUpdateEffect } from '../../../utilities/effect/useUpdateEffect';
@@ -48,7 +48,7 @@ const useDateRangePickerContextValue = ({ value, defaultValue, disabled = false,
     const today = useMemo(() => new Date(), []);
     const [viewingMonth, setViewingMonth] = useTransformedState(value?.[0] ?? defaultValue?.[0] ?? new Date(today.getFullYear(), today.getMonth(), 1), normalizeToFirstOfMonth);
     // --- Selection/Preview State and Logic ---
-    const [selecting, setSelecting] = useState('start');
+    const [selecting, setSelecting] = useState(() => (!startDate || endDate ? 'start' : 'end'));
     const [temporaryStart, setTemporaryStart] = useState(startDate);
     const [temporaryEnd, setTemporaryEnd] = useState(endDate);
     const [previewDate, setPreviewDate] = useState();
@@ -85,10 +85,10 @@ const useDateRangePickerContextValue = ({ value, defaultValue, disabled = false,
         onChange?.([newStartDate, newEndDate]);
     }, [onChange, format, setDates]);
     const handleStartDateChange = useCallback((date, nextEndDate) => {
-        handleChange([date, nextEndDate !== undefined ? nextEndDate : endDate]);
+        handleChange([date, nextEndDate ?? endDate]);
     }, [endDate, handleChange]);
     const handleEndDateChange = useCallback((date, nextStartDate) => {
-        handleChange([nextStartDate !== undefined ? nextStartDate : startDate, date]);
+        handleChange([nextStartDate ?? startDate, date]);
     }, [startDate, handleChange]);
     const handleStartDateStringChange = useCallback((value) => {
         setDateStrings([value, endDateString]);
@@ -131,12 +131,18 @@ const useDateRangePickerContextValue = ({ value, defaultValue, disabled = false,
         setTemporaryEnd(undefined);
         close();
     }, [handleChange, close]);
-    useEffect(() => {
+    // Adjusted during render (React's documented pattern for resyncing state to changed
+    // props) rather than in an effect, so the UI never flashes the stale value for one frame.
+    const [prevStartDate, setPrevStartDate] = useState(startDate);
+    const [prevEndDate, setPrevEndDate] = useState(endDate);
+    if (startDate !== prevStartDate || endDate !== prevEndDate) {
+        setPrevStartDate(startDate);
+        setPrevEndDate(endDate);
         setTemporaryStart(startDate);
         setTemporaryEnd(endDate);
         setSelecting(!startDate || endDate ? 'start' : 'end');
         setPreviewDate(undefined);
-    }, [startDate, endDate]);
+    }
     const handleDateClick = useCallback((date) => {
         // Prevent selection of disabled dates
         if (isDateOutsideConstraints(date, minDate, maxDate)) {
@@ -200,7 +206,7 @@ const useDateRangePickerContextValue = ({ value, defaultValue, disabled = false,
         }
         // handleChange already calls setDates and setDateStrings, so we don't need to call them again
         handleChange([newStart, newEnd]);
-        // Do not setTemporaryStart/setTemporaryEnd here; let the effect sync them from startDate/endDate
+        // Do not setTemporaryStart/setTemporaryEnd here; the render-time adjustment above syncs them from startDate/endDate
         close();
     }, [handleChange, close, temporaryStart, temporaryEnd, minDate, maxDate]);
     const handleCancel = useCallback(() => {

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/DateRangePickerTrigger.js

@@ -34,7 +34,7 @@ export const DateRangePickerTrigger = forwardRef(({ enableClearValue = false, in
     });
     const { placeholder: startPlaceholder = LOCALE.START_DATE_PLACEHOLDER } = startInputProps;
     const { placeholder: endPlaceholder = LOCALE.END_DATE_PLACEHOLDER } = endInputProps;
-    const shouldShowClearButton = enableClearValue && (enhancedStartInputProps.value || enhancedEndInputProps.value);
+    const shouldShowClearButton = enableClearValue && ((enhancedStartInputProps.value ?? '') || (enhancedEndInputProps.value ?? ''));
     // The error state takes precedence over the caution state
     const classes = baseRangePickerTriggerSlotRecipe({ invalid, caution: caution && !invalid, disabled, size });
     const handleClickClearButton = useCallback((event) => {

package/dist/src/DateTimeSelection/FilterDatePicker/FilterDatePicker.js

@@ -25,7 +25,7 @@ export function FilterDatePicker({ label, value, defaultValue, onChange, open, o
     const triggerRef = useRef(null);
     const dialogId = useId();
     const [internalValue, setInternalValue] = useState(defaultValue);
-    const currentValue = value !== undefined ? value : internalValue;
+    const currentValue = value ?? internalValue;
     // When a controlled value transitions back to undefined, clear any stale internal value
     // so the component doesn't show a previously-selected uncontrolled date.
     const previousValueRef = useRef(value);

package/dist/src/DateTimeSelection/FilterMonthPicker/FilterMonthPicker.js

@@ -24,7 +24,7 @@ export function FilterMonthPicker({ label, value, defaultValue, onChange, open,
     const triggerRef = useRef(null);
     const dialogId = useId();
     const [internalValue, setInternalValue] = useState(defaultValue);
-    const currentValue = value !== undefined ? value : internalValue;
+    const currentValue = value ?? internalValue;
     // When a controlled value transitions back to undefined, clear any stale internal value
     // so the component doesn't show a previously-selected uncontrolled month.
     const previousValueRef = useRef(value);

package/dist/src/DateTimeSelection/FilterMonthRangePicker/FilterMonthRangePicker.js

@@ -26,7 +26,7 @@ export function FilterMonthRangePicker({ label, value, defaultValue, onChange, o
     const triggerRef = useRef(null);
     const dialogId = useId();
     const [internalValue, setInternalValue] = useState(() => defaultValue ?? [undefined, undefined]);
-    const currentValue = value !== undefined ? value : internalValue;
+    const currentValue = value ?? internalValue;
     const previousValueRef = useRef(value);
     useEffect(() => {
         const previousValue = previousValueRef.current;

package/dist/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthPickerPanel.js

@@ -88,7 +88,7 @@ export function MonthPickerPanel({ viewingValue, setViewingValue, value, onChang
     const handleYearSelect = useCallback((newYear) => {
         setViewingValue(new Date(newYear, 0, 1));
     }, [setViewingValue]);
-    const shouldFilterYears = !!(minMonth || maxMonth || checkDisabledMonth);
+    const shouldFilterYears = !!(minMonth ?? maxMonth ?? checkDisabledMonth);
     const filterYear = useCallback((y) => {
         const normalizedMinMonth = minMonth ? new Date(minMonth) : undefined;
         const normalizedMaxMonth = maxMonth ? new Date(maxMonth) : undefined;

package/dist/src/DateTimeSelection/MonthPicker/constants.d.ts

@@ -1,5 +1,5 @@
-export declare const LABEL_PREV_YEAR = "\u524D\u306E\u5E74";
-export declare const LABEL_NEXT_YEAR = "\u6B21\u306E\u5E74";
+export declare const LABEL_PREV_YEAR = "\u524D\u306E\u5E74\u3092\u8868\u793A";
+export declare const LABEL_NEXT_YEAR = "\u6B21\u306E\u5E74\u3092\u8868\u793A";
 export declare const LABEL_OPEN_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u958B\u304F";
 export declare const LABEL_CLOSE_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u9589\u3058\u308B";
 type MonthPickerLabelKey = 'prevYear' | 'nextYear';