@crispy-seed/data-table 0.1.1 → 0.1.2

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 (49) hide show
  1. package/dist/index.cjs +4563 -2
  2. package/dist/index.js +4547 -1
  3. package/package.json +1 -1
  4. package/dist/DataTable-12s-D02v6Qj5.js +0 -1523
  5. package/dist/DataTable-12s-Gpv6I4J8.cjs +0 -1574
  6. package/dist/DataTable-12s-Zml1x9Kr-12s-B-mwMBhn.cjs +0 -161
  7. package/dist/DataTable-12s-Zml1x9Kr-12s-BR-yHfob.js +0 -153
  8. package/dist/Menu-12s-A4lEc__n.cjs +0 -103
  9. package/dist/Menu-12s-v9vnaq8F.js +0 -77
  10. package/dist/Select-12s-CE3SMzFp.js +0 -218
  11. package/dist/Select-12s-CNQC9z8t.cjs +0 -249
  12. package/dist/body-cells-12s-2sTwdliH.cjs +0 -461
  13. package/dist/body-cells-12s-Ba2uF4T-.js +0 -452
  14. package/dist/column-calc-12s-C1-I2KdV.js +0 -129
  15. package/dist/column-calc-12s-CJ26VuDJ.cjs +0 -149
  16. package/dist/column-layout-12s-BhQmNTJG.js +0 -99
  17. package/dist/column-layout-12s-k2fZYeKl.cjs +0 -120
  18. package/dist/column-menu-12s-6Yvu4SZ0.js +0 -406
  19. package/dist/column-menu-12s-BnknuXGh.cjs +0 -426
  20. package/dist/editors-12s-C0RxmTcI.cjs +0 -554
  21. package/dist/editors-12s-COixUnI2.js +0 -524
  22. package/dist/resize-12s-CajyNXFB.js +0 -58
  23. package/dist/resize-12s-ChLpxb4i.cjs +0 -58
  24. package/dist/states-12s-BB0PT_bq.cjs +0 -125
  25. package/dist/states-12s-m5mBR90e.js +0 -122
  26. package/dist/toolbar-12s-B1xiS-Zu.js +0 -68
  27. package/dist/toolbar-12s-DzLbghpK.cjs +0 -70
  28. package/dist/useDataTable-12s-BHiDUubw-12s-CBeCwTe7.js +0 -61
  29. package/dist/useDataTable-12s-BHiDUubw-12s-Dgvt7XDk.cjs +0 -61
  30. package/dist/useDataTableColumnCalc-12s-DTQQTtEJ-12s-CvD14JYo.cjs +0 -207
  31. package/dist/useDataTableColumnCalc-12s-DTQQTtEJ-12s-DsEse3uq.js +0 -183
  32. package/dist/useDataTableColumns-12s-Cn2ZAzFL-12s-CD6goR59.js +0 -289
  33. package/dist/useDataTableColumns-12s-Cn2ZAzFL-12s-CUk_CpYT.cjs +0 -292
  34. package/dist/useDataTableEdit-12s-9Wb_UCrN-12s-BoOHq3GB.js +0 -98
  35. package/dist/useDataTableEdit-12s-9Wb_UCrN-12s-De6YHBba.cjs +0 -98
  36. package/dist/useDataTableFilter-12s-ZzbmWMin-12s-CWyBeFna.js +0 -74
  37. package/dist/useDataTableFilter-12s-ZzbmWMin-12s-lpjzZY3_.cjs +0 -74
  38. package/dist/useDataTableInfiniteScroll-12s-8ZG31URd-12s-BexjP6iO.js +0 -104
  39. package/dist/useDataTableInfiniteScroll-12s-8ZG31URd-12s-Bt8gojr9.cjs +0 -104
  40. package/dist/useDataTableRow-12s-CPYaDa1p-12s-4qkGoz-j.js +0 -30
  41. package/dist/useDataTableRow-12s-CPYaDa1p-12s-DG64uYjn.cjs +0 -30
  42. package/dist/useDataTableScroll-12s-BKDCr0en-12s-C7f2vHeG.js +0 -61
  43. package/dist/useDataTableScroll-12s-BKDCr0en-12s-CUvUYMtt.cjs +0 -61
  44. package/dist/useDataTableSearch-12s-Ck3iWcpX-12s-B-65V6gH.js +0 -37
  45. package/dist/useDataTableSearch-12s-Ck3iWcpX-12s-DhVfN2Hq.cjs +0 -37
  46. package/dist/useDataTableSelection-12s-BIDtiRQq-12s-IS__VAnU.cjs +0 -71
  47. package/dist/useDataTableSelection-12s-BIDtiRQq-12s-O6M_BhrH.js +0 -71
  48. package/dist/useDataTableSort-12s-DvJYtmeS-12s-C5VGnsq4.cjs +0 -78
  49. package/dist/useDataTableSort-12s-DvJYtmeS-12s-DABSNt6U.js +0 -78
@@ -1,1574 +0,0 @@
1
- 'use client';
2
- function __insertCSS(code) {
3
- if (!code || typeof document == 'undefined') return
4
- let head = document.head || document.getElementsByTagName('head')[0]
5
- let style = document.createElement('style')
6
- style.type = 'text/css'
7
- head.appendChild(style)
8
- ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
9
- }
10
-
11
- var React = require('react');
12
- var jsxRuntime = require('react/jsx-runtime');
13
- var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-B-mwMBhn.cjs');
14
- var domUtils = require('@seed-design/dom-utils');
15
- var checkbox = require('@seed-design/css/recipes/checkbox');
16
- var checkmark = require('@seed-design/css/recipes/checkmark');
17
- var reactCheckbox = require('@seed-design/react-checkbox');
18
- var reactScaleFeedback = require('@seed-design/react-scale-feedback');
19
- var checkboxGroup = require('@seed-design/css/recipes/checkbox-group');
20
- var bodyCells12s = require('./body-cells-12s-2sTwdliH.cjs');
21
- var columnCalc12s = require('./column-calc-12s-CJ26VuDJ.cjs');
22
- var columnLayout12s = require('./column-layout-12s-k2fZYeKl.cjs');
23
- var columnMenu12s = require('./column-menu-12s-BnknuXGh.cjs');
24
- var states12s = require('./states-12s-BB0PT_bq.cjs');
25
- var toolbar12s = require('./toolbar-12s-DzLbghpK.cjs');
26
-
27
- function _interopNamespace(e) {
28
- if (e && e.__esModule) return e;
29
- var n = Object.create(null);
30
- if (e) {
31
- Object.keys(e).forEach(function (k) {
32
- if (k !== 'default') {
33
- var d = Object.getOwnPropertyDescriptor(e, k);
34
- Object.defineProperty(n, k, d.get ? d : {
35
- enumerable: true,
36
- get: function () { return e[k]; }
37
- });
38
- }
39
- });
40
- }
41
- n.default = e;
42
- return n;
43
- }
44
-
45
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
46
-
47
- // src/IconChevronDownLine.tsx
48
- var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
49
- viewBox: "0 0 24 24",
50
- fill: "none",
51
- xmlns: "http://www.w3.org/2000/svg",
52
- "data-seed-icon": "true",
53
- width: size,
54
- height: size,
55
- ref,
56
- ...props,
57
- children: /* @__PURE__ */ jsxRuntime.jsx("g", {
58
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
59
- fillRule: "evenodd",
60
- clipRule: "evenodd",
61
- d: "M21.2612 7.27589C20.8613 6.89499 20.2283 6.9104 19.8474 7.31032L11.9996 15.55L4.15284 7.31037C3.77196 6.91043 3.13899 6.89497 2.73904 7.27584C2.3391 7.65671 2.32364 8.28969 2.70451 8.68963L11.2754 17.6896C11.4641 17.8878 11.7258 18 11.9995 18C12.2732 18 12.5349 17.8879 12.7236 17.6897L21.2956 8.68968C21.6765 8.28976 21.6611 7.65679 21.2612 7.27589Z",
62
- fill: "currentColor"
63
- })
64
- })
65
- });
66
- var IconChevronDownLine = /*#__PURE__*/ React.forwardRef(Icon$a);
67
- var IconChevronDownLine_default = IconChevronDownLine;
68
-
69
- // src/IconChevronUpLine.tsx
70
- var Icon$9 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
71
- viewBox: "0 0 24 24",
72
- fill: "none",
73
- xmlns: "http://www.w3.org/2000/svg",
74
- "data-seed-icon": "true",
75
- width: size,
76
- height: size,
77
- ref,
78
- ...props,
79
- children: /* @__PURE__ */ jsxRuntime.jsx("g", {
80
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
81
- fillRule: "evenodd",
82
- clipRule: "evenodd",
83
- d: "M21.2612 16.7241C20.8613 17.105 20.2283 17.0896 19.8474 16.6897L11.9996 8.45L4.15284 16.6896C3.77196 17.0896 3.13899 17.105 2.73904 16.7242C2.3391 16.3433 2.32364 15.7103 2.70451 15.3104L11.2754 6.31037C11.4641 6.11218 11.7258 6.00001 11.9995 6C12.2732 5.99999 12.5349 6.11215 12.7236 6.31032L21.2956 15.3103C21.6765 15.7102 21.6611 16.3432 21.2612 16.7241Z",
84
- fill: "currentColor"
85
- })
86
- })
87
- });
88
- var IconChevronUpLine = /*#__PURE__*/ React.forwardRef(Icon$9);
89
- var IconChevronUpLine_default = IconChevronUpLine;
90
-
91
- // src/IconDot3HorizontalLine.tsx
92
- var Icon$8 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
93
- viewBox: "0 0 24 24",
94
- fill: "none",
95
- xmlns: "http://www.w3.org/2000/svg",
96
- "data-seed-icon": "true",
97
- width: size,
98
- height: size,
99
- ref,
100
- ...props,
101
- children: /* @__PURE__ */ jsxRuntime.jsx("g", {
102
- children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
103
- children: [
104
- /* @__PURE__ */ jsxRuntime.jsx("path", {
105
- d: "M4.625 10.375C3.72754 10.375 3 11.1025 3 12C3 12.8975 3.72754 13.625 4.625 13.625C5.52246 13.625 6.25 12.8975 6.25 12C6.25 11.1025 5.52246 10.375 4.625 10.375Z",
106
- fill: "currentColor"
107
- }),
108
- /* @__PURE__ */ jsxRuntime.jsx("path", {
109
- d: "M12.075 10.375C11.1775 10.375 10.45 11.1025 10.45 12C10.45 12.8975 11.1775 13.625 12.075 13.625C12.9724 13.625 13.7 12.8975 13.7 12C13.7 11.1025 12.9724 10.375 12.075 10.375Z",
110
- fill: "currentColor"
111
- }),
112
- /* @__PURE__ */ jsxRuntime.jsx("path", {
113
- d: "M19.375 10.375C18.4775 10.375 17.75 11.1025 17.75 12C17.75 12.8975 18.4775 13.625 19.375 13.625C20.2725 13.625 21 12.8975 21 12C21 11.1025 20.2725 10.375 19.375 10.375Z",
114
- fill: "currentColor"
115
- })
116
- ]
117
- })
118
- })
119
- });
120
- var IconDot3HorizontalLine = /*#__PURE__*/ React.forwardRef(Icon$8);
121
- var IconDot3HorizontalLine_default = IconDot3HorizontalLine;
122
-
123
- // src/IconMagnifyingglassLine.tsx
124
- var Icon$7 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
125
- viewBox: "0 0 24 24",
126
- fill: "none",
127
- xmlns: "http://www.w3.org/2000/svg",
128
- "data-seed-icon": "true",
129
- width: size,
130
- height: size,
131
- ref,
132
- ...props,
133
- children: /* @__PURE__ */ jsxRuntime.jsx("g", {
134
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
135
- fillRule: "evenodd",
136
- clipRule: "evenodd",
137
- d: "M11.3111 1.2002C6.00313 1.2002 1.69995 5.49902 1.69995 10.8048V10.8178C1.69995 16.1236 6.00313 20.4224 11.3111 20.4224C13.5994 20.4224 15.711 19.6233 17.3631 18.2785L21.493 22.4083C21.8835 22.7988 22.5167 22.7988 22.9072 22.4083C23.2977 22.0177 23.2977 21.3846 22.9072 20.9941L18.777 16.864C20.1196 15.2095 20.9222 13.0996 20.9222 10.8048C20.9222 5.49902 16.619 1.2002 11.3111 1.2002ZM3.69995 10.8048C3.69995 6.60502 7.10627 3.2002 11.3111 3.2002C15.5159 3.2002 18.9222 6.60502 18.9222 10.8048C18.9222 13.0794 17.9298 15.1209 16.3465 16.5182L16.3446 16.52C15.0067 17.707 13.2419 18.4224 11.3111 18.4224C7.10627 18.4224 3.69995 15.0176 3.69995 10.8178V10.8048Z",
138
- fill: "currentColor"
139
- })
140
- })
141
- });
142
- var IconMagnifyingglassLine = /*#__PURE__*/ React.forwardRef(Icon$7);
143
- var IconMagnifyingglassLine_default = IconMagnifyingglassLine;
144
-
145
- // src/IconSlider2HorizontalLine.tsx
146
- var Icon$6 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
147
- viewBox: "0 0 24 24",
148
- fill: "none",
149
- xmlns: "http://www.w3.org/2000/svg",
150
- "data-seed-icon": "true",
151
- width: size,
152
- height: size,
153
- ref,
154
- ...props,
155
- children: /* @__PURE__ */ jsxRuntime.jsx("g", {
156
- children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
157
- children: [
158
- /* @__PURE__ */ jsxRuntime.jsx("path", {
159
- fillRule: "evenodd",
160
- clipRule: "evenodd",
161
- d: "M9.99331 7.24609H3C2.44772 7.24609 2 6.79838 2 6.24609C2 5.69381 2.44772 5.24609 3 5.24609H9.99331C10.443 3.38141 12.1222 1.99609 14.125 1.99609C16.1278 1.99609 17.807 3.38141 18.2567 5.24609H21C21.5523 5.24609 22 5.69381 22 6.24609C22 6.79838 21.5523 7.24609 21 7.24609H18.2567C17.807 9.11078 16.1278 10.4961 14.125 10.4961C12.1222 10.4961 10.443 9.11078 9.99331 7.24609ZM11.875 6.24609C11.875 5.00345 12.8824 3.99609 14.125 3.99609C15.3676 3.99609 16.375 5.00345 16.375 6.24609C16.375 7.48873 15.3676 8.49609 14.125 8.49609C12.8824 8.49609 11.875 7.48873 11.875 6.24609Z",
162
- fill: "currentColor"
163
- }),
164
- /* @__PURE__ */ jsxRuntime.jsx("path", {
165
- fillRule: "evenodd",
166
- clipRule: "evenodd",
167
- d: "M6.25 13.4956C3.90279 13.4956 2 15.3984 2 17.7456C2 20.0928 3.90279 21.9956 6.25 21.9956C8.25016 21.9956 9.92761 20.6139 10.3799 18.7529L20.9996 18.7456C21.5518 18.7452 21.9993 18.2972 21.9989 17.7449C21.9985 17.1926 21.5505 16.7452 20.9982 16.7456L10.3834 16.7529C9.93635 14.8845 8.25537 13.4956 6.25 13.4956ZM4 17.7456C4 16.503 5.00736 15.4956 6.25 15.4956C7.49264 15.4956 8.5 16.503 8.5 17.7456C8.5 18.9882 7.49264 19.9956 6.25 19.9956C5.00736 19.9956 4 18.9882 4 17.7456Z",
168
- fill: "currentColor"
169
- })
170
- ]
171
- })
172
- })
173
- });
174
- var IconSlider2HorizontalLine = /*#__PURE__*/ React.forwardRef(Icon$6);
175
- var IconSlider2HorizontalLine_default = IconSlider2HorizontalLine;
176
-
177
- // src/IconPersonCircleLine.tsx
178
- var Icon$5 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
179
- viewBox: "0 0 24 24",
180
- fill: "none",
181
- xmlns: "http://www.w3.org/2000/svg",
182
- "data-seed-icon": "true",
183
- width: size,
184
- height: size,
185
- ref,
186
- ...props,
187
- children: /* @__PURE__ */ jsxRuntime.jsx("g", {
188
- children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
189
- children: [
190
- /* @__PURE__ */ jsxRuntime.jsx("path", {
191
- fillRule: "evenodd",
192
- clipRule: "evenodd",
193
- d: "M12 5.5C9.79172 5.5 8 7.29172 8 9.5C8 11.7083 9.79172 13.5 12 13.5C14.2083 13.5 16 11.7083 16 9.5C16 7.29172 14.2083 5.5 12 5.5ZM10 9.5C10 8.39628 10.8963 7.5 12 7.5C13.1037 7.5 14 8.39628 14 9.5C14 10.6037 13.1037 11.5 12 11.5C10.8963 11.5 10 10.6037 10 9.5Z",
194
- fill: "currentColor"
195
- }),
196
- /* @__PURE__ */ jsxRuntime.jsx("path", {
197
- fillRule: "evenodd",
198
- clipRule: "evenodd",
199
- d: "M1 12C1 5.92772 5.92772 1 12 1C18.0723 1 23 5.92772 23 12C23 18.0723 18.0723 23 12 23C5.92772 23 1 18.0723 1 12ZM12 3C7.03229 3 3 7.03229 3 12C3 14.3609 3.91073 16.5105 5.39977 18.1164C5.87422 17.4277 6.5536 16.8564 7.3236 16.4211C8.60413 15.6971 10.2434 15.2793 12.0002 15.2793C13.757 15.2793 15.3962 15.6971 16.6768 16.4211C17.4467 16.8564 18.126 17.4276 18.6004 18.1162C20.0894 16.5103 21 14.3608 21 12C21 7.03229 16.9677 3 12 3ZM12 21C10.1211 21 8.3761 20.4232 6.93241 19.4372C7.17777 18.9952 7.62665 18.5473 8.30791 18.1621C9.25286 17.6279 10.5454 17.2793 12.0002 17.2793C13.455 17.2793 14.7475 17.6279 15.6925 18.1621C16.3736 18.5472 16.8225 18.9951 17.0679 19.437C15.6241 20.4231 13.879 21 12 21Z",
200
- fill: "currentColor"
201
- })
202
- ]
203
- })
204
- })
205
- });
206
- var IconPersonCircleLine = /*#__PURE__*/ React.forwardRef(Icon$5);
207
- var IconPersonCircleLine_default = IconPersonCircleLine;
208
-
209
- // src/IconPlusLine.tsx
210
- var Icon$4 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
211
- viewBox: "0 0 24 24",
212
- fill: "none",
213
- xmlns: "http://www.w3.org/2000/svg",
214
- "data-seed-icon": "true",
215
- width: size,
216
- height: size,
217
- ref,
218
- ...props,
219
- children: /* @__PURE__ */ jsxRuntime.jsx("g", {
220
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
221
- d: "M4 13H11V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20V13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H13V4C13 3.45 12.55 3 12 3C11.45 3 11 3.45 11 4V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13Z",
222
- fill: "currentColor"
223
- })
224
- })
225
- });
226
- var IconPlusLine = /*#__PURE__*/ React.forwardRef(Icon$4);
227
- var IconPlusLine_default = IconPlusLine;
228
-
229
- // src/IconMinusLine.tsx
230
- var Icon$3 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
231
- viewBox: "0 0 24 24",
232
- fill: "none",
233
- xmlns: "http://www.w3.org/2000/svg",
234
- "data-seed-icon": "true",
235
- width: size,
236
- height: size,
237
- ref,
238
- ...props,
239
- children: /* @__PURE__ */ jsxRuntime.jsx("g", {
240
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
241
- d: "M4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13Z",
242
- fill: "currentColor"
243
- })
244
- })
245
- });
246
- var IconMinusLine = /*#__PURE__*/ React.forwardRef(Icon$3);
247
- var IconMinusLine_default = IconMinusLine;
248
-
249
- // src/IconCheckmarkLine.tsx
250
- var Icon$2 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
251
- viewBox: "0 0 24 24",
252
- fill: "none",
253
- xmlns: "http://www.w3.org/2000/svg",
254
- "data-seed-icon": "true",
255
- width: size,
256
- height: size,
257
- ref,
258
- ...props,
259
- children: /* @__PURE__ */ jsxRuntime.jsx("g", {
260
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
261
- fillRule: "evenodd",
262
- clipRule: "evenodd",
263
- d: "M22.1186 3.71436C22.5526 4.05602 22.6273 4.68476 22.2857 5.11868L10.4749 20.1187C10.2958 20.3461 10.0269 20.4848 9.73779 20.4989C9.44865 20.5129 9.1676 20.401 8.96728 20.192L1.77809 12.692C1.39592 12.2933 1.40931 11.6603 1.80801 11.2781C2.20671 10.896 2.83973 10.9094 3.22191 11.3081L9.61511 17.9777L20.7143 3.88141C21.056 3.44749 21.6847 3.3727 22.1186 3.71436Z",
264
- fill: "currentColor"
265
- })
266
- })
267
- });
268
- var IconCheckmarkLine = /*#__PURE__*/ React.forwardRef(Icon$2);
269
- var IconCheckmarkLine_default = IconCheckmarkLine;
270
-
271
- // src/IconChevronDownSmallLine.tsx
272
- var Icon$1 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
273
- viewBox: "0 0 24 24",
274
- fill: "none",
275
- xmlns: "http://www.w3.org/2000/svg",
276
- "data-seed-icon": "true",
277
- width: size,
278
- height: size,
279
- ref,
280
- ...props,
281
- children: /* @__PURE__ */ jsxRuntime.jsx("g", {
282
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
283
- fillRule: "evenodd",
284
- clipRule: "evenodd",
285
- d: "M6.29436 9.29143C6.68569 8.90171 7.31886 8.90303 7.70857 9.29436L11.9848 13.5884L16.297 9.3256C16.6897 8.93733 17.3229 8.94097 17.7112 9.33374C18.0994 9.7265 18.0958 10.3597 17.703 10.7479L12.6823 15.7112C12.2906 16.0984 11.6594 16.096 11.2707 15.7056L6.29143 10.7056C5.90171 10.3143 5.90303 9.68114 6.29436 9.29143Z",
286
- fill: "currentColor"
287
- })
288
- })
289
- });
290
- var IconChevronDownSmallLine = /*#__PURE__*/ React.forwardRef(Icon$1);
291
- var IconChevronDownSmallLine_default = IconChevronDownSmallLine;
292
-
293
- // src/IconCheckmarkFatFill.tsx
294
- var Icon = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
295
- viewBox: "0 0 24 24",
296
- fill: "none",
297
- xmlns: "http://www.w3.org/2000/svg",
298
- "data-seed-icon": "true",
299
- width: size,
300
- height: size,
301
- ref,
302
- ...props,
303
- children: /* @__PURE__ */ jsxRuntime.jsx("g", {
304
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
305
- d: "M22.5517 3.16422C21.8141 2.5834 20.7452 2.71054 20.1644 3.4482L9.56331 16.9118L3.72729 10.8235C3.07759 10.1457 2.00145 10.1229 1.32367 10.7726C0.645881 11.4223 0.623111 12.4985 1.27281 13.1763L8.462 20.6763C8.80254 21.0315 9.28032 21.2218 9.77186 21.1979C10.2634 21.174 10.7205 20.9382 11.0249 20.5516L22.8357 5.55155C23.4165 4.81389 23.2894 3.74505 22.5517 3.16422Z",
306
- fill: "currentColor"
307
- })
308
- })
309
- });
310
- var IconCheckmarkFatFill = /*#__PURE__*/ React.forwardRef(Icon);
311
- var IconCheckmarkFatFill_default = IconCheckmarkFatFill;
312
-
313
- var __defProp$1 = Object.defineProperty;
314
- var __name$1 = (target, value)=>__defProp$1(target, "name", {
315
- value,
316
- configurable: true
317
- });
318
- function setRef(ref, value) {
319
- if (typeof ref === "function") {
320
- return ref(value);
321
- } else if (ref !== null && ref !== void 0) {
322
- ref.current = value;
323
- }
324
- }
325
- __name$1(setRef, "setRef");
326
- function composeRefs(...refs) {
327
- return (node)=>{
328
- let hasCleanup = false;
329
- const cleanups = refs.map((ref)=>{
330
- const cleanup = setRef(ref, node);
331
- if (!hasCleanup && typeof cleanup == "function") {
332
- hasCleanup = true;
333
- }
334
- return cleanup;
335
- });
336
- if (hasCleanup) {
337
- return ()=>{
338
- for(let i = 0; i < cleanups.length; i++){
339
- const cleanup = cleanups[i];
340
- if (typeof cleanup == "function") {
341
- cleanup();
342
- } else {
343
- setRef(refs[i], null);
344
- }
345
- }
346
- };
347
- }
348
- };
349
- }
350
- __name$1(composeRefs, "composeRefs");
351
- function useComposedRefs(...refs) {
352
- return React__namespace.useCallback(composeRefs(...refs), refs);
353
- }
354
- __name$1(useComposedRefs, "useComposedRefs");
355
-
356
- var __defProp = Object.defineProperty;
357
- var __name = (target, value)=>__defProp(target, "name", {
358
- value,
359
- configurable: true
360
- });
361
- // @__NO_SIDE_EFFECTS__
362
- function createSlot(ownerName) {
363
- const Slot2 = /*#__PURE__*/ React__namespace.forwardRef((props, forwardedRef)=>{
364
- let { children, ...slotProps } = props;
365
- let slottableElement = null;
366
- let hasSlottable = false;
367
- const newChildren = [];
368
- if (isLazyComponent(children) && typeof use === "function") {
369
- children = use(children._payload);
370
- }
371
- React__namespace.Children.forEach(children, (maybeSlottable)=>{
372
- if (isSlottable(maybeSlottable)) {
373
- hasSlottable = true;
374
- const slottable = maybeSlottable;
375
- let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
376
- if (isLazyComponent(child) && typeof use === "function") {
377
- child = use(child._payload);
378
- }
379
- slottableElement = getSlottableElementFromSlottable(slottable, child);
380
- newChildren.push(slottableElement?.props?.children);
381
- } else {
382
- newChildren.push(maybeSlottable);
383
- }
384
- });
385
- if (slottableElement) {
386
- slottableElement = /*#__PURE__*/ React__namespace.cloneElement(slottableElement, void 0, newChildren);
387
- } else if (// A `Slottable` was found but it didn't resolve to a single element (e.g.
388
- // it wrapped multiple elements, text, or a render-prop `child` that
389
- // wasn't an element). Don't fall back to treating the `Slottable` wrapper
390
- // itself as the slot target — throw a descriptive error below instead.
391
- !hasSlottable && React__namespace.Children.count(children) === 1 && /*#__PURE__*/ React__namespace.isValidElement(children)) {
392
- slottableElement = children;
393
- }
394
- const slottableElementRef = slottableElement ? getElementRef(slottableElement) : void 0;
395
- const composedRef = useComposedRefs(forwardedRef, slottableElementRef);
396
- if (!slottableElement) {
397
- if (children || children === 0) {
398
- throw new Error(hasSlottable ? createSlottableError(ownerName) : createSlotError(ownerName));
399
- }
400
- return children;
401
- }
402
- const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
403
- if (slottableElement.type !== React__namespace.Fragment) {
404
- mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
405
- }
406
- return /*#__PURE__*/ React__namespace.cloneElement(slottableElement, mergedProps);
407
- });
408
- Slot2.displayName = `${ownerName}.Slot`;
409
- return Slot2;
410
- }
411
- __name(createSlot, "createSlot");
412
- var Slot = /* @__PURE__ */ createSlot("Slot");
413
- var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
414
- // @__NO_SIDE_EFFECTS__
415
- function createSlottable(ownerName) {
416
- const Slottable2 = /* @__PURE__ */ __name((props)=>"child" in props ? props.children(props.child) : props.children, "Slottable");
417
- Slottable2.displayName = `${ownerName}.Slottable`;
418
- Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
419
- return Slottable2;
420
- }
421
- __name(createSlottable, "createSlottable");
422
- var getSlottableElementFromSlottable = /* @__PURE__ */ __name((slottable, child)=>{
423
- if ("child" in slottable.props) {
424
- const child2 = slottable.props.child;
425
- if (!/*#__PURE__*/ React__namespace.isValidElement(child2)) return null;
426
- return /*#__PURE__*/ React__namespace.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
427
- }
428
- return /*#__PURE__*/ React__namespace.isValidElement(child) ? child : null;
429
- }, "getSlottableElementFromSlottable");
430
- function mergeProps(slotProps, childProps) {
431
- const overrideProps = {
432
- ...childProps
433
- };
434
- for(const propName in childProps){
435
- const slotPropValue = slotProps[propName];
436
- const childPropValue = childProps[propName];
437
- const isHandler = /^on[A-Z]/.test(propName);
438
- if (isHandler) {
439
- if (slotPropValue && childPropValue) {
440
- overrideProps[propName] = (...args)=>{
441
- const result = childPropValue(...args);
442
- slotPropValue(...args);
443
- return result;
444
- };
445
- } else if (slotPropValue) {
446
- overrideProps[propName] = slotPropValue;
447
- }
448
- } else if (propName === "style") {
449
- overrideProps[propName] = {
450
- ...slotPropValue,
451
- ...childPropValue
452
- };
453
- } else if (propName === "className") {
454
- overrideProps[propName] = [
455
- slotPropValue,
456
- childPropValue
457
- ].filter(Boolean).join(" ");
458
- }
459
- }
460
- return {
461
- ...slotProps,
462
- ...overrideProps
463
- };
464
- }
465
- __name(mergeProps, "mergeProps");
466
- function getElementRef(element) {
467
- let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
468
- let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
469
- if (mayWarn) {
470
- return element.ref;
471
- }
472
- getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
473
- mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
474
- if (mayWarn) {
475
- return element.props.ref;
476
- }
477
- return element.props.ref || element.ref;
478
- }
479
- __name(getElementRef, "getElementRef");
480
- function isSlottable(child) {
481
- return /*#__PURE__*/ React__namespace.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
482
- }
483
- __name(isSlottable, "isSlottable");
484
- var REACT_LAZY_TYPE = Symbol.for("react.lazy");
485
- function isLazyComponent(element) {
486
- return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
487
- }
488
- __name(isLazyComponent, "isLazyComponent");
489
- function isPromiseLike(value) {
490
- return typeof value === "object" && value !== null && "then" in value;
491
- }
492
- __name(isPromiseLike, "isPromiseLike");
493
- var createSlotError = /* @__PURE__ */ __name((ownerName)=>{
494
- return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
495
- }, "createSlotError");
496
- var createSlottableError = /* @__PURE__ */ __name((ownerName)=>{
497
- return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
498
- }, "createSlottableError");
499
- var use = React__namespace[" use ".trim().toString()];
500
-
501
- function createPrimitive(node) {
502
- const Node = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
503
- const { asChild, ...primitiveProps } = props;
504
- const Comp = asChild ? Slot : node;
505
- return /*#__PURE__*/ jsxRuntime.jsx(Comp, {
506
- ...primitiveProps,
507
- ref: ref
508
- });
509
- });
510
- Node.displayName = `Primitive.${node}`;
511
- return Node;
512
- }
513
- const Primitive = {
514
- div: createPrimitive("div"),
515
- span: createPrimitive("span"),
516
- img: createPrimitive("img"),
517
- button: createPrimitive("button"),
518
- label: createPrimitive("label"),
519
- input: createPrimitive("input"),
520
- textarea: createPrimitive("textarea"),
521
- a: createPrimitive("a"),
522
- p: createPrimitive("p"),
523
- h2: createPrimitive("h2"),
524
- ul: createPrimitive("ul"),
525
- li: createPrimitive("li"),
526
- nav: createPrimitive("nav"),
527
- svg: createPrimitive("svg"),
528
- circle: createPrimitive("circle"),
529
- // Native table elements -- DataTable's own rendering (crispy-seed's addition, not
530
- // upstream seed-design) needs these for a real `<table>` grid rather than a
531
- // `display: flex` div grid faked with ARIA roles.
532
- table: createPrimitive("table"),
533
- thead: createPrimitive("thead"),
534
- tbody: createPrimitive("tbody"),
535
- tfoot: createPrimitive("tfoot"),
536
- tr: createPrimitive("tr"),
537
- th: createPrimitive("th"),
538
- td: createPrimitive("td"),
539
- colgroup: createPrimitive("colgroup"),
540
- col: createPrimitive("col")
541
- };
542
-
543
- function r(e) {
544
- var t, f, n = "";
545
- if ("string" == typeof e || "number" == typeof e) n += e;
546
- else if ("object" == typeof e) if (Array.isArray(e)) {
547
- var o = e.length;
548
- for(t = 0; t < o; t++)e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
549
- } else for(f in e)e[f] && (n && (n += " "), n += f);
550
- return n;
551
- }
552
- function clsx() {
553
- for(var e, t, f = 0, n = "", o = arguments.length; f < o; f++)(e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
554
- return n;
555
- }
556
-
557
- function splitMultipleVariantsProps(props, recipesMap) {
558
- const multipleVariantsProps = {};
559
- const extractedKeys = new Set();
560
- for(const recipeKey in recipesMap){
561
- const recipe = recipesMap[recipeKey];
562
- const [variantProps] = recipe.splitVariantProps(props);
563
- multipleVariantsProps[recipeKey] = variantProps;
564
- for(const variantPropKey in variantProps){
565
- extractedKeys.add(variantPropKey);
566
- }
567
- }
568
- const remainingProps = {};
569
- for(const propKey in props){
570
- if (extractedKeys.has(propKey)) continue;
571
- remainingProps[propKey] = props[propKey];
572
- }
573
- return [
574
- multipleVariantsProps,
575
- remainingProps
576
- ];
577
- }
578
-
579
- /** Restores defaults overwritten by explicitly passed undefined values. */ function restoreDefaultProps(props, defaultProps) {
580
- if (!defaultProps) return;
581
- for (const key of Object.keys(defaultProps)){
582
- if (props[key] === undefined) {
583
- props[key] = defaultProps[key];
584
- }
585
- }
586
- }
587
-
588
- function createSlotRecipeContext(recipe) {
589
- const ClassNamesContext = /*#__PURE__*/ React.createContext(null);
590
- const PropsContext = /*#__PURE__*/ React.createContext(null);
591
- const ClassNamesProvider = ({ children, value })=>{
592
- return /*#__PURE__*/ jsxRuntime.jsx(ClassNamesContext.Provider, {
593
- value: value,
594
- children: children
595
- });
596
- };
597
- const PropsProvider = ({ children, value })=>{
598
- return /*#__PURE__*/ jsxRuntime.jsx(PropsContext.Provider, {
599
- value: value,
600
- children: children
601
- });
602
- };
603
- function useClassNames() {
604
- const context = React.useContext(ClassNamesContext);
605
- if (context === null) {
606
- throw new Error("useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?");
607
- }
608
- return context;
609
- }
610
- function useProps() {
611
- return React.useContext(PropsContext);
612
- }
613
- const withRootProvider = (Component, options)=>{
614
- const { defaultProps } = options ?? {};
615
- const StyledComponent = (innerProps)=>{
616
- const props = {
617
- ...defaultProps ?? {},
618
- ...useProps(),
619
- ...innerProps
620
- };
621
- restoreDefaultProps(props, defaultProps);
622
- const [variantProps, otherProps] = recipe.splitVariantProps(props);
623
- const classNames = recipe(variantProps); // TODO: should we memoize this?
624
- return /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider, {
625
- value: classNames,
626
- children: /*#__PURE__*/ jsxRuntime.jsx(Component, {
627
- ...otherProps
628
- })
629
- });
630
- };
631
- // @ts-ignore
632
- StyledComponent.displayName = Component.displayName || Component.name;
633
- return StyledComponent;
634
- };
635
- const withProvider = (Component, slot, options)=>{
636
- const { defaultProps } = options ?? {};
637
- const StyledComponent = /*#__PURE__*/ React.forwardRef((innerProps, ref)=>{
638
- const props = {
639
- ...defaultProps ?? {},
640
- ...useProps(),
641
- ...innerProps
642
- };
643
- restoreDefaultProps(props, defaultProps);
644
- const [variantProps, otherProps] = recipe.splitVariantProps(props);
645
- const classNames = recipe(variantProps); // TODO: should we memoize this?
646
- const className = classNames[slot];
647
- return /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider, {
648
- value: classNames,
649
- children: /*#__PURE__*/ jsxRuntime.jsx(Component, {
650
- ref: ref,
651
- ...otherProps,
652
- className: clsx(className, props.className)
653
- })
654
- });
655
- });
656
- // @ts-ignore
657
- StyledComponent.displayName = Component.displayName || Component.name;
658
- return StyledComponent;
659
- };
660
- const withContext = (Component, slot)=>{
661
- const StyledComponent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
662
- const classNames = useClassNames();
663
- const className = classNames?.[slot];
664
- return /*#__PURE__*/ jsxRuntime.jsx(Component, {
665
- ref: ref,
666
- ...props,
667
- className: clsx(className, props.className)
668
- });
669
- });
670
- // @ts-ignore
671
- StyledComponent.displayName = Component.displayName || Component.name;
672
- return StyledComponent;
673
- };
674
- return {
675
- ClassNamesProvider,
676
- PropsProvider,
677
- useClassNames,
678
- useProps,
679
- withRootProvider,
680
- withProvider,
681
- withContext
682
- };
683
- }
684
-
685
- function createWithStateProps(useContexts) {
686
- return function withStateProps(Component) {
687
- const Node = /*#__PURE__*/ React.forwardRef((props, ref)=>{
688
- const stateProps = {};
689
- for (const contextConfig of useContexts){
690
- if (typeof contextConfig === "function") {
691
- Object.assign(stateProps, contextConfig({
692
- strict: true
693
- })?.stateProps);
694
- } else {
695
- const { useContext, strict = false } = contextConfig;
696
- Object.assign(stateProps, useContext({
697
- strict
698
- })?.stateProps);
699
- }
700
- }
701
- // @ts-ignore
702
- return /*#__PURE__*/ jsxRuntime.jsx(Component, {
703
- ref: ref,
704
- ...stateProps,
705
- ...props
706
- });
707
- });
708
- Node.displayName = Component.displayName || Component.name;
709
- return Node;
710
- };
711
- }
712
-
713
- function withScaleFeedback(Component) {
714
- const Pressable = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
715
- const { scaleFeedbackRef, scaleFeedbackClassName } = reactScaleFeedback.useScaleFeedback();
716
- const composedRef = useComposedRefs(scaleFeedbackRef, ref);
717
- return /*#__PURE__*/ jsxRuntime.jsx(Component, {
718
- ...props,
719
- ref: composedRef,
720
- className: clsx(scaleFeedbackClassName, props.className)
721
- });
722
- });
723
- Pressable.displayName = Component.displayName;
724
- return Pressable;
725
- }
726
-
727
- const InternalIcon = /*#__PURE__*/ React.forwardRef(({ svg, ...otherProps }, ref)=>{
728
- return /*#__PURE__*/ jsxRuntime.jsx(Slot, {
729
- ref: ref,
730
- "aria-hidden": true,
731
- ...otherProps,
732
- children: svg
733
- });
734
- });
735
-
736
- function createRecipeContext(recipe) {
737
- const PropsContext = /*#__PURE__*/ React.createContext(null);
738
- const PropsProvider = ({ children, value })=>{
739
- return /*#__PURE__*/ jsxRuntime.jsx(PropsContext.Provider, {
740
- value: value,
741
- children: children
742
- });
743
- };
744
- function useProps() {
745
- return React.useContext(PropsContext);
746
- }
747
- const withContext = (Component, options)=>{
748
- const { defaultProps } = options ?? {};
749
- const StyledComponent = /*#__PURE__*/ React.forwardRef((innerProps, ref)=>{
750
- const props = {
751
- ...defaultProps ?? {},
752
- ...useProps(),
753
- ...innerProps
754
- };
755
- restoreDefaultProps(props, defaultProps);
756
- const [variantProps, otherProps] = recipe.splitVariantProps(props);
757
- const className = recipe(variantProps); // TODO: should we memoize this?
758
- return /*#__PURE__*/ jsxRuntime.jsx(Component, {
759
- ref: ref,
760
- ...otherProps,
761
- className: clsx(className, props.className)
762
- });
763
- });
764
- StyledComponent.displayName = Component.displayName || Component.name;
765
- return StyledComponent;
766
- };
767
- function withPropsProvider() {
768
- return PropsProvider;
769
- }
770
- return {
771
- PropsProvider,
772
- useProps,
773
- withContext,
774
- withPropsProvider
775
- };
776
- }
777
-
778
- const { withContext: withGroupContext } = createRecipeContext(checkboxGroup.checkboxGroup);
779
- const { ClassNamesProvider: ClassNamesProvider$1, withContext: withContext$1 } = createSlotRecipeContext(checkbox.checkbox);
780
- const { withProvider: withCheckmarkProvider, useClassNames: useCheckmarkClassNames, PropsProvider: CheckmarkPropsProvider } = createSlotRecipeContext(checkmark.checkmark);
781
- const withStateProps = createWithStateProps([
782
- reactCheckbox.useCheckboxContext
783
- ]);
784
- withGroupContext(Primitive.div);
785
- const CheckboxRoot = Object.assign(/*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
786
- const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, otherProps] = splitMultipleVariantsProps(props, {
787
- checkbox: checkbox.checkbox,
788
- checkmark: checkmark.checkmark
789
- });
790
- const classNames = checkbox.checkbox(checkboxVariantProps);
791
- return /*#__PURE__*/ jsxRuntime.jsx(CheckmarkPropsProvider, {
792
- value: checkmarkVariantProps,
793
- children: /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider$1, {
794
- value: classNames,
795
- children: /*#__PURE__*/ jsxRuntime.jsx(reactCheckbox.Checkbox.Root, {
796
- ref: ref,
797
- className: clsx(classNames.root, className),
798
- ...otherProps
799
- })
800
- })
801
- });
802
- }), {
803
- Primitive: reactCheckbox.Checkbox.Root
804
- });
805
- const CheckboxControl = withScaleFeedback(withCheckmarkProvider(reactCheckbox.Checkbox.Control, "root"));
806
- const CheckboxIndicator = /*#__PURE__*/ React.forwardRef(({ unchecked: uncheckedSvg, checked: checkedSvg, indeterminate: indeterminateSvg, ...otherProps }, ref)=>{
807
- const { stateProps, checked, indeterminate } = reactCheckbox.useCheckboxContext();
808
- const classNames = useCheckmarkClassNames();
809
- const mergedProps = domUtils.mergeProps(stateProps, {
810
- className: classNames.icon
811
- }, otherProps);
812
- if (indeterminate && !indeterminateSvg) {
813
- console.warn("CheckboxIndicator: the `indeterminate` prop must be provided when the checkbox is in an indeterminate state.");
814
- }
815
- if (indeterminate) return /*#__PURE__*/ jsxRuntime.jsx(InternalIcon, {
816
- ref: ref,
817
- svg: indeterminateSvg,
818
- ...mergedProps
819
- });
820
- if (checked) return /*#__PURE__*/ jsxRuntime.jsx(InternalIcon, {
821
- ref: ref,
822
- svg: checkedSvg,
823
- ...mergedProps
824
- });
825
- if (uncheckedSvg) return /*#__PURE__*/ jsxRuntime.jsx(InternalIcon, {
826
- ref: ref,
827
- svg: uncheckedSvg,
828
- ...mergedProps
829
- });
830
- return null;
831
- });
832
- CheckboxIndicator.displayName = "CheckboxIndicator";
833
- const CheckboxLabel = withContext$1(withStateProps(Primitive.span), "label");
834
- const CheckboxHiddenInput = reactCheckbox.Checkbox.HiddenInput;
835
-
836
- // Row-narrowing for the toolbar's search box and each column's filter picker -- split
837
- // out of DataTable.tsx the way cells.tsx splits out cell-type rendering: both are a
838
- // self-contained, independently testable concern DataTable.tsx just calls, rather than
839
- // inline `.filter()`/`.sort()` calls piling up in the same component that also owns
840
- // markup.
841
- /**
842
- * A column's `value(row)` if it supplies one, else the raw field at `column.key` --
843
- * the single accessor sort/search/filter/export all read through
844
- * (DATATABLE-ATTIO-SPEC.md's Column API), so a consumer only teaches the table how to
845
- * read a value ONCE rather than once per feature.
846
- */ function getColumnValue(column, row) {
847
- return column.value ? column.value(row) : row[column.key];
848
- }
849
- /**
850
- * Case-insensitive substring match against a row's stringified value -- crisp's own
851
- * `applyFilters` "contains" semantics (`tabletoolbar.tsx`), reused here for the
852
- * toolbar's single free-text query rather than a per-column condition. `null`/
853
- * `undefined` never match a non-empty query -- there is no text to search.
854
- */ function matchesSearch(value, query) {
855
- if (!query) return true;
856
- if (value == null) return false;
857
- return String(value).toLowerCase().includes(query.toLowerCase());
858
- }
859
- /**
860
- * A column's own filter predicate -- "is"/"is not" against a SET of checked values.
861
- * One checked value reads as "is X", several as crisp's "is any of X, Y": the exact
862
- * same predicate, just more values in the set (crisp's own `applyFilters`,
863
- * `tabletoolbar.tsx`: `isanyof` is membership-in-`values`, `is`/`isnot` is equality --
864
- * both compare the stringified value, case-insensitively, never a substring). An empty
865
- * `values` (the picker is open, nothing checked yet) matches every row -- crisp's own
866
- * `applyFilters` drops an operator with nothing to compare against from its "active"
867
- * set the same way, rather than treating "nothing checked" as "match nothing".
868
- */ function matchesFilter(value, filter) {
869
- if (filter.values.length === 0) return true;
870
- const text = value == null ? "" : String(value).toLowerCase();
871
- const isIncluded = filter.values.some((candidate)=>candidate.toLowerCase() === text);
872
- return filter.mode === "isnot" ? !isIncluded : isIncluded;
873
- }
874
- /**
875
- * The toolbar's search query (an OR across `searchable` columns, matching GRC's own
876
- * `useFilteredRows`) THEN every column's own filter (an AND across active filters,
877
- * matching crisp's `applyFilters`) -- in that order, since a filter chip narrows what
878
- * the search box already found, not the other way round. A column with no active
879
- * filter (absent from `filters`, or present with an empty `values`) is skipped
880
- * entirely rather than treated as "filter out everything".
881
- */ function getVisibleRows(data, columns, query, filters) {
882
- const searchableColumns = columns.filter((column)=>column.searchable);
883
- const activeFilters = Object.entries(filters).filter(([, filter])=>filter.values.length > 0);
884
- if (!query && activeFilters.length === 0) return data;
885
- return data.filter((row)=>{
886
- if (query) {
887
- const matchesQuery = searchableColumns.some((column)=>matchesSearch(getColumnValue(column, row), query));
888
- if (!matchesQuery) return false;
889
- }
890
- return activeFilters.every(([columnKey, filter])=>{
891
- const column = columns.find((candidate)=>candidate.key === columnKey);
892
- if (!column) return true;
893
- return matchesFilter(getColumnValue(column, row), filter);
894
- });
895
- });
896
- }
897
-
898
- __insertCSS(".seed-data-table__root{box-sizing:border-box;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{flex:1 1 0%;max-width:280px}.seed-data-table__count{flex-shrink:0;margin-inline-start:auto;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
899
-
900
- const createClassName = (className, variants, compoundVariants = [])=>{
901
- const variantKeys = Object.keys(variants);
902
- const variantValues = variantKeys.map((key)=>variants[key]);
903
- const variantClassName = variantKeys.map((key, index)=>`${className}--${key}_${variantValues[index]}`).join(" ");
904
- const compountVariantClassName = compoundVariants.filter((compoundVariant)=>Object.keys(compoundVariant).every((key)=>compoundVariant[key] === variants[key])).map((compoundVariant)=>`${className}--${Object.keys(compoundVariant).map((key)=>{
905
- return `${key}_${compoundVariant[key]}`;
906
- }).join("-")}`).join(" ");
907
- return [
908
- className,
909
- variantClassName,
910
- compountVariantClassName
911
- ].filter(Boolean).join(" ");
912
- };
913
- function mergeVariants(a, b) {
914
- const result = {
915
- ...a
916
- };
917
- for(const k in b){
918
- if (b[k] != null) {
919
- result[k] = b[k];
920
- }
921
- }
922
- return result;
923
- }
924
- function splitVariantProps(props, variantMap) {
925
- const variantProps = {};
926
- const otherProps = {};
927
- for(const key in props){
928
- if (variantMap[key] != null) {
929
- variantProps[key] = props[key];
930
- } else {
931
- otherProps[key] = props[key];
932
- }
933
- }
934
- return [
935
- variantProps,
936
- otherProps
937
- ];
938
- }
939
-
940
- const dataTableSlotNames = [
941
- [
942
- "root",
943
- "seed-data-table__root"
944
- ],
945
- [
946
- "table",
947
- "seed-data-table__table"
948
- ],
949
- [
950
- "header",
951
- "seed-data-table__header"
952
- ],
953
- [
954
- "headerCell",
955
- "seed-data-table__headerCell"
956
- ],
957
- [
958
- "headerCellInner",
959
- "seed-data-table__headerCellInner"
960
- ],
961
- [
962
- "headerCellLabel",
963
- "seed-data-table__headerCellLabel"
964
- ],
965
- [
966
- "headerCellIcon",
967
- "seed-data-table__headerCellIcon"
968
- ],
969
- [
970
- "row",
971
- "seed-data-table__row"
972
- ],
973
- [
974
- "cell",
975
- "seed-data-table__cell"
976
- ],
977
- [
978
- "entity",
979
- "seed-data-table__entity"
980
- ],
981
- [
982
- "entityName",
983
- "seed-data-table__entityName"
984
- ],
985
- [
986
- "tagList",
987
- "seed-data-table__tagList"
988
- ],
989
- [
990
- "link",
991
- "seed-data-table__link"
992
- ],
993
- [
994
- "toolbar",
995
- "seed-data-table__toolbar"
996
- ],
997
- [
998
- "search",
999
- "seed-data-table__search"
1000
- ],
1001
- [
1002
- "count",
1003
- "seed-data-table__count"
1004
- ],
1005
- [
1006
- "scrollArea",
1007
- "seed-data-table__scrollArea"
1008
- ],
1009
- [
1010
- "footer",
1011
- "seed-data-table__footer"
1012
- ],
1013
- [
1014
- "footerCell",
1015
- "seed-data-table__footerCell"
1016
- ],
1017
- [
1018
- "emptyState",
1019
- "seed-data-table__emptyState"
1020
- ],
1021
- [
1022
- "loadingState",
1023
- "seed-data-table__loadingState"
1024
- ],
1025
- [
1026
- "addRow",
1027
- "seed-data-table__addRow"
1028
- ],
1029
- [
1030
- "addRowCell",
1031
- "seed-data-table__addRowCell"
1032
- ],
1033
- [
1034
- "selectionCell",
1035
- "seed-data-table__selectionCell"
1036
- ]
1037
- ];
1038
- const defaultVariant = {
1039
- "surface": "card",
1040
- "interactive": false
1041
- };
1042
- const compoundVariants = [];
1043
- const dataTableVariantMap = {
1044
- "surface": [
1045
- "card",
1046
- "bleed"
1047
- ],
1048
- "interactive": [
1049
- true,
1050
- false
1051
- ]
1052
- };
1053
- function dataTable(props) {
1054
- return Object.fromEntries(dataTableSlotNames.map(([slot, className])=>{
1055
- return [
1056
- slot,
1057
- createClassName(className, mergeVariants(defaultVariant, props), compoundVariants)
1058
- ];
1059
- }));
1060
- }
1061
- Object.assign(dataTable, {
1062
- splitVariantProps: (props)=>splitVariantProps(props, dataTableVariantMap)
1063
- }); // @recipe(seed): data-table
1064
-
1065
- // The one `createSlotRecipeContext(dataTable)` call every sibling file in this
1066
- // directory shares -- `ClassNamesProvider` and `withContext` must be the SAME
1067
- // binding everywhere (a slot component built from a second, independent call would
1068
- // read a DIFFERENT React context and never see the classNames `DataTableInner`
1069
- // provides), so this is the one place that calls `createSlotRecipeContext`, and every
1070
- // other file (`DataTable.tsx`, `column-menu.tsx`, `resize.tsx`, `column-calc.tsx`,
1071
- // `toolbar.tsx`, `body-cells.tsx`, `editors.tsx`) imports its exports from here rather
1072
- // than re-deriving its own.
1073
- const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(dataTable);
1074
-
1075
- function DataTableInner(props, ref) {
1076
- const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", filters, defaultFilters, onFiltersChange, showCount = true, countLabel, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, ...restProps } = props;
1077
- const classNames = dataTable({
1078
- surface,
1079
- interactive
1080
- });
1081
- // The batteries-included DataTable owns the sort state (controllable) so it
1082
- // can actually reorder `data` -- the headless primitive only tracks which
1083
- // column/direction is active. A consumer that pre-sorts server-side can pass
1084
- // a controlled `sort`; this still sorts the rows it's given, which for
1085
- // already-sorted data is a no-op.
1086
- const [internalSort, setInternalSort] = React__namespace.useState(defaultSort);
1087
- const resolvedSort = sort !== undefined ? sort : internalSort;
1088
- const handleSortChange = React__namespace.useCallback((next)=>{
1089
- if (sort === undefined) setInternalSort(next);
1090
- onSortChange?.(next);
1091
- }, [
1092
- sort,
1093
- onSortChange
1094
- ]);
1095
- // Same shape as sort just above -- the headless primitive only tracks the ACTIVE
1096
- // query/filter state (it never sees `TRow`), this component owns the controllable
1097
- // state that actually narrows `data` (`getVisibleRows`, ./filtering.ts).
1098
- const [internalQuery, setInternalQuery] = React__namespace.useState(defaultQuery ?? "");
1099
- const resolvedQuery = query !== undefined ? query : internalQuery;
1100
- const handleQueryChange = React__namespace.useCallback((next)=>{
1101
- if (query === undefined) setInternalQuery(next);
1102
- onQueryChange?.(next);
1103
- }, [
1104
- query,
1105
- onQueryChange
1106
- ]);
1107
- const [internalFilters, setInternalFilters] = React__namespace.useState(defaultFilters ?? {});
1108
- const resolvedFilters = filters !== undefined ? filters : internalFilters;
1109
- const handleFiltersChange = React__namespace.useCallback((next)=>{
1110
- if (filters === undefined) setInternalFilters(next);
1111
- onFiltersChange?.(next);
1112
- }, [
1113
- filters,
1114
- onFiltersChange
1115
- ]);
1116
- const visibleRows = React__namespace.useMemo(()=>getVisibleRows(data, columns, resolvedQuery, resolvedFilters), [
1117
- data,
1118
- columns,
1119
- resolvedQuery,
1120
- resolvedFilters
1121
- ]);
1122
- const sortedData = React__namespace.useMemo(()=>{
1123
- if (!resolvedSort) return visibleRows;
1124
- const column = columns.find((candidate)=>candidate.key === resolvedSort.key);
1125
- const factor = resolvedSort.dir === "asc" ? 1 : -1;
1126
- return [
1127
- ...visibleRows
1128
- ].sort((a, b)=>{
1129
- const av = column ? getColumnValue(column, a) : a[resolvedSort.key];
1130
- const bv = column ? getColumnValue(column, b) : b[resolvedSort.key];
1131
- if (av == null && bv == null) return 0;
1132
- if (av == null) return -factor;
1133
- if (bv == null) return factor;
1134
- if (typeof av === "number" && typeof bv === "number") return (av - bv) * factor;
1135
- return String(av).localeCompare(String(bv)) * factor;
1136
- });
1137
- }, [
1138
- visibleRows,
1139
- resolvedSort,
1140
- columns
1141
- ]);
1142
- const rowIds = React__namespace.useMemo(()=>sortedData.map((row)=>row.id), [
1143
- sortedData
1144
- ]);
1145
- const columnKeys = React__namespace.useMemo(()=>columns.map((column)=>column.key), [
1146
- columns
1147
- ]);
1148
- const searchable = React__namespace.useMemo(()=>columns.some((column)=>column.searchable), [
1149
- columns
1150
- ]);
1151
- const showToolbar = searchable || showCount;
1152
- const showFooter = columns.some((column)=>column.summary);
1153
- // crisp's own `totalCols` (`datatable.tsx`) -- every full-width spanning row (the
1154
- // loading/error/empty body, infinite scroll's sentinel, the add-row footer) reads
1155
- // this ONE value rather than each re-deriving it, so they can never drift apart.
1156
- const totalCols = columns.length + (selectable ? 1 : 0);
1157
- return /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider, {
1158
- value: classNames,
1159
- children: /*#__PURE__*/ jsxRuntime.jsxs(DataTable12sZml1x9Kr12s.DataTableRoot, {
1160
- ref: ref,
1161
- className: clsx(classNames.root, className),
1162
- rowIds: rowIds,
1163
- selectable: selectable,
1164
- selectedIds: selectedIds,
1165
- defaultSelectedIds: defaultSelectedIds,
1166
- onSelectionChange: onSelectionChange,
1167
- sort: resolvedSort,
1168
- onSortChange: handleSortChange,
1169
- query: resolvedQuery,
1170
- onQueryChange: handleQueryChange,
1171
- filters: resolvedFilters,
1172
- onFiltersChange: handleFiltersChange,
1173
- columnKeys: columnKeys,
1174
- columnOrder: columnOrder,
1175
- defaultColumnOrder: defaultColumnOrder,
1176
- onColumnOrderChange: onColumnOrderChange,
1177
- hiddenColumnKeys: hiddenColumnKeys,
1178
- defaultHiddenColumnKeys: defaultHiddenColumnKeys,
1179
- onHiddenColumnKeysChange: onHiddenColumnKeysChange,
1180
- columnWidths: columnWidths,
1181
- defaultColumnWidths: defaultColumnWidths,
1182
- onColumnWidthsChange: onColumnWidthsChange,
1183
- columnLabels: columnLabels,
1184
- defaultColumnLabels: defaultColumnLabels,
1185
- onColumnLabelsChange: onColumnLabelsChange,
1186
- columnCalcOps: columnCalcOps,
1187
- defaultColumnCalcOps: defaultColumnCalcOps,
1188
- onColumnCalcOpsChange: onColumnCalcOpsChange,
1189
- onEdit: onEdit,
1190
- onLoadMore: onLoadMore,
1191
- hasMore: hasMore,
1192
- loadingMore: loadingMore,
1193
- ...restProps,
1194
- children: [
1195
- onColumnsChange && /*#__PURE__*/ jsxRuntime.jsx(ColumnsChangeEffect, {
1196
- columns: columns,
1197
- onColumnsChange: onColumnsChange
1198
- }),
1199
- showToolbar && /*#__PURE__*/ jsxRuntime.jsxs(toolbar12s.DataTableToolbar, {
1200
- children: [
1201
- searchable && /*#__PURE__*/ jsxRuntime.jsx(toolbar12s.SearchBox, {
1202
- placeholder: searchPlaceholder,
1203
- label: searchLabel
1204
- }),
1205
- showCount && /*#__PURE__*/ jsxRuntime.jsx(toolbar12s.RowCount, {
1206
- shown: sortedData.length,
1207
- total: data.length,
1208
- countLabel: countLabel
1209
- })
1210
- ]
1211
- }),
1212
- /*#__PURE__*/ jsxRuntime.jsx(DataTableScrollBody, {
1213
- scrollProps: scrollProps,
1214
- children: /*#__PURE__*/ jsxRuntime.jsxs(DataTableTable, {
1215
- children: [
1216
- /*#__PURE__*/ jsxRuntime.jsx(DataTableColGroup, {
1217
- columns: columns,
1218
- selectable: !!selectable
1219
- }),
1220
- /*#__PURE__*/ jsxRuntime.jsxs(DataTableHeader, {
1221
- children: [
1222
- selectable && /*#__PURE__*/ jsxRuntime.jsx(DataTableSelectionHeaderCell, {
1223
- ...columnLayout12s.stickyProps({
1224
- selectable,
1225
- stickyFirst,
1226
- stickyLast,
1227
- isSelectionCell: true,
1228
- isFirst: false,
1229
- isLast: false
1230
- }),
1231
- children: /*#__PURE__*/ jsxRuntime.jsx(SelectAllCheckbox, {
1232
- label: selectAllLabel,
1233
- checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON,
1234
- indeterminateIcon: selectionIndeterminateIcon ?? DEFAULT_INDETERMINATE_ICON
1235
- })
1236
- }),
1237
- /*#__PURE__*/ jsxRuntime.jsx(columnMenu12s.ColumnHeaderCells, {
1238
- columns: columns,
1239
- columnMenu: columnMenu,
1240
- reorderable: reorderable,
1241
- resizable: resizable,
1242
- sortIcon: sortIcon,
1243
- selectable: !!selectable,
1244
- stickyFirst: stickyFirst,
1245
- stickyLast: stickyLast
1246
- })
1247
- ]
1248
- }),
1249
- /*#__PURE__*/ jsxRuntime.jsx(DataTableBody, {
1250
- children: loading ? /*#__PURE__*/ jsxRuntime.jsx("tr", {
1251
- children: /*#__PURE__*/ jsxRuntime.jsx(DataTableCell, {
1252
- colSpan: totalCols,
1253
- children: /*#__PURE__*/ jsxRuntime.jsx(states12s.LoadingStateContent, {
1254
- label: loadingLabel,
1255
- classNames: classNames
1256
- })
1257
- })
1258
- }) : error ? /*#__PURE__*/ jsxRuntime.jsx("tr", {
1259
- children: /*#__PURE__*/ jsxRuntime.jsx(DataTableCell, {
1260
- colSpan: totalCols,
1261
- children: /*#__PURE__*/ jsxRuntime.jsx(states12s.EmptyStateContent, {
1262
- classNames: classNames,
1263
- children: error
1264
- })
1265
- })
1266
- }) : sortedData.length === 0 ? /*#__PURE__*/ jsxRuntime.jsx("tr", {
1267
- children: /*#__PURE__*/ jsxRuntime.jsx(DataTableCell, {
1268
- colSpan: totalCols,
1269
- children: /*#__PURE__*/ jsxRuntime.jsx(states12s.EmptyStateContent, {
1270
- classNames: classNames,
1271
- children: empty
1272
- })
1273
- })
1274
- }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
1275
- children: [
1276
- sortedData.map((row)=>/*#__PURE__*/ jsxRuntime.jsxs(DataTableRow, {
1277
- rowId: row.id,
1278
- "data-clickable": onRowClick ? "" : undefined,
1279
- onClick: onRowClick ? ()=>onRowClick(row) : undefined,
1280
- children: [
1281
- selectable && /*#__PURE__*/ jsxRuntime.jsx(DataTableSelectionCell, {
1282
- ...columnLayout12s.stickyProps({
1283
- selectable,
1284
- stickyFirst,
1285
- stickyLast,
1286
- isSelectionCell: true,
1287
- isFirst: false,
1288
- isLast: false
1289
- }),
1290
- children: /*#__PURE__*/ jsxRuntime.jsx(RowCheckbox, {
1291
- label: getRowSelectionLabel(row),
1292
- checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
1293
- })
1294
- }),
1295
- /*#__PURE__*/ jsxRuntime.jsx(bodyCells12s.ColumnBodyCells, {
1296
- columns: columns,
1297
- row: row,
1298
- classNames: classNames,
1299
- locale: locale,
1300
- selectable: !!selectable,
1301
- stickyFirst: stickyFirst,
1302
- stickyLast: stickyLast
1303
- })
1304
- ]
1305
- }, row.id)),
1306
- onLoadMore && /*#__PURE__*/ jsxRuntime.jsx(states12s.InfiniteScrollRow, {
1307
- colSpan: totalCols,
1308
- classNames: classNames,
1309
- loadingLabel: loadingLabel
1310
- })
1311
- ]
1312
- })
1313
- }),
1314
- showFooter && /*#__PURE__*/ jsxRuntime.jsxs(DataTableFooter, {
1315
- children: [
1316
- selectable && // The 40px-wide selection SPACER cell is now a plain `DataTableFooterCell`
1317
- // (not the `selectionCell` slot) -- the `<colgroup>`'s own 40px `<col>`
1318
- // is what makes every row's selection column line up now, not a matching
1319
- // per-slot width formula, so there is no more reason for this cell to
1320
- // borrow a different slot than its footer siblings.
1321
- /*#__PURE__*/ jsxRuntime.jsx(DataTableFooterCell, {
1322
- ...columnLayout12s.stickyProps({
1323
- selectable,
1324
- stickyFirst,
1325
- stickyLast,
1326
- isSelectionCell: true,
1327
- isFirst: false,
1328
- isLast: false
1329
- })
1330
- }),
1331
- /*#__PURE__*/ jsxRuntime.jsx(columnCalc12s.ColumnCalcCells, {
1332
- columns: columns,
1333
- rows: sortedData,
1334
- selectable: !!selectable,
1335
- stickyFirst: stickyFirst,
1336
- stickyLast: stickyLast
1337
- })
1338
- ]
1339
- }),
1340
- onAddRow && /*#__PURE__*/ jsxRuntime.jsx(states12s.AddRowFooter, {
1341
- onAddRow: onAddRow,
1342
- addRowLabel: addRowLabel,
1343
- colSpan: totalCols,
1344
- classNames: classNames
1345
- })
1346
- ]
1347
- })
1348
- })
1349
- ]
1350
- })
1351
- });
1352
- }
1353
- DataTableInner.displayName = "DataTable";
1354
- /**
1355
- * @see https://seed-design.io/react/components/data-table
1356
- */ const DataTable = /*#__PURE__*/ React.forwardRef(DataTableInner);
1357
- ////////////////////////////////////////////////////////////////////////////////////
1358
- /** Fires `onColumnsChange` with the effective (ordered, visible, relabelled) column
1359
- * list whenever it actually changes -- a thin convenience over the four controllable
1360
- * pairs (order/hidden/width/label), for a consumer that would rather persist "the
1361
- * current column configuration" as one blob. A standalone component (not inlined in
1362
- * `DataTableInner`) purely so it can call `useDataTableContext()` -- that context is
1363
- * provided by the `DataTablePrimitiveRoot` this renders as a SIBLING of, one level
1364
- * up from where `DataTableInner` itself sits. */ function ColumnsChangeEffect({ columns, onColumnsChange }) {
1365
- const effective = columnLayout12s.useEffectiveColumns(columns);
1366
- // A NEW array every time `effective` itself is a new array (its own `useMemo`
1367
- // recomputes only when order/hidden/label/width actually change) -- `header`
1368
- // resolves to the menu's rename override (falling back to the column's own static
1369
- // `header`) and `width` resolves to the live resize/consumer-set width (falling
1370
- // back to the column's own initial one), so this is genuinely "what's showing now",
1371
- // not the original static `columns` prop echoed back unchanged.
1372
- const resolvedColumns = React__namespace.useMemo(()=>effective.map(({ column, label, width })=>({
1373
- ...column,
1374
- header: label,
1375
- width
1376
- })), [
1377
- effective
1378
- ]);
1379
- React__namespace.useEffect(()=>{
1380
- onColumnsChange(resolvedColumns);
1381
- }, [
1382
- resolvedColumns,
1383
- onColumnsChange
1384
- ]);
1385
- return null;
1386
- }
1387
- ////////////////////////////////////////////////////////////////////////////////////
1388
- // The real `<table>` -- see react-headless's own `DataTableTable` comment for why this
1389
- // is a SIBLING of the toolbar (both inside `DataTablePrimitiveRoot`'s card `<div>`)
1390
- // rather than `DataTablePrimitiveRoot` itself: a `<table>` cannot host the toolbar as a
1391
- // child without the HTML parser foster-parenting it back out.
1392
- const DataTableTable = withContext(DataTable12sZml1x9Kr12s.DataTableTable, "table");
1393
- /** One `<col>` per rendered column (plus the 40px selection column, if any) -- the
1394
- * SINGLE place a column's width is ever set now. Every row's header/body/footer cell
1395
- * reads its own width off this shared `<colgroup>` by construction (native table
1396
- * column-sizing), which is what makes them align -- no per-cell width style to drift
1397
- * out of sync between the three. A column with no explicit width gets a bare `<col>`
1398
- * (no `style`): `table-layout: fixed`'s own algorithm gives every such column an equal
1399
- * share of whatever space is left, matching the old flex grid's `flex: 1 1 0%`
1400
- * default with no extra code needed here. */ function DataTableColGroup({ columns, selectable }) {
1401
- const effective = columnLayout12s.useEffectiveColumns(columns);
1402
- return /*#__PURE__*/ jsxRuntime.jsxs("colgroup", {
1403
- children: [
1404
- selectable && /*#__PURE__*/ jsxRuntime.jsx("col", {
1405
- style: {
1406
- width: 40
1407
- }
1408
- }),
1409
- effective.map(({ column, width })=>/*#__PURE__*/ jsxRuntime.jsx("col", {
1410
- style: width === undefined ? undefined : {
1411
- width
1412
- }
1413
- }, column.key))
1414
- ]
1415
- });
1416
- }
1417
- const DataTableHeader = withContext(DataTable12sZml1x9Kr12s.DataTableHeader, "header");
1418
- const DataTableHeaderCell = withContext(DataTable12sZml1x9Kr12s.DataTableHeaderCell, "headerCell");
1419
- // `.crisp-datatable-th-inner` -- the flex row INSIDE a `<th>` (label + filter trigger +
1420
- // sort chevron + column menu). See qvism-preset's own `headerCellInner` slot comment
1421
- // for why this lives one level below the cell itself rather than on it.
1422
- const DataTableHeaderCellInner = withContext(Primitive.div, "headerCellInner");
1423
- /** The label text specifically -- the one thing in `DataTableHeaderCellInner` that
1424
- * truncates; the trailing filter/sort/menu icons stay fully visible regardless of how
1425
- * long a column's own header text is. */ const DataTableHeaderCellLabel = withContext(Primitive.span, "headerCellLabel");
1426
- /**
1427
- * A selection `<th>`/`<td>`/footer `<td>` composes ITS base slot (`headerCell`/`cell`/
1428
- * `footerCell`) together with the `selectionCell` MODIFIER, rather than replacing it --
1429
- * so the checkbox column still inherits every shared table-wide rule (sticky header,
1430
- * sticky footer, height, borders) for free instead of a second, independent copy of
1431
- * them under a slot of its own. `useClassNames()` reads the SAME classNames object
1432
- * `ClassNamesProvider` (below, in `DataTableInner`) already put in context; this isn't
1433
- * a second recipe call.
1434
- */ function withSelectionCell(Component, baseSlot) {
1435
- const StyledComponent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
1436
- const classNames = useClassNames();
1437
- return /*#__PURE__*/ jsxRuntime.jsx(Component, {
1438
- ref: ref,
1439
- ...props,
1440
- className: clsx(classNames[baseSlot], classNames.selectionCell, props["className"])
1441
- });
1442
- });
1443
- StyledComponent.displayName = `SelectionCell(${baseSlot})`;
1444
- return StyledComponent;
1445
- }
1446
- const DataTableSelectionHeaderCell = withSelectionCell(DataTable12sZml1x9Kr12s.DataTableHeaderCell, "headerCell");
1447
- const DataTableHeaderCellIcon = withContext(Primitive.span, "headerCellIcon");
1448
- // body has no CSS slot of its own in the rootage spec -- it is a plain structural
1449
- // `<tbody>`, so it is not wrapped in `withContext`.
1450
- const DataTableBody = DataTable12sZml1x9Kr12s.DataTableBody;
1451
- const DataTableRow = withContext(DataTable12sZml1x9Kr12s.DataTableRow, "row");
1452
- const DataTableCell = withContext(DataTable12sZml1x9Kr12s.DataTableCell, "cell");
1453
- const DataTableSelectionCell = withSelectionCell(DataTable12sZml1x9Kr12s.DataTableCell, "cell");
1454
- // Tranche 4 -- column menu + reorder + resize + sticky columns. A scroll boundary
1455
- // wrapping the whole `<table>`: `overflowX: auto` is what makes a wide table (more
1456
- // column width than the card is wide) scroll horizontally at all, which sticky columns
1457
- // and their scroll shadow (this slot's own `data-scrolled-start`/`-end`, set from
1458
- // `useDataTableScroll`) need something concrete to measure and listen to. `overflowY`
1459
- // stays out of this slot's own base css (nothing here has a bounded height of its own
1460
- // to clip), so it never introduces a second vertical scrollbar next to whatever
1461
- // ambient container the whole DataTable already sits in.
1462
- const DataTableScrollBodyBase = withContext(Primitive.div, "scrollArea");
1463
- function DataTableScrollBody({ children, scrollProps }) {
1464
- const { scrollAreaRef, scrolledStart, scrolledEnd, onScroll } = DataTable12sZml1x9Kr12s.useDataTableContext();
1465
- const { className: scrollClassName, style: scrollStyle, ...otherScrollProps } = scrollProps ?? {};
1466
- return /*#__PURE__*/ jsxRuntime.jsx(DataTableScrollBodyBase, {
1467
- ...otherScrollProps,
1468
- ref: scrollAreaRef,
1469
- onScroll: onScroll,
1470
- className: scrollClassName,
1471
- style: scrollStyle,
1472
- "data-scrolled-start": domUtils.dataAttr(scrolledStart),
1473
- "data-scrolled-end": domUtils.dataAttr(scrolledEnd),
1474
- children: children
1475
- });
1476
- }
1477
- const DataTableFooterBase = withContext(Primitive.tfoot, "footer");
1478
- function DataTableFooter({ children, ...props }) {
1479
- return /*#__PURE__*/ jsxRuntime.jsx(DataTableFooterBase, {
1480
- ...props,
1481
- children: /*#__PURE__*/ jsxRuntime.jsx("tr", {
1482
- children: children
1483
- })
1484
- });
1485
- }
1486
- const DataTableFooterCell = withContext(Primitive.td, "footerCell");
1487
- ////////////////////////////////////////////////////////////////////////////////////
1488
- // Fix (bug report): karrot icons default to a 24px intrinsic SVG attribute size
1489
- // -- see column-menu.tsx's own `SORT_ICON_SIZE` comment for the full mechanism.
1490
- // The selection checkbox's own indicator is the smallest glyph in the grid
1491
- // (crisp's own measured checkmark), so it gets the smallest explicit size.
1492
- const SELECTION_ICON_SIZE = 12;
1493
- const DEFAULT_CHECKED_ICON = /*#__PURE__*/ jsxRuntime.jsx(IconCheckmarkLine_default, {
1494
- size: SELECTION_ICON_SIZE
1495
- });
1496
- const DEFAULT_INDETERMINATE_ICON = /*#__PURE__*/ jsxRuntime.jsx(IconMinusLine_default, {
1497
- size: SELECTION_ICON_SIZE
1498
- });
1499
- function SelectAllCheckbox({ label, checkedIcon, indeterminateIcon }) {
1500
- const { selectionState, toggleAll } = DataTable12sZml1x9Kr12s.useDataTableContext();
1501
- return /*#__PURE__*/ jsxRuntime.jsxs(CheckboxRoot, {
1502
- checked: selectionState === "all",
1503
- indeterminate: selectionState === "some",
1504
- onCheckedChange: toggleAll,
1505
- children: [
1506
- /*#__PURE__*/ jsxRuntime.jsx(CheckboxControl, {
1507
- children: /*#__PURE__*/ jsxRuntime.jsx(CheckboxIndicator, {
1508
- checked: checkedIcon ?? null,
1509
- indeterminate: indeterminateIcon
1510
- })
1511
- }),
1512
- /*#__PURE__*/ jsxRuntime.jsx(CheckboxHiddenInput, {
1513
- "aria-label": label
1514
- })
1515
- ]
1516
- });
1517
- }
1518
- /**
1519
- * Reads its OWN row's selected state off `useDataTableRowContext` (set by the
1520
- * `DataTableRow` it renders inside) rather than being handed `rowId` again as a prop
1521
- * and looking it up in the table-wide context -- the same shape Select's
1522
- * `SelectItemLabel` reads `label` off `useSelectItemContext` instead of a prop
1523
- * re-threaded down from `SelectItem`.
1524
- */ function RowCheckbox({ label, checkedIcon }) {
1525
- const { isSelected, toggleRow } = DataTable12sZml1x9Kr12s.useDataTableRowContext();
1526
- return /*#__PURE__*/ jsxRuntime.jsxs(CheckboxRoot, {
1527
- checked: isSelected,
1528
- onCheckedChange: toggleRow,
1529
- children: [
1530
- /*#__PURE__*/ jsxRuntime.jsx(CheckboxControl, {
1531
- children: /*#__PURE__*/ jsxRuntime.jsx(CheckboxIndicator, {
1532
- checked: checkedIcon ?? null
1533
- })
1534
- }),
1535
- /*#__PURE__*/ jsxRuntime.jsx(CheckboxHiddenInput, {
1536
- "aria-label": label
1537
- })
1538
- ]
1539
- });
1540
- }
1541
-
1542
- exports.CheckboxControl = CheckboxControl;
1543
- exports.CheckboxHiddenInput = CheckboxHiddenInput;
1544
- exports.CheckboxIndicator = CheckboxIndicator;
1545
- exports.CheckboxLabel = CheckboxLabel;
1546
- exports.CheckboxRoot = CheckboxRoot;
1547
- exports.DataTable = DataTable;
1548
- exports.DataTableCell = DataTableCell;
1549
- exports.DataTableFooterCell = DataTableFooterCell;
1550
- exports.DataTableHeaderCell = DataTableHeaderCell;
1551
- exports.DataTableHeaderCellIcon = DataTableHeaderCellIcon;
1552
- exports.DataTableHeaderCellInner = DataTableHeaderCellInner;
1553
- exports.DataTableHeaderCellLabel = DataTableHeaderCellLabel;
1554
- exports.IconCheckmarkFatFill_default = IconCheckmarkFatFill_default;
1555
- exports.IconCheckmarkLine_default = IconCheckmarkLine_default;
1556
- exports.IconChevronDownLine_default = IconChevronDownLine_default;
1557
- exports.IconChevronDownSmallLine_default = IconChevronDownSmallLine_default;
1558
- exports.IconChevronUpLine_default = IconChevronUpLine_default;
1559
- exports.IconDot3HorizontalLine_default = IconDot3HorizontalLine_default;
1560
- exports.IconMagnifyingglassLine_default = IconMagnifyingglassLine_default;
1561
- exports.IconPersonCircleLine_default = IconPersonCircleLine_default;
1562
- exports.IconPlusLine_default = IconPlusLine_default;
1563
- exports.IconSlider2HorizontalLine_default = IconSlider2HorizontalLine_default;
1564
- exports.InternalIcon = InternalIcon;
1565
- exports.Primitive = Primitive;
1566
- exports.clsx = clsx;
1567
- exports.composeRefs = composeRefs;
1568
- exports.createSlotRecipeContext = createSlotRecipeContext;
1569
- exports.createWithStateProps = createWithStateProps;
1570
- exports.dataTable = dataTable;
1571
- exports.getColumnValue = getColumnValue;
1572
- exports.splitMultipleVariantsProps = splitMultipleVariantsProps;
1573
- exports.withContext = withContext;
1574
- exports.withScaleFeedback = withScaleFeedback;