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

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

@@ -0,0 +1,262 @@
+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, assignProps, Component } from "@semcore/core";
+import * as React from "react";
+import { Flex } from "@semcore/base-components";
+import SortDesc from "@semcore/icon/SortDesc/m";
+import SortAsc from "@semcore/icon/SortAsc/m";
+import { ButtonLink } from "@semcore/button";
+import { getFocusableIn } from "@semcore/core/lib/utils/focus-lock/getFocusableIn";
+import { SORT_ICON_WIDTH } from "../../Head.mjs";
+import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SHead_182z1_gg_{display:contents}.___SHead_182z1_gg_.__sticky_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:0;z-index:1}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{top:0}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroupContainer_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:40px;z-index:1}.___SHead_182z1_gg_.__compact_182z1_gg_ .___SColumn_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_182z1_gg_,.___SGroup_182z1_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SGroup_182z1_gg_._use_primary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-3x, 12px);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_182z1_gg_._use_secondary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-2x, 8px);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SGroup_182z1_gg_:has(.___SColumn_182z1_gg_.__visibleSort_182z1_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_left_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_left_182z1_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_right_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_right_182z1_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_,.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before,.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before{display:flex;opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_{display:flex;opacity:1}.___SColumn_182z1_gg_.__gridArea_182z1_gg_,.___SGroupTitle_182z1_gg_.__gridArea_182z1_gg_,.___SGroup_182z1_gg_.__gridArea_182z1_gg_{grid-area:var(--gridArea_182z1)}.___SHead_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_ .___SGroup_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{position:sticky;z-index:2}@media (hover:hover){.___SColumn_182z1_gg_.__sortable_182z1_gg_:hover{cursor:pointer}}.___SSortWrapper_182z1_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_182z1_gg_,.___SSortWrapper_182z1_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_182z1_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_182z1_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}',
+    "182z1_gg_"
+  ), {
+    "__SHead": "___SHead_182z1_gg_",
+    "_sticky": "__sticky_182z1_gg_",
+    "__SColumn": "___SColumn_182z1_gg_",
+    "__SGroup": "___SGroup_182z1_gg_",
+    "__SGroupContainer": "___SGroupContainer_182z1_gg_",
+    "_compact": "__compact_182z1_gg_",
+    "_use_primary": "_use_primary_182z1_gg_",
+    "_use_secondary": "_use_secondary_182z1_gg_",
+    "_visibleSort": "__visibleSort_182z1_gg_",
+    "_borders_both": "_borders_both_182z1_gg_",
+    "_borders_left": "_borders_left_182z1_gg_",
+    "_borders_right": "_borders_right_182z1_gg_",
+    "_gridArea": "__gridArea_182z1_gg_",
+    "__SGroupTitle": "___SGroupTitle_182z1_gg_",
+    "--gridArea": "--gridArea_182z1",
+    "_fixed": "__fixed_182z1_gg_",
+    "_sortable": "__sortable_182z1_gg_",
+    "__SSortWrapper": "___SSortWrapper_182z1_gg_",
+    "__SSortButton": "___SSortButton_182z1_gg_"
+  })
+);
+var SORTING_ICON = {
+  desc: SortDesc,
+  asc: SortAsc
+};
+var ARIA_SORT = {
+  desc: "descending",
+  asc: "ascending"
+};
+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() {
+      _this.setState({
+        sortVisible: false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleSortClick", function(e) {
+      var _this$asProps = _this.asProps, sort = _this$asProps.sort, onSortChange = _this$asProps.onSortChange, name = _this$asProps.name;
+      if (sort && onSortChange) {
+        var sortDirection = sort[0] === name ? reversedSortDirection[sort[1]] : DEFAULT_DIRECTION;
+        onSortChange([name, sortDirection], e);
+      }
+    });
+    _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();
+            }
+          }
+        } 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: "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: "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;
+      var SSortIcon = sort ? SORTING_ICON[sort[1]] : SORTING_ICON["asc"];
+      var isSorted = (sort === null || sort === void 0 ? void 0 : sort[0]) === name;
+      var visibleSort = sortable && (this.state.sortVisible || isSorted);
+      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": this.handleSortClick
+      }, _ref))), this.asProps.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,89 @@
+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, assignProps, Component } from "@semcore/core";
+import * as React from "react";
+import { Box } from "@semcore/base-components";
+import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SHead_182z1_gg_{display:contents}.___SHead_182z1_gg_.__sticky_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:0;z-index:1}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{top:0}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroupContainer_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:40px;z-index:1}.___SHead_182z1_gg_.__compact_182z1_gg_ .___SColumn_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_182z1_gg_,.___SGroup_182z1_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SGroup_182z1_gg_._use_primary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-3x, 12px);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_182z1_gg_._use_secondary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-2x, 8px);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SGroup_182z1_gg_:has(.___SColumn_182z1_gg_.__visibleSort_182z1_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_left_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_left_182z1_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_right_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_right_182z1_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_,.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before,.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before{display:flex;opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_{display:flex;opacity:1}.___SColumn_182z1_gg_.__gridArea_182z1_gg_,.___SGroupTitle_182z1_gg_.__gridArea_182z1_gg_,.___SGroup_182z1_gg_.__gridArea_182z1_gg_{grid-area:var(--gridArea_182z1)}.___SHead_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_ .___SGroup_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{position:sticky;z-index:2}@media (hover:hover){.___SColumn_182z1_gg_.__sortable_182z1_gg_:hover{cursor:pointer}}.___SSortWrapper_182z1_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_182z1_gg_,.___SSortWrapper_182z1_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_182z1_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_182z1_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}',
+    "182z1_gg_"
+  ), {
+    "__SHead": "___SHead_182z1_gg_",
+    "_sticky": "__sticky_182z1_gg_",
+    "__SColumn": "___SColumn_182z1_gg_",
+    "__SGroup": "___SGroup_182z1_gg_",
+    "__SGroupContainer": "___SGroupContainer_182z1_gg_",
+    "_compact": "__compact_182z1_gg_",
+    "_use_primary": "_use_primary_182z1_gg_",
+    "_use_secondary": "_use_secondary_182z1_gg_",
+    "_visibleSort": "__visibleSort_182z1_gg_",
+    "_borders_both": "_borders_both_182z1_gg_",
+    "_borders_left": "_borders_left_182z1_gg_",
+    "_borders_right": "_borders_right_182z1_gg_",
+    "_gridArea": "__gridArea_182z1_gg_",
+    "__SGroupTitle": "___SGroupTitle_182z1_gg_",
+    "--gridArea": "--gridArea_182z1",
+    "_fixed": "__fixed_182z1_gg_",
+    "_sortable": "__sortable_182z1_gg_",
+    "__SSortWrapper": "___SSortWrapper_182z1_gg_",
+    "__SSortButton": "___SSortButton_182z1_gg_"
+  })
+);
+var Group = /* @__PURE__ */ function(_Component) {
+  _inherits(Group2, _Component);
+  var _super = _createSuper(Group2);
+  function Group2() {
+    var _this;
+    _classCallCheck(this, Group2);
+    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), "mounted", false);
+    return _this;
+  }
+  _createClass(Group2, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.mounted = true;
+      this.forceUpdate();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2, _children$, _children;
+      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;
+      var children = getOriginChildren(Children);
+      var firstName = (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : _children$.props.name;
+      var lastName = (_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", {
+        "display": "contents"
+      }), this.mounted && /* @__PURE__ */ React.createElement(SGroup, _ref2.cn("SGroup", _objectSpread({}, assignProps({
+        "style": style2
+      }, _ref))), title), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})));
+    }
+  }]);
+  return Group2;
+}(Component);
+_defineProperty(Group, "displayName", "Group");
+_defineProperty(Group, "style", style);
+export {
+  Group
+};

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

@@ -0,0 +1,134 @@
+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 { getFixedStyle, getScrollOffsetValue } from "../../utils.mjs";
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SHead_182z1_gg_{display:contents}.___SHead_182z1_gg_.__sticky_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:0;z-index:1}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{top:0}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroupContainer_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:40px;z-index:1}.___SHead_182z1_gg_.__compact_182z1_gg_ .___SColumn_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_182z1_gg_,.___SGroup_182z1_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SGroup_182z1_gg_._use_primary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-3x, 12px);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_182z1_gg_._use_secondary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-2x, 8px);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SGroup_182z1_gg_:has(.___SColumn_182z1_gg_.__visibleSort_182z1_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_left_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_left_182z1_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_right_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_right_182z1_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_,.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before,.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before{display:flex;opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_{display:flex;opacity:1}.___SColumn_182z1_gg_.__gridArea_182z1_gg_,.___SGroupTitle_182z1_gg_.__gridArea_182z1_gg_,.___SGroup_182z1_gg_.__gridArea_182z1_gg_{grid-area:var(--gridArea_182z1)}.___SHead_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_ .___SGroup_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{position:sticky;z-index:2}@media (hover:hover){.___SColumn_182z1_gg_.__sortable_182z1_gg_:hover{cursor:pointer}}.___SSortWrapper_182z1_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_182z1_gg_,.___SSortWrapper_182z1_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_182z1_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_182z1_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}',
+    "182z1_gg_"
+  ), {
+    "__SHead": "___SHead_182z1_gg_",
+    "_sticky": "__sticky_182z1_gg_",
+    "__SColumn": "___SColumn_182z1_gg_",
+    "__SGroup": "___SGroup_182z1_gg_",
+    "__SGroupContainer": "___SGroupContainer_182z1_gg_",
+    "_compact": "__compact_182z1_gg_",
+    "_use_primary": "_use_primary_182z1_gg_",
+    "_use_secondary": "_use_secondary_182z1_gg_",
+    "_visibleSort": "__visibleSort_182z1_gg_",
+    "_borders_both": "_borders_both_182z1_gg_",
+    "_borders_left": "_borders_left_182z1_gg_",
+    "_borders_right": "_borders_right_182z1_gg_",
+    "_gridArea": "__gridArea_182z1_gg_",
+    "__SGroupTitle": "___SGroupTitle_182z1_gg_",
+    "--gridArea": "--gridArea_182z1",
+    "_fixed": "__fixed_182z1_gg_",
+    "_sortable": "__sortable_182z1_gg_",
+    "__SSortWrapper": "___SSortWrapper_182z1_gg_",
+    "__SSortButton": "___SSortButton_182z1_gg_"
+  })
+);
+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());
+    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$asProps = this.asProps, use = _this$asProps.use, gridAreaGroupMap = _this$asProps.gridAreaGroupMap;
+      return {
+        use,
+        gridArea: gridAreaGroupMap.get(index),
+        fixedColumnsMap: this.fixedColumnsMap
+      };
+    }
+  }, {
+    key: "getColumnProps",
+    value: function getColumnProps(_, index) {
+      var _this$asProps2 = this.asProps, use = _this$asProps2.use, columns = _this$asProps2.columns, sort = _this$asProps2.sort, onSortChange = _this$asProps2.onSortChange, tableRef = _this$asProps2.tableRef, gridTemplateColumns = _this$asProps2.gridTemplateColumns, gridTemplateAreas = _this$asProps2.gridTemplateAreas;
+      var column = columns[index];
+      var _getFixedStyle = getFixedStyle(column, columns), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
+      var style2 = {};
+      if (name !== void 0 && value !== void 0) {
+        style2[name] = value;
+        this.fixedColumnsMap.set(column.name, value);
+      }
+      return {
+        use,
+        "aria-colindex": index + 1,
+        ref: function ref(node) {
+          return column.ref(node);
+        },
+        style: style2,
+        gridArea: column.gridArea,
+        fixed: column.fixed,
+        borders: column.borders,
+        sort,
+        onSortChange,
+        parent: column.parent,
+        sortableColumnDescribeId: this.sortableColumnDescribeId(),
+        columnIndex: index,
+        tableRef,
+        gridTemplateColumns,
+        gridTemplateAreas
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SHead = Box;
+      var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, columns = _this$asProps3.columns;
+      _this$asProps3.tableRef;
+      _this$asProps3.withScrollBar;
+      var getI18nText = _this$asProps3.getI18nText;
+      var _getScrollOffsetValue = getScrollOffsetValue(columns), _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2);
+      _getScrollOffsetValue2[0];
+      _getScrollOffsetValue2[1];
+      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))), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {}))), /* @__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
+};

package/lib/esm/index.mjs

@@ -1,5 +1,8 @@
+import { ACCORDION, DataTable } from "./components/DataTable/DataTable.mjs";
 import { ROW_GROUP, default as default2, wrapDataTable, wrapDataTableCell, wrapDataTableRow } from "./DataTable.mjs";
 export {
+  ACCORDION,
+  DataTable,
   ROW_GROUP,
   default2 as default,
   wrapDataTable,

package/lib/esm/translations/en.json.mjs

@@ -1,6 +1,8 @@
 const sortableColumn = "Sortable";
 const en = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Show details",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Hide details"
 };
 export {
   en as default,

package/lib/esm/utils.mjs

@@ -1,10 +1,10 @@
 var getScrollOffsetValue = function getScrollOffsetValue2(columns) {
   return columns.reduce(function(acc, column) {
     if (column.fixed === "left") {
-      acc[0] += column.width;
+      acc[0] += column.calculatedWidth;
     }
     if (column.fixed === "right") {
-      acc[1] += column.width;
+      acc[1] += column.calculatedWidth;
     }
     return acc;
   }, [0, 0]);
@@ -40,10 +40,10 @@ var getFixedStyle = function getFixedStyle2(cell, columns) {
   };
   var columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
   if (columnsFixed.length < 1) return [side, 0];
-  var vars = columnsFixed.map(function(column) {
-    return "var(--".concat(column.name, "_width)");
-  });
-  return [side, vars.length === 1 ? vars[0] : "calc(".concat(vars.join(" + "), ")")];
+  var sum = columnsFixed.reduce(function(acc, column) {
+    return acc + column.calculatedWidth;
+  }, 0);
+  return [side, "".concat(sum, "px")];
 };
 export {
   flattenColumns,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "16.0.0-prerelease.12",
+  "version": "16.0.0-prerelease.13",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,9 +14,9 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/icon": "16.0.0-prerelease.12",
-    "@semcore/flex-box": "16.0.0-prerelease.12",
-    "@semcore/scroll-area": "16.0.0-prerelease.12"
+    "@semcore/icon": "16.0.0-prerelease.13",
+    "@semcore/flex-box": "16.0.0-prerelease.13",
+    "@semcore/scroll-area": "16.0.0-prerelease.13"
   },
   "devDependencies": {
     "@types/react": "18.0.21",
@@ -36,7 +36,7 @@
     "csstype": "3.0.8"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.12"
+    "@semcore/base-components": "^16.0.0-prerelease.13"
   },
   "repository": {
     "type": "git",
@@ -44,6 +44,6 @@
     "directory": "semcore/data-table"
   },
   "scripts": {
-    "build": "pnpm semcore-builder --source=ts && pnpm vite build"
+    "build": "pnpm vite build"
   }
 }

package/vite.config.ts

@@ -9,9 +9,6 @@ export default mergeConfig(
       lib: {
         entry: './src/index.ts',
       },
-      rollupOptions: {
-        external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
-      },
     },
   }),
 );