@semcore/data-table 4.51.0-prerelease.1 → 4.51.0-prerelease.5

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

@@ -0,0 +1,61 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import { sstyled } from "@semcore/core";
+import { ScrollArea } from "@semcore/base-components";
+import React__default from "react";
+/*!__reshadow-styles__:"./dataTable.shadow.css"*/
+var styles = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    "@keyframes moveBarWithScroll_pypp4{0%{transform:translateY(0)}to{transform:translateY(calc(var(--global-scroll-to) - var(--global-header-height)))}}.___SDataTable_pypp4_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content;grid-auto-rows:min-content;scroll-behavior:smooth}.___SDataTable_pypp4_gg_.__isDataEmpty_pypp4_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_pypp4_gg_.__gridTemplateColumns_pypp4_gg_{grid-template-columns:var(--gridTemplateColumns_pypp4)}.___SDataTable_pypp4_gg_.__gridTemplateAreas_pypp4_gg_{grid-template-areas:var(--gridTemplateAreas_pypp4)}.___SDataTable_pypp4_gg_.__gridTemplateRows_pypp4_gg_{grid-template-rows:var(--gridTemplateRows_pypp4)}.___SScrollAreaBarInHeader_pypp4_gg_.__withAnimation_pypp4_gg_{animation-name:moveBarWithScroll_pypp4;animation-timeline:--table-sticky-timeline;animation-range-start:exit-crossing calc(-1*var(--global-header-top));animation-range-end:exit-crossing calc(100% - var(--global-header-top) - var(--global-header-height));animation-timing-function:linear;animation-fill-mode:both}",
+    /*__inner_css_end__*/
+    "pypp4_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SDataTable": "___SDataTable_pypp4_gg_",
+    "_isDataEmpty": "__isDataEmpty_pypp4_gg_",
+    "_gridTemplateColumns": "__gridTemplateColumns_pypp4_gg_",
+    "--gridTemplateColumns": "--gridTemplateColumns_pypp4",
+    "_gridTemplateAreas": "__gridTemplateAreas_pypp4_gg_",
+    "--gridTemplateAreas": "--gridTemplateAreas_pypp4",
+    "_gridTemplateRows": "__gridTemplateRows_pypp4_gg_",
+    "--gridTemplateRows": "--gridTemplateRows_pypp4",
+    "__SScrollAreaBarInHeader": "___SScrollAreaBarInHeader_pypp4_gg_",
+    "_withAnimation": "__withAnimation_pypp4_gg_",
+    "@moveBarWithScroll": "moveBarWithScroll_pypp4"
+  })
+);
+var SCROLL_BAR_HEIGHT = 12;
+var ScrollBars = /* @__PURE__ */ (function(_React$PureComponent) {
+  function ScrollBars2() {
+    _classCallCheck(this, ScrollBars2);
+    return _callSuper(this, ScrollBars2, arguments);
+  }
+  _inherits(ScrollBars2, _React$PureComponent);
+  return _createClass(ScrollBars2, [{
+    key: "render",
+    value: function render() {
+      var _ref;
+      var SScrollAreaBarInHeader = ScrollArea.Bar;
+      var _this$props = this.props, loading = _this$props.loading, topOffset = _this$props.topOffset, withHeaderScrollBar = _this$props.withHeaderScrollBar, withAnimation = _this$props.withAnimation;
+      return _ref = sstyled(styles), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, withHeaderScrollBar && topOffset && !loading && /* @__PURE__ */ React__default.createElement(SScrollAreaBarInHeader, _ref.cn("SScrollAreaBarInHeader", {
+        "orientation": "horizontal",
+        "top": topOffset - SCROLL_BAR_HEIGHT,
+        "zIndex": 20,
+        "withAnimation": withAnimation
+      })), !loading && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ScrollArea.Bar, {
+        orientation: "horizontal",
+        zIndex: 20
+      }), /* @__PURE__ */ React__default.createElement(ScrollArea.Bar, {
+        orientation: "vertical",
+        zIndex: 20
+      })));
+    }
+  }]);
+})(React__default.PureComponent);
+export {
+  ScrollBars
+};

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

@@ -0,0 +1,43 @@
+SDataTable {
+  display: grid;
+  align-items: start;
+  min-width: fit-content;
+  grid-auto-rows: min-content;
+
+  scroll-behavior: smooth;
+}
+
+SDataTable[isDataEmpty] {
+  display: block;
+  align-items: unset;
+  min-width: unset;
+}
+
+SDataTable[gridTemplateColumns] {
+  grid-template-columns: var(--gridTemplateColumns);
+}
+
+SDataTable[gridTemplateAreas] {
+  grid-template-areas: var(--gridTemplateAreas);
+}
+
+SDataTable[gridTemplateRows] {
+  grid-template-rows: var(--gridTemplateRows);
+}
+
+SScrollAreaBarInHeader[withAnimation] {
+  animation-name: moveBarWithScroll;
+  animation-timeline: --table-sticky-timeline;
+  animation-range-start: exit-crossing calc(-1 * var(--global-header-top));
+  animation-range-end: exit-crossing calc(100% - var(--global-header-top) - var(--global-header-height));
+  animation-timing-function: linear;
+  animation-fill-mode: both;
+}
+@keyframes moveBarWithScroll {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(calc(var(--global-scroll-to) - var(--global-header-height)));
+  }
+}

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

@@ -0,0 +1,321 @@
+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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, lastInteraction, assignProps, Component } from "@semcore/core";
+import { Flex } from "@semcore/base-components";
+import { ButtonLink } from "@semcore/button";
+import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import cssToIntDefault from "@semcore/core/lib/utils/cssToIntDefault";
+import { getFocusableIn } from "@semcore/core/lib/utils/focus-lock/getFocusableIn";
+import { isFocusInside } from "@semcore/core/lib/utils/focus-lock/isFocusInside";
+import { isInteractiveElement } from "@semcore/core/lib/utils/isInteractiveElement";
+import SortAsc from "@semcore/icon/SortAsc/m";
+import SortDesc from "@semcore/icon/SortDesc/m";
+import * as React from "react";
+import { handleKeydownFocusCell, handleFocusCell } from "../../enhancers/focusableCell.mjs";
+/*!__reshadow-styles__:"./style.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '@keyframes moveWithScroll_1qgdc{0%{transform:translateY(0)}to{transform:translateY(var(--global-scroll-to))}}.___SGroupContainer_1qgdc_gg_,.___SHead_1qgdc_gg_{display:contents}.___SHead_1qgdc_gg_.__isDataEmpty_1qgdc_gg_.__gridTemplateColumns_1qgdc_gg_{display:grid;grid-template-columns:var(--gridTemplateColumns_1qgdc);overflow:auto;scrollbar-width:thin}.___SHead_1qgdc_gg_.__animationDuration_1qgdc_gg_>.___SColumn_1qgdc_gg_{transition:top var(--animationDuration_1qgdc) ease-out}.___SHead_1qgdc_gg_.__withAnimation_1qgdc_gg_.__sticky_1qgdc_gg_ .___SColumn_1qgdc_gg_,.___SHead_1qgdc_gg_.__withAnimation_1qgdc_gg_.__sticky_1qgdc_gg_ .___SGroup_1qgdc_gg_{animation-name:moveWithScroll_1qgdc;animation-timeline:--table-sticky-timeline;animation-range-start:exit-crossing calc(-1*var(--global-header-top));animation-range-end:exit-crossing calc(100% - var(--global-header-top));animation-timing-function:linear;animation-fill-mode:both;transform:none}.___SHead_1qgdc_gg_.__sticky_1qgdc_gg_ .___SColumn_1qgdc_gg_,.___SHead_1qgdc_gg_.__sticky_1qgdc_gg_ .___SGroup_1qgdc_gg_{position:sticky;top:0;z-index:18;transform:translateY(var(--global-scroll-translate));will-change:scroll-position}.___SHead_1qgdc_gg_.__compact_1qgdc_gg_ .___SColumn_1qgdc_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1qgdc_gg_,.___SGroup_1qgdc_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));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;line-height:var(--intergalactic-lh-100, 133%)}.___SGroup_1qgdc_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, rgb(248, 249, 248))}.___SGroup_1qgdc_gg_._use_primary_1qgdc_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1qgdc_gg_._use_primary_1qgdc_gg_:has(~.___SColumn_1qgdc_gg_.__visibleSort_1qgdc_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, rgb(234, 235, 235))}.___SGroup_1qgdc_gg_._use_secondary_1qgdc_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1qgdc_gg_._borders_both_1qgdc_gg_,.___SColumn_1qgdc_gg_._borders_left_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_both_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_left_1qgdc_gg_{border-left:1px solid var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@supports (color:color(display-p3 0 0 0%)){.___SColumn_1qgdc_gg_._borders_both_1qgdc_gg_,.___SColumn_1qgdc_gg_._borders_left_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_both_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_left_1qgdc_gg_{border-left:1px solid var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SColumn_1qgdc_gg_._borders_both_1qgdc_gg_,.___SColumn_1qgdc_gg_._borders_left_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_both_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_left_1qgdc_gg_{border-left:1px solid var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SColumn_1qgdc_gg_._borders_both_1qgdc_gg_,.___SColumn_1qgdc_gg_._borders_right_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_both_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_right_1qgdc_gg_{border-right:1px solid var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@supports (color:color(display-p3 0 0 0%)){.___SColumn_1qgdc_gg_._borders_both_1qgdc_gg_,.___SColumn_1qgdc_gg_._borders_right_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_both_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_right_1qgdc_gg_{border-right:1px solid var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SColumn_1qgdc_gg_._borders_both_1qgdc_gg_,.___SColumn_1qgdc_gg_._borders_right_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_both_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_right_1qgdc_gg_{border-right:1px solid var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07));background-color:var(--intergalactic-table-th-primary-cell, rgb(248, 249, 248))}@supports (color:color(display-p3 0 0 0%)){.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_{border-bottom:1px solid var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_{border-bottom:1px solid var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, rgb(234, 235, 235)) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_.__visibleSort_1qgdc_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, rgb(234, 235, 235))}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_.__visibleSort_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_.__visibleSort_1qgdc_gg_ .___SSortButton_1qgdc_gg_,.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_.__visibleSort_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_::before,.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_.__visibleSort_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_::before{display:flex;opacity:1}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_._justifyContent_right_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_{position:absolute}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_._justifyContent_right_1qgdc_gg_.__changeSortSize_1qgdc_gg_.__isSorted_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_,.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_._justifyContent_right_1qgdc_gg_.__changeSortSize_1qgdc_gg_.__isSorted_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_{position:relative}.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, rgba(0, 12, 8, 0.161));background-color:var(--intergalactic-table-th-secondary-cell, rgb(255, 255, 255))}@supports (color:color(display-p3 0 0 0%)){.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_{border-bottom:1px solid var(--intergalactic-border-table-accent, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_{border-bottom:1px solid var(--intergalactic-border-table-accent, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, rgb(255, 255, 255)) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_.__visibleSort_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_.__visibleSort_1qgdc_gg_ .___SSortButton_1qgdc_gg_{display:flex;opacity:1}.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_._justifyContent_right_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_{position:absolute}.___SColumn_1qgdc_gg_.__gridArea_1qgdc_gg_,.___SGroupTitle_1qgdc_gg_.__gridArea_1qgdc_gg_,.___SGroup_1qgdc_gg_.__gridArea_1qgdc_gg_{grid-area:var(--gridArea_1qgdc)}.___SHead_1qgdc_gg_ .___SColumn_1qgdc_gg_.__fixed_1qgdc_gg_,.___SHead_1qgdc_gg_ .___SGroup_1qgdc_gg_.__fixed_1qgdc_gg_,.___SHead_1qgdc_gg_.__sticky_1qgdc_gg_ .___SColumn_1qgdc_gg_.__fixed_1qgdc_gg_{position:sticky;z-index:19}@media (hover:hover){.___SColumn_1qgdc_gg_.__sortable_1qgdc_gg_:hover{cursor:pointer}}.___SSortWrapper_1qgdc_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_1qgdc_gg_,.___SSortWrapper_1qgdc_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1qgdc_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_1qgdc_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, rgba(0, 5, 2, 0.433));margin-left:var(--intergalactic-spacing-1x, 4px)}@supports (color:color(display-p3 0 0 0%)){.___SSortButton_1qgdc_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, rgba(0, 5, 2, 0.433))}@media (color-gamut:p3){.___SSortButton_1qgdc_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, color(display-p3 0.00333 0.01824 0.00791 / 0.433))}}}.___SHead_1qgdc_gg_._sideIndents_wide_1qgdc_gg_ .___SColumn_1qgdc_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_1qgdc_gg_._sideIndents_wide_1qgdc_gg_ .___SColumn_1qgdc_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_1qgdc_gg_{cursor:pointer}.___SColumn_1qgdc_gg_.__fixed_1qgdc_gg_.__shadowVertical_1qgdc_gg_:after,.___SGroup_1qgdc_gg_.__fixed_1qgdc_gg_.__shadowVertical_1qgdc_gg_:after{content:"";position:absolute;pointer-events:none;display:none;top:0;width:5px;height:100%;z-index:5}.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_,.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_{margin-right:-5px;border-right-color:transparent}.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_primary_1qgdc_gg_,.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_._use_primary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_primary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_._use_primary_1qgdc_gg_{padding-right:calc(var(--intergalactic-spacing-3x, 12px) + 5px)}.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_secondary_1qgdc_gg_,.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_._use_secondary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_secondary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_._use_secondary_1qgdc_gg_{padding-right:calc(var(--intergalactic-spacing-2x, 8px) + 5px)}.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_:after,.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_:after,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_:after,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_:after{display:block;right:0;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(26, 30, 26, 0.08) 20.55%, transparent 100%))}.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_,.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_{margin-left:-5px;border-left-color:transparent}.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_._use_primary_1qgdc_gg_,.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_primary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_._use_primary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_primary_1qgdc_gg_{padding-left:calc(var(--intergalactic-spacing-3x, 12px) + 5px)}.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_._use_secondary_1qgdc_gg_,.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_secondary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_._use_secondary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_secondary_1qgdc_gg_{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + 5px)}.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_:after,.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_:after,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_:after,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_:after{display:block;left:0;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(26, 30, 26, 0.08) 20.55%, transparent 100%))}',
+    /*__inner_css_end__*/
+    "1qgdc_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHead": "___SHead_1qgdc_gg_",
+    "__SGroupContainer": "___SGroupContainer_1qgdc_gg_",
+    "_isDataEmpty": "__isDataEmpty_1qgdc_gg_",
+    "_gridTemplateColumns": "__gridTemplateColumns_1qgdc_gg_",
+    "--gridTemplateColumns": "--gridTemplateColumns_1qgdc",
+    "_animationDuration": "__animationDuration_1qgdc_gg_",
+    "__SColumn": "___SColumn_1qgdc_gg_",
+    "--animationDuration": "--animationDuration_1qgdc",
+    "@moveWithScroll": "moveWithScroll_1qgdc",
+    "_withAnimation": "__withAnimation_1qgdc_gg_",
+    "_sticky": "__sticky_1qgdc_gg_",
+    "__SGroup": "___SGroup_1qgdc_gg_",
+    "_compact": "__compact_1qgdc_gg_",
+    "_use_secondary": "_use_secondary_1qgdc_gg_",
+    "_borders_both": "_borders_both_1qgdc_gg_",
+    "_borders_left": "_borders_left_1qgdc_gg_",
+    "_borders_right": "_borders_right_1qgdc_gg_",
+    "_gridArea": "__gridArea_1qgdc_gg_",
+    "__SGroupTitle": "___SGroupTitle_1qgdc_gg_",
+    "--gridArea": "--gridArea_1qgdc",
+    "_fixed": "__fixed_1qgdc_gg_",
+    "_sortable": "__sortable_1qgdc_gg_",
+    "__SSortWrapper": "___SSortWrapper_1qgdc_gg_",
+    "__SSortButton": "___SSortButton_1qgdc_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_1qgdc_gg_",
+    "_use_primary": "_use_primary_1qgdc_gg_",
+    "_visibleSort": "__visibleSort_1qgdc_gg_",
+    "_justifyContent_right": "_justifyContent_right_1qgdc_gg_",
+    "_changeSortSize": "__changeSortSize_1qgdc_gg_",
+    "_isSorted": "__isSorted_1qgdc_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_1qgdc_gg_",
+    "_shadowVertical": "__shadowVertical_1qgdc_gg_",
+    "_fixed_left": "_fixed_left_1qgdc_gg_",
+    "_shadowVertical_median": "_shadowVertical_median_1qgdc_gg_",
+    "_shadowVertical_start": "_shadowVertical_start_1qgdc_gg_",
+    "_fixed_right": "_fixed_right_1qgdc_gg_",
+    "_shadowVertical_end": "_shadowVertical_end_1qgdc_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) {
+  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 = _callSuper(this, Column2, [].concat(args));
+    _defineProperty(_this, "lockedCell", [null, false]);
+    _defineProperty(_this, "columnRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "sortWrapperRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "state", {
+      sortVisible: false
+    });
+    _defineProperty(_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(_this, "handleMouseEnter", function() {
+      _this.setState({
+        sortVisible: true
+      });
+    });
+    _defineProperty(_this, "handleMouseLeave", function() {
+      _this.setState({
+        sortVisible: false
+      });
+    });
+    _defineProperty(_this, "handleBlur", function(e) {
+      var relatedTarget = e.relatedTarget;
+      if (!isFocusInside(e.currentTarget, relatedTarget)) {
+        _this.setState({
+          sortVisible: false
+        });
+      }
+    });
+    _defineProperty(_this, "handleSort", function(e) {
+      var _this$asProps = _this.asProps, sort = _this$asProps.sort, onSortChange = _this$asProps.onSortChange, name = _this$asProps.name, sortable = _this$asProps.sortable;
+      if (sortable && onSortChange) {
+        var sortDirection = (sort === null || sort === void 0 ? void 0 : sort[0]) === name ? reversedSortDirection[sort[1]] : _this.defaultDirection;
+        onSortChange([name, sortDirection], e);
+      }
+    });
+    _defineProperty(_this, "handleSortClick", function(e) {
+      if (lastInteraction.isKeyboard()) {
+        e.stopPropagation();
+        _this.handleSort(e);
+      }
+    });
+    _defineProperty(_this, "handleFocusableCellKeyDown", function(e) {
+      handleKeydownFocusCell(_this.lockedCell, e);
+    });
+    _defineProperty(_this, "handleFocusableCellFocus", function(e) {
+      var cellElement = e.currentTarget;
+      var target = e.target;
+      if (lastInteraction.isKeyboard()) {
+        _this.setState({
+          sortVisible: true
+        }, function() {
+          handleFocusCell(_this.lockedCell, target, cellElement);
+        });
+      } else {
+        var _this$columnRef$curre3, _this$columnRef$curre4;
+        var focusableChildren = Array.from((_this$columnRef$curre3 = (_this$columnRef$curre4 = _this.columnRef.current) === null || _this$columnRef$curre4 === void 0 ? void 0 : _this$columnRef$curre4.children) !== null && _this$columnRef$curre3 !== void 0 ? _this$columnRef$curre3 : []).flatMap(function(node) {
+          return getFocusableIn(node);
+        });
+        if (isInteractiveElement(e.target) && _this.columnRef.current && focusableChildren.length > 1) {
+          _this.lockedCell[0] = _this.columnRef.current;
+          _this.lockedCell[1] = true;
+        }
+      }
+    });
+    _defineProperty(_this, "handleClick", function(e) {
+      var _this$columnRef$curre5, _this$columnRef$curre6;
+      var _this$asProps2 = _this.asProps, sortable = _this$asProps2.sortable, onClick = _this$asProps2.onClick, columnIndex = _this$asProps2.columnIndex;
+      if (sortable) {
+        _this.handleSort(e);
+      }
+      var focusableChildren = Array.from((_this$columnRef$curre5 = (_this$columnRef$curre6 = _this.columnRef.current) === null || _this$columnRef$curre6 === void 0 ? void 0 : _this$columnRef$curre6.children) !== null && _this$columnRef$curre5 !== void 0 ? _this$columnRef$curre5 : []).flatMap(function(node) {
+        return getFocusableIn(node);
+      });
+      if (isInteractiveElement(e.target) && _this.columnRef.current && focusableChildren.length > 1) {
+        _this.lockedCell[0] = _this.columnRef.current;
+        _this.lockedCell[1] = true;
+      }
+      onClick === null || onClick === void 0 || onClick(e, {
+        rowIndex: -1,
+        colIndex: columnIndex
+      });
+    });
+    return _this;
+  }
+  _inherits(Column2, _Component);
+  return _createClass(Column2, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$asProps3 = this.asProps, parent = _this$asProps3.parent, sticky = _this$asProps3.sticky, changeSortSize = _this$asProps3.changeSortSize, name = _this$asProps3.name, sort = _this$asProps3.sort, scrollDirection = _this$asProps3.scrollDirection;
+      if (parent && sticky && scrollDirection !== "horizontal") {
+        var _columnElement$parent, _groupElement$getBoun;
+        var columnElement = this.columnRef.current;
+        var groupElement = columnElement === null || columnElement === void 0 || (_columnElement$parent = columnElement.parentElement) === null || _columnElement$parent === void 0 ? void 0 : _columnElement$parent.children.item(0);
+        var groupRectHeight = (_groupElement$getBoun = groupElement === null || groupElement === void 0 ? void 0 : groupElement.getBoundingClientRect().height) !== null && _groupElement$getBoun !== void 0 ? _groupElement$getBoun : 0;
+        var topOffset = groupElement instanceof HTMLElement ? cssToIntDefault(groupElement.style.top) : 0;
+        columnElement === null || columnElement === void 0 || columnElement.style.setProperty("top", "".concat(groupRectHeight + topOffset, "px"));
+      }
+      if (canUseDOM() && changeSortSize && (sort === null || sort === void 0 ? void 0 : sort[0]) === name) {
+        this.changeTemplateColumnBySort();
+      }
+    }
+  }, {
+    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])) {
+        this.changeTemplateColumnBySort();
+      }
+    }
+  }, {
+    key: "changeTemplateColumnBySort",
+    value: function changeTemplateColumnBySort() {
+      var _this$asProps4 = this.asProps, tableRef = _this$asProps4.tableRef, gridTemplateColumns = _this$asProps4.gridTemplateColumns, columnIndex = _this$asProps4.columnIndex, sort = _this$asProps4.sort, name = _this$asProps4.name;
+      if ((sort === null || sort === void 0 ? void 0 : sort[0]) === 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 ((sort === null || sort === void 0 ? void 0 : sort[0]) !== name) {
+        setTimeout(function() {
+          if (tableRef.current) {
+            var currentGridTemplateColumns = tableRef.current.style.getPropertyValue("grid-template-columns");
+            if (currentGridTemplateColumns) {
+              tableRef.current.style.setProperty("grid-template-columns", currentGridTemplateColumns.split(" ").map(function(gtcWidth, index) {
+                if (index === columnIndex) {
+                  return gridTemplateColumns[index];
+                }
+                return gtcWidth;
+              }).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$asProps5 = this.asProps, styles = _this$asProps5.styles, sortable = _this$asProps5.sortable, sort = _this$asProps5.sort, uid = _this$asProps5.uid, name = _this$asProps5.name, parent = _this$asProps5.parent, sortableColumnDescribeId = _this$asProps5.sortableColumnDescribeId, Children = _this$asProps5.Children;
+      var _ref3 = sort !== null && sort !== void 0 ? sort : [void 0, void 0], _ref4 = _slicedToArray(_ref3, 2), sortBy = _ref4[0], sortDirection = _ref4[1];
+      var isSorted = sortBy === name && !!sortDirection;
+      var SSortIcon = isSorted ? SORTING_ICON[sortDirection] : SORTING_ICON[this.defaultDirection];
+      var visibleSort = Boolean(sortable) && (this.state.sortVisible || isSorted);
+      var ariaDescribedBy = [];
+      if (sortable) {
+        ariaDescribedBy.push(sortableColumnDescribeId);
+      }
+      if (parent) {
+        ariaDescribedBy.push("igc-table-".concat(uid, "-").concat(parent.name, "-group"));
+      }
+      var ariaSortValue = isSorted ? ARIA_SORT[sortDirection] : 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.handleFocusableCellFocus,
+        "onBlur": this.handleBlur,
+        "onKeyDown": this.handleFocusableCellKeyDown,
+        "visibleSort": visibleSort,
+        "isSorted": isSorted,
+        "innerOutline": true,
+        "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(" ") : void 0,
+        "aria-sort": ariaSortValue,
+        "use:onClick": this.handleClick
+      }, _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", {
+        "aria-label": ariaSortValue,
+        "size": 100,
+        "color": "--intergalactic-icon-primary-neutral",
+        "onClick": this.handleSortClick
+      }), /* @__PURE__ */ React.createElement(SSortButton.Addon, {
+        tag: SSortIcon
+      }))));
+    }
+  }]);
+})(Component);
+_defineProperty(Column, "displayName", "Column");
+_defineProperty(Column, "style", style);
+export {
+  Column
+};

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

@@ -0,0 +1,111 @@
+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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, assignProps, Component } from "@semcore/core";
+import { Box } from "@semcore/base-components";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import React__default from "react";
+import { DataTable } from "../DataTable/DataTable.mjs";
+/*!__reshadow-styles__:"./style.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '@keyframes moveWithScroll_1qgdc{0%{transform:translateY(0)}to{transform:translateY(var(--global-scroll-to))}}.___SGroupContainer_1qgdc_gg_,.___SHead_1qgdc_gg_{display:contents}.___SHead_1qgdc_gg_.__isDataEmpty_1qgdc_gg_.__gridTemplateColumns_1qgdc_gg_{display:grid;grid-template-columns:var(--gridTemplateColumns_1qgdc);overflow:auto;scrollbar-width:thin}.___SHead_1qgdc_gg_.__animationDuration_1qgdc_gg_>.___SColumn_1qgdc_gg_{transition:top var(--animationDuration_1qgdc) ease-out}.___SHead_1qgdc_gg_.__withAnimation_1qgdc_gg_.__sticky_1qgdc_gg_ .___SColumn_1qgdc_gg_,.___SHead_1qgdc_gg_.__withAnimation_1qgdc_gg_.__sticky_1qgdc_gg_ .___SGroup_1qgdc_gg_{animation-name:moveWithScroll_1qgdc;animation-timeline:--table-sticky-timeline;animation-range-start:exit-crossing calc(-1*var(--global-header-top));animation-range-end:exit-crossing calc(100% - var(--global-header-top));animation-timing-function:linear;animation-fill-mode:both;transform:none}.___SHead_1qgdc_gg_.__sticky_1qgdc_gg_ .___SColumn_1qgdc_gg_,.___SHead_1qgdc_gg_.__sticky_1qgdc_gg_ .___SGroup_1qgdc_gg_{position:sticky;top:0;z-index:18;transform:translateY(var(--global-scroll-translate));will-change:scroll-position}.___SHead_1qgdc_gg_.__compact_1qgdc_gg_ .___SColumn_1qgdc_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1qgdc_gg_,.___SGroup_1qgdc_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));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;line-height:var(--intergalactic-lh-100, 133%)}.___SGroup_1qgdc_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, rgb(248, 249, 248))}.___SGroup_1qgdc_gg_._use_primary_1qgdc_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1qgdc_gg_._use_primary_1qgdc_gg_:has(~.___SColumn_1qgdc_gg_.__visibleSort_1qgdc_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, rgb(234, 235, 235))}.___SGroup_1qgdc_gg_._use_secondary_1qgdc_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1qgdc_gg_._borders_both_1qgdc_gg_,.___SColumn_1qgdc_gg_._borders_left_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_both_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_left_1qgdc_gg_{border-left:1px solid var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@supports (color:color(display-p3 0 0 0%)){.___SColumn_1qgdc_gg_._borders_both_1qgdc_gg_,.___SColumn_1qgdc_gg_._borders_left_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_both_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_left_1qgdc_gg_{border-left:1px solid var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SColumn_1qgdc_gg_._borders_both_1qgdc_gg_,.___SColumn_1qgdc_gg_._borders_left_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_both_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_left_1qgdc_gg_{border-left:1px solid var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SColumn_1qgdc_gg_._borders_both_1qgdc_gg_,.___SColumn_1qgdc_gg_._borders_right_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_both_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_right_1qgdc_gg_{border-right:1px solid var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@supports (color:color(display-p3 0 0 0%)){.___SColumn_1qgdc_gg_._borders_both_1qgdc_gg_,.___SColumn_1qgdc_gg_._borders_right_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_both_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_right_1qgdc_gg_{border-right:1px solid var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SColumn_1qgdc_gg_._borders_both_1qgdc_gg_,.___SColumn_1qgdc_gg_._borders_right_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_both_1qgdc_gg_,.___SGroup_1qgdc_gg_._borders_right_1qgdc_gg_{border-right:1px solid var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07));background-color:var(--intergalactic-table-th-primary-cell, rgb(248, 249, 248))}@supports (color:color(display-p3 0 0 0%)){.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_{border-bottom:1px solid var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_{border-bottom:1px solid var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, rgb(234, 235, 235)) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_.__visibleSort_1qgdc_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, rgb(234, 235, 235))}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_.__visibleSort_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_.__visibleSort_1qgdc_gg_ .___SSortButton_1qgdc_gg_,.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_.__visibleSort_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_::before,.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_.__visibleSort_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_::before{display:flex;opacity:1}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_._justifyContent_right_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_{position:absolute}.___SColumn_1qgdc_gg_._use_primary_1qgdc_gg_._justifyContent_right_1qgdc_gg_.__changeSortSize_1qgdc_gg_.__isSorted_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_,.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_._justifyContent_right_1qgdc_gg_.__changeSortSize_1qgdc_gg_.__isSorted_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_{position:relative}.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, rgba(0, 12, 8, 0.161));background-color:var(--intergalactic-table-th-secondary-cell, rgb(255, 255, 255))}@supports (color:color(display-p3 0 0 0%)){.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_{border-bottom:1px solid var(--intergalactic-border-table-accent, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_{border-bottom:1px solid var(--intergalactic-border-table-accent, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, rgb(255, 255, 255)) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_.__visibleSort_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_.__visibleSort_1qgdc_gg_ .___SSortButton_1qgdc_gg_{display:flex;opacity:1}.___SColumn_1qgdc_gg_._use_secondary_1qgdc_gg_._justifyContent_right_1qgdc_gg_ .___SSortWrapper_1qgdc_gg_{position:absolute}.___SColumn_1qgdc_gg_.__gridArea_1qgdc_gg_,.___SGroupTitle_1qgdc_gg_.__gridArea_1qgdc_gg_,.___SGroup_1qgdc_gg_.__gridArea_1qgdc_gg_{grid-area:var(--gridArea_1qgdc)}.___SHead_1qgdc_gg_ .___SColumn_1qgdc_gg_.__fixed_1qgdc_gg_,.___SHead_1qgdc_gg_ .___SGroup_1qgdc_gg_.__fixed_1qgdc_gg_,.___SHead_1qgdc_gg_.__sticky_1qgdc_gg_ .___SColumn_1qgdc_gg_.__fixed_1qgdc_gg_{position:sticky;z-index:19}@media (hover:hover){.___SColumn_1qgdc_gg_.__sortable_1qgdc_gg_:hover{cursor:pointer}}.___SSortWrapper_1qgdc_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_1qgdc_gg_,.___SSortWrapper_1qgdc_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1qgdc_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_1qgdc_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, rgba(0, 5, 2, 0.433));margin-left:var(--intergalactic-spacing-1x, 4px)}@supports (color:color(display-p3 0 0 0%)){.___SSortButton_1qgdc_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, rgba(0, 5, 2, 0.433))}@media (color-gamut:p3){.___SSortButton_1qgdc_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, color(display-p3 0.00333 0.01824 0.00791 / 0.433))}}}.___SHead_1qgdc_gg_._sideIndents_wide_1qgdc_gg_ .___SColumn_1qgdc_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_1qgdc_gg_._sideIndents_wide_1qgdc_gg_ .___SColumn_1qgdc_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_1qgdc_gg_{cursor:pointer}.___SColumn_1qgdc_gg_.__fixed_1qgdc_gg_.__shadowVertical_1qgdc_gg_:after,.___SGroup_1qgdc_gg_.__fixed_1qgdc_gg_.__shadowVertical_1qgdc_gg_:after{content:"";position:absolute;pointer-events:none;display:none;top:0;width:5px;height:100%;z-index:5}.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_,.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_{margin-right:-5px;border-right-color:transparent}.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_primary_1qgdc_gg_,.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_._use_primary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_primary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_._use_primary_1qgdc_gg_{padding-right:calc(var(--intergalactic-spacing-3x, 12px) + 5px)}.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_secondary_1qgdc_gg_,.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_._use_secondary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_secondary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_._use_secondary_1qgdc_gg_{padding-right:calc(var(--intergalactic-spacing-2x, 8px) + 5px)}.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_:after,.___SColumn_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_:after,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_median_1qgdc_gg_:after,.___SGroup_1qgdc_gg_._fixed_left_1qgdc_gg_._shadowVertical_start_1qgdc_gg_:after{display:block;right:0;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(26, 30, 26, 0.08) 20.55%, transparent 100%))}.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_,.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_{margin-left:-5px;border-left-color:transparent}.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_._use_primary_1qgdc_gg_,.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_primary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_._use_primary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_primary_1qgdc_gg_{padding-left:calc(var(--intergalactic-spacing-3x, 12px) + 5px)}.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_._use_secondary_1qgdc_gg_,.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_secondary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_._use_secondary_1qgdc_gg_,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_._use_secondary_1qgdc_gg_{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + 5px)}.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_:after,.___SColumn_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_:after,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_end_1qgdc_gg_:after,.___SGroup_1qgdc_gg_._fixed_right_1qgdc_gg_._shadowVertical_median_1qgdc_gg_:after{display:block;left:0;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(26, 30, 26, 0.08) 20.55%, transparent 100%))}',
+    /*__inner_css_end__*/
+    "1qgdc_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHead": "___SHead_1qgdc_gg_",
+    "__SGroupContainer": "___SGroupContainer_1qgdc_gg_",
+    "_isDataEmpty": "__isDataEmpty_1qgdc_gg_",
+    "_gridTemplateColumns": "__gridTemplateColumns_1qgdc_gg_",
+    "--gridTemplateColumns": "--gridTemplateColumns_1qgdc",
+    "_animationDuration": "__animationDuration_1qgdc_gg_",
+    "__SColumn": "___SColumn_1qgdc_gg_",
+    "--animationDuration": "--animationDuration_1qgdc",
+    "@moveWithScroll": "moveWithScroll_1qgdc",
+    "_withAnimation": "__withAnimation_1qgdc_gg_",
+    "_sticky": "__sticky_1qgdc_gg_",
+    "__SGroup": "___SGroup_1qgdc_gg_",
+    "_compact": "__compact_1qgdc_gg_",
+    "_use_secondary": "_use_secondary_1qgdc_gg_",
+    "_borders_both": "_borders_both_1qgdc_gg_",
+    "_borders_left": "_borders_left_1qgdc_gg_",
+    "_borders_right": "_borders_right_1qgdc_gg_",
+    "_gridArea": "__gridArea_1qgdc_gg_",
+    "__SGroupTitle": "___SGroupTitle_1qgdc_gg_",
+    "--gridArea": "--gridArea_1qgdc",
+    "_fixed": "__fixed_1qgdc_gg_",
+    "_sortable": "__sortable_1qgdc_gg_",
+    "__SSortWrapper": "___SSortWrapper_1qgdc_gg_",
+    "__SSortButton": "___SSortButton_1qgdc_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_1qgdc_gg_",
+    "_use_primary": "_use_primary_1qgdc_gg_",
+    "_visibleSort": "__visibleSort_1qgdc_gg_",
+    "_justifyContent_right": "_justifyContent_right_1qgdc_gg_",
+    "_changeSortSize": "__changeSortSize_1qgdc_gg_",
+    "_isSorted": "__isSorted_1qgdc_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_1qgdc_gg_",
+    "_shadowVertical": "__shadowVertical_1qgdc_gg_",
+    "_fixed_left": "_fixed_left_1qgdc_gg_",
+    "_shadowVertical_median": "_shadowVertical_median_1qgdc_gg_",
+    "_shadowVertical_start": "_shadowVertical_start_1qgdc_gg_",
+    "_fixed_right": "_fixed_right_1qgdc_gg_",
+    "_shadowVertical_end": "_shadowVertical_end_1qgdc_gg_"
+  })
+);
+var Group = /* @__PURE__ */ (function(_Component) {
+  function Group2() {
+    _classCallCheck(this, Group2);
+    return _callSuper(this, Group2, arguments);
+  }
+  _inherits(Group2, _Component);
+  return _createClass(Group2, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this = this;
+      setTimeout(function() {
+        _this.forceUpdate();
+      }, 0);
+    }
+  }, {
+    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, _this2 = this;
+      var SGroupContainer = Box;
+      var SGroup = Box;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, title = _this$asProps.title, columns = _this$asProps.columns, withConfig = _this$asProps.withConfig;
+      var groupColumns = columns !== null && columns !== void 0 ? columns : [];
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React__default.createElement(SGroupContainer, _ref2.cn("SGroupContainer", {
+        "data-group-container": true
+      }), /* @__PURE__ */ React__default.createElement(SGroup, _ref2.cn("SGroup", _objectSpread({}, assignProps({
+        "style": style,
+        "__excludeProps": ["title"],
+        "id": this.groupId
+      }, _ref))), withConfig ? /* @__PURE__ */ React__default.createElement(Children, _ref2.cn("Children", {})) : title), withConfig ? groupColumns.map(function(column, _i) {
+        return /* @__PURE__ */ React__default.createElement(DataTable.Head.Column, _extends({
+          key: column.name
+        }, column, {
+          "aria-describedby": _this2.groupId
+        }));
+      }) : /* @__PURE__ */ React__default.createElement(Children, _ref2.cn("Children", {})));
+    }
+  }]);
+})(Component);
+_defineProperty(Group, "displayName", "Group");
+_defineProperty(Group, "style", style);
+_defineProperty(Group, "enhance", [uniqueIDEnhancement()]);
+export {
+  Group
+};