@jetbrains/ring-ui-built 7.0.115 → 8.0.0-beta.3

package/components/{table → legacy-table}/multitable.d.ts

@@ -1,6 +1,6 @@
 import { PureComponent, type ReactElement } from 'react';
 import { type TableAttrs } from './table';
-import { type SelectionItem } from './selection';
+import { type SelectionItem } from '../global/table-selection';
 type TableComponent = ReactElement<TableAttrs<SelectionItem>>;
 export interface MultiTableProps {
     children: TableComponent[];

package/components/{table → legacy-table}/row-with-focus-sensor.js

@@ -4,7 +4,7 @@ import Row from './row.js';
 import { jsx } from 'react/jsx-runtime';
 import '../global/compose-refs.js';
 import 'memoize-one';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import 'classnames';
 import '@jetbrains/icons/chevron-right';
 import '@jetbrains/icons/chevron-down';
@@ -44,7 +44,7 @@ import '../popup/popup.target.js';
 import '../popup/position-css.js';
 import '../_helpers/theme.js';
 import './cell.js';
-import '../_helpers/table.js';
+import '../_helpers/legacy-table.js';
 
 const getContainer = () => focusSensorHOC(Row);
 class RowWithFocusSensorCallbacks extends PureComponent {

package/components/{table → legacy-table}/row.js

@@ -1,4 +1,4 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import chevronRightIcon from '@jetbrains/icons/chevron-right';
@@ -11,7 +11,7 @@ import joinDataTestAttributes from '../global/data-tests.js';
 import getUID from '../global/get-uid.js';
 import { createComposedRef } from '../global/compose-refs.js';
 import Cell from './cell.js';
-import { s as style } from '../_helpers/table.js';
+import { s as style } from '../_helpers/legacy-table.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
@@ -46,11 +46,11 @@ import 'memoize-one';
 
 const DragHandle = t0 => {
   const $ = c(6);
-  if ($[0] !== "55dd4b764fc7ce682e91a4f9ed76700dd0c03ecdbbc71fc25d11ed30dc931312") {
+  if ($[0] !== "6d181a7b79d6c43c9efeb4fa43b5ac2047952f3bf582e26f319cda89e9e36280") {
     for (let $i = 0; $i < 6; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "55dd4b764fc7ce682e91a4f9ed76700dd0c03ecdbbc71fc25d11ed30dc931312";
+    $[0] = "6d181a7b79d6c43c9efeb4fa43b5ac2047952f3bf582e26f319cda89e9e36280";
   }
   const {
     alwaysShowDragHandle,

package/components/legacy-table/selection-adapter.d.ts

@@ -0,0 +1,6 @@
+import type TableSelection from '../global/table-selection';
+import type { SelectionItem } from '../global/table-selection';
+export default function selectionAdapter(getSelection: () => TableSelection<SelectionItem>): {
+    readonly size: number;
+    readonly items: SelectionItem[];
+};

package/components/{table → legacy-table}/selection-shortcuts-hoc.d.ts

@@ -1,16 +1,16 @@
 import { type ComponentClass } from 'react';
 import { type ShortcutsMap } from '../shortcuts/core';
-import type Selection from './selection';
+import type TableSelection from '../global/table-selection';
 export interface SelectionShortcutsOuterProps<T extends object> {
-    selection: Selection<T>;
+    selection: TableSelection<T>;
     selectable?: boolean | undefined;
-    onSelect?: ((selection: Selection<T>) => void) | undefined;
+    onSelect?: ((selection: TableSelection<T>) => void) | undefined;
     shortcuts?: ShortcutsMap | undefined;
 }
 export interface SelectionShortcutsAddProps<T extends object> {
-    selection: Selection<T>;
+    selection: TableSelection<T>;
     selectable: boolean;
-    onSelect: (selection: Selection<T>) => void;
+    onSelect: (selection: TableSelection<T>) => void;
     shortcutsMap: ShortcutsMap;
 }
 export type SelectionShortcutsProps<T extends object, P> = Omit<P, keyof SelectionShortcutsAddProps<T>> & SelectionShortcutsOuterProps<T>;

package/components/{table → legacy-table}/simple-table.d.ts

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 import { type TableAttrs } from './table';
-import Selection, { type SelectionItem } from './selection';
+import TableSelection, { type SelectionItem } from '../global/table-selection';
 export interface SimpleTableProps<T extends SelectionItem> extends Omit<TableAttrs<T>, 'selection' | 'onSelect' | 'selectable'> {
 }
 declare class SimpleTable<T extends SelectionItem> extends PureComponent<SimpleTableProps<T>> {
@@ -9,7 +9,7 @@ declare class SimpleTable<T extends SelectionItem> extends PureComponent<SimpleT
         wideFirstColumn: boolean;
     };
     state: {
-        selection: Selection<T>;
+        selection: TableSelection<T>;
     };
     classes: string;
     render(): import("react").JSX.Element;

package/components/{table → legacy-table}/simple-table.js

@@ -1,8 +1,8 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import TableContainer from './table.js';
-import Selection$1 from './selection.js';
-import { s as style } from '../_helpers/table.js';
+import TableSelection from '../global/table-selection.js';
+import { s as style } from '../_helpers/legacy-table.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react-movable';
 import '../global/focus-sensor-hoc.js';
@@ -26,7 +26,7 @@ import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 import '../control-help/control-help.js';
 import '../global/data-tests.js';
@@ -63,7 +63,7 @@ class SimpleTable extends PureComponent {
     wideFirstColumn: false
   };
   state = {
-    selection: new Selection$1({
+    selection: new TableSelection({
       data: this.props.data
     })
   };

package/components/{table → legacy-table}/smart-table.d.ts

@@ -1,19 +1,19 @@
 import { PureComponent } from 'react';
 import { type TableAttrs } from './table';
-import Selection, { type SelectionItem } from './selection';
+import TableSelection, { type SelectionItem } from '../global/table-selection';
 export interface SmartTableProps<T extends SelectionItem> extends Omit<TableAttrs<T>, 'selection' | 'onSelect'> {
-    onSelectionChange: (selection: Selection<T>) => void;
-    selection?: Selection<T>;
+    onSelectionChange: (selection: TableSelection<T>) => void;
+    selection?: TableSelection<T>;
 }
 declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTableProps<T>> {
     static defaultProps: {
         onSelectionChange: () => void;
     };
     state: {
-        selection: Selection<T>;
+        selection: TableSelection<T>;
     };
     UNSAFE_componentWillReceiveProps(nextProps: SmartTableProps<T>): void;
-    onSelect: (selection: Selection<T>) => void;
+    onSelect: (selection: TableSelection<T>) => void;
     render(): import("react").JSX.Element;
 }
 export default SmartTable;

package/components/{table → legacy-table}/smart-table.js

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 import TableContainer from './table.js';
-import Selection$1 from './selection.js';
+import TableSelection from '../global/table-selection.js';
 import { jsx } from 'react/jsx-runtime';
 import 'classnames';
 import 'react-movable';
@@ -25,14 +25,14 @@ import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 import '../control-help/control-help.js';
 import '../global/data-tests.js';
 import './header-cell.js';
 import '@jetbrains/icons/unsorted-12px';
 import '@jetbrains/icons/chevron-12px-down';
-import '../_helpers/table.js';
+import '../_helpers/legacy-table.js';
 import './selection-shortcuts-hoc.js';
 import './disable-hover-hoc.js';
 import './row-with-focus-sensor.js';
@@ -62,7 +62,7 @@ class SmartTable extends PureComponent {
     onSelectionChange: () => {}
   };
   state = {
-    selection: new Selection$1({
+    selection: new TableSelection({
       data: this.props.data,
       isItemSelectable: this.props.isItemSelectable
     })
@@ -79,7 +79,7 @@ class SmartTable extends PureComponent {
       });
     } else if (this.props.data !== data || this.props.isItemSelectable !== isItemSelectable) {
       this.setState({
-        selection: new Selection$1({
+        selection: new TableSelection({
           data,
           isItemSelectable
         })

package/components/legacy-table/table.d.ts

@@ -0,0 +1,109 @@
+/**
+ * @name Table
+ */
+import { Component, PureComponent, type ReactNode, type SyntheticEvent } from 'react';
+import * as React from 'react';
+import { type OnChangeMeta } from 'react-movable/lib/types';
+import { type FocusSensorAddProps, type FocusSensorProps } from '../global/focus-sensor-hoc';
+import { type SelectionShortcutsAddProps, type SelectionShortcutsProps } from './selection-shortcuts-hoc';
+import { type DisableHoverAddProps, type DisableHoverProps } from './disable-hover-hoc';
+import Row from './row-with-focus-sensor';
+import { type Column, type SortParams } from './header-cell';
+export interface ReorderParams<T> {
+    data: T[];
+    oldIndex: number;
+    newIndex: number;
+}
+export interface TableProps<T extends object> extends FocusSensorAddProps<HTMLTableRowElement>, SelectionShortcutsAddProps<T>, DisableHoverAddProps {
+    data: readonly T[];
+    columns: readonly Column<T>[] | ((item: T | null) => 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;
+    wideFirstColumn: 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;
+    wrapperClassName?: string | null | undefined;
+    headerClassName?: string | null | undefined;
+    cellClassName?: string | null | undefined;
+    loaderClassName?: string | undefined;
+    caption?: string | null | undefined;
+    stickyHeaderOffset?: string | undefined;
+    renderEmpty?: (() => ReactNode) | null | undefined;
+    RowComponent: typeof Row;
+    renderLoader?: ((loaderClassName?: string) => ReactNode) | null | undefined;
+}
+/**
+ * Interactive table with selection and keyboard navigation support.
+ */
+export declare class Table<T extends object> extends PureComponent<TableProps<T>> {
+    static defaultProps: {
+        isItemSelectable: () => boolean;
+        loading: boolean;
+        onSort: () => void;
+        onReorder: () => void;
+        getItemKey: (item: object) => 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;
+        RowComponent: typeof Row;
+        wideFirstColumn: boolean;
+    };
+    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 object> = DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>;
+export default class TableContainer<T extends object> extends Component<TableAttrs<T>> {
+    Table: React.ComponentClass<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>, any>;
+    render(): React.JSX.Element;
+}

package/components/legacy-table/table.js

@@ -0,0 +1,369 @@
+import { Component, PureComponent, createElement } from 'react';
+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 Header from './header.js';
+import selectionShortcutsHOC from './selection-shortcuts-hoc.js';
+import disableHoverHOC from './disable-hover-hoc.js';
+import RowWithFocusSensorCallbacks from './row-with-focus-sensor.js';
+import { s as style } from '../_helpers/legacy-table.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../global/compose-refs.js';
+import 'memoize-one';
+import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../_helpers/loader-core.js';
+import '../global/dom.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark-12px';
+import '@jetbrains/icons/remove-12px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import 'react/compiler-runtime';
+import '../global/memoize.js';
+import '../control-help/control-help.js';
+import '../global/data-tests.js';
+import './header-cell.js';
+import '@jetbrains/icons/unsorted-12px';
+import '@jetbrains/icons/chevron-12px-down';
+import './row.js';
+import '@jetbrains/icons/chevron-right';
+import '@jetbrains/icons/chevron-down';
+import '@jetbrains/icons/drag';
+import '../button/button.js';
+import '../link/clickable-link.js';
+import '../global/controls-height.js';
+import '../global/configuration.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 '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+import '../popup/position-css.js';
+import '../_helpers/theme.js';
+import './cell.js';
+
+class Table extends PureComponent {
+  static defaultProps = {
+    isItemSelectable: () => true,
+    loading: false,
+    onSort: () => {},
+    onReorder: () => {},
+    getItemKey: item => {
+      // Default behavior stays backward compatible: use item's "id" if present
+      if ('id' in item) {
+        return item.id;
+      }
+      // If there's no id provided on item and no getKey supplied, fail fast with a clear message
+      throw new Error('Table: getItemKey is required when items have no "id" property');
+    },
+    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,
+    RowComponent: RowWithFocusSensorCallbacks,
+    wideFirstColumn: false
+  };
+  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,
+      RowComponent,
+      renderLoader
+    } = this.props;
+    // NOTE: Do not construct new object per render because it causes all rows rerendering
+    const columnsArray = typeof columns === 'function' ? columns(null) : columns;
+    const headerProps = {
+      caption,
+      selectable,
+      draggable,
+      columns: columnsArray,
+      onSort,
+      sortKey,
+      sortOrder,
+      sticky: stickyHeader,
+      topStickOffset: stickyHeaderOffset,
+      className: this.props.headerClassName
+    };
+    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, this.props.wrapperClassName);
+    const classes = classNames(this.props.className, {
+      [style.table]: true,
+      [style.wideFirstColumn]: this.props.wideFirstColumn,
+      [style.userSelectNone]: this.state.userSelectNone,
+      [style.disabledHover]: this.props.disabledHover
+    });
+    const renderList = ({
+      children,
+      props
+    }) => {
+      const empty = /*#__PURE__*/jsx("tr", {
+        children: /*#__PURE__*/jsx("td", {
+          colSpan: columnsArray.length || 1,
+          className: style.tableMessage,
+          children: renderEmpty ? renderEmpty() : null
+        })
+      });
+      const tbody = Array.isArray(children) && children.length > 0 ? children : empty;
+      return /*#__PURE__*/jsxs("table", {
+        className: classes,
+        "data-test": "ring-table",
+        children: [/*#__PURE__*/jsx(Header, {
+          ...headerProps
+        }), /*#__PURE__*/jsx("tbody", {
+          ...props,
+          "data-test": "ring-table-body",
+          children: tbody
+        })]
+      });
+    };
+    const renderItem = ({
+      value,
+      props = {},
+      isDragged
+    }) => {
+      var _restProps$key;
+      if (value === null || value === undefined) {
+        return null;
+      }
+      const {
+        ref,
+        ...restProps
+      } = props;
+      const row = /*#__PURE__*/createElement(RowComponent, {
+        innerRef: ref,
+        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),
+        cellClassName: this.props.cellClassName,
+        ...restProps,
+        key: (_restProps$key = restProps.key) !== null && _restProps$key !== void 0 ? _restProps$key : getItemKey(value)
+      });
+      return isDragged ? /*#__PURE__*/jsx("table", {
+        style: {
+          ...props.style
+        },
+        className: style.draggingTable,
+        children: /*#__PURE__*/jsx("tbody", {
+          children: row
+        })
+      }) : row;
+    };
+    return /*#__PURE__*/jsxs("div", {
+      className: wrapperClasses,
+      "data-test": "ring-table-wrapper",
+      ref: this.props.innerRef,
+      children: [focused && /*#__PURE__*/jsx(Shortcuts, {
+        map: this.props.shortcutsMap,
+        scope: this.state.shortcutsScope
+      }), /*#__PURE__*/jsx("div", {
+        role: "presentation",
+        onMouseDown: this.onMouseDown,
+        children: draggable ? /*#__PURE__*/jsx(List, {
+          values: data,
+          renderList: renderList,
+          renderItem: renderItem,
+          onChange: this.onSortEnd
+        }) : renderList({
+          children: data.map((value, index) => renderItem({
+            value}))
+        })
+      }), loading && /*#__PURE__*/jsx("div", {
+        className: style.loadingOverlay,
+        children: renderLoader ? renderLoader(loaderClassName) : /*#__PURE__*/jsx(Loader, {
+          className: loaderClassName
+        })
+      })]
+    });
+  }
+}
+const getContainer = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));
+// eslint-disable-next-line react/no-multi-comp
+class TableContainer extends Component {
+  // https://stackoverflow.com/a/53882322/6304152
+  Table = getContainer();
+  render() {
+    return /*#__PURE__*/jsx(this.Table, {
+      ...this.props
+    });
+  }
+}
+
+export { Table, TableContainer as default };