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