@versini/ui-table 6.3.9 → 6.4.0

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/components/Table/Table.js +261 -244
  2. package/dist/index.js +3 -3
  3. package/package.json +2 -2
package/dist/components/Table/Table.js CHANGED
@@ -1,8 +1,8 @@
1
- import { jsxs as g, jsx as l } from "react/jsx-runtime";
2
- import { ButtonSort_private as f } from "@versini/ui-button/private";
3
- import n from "clsx";
4
- import C, { useContext as p } from "react";
5
- import { TableCellSortDirections as k } from "../TableConstants/TableConstants.js";
1
+ import { jsxs as g, jsx as l, Fragment as w } from "react/jsx-runtime";
2
+ import { ButtonSort_private as C } from "@versini/ui-button/private";
3
+ import c from "clsx";
4
+ import N, { useContext as m } from "react";
5
+ import { TableCellSortDirections as u } from "../TableConstants/TableConstants.js";
6
6
  /*!
7
7
  @versini/ui-icons v4.15.1
8
8
  © 2025 gizmette.com
@@ -29,363 +29,380 @@ try {
29
29
  });
30
30
  } catch {
31
31
  }
32
- const x = ({ children: t, fill: a, viewBox: e, className: s, defaultViewBox: r, size: c, title: o, semantic: h = !1, ...i }) => {
33
- const d = n(c, s);
32
+ const x = ({ children: e, fill: r, viewBox: t, className: a, defaultViewBox: s, size: n, title: o, semantic: b = !1, ...i }) => {
33
+ const h = c(n, a);
34
34
  return /* @__PURE__ */ g("svg", {
35
35
  xmlns: "http://www.w3.org/2000/svg",
36
- className: d,
37
- viewBox: e || r,
38
- fill: a || "currentColor",
36
+ className: h,
37
+ viewBox: t || s,
38
+ fill: r || "currentColor",
39
39
  role: "img",
40
- "aria-hidden": !h,
40
+ "aria-hidden": !b,
41
41
  focusable: !1,
42
42
  ...i,
43
43
  children: [
44
- o && h && /* @__PURE__ */ l("title", {
44
+ o && b && /* @__PURE__ */ l("title", {
45
45
  children: o
46
46
  }),
47
- t
47
+ e
48
48
  ]
49
49
  });
50
- }, N = ({ className: t, viewBox: a, title: e, monotone: s, ...r }) => /* @__PURE__ */ g(x, {
50
+ }, S = ({ className: e, viewBox: r, title: t, monotone: a, ...s }) => /* @__PURE__ */ g(x, {
51
51
  defaultViewBox: "0 0 576 512",
52
52
  size: "size-5",
53
- viewBox: a,
54
- className: t,
55
- title: e || "Sort",
56
- ...r,
53
+ viewBox: r,
54
+ className: e,
55
+ title: t || "Sort",
56
+ ...s,
57
57
  children: [
58
58
  /* @__PURE__ */ l("path", {
59
59
  d: "M297.4 137.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l41.3-41.4V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.3l41.4 41.4c12.5 12.5 32.8 12.5 45.3 0 6.2-6.2 9.4-14.4 9.4-22.6s-3.1-16.4-9.4-22.6l-96-96c-6.3-6.4-14.5-9.5-22.7-9.5s-16.4 3.1-22.6 9.4z",
60
- opacity: s ? "1" : "0.4"
60
+ opacity: a ? "1" : "0.4"
61
61
  }),
62
62
  /* @__PURE__ */ l("path", {
63
63
  d: "M137.4 470.6c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 370.7V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v306.7l-41.4-41.3c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96z"
64
64
  })
65
65
  ]
66
- }), S = ({ className: t, viewBox: a, title: e, monotone: s, ...r }) => /* @__PURE__ */ g(x, {
66
+ }), T = ({ className: e, viewBox: r, title: t, monotone: a, ...s }) => /* @__PURE__ */ g(x, {
67
67
  defaultViewBox: "0 0 576 512",
68
68
  size: "size-5",
69
- viewBox: a,
70
- className: t,
71
- title: e || "Sort Down",
72
- ...r,
69
+ viewBox: r,
70
+ className: e,
71
+ title: t || "Sort Down",
72
+ ...s,
73
73
  children: [
74
74
  /* @__PURE__ */ l("path", {
75
75
  d: "M288 64c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h160c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-96c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32",
76
- opacity: s ? "1" : "0.4"
76
+ opacity: a ? "1" : "0.4"
77
77
  }),
78
78
  /* @__PURE__ */ l("path", {
79
79
  d: "M128 480c9 0 17.5-3.8 23.6-10.4l88-96c11.9-13 11.1-33.3-2-45.2s-33.3-11.1-45.2 2L160 365.7V64c0-17.7-14.3-32-32-32S96 46.3 96 64v301.7l-32.4-35.3c-11.9-13-32.2-13.9-45.2-2s-13.9 32.2-2 45.2l88 96c6.1 6.6 14.6 10.4 23.6 10.4"
80
80
  })
81
81
  ]
82
- }), T = ({ className: t, viewBox: a, title: e, monotone: s, ...r }) => /* @__PURE__ */ g(x, {
82
+ }), I = ({ className: e, viewBox: r, title: t, monotone: a, ...s }) => /* @__PURE__ */ g(x, {
83
83
  defaultViewBox: "0 0 576 512",
84
84
  size: "size-5",
85
- viewBox: a,
86
- className: t,
87
- title: e || "Sort Up",
88
- ...r,
85
+ viewBox: r,
86
+ className: e,
87
+ title: t || "Sort Up",
88
+ ...s,
89
89
  children: [
90
90
  /* @__PURE__ */ l("path", {
91
91
  d: "M288 64c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-96c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h160c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32",
92
- opacity: s ? "1" : "0.4"
92
+ opacity: a ? "1" : "0.4"
93
93
  }),
94
94
  /* @__PURE__ */ l("path", {
95
95
  d: "M128 32c9 0 17.5 3.8 23.6 10.4l88 96c11.9 13 11.1 33.3-2 45.2s-33.3 11.1-45.2-2L160 146.3V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V146.3l-32.4 35.3c-11.9 13-32.2 13.9-45.2 2s-13.9-32.2-2-45.2l88-96C110.5 35.8 119 32 128 32"
96
96
  })
97
97
  ]
98
- }), y = C.createContext({
98
+ }), p = N.createContext({
99
99
  mode: "light",
100
100
  cellWrapper: "thead",
101
101
  stickyHeader: !1,
102
102
  stickyFooter: !1,
103
103
  compact: !1
104
- }), u = "thead", v = "tfoot", w = "tbody", I = () => ({
104
+ }), k = "thead", v = "tfoot", f = "tbody", z = () => c(
105
+ "size-8",
106
+ "align-[-0.125em]",
107
+ "border-4",
108
+ "inline-block animate-spin rounded-full border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]",
109
+ "text-copy-light"
110
+ ), E = () => ({
105
111
  inner: "relative",
106
- overlay: n(
112
+ overlay: c(
107
113
  "absolute inset-0 z-20 cursor-not-allowed",
108
114
  "backdrop-blur-sm bg-white/30 dark:bg-black/30"
109
- )
110
- }), E = ({
111
- mode: t,
112
- className: a,
113
- wrapperClassName: e,
114
- stickyHeader: s,
115
- stickyFooter: r,
116
- disabled: c
115
+ ),
116
+ spinnerWrapper: c(
117
+ "absolute z-30 top-0 left-0 right-0 h-[min(100%,100vh)]",
118
+ "flex items-center justify-center",
119
+ "pointer-events-none"
120
+ ),
121
+ spinner: z()
122
+ }), R = ({
123
+ mode: e,
124
+ className: r,
125
+ wrapperClassName: t,
126
+ stickyHeader: a,
127
+ stickyFooter: s,
128
+ disabled: n
117
129
  }) => {
118
- const o = c ? I() : null;
130
+ const o = n ? E() : null;
119
131
  return {
120
132
  overlay: o?.overlay ?? "",
121
133
  inner: o?.inner ?? "",
122
- wrapper: n(
134
+ spinnerWrapper: o?.spinnerWrapper ?? "",
135
+ spinner: o?.spinner ?? "",
136
+ wrapper: c(
123
137
  "not-prose relative w-full rounded-lg shadow-md",
124
138
  {
125
- "overflow-x-auto": !s && !r && !c,
126
- "overflow-y-scroll": (s || r) && !c,
127
- "overflow-hidden": c,
128
- "bg-surface-darker": t === "dark" || t === "system",
129
- "bg-surface-light": t === "light" || t === "alt-system",
130
- "dark:bg-surface-light": t === "system",
131
- "dark:bg-surface-darker": t === "alt-system",
132
- "text-copy-light": t === "dark",
133
- "text-copy-dark": t === "light",
134
- "text-copy-light dark:text-copy-dark": t === "system",
135
- "text-copy-dark dark:text-copy-light": t === "alt-system"
139
+ "overflow-x-auto": !a && !s && !n,
140
+ "overflow-y-scroll": (a || s) && !n,
141
+ "overflow-hidden": n,
142
+ "bg-surface-darker": e === "dark" || e === "system",
143
+ "bg-surface-light": e === "light" || e === "alt-system",
144
+ "dark:bg-surface-light": e === "system",
145
+ "dark:bg-surface-darker": e === "alt-system",
146
+ "text-copy-light": e === "dark",
147
+ "text-copy-dark": e === "light",
148
+ "text-copy-light dark:text-copy-dark": e === "system",
149
+ "text-copy-dark dark:text-copy-light": e === "alt-system"
136
150
  },
137
- e
151
+ t
138
152
  ),
139
- table: n("my-0 w-full text-left text-sm", a, {
140
- "text-copy-light": t === "dark",
141
- "text-copy-dark": t === "light",
142
- "text-copy-light dark:text-copy-dark": t === "system",
143
- "text-copy-dark dark:text-copy-light": t === "alt-system"
153
+ table: c("my-0 w-full text-left text-sm", r, {
154
+ "text-copy-light": e === "dark",
155
+ "text-copy-dark": e === "light",
156
+ "text-copy-light dark:text-copy-dark": e === "system",
157
+ "text-copy-dark dark:text-copy-light": e === "alt-system"
144
158
  }),
145
- caption: n("py-2 text-sm font-bold", {
146
- "text-copy-light": t === "dark",
147
- "text-copy-dark": t === "light",
148
- "text-copy-light dark:text-copy-dark": t === "system",
149
- "text-copy-dark dark:text-copy-light": t === "alt-system"
159
+ caption: c("py-2 text-sm font-bold", {
160
+ "text-copy-light": e === "dark",
161
+ "text-copy-dark": e === "light",
162
+ "text-copy-light dark:text-copy-dark": e === "system",
163
+ "text-copy-dark dark:text-copy-light": e === "alt-system"
150
164
  })
151
165
  };
152
- }, R = ({
153
- className: t,
154
- stickyHeader: a,
155
- mode: e
156
- }) => n(
166
+ }, V = ({
167
+ className: e,
168
+ stickyHeader: r,
169
+ mode: t
170
+ }) => c(
157
171
  {
158
- "sticky top-0 z-10": a,
159
- "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": a && e === "dark",
160
- "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": a && e === "system",
161
- "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": a && e === "light",
162
- "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": a && e === "alt-system"
172
+ "sticky top-0 z-10": r,
173
+ "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": r && t === "dark",
174
+ "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": r && t === "system",
175
+ "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": r && t === "light",
176
+ "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": r && t === "alt-system"
163
177
  },
164
- t
165
- ), V = ({
166
- className: t,
167
- stickyFooter: a,
168
- mode: e
169
- }) => n(
178
+ e
179
+ ), W = ({
180
+ className: e,
181
+ stickyFooter: r,
182
+ mode: t
183
+ }) => c(
170
184
  {
171
- "sticky bottom-0 z-10": a,
172
- "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": a && e === "dark",
173
- "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": a && e === "system",
174
- "shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": a && e === "light",
175
- "shadow-[rgb(65_65_65_/30%)_-0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": a && e === "alt-system"
185
+ "sticky bottom-0 z-10": r,
186
+ "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": r && t === "dark",
187
+ "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": r && t === "system",
188
+ "shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": r && t === "light",
189
+ "shadow-[rgb(65_65_65_/30%)_-0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": r && t === "alt-system"
176
190
  },
177
- t
178
- ), z = ({
179
- mode: t,
180
- className: a,
181
- cellWrapper: e
182
- }) => e === u || e === v ? n(
191
+ e
192
+ ), B = ({
193
+ mode: e,
194
+ className: r,
195
+ cellWrapper: t
196
+ }) => t === k || t === v ? c(
183
197
  {
184
- "bg-table-head-dark": t === "dark" || t === "system",
185
- "bg-table-head-light": t === "light" || t === "alt-system",
186
- "dark:bg-table-head-light": t === "system",
187
- "dark:bg-table-head-dark": t === "alt-system"
198
+ "bg-table-head-dark": e === "dark" || e === "system",
199
+ "bg-table-head-light": e === "light" || e === "alt-system",
200
+ "dark:bg-table-head-light": e === "system",
201
+ "dark:bg-table-head-dark": e === "alt-system"
188
202
  },
189
- a
190
- ) : n(
203
+ r
204
+ ) : c(
191
205
  "border-b last:border-0",
192
206
  {
193
- "hover:!bg-table-dark-odd/50 hover:dark:!bg-table-light-odd/50": t === "alt-system" || t === "light",
194
- "hover:!bg-table-light-odd/50 hover:dark:!bg-table-dark-odd/50": t === "system" || t === "dark",
195
- "border-table-dark": t === "dark" || t === "system",
196
- "odd:bg-table-dark-odd even:bg-table-dark-even": t === "dark",
197
- "border-table-light": t === "light" || t === "alt-system",
198
- "odd:bg-table-light-odd even:bg-table-light-even": t === "light",
199
- "dark:border-table-light": t === "system",
200
- "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": t === "system",
201
- "dark:border-table-dark": t === "alt-system",
202
- "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": t === "alt-system"
207
+ "hover:bg-table-dark-odd/50! hover:dark:bg-table-light-odd/50!": e === "alt-system" || e === "light",
208
+ "hover:bg-table-light-odd/50! hover:dark:bg-table-dark-odd/50!": e === "system" || e === "dark",
209
+ "border-table-dark": e === "dark" || e === "system",
210
+ "odd:bg-table-dark-odd even:bg-table-dark-even": e === "dark",
211
+ "border-table-light": e === "light" || e === "alt-system",
212
+ "odd:bg-table-light-odd even:bg-table-light-even": e === "light",
213
+ "dark:border-table-light": e === "system",
214
+ "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": e === "system",
215
+ "dark:border-table-dark": e === "alt-system",
216
+ "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": e === "alt-system"
203
217
  },
204
- a
205
- ), B = ({
206
- cellWrapper: t,
207
- className: a,
208
- compact: e,
209
- mode: s,
210
- align: r
218
+ r
219
+ ), L = ({
220
+ cellWrapper: e,
221
+ className: r,
222
+ compact: t,
223
+ mode: a,
224
+ align: s
211
225
  }) => ({
212
- alignClasses: n({
213
- "flex justify-start text-left": r === "left",
214
- "flex justify-center text-center": r === "center",
215
- "flex justify-end text-right": r === "right"
226
+ alignClasses: c({
227
+ "flex justify-start text-left": s === "left",
228
+ "flex justify-center text-center": s === "center",
229
+ "flex justify-end text-right": s === "right"
216
230
  }),
217
- mainClasses: n(
231
+ mainClasses: c(
218
232
  {
219
- "text-copy-light": s === "dark" || s === "system",
220
- "text-copy-dark": s === "light" || s === "alt-system",
221
- "dark:text-copy-dark": s === "system",
222
- "dark:text-copy-light": s === "alt-system",
223
- "px-4 py-3": !e && (t === u || t === v),
224
- "p-4": !e && t === w,
225
- "px-2 py-1.5": e
233
+ "text-copy-light": a === "dark" || a === "system",
234
+ "text-copy-dark": a === "light" || a === "alt-system",
235
+ "dark:text-copy-dark": a === "system",
236
+ "dark:text-copy-light": a === "alt-system",
237
+ "px-4 py-3": !t && (e === k || e === v),
238
+ "p-4": !t && e === f,
239
+ "px-2 py-1.5": t
226
240
  },
227
- a
241
+ r
228
242
  )
229
243
  }), M = ({
230
- buttonClassName: t
231
- }) => n("rounded-none text-sm", t), j = ({
232
- children: t,
233
- mode: a = "system",
234
- caption: e,
235
- compact: s,
236
- disabled: r = !1,
237
- summary: c,
244
+ buttonClassName: e
245
+ }) => c("rounded-none text-sm", e), H = ({
246
+ children: e,
247
+ mode: r = "system",
248
+ caption: t,
249
+ compact: a,
250
+ disabled: s = !1,
251
+ summary: n,
238
252
  className: o,
239
- wrapperClassName: h,
253
+ wrapperClassName: b,
240
254
  maxHeight: i,
241
- stickyHeader: d,
255
+ stickyHeader: h,
242
256
  stickyFooter: _,
243
- ...m
257
+ ...y
244
258
  }) => {
245
- const b = E({
246
- mode: a,
259
+ const d = R({
260
+ mode: r,
247
261
  className: o,
248
- wrapperClassName: h,
249
- stickyHeader: d,
262
+ wrapperClassName: b,
263
+ stickyHeader: h,
250
264
  stickyFooter: _,
251
- disabled: r
265
+ disabled: s
252
266
  });
253
267
  return /* @__PURE__ */ l(
254
- y.Provider,
268
+ p.Provider,
255
269
  {
256
- value: { mode: a, stickyHeader: d, stickyFooter: _, compact: s },
270
+ value: { mode: r, stickyHeader: h, stickyFooter: _, compact: a },
257
271
  children: /* @__PURE__ */ l(
258
272
  "div",
259
273
  {
260
- className: b.wrapper,
274
+ className: d.wrapper,
261
275
  ...i && {
262
276
  style: { maxHeight: i }
263
277
  },
264
- children: r ? /* @__PURE__ */ g("div", { className: b.inner, children: [
265
- /* @__PURE__ */ l("div", { className: b.overlay }),
266
- /* @__PURE__ */ g(
267
- "table",
268
- {
269
- className: b.table,
270
- summary: c,
271
- ...r && { "aria-disabled": "true" },
272
- ...m,
273
- children: [
274
- e && /* @__PURE__ */ l("caption", { className: b.caption, children: e }),
275
- t
276
- ]
277
- }
278
- )
279
- ] }) : /* @__PURE__ */ g("table", { className: b.table, summary: c, ...m, children: [
280
- e && /* @__PURE__ */ l("caption", { className: b.caption, children: e }),
281
- t
278
+ children: s ? /* @__PURE__ */ g(w, { children: [
279
+ /* @__PURE__ */ l("div", { className: d.spinnerWrapper, children: /* @__PURE__ */ l("div", { className: d.spinner, role: "status", children: /* @__PURE__ */ l("span", { className: "sr-only", children: "Loading..." }) }) }),
280
+ /* @__PURE__ */ g("div", { className: d.inner, children: [
281
+ /* @__PURE__ */ l("div", { className: d.overlay }),
282
+ /* @__PURE__ */ g(
283
+ "table",
284
+ {
285
+ className: d.table,
286
+ summary: n,
287
+ ...s && { "aria-disabled": "true" },
288
+ ...y,
289
+ children: [
290
+ t && /* @__PURE__ */ l("caption", { className: d.caption, children: t }),
291
+ e
292
+ ]
293
+ }
294
+ )
295
+ ] })
296
+ ] }) : /* @__PURE__ */ g("table", { className: d.table, summary: n, ...y, children: [
297
+ t && /* @__PURE__ */ l("caption", { className: d.caption, children: t }),
298
+ e
282
299
  ] })
283
300
  }
284
301
  )
285
302
  }
286
303
  );
287
- }, D = ({
288
- children: t,
289
- className: a,
290
- ...e
304
+ }, F = ({
305
+ children: e,
306
+ className: r,
307
+ ...t
291
308
  }) => {
292
- const s = p(y);
293
- s.cellWrapper = u;
294
- const r = R({
295
- className: a,
296
- mode: s.mode,
297
- stickyHeader: s.stickyHeader
309
+ const a = m(p);
310
+ a.cellWrapper = k;
311
+ const s = V({
312
+ className: r,
313
+ mode: a.mode,
314
+ stickyHeader: a.stickyHeader
298
315
  });
299
- return /* @__PURE__ */ l("thead", { className: r, ...e, children: t });
300
- }, H = ({
301
- children: t,
302
- className: a,
303
- ...e
316
+ return /* @__PURE__ */ l("thead", { className: s, ...t, children: e });
317
+ }, G = ({
318
+ children: e,
319
+ className: r,
320
+ ...t
304
321
  }) => {
305
- const s = p(y);
306
- s.cellWrapper = v;
307
- const r = V({
308
- className: a,
309
- mode: s.mode,
310
- stickyFooter: s.stickyFooter
322
+ const a = m(p);
323
+ a.cellWrapper = v;
324
+ const s = W({
325
+ className: r,
326
+ mode: a.mode,
327
+ stickyFooter: a.stickyFooter
311
328
  });
312
- return /* @__PURE__ */ l("tfoot", { className: r, ...e, children: t });
313
- }, G = ({ children: t, ...a }) => {
314
- const e = p(y);
315
- return e.cellWrapper = w, /* @__PURE__ */ l("tbody", { ...a, children: t });
316
- }, F = ({
317
- children: t,
318
- className: a,
319
- ...e
329
+ return /* @__PURE__ */ l("tfoot", { className: s, ...t, children: e });
330
+ }, Y = ({ children: e, ...r }) => {
331
+ const t = m(p);
332
+ return t.cellWrapper = f, /* @__PURE__ */ l("tbody", { ...r, children: e });
333
+ }, q = ({
334
+ children: e,
335
+ className: r,
336
+ ...t
320
337
  }) => {
321
- const s = p(y), r = z({
322
- mode: s.mode,
323
- cellWrapper: s.cellWrapper,
324
- className: a
338
+ const a = m(p), s = B({
339
+ mode: a.mode,
340
+ cellWrapper: a.cellWrapper,
341
+ className: r
325
342
  });
326
- return /* @__PURE__ */ l("tr", { className: r, ...e, children: t });
327
- }, W = ({
328
- children: t,
329
- component: a,
330
- className: e,
331
- align: s,
332
- ...r
343
+ return /* @__PURE__ */ l("tr", { className: s, ...t, children: e });
344
+ }, O = ({
345
+ children: e,
346
+ component: r,
347
+ className: t,
348
+ align: a,
349
+ ...s
333
350
  }) => {
334
- const c = p(y), o = a || (c.cellWrapper === u ? "th" : "td"), { mainClasses: h, alignClasses: i } = B({
335
- cellWrapper: c.cellWrapper,
336
- className: e,
337
- mode: c.mode,
338
- compact: c.compact,
339
- align: s
351
+ const n = m(p), o = r || (n.cellWrapper === k ? "th" : "td"), { mainClasses: b, alignClasses: i } = L({
352
+ cellWrapper: n.cellWrapper,
353
+ className: t,
354
+ mode: n.mode,
355
+ compact: n.compact,
356
+ align: a
340
357
  });
341
- return s ? /* @__PURE__ */ l(o, { className: h, ...r, children: /* @__PURE__ */ l("div", { className: i, children: t }) }) : /* @__PURE__ */ l(o, { className: h, ...r, children: t });
342
- }, Y = ({
343
- align: t,
344
- children: a,
345
- buttonClassName: e,
346
- className: s,
347
- component: r,
348
- focusMode: c = "alt-system",
358
+ return a ? /* @__PURE__ */ l(o, { className: b, ...s, children: /* @__PURE__ */ l("div", { className: i, children: e }) }) : /* @__PURE__ */ l(o, { className: b, ...s, children: e });
359
+ }, J = ({
360
+ align: e,
361
+ children: r,
362
+ buttonClassName: t,
363
+ className: a,
364
+ component: s,
365
+ focusMode: n = "alt-system",
349
366
  mode: o = "alt-system",
350
- onClick: h,
367
+ onClick: b,
351
368
  sortDirection: i,
352
- sortedCell: d,
369
+ sortedCell: h,
353
370
  cellId: _,
354
- ...m
371
+ ...y
355
372
  }) => {
356
- const b = M({ buttonClassName: e });
373
+ const d = M({ buttonClassName: t });
357
374
  return /* @__PURE__ */ l(
358
- W,
375
+ O,
359
376
  {
360
- component: r,
361
- className: s,
377
+ component: s,
378
+ className: a,
362
379
  role: "columnheader",
363
- "aria-sort": i === k.ASC && d === _ ? "ascending" : i === k.DESC && d === _ ? "descending" : "other",
364
- ...m,
380
+ "aria-sort": i === u.ASC && h === _ ? "ascending" : i === u.DESC && h === _ ? "descending" : "other",
381
+ ...y,
365
382
  children: /* @__PURE__ */ l(
366
- f,
383
+ C,
367
384
  {
368
- active: d === _,
369
- className: b,
370
- onClick: h,
371
- align: t,
385
+ active: h === _,
386
+ className: d,
387
+ onClick: b,
388
+ align: e,
372
389
  noBorder: !0,
373
- focusMode: c,
390
+ focusMode: n,
374
391
  mode: o,
375
392
  fullWidth: !0,
376
- labelRight: a,
377
- children: i === k.ASC && d === _ ? /* @__PURE__ */ l(T, { className: "size-4", monotone: !0 }) : i === k.DESC && d === _ ? /* @__PURE__ */ l(S, { className: "size-4", monotone: !0 }) : /* @__PURE__ */ l(N, { className: "size-4", monotone: !0 })
393
+ labelRight: r,
394
+ children: i === u.ASC && h === _ ? /* @__PURE__ */ l(I, { className: "size-4", monotone: !0 }) : i === u.DESC && h === _ ? /* @__PURE__ */ l(T, { className: "size-4", monotone: !0 }) : /* @__PURE__ */ l(S, { className: "size-4", monotone: !0 })
378
395
  }
379
396
  )
380
397
  }
381
398
  );
382
399
  };
383
400
  export {
384
- j as Table,
385
- G as TableBody,
386
- W as TableCell,
387
- Y as TableCellSort,
388
- H as TableFooter,
389
- D as TableHead,
390
- F as TableRow
401
+ H as Table,
402
+ Y as TableBody,
403
+ O as TableCell,
404
+ J as TableCellSort,
405
+ G as TableFooter,
406
+ F as TableHead,
407
+ q as TableRow
391
408
  };
package/dist/index.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { Table as a, TableBody as r, TableCell as T, TableCellSort as i, TableFooter as _, TableHead as t, TableRow as b } from "./components/Table/Table.js";
2
2
  import { TableCellSortDirections as n } from "./components/TableConstants/TableConstants.js";
3
3
  /*!
4
- @versini/ui-table v6.3.9
4
+ @versini/ui-table v6.4.0
5
5
  © 2025 gizmette.com
6
6
  */
7
7
  try {
8
8
  window.__VERSINI_UI_TABLE__ || (window.__VERSINI_UI_TABLE__ = {
9
- version: "6.3.9",
10
- buildTime: "12/16/2025 06:22 PM EST",
9
+ version: "6.4.0",
10
+ buildTime: "12/20/2025 12:54 PM EST",
11
11
  homepage: "https://www.npmjs.com/package/@versini/ui-table",
12
12
  license: "MIT"
13
13
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-table",
3
- "version": "6.3.9",
3
+ "version": "6.4.0",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -58,5 +58,5 @@
58
58
  "sideEffects": [
59
59
  "**/*.css"
60
60
  ],
61
- "gitHead": "30d86d13d4369cc841fc267c970cca423d27bf2f"
61
+ "gitHead": "a1cc7acf3d77ff8e03ec1e26364437c32bab4794"
62
62
  }