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

package/lib/cjs/components/Body/Row.js

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Row = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@semcore/core");
+var React = _interopRequireWildcard(require("react"));
+var _baseComponents = require("@semcore/base-components");
+var _Body = require("./Body");
+var _utils = require("../../utils");
+var _MergedCells = require("./MergedCells");
+var _DataTable = require("../DataTable/DataTable");
+/*__reshadow-styles__:"./style.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_core.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)}" /*__inner_css_end__*/, "1q19z_gg_") /*__reshadow_css_end__*/, {
+  "__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) {
+  (0, _inherits2["default"])(RowRoot, _Component);
+  var _super = (0, _createSuper2["default"])(RowRoot);
+  function RowRoot() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, RowRoot);
+    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));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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((0, _toConsumableArray2["default"])(expandedRows), [expandedRowIndex]));
+      }
+    });
+    return _this;
+  }
+  (0, _createClass2["default"])(RowRoot, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        expandedRows: []
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2,
+        _row$ACCORDION,
+        _this2 = this;
+      var SRow = _baseComponents.Box;
+      var SCollapseRow = _baseComponents.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 = (0, _core.sstyled)(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SRow, _ref2.cn("SRow", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref))), columns.map(function (column, i) {
+        var index = i;
+        var cellValue = row[column.name];
+        if (cellValue === undefined) {
+          return null;
+        }
+        var style = {};
+        if (column.fixed) {
+          var _getFixedStyle = (0, _utils.getFixedStyle)(column, columns),
+            _getFixedStyle2 = (0, _slicedToArray2["default"])(_getFixedStyle, 2),
+            name = _getFixedStyle2[0],
+            value = _getFixedStyle2[1];
+          if (name !== undefined && value !== undefined) {
+            style[name] = value;
+          }
+        }
+        var groupedBy = null;
+        var gridArea = undefined;
+        if (cellValue instanceof _MergedCells.MergedColumnsCell) {
+          gridArea = "".concat(rowIndex + headerRows + 1, " / ").concat(index + 1, " / ").concat(rowIndex + headerRows + 2, " / ").concat(index + 1 + cellValue.columnsCount);
+          groupedBy = 'columns';
+        } else if (cellValue instanceof _MergedCells.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.Body.Cell, {
+          key: index,
+          role: 'gridcell',
+          "aria-colindex": index + 1,
+          "data-aria-level": index === 0 ? ariaLevel : undefined,
+          "data-grouped-by": groupedBy,
+          row: row,
+          rowIndex: rowIndex,
+          columnIndex: index,
+          fixed: column.fixed,
+          style: style,
+          name: column.name,
+          column: column,
+          borders: column.borders,
+          flexWrap: column.flexWrap,
+          alignItems: column.alignItems,
+          alignContent: column.alignContent,
+          justifyContent: column.justifyContent,
+          gridArea: gridArea
+        });
+      })), row[_DataTable.ACCORDION] && /*#__PURE__*/React.isValidElement(row[_DataTable.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[_DataTable.ACCORDION]), row[_DataTable.ACCORDION] && Array.isArray(row[_DataTable.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[_DataTable.ACCORDION]) === null || _row$ACCORDION === void 0 ? void 0 : _row$ACCORDION.map(function (subrow, i) {
+        var _this2$asProps$expand;
+        // const gridArea = `${rowIndex + headerRows + 2} / 1 / ${
+        //     rowIndex + headerRows + 2
+        // } / ${columns.length + 2}`;
+        return /*#__PURE__*/React.createElement(Row, {
+          key: i,
+          row: subrow,
+          columns: columns,
+          visible: expanded,
+          rows: row[_DataTable.ACCORDION],
+          rowIndex: rowIndex,
+          "aria-posinset": i + 1,
+          "aria-level": ariaLevel + 1,
+          headerRows: 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 RowRoot;
+}(_core.Component); // @ts-ignore
+(0, _defineProperty2["default"])(RowRoot, "displayName", 'Row');
+(0, _defineProperty2["default"])(RowRoot, "style", style);
+(0, _defineProperty2["default"])(RowRoot, "defaultProps", {
+  'aria-level': undefined,
+  defaultExpandedRows: []
+});
+var Row = (0, _core.createComponent)(RowRoot, {}, {
+  parent: _Body.Body
+});
+exports.Row = Row;
+//# sourceMappingURL=Row.js.map

package/lib/cjs/components/Body/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","names":["_core","require","React","_interopRequireWildcard","_baseComponents","_Body","_utils","_MergedCells","_DataTable","style","sstyled","insert","RowRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","expandedRowIndex","expandedRows","asProps","includes","handlers","filter","row","_toConsumableArray2","_createClass2","key","value","uncontrolledProps","render","_ref","_ref2","_row$ACCORDION","_this2","SRow","Box","SCollapseRow","Collapse","_this$asProps","columns","styles","rowIndex","headerRows","expanded","accordionDataGridArea","_this$asProps$ariaLe","ariaLevel","createElement","Fragment","cn","_objectSpread2","assignProps","map","column","i","index","cellValue","name","undefined","fixed","_getFixedStyle","getFixedStyle","_getFixedStyle2","_slicedToArray2","groupedBy","gridArea","MergedColumnsCell","columnsCount","MergedRowsCell","rowsCount","Body","Cell","role","columnIndex","borders","flexWrap","alignItems","alignContent","justifyContent","ACCORDION","isValidElement","isArray","subrow","_this2$asProps$expand","Row","visible","rows","onExpandRow","Component","defaultExpandedRows","createComponent","parent","exports"],"sources":["../../../../src/components/Body/Row.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Component, Root, sstyled, createComponent } from '@semcore/core';\nimport { DataTableRowProps, RowPropsInner } from './Row.types';\nimport { Box, Collapse } from '@semcore/base-components';\nimport style from './style.shadow.css';\nimport { Body } from './Body';\nimport { getFixedStyle } from '../../utils';\nimport { MergedColumnsCell, MergedRowsCell } from './MergedCells';\nimport { ACCORDION } from '../DataTable/DataTable';\n\nclass RowRoot extends Component<DataTableRowProps, {}, {}, [], RowPropsInner> {\n  static displayName = 'Row';\n  static style = style;\n\n  static defaultProps = {\n    'aria-level': undefined,\n    defaultExpandedRows: [],\n  };\n\n  uncontrolledProps() {\n    return {\n      expandedRows: [],\n    };\n  }\n\n  onExpandRow = (expandedRowIndex: number) => {\n    const { expandedRows } = this.asProps;\n    if (expandedRows?.includes(expandedRowIndex)) {\n      this.handlers.expandedRows(expandedRows.filter((row) => row !== expandedRowIndex));\n    } else {\n      this.handlers.expandedRows([...expandedRows!, expandedRowIndex]);\n    }\n  };\n\n  render() {\n    const SRow = Root;\n    const SCollapseRow = Collapse;\n    const {\n      columns,\n      row,\n      styles,\n      rowIndex,\n      headerRows,\n      expanded,\n      accordionDataGridArea,\n      'aria-level': ariaLevel = 1,\n    } = this.asProps;\n\n    return sstyled(styles)(\n      <>\n        <SRow render={Box}>\n          {columns.map((column, i) => {\n            const index = i;\n            const cellValue = row[column.name];\n\n            if (cellValue === undefined) {\n              return null;\n            }\n\n            const style: any = {};\n\n            if (column.fixed) {\n              const [name, value] = getFixedStyle(column, columns);\n\n              if (name !== undefined && value !== undefined) {\n                style[name] = value;\n              }\n            }\n\n            let groupedBy: null | 'rows' | 'columns' = null;\n            let gridArea: string | undefined = undefined;\n\n            if (cellValue instanceof MergedColumnsCell) {\n              gridArea = `${rowIndex + headerRows + 1} / ${index + 1} / ${\n                rowIndex + headerRows + 2\n              } / ${index + 1 + cellValue.columnsCount}`;\n              groupedBy = 'columns';\n            } else if (cellValue instanceof MergedRowsCell) {\n              gridArea = `${rowIndex + headerRows + 1} / ${index + 1} / ${\n                rowIndex + headerRows + 1 + cellValue.rowsCount\n              } / ${index + 2}`;\n              groupedBy = 'rows';\n            }\n\n            return (\n              <Body.Cell\n                key={index}\n                role={'gridcell'}\n                aria-colindex={index + 1}\n                data-aria-level={index === 0 ? ariaLevel : undefined}\n                data-grouped-by={groupedBy}\n                row={row}\n                rowIndex={rowIndex}\n                columnIndex={index}\n                fixed={column.fixed}\n                style={style}\n                name={column.name}\n                column={column}\n                borders={column.borders}\n                flexWrap={column.flexWrap}\n                alignItems={column.alignItems}\n                alignContent={column.alignContent}\n                justifyContent={column.justifyContent}\n                gridArea={gridArea}\n              />\n            );\n          })}\n        </SRow>\n\n        {row[ACCORDION] && React.isValidElement(row[ACCORDION]) && (\n          <SCollapseRow\n            key={rowIndex}\n            role={'row'}\n            aria-rowindex={rowIndex + 2}\n            visible={expanded}\n            interactive\n            gridArea={accordionDataGridArea}\n            // style={{gridArea: gridArea}}\n            // preserveNode\n            duration={200}\n            aria-level={ariaLevel + 1}\n            aria-setsize={1}\n            aria-posinset={1}\n          >\n            {row[ACCORDION]}\n          </SCollapseRow>\n        )}\n\n        {row[ACCORDION] &&\n          Array.isArray(row[ACCORDION]) &&\n          expanded &&\n          // <SCollapseRow\n          //     key={rowIndex}\n          //     visible={expanded}\n          //     interactive\n          //     gridArea={accordionDataGridArea}\n          //     gridTemplateAreas={gridTemplateAreas}\n          //     gridTemplateColumns={gridTemplateColumns}\n          //     duration={200}\n          //     // onAnimationStart={(e: React.AnimationEvent<HTMLDivElement>) => {\n          //     //   const target = e.target;\n          //     //   if (target instanceof HTMLElement && this.asProps.expanded) {\n          //     //     target.style.setProperty('display', 'grid');\n          //     //   }\n          //     // }}\n          //     // onAnimationEnd={(e: React.AnimationEvent<HTMLDivElement>) => {\n          //     //   const target = e.target;\n          //     //   if (target instanceof HTMLElement && this.asProps.expanded) {\n          //     //     target.style.setProperty('display', 'contents');\n          //     //   }\n          //     // }}\n          // >\n          row[ACCORDION]?.map((subrow, i) => {\n            // const gridArea = `${rowIndex + headerRows + 2} / 1 / ${\n            //     rowIndex + headerRows + 2\n            // } / ${columns.length + 2}`;\n            return (\n              <Row\n                key={i}\n                row={subrow}\n                columns={columns}\n                visible={expanded}\n                rows={row[ACCORDION]}\n                rowIndex={rowIndex}\n                aria-posinset={i + 1}\n                aria-level={ariaLevel + 1}\n                headerRows={headerRows}\n                expanded={this.asProps.expandedRows?.includes(i)}\n                onExpandRow={this.onExpandRow}\n              />\n            );\n          })}\n      </>,\n    );\n  }\n}\n\n// @ts-ignore\nexport const Row = createComponent(RowRoot, {}, { parent: Body });\n"],"mappings":"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"}

package/lib/cjs/components/Body/Row.types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=Row.types.js.map

package/lib/cjs/components/Body/Row.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.types.js","names":[],"sources":["../../../../src/components/Body/Row.types.ts"],"sourcesContent":["import { DTValue, DTKey, DTUse } from '../DataTable/DataTable.types';\nimport { DTColumn } from '../Head/Column.types';\nimport { MergedColumnsCell, MergedRowsCell } from './MergedCells';\n\nexport type DTRow = Record<DTKey, DTValue | MergedRowsCell | MergedColumnsCell>;\n\nexport type DataTableRowProps = {\n  columns: DTColumn[];\n  row: DTRow;\n  rows: DTRow[];\n  rowIndex: number;\n  headerRows: number;\n\n  expandedRows?: number[];\n\n  onExpandRow?: (expandedRowIndex: number) => void;\n};\n\nexport type RowPropsInner = {\n  use: DTUse;\n  /**\n   * Expanded flag for rows with accordion\n   * @default false\n   */\n  expanded?: boolean;\n\n  gridTemplateAreas: string;\n  gridTemplateColumns: string;\n  accordionDataGridArea: string;\n};\n"],"mappings":""}

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

@@ -0,0 +1,190 @@
+SBody, SRow {
+  display: contents;
+}
+
+SBody[compact] SCell {
+  padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px);
+}
+
+SRow[gridArea], SCell[gridArea], SCollapseRow[gridArea] {
+  grid-area: var(--gridArea);
+}
+
+/* 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:hover > SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+}
+
+/* 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);
+}
+
+SRow:hover > SCell[theme='muted'],
+SRow[theme='muted']:hover > SCell: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[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);
+}
+
+SRow:hover > SCell[theme='info'],
+SRow[theme='info']:hover > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-selected-hover, #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);
+}
+
+SRow:hover > SCell[theme='success'],
+SRow[theme='success']:hover > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-new-hover, #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);
+}
+
+SRow:hover > SCell[theme='warning'],
+SRow[theme='warning']:hover > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-warning-hover, #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);
+}
+
+SRow:hover > SCell[theme='danger'],
+SRow[theme='danger']:hover > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-critical-hover, #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 {
+    transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out;
+
+    &[expanded] {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+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(--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(--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);
+}