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

package/lib/esm/Head.mjs

@@ -1,368 +0,0 @@
-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/utils/lib/assignProps";
-import { flattenColumns, getFixedStyle, getScrollOffsetValue } from "./utils.mjs";
-import logger from "@semcore/utils/lib/logger";
-import { setRef } from "@semcore/utils/lib/ref";
-import { getFocusableIn } from "@semcore/utils/lib/focus-lock/getFocusableIn";
-var SORT_ICON_WIDTH = 20;
-var SORTING_ICON = {
-  desc: SortDesc,
-  asc: SortAsc
-};
-var ariaSort = {
-  desc: "descending",
-  asc: "ascending"
-};
-var displayContents = {
-  display: "contents"
-};
-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 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 (_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), "onFocusCell", function(e) {
-      if (e.target === e.currentTarget) {
-        var focusableChildren = Array.from(e.currentTarget.children).flatMap(function(node) {
-          return getFocusableIn(node);
-        });
-        if (focusableChildren.length === 1) {
-          focusableChildren[0].focus();
-        } else if (focusableChildren.length > 1) {
-          _this.lockedCell = [e.currentTarget, false];
-        }
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "bindHandlerSortClick", function(name) {
-      return function(event) {
-        _this.asProps.$onSortClick(name, event);
-      };
-    });
-    _defineProperty(_assertThisInitialized(_this), "bindHandlerKeyDown", function(name) {
-      return function(event) {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          _this.asProps.$onSortClick(name, event);
-        }
-      };
-    });
-    _defineProperty(_assertThisInitialized(_this), "makeSortRefHandler", function(active) {
-      return function(ref) {
-        if (ref) {
-          _this.sortWrapperRefs.set(ref, active);
-        }
-      };
-    });
-    _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)
-            });
-          }
-        }
-      };
-    });
-    _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 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 (recalculatedNodes.length > 0) {
-        var diffPart = diff / recalculatedNodes.length;
-        recalculatedNodes.forEach(function(node2) {
-          setNodeMinWidth(node2, diffPart);
-        });
-      } else if (node !== null) {
-        setNodeMinWidth(node, diff);
-      }
-    });
-    _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;
-  }
-  _createClass(Head2, [{
-    key: "sortableColumnDescribeId",
-    value: function sortableColumnDescribeId() {
-      var uid = this.asProps.uid;
-      return "".concat(uid, "-column-sortable-describer");
-    }
-  }, {
-    key: "componentDidUpdate",
-    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 renderColumns(columns, width) {
-      var _this3 = this;
-      return columns.map(function(column) {
-        return _this3.renderColumn(column, width);
-      });
-    }
-  }, {
-    key: "renderColumn",
-    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 index = this.columns.findIndex(function(flattenCol) {
-        return flattenCol.name === column.name;
-      });
-      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
-      })), 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 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__ */ 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"
-      }))))), Children.origin, /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref3.cn("ScreenReaderOnly", {
-        "aria-hidden": true,
-        "id": this.sortableColumnDescribeId()
-      }), getI18nText === null || getI18nText === void 0 ? void 0 : getI18nText("sortableColumn"))));
-    }
-  }]);
-  return Head2;
-}(Component);
-_defineProperty(Head, "displayName", void 0);
-export {
-  SORT_ICON_WIDTH,
-  Head as default
-};