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

package/lib/esm/components/DataTable/dataTable.shadow.css

@@ -0,0 +1,17 @@
+SDataTable {
+  display: grid;
+  align-items: start;
+  min-width: fit-content;
+}
+
+SDataTable[gridTemplateColumns] {
+  grid-template-columns: var(--gridTemplateColumns);
+}
+
+SDataTable[gridTemplateAreas] {
+  grid-template-areas: var(--gridTemplateAreas);
+}
+
+SDataTable[gridTemplateRows] {
+  grid-template-rows: var(--gridTemplateRows);
+}

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

@@ -0,0 +1,296 @@
+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, 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 canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import { isFocusInside } from "@semcore/core/lib/utils/focus-lock/isFocusInside";
+/*!__reshadow-styles__:"./style.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SGroupContainer_ah4hc_gg_,.___SHead_ah4hc_gg_{display:contents}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SColumn_ah4hc_gg_{position:sticky;top:0;z-index:2}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroup_ah4hc_gg_{top:0}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroupContainer_ah4hc_gg_>.___SColumn_ah4hc_gg_{position:sticky;z-index:2}.___SHead_ah4hc_gg_.__compact_ah4hc_gg_ .___SColumn_ah4hc_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_ah4hc_gg_,.___SGroup_ah4hc_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_ah4hc_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_ah4hc_gg_._use_primary_ah4hc_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_ah4hc_gg_._use_primary_ah4hc_gg_:has(~.___SColumn_ah4hc_gg_.__visibleSort_ah4hc_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_ah4hc_gg_._use_secondary_ah4hc_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_ah4hc_gg_._borders_both_ah4hc_gg_,.___SColumn_ah4hc_gg_._borders_left_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_both_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_left_ah4hc_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_ah4hc_gg_._borders_both_ah4hc_gg_,.___SColumn_ah4hc_gg_._borders_right_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_both_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_right_ah4hc_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_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_ah4hc_gg_._use_primary_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortButton_ah4hc_gg_,.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before,.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{display:flex;opacity:1}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_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_ah4hc_gg_._use_secondary_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortButton_ah4hc_gg_{display:flex;opacity:1}.___SColumn_ah4hc_gg_.__gridArea_ah4hc_gg_,.___SGroupTitle_ah4hc_gg_.__gridArea_ah4hc_gg_,.___SGroup_ah4hc_gg_.__gridArea_ah4hc_gg_{grid-area:var(--gridArea_ah4hc)}.___SHead_ah4hc_gg_ .___SColumn_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_ .___SGroup_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SColumn_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroup_ah4hc_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_ah4hc_gg_.__sortable_ah4hc_gg_:hover{cursor:pointer}}.___SSortWrapper_ah4hc_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_ah4hc_gg_,.___SSortWrapper_ah4hc_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_ah4hc_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_ah4hc_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_ah4hc_gg_._sideIndents_wide_ah4hc_gg_ .___SColumn_ah4hc_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_ah4hc_gg_._sideIndents_wide_ah4hc_gg_ .___SColumn_ah4hc_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_ah4hc_gg_{cursor:pointer}',
+    /*__inner_css_end__*/
+    "ah4hc_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHead": "___SHead_ah4hc_gg_",
+    "__SGroupContainer": "___SGroupContainer_ah4hc_gg_",
+    "_sticky": "__sticky_ah4hc_gg_",
+    "__SColumn": "___SColumn_ah4hc_gg_",
+    "__SGroup": "___SGroup_ah4hc_gg_",
+    "_compact": "__compact_ah4hc_gg_",
+    "_use_secondary": "_use_secondary_ah4hc_gg_",
+    "_borders_both": "_borders_both_ah4hc_gg_",
+    "_borders_left": "_borders_left_ah4hc_gg_",
+    "_borders_right": "_borders_right_ah4hc_gg_",
+    "_gridArea": "__gridArea_ah4hc_gg_",
+    "__SGroupTitle": "___SGroupTitle_ah4hc_gg_",
+    "--gridArea": "--gridArea_ah4hc",
+    "_fixed": "__fixed_ah4hc_gg_",
+    "_sortable": "__sortable_ah4hc_gg_",
+    "__SSortWrapper": "___SSortWrapper_ah4hc_gg_",
+    "__SSortButton": "___SSortButton_ah4hc_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_ah4hc_gg_",
+    "_use_primary": "_use_primary_ah4hc_gg_",
+    "_visibleSort": "__visibleSort_ah4hc_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_ah4hc_gg_"
+  })
+);
+var SORTING_ICON = {
+  desc: SortDesc,
+  asc: SortAsc
+};
+var ARIA_SORT = {
+  desc: "descending",
+  asc: "ascending"
+};
+var SORT_ICON_WIDTH = 20;
+var DEFAULT_DIRECTION = "desc";
+var reversedSortDirection = {
+  desc: "asc",
+  asc: "desc"
+};
+var Column = /* @__PURE__ */ function(_Component) {
+  _inherits(Column2, _Component);
+  var _super = _createSuper(Column2);
+  function Column2() {
+    var _this;
+    _classCallCheck(this, Column2);
+    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), "columnRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "sortWrapperRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      sortVisible: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "calculateActiveColumnMinWidth", function() {
+      var node = _this.columnRef.current;
+      if (node) {
+        var _this$columnRef$curre, _this$columnRef$curre2;
+        var clonedColumn = document.createElement("div");
+        var computedStyle = window.getComputedStyle(node);
+        node.childNodes.forEach(function(node2) {
+          if (_this.sortWrapperRef.current !== node2) {
+            clonedColumn.append(node2.cloneNode(true));
+          }
+        });
+        clonedColumn.style.setProperty("visibility", "hidden", "important");
+        var styles = ["display", "flex", "margin", "padding", "background", "font-style", "font-width", "font-size", "font-weight"];
+        styles.forEach(function(key) {
+          clonedColumn.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key));
+        });
+        clonedColumn.style.setProperty("width", "fit-content", "important");
+        document.body.appendChild(clonedColumn);
+        var computedWidth = Math.ceil(clonedColumn.getBoundingClientRect().width);
+        document.body.removeChild(clonedColumn);
+        var defaultNodeWidth = (_this$columnRef$curre = (_this$columnRef$curre2 = _this.columnRef.current) === null || _this$columnRef$curre2 === void 0 ? void 0 : _this$columnRef$curre2.clientWidth) !== null && _this$columnRef$curre !== void 0 ? _this$columnRef$curre : 0;
+        if (computedWidth >= defaultNodeWidth) {
+          return defaultNodeWidth + SORT_ICON_WIDTH;
+        } else {
+          var freeSpace = defaultNodeWidth - computedWidth;
+          if (freeSpace < SORT_ICON_WIDTH) {
+            return computedWidth + SORT_ICON_WIDTH;
+          }
+        }
+      }
+      return null;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function() {
+      _this.setState({
+        sortVisible: true
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", 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 (lastInteraction.isMouse() || lastInteraction.isKeyboard() && e.target === e.currentTarget) {
+        if (sort && onSortChange) {
+          var sortDirection = sort[0] === name ? reversedSortDirection[sort[1]] : _this.defaultDirection;
+          onSortChange([name, sortDirection], e);
+        }
+      }
+    });
+    _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();
+          }
+          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;
+          _this.lockedCell[1] = true;
+          (_focusableChildren$2 = focusableChildren[0]) === null || _focusableChildren$2 === void 0 ? void 0 : _focusableChildren$2.focus();
+        } else if (e.key === "Tab") {
+          var _this$lockedCell$2;
+          (_this$lockedCell$2 = _this.lockedCell[0]) === null || _this$lockedCell$2 === void 0 ? void 0 : _this$lockedCell$2.setAttribute("inert", "");
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleFocusCell", function(e) {
+      var cellElement = e.currentTarget;
+      var target = e.target;
+      _this.setState({
+        sortVisible: true
+      }, function() {
+        if (target === cellElement) {
+          var focusableChildren = Array.from(cellElement.children).flatMap(function(node) {
+            return getFocusableIn(node);
+          });
+          if (focusableChildren.length === 1) {
+            focusableChildren[0].focus();
+          } else if (focusableChildren.length > 1) {
+            _this.lockedCell = [cellElement, false];
+          }
+        }
+      });
+    });
+    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;
+      if (this.asProps.changeSortSize && canUseDOM() && ((_prevProps$sort = prevProps.sort) === null || _prevProps$sort === void 0 ? void 0 : _prevProps$sort[0]) !== ((_this$asProps$sort = this.asProps.sort) === null || _this$asProps$sort === void 0 ? void 0 : _this$asProps$sort[0])) {
+        var _this$asProps$sort2, _this$asProps$sort3;
+        var _this$asProps2 = this.asProps, tableRef = _this$asProps2.tableRef, gridTemplateColumns = _this$asProps2.gridTemplateColumns, columnIndex = _this$asProps2.columnIndex;
+        if (((_this$asProps$sort2 = this.asProps.sort) === null || _this$asProps$sort2 === void 0 ? void 0 : _this$asProps$sort2[0]) === this.asProps.name) {
+          var newWidth = this.calculateActiveColumnMinWidth();
+          setTimeout(function() {
+            if (tableRef.current && newWidth !== null) {
+              tableRef.current.style.setProperty("grid-template-columns", gridTemplateColumns.map(function(gtcWidth, index) {
+                if (index === columnIndex) {
+                  return "".concat(newWidth, "px");
+                }
+                return gtcWidth;
+              }).join(" "));
+            }
+          });
+        } else if (((_this$asProps$sort3 = this.asProps.sort) === null || _this$asProps$sort3 === void 0 ? void 0 : _this$asProps$sort3[0]) !== this.asProps.name) {
+          setTimeout(function() {
+            if (tableRef.current) {
+              tableRef.current.style.setProperty("grid-template-columns", gridTemplateColumns.join(" "));
+            }
+          });
+        }
+      }
+    }
+  }, {
+    key: "defaultDirection",
+    get: function get() {
+      var sortable = this.asProps.sortable;
+      if (typeof sortable === "string") {
+        return sortable;
+      }
+      return DEFAULT_DIRECTION;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      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, Children = _this$asProps3.Children;
+      var SSortIcon = sort && sort[0] === name ? SORTING_ICON[sort[1]] : SORTING_ICON[this.defaultDirection];
+      var isSorted = (sort === null || sort === void 0 ? void 0 : sort[0]) === name;
+      var visibleSort = Boolean(sortable) && (this.state.sortVisible || isSorted);
+      var ariaDescribedBy = [];
+      if (isSorted) {
+        ariaDescribedBy.push(sortableColumnDescribeId);
+      }
+      if (parent) {
+        ariaDescribedBy.push("igc-table-".concat(uid, "-").concat(parent.name, "-group"));
+      }
+      var ariaSortValue = sort !== null && sort !== void 0 && sort[1] ? ARIA_SORT[sort[1]] : void 0;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SColumn, _ref2.cn("SColumn", _objectSpread({}, assignProps({
+        "ref": this.columnRef,
+        "role": "columnheader",
+        "tabIndex": -1,
+        "onMouseEnter": this.handleMouseEnter,
+        "onMouseLeave": this.handleMouseLeave,
+        "onFocus": this.handleFocusCell,
+        "onBlur": this.handleBlur,
+        "onKeyDown": this.handleKeyDown,
+        "visibleSort": visibleSort,
+        "isSorted": isSorted,
+        "innerOutline": true,
+        "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(" ") : void 0,
+        "aria-sort": ariaSortValue,
+        "onClick": sortable ? this.handleSortClick : void 0
+      }, _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,
+        "aria-label": ariaSortValue,
+        "color": "--intergalactic-icon-primary-neutral"
+      }), /* @__PURE__ */ React.createElement(SSortButton.Addon, {
+        tag: SSortIcon
+      }))));
+    }
+  }]);
+  return Column2;
+}(Component);
+_defineProperty(Column, "displayName", "Column");
+_defineProperty(Column, "style", style);
+export {
+  Column
+};

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

@@ -0,0 +1,103 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 _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 * as React from "react";
+import { Box } from "@semcore/base-components";
+import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
+import { DataTableInternal } from "../DataTable/DataTable.mjs";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+/*!__reshadow-styles__:"./style.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SGroupContainer_ah4hc_gg_,.___SHead_ah4hc_gg_{display:contents}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SColumn_ah4hc_gg_{position:sticky;top:0;z-index:2}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroup_ah4hc_gg_{top:0}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroupContainer_ah4hc_gg_>.___SColumn_ah4hc_gg_{position:sticky;z-index:2}.___SHead_ah4hc_gg_.__compact_ah4hc_gg_ .___SColumn_ah4hc_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_ah4hc_gg_,.___SGroup_ah4hc_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_ah4hc_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_ah4hc_gg_._use_primary_ah4hc_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_ah4hc_gg_._use_primary_ah4hc_gg_:has(~.___SColumn_ah4hc_gg_.__visibleSort_ah4hc_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_ah4hc_gg_._use_secondary_ah4hc_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_ah4hc_gg_._borders_both_ah4hc_gg_,.___SColumn_ah4hc_gg_._borders_left_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_both_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_left_ah4hc_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_ah4hc_gg_._borders_both_ah4hc_gg_,.___SColumn_ah4hc_gg_._borders_right_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_both_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_right_ah4hc_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_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_ah4hc_gg_._use_primary_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortButton_ah4hc_gg_,.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before,.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{display:flex;opacity:1}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_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_ah4hc_gg_._use_secondary_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortButton_ah4hc_gg_{display:flex;opacity:1}.___SColumn_ah4hc_gg_.__gridArea_ah4hc_gg_,.___SGroupTitle_ah4hc_gg_.__gridArea_ah4hc_gg_,.___SGroup_ah4hc_gg_.__gridArea_ah4hc_gg_{grid-area:var(--gridArea_ah4hc)}.___SHead_ah4hc_gg_ .___SColumn_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_ .___SGroup_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SColumn_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroup_ah4hc_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_ah4hc_gg_.__sortable_ah4hc_gg_:hover{cursor:pointer}}.___SSortWrapper_ah4hc_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_ah4hc_gg_,.___SSortWrapper_ah4hc_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_ah4hc_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_ah4hc_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_ah4hc_gg_._sideIndents_wide_ah4hc_gg_ .___SColumn_ah4hc_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_ah4hc_gg_._sideIndents_wide_ah4hc_gg_ .___SColumn_ah4hc_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_ah4hc_gg_{cursor:pointer}',
+    /*__inner_css_end__*/
+    "ah4hc_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHead": "___SHead_ah4hc_gg_",
+    "__SGroupContainer": "___SGroupContainer_ah4hc_gg_",
+    "_sticky": "__sticky_ah4hc_gg_",
+    "__SColumn": "___SColumn_ah4hc_gg_",
+    "__SGroup": "___SGroup_ah4hc_gg_",
+    "_compact": "__compact_ah4hc_gg_",
+    "_use_secondary": "_use_secondary_ah4hc_gg_",
+    "_borders_both": "_borders_both_ah4hc_gg_",
+    "_borders_left": "_borders_left_ah4hc_gg_",
+    "_borders_right": "_borders_right_ah4hc_gg_",
+    "_gridArea": "__gridArea_ah4hc_gg_",
+    "__SGroupTitle": "___SGroupTitle_ah4hc_gg_",
+    "--gridArea": "--gridArea_ah4hc",
+    "_fixed": "__fixed_ah4hc_gg_",
+    "_sortable": "__sortable_ah4hc_gg_",
+    "__SSortWrapper": "___SSortWrapper_ah4hc_gg_",
+    "__SSortButton": "___SSortButton_ah4hc_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_ah4hc_gg_",
+    "_use_primary": "_use_primary_ah4hc_gg_",
+    "_visibleSort": "__visibleSort_ah4hc_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_ah4hc_gg_"
+  })
+);
+var Group = /* @__PURE__ */ function(_Component) {
+  _inherits(Group2, _Component);
+  var _super = _createSuper(Group2);
+  function Group2() {
+    _classCallCheck(this, Group2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Group2, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.forceUpdate();
+    }
+  }, {
+    key: "groupId",
+    get: function get() {
+      var uid = this.asProps.uid;
+      return "".concat(uid, "_columns_group");
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2, _groupColumns$, _children$, _groupColumns, _children, _this = this;
+      var SGroupContainer = Box;
+      var SGroup = Box;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, title = _this$asProps.title, fixed = _this$asProps.fixed, fixedColumnsMap = _this$asProps.fixedColumnsMap, columns = _this$asProps.columns, withConfig = _this$asProps.withConfig;
+      var groupColumns = columns !== null && columns !== void 0 ? columns : [];
+      var children = getOriginChildren(Children);
+      var firstName = withConfig ? (_groupColumns$ = groupColumns[0]) === null || _groupColumns$ === void 0 ? void 0 : _groupColumns$.name : (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : _children$.props.name;
+      var lastName = withConfig ? (_groupColumns = groupColumns[groupColumns.length - 1]) === null || _groupColumns === void 0 ? void 0 : _groupColumns.name : (_children = children[children.length - 1]) === null || _children === void 0 ? void 0 : _children.props.name;
+      var style2 = {};
+      if (fixed === "left" && firstName) {
+        style2.left = fixedColumnsMap.get(firstName);
+      }
+      if (fixed === "right") {
+        style2.right = fixedColumnsMap.get(lastName);
+      }
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SGroupContainer, _ref2.cn("SGroupContainer", {}), /* @__PURE__ */ React.createElement(SGroup, _ref2.cn("SGroup", _objectSpread({}, assignProps({
+        "style": style2,
+        "__excludeProps": ["title"],
+        "id": this.groupId
+      }, _ref))), withConfig ? children : title), withConfig ? groupColumns.map(function(column, i) {
+        return /* @__PURE__ */ React.createElement(DataTableInternal.Head.Column, _extends({
+          key: column.name
+        }, column, {
+          "aria-describedby": _this.groupId
+        }));
+      }) : /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})));
+    }
+  }]);
+  return Group2;
+}(Component);
+_defineProperty(Group, "displayName", "Group");
+_defineProperty(Group, "style", style);
+_defineProperty(Group, "enhance", [uniqueIDEnhancement()]);
+export {
+  Group
+};

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

@@ -0,0 +1,181 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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 { ScreenReaderOnly, Box } from "@semcore/base-components";
+import { Column } from "./Column.mjs";
+import { Group } from "./Group.mjs";
+import { SELECT_ALL, DataTableInternal } from "../DataTable/DataTable.mjs";
+import Checkbox from "@semcore/checkbox";
+/*!__reshadow-styles__:"./style.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SGroupContainer_ah4hc_gg_,.___SHead_ah4hc_gg_{display:contents}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SColumn_ah4hc_gg_{position:sticky;top:0;z-index:2}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroup_ah4hc_gg_{top:0}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroupContainer_ah4hc_gg_>.___SColumn_ah4hc_gg_{position:sticky;z-index:2}.___SHead_ah4hc_gg_.__compact_ah4hc_gg_ .___SColumn_ah4hc_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_ah4hc_gg_,.___SGroup_ah4hc_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_ah4hc_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_ah4hc_gg_._use_primary_ah4hc_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_ah4hc_gg_._use_primary_ah4hc_gg_:has(~.___SColumn_ah4hc_gg_.__visibleSort_ah4hc_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_ah4hc_gg_._use_secondary_ah4hc_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_ah4hc_gg_._borders_both_ah4hc_gg_,.___SColumn_ah4hc_gg_._borders_left_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_both_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_left_ah4hc_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_ah4hc_gg_._borders_both_ah4hc_gg_,.___SColumn_ah4hc_gg_._borders_right_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_both_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_right_ah4hc_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_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_ah4hc_gg_._use_primary_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortButton_ah4hc_gg_,.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before,.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{display:flex;opacity:1}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_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_ah4hc_gg_._use_secondary_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortButton_ah4hc_gg_{display:flex;opacity:1}.___SColumn_ah4hc_gg_.__gridArea_ah4hc_gg_,.___SGroupTitle_ah4hc_gg_.__gridArea_ah4hc_gg_,.___SGroup_ah4hc_gg_.__gridArea_ah4hc_gg_{grid-area:var(--gridArea_ah4hc)}.___SHead_ah4hc_gg_ .___SColumn_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_ .___SGroup_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SColumn_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroup_ah4hc_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_ah4hc_gg_.__sortable_ah4hc_gg_:hover{cursor:pointer}}.___SSortWrapper_ah4hc_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_ah4hc_gg_,.___SSortWrapper_ah4hc_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_ah4hc_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_ah4hc_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_ah4hc_gg_._sideIndents_wide_ah4hc_gg_ .___SColumn_ah4hc_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_ah4hc_gg_._sideIndents_wide_ah4hc_gg_ .___SColumn_ah4hc_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_ah4hc_gg_{cursor:pointer}',
+    /*__inner_css_end__*/
+    "ah4hc_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHead": "___SHead_ah4hc_gg_",
+    "__SGroupContainer": "___SGroupContainer_ah4hc_gg_",
+    "_sticky": "__sticky_ah4hc_gg_",
+    "__SColumn": "___SColumn_ah4hc_gg_",
+    "__SGroup": "___SGroup_ah4hc_gg_",
+    "_compact": "__compact_ah4hc_gg_",
+    "_use_secondary": "_use_secondary_ah4hc_gg_",
+    "_borders_both": "_borders_both_ah4hc_gg_",
+    "_borders_left": "_borders_left_ah4hc_gg_",
+    "_borders_right": "_borders_right_ah4hc_gg_",
+    "_gridArea": "__gridArea_ah4hc_gg_",
+    "__SGroupTitle": "___SGroupTitle_ah4hc_gg_",
+    "--gridArea": "--gridArea_ah4hc",
+    "_fixed": "__fixed_ah4hc_gg_",
+    "_sortable": "__sortable_ah4hc_gg_",
+    "__SSortWrapper": "___SSortWrapper_ah4hc_gg_",
+    "__SSortButton": "___SSortButton_ah4hc_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_ah4hc_gg_",
+    "_use_primary": "_use_primary_ah4hc_gg_",
+    "_visibleSort": "__visibleSort_ah4hc_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_ah4hc_gg_"
+  })
+);
+var HeadRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(HeadRoot2, _Component);
+  var _super = _createSuper(HeadRoot2);
+  function HeadRoot2() {
+    var _this;
+    _classCallCheck(this, HeadRoot2);
+    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), "fixedColumnsMap", /* @__PURE__ */ new Map());
+    _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function(value, event) {
+      var _this$asProps$onChang, _this$asProps;
+      (_this$asProps$onChang = (_this$asProps = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang === void 0 ? void 0 : _this$asProps$onChang.call(_this$asProps, value, event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleClickSelectAll", function(value) {
+      return function(event) {
+        var _this$asProps$onChang2, _this$asProps2;
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        (_this$asProps$onChang2 = (_this$asProps2 = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang2 === void 0 ? void 0 : _this$asProps$onChang2.call(_this$asProps2, value, event);
+      };
+    });
+    return _this;
+  }
+  _createClass(HeadRoot2, [{
+    key: "sortableColumnDescribeId",
+    value: function sortableColumnDescribeId() {
+      var uid = this.asProps.uid;
+      return "".concat(uid, "-column-sortable-describer");
+    }
+  }, {
+    key: "getGroupProps",
+    value: function getGroupProps(_, index) {
+      var _this$asProps3 = this.asProps, use = _this$asProps3.use, gridAreaGroupMap = _this$asProps3.gridAreaGroupMap, children = _this$asProps3.children;
+      return {
+        use,
+        gridArea: gridAreaGroupMap.get(index),
+        fixedColumnsMap: this.fixedColumnsMap,
+        withConfig: children === void 0
+      };
+    }
+  }, {
+    key: "getColumnProps",
+    value: function getColumnProps(_, index) {
+      var _this$asProps4 = this.asProps, use = _this$asProps4.use, columns = _this$asProps4.columns, sort = _this$asProps4.sort, onSortChange = _this$asProps4.onSortChange, tableRef = _this$asProps4.tableRef, gridTemplateColumns = _this$asProps4.gridTemplateColumns, gridTemplateAreas = _this$asProps4.gridTemplateAreas, sticky = _this$asProps4.sticky, top = _this$asProps4.top, selectedRows = _this$asProps4.selectedRows, h = _this$asProps4.h, getFixedStyle = _this$asProps4.getFixedStyle;
+      var column = columns[index];
+      if (index === 0 && selectedRows && columns[index + 1].fixed) {
+        column.fixed = "left";
+      }
+      var _getFixedStyle = getFixedStyle(column), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
+      var style2 = {};
+      if (top) {
+        style2.top = "".concat(top, "px");
+      }
+      if (name !== void 0 && value !== void 0) {
+        style2[name] = value;
+        this.fixedColumnsMap.set(column.name, value);
+      }
+      return {
+        use,
+        "aria-colindex": index + 1,
+        style: style2,
+        gridArea: column.gridArea,
+        fixed: column.fixed,
+        sticky,
+        borders: column.borders,
+        sort,
+        onSortChange,
+        parent: column.parent,
+        sortableColumnDescribeId: this.sortableColumnDescribeId(),
+        columnIndex: index,
+        tableRef,
+        gridTemplateColumns,
+        gridTemplateAreas,
+        h
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SHead = Box;
+      var SHeadCheckboxCol = Head.Column;
+      var _this$asProps5 = this.asProps, Children = _this$asProps5.Children, styles = _this$asProps5.styles, getI18nText = _this$asProps5.getI18nText, children = _this$asProps5.children, treeColumns = _this$asProps5.treeColumns, selectedRows = _this$asProps5.selectedRows, totalRows = _this$asProps5.totalRows;
+      var checked = selectedRows && selectedRows.length === totalRows && totalRows > 0;
+      var indeterminate = selectedRows && selectedRows.length > 0 && !checked;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SHead, _ref2.cn("SHead", _objectSpread({}, assignProps({
+        "role": "row",
+        "aria-rowindex": 1
+      }, _ref))), selectedRows && /* @__PURE__ */ React.createElement(SHeadCheckboxCol, _ref2.cn("SHeadCheckboxCol", {
+        "name": SELECT_ALL.toString(),
+        "onClick": this.handleClickSelectAll(!checked)
+      }), /* @__PURE__ */ React.createElement(Checkbox, _ref2.cn("Checkbox", {
+        "checked": checked,
+        "indeterminate": indeterminate,
+        "aria-label": getI18nText("DataTable.Header.selectAllCheckbox:aria-label"),
+        "onChange": this.handleSelectAll
+      }), /* @__PURE__ */ React.createElement(Checkbox.Value, null, /* @__PURE__ */ React.createElement(Checkbox.Value.Control, null), /* @__PURE__ */ React.createElement(Checkbox.Value.CheckMark, {
+        mt: 0
+      })))), children ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, treeColumns.map(function(column, i) {
+        if ("columns" in column) {
+          var _column$columns;
+          return /* @__PURE__ */ React.createElement(DataTableInternal.Head.Group, _extends({
+            key: column.name
+          }, column, {
+            name: (_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.map(function(c) {
+              return c.name;
+            }).join("/"),
+            title: ""
+          }));
+        }
+        return /* @__PURE__ */ React.createElement(DataTableInternal.Head.Column, _extends({
+          key: column.name
+        }, column));
+      }))), /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+        "aria-hidden": true,
+        "id": this.sortableColumnDescribeId()
+      }), getI18nText("sortableColumn")));
+    }
+  }]);
+  return HeadRoot2;
+}(Component);
+_defineProperty(HeadRoot, "displayName", "Head");
+_defineProperty(HeadRoot, "style", style);
+var Head = createComponent(HeadRoot, {
+  Column,
+  Group
+});
+export {
+  Head
+};