@semcore/data-table 16.0.0-prerelease.2 → 16.0.0-prerelease.21

package/lib/esm/components/Body/Body.mjs

@@ -0,0 +1,394 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
+import * as React from "react";
+import { Box } from "@semcore/base-components";
+import { Row } from "./Row.mjs";
+import { Cell } from "./Cell.mjs";
+import { MergedColumnsCell, MergedRowsCell } from "./MergedCells.mjs";
+import { ROW_INDEX, UNIQ_ROW_KEY, ACCORDION } from "../DataTable/DataTable.mjs";
+import ChevronRightM from "@semcore/icon/ChevronRight/m";
+import { ButtonLink } from "@semcore/button";
+import Spin from "@semcore/spin";
+import { isInteractiveElement } from "@semcore/core/lib/utils/isInteractiveElement";
+/*!__reshadow-styles__:"./style.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SBody_1sflu_gg_,.___SRowGroup_1sflu_gg_,.___SRow_1sflu_gg_{display:contents}.___SBody_1sflu_gg_.__compact_1sflu_gg_ .___SCell_1sflu_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SBody_1sflu_gg_.__compact_1sflu_gg_ .___SCell_1sflu_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + (var(--intergalactic-spacing-5x, 20px)*(var(--data-aria-level_1sflu) - 1)))}.___SCell_1sflu_gg_.__gridArea_1sflu_gg_,.___SCollapseRow_1sflu_gg_.__gridArea_1sflu_gg_,.___SRow_1sflu_gg_.__gridArea_1sflu_gg_{grid-area:var(--gridArea_1sflu)}.___SCollapseRow_1sflu_gg_ .___SCell_1sflu_gg_{display:block}.___SRow_1sflu_gg_.__active_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_.__expanded_1sflu_gg_._accordionType_cell_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_).__withAccordion_1sflu_gg_,.___SRow_1sflu_gg_.__expanded_1sflu_gg_._accordionType_row_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-active, #e6e7ed)}.___SCollapseRow_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_.__expanded_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-accordion, #f4f5f9)}@media (hover:hover){.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_._theme_muted_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]._theme_muted_1sflu_gg_,.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_._theme_muted_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_._theme_muted_1sflu_gg_,.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_._theme_muted_1sflu_gg_:hover>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_:hover>.___SCell_1sflu_gg_._theme_muted_1sflu_gg_,.___SRow_1sflu_gg_:hover>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_._theme_info_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]._theme_info_1sflu_gg_,.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_._theme_info_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_._theme_info_1sflu_gg_,.___SRow_1sflu_gg_._theme_info_1sflu_gg_:hover>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_:hover>.___SCell_1sflu_gg_._theme_info_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-selected-hover, #c4e5fe)}.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_._theme_success_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]._theme_success_1sflu_gg_,.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_._theme_success_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_._theme_success_1sflu_gg_,.___SRow_1sflu_gg_._theme_success_1sflu_gg_:hover>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_:hover>.___SCell_1sflu_gg_._theme_success_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-new-hover, #9ef2c9)}.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_._theme_warning_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]._theme_warning_1sflu_gg_,.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_._theme_warning_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_._theme_warning_1sflu_gg_,.___SRow_1sflu_gg_._theme_warning_1sflu_gg_:hover>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_:hover>.___SCell_1sflu_gg_._theme_warning_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-warning-hover, #ffdca2)}.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_._theme_danger_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]._theme_danger_1sflu_gg_,.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_._theme_danger_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_._theme_danger_1sflu_gg_,.___SRow_1sflu_gg_._theme_danger_1sflu_gg_:hover>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_:hover>.___SCell_1sflu_gg_._theme_danger_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-critical-hover, #ffd7df)}}.___SRow_1sflu_gg_._theme_muted_1sflu_gg_ .___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}.___SRow_1sflu_gg_._theme_muted_1sflu_gg_.__active_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-active, #e6e7ed)}.___SRow_1sflu_gg_._theme_info_1sflu_gg_ .___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SRow_1sflu_gg_._theme_info_1sflu_gg_.__active_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-selected-active, #c4e5fe)}.___SRow_1sflu_gg_._theme_success_1sflu_gg_ .___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SRow_1sflu_gg_._theme_success_1sflu_gg_.__active_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-new-active, #9ef2c9)}.___SRow_1sflu_gg_._theme_warning_1sflu_gg_ .___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SRow_1sflu_gg_._theme_warning_1sflu_gg_.__active_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-warning-active, #ffdca2)}.___SRow_1sflu_gg_._theme_danger_1sflu_gg_ .___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SRow_1sflu_gg_._theme_danger_1sflu_gg_.__active_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-critical-active, #ffd7df)}.___SCell_1sflu_gg_{display:flex;height:100%;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:pre-wrap;word-break:break-word;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_1sflu_gg_ .___SAccordionToggle_1sflu_gg_{margin-right:var(--intergalactic-spacing-3x, 12px);margin-top:var(--intergalactic-spacing-05x, 2px);height:-moz-fit-content;height:fit-content}.___SCell_1sflu_gg_ .___SAccordionToggle_1sflu_gg_ svg{transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SCell_1sflu_gg_ .___SAccordionToggle_1sflu_gg_.__expanded_1sflu_gg_ svg{transform:rotate(90deg)}.___SCheckboxCell_1sflu_gg_,.___SRow_1sflu_gg_._accordionType_cell_1sflu_gg_>.___SCell_1sflu_gg_.__withAccordion_1sflu_gg_,.___SRow_1sflu_gg_._accordionType_row_1sflu_gg_>.___SCell_1sflu_gg_{cursor:pointer}.___SCell_1sflu_gg_._use_primary_1sflu_gg_{padding:var(--intergalactic-spacing-3x, 12px);min-height:45px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1sflu_gg_._use_primary_1sflu_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-3x, 12px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-2x, 8px))*(var(--data-aria-level_1sflu) - 1)))}.___SCell_1sflu_gg_._use_secondary_1sflu_gg_{padding:var(--intergalactic-spacing-2x, 8px);min-height:37px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1sflu_gg_._use_secondary_1sflu_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-2x, 8px))*(var(--data-aria-level_1sflu) - 1)))}.___SCell_1sflu_gg_._borders_both_1sflu_gg_,.___SCell_1sflu_gg_._borders_left_1sflu_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1sflu_gg_._borders_both_1sflu_gg_,.___SCell_1sflu_gg_._borders_right_1sflu_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1sflu_gg_.__fixed_1sflu_gg_{position:sticky;z-index:2}.___SCell_1sflu_gg_._theme_muted_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}.___SCell_1sflu_gg_._theme_info_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SCell_1sflu_gg_._theme_success_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SCell_1sflu_gg_._theme_warning_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SCell_1sflu_gg_._theme_danger_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SSpinContainer_1sflu_gg_{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;align-items:center;justify-content:center;background-color:var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85))}.___SSpinContainer_1sflu_gg_.__headerHeight_1sflu_gg_{top:var(--headerHeight_1sflu)}.___SEmptyData_1sflu_gg_{grid-column:1/-1}.___SRow_1sflu_gg_._sideIndents_wide_1sflu_gg_ .___SCell_1sflu_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SRow_1sflu_gg_._sideIndents_wide_1sflu_gg_ .___SCell_1sflu_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}',
+    /*__inner_css_end__*/
+    "1sflu_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SBody": "___SBody_1sflu_gg_",
+    "__SRow": "___SRow_1sflu_gg_",
+    "__SRowGroup": "___SRowGroup_1sflu_gg_",
+    "_gridArea": "__gridArea_1sflu_gg_",
+    "__SCell": "___SCell_1sflu_gg_",
+    "__SCollapseRow": "___SCollapseRow_1sflu_gg_",
+    "--gridArea": "--gridArea_1sflu",
+    "_active": "__active_1sflu_gg_",
+    "_theme": "__theme_1sflu_gg_",
+    "_expanded": "__expanded_1sflu_gg_",
+    "_accordionType_row": "_accordionType_row_1sflu_gg_",
+    "_accordionType_cell": "_accordionType_cell_1sflu_gg_",
+    "_withAccordion": "__withAccordion_1sflu_gg_",
+    "_theme_muted": "_theme_muted_1sflu_gg_",
+    "_theme_info": "_theme_info_1sflu_gg_",
+    "_theme_success": "_theme_success_1sflu_gg_",
+    "_theme_warning": "_theme_warning_1sflu_gg_",
+    "_theme_danger": "_theme_danger_1sflu_gg_",
+    "__SCheckboxCell": "___SCheckboxCell_1sflu_gg_",
+    "_borders_both": "_borders_both_1sflu_gg_",
+    "_borders_left": "_borders_left_1sflu_gg_",
+    "_borders_right": "_borders_right_1sflu_gg_",
+    "_fixed": "__fixed_1sflu_gg_",
+    "__SSpinContainer": "___SSpinContainer_1sflu_gg_",
+    "_headerHeight": "__headerHeight_1sflu_gg_",
+    "--headerHeight": "--headerHeight_1sflu",
+    "__SEmptyData": "___SEmptyData_1sflu_gg_",
+    "_compact": "__compact_1sflu_gg_",
+    "--data-aria-level": "--data-aria-level_1sflu",
+    "__SAccordionToggle": "___SAccordionToggle_1sflu_gg_",
+    "_use_primary": "_use_primary_1sflu_gg_",
+    "_use_secondary": "_use_secondary_1sflu_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_1sflu_gg_"
+  })
+);
+var ROWS_BUFFER = 20;
+var APROX_ROWS_ON_PAGE = 20;
+var BodyRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(BodyRoot2, _Component);
+  var _super = _createSuper(BodyRoot2);
+  function BodyRoot2() {
+    var _this;
+    _classCallCheck(this, BodyRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "rowsHeightMap", /* @__PURE__ */ new Map());
+    _defineProperty(_assertThisInitialized(_this), "indexForDownIterate", 0);
+    _defineProperty(_assertThisInitialized(_this), "indexForUpIterate", 0);
+    _defineProperty(_assertThisInitialized(_this), "handleRef", function(index, row) {
+      return function(node) {
+        if (!_this.rowsHeightMap.has(index) && node) {
+          _this.rowsHeightMap.set(index, [0, 0, node]);
+          _this.setRowHeight(index, row);
+        }
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleExpandRow", function(row, index) {
+      setTimeout(function() {
+        _this.setRowHeight(index, row);
+        for (var i = index; i < _this.rowsHeightMap.size; i++) {
+          _this.setRowHeight(i, row);
+        }
+      }, 300);
+      _this.asProps.onExpandRow(row);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleClickRow", function(row, index) {
+      return function(e) {
+        if (!isInteractiveElement(e.target)) {
+          _this.handleExpandRow(row, index);
+        }
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleClickCell", function(row, index) {
+      return function(e) {
+        if (!isInteractiveElement(e.target)) {
+          _this.handleExpandRow(row, index);
+        }
+      };
+    });
+    return _this;
+  }
+  _createClass(BodyRoot2, [{
+    key: "getRowProps",
+    value: function getRowProps(props) {
+      var _this$asProps = this.asProps, use = _this$asProps.use, gridTemplateAreas = _this$asProps.gridTemplateAreas, gridTemplateColumns = _this$asProps.gridTemplateColumns, expandedRows = _this$asProps.expandedRows, columns = _this$asProps.columns, onExpandRow = _this$asProps.onExpandRow, loading = _this$asProps.loading, hasGroups = _this$asProps.hasGroups, scrollAreaRef = _this$asProps.scrollAreaRef, uid = _this$asProps.uid, onBackFromAccordion = _this$asProps.onBackFromAccordion, rowProps = _this$asProps.rowProps, rows = _this$asProps.rows, flatRows = _this$asProps.flatRows, sideIndents = _this$asProps.sideIndents, selectedRows = _this$asProps.selectedRows, onSelectRow = _this$asProps.onSelectRow, getFixedStyle = _this$asProps.getFixedStyle;
+      var row = props.row;
+      var index = row[ROW_INDEX];
+      var rowIndex = Array.from(expandedRows !== null && expandedRows !== void 0 ? expandedRows : []).reduce(function(acc, item) {
+        var rowIndex2 = flatRows.findIndex(function(row2) {
+          return row2[UNIQ_ROW_KEY] === item;
+        });
+        if (rowIndex2 < index) {
+          var _flatRows$rowIndex;
+          var expandedRow = (_flatRows$rowIndex = flatRows[rowIndex2]) === null || _flatRows$rowIndex === void 0 ? void 0 : _flatRows$rowIndex[ACCORDION];
+          if (Array.isArray(expandedRow)) {
+            acc = acc + expandedRow.length;
+          } else {
+            acc = acc + 1;
+          }
+        }
+        return acc;
+      }, index);
+      var gridRowIndex = rowIndex + (hasGroups ? 3 : 2);
+      var ariaRowIndex = rowIndex + 2;
+      var accordionDataGridArea = Array.isArray(row[ACCORDION]) ? "".concat(gridRowIndex + 1, " / 1 / ").concat(gridRowIndex + 1 + row[ACCORDION].length, " / ").concat(columns.length + 1) : "".concat(gridRowIndex + 1, " / 1 / ").concat(gridRowIndex + 1, " / ").concat(columns.length + 1);
+      return _objectSpread(_objectSpread({
+        onClick: row[ACCORDION] ? this.handleClickRow(row, index) : void 0
+      }, rowProps === null || rowProps === void 0 ? void 0 : rowProps(row, index)), {}, {
+        use,
+        uid,
+        gridTemplateAreas,
+        gridTemplateColumns,
+        expanded: expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.has(row[UNIQ_ROW_KEY]),
+        accordionDataGridArea,
+        columns,
+        rowIndex: index,
+        ariaRowIndex,
+        gridRowIndex,
+        rows,
+        onBackFromAccordion,
+        row,
+        expandedRows,
+        onExpandRow,
+        selectedRows,
+        onSelectRow,
+        inert: loading ? "" : void 0,
+        scrollAreaRef,
+        sideIndents,
+        getFixedStyle
+      });
+    }
+  }, {
+    key: "getCellProps",
+    value: function getCellProps(props) {
+      var _props$children, _value3, _this2 = this, _value4;
+      var _this$asProps2 = this.asProps, use = _this$asProps2.use, renderCell = _this$asProps2.renderCell, expandedRows = _this$asProps2.expandedRows, styles = _this$asProps2.styles, getI18nText = _this$asProps2.getI18nText, virtualScroll = _this$asProps2.virtualScroll, tableRef = _this$asProps2.tableRef;
+      var SAccordionToggle = ButtonLink;
+      var dataKey = props.column.name;
+      var cellValue = props.row[dataKey];
+      var value = void 0;
+      var isMergedRows = cellValue instanceof MergedRowsCell;
+      var isMergedColumns = cellValue instanceof MergedColumnsCell;
+      if (isMergedColumns || isMergedRows) {
+        value = cellValue.value;
+        if (isMergedColumns) {
+          dataKey = cellValue.dataKey;
+        }
+      } else {
+        value = cellValue;
+      }
+      var defaultRender = function defaultRender2() {
+        var _value;
+        return /* @__PURE__ */ React.isValidElement(value) ? value : (_value = value) === null || _value === void 0 ? void 0 : _value.toString();
+      };
+      var extraProps = {
+        use,
+        virtualScroll: Boolean(virtualScroll),
+        tableRef,
+        children: (_props$children = props.children) !== null && _props$children !== void 0 ? _props$children : defaultRender()
+      };
+      if (renderCell) {
+        var _value$toString, _value2;
+        var external = renderCell({
+          columnName: props.column.name,
+          row: props.row,
+          column: props.column,
+          rowIndex: props.rowIndex,
+          columnIndex: props.columnIndex,
+          dataKey,
+          defaultRender,
+          value: /* @__PURE__ */ React.isValidElement(value) ? value : (_value$toString = (_value2 = value) === null || _value2 === void 0 ? void 0 : _value2.toString()) !== null && _value$toString !== void 0 ? _value$toString : "",
+          isMergedRows,
+          isMergedColumns
+        });
+        if (this.isReactNode(external) || Array.isArray(external)) {
+          extraProps.children = external;
+        } else {
+          for (var key in external) {
+            extraProps[key] = external[key];
+          }
+        }
+      }
+      if (props.columnIndex === 0 && props.row[ACCORDION] || (_value3 = value) !== null && _value3 !== void 0 && _value3[ACCORDION]) {
+        var _ref2;
+        var expanded = expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.has(props.row[UNIQ_ROW_KEY]);
+        extraProps.children = (_ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SAccordionToggle, _ref2.cn("SAccordionToggle", {
+          "aria-label": getI18nText("DataTable.Cell.AccordionToggle.expand:aria-label"),
+          "expanded": expanded,
+          "onClick": function onClick(e) {
+            e.stopPropagation();
+            _this2.handleExpandRow(props.row, props.rowIndex);
+          },
+          "color": "--intergalactic-icon-primary-neutral",
+          "aria-expanded": expanded,
+          "aria-describedby": props.id,
+          "aria-controls": props.accordionId
+        }), /* @__PURE__ */ React.createElement(SAccordionToggle.Addon, {
+          tag: ChevronRightM
+        })), extraProps.children));
+      }
+      if ((_value4 = value) !== null && _value4 !== void 0 && _value4[ACCORDION]) {
+        extraProps.onClick = this.handleClickCell(props.row, props.rowIndex);
+      }
+      return extraProps;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref3, _this$rowsHeightMap$g5, _this3 = this;
+      var SBody = Box;
+      var SRowGroup = Box;
+      var SSpinContainer = Box;
+      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, loading = _this$asProps3.loading, headerHeight = _this$asProps3.headerHeight, spinnerRef = _this$asProps3.spinnerRef, virtualScroll = _this$asProps3.virtualScroll, scrollDirection = _this$asProps3.scrollDirection, tableContainerRef = _this$asProps3.tableContainerRef, scrollTop = _this$asProps3.scrollTop, renderEmptyData = _this$asProps3.renderEmptyData, columns = _this$asProps3.columns, uid = _this$asProps3.uid, rows = _this$asProps3.rows;
+      var rowsToRender = rows;
+      var startIndex = -1;
+      var lastIndex = -1;
+      if (virtualScroll) {
+        var _virtualScroll$rowsBu, _tableContainerRef$cu, _tableContainerRef$cu2;
+        var rowsBuffer = typeof virtualScroll !== "boolean" && "rowsBuffer" in virtualScroll ? (_virtualScroll$rowsBu = virtualScroll.rowsBuffer) !== null && _virtualScroll$rowsBu !== void 0 ? _virtualScroll$rowsBu : ROWS_BUFFER : ROWS_BUFFER;
+        var offsetHeight = (_tableContainerRef$cu = (_tableContainerRef$cu2 = tableContainerRef.current) === null || _tableContainerRef$cu2 === void 0 ? void 0 : _tableContainerRef$cu2.offsetHeight) !== null && _tableContainerRef$cu !== void 0 ? _tableContainerRef$cu : 0;
+        var prevPrepared = scrollDirection === "up" ? rowsBuffer : 4;
+        var nextPrepared = scrollDirection === "up" ? 4 : rowsBuffer;
+        if (typeof virtualScroll === "boolean" || "aproxRowsOnPage" in virtualScroll) {
+          var _virtualScroll$aproxR;
+          var aproxRowsOnPage = typeof virtualScroll !== "boolean" ? (_virtualScroll$aproxR = virtualScroll.aproxRowsOnPage) !== null && _virtualScroll$aproxR !== void 0 ? _virtualScroll$aproxR : APROX_ROWS_ON_PAGE : APROX_ROWS_ON_PAGE;
+          if (scrollDirection === "down") {
+            var _this$rowsHeightMap$g, _this$rowsHeightMap$g2, _lastIndex;
+            for (var i = this.indexForDownIterate; i < this.rowsHeightMap.size - 1; i++) {
+              var value = this.rowsHeightMap.get(i);
+              if (!value) continue;
+              var key = i;
+              var valueFromToCompare = value[1];
+              var valueToToCompare = value[0];
+              if (startIndex === -1 && scrollTop < valueFromToCompare) {
+                startIndex = Math.max(key - prevPrepared, 0);
+              }
+              if (startIndex !== -1 && scrollTop + offsetHeight < valueToToCompare) {
+                lastIndex = Math.min(key + nextPrepared, rows.length);
+              }
+              if (startIndex !== -1 && lastIndex !== -1) {
+                break;
+              }
+            }
+            if (scrollTop + offsetHeight < ((_this$rowsHeightMap$g = (_this$rowsHeightMap$g2 = this.rowsHeightMap.get((_lastIndex = lastIndex) !== null && _lastIndex !== void 0 ? _lastIndex : 0)) === null || _this$rowsHeightMap$g2 === void 0 ? void 0 : _this$rowsHeightMap$g2[1]) !== null && _this$rowsHeightMap$g !== void 0 ? _this$rowsHeightMap$g : 0)) {
+              lastIndex = lastIndex + aproxRowsOnPage;
+            }
+          } else if (scrollDirection === "up") {
+            var _this$rowsHeightMap$g3, _this$rowsHeightMap$g4, _startIndex;
+            for (var _i = this.indexForUpIterate; _i >= 0; _i--) {
+              var _value5 = this.rowsHeightMap.get(_i);
+              if (!_value5) continue;
+              var _key2 = _i;
+              var _valueFromToCompare = _value5[1];
+              var _valueToToCompare = _value5[0];
+              if (lastIndex === -1 && scrollTop + offsetHeight > _valueToToCompare) {
+                lastIndex = Math.min(_key2 + nextPrepared, rows.length);
+              }
+              if (lastIndex !== -1 && scrollTop < _valueFromToCompare) {
+                startIndex = Math.max(_key2 - prevPrepared, 0);
+              }
+              if (startIndex !== -1 && lastIndex !== -1) {
+                break;
+              }
+            }
+            if (scrollTop < ((_this$rowsHeightMap$g3 = (_this$rowsHeightMap$g4 = this.rowsHeightMap.get((_startIndex = startIndex) !== null && _startIndex !== void 0 ? _startIndex : 0)) === null || _this$rowsHeightMap$g4 === void 0 ? void 0 : _this$rowsHeightMap$g4[0]) !== null && _this$rowsHeightMap$g3 !== void 0 ? _this$rowsHeightMap$g3 : 0)) {
+              startIndex = Math.max(startIndex - aproxRowsOnPage, 0);
+            }
+          }
+          if (startIndex === -1) {
+            startIndex = scrollTop === 0 ? 0 : Math.max(rows.length - aproxRowsOnPage, 0);
+          }
+          if (lastIndex === -1) {
+            lastIndex = scrollTop === 0 ? aproxRowsOnPage : rows.length;
+          }
+          this.indexForDownIterate = startIndex;
+          this.indexForUpIterate = lastIndex;
+          rowsToRender = rows.slice(startIndex, lastIndex);
+        } else if ("rowHeight" in virtualScroll) {
+          var rowHeight = virtualScroll.rowHeight;
+          startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);
+          var _lastIndex2 = Math.min(Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared, rows.length);
+          rowsToRender = rows.slice(startIndex, _lastIndex2);
+        }
+      }
+      startIndex = startIndex === -1 ? 0 : startIndex;
+      var rowMarginTop = (_this$rowsHeightMap$g5 = this.rowsHeightMap.get(startIndex - 1)) === null || _this$rowsHeightMap$g5 === void 0 ? void 0 : _this$rowsHeightMap$g5[1];
+      var emptyRow = null;
+      if (rowsToRender.length === 0) {
+        var _emptyRow;
+        emptyRow = (_emptyRow = {}, _defineProperty(_emptyRow, UNIQ_ROW_KEY, "".concat(uid, "_empty_data")), _defineProperty(_emptyRow, ROW_INDEX, 0), _defineProperty(_emptyRow, columns[0].name, new MergedColumnsCell(renderEmptyData(), {
+          dataKey: columns[0].name,
+          size: columns.length
+        })), _emptyRow);
+      }
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SBody, _ref3.cn("SBody", _objectSpread({}, assignProps({
+        "__excludeProps": ["data"]
+      }, _ref))), emptyRow && /* @__PURE__ */ React.createElement(Body.Row, {
+        row: emptyRow,
+        offset: 0
+      }), typeof virtualScroll === "boolean" && rowMarginTop && /* @__PURE__ */ React.createElement(Box, _ref3.cn("Box", {
+        "h": rowMarginTop
+      })), rowsToRender.map(function(row, index) {
+        if (Array.isArray(row)) {
+          var _ref4;
+          return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SRowGroup, _ref4.cn("SRowGroup", {
+            "role": "rowgroup",
+            "key": "gg_".concat(row[0][UNIQ_ROW_KEY]),
+            "ref": _this3.handleRef(startIndex + index, row[0])
+          }), row.map(function(item, i2) {
+            return /* @__PURE__ */ React.createElement(Body.Row, {
+              key: item[UNIQ_ROW_KEY],
+              row: item
+            });
+          }));
+        }
+        return /* @__PURE__ */ React.createElement(Body.Row, {
+          key: row[UNIQ_ROW_KEY],
+          row,
+          ref: virtualScroll ? _this3.handleRef(startIndex + index, row) : void 0
+        });
+      }), loading && /* @__PURE__ */ React.createElement(SSpinContainer, _ref3.cn("SSpinContainer", {
+        "innerOutline": true,
+        "headerHeight": "".concat(headerHeight, "px"),
+        "tabIndex": -1,
+        "ref": spinnerRef,
+        "role": "row"
+      }), /* @__PURE__ */ React.createElement(Spin, _ref3.cn("Spin", {
+        "size": "xxl",
+        "role": "gridcell"
+      }))));
+    }
+  }, {
+    key: "isReactNode",
+    value: function isReactNode(obj) {
+      return typeof obj === "string" || typeof obj === "number" || /* @__PURE__ */ React.isValidElement(obj) || typeof obj === "boolean" || obj === void 0 || obj === null;
+    }
+  }, {
+    key: "setRowHeight",
+    value: function setRowHeight(index, row) {
+      var _this$rowsHeightMap$g6, _node$children$item;
+      var expandedRows = this.asProps.expandedRows;
+      var node = (_this$rowsHeightMap$g6 = this.rowsHeightMap.get(index)) === null || _this$rowsHeightMap$g6 === void 0 ? void 0 : _this$rowsHeightMap$g6[2];
+      var firstChild = (node === null || node === void 0 ? void 0 : node.role) === "rowgroup" ? node === null || node === void 0 ? void 0 : (_node$children$item = node.children.item(0)) === null || _node$children$item === void 0 ? void 0 : _node$children$item.children.item(0) : node === null || node === void 0 ? void 0 : node.children.item(0);
+      if (node && firstChild instanceof HTMLElement) {
+        var offset = firstChild.offsetTop - this.asProps.headerHeight;
+        var height = firstChild.getBoundingClientRect().height;
+        if (expandedRows.has(row[UNIQ_ROW_KEY]) && node.nextSibling instanceof HTMLElement) {
+          height = height + node.nextSibling.getBoundingClientRect().height;
+        }
+        this.rowsHeightMap.set(index, [offset, offset + height, node]);
+      }
+    }
+  }]);
+  return BodyRoot2;
+}(Component);
+_defineProperty(BodyRoot, "displayName", "Body");
+_defineProperty(BodyRoot, "style", style);
+var Body = createComponent(BodyRoot, {
+  Row,
+  Cell
+});
+export {
+  Body
+};

package/lib/esm/components/Body/Cell.mjs

@@ -0,0 +1,186 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
+import * as React from "react";
+import { Flex } from "@semcore/base-components";
+import { getFocusableIn } from "@semcore/core/lib/utils/focus-lock/getFocusableIn";
+import { MergedColumnsCell, MergedRowsCell } from "./MergedCells.mjs";
+import { isFocusInside } from "@semcore/core/lib/utils/focus-lock/isFocusInside";
+/*!__reshadow-styles__:"./style.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SBody_1sflu_gg_,.___SRowGroup_1sflu_gg_,.___SRow_1sflu_gg_{display:contents}.___SBody_1sflu_gg_.__compact_1sflu_gg_ .___SCell_1sflu_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SBody_1sflu_gg_.__compact_1sflu_gg_ .___SCell_1sflu_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + (var(--intergalactic-spacing-5x, 20px)*(var(--data-aria-level_1sflu) - 1)))}.___SCell_1sflu_gg_.__gridArea_1sflu_gg_,.___SCollapseRow_1sflu_gg_.__gridArea_1sflu_gg_,.___SRow_1sflu_gg_.__gridArea_1sflu_gg_{grid-area:var(--gridArea_1sflu)}.___SCollapseRow_1sflu_gg_ .___SCell_1sflu_gg_{display:block}.___SRow_1sflu_gg_.__active_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_.__expanded_1sflu_gg_._accordionType_cell_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_).__withAccordion_1sflu_gg_,.___SRow_1sflu_gg_.__expanded_1sflu_gg_._accordionType_row_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-active, #e6e7ed)}.___SCollapseRow_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_.__expanded_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-accordion, #f4f5f9)}@media (hover:hover){.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_._theme_muted_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]._theme_muted_1sflu_gg_,.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_._theme_muted_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_._theme_muted_1sflu_gg_,.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_._theme_muted_1sflu_gg_:hover>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_:hover>.___SCell_1sflu_gg_._theme_muted_1sflu_gg_,.___SRow_1sflu_gg_:hover>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_._theme_info_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]._theme_info_1sflu_gg_,.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_._theme_info_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_._theme_info_1sflu_gg_,.___SRow_1sflu_gg_._theme_info_1sflu_gg_:hover>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_:hover>.___SCell_1sflu_gg_._theme_info_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-selected-hover, #c4e5fe)}.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_._theme_success_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]._theme_success_1sflu_gg_,.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_._theme_success_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_._theme_success_1sflu_gg_,.___SRow_1sflu_gg_._theme_success_1sflu_gg_:hover>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_:hover>.___SCell_1sflu_gg_._theme_success_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-new-hover, #9ef2c9)}.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_._theme_warning_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]._theme_warning_1sflu_gg_,.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_._theme_warning_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_._theme_warning_1sflu_gg_,.___SRow_1sflu_gg_._theme_warning_1sflu_gg_:hover>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_:hover>.___SCell_1sflu_gg_._theme_warning_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-warning-hover, #ffdca2)}.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_._theme_danger_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_[data-grouped-by=rowgroup]._theme_danger_1sflu_gg_,.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_._theme_danger_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRowGroup_1sflu_gg_:has(.___SCell_1sflu_gg_[data-grouped-by=rowgroup]:hover)>.___SRow_1sflu_gg_>.___SCell_1sflu_gg_._theme_danger_1sflu_gg_,.___SRow_1sflu_gg_._theme_danger_1sflu_gg_:hover>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_),.___SRow_1sflu_gg_:hover>.___SCell_1sflu_gg_._theme_danger_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-critical-hover, #ffd7df)}}.___SRow_1sflu_gg_._theme_muted_1sflu_gg_ .___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}.___SRow_1sflu_gg_._theme_muted_1sflu_gg_.__active_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-active, #e6e7ed)}.___SRow_1sflu_gg_._theme_info_1sflu_gg_ .___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SRow_1sflu_gg_._theme_info_1sflu_gg_.__active_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-selected-active, #c4e5fe)}.___SRow_1sflu_gg_._theme_success_1sflu_gg_ .___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SRow_1sflu_gg_._theme_success_1sflu_gg_.__active_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-new-active, #9ef2c9)}.___SRow_1sflu_gg_._theme_warning_1sflu_gg_ .___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SRow_1sflu_gg_._theme_warning_1sflu_gg_.__active_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-warning-active, #ffdca2)}.___SRow_1sflu_gg_._theme_danger_1sflu_gg_ .___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SRow_1sflu_gg_._theme_danger_1sflu_gg_.__active_1sflu_gg_>.___SCell_1sflu_gg_:not(.__theme_1sflu_gg_){background-color:var(--intergalactic-table-td-cell-critical-active, #ffd7df)}.___SCell_1sflu_gg_{display:flex;height:100%;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:pre-wrap;word-break:break-word;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_1sflu_gg_ .___SAccordionToggle_1sflu_gg_{margin-right:var(--intergalactic-spacing-3x, 12px);margin-top:var(--intergalactic-spacing-05x, 2px);height:-moz-fit-content;height:fit-content}.___SCell_1sflu_gg_ .___SAccordionToggle_1sflu_gg_ svg{transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SCell_1sflu_gg_ .___SAccordionToggle_1sflu_gg_.__expanded_1sflu_gg_ svg{transform:rotate(90deg)}.___SCheckboxCell_1sflu_gg_,.___SRow_1sflu_gg_._accordionType_cell_1sflu_gg_>.___SCell_1sflu_gg_.__withAccordion_1sflu_gg_,.___SRow_1sflu_gg_._accordionType_row_1sflu_gg_>.___SCell_1sflu_gg_{cursor:pointer}.___SCell_1sflu_gg_._use_primary_1sflu_gg_{padding:var(--intergalactic-spacing-3x, 12px);min-height:45px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1sflu_gg_._use_primary_1sflu_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-3x, 12px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-2x, 8px))*(var(--data-aria-level_1sflu) - 1)))}.___SCell_1sflu_gg_._use_secondary_1sflu_gg_{padding:var(--intergalactic-spacing-2x, 8px);min-height:37px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1sflu_gg_._use_secondary_1sflu_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-2x, 8px))*(var(--data-aria-level_1sflu) - 1)))}.___SCell_1sflu_gg_._borders_both_1sflu_gg_,.___SCell_1sflu_gg_._borders_left_1sflu_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1sflu_gg_._borders_both_1sflu_gg_,.___SCell_1sflu_gg_._borders_right_1sflu_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1sflu_gg_.__fixed_1sflu_gg_{position:sticky;z-index:2}.___SCell_1sflu_gg_._theme_muted_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}.___SCell_1sflu_gg_._theme_info_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SCell_1sflu_gg_._theme_success_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SCell_1sflu_gg_._theme_warning_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SCell_1sflu_gg_._theme_danger_1sflu_gg_{background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SSpinContainer_1sflu_gg_{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;align-items:center;justify-content:center;background-color:var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85))}.___SSpinContainer_1sflu_gg_.__headerHeight_1sflu_gg_{top:var(--headerHeight_1sflu)}.___SEmptyData_1sflu_gg_{grid-column:1/-1}.___SRow_1sflu_gg_._sideIndents_wide_1sflu_gg_ .___SCell_1sflu_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SRow_1sflu_gg_._sideIndents_wide_1sflu_gg_ .___SCell_1sflu_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}',
+    /*__inner_css_end__*/
+    "1sflu_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SBody": "___SBody_1sflu_gg_",
+    "__SRow": "___SRow_1sflu_gg_",
+    "__SRowGroup": "___SRowGroup_1sflu_gg_",
+    "_gridArea": "__gridArea_1sflu_gg_",
+    "__SCell": "___SCell_1sflu_gg_",
+    "__SCollapseRow": "___SCollapseRow_1sflu_gg_",
+    "--gridArea": "--gridArea_1sflu",
+    "_active": "__active_1sflu_gg_",
+    "_theme": "__theme_1sflu_gg_",
+    "_expanded": "__expanded_1sflu_gg_",
+    "_accordionType_row": "_accordionType_row_1sflu_gg_",
+    "_accordionType_cell": "_accordionType_cell_1sflu_gg_",
+    "_withAccordion": "__withAccordion_1sflu_gg_",
+    "_theme_muted": "_theme_muted_1sflu_gg_",
+    "_theme_info": "_theme_info_1sflu_gg_",
+    "_theme_success": "_theme_success_1sflu_gg_",
+    "_theme_warning": "_theme_warning_1sflu_gg_",
+    "_theme_danger": "_theme_danger_1sflu_gg_",
+    "__SCheckboxCell": "___SCheckboxCell_1sflu_gg_",
+    "_borders_both": "_borders_both_1sflu_gg_",
+    "_borders_left": "_borders_left_1sflu_gg_",
+    "_borders_right": "_borders_right_1sflu_gg_",
+    "_fixed": "__fixed_1sflu_gg_",
+    "__SSpinContainer": "___SSpinContainer_1sflu_gg_",
+    "_headerHeight": "__headerHeight_1sflu_gg_",
+    "--headerHeight": "--headerHeight_1sflu",
+    "__SEmptyData": "___SEmptyData_1sflu_gg_",
+    "_compact": "__compact_1sflu_gg_",
+    "--data-aria-level": "--data-aria-level_1sflu",
+    "__SAccordionToggle": "___SAccordionToggle_1sflu_gg_",
+    "_use_primary": "_use_primary_1sflu_gg_",
+    "_use_secondary": "_use_secondary_1sflu_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_1sflu_gg_"
+  })
+);
+var CellRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(CellRoot2, _Component);
+  var _super = _createSuper(CellRoot2);
+  function CellRoot2() {
+    var _this;
+    _classCallCheck(this, CellRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "cellRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "lockedCell", [null, false]);
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(e) {
+      if (e.currentTarget === _this.lockedCell[0]) {
+        var focusableChildren = Array.from(_this.lockedCell[0].children).flatMap(function(node) {
+          return getFocusableIn(node);
+        });
+        if (_this.lockedCell[1]) {
+          if (e.key === "Escape") {
+            var _this$lockedCell$;
+            (_this$lockedCell$ = _this.lockedCell[0]) === null || _this$lockedCell$ === void 0 ? void 0 : _this$lockedCell$.focus();
+            _this.lockedCell[1] = false;
+          }
+          if (e.key.startsWith("Arrow")) {
+            e.stopPropagation();
+            e.preventDefault();
+          }
+          if (e.key === "Tab") {
+            if (e.target === focusableChildren[0] && e.shiftKey) {
+              var _focusableChildren;
+              (_focusableChildren = focusableChildren[focusableChildren.length - 1]) === null || _focusableChildren === void 0 ? void 0 : _focusableChildren.focus();
+              e.preventDefault();
+            } else if (e.target === focusableChildren[focusableChildren.length - 1] && !e.shiftKey) {
+              var _focusableChildren$;
+              (_focusableChildren$ = focusableChildren[0]) === null || _focusableChildren$ === void 0 ? void 0 : _focusableChildren$.focus();
+              e.preventDefault();
+            }
+            e.stopPropagation();
+          }
+        } else if (e.key === "Enter") {
+          var _focusableChildren$2;
+          e.preventDefault();
+          e.stopPropagation();
+          _this.lockedCell[1] = true;
+          (_focusableChildren$2 = focusableChildren[0]) === null || _focusableChildren$2 === void 0 ? void 0 : _focusableChildren$2.focus();
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onFocusCell", function(e) {
+      if (e.target === e.currentTarget && e.target.matches(":focus-visible")) {
+        e.target.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "center"
+        });
+        var focusableChildren = Array.from(e.currentTarget.children).flatMap(function(node) {
+          return getFocusableIn(node);
+        });
+        if (focusableChildren.length === 1) {
+          focusableChildren[0].focus();
+        } else if (focusableChildren.length > 1) {
+          _this.lockedCell = [e.currentTarget, false];
+        }
+      }
+    });
+    return _this;
+  }
+  _createClass(CellRoot2, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$asProps = this.asProps, virtualScroll = _this$asProps.virtualScroll, tableRef = _this$asProps.tableRef;
+      if (virtualScroll && this.cellRef.current && isFocusInside(this.cellRef.current)) {
+        var _tableRef$current;
+        (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.setAttribute("tabIndex", "0");
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SCell = Flex;
+      var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, styles = _this$asProps2.styles, row = _this$asProps2.row, column = _this$asProps2.column, columnIndex = _this$asProps2.columnIndex, gridRowIndex = _this$asProps2.gridRowIndex;
+      var cell = row[column.name];
+      var cellName = cell instanceof MergedColumnsCell ? cell.dataKey : column.name;
+      var scope = null;
+      var gridArea = void 0;
+      var fromRow = gridRowIndex;
+      var fromCol = columnIndex + 1;
+      if (cell instanceof MergedColumnsCell) {
+        gridArea = "".concat(fromRow, " / ").concat(fromCol, " / ").concat(fromRow + 1, " / ").concat(fromCol + cell.columnsCount);
+        scope = "colgroup";
+      } else if (cell instanceof MergedRowsCell) {
+        gridArea = "".concat(fromRow, " / ").concat(fromCol, " / ").concat(fromRow + cell.rowsCount, " / ").concat(fromCol + 1);
+        scope = "rowgroup";
+      } else {
+        gridArea = "".concat(fromRow, " / ").concat(fromCol, " / ").concat(fromRow + 1, " / ").concat(fromCol + 1);
+      }
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SCell, _ref2.cn("SCell", _objectSpread({}, assignProps({
+        "ref": this.cellRef,
+        "innerOutline": true,
+        "tabIndex": -1,
+        "onKeyDown": this.handleKeyDown,
+        "onFocus": this.onFocusCell,
+        "name": cellName,
+        "role": "gridcell",
+        "aria-colindex": columnIndex + 1,
+        "data-grouped-by": scope,
+        "scope": scope,
+        "aria-colspan": cell instanceof MergedColumnsCell ? cell.columnsCount : void 0,
+        "aria-rowspan": cell instanceof MergedRowsCell ? cell.rowsCount : void 0,
+        "gridArea": gridArea,
+        "borders": column.borders,
+        "flexWrap": column.flexWrap,
+        "alignItems": column.alignItems,
+        "alignContent": column.alignContent,
+        "justifyContent": column.justifyContent,
+        "fixed": column.fixed
+      }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})));
+    }
+  }]);
+  return CellRoot2;
+}(Component);
+_defineProperty(CellRoot, "displayName", "Cell");
+_defineProperty(CellRoot, "style", style);
+var Cell = createComponent(CellRoot);
+export {
+  Cell
+};

package/lib/esm/components/Body/MergedCells.mjs

@@ -0,0 +1,23 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var MergedRowsCell = /* @__PURE__ */ _createClass(function MergedRowsCell2(value, rowsCount) {
+  _classCallCheck(this, MergedRowsCell2);
+  _defineProperty(this, "value", void 0);
+  _defineProperty(this, "rowsCount", void 0);
+  this.value = value;
+  this.rowsCount = rowsCount;
+});
+var MergedColumnsCell = /* @__PURE__ */ _createClass(function MergedColumnsCell2(value, options) {
+  _classCallCheck(this, MergedColumnsCell2);
+  _defineProperty(this, "value", void 0);
+  _defineProperty(this, "columnsCount", void 0);
+  _defineProperty(this, "dataKey", void 0);
+  this.value = value;
+  this.columnsCount = options.size;
+  this.dataKey = options.dataKey;
+});
+export {
+  MergedColumnsCell,
+  MergedRowsCell
+};