@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/table/table.css

@@ -1,261 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-@value height: calc(4 * unit);
-@value compensate: 2px;
-@value compensated: calc(height - compensate);
-
-.tableWrapper {
-  position: relative;
-}
-
-.table {
-  width: 100%;
-
-  border-spacing: 0;
-}
-
-.userSelectNone {
-  user-select: none;
-}
-
-.headerCell {
-  composes: font-smaller-lower from "../global/global.css";
-
-  box-sizing: border-box;
-  height: calc(unit * 3);
-  padding-right: calc(unit * 5);
-
-  text-align: left;
-  white-space: nowrap;
-
-  color: var(--ring-secondary-color);
-
-  font-weight: normal;
-}
-
-.headerCell:first-child {
-  padding-left: calc(unit * 4);
-}
-
-.headerCell:last-child {
-  width: 100%;
-  padding-right: calc(unit * 4);
-}
-
-.headerCell:first-child:only-child {
-  width: initial;
-  max-width: none;
-}
-
-.headerCell.headerCellSorted {
-  font-weight: bold;
-}
-
-.headerCell.headerCellSortable {
-  cursor: pointer;
-}
-
-.headerCell .sorter {
-  position: absolute;
-
-  display: none;
-
-  margin-left: 6px;
-
-  user-select: none;
-}
-
-.headerCell.headerCellSortable .sorter {
-  display: inline-block;
-}
-
-.sortedUp .icon {
-  transform: rotate(180deg);
-  transform-origin: center 53%;
-}
-
-.caption {
-  padding-top: unit;
-  padding-bottom: 6px;
-
-  color: var(--ring-text-color);
-  border-bottom: none;
-
-  font-size: var(--ring-font-size);
-  font-weight: bold;
-  line-height: var(--ring-line-height-lower);
-}
-
-.tableHead::after {
-  position: absolute;
-
-  width: 100%;
-
-  height: 1px;
-
-  content: "";
-
-  background-color: var(--ring-line-color);
-}
-
-.subHeaderSticky {
-  position: sticky;
-
-  z-index: var(--ring-fixed-z-index);
-  top: 0;
-
-  background-color: rgba(var(--ring-content-background-components), 0.9);
-}
-
-.row {
-  outline: none;
-
-  line-height: compensated;
-}
-
-/* stylelint-disable-next-line selector-max-specificity */
-.table:not(.disabledHover) .row:hover {
-  background-color: var(--ring-hover-background-color);
-}
-
-.rowSelected {
-  background-color: var(--ring-selected-background-color);
-}
-
-.rowFocused {
-  background-color: var(--ring-hover-background-color);
-}
-/* stylelint-disable-next-line selector-max-specificity */
-.rowFocused .cell:nth-child(1) {
-  box-shadow: inset 2px 0 var(--ring-main-color);
-}
-
-.loadingOverlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background-color: var(--ring-table-loader-background-color);
-}
-
-.cell {
-  composes: ellipsis from "../global/global.css";
-
-  box-sizing: content-box;
-
-  min-width: 0;
-
-  height: height;
-  padding: 0;
-  padding-right: calc(unit * 5);
-
-  color: var(--ring-text-color);
-}
-
-.cell:first-child {
-  padding-left: calc(unit * 4);
-}
-
-.cell:last-child {
-  width: 100%;
-
-  /* Markup hack, allows cell to have content which is wider than cell and collapses it */
-
-  max-width: 0;
-  padding-right: calc(unit * 4);
-}
-
-.cell:first-child {
-  min-width: calc(unit * 37);
-  max-width: calc(unit * 77);
-}
-
-.cell:first-child:only-child {
-  width: initial;
-  max-width: none;
-}
-
-.cellUnlimited {
-  width: 100%;
-}
-
-.cellRight {
-  text-align: right;
-}
-
-.metaColumn {
-  position: relative;
-
-  float: left;
-
-  height: 16px;
-  padding-right: compensate;
-}
-
-.metaColumn.headerMetaColumn {
-  padding-top: 1px;
-}
-
-@value top: -3px;
-
-.dragHandle {
-  top: top;
-  left: calc(-2 * unit);
-
-  cursor: grab;
-
-  opacity: 0;
-}
-
-/* override button */
-.dragHandle.dragHandle {
-  position: absolute;
-
-  height: calc(height - top);
-  padding: 0;
-}
-
-.dragHandle.visibleDragHandle,
-.row:hover .dragHandle {
-  opacity: 1;
-}
-
-.rowCollapseExpandButton {
-  padding-right: calc(unit / 2);
-  padding-left: 7px;
-}
-
-.draggingRow {
-  z-index: var(--ring-overlay-z-index);
-
-  background-color: var(--ring-hover-background-color);
-}
-
-.draggingRow .dragHandle {
-  cursor: grabbing;
-
-  opacity: 1;
-}
-
-.draggingRow .dragHandle svg {
-  color: var(--ring-main-color);
-}
-
-.draggingTable {
-  z-index: var(--ring-overlay-z-index);
-
-  border-spacing: 0;
-}
-
-.tableMessage {
-  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
-
-  color: var(--ring-secondary-color);
-}

package/components/table/table.d.ts

@@ -1,159 +0,0 @@
-/**
- * @name Table
- */
-import React, { Component, PureComponent, ReactNode, SyntheticEvent } from 'react';
-import { OnChangeMeta } from 'react-movable/lib/types';
-import { FocusSensorAddProps, FocusSensorProps } from '../global/focus-sensor-hoc';
-import { SelectionItem } from './selection';
-import { SelectionShortcutsAddProps, SelectionShortcutsProps } from './selection-shortcuts-hoc';
-import { DisableHoverAddProps, DisableHoverProps } from './disable-hover-hoc';
-import { Column, SortParams } from './header-cell';
-export interface ReorderParams<T> {
-    data: T[];
-    oldIndex: number;
-    newIndex: number;
-}
-export interface TableProps<T extends SelectionItem> extends FocusSensorAddProps<HTMLTableRowElement>, SelectionShortcutsAddProps<T>, DisableHoverAddProps {
-    data: readonly T[];
-    columns: readonly Column<T>[];
-    isItemSelectable: (item: T) => boolean;
-    loading: boolean;
-    onSort: (params: SortParams) => void;
-    onReorder: (params: ReorderParams<T>) => void;
-    getItemKey: (item: T) => string | number;
-    sortKey: string;
-    sortOrder: boolean;
-    draggable: boolean;
-    alwaysShowDragHandle: boolean;
-    dragHandleTitle?: string;
-    stickyHeader: boolean;
-    getItemLevel: (item: T) => number;
-    getItemClassName: (item: T) => string | null | undefined;
-    getMetaColumnClassName: (item: T) => string | null | undefined;
-    getItemDataTest: (item: T) => string | null | undefined;
-    isItemCollapsible: (item: T) => boolean;
-    isParentCollapsible: (item: T) => boolean;
-    isItemCollapsed: (item: T) => boolean;
-    onItemCollapse: (item: T) => void;
-    onItemExpand: (item: T) => void;
-    onItemDoubleClick: (item: T) => void;
-    onItemClick: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void;
-    remoteSelection: boolean;
-    isDisabledSelectionVisible: (item: T) => boolean;
-    getCheckboxTooltip: (item: T) => string | undefined;
-    className?: string | null | undefined;
-    loaderClassName?: string | undefined;
-    caption?: string | null | undefined;
-    stickyHeaderOffset?: string | undefined;
-    renderEmpty?: (() => ReactNode) | null | undefined;
-}
-/**
- * Interactive table with selection and keyboard navigation support.
- */
-export declare class Table<T extends SelectionItem> extends PureComponent<TableProps<T>> {
-    static defaultProps: {
-        isItemSelectable: () => boolean;
-        loading: boolean;
-        onSort: () => void;
-        onReorder: () => void;
-        getItemKey: (item: SelectionItem) => string | number;
-        sortKey: string;
-        sortOrder: boolean;
-        draggable: boolean;
-        alwaysShowDragHandle: boolean;
-        stickyHeader: boolean;
-        getItemLevel: () => number;
-        getItemClassName: () => null;
-        getMetaColumnClassName: () => null;
-        getItemDataTest: () => null;
-        isItemCollapsible: () => boolean;
-        isParentCollapsible: () => boolean;
-        isItemCollapsed: () => boolean;
-        onItemCollapse: () => void;
-        onItemExpand: () => void;
-        onItemDoubleClick: () => void;
-        onItemClick: () => void;
-        remoteSelection: boolean;
-        isDisabledSelectionVisible: () => boolean;
-        getCheckboxTooltip: () => undefined;
-    };
-    state: {
-        shortcutsScope: string;
-        userSelectNone: boolean;
-    };
-    componentDidMount(): void;
-    componentDidUpdate({ data, selection, onSelect, selectable, remoteSelection }: TableProps<T>): void;
-    componentWillUnmount(): void;
-    onMouseDown: (e: React.MouseEvent) => void;
-    onMouseUp: () => void;
-    onRowFocus: (row: T) => void;
-    onRowSelect: (row: T, selected: boolean) => void;
-    onSortEnd: ({ oldIndex, newIndex }: OnChangeMeta) => void;
-    onCheckboxChange: (e: SyntheticEvent<HTMLInputElement>) => void;
-    restoreFocusWithoutScroll: () => void;
-    render(): React.JSX.Element;
-}
-export type TableAttrs<T extends SelectionItem> = DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>;
-export default class TableContainer<T extends SelectionItem> extends Component<TableAttrs<T>> {
-    static propTypes: React.WeakValidationMap<SelectionShortcutsProps<SelectionItem, FocusSensorProps<TableProps<SelectionItem>, HTMLTableRowElement, typeof Table>>> | undefined;
-    Table: {
-        new (props: DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>> | Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>): {
-            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<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-            forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>;
-            refs: {
-                [key: string]: React.ReactInstance;
-            };
-            shouldComponentUpdate?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextState: Readonly<{}>, nextContext: any): boolean;
-            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-            getSnapshotBeforeUpdate?(prevProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, prevState: Readonly<{}>): any;
-            componentDidUpdate?(prevProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, prevState: Readonly<{}>, snapshot?: any): void;
-            componentWillMount?(): void;
-            UNSAFE_componentWillMount?(): void;
-            componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextContext: any): void;
-            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextContext: any): void;
-            componentWillUpdate?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextState: Readonly<{}>, nextContext: any): void;
-            UNSAFE_componentWillUpdate?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextState: Readonly<{}>, nextContext: any): void;
-        };
-        new (props: DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>, 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<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-            forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>;
-            refs: {
-                [key: string]: React.ReactInstance;
-            };
-            shouldComponentUpdate?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextState: Readonly<{}>, nextContext: any): boolean;
-            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-            getSnapshotBeforeUpdate?(prevProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, prevState: Readonly<{}>): any;
-            componentDidUpdate?(prevProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, prevState: Readonly<{}>, snapshot?: any): void;
-            componentWillMount?(): void;
-            UNSAFE_componentWillMount?(): void;
-            componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextContext: any): void;
-            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextContext: any): void;
-            componentWillUpdate?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextState: Readonly<{}>, nextContext: any): void;
-            UNSAFE_componentWillUpdate?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextState: Readonly<{}>, nextContext: any): void;
-        };
-        propTypes: React.WeakValidationMap<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>> | undefined;
-        defaultProps: Partial<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>> | undefined;
-        contextType?: React.Context<any> | undefined;
-    };
-    render(): React.JSX.Element;
-}

package/components/table/table.examples2.json

@@ -1,19 +0,0 @@
-{
-  "continents": [
-    {"id": 1, "continent": "Asia", "url": "https://en.wikipedia.org/wiki/Asia"},
-    {"id": 2, "continent": "Europe", "url": "https://en.wikipedia.org/wiki/Europe"},
-    {"id": 3, "continent": "America", "url": "https://en.wikipedia.org/wiki/America"},
-    {"id": 4, "continent": "Africa", "url": "https://en.wikipedia.org/wiki/Africa"},
-    {"id": 5, "continent": "Australia", "url": "https://en.wikipedia.org/wiki/Australia"}
-  ],
-  "countries": [
-    {"id": 1, "country": "Russia", "city": "Moscow", "url": "https://en.wikipedia.org/wiki/Russia"},
-    {"id": 2, "country": "France", "city": "Paris", "url": "https://en.wikipedia.org/wiki/France"},
-    {"id": 3, "country": "Sweden", "city": "Stockholm", "url": "https://en.wikipedia.org/wiki/Sweden"},
-    {"id": 4, "country": "USA", "city": "NYC", "url": "https://en.wikipedia.org/wiki/USA"},
-    {"id": 5, "country": "South Africa", "city": "Johannesburg", "url": "https://en.wikipedia.org/wiki/South Africa"},
-    {"id": 6, "country": "Finland", "city": "Helsinki", "url": "https://en.wikipedia.org/wiki/Finland"},
-    {"id": 7, "country": "Latvia", "city": "Riga", "url": "https://en.wikipedia.org/wiki/Latvia"},
-    {"id": 8, "country": "Norway", "city": "Oslo", "url": "https://en.wikipedia.org/wiki/Norway"}
-  ]
-}

package/components/table/table.js

@@ -1,231 +0,0 @@
-/**
- * @name Table
- */
-import React, { Component, PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { arrayMove, List } from 'react-movable';
-import focusSensorHOC from '../global/focus-sensor-hoc';
-import getUID from '../global/get-uid';
-import Shortcuts from '../shortcuts/shortcuts';
-import Loader from '../loader/loader';
-import Selection from './selection';
-import Header from './header';
-import style from './table.css';
-import selectionShortcutsHOC from './selection-shortcuts-hoc';
-import disableHoverHOC from './disable-hover-hoc';
-import Row from './row-with-focus-sensor';
-/**
- * Interactive table with selection and keyboard navigation support.
- */
-export class Table extends PureComponent {
-    static defaultProps = {
-        isItemSelectable: () => true,
-        loading: false,
-        onSort: () => { },
-        onReorder: () => { },
-        getItemKey: (item) => item.id,
-        sortKey: 'id',
-        sortOrder: true,
-        draggable: false,
-        alwaysShowDragHandle: false,
-        stickyHeader: true,
-        getItemLevel: () => 0,
-        getItemClassName: () => null,
-        getMetaColumnClassName: () => null,
-        getItemDataTest: () => null,
-        isItemCollapsible: () => false,
-        isParentCollapsible: () => false,
-        isItemCollapsed: () => false,
-        onItemCollapse: () => { },
-        onItemExpand: () => { },
-        onItemDoubleClick: () => { },
-        onItemClick: () => { },
-        remoteSelection: false,
-        isDisabledSelectionVisible: () => false,
-        getCheckboxTooltip: () => undefined
-    };
-    state = {
-        shortcutsScope: getUID('ring-table-'),
-        userSelectNone: false
-    };
-    componentDidMount() {
-        document.addEventListener('mouseup', this.onMouseUp);
-    }
-    componentDidUpdate({ data, selection, onSelect, selectable, 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());
-        }
-    }
-    componentWillUnmount() {
-        document.removeEventListener('mouseup', this.onMouseUp);
-    }
-    onMouseDown = (e) => {
-        if (e.shiftKey) {
-            this.setState({ userSelectNone: true });
-        }
-    };
-    onMouseUp = () => {
-        if (this.state.userSelectNone) {
-            this.setState({ userSelectNone: false });
-        }
-    };
-    onRowFocus = (row) => {
-        const { selection, onSelect } = this.props;
-        onSelect(selection.focus(row));
-    };
-    onRowSelect = (row, selected) => {
-        const { selection, onSelect } = this.props;
-        if (selected) {
-            onSelect(selection.select(row));
-        }
-        else {
-            onSelect(selection.deselect(row));
-        }
-    };
-    onSortEnd = ({ oldIndex, newIndex }) => {
-        const data = arrayMove(this.props.data, oldIndex, newIndex);
-        this.props.onReorder({ data, oldIndex, newIndex });
-    };
-    onCheckboxChange = (e) => {
-        const { checked } = e.currentTarget;
-        const { selection, onSelect } = this.props;
-        if (checked) {
-            onSelect(selection.selectAll());
-        }
-        else {
-            onSelect(selection.reset());
-        }
-        this.restoreFocusWithoutScroll();
-    };
-    restoreFocusWithoutScroll = () => {
-        const { scrollX, scrollY } = window;
-        this.props.onFocusRestore();
-        window.scrollTo(scrollX, scrollY);
-    };
-    render() {
-        const { data, selection, columns, caption, getItemKey, selectable, focused, isItemSelectable, getItemLevel, getItemClassName, getMetaColumnClassName, getItemDataTest, draggable, alwaysShowDragHandle, dragHandleTitle, loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader, stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed, onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip, onItemDoubleClick, onItemClick, renderEmpty } = this.props;
-        // NOTE: Do not construct new object per render because it causes all rows rerendering
-        const headerProps = {
-            caption, selectable, draggable,
-            columns, onSort, sortKey, sortOrder,
-            sticky: stickyHeader,
-            topStickOffset: stickyHeaderOffset
-        };
-        const selectedSize = selection.getSelected().size;
-        const allSelectedSize = selection.selectAll().getSelected().size;
-        headerProps.checked = selectedSize > 0 && selectedSize === allSelectedSize;
-        headerProps.onCheckboxChange = this.onCheckboxChange;
-        headerProps.checkboxDisabled = this.props.data.length === 0;
-        const wrapperClasses = classNames({
-            [style.tableWrapper]: true,
-            [style.loading]: loading
-        });
-        const classes = classNames(this.props.className, {
-            [style.table]: true,
-            [style.multiSelection]: selection.getSelected().size > 0,
-            [style.userSelectNone]: this.state.userSelectNone,
-            [style.disabledHover]: this.props.disabledHover
-        });
-        const renderList = ({ children, props }) => {
-            const empty = (<tr>
-          <td colSpan={this.props.columns.length || 1} className={style.tableMessage}>
-            {renderEmpty ? renderEmpty() : null}
-          </td>
-        </tr>);
-            const tbody = Array.isArray(children) && children.length > 0
-                ? children
-                : empty;
-            return (<table className={classes} data-test="ring-table">
-          <Header {...headerProps}/>
-          <tbody {...props} data-test="ring-table-body">
-            {tbody}
-          </tbody>
-        </table>);
-        };
-        const renderItem = ({ value, props = {}, isDragged }) => {
-            if (value == null) {
-                return null;
-            }
-            const { ref, ...restProps } = props;
-            const row = (<Row 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={this.onRowFocus} onSelect={this.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), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} {...restProps}/>);
-            return isDragged
-                ? (<table style={{ ...props.style }} className={style.draggingTable}>
-            <tbody>{row}</tbody>
-          </table>)
-                : row;
-        };
-        return (<div className={wrapperClasses} data-test="ring-table-wrapper" ref={this.props.innerRef}>
-        {focused &&
-                (<Shortcuts map={this.props.shortcutsMap} scope={this.state.shortcutsScope}/>)}
-
-        {/* Handler detects that user holds Shift key */}
-        <div role="presentation" onMouseDown={this.onMouseDown}>
-          {draggable
-                ? (<List values={data} renderList={renderList} renderItem={renderItem} onChange={this.onSortEnd}/>)
-                : renderList({ children: data.map((value, index) => renderItem({ value, index })) })}
-        </div>
-
-        {loading && (<div className={style.loadingOverlay}>
-            <Loader className={loaderClassName}/>
-          </div>)}
-      </div>);
-    }
-}
-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
-};
-const getContainer = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));
-// eslint-disable-next-line react/no-multi-comp
-export default class TableContainer extends Component {
-    // https://stackoverflow.com/a/53882322/6304152
-    static propTypes = getContainer().propTypes;
-    Table = getContainer();
-    render() {
-        return <this.Table {...this.props}/>;
-    }
-}