@semcore/data-table 4.50.2-prerelease.0 → 4.51.0-prerelease.0

package/lib/es6/DataTable.js

@@ -1,619 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
-import { assignProps as _assignProps } from "@semcore/core";
-var _excluded = ["children", "name", "fixed", "resizable", "sortable", "flex", "vBorders", "active"],
-  _excluded2 = ["name", "children"];
-import React from 'react';
-import createComponent, { Component, Root, sstyled } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
-import syncScroll from '@semcore/utils/lib/syncScroll';
-import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
-import fire from '@semcore/utils/lib/fire';
-import { flattenColumns } from './utils';
-import Head from './Head';
-import Body from './Body';
-import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
-import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
-import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
-/*!__reshadow-styles__:"./style/data-table.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDataTable_1pye4_gg_,.___SHeadWrapper_1pye4_gg_{position:relative}.___SDataTable_1pye4_gg_.__compact_1pye4_gg_ .___SCell_1pye4_gg_,.___SDataTable_1pye4_gg_.__compact_1pye4_gg_ .___SColumn_1pye4_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SHeadWrapper_1pye4_gg_.__animationsDisabled_1pye4_gg_ .___SColumn_1pye4_gg_{transition:none}.___SHeadWrapper_1pye4_gg_.__sticky_1pye4_gg_{position:sticky;top:0;z-index:2}.___SHead_1pye4_gg_{display:flex;position:relative;flex-direction:row;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_1pye4_gg_{display:flex;align-items:flex-start;flex-grow:1;font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SColumn_1pye4_gg_:focus-visible{outline:0;box-shadow:inset var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SColumn_1pye4_gg_.__hidden_1pye4_gg_{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border-width:0!important}.___SColumn_1pye4_gg_._use_primary_1pye4_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_1pye4_gg_._use_secondary_1pye4_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_1pye4_gg_.__group_1pye4_gg_.__use_1pye4_gg_{display:flex;flex-wrap:wrap;flex-direction:column;align-items:normal;border-bottom:none;padding:0}.___SColumn_1pye4_gg_.__groupHead_1pye4_gg_{justify-content:center;z-index:1;border-bottom:none}.___SColumn_1pye4_gg_.__sortable_1pye4_gg_{cursor:pointer}.___SColumn_1pye4_gg_.__sortable_1pye4_gg_._use_primary_1pye4_gg_:focus{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}@media (hover:hover){.___SColumn_1pye4_gg_.__sortable_1pye4_gg_._use_primary_1pye4_gg_:hover{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}}.___SColumn_1pye4_gg_.__sortable_1pye4_gg_._justifyContent_right_1pye4_gg_:focus .___SSortWrapper_1pye4_gg_{position:absolute;flex-basis:0;right:var(--intergalactic-spacing-3x, 12px)}@media (hover:hover){.___SColumn_1pye4_gg_.__sortable_1pye4_gg_._justifyContent_right_1pye4_gg_:hover .___SSortWrapper_1pye4_gg_{position:absolute;flex-basis:0;right:var(--intergalactic-spacing-3x, 12px)}}.___SColumn_1pye4_gg_.__sortable_1pye4_gg_._justifyContent_right_1pye4_gg_.__active_1pye4_gg_ .___SSortWrapper_1pye4_gg_{position:relative;flex-basis:inherit;right:0}.___SColumn_1pye4_gg_.__sortable_1pye4_gg_.__active_1pye4_gg_ .___SSortWrapper_1pye4_gg_,.___SColumn_1pye4_gg_.__sortable_1pye4_gg_:focus .___SSortWrapper_1pye4_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}@media (hover:hover){.___SColumn_1pye4_gg_.__sortable_1pye4_gg_:hover .___SSortWrapper_1pye4_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}}.___SColumn_1pye4_gg_.__sortable_1pye4_gg_.__active_1pye4_gg_ .___SSortWrapper_1pye4_gg_:before,.___SColumn_1pye4_gg_.__sortable_1pye4_gg_:focus .___SSortIcon_1pye4_gg_,.___SColumn_1pye4_gg_.__sortable_1pye4_gg_:focus .___SSortWrapper_1pye4_gg_:before{display:block;opacity:1}@media (hover:hover){.___SColumn_1pye4_gg_.__sortable_1pye4_gg_:hover .___SSortWrapper_1pye4_gg_:before{display:block;opacity:1}}@media (hover:hover){.___SColumn_1pye4_gg_.__sortable_1pye4_gg_:hover .___SSortIcon_1pye4_gg_{display:block;opacity:1}}.___SColumn_1pye4_gg_._use_primary_1pye4_gg_.__active_1pye4_gg_{background-color:var(--intergalactic-table-th-primary-cell-active, #e0e1e9);width:100%}.___SColumn_1pye4_gg_.__active_1pye4_gg_ .___SSortIcon_1pye4_gg_{display:block;opacity:1}.___SColumn_1pye4_gg_.__resizable_1pye4_gg_{border-right:1px solid transparent}@media (hover:hover){.___SColumn_1pye4_gg_.__resizable_1pye4_gg_:hover:after{border-right-color:var(--intergalactic-border-table-accent, #a9abb6)}}.___SColumn_1pye4_gg_.__resizable_1pye4_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100%;width:5px;background:0 0;cursor:col-resize;border-right:1px solid transparent}.___SColumn_1pye4_gg_.__fixed_1pye4_gg_{position:sticky;z-index:2}.___SCell_1pye4_gg_.__borderLeft_1pye4_gg_,.___SColumn_1pye4_gg_.__borderLeft_1pye4_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1pye4_gg_.__borderRight_1pye4_gg_,.___SColumn_1pye4_gg_.__borderRight_1pye4_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SSortWrapper_1pye4_gg_{flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortIcon_1pye4_gg_,.___SSortWrapper_1pye4_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1pye4_gg_:before{content:\"\";top:0;width:20px;height:100%}.___SSortIcon_1pye4_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(1em*1.25 - 16px);margin-left:var(--intergalactic-spacing-1x, 4px)}.___SColumn_1pye4_gg_._use_primary_1pye4_gg_ .___SSortWrapper_1pye4_gg_:before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1pye4_gg_._use_secondary_1pye4_gg_ .___SSortWrapper_1pye4_gg_:before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SBodyWrapper_1pye4_gg_{position:relative}.___SBody_1pye4_gg_{display:flex;flex-direction:column;position:relative;min-width:-moz-fit-content;min-width:fit-content}.___SRow_1pye4_gg_{display:flex;flex-direction:row;position:relative}.___SRow_1pye4_gg_.__active_1pye4_gg_>.___SCell_1pye4_gg_:not(.__theme_1pye4_gg_),.___SRow_1pye4_gg_._theme_muted_1pye4_gg_.__active_1pye4_gg_>.___SCell_1pye4_gg_:not(.__theme_1pye4_gg_){background-color:var(--intergalactic-table-td-cell-active, #e6e7ed)}@media (hover:hover){.___SRow_1pye4_gg_ .___SCell_1pye4_gg_:hover+.___SGroupCell_1pye4_gg_ .___SCell_1pye4_gg_:not(.__theme_1pye4_gg_),.___SRow_1pye4_gg_:hover>.___SCell_1pye4_gg_:not(.__theme_1pye4_gg_){background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}}.___SRow_1pye4_gg_._theme_muted_1pye4_gg_ .___SCell_1pye4_gg_:not(.__theme_1pye4_gg_){background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}@media (hover:hover){.___SRow_1pye4_gg_._theme_muted_1pye4_gg_ .___SCell_1pye4_gg_:hover+.___SGroupCell_1pye4_gg_ .___SCell_1pye4_gg_:not(.__theme_1pye4_gg_),.___SRow_1pye4_gg_._theme_muted_1pye4_gg_:hover>.___SCell_1pye4_gg_:not(.__theme_1pye4_gg_),.___SRow_1pye4_gg_:hover>.___SCell_1pye4_gg_._theme_muted_1pye4_gg_{background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}}.___SRow_1pye4_gg_._theme_info_1pye4_gg_ .___SCell_1pye4_gg_:not(.__theme_1pye4_gg_){background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SRow_1pye4_gg_._theme_info_1pye4_gg_.__active_1pye4_gg_>.___SCell_1pye4_gg_:not(.__theme_1pye4_gg_){background-color:var(--intergalactic-table-td-cell-selected-active, #c4e5fe)}@media (hover:hover){.___SRow_1pye4_gg_._theme_info_1pye4_gg_ .___SCell_1pye4_gg_:hover+.___SGroupCell_1pye4_gg_ .___SCell_1pye4_gg_:not(.__theme_1pye4_gg_),.___SRow_1pye4_gg_._theme_info_1pye4_gg_:hover>.___SCell_1pye4_gg_:not(.__theme_1pye4_gg_),.___SRow_1pye4_gg_:hover>.___SCell_1pye4_gg_._theme_info_1pye4_gg_{background-color:var(--intergalactic-table-td-cell-selected-hover, #c4e5fe)}}.___SRow_1pye4_gg_._theme_success_1pye4_gg_ .___SCell_1pye4_gg_:not(.__theme_1pye4_gg_){background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SRow_1pye4_gg_._theme_success_1pye4_gg_.__active_1pye4_gg_>.___SCell_1pye4_gg_:not(.__theme_1pye4_gg_){background-color:var(--intergalactic-table-td-cell-new-active, #9ef2c9)}@media (hover:hover){.___SRow_1pye4_gg_._theme_success_1pye4_gg_ .___SCell_1pye4_gg_:hover+.___SGroupCell_1pye4_gg_ .___SCell_1pye4_gg_:not(.__theme_1pye4_gg_),.___SRow_1pye4_gg_._theme_success_1pye4_gg_:hover>.___SCell_1pye4_gg_:not(.__theme_1pye4_gg_),.___SRow_1pye4_gg_:hover>.___SCell_1pye4_gg_._theme_success_1pye4_gg_{background-color:var(--intergalactic-table-td-cell-new-hover, #9ef2c9)}}.___SRow_1pye4_gg_._theme_warning_1pye4_gg_ .___SCell_1pye4_gg_:not(.__theme_1pye4_gg_){background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SRow_1pye4_gg_._theme_warning_1pye4_gg_.__active_1pye4_gg_>.___SCell_1pye4_gg_:not(.__theme_1pye4_gg_){background-color:var(--intergalactic-table-td-cell-warning-active, #ffdca2)}@media (hover:hover){.___SRow_1pye4_gg_._theme_warning_1pye4_gg_ .___SCell_1pye4_gg_:hover+.___SGroupCell_1pye4_gg_ .___SCell_1pye4_gg_:not(.__theme_1pye4_gg_),.___SRow_1pye4_gg_._theme_warning_1pye4_gg_:hover>.___SCell_1pye4_gg_:not(.__theme_1pye4_gg_),.___SRow_1pye4_gg_:hover>.___SCell_1pye4_gg_._theme_warning_1pye4_gg_{background-color:var(--intergalactic-table-td-cell-warning-hover, #ffdca2)}}.___SRow_1pye4_gg_._theme_danger_1pye4_gg_ .___SCell_1pye4_gg_:not(.__theme_1pye4_gg_){background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SRow_1pye4_gg_._theme_danger_1pye4_gg_.__active_1pye4_gg_>.___SCell_1pye4_gg_:not(.__theme_1pye4_gg_){background-color:var(--intergalactic-table-td-cell-critical-active, #ffd7df)}@media (hover:hover){.___SRow_1pye4_gg_._theme_danger_1pye4_gg_ .___SCell_1pye4_gg_:hover+.___SGroupCell_1pye4_gg_ .___SCell_1pye4_gg_:not(.__theme_1pye4_gg_),.___SRow_1pye4_gg_._theme_danger_1pye4_gg_:hover>.___SCell_1pye4_gg_:not(.__theme_1pye4_gg_),.___SRow_1pye4_gg_:hover>.___SCell_1pye4_gg_._theme_danger_1pye4_gg_{background-color:var(--intergalactic-table-td-cell-critical-hover, #ffd7df)}}.___SRow_1pye4_gg_.__positioned_1pye4_gg_{position:absolute}.___SBody_1pye4_gg_.__animationsDisabled_1pye4_gg_ .___SCell_1pye4_gg_{transition:none}.___SCell_1pye4_gg_{display:flex;flex:1;flex-basis:auto;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);overflow:hidden;white-space:nowrap;font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;outline:0}.___SCell_1pye4_gg_._use_primary_1pye4_gg_{padding:var(--intergalactic-spacing-3x, 12px);min-height:45px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1pye4_gg_._use_secondary_1pye4_gg_{padding:var(--intergalactic-spacing-2x, 8px);min-height:37px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1pye4_gg_.__fixed_1pye4_gg_{position:sticky;z-index:1}.___SCell_1pye4_gg_._theme_muted_1pye4_gg_{background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}.___SCell_1pye4_gg_._theme_info_1pye4_gg_{background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SCell_1pye4_gg_._theme_success_1pye4_gg_{background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SCell_1pye4_gg_._theme_warning_1pye4_gg_{background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SCell_1pye4_gg_._theme_danger_1pye4_gg_{background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SCell_1pye4_gg_:focus-visible:not(.__fixed_1pye4_gg_){position:relative}.___SCell_1pye4_gg_:focus-visible::after{position:absolute;display:block;content:\"\";top:3px;right:3px;bottom:3px;left:3px;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none}.___SHeightHold_1pye4_gg_{position:absolute;top:0;width:100%;pointer-events:none;z-index:-1}", /*__inner_css_end__*/"1pye4_gg_"),
-/*__reshadow_css_end__*/
-{
-  "__SDataTable": "___SDataTable_1pye4_gg_",
-  "__SHeadWrapper": "___SHeadWrapper_1pye4_gg_",
-  "_sticky": "__sticky_1pye4_gg_",
-  "__SHead": "___SHead_1pye4_gg_",
-  "__SColumn": "___SColumn_1pye4_gg_",
-  "_hidden": "__hidden_1pye4_gg_",
-  "_use_primary": "_use_primary_1pye4_gg_",
-  "_use_secondary": "_use_secondary_1pye4_gg_",
-  "_group": "__group_1pye4_gg_",
-  "_use": "__use_1pye4_gg_",
-  "_groupHead": "__groupHead_1pye4_gg_",
-  "_active": "__active_1pye4_gg_",
-  "__SSortIcon": "___SSortIcon_1pye4_gg_",
-  "_fixed": "__fixed_1pye4_gg_",
-  "_borderLeft": "__borderLeft_1pye4_gg_",
-  "__SCell": "___SCell_1pye4_gg_",
-  "_borderRight": "__borderRight_1pye4_gg_",
-  "__SSortWrapper": "___SSortWrapper_1pye4_gg_",
-  "__SBodyWrapper": "___SBodyWrapper_1pye4_gg_",
-  "__SBody": "___SBody_1pye4_gg_",
-  "__SRow": "___SRow_1pye4_gg_",
-  "_theme": "__theme_1pye4_gg_",
-  "__SGroupCell": "___SGroupCell_1pye4_gg_",
-  "_theme_muted": "_theme_muted_1pye4_gg_",
-  "_theme_info": "_theme_info_1pye4_gg_",
-  "_theme_success": "_theme_success_1pye4_gg_",
-  "_theme_warning": "_theme_warning_1pye4_gg_",
-  "_theme_danger": "_theme_danger_1pye4_gg_",
-  "_positioned": "__positioned_1pye4_gg_",
-  "_animationsDisabled": "__animationsDisabled_1pye4_gg_",
-  "__SHeightHold": "___SHeightHold_1pye4_gg_",
-  "_compact": "__compact_1pye4_gg_",
-  "_sortable": "__sortable_1pye4_gg_",
-  "_justifyContent_right": "_justifyContent_right_1pye4_gg_",
-  "_resizable": "__resizable_1pye4_gg_"
-});
-import { isFocusInside } from '@semcore/utils/lib/use/useFocusLock';
-import { hasFocusableIn } from '@semcore/utils/lib/use/useFocusLock';
-import focusSourceEnhance from '@semcore/utils/lib/enhances/focusSourceEnhance';
-var reversedSortDirection = {
-  desc: 'asc',
-  asc: 'desc'
-};
-var defaultSortDirection = 'desc';
-var ROW_GROUP = Symbol('ROW_GROUP');
-var cssVarReg = /[:;\W]/g;
-var createCssVarForWidth = function createCssVarForWidth(name) {
-  return "--".concat(name.replace(cssVarReg, '_'), "_width");
-};
-function setBorderGroupColumns(columns, side) {
-  var firstColumn = columns[0];
-  var lastColumn = columns[columns.length - 1];
-  if (firstColumn && (!side || side === 'left')) {
-    firstColumn.borderLeft = true;
-    if (firstColumn.columns) {
-      setBorderGroupColumns(firstColumn.columns, 'left');
-    }
-  }
-  if (lastColumn && (!side || side === 'right')) {
-    lastColumn.borderRight = true;
-    if (lastColumn.columns) {
-      setBorderGroupColumns(lastColumn.columns, 'right');
-    }
-  }
-}
-var RootDefinitionTable = /*#__PURE__*/function (_Component) {
-  _inherits(RootDefinitionTable, _Component);
-  var _super = _createSuper(RootDefinitionTable);
-  function RootDefinitionTable(props) {
-    var _this;
-    _classCallCheck(this, RootDefinitionTable);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "focusedCell", [-1, -1]);
-    _defineProperty(_assertThisInitialized(_this), "columns", []);
-    _defineProperty(_assertThisInitialized(_this), "tableRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "scrollBodyRef", null);
-    _defineProperty(_assertThisInitialized(_this), "scrollHeadRef", null);
-    _defineProperty(_assertThisInitialized(_this), "handlerSortClick", function (name, event) {
-      var column = _this.columns.find(function (column) {
-        return column.name === name;
-      });
-      return fire(_assertThisInitialized(_this), 'onSortChange', [column.name, column.active ? reversedSortDirection[column.sortDirection] : column.sortDirection], event);
-    });
-    _defineProperty(_assertThisInitialized(_this), "handlerResize", function () {
-      _this.forceUpdate();
-    });
-    _defineProperty(_assertThisInitialized(_this), "scrollToUp", function () {
-      var _this$tableRef, _this$tableRef$curren;
-      (_this$tableRef = _this.tableRef) === null || _this$tableRef === void 0 ? void 0 : (_this$tableRef$curren = _this$tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest',
-        behavior: 'smooth'
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "hasFocusableInHeader", function () {
-      var hasFocusable = _this.columns.some(function (column) {
-        var columnElement = column.props.ref.current;
-        return column.sortable || columnElement && hasFocusableIn(columnElement);
-      });
-      return hasFocusable;
-    });
-    _defineProperty(_assertThisInitialized(_this), "changeFocusCell", function (rowIndex, colIndex) {
-      var _this$tableRef$curren2, _this$tableRef$curren3;
-      var hasFocusable = _this.hasFocusableInHeader();
-      var maxCol = _this.columns.length - 1;
-      var maxRow = _this.totalRows;
-      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 headerRow = (_this$tableRef$curren3 = _this.tableRef.current) === null || _this$tableRef$curren3 === void 0 ? void 0 : _this$tableRef$curren3.querySelector('[aria-rowindex="1"]');
-      var headerCells = headerRow === null || headerRow === void 0 ? void 0 : headerRow.querySelectorAll('[role=columnheader]');
-      var currentCell = currentRow === null || currentRow === void 0 ? void 0 : currentRow.querySelectorAll('[role=gridcell]').item(_this.focusedCell[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;
-      _this.focusedCell = [newRow, newCol];
-      var row = _this.getRow(newRow);
-      var cell = row === null || row === void 0 ? void 0 : row.querySelectorAll('[role=gridcell], [role=columnheader]').item(newCol);
-      if (cell instanceof HTMLElement && currentCell !== cell) {
-        currentCell === null || currentCell === void 0 ? void 0 : currentCell.setAttribute('inert', '');
-        if (currentCell !== currentHeaderCell) {
-          currentCell === null || currentCell === void 0 ? 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 ? void 0 : cell.focus();
-        if (newRow !== 0) {
-          currentHeaderCell === null || currentHeaderCell === void 0 ? void 0 : currentHeaderCell.setAttribute('inert', '');
-          var _headerCell = headerCells === null || headerCells === void 0 ? void 0 : headerCells.item(newCol);
-          _headerCell === null || _headerCell === void 0 ? void 0 : _headerCell.removeAttribute('inert');
-        }
-      } else if (currentCell === cell) {
-        _this.changeFocusCell(rowIndex, colIndex);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
-      switch (e.key) {
-        case 'Tab':
-          {
-            _this.setInert(true);
-            break;
-          }
-        case 'ArrowLeft':
-          {
-            e.preventDefault();
-            _this.changeFocusCell(0, -1);
-            break;
-          }
-        case 'ArrowRight':
-          {
-            e.preventDefault();
-            _this.changeFocusCell(0, 1);
-            break;
-          }
-        case 'ArrowUp':
-          {
-            e.preventDefault();
-            _this.changeFocusCell(-1, 0);
-            break;
-          }
-        case 'ArrowDown':
-          {
-            e.preventDefault();
-            _this.changeFocusCell(1, 0);
-            break;
-          }
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "initFocusableCell", function () {
-      var hasFocusable = _this.hasFocusableInHeader();
-      if (hasFocusable) {
-        _this.focusedCell = [0, 0];
-      } else {
-        _this.focusedCell = [1, 0];
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "getRow", function (index) {
-      var _this$tableRef$curren4, _this$tableRef$curren5;
-      return index === 0 ? (_this$tableRef$curren4 = _this.tableRef.current) === null || _this$tableRef$curren4 === void 0 ? void 0 : _this$tableRef$curren4.querySelector('[role=row]') : (_this$tableRef$curren5 = _this.tableRef.current) === null || _this$tableRef$curren5 === void 0 ? void 0 : _this$tableRef$curren5.querySelector("[aria-rowindex=\"".concat(index + 1, "\"]"));
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
-      var _this$asProps$focusSo;
-      if ((!e.relatedTarget || !isFocusInside(e.currentTarget, e.relatedTarget)) && ((_this$asProps$focusSo = _this.asProps.focusSourceRef) === null || _this$asProps$focusSo === void 0 ? void 0 : _this$asProps$focusSo.current) === 'keyboard') {
-        var _row2;
-        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]);
-        }
-        var cell = (_row2 = _row) === null || _row2 === void 0 ? void 0 : _row2.querySelectorAll('[role=gridcell], [role=columnheader]').item(_this.focusedCell[1]);
-        cell === null || cell === void 0 ? void 0 : cell.removeAttribute('inert');
-        cell instanceof HTMLElement && cell.focus();
-        e.currentTarget.setAttribute('tabIndex', '-1');
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
-      var _this$asProps$focusSo2;
-      var relatedTarget = e.relatedTarget;
-      var tableElement = _this.tableRef.current;
-      if (tableElement && (!relatedTarget || !isFocusInside(tableElement, relatedTarget) || ((_this$asProps$focusSo2 = _this.asProps.focusSourceRef) === null || _this$asProps$focusSo2 === void 0 ? void 0 : _this$asProps$focusSo2.current) !== 'keyboard')) {
-        _this.setInert(false);
-        tableElement.setAttribute('tabIndex', '0');
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleMouseMove", function () {
-      _this.setInert(false);
-    });
-    var createRef = syncScroll();
-    // first create body ref for master scroll
-    _this.scrollBodyRef = createRef('body');
-    _this.scrollHeadRef = createRef('head');
-    return _this;
-  }
-  _createClass(RootDefinitionTable, [{
-    key: "setVarStyle",
-    value: function setVarStyle(columns) {
-      var _this2 = this;
-      var animations = columns.flatMap(function (column) {
-        var _column$props$ref$cur, _column$props$ref$cur2;
-        return (_column$props$ref$cur = column.props.ref.current) === null || _column$props$ref$cur === void 0 ? void 0 : (_column$props$ref$cur2 = _column$props$ref$cur.getAnimations) === null || _column$props$ref$cur2 === void 0 ? void 0 : _column$props$ref$cur2.call(_column$props$ref$cur);
-      }).filter(function (a) {
-        return a !== undefined;
-      });
-      var animationPromise = Promise.resolve();
-      if (animations.length > 0) {
-        animationPromise = Promise.all(animations.map(function (animation) {
-          return animation.finished;
-        }));
-      }
-      animationPromise.then(function () {
-        var _iterator = _createForOfIteratorHelper(columns),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var column = _step.value;
-            if (column.setVar) {
-              var _this2$tableRef$curre;
-              (_this2$tableRef$curre = _this2.tableRef.current) === null || _this2$tableRef$curre === void 0 ? void 0 : _this2$tableRef$curre.style.setProperty(column.varWidth, "".concat(column.width, "px"));
-            }
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
-      })["catch"](function (err) {
-        console.error(err);
-      });
-    }
-  }, {
-    key: "childrenToColumns",
-    value: function childrenToColumns(children) {
-      var _this3 = this;
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-        fixed: undefined
-      };
-      var sort = this.asProps.sort;
-      var columnsChildren = [];
-      React.Children.forEach(children, function (child) {
-        var _column$props;
-        if (! /*#__PURE__*/React.isValidElement(child)) return;
-        if (child.type !== DefinitionTable.Column) return;
-        var _ref3 = child.props,
-          children = _ref3.children,
-          name = _ref3.name,
-          _ref3$fixed = _ref3.fixed,
-          fixed = _ref3$fixed === void 0 ? options.fixed : _ref3$fixed,
-          resizable = _ref3.resizable,
-          sortable = _ref3.sortable,
-          flex = _ref3.flex,
-          vBorders = _ref3.vBorders,
-          active = _ref3.active,
-          props = _objectWithoutProperties(_ref3, _excluded);
-        var lastColumnChildren = columnsChildren[columnsChildren.length - 1];
-        var isGroup = !name;
-        var columns;
-        if (isGroup) {
-          columns = _this3.childrenToColumns(children, {
-            fixed: fixed
-          });
-          active = typeof active === 'boolean' ? active : columns.some(function (c) {
-            return c.active;
-          });
-          if (vBorders) {
-            setBorderGroupColumns(columns);
-          }
-          name = flattenColumns(columns).map(function (_ref4) {
-            var name = _ref4.name;
-            return name;
-          }).join('/');
-          if (!columns.length) return;
-          children = React.Children.toArray(children).filter(function (child) {
-            return !( /*#__PURE__*/React.isValidElement(child) && child.type === DefinitionTable.Column);
-          });
-        }
-        var column = _this3.columns.find(function (column) {
-          return column.name === name;
-        });
-        var columnChildren = {
-          get width() {
-            var _this$props$ref$curre;
-            // @ts-ignore
-            return ((_this$props$ref$curre = this.props.ref.current) === null || _this$props$ref$curre === void 0 ? void 0 : _this$props$ref$curre.getBoundingClientRect().width) || 0;
-          },
-          name: name,
-          varWidth: createCssVarForWidth(name),
-          setVar: flex !== 'inherit',
-          fixed: fixed,
-          resizable: resizable,
-          active: typeof active === 'boolean' ? active : sort[0] === name,
-          sortable: sortable,
-          borderLeft: (lastColumnChildren === null || lastColumnChildren === void 0 ? void 0 : lastColumnChildren.borderRight) === true ? false : vBorders,
-          borderRight: vBorders,
-          sortDirection: sort[0] === name ? sort[1] : (column === null || column === void 0 ? void 0 : column.sortDirection) || (typeof sortable === 'string' ? sortable : defaultSortDirection),
-          props: _objectSpread(_objectSpread({
-            name: name,
-            flex: flex === 'inherit' ? undefined : flex
-          }, props), {}, {
-            // @ts-ignore
-            forwardRef: child.ref,
-            children: children,
-            ref: (column === null || column === void 0 ? void 0 : (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.ref) || /*#__PURE__*/React.createRef()
-          }),
-          parentColumns: []
-        };
-        if (columns) {
-          columnChildren.columns = columns;
-          columns.forEach(function (column) {
-            return column.parentColumns.unshift(columnChildren);
-          });
-        }
-        columnsChildren.push(columnChildren);
-      });
-      return columnsChildren;
-    }
-  }, {
-    key: "getHeadProps",
-    value: function getHeadProps(props) {
-      var _this$asProps = this.asProps,
-        use = _this$asProps.use,
-        uid = _this$asProps.uid,
-        getI18nText = _this$asProps.getI18nText;
-      var columnsChildren = this.childrenToColumns(props.children);
-      this.columns = flattenColumns(columnsChildren);
-      return {
-        $onSortClick: callAllEventHandlers(this.handlerSortClick, this.scrollToUp),
-        columnsChildren: columnsChildren,
-        use: use,
-        onResize: this.handlerResize,
-        $scrollRef: this.scrollHeadRef,
-        uid: uid,
-        getI18nText: getI18nText
-      };
-    }
-  }, {
-    key: "getBodyProps",
-    value: function getBodyProps(props) {
-      var _this$asProps2 = this.asProps,
-        data = _this$asProps2.data,
-        use = _this$asProps2.use,
-        uniqueKey = _this$asProps2.uniqueKey,
-        uid = _this$asProps2.uid;
-      var cellPropsLayers = {};
-      var rowPropsLayers = [];
-      React.Children.forEach(props.children, function (child) {
-        if ( /*#__PURE__*/React.isValidElement(child)) {
-          var _ref5 = child.props,
-            name = _ref5.name,
-            children = _ref5.children,
-            other = _objectWithoutProperties(_ref5, _excluded2);
-          if (child.type === DefinitionTable.Cell && name) {
-            name.split('/').forEach(function (name) {
-              cellPropsLayers[name] = cellPropsLayers[name] || [];
-              cellPropsLayers[name].push(_objectSpread(_objectSpread({}, other), {}, {
-                childrenPropsGetter: children
-              }));
-            });
-          }
-          if (child.type === DefinitionTable.Row) {
-            rowPropsLayers.push(_objectSpread(_objectSpread({}, other), {}, {
-              childrenPropsGetter: children
-            }));
-          }
-        }
-      });
-      return {
-        columns: this.columns,
-        rows: this.dataToRows(data, cellPropsLayers),
-        uniqueKey: uniqueKey,
-        use: use,
-        rowPropsLayers: rowPropsLayers,
-        $scrollRef: this.scrollBodyRef,
-        uid: uid
-      };
-    }
-  }, {
-    key: "dataToRows",
-    value: function dataToRows(data, cellPropsLayers) {
-      var _this4 = this;
-      var parseData = function parseData(data, exclude) {
-        return data.map(function (row) {
-          var groupByName = {};
-          var columnsWithoutRowGroup = {};
-          for (var rowKey in row) {
-            var columnNames = rowKey.split('/');
-            if (columnNames.length >= 2) {
-              var _iterator2 = _createForOfIteratorHelper(columnNames),
-                _step2;
-              try {
-                for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-                  var column = _step2.value;
-                  groupByName[column] = {
-                    groupedColumns: columnNames,
-                    groupData: row[rowKey]
-                  };
-                  columnsWithoutRowGroup[column] = true;
-                }
-              } catch (err) {
-                _iterator2.e(err);
-              } finally {
-                _iterator2.f();
-              }
-            } else {
-              columnsWithoutRowGroup[rowKey] = true;
-            }
-          }
-          var rowsGroup = row[ROW_GROUP] || [];
-          var rowsGroupedNames = Object.fromEntries(rowsGroup.flatMap(function (subRow) {
-            return Object.keys(subRow);
-          }).flatMap(function (key) {
-            return key.split('/');
-          }).map(function (key) {
-            return [key, true];
-          }));
-          var isGroup = false;
-          var cells = _this4.columns.map(function (column) {
-            if (groupByName[column.name]) {
-              var _groupByName$column$n = groupByName[column.name],
-                groupedColumns = _groupByName$column$n.groupedColumns,
-                groupData = _groupByName$column$n.groupData;
-              if (groupedColumns[0] === column.name) {
-                return {
-                  name: groupedColumns.join('/'),
-                  cssVar: groupedColumns.map(createCssVarForWidth),
-                  fixed: column.fixed,
-                  data: groupData,
-                  cellPropsLayers: cellPropsLayers[column.name] || []
-                };
-              }
-            } else if (column.name in row) {
-              return {
-                name: column.name,
-                cssVar: column.varWidth,
-                fixed: column.fixed,
-                data: row[column.name],
-                cellPropsLayers: cellPropsLayers[column.name] || []
-              };
-            } else if (!isGroup && rowsGroupedNames[column.name]) {
-              // TODO: make it work not only with first group
-              isGroup = true;
-              return parseData(rowsGroup, _objectSpread(_objectSpread({}, exclude), columnsWithoutRowGroup));
-            } else if (!exclude[column.name] && !rowsGroupedNames[column.name]) {
-              // add empty cell if it is not present in data
-              return {
-                name: column.name,
-                cssVar: column.varWidth,
-                fixed: column.fixed,
-                data: null,
-                cellPropsLayers: cellPropsLayers[column.name] || []
-              };
-            }
-          }).filter(function (column) {
-            return column;
-          }).map(function (column) {
-            return column;
-          });
-          cells.flatRowData = row;
-          return cells;
-        });
-      };
-      return parseData(data, {});
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.setVarStyle(this.columns);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      this.setVarStyle(this.columns);
-      if (prevProps.data !== this.props.data) {
-        var focusedRow = this.focusedCell[0];
-        var isFocusInHeader = focusedRow === 0 && this.hasFocusableInHeader();
-        if (this.tableRef.current && !isFocusInside(this.tableRef.current) && !isFocusInHeader) {
-          this.focusedCell = [-1, -1];
-        }
-      }
-    }
-  }, {
-    key: "totalRows",
-    get: function get() {
-      var _this$asProps3 = this.asProps,
-        data = _this$asProps3.data,
-        totalRows = _this$asProps3.totalRows;
-      return totalRows !== null && totalRows !== void 0 ? totalRows : (data !== null && data !== void 0 ? data : []).length;
-    }
-  }, {
-    key: "setInert",
-    value: function setInert(value) {
-      var _this$tableRef$curren6;
-      var cells = (_this$tableRef$curren6 = this.tableRef.current) === null || _this$tableRef$curren6 === void 0 ? void 0 : _this$tableRef$curren6.querySelectorAll('[role=gridcell], [role=columnheader]');
-      cells === null || cells === void 0 ? void 0 : cells.forEach(function (cell) {
-        if (value === true) {
-          cell.setAttribute('inert', '');
-        } else {
-          cell.removeAttribute('inert');
-        }
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref2;
-      var SDataTable = Box;
-      var _this$asProps4 = this.asProps,
-        Children = _this$asProps4.Children,
-        styles = _this$asProps4.styles;
-      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SDataTable, _ref2.cn("SDataTable", _objectSpread({}, _assignProps({
-        "__excludeProps": ['data'],
-        "ref": this.tableRef,
-        "role": 'grid',
-        "onKeyDown": this.handleKeyDown,
-        "onMouseMove": this.handleMouseMove,
-        "tabIndex": 0,
-        "onFocus": this.handleFocus,
-        "onBlur": this.handleBlur,
-        "aria-rowcount": this.totalRows,
-        "aria-colcount": this.columns.length
-      }, _ref))), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})));
-    }
-  }]);
-  return RootDefinitionTable;
-}(Component);
-_defineProperty(RootDefinitionTable, "displayName", 'DefinitionTable');
-_defineProperty(RootDefinitionTable, "style", style);
-_defineProperty(RootDefinitionTable, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages), focusSourceEnhance()]);
-_defineProperty(RootDefinitionTable, "defaultProps", {
-  use: 'primary',
-  uniqueKey: 'id',
-  sort: [],
-  data: []
-});
-function ComponentDefinition() {
-  return null;
-}
-var DefinitionTable = createComponent(RootDefinitionTable, {
-  Head: Head,
-  Body: Body,
-  Column: ComponentDefinition,
-  Cell: ComponentDefinition,
-  Row: ComponentDefinition
-}, {});
-export { ROW_GROUP };
-export default DefinitionTable;
-export var wrapDataTable = function wrapDataTable(wrapper) {
-  return wrapper;
-};
-export var wrapDataTableRow = function wrapDataTableRow(wrapper) {
-  return wrapper;
-};
-export var wrapDataTableCell = function wrapDataTableCell(wrapper) {
-  return wrapper;
-};
-//# sourceMappingURL=DataTable.js.map