@ceed/ads 0.0.17 → 0.0.18

package/dist/components/Accordions/Accordions.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+declare const AccordionSummary: import("framer-motion").CustomDomComponent<{
+    children?: React.ReactNode;
+    color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").AccordionSummaryPropsColorOverrides> | undefined;
+    indicator?: React.ReactNode;
+    variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").AccordionSummaryPropsVariantOverrides> | undefined;
+    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+} & import("@mui/joy").AccordionSummarySlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "color" | "indicator" | "variant" | "sx" | keyof import("@mui/joy").AccordionSummarySlotsAndSlotProps>>;
+export { AccordionSummary };
+declare const AccordionDetails: import("framer-motion").CustomDomComponent<{
+    children?: React.ReactNode;
+    color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").AccordionDetailsPropsColorOverrides> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").AccordionDetailsPropsVariantOverrides> | undefined;
+    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+} & import("@mui/joy").AccordionDetailsSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "color" | "variant" | "sx" | keyof import("@mui/joy").AccordionDetailsSlotsAndSlotProps>>;
+export { AccordionDetails };
+declare const MotionAccordion: import("framer-motion").CustomDomComponent<{
+    accordionId?: string | undefined;
+    color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").AccordionPropsColorOverrides> | undefined;
+    children?: React.ReactNode;
+    defaultExpanded?: boolean | undefined;
+    disabled?: boolean | undefined;
+    expanded?: boolean | undefined;
+    onChange?: ((event: React.SyntheticEvent<Element, Event>, expanded: boolean) => void) | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").AccordionPropsVariantOverrides> | undefined;
+    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+} & import("@mui/joy").AccordionSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "color" | "onChange" | "variant" | "sx" | "accordionId" | "defaultExpanded" | "disabled" | "expanded" | keyof import("@mui/joy").AccordionSlotsAndSlotProps>>;
+declare function Accordion(props: {
+    summary: React.ReactNode;
+    details: React.ReactNode;
+    index: number;
+} & React.ComponentProps<typeof MotionAccordion>): React.JSX.Element;
+declare namespace Accordion {
+    var displayName: string;
+}
+export { Accordion };
+declare const MotionAccordions: import("framer-motion").CustomDomComponent<{
+    children?: React.ReactNode;
+    color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").AccordionGroupPropsColorOverrides> | undefined;
+    disableDivider?: boolean | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"sm" | "md" | "lg", import("@mui/joy").AccordionGroupPropsSizeOverrides> | undefined;
+    transition?: string | {
+        initial: string;
+        expanded: string;
+    } | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").AccordionGroupPropsVariantOverrides> | undefined;
+    sx?: import("@mui/joy/styles/types").SxProps | undefined;
+} & import("@mui/joy").AccordionGroupSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "transition" | "color" | "variant" | "sx" | "disableDivider" | "size" | keyof import("@mui/joy").AccordionGroupSlotsAndSlotProps>>;
+declare function Accordions(props: {
+    items: {
+        summary: string;
+        details: React.ReactNode;
+    }[];
+} & React.ComponentProps<typeof MotionAccordions>): React.JSX.Element;
+declare namespace Accordions {
+    var displayName: string;
+}
+export { Accordions };

package/dist/components/Accordions/Accordions.js

@@ -0,0 +1,66 @@
+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 { AccordionGroup as JoyAccordionGroup, Accordion as JoyAccordion, AccordionSummary as JoyAccordionSummary, AccordionDetails as JoyAccordionDetails, } from "@mui/joy";
+import { motion } from "framer-motion";
+var MotionAccordionSummary = motion(JoyAccordionSummary);
+var AccordionSummary = MotionAccordionSummary;
+export { AccordionSummary };
+AccordionSummary.displayName = "AccordionSummary";
+var MotionAccordionDetails = motion(JoyAccordionDetails);
+var AccordionDetails = MotionAccordionDetails;
+export { AccordionDetails };
+AccordionDetails.displayName = "AccordionDetails";
+var MotionAccordion = motion(JoyAccordion);
+function Accordion(props) {
+    // prop destruction
+    var summary = props.summary, details = props.details, variant = props.variant, color = props.color, innerProps = __rest(props, ["summary", "details", "variant", "color"]);
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    var inheritedVariant = variant === "solid" ? "solid" : undefined;
+    // effects
+    // handlers
+    return (React.createElement(MotionAccordion, __assign({ variant: inheritedVariant, color: color }, innerProps),
+        React.createElement(AccordionSummary, { variant: inheritedVariant, color: color }, summary),
+        React.createElement(AccordionDetails, { variant: inheritedVariant, color: color }, details)));
+}
+export { Accordion };
+Accordion.displayName = "Accordion";
+var MotionAccordions = motion(JoyAccordionGroup);
+function Accordions(props) {
+    // prop destruction
+    var variant = props.variant, color = props.color, items = props.items, innerProps = __rest(props, ["variant", "color", "items"]);
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(MotionAccordions, __assign({ variant: variant, color: color }, innerProps), items.map(function (item, index) { return (React.createElement(Accordion, { summary: item.summary, details: item.details, index: index, variant: variant, color: color })); })));
+}
+export { Accordions };
+Accordions.displayName = "Accordions";

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

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

package/dist/components/Accordions/index.js

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

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

@@ -1,11 +1,31 @@
 import React, { ComponentProps } from "react";
 import { Table, TableBody, TableHead } from "../Table";
-declare function DataTable<T extends Record<string, unknown>>(props: {
+type DataTableProps<T extends Record<string, unknown>> = {
     data: T[];
     showCheckbox?: boolean;
+    onCheckboxChange?: (event: any, selectedModel: string) => void;
+    /**
+     * 체크박스가 있는 경우, 체크박스를 클릭했을 때 선택된 row의 index를 지정한다.
+     */
+    selectionModel?: string[];
+    onSelectionModelChange?: (newSelectionModel: string[]) => void;
+    /**
+     * 페이지네이션을 위한 prop
+     * 별도로 지정하지 않으면, data prop 기반의 페이지네이션을 사용한다.
+     */
+    page?: number;
+    onPageChange?: (newPage: number) => void;
+    rowsPerPage?: number;
+    /**
+     * Rows의 총 갯수를 직접 지정 할 수 있다.
+     * 이 값이 주어지면, data prop 기반의 페이지네이션을 사용하지 않는다.
+     * data lazy loading을 위한 prop
+     */
+    totalRows?: number;
     slots?: {
         checkbox?: React.ElementType;
         toolbar?: React.ElementType;
+        footer?: React.ElementType;
     };
     slotProps?: {
         checkbox?: Partial<{
@@ -15,8 +35,12 @@ declare function DataTable<T extends Record<string, unknown>>(props: {
         toolbar?: Partial<{
             [key: string]: any;
         }>;
+        background?: Partial<{
+            [key: string]: any;
+        }>;
     };
-} & ComponentProps<typeof Table> & Pick<ComponentProps<typeof TableHead>, "headCells"> & Pick<ComponentProps<typeof TableBody>, "cellOrder">): React.JSX.Element;
+} & ComponentProps<typeof Table> & Pick<ComponentProps<typeof TableHead>, "headCells"> & Pick<ComponentProps<typeof TableBody>, "cellOrder">;
+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

@@ -20,13 +20,110 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useMemo } from "react";
+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, useState, } from "react";
 import Sheet from "../Sheet";
 import { Table, TableHead } from "../Table";
 import Checkbox from "../Checkbox";
+import Box from "../Box";
+import Stack from "../Stack";
+import Typography from "../Typography";
+import Button from "../Button";
+function TablePagination(props) {
+    // prop destruction
+    var page = props.page, rowsPerPage = props.rowsPerPage, totalRows = props.totalRows, 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 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(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page - 1); }, disabled: page === firstPage, "aria-label": "Previous page" }, "<"),
+            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(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;
+    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 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 isAllSelected = useMemo(function () {
+        return dataInPage.length > 0 &&
+            dataInPage.every(function (_, i) {
+                return selectedModelSet.has("".concat(i + (page - 1) * rowsPerPage));
+            });
+    }, [dataInPage, selectedModelSet, page, rowsPerPage]);
+    var totalRows = totalRowsProp || data.length;
+    var isTotalSelected = useMemo(function () { return totalRows > 0 && selectionModel.length === totalRows; }, [selectionModel, totalRows]);
+    var handlePageChange = useCallback(function (newPage) {
+        setPage(newPage);
+        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(newPage);
+    }, [onPageChange]);
+    useEffect(function () {
+        handlePageChange(1);
+    }, [totalRows]);
+    useEffect(function () {
+        if (page > Math.ceil(totalRows / rowsPerPage)) {
+            handlePageChange(Math.ceil(totalRows / rowsPerPage));
+        }
+    }, [totalRows, rowsPerPage]);
+    useEffect(function () {
+        onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange([]);
+    }, [page]);
     return {
+        totalRows: totalRows,
+        page: page,
+        onPageChange: handlePageChange,
+        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(function (_, i) { return "".concat(i + (page - 1) * rowsPerPage); }));
+            onCheckboxChange === null || onCheckboxChange === void 0 ? void 0 : onCheckboxChange(null, '');
+        }, [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 {
+                var newSelectionModel = __spreadArray(__spreadArray([], selectionModel, true), [selectedModel], false);
+                onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel);
+                onCheckboxChange === null || onCheckboxChange === void 0 ? void 0 : onCheckboxChange(event, selectedModel);
+            }
+        }, [selectionModel, onSelectionModelChange]),
         renderCellOrder: useMemo(function () { return cellOrder || Object.keys(data[0] || {}); }, [data, cellOrder]),
         renderHeadCells: useMemo(function () {
             return headCells ||
@@ -35,59 +132,90 @@ function useDataTableRenderer(_a) {
                     label: key,
                 }); });
         }, [data, headCells]),
+        onTotalSelect: useCallback(function () {
+            onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isTotalSelected ? [] : data.map(function (_, i) { return "".concat(i); }));
+        }, [isTotalSelected, data, onSelectionModelChange]),
     };
 }
 function DataTable(props) {
     // prop destruction
-    var data = props.data, showCheckbox = props.showCheckbox, headCells = props.headCells, cellOrder = props.cellOrder, _a = props.slots, _b = _a === void 0 ? {} : _a, _c = _b.checkbox, RenderCheckbox = _c === void 0 ? Checkbox : _c, Toolbar = _b.toolbar, _d = props.slotProps, _e = _d === void 0 ? {} : _d, _f = _e.checkbox, checkboxProps = _f === void 0 ? {} : _f, toolbarProps = _e.toolbar, innerProps = __rest(props, ["data", "showCheckbox", "headCells", "cellOrder", "slots", "slotProps"]);
+    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"]);
     // lib hooks
-    var _g = useDataTableRenderer({
-        data: data,
-        cellOrder: cellOrder,
-        headCells: headCells,
-    }), renderCellOrder = _g.renderCellOrder, renderHeadCells = _g.renderHeadCells;
+    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;
     // state, ref, querystring hooks
     // form hooks
     // query hooks
     // calculated values
     // effects
     // handlers
-    return (React.createElement(Sheet, { variant: "outlined", sx: {
-            overflow: "auto",
-            width: "100%",
-            boxShadow: "sm",
-            borderRadius: "sm",
-        } },
-        Toolbar && React.createElement(Toolbar, __assign({}, (toolbarProps || {}))),
-        React.createElement(Table, __assign({ sx: [
-                showCheckbox
-                    ? {
-                        "& tr > *:first-of-type": {
-                            position: "sticky",
-                            left: 0,
-                            boxShadow: "1px 0 var(--TableCell-borderColor)",
-                            bgcolor: "background.surface",
+    return (React.createElement(Box, null,
+        React.createElement(Stack, { direction: "row", sx: {
+                pt: 1,
+                pb: 1,
+            }, 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,
+                    " 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,
+                        " items on this page are selected."),
+                    React.createElement(Button, { size: "sm", variant: "plain", onClick: onTotalSelect },
+                        "Select all ",
+                        data.length,
+                        " items"))),
+                isTotalSelected && (React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
+                    React.createElement(Typography, { level: "body-xs" },
+                        "All ",
+                        data.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({ sx: [
+                    {
+                        // "--TableCell-headBackground": "transparent",
+                        "--TableCell-selectedBackground": function (theme) {
+                            return theme.vars.palette.neutral.plainActiveBg;
                         },
-                    }
-                    : {},
-                {
-                    "--TableCell-headBackground": "transparent",
-                    "--TableCell-selectedBackground": function (theme) {
-                        return theme.vars.palette.success.softBg;
                     },
-                },
-            ] }, innerProps),
-            React.createElement(TableHead, { showCheckbox: showCheckbox, headCells: renderHeadCells || [] }),
-            React.createElement("tbody", null, data.map(function (row, rowIndex) { return (React.createElement("tr", { key: rowIndex },
-                showCheckbox && (React.createElement("td", { style: {
-                        textAlign: "center",
-                    } },
-                    React.createElement(RenderCheckbox
-                    // onChange={(event: any) =>
-                    //   onCheckboxChange?.(event, rowIndex)
-                    // }
-                    , __assign({}, checkboxProps)))),
-                renderCellOrder.map(function (cellKey) { return (React.createElement("td", { key: cellKey }, row[cellKey])); }))); })))));
+                ] }, innerProps),
+                React.createElement(TableHead, { showCheckbox: showCheckbox, headCells: renderHeadCells || [], onCheckboxChange: onAllCheckboxChange, slotProps: {
+                        checkbox: __assign({ checked: isAllSelected, indeterminate: (selectionModel || []).length > 0 && !isAllSelected }, checkboxProps),
+                    } }),
+                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
+                            ? function (e) { return onCheckboxChange(e, rowId); }
+                            : undefined, "aria-checked": showCheckbox ? isSelectedRow(rowId) : undefined, style: showCheckbox && isSelectedRow(rowId)
+                            ? {
+                                "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
+                                "--TableCell-headBackground": "var(--TableCell-selectedBackground)",
+                            }
+                            : {
+                                "--TableCell-headBackground": "transparent",
+                            } },
+                        showCheckbox && (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])); })));
+                })),
+                Footer && React.createElement(Footer, null))),
+        React.createElement(TablePagination, { page: page, rowsPerPage: rowsPerPage, totalRows: totalRows, onPageChange: onPageChange, onRowsPerPageChange: function () { } })));
 }
 export { DataTable };
 DataTable.displayName = "DataTable";

package/dist/components/DialogTitle/DialogTitle.d.ts

@@ -7,5 +7,5 @@ declare const DialogTitle: import("framer-motion").CustomDomComponent<{
     variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").DialogTitlePropsVariantOverrides> | undefined;
 } & import("@mui/joy").DialogTitleSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "color" | "sx" | "variant" | "level" | keyof import("@mui/joy").DialogTitleSlotsAndSlotProps>>;
+}, "children" | "color" | "variant" | "sx" | "level" | keyof import("@mui/joy").DialogTitleSlotsAndSlotProps>>;
 export { DialogTitle };

package/dist/components/Grid/Grid.d.ts

@@ -3,5 +3,5 @@ declare const Grid: import("framer-motion").CustomDomComponent<import("@mui/syst
     sx?: import("@mui/joy/styles/types").SxProps | undefined;
 } & import("@mui/joy/styles/types").SystemProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, ("p" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "sx" | keyof import("@mui/system").GridBaseProps | keyof import("@mui/joy").GridSlotsAndSlotProps>>;
+}, "sx" | ("p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/system").GridBaseProps | keyof import("@mui/joy").GridSlotsAndSlotProps>>;
 export { Grid };

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;
@@ -19,7 +19,7 @@ declare const ModalDialog: import("framer-motion").CustomDomComponent<{
     variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").ModalDialogPropsVariantOverrides> | undefined;
 } & import("@mui/joy").ModalDialogSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "layout" | "color" | "maxWidth" | "minWidth" | "sx" | "size" | "variant" | "invertedColors" | "orientation" | keyof import("@mui/joy").ModalDialogSlotsAndSlotProps>>;
+}, "children" | "layout" | "color" | "maxWidth" | "minWidth" | "variant" | "sx" | "size" | "invertedColors" | "orientation" | keyof import("@mui/joy").ModalDialogSlotsAndSlotProps>>;
 export { ModalDialog };
 declare const ModalClose: import("framer-motion").CustomDomComponent<{
     color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").ModalClosePropsColorOverrides> | undefined;
@@ -28,7 +28,7 @@ declare const ModalClose: import("framer-motion").CustomDomComponent<{
     variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").ModalClosePropsVariantOverrides> | undefined;
 } & import("@mui/joy").ModalCloseSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | "sx" | "size" | "variant" | keyof import("@mui/joy").ModalCloseSlotsAndSlotProps>>;
+}, "color" | "variant" | "sx" | "size" | keyof import("@mui/joy").ModalCloseSlotsAndSlotProps>>;
 export { ModalClose };
 declare const ModalOverflow: import("framer-motion").CustomDomComponent<{
     sx?: import("@mui/joy/styles/types").SxProps | undefined;

package/dist/components/Radio/Radio.d.ts

@@ -14,7 +14,7 @@ declare const Radio: import("framer-motion").CustomDomComponent<import("@mui/bas
     value?: unknown;
 } & import("@mui/joy").RadioSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "label" | "className" | "color" | "overlay" | "sx" | "size" | "variant" | "name" | "value" | keyof import("@mui/base").UseSwitchParameters | "checkedIcon" | "disableIcon" | "uncheckedIcon" | keyof import("@mui/joy").RadioSlotsAndSlotProps>>;
+}, "label" | "color" | "overlay" | "className" | "variant" | "sx" | "size" | "name" | "value" | keyof import("@mui/base").UseSwitchParameters | "checkedIcon" | "disableIcon" | "uncheckedIcon" | keyof import("@mui/joy").RadioSlotsAndSlotProps>>;
 export { Radio };
 declare const RadioGroup: import("framer-motion").CustomDomComponent<{
     className?: string | undefined;
@@ -32,5 +32,5 @@ declare const RadioGroup: import("framer-motion").CustomDomComponent<{
     variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").RadioPropsVariantOverrides> | undefined;
 } & import("@mui/joy").RadioGroupSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "defaultValue" | "className" | "color" | "onChange" | "overlay" | "component" | "sx" | "size" | "variant" | "name" | "value" | "disableIcon" | "orientation" | keyof import("@mui/joy").RadioGroupSlotsAndSlotProps>>;
+}, "color" | "overlay" | "defaultValue" | "className" | "onChange" | "variant" | "sx" | "size" | "component" | "name" | "value" | "disableIcon" | "orientation" | keyof import("@mui/joy").RadioGroupSlotsAndSlotProps>>;
 export { RadioGroup };

package/dist/components/Select/Select.d.ts

@@ -22,5 +22,5 @@ declare const Option: import("framer-motion").CustomDomComponent<{
     sx?: import("@mui/joy/styles/types").SxProps | undefined;
 } & import("@mui/joy").OptionSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-}, "label" | "children" | "color" | "sx" | "disabled" | "variant" | "value" | keyof import("@mui/joy").OptionSlotsAndSlotProps>>;
+}, "label" | "children" | "color" | "variant" | "sx" | "disabled" | "value" | keyof import("@mui/joy").OptionSlotsAndSlotProps>>;
 export { Option };

package/dist/components/Sheet/Sheet.d.ts

@@ -7,5 +7,5 @@ declare const Sheet: import("framer-motion").CustomDomComponent<{
     variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").SheetPropsVariantOverrides> | undefined;
 } & import("@mui/joy").SheetSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "color" | "sx" | "variant" | "invertedColors" | keyof import("@mui/joy").SheetSlotsAndSlotProps>>;
+}, "children" | "color" | "variant" | "sx" | "invertedColors" | keyof import("@mui/joy").SheetSlotsAndSlotProps>>;
 export { Sheet };

package/dist/components/Stack/Stack.d.ts

@@ -8,5 +8,5 @@ declare const Stack: import("framer-motion").CustomDomComponent<{
     sx?: import("@mui/joy/styles/types").SxProps | undefined;
 } & import("@mui/joy").StackSlotsAndSlotProps & import("@mui/joy/styles/types").SystemProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "direction" | ("p" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "sx" | "spacing" | "divider" | "useFlexGap" | keyof import("@mui/joy").StackSlotsAndSlotProps>>;
+}, "children" | "direction" | "sx" | ("p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "spacing" | "divider" | "useFlexGap" | keyof import("@mui/joy").StackSlotsAndSlotProps>>;
 export { Stack };