@ceed/ads 0.0.22 → 0.0.24

package/dist/components/Button/Button.d.ts

@@ -1,8 +1,25 @@
 import React from "react";
-import { ButtonProps } from "@mui/joy";
 import { MotionProps } from "framer-motion";
-declare const Button: {
-    (props: ButtonProps & MotionProps): React.JSX.Element;
-    displayName: string;
-};
+declare const Button: React.ForwardRefExoticComponent<Omit<{
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+} & import("@mui/joy").ButtonSlotsAndSlotProps & {
+    action?: React.Ref<{
+        focusVisible(): void;
+    }> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").ButtonPropsColorOverrides> | undefined;
+    disabled?: boolean | undefined;
+    endDecorator?: React.ReactNode;
+    focusVisibleClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"sm" | "md" | "lg", import("@mui/joy").ButtonPropsSizeOverrides> | undefined;
+    startDecorator?: React.ReactNode;
+    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+    tabIndex?: number | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").ButtonPropsVariantOverrides> | undefined;
+    loading?: boolean | undefined;
+    loadingIndicator?: React.ReactNode;
+    loadingPosition?: "center" | "end" | "start" | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "tabIndex" | "variant" | "sx" | "disabled" | "size" | "component" | keyof import("@mui/joy").ButtonSlotsAndSlotProps | "action" | "endDecorator" | "focusVisibleClassName" | "fullWidth" | "startDecorator" | "loading" | "loadingIndicator" | "loadingPosition"> & MotionProps, "ref"> & React.RefAttributes<unknown>>;
 export { Button };

package/dist/components/Button/Button.js

@@ -9,11 +9,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React from "react";
+import React, { forwardRef } from "react";
 import { Button as JoyButton } from "@mui/joy";
 import { motion } from "framer-motion";
 var MotionButton = motion(JoyButton);
-var Button = function (props) {
+var Button = forwardRef(function (props) {
     // prop destruction
     // lib hooks
     // state, ref, querystring hooks
@@ -23,6 +23,6 @@ var Button = function (props) {
     // effects
     // handlers
     return (React.createElement(MotionButton, __assign({}, props)));
-};
+});
 export { Button };
 Button.displayName = "Button";

package/dist/components/Container/Container.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 declare const Container: React.ForwardRefExoticComponent<Omit<import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme> & {
-    maxWidth?: "tablet" | "laptop" | "desktop" | undefined;
+    maxWidth?: "sm" | "md" | "lg" | "xl" | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Container };

package/dist/components/Container/Container.js

@@ -16,21 +16,25 @@ var ContainerRoot = styled("div", {
     slot: "root",
     shouldForwardProp: function (prop) { return prop !== "maxWidth"; },
 })(function (_a) {
-    var _b, _c, _d;
-    var theme = _a.theme, _e = _a.maxWidth, maxWidth = _e === void 0 ? "desktop" : _e;
-    return (__assign(__assign(__assign({ width: "100%", marginLeft: "auto", boxSizing: "border-box", marginRight: "auto", display: "block", paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2) }, (maxWidth === "tablet" && (_b = {},
-        _b[theme.breakpoints.up("mobile")] = {
-            maxWidth: theme.breakpoints.values.tablet,
+    var _b, _c, _d, _e;
+    var theme = _a.theme, _f = _a.maxWidth, maxWidth = _f === void 0 ? "lg" : _f;
+    return (__assign(__assign(__assign(__assign({ width: "100%", marginLeft: "auto", boxSizing: "border-box", marginRight: "auto", display: "block", paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2) }, (maxWidth === "sm" && (_b = {},
+        _b[theme.breakpoints.up("xs")] = {
+            maxWidth: theme.breakpoints.values.sm,
         },
-        _b))), (maxWidth === "laptop" && (_c = {},
-        _c[theme.breakpoints.up("tablet")] = {
-            maxWidth: theme.breakpoints.values.laptop,
+        _b))), (maxWidth === "md" && (_c = {},
+        _c[theme.breakpoints.up("sm")] = {
+            maxWidth: theme.breakpoints.values.md,
         },
-        _c))), (maxWidth === "desktop" && (_d = {},
-        _d[theme.breakpoints.up("laptop")] = {
-            maxWidth: theme.breakpoints.values.desktop,
+        _c))), (maxWidth === "lg" && (_d = {},
+        _d[theme.breakpoints.up("md")] = {
+            maxWidth: theme.breakpoints.values.lg,
         },
-        _d))));
+        _d))), (maxWidth === "xl" && (_e = {},
+        _e[theme.breakpoints.up("lg")] = {
+            maxWidth: theme.breakpoints.values.xl,
+        },
+        _e))));
 });
 var Container = forwardRef(function Container(props, ref) {
     // prop destruction

package/dist/components/DataTable/DataTable.d.ts

@@ -1,27 +1,36 @@
 import React, { ComponentProps } from "react";
-import { Table, TableBody, TableHead } from "../Table";
+import { Table } from "../Table";
+type Column<T extends Record<string, unknown>> = {
+    type?: "number" | "string";
+    field: keyof T;
+    headerName?: string;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    resizable?: boolean;
+};
 type DataTableProps<T extends Record<string, unknown>> = {
-    data: T[];
-    showCheckbox?: boolean;
-    onCheckboxChange?: (event: any, selectedModel: string) => void;
+    rows: T[];
+    checkboxSelection?: boolean;
+    columns: Column<T>[];
     /**
      * 체크박스가 있는 경우, 체크박스를 클릭했을 때 선택된 row의 index를 지정한다.
      */
     selectionModel?: string[];
     onSelectionModelChange?: (newSelectionModel: string[]) => void;
-    /**
-     * 페이지네이션을 위한 prop
-     * 별도로 지정하지 않으면, data prop 기반의 페이지네이션을 사용한다.
-     */
-    page?: number;
-    onPageChange?: (newPage: number) => void;
-    rowsPerPage?: number;
+    paginationModel?: {
+        page: number;
+        pageSize: number;
+    };
+    onPaginationModelChange?: (model: {
+        page: number;
+        pageSize: number;
+    }) => void;
     /**
      * Rows의 총 갯수를 직접 지정 할 수 있다.
-     * 이 값이 주어지면, data prop 기반의 페이지네이션을 사용하지 않는다.
-     * data lazy loading을 위한 prop
+     * 기본적으로는 rows.length를 사용하지만, 이 값을 지정하면 rows.length를 사용하지 않는다.
      */
-    totalRows?: number;
+    rowCount?: number;
     slots?: {
         checkbox?: React.ElementType;
         toolbar?: React.ElementType;
@@ -39,7 +48,7 @@ type DataTableProps<T extends Record<string, unknown>> = {
             [key: string]: any;
         }>;
     };
-} & ComponentProps<typeof Table> & Pick<ComponentProps<typeof TableHead>, "headCells"> & Pick<ComponentProps<typeof TableBody>, "cellOrder">;
+} & ComponentProps<typeof Table>;
 declare function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>): React.JSX.Element;
 declare namespace DataTable {
     var displayName: string;

package/dist/components/DataTable/DataTable.js

@@ -29,24 +29,27 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import React, { useCallback, useEffect, useMemo, useState, } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import Sheet from "../Sheet";
-import { Table, TableHead } from "../Table";
+import { Table } from "../Table";
 import Checkbox from "../Checkbox";
 import Box from "../Box";
 import Stack from "../Stack";
 import Typography from "../Typography";
 import Button from "../Button";
+var numberFormatter = function (value) {
+    return "Intl" in window ? new Intl.NumberFormat().format(value) : value;
+};
 function TablePagination(props) {
     // prop destruction
-    var page = props.page, rowsPerPage = props.rowsPerPage, totalRows = props.totalRows, onPageChange = props.onPageChange;
+    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(totalRows / rowsPerPage);
+    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;
@@ -69,82 +72,133 @@ function TablePagination(props) {
             React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page + 1); }, disabled: page === lastPage, "aria-label": "Next page" }, ">"))));
 }
 function useDataTableRenderer(_a) {
-    var data = _a.data, cellOrder = _a.cellOrder, headCells = _a.headCells, totalRowsProp = _a.totalRows, _b = _a.page, pageProp = _b === void 0 ? 1 : _b, onPageChange = _a.onPageChange, rowsPerPage = _a.rowsPerPage, _c = _a.selectionModel, selectionModel = _c === void 0 ? [] : _c, onSelectionModelChange = _a.onSelectionModelChange, onCheckboxChange = _a.onCheckboxChange;
-    var _d = useState(pageProp), page = _d[0], setPage = _d[1];
+    var rows = _a.rows, columns = _a.columns, totalRowsProp = _a.rowCount, paginationModel = _a.paginationModel, onPaginationModelChange = _a.onPaginationModelChange, _b = _a.selectionModel, selectionModel = _b === void 0 ? [] : _b, onSelectionModelChange = _a.onSelectionModelChange, stickyHeader = _a.stickyHeader;
+    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 selectedModelSet = useMemo(function () { return new Set(selectionModel); }, [selectionModel]);
-    var dataInPage = useMemo(function () {
-        return data.slice((page - 1) * rowsPerPage, (page - 1) * rowsPerPage + rowsPerPage);
-    }, [data, page, rowsPerPage]);
+    var dataInPage = useMemo(function () { return rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize); }, [rows, page, pageSize]);
     var isAllSelected = useMemo(function () {
         return dataInPage.length > 0 &&
             dataInPage.every(function (_, i) {
-                return selectedModelSet.has("".concat(i + (page - 1) * rowsPerPage));
+                return selectedModelSet.has("".concat(i + (page - 1) * pageSize));
             });
-    }, [dataInPage, selectedModelSet, page, rowsPerPage]);
-    var totalRows = totalRowsProp || data.length;
-    var isTotalSelected = useMemo(function () { return totalRows > 0 && selectionModel.length === totalRows; }, [selectionModel, totalRows]);
+    }, [dataInPage, selectedModelSet, page, pageSize]);
+    var rowCount = totalRowsProp || rows.length;
+    var isTotalSelected = useMemo(function () { return rowCount > 0 && selectionModel.length === rowCount; }, [selectionModel, rowCount]);
     var handlePageChange = useCallback(function (newPage) {
         setPage(newPage);
-        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(newPage);
-    }, [onPageChange]);
+        onPaginationModelChange === null || onPaginationModelChange === void 0 ? void 0 : onPaginationModelChange({ page: newPage, pageSize: pageSize });
+    }, [onPaginationModelChange]);
     useEffect(function () {
         handlePageChange(1);
-    }, [totalRows]);
+    }, [rowCount]);
     useEffect(function () {
-        if (page > Math.ceil(totalRows / rowsPerPage)) {
-            handlePageChange(Math.ceil(totalRows / rowsPerPage));
+        if (page > Math.ceil(rowCount / pageSize)) {
+            handlePageChange(Math.ceil(rowCount / pageSize));
         }
-    }, [totalRows, rowsPerPage]);
+    }, [rowCount, pageSize]);
     useEffect(function () {
         onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange([]);
     }, [page]);
     return {
-        totalRows: totalRows,
+        rowCount: rowCount,
         page: page,
-        onPageChange: handlePageChange,
+        pageSize: pageSize,
+        onPaginationModelChange: handlePageChange,
+        getColumnHeader: useCallback(function (column) {
+            var _a, _b;
+            var ref = useRef(null);
+            var style = useMemo(function () {
+                return ({
+                    width: column.width,
+                    minWidth: column.minWidth,
+                    maxWidth: column.maxWidth,
+                    textAlign: column.type === "number" ? "end" : "start",
+                    position: stickyHeader ? undefined : "relative",
+                });
+            }, [column, stickyHeader]);
+            useEffect(function () {
+                if (column.resizable && ref.current) {
+                    var resizeObserver_1 = new ResizeObserver(function (entries) {
+                        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                            var entry = entries_1[_i];
+                            var width = entry.contentRect.width;
+                            if (width && ref.current) {
+                                ref.current.style.width = "".concat(width, "px");
+                            }
+                        }
+                    });
+                    resizeObserver_1.observe(ref.current);
+                    return function () {
+                        resizeObserver_1.disconnect();
+                    };
+                }
+            }, [column.resizable, ref.current]);
+            var resizer = ((_a = column.resizable) !== null && _a !== void 0 ? _a : true) ? (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);
+                } })) : null;
+            return (React.createElement("th", { ref: ref, key: column.field, style: style }, (_b = column.headerName) !== null && _b !== void 0 ? _b : column.field,
+                resizer));
+        }, [stickyHeader, columns]),
         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 () {
-            return onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isAllSelected
+            onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isAllSelected
                 ? []
-                : dataInPage.map(function (_, i) { return "".concat(i + (page - 1) * rowsPerPage); }));
+                : dataInPage.map(function (_, i) { return "".concat(i + (page - 1) * pageSize); }));
         }, [isAllSelected, dataInPage, onSelectionModelChange]),
         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);
-                onCheckboxChange === null || onCheckboxChange === void 0 ? void 0 : onCheckboxChange(event, selectedModel);
             }
             else {
-                onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(__spreadArray(__spreadArray([], selectionModel, true), [selectedModel], false));
+                var newSelectionModel = __spreadArray(__spreadArray([], selectionModel, true), [selectedModel], false);
+                onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel);
             }
         }, [selectionModel, onSelectionModelChange]),
-        renderCellOrder: useMemo(function () { return cellOrder || Object.keys(data[0] || {}); }, [data, cellOrder]),
-        renderHeadCells: useMemo(function () {
-            return headCells ||
+        columns: useMemo(function () {
+            return columns ||
                 // fallback
-                Object.keys(data[0] || {}).map(function (key) { return ({
-                    label: key,
+                Object.keys(rows[0] || {}).map(function (key) { return ({
+                    field: key,
                 }); });
-        }, [data, headCells]),
+        }, [rows, columns]),
         onTotalSelect: useCallback(function () {
-            onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isTotalSelected ? [] : data.map(function (_, i) { return "".concat(i); }));
-        }, [isTotalSelected, data, onSelectionModelChange]),
+            onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isTotalSelected ? [] : rows.map(function (_, i) { return "".concat(i); }));
+        }, [isTotalSelected, rows, onSelectionModelChange]),
     };
 }
 function DataTable(props) {
     // prop destruction
-    var data = props.data, showCheckbox = props.showCheckbox, headCells = props.headCells, cellOrder = props.cellOrder, selectionModel = props.selectionModel, onSelectionModelChange = props.onSelectionModelChange, _ = props.totalRows, // totalRows is used in useDataTableRenderer
-    _a = props.rowsPerPage, // totalRows is used in useDataTableRenderer
-    rowsPerPage = _a === void 0 ? 20 : _a, _page = props.page, // page is used in useDataTableRenderer
-    _onPageChange = props.onPageChange, // onPageChange is used in useDataTableRenderer
-    _onCheckboxChange = props.onCheckboxChange, // onCheckboxChange is used in useDataTableRenderer
-    _b = props.slots, // onCheckboxChange is used in useDataTableRenderer
-    _c = _b === void 0 ? {} : _b, _d = _c.checkbox, RenderCheckbox = _d === void 0 ? Checkbox : _d, Toolbar = _c.toolbar, Footer = _c.footer, _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, ["data", "showCheckbox", "headCells", "cellOrder", "selectionModel", "onSelectionModelChange", "totalRows", "rowsPerPage", "page", "onPageChange", "onCheckboxChange", "slots", "slotProps"]);
+    var rows = props.rows, checkboxSelection = props.checkboxSelection, 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
+    paginationModel = props.paginationModel, _a = props.slots, _b = _a === void 0 ? {} : _a, _c = _b.checkbox, RenderCheckbox = _c === void 0 ? Checkbox : _c, Toolbar = _b.toolbar, Footer = _b.footer, _d = props.slotProps, _e = _d === void 0 ? {} : _d, _f = _e.checkbox, checkboxProps = _f === void 0 ? {} : _f, toolbarProps = _e.toolbar, _g = _e.background, backgroundProps = _g === void 0 ? {} : _g, innerProps = __rest(props, ["rows", "checkboxSelection", "selectionModel", "onSelectionModelChange", "rowCount", "columns", "onPaginationModelChange", "paginationModel", "slots", "slotProps"]);
     // lib hooks
-    var _j = useDataTableRenderer(__assign(__assign({}, props), { rowsPerPage: rowsPerPage })), renderCellOrder = _j.renderCellOrder, renderHeadCells = _j.renderHeadCells, isAllSelected = _j.isAllSelected, isSelectedRow = _j.isSelectedRow, onAllCheckboxChange = _j.onAllCheckboxChange, onCheckboxChange = _j.onCheckboxChange, totalRows = _j.totalRows, page = _j.page, onPageChange = _j.onPageChange, dataInPage = _j.dataInPage, isTotalSelected = _j.isTotalSelected, onTotalSelect = _j.onTotalSelect;
+    var _h = useDataTableRenderer(props), columns = _h.columns, isAllSelected = _h.isAllSelected, isSelectedRow = _h.isSelectedRow, onAllCheckboxChange = _h.onAllCheckboxChange, onCheckboxChange = _h.onCheckboxChange, rowCount = _h.rowCount, page = _h.page, pageSize = _h.pageSize, onPaginationModelChange = _h.onPaginationModelChange, dataInPage = _h.dataInPage, isTotalSelected = _h.isTotalSelected, onTotalSelect = _h.onTotalSelect, getColumnHeader = _h.getColumnHeader;
     // state, ref, querystring hooks
     // form hooks
     // query hooks
@@ -158,21 +212,21 @@ function DataTable(props) {
             }, justifyContent: "space-between", alignItems: "center" },
             React.createElement(Stack, { direction: "row", spacing: 1 },
                 !isAllSelected && (React.createElement(Typography, { level: "body-xs" },
-                    (selectionModel === null || selectionModel === void 0 ? void 0 : selectionModel.length) || 0,
+                    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 ", selectionModel === null || selectionModel === void 0 ? void 0 :
-                        selectionModel.length,
+                        "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 ",
-                        data.length,
+                        numberFormatter(rows.length),
                         " items"))),
                 isTotalSelected && (React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
                     React.createElement(Typography, { level: "body-xs" },
                         "All ",
-                        data.length,
+                        numberFormatter(rows.length),
                         " items are selected."),
                     React.createElement(Button, { size: "sm", variant: "plain", color: "danger", onClick: onTotalSelect }, "Cancel")))),
             Toolbar && React.createElement(Toolbar, __assign({}, (toolbarProps || {})))),
@@ -190,14 +244,19 @@ function DataTable(props) {
                         },
                     },
                 ] }, innerProps),
-                React.createElement(TableHead, { showCheckbox: showCheckbox, headCells: renderHeadCells || [], onCheckboxChange: onAllCheckboxChange, slotProps: {
-                        checkbox: __assign({ checked: isAllSelected, indeterminate: (selectionModel || []).length > 0 && !isAllSelected }, checkboxProps),
-                    } }),
+                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(getColumnHeader))),
                 React.createElement("tbody", null, dataInPage.map(function (row, rowIndex) {
-                    var rowId = "".concat(rowIndex + (page - 1) * rowsPerPage);
-                    return (React.createElement("tr", { key: rowId, role: showCheckbox ? "checkbox" : undefined, tabIndex: showCheckbox ? -1 : undefined, onClick: showCheckbox
+                    var rowId = "".concat(rowIndex + (page - 1) * pageSize);
+                    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": showCheckbox ? isSelectedRow(rowId) : undefined, style: showCheckbox && isSelectedRow(rowId)
+                            : undefined, "aria-checked": checkboxSelection ? isSelectedRow(rowId) : undefined, style: checkboxSelection && isSelectedRow(rowId)
                             ? {
                                 "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
                                 "--TableCell-headBackground": "var(--TableCell-selectedBackground)",
@@ -205,14 +264,16 @@ function DataTable(props) {
                             : {
                                 "--TableCell-headBackground": "transparent",
                             } },
-                        showCheckbox && (React.createElement("th", { scope: "row", style: {
+                        checkboxSelection && (React.createElement("th", { scope: "row", style: {
                                 textAlign: "center",
                             } },
                             React.createElement(RenderCheckbox, __assign({ onChange: function (e) { return onCheckboxChange(e, rowId); }, checked: isSelectedRow(rowId) }, checkboxProps)))),
-                        renderCellOrder.map(function (cellKey) { return (React.createElement("td", { key: cellKey }, row[cellKey])); })));
+                        columns.map(function (column) { return (React.createElement("td", { key: column.field, style: {
+                                textAlign: column.type === "number" ? "end" : "start",
+                            } }, row[column.field])); })));
                 })),
                 Footer && React.createElement(Footer, null))),
-        React.createElement(TablePagination, { page: page, rowsPerPage: rowsPerPage, totalRows: totalRows, onPageChange: onPageChange, onRowsPerPageChange: function () { } })));
+        React.createElement(TablePagination, { paginationModel: { page: page, pageSize: pageSize }, rowCount: rowCount, onPageChange: onPaginationModelChange, onRowsPerPageChange: function () { } })));
 }
 export { DataTable };
 DataTable.displayName = "DataTable";

package/dist/components/DialogFrame/DialogFrame.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ModalDialog } from "../Modal";
+declare function DialogFrame(props: {
+    title: React.ReactNode;
+    children: React.ReactNode;
+    actions: React.ReactNode;
+} & React.ComponentProps<typeof ModalDialog>): React.JSX.Element;
+declare namespace DialogFrame {
+    var displayName: string;
+}
+export { DialogFrame };

package/dist/components/DialogFrame/DialogFrame.js

@@ -0,0 +1,44 @@
+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;
+};
+import React from "react";
+import DialogTitle from "../DialogTitle";
+import DialogContent from "../DialogContent";
+import { ModalDialog } from "../Modal";
+import DialogActions from "../DialogActions";
+function DialogFrame(props) {
+    // prop destruction
+    var title = props.title, children = props.children, actions = props.actions, innerProps = __rest(props, ["title", "children", "actions"]);
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(ModalDialog, __assign({}, innerProps),
+        React.createElement(DialogTitle, null, title),
+        React.createElement(DialogContent, null, children),
+        React.createElement(DialogActions, null, actions)));
+}
+export { DialogFrame };
+DialogFrame.displayName = "DialogFrame";

package/dist/components/DialogFrame/index.d.ts

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

package/dist/components/DialogFrame/index.js

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

package/dist/components/Modal/Modal.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 declare const Modal: import("framer-motion").CustomDomComponent<Pick<import("@mui/base").ModalOwnProps, "children" | "container" | "open" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted"> & {
-    onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown" | "closeClick") => void) | undefined;
+    onClose?: ((event: {}, reason: "escapeKeyDown" | "backdropClick" | "closeClick") => void) | undefined;
     sx?: import("@mui/joy/styles/types").SxProps | undefined;
 } & import("@mui/joy").ModalSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -1,17 +1,4 @@
 import React from "react";
-declare module "@mui/joy/styles" {
-    interface BreakpointOverrides {
-        xs: false;
-        sm: false;
-        md: false;
-        lg: false;
-        xl: false;
-        mobile: true;
-        tablet: true;
-        laptop: true;
-        desktop: true;
-    }
-}
 declare function ThemeProvider(props: {
     children?: React.ReactNode;
 }): React.JSX.Element;

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -2,14 +2,6 @@ import React from "react";
 import { CssBaseline, CssVarsProvider, checkboxClasses, extendTheme, } from "@mui/joy";
 var defaultTheme = extendTheme({
     cssVarPrefix: "ceed",
-    breakpoints: {
-        values: {
-            mobile: 0,
-            tablet: 768,
-            laptop: 1024,
-            desktop: 1280,
-        },
-    },
     components: {
         JoyTable: {
             defaultProps: {
@@ -29,6 +21,12 @@ var defaultTheme = extendTheme({
                 },
             },
         },
+        JoyTooltip: {
+            defaultProps: {
+                size: "sm",
+                placement: "top",
+            },
+        },
     },
 });
 function ThemeProvider(props) {

package/dist/components/index.d.ts

@@ -7,6 +7,7 @@ export { DataTable } from "./DataTable";
 export { DialogActions } from "./DialogActions";
 export { DialogContent } from "./DialogContent";
 export { DialogTitle } from "./DialogTitle";
+export { DialogFrame } from "./DialogFrame";
 export { Divider } from "./Divider";
 export { InsetDrawer } from "./InsetDrawer";
 export { Dropdown } from "./Dropdown";

package/dist/components/index.js

@@ -7,6 +7,7 @@ export { DataTable } from "./DataTable";
 export { DialogActions } from "./DialogActions";
 export { DialogContent } from "./DialogContent";
 export { DialogTitle } from "./DialogTitle";
+export { DialogFrame } from "./DialogFrame";
 export { Divider } from "./Divider";
 export { InsetDrawer } from "./InsetDrawer";
 export { Dropdown } from "./Dropdown";

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { boxClasses, buttonClasses, checkboxClasses, dividerClasses, iconButtonClasses, inputClasses, menuClasses, menuButtonClasses, menuItemClasses, optionClasses, radioClasses, radioGroupClasses, selectClasses, switchClasses, tableClasses, textareaClasses, typographyClasses, formControlClasses, formLabelClasses, formHelperTextClasses, gridClasses, stackClasses, sheetClasses, modalClasses, modalCloseClasses, modalDialogClasses, modalOverflowClasses, dialogTitleClasses, dialogContentClasses, dialogActionsClasses, tooltipClasses, tabsClasses, tabListClasses, tabPanelClasses, accordionClasses, accordionDetailsClasses, accordionGroupClasses as accordionsClasses, accordionSummaryClasses, Avatar, avatarClasses, AvatarGroup, avatarGroupClasses, AspectRatio, aspectRatioClasses, Badge, badgeClasses, Breadcrumbs, breadcrumbsClasses, Card, cardClasses, CardActions, cardActionsClasses, CardContent, cardContentClasses, CardCover, cardCoverClasses, CardOverflow, cardOverflowClasses, Chip, chipClasses, CircularProgress, circularProgressClasses, Drawer, drawerClasses, LinearProgress, linearProgressClasses, List, listClasses, ListDivider, listDividerClasses, ListItem, listItemClasses, ListItemButton, listItemButtonClasses, ListItemContent, listItemContentClasses, ListItemDecorator, listItemDecoratorClasses, ListSubheader, listSubheaderClasses, Link, linkClasses, Slider, sliderClasses, Step, stepClasses, StepButton, stepButtonClasses, StepIndicator, Stepper, stepperClasses, Skeleton, skeletonClasses, } from "@mui/joy";
-export { Accordion, Accordions, AccordionDetails, AccordionSummary, Box, Button, Checkbox, Container, DataTable, DialogActions, DialogContent, DialogTitle, Divider, Dropdown, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, Radio, RadioGroup, RadioList, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";
+export { Accordion, Accordions, AccordionDetails, AccordionSummary, Box, Button, Checkbox, Container, DataTable, DialogActions, DialogContent, DialogTitle, DialogFrame, Divider, Dropdown, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, Radio, RadioGroup, RadioList, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";

package/dist/index.js

@@ -3,4 +3,4 @@ export {
 boxClasses, buttonClasses, checkboxClasses, dividerClasses, iconButtonClasses, inputClasses, menuClasses, menuButtonClasses, menuItemClasses, optionClasses, radioClasses, radioGroupClasses, selectClasses, switchClasses, tableClasses, textareaClasses, typographyClasses, formControlClasses, formLabelClasses, formHelperTextClasses, gridClasses, stackClasses, sheetClasses, modalClasses, modalCloseClasses, modalDialogClasses, modalOverflowClasses, dialogTitleClasses, dialogContentClasses, dialogActionsClasses, tooltipClasses, tabsClasses, tabListClasses, tabPanelClasses, 
 // Pure JoyUI
 accordionClasses, accordionDetailsClasses, accordionGroupClasses as accordionsClasses, accordionSummaryClasses, Avatar, avatarClasses, AvatarGroup, avatarGroupClasses, AspectRatio, aspectRatioClasses, Badge, badgeClasses, Breadcrumbs, breadcrumbsClasses, Card, cardClasses, CardActions, cardActionsClasses, CardContent, cardContentClasses, CardCover, cardCoverClasses, CardOverflow, cardOverflowClasses, Chip, chipClasses, CircularProgress, circularProgressClasses, Drawer, drawerClasses, LinearProgress, linearProgressClasses, List, listClasses, ListDivider, listDividerClasses, ListItem, listItemClasses, ListItemButton, listItemButtonClasses, ListItemContent, listItemContentClasses, ListItemDecorator, listItemDecoratorClasses, ListSubheader, listSubheaderClasses, Link, linkClasses, Slider, sliderClasses, Step, stepClasses, StepButton, stepButtonClasses, StepIndicator, Stepper, stepperClasses, Skeleton, skeletonClasses, } from "@mui/joy";
-export { Accordion, Accordions, AccordionDetails, AccordionSummary, Box, Button, Checkbox, Container, DataTable, DialogActions, DialogContent, DialogTitle, Divider, Dropdown, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, Radio, RadioGroup, RadioList, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";
+export { Accordion, Accordions, AccordionDetails, AccordionSummary, Box, Button, Checkbox, Container, DataTable, DialogActions, DialogContent, DialogTitle, DialogFrame, Divider, Dropdown, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, Radio, RadioGroup, RadioList, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";