@ceed/cds 0.0.127 → 0.0.128

package/dist/components/DataTable/DataTable.js

@@ -1,466 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataTable = void 0;
-var react_1 = __importStar(require("react"));
-var joy_1 = require("@mui/joy");
-// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
-var ChevronLeft_js_1 = __importDefault(require("@mui/icons-material/esm/ChevronLeft.js"));
-// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
-var ChevronRight_js_1 = __importDefault(require("@mui/icons-material/esm/ChevronRight.js"));
-var Sheet_1 = __importDefault(require("../Sheet"));
-var Table_1 = require("../Table");
-var Checkbox_1 = __importDefault(require("../Checkbox"));
-var Box_1 = __importDefault(require("../Box"));
-var Stack_1 = __importDefault(require("../Stack"));
-var Typography_1 = __importDefault(require("../Typography"));
-var Button_1 = __importDefault(require("../Button"));
-var IconButton_1 = __importDefault(require("../IconButton"));
-var CurrencyInput_1 = __importDefault(require("../CurrencyInput"));
-var DatePicker_1 = __importDefault(require("../DatePicker"));
-var Input_1 = __importDefault(require("../Input"));
-var Textarea_1 = __importDefault(require("../Textarea"));
-var Autocomplete_1 = __importDefault(require("../Autocomplete"));
-var Select_1 = __importDefault(require("../Select"));
-var Tooltip_1 = __importDefault(require("../Tooltip"));
-function getTextAlign(props) {
-    return !props.editMode &&
-        ["number", "date", "currency"].includes(props.type || "")
-        ? "end"
-        : "start";
-}
-var OverlayWrapper = (0, joy_1.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",
-    },
-});
-var numberFormatter = function (value) {
-    return "Intl" in window ? new Intl.NumberFormat().format(value) : value;
-};
-function TablePagination(props) {
-    // prop destruction
-    var _a = props.paginationModel, page = _a.page, pageSize = _a.pageSize, rowCount = props.rowCount, onPageChange = props.onPageChange;
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    var firstPage = 1;
-    var lastPage = Math.ceil(rowCount / pageSize);
-    var beforePages = [page - 2, page - 1].filter(function (p) { return p > 1; });
-    var afterPages = [page + 1, page + 2].filter(function (p) { return p <= lastPage - 1; });
-    var isMoreAfterPages = lastPage > 1 && page < lastPage - 3;
-    var isMoreBeforePages = lastPage > 1 && page > 4;
-    // effects
-    // handlers
-    return (react_1.default.createElement(Stack_1.default, { direction: "row", spacing: 1, sx: {
-            pt: 1,
-            pb: 1,
-        }, justifyContent: "end", alignItems: "center" },
-        react_1.default.createElement(Stack_1.default, { direction: "row", spacing: 0.5, alignItems: "center" },
-            react_1.default.createElement(IconButton_1.default, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page - 1); }, disabled: page === firstPage, "aria-label": "Previous page" },
-                react_1.default.createElement(ChevronLeft_js_1.default, null)),
-            page !== firstPage && (react_1.default.createElement(Button_1.default, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(firstPage); } }, firstPage)),
-            isMoreBeforePages && (react_1.default.createElement(Button_1.default, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page - 3); } }, "...")),
-            beforePages.map(function (p) { return (react_1.default.createElement(Button_1.default, { key: p, size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(p); } }, p)); }),
-            react_1.default.createElement(Button_1.default, { variant: "soft", size: "sm" }, page),
-            afterPages.map(function (p) { return (react_1.default.createElement(Button_1.default, { key: p, size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(p); } }, p)); }),
-            isMoreAfterPages && (react_1.default.createElement(Button_1.default, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page + 3); } }, "...")),
-            page !== lastPage && (react_1.default.createElement(Button_1.default, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(lastPage); } }, lastPage)),
-            react_1.default.createElement(IconButton_1.default, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page + 1); }, disabled: page === lastPage, "aria-label": "Next page" },
-                react_1.default.createElement(ChevronRight_js_1.default, null)))));
-}
-var Resizer = function (ref) { return (react_1.default.createElement(Box_1.default, { sx: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        bottom: 0,
-        width: "4px",
-        cursor: "col-resize",
-    }, onMouseDown: function (e) {
-        var _a;
-        var initialX = e.clientX;
-        var initialWidth = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-        var onMouseMove = function (e) {
-            if (initialWidth && initialX) {
-                ref.current.style.width = "".concat(initialWidth + (e.clientX - initialX), "px");
-            }
-        };
-        var onMouseUp = function () {
-            document.removeEventListener("mousemove", onMouseMove);
-            document.removeEventListener("mouseup", onMouseUp);
-        };
-        document.addEventListener("mousemove", onMouseMove);
-        document.addEventListener("mouseup", onMouseUp);
-    } })); };
-var Asterisk = (0, joy_1.styled)("span", {
-    name: "DataTable",
-    slot: "headCellAsterisk",
-})(function (_a) {
-    var theme = _a.theme;
-    return ({
-        color: "var(--ceed-palette-danger-500)",
-        marginLeft: theme.spacing(0.5),
-    });
-});
-var HeadCell = function (props) {
-    var _a, _b, _c, _d, _e;
-    var ref = (0, react_1.useRef)(null);
-    var style = {
-        width: props.width,
-        minWidth: (_a = props.minWidth) !== null && _a !== void 0 ? _a : "50px",
-        maxWidth: props.maxWidth,
-        textAlign: getTextAlign(props),
-        position: props.stickyHeader ? undefined : "relative",
-    };
-    var resizer = ((_b = props.resizable) !== null && _b !== void 0 ? _b : true) ? Resizer(ref) : null;
-    return (react_1.default.createElement("th", { id: "".concat(props.tableId, "_header_").concat((_c = props.headerName) !== null && _c !== void 0 ? _c : props.field), "aria-label": (_d = props.headerName) !== null && _d !== void 0 ? _d : props.field, ref: ref, key: props.field, style: style }, (_e = props.headerName) !== null && _e !== void 0 ? _e : props.field,
-        props.editMode && props.required && react_1.default.createElement(Asterisk, null, "*"),
-        resizer));
-};
-var BodyCell = function (props) {
-    var _a;
-    // prop destruction
-    var tableId = props.tableId, field = props.field, type = props.type, renderCell = props.renderCell, renderEditCell = props.renderEditCell, isCellEditable = props.isCellEditable, noWrap = props.noWrap, row = props.row, rowId = props.rowId;
-    // lib hooks
-    // state, ref, querystring hooks
-    var _b = (0, react_1.useState)(row[field]), value = _b[0], setValue = _b[1];
-    var cellRef = (0, react_1.useRef)(null);
-    // form hooks
-    // query hooks
-    // calculated values
-    var params = (0, react_1.useMemo)(function () { return ({
-        row: row,
-        value: value,
-        id: rowId,
-    }); }, [row, rowId, value]);
-    var editMode = (0, react_1.useMemo)(function () {
-        return !!(props.editMode &&
-            (typeof isCellEditable === "function"
-                ? isCellEditable(params)
-                : isCellEditable !== null && isCellEditable !== void 0 ? isCellEditable : true));
-    }, [props.editMode, isCellEditable, params]);
-    var componentProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, (typeof props.componentProps === "function"
-        ? props.componentProps(params)
-        : props.componentProps || {})), { size: "sm" })); }, [props, params]);
-    var editModeComponentProps = (0, react_1.useMemo)(function () { return (__assign(__assign(__assign({}, componentProps), { onChange: function (e) {
-            var _a;
-            var _b, _c;
-            (_b = componentProps.onChange) === null || _b === void 0 ? void 0 : _b.call(componentProps, e);
-            setValue(e.target.value);
-            if (type === "select") {
-                (_c = props.onCellEditStop) === null || _c === void 0 ? void 0 : _c.call(props, __assign(__assign({}, params), { originalRow: row, row: __assign(__assign({}, params.row), (_a = {}, _a[field] = e.target.value, _a)), value: e.target.value }));
-            }
-        }, onFocus: function (e) {
-            var _a, _b;
-            (_a = componentProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(componentProps, e);
-            (_b = props.onCellEditStart) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, params), { originalRow: row, row: __assign(__assign({}, params.row), { value: value }), value: value }));
-        }, onBlur: function (e) {
-            var _a;
-            var _b, _c;
-            (_b = componentProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(componentProps, e);
-            if (type &&
-                ["number", "text", "longText", "currency", "date"].includes(type)) {
-                (_c = props.onCellEditStop) === null || _c === void 0 ? void 0 : _c.call(props, __assign(__assign({}, params), { originalRow: row, row: __assign(__assign({}, params.row), (_a = {}, _a[field] = value, _a)), value: value }));
-            }
-        } }), (type === "autocomplete" && {
-        onChangeComplete: function (e) {
-            var _a;
-            var _b, _c, _d;
-            (_c = (_b = componentProps).onChangeComplete) === null || _c === void 0 ? void 0 : _c.call(_b, e);
-            setValue(e.target.value);
-            (_d = props.onCellEditStop) === null || _d === void 0 ? void 0 : _d.call(props, __assign(__assign({}, params), { originalRow: row, row: __assign(__assign({}, params.row), (_a = {}, _a[field] = e.target.value, _a)), value: e.target.value }));
-        },
-    }))); }, [params, row, field, value, componentProps, type, props]);
-    var EditModeComponent = (0, react_1.useMemo)(function () {
-        if (renderEditCell) {
-            return renderEditCell(params);
-        }
-        return {
-            date: (react_1.default.createElement(DatePicker_1.default, __assign({ value: value }, editModeComponentProps))),
-            currency: (react_1.default.createElement(CurrencyInput_1.default, __assign({ value: value }, editModeComponentProps))),
-            number: (react_1.default.createElement(Input_1.default, __assign({ value: value, type: "number" }, editModeComponentProps))),
-            text: (react_1.default.createElement(Input_1.default, __assign({ value: value, type: "text" }, editModeComponentProps))),
-            longText: (react_1.default.createElement(Textarea_1.default, __assign({ value: value }, editModeComponentProps))),
-            autocomplete: (react_1.default.createElement(Autocomplete_1.default, __assign({ value: value, 
-                // @ts-expect-error NOTE: editComponentProps로 option이 넘어오면 Override되어야 한다
-                options: editModeComponentProps.options || [value] }, editModeComponentProps))),
-            select: (react_1.default.createElement(Select_1.default, __assign({ value: value, 
-                // @ts-expect-error NOTE: editComponentProps로 option이 넘어오면 Override되어야 한다
-                options: editModeComponentProps.options || [value] }, editModeComponentProps))),
-        }[type || "text"];
-    }, [value, editModeComponentProps, type]);
-    var ReadModeComponent = (0, react_1.useMemo)(function () {
-        if (renderCell) {
-            return renderCell(params);
-        }
-        var innerText = value;
-        var typedComponent = {
-            link: react_1.default.createElement(props.component || joy_1.Link, __assign({ children: innerText }, componentProps)),
-        }[type || "text"];
-        return typedComponent || innerText;
-    }, [value, renderCell, params, type, componentProps, props]);
-    var CellComponent = (0, react_1.useMemo)(function () {
-        return editMode && EditModeComponent ? EditModeComponent : ReadModeComponent;
-    }, [editMode, EditModeComponent, ReadModeComponent]);
-    var showTooltip = (0, react_1.useMemo)(function () { return noWrap && props.type === "longText"; }, [noWrap, props.type]);
-    // effects
-    (0, react_1.useEffect)(function () {
-        setValue(row[field]);
-    }, [row, field]);
-    // handlers
-    return (react_1.default.createElement("td", { ref: cellRef, key: field, headers: "".concat(tableId, "_header_").concat((_a = props.headerName) !== null && _a !== void 0 ? _a : field), style: {
-            textAlign: getTextAlign({ type: type }),
-            verticalAlign: editMode ? "top" : "middle",
-            overflow: "auto",
-        } }, showTooltip ? (react_1.default.createElement(Tooltip_1.default, { title: value, placement: "bottom", style: { maxWidth: "100%" }, enterDelay: 1500, enterNextDelay: 1500 },
-        react_1.default.createElement("div", { style: {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-            } }, CellComponent))) : (CellComponent)));
-};
-var BodyRow = function (props) {
-    // prop destruction
-    var tableId = props.tableId, columns = props.columns, rowId = props.rowId, editMode = props.editMode, noWrap = props.noWrap, row = props.row;
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return (react_1.default.createElement(react_1.default.Fragment, null, columns.map(function (column, i) { return (react_1.default.createElement(BodyCell, __assign({}, column, { tableId: tableId, key: "".concat(rowId, "_").concat(column.field.toString(), "_").concat(i), row: row, rowId: rowId, editMode: editMode, noWrap: noWrap }))); })));
-};
-function useDataTableRenderer(_a) {
-    var rows = _a.rows, columnsProp = _a.columns, totalRowsProp = _a.rowCount, pagination = _a.pagination, paginationMode = _a.paginationMode, paginationModel = _a.paginationModel, onPaginationModelChange = _a.onPaginationModelChange, _b = _a.selectionModel, selectionModel = _b === void 0 ? [] : _b, onSelectionModelChange = _a.onSelectionModelChange, editMode = _a.editMode, _getId = _a.getId, _isTotalSelected = _a.isTotalSelected;
-    var _c = (0, react_1.useState)((paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.page) || 1), page = _c[0], setPage = _c[1];
-    var pageSize = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSize) || 20;
-    var getId = (0, react_1.useCallback)(function (row, index) {
-        var _a, _b;
-        return (_b = (_a = _getId === null || _getId === void 0 ? void 0 : _getId(row)) !== null && _a !== void 0 ? _a : row === null || row === void 0 ? void 0 : row.id) !== null && _b !== void 0 ? _b : "".concat((index || 0) + (page - 1) * pageSize);
-    }, [_getId !== null && _getId !== void 0 ? _getId : page, pageSize]);
-    var selectedModelSet = (0, react_1.useMemo)(function () { return new Set(selectionModel); }, [selectionModel]);
-    var dataInPage = (0, react_1.useMemo)(function () {
-        return !pagination || paginationMode === "server"
-            ? rows
-            : rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
-    }, [rows, page, pageSize, paginationMode, pagination]);
-    var isAllSelected = (0, react_1.useMemo)(function () {
-        return dataInPage.length > 0 &&
-            dataInPage.every(function (row, i) { return selectedModelSet.has(getId(row, i)); });
-    }, [dataInPage, selectedModelSet, getId]);
-    var rowCount = totalRowsProp || rows.length;
-    var isTotalSelected = (0, react_1.useMemo)(function () {
-        return _isTotalSelected !== null && _isTotalSelected !== void 0 ? _isTotalSelected : (rowCount > 0 && selectionModel.length === rowCount);
-    }, [_isTotalSelected, selectionModel, rowCount]);
-    var columns = (0, react_1.useMemo)(function () {
-        var baseColumns = columnsProp ||
-            // fallback
-            Object.keys(rows[0] || {}).map(function (key) { return ({
-                field: key,
-            }); });
-        return baseColumns.map(function (column) {
-            var _a;
-            return (__assign(__assign({}, column), { isCellEditable: editMode &&
-                    (typeof column.isCellEditable === "function"
-                        ? column.isCellEditable
-                        : (_a = column.isCellEditable) !== null && _a !== void 0 ? _a : true) }));
-        });
-    }, [rows, columnsProp, editMode]);
-    var handlePageChange = (0, react_1.useCallback)(function (newPage) {
-        setPage(newPage);
-        onPaginationModelChange === null || onPaginationModelChange === void 0 ? void 0 : onPaginationModelChange({ page: newPage, pageSize: pageSize });
-    }, [onPaginationModelChange, pageSize]);
-    (0, react_1.useEffect)(function () {
-        handlePageChange(1);
-    }, [rowCount, handlePageChange]);
-    (0, react_1.useEffect)(function () {
-        var lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
-        if (page > lastPage) {
-            handlePageChange(lastPage);
-        }
-    }, [page, rowCount, pageSize, handlePageChange]);
-    (0, react_1.useEffect)(function () {
-        onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange([]);
-    }, [page]);
-    return {
-        rowCount: rowCount,
-        page: page,
-        pageSize: pageSize,
-        onPaginationModelChange: handlePageChange,
-        getId: getId,
-        HeadCell: HeadCell,
-        BodyRow: BodyRow,
-        dataInPage: dataInPage,
-        isAllSelected: isAllSelected, // all rows are selected on this page
-        isTotalSelected: isTotalSelected,
-        isSelectedRow: (0, react_1.useCallback)(function (model) { return selectedModelSet.has(model); }, [selectedModelSet]),
-        onAllCheckboxChange: (0, react_1.useCallback)(function () {
-            onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isAllSelected ? [] : dataInPage.map(getId));
-        }, [isAllSelected, dataInPage, onSelectionModelChange, getId]),
-        onCheckboxChange: (0, react_1.useCallback)(function (event, selectedModel) {
-            if (selectedModelSet.has(selectedModel)) {
-                var newSelectionModel = selectionModel.filter(function (model) { return model !== selectedModel; });
-                onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel);
-            }
-            else {
-                var newSelectionModel = __spreadArray(__spreadArray([], selectionModel, true), [selectedModel], false);
-                onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel);
-            }
-        }, [selectionModel, onSelectionModelChange, selectedModelSet]),
-        columns: columns,
-        onTotalSelect: (0, react_1.useCallback)(function () {
-            onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isTotalSelected ? [] : rows.map(getId), !isTotalSelected);
-        }, [isTotalSelected, rows, onSelectionModelChange, getId]),
-    };
-}
-function DataTable(props) {
-    // prop destruction
-    var rows = props.rows, checkboxSelection = props.checkboxSelection, editMode = props.editMode, selectionModel = props.selectionModel, onSelectionModelChange = props.onSelectionModelChange, _ = props.rowCount, // rowCount is used in useDataTableRenderer
-    __ = props.columns, // columns is used in useDataTableRenderer
-    ___ = props.onPaginationModelChange, // onPaginationModelChange is used in useDataTableRenderer
-    pagination = props.pagination, ____ = props.paginationMode, // paginationMode is used in useDataTableRenderer
-    _____ = props.paginationModel, // paginationModel is used in useDataTableRenderer
-    loading = props.loading, _a = props.slots, _b = _a === void 0 ? {} : _a, _c = _b.checkbox, RenderCheckbox = _c === void 0 ? Checkbox_1.default : _c, Toolbar = _b.toolbar, Footer = _b.footer, _d = _b.loadingOverlay, LoadingOverlay = _d === void 0 ? function () { return (react_1.default.createElement(joy_1.LinearProgress, { value: 8, variant: "plain" })); } : _d, _e = props.slotProps, _f = _e === void 0 ? {} : _e, _g = _f.checkbox, checkboxProps = _g === void 0 ? {} : _g, toolbarProps = _f.toolbar, _h = _f.background, backgroundProps = _h === void 0 ? {} : _h, innerProps = __rest(props, ["rows", "checkboxSelection", "editMode", "selectionModel", "onSelectionModelChange", "rowCount", "columns", "onPaginationModelChange", "pagination", "paginationMode", "paginationModel", "loading", "slots", "slotProps"]);
-    // lib hooks
-    var _j = useDataTableRenderer(props), columns = _j.columns, isAllSelected = _j.isAllSelected, isSelectedRow = _j.isSelectedRow, onAllCheckboxChange = _j.onAllCheckboxChange, onCheckboxChange = _j.onCheckboxChange, getId = _j.getId, rowCount = _j.rowCount, page = _j.page, pageSize = _j.pageSize, onPaginationModelChange = _j.onPaginationModelChange, dataInPage = _j.dataInPage, isTotalSelected = _j.isTotalSelected, onTotalSelect = _j.onTotalSelect, HeadCell = _j.HeadCell, BodyRow = _j.BodyRow;
-    // state, ref, querystring hooks
-    var tableId = (0, react_1.useId)();
-    // form hooks
-    // query hooks
-    // calculated values
-    var paginationModel = (0, react_1.useMemo)(function () { return ({ page: page, pageSize: pageSize }); }, [page, pageSize]);
-    // effects
-    // handlers
-    return (react_1.default.createElement(Box_1.default, null,
-        (!!checkboxSelection || !!Toolbar) && (react_1.default.createElement(Stack_1.default, { direction: "row", sx: {
-                pt: 1,
-                pb: 1,
-            }, justifyContent: "space-between", alignItems: "center" },
-            !!checkboxSelection && (react_1.default.createElement(Stack_1.default, { direction: "row", spacing: 1 },
-                !isAllSelected && (react_1.default.createElement(Typography_1.default, { level: "body-xs" },
-                    numberFormatter((selectionModel === null || selectionModel === void 0 ? void 0 : selectionModel.length) || 0),
-                    " items selected")),
-                isAllSelected && !isTotalSelected && (react_1.default.createElement(Stack_1.default, { direction: "row", spacing: 1, alignItems: "center" },
-                    react_1.default.createElement(Typography_1.default, { level: "body-xs" },
-                        "All ",
-                        numberFormatter((selectionModel === null || selectionModel === void 0 ? void 0 : selectionModel.length) || 0),
-                        " items on this page are selected."),
-                    react_1.default.createElement(Button_1.default, { size: "sm", variant: "plain", onClick: onTotalSelect },
-                        "Select all ",
-                        numberFormatter(rowCount !== null && rowCount !== void 0 ? rowCount : rows.length),
-                        " items"))),
-                isTotalSelected && (react_1.default.createElement(Stack_1.default, { direction: "row", spacing: 1, alignItems: "center" },
-                    react_1.default.createElement(Typography_1.default, { level: "body-xs" },
-                        "All ",
-                        numberFormatter(rowCount !== null && rowCount !== void 0 ? rowCount : rows.length),
-                        " items are selected."),
-                    react_1.default.createElement(Button_1.default, { size: "sm", variant: "plain", color: "danger", onClick: onTotalSelect }, "Cancel"))))),
-            Toolbar && react_1.default.createElement(Toolbar, __assign({}, (toolbarProps || {}))))),
-        react_1.default.createElement(Sheet_1.default, __assign({ variant: "outlined", sx: {
-                overflow: "auto",
-                width: "100%",
-                boxShadow: "sm",
-                borderRadius: "sm",
-            } }, backgroundProps),
-            react_1.default.createElement(Table_1.Table, __assign({}, innerProps),
-                react_1.default.createElement("thead", null,
-                    react_1.default.createElement("tr", null,
-                        checkboxSelection && (react_1.default.createElement("th", { style: {
-                                width: "40px",
-                                textAlign: "center",
-                            } },
-                            react_1.default.createElement(RenderCheckbox, __assign({ onChange: onAllCheckboxChange, checked: isAllSelected, indeterminate: (selectionModel || []).length > 0 && !isAllSelected }, checkboxProps)))),
-                        columns.map(function (c, i) { return (react_1.default.createElement(HeadCell, __assign({ tableId: tableId, key: "".concat(c.field.toString(), "_").concat(i), stickyHeader: props.stickyHeader, editMode: !!c.isCellEditable }, c))); }))),
-                react_1.default.createElement("tbody", null,
-                    react_1.default.createElement(OverlayWrapper, null, !!loading && (react_1.default.createElement("td", null,
-                        react_1.default.createElement(Box_1.default, { sx: {
-                                position: "absolute",
-                                top: 0,
-                                left: 0,
-                                right: 0,
-                            } },
-                            react_1.default.createElement(LoadingOverlay, null))))),
-                    react_1.default.createElement(OverlayWrapper, null),
-                    dataInPage.map(function (row, rowIndex) {
-                        var rowId = getId(row, rowIndex);
-                        return (react_1.default.createElement("tr", { key: rowId, role: checkboxSelection ? "checkbox" : undefined, tabIndex: checkboxSelection ? -1 : undefined, onClick: checkboxSelection
-                                ? function (e) { return onCheckboxChange(e, rowId); }
-                                : undefined, "aria-checked": checkboxSelection ? isSelectedRow(rowId) : undefined },
-                            checkboxSelection && (react_1.default.createElement("th", { scope: "row", style: {
-                                    textAlign: "center",
-                                } },
-                                react_1.default.createElement(RenderCheckbox, __assign({ onChange: function (e) { return onCheckboxChange(e, rowId); }, checked: isSelectedRow(rowId) }, checkboxProps)))),
-                            react_1.default.createElement(BodyRow, { tableId: tableId, columns: columns, row: row, rowId: rowId, editMode: editMode, noWrap: props.noWrap })));
-                    })),
-                Footer && react_1.default.createElement(Footer, null))),
-        pageSize < rowCount && pagination && (react_1.default.createElement(TablePagination, { paginationModel: paginationModel, rowCount: rowCount, onPageChange: onPaginationModelChange }))));
-}
-exports.DataTable = DataTable;
-DataTable.displayName = "DataTable";

package/dist/components/DataTable/index.js

@@ -1,19 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var DataTable_1 = require("./DataTable");
-__exportStar(require("./DataTable"), exports);
-exports.default = DataTable_1.DataTable;

package/dist/components/DataTable/types.js

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