@caspeco/casper-ui-library 8.4.0 → 8.4.1

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.
@@ -1 +1 @@
1
- {"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-row.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwC,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AA0B/F,OAAO,KAAK,EAAmB,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEpE,KAAK,mBAAmB,CAAC,KAAK,SAAS,SAAS,IAAI;IACnD,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,uBAAuB,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,QAAA,MAAM,uBAAuB,GAAI,KAAK,SAAS,SAAS,EAAE,+DAIvD,mBAAmB,CAAC,KAAK,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,4CAkD3F,CAAC;AA0TF,eAAO,MAAM,cAAc,EAAoC,OAAO,uBAAuB,CAAC"}
1
+ {"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-row.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwC,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAiB/F,OAAO,KAAK,EAAmB,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEpE,KAAK,mBAAmB,CAAC,KAAK,SAAS,SAAS,IAAI;IACnD,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,uBAAuB,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,QAAA,MAAM,uBAAuB,GAAI,KAAK,SAAS,SAAS,EAAE,+DAIvD,mBAAmB,CAAC,KAAK,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,4CAkD3F,CAAC;AAiSF,eAAO,MAAM,cAAc,EAAoC,OAAO,uBAAuB,CAAC"}
@@ -1,236 +1,222 @@
1
- import { jsx as t, Fragment as I, jsxs as x } from "react/jsx-runtime";
2
- import { Tr as A, Th as k, useMediaQuery as H, Portal as P } from "@chakra-ui/react";
3
- import { flexRender as V } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
4
- import { memo as L, useRef as N, useCallback as B, useLayoutEffect as O, forwardRef as F, useMemo as $ } from "react";
5
- import { closestCenter as j } from "../../node_modules/@dnd-kit/collision/dist/index.js";
6
- import { SortableKeyboardPlugin as E } from "../../node_modules/@dnd-kit/dom/sortable.js";
7
- import { useSortable as W } from "../../node_modules/@dnd-kit/react/sortable.js";
8
- import { useTableContext as C } from "./table-context.js";
9
- import { TableHeaderDropdown as K } from "./table-header-dropdown.js";
10
- import { translations as T } from "./translations.js";
11
- import { Flex as R } from "../flex/flex.js";
12
- import { Box as b } from "../box/box.js";
13
- import { Divider as Q } from "../divider/divider.js";
14
- import { Menu as X } from "../menu/menu.js";
15
- import { MenuButton as q } from "../menu/menu-button.js";
16
- import { Icons as M } from "../icon/types.js";
17
- import { MenuList as G } from "../menu/menu-list.js";
18
- import { Checkbox as J } from "../checkbox/checkbox.js";
19
- import { MenuItem as U } from "../menu/menu-item.js";
20
- import { IconButton as Y } from "../icon-button/icon-button.js";
21
- import { Button as Z } from "../button/button.js";
22
- import { ThemeColorVariable as u, ThemeSpaceVariable as S, ThemeFontSizeVariable as _, ThemeFontVariable as ee } from "../../theme/theme-types.js";
23
- const te = ({
24
- headerGroup: n,
25
- hideTableHeaderDropdown: o,
26
- portalContainerRef: s
1
+ import { jsx as e, Fragment as b, jsxs as C } from "react/jsx-runtime";
2
+ import { Tr as T, Th as I, useMediaQuery as M, Portal as D } from "@chakra-ui/react";
3
+ import { flexRender as A } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
4
+ import { memo as H, useRef as P, useCallback as k, forwardRef as V, useMemo as z } from "react";
5
+ import { closestCenter as N } from "../../node_modules/@dnd-kit/collision/dist/index.js";
6
+ import { SortableKeyboardPlugin as L } from "../../node_modules/@dnd-kit/dom/sortable.js";
7
+ import { useSortable as O } from "../../node_modules/@dnd-kit/react/sortable.js";
8
+ import { useTableContext as f } from "./table-context.js";
9
+ import { TableHeaderDropdown as F } from "./table-header-dropdown.js";
10
+ import { translations as B } from "./translations.js";
11
+ import { Flex as w } from "../flex/flex.js";
12
+ import { Box as p } from "../box/box.js";
13
+ import { Divider as $ } from "../divider/divider.js";
14
+ import { Menu as j } from "../menu/menu.js";
15
+ import { MenuButton as W } from "../menu/menu-button.js";
16
+ import { Icons as v } from "../icon/types.js";
17
+ import { MenuList as E } from "../menu/menu-list.js";
18
+ import { Checkbox as K } from "../checkbox/checkbox.js";
19
+ import { MenuItem as Q } from "../menu/menu-item.js";
20
+ import { IconButton as X } from "../icon-button/icon-button.js";
21
+ import { Button as q } from "../button/button.js";
22
+ import { ThemeColorVariable as m, ThemeSpaceVariable as h, ThemeFontSizeVariable as G, ThemeFontVariable as J } from "../../theme/theme-types.js";
23
+ const U = ({
24
+ headerGroup: o,
25
+ hideTableHeaderDropdown: n,
26
+ portalContainerRef: a
27
27
  }) => {
28
- const i = C(), a = !!i.getRowActions, c = (i.selectedRowIds?.length ?? 0) > 0 && (i.selectionActions?.length ?? 0) > 0;
29
- return /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(A, { children: c ? /* @__PURE__ */ t(
30
- k,
28
+ const r = f(), s = !!r.getRowActions, c = (r.selectedRowIds?.length ?? 0) > 0 && (r.selectionActions?.length ?? 0) > 0;
29
+ return /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(T, { children: c ? /* @__PURE__ */ e(
30
+ I,
31
31
  {
32
- colSpan: n.headers.length,
32
+ colSpan: o.headers.length,
33
33
  sx: {
34
34
  cursor: "default",
35
35
  "& div:hover": {
36
36
  backgroundColor: "transparent !important"
37
37
  },
38
38
  "div span": {
39
- color: u.OnBackground
39
+ color: m.OnBackground
40
40
  }
41
41
  },
42
42
  zIndex: 1,
43
43
  style: {
44
- borderBottom: `1px solid ${u.OnBackgroundBorder}`,
45
- paddingLeft: a ? "24px" : void 0
44
+ borderBottom: `1px solid ${m.OnBackgroundBorder}`,
45
+ paddingLeft: s ? "24px" : void 0
46
46
  },
47
- children: /* @__PURE__ */ t(z, { showSelectAll: !0, children: /* @__PURE__ */ t(le, {}) })
47
+ children: /* @__PURE__ */ e(y, { showSelectAll: !0, children: /* @__PURE__ */ e(ee, {}) })
48
48
  }
49
- ) : /* @__PURE__ */ t(I, { children: n.headers.map((r, e) => /* @__PURE__ */ t(
50
- ne,
49
+ ) : /* @__PURE__ */ e(b, { children: o.headers.map((l, t) => /* @__PURE__ */ e(
50
+ Y,
51
51
  {
52
- header: r,
53
- hideTableHeaderDropdown: o,
54
- applyActionMenuPadding: a,
55
- portalContainerRef: s,
56
- isFirstColumn: !r.isPlaceholder && e === 0,
57
- enableColumnReorder: i.enableColumnReorder
52
+ header: l,
53
+ hideTableHeaderDropdown: n,
54
+ applyActionMenuPadding: s,
55
+ portalContainerRef: a,
56
+ isFirstColumn: !l.isPlaceholder && t === 0,
57
+ enableColumnReorder: r.enableColumnReorder
58
58
  },
59
- r.id
60
- )) }) }, n.id) });
61
- }, ne = ({
62
- header: n,
63
- hideTableHeaderDropdown: o,
64
- applyActionMenuPadding: s,
65
- portalContainerRef: i,
66
- isFirstColumn: a = !1,
59
+ l.id
60
+ )) }) }, o.id) });
61
+ }, Y = ({
62
+ header: o,
63
+ hideTableHeaderDropdown: n,
64
+ applyActionMenuPadding: a,
65
+ portalContainerRef: r,
66
+ isFirstColumn: s = !1,
67
67
  enableColumnReorder: c = !1
68
68
  }) => {
69
- const r = N(null), e = C(), { column: l } = n, g = B((d) => {
70
- const h = d.getIsPinned(), p = d.getSize();
69
+ const l = P(null), t = f(), { column: i } = o, g = k((u) => {
70
+ const S = u.getIsPinned(), x = u.getSize();
71
71
  return {
72
- position: h ? "sticky" : "relative",
73
- left: h ? `${d.getStart("left")}px` : void 0,
74
- backgroundColor: h ? u.Background : void 0,
75
- zIndex: h ? 1 : 0,
76
- width: p,
77
- maxWidth: p
72
+ position: S ? "sticky" : "relative",
73
+ left: S ? `${u.getStart("left")}px` : void 0,
74
+ backgroundColor: S ? m.Background : void 0,
75
+ zIndex: S ? 1 : 0,
76
+ width: x,
77
+ maxWidth: x
78
78
  };
79
- }, []);
80
- O(() => {
81
- const d = r.current;
82
- if (!d) return;
83
- const h = l.id, p = (f) => {
84
- f > 0 && e.table.getState().columnSizing[h] !== f && e.table.setColumnSizing((w) => ({ ...w, [h]: f }));
85
- }, v = new ResizeObserver((f) => {
86
- const w = f[0];
87
- if (!w) return;
88
- const D = w.borderBoxSize?.[0]?.inlineSize ?? d.getBoundingClientRect().width;
89
- p(D);
90
- });
91
- return v.observe(d), p(d.getBoundingClientRect().width), () => v.disconnect();
92
- }, []);
93
- const m = /* @__PURE__ */ t(z, { showSelectAll: e.canSelectRows && a, children: /* @__PURE__ */ t(I, { children: o ? /* @__PURE__ */ t(b, { paddingLeft: S.Small, children: V(n.column.columnDef.header, n.getContext()) }) : /* @__PURE__ */ t(
94
- K,
79
+ }, []), d = /* @__PURE__ */ e(y, { showSelectAll: t.canSelectRows && s, children: /* @__PURE__ */ e(b, { children: n ? /* @__PURE__ */ e(p, { paddingLeft: h.Small, children: A(o.column.columnDef.header, o.getContext()) }) : /* @__PURE__ */ e(
80
+ F,
95
81
  {
96
- header: n,
97
- breakingContentState: e.breakingContentState,
98
- columnVisibility: e.columnVisibility,
99
- headerGroup: e.table.getHeaderGroups(),
100
- localeString: e.localeString,
101
- setBreakingContentState: e.setBreakingContentState,
102
- setSorting: e.setSorting,
103
- sorting: e.sorting,
104
- onBreakingContentChange: e.onBreakingContentChange,
105
- portalContainerRef: i
82
+ header: o,
83
+ breakingContentState: t.breakingContentState,
84
+ columnVisibility: t.columnVisibility,
85
+ headerGroup: t.table.getHeaderGroups(),
86
+ localeString: t.localeString,
87
+ setBreakingContentState: t.setBreakingContentState,
88
+ setSorting: t.setSorting,
89
+ sorting: t.sorting,
90
+ onBreakingContentChange: t.onBreakingContentChange,
91
+ portalContainerRef: r
106
92
  }
107
93
  ) }) });
108
- return c ? /* @__PURE__ */ t(
109
- oe,
94
+ return c ? /* @__PURE__ */ e(
95
+ Z,
110
96
  {
111
- ref: r,
112
- columnId: l.id,
113
- columnIndex: l.getIndex(),
114
- disableColumnReorder: l.columnDef.meta?.disableColumnReorder,
115
- isNumeric: l.columnDef.meta?.isNumeric,
116
- zIndex: l.getIsPinned() ? 2 : 1,
97
+ ref: l,
98
+ columnId: i.id,
99
+ columnIndex: i.getIndex(),
100
+ disableColumnReorder: i.columnDef.meta?.disableColumnReorder,
101
+ isNumeric: i.columnDef.meta?.isNumeric,
102
+ zIndex: i.getIsPinned() ? 2 : 1,
117
103
  style: {
118
- ...g(l),
119
- borderBottom: `1px solid ${u.OnBackgroundBorder}`,
120
- paddingLeft: a && s ? "24px" : void 0
104
+ ...g(i),
105
+ borderBottom: `1px solid ${m.OnBackgroundBorder}`,
106
+ paddingLeft: s && a ? "24px" : void 0
121
107
  },
122
- children: m
108
+ children: d
123
109
  }
124
- ) : /* @__PURE__ */ t(
125
- k,
110
+ ) : /* @__PURE__ */ e(
111
+ I,
126
112
  {
127
- ref: r,
113
+ ref: l,
128
114
  className: "tableHeaderCell",
129
- isNumeric: l.columnDef.meta?.isNumeric,
130
- zIndex: l.getIsPinned() ? 2 : 1,
115
+ isNumeric: i.columnDef.meta?.isNumeric,
116
+ zIndex: i.getIsPinned() ? 2 : 1,
131
117
  style: {
132
- ...g(l),
133
- borderBottom: `1px solid ${u.OnBackgroundBorder}`,
134
- paddingLeft: a && s ? "24px" : void 0
118
+ ...g(i),
119
+ borderBottom: `1px solid ${m.OnBackgroundBorder}`,
120
+ paddingLeft: s && a ? "24px" : void 0
135
121
  },
136
- children: m
122
+ children: d
137
123
  }
138
124
  );
139
- }, oe = F(({ columnId: n, columnIndex: o, isNumeric: s, disableColumnReorder: i, zIndex: a, style: c, children: r }, e) => {
140
- const { ref: l, isDragging: g, isDropTarget: m } = W({
141
- id: n,
142
- index: o,
143
- disabled: i,
144
- collisionDetector: j,
145
- plugins: [E]
125
+ }, Z = V(({ columnId: o, columnIndex: n, isNumeric: a, disableColumnReorder: r, zIndex: s, style: c, children: l }, t) => {
126
+ const { ref: i, isDragging: g, isDropTarget: d } = O({
127
+ id: o,
128
+ index: n,
129
+ disabled: r,
130
+ collisionDetector: N,
131
+ plugins: [L]
146
132
  });
147
- return /* @__PURE__ */ t(
148
- k,
133
+ return /* @__PURE__ */ e(
134
+ I,
149
135
  {
150
- ref: (d) => {
151
- l(d), typeof e == "function" ? e(d) : e && (e.current = d);
136
+ ref: (u) => {
137
+ i(u), typeof t == "function" ? t(u) : t && (t.current = u);
152
138
  },
153
139
  className: "tableHeaderCell",
154
- isNumeric: s,
155
- zIndex: a,
140
+ isNumeric: a,
141
+ zIndex: s,
156
142
  style: {
157
143
  ...c,
158
144
  cursor: g ? "grabbing" : "pointer",
159
145
  opacity: g ? 0.5 : 1,
160
- backgroundColor: m ? u.Background : void 0
146
+ backgroundColor: d ? m.Background : void 0
161
147
  },
162
- children: r
148
+ children: l
163
149
  }
164
150
  );
165
- }), z = ({ showSelectAll: n, children: o }) => n ? /* @__PURE__ */ x(R, { w: "100%", align: "center", children: [
166
- /* @__PURE__ */ t(b, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ t(re, {}) }),
167
- o
168
- ] }) : /* @__PURE__ */ t(I, { children: o }), re = () => {
169
- const n = C(), o = B(
170
- (a) => {
171
- const c = a.target.checked, r = n.getSelectableRowIds();
172
- c ? n.setSelectedRowIds((e) => [.../* @__PURE__ */ new Set([...e, ...r])]) : n.setSelectedRowIds((e) => e.filter((l) => !r.includes(l)));
151
+ }), y = ({ showSelectAll: o, children: n }) => o ? /* @__PURE__ */ C(w, { w: "100%", align: "center", children: [
152
+ /* @__PURE__ */ e(p, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ e(_, {}) }),
153
+ n
154
+ ] }) : /* @__PURE__ */ e(b, { children: n }), _ = () => {
155
+ const o = f(), n = k(
156
+ (s) => {
157
+ const c = s.target.checked, l = o.getSelectableRowIds();
158
+ c ? o.setSelectedRowIds((t) => [.../* @__PURE__ */ new Set([...t, ...l])]) : o.setSelectedRowIds((t) => t.filter((i) => !l.includes(i)));
173
159
  },
174
- [n]
175
- ), { allIsSelected: s, shouldShowIndeterminateState: i } = $(() => {
176
- const c = n.table.getRowModel().flatRows, r = new Set(n.selectedRowIds), e = n.getSelectableRowIds(), l = e.length > 0 && e.every((m) => r.has(m)), g = c.some((m) => r.has(m.id));
160
+ [o]
161
+ ), { allIsSelected: a, shouldShowIndeterminateState: r } = z(() => {
162
+ const c = o.table.getRowModel().flatRows, l = new Set(o.selectedRowIds), t = o.getSelectableRowIds(), i = t.length > 0 && t.every((d) => l.has(d)), g = c.some((d) => l.has(d.id));
177
163
  return {
178
- allIsSelected: l,
179
- shouldShowIndeterminateState: g && !l
164
+ allIsSelected: i,
165
+ shouldShowIndeterminateState: g && !i
180
166
  };
181
- }, [n]);
182
- return /* @__PURE__ */ t(
183
- J,
167
+ }, [o]);
168
+ return /* @__PURE__ */ e(
169
+ K,
184
170
  {
185
- isChecked: s,
186
- isIndeterminate: i,
187
- onChange: o
171
+ isChecked: a,
172
+ isIndeterminate: r,
173
+ onChange: n
188
174
  }
189
175
  );
190
- }, le = () => {
191
- const { localeString: n, selectedRowIds: o = [], selectionActions: s = [] } = C(), i = T[n], [a] = H("(min-width: 48em)"), c = s.length > 3 || !a, r = o.length === 1 ? i.selectedSingular.replace("{count}", "1") : i.selected.replace("{count}", o.length.toString());
192
- return /* @__PURE__ */ x(
193
- R,
176
+ }, ee = () => {
177
+ const { localeString: o, selectedRowIds: n = [], selectionActions: a = [] } = f(), r = B[o], [s] = M("(min-width: 48em)"), c = a.length > 3 || !s, l = n.length === 1 ? r.selectedSingular.replace("{count}", "1") : r.selected.replace("{count}", n.length.toString());
178
+ return /* @__PURE__ */ C(
179
+ w,
194
180
  {
195
- gap: S.Medium,
181
+ gap: h.Medium,
196
182
  align: "center",
197
183
  alignContent: "center",
198
- marginBottom: S.XSmall,
184
+ marginBottom: h.XSmall,
199
185
  children: [
200
- /* @__PURE__ */ t(
201
- b,
186
+ /* @__PURE__ */ e(
187
+ p,
202
188
  {
203
- pl: S.Small,
204
- color: u.OnBackground,
205
- fontFamily: ee.Body,
206
- fontSize: _.Medium,
189
+ pl: h.Small,
190
+ color: m.OnBackground,
191
+ fontFamily: J.Body,
192
+ fontSize: G.Medium,
207
193
  whiteSpace: "nowrap",
208
194
  style: { fontVariantNumeric: "normal" },
209
- children: r
195
+ children: l
210
196
  }
211
197
  ),
212
- /* @__PURE__ */ t(b, { children: /* @__PURE__ */ t(Q, { orientation: "vertical", height: "20px" }) }),
213
- /* @__PURE__ */ t(R, { gap: S.Small, align: "center", children: c ? /* @__PURE__ */ x(X, { children: [
214
- /* @__PURE__ */ t(q, { variant: "ghost", rightIcon: M.TreeViewCollapse, children: i.action }),
215
- /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(G, { children: s.map((e) => /* @__PURE__ */ t(y, { isMenuItem: !0, action: e }, e.name)) }) })
216
- ] }) : s.map((e) => /* @__PURE__ */ t(y, { isMenuItem: !1, action: e }, e.name)) })
198
+ /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e($, { orientation: "vertical", height: "20px" }) }),
199
+ /* @__PURE__ */ e(w, { gap: h.Small, align: "center", children: c ? /* @__PURE__ */ C(j, { children: [
200
+ /* @__PURE__ */ e(W, { variant: "ghost", rightIcon: v.TreeViewCollapse, children: r.action }),
201
+ /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(E, { children: a.map((t) => /* @__PURE__ */ e(R, { isMenuItem: !0, action: t }, t.name)) }) })
202
+ ] }) : a.map((t) => /* @__PURE__ */ e(R, { isMenuItem: !1, action: t }, t.name)) })
217
203
  ]
218
204
  }
219
205
  );
220
- }, y = ({ isMenuItem: n, action: o }) => {
221
- const { selectedRowIds: s, localeString: i } = C(), a = T[i], c = B(() => {
222
- o.onClick(s || []);
223
- }, [o, s]);
224
- return n ? /* @__PURE__ */ t(U, { onClick: c, children: o.variant === "delete" ? /* @__PURE__ */ t(b, { as: "span", color: u.Error, children: o.name }) : o.name }) : o.variant === "delete" ? /* @__PURE__ */ t(
225
- Y,
206
+ }, R = ({ isMenuItem: o, action: n }) => {
207
+ const { selectedRowIds: a, localeString: r } = f(), s = B[r], c = k(() => {
208
+ n.onClick(a || []);
209
+ }, [n, a]);
210
+ return o ? /* @__PURE__ */ e(Q, { onClick: c, children: n.variant === "delete" ? /* @__PURE__ */ e(p, { as: "span", color: m.Error, children: n.name }) : n.name }) : n.variant === "delete" ? /* @__PURE__ */ e(
211
+ X,
226
212
  {
227
213
  onClick: c,
228
- icon: M.Delete,
229
- "aria-label": a.deleteSelectedRows,
214
+ icon: v.Delete,
215
+ "aria-label": s.deleteSelectedRows,
230
216
  variant: "ghost"
231
217
  }
232
- ) : /* @__PURE__ */ t(Z, { onClick: c, variant: "ghost", children: o.name });
233
- }, Te = L(te);
218
+ ) : /* @__PURE__ */ e(q, { onClick: c, variant: "ghost", children: n.name });
219
+ }, xe = H(U);
234
220
  export {
235
- Te as TableHeaderRow
221
+ xe as TableHeaderRow
236
222
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@caspeco/casper-ui-library",
3
- "version": "8.4.0",
3
+ "version": "8.4.1",
4
4
  "prettier": "@caspeco/prettier-config",
5
5
  "type": "module",
6
6
  "sideEffects": false,