@ceed/ads 0.0.29 → 0.0.31

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

@@ -21,5 +21,5 @@ declare const Button: React.ForwardRefExoticComponent<Omit<{
     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>>;
+}, "color" | "tabIndex" | "variant" | "sx" | "disabled" | "size" | "component" | keyof import("@mui/joy").ButtonSlotsAndSlotProps | "action" | "endDecorator" | "focusVisibleClassName" | "fullWidth" | "startDecorator" | "loading" | "loadingIndicator" | "loadingPosition"> & MotionProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Button };

package/dist/components/Button/Button.js

@@ -13,7 +13,7 @@ import React, { forwardRef } from "react";
 import { Button as JoyButton } from "@mui/joy";
 import { motion } from "framer-motion";
 var MotionButton = motion(JoyButton);
-var Button = forwardRef(function (props) {
+var Button = forwardRef(function (props, ref) {
     // prop destruction
     // lib hooks
     // state, ref, querystring hooks
@@ -22,7 +22,7 @@ var Button = forwardRef(function (props) {
     // calculated values
     // effects
     // handlers
-    return (React.createElement(MotionButton, __assign({}, props)));
+    return (React.createElement(MotionButton, __assign({ ref: ref }, props)));
 });
 export { Button };
 Button.displayName = "Button";

package/dist/components/DataTable/DataTable.js

@@ -71,6 +71,43 @@ function TablePagination(props) {
             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" }, ">"))));
 }
+var Resizer = function (ref) { return (React.createElement(Box, { sx: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: "4px",
+        cursor: "col-resize",
+    }, onMouseDown: function (e) {
+        var _a;
+        var initialX = e.clientX;
+        var initialWidth = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+        var onMouseMove = function (e) {
+            if (initialWidth && initialX) {
+                ref.current.style.width = "".concat(initialWidth + (e.clientX - initialX), "px");
+            }
+        };
+        var onMouseUp = function () {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+    } })); };
+var HeadCell = function (props) {
+    var _a, _b, _c;
+    var ref = useRef(null);
+    var style = {
+        width: props.width,
+        minWidth: (_a = props.minWidth) !== null && _a !== void 0 ? _a : "50px",
+        maxWidth: props.maxWidth,
+        textAlign: props.type === "number" ? "end" : "start",
+        position: props.stickyHeader ? undefined : "relative",
+    };
+    var resizer = ((_b = props.resizable) !== null && _b !== void 0 ? _b : true) ? Resizer(ref) : null;
+    return (React.createElement("th", { ref: ref, key: props.field, style: style }, (_c = props.headerName) !== null && _c !== void 0 ? _c : props.field,
+        resizer));
+};
 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, stickyHeader = _a.stickyHeader;
     var _c = useState((paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.page) || 1), page = _c[0], setPage = _c[1];
@@ -105,45 +142,27 @@ function useDataTableRenderer(_a) {
         page: page,
         pageSize: pageSize,
         onPaginationModelChange: handlePageChange,
-        getColumnHeader: useCallback(function (column) {
-            var _a, _b;
-            var ref = useRef(null);
-            var style = useMemo(function () {
-                var _a;
-                return ({
-                    width: column.width,
-                    minWidth: (_a = column.minWidth) !== null && _a !== void 0 ? _a : "50px",
-                    maxWidth: column.maxWidth,
-                    textAlign: column.type === "number" ? "end" : "start",
-                    position: stickyHeader ? undefined : "relative",
-                });
-            }, [column, stickyHeader]);
-            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]),
+        HeadCell: HeadCell,
+        // HeadCell: useCallback(
+        //   (column: Column<any>) => {
+        //     const ref = useRef<HTMLTableCellElement>(null);
+        //     const style = {
+        //       width: column.width,
+        //       minWidth: column.minWidth ?? "50px",
+        //       maxWidth: column.maxWidth,
+        //       textAlign: column.type === "number" ? "end" : "start",
+        //       position: stickyHeader ? undefined : "relative",
+        //     } as React.CSSProperties;
+        //     const resizer = column.resizable ?? true ? Resizer(ref) : null;
+        //     return (
+        //       <th ref={ref} key={column.field as string} style={style}>
+        //         {column.headerName ?? (column.field as string)}
+        //         {resizer}
+        //       </th>
+        //     );
+        //   },
+        //   [stickyHeader, columns]
+        // ),
         dataInPage: dataInPage,
         isAllSelected: isAllSelected, // all rows are selected on this page
         isTotalSelected: isTotalSelected,
@@ -182,7 +201,7 @@ function DataTable(props) {
     ___ = 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, getColumnHeader = _h.getColumnHeader;
+    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, HeadCell = _h.HeadCell;
     // state, ref, querystring hooks
     // form hooks
     // query hooks
@@ -235,7 +254,7 @@ function DataTable(props) {
                                 textAlign: "center",
                             } },
                             React.createElement(RenderCheckbox, __assign({ onChange: onAllCheckboxChange, checked: isAllSelected, indeterminate: (selectionModel || []).length > 0 && !isAllSelected }, checkboxProps)))),
-                        columns.map(getColumnHeader))),
+                        columns.map(function (c) { return (React.createElement(HeadCell, __assign({ key: c.field, stickyHeader: props.stickyHeader }, c))); }))),
                 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/framer/index.js

@@ -31915,14 +31915,17 @@ var Box_default2 = Box2;
 import { forwardRef as forwardRef75 } from "react";
 import { motion as motion3 } from "framer-motion";
 var MotionButton = motion3(Button_default);
-var Button3 = forwardRef75((props) => {
-  return /* @__PURE__ */ jsx2(
-    MotionButton,
-    {
-      ...props
-    }
-  );
-});
+var Button3 = forwardRef75(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx2(
+      MotionButton,
+      {
+        ref,
+        ...props
+      }
+    );
+  }
+);
 Button3.displayName = "Button";
 
 // src/components/Button/index.ts
@@ -32216,6 +32219,49 @@ function TablePagination(props) {
     }
   );
 }
+var Resizer = (ref) => /* @__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);
+    }
+  }
+);
+var HeadCell = (props) => {
+  const ref = useRef40(null);
+  const style4 = {
+    width: props.width,
+    minWidth: props.minWidth ?? "50px",
+    maxWidth: props.maxWidth,
+    textAlign: props.type === "number" ? "end" : "start",
+    position: props.stickyHeader ? void 0 : "relative"
+  };
+  const resizer = props.resizable ?? true ? Resizer(ref) : null;
+  return /* @__PURE__ */ jsxs2("th", { ref, style: style4, children: [
+    props.headerName ?? props.field,
+    resizer
+  ] }, props.field);
+};
 function useDataTableRenderer({
   rows,
   columns,
@@ -32270,54 +32316,27 @@ function useDataTableRenderer({
     page,
     pageSize,
     onPaginationModelChange: handlePageChange,
-    getColumnHeader: useCallback23(
-      (column2) => {
-        const ref = useRef40(null);
-        const style4 = useMemo32(
-          () => ({
-            width: column2.width,
-            minWidth: column2.minWidth ?? "50px",
-            maxWidth: column2.maxWidth,
-            textAlign: column2.type === "number" ? "end" : "start",
-            position: stickyHeader ? void 0 : "relative"
-          }),
-          [column2, stickyHeader]
-        );
-        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]
-    ),
+    HeadCell,
+    // HeadCell: useCallback(
+    //   (column: Column<any>) => {
+    //     const ref = useRef<HTMLTableCellElement>(null);
+    //     const style = {
+    //       width: column.width,
+    //       minWidth: column.minWidth ?? "50px",
+    //       maxWidth: column.maxWidth,
+    //       textAlign: column.type === "number" ? "end" : "start",
+    //       position: stickyHeader ? undefined : "relative",
+    //     } as React.CSSProperties;
+    //     const resizer = column.resizable ?? true ? Resizer(ref) : null;
+    //     return (
+    //       <th ref={ref} key={column.field as string} style={style}>
+    //         {column.headerName ?? (column.field as string)}
+    //         {resizer}
+    //       </th>
+    //     );
+    //   },
+    //   [stickyHeader, columns]
+    // ),
     dataInPage,
     isAllSelected,
     // all rows are selected on this page
@@ -32397,7 +32416,7 @@ function DataTable(props) {
     dataInPage,
     isTotalSelected,
     onTotalSelect,
-    getColumnHeader
+    HeadCell: HeadCell2
   } = useDataTableRenderer(props);
   return /* @__PURE__ */ jsxs2(Box_default2, { children: [
     /* @__PURE__ */ jsxs2(
@@ -32491,7 +32510,14 @@ function DataTable(props) {
                     )
                   }
                 ),
-                columns.map(getColumnHeader)
+                columns.map((c) => /* @__PURE__ */ jsx2(
+                  HeadCell2,
+                  {
+                    stickyHeader: props.stickyHeader,
+                    ...c
+                  },
+                  c.field
+                ))
               ] }) }),
               /* @__PURE__ */ jsx2("tbody", { children: dataInPage.map((row, rowIndex) => {
                 const rowId = `${rowIndex + (page - 1) * pageSize}`;
@@ -33141,10 +33167,10 @@ var dataTablePropertyControls = {
     },
     defaultValue: []
   },
-  pageSize: {
-    type: ControlType7.Number,
-    defaultValue: 20
-  },
+  // pageSize: {
+  //   type: ControlType.Number,
+  //   defaultValue: 20,
+  // },
   stickyHeader: {
     type: ControlType7.Boolean,
     defaultValue: false

package/package.json

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