@semcore/data-table 16.0.0-prerelease.12 → 16.0.0-prerelease.14

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

@@ -0,0 +1,195 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 { MergedRowsCell, MergedColumnsCell } from "./MergedCells.mjs";
+import { ACCORDION } from "../DataTable/DataTable.mjs";
+import ChevronRightM from "@semcore/icon/ChevronRight/m";
+import { ButtonLink } from "@semcore/button";
+import Spin from "@semcore/spin";
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SBody_1q19z_gg_,.___SRow_1q19z_gg_{display:contents}.___SBody_1q19z_gg_.__compact_1q19z_gg_ .___SCell_1q19z_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SCell_1q19z_gg_.__gridArea_1q19z_gg_,.___SCollapseRow_1q19z_gg_.__gridArea_1q19z_gg_,.___SRow_1q19z_gg_.__gridArea_1q19z_gg_{grid-area:var(--gridArea_1q19z)}.___SRow_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_._theme_muted_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-active, #e6e7ed)}@media (hover:hover){.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}}.___SRow_1q19z_gg_._theme_muted_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}@media (hover:hover){.___SRow_1q19z_gg_._theme_muted_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_muted_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}}.___SRow_1q19z_gg_._theme_info_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SRow_1q19z_gg_._theme_info_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-selected-active, #c4e5fe)}@media (hover:hover){.___SRow_1q19z_gg_._theme_info_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_info_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-selected-hover, #c4e5fe)}}.___SRow_1q19z_gg_._theme_success_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SRow_1q19z_gg_._theme_success_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-new-active, #9ef2c9)}@media (hover:hover){.___SRow_1q19z_gg_._theme_success_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_success_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-new-hover, #9ef2c9)}}.___SRow_1q19z_gg_._theme_warning_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SRow_1q19z_gg_._theme_warning_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-warning-active, #ffdca2)}@media (hover:hover){.___SRow_1q19z_gg_._theme_warning_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_warning_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-warning-hover, #ffdca2)}}.___SRow_1q19z_gg_._theme_danger_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SRow_1q19z_gg_._theme_danger_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-critical-active, #ffd7df)}@media (hover:hover){.___SRow_1q19z_gg_._theme_danger_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_danger_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-critical-hover, #ffd7df)}}.___SCell_1q19z_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_1q19z_gg_ .___SAccordionToggle_1q19z_gg_{transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SCell_1q19z_gg_ .___SAccordionToggle_1q19z_gg_.__expanded_1q19z_gg_{transform:rotate(90deg)}.___SCell_1q19z_gg_._use_primary_1q19z_gg_{padding:var(--intergalactic-spacing-3x, 12px);min-height:45px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1q19z_gg_._use_primary_1q19z_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-3x, 12px) + (var(--intergalactic-spacing-5x, 20px)*(var(--data-aria-level_1q19z) - 1)))}.___SCell_1q19z_gg_._use_secondary_1q19z_gg_{padding:var(--intergalactic-spacing-2x, 8px);min-height:37px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1q19z_gg_._use_secondary_1q19z_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + (var(--intergalactic-spacing-5x, 20px)*(var(--data-aria-level_1q19z) - 1)))}.___SCell_1q19z_gg_._borders_both_1q19z_gg_,.___SCell_1q19z_gg_._borders_left_1q19z_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1q19z_gg_._borders_both_1q19z_gg_,.___SCell_1q19z_gg_._borders_right_1q19z_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1q19z_gg_.__fixed_1q19z_gg_{position:sticky;z-index:2}.___SCell_1q19z_gg_._theme_muted_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}.___SCell_1q19z_gg_._theme_info_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SCell_1q19z_gg_._theme_success_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SCell_1q19z_gg_._theme_warning_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SCell_1q19z_gg_._theme_danger_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SSpinContainer_1q19z_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_1q19z_gg_.__headerHeight_1q19z_gg_{top:var(--headerHeight_1q19z)}',
+    "1q19z_gg_"
+  ), {
+    "__SBody": "___SBody_1q19z_gg_",
+    "__SRow": "___SRow_1q19z_gg_",
+    "_compact": "__compact_1q19z_gg_",
+    "__SCell": "___SCell_1q19z_gg_",
+    "_gridArea": "__gridArea_1q19z_gg_",
+    "__SCollapseRow": "___SCollapseRow_1q19z_gg_",
+    "--gridArea": "--gridArea_1q19z",
+    "_active": "__active_1q19z_gg_",
+    "_theme": "__theme_1q19z_gg_",
+    "_theme_muted": "_theme_muted_1q19z_gg_",
+    "_theme_info": "_theme_info_1q19z_gg_",
+    "_theme_success": "_theme_success_1q19z_gg_",
+    "_theme_warning": "_theme_warning_1q19z_gg_",
+    "_theme_danger": "_theme_danger_1q19z_gg_",
+    "_borders_both": "_borders_both_1q19z_gg_",
+    "_borders_left": "_borders_left_1q19z_gg_",
+    "_borders_right": "_borders_right_1q19z_gg_",
+    "_fixed": "__fixed_1q19z_gg_",
+    "__SSpinContainer": "___SSpinContainer_1q19z_gg_",
+    "_headerHeight": "__headerHeight_1q19z_gg_",
+    "--headerHeight": "--headerHeight_1q19z",
+    "__SAccordionToggle": "___SAccordionToggle_1q19z_gg_",
+    "_expanded": "__expanded_1q19z_gg_",
+    "_use_primary": "_use_primary_1q19z_gg_",
+    "--data-aria-level": "--data-aria-level_1q19z",
+    "_use_secondary": "_use_secondary_1q19z_gg_"
+  })
+);
+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), "onExpandRow", function(expandedRowIndex) {
+      var expandedRows = _this.asProps.expandedRows;
+      if (expandedRows !== null && expandedRows !== void 0 && expandedRows.includes(expandedRowIndex)) {
+        _this.handlers.expandedRows(expandedRows.filter(function(row) {
+          return row !== expandedRowIndex;
+        }));
+      } else {
+        _this.handlers.expandedRows([].concat(_toConsumableArray(expandedRows), [expandedRowIndex]));
+      }
+    });
+    return _this;
+  }
+  _createClass(BodyRoot2, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        expandedRows: []
+      };
+    }
+  }, {
+    key: "getRowProps",
+    value: function getRowProps(_, index) {
+      var _this$asProps = this.asProps, rows = _this$asProps.rows, use = _this$asProps.use, gridTemplateAreas = _this$asProps.gridTemplateAreas, gridTemplateColumns = _this$asProps.gridTemplateColumns, expandedRows = _this$asProps.expandedRows, columns = _this$asProps.columns, headerRows = _this$asProps.headerRows;
+      var row = rows[index];
+      var rowIndex = (expandedRows !== null && expandedRows !== void 0 ? expandedRows : []).reduce(function(acc, item) {
+        if (item < index) {
+          acc = acc + 1;
+        }
+        return acc;
+      }, index);
+      var accordionDataGridArea = Array.isArray(row[ACCORDION]) ? "".concat(rowIndex + headerRows + 2, " / 1 / ").concat(rowIndex + headerRows + 2 + row[ACCORDION].length, " / ").concat(columns.length + 1) : "".concat(rowIndex + headerRows + 2, " / 1 / ").concat(rowIndex + headerRows + 2, " / ").concat(columns.length + 1);
+      return {
+        use,
+        gridTemplateAreas,
+        gridTemplateColumns,
+        expanded: expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.includes(index),
+        accordionDataGridArea,
+        columns,
+        headerRows,
+        rowIndex: index,
+        rows
+      };
+    }
+  }, {
+    key: "getCellProps",
+    value: function getCellProps(props) {
+      var _this2 = this;
+      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;
+      var SAccordionToggle = ButtonLink;
+      var cellValue = props.row[props.name];
+      var value = "";
+      if (cellValue instanceof MergedRowsCell || cellValue instanceof MergedColumnsCell) {
+        value = cellValue.value;
+      } else {
+        value = cellValue;
+      }
+      var defaultRender = function defaultRender2() {
+        if (props.columnIndex === 0 && props.row[ACCORDION]) {
+          var _ref2;
+          return _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": expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.includes(props.rowIndex),
+            "onClick": function onClick() {
+              return _this2.onExpandRow(props.rowIndex);
+            },
+            "color": "--intergalactic-icon-primary-neutral"
+          }), /* @__PURE__ */ React.createElement(SAccordionToggle.Addon, {
+            tag: ChevronRightM
+          })), value);
+        }
+        return value;
+      };
+      return {
+        use,
+        children: renderCell ? renderCell({
+          name: props.name,
+          row: props.row,
+          column: props.column,
+          rowIndex: props.rowIndex,
+          columnIndex: props.columnIndex,
+          defaultRender,
+          value
+        }) : defaultRender()
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref3;
+      var SBody = Box;
+      var SSpinContainer = Box;
+      var _this$asProps3 = this.asProps, rows = _this$asProps3.rows;
+      _this$asProps3.columns;
+      var styles = _this$asProps3.styles;
+      _this$asProps3.headerRows;
+      var loading = _this$asProps3.loading, headerHeight = _this$asProps3.headerHeight;
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SBody, _ref3.cn("SBody", _objectSpread({}, assignProps({}, _ref))), rows.map(function(row, index) {
+        return (
+          // @ts-ignore
+          /* @__PURE__ */ React.createElement(Body.Row, {
+            key: index,
+            role: "row",
+            "aria-rowindex": index + 2,
+            row
+            // rows={rows}
+            // rowIndex={index}
+            // headerRows={headerRows}
+          })
+        );
+      }), loading && // @ts-ignore
+      /* @__PURE__ */ React.createElement(SSpinContainer, _ref3.cn("SSpinContainer", {
+        "aria-hidden": true,
+        "headerHeight": "".concat(headerHeight, "px")
+      }), /* @__PURE__ */ React.createElement(Spin, _ref3.cn("Spin", {
+        "size": "xxl"
+      }))));
+    }
+  }]);
+  return BodyRoot2;
+}(Component);
+_defineProperty(BodyRoot, "displayName", "Body");
+_defineProperty(BodyRoot, "style", style);
+_defineProperty(BodyRoot, "defaultProps", {
+  defaultExpandedRows: []
+});
+var Body = createComponent(BodyRoot, {
+  Row,
+  Cell
+});
+export {
+  Body
+};

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

@@ -0,0 +1,129 @@
+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";
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SBody_1q19z_gg_,.___SRow_1q19z_gg_{display:contents}.___SBody_1q19z_gg_.__compact_1q19z_gg_ .___SCell_1q19z_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SCell_1q19z_gg_.__gridArea_1q19z_gg_,.___SCollapseRow_1q19z_gg_.__gridArea_1q19z_gg_,.___SRow_1q19z_gg_.__gridArea_1q19z_gg_{grid-area:var(--gridArea_1q19z)}.___SRow_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_._theme_muted_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-active, #e6e7ed)}@media (hover:hover){.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}}.___SRow_1q19z_gg_._theme_muted_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}@media (hover:hover){.___SRow_1q19z_gg_._theme_muted_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_muted_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}}.___SRow_1q19z_gg_._theme_info_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SRow_1q19z_gg_._theme_info_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-selected-active, #c4e5fe)}@media (hover:hover){.___SRow_1q19z_gg_._theme_info_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_info_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-selected-hover, #c4e5fe)}}.___SRow_1q19z_gg_._theme_success_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SRow_1q19z_gg_._theme_success_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-new-active, #9ef2c9)}@media (hover:hover){.___SRow_1q19z_gg_._theme_success_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_success_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-new-hover, #9ef2c9)}}.___SRow_1q19z_gg_._theme_warning_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SRow_1q19z_gg_._theme_warning_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-warning-active, #ffdca2)}@media (hover:hover){.___SRow_1q19z_gg_._theme_warning_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_warning_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-warning-hover, #ffdca2)}}.___SRow_1q19z_gg_._theme_danger_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SRow_1q19z_gg_._theme_danger_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-critical-active, #ffd7df)}@media (hover:hover){.___SRow_1q19z_gg_._theme_danger_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_danger_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-critical-hover, #ffd7df)}}.___SCell_1q19z_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_1q19z_gg_ .___SAccordionToggle_1q19z_gg_{transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SCell_1q19z_gg_ .___SAccordionToggle_1q19z_gg_.__expanded_1q19z_gg_{transform:rotate(90deg)}.___SCell_1q19z_gg_._use_primary_1q19z_gg_{padding:var(--intergalactic-spacing-3x, 12px);min-height:45px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1q19z_gg_._use_primary_1q19z_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-3x, 12px) + (var(--intergalactic-spacing-5x, 20px)*(var(--data-aria-level_1q19z) - 1)))}.___SCell_1q19z_gg_._use_secondary_1q19z_gg_{padding:var(--intergalactic-spacing-2x, 8px);min-height:37px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1q19z_gg_._use_secondary_1q19z_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + (var(--intergalactic-spacing-5x, 20px)*(var(--data-aria-level_1q19z) - 1)))}.___SCell_1q19z_gg_._borders_both_1q19z_gg_,.___SCell_1q19z_gg_._borders_left_1q19z_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1q19z_gg_._borders_both_1q19z_gg_,.___SCell_1q19z_gg_._borders_right_1q19z_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1q19z_gg_.__fixed_1q19z_gg_{position:sticky;z-index:2}.___SCell_1q19z_gg_._theme_muted_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}.___SCell_1q19z_gg_._theme_info_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SCell_1q19z_gg_._theme_success_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SCell_1q19z_gg_._theme_warning_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SCell_1q19z_gg_._theme_danger_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SSpinContainer_1q19z_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_1q19z_gg_.__headerHeight_1q19z_gg_{top:var(--headerHeight_1q19z)}',
+    "1q19z_gg_"
+  ), {
+    "__SBody": "___SBody_1q19z_gg_",
+    "__SRow": "___SRow_1q19z_gg_",
+    "_compact": "__compact_1q19z_gg_",
+    "__SCell": "___SCell_1q19z_gg_",
+    "_gridArea": "__gridArea_1q19z_gg_",
+    "__SCollapseRow": "___SCollapseRow_1q19z_gg_",
+    "--gridArea": "--gridArea_1q19z",
+    "_active": "__active_1q19z_gg_",
+    "_theme": "__theme_1q19z_gg_",
+    "_theme_muted": "_theme_muted_1q19z_gg_",
+    "_theme_info": "_theme_info_1q19z_gg_",
+    "_theme_success": "_theme_success_1q19z_gg_",
+    "_theme_warning": "_theme_warning_1q19z_gg_",
+    "_theme_danger": "_theme_danger_1q19z_gg_",
+    "_borders_both": "_borders_both_1q19z_gg_",
+    "_borders_left": "_borders_left_1q19z_gg_",
+    "_borders_right": "_borders_right_1q19z_gg_",
+    "_fixed": "__fixed_1q19z_gg_",
+    "__SSpinContainer": "___SSpinContainer_1q19z_gg_",
+    "_headerHeight": "__headerHeight_1q19z_gg_",
+    "--headerHeight": "--headerHeight_1q19z",
+    "__SAccordionToggle": "___SAccordionToggle_1q19z_gg_",
+    "_expanded": "__expanded_1q19z_gg_",
+    "_use_primary": "_use_primary_1q19z_gg_",
+    "--data-aria-level": "--data-aria-level_1q19z",
+    "_use_secondary": "_use_secondary_1q19z_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), "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")) {
+        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: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SCell = Flex;
+      var _this$asProps = this.asProps, Children = _this$asProps.Children, styles = _this$asProps.styles;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SCell, _ref2.cn("SCell", _objectSpread({}, assignProps({
+        "tabIndex": -1,
+        "innerOutline": true,
+        "onKeyDown": this.handleKeyDown,
+        "onFocus": this.onFocusCell
+      }, _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,21 @@
+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, size) {
+  _classCallCheck(this, MergedRowsCell2);
+  _defineProperty(this, "value", void 0);
+  _defineProperty(this, "rowsCount", void 0);
+  this.value = value;
+  this.rowsCount = size;
+});
+var MergedColumnsCell = /* @__PURE__ */ _createClass(function MergedColumnsCell2(value, size) {
+  _classCallCheck(this, MergedColumnsCell2);
+  _defineProperty(this, "value", void 0);
+  _defineProperty(this, "columnsCount", void 0);
+  this.value = value;
+  this.columnsCount = size;
+});
+export {
+  MergedColumnsCell,
+  MergedRowsCell
+};

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

@@ -0,0 +1,193 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 { getFixedStyle } from "../../utils.mjs";
+import { MergedColumnsCell, MergedRowsCell } from "./MergedCells.mjs";
+import { ACCORDION } from "../DataTable/DataTable.mjs";
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SBody_1q19z_gg_,.___SRow_1q19z_gg_{display:contents}.___SBody_1q19z_gg_.__compact_1q19z_gg_ .___SCell_1q19z_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SCell_1q19z_gg_.__gridArea_1q19z_gg_,.___SCollapseRow_1q19z_gg_.__gridArea_1q19z_gg_,.___SRow_1q19z_gg_.__gridArea_1q19z_gg_{grid-area:var(--gridArea_1q19z)}.___SRow_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_._theme_muted_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-active, #e6e7ed)}@media (hover:hover){.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}}.___SRow_1q19z_gg_._theme_muted_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}@media (hover:hover){.___SRow_1q19z_gg_._theme_muted_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_muted_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-hover, #f0f0f4)}}.___SRow_1q19z_gg_._theme_info_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SRow_1q19z_gg_._theme_info_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-selected-active, #c4e5fe)}@media (hover:hover){.___SRow_1q19z_gg_._theme_info_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_info_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-selected-hover, #c4e5fe)}}.___SRow_1q19z_gg_._theme_success_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SRow_1q19z_gg_._theme_success_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-new-active, #9ef2c9)}@media (hover:hover){.___SRow_1q19z_gg_._theme_success_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_success_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-new-hover, #9ef2c9)}}.___SRow_1q19z_gg_._theme_warning_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SRow_1q19z_gg_._theme_warning_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-warning-active, #ffdca2)}@media (hover:hover){.___SRow_1q19z_gg_._theme_warning_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_warning_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-warning-hover, #ffdca2)}}.___SRow_1q19z_gg_._theme_danger_1q19z_gg_ .___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SRow_1q19z_gg_._theme_danger_1q19z_gg_.__active_1q19z_gg_>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_){background-color:var(--intergalactic-table-td-cell-critical-active, #ffd7df)}@media (hover:hover){.___SRow_1q19z_gg_._theme_danger_1q19z_gg_:hover>.___SCell_1q19z_gg_:not(.__theme_1q19z_gg_),.___SRow_1q19z_gg_:hover>.___SCell_1q19z_gg_._theme_danger_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-critical-hover, #ffd7df)}}.___SCell_1q19z_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_1q19z_gg_ .___SAccordionToggle_1q19z_gg_{transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SCell_1q19z_gg_ .___SAccordionToggle_1q19z_gg_.__expanded_1q19z_gg_{transform:rotate(90deg)}.___SCell_1q19z_gg_._use_primary_1q19z_gg_{padding:var(--intergalactic-spacing-3x, 12px);min-height:45px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1q19z_gg_._use_primary_1q19z_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-3x, 12px) + (var(--intergalactic-spacing-5x, 20px)*(var(--data-aria-level_1q19z) - 1)))}.___SCell_1q19z_gg_._use_secondary_1q19z_gg_{padding:var(--intergalactic-spacing-2x, 8px);min-height:37px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SCell_1q19z_gg_._use_secondary_1q19z_gg_[data-aria-level]{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + (var(--intergalactic-spacing-5x, 20px)*(var(--data-aria-level_1q19z) - 1)))}.___SCell_1q19z_gg_._borders_both_1q19z_gg_,.___SCell_1q19z_gg_._borders_left_1q19z_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1q19z_gg_._borders_both_1q19z_gg_,.___SCell_1q19z_gg_._borders_right_1q19z_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SCell_1q19z_gg_.__fixed_1q19z_gg_{position:sticky;z-index:2}.___SCell_1q19z_gg_._theme_muted_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-unread, #f4f5f9)}.___SCell_1q19z_gg_._theme_info_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-selected, #e9f7ff)}.___SCell_1q19z_gg_._theme_success_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-new, #dbfee8)}.___SCell_1q19z_gg_._theme_warning_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-warning, #fff3d9)}.___SCell_1q19z_gg_._theme_danger_1q19z_gg_{background-color:var(--intergalactic-table-td-cell-critical, #fff0f7)}.___SSpinContainer_1q19z_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_1q19z_gg_.__headerHeight_1q19z_gg_{top:var(--headerHeight_1q19z)}',
+    "1q19z_gg_"
+  ), {
+    "__SBody": "___SBody_1q19z_gg_",
+    "__SRow": "___SRow_1q19z_gg_",
+    "_compact": "__compact_1q19z_gg_",
+    "__SCell": "___SCell_1q19z_gg_",
+    "_gridArea": "__gridArea_1q19z_gg_",
+    "__SCollapseRow": "___SCollapseRow_1q19z_gg_",
+    "--gridArea": "--gridArea_1q19z",
+    "_active": "__active_1q19z_gg_",
+    "_theme": "__theme_1q19z_gg_",
+    "_theme_muted": "_theme_muted_1q19z_gg_",
+    "_theme_info": "_theme_info_1q19z_gg_",
+    "_theme_success": "_theme_success_1q19z_gg_",
+    "_theme_warning": "_theme_warning_1q19z_gg_",
+    "_theme_danger": "_theme_danger_1q19z_gg_",
+    "_borders_both": "_borders_both_1q19z_gg_",
+    "_borders_left": "_borders_left_1q19z_gg_",
+    "_borders_right": "_borders_right_1q19z_gg_",
+    "_fixed": "__fixed_1q19z_gg_",
+    "__SSpinContainer": "___SSpinContainer_1q19z_gg_",
+    "_headerHeight": "__headerHeight_1q19z_gg_",
+    "--headerHeight": "--headerHeight_1q19z",
+    "__SAccordionToggle": "___SAccordionToggle_1q19z_gg_",
+    "_expanded": "__expanded_1q19z_gg_",
+    "_use_primary": "_use_primary_1q19z_gg_",
+    "--data-aria-level": "--data-aria-level_1q19z",
+    "_use_secondary": "_use_secondary_1q19z_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), "onExpandRow", function(expandedRowIndex) {
+      var expandedRows = _this.asProps.expandedRows;
+      if (expandedRows !== null && expandedRows !== void 0 && expandedRows.includes(expandedRowIndex)) {
+        _this.handlers.expandedRows(expandedRows.filter(function(row) {
+          return row !== expandedRowIndex;
+        }));
+      } else {
+        _this.handlers.expandedRows([].concat(_toConsumableArray(expandedRows), [expandedRowIndex]));
+      }
+    });
+    return _this;
+  }
+  _createClass(RowRoot2, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        expandedRows: []
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2, _row$ACCORDION, _this2 = this;
+      var SRow = Box;
+      var SCollapseRow = Collapse;
+      var _this$asProps = this.asProps, columns = _this$asProps.columns, row = _this$asProps.row, styles = _this$asProps.styles, rowIndex = _this$asProps.rowIndex, headerRows = _this$asProps.headerRows, expanded = _this$asProps.expanded, accordionDataGridArea = _this$asProps.accordionDataGridArea, _this$asProps$ariaLe = _this$asProps["aria-level"], ariaLevel = _this$asProps$ariaLe === void 0 ? 1 : _this$asProps$ariaLe;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SRow, _ref2.cn("SRow", _objectSpread({}, assignProps({}, _ref))), columns.map(function(column, i) {
+        var index = i;
+        var cellValue = row[column.name];
+        if (cellValue === void 0) {
+          return null;
+        }
+        var style2 = {};
+        if (column.fixed) {
+          var _getFixedStyle = getFixedStyle(column, columns), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
+          if (name !== void 0 && value !== void 0) {
+            style2[name] = value;
+          }
+        }
+        var groupedBy = null;
+        var gridArea = void 0;
+        if (cellValue instanceof MergedColumnsCell) {
+          gridArea = "".concat(rowIndex + headerRows + 1, " / ").concat(index + 1, " / ").concat(rowIndex + headerRows + 2, " / ").concat(index + 1 + cellValue.columnsCount);
+          groupedBy = "columns";
+        } else if (cellValue instanceof MergedRowsCell) {
+          gridArea = "".concat(rowIndex + headerRows + 1, " / ").concat(index + 1, " / ").concat(rowIndex + headerRows + 1 + cellValue.rowsCount, " / ").concat(index + 2);
+          groupedBy = "rows";
+        }
+        return /* @__PURE__ */ React.createElement(Body.Cell, {
+          key: index,
+          role: "gridcell",
+          "aria-colindex": index + 1,
+          "data-aria-level": index === 0 ? ariaLevel : void 0,
+          "data-grouped-by": groupedBy,
+          row,
+          rowIndex,
+          columnIndex: index,
+          fixed: column.fixed,
+          style: style2,
+          name: column.name,
+          column,
+          borders: column.borders,
+          flexWrap: column.flexWrap,
+          alignItems: column.alignItems,
+          alignContent: column.alignContent,
+          justifyContent: column.justifyContent,
+          gridArea
+        });
+      })), row[ACCORDION] && /* @__PURE__ */ React.isValidElement(row[ACCORDION]) && /* @__PURE__ */ React.createElement(SCollapseRow, _ref2.cn("SCollapseRow", {
+        "key": rowIndex,
+        "role": "row",
+        "aria-rowindex": rowIndex + 2,
+        "visible": expanded,
+        "interactive": true,
+        "gridArea": accordionDataGridArea,
+        "duration": 200,
+        "aria-level": ariaLevel + 1,
+        "aria-setsize": 1,
+        "aria-posinset": 1
+      }), row[ACCORDION]), row[ACCORDION] && Array.isArray(row[ACCORDION]) && expanded && // <SCollapseRow
+      //     key={rowIndex}
+      //     visible={expanded}
+      //     interactive
+      //     gridArea={accordionDataGridArea}
+      //     gridTemplateAreas={gridTemplateAreas}
+      //     gridTemplateColumns={gridTemplateColumns}
+      //     duration={200}
+      //     // onAnimationStart={(e: React.AnimationEvent<HTMLDivElement>) => {
+      //     //   const target = e.target;
+      //     //   if (target instanceof HTMLElement && this.asProps.expanded) {
+      //     //     target.style.setProperty('display', 'grid');
+      //     //   }
+      //     // }}
+      //     // onAnimationEnd={(e: React.AnimationEvent<HTMLDivElement>) => {
+      //     //   const target = e.target;
+      //     //   if (target instanceof HTMLElement && this.asProps.expanded) {
+      //     //     target.style.setProperty('display', 'contents');
+      //     //   }
+      //     // }}
+      // >
+      ((_row$ACCORDION = row[ACCORDION]) === null || _row$ACCORDION === void 0 ? void 0 : _row$ACCORDION.map(function(subrow, i) {
+        var _this2$asProps$expand;
+        return /* @__PURE__ */ React.createElement(Row, {
+          key: i,
+          row: subrow,
+          columns,
+          visible: expanded,
+          rows: row[ACCORDION],
+          rowIndex,
+          "aria-posinset": i + 1,
+          "aria-level": ariaLevel + 1,
+          headerRows,
+          expanded: (_this2$asProps$expand = _this2.asProps.expandedRows) === null || _this2$asProps$expand === void 0 ? void 0 : _this2$asProps$expand.includes(i),
+          onExpandRow: _this2.onExpandRow
+        });
+      })));
+    }
+  }]);
+  return RowRoot2;
+}(Component);
+_defineProperty(RowRoot, "displayName", "Row");
+_defineProperty(RowRoot, "style", style);
+_defineProperty(RowRoot, "defaultProps", {
+  "aria-level": void 0,
+  defaultExpandedRows: []
+});
+var Row = createComponent(RowRoot, {}, {
+  parent: Body
+});
+export {
+  Row
+};