@jetbrains/ring-ui-built 7.0.124 → 8.0.0-beta.10

package/components/table/table.js

@@ -1,369 +1,374 @@
-import { Component, PureComponent, createElement } from 'react';
+import { c } from 'react/compiler-runtime';
+import { useRef, Fragment } 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/table.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import '../global/compose-refs.js';
+import { useVirtualItems, SpacerRow, VirtualizationContext } from '../internal/virtualization.js';
+import { DefaultItemRenderer } from './default-item-renderer.js';
+import { TablePropsContext, defaultRowHeight } from './table-const.js';
+import { focusWithTemporaryTabIndex } from '../global/focus-with-temporary-tabindex.js';
+import { useReorderAnimationContextValue, ReorderAnimationContext } from '../internal/reorder-animation-context.js';
+import { useComposedRef } from '../global/compose-refs.js';
+import { TableHeader } from '../internal/table-header.js';
+import { keyboardFocusableAttrName } from './table-primitives.js';
+import { isWithinNavigableElement } from '../global/is-within-navigable-element.js';
+import { useReorderLayoutContextValue, ReorderLayoutContext } from '../internal/reorder-layout-context.js';
+import { s as styles } from '../_helpers/table.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../global/intersection-observer-context.js';
+import '../global/schedule-with-cleanup.js';
+import './item-virtualization.js';
+import './reorder-item-layout.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 '../internal/reorder-handle.js';
+import '@jetbrains/icons/drag-12px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
-import '../global/configuration.js';
 import '../global/memoize.js';
-import '../control-help/control-help.js';
-import '../global/data-tests.js';
-import './header-cell.js';
+import '../global/parse-css-duration.js';
+import '@jetbrains/icons/arrow-12px-down';
+import '@jetbrains/icons/arrow-12px-up';
+import '@jetbrains/icons/settings-12px';
+import '@jetbrains/icons/trash-12px';
 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 '../_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';
+import '../global/is-within-interactive-element.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());
+function Table(props) {
+  const $ = c(68);
+  if ($[0] !== "0b2671256cf6184450b7f5a987c20b706c8cb7e8a0bf848df36efecc0eb647dc") {
+    for (let $i = 0; $i < 68; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
+    $[0] = "0b2671256cf6184450b7f5a987c20b706c8cb7e8a0bf848df36efecc0eb647dc";
   }
-  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 => {
+  let className;
+  let columns;
+  let data;
+  let getKey;
+  let noColumnReorderAnimation;
+  let noItemReorderAnimation;
+  let renderItem;
+  let restProps;
+  let scrollerRef;
+  let t0;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let tbodyClassName;
+  let userRef;
+  if ($[1] !== props) {
     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,
+      data: t5,
+      columns: t6,
+      getKey: t7,
+      noHeader,
       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
-        })]
-      });
+      onColumnDelete,
+      onColumnReorder,
+      noColumnReorderAnimation: t8,
+      canReorderItem,
+      onItemReorder,
+      noItemReorderAnimation: t9,
+      renderItem: t10,
+      virtualizeRows: t11,
+      scrollerRef: t12,
+      estimateHeight: t13,
+      lookaheadPx: t14,
+      retentionMarginPx: t15,
+      minScrollAndResizeDeltaPx: t16,
+      columnEditing,
+      onColumnEditingRequest,
+      columnEditButton,
+      theadClassName,
+      theadTrClassName,
+      tbodyClassName: t17,
+      ref: t18,
+      className: t19,
+      ...t20
+    } = props;
+    data = t5;
+    columns = t6;
+    getKey = t7;
+    noColumnReorderAnimation = t8;
+    noItemReorderAnimation = t9;
+    renderItem = t10;
+    t0 = t11;
+    scrollerRef = t12;
+    t1 = t13;
+    t2 = t14;
+    t3 = t15;
+    t4 = t16;
+    tbodyClassName = t17;
+    userRef = t18;
+    className = t19;
+    restProps = t20;
+    $[1] = props;
+    $[2] = className;
+    $[3] = columns;
+    $[4] = data;
+    $[5] = getKey;
+    $[6] = noColumnReorderAnimation;
+    $[7] = noItemReorderAnimation;
+    $[8] = renderItem;
+    $[9] = restProps;
+    $[10] = scrollerRef;
+    $[11] = t0;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = tbodyClassName;
+    $[17] = userRef;
+  } else {
+    className = $[2];
+    columns = $[3];
+    data = $[4];
+    getKey = $[5];
+    noColumnReorderAnimation = $[6];
+    noItemReorderAnimation = $[7];
+    renderItem = $[8];
+    restProps = $[9];
+    scrollerRef = $[10];
+    t0 = $[11];
+    t1 = $[12];
+    t2 = $[13];
+    t3 = $[14];
+    t4 = $[15];
+    tbodyClassName = $[16];
+    userRef = $[17];
+  }
+  const virtualizeRows = t0 === undefined ? false : t0;
+  const estimateHeight = t1 === undefined ? _temp : t1;
+  const lookaheadPx = t2 === undefined ? 400 : t2;
+  const retentionMarginPx = t3 === undefined ? 450 : t3;
+  const minScrollAndResizeDeltaPx = t4 === undefined ? 50 : t4;
+  const localRef = useRef(null);
+  let t5;
+  if ($[18] !== columns || $[19] !== data || $[20] !== noColumnReorderAnimation || $[21] !== noItemReorderAnimation) {
+    t5 = {
+      noColumnReorderAnimation,
+      noItemReorderAnimation,
+      tableRef: localRef,
+      data,
+      columns
     };
-    const renderItem = ({
-      value,
-      props = {},
-      isDragged
-    }) => {
-      var _restProps$key;
-      if (value === null || value === undefined) {
-        return null;
+    $[18] = columns;
+    $[19] = data;
+    $[20] = noColumnReorderAnimation;
+    $[21] = noItemReorderAnimation;
+    $[22] = t5;
+  } else {
+    t5 = $[22];
+  }
+  const reorderAnimationContextValue = useReorderAnimationContextValue(t5);
+  let t6;
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = function handleRowNavigation(e) {
+      if (e.defaultPrevented || isWithinNavigableElement(e.target)) {
+        return;
+      }
+      const arrowUp = e.key === "ArrowUp";
+      const arrowDown = e.key === "ArrowDown";
+      if (!arrowUp && !arrowDown) {
+        return;
+      }
+      const currentRow = e.target.closest("tr");
+      if (currentRow?.parentElement?.parentElement !== localRef.current) {
+        return;
       }
-      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;
+      let candidate = currentRow;
+      while (candidate) {
+        candidate = arrowUp ? candidate.previousElementSibling : candidate.nextElementSibling;
+        if (candidate?.hasAttribute(keyboardFocusableAttrName)) {
+          focusWithTemporaryTabIndex(candidate);
+          e.preventDefault();
+          return;
+        }
+      }
+    };
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  const handleRowNavigation = t6;
+  let t7;
+  if ($[24] !== data || $[25] !== estimateHeight || $[26] !== lookaheadPx || $[27] !== minScrollAndResizeDeltaPx || $[28] !== retentionMarginPx || $[29] !== scrollerRef || $[30] !== virtualizeRows) {
+    t7 = {
+      enabled: virtualizeRows,
+      data,
+      scrollerRef,
+      tableRef: localRef,
+      estimateHeight,
+      lookaheadPx,
+      retentionMarginPx,
+      minScrollAndResizeDeltaPx
     };
-    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
-        })
-      })]
+    $[24] = data;
+    $[25] = estimateHeight;
+    $[26] = lookaheadPx;
+    $[27] = minScrollAndResizeDeltaPx;
+    $[28] = retentionMarginPx;
+    $[29] = scrollerRef;
+    $[30] = virtualizeRows;
+    $[31] = t7;
+  } else {
+    t7 = $[31];
+  }
+  const {
+    virtualItems,
+    virtualizationContextValue
+  } = useVirtualItems(t7);
+  const itemReorderLayoutContextValue = useReorderLayoutContextValue();
+  let t8;
+  if ($[32] !== className) {
+    t8 = classNames(styles.table, className);
+    $[32] = className;
+    $[33] = t8;
+  } else {
+    t8 = $[33];
+  }
+  const t9 = useComposedRef(userRef, localRef);
+  let t10;
+  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /*#__PURE__*/jsx(TableHeader, {});
+    $[34] = t10;
+  } else {
+    t10 = $[34];
+  }
+  const t11 = virtualizeRows ? virtualItems : data;
+  let t12;
+  if ($[35] !== columns || $[36] !== data || $[37] !== getKey || $[38] !== renderItem || $[39] !== t11 || $[40] !== virtualizeRows) {
+    let t13;
+    if ($[42] !== columns || $[43] !== data || $[44] !== getKey || $[45] !== renderItem || $[46] !== virtualizeRows) {
+      t13 = (item, index) => {
+        let dataItem;
+        let dataItemIndex;
+        if (virtualizeRows) {
+          const virtualItem = item;
+          if (virtualItem.type === "spacer") {
+            return /*#__PURE__*/jsx(SpacerRow, {
+              spacer: virtualItem,
+              colSpan: columns.length
+            }, virtualItem.key);
+          }
+          dataItemIndex = virtualItem.index;
+          if (dataItemIndex < 0 || dataItemIndex >= data.length) {
+            return null;
+          }
+          dataItem = data[dataItemIndex];
+        } else {
+          dataItem = item;
+          dataItemIndex = index;
+        }
+        return /*#__PURE__*/jsx(Fragment, {
+          children: renderItem ? renderItem(dataItem, dataItemIndex, data) : /*#__PURE__*/jsx(DefaultItemRenderer, {
+            index: dataItemIndex
+          })
+        }, getKey(dataItem, dataItemIndex, data));
+      };
+      $[42] = columns;
+      $[43] = data;
+      $[44] = getKey;
+      $[45] = renderItem;
+      $[46] = virtualizeRows;
+      $[47] = t13;
+    } else {
+      t13 = $[47];
+    }
+    t12 = t11.map(t13);
+    $[35] = columns;
+    $[36] = data;
+    $[37] = getKey;
+    $[38] = renderItem;
+    $[39] = t11;
+    $[40] = virtualizeRows;
+    $[41] = t12;
+  } else {
+    t12 = $[41];
+  }
+  let t13;
+  if ($[48] !== itemReorderLayoutContextValue || $[49] !== t12) {
+    t13 = /*#__PURE__*/jsx(ReorderLayoutContext, {
+      value: itemReorderLayoutContextValue,
+      children: t12
     });
+    $[48] = itemReorderLayoutContextValue;
+    $[49] = t12;
+    $[50] = t13;
+  } else {
+    t13 = $[50];
   }
-}
-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
+  let t14;
+  if ($[51] !== t13 || $[52] !== virtualizationContextValue) {
+    t14 = /*#__PURE__*/jsx(VirtualizationContext, {
+      value: virtualizationContextValue,
+      children: t13
+    });
+    $[51] = t13;
+    $[52] = virtualizationContextValue;
+    $[53] = t14;
+  } else {
+    t14 = $[53];
+  }
+  let t15;
+  if ($[54] !== t14 || $[55] !== tbodyClassName) {
+    t15 = /*#__PURE__*/jsx("tbody", {
+      className: tbodyClassName,
+      onKeyDown: handleRowNavigation,
+      children: t14
+    });
+    $[54] = t14;
+    $[55] = tbodyClassName;
+    $[56] = t15;
+  } else {
+    t15 = $[56];
+  }
+  let t16;
+  if ($[57] !== restProps || $[58] !== t15 || $[59] !== t8 || $[60] !== t9) {
+    t16 = /*#__PURE__*/jsxs("table", {
+      className: t8,
+      ref: t9,
+      ...restProps,
+      children: [t10, t15]
     });
+    $[57] = restProps;
+    $[58] = t15;
+    $[59] = t8;
+    $[60] = t9;
+    $[61] = t16;
+  } else {
+    t16 = $[61];
   }
+  let t17;
+  if ($[62] !== reorderAnimationContextValue || $[63] !== t16) {
+    t17 = /*#__PURE__*/jsx(ReorderAnimationContext, {
+      value: reorderAnimationContextValue,
+      children: t16
+    });
+    $[62] = reorderAnimationContextValue;
+    $[63] = t16;
+    $[64] = t17;
+  } else {
+    t17 = $[64];
+  }
+  let t18;
+  if ($[65] !== props || $[66] !== t17) {
+    t18 = /*#__PURE__*/jsx(TablePropsContext, {
+      value: props,
+      children: t17
+    });
+    $[65] = props;
+    $[66] = t17;
+    $[67] = t18;
+  } else {
+    t18 = $[67];
+  }
+  return t18;
+}
+function _temp() {
+  return defaultRowHeight;
 }
 
-export { Table, TableContainer as default };
+export { Table as default };