@moneyforward/mfui-components 3.6.0 → 3.8.0

package/dist/src/{DataGrid/DataGrid.js → DataTable/DataTable.js}

@@ -1,75 +1,90 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, isValidElement, useMemo, forwardRef } from 'react';
-import { DataGridProvider } from './DataGridProvider';
-import { dataGridSlotRecipe } from '../../styled-system/recipes';
-import { DataGridBody } from './DataGridBody';
-import { DataGridCell } from './DataGridCell';
-import { DataGridHeader } from './DataGridHeader';
-import { DataGridHeaderCell } from './DataGridHeaderCell';
-import { DataGridHeaderRow } from './DataGridHeaderRow';
-import { DataGridRow } from './DataGridRow';
+import { DataTableProvider } from './DataTableProvider';
+import { dataTableSlotRecipe } from '../../styled-system/recipes';
+import { DataTableBody } from './DataTableBody';
+import { DataTableCell } from './DataTableCell';
+import { DataTableHeader } from './DataTableHeader';
+import { DataTableHeaderCell } from './DataTableHeaderCell';
+import { DataTableHeaderRow } from './DataTableHeaderRow';
+import { DataTableRow } from './DataTableRow';
 import { cx } from '../../styled-system/css';
 import { isComponentOrWrapped } from '../utilities/react/isComponentOrWrapped';
 const Base = forwardRef(({ className, size = 'medium', enableRowSelection = false, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, layout = 'default', wrapperProps, loading = false, emptyStateSlot, children, ...props }, ref) => {
-    const classes = dataGridSlotRecipe({ layout });
-    // Check if DataGrid has any rows by looking for DataGrid.Body with DataGrid.Row children
+    const classes = dataTableSlotRecipe({ layout });
+    // Check if DataTable has any rows by looking for DataTable.Body with DataTable.Row children
     const hasRows = useMemo(() => {
         if (loading)
             return true; // When loading, we don't show empty state
-        const bodyElement = Children.toArray(children).find((child) => isValidElement(child) && isComponentOrWrapped(child, DataGridBody));
+        const bodyElement = Children.toArray(children).find((child) => isValidElement(child) &&
+            (isComponentOrWrapped(child, DataTableBody) ||
+                (typeof child.type !== 'string' &&
+                    'displayName' in child.type &&
+                    child.type.displayName === 'DataGridBody')));
         if (!bodyElement || !isValidElement(bodyElement))
             return false;
         // Type guard to ensure bodyElement has props with children
         if (typeof bodyElement.props === 'object' && bodyElement.props !== null && 'children' in bodyElement.props) {
             const bodyChildren = Children.toArray(bodyElement.props.children);
-            return bodyChildren.some((child) => isValidElement(child) && isComponentOrWrapped(child, DataGridRow));
+            return bodyChildren.some((child) => isValidElement(child) &&
+                (isComponentOrWrapped(child, DataTableRow) ||
+                    (typeof child.type !== 'string' &&
+                        'displayName' in child.type &&
+                        child.type.displayName === 'DataGridRow')));
         }
         return false;
     }, [children, loading]);
     const shouldShowEmptyState = !hasRows && !!emptyStateSlot && !loading;
-    return (_jsx(DataGridProvider, { size: size, enableRowSelection: enableRowSelection, fixedHeader: fixedHeader, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, loading: loading, layout: layout, children: _jsxs("div", { ...wrapperProps, className: cx(classes.wrapper, 'mfui-DataGrid__wrapper', wrapperProps?.className), children: [_jsx("table", { ref: ref, className: cx(classes.table, 'mfui-DataGrid__table', className), ...props, children: children }), shouldShowEmptyState ? (_jsx("div", { className: cx(classes.emptyState, 'mfui-DataGrid__emptyState'), role: "status", "aria-live": "polite", children: emptyStateSlot })) : null] }) }));
+    return (_jsx(DataTableProvider, { size: size, enableRowSelection: enableRowSelection, fixedHeader: fixedHeader, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, loading: loading, layout: layout, children: _jsxs("div", { ...wrapperProps, className: cx(classes.wrapper, 'mfui-DataTable__wrapper', 
+            /* TODO: Remove in v5.0.0 */ 'mfui-DataGrid__wrapper', wrapperProps?.className), children: [_jsx("table", { ref: ref, className: cx(classes.table, 'mfui-DataTable__table', 
+                    /* TODO: Remove in v5.0.0 */ 'mfui-DataGrid__table', className), ...props, children: children }), shouldShowEmptyState ? (_jsx("div", { className: cx(classes.emptyState, 'mfui-DataTable__emptyState', 
+                    /* TODO: Remove in v5.0.0 */ 'mfui-DataGrid__emptyState'), role: "status", "aria-live": "polite", children: emptyStateSlot })) : null] }) }));
 });
-Base.displayName = 'DataGrid';
+Base.displayName = 'DataTable';
 /**
- * The `DataGrid` component.
+ * The `DataTable` component.
  *
  * It renders a `table` element.
  *
- * This component should be used as a wrapper for all DataGrid composition components.
- * The composition components are provided as sub-components of DataGrid.
+ * This component should be used as a wrapper for all DataTable composition components.
+ * The composition components are provided as sub-components of DataTable.
+ *
+ * > **Migration note**: `DataGrid` has been renamed to `DataTable`.
+ * > Please migrate to `DataTable`. `DataGrid` will be removed in a future major version (v5.0.0).
+ *
  * You can use them as follows:
  *
  * @example
  * ```jsx
- * <DataGrid>
- *   <DataGrid.Header>
- *     <DataGrid.HeaderRow>
- *       <DataGrid.HeaderCell>Header 1</DataGrid.HeaderCell>
- *     </DataGrid.HeaderRow>
- *   </DataGrid.Header>
- *   <DataGrid.Body>
- *     <DataGrid.Row>
- *       <DataGrid.Cell>Cell 1</DataGrid.Cell>
- *     </DataGrid.Row>
- *   </DataGrid.Body>
- * </DataGrid>
+ * <DataTable>
+ *   <DataTable.Header>
+ *     <DataTable.HeaderRow>
+ *       <DataTable.HeaderCell>Header 1</DataTable.HeaderCell>
+ *     </DataTable.HeaderRow>
+ *   </DataTable.Header>
+ *   <DataTable.Body>
+ *     <DataTable.Row>
+ *       <DataTable.Cell>Cell 1</DataTable.Cell>
+ *     </DataTable.Row>
+ *   </DataTable.Body>
+ * </DataTable>
  * ```
  */
-export const DataGrid = Object.assign(Base, {
+export const DataTable = Object.assign(Base, {
     /**
-     * The `DataGridBody` component.
-     * This component should be used inside the `DataGrid` component.
+     * The `DataTableBody` component.
+     * This component should be used inside the `DataTable` component.
      *
      * It renders and extends the props of `tbody` element.
      *
-     * **Important**: When wrapping this component with a custom component, you must inherit `DataGridBodyProps` to ensure proper type checking.
+     * **Important**: When wrapping this component with a custom component, you must inherit `DataTableBodyProps` to ensure proper type checking.
      * The parent component uses type checking to identify this component, and wrapping without proper props inheritance may cause issues.
      *
      * **CRITICAL: When wrapping with React hooks, you MUST set displayName:**
      *
      * If you create a wrapper component that uses React hooks (useState, useEffect, etc.),
-     * you must set `displayName = 'DataGridBody'` to prevent React Rules of Hooks violations.
+     * you must set `displayName = 'DataTableBody'` to prevent React Rules of Hooks violations.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
      *
@@ -78,41 +93,45 @@ export const DataGrid = Object.assign(Base, {
      * @example
      *
      * ```tsx
-     * // ✅ Correct: Inherit DataGridBodyProps
-     * const CustomBody = (props: DataGridBodyProps) => <DataGrid.Body {...props} />;
+     * // ✅ Correct: Inherit DataTableBodyProps
+     * const CustomBody = (props: DataTableBodyProps) => <DataTable.Body {...props} />;
      *
-     * // ❌ Incorrect: Not inheriting DataGridBodyProps
-     * const CustomBody = (props: ComponentPropsWithRef<'tbody'>) => <DataGrid.Body {...props} />;
+     * // ❌ Incorrect: Not inheriting DataTableBodyProps
+     * const CustomBody = (props: ComponentPropsWithRef<'tbody'>) => <DataTable.Body {...props} />;
      *
      * // ✅ CORRECT: Wrapper with hooks must set displayName
      * const Body = ({ data }: BodyProps) => {
      *   const { user } = useUser(); // Using hooks
-     *   return <DataGrid.Body>{data.map(...)}</DataGrid.Body>;
+     *   return <DataTable.Body>{data.map(...)}</DataTable.Body>;
      * };
-     * Body.displayName = 'DataGridBody'; // MUST match 'DataGridBody' exactly
+     * Body.displayName = 'DataTableBody'; // MUST match 'DataTableBody' exactly
+     *
+     * // ⚠️ Migration: 'DataGridBody' is still accepted but will stop working in v5.0.0.
+     * // Please update to 'DataTableBody'.
+     * Body.displayName = 'DataGridBody'; // TODO: Migrate to 'DataTableBody'
      *
      * // ❌ WRONG: Don't use custom names
      * Body.displayName = 'MyBody'; // Will cause hooks violation
-     * Body.displayName = 'CustomDataGridBody'; // Will cause hooks violation
+     * Body.displayName = 'CustomDataTableBody'; // Will cause hooks violation
      * ```
      */
-    Body: DataGridBody,
+    Body: DataTableBody,
     /**
-     * The `DataGridCell` component.
-     * This component should be used inside the `DataGrid` component.
+     * The `DataTableCell` component.
+     * This component should be used inside the `DataTable` component.
      *
      * It renders and extends the props of `td` element.
      *
      * When the `onClickCell` prop is provided, the cell is rendered as an interactive cell.
      * Otherwise, the cell is rendered as a default cell.
      *
-     * **Important**: When wrapping this component with a custom component, you must inherit `DataGridCellProps` to ensure proper type checking.
+     * **Important**: When wrapping this component with a custom component, you must inherit `DataTableCellProps` to ensure proper type checking.
      * The parent component uses type checking to identify this component, and wrapping without proper props inheritance may cause issues.
      *
      * **CRITICAL: When wrapping with React hooks, you MUST set displayName:**
      *
      * If you create a wrapper component that uses React hooks (useState, useEffect, etc.),
-     * you must set `displayName = 'DataGridCell'` to prevent React Rules of Hooks violations.
+     * you must set `displayName = 'DataTableCell'` to prevent React Rules of Hooks violations.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
      *
@@ -121,37 +140,37 @@ export const DataGrid = Object.assign(Base, {
      * @example
      *
      * ```tsx
-     * // ✅ Correct: Inherit DataGridCellProps
-     * const CustomCell = (props: DataGridCellProps) => <DataGrid.Cell {...props} />;
+     * // ✅ Correct: Inherit DataTableCellProps
+     * const CustomCell = (props: DataTableCellProps) => <DataTable.Cell {...props} />;
      *
-     * // ❌ Incorrect: Not inheriting DataGridCellProps
-     * const CustomCell = (props: ComponentPropsWithRef<'td'>) => <DataGrid.Cell {...props} />;
+     * // ❌ Incorrect: Not inheriting DataTableCellProps
+     * const CustomCell = (props: ComponentPropsWithRef<'td'>) => <DataTable.Cell {...props} />;
      *
      * // ✅ CORRECT: Wrapper with hooks must set displayName
      * const Cell = ({ value }: CellProps) => {
      *   const { formatter } = useFormatter(); // Using hooks
-     *   return <DataGrid.Cell>{formatter(value)}</DataGrid.Cell>;
+     *   return <DataTable.Cell>{formatter(value)}</DataTable.Cell>;
      * };
-     * Cell.displayName = 'DataGridCell'; // MUST match 'DataGridCell' exactly
+     * Cell.displayName = 'DataTableCell'; // MUST match 'DataTableCell' exactly
      *
      * // ❌ WRONG: Don't use custom names
      * Cell.displayName = 'MyCell'; // Will cause hooks violation
-     * Cell.displayName = 'CustomDataGridCell'; // Will cause hooks violation
+     * Cell.displayName = 'CustomDataTableCell'; // Will cause hooks violation
      * ```
      */
-    Cell: DataGridCell,
+    Cell: DataTableCell,
     /**
-     * The `DataGridHeader` component.
-     * This component should be used inside the `DataGrid` component.
+     * The `DataTableHeader` component.
+     * This component should be used inside the `DataTable` component.
      *
      * It renders and extends the props of `thead` element.
      *
-     * If the `fixedHeader` prop of the `DataGrid` component is `true`, it will be sticky on the top of the table while scrolling.
+     * If the `fixedHeader` prop of the `DataTable` component is `true`, it will be sticky on the top of the table while scrolling.
      *
      * **CRITICAL: When wrapping with React hooks, you MUST set displayName:**
      *
      * If you create a wrapper component that uses React hooks (useState, useEffect, etc.),
-     * you must set `displayName = 'DataGridHeader'` to prevent React Rules of Hooks violations.
+     * you must set `displayName = 'DataTableHeader'` to prevent React Rules of Hooks violations.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
      *
@@ -163,19 +182,19 @@ export const DataGrid = Object.assign(Base, {
      * // ✅ CORRECT: Wrapper with hooks must set displayName
      * const Header = ({ columns }: HeaderProps) => {
      *   const { sortConfig } = useSortConfig(); // Using hooks
-     *   return <DataGrid.Header>{columns.map(...)}</DataGrid.Header>;
+     *   return <DataTable.Header>{columns.map(...)}</DataTable.Header>;
      * };
-     * Header.displayName = 'DataGridHeader'; // MUST match 'DataGridHeader' exactly
+     * Header.displayName = 'DataTableHeader'; // MUST match 'DataTableHeader' exactly
      *
      * // ❌ WRONG: Don't use custom names
      * Header.displayName = 'MyHeader'; // Will cause hooks violation
-     * Header.displayName = 'CustomDataGridHeader'; // Will cause hooks violation
+     * Header.displayName = 'CustomDataTableHeader'; // Will cause hooks violation
      * ```
      */
-    Header: DataGridHeader,
+    Header: DataTableHeader,
     /**
-     * The `DataGridHeaderCell` component.
-     * This component should be used inside the `DataGrid` component.
+     * The `DataTableHeaderCell` component.
+     * This component should be used inside the `DataTable` component.
      *
      * It renders and extends the props of `th` element.
      *
@@ -185,13 +204,13 @@ export const DataGrid = Object.assign(Base, {
      * When the `sortButtonProps.onClick` prop is provided, it renders a sort button.
      * It renders `SortAscending` or `SortDescending` icon based on the `sortOrder` prop.
      *
-     * **Important**: When wrapping this component with a custom component, you must inherit `DataGridHeaderCellProps` to ensure proper type checking.
+     * **Important**: When wrapping this component with a custom component, you must inherit `DataTableHeaderCellProps` to ensure proper type checking.
      * The parent component uses type checking to identify this component, and wrapping without proper props inheritance may cause issues.
      *
      * **CRITICAL: When wrapping with React hooks, you MUST set displayName:**
      *
      * If you create a wrapper component that uses React hooks (useState, useEffect, etc.),
-     * you must set `displayName = 'DataGridHeaderCell'` to prevent React Rules of Hooks violations.
+     * you must set `displayName = 'DataTableHeaderCell'` to prevent React Rules of Hooks violations.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
      *
@@ -200,40 +219,40 @@ export const DataGrid = Object.assign(Base, {
      * @example
      *
      * ```tsx
-     * // ✅ Correct: Inherit DataGridHeaderCellProps
-     * const CustomHeaderCell = (props: DataGridHeaderCellProps) => <DataGrid.HeaderCell {...props} />;
+     * // ✅ Correct: Inherit DataTableHeaderCellProps
+     * const CustomHeaderCell = (props: DataTableHeaderCellProps) => <DataTable.HeaderCell {...props} />;
      *
-     * // ❌ Incorrect: Not inheriting DataGridHeaderCellProps
-     * const CustomHeaderCell = (props: ComponentPropsWithRef<'th'>) => <DataGrid.HeaderCell {...props} />;
+     * // ❌ Incorrect: Not inheriting DataTableHeaderCellProps
+     * const CustomHeaderCell = (props: ComponentPropsWithRef<'th'>) => <DataTable.HeaderCell {...props} />;
      *
      * // ✅ CORRECT: Wrapper with hooks must set displayName
      * const HeaderCell = ({ label }: HeaderCellProps) => {
      *   const { sortOrder } = useSorting(); // Using hooks
-     *   return <DataGrid.HeaderCell sortOrder={sortOrder}>{label}</DataGrid.HeaderCell>;
+     *   return <DataTable.HeaderCell sortOrder={sortOrder}>{label}</DataTable.HeaderCell>;
      * };
-     * HeaderCell.displayName = 'DataGridHeaderCell'; // MUST match 'DataGridHeaderCell' exactly
+     * HeaderCell.displayName = 'DataTableHeaderCell'; // MUST match 'DataTableHeaderCell' exactly
      *
      * // ❌ WRONG: Don't use custom names
      * HeaderCell.displayName = 'MyHeaderCell'; // Will cause hooks violation
      * HeaderCell.displayName = 'CustomCell'; // Will cause hooks violation
      * ```
      */
-    HeaderCell: DataGridHeaderCell,
+    HeaderCell: DataTableHeaderCell,
     /**
-     * The `DataGridHeaderRow` component.
-     * This component should be used inside the `DataGrid` component.
+     * The `DataTableHeaderRow` component.
+     * This component should be used inside the `DataTable` component.
      *
      * It renders and extends the props of `tr` element.
      *
-     * If the `selectable` prop of the `DataGrid` component is `true`, it renders a `Checkbox` component inside the first cell.
+     * If the `selectable` prop of the `DataTable` component is `true`, it renders a `Checkbox` component inside the first cell.
      *
-     * **Important**: When wrapping this component with a custom component, you must inherit `DataGridHeaderRowProps` to ensure proper type checking.
+     * **Important**: When wrapping this component with a custom component, you must inherit `DataTableHeaderRowProps` to ensure proper type checking.
      * The parent component uses type checking to identify this component, and wrapping without proper props inheritance may cause issues.
      *
      * **CRITICAL: When wrapping with React hooks, you MUST set displayName:**
      *
      * If you create a wrapper component that uses React hooks (useState, useEffect, etc.),
-     * you must set `displayName = 'DataGridHeaderRow'` to prevent React Rules of Hooks violations.
+     * you must set `displayName = 'DataTableHeaderRow'` to prevent React Rules of Hooks violations.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
      *
@@ -242,38 +261,38 @@ export const DataGrid = Object.assign(Base, {
      * @example
      *
      * ```tsx
-     * // ✅ Correct: Inherit DataGridHeaderRowProps
-     * const CustomHeaderRow = (props: DataGridHeaderRowProps) => <DataGrid.HeaderRow {...props} />;
+     * // ✅ Correct: Inherit DataTableHeaderRowProps
+     * const CustomHeaderRow = (props: DataTableHeaderRowProps) => <DataTable.HeaderRow {...props} />;
      *
-     * // ❌ Incorrect: Not inheriting DataGridHeaderRowProps
-     * const CustomHeaderRow = (props: ComponentPropsWithRef<'tr'>) => <DataGrid.HeaderRow {...props} />;
+     * // ❌ Incorrect: Not inheriting DataTableHeaderRowProps
+     * const CustomHeaderRow = (props: ComponentPropsWithRef<'tr'>) => <DataTable.HeaderRow {...props} />;
      *
      * // ✅ CORRECT: Wrapper with hooks must set displayName
      * const HeaderRow = ({ columns }: HeaderRowProps) => {
      *   const { visibleColumns } = useColumns(); // Using hooks
-     *   return <DataGrid.HeaderRow>{visibleColumns.map(...)}</DataGrid.HeaderRow>;
+     *   return <DataTable.HeaderRow>{visibleColumns.map(...)}</DataTable.HeaderRow>;
      * };
-     * HeaderRow.displayName = 'DataGridHeaderRow'; // MUST match 'DataGridHeaderRow' exactly
+     * HeaderRow.displayName = 'DataTableHeaderRow'; // MUST match 'DataTableHeaderRow' exactly
      *
      * // ❌ WRONG: Don't use custom names
      * HeaderRow.displayName = 'MyHeaderRow'; // Will cause hooks violation
      * HeaderRow.displayName = 'CustomRow'; // Will cause hooks violation
      * ```
      */
-    HeaderRow: DataGridHeaderRow,
+    HeaderRow: DataTableHeaderRow,
     /**
-     * The `DataGridRow` component.
-     * This component should be used inside the `DataGrid` component.
+     * The `DataTableRow` component.
+     * This component should be used inside the `DataTable` component.
      *
      * It renders and extends the props of `tr` element.
      *
-     * **Important**: When wrapping this component with a custom component, you must inherit `DataGridRowProps` to ensure proper type checking.
+     * **Important**: When wrapping this component with a custom component, you must inherit `DataTableRowProps` to ensure proper type checking.
      * The parent component uses type checking to identify this component, and wrapping without proper props inheritance may cause issues.
      *
      * **CRITICAL: When wrapping with React hooks, you MUST set displayName:**
      *
      * If you create a wrapper component that uses React hooks (useState, useEffect, etc.),
-     * you must set `displayName = 'DataGridRow'` to prevent React Rules of Hooks violations.
+     * you must set `displayName = 'DataTableRow'` to prevent React Rules of Hooks violations.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
      *
@@ -282,23 +301,27 @@ export const DataGrid = Object.assign(Base, {
      * @example
      *
      * ```tsx
-     * // ✅ Correct: Inherit DataGridRowProps
-     * const CustomRow = (props: DataGridRowProps) => <DataGrid.Row {...props} />;
+     * // ✅ Correct: Inherit DataTableRowProps
+     * const CustomRow = (props: DataTableRowProps) => <DataTable.Row {...props} />;
      *
-     * // ❌ Incorrect: Not inheriting DataGridRowProps
-     * const CustomRow = (props: ComponentPropsWithRef<'tr'>) => <DataGrid.Row {...props} />;
+     * // ❌ Incorrect: Not inheriting DataTableRowProps
+     * const CustomRow = (props: ComponentPropsWithRef<'tr'>) => <DataTable.Row {...props} />;
      *
      * // ✅ CORRECT: Wrapper with hooks must set displayName
      * const Row = ({ item }: RowProps) => {
      *   const { isSelected } = useSelection(item.id); // Using hooks
-     *   return <DataGrid.Row selected={isSelected}>...</DataGrid.Row>;
+     *   return <DataTable.Row selected={isSelected}>...</DataTable.Row>;
      * };
-     * Row.displayName = 'DataGridRow'; // MUST match 'DataGridRow' exactly
+     * Row.displayName = 'DataTableRow'; // MUST match 'DataTableRow' exactly
+     *
+     * // ⚠️ Migration: 'DataGridRow' is still accepted but will stop working in v5.0.0.
+     * // Please update to 'DataTableRow'.
+     * Row.displayName = 'DataGridRow'; // TODO: Migrate to 'DataTableRow'
      *
      * // ❌ WRONG: Don't use custom names
      * Row.displayName = 'MyRow'; // Will cause hooks violation
-     * Row.displayName = 'CustomDataGridRow'; // Will cause hooks violation
+     * Row.displayName = 'CustomDataTableRow'; // Will cause hooks violation
      * ```
      */
-    Row: DataGridRow,
+    Row: DataTableRow,
 });

package/dist/src/{DataGrid/DataGrid.types.d.ts → DataTable/DataTable.types.d.ts}

@@ -1,6 +1,6 @@
 import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { type DataGridSize } from './DataGridProvider';
-import { type DataGridSlotRecipeVariant } from '../../styled-system/recipes';
+import { type DataTableSize } from './DataTableProvider';
+import { type DataTableSlotRecipeVariant } from '../../styled-system/recipes';
 /**
  * The type of cell data.
  * Used for determining how to render and align cell content.
@@ -10,20 +10,20 @@ import { type DataGridSlotRecipeVariant } from '../../styled-system/recipes';
  */
 export type CellDataType = 'text' | 'amount';
 /**
- * The props for the `DataGrid` component.
+ * The props for the `DataTable` component.
  *
  * It extends the general attributes of `table` element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
  */
-export type DataGridProps = {
+export type DataTableProps = {
     /**
      * The size of the data header cell and data cell.
      * It accepts `small` or `medium`.
      *
      * @default 'medium'
      */
-    size?: DataGridSize;
+    size?: DataTableSize;
     /**
      * Whether the table rows are selectable.
      * If `true`, the checkbox cell will be added to the first column of header and each row.
@@ -39,18 +39,18 @@ export type DataGridProps = {
      */
     fixedHeader?: boolean;
     /**
-     * The layout of the data grid.
+     * The layout of the data table.
      * It accepts `default` or `edge-to-edge`.
      *
      * @default 'default'
      */
-    layout?: DataGridSlotRecipeVariant['layout'];
+    layout?: DataTableSlotRecipeVariant['layout'];
     /**
      * The index of the column to fix on the left side.
      * It should be started from 0.
      *
      * If the fixed column width might be changed with any interaction, such as disclosure, removing row or translating,
-     * please add `table-layout: fixed` to the DataGrid and specify the width of the each column.
+     * please add `table-layout: fixed` to the DataTable and specify the width of the each column.
      *
      * @default undefined
      */
@@ -60,7 +60,7 @@ export type DataGridProps = {
      * It should be started from 0.
      *
      * If the fixed column width might be changed with any interaction, such as disclosure, removing row or translating,
-     * please add `table-layout: fixed` to the DataGrid and specify the width of the each column.
+     * please add `table-layout: fixed` to the DataTable and specify the width of the each column.
      *
      * @default undefined
      */
@@ -68,7 +68,7 @@ export type DataGridProps = {
     /**
      * The props for the wrapper element of the table.
      *
-     * The DataGrid component is wrapped with a `div` element.
+     * The DataTable component is wrapped with a `div` element.
      *
      * ```tsx
      * <div {...wrapperProps}>
@@ -91,7 +91,7 @@ export type DataGridProps = {
      */
     loading?: boolean;
     /**
-     * The content to display when the data grid has no rows.
+     * The content to display when the data table has no rows.
      * This can be a string message, icon, illustration, or any React component.
      * The content will be displayed below the table header with proper spacing and centering.
      *

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

@@ -0,0 +1 @@
+export declare const DataTableBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { dataTableBodySlotRecipe } from '../../../styled-system/recipes';
+import { cx } from '../../../styled-system/css';
+import { useDataTableContext } from '../DataTableProvider';
+import { DataTableRow } from '../DataTableRow';
+import { DataTableCell } from '../DataTableCell';
+const NUMBER_OF_LOADING_ROWS = 4;
+export const DataTableBody = forwardRef(({ className, ...props }, ref) => {
+    const { numberColumns, loading } = useDataTableContext();
+    const classes = dataTableBodySlotRecipe();
+    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: cx(classes.root, 'mfui-DataTableBody__root', 
+        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridBody__root', className), ...props, ref: ref }));
+});
+DataTableBody.displayName = 'DataTableBody';

package/dist/src/{DataGrid/DataGridBody/DataGridBody.types.d.ts → DataTable/DataTableBody/DataTableBody.types.d.ts}

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithRef } from 'react';
 /**
- * The props for the `DataGridBody` component.
+ * The props for the `DataTableBody` component.
  *
  * It extends the general attributes of `tbody` element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
  */
-export type DataGridBodyProps = ComponentPropsWithRef<'tbody'>;
+export type DataTableBodyProps = ComponentPropsWithRef<'tbody'>;

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

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

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

@@ -0,0 +1 @@
+export { DataTableBody } from './DataTableBody';

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

@@ -0,0 +1,2 @@
+import { type DataTableCellProps } from './DataTableCell.types';
+export declare const DataTableCell: import("react").ForwardRefExoticComponent<Omit<DataTableCellProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/src/{DataGrid/DataGridCell/DataGridCell.js → DataTable/DataTableCell/DataTableCell.js}

@@ -1,24 +1,24 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { DisclosureBasicCollapsed, DisclosureBasicExpanded, DisclosureNestedCollapsed, DisclosureNestedExpanded, } from '@moneyforward/mfui-icons-react';
-import { dataGridCellSlotRecipe } from '../../../styled-system/recipes';
+import { dataTableCellSlotRecipe } from '../../../styled-system/recipes';
 import { FocusIndicator } from '../../FocusIndicator';
 import { Typography } from '../../Typography';
 import { Skeleton } from '../../Skeleton';
-import { useDataGridContext } from '../DataGridProvider';
+import { useDataTableContext } from '../DataTableProvider';
 import { cx } from '../../../styled-system/css';
 import { useFixedColumns } from '../../utilities/dom/useFixedColumns';
 import { handleCheckboxCellClick } from '../utils/handleCheckbox';
 import { mergeRefs } from '../../utilities/dom/mergeRefs';
-export const DataGridCell = forwardRef(({ onClickCell, children, type = 'text', className, isRowHighlighted, disabled = false, depth = 0, columnIndex, disclosureIconProps: nestingIconProps, style, ...props }, ref) => {
-    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection } = useDataGridContext();
+export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text', className, isRowHighlighted, disabled = false, depth = 0, columnIndex, disclosureIconProps: nestingIconProps, style, ...props }, ref) => {
+    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection } = useDataTableContext();
     const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = useFixedColumns({
         enableRowSelection,
         columnIndex,
         leftFixedColumnIndex,
         rightFixedColumnIndex,
     });
-    const classes = dataGridCellSlotRecipe({
+    const classes = dataTableCellSlotRecipe({
         size,
         type,
         rowHighlighted: isRowHighlighted,
@@ -32,23 +32,29 @@ export const DataGridCell = forwardRef(({ onClickCell, children, type = 'text',
     const isCheckboxCell = enableRowSelection && columnIndex === 0;
     const cellContent = (() => {
         if (loading) {
-            return (_jsx("div", { className: cx(classes.skeletonCell, 'mfui-DataGridCell__skeletonCell'), children: _jsx(Skeleton, {}) }));
+            return (_jsx("div", { className: cx(classes.skeletonCell, 'mfui-DataTableCell__skeletonCell', 
+                /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__skeletonCell'), children: _jsx(Skeleton, {}) }));
         }
         if (onClickCell) {
-            return (_jsx(FocusIndicator, { position: "inside", children: _jsx("button", { type: "button", className: cx(classes.interactiveCell, 'mfui-DataGridCell__interactiveCell'), onClick: handleClick, children: _jsx(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }) }));
+            return (_jsx(FocusIndicator, { position: "inside", children: _jsx("button", { type: "button", className: cx(classes.interactiveCell, 'mfui-DataTableCell__interactiveCell', 
+                    /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__interactiveCell'), onClick: handleClick, children: _jsx(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }) }));
         }
         if (isCheckboxCell) {
-            return (_jsx(FocusIndicator, { position: "inside", children: _jsx("div", { className: cx(classes.defaultCell, 'mfui-DataGridCell__defaultCell'), ...(disabled && { 'data-disabled': true, 'aria-disabled': true }), onClick: disabled ? undefined : handleCheckboxCellClick, children: _jsx(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }) }));
+            return (_jsx(FocusIndicator, { position: "inside", children: _jsx("div", { className: cx(classes.defaultCell, 'mfui-DataTableCell__defaultCell', 
+                    /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__defaultCell'), ...(disabled && { 'data-disabled': true, 'aria-disabled': true }), onClick: disabled ? undefined : handleCheckboxCellClick, children: _jsx(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }) }));
         }
-        return (_jsx("div", { className: cx(classes.defaultCell, 'mfui-DataGridCell__defaultCell'), children: _jsx(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }));
+        return (_jsx("div", { className: cx(classes.defaultCell, 'mfui-DataTableCell__defaultCell', 
+            /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__defaultCell'), children: _jsx(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }));
     })();
-    return (_jsx("td", { ref: mergeRefs(ref, cellRef), className: cx(classes.root, 'mfui-DataGridCell__root', className), style: { ...style, ...fixedPositionStyles, zIndex: isFixedColumn ? 1 : undefined }, ...props, children: cellContent }));
+    return (_jsx("td", { ref: mergeRefs(ref, cellRef), 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 }));
 });
-DataGridCell.displayName = 'DataGridCell';
+DataTableCell.displayName = 'DataTableCell';
 function CellContent({ children, depth, disclosureIconProps, classes, }) {
     const isStringChild = typeof children === 'string';
     return (_jsxs(_Fragment, { children: [depth > 0
-                ? Array.from({ length: depth }).map((_, index) => (_jsx("div", { className: cx(classes.disclosureSpacing, 'mfui-DataGridCell__disclosureSpacing') }, index)))
+                ? Array.from({ length: depth }).map((_, index) => (_jsx("div", { className: cx(classes.disclosureSpacing, 'mfui-DataTableCell__disclosureSpacing', 
+                    /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__disclosureSpacing') }, index)))
                 : null, _jsx(DisclosureIcon, { classes: classes, disclosureIconProps: disclosureIconProps }), isStringChild ? _jsx(Typography, { variant: "body", children: children }) : children] }));
 }
 function DisclosureIcon({ disclosureIconProps, classes, }) {
@@ -61,5 +67,6 @@ function DisclosureIcon({ disclosureIconProps, classes, }) {
         }
         return disclosureIconProps.isOpen ? _jsx(DisclosureNestedExpanded, {}) : _jsx(DisclosureNestedCollapsed, {});
     })();
-    return (_jsx("div", { className: cx(classes.disclosureIconWrapper, 'mfui-DataGridCell__disclosureIconWrapper'), children: disclosureIcon }));
+    return (_jsx("div", { className: cx(classes.disclosureIconWrapper, 'mfui-DataTableCell__disclosureIconWrapper', 
+        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__disclosureIconWrapper'), children: disclosureIcon }));
 }