@ceed/ads 0.0.31 → 0.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/DataTable/DataTable.js +2 -16
  2. package/dist/components/ThemeProvider/ThemeProvider.js +17 -2
  3. package/framer/index.js +83 -87
  4. package/package.json +3 -3
package/dist/components/DataTable/DataTable.js CHANGED
@@ -239,14 +239,7 @@ function DataTable(props) {
239
239
  boxShadow: "sm",
240
240
  borderRadius: "sm",
241
241
  } }, backgroundProps),
242
- React.createElement(Table, __assign({ sx: [
243
- {
244
- // "--TableCell-headBackground": "transparent",
245
- "--TableCell-selectedBackground": function (theme) {
246
- return theme.vars.palette.neutral.plainActiveBg;
247
- },
248
- },
249
- ] }, innerProps),
242
+ React.createElement(Table, __assign({}, innerProps),
250
243
  React.createElement("thead", null,
251
244
  React.createElement("tr", null,
252
245
  checkboxSelection && (React.createElement("th", { style: {
@@ -259,14 +252,7 @@ function DataTable(props) {
259
252
  var rowId = "".concat(rowIndex + (page - 1) * pageSize);
260
253
  return (React.createElement("tr", { key: rowId, role: checkboxSelection ? "checkbox" : undefined, tabIndex: checkboxSelection ? -1 : undefined, onClick: checkboxSelection
261
254
  ? function (e) { return onCheckboxChange(e, rowId); }
262
- : undefined, "aria-checked": checkboxSelection ? isSelectedRow(rowId) : undefined, style: checkboxSelection && isSelectedRow(rowId)
263
- ? {
264
- "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
265
- "--TableCell-headBackground": "var(--TableCell-selectedBackground)",
266
- }
267
- : {
268
- "--TableCell-headBackground": "transparent",
269
- } },
255
+ : undefined, "aria-checked": checkboxSelection ? isSelectedRow(rowId) : undefined },
270
256
  checkboxSelection && (React.createElement("th", { scope: "row", style: {
271
257
  textAlign: "center",
272
258
  } },
package/dist/components/ThemeProvider/ThemeProvider.js CHANGED
@@ -12,8 +12,23 @@ var defaultTheme = extendTheme({
12
12
  root: function (_a) {
13
13
  var _b;
14
14
  var theme = _a.theme;
15
- return (_b = {},
16
- // "--TableRow-hoverBackground": theme.palette.primary.outlinedHoverBg,
15
+ return (_b = {
16
+ "--TableRow-stripeBackground": theme.palette.background.level1,
17
+ "--TableCell-selectedBackground": theme.palette.background.level2,
18
+ "--TableRow-hoverBackground": theme.palette.background.level3,
19
+ "& tbody tr[aria-checked=false] th": {
20
+ "--TableCell-headBackground": "transparent",
21
+ },
22
+ "& tbody tr[aria-checked=true]:hover th": {
23
+ "--TableCell-headBackground": "var(--TableRow-hoverBackground)",
24
+ }
25
+ },
26
+ _b["& tbody tr[aria-checked=true]:not(:hover) th"] = {
27
+ "--TableCell-headBackground": "var(--TableCell-selectedBackground)",
28
+ },
29
+ _b["& tbody tr[aria-checked=true]:not(:hover) td"] = {
30
+ "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
31
+ },
17
32
  _b["& .".concat(checkboxClasses.root)] = {
18
33
  verticalAlign: "middle",
19
34
  },
package/framer/index.js CHANGED
@@ -32480,97 +32480,79 @@ function DataTable(props) {
32480
32480
  borderRadius: "sm"
32481
32481
  },
32482
32482
  ...backgroundProps,
32483
- children: /* @__PURE__ */ jsxs2(
32484
- Table3,
32485
- {
32486
- sx: [
32483
+ children: /* @__PURE__ */ jsxs2(Table3, { ...innerProps, children: [
32484
+ /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
32485
+ checkboxSelection && /* @__PURE__ */ jsx2(
32486
+ "th",
32487
32487
  {
32488
- // "--TableCell-headBackground": "transparent",
32489
- "--TableCell-selectedBackground": (theme) => theme.vars.palette.neutral.plainActiveBg
32490
- }
32491
- ],
32492
- ...innerProps,
32493
- children: [
32494
- /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
32495
- checkboxSelection && /* @__PURE__ */ jsx2(
32496
- "th",
32488
+ style: {
32489
+ width: "40px",
32490
+ textAlign: "center"
32491
+ },
32492
+ children: /* @__PURE__ */ jsx2(
32493
+ RenderCheckbox,
32497
32494
  {
32498
- style: {
32499
- width: "40px",
32500
- textAlign: "center"
32501
- },
32502
- children: /* @__PURE__ */ jsx2(
32503
- RenderCheckbox,
32504
- {
32505
- onChange: onAllCheckboxChange,
32506
- checked: isAllSelected,
32507
- indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
32508
- ...checkboxProps
32509
- }
32510
- )
32495
+ onChange: onAllCheckboxChange,
32496
+ checked: isAllSelected,
32497
+ indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
32498
+ ...checkboxProps
32511
32499
  }
32512
- ),
32513
- columns.map((c) => /* @__PURE__ */ jsx2(
32514
- HeadCell2,
32515
- {
32516
- stickyHeader: props.stickyHeader,
32517
- ...c
32518
- },
32519
- c.field
32520
- ))
32521
- ] }) }),
32522
- /* @__PURE__ */ jsx2("tbody", { children: dataInPage.map((row, rowIndex) => {
32523
- const rowId = `${rowIndex + (page - 1) * pageSize}`;
32524
- return /* @__PURE__ */ jsxs2(
32525
- "tr",
32526
- {
32527
- role: checkboxSelection ? "checkbox" : void 0,
32528
- tabIndex: checkboxSelection ? -1 : void 0,
32529
- onClick: checkboxSelection ? (e) => onCheckboxChange(e, rowId) : void 0,
32530
- "aria-checked": checkboxSelection ? isSelectedRow(rowId) : void 0,
32531
- style: checkboxSelection && isSelectedRow(rowId) ? {
32532
- "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
32533
- "--TableCell-headBackground": "var(--TableCell-selectedBackground)"
32534
- } : {
32535
- "--TableCell-headBackground": "transparent"
32536
- },
32537
- children: [
32538
- checkboxSelection && /* @__PURE__ */ jsx2(
32539
- "th",
32500
+ )
32501
+ }
32502
+ ),
32503
+ columns.map((c) => /* @__PURE__ */ jsx2(
32504
+ HeadCell2,
32505
+ {
32506
+ stickyHeader: props.stickyHeader,
32507
+ ...c
32508
+ },
32509
+ c.field
32510
+ ))
32511
+ ] }) }),
32512
+ /* @__PURE__ */ jsx2("tbody", { children: dataInPage.map((row, rowIndex) => {
32513
+ const rowId = `${rowIndex + (page - 1) * pageSize}`;
32514
+ return /* @__PURE__ */ jsxs2(
32515
+ "tr",
32516
+ {
32517
+ role: checkboxSelection ? "checkbox" : void 0,
32518
+ tabIndex: checkboxSelection ? -1 : void 0,
32519
+ onClick: checkboxSelection ? (e) => onCheckboxChange(e, rowId) : void 0,
32520
+ "aria-checked": checkboxSelection ? isSelectedRow(rowId) : void 0,
32521
+ children: [
32522
+ checkboxSelection && /* @__PURE__ */ jsx2(
32523
+ "th",
32524
+ {
32525
+ scope: "row",
32526
+ style: {
32527
+ textAlign: "center"
32528
+ },
32529
+ children: /* @__PURE__ */ jsx2(
32530
+ RenderCheckbox,
32540
32531
  {
32541
- scope: "row",
32542
- style: {
32543
- textAlign: "center"
32544
- },
32545
- children: /* @__PURE__ */ jsx2(
32546
- RenderCheckbox,
32547
- {
32548
- onChange: (e) => onCheckboxChange(e, rowId),
32549
- checked: isSelectedRow(rowId),
32550
- ...checkboxProps
32551
- }
32552
- )
32532
+ onChange: (e) => onCheckboxChange(e, rowId),
32533
+ checked: isSelectedRow(rowId),
32534
+ ...checkboxProps
32553
32535
  }
32554
- ),
32555
- columns.map((column2) => /* @__PURE__ */ jsx2(
32556
- "td",
32557
- {
32558
- style: {
32559
- textAlign: column2.type === "number" ? "end" : "start"
32560
- },
32561
- children: row[column2.field]
32562
- },
32563
- column2.field
32564
- ))
32565
- ]
32566
- },
32567
- rowId
32568
- );
32569
- }) }),
32570
- Footer && /* @__PURE__ */ jsx2(Footer, {})
32571
- ]
32572
- }
32573
- )
32536
+ )
32537
+ }
32538
+ ),
32539
+ columns.map((column2) => /* @__PURE__ */ jsx2(
32540
+ "td",
32541
+ {
32542
+ style: {
32543
+ textAlign: column2.type === "number" ? "end" : "start"
32544
+ },
32545
+ children: row[column2.field]
32546
+ },
32547
+ column2.field
32548
+ ))
32549
+ ]
32550
+ },
32551
+ rowId
32552
+ );
32553
+ }) }),
32554
+ Footer && /* @__PURE__ */ jsx2(Footer, {})
32555
+ ] })
32574
32556
  }
32575
32557
  ),
32576
32558
  /* @__PURE__ */ jsx2(
@@ -32847,7 +32829,21 @@ var defaultTheme4 = extendTheme({
32847
32829
  },
32848
32830
  styleOverrides: {
32849
32831
  root: ({ theme }) => ({
32850
- // "--TableRow-hoverBackground": theme.palette.primary.outlinedHoverBg,
32832
+ "--TableRow-stripeBackground": theme.palette.background.level1,
32833
+ "--TableCell-selectedBackground": theme.palette.background.level2,
32834
+ "--TableRow-hoverBackground": theme.palette.background.level3,
32835
+ "& tbody tr[aria-checked=false] th": {
32836
+ "--TableCell-headBackground": "transparent"
32837
+ },
32838
+ "& tbody tr[aria-checked=true]:hover th": {
32839
+ "--TableCell-headBackground": "var(--TableRow-hoverBackground)"
32840
+ },
32841
+ [`& tbody tr[aria-checked=true]:not(:hover) th`]: {
32842
+ "--TableCell-headBackground": "var(--TableCell-selectedBackground)"
32843
+ },
32844
+ [`& tbody tr[aria-checked=true]:not(:hover) td`]: {
32845
+ "--TableCell-dataBackground": "var(--TableCell-selectedBackground)"
32846
+ },
32851
32847
  [`& .${checkboxClasses_default.root}`]: {
32852
32848
  verticalAlign: "middle"
32853
32849
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ceed/ads",
3
- "version": "0.0.31",
3
+ "version": "0.0.33",
4
4
  "main": "dist/index.js",
5
5
  "type": "module",
6
6
  "description": "UI tool for Ecube Labs front-end developers",
@@ -22,9 +22,9 @@
22
22
  "react-dom": "^17.0.0 || ^18.0.0"
23
23
  },
24
24
  "dependencies": {
25
- "@emotion/react": "^11.11.3",
25
+ "@emotion/react": "^11.11.0",
26
26
  "@emotion/styled": "^11.11.0",
27
- "@mui/joy": "^5.0.0-beta.26",
27
+ "@mui/joy": "^5.0.0-beta.32",
28
28
  "framer-motion": "^11.0.3"
29
29
  },
30
30
  "devDependencies": {