@worknice/whiteboard 0.43.1 → 0.45.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 (41) 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/icons/RestoreIcon.js +1 -3
  9. package/dist/icons/TableIcon.d.ts +3 -0
  10. package/dist/icons/TableIcon.js +11 -0
  11. package/dist/icons/WorkflowsIcon.d.ts +3 -0
  12. package/dist/icons/WorkflowsIcon.js +11 -0
  13. package/dist/icons/index.d.ts +2 -0
  14. package/dist/icons/index.js +3 -1
  15. package/dist/inputs/CheckboxInput.js +1 -0
  16. package/dist/inputs/CheckboxInput.module.js +1 -0
  17. package/dist/inputs/CheckboxInput_module.css +4 -0
  18. package/dist/inputs/ListBoxInput_module.css +1 -0
  19. package/dist/presentation/CustomizableTable/ConfigureColumnsModal.d.ts +12 -0
  20. package/dist/presentation/CustomizableTable/ConfigureColumnsModal.js +72 -0
  21. package/dist/presentation/CustomizableTable/CustomizableTable.d.ts +23 -41
  22. package/dist/presentation/CustomizableTable/CustomizableTable.js +569 -202
  23. package/dist/presentation/CustomizableTable/CustomizableTable.module.js +19 -14
  24. package/dist/presentation/CustomizableTable/CustomizableTable_module.css +100 -81
  25. package/dist/presentation/Table.d.ts +2 -27
  26. package/dist/presentation/Table.js +5 -280
  27. package/dist/presentation/TableColumnFilterModal.d.ts +41 -0
  28. package/dist/presentation/TableColumnFilterModal.js +271 -0
  29. package/dist/utils/tables.d.ts +8 -0
  30. package/dist/utils/tables.js +18 -0
  31. package/package.json +4 -4
  32. package/dist/presentation/CustomizableTable/CustomizableTableContents.d.ts +0 -38
  33. package/dist/presentation/CustomizableTable/CustomizableTableContents.js +0 -305
  34. package/dist/presentation/CustomizableTable/CustomizableTableContents.module.js +0 -18
  35. package/dist/presentation/CustomizableTable/CustomizableTableContents_module.css +0 -148
  36. package/dist/presentation/CustomizableTable/CustomizableTableDetails.d.ts +0 -22
  37. package/dist/presentation/CustomizableTable/CustomizableTableDetails.js +0 -74
  38. package/dist/presentation/CustomizableTable/CustomizableTableDetails.module.js +0 -6
  39. package/dist/presentation/CustomizableTable/CustomizableTableDetails_module.css +0 -40
  40. package/dist/presentation/CustomizableTable/TableFilterModal.d.ts +0 -23
  41. package/dist/presentation/CustomizableTable/TableFilterModal.js +0 -77
@@ -1,305 +0,0 @@
1
- import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
2
- import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__ from "@dnd-kit/core";
3
- import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__ from "@dnd-kit/sortable";
4
- import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_utilities_3c8eb4c2__ from "@dnd-kit/utilities";
5
- import * as __WEBPACK_EXTERNAL_MODULE__react_hook_throttle_d66151d4__ from "@react-hook/throttle";
6
- import * as __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__ from "@tanstack/react-table";
7
- import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
8
- import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
9
- import * as __WEBPACK_EXTERNAL_MODULE__fields_StringField_js_68a79b6e__ from "../../fields/StringField.js";
10
- import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__ from "../Icon.js";
11
- import * as __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__ from "./CustomizableTableContents.module.js";
12
- const selectColumnId = "_selectColumn";
13
- const DraggableColumnHeader = ({ header, getColumnStyle })=>{
14
- const isSelectionColumn = header.column.id === selectColumnId;
15
- const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.useSortable)({
16
- id: header.id,
17
- disabled: isSelectionColumn
18
- });
19
- const style = {
20
- transform: transform ? __WEBPACK_EXTERNAL_MODULE__dnd_kit_utilities_3c8eb4c2__.CSS.Transform.toString(transform) : void 0,
21
- transition: transition || void 0,
22
- opacity: isDragging ? 0.5 : 1,
23
- ...header.column.id !== selectColumnId && getColumnStyle(header.column)
24
- };
25
- const headerContent = header.isPlaceholder ? null : header.column.getCanSort() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
26
- onClick: header.column.getToggleSortingHandler(),
27
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].sortableTableHeader,
28
- title: "asc" === header.column.getIsSorted() ? "Sorted by ascending order" : "desc" === header.column.getIsSorted() ? "Sorted by descending order" : "Default sorting order",
29
- children: [
30
- "string" == typeof header.column.columnDef.header ? header.column.columnDef.header : (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(header.column.columnDef.header, header.getContext()),
31
- "asc" === header.column.getIsSorted() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
32
- size: "small",
33
- symbol: "SortAsc",
34
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].sortIcon
35
- }) : "desc" === header.column.getIsSorted() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
36
- size: "small",
37
- symbol: "SortDes",
38
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].sortIcon
39
- }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
40
- size: "small",
41
- symbol: "SortDefault",
42
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].sortIcon
43
- })
44
- ]
45
- }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
46
- children: "string" == typeof header.column.columnDef.header ? header.column.columnDef.header : (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(header.column.columnDef.header, header.getContext())
47
- });
48
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("th", {
49
- ref: setNodeRef,
50
- style: style,
51
- className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
52
- __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableCell,
53
- __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableHeader,
54
- isSelectionColumn ? __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].selectionCell : void 0
55
- ]),
56
- children: [
57
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
58
- ...!isSelectionColumn && {
59
- ...attributes,
60
- ...listeners
61
- },
62
- children: headerContent
63
- }),
64
- !isSelectionColumn && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
65
- onMouseDown: header.getResizeHandler(),
66
- onTouchStart: header.getResizeHandler(),
67
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].resizer
68
- })
69
- ]
70
- });
71
- };
72
- const CustomizableTableContents = ({ reactTable, columns, showRowCount = true, isLoading = false })=>{
73
- const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
74
- const [activeId, setActiveId] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
75
- const mountedRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(false);
76
- const enableRowSelection = false;
77
- const globalFilterableColumns = columns.filter((column)=>false !== column.globalFiltering && "display" !== column.type);
78
- const sensors = (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.useSensors)((0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.useSensor)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.MouseSensor, {
79
- activationConstraint: {
80
- distance: 10
81
- }
82
- }), (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.useSensor)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.TouchSensor, {
83
- activationConstraint: {
84
- delay: 250,
85
- tolerance: 5
86
- }
87
- }));
88
- const filterableColumns = columns.filter((column)=>{
89
- const tableColumn = reactTable.getColumn(column.id);
90
- return void 0 !== column.filter && void 0 !== tableColumn && tableColumn.getIsVisible();
91
- });
92
- const hasFilterableColumns = filterableColumns.length > 0;
93
- const tBodyRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
94
- const throttledSetGlobalFilter = (0, __WEBPACK_EXTERNAL_MODULE__react_hook_throttle_d66151d4__.useThrottleCallback)((value)=>reactTable.setGlobalFilter(value), 4);
95
- const handleDragStart = (event)=>{
96
- setActiveId(event.active.id);
97
- };
98
- const handleDragEnd = (event)=>{
99
- const { active, over } = event;
100
- setActiveId(null);
101
- if (over && active.id !== over.id) {
102
- const oldIndex = reactTable.getState().columnOrder.indexOf(active.id);
103
- const newIndex = reactTable.getState().columnOrder.indexOf(over.id);
104
- const newColumnOrder = (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.arrayMove)(reactTable.getState().columnOrder, oldIndex, newIndex);
105
- reactTable.setColumnOrder(newColumnOrder);
106
- }
107
- };
108
- (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
109
- mountedRef.current = true;
110
- }, []);
111
- const getColumnStyle = (column)=>{
112
- if (column.id === selectColumnId) return {
113
- width: "64px",
114
- minWidth: "64px",
115
- maxWidth: "64px"
116
- };
117
- if (!mountedRef.current) return {
118
- width: "150px"
119
- };
120
- const containerWidth = tBodyRef.current?.parentElement?.clientWidth || 0;
121
- if (1 === reactTable.getVisibleLeafColumns().length) return {
122
- width: `${containerWidth}px`
123
- };
124
- const currentSize = column.getSize();
125
- if (void 0 !== currentSize && 150 !== currentSize) return {
126
- width: `${currentSize}px`,
127
- minWidth: "50px"
128
- };
129
- const width = currentSize ?? 150;
130
- return {
131
- width: `${width}px`,
132
- minWidth: "50px"
133
- };
134
- };
135
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
136
- children: [
137
- !isLoading && reactTable.getVisibleLeafColumns().length > 0 && (0 !== globalFilterableColumns.length || hasFilterableColumns) ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
138
- style: {
139
- flex: 1
140
- },
141
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_StringField_js_68a79b6e__["default"], {
142
- label: "Search",
143
- id: "globalSearch",
144
- value: searchTerm,
145
- onChange: (value)=>{
146
- setSearchTerm(value ?? "");
147
- throttledSetGlobalFilter(value ?? "");
148
- }
149
- })
150
- }) : null,
151
- showRowCount && !isLoading && reactTable.getVisibleLeafColumns().length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("p", {
152
- children: [
153
- "Showing ",
154
- reactTable.getPreGroupedRowModel().flatRows.length,
155
- " of",
156
- " ",
157
- reactTable.getPreFilteredRowModel().flatRows.length
158
- ]
159
- }) : null,
160
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
161
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableContainer,
162
- children: mountedRef.current ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.DndContext, {
163
- sensors: sensors,
164
- onDragStart: handleDragStart,
165
- onDragEnd: handleDragEnd,
166
- children: [
167
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("table", {
168
- className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].table, {
169
- [__WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].noColumns]: 0 === reactTable.getVisibleLeafColumns().length
170
- }),
171
- children: [
172
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("thead", {
173
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableHead,
174
- children: !isLoading && reactTable.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
175
- className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
176
- __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableRow,
177
- enableRowSelection ? __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].selectableRows : ""
178
- ]),
179
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.SortableContext, {
180
- items: headerGroup.headers.map((header)=>header.id),
181
- strategy: __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.horizontalListSortingStrategy,
182
- children: headerGroup.headers.map((header)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DraggableColumnHeader, {
183
- header: header,
184
- getColumnStyle: getColumnStyle
185
- }, header.id))
186
- })
187
- }, headerGroup.id))
188
- }),
189
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tbody", {
190
- ref: tBodyRef,
191
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableBody,
192
- children: isLoading ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
193
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
194
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].noRows,
195
- colSpan: reactTable.getVisibleLeafColumns().length,
196
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
197
- symbol: "Loading",
198
- animate: true
199
- })
200
- })
201
- }) : reactTable.getRowModel().rows.length ? reactTable.getRowModel().rows.map((row)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
202
- "data-state": row.getIsSelected() ? "selected" : "",
203
- className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
204
- __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableRow,
205
- enableRowSelection ? __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].selectableRows : ""
206
- ]),
207
- children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
208
- className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
209
- __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableCell,
210
- cell.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].selectionCell : void 0
211
- ]),
212
- style: getColumnStyle(cell.column),
213
- children: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(cell.column.columnDef.cell, cell.getContext())
214
- }, cell.id))
215
- }, row.id)) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
216
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableRow,
217
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
218
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].noRows,
219
- colSpan: reactTable.getVisibleLeafColumns().length,
220
- children: reactTable.getVisibleLeafColumns().length > 0 ? "No results" : "No columns"
221
- })
222
- })
223
- })
224
- ]
225
- }),
226
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.DragOverlay, {
227
- children: activeId ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
228
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].draggingHeader,
229
- children: (()=>{
230
- const header = reactTable.getHeaderGroups().flatMap((group)=>group.headers).find((h)=>h.id === activeId);
231
- if (!header) return null;
232
- const headerContent = header.column.columnDef.header;
233
- return "string" == typeof headerContent ? headerContent : (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(headerContent, header.getContext());
234
- })()
235
- }) : null
236
- })
237
- ]
238
- }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("table", {
239
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].table,
240
- children: [
241
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("thead", {
242
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableHead,
243
- children: !isLoading && reactTable.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
244
- className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
245
- __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableRow,
246
- enableRowSelection ? __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].selectableRows : ""
247
- ]),
248
- children: headerGroup.headers.map((header)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DraggableColumnHeader, {
249
- header: header,
250
- getColumnStyle: getColumnStyle
251
- }, header.id))
252
- }, headerGroup.id))
253
- }),
254
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tbody", {
255
- ref: tBodyRef,
256
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableBody,
257
- children: isLoading ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
258
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
259
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].noRows,
260
- colSpan: reactTable.getVisibleLeafColumns().length,
261
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
262
- symbol: "Loading",
263
- animate: true
264
- })
265
- })
266
- }) : reactTable.getRowModel().rows.length ? reactTable.getRowModel().rows.map((row)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
267
- "data-state": row.getIsSelected() ? "selected" : "",
268
- className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
269
- __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableRow,
270
- enableRowSelection ? __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].selectableRows : ""
271
- ]),
272
- children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
273
- className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
274
- __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableCell,
275
- cell.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].selectionCell : void 0
276
- ]),
277
- style: getColumnStyle(cell.column),
278
- children: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(cell.column.columnDef.cell, cell.getContext())
279
- }, cell.id))
280
- }, row.id)) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
281
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].tableRow,
282
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
283
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_module_js_fe3c2d09__["default"].noRows,
284
- colSpan: reactTable.getVisibleLeafColumns().length,
285
- children: reactTable.getVisibleLeafColumns().length > 0 ? "No results" : "No columns"
286
- })
287
- })
288
- })
289
- ]
290
- })
291
- }),
292
- showRowCount && !isLoading && reactTable.getVisibleLeafColumns().length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("p", {
293
- children: [
294
- "Showing ",
295
- reactTable.getPreGroupedRowModel().flatRows.length,
296
- " of",
297
- " ",
298
- reactTable.getPreFilteredRowModel().flatRows.length
299
- ]
300
- }) : null
301
- ]
302
- });
303
- };
304
- const CustomizableTableContents_rslib_entry_ = CustomizableTableContents;
305
- export { CustomizableTableContents_rslib_entry_ as default };
@@ -1,18 +0,0 @@
1
- import "./CustomizableTableContents_module.css";
2
- const CustomizableTableContents_module_rslib_entry_ = {
3
- tableContainer: "tableContainer-HUrB29",
4
- table: "table-FK1zBS",
5
- tableHead: "tableHead-YgifCW",
6
- tableBody: "tableBody-Ww4aSI",
7
- tableRow: "tableRow-YGnh2E",
8
- noColumns: "noColumns-E36Wsy",
9
- tableHeader: "tableHeader-SrtnWm",
10
- tableCell: "tableCell-JJ4dez",
11
- selectionCell: "selectionCell-klawWQ",
12
- sortableTableHeader: "sortableTableHeader-oymwup",
13
- sortIcon: "sortIcon-CRQZ8T",
14
- draggingHeader: "draggingHeader-qU29yy",
15
- noRows: "noRows-egJ0OS",
16
- resizer: "resizer-Iwor4j"
17
- };
18
- export { CustomizableTableContents_module_rslib_entry_ as default };
@@ -1,148 +0,0 @@
1
- .tableContainer-HUrB29 {
2
- background: var(--color-white);
3
- border-radius: var(--size-n3);
4
- border: solid var(--size-n5) var(--color-grey-t08);
5
- color: var(--color-grey-s01);
6
- width: 100%;
7
- overflow-x: auto;
8
- }
9
-
10
- .table-FK1zBS {
11
- border-collapse: collapse;
12
- table-layout: fixed;
13
- width: 100%;
14
- }
15
-
16
- .tableHead-YgifCW {
17
- display: table-header-group;
18
- }
19
-
20
- .tableBody-Ww4aSI {
21
- display: table-row-group;
22
- }
23
-
24
- .tableRow-YGnh2E {
25
- border-top: solid var(--size-n5) var(--color-grey-t08);
26
- display: table-row;
27
- }
28
-
29
- .tableHead-YgifCW .tableRow-YGnh2E, .noColumns-E36Wsy .tableRow-YGnh2E {
30
- border-top: none;
31
- }
32
-
33
- .tableHeader-SrtnWm {
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;
45
- }
46
-
47
- .tableCell-JJ4dez {
48
- padding: var(--size-00);
49
- border-right: solid var(--size-n5) var(--color-grey-t08);
50
- vertical-align: middle;
51
- white-space: normal;
52
- word-break: break-word;
53
- text-overflow: ellipsis;
54
- box-sizing: border-box;
55
- display: table-cell;
56
- position: relative;
57
- overflow: hidden;
58
- }
59
-
60
- .tableCell-JJ4dez:last-child, .tableHeader-SrtnWm:last-child {
61
- border-right: none;
62
- }
63
-
64
- .tableHeader-SrtnWm:not(.selectionCell-klawWQ) {
65
- cursor: grab;
66
- }
67
-
68
- .sortableTableHeader-oymwup {
69
- gap: var(--size-n2);
70
- text-align: left;
71
- width: 100%;
72
- font: inherit;
73
- color: inherit;
74
- cursor: pointer;
75
- white-space: normal;
76
- word-break: break-word;
77
- text-overflow: ellipsis;
78
- background: none;
79
- border: none;
80
- align-items: center;
81
- padding: 0;
82
- display: flex;
83
- overflow: hidden;
84
- }
85
-
86
- .sortIcon-CRQZ8T {
87
- flex-shrink: 0;
88
- }
89
-
90
- .selectionCell-klawWQ {
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-klawWQ > div {
104
- justify-content: center;
105
- align-items: center;
106
- width: 100%;
107
- height: 100%;
108
- display: inline-flex;
109
- }
110
-
111
- .draggingHeader-qU29yy {
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-egJ0OS {
123
- padding: var(--size-p3) var(--size-00);
124
- text-align: center;
125
- width: 100%;
126
- }
127
-
128
- .noRows-egJ0OS > svg {
129
- display: inline;
130
- }
131
-
132
- .resizer-Iwor4j {
133
- cursor: col-resize;
134
- -webkit-user-select: none;
135
- user-select: none;
136
- touch-action: none;
137
- background: none;
138
- width: 5px;
139
- height: 100%;
140
- position: absolute;
141
- top: 0;
142
- right: 0;
143
- }
144
-
145
- .resizer-Iwor4j:hover, .resizer-Iwor4j:active {
146
- background: var(--color-grey-t08);
147
- }
148
-
@@ -1,22 +0,0 @@
1
- type Props = {
2
- availableColumns: Array<{
3
- id: string;
4
- header: string;
5
- visible: boolean;
6
- }>;
7
- name: string;
8
- description: string | null;
9
- onStateChange: (state: {
10
- name: string;
11
- description: string | null;
12
- }) => void;
13
- onColumnClick: (column: {
14
- id: string;
15
- header: string;
16
- }) => void;
17
- onFilterListClick: () => void;
18
- hasFilterableColumns: boolean;
19
- isLoading?: boolean;
20
- };
21
- declare const CustomizableTableDetails: ({ availableColumns, onColumnClick, onFilterListClick, name, description, onStateChange, hasFilterableColumns, isLoading, }: Props) => import("react/jsx-runtime").JSX.Element;
22
- export default CustomizableTableDetails;
@@ -1,74 +0,0 @@
1
- import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
2
- import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__ from "../../controls/Button.js";
3
- import * as __WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_fa7c5c89__ from "../../controls/MenuButton.js";
4
- import * as __WEBPACK_EXTERNAL_MODULE__fields_StringField_js_68a79b6e__ from "../../fields/StringField.js";
5
- import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__ from "../Icon.js";
6
- import * as __WEBPACK_EXTERNAL_MODULE__CustomizableTableDetails_module_js_9c4bc960__ from "./CustomizableTableDetails.module.js";
7
- const CustomizableTableDetails = ({ availableColumns, onColumnClick, onFilterListClick, name, description, onStateChange, hasFilterableColumns, isLoading = false })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
8
- children: [
9
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
10
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableDetails_module_js_9c4bc960__["default"].filterBar,
11
- children: [
12
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
13
- style: {
14
- flex: 1
15
- },
16
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_StringField_js_68a79b6e__["default"], {
17
- id: "name",
18
- label: "Name",
19
- value: name,
20
- onChange: (value)=>{
21
- onStateChange({
22
- name: value ?? "",
23
- description
24
- });
25
- },
26
- required: true
27
- })
28
- }),
29
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
30
- className: __WEBPACK_EXTERNAL_MODULE__CustomizableTableDetails_module_js_9c4bc960__["default"].filterSelectMenus,
31
- children: [
32
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_fa7c5c89__["default"], {
33
- disabled: isLoading,
34
- id: "columnVisibility",
35
- icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
36
- symbol: "Columns"
37
- }),
38
- options: availableColumns.map((col)=>({
39
- id: col.id,
40
- label: `${col.visible ? "✓ " : ""}${col.header}`,
41
- type: "onClick",
42
- onClick: ()=>onColumnClick(col)
43
- })),
44
- children: "Columns"
45
- }),
46
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
47
- type: "secondary",
48
- size: "normal",
49
- icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
50
- symbol: "FilterList"
51
- }),
52
- onClick: onFilterListClick,
53
- disabled: !hasFilterableColumns || isLoading,
54
- children: "Filters"
55
- })
56
- ]
57
- })
58
- ]
59
- }),
60
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_StringField_js_68a79b6e__["default"], {
61
- id: "description",
62
- label: "Description",
63
- value: description,
64
- onChange: (value)=>{
65
- onStateChange({
66
- description: value,
67
- name
68
- });
69
- }
70
- })
71
- ]
72
- });
73
- const CustomizableTableDetails_rslib_entry_ = CustomizableTableDetails;
74
- export { CustomizableTableDetails_rslib_entry_ as default };
@@ -1,6 +0,0 @@
1
- import "./CustomizableTableDetails_module.css";
2
- const CustomizableTableDetails_module_rslib_entry_ = {
3
- filterBar: "filterBar-us51aC",
4
- filterSelectMenus: "filterSelectMenus-z2CP_z"
5
- };
6
- export { CustomizableTableDetails_module_rslib_entry_ as default };
@@ -1,40 +0,0 @@
1
- .filterBar-us51aC {
2
- gap: var(--size-00);
3
- flex-wrap: wrap;
4
- align-items: flex-end;
5
- width: 100%;
6
- display: flex;
7
- }
8
-
9
- .filterBar-us51aC:has( > :only-child) {
10
- gap: 0;
11
- }
12
-
13
- .filterSelectMenus-z2CP_z {
14
- gap: var(--size-00);
15
- flex-shrink: 0;
16
- align-items: center;
17
- display: flex;
18
- }
19
-
20
- .filterSelectMenus-z2CP_z:has( > :only-child) {
21
- gap: 0;
22
- }
23
-
24
- @media (min-width: 1024px) {
25
- .filterBar-us51aC {
26
- flex-wrap: nowrap;
27
- }
28
- }
29
-
30
- @media (min-width: 1920px) {
31
- .filterBar-us51aC {
32
- grid-template-rows: auto;
33
- grid-template-columns: 1fr max-content;
34
- }
35
-
36
- .filterSelectMenus-z2CP_z {
37
- grid-auto-columns: max-content;
38
- }
39
- }
40
-
@@ -1,23 +0,0 @@
1
- type Props = {
2
- onClose: () => void;
3
- columns: Array<{
4
- id: string;
5
- filter: {
6
- label: string;
7
- options: Array<{
8
- id: string;
9
- label: string;
10
- }>;
11
- };
12
- }>;
13
- onFiltersChange: (filters: Array<{
14
- id: string;
15
- value: string;
16
- }>) => void;
17
- currentFilters: Array<{
18
- id: string;
19
- value: string;
20
- }>;
21
- };
22
- export declare const TableFilterModal: ({ onClose, columns, onFiltersChange, currentFilters }: Props) => import("react/jsx-runtime").JSX.Element;
23
- export {};