@ceed/ads 0.0.30 → 0.0.32

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

@@ -94,6 +94,20 @@ var Resizer = function (ref) { return (React.createElement(Box, { sx: {
         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];
@@ -128,20 +142,27 @@ function useDataTableRenderer(_a) {
         page: page,
         pageSize: pageSize,
         onPaginationModelChange: handlePageChange,
-        getColumnHeader: useCallback(function (column) {
-            var _a, _b, _c;
-            var ref = useRef(null);
-            var style = {
-                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",
-            };
-            var resizer = ((_b = column.resizable) !== null && _b !== void 0 ? _b : true) ? Resizer(ref) : null;
-            return (React.createElement("th", { ref: ref, key: column.field, style: style }, (_c = column.headerName) !== null && _c !== void 0 ? _c : 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,
@@ -180,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
@@ -218,14 +239,7 @@ function DataTable(props) {
                 boxShadow: "sm",
                 borderRadius: "sm",
             } }, backgroundProps),
-            React.createElement(Table, __assign({ sx: [
-                    {
-                        // "--TableCell-headBackground": "transparent",
-                        "--TableCell-selectedBackground": function (theme) {
-                            return theme.vars.palette.neutral.plainActiveBg;
-                        },
-                    },
-                ] }, innerProps),
+            React.createElement(Table, __assign({}, innerProps),
                 React.createElement("thead", null,
                     React.createElement("tr", null,
                         checkboxSelection && (React.createElement("th", { style: {
@@ -233,19 +247,12 @@ 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
                             ? function (e) { return onCheckboxChange(e, rowId); }
-                            : undefined, "aria-checked": checkboxSelection ? isSelectedRow(rowId) : undefined, style: checkboxSelection && isSelectedRow(rowId)
-                            ? {
-                                "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
-                                "--TableCell-headBackground": "var(--TableCell-selectedBackground)",
-                            }
-                            : {
-                                "--TableCell-headBackground": "transparent",
-                            } },
+                            : undefined, "aria-checked": checkboxSelection ? isSelectedRow(rowId) : undefined },
                         checkboxSelection && (React.createElement("th", { scope: "row", style: {
                                 textAlign: "center",
                             } },

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -12,8 +12,23 @@ var defaultTheme = extendTheme({
                 root: function (_a) {
                     var _b;
                     var theme = _a.theme;
-                    return (_b = {},
-                        // "--TableRow-hoverBackground": theme.palette.primary.outlinedHoverBg,
+                    return (_b = {
+                            "--TableRow-stripeBackground": theme.palette.background.level1,
+                            "--TableCell-selectedBackground": theme.palette.background.level2,
+                            "--TableRow-hoverBackground": theme.palette.background.level3,
+                            "& tbody tr[aria-checked=false] th": {
+                                "--TableCell-headBackground": "transparent",
+                            },
+                            "& tbody tr[aria-checked=true]:hover th": {
+                                "--TableCell-headBackground": "var(--TableRow-hoverBackground)",
+                            }
+                        },
+                        _b["& tbody tr[aria-checked=true]:not(:hover) th"] = {
+                            "--TableCell-headBackground": "var(--TableCell-selectedBackground)",
+                        },
+                        _b["& tbody tr[aria-checked=true]:not(:hover) td"] = {
+                            "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
+                        },
                         _b["& .".concat(checkboxClasses.root)] = {
                             verticalAlign: "middle",
                         },

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
@@ -32244,6 +32247,21 @@ var Resizer = (ref) => /* @__PURE__ */ jsx2(
     }
   }
 );
+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,
@@ -32298,24 +32316,27 @@ function useDataTableRenderer({
     page,
     pageSize,
     onPaginationModelChange: handlePageChange,
-    getColumnHeader: useCallback23(
-      (column2) => {
-        const ref = useRef40(null);
-        const style4 = {
-          width: column2.width,
-          minWidth: column2.minWidth ?? "50px",
-          maxWidth: column2.maxWidth,
-          textAlign: column2.type === "number" ? "end" : "start",
-          position: stickyHeader ? void 0 : "relative"
-        };
-        const resizer = column2.resizable ?? true ? Resizer(ref) : 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
@@ -32395,7 +32416,7 @@ function DataTable(props) {
     dataInPage,
     isTotalSelected,
     onTotalSelect,
-    getColumnHeader
+    HeadCell: HeadCell2
   } = useDataTableRenderer(props);
   return /* @__PURE__ */ jsxs2(Box_default2, { children: [
     /* @__PURE__ */ jsxs2(
@@ -32459,90 +32480,79 @@ function DataTable(props) {
           borderRadius: "sm"
         },
         ...backgroundProps,
-        children: /* @__PURE__ */ jsxs2(
-          Table3,
-          {
-            sx: [
+        children: /* @__PURE__ */ jsxs2(Table3, { ...innerProps, children: [
+          /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+            checkboxSelection && /* @__PURE__ */ jsx2(
+              "th",
               {
-                // "--TableCell-headBackground": "transparent",
-                "--TableCell-selectedBackground": (theme) => theme.vars.palette.neutral.plainActiveBg
-              }
-            ],
-            ...innerProps,
-            children: [
-              /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
-                checkboxSelection && /* @__PURE__ */ jsx2(
-                  "th",
+                style: {
+                  width: "40px",
+                  textAlign: "center"
+                },
+                children: /* @__PURE__ */ jsx2(
+                  RenderCheckbox,
                   {
-                    style: {
-                      width: "40px",
-                      textAlign: "center"
-                    },
-                    children: /* @__PURE__ */ jsx2(
-                      RenderCheckbox,
-                      {
-                        onChange: onAllCheckboxChange,
-                        checked: isAllSelected,
-                        indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
-                        ...checkboxProps
-                      }
-                    )
+                    onChange: onAllCheckboxChange,
+                    checked: isAllSelected,
+                    indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
+                    ...checkboxProps
                   }
-                ),
-                columns.map(getColumnHeader)
-              ] }) }),
-              /* @__PURE__ */ jsx2("tbody", { children: dataInPage.map((row, rowIndex) => {
-                const rowId = `${rowIndex + (page - 1) * pageSize}`;
-                return /* @__PURE__ */ jsxs2(
-                  "tr",
-                  {
-                    role: checkboxSelection ? "checkbox" : void 0,
-                    tabIndex: checkboxSelection ? -1 : void 0,
-                    onClick: checkboxSelection ? (e) => onCheckboxChange(e, rowId) : void 0,
-                    "aria-checked": checkboxSelection ? isSelectedRow(rowId) : void 0,
-                    style: checkboxSelection && isSelectedRow(rowId) ? {
-                      "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
-                      "--TableCell-headBackground": "var(--TableCell-selectedBackground)"
-                    } : {
-                      "--TableCell-headBackground": "transparent"
-                    },
-                    children: [
-                      checkboxSelection && /* @__PURE__ */ jsx2(
-                        "th",
+                )
+              }
+            ),
+            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}`;
+            return /* @__PURE__ */ jsxs2(
+              "tr",
+              {
+                role: checkboxSelection ? "checkbox" : void 0,
+                tabIndex: checkboxSelection ? -1 : void 0,
+                onClick: checkboxSelection ? (e) => onCheckboxChange(e, rowId) : void 0,
+                "aria-checked": checkboxSelection ? isSelectedRow(rowId) : void 0,
+                children: [
+                  checkboxSelection && /* @__PURE__ */ jsx2(
+                    "th",
+                    {
+                      scope: "row",
+                      style: {
+                        textAlign: "center"
+                      },
+                      children: /* @__PURE__ */ jsx2(
+                        RenderCheckbox,
                         {
-                          scope: "row",
-                          style: {
-                            textAlign: "center"
-                          },
-                          children: /* @__PURE__ */ jsx2(
-                            RenderCheckbox,
-                            {
-                              onChange: (e) => onCheckboxChange(e, rowId),
-                              checked: isSelectedRow(rowId),
-                              ...checkboxProps
-                            }
-                          )
+                          onChange: (e) => onCheckboxChange(e, rowId),
+                          checked: isSelectedRow(rowId),
+                          ...checkboxProps
                         }
-                      ),
-                      columns.map((column2) => /* @__PURE__ */ jsx2(
-                        "td",
-                        {
-                          style: {
-                            textAlign: column2.type === "number" ? "end" : "start"
-                          },
-                          children: row[column2.field]
-                        },
-                        column2.field
-                      ))
-                    ]
-                  },
-                  rowId
-                );
-              }) }),
-              Footer && /* @__PURE__ */ jsx2(Footer, {})
-            ]
-          }
-        )
+                      )
+                    }
+                  ),
+                  columns.map((column2) => /* @__PURE__ */ jsx2(
+                    "td",
+                    {
+                      style: {
+                        textAlign: column2.type === "number" ? "end" : "start"
+                      },
+                      children: row[column2.field]
+                    },
+                    column2.field
+                  ))
+                ]
+              },
+              rowId
+            );
+          }) }),
+          Footer && /* @__PURE__ */ jsx2(Footer, {})
+        ] })
       }
     ),
     /* @__PURE__ */ jsx2(
@@ -32819,7 +32829,21 @@ var defaultTheme4 = extendTheme({
       },
       styleOverrides: {
         root: ({ theme }) => ({
-          // "--TableRow-hoverBackground": theme.palette.primary.outlinedHoverBg,
+          "--TableRow-stripeBackground": theme.palette.background.level1,
+          "--TableCell-selectedBackground": theme.palette.background.level2,
+          "--TableRow-hoverBackground": theme.palette.background.level3,
+          "& tbody tr[aria-checked=false] th": {
+            "--TableCell-headBackground": "transparent"
+          },
+          "& tbody tr[aria-checked=true]:hover th": {
+            "--TableCell-headBackground": "var(--TableRow-hoverBackground)"
+          },
+          [`& tbody tr[aria-checked=true]:not(:hover) th`]: {
+            "--TableCell-headBackground": "var(--TableCell-selectedBackground)"
+          },
+          [`& tbody tr[aria-checked=true]:not(:hover) td`]: {
+            "--TableCell-dataBackground": "var(--TableCell-selectedBackground)"
+          },
           [`& .${checkboxClasses_default.root}`]: {
             verticalAlign: "middle"
           }
@@ -33139,10 +33163,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.30",
+  "version": "0.0.32",
   "main": "dist/index.js",
   "type": "module",
   "description": "UI tool for Ecube Labs front-end developers",