@ceed/cds 0.0.126 → 0.0.127

package/dist/components/DataTable/DataTable.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     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)
@@ -29,34 +53,39 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import React, { useCallback, useEffect, useMemo, useRef, useState, useId, } from "react";
-import { styled, LinearProgress, Link } from "@mui/joy";
+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
-import PreviousIcon from "@mui/icons-material/esm/ChevronLeft.js";
+var ChevronLeft_js_1 = __importDefault(require("@mui/icons-material/esm/ChevronLeft.js"));
 // @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
-import NextIcon from "@mui/icons-material/esm/ChevronRight.js";
-import Sheet from "../Sheet";
-import { Table } from "../Table";
-import Checkbox from "../Checkbox";
-import Box from "../Box";
-import Stack from "../Stack";
-import Typography from "../Typography";
-import Button from "../Button";
-import IconButton from "../IconButton";
-import CurrencyInput from "../CurrencyInput";
-import DatePicker from "../DatePicker";
-import Input from "../Input";
-import Textarea from "../Textarea";
-import Autocomplete from "../Autocomplete";
-import Select from "../Select";
-import Tooltip from "../Tooltip";
+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 = styled("tr", {
+var OverlayWrapper = (0, joy_1.styled)("tr", {
     name: "DataTable",
     slot: "overlayWrapper",
 })({
@@ -90,24 +119,24 @@ function TablePagination(props) {
     var isMoreBeforePages = lastPage > 1 && page > 4;
     // effects
     // handlers
-    return (React.createElement(Stack, { direction: "row", spacing: 1, sx: {
+    return (react_1.default.createElement(Stack_1.default, { direction: "row", spacing: 1, sx: {
             pt: 1,
             pb: 1,
         }, justifyContent: "end", alignItems: "center" },
-        React.createElement(Stack, { direction: "row", spacing: 0.5, alignItems: "center" },
-            React.createElement(IconButton, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page - 1); }, disabled: page === firstPage, "aria-label": "Previous page" },
-                React.createElement(PreviousIcon, null)),
-            page !== firstPage && (React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(firstPage); } }, firstPage)),
-            isMoreBeforePages && (React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page - 3); } }, "...")),
-            beforePages.map(function (p) { return (React.createElement(Button, { key: p, size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(p); } }, p)); }),
-            React.createElement(Button, { variant: "soft", size: "sm" }, page),
-            afterPages.map(function (p) { return (React.createElement(Button, { key: p, size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(p); } }, p)); }),
-            isMoreAfterPages && (React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page + 3); } }, "...")),
-            page !== lastPage && (React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(lastPage); } }, lastPage)),
-            React.createElement(IconButton, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page + 1); }, disabled: page === lastPage, "aria-label": "Next page" },
-                React.createElement(NextIcon, null)))));
+        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.createElement(Box, { sx: {
+var Resizer = function (ref) { return (react_1.default.createElement(Box_1.default, { sx: {
         position: "absolute",
         top: 0,
         right: 0,
@@ -130,7 +159,7 @@ var Resizer = function (ref) { return (React.createElement(Box, { sx: {
         document.addEventListener("mousemove", onMouseMove);
         document.addEventListener("mouseup", onMouseUp);
     } })); };
-var Asterisk = styled("span", {
+var Asterisk = (0, joy_1.styled)("span", {
     name: "DataTable",
     slot: "headCellAsterisk",
 })(function (_a) {
@@ -142,7 +171,7 @@ var Asterisk = styled("span", {
 });
 var HeadCell = function (props) {
     var _a, _b, _c, _d, _e;
-    var ref = useRef(null);
+    var ref = (0, react_1.useRef)(null);
     var style = {
         width: props.width,
         minWidth: (_a = props.minWidth) !== null && _a !== void 0 ? _a : "50px",
@@ -151,8 +180,8 @@ var HeadCell = function (props) {
         position: props.stickyHeader ? undefined : "relative",
     };
     var resizer = ((_b = props.resizable) !== null && _b !== void 0 ? _b : true) ? Resizer(ref) : null;
-    return (React.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.createElement(Asterisk, 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) {
@@ -161,26 +190,26 @@ var BodyCell = function (props) {
     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 = useState(row[field]), value = _b[0], setValue = _b[1];
-    var cellRef = useRef(null);
+    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 = useMemo(function () { return ({
+    var params = (0, react_1.useMemo)(function () { return ({
         row: row,
         value: value,
         id: rowId,
     }); }, [row, rowId, value]);
-    var editMode = useMemo(function () {
+    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 = useMemo(function () { return (__assign(__assign({}, (typeof props.componentProps === "function"
+    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 = useMemo(function () { return (__assign(__assign(__assign({}, componentProps), { onChange: function (e) {
+    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);
@@ -209,49 +238,49 @@ var BodyCell = function (props) {
             (_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 = useMemo(function () {
+    var EditModeComponent = (0, react_1.useMemo)(function () {
         if (renderEditCell) {
             return renderEditCell(params);
         }
         return {
-            date: (React.createElement(DatePicker, __assign({ value: value }, editModeComponentProps))),
-            currency: (React.createElement(CurrencyInput, __assign({ value: value }, editModeComponentProps))),
-            number: (React.createElement(Input, __assign({ value: value, type: "number" }, editModeComponentProps))),
-            text: (React.createElement(Input, __assign({ value: value, type: "text" }, editModeComponentProps))),
-            longText: (React.createElement(Textarea, __assign({ value: value }, editModeComponentProps))),
-            autocomplete: (React.createElement(Autocomplete, __assign({ value: value, 
+            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.createElement(Select, __assign({ value: value, 
+            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 = useMemo(function () {
+    var ReadModeComponent = (0, react_1.useMemo)(function () {
         if (renderCell) {
             return renderCell(params);
         }
         var innerText = value;
         var typedComponent = {
-            link: React.createElement(props.component || Link, __assign({ children: innerText }, componentProps)),
+            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 = useMemo(function () {
+    var CellComponent = (0, react_1.useMemo)(function () {
         return editMode && EditModeComponent ? EditModeComponent : ReadModeComponent;
     }, [editMode, EditModeComponent, ReadModeComponent]);
-    var showTooltip = useMemo(function () { return noWrap && props.type === "longText"; }, [noWrap, props.type]);
+    var showTooltip = (0, react_1.useMemo)(function () { return noWrap && props.type === "longText"; }, [noWrap, props.type]);
     // effects
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         setValue(row[field]);
     }, [row, field]);
     // handlers
-    return (React.createElement("td", { ref: cellRef, key: field, headers: "".concat(tableId, "_header_").concat((_a = props.headerName) !== null && _a !== void 0 ? _a : field), style: {
+    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.createElement(Tooltip, { title: value, placement: "bottom", style: { maxWidth: "100%" }, enterDelay: 1500, enterNextDelay: 1500 },
-        React.createElement("div", { style: {
+        } }, 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)));
@@ -266,31 +295,31 @@ var BodyRow = function (props) {
     // calculated values
     // effects
     // handlers
-    return (React.createElement(React.Fragment, null, columns.map(function (column, i) { return (React.createElement(BodyCell, __assign({}, column, { tableId: tableId, key: "".concat(rowId, "_").concat(column.field.toString(), "_").concat(i), row: row, rowId: rowId, editMode: editMode, noWrap: noWrap }))); })));
+    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 = useState((paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.page) || 1), page = _c[0], setPage = _c[1];
+    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 = useCallback(function (row, index) {
+    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 = useMemo(function () { return new Set(selectionModel); }, [selectionModel]);
-    var dataInPage = useMemo(function () {
+    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 = useMemo(function () {
+    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 = useMemo(function () {
+    var isTotalSelected = (0, react_1.useMemo)(function () {
         return _isTotalSelected !== null && _isTotalSelected !== void 0 ? _isTotalSelected : (rowCount > 0 && selectionModel.length === rowCount);
     }, [_isTotalSelected, selectionModel, rowCount]);
-    var columns = useMemo(function () {
+    var columns = (0, react_1.useMemo)(function () {
         var baseColumns = columnsProp ||
             // fallback
             Object.keys(rows[0] || {}).map(function (key) { return ({
@@ -304,20 +333,20 @@ function useDataTableRenderer(_a) {
                         : (_a = column.isCellEditable) !== null && _a !== void 0 ? _a : true) }));
         });
     }, [rows, columnsProp, editMode]);
-    var handlePageChange = useCallback(function (newPage) {
+    var handlePageChange = (0, react_1.useCallback)(function (newPage) {
         setPage(newPage);
         onPaginationModelChange === null || onPaginationModelChange === void 0 ? void 0 : onPaginationModelChange({ page: newPage, pageSize: pageSize });
     }, [onPaginationModelChange, pageSize]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         handlePageChange(1);
     }, [rowCount, handlePageChange]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         var lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
         if (page > lastPage) {
             handlePageChange(lastPage);
         }
     }, [page, rowCount, pageSize, handlePageChange]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange([]);
     }, [page]);
     return {
@@ -331,11 +360,11 @@ function useDataTableRenderer(_a) {
         dataInPage: dataInPage,
         isAllSelected: isAllSelected, // all rows are selected on this page
         isTotalSelected: isTotalSelected,
-        isSelectedRow: useCallback(function (model) { return selectedModelSet.has(model); }, [selectedModelSet]),
-        onAllCheckboxChange: useCallback(function () {
+        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: useCallback(function (event, selectedModel) {
+        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);
@@ -346,7 +375,7 @@ function useDataTableRenderer(_a) {
             }
         }, [selectionModel, onSelectionModelChange, selectedModelSet]),
         columns: columns,
-        onTotalSelect: useCallback(function () {
+        onTotalSelect: (0, react_1.useCallback)(function () {
             onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isTotalSelected ? [] : rows.map(getId), !isTotalSelected);
         }, [isTotalSelected, rows, onSelectionModelChange, getId]),
     };
@@ -358,80 +387,80 @@ function DataTable(props) {
     ___ = 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 : _c, Toolbar = _b.toolbar, Footer = _b.footer, _d = _b.loadingOverlay, LoadingOverlay = _d === void 0 ? function () { return (React.createElement(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"]);
+    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 = useId();
+    var tableId = (0, react_1.useId)();
     // form hooks
     // query hooks
     // calculated values
-    var paginationModel = useMemo(function () { return ({ page: page, pageSize: pageSize }); }, [page, pageSize]);
+    var paginationModel = (0, react_1.useMemo)(function () { return ({ page: page, pageSize: pageSize }); }, [page, pageSize]);
     // effects
     // handlers
-    return (React.createElement(Box, null,
-        (!!checkboxSelection || !!Toolbar) && (React.createElement(Stack, { direction: "row", sx: {
+    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.createElement(Stack, { direction: "row", spacing: 1 },
-                !isAllSelected && (React.createElement(Typography, { level: "body-xs" },
+            !!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.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
-                    React.createElement(Typography, { level: "body-xs" },
+                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.createElement(Button, { size: "sm", variant: "plain", onClick: onTotalSelect },
+                    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.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
-                    React.createElement(Typography, { level: "body-xs" },
+                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.createElement(Button, { size: "sm", variant: "plain", color: "danger", onClick: onTotalSelect }, "Cancel"))))),
-            Toolbar && React.createElement(Toolbar, __assign({}, (toolbarProps || {}))))),
-        React.createElement(Sheet, __assign({ variant: "outlined", sx: {
+                    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.createElement(Table, __assign({}, innerProps),
-                React.createElement("thead", null,
-                    React.createElement("tr", null,
-                        checkboxSelection && (React.createElement("th", { style: {
+            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.createElement(RenderCheckbox, __assign({ onChange: onAllCheckboxChange, checked: isAllSelected, indeterminate: (selectionModel || []).length > 0 && !isAllSelected }, checkboxProps)))),
-                        columns.map(function (c, i) { return (React.createElement(HeadCell, __assign({ tableId: tableId, key: "".concat(c.field.toString(), "_").concat(i), stickyHeader: props.stickyHeader, editMode: !!c.isCellEditable }, c))); }))),
-                React.createElement("tbody", null,
-                    React.createElement(OverlayWrapper, null, !!loading && (React.createElement("td", null,
-                        React.createElement(Box, { sx: {
+                            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.createElement(LoadingOverlay, null))))),
-                    React.createElement(OverlayWrapper, null),
+                            react_1.default.createElement(LoadingOverlay, null))))),
+                    react_1.default.createElement(OverlayWrapper, null),
                     dataInPage.map(function (row, rowIndex) {
                         var rowId = getId(row, rowIndex);
-                        return (React.createElement("tr", { key: rowId, role: checkboxSelection ? "checkbox" : undefined, tabIndex: checkboxSelection ? -1 : undefined, onClick: checkboxSelection
+                        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.createElement("th", { scope: "row", style: {
+                            checkboxSelection && (react_1.default.createElement("th", { scope: "row", style: {
                                     textAlign: "center",
                                 } },
-                                React.createElement(RenderCheckbox, __assign({ onChange: function (e) { return onCheckboxChange(e, rowId); }, checked: isSelectedRow(rowId) }, checkboxProps)))),
-                            React.createElement(BodyRow, { tableId: tableId, columns: columns, row: row, rowId: rowId, editMode: editMode, noWrap: props.noWrap })));
+                                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.createElement(Footer, null))),
-        pageSize < rowCount && pagination && (React.createElement(TablePagination, { paginationModel: paginationModel, rowCount: rowCount, onPageChange: onPaginationModelChange }))));
+                Footer && react_1.default.createElement(Footer, null))),
+        pageSize < rowCount && pagination && (react_1.default.createElement(TablePagination, { paginationModel: paginationModel, rowCount: rowCount, onPageChange: onPaginationModelChange }))));
 }
-export { DataTable };
+exports.DataTable = DataTable;
 DataTable.displayName = "DataTable";

package/dist/components/DataTable/index.js

@@ -1,3 +1,19 @@
-import { DataTable } from "./DataTable";
-export * from "./DataTable";
-export default DataTable;
+"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 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });