@moneyforward/mfui-components 3.6.0 → 3.8.0

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

@@ -1,8 +1,16 @@
-export { DataGrid } from './DataGrid';
-export type { DataGridProps } from './DataGrid.types';
-export type { DataGridBodyProps } from './DataGridBody';
-export type { DataGridCellProps } from './DataGridCell';
-export type { DataGridHeaderProps } from './DataGridHeader';
-export type { DataGridHeaderCellProps } from './DataGridHeaderCell';
-export type { DataGridHeaderRowProps } from './DataGridHeaderRow';
-export type { DataGridRowProps } from './DataGridRow';
+/**
+ * DataGrid backward compatibility re-exports.
+ *
+ * DataGrid has been renamed to DataTable.
+ * Please migrate to DataTable. DataGrid will be removed in a future major version (v5.0.0).
+ *
+ * @see DataTable
+ */
+export { DataTable as DataGrid } from '../DataTable';
+export type { DataTableProps as DataGridProps } from '../DataTable';
+export type { DataTableBodyProps as DataGridBodyProps } from '../DataTable';
+export type { DataTableCellProps as DataGridCellProps } from '../DataTable';
+export type { DataTableHeaderProps as DataGridHeaderProps } from '../DataTable';
+export type { DataTableHeaderCellProps as DataGridHeaderCellProps } from '../DataTable';
+export type { DataTableHeaderRowProps as DataGridHeaderRowProps } from '../DataTable';
+export type { DataTableRowProps as DataGridRowProps } from '../DataTable';

package/dist/src/DataGrid/index.js

@@ -1 +1,9 @@
-export { DataGrid } from './DataGrid';
+/**
+ * DataGrid backward compatibility re-exports.
+ *
+ * DataGrid has been renamed to DataTable.
+ * Please migrate to DataTable. DataGrid will be removed in a future major version (v5.0.0).
+ *
+ * @see DataTable
+ */
+export { DataTable as DataGrid } from '../DataTable';

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

@@ -1,43 +1,47 @@
-import { type DataGridProps } from './DataGrid.types';
+import { type DataTableProps } from './DataTable.types';
 /**
- * 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 declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<DataGridProps, "ref"> & import("react").RefAttributes<HTMLTableElement>> & {
+export declare const DataTable: import("react").ForwardRefExoticComponent<Omit<DataTableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>> & {
     /**
-     * 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
      *
@@ -46,41 +50,45 @@ export declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<Da
      * @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: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
     /**
-     * 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
      *
@@ -89,37 +97,37 @@ export declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<Da
      * @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: import("react").ForwardRefExoticComponent<Omit<import("./DataGridCell").DataGridCellProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
+    Cell: import("react").ForwardRefExoticComponent<Omit<import("./DataTableCell").DataTableCellProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
     /**
-     * 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
      *
@@ -131,19 +139,19 @@ export declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<Da
      * // ✅ 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: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
     /**
-     * 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.
      *
@@ -153,13 +161,13 @@ export declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<Da
      * 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
      *
@@ -168,40 +176,40 @@ export declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<Da
      * @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: import("react").ForwardRefExoticComponent<Omit<import("./DataGridHeaderCell").DataGridHeaderCellProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
+    HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("./DataTableHeaderCell").DataTableHeaderCellProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
     /**
-     * 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
      *
@@ -210,38 +218,38 @@ export declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<Da
      * @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: import("react").ForwardRefExoticComponent<Omit<import("./DataGridHeaderRow").DataGridHeaderRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
+    HeaderRow: import("react").ForwardRefExoticComponent<Omit<import("./DataTableHeaderRow").DataTableHeaderRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
     /**
-     * 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
      *
@@ -250,23 +258,27 @@ export declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<Da
      * @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: import("react").ForwardRefExoticComponent<Omit<import("./DataGridRow").DataGridRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
+    Row: import("react").ForwardRefExoticComponent<Omit<import("./DataTableRow").DataTableRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
 };