@jetbrains/ring-ui-built 6.0.5-beta.0

package/components/table/table.js

@@ -0,0 +1,459 @@
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, f as _extends, e as _objectWithoutProperties, g as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.map.js';
+import React, { PureComponent, Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { arrayMove, List } from 'react-movable';
+import focusSensorHOC from '../global/focus-sensor-hoc.js';
+import getUID from '../global/get-uid.js';
+import Shortcuts from '../shortcuts/shortcuts.js';
+import Loader from '../loader/loader.js';
+import Selection from './selection.js';
+import Header from './header.js';
+import { m as modules_1db4bbca } from '../_helpers/table.js';
+import selectionShortcutsHOC from './selection-shortcuts-hoc.js';
+import disableHoverHOC from './disable-hover-hoc.js';
+import RowWithFocusSensorCallbacks from './row-with-focus-sensor.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.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.regexp.to-string.js';
+import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.match.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/data-tests.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.object.entries.js';
+import '../loader/loader__core.js';
+import 'core-js/modules/es.array.filter.js';
+import '../global/dom.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.set.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark-14px';
+import '@jetbrains/icons/remove-14px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon__svg.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.map.js';
+import 'core-js/modules/es.weak-map.js';
+import './header-cell.js';
+import '@jetbrains/icons/unsorted-10px';
+import '@jetbrains/icons/chevron-10px';
+import './row.js';
+import '@jetbrains/icons/chevron-right';
+import '@jetbrains/icons/chevron-down';
+import '@jetbrains/icons/drag';
+import '../button/button.js';
+import '../link/clickableLink.js';
+import '../global/controls-height.js';
+import '../_helpers/button__classes.js';
+import '../tooltip/tooltip.js';
+import '../popup/popup.js';
+import 'react-dom';
+import '../global/schedule-raf.js';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+import './cell.js';
+
+var _excluded = ["ref"];
+/**
+ * Interactive table with selection and keyboard navigation support.
+ */
+var Table = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Table, _PureComponent);
+  var _super = _createSuper(Table);
+  function Table() {
+    var _this;
+    _classCallCheck(this, Table);
+    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), "state", {
+      shortcutsScope: getUID('ring-table-'),
+      userSelectNone: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (e) {
+      if (e.shiftKey) {
+        _this.setState({
+          userSelectNone: true
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMouseUp", function () {
+      if (_this.state.userSelectNone) {
+        _this.setState({
+          userSelectNone: false
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onRowFocus", function (row) {
+      var _this$props = _this.props,
+        selection = _this$props.selection,
+        onSelect = _this$props.onSelect;
+      onSelect(selection.focus(row));
+    });
+    _defineProperty(_assertThisInitialized(_this), "onRowSelect", function (row, selected) {
+      var _this$props2 = _this.props,
+        selection = _this$props2.selection,
+        onSelect = _this$props2.onSelect;
+      if (selected) {
+        onSelect(selection.select(row));
+      } else {
+        onSelect(selection.deselect(row));
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onSortEnd", function (_ref) {
+      var oldIndex = _ref.oldIndex,
+        newIndex = _ref.newIndex;
+      var data = arrayMove(_this.props.data, oldIndex, newIndex);
+      _this.props.onReorder({
+        data,
+        oldIndex,
+        newIndex
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onCheckboxChange", function (e) {
+      var checked = e.currentTarget.checked;
+      var _this$props3 = _this.props,
+        selection = _this$props3.selection,
+        onSelect = _this$props3.onSelect;
+      if (checked) {
+        onSelect(selection.selectAll());
+      } else {
+        onSelect(selection.reset());
+      }
+      _this.restoreFocusWithoutScroll();
+    });
+    _defineProperty(_assertThisInitialized(_this), "restoreFocusWithoutScroll", function () {
+      var _window = window,
+        scrollX = _window.scrollX,
+        scrollY = _window.scrollY;
+      _this.props.onFocusRestore();
+      window.scrollTo(scrollX, scrollY);
+    });
+    return _this;
+  }
+  _createClass(Table, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('mouseup', this.onMouseUp);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(_ref2) {
+      var data = _ref2.data,
+        selection = _ref2.selection,
+        onSelect = _ref2.onSelect,
+        selectable = _ref2.selectable,
+        remoteSelection = _ref2.remoteSelection;
+      if (data !== this.props.data && remoteSelection) {
+        onSelect(selection.cloneWith({
+          data: this.props.data
+        }));
+      }
+      if (!this.props.selectable && this.props.selectable !== selectable) {
+        onSelect(selection.resetSelection());
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('mouseup', this.onMouseUp);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props4 = this.props,
+        data = _this$props4.data,
+        selection = _this$props4.selection,
+        columns = _this$props4.columns,
+        caption = _this$props4.caption,
+        getItemKey = _this$props4.getItemKey,
+        selectable = _this$props4.selectable,
+        focused = _this$props4.focused,
+        isItemSelectable = _this$props4.isItemSelectable,
+        getItemLevel = _this$props4.getItemLevel,
+        getItemClassName = _this$props4.getItemClassName,
+        getMetaColumnClassName = _this$props4.getMetaColumnClassName,
+        getItemDataTest = _this$props4.getItemDataTest,
+        draggable = _this$props4.draggable,
+        alwaysShowDragHandle = _this$props4.alwaysShowDragHandle,
+        dragHandleTitle = _this$props4.dragHandleTitle,
+        loading = _this$props4.loading,
+        onSort = _this$props4.onSort,
+        sortKey = _this$props4.sortKey,
+        sortOrder = _this$props4.sortOrder,
+        loaderClassName = _this$props4.loaderClassName,
+        stickyHeader = _this$props4.stickyHeader,
+        stickyHeaderOffset = _this$props4.stickyHeaderOffset,
+        isItemCollapsible = _this$props4.isItemCollapsible,
+        isParentCollapsible = _this$props4.isParentCollapsible,
+        isItemCollapsed = _this$props4.isItemCollapsed,
+        onItemCollapse = _this$props4.onItemCollapse,
+        onItemExpand = _this$props4.onItemExpand,
+        isDisabledSelectionVisible = _this$props4.isDisabledSelectionVisible,
+        getCheckboxTooltip = _this$props4.getCheckboxTooltip,
+        onItemDoubleClick = _this$props4.onItemDoubleClick,
+        onItemClick = _this$props4.onItemClick,
+        renderEmpty = _this$props4.renderEmpty;
+      // NOTE: Do not construct new object per render because it causes all rows rerendering
+      var headerProps = {
+        caption,
+        selectable,
+        draggable,
+        columns,
+        onSort,
+        sortKey,
+        sortOrder,
+        sticky: stickyHeader,
+        topStickOffset: stickyHeaderOffset
+      };
+      var selectedSize = selection.getSelected().size;
+      var allSelectedSize = selection.selectAll().getSelected().size;
+      headerProps.checked = selectedSize > 0 && selectedSize === allSelectedSize;
+      headerProps.onCheckboxChange = this.onCheckboxChange;
+      headerProps.checkboxDisabled = this.props.data.length === 0;
+      var wrapperClasses = classNames({
+        [modules_1db4bbca.tableWrapper]: true,
+        [modules_1db4bbca.loading]: loading
+      });
+      var classes = classNames(this.props.className, {
+        [modules_1db4bbca.table]: true,
+        [modules_1db4bbca.multiSelection]: selection.getSelected().size > 0,
+        [modules_1db4bbca.userSelectNone]: this.state.userSelectNone,
+        [modules_1db4bbca.disabledHover]: this.props.disabledHover
+      });
+      var renderList = function renderList(_ref3) {
+        var children = _ref3.children,
+          props = _ref3.props;
+        var empty = /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+          colSpan: _this2.props.columns.length || 1,
+          className: modules_1db4bbca.tableMessage
+        }, renderEmpty ? renderEmpty() : null));
+        var tbody = Array.isArray(children) && children.length > 0 ? children : empty;
+        return /*#__PURE__*/React.createElement("table", {
+          className: classes,
+          "data-test": "ring-table"
+        }, /*#__PURE__*/React.createElement(Header, headerProps), /*#__PURE__*/React.createElement("tbody", _extends({}, props, {
+          "data-test": "ring-table-body"
+        }), tbody));
+      };
+      var renderItem = function renderItem(_ref4) {
+        var value = _ref4.value,
+          _ref4$props = _ref4.props,
+          props = _ref4$props === void 0 ? {} : _ref4$props,
+          isDragged = _ref4.isDragged;
+        if (value == null) {
+          return null;
+        }
+        var ref = props.ref,
+          restProps = _objectWithoutProperties(props, _excluded);
+        var row = /*#__PURE__*/React.createElement(RowWithFocusSensorCallbacks, _extends({
+          innerRef: ref,
+          key: getItemKey(value),
+          level: getItemLevel(value),
+          item: value,
+          showFocus: selection.isFocused(value),
+          autofocus: selection.isFocused(value),
+          focused: focused && selection.isFocused(value),
+          selectable: selectable && isItemSelectable(value),
+          selected: selectable && selection.isSelected(value),
+          onFocus: _this2.onRowFocus,
+          onSelect: _this2.onRowSelect,
+          onDoubleClick: onItemDoubleClick,
+          onClick: onItemClick,
+          collapsible: isItemCollapsible(value),
+          parentCollapsible: isParentCollapsible(value),
+          collapsed: isItemCollapsed(value),
+          onCollapse: onItemCollapse,
+          onExpand: onItemExpand,
+          showDisabledSelection: isDisabledSelectionVisible(value),
+          checkboxTooltip: getCheckboxTooltip(value),
+          className: classNames(getItemClassName(value), {
+            [modules_1db4bbca.draggingRow]: isDragged
+          }),
+          metaColumnClassName: getMetaColumnClassName(value),
+          draggable: draggable,
+          alwaysShowDragHandle: alwaysShowDragHandle,
+          dragHandleTitle: dragHandleTitle,
+          columns: columns,
+          "data-test": getItemDataTest(value)
+        }, restProps));
+        return isDragged ? /*#__PURE__*/React.createElement("table", {
+          style: _objectSpread2({}, props.style),
+          className: modules_1db4bbca.draggingTable
+        }, /*#__PURE__*/React.createElement("tbody", null, row)) : row;
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: wrapperClasses,
+        "data-test": "ring-table-wrapper",
+        ref: this.props.innerRef
+      }, focused && /*#__PURE__*/React.createElement(Shortcuts, {
+        map: this.props.shortcutsMap,
+        scope: this.state.shortcutsScope
+      }), /*#__PURE__*/React.createElement("div", {
+        role: "presentation",
+        onMouseDown: this.onMouseDown
+      }, draggable ? /*#__PURE__*/React.createElement(List, {
+        values: data,
+        renderList: renderList,
+        renderItem: renderItem,
+        onChange: this.onSortEnd
+      }) : renderList({
+        children: data.map(function (value, index) {
+          return renderItem({
+            value,
+            index
+          });
+        })
+      })), loading && /*#__PURE__*/React.createElement("div", {
+        className: modules_1db4bbca.loadingOverlay
+      }, /*#__PURE__*/React.createElement(Loader, {
+        className: loaderClassName
+      })));
+    }
+  }]);
+  return Table;
+}(PureComponent);
+_defineProperty(Table, "defaultProps", {
+  isItemSelectable: function isItemSelectable() {
+    return true;
+  },
+  loading: false,
+  onSort: function onSort() {},
+  onReorder: function onReorder() {},
+  getItemKey: function getItemKey(item) {
+    return item.id;
+  },
+  sortKey: 'id',
+  sortOrder: true,
+  draggable: false,
+  alwaysShowDragHandle: false,
+  stickyHeader: true,
+  getItemLevel: function getItemLevel() {
+    return 0;
+  },
+  getItemClassName: function getItemClassName() {
+    return null;
+  },
+  getMetaColumnClassName: function getMetaColumnClassName() {
+    return null;
+  },
+  getItemDataTest: function getItemDataTest() {
+    return null;
+  },
+  isItemCollapsible: function isItemCollapsible() {
+    return false;
+  },
+  isParentCollapsible: function isParentCollapsible() {
+    return false;
+  },
+  isItemCollapsed: function isItemCollapsed() {
+    return false;
+  },
+  onItemCollapse: function onItemCollapse() {},
+  onItemExpand: function onItemExpand() {},
+  onItemDoubleClick: function onItemDoubleClick() {},
+  onItemClick: function onItemClick() {},
+  remoteSelection: false,
+  isDisabledSelectionVisible: function isDisabledSelectionVisible() {
+    return false;
+  },
+  getCheckboxTooltip: function getCheckboxTooltip() {
+    return undefined;
+  }
+});
+Table.propTypes = {
+  className: PropTypes.string,
+  loaderClassName: PropTypes.string,
+  data: PropTypes.array.isRequired,
+  columns: PropTypes.array.isRequired,
+  caption: PropTypes.string,
+  isItemSelectable: PropTypes.func,
+  stickyHeader: PropTypes.bool,
+  stickyHeaderOffset: PropTypes.string,
+  loading: PropTypes.bool,
+  getItemKey: PropTypes.func,
+  getItemClassName: PropTypes.func,
+  getMetaColumnClassName: PropTypes.func,
+  getItemDataTest: PropTypes.func,
+  onSort: PropTypes.func,
+  onReorder: PropTypes.func,
+  sortKey: PropTypes.string,
+  sortOrder: PropTypes.bool,
+  draggable: PropTypes.bool,
+  alwaysShowDragHandle: PropTypes.bool,
+  getItemLevel: PropTypes.func,
+  isItemCollapsible: PropTypes.func,
+  isParentCollapsible: PropTypes.func,
+  isItemCollapsed: PropTypes.func,
+  onItemCollapse: PropTypes.func,
+  onItemExpand: PropTypes.func,
+  isDisabledSelectionVisible: PropTypes.func,
+  getCheckboxTooltip: PropTypes.func,
+  onItemDoubleClick: PropTypes.func,
+  onItemClick: PropTypes.func,
+  // focusSensorHOC
+  focused: PropTypes.bool,
+  onFocusRestore: PropTypes.func,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
+  // selectionShortcutsHOC
+  selection: PropTypes.instanceOf(Selection).isRequired,
+  selectable: PropTypes.bool,
+  onSelect: PropTypes.func,
+  shortcutsMap: PropTypes.object,
+  // disableHoverHOC
+  disabledHover: PropTypes.bool,
+  remoteSelection: PropTypes.bool,
+  renderEmpty: PropTypes.func
+};
+var getContainer = function getContainer() {
+  return disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));
+};
+// eslint-disable-next-line react/no-multi-comp
+var TableContainer = /*#__PURE__*/function (_Component) {
+  _inherits(TableContainer, _Component);
+  var _super2 = _createSuper(TableContainer);
+  function TableContainer() {
+    var _this3;
+    _classCallCheck(this, TableContainer);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this3 = _super2.call.apply(_super2, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this3), "Table", getContainer());
+    return _this3;
+  }
+  _createClass(TableContainer, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(this.Table, this.props);
+    }
+  }]);
+  return TableContainer;
+}(Component);
+// https://stackoverflow.com/a/53882322/6304152
+_defineProperty(TableContainer, "propTypes", getContainer().propTypes);
+
+export { Table, TableContainer as default };

package/components/tabs/collapsible-more.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactElement, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { LinkProps } from '../link/link';
+import { TabProps } from './tab';
+export interface FakeMoreButtonProps {
+    hasActiveChildren: boolean;
+    moreClassName?: string | null | undefined;
+    moreActiveClassName?: string | null | undefined;
+}
+export declare const AnchorLink: {
+    ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }: Omit<LinkProps, 'children'> & FakeMoreButtonProps): React.JSX.Element;
+    propTypes: {
+        hasActiveChildren: PropTypes.Requireable<boolean>;
+        moreClassName: PropTypes.Requireable<string>;
+        moreActiveClassName: PropTypes.Requireable<string>;
+    };
+};
+export interface MoreButtonProps {
+    items: ReactElement<TabProps>[];
+    selected?: string | undefined;
+    onSelect: (key: string) => () => void;
+    moreClassName?: string | null | undefined;
+    moreActiveClassName?: string | null | undefined;
+    morePopupClassName?: string | null | undefined;
+    morePopupItemClassName?: string | undefined;
+    morePopupBeforeEnd: ReactNode;
+}
+export declare const MoreButton: React.MemoExoticComponent<({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }: MoreButtonProps) => React.JSX.Element | null>;
+export declare const FakeMoreButton: React.MemoExoticComponent<({ moreClassName, moreActiveClassName, hasActiveChildren }: FakeMoreButtonProps) => React.JSX.Element>;