@cfx-dev/ui-components 2.1.14 → 2.1.15

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 (3) hide show
  1. package/dist/assets/Table.css +1 -1
  2. package/dist/components/Table/Table.js +61 -60
  3. package/package.json +1 -1
package/dist/assets/Table.css CHANGED
@@ -1 +1 @@
1
- ._iconButton_1yv0x_1{width:calc(var(--quant) * 6);height:calc(var(--quant) * 6);display:inline-flex;align-items:center;justify-content:center;color:rgba(var(--color-secondary),1)}._iconButton_1yv0x_1{transition:background-color .25s ease,color .25s ease,opacity .25s ease,outline-offset 0s,outline 0s}._iconButton_1yv0x_1:hover{color:rgba(var(--color-primary),1);background-color:var(--color-button-linked-hover-background)}._iconButton_1yv0x_1:not(:disabled):active{transform:none;opacity:.8}._root_1yv0x_21 table{width:100%;border-collapse:collapse;border-radius:var(--border-radius-small);overflow:hidden}._root_1yv0x_21 th,._root_1yv0x_21 td{text-align:left;padding:0 calc(var(--quant) * .75);color:#fff;height:calc(var(--quant) * 8.75);box-sizing:border-box}._root_1yv0x_21 ._radio_1yv0x_34{padding:calc(var(--quant) * .25)}._root_1yv0x_21 ._radio_1yv0x_34 ._radioContent_1yv0x_37{width:100%;height:100%;display:flex;align-items:center;justify-content:center}._root_1yv0x_21 ._pointer_1yv0x_44{cursor:pointer}._root_1yv0x_21 ._selectedRow_1yv0x_47{background-color:rgba(var(--color-secondary),.4);box-shadow:0 -1px rgba(var(--color-primary),1) inset}._root_1yv0x_21 th{position:sticky;top:0;z-index:0;background-color:rgba(var(--color-bg-light),1)}._root_1yv0x_21 th ._headerContent_1yv0x_57{display:flex;align-items:center;flex-direction:row}._root_1yv0x_21 th ._headerContent_1yv0x_57 ._iconButton_1yv0x_1{margin-left:var(--offset-medium)}._root_1yv0x_21 tr{box-shadow:0 -1px rgba(var(--color-bg-light),1) inset;box-sizing:border-box}._root_1yv0x_21 tr:hover{background-color:rgba(var(--color-secondary),.2)}._root_1yv0x_21 tr:hover:not(._selectedRow_1yv0x_47){box-shadow:none}
1
+ ._tableIcon_1waor_1._iconButton_1waor_1{width:calc(var(--quant) * 6);height:calc(var(--quant) * 6);display:inline-flex;align-items:center;justify-content:center;color:rgba(var(--color-secondary),1)}._tableIcon_1waor_1._iconButton_1waor_1{transition:background-color .25s ease,color .25s ease,opacity .25s ease,outline-offset 0s,outline 0s}._tableIcon_1waor_1._iconButton_1waor_1:hover{color:rgba(var(--color-primary),1);background-color:var(--color-button-linked-hover-background)}._tableIcon_1waor_1._iconButton_1waor_1:not(:disabled):active{transform:none;opacity:.8}._root_1waor_21 table{width:100%;border-collapse:collapse;border-radius:var(--border-radius-small);overflow:hidden}._root_1waor_21 th,._root_1waor_21 td{text-align:left;padding:0 calc(var(--quant) * .75);color:#fff;height:calc(var(--quant) * 8.75);box-sizing:border-box}._root_1waor_21 td{padding:calc(var(--quant) * 1.5) calc(var(--quant) * .75)}._root_1waor_21 ._radio_1waor_37{padding:calc(var(--quant) * .25)}._root_1waor_21 ._radio_1waor_37 ._radioContent_1waor_40{width:100%;height:100%;display:flex;align-items:center;justify-content:center}._root_1waor_21 ._pointer_1waor_47{cursor:pointer}._root_1waor_21 ._selectedRow_1waor_50{background-color:rgba(var(--color-secondary),.4);box-shadow:0 -1px rgba(var(--color-primary),1) inset}._root_1waor_21 th{position:sticky;top:0;z-index:0;background-color:rgba(var(--color-bg-light),1)}._root_1waor_21 th ._headerContent_1waor_60{display:flex;align-items:center;flex-direction:row}._root_1waor_21 th ._headerContent_1waor_60 ._iconButton_1waor_1{margin-left:var(--offset-medium)}._root_1waor_21 tr{box-shadow:0 -1px rgba(var(--color-bg-light),1) inset;box-sizing:border-box}._root_1waor_21 tr:hover{background-color:rgba(var(--color-secondary),.2)}._root_1waor_21 tr:hover:not(._selectedRow_1waor_50){box-shadow:none}
package/dist/components/Table/Table.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import { jsx as t, jsxs as C } from "react/jsx-runtime";
2
- import s, { useState as p } from "react";
3
- import B from "../Checkbox/Checkbox.js";
4
- import T from "../IconButton/IconButton.js";
5
- import { Text as $ } from "../Text/Text.js";
2
+ import a, { useState as p } from "react";
3
+ import y from "../Checkbox/Checkbox.js";
4
+ import I from "../IconButton/IconButton.js";
5
+ import { Text as T } from "../Text/Text.js";
6
6
  import { clsx as k } from "../../utils/clsx.js";
7
- import '../../assets/Table.css';const j = "_iconButton_1yv0x_1", z = "_root_1yv0x_21", A = "_radio_1yv0x_34", E = "_radioContent_1yv0x_37", O = "_pointer_1yv0x_44", S = "_selectedRow_1yv0x_47", F = "_headerContent_1yv0x_57", l = {
7
+ import '../../assets/Table.css';const $ = "_tableIcon_1waor_1", j = "_iconButton_1waor_1", z = "_root_1waor_21", A = "_radio_1waor_37", E = "_radioContent_1waor_40", O = "_pointer_1waor_47", S = "_selectedRow_1waor_50", F = "_headerContent_1waor_60", c = {
8
+ tableIcon: $,
8
9
  iconButton: j,
9
10
  root: z,
10
11
  radio: A,
@@ -17,26 +18,26 @@ function H(r) {
17
18
  const {
18
19
  className: e,
19
20
  color: o = "inherit"
20
- } = r, n = k(l.iconButton, e);
21
- return /* @__PURE__ */ t(T, { ...r, className: n, color: o });
21
+ } = r, n = k(c.tableIcon, c.iconButton, e);
22
+ return /* @__PURE__ */ t(I, { ...r, className: n, color: o });
22
23
  }
23
- function I(r) {
24
+ function V(r) {
24
25
  const {
25
26
  item: e,
26
27
  onSortClick: o
27
- } = r, n = s.useCallback(() => {
28
+ } = r, n = a.useCallback(() => {
28
29
  o && o(e.sortKey || e.text);
29
- }, [e.sortKey, e.text, o]), _ = k(l.headerContent, {
30
- [l.sortable]: e.sortable,
31
- [l.empty]: !e.text
30
+ }, [e.sortKey, e.text, o]), b = k(c.headerContent, {
31
+ [c.sortable]: e.sortable,
32
+ [c.empty]: !e.text
32
33
  });
33
34
  return /* @__PURE__ */ t(
34
35
  "th",
35
36
  {
36
- className: e.sortable ? l.pointer : void 0,
37
+ className: e.sortable ? c.pointer : void 0,
37
38
  onClick: e.sortable ? n : void 0,
38
- children: /* @__PURE__ */ C("div", { className: _, children: [
39
- /* @__PURE__ */ t($, { color: "secondary", weight: "bold", uppercase: !0, size: "xxsmall", children: e.text }),
39
+ children: /* @__PURE__ */ C("div", { className: b, children: [
40
+ /* @__PURE__ */ t(T, { color: "secondary", weight: "bold", uppercase: !0, size: "xxsmall", children: e.text }),
40
41
  !!e.sortable && /* @__PURE__ */ t(
41
42
  H,
42
43
  {
@@ -48,103 +49,103 @@ function I(r) {
48
49
  }
49
50
  );
50
51
  }
51
- function V(r) {
52
+ function q(r) {
52
53
  const {
53
54
  index: e,
54
55
  includeRadio: o = !1,
55
56
  selectedRow: n,
56
- item: _,
57
+ item: b,
57
58
  dataContainer: h,
58
59
  onSelectChange: i
59
- } = r, f = s.useCallback((a) => {
60
+ } = r, u = a.useCallback((l) => {
60
61
  i(
61
- a ? e : null
62
+ l ? e : null
62
63
  );
63
- }, [i, e]), u = s.useCallback(() => {
64
+ }, [i, e]), _ = a.useCallback(() => {
64
65
  i(e);
65
- }, [i, e]), b = k({
66
- [l.selectedRow]: n === e,
67
- [l.pointer]: o
66
+ }, [i, e]), f = k({
67
+ [c.selectedRow]: n === e,
68
+ [c.pointer]: o
68
69
  });
69
70
  return /* @__PURE__ */ C(
70
71
  "tr",
71
72
  {
72
- className: b,
73
- onClick: o ? u : void 0,
73
+ className: f,
74
+ onClick: o ? _ : void 0,
74
75
  children: [
75
- o && /* @__PURE__ */ t("td", { className: l.radio, children: /* @__PURE__ */ t("div", { className: l.radioContent, children: /* @__PURE__ */ t(
76
- B,
76
+ o && /* @__PURE__ */ t("td", { className: c.radio, children: /* @__PURE__ */ t("div", { className: c.radioContent, children: /* @__PURE__ */ t(
77
+ y,
77
78
  {
78
79
  size: "small",
79
- onCheckedChange: f,
80
+ onCheckedChange: u,
80
81
  "aria-label": `${e}`,
81
82
  checked: n === e
82
83
  }
83
84
  ) }) }),
84
- _.map((a, x) => {
85
+ b.map((l, w) => {
85
86
  let m;
86
- return s.isValidElement(a) ? m = a : h ? m = s.createElement(h, { item: a }) : m = String(a), /* @__PURE__ */ t("td", { children: m }, `item-${x}`);
87
+ return a.isValidElement(l) ? m = l : h ? m = a.createElement(h, { item: l }) : m = String(l), /* @__PURE__ */ t("td", { children: m }, `item-${w}`);
87
88
  })
88
89
  ]
89
90
  },
90
91
  `row-${e}`
91
92
  );
92
93
  }
93
- function M({
94
+ function P({
94
95
  headers: r = [],
95
96
  data: e = [],
96
97
  includeRadio: o = !1,
97
98
  onSelectChange: n,
98
- dataContainer: _,
99
+ dataContainer: b,
99
100
  selectedRow: h = null,
100
101
  sortBy: i,
101
- sortOrder: f = "asc",
102
- onSortChange: u
102
+ sortOrder: u = "asc",
103
+ onSortChange: _
103
104
  }) {
104
- const [b, a] = p(h), [x, m] = p(i), [v, w] = p(f), N = s.useCallback((c) => {
105
- const y = x === c && v === "asc" ? "desc" : "asc";
106
- m(c), w(y), u == null || u(c, y);
107
- }, [u, x, v]), R = s.useCallback(
108
- (c) => {
109
- const d = c === b ? null : c;
110
- a(d), n == null || n(d);
105
+ const [f, l] = p(h), [w, m] = p(i), [x, N] = p(u), B = a.useCallback((s) => {
106
+ const R = w === s && x === "asc" ? "desc" : "asc";
107
+ m(s), N(R), _ == null || _(s, R);
108
+ }, [_, w, x]), v = a.useCallback(
109
+ (s) => {
110
+ const d = s === f ? null : s;
111
+ l(d), n == null || n(d);
111
112
  },
112
- [n, b]
113
+ [n, f]
113
114
  );
114
- return s.useEffect(() => {
115
- a(h);
116
- }, [h]), s.useEffect(() => {
115
+ return a.useEffect(() => {
116
+ l(h);
117
+ }, [h]), a.useEffect(() => {
117
118
  m(i);
118
- }, [i]), s.useEffect(() => {
119
- w(f);
120
- }, [f]), /* @__PURE__ */ t("div", { className: l.root, children: /* @__PURE__ */ C("table", { children: [
119
+ }, [i]), a.useEffect(() => {
120
+ N(u);
121
+ }, [u]), /* @__PURE__ */ t("div", { className: c.root, children: /* @__PURE__ */ C("table", { children: [
121
122
  /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ C("tr", { children: [
122
123
  o && /* @__PURE__ */ t("th", { "aria-label": "Select Row" }),
123
- r.map((c, d) => /* @__PURE__ */ t(
124
- I,
124
+ r.map((s, d) => /* @__PURE__ */ t(
125
+ V,
125
126
  {
126
- item: c,
127
- onSortClick: N
127
+ item: s,
128
+ onSortClick: B
128
129
  },
129
130
  `header-${d}`
130
131
  ))
131
132
  ] }) }),
132
- /* @__PURE__ */ t("tbody", { children: e.map((c, d) => /* @__PURE__ */ t(
133
- V,
133
+ /* @__PURE__ */ t("tbody", { children: e.map((s, d) => /* @__PURE__ */ t(
134
+ q,
134
135
  {
135
136
  index: d,
136
- item: c,
137
+ item: s,
137
138
  includeRadio: o,
138
- selectedRow: b,
139
- onSelectChange: R,
140
- dataContainer: _
139
+ selectedRow: f,
140
+ onSelectChange: v,
141
+ dataContainer: b
141
142
  },
142
143
  `row-${d}`
143
144
  )) })
144
145
  ] }) });
145
146
  }
146
147
  export {
147
- M as Table,
148
- I as TableHeaderItem,
148
+ P as Table,
149
+ V as TableHeaderItem,
149
150
  H as TableIconButton
150
151
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cfx-dev/ui-components",
3
3
  "private": false,
4
- "version": "2.1.14",
4
+ "version": "2.1.15",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "main": "dist/main.js",