@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,1523 +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
- import * as React from 'react';
12
- import { forwardRef, useContext, createContext } from 'react';
13
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
14
- import { D as DataTableTable$1, a as DataTableHeader$1, b as DataTableHeaderCell$1, c as DataTableRow$1, d as DataTableCell$1, e as DataTableRoot, f as DataTableBody$1, u as useDataTableContext, g as useDataTableRowContext } from './DataTable-12s-Zml1x9Kr-12s-BR-yHfob.js';
15
- import { mergeProps as mergeProps$1, dataAttr } from '@seed-design/dom-utils';
16
- import { checkbox } from '@seed-design/css/recipes/checkbox';
17
- import { checkmark } from '@seed-design/css/recipes/checkmark';
18
- import { Checkbox, useCheckboxContext } from '@seed-design/react-checkbox';
19
- import { useScaleFeedback } from '@seed-design/react-scale-feedback';
20
- import { checkboxGroup } from '@seed-design/css/recipes/checkbox-group';
21
- import { C as ColumnBodyCells } from './body-cells-12s-Ba2uF4T-.js';
22
- import { C as ColumnCalcCells } from './column-calc-12s-C1-I2KdV.js';
23
- import { s as stickyProps, u as useEffectiveColumns } from './column-layout-12s-BhQmNTJG.js';
24
- import { C as ColumnHeaderCells } from './column-menu-12s-6Yvu4SZ0.js';
25
- import { L as LoadingStateContent, E as EmptyStateContent, I as InfiniteScrollRow, A as AddRowFooter } from './states-12s-m5mBR90e.js';
26
- import { D as DataTableToolbar, S as SearchBox, R as RowCount } from './toolbar-12s-B1xiS-Zu.js';
27
-
28
- // src/IconChevronDownLine.tsx
29
- var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
30
- viewBox: "0 0 24 24",
31
- fill: "none",
32
- xmlns: "http://www.w3.org/2000/svg",
33
- "data-seed-icon": "true",
34
- width: size,
35
- height: size,
36
- ref,
37
- ...props,
38
- children: /* @__PURE__ */ jsx("g", {
39
- children: /* @__PURE__ */ jsx("path", {
40
- fillRule: "evenodd",
41
- clipRule: "evenodd",
42
- 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",
43
- fill: "currentColor"
44
- })
45
- })
46
- });
47
- var IconChevronDownLine = /*#__PURE__*/ forwardRef(Icon$a);
48
- var IconChevronDownLine_default = IconChevronDownLine;
49
-
50
- // src/IconChevronUpLine.tsx
51
- var Icon$9 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
52
- viewBox: "0 0 24 24",
53
- fill: "none",
54
- xmlns: "http://www.w3.org/2000/svg",
55
- "data-seed-icon": "true",
56
- width: size,
57
- height: size,
58
- ref,
59
- ...props,
60
- children: /* @__PURE__ */ jsx("g", {
61
- children: /* @__PURE__ */ jsx("path", {
62
- fillRule: "evenodd",
63
- clipRule: "evenodd",
64
- 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",
65
- fill: "currentColor"
66
- })
67
- })
68
- });
69
- var IconChevronUpLine = /*#__PURE__*/ forwardRef(Icon$9);
70
- var IconChevronUpLine_default = IconChevronUpLine;
71
-
72
- // src/IconDot3HorizontalLine.tsx
73
- var Icon$8 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
74
- viewBox: "0 0 24 24",
75
- fill: "none",
76
- xmlns: "http://www.w3.org/2000/svg",
77
- "data-seed-icon": "true",
78
- width: size,
79
- height: size,
80
- ref,
81
- ...props,
82
- children: /* @__PURE__ */ jsx("g", {
83
- children: /* @__PURE__ */ jsxs("g", {
84
- children: [
85
- /* @__PURE__ */ jsx("path", {
86
- 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",
87
- fill: "currentColor"
88
- }),
89
- /* @__PURE__ */ jsx("path", {
90
- 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",
91
- fill: "currentColor"
92
- }),
93
- /* @__PURE__ */ jsx("path", {
94
- 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",
95
- fill: "currentColor"
96
- })
97
- ]
98
- })
99
- })
100
- });
101
- var IconDot3HorizontalLine = /*#__PURE__*/ forwardRef(Icon$8);
102
- var IconDot3HorizontalLine_default = IconDot3HorizontalLine;
103
-
104
- // src/IconMagnifyingglassLine.tsx
105
- var Icon$7 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
106
- viewBox: "0 0 24 24",
107
- fill: "none",
108
- xmlns: "http://www.w3.org/2000/svg",
109
- "data-seed-icon": "true",
110
- width: size,
111
- height: size,
112
- ref,
113
- ...props,
114
- children: /* @__PURE__ */ jsx("g", {
115
- children: /* @__PURE__ */ jsx("path", {
116
- fillRule: "evenodd",
117
- clipRule: "evenodd",
118
- 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",
119
- fill: "currentColor"
120
- })
121
- })
122
- });
123
- var IconMagnifyingglassLine = /*#__PURE__*/ forwardRef(Icon$7);
124
- var IconMagnifyingglassLine_default = IconMagnifyingglassLine;
125
-
126
- // src/IconSlider2HorizontalLine.tsx
127
- var Icon$6 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
128
- viewBox: "0 0 24 24",
129
- fill: "none",
130
- xmlns: "http://www.w3.org/2000/svg",
131
- "data-seed-icon": "true",
132
- width: size,
133
- height: size,
134
- ref,
135
- ...props,
136
- children: /* @__PURE__ */ jsx("g", {
137
- children: /* @__PURE__ */ jsxs("g", {
138
- children: [
139
- /* @__PURE__ */ jsx("path", {
140
- fillRule: "evenodd",
141
- clipRule: "evenodd",
142
- 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",
143
- fill: "currentColor"
144
- }),
145
- /* @__PURE__ */ jsx("path", {
146
- fillRule: "evenodd",
147
- clipRule: "evenodd",
148
- 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",
149
- fill: "currentColor"
150
- })
151
- ]
152
- })
153
- })
154
- });
155
- var IconSlider2HorizontalLine = /*#__PURE__*/ forwardRef(Icon$6);
156
- var IconSlider2HorizontalLine_default = IconSlider2HorizontalLine;
157
-
158
- // src/IconPersonCircleLine.tsx
159
- var Icon$5 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
160
- viewBox: "0 0 24 24",
161
- fill: "none",
162
- xmlns: "http://www.w3.org/2000/svg",
163
- "data-seed-icon": "true",
164
- width: size,
165
- height: size,
166
- ref,
167
- ...props,
168
- children: /* @__PURE__ */ jsx("g", {
169
- children: /* @__PURE__ */ jsxs("g", {
170
- children: [
171
- /* @__PURE__ */ jsx("path", {
172
- fillRule: "evenodd",
173
- clipRule: "evenodd",
174
- 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",
175
- fill: "currentColor"
176
- }),
177
- /* @__PURE__ */ jsx("path", {
178
- fillRule: "evenodd",
179
- clipRule: "evenodd",
180
- 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",
181
- fill: "currentColor"
182
- })
183
- ]
184
- })
185
- })
186
- });
187
- var IconPersonCircleLine = /*#__PURE__*/ forwardRef(Icon$5);
188
- var IconPersonCircleLine_default = IconPersonCircleLine;
189
-
190
- // src/IconPlusLine.tsx
191
- var Icon$4 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
192
- viewBox: "0 0 24 24",
193
- fill: "none",
194
- xmlns: "http://www.w3.org/2000/svg",
195
- "data-seed-icon": "true",
196
- width: size,
197
- height: size,
198
- ref,
199
- ...props,
200
- children: /* @__PURE__ */ jsx("g", {
201
- children: /* @__PURE__ */ jsx("path", {
202
- 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",
203
- fill: "currentColor"
204
- })
205
- })
206
- });
207
- var IconPlusLine = /*#__PURE__*/ forwardRef(Icon$4);
208
- var IconPlusLine_default = IconPlusLine;
209
-
210
- // src/IconMinusLine.tsx
211
- var Icon$3 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
212
- viewBox: "0 0 24 24",
213
- fill: "none",
214
- xmlns: "http://www.w3.org/2000/svg",
215
- "data-seed-icon": "true",
216
- width: size,
217
- height: size,
218
- ref,
219
- ...props,
220
- children: /* @__PURE__ */ jsx("g", {
221
- children: /* @__PURE__ */ jsx("path", {
222
- 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",
223
- fill: "currentColor"
224
- })
225
- })
226
- });
227
- var IconMinusLine = /*#__PURE__*/ forwardRef(Icon$3);
228
- var IconMinusLine_default = IconMinusLine;
229
-
230
- // src/IconCheckmarkLine.tsx
231
- var Icon$2 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
232
- viewBox: "0 0 24 24",
233
- fill: "none",
234
- xmlns: "http://www.w3.org/2000/svg",
235
- "data-seed-icon": "true",
236
- width: size,
237
- height: size,
238
- ref,
239
- ...props,
240
- children: /* @__PURE__ */ jsx("g", {
241
- children: /* @__PURE__ */ jsx("path", {
242
- fillRule: "evenodd",
243
- clipRule: "evenodd",
244
- 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",
245
- fill: "currentColor"
246
- })
247
- })
248
- });
249
- var IconCheckmarkLine = /*#__PURE__*/ forwardRef(Icon$2);
250
- var IconCheckmarkLine_default = IconCheckmarkLine;
251
-
252
- // src/IconChevronDownSmallLine.tsx
253
- var Icon$1 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
254
- viewBox: "0 0 24 24",
255
- fill: "none",
256
- xmlns: "http://www.w3.org/2000/svg",
257
- "data-seed-icon": "true",
258
- width: size,
259
- height: size,
260
- ref,
261
- ...props,
262
- children: /* @__PURE__ */ jsx("g", {
263
- children: /* @__PURE__ */ jsx("path", {
264
- fillRule: "evenodd",
265
- clipRule: "evenodd",
266
- 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",
267
- fill: "currentColor"
268
- })
269
- })
270
- });
271
- var IconChevronDownSmallLine = /*#__PURE__*/ forwardRef(Icon$1);
272
- var IconChevronDownSmallLine_default = IconChevronDownSmallLine;
273
-
274
- // src/IconCheckmarkFatFill.tsx
275
- var Icon = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
276
- viewBox: "0 0 24 24",
277
- fill: "none",
278
- xmlns: "http://www.w3.org/2000/svg",
279
- "data-seed-icon": "true",
280
- width: size,
281
- height: size,
282
- ref,
283
- ...props,
284
- children: /* @__PURE__ */ jsx("g", {
285
- children: /* @__PURE__ */ jsx("path", {
286
- 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",
287
- fill: "currentColor"
288
- })
289
- })
290
- });
291
- var IconCheckmarkFatFill = /*#__PURE__*/ forwardRef(Icon);
292
- var IconCheckmarkFatFill_default = IconCheckmarkFatFill;
293
-
294
- var __defProp$1 = Object.defineProperty;
295
- var __name$1 = (target, value)=>__defProp$1(target, "name", {
296
- value,
297
- configurable: true
298
- });
299
- function setRef(ref, value) {
300
- if (typeof ref === "function") {
301
- return ref(value);
302
- } else if (ref !== null && ref !== void 0) {
303
- ref.current = value;
304
- }
305
- }
306
- __name$1(setRef, "setRef");
307
- function composeRefs(...refs) {
308
- return (node)=>{
309
- let hasCleanup = false;
310
- const cleanups = refs.map((ref)=>{
311
- const cleanup = setRef(ref, node);
312
- if (!hasCleanup && typeof cleanup == "function") {
313
- hasCleanup = true;
314
- }
315
- return cleanup;
316
- });
317
- if (hasCleanup) {
318
- return ()=>{
319
- for(let i = 0; i < cleanups.length; i++){
320
- const cleanup = cleanups[i];
321
- if (typeof cleanup == "function") {
322
- cleanup();
323
- } else {
324
- setRef(refs[i], null);
325
- }
326
- }
327
- };
328
- }
329
- };
330
- }
331
- __name$1(composeRefs, "composeRefs");
332
- function useComposedRefs(...refs) {
333
- return React.useCallback(composeRefs(...refs), refs);
334
- }
335
- __name$1(useComposedRefs, "useComposedRefs");
336
-
337
- var __defProp = Object.defineProperty;
338
- var __name = (target, value)=>__defProp(target, "name", {
339
- value,
340
- configurable: true
341
- });
342
- // @__NO_SIDE_EFFECTS__
343
- function createSlot(ownerName) {
344
- const Slot2 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
345
- let { children, ...slotProps } = props;
346
- let slottableElement = null;
347
- let hasSlottable = false;
348
- const newChildren = [];
349
- if (isLazyComponent(children) && typeof use === "function") {
350
- children = use(children._payload);
351
- }
352
- React.Children.forEach(children, (maybeSlottable)=>{
353
- if (isSlottable(maybeSlottable)) {
354
- hasSlottable = true;
355
- const slottable = maybeSlottable;
356
- let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
357
- if (isLazyComponent(child) && typeof use === "function") {
358
- child = use(child._payload);
359
- }
360
- slottableElement = getSlottableElementFromSlottable(slottable, child);
361
- newChildren.push(slottableElement?.props?.children);
362
- } else {
363
- newChildren.push(maybeSlottable);
364
- }
365
- });
366
- if (slottableElement) {
367
- slottableElement = /*#__PURE__*/ React.cloneElement(slottableElement, void 0, newChildren);
368
- } else if (// A `Slottable` was found but it didn't resolve to a single element (e.g.
369
- // it wrapped multiple elements, text, or a render-prop `child` that
370
- // wasn't an element). Don't fall back to treating the `Slottable` wrapper
371
- // itself as the slot target — throw a descriptive error below instead.
372
- !hasSlottable && React.Children.count(children) === 1 && /*#__PURE__*/ React.isValidElement(children)) {
373
- slottableElement = children;
374
- }
375
- const slottableElementRef = slottableElement ? getElementRef(slottableElement) : void 0;
376
- const composedRef = useComposedRefs(forwardedRef, slottableElementRef);
377
- if (!slottableElement) {
378
- if (children || children === 0) {
379
- throw new Error(hasSlottable ? createSlottableError(ownerName) : createSlotError(ownerName));
380
- }
381
- return children;
382
- }
383
- const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
384
- if (slottableElement.type !== React.Fragment) {
385
- mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
386
- }
387
- return /*#__PURE__*/ React.cloneElement(slottableElement, mergedProps);
388
- });
389
- Slot2.displayName = `${ownerName}.Slot`;
390
- return Slot2;
391
- }
392
- __name(createSlot, "createSlot");
393
- var Slot = /* @__PURE__ */ createSlot("Slot");
394
- var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
395
- // @__NO_SIDE_EFFECTS__
396
- function createSlottable(ownerName) {
397
- const Slottable2 = /* @__PURE__ */ __name((props)=>"child" in props ? props.children(props.child) : props.children, "Slottable");
398
- Slottable2.displayName = `${ownerName}.Slottable`;
399
- Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
400
- return Slottable2;
401
- }
402
- __name(createSlottable, "createSlottable");
403
- var getSlottableElementFromSlottable = /* @__PURE__ */ __name((slottable, child)=>{
404
- if ("child" in slottable.props) {
405
- const child2 = slottable.props.child;
406
- if (!/*#__PURE__*/ React.isValidElement(child2)) return null;
407
- return /*#__PURE__*/ React.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
408
- }
409
- return /*#__PURE__*/ React.isValidElement(child) ? child : null;
410
- }, "getSlottableElementFromSlottable");
411
- function mergeProps(slotProps, childProps) {
412
- const overrideProps = {
413
- ...childProps
414
- };
415
- for(const propName in childProps){
416
- const slotPropValue = slotProps[propName];
417
- const childPropValue = childProps[propName];
418
- const isHandler = /^on[A-Z]/.test(propName);
419
- if (isHandler) {
420
- if (slotPropValue && childPropValue) {
421
- overrideProps[propName] = (...args)=>{
422
- const result = childPropValue(...args);
423
- slotPropValue(...args);
424
- return result;
425
- };
426
- } else if (slotPropValue) {
427
- overrideProps[propName] = slotPropValue;
428
- }
429
- } else if (propName === "style") {
430
- overrideProps[propName] = {
431
- ...slotPropValue,
432
- ...childPropValue
433
- };
434
- } else if (propName === "className") {
435
- overrideProps[propName] = [
436
- slotPropValue,
437
- childPropValue
438
- ].filter(Boolean).join(" ");
439
- }
440
- }
441
- return {
442
- ...slotProps,
443
- ...overrideProps
444
- };
445
- }
446
- __name(mergeProps, "mergeProps");
447
- function getElementRef(element) {
448
- let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
449
- let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
450
- if (mayWarn) {
451
- return element.ref;
452
- }
453
- getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
454
- mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
455
- if (mayWarn) {
456
- return element.props.ref;
457
- }
458
- return element.props.ref || element.ref;
459
- }
460
- __name(getElementRef, "getElementRef");
461
- function isSlottable(child) {
462
- return /*#__PURE__*/ React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
463
- }
464
- __name(isSlottable, "isSlottable");
465
- var REACT_LAZY_TYPE = Symbol.for("react.lazy");
466
- function isLazyComponent(element) {
467
- return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
468
- }
469
- __name(isLazyComponent, "isLazyComponent");
470
- function isPromiseLike(value) {
471
- return typeof value === "object" && value !== null && "then" in value;
472
- }
473
- __name(isPromiseLike, "isPromiseLike");
474
- var createSlotError = /* @__PURE__ */ __name((ownerName)=>{
475
- return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
476
- }, "createSlotError");
477
- var createSlottableError = /* @__PURE__ */ __name((ownerName)=>{
478
- return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
479
- }, "createSlottableError");
480
- var use = React[" use ".trim().toString()];
481
-
482
- function createPrimitive(node) {
483
- const Node = /*#__PURE__*/ React.forwardRef((props, ref)=>{
484
- const { asChild, ...primitiveProps } = props;
485
- const Comp = asChild ? Slot : node;
486
- return /*#__PURE__*/ jsx(Comp, {
487
- ...primitiveProps,
488
- ref: ref
489
- });
490
- });
491
- Node.displayName = `Primitive.${node}`;
492
- return Node;
493
- }
494
- const Primitive = {
495
- div: createPrimitive("div"),
496
- span: createPrimitive("span"),
497
- img: createPrimitive("img"),
498
- button: createPrimitive("button"),
499
- label: createPrimitive("label"),
500
- input: createPrimitive("input"),
501
- textarea: createPrimitive("textarea"),
502
- a: createPrimitive("a"),
503
- p: createPrimitive("p"),
504
- h2: createPrimitive("h2"),
505
- ul: createPrimitive("ul"),
506
- li: createPrimitive("li"),
507
- nav: createPrimitive("nav"),
508
- svg: createPrimitive("svg"),
509
- circle: createPrimitive("circle"),
510
- // Native table elements -- DataTable's own rendering (crispy-seed's addition, not
511
- // upstream seed-design) needs these for a real `<table>` grid rather than a
512
- // `display: flex` div grid faked with ARIA roles.
513
- table: createPrimitive("table"),
514
- thead: createPrimitive("thead"),
515
- tbody: createPrimitive("tbody"),
516
- tfoot: createPrimitive("tfoot"),
517
- tr: createPrimitive("tr"),
518
- th: createPrimitive("th"),
519
- td: createPrimitive("td"),
520
- colgroup: createPrimitive("colgroup"),
521
- col: createPrimitive("col")
522
- };
523
-
524
- function r(e) {
525
- var t, f, n = "";
526
- if ("string" == typeof e || "number" == typeof e) n += e;
527
- else if ("object" == typeof e) if (Array.isArray(e)) {
528
- var o = e.length;
529
- for(t = 0; t < o; t++)e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
530
- } else for(f in e)e[f] && (n && (n += " "), n += f);
531
- return n;
532
- }
533
- function clsx() {
534
- for(var e, t, f = 0, n = "", o = arguments.length; f < o; f++)(e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
535
- return n;
536
- }
537
-
538
- function splitMultipleVariantsProps(props, recipesMap) {
539
- const multipleVariantsProps = {};
540
- const extractedKeys = new Set();
541
- for(const recipeKey in recipesMap){
542
- const recipe = recipesMap[recipeKey];
543
- const [variantProps] = recipe.splitVariantProps(props);
544
- multipleVariantsProps[recipeKey] = variantProps;
545
- for(const variantPropKey in variantProps){
546
- extractedKeys.add(variantPropKey);
547
- }
548
- }
549
- const remainingProps = {};
550
- for(const propKey in props){
551
- if (extractedKeys.has(propKey)) continue;
552
- remainingProps[propKey] = props[propKey];
553
- }
554
- return [
555
- multipleVariantsProps,
556
- remainingProps
557
- ];
558
- }
559
-
560
- /** Restores defaults overwritten by explicitly passed undefined values. */ function restoreDefaultProps(props, defaultProps) {
561
- if (!defaultProps) return;
562
- for (const key of Object.keys(defaultProps)){
563
- if (props[key] === undefined) {
564
- props[key] = defaultProps[key];
565
- }
566
- }
567
- }
568
-
569
- function createSlotRecipeContext(recipe) {
570
- const ClassNamesContext = /*#__PURE__*/ createContext(null);
571
- const PropsContext = /*#__PURE__*/ createContext(null);
572
- const ClassNamesProvider = ({ children, value })=>{
573
- return /*#__PURE__*/ jsx(ClassNamesContext.Provider, {
574
- value: value,
575
- children: children
576
- });
577
- };
578
- const PropsProvider = ({ children, value })=>{
579
- return /*#__PURE__*/ jsx(PropsContext.Provider, {
580
- value: value,
581
- children: children
582
- });
583
- };
584
- function useClassNames() {
585
- const context = useContext(ClassNamesContext);
586
- if (context === null) {
587
- throw new Error("useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?");
588
- }
589
- return context;
590
- }
591
- function useProps() {
592
- return useContext(PropsContext);
593
- }
594
- const withRootProvider = (Component, options)=>{
595
- const { defaultProps } = options ?? {};
596
- const StyledComponent = (innerProps)=>{
597
- const props = {
598
- ...defaultProps ?? {},
599
- ...useProps(),
600
- ...innerProps
601
- };
602
- restoreDefaultProps(props, defaultProps);
603
- const [variantProps, otherProps] = recipe.splitVariantProps(props);
604
- const classNames = recipe(variantProps); // TODO: should we memoize this?
605
- return /*#__PURE__*/ jsx(ClassNamesProvider, {
606
- value: classNames,
607
- children: /*#__PURE__*/ jsx(Component, {
608
- ...otherProps
609
- })
610
- });
611
- };
612
- // @ts-ignore
613
- StyledComponent.displayName = Component.displayName || Component.name;
614
- return StyledComponent;
615
- };
616
- const withProvider = (Component, slot, options)=>{
617
- const { defaultProps } = options ?? {};
618
- const StyledComponent = /*#__PURE__*/ forwardRef((innerProps, ref)=>{
619
- const props = {
620
- ...defaultProps ?? {},
621
- ...useProps(),
622
- ...innerProps
623
- };
624
- restoreDefaultProps(props, defaultProps);
625
- const [variantProps, otherProps] = recipe.splitVariantProps(props);
626
- const classNames = recipe(variantProps); // TODO: should we memoize this?
627
- const className = classNames[slot];
628
- return /*#__PURE__*/ jsx(ClassNamesProvider, {
629
- value: classNames,
630
- children: /*#__PURE__*/ jsx(Component, {
631
- ref: ref,
632
- ...otherProps,
633
- className: clsx(className, props.className)
634
- })
635
- });
636
- });
637
- // @ts-ignore
638
- StyledComponent.displayName = Component.displayName || Component.name;
639
- return StyledComponent;
640
- };
641
- const withContext = (Component, slot)=>{
642
- const StyledComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
643
- const classNames = useClassNames();
644
- const className = classNames?.[slot];
645
- return /*#__PURE__*/ jsx(Component, {
646
- ref: ref,
647
- ...props,
648
- className: clsx(className, props.className)
649
- });
650
- });
651
- // @ts-ignore
652
- StyledComponent.displayName = Component.displayName || Component.name;
653
- return StyledComponent;
654
- };
655
- return {
656
- ClassNamesProvider,
657
- PropsProvider,
658
- useClassNames,
659
- useProps,
660
- withRootProvider,
661
- withProvider,
662
- withContext
663
- };
664
- }
665
-
666
- function createWithStateProps(useContexts) {
667
- return function withStateProps(Component) {
668
- const Node = /*#__PURE__*/ forwardRef((props, ref)=>{
669
- const stateProps = {};
670
- for (const contextConfig of useContexts){
671
- if (typeof contextConfig === "function") {
672
- Object.assign(stateProps, contextConfig({
673
- strict: true
674
- })?.stateProps);
675
- } else {
676
- const { useContext, strict = false } = contextConfig;
677
- Object.assign(stateProps, useContext({
678
- strict
679
- })?.stateProps);
680
- }
681
- }
682
- // @ts-ignore
683
- return /*#__PURE__*/ jsx(Component, {
684
- ref: ref,
685
- ...stateProps,
686
- ...props
687
- });
688
- });
689
- Node.displayName = Component.displayName || Component.name;
690
- return Node;
691
- };
692
- }
693
-
694
- function withScaleFeedback(Component) {
695
- const Pressable = /*#__PURE__*/ React.forwardRef((props, ref)=>{
696
- const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
697
- const composedRef = useComposedRefs(scaleFeedbackRef, ref);
698
- return /*#__PURE__*/ jsx(Component, {
699
- ...props,
700
- ref: composedRef,
701
- className: clsx(scaleFeedbackClassName, props.className)
702
- });
703
- });
704
- Pressable.displayName = Component.displayName;
705
- return Pressable;
706
- }
707
-
708
- const InternalIcon = /*#__PURE__*/ forwardRef(({ svg, ...otherProps }, ref)=>{
709
- return /*#__PURE__*/ jsx(Slot, {
710
- ref: ref,
711
- "aria-hidden": true,
712
- ...otherProps,
713
- children: svg
714
- });
715
- });
716
-
717
- function createRecipeContext(recipe) {
718
- const PropsContext = /*#__PURE__*/ createContext(null);
719
- const PropsProvider = ({ children, value })=>{
720
- return /*#__PURE__*/ jsx(PropsContext.Provider, {
721
- value: value,
722
- children: children
723
- });
724
- };
725
- function useProps() {
726
- return useContext(PropsContext);
727
- }
728
- const withContext = (Component, options)=>{
729
- const { defaultProps } = options ?? {};
730
- const StyledComponent = /*#__PURE__*/ forwardRef((innerProps, ref)=>{
731
- const props = {
732
- ...defaultProps ?? {},
733
- ...useProps(),
734
- ...innerProps
735
- };
736
- restoreDefaultProps(props, defaultProps);
737
- const [variantProps, otherProps] = recipe.splitVariantProps(props);
738
- const className = recipe(variantProps); // TODO: should we memoize this?
739
- return /*#__PURE__*/ jsx(Component, {
740
- ref: ref,
741
- ...otherProps,
742
- className: clsx(className, props.className)
743
- });
744
- });
745
- StyledComponent.displayName = Component.displayName || Component.name;
746
- return StyledComponent;
747
- };
748
- function withPropsProvider() {
749
- return PropsProvider;
750
- }
751
- return {
752
- PropsProvider,
753
- useProps,
754
- withContext,
755
- withPropsProvider
756
- };
757
- }
758
-
759
- const { withContext: withGroupContext } = createRecipeContext(checkboxGroup);
760
- const { ClassNamesProvider: ClassNamesProvider$1, withContext: withContext$1 } = createSlotRecipeContext(checkbox);
761
- const { withProvider: withCheckmarkProvider, useClassNames: useCheckmarkClassNames, PropsProvider: CheckmarkPropsProvider } = createSlotRecipeContext(checkmark);
762
- const withStateProps = createWithStateProps([
763
- useCheckboxContext
764
- ]);
765
- withGroupContext(Primitive.div);
766
- const CheckboxRoot = Object.assign(/*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
767
- const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, otherProps] = splitMultipleVariantsProps(props, {
768
- checkbox,
769
- checkmark
770
- });
771
- const classNames = checkbox(checkboxVariantProps);
772
- return /*#__PURE__*/ jsx(CheckmarkPropsProvider, {
773
- value: checkmarkVariantProps,
774
- children: /*#__PURE__*/ jsx(ClassNamesProvider$1, {
775
- value: classNames,
776
- children: /*#__PURE__*/ jsx(Checkbox.Root, {
777
- ref: ref,
778
- className: clsx(classNames.root, className),
779
- ...otherProps
780
- })
781
- })
782
- });
783
- }), {
784
- Primitive: Checkbox.Root
785
- });
786
- const CheckboxControl = withScaleFeedback(withCheckmarkProvider(Checkbox.Control, "root"));
787
- const CheckboxIndicator = /*#__PURE__*/ forwardRef(({ unchecked: uncheckedSvg, checked: checkedSvg, indeterminate: indeterminateSvg, ...otherProps }, ref)=>{
788
- const { stateProps, checked, indeterminate } = useCheckboxContext();
789
- const classNames = useCheckmarkClassNames();
790
- const mergedProps = mergeProps$1(stateProps, {
791
- className: classNames.icon
792
- }, otherProps);
793
- if (indeterminate && !indeterminateSvg) {
794
- console.warn("CheckboxIndicator: the `indeterminate` prop must be provided when the checkbox is in an indeterminate state.");
795
- }
796
- if (indeterminate) return /*#__PURE__*/ jsx(InternalIcon, {
797
- ref: ref,
798
- svg: indeterminateSvg,
799
- ...mergedProps
800
- });
801
- if (checked) return /*#__PURE__*/ jsx(InternalIcon, {
802
- ref: ref,
803
- svg: checkedSvg,
804
- ...mergedProps
805
- });
806
- if (uncheckedSvg) return /*#__PURE__*/ jsx(InternalIcon, {
807
- ref: ref,
808
- svg: uncheckedSvg,
809
- ...mergedProps
810
- });
811
- return null;
812
- });
813
- CheckboxIndicator.displayName = "CheckboxIndicator";
814
- const CheckboxLabel = withContext$1(withStateProps(Primitive.span), "label");
815
- const CheckboxHiddenInput = Checkbox.HiddenInput;
816
-
817
- // Row-narrowing for the toolbar's search box and each column's filter picker -- split
818
- // out of DataTable.tsx the way cells.tsx splits out cell-type rendering: both are a
819
- // self-contained, independently testable concern DataTable.tsx just calls, rather than
820
- // inline `.filter()`/`.sort()` calls piling up in the same component that also owns
821
- // markup.
822
- /**
823
- * A column's `value(row)` if it supplies one, else the raw field at `column.key` --
824
- * the single accessor sort/search/filter/export all read through
825
- * (DATATABLE-ATTIO-SPEC.md's Column API), so a consumer only teaches the table how to
826
- * read a value ONCE rather than once per feature.
827
- */ function getColumnValue(column, row) {
828
- return column.value ? column.value(row) : row[column.key];
829
- }
830
- /**
831
- * Case-insensitive substring match against a row's stringified value -- crisp's own
832
- * `applyFilters` "contains" semantics (`tabletoolbar.tsx`), reused here for the
833
- * toolbar's single free-text query rather than a per-column condition. `null`/
834
- * `undefined` never match a non-empty query -- there is no text to search.
835
- */ function matchesSearch(value, query) {
836
- if (!query) return true;
837
- if (value == null) return false;
838
- return String(value).toLowerCase().includes(query.toLowerCase());
839
- }
840
- /**
841
- * A column's own filter predicate -- "is"/"is not" against a SET of checked values.
842
- * One checked value reads as "is X", several as crisp's "is any of X, Y": the exact
843
- * same predicate, just more values in the set (crisp's own `applyFilters`,
844
- * `tabletoolbar.tsx`: `isanyof` is membership-in-`values`, `is`/`isnot` is equality --
845
- * both compare the stringified value, case-insensitively, never a substring). An empty
846
- * `values` (the picker is open, nothing checked yet) matches every row -- crisp's own
847
- * `applyFilters` drops an operator with nothing to compare against from its "active"
848
- * set the same way, rather than treating "nothing checked" as "match nothing".
849
- */ function matchesFilter(value, filter) {
850
- if (filter.values.length === 0) return true;
851
- const text = value == null ? "" : String(value).toLowerCase();
852
- const isIncluded = filter.values.some((candidate)=>candidate.toLowerCase() === text);
853
- return filter.mode === "isnot" ? !isIncluded : isIncluded;
854
- }
855
- /**
856
- * The toolbar's search query (an OR across `searchable` columns, matching GRC's own
857
- * `useFilteredRows`) THEN every column's own filter (an AND across active filters,
858
- * matching crisp's `applyFilters`) -- in that order, since a filter chip narrows what
859
- * the search box already found, not the other way round. A column with no active
860
- * filter (absent from `filters`, or present with an empty `values`) is skipped
861
- * entirely rather than treated as "filter out everything".
862
- */ function getVisibleRows(data, columns, query, filters) {
863
- const searchableColumns = columns.filter((column)=>column.searchable);
864
- const activeFilters = Object.entries(filters).filter(([, filter])=>filter.values.length > 0);
865
- if (!query && activeFilters.length === 0) return data;
866
- return data.filter((row)=>{
867
- if (query) {
868
- const matchesQuery = searchableColumns.some((column)=>matchesSearch(getColumnValue(column, row), query));
869
- if (!matchesQuery) return false;
870
- }
871
- return activeFilters.every(([columnKey, filter])=>{
872
- const column = columns.find((candidate)=>candidate.key === columnKey);
873
- if (!column) return true;
874
- return matchesFilter(getColumnValue(column, row), filter);
875
- });
876
- });
877
- }
878
-
879
- __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))}");
880
-
881
- const createClassName = (className, variants, compoundVariants = [])=>{
882
- const variantKeys = Object.keys(variants);
883
- const variantValues = variantKeys.map((key)=>variants[key]);
884
- const variantClassName = variantKeys.map((key, index)=>`${className}--${key}_${variantValues[index]}`).join(" ");
885
- const compountVariantClassName = compoundVariants.filter((compoundVariant)=>Object.keys(compoundVariant).every((key)=>compoundVariant[key] === variants[key])).map((compoundVariant)=>`${className}--${Object.keys(compoundVariant).map((key)=>{
886
- return `${key}_${compoundVariant[key]}`;
887
- }).join("-")}`).join(" ");
888
- return [
889
- className,
890
- variantClassName,
891
- compountVariantClassName
892
- ].filter(Boolean).join(" ");
893
- };
894
- function mergeVariants(a, b) {
895
- const result = {
896
- ...a
897
- };
898
- for(const k in b){
899
- if (b[k] != null) {
900
- result[k] = b[k];
901
- }
902
- }
903
- return result;
904
- }
905
- function splitVariantProps(props, variantMap) {
906
- const variantProps = {};
907
- const otherProps = {};
908
- for(const key in props){
909
- if (variantMap[key] != null) {
910
- variantProps[key] = props[key];
911
- } else {
912
- otherProps[key] = props[key];
913
- }
914
- }
915
- return [
916
- variantProps,
917
- otherProps
918
- ];
919
- }
920
-
921
- const dataTableSlotNames = [
922
- [
923
- "root",
924
- "seed-data-table__root"
925
- ],
926
- [
927
- "table",
928
- "seed-data-table__table"
929
- ],
930
- [
931
- "header",
932
- "seed-data-table__header"
933
- ],
934
- [
935
- "headerCell",
936
- "seed-data-table__headerCell"
937
- ],
938
- [
939
- "headerCellInner",
940
- "seed-data-table__headerCellInner"
941
- ],
942
- [
943
- "headerCellLabel",
944
- "seed-data-table__headerCellLabel"
945
- ],
946
- [
947
- "headerCellIcon",
948
- "seed-data-table__headerCellIcon"
949
- ],
950
- [
951
- "row",
952
- "seed-data-table__row"
953
- ],
954
- [
955
- "cell",
956
- "seed-data-table__cell"
957
- ],
958
- [
959
- "entity",
960
- "seed-data-table__entity"
961
- ],
962
- [
963
- "entityName",
964
- "seed-data-table__entityName"
965
- ],
966
- [
967
- "tagList",
968
- "seed-data-table__tagList"
969
- ],
970
- [
971
- "link",
972
- "seed-data-table__link"
973
- ],
974
- [
975
- "toolbar",
976
- "seed-data-table__toolbar"
977
- ],
978
- [
979
- "search",
980
- "seed-data-table__search"
981
- ],
982
- [
983
- "count",
984
- "seed-data-table__count"
985
- ],
986
- [
987
- "scrollArea",
988
- "seed-data-table__scrollArea"
989
- ],
990
- [
991
- "footer",
992
- "seed-data-table__footer"
993
- ],
994
- [
995
- "footerCell",
996
- "seed-data-table__footerCell"
997
- ],
998
- [
999
- "emptyState",
1000
- "seed-data-table__emptyState"
1001
- ],
1002
- [
1003
- "loadingState",
1004
- "seed-data-table__loadingState"
1005
- ],
1006
- [
1007
- "addRow",
1008
- "seed-data-table__addRow"
1009
- ],
1010
- [
1011
- "addRowCell",
1012
- "seed-data-table__addRowCell"
1013
- ],
1014
- [
1015
- "selectionCell",
1016
- "seed-data-table__selectionCell"
1017
- ]
1018
- ];
1019
- const defaultVariant = {
1020
- "surface": "card",
1021
- "interactive": false
1022
- };
1023
- const compoundVariants = [];
1024
- const dataTableVariantMap = {
1025
- "surface": [
1026
- "card",
1027
- "bleed"
1028
- ],
1029
- "interactive": [
1030
- true,
1031
- false
1032
- ]
1033
- };
1034
- function dataTable(props) {
1035
- return Object.fromEntries(dataTableSlotNames.map(([slot, className])=>{
1036
- return [
1037
- slot,
1038
- createClassName(className, mergeVariants(defaultVariant, props), compoundVariants)
1039
- ];
1040
- }));
1041
- }
1042
- Object.assign(dataTable, {
1043
- splitVariantProps: (props)=>splitVariantProps(props, dataTableVariantMap)
1044
- }); // @recipe(seed): data-table
1045
-
1046
- // The one `createSlotRecipeContext(dataTable)` call every sibling file in this
1047
- // directory shares -- `ClassNamesProvider` and `withContext` must be the SAME
1048
- // binding everywhere (a slot component built from a second, independent call would
1049
- // read a DIFFERENT React context and never see the classNames `DataTableInner`
1050
- // provides), so this is the one place that calls `createSlotRecipeContext`, and every
1051
- // other file (`DataTable.tsx`, `column-menu.tsx`, `resize.tsx`, `column-calc.tsx`,
1052
- // `toolbar.tsx`, `body-cells.tsx`, `editors.tsx`) imports its exports from here rather
1053
- // than re-deriving its own.
1054
- const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(dataTable);
1055
-
1056
- function DataTableInner(props, ref) {
1057
- 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;
1058
- const classNames = dataTable({
1059
- surface,
1060
- interactive
1061
- });
1062
- // The batteries-included DataTable owns the sort state (controllable) so it
1063
- // can actually reorder `data` -- the headless primitive only tracks which
1064
- // column/direction is active. A consumer that pre-sorts server-side can pass
1065
- // a controlled `sort`; this still sorts the rows it's given, which for
1066
- // already-sorted data is a no-op.
1067
- const [internalSort, setInternalSort] = React.useState(defaultSort);
1068
- const resolvedSort = sort !== undefined ? sort : internalSort;
1069
- const handleSortChange = React.useCallback((next)=>{
1070
- if (sort === undefined) setInternalSort(next);
1071
- onSortChange?.(next);
1072
- }, [
1073
- sort,
1074
- onSortChange
1075
- ]);
1076
- // Same shape as sort just above -- the headless primitive only tracks the ACTIVE
1077
- // query/filter state (it never sees `TRow`), this component owns the controllable
1078
- // state that actually narrows `data` (`getVisibleRows`, ./filtering.ts).
1079
- const [internalQuery, setInternalQuery] = React.useState(defaultQuery ?? "");
1080
- const resolvedQuery = query !== undefined ? query : internalQuery;
1081
- const handleQueryChange = React.useCallback((next)=>{
1082
- if (query === undefined) setInternalQuery(next);
1083
- onQueryChange?.(next);
1084
- }, [
1085
- query,
1086
- onQueryChange
1087
- ]);
1088
- const [internalFilters, setInternalFilters] = React.useState(defaultFilters ?? {});
1089
- const resolvedFilters = filters !== undefined ? filters : internalFilters;
1090
- const handleFiltersChange = React.useCallback((next)=>{
1091
- if (filters === undefined) setInternalFilters(next);
1092
- onFiltersChange?.(next);
1093
- }, [
1094
- filters,
1095
- onFiltersChange
1096
- ]);
1097
- const visibleRows = React.useMemo(()=>getVisibleRows(data, columns, resolvedQuery, resolvedFilters), [
1098
- data,
1099
- columns,
1100
- resolvedQuery,
1101
- resolvedFilters
1102
- ]);
1103
- const sortedData = React.useMemo(()=>{
1104
- if (!resolvedSort) return visibleRows;
1105
- const column = columns.find((candidate)=>candidate.key === resolvedSort.key);
1106
- const factor = resolvedSort.dir === "asc" ? 1 : -1;
1107
- return [
1108
- ...visibleRows
1109
- ].sort((a, b)=>{
1110
- const av = column ? getColumnValue(column, a) : a[resolvedSort.key];
1111
- const bv = column ? getColumnValue(column, b) : b[resolvedSort.key];
1112
- if (av == null && bv == null) return 0;
1113
- if (av == null) return -factor;
1114
- if (bv == null) return factor;
1115
- if (typeof av === "number" && typeof bv === "number") return (av - bv) * factor;
1116
- return String(av).localeCompare(String(bv)) * factor;
1117
- });
1118
- }, [
1119
- visibleRows,
1120
- resolvedSort,
1121
- columns
1122
- ]);
1123
- const rowIds = React.useMemo(()=>sortedData.map((row)=>row.id), [
1124
- sortedData
1125
- ]);
1126
- const columnKeys = React.useMemo(()=>columns.map((column)=>column.key), [
1127
- columns
1128
- ]);
1129
- const searchable = React.useMemo(()=>columns.some((column)=>column.searchable), [
1130
- columns
1131
- ]);
1132
- const showToolbar = searchable || showCount;
1133
- const showFooter = columns.some((column)=>column.summary);
1134
- // crisp's own `totalCols` (`datatable.tsx`) -- every full-width spanning row (the
1135
- // loading/error/empty body, infinite scroll's sentinel, the add-row footer) reads
1136
- // this ONE value rather than each re-deriving it, so they can never drift apart.
1137
- const totalCols = columns.length + (selectable ? 1 : 0);
1138
- return /*#__PURE__*/ jsx(ClassNamesProvider, {
1139
- value: classNames,
1140
- children: /*#__PURE__*/ jsxs(DataTableRoot, {
1141
- ref: ref,
1142
- className: clsx(classNames.root, className),
1143
- rowIds: rowIds,
1144
- selectable: selectable,
1145
- selectedIds: selectedIds,
1146
- defaultSelectedIds: defaultSelectedIds,
1147
- onSelectionChange: onSelectionChange,
1148
- sort: resolvedSort,
1149
- onSortChange: handleSortChange,
1150
- query: resolvedQuery,
1151
- onQueryChange: handleQueryChange,
1152
- filters: resolvedFilters,
1153
- onFiltersChange: handleFiltersChange,
1154
- columnKeys: columnKeys,
1155
- columnOrder: columnOrder,
1156
- defaultColumnOrder: defaultColumnOrder,
1157
- onColumnOrderChange: onColumnOrderChange,
1158
- hiddenColumnKeys: hiddenColumnKeys,
1159
- defaultHiddenColumnKeys: defaultHiddenColumnKeys,
1160
- onHiddenColumnKeysChange: onHiddenColumnKeysChange,
1161
- columnWidths: columnWidths,
1162
- defaultColumnWidths: defaultColumnWidths,
1163
- onColumnWidthsChange: onColumnWidthsChange,
1164
- columnLabels: columnLabels,
1165
- defaultColumnLabels: defaultColumnLabels,
1166
- onColumnLabelsChange: onColumnLabelsChange,
1167
- columnCalcOps: columnCalcOps,
1168
- defaultColumnCalcOps: defaultColumnCalcOps,
1169
- onColumnCalcOpsChange: onColumnCalcOpsChange,
1170
- onEdit: onEdit,
1171
- onLoadMore: onLoadMore,
1172
- hasMore: hasMore,
1173
- loadingMore: loadingMore,
1174
- ...restProps,
1175
- children: [
1176
- onColumnsChange && /*#__PURE__*/ jsx(ColumnsChangeEffect, {
1177
- columns: columns,
1178
- onColumnsChange: onColumnsChange
1179
- }),
1180
- showToolbar && /*#__PURE__*/ jsxs(DataTableToolbar, {
1181
- children: [
1182
- searchable && /*#__PURE__*/ jsx(SearchBox, {
1183
- placeholder: searchPlaceholder,
1184
- label: searchLabel
1185
- }),
1186
- showCount && /*#__PURE__*/ jsx(RowCount, {
1187
- shown: sortedData.length,
1188
- total: data.length,
1189
- countLabel: countLabel
1190
- })
1191
- ]
1192
- }),
1193
- /*#__PURE__*/ jsx(DataTableScrollBody, {
1194
- scrollProps: scrollProps,
1195
- children: /*#__PURE__*/ jsxs(DataTableTable, {
1196
- children: [
1197
- /*#__PURE__*/ jsx(DataTableColGroup, {
1198
- columns: columns,
1199
- selectable: !!selectable
1200
- }),
1201
- /*#__PURE__*/ jsxs(DataTableHeader, {
1202
- children: [
1203
- selectable && /*#__PURE__*/ jsx(DataTableSelectionHeaderCell, {
1204
- ...stickyProps({
1205
- selectable,
1206
- stickyFirst,
1207
- stickyLast,
1208
- isSelectionCell: true,
1209
- isFirst: false,
1210
- isLast: false
1211
- }),
1212
- children: /*#__PURE__*/ jsx(SelectAllCheckbox, {
1213
- label: selectAllLabel,
1214
- checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON,
1215
- indeterminateIcon: selectionIndeterminateIcon ?? DEFAULT_INDETERMINATE_ICON
1216
- })
1217
- }),
1218
- /*#__PURE__*/ jsx(ColumnHeaderCells, {
1219
- columns: columns,
1220
- columnMenu: columnMenu,
1221
- reorderable: reorderable,
1222
- resizable: resizable,
1223
- sortIcon: sortIcon,
1224
- selectable: !!selectable,
1225
- stickyFirst: stickyFirst,
1226
- stickyLast: stickyLast
1227
- })
1228
- ]
1229
- }),
1230
- /*#__PURE__*/ jsx(DataTableBody, {
1231
- children: loading ? /*#__PURE__*/ jsx("tr", {
1232
- children: /*#__PURE__*/ jsx(DataTableCell, {
1233
- colSpan: totalCols,
1234
- children: /*#__PURE__*/ jsx(LoadingStateContent, {
1235
- label: loadingLabel,
1236
- classNames: classNames
1237
- })
1238
- })
1239
- }) : error ? /*#__PURE__*/ jsx("tr", {
1240
- children: /*#__PURE__*/ jsx(DataTableCell, {
1241
- colSpan: totalCols,
1242
- children: /*#__PURE__*/ jsx(EmptyStateContent, {
1243
- classNames: classNames,
1244
- children: error
1245
- })
1246
- })
1247
- }) : sortedData.length === 0 ? /*#__PURE__*/ jsx("tr", {
1248
- children: /*#__PURE__*/ jsx(DataTableCell, {
1249
- colSpan: totalCols,
1250
- children: /*#__PURE__*/ jsx(EmptyStateContent, {
1251
- classNames: classNames,
1252
- children: empty
1253
- })
1254
- })
1255
- }) : /*#__PURE__*/ jsxs(Fragment, {
1256
- children: [
1257
- sortedData.map((row)=>/*#__PURE__*/ jsxs(DataTableRow, {
1258
- rowId: row.id,
1259
- "data-clickable": onRowClick ? "" : undefined,
1260
- onClick: onRowClick ? ()=>onRowClick(row) : undefined,
1261
- children: [
1262
- selectable && /*#__PURE__*/ jsx(DataTableSelectionCell, {
1263
- ...stickyProps({
1264
- selectable,
1265
- stickyFirst,
1266
- stickyLast,
1267
- isSelectionCell: true,
1268
- isFirst: false,
1269
- isLast: false
1270
- }),
1271
- children: /*#__PURE__*/ jsx(RowCheckbox, {
1272
- label: getRowSelectionLabel(row),
1273
- checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
1274
- })
1275
- }),
1276
- /*#__PURE__*/ jsx(ColumnBodyCells, {
1277
- columns: columns,
1278
- row: row,
1279
- classNames: classNames,
1280
- locale: locale,
1281
- selectable: !!selectable,
1282
- stickyFirst: stickyFirst,
1283
- stickyLast: stickyLast
1284
- })
1285
- ]
1286
- }, row.id)),
1287
- onLoadMore && /*#__PURE__*/ jsx(InfiniteScrollRow, {
1288
- colSpan: totalCols,
1289
- classNames: classNames,
1290
- loadingLabel: loadingLabel
1291
- })
1292
- ]
1293
- })
1294
- }),
1295
- showFooter && /*#__PURE__*/ jsxs(DataTableFooter, {
1296
- children: [
1297
- selectable && // The 40px-wide selection SPACER cell is now a plain `DataTableFooterCell`
1298
- // (not the `selectionCell` slot) -- the `<colgroup>`'s own 40px `<col>`
1299
- // is what makes every row's selection column line up now, not a matching
1300
- // per-slot width formula, so there is no more reason for this cell to
1301
- // borrow a different slot than its footer siblings.
1302
- /*#__PURE__*/ jsx(DataTableFooterCell, {
1303
- ...stickyProps({
1304
- selectable,
1305
- stickyFirst,
1306
- stickyLast,
1307
- isSelectionCell: true,
1308
- isFirst: false,
1309
- isLast: false
1310
- })
1311
- }),
1312
- /*#__PURE__*/ jsx(ColumnCalcCells, {
1313
- columns: columns,
1314
- rows: sortedData,
1315
- selectable: !!selectable,
1316
- stickyFirst: stickyFirst,
1317
- stickyLast: stickyLast
1318
- })
1319
- ]
1320
- }),
1321
- onAddRow && /*#__PURE__*/ jsx(AddRowFooter, {
1322
- onAddRow: onAddRow,
1323
- addRowLabel: addRowLabel,
1324
- colSpan: totalCols,
1325
- classNames: classNames
1326
- })
1327
- ]
1328
- })
1329
- })
1330
- ]
1331
- })
1332
- });
1333
- }
1334
- DataTableInner.displayName = "DataTable";
1335
- /**
1336
- * @see https://seed-design.io/react/components/data-table
1337
- */ const DataTable = /*#__PURE__*/ forwardRef(DataTableInner);
1338
- ////////////////////////////////////////////////////////////////////////////////////
1339
- /** Fires `onColumnsChange` with the effective (ordered, visible, relabelled) column
1340
- * list whenever it actually changes -- a thin convenience over the four controllable
1341
- * pairs (order/hidden/width/label), for a consumer that would rather persist "the
1342
- * current column configuration" as one blob. A standalone component (not inlined in
1343
- * `DataTableInner`) purely so it can call `useDataTableContext()` -- that context is
1344
- * provided by the `DataTablePrimitiveRoot` this renders as a SIBLING of, one level
1345
- * up from where `DataTableInner` itself sits. */ function ColumnsChangeEffect({ columns, onColumnsChange }) {
1346
- const effective = useEffectiveColumns(columns);
1347
- // A NEW array every time `effective` itself is a new array (its own `useMemo`
1348
- // recomputes only when order/hidden/label/width actually change) -- `header`
1349
- // resolves to the menu's rename override (falling back to the column's own static
1350
- // `header`) and `width` resolves to the live resize/consumer-set width (falling
1351
- // back to the column's own initial one), so this is genuinely "what's showing now",
1352
- // not the original static `columns` prop echoed back unchanged.
1353
- const resolvedColumns = React.useMemo(()=>effective.map(({ column, label, width })=>({
1354
- ...column,
1355
- header: label,
1356
- width
1357
- })), [
1358
- effective
1359
- ]);
1360
- React.useEffect(()=>{
1361
- onColumnsChange(resolvedColumns);
1362
- }, [
1363
- resolvedColumns,
1364
- onColumnsChange
1365
- ]);
1366
- return null;
1367
- }
1368
- ////////////////////////////////////////////////////////////////////////////////////
1369
- // The real `<table>` -- see react-headless's own `DataTableTable` comment for why this
1370
- // is a SIBLING of the toolbar (both inside `DataTablePrimitiveRoot`'s card `<div>`)
1371
- // rather than `DataTablePrimitiveRoot` itself: a `<table>` cannot host the toolbar as a
1372
- // child without the HTML parser foster-parenting it back out.
1373
- const DataTableTable = withContext(DataTableTable$1, "table");
1374
- /** One `<col>` per rendered column (plus the 40px selection column, if any) -- the
1375
- * SINGLE place a column's width is ever set now. Every row's header/body/footer cell
1376
- * reads its own width off this shared `<colgroup>` by construction (native table
1377
- * column-sizing), which is what makes them align -- no per-cell width style to drift
1378
- * out of sync between the three. A column with no explicit width gets a bare `<col>`
1379
- * (no `style`): `table-layout: fixed`'s own algorithm gives every such column an equal
1380
- * share of whatever space is left, matching the old flex grid's `flex: 1 1 0%`
1381
- * default with no extra code needed here. */ function DataTableColGroup({ columns, selectable }) {
1382
- const effective = useEffectiveColumns(columns);
1383
- return /*#__PURE__*/ jsxs("colgroup", {
1384
- children: [
1385
- selectable && /*#__PURE__*/ jsx("col", {
1386
- style: {
1387
- width: 40
1388
- }
1389
- }),
1390
- effective.map(({ column, width })=>/*#__PURE__*/ jsx("col", {
1391
- style: width === undefined ? undefined : {
1392
- width
1393
- }
1394
- }, column.key))
1395
- ]
1396
- });
1397
- }
1398
- const DataTableHeader = withContext(DataTableHeader$1, "header");
1399
- const DataTableHeaderCell = withContext(DataTableHeaderCell$1, "headerCell");
1400
- // `.crisp-datatable-th-inner` -- the flex row INSIDE a `<th>` (label + filter trigger +
1401
- // sort chevron + column menu). See qvism-preset's own `headerCellInner` slot comment
1402
- // for why this lives one level below the cell itself rather than on it.
1403
- const DataTableHeaderCellInner = withContext(Primitive.div, "headerCellInner");
1404
- /** The label text specifically -- the one thing in `DataTableHeaderCellInner` that
1405
- * truncates; the trailing filter/sort/menu icons stay fully visible regardless of how
1406
- * long a column's own header text is. */ const DataTableHeaderCellLabel = withContext(Primitive.span, "headerCellLabel");
1407
- /**
1408
- * A selection `<th>`/`<td>`/footer `<td>` composes ITS base slot (`headerCell`/`cell`/
1409
- * `footerCell`) together with the `selectionCell` MODIFIER, rather than replacing it --
1410
- * so the checkbox column still inherits every shared table-wide rule (sticky header,
1411
- * sticky footer, height, borders) for free instead of a second, independent copy of
1412
- * them under a slot of its own. `useClassNames()` reads the SAME classNames object
1413
- * `ClassNamesProvider` (below, in `DataTableInner`) already put in context; this isn't
1414
- * a second recipe call.
1415
- */ function withSelectionCell(Component, baseSlot) {
1416
- const StyledComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
1417
- const classNames = useClassNames();
1418
- return /*#__PURE__*/ jsx(Component, {
1419
- ref: ref,
1420
- ...props,
1421
- className: clsx(classNames[baseSlot], classNames.selectionCell, props["className"])
1422
- });
1423
- });
1424
- StyledComponent.displayName = `SelectionCell(${baseSlot})`;
1425
- return StyledComponent;
1426
- }
1427
- const DataTableSelectionHeaderCell = withSelectionCell(DataTableHeaderCell$1, "headerCell");
1428
- const DataTableHeaderCellIcon = withContext(Primitive.span, "headerCellIcon");
1429
- // body has no CSS slot of its own in the rootage spec -- it is a plain structural
1430
- // `<tbody>`, so it is not wrapped in `withContext`.
1431
- const DataTableBody = DataTableBody$1;
1432
- const DataTableRow = withContext(DataTableRow$1, "row");
1433
- const DataTableCell = withContext(DataTableCell$1, "cell");
1434
- const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
1435
- // Tranche 4 -- column menu + reorder + resize + sticky columns. A scroll boundary
1436
- // wrapping the whole `<table>`: `overflowX: auto` is what makes a wide table (more
1437
- // column width than the card is wide) scroll horizontally at all, which sticky columns
1438
- // and their scroll shadow (this slot's own `data-scrolled-start`/`-end`, set from
1439
- // `useDataTableScroll`) need something concrete to measure and listen to. `overflowY`
1440
- // stays out of this slot's own base css (nothing here has a bounded height of its own
1441
- // to clip), so it never introduces a second vertical scrollbar next to whatever
1442
- // ambient container the whole DataTable already sits in.
1443
- const DataTableScrollBodyBase = withContext(Primitive.div, "scrollArea");
1444
- function DataTableScrollBody({ children, scrollProps }) {
1445
- const { scrollAreaRef, scrolledStart, scrolledEnd, onScroll } = useDataTableContext();
1446
- const { className: scrollClassName, style: scrollStyle, ...otherScrollProps } = scrollProps ?? {};
1447
- return /*#__PURE__*/ jsx(DataTableScrollBodyBase, {
1448
- ...otherScrollProps,
1449
- ref: scrollAreaRef,
1450
- onScroll: onScroll,
1451
- className: scrollClassName,
1452
- style: scrollStyle,
1453
- "data-scrolled-start": dataAttr(scrolledStart),
1454
- "data-scrolled-end": dataAttr(scrolledEnd),
1455
- children: children
1456
- });
1457
- }
1458
- const DataTableFooterBase = withContext(Primitive.tfoot, "footer");
1459
- function DataTableFooter({ children, ...props }) {
1460
- return /*#__PURE__*/ jsx(DataTableFooterBase, {
1461
- ...props,
1462
- children: /*#__PURE__*/ jsx("tr", {
1463
- children: children
1464
- })
1465
- });
1466
- }
1467
- const DataTableFooterCell = withContext(Primitive.td, "footerCell");
1468
- ////////////////////////////////////////////////////////////////////////////////////
1469
- // Fix (bug report): karrot icons default to a 24px intrinsic SVG attribute size
1470
- // -- see column-menu.tsx's own `SORT_ICON_SIZE` comment for the full mechanism.
1471
- // The selection checkbox's own indicator is the smallest glyph in the grid
1472
- // (crisp's own measured checkmark), so it gets the smallest explicit size.
1473
- const SELECTION_ICON_SIZE = 12;
1474
- const DEFAULT_CHECKED_ICON = /*#__PURE__*/ jsx(IconCheckmarkLine_default, {
1475
- size: SELECTION_ICON_SIZE
1476
- });
1477
- const DEFAULT_INDETERMINATE_ICON = /*#__PURE__*/ jsx(IconMinusLine_default, {
1478
- size: SELECTION_ICON_SIZE
1479
- });
1480
- function SelectAllCheckbox({ label, checkedIcon, indeterminateIcon }) {
1481
- const { selectionState, toggleAll } = useDataTableContext();
1482
- return /*#__PURE__*/ jsxs(CheckboxRoot, {
1483
- checked: selectionState === "all",
1484
- indeterminate: selectionState === "some",
1485
- onCheckedChange: toggleAll,
1486
- children: [
1487
- /*#__PURE__*/ jsx(CheckboxControl, {
1488
- children: /*#__PURE__*/ jsx(CheckboxIndicator, {
1489
- checked: checkedIcon ?? null,
1490
- indeterminate: indeterminateIcon
1491
- })
1492
- }),
1493
- /*#__PURE__*/ jsx(CheckboxHiddenInput, {
1494
- "aria-label": label
1495
- })
1496
- ]
1497
- });
1498
- }
1499
- /**
1500
- * Reads its OWN row's selected state off `useDataTableRowContext` (set by the
1501
- * `DataTableRow` it renders inside) rather than being handed `rowId` again as a prop
1502
- * and looking it up in the table-wide context -- the same shape Select's
1503
- * `SelectItemLabel` reads `label` off `useSelectItemContext` instead of a prop
1504
- * re-threaded down from `SelectItem`.
1505
- */ function RowCheckbox({ label, checkedIcon }) {
1506
- const { isSelected, toggleRow } = useDataTableRowContext();
1507
- return /*#__PURE__*/ jsxs(CheckboxRoot, {
1508
- checked: isSelected,
1509
- onCheckedChange: toggleRow,
1510
- children: [
1511
- /*#__PURE__*/ jsx(CheckboxControl, {
1512
- children: /*#__PURE__*/ jsx(CheckboxIndicator, {
1513
- checked: checkedIcon ?? null
1514
- })
1515
- }),
1516
- /*#__PURE__*/ jsx(CheckboxHiddenInput, {
1517
- "aria-label": label
1518
- })
1519
- ]
1520
- });
1521
- }
1522
-
1523
- export { dataTable as A, IconMagnifyingglassLine_default as B, CheckboxRoot as C, DataTableCell as D, DataTable as E, InternalIcon as I, Primitive as P, createWithStateProps as a, clsx as b, createSlotRecipeContext as c, IconCheckmarkLine_default as d, CheckboxControl as e, CheckboxIndicator as f, CheckboxHiddenInput as g, getColumnValue as h, DataTableFooterCell as i, IconChevronDownLine_default as j, DataTableHeaderCell as k, DataTableHeaderCellInner as l, DataTableHeaderCellLabel as m, DataTableHeaderCellIcon as n, IconSlider2HorizontalLine_default as o, CheckboxLabel as p, IconDot3HorizontalLine_default as q, IconChevronUpLine_default as r, splitMultipleVariantsProps as s, composeRefs as t, IconChevronDownSmallLine_default as u, IconCheckmarkFatFill_default as v, withScaleFeedback as w, IconPersonCircleLine_default as x, IconPlusLine_default as y, withContext as z };