@jetbrains/ring-ui-built 6.0.1

package/components/table/disable-hover-hoc.d.ts

@@ -0,0 +1,64 @@
+import React, { ComponentType } from 'react';
+export interface DisableHoverAddProps {
+    disabledHover: boolean;
+}
+export type DisableHoverProps<P extends DisableHoverAddProps> = Omit<P, keyof DisableHoverAddProps>;
+export default function disableHoverHOC<P extends DisableHoverAddProps>(ComposedComponent: ComponentType<P>): {
+    new (props: DisableHoverProps<P> | Readonly<DisableHoverProps<P>>): {
+        state: {
+            disabledHover: boolean;
+        };
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        onMouseMove: () => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<DisableHoverProps<P>>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<DisableHoverProps<P>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<DisableHoverProps<P>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<P>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<P>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: DisableHoverProps<P>, context: any): {
+        state: {
+            disabledHover: boolean;
+        };
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        onMouseMove: () => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<DisableHoverProps<P>>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<DisableHoverProps<P>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<DisableHoverProps<P>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<P>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<P>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    propTypes: React.WeakValidationMap<P> | undefined;
+    defaultProps: Partial<P> | undefined;
+    contextType?: React.Context<any> | undefined;
+};

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

@@ -0,0 +1,62 @@
+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.includes.js';
+import React, { PureComponent } from 'react';
+
+function disableHoverHOC(ComposedComponent) {
+  var _class;
+  return _class = /*#__PURE__*/function (_PureComponent) {
+    _inherits(DisableHover, _PureComponent);
+    var _super = _createSuper(DisableHover);
+    function DisableHover() {
+      var _this;
+      _classCallCheck(this, DisableHover);
+      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", {
+        disabledHover: false
+      });
+      _defineProperty(_assertThisInitialized(_this), "onMouseMove", function () {
+        if (_this.state.disabledHover) {
+          _this.setState({
+            disabledHover: false
+          });
+        }
+      });
+      _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e) {
+        var metaKeys = [16, 17, 18, 19, 20, 91]; // eslint-disable-line @typescript-eslint/no-magic-numbers
+        if (!_this.state.disabledHover && !metaKeys.includes(e.keyCode)) {
+          _this.setState({
+            disabledHover: true
+          });
+        }
+      });
+      return _this;
+    }
+    _createClass(DisableHover, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('keydown', this.onKeyDown, true);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.removeEventListener('keydown', this.onKeyDown, true);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React.createElement(ComposedComponent, _extends({}, this.props, {
+          disabledHover: this.state.disabledHover
+        }));
+      }
+    }]);
+    return DisableHover;
+  }(PureComponent), _defineProperty(_class, "propTypes", ComposedComponent.propTypes), _defineProperty(_class, "defaultProps", ComposedComponent.defaultProps), _class;
+}
+
+export { disableHoverHOC as default };

package/components/table/header-cell.d.ts

@@ -0,0 +1,43 @@
+import React, { PureComponent, ReactNode, SyntheticEvent, ThHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface Column<T = never> {
+    id: string;
+    sortable?: boolean | null | undefined;
+    className?: string | null | undefined;
+    headerClassName?: string | null | undefined;
+    rightAlign?: boolean | null | undefined;
+    getHeaderValue?: (() => ReactNode) | null | undefined;
+    title?: ReactNode;
+    getValue?: ((item: T, column: Column) => ReactNode) | null | undefined;
+    getDataTest?: ((item: T, column: Column) => string) | null | undefined;
+}
+export interface SortParams {
+    column: Column;
+    order: boolean;
+}
+export interface HeaderCellProps extends ThHTMLAttributes<HTMLTableHeaderCellElement> {
+    column: Column;
+    onSort: (params: SortParams) => void;
+    sortKey?: string | null | undefined;
+    sortOrder?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+export default class HeaderCell extends PureComponent<HeaderCellProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<any>;
+        className: PropTypes.Requireable<string>;
+        column: PropTypes.Validator<object>;
+        onSort: PropTypes.Requireable<(...args: any[]) => any>;
+        sortKey: PropTypes.Requireable<string>;
+        sortOrder: PropTypes.Requireable<boolean>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        onSort: () => void;
+    };
+    sortable?: boolean;
+    sorted?: boolean;
+    onClick: () => void;
+    onChildrenClick(e: SyntheticEvent): void;
+    render(): React.JSX.Element;
+}

package/components/table/header-cell.js

@@ -0,0 +1,109 @@
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, e as _objectWithoutProperties, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.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__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/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.object.entries.js';
+
+var _excluded = ["className", "column", "onSort", "sortKey", "sortOrder", "data-test"];
+var HeaderCell = /*#__PURE__*/function (_PureComponent) {
+  _inherits(HeaderCell, _PureComponent);
+  var _super = _createSuper(HeaderCell);
+  function HeaderCell() {
+    var _this;
+    _classCallCheck(this, HeaderCell);
+    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), "sortable", void 0);
+    _defineProperty(_assertThisInitialized(_this), "sorted", void 0);
+    _defineProperty(_assertThisInitialized(_this), "onClick", function () {
+      if (_this.sortable) {
+        var _this$props = _this.props,
+          column = _this$props.column,
+          onSort = _this$props.onSort,
+          sortOrder = _this$props.sortOrder;
+        onSort({
+          column,
+          order: !(_this.sorted && sortOrder)
+        });
+      }
+    });
+    return _this;
+  }
+  _createClass(HeaderCell, [{
+    key: "onChildrenClick",
+    value: function onChildrenClick(e) {
+      e.stopPropagation();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        className = _this$props2.className,
+        column = _this$props2.column;
+        _this$props2.onSort;
+        var sortKey = _this$props2.sortKey,
+        sortOrder = _this$props2.sortOrder,
+        dataTest = _this$props2['data-test'],
+        restProps = _objectWithoutProperties(_this$props2, _excluded);
+      this.sortable = column.sortable === true;
+      this.sorted = sortKey === column.id;
+      var glyph = this.sorted ? chevronDown : sortableIcon;
+      var 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
+      })));
+    }
+  }]);
+  return HeaderCell;
+}(PureComponent);
+_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: function onSort() {}
+});
+
+export { HeaderCell as default };

package/components/table/header.d.ts

@@ -0,0 +1,56 @@
+import React, { ChangeEventHandler, PureComponent, ReactNode, SyntheticEvent } from 'react';
+import PropTypes from 'prop-types';
+import { Column, SortParams } from './header-cell';
+export interface HeaderProps {
+    columns: readonly Column[];
+    selectable: boolean;
+    draggable: boolean;
+    checked: boolean;
+    sticky: boolean;
+    topStickOffset: string;
+    onSort: (params: SortParams) => void;
+    onCheckboxChange: ChangeEventHandler<HTMLInputElement>;
+    sortKey: string;
+    sortOrder: boolean;
+    caption?: string | null | undefined;
+    checkboxDisabled?: boolean | undefined;
+}
+declare module 'react-waypoint' {
+    namespace Waypoint {
+        interface WaypointProps {
+            children?: ReactNode;
+        }
+    }
+}
+export default class Header extends PureComponent<HeaderProps> {
+    static propTypes: {
+        caption: PropTypes.Requireable<string>;
+        selectable: PropTypes.Requireable<boolean>;
+        draggable: PropTypes.Requireable<boolean>;
+        checked: PropTypes.Requireable<boolean>;
+        checkboxDisabled: PropTypes.Requireable<boolean>;
+        sticky: PropTypes.Requireable<boolean>;
+        topStickOffset: PropTypes.Requireable<string>;
+        onCheckboxChange: PropTypes.Requireable<(...args: any[]) => any>;
+        columns: PropTypes.Validator<any[]>;
+        onSort: PropTypes.Requireable<(...args: any[]) => any>;
+        sortKey: PropTypes.Requireable<string>;
+        sortOrder: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        selectable: boolean;
+        draggable: boolean;
+        checked: boolean;
+        sticky: boolean;
+        topStickOffset: string;
+        onSort: () => void;
+        onCheckboxChange: () => void;
+        sortKey: string;
+        sortOrder: boolean;
+    };
+    id: string;
+    onCheckboxFocus: (event: SyntheticEvent<HTMLElement>) => void;
+    createCells(widths?: never[]): React.JSX.Element[];
+    render(): React.JSX.Element;
+}
+export type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;

package/components/table/header.js

@@ -0,0 +1,151 @@
+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 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-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.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/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.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';
+
+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();
+    });
+    return _this;
+  }
+  _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,
+          onSort,
+          sortKey,
+          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 _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({
+          [modules_1db4bbca.tableHead]: true,
+          [modules_1db4bbca.subHeaderSticky]: sticky
+        })
+      }, 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,
+  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: function onSort() {},
+  onCheckboxChange: function onCheckboxChange() {},
+  sortKey: 'id',
+  sortOrder: true
+});
+
+export { Header as default };

package/components/table/multitable.d.ts

@@ -0,0 +1,25 @@
+import React, { PureComponent, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import { TableAttrs } from './table';
+import { SelectionItem } from './selection';
+export interface MultiTableProps {
+    children: ReactElement<TableAttrs<SelectionItem>>[];
+}
+export default class MultiTable extends PureComponent<MultiTableProps> {
+    static propTypes: {
+        children: PropTypes.Validator<any>;
+    };
+    componentDidUpdate(prevProps: MultiTableProps): void;
+    onUpPress: () => boolean;
+    onDownPress: () => boolean;
+    onEscPress: () => void;
+    onCmdAPress: () => boolean;
+    shortcuts: {
+        up: () => boolean;
+        down: () => boolean;
+        esc: () => void;
+        'command+a': () => boolean;
+        'ctrl+a': () => boolean;
+    };
+    render(): React.JSX.Element;
+}

package/components/table/multitable.js

@@ -0,0 +1,140 @@
+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';
+
+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();
+      });
+      var currentTable = tables[tableIndex].props;
+      var prevTable = tables[tableIndex - 1] ? tables[tableIndex - 1].props : null;
+      var newSelection = currentTable.selection.moveUp();
+      if (newSelection) {
+        var _currentTable$onSelec;
+        (_currentTable$onSelec = currentTable.onSelect) === null || _currentTable$onSelec === void 0 || _currentTable$onSelec.call(currentTable, newSelection);
+      } else if (prevTable) {
+        var _currentTable$onSelec2;
+        (_currentTable$onSelec2 = currentTable.onSelect) === null || _currentTable$onSelec2 === void 0 || _currentTable$onSelec2.call(currentTable, currentTable.selection.resetFocus());
+        newSelection = prevTable.selection.moveUp();
+        if (newSelection) {
+          var _prevTable$onSelect;
+          (_prevTable$onSelect = prevTable.onSelect) === null || _prevTable$onSelect === void 0 || _prevTable$onSelect.call(prevTable, newSelection);
+        }
+      }
+      return false;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onDownPress", function () {
+      var tables = _this.props.children;
+      var tableIndex = tables.findIndex(function (_ref2) {
+        var selection = _ref2.props.selection;
+        return selection.getFocused();
+      });
+      var currentTable = tables[tableIndex].props;
+      var nextTable = tables[tableIndex + 1] ? tables[tableIndex + 1].props : null;
+      var newSelection = currentTable.selection.moveDown();
+      if (newSelection) {
+        var _currentTable$onSelec3;
+        (_currentTable$onSelec3 = currentTable.onSelect) === null || _currentTable$onSelec3 === void 0 || _currentTable$onSelec3.call(currentTable, newSelection);
+      } else if (nextTable) {
+        var _currentTable$onSelec4;
+        (_currentTable$onSelec4 = currentTable.onSelect) === null || _currentTable$onSelec4 === void 0 || _currentTable$onSelec4.call(currentTable, currentTable.selection.resetFocus());
+        newSelection = nextTable.selection.moveDown();
+        if (newSelection) {
+          var _nextTable$onSelect;
+          (_nextTable$onSelect = nextTable.onSelect) === null || _nextTable$onSelect === void 0 || _nextTable$onSelect.call(nextTable, newSelection);
+        }
+      }
+      return false;
+    });
+    _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(_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(_assertThisInitialized(_this), "shortcuts", {
+      up: _this.onUpPress,
+      down: _this.onDownPress,
+      esc: _this.onEscPress,
+      'command+a': _this.onCmdAPress,
+      'ctrl+a': _this.onCmdAPress
+    });
+    return _this;
+  }
+  _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 || _prevProps$children$p.call(_prevProps$children$p2, prevFocused.resetFocus());
+        }
+      }
+    }
+  }, {
+    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
+});
+
+export { MultiTable as default };

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

@@ -0,0 +1,18 @@
+import React, { PureComponent } from 'react';
+import { FocusSensorProps } from '../global/focus-sensor-hoc';
+import Row, { RowProps } from './row';
+import { SelectionItem } from './selection';
+export interface RowWithFocusSensorCallbacksProps<T extends SelectionItem> extends Omit<FocusSensorProps<RowProps<T>, HTMLTableRowElement, typeof Row>, 'onFocus'> {
+    onFocus?: (item: T) => void;
+    onSelect?: (item: T, selected: boolean) => void;
+    onCollapse?: (item: T) => void;
+    onExpand?: (item: T) => void;
+}
+export default class RowWithFocusSensorCallbacks<T extends SelectionItem> extends PureComponent<RowWithFocusSensorCallbacksProps<T>> {
+    RowWithFocusSensor: React.ComponentType<FocusSensorProps<RowProps<T>, HTMLDivElement, typeof Row>>;
+    onFocus: () => void;
+    onSelect: (item: T, selected: boolean) => void;
+    onCollapse: () => void;
+    onExpand: () => void;
+    render(): React.JSX.Element;
+}