@worknice/whiteboard 0.43.0 → 0.44.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 (40) hide show
  1. package/dist/controls/LinkCard.d.ts +2 -1
  2. package/dist/controls/LinkCard.js +2 -1
  3. package/dist/controls/LinkCard.stories.d.ts +2 -1
  4. package/dist/fields/TimezoneField.d.ts +1 -1
  5. package/dist/fields/TimezoneField.js +3 -535
  6. package/dist/fields/TimezoneField.stories.d.ts +1 -1
  7. package/dist/fields/TimezoneField.stories.js +1 -1
  8. package/dist/forms/useForm.js +5 -2
  9. package/dist/icons/RestoreIcon.js +1 -3
  10. package/dist/icons/TableIcon.d.ts +3 -0
  11. package/dist/icons/TableIcon.js +11 -0
  12. package/dist/icons/index.d.ts +1 -0
  13. package/dist/icons/index.js +2 -1
  14. package/dist/inputs/CheckboxInput.js +1 -0
  15. package/dist/inputs/CheckboxInput.module.js +1 -0
  16. package/dist/inputs/CheckboxInput_module.css +4 -0
  17. package/dist/inputs/ListBoxInput_module.css +2 -1
  18. package/dist/presentation/CustomizableTable/ConfigureColumnsModal.d.ts +12 -0
  19. package/dist/presentation/CustomizableTable/ConfigureColumnsModal.js +72 -0
  20. package/dist/presentation/CustomizableTable/CustomizableTable.d.ts +23 -41
  21. package/dist/presentation/CustomizableTable/CustomizableTable.js +569 -202
  22. package/dist/presentation/CustomizableTable/CustomizableTable.module.js +19 -14
  23. package/dist/presentation/CustomizableTable/CustomizableTable_module.css +100 -81
  24. package/dist/presentation/Table.d.ts +2 -27
  25. package/dist/presentation/Table.js +5 -280
  26. package/dist/presentation/TableColumnFilterModal.d.ts +41 -0
  27. package/dist/presentation/TableColumnFilterModal.js +271 -0
  28. package/dist/utils/tables.d.ts +8 -0
  29. package/dist/utils/tables.js +18 -0
  30. package/package.json +4 -4
  31. package/dist/presentation/CustomizableTable/CustomizableTableContents.d.ts +0 -38
  32. package/dist/presentation/CustomizableTable/CustomizableTableContents.js +0 -305
  33. package/dist/presentation/CustomizableTable/CustomizableTableContents.module.js +0 -18
  34. package/dist/presentation/CustomizableTable/CustomizableTableContents_module.css +0 -148
  35. package/dist/presentation/CustomizableTable/CustomizableTableDetails.d.ts +0 -22
  36. package/dist/presentation/CustomizableTable/CustomizableTableDetails.js +0 -74
  37. package/dist/presentation/CustomizableTable/CustomizableTableDetails.module.js +0 -6
  38. package/dist/presentation/CustomizableTable/CustomizableTableDetails_module.css +0 -40
  39. package/dist/presentation/CustomizableTable/TableFilterModal.d.ts +0 -23
  40. package/dist/presentation/CustomizableTable/TableFilterModal.js +0 -77
@@ -1,18 +1,23 @@
1
1
  import "./CustomizableTable_module.css";
2
2
  const CustomizableTable_module_rslib_entry_ = {
3
- tableContainer: "tableContainer-b_DkVn",
4
- table: "table-FUWShB",
5
- tableHead: "tableHead-Lbqc0I",
6
- tableBody: "tableBody-VLqvUf",
7
- tableRow: "tableRow-PdxrMj",
8
- noColumns: "noColumns-WwXABG",
9
- tableHeader: "tableHeader-xE1nVb",
10
- tableCell: "tableCell-wjMuxt",
11
- selectionCell: "selectionCell-CkTFs6",
12
- sortableTableHeader: "sortableTableHeader-C9ukFe",
13
- sortIcon: "sortIcon-f1d4Pn",
14
- draggingHeader: "draggingHeader-gFIch1",
15
- noRows: "noRows-tPi8_B",
16
- resizer: "resizer-lAB8l9"
3
+ root: "root-DTfM83",
4
+ mainColumn: "mainColumn-_GB7tY",
5
+ columnStack: "columnStack-supahl",
6
+ scrollArea: "scrollArea-vsxHSb",
7
+ tableHorizontal: "tableHorizontal-MnYrd2",
8
+ tableHorizontalLoading: "tableHorizontalLoading-VgI1v9",
9
+ tableHorizontalInner: "tableHorizontalInner-FLT6k_",
10
+ stickyHead: "stickyHead-hgplSL",
11
+ bodyScroll: "bodyScroll-qc_hYy",
12
+ cell: "cell-TKX6Qc",
13
+ cellClip: "cellClip-IlZpuX",
14
+ row: "row-CDOLw0",
15
+ loadingCell: "loadingCell-iYJfPV",
16
+ headerCell: "headerCell-HsDaea",
17
+ headerSortable: "headerSortable-fnjI8P",
18
+ headerSortIcon: "headerSortIcon-bQ1b0E",
19
+ headerRow: "headerRow-svcYtY",
20
+ columnResizer: "columnResizer-geDiQ7",
21
+ dragOverlayHeader: "dragOverlayHeader-iH8r0z"
17
22
  };
18
23
  export { CustomizableTable_module_rslib_entry_ as default };
@@ -1,71 +1,115 @@
1
- .tableContainer-b_DkVn {
1
+ .root-DTfM83, .mainColumn-_GB7tY {
2
+ flex-direction: column;
3
+ flex: 1;
4
+ min-width: 0;
5
+ min-height: 0;
6
+ display: flex;
7
+ }
8
+
9
+ .columnStack-supahl {
10
+ gap: var(--size-p2);
11
+ flex-direction: column;
12
+ flex: 1;
13
+ min-width: 0;
14
+ min-height: 0;
15
+ display: flex;
16
+ }
17
+
18
+ .scrollArea-vsxHSb {
2
19
  background: var(--color-white);
3
20
  border-radius: var(--size-n3);
4
21
  border: solid var(--size-n5) var(--color-grey-t08);
22
+ min-height: 0;
5
23
  color: var(--color-grey-s01);
6
- width: 100%;
7
- overflow-x: auto;
24
+ flex: 1;
25
+ overflow: hidden;
8
26
  }
9
27
 
10
- .table-FUWShB {
11
- border-collapse: collapse;
12
- table-layout: fixed;
28
+ .tableHorizontal-MnYrd2 {
29
+ flex-direction: column;
13
30
  width: 100%;
31
+ height: 100%;
32
+ display: flex;
33
+ overflow: auto hidden;
14
34
  }
15
35
 
16
- .tableHead-Lbqc0I {
17
- display: table-header-group;
36
+ .tableHorizontalLoading-VgI1v9 {
37
+ overflow-x: hidden;
18
38
  }
19
39
 
20
- .tableBody-VLqvUf {
21
- display: table-row-group;
40
+ .tableHorizontalInner-FLT6k_ {
41
+ box-sizing: border-box;
42
+ flex-direction: column;
43
+ flex: 1;
44
+ min-height: 0;
45
+ display: flex;
22
46
  }
23
47
 
24
- .tableRow-PdxrMj {
25
- border-top: solid var(--size-n5) var(--color-grey-t08);
26
- display: table-row;
48
+ .stickyHead-hgplSL tr {
49
+ background: var(--color-white);
27
50
  }
28
51
 
29
- .tableHead-Lbqc0I .tableRow-PdxrMj, .noColumns-WwXABG .tableRow-PdxrMj {
30
- border-top: none;
52
+ .stickyHead-hgplSL th {
53
+ background: var(--color-white);
54
+ border-bottom: solid var(--size-n5) var(--color-grey-t08);
55
+ position: sticky;
56
+ top: 0;
31
57
  }
32
58
 
33
- .tableHeader-xE1nVb {
34
- font: var(--font-regular-bold);
35
- white-space: normal;
36
- word-break: break-word;
37
- padding: var(--size-00);
38
- border-right: solid var(--size-n5) var(--color-grey-t08);
39
- vertical-align: middle;
40
- text-overflow: ellipsis;
41
- box-sizing: border-box;
42
- display: table-cell;
43
- position: relative;
44
- overflow: hidden;
59
+ .bodyScroll-qc_hYy {
60
+ flex: 1;
61
+ min-height: 0;
62
+ overflow: hidden auto;
45
63
  }
46
64
 
47
- .tableCell-wjMuxt {
48
- padding: var(--size-00);
65
+ .cell-TKX6Qc {
49
66
  border-right: solid var(--size-n5) var(--color-grey-t08);
50
- vertical-align: middle;
51
- white-space: normal;
52
- word-break: break-word;
67
+ padding-left: var(--size-00);
68
+ padding-top: var(--size-00);
69
+ padding-bottom: var(--size-00);
70
+ }
71
+
72
+ .cell-TKX6Qc:last-child {
73
+ padding-right: var(--size-00);
74
+ border-right: none;
75
+ }
76
+
77
+ .cellClip-IlZpuX {
53
78
  text-overflow: ellipsis;
54
- box-sizing: border-box;
55
- display: table-cell;
56
- position: relative;
79
+ white-space: nowrap;
80
+ min-width: 0;
81
+ max-width: 100%;
57
82
  overflow: hidden;
58
83
  }
59
84
 
60
- .tableCell-wjMuxt:last-child, .tableHeader-xE1nVb:last-child {
61
- border-right: none;
85
+ .row-CDOLw0 {
86
+ gap: 0 !important;
87
+ padding: 0 !important;
88
+ }
89
+
90
+ .bodyScroll-qc_hYy .row-CDOLw0:first-child {
91
+ border-top: none;
92
+ }
93
+
94
+ .loadingCell-iYJfPV {
95
+ justify-content: center;
96
+ align-items: center;
97
+ display: flex;
62
98
  }
63
99
 
64
- .tableHeader-xE1nVb:not(.selectionCell-CkTFs6) {
100
+ .headerCell-HsDaea {
65
101
  cursor: grab;
102
+ padding-top: var(--size-00);
103
+ padding-bottom: var(--size-00);
104
+ padding-left: var(--size-00);
105
+ position: relative;
106
+ }
107
+
108
+ .headerCell-HsDaea:last-child {
109
+ padding-right: var(--size-00);
66
110
  }
67
111
 
68
- .sortableTableHeader-C9ukFe {
112
+ .headerSortable-fnjI8P {
69
113
  gap: var(--size-n2);
70
114
  text-align: left;
71
115
  width: 100%;
@@ -83,53 +127,17 @@
83
127
  overflow: hidden;
84
128
  }
85
129
 
86
- .sortIcon-f1d4Pn {
130
+ .headerSortIcon-bQ1b0E {
87
131
  flex-shrink: 0;
88
132
  }
89
133
 
90
- .selectionCell-CkTFs6 {
91
- -webkit-user-select: none;
92
- user-select: none;
93
- width: 64px;
94
- min-width: 64px;
95
- max-width: 64px;
96
- padding: var(--size-00);
97
- text-align: center;
98
- white-space: nowrap;
99
- vertical-align: middle;
100
- display: table-cell;
101
- }
102
-
103
- .selectionCell-CkTFs6 > div {
104
- justify-content: center;
105
- align-items: center;
134
+ .headerRow-svcYtY {
135
+ gap: 0;
106
136
  width: 100%;
107
- height: 100%;
108
- display: inline-flex;
109
- }
110
-
111
- .draggingHeader-gFIch1 {
112
- background: var(--color-white);
113
- border: solid var(--size-n5) var(--color-grey-t08);
114
- border-radius: var(--size-n3);
115
- padding: var(--size-00);
116
- cursor: grabbing;
117
- -webkit-user-select: none;
118
- user-select: none;
119
- box-shadow: var(--shadow-1);
120
- }
121
-
122
- .noRows-tPi8_B {
123
- padding: var(--size-p3) var(--size-00);
124
- text-align: center;
125
- width: 100%;
126
- }
127
-
128
- .noRows-tPi8_B > svg {
129
- display: inline;
137
+ display: flex;
130
138
  }
131
139
 
132
- .resizer-lAB8l9 {
140
+ .columnResizer-geDiQ7 {
133
141
  cursor: col-resize;
134
142
  -webkit-user-select: none;
135
143
  user-select: none;
@@ -142,7 +150,18 @@
142
150
  right: 0;
143
151
  }
144
152
 
145
- .resizer-lAB8l9:hover, .resizer-lAB8l9:active {
153
+ .columnResizer-geDiQ7:hover, .columnResizer-geDiQ7:active {
146
154
  background: var(--color-grey-t08);
147
155
  }
148
156
 
157
+ .dragOverlayHeader-iH8r0z {
158
+ background: var(--color-white);
159
+ border: solid var(--size-n5) var(--color-grey-t08);
160
+ border-radius: var(--size-n3);
161
+ padding: var(--size-00);
162
+ cursor: grabbing;
163
+ -webkit-user-select: none;
164
+ user-select: none;
165
+ box-shadow: var(--shadow-1);
166
+ }
167
+
@@ -2,33 +2,8 @@ import type { SortingColumnDef } from "@tanstack/react-table";
2
2
  import { type ReactNode } from "react";
3
3
  import { type ZodTypeAny } from "zod";
4
4
  import { type MenuButtonOption } from "../controls/MenuButton";
5
- type PrimitiveValue = boolean | string | undefined | number;
6
- type SingleFilterOption<Type> = {
7
- id: string;
8
- label: string;
9
- /**
10
- * If omitted true will always be returned and no filtering will be applied (e.g. "Any" option).
11
- */
12
- predicate?: (row: Type) => boolean;
13
- };
14
- type MultiFilterOption<Type> = {
15
- id: string;
16
- label: string;
17
- predicate: (row: Type) => boolean;
18
- };
19
- /**
20
- * When using single select filters (isMulti: false), the first option is the default value.
21
- * Multi select filters (isMulti: true) have no default value.
22
- */
23
- type Filter<Type> = {
24
- isMulti?: false;
25
- label: string;
26
- options: Array<SingleFilterOption<Type>>;
27
- } | {
28
- isMulti: true;
29
- label: string;
30
- options: Array<MultiFilterOption<Type>>;
31
- };
5
+ import { type PrimitiveValue } from "../utils/tables";
6
+ import { type Filter } from "./TableColumnFilterModal";
32
7
  type Grouping<Type> = {
33
8
  fn: (row: Type) => string;
34
9
  header: (row: Type) => ReactNode;
@@ -5,32 +5,24 @@ import * as __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__ from "@ta
5
5
  import * as __WEBPACK_EXTERNAL_MODULE__tanstack_react_virtual_e7b31bc6__ from "@tanstack/react-virtual";
6
6
  import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
7
7
  import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
8
- import * as __WEBPACK_EXTERNAL_MODULE_utf8__ from "utf8";
9
8
  import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__ from "../controls/Button.js";
10
9
  import * as __WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_6e4cc59c__ from "../controls/Disclosure.js";
11
10
  import * as __WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__ from "../controls/MenuButton.js";
12
- import * as __WEBPACK_EXTERNAL_MODULE__fields_BooleanField_js_dc79ee46__ from "../fields/BooleanField.js";
13
- import * as __WEBPACK_EXTERNAL_MODULE__fields_CheckboxSetField_js_bce910a4__ from "../fields/CheckboxSetField.js";
14
- import * as __WEBPACK_EXTERNAL_MODULE__fields_ListBoxField_js_b7d4cb12__ from "../fields/ListBoxField.js";
15
- import * as __WEBPACK_EXTERNAL_MODULE__fields_SimpleRadioSetField_js_118e9421__ from "../fields/SimpleRadioSetField.js";
16
- import * as __WEBPACK_EXTERNAL_MODULE__forms_FormButtonSet_js_c160eb1a__ from "../forms/FormButtonSet.js";
17
- import * as __WEBPACK_EXTERNAL_MODULE__forms_useForm_js_e756b4e7__ from "../forms/useForm.js";
18
11
  import * as __WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_3a83f64b__ from "../inputs/CheckboxInput.js";
19
12
  import * as __WEBPACK_EXTERNAL_MODULE__inputs_SelectInput_js_d1a6f32e__ from "../inputs/SelectInput.js";
20
13
  import * as __WEBPACK_EXTERNAL_MODULE__inputs_StringInput_js_091f1e06__ from "../inputs/StringInput.js";
21
- import * as __WEBPACK_EXTERNAL_MODULE__utils_encodeCsv_js_1d824629__ from "../utils/encodeCsv.js";
14
+ import * as __WEBPACK_EXTERNAL_MODULE__utils_tables_js_c5fbac3f__ from "../utils/tables.js";
22
15
  import * as __WEBPACK_EXTERNAL_MODULE__Badge_js_cb369ee9__ from "./Badge.js";
23
16
  import * as __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__ from "./Card.js";
24
17
  import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__ from "./CardContent.js";
25
18
  import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__ from "./HStack.js";
26
19
  import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
27
- import * as __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__ from "./Modal.js";
28
20
  import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText.js";
29
21
  import * as __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__ from "./Table.module.js";
22
+ import * as __WEBPACK_EXTERNAL_MODULE__TableColumnFilterModal_js_dd7b508a__ from "./TableColumnFilterModal.js";
30
23
  import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__ from "./VStack.js";
31
24
  const selectColumnId = "_selectColumn";
32
25
  const actionsColumnId = "_actionsColumn";
33
- const MIN_LIST_BOX_FILTER_OPTIONS = 10;
34
26
  const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csvFilename, estimatedRowSize = 100, emptyState = "No results", pathName, id, localStorageSchema, getRowId, rowActions, showHeader = true })=>{
35
27
  const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
36
28
  const [isFilterModalOpen, setIsFilterModalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
@@ -244,21 +236,6 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
244
236
  return cachedSize;
245
237
  }
246
238
  });
247
- const createCsvDataUrl = (columns, rows)=>{
248
- const csvContent = (0, __WEBPACK_EXTERNAL_MODULE__utils_encodeCsv_js_1d824629__["default"])([
249
- columns.map((col)=>col.header),
250
- ...rows.map((row)=>columns.map((col)=>row.getValue(col.id)))
251
- ]);
252
- return `data:text/csv;charset=utf-8,${__WEBPACK_EXTERNAL_MODULE_utf8__["default"].encode(csvContent)}`;
253
- };
254
- const handleDownloadCsv = (columns, rows)=>{
255
- if (!csvFilename) return;
256
- const csvDataUrl = createCsvDataUrl(columns, rows);
257
- const a = document.createElement("a");
258
- a.href = csvDataUrl;
259
- a.download = csvFilename.endsWith(".csv") ? csvFilename : `${csvFilename}.csv`;
260
- a.click();
261
- };
262
239
  const throttledSetGlobalFilter = (0, __WEBPACK_EXTERNAL_MODULE__react_hook_throttle_d66151d4__.useThrottleCallback)((value)=>table.setGlobalFilter(value), 4);
263
240
  const activeFilterCount = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
264
241
  const currentFilters = tableState.columnFilters;
@@ -383,7 +360,7 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
383
360
  size: "small"
384
361
  }),
385
362
  type: "onClick",
386
- onClick: ()=>handleDownloadCsv(csvExportableColumns, table.getSelectedRowModel().rows)
363
+ onClick: ()=>(0, __WEBPACK_EXTERNAL_MODULE__utils_tables_js_c5fbac3f__.handleDownloadCsv)(csvFilename, csvExportableColumns, table.getSelectedRowModel().rows)
387
364
  }
388
365
  ] : []
389
366
  ],
@@ -598,14 +575,14 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
598
575
  }),
599
576
  tooltip: "Download all rows as CSV",
600
577
  title: "Download all rows as CSV",
601
- onClick: ()=>handleDownloadCsv(csvExportableColumns, table.getRowModel().rows)
578
+ onClick: ()=>(0, __WEBPACK_EXTERNAL_MODULE__utils_tables_js_c5fbac3f__.handleDownloadCsv)(csvFilename, csvExportableColumns, table.getRowModel().rows)
602
579
  }) : null
603
580
  })
604
581
  ]
605
582
  })
606
583
  ]
607
584
  }),
608
- isFilterModalOpen && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FilterModal, {
585
+ isFilterModalOpen && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__TableColumnFilterModal_js_dd7b508a__["default"], {
609
586
  onClose: ()=>setIsFilterModalOpen(false),
610
587
  filterableColumns: filterableColumns,
611
588
  currentFilters: tableState.columnFilters,
@@ -614,257 +591,5 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
614
591
  ]
615
592
  });
616
593
  };
617
- const FilterExpander = ({ label, children, highlight = false, defaultOpen = false })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("details", {
618
- open: defaultOpen,
619
- className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpander, {
620
- [__WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderHighlight]: highlight
621
- }),
622
- children: [
623
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("summary", {
624
- className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderRow,
625
- children: [
626
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
627
- className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderIcon,
628
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
629
- symbol: "ChevronRight"
630
- })
631
- }),
632
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
633
- className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderLabel,
634
- children: label
635
- })
636
- ]
637
- }),
638
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
639
- className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderWrapper,
640
- children: children
641
- })
642
- ]
643
- });
644
- const FilterModal = ({ onClose, filterableColumns, currentFilters, onFiltersChange })=>{
645
- const initialFilterValues = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
646
- const result = {};
647
- for (const column of filterableColumns){
648
- const current = currentFilters.find((f)=>f.id === column.id);
649
- const filter = column.filter;
650
- if (filter.isMulti) result[column.id] = Array.isArray(current?.value) ? current.value : [];
651
- else result[column.id] = ("string" == typeof current?.value ? current.value : null) ?? filter.options[0].id;
652
- }
653
- return result;
654
- }, [
655
- filterableColumns,
656
- currentFilters
657
- ]);
658
- const resetFilterValues = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
659
- const result = {};
660
- for (const col of filterableColumns){
661
- const filter = col.filter;
662
- result[col.id] = filter.isMulti ? [] : filter.options[0].id;
663
- }
664
- return result;
665
- }, [
666
- filterableColumns
667
- ]);
668
- const { data, setData, status, submit } = (0, __WEBPACK_EXTERNAL_MODULE__forms_useForm_js_e756b4e7__["default"])({
669
- initialValues: {
670
- filters: initialFilterValues
671
- },
672
- onSubmit: async (values)=>{
673
- const filters = Object.entries(values.filters).map(([columnId, value])=>({
674
- id: columnId,
675
- value
676
- }));
677
- onFiltersChange(filters);
678
- }
679
- });
680
- const handleMultiFilterChange = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((columnId, option)=>{
681
- setData((prev)=>{
682
- const prevValue = prev.filters[columnId];
683
- const current = Array.isArray(prevValue) ? prevValue : [];
684
- const next = current.includes(option.id) ? current.filter((id)=>id !== option.id) : [
685
- ...current,
686
- option.id
687
- ];
688
- return {
689
- filters: {
690
- ...prev.filters,
691
- [columnId]: next
692
- }
693
- };
694
- });
695
- }, [
696
- setData
697
- ]);
698
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__["default"], {
699
- onClose: onClose,
700
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
701
- header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
702
- font: "h6",
703
- tagName: "h6",
704
- children: "Filters"
705
- }),
706
- footer: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
707
- justify: "space-between",
708
- children: [
709
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
710
- type: "secondary",
711
- onClick: ()=>{
712
- setData(()=>({
713
- filters: resetFilterValues
714
- }));
715
- },
716
- icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
717
- symbol: "Restore"
718
- }),
719
- children: "Reset all filters"
720
- }),
721
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_FormButtonSet_js_c160eb1a__["default"], {
722
- formStatus: status,
723
- primary: {
724
- action: async ()=>{
725
- submit();
726
- onClose();
727
- },
728
- label: "Apply filters"
729
- },
730
- secondary: {
731
- action: onClose,
732
- label: "Cancel",
733
- type: "ghost"
734
- }
735
- })
736
- ]
737
- }),
738
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
739
- className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpandersContainer,
740
- children: filterableColumns.map((column)=>{
741
- const filter = column.filter;
742
- if (filter.isMulti) {
743
- const filterValue = data.filters[column.id];
744
- const selectedIds = Array.isArray(filterValue) ? filterValue : [];
745
- const selectedOptions = filter.options.filter((opt)=>selectedIds.includes(opt.id));
746
- const multiFilterLabel = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
747
- justify: "space-between",
748
- children: [
749
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
750
- children: selectedIds.length > 0 ? `${filter.label} (${selectedIds.length} selected)` : filter.label
751
- }),
752
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
753
- style: {
754
- visibility: selectedIds.length > 0 ? "visible" : "hidden"
755
- },
756
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
757
- type: "secondary",
758
- size: "small",
759
- onClick: (e)=>{
760
- e.stopPropagation();
761
- setData((prev)=>({
762
- filters: {
763
- ...prev.filters,
764
- [column.id]: []
765
- }
766
- }));
767
- },
768
- children: "Reset"
769
- })
770
- })
771
- ]
772
- });
773
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FilterExpander, {
774
- label: multiFilterLabel,
775
- highlight: selectedIds.length > 0,
776
- defaultOpen: 1 === filterableColumns.length,
777
- children: filter.options.length > MIN_LIST_BOX_FILTER_OPTIONS ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_ListBoxField_js_b7d4cb12__["default"], {
778
- id: `${column.id}-filter`,
779
- label: "",
780
- options: filter.options,
781
- optionToId: (opt)=>opt.id,
782
- optionToLabel: (opt)=>opt.label,
783
- searchField: "label",
784
- value: selectedOptions,
785
- onChange: (option)=>handleMultiFilterChange(column.id, option),
786
- fixedHeight: true
787
- }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_CheckboxSetField_js_bce910a4__["default"], {
788
- id: `${column.id}-filter`,
789
- label: "",
790
- options: filter.options,
791
- optionToId: (opt)=>opt.id,
792
- optionToLabel: (opt)=>opt.label,
793
- values: selectedOptions,
794
- onChange: (option)=>handleMultiFilterChange(column.id, option)
795
- })
796
- }, column.id);
797
- }
798
- const rawValue = data.filters[column.id];
799
- const value = "string" == typeof rawValue ? rawValue : filter.options[0].id;
800
- const hasNonDefaultValue = "string" == typeof rawValue && rawValue !== filter.options[0].id;
801
- const isBooleanFilter = 2 === filter.options.length;
802
- const booleanValue = isBooleanFilter && value === filter.options[1].id;
803
- const singleFilterLabel = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
804
- justify: "space-between",
805
- children: [
806
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
807
- children: hasNonDefaultValue ? `${filter.label} (Selected)` : filter.label
808
- }),
809
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
810
- style: {
811
- visibility: hasNonDefaultValue ? "visible" : "hidden"
812
- },
813
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
814
- type: "secondary",
815
- size: "small",
816
- onClick: (e)=>{
817
- e.stopPropagation();
818
- setData((prev)=>({
819
- filters: {
820
- ...prev.filters,
821
- [column.id]: filter.options[0].id
822
- }
823
- }));
824
- },
825
- children: "Reset"
826
- })
827
- })
828
- ]
829
- });
830
- return isBooleanFilter ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
831
- className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterBooleanFieldWrapper,
832
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_BooleanField_js_dc79ee46__["default"], {
833
- id: `${column.id}-filter`,
834
- label: filter.label,
835
- value: booleanValue,
836
- onChange: (checked)=>{
837
- setData((prev)=>({
838
- filters: {
839
- ...prev.filters,
840
- [column.id]: checked ? filter.options[1].id : filter.options[0].id
841
- }
842
- }));
843
- }
844
- })
845
- }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FilterExpander, {
846
- label: singleFilterLabel,
847
- highlight: hasNonDefaultValue,
848
- defaultOpen: 1 === filterableColumns.length,
849
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_SimpleRadioSetField_js_118e9421__["default"], {
850
- id: `${column.id}-filter`,
851
- label: "",
852
- options: filter.options,
853
- value: value,
854
- onChange: (optionId)=>{
855
- setData((prev)=>({
856
- filters: {
857
- ...prev.filters,
858
- [column.id]: optionId
859
- }
860
- }));
861
- }
862
- })
863
- }, column.id);
864
- })
865
- })
866
- })
867
- });
868
- };
869
594
  const Table_rslib_entry_ = Table;
870
595
  export { Table_rslib_entry_ as default };