@ceed/cds 0.0.124 → 0.0.126

package/dist/components/CurrencyInput/hooks/use-currency-setting.js

@@ -0,0 +1,165 @@
+import IntlMessageFormat from "intl-messageformat";
+/**
+ * @see https://docs.adyen.com/development-resources/currency-codes/
+ */
+var CURRENCY_DECIMAL_MAP = {
+    AED: 2,
+    ALL: 2,
+    AMD: 2,
+    ANG: 2,
+    AOA: 2,
+    ARS: 2,
+    AUD: 2,
+    AWG: 2,
+    AZN: 2,
+    BAM: 2,
+    BBD: 2,
+    BDT: 2,
+    BGN: 2,
+    BHD: 3,
+    BMD: 2,
+    BND: 2,
+    BOB: 2,
+    BRL: 2,
+    BSD: 2,
+    BWP: 2,
+    BYN: 2,
+    BZD: 2,
+    CAD: 2,
+    CHF: 2,
+    CLP: 2,
+    CNH: 2,
+    CNY: 2,
+    COP: 2,
+    CRC: 2,
+    CUP: 2,
+    CVE: 0,
+    CZK: 2,
+    DJF: 0,
+    DKK: 2,
+    DOP: 2,
+    DZD: 2,
+    EGP: 2,
+    ETB: 2,
+    EUR: 2,
+    FJD: 2,
+    FKP: 2,
+    GBP: 2,
+    GEL: 2,
+    GHS: 2,
+    GIP: 2,
+    GMD: 2,
+    GNF: 0,
+    GTQ: 2,
+    GYD: 2,
+    HKD: 2,
+    HNL: 2,
+    HTG: 2,
+    HUF: 2,
+    IDR: 0,
+    ILS: 2,
+    INR: 2,
+    IQD: 3,
+    ISK: 2,
+    JMD: 2,
+    JOD: 3,
+    JPY: 0,
+    KES: 2,
+    KGS: 2,
+    KHR: 2,
+    KMF: 0,
+    KRW: 0,
+    KWD: 3,
+    KYD: 2,
+    KZT: 2,
+    LAK: 2,
+    LBP: 2,
+    LKR: 2,
+    LYD: 3,
+    MAD: 2,
+    MDL: 2,
+    MKD: 2,
+    MMK: 2,
+    MNT: 2,
+    MOP: 2,
+    MRU: 2,
+    MUR: 2,
+    MVR: 2,
+    MWK: 2,
+    MXN: 2,
+    MYR: 2,
+    MZN: 2,
+    NAD: 2,
+    NGN: 2,
+    NIO: 2,
+    NOK: 2,
+    NPR: 2,
+    NZD: 2,
+    OMR: 3,
+    PAB: 2,
+    PEN: 2,
+    PGK: 2,
+    PHP: 2,
+    PKR: 2,
+    PLN: 2,
+    PYG: 0,
+    QAR: 2,
+    RON: 2,
+    RSD: 2,
+    RUB: 2,
+    RWF: 0,
+    SAR: 2,
+    SBD: 2,
+    SCR: 2,
+    SEK: 2,
+    SGD: 2,
+    SHP: 2,
+    SLE: 2,
+    SOS: 2,
+    SRD: 2,
+    STN: 2,
+    SVC: 2,
+    SZL: 2,
+    THB: 2,
+    TND: 3,
+    TOP: 2,
+    TRY: 2,
+    TTD: 2,
+    TWD: 2,
+    TZS: 2,
+    UAH: 2,
+    UGX: 0,
+    USD: 2,
+    UYU: 2,
+    UZS: 2,
+    VEF: 2,
+    VND: 0,
+    VUV: 0,
+    WST: 2,
+    XAF: 0,
+    XCD: 2,
+    XOF: 0,
+    XPF: 0,
+    YER: 2,
+    ZAR: 2,
+    ZMW: 2,
+};
+export var useCurrencySetting = function (currencyCode) {
+    if (currencyCode === void 0) { currencyCode = "USD"; }
+    var _a = new IntlMessageFormat("{amount, number, ::currency/".concat(currencyCode, " unit-width-narrow}"))
+        .format({ amount: 1000 })
+        .toString()
+        .replace(/\d/g, "")
+        .split(""), symbol = _a[0], thousandSeparator = _a[1], decimalSeparator = _a[2], rest = _a.slice(3);
+    var decimalScale = CURRENCY_DECIMAL_MAP[currencyCode];
+    return {
+        symbol: "".concat(symbol, " "),
+        thousandSeparator: thousandSeparator,
+        decimalSeparator: decimalSeparator,
+        placeholder: decimalSeparator
+            ? "".concat(symbol, " 0").concat(decimalSeparator).concat(Array.from(Array(decimalScale)).map(function () { return 0; }).join(''))
+            : "".concat(symbol, " 0"),
+        fixedDecimalScale: !!decimalSeparator,
+        decimalScale: decimalScale,
+    };
+};

package/dist/components/CurrencyInput/index.js

@@ -0,0 +1,3 @@
+import { CurrencyInput } from './CurrencyInput';
+export * from './CurrencyInput';
+export default CurrencyInput;

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,437 @@
+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 __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));
+};
+import React, { useCallback, useEffect, useMemo, useRef, useState, useId, } from "react";
+import { styled, LinearProgress, Link } from "@mui/joy";
+// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
+import PreviousIcon from "@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";
+function getTextAlign(props) {
+    return !props.editMode &&
+        ["number", "date", "currency"].includes(props.type || "")
+        ? "end"
+        : "start";
+}
+var 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",
+    },
+});
+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.createElement(Stack, { 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)))));
+}
+var Resizer = function (ref) { return (React.createElement(Box, { 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 = 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 = 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.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, "*"),
+        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 = useState(row[field]), value = _b[0], setValue = _b[1];
+    var cellRef = useRef(null);
+    // form hooks
+    // query hooks
+    // calculated values
+    var params = useMemo(function () { return ({
+        row: row,
+        value: value,
+        id: rowId,
+    }); }, [row, rowId, value]);
+    var editMode = 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"
+        ? props.componentProps(params)
+        : props.componentProps || {})), { size: "sm" })); }, [props, params]);
+    var editModeComponentProps = 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 = 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, 
+                // @ts-expect-error NOTE: editComponentProps로 option이 넘어오면 Override되어야 한다
+                options: editModeComponentProps.options || [value] }, editModeComponentProps))),
+            select: (React.createElement(Select, __assign({ value: value, 
+                // @ts-expect-error NOTE: editComponentProps로 option이 넘어오면 Override되어야 한다
+                options: editModeComponentProps.options || [value] }, editModeComponentProps))),
+        }[type || "text"];
+    }, [value, editModeComponentProps, type]);
+    var ReadModeComponent = useMemo(function () {
+        if (renderCell) {
+            return renderCell(params);
+        }
+        var innerText = value;
+        var typedComponent = {
+            link: React.createElement(props.component || Link, __assign({ children: innerText }, componentProps)),
+        }[type || "text"];
+        return typedComponent || innerText;
+    }, [value, renderCell, params, type, componentProps, props]);
+    var CellComponent = useMemo(function () {
+        return editMode && EditModeComponent ? EditModeComponent : ReadModeComponent;
+    }, [editMode, EditModeComponent, ReadModeComponent]);
+    var showTooltip = useMemo(function () { return noWrap && props.type === "longText"; }, [noWrap, props.type]);
+    // effects
+    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: {
+            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: {
+                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.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 }))); })));
+};
+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 pageSize = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSize) || 20;
+    var getId = 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 () {
+        return !pagination || paginationMode === "server"
+            ? rows
+            : rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
+    }, [rows, page, pageSize, paginationMode, pagination]);
+    var isAllSelected = 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 () {
+        return _isTotalSelected !== null && _isTotalSelected !== void 0 ? _isTotalSelected : (rowCount > 0 && selectionModel.length === rowCount);
+    }, [_isTotalSelected, selectionModel, rowCount]);
+    var columns = 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 = useCallback(function (newPage) {
+        setPage(newPage);
+        onPaginationModelChange === null || onPaginationModelChange === void 0 ? void 0 : onPaginationModelChange({ page: newPage, pageSize: pageSize });
+    }, [onPaginationModelChange, pageSize]);
+    useEffect(function () {
+        handlePageChange(1);
+    }, [rowCount, handlePageChange]);
+    useEffect(function () {
+        var lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
+        if (page > lastPage) {
+            handlePageChange(lastPage);
+        }
+    }, [page, rowCount, pageSize, handlePageChange]);
+    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: useCallback(function (model) { return selectedModelSet.has(model); }, [selectedModelSet]),
+        onAllCheckboxChange: useCallback(function () {
+            onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isAllSelected ? [] : dataInPage.map(getId));
+        }, [isAllSelected, dataInPage, onSelectionModelChange, getId]),
+        onCheckboxChange: 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: 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 : _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"]);
+    // 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();
+    // form hooks
+    // query hooks
+    // calculated values
+    var paginationModel = useMemo(function () { return ({ page: page, pageSize: pageSize }); }, [page, pageSize]);
+    // effects
+    // handlers
+    return (React.createElement(Box, null,
+        (!!checkboxSelection || !!Toolbar) && (React.createElement(Stack, { 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" },
+                    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" },
+                        "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 },
+                        "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" },
+                        "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: {
+                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: {
+                                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: {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                            } },
+                            React.createElement(LoadingOverlay, null))))),
+                    React.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
+                                ? function (e) { return onCheckboxChange(e, rowId); }
+                                : undefined, "aria-checked": checkboxSelection ? isSelectedRow(rowId) : undefined },
+                            checkboxSelection && (React.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 })));
+                    })),
+                Footer && React.createElement(Footer, null))),
+        pageSize < rowCount && pagination && (React.createElement(TablePagination, { paginationModel: paginationModel, rowCount: rowCount, onPageChange: onPaginationModelChange }))));
+}
+export { DataTable };
+DataTable.displayName = "DataTable";

package/dist/components/DataTable/index.js

@@ -0,0 +1,3 @@
+import { DataTable } from "./DataTable";
+export * from "./DataTable";
+export default DataTable;

package/dist/components/DataTable/types.js

@@ -0,0 +1 @@
+export {};