@ceed/ads 0.0.23 → 0.0.24

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,16 +1,18 @@
 import React, { ComponentProps } from "react";
 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>> = {
     rows: T[];
     checkboxSelection?: boolean;
-    columns: {
-        type?: "number" | "string";
-        field: keyof T;
-        headerName?: string;
-        width?: string;
-        minWidth?: string;
-        maxWidth?: string;
-    }[];
+    columns: Column<T>[];
     /**
      * 체크박스가 있는 경우, 체크박스를 클릭했을 때 선택된 row의 index를 지정한다.
      */

package/dist/components/DataTable/DataTable.js

@@ -29,7 +29,7 @@ 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 } from "../Table";
 import Checkbox from "../Checkbox";
@@ -72,7 +72,7 @@ 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 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;
+    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]);
@@ -105,6 +105,61 @@ function useDataTableRenderer(_a) {
         page: page,
         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,
@@ -139,9 +194,11 @@ function useDataTableRenderer(_a) {
 function DataTable(props) {
     // prop destruction
     var rows = props.rows, checkboxSelection = props.checkboxSelection, selectionModel = props.selectionModel, onSelectionModelChange = props.onSelectionModelChange, _ = props.rowCount, // rowCount 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", "paginationModel", "slots", "slotProps"]);
+    __ = 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 _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;
+    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
@@ -194,15 +251,7 @@ function DataTable(props) {
                                 textAlign: "center",
                             } },
                             React.createElement(RenderCheckbox, __assign({ onChange: onAllCheckboxChange, checked: isAllSelected, indeterminate: (selectionModel || []).length > 0 && !isAllSelected }, checkboxProps)))),
-                        columns.map(function (column) {
-                            var _a;
-                            return (React.createElement("th", { key: column.field, style: {
-                                    width: column.width,
-                                    minWidth: column.minWidth,
-                                    maxWidth: column.maxWidth,
-                                    textAlign: column.type === "number" ? "end" : "start",
-                                } }, (_a = column.headerName) !== null && _a !== void 0 ? _a : column.field));
-                        }))),
+                        columns.map(getColumnHeader))),
                 React.createElement("tbody", null, dataInPage.map(function (row, rowIndex) {
                     var rowId = "".concat(rowIndex + (page - 1) * pageSize);
                     return (React.createElement("tr", { key: rowId, role: checkboxSelection ? "checkbox" : undefined, tabIndex: checkboxSelection ? -1 : undefined, onClick: checkboxSelection

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: {

package/framer/index.js

@@ -31945,33 +31945,36 @@ var ContainerRoot = styled_default2("div", {
   name: "Container",
   slot: "root",
   shouldForwardProp: (prop) => prop !== "maxWidth"
-})(
-  ({ theme, maxWidth: maxWidth2 = "desktop" }) => ({
-    width: "100%",
-    marginLeft: "auto",
-    boxSizing: "border-box",
-    marginRight: "auto",
-    display: "block",
-    // Fix IE11 layout when used with main.
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    ...maxWidth2 === "tablet" && {
-      [theme.breakpoints.up("mobile")]: {
-        maxWidth: theme.breakpoints.values.tablet
-      }
-    },
-    ...maxWidth2 === "laptop" && {
-      [theme.breakpoints.up("tablet")]: {
-        maxWidth: theme.breakpoints.values.laptop
-      }
-    },
-    ...maxWidth2 === "desktop" && {
-      [theme.breakpoints.up("laptop")]: {
-        maxWidth: theme.breakpoints.values.desktop
-      }
+})(({ theme, maxWidth: maxWidth2 = "lg" }) => ({
+  width: "100%",
+  marginLeft: "auto",
+  boxSizing: "border-box",
+  marginRight: "auto",
+  display: "block",
+  // Fix IE11 layout when used with main.
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  ...maxWidth2 === "sm" && {
+    [theme.breakpoints.up("xs")]: {
+      maxWidth: theme.breakpoints.values.sm
     }
-  })
-);
+  },
+  ...maxWidth2 === "md" && {
+    [theme.breakpoints.up("sm")]: {
+      maxWidth: theme.breakpoints.values.md
+    }
+  },
+  ...maxWidth2 === "lg" && {
+    [theme.breakpoints.up("md")]: {
+      maxWidth: theme.breakpoints.values.lg
+    }
+  },
+  ...maxWidth2 === "xl" && {
+    [theme.breakpoints.up("lg")]: {
+      maxWidth: theme.breakpoints.values.xl
+    }
+  }
+}));
 var Container = forwardRef76(function Container2(props, ref) {
   return /* @__PURE__ */ jsx2(ContainerRoot, { ref, ...props });
 });
@@ -31982,6 +31985,7 @@ import {
   useCallback as useCallback23,
   useEffect as useEffect33,
   useMemo as useMemo32,
+  useRef as useRef40,
   useState as useState21
 } from "react";
 
@@ -32219,7 +32223,8 @@ function useDataTableRenderer({
   paginationModel,
   onPaginationModelChange,
   selectionModel = [],
-  onSelectionModelChange
+  onSelectionModelChange,
+  stickyHeader
 }) {
   const [page, setPage] = useState21(paginationModel?.page || 1);
   const pageSize = paginationModel?.pageSize || 20;
@@ -32265,6 +32270,70 @@ function useDataTableRenderer({
     page,
     pageSize,
     onPaginationModelChange: handlePageChange,
+    getColumnHeader: useCallback23(
+      (column2) => {
+        const ref = useRef40(null);
+        const style4 = useMemo32(
+          () => ({
+            width: column2.width,
+            minWidth: column2.minWidth,
+            maxWidth: column2.maxWidth,
+            textAlign: column2.type === "number" ? "end" : "start",
+            position: stickyHeader ? void 0 : "relative"
+          }),
+          [column2, stickyHeader]
+        );
+        useEffect33(() => {
+          if (column2.resizable && ref.current) {
+            const resizeObserver = new ResizeObserver((entries) => {
+              for (const entry of entries) {
+                const { width: width2 } = entry.contentRect;
+                if (width2 && ref.current) {
+                  ref.current.style.width = `${width2}px`;
+                }
+              }
+            });
+            resizeObserver.observe(ref.current);
+            return () => {
+              resizeObserver.disconnect();
+            };
+          }
+        }, [column2.resizable, ref.current]);
+        const resizer = column2.resizable ?? true ? /* @__PURE__ */ jsx2(
+          Box_default2,
+          {
+            sx: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              width: "4px",
+              cursor: "col-resize"
+            },
+            onMouseDown: (e) => {
+              const initialX = e.clientX;
+              const initialWidth = ref.current?.getBoundingClientRect().width;
+              const onMouseMove = (e2) => {
+                if (initialWidth && initialX) {
+                  ref.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
+                }
+              };
+              const onMouseUp = () => {
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+              };
+              document.addEventListener("mousemove", onMouseMove);
+              document.addEventListener("mouseup", onMouseUp);
+            }
+          }
+        ) : null;
+        return /* @__PURE__ */ jsxs2("th", { ref, style: style4, children: [
+          column2.headerName ?? column2.field,
+          resizer
+        ] }, column2.field);
+      },
+      [stickyHeader, columns]
+    ),
     dataInPage,
     isAllSelected,
     // all rows are selected on this page
@@ -32314,6 +32383,10 @@ function DataTable(props) {
     onSelectionModelChange,
     rowCount: _4,
     // rowCount is used in useDataTableRenderer
+    columns: __,
+    // columns is used in useDataTableRenderer
+    onPaginationModelChange: ___,
+    // onPaginationModelChange is used in useDataTableRenderer
     paginationModel,
     slots: {
       checkbox: RenderCheckbox = Checkbox_default2,
@@ -32339,7 +32412,8 @@ function DataTable(props) {
     onPaginationModelChange,
     dataInPage,
     isTotalSelected,
-    onTotalSelect
+    onTotalSelect,
+    getColumnHeader
   } = useDataTableRenderer(props);
   return /* @__PURE__ */ jsxs2(Box_default2, { children: [
     /* @__PURE__ */ jsxs2(
@@ -32433,19 +32507,7 @@ function DataTable(props) {
                     )
                   }
                 ),
-                columns.map((column2) => /* @__PURE__ */ jsx2(
-                  "th",
-                  {
-                    style: {
-                      width: column2.width,
-                      minWidth: column2.minWidth,
-                      maxWidth: column2.maxWidth,
-                      textAlign: column2.type === "number" ? "end" : "start"
-                    },
-                    children: column2.headerName ?? column2.field
-                  },
-                  column2.field
-                ))
+                columns.map(getColumnHeader)
               ] }) }),
               /* @__PURE__ */ jsx2("tbody", { children: dataInPage.map((row, rowIndex) => {
                 const rowId = `${rowIndex + (page - 1) * pageSize}`;
@@ -32767,14 +32829,6 @@ Textarea3.displayName = "Textarea";
 // src/components/ThemeProvider/ThemeProvider.tsx
 var defaultTheme4 = extendTheme({
   cssVarPrefix: "ceed",
-  breakpoints: {
-    values: {
-      mobile: 0,
-      tablet: 768,
-      laptop: 1024,
-      desktop: 1280
-    }
-  },
   components: {
     JoyTable: {
       defaultProps: {
@@ -33089,11 +33143,16 @@ var dataTablePropertyControls = {
         },
         width: {
           type: ControlType7.String
+        },
+        type: {
+          type: ControlType7.Enum,
+          defaultValue: "string",
+          options: ["string", "number"]
+        },
+        resizable: {
+          type: ControlType7.Boolean,
+          defaultValue: true
         }
-        // numeric: {
-        //     type: ControlType.Boolean,
-        //     defaultValue: false,
-        // },
       }
     },
     defaultValue: []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/ads",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "main": "dist/index.js",
   "type": "module",
   "description": "UI tool for Ecube Labs front-end developers",