@semcore/data-table 4.50.2-prerelease.0 → 4.51.0-prerelease.0

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

@@ -0,0 +1,307 @@
+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 _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, createComponent } from "@semcore/core";
+import { Box, ScreenReaderOnly } from "@semcore/base-components";
+import Checkbox from "@semcore/checkbox";
+import React__default from "react";
+import { Column } from "./Column.mjs";
+import { Group } from "./Group.mjs";
+import { SelectableRows } from "../../store/SelectableRows.mjs";
+import { UNIQ_ROW_KEY, SELECT_ALL, 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 HeadRoot = /* @__PURE__ */ (function(_Component) {
+  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 = _callSuper(this, HeadRoot2, [].concat(args));
+    _defineProperty(_this, "unsubscribeSelectAll", void 0);
+    _defineProperty(_this, "unsubscribeSetIndeterminate", void 0);
+    _defineProperty(_this, "handleSelectAll", function(value, event) {
+      var selectedRows = _this.asProps.selectedRows;
+      if (Array.isArray(selectedRows)) {
+        var _this$asProps$onChang, _this$asProps;
+        var idsSet = new Set(selectedRows);
+        if (value) {
+          _this.selectableRows.forEach(function(row) {
+            idsSet.add(row[UNIQ_ROW_KEY]);
+          });
+        } else {
+          _this.selectableRows.forEach(function(row) {
+            idsSet["delete"](row[UNIQ_ROW_KEY]);
+          });
+        }
+        (_this$asProps$onChang = (_this$asProps = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang === void 0 || _this$asProps$onChang.call(_this$asProps, Array.from(idsSet), event);
+      } else if (selectedRows) {
+        if (value) {
+          selectedRows.selectAll();
+        } else {
+          selectedRows.clearAllAvailable();
+        }
+      }
+    });
+    _defineProperty(_this, "handleClickSelectAll", function(value) {
+      return function(event) {
+        event === null || event === void 0 || event.preventDefault();
+        event === null || event === void 0 || event.stopPropagation();
+        _this.handleSelectAll(value, event);
+      };
+    });
+    return _this;
+  }
+  _inherits(HeadRoot2, _Component);
+  return _createClass(HeadRoot2, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var selectedRows = this.asProps.selectedRows;
+      if (selectedRows && !Array.isArray(selectedRows)) {
+        this.unsubscribeSelectAll = selectedRows.on(SelectableRows.SELECT_ALL_EVENT, function() {
+          _this2.forceUpdate();
+        });
+        this.unsubscribeSetIndeterminate = selectedRows.on(SelectableRows.SET_INDETERMINATE_EVENT, function() {
+          _this2.forceUpdate();
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$unsubscribeSele, _this$unsubscribeSetI;
+      (_this$unsubscribeSele = this.unsubscribeSelectAll) === null || _this$unsubscribeSele === void 0 || _this$unsubscribeSele.call(this);
+      (_this$unsubscribeSetI = this.unsubscribeSetIndeterminate) === null || _this$unsubscribeSetI === void 0 || _this$unsubscribeSetI.call(this);
+    }
+  }, {
+    key: "sortableColumnDescribeId",
+    value: function sortableColumnDescribeId() {
+      var uid = this.asProps.uid;
+      return "".concat(uid, "-column-sortable-describer");
+    }
+  }, {
+    key: "getGroupProps",
+    value: function getGroupProps(props, index) {
+      var fixed = props.fixed, columns = props.columns;
+      var _this$asProps2 = this.asProps, use = _this$asProps2.use, gridAreaGroupMap = _this$asProps2.gridAreaGroupMap, children = _this$asProps2.children, getFixedStyle = _this$asProps2.getFixedStyle, shadowVertical = _this$asProps2.shadowVertical, top = _this$asProps2.top, scrollDirection = _this$asProps2.scrollDirection;
+      var groupColumns = columns !== null && columns !== void 0 ? columns : [];
+      var firstColumn = groupColumns[0];
+      var lastColumn = groupColumns[groupColumns.length - 1];
+      var style2 = {};
+      if (fixed === "left" && firstColumn) {
+        var _getFixedStyle = getFixedStyle({
+          name: firstColumn.name,
+          fixed: "left"
+        }), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
+        if (name !== void 0 && value !== void 0) {
+          style2[name] = value;
+        }
+      }
+      if (fixed === "right" && lastColumn) {
+        var _getFixedStyle3 = getFixedStyle({
+          name: lastColumn.name,
+          fixed: "right"
+        }), _getFixedStyle4 = _slicedToArray(_getFixedStyle3, 2), _name = _getFixedStyle4[0], _value = _getFixedStyle4[1];
+        if (_name !== void 0 && _value !== void 0) {
+          style2[_name] = _value;
+        }
+      }
+      if (top && scrollDirection !== "horizontal") {
+        style2.top = "".concat(top, "px");
+      }
+      return {
+        use,
+        gridArea: gridAreaGroupMap.get(index),
+        withConfig: children === void 0,
+        getFixedStyle,
+        shadowVertical: firstColumn.showShadowVertical || lastColumn.showShadowVertical ? shadowVertical : void 0,
+        style: style2,
+        scrollDirection
+      };
+    }
+  }, {
+    key: "getColumnProps",
+    value: function getColumnProps(_, index) {
+      var _this$asProps3 = this.asProps, use = _this$asProps3.use, columns = _this$asProps3.columns, sort = _this$asProps3.sort, onSortChange = _this$asProps3.onSortChange, tableRef = _this$asProps3.tableRef, gridTemplateColumns = _this$asProps3.gridTemplateColumns, gridTemplateAreas = _this$asProps3.gridTemplateAreas, sticky = _this$asProps3.sticky, top = _this$asProps3.top, selectedRows = _this$asProps3.selectedRows, h = _this$asProps3.h, getFixedStyle = _this$asProps3.getFixedStyle, onCellClick = _this$asProps3.onCellClick, shadowVertical = _this$asProps3.shadowVertical, scrollDirection = _this$asProps3.scrollDirection;
+      var column = columns[index];
+      if (index === 0 && selectedRows && columns[index + 1].fixed) {
+        column.fixed = "left";
+      }
+      var _getFixedStyle5 = getFixedStyle(column), _getFixedStyle6 = _slicedToArray(_getFixedStyle5, 2), name = _getFixedStyle6[0], value = _getFixedStyle6[1];
+      var style2 = {};
+      if (top && scrollDirection !== "horizontal") {
+        style2.top = "".concat(top, "px");
+      }
+      if (name !== void 0 && value !== void 0) {
+        style2[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,
+        "onClick": onCellClick,
+        "shadowVertical": column.showShadowVertical ? shadowVertical : void 0,
+        scrollDirection
+      };
+    }
+  }, {
+    key: "areAllRowsSelected",
+    get: function get() {
+      var selectedRows = this.asProps.selectedRows;
+      if (Array.isArray(selectedRows)) {
+        return selectedRows.length > 0 && this.selectableRows.every(function(row) {
+          return selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.includes(row[UNIQ_ROW_KEY]);
+        });
+      } else if (selectedRows) {
+        return selectedRows.isAllSelected();
+      }
+    }
+  }, {
+    key: "isIndeterminate",
+    get: function get() {
+      var selectedRows = this.asProps.selectedRows;
+      if (Array.isArray(selectedRows)) {
+        return this.selectableRows.some(function(row) {
+          return selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.includes(row[UNIQ_ROW_KEY]);
+        });
+      } else if (selectedRows) {
+        return selectedRows.isIndeterminate();
+      }
+    }
+  }, {
+    key: "selectableRows",
+    get: function get() {
+      var _this$asProps4 = this.asProps, columns = _this$asProps4.columns, flatRows = _this$asProps4.flatRows;
+      var mappedFlatRows = flatRows.filter(function(r) {
+        var _columns$;
+        var nextColumnName = (_columns$ = columns[1]) === null || _columns$ === void 0 ? void 0 : _columns$.name;
+        return r[nextColumnName] !== void 0;
+      });
+      return mappedFlatRows;
+    }
+  }, {
+    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, sticky = _this$asProps5.sticky, animationDuration = _this$asProps5.animationDuration, isDataEmpty = _this$asProps5.isDataEmpty, gridTemplateColumns = _this$asProps5.gridTemplateColumns;
+      var areAllRowsSelected = this.areAllRowsSelected;
+      var indeterminate = this.isIndeterminate && !areAllRowsSelected;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(SHead, _ref2.cn("SHead", _objectSpread({}, assignProps({
+        "role": "row",
+        "aria-rowindex": 1,
+        "sticky": sticky,
+        "use:animationDuration": animationDuration ? "".concat(animationDuration, "ms") : void 0,
+        "isDataEmpty": isDataEmpty,
+        "use:gridTemplateColumns": gridTemplateColumns.join(" "),
+        "tabIndex": isDataEmpty ? 0 : void 0
+      }, _ref))), selectedRows && /* @__PURE__ */ React__default.createElement(SHeadCheckboxCol, _ref2.cn("SHeadCheckboxCol", {
+        "name": SELECT_ALL,
+        "onClick": this.handleClickSelectAll(!areAllRowsSelected)
+      }), /* @__PURE__ */ React__default.createElement(Checkbox, _ref2.cn("Checkbox", {
+        "checked": areAllRowsSelected,
+        "indeterminate": indeterminate,
+        "aria-label": getI18nText("DataTable.Header.selectAllCheckbox:aria-label"),
+        "onChange": this.handleSelectAll
+      }), /* @__PURE__ */ React__default.createElement(Checkbox.Value, null, /* @__PURE__ */ React__default.createElement(Checkbox.Value.Control, null), /* @__PURE__ */ React__default.createElement(Checkbox.Value.CheckMark, {
+        mt: 0
+      })))), children ? /* @__PURE__ */ React__default.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, treeColumns.map(function(column, _i) {
+        if ("columns" in column) {
+          var _column$columns;
+          var columnsName = (_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.map(function(c) {
+            return c.name;
+          }).join("/");
+          return /* @__PURE__ */ React__default.createElement(DataTable.Head.Group, _extends({
+            key: columnsName
+          }, column, {
+            name: columnsName,
+            title: ""
+          }));
+        }
+        return /* @__PURE__ */ React__default.createElement(DataTable.Head.Column, _extends({
+          key: column.name
+        }, column));
+      }))), /* @__PURE__ */ React__default.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+        "aria-hidden": true,
+        "id": this.sortableColumnDescribeId()
+      }), getI18nText("sortableColumn")));
+    }
+  }]);
+})(Component);
+_defineProperty(HeadRoot, "displayName", "Head");
+_defineProperty(HeadRoot, "style", style);
+var Head = createComponent(HeadRoot, {
+  Column,
+  Group
+});
+export {
+  Head
+};

package/lib/esm/components/Head/style.shadow.css

@@ -0,0 +1,292 @@
+SHead, SGroupContainer {
+  display: contents;
+}
+
+SHead[isDataEmpty][gridTemplateColumns] {
+  display: grid;
+  grid-template-columns: var(--gridTemplateColumns);
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+SHead[animationDuration] > SColumn {
+  transition: top var(--animationDuration) ease-out;
+}
+
+@keyframes moveWithScroll {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(var(--global-scroll-to));
+  }
+}
+
+SHead[withAnimation][sticky] SColumn, SHead[withAnimation][sticky] SGroup {
+  animation-name: moveWithScroll;
+  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[sticky] SColumn, SHead[sticky] SGroup {
+  position: sticky;
+  top: 0;
+  z-index: 18;
+  transform: translateY(var(--global-scroll-translate));
+  will-change: scroll-position;
+}
+
+SHead[compact] SColumn {
+  padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px);
+}
+
+SGroup, SColumn {
+  display: flex;
+  align-items: flex-start;
+  font-size: var(--intergalactic-fs-100, 12px);
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 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 {
+  justify-content: center;
+  text-align: center;
+  background-color: var(--intergalactic-table-th-primary-cell, oklch(0.98 0.001 180));
+}
+
+SGroup[use='primary'] {
+  padding: var(--intergalactic-spacing-3x, 12px);
+
+  &:has(~ SColumn[visibleSort]) {
+    background-color: var(--intergalactic-table-th-primary-cell-hover, oklch(0.94 0.002 180));
+  }
+}
+SGroup[use='secondary'] {
+  padding: var(--intergalactic-spacing-2x, 8px);
+}
+
+SGroup[borders='both'], SColumn[borders='both'], SGroup[borders='left'], SColumn[borders='left'] {
+  border-left: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
+}
+
+SGroup[borders='both'], SColumn[borders='both'], SGroup[borders='right'], SColumn[borders='right'] {
+  border-right: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
+}
+
+SColumn[use='primary'] {
+  padding: var(--intergalactic-spacing-3x, 12px);
+  border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
+  background-color: var(--intergalactic-table-th-primary-cell, oklch(0.98 0.001 180));
+
+  SSortWrapper::before {
+    background: linear-gradient(
+      270deg,
+      var(--intergalactic-table-th-primary-cell-hover, oklch(0.94 0.002 180)) 67.5%,
+      rgba(224, 225, 233, 0) 105%
+    );
+  }
+
+  &[visibleSort] {
+    background-color: var(--intergalactic-table-th-primary-cell-hover, oklch(0.94 0.002 180));
+
+    SSortWrapper {
+      flex-basis: calc(var(--intergalactic-spacing-1x, 4px) + 16px);
+      opacity: 1;
+
+      &::before {
+        display: flex;
+        opacity: 1;
+      }
+    }
+
+    SSortButton {
+      display: flex;
+      opacity: 1;
+    }
+  }
+
+  &[justifyContent='right'] {
+    SSortWrapper {
+      position: absolute;
+    }
+
+    &[changeSortSize][isSorted] {
+      SSortWrapper {
+        position: relative;
+      }
+    }
+  }
+}
+
+SColumn[use='secondary'] {
+  padding: var(--intergalactic-spacing-2x, 8px);
+  border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161));
+  background-color: var(--intergalactic-table-th-secondary-cell, oklch(1 0 0));
+
+  SSortWrapper::before {
+    background: linear-gradient(
+      270deg,
+      var(--intergalactic-table-th-secondary-cell, oklch(1 0 0)) 67.5%,
+      rgba(255, 255, 255, 0) 105%
+    );
+  }
+
+  &[visibleSort] {
+    SSortWrapper {
+      flex-basis: calc(var(--intergalactic-spacing-1x, 4px) + 16px);
+      opacity: 1;
+
+      &::before {
+        display: flex;
+        opacity: 1;
+      }
+    }
+
+    SSortButton {
+      display: flex;
+      opacity: 1;
+    }
+  }
+
+  &[justifyContent='right'] {
+    SSortWrapper {
+      position: absolute;
+    }
+
+    &[changeSortSize][isSorted] {
+      SSortWrapper {
+        position: relative;
+      }
+    }
+  }
+}
+
+SColumn[gridArea], SGroup[gridArea], SGroupTitle[gridArea] {
+  grid-area: var(--gridArea);
+}
+
+SHead[sticky] SColumn[fixed], SHead SColumn[fixed], SHead SGroup[fixed] {
+  position: sticky;
+  /* because up resizable */
+  z-index: 19;
+}
+
+SColumn[sortable]:hover {
+  cursor: pointer;
+}
+
+SSortWrapper {
+  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;
+}
+
+SSortWrapper:before {
+  display: none;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+SSortButton {
+  display: none;
+  fill: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.1 0.023 159.1 / 0.433));
+  position: absolute;
+  right: 0;
+  margin-left: var(--intergalactic-spacing-1x, 4px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+SHead[sideIndents='wide'] {
+  SColumn:first-child {
+    padding-left: var(--intergalactic-spacing-5x, 20px);
+  }
+  SColumn:last-child {
+    padding-right: var(--intergalactic-spacing-5x, 20px);
+  }
+}
+
+SHeadCheckboxCol {
+  cursor: pointer;
+}
+
+
+SColumn[fixed][shadowVertical], SGroup[fixed][shadowVertical] {
+  &:after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    display: none;
+    top: 0;
+    width: 5px;
+    height: 100%;
+    z-index: 5;
+  }
+}
+
+
+/*SColumnChildrenWrapper*/
+
+SColumn[fixed='left'][shadowVertical='median'],
+SColumn[fixed='left'][shadowVertical='start'],
+SGroup[fixed='left'][shadowVertical='median'],
+SGroup[fixed='left'][shadowVertical='start'] {
+  margin-right: -5px;
+  border-right-color: transparent;
+
+  &[use='primary'] {
+    padding-right: calc(var(--intergalactic-spacing-3x, 12px) + 5px);
+  }
+  &[use='secondary'] {
+    padding-right: calc(var(--intergalactic-spacing-2x, 8px) + 5px);
+  }
+
+  &:after {
+    display: block;
+    right: 0;
+    background: var(--intergalactic-scroll-area-shadow-left,
+    linear-gradient(to right, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%));
+  }
+}
+SColumn[fixed='right'][shadowVertical='median'],
+SColumn[fixed='right'][shadowVertical='end'],
+SGroup[fixed='right'][shadowVertical='median'],
+SGroup[fixed='right'][shadowVertical='end'] {
+  margin-left: -5px;
+  border-left-color: transparent;
+
+  &[use='primary'] {
+    padding-left: calc(var(--intergalactic-spacing-3x, 12px) + 5px);
+  }
+  &[use='secondary'] {
+    padding-left: calc(var(--intergalactic-spacing-2x, 8px) + 5px);
+  }
+
+  &:after {
+    display: block;
+    left: 0;
+    background: var(--intergalactic-scroll-area-shadow-right,
+    linear-gradient(to left, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%));
+  }
+}