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