@semcore/data-table 4.49.1 → 16.0.0-prerelease.11

package/lib/esm/Head.mjs

@@ -1,257 +1,369 @@
-import P from "@babel/runtime/helpers/esm/objectSpread2";
-import F from "@babel/runtime/helpers/esm/slicedToArray";
-import L from "@babel/runtime/helpers/esm/classCallCheck";
-import j from "@babel/runtime/helpers/esm/createClass";
-import m from "@babel/runtime/helpers/esm/assertThisInitialized";
-import G from "@babel/runtime/helpers/esm/inherits";
-import U from "@babel/runtime/helpers/esm/createSuper";
-import p from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as z, assignProps as q, Component as J } from "@semcore/core";
-import n from "react";
-import { ScreenReaderOnly as Q, Flex as X, Box as D } from "@semcore/flex-box";
-import _, { hideScrollBarsFromScreenReadersContext as Y } from "@semcore/scroll-area";
-import Z from "@semcore/icon/SortDesc/m";
-import ee from "@semcore/icon/SortAsc/m";
-import { callAllEventHandlers as A } from "@semcore/utils/lib/assignProps";
-import { flattenColumns as B, getFixedStyle as te, getScrollOffsetValue as re } from "./utils.mjs";
-import ie from "@semcore/utils/lib/logger";
-import { setRef as O } from "@semcore/utils/lib/ref";
-import { getFocusableIn as V } from "@semcore/utils/lib/focus-lock/getFocusableIn";
-var k = 20, ae = {
-  desc: Z,
-  asc: ee
-}, oe = {
+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, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { ScreenReaderOnly, Flex, Box } from "@semcore/flex-box";
+import ScrollArea, { hideScrollBarsFromScreenReadersContext } from "@semcore/scroll-area";
+import SortDesc from "@semcore/icon/SortDesc/m";
+import SortAsc from "@semcore/icon/SortAsc/m";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
+import { flattenColumns, getFixedStyle, getScrollOffsetValue } from "./utils.mjs";
+import logger from "@semcore/core/lib/utils/logger";
+import { setRef } from "@semcore/core/lib/utils/ref";
+import { getFocusableIn } from "@semcore/core/lib/utils/focus-lock/getFocusableIn";
+var SORT_ICON_WIDTH = 20;
+var SORTING_ICON = {
+  desc: SortDesc,
+  asc: SortAsc
+};
+var ariaSort = {
   desc: "descending",
   asc: "ascending"
-}, N = {
+};
+var displayContents = {
   display: "contents"
 };
-function M(R) {
-  var x = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, y = parseFloat(R);
-  return Number.isNaN(y) && (y = x), Math.round(y);
+function cssToIntDefault(value) {
+  var defaultValue = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+  var result = parseFloat(value);
+  if (Number.isNaN(result)) {
+    result = defaultValue;
+  }
+  return Math.round(result);
 }
-var ne = /* @__PURE__ */ function(R) {
-  G(y, R);
-  var x = U(y);
-  function y() {
-    var i;
-    L(this, y);
-    for (var t = arguments.length, s = new Array(t), l = 0; l < t; l++)
-      s[l] = arguments[l];
-    return i = x.call.apply(x, [this].concat(s)), p(m(i), "columns", []), p(m(i), "headCellMap", /* @__PURE__ */ new Map()), p(m(i), "lockedCell", [null, !1]), p(m(i), "sortWrapperRefs", /* @__PURE__ */ new Map()), p(m(i), "defaultWidths", /* @__PURE__ */ new Map()), p(m(i), "handleKeyDown", function(e) {
-      if (e.currentTarget === i.lockedCell[0]) {
-        var r = Array.from(i.lockedCell[0].children).flatMap(function(c) {
-          return V(c);
+var Head = /* @__PURE__ */ function(_Component) {
+  _inherits(Head2, _Component);
+  var _super = _createSuper(Head2);
+  function Head2() {
+    var _this;
+    _classCallCheck(this, Head2);
+    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), "columns", []);
+    _defineProperty(_assertThisInitialized(_this), "headCellMap", /* @__PURE__ */ new Map());
+    _defineProperty(_assertThisInitialized(_this), "lockedCell", [null, false]);
+    _defineProperty(_assertThisInitialized(_this), "sortWrapperRefs", /* @__PURE__ */ new Map());
+    _defineProperty(_assertThisInitialized(_this), "defaultWidths", /* @__PURE__ */ new Map());
+    _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 (i.lockedCell[1]) {
+        if (_this.lockedCell[1]) {
           if (e.key === "Escape") {
-            var a;
-            (a = i.lockedCell[0]) === null || a === void 0 || a.focus(), i.lockedCell[1] = !1;
+            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(), e.key === "Tab") {
-            if (e.target === r[0] && e.shiftKey) {
-              var o;
-              (o = r[r.length - 1]) === null || o === void 0 || o.focus(), e.preventDefault();
-            } else if (e.target === r[r.length - 1] && !e.shiftKey) {
-              var d;
-              (d = r[0]) === null || d === void 0 || d.focus(), e.preventDefault();
+          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 h;
-          i.lockedCell[1] = !0, (h = r[0]) === null || h === void 0 || h.focus();
+          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 v;
-          (v = i.lockedCell[0]) === null || v === void 0 || v.setAttribute("inert", "");
+          var _this$lockedCell$2;
+          (_this$lockedCell$2 = _this.lockedCell[0]) === null || _this$lockedCell$2 === void 0 ? void 0 : _this$lockedCell$2.setAttribute("inert", "");
         }
       }
-    }), p(m(i), "onFocusCell", function(e) {
+    });
+    _defineProperty(_assertThisInitialized(_this), "onFocusCell", function(e) {
       if (e.target === e.currentTarget) {
-        var r = Array.from(e.currentTarget.children).flatMap(function(a) {
-          return V(a);
+        var focusableChildren = Array.from(e.currentTarget.children).flatMap(function(node) {
+          return getFocusableIn(node);
         });
-        r.length === 1 ? r[0].focus() : r.length > 1 && (i.lockedCell = [e.currentTarget, !1]);
+        if (focusableChildren.length === 1) {
+          focusableChildren[0].focus();
+        } else if (focusableChildren.length > 1) {
+          _this.lockedCell = [e.currentTarget, false];
+        }
       }
-    }), p(m(i), "bindHandlerSortClick", function(e) {
-      return function(r) {
-        i.asProps.$onSortClick(e, r);
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerSortClick", function(name) {
+      return function(event) {
+        _this.asProps.$onSortClick(name, event);
       };
-    }), p(m(i), "bindHandlerKeyDown", function(e) {
-      return function(r) {
-        (r.key === "Enter" || r.key === " ") && (r.preventDefault(), i.asProps.$onSortClick(e, r));
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerKeyDown", function(name) {
+      return function(event) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          _this.asProps.$onSortClick(name, event);
+        }
       };
-    }), p(m(i), "makeSortRefHandler", function(e) {
-      return function(r) {
-        r && i.sortWrapperRefs.set(r, e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "makeSortRefHandler", function(active) {
+      return function(ref) {
+        if (ref) {
+          _this.sortWrapperRefs.set(ref, active);
+        }
       };
-    }), p(m(i), "makeColumnRefHandler", function(e, r) {
-      return function(a) {
-        if (O(e.props.ref, a), i.headCellMap.set(r, a), e.props.forwardRef && O(e.props.forwardRef, a), a && a.getAttribute("scope") === "col" && !i.defaultWidths.has(a)) {
-          var o = window.getComputedStyle(a);
-          i.defaultWidths.set(a, {
-            minWidth: M(o.getPropertyValue("min-width")),
-            computedWidth: M(o.getPropertyValue("width")),
-            maxWidth: M(o.getPropertyValue("max-width")) || null,
-            useForRecalculation: !!e.props.sortSizeRecalculation
-          });
+    });
+    _defineProperty(_assertThisInitialized(_this), "makeColumnRefHandler", function(column, index) {
+      return function(ref) {
+        setRef(column.props.ref, ref);
+        _this.headCellMap.set(index, ref);
+        if (column.props.forwardRef) {
+          setRef(column.props.forwardRef, ref);
+        }
+        if (ref && ref.getAttribute("scope") === "col") {
+          if (!_this.defaultWidths.has(ref)) {
+            var computedStyle = window.getComputedStyle(ref);
+            _this.defaultWidths.set(ref, {
+              minWidth: cssToIntDefault(computedStyle.getPropertyValue("min-width")),
+              computedWidth: cssToIntDefault(computedStyle.getPropertyValue("width")),
+              maxWidth: cssToIntDefault(computedStyle.getPropertyValue("max-width")) || null,
+              useForRecalculation: Boolean(column.props.sortSizeRecalculation)
+            });
+          }
         }
       };
-    }), p(m(i), "changeMaxNodeWidth", function(e, r) {
-      var a = 0, o = null, d = [];
-      i.defaultWidths.forEach(function(c, f) {
-        c.computedWidth > a && f !== r && (o = f, a = c.computedWidth), c.useForRecalculation && d.push(f);
+    });
+    _defineProperty(_assertThisInitialized(_this), "changeMaxNodeWidth", function(diff, exceptNode) {
+      var lastMaxWidth = 0;
+      var node = null;
+      var recalculatedNodes = [];
+      _this.defaultWidths.forEach(function(value, key) {
+        if (value.computedWidth > lastMaxWidth && key !== exceptNode) {
+          node = key;
+          lastMaxWidth = value.computedWidth;
+        }
+        if (value.useForRecalculation) {
+          recalculatedNodes.push(key);
+        }
       });
-      var h = function(f, g) {
-        var S, u, W = (S = i.defaultWidths.get(f)) === null || S === void 0 ? void 0 : S.computedWidth, b = (u = i.defaultWidths.get(f)) === null || u === void 0 ? void 0 : u.minWidth;
-        if (W) {
-          var C = W - g;
-          f.style.setProperty("max-width", "".concat(C, "px")), b && f.style.setProperty("min-width", "min(".concat(C, "px, ").concat(b, "px)"));
+      var setNodeMinWidth = function setNodeMinWidth2(node2, diff2) {
+        var _this$defaultWidths$g, _this$defaultWidths$g2;
+        var defaultNodeWidth = (_this$defaultWidths$g = _this.defaultWidths.get(node2)) === null || _this$defaultWidths$g === void 0 ? void 0 : _this$defaultWidths$g.computedWidth;
+        var defaultNodeMinWidth = (_this$defaultWidths$g2 = _this.defaultWidths.get(node2)) === null || _this$defaultWidths$g2 === void 0 ? void 0 : _this$defaultWidths$g2.minWidth;
+        if (defaultNodeWidth) {
+          var maxWidth = defaultNodeWidth - diff2;
+          node2.style.setProperty("max-width", "".concat(maxWidth, "px"));
+          if (defaultNodeMinWidth) {
+            node2.style.setProperty("min-width", "min(".concat(maxWidth, "px, ").concat(defaultNodeMinWidth, "px)"));
+          }
         }
       };
-      if (d.length > 0) {
-        var v = e / d.length;
-        d.forEach(function(c) {
-          h(c, v);
+      if (recalculatedNodes.length > 0) {
+        var diffPart = diff / recalculatedNodes.length;
+        recalculatedNodes.forEach(function(node2) {
+          setNodeMinWidth(node2, diffPart);
         });
-      } else o !== null && h(o, e);
-    }), p(m(i), "backToColumnDefaults", function(e) {
-      var r, a, o = (r = i.defaultWidths.get(e)) === null || r === void 0 ? void 0 : r.minWidth, d = (a = i.defaultWidths.get(e)) === null || a === void 0 ? void 0 : a.maxWidth;
-      e.style.setProperty("min-width", o + "px"), d ? e.style.setProperty("max-width", d + "px") : e.style.removeProperty("max-width");
-    }), p(m(i), "calculateActiveColumnMinWidth", function(e) {
-      var r, a, o = document.createElement("div"), d = window.getComputedStyle(e);
-      e.childNodes.forEach(function(g) {
-        i.sortWrapperRefs.get(g) || o.append(g.cloneNode(!0));
-      }), o.style.setProperty("visibility", "hidden", "important");
-      var h = ["display", "flex", "margin", "padding", "background", "font-style", "font-width", "font-size", "font-weight"];
-      h.forEach(function(g) {
-        o.style.setProperty(g, d.getPropertyValue(g), d.getPropertyPriority(g));
-      }), o.style.setProperty("width", "fit-content", "important"), document.body.appendChild(o);
-      var v = Math.ceil(o.getBoundingClientRect().width);
-      document.body.removeChild(o);
-      var c = (r = (a = i.defaultWidths.get(e)) === null || a === void 0 ? void 0 : a.computedWidth) !== null && r !== void 0 ? r : 0;
-      if (v >= c)
-        e.style.setProperty("min-width", c + k + "px"), i.changeMaxNodeWidth(k, e);
-      else {
-        var f = c - v;
-        f < k && (e.style.setProperty("min-width", v + k + "px"), i.changeMaxNodeWidth(f, e));
+      } else if (node !== null) {
+        setNodeMinWidth(node, diff);
       }
-    }), i;
+    });
+    _defineProperty(_assertThisInitialized(_this), "backToColumnDefaults", function(node) {
+      var _this$defaultWidths$g3, _this$defaultWidths$g4;
+      var defaultNodeMinWidth = (_this$defaultWidths$g3 = _this.defaultWidths.get(node)) === null || _this$defaultWidths$g3 === void 0 ? void 0 : _this$defaultWidths$g3.minWidth;
+      var defaultNodeMaxWidth = (_this$defaultWidths$g4 = _this.defaultWidths.get(node)) === null || _this$defaultWidths$g4 === void 0 ? void 0 : _this$defaultWidths$g4.maxWidth;
+      node.style.setProperty("min-width", defaultNodeMinWidth + "px");
+      if (defaultNodeMaxWidth) {
+        node.style.setProperty("max-width", defaultNodeMaxWidth + "px");
+      } else {
+        node.style.removeProperty("max-width");
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "calculateActiveColumnMinWidth", function(node) {
+      var _this$defaultWidths$g5, _this$defaultWidths$g6;
+      var clonedColumn = document.createElement("div");
+      var computedStyle = window.getComputedStyle(node);
+      node.childNodes.forEach(function(node2) {
+        if (!_this.sortWrapperRefs.get(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$defaultWidths$g5 = (_this$defaultWidths$g6 = _this.defaultWidths.get(node)) === null || _this$defaultWidths$g6 === void 0 ? void 0 : _this$defaultWidths$g6.computedWidth) !== null && _this$defaultWidths$g5 !== void 0 ? _this$defaultWidths$g5 : 0;
+      if (computedWidth >= defaultNodeWidth) {
+        node.style.setProperty("min-width", defaultNodeWidth + SORT_ICON_WIDTH + "px");
+        _this.changeMaxNodeWidth(SORT_ICON_WIDTH, node);
+      } else {
+        var freeSpace = defaultNodeWidth - computedWidth;
+        if (freeSpace < SORT_ICON_WIDTH) {
+          node.style.setProperty("min-width", computedWidth + SORT_ICON_WIDTH + "px");
+          _this.changeMaxNodeWidth(freeSpace, node);
+        }
+      }
+    });
+    return _this;
   }
-  return j(y, [{
+  _createClass(Head2, [{
     key: "sortableColumnDescribeId",
-    value: function() {
-      var t = this.asProps.uid;
-      return "".concat(t, "-column-sortable-describer");
+    value: function sortableColumnDescribeId() {
+      var uid = this.asProps.uid;
+      return "".concat(uid, "-column-sortable-describer");
     }
   }, {
     key: "componentDidUpdate",
-    value: function() {
-      var t = this, s = null;
-      this.columns.forEach(function(l) {
-        var e = l.props, r = e.changeSortSize, a = e.ref;
-        l.active && r && a.current && (s = a.current), a.current && t.backToColumnDefaults(a.current);
-      }), s && this.calculateActiveColumnMinWidth(s);
+    value: function componentDidUpdate() {
+      var _this2 = this;
+      var activeColumn = null;
+      this.columns.forEach(function(column) {
+        var _column$props = column.props, changeSortSize = _column$props.changeSortSize, ref = _column$props.ref;
+        if (column.active && changeSortSize && ref.current) {
+          activeColumn = ref.current;
+        }
+        if (ref.current) {
+          _this2.backToColumnDefaults(ref.current);
+        }
+      });
+      if (activeColumn) {
+        this.calculateActiveColumnMinWidth(activeColumn);
+      }
     }
   }, {
     key: "renderColumns",
-    value: function(t, s) {
-      var l = this;
-      return t.map(function(e) {
-        return l.renderColumn(e, s);
+    value: function renderColumns(columns, width) {
+      var _this3 = this;
+      return columns.map(function(column) {
+        return _this3.renderColumn(column, width);
       });
     }
   }, {
     key: "renderColumn",
-    value: function(t, s) {
-      var l, e, r = this.asProps, a = r.styles, o = r.use, d = r.hidden, h = r.uid, v = X, c = D, f = "div", g = ae[t.sortDirection], S = t.sortable && t.active ? oe[t.sortDirection] : void 0, u = ((e = t.columns) === null || e === void 0 ? void 0 : e.length) > 0, W = u ? B(t.columns).length : 1, b = te(t, this.columns), C = F(b, 2), H = C[0], I = C[1], E = P({
-        flexBasis: t.props.flex === void 0 && "".concat(s * W, "%")
-      }, t.props.style);
-      H !== void 0 && I !== void 0 && (E[H] = I), t.setVar || (E.flexBasis = "var(".concat(t.varWidth, ")"));
-      var w = [];
-      if (t.sortable && !t.active && w.push(this.sortableColumnDescribeId()), t.parentColumns.length > 0) {
-        var K = t.parentColumns[0].name;
-        w.push("igc-table-".concat(h, "-").concat(K, "-group"));
+    value: function renderColumn(column, width) {
+      var _ref2, _column$columns;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, use = _this$asProps.use, hidden = _this$asProps.hidden, uid = _this$asProps.uid;
+      var SColumn = Flex;
+      var SHead = Box;
+      var SSortWrapper = "div";
+      var SSortIcon = SORTING_ICON[column.sortDirection];
+      var ariaSortValue = column.sortable && column.active ? ariaSort[column.sortDirection] : void 0;
+      var isGroup = ((_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.length) > 0;
+      var cSize = isGroup ? flattenColumns(column.columns).length : 1;
+      var _getFixedStyle = getFixedStyle(column, this.columns), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
+      var style = _objectSpread({
+        flexBasis: column.props.flex === void 0 && "".concat(width * cSize, "%")
+      }, column.props.style);
+      if (name !== void 0 && value !== void 0) {
+        style[name] = value;
+      }
+      if (!column.setVar) {
+        style["flexBasis"] = "var(".concat(column.varWidth, ")");
+      }
+      var ariaDescribedBy = [];
+      if (column.sortable && !column.active) {
+        ariaDescribedBy.push(this.sortableColumnDescribeId());
+      }
+      if (column.parentColumns.length > 0) {
+        var parentName = column.parentColumns[0].name;
+        ariaDescribedBy.push("igc-table-".concat(uid, "-").concat(parentName, "-group"));
       }
-      var T = this.columns.findIndex(function($) {
-        return $.name === t.name;
+      var index = this.columns.findIndex(function(flattenCol) {
+        return flattenCol.name === column.name;
       });
-      return l = z(a), /* @__PURE__ */ n.createElement(v, l.cn("SColumn", P(P({
-        role: u ? void 0 : "columnheader",
-        scope: u ? "colgroup" : "col",
-        key: t.name,
-        id: "igc-table-".concat(h, "-").concat(t.name),
-        use: o,
-        fixed: t.fixed,
-        resizable: t.resizable,
-        sortable: t.sortable,
-        borderLeft: u ? !1 : t.borderLeft,
-        borderRight: u ? !1 : t.borderRight,
-        active: u ? !1 : t.active,
-        group: u,
-        tabIndex: u ? void 0 : -1,
-        __excludeProps: ["hidden"]
-      }, t.props), {}, {
-        ref: this.makeColumnRefHandler(t, T),
-        onClick: A(t.props.onClick, t.sortable ? this.bindHandlerSortClick(t.name) : void 0),
-        onKeyDown: A(t.props.onKeyDown, t.sortable ? this.bindHandlerKeyDown(t.name) : void 0, this.handleKeyDown),
-        style: E,
-        hidden: d,
-        "aria-sort": S,
-        "aria-colindex": u ? void 0 : T + 1,
-        onFocus: this.onFocusCell,
-        "aria-describedby": w.length > 0 ? w.join(" ") : void 0
-      })), u ? /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(v, l.cn("SColumn", {
-        id: "igc-table-".concat(h, "-").concat(t.name, "-group"),
-        groupHead: !0,
-        use: o,
-        active: t.active,
-        borderLeft: t.borderLeft,
-        borderRight: t.borderRight
-      }), /* @__PURE__ */ n.createElement("div", l.cn("div", {}), t.props.children)), /* @__PURE__ */ n.createElement(c, l.cn("SHead", {}), this.renderColumns(t.columns, 100 / W))) : /* @__PURE__ */ n.createElement(n.Fragment, null, t.props.children, t.sortable ? /* @__PURE__ */ n.createElement(f, l.cn("SSortWrapper", {
-        ref: this.makeSortRefHandler(t.active)
-      }), /* @__PURE__ */ n.createElement(g, l.cn("SSortIcon", {}))) : null));
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SColumn, _ref2.cn("SColumn", _objectSpread(_objectSpread({
+        "role": isGroup ? void 0 : "columnheader",
+        "scope": isGroup ? "colgroup" : "col",
+        "key": column.name,
+        "id": "igc-table-".concat(uid, "-").concat(column.name),
+        "use": use,
+        "fixed": column.fixed,
+        "resizable": column.resizable,
+        "sortable": column.sortable,
+        "borderLeft": isGroup ? false : column.borderLeft,
+        "borderRight": isGroup ? false : column.borderRight,
+        "active": isGroup ? false : column.active,
+        "group": isGroup,
+        "tabIndex": isGroup ? void 0 : -1,
+        "__excludeProps": ["hidden"]
+      }, column.props), {}, {
+        "ref": this.makeColumnRefHandler(column, index),
+        "onClick": callAllEventHandlers(column.props.onClick, column.sortable ? this.bindHandlerSortClick(column.name) : void 0),
+        "onKeyDown": callAllEventHandlers(column.props.onKeyDown, column.sortable ? this.bindHandlerKeyDown(column.name) : void 0, this.handleKeyDown),
+        "style": style,
+        "hidden": hidden,
+        "aria-sort": ariaSortValue,
+        "aria-colindex": isGroup ? void 0 : index + 1,
+        "onFocus": this.onFocusCell,
+        "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(" ") : void 0,
+        "innerOutline": true
+      })), isGroup ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SColumn, _ref2.cn("SColumn", {
+        "id": "igc-table-".concat(uid, "-").concat(column.name, "-group"),
+        "groupHead": true,
+        "use": use,
+        "active": column.active,
+        "borderLeft": column.borderLeft,
+        "borderRight": column.borderRight
+      }), /* @__PURE__ */ React.createElement("div", _ref2.cn("div", {}), column.props.children)), /* @__PURE__ */ React.createElement(SHead, _ref2.cn("SHead", {}), this.renderColumns(column.columns, 100 / cSize))) : /* @__PURE__ */ React.createElement(React.Fragment, null, column.props.children, column.sortable ? /* @__PURE__ */ React.createElement(SSortWrapper, _ref2.cn("SSortWrapper", {
+        "ref": this.makeSortRefHandler(column.active)
+      }), /* @__PURE__ */ React.createElement(SSortIcon, _ref2.cn("SSortIcon", {}))) : null));
     }
   }, {
     key: "render",
-    value: function() {
-      var t = this.asProps, s, l = D, e = D, r = this.asProps, a = r.Children, o = r.styles, d = r.columnsChildren, h = r.onResize, v = r.$scrollRef, c = r.sticky, f = r.withScrollBar, g = r.animationsDisabled, S = r.getI18nText;
-      this.columns = B(d);
-      var u = re(this.columns), W = F(u, 2), b = W[0], C = W[1];
-      return ie.warn(c, "'sticky' property is deprecated, use '<Sticky/>' wrapper", this.asProps["data-ui-name"] || y.displayName), s = z(o), /* @__PURE__ */ n.createElement(Y.Provider, {
-        value: !0
-      }, /* @__PURE__ */ n.createElement(e, s.cn("SHeadWrapper", {
-        sticky: c,
-        animationsDisabled: g
-      }), /* @__PURE__ */ n.createElement(_, s.cn("ScrollArea", {
-        leftOffset: b,
-        rightOffset: C,
-        shadow: !0,
-        onResize: h
-      }), /* @__PURE__ */ n.createElement(_.Container, {
-        ref: v,
+    value: function render() {
+      var _ref = this.asProps, _ref3;
+      var SHead = Box;
+      var SHeadWrapper = Box;
+      var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, styles = _this$asProps2.styles, columnsChildren = _this$asProps2.columnsChildren, onResize = _this$asProps2.onResize, $scrollRef = _this$asProps2.$scrollRef, sticky = _this$asProps2.sticky, withScrollBar = _this$asProps2.withScrollBar, animationsDisabled = _this$asProps2.animationsDisabled, getI18nText = _this$asProps2.getI18nText;
+      this.columns = flattenColumns(columnsChildren);
+      var _getScrollOffsetValue = getScrollOffsetValue(this.columns), _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2), offsetLeftSum = _getScrollOffsetValue2[0], offsetRightSum = _getScrollOffsetValue2[1];
+      logger.warn(sticky, "'sticky' property is deprecated, use '<Sticky/>' wrapper", this.asProps["data-ui-name"] || Head2.displayName);
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
+        value: true
+      }, /* @__PURE__ */ React.createElement(SHeadWrapper, _ref3.cn("SHeadWrapper", {
+        "sticky": sticky,
+        "animationsDisabled": animationsDisabled
+      }), /* @__PURE__ */ React.createElement(ScrollArea, _ref3.cn("ScrollArea", {
+        "leftOffset": offsetLeftSum,
+        "rightOffset": offsetRightSum,
+        "shadow": true,
+        "onResize": onResize
+      }), /* @__PURE__ */ React.createElement(ScrollArea.Container, {
+        ref: $scrollRef,
         role: "rowgroup",
         tabIndex: -1,
         zIndex: 2
-      }, /* @__PURE__ */ n.createElement(l, s.cn("SHead", P({}, q({
-        role: "row",
-        __excludeProps: ["hidden"]
-      }, t))), this.renderColumns(d, 100 / this.columns.length))), !!f && /* @__PURE__ */ n.createElement("div", s.cn("div", {
-        style: N
-      }), /* @__PURE__ */ n.createElement("div", s.cn("div", {
-        style: N
-      }), /* @__PURE__ */ n.createElement("div", s.cn("div", {
-        style: N
-      }), /* @__PURE__ */ n.createElement(_.Bar, {
+      }, /* @__PURE__ */ React.createElement(SHead, _ref3.cn("SHead", _objectSpread({}, assignProps({
+        "role": "row",
+        "__excludeProps": ["hidden"]
+      }, _ref))), this.renderColumns(columnsChildren, 100 / this.columns.length))), Boolean(withScrollBar) && /* @__PURE__ */ React.createElement("div", _ref3.cn("div", {
+        "style": displayContents
+      }), /* @__PURE__ */ React.createElement("div", _ref3.cn("div", {
+        "style": displayContents
+      }), /* @__PURE__ */ React.createElement("div", _ref3.cn("div", {
+        "style": displayContents
+      }), /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
         orientation: "horizontal"
-      }))))), a.origin, /* @__PURE__ */ n.createElement(Q, s.cn("ScreenReaderOnly", {
-        "aria-hidden": !0,
-        id: this.sortableColumnDescribeId()
-      }), S == null ? void 0 : S("sortableColumn"))));
+      }))))), Children.origin, /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref3.cn("ScreenReaderOnly", {
+        "aria-hidden": true,
+        "id": this.sortableColumnDescribeId()
+      }), getI18nText === null || getI18nText === void 0 ? void 0 : getI18nText("sortableColumn"))));
     }
-  }]), y;
-}(J);
-p(ne, "displayName", void 0);
+  }]);
+  return Head2;
+}(Component);
+_defineProperty(Head, "displayName", void 0);
 export {
-  k as SORT_ICON_WIDTH,
-  ne as default
+  SORT_ICON_WIDTH,
+  Head as default
 };

package/lib/esm/index.mjs

@@ -1,8 +1,8 @@
-import { ROW_GROUP as l, default as r, wrapDataTable as t, wrapDataTableCell as p, wrapDataTableRow as w } from "./DataTable.mjs";
+import { ROW_GROUP, default as default2, wrapDataTable, wrapDataTableCell, wrapDataTableRow } from "./DataTable.mjs";
 export {
-  l as ROW_GROUP,
-  r as default,
-  t as wrapDataTable,
-  p as wrapDataTableCell,
-  w as wrapDataTableRow
+  ROW_GROUP,
+  default2 as default,
+  wrapDataTable,
+  wrapDataTableCell,
+  wrapDataTableRow
 };