@semcore/data-table 4.51.0-prerelease.5 → 4.51.0-prerelease.7

package/lib/esm/components/DataTable/DataTable.mjs

@@ -1,1216 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled, lastInteraction, assignProps, Component, createComponent } from "@semcore/core";
-import { Box, ScrollArea } from "@semcore/base-components";
-import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
-import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { hasParent } from "@semcore/core/lib/utils/hasParent";
-import trottle from "@semcore/core/lib/utils/rafTrottle";
-import { forkRef } from "@semcore/core/lib/utils/ref";
-import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
-import { hasFocusableIn, isFocusInside } from "@semcore/core/lib/utils/use/useFocusLock";
-import { NoData } from "@semcore/widget-empty";
-import * as React from "react";
-import { ScrollBars } from "./ScrollBars.mjs";
-import { SelectableRows } from "../../store/SelectableRows.mjs";
-import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
-import { Body } from "../Body/Body.mjs";
-import { MergedRowsCell, MergedColumnsCell } from "../Body/MergedCells.mjs";
-import { Head } from "../Head/Head.mjs";
-import { SRAnnouncer } from "../RowSelector/SRAnnouncer.mjs";
-import { SRReactiveAnnouncer } from "../RowSelector/SRReactiveAnnouncer.mjs";
-/*!__reshadow-styles__:"./dataTable.shadow.css"*/
-var style = (
-  /*__reshadow_css_start__*/
-  (sstyled.insert(
-    /*__inner_css_start__*/
-    "@keyframes moveBarWithScroll_pypp4{0%{transform:translateY(0)}to{transform:translateY(calc(var(--global-scroll-to) - var(--global-header-height)))}}.___SDataTable_pypp4_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content;grid-auto-rows:min-content;scroll-behavior:smooth}.___SDataTable_pypp4_gg_.__isDataEmpty_pypp4_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_pypp4_gg_.__gridTemplateColumns_pypp4_gg_{grid-template-columns:var(--gridTemplateColumns_pypp4)}.___SDataTable_pypp4_gg_.__gridTemplateAreas_pypp4_gg_{grid-template-areas:var(--gridTemplateAreas_pypp4)}.___SDataTable_pypp4_gg_.__gridTemplateRows_pypp4_gg_{grid-template-rows:var(--gridTemplateRows_pypp4)}.___SScrollAreaBarInHeader_pypp4_gg_.__withAnimation_pypp4_gg_{animation-name:moveBarWithScroll_pypp4;animation-timeline:--table-sticky-timeline;animation-range-start:exit-crossing calc(-1*var(--global-header-top));animation-range-end:exit-crossing calc(100% - var(--global-header-top) - var(--global-header-height));animation-timing-function:linear;animation-fill-mode:both}",
-    /*__inner_css_end__*/
-    "pypp4_gg_"
-  ), /*__reshadow_css_end__*/
-  {
-    "__SDataTable": "___SDataTable_pypp4_gg_",
-    "_isDataEmpty": "__isDataEmpty_pypp4_gg_",
-    "_gridTemplateColumns": "__gridTemplateColumns_pypp4_gg_",
-    "--gridTemplateColumns": "--gridTemplateColumns_pypp4",
-    "_gridTemplateAreas": "__gridTemplateAreas_pypp4_gg_",
-    "--gridTemplateAreas": "--gridTemplateAreas_pypp4",
-    "_gridTemplateRows": "__gridTemplateRows_pypp4_gg_",
-    "--gridTemplateRows": "--gridTemplateRows_pypp4",
-    "__SScrollAreaBarInHeader": "___SScrollAreaBarInHeader_pypp4_gg_",
-    "_withAnimation": "__withAnimation_pypp4_gg_",
-    "@moveBarWithScroll": "moveBarWithScroll_pypp4"
-  })
-);
-/*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
-var scrollStyles = (
-  /*__reshadow_css_start__*/
-  (sstyled.insert(
-    /*__inner_css_start__*/
-    ".___SScrollArea_1aftg_gg_{width:-moz-fit-content;width:fit-content;view-timeline:--table-sticky-timeline block}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_{overflow:visible;overflow:initial}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_._scrollDirection_both_1aftg_gg_{overflow:auto}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_._scrollDirection_both_1aftg_gg_.__loading_1aftg_gg_,.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_._scrollDirection_horizontal_1aftg_gg_.__loading_1aftg_gg_,.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_._scrollDirection_vertical_1aftg_gg_.__loading_1aftg_gg_{overflow:hidden}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_._scrollDirection_horizontal_1aftg_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_._scrollDirection_vertical_1aftg_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_.__headerHeight_1aftg_gg_{scroll-padding-top:var(--headerHeight_1aftg)}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_.__leftScrollPadding_1aftg_gg_{scroll-padding-left:var(--leftScrollPadding_1aftg)}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_.__rightScrollPadding_1aftg_gg_{scroll-padding-right:var(--rightScrollPadding_1aftg)}.___SScrollArea_1aftg_gg_ .___SShadowHorizontal_1aftg_gg_::before,.___SScrollArea_1aftg_gg_ .___SShadowHorizontal_1aftg_gg_:after,.___SScrollArea_1aftg_gg_ .___SShadowVertical_1aftg_gg_::after{z-index:20}.___SScrollArea_1aftg_gg_ .___SShadowHorizontal_1aftg_gg_.__leftOffset_1aftg_gg_::before,.___SScrollArea_1aftg_gg_ .___SShadowHorizontal_1aftg_gg_.__rightOffset_1aftg_gg_::after,.___SScrollArea_1aftg_gg_ .___SShadowVertical_1aftg_gg_::before{display:none}",
-    /*__inner_css_end__*/
-    "1aftg_gg_"
-  ), /*__reshadow_css_end__*/
-  {
-    "__SScrollArea": "___SScrollArea_1aftg_gg_",
-    "__SContainer": "___SContainer_1aftg_gg_",
-    "_scrollDirection_both": "_scrollDirection_both_1aftg_gg_",
-    "_loading": "__loading_1aftg_gg_",
-    "_scrollDirection_horizontal": "_scrollDirection_horizontal_1aftg_gg_",
-    "_scrollDirection_vertical": "_scrollDirection_vertical_1aftg_gg_",
-    "_headerHeight": "__headerHeight_1aftg_gg_",
-    "--headerHeight": "--headerHeight_1aftg",
-    "_leftScrollPadding": "__leftScrollPadding_1aftg_gg_",
-    "--leftScrollPadding": "--leftScrollPadding_1aftg",
-    "_rightScrollPadding": "__rightScrollPadding_1aftg_gg_",
-    "--rightScrollPadding": "--rightScrollPadding_1aftg",
-    "__SShadowVertical": "___SShadowVertical_1aftg_gg_",
-    "__SShadowHorizontal": "___SShadowHorizontal_1aftg_gg_",
-    "_leftOffset": "__leftOffset_1aftg_gg_",
-    "_rightOffset": "__rightOffset_1aftg_gg_"
-  })
-);
-var ACCORDION = /* @__PURE__ */ Symbol("accordion");
-var ROW_GROUP = /* @__PURE__ */ Symbol("ROW_GROUP");
-var UNIQ_ROW_KEY = /* @__PURE__ */ Symbol("UNIQ_ROW_KEY");
-var IS_EMPTY_DATA_ROW = /* @__PURE__ */ Symbol("IS_EMPTY_DATA_ROW");
-var SELECT_ALL = "SELECT_ALL_ROWS";
-var ROW_INDEX = /* @__PURE__ */ Symbol("ROW_INDEX");
-var GRID_ROW_INDEX = /* @__PURE__ */ Symbol("GRID_ROW_INDEX");
-var DataTableRoot = /* @__PURE__ */ (function(_Component) {
-  function DataTableRoot2(props) {
-    var _this;
-    _classCallCheck(this, DataTableRoot2);
-    _this = _callSuper(this, DataTableRoot2, [props]);
-    _defineProperty(_this, "columns", []);
-    _defineProperty(_this, "treeColumns", []);
-    _defineProperty(_this, "hasGroups", false);
-    _defineProperty(_this, "hasFixedColumn", false);
-    _defineProperty(_this, "focusedCell", [-1, -1]);
-    _defineProperty(_this, "scrollAreaRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "tableContainerRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "tableRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "headerRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "spinnerRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "containerResizeEndTimeoutId", null);
-    _defineProperty(_this, "gridAreaGroupMap", /* @__PURE__ */ new Map());
-    _defineProperty(_this, "columnsSplitter", "/");
-    _defineProperty(_this, "tmpData", void 0);
-    _defineProperty(_this, "calculatedRows", void 0);
-    _defineProperty(_this, "flatRows", void 0);
-    _defineProperty(_this, "gridSettings", {
-      gridTemplateColumns: [],
-      gridTemplateAreas: []
-    });
-    _defineProperty(_this, "headerNodesMap", /* @__PURE__ */ new Map());
-    _defineProperty(_this, "selectedRowsContainer", void 0);
-    _defineProperty(_this, "lastSelectedRowKey", void 0);
-    _defineProperty(_this, "state", {
-      scrollTop: 0,
-      scrollDirection: "down",
-      selectAllMessage: "",
-      shadowVertical: "",
-      expandedRows: /* @__PURE__ */ new Set()
-    });
-    _defineProperty(_this, "handleDocumentScroll", trottle(function() {
-      var _headerProps$top, _this$scrollAreaRef$c;
-      var tableContainer = _this.tableContainerRef.current;
-      if (!tableContainer) return;
-      var tableRect = tableContainer.getBoundingClientRect();
-      var tableContainerTop = tableRect.top;
-      var headerProps = _this.asProps.headerProps;
-      var headerContainer = _this.headerRef.current;
-      var top = tableContainerTop - ((_headerProps$top = headerProps === null || headerProps === void 0 ? void 0 : headerProps.top) !== null && _headerProps$top !== void 0 ? _headerProps$top : 0);
-      var headerScrollBar = headerProps !== null && headerProps !== void 0 && headerProps.withScrollBar ? (_this$scrollAreaRef$c = _this.scrollAreaRef.current) === null || _this$scrollAreaRef$c === void 0 ? void 0 : _this$scrollAreaRef$c.querySelector("[role=scrollbar][aria-orientation=horizontal]") : void 0;
-      if (top && top < 0 && Math.abs(top) <= tableContainer.clientHeight) {
-        var translate = "translateY(".concat(Math.abs(top), "px)");
-        if (tableRect.bottom <= _this.getHeaderHeight()) {
-          translate = "translateY(".concat(Math.abs(top) - _this.getHeaderHeight() - tableRect.bottom, "px)");
-        }
-        if (headerContainer instanceof HTMLElement) {
-          headerContainer.style.setProperty("--global-scroll-translate", "".concat(Math.abs(top), "px"));
-        }
-        if (headerScrollBar instanceof HTMLElement) {
-          headerScrollBar.style.setProperty("transform", translate);
-        }
-      } else {
-        if (headerContainer instanceof HTMLElement) {
-          headerContainer.style.removeProperty("--global-scroll-translate");
-        }
-        if (headerScrollBar instanceof HTMLElement) {
-          headerScrollBar.style.removeProperty("transform");
-        }
-      }
-    }));
-    _defineProperty(_this, "handleCellClick", function(e, opt) {
-      if (lastInteraction.isMouse()) {
-        _this.initFocusableCell([_this.hasFocusableInHeader() ? opt.rowIndex + 1 : opt.rowIndex, opt.colIndex]);
-      }
-    });
-    _defineProperty(_this, "handleSelectAllRows", function(selectedRows, event) {
-      if (!("onSelectedRowsChange" in _this.asProps) || !_this.asProps.onSelectedRowsChange || !Array.isArray(selectedRows)) return;
-      _this.asProps.onSelectedRowsChange(selectedRows, event);
-    });
-    _defineProperty(_this, "handleSelectRow", function(isSelected, selectedRowIndex, row, event) {
-      var selectedRows = _this.asProps.selectedRows;
-      if (!selectedRows || !("onSelectedRowsChange" in _this.asProps) || !_this.asProps.onSelectedRowsChange || !Array.isArray(selectedRows)) return;
-      var onSelectedRowsChange = _this.asProps.onSelectedRowsChange;
-      var selectedRowsSet = new Set(selectedRows);
-      if (_this.selectedRowsContainer.isPressedShift && selectedRowsSet.size > 0 && _this.lastSelectedRowKey && (isSelected ? selectedRowsSet.has(_this.lastSelectedRowKey) : true)) {
-        var select = false;
-        var firstColumnKey = _this.columns[0].name;
-        var isMerged = _this.flatRows.some(function(item2) {
-          return item2[firstColumnKey] instanceof MergedRowsCell;
-        });
-        var _iterator = _createForOfIteratorHelper(_this.flatRows), _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done; ) {
-            var item = _step.value;
-            if (isMerged && !item[firstColumnKey]) continue;
-            if (!select && (item[UNIQ_ROW_KEY] === row[UNIQ_ROW_KEY] || item[UNIQ_ROW_KEY] === _this.lastSelectedRowKey)) {
-              select = true;
-              if (isSelected) {
-                selectedRowsSet.add(item[UNIQ_ROW_KEY]);
-              } else {
-                selectedRowsSet["delete"](item[UNIQ_ROW_KEY]);
-              }
-              continue;
-            }
-            if (select) {
-              if (isSelected) {
-                selectedRowsSet.add(item[UNIQ_ROW_KEY]);
-              } else {
-                selectedRowsSet["delete"](item[UNIQ_ROW_KEY]);
-              }
-            }
-            if (select && (item[UNIQ_ROW_KEY] === row[UNIQ_ROW_KEY] || item[UNIQ_ROW_KEY] === _this.lastSelectedRowKey)) {
-              break;
-            }
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
-      } else {
-        if (selectedRowsSet.has(row[UNIQ_ROW_KEY])) {
-          selectedRowsSet["delete"](row[UNIQ_ROW_KEY]);
-        } else {
-          selectedRowsSet.add(row[UNIQ_ROW_KEY]);
-        }
-      }
-      _this.lastSelectedRowKey = row[UNIQ_ROW_KEY];
-      onSelectedRowsChange(Array.from(selectedRowsSet), event, {
-        selectedRowIndex,
-        isSelected,
-        row
-      });
-    });
-    _defineProperty(_this, "getRow", function(index) {
-      var _this$tableRef$curren;
-      return (_this$tableRef$curren = _this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.querySelector(':scope [aria-rowindex="'.concat(index + 1, '"]:not([aria-hidden="true"]):not(:scope [data-ui-name="DataTable"] [aria-rowindex="').concat(index + 1, '"]:not([aria-hidden="true"])'));
-    });
-    _defineProperty(_this, "hasFocusableInHeader", function() {
-      return _this.headerRef.current && hasFocusableIn(_this.headerRef.current) || _this.columns.some(function(column) {
-        return column.sortable;
-      });
-    });
-    _defineProperty(_this, "onExpandRow", function(expandedRow) {
-      var _this$asProps = _this.asProps, onAccordionToggle = _this$asProps.onAccordionToggle, accordionMode = _this$asProps.accordionMode;
-      var expandedRows = _this.state.expandedRows;
-      if (expandedRows.has(expandedRow[UNIQ_ROW_KEY])) {
-        expandedRows["delete"](expandedRow[UNIQ_ROW_KEY]);
-        onAccordionToggle === null || onAccordionToggle === void 0 || onAccordionToggle("close", expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
-      } else {
-        expandedRows.add(expandedRow[UNIQ_ROW_KEY]);
-        onAccordionToggle === null || onAccordionToggle === void 0 || onAccordionToggle("open", expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
-        if (accordionMode === "toggle") {
-          var rowIndex = expandedRow[ROW_INDEX];
-          var colIndex = _this.focusedCell[1];
-          _this.initFocusableCell([_this.hasFocusableInHeader() ? rowIndex + 1 : rowIndex, colIndex]);
-        }
-      }
-    });
-    _defineProperty(_this, "changeFocusCell", function(rowIndex, colIndex, direction) {
-      var _this$tableRef$curren2, _this$tableRef$curren3;
-      var limit = _this.asProps.limit;
-      var hasFocusable = _this.hasFocusableInHeader();
-      var maxCol = _this.columns.length - 1;
-      var maxRow = _this.totalRows || 1;
-      var currentRow = (_this$tableRef$curren2 = _this.tableRef.current) === null || _this$tableRef$curren2 === void 0 ? void 0 : _this$tableRef$curren2.querySelector('[aria-rowindex="'.concat(_this.focusedCell[0] + 1, '"]'));
-      var headerCells = (_this$tableRef$curren3 = _this.tableRef.current) === null || _this$tableRef$curren3 === void 0 ? void 0 : _this$tableRef$curren3.querySelectorAll("[role=columnheader]");
-      var currentCell = currentRow === null || currentRow === void 0 ? void 0 : currentRow.querySelector("[role=gridcell][aria-colindex='".concat(_this.focusedCell[1] + 1, "']"));
-      var currentHeaderCell = headerCells === null || headerCells === void 0 ? void 0 : headerCells.item(_this.focusedCell[1]);
-      var changed = true;
-      var newRow = _this.focusedCell[0] + rowIndex;
-      var newCol = _this.focusedCell[1] + colIndex;
-      if ((hasFocusable && newRow < 0 || !hasFocusable && newRow < 1 || newRow > maxRow) && newRow !== _this.focusedCell[0]) {
-        changed = false;
-      }
-      if ((newCol < 0 || newCol > maxCol) && newCol !== _this.focusedCell[1]) {
-        changed = false;
-      }
-      if (!changed) return;
-      var row = _this.getRow(newRow);
-      var cell = row === null || row === void 0 ? void 0 : row.querySelector(':scope > div > [role=gridcell][aria-colindex="'.concat(newCol + 1, '"]:not([aria-hidden="true"]), :scope > [role=columnheader][aria-colindex="').concat(newCol + 1, '"]:not([aria-hidden="true"]), :scope > div > [role=columnheader][aria-colindex="').concat(newCol + 1, '"]:not([aria-hidden="true"])'));
-      if (cell instanceof HTMLElement && currentCell !== cell) {
-        _this.focusedCell = [newRow, newCol];
-        currentCell === null || currentCell === void 0 || currentCell.setAttribute("inert", "");
-        if (currentCell !== currentHeaderCell) {
-          currentCell === null || currentCell === void 0 || currentCell.removeAttribute("aria-describedby");
-        }
-        var headerCell = headerCells === null || headerCells === void 0 ? void 0 : headerCells.item(newCol);
-        var describedBy = headerCell === null || headerCell === void 0 ? void 0 : headerCell.getAttribute("aria-describedby");
-        cell.removeAttribute("inert");
-        if (headerCell !== cell && describedBy) {
-          cell.setAttribute("aria-describedby", describedBy);
-        }
-        cell === null || cell === void 0 || cell.focus({
-          focusVisible: true
-        });
-        if (newRow !== 0) {
-          currentHeaderCell === null || currentHeaderCell === void 0 || currentHeaderCell.setAttribute("inert", "");
-          var _headerCell = headerCells === null || headerCells === void 0 ? void 0 : headerCells.item(newCol);
-          _headerCell === null || _headerCell === void 0 || _headerCell.removeAttribute("inert");
-        }
-      } else if (cell === null && currentCell instanceof HTMLElement) {
-        var rowI = rowIndex;
-        var colI = colIndex;
-        var colspan = Number(currentCell.getAttribute("aria-colspan"));
-        var rowspan = Number(currentCell.getAttribute("aria-rowspan"));
-        if (direction === "left" || direction === "right") {
-          var _currentCell$parentEl;
-          if (((_currentCell$parentEl = currentCell.parentElement) === null || _currentCell$parentEl === void 0 || (_currentCell$parentEl = _currentCell$parentEl.parentElement) === null || _currentCell$parentEl === void 0 ? void 0 : _currentCell$parentEl.dataset.uiName) === "Collapse") {
-            return;
-          }
-          if ((limit === null || limit === void 0 ? void 0 : limit.fromRow) !== void 0 && limit.fromColumn === void 0 && newCol === limit.fromRow) {
-            return;
-          }
-          var hasRowSpanUpper = row instanceof HTMLElement && Number(row.dataset.filledColumns) < _this.columns.length;
-          if (colspan > 0) {
-            if (direction === "right" && (limit === null || limit === void 0 ? void 0 : limit.fromColumn) !== void 0 && newCol === limit.fromColumn) {
-              rowI = rowI - 1;
-            } else {
-              colI = direction === "left" ? colI - colspan + 1 : colI + colspan - 1;
-            }
-          } else if (hasRowSpanUpper || direction === "right" && ((limit === null || limit === void 0 ? void 0 : limit.fromColumn) !== void 0 || (limit === null || limit === void 0 ? void 0 : limit.fromRow) !== void 0)) {
-            rowI = rowI - 1;
-          } else {
-            colI = direction === "left" ? colI - 1 : colI + 1;
-          }
-        } else if (direction === "up" || direction === "down") {
-          if (rowspan > 0) {
-            rowI = direction === "up" ? rowI - rowspan + 1 : rowI + rowspan - 1;
-          } else if (Number(currentCell.getAttribute("aria-colindex")) === 1) {
-            rowI = direction === "up" ? rowI - 1 : rowI + 1;
-          } else {
-            var _limit$fromRow;
-            var areLimitsDefined = (limit === null || limit === void 0 ? void 0 : limit.fromRow) !== void 0 || (limit === null || limit === void 0 ? void 0 : limit.fromColumn) !== void 0;
-            if (areLimitsDefined && newRow > ((_limit$fromRow = limit === null || limit === void 0 ? void 0 : limit.fromRow) !== null && _limit$fromRow !== void 0 ? _limit$fromRow : 0) + 1) {
-              return;
-            }
-            var _hasRowSpanUpper = row instanceof HTMLElement && currentRow instanceof HTMLElement && row.dataset.filledColumns !== currentRow.dataset.filledColumns;
-            if (direction === "up" && _hasRowSpanUpper) {
-              rowI = rowI - 1;
-            } else {
-              colI = colI - 1;
-            }
-          }
-        }
-        _this.changeFocusCell(rowI, colI, direction);
-      } else if (cell === null && currentHeaderCell instanceof HTMLElement && direction === "down") {
-        var _colI = colIndex - 1;
-        _this.changeFocusCell(rowIndex, _colI, direction);
-      } else if (row === null && _this.focusedCell[0] === 0 && direction === "down" && _this.asProps.virtualScroll) {
-        _this.changeFocusCell(rowIndex + 1, colIndex, direction);
-      }
-    });
-    _defineProperty(_this, "handleKeyDown", function(e) {
-      switch (e.key) {
-        case "Tab": {
-          _this.setInert(true);
-          break;
-        }
-        case "ArrowLeft": {
-          e.preventDefault();
-          _this.changeFocusCell(0, -1, "left");
-          break;
-        }
-        case "ArrowRight": {
-          e.preventDefault();
-          _this.changeFocusCell(0, 1, "right");
-          break;
-        }
-        case "ArrowUp": {
-          e.preventDefault();
-          _this.changeFocusCell(-1, 0, "up");
-          break;
-        }
-        case "ArrowDown": {
-          e.preventDefault();
-          _this.changeFocusCell(1, 0, "down");
-          break;
-        }
-        case "Shift": {
-          _this.selectedRowsContainer.isPressedShift = true;
-        }
-      }
-    });
-    _defineProperty(_this, "handleKeyUp", function(e) {
-      if (e.key === "Shift") {
-        _this.selectedRowsContainer.isPressedShift = false;
-      }
-    });
-    _defineProperty(_this, "handleScroll", trottle(function(e) {
-      if (_this.asProps.virtualScroll) {
-        var scrollTop = e.target.scrollTop;
-        var scrollDirection = scrollTop > _this.state.scrollTop ? "down" : "up";
-        _this.setState({
-          scrollTop,
-          scrollDirection
-        });
-      }
-      if (_this.hasFixedColumn) {
-        _this.calculateVerticalShadow();
-      }
-    }));
-    _defineProperty(_this, "calculateVerticalShadow", function() {
-      if (!_this.tableContainerRef.current) return;
-      var _this$tableContainerR = _this.tableContainerRef.current, scrollWidth = _this$tableContainerR.scrollWidth, clientWidth = _this$tableContainerR.clientWidth, scrollLeft = _this$tableContainerR.scrollLeft;
-      var maxScrollRight = scrollWidth - clientWidth;
-      var roundedScroll = Math.round(scrollLeft);
-      var roundedMaxScroll = Math.round(maxScrollRight);
-      var shadow = "";
-      if (roundedMaxScroll <= 0) {
-      } else if (roundedScroll <= 0) {
-        shadow = "end";
-      } else if (roundedScroll >= roundedMaxScroll) {
-        shadow = "start";
-      } else if (roundedScroll > 0) {
-        shadow = "median";
-      }
-      _this.setState({
-        shadowVertical: shadow
-      });
-    });
-    _defineProperty(_this, "handleFocus", function(e) {
-      if (_this.asProps.loading) {
-        var _this$spinnerRef$curr;
-        (_this$spinnerRef$curr = _this.spinnerRef.current) === null || _this$spinnerRef$curr === void 0 || _this$spinnerRef$curr.focus();
-        e.currentTarget.setAttribute("tabIndex", "-1");
-        if (_this.isDataEmpty) {
-          var _this$headerRef$curre;
-          (_this$headerRef$curre = _this.headerRef.current) === null || _this$headerRef$curre === void 0 || _this$headerRef$curre.setAttribute("tabIndex", "-1");
-        }
-      } else if ((!e.relatedTarget || !isFocusInside(e.currentTarget, e.relatedTarget)) && lastInteraction.isKeyboard()) {
-        var _row;
-        if (_this.focusedCell[0] === -1 && _this.focusedCell[1] === -1) {
-          _this.initFocusableCell();
-        }
-        _this.setInert(true);
-        var row = _this.getRow(_this.focusedCell[0]);
-        if (!row) {
-          _this.initFocusableCell();
-          row = _this.getRow(_this.focusedCell[0]);
-        }
-        if (!row && _this.asProps.virtualScroll) {
-          var _this$tableRef$curren4, _firstAvailableCell$p;
-          var firstAvailableCell = (_this$tableRef$curren4 = _this.tableRef.current) === null || _this$tableRef$curren4 === void 0 ? void 0 : _this$tableRef$curren4.querySelector('[role="gridcell"]');
-          var firstAvailableRow = firstAvailableCell === null || firstAvailableCell === void 0 || (_firstAvailableCell$p = firstAvailableCell.parentElement) === null || _firstAvailableCell$p === void 0 ? void 0 : _firstAvailableCell$p.parentElement;
-          if (firstAvailableCell && firstAvailableRow) {
-            var _firstAvailableCell$g, _firstAvailableRow$ge;
-            var colIndex = Number((_firstAvailableCell$g = firstAvailableCell.getAttribute("aria-colindex")) !== null && _firstAvailableCell$g !== void 0 ? _firstAvailableCell$g : 1) - 1;
-            var rowIndex = Number((_firstAvailableRow$ge = firstAvailableRow.getAttribute("aria-rowindex")) !== null && _firstAvailableRow$ge !== void 0 ? _firstAvailableRow$ge : 1) - 1;
-            _this.focusedCell[0] = rowIndex;
-            _this.focusedCell[1] = colIndex;
-            row = firstAvailableRow;
-          }
-        }
-        var colindex = _this.focusedCell[1];
-        var cell = colindex > -1 ? (_row = row) === null || _row === void 0 ? void 0 : _row.querySelector('[role=gridcell][aria-colindex="'.concat(colindex + 1, '"]:not([aria-hidden="true"]), [role=columnheader][aria-colindex="').concat(colindex + 1, '"]:not([aria-hidden="true"])')) : void 0;
-        cell === null || cell === void 0 || cell.removeAttribute("inert");
-        if (cell instanceof HTMLElement) {
-          if (hasParent(e.target, cell) && !e.target.dataset.skipTargetFocus) {
-            e.target.focus({
-              focusVisible: true
-            });
-          } else {
-            cell.focus({
-              focusVisible: true
-            });
-          }
-        }
-        if (_this.isDataEmpty) {
-          var _this$headerRef$curre2;
-          (_this$headerRef$curre2 = _this.headerRef.current) === null || _this$headerRef$curre2 === void 0 || _this$headerRef$curre2.setAttribute("tabIndex", "-1");
-        }
-        e.currentTarget.setAttribute("tabIndex", "-1");
-      }
-    });
-    _defineProperty(_this, "handleBlur", function(e) {
-      var relatedTarget = e.relatedTarget;
-      var tableElement = _this.tableRef.current;
-      if (tableElement && (!relatedTarget || !isFocusInside(tableElement, relatedTarget) || !lastInteraction.isKeyboard())) {
-        _this.setInert(false);
-        tableElement.setAttribute("tabIndex", "0");
-        if (_this.isDataEmpty) {
-          var _this$headerRef$curre3;
-          (_this$headerRef$curre3 = _this.headerRef.current) === null || _this$headerRef$curre3 === void 0 || _this$headerRef$curre3.setAttribute("tabIndex", "0");
-        }
-      }
-    });
-    _defineProperty(_this, "handleMouseMove", function() {
-      _this.setInert(false);
-    });
-    _defineProperty(_this, "handleBackFromAccordion", function(key) {
-      var cellIndex = _this.columns.findIndex(function(c) {
-        return c.name === key;
-      });
-      _this.changeFocusCell(-1, cellIndex === -1 ? 0 : cellIndex, "up");
-    });
-    _defineProperty(_this, "handleContainerResizeEnd", function(entries, observer) {
-      var _this$asProps$onResiz, _this$asProps2;
-      if (_this.containerResizeEndTimeoutId) {
-        clearTimeout(_this.containerResizeEndTimeoutId);
-      }
-      _this.containerResizeEndTimeoutId = setTimeout(function() {
-        _this.calculateVerticalShadow();
-        _this.calculateStickyHeaderAnimation();
-      }, 0);
-      (_this$asProps$onResiz = (_this$asProps2 = _this.asProps).onResize) === null || _this$asProps$onResiz === void 0 || _this$asProps$onResiz.call(_this$asProps2, entries, observer);
-    });
-    _defineProperty(_this, "getScrollOffsetValue", function() {
-      if (!_this.headerRef.current) {
-        return [0, 0];
-      }
-      var setToMap = function setToMap2(element) {
-        if (element.getAttribute("name") && element.dataset.uiName === "Head.Column") {
-          var name = element.getAttribute("name");
-          if (name) {
-            _this.headerNodesMap.set(name, element);
-          }
-        }
-      };
-      _this.headerRef.current.childNodes.forEach(function(node) {
-        if (node instanceof HTMLElement) {
-          if (node.classList.value.includes("SGroupContainer")) {
-            node.childNodes.forEach(function(columnNode) {
-              if (columnNode instanceof HTMLElement) {
-                setToMap(columnNode);
-              }
-            });
-          } else {
-            setToMap(node);
-          }
-        }
-      });
-      return _this.columns.reduce(function(acc, column) {
-        if (column.fixed === "left") {
-          var _this$headerNodesMap$, _this$headerNodesMap$2;
-          acc[0] += (_this$headerNodesMap$ = (_this$headerNodesMap$2 = _this.headerNodesMap.get(column.name)) === null || _this$headerNodesMap$2 === void 0 ? void 0 : _this$headerNodesMap$2.getBoundingClientRect().width) !== null && _this$headerNodesMap$ !== void 0 ? _this$headerNodesMap$ : 0;
-        }
-        if (column.fixed === "right") {
-          var _this$headerNodesMap$3, _this$headerNodesMap$4;
-          acc[1] += (_this$headerNodesMap$3 = (_this$headerNodesMap$4 = _this.headerNodesMap.get(column.name)) === null || _this$headerNodesMap$4 === void 0 ? void 0 : _this$headerNodesMap$4.getBoundingClientRect().width) !== null && _this$headerNodesMap$3 !== void 0 ? _this$headerNodesMap$3 : 0;
-        }
-        return acc;
-      }, [0, 0]);
-    });
-    _defineProperty(_this, "getFixedStyle", function(cell) {
-      var side = cell.fixed;
-      if (!side) return [void 0, void 0];
-      var names = cell.name.split("/");
-      var nameSideMap = {
-        left: names[0],
-        right: names[names.length - 1]
-      };
-      var name = nameSideMap[side];
-      var index = _this.columns.findIndex(function(column) {
-        return column.name === name;
-      });
-      if (index === -1) return [void 0, void 0];
-      var startIndexSideMap = {
-        left: 0,
-        right: index + 1
-      };
-      var endIndexSideMap = {
-        left: index,
-        right: _this.columns.length
-      };
-      var columnsFixed = _this.columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
-      if (columnsFixed.length < 1) return [side, 0];
-      var sum = columnsFixed.reduce(function(acc, column) {
-        var _this$headerNodesMap$5;
-        return acc + ((_this$headerNodesMap$5 = _this.headerNodesMap.get(column.name)) === null || _this$headerNodesMap$5 === void 0 ? void 0 : _this$headerNodesMap$5.getBoundingClientRect().width);
-      }, 0);
-      return [side, "".concat(sum, "px")];
-    });
-    var cols = _this.calculateColumnsFromConfig();
-    _this.columns = cols[0];
-    _this.treeColumns = cols[1];
-    _this.calculatedRows = _this.getRows();
-    _this.flatRows = _this.calculatedRows.flat();
-    _this.tmpData = props.data;
-    if (Array.isArray(props.selectedRows) || !props.selectedRows) {
-      _this.selectedRowsContainer = new SelectableRows();
-    } else {
-      _this.selectedRowsContainer = props.selectedRows;
-    }
-    return _this;
-  }
-  _inherits(DataTableRoot2, _Component);
-  return _createClass(DataTableRoot2, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var _this$asProps3 = this.asProps, headerProps = _this$asProps3.headerProps, loading = _this$asProps3.loading;
-      if (headerProps !== null && headerProps !== void 0 && headerProps.sticky && !headerProps.h || loading || this.hasFixedColumn) {
-        requestAnimationFrame(function() {
-          _this2.forceUpdate();
-          _this2.calculateVerticalShadow();
-        });
-      }
-      if (headerProps !== null && headerProps !== void 0 && headerProps.sticky && canUseDOM() && this.scrollDirection === "horizontal") {
-        if (!this.withAnimation) {
-          document.addEventListener("scroll", this.handleDocumentScroll, {
-            passive: true
-          });
-        } else {
-          this.calculateStickyHeaderAnimation();
-        }
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$asProps4 = this.asProps, data = _this$asProps4.data, selectedRows = _this$asProps4.selectedRows, columns = _this$asProps4.columns;
-      if (prevProps.columns !== columns) {
-        var cols = this.calculateColumnsFromConfig();
-        this.columns = cols[0];
-        this.treeColumns = cols[1];
-        this.forceUpdate();
-      }
-      if (prevProps.data !== data || prevProps.columns !== columns) {
-        if (this.hasFixedColumn) {
-          this.calculateVerticalShadow();
-        }
-      }
-      if (prevProps.selectedRows !== selectedRows && selectedRows !== void 0 && !Array.isArray(selectedRows)) {
-        this.selectedRowsContainer = selectedRows;
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$state$expandedR;
-      if (canUseDOM()) {
-        document.removeEventListener("scroll", this.handleDocumentScroll);
-      }
-      (_this$state$expandedR = this.state.expandedRows) === null || _this$state$expandedR === void 0 || _this$state$expandedR.clear();
-    }
-  }, {
-    key: "calculateStickyHeaderAnimation",
-    value: function calculateStickyHeaderAnimation() {
-      var headerProps = this.asProps.headerProps;
-      var scrollArea = this.scrollAreaRef.current;
-      var table = this.tableContainerRef.current;
-      if (scrollArea && table) {
-        var _headerProps$top2;
-        var currentHeaderHeight = scrollArea.style.getPropertyValue("--global-header-height");
-        var newHeaderHeight = "".concat(this.getHeaderHeight(), "px");
-        scrollArea.style.setProperty("--global-scroll-to", "".concat(table.offsetHeight, "px"));
-        scrollArea.style.setProperty("--global-header-top", "".concat((_headerProps$top2 = headerProps === null || headerProps === void 0 ? void 0 : headerProps.top) !== null && _headerProps$top2 !== void 0 ? _headerProps$top2 : 0, "px"));
-        scrollArea.style.setProperty("--global-header-height", newHeaderHeight);
-        if (currentHeaderHeight && currentHeaderHeight !== newHeaderHeight) {
-          this.forceUpdate();
-        }
-      }
-    }
-  }, {
-    key: "withAnimation",
-    get: function get() {
-      if (canUseDOM()) {
-        return CSS.supports("(animation-timeline: view()) and (animation-range: normal)");
-      }
-      return false;
-    }
-  }, {
-    key: "totalRows",
-    get: function get() {
-      var totalRows = this.asProps.totalRows;
-      var flatRows = this.getFlatRows();
-      var expandedRows = this.state.expandedRows;
-      var expandedRowsCount = Array.from(expandedRows).reduce(function(acc, rowKey) {
-        var dtRow = flatRows.find(function(el) {
-          return el[UNIQ_ROW_KEY] === rowKey;
-        });
-        if (dtRow) {
-          var _expandedRows = dtRow[ACCORDION];
-          if (Array.isArray(_expandedRows)) {
-            acc = acc + _expandedRows.length;
-          } else {
-            acc = acc + 1;
-          }
-        }
-        return acc;
-      }, 0);
-      if (totalRows !== void 0) {
-        return totalRows + expandedRowsCount;
-      }
-      var rows = this.getRows().reduce(function(acc, item) {
-        if (Array.isArray(item)) {
-          acc = acc + item.length;
-        } else {
-          acc = acc + 1;
-        }
-        return acc;
-      }, 0);
-      return rows + expandedRowsCount;
-    }
-  }, {
-    key: "scrollDirection",
-    get: function get() {
-      var _this$asProps5 = this.asProps, w = _this$asProps5.w, wMax = _this$asProps5.wMax, h = _this$asProps5.h, hMax = _this$asProps5.hMax;
-      var scrollDirection = void 0;
-      var hasWidthSettings = Boolean(w) || Boolean(wMax);
-      var hasHeightSettings = Boolean(h) && h !== "fit-content" || Boolean(hMax);
-      if (hasWidthSettings && !hasHeightSettings) {
-        scrollDirection = "horizontal";
-      } else if (hasHeightSettings && !hasWidthSettings) {
-        scrollDirection = "vertical";
-      } else if (hasWidthSettings && hasHeightSettings) {
-        scrollDirection = "both";
-      }
-      return scrollDirection;
-    }
-  }, {
-    key: "isDataEmpty",
-    get: function get() {
-      return this.asProps.data.length === 0;
-    }
-  }, {
-    key: "getHeadProps",
-    value: function getHeadProps() {
-      var _this$asProps6 = this.asProps, use = _this$asProps6.use, compact = _this$asProps6.compact, sort = _this$asProps6.sort, onSortChange = _this$asProps6.onSortChange, getI18nText = _this$asProps6.getI18nText, uid = _this$asProps6.uid, headerProps = _this$asProps6.headerProps, selectedRows = _this$asProps6.selectedRows, sideIndents = _this$asProps6.sideIndents, variant = _this$asProps6.variant;
-      var _this$gridSettings = this.gridSettings, gridTemplateColumns = _this$gridSettings.gridTemplateColumns, gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
-      var shadowVertical = this.state.shadowVertical;
-      var sideIndentsValue = variant === "card" ? "wide" : sideIndents;
-      return _objectSpread(_objectSpread({}, headerProps), {}, {
-        columns: this.columns,
-        treeColumns: this.treeColumns,
-        use,
-        tableRef: this.tableRef,
-        compact: Boolean(compact),
-        sort,
-        onSortChange,
-        getI18nText,
-        uid,
-        ref: headerProps !== null && headerProps !== void 0 && headerProps.ref ? forkRef(this.headerRef, headerProps.ref) : this.headerRef,
-        gridAreaGroupMap: this.gridAreaGroupMap,
-        gridTemplateColumns,
-        gridTemplateAreas,
-        sideIndents: sideIndentsValue,
-        totalRows: this.totalRows,
-        selectedRows,
-        flatRows: this.getFlatRows(),
-        onChangeSelectAll: Array.isArray(selectedRows) ? this.handleSelectAllRows : void 0,
-        getFixedStyle: this.getFixedStyle,
-        onCellClick: this.handleCellClick,
-        shadowVertical,
-        scrollDirection: this.scrollDirection,
-        isDataEmpty: this.isDataEmpty,
-        withAnimation: this.withAnimation && this.scrollDirection === "horizontal" && !this.isDataEmpty
-      });
-    }
-  }, {
-    key: "getBodyProps",
-    value: function getBodyProps() {
-      var _this$asProps7 = this.asProps, use = _this$asProps7.use, compact = _this$asProps7.compact, loading = _this$asProps7.loading, getI18nText = _this$asProps7.getI18nText, virtualScroll = _this$asProps7.virtualScroll, uid = _this$asProps7.uid, rowProps = _this$asProps7.rowProps, renderCell = _this$asProps7.renderCell, headerProps = _this$asProps7.headerProps, renderEmptyData2 = _this$asProps7.renderEmptyData, sideIndents = _this$asProps7.sideIndents, selectedRows = _this$asProps7.selectedRows, accordionDuration = _this$asProps7.accordionDuration, accordionMode = _this$asProps7.accordionMode, rawData = _this$asProps7.data, renderCellOverlay = _this$asProps7.renderCellOverlay, limit = _this$asProps7.limit, variant = _this$asProps7.variant, totalRows = _this$asProps7.totalRows, accordionAnimationRows = _this$asProps7.accordionAnimationRows;
-      var _this$gridSettings2 = this.gridSettings, gridTemplateColumns = _this$gridSettings2.gridTemplateColumns, gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
-      var shadowVertical = this.state.shadowVertical;
-      return {
-        accordionDuration,
-        accordionAnimationRows,
-        accordionMode,
-        columns: this.columns,
-        rows: this.getRows(),
-        flatRows: this.getFlatRows(),
-        use,
-        compact: Boolean(compact),
-        gridTemplateColumns,
-        gridTemplateAreas,
-        loading,
-        headerHeight: this.getHeaderHeight(),
-        stickyHeader: headerProps === null || headerProps === void 0 ? void 0 : headerProps.sticky,
-        getI18nText,
-        expandedRows: this.state.expandedRows,
-        onExpandRow: this.onExpandRow,
-        spinnerRef: this.spinnerRef,
-        scrollTop: this.state.scrollTop,
-        scrollDirection: this.state.scrollDirection,
-        tableContainerRef: this.tableContainerRef,
-        tableRef: this.tableRef,
-        scrollAreaRef: this.scrollAreaRef,
-        onBackFromAccordion: this.handleBackFromAccordion,
-        virtualScroll,
-        hasGroups: this.hasGroups,
-        uid,
-        rowProps: this.getRows().length > 0 ? rowProps : void 0,
-        renderCell: this.getRows().length > 0 ? renderCell : void 0,
-        renderEmptyData: renderEmptyData2,
-        sideIndents,
-        selectedRows,
-        onSelectRow: Array.isArray(selectedRows) ? this.handleSelectRow : void 0,
-        getFixedStyle: this.getFixedStyle,
-        onCellClick: this.handleCellClick,
-        rawData,
-        shadowVertical,
-        renderCellOverlay,
-        limit,
-        variant,
-        totalRows
-      };
-    }
-  }, {
-    key: "setInert",
-    value: function setInert(value) {
-      var _this$tableRef$curren5;
-      var cells = (_this$tableRef$curren5 = this.tableRef.current) === null || _this$tableRef$curren5 === void 0 ? void 0 : _this$tableRef$curren5.querySelectorAll("[role=gridcell], [role=columnheader]");
-      cells === null || cells === void 0 || cells.forEach(function(cell) {
-        if (value === true) {
-          cell.setAttribute("inert", "");
-        } else {
-          cell.removeAttribute("inert");
-        }
-      });
-    }
-  }, {
-    key: "initFocusableCell",
-    value: function initFocusableCell(initCell) {
-      var _initCell$, _initCell$2;
-      var hasFocusable = this.hasFocusableInHeader();
-      var initRow = (_initCell$ = initCell === null || initCell === void 0 ? void 0 : initCell[0]) !== null && _initCell$ !== void 0 ? _initCell$ : 0;
-      var initCol = (_initCell$2 = initCell === null || initCell === void 0 ? void 0 : initCell[1]) !== null && _initCell$2 !== void 0 ? _initCell$2 : 0;
-      if (hasFocusable) {
-        this.focusedCell = [initRow, initCol];
-      } else {
-        this.focusedCell = [initRow + 1, initCol];
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref2;
-      var SDataTable = Box;
-      var _this$asProps8 = this.asProps, Children = _this$asProps8.Children, styles = _this$asProps8.styles, w = _this$asProps8.w, wMax = _this$asProps8.wMax, wMin = _this$asProps8.wMin, h = _this$asProps8.h, hMax = _this$asProps8.hMax, hMin = _this$asProps8.hMin, virtualScroll = _this$asProps8.virtualScroll, children = _this$asProps8.children, headerProps = _this$asProps8.headerProps, loading = _this$asProps8.loading, selectedRows = _this$asProps8.selectedRows, getI18nText = _this$asProps8.getI18nText, data = _this$asProps8.data;
-      var _this$getScrollOffset = this.getScrollOffsetValue(), _this$getScrollOffset2 = _slicedToArray(_this$getScrollOffset, 2), offsetLeftSum = _this$getScrollOffset2[0], offsetRightSum = _this$getScrollOffset2[1];
-      var _this$gridSettings3 = this.gridSettings, gridTemplateColumns = _this$gridSettings3.gridTemplateColumns, gridTemplateAreas = _this$gridSettings3.gridTemplateAreas;
-      var headerHeight = (headerProps === null || headerProps === void 0 ? void 0 : headerProps.h) || this.getHeaderHeight();
-      var topOffset = headerProps !== null && headerProps !== void 0 && headerProps.sticky || headerProps !== null && headerProps !== void 0 && headerProps.withScrollBar ? headerHeight : void 0;
-      var width = w !== null && w !== void 0 ? w : this.columns.some(function(c) {
-        return c.gtcWidth === "auto" || c.gtcWidth === "1fr";
-      }) ? "100%" : void 0;
-      var gridTemplateRows = void 0;
-      if (virtualScroll && typeof virtualScroll !== "boolean" && "rowHeight" in virtualScroll) {
-        gridTemplateRows = "auto auto repeat(".concat(this.totalRows, ", minmax(").concat(virtualScroll.rowHeight, "px, auto))");
-      }
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(ScrollArea, _ref2.cn("ScrollArea", {
-        "leftOffset": offsetLeftSum,
-        "rightOffset": offsetRightSum,
-        "topOffset": topOffset,
-        "w": width,
-        "wMax": wMax,
-        "wMin": wMin,
-        "h": h,
-        "hMax": hMax,
-        "hMin": hMin,
-        "shadow": true,
-        "ref": this.scrollAreaRef,
-        "container": this.tableContainerRef,
-        "styles": scrollStyles,
-        "onScroll": this.handleScroll,
-        "disableAutofocusToContent": true,
-        "onResize": this.handleContainerResizeEnd
-      }), /* @__PURE__ */ React.createElement(ScrollArea.Container, {
-        tabIndex: -1,
-        scrollDirection: this.scrollDirection,
-        loading,
-        headerHeight: "".concat(headerHeight, "px"),
-        leftScrollPadding: "".concat(offsetLeftSum, "px"),
-        rightScrollPadding: "".concat(offsetRightSum, "px")
-      }, /* @__PURE__ */ React.createElement(SDataTable, _ref2.cn("SDataTable", _objectSpread({}, assignProps({
-        "ref": forkRef(this.tableRef, this.tableContainerRef),
-        "role": "grid",
-        "onKeyDown": this.handleKeyDown,
-        "onKeyUp": this.handleKeyUp,
-        "onMouseMove": this.handleMouseMove,
-        "tabIndex": 0,
-        "onFocus": this.handleFocus,
-        "onBlur": this.handleBlur,
-        "isDataEmpty": this.isDataEmpty,
-        "aria-rowcount": this.totalRows,
-        "aria-colcount": this.columns.length,
-        "gridTemplateColumns": gridTemplateColumns.join(" "),
-        "gridTemplateAreas": gridTemplateAreas.join(" "),
-        "gridTemplateRows": gridTemplateRows,
-        "w": "100%",
-        "use:data": void 0,
-        "use:w": void 0,
-        "use:wMax": void 0,
-        "use:wMin": void 0,
-        "use:h": void 0,
-        "use:hMax": void 0,
-        "use:hMin": void 0
-      }, _ref))), children ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DataTable.Head, null), /* @__PURE__ */ React.createElement(DataTable.Body, null)))), /* @__PURE__ */ React.createElement(ScrollBars, _ref2.cn("ScrollBars", {
-        "loading": loading,
-        "topOffset": topOffset,
-        "withHeaderScrollBar": headerProps === null || headerProps === void 0 ? void 0 : headerProps.withScrollBar,
-        "withAnimation": this.withAnimation
-      })), selectedRows !== void 0 && !Array.isArray(selectedRows) && /* @__PURE__ */ React.createElement(SRReactiveAnnouncer, _ref2.cn("SRReactiveAnnouncer", {
-        "selectedRows": selectedRows,
-        "getI18nText": getI18nText
-      })), selectedRows !== void 0 && Array.isArray(selectedRows) && /* @__PURE__ */ React.createElement(SRAnnouncer, _ref2.cn("SRAnnouncer", {
-        "selectedRows": selectedRows,
-        "getI18nText": getI18nText,
-        "data": data,
-        "flatRows": this.flatRows
-      })));
-    }
-  }, {
-    key: "calculateColumnsFromConfig",
-    value: function calculateColumnsFromConfig() {
-      var _this3 = this;
-      var _this$props = this.props, columns = _this$props.columns, data = _this$props.data, selectedRows = _this$props.selectedRows;
-      this.hasGroups = columns.some(function(column2) {
-        return "columns" in column2 && column2.columns.some(function(col) {
-          return col.children !== null;
-        });
-      });
-      var groupIndex = 0;
-      var gridColumnIndex = selectedRows ? 2 : 1;
-      var calculateGridTemplateColumn = this.calculateGridTemplateColumn.bind(this);
-      var calculatedColumns = [];
-      var treeColumns = [];
-      if (selectedRows) {
-        var column = {
-          name: SELECT_ALL,
-          gtcWidth: "min-content",
-          alignItems: "flex-start",
-          children: ""
-        };
-        calculatedColumns.push(column);
-      }
-      var makeColumn = function makeColumn2(columnElement, parent, isFirst, isLast, hasGroups) {
-        var _columnElement$fixed, _ref3, _columnElement$border;
-        var leftBordersFromParent = isFirst && ((parent === null || parent === void 0 ? void 0 : parent.borders) === "both" || (parent === null || parent === void 0 ? void 0 : parent.borders) === "left") ? "left" : void 0;
-        var rightBordersFromParent = isLast && ((parent === null || parent === void 0 ? void 0 : parent.borders) === "both" || (parent === null || parent === void 0 ? void 0 : parent.borders) === "right") ? "right" : void 0;
-        var column2 = _objectSpread(_objectSpread({}, columnElement), {}, {
-          name: childIsColumn(columnElement) ? columnElement.name : "",
-          gtcWidth: childIsColumn(columnElement) ? calculateGridTemplateColumn(columnElement) : "",
-          fixed: (_columnElement$fixed = columnElement.fixed) !== null && _columnElement$fixed !== void 0 ? _columnElement$fixed : hasGroups ? parent === null || parent === void 0 ? void 0 : parent.fixed : void 0,
-          borders: (_ref3 = (_columnElement$border = columnElement.borders) !== null && _columnElement$border !== void 0 ? _columnElement$border : leftBordersFromParent) !== null && _ref3 !== void 0 ? _ref3 : rightBordersFromParent,
-          parent
-        });
-        if (column2.fixed) {
-          _this3.hasFixedColumn = true;
-        }
-        return column2;
-      };
-      var childIsColumn = function childIsColumn2(child) {
-        return !("columns" in child);
-      };
-      var childIsGroup = function childIsGroup2(child) {
-        return "columns" in child;
-      };
-      var setShowShadows = function setShowShadows2(col, i) {
-        var prevCol = treeColumns[i - 1];
-        if ("columns" in prevCol && prevCol.columns) {
-          prevCol = prevCol.columns[prevCol.columns.length - 1];
-        }
-        if (prevCol.fixed && !col.fixed) {
-          prevCol.showShadowVertical = true;
-        } else if (!prevCol.fixed && col.fixed) {
-          col.showShadowVertical = true;
-        }
-      };
-      columns.forEach(function(child, i) {
-        if (childIsColumn(child)) {
-          var col = makeColumn(child);
-          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this3.hasGroups ? "3" : "2", " / ").concat(gridColumnIndex + 1);
-          gridColumnIndex++;
-          calculatedColumns.push(col);
-          treeColumns.push(col);
-          if (i > 0) {
-            setShowShadows(col, i);
-          }
-        } else if (childIsGroup(child)) {
-          var Group = makeColumn(child);
-          var childCount = child.columns.length;
-          var initGridColumn = gridColumnIndex;
-          var groupedRow = _this3.hasGroups ? 2 : 1;
-          Group.columns = [];
-          Group.children = child.children;
-          child.columns.forEach(function(child2, j) {
-            var _Group$columns;
-            var isFirst = j === 0;
-            var isLast = j === childCount - 1;
-            var col2 = makeColumn(child2, Group, isFirst, isLast, _this3.hasGroups);
-            if (i === 0 && j === 0 && data.some(function(d) {
-              return d[ACCORDION];
-            })) {
-              gridColumnIndex++;
-              col2.gridArea = "".concat(groupedRow, " / ").concat(gridColumnIndex - 1, " / ").concat(groupedRow + 1, " / ").concat(gridColumnIndex + 1);
-            } else {
-              col2.gridArea = "".concat(groupedRow, " / ").concat(gridColumnIndex, " / ").concat(groupedRow + 1, " / ").concat(gridColumnIndex + 1);
-            }
-            col2.gridArea = "".concat(groupedRow, " / ").concat(gridColumnIndex, " / ").concat(groupedRow + 1, " / ").concat(gridColumnIndex + 1);
-            gridColumnIndex++;
-            calculatedColumns.push(col2);
-            if (isFirst && i > 0) {
-              setShowShadows(col2, i);
-            }
-            (_Group$columns = Group.columns) === null || _Group$columns === void 0 || _Group$columns.push(col2);
-          });
-          treeColumns.push(Group);
-          _this3.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
-          groupIndex++;
-        }
-      });
-      var gridTemplateColumns = calculatedColumns.map(function(c) {
-        return c.gtcWidth;
-      });
-      var gridTemplateAreas = calculatedColumns.map(function(c) {
-        return c.name;
-      });
-      this.gridSettings = {
-        gridTemplateColumns,
-        gridTemplateAreas
-      };
-      return [calculatedColumns, treeColumns];
-    }
-  }, {
-    key: "getFlatRows",
-    value: function getFlatRows() {
-      var data = this.props.data;
-      if (this.tmpData === data && this.flatRows) {
-        return this.flatRows;
-      }
-      this.flatRows = this.getRows().flat();
-      return this.flatRows;
-    }
-  }, {
-    key: "getRows",
-    value: function getRows() {
-      var _this4 = this;
-      var columns = this.columns;
-      var _this$props2 = this.props, data = _this$props2.data, uid = _this$props2.uid, uniqueRowKey = _this$props2.uniqueRowKey, selectedRows = _this$props2.selectedRows;
-      if (this.tmpData === data) {
-        return this.calculatedRows;
-      }
-      this.tmpData = data;
-      var availableRowKeys = [];
-      var rows = [];
-      var columnNames = columns.map(function(column) {
-        return column.name;
-      });
-      var rowIndex = 0;
-      var gridRowIndex = 0;
-      var id = 1e8;
-      var _makeDtRow = function makeDtRow(row, excludeColumns) {
-        var columns2 = new Set(columnNames);
-        var accordionInCell = null;
-        var rowKey = row[UNIQ_ROW_KEY];
-        if (!rowKey) {
-          if (uniqueRowKey) {
-            var keyValue = row[uniqueRowKey];
-            if (keyValue instanceof MergedRowsCell) {
-              rowKey = keyValue.value;
-            } else {
-              rowKey = keyValue;
-            }
-          } else {
-            rowKey = "".concat(uid, "_").concat((rowIndex + id).toString(36));
-          }
-        }
-        var initData = _defineProperty(_defineProperty(_defineProperty({}, UNIQ_ROW_KEY, rowKey), ROW_INDEX, rowIndex), GRID_ROW_INDEX, gridRowIndex);
-        var dtRow = Object.entries(row).reduce(function(acc, _ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2), key = _ref5[0], value = _ref5[1];
-          var columnsToRow = key.split(_this4.columnsSplitter);
-          if (columnsToRow.length === 1) {
-            acc[key] = value !== null && value !== void 0 ? value : "";
-            columns2["delete"](key);
-          } else {
-            acc[columnsToRow[0]] = new MergedColumnsCell(value, {
-              dataKey: key,
-              size: columnsToRow.length
-            });
-            columnsToRow.forEach(function(value2) {
-              columns2["delete"](value2);
-            });
-          }
-          if (value !== null && value !== void 0 && value[ACCORDION]) {
-            accordionInCell = value[ACCORDION];
-          }
-          return acc;
-        }, initData);
-        gridRowIndex++;
-        if (row[ACCORDION]) {
-          if (Array.isArray(row[ACCORDION])) {
-            dtRow[ACCORDION] = row[ACCORDION].map(function(item) {
-              return _makeDtRow(item);
-            });
-          } else if (/* @__PURE__ */ React.isValidElement(row[ACCORDION])) {
-            dtRow[ACCORDION] = row[ACCORDION];
-            gridRowIndex++;
-          }
-        } else if (accordionInCell) {
-          gridRowIndex++;
-        }
-        excludeColumns === null || excludeColumns === void 0 || excludeColumns.forEach(function(value) {
-          columns2["delete"](value);
-        });
-        if (columns2.size > 0) {
-          columns2.forEach(function(value) {
-            dtRow[value] = "";
-          });
-        }
-        if (!excludeColumns) {
-          availableRowKeys.push(dtRow[UNIQ_ROW_KEY]);
-        }
-        return dtRow;
-      };
-      data.forEach(function(row) {
-        var groupedRows = row[ROW_GROUP];
-        if (groupedRows && groupedRows.length > 1) {
-          var innerRows = [];
-          var groupedKeys = [];
-          var groupedRowData = Object.entries(row).reduce(function(acc, _ref6) {
-            var _ref7 = _slicedToArray(_ref6, 2), key = _ref7[0], value = _ref7[1];
-            var accordion = Array.isArray(row[ACCORDION]) ? row[ACCORDION].map(function(item) {
-              return _makeDtRow(item);
-            }) : row[ACCORDION];
-            acc[key] = new MergedRowsCell(value, groupedRows.length, accordion);
-            var columnsToRow = key.split(_this4.columnsSplitter);
-            if (columnsToRow.length === 1) {
-              groupedKeys.push(key);
-            } else {
-              groupedKeys.push.apply(groupedKeys, _toConsumableArray(columnsToRow));
-            }
-            return acc;
-          }, _defineProperty(_defineProperty({}, UNIQ_ROW_KEY, ""), ROW_INDEX, -1));
-          groupedRows.forEach(function(childRow, index) {
-            var dtRow2;
-            if (index === 0) {
-              var rowData = _objectSpread(_objectSpread({}, childRow), groupedRowData);
-              dtRow2 = _makeDtRow(rowData);
-              dtRow2[ROW_GROUP] = /* @__PURE__ */ new Set();
-            } else {
-              var _innerRows$;
-              dtRow2 = _makeDtRow(childRow, groupedKeys);
-              (_innerRows$ = innerRows[0]) === null || _innerRows$ === void 0 || (_innerRows$ = _innerRows$[ROW_GROUP]) === null || _innerRows$ === void 0 || _innerRows$.add(dtRow2[UNIQ_ROW_KEY]);
-            }
-            innerRows.push(dtRow2);
-            if (index === groupedRows.length - 1 && row[ACCORDION]) {
-              gridRowIndex = Array.isArray(row[ACCORDION]) ? gridRowIndex + row[ACCORDION].length : gridRowIndex + 1;
-            }
-            rowIndex++;
-          });
-          rows.push(innerRows);
-        } else if ((groupedRows === null || groupedRows === void 0 ? void 0 : groupedRows.length) === 1) {
-          var dtRow = _makeDtRow(_objectSpread(_objectSpread({}, groupedRows[0]), row));
-          rows.push(dtRow);
-          rowIndex++;
-        } else {
-          var _dtRow = _makeDtRow(row);
-          rows.push(_dtRow);
-          rowIndex++;
-        }
-      });
-      this.calculatedRows = rows;
-      if (selectedRows && !Array.isArray(selectedRows)) {
-        selectedRows.setAvailableKeys(availableRowKeys);
-      }
-      return rows;
-    }
-  }, {
-    key: "calculateGridTemplateColumn",
-    value: function calculateGridTemplateColumn(c) {
-      var _ref8;
-      return (_ref8 = /* @__PURE__ */ React.isValidElement(c) ? c.props.gtcWidth : c.gtcWidth) !== null && _ref8 !== void 0 ? _ref8 : this.props.defaultGridTemplateColumnWidth;
-    }
-  }, {
-    key: "getHeaderHeight",
-    value: function getHeaderHeight() {
-      var _this$headerRef$curre4;
-      var header = (_this$headerRef$curre4 = this.headerRef.current) === null || _this$headerRef$curre4 === void 0 ? void 0 : _this$headerRef$curre4.children;
-      var height = 0;
-      for (var i = 0; i < ((_header$length = header === null || header === void 0 ? void 0 : header.length) !== null && _header$length !== void 0 ? _header$length : 0); i++) {
-        var _header$length;
-        var item = header === null || header === void 0 ? void 0 : header.item(i);
-        var columnHeight = item === null || item === void 0 ? void 0 : item.getBoundingClientRect().height;
-        if (item instanceof HTMLElement && item.dataset.groupContainer) {
-          var _item$children$item$g, _item$children$item, _item$children$item$g2, _item$children$item2;
-          var groupHeight = (_item$children$item$g = (_item$children$item = item.children.item(0)) === null || _item$children$item === void 0 ? void 0 : _item$children$item.getBoundingClientRect().height) !== null && _item$children$item$g !== void 0 ? _item$children$item$g : 0;
-          var cellHeight = (_item$children$item$g2 = (_item$children$item2 = item.children.item(1)) === null || _item$children$item2 === void 0 ? void 0 : _item$children$item2.getBoundingClientRect().height) !== null && _item$children$item$g2 !== void 0 ? _item$children$item$g2 : 0;
-          columnHeight = groupHeight + cellHeight;
-        }
-        if (columnHeight) {
-          height = columnHeight;
-          break;
-        }
-      }
-      return height;
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      if (props.expandedRows === state.expandedRows || props.expandedRows === void 0) {
-        return null;
-      }
-      return {
-        expandedRows: props.expandedRows
-      };
-    }
-  }]);
-})(Component);
-_defineProperty(DataTableRoot, "displayName", "DataTable");
-_defineProperty(DataTableRoot, "style", style);
-_defineProperty(DataTableRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
-_defineProperty(DataTableRoot, "defaultProps", {
-  use: "primary",
-  defaultGridTemplateColumnWidth: "auto",
-  defaultSelectedRows: void 0,
-  h: "fit-content",
-  renderEmptyData: function renderEmptyData() {
-    return /* @__PURE__ */ React.createElement(NoData, {
-      py: 10,
-      type: "nothing-found",
-      description: "",
-      w: "100%"
-    });
-  },
-  variant: "default",
-  accordionAnimationRows: 40,
-  accordionDuration: 200
-});
-var DataTable = createComponent(DataTableRoot, {
-  Head,
-  Body
-});
-export {
-  ACCORDION,
-  DataTable,
-  GRID_ROW_INDEX,
-  IS_EMPTY_DATA_ROW,
-  ROW_GROUP,
-  ROW_INDEX,
-  SELECT_ALL,
-  UNIQ_ROW_KEY
-};