@crystaldesign/grid 24.15.0-beta.41 → 24.15.0-beta.43

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.
@@ -5,16 +5,13 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
5
5
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
6
6
  import React, { useState, useEffect, useMemo, createElement, forwardRef, useRef, useReducer, useCallback } from 'react';
7
7
  import { useTranslation, useDivaCore, DivaUtils, getLogger, DivaError } from '@crystaldesign/diva-core';
8
- import { useAsyncDebounce, useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect } from 'react-table';
8
+ import { useAsyncDebounce, useRowSelect, useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination } from 'react-table';
9
9
  import makeStyles from '@mui/styles/makeStyles';
10
10
  import createStyles from '@mui/styles/createStyles';
11
11
  import Alert from '@mui/material/Alert';
12
- import Checkbox from '@mui/material/Checkbox';
13
12
  import TablePagination from '@mui/material/TablePagination';
14
13
  import ViewHeadlineIcon from '@mui/icons-material/ViewHeadline';
15
14
  import ViewModuleIcon from '@mui/icons-material/ViewModule';
16
- import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
17
- import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
18
15
  import SearchField from '@crystaldesign/searchfield';
19
16
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
20
17
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -27,8 +24,11 @@ import TableRow from '@mui/material/TableRow';
27
24
  import Skeleton from '@mui/material/Skeleton';
28
25
  import TableSortLabel from '@mui/material/TableSortLabel';
29
26
  import IconButton from '@mui/material/IconButton';
27
+ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
28
+ import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
30
29
  import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
31
- import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
30
+ import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
31
+ import classnames from 'classnames';
32
32
  import MaToolbar from '@mui/material/Toolbar';
33
33
  import ButtonGroup from '@mui/material/ButtonGroup';
34
34
  import Button from '@mui/material/Button';
@@ -42,7 +42,6 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
42
42
  import Menu from '@mui/material/Menu';
43
43
  import MenuItem from '@mui/material/MenuItem';
44
44
  import Tooltip from '@mui/material/Tooltip';
45
- import classNames from 'classnames';
46
45
  import ImageList from '@mui/material/ImageList';
47
46
  import ImageListItem from '@mui/material/ImageListItem';
48
47
  import Grid$1 from '@mui/material/Grid2';
@@ -62,6 +61,7 @@ import { NativeSelect, Tabs, Tab, TextareaAutosize as TextareaAutosize$1 } from
62
61
  import TextField from '@mui/material/TextField';
63
62
  import withStyles from '@mui/styles/withStyles';
64
63
  import { unflatten } from 'flat';
64
+ import Checkbox from '@mui/material/Checkbox';
65
65
  import { useHover, useLayer } from 'react-laag';
66
66
  import { ContentBoxComponent } from '@crystaldesign/content-box';
67
67
  import { NavigateBefore, NavigateNext } from '@mui/icons-material';
@@ -172,14 +172,14 @@ function styleInject(css, ref) {
172
172
  }
173
173
 
174
174
  var draggedCell = "dragged-cell-9YMHK";
175
- var css_248z$4 = ".dragged-cell-9YMHK {\n display: flex;\n justify-content: space-between;\n}\n\n.dragged-cell-9YMHK td {\n display: block;\n flex-grow: 100;\n}\n\n.dragged-cell-9YMHK td:nth-child(1) {\n padding: 16px 0 !important;\n}\n\n.dragged-cell-9YMHK td:nth-child(1) {\n max-width: 42px;\n width: 29px;\n}\n";
176
- styleInject(css_248z$4);
175
+ var css_248z$5 = ".dragged-cell-9YMHK {\n display: flex;\n justify-content: space-between;\n}\n\n.dragged-cell-9YMHK td {\n display: block;\n flex-grow: 100;\n}\n\n.dragged-cell-9YMHK td:nth-child(1) {\n padding: 16px 0 !important;\n}\n\n.dragged-cell-9YMHK td:nth-child(1) {\n max-width: 42px;\n width: 29px;\n}\n";
176
+ styleInject(css_248z$5);
177
177
 
178
178
  var _excluded$3 = ["headerGroups", "rows", "isLoading", "selectedFlatRows"],
179
179
  _excluded2 = ["row", "provided"],
180
180
  _excluded3 = ["prepareRow", "row", "provided", "renderSubComponent", "toggleSelected", "dragDropRows"];
181
- function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
182
- function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
181
+ function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
182
+ function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
183
183
  function MemoizedTable(_ref) {
184
184
  var headerGroups = _ref.headerGroups,
185
185
  rows = _ref.rows,
@@ -187,7 +187,7 @@ function MemoizedTable(_ref) {
187
187
  selectedFlatRows = _ref.selectedFlatRows,
188
188
  others = _objectWithoutProperties(_ref, _excluded$3);
189
189
  return useMemo(function () {
190
- return /*#__PURE__*/jsx(Table, _objectSpread$e({
190
+ return /*#__PURE__*/jsx(Table, _objectSpread$h({
191
191
  headerGroups: headerGroups,
192
192
  rows: rows,
193
193
  isLoading: isLoading
@@ -233,7 +233,7 @@ function Table(_ref2) {
233
233
  }
234
234
  return /*#__PURE__*/jsxs(TableContainer, {
235
235
  className: classes.table,
236
- children: [/*#__PURE__*/jsxs(MaUTable, _objectSpread$e(_objectSpread$e({}, getTableProps()), {}, {
236
+ children: [/*#__PURE__*/jsxs(MaUTable, _objectSpread$h(_objectSpread$h({}, getTableProps()), {}, {
237
237
  stickyHeader: true,
238
238
  "aria-label": "sticky table",
239
239
  children: [/*#__PURE__*/jsx(TableHead, {
@@ -242,74 +242,84 @@ function Table(_ref2) {
242
242
  whiteSpace: 'nowrap'
243
243
  },
244
244
  children: headerGroups.map(function (headerGroup) {
245
- return /*#__PURE__*/createElement(TableRow, _objectSpread$e(_objectSpread$e({}, headerGroup.getHeaderGroupProps()), {}, {
245
+ return /*#__PURE__*/createElement(TableRow, _objectSpread$h(_objectSpread$h({}, headerGroup.getHeaderGroupProps()), {}, {
246
246
  key: headerGroup.getHeaderGroupProps().key
247
247
  }), dragDropRows && /*#__PURE__*/jsx(TableCell, {
248
248
  style: {
249
249
  width: '8px',
250
250
  padding: '16px 0px 16px 5px'
251
251
  }
252
- }), headerGroup.headers.flatMap(function (column, i) {
253
- var cells = [];
254
- if (column.fixed) {
255
- cells.push(/*#__PURE__*/createElement(TableCell, _objectSpread$e(_objectSpread$e({}, column.getHeaderProps({
256
- style: {
257
- width: 1,
258
- padding: 0,
259
- position: 'relative',
260
- zIndex: 5
261
- }
262
- })), {}, {
263
- key: column.getHeaderProps().key + '_a'
264
- }), /*#__PURE__*/jsx("div", {
265
- style: {
266
- width: 1
267
- }
268
- })));
269
- cells.push(/*#__PURE__*/createElement(TableCell, _objectSpread$e(_objectSpread$e({}, column.getHeaderProps({
252
+ }), function () {
253
+ var headers = headerGroup.headers.flat();
254
+ return headers.map(function (column, i) {
255
+ var _headers;
256
+ var lastFlexible = ((_headers = headers[i + 1]) === null || _headers === void 0 ? void 0 : _headers.fixed) === true;
257
+ var cells = [];
258
+ if (column.fixed) {
259
+ cells.push(/*#__PURE__*/createElement(TableCell, _objectSpread$h(_objectSpread$h({}, column.getHeaderProps({
260
+ style: {
261
+ width: 15,
262
+ minWidth: 15,
263
+ padding: 0,
264
+ zIndex: 5,
265
+ backgroundColor: 'white'
266
+ }
267
+ })), {}, {
268
+ key: column.getHeaderProps().key + '_a'
269
+ }), /*#__PURE__*/jsx("div", {
270
+ style: {
271
+ width: 5
272
+ }
273
+ })));
274
+ cells.push(/*#__PURE__*/createElement(TableCell, _objectSpread$h(_objectSpread$h({}, column.getHeaderProps({
275
+ style: {
276
+ width: 5,
277
+ minWidth: 5,
278
+ padding: 0,
279
+ position: 'sticky',
280
+ zIndex: 4,
281
+ right: 247,
282
+ backgroundColor: 'white'
283
+ }
284
+ })), {}, {
285
+ key: column.getHeaderProps().key + '_b'
286
+ }), /*#__PURE__*/jsx("div", {
287
+ style: {
288
+ position: 'absolute',
289
+ top: 0,
290
+ left: 5,
291
+ bottom: 0,
292
+ width: 15,
293
+ boxShadow: 'rgb(224, 224, 224) -2px 0px 1px 0px',
294
+ backgroundColor: 'white'
295
+ }
296
+ })));
297
+ }
298
+ cells.push(/*#__PURE__*/createElement(TableCell, _objectSpread$h(_objectSpread$h({}, column.getHeaderProps({
270
299
  style: {
271
- width: 1,
272
- padding: 0,
273
- position: 'sticky',
274
- zIndex: 4,
275
- right: 242
300
+ width: lastFlexible ? undefined : column.width,
301
+ padding: column.padding,
302
+ right: column.fixed ? 0 : undefined,
303
+ zIndex: column.fixed ? 5 : 4,
304
+ minWidth: column.fixed ? column.width : undefined,
305
+ maxWidth: column.maxWidth
276
306
  }
277
307
  })), {}, {
278
- key: column.getHeaderProps().key + '_b'
279
- }), /*#__PURE__*/jsx("div", {
280
- style: {
281
- position: 'absolute',
282
- top: 0,
283
- left: 0,
284
- bottom: 0,
285
- width: 1,
286
- boxShadow: '-1px 0px 0px 0px rgba(224, 224, 224, 1)'
287
- }
288
- })));
289
- }
290
- cells.push(/*#__PURE__*/createElement(TableCell, _objectSpread$e(_objectSpread$e({}, column.getHeaderProps({
291
- style: {
292
- width: column.width,
293
- padding: column.padding,
294
- right: column.fixed ? 0 : undefined,
295
- zIndex: column.fixed ? 5 : 4,
296
- minWidth: column.fixed ? column.width : undefined
297
- }
298
- })), {}, {
299
- key: column.getHeaderProps().key,
300
- sortDirection: column.isSorted ? column.isSortedDesc ? 'desc' : 'asc' : false
301
- }),
302
- // only wrap in tableSortLabel if it is actually sortable, otherwise other functionalities (e.g. select) don't work
303
- column.canSort && /*#__PURE__*/jsx(TableSortLabel, _objectSpread$e(_objectSpread$e({}, column.getSortByToggleProps()), {}, {
304
- disabled: !column.canSort,
305
- active: column.isSorted,
306
- direction: column.isSortedDesc ? 'desc' : 'asc',
307
- children: column.render('Header')
308
- })), !column.canSort && column.render('Header')));
309
- return cells;
310
- }));
308
+ key: column.getHeaderProps().key,
309
+ sortDirection: column.isSorted ? column.isSortedDesc ? 'desc' : 'asc' : false
310
+ }),
311
+ // only wrap in tableSortLabel if it is actually sortable, otherwise other functionalities (e.g. select) don't work
312
+ column.canSort && /*#__PURE__*/jsx(TableSortLabel, _objectSpread$h(_objectSpread$h({}, column.getSortByToggleProps()), {}, {
313
+ disabled: !column.canSort,
314
+ active: column.isSorted,
315
+ direction: column.isSortedDesc ? 'desc' : 'asc',
316
+ children: column.render('Header')
317
+ })), !column.canSort && column.render('Header')));
318
+ return cells;
319
+ });
320
+ }());
311
321
  })
312
- }), !dragDropRows && /*#__PURE__*/jsxs(TableBody, _objectSpread$e(_objectSpread$e({}, getTableBodyProps()), {}, {
322
+ }), !dragDropRows && /*#__PURE__*/jsxs(TableBody, _objectSpread$h(_objectSpread$h({}, getTableBodyProps()), {}, {
313
323
  children: [!isLoading && rows.map(function (row, index) {
314
324
  return /*#__PURE__*/jsx(MemoizedRow, {
315
325
  row: row,
@@ -326,8 +336,9 @@ function Table(_ref2) {
326
336
  children: /*#__PURE__*/jsx(Droppable, {
327
337
  droppableId: "droppable",
328
338
  direction: "vertical",
339
+ type: "group",
329
340
  children: function children(provided, snapshot) {
330
- return /*#__PURE__*/jsxs(TableBody, _objectSpread$e(_objectSpread$e(_objectSpread$e({}, provided.droppableProps), {}, {
341
+ return /*#__PURE__*/jsxs(TableBody, _objectSpread$h(_objectSpread$h(_objectSpread$h({}, provided.droppableProps), {}, {
331
342
  ref: provided.innerRef
332
343
  }, getTableBodyProps()), {}, {
333
344
  children: [!isLoading && rows.map(function (row, index) {
@@ -342,10 +353,10 @@ function Table(_ref2) {
342
353
  transform = transform.replace(/\(.+\,/, '(0,');
343
354
  others.className = draggedCell;
344
355
  }
345
- others.style = _objectSpread$e(_objectSpread$e({}, provided.draggableProps.style), {}, {
356
+ others.style = _objectSpread$h(_objectSpread$h({}, provided.draggableProps.style), {}, {
346
357
  transform: transform
347
358
  });
348
- return /*#__PURE__*/createElement(MemoizedRow, _objectSpread$e(_objectSpread$e({
359
+ return /*#__PURE__*/createElement(MemoizedRow, _objectSpread$h(_objectSpread$h({
349
360
  provided: provided,
350
361
  ref: provided.innerRef
351
362
  }, provided.draggableProps), {}, {
@@ -378,7 +389,7 @@ var MemoizedRow = /*#__PURE__*/forwardRef(function (_ref3, ref) {
378
389
  provided = _ref3.provided,
379
390
  others = _objectWithoutProperties(_ref3, _excluded2);
380
391
  return useMemo(function () {
381
- return /*#__PURE__*/jsx(MyRow, _objectSpread$e({
392
+ return /*#__PURE__*/jsx(MyRow, _objectSpread$h({
382
393
  row: row,
383
394
  ref: ref,
384
395
  provided: provided
@@ -395,94 +406,105 @@ var MyRow = /*#__PURE__*/forwardRef(function (_ref4, ref) {
395
406
  others = _objectWithoutProperties(_ref4, _excluded3);
396
407
  prepareRow(row);
397
408
  return /*#__PURE__*/jsxs(React.Fragment, {
398
- children: [/*#__PURE__*/createElement(TableRow, _objectSpread$e(_objectSpread$e({}, row.getRowProps()), {}, {
409
+ children: [/*#__PURE__*/createElement(TableRow, _objectSpread$h(_objectSpread$h({}, row.getRowProps()), {}, {
399
410
  key: row.getRowProps().key,
411
+ className: classnames({
412
+ childRow: row.depth,
413
+ expandedRow: row.isExpanded
414
+ }),
400
415
  selected: row.isSelected,
401
416
  onClick: function onClick() {
402
417
  return toggleSelected(row.id);
403
418
  },
404
419
  ref: ref,
405
420
  "data-test-id": "table-row"
406
- }, others), dragDropRows && /*#__PURE__*/createElement(TableCell, _objectSpread$e(_objectSpread$e(_objectSpread$e({}, provided.dragHandleProps), row.cells[0].getCellProps({
407
- //use first cell to get the highlight color
408
- style: {
409
- padding: 0,
410
- userSelect: 'unset'
411
- }
412
- })), {}, {
421
+ }, others), dragDropRows && /*#__PURE__*/createElement(TableCell, _objectSpread$h(_objectSpread$h(_objectSpread$h({}, provided === null || provided === void 0 ? void 0 : provided.dragHandleProps), row.cells[0].getCellProps()), {}, {
422
+ className: "drag-handle",
413
423
  key: row.cells[0].getCellProps().key,
414
424
  "data-test-id": "table-cell"
415
- }), /*#__PURE__*/jsx(DragIndicatorIcon, {})), row.cells.flatMap(function (cell, i) {
416
- var cells = [];
417
- if (cell.column.fixed) {
418
- cells.push(/*#__PURE__*/createElement(TableCell, _objectSpread$e(_objectSpread$e({}, cell.getCellProps({
419
- style: {
420
- width: 1,
421
- padding: 0,
422
- position: 'relative',
423
- backgroundColor: 'white',
424
- zIndex: 4
425
- }
426
- })), {}, {
427
- key: cell.getCellProps().key + '_a',
428
- "data-test-id": "table-cell"
429
- })));
430
- cells.push(/*#__PURE__*/createElement(TableCell, _objectSpread$e(_objectSpread$e({}, cell.getCellProps({
431
- style: {
432
- width: 1,
433
- padding: 0,
434
- position: 'sticky',
435
- backgroundColor: 'white',
436
- zIndex: 3,
437
- right: 242
438
- }
425
+ }), /*#__PURE__*/jsx(DragIndicatorIcon, {})), function () {
426
+ var cellSettings = row.cells.flat();
427
+ return cellSettings.map(function (cell, i) {
428
+ var _cellSettings;
429
+ var lastFlexible = ((_cellSettings = cellSettings[i + 1]) === null || _cellSettings === void 0 ? void 0 : _cellSettings.column.fixed) === true;
430
+ var cells = [];
431
+ if (cell.column.fixed) {
432
+ cells.push(/*#__PURE__*/createElement(TableCell, _objectSpread$h(_objectSpread$h({}, cell.getCellProps({
433
+ style: {
434
+ width: 15,
435
+ minWidth: 15,
436
+ padding: 0,
437
+ position: 'relative',
438
+ zIndex: 4
439
+ }
440
+ })), {}, {
441
+ className: "fixed",
442
+ key: cell.getCellProps().key + '_a',
443
+ "data-test-id": "table-cell"
444
+ })));
445
+ cells.push(/*#__PURE__*/createElement(TableCell, _objectSpread$h(_objectSpread$h({}, cell.getCellProps({
446
+ style: {
447
+ width: 5,
448
+ minWidth: 5,
449
+ padding: 0,
450
+ position: 'sticky',
451
+ backgroundColor: 'white',
452
+ zIndex: 3,
453
+ right: 247
454
+ }
455
+ })), {}, {
456
+ key: cell.getCellProps().key + '_b',
457
+ "data-test-id": "table-cell"
458
+ }), /*#__PURE__*/jsx("div", {
459
+ className: "fixed",
460
+ style: {
461
+ position: 'absolute',
462
+ top: 0,
463
+ left: 5,
464
+ bottom: 0,
465
+ width: 15,
466
+ boxShadow: 'rgb(224, 224, 224) -2px 0px 1px 0px'
467
+ }
468
+ })));
469
+ }
470
+ cells.push(/*#__PURE__*/createElement(TableCell, _objectSpread$h(_objectSpread$h({
471
+ className: cell.column.fixed ? 'fixed' : ''
472
+ }, cell.getCellProps({
473
+ style: _objectSpread$h(_objectSpread$h({}, cellStyleHelper(cell)), {}, {
474
+ width: lastFlexible ? undefined : cell.column.width
475
+ })
439
476
  })), {}, {
440
- key: cell.getCellProps().key + '_b',
477
+ key: cell.getCellProps().key,
441
478
  "data-test-id": "table-cell"
442
- }), /*#__PURE__*/jsx("div", {
479
+ }), cell.isGrouped ?
480
+ /*#__PURE__*/
481
+ // If it's a grouped cell, add an expander and row count
482
+ jsxs("div", {
443
483
  style: {
444
- position: 'absolute',
445
- top: 0,
446
- left: 0,
447
- bottom: 0,
448
- width: 1,
449
- boxShadow: '-1px 0px 0px 0px rgba(224, 224, 224, 1)'
450
- }
451
- })));
452
- }
453
- cells.push(/*#__PURE__*/createElement(TableCell, _objectSpread$e(_objectSpread$e({}, cell.getCellProps({
454
- style: _objectSpread$e({}, cellStyleHelper(cell))
455
- })), {}, {
456
- key: cell.getCellProps().key,
457
- "data-test-id": "table-cell"
458
- }), cell.isGrouped ?
459
- /*#__PURE__*/
460
- // If it's a grouped cell, add an expander and row count
461
- jsxs("div", {
462
- style: {
463
- display: 'flex'
464
- },
465
- children: [/*#__PURE__*/jsx(IconButton, _objectSpread$e(_objectSpread$e({
466
- "aria-label": "expand row",
467
- size: "small"
468
- }, row.getToggleRowExpandedProps()), {}, {
469
- onClick: undefined,
470
- children: row.isExpanded ? /*#__PURE__*/jsx(KeyboardArrowUpIcon, {}) : /*#__PURE__*/jsx(KeyboardArrowDownIcon, {})
471
- })), /*#__PURE__*/jsxs("div", {
472
- style: {
473
- marginRight: '5px'
484
+ display: 'flex'
474
485
  },
475
- children: ["(", row.subRows.length, ")"]
476
- }), cell.render('Cell')]
477
- }) : cell.isAggregated ?
478
- // If the cell is aggregated, use the Aggregated
479
- // renderer for cell
480
- cell.render('Aggregated') : cell.isPlaceholder ? /*#__PURE__*/jsx(Fragment, {}) // For cells with repeated values, render null
481
- :
482
- // Otherwise, just render the regular cell
483
- cell.render('Cell')));
484
- return cells;
485
- })), row.isExpanded && renderSubComponent && !row.isGrouped && /*#__PURE__*/jsx(Fragment, {
486
+ children: [/*#__PURE__*/jsx(IconButton, _objectSpread$h(_objectSpread$h({
487
+ "aria-label": "expand row",
488
+ size: "small"
489
+ }, row.getToggleRowExpandedProps()), {}, {
490
+ onClick: undefined,
491
+ children: row.isExpanded ? /*#__PURE__*/jsx(KeyboardArrowUpIcon, {}) : /*#__PURE__*/jsx(KeyboardArrowDownIcon, {})
492
+ })), /*#__PURE__*/jsxs("div", {
493
+ style: {
494
+ marginRight: '5px'
495
+ },
496
+ children: ["(", row.subRows.length, ")"]
497
+ }), cell.render('Cell')]
498
+ }) : cell.isAggregated ?
499
+ // If the cell is aggregated, use the Aggregated
500
+ // renderer for cell
501
+ cell.render('Aggregated') : cell.isPlaceholder ? /*#__PURE__*/jsx(Fragment, {}) // For cells with repeated values, render null
502
+ :
503
+ // Otherwise, just render the regular cell
504
+ cell.render('Cell')));
505
+ return cells;
506
+ });
507
+ }()), row.isExpanded && renderSubComponent && !row.isGrouped && /*#__PURE__*/jsx(Fragment, {
486
508
  children: renderSubComponent(row)
487
509
  })]
488
510
  }, row.getRowProps().key + '_fragment');
@@ -490,12 +512,70 @@ var MyRow = /*#__PURE__*/forwardRef(function (_ref4, ref) {
490
512
  var useStyles$6 = makeStyles(function () {
491
513
  return createStyles({
492
514
  table: {
493
- flex: 1,
494
- height: '100%'
495
- },
496
- expanded: {
497
- paddingBottom: 0,
498
- paddingTop: 0
515
+ '& .MuiTable-root': {
516
+ width: 'calc(100% - 5px)',
517
+ marginLeft: '5px'
518
+ },
519
+ '& .MuiTableCell-root': {
520
+ border: 'none'
521
+ },
522
+ '& .MuiTableBody-root .MuiTableCell-root': {
523
+ backgroundColor: '#F6F7F8',
524
+ borderTop: '5px solid white'
525
+ },
526
+ '& .MuiTableBody-root .MuiTableCell-root:first-child': {
527
+ borderTopLeftRadius: '10px',
528
+ borderBottomLeftRadius: '10px'
529
+ },
530
+ '& .MuiTableBody-root .MuiTableCell-root:last-child': {
531
+ borderTopRightRadius: '10px',
532
+ borderBottomRightRadius: '10px'
533
+ },
534
+ '& .MuiTableCell-head': {
535
+ paddingTop: '0px',
536
+ whiteSpace: 'wrap',
537
+ textAlign: 'center',
538
+ verticalAlign: 'bottom',
539
+ paddingBottom: '5px'
540
+ },
541
+ '& .MuiTableRow-root': {
542
+ backgroundColor: 'unset',
543
+ borderRadius: '10px',
544
+ height: '79px',
545
+ position: 'relative'
546
+ },
547
+ '& .MuiTableRow-root .fixed': {
548
+ backgroundColor: '#F6F7F8'
549
+ },
550
+ '& .MuiTableRow-root:hover': {
551
+ backgroundColor: 'unset'
552
+ },
553
+ '& .MuiTableRow-root.childRow .fixed': {
554
+ backgroundColor: '#FBFBFB'
555
+ },
556
+ '& .MuiTableRow-head': {
557
+ height: '30px'
558
+ },
559
+ '& .MuiTableRow-root.childRow .MuiTableCell-root': {
560
+ backgroundColor: '#FBFBFB',
561
+ borderWidth: '4px'
562
+ },
563
+ '& .MuiTableRow-root.expandedRow': {
564
+ boxShadow: '0px 7px 3px 0px #E5E7E9',
565
+ zIndex: 1
566
+ },
567
+ '& .MuiTableRow-root.expandedRow + .MuiTableRow-root': {
568
+ zIndex: 0
569
+ },
570
+ '& .drag-handle': {
571
+ padding: 0,
572
+ userSelect: 'unset',
573
+ cursor: 'move'
574
+ },
575
+ height: '100%',
576
+ scrollbarWidth: 'thin',
577
+ scrollbarGutter: 'stable',
578
+ backgroundColor: 'white'
499
579
  }
500
580
  });
501
581
  });
@@ -507,7 +587,7 @@ var cellStyleHelper = function cellStyleHelper(cell) {
507
587
  position: 'sticky',
508
588
  right: 0,
509
589
  zIndex: 4,
510
- backgroundColor: 'white'
590
+ minWidth: cell.column.width
511
591
  };
512
592
  }
513
593
  return {
@@ -518,55 +598,73 @@ var cellStyleHelper = function cellStyleHelper(cell) {
518
598
  };
519
599
  };
520
600
  function Loading(_ref5) {
601
+ var _ref6;
521
602
  var headerGroups = _ref5.headerGroups,
603
+ parentRow = _ref5.parentRow,
522
604
  rowHight = _ref5.rowHight;
523
- //TODO make it more dynamic, so that skeleton looks closer to actual data
605
+ var headers = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[headerGroups.length - 1].headers.flat();
606
+ var cellDefinitions = parentRow === null || parentRow === void 0 ? void 0 : parentRow.cells.flat();
607
+ var depth = parentRow ? parentRow.depth : 0;
524
608
  var row = /*#__PURE__*/jsx(TableRow, {
525
- children: headerGroups[headerGroups.length - 1].headers.flatMap(function (h) {
609
+ className: classnames({
610
+ childRow: !!depth
611
+ }),
612
+ children: ((_ref6 = headers !== null && headers !== void 0 ? headers : cellDefinitions) !== null && _ref6 !== void 0 ? _ref6 : []).map(function (h, i) {
613
+ var _headers$fixed, _headers2, _cellDefinitions, _cellDefinitions$i, _cellDefinitions$i2, _cellDefinitions$i3;
614
+ var lastFlexible = ((_headers$fixed = headers === null || headers === void 0 || (_headers2 = headers[i + 1]) === null || _headers2 === void 0 ? void 0 : _headers2.fixed) !== null && _headers$fixed !== void 0 ? _headers$fixed : cellDefinitions === null || cellDefinitions === void 0 || (_cellDefinitions = cellDefinitions[i + 1]) === null || _cellDefinitions === void 0 ? void 0 : _cellDefinitions.column.fixed) === true;
615
+ var isFixed = 'fixed' in h ? h.fixed : cellDefinitions === null || cellDefinitions === void 0 || (_cellDefinitions$i = cellDefinitions[i]) === null || _cellDefinitions$i === void 0 ? void 0 : _cellDefinitions$i.column.fixed;
616
+ var id = 'id' in h ? h.id : cellDefinitions === null || cellDefinitions === void 0 || (_cellDefinitions$i2 = cellDefinitions[i]) === null || _cellDefinitions$i2 === void 0 ? void 0 : _cellDefinitions$i2.column.id;
617
+ var width = 'width' in h ? h.width : cellDefinitions === null || cellDefinitions === void 0 || (_cellDefinitions$i3 = cellDefinitions[i]) === null || _cellDefinitions$i3 === void 0 ? void 0 : _cellDefinitions$i3.column.width;
526
618
  var cells = [];
527
- if (h.fixed) {
619
+ if (isFixed) {
528
620
  cells.push(/*#__PURE__*/jsx(TableCell, {
621
+ className: "fixed",
529
622
  style: {
530
- width: 1,
623
+ width: 15,
624
+ minWidth: 15,
531
625
  padding: 0,
532
626
  position: 'relative',
533
- backgroundColor: 'white',
534
627
  zIndex: 4,
535
628
  height: rowHight
536
629
  }
537
- }, h.id + '1'));
630
+ }, id + '1'));
538
631
  cells.push(/*#__PURE__*/jsx(TableCell, {
539
632
  style: {
540
- width: 1,
633
+ width: 5,
634
+ minWidth: 5,
541
635
  padding: 0,
542
636
  position: 'sticky',
543
637
  backgroundColor: 'white',
544
638
  zIndex: 3,
545
- right: 242,
639
+ right: 247,
546
640
  height: rowHight
547
641
  },
548
642
  children: /*#__PURE__*/jsx("div", {
643
+ className: "fixed",
549
644
  style: {
550
645
  position: 'absolute',
551
646
  top: 0,
552
- left: 0,
647
+ left: 5,
553
648
  bottom: 0,
554
- width: 1,
555
- boxShadow: '-1px 0px 0px 0px rgba(224, 224, 224, 1)'
649
+ width: 15,
650
+ boxShadow: 'rgb(224, 224, 224) -2px 0px 1px 0px'
556
651
  }
557
652
  })
558
- }, h.id + '2'));
653
+ }, id + '2'));
559
654
  }
560
655
  cells.push(/*#__PURE__*/jsx(TableCell, {
656
+ className: isFixed ? 'fixed' : '',
561
657
  style: {
562
- position: h.fixed ? 'sticky' : 'relative',
563
- right: h.fixed ? 0 : undefined,
564
- backgroundColor: h.fixed ? 'white' : undefined,
565
- zIndex: h.fixed ? 4 : 3,
566
- height: rowHight
658
+ position: isFixed ? 'sticky' : 'relative',
659
+ right: isFixed ? 0 : undefined,
660
+ zIndex: isFixed ? 4 : 3,
661
+ height: rowHight,
662
+ width: lastFlexible ? undefined : width,
663
+ minWidth: isFixed ? width : undefined,
664
+ maxWidth: isFixed ? width : undefined
567
665
  },
568
666
  children: /*#__PURE__*/jsx(Skeleton, {})
569
- }, h.id));
667
+ }, id));
570
668
  return cells;
571
669
  })
572
670
  });
@@ -606,8 +704,8 @@ function GlobalFilter(_ref) {
606
704
  });
607
705
  }
608
706
 
609
- function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
610
- function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
707
+ function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
708
+ function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
611
709
  /**
612
710
  * The toolbar component for the grid, it holds filters and general action buttons.
613
711
  * If there are filters specified it is expandable, otherwise it its a simple toolbar.
@@ -714,7 +812,7 @@ function Toolbar(_ref) {
714
812
  children: view.icon
715
813
  }, view.label);
716
814
  })
717
- }), globalFilter && /*#__PURE__*/jsx(GlobalFilter, _objectSpread$d({}, globalFilter))]
815
+ }), globalFilter && /*#__PURE__*/jsx(GlobalFilter, _objectSpread$g({}, globalFilter))]
718
816
  })
719
817
  }), /*#__PURE__*/jsx(AccordionDetails, {
720
818
  style: {
@@ -726,14 +824,14 @@ function Toolbar(_ref) {
726
824
  }
727
825
 
728
826
  var menuItemShowTooltip = "menuItemShowTooltip-m-Rd7";
729
- var css_248z$3 = ".menuItemShowTooltip-m-Rd7 {\n pointer-events: inherit !important;\n}\n";
730
- styleInject(css_248z$3);
827
+ var css_248z$4 = ".menuItemShowTooltip-m-Rd7 {\n pointer-events: inherit !important;\n}\n";
828
+ styleInject(css_248z$4);
731
829
 
732
830
  function ActionCell(_ref) {
733
831
  var row = _ref.row,
734
832
  actions = _ref.actions,
735
- updateData = _ref.updateData,
736
- deleteData = _ref.deleteData,
833
+ _updateData = _ref.updateData,
834
+ _deleteData = _ref.deleteData,
737
835
  _ref$groupActions = _ref.groupActions,
738
836
  groupActions = _ref$groupActions === void 0 ? 2 : _ref$groupActions;
739
837
  var _React$useState = React.useState(null),
@@ -754,16 +852,16 @@ function ActionCell(_ref) {
754
852
  case 0:
755
853
  _context.next = 2;
756
854
  return action.onClick(row.original, row.id, function (data) {
757
- return updateData === null || updateData === void 0 ? void 0 : updateData(data, row.id);
855
+ return _updateData === null || _updateData === void 0 ? void 0 : _updateData(data, row.id);
758
856
  }, function () {
759
- return deleteData === null || deleteData === void 0 ? void 0 : deleteData(row.index);
857
+ return _deleteData === null || _deleteData === void 0 ? void 0 : _deleteData(row.index);
760
858
  });
761
859
  case 2:
762
860
  callback = _context.sent;
763
861
  callback === null || callback === void 0 || callback(row.original, row.id, function (data) {
764
- return updateData === null || updateData === void 0 ? void 0 : updateData(data, row.id);
862
+ return _updateData === null || _updateData === void 0 ? void 0 : _updateData(data, row.id);
765
863
  }, function () {
766
- return deleteData === null || deleteData === void 0 ? void 0 : deleteData(row.index);
864
+ return _deleteData === null || _deleteData === void 0 ? void 0 : _deleteData(row.index);
767
865
  });
768
866
  case 4:
769
867
  case "end":
@@ -775,6 +873,19 @@ function ActionCell(_ref) {
775
873
  return _ref2.apply(this, arguments);
776
874
  };
777
875
  }();
876
+ if (typeof actions === 'function') {
877
+ return /*#__PURE__*/jsx(Fragment, {
878
+ children: actions({
879
+ row: row,
880
+ updateData: function updateData(data) {
881
+ return _updateData === null || _updateData === void 0 ? void 0 : _updateData(data, row.id);
882
+ },
883
+ deleteData: function deleteData() {
884
+ return _deleteData === null || _deleteData === void 0 ? void 0 : _deleteData(row.index);
885
+ }
886
+ })
887
+ });
888
+ }
778
889
  var finalActions = actions.filter(function (a) {
779
890
  return typeof a.hide == 'function' ? !a.hide(row.original, row.id) : !a.hide;
780
891
  });
@@ -826,7 +937,7 @@ function ActionCell(_ref) {
826
937
  children: [" ", a.disabledTooltip, " "]
827
938
  }) : '',
828
939
  children: /*#__PURE__*/jsx(MenuItem, {
829
- className: classNames(a.disabledTooltip && (typeof a.disabled == 'function' ? a.disabled(row.original, row.id) : a.disabled) ? menuItemShowTooltip : undefined, 'additionalActionsMenu'),
940
+ className: classnames(a.disabledTooltip && (typeof a.disabled == 'function' ? a.disabled(row.original, row.id) : a.disabled) ? menuItemShowTooltip : undefined, 'additionalActionsMenu'),
830
941
  disabled: typeof a.disabled == 'function' ? a.disabled(row.original, row.id) : a.disabled,
831
942
  onClick: function onClick(e) {
832
943
  if (typeof a.disabled == 'function' ? a.disabled(row.original, row.id) : a.disabled) {
@@ -845,8 +956,8 @@ function ActionCell(_ref) {
845
956
  }
846
957
 
847
958
  var _excluded$2 = ["isLoading", "noData"];
848
- function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
849
- function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
959
+ function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
960
+ function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
850
961
  function Gallery(_ref) {
851
962
  var isLoading = _ref.isLoading,
852
963
  noData = _ref.noData,
@@ -863,9 +974,9 @@ function Gallery(_ref) {
863
974
  if (props.rows.length > 0) {
864
975
  GalleryNode = props.rows.some(function (r) {
865
976
  return r.isExpanded;
866
- }) ? /*#__PURE__*/jsx(GroupedGallery, _objectSpread$c(_objectSpread$c({}, props), {}, {
977
+ }) ? /*#__PURE__*/jsx(GroupedGallery, _objectSpread$f(_objectSpread$f({}, props), {}, {
867
978
  className: classes.gallery
868
- })) : /*#__PURE__*/jsx(SimpleGallery, _objectSpread$c(_objectSpread$c({}, props), {}, {
979
+ })) : /*#__PURE__*/jsx(SimpleGallery, _objectSpread$f(_objectSpread$f({}, props), {}, {
869
980
  className: classes.gallery
870
981
  }));
871
982
  } else {
@@ -1117,8 +1228,8 @@ function parseDate(value) {
1117
1228
  }
1118
1229
  }
1119
1230
 
1120
- function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1121
- function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1231
+ function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1232
+ function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1122
1233
  var localeMap = {
1123
1234
  en: enLocale,
1124
1235
  fr: frLocale,
@@ -1141,7 +1252,7 @@ function DateRangeFilter(_ref) {
1141
1252
  if (date == undefined && (filterValue === null || filterValue === void 0 ? void 0 : filterValue.to) == undefined) {
1142
1253
  setFilter(undefined);
1143
1254
  } else {
1144
- setFilter(_objectSpread$b(_objectSpread$b({}, filterValue), {}, {
1255
+ setFilter(_objectSpread$e(_objectSpread$e({}, filterValue), {}, {
1145
1256
  type: 'date',
1146
1257
  from: date || undefined
1147
1258
  }));
@@ -1155,7 +1266,7 @@ function DateRangeFilter(_ref) {
1155
1266
  if (date == undefined && (filterValue === null || filterValue === void 0 ? void 0 : filterValue.from) == undefined) {
1156
1267
  setFilter(undefined);
1157
1268
  } else {
1158
- setFilter(_objectSpread$b(_objectSpread$b({}, filterValue), {}, {
1269
+ setFilter(_objectSpread$e(_objectSpread$e({}, filterValue), {}, {
1159
1270
  type: 'date',
1160
1271
  to: date || undefined
1161
1272
  }));
@@ -1363,11 +1474,11 @@ var ExtendedTooltip = withStyles(function (theme) {
1363
1474
 
1364
1475
  var editalbe = "editalbe-jZFBd";
1365
1476
  var numbers = "numbers-mJ9nr";
1366
- var css_248z$2 = ".editalbe-jZFBd {\n width: 100%;\n min-height: 20px;\n cursor: text;\n}\n.editalbe-jZFBd:hover {\n border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n font-size: 16px;\n font-weight: 400;\n}\n\n.numbers-mJ9nr {\n text-align: right;\n}\n.numbers-mJ9nr input {\n text-align: right;\n}\n";
1367
- styleInject(css_248z$2);
1477
+ var css_248z$3 = ".editalbe-jZFBd {\n width: 100%;\n min-height: 20px;\n cursor: text;\n}\n.editalbe-jZFBd:hover {\n border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n font-size: 16px;\n font-weight: 400;\n}\n\n.numbers-mJ9nr {\n text-align: right;\n}\n.numbers-mJ9nr input {\n text-align: right;\n}\n";
1478
+ styleInject(css_248z$3);
1368
1479
 
1369
- function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1370
- function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1480
+ function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1481
+ function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1371
1482
  function DefaultCell (_ref) {
1372
1483
  var stateValue = _ref.value,
1373
1484
  column = _ref.column,
@@ -1414,7 +1525,7 @@ function DefaultCell (_ref) {
1414
1525
  break;
1415
1526
  case 10:
1416
1527
  _context.next = 12;
1417
- return updateData === null || updateData === void 0 ? void 0 : updateData(unflatten(_objectSpread$a(_objectSpread$a({}, row.original), {}, _defineProperty({}, column.id, column.type == 'number' ? Number(value) : value))), row.id);
1528
+ return updateData === null || updateData === void 0 ? void 0 : updateData(unflatten(_objectSpread$d(_objectSpread$d({}, row.original), {}, _defineProperty({}, column.id, column.type == 'number' ? Number(value) : value))), row.id);
1418
1529
  case 12:
1419
1530
  setEditing(false);
1420
1531
  case 13:
@@ -1460,7 +1571,7 @@ function DefaultCell (_ref) {
1460
1571
  case 2:
1461
1572
  setValue(newValue);
1462
1573
  _context2.next = 5;
1463
- return updateData === null || updateData === void 0 ? void 0 : updateData(unflatten(_objectSpread$a(_objectSpread$a({}, row.original), {}, _defineProperty({}, column.id, column.type == 'number' ? Number(newValue) : newValue))), row.id);
1574
+ return updateData === null || updateData === void 0 ? void 0 : updateData(unflatten(_objectSpread$d(_objectSpread$d({}, row.original), {}, _defineProperty({}, column.id, column.type == 'number' ? Number(newValue) : newValue))), row.id);
1464
1575
  case 5:
1465
1576
  case "end":
1466
1577
  return _context2.stop();
@@ -1470,11 +1581,11 @@ function DefaultCell (_ref) {
1470
1581
  return function (_x) {
1471
1582
  return _ref3.apply(this, arguments);
1472
1583
  };
1473
- }());
1584
+ }(), row);
1474
1585
  }
1475
1586
  if (!editing || !isEditalbe) {
1476
1587
  return /*#__PURE__*/jsx("div", {
1477
- className: classNames(isEditalbe ? editalbe : undefined, column.type == 'number' ? numbers : undefined),
1588
+ className: classnames(isEditalbe ? editalbe : undefined, column.type == 'number' ? numbers : undefined),
1478
1589
  onClick: onClick ? onClick : function () {
1479
1590
  return setEditing(true);
1480
1591
  },
@@ -1507,11 +1618,11 @@ function DefaultCell (_ref) {
1507
1618
  }
1508
1619
 
1509
1620
  var tooltip = "tooltip-uMWFc";
1510
- var css_248z$1 = ".tooltip-uMWFc {\n /* margin-top: 1rem; */\n background-color: #1b181a;\n color: white;\n padding: 6px;\n border-radius: 4px;\n}\n";
1511
- styleInject(css_248z$1);
1621
+ var css_248z$2 = ".tooltip-uMWFc {\n /* margin-top: 1rem; */\n background-color: #1b181a;\n color: white;\n padding: 6px;\n border-radius: 4px;\n}\n";
1622
+ styleInject(css_248z$2);
1512
1623
 
1513
- function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1514
- function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1624
+ function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1625
+ function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1515
1626
  function BooleanCell (_ref) {
1516
1627
  var val = _ref.value,
1517
1628
  column = _ref.column,
@@ -1549,7 +1660,7 @@ function BooleanCell (_ref) {
1549
1660
  if (loading) return;
1550
1661
  if (!isEditalbe) return;
1551
1662
  setLoading(true);
1552
- var updatedData = _objectSpread$9({}, row.original);
1663
+ var updatedData = _objectSpread$c({}, row.original);
1553
1664
  column.id.split('.').reduce(function (acc, key, index, arr) {
1554
1665
  if (index === arr.length - 1) {
1555
1666
  if (column.dataType == 'organizationIdArray') {
@@ -1597,7 +1708,7 @@ function BooleanCell (_ref) {
1597
1708
  layerProps = _useLayer.layerProps,
1598
1709
  renderLayer = _useLayer.renderLayer;
1599
1710
  return /*#__PURE__*/jsxs(Fragment, {
1600
- children: [/*#__PURE__*/jsx("div", _objectSpread$9(_objectSpread$9(_objectSpread$9({}, triggerProps), hoverProps), {}, {
1711
+ children: [/*#__PURE__*/jsx("div", _objectSpread$c(_objectSpread$c(_objectSpread$c({}, triggerProps), hoverProps), {}, {
1601
1712
  children: /*#__PURE__*/jsx(Checkbox, {
1602
1713
  checked: value,
1603
1714
  onChange: onChange,
@@ -1607,7 +1718,7 @@ function BooleanCell (_ref) {
1607
1718
  disabled: !isEditalbe || !!disabled
1608
1719
  })
1609
1720
  })), renderLayer(/*#__PURE__*/jsx(Fragment, {
1610
- children: isOver && !!disabled && /*#__PURE__*/jsx("div", _objectSpread$9(_objectSpread$9({}, layerProps), {}, {
1721
+ children: isOver && !!disabled && /*#__PURE__*/jsx("div", _objectSpread$c(_objectSpread$c({}, layerProps), {}, {
1611
1722
  className: tooltip,
1612
1723
  children: disabled
1613
1724
  }))
@@ -1617,77 +1728,11 @@ function BooleanCell (_ref) {
1617
1728
 
1618
1729
  var arMedium = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248%22%20width%3D%2248%22%3E%3Cpath%20d%3D%22M6%2042V27h3v9.9L36.9%209H27V6h15v15h-3v-9.9L11.1%2039H21v3Z%22%2F%3E%3C%2Fsvg%3E";
1619
1730
 
1620
- function MediaViewerCell (props) {
1621
- if (!props.value) {
1622
- return /*#__PURE__*/jsx(Fragment, {});
1623
- }
1624
- var _useState = useState(undefined),
1625
- _useState2 = _slicedToArray(_useState, 2),
1626
- media = _useState2[0],
1627
- setMedia = _useState2[1];
1628
- var _useState3 = useState(Date.now()),
1629
- _useState4 = _slicedToArray(_useState3, 2),
1630
- timeStamp = _useState4[0],
1631
- setTimeStamp = _useState4[1];
1632
- var id = props.value[0];
1633
- useEffect(function () {
1634
- if (!id) return;
1635
- handler.mediaHandler.getMediaById(id).then(function (res) {
1636
- var _mediaItem$urlVariant, _url;
1637
- var mediaItem = res.data[0];
1638
- if (!(mediaItem !== null && mediaItem !== void 0 && mediaItem.url)) return;
1639
- var url = new URL(mediaItem.url);
1640
- var mediaType = url.pathname.endsWith('.glb') ? 'AR' : 'PCT';
1641
- if (url.pathname.endsWith('.tif') || url.pathname.endsWith('.tiff') && (_mediaItem$urlVariant = mediaItem.urlVariants) !== null && _mediaItem$urlVariant !== void 0 && _mediaItem$urlVariant[0]) {
1642
- url = mediaItem.urlVariants[0];
1643
- }
1644
- if (mediaType == 'AR') {
1645
- url.searchParams.append('v', timeStamp.toString());
1646
- }
1647
- setMedia({
1648
- url: (_url = url) === null || _url === void 0 ? void 0 : _url.toString(),
1649
- mediaType: mediaType,
1650
- functionType: 'ART',
1651
- storage: 'OTHER',
1652
- borderPercentage: mediaItem.borderPercentage
1653
- });
1654
- });
1655
- }, [timeStamp]);
1656
- if (!id) return /*#__PURE__*/jsx(Fragment, {});
1657
- var _useDivaCore = useDivaCore(),
1658
- handler = _useDivaCore.handler,
1659
- actions = _useDivaCore.actions;
1660
- var openContentBox = function openContentBox() {
1661
- setTimeStamp(Date.now());
1662
- actions.openFullscreen({
1663
- content: /*#__PURE__*/jsx(ContentBoxComponent, {
1664
- settings: {
1665
- contentBoxProps: {
1666
- type: 'MediaViewer',
1667
- medias: media ? [media] : undefined,
1668
- defaultDataOptions: 'fullscreen.enable:false;'
1669
- }
1670
- }
1671
- })
1672
- });
1673
- };
1674
- return /*#__PURE__*/jsx(Fragment, {
1675
- children: (media === null || media === void 0 ? void 0 : media.mediaType) === 'AR' ? /*#__PURE__*/jsx("img", {
1676
- src: arMedium,
1677
- onClick: openContentBox
1678
- }) : /*#__PURE__*/jsx("img", {
1679
- src: media === null || media === void 0 ? void 0 : media.url,
1680
- width: 39,
1681
- onClick: openContentBox
1682
- })
1683
- });
1684
- }
1685
-
1686
1731
  var imageCell = "imageCell-5dnCl";
1687
1732
  var loaded = "loaded-RbMyi";
1688
1733
  var hasError = "hasError-gzS9i";
1689
- var css_248z = ".imageCell-5dnCl {\n display: block;\n min-width: 60px;\n height: 60px;\n margin: auto;\n}\n\n@keyframes loaded-RbMyi {\n 0% {\n opacity: 0.1;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.imageCell-5dnCl.loaded-RbMyi:not(.hasError-gzS9i) {\n animation: loaded-RbMyi 300ms ease-in-out;\n}\n\n.imageCell-5dnCl.hasError-gzS9i {\n content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAAAAAAfl4auAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfmBQQGJh52F4jtAAAArElEQVRIx+3SwQ6CMAwG4K5sA8V4MTGejO//Ul48SLJkBDw4YNQLHIeuXvtf1mT7kraZugM/+IcVLFiwYMGs6PSVWk5i4GlcisLm46YvAAiAyivmYpqOh6FGgK5L9r2xMPRNqKqdTb/YWpgx+t3XkYcvUT2CnzUHQ4HPeCMX0oOl7Tz59qTtntM2tq+RnINoVDZW57Vdg9kYymqtKB9v/OkfFvY9ggULFiyYkw/YJiwWdl9zmAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wNS0wNFQwNjozODowNiswMDowMIF3ol0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDUtMDRUMDY6Mzg6MDYrMDA6MDDwKhrhAAAAAElFTkSuQmCC);\n}\n";
1690
- styleInject(css_248z);
1734
+ var css_248z$1 = ".imageCell-5dnCl {\n display: block;\n min-width: 60px;\n height: 60px;\n margin: auto;\n margin-top: -20px;\n margin-bottom: -20px;\n}\n\n@keyframes loaded-RbMyi {\n 0% {\n opacity: 0.1;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.imageCell-5dnCl.loaded-RbMyi:not(.hasError-gzS9i) {\n animation: loaded-RbMyi 300ms ease-in-out;\n}\n\n.imageCell-5dnCl.hasError-gzS9i {\n content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAAAAAAfl4auAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfmBQQGJh52F4jtAAAArElEQVRIx+3SwQ6CMAwG4K5sA8V4MTGejO//Ul48SLJkBDw4YNQLHIeuXvtf1mT7kraZugM/+IcVLFiwYMGs6PSVWk5i4GlcisLm46YvAAiAyivmYpqOh6FGgK5L9r2xMPRNqKqdTb/YWpgx+t3XkYcvUT2CnzUHQ4HPeCMX0oOl7Tz59qTtntM2tq+RnINoVDZW57Vdg9kYymqtKB9v/OkfFvY9ggULFiyYkw/YJiwWdl9zmAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wNS0wNFQwNjozODowNiswMDowMIF3ol0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDUtMDRUMDY6Mzg6MDYrMDA6MDDwKhrhAAAAAElFTkSuQmCC);\n}\n";
1735
+ styleInject(css_248z$1);
1691
1736
 
1692
1737
  var placeholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAAAAAAfl4auAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfmBQQGJh52F4jtAAAArElEQVRIx+3SwQ6CMAwG4K5sA8V4MTGejO//Ul48SLJkBDw4YNQLHIeuXvtf1mT7kraZugM/+IcVLFiwYMGs6PSVWk5i4GlcisLm46YvAAiAyivmYpqOh6FGgK5L9r2xMPRNqKqdTb/YWpgx+t3XkYcvUT2CnzUHQ4HPeCMX0oOl7Tz59qTtntM2tq+RnINoVDZW57Vdg9kYymqtKB9v/OkfFvY9ggULFiyYkw/YJiwWdl9zmAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wNS0wNFQwNjozODowNiswMDowMIF3ol0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDUtMDRUMDY6Mzg6MDYrMDA6MDDwKhrhAAAAAElFTkSuQmCC";
1693
1738
 
@@ -1784,9 +1829,75 @@ var isImage = function isImage(data) {
1784
1829
  }
1785
1830
  };
1786
1831
 
1832
+ function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1833
+ function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1834
+ function MediaViewerCell (props) {
1835
+ var _props$value, _props$column$fallbac;
1836
+ var _useState = useState(undefined),
1837
+ _useState2 = _slicedToArray(_useState, 2),
1838
+ media = _useState2[0],
1839
+ setMedia = _useState2[1];
1840
+ var _useState3 = useState(Date.now()),
1841
+ _useState4 = _slicedToArray(_useState3, 2),
1842
+ timeStamp = _useState4[0],
1843
+ setTimeStamp = _useState4[1];
1844
+ var _useDivaCore = useDivaCore(),
1845
+ handler = _useDivaCore.handler,
1846
+ actions = _useDivaCore.actions;
1847
+ var id = (_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value[0];
1848
+ useEffect(function () {
1849
+ if (!id) return;
1850
+ handler.mediaHandler.getMediaById(id).then(function (res) {
1851
+ var _mediaItem$urlVariant, _url;
1852
+ var mediaItem = res.data[0];
1853
+ if (!(mediaItem !== null && mediaItem !== void 0 && mediaItem.url)) return;
1854
+ var url = new URL(mediaItem.url);
1855
+ var mediaType = url.pathname.endsWith('.glb') ? 'AR' : 'PCT';
1856
+ if (url.pathname.endsWith('.tif') || url.pathname.endsWith('.tiff') && (_mediaItem$urlVariant = mediaItem.urlVariants) !== null && _mediaItem$urlVariant !== void 0 && _mediaItem$urlVariant[0]) {
1857
+ url = mediaItem.urlVariants[0];
1858
+ }
1859
+ if (mediaType == 'AR') {
1860
+ url.searchParams.append('v', timeStamp.toString());
1861
+ }
1862
+ setMedia({
1863
+ url: (_url = url) === null || _url === void 0 ? void 0 : _url.toString(),
1864
+ mediaType: mediaType,
1865
+ functionType: 'ART',
1866
+ storage: 'OTHER',
1867
+ borderPercentage: mediaItem.borderPercentage
1868
+ });
1869
+ });
1870
+ }, [timeStamp]);
1871
+ if (!id) return /*#__PURE__*/jsx(ImgCell, _objectSpread$b(_objectSpread$b({}, props), {}, {
1872
+ value: props.row.original[(_props$column$fallbac = props.column.fallbackField) !== null && _props$column$fallbac !== void 0 ? _props$column$fallbac : '']
1873
+ }));
1874
+ var openContentBox = function openContentBox() {
1875
+ setTimeStamp(Date.now());
1876
+ actions.openFullscreen({
1877
+ content: /*#__PURE__*/jsx(ContentBoxComponent, {
1878
+ settings: {
1879
+ contentBoxProps: {
1880
+ type: 'MediaViewer',
1881
+ medias: media ? [media] : undefined,
1882
+ defaultDataOptions: 'fullscreen.enable:false;'
1883
+ }
1884
+ }
1885
+ })
1886
+ });
1887
+ };
1888
+ return /*#__PURE__*/jsx("img", {
1889
+ src: (media === null || media === void 0 ? void 0 : media.mediaType) === 'AR' ? arMedium : media === null || media === void 0 ? void 0 : media.url,
1890
+ onClick: openContentBox,
1891
+ className: imageCell,
1892
+ style: {
1893
+ cursor: 'zoom-in'
1894
+ }
1895
+ });
1896
+ }
1897
+
1787
1898
  var _excluded$1 = ["showArrows"];
1788
- function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1789
- function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1899
+ function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1900
+ function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1790
1901
  function SelectionCell (_ref) {
1791
1902
  var _props$value;
1792
1903
  var showArrows = _ref.showArrows,
@@ -1825,7 +1936,7 @@ function SelectionCell (_ref) {
1825
1936
  if (loading) return;
1826
1937
  setLoading(true);
1827
1938
  setValue(event.target.value);
1828
- (_props$updateData = props.updateData) === null || _props$updateData === void 0 || _props$updateData.call(props, _objectSpread$8(_objectSpread$8({}, props.row.original), {}, _defineProperty({}, props.column.id, event.target.value)), props.row.id, props.column).then(function () {
1939
+ (_props$updateData = props.updateData) === null || _props$updateData === void 0 || _props$updateData.call(props, _objectSpread$a(_objectSpread$a({}, props.row.original), {}, _defineProperty({}, props.column.id, event.target.value)), props.row.id, props.column).then(function () {
1829
1940
  setLoading(false);
1830
1941
  });
1831
1942
  };
@@ -1840,7 +1951,7 @@ function SelectionCell (_ref) {
1840
1951
  setLoading(true);
1841
1952
  var newIndex = type == 'back' ? currentOptionIndex - 1 : currentOptionIndex + 1;
1842
1953
  setValue((_options$newIndex = options[newIndex]) === null || _options$newIndex === void 0 ? void 0 : _options$newIndex.key);
1843
- (_props$updateData2 = props.updateData) === null || _props$updateData2 === void 0 || _props$updateData2.call(props, _objectSpread$8(_objectSpread$8({}, props.row.original), {}, _defineProperty({}, props.column.id, (_options$newIndex2 = options[newIndex]) === null || _options$newIndex2 === void 0 ? void 0 : _options$newIndex2.key)), props.row.id, props.column).then(function () {
1954
+ (_props$updateData2 = props.updateData) === null || _props$updateData2 === void 0 || _props$updateData2.call(props, _objectSpread$a(_objectSpread$a({}, props.row.original), {}, _defineProperty({}, props.column.id, (_options$newIndex2 = options[newIndex]) === null || _options$newIndex2 === void 0 ? void 0 : _options$newIndex2.key)), props.row.id, props.column).then(function () {
1844
1955
  setLoading(false);
1845
1956
  });
1846
1957
  };
@@ -1881,11 +1992,11 @@ function SelectionCell (_ref) {
1881
1992
  }) :
1882
1993
  /*#__PURE__*/
1883
1994
  //if it is not editalbe it behaves the same as a string cell
1884
- jsx(DefaultCell, _objectSpread$8({}, props));
1995
+ jsx(DefaultCell, _objectSpread$a({}, props));
1885
1996
  }
1886
1997
 
1887
- function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1888
- function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1998
+ function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1999
+ function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1889
2000
  function TextCell (props) {
1890
2001
  var _ref;
1891
2002
  var isTranslated = props.column.type == 'textTranslation' || props.column.type == 'richTextTranslation';
@@ -1904,10 +2015,10 @@ function TextCell (props) {
1904
2015
  if (save === 0) return;
1905
2016
  if (isTranslated) {
1906
2017
  var _props$updateData;
1907
- (_props$updateData = props.updateData) === null || _props$updateData === void 0 || _props$updateData.call(props, _objectSpread$7(_objectSpread$7({}, props.row.original), {}, _defineProperty(_defineProperty({}, props.column.id, value[languages[0]]), props.column.id + '_locales', value)), props.row.id);
2018
+ (_props$updateData = props.updateData) === null || _props$updateData === void 0 || _props$updateData.call(props, _objectSpread$9(_objectSpread$9({}, props.row.original), {}, _defineProperty(_defineProperty({}, props.column.id, value[languages[0]]), props.column.id + '_locales', value)), props.row.id);
1908
2019
  } else {
1909
2020
  var _props$updateData2;
1910
- (_props$updateData2 = props.updateData) === null || _props$updateData2 === void 0 || _props$updateData2.call(props, _objectSpread$7(_objectSpread$7({}, props.row.original), {}, _defineProperty({}, props.column.id, value)), props.row.id);
2021
+ (_props$updateData2 = props.updateData) === null || _props$updateData2 === void 0 || _props$updateData2.call(props, _objectSpread$9(_objectSpread$9({}, props.row.original), {}, _defineProperty({}, props.column.id, value)), props.row.id);
1911
2022
  }
1912
2023
  }, [save]);
1913
2024
  var onChange = function onChange(accepted) {
@@ -1919,7 +2030,7 @@ function TextCell (props) {
1919
2030
  };
1920
2031
 
1921
2032
  //if it is not editalbe it behaves the same as a string cell
1922
- return /*#__PURE__*/jsx(DefaultCell, _objectSpread$7(_objectSpread$7({}, props), {}, {
2033
+ return /*#__PURE__*/jsx(DefaultCell, _objectSpread$9(_objectSpread$9({}, props), {}, {
1923
2034
  onClick: function onClick() {
1924
2035
  var _props$column$type, _props$column$type$st, _props$column$type2, _props$column$type2$e;
1925
2036
  return openModal({
@@ -1958,7 +2069,7 @@ function Text(_ref3) {
1958
2069
  }, [value]);
1959
2070
  function changeText(text) {
1960
2071
  if (translation) {
1961
- setValue(_objectSpread$7(_objectSpread$7({}, value), {}, _defineProperty({}, languages[curLangIndex], text)));
2072
+ setValue(_objectSpread$9(_objectSpread$9({}, value), {}, _defineProperty({}, languages[curLangIndex], text)));
1962
2073
  } else {
1963
2074
  setValue(text);
1964
2075
  }
@@ -1972,7 +2083,7 @@ function Text(_ref3) {
1972
2083
  defaultValue: translation ? value[languages[curLangIndex]] : value,
1973
2084
  onChange: function onChange(e) {
1974
2085
  if (translation) {
1975
- setValue(_objectSpread$7(_objectSpread$7({}, value), {}, _defineProperty({}, languages[curLangIndex], e.target.value)));
2086
+ setValue(_objectSpread$9(_objectSpread$9({}, value), {}, _defineProperty({}, languages[curLangIndex], e.target.value)));
1976
2087
  } else setValue(e.target.value);
1977
2088
  },
1978
2089
  maxLength: maxLength,
@@ -2008,7 +2119,7 @@ function TranslationSelector(_ref4) {
2008
2119
  return setCutLang(newValue);
2009
2120
  },
2010
2121
  children: languages.map(function (lang, index) {
2011
- return /*#__PURE__*/jsx(Tab, _objectSpread$7({
2122
+ return /*#__PURE__*/jsx(Tab, _objectSpread$9({
2012
2123
  style: {
2013
2124
  minWidth: 72,
2014
2125
  height: '30px',
@@ -2028,8 +2139,8 @@ function a11yProps(index) {
2028
2139
  }
2029
2140
 
2030
2141
  var _excluded = ["onValueChange", "value"];
2031
- function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2032
- function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2142
+ function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2143
+ function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2033
2144
  function PriceCell (props) {
2034
2145
  var _useState = useState(false),
2035
2146
  _useState2 = _slicedToArray(_useState, 2),
@@ -2068,7 +2179,7 @@ function PriceCell (props) {
2068
2179
  break;
2069
2180
  case 10:
2070
2181
  _context.next = 12;
2071
- return (_props$updateData2 = props.updateData) === null || _props$updateData2 === void 0 ? void 0 : _props$updateData2.call(props, _objectSpread$6(_objectSpread$6({}, props.row.original), {}, _defineProperty({}, props.column.id, value)), props.row.id);
2182
+ return (_props$updateData2 = props.updateData) === null || _props$updateData2 === void 0 ? void 0 : _props$updateData2.call(props, _objectSpread$8(_objectSpread$8({}, props.row.original), {}, _defineProperty({}, props.column.id, value)), props.row.id);
2072
2183
  case 12:
2073
2184
  setEditing(false);
2074
2185
  case 13:
@@ -2083,8 +2194,8 @@ function PriceCell (props) {
2083
2194
  }();
2084
2195
  var isEditalbe = props.column.editable && props.inlineEditing;
2085
2196
  if (!editing || !isEditalbe) {
2086
- return /*#__PURE__*/jsx(DefaultCell, _objectSpread$6(_objectSpread$6({}, props), {}, {
2087
- column: _objectSpread$6({}, props.column),
2197
+ return /*#__PURE__*/jsx(DefaultCell, _objectSpread$8(_objectSpread$8({}, props), {}, {
2198
+ column: _objectSpread$8({}, props.column),
2088
2199
  value: DivaUtils.formatPrice(props.value),
2089
2200
  onClick: function onClick() {
2090
2201
  return setEditing(true);
@@ -2147,7 +2258,7 @@ function ControlledNumberFormat(_ref2) {
2147
2258
  }
2148
2259
  (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e);
2149
2260
  };
2150
- return /*#__PURE__*/jsx(NumericFormat, _objectSpread$6(_objectSpread$6({}, props), {}, {
2261
+ return /*#__PURE__*/jsx(NumericFormat, _objectSpread$8(_objectSpread$8({}, props), {}, {
2151
2262
  value: value,
2152
2263
  customInput: StyledTextFiled,
2153
2264
  onChange: function onChange() {
@@ -2210,8 +2321,8 @@ function getLocale(lang) {
2210
2321
  }
2211
2322
  }
2212
2323
 
2213
- function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2214
- function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2324
+ function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2325
+ function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2215
2326
  function FormularCell (props) {
2216
2327
  var _useDivaCore = useDivaCore(),
2217
2328
  openModal = _useDivaCore.actions.openModal;
@@ -2219,7 +2330,7 @@ function FormularCell (props) {
2219
2330
  t = _useTranslation.t;
2220
2331
  function doUpdateVariant(d) {
2221
2332
  var _props$updateData;
2222
- (_props$updateData = props.updateData) === null || _props$updateData === void 0 || _props$updateData.call(props, _objectSpread$5({}, d), props.row.id);
2333
+ (_props$updateData = props.updateData) === null || _props$updateData === void 0 || _props$updateData.call(props, _objectSpread$7({}, d), props.row.id);
2223
2334
  }
2224
2335
  return /*#__PURE__*/jsx(Fragment, {
2225
2336
  children: /*#__PURE__*/jsx(Button, {
@@ -2242,34 +2353,34 @@ function FormularCell (props) {
2242
2353
  });
2243
2354
  }
2244
2355
 
2245
- function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2246
- function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2356
+ function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2357
+ function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2247
2358
  function CustomCell (props) {
2248
2359
  var classes = useStyles$1();
2249
2360
  return /*#__PURE__*/jsx("div", {
2250
2361
  className: classes.wrapper,
2251
- children: /*#__PURE__*/jsx(Cell, _objectSpread$4({}, props))
2362
+ children: /*#__PURE__*/jsx(Cell, _objectSpread$6({}, props))
2252
2363
  });
2253
2364
  }
2254
2365
  function Cell(props) {
2255
2366
  switch (props.column.type) {
2256
2367
  case 'boolean':
2257
- return /*#__PURE__*/jsx(BooleanCell, _objectSpread$4({}, props));
2368
+ return /*#__PURE__*/jsx(BooleanCell, _objectSpread$6({}, props));
2258
2369
  case 'mediaViewer':
2259
- return /*#__PURE__*/jsx(MediaViewerCell, _objectSpread$4({}, props));
2370
+ return /*#__PURE__*/jsx(MediaViewerCell, _objectSpread$6({}, props));
2260
2371
  case 'image':
2261
- return /*#__PURE__*/jsx(ImgCell, _objectSpread$4({}, props));
2372
+ return /*#__PURE__*/jsx(ImgCell, _objectSpread$6({}, props));
2262
2373
  case 'select':
2263
- return /*#__PURE__*/jsx(SelectionCell, _objectSpread$4({}, props));
2374
+ return /*#__PURE__*/jsx(SelectionCell, _objectSpread$6({}, props));
2264
2375
  case 'selectArrows':
2265
- return /*#__PURE__*/jsx(SelectionCell, _objectSpread$4(_objectSpread$4({}, props), {}, {
2376
+ return /*#__PURE__*/jsx(SelectionCell, _objectSpread$6(_objectSpread$6({}, props), {}, {
2266
2377
  showArrows: true
2267
2378
  }));
2268
2379
  case 'text':
2269
2380
  case 'textTranslation':
2270
2381
  case 'richText':
2271
2382
  case 'richTextTranslation':
2272
- return /*#__PURE__*/jsx(TextCell, _objectSpread$4({}, props));
2383
+ return /*#__PURE__*/jsx(TextCell, _objectSpread$6({}, props));
2273
2384
  case 'htmlText':
2274
2385
  return /*#__PURE__*/jsx(TextareaAutosize$1, {
2275
2386
  value: props.value,
@@ -2282,32 +2393,31 @@ function Cell(props) {
2282
2393
  }
2283
2394
  });
2284
2395
  case 'price':
2285
- return /*#__PURE__*/jsx(PriceCell, _objectSpread$4({}, props));
2396
+ return /*#__PURE__*/jsx(PriceCell, _objectSpread$6({}, props));
2286
2397
  case 'date':
2287
- return /*#__PURE__*/jsx(DateCell, _objectSpread$4({}, props));
2398
+ return /*#__PURE__*/jsx(DateCell, _objectSpread$6({}, props));
2288
2399
  case 'formular':
2289
- return /*#__PURE__*/jsx(FormularCell, _objectSpread$4({}, props));
2400
+ return /*#__PURE__*/jsx(FormularCell, _objectSpread$6({}, props));
2290
2401
  case 'string':
2291
2402
  case 'number':
2292
2403
  default:
2293
- return /*#__PURE__*/jsx(DefaultCell, _objectSpread$4({}, props));
2404
+ return /*#__PURE__*/jsx(DefaultCell, _objectSpread$6({}, props));
2294
2405
  }
2295
2406
  }
2296
2407
  var useStyles$1 = makeStyles(function (theme) {
2297
2408
  return createStyles({
2298
2409
  wrapper: {
2299
2410
  maxWidth: theme.spacing(40),
2300
- marginRight: theme.spacing(3),
2301
2411
  minWidth: theme.spacing(5)
2302
2412
  }
2303
2413
  });
2304
2414
  });
2305
2415
 
2306
- function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2307
- function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2416
+ function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2417
+ function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2308
2418
  function useParsedOptions(options) {
2309
2419
  return useMemo(function () {
2310
- var parsedOptions = _objectSpread$3(_objectSpread$3({}, options), {}, {
2420
+ var parsedOptions = _objectSpread$5(_objectSpread$5({}, options), {}, {
2311
2421
  columns: [],
2312
2422
  hiddenColumns: [],
2313
2423
  pagination: _typeof(options.pagination) == 'object' ? options.pagination : options.pagination ? {} : undefined
@@ -2346,7 +2456,8 @@ function parseColumn(value) {
2346
2456
  minWidth: value.minWidth,
2347
2457
  dataType: value.dataType,
2348
2458
  preUpdateData: value.preUpdateData,
2349
- maxLength: value.maxLength
2459
+ maxLength: value.maxLength,
2460
+ fallbackField: value.fallbackField
2350
2461
  };
2351
2462
  }
2352
2463
  function getFilterComponent(value) {
@@ -2720,8 +2831,8 @@ function getLeafColumns(columns) {
2720
2831
  return cl;
2721
2832
  }
2722
2833
 
2723
- function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2724
- function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2834
+ function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2835
+ function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2725
2836
  var LOG = getLogger('Framework', 'Grid');
2726
2837
  function useApiInterface(_ref) {
2727
2838
  var apiInterface = _ref.apiInterface,
@@ -2731,6 +2842,7 @@ function useApiInterface(_ref) {
2731
2842
  onEdit = _ref.onEdit,
2732
2843
  onDelete = _ref.onDelete,
2733
2844
  onUpdate = _ref.onUpdate,
2845
+ onLoaded = _ref.onLoaded,
2734
2846
  forceNewData = _ref.forceNewData;
2735
2847
  var _useReducer = useReducer(reducer, {
2736
2848
  data: [],
@@ -2767,7 +2879,7 @@ function useApiInterface(_ref) {
2767
2879
  }
2768
2880
  return _context.abrupt("return");
2769
2881
  case 2:
2770
- newServerSideFilterState = _objectSpread$2({}, filter);
2882
+ newServerSideFilterState = _objectSpread$4({}, filter);
2771
2883
  if (filter.globalFilter != ((_state$serverSideFilt = state.serverSideFilterState) === null || _state$serverSideFilt === void 0 ? void 0 : _state$serverSideFilt.globalFilter) || !deepEqual(filter.filters, (_state$serverSideFilt2 = state.serverSideFilterState) === null || _state$serverSideFilt2 === void 0 ? void 0 : _state$serverSideFilt2.filters)) {
2772
2884
  //if filters are updated, reset to page 0
2773
2885
  newServerSideFilterState.skip = 0;
@@ -2793,7 +2905,7 @@ function useApiInterface(_ref) {
2793
2905
  type: 'finishedLoading',
2794
2906
  data: result
2795
2907
  });
2796
-
2908
+ onLoaded === null || onLoaded === void 0 || onLoaded(result.data, result.total);
2797
2909
  //if there is already data, then a new data record should not be created automatically if the result is empty (e.g. when filtering)
2798
2910
  if (result.data.length > 0 || state.data.length > 0) {
2799
2911
  setDataExists(true);
@@ -2809,10 +2921,10 @@ function useApiInterface(_ref) {
2809
2921
  setDataExists(false);
2810
2922
  }
2811
2923
  onUpdate === null || onUpdate === void 0 || onUpdate(result.data, getUrlParams(apiInterface, columns, newServerSideFilterState.skip, newServerSideFilterState.limit, newServerSideFilterState.sortBy, newServerSideFilterState.filters, newServerSideFilterState.globalFilter, apiInterface.customSettings));
2812
- _context.next = 19;
2924
+ _context.next = 20;
2813
2925
  break;
2814
- case 16:
2815
- _context.prev = 16;
2926
+ case 17:
2927
+ _context.prev = 17;
2816
2928
  _context.t0 = _context["catch"](5);
2817
2929
  if (_context.t0 !== 'Request cancelled') {
2818
2930
  LOG.error(new DivaError(_context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.message, {
@@ -2824,11 +2936,11 @@ function useApiInterface(_ref) {
2824
2936
  data: _context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.message
2825
2937
  });
2826
2938
  }
2827
- case 19:
2939
+ case 20:
2828
2940
  case "end":
2829
2941
  return _context.stop();
2830
2942
  }
2831
- }, _callee, null, [[5, 16]]);
2943
+ }, _callee, null, [[5, 17]]);
2832
2944
  }));
2833
2945
  return function (_x, _x2) {
2834
2946
  return _ref2.apply(this, arguments);
@@ -2875,7 +2987,7 @@ function useApiInterface(_ref) {
2875
2987
  }
2876
2988
  if (addValueToQuery) url.searchParams.append(column.id, item[column.id]);
2877
2989
  _context2.next = 17;
2878
- return fetch(url.toString(), _objectSpread$2(_objectSpread$2({
2990
+ return fetch(url.toString(), _objectSpread$4(_objectSpread$4({
2879
2991
  method: endPointMethod ? endPointMethod : doPatch ? 'PATCH' : doDelete ? 'DELETE' : 'POST',
2880
2992
  headers: {
2881
2993
  Authorization: 'Bearer ' + jwt,
@@ -3049,38 +3161,38 @@ function reducer(state, action) {
3049
3161
  var newState = state;
3050
3162
  switch (action.type) {
3051
3163
  case 'startLoading':
3052
- newState = _objectSpread$2({}, state);
3164
+ newState = _objectSpread$4({}, state);
3053
3165
  newState.loading = true;
3054
3166
  newState.error = undefined;
3055
3167
  newState.serverSideFilterState = (_action$data = action.data) !== null && _action$data !== void 0 ? _action$data : newState.serverSideFilterState;
3056
3168
  break;
3057
3169
  case 'loadingFailed':
3058
- newState = _objectSpread$2({}, state);
3170
+ newState = _objectSpread$4({}, state);
3059
3171
  newState.loading = false;
3060
3172
  newState.error = action.data;
3061
3173
  break;
3062
3174
  case 'finishedLoading':
3063
- newState = _objectSpread$2({}, state);
3175
+ newState = _objectSpread$4({}, state);
3064
3176
  newState.loading = false;
3065
3177
  newState.data = action.data.data;
3066
3178
  newState.custom = action.data.custom;
3067
3179
  newState.total = action.data.total;
3068
3180
  break;
3069
3181
  case 'updateData':
3070
- newState = _objectSpread$2(_objectSpread$2({}, state), {}, {
3182
+ newState = _objectSpread$4(_objectSpread$4({}, state), {}, {
3071
3183
  data: _toConsumableArray(state.data)
3072
3184
  });
3073
3185
  newState.data[action.data.index] = action.data.item;
3074
3186
  break;
3075
3187
  case 'addData':
3076
- newState = _objectSpread$2(_objectSpread$2({}, state), {}, {
3188
+ newState = _objectSpread$4(_objectSpread$4({}, state), {}, {
3077
3189
  data: _toConsumableArray(state.data)
3078
3190
  });
3079
3191
  newState.data.unshift(action.data);
3080
3192
  newState.total = state.total + 1;
3081
3193
  break;
3082
3194
  case 'removeData':
3083
- newState = _objectSpread$2(_objectSpread$2({}, state), {}, {
3195
+ newState = _objectSpread$4(_objectSpread$4({}, state), {}, {
3084
3196
  data: _toConsumableArray(state.data)
3085
3197
  });
3086
3198
  newState.data.splice(action.data, 1);
@@ -3186,8 +3298,8 @@ function addColumns(allColumns, _ref) {
3186
3298
  return [editColumn].concat(_toConsumableArray(allColumns));
3187
3299
  }
3188
3300
 
3189
- function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3190
- function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
3301
+ function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3302
+ function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
3191
3303
  function useHightlight (hooks) {
3192
3304
  hooks.getCellProps.push(getCellProps);
3193
3305
  }
@@ -3195,13 +3307,76 @@ function getCellProps(props, meta) {
3195
3307
  var _hightlight$match, _hightlight$match2, _hightlight$match3;
3196
3308
  var hightlight = meta.instance.hightlight;
3197
3309
  if (_typeof(hightlight) == 'object' && hightlight !== null && hightlight !== void 0 && (_hightlight$match = hightlight.match) !== null && _hightlight$match !== void 0 && _hightlight$match.accessor && (hightlight !== null && hightlight !== void 0 && (_hightlight$match2 = hightlight.match) !== null && _hightlight$match2 !== void 0 && _hightlight$match2.value && meta.cell.row.original[hightlight.match.accessor] == hightlight.match.value || hightlight !== null && hightlight !== void 0 && (_hightlight$match3 = hightlight.match) !== null && _hightlight$match3 !== void 0 && _hightlight$match3.values && hightlight.match.values.includes(meta.cell.row.original[hightlight.match.accessor]))) {
3198
- props.style = _objectSpread$1(_objectSpread$1({}, props.style), hightlight.style);
3310
+ props.style = _objectSpread$3(_objectSpread$3({}, props.style), hightlight.style);
3199
3311
  } else if (typeof hightlight == 'function') {
3200
- props.style = _objectSpread$1(_objectSpread$1({}, props.style), hightlight(meta.cell));
3312
+ props.style = _objectSpread$3(_objectSpread$3({}, props.style), hightlight(meta.cell));
3201
3313
  }
3202
3314
  return props;
3203
3315
  }
3204
3316
 
3317
+ var beginActionsCell = "begin-actions-cell-27DB3";
3318
+ var beginActionsHeader = "begin-actions-header-bDKrO";
3319
+ var amountSpace = "amount-space-3FwU9";
3320
+ var css_248z = ".begin-actions-cell-27DB3 {\n display: flex;\n gap: 10px;\n}\n\n.begin-actions-header-bDKrO {\n width: 70px;\n}\n\n.amount-space-3FwU9 {\n padding: 0px 9px;\n}\n";
3321
+ styleInject(css_248z);
3322
+
3323
+ function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3324
+ function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
3325
+ function BeginActionsHeader(_ref) {
3326
+ var getToggleAllPageRowsSelectedProps = _ref.getToggleAllPageRowsSelectedProps,
3327
+ selectedRootRows = _ref.selectedRootRows,
3328
+ selection = _ref.selection,
3329
+ expander = _ref.expander;
3330
+ if (!selection && !expander) {
3331
+ return /*#__PURE__*/jsx(Fragment, {});
3332
+ }
3333
+ return /*#__PURE__*/jsx("div", {
3334
+ className: beginActionsHeader,
3335
+ children: selection && /*#__PURE__*/jsxs(Fragment, {
3336
+ children: [/*#__PURE__*/jsx(Checkbox, _objectSpread$2(_objectSpread$2({}, getToggleAllPageRowsSelectedProps()), {}, {
3337
+ className: amountSpace
3338
+ })), selectedRootRows.length > 0 ? "(".concat(selectedRootRows.length, ")") : ' ']
3339
+ })
3340
+ });
3341
+ }
3342
+
3343
+ function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3344
+ function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
3345
+ function BeginActionsCell(_ref) {
3346
+ var row = _ref.row,
3347
+ selection = _ref.selection,
3348
+ expander = _ref.expander;
3349
+ return /*#__PURE__*/jsxs("div", {
3350
+ className: beginActionsCell,
3351
+ onClick: function onClick(e) {
3352
+ return e.stopPropagation();
3353
+ },
3354
+ children: [selection && row.depth == 0 && /*#__PURE__*/jsx(Checkbox, _objectSpread$1({}, row.getToggleRowSelectedProps())), expander && row.canExpand && /*#__PURE__*/jsx(IconButton, _objectSpread$1(_objectSpread$1({
3355
+ "aria-label": "expand row",
3356
+ size: "small"
3357
+ }, row.getToggleRowExpandedProps()), {}, {
3358
+ children: row.isExpanded ? /*#__PURE__*/jsx(KeyboardArrowUpIcon, {}) : /*#__PURE__*/jsx(KeyboardArrowDownIcon, {})
3359
+ }))]
3360
+ });
3361
+ }
3362
+
3363
+ var useSelection = function useSelection(hooks) {
3364
+ useRowSelect(hooks);
3365
+ //extend the default rowSelect plugin
3366
+
3367
+ hooks.useInstance.push(function (instance) {
3368
+ var selectedRootRows = useMemo(function () {
3369
+ return instance.selectedFlatRows.filter(function (row) {
3370
+ return row.depth == 0;
3371
+ });
3372
+ }, [instance.selectedFlatRows]);
3373
+ Object.assign(instance, {
3374
+ selectedRootRows: selectedRootRows
3375
+ });
3376
+ });
3377
+ };
3378
+ useSelection.pluginName = useRowSelect.pluginName;
3379
+
3205
3380
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3206
3381
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
3207
3382
  function Grid(_ref) {
@@ -3219,6 +3394,7 @@ function Grid(_ref) {
3219
3394
  onDelete = _ref.onDelete,
3220
3395
  onUpdate = _ref.onUpdate,
3221
3396
  onNew = _ref.onNew,
3397
+ onLoaded = _ref.onLoaded,
3222
3398
  prepareRowHook = _ref.prepareRow,
3223
3399
  customElement = _ref.customElement,
3224
3400
  noData = _ref.noData,
@@ -3255,6 +3431,7 @@ function Grid(_ref) {
3255
3431
  onEdit: onEdit,
3256
3432
  onNew: onNew,
3257
3433
  onUpdate: onUpdate,
3434
+ onLoaded: onLoaded,
3258
3435
  forceNewData: forceNewData
3259
3436
  }),
3260
3437
  data = _useApiInterface.data,
@@ -3314,12 +3491,24 @@ function Grid(_ref) {
3314
3491
  editingActions: parsedOptions.editable == 'inline' ? false : parsedOptions.editable,
3315
3492
  inlineEditing: parsedOptions.editable == 'inline',
3316
3493
  hightlight: parsedOptions.hightlight,
3494
+ getSubRows: useCallback(function (row) {
3495
+ var _row$subRows;
3496
+ //row should be of type D but the useRowSelect plugin has a bug and calls it with Row<D>
3497
+ if (((_row$subRows = row.subRows) === null || _row$subRows === void 0 ? void 0 : _row$subRows.length) > 0) {
3498
+ return row.subRows;
3499
+ }
3500
+ if (table !== null && table !== void 0 && table.nestedRows) {
3501
+ var _table$nestedRows;
3502
+ return (_table$nestedRows = row[table.nestedRows]) !== null && _table$nestedRows !== void 0 ? _table$nestedRows : [];
3503
+ }
3504
+ return [];
3505
+ }, [table === null || table === void 0 ? void 0 : table.nestedRows]),
3317
3506
  updateData: updateData,
3318
3507
  onNew: onInternalNew,
3319
3508
  onEdit: onInternalEdit,
3320
3509
  onDelete: onInternalDelete,
3321
3510
  custom: custom
3322
- }, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useEditActions, useHightlight, function (hooks) {
3511
+ }, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useSelection, useEditActions, useHightlight, function (hooks) {
3323
3512
  hooks.getCellProps.push(function (props, meta) {
3324
3513
  if ((table === null || table === void 0 ? void 0 : table.rowHight) != undefined) {
3325
3514
  props.style = _objectSpread(_objectSpread({}, props.style), {}, {
@@ -3348,67 +3537,25 @@ function Grid(_ref) {
3348
3537
  }
3349
3538
  });
3350
3539
  }
3351
- if (parsedOptions.selectable == true || parsedOptions.selectable == 'multi') {
3540
+ var showSelection = parsedOptions.selectable == true || parsedOptions.selectable == 'multi';
3541
+ var showExpander = !!parsedOptions.subcomponent || !!(table !== null && table !== void 0 && table.nestedRows);
3542
+ var beginActions = showSelection || showExpander;
3543
+ if (beginActions) {
3352
3544
  customColumnsBeginning.push({
3353
- id: 'selection',
3354
- // The header can use the table's getToggleAllRowsSelectedProps method
3355
- // to render a checkbox
3356
- Header: function Header(_ref2) {
3357
- var getToggleAllPageRowsSelectedProps = _ref2.getToggleAllPageRowsSelectedProps,
3358
- selectedFlatRows = _ref2.selectedFlatRows;
3359
- return /*#__PURE__*/jsxs("div", {
3360
- style: {
3361
- width: '70px'
3362
- },
3363
- children: [/*#__PURE__*/jsx(Checkbox, _objectSpread(_objectSpread({}, getToggleAllPageRowsSelectedProps()), {}, {
3364
- style: {
3365
- padding: '0px 9px'
3366
- }
3367
- })), selectedFlatRows.length > 0 ? "(".concat(selectedFlatRows.length, ")") : ' ']
3368
- });
3369
- },
3370
- // The cell can use the individual row's getToggleRowSelectedProps method
3371
- // to the render a checkbox
3372
- Cell: function Cell(_ref3) {
3373
- var row = _ref3.row;
3374
- return /*#__PURE__*/jsx("div", {
3375
- style: {
3376
- display: 'inline-block'
3377
- },
3378
- onClick: function onClick(e) {
3379
- return e.stopPropagation();
3380
- },
3381
- children: /*#__PURE__*/jsx(Checkbox, _objectSpread({}, row.getToggleRowSelectedProps()))
3382
- });
3383
- },
3384
- width: 50
3385
- });
3386
- }
3387
- if (parsedOptions.subcomponent) {
3388
- customColumnsBeginning.push({
3389
- id: 'expander',
3390
- Cell: function Cell(_ref4) {
3391
- var row = _ref4.row;
3392
- if (!row.canExpand) {
3393
- return /*#__PURE__*/jsx(Fragment, {});
3394
- }
3395
- return /*#__PURE__*/jsx("div", {
3396
- style: {
3397
- display: 'inline-block'
3398
- },
3399
- onClick: function onClick(e) {
3400
- return e.stopPropagation();
3401
- },
3402
- children: /*#__PURE__*/jsx(IconButton, _objectSpread(_objectSpread({
3403
- "aria-label": "expand row",
3404
- size: "small"
3405
- }, row.getToggleRowExpandedProps()), {}, {
3406
- children: row.isExpanded ? /*#__PURE__*/jsx(KeyboardArrowUpIcon, {}) : /*#__PURE__*/jsx(KeyboardArrowDownIcon, {})
3407
- }))
3408
- });
3545
+ id: 'beginActions',
3546
+ width: 100,
3547
+ Header: function Header(props) {
3548
+ return /*#__PURE__*/jsx(BeginActionsHeader, _objectSpread(_objectSpread({}, props), {}, {
3549
+ selection: showSelection,
3550
+ expander: showExpander
3551
+ }));
3409
3552
  },
3410
- width: 30,
3411
- padding: '0 0 0 16px'
3553
+ Cell: function Cell(props) {
3554
+ return /*#__PURE__*/jsx(BeginActionsCell, _objectSpread(_objectSpread({}, props), {}, {
3555
+ selection: showSelection,
3556
+ expander: showExpander
3557
+ }));
3558
+ }
3412
3559
  });
3413
3560
  }
3414
3561
  return [].concat(customColumnsBeginning, _toConsumableArray(columns), customColumnsEnd);
@@ -3431,6 +3578,7 @@ function Grid(_ref) {
3431
3578
  toggleRowSelected = _useTable.toggleRowSelected,
3432
3579
  toggleAllRowsSelected = _useTable.toggleAllRowsSelected,
3433
3580
  selectedFlatRows = _useTable.selectedFlatRows,
3581
+ selectedRootRows = _useTable.selectedRootRows,
3434
3582
  flatRows = _useTable.flatRows,
3435
3583
  _useTable$state = _useTable.state,
3436
3584
  pageIndex = _useTable$state.pageIndex,
@@ -3462,13 +3610,13 @@ function Grid(_ref) {
3462
3610
  }, [selected, options.selectable]);
3463
3611
  useEffect(function () {
3464
3612
  if (options.selectable) {
3465
- onSelect(selectedFlatRows.filter(function (r) {
3613
+ onSelect(selectedRootRows.filter(function (r) {
3466
3614
  return !r.isGrouped;
3467
3615
  }).map(function (r) {
3468
3616
  return r.original;
3469
3617
  }));
3470
3618
  }
3471
- }, [selectedFlatRows, options.selectable]);
3619
+ }, [selectedRootRows, options.selectable]);
3472
3620
  useEffect(function () {
3473
3621
  if (options.apiInterface.filterServerSide && pageIndex > total / pageSize) {
3474
3622
  gotoPage(0);
@@ -3477,22 +3625,26 @@ function Grid(_ref) {
3477
3625
 
3478
3626
  /**
3479
3627
  * On selection of a row select/unselect rows according to the configuration
3480
- * and fire the onSelect event, containing all currently selected rows
3481
3628
  */
3482
3629
  var selectRow = useCallback(function (rowPath) {
3483
3630
  var row = flatRows.find(function (r) {
3484
3631
  return r.id == rowPath;
3485
3632
  });
3486
- if (row !== null && row !== void 0 && row.isGrouped) {
3633
+
3634
+ //if the row is grouped or can be expanded, toggle the expansion instead of selection
3635
+ if (row !== null && row !== void 0 && row.isGrouped || row !== null && row !== void 0 && row.canExpand) {
3487
3636
  row.toggleRowExpanded();
3637
+ return;
3488
3638
  }
3639
+
3640
+ //if the row is not a root row, do nothing
3641
+ if (row !== null && row !== void 0 && row.depth && row.depth > 0) return;
3489
3642
  if (options.selectable == 'single') {
3490
3643
  //if selectable is single, unselect all currently selected rows
3491
3644
  //and also remove them from the selected list, since the state is not yet up to date
3492
3645
  toggleAllRowsSelected(false);
3493
3646
  }
3494
3647
  if (options.selectable && !(row !== null && row !== void 0 && row.isGrouped)) {
3495
- //onSelect(selected.filter((s) => !s.isGrouped).map((s) => s.original));
3496
3648
  toggleRowSelected(rowPath);
3497
3649
  }
3498
3650
  }, [toggleAllRowsSelected, toggleRowSelected, options.selectable, flatRows]);
@@ -3615,4 +3767,4 @@ var useStyles = makeStyles(function () {
3615
3767
  });
3616
3768
  });
3617
3769
 
3618
- export { Grid as default };
3770
+ export { Loading, cellStyleHelper, Grid as default };