@jetbrains/ring-ui 4.2.7 → 4.2.10

package/dist/table/row-with-focus-sensor.js

@@ -0,0 +1,83 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { PureComponent } from 'react';
+import focusSensorHOC from '../global/focus-sensor-hoc.js';
+import Row from './row.js';
+import 'prop-types';
+import '../global/composeRefs.js';
+import 'classnames';
+import '@jetbrains/icons/chevron-right';
+import '@jetbrains/icons/chevron-down';
+import '@jetbrains/icons/drag';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
+import '../global/memoize.js';
+import '../_helpers/checkbox.js';
+import '../button/button.js';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+import '../global/theme.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../tooltip/tooltip.js';
+import '../popup/popup.js';
+import 'react-dom';
+import '../global/get-uid.js';
+import '../global/schedule-raf.js';
+import '../global/dom.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/data-tests.js';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+import './cell.js';
+import '../_helpers/table.js';
+
+const RowWithFocusSensor = focusSensorHOC(Row);
+class RowWithFocusSensorCallbacks extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "onFocus", () => {
+      this.props.onFocus(this.props.item);
+    });
+
+    _defineProperty(this, "onSelect", (item, selected) => {
+      this.props.onSelect(item, selected);
+    });
+
+    _defineProperty(this, "onCollapse", () => {
+      this.props.onCollapse(this.props.item);
+    });
+
+    _defineProperty(this, "onExpand", () => {
+      this.props.onExpand(this.props.item);
+    });
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(RowWithFocusSensor, _extends({}, this.props, {
+      onFocus: this.onFocus,
+      onSelect: this.onSelect,
+      onCollapse: this.onCollapse,
+      onExpand: this.onExpand
+    }));
+  }
+
+}
+
+_defineProperty(RowWithFocusSensorCallbacks, "propTypes", Row.propTypes);
+
+export { RowWithFocusSensorCallbacks as default };

package/dist/table/row.js

@@ -0,0 +1,278 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import chevronRightIcon from '@jetbrains/icons/chevron-right';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+import dragIcon from '@jetbrains/icons/drag';
+import Checkbox from '../checkbox/checkbox.js';
+import Button from '../button/button.js';
+import Tooltip from '../tooltip/tooltip.js';
+import joinDataTestAttributes from '../global/data-tests.js';
+import getUID from '../global/get-uid.js';
+import composeRefs from '../global/composeRefs.js';
+import Cell from './cell.js';
+import { m as modules_1db4bbca } from '../_helpers/table.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
+import '../global/memoize.js';
+import '../_helpers/checkbox.js';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+import '../global/theme.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../popup/popup.js';
+import 'react-dom';
+import '../global/schedule-raf.js';
+import '../global/dom.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+
+const DragHandle = _ref => {
+  let {
+    alwaysShowDragHandle,
+    dragHandleTitle = 'Drag to reorder'
+  } = _ref;
+  const classes = classNames(modules_1db4bbca.dragHandle, {
+    [modules_1db4bbca.visibleDragHandle]: alwaysShowDragHandle
+  });
+  return /*#__PURE__*/React.createElement(Button, {
+    "data-movable-handle": true,
+    title: dragHandleTitle,
+    className: classes,
+    icon: dragIcon
+  });
+};
+
+DragHandle.propTypes = {
+  alwaysShowDragHandle: PropTypes.bool,
+  dragHandleTitle: PropTypes.string
+};
+class Row extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "id", getUID('table-row-'));
+
+    _defineProperty(this, "onMouseEnter", e => {
+      const {
+        item,
+        onHover
+      } = this.props;
+      onHover(item, e);
+    });
+
+    _defineProperty(this, "onClick", e => {
+      const {
+        item
+      } = this.props;
+      this.props.onClick(item, e);
+
+      if (e.shiftKey) {
+        this.toggleSelection();
+      }
+    });
+
+    _defineProperty(this, "onCheckboxFocus", () => {
+      this.props.onFocusRestore();
+    });
+
+    _defineProperty(this, "onCheckboxChange", () => {
+      this.toggleSelection();
+    });
+
+    _defineProperty(this, "onDoubleClick", () => {
+      const {
+        item
+      } = this.props;
+      this.props.onDoubleClick(item);
+    });
+
+    _defineProperty(this, "rowRef", el => {
+      this.row = el;
+    });
+  }
+
+  toggleSelection() {
+    const {
+      selectable,
+      selected,
+      onSelect,
+      item
+    } = this.props;
+
+    if (selectable) {
+      onSelect(item, !selected);
+    }
+  }
+
+  render() {
+    const {
+      item,
+      columns,
+      selectable,
+      selected,
+      showFocus,
+      draggable,
+      alwaysShowDragHandle,
+      dragHandleTitle,
+      level,
+      collapsible,
+      parentCollapsible,
+      collapsed,
+      onCollapse,
+      onExpand,
+      showDisabledSelection,
+      checkboxTooltip,
+      innerRef,
+      focused,
+      autofocus,
+      onFocusReset,
+      onFocusRestore,
+      onHover,
+      className,
+      'data-test': dataTest,
+      ...restProps
+    } = this.props;
+    const classes = classNames(className, {
+      [modules_1db4bbca.row]: true,
+      [modules_1db4bbca.rowFocused]: showFocus,
+      [modules_1db4bbca.rowSelected]: selected
+    });
+    const testAttrs = {
+      'data-test-focused': showFocus || undefined,
+      'data-test-selected': selected || undefined
+    };
+    const metaColumnClasses = modules_1db4bbca.metaColumn;
+    const SUBITEM_OFFSET = 30;
+    const COLLAPSIBLE_PARENT_OFFSET = 20;
+    const gap = level * SUBITEM_OFFSET + (parentCollapsible ? COLLAPSIBLE_PARENT_OFFSET : 0);
+    const metaColumnStyle = {
+      paddingLeft: "".concat(gap, "px")
+    };
+    const metaColumn = /*#__PURE__*/React.createElement("div", {
+      className: metaColumnClasses,
+      style: metaColumnStyle
+    }, draggable && /*#__PURE__*/React.createElement(DragHandle, {
+      alwaysShowDragHandle: alwaysShowDragHandle,
+      dragHandleTitle: dragHandleTitle
+    }), selectable && /*#__PURE__*/React.createElement(Tooltip, {
+      title: checkboxTooltip
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      "aria-labelledby": this.id,
+      className: showFocus ? 'ring-checkbox_focus' : '',
+      checked: selected,
+      onFocus: this.onCheckboxFocus,
+      onChange: this.onCheckboxChange,
+      tabIndex: "-1"
+    })), !selectable && showDisabledSelection && /*#__PURE__*/React.createElement(Tooltip, {
+      title: checkboxTooltip
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      "aria-labelledby": this.id,
+      checked: selected,
+      disabled: true
+    })), collapsible && collapsed && /*#__PURE__*/React.createElement(Button, {
+      className: modules_1db4bbca.rowCollapseExpandButton,
+      icon: chevronRightIcon,
+      onClick: () => onExpand(item)
+    }), collapsible && !collapsed && /*#__PURE__*/React.createElement(Button, {
+      className: modules_1db4bbca.rowCollapseExpandButton,
+      icon: chevronDownIcon,
+      onClick: () => onCollapse(item)
+    }));
+    const cells = columns.map((column, index) => {
+      const getValue = column.getValue || (() => item[column.id]);
+
+      const getDataTest = column.getDataTest || (() => column.id);
+
+      const value = getValue(item, column);
+      const cellClasses = classNames({
+        [modules_1db4bbca.cellRight]: column.rightAlign
+      }, column.className);
+      const showMetaColumn = draggable || selectable || showDisabledSelection || !!level;
+      return /*#__PURE__*/React.createElement(Cell, {
+        key: column.id,
+        className: cellClasses,
+        "data-test": getDataTest(item, column)
+      }, index === 0 && showMetaColumn && metaColumn, value);
+    });
+    return /*#__PURE__*/React.createElement("tr", _extends({
+      id: this.id,
+      ref: composeRefs(this.rowRef, innerRef),
+      className: classes,
+      tabIndex: "0",
+      "data-test": joinDataTestAttributes('ring-table-row', dataTest)
+    }, testAttrs, restProps, {
+      onMouseMove: this.onMouseEnter,
+      onClick: this.onClick,
+      onDoubleClick: this.onDoubleClick
+    }), cells);
+  }
+
+}
+
+_defineProperty(Row, "propTypes", {
+  className: PropTypes.string,
+  item: PropTypes.object.isRequired,
+  columns: PropTypes.array.isRequired,
+  selectable: PropTypes.bool,
+  showFocus: PropTypes.bool,
+  draggable: PropTypes.bool,
+  alwaysShowDragHandle: PropTypes.bool,
+  dragHandleTitle: PropTypes.string,
+  selected: PropTypes.bool,
+  onHover: PropTypes.func,
+  onSelect: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocusRestore: PropTypes.func,
+  level: PropTypes.number,
+  collapsible: PropTypes.bool,
+  parentCollapsible: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  onCollapse: PropTypes.func,
+  onExpand: PropTypes.func,
+  showDisabledSelection: PropTypes.bool,
+  checkboxTooltip: PropTypes.string,
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  focused: PropTypes.bool,
+  autofocus: PropTypes.bool,
+  onFocusReset: PropTypes.func,
+  'data-test': PropTypes.string
+});
+
+_defineProperty(Row, "defaultProps", {
+  selectable: true,
+  showFocus: false,
+  draggable: false,
+  alwaysShowDragHandle: false,
+  selected: false,
+  onHover: () => {},
+  onSelect: () => {},
+  onDoubleClick: () => {},
+  onClick: () => {},
+  onFocusRestore: () => {},
+  level: 0,
+  collapsible: false,
+  parentCollapsible: false,
+  collapsed: false,
+  onCollapse: () => {},
+  onExpand: () => {}
+});
+
+export { Row as default };

package/dist/table/selection-adapter.js

@@ -0,0 +1,16 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+
+function selectionAdapter(getSelection) {
+  return {
+    get size() {
+      return getSelection().getActive().size;
+    },
+
+    get items() {
+      return [...getSelection().getActive()];
+    }
+
+  };
+}
+
+export { selectionAdapter as default };

package/dist/table/selection-shortcuts-hoc.js

@@ -0,0 +1,215 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Selection from './selection.js';
+
+function selectionShortcutsHOC(ComposedComponent) {
+  var _class;
+
+  return _class = class SelectionShortcuts extends PureComponent {
+    constructor() {
+      super(...arguments);
+
+      _defineProperty(this, "onUpPress", () => {
+        const {
+          selection,
+          onSelect
+        } = this.props;
+        const newSelection = selection.moveUp();
+
+        if (newSelection) {
+          onSelect(newSelection);
+        }
+
+        return false;
+      });
+
+      _defineProperty(this, "onDownPress", () => {
+        const {
+          selection,
+          onSelect
+        } = this.props;
+        const newSelection = selection.moveDown();
+
+        if (newSelection) {
+          onSelect(newSelection);
+        }
+
+        return false;
+      });
+
+      _defineProperty(this, "onShiftKeyDown", () => {
+        const {
+          selection
+        } = this.props;
+
+        if (selection.isSelected(selection.getFocused())) {
+          this.shiftSelectionMode = 'deletion';
+        } else {
+          this.shiftSelectionMode = 'addition';
+        }
+      });
+
+      _defineProperty(this, "shiftSelect", selection => {
+        if (this.shiftSelectionMode === 'addition') {
+          return selection.select();
+        } else {
+          return selection.deselect();
+        }
+      });
+
+      _defineProperty(this, "onShiftUpPress", e => {
+        e.preventDefault();
+        const {
+          selectable,
+          selection,
+          onSelect
+        } = this.props;
+
+        if (!selectable) {
+          return;
+        }
+
+        const newSelection = this.shiftSelect(selection);
+        const newMovedSelection = newSelection.moveUp();
+
+        if (newMovedSelection) {
+          onSelect(newMovedSelection);
+        } else {
+          onSelect(newSelection);
+        }
+      });
+
+      _defineProperty(this, "onShiftDownPress", e => {
+        e.preventDefault();
+        const {
+          selectable,
+          selection,
+          onSelect
+        } = this.props;
+
+        if (!selectable) {
+          return;
+        }
+
+        const newSelection = this.shiftSelect(selection);
+        const newMovedSelection = newSelection.moveDown();
+
+        if (newMovedSelection) {
+          onSelect(newMovedSelection);
+        } else {
+          onSelect(newSelection);
+        }
+      });
+
+      _defineProperty(this, "onHomePress", () => {
+        const {
+          selection,
+          onSelect
+        } = this.props;
+        const newSelection = selection.moveStart();
+
+        if (newSelection) {
+          onSelect(newSelection);
+        }
+
+        return false;
+      });
+
+      _defineProperty(this, "onEndPress", () => {
+        const {
+          selection,
+          onSelect
+        } = this.props;
+        const newSelection = selection.moveEnd();
+
+        if (newSelection) {
+          onSelect(newSelection);
+        }
+
+        return false;
+      });
+
+      _defineProperty(this, "onSpacePress", () => {
+        const {
+          selectable,
+          selection,
+          onSelect
+        } = this.props;
+
+        if (!selectable) {
+          return true;
+        }
+
+        onSelect(selection.toggleSelection());
+        return false;
+      });
+
+      _defineProperty(this, "onEscPress", () => {
+        const {
+          selection,
+          onSelect
+        } = this.props;
+        onSelect(selection.reset()); //this.restoreFocusWithoutScroll();
+      });
+
+      _defineProperty(this, "onCmdAPress", () => {
+        const {
+          selectable,
+          selection,
+          onSelect
+        } = this.props;
+
+        if (!selectable) {
+          return true;
+        }
+
+        onSelect(selection.selectAll());
+        return false;
+      });
+
+      _defineProperty(this, "shortcutsMap", {
+        up: this.onUpPress,
+        down: this.onDownPress,
+        shift: this.onShiftKeyDown,
+        'shift+up': this.onShiftUpPress,
+        'shift+down': this.onShiftDownPress,
+        home: this.onHomePress,
+        end: this.onEndPress,
+        space: this.onSpacePress,
+        esc: this.onEscPress,
+        'command+a': this.onCmdAPress,
+        'ctrl+a': this.onCmdAPress
+      });
+    }
+
+    render() {
+      const {
+        selection,
+        selectable,
+        onSelect
+      } = this.props;
+      return /*#__PURE__*/React.createElement(ComposedComponent, _extends({}, this.props, {
+        selection: selection,
+        selectable: selectable,
+        onSelect: onSelect,
+        shortcutsMap: { ...this.shortcutsMap,
+          ...this.props.shortcuts
+        }
+      }));
+    }
+
+  }, _defineProperty(_class, "propTypes", { ...ComposedComponent.propTypes,
+    selection: PropTypes.instanceOf(Selection).isRequired,
+    selectable: PropTypes.bool,
+    onSelect: PropTypes.func,
+    shortcuts: PropTypes.object
+  }), _defineProperty(_class, "defaultProps", { ...ComposedComponent.defaultProps,
+    selectable: true,
+    onSelect: () => {},
+    shortcuts: {}
+  }), _class;
+}
+
+export { selectionShortcutsHOC as default };