schummar-table 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/package.json +19 -17
  2. package/dist/cjs/index.js +0 -3005
  3. package/dist/cjs/index.js.map +0 -1
  4. package/dist/cjs/mui4Theme.js +0 -98
  5. package/dist/cjs/mui4Theme.js.map +0 -1
  6. package/dist/cjs/mui5Theme.js +0 -102
  7. package/dist/cjs/mui5Theme.js.map +0 -1
  8. package/dist/cjs/package.json +0 -1
  9. package/dist/cjs/tableTheme.js +0 -248
  10. package/dist/cjs/tableTheme.js.map +0 -1
  11. package/dist/es/index.js +0 -2983
  12. package/dist/es/index.js.map +0 -1
  13. package/dist/es/mui4Theme.js +0 -94
  14. package/dist/es/mui4Theme.js.map +0 -1
  15. package/dist/es/mui5Theme.js +0 -98
  16. package/dist/es/mui5Theme.js.map +0 -1
  17. package/dist/es/tableTheme.js +0 -238
  18. package/dist/es/tableTheme.js.map +0 -1
  19. package/dist/types/components/autoFocusTextField.d.ts +0 -5
  20. package/dist/types/components/cell.d.ts +0 -6
  21. package/dist/types/components/clearFiltersButton.d.ts +0 -1
  22. package/dist/types/components/columnFooter.d.ts +0 -1
  23. package/dist/types/components/columnHeader.d.ts +0 -6
  24. package/dist/types/components/columnSelection.d.ts +0 -2
  25. package/dist/types/components/dateFilter.d.ts +0 -11
  26. package/dist/types/components/dateInput.d.ts +0 -5
  27. package/dist/types/components/datePicker.d.ts +0 -25
  28. package/dist/types/components/expandControl.d.ts +0 -6
  29. package/dist/types/components/export.d.ts +0 -2
  30. package/dist/types/components/filterControl.d.ts +0 -3
  31. package/dist/types/components/formControlLabel.d.ts +0 -6
  32. package/dist/types/components/resizeHandle.d.ts +0 -5
  33. package/dist/types/components/row.d.ts +0 -7
  34. package/dist/types/components/selectComponent.d.ts +0 -5
  35. package/dist/types/components/selectFilter.d.ts +0 -12
  36. package/dist/types/components/sortComponent.d.ts +0 -4
  37. package/dist/types/components/spinnner.d.ts +0 -3
  38. package/dist/types/components/table.d.ts +0 -9
  39. package/dist/types/components/textFilter.d.ts +0 -8
  40. package/dist/types/components/virtualized.d.ts +0 -7
  41. package/dist/types/hooks/useFilter.d.ts +0 -7
  42. package/dist/types/hooks/useMemoMap.d.ts +0 -2
  43. package/dist/types/hooks/useTableMemo.d.ts +0 -6
  44. package/dist/types/hooks/useTheme.d.ts +0 -2
  45. package/dist/types/index.d.ts +0 -13
  46. package/dist/types/internalState/calcItems.d.ts +0 -3
  47. package/dist/types/internalState/calcProps.d.ts +0 -2
  48. package/dist/types/internalState/cleanupState.d.ts +0 -3
  49. package/dist/types/internalState/filterColumns.d.ts +0 -3
  50. package/dist/types/internalState/normalizeExpanded.d.ts +0 -3
  51. package/dist/types/internalState/syncSelections.d.ts +0 -3
  52. package/dist/types/internalState/tableStateStorage.d.ts +0 -13
  53. package/dist/types/internalState/useTableState.d.ts +0 -3
  54. package/dist/types/misc/csvExport.d.ts +0 -7
  55. package/dist/types/misc/debounce.d.ts +0 -4
  56. package/dist/types/misc/helpers.d.ts +0 -16
  57. package/dist/types/misc/queue.d.ts +0 -7
  58. package/dist/types/misc/textMatch.d.ts +0 -2
  59. package/dist/types/misc/throttle.d.ts +0 -5
  60. package/dist/types/theme/defaultTheme/badge.d.ts +0 -2
  61. package/dist/types/theme/defaultTheme/button.d.ts +0 -2
  62. package/dist/types/theme/defaultTheme/checkbox.d.ts +0 -2
  63. package/dist/types/theme/defaultTheme/defaultClasses.d.ts +0 -19
  64. package/dist/types/theme/defaultTheme/defaultColors.d.ts +0 -2
  65. package/dist/types/theme/defaultTheme/defaultComponents.d.ts +0 -2
  66. package/dist/types/theme/defaultTheme/defaultIcons.d.ts +0 -2
  67. package/dist/types/theme/defaultTheme/defaultTexts.d.ts +0 -2
  68. package/dist/types/theme/defaultTheme/iconButton.d.ts +0 -2
  69. package/dist/types/theme/defaultTheme/index.d.ts +0 -2
  70. package/dist/types/theme/defaultTheme/popover.d.ts +0 -7
  71. package/dist/types/theme/defaultTheme/textField.d.ts +0 -2
  72. package/dist/types/theme/mui4Theme/index.d.ts +0 -7
  73. package/dist/types/theme/mui5Theme/index.d.ts +0 -7
  74. package/dist/types/theme/tableTheme.d.ts +0 -10
  75. package/dist/types/theme/useCssVariables.d.ts +0 -9
  76. package/dist/types/types.d.ts +0 -330
package/dist/cjs/index.js DELETED
@@ -1,3005 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __defProps = Object.defineProperties;
4
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
8
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
9
- var __spreadValues = (a, b) => {
10
- for (var prop in b || (b = {}))
11
- if (__hasOwnProp.call(b, prop))
12
- __defNormalProp(a, prop, b[prop]);
13
- if (__getOwnPropSymbols)
14
- for (var prop of __getOwnPropSymbols(b)) {
15
- if (__propIsEnum.call(b, prop))
16
- __defNormalProp(a, prop, b[prop]);
17
- }
18
- return a;
19
- };
20
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
- var __objRest = (source, exclude) => {
22
- var target = {};
23
- for (var prop in source)
24
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
25
- target[prop] = source[prop];
26
- if (source != null && __getOwnPropSymbols)
27
- for (var prop of __getOwnPropSymbols(source)) {
28
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
29
- target[prop] = source[prop];
30
- }
31
- return target;
32
- };
33
- Object.defineProperty(exports, "__esModule", { value: true });
34
- exports[Symbol.toStringTag] = "Module";
35
- var react = require("react");
36
- var react$1 = require("schummar-state/react");
37
- var tableTheme = require("./tableTheme.js");
38
- var jsxRuntime = require("@emotion/react/jsx-runtime");
39
- var dayzed = require("dayzed");
40
- var immer = require("immer");
41
- var react$2 = require("@emotion/react");
42
- require("react-dom");
43
- const TableMemoContext = react.createContext(/* @__PURE__ */ new Map());
44
- function TableMemoContextProvider({
45
- children
46
- }) {
47
- return /* @__PURE__ */ jsxRuntime.jsx(TableMemoContext.Provider, {
48
- value: react.useMemo(() => /* @__PURE__ */ new Map(), []),
49
- children
50
- });
51
- }
52
- function useTableMemo() {
53
- const memoCache = react.useContext(TableMemoContext);
54
- return (key, fn) => {
55
- let deps;
56
- if (Array.isArray(fn)) {
57
- deps = fn.slice(1);
58
- fn = fn[0];
59
- } else {
60
- deps = [fn.toString()];
61
- }
62
- let cachedValue = memoCache.get(key);
63
- const hit = cachedValue && cachedValue[1].length === deps.length && cachedValue[1].every((x, i) => x === deps[i]);
64
- if (!cachedValue || !hit) {
65
- cachedValue = [fn, deps];
66
- memoCache.set(key, cachedValue);
67
- }
68
- return cachedValue[0];
69
- };
70
- }
71
- class Queue {
72
- constructor() {
73
- this.q = new Array();
74
- this.isRunning = false;
75
- }
76
- run(job, replace) {
77
- return new Promise((resolve, reject) => {
78
- if (replace) {
79
- this.q = [];
80
- }
81
- this.q.push({ job, resolve, reject });
82
- if (!this.isRunning)
83
- this.start();
84
- });
85
- }
86
- clear() {
87
- this.q = [];
88
- }
89
- async start() {
90
- this.isRunning = true;
91
- let next;
92
- while (next = this.q.shift()) {
93
- try {
94
- const result = await next.job();
95
- next.resolve(result);
96
- } catch (e) {
97
- next.reject(e);
98
- }
99
- }
100
- this.isRunning = false;
101
- }
102
- }
103
- const KEYS = ["sort", "selection", "expanded", "hiddenColumns", "filterValues", "columnWidths", "columnOrder"];
104
- const storageName = (id) => `schummar-table_state-v1_${id}`;
105
- function stringify(value) {
106
- function prepare(value2) {
107
- if (value2 instanceof Date) {
108
- return { __date: value2.toJSON() };
109
- }
110
- if (value2 instanceof Set) {
111
- return { __set: Array.from(value2).map(prepare) };
112
- }
113
- if (value2 instanceof Map) {
114
- return { __map: Array.from(value2.entries()).map((entry) => entry.map(prepare)) };
115
- }
116
- if (value2 instanceof Array) {
117
- return value2.map(prepare);
118
- }
119
- if (value2 instanceof Object) {
120
- return Object.fromEntries(Object.entries(value2).map(([k, v]) => [k, prepare(v)]));
121
- }
122
- return value2;
123
- }
124
- return JSON.stringify(prepare(value));
125
- }
126
- function parse(value) {
127
- return JSON.parse(value, (_key, value2) => {
128
- if (value2 instanceof Object && "__date" in value2) {
129
- return new Date(value2.__date);
130
- }
131
- if (value2 instanceof Object && "__set" in value2) {
132
- return new Set(value2.__set);
133
- }
134
- if (value2 instanceof Object && "__map" in value2) {
135
- return new Map(value2.__map);
136
- }
137
- return value2;
138
- });
139
- }
140
- function useTableStateStorage(table) {
141
- const [isHydrated, setIsHydrated] = react.useState(false);
142
- const [q] = react.useState(() => new Queue());
143
- react.useEffect(() => {
144
- const { persist } = table.getState().props;
145
- if (!persist) {
146
- setIsHydrated(true);
147
- return;
148
- }
149
- let isCanceled = false;
150
- (async () => {
151
- var _a, _b;
152
- try {
153
- const { storage, id, include, exclude } = persist;
154
- const json = await storage.getItem(storageName(id));
155
- if (isCanceled || !json)
156
- return;
157
- const data = parse(json);
158
- (_b = (_a = table.getState().props).debug) == null ? void 0 : _b.call(_a, "load", json, data);
159
- table.update((state) => {
160
- var _a2, _b2, _c, _d;
161
- for (const key of KEYS) {
162
- if ((!include || include.includes(key)) && !(exclude == null ? void 0 : exclude.includes(key)) && key in data) {
163
- if (key === "filterValues") {
164
- for (const [id2, value] of data[key]) {
165
- if ((_b2 = (_a2 = state.filters.get(id2)) == null ? void 0 : _a2.persist) != null ? _b2 : true) {
166
- state.filterValues.set(id2, value);
167
- }
168
- }
169
- } else {
170
- state[key] = data[key];
171
- if (key === "expanded" || key === "hiddenColumns" || key === "selection" || key === "sort") {
172
- (_d = (_c = state.props)[`on${key.slice(0, 1).toUpperCase() + key.slice(1)}Change`]) == null ? void 0 : _d.call(_c, data[key]);
173
- }
174
- }
175
- }
176
- }
177
- });
178
- } catch (e) {
179
- console.error("Failed to load table state:", e);
180
- } finally {
181
- setIsHydrated(true);
182
- }
183
- })();
184
- return () => {
185
- isCanceled = true;
186
- };
187
- }, []);
188
- react.useEffect(() => {
189
- if (!isHydrated)
190
- return;
191
- return table.subscribe((state) => {
192
- var _a, _b;
193
- if (!state.props.persist)
194
- return;
195
- const { storage, id, include, exclude } = state.props.persist;
196
- const data = {};
197
- for (const key of KEYS) {
198
- if ((!include || include.includes(key)) && !(exclude == null ? void 0 : exclude.includes(key))) {
199
- if (key === "filterValues") {
200
- data[key] = /* @__PURE__ */ new Map();
201
- for (const [id2, value] of state.filterValues) {
202
- if ((_b = (_a = state.filters.get(id2)) == null ? void 0 : _a.persist) != null ? _b : true) {
203
- data.filterValues.set(id2, value);
204
- }
205
- }
206
- } else {
207
- data[key] = state[key];
208
- }
209
- }
210
- }
211
- return { storage, id, data };
212
- }, (props) => {
213
- var _a, _b;
214
- if (!props)
215
- return;
216
- const { storage, id, data } = props;
217
- (_b = (_a = table.getState().props).debug) == null ? void 0 : _b.call(_a, "save", data, stringify(data));
218
- q.run(async () => {
219
- await storage.setItem(storageName(id), stringify(data));
220
- }, true);
221
- }, { throttle: 1e3 });
222
- }, [isHydrated]);
223
- async function clear() {
224
- await q.run(async () => {
225
- const persist = table.getState().props.persist;
226
- if (!persist) {
227
- return;
228
- }
229
- const { storage } = persist;
230
- const keys = "keys" in storage ? await storage.keys() : await Promise.all(Array(storage.length).fill(0).map((_x, i) => storage.key(i)));
231
- for (const key of keys) {
232
- if (key !== null) {
233
- await storage.removeItem(key);
234
- }
235
- }
236
- q.clear();
237
- });
238
- }
239
- return [isHydrated, clear];
240
- }
241
- const flatMap = (arr, flatMap2) => {
242
- return [...arr].reduce((out, cur) => out.concat(flatMap2(cur)), []);
243
- };
244
- const orderBy = (arr, selectors = [], direction = []) => {
245
- if (selectors.length === 0)
246
- selectors = [(t) => t];
247
- return [...arr].sort((a, b) => {
248
- var _a, _b;
249
- for (let i = 0; i < selectors.length; i++) {
250
- const _a2 = (_a = selectors[i]) == null ? void 0 : _a.call(selectors, a);
251
- const _b2 = (_b = selectors[i]) == null ? void 0 : _b.call(selectors, b);
252
- const dir = direction[i] === "desc" ? -1 : 1;
253
- if (_a2 > _b2)
254
- return dir;
255
- if (_a2 < _b2)
256
- return -dir;
257
- }
258
- return 0;
259
- });
260
- };
261
- const uniq = (arr) => {
262
- const set = /* @__PURE__ */ new Set();
263
- for (const t of arr)
264
- set.add(t);
265
- return Array.from(set);
266
- };
267
- const intersect = (a, b) => {
268
- const result = /* @__PURE__ */ new Set();
269
- for (const x of a)
270
- if (b.has(x))
271
- result.add(x);
272
- return result;
273
- };
274
- const getAncestors = (activeItemsById, ...items) => {
275
- const result = /* @__PURE__ */ new Set();
276
- const find = ({ parentId }) => {
277
- const parent = parentId ? activeItemsById.get(parentId) : void 0;
278
- if (parent && !result.has(parent.id)) {
279
- result.add(parent.id);
280
- find(parent);
281
- }
282
- };
283
- items.forEach(find);
284
- return result;
285
- };
286
- const getDescendants = (...items) => {
287
- const result = /* @__PURE__ */ new Set();
288
- const find = (item) => {
289
- for (const child of item.children) {
290
- if (!result.has(child.id)) {
291
- result.add(child.id);
292
- find(child);
293
- }
294
- }
295
- };
296
- items.forEach(find);
297
- return result;
298
- };
299
- const asString = (x) => {
300
- if (x instanceof Array)
301
- return x.map(asString).join(", ");
302
- if (x instanceof Object)
303
- return JSON.stringify(x);
304
- return String(x != null ? x : "");
305
- };
306
- const asStringOrArray = (x) => {
307
- if (x instanceof Array)
308
- return x.map(asString);
309
- return asString(x);
310
- };
311
- const castArray = (a) => a instanceof Array ? a : [a];
312
- const cx = (...classNames) => classNames.flatMap((entry) => {
313
- if (!entry)
314
- return [];
315
- if (typeof entry === "string")
316
- return [entry];
317
- return Object.entries(entry).filter(([, predicate]) => predicate).map(([className2]) => className2);
318
- }).join(" ");
319
- function calcItems(state) {
320
- react.useEffect(() => state.addReaction((state2) => [
321
- state2.props.items,
322
- state2.props.id,
323
- state2.props.parentId,
324
- state2.props.revealFiltered,
325
- state2.sort,
326
- state2.filters,
327
- state2.filterValues,
328
- state2.activeColumns,
329
- state2.expanded
330
- ], ([items = [], id, parentId, revealFiltered, sort, filters, filterValues, activeColumns], draft) => {
331
- const tableItems = items.map((item) => ({
332
- id: id(item),
333
- parentId: parentId == null ? void 0 : parentId(item),
334
- children: [],
335
- value: item
336
- }));
337
- let sorted;
338
- if (sort.length === 0) {
339
- sorted = tableItems;
340
- } else {
341
- const selectors = flatMap(sort, (sort2) => {
342
- const column = activeColumns.find((column2) => column2.id === sort2.columnId);
343
- if (!column)
344
- return [];
345
- return column.sortBy.map((sortBy) => ({
346
- selector: (item) => sortBy(column.value(item), item),
347
- direction: sort2.direction
348
- }));
349
- }).filter(Boolean);
350
- sorted = orderBy(tableItems, selectors.map((x) => (item) => x.selector(item.value)), selectors.map((x) => x.direction));
351
- }
352
- const lookup = /* @__PURE__ */ new Map();
353
- for (const item of sorted) {
354
- lookup.set(item.id, item);
355
- }
356
- for (const item of sorted) {
357
- const parent = item.parentId !== void 0 ? lookup.get(item.parentId) : void 0;
358
- parent == null ? void 0 : parent.children.push(item);
359
- }
360
- const allItems = new Array();
361
- const allItemsById = /* @__PURE__ */ new Map();
362
- const traverse = (items2) => {
363
- for (const item of items2) {
364
- allItems.push(item);
365
- allItemsById.set(item.id, item);
366
- traverse(item.children);
367
- }
368
- };
369
- traverse(sorted.filter((item) => item.parentId === void 0));
370
- let expandedChanged = false;
371
- const activeItemsById = /* @__PURE__ */ new Map();
372
- const activeSet = /* @__PURE__ */ new Set();
373
- const activeItems = [...allItems].reverse().filter((item) => {
374
- let isActive = activeSet.has(item.id);
375
- isActive || (isActive = activeColumns.every((column) => {
376
- var _a;
377
- const filter = filters.get(column.id);
378
- if (!filter)
379
- return true;
380
- const filterValue = filterValues.get(column.id);
381
- if (filterValue === void 0 || !filter.isActive(filterValue))
382
- return true;
383
- const filterBy = (_a = filter.filterBy) != null ? _a : (x) => x;
384
- const value = filterBy(column.value(item.value), item.value);
385
- return castArray(value).some((value2) => filter.test(filterValue, value2));
386
- }));
387
- if (isActive && item.parentId !== void 0) {
388
- if (revealFiltered && Array.from(filters.entries()).some(([id2, filter]) => {
389
- const filterValue = filterValues.get(id2);
390
- return !!filter && filterValue !== void 0 && filter.isActive(filterValue);
391
- })) {
392
- expandedChanged || (expandedChanged = !draft.expanded.has(item.parentId));
393
- draft.expanded.add(item.parentId);
394
- } else if (!draft.expanded.has(item.parentId)) {
395
- isActive = false;
396
- }
397
- }
398
- if (isActive && item.parentId !== void 0) {
399
- activeSet.add(item.parentId);
400
- }
401
- if (isActive) {
402
- activeItemsById.set(item.id, item);
403
- }
404
- return isActive;
405
- }).reverse();
406
- draft.items = immer.castDraft(allItems);
407
- draft.itemsById = immer.castDraft(allItemsById);
408
- draft.activeItems = immer.castDraft(activeItems);
409
- draft.activeItemsById = immer.castDraft(activeItemsById);
410
- if (expandedChanged) {
411
- setTimeout(() => {
412
- var _a, _b;
413
- (_b = (_a = state.getState().props).onExpandedChange) == null ? void 0 : _b.call(_a, state.getState().expanded);
414
- });
415
- }
416
- }, { runNow: true }), [state]);
417
- }
418
- const noopParentId = () => void 0;
419
- function calcProps(props) {
420
- const cache = useTableMemo();
421
- return react.useMemo(() => {
422
- var _f, _g, _h, _i, _j, _k, _l, _m;
423
- let id;
424
- if (props.id instanceof Function || Array.isArray(props.id)) {
425
- id = cache("id", props.id);
426
- } else {
427
- id = cache("id", [(item) => item[props.id], props.id]);
428
- }
429
- let parentId;
430
- if (props.parentId instanceof Function || Array.isArray(props.parentId)) {
431
- parentId = cache("parentId", props.parentId);
432
- } else if (props.parentId !== void 0) {
433
- parentId = cache("parentId", [(item) => item[props.parentId], props.parentId]);
434
- } else {
435
- parentId = noopParentId;
436
- }
437
- let inputColumns;
438
- if (props.columns instanceof Function) {
439
- inputColumns = props.columns((value, column) => __spreadProps(__spreadValues({}, column), { value }));
440
- } else {
441
- inputColumns = props.columns.map((column) => __spreadProps(__spreadValues({}, column), { dependecies: void 0 }));
442
- }
443
- const defCol = props.defaultColumnProps;
444
- const mapColumn = ({
445
- id: _id,
446
- header = ((_a) => (_a = defCol == null ? void 0 : defCol.header) != null ? _a : null)(),
447
- footer = ((_b) => (_b = defCol == null ? void 0 : defCol.footer) != null ? _b : null)(),
448
- value,
449
- renderCell = ((_c) => (_c = defCol == null ? void 0 : defCol.renderCell) != null ? _c : asString)(),
450
- exportCell = ((_d) => (_d = defCol == null ? void 0 : defCol.exportCell) != null ? _d : asString)(),
451
- sortBy = ((_e) => (_e = defCol == null ? void 0 : defCol.sortBy) != null ? _e : [(v) => typeof v === "number" || v instanceof Date ? v : String(v)])(),
452
- cannotHide = defCol == null ? void 0 : defCol.cannotHide,
453
- classes = defCol == null ? void 0 : defCol.classes,
454
- filter = defCol == null ? void 0 : defCol.filter,
455
- width = defCol == null ? void 0 : defCol.width
456
- }, index) => {
457
- const id2 = _id != null ? _id : index;
458
- const cacheKey = typeof id2 === "string" ? `s${id2}` : `n${id2}`;
459
- return {
460
- id: id2,
461
- header: header instanceof Function ? cache(`columns.${cacheKey}.header`, header) : header,
462
- footer: footer instanceof Function ? cache(`columns.${cacheKey}.footer`, footer) : footer,
463
- value: cache(`columns.${cacheKey}.value`, value),
464
- renderCell: cache(`columns.${cacheKey}.renderCell`, renderCell),
465
- exportCell,
466
- sortBy: sortBy.map((fn, i) => cache(`columns.${cacheKey}.sortBy.${i}`, fn)),
467
- cannotHide,
468
- classes,
469
- filter,
470
- width
471
- };
472
- };
473
- const columns = inputColumns.map(mapColumn);
474
- const wrapCell = props.wrapCell && cache("wrapCell", props.wrapCell);
475
- const rowAction = props.rowAction instanceof Function || Array.isArray(props.rowAction) ? cache("rowAction", props.rowAction) : props.rowAction;
476
- let copy;
477
- if (props.enableExport === true || props.enableExport instanceof Object && props.enableExport.copy === true) {
478
- copy = { separator: " " };
479
- } else if (props.enableExport && props.enableExport.copy instanceof Object) {
480
- copy = props.enableExport.copy;
481
- }
482
- let download;
483
- if (props.enableExport === true || props.enableExport instanceof Object && props.enableExport.download === true) {
484
- download = { sepPrefix: true };
485
- } else if (props.enableExport && props.enableExport.download instanceof Object) {
486
- download = props.enableExport.download;
487
- }
488
- const enableExport = { copy, download };
489
- return __spreadProps(__spreadValues({}, props), {
490
- id,
491
- parentId,
492
- columns,
493
- wrapCell,
494
- rowAction,
495
- enableSelection: (_f = props.enableSelection) != null ? _f : true,
496
- selectSyncChildren: (_g = props.selectSyncChildren) != null ? _g : true,
497
- stickyHeader: (_h = props.stickyHeader) != null ? _h : true,
498
- stickyFooter: (_i = props.stickyFooter) != null ? _i : true,
499
- enableExport,
500
- enableColumnSelection: (_j = props.enableColumnSelection) != null ? _j : true,
501
- enableClearFiltersButton: (_k = props.enableClearFiltersButton) != null ? _k : false,
502
- enableColumnResize: (_l = props.enableColumnResize) != null ? _l : true,
503
- enableColumnReorder: (_m = props.enableColumnReorder) != null ? _m : true
504
- });
505
- }, [props]);
506
- }
507
- function cleanupState(state) {
508
- react.useEffect(() => state.addReaction((state2) => [state2.props.columns, state2.itemsById, state2.activeItemsById, state2.activeColumns], ([columns, itemsById, activeItemsById, activeColumns], draft) => {
509
- const columnIds = new Set(columns.map((column) => column.id));
510
- const activeColumnIds = new Set(activeColumns.map((column) => column.id));
511
- const newSort = draft.sort.filter((s) => activeColumnIds.has(s.columnId));
512
- if (newSort.length < draft.sort.length) {
513
- draft.sort = newSort;
514
- setTimeout(() => {
515
- var _a, _b;
516
- (_b = (_a = state.getState().props).onSortChange) == null ? void 0 : _b.call(_a, newSort);
517
- });
518
- }
519
- for (const id of draft.filters.keys()) {
520
- if (!activeColumnIds.has(id))
521
- draft.filters.delete(id);
522
- }
523
- for (const id of draft.filterValues.keys()) {
524
- if (!activeColumnIds.has(id))
525
- draft.filterValues.delete(id);
526
- }
527
- for (const id of draft.hiddenColumns.keys()) {
528
- if (!columnIds.has(id))
529
- draft.hiddenColumns.delete(id);
530
- }
531
- for (const id of draft.columnWidths.keys()) {
532
- if (!columnIds.has(id))
533
- draft.columnWidths.delete(id);
534
- }
535
- for (const id of draft.columnOrder) {
536
- if (!columnIds.has(id))
537
- draft.columnOrder = draft.columnOrder.filter((x) => x !== id);
538
- }
539
- if (draft.props.items) {
540
- const newSelection = intersect(draft.selection, activeItemsById);
541
- if (newSelection.size !== draft.selection.size) {
542
- draft.selection = newSelection;
543
- setTimeout(() => {
544
- var _a, _b;
545
- (_b = (_a = state.getState().props).onSelectionChange) == null ? void 0 : _b.call(_a, newSelection);
546
- });
547
- }
548
- const newExpanded = intersect(draft.expanded, itemsById);
549
- if (newExpanded.size < draft.expanded.size) {
550
- draft.expanded = newExpanded;
551
- setTimeout(() => {
552
- var _a, _b;
553
- (_b = (_a = state.getState().props).onExpandedChange) == null ? void 0 : _b.call(_a, newExpanded);
554
- });
555
- }
556
- }
557
- }, { runNow: true }), [state]);
558
- }
559
- function filterColumns(state) {
560
- react.useEffect(() => state.addReaction((state2) => [state2.props.columns, state2.hiddenColumns, state2.columnOrder], ([columns, hiddenColumns, columnOrder], draft) => {
561
- draft.activeColumns = orderBy(columns.filter((column) => !hiddenColumns.has(column.id)), [(column) => columnOrder.indexOf(column.id)]);
562
- }, { runNow: true }), [state]);
563
- }
564
- function normalizeExpanded(table) {
565
- react.useEffect(() => table.addReaction((state) => [state.props.expandOnlyOne, state.expanded, state.itemsById], ([expandOnlyOne, , itemsById], state) => {
566
- var _a, _b, _c, _d, _e;
567
- let expanded = state.expanded;
568
- let hasChanged = false;
569
- const allAncestors = [...expanded].map((id) => {
570
- const item = itemsById.get(id);
571
- return {
572
- id,
573
- ancestors: item ? getAncestors(itemsById, item) : /* @__PURE__ */ new Set()
574
- };
575
- });
576
- if (expandOnlyOne) {
577
- const withMostAncestors = orderBy(allAncestors, [(x) => x.ancestors.size], ["desc"])[0];
578
- if ([...expanded].some((id) => id !== (withMostAncestors == null ? void 0 : withMostAncestors.id) && !(withMostAncestors == null ? void 0 : withMostAncestors.ancestors.has(id)))) {
579
- expanded = state.expanded = (_a = withMostAncestors == null ? void 0 : withMostAncestors.ancestors) != null ? _a : /* @__PURE__ */ new Set();
580
- (_c = (_b = state.props).onExpandedChange) == null ? void 0 : _c.call(_b, expanded);
581
- return;
582
- }
583
- }
584
- for (const { ancestors } of allAncestors) {
585
- for (const ancestor of ancestors != null ? ancestors : []) {
586
- if (!expanded.has(ancestor)) {
587
- expanded.add(ancestor);
588
- hasChanged = true;
589
- }
590
- }
591
- }
592
- if (hasChanged) {
593
- (_e = (_d = state.props).onExpandedChange) == null ? void 0 : _e.call(_d, new Set(expanded));
594
- }
595
- }, { runNow: true }), [table]);
596
- }
597
- function syncSelections(table) {
598
- react.useEffect(() => table.addReaction((state) => [state.props.selectSyncChildren, state.selection, state.activeItems], ([selectSyncChildren, selection, activeItems], state) => {
599
- if (!selectSyncChildren)
600
- return;
601
- const newSelection = new Set(selection);
602
- for (const item of activeItems) {
603
- if (item.parentId !== void 0 && newSelection.has(item.parentId)) {
604
- newSelection.add(item.id);
605
- }
606
- }
607
- if (newSelection.size !== selection.size) {
608
- state.selection = newSelection;
609
- setTimeout(() => {
610
- var _a, _b;
611
- (_b = (_a = table.getState().props).onSelectionChange) == null ? void 0 : _b.call(_a, newSelection);
612
- });
613
- }
614
- }, { runNow: true }), [table]);
615
- }
616
- function useTableState(_props) {
617
- const [key, setKey] = react.useState({});
618
- const props = calcProps(_props);
619
- function reset() {
620
- setKey({});
621
- }
622
- const state = react.useMemo(() => {
623
- var _a, _b, _c, _d;
624
- return new react$1.Store({
625
- props,
626
- sort: (_a = props.defaultSort) != null ? _a : [],
627
- selection: (_b = props.defaultSelection) != null ? _b : /* @__PURE__ */ new Set(),
628
- expanded: (_c = props.defaultExpanded) != null ? _c : /* @__PURE__ */ new Set(),
629
- rowHeights: /* @__PURE__ */ new Map(),
630
- filters: /* @__PURE__ */ new Map(),
631
- filterValues: /* @__PURE__ */ new Map(),
632
- hiddenColumns: (_d = props.defaultHiddenColumns) != null ? _d : /* @__PURE__ */ new Set(),
633
- columnWidths: /* @__PURE__ */ new Map(),
634
- columnOrder: props.columns.map((column) => column.id),
635
- columnStyleOverride: /* @__PURE__ */ new Map(),
636
- activeColumns: [],
637
- items: [],
638
- itemsById: /* @__PURE__ */ new Map(),
639
- activeItems: [],
640
- activeItemsById: /* @__PURE__ */ new Map(),
641
- lastSelectedId: void 0
642
- });
643
- }, [key]);
644
- filterColumns(state);
645
- calcItems(state);
646
- normalizeExpanded(state);
647
- syncSelections(state);
648
- cleanupState(state);
649
- react.useEffect(() => {
650
- state.update((state2) => {
651
- state2.props = immer.castDraft(props);
652
- if (props.sort)
653
- state2.sort = props.sort;
654
- if (props.selection)
655
- state2.selection = props.selection;
656
- if (props.expanded)
657
- state2.expanded = props.expanded;
658
- if (props.hiddenColumns)
659
- state2.hiddenColumns = props.hiddenColumns;
660
- for (const column of props.columns) {
661
- if (!state2.columnOrder.includes(column.id)) {
662
- const index = props.columns.indexOf(column);
663
- state2.columnOrder.splice(index, 0, column.id);
664
- }
665
- }
666
- });
667
- }, [state, props]);
668
- return [state, reset];
669
- }
670
- function useCssVariables() {
671
- return useTheme(({ spacing, colors }) => ({
672
- "--spacing": spacing,
673
- "--primaryMain": colors.primary.main,
674
- "--primaryLight": colors.primary.light,
675
- "--primaryContrastText": colors.primary.contrastText,
676
- "--secondaryMain": colors.secondary.main,
677
- "--secondaryLight": colors.secondary.light,
678
- "--secondaryContrastText": colors.secondary.contrastText
679
- }));
680
- }
681
- function ClearFiltersButton() {
682
- const Button2 = useTheme((t) => t.components.Button);
683
- const textClearFilters = useTheme((t) => t.text.clearFilters);
684
- const table = useTableContext();
685
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
686
- css: tableTheme.defaultClasses.clearFiltersButton,
687
- children: /* @__PURE__ */ jsxRuntime.jsx(Button2, {
688
- variant: "outlined",
689
- onClick: () => {
690
- table.update((state) => {
691
- state.activeColumns.forEach((column) => {
692
- state.filterValues.delete(column.id);
693
- });
694
- });
695
- },
696
- children: textClearFilters
697
- })
698
- });
699
- }
700
- function ColumnFooter() {
701
- const table = useTableContext();
702
- const columnId = useColumnContext();
703
- const stickyFooter = table.useState("props.stickyFooter");
704
- const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
705
- throttle: 16
706
- });
707
- const columnClasses = table.useState((state) => {
708
- var _a;
709
- return (_a = state.activeColumns.find((column) => column.id === columnId)) == null ? void 0 : _a.classes;
710
- });
711
- const classes = useTheme((theme) => theme.classes);
712
- const content = table.useState((state) => {
713
- const column = state.activeColumns.find((column2) => column2.id === columnId);
714
- if ((column == null ? void 0 : column.footer) instanceof Function) {
715
- const items = state.activeItems;
716
- const values = items.map((item) => column == null ? void 0 : column.value(item.value));
717
- return column == null ? void 0 : column.footer(values, items);
718
- }
719
- return column == null ? void 0 : column.footer;
720
- });
721
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
722
- className: cx(classes == null ? void 0 : classes.footerCell, columnClasses == null ? void 0 : columnClasses.footerCell),
723
- css: [tableTheme.defaultClasses.footerCell, columnStyleOverride, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter],
724
- children: content
725
- });
726
- }
727
- const FilterControlContext = react.createContext(() => void 0);
728
- function FilterControl() {
729
- const table = useTableContext();
730
- const columnId = useColumnContext();
731
- const IconButton2 = useTheme((t) => t.components.IconButton);
732
- const Popover = useTheme((t) => t.components.Popover);
733
- const FilterList2 = useTheme((t) => t.icons.FilterList);
734
- const ArrowDropDown2 = useTheme((t) => t.icons.ArrowDropDown);
735
- const cssVariables = useCssVariables();
736
- const [anchor, setAnchor] = react.useState(null);
737
- const isActive = table.useState((state) => {
738
- const filter2 = state.filters.get(columnId);
739
- const filterValue = state.filterValues.get(columnId);
740
- return filter2 !== void 0 && filterValue !== void 0 && filter2.isActive(filterValue);
741
- });
742
- const filter = table.useState((state) => {
743
- var _a;
744
- return (_a = state.activeColumns.find((column) => column.id === columnId)) == null ? void 0 : _a.filter;
745
- });
746
- function reset() {
747
- table.update((state) => {
748
- state.filterValues.delete(columnId);
749
- });
750
- }
751
- const close = react.useCallback(function() {
752
- setAnchor(null);
753
- }, []);
754
- if (!filter)
755
- return null;
756
- return /* @__PURE__ */ jsxRuntime.jsxs(FilterControlContext.Provider, {
757
- value: close,
758
- children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
759
- onClick: (e) => setAnchor(e.currentTarget),
760
- onContextMenu: (e) => {
761
- reset();
762
- e.preventDefault();
763
- return false;
764
- },
765
- children: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, {
766
- css: [{
767
- color: "#b0bac9"
768
- }, isActive && {
769
- color: "var(--primaryMain) !important"
770
- }],
771
- children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(FilterList2, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDropDown2, {})
772
- })
773
- }), /* @__PURE__ */ jsxRuntime.jsx("div", {
774
- onPointerDown: (e) => {
775
- e.stopPropagation();
776
- },
777
- onPointerMove: (e) => {
778
- e.stopPropagation();
779
- },
780
- children: /* @__PURE__ */ jsxRuntime.jsx(Popover, {
781
- open: true,
782
- hidden: !anchor,
783
- onClose: () => setAnchor(null),
784
- anchorEl: anchor != null ? anchor : document.body,
785
- css: cssVariables,
786
- children: filter
787
- })
788
- })]
789
- });
790
- }
791
- function ResizeHandle() {
792
- const table = useTableContext();
793
- const columnId = useColumnContext();
794
- const enabled = table.useState("props.enableColumnResize");
795
- function onPointerDown(e) {
796
- e.stopPropagation();
797
- const div = e.target;
798
- div.setPointerCapture(e.pointerId);
799
- }
800
- function onPointerMove(e) {
801
- e.stopPropagation();
802
- const div = e.target;
803
- if (!div.hasPointerCapture(e.pointerId))
804
- return;
805
- const parent = div.parentElement;
806
- const width = Math.max(e.clientX - parent.getBoundingClientRect().left + 5, 50);
807
- table.update((state) => {
808
- state.columnWidths.set(columnId, `${width}px`);
809
- });
810
- }
811
- function onPointerUp(e) {
812
- e.stopPropagation();
813
- const div = e.target;
814
- div.releasePointerCapture(e.pointerId);
815
- }
816
- function onDoubleClick(e) {
817
- table.update((state) => {
818
- if (e.getModifierState("Control")) {
819
- state.columnWidths.delete(columnId);
820
- } else {
821
- state.columnWidths.set(columnId, "max-content");
822
- }
823
- });
824
- }
825
- return /* @__PURE__ */ jsxRuntime.jsx(ResizeHandleView, {
826
- enabled,
827
- onPointerDown: enabled ? onPointerDown : void 0,
828
- onPointerMove: enabled ? onPointerMove : void 0,
829
- onPointerUp: enabled ? onPointerUp : void 0,
830
- onDoubleClick: enabled ? onDoubleClick : void 0
831
- });
832
- }
833
- function ResizeHandleView(_a) {
834
- var _b = _a, {
835
- enabled
836
- } = _b, props = __objRest(_b, [
837
- "enabled"
838
- ]);
839
- return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({
840
- css: {
841
- alignSelf: "stretch",
842
- padding: "0 5px",
843
- cursor: enabled ? "col-resize" : "initial",
844
- display: "flex",
845
- alignItems: "center",
846
- "&:after": {
847
- content: '""',
848
- width: 1,
849
- height: "1.5em",
850
- background: "#c9cfda",
851
- transition: "transform 300ms"
852
- }
853
- }
854
- }, props));
855
- }
856
- function SortComponent({
857
- children
858
- }) {
859
- const table = useTableContext();
860
- const columnId = useColumnContext();
861
- const Badge2 = useTheme((t) => t.components.Badge);
862
- const ArrowUpward2 = useTheme((t) => t.icons.ArrowUpward);
863
- const {
864
- direction,
865
- index
866
- } = table.useState((state) => {
867
- var _a, _b;
868
- const index2 = (_a = state.sort.findIndex((s) => s.columnId === columnId)) != null ? _a : -1;
869
- return {
870
- direction: (_b = state.sort[index2]) == null ? void 0 : _b.direction,
871
- index: index2 >= 0 && state.sort.length > 1 ? index2 + 1 : void 0
872
- };
873
- });
874
- function toggle2(e, off) {
875
- const {
876
- props: {
877
- sort: controlledSort,
878
- onSortChange
879
- }
880
- } = table.getState();
881
- const newDirection = direction === "asc" ? "desc" : "asc";
882
- const newSort = e.getModifierState("Control") || off ? table.getState().sort.filter((s) => s.columnId !== columnId) : [];
883
- if (!off) {
884
- newSort.push({
885
- columnId,
886
- direction: newDirection
887
- });
888
- }
889
- onSortChange == null ? void 0 : onSortChange(newSort);
890
- if (!controlledSort) {
891
- table.update((state) => {
892
- state.sort = newSort;
893
- });
894
- }
895
- e.preventDefault();
896
- return false;
897
- }
898
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
899
- css: {
900
- userSelect: "none",
901
- display: "grid",
902
- gridTemplateColumns: "minmax(0, 1fr) max-content",
903
- alignItems: "center",
904
- cursor: "pointer",
905
- "& > div": {
906
- overflow: "hidden",
907
- textOverflow: "ellipsis"
908
- }
909
- },
910
- onClick: (e) => toggle2(e),
911
- onContextMenu: (e) => toggle2(e, true),
912
- children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
913
- children
914
- }), /* @__PURE__ */ jsxRuntime.jsx(Badge2, {
915
- badgeContent: index,
916
- children: /* @__PURE__ */ jsxRuntime.jsx("span", {
917
- css: [{
918
- transition: "all 300ms",
919
- fontSize: "0.8em"
920
- }, !direction && {
921
- opacity: 0
922
- }, direction === "desc" && {
923
- transform: "rotate3d(0, 0, 1, 180deg)"
924
- }],
925
- children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUpward2, {})
926
- })
927
- })]
928
- });
929
- }
930
- const ColumnHeaderContext = new react$1.StoreScope({
931
- items: /* @__PURE__ */ new Map()
932
- });
933
- function ColumnHeader() {
934
- const ref = react.useRef(null);
935
- const columnId = useColumnContext();
936
- const table = useTableContext();
937
- const enabled = table.useState("props.enableColumnReorder");
938
- const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
939
- throttle: 16
940
- });
941
- const stickyHeader = table.useState("props.stickyHeader");
942
- const classes = useTheme((theme) => theme.classes);
943
- const {
944
- header,
945
- columnClasses
946
- } = table.useState((state) => {
947
- const column = state.activeColumns.find((column2) => column2.id === columnId);
948
- return {
949
- header: column == null ? void 0 : column.header,
950
- columnClasses: column == null ? void 0 : column.classes
951
- };
952
- });
953
- const store = ColumnHeaderContext.useStore();
954
- const draggingStart = react.useRef();
955
- const clone = react.useRef();
956
- react.useEffect(() => {
957
- const div = ref.current;
958
- if (!div)
959
- return;
960
- store.update((state) => {
961
- state.items.set(columnId, immer.castDraft(div));
962
- });
963
- return () => {
964
- store.update((state) => {
965
- state.items.delete(columnId);
966
- });
967
- };
968
- }, [ref.current, store, columnId]);
969
- function calcTargetIndex(offsetLeft) {
970
- var _a, _b, _c;
971
- const cols = table.getState().columnOrder.map((id) => ({
972
- id,
973
- div: store.getState().items.get(id)
974
- }));
975
- const otherCols = cols.filter((col) => col.id !== columnId);
976
- const firstOffsetleft = (_c = (_b = (_a = cols.find((col) => col.div)) == null ? void 0 : _a.div) == null ? void 0 : _b.offsetLeft) != null ? _c : 0;
977
- let sum = 0;
978
- const targetIndex = otherCols.findIndex((col) => {
979
- var _a2, _b2;
980
- const width = (_b2 = (_a2 = col.div) == null ? void 0 : _a2.offsetWidth) != null ? _b2 : 0;
981
- if (sum + width / 2 > offsetLeft - firstOffsetleft)
982
- return true;
983
- sum += width;
984
- return false;
985
- });
986
- return targetIndex === -1 ? otherCols.length : targetIndex;
987
- }
988
- function onPointerDown(e) {
989
- const div = ref.current;
990
- if (!div)
991
- return;
992
- draggingStart.current = {
993
- mouseX: e.clientX,
994
- bounds: div.getBoundingClientRect()
995
- };
996
- }
997
- function onPointerMove(e) {
998
- table.update((state) => {
999
- const div = ref.current;
1000
- if (!div || draggingStart.current === void 0 || Math.abs(e.clientX - draggingStart.current.mouseX) < 5)
1001
- return;
1002
- e.stopPropagation();
1003
- div.setPointerCapture(e.pointerId);
1004
- if (!clone.current) {
1005
- clone.current = div.cloneNode(true);
1006
- document.body.append(clone.current);
1007
- for (const [key, value] of Object.entries(getComputedStyle(div))) {
1008
- try {
1009
- clone.current.style[key] = value;
1010
- } catch {
1011
- }
1012
- }
1013
- Object.assign(clone.current.style, {
1014
- pointerEvents: "none",
1015
- position: "fixed",
1016
- boxShadow: "0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%)",
1017
- left: `${draggingStart.current.bounds.left}px`,
1018
- top: `${draggingStart.current.bounds.top}px`
1019
- });
1020
- div.style.color = "rgba(0, 0, 0, 0.2)";
1021
- }
1022
- clone.current.style.left = `${draggingStart.current.bounds.left + e.clientX - draggingStart.current.mouseX}px`;
1023
- const index = state.columnOrder.indexOf(columnId);
1024
- const targetIndex = calcTargetIndex(div.offsetLeft + e.clientX - draggingStart.current.mouseX);
1025
- const columns = table.getState().columnOrder.map((id, index2) => {
1026
- var _a, _b;
1027
- return {
1028
- id,
1029
- index: index2,
1030
- width: (_b = (_a = store.getState().items.get(id)) == null ? void 0 : _a.offsetWidth) != null ? _b : 0
1031
- };
1032
- });
1033
- state.columnOrder.forEach((id, i) => {
1034
- let offset = 0;
1035
- if (i === index) {
1036
- if (targetIndex > index) {
1037
- offset = columns.slice(index + 1, targetIndex + 1).reduce((sum, col) => sum + col.width, 0);
1038
- } else if (targetIndex < index) {
1039
- offset = -columns.slice(targetIndex, index).reduce((sum, col) => sum + col.width, 0);
1040
- }
1041
- } else if (i >= targetIndex && i < index) {
1042
- offset = div.offsetWidth;
1043
- } else if (i > index && i <= targetIndex) {
1044
- offset = -div.offsetWidth;
1045
- }
1046
- state.columnStyleOverride.set(id, {
1047
- transition: "transform 500ms",
1048
- transform: `translate3d(${offset}px, 0, 0)`,
1049
- zIndex: i === index ? 1 : void 0
1050
- });
1051
- });
1052
- });
1053
- }
1054
- function onPointerUp(e) {
1055
- table.update((state) => {
1056
- var _a;
1057
- const div = ref.current;
1058
- if (!div || draggingStart.current === void 0)
1059
- return;
1060
- const index = state.columnOrder.indexOf(columnId);
1061
- const targetIndex = calcTargetIndex(div.offsetLeft + e.clientX - draggingStart.current.mouseX);
1062
- state.columnOrder.splice(index, 1);
1063
- state.columnOrder.splice(targetIndex, 0, columnId);
1064
- (_a = clone.current) == null ? void 0 : _a.remove();
1065
- div.style.color = "";
1066
- state.columnStyleOverride.clear();
1067
- draggingStart.current = void 0;
1068
- clone.current = void 0;
1069
- });
1070
- }
1071
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
1072
- ref,
1073
- className: cx(classes == null ? void 0 : classes.headerCell, columnClasses == null ? void 0 : columnClasses.headerCell),
1074
- css: [{
1075
- position: "relative",
1076
- userSelect: "none"
1077
- }, tableTheme.defaultClasses.headerCell, columnStyleOverride, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
1078
- onPointerDown: enabled ? onPointerDown : void 0,
1079
- onPointerMove: enabled ? onPointerMove : void 0,
1080
- onPointerUp: enabled ? onPointerUp : void 0,
1081
- children: [/* @__PURE__ */ jsxRuntime.jsx(SortComponent, {
1082
- children: header
1083
- }), /* @__PURE__ */ jsxRuntime.jsx("div", {
1084
- css: {
1085
- flex: 1
1086
- }
1087
- }), /* @__PURE__ */ jsxRuntime.jsx(FilterControl, {}), /* @__PURE__ */ jsxRuntime.jsx(ResizeHandle, {})]
1088
- });
1089
- }
1090
- function FormControlLabel({
1091
- control,
1092
- label,
1093
- disabled
1094
- }) {
1095
- return /* @__PURE__ */ jsxRuntime.jsxs("label", {
1096
- css: [{
1097
- display: "flex",
1098
- alignItems: "center",
1099
- cursor: "pointer",
1100
- userSelect: "none",
1101
- "& > *": {
1102
- cursor: "pointer"
1103
- }
1104
- }, disabled && {
1105
- color: "rgba(0, 0, 0, 0.26)"
1106
- }],
1107
- children: [control, /* @__PURE__ */ jsxRuntime.jsx("span", {
1108
- css: {
1109
- marginLeft: "var(--spacing)"
1110
- },
1111
- children: label
1112
- })]
1113
- });
1114
- }
1115
- function ColumnSelection() {
1116
- const IconButton2 = useTheme((t) => t.components.IconButton);
1117
- const Popover = useTheme((t) => t.components.Popover);
1118
- const Checkbox2 = useTheme((t) => t.components.Checkbox);
1119
- const Button2 = useTheme((t) => t.components.Button);
1120
- const Settings2 = useTheme((t) => t.icons.Settings);
1121
- const selectColumns = useTheme((t) => t.text.selectColumns);
1122
- const resetAll = useTheme((t) => t.text.resetAll);
1123
- const cssVariables = useCssVariables();
1124
- const table = useTableContext();
1125
- const reset = react.useContext(TableResetContext);
1126
- const columns = table.useState("props.columns");
1127
- const hiddenColumns = table.useState("hiddenColumns");
1128
- const [anchorEl, setAnchorEl] = react.useState(null);
1129
- const toggle2 = (column) => {
1130
- const {
1131
- props: {
1132
- hiddenColumns: controlledHiddenColumns,
1133
- onHiddenColumnsChange
1134
- }
1135
- } = table.getState();
1136
- const newValue = new Set(hiddenColumns);
1137
- if (hiddenColumns.has(column.id))
1138
- newValue.delete(column.id);
1139
- else
1140
- newValue.add(column.id);
1141
- if (!controlledHiddenColumns) {
1142
- table.update((state) => {
1143
- state.hiddenColumns = newValue;
1144
- });
1145
- }
1146
- onHiddenColumnsChange == null ? void 0 : onHiddenColumnsChange(newValue);
1147
- };
1148
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
1149
- children: [/* @__PURE__ */ jsxRuntime.jsx(IconButton2, {
1150
- onClick: (e) => setAnchorEl(anchorEl ? null : e.currentTarget),
1151
- children: /* @__PURE__ */ jsxRuntime.jsx(Settings2, {})
1152
- }), /* @__PURE__ */ jsxRuntime.jsx(Popover, {
1153
- anchorEl,
1154
- open: !!anchorEl,
1155
- onClose: () => setAnchorEl(null),
1156
- css: cssVariables,
1157
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
1158
- css: {
1159
- padding: `calc(var(--spacing) * 2)`,
1160
- display: "grid"
1161
- },
1162
- children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
1163
- css: {
1164
- marginBottom: "var(--spacing)"
1165
- },
1166
- children: selectColumns
1167
- }), columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(FormControlLabel, {
1168
- control: /* @__PURE__ */ jsxRuntime.jsx(Checkbox2, {
1169
- checked: !hiddenColumns.has(column.id),
1170
- onChange: () => toggle2(column),
1171
- disabled: column.cannotHide
1172
- }),
1173
- label: column.header
1174
- }, column.id)), /* @__PURE__ */ jsxRuntime.jsx(Button2, {
1175
- variant: "outlined",
1176
- onClick: reset,
1177
- children: resetAll
1178
- })]
1179
- })
1180
- })]
1181
- });
1182
- }
1183
- function csvExport(data, { sepPrefix, separator = ",", quote = '"', eol = "\n" } = {}) {
1184
- const cells = data.map((line) => line.map((value) => {
1185
- if (typeof value === "number")
1186
- return String(value);
1187
- if (![separator, quote, eol].some((c) => value.includes(c)))
1188
- return value;
1189
- const clean = value.replace(new RegExp(quote, "g"), `${quote}${quote}`);
1190
- return `${quote}${clean}${quote}`;
1191
- }));
1192
- return (sepPrefix ? `SEP=${separator}
1193
- ` : "") + cells.map((line) => line.join(separator)).join(eol);
1194
- }
1195
- function Export$1() {
1196
- const table = useTableContext();
1197
- const Button2 = useTheme((t) => t.components.Button);
1198
- const IconButton2 = useTheme((t) => t.components.IconButton);
1199
- const Popover = useTheme((t) => t.components.Popover);
1200
- const Export2 = useTheme((t) => t.icons.Export);
1201
- const Clipboard2 = useTheme((t) => t.icons.Clipboard);
1202
- const exportTitle = useTheme((t) => t.text.exportTitle);
1203
- const exportCopy = useTheme((t) => t.text.exportCopy);
1204
- const exportDownload = useTheme((t) => t.text.exportDownload);
1205
- const cssVariables = useCssVariables();
1206
- const [anchor, setAnchor] = react.useState(null);
1207
- const generate = (options) => {
1208
- const {
1209
- activeColumns,
1210
- activeItems
1211
- } = table.getState();
1212
- const data = [activeColumns.map((column) => String(column.id)), ...activeItems.map((item) => activeColumns.map((column) => column.exportCell(column.value(item.value), item.value)))];
1213
- return csvExport(data, options);
1214
- };
1215
- const copy = () => {
1216
- navigator.clipboard.writeText(generate(table.getState().props.enableExport.copy));
1217
- };
1218
- const download = () => {
1219
- const a = document.createElement("a");
1220
- a.href = "data:text/csv;charset=utf-8," + encodeURIComponent(generate(table.getState().props.enableExport.download));
1221
- a.download = "export.csv";
1222
- document.body.appendChild(a);
1223
- a.click();
1224
- document.body.removeChild(a);
1225
- };
1226
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
1227
- children: [/* @__PURE__ */ jsxRuntime.jsx(IconButton2, {
1228
- onClick: (e) => setAnchor(anchor ? null : e.currentTarget),
1229
- children: /* @__PURE__ */ jsxRuntime.jsx(Export2, {
1230
- css: !!anchor && {
1231
- color: "var(--primaryMain)"
1232
- }
1233
- })
1234
- }), /* @__PURE__ */ jsxRuntime.jsx(Popover, {
1235
- open: !!anchor,
1236
- onClose: () => setAnchor(null),
1237
- anchorEl: anchor,
1238
- css: cssVariables,
1239
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
1240
- css: {
1241
- padding: `calc(var(--spacing) * 2)`,
1242
- display: "grid",
1243
- justifyItems: "stretch",
1244
- gap: "var(--spacing)",
1245
- "& > *": {
1246
- justifyContent: "start"
1247
- }
1248
- },
1249
- children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
1250
- css: {
1251
- marginBottom: "var(--spacing)"
1252
- },
1253
- children: exportTitle
1254
- }), /* @__PURE__ */ jsxRuntime.jsx(Button2, {
1255
- startIcon: /* @__PURE__ */ jsxRuntime.jsx(Clipboard2, {}),
1256
- onClick: copy,
1257
- children: exportCopy
1258
- }), /* @__PURE__ */ jsxRuntime.jsx(Button2, {
1259
- startIcon: /* @__PURE__ */ jsxRuntime.jsx(Export2, {}),
1260
- onClick: download,
1261
- children: exportDownload
1262
- })]
1263
- })
1264
- })]
1265
- });
1266
- }
1267
- const defaultWrapCell = (content) => {
1268
- if (typeof content === "string") {
1269
- return /* @__PURE__ */ jsxRuntime.jsx("span", {
1270
- css: tableTheme.defaultClasses.text,
1271
- title: content,
1272
- children: content
1273
- });
1274
- }
1275
- return content;
1276
- };
1277
- const Cell = react.memo(function Cell2({
1278
- itemId,
1279
- rowIndex
1280
- }) {
1281
- var _a;
1282
- const table = useTableContext();
1283
- const columnId = useColumnContext();
1284
- const column = table.useState((state) => {
1285
- const col = state.activeColumns.find((column2) => column2.id === columnId);
1286
- return col && {
1287
- value: col.value,
1288
- renderCell: col.renderCell
1289
- };
1290
- });
1291
- const wrapCell = (_a = table.useState((state) => state.props.wrapCell)) != null ? _a : defaultWrapCell;
1292
- const item = table.useState((state) => state.activeItemsById.get(itemId));
1293
- const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
1294
- throttle: 16
1295
- });
1296
- react.useLayoutEffect(() => {
1297
- var _a2, _b;
1298
- return (_b = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b.call(_a2, "render cell", itemId, columnId);
1299
- });
1300
- const className2 = useTheme((t) => cx(...calcClassNames(t.classes, item, rowIndex)));
1301
- if (!column || !item)
1302
- return null;
1303
- const content = column.renderCell(column.value(item.value), item.value);
1304
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
1305
- className: className2,
1306
- css: [tableTheme.defaultClasses.cell, columnStyleOverride],
1307
- children: wrapCell(content, column.value(item.value), item.value, rowIndex)
1308
- });
1309
- });
1310
- function ExpandControl({
1311
- itemId,
1312
- hasDeferredChildren
1313
- }) {
1314
- const IconButton2 = useTheme((t) => t.components.IconButton);
1315
- const Spinner2 = useTheme((t) => t.components.Spinner);
1316
- const ChevronRight2 = useTheme((t) => t.icons.ChevronRight);
1317
- const table = useTableContext();
1318
- const isExpanded = table.useState((state) => state.expanded.has(itemId));
1319
- const hasChildren = table.useState((state) => {
1320
- var _a;
1321
- return !!((_a = state.activeItemsById.get(itemId)) == null ? void 0 : _a.children.length);
1322
- });
1323
- function toggle2() {
1324
- const {
1325
- props: {
1326
- expanded: controlledExpanded,
1327
- expandOnlyOne,
1328
- onExpandedChange
1329
- },
1330
- expanded,
1331
- activeItemsById
1332
- } = table.getState();
1333
- const newExpanded = new Set(expanded);
1334
- if (expandOnlyOne) {
1335
- newExpanded.clear();
1336
- const item = activeItemsById.get(itemId);
1337
- for (const ancestor of item ? getAncestors(activeItemsById, item) : []) {
1338
- newExpanded.add(ancestor);
1339
- }
1340
- }
1341
- if (isExpanded) {
1342
- newExpanded.delete(itemId);
1343
- } else {
1344
- newExpanded.add(itemId);
1345
- }
1346
- onExpandedChange == null ? void 0 : onExpandedChange(newExpanded);
1347
- if (!controlledExpanded) {
1348
- table.update((state) => {
1349
- state.expanded = newExpanded;
1350
- });
1351
- }
1352
- }
1353
- if (isExpanded && hasDeferredChildren && !hasChildren) {
1354
- return /* @__PURE__ */ jsxRuntime.jsx(Spinner2, {
1355
- css: {
1356
- margin: "0 var(--spacing)"
1357
- }
1358
- });
1359
- }
1360
- return /* @__PURE__ */ jsxRuntime.jsx(IconButton2, {
1361
- onClick: toggle2,
1362
- children: /* @__PURE__ */ jsxRuntime.jsx("span", {
1363
- css: {
1364
- display: "inline-flex",
1365
- transition: "all 300ms",
1366
- transform: isExpanded ? "rotate3d(0, 0, 1, 90deg)" : "rotate3d(0, 0, 1, 0deg)"
1367
- },
1368
- children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {})
1369
- })
1370
- });
1371
- }
1372
- function SelectComponent({
1373
- itemId
1374
- }) {
1375
- const table = useTableContext();
1376
- const Checkbox2 = useTheme((t) => t.components.Checkbox);
1377
- const isSelected = table.useState((state) => {
1378
- const itemIds = itemId ? [itemId] : Array.from(state.activeItemsById.keys());
1379
- return state.activeItemsById.size > 0 && itemIds.every((itemId2) => state.selection.has(itemId2));
1380
- });
1381
- function toggle2(e) {
1382
- const mouseEvent = e.nativeEvent;
1383
- const {
1384
- activeItems,
1385
- activeItemsById,
1386
- lastSelectedId,
1387
- selection,
1388
- props: {
1389
- selectSyncChildren,
1390
- selection: controlledSelection,
1391
- onSelectionChange
1392
- }
1393
- } = table.getState();
1394
- let range;
1395
- if (mouseEvent.shiftKey && itemId) {
1396
- const a = lastSelectedId ? activeItems.findIndex((i) => lastSelectedId === i.id) : 0;
1397
- const b = activeItems.findIndex((item) => item.id === itemId);
1398
- range = activeItems.slice(Math.min(a, b), Math.max(a, b) + 1);
1399
- } else {
1400
- const item = itemId ? activeItemsById.get(itemId) : void 0;
1401
- range = item ? [item] : activeItems;
1402
- }
1403
- const newSelection = new Set(selection);
1404
- for (const item of range) {
1405
- if (isSelected)
1406
- newSelection.delete(item.id);
1407
- else
1408
- newSelection.add(item.id);
1409
- }
1410
- if (selectSyncChildren && isSelected) {
1411
- for (const ancestor of getAncestors(activeItemsById, ...range)) {
1412
- newSelection.delete(ancestor);
1413
- }
1414
- for (const descendant of getDescendants(...range)) {
1415
- newSelection.delete(descendant);
1416
- }
1417
- }
1418
- onSelectionChange == null ? void 0 : onSelectionChange(newSelection);
1419
- if (!controlledSelection) {
1420
- table.update((state) => {
1421
- state.selection = newSelection;
1422
- });
1423
- }
1424
- table.update((state) => {
1425
- state.lastSelectedId = itemId;
1426
- });
1427
- }
1428
- return /* @__PURE__ */ jsxRuntime.jsx(Checkbox2, {
1429
- css: {
1430
- justifySelf: "start",
1431
- color: "#c9cfda"
1432
- },
1433
- checked: isSelected,
1434
- onChange: toggle2
1435
- });
1436
- }
1437
- function calcClassNames(classes, item, index) {
1438
- return [(classes == null ? void 0 : classes.cell) instanceof Function ? classes.cell(item, index) : classes == null ? void 0 : classes.cell, index % 2 === 0 && (classes == null ? void 0 : classes.evenCell), index % 2 === 1 && (classes == null ? void 0 : classes.oddCell)];
1439
- }
1440
- const Row = react.memo(function Row2({
1441
- itemId,
1442
- rowIndex
1443
- }) {
1444
- const table = useTableContext();
1445
- const divRef = react.useRef(null);
1446
- const classes = useTheme((t) => t.classes);
1447
- const {
1448
- className: className2,
1449
- indent,
1450
- hasChildren,
1451
- hasDeferredChildren,
1452
- columnIds,
1453
- enableSelection,
1454
- rowAction
1455
- } = table.useState((state) => {
1456
- var _a, _b;
1457
- const item = state.activeItemsById.get(itemId);
1458
- return {
1459
- className: cx(...calcClassNames(classes, item, rowIndex)),
1460
- indent: item ? getAncestors(state.activeItemsById, item).size : 0,
1461
- hasChildren: !!(item == null ? void 0 : item.children.length),
1462
- hasDeferredChildren: item && ((_b = (_a = state.props).hasDeferredChildren) == null ? void 0 : _b.call(_a, item.value)),
1463
- columnIds: state.activeColumns.map((column) => column.id),
1464
- enableSelection: state.props.enableSelection,
1465
- rowAction: state.props.rowAction instanceof Function ? item ? state.props.rowAction(item.value, rowIndex) : null : state.props.rowAction
1466
- };
1467
- });
1468
- react.useEffect(() => {
1469
- const div = divRef.current;
1470
- if (!div)
1471
- return;
1472
- const o = new ResizeObserver(() => {
1473
- if (!document.contains(div))
1474
- return;
1475
- table.update((state) => {
1476
- state.rowHeights.set(itemId, div.offsetHeight);
1477
- });
1478
- });
1479
- o.observe(div);
1480
- return () => o.disconnect();
1481
- }, [divRef.current]);
1482
- react.useLayoutEffect(() => {
1483
- var _a, _b;
1484
- return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render row", itemId);
1485
- });
1486
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
1487
- children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
1488
- className: className2,
1489
- css: [tableTheme.defaultClasses.cellFill],
1490
- ref: divRef
1491
- }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
1492
- className: className2,
1493
- css: [tableTheme.defaultClasses.cell, tableTheme.defaultClasses.firstCell],
1494
- children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
1495
- css: {
1496
- width: indent * 20
1497
- }
1498
- }), enableSelection && /* @__PURE__ */ jsxRuntime.jsx(SelectComponent, {
1499
- itemId
1500
- }), (hasChildren || hasDeferredChildren) && /* @__PURE__ */ jsxRuntime.jsx(ExpandControl, {
1501
- itemId,
1502
- hasDeferredChildren
1503
- }), rowAction]
1504
- }), columnIds.map((columnId) => /* @__PURE__ */ jsxRuntime.jsx(ColumnContext.Provider, {
1505
- value: columnId,
1506
- children: /* @__PURE__ */ jsxRuntime.jsx(Cell, {
1507
- itemId,
1508
- rowIndex
1509
- })
1510
- }, columnId)), /* @__PURE__ */ jsxRuntime.jsx("div", {
1511
- className: className2,
1512
- css: [tableTheme.defaultClasses.cellFill]
1513
- })]
1514
- });
1515
- });
1516
- function throttle(fn, ms) {
1517
- let last = 0;
1518
- let lastArgs;
1519
- let timeout;
1520
- function run() {
1521
- const args = lastArgs;
1522
- last = Date.now();
1523
- lastArgs = void 0;
1524
- timeout = void 0;
1525
- fn(...args);
1526
- }
1527
- return Object.assign(function(...args) {
1528
- const now = Date.now();
1529
- lastArgs = args;
1530
- if (timeout)
1531
- ;
1532
- else if (now < last + ms) {
1533
- timeout = setTimeout(run, last + ms - now);
1534
- } else {
1535
- run();
1536
- }
1537
- }, {
1538
- flush() {
1539
- if (lastArgs) {
1540
- run();
1541
- }
1542
- },
1543
- cancel() {
1544
- if (timeout) {
1545
- clearTimeout(timeout);
1546
- }
1547
- }
1548
- });
1549
- }
1550
- const findScrollRoot = (x) => {
1551
- const parent = x.parentElement;
1552
- if (!parent)
1553
- return document.documentElement;
1554
- if (parent.scrollHeight > parent.clientHeight && getComputedStyle(parent).overflowY !== "visible")
1555
- return parent;
1556
- return findScrollRoot(parent);
1557
- };
1558
- const relativeOffset = (x, y) => {
1559
- if (x.offsetParent === y.offsetParent || !x.offsetParent)
1560
- return x.offsetTop - y.offsetTop;
1561
- if (x.offsetParent instanceof HTMLElement)
1562
- return relativeOffset(x.offsetParent, y) + x.offsetTop;
1563
- return 0;
1564
- };
1565
- function Virtualized(_c) {
1566
- var _d = _c, {
1567
- header,
1568
- footer,
1569
- children
1570
- } = _d, props = __objRest(_d, [
1571
- "header",
1572
- "footer",
1573
- "children"
1574
- ]);
1575
- var _a, _b;
1576
- const table = useTableContext();
1577
- const virtual = table.useState("props.virtual");
1578
- const probeRef = react.useRef(null);
1579
- const [, setCounter] = react.useState(0);
1580
- const {
1581
- itemIds = [],
1582
- from = 0,
1583
- to,
1584
- before = 0,
1585
- after = 0
1586
- } = table.useState((state) => {
1587
- var _a2;
1588
- const itemIds2 = state.activeItems.map((item) => item.id);
1589
- const root = probeRef.current && findScrollRoot(probeRef.current);
1590
- if (!state.props.virtual)
1591
- return {
1592
- itemIds: itemIds2
1593
- };
1594
- if (!probeRef.current || !root || !document.contains(root))
1595
- return {};
1596
- const {
1597
- rowHeight,
1598
- initalRowHeight,
1599
- overscan = 100,
1600
- overscanTop,
1601
- overscanBottom
1602
- } = (_a2 = state.props.virtual instanceof Object ? state.props.virtual : void 0) != null ? _a2 : {};
1603
- let totalHeight = 0;
1604
- const rowHeights = itemIds2.map((itemId, index) => {
1605
- var _a3, _b2;
1606
- const h = (_b2 = (_a3 = rowHeight != null ? rowHeight : state.rowHeights.get(itemId)) != null ? _a3 : initalRowHeight) != null ? _b2 : index === 0 ? 100 : totalHeight / index;
1607
- totalHeight += h;
1608
- return h;
1609
- });
1610
- const probeOffset = relativeOffset(probeRef.current, root);
1611
- const headerHeight = probeRef.current.offsetTop;
1612
- const topOfTable = root.scrollTop - probeOffset + headerHeight;
1613
- const bottomOfTable = topOfTable + root.clientHeight - headerHeight;
1614
- let from2 = 0, to2 = itemIds2.length, before2 = 0, after2 = 0;
1615
- for (const h of rowHeights) {
1616
- if (before2 + h > topOfTable - (overscanTop != null ? overscanTop : overscan))
1617
- break;
1618
- from2++;
1619
- before2 += h;
1620
- }
1621
- for (const h of rowHeights.reverse()) {
1622
- if (after2 + h > totalHeight - bottomOfTable - (overscanBottom != null ? overscanBottom : overscan))
1623
- break;
1624
- to2--;
1625
- after2 += h;
1626
- }
1627
- return {
1628
- itemIds: itemIds2.slice(from2, to2),
1629
- from: from2,
1630
- to: to2,
1631
- before: before2,
1632
- after: after2
1633
- };
1634
- }, {
1635
- throttle: 16
1636
- });
1637
- const throttleScroll = (_b = (_a = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a.throttleScroll) != null ? _b : 16;
1638
- const incCounter = react.useMemo(() => throttle(() => setCounter((c) => c + 1), throttleScroll), [throttleScroll]);
1639
- react.useEffect(() => {
1640
- if (!virtual || !probeRef.current)
1641
- return;
1642
- window.addEventListener("scroll", incCounter, true);
1643
- window.addEventListener("resize", incCounter, true);
1644
- return () => {
1645
- window.removeEventListener("scroll", incCounter, true);
1646
- window.removeEventListener("resize", incCounter, true);
1647
- };
1648
- }, [probeRef.current, incCounter]);
1649
- react.useEffect(() => incCounter.cancel, [incCounter]);
1650
- react.useLayoutEffect(() => {
1651
- var _a2, _b2;
1652
- return (_b2 = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b2.call(_a2, `Virtualalized render ${from} to ${to}`);
1653
- });
1654
- return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, props), {
1655
- children: [header, virtual && /* @__PURE__ */ jsxRuntime.jsx("div", {
1656
- style: {
1657
- gridColumn: "1 / -1",
1658
- height: before
1659
- },
1660
- ref: probeRef
1661
- }), children(itemIds, from), virtual && /* @__PURE__ */ jsxRuntime.jsx("div", {
1662
- style: {
1663
- gridColumn: "1 / -1",
1664
- height: after
1665
- }
1666
- }), footer]
1667
- }));
1668
- }
1669
- const TableContext = react.createContext(null);
1670
- const TableResetContext = react.createContext(() => void 0);
1671
- const ColumnContext = react.createContext(null);
1672
- function useTableContext() {
1673
- const value = react.useContext(TableContext);
1674
- if (!value)
1675
- throw Error("No table context available");
1676
- return value;
1677
- }
1678
- function useColumnContext() {
1679
- const value = react.useContext(ColumnContext);
1680
- if (value === null)
1681
- throw Error("No column context available");
1682
- return value;
1683
- }
1684
- function Table(props) {
1685
- const [table, resetState] = useTableState(props);
1686
- const [isHydrated, clearStorage] = useTableStateStorage(table);
1687
- async function reset() {
1688
- await clearStorage();
1689
- resetState();
1690
- }
1691
- react.useLayoutEffect(() => {
1692
- var _a, _b;
1693
- return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
1694
- });
1695
- return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, {
1696
- value: table,
1697
- children: /* @__PURE__ */ jsxRuntime.jsx(TableResetContext.Provider, {
1698
- value: reset,
1699
- children: /* @__PURE__ */ jsxRuntime.jsx(TableMemoContextProvider, {
1700
- children: /* @__PURE__ */ jsxRuntime.jsx(TableLoadingState, {
1701
- isHydrated
1702
- })
1703
- })
1704
- })
1705
- });
1706
- }
1707
- function TableLoadingState({
1708
- isHydrated
1709
- }) {
1710
- const loadingText = useTheme((t) => t.text.loading);
1711
- const [showLoading, setShowLoading] = react.useState(false);
1712
- react.useEffect(() => {
1713
- const handle = setTimeout(() => setShowLoading(true), 500);
1714
- return () => clearTimeout(handle);
1715
- });
1716
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
1717
- children: [!isHydrated && showLoading && /* @__PURE__ */ jsxRuntime.jsx("div", {
1718
- children: loadingText
1719
- }), /* @__PURE__ */ jsxRuntime.jsx(TableInner, {
1720
- hidden: !isHydrated
1721
- })]
1722
- });
1723
- }
1724
- const TableInner = react.memo(function TableInner2({
1725
- hidden
1726
- }) {
1727
- const table = useTableContext();
1728
- const fullWidth = table.useState("props.fullWidth");
1729
- const activeColumns = table.useState((state) => state.activeColumns.map((column) => ({
1730
- id: column.id,
1731
- width: column.width,
1732
- classes: column.classes
1733
- })));
1734
- const hasActiveFilters = table.useState((state) => {
1735
- return state.activeColumns.some((column) => {
1736
- const filter = state.filters.get(column.id);
1737
- const filterValue = state.filterValues.get(column.id);
1738
- return filter !== void 0 && filterValue !== void 0 && filter.isActive(filterValue);
1739
- });
1740
- });
1741
- const columnWidths = table.useState("columnWidths", {
1742
- throttle: 16
1743
- });
1744
- const hasFooter = table.useState((state) => state.activeColumns.some((column) => column.footer));
1745
- const classes = useTheme((theme) => theme.classes);
1746
- const stickyHeader = table.useState("props.stickyHeader");
1747
- const stickyFooter = table.useState("props.stickyFooter");
1748
- const enableSelection = table.useState("props.enableSelection");
1749
- const enableColumnSelection = table.useState("props.enableColumnSelection");
1750
- const enableExport = table.useState((state) => !!state.props.enableExport.copy || !!state.props.enableExport.download);
1751
- const cssVariables = useCssVariables();
1752
- const enableClearFiltersButton = table.useState("props.enableClearFiltersButton");
1753
- react.useLayoutEffect(() => {
1754
- var _a, _b;
1755
- return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
1756
- });
1757
- return /* @__PURE__ */ jsxRuntime.jsx(Virtualized, {
1758
- className: classes == null ? void 0 : classes.table,
1759
- css: [cssVariables, tableTheme.defaultClasses.table, {
1760
- gridTemplateColumns: [
1761
- fullWidth === "right" || fullWidth === true ? "auto" : "0",
1762
- "max-content",
1763
- ...activeColumns.map((column) => {
1764
- var _a, _b;
1765
- return (_b = (_a = columnWidths.get(column.id)) != null ? _a : column.width) != null ? _b : "max-content";
1766
- }),
1767
- fullWidth === "left" || fullWidth === true ? "auto" : "0"
1768
- ].join(" ")
1769
- }, hidden && {
1770
- visibility: "hidden"
1771
- }],
1772
- header: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
1773
- children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
1774
- className: classes == null ? void 0 : classes.headerCell,
1775
- css: [tableTheme.defaultClasses.headerFill, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
1776
- }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
1777
- className: classes == null ? void 0 : classes.headerCell,
1778
- css: [tableTheme.defaultClasses.headerCell, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
1779
- children: [enableSelection && /* @__PURE__ */ jsxRuntime.jsx(SelectComponent, {}), enableColumnSelection && /* @__PURE__ */ jsxRuntime.jsx(ColumnSelection, {}), enableExport && /* @__PURE__ */ jsxRuntime.jsx(Export$1, {}), /* @__PURE__ */ jsxRuntime.jsx("div", {
1780
- css: {
1781
- flex: 1
1782
- }
1783
- }), /* @__PURE__ */ jsxRuntime.jsx(ResizeHandleView, {})]
1784
- }), /* @__PURE__ */ jsxRuntime.jsx(ColumnHeaderContext.Provider, {
1785
- children: activeColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(ColumnContext.Provider, {
1786
- value: column.id,
1787
- children: /* @__PURE__ */ jsxRuntime.jsx(ColumnHeader, {})
1788
- }, column.id))
1789
- }), /* @__PURE__ */ jsxRuntime.jsx("div", {
1790
- className: classes == null ? void 0 : classes.headerCell,
1791
- css: [tableTheme.defaultClasses.headerFill, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
1792
- })]
1793
- }),
1794
- footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
1795
- children: [enableClearFiltersButton && hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx(ClearFiltersButton, {}), hasFooter && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
1796
- children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
1797
- className: classes == null ? void 0 : classes.footerCell,
1798
- css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
1799
- }), /* @__PURE__ */ jsxRuntime.jsx("div", {
1800
- className: classes == null ? void 0 : classes.footerCell,
1801
- css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
1802
- }), activeColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(ColumnContext.Provider, {
1803
- value: column.id,
1804
- children: /* @__PURE__ */ jsxRuntime.jsx(ColumnFooter, {})
1805
- }, column.id)), /* @__PURE__ */ jsxRuntime.jsx("div", {
1806
- className: classes == null ? void 0 : classes.footerCell,
1807
- css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
1808
- })]
1809
- })]
1810
- }),
1811
- children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ jsxRuntime.jsx(Row, {
1812
- itemId,
1813
- rowIndex: startIndex + index
1814
- }, itemId))
1815
- });
1816
- });
1817
- const defaultColors = {
1818
- primary: { main: "#1976d2", light: "#42a5f5", contrastText: "#fff" },
1819
- secondary: { main: "#9c27b0", light: "#ba68c8", contrastText: "#fff" }
1820
- };
1821
- function Spinner({
1822
- className: className2
1823
- }) {
1824
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
1825
- className: className2,
1826
- css: react$2.css`
1827
- display: inline-block;
1828
- position: relative;
1829
- width: 1em;
1830
- height: 1em;
1831
-
1832
- div {
1833
- box-sizing: border-box;
1834
- display: block;
1835
- position: absolute;
1836
- width: 0.8em;
1837
- height: 0.8em;
1838
- margin: 0.1em;
1839
- border: 0.1em solid #fff;
1840
- border-radius: 50%;
1841
- animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
1842
- border-color: currentColor transparent transparent transparent;
1843
- }
1844
- div:nth-of-type(1) {
1845
- animation-delay: -0.45s;
1846
- }
1847
- div:nth-of-type(2) {
1848
- animation-delay: -0.3s;
1849
- }
1850
- div:nth-of-type(3) {
1851
- animation-delay: -0.15s;
1852
- }
1853
- @keyframes lds-ring {
1854
- 0% {
1855
- transform: rotate(0deg);
1856
- }
1857
- 100% {
1858
- transform: rotate(360deg);
1859
- }
1860
- }
1861
- `,
1862
- children: [/* @__PURE__ */ jsxRuntime.jsx("div", {}), /* @__PURE__ */ jsxRuntime.jsx("div", {}), /* @__PURE__ */ jsxRuntime.jsx("div", {})]
1863
- });
1864
- }
1865
- const Badge = ({
1866
- badgeContent,
1867
- children
1868
- }) => {
1869
- if (!open)
1870
- return null;
1871
- return /* @__PURE__ */ jsxRuntime.jsxs("span", {
1872
- css: {
1873
- display: "inline-flex",
1874
- position: "relative",
1875
- flexShrink: 0,
1876
- verticalAlign: "middle"
1877
- },
1878
- children: [children, /* @__PURE__ */ jsxRuntime.jsx("span", {
1879
- css: [{
1880
- top: 0,
1881
- right: 0,
1882
- transform: "scale(1) translate(50%, -50%)",
1883
- transformOrigin: "100% 0%",
1884
- height: 20,
1885
- display: "flex",
1886
- padding: "0 6px",
1887
- zIndex: 1,
1888
- position: "absolute",
1889
- flexWrap: "wrap",
1890
- minWidth: 20,
1891
- transition: "transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
1892
- alignItems: "center",
1893
- lineHeight: 1,
1894
- alignContent: "center",
1895
- borderRadius: 10,
1896
- justifyContent: "center",
1897
- fontSize: "0.8em"
1898
- }, !badgeContent && {
1899
- transform: "scale(0) translate(50%, -50%)",
1900
- transition: "transform 195ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
1901
- }],
1902
- children: badgeContent
1903
- })]
1904
- });
1905
- };
1906
- const Button = (_e) => {
1907
- var _f = _e, {
1908
- startIcon,
1909
- children,
1910
- variant = "text"
1911
- } = _f, props = __objRest(_f, [
1912
- "startIcon",
1913
- "children",
1914
- "variant"
1915
- ]);
1916
- return /* @__PURE__ */ jsxRuntime.jsxs("button", __spreadProps(__spreadValues({
1917
- css: [{
1918
- padding: `var(--spacing) calc(var(--spacing) * 2)`,
1919
- display: "inline-flex",
1920
- alignItems: "center",
1921
- transition: "background-color 150ms",
1922
- border: "none",
1923
- cursor: "pointer",
1924
- background: "transparent",
1925
- borderRadius: 4,
1926
- "&:active:not(:disabled)": {
1927
- transform: "scale3d(0.95, 0.95, 1)"
1928
- }
1929
- }, variant === "text" && {
1930
- "&:hover": {
1931
- background: "rgba(0, 0, 0, 0.1)"
1932
- }
1933
- }, variant === "outlined" && {
1934
- border: `1px solid ${tableTheme.darkGray}`,
1935
- "&:disabled": {
1936
- borderColor: tableTheme.lightGray
1937
- }
1938
- }, variant === "contained" && {
1939
- color: "var(--primaryContrastText)",
1940
- backgroundColor: "var(--primaryMain)",
1941
- boxShadow: "0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%)",
1942
- "&:hover": {
1943
- filter: "brightness(0.9)"
1944
- },
1945
- "&:disabled": {
1946
- filter: "grayscale()",
1947
- opacity: 0.5
1948
- }
1949
- }]
1950
- }, props), {
1951
- children: [startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", {
1952
- css: {
1953
- marginRight: `calc(var(--spacing) * 2)`
1954
- },
1955
- children: startIcon
1956
- }), /* @__PURE__ */ jsxRuntime.jsx("span", {
1957
- children
1958
- })]
1959
- }));
1960
- };
1961
- const Checkbox = (_g) => {
1962
- var _h = _g, {
1963
- className: className2
1964
- } = _h, props = __objRest(_h, [
1965
- "className"
1966
- ]);
1967
- return /* @__PURE__ */ jsxRuntime.jsxs("label", {
1968
- css: [{
1969
- padding: "calc(var(--spacing) * 1.8)",
1970
- display: "flex",
1971
- color: "currentcolor",
1972
- userSelect: "none",
1973
- "& input": {
1974
- appearance: "none",
1975
- margin: 0
1976
- }
1977
- }, props.disabled && {
1978
- color: "rgba(0, 0, 0, 0.26)"
1979
- }],
1980
- className: className2,
1981
- children: [/* @__PURE__ */ jsxRuntime.jsx("input", __spreadValues({
1982
- type: "checkbox"
1983
- }, props)), props.checked ? /* @__PURE__ */ jsxRuntime.jsx("svg", {
1984
- css: {
1985
- fontSize: "1.25rem",
1986
- width: "1em",
1987
- height: "1em",
1988
- fill: "var(--primaryMain)"
1989
- },
1990
- focusable: "false",
1991
- viewBox: "0 0 24 24",
1992
- "aria-hidden": "true",
1993
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
1994
- d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
1995
- })
1996
- }) : /* @__PURE__ */ jsxRuntime.jsx("svg", {
1997
- css: {
1998
- fontSize: "1.25rem",
1999
- width: "1em",
2000
- height: "1em",
2001
- fill: "currentColor"
2002
- },
2003
- focusable: "false",
2004
- viewBox: "0 0 24 24",
2005
- "aria-hidden": "true",
2006
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
2007
- d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
2008
- })
2009
- })]
2010
- });
2011
- };
2012
- const IconButton = (props) => {
2013
- return /* @__PURE__ */ jsxRuntime.jsx("button", __spreadValues({
2014
- css: {
2015
- padding: "var(--spacing)",
2016
- borderRadius: "50%",
2017
- display: "inline-flex",
2018
- justifyContent: "center",
2019
- alignItems: "center",
2020
- transition: "background-color 150ms",
2021
- border: "none",
2022
- cursor: "pointer",
2023
- color: "inherit",
2024
- background: "transparent",
2025
- "&:hover": {
2026
- backgroundColor: "rgba(0, 0, 0, 0.04)"
2027
- },
2028
- "&:active": {
2029
- transformColor: "scale3d(0.95, 0.95, 1)"
2030
- }
2031
- }
2032
- }, props));
2033
- };
2034
- const TextField = (_i) => {
2035
- var _j = _i, {
2036
- endIcon,
2037
- className: className2,
2038
- inputRef
2039
- } = _j, props = __objRest(_j, [
2040
- "endIcon",
2041
- "className",
2042
- "inputRef"
2043
- ]);
2044
- var _a;
2045
- const [focus, setFocus] = react.useState(false);
2046
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
2047
- className: className2,
2048
- css: {
2049
- display: "flex"
2050
- },
2051
- children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
2052
- css: [{
2053
- flex: 1,
2054
- display: "flex",
2055
- alignItems: "center",
2056
- border: `1px solid ${tableTheme.darkGray}`,
2057
- borderRadius: 4
2058
- }, focus && {
2059
- border: "2px solid var(--primaryMain)",
2060
- margin: -1
2061
- }],
2062
- children: [/* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({
2063
- ref: inputRef
2064
- }, props), {
2065
- value: (_a = props.value) != null ? _a : "",
2066
- onFocus: () => setFocus(true),
2067
- onBlur: () => setFocus(false),
2068
- css: {
2069
- flex: 1,
2070
- border: "none",
2071
- outline: "none",
2072
- borderRadius: 4,
2073
- padding: "calc(var(--spacing) * 2)",
2074
- paddingRight: 0,
2075
- transition: "outline 500ms"
2076
- }
2077
- })), endIcon]
2078
- })
2079
- });
2080
- };
2081
- const defaultComponents = {
2082
- IconButton,
2083
- Checkbox,
2084
- Popover: tableTheme.Popover,
2085
- Button,
2086
- Badge,
2087
- TextField,
2088
- Spinner
2089
- };
2090
- const IconDefaultStyle = react$2.css({
2091
- width: "1.5em",
2092
- height: "1.5em",
2093
- color: "inherit"
2094
- });
2095
- function Icon(svg) {
2096
- return (props) => /* @__PURE__ */ jsxRuntime.jsx(react$2.ClassNames, {
2097
- children: ({
2098
- css: css2
2099
- }) => react.cloneElement(svg, __spreadProps(__spreadValues({}, props), {
2100
- className: css2(IconDefaultStyle, props.className)
2101
- }))
2102
- });
2103
- }
2104
- const Settings = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
2105
- xmlns: "http://www.w3.org/2000/svg",
2106
- height: "24px",
2107
- viewBox: "0 0 24 24",
2108
- width: "24px",
2109
- fill: "currentColor",
2110
- children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
2111
- d: "M0 0h24v24H0V0z",
2112
- fill: "none"
2113
- }), /* @__PURE__ */ jsxRuntime.jsx("path", {
2114
- d: "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
2115
- })]
2116
- }));
2117
- const Export = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
2118
- xmlns: "http://www.w3.org/2000/svg",
2119
- enableBackground: "new 0 0 24 24",
2120
- height: "24px",
2121
- viewBox: "0 0 24 24",
2122
- width: "24px",
2123
- fill: "currentColor",
2124
- children: [/* @__PURE__ */ jsxRuntime.jsx("g", {
2125
- children: /* @__PURE__ */ jsxRuntime.jsx("rect", {
2126
- fill: "none",
2127
- height: "24",
2128
- width: "24"
2129
- })
2130
- }), /* @__PURE__ */ jsxRuntime.jsx("g", {
2131
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
2132
- d: "M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"
2133
- })
2134
- })]
2135
- }));
2136
- const Clipboard = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
2137
- xmlns: "http://www.w3.org/2000/svg",
2138
- height: "24px",
2139
- viewBox: "0 0 24 24",
2140
- width: "24px",
2141
- fill: "currentColor",
2142
- children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
2143
- d: "M0 0h24v24H0V0z",
2144
- fill: "none"
2145
- }), /* @__PURE__ */ jsxRuntime.jsx("path", {
2146
- d: "M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"
2147
- })]
2148
- }));
2149
- const ChevronRight = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
2150
- xmlns: "http://www.w3.org/2000/svg",
2151
- height: "24px",
2152
- viewBox: "0 0 24 24",
2153
- width: "24px",
2154
- fill: "currentColor",
2155
- children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
2156
- d: "M0 0h24v24H0V0z",
2157
- fill: "none"
2158
- }), /* @__PURE__ */ jsxRuntime.jsx("path", {
2159
- d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"
2160
- })]
2161
- }));
2162
- const Search = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
2163
- xmlns: "http://www.w3.org/2000/svg",
2164
- height: "24px",
2165
- viewBox: "0 0 24 24",
2166
- width: "24px",
2167
- fill: "currentColor",
2168
- children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
2169
- d: "M0 0h24v24H0V0z",
2170
- fill: "none"
2171
- }), /* @__PURE__ */ jsxRuntime.jsx("path", {
2172
- d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
2173
- })]
2174
- }));
2175
- const Clear = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
2176
- xmlns: "http://www.w3.org/2000/svg",
2177
- height: "24px",
2178
- viewBox: "0 0 24 24",
2179
- width: "24px",
2180
- fill: "currentColor",
2181
- children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
2182
- d: "M0 0h24v24H0V0z",
2183
- fill: "none"
2184
- }), /* @__PURE__ */ jsxRuntime.jsx("path", {
2185
- d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
2186
- })]
2187
- }));
2188
- const ArrowDropDown = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
2189
- xmlns: "http://www.w3.org/2000/svg",
2190
- height: "24px",
2191
- viewBox: "0 0 24 24",
2192
- width: "24px",
2193
- fill: "currentColor",
2194
- children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
2195
- d: "M0 0h24v24H0V0z",
2196
- fill: "none"
2197
- }), /* @__PURE__ */ jsxRuntime.jsx("path", {
2198
- d: "M7 10l5 5 5-5H7z"
2199
- })]
2200
- }));
2201
- const FilterList = Icon(/* @__PURE__ */ jsxRuntime.jsx("svg", {
2202
- viewBox: "0 0 24 24",
2203
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
2204
- fill: "currentColor",
2205
- d: "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z"
2206
- })
2207
- }));
2208
- const ArrowUpward = Icon(/* @__PURE__ */ jsxRuntime.jsxs("svg", {
2209
- xmlns: "http://www.w3.org/2000/svg",
2210
- height: "24px",
2211
- viewBox: "0 0 24 24",
2212
- width: "24px",
2213
- fill: "currentColor",
2214
- children: [/* @__PURE__ */ jsxRuntime.jsx("path", {
2215
- d: "M0 0h24v24H0V0z",
2216
- fill: "none"
2217
- }), /* @__PURE__ */ jsxRuntime.jsx("path", {
2218
- d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
2219
- })]
2220
- }));
2221
- const defaultIcons = {
2222
- Settings,
2223
- Export,
2224
- Clipboard,
2225
- ChevronRight,
2226
- Search,
2227
- Clear,
2228
- ArrowDropDown,
2229
- FilterList,
2230
- ArrowUpward
2231
- };
2232
- const defaultTexts = {
2233
- selectColumns: "Select visible columns",
2234
- noResults: "No results",
2235
- exportTitle: "Export",
2236
- exportCopy: "To clipboard",
2237
- exportDownload: "Download",
2238
- today: "Today",
2239
- thisWeek: "This week",
2240
- clearFilters: "Clear all filters",
2241
- reset: "Reset",
2242
- loading: "Loading",
2243
- deselectAll: "Deselect all",
2244
- resetAll: "Reset table state"
2245
- };
2246
- const defaultTableTheme = {
2247
- text: defaultTexts,
2248
- components: defaultComponents,
2249
- icons: defaultIcons,
2250
- colors: defaultColors,
2251
- spacing: "5px"
2252
- };
2253
- const emptyStore = new react$1.Store(void 0);
2254
- function useTheme(selector) {
2255
- var _a, _b;
2256
- const contextTableTheme = react.useContext(tableTheme.TableThemeContext);
2257
- const table = react.useContext(TableContext);
2258
- const columnId = react.useContext(ColumnContext);
2259
- const memo = useTableMemo();
2260
- const process = (t) => {
2261
- var _a2;
2262
- const cell = (_a2 = t.classes) == null ? void 0 : _a2.cell;
2263
- return __spreadProps(__spreadValues({}, t), {
2264
- classes: __spreadProps(__spreadValues({}, t.classes), {
2265
- cell: cell instanceof Function || Array.isArray(cell) ? memo("theme.classes.cell", cell) : cell
2266
- }),
2267
- text: __spreadValues({}, t.text)
2268
- });
2269
- };
2270
- const theme = (_b = (_a = table == null ? void 0 : table.useState((state) => {
2271
- const localTheme = {
2272
- text: state.props.text,
2273
- classes: state.props.classes,
2274
- components: state.props.components,
2275
- icons: state.props.icons,
2276
- colors: state.props.colors,
2277
- spacing: state.props.spacing
2278
- };
2279
- const column = state.activeColumns.find((column2) => column2.id === columnId);
2280
- const columnsTheme = {
2281
- classes: column == null ? void 0 : column.classes
2282
- };
2283
- const theme2 = tableTheme.mergeThemes(defaultTableTheme, tableTheme.globalTableTheme, contextTableTheme, localTheme, columnsTheme);
2284
- return selector(process(theme2));
2285
- })) != null ? _a : emptyStore.useState()) != null ? _b : selector(process(tableTheme.mergeThemes(defaultTableTheme, tableTheme.globalTableTheme, contextTableTheme)));
2286
- return theme;
2287
- }
2288
- function AutoFocusTextField(props) {
2289
- const TextField2 = useTheme((t) => t.components.TextField);
2290
- const ref = react.useRef(null);
2291
- const {
2292
- visible
2293
- } = react.useContext(tableTheme.PopoverContext);
2294
- react.useLayoutEffect(() => {
2295
- if (visible && ref.current) {
2296
- ref.current.focus();
2297
- }
2298
- }, [visible]);
2299
- return /* @__PURE__ */ jsxRuntime.jsx(TextField2, __spreadProps(__spreadValues({}, props), {
2300
- inputRef: ref
2301
- }));
2302
- }
2303
- const className = "schummar-table-date-input";
2304
- const defaultDate = new Date(1970, 0, 1);
2305
- const isIncludedType = (type) => type === "day" || type === "month" || type === "year";
2306
- const defaultLengths = {
2307
- day: 2,
2308
- month: 2,
2309
- year: 4
2310
- };
2311
- const maxLengths = {
2312
- day: 2,
2313
- month: 2,
2314
- year: Infinity
2315
- };
2316
- const length = (type, value) => Math.max(value.length, defaultLengths[type]);
2317
- const tabNext = (e) => {
2318
- const all = Array.from(document.querySelectorAll(`.${className}`));
2319
- const index = all.indexOf(e);
2320
- const next = all[(index + 1) % all.length];
2321
- if (next instanceof HTMLElement) {
2322
- next.focus();
2323
- }
2324
- };
2325
- function DateInput({
2326
- value,
2327
- onChange,
2328
- locale
2329
- }) {
2330
- const [override, setOverride] = react.useState();
2331
- const commit = () => {
2332
- if (!override) {
2333
- return;
2334
- }
2335
- setOverride(void 0);
2336
- if (!override.value) {
2337
- onChange(null);
2338
- return;
2339
- }
2340
- const newValue = value ? new Date(value) : new Date();
2341
- if (override.type === "day") {
2342
- newValue.setDate(Number(override.value));
2343
- } else if (override.type === "month") {
2344
- newValue.setMonth(Number(override.value) - 1);
2345
- } else if (override.type === "year") {
2346
- newValue.setFullYear(Number(override.value));
2347
- }
2348
- onChange(newValue);
2349
- };
2350
- const format = react.useMemo(() => new Intl.DateTimeFormat(locale, {
2351
- day: "2-digit",
2352
- month: "2-digit",
2353
- year: "numeric"
2354
- }), [locale]);
2355
- const parts = format.formatToParts(value != null ? value : defaultDate);
2356
- const isEmpty = !value;
2357
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
2358
- css: {
2359
- display: "flex",
2360
- alignItems: "baseline"
2361
- },
2362
- children: parts.map(({
2363
- type,
2364
- value: value2
2365
- }, index) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, {
2366
- children: isIncludedType(type) ? /* @__PURE__ */ jsxRuntime.jsx("input", {
2367
- className,
2368
- css: {
2369
- width: `${length(type, value2)}ch`,
2370
- boxSizing: "content-box",
2371
- overflow: "visible",
2372
- border: "none",
2373
- borderBottom: "2px solid transparent",
2374
- outline: "none",
2375
- fontSize: "inherit",
2376
- "&:focus": {
2377
- borderBottom: "2px solid var(--primaryMain)"
2378
- }
2379
- },
2380
- placeholder: "".padEnd(length(type, value2), "0"),
2381
- value: (override == null ? void 0 : override.type) === type ? override.value : !isEmpty ? value2 : "",
2382
- onChange: (e) => {
2383
- setOverride({
2384
- type,
2385
- value: e.target.value
2386
- });
2387
- if (e.target.value.length >= maxLengths[type]) {
2388
- setTimeout(() => tabNext(e.target));
2389
- }
2390
- },
2391
- onFocus: (e) => e.target.select(),
2392
- onBlur: commit
2393
- }) : type === "literal" ? /* @__PURE__ */ jsxRuntime.jsx("span", {
2394
- children: value2
2395
- }) : null
2396
- }, index))
2397
- });
2398
- }
2399
- const weekDays = [0, 1, 2, 3, 4, 5, 6];
2400
- const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
2401
- const endOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 0, 0, 0, -1);
2402
- const today = () => {
2403
- const today2 = startOfDay(new Date());
2404
- return {
2405
- min: today2,
2406
- max: today2
2407
- };
2408
- };
2409
- const thisWeek = (firstDayOfWeek = 0) => {
2410
- const now = new Date();
2411
- const min = new Date(now);
2412
- let diff = min.getDay() - firstDayOfWeek;
2413
- if (diff < 0) {
2414
- diff += 7;
2415
- }
2416
- min.setDate(min.getDate() - diff);
2417
- const max = new Date(min);
2418
- max.setDate(max.getDate() + 6);
2419
- return {
2420
- min: startOfDay(min),
2421
- max: endOfDay(max)
2422
- };
2423
- };
2424
- function dateIntersect(a, b) {
2425
- if (a instanceof Date) {
2426
- a = {
2427
- min: a,
2428
- max: a
2429
- };
2430
- }
2431
- if (b instanceof Date) {
2432
- b = {
2433
- min: b,
2434
- max: b
2435
- };
2436
- }
2437
- if (!(a == null ? void 0 : a.min) || !a.max || !(b == null ? void 0 : b.min) || !b.max) {
2438
- return false;
2439
- }
2440
- return !(endOfDay(a.max) < startOfDay(b.min) || startOfDay(a.min) > endOfDay(b.max));
2441
- }
2442
- function DatePicker({
2443
- value,
2444
- onChange,
2445
- rangeSelect,
2446
- locale,
2447
- firstDayOfWeek = 0
2448
- }) {
2449
- const Button2 = useTheme((t) => t.components.Button);
2450
- const IconButton2 = useTheme((t) => t.components.IconButton);
2451
- const ChevronRight2 = useTheme((t) => t.icons.ChevronRight);
2452
- const textToday = useTheme((t) => t.text.today);
2453
- const textThisWeek = useTheme((t) => t.text.thisWeek);
2454
- const textReset = useTheme((t) => t.text.reset);
2455
- const cssVariables = useCssVariables();
2456
- const [baseDate] = react.useState(new Date());
2457
- const [dateInView, setDateInView] = react.useState(baseDate);
2458
- const [dirty, setDirty] = react.useState();
2459
- const [hovered, setHovered] = react.useState();
2460
- const min = dirty ? dirty.min : value instanceof Date ? value : value == null ? void 0 : value.min;
2461
- const max = dirty ? dirty.max : value instanceof Date ? value : value == null ? void 0 : value.max;
2462
- const {
2463
- calendars,
2464
- getBackProps,
2465
- getForwardProps,
2466
- getDateProps
2467
- } = dayzed.useDayzed({
2468
- onDateSelected: () => void 0,
2469
- firstDayOfWeek,
2470
- showOutsideDays: true,
2471
- date: dateInView,
2472
- onOffsetChanged: (offset) => setDateInView(new Date(dateInView.getFullYear(), dateInView.getMonth() + offset)),
2473
- offset: 0
2474
- });
2475
- const formatWeekday = react.useMemo(() => {
2476
- const {
2477
- format
2478
- } = new Intl.DateTimeFormat(locale, {
2479
- weekday: "short"
2480
- });
2481
- return (weekDay) => format(new Date(Date.UTC(2021, 5, weekDay)));
2482
- }, [locale]);
2483
- react.useEffect(() => setDateInView(value === null ? new Date() : value instanceof Date ? value : value.max), [value]);
2484
- react.useEffect(() => {
2485
- if (!rangeSelect) {
2486
- setDirty(void 0);
2487
- }
2488
- }, [rangeSelect]);
2489
- function set(min2, max2, edit) {
2490
- if (!rangeSelect) {
2491
- onChange(min2 != null ? min2 : null);
2492
- return;
2493
- }
2494
- if (min2 && max2 && min2 > max2) {
2495
- if (edit === "min") {
2496
- max2 = min2;
2497
- } else if (edit === "max") {
2498
- min2 = max2;
2499
- } else {
2500
- [min2, max2] = [max2, min2];
2501
- }
2502
- }
2503
- if (!min2 === !max2) {
2504
- setDirty(void 0);
2505
- onChange(min2 && max2 ? {
2506
- min: min2,
2507
- max: max2
2508
- } : null);
2509
- } else {
2510
- setDirty({
2511
- min: min2,
2512
- max: max2
2513
- });
2514
- }
2515
- }
2516
- const formatMonth = react.useMemo(() => {
2517
- const {
2518
- format
2519
- } = new Intl.DateTimeFormat(locale, {
2520
- month: "long"
2521
- });
2522
- return (month) => format(new Date(2021, month));
2523
- }, [locale]);
2524
- const formatYear = react.useMemo(() => {
2525
- const {
2526
- format
2527
- } = new Intl.DateTimeFormat(locale, {
2528
- year: "numeric"
2529
- });
2530
- return (year) => format(new Date(year, 0, 1));
2531
- }, [locale]);
2532
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
2533
- css: cssVariables,
2534
- children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
2535
- css: {
2536
- display: "grid",
2537
- gridAutoFlow: "column",
2538
- justifyContent: "center",
2539
- alignItems: "baseline",
2540
- gap: "var(--spacing)"
2541
- },
2542
- children: [/* @__PURE__ */ jsxRuntime.jsx(DateInput, {
2543
- value: min != null ? min : null,
2544
- onChange: (date) => set(date != null ? date : void 0, max, "min"),
2545
- locale
2546
- }), rangeSelect && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
2547
- children: [" - ", /* @__PURE__ */ jsxRuntime.jsx(DateInput, {
2548
- value: max != null ? max : null,
2549
- onChange: (date) => set(min, date != null ? date : void 0, "max"),
2550
- locale
2551
- })]
2552
- })]
2553
- }), calendars.map(({
2554
- month,
2555
- year,
2556
- weeks
2557
- }) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
2558
- css: {
2559
- display: "grid"
2560
- },
2561
- children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
2562
- css: {
2563
- margin: "calc(var(--spacing) * 4) 0",
2564
- display: "grid",
2565
- gridAutoFlow: "column",
2566
- justifyContent: "space-between",
2567
- alignItems: "center"
2568
- },
2569
- children: [/* @__PURE__ */ jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({}, getBackProps({
2570
- calendars
2571
- })), {
2572
- children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {
2573
- css: {
2574
- transform: "rotate3d(0, 0, 1, 180deg)"
2575
- }
2576
- })
2577
- })), /* @__PURE__ */ jsxRuntime.jsxs("div", {
2578
- css: {
2579
- display: "flex"
2580
- },
2581
- children: [formatMonth(month), " ", formatYear(year)]
2582
- }), /* @__PURE__ */ jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({}, getForwardProps({
2583
- calendars
2584
- })), {
2585
- children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {})
2586
- }))]
2587
- }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
2588
- css: {
2589
- justifySelf: "center",
2590
- display: "grid",
2591
- gridTemplateColumns: "repeat(7, max-content)",
2592
- fontWeight: "bold"
2593
- },
2594
- children: [weekDays.map((_v, weekDay) => /* @__PURE__ */ jsxRuntime.jsx("div", {
2595
- css: {
2596
- justifySelf: "center",
2597
- marginBottom: "var(--spacing)"
2598
- },
2599
- children: formatWeekday(weekDay)
2600
- }, weekDay)), weeks.map((week, index) => week.map((dateObj, dayIndex) => {
2601
- if (!dateObj) {
2602
- return /* @__PURE__ */ jsxRuntime.jsx("div", {});
2603
- }
2604
- const {
2605
- prevMonth,
2606
- nextMonth,
2607
- date,
2608
- today: today2
2609
- } = dateObj;
2610
- const selected = date.getTime() === (min == null ? void 0 : min.getTime()) || min && max && dateIntersect(date, {
2611
- min,
2612
- max
2613
- });
2614
- const preSelected = !selected && (date.getTime() === (hovered == null ? void 0 : hovered.getTime()) || min && !max && hovered && dateIntersect(date, min <= hovered ? {
2615
- min,
2616
- max: hovered
2617
- } : {
2618
- min: hovered,
2619
- max: min
2620
- }));
2621
- return /* @__PURE__ */ jsxRuntime.jsx("button", __spreadProps(__spreadValues({
2622
- css: [{
2623
- padding: 10,
2624
- border: "1px solid transparent",
2625
- background: "transparent",
2626
- cursor: "pointer"
2627
- }, (prevMonth || nextMonth) && {
2628
- color: tableTheme.gray
2629
- }, today2 && {
2630
- border: "1px solid var(--secondaryMain)"
2631
- }, selected && {
2632
- background: "var(--primaryMain)",
2633
- color: "var(--primaryContrastText)"
2634
- }, preSelected && {
2635
- background: "var(--primaryLight)",
2636
- color: "var(--primaryContrastText)"
2637
- }]
2638
- }, getDateProps({
2639
- dateObj
2640
- })), {
2641
- onClick: () => {
2642
- if (dirty) {
2643
- if (min)
2644
- set(min, date);
2645
- else
2646
- set(date, max);
2647
- } else {
2648
- set(date);
2649
- }
2650
- },
2651
- onPointerOver: () => setHovered(date),
2652
- onPointerOut: () => setHovered(void 0),
2653
- children: date.getDate()
2654
- }), `${index}-${dayIndex}`);
2655
- }))]
2656
- })]
2657
- }, `${month}${year}`)), /* @__PURE__ */ jsxRuntime.jsxs("div", {
2658
- css: {
2659
- marginTop: "var(--spacing)",
2660
- display: "grid",
2661
- gridAutoFlow: "column",
2662
- justifyContent: "center"
2663
- },
2664
- children: [/* @__PURE__ */ jsxRuntime.jsx(Button2, {
2665
- variant: "text",
2666
- onClick: () => {
2667
- setDirty(void 0);
2668
- onChange(today());
2669
- },
2670
- children: textToday
2671
- }), /* @__PURE__ */ jsxRuntime.jsx(Button2, {
2672
- variant: "text",
2673
- onClick: () => {
2674
- setDirty(void 0);
2675
- onChange(thisWeek(firstDayOfWeek));
2676
- },
2677
- children: textThisWeek
2678
- }), /* @__PURE__ */ jsxRuntime.jsx(Button2, {
2679
- variant: "text",
2680
- onClick: () => {
2681
- setDirty(void 0);
2682
- onChange(null);
2683
- },
2684
- children: textReset
2685
- })]
2686
- })]
2687
- });
2688
- }
2689
- function convertDate(x) {
2690
- if (x instanceof Date)
2691
- return x;
2692
- if (typeof x === "number" || typeof x === "string")
2693
- return new Date(x);
2694
- return null;
2695
- }
2696
- function convertDateOrRange(x) {
2697
- if (x instanceof Object && "min" in x && "max" in x) {
2698
- const range = {
2699
- min: convertDate(x.min),
2700
- max: convertDate(x.max)
2701
- };
2702
- return range.min && range.max ? range : null;
2703
- }
2704
- return convertDate(x);
2705
- }
2706
- function convertDateOrArray(x) {
2707
- if (x instanceof Array)
2708
- return x.map(convertDateOrRange).filter(Boolean);
2709
- return convertDateOrRange(x);
2710
- }
2711
- function DateFilter(_k) {
2712
- var _l = _k, {
2713
- locale,
2714
- firstDayOfWeek,
2715
- singleSelect,
2716
- filterBy = convertDateOrArray
2717
- } = _l, props = __objRest(_l, [
2718
- "locale",
2719
- "firstDayOfWeek",
2720
- "singleSelect",
2721
- "filterBy"
2722
- ]);
2723
- const {
2724
- value = null,
2725
- onChange
2726
- } = useFilter(__spreadProps(__spreadValues({}, props), {
2727
- filterBy,
2728
- id: "dateFilter",
2729
- isActive(filterValue) {
2730
- return !!filterValue;
2731
- },
2732
- test(filterValue, value2) {
2733
- return dateIntersect(filterValue, value2);
2734
- }
2735
- }));
2736
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
2737
- css: {
2738
- padding: "calc(var(--spacing) * 2)",
2739
- display: "grid"
2740
- },
2741
- children: /* @__PURE__ */ jsxRuntime.jsx(DatePicker, {
2742
- rangeSelect: !singleSelect,
2743
- value,
2744
- onChange,
2745
- locale,
2746
- firstDayOfWeek
2747
- })
2748
- });
2749
- }
2750
- function toggle(set, value, singleSelect) {
2751
- const newSet = new Set(singleSelect ? [] : set);
2752
- if (set.has(value)) {
2753
- newSet.delete(value);
2754
- } else {
2755
- newSet.add(value);
2756
- }
2757
- return newSet;
2758
- }
2759
- function SelectFilter(_m) {
2760
- var _n = _m, {
2761
- options: providedOptions,
2762
- stringValue = asString,
2763
- render = stringValue,
2764
- singleSelect
2765
- } = _n, props = __objRest(_n, [
2766
- "options",
2767
- "stringValue",
2768
- "render",
2769
- "singleSelect"
2770
- ]);
2771
- const IconButton2 = useTheme((t) => t.components.IconButton);
2772
- const Checkbox2 = useTheme((t) => t.components.Checkbox);
2773
- const Search2 = useTheme((t) => t.icons.Search);
2774
- const Clear2 = useTheme((t) => t.icons.Clear);
2775
- const deselectAll = useTheme((t) => t.text.deselectAll);
2776
- const noResults = useTheme((t) => t.text.noResults);
2777
- const table = useTableContext();
2778
- const columnId = useColumnContext();
2779
- const {
2780
- value = /* @__PURE__ */ new Set(),
2781
- onChange,
2782
- filterBy
2783
- } = useFilter(__spreadProps(__spreadValues({}, props), {
2784
- id: "selectFilter",
2785
- isActive(filterValue) {
2786
- return filterValue.size > 0;
2787
- },
2788
- test(filterValue, value2) {
2789
- return filterValue.has(value2);
2790
- }
2791
- }));
2792
- const options = table.useState((state) => {
2793
- if (providedOptions)
2794
- return uniq(providedOptions);
2795
- const column = state.activeColumns.find((column2) => column2.id === columnId);
2796
- if (!column)
2797
- return [];
2798
- return uniq(flatMap(state.items, (item) => castArray(filterBy(column.value(item.value), item.value))));
2799
- });
2800
- const [query, setQuery] = react.useState("");
2801
- const filtered = options.filter((option) => !query || stringValue(option).toLowerCase().includes(query.toLowerCase()));
2802
- const Button2 = useTheme((t) => t.components.Button);
2803
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
2804
- css: {
2805
- padding: "calc(var(--spacing) * 2)",
2806
- display: "grid",
2807
- gap: "var(--spacing)"
2808
- },
2809
- children: [/* @__PURE__ */ jsxRuntime.jsx(AutoFocusTextField, {
2810
- value: query,
2811
- onChange: (e) => setQuery(e.target.value),
2812
- endIcon: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, {
2813
- onClick: () => setQuery(""),
2814
- children: !query ? /* @__PURE__ */ jsxRuntime.jsx(Search2, {}) : /* @__PURE__ */ jsxRuntime.jsx(Clear2, {})
2815
- }),
2816
- css: {
2817
- marginBottom: "var(--spacing)"
2818
- }
2819
- }), /* @__PURE__ */ jsxRuntime.jsx(Button2, {
2820
- disabled: !(value.size > 0),
2821
- onClick: () => onChange(/* @__PURE__ */ new Set()),
2822
- variant: "outlined",
2823
- css: {
2824
- justifyContent: "center",
2825
- width: "100%",
2826
- marginBottom: "var(--spacing)"
2827
- },
2828
- children: deselectAll
2829
- }), /* @__PURE__ */ jsxRuntime.jsx("div", {
2830
- css: {
2831
- maxHeight: "20em",
2832
- overflowY: "auto"
2833
- },
2834
- children: filtered.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(FormControlLabel, {
2835
- control: /* @__PURE__ */ jsxRuntime.jsx(Checkbox2, {
2836
- checked: value.has(option),
2837
- onChange: () => onChange(toggle(value, option, singleSelect))
2838
- }),
2839
- label: render(option)
2840
- }, index))
2841
- }), filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", {
2842
- css: {
2843
- textAlign: "center"
2844
- },
2845
- children: noResults
2846
- })]
2847
- });
2848
- }
2849
- function debounce(fn, ms) {
2850
- let lastArgs;
2851
- let timeout;
2852
- function run() {
2853
- const args = lastArgs;
2854
- lastArgs = void 0;
2855
- timeout = void 0;
2856
- fn(...args);
2857
- }
2858
- return Object.assign(function(...args) {
2859
- lastArgs = args;
2860
- if (timeout) {
2861
- clearTimeout(timeout);
2862
- }
2863
- timeout = setTimeout(run, ms);
2864
- }, {
2865
- flush() {
2866
- if (timeout) {
2867
- clearTimeout(timeout);
2868
- run();
2869
- }
2870
- }
2871
- });
2872
- }
2873
- function useFilter(impl) {
2874
- const table = useTableContext();
2875
- const columnId = useColumnContext();
2876
- const cache = useTableMemo();
2877
- const filterBy = impl.filterBy && cache("", impl.filterBy);
2878
- react.useEffect(() => {
2879
- table.update((state) => {
2880
- if (impl.defaultValue !== void 0) {
2881
- state.filterValues.set(columnId, impl.defaultValue);
2882
- }
2883
- });
2884
- }, []);
2885
- react.useEffect(() => {
2886
- table.update((state) => {
2887
- state.filters.set(columnId, immer.castDraft(__spreadProps(__spreadValues({}, impl), { filterBy })));
2888
- if (impl.value !== void 0) {
2889
- state.filterValues.set(columnId, impl.value);
2890
- }
2891
- });
2892
- return () => {
2893
- table.update((state) => {
2894
- state.filters.delete(columnId);
2895
- });
2896
- };
2897
- }, [table, columnId, impl]);
2898
- const value = table.useState((state) => state.filterValues.get(columnId));
2899
- const [dirtyValue, setDirtyValue] = react.useState();
2900
- const implRef = react.useRef(impl);
2901
- react.useLayoutEffect(() => {
2902
- implRef.current = impl;
2903
- });
2904
- const delayedUpdate = react.useMemo(() => debounce((value2) => {
2905
- const { value: controlledValue, onChange: onChange2 } = implRef.current;
2906
- if (controlledValue === void 0) {
2907
- table.update((state) => {
2908
- state.filterValues.set(columnId, value2);
2909
- });
2910
- }
2911
- onChange2 == null ? void 0 : onChange2(value2);
2912
- setDirtyValue(void 0);
2913
- }, 500), [table]);
2914
- function onChange(value2) {
2915
- setDirtyValue(value2);
2916
- delayedUpdate(value2);
2917
- }
2918
- react.useEffect(() => delayedUpdate.flush(), [delayedUpdate]);
2919
- return {
2920
- value: dirtyValue != null ? dirtyValue : value,
2921
- onChange,
2922
- close: react.useContext(FilterControlContext),
2923
- filterBy: filterBy != null ? filterBy : (x) => x
2924
- };
2925
- }
2926
- const textMatch = (text, query) => {
2927
- text = text.toLowerCase();
2928
- query = query.toLowerCase();
2929
- return query.split(/\s+/).every((part) => termMatch(text, part));
2930
- };
2931
- const termMatch = (text, query) => {
2932
- let i = 0;
2933
- outer:
2934
- for (const char of query) {
2935
- for (; i < text.length; i++) {
2936
- if (text[i] === char) {
2937
- i++;
2938
- continue outer;
2939
- }
2940
- }
2941
- return false;
2942
- }
2943
- return true;
2944
- };
2945
- function TextFilter(_o) {
2946
- var _p = _o, {
2947
- compare = textMatch,
2948
- filterBy = asStringOrArray
2949
- } = _p, props = __objRest(_p, [
2950
- "compare",
2951
- "filterBy"
2952
- ]);
2953
- const IconButton2 = useTheme((t) => t.components.IconButton);
2954
- const Search2 = useTheme((t) => t.icons.Search);
2955
- const Clear2 = useTheme((t) => t.icons.Clear);
2956
- const {
2957
- value = "",
2958
- onChange
2959
- } = useFilter(__spreadProps(__spreadValues({}, props), {
2960
- filterBy,
2961
- id: "textFilter",
2962
- isActive(filterValue) {
2963
- return !!filterValue;
2964
- },
2965
- test(filterValue, value2) {
2966
- return compare(value2, filterValue);
2967
- }
2968
- }));
2969
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
2970
- css: {
2971
- padding: `calc(var(--spacing) * 2)`,
2972
- display: "grid"
2973
- },
2974
- children: /* @__PURE__ */ jsxRuntime.jsx(AutoFocusTextField, {
2975
- value,
2976
- onChange: (e) => onChange(e.target.value),
2977
- endIcon: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, {
2978
- onClick: () => onChange(""),
2979
- children: !value ? /* @__PURE__ */ jsxRuntime.jsx(Search2, {}) : /* @__PURE__ */ jsxRuntime.jsx(Clear2, {})
2980
- })
2981
- })
2982
- });
2983
- }
2984
- exports.TableThemeContext = tableTheme.TableThemeContext;
2985
- exports.TableThemeProvider = tableTheme.TableThemeProvider;
2986
- exports.configureTableTheme = tableTheme.configureTableTheme;
2987
- exports.mergeThemes = tableTheme.mergeThemes;
2988
- exports.AutoFocusTextField = AutoFocusTextField;
2989
- exports.ColumnContext = ColumnContext;
2990
- exports.DateFilter = DateFilter;
2991
- exports.DatePicker = DatePicker;
2992
- exports.SelectFilter = SelectFilter;
2993
- exports.Table = Table;
2994
- exports.TableContext = TableContext;
2995
- exports.TextFilter = TextFilter;
2996
- exports.dateIntersect = dateIntersect;
2997
- exports.endOfDay = endOfDay;
2998
- exports.startOfDay = startOfDay;
2999
- exports.termMatch = termMatch;
3000
- exports.textMatch = textMatch;
3001
- exports.useColumnContext = useColumnContext;
3002
- exports.useFilter = useFilter;
3003
- exports.useTableContext = useTableContext;
3004
- exports.useTheme = useTheme;
3005
- //# sourceMappingURL=index.js.map