@moneyforward/mfui-components 2.48.2 → 3.1.0

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

@@ -1,307 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataGrid = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const DataGridProvider_1 = require("./DataGridProvider");
-const recipes_1 = require("../../styled-system/recipes");
-const DataGridBody_1 = require("./DataGridBody");
-const DataGridCell_1 = require("./DataGridCell");
-const DataGridHeader_1 = require("./DataGridHeader");
-const DataGridHeaderCell_1 = require("./DataGridHeaderCell");
-const DataGridHeaderRow_1 = require("./DataGridHeaderRow");
-const DataGridRow_1 = require("./DataGridRow");
-const css_1 = require("../../styled-system/css");
-const isComponentOrWrapped_1 = require("../utilities/react/isComponentOrWrapped");
-const Base = (0, react_1.forwardRef)(({ className, size = 'medium', enableRowSelection = false, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, layout = 'default', wrapperProps, loading = false, emptyStateSlot, children, ...props }, ref) => {
-    const classes = (0, recipes_1.dataGridSlotRecipe)({ layout });
-    // Check if DataGrid has any rows by looking for DataGrid.Body with DataGrid.Row children
-    const hasRows = (0, react_1.useMemo)(() => {
-        if (loading)
-            return true; // When loading, we don't show empty state
-        const bodyElement = react_1.Children.toArray(children).find((child) => (0, react_1.isValidElement)(child) && (0, isComponentOrWrapped_1.isComponentOrWrapped)(child, DataGridBody_1.DataGridBody));
-        if (!bodyElement || !(0, react_1.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 = react_1.Children.toArray(bodyElement.props.children);
-            return bodyChildren.some((child) => (0, react_1.isValidElement)(child) && (0, isComponentOrWrapped_1.isComponentOrWrapped)(child, DataGridRow_1.DataGridRow));
-        }
-        return false;
-    }, [children, loading]);
-    const shouldShowEmptyState = !hasRows && !!emptyStateSlot && !loading;
-    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { size: size, enableRowSelection: enableRowSelection, fixedHeader: fixedHeader, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, loading: loading, layout: layout, children: (0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, className: (0, css_1.cx)(classes.wrapper, 'mfui-DataGrid__wrapper', wrapperProps?.className), children: [(0, jsx_runtime_1.jsx)("table", { ref: ref, className: (0, css_1.cx)(classes.table, 'mfui-DataGrid__table', className), ...props, children: children }), shouldShowEmptyState ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.emptyState, 'mfui-DataGrid__emptyState'), role: "status", "aria-live": "polite", children: emptyStateSlot })) : null] }) }));
-});
-Base.displayName = 'DataGrid';
-/**
- * The `DataGrid` 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.
- * 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>
- * ```
- */
-exports.DataGrid = Object.assign(Base, {
-    /**
-     * The `DataGridBody` component.
-     * This component should be used inside the `DataGrid` 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.
-     * 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.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
-     *
-     * @see https://react.dev/reference/rules/rules-of-hooks
-     *
-     * @example
-     *
-     * ```tsx
-     * // ✅ Correct: Inherit DataGridBodyProps
-     * const CustomBody = (props: DataGridBodyProps) => <DataGrid.Body {...props} />;
-     *
-     * // ❌ Incorrect: Not inheriting DataGridBodyProps
-     * const CustomBody = (props: ComponentPropsWithRef<'tbody'>) => <DataGrid.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>;
-     * };
-     * Body.displayName = 'DataGridBody'; // MUST match 'DataGridBody' exactly
-     *
-     * // ❌ WRONG: Don't use custom names
-     * Body.displayName = 'MyBody'; // Will cause hooks violation
-     * Body.displayName = 'CustomDataGridBody'; // Will cause hooks violation
-     * ```
-     */
-    Body: DataGridBody_1.DataGridBody,
-    /**
-     * The `DataGridCell` component.
-     * This component should be used inside the `DataGrid` 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.
-     * 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.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
-     *
-     * @see https://react.dev/reference/rules/rules-of-hooks
-     *
-     * @example
-     *
-     * ```tsx
-     * // ✅ Correct: Inherit DataGridCellProps
-     * const CustomCell = (props: DataGridCellProps) => <DataGrid.Cell {...props} />;
-     *
-     * // ❌ Incorrect: Not inheriting DataGridCellProps
-     * const CustomCell = (props: ComponentPropsWithRef<'td'>) => <DataGrid.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>;
-     * };
-     * Cell.displayName = 'DataGridCell'; // MUST match 'DataGridCell' exactly
-     *
-     * // ❌ WRONG: Don't use custom names
-     * Cell.displayName = 'MyCell'; // Will cause hooks violation
-     * Cell.displayName = 'CustomDataGridCell'; // Will cause hooks violation
-     * ```
-     */
-    Cell: DataGridCell_1.DataGridCell,
-    /**
-     * The `DataGridHeader` component.
-     * This component should be used inside the `DataGrid` 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.
-     *
-     * **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.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
-     *
-     * @see https://react.dev/reference/rules/rules-of-hooks
-     *
-     * @example
-     *
-     * ```tsx
-     * // ✅ CORRECT: Wrapper with hooks must set displayName
-     * const Header = ({ columns }: HeaderProps) => {
-     *   const { sortConfig } = useSortConfig(); // Using hooks
-     *   return <DataGrid.Header>{columns.map(...)}</DataGrid.Header>;
-     * };
-     * Header.displayName = 'DataGridHeader'; // MUST match 'DataGridHeader' exactly
-     *
-     * // ❌ WRONG: Don't use custom names
-     * Header.displayName = 'MyHeader'; // Will cause hooks violation
-     * Header.displayName = 'CustomDataGridHeader'; // Will cause hooks violation
-     * ```
-     */
-    Header: DataGridHeader_1.DataGridHeader,
-    /**
-     * The `DataGridHeaderCell` component.
-     * This component should be used inside the `DataGrid` component.
-     *
-     * It renders and extends the props of `th` element.
-     *
-     * If the `children` prop is a string, it renders a `Typography` component with `strongBody` variant.
-     * Otherwise, it renders the `children` prop as is.
-     *
-     * 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.
-     * 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.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
-     *
-     * @see https://react.dev/reference/rules/rules-of-hooks
-     *
-     * @example
-     *
-     * ```tsx
-     * // ✅ Correct: Inherit DataGridHeaderCellProps
-     * const CustomHeaderCell = (props: DataGridHeaderCellProps) => <DataGrid.HeaderCell {...props} />;
-     *
-     * // ❌ Incorrect: Not inheriting DataGridHeaderCellProps
-     * const CustomHeaderCell = (props: ComponentPropsWithRef<'th'>) => <DataGrid.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>;
-     * };
-     * HeaderCell.displayName = 'DataGridHeaderCell'; // MUST match 'DataGridHeaderCell' exactly
-     *
-     * // ❌ WRONG: Don't use custom names
-     * HeaderCell.displayName = 'MyHeaderCell'; // Will cause hooks violation
-     * HeaderCell.displayName = 'CustomCell'; // Will cause hooks violation
-     * ```
-     */
-    HeaderCell: DataGridHeaderCell_1.DataGridHeaderCell,
-    /**
-     * The `DataGridHeaderRow` component.
-     * This component should be used inside the `DataGrid` 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.
-     *
-     * **Important**: When wrapping this component with a custom component, you must inherit `DataGridHeaderRowProps` 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.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
-     *
-     * @see https://react.dev/reference/rules/rules-of-hooks
-     *
-     * @example
-     *
-     * ```tsx
-     * // ✅ Correct: Inherit DataGridHeaderRowProps
-     * const CustomHeaderRow = (props: DataGridHeaderRowProps) => <DataGrid.HeaderRow {...props} />;
-     *
-     * // ❌ Incorrect: Not inheriting DataGridHeaderRowProps
-     * const CustomHeaderRow = (props: ComponentPropsWithRef<'tr'>) => <DataGrid.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>;
-     * };
-     * HeaderRow.displayName = 'DataGridHeaderRow'; // MUST match 'DataGridHeaderRow' exactly
-     *
-     * // ❌ WRONG: Don't use custom names
-     * HeaderRow.displayName = 'MyHeaderRow'; // Will cause hooks violation
-     * HeaderRow.displayName = 'CustomRow'; // Will cause hooks violation
-     * ```
-     */
-    HeaderRow: DataGridHeaderRow_1.DataGridHeaderRow,
-    /**
-     * The `DataGridRow` component.
-     * This component should be used inside the `DataGrid` 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.
-     * 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.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
-     *
-     * @see https://react.dev/reference/rules/rules-of-hooks
-     *
-     * @example
-     *
-     * ```tsx
-     * // ✅ Correct: Inherit DataGridRowProps
-     * const CustomRow = (props: DataGridRowProps) => <DataGrid.Row {...props} />;
-     *
-     * // ❌ Incorrect: Not inheriting DataGridRowProps
-     * const CustomRow = (props: ComponentPropsWithRef<'tr'>) => <DataGrid.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>;
-     * };
-     * Row.displayName = 'DataGridRow'; // MUST match 'DataGridRow' exactly
-     *
-     * // ❌ WRONG: Don't use custom names
-     * Row.displayName = 'MyRow'; // Will cause hooks violation
-     * Row.displayName = 'CustomDataGridRow'; // Will cause hooks violation
-     * ```
-     */
-    Row: DataGridRow_1.DataGridRow,
-});

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

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

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

@@ -1,20 +0,0 @@
-"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.js

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

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

@@ -1,5 +0,0 @@
-"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.js

@@ -1,68 +0,0 @@
-"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.js

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

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

@@ -1,5 +0,0 @@
-"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.js

@@ -1,14 +0,0 @@
-"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.js

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

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

@@ -1,5 +0,0 @@
-"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.js

@@ -1,53 +0,0 @@
-"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.js

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

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

@@ -1,5 +0,0 @@
-"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.js

@@ -1,33 +0,0 @@
-"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.js

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

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

@@ -1,5 +0,0 @@
-"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.js

@@ -1,58 +0,0 @@
-"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 });
-}