@moneyforward/mfui-components 2.48.1

package/dist/cjs/src/DataGrid/DataGrid.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DataGrid/DataGridBody/DataGridBody.d.ts

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

package/dist/cjs/src/DataGrid/DataGridBody/DataGridBody.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridBody = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const recipes_1 = require("../../../styled-system/recipes");
+const css_1 = require("../../../styled-system/css");
+const DataGridProvider_1 = require("../DataGridProvider");
+const DataGridRow_1 = require("../DataGridRow");
+const DataGridCell_1 = require("../DataGridCell");
+const NUMBER_OF_LOADING_ROWS = 4;
+exports.DataGridBody = (0, react_1.forwardRef)(({ className, ...props }, ref) => {
+    const { numberColumns, loading } = (0, DataGridProvider_1.useDataGridContext)();
+    const classes = (0, recipes_1.dataGridBodySlotRecipe)();
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)("tbody", { className: (0, css_1.cx)(classes.root, 'mfui-DataGridBody__root', className), ...props, ref: ref, children: Array.from({ length: NUMBER_OF_LOADING_ROWS }).map((_, rowIndex) => ((0, jsx_runtime_1.jsx)(DataGridRow_1.DataGridRow, { children: Array.from({ length: numberColumns }).map((_, colIndex) => ((0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, {}, colIndex))) }, rowIndex))) }));
+    }
+    return (0, jsx_runtime_1.jsx)("tbody", { className: (0, css_1.cx)(classes.root, 'mfui-DataGridBody__root', className), ...props, ref: ref });
+});
+exports.DataGridBody.displayName = 'DataGridBody';

package/dist/cjs/src/DataGrid/DataGridBody/DataGridBody.types.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithRef } from 'react';
+/**
+ * The props for the `DataGridBody` 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'>;

package/dist/cjs/src/DataGrid/DataGridBody/DataGridBody.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/cjs/src/DataGrid/DataGridBody/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridBody = void 0;
+var DataGridBody_1 = require("./DataGridBody");
+Object.defineProperty(exports, "DataGridBody", { enumerable: true, get: function () { return DataGridBody_1.DataGridBody; } });

package/dist/cjs/src/DataGrid/DataGridCell/DataGridCell.d.ts

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

package/dist/cjs/src/DataGrid/DataGridCell/DataGridCell.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridCell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const recipes_1 = require("../../../styled-system/recipes");
+const FocusIndicator_1 = require("../../FocusIndicator");
+const Typography_1 = require("../../Typography");
+const Skeleton_1 = require("../../Skeleton");
+const DataGridProvider_1 = require("../DataGridProvider");
+const css_1 = require("../../../styled-system/css");
+const useFixedColumns_1 = require("../../utilities/dom/useFixedColumns");
+const handleCheckbox_1 = require("../utils/handleCheckbox");
+const mergeRefs_1 = require("../../utilities/dom/mergeRefs");
+exports.DataGridCell = (0, react_1.forwardRef)(({ onClickCell, children, type = 'text', className, isRowHighlighted, disabled = false, depth = 0, columnIndex, disclosureIconProps: nestingIconProps, style, ...props }, ref) => {
+    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection } = (0, DataGridProvider_1.useDataGridContext)();
+    const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = (0, useFixedColumns_1.useFixedColumns)({
+        enableRowSelection,
+        columnIndex,
+        leftFixedColumnIndex,
+        rightFixedColumnIndex,
+    });
+    const classes = (0, recipes_1.dataGridCellSlotRecipe)({
+        size,
+        type,
+        rowHighlighted: isRowHighlighted,
+        fixedColumn: isFixedColumn,
+        edgeFixedColumn: isEdgeFixedColumn,
+        isCheckboxCell: enableRowSelection && columnIndex === 0,
+    });
+    const handleClick = (event) => {
+        onClickCell?.(event);
+    };
+    const isCheckboxCell = enableRowSelection && columnIndex === 0;
+    const cellContent = (() => {
+        if (loading) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.skeletonCell, 'mfui-DataGridCell__skeletonCell'), children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {}) }));
+        }
+        if (onClickCell) {
+            return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, css_1.cx)(classes.interactiveCell, 'mfui-DataGridCell__interactiveCell'), onClick: handleClick, children: (0, jsx_runtime_1.jsx)(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }) }));
+        }
+        if (isCheckboxCell) {
+            return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.defaultCell, 'mfui-DataGridCell__defaultCell'), ...(disabled && { 'data-disabled': true, 'aria-disabled': true }), onClick: disabled ? undefined : handleCheckbox_1.handleCheckboxCellClick, children: (0, jsx_runtime_1.jsx)(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.defaultCell, 'mfui-DataGridCell__defaultCell'), children: (0, jsx_runtime_1.jsx)(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }));
+    })();
+    return ((0, jsx_runtime_1.jsx)("td", { ref: (0, mergeRefs_1.mergeRefs)(ref, cellRef), className: (0, css_1.cx)(classes.root, 'mfui-DataGridCell__root', className), style: { ...style, ...fixedPositionStyles, zIndex: isFixedColumn ? 1 : undefined }, ...props, children: cellContent }));
+});
+exports.DataGridCell.displayName = 'DataGridCell';
+function CellContent({ children, depth, disclosureIconProps, classes, }) {
+    const isStringChild = typeof children === 'string';
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [depth > 0
+                ? Array.from({ length: depth }).map((_, index) => ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.disclosureSpacing, 'mfui-DataGridCell__disclosureSpacing') }, index)))
+                : null, (0, jsx_runtime_1.jsx)(DisclosureIcon, { classes: classes, disclosureIconProps: disclosureIconProps }), isStringChild ? (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body", children: children }) : children] }));
+}
+function DisclosureIcon({ disclosureIconProps, classes, }) {
+    if (!disclosureIconProps) {
+        return null;
+    }
+    const disclosureIcon = (() => {
+        if (disclosureIconProps.type === 'basic') {
+            return disclosureIconProps.isOpen ? (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureBasicExpanded, {}) : (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureBasicCollapsed, {});
+        }
+        return disclosureIconProps.isOpen ? (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureNestedExpanded, {}) : (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureNestedCollapsed, {});
+    })();
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.disclosureIconWrapper, 'mfui-DataGridCell__disclosureIconWrapper'), children: disclosureIcon }));
+}

package/dist/cjs/src/DataGrid/DataGridCell/DataGridCell.types.d.ts

@@ -0,0 +1,96 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type CellDataType } from '../DataGrid.types';
+/**
+ * The props for the `DataGridCell` component.
+ *
+ * It extends the general attributes of `td` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+ */
+export type DataGridCellProps = {
+    /**
+     * The type of the cell data.
+     * Used for determining how to align the cell content.
+     *
+     * - `text`: Left-aligned text content (default)
+     * - `amount`: Right-aligned numeric content for financial data columns
+     *
+     * @default 'text'
+     *
+     * @example
+     * ```tsx
+     * // For standard text columns
+     * <DataGrid.Cell>John Doe</DataGrid.Cell>
+     *
+     * // For amount/balance columns
+     * <DataGrid.Cell type="amount">¥125,000</DataGrid.Cell>
+     * ```
+     */
+    type?: CellDataType;
+    /**
+     * The callback function that is called when the cell is clicked.
+     * If provided, the cell is rendered as an interactive cell.
+     *
+     * @default undefined
+     */
+    onClickCell?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * **Do not pass this prop manually.**
+     *
+     * Indicates whether the row containing this cell is highlighted.
+     * This prop is automatically passed down from the DataGridRow component.
+     *
+     * @default false
+     */
+    isRowHighlighted?: boolean;
+    /**
+     * **Do not pass this prop manually.**
+     *
+     * Indicates whether the cell is disabled.
+     * This prop is automatically passed down from the DataGridRow component.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The depth of the DataGrid.
+     * padding-left is applied based on the depth.
+     *
+     * @default 0
+     */
+    depth?: number;
+    /**
+     * **Do not pass this prop manually.**
+     *
+     * The index of this cell in its row.
+     * Used for determining if the cell should be fixed.
+     *
+     * @default undefined
+     */
+    columnIndex?: number;
+    /**
+     * The type of the disclosure icon.
+     * This props is used to indicate the row can be expanded or collapsed.
+     *
+     * If provided, the dropdown icon is displayed in the cell.
+     * If not provided, the dropdown icon is not displayed.
+     *
+     * @default undefined
+     */
+    disclosureIconProps?: {
+        /**
+         * The type of the disclosure icon.
+         * If 'basic', the icon is a DisclosureBasicExpanded.
+         * If 'nested', the icon is a DisclosureNestedExpanded.
+         *
+         * @default 'basic'
+         */
+        type?: 'basic' | 'nested';
+        /**
+         * Whether the dropdown icon is open.
+         *
+         * @default false
+         */
+        isOpen?: boolean;
+    };
+} & ComponentPropsWithRef<'td'>;

package/dist/cjs/src/DataGrid/DataGridCell/DataGridCell.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/cjs/src/DataGrid/DataGridCell/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridCell = void 0;
+var DataGridCell_1 = require("./DataGridCell");
+Object.defineProperty(exports, "DataGridCell", { enumerable: true, get: function () { return DataGridCell_1.DataGridCell; } });

package/dist/cjs/src/DataGrid/DataGridHeader/DataGridHeader.d.ts

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

package/dist/cjs/src/DataGrid/DataGridHeader/DataGridHeader.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const recipes_1 = require("../../../styled-system/recipes");
+const DataGridProvider_1 = require("../DataGridProvider");
+const css_1 = require("../../../styled-system/css");
+exports.DataGridHeader = (0, react_1.forwardRef)(({ children, className, ...props }, ref) => {
+    const { fixedHeader } = (0, DataGridProvider_1.useDataGridContext)();
+    const classes = (0, recipes_1.dataGridHeaderSlotRecipe)({ fixedHeader });
+    return ((0, jsx_runtime_1.jsx)("thead", { className: (0, css_1.cx)(classes.root, 'mfui-DataGridHeader__root', className), ...props, ref: ref, children: children }));
+});
+exports.DataGridHeader.displayName = 'DataGridHeader';

package/dist/cjs/src/DataGrid/DataGridHeader/DataGridHeader.types.d.ts

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

package/dist/cjs/src/DataGrid/DataGridHeader/DataGridHeader.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/cjs/src/DataGrid/DataGridHeader/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridHeader = void 0;
+var DataGridHeader_1 = require("./DataGridHeader");
+Object.defineProperty(exports, "DataGridHeader", { enumerable: true, get: function () { return DataGridHeader_1.DataGridHeader; } });

package/dist/cjs/src/DataGrid/DataGridHeaderCell/DataGridHeaderCell.d.ts

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

package/dist/cjs/src/DataGrid/DataGridHeaderCell/DataGridHeaderCell.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridHeaderCell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const react_1 = require("react");
+const FocusIndicator_1 = require("../../FocusIndicator");
+const recipes_1 = require("../../../styled-system/recipes");
+const Typography_1 = require("../../Typography");
+const DataGridProvider_1 = require("../DataGridProvider");
+const css_1 = require("../../../styled-system/css");
+const useFixedColumns_1 = require("../../utilities/dom/useFixedColumns");
+const handleCheckbox_1 = require("../utils/handleCheckbox");
+const mergeRefs_1 = require("../../utilities/dom/mergeRefs");
+exports.DataGridHeaderCell = (0, react_1.forwardRef)(({ children, type = 'text', sortButtonProps, sortOrder, ascendingIconProps, descendingIconProps, unsortedIconProps, className, columnIndex, disabled = false, ...props }, ref) => {
+    const { size, leftFixedColumnIndex, rightFixedColumnIndex, enableRowSelection } = (0, DataGridProvider_1.useDataGridContext)();
+    const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = (0, useFixedColumns_1.useFixedColumns)({
+        enableRowSelection,
+        columnIndex,
+        leftFixedColumnIndex,
+        rightFixedColumnIndex,
+    });
+    const classes = (0, recipes_1.dataGridHeaderCellSlotRecipe)({
+        size,
+        type,
+        fixedColumn: isFixedColumn,
+        edgeFixedColumn: isEdgeFixedColumn,
+        isCheckboxCell: enableRowSelection && columnIndex === 0,
+    });
+    const isCheckboxCell = enableRowSelection && columnIndex === 0;
+    const isStringChild = typeof children === 'string';
+    const sortIcon = (() => {
+        if (!sortOrder) {
+            return ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.SortUnsorted, { className: (0, css_1.cx)(classes.unsortedIcon, 'mfui-DataGridHeaderCell__unsortedIcon'), "aria-label": unsortedIconProps?.['aria-label'] ?? '並び替えを解除' }));
+        }
+        if (sortOrder === 'ascending') {
+            return ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.SortAscending, { className: (0, css_1.cx)(classes.sortIcon, 'mfui-DataGridHeaderCell__sortIcon'), "aria-label": ascendingIconProps?.['aria-label'] ?? '昇順で並び替え' }));
+        }
+        return ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.SortDescending, { className: (0, css_1.cx)(classes.sortIcon, 'mfui-DataGridHeaderCell__sortIcon'), "aria-label": descendingIconProps?.['aria-label'] ?? '降順で並び替え' }));
+    })();
+    const handleClickSortButton = sortButtonProps?.onClick;
+    const cellContent = (() => {
+        if (sortButtonProps?.onClick) {
+            return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, css_1.cx)(classes.sortButton, 'mfui-DataGridHeaderCell__sortButton'), onClick: handleClickSortButton, children: [isStringChild ? (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "strongBody", children: children }) : children, (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.sortIconContainer, 'mfui-DataGridHeaderCell__sortIconContainer'), children: sortIcon })] }) }));
+        }
+        if (isCheckboxCell) {
+            return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.headerCell, 'mfui-DataGridHeaderCell__headerCell'), ...(disabled && { 'data-disabled': true, 'aria-disabled': true }), onClick: disabled ? undefined : handleCheckbox_1.handleCheckboxCellClick, children: isStringChild ? (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "strongBody", children: children }) : children }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.headerCell, 'mfui-DataGridHeaderCell__headerCell'), children: isStringChild ? (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "strongBody", children: children }) : children }));
+    })();
+    return ((0, jsx_runtime_1.jsx)("th", { ref: (0, mergeRefs_1.mergeRefs)(ref, cellRef), className: (0, css_1.cx)(classes.root, 'mfui-DataGridHeaderCell__root', className), "aria-sort": sortOrder, style: fixedPositionStyles, ...props, children: cellContent }));
+});
+exports.DataGridHeaderCell.displayName = 'DataGridHeaderCell';

package/dist/cjs/src/DataGrid/DataGridHeaderCell/DataGridHeaderCell.types.d.ts

@@ -0,0 +1,82 @@
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef } from 'react';
+import { type CellDataType } from '../DataGrid.types';
+/**
+ * The props for the `DataGridHeaderCell` component.
+ *
+ * It extends the general attributes of `th` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+ */
+export type DataGridHeaderCellProps = {
+    /**
+     * The type of the cell data.
+     * Used for determining how to align the header cell content.
+     *
+     * - `text`: Left-aligned text content (default)
+     * - `amount`: Right-aligned numeric content for financial data columns
+     *
+     * @default 'text'
+     *
+     * @example
+     * ```tsx
+     * // For standard text columns
+     * <DataGrid.HeaderCell>Account Name</DataGrid.HeaderCell>
+     *
+     * // For amount/balance columns
+     * <DataGrid.HeaderCell type="amount">Balance</DataGrid.HeaderCell>
+     * ```
+     */
+    type?: CellDataType;
+    /**
+     * The properties for the ascending icon.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the ascending icon. default is '昇順で並び替え'.
+     */
+    ascendingIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
+    /**
+     * The properties for the descending icon.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the descending icon. default is '降順で並び替え'.
+     */
+    descendingIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
+    /**
+     * The properties for the unsorted icon.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the unsorted icon. default is '並び替えを解除'.
+     */
+    unsortedIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
+    /**
+     * The properties for the sort button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property onClick - The callback function that is called when the sort button is clicked.
+     */
+    sortButtonProps?: Pick<ComponentPropsWithoutRef<'button'>, 'onClick'>;
+    /**
+     * The sort order of the column.
+     *
+     * @default undefined
+     */
+    sortOrder?: 'ascending' | 'descending';
+    /**
+     * **Do not pass this prop manually.**
+     *
+     * The index of this cell in its row.
+     * Used for determining if the cell should be fixed.
+     *
+     * @default undefined
+     */
+    columnIndex?: number;
+    /**
+     * **Do not pass this prop manually.**
+     *
+     * Indicates whether the cell is disabled.
+     * This prop is automatically passed down from the DataGridHeaderRow component.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+} & ComponentPropsWithRef<'th'>;

package/dist/cjs/src/DataGrid/DataGridHeaderCell/DataGridHeaderCell.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/cjs/src/DataGrid/DataGridHeaderCell/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridHeaderCell = void 0;
+var DataGridHeaderCell_1 = require("./DataGridHeaderCell");
+Object.defineProperty(exports, "DataGridHeaderCell", { enumerable: true, get: function () { return DataGridHeaderCell_1.DataGridHeaderCell; } });

package/dist/cjs/src/DataGrid/DataGridHeaderRow/DataGridHeaderRow.d.ts

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

package/dist/cjs/src/DataGrid/DataGridHeaderRow/DataGridHeaderRow.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridHeaderRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const recipes_1 = require("../../../styled-system/recipes");
+const DataGridProvider_1 = require("../DataGridProvider");
+const DataGridHeaderCell_1 = require("../DataGridHeaderCell");
+const Checkbox_1 = require("../../Checkbox");
+const css_1 = require("../../../styled-system/css");
+const isComponentOrWrapped_1 = require("../../utilities/react/isComponentOrWrapped");
+exports.DataGridHeaderRow = (0, react_1.forwardRef)(({ children, checkboxProps, className, ...props }, ref) => {
+    const { enableRowSelection, setNumberColumns } = (0, DataGridProvider_1.useDataGridContext)();
+    const classes = (0, recipes_1.dataGridHeaderRowSlotRecipe)();
+    // Count the number of header cells
+    (0, react_1.useEffect)(() => {
+        const headerCells = react_1.Children.toArray(children).filter((child) => (0, react_1.isValidElement)(child) && (0, isComponentOrWrapped_1.isComponentOrWrapped)(child, DataGridHeaderCell_1.DataGridHeaderCell));
+        setNumberColumns(headerCells.length);
+    }, [children, enableRowSelection, setNumberColumns]);
+    return ((0, jsx_runtime_1.jsxs)("tr", { className: (0, css_1.cx)(classes.root, 'mfui-DataGridHeaderRow__root', className), ...props, ref: ref, children: [enableRowSelection ? ((0, jsx_runtime_1.jsx)(DataGridHeaderCell_1.DataGridHeaderCell, { columnIndex: 0, disabled: checkboxProps?.disabled, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: checkboxProps?.checked, indeterminate: checkboxProps?.indeterminate, "aria-label": checkboxProps?.['aria-label'] ?? 'すべての行を選択', disabled: checkboxProps?.disabled, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick }) })) : null, react_1.Children.map(children, (child, index) => {
+                if (!(0, react_1.isValidElement)(child)) {
+                    return child;
+                }
+                // Check if the component is DataGridHeaderCell or wraps DataGridHeaderCell
+                if ((0, isComponentOrWrapped_1.isComponentOrWrapped)(child, DataGridHeaderCell_1.DataGridHeaderCell)) {
+                    // Add selectable offset to columnIndex if selectable is true
+                    const columnIndex = enableRowSelection ? index + 1 : index;
+                    return (0, react_1.cloneElement)(child, { columnIndex });
+                }
+                return child;
+            })] }));
+});
+exports.DataGridHeaderRow.displayName = 'DataGridHeaderRow';

package/dist/cjs/src/DataGrid/DataGridHeaderRow/DataGridHeaderRow.types.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type CheckboxProps } from '../../Checkbox';
+/**
+ * The props for the `DataGridHeaderRow` component.
+ *
+ * It extends the general attributes of `tr` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+ */
+export type DataGridHeaderRowProps = {
+    /**
+     * The properties for the checkbox.
+     * This prop is available when the `enableRowSelection` prop of the `DataGrid` component is `true`.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the checkbox. default is 'すべての行を選択'.
+     *
+     * @property checked - The checked state of the checkbox.
+     *
+     * @property indeterminate - Whether the checkbox is in indeterminate state.
+     *
+     * @property onChange - A handler when the checkbox is clicked.
+     *
+     * @property onClick - The handler called when the checkbox is clicked (for event propagation control).
+     *
+     * @property disabled - Whether the checkbox is disabled.
+     */
+    checkboxProps?: Pick<CheckboxProps, 'aria-label' | 'checked' | 'indeterminate' | 'onChange' | 'disabled' | 'onClick'>;
+} & ComponentPropsWithRef<'tr'>;

package/dist/cjs/src/DataGrid/DataGridHeaderRow/DataGridHeaderRow.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/cjs/src/DataGrid/DataGridHeaderRow/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridHeaderRow = void 0;
+var DataGridHeaderRow_1 = require("./DataGridHeaderRow");
+Object.defineProperty(exports, "DataGridHeaderRow", { enumerable: true, get: function () { return DataGridHeaderRow_1.DataGridHeaderRow; } });

package/dist/cjs/src/DataGrid/DataGridProvider.d.ts

@@ -0,0 +1,27 @@
+import { type PropsWithChildren } from 'react';
+import { type DataGridProps } from './DataGrid.types';
+export type DataGridSize = 'small' | 'medium';
+/**
+ * The props for the `DataGridContext` component.
+ */
+export type DataGridContextProps = Pick<DataGridProps, 'size' | 'enableRowSelection' | 'fixedHeader' | 'leftFixedColumnIndex' | 'rightFixedColumnIndex' | 'loading' | 'layout'>;
+export type DataGridProviderValues = {
+    numberColumns: number;
+    setNumberColumns: (number: number) => void;
+} & DataGridContextProps;
+/**
+ * The context for the `DataGrid` component.
+ *
+ * This should only be used in DataGrid component.
+ */
+export declare const DataGridContext: import("react").Context<DataGridProviderValues>;
+/**
+ * The hook to use the `DataGridContext`.
+ */
+export declare const useDataGridContext: () => DataGridProviderValues;
+/**
+ * The provider for the `DataGridContext`.
+ *
+ * This should only be used in DataGrid component.
+ */
+export declare function DataGridProvider({ children, size, enableRowSelection, fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout, }: PropsWithChildren<DataGridContextProps>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DataGrid/DataGridProvider.js

@@ -0,0 +1,58 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataGridContext = exports.DataGridContext = void 0;
+exports.DataGridProvider = DataGridProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/**
+ * The context for the `DataGrid` component.
+ *
+ * This should only be used in DataGrid component.
+ */
+exports.DataGridContext = (0, react_1.createContext)({
+    size: 'medium',
+    enableRowSelection: false,
+    fixedHeader: false,
+    leftFixedColumnIndex: undefined,
+    rightFixedColumnIndex: undefined,
+    layout: 'default',
+    numberColumns: 0,
+    setNumberColumns: () => {
+        // Do nothing
+    },
+});
+/**
+ * The hook to use the `DataGridContext`.
+ */
+const useDataGridContext = () => (0, react_1.useContext)(exports.DataGridContext);
+exports.useDataGridContext = useDataGridContext;
+/**
+ * The provider for the `DataGridContext`.
+ *
+ * This should only be used in DataGrid component.
+ */
+function DataGridProvider({ children, size = 'medium', enableRowSelection = false, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout = 'default', }) {
+    const [numberColumns, setNumberColumns] = (0, react_1.useState)(0);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        size,
+        enableRowSelection,
+        fixedHeader,
+        leftFixedColumnIndex,
+        rightFixedColumnIndex,
+        loading,
+        layout,
+        numberColumns,
+        setNumberColumns,
+    }), [
+        size,
+        enableRowSelection,
+        fixedHeader,
+        leftFixedColumnIndex,
+        rightFixedColumnIndex,
+        loading,
+        layout,
+        numberColumns,
+    ]);
+    return (0, jsx_runtime_1.jsx)(exports.DataGridContext.Provider, { value: contextValue, children: children });
+}

package/dist/cjs/src/DataGrid/DataGridRow/DataGridRow.d.ts

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