@ceed/ads 0.0.61 → 0.0.62

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

@@ -42,10 +42,12 @@ type DataTableProps<T extends Record<string, unknown>> = {
      * server mode를 사용할 때 유용하다.
      */
     rowCount?: number;
+    loading?: boolean;
     slots?: {
         checkbox?: React.ElementType;
         toolbar?: React.ElementType;
         footer?: React.ElementType;
+        loadingOverlay?: React.ElementType;
     };
     slotProps?: {
         checkbox?: Partial<{

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" | "disablePortal" | "keepMounted" | "disableAutoFocus" | "disableEnforceFocus" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableScrollLock" | "hideBackdrop"> & {
-    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/index.js

@@ -69,7 +69,7 @@ import {
   circularProgressClasses,
   Drawer,
   drawerClasses,
-  LinearProgress,
+  LinearProgress as LinearProgress2,
   linearProgressClasses,
   List,
   listClasses,
@@ -1026,6 +1026,8 @@ import React11, {
   useRef,
   useState as useState3
 } from "react";
+import { styled as styled3 } from "@mui/joy/styles";
+import LinearProgress from "@mui/joy/LinearProgress";
 
 // src/components/Sheet/Sheet.tsx
 import { Sheet as JoySheet } from "@mui/joy";
@@ -1125,6 +1127,21 @@ Stack.displayName = "Stack";
 var Stack_default = Stack;
 
 // src/components/DataTable/DataTable.tsx
+var OverlayWrapper = styled3("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 = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
 function TablePagination(props) {
   const {
@@ -1380,11 +1397,15 @@ function DataTable(props) {
     // columns is used in useDataTableRenderer
     onPaginationModelChange: ___,
     // onPaginationModelChange is used in useDataTableRenderer
+    paginationMode: ____,
+    // paginationMode is used in useDataTableRenderer
     paginationModel,
+    loading,
     slots: {
       checkbox: RenderCheckbox = Checkbox_default,
       toolbar: Toolbar,
-      footer: Footer
+      footer: Footer,
+      loadingOverlay: LoadingOverlay = () => /* @__PURE__ */ React11.createElement(LinearProgress, null)
     } = {},
     slotProps: {
       checkbox: checkboxProps = {},
@@ -1466,7 +1487,18 @@ function DataTable(props) {
         stickyHeader: props.stickyHeader,
         ...c
       }
-    )))), /* @__PURE__ */ React11.createElement("tbody", null, dataInPage.map((row, rowIndex) => {
+    )))), /* @__PURE__ */ React11.createElement("tbody", null, /* @__PURE__ */ React11.createElement(OverlayWrapper, null, !!loading && /* @__PURE__ */ React11.createElement("td", null, /* @__PURE__ */ React11.createElement(
+      Box_default,
+      {
+        sx: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0
+        }
+      },
+      /* @__PURE__ */ React11.createElement(LoadingOverlay, null)
+    ))), /* @__PURE__ */ React11.createElement(OverlayWrapper, null), dataInPage.map((row, rowIndex) => {
       const rowId = `${rowIndex + (page - 1) * pageSize}`;
       return /* @__PURE__ */ React11.createElement(
         "tr",
@@ -1521,7 +1553,7 @@ DataTable.displayName = "DataTable";
 import React13, { forwardRef as forwardRef4, useCallback as useCallback4, useState as useState4 } from "react";
 import { IMaskInput, IMask } from "react-imask";
 import CalendarTodayIcon from "@mui/icons-material/esm/CalendarToday.js";
-import { styled as styled3 } from "@mui/joy/styles";
+import { styled as styled4 } from "@mui/joy/styles";
 import { FocusTrap } from "@mui/base/FocusTrap";
 import { ClickAwayListener } from "@mui/base/ClickAwayListener";
 import { Popper } from "@mui/base/Popper";
@@ -1554,13 +1586,13 @@ DialogActions.displayName = "DialogActions";
 var DialogActions_default = DialogActions;
 
 // src/components/DatePicker/DatePicker.tsx
-var StyledPopper = styled3(Popper, {
+var StyledPopper = styled4(Popper, {
   name: "DatePicker",
   slot: "popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.popup
 }));
-var CalendarSheet = styled3(Sheet_default, {
+var CalendarSheet = styled4(Sheet_default, {
   name: "DatePicker",
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
@@ -1723,17 +1755,17 @@ DatePicker.displayName = "DatePicker";
 import React14, { forwardRef as forwardRef5, useCallback as useCallback5, useMemo as useMemo4, useState as useState5 } from "react";
 import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
 import CalendarTodayIcon2 from "@mui/icons-material/esm/CalendarToday.js";
-import { styled as styled4 } from "@mui/joy/styles";
+import { styled as styled5 } from "@mui/joy/styles";
 import { FocusTrap as FocusTrap2 } from "@mui/base/FocusTrap";
 import { ClickAwayListener as ClickAwayListener2 } from "@mui/base/ClickAwayListener";
 import { Popper as Popper2 } from "@mui/base/Popper";
-var StyledPopper2 = styled4(Popper2, {
+var StyledPopper2 = styled5(Popper2, {
   name: "DateRangePicker",
   slot: "popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.popup
 }));
-var CalendarSheet2 = styled4(Sheet_default, {
+var CalendarSheet2 = styled5(Sheet_default, {
   name: "DateRangePicker",
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
@@ -2055,17 +2087,17 @@ MenuItem.displayName = "MenuItem";
 import React20, { forwardRef as forwardRef6, useCallback as useCallback6, useMemo as useMemo5, useState as useState6 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon3 from "@mui/icons-material/esm/CalendarToday";
-import { styled as styled5 } from "@mui/joy/styles";
+import { styled as styled6 } from "@mui/joy/styles";
 import { FocusTrap as FocusTrap3 } from "@mui/base/FocusTrap";
 import { ClickAwayListener as ClickAwayListener3 } from "@mui/base/ClickAwayListener";
 import { Popper as Popper3 } from "@mui/base/Popper";
-var StyledPopper3 = styled5(Popper3, {
+var StyledPopper3 = styled6(Popper3, {
   name: "MonthRangePicker",
   slot: "popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.popup
 }));
-var CalendarSheet3 = styled5(Sheet_default, {
+var CalendarSheet3 = styled6(Sheet_default, {
   name: "MonthRangePicker",
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
@@ -2287,12 +2319,12 @@ Select.displayName = "Select";
 import React23 from "react";
 import {
   Switch as JoySwitch,
-  styled as styled6,
+  styled as styled7,
   switchClasses
 } from "@mui/joy";
 import { motion as motion25 } from "framer-motion";
 var MotionSwitch = motion25(JoySwitch);
-var StyledThumb = styled6(motion25.div)({
+var StyledThumb = styled7(motion25.div)({
   "--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
   display: "inline-flex",
   justifyContent: "center",
@@ -2459,7 +2491,7 @@ export {
   IconButton,
   Input,
   InsetDrawer,
-  LinearProgress,
+  LinearProgress2 as LinearProgress,
   Link,
   List,
   ListDivider,