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

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

@@ -0,0 +1,224 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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, Collapse } from "@semcore/base-components";
+import { Body } from "./Body.mjs";
+import { ACCORDION, SELECT_ALL } from "../DataTable/DataTable.mjs";
+import { MergedRowsCell, MergedColumnsCell } from "./MergedCells.mjs";
+import Checkbox from "@semcore/checkbox";
+/*!__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 RowRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(RowRoot2, _Component);
+  var _super = _createSuper(RowRoot2);
+  function RowRoot2() {
+    var _this;
+    _classCallCheck(this, RowRoot2);
+    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), "cellIndex", -1);
+    _defineProperty(_assertThisInitialized(_this), "handleSelectRow", function(value, event) {
+      var _this$asProps = _this.asProps, row = _this$asProps.row, rowIndex = _this$asProps.rowIndex, onSelectRow = _this$asProps.onSelectRow;
+      onSelectRow === null || onSelectRow === void 0 ? void 0 : onSelectRow(value, rowIndex, row, event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleClickCheckbox", function(value) {
+      return function(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        var _this$asProps2 = _this.asProps, row = _this$asProps2.row, rowIndex = _this$asProps2.rowIndex, onSelectRow = _this$asProps2.onSelectRow;
+        onSelectRow === null || onSelectRow === void 0 ? void 0 : onSelectRow(value, rowIndex, row, event);
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleBackFromAccordion", function(e) {
+      if (e.key === "Escape") {
+        _this.asProps.onBackFromAccordion(_this.cellIndex);
+      }
+    });
+    return _this;
+  }
+  _createClass(RowRoot2, [{
+    key: "cellHasAccordion",
+    value: function cellHasAccordion(cellValue) {
+      return !(cellValue instanceof MergedRowsCell || cellValue instanceof MergedColumnsCell) && Boolean(cellValue === null || cellValue === void 0 ? void 0 : cellValue[ACCORDION]);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2, _this2 = this, _scrollAreaRef$curren, _row$ACCORDION;
+      var SRow = Box;
+      var SCollapseRow = Collapse;
+      var SCell = Body.Cell;
+      var SCheckboxCell = Body.Cell;
+      var _this$asProps3 = this.asProps, columns = _this$asProps3.columns, row = _this$asProps3.row, styles = _this$asProps3.styles, rowIndex = _this$asProps3.rowIndex, ariaRowIndex = _this$asProps3.ariaRowIndex, gridRowIndex = _this$asProps3.gridRowIndex, expanded = _this$asProps3.expanded, accordionDataGridArea = _this$asProps3.accordionDataGridArea;
+      _this$asProps3.expandedRows;
+      _this$asProps3.onExpandRow;
+      var _this$asProps3$ariaL = _this$asProps3["aria-level"], ariaLevel = _this$asProps3$ariaL === void 0 ? 1 : _this$asProps3$ariaL, scrollAreaRef = _this$asProps3.scrollAreaRef, selectedRows = _this$asProps3.selectedRows, uid = _this$asProps3.uid, getFixedStyle = _this$asProps3.getFixedStyle;
+      var accordion = row[ACCORDION];
+      var accordionType = accordion ? "row" : void 0;
+      if (!accordion) {
+        var cells = Object.values(row);
+        var cellWithAccordionIndex = cells.findIndex(function(value) {
+          return _this2.cellHasAccordion(value);
+        });
+        this.cellIndex = cellWithAccordionIndex;
+        var cellWithAccordion = cells[cellWithAccordionIndex];
+        accordion = cellWithAccordion === null || cellWithAccordion === void 0 ? void 0 : cellWithAccordion[ACCORDION];
+        accordionType = "cell";
+      }
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SRow, _ref2.cn("SRow", _objectSpread({}, assignProps({
+        "role": "row",
+        "aria-rowindex": ariaRowIndex,
+        "accordionType": accordionType,
+        "theme": selectedRows !== null && selectedRows !== void 0 && selectedRows.includes(rowIndex) ? "info" : void 0
+      }, _ref))), columns.map(function(column, i) {
+        if (selectedRows && i === 0) {
+          var _ref3;
+          var checked = selectedRows.includes(rowIndex);
+          return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SCheckboxCell, _ref3.cn("SCheckboxCell", {
+            "key": i,
+            "row": row,
+            "rowIndex": rowIndex,
+            "column": {
+              name: SELECT_ALL.toString()
+            },
+            "columnIndex": 0,
+            "gridRowIndex": gridRowIndex,
+            "onClick": _this2.handleClickCheckbox(!checked)
+          }), /* @__PURE__ */ React.createElement(Checkbox, _ref3.cn("Checkbox", {
+            "checked": checked,
+            "aria-labelledby": "".concat(uid, "_").concat(ariaRowIndex, "_1"),
+            "onChange": _this2.handleSelectRow
+          })));
+        }
+        var index = i;
+        var cellValue = row[column.name];
+        if (cellValue === void 0) {
+          return null;
+        }
+        var style2 = {};
+        if (column.fixed) {
+          var _getFixedStyle = getFixedStyle(column), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
+          if (name !== void 0 && value !== void 0) {
+            style2[name] = value;
+          }
+        }
+        return /* @__PURE__ */ React.createElement(Body.Cell, {
+          key: index,
+          id: "".concat(uid, "_").concat(ariaRowIndex, "_").concat(index),
+          accordionId: "".concat(uid, "_").concat(ariaRowIndex + 1),
+          "data-aria-level": index === 0 ? ariaLevel : void 0,
+          row,
+          rowIndex,
+          gridRowIndex,
+          columnIndex: index,
+          style: style2,
+          column,
+          withAccordion: _this2.cellHasAccordion(cellValue)
+        });
+      })), /* @__PURE__ */ React.isValidElement(accordion) && /* @__PURE__ */ React.createElement(SCollapseRow, _ref2.cn("SCollapseRow", {
+        "key": rowIndex,
+        "role": "row",
+        "aria-rowindex": ariaRowIndex + 1,
+        "id": "".concat(uid, "_").concat(ariaRowIndex + 1),
+        "visible": expanded,
+        "interactive": true,
+        "gridArea": accordionDataGridArea,
+        "duration": 200,
+        "zIndex": 5
+      }), /* @__PURE__ */ React.createElement(SCell, _ref2.cn("SCell", {
+        "aria-colindex": 1,
+        "aria-level": ariaLevel + 1,
+        "aria-setsize": 1,
+        "aria-posinset": 1,
+        "row": row,
+        "rowIndex": rowIndex + 1,
+        "columnIndex": 1,
+        "column": {
+          name: ACCORDION
+        },
+        "position": "sticky",
+        "left": 0,
+        "w": (_scrollAreaRef$curren = scrollAreaRef.current) === null || _scrollAreaRef$curren === void 0 ? void 0 : _scrollAreaRef$curren.clientWidth,
+        "onKeyDown": this.handleBackFromAccordion
+      }), accordion)), row[ACCORDION] && Array.isArray(row[ACCORDION]) && expanded && ((_row$ACCORDION = row[ACCORDION]) === null || _row$ACCORDION === void 0 ? void 0 : _row$ACCORDION.map(function(subrow, i) {
+        return /* @__PURE__ */ React.createElement(Row, {
+          key: i,
+          row: subrow,
+          columns,
+          rows: row[ACCORDION],
+          rowIndex,
+          "aria-posinset": i + 1,
+          "aria-level": ariaLevel + 1,
+          ariaRowIndex: ariaRowIndex + 1 + i,
+          gridRowIndex: gridRowIndex + 1 + i,
+          expanded: true,
+          getFixedStyle
+        });
+      })));
+    }
+  }]);
+  return RowRoot2;
+}(Component);
+_defineProperty(RowRoot, "displayName", "Row");
+_defineProperty(RowRoot, "style", style);
+_defineProperty(RowRoot, "defaultProps", {
+  "aria-level": void 0
+});
+var Row = createComponent(RowRoot, {}, {
+  parent: Body
+});
+export {
+  Row
+};

package/lib/esm/components/Body/style.shadow.css

@@ -0,0 +1,263 @@
+SBody, SRow, SRowGroup {
+  display: contents;
+}
+
+SBody[compact] {
+  SCell {
+    padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px);
+  }
+
+  SCell[data-aria-level] {
+    padding-left: calc(var(--intergalactic-spacing-2x, 8px) + (var(--intergalactic-spacing-5x, 20px) * (var(--data-aria-level) - 1)));
+  }
+}
+
+SRow[gridArea], SCell[gridArea], SCollapseRow[gridArea] {
+  grid-area: var(--gridArea);
+}
+
+SCollapseRow SCell {
+  display: block;
+}
+
+/* DEFAULT THEME */
+SRow[active] > SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+}
+
+SRow[expanded][accordionType='row'] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+}
+
+SRow[expanded][accordionType='cell'] > SCell:not([theme])[withAccordion] {
+  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+}
+
+SCollapseRow > SCell:not([theme]), SRow[expanded] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-accordion, #f4f5f9);
+}
+
+/* we need a media query here because of the postcssHoverMediaFeature plugin. it doesn't handle this type of selectors correctly */
+@media (hover: hover) {
+  SRow:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+  }
+
+  /* MUTED THEME */
+  SRow:hover > SCell[theme='muted'],
+  SRow[theme='muted']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='muted'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='muted'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='muted'],
+  SRowGroup:has(SCell:hover) > SRow[theme='muted'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    /* The color is hardcoded because need hex(in figma rgba) */
+    /* disable-tokens-validator */
+    background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+  }
+
+  /* INFO THEME */
+  SRow:hover > SCell[theme='info'],
+  SRow[theme='info']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='info'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='info'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='info'],
+  SRowGroup:has(SCell:hover) > SRow[theme='info'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-selected-hover, #c4e5fe);
+  }
+
+  /* SUCCESS THEME */
+  SRow:hover > SCell[theme='success'],
+  SRow[theme='success']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='success'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='success'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='success'],
+  SRowGroup:has(SCell:hover) > SRow[theme='success'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-new-hover, #9ef2c9);
+  }
+
+  /* WARNING THEME */
+  SRow:hover > SCell[theme='warning'],
+  SRow[theme='warning']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='warning'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='warning'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='warning'],
+  SRowGroup:has(SCell:hover) > SRow[theme='warning'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-warning-hover, #ffdca2);
+  }
+
+  /* DANGER THEME */
+  SRow:hover > SCell[theme='danger'],
+  SRow[theme='danger']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='danger'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='danger'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='danger'],
+  SRowGroup:has(SCell:hover) > SRow[theme='danger'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-critical-hover, #ffd7df);
+  }
+}
+
+/* MUTED THEME */
+SRow[theme='muted'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
+}
+
+SRow[theme='muted'][active] > SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+}
+
+/* INFO THEME */
+SRow[theme='info'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
+}
+
+SRow[theme='info'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-selected-active, #c4e5fe);
+}
+
+/* SUCCESS THEME */
+SRow[theme='success'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
+}
+
+SRow[theme='success'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-new-active, #9ef2c9);
+}
+
+/* WARNING THEME */
+SRow[theme='warning'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+}
+
+SRow[theme='warning'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-warning-active, #ffdca2);
+}
+
+/* DANGER THEME */
+SRow[theme='danger'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+}
+
+SRow[theme='danger'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-critical-active, #ffd7df);
+}
+
+SCell {
+  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-variant-numeric: tabular-nums;
+  transition: width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
+  outline: none;
+
+  SAccordionToggle {
+    margin-right: var(--intergalactic-spacing-3x, 12px);
+    margin-top: var(--intergalactic-spacing-05x, 2px);
+    height: fit-content;
+
+    svg {
+      transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out;
+    }
+
+    &[expanded] svg {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+SRow[accordionType='row'] > SCell, SRow[accordionType='cell'] > SCell[withAccordion], SCheckboxCell {
+  cursor: pointer;
+}
+
+SCell[use='primary'] {
+  padding: var(--intergalactic-spacing-3x, 12px);
+  min-height: 45px;
+  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+
+  &[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) - 1)));
+  }
+}
+
+SCell[use='secondary'] {
+  padding: var(--intergalactic-spacing-2x, 8px);
+  min-height: 37px;
+  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+
+  &[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) - 1)));
+  }
+}
+
+SCell[borders='both'], SCell[borders='left'] {
+  border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+SCell[borders='both'], SCell[borders='right'] {
+  border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+SCell[fixed] {
+  position: sticky;
+  z-index: 2;
+}
+
+SCell[theme='muted'] {
+  background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
+}
+
+SCell[theme='info'] {
+  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
+}
+
+SCell[theme='success'] {
+  background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
+}
+
+SCell[theme='warning'] {
+  background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+}
+
+SCell[theme='danger'] {
+  background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+}
+
+SSpinContainer {
+  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[headerHeight] {
+  top: var(--headerHeight);
+}
+
+SEmptyData {
+  grid-column: 1 / -1;
+}
+
+SRow[sideIndents='wide'] {
+  SCell:first-child {
+    padding-left: var(--intergalactic-spacing-5x, 20px);
+  }
+  SCell:last-child {
+    padding-right: var(--intergalactic-spacing-5x, 20px);
+  }
+}