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

package/lib/esm/Head.mjs

@@ -0,0 +1,368 @@
+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
+};

package/lib/esm/index.mjs

@@ -1,15 +1,8 @@
-import { MergedColumnsCell, MergedRowsCell } from "./components/Body/MergedCells.mjs";
-import { ACCORDION, DataTable, ROW_GROUP } from "./components/DataTable/DataTable.mjs";
-import { SelectableRows } from "./store/SelectableRows.mjs";
-var wrapDataTable = function wrapDataTable2(wrapper) {
-  return wrapper;
-};
+import { ROW_GROUP, default as default2, wrapDataTable, wrapDataTableCell, wrapDataTableRow } from "./DataTable.mjs";
 export {
-  ACCORDION,
-  DataTable,
-  MergedColumnsCell,
-  MergedRowsCell,
   ROW_GROUP,
-  SelectableRows,
-  wrapDataTable
+  default2 as default,
+  wrapDataTable,
+  wrapDataTableCell,
+  wrapDataTableRow
 };