@tensor_1/react 2.4.0 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AppShell.d.ts +16 -2
- package/dist/components/AppShell.js +39 -6
- package/dist/components/Composer.d.ts +21 -0
- package/dist/components/Composer.js +12 -0
- package/dist/components/Inbox.d.ts +35 -0
- package/dist/components/Inbox.js +45 -0
- package/dist/components/Meter.d.ts +15 -0
- package/dist/components/Meter.js +28 -0
- package/dist/components/Segmented.d.ts +29 -0
- package/dist/components/Segmented.js +36 -0
- package/dist/components/StatusPill.d.ts +1 -1
- package/dist/components/Table.d.ts +45 -4
- package/dist/components/Table.js +63 -3
- package/dist/components/Timeline.d.ts +7 -1
- package/dist/components/Timeline.js +2 -2
- package/dist/hooks/useTable.d.ts +50 -0
- package/dist/hooks/useTable.js +69 -0
- package/dist/index.cjs +610 -127
- package/dist/index.d.cts +287 -7
- package/dist/index.d.ts +8 -2
- package/dist/index.js +40 -2
- package/dist/table-engine.d.ts +89 -0
- package/dist/table-engine.js +185 -0
- package/package.json +3 -2
package/dist/index.cjs
CHANGED
|
@@ -24,22 +24,33 @@ __export(src_exports, {
|
|
|
24
24
|
AppShell: () => AppShell,
|
|
25
25
|
Avatar: () => Avatar,
|
|
26
26
|
AvatarGroup: () => AvatarGroup,
|
|
27
|
+
BulkBar: () => BulkBar,
|
|
27
28
|
Button: () => Button,
|
|
28
29
|
ButtonGroup: () => ButtonGroup,
|
|
29
30
|
Card: () => Card,
|
|
31
|
+
CellStrong: () => CellStrong,
|
|
32
|
+
CellSub: () => CellSub,
|
|
30
33
|
Checkbox: () => Checkbox,
|
|
31
34
|
CommandGroup: () => CommandGroup,
|
|
32
35
|
CommandItem: () => CommandItem,
|
|
33
36
|
CommandPalette: () => CommandPalette,
|
|
34
37
|
Comment: () => Comment,
|
|
35
38
|
Comments: () => Comments,
|
|
39
|
+
Composer: () => Composer,
|
|
40
|
+
ComposerBar: () => ComposerBar,
|
|
36
41
|
DescriptionItem: () => DescriptionItem,
|
|
37
42
|
DescriptionList: () => DescriptionList,
|
|
38
43
|
DetailLayout: () => DetailLayout,
|
|
39
44
|
Drawer: () => Drawer,
|
|
40
45
|
EmptyState: () => EmptyState,
|
|
41
46
|
ErrorState: () => ErrorState,
|
|
47
|
+
ExpandToggle: () => ExpandToggle,
|
|
42
48
|
Field: () => Field,
|
|
49
|
+
Highlighted: () => Highlighted,
|
|
50
|
+
Inbox: () => Inbox,
|
|
51
|
+
InboxDetail: () => InboxDetail,
|
|
52
|
+
InboxItem: () => InboxItem,
|
|
53
|
+
InboxList: () => InboxList,
|
|
43
54
|
Input: () => Input,
|
|
44
55
|
InputGroup: () => InputGroup,
|
|
45
56
|
Kanban: () => Kanban,
|
|
@@ -49,6 +60,8 @@ __export(src_exports, {
|
|
|
49
60
|
List: () => List,
|
|
50
61
|
ListItem: () => ListItem,
|
|
51
62
|
LoadingState: () => LoadingState,
|
|
63
|
+
Mark: () => Mark,
|
|
64
|
+
Meter: () => Meter,
|
|
52
65
|
Modal: () => Modal,
|
|
53
66
|
NavFavourites: () => NavFavourites,
|
|
54
67
|
NavGroup: () => NavGroup,
|
|
@@ -62,6 +75,10 @@ __export(src_exports, {
|
|
|
62
75
|
Prose: () => Prose,
|
|
63
76
|
Radio: () => Radio,
|
|
64
77
|
RadioGroup: () => RadioGroup,
|
|
78
|
+
RowAction: () => RowAction,
|
|
79
|
+
RowActions: () => RowActions,
|
|
80
|
+
Segmented: () => Segmented,
|
|
81
|
+
SegmentedOption: () => SegmentedOption,
|
|
65
82
|
Select: () => Select,
|
|
66
83
|
Sidebar: () => Sidebar,
|
|
67
84
|
SidebarSection: () => SidebarSection,
|
|
@@ -87,8 +104,26 @@ __export(src_exports, {
|
|
|
87
104
|
Tr: () => Tr,
|
|
88
105
|
Tree: () => Tree,
|
|
89
106
|
UserChip: () => UserChip,
|
|
107
|
+
applyFilters: () => applyFilters,
|
|
108
|
+
clampWidth: () => clampWidth,
|
|
90
109
|
cx: () => cx,
|
|
91
|
-
|
|
110
|
+
highlightSegments: () => highlightSegments,
|
|
111
|
+
matchFilter: () => matchFilter,
|
|
112
|
+
mergePinned: () => mergePinned,
|
|
113
|
+
multiSort: () => multiSort,
|
|
114
|
+
nextSortDir: () => nextSortDir,
|
|
115
|
+
parseView: () => parseView,
|
|
116
|
+
reorder: () => reorder,
|
|
117
|
+
searchRows: () => searchRows,
|
|
118
|
+
selectAllState: () => selectAllState,
|
|
119
|
+
serializeView: () => serializeView,
|
|
120
|
+
shouldVirtualize: () => shouldVirtualize,
|
|
121
|
+
toggleId: () => toggleId,
|
|
122
|
+
togglePage: () => togglePage,
|
|
123
|
+
toggleSort: () => toggleSort,
|
|
124
|
+
useDialog: () => useDialog,
|
|
125
|
+
useTable: () => useTable,
|
|
126
|
+
virtualWindow: () => virtualWindow
|
|
92
127
|
});
|
|
93
128
|
module.exports = __toCommonJS(src_exports);
|
|
94
129
|
|
|
@@ -116,10 +151,235 @@ function useDialog(open) {
|
|
|
116
151
|
return ref;
|
|
117
152
|
}
|
|
118
153
|
|
|
119
|
-
// src/
|
|
154
|
+
// src/hooks/useTable.ts
|
|
120
155
|
var import_react2 = require("react");
|
|
156
|
+
|
|
157
|
+
// src/table-engine.ts
|
|
158
|
+
function compare(a, b) {
|
|
159
|
+
if (a == null && b == null) return 0;
|
|
160
|
+
if (a == null) return -1;
|
|
161
|
+
if (b == null) return 1;
|
|
162
|
+
if (typeof a === "number" && typeof b === "number") return a - b;
|
|
163
|
+
return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
|
|
164
|
+
}
|
|
165
|
+
function multiSort(rows, keys) {
|
|
166
|
+
if (!keys.length) return rows.slice();
|
|
167
|
+
return rows.map((row, i) => ({ row, i })).sort((x, y) => {
|
|
168
|
+
for (const k of keys) {
|
|
169
|
+
const c = compare(x.row[k.field], y.row[k.field]);
|
|
170
|
+
if (c !== 0) return k.dir === "ascending" ? c : -c;
|
|
171
|
+
}
|
|
172
|
+
return x.i - y.i;
|
|
173
|
+
}).map((w) => w.row);
|
|
174
|
+
}
|
|
175
|
+
function nextSortDir(current) {
|
|
176
|
+
if (current === "ascending") return "descending";
|
|
177
|
+
if (current === "descending") return "none";
|
|
178
|
+
return "ascending";
|
|
179
|
+
}
|
|
180
|
+
function toggleSort(keys, field, additive = false) {
|
|
181
|
+
const existing = keys.find((k) => k.field === field);
|
|
182
|
+
const dir = nextSortDir(existing?.dir);
|
|
183
|
+
if (!additive) return dir === "none" ? [] : [{ field, dir }];
|
|
184
|
+
const rest = keys.filter((k) => k.field !== field);
|
|
185
|
+
return dir === "none" ? rest : [...rest, { field, dir }];
|
|
186
|
+
}
|
|
187
|
+
function asNum(v) {
|
|
188
|
+
return typeof v === "number" ? v : Number(v);
|
|
189
|
+
}
|
|
190
|
+
function matchFilter(row, f) {
|
|
191
|
+
const cell = row[f.field];
|
|
192
|
+
switch (f.op) {
|
|
193
|
+
case "isAnyOf":
|
|
194
|
+
return Array.isArray(f.value) && f.value.includes(cell);
|
|
195
|
+
case "isNoneOf":
|
|
196
|
+
return Array.isArray(f.value) && !f.value.includes(cell);
|
|
197
|
+
case "contains":
|
|
198
|
+
return String(cell ?? "").toLowerCase().includes(String(f.value ?? "").toLowerCase());
|
|
199
|
+
case "equals":
|
|
200
|
+
return String(cell ?? "") === String(f.value ?? "");
|
|
201
|
+
case "startsWith":
|
|
202
|
+
return String(cell ?? "").toLowerCase().startsWith(String(f.value ?? "").toLowerCase());
|
|
203
|
+
case "eq":
|
|
204
|
+
return asNum(cell) === asNum(f.value);
|
|
205
|
+
case "lt":
|
|
206
|
+
return asNum(cell) < asNum(f.value);
|
|
207
|
+
case "gt":
|
|
208
|
+
return asNum(cell) > asNum(f.value);
|
|
209
|
+
case "between": {
|
|
210
|
+
const [lo, hi] = f.value.map(asNum);
|
|
211
|
+
return asNum(cell) >= lo && asNum(cell) <= hi;
|
|
212
|
+
}
|
|
213
|
+
case "is":
|
|
214
|
+
return Boolean(cell) === Boolean(f.value);
|
|
215
|
+
default:
|
|
216
|
+
return true;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
function applyFilters(rows, filters) {
|
|
220
|
+
if (!filters.length) return rows.slice();
|
|
221
|
+
return rows.filter((r) => filters.every((f) => matchFilter(r, f)));
|
|
222
|
+
}
|
|
223
|
+
function searchRows(rows, query, fields) {
|
|
224
|
+
const q = query.trim().toLowerCase();
|
|
225
|
+
if (!q) return rows.slice();
|
|
226
|
+
return rows.filter((r) => {
|
|
227
|
+
const vals = fields ? fields.map((f) => r[f]) : Object.values(r);
|
|
228
|
+
return vals.some((v) => v != null && String(v).toLowerCase().includes(q));
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
function highlightSegments(text, query) {
|
|
232
|
+
const q = query.trim();
|
|
233
|
+
if (!q) return [{ text, match: false }];
|
|
234
|
+
const out = [];
|
|
235
|
+
const lower = text.toLowerCase();
|
|
236
|
+
const ql = q.toLowerCase();
|
|
237
|
+
let i = 0;
|
|
238
|
+
for (; ; ) {
|
|
239
|
+
const hit = lower.indexOf(ql, i);
|
|
240
|
+
if (hit === -1) {
|
|
241
|
+
if (i < text.length) out.push({ text: text.slice(i), match: false });
|
|
242
|
+
break;
|
|
243
|
+
}
|
|
244
|
+
if (hit > i) out.push({ text: text.slice(i, hit), match: false });
|
|
245
|
+
out.push({ text: text.slice(hit, hit + q.length), match: true });
|
|
246
|
+
i = hit + q.length;
|
|
247
|
+
}
|
|
248
|
+
return out;
|
|
249
|
+
}
|
|
250
|
+
function serializeView(v) {
|
|
251
|
+
const p = new URLSearchParams();
|
|
252
|
+
if (v.sort?.length) p.set("sort", v.sort.map((s) => `${s.field}:${s.dir === "descending" ? "d" : "a"}`).join(","));
|
|
253
|
+
if (v.columns?.length) p.set("cols", v.columns.join(","));
|
|
254
|
+
if (v.density && v.density !== "standard") p.set("density", v.density);
|
|
255
|
+
if (v.q) p.set("q", v.q);
|
|
256
|
+
if (v.filters?.length) p.set("filter", v.filters.map((f) => `${f.field}~${f.op}~${Array.isArray(f.value) ? f.value.join("|") : f.value ?? ""}`).join(","));
|
|
257
|
+
return p.toString();
|
|
258
|
+
}
|
|
259
|
+
function parseView(qs) {
|
|
260
|
+
const p = new URLSearchParams(qs.replace(/^\?/, ""));
|
|
261
|
+
const v = {};
|
|
262
|
+
const sort = p.get("sort");
|
|
263
|
+
if (sort) v.sort = sort.split(",").filter(Boolean).map((tok) => {
|
|
264
|
+
const [field, d] = tok.split(":");
|
|
265
|
+
return { field, dir: d === "d" ? "descending" : "ascending" };
|
|
266
|
+
});
|
|
267
|
+
const cols = p.get("cols");
|
|
268
|
+
if (cols) v.columns = cols.split(",").filter(Boolean);
|
|
269
|
+
const density = p.get("density");
|
|
270
|
+
if (density === "compact" || density === "comfortable" || density === "standard") v.density = density;
|
|
271
|
+
const q = p.get("q");
|
|
272
|
+
if (q) v.q = q;
|
|
273
|
+
const filter = p.get("filter");
|
|
274
|
+
if (filter) v.filters = filter.split(",").filter(Boolean).map((tok) => {
|
|
275
|
+
const [field, op, raw] = tok.split("~");
|
|
276
|
+
const value = raw?.includes("|") ? raw.split("|") : raw;
|
|
277
|
+
return { field, kind: "text", op, value };
|
|
278
|
+
});
|
|
279
|
+
return v;
|
|
280
|
+
}
|
|
281
|
+
function virtualWindow(scrollTop, viewportH, rowH, count, overscan = 6) {
|
|
282
|
+
if (rowH <= 0 || count <= 0) return { start: 0, end: count, padTop: 0, padBottom: 0, total: 0 };
|
|
283
|
+
const first = Math.max(0, Math.floor(scrollTop / rowH) - overscan);
|
|
284
|
+
const visible = Math.ceil(viewportH / rowH) + overscan * 2;
|
|
285
|
+
const end = Math.min(count, first + visible);
|
|
286
|
+
return { start: first, end, padTop: first * rowH, padBottom: (count - end) * rowH, total: count * rowH };
|
|
287
|
+
}
|
|
288
|
+
function shouldVirtualize(count, threshold = 100) {
|
|
289
|
+
return count > threshold;
|
|
290
|
+
}
|
|
291
|
+
function clampWidth(width, min = 64, max = Infinity) {
|
|
292
|
+
return Math.max(min, Math.min(max, Math.round(width)));
|
|
293
|
+
}
|
|
294
|
+
function reorder(arr, from, to) {
|
|
295
|
+
const next = arr.slice();
|
|
296
|
+
if (from < 0 || from >= next.length || to < 0 || to >= next.length) return next;
|
|
297
|
+
const [moved] = next.splice(from, 1);
|
|
298
|
+
next.splice(to, 0, moved);
|
|
299
|
+
return next;
|
|
300
|
+
}
|
|
301
|
+
function toggleId(set, id) {
|
|
302
|
+
const next = new Set(set);
|
|
303
|
+
next.has(id) ? next.delete(id) : next.add(id);
|
|
304
|
+
return next;
|
|
305
|
+
}
|
|
306
|
+
function selectAllState(selected, pageIds) {
|
|
307
|
+
const on = pageIds.filter((id) => selected.has(id)).length;
|
|
308
|
+
if (on === 0) return "none";
|
|
309
|
+
return on === pageIds.length ? "all" : "some";
|
|
310
|
+
}
|
|
311
|
+
function togglePage(selected, pageIds) {
|
|
312
|
+
const next = new Set(selected);
|
|
313
|
+
const all = pageIds.every((id) => next.has(id));
|
|
314
|
+
for (const id of pageIds) all ? next.delete(id) : next.add(id);
|
|
315
|
+
return next;
|
|
316
|
+
}
|
|
317
|
+
function mergePinned(all, visible, pinnedIds, idField = "id") {
|
|
318
|
+
if (!pinnedIds.size) return visible.slice();
|
|
319
|
+
const pinned = all.filter((r) => pinnedIds.has(String(r[idField])));
|
|
320
|
+
const pinnedSet = new Set(pinned.map((r) => String(r[idField])));
|
|
321
|
+
const rest = visible.filter((r) => !pinnedSet.has(String(r[idField])));
|
|
322
|
+
return [...pinned, ...rest];
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
// src/hooks/useTable.ts
|
|
326
|
+
function useTable(data, options = {}) {
|
|
327
|
+
const { idField = "id", searchFields } = options;
|
|
328
|
+
const [sort, setSort] = (0, import_react2.useState)(() => options.initialSort ?? []);
|
|
329
|
+
const [filters, setFilters] = (0, import_react2.useState)(() => options.initialFilters ?? []);
|
|
330
|
+
const [query, setQuery] = (0, import_react2.useState)(() => options.initialQuery ?? "");
|
|
331
|
+
const [selected, setSelected] = (0, import_react2.useState)(() => /* @__PURE__ */ new Set());
|
|
332
|
+
const [pinned, setPinned] = (0, import_react2.useState)(() => new Set(options.initialPinned ?? []));
|
|
333
|
+
const rows = (0, import_react2.useMemo)(() => {
|
|
334
|
+
const filtered = applyFilters(data, filters);
|
|
335
|
+
const searched = searchRows(filtered, query, searchFields);
|
|
336
|
+
const sorted = multiSort(searched, sort);
|
|
337
|
+
return mergePinned(data, sorted, pinned, idField);
|
|
338
|
+
}, [data, filters, query, searchFields, sort, pinned, idField]);
|
|
339
|
+
const pageIds = (0, import_react2.useMemo)(() => rows.map((r) => String(r[idField])), [rows, idField]);
|
|
340
|
+
const selectAll = selectAllState(selected, pageIds);
|
|
341
|
+
const doToggleSort = (0, import_react2.useCallback)((field, additive = false) => {
|
|
342
|
+
setSort((keys) => toggleSort(keys, field, additive));
|
|
343
|
+
}, []);
|
|
344
|
+
const toggleRow = (0, import_react2.useCallback)((id) => setSelected((s) => toggleId(s, id)), []);
|
|
345
|
+
const toggleAllRows = (0, import_react2.useCallback)(() => setSelected((s) => togglePage(s, pageIds)), [pageIds]);
|
|
346
|
+
const clearSelection = (0, import_react2.useCallback)(() => setSelected(/* @__PURE__ */ new Set()), []);
|
|
347
|
+
const togglePin = (0, import_react2.useCallback)((id) => setPinned((s) => toggleId(s, id)), []);
|
|
348
|
+
const view = (0, import_react2.useMemo)(() => ({ sort, filters, q: query }), [sort, filters, query]);
|
|
349
|
+
const viewQueryString = (0, import_react2.useMemo)(() => serializeView(view), [view]);
|
|
350
|
+
const applyView = (0, import_react2.useCallback)((queryString) => {
|
|
351
|
+
const v = parseView(queryString);
|
|
352
|
+
setSort(v.sort ?? []);
|
|
353
|
+
setFilters(v.filters ?? []);
|
|
354
|
+
setQuery(v.q ?? "");
|
|
355
|
+
}, []);
|
|
356
|
+
return {
|
|
357
|
+
rows,
|
|
358
|
+
sort,
|
|
359
|
+
filters,
|
|
360
|
+
query,
|
|
361
|
+
selected,
|
|
362
|
+
pinned,
|
|
363
|
+
selectAll,
|
|
364
|
+
toggleSort: doToggleSort,
|
|
365
|
+
setSort,
|
|
366
|
+
setFilters,
|
|
367
|
+
setQuery,
|
|
368
|
+
isSelected: (id) => selected.has(id),
|
|
369
|
+
toggleRow,
|
|
370
|
+
toggleAllRows,
|
|
371
|
+
clearSelection,
|
|
372
|
+
togglePin,
|
|
373
|
+
view,
|
|
374
|
+
viewQueryString,
|
|
375
|
+
applyView
|
|
376
|
+
};
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
// src/components/Button.tsx
|
|
380
|
+
var import_react3 = require("react");
|
|
121
381
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
122
|
-
var Button = (0,
|
|
382
|
+
var Button = (0, import_react3.forwardRef)(
|
|
123
383
|
({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
124
384
|
"button",
|
|
125
385
|
{
|
|
@@ -144,9 +404,9 @@ function ButtonGroup({ children, className }) {
|
|
|
144
404
|
}
|
|
145
405
|
|
|
146
406
|
// src/components/Input.tsx
|
|
147
|
-
var
|
|
407
|
+
var import_react4 = require("react");
|
|
148
408
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
149
|
-
var Input = (0,
|
|
409
|
+
var Input = (0, import_react4.forwardRef)(
|
|
150
410
|
({ size = "md", invalid, valid, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
151
411
|
"input",
|
|
152
412
|
{
|
|
@@ -179,9 +439,9 @@ function InputGroup({ children, leadingIcon, trailingIcon, className }) {
|
|
|
179
439
|
}
|
|
180
440
|
|
|
181
441
|
// src/components/Textarea.tsx
|
|
182
|
-
var
|
|
442
|
+
var import_react5 = require("react");
|
|
183
443
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
184
|
-
var Textarea = (0,
|
|
444
|
+
var Textarea = (0, import_react5.forwardRef)(
|
|
185
445
|
({ invalid, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
186
446
|
"textarea",
|
|
187
447
|
{
|
|
@@ -195,9 +455,9 @@ var Textarea = (0, import_react4.forwardRef)(
|
|
|
195
455
|
Textarea.displayName = "Textarea";
|
|
196
456
|
|
|
197
457
|
// src/components/Select.tsx
|
|
198
|
-
var
|
|
458
|
+
var import_react6 = require("react");
|
|
199
459
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
200
|
-
var Select = (0,
|
|
460
|
+
var Select = (0, import_react6.forwardRef)(
|
|
201
461
|
({ size = "md", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
202
462
|
"select",
|
|
203
463
|
{
|
|
@@ -210,14 +470,14 @@ var Select = (0, import_react5.forwardRef)(
|
|
|
210
470
|
Select.displayName = "Select";
|
|
211
471
|
|
|
212
472
|
// src/components/Checkbox.tsx
|
|
213
|
-
var
|
|
473
|
+
var import_react7 = require("react");
|
|
214
474
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
215
475
|
var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "1.5,6 4.5,9 10.5,3" }) });
|
|
216
476
|
var IndeterminateIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "2", y: "5", width: "8", height: "2", rx: "1", fill: "currentColor" }) });
|
|
217
|
-
var Checkbox = (0,
|
|
477
|
+
var Checkbox = (0, import_react7.forwardRef)(
|
|
218
478
|
({ label, indeterminate, className, ...props }, forwardedRef) => {
|
|
219
|
-
const innerRef = (0,
|
|
220
|
-
(0,
|
|
479
|
+
const innerRef = (0, import_react7.useRef)(null);
|
|
480
|
+
(0, import_react7.useEffect)(() => {
|
|
221
481
|
const el = innerRef.current;
|
|
222
482
|
if (el) el.indeterminate = !!indeterminate;
|
|
223
483
|
}, [indeterminate]);
|
|
@@ -242,9 +502,9 @@ var Checkbox = (0, import_react6.forwardRef)(
|
|
|
242
502
|
Checkbox.displayName = "Checkbox";
|
|
243
503
|
|
|
244
504
|
// src/components/Radio.tsx
|
|
245
|
-
var
|
|
505
|
+
var import_react8 = require("react");
|
|
246
506
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
247
|
-
var Radio = (0,
|
|
507
|
+
var Radio = (0, import_react8.forwardRef)(
|
|
248
508
|
({ label, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: cx("uix-radio", className), children: [
|
|
249
509
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "radio", ref, ...props }),
|
|
250
510
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uix-radio__dot" }),
|
|
@@ -257,9 +517,9 @@ function RadioGroup({ children, className }) {
|
|
|
257
517
|
}
|
|
258
518
|
|
|
259
519
|
// src/components/Switch.tsx
|
|
260
|
-
var
|
|
520
|
+
var import_react9 = require("react");
|
|
261
521
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
262
|
-
var Switch = (0,
|
|
522
|
+
var Switch = (0, import_react9.forwardRef)(
|
|
263
523
|
({ label, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: cx("uix-switch", className), children: [
|
|
264
524
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", role: "switch", ref, ...props }),
|
|
265
525
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "uix-switch__track" }),
|
|
@@ -406,11 +666,11 @@ function ListItem({ title, meta, trail, leading, children, className, ...props }
|
|
|
406
666
|
}
|
|
407
667
|
|
|
408
668
|
// src/components/DescriptionList.tsx
|
|
409
|
-
var
|
|
669
|
+
var import_react10 = require("react");
|
|
410
670
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
411
671
|
function DescriptionList({ items, children, className, ...props }) {
|
|
412
672
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("dl", { className: cx("uix-dl", className), ...props, children: [
|
|
413
|
-
items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
673
|
+
items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react10.Fragment, { children: [
|
|
414
674
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dt", { children: item.term }),
|
|
415
675
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dd", { children: item.description })
|
|
416
676
|
] }, item.id ?? i)),
|
|
@@ -425,14 +685,14 @@ function DescriptionItem({ term, children }) {
|
|
|
425
685
|
}
|
|
426
686
|
|
|
427
687
|
// src/components/Tabs.tsx
|
|
428
|
-
var
|
|
688
|
+
var import_react11 = require("react");
|
|
429
689
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
430
|
-
var TabsCtx = (0,
|
|
690
|
+
var TabsCtx = (0, import_react11.createContext)({});
|
|
431
691
|
function Tabs({ variant = "line", value, onChange, children, className }) {
|
|
432
692
|
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TabsCtx.Provider, { value: { value, onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
|
|
433
693
|
}
|
|
434
694
|
function Tab({ value, children, disabled, className, onClick, ...props }) {
|
|
435
|
-
const ctx = (0,
|
|
695
|
+
const ctx = (0, import_react11.useContext)(TabsCtx);
|
|
436
696
|
const selected = ctx.value === value;
|
|
437
697
|
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
438
698
|
"button",
|
|
@@ -452,17 +712,49 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
|
|
|
452
712
|
}
|
|
453
713
|
|
|
454
714
|
// src/components/AppShell.tsx
|
|
715
|
+
var import_react12 = require("react");
|
|
455
716
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
456
|
-
function AppShell({
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
717
|
+
function AppShell({
|
|
718
|
+
nav,
|
|
719
|
+
collapsed,
|
|
720
|
+
focus,
|
|
721
|
+
onExitFocus,
|
|
722
|
+
mainBleed,
|
|
723
|
+
sidebar,
|
|
724
|
+
topbar,
|
|
725
|
+
children,
|
|
726
|
+
className,
|
|
727
|
+
...props
|
|
728
|
+
}) {
|
|
729
|
+
const navState = nav ?? (collapsed ? "rail" : "full");
|
|
730
|
+
(0, import_react12.useEffect)(() => {
|
|
731
|
+
if (!focus || !onExitFocus) return;
|
|
732
|
+
const onKey = (e) => {
|
|
733
|
+
if (e.key === "Escape") onExitFocus();
|
|
734
|
+
};
|
|
735
|
+
document.addEventListener("keydown", onKey);
|
|
736
|
+
return () => document.removeEventListener("keydown", onKey);
|
|
737
|
+
}, [focus, onExitFocus]);
|
|
738
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
739
|
+
"div",
|
|
740
|
+
{
|
|
741
|
+
className: cx("uix-shell", className),
|
|
742
|
+
"data-nav": navState !== "full" ? navState : void 0,
|
|
743
|
+
"data-collapsed": collapsed && nav == null ? "" : void 0,
|
|
744
|
+
"data-focus": focus || void 0,
|
|
745
|
+
...props,
|
|
746
|
+
children: [
|
|
747
|
+
sidebar && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-shell__sidebar", children: sidebar }),
|
|
748
|
+
topbar && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-shell__topbar", children: topbar }),
|
|
749
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("main", { className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
|
|
750
|
+
focus && onExitFocus && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-shell__focus-exit", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: onExitFocus, children: "Esc \xB7 Exit focus" }) })
|
|
751
|
+
]
|
|
752
|
+
}
|
|
753
|
+
);
|
|
462
754
|
}
|
|
463
755
|
|
|
464
756
|
// src/components/Sidebar.tsx
|
|
465
|
-
var
|
|
757
|
+
var import_react13 = require("react");
|
|
466
758
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
467
759
|
var ChevronIcon = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "uix-navgroup__chevron", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M2 4l4 4 4-4" }) });
|
|
468
760
|
function Sidebar({ collapsed, onToggle, brand, toggleIcon, children, className, ...props }) {
|
|
@@ -516,7 +808,7 @@ function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...p
|
|
|
516
808
|
);
|
|
517
809
|
}
|
|
518
810
|
function NavGroup({ icon, label, children, defaultExpanded = true }) {
|
|
519
|
-
const [expanded, setExpanded] = (0,
|
|
811
|
+
const [expanded, setExpanded] = (0, import_react13.useState)(defaultExpanded);
|
|
520
812
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uix-navgroup", children: [
|
|
521
813
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
522
814
|
"button",
|
|
@@ -584,7 +876,7 @@ function StarButton({
|
|
|
584
876
|
}
|
|
585
877
|
|
|
586
878
|
// src/components/NavFavourites.tsx
|
|
587
|
-
var
|
|
879
|
+
var import_react14 = require("react");
|
|
588
880
|
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
589
881
|
var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
590
882
|
"svg",
|
|
@@ -648,13 +940,13 @@ function NavFavourites({
|
|
|
648
940
|
emptyReason,
|
|
649
941
|
className
|
|
650
942
|
}) {
|
|
651
|
-
const regionId = (0,
|
|
652
|
-
const headerRef = (0,
|
|
653
|
-
const regionRef = (0,
|
|
654
|
-
const focusAfterRef = (0,
|
|
655
|
-
const triggerRefs = (0,
|
|
943
|
+
const regionId = (0, import_react14.useId)();
|
|
944
|
+
const headerRef = (0, import_react14.useRef)(null);
|
|
945
|
+
const regionRef = (0, import_react14.useRef)(null);
|
|
946
|
+
const focusAfterRef = (0, import_react14.useRef)(null);
|
|
947
|
+
const triggerRefs = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
|
|
656
948
|
const order = items.map((i) => i.id);
|
|
657
|
-
(0,
|
|
949
|
+
(0, import_react14.useEffect)(() => {
|
|
658
950
|
const id = focusAfterRef.current;
|
|
659
951
|
if (!id) return;
|
|
660
952
|
focusAfterRef.current = null;
|
|
@@ -765,18 +1057,18 @@ function FavouriteRow({
|
|
|
765
1057
|
onRemove,
|
|
766
1058
|
registerTrigger
|
|
767
1059
|
}) {
|
|
768
|
-
const [open, setOpen] = (0,
|
|
769
|
-
const [revealed, setRevealed] = (0,
|
|
770
|
-
const menuId = (0,
|
|
771
|
-
const triggerRef = (0,
|
|
772
|
-
const itemRefs = (0,
|
|
1060
|
+
const [open, setOpen] = (0, import_react14.useState)(false);
|
|
1061
|
+
const [revealed, setRevealed] = (0, import_react14.useState)(false);
|
|
1062
|
+
const menuId = (0, import_react14.useId)();
|
|
1063
|
+
const triggerRef = (0, import_react14.useRef)(null);
|
|
1064
|
+
const itemRefs = (0, import_react14.useRef)([]);
|
|
773
1065
|
const optionsTemplate = labels.options ?? "{label} favourite options";
|
|
774
1066
|
const actions = [
|
|
775
1067
|
...isFirst ? [] : [{ label: labels.moveUp, onSelect: onMoveUp }],
|
|
776
1068
|
...isLast ? [] : [{ label: labels.moveDown, onSelect: onMoveDown }],
|
|
777
1069
|
{ label: labels.remove.replace("{label}", item.label), onSelect: onRemove }
|
|
778
1070
|
];
|
|
779
|
-
(0,
|
|
1071
|
+
(0, import_react14.useEffect)(() => {
|
|
780
1072
|
if (open) itemRefs.current[0]?.focus();
|
|
781
1073
|
}, [open]);
|
|
782
1074
|
const closeAndReturnFocus = () => {
|
|
@@ -993,6 +1285,7 @@ function Table({
|
|
|
993
1285
|
density = "standard",
|
|
994
1286
|
zebra = true,
|
|
995
1287
|
pinnedCol,
|
|
1288
|
+
fixed,
|
|
996
1289
|
rowPeek,
|
|
997
1290
|
v2,
|
|
998
1291
|
className,
|
|
@@ -1002,7 +1295,13 @@ function Table({
|
|
|
1002
1295
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1003
1296
|
"table",
|
|
1004
1297
|
{
|
|
1005
|
-
className: cx(
|
|
1298
|
+
className: cx(
|
|
1299
|
+
"uix-table",
|
|
1300
|
+
!zebra && "uix-table--no-zebra",
|
|
1301
|
+
pinnedCol && "uix-table--pinned-col",
|
|
1302
|
+
fixed && "uix-table--fixed",
|
|
1303
|
+
className
|
|
1304
|
+
),
|
|
1006
1305
|
"data-density": density !== "standard" ? density : void 0,
|
|
1007
1306
|
"data-uix-rowpeek": rowPeek || void 0,
|
|
1008
1307
|
"data-uix-table-v2": v2 || void 0,
|
|
@@ -1011,12 +1310,13 @@ function Table({
|
|
|
1011
1310
|
}
|
|
1012
1311
|
);
|
|
1013
1312
|
}
|
|
1014
|
-
function Th({ sortable, sortDirection, onSort, className, children, onClick, ...props }) {
|
|
1313
|
+
function Th({ sortable, sortDirection, sortOrder, onSort, className, children, onClick, ...props }) {
|
|
1015
1314
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1016
1315
|
"th",
|
|
1017
1316
|
{
|
|
1018
1317
|
className,
|
|
1019
1318
|
"data-sort": sortable || void 0,
|
|
1319
|
+
"data-sort-order": sortOrder != null && sortOrder > 0 ? sortOrder : void 0,
|
|
1020
1320
|
"aria-sort": sortDirection && sortDirection !== "none" ? sortDirection : void 0,
|
|
1021
1321
|
onClick: sortable ? onSort ?? onClick : onClick,
|
|
1022
1322
|
...props,
|
|
@@ -1039,6 +1339,49 @@ function Tr({ selected, pinned, className, children, ...props }) {
|
|
|
1039
1339
|
}
|
|
1040
1340
|
);
|
|
1041
1341
|
}
|
|
1342
|
+
function BulkBar({ count, children, className, ...props }) {
|
|
1343
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx("uix-bulkbar", className), role: "toolbar", "aria-label": "Bulk actions", ...props, children: [
|
|
1344
|
+
count != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "uix-bulkbar__count", children: [
|
|
1345
|
+
count,
|
|
1346
|
+
" selected"
|
|
1347
|
+
] }),
|
|
1348
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "uix-bulkbar__spacer" }),
|
|
1349
|
+
children
|
|
1350
|
+
] });
|
|
1351
|
+
}
|
|
1352
|
+
function RowActions({ children, className, ...props }) {
|
|
1353
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { className: cx("uix-table__actions", className), ...props, children });
|
|
1354
|
+
}
|
|
1355
|
+
function RowAction({ children, className, type = "button", ...props }) {
|
|
1356
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type, className: cx("uix-rowact", className), ...props, children });
|
|
1357
|
+
}
|
|
1358
|
+
function ExpandToggle({ expanded, className, type = "button", ...props }) {
|
|
1359
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1360
|
+
"button",
|
|
1361
|
+
{
|
|
1362
|
+
type,
|
|
1363
|
+
className: cx("uix-table__expand", className),
|
|
1364
|
+
"aria-expanded": expanded,
|
|
1365
|
+
"aria-label": expanded ? "Collapse row" : "Expand row",
|
|
1366
|
+
...props,
|
|
1367
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M6 4l4 4-4 4" }) })
|
|
1368
|
+
}
|
|
1369
|
+
);
|
|
1370
|
+
}
|
|
1371
|
+
function CellStrong({ children, className, ...props }) {
|
|
1372
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cx("uix-cell-strong", className), ...props, children });
|
|
1373
|
+
}
|
|
1374
|
+
function CellSub({ children, className, ...props }) {
|
|
1375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cx("uix-cell-sub", className), ...props, children });
|
|
1376
|
+
}
|
|
1377
|
+
function Mark({ children, className, ...props }) {
|
|
1378
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("mark", { className: cx("uix-mark", className), ...props, children });
|
|
1379
|
+
}
|
|
1380
|
+
function Highlighted({ text, query }) {
|
|
1381
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: highlightSegments(text, query).map(
|
|
1382
|
+
(seg, i) => seg.match ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("mark", { className: "uix-mark", children: seg.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: seg.text }, i)
|
|
1383
|
+
) });
|
|
1384
|
+
}
|
|
1042
1385
|
|
|
1043
1386
|
// src/components/Pagination.tsx
|
|
1044
1387
|
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
@@ -1125,49 +1468,74 @@ function Progress({ value = 0, max = 100, indeterminate, className, ...props })
|
|
|
1125
1468
|
);
|
|
1126
1469
|
}
|
|
1127
1470
|
|
|
1128
|
-
// src/components/
|
|
1471
|
+
// src/components/Meter.tsx
|
|
1129
1472
|
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1473
|
+
function Meter({ value = 0, tone, className, ...props }) {
|
|
1474
|
+
const pct = Math.max(0, Math.min(100, value));
|
|
1475
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1476
|
+
"div",
|
|
1477
|
+
{
|
|
1478
|
+
role: "meter",
|
|
1479
|
+
"aria-valuenow": pct,
|
|
1480
|
+
"aria-valuemin": 0,
|
|
1481
|
+
"aria-valuemax": 100,
|
|
1482
|
+
className: cx("uix-meter", className),
|
|
1483
|
+
...props,
|
|
1484
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1485
|
+
"div",
|
|
1486
|
+
{
|
|
1487
|
+
className: "uix-meter__fill",
|
|
1488
|
+
style: { width: `${pct}%` },
|
|
1489
|
+
...tone && tone !== "success" ? { "data-tone": tone } : {}
|
|
1490
|
+
}
|
|
1491
|
+
)
|
|
1492
|
+
}
|
|
1493
|
+
);
|
|
1494
|
+
}
|
|
1495
|
+
|
|
1496
|
+
// src/components/Stat.tsx
|
|
1497
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1130
1498
|
function Stat({ label, value, icon, meta, trend, className, ...props }) {
|
|
1131
|
-
return /* @__PURE__ */ (0,
|
|
1132
|
-
/* @__PURE__ */ (0,
|
|
1133
|
-
/* @__PURE__ */ (0,
|
|
1499
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cx("uix-stat", className), ...props, children: [
|
|
1500
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "uix-stat__label", children: [
|
|
1501
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: label }),
|
|
1134
1502
|
icon
|
|
1135
1503
|
] }),
|
|
1136
|
-
/* @__PURE__ */ (0,
|
|
1137
|
-
(meta != null || trend != null) && /* @__PURE__ */ (0,
|
|
1138
|
-
trend != null && /* @__PURE__ */ (0,
|
|
1504
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "uix-stat__value", children: value }),
|
|
1505
|
+
(meta != null || trend != null) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "uix-stat__meta", children: [
|
|
1506
|
+
trend != null && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
|
|
1139
1507
|
meta
|
|
1140
1508
|
] })
|
|
1141
1509
|
] });
|
|
1142
1510
|
}
|
|
1143
1511
|
|
|
1144
1512
|
// src/components/Tooltip.tsx
|
|
1145
|
-
var
|
|
1513
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1146
1514
|
function Tooltip({ label, children, ...props }) {
|
|
1147
|
-
return /* @__PURE__ */ (0,
|
|
1515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { "data-uix-tip": label, ...props, children });
|
|
1148
1516
|
}
|
|
1149
1517
|
|
|
1150
1518
|
// src/components/States.tsx
|
|
1151
|
-
var
|
|
1519
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1152
1520
|
function EmptyState({ icon, title, children, action, className, ...props }) {
|
|
1153
|
-
return /* @__PURE__ */ (0,
|
|
1154
|
-
icon != null && /* @__PURE__ */ (0,
|
|
1155
|
-
title != null && /* @__PURE__ */ (0,
|
|
1521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("uix-empty", className), ...props, children: [
|
|
1522
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "uix-empty__icon", children: icon }),
|
|
1523
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "uix-empty__title", children: title }),
|
|
1156
1524
|
children,
|
|
1157
1525
|
action
|
|
1158
1526
|
] });
|
|
1159
1527
|
}
|
|
1160
1528
|
function ErrorState({ icon, title, detail, action, className, ...props }) {
|
|
1161
|
-
return /* @__PURE__ */ (0,
|
|
1162
|
-
icon != null && /* @__PURE__ */ (0,
|
|
1163
|
-
title != null && /* @__PURE__ */ (0,
|
|
1164
|
-
detail != null && /* @__PURE__ */ (0,
|
|
1529
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("uix-empty", "uix-empty--danger", className), role: "alert", ...props, children: [
|
|
1530
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "uix-empty__icon uix-empty__icon--danger", children: icon }),
|
|
1531
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "uix-empty__title", children: title }),
|
|
1532
|
+
detail != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { children: detail }),
|
|
1165
1533
|
action
|
|
1166
1534
|
] });
|
|
1167
1535
|
}
|
|
1168
1536
|
function Skeleton({ variant = "block", width, height, className, style, ...props }) {
|
|
1169
1537
|
const dims = { width, height, ...style };
|
|
1170
|
-
return /* @__PURE__ */ (0,
|
|
1538
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1171
1539
|
"div",
|
|
1172
1540
|
{
|
|
1173
1541
|
className: cx(
|
|
@@ -1182,52 +1550,52 @@ function Skeleton({ variant = "block", width, height, className, style, ...props
|
|
|
1182
1550
|
);
|
|
1183
1551
|
}
|
|
1184
1552
|
function LoadingState({ rows = 3, className, ...props }) {
|
|
1185
|
-
return /* @__PURE__ */ (0,
|
|
1553
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cx("uix-stack", className), role: "status", "aria-busy": "true", ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
|
|
1186
1554
|
}
|
|
1187
1555
|
|
|
1188
1556
|
// src/components/Label.tsx
|
|
1189
|
-
var
|
|
1557
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1190
1558
|
function Label({ color, dot, children, className, style, ...props }) {
|
|
1191
1559
|
const merged = color ? { "--label-color": color, ...style } : style;
|
|
1192
|
-
return /* @__PURE__ */ (0,
|
|
1193
|
-
dot && /* @__PURE__ */ (0,
|
|
1560
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: cx("uix-label", className), style: merged, ...props, children: [
|
|
1561
|
+
dot && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-label__dot", "aria-hidden": "true" }),
|
|
1194
1562
|
children
|
|
1195
1563
|
] });
|
|
1196
1564
|
}
|
|
1197
1565
|
|
|
1198
1566
|
// src/components/Avatar.tsx
|
|
1199
|
-
var
|
|
1567
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1200
1568
|
function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
|
|
1201
|
-
return /* @__PURE__ */ (0,
|
|
1202
|
-
src ? /* @__PURE__ */ (0,
|
|
1203
|
-
status && /* @__PURE__ */ (0,
|
|
1569
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
|
|
1570
|
+
src ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { src, alt: alt ?? "" }) : children,
|
|
1571
|
+
status && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-avatar__status" })
|
|
1204
1572
|
] });
|
|
1205
1573
|
}
|
|
1206
1574
|
function AvatarGroup({ children, className, ...props }) {
|
|
1207
|
-
return /* @__PURE__ */ (0,
|
|
1575
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: cx("uix-avatar-group", className), ...props, children });
|
|
1208
1576
|
}
|
|
1209
1577
|
function UserChip({ avatar, name, sub, className, children, ...props }) {
|
|
1210
|
-
return /* @__PURE__ */ (0,
|
|
1578
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: cx("uix-user-chip", className), ...props, children: [
|
|
1211
1579
|
avatar,
|
|
1212
|
-
/* @__PURE__ */ (0,
|
|
1213
|
-
name != null && /* @__PURE__ */ (0,
|
|
1214
|
-
sub != null && /* @__PURE__ */ (0,
|
|
1580
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
|
|
1581
|
+
name != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-user-chip__name", children: name }),
|
|
1582
|
+
sub != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-user-chip__sub", style: { display: "block" }, children: sub })
|
|
1215
1583
|
] }),
|
|
1216
1584
|
children
|
|
1217
1585
|
] });
|
|
1218
1586
|
}
|
|
1219
1587
|
|
|
1220
1588
|
// src/components/Comments.tsx
|
|
1221
|
-
var
|
|
1589
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1222
1590
|
function Comments({ children, className, ...props }) {
|
|
1223
|
-
return /* @__PURE__ */ (0,
|
|
1591
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cx("uix-comments", className), ...props, children });
|
|
1224
1592
|
}
|
|
1225
1593
|
function Comment({ avatar, author, meta, children, className, ...props }) {
|
|
1226
|
-
return /* @__PURE__ */ (0,
|
|
1227
|
-
avatar ?? /* @__PURE__ */ (0,
|
|
1228
|
-
/* @__PURE__ */ (0,
|
|
1229
|
-
(author != null || meta != null) && /* @__PURE__ */ (0,
|
|
1230
|
-
author != null && /* @__PURE__ */ (0,
|
|
1594
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cx("uix-comment", className), ...props, children: [
|
|
1595
|
+
avatar ?? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "aria-hidden": "true" }),
|
|
1596
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "uix-comment__body", children: [
|
|
1597
|
+
(author != null || meta != null) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "uix-comment__meta", children: [
|
|
1598
|
+
author != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "uix-comment__author", children: author }),
|
|
1231
1599
|
author != null && meta != null ? " \xB7 " : null,
|
|
1232
1600
|
meta
|
|
1233
1601
|
] }),
|
|
@@ -1236,96 +1604,176 @@ function Comment({ avatar, author, meta, children, className, ...props }) {
|
|
|
1236
1604
|
] });
|
|
1237
1605
|
}
|
|
1238
1606
|
|
|
1607
|
+
// src/components/Composer.tsx
|
|
1608
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1609
|
+
function Composer({ children, className, ...props }) {
|
|
1610
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("uix-composer", className), ...props, children });
|
|
1611
|
+
}
|
|
1612
|
+
function ComposerBar({ children, className, ...props }) {
|
|
1613
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("uix-composer__bar", className), ...props, children });
|
|
1614
|
+
}
|
|
1615
|
+
|
|
1616
|
+
// src/components/Segmented.tsx
|
|
1617
|
+
var import_react15 = require("react");
|
|
1618
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1619
|
+
var SegmentedCtx = (0, import_react15.createContext)({});
|
|
1620
|
+
function Segmented({ value, onChange, children, className, ...props }) {
|
|
1621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SegmentedCtx.Provider, { value: { value, onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { role: "group", className: cx("uix-segmented", className), ...props, children }) });
|
|
1622
|
+
}
|
|
1623
|
+
function SegmentedOption({
|
|
1624
|
+
value,
|
|
1625
|
+
children,
|
|
1626
|
+
className,
|
|
1627
|
+
onClick,
|
|
1628
|
+
...props
|
|
1629
|
+
}) {
|
|
1630
|
+
const ctx = (0, import_react15.useContext)(SegmentedCtx);
|
|
1631
|
+
const selected = ctx.value === value;
|
|
1632
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
1633
|
+
"button",
|
|
1634
|
+
{
|
|
1635
|
+
type: "button",
|
|
1636
|
+
className: cx("uix-segmented__option", className),
|
|
1637
|
+
"aria-pressed": selected,
|
|
1638
|
+
onClick: (e) => {
|
|
1639
|
+
ctx.onChange?.(value);
|
|
1640
|
+
onClick?.(e);
|
|
1641
|
+
},
|
|
1642
|
+
...props,
|
|
1643
|
+
children
|
|
1644
|
+
}
|
|
1645
|
+
);
|
|
1646
|
+
}
|
|
1647
|
+
|
|
1239
1648
|
// src/components/Timeline.tsx
|
|
1240
|
-
var
|
|
1649
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
1241
1650
|
function Timeline({ children, className, ...props }) {
|
|
1242
|
-
return /* @__PURE__ */ (0,
|
|
1651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
|
|
1243
1652
|
}
|
|
1244
|
-
function TimelineItem({ meta, children, className, ...props }) {
|
|
1245
|
-
return /* @__PURE__ */ (0,
|
|
1246
|
-
/* @__PURE__ */ (0,
|
|
1247
|
-
/* @__PURE__ */ (0,
|
|
1248
|
-
/* @__PURE__ */ (0,
|
|
1653
|
+
function TimelineItem({ node, meta, children, className, ...props }) {
|
|
1654
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cx("uix-timeline__item", className), ...props, children: [
|
|
1655
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "uix-timeline__rail", children: [
|
|
1656
|
+
node ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "uix-timeline__node" }),
|
|
1657
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "uix-timeline__line" })
|
|
1249
1658
|
] }),
|
|
1250
|
-
/* @__PURE__ */ (0,
|
|
1251
|
-
meta != null && /* @__PURE__ */ (0,
|
|
1659
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "uix-timeline__body", children: [
|
|
1660
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "uix-timeline__meta", children: meta }),
|
|
1252
1661
|
children
|
|
1253
1662
|
] })
|
|
1254
1663
|
] });
|
|
1255
1664
|
}
|
|
1256
1665
|
|
|
1257
1666
|
// src/components/Prose.tsx
|
|
1258
|
-
var
|
|
1667
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
1259
1668
|
function Prose({ children, className, ...props }) {
|
|
1260
|
-
return /* @__PURE__ */ (0,
|
|
1669
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cx("uix-prose", className), ...props, children });
|
|
1261
1670
|
}
|
|
1262
1671
|
function Note({ tone, icon, children, className, ...props }) {
|
|
1263
|
-
return /* @__PURE__ */ (0,
|
|
1264
|
-
icon != null && /* @__PURE__ */ (0,
|
|
1265
|
-
/* @__PURE__ */ (0,
|
|
1672
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
|
|
1673
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-note__icon", children: icon }),
|
|
1674
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-note__body", children })
|
|
1266
1675
|
] });
|
|
1267
1676
|
}
|
|
1268
1677
|
|
|
1269
1678
|
// src/components/Popover.tsx
|
|
1270
|
-
var
|
|
1679
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
1271
1680
|
function Popover({ popover = "auto", children, className, ...props }) {
|
|
1272
1681
|
const popoverAttr = { popover };
|
|
1273
|
-
return /* @__PURE__ */ (0,
|
|
1682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cx("uix-popover", className), ...popoverAttr, ...props, children });
|
|
1274
1683
|
}
|
|
1275
1684
|
|
|
1276
1685
|
// src/components/CommandPalette.tsx
|
|
1277
|
-
var
|
|
1686
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
1278
1687
|
function CommandPalette({ inputProps, children, className, ...props }) {
|
|
1279
|
-
return /* @__PURE__ */ (0,
|
|
1280
|
-
/* @__PURE__ */ (0,
|
|
1281
|
-
/* @__PURE__ */ (0,
|
|
1688
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
|
|
1689
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
|
|
1690
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-cmdk__list", children })
|
|
1282
1691
|
] });
|
|
1283
1692
|
}
|
|
1284
1693
|
function CommandGroup({ label, children }) {
|
|
1285
|
-
return /* @__PURE__ */ (0,
|
|
1286
|
-
label != null && /* @__PURE__ */ (0,
|
|
1694
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
|
|
1695
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-cmdk__group", children: label }),
|
|
1287
1696
|
children
|
|
1288
1697
|
] });
|
|
1289
1698
|
}
|
|
1290
1699
|
function CommandItem({ icon, shortcut, active, children, className, ...props }) {
|
|
1291
|
-
return /* @__PURE__ */ (0,
|
|
1700
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
|
|
1292
1701
|
icon,
|
|
1293
|
-
/* @__PURE__ */ (0,
|
|
1702
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children }),
|
|
1294
1703
|
shortcut
|
|
1295
1704
|
] });
|
|
1296
1705
|
}
|
|
1297
1706
|
|
|
1707
|
+
// src/components/Inbox.tsx
|
|
1708
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
1709
|
+
function Inbox({ children, className, ...props }) {
|
|
1710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cx("uix-inbox", className), ...props, children });
|
|
1711
|
+
}
|
|
1712
|
+
function InboxList({ children, className, ...props }) {
|
|
1713
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cx("uix-inbox__list", className), role: "listbox", ...props, children });
|
|
1714
|
+
}
|
|
1715
|
+
function InboxItem({
|
|
1716
|
+
subject,
|
|
1717
|
+
preview,
|
|
1718
|
+
leading,
|
|
1719
|
+
unread,
|
|
1720
|
+
selected,
|
|
1721
|
+
children,
|
|
1722
|
+
className,
|
|
1723
|
+
...props
|
|
1724
|
+
}) {
|
|
1725
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
1726
|
+
"div",
|
|
1727
|
+
{
|
|
1728
|
+
role: "option",
|
|
1729
|
+
"aria-selected": selected ?? false,
|
|
1730
|
+
className: cx("uix-inbox__item", className),
|
|
1731
|
+
...unread ? { "data-unread": "" } : {},
|
|
1732
|
+
...props,
|
|
1733
|
+
children: [
|
|
1734
|
+
leading,
|
|
1735
|
+
subject != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "uix-inbox__subject", children: subject }),
|
|
1736
|
+
preview != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "uix-inbox__preview", children: preview }),
|
|
1737
|
+
children
|
|
1738
|
+
]
|
|
1739
|
+
}
|
|
1740
|
+
);
|
|
1741
|
+
}
|
|
1742
|
+
function InboxDetail({ children, className, ...props }) {
|
|
1743
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cx("uix-inbox__detail", className), ...props, children });
|
|
1744
|
+
}
|
|
1745
|
+
|
|
1298
1746
|
// src/components/Kanban.tsx
|
|
1299
|
-
var
|
|
1747
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
1300
1748
|
function Kanban({ children, className, ...props }) {
|
|
1301
|
-
return /* @__PURE__ */ (0,
|
|
1749
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
|
|
1302
1750
|
}
|
|
1303
1751
|
function KanbanColumn({ title, count, children, className, ...props }) {
|
|
1304
|
-
return /* @__PURE__ */ (0,
|
|
1305
|
-
(title != null || count != null) && /* @__PURE__ */ (0,
|
|
1752
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
|
|
1753
|
+
(title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "uix-kanban__head", children: [
|
|
1306
1754
|
title,
|
|
1307
|
-
count != null && /* @__PURE__ */ (0,
|
|
1755
|
+
count != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "uix-kanban__count", children: count })
|
|
1308
1756
|
] }),
|
|
1309
|
-
/* @__PURE__ */ (0,
|
|
1757
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uix-kanban__body", children })
|
|
1310
1758
|
] });
|
|
1311
1759
|
}
|
|
1312
1760
|
function KanbanCard({ title, meta, children, className, ...props }) {
|
|
1313
|
-
return /* @__PURE__ */ (0,
|
|
1314
|
-
title && /* @__PURE__ */ (0,
|
|
1315
|
-
meta && /* @__PURE__ */ (0,
|
|
1761
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
|
|
1762
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uix-kanban__card-title", children: title }),
|
|
1763
|
+
meta && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
|
|
1316
1764
|
children
|
|
1317
1765
|
] });
|
|
1318
1766
|
}
|
|
1319
1767
|
|
|
1320
1768
|
// src/components/Tree.tsx
|
|
1321
|
-
var
|
|
1322
|
-
var
|
|
1323
|
-
var ChevronIcon2 = () => /* @__PURE__ */ (0,
|
|
1769
|
+
var import_react16 = require("react");
|
|
1770
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
1771
|
+
var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M2 4l4 4 4-4" }) });
|
|
1324
1772
|
function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
|
|
1325
1773
|
const hasChildren = Array.isArray(node.children) && node.children.length > 0;
|
|
1326
1774
|
const isExpanded = expanded.has(node.id);
|
|
1327
|
-
return /* @__PURE__ */ (0,
|
|
1328
|
-
/* @__PURE__ */ (0,
|
|
1775
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { children: [
|
|
1776
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
1329
1777
|
"button",
|
|
1330
1778
|
{
|
|
1331
1779
|
className: "uix-tree__row",
|
|
@@ -1336,13 +1784,13 @@ function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
|
|
|
1336
1784
|
onSelect?.(node.id);
|
|
1337
1785
|
},
|
|
1338
1786
|
children: [
|
|
1339
|
-
/* @__PURE__ */ (0,
|
|
1340
|
-
node.icon && /* @__PURE__ */ (0,
|
|
1787
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChevronIcon2, {}) }),
|
|
1788
|
+
node.icon && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-hidden": "true", children: node.icon }),
|
|
1341
1789
|
node.label
|
|
1342
1790
|
]
|
|
1343
1791
|
}
|
|
1344
1792
|
),
|
|
1345
|
-
hasChildren && isExpanded && /* @__PURE__ */ (0,
|
|
1793
|
+
hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
1346
1794
|
TreeNode,
|
|
1347
1795
|
{
|
|
1348
1796
|
node: child,
|
|
@@ -1357,7 +1805,7 @@ function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
|
|
|
1357
1805
|
] });
|
|
1358
1806
|
}
|
|
1359
1807
|
function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }) {
|
|
1360
|
-
const [internalExpanded, setInternalExpanded] = (0,
|
|
1808
|
+
const [internalExpanded, setInternalExpanded] = (0, import_react16.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
|
|
1361
1809
|
const expanded = controlledExpanded ?? internalExpanded;
|
|
1362
1810
|
function handleToggle(id) {
|
|
1363
1811
|
if (!controlledExpanded) {
|
|
@@ -1370,7 +1818,7 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
|
|
|
1370
1818
|
}
|
|
1371
1819
|
onToggle?.(id);
|
|
1372
1820
|
}
|
|
1373
|
-
return /* @__PURE__ */ (0,
|
|
1821
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
1374
1822
|
TreeNode,
|
|
1375
1823
|
{
|
|
1376
1824
|
node,
|
|
@@ -1388,22 +1836,33 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
|
|
|
1388
1836
|
AppShell,
|
|
1389
1837
|
Avatar,
|
|
1390
1838
|
AvatarGroup,
|
|
1839
|
+
BulkBar,
|
|
1391
1840
|
Button,
|
|
1392
1841
|
ButtonGroup,
|
|
1393
1842
|
Card,
|
|
1843
|
+
CellStrong,
|
|
1844
|
+
CellSub,
|
|
1394
1845
|
Checkbox,
|
|
1395
1846
|
CommandGroup,
|
|
1396
1847
|
CommandItem,
|
|
1397
1848
|
CommandPalette,
|
|
1398
1849
|
Comment,
|
|
1399
1850
|
Comments,
|
|
1851
|
+
Composer,
|
|
1852
|
+
ComposerBar,
|
|
1400
1853
|
DescriptionItem,
|
|
1401
1854
|
DescriptionList,
|
|
1402
1855
|
DetailLayout,
|
|
1403
1856
|
Drawer,
|
|
1404
1857
|
EmptyState,
|
|
1405
1858
|
ErrorState,
|
|
1859
|
+
ExpandToggle,
|
|
1406
1860
|
Field,
|
|
1861
|
+
Highlighted,
|
|
1862
|
+
Inbox,
|
|
1863
|
+
InboxDetail,
|
|
1864
|
+
InboxItem,
|
|
1865
|
+
InboxList,
|
|
1407
1866
|
Input,
|
|
1408
1867
|
InputGroup,
|
|
1409
1868
|
Kanban,
|
|
@@ -1413,6 +1872,8 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
|
|
|
1413
1872
|
List,
|
|
1414
1873
|
ListItem,
|
|
1415
1874
|
LoadingState,
|
|
1875
|
+
Mark,
|
|
1876
|
+
Meter,
|
|
1416
1877
|
Modal,
|
|
1417
1878
|
NavFavourites,
|
|
1418
1879
|
NavGroup,
|
|
@@ -1426,6 +1887,10 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
|
|
|
1426
1887
|
Prose,
|
|
1427
1888
|
Radio,
|
|
1428
1889
|
RadioGroup,
|
|
1890
|
+
RowAction,
|
|
1891
|
+
RowActions,
|
|
1892
|
+
Segmented,
|
|
1893
|
+
SegmentedOption,
|
|
1429
1894
|
Select,
|
|
1430
1895
|
Sidebar,
|
|
1431
1896
|
SidebarSection,
|
|
@@ -1451,6 +1916,24 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
|
|
|
1451
1916
|
Tr,
|
|
1452
1917
|
Tree,
|
|
1453
1918
|
UserChip,
|
|
1919
|
+
applyFilters,
|
|
1920
|
+
clampWidth,
|
|
1454
1921
|
cx,
|
|
1455
|
-
|
|
1922
|
+
highlightSegments,
|
|
1923
|
+
matchFilter,
|
|
1924
|
+
mergePinned,
|
|
1925
|
+
multiSort,
|
|
1926
|
+
nextSortDir,
|
|
1927
|
+
parseView,
|
|
1928
|
+
reorder,
|
|
1929
|
+
searchRows,
|
|
1930
|
+
selectAllState,
|
|
1931
|
+
serializeView,
|
|
1932
|
+
shouldVirtualize,
|
|
1933
|
+
toggleId,
|
|
1934
|
+
togglePage,
|
|
1935
|
+
toggleSort,
|
|
1936
|
+
useDialog,
|
|
1937
|
+
useTable,
|
|
1938
|
+
virtualWindow
|
|
1456
1939
|
});
|