@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/dist/table/header.js

@@ -1,8 +1,9 @@
-import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.map.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Waypoint } from 'react-waypoint';
 import Checkbox from '../checkbox/checkbox.js';
 import getUID from '../global/get-uid.js';
 import { m as modules_1db4bbca } from '../_helpers/table.js';
@@ -12,146 +13,114 @@ import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
-import '../_helpers/icon.js';
-import '../icon/icon__svg.js';
+import '../_helpers/icon__svg.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.string.starts-with.js';
 import '../global/memoize.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.string.iterator.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
-import '../_helpers/checkbox.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.regexp.to-string.js';
 import '@jetbrains/icons/unsorted-10px';
 import '@jetbrains/icons/chevron-10px';
 import '../global/data-tests.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.object.entries.js';
 
-class Header extends PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      fixed: false,
-      headerWidth: undefined,
-      widths: []
-    });
-    _defineProperty(this, "id", getUID('table-header-'));
-    _defineProperty(this, "onCheckboxFocus", event => {
+var Header = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Header, _PureComponent);
+  var _super = _createSuper(Header);
+  function Header() {
+    var _this;
+    _classCallCheck(this, Header);
+    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), "id", getUID('table-header-'));
+    _defineProperty(_assertThisInitialized(_this), "onCheckboxFocus", function (event) {
       event.currentTarget.blur();
     });
-    _defineProperty(this, "_columnsRowNode", void 0);
-    _defineProperty(this, "storeColumnsRowNode", node => {
-      if (node) {
-        this._columnsRowNode = node;
-        this.calculateColumnsWidths(node);
-      }
-    });
-    _defineProperty(this, "onScrollIn", () => {
-      this.calculateColumnsWidths(this._columnsRowNode);
-      this.setState({
-        fixed: false
-      });
-    });
-    _defineProperty(this, "onScrollOut", _ref => {
-      let {
-        currentPosition
-      } = _ref;
-      if (currentPosition !== 'above') {
-        return;
-      }
-      this.calculateColumnsWidths(this._columnsRowNode);
-      this.setState({
-        fixed: true
-      });
-    });
+    return _this;
   }
-  calculateColumnsWidths(columnsRowNode) {
-    var _columnsRowNode$child;
-    this.setState({
-      headerWidth: columnsRowNode?.clientWidth,
-      widths: [...((_columnsRowNode$child = columnsRowNode?.childNodes) !== null && _columnsRowNode$child !== void 0 ? _columnsRowNode$child : [])].map(column => column instanceof Element ? column.clientWidth : 0)
-    });
-  }
-  createCells() {
-    let widths = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    const {
-      selectable,
-      draggable,
-      columns,
-      checked,
-      checkboxDisabled,
-      onCheckboxChange,
-      onSort,
-      sortKey,
-      sortOrder
-    } = this.props;
-    const metaColumnClasses = classNames(modules_1db4bbca.metaColumn, modules_1db4bbca.headerMetaColumn);
-    const metaColumn = /*#__PURE__*/React.createElement("div", {
-      className: metaColumnClasses
-    }, selectable && /*#__PURE__*/React.createElement(Checkbox, {
-      "aria-labelledby": this.id,
-      disabled: checkboxDisabled,
-      checked: checked,
-      onChange: onCheckboxChange,
-      onFocus: this.onCheckboxFocus
-    }));
-    return columns.map((column, index) => {
-      const columnStyle = widths[index] ? {
-        width: widths[index]
-      } : undefined;
-      const props = {
-        column,
-        onSort,
-        sortKey,
-        sortOrder,
-        style: columnStyle
-      };
-      return /*#__PURE__*/React.createElement(HeaderCell, _extends({
-        key: column.id,
-        "data-test": column.id
-      }, props), index === 0 && (draggable || selectable) && metaColumn);
-    });
-  }
-  render() {
-    const {
-      caption,
-      sticky,
-      topStickOffset
-    } = this.props;
-    const {
-      fixed,
-      widths,
-      headerWidth
-    } = this.state;
-    const regularCells = this.createCells();
-    const waypointChild = /*#__PURE__*/React.createElement("tr", {
-      "data-test": "ring-table-header-row"
-    }, regularCells.map((c, i) => /*#__PURE__*/React.createElement("td", {
-      key: i
-    })));
-    return /*#__PURE__*/React.createElement("thead", {
-      id: this.id,
-      "data-test": "ring-table-header",
-      className: modules_1db4bbca.tableHead
-    }, caption && /*#__PURE__*/React.createElement("tr", {
-      "data-test": "ring-table-header-row"
-    }, /*#__PURE__*/React.createElement("th", {
-      className: classNames(modules_1db4bbca.headerCell, modules_1db4bbca.caption),
-      colSpan: regularCells.length + 1,
-      "data-test": "ring-table-header-cell"
-    }, caption)), sticky && /*#__PURE__*/React.createElement(Waypoint, {
-      topOffset: topStickOffset,
-      onEnter: this.onScrollIn,
-      onLeave: this.onScrollOut
-    }, waypointChild), /*#__PURE__*/React.createElement("tr", {
-      className: modules_1db4bbca.subHeader,
-      ref: this.storeColumnsRowNode,
-      "data-test": "ring-table-header-row"
-    }, regularCells), fixed && sticky && /*#__PURE__*/React.createElement("tr", {
-      className: modules_1db4bbca.subHeaderFixed,
-      style: {
-        width: headerWidth,
-        top: topStickOffset
-      },
-      "data-test": "ring-table-header-row"
-    }, this.createCells(widths)));
-  }
-}
+  _createClass(Header, [{
+    key: "createCells",
+    value: function createCells() {
+      var widths = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var _this$props = this.props,
+        selectable = _this$props.selectable,
+        draggable = _this$props.draggable,
+        columns = _this$props.columns,
+        checked = _this$props.checked,
+        checkboxDisabled = _this$props.checkboxDisabled,
+        onCheckboxChange = _this$props.onCheckboxChange,
+        onSort = _this$props.onSort,
+        sortKey = _this$props.sortKey,
+        sortOrder = _this$props.sortOrder;
+      var metaColumnClasses = classNames(modules_1db4bbca.metaColumn, modules_1db4bbca.headerMetaColumn);
+      var metaColumn = /*#__PURE__*/React.createElement("div", {
+        className: metaColumnClasses
+      }, selectable && /*#__PURE__*/React.createElement(Checkbox, {
+        "aria-labelledby": this.id,
+        disabled: checkboxDisabled,
+        checked: checked,
+        onChange: onCheckboxChange,
+        onFocus: this.onCheckboxFocus
+      }));
+      return columns.map(function (column, index) {
+        var columnStyle = widths[index] ? {
+          width: widths[index]
+        } : undefined;
+        var props = {
+          column: column,
+          onSort: onSort,
+          sortKey: sortKey,
+          sortOrder: sortOrder,
+          style: columnStyle
+        };
+        return /*#__PURE__*/React.createElement(HeaderCell, _extends({
+          key: column.id,
+          "data-test": column.id
+        }, props), index === 0 && (draggable || selectable) && metaColumn);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames;
+      var _this$props2 = this.props,
+        caption = _this$props2.caption,
+        sticky = _this$props2.sticky,
+        topStickOffset = _this$props2.topStickOffset;
+      var regularCells = this.createCells();
+      return /*#__PURE__*/React.createElement("thead", {
+        id: this.id,
+        "data-test": "ring-table-header",
+        style: {
+          top: topStickOffset
+        },
+        className: classNames((_classNames = {}, _defineProperty(_classNames, modules_1db4bbca.tableHead, true), _defineProperty(_classNames, modules_1db4bbca.subHeaderSticky, sticky), _classNames))
+      }, caption && /*#__PURE__*/React.createElement("tr", {
+        "data-test": "ring-table-header-row"
+      }, /*#__PURE__*/React.createElement("th", {
+        className: classNames(modules_1db4bbca.headerCell, modules_1db4bbca.caption),
+        colSpan: regularCells.length + 1,
+        "data-test": "ring-table-header-cell"
+      }, caption)), /*#__PURE__*/React.createElement("tr", {
+        className: modules_1db4bbca.subHeader,
+        "data-test": "ring-table-header-row"
+      }, regularCells));
+    }
+  }]);
+  return Header;
+}(PureComponent);
 _defineProperty(Header, "propTypes", {
   caption: PropTypes.string,
   selectable: PropTypes.bool,
@@ -172,8 +141,8 @@ _defineProperty(Header, "defaultProps", {
   checked: true,
   sticky: true,
   topStickOffset: '0px',
-  onSort: () => {},
-  onCheckboxChange: () => {},
+  onSort: function onSort() {},
+  onCheckboxChange: function onCheckboxChange() {},
   sortKey: 'id',
   sortOrder: true
 });

package/dist/table/multitable.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, ReactElement } from 'react';
+import React, { PureComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { TableAttrs } from './table';
 import { SelectionItem } from './selection';
@@ -21,5 +21,5 @@ export default class MultiTable extends PureComponent<MultiTableProps> {
         'command+a': () => boolean;
         'ctrl+a': () => boolean;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/dist/table/multitable.js

@@ -1,122 +1,138 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React, { PureComponent, Children, cloneElement } from 'react';
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.find-index.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import React, { Children, cloneElement, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-class MultiTable extends PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "onUpPress", () => {
-      const {
-        children: tables
-      } = this.props;
-      const tableIndex = tables.findIndex(_ref => {
-        let {
-          props: {
-            selection
-          }
-        } = _ref;
+var MultiTable = /*#__PURE__*/function (_PureComponent) {
+  _inherits(MultiTable, _PureComponent);
+  var _super = _createSuper(MultiTable);
+  function MultiTable() {
+    var _this;
+    _classCallCheck(this, MultiTable);
+    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), "onUpPress", function () {
+      var tables = _this.props.children;
+      var tableIndex = tables.findIndex(function (_ref) {
+        var selection = _ref.props.selection;
         return selection.getFocused();
       });
-      const currentTable = tables[tableIndex].props;
-      const prevTable = tables[tableIndex - 1] ? tables[tableIndex - 1].props : null;
-      let newSelection = currentTable.selection.moveUp();
+      var currentTable = tables[tableIndex].props;
+      var prevTable = tables[tableIndex - 1] ? tables[tableIndex - 1].props : null;
+      var newSelection = currentTable.selection.moveUp();
       if (newSelection) {
-        currentTable.onSelect?.(newSelection);
+        var _currentTable$onSelec;
+        (_currentTable$onSelec = currentTable.onSelect) === null || _currentTable$onSelec === void 0 ? void 0 : _currentTable$onSelec.call(currentTable, newSelection);
       } else if (prevTable) {
-        currentTable.onSelect?.(currentTable.selection.resetFocus());
+        var _currentTable$onSelec2;
+        (_currentTable$onSelec2 = currentTable.onSelect) === null || _currentTable$onSelec2 === void 0 ? void 0 : _currentTable$onSelec2.call(currentTable, currentTable.selection.resetFocus());
         newSelection = prevTable.selection.moveUp();
         if (newSelection) {
-          prevTable.onSelect?.(newSelection);
+          var _prevTable$onSelect;
+          (_prevTable$onSelect = prevTable.onSelect) === null || _prevTable$onSelect === void 0 ? void 0 : _prevTable$onSelect.call(prevTable, newSelection);
         }
       }
       return false;
     });
-    _defineProperty(this, "onDownPress", () => {
-      const {
-        children: tables
-      } = this.props;
-      const tableIndex = tables.findIndex(_ref2 => {
-        let {
-          props: {
-            selection
-          }
-        } = _ref2;
+    _defineProperty(_assertThisInitialized(_this), "onDownPress", function () {
+      var tables = _this.props.children;
+      var tableIndex = tables.findIndex(function (_ref2) {
+        var selection = _ref2.props.selection;
         return selection.getFocused();
       });
-      const currentTable = tables[tableIndex].props;
-      const nextTable = tables[tableIndex + 1] ? tables[tableIndex + 1].props : null;
-      let newSelection = currentTable.selection.moveDown();
+      var currentTable = tables[tableIndex].props;
+      var nextTable = tables[tableIndex + 1] ? tables[tableIndex + 1].props : null;
+      var newSelection = currentTable.selection.moveDown();
       if (newSelection) {
-        currentTable.onSelect?.(newSelection);
+        var _currentTable$onSelec3;
+        (_currentTable$onSelec3 = currentTable.onSelect) === null || _currentTable$onSelec3 === void 0 ? void 0 : _currentTable$onSelec3.call(currentTable, newSelection);
       } else if (nextTable) {
-        currentTable.onSelect?.(currentTable.selection.resetFocus());
+        var _currentTable$onSelec4;
+        (_currentTable$onSelec4 = currentTable.onSelect) === null || _currentTable$onSelec4 === void 0 ? void 0 : _currentTable$onSelec4.call(currentTable, currentTable.selection.resetFocus());
         newSelection = nextTable.selection.moveDown();
         if (newSelection) {
-          nextTable.onSelect?.(newSelection);
+          var _nextTable$onSelect;
+          (_nextTable$onSelect = nextTable.onSelect) === null || _nextTable$onSelect === void 0 ? void 0 : _nextTable$onSelect.call(nextTable, newSelection);
         }
       }
       return false;
     });
-    _defineProperty(this, "onEscPress", () => {
-      const {
-        children
-      } = this.props;
-      Children.forEach(children, _ref3 => {
-        let {
-          props: {
-            selection,
-            onSelect
-          }
-        } = _ref3;
+    _defineProperty(_assertThisInitialized(_this), "onEscPress", function () {
+      var children = _this.props.children;
+      Children.forEach(children, function (_ref3) {
+        var _ref3$props = _ref3.props,
+          selection = _ref3$props.selection,
+          onSelect = _ref3$props.onSelect;
         onSelect(selection.reset());
       });
     });
-    _defineProperty(this, "onCmdAPress", () => {
-      const {
-        children
-      } = this.props;
-      Children.forEach(children, _ref4 => {
-        let {
-          props: {
-            selection,
-            onSelect
-          }
-        } = _ref4;
+    _defineProperty(_assertThisInitialized(_this), "onCmdAPress", function () {
+      var children = _this.props.children;
+      Children.forEach(children, function (_ref4) {
+        var _ref4$props = _ref4.props,
+          selection = _ref4$props.selection,
+          onSelect = _ref4$props.onSelect;
         onSelect(selection.selectAll());
       });
       return false;
     });
-    _defineProperty(this, "shortcuts", {
-      up: this.onUpPress,
-      down: this.onDownPress,
-      esc: this.onEscPress,
-      'command+a': this.onCmdAPress,
-      'ctrl+a': this.onCmdAPress
+    _defineProperty(_assertThisInitialized(_this), "shortcuts", {
+      up: _this.onUpPress,
+      down: _this.onDownPress,
+      esc: _this.onEscPress,
+      'command+a': _this.onCmdAPress,
+      'ctrl+a': _this.onCmdAPress
     });
+    return _this;
   }
-  componentDidUpdate(prevProps) {
-    if (prevProps.children) {
-      const prevSelections = prevProps.children.map(element => element.props.selection);
-      const prevFocusedIndex = prevSelections.findIndex(selection => selection.getFocused());
-      const prevFocused = prevSelections[prevFocusedIndex];
-      const currentSelections = this.props.children.map(element => element.props.selection);
-      const currentFocused = currentSelections.filter(selection => selection.getFocused());
-      if (currentFocused.includes(prevFocused)) {
-        prevProps.children[prevFocusedIndex].props.onSelect?.(prevFocused.resetFocus());
+  _createClass(MultiTable, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.children) {
+        var prevSelections = prevProps.children.map(function (element) {
+          return element.props.selection;
+        });
+        var prevFocusedIndex = prevSelections.findIndex(function (selection) {
+          return selection.getFocused();
+        });
+        var prevFocused = prevSelections[prevFocusedIndex];
+        var currentSelections = this.props.children.map(function (element) {
+          return element.props.selection;
+        });
+        var currentFocused = currentSelections.filter(function (selection) {
+          return selection.getFocused();
+        });
+        if (currentFocused.includes(prevFocused)) {
+          var _prevProps$children$p, _prevProps$children$p2;
+          (_prevProps$children$p = (_prevProps$children$p2 = prevProps.children[prevFocusedIndex].props).onSelect) === null || _prevProps$children$p === void 0 ? void 0 : _prevProps$children$p.call(_prevProps$children$p2, prevFocused.resetFocus());
+        }
       }
     }
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      "data-test": "ring-multitable"
-    }, Children.map(this.props.children, child => {
-      const props = {
-        shortcuts: this.shortcuts
-      };
-      return /*#__PURE__*/cloneElement(child, props);
-    }));
-  }
-}
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement("div", {
+        "data-test": "ring-multitable"
+      }, Children.map(this.props.children, function (child) {
+        var props = {
+          shortcuts: _this2.shortcuts
+        };
+        return /*#__PURE__*/cloneElement(child, props);
+      }));
+    }
+  }]);
+  return MultiTable;
+}(PureComponent);
 _defineProperty(MultiTable, "propTypes", {
   children: PropTypes.any.isRequired
 });

package/dist/table/row-with-focus-sensor.d.ts

@@ -14,5 +14,5 @@ export default class RowWithFocusSensorCallbacks<T extends SelectionItem> extend
     onSelect: (item: T, selected: boolean) => void;
     onCollapse: () => void;
     onExpand: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }