@ceed/cds 0.0.187-treeshaking.1 → 0.0.187

package/dist/components/DataTable/DataTable.js

@@ -1,568 +0,0 @@
-import React__default, { useId, useRef, useMemo, useCallback, useState, useEffect } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { styled, Stack, LinearProgress, Link } from '@mui/joy';
-import SortIcon from '../../external/@mui/icons-material/esm/ArrowUpwardRounded.js';
-import InfoIcon from '../../external/@mui/icons-material/esm/Info.js';
-import { Sheet } from '../Sheet/Sheet.js';
-import { Table } from '../Table/Table.js';
-import { Checkbox } from '../Checkbox/Checkbox.js';
-import { Box } from '../Box/Box.js';
-import { Typography } from '../Typography/Typography.js';
-import { Button } from '../Button/Button.js';
-import { CurrencyInput } from '../CurrencyInput/CurrencyInput.js';
-import { DatePicker } from '../DatePicker/DatePicker.js';
-import { Input } from '../Input/Input.js';
-import { Textarea } from '../Textarea/Textarea.js';
-import { Autocomplete } from '../Autocomplete/Autocomplete.js';
-import { Select } from '../Select/Select.js';
-import { Tooltip } from '../Tooltip/Tooltip.js';
-import { motion } from 'framer-motion';
-import { useControlledState } from '../../hooks/use-controlled-state/index.js';
-import { Pagination } from '../Pagination/Pagination.js';
-
-function getTextAlign(props) {
-    return !props.editMode &&
-        ["number", "date", "currency"].includes(props.type || "")
-        ? "end"
-        : "start";
-}
-const OverlayWrapper = styled("tr", {
-    name: "DataTable",
-    slot: "overlayWrapper",
-})({
-    position: "sticky",
-    top: `calc(var(--unstable_TableCell-height, 32px))`,
-    left: 0,
-    right: 0,
-    zIndex: 1,
-    "& > td": {
-        height: 0,
-        padding: 0,
-        border: "none !important",
-    },
-});
-const numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
-const Resizer = (ref) => (React__default.createElement(Box, { sx: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        bottom: 0,
-        width: "4px",
-        cursor: "col-resize",
-    }, 
-    // NOTE: Resize가 정렬을 변경하면 안된다.
-    onClick: (e) => e.stopPropagation(), onMouseDown: (e) => {
-        const initialX = e.clientX;
-        const initialWidth = ref.current?.getBoundingClientRect().width;
-        const onMouseMove = (e) => {
-            if (initialWidth && initialX) {
-                ref.current.style.width = `${initialWidth + (e.clientX - initialX)}px`;
-            }
-        };
-        const onMouseUp = () => {
-            document.removeEventListener("mousemove", onMouseMove);
-            document.removeEventListener("mouseup", onMouseUp);
-        };
-        document.addEventListener("mousemove", onMouseMove);
-        document.addEventListener("mouseup", onMouseUp);
-    } }));
-const VirtualizedTableBody = styled("tbody", {
-    name: "DataTable",
-    slot: "tableBody",
-})({
-    // HACK: for virtualization: tbody의 height를 렌더링 된 tr의 총 높이 보다 높은 값으로 지정하고도 tr의 size를 유지하기 위한 꼼수
-    "&::after": {
-        content: "''",
-        display: "block",
-        height: "0.01em",
-    },
-});
-const VirtualizedTableRow = styled("tr", {
-    name: "DataTable",
-    slot: "tableRow",
-    shouldForwardProp: (prop) => prop !== "striped",
-})(({ striped }) => ({
-    ...(striped && {
-        background: "var(--TableRow-stripeBackground, var(--ceed-palette-background-level2))",
-        color: "var(--ceed-palette-text-primary)",
-    }),
-    "&:hover": {
-        background: "var(--TableRow-hoverBackground, var(--ceed-palette-background-level3))",
-    },
-}));
-const Asterisk = styled("span", {
-    name: "DataTable",
-    slot: "headCellAsterisk",
-})(({ theme }) => ({
-    color: "var(--ceed-palette-danger-500)",
-    marginLeft: theme.spacing(0.5),
-}));
-const MotionSortIcon = motion(SortIcon);
-const HeadCell = (props) => {
-    // prop destruction
-    const { width, maxWidth, minWidth, stickyHeader, resizable, field, tableId, headerName, required, editMode, sort, onSortChange, sortable = true, sortOrder, description, } = props;
-    // lib hooks
-    // state, ref, querystring hooks
-    const ref = useRef(null);
-    // form hooks
-    // query hooks
-    // calculated values
-    const headId = useMemo(() => `${tableId}_header_${headerName ?? field}`.trim(), [tableId, headerName, field]);
-    const resizer = resizable ?? true ? Resizer(ref) : null;
-    const style = {
-        width: width,
-        minWidth: minWidth ?? "50px",
-        maxWidth: maxWidth,
-        position: stickyHeader ? undefined : "relative",
-        cursor: sortable ? "pointer" : "default",
-        // TODO: multi-sort때문에 일단 추가한 property, joy-ui에서는 multi-sort시 th에 user-select: none을 적용하고 툴팁을 띄워준다.
-        userSelect: "none",
-    };
-    const textAlign = getTextAlign(props);
-    const initialSort = sortOrder[0];
-    const sortIcon = sortable && (React__default.createElement(MotionSortIcon, { style: {
-            width: "16px",
-            height: "16px",
-        }, 
-        // @ts-ignore: material-icon을 js로 import해서 role property에 대한 타입을 못찾는다.
-        role: "img", "aria-labelledby": headId, "aria-description": (sort ?? initialSort) === "desc" ? "descending" : "ascending", "data-testid": undefined, 
-        // #region framer-motion
-        variants: {
-            hover: { opacity: 1 },
-            initial: { opacity: 0 },
-        }, animate: {
-            color: !!sort
-                ? "var(--ceed-palette-text-secondary)"
-                : "var(--ceed-palette-primary-solidDisabledColor)",
-            rotate: (sort ?? initialSort) === "desc" ? 180 : 0,
-            opacity: !!sort ? 1 : 0,
-        }, transition: {
-            duration: 0,
-            rotate: { duration: 0.2, ease: "easeOut" },
-            color: { duration: 0.2, ease: "easeInOut" },
-            opacity: { duration: 0.2, ease: "easeInOut" },
-        } }));
-    const descriptionTooltip = description ? (React__default.createElement(Tooltip, { onClick: (e) => e.stopPropagation(), title: React__default.createElement(React__default.Fragment, null, description?.split("\n").map((line, i) => (React__default.createElement("div", { key: i }, line)))), placement: "top" },
-        React__default.createElement(InfoIcon, { fontSize: "small" }))) : null;
-    // effects
-    // handlers
-    return (React__default.createElement(motion.th, { id: headId, "aria-label": headerName ?? field, "aria-sort": sort
-            ? { asc: "ascending", desc: "descending" }[sort]
-            : "none", ref: ref, key: field, style: style, onClick: (e) => sortable &&
-            onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }), whileHover: "hover", initial: "initial" },
-        React__default.createElement(Stack, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center" },
-            textAlign === "end" && sortIcon,
-            textAlign === "end" && descriptionTooltip,
-            React__default.createElement("div", null,
-                headerName ?? field,
-                editMode && required && React__default.createElement(Asterisk, null, "*")),
-            textAlign === "start" && descriptionTooltip,
-            textAlign === "start" && sortIcon),
-        resizer));
-};
-const BodyCell = (props) => {
-    // prop destruction
-    const { tableId, field, type, renderCell, renderEditCell, isCellEditable, noWrap, row, rowId, } = props;
-    // lib hooks
-    // state, ref, querystring hooks
-    const [value, setValue] = useState(row[field]);
-    const cellRef = useRef(null);
-    // form hooks
-    // query hooks
-    // calculated values
-    const params = useMemo(() => ({
-        row,
-        value,
-        id: rowId,
-    }), [row, rowId, value]);
-    const editMode = useMemo(() => !!(props.editMode &&
-        (typeof isCellEditable === "function"
-            ? isCellEditable(params)
-            : isCellEditable ?? true)), [props.editMode, isCellEditable, params]);
-    const componentProps = useMemo(() => ({
-        ...(typeof props.componentProps === "function"
-            ? props.componentProps(params)
-            : props.componentProps || {}),
-        size: "sm",
-    }), [props, params]);
-    const editModeComponentProps = useMemo(() => ({
-        ...componentProps,
-        onChange: (e) => {
-            componentProps.onChange?.(e);
-            setValue(e.target.value);
-            if (type === "select") {
-                props.onCellEditStop?.({
-                    ...params,
-                    originalRow: row,
-                    row: {
-                        ...params.row,
-                        [field]: e.target.value,
-                    },
-                    value: e.target.value,
-                });
-            }
-        },
-        onFocus: (e) => {
-            componentProps.onFocus?.(e);
-            props.onCellEditStart?.({
-                ...params,
-                originalRow: row,
-                row: {
-                    ...params.row,
-                    value,
-                },
-                value,
-            });
-        },
-        onBlur: (e) => {
-            componentProps.onBlur?.(e);
-            if (type &&
-                ["number", "text", "longText", "currency", "date"].includes(type)) {
-                props.onCellEditStop?.({
-                    ...params,
-                    originalRow: row,
-                    row: {
-                        ...params.row,
-                        [field]: value,
-                    },
-                    value,
-                });
-            }
-        },
-        ...(type === "autocomplete" && {
-            onChangeComplete: (e) => {
-                componentProps.onChangeComplete?.(e);
-                setValue(e.target.value);
-                props.onCellEditStop?.({
-                    ...params,
-                    originalRow: row,
-                    row: {
-                        ...params.row,
-                        [field]: e.target.value,
-                    },
-                    value: e.target.value,
-                });
-            },
-        }),
-    }), [params, row, field, value, componentProps, type, props]);
-    const EditModeComponent = useMemo(() => {
-        if (renderEditCell) {
-            return renderEditCell(params);
-        }
-        return {
-            date: (React__default.createElement(DatePicker, { value: value, ...editModeComponentProps })),
-            currency: (React__default.createElement(CurrencyInput, { value: value, ...editModeComponentProps })),
-            number: (React__default.createElement(Input, { value: value, type: "number", ...editModeComponentProps })),
-            text: (React__default.createElement(Input, { value: value, type: "text", ...editModeComponentProps })),
-            longText: (React__default.createElement(Textarea, { value: value, ...editModeComponentProps })),
-            autocomplete: (React__default.createElement(Autocomplete, { value: value, options: editModeComponentProps.options || [value], ...editModeComponentProps })),
-            select: (React__default.createElement(Select, { value: value, 
-                // @ts-expect-error NOTE: editComponentProps로 option이 넘어오면 Override되어야 한다
-                options: editModeComponentProps.options || [value], ...editModeComponentProps })),
-        }[type || "text"];
-    }, [value, editModeComponentProps, type]);
-    const ReadModeComponent = useMemo(() => {
-        if (renderCell) {
-            return renderCell(params);
-        }
-        const innerText = value;
-        const typedComponent = {
-            link: React__default.createElement(props.component || Link, {
-                children: innerText,
-                ...componentProps,
-            }),
-        }[type || "text"];
-        return typedComponent || innerText;
-    }, [value, renderCell, params, type, componentProps, props]);
-    const CellComponent = useMemo(() => editMode && EditModeComponent ? EditModeComponent : ReadModeComponent, [editMode, EditModeComponent, ReadModeComponent]);
-    const showTooltip = useMemo(() => noWrap && props.type === "longText", [noWrap, props.type]);
-    // effects
-    useEffect(() => {
-        setValue(row[field]);
-    }, [row, field]);
-    // handlers
-    return (React__default.createElement("td", { ref: cellRef, key: field, headers: `${tableId}_header_${props.headerName ?? field}`, style: {
-            textAlign: getTextAlign({ type }),
-            verticalAlign: editMode ? "top" : "middle",
-        } }, showTooltip ? (React__default.createElement(Tooltip, { title: value, placement: "bottom", style: { maxWidth: "100%" }, enterDelay: 1500, enterNextDelay: 1500 },
-        React__default.createElement("div", { style: {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-            } }, CellComponent))) : (CellComponent)));
-};
-const BodyRow = (props) => {
-    // prop destruction
-    const { tableId, columns, rowId, editMode, noWrap, row } = props;
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return (React__default.createElement(React__default.Fragment, null, columns.map((column, i) => (React__default.createElement(BodyCell, { ...column, tableId: tableId, key: `${rowId}_${column.field.toString()}_${i}`, row: row, rowId: rowId, editMode: editMode, noWrap: noWrap })))));
-};
-function useDataTableRenderer({ rows: _rows, columns: columnsProp, rowCount: totalRowsProp, initialState, pagination, paginationMode, paginationModel, onPaginationModelChange, sortModel: controlledSortModel, sortOrder: _sortOrder = ["asc", "desc", null], selectionModel = [], onSortModelChange, onSelectionModelChange, editMode, getId: _getId, isTotalSelected: _isTotalSelected, }) {
-    const [sortModel, setSortModel] = useControlledState(controlledSortModel, initialState?.sorting?.sortModel ?? [], useCallback((sortModel) => onSortModelChange?.(sortModel), [onSortModelChange]));
-    const columnsByField = useMemo(() => columnsProp.reduce((acc, curr) => ({ ...acc, [curr.field]: curr }), {}), [columnsProp]);
-    const sortComparator = useCallback((rowA, rowB) => {
-        for (const sort of sortModel) {
-            const { field, sort: direction } = sort;
-            const a = rowA[field];
-            const b = rowB[field];
-            const column = columnsByField[field];
-            let comparison = 0;
-            if (column.sortComparator) {
-                comparison = column.sortComparator({
-                    rowA,
-                    rowB,
-                });
-            }
-            else if (typeof a === "string" && typeof b === "string") {
-                comparison = a.localeCompare(b);
-            }
-            else if (typeof a === "number" && typeof b === "number") {
-                comparison = a - b;
-            }
-            else if (a instanceof Date && b instanceof Date) {
-                comparison = a.getTime() - b.getTime();
-            }
-            if (comparison !== 0) {
-                return direction === "asc" ? comparison : -comparison;
-            }
-        }
-        return 0;
-    }, [sortModel, columnsByField]);
-    const rows = useMemo(() => (sortModel.length ? [..._rows].sort(sortComparator) : _rows), [_rows, sortModel, sortComparator]);
-    const sortOrder = useMemo(() => Array.from(new Set(_sortOrder)), [_sortOrder]);
-    const [page, setPage] = useState(paginationModel?.page || 1);
-    const pageSize = paginationModel?.pageSize || 20;
-    const getId = useCallback((row, index) => _getId?.(row) ??
-        row.id ??
-        `${(index || 0) + (page - 1) * pageSize}`, [_getId, page, pageSize]);
-    const selectedModelSet = useMemo(() => new Set(selectionModel), [selectionModel]);
-    const dataInPage = useMemo(() => !pagination || paginationMode === "server"
-        ? rows
-        : rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize), [rows, page, pageSize, paginationMode, pagination]);
-    const isAllSelected = useMemo(() => dataInPage.length > 0 &&
-        dataInPage.every((row, i) => selectedModelSet.has(getId(row, i))), [dataInPage, selectedModelSet, getId]);
-    const rowCount = totalRowsProp || rows.length;
-    const isTotalSelected = useMemo(() => _isTotalSelected ?? (rowCount > 0 && selectionModel.length === rowCount), [_isTotalSelected, selectionModel, rowCount]);
-    const columns = useMemo(() => {
-        const baseColumns = columnsProp ||
-            // fallback
-            Object.keys(rows[0] || {}).map((key) => ({
-                field: key,
-            }));
-        return baseColumns.map((column) => ({
-            ...column,
-            isCellEditable: editMode &&
-                (typeof column.isCellEditable === "function"
-                    ? column.isCellEditable
-                    : column.isCellEditable ?? true),
-            sort: sortModel.find((sort) => sort.field === column.field)?.sort,
-            sortOrder: columnsByField[column.field]?.sortOrder || sortOrder,
-        }));
-    }, [rows, columnsProp, editMode, sortModel, columnsByField, sortOrder]);
-    const handlePageChange = useCallback((newPage) => {
-        setPage(newPage);
-        onPaginationModelChange?.({ page: newPage, pageSize });
-    }, [onPaginationModelChange, pageSize]);
-    const handleSortChange = useCallback((props) => {
-        const { field, currentSort, multiple } = props;
-        const column = columnsByField[field];
-        const columnSortOrder = column.sortOrder || sortOrder;
-        if (currentSort !== undefined) {
-            const currentOrderIndex = columnSortOrder.indexOf(currentSort);
-            const nextSortOrderIndex = (currentOrderIndex + 1) % columnSortOrder.length;
-            const nextSortOrder = columnSortOrder[nextSortOrderIndex];
-            if (!nextSortOrder) {
-                const newSortModel = multiple
-                    ? sortModel.filter((model) => model.field !== field)
-                    : [];
-                setSortModel(newSortModel);
-                return;
-            }
-            const newSortModel = multiple
-                ? sortModel.map((model) => model.field === field ? { field, sort: nextSortOrder } : model)
-                : [{ field, sort: nextSortOrder }];
-            setSortModel(newSortModel);
-        }
-        else {
-            const newSortModel = multiple
-                ? [...sortModel, { field, sort: columnSortOrder[0] }]
-                : [{ field, sort: columnSortOrder[0] }];
-            setSortModel(newSortModel);
-        }
-    }, [sortOrder, columnsByField, sortModel, setSortModel]);
-    useEffect(() => {
-        // if uncontrolled, reset page to 1
-        if (!paginationModel) {
-            handlePageChange(1);
-        }
-    }, [rowCount, handlePageChange, paginationModel]);
-    useEffect(() => {
-        const lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
-        if (page > lastPage) {
-            handlePageChange(lastPage);
-        }
-    }, [page, rowCount, pageSize, handlePageChange]);
-    useEffect(() => {
-        onSelectionModelChange?.([]);
-    }, [page]);
-    return {
-        rowCount,
-        page,
-        pageSize,
-        onPaginationModelChange: handlePageChange,
-        getId,
-        HeadCell,
-        BodyRow,
-        dataInPage,
-        handleSortChange,
-        isAllSelected, // all rows are selected on this page
-        isTotalSelected,
-        isSelectedRow: useCallback((model) => selectedModelSet.has(model), [selectedModelSet]),
-        onAllCheckboxChange: useCallback(() => {
-            onSelectionModelChange?.(isAllSelected ? [] : dataInPage.map(getId));
-        }, [isAllSelected, dataInPage, onSelectionModelChange, getId]),
-        onCheckboxChange: useCallback((event, selectedModel) => {
-            if (selectedModelSet.has(selectedModel)) {
-                const newSelectionModel = selectionModel.filter((model) => model !== selectedModel);
-                onSelectionModelChange?.(newSelectionModel);
-            }
-            else {
-                const newSelectionModel = [...selectionModel, selectedModel];
-                onSelectionModelChange?.(newSelectionModel);
-            }
-        }, [selectionModel, onSelectionModelChange, selectedModelSet]),
-        columns,
-        onTotalSelect: useCallback(() => {
-            onSelectionModelChange?.(isTotalSelected ? [] : rows.map(getId), !isTotalSelected);
-        }, [isTotalSelected, rows, onSelectionModelChange, getId]),
-    };
-}
-function DataTable(props) {
-    // prop destruction
-    const { rows, checkboxSelection, editMode, selectionModel, onSelectionModelChange, disableSelectionOnClick, onRowClick, rowCount: _, // rowCount is used in useDataTableRenderer
-    columns: __, // columns is used in useDataTableRenderer
-    onPaginationModelChange: ___, // onPaginationModelChange is used in useDataTableRenderer
-    pagination, paginationMode: ____, // paginationMode is used in useDataTableRenderer
-    paginationModel: _____, // paginationModel is used in useDataTableRenderer
-    sortModel: ______, // sortModel is used in useDataTableRenderer
-    sortOrder: _______, // sortOrder is used in useDataTableRenderer
-    onSortModelChange: ________, // onSortModelChange is used in useDataTableRenderer
-    initialState: _________, // initialState is used in useDataTableRenderer
-    loading, slots: { checkbox: RenderCheckbox = Checkbox, toolbar: Toolbar, footer: Footer, loadingOverlay: LoadingOverlay = () => (React__default.createElement(LinearProgress, { value: 8, variant: "plain" })), } = {}, slotProps: { checkbox: checkboxProps = {}, toolbar: toolbarProps, background: backgroundProps = {}, } = {}, stripe, ...innerProps } = props;
-    // state, ref, querystring hooks
-    const tableId = useId();
-    const parentRef = useRef(null);
-    // lib hooks
-    const { columns, isAllSelected, isSelectedRow, onAllCheckboxChange, onCheckboxChange, getId, rowCount, page, pageSize, onPaginationModelChange, handleSortChange, dataInPage, isTotalSelected, onTotalSelect, HeadCell, BodyRow, } = useDataTableRenderer(props);
-    const virtualizer = useVirtualizer({
-        count: dataInPage.length,
-        getScrollElement: () => parentRef.current,
-        estimateSize: () => 32,
-        measureElement: (element) => element.clientHeight,
-        overscan: 20,
-    });
-    // form hooks
-    // query hooks
-    // calculated values
-    const paginationModel = useMemo(() => ({ page, pageSize }), [page, pageSize]);
-    const totalSize = virtualizer.getTotalSize();
-    const virtualizedItems = virtualizer.getVirtualItems();
-    // effects
-    // handlers
-    return (React__default.createElement(Box, { sx: {
-            maxHeight: "100%",
-            overflow: "auto",
-            display: "flex",
-            flexDirection: "column",
-        } },
-        (!!checkboxSelection || !!Toolbar) && (React__default.createElement(Stack, { direction: "row", sx: {
-                pt: 1,
-                pb: 1,
-            }, justifyContent: "space-between", alignItems: "center" },
-            !!checkboxSelection && (React__default.createElement(Stack, { direction: "row", spacing: 1 },
-                !isAllSelected && (React__default.createElement(Typography, { level: "body-xs" },
-                    numberFormatter(selectionModel?.length || 0),
-                    " items selected")),
-                isAllSelected && !isTotalSelected && (React__default.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
-                    React__default.createElement(Typography, { level: "body-xs" },
-                        "All ",
-                        numberFormatter(selectionModel?.length || 0),
-                        " items on this page are selected."),
-                    React__default.createElement(Button, { size: "sm", variant: "plain", onClick: onTotalSelect },
-                        "Select all ",
-                        numberFormatter(rowCount ?? rows.length),
-                        " items"))),
-                isTotalSelected && (React__default.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
-                    React__default.createElement(Typography, { level: "body-xs" },
-                        "All ",
-                        numberFormatter(rowCount ?? rows.length),
-                        " items are selected."),
-                    React__default.createElement(Button, { size: "sm", variant: "plain", color: "danger", onClick: onTotalSelect }, "Cancel"))))),
-            Toolbar && React__default.createElement(Toolbar, { ...(toolbarProps || {}) }))),
-        React__default.createElement(Sheet, { variant: "outlined", sx: {
-                height: "100%",
-                overflow: "auto",
-                width: "100%",
-                boxShadow: "sm",
-                borderRadius: "sm",
-            }, ref: parentRef, ...backgroundProps },
-            React__default.createElement(Table, { ...innerProps },
-                React__default.createElement("thead", null,
-                    React__default.createElement("tr", null,
-                        checkboxSelection && (React__default.createElement("th", { style: {
-                                width: "40px",
-                                textAlign: "center",
-                            } },
-                            React__default.createElement(RenderCheckbox, { onChange: onAllCheckboxChange, checked: isAllSelected, indeterminate: (selectionModel || []).length > 0 && !isAllSelected, ...checkboxProps }))),
-                        columns.map((c, i) => (React__default.createElement(HeadCell, { tableId: tableId, key: `${c.field.toString()}_${i}`, stickyHeader: props.stickyHeader, editMode: !!c.isCellEditable, onSortChange: handleSortChange, ...c }))))),
-                React__default.createElement(VirtualizedTableBody, { style: {
-                        height: `${totalSize}px`,
-                    } },
-                    !!loading && (React__default.createElement(OverlayWrapper, null,
-                        React__default.createElement("td", null,
-                            React__default.createElement(Box, { sx: {
-                                    position: "absolute",
-                                    top: 0,
-                                    left: 0,
-                                    right: 0,
-                                } },
-                                React__default.createElement(LoadingOverlay, null))))),
-                    virtualizedItems.map((virtualizedRow, index) => {
-                        const rowIndex = virtualizedRow.index;
-                        const row = dataInPage[rowIndex];
-                        const rowId = getId(row, rowIndex);
-                        const striped = stripe &&
-                            ((stripe === "even" && (rowIndex + 1) % 2 === 0) ||
-                                (stripe === "odd" && (rowIndex + 1) % 2 === 1));
-                        return (React__default.createElement(VirtualizedTableRow, { key: rowId, role: checkboxSelection && !disableSelectionOnClick
-                                ? "checkbox"
-                                : undefined, tabIndex: checkboxSelection && !disableSelectionOnClick
-                                ? -1
-                                : undefined, onClick: (e) => {
-                                onRowClick?.({ row, rowId }, e);
-                                checkboxSelection &&
-                                    !disableSelectionOnClick &&
-                                    onCheckboxChange(e, rowId);
-                            }, "aria-checked": checkboxSelection && !disableSelectionOnClick
-                                ? isSelectedRow(rowId)
-                                : undefined, striped: striped, style: {
-                                height: `${virtualizedRow.size}px`,
-                                transform: `translateY(${virtualizedRow.start - index * virtualizedRow.size}px)`,
-                            } },
-                            checkboxSelection && (React__default.createElement("th", { scope: "row", style: {
-                                    textAlign: "center",
-                                } },
-                                React__default.createElement(RenderCheckbox, { onClick: (e) => e.stopPropagation(), onChange: (e) => onCheckboxChange(e, rowId), checked: isSelectedRow(rowId), ...checkboxProps }))),
-                            React__default.createElement(BodyRow, { tableId: tableId, columns: columns, row: row, rowId: rowId, editMode: editMode, noWrap: props.noWrap })));
-                    })),
-                Footer && React__default.createElement(Footer, null))),
-        pagination && (React__default.createElement(Pagination, { py: 2, size: "sm", alignItems: "flex-end", paginationModel: paginationModel, rowCount: rowCount, onPageChange: onPaginationModelChange }))));
-}
-DataTable.displayName = "DataTable";
-
-export { DataTable };