@semcore/data-table 16.0.0-prerelease.16 → 16.0.0-prerelease.17

package/lib/esm/components/DataTable/DataTable.mjs

@@ -1,5 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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";
@@ -12,7 +13,6 @@ import { ScrollArea, Box } from "@semcore/base-components";
 import { Head } from "../Head/Head.mjs";
 import { Body } from "../Body/Body.mjs";
 import { hasFocusableIn, isFocusInside } from "@semcore/core/lib/utils/use/useFocusLock";
-import syncScroll from "@semcore/core/lib/utils/syncScroll";
 import { getScrollOffsetValue } from "../../utils.mjs";
 import findComponent from "@semcore/core/lib/utils/findComponent";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
@@ -20,6 +20,7 @@ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { MergedRowsCell, MergedColumnsCell } from "../Body/MergedCells.mjs";
 import { forkRef } from "@semcore/core/lib/utils/ref";
+import { hasParent } from "@semcore/core/lib/utils/hasParent";
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -38,16 +39,17 @@ var scrollStyles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SScrollArea_1765z_gg_{width:-moz-fit-content;width:fit-content}.___SShadowHorizontal_1765z_gg_:after,.___SShadowHorizontal_1765z_gg_:before,.___SShadowVertical_1765z_gg_:after,.___SShadowVertical_1765z_gg_:before{z-index:1}",
-    "1765z_gg_"
+    ".___SScrollArea_14dz4_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_14dz4_gg_ .___SShadowVertical_14dz4_gg_:before{display:none}.___SScrollArea_14dz4_gg_ .___SShadowHorizontal_14dz4_gg_:after,.___SScrollArea_14dz4_gg_ .___SShadowHorizontal_14dz4_gg_:before,.___SScrollArea_14dz4_gg_ .___SShadowVertical_14dz4_gg_:after{z-index:2}",
+    "14dz4_gg_"
   ), {
-    "__SScrollArea": "___SScrollArea_1765z_gg_",
-    "__SShadowHorizontal": "___SShadowHorizontal_1765z_gg_",
-    "__SShadowVertical": "___SShadowVertical_1765z_gg_"
+    "__SScrollArea": "___SScrollArea_14dz4_gg_",
+    "__SShadowVertical": "___SShadowVertical_14dz4_gg_",
+    "__SShadowHorizontal": "___SShadowHorizontal_14dz4_gg_"
   })
 );
 var ACCORDION = Symbol("accordion");
 var ROW_GROUP = Symbol("ROW_GROUP");
+var SCROLL_BAR_HEIGHT = 12;
 var DataTableRoot = /* @__PURE__ */ function(_Component) {
   _inherits(DataTableRoot2, _Component);
   var _super = _createSuper(DataTableRoot2);
@@ -61,8 +63,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     _defineProperty(_assertThisInitialized(_this), "tableContainerRef", /* @__PURE__ */ React.createRef());
     _defineProperty(_assertThisInitialized(_this), "tableRef", /* @__PURE__ */ React.createRef());
     _defineProperty(_assertThisInitialized(_this), "headerRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "scrollBodyRef", void 0);
-    _defineProperty(_assertThisInitialized(_this), "scrollHeadRef", void 0);
+    _defineProperty(_assertThisInitialized(_this), "spinnerRef", /* @__PURE__ */ React.createRef());
     _defineProperty(_assertThisInitialized(_this), "gridAreaGroupMap", /* @__PURE__ */ new Map());
     _defineProperty(_assertThisInitialized(_this), "getRow", function(index) {
       var _this$tableRef$curren;
@@ -75,6 +76,16 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       });
       return hasFocusable;
     });
+    _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]));
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "changeFocusCell", function(rowIndex, colIndex, direction) {
       var _this$tableRef$curren2, _this$tableRef$curren3;
       var hasFocusable = _this.hasFocusableInHeader();
@@ -170,7 +181,11 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "handleFocus", function(e) {
-      if ((!e.relatedTarget || !isFocusInside(e.currentTarget, e.relatedTarget)) && lastInteraction.isKeyboard()) {
+      if (_this.asProps.loading) {
+        var _this$spinnerRef$curr;
+        (_this$spinnerRef$curr = _this.spinnerRef.current) === null || _this$spinnerRef$curr === void 0 ? void 0 : _this$spinnerRef$curr.focus();
+        e.currentTarget.setAttribute("tabIndex", "-1");
+      } else if ((!e.relatedTarget || !isFocusInside(e.currentTarget, e.relatedTarget)) && lastInteraction.isKeyboard()) {
         var _row;
         if (_this.focusedCell[0] === -1 && _this.focusedCell[1] === -1) {
           _this.initFocusableCell();
@@ -183,7 +198,13 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         }
         var cell = (_row = row) === null || _row === void 0 ? void 0 : _row.querySelectorAll("[role=gridcell], [role=columnheader]").item(_this.focusedCell[1]);
         cell === null || cell === void 0 ? void 0 : cell.removeAttribute("inert");
-        cell instanceof HTMLElement && cell.focus();
+        if (cell instanceof HTMLElement) {
+          if (hasParent(e.target, cell)) {
+            e.target.focus();
+          } else {
+            cell.focus();
+          }
+        }
         e.currentTarget.setAttribute("tabIndex", "-1");
       }
     });
@@ -198,13 +219,17 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     _defineProperty(_assertThisInitialized(_this), "handleMouseMove", function() {
       _this.setInert(false);
     });
-    var createRef = syncScroll();
-    _this.scrollBodyRef = createRef("body");
-    _this.scrollHeadRef = createRef("head");
     _this.columns = _this.calculateColumns();
     return _this;
   }
   _createClass(DataTableRoot2, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        expandedRows: []
+      };
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.forceUpdate();
@@ -212,8 +237,19 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "totalRows",
     get: function get() {
-      var totalRows = this.asProps.totalRows;
-      return totalRows !== null && totalRows !== void 0 ? totalRows : this.calculateRows().length;
+      var _this2 = this;
+      var _this$asProps = this.asProps, totalRows = _this$asProps.totalRows, expandedRows = _this$asProps.expandedRows;
+      var expandedRowsCount = expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.reduce(function(acc, rowIndex) {
+        var dtRow = _this2.calculateRows().flat()[rowIndex];
+        var expandedRows2 = dtRow[ACCORDION];
+        if (Array.isArray(expandedRows2)) {
+          acc = acc + expandedRows2.length;
+        } else {
+          acc = acc + 1;
+        }
+        return acc;
+      }, 0);
+      return (totalRows !== null && totalRows !== void 0 ? totalRows : this.calculateRows().length) + expandedRowsCount;
     }
   }, {
     key: "gridSettings",
@@ -232,7 +268,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getHeadProps",
     value: function getHeadProps() {
-      var _this$asProps = this.asProps, use = _this$asProps.use, compact = _this$asProps.compact, sort = _this$asProps.sort, onSortChange = _this$asProps.onSortChange, getI18nText = _this$asProps.getI18nText, uid = _this$asProps.uid;
+      var _this$asProps2 = this.asProps, use = _this$asProps2.use, compact = _this$asProps2.compact, sort = _this$asProps2.sort, onSortChange = _this$asProps2.onSortChange, getI18nText = _this$asProps2.getI18nText, uid = _this$asProps2.uid;
       var _this$gridSettings = this.gridSettings, gridTemplateColumns = _this$gridSettings.gridTemplateColumns, gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
       return {
         columns: this.columns,
@@ -253,7 +289,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     key: "getBodyProps",
     value: function getBodyProps() {
       var _header$children;
-      var _this$asProps2 = this.asProps, use = _this$asProps2.use, compact = _this$asProps2.compact, loading = _this$asProps2.loading, getI18nText = _this$asProps2.getI18nText;
+      var _this$asProps3 = this.asProps, use = _this$asProps3.use, compact = _this$asProps3.compact, loading = _this$asProps3.loading, getI18nText = _this$asProps3.getI18nText, expandedRows = _this$asProps3.expandedRows;
       var rows = this.calculateRows();
       var _this$gridSettings2 = this.gridSettings, gridTemplateColumns = _this$gridSettings2.gridTemplateColumns, gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
       var header = this.headerRef.current;
@@ -267,17 +303,17 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       return {
         columns: this.columns,
         rows,
+        flatRows: rows.flat(),
         use,
-        scrollRef: this.scrollBodyRef,
-        headerRows: this.columns.some(function(column) {
-          return Boolean(column.parent);
-        }) ? 2 : 1,
         compact: Boolean(compact),
         gridTemplateColumns,
         gridTemplateAreas,
         loading,
         headerHeight,
-        getI18nText
+        getI18nText,
+        expandedRows,
+        onExpandRow: this.onExpandRow,
+        spinnerRef: this.spinnerRef
       };
     }
   }, {
@@ -298,17 +334,18 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     value: function render() {
       var _ref = this.asProps, _ref2;
       var SDataTable = Box;
-      var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, w = _this$asProps3.w, wMax = _this$asProps3.wMax, wMin = _this$asProps3.wMin, h = _this$asProps3.h, hMax = _this$asProps3.hMax, hMin = _this$asProps3.hMin;
+      var _this$asProps4 = this.asProps, Children = _this$asProps4.Children, styles = _this$asProps4.styles, w = _this$asProps4.w, wMax = _this$asProps4.wMax, wMin = _this$asProps4.wMin, h = _this$asProps4.h, hMax = _this$asProps4.hMax, hMin = _this$asProps4.hMin;
       var _getScrollOffsetValue = getScrollOffsetValue(this.columns), _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2), offsetLeftSum = _getScrollOffsetValue2[0], offsetRightSum = _getScrollOffsetValue2[1];
       var _this$gridSettings3 = this.gridSettings, gridTemplateColumns = _this$gridSettings3.gridTemplateColumns, gridTemplateAreas = _this$gridSettings3.gridTemplateAreas;
       var Head2 = findComponent(Children, ["DataTable.Head"]);
-      var Body2 = findComponent(Children, ["DataTable.Body"]);
+      var topOffset = Head2 !== null && Head2 !== void 0 && Head2.props.sticky || Head2 !== null && Head2 !== void 0 && Head2.props.withScrollBar ? this.getTopScrollOffset() : void 0;
       var width = w !== null && w !== void 0 ? w : this.columns.some(function(c) {
         return c.gridColumnWidth === "auto" || c.gridColumnWidth === "1fr";
       }) ? "100%" : void 0;
       return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(ScrollArea, _ref2.cn("ScrollArea", {
         "leftOffset": offsetLeftSum,
         "rightOffset": offsetRightSum,
+        "topOffset": topOffset,
         "w": width,
         "wMax": wMax,
         "wMin": wMin,
@@ -340,16 +377,22 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         "use:h": void 0,
         "use:hMax": void 0,
         "use:hMin": void 0
-      }, _ref))), Body2, Head2)), /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
-        orientation: "horizontal"
+      }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})))), (Head2 === null || Head2 === void 0 ? void 0 : Head2.props.withScrollBar) && topOffset && /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
+        orientation: "horizontal",
+        top: topOffset - SCROLL_BAR_HEIGHT,
+        zIndex: 3
       }), /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
-        orientation: "vertical"
+        orientation: "horizontal",
+        zIndex: 2
+      }), /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
+        orientation: "vertical",
+        zIndex: 2
       }));
     }
   }, {
     key: "calculateColumns",
     value: function calculateColumns() {
-      var _this2 = this;
+      var _this3 = this;
       var _this$props = this.props, children = _this$props.children, data = _this$props.data;
       var HeadComponent = findComponent(children, ["Head"]);
       var hasGroup = findComponent(HeadComponent.props.children, ["Head.Group"]) !== void 0;
@@ -386,14 +429,20 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         };
         return column;
       };
+      var childIsColumn = function childIsColumn2(child) {
+        return child.type === Head.Column;
+      };
+      var childIsGroup = function childIsGroup2(child) {
+        return child.type === Head.Group;
+      };
       React.Children.forEach(HeadComponent.props.children, function(child, i) {
         if (!/* @__PURE__ */ React.isValidElement(child)) return;
-        if (child.type === Head.Column) {
+        if (childIsColumn(child)) {
           var col = makeColumn(child);
           col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(hasGroup ? "3" : "2", " / ").concat(gridColumnIndex + 1);
           gridColumnIndex++;
           columns.push(col);
-        } else if (child.type === Head.Group) {
+        } else if (childIsGroup(child)) {
           var Group = child;
           var childCount = React.Children.count(child.props.children);
           var initGridColumn = gridColumnIndex;
@@ -415,7 +464,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
               columns.push(_col);
             }
           });
-          _this2.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
+          _this3.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
           groupIndex++;
         }
       });
@@ -424,42 +473,55 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "calculateRows",
     value: function calculateRows() {
-      var _this3 = this;
+      var _this4 = this;
       var data = this.asProps.data;
       var rows = [];
-      var addToRows = function addToRows2(row) {
+      var rowIndex = 0;
+      var makeDtRow = function makeDtRow2(row) {
         var dtRow = Object.entries(row).reduce(function(acc, _ref4) {
           var _ref5 = _slicedToArray(_ref4, 2), key = _ref5[0], value = _ref5[1];
-          var columnsToRow = key.split(_this3.columnsSplitter);
+          var columnsToRow = key.split(_this4.columnsSplitter);
           if (columnsToRow.length === 1) {
-            acc[key] = value;
+            acc[key] = value !== null && value !== void 0 ? value : "";
           } else {
-            acc[columnsToRow[0]] = new MergedColumnsCell(value, columnsToRow.length);
+            acc[columnsToRow[0]] = new MergedColumnsCell(value, {
+              dataKey: key,
+              size: columnsToRow.length
+            });
           }
           if (row[ACCORDION]) {
             acc[ACCORDION] = row[ACCORDION];
           }
           return acc;
         }, {});
-        rows.push(dtRow);
+        return dtRow;
       };
-      data.forEach(function(row, rowIndex2) {
+      data.forEach(function(row) {
         var groupedRows = row[ROW_GROUP];
+        var fromRow = rowIndex + 2;
         if (groupedRows) {
+          var toRow = fromRow + groupedRows.length;
+          var innerRows = [];
           groupedRows.forEach(function(childRow, index) {
+            var dtRow2;
             if (index === 0) {
               var rowData = _objectSpread(_objectSpread({}, childRow), Object.entries(row).reduce(function(acc, _ref6) {
                 var _ref7 = _slicedToArray(_ref6, 2), key = _ref7[0], value = _ref7[1];
-                acc[key] = new MergedRowsCell(value, groupedRows.length);
+                acc[key] = new MergedRowsCell(value, [fromRow, toRow]);
                 return acc;
               }, {}));
-              addToRows(rowData);
+              dtRow2 = makeDtRow(rowData);
             } else {
-              addToRows(childRow);
+              dtRow2 = makeDtRow(childRow);
             }
+            innerRows.push(dtRow2);
+            rowIndex++;
           });
+          rows.push(innerRows);
         } else {
-          addToRows(row);
+          var dtRow = makeDtRow(row);
+          rows.push(dtRow);
+          rowIndex++;
         }
       });
       return rows;
@@ -470,6 +532,22 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       var _c$props$gtcWidth;
       return (_c$props$gtcWidth = c.props.gtcWidth) !== null && _c$props$gtcWidth !== void 0 ? _c$props$gtcWidth : this.props.defaultGridTemplateColumnWidth;
     }
+  }, {
+    key: "getTopScrollOffset",
+    value: function getTopScrollOffset() {
+      var _this$headerRef$curre;
+      var header = (_this$headerRef$curre = this.headerRef.current) === null || _this$headerRef$curre === void 0 ? void 0 : _this$headerRef$curre.children;
+      var height = 0;
+      for (var i = 0; i < ((_header$length = header === null || header === void 0 ? void 0 : header.length) !== null && _header$length !== void 0 ? _header$length : 0); i++) {
+        var _header$length, _header$item;
+        var columnHeight = header === null || header === void 0 ? void 0 : (_header$item = header.item(i)) === null || _header$item === void 0 ? void 0 : _header$item.getBoundingClientRect().height;
+        if (columnHeight) {
+          height = columnHeight;
+          break;
+        }
+      }
+      return height;
+    }
   }]);
   return DataTableRoot2;
 }(Component);
@@ -479,7 +557,8 @@ _defineProperty(DataTableRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(lo
 _defineProperty(DataTableRoot, "defaultProps", {
   use: "primary",
   defaultGridTemplateColumnWidth: "auto",
-  h: "auto"
+  h: "auto",
+  defaultExpandedRows: []
 });
 var DataTable = createComponent(DataTableRoot, {
   Head,

package/lib/esm/components/Head/Column.mjs

@@ -5,41 +5,41 @@ import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitial
 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, assignProps, Component } from "@semcore/core";
+import { sstyled, lastInteraction, assignProps, Component } from "@semcore/core";
 import * as React from "react";
 import { Flex } from "@semcore/base-components";
 import SortDesc from "@semcore/icon/SortDesc/m";
 import SortAsc from "@semcore/icon/SortAsc/m";
 import { ButtonLink } from "@semcore/button";
 import { getFocusableIn } from "@semcore/core/lib/utils/focus-lock/getFocusableIn";
-import { SORT_ICON_WIDTH } from "../../Head.mjs";
 import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import { isFocusInside } from "@semcore/core/lib/utils/focus-lock/isFocusInside";
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SHead_182z1_gg_{display:contents}.___SHead_182z1_gg_.__sticky_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:0;z-index:1}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{top:0}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroupContainer_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:40px;z-index:1}.___SHead_182z1_gg_.__compact_182z1_gg_ .___SColumn_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_182z1_gg_,.___SGroup_182z1_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SGroup_182z1_gg_._use_primary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-3x, 12px);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_182z1_gg_._use_secondary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-2x, 8px);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SGroup_182z1_gg_:has(.___SColumn_182z1_gg_.__visibleSort_182z1_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_left_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_left_182z1_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_right_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_right_182z1_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_,.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before,.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before{display:flex;opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_{display:flex;opacity:1}.___SColumn_182z1_gg_.__gridArea_182z1_gg_,.___SGroupTitle_182z1_gg_.__gridArea_182z1_gg_,.___SGroup_182z1_gg_.__gridArea_182z1_gg_{grid-area:var(--gridArea_182z1)}.___SHead_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_ .___SGroup_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{position:sticky;z-index:2}@media (hover:hover){.___SColumn_182z1_gg_.__sortable_182z1_gg_:hover{cursor:pointer}}.___SSortWrapper_182z1_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_182z1_gg_,.___SSortWrapper_182z1_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_182z1_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_182z1_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}',
-    "182z1_gg_"
+    '.___SGroupContainer_1yovy_gg_,.___SHead_1yovy_gg_{display:contents}.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SColumn_1yovy_gg_{position:sticky;top:0;z-index:2}.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SGroup_1yovy_gg_{top:0}.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SGroupContainer_1yovy_gg_>.___SColumn_1yovy_gg_{position:sticky;z-index:2}.___SHead_1yovy_gg_.__compact_1yovy_gg_ .___SColumn_1yovy_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1yovy_gg_,.___SGroup_1yovy_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;overflow:hidden}.___SGroup_1yovy_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_1yovy_gg_._use_primary_1yovy_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1yovy_gg_._use_primary_1yovy_gg_:has(~.___SColumn_1yovy_gg_.__visibleSort_1yovy_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_1yovy_gg_._use_secondary_1yovy_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1yovy_gg_._borders_both_1yovy_gg_,.___SColumn_1yovy_gg_._borders_left_1yovy_gg_,.___SGroup_1yovy_gg_._borders_both_1yovy_gg_,.___SGroup_1yovy_gg_._borders_left_1yovy_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1yovy_gg_._borders_both_1yovy_gg_,.___SColumn_1yovy_gg_._borders_right_1yovy_gg_,.___SGroup_1yovy_gg_._borders_both_1yovy_gg_,.___SGroup_1yovy_gg_._borders_right_1yovy_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_ .___SSortWrapper_1yovy_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_.__visibleSort_1yovy_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortWrapper_1yovy_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortButton_1yovy_gg_,.___SColumn_1yovy_gg_._use_primary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortWrapper_1yovy_gg_::before,.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortWrapper_1yovy_gg_::before{display:flex;opacity:1}.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_ .___SSortWrapper_1yovy_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortWrapper_1yovy_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortButton_1yovy_gg_{display:flex;opacity:1}.___SColumn_1yovy_gg_.__gridArea_1yovy_gg_,.___SGroupTitle_1yovy_gg_.__gridArea_1yovy_gg_,.___SGroup_1yovy_gg_.__gridArea_1yovy_gg_{grid-area:var(--gridArea_1yovy)}.___SHead_1yovy_gg_ .___SColumn_1yovy_gg_.__fixed_1yovy_gg_,.___SHead_1yovy_gg_ .___SGroup_1yovy_gg_.__fixed_1yovy_gg_,.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SColumn_1yovy_gg_.__fixed_1yovy_gg_,.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SGroup_1yovy_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_1yovy_gg_.__sortable_1yovy_gg_:hover{cursor:pointer}}.___SSortWrapper_1yovy_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_1yovy_gg_,.___SSortWrapper_1yovy_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1yovy_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_1yovy_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}',
+    "1yovy_gg_"
   ), {
-    "__SHead": "___SHead_182z1_gg_",
-    "_sticky": "__sticky_182z1_gg_",
-    "__SColumn": "___SColumn_182z1_gg_",
-    "__SGroup": "___SGroup_182z1_gg_",
-    "__SGroupContainer": "___SGroupContainer_182z1_gg_",
-    "_compact": "__compact_182z1_gg_",
-    "_use_primary": "_use_primary_182z1_gg_",
-    "_use_secondary": "_use_secondary_182z1_gg_",
-    "_visibleSort": "__visibleSort_182z1_gg_",
-    "_borders_both": "_borders_both_182z1_gg_",
-    "_borders_left": "_borders_left_182z1_gg_",
-    "_borders_right": "_borders_right_182z1_gg_",
-    "_gridArea": "__gridArea_182z1_gg_",
-    "__SGroupTitle": "___SGroupTitle_182z1_gg_",
-    "--gridArea": "--gridArea_182z1",
-    "_fixed": "__fixed_182z1_gg_",
-    "_sortable": "__sortable_182z1_gg_",
-    "__SSortWrapper": "___SSortWrapper_182z1_gg_",
-    "__SSortButton": "___SSortButton_182z1_gg_"
+    "__SHead": "___SHead_1yovy_gg_",
+    "__SGroupContainer": "___SGroupContainer_1yovy_gg_",
+    "_sticky": "__sticky_1yovy_gg_",
+    "__SColumn": "___SColumn_1yovy_gg_",
+    "__SGroup": "___SGroup_1yovy_gg_",
+    "_compact": "__compact_1yovy_gg_",
+    "_use_secondary": "_use_secondary_1yovy_gg_",
+    "_borders_both": "_borders_both_1yovy_gg_",
+    "_borders_left": "_borders_left_1yovy_gg_",
+    "_borders_right": "_borders_right_1yovy_gg_",
+    "_gridArea": "__gridArea_1yovy_gg_",
+    "__SGroupTitle": "___SGroupTitle_1yovy_gg_",
+    "--gridArea": "--gridArea_1yovy",
+    "_fixed": "__fixed_1yovy_gg_",
+    "_sortable": "__sortable_1yovy_gg_",
+    "__SSortWrapper": "___SSortWrapper_1yovy_gg_",
+    "__SSortButton": "___SSortButton_1yovy_gg_",
+    "_use_primary": "_use_primary_1yovy_gg_",
+    "_visibleSort": "__visibleSort_1yovy_gg_"
   })
 );
 var SORTING_ICON = {
@@ -50,6 +50,7 @@ var ARIA_SORT = {
   desc: "descending",
   asc: "ascending"
 };
+var SORT_ICON_WIDTH = 20;
 var DEFAULT_DIRECTION = "desc";
 var reversedSortDirection = {
   desc: "asc",
@@ -113,16 +114,21 @@ var Column = /* @__PURE__ */ function(_Component) {
         sortVisible: false
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "handleBlur", function() {
-      _this.setState({
-        sortVisible: false
-      });
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function(e) {
+      var relatedTarget = e.relatedTarget;
+      if (!isFocusInside(e.currentTarget, relatedTarget) && lastInteraction.isKeyboard()) {
+        _this.setState({
+          sortVisible: false
+        });
+      }
     });
     _defineProperty(_assertThisInitialized(_this), "handleSortClick", function(e) {
       var _this$asProps = _this.asProps, sort = _this$asProps.sort, onSortChange = _this$asProps.onSortChange, name = _this$asProps.name;
-      if (sort && onSortChange) {
-        var sortDirection = sort[0] === name ? reversedSortDirection[sort[1]] : DEFAULT_DIRECTION;
-        onSortChange([name, sortDirection], e);
+      if (lastInteraction.isMouse() || lastInteraction.isKeyboard() && e.target === e.currentTarget) {
+        if (sort && onSortChange) {
+          var sortDirection = sort[0] === name ? reversedSortDirection[sort[1]] : DEFAULT_DIRECTION;
+          onSortChange([name, sortDirection], e);
+        }
       }
     });
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(e) {
@@ -149,6 +155,7 @@ var Column = /* @__PURE__ */ function(_Component) {
               (_focusableChildren$ = focusableChildren[0]) === null || _focusableChildren$ === void 0 ? void 0 : _focusableChildren$.focus();
               e.preventDefault();
             }
+            e.stopPropagation();
           }
         } else if (e.key === "Enter") {
           var _focusableChildren$2;
@@ -181,6 +188,19 @@ var Column = /* @__PURE__ */ function(_Component) {
     return _this;
   }
   _createClass(Column2, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.asProps.parent && this.asProps.sticky) {
+        var _columnElement$parent;
+        var columnElement = this.columnRef.current;
+        var groupElement = columnElement === null || columnElement === void 0 ? void 0 : (_columnElement$parent = columnElement.parentElement) === null || _columnElement$parent === void 0 ? void 0 : _columnElement$parent.children.item(0);
+        var groupHeight = groupElement === null || groupElement === void 0 ? void 0 : groupElement.getBoundingClientRect().height;
+        if (groupHeight) {
+          columnElement === null || columnElement === void 0 ? void 0 : columnElement.style.setProperty("top", "".concat(groupHeight, "px"));
+        }
+      }
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _prevProps$sort, _this$asProps$sort;
@@ -215,7 +235,7 @@ var Column = /* @__PURE__ */ function(_Component) {
       var SColumn = Flex;
       var SSortWrapper = "div";
       var SSortButton = ButtonLink;
-      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, sortable = _this$asProps3.sortable, sort = _this$asProps3.sort, uid = _this$asProps3.uid, name = _this$asProps3.name, parent = _this$asProps3.parent, sortableColumnDescribeId = _this$asProps3.sortableColumnDescribeId;
+      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, sortable = _this$asProps3.sortable, sort = _this$asProps3.sort, uid = _this$asProps3.uid, name = _this$asProps3.name, parent = _this$asProps3.parent, sortableColumnDescribeId = _this$asProps3.sortableColumnDescribeId, Children = _this$asProps3.Children;
       var SSortIcon = sort ? SORTING_ICON[sort[1]] : SORTING_ICON["asc"];
       var isSorted = (sort === null || sort === void 0 ? void 0 : sort[0]) === name;
       var visibleSort = sortable && (this.state.sortVisible || isSorted);
@@ -242,7 +262,7 @@ var Column = /* @__PURE__ */ function(_Component) {
         "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(" ") : void 0,
         "aria-sort": ariaSortValue,
         "onClick": this.handleSortClick
-      }, _ref))), this.asProps.children, sortable && /* @__PURE__ */ React.createElement(SSortWrapper, _ref2.cn("SSortWrapper", {
+      }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})), sortable && /* @__PURE__ */ React.createElement(SSortWrapper, _ref2.cn("SSortWrapper", {
         "ref": this.sortWrapperRef
       }), /* @__PURE__ */ React.createElement(SSortButton, _ref2.cn("SSortButton", {
         "onClick": this.handleSortClick,