@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/tab-trap/tab-trap.js

@@ -0,0 +1,176 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { isNodeInVisiblePartOfPage } from '../global/dom.js';
+
+var modules_6dce58ae = {"trapButton":"trapButton_rui_12ce"};
+
+const FOCUSABLE_ELEMENTS = 'input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])';
+/**
+ * @name TabTrap
+ */
+
+class TabTrap extends Component {
+  constructor() {
+    var _this;
+
+    super(...arguments);
+    _this = this;
+
+    _defineProperty(this, "restoreFocus", () => {
+      const {
+        previousFocusedNode
+      } = this;
+
+      if (previousFocusedNode && previousFocusedNode.focus && isNodeInVisiblePartOfPage(previousFocusedNode)) {
+        previousFocusedNode.focus({
+          preventScroll: true
+        });
+      }
+    });
+
+    _defineProperty(this, "containerRef", node => {
+      if (!node) {
+        return;
+      }
+
+      this.node = node;
+    });
+
+    _defineProperty(this, "focusElement", function () {
+      let first = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      const {
+        node
+      } = _this;
+
+      if (!node) {
+        return;
+      }
+
+      const tabables = [...node.querySelectorAll(FOCUSABLE_ELEMENTS)].filter(item => item.tabIndex >= 0);
+      const toBeFocused = first ? tabables[0] : tabables[tabables.length - 1];
+
+      if (toBeFocused) {
+        toBeFocused.focus();
+      }
+    });
+
+    _defineProperty(this, "focusFirst", () => this.focusElement(true));
+
+    _defineProperty(this, "focusLast", () => this.focusElement(false));
+
+    _defineProperty(this, "focusLastIfEnabled", event => {
+      if (this.trapWithoutFocus) {
+        return;
+      }
+
+      if (this.props.focusBackOnExit) {
+        const prevFocused = event.nativeEvent.relatedTarget;
+
+        if (prevFocused != null && this.node != null && this.node.contains(prevFocused)) {
+          this.restoreFocus();
+        }
+      } else {
+        this.focusLast();
+      }
+    });
+
+    _defineProperty(this, "handleBlurIfWithoutFocus", event => {
+      if (!this.trapWithoutFocus) {
+        return;
+      }
+
+      this.trapWithoutFocus = false;
+      const newFocused = event.nativeEvent.relatedTarget;
+
+      if (!newFocused) {
+        return;
+      }
+
+      if (this.node.contains(newFocused)) {
+        return;
+      }
+
+      this.focusLast();
+    });
+
+    _defineProperty(this, "trapButtonRef", node => {
+      if (!node) {
+        return;
+      }
+
+      this.trapButtonNode = node;
+    });
+  }
+
+  componentDidMount() {
+    this.previousFocusedNode = document.activeElement;
+
+    if (this.props.autoFocusFirst) {
+      this.focusFirst();
+    } else if (!this.props.trapDisabled && (!this.node || !this.node.contains(this.previousFocusedNode))) {
+      this.trapWithoutFocus = true;
+      this.trapButtonNode.focus();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.focusBackOnClose) {
+      this.restoreFocus();
+    }
+  }
+
+  render() {
+    const {
+      children,
+      trapDisabled,
+      autoFocusFirst,
+      focusBackOnClose,
+      focusBackOnExit,
+      ...restProps
+    } = this.props;
+
+    if (trapDisabled) {
+      return /*#__PURE__*/React.createElement("div", _extends({
+        ref: this.containerRef
+      }, restProps), children);
+    }
+
+    return /*#__PURE__*/React.createElement("div", _extends({
+      ref: this.containerRef
+    }, restProps), /*#__PURE__*/React.createElement("div", {
+      // It never actually stays focused
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex: 0,
+      ref: this.trapButtonRef,
+      className: modules_6dce58ae.trapButton,
+      onFocus: this.focusLastIfEnabled,
+      onBlur: this.handleBlurIfWithoutFocus,
+      "data-trap-button": true
+    }), children, /*#__PURE__*/React.createElement("div", {
+      // It never actually stays focused
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex: 0,
+      onFocus: focusBackOnExit ? this.restoreFocus : this.focusFirst,
+      "data-trap-button": true
+    }));
+  }
+
+}
+
+_defineProperty(TabTrap, "propTypes", {
+  children: PropTypes.node.isRequired,
+  trapDisabled: PropTypes.bool,
+  autoFocusFirst: PropTypes.bool,
+  focusBackOnClose: PropTypes.bool,
+  focusBackOnExit: PropTypes.bool
+});
+
+_defineProperty(TabTrap, "defaultProps", {
+  trapDisabled: false,
+  autoFocusFirst: true,
+  focusBackOnClose: true,
+  focusBackOnExit: false
+});
+
+export { FOCUSABLE_ELEMENTS, TabTrap as default };

package/dist/table/cell.js

@@ -0,0 +1,25 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import joinDataTestAttributes from '../global/data-tests.js';
+import { m as modules_1db4bbca } from '../_helpers/table.js';
+
+class Cell extends PureComponent {
+  render() {
+    const classes = classNames(modules_1db4bbca.cell, this.props.className);
+    return /*#__PURE__*/React.createElement("td", _extends({}, this.props, {
+      className: classes,
+      "data-test": joinDataTestAttributes('ring-table-cell', this.props['data-test'])
+    }), this.props.children);
+  }
+
+}
+
+_defineProperty(Cell, "propTypes", {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  'data-test': PropTypes.string
+});
+
+export { Cell as default };

package/dist/table/disable-hover-hoc.js

@@ -0,0 +1,53 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+
+function disableHoverHOC(ComposedComponent) {
+  var _class, _temp;
+
+  return _temp = _class = class DisableHover extends PureComponent {
+    constructor() {
+      super(...arguments);
+
+      _defineProperty(this, "state", {
+        disabledHover: false
+      });
+
+      _defineProperty(this, "onMouseMove", () => {
+        if (this.state.disabledHover) {
+          this.setState({
+            disabledHover: false
+          });
+        }
+      });
+
+      _defineProperty(this, "onKeyDown", e => {
+        const metaKeys = [16, 17, 18, 19, 20, 91]; // eslint-disable-line no-magic-numbers
+
+        if (!this.state.disabledHover && !metaKeys.includes(e.keyCode)) {
+          this.setState({
+            disabledHover: true
+          });
+        }
+      });
+    }
+
+    componentDidMount() {
+      document.addEventListener('mousemove', this.onMouseMove);
+      document.addEventListener('keydown', this.onKeyDown, true);
+    }
+
+    componentWillUnmount() {
+      document.removeEventListener('mousemove', this.onMouseMove);
+      document.removeEventListener('keydown', this.onKeyDown, true);
+    }
+
+    render() {
+      return /*#__PURE__*/React.createElement(ComposedComponent, _extends({}, this.props, {
+        disabledHover: this.state.disabledHover
+      }));
+    }
+
+  }, _defineProperty(_class, "propTypes", ComposedComponent.propTypes), _defineProperty(_class, "defaultProps", ComposedComponent.defaultProps), _temp;
+}
+
+export { disableHoverHOC as default };

package/dist/table/header-cell.js

@@ -0,0 +1,90 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import sortableIcon from '@jetbrains/icons/unsorted-10px';
+import chevronDown from '@jetbrains/icons/chevron-10px';
+import Icon from '../icon/icon.js';
+import joinDataTestAttributes from '../global/data-tests.js';
+import { m as modules_1db4bbca } from '../_helpers/table.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+
+class HeaderCell extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "onClick", () => {
+      if (this.sortable) {
+        const {
+          column,
+          onSort,
+          sortOrder
+        } = this.props;
+        onSort({
+          column,
+          order: !(this.sorted && sortOrder)
+        });
+      }
+    });
+  }
+
+  onChildrenClick(e) {
+    e.stopPropagation();
+  }
+
+  render() {
+    const {
+      className,
+      column,
+      onSort,
+      sortKey,
+      sortOrder,
+      'data-test': dataTest,
+      ...restProps
+    } = this.props;
+    this.sortable = column.sortable === true;
+    this.sorted = sortKey === column.id;
+    const glyph = this.sorted ? chevronDown : sortableIcon;
+    const classes = classNames(className, column.headerClassName, {
+      [modules_1db4bbca.headerCell]: true,
+      [modules_1db4bbca.headerCellSortable]: this.sortable,
+      [modules_1db4bbca.headerCellSorted]: this.sorted,
+      [modules_1db4bbca.sortedUp]: sortOrder && this.sorted,
+      [modules_1db4bbca.cellRight]: column.rightAlign
+    });
+    return /*#__PURE__*/React.createElement("th", _extends({}, restProps, {
+      className: classes,
+      onClick: this.onClick,
+      "data-test": joinDataTestAttributes('ring-table-header-cell', dataTest)
+    }), /*#__PURE__*/React.createElement("span", {
+      onClick: this.onChildrenClick,
+      role: "presentation"
+    }, this.props.children), column.getHeaderValue ? column.getHeaderValue() : column.title, this.sortable && /*#__PURE__*/React.createElement("span", {
+      className: modules_1db4bbca.sorter
+    }, /*#__PURE__*/React.createElement(Icon, {
+      glyph: glyph,
+      className: modules_1db4bbca.icon
+    })));
+  }
+
+}
+
+_defineProperty(HeaderCell, "propTypes", {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  column: PropTypes.object.isRequired,
+  onSort: PropTypes.func,
+  sortKey: PropTypes.string,
+  sortOrder: PropTypes.bool,
+  'data-test': PropTypes.string
+});
+
+_defineProperty(HeaderCell, "defaultProps", {
+  onSort: () => {}
+});
+
+export { HeaderCell as default };

package/dist/table/header.js

@@ -0,0 +1,191 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.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';
+import HeaderCell from './header-cell.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import '../_helpers/checkbox.js';
+import '@jetbrains/icons/unsorted-10px';
+import '@jetbrains/icons/chevron-10px';
+import '../global/data-tests.js';
+
+class Header extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      fixed: false,
+      headerWidth: null,
+      widths: []
+    });
+
+    _defineProperty(this, "id", getUID('table-header-'));
+
+    _defineProperty(this, "onCheckboxFocus", event => {
+      event.target.blur();
+    });
+
+    _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
+      });
+    });
+  }
+
+  calculateColumnsWidths(columnsRowNode) {
+    this.setState({
+      headerWidth: columnsRowNode.clientWidth,
+      widths: [...columnsRowNode.childNodes].map(column => column.clientWidth)
+    });
+  }
+
+  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]
+      } : null;
+      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)));
+  }
+
+}
+
+_defineProperty(Header, "propTypes", {
+  caption: PropTypes.string,
+  selectable: PropTypes.bool,
+  draggable: PropTypes.bool,
+  checked: PropTypes.bool,
+  checkboxDisabled: PropTypes.bool,
+  sticky: PropTypes.bool,
+  topStickOffset: PropTypes.string,
+  onCheckboxChange: PropTypes.func,
+  columns: PropTypes.array.isRequired,
+  onSort: PropTypes.func,
+  sortKey: PropTypes.string,
+  sortOrder: PropTypes.bool
+});
+
+_defineProperty(Header, "defaultProps", {
+  selectable: true,
+  draggable: false,
+  checked: true,
+  sticky: true,
+  topStickOffset: '0px',
+  onSort: () => {},
+  onCheckboxChange: () => {},
+  sortKey: 'id',
+  sortOrder: true
+});
+
+export { Header as default };

package/dist/table/multitable.js

@@ -0,0 +1,140 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent, Children, cloneElement } 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;
+        return selection.getFocused();
+      });
+      const currentTable = tables[tableIndex].props;
+      const prevTable = tables[tableIndex - 1] ? tables[tableIndex - 1].props : null;
+      let newSelection = currentTable.selection.moveUp();
+
+      if (newSelection) {
+        currentTable.onSelect(newSelection);
+      } else if (prevTable) {
+        currentTable.onSelect(currentTable.selection.resetFocus());
+        newSelection = prevTable.selection.moveUp();
+
+        if (newSelection) {
+          prevTable.onSelect(newSelection);
+        }
+      }
+
+      return false;
+    });
+
+    _defineProperty(this, "onDownPress", () => {
+      const {
+        children: tables
+      } = this.props;
+      const tableIndex = tables.findIndex(_ref2 => {
+        let {
+          props: {
+            selection
+          }
+        } = _ref2;
+        return selection.getFocused();
+      });
+      const currentTable = tables[tableIndex].props;
+      const nextTable = tables[tableIndex + 1] ? tables[tableIndex + 1].props : null;
+      let newSelection = currentTable.selection.moveDown();
+
+      if (newSelection) {
+        currentTable.onSelect(newSelection);
+      } else if (nextTable) {
+        currentTable.onSelect(currentTable.selection.resetFocus());
+        newSelection = nextTable.selection.moveDown();
+
+        if (newSelection) {
+          nextTable.onSelect(newSelection);
+        }
+      }
+
+      return false;
+    });
+
+    _defineProperty(this, "onEscPress", () => {
+      const {
+        children
+      } = this.props;
+      Children.forEach(children, _ref3 => {
+        let {
+          props: {
+            selection,
+            onSelect
+          }
+        } = _ref3;
+        onSelect(selection.reset());
+      });
+    });
+
+    _defineProperty(this, "onCmdAPress", () => {
+      const {
+        children
+      } = this.props;
+      Children.forEach(children, _ref4 => {
+        let {
+          props: {
+            selection,
+            onSelect
+          }
+        } = _ref4;
+        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
+    });
+  }
+
+  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());
+      }
+    }
+  }
+
+  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);
+    }));
+  }
+
+}
+
+_defineProperty(MultiTable, "propTypes", {
+  children: PropTypes.any.isRequired
+});
+
+export { MultiTable as default };