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

package/components/table/table.js

@@ -1,369 +1,25 @@
-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/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 Table from './table-component.js';
+import 'react-compiler-runtime';
+import 'react';
+import 'classnames';
+import '../global/intersection-observer-context.js';
+import './table-virtualize.js';
+import '../global/use-event-callback.js';
+import '../_helpers/table.js';
+import 'react/jsx-runtime';
+import './default-item-renderer.js';
+import './table-const.js';
+import './table-base.js';
+import '@jetbrains/icons/unsorted-12px';
+import '@jetbrains/icons/arrow-12px-down';
+import '@jetbrains/icons/arrow-12px-up';
+import '@jetbrains/icons/trash-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 };
+
+export { Table as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui-built",
-  "version": "7.0.115",
+  "version": "8.0.0-beta.2",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"