@jetbrains/ring-ui-built 6.0.1

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

@@ -0,0 +1,117 @@
+import { a as _inherits, b as _createSuper, c as _classCallCheck, _ as _defineProperty, k as _assertThisInitialized, d as _createClass, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import React, { PureComponent } from 'react';
+import focusSensorHOC from '../global/focus-sensor-hoc.js';
+import Row from './row.js';
+import 'prop-types';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.array.map.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-14px';
+import '@jetbrains/icons/remove-14px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon__svg.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.string.starts-with.js';
+import '../global/memoize.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import '../button/button.js';
+import '@jetbrains/icons/chevron-10px';
+import '../link/clickableLink.js';
+import '../global/controls-height.js';
+import '../_helpers/button__classes.js';
+import '../tooltip/tooltip.js';
+import '../popup/popup.js';
+import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import 'react-dom';
+import '../global/get-uid.js';
+import '../global/schedule-raf.js';
+import '../global/dom.js';
+import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/es.set.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.string.match.js';
+import 'core-js/modules/es.array.find-index.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/data-tests.js';
+import 'core-js/modules/es.array.reduce.js';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+import './cell.js';
+import '../_helpers/table.js';
+
+var getContainer = function getContainer() {
+  return focusSensorHOC(Row);
+};
+var RowWithFocusSensorCallbacks = /*#__PURE__*/function (_PureComponent) {
+  _inherits(RowWithFocusSensorCallbacks, _PureComponent);
+  var _super = _createSuper(RowWithFocusSensorCallbacks);
+  function RowWithFocusSensorCallbacks() {
+    var _this;
+    _classCallCheck(this, RowWithFocusSensorCallbacks);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    // https://stackoverflow.com/a/53882322/6304152
+    _defineProperty(_assertThisInitialized(_this), "RowWithFocusSensor", getContainer());
+    _defineProperty(_assertThisInitialized(_this), "onFocus", function () {
+      var _this$props$onFocus, _this$props;
+      (_this$props$onFocus = (_this$props = _this.props).onFocus) === null || _this$props$onFocus === void 0 || _this$props$onFocus.call(_this$props, _this.props.item);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onSelect", function (item, selected) {
+      var _this$props$onSelect, _this$props2;
+      (_this$props$onSelect = (_this$props2 = _this.props).onSelect) === null || _this$props$onSelect === void 0 || _this$props$onSelect.call(_this$props2, item, selected);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onCollapse", function () {
+      var _this$props$onCollaps, _this$props3;
+      (_this$props$onCollaps = (_this$props3 = _this.props).onCollapse) === null || _this$props$onCollaps === void 0 || _this$props$onCollaps.call(_this$props3, _this.props.item);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onExpand", function () {
+      var _this$props$onExpand, _this$props4;
+      (_this$props$onExpand = (_this$props4 = _this.props).onExpand) === null || _this$props$onExpand === void 0 || _this$props$onExpand.call(_this$props4, _this.props.item);
+    });
+    return _this;
+  }
+  _createClass(RowWithFocusSensorCallbacks, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(this.RowWithFocusSensor, _extends({}, this.props, {
+        onFocus: this.onFocus,
+        onSelect: this.onSelect,
+        onCollapse: this.onCollapse,
+        onExpand: this.onExpand
+      }));
+    }
+  }]);
+  return RowWithFocusSensorCallbacks;
+}(PureComponent);
+RowWithFocusSensorCallbacks.propTypes = Row.propTypes;
+
+export { RowWithFocusSensorCallbacks as default };

package/components/table/row.d.ts

@@ -0,0 +1,59 @@
+import React, { HTMLAttributes, PureComponent } from 'react';
+import { FocusSensorAddProps } from '../global/focus-sensor-hoc';
+import { Column } from './header-cell';
+import { SelectionItem } from './selection';
+export interface RowProps<T extends SelectionItem> extends Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick' | 'onDoubleClick' | 'onSelect'>, FocusSensorAddProps<HTMLTableRowElement> {
+    item: T;
+    columns: readonly Column<T>[];
+    selectable: boolean;
+    showFocus: boolean;
+    draggable: boolean;
+    alwaysShowDragHandle: boolean;
+    dragHandleTitle?: string;
+    selected: boolean;
+    onHover: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void;
+    onSelect: (item: T, selected: boolean) => void;
+    onDoubleClick: (item: T) => void;
+    onClick: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void;
+    level: number;
+    collapsible: boolean;
+    parentCollapsible: boolean;
+    collapsed: boolean;
+    onCollapse: (item: T) => void;
+    onExpand: (item: T) => void;
+    showDisabledSelection?: boolean | null | undefined;
+    checkboxTooltip?: string | undefined;
+    autofocus?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+    metaColumnClassName?: string | null | undefined;
+}
+export default class Row<T extends SelectionItem> extends PureComponent<RowProps<T>> {
+    static defaultProps: {
+        selectable: boolean;
+        showFocus: boolean;
+        draggable: boolean;
+        alwaysShowDragHandle: boolean;
+        selected: boolean;
+        onHover: () => void;
+        onSelect: () => void;
+        onDoubleClick: () => void;
+        onClick: () => void;
+        level: number;
+        collapsible: boolean;
+        parentCollapsible: boolean;
+        collapsed: boolean;
+        onCollapse: () => void;
+        onExpand: () => void;
+    };
+    id: string;
+    onMouseEnter: (e: React.MouseEvent<HTMLTableRowElement>) => void;
+    onClick: (e: React.MouseEvent<HTMLTableRowElement>) => void;
+    onCheckboxFocus: () => void;
+    onCheckboxChange: () => void;
+    toggleSelection(): void;
+    onDoubleClick: () => void;
+    row?: HTMLElement | null;
+    rowRef: (el: HTMLElement | null) => void;
+    render(): React.JSX.Element;
+}
+export type RowAttrs<T extends SelectionItem> = JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;

package/components/table/row.js

@@ -0,0 +1,299 @@
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, e as _objectWithoutProperties, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.map.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-14px';
+import '@jetbrains/icons/remove-14px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon__svg.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.string.starts-with.js';
+import '../global/memoize.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import '../global/prop-types.js';
+import '@jetbrains/icons/chevron-10px';
+import '../link/clickableLink.js';
+import '../global/controls-height.js';
+import '../_helpers/button__classes.js';
+import '../popup/popup.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import 'react-dom';
+import '../global/schedule-raf.js';
+import '../global/dom.js';
+import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/es.set.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.string.match.js';
+import 'core-js/modules/es.array.find-index.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+import 'core-js/modules/es.array.reduce.js';
+
+var _excluded = ["item", "columns", "selectable", "selected", "showFocus", "draggable", "alwaysShowDragHandle", "dragHandleTitle", "level", "collapsible", "parentCollapsible", "collapsed", "onCollapse", "onExpand", "showDisabledSelection", "onSelect", "checkboxTooltip", "innerRef", "focused", "autofocus", "onFocusReset", "onFocusRestore", "onHover", "className", "metaColumnClassName", "data-test"];
+var DragHandle = function DragHandle(_ref) {
+  var alwaysShowDragHandle = _ref.alwaysShowDragHandle,
+    _ref$dragHandleTitle = _ref.dragHandleTitle,
+    dragHandleTitle = _ref$dragHandleTitle === void 0 ? 'Drag to reorder' : _ref$dragHandleTitle;
+  var 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
+};
+var Row = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Row, _PureComponent);
+  var _super = _createSuper(Row);
+  function Row() {
+    var _this;
+    _classCallCheck(this, Row);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "id", getUID('table-row-'));
+    _defineProperty(_assertThisInitialized(_this), "onMouseEnter", function (e) {
+      var _this$props = _this.props,
+        item = _this$props.item,
+        onHover = _this$props.onHover;
+      onHover(item, e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onClick", function (e) {
+      var item = _this.props.item;
+      _this.props.onClick(item, e);
+      if (e.shiftKey) {
+        _this.toggleSelection();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onCheckboxFocus", function () {
+      _this.props.onFocusRestore();
+    });
+    _defineProperty(_assertThisInitialized(_this), "onCheckboxChange", function () {
+      _this.toggleSelection();
+    });
+    _defineProperty(_assertThisInitialized(_this), "onDoubleClick", function () {
+      var item = _this.props.item;
+      _this.props.onDoubleClick(item);
+    });
+    _defineProperty(_assertThisInitialized(_this), "row", void 0);
+    _defineProperty(_assertThisInitialized(_this), "rowRef", function (el) {
+      _this.row = el;
+    });
+    return _this;
+  }
+  _createClass(Row, [{
+    key: "toggleSelection",
+    value: function toggleSelection() {
+      var _this$props2 = this.props,
+        selectable = _this$props2.selectable,
+        selected = _this$props2.selected,
+        onSelect = _this$props2.onSelect,
+        item = _this$props2.item;
+      if (selectable) {
+        onSelect(item, !selected);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        item = _this$props3.item,
+        columns = _this$props3.columns,
+        selectable = _this$props3.selectable,
+        selected = _this$props3.selected,
+        showFocus = _this$props3.showFocus,
+        draggable = _this$props3.draggable,
+        alwaysShowDragHandle = _this$props3.alwaysShowDragHandle,
+        dragHandleTitle = _this$props3.dragHandleTitle,
+        level = _this$props3.level,
+        collapsible = _this$props3.collapsible,
+        parentCollapsible = _this$props3.parentCollapsible,
+        collapsed = _this$props3.collapsed,
+        onCollapse = _this$props3.onCollapse,
+        onExpand = _this$props3.onExpand,
+        showDisabledSelection = _this$props3.showDisabledSelection;
+        _this$props3.onSelect;
+        var checkboxTooltip = _this$props3.checkboxTooltip,
+        innerRef = _this$props3.innerRef;
+        _this$props3.focused;
+        _this$props3.autofocus;
+        _this$props3.onFocusReset;
+        _this$props3.onFocusRestore;
+        _this$props3.onHover;
+        var className = _this$props3.className,
+        metaColumnClassName = _this$props3.metaColumnClassName,
+        dataTest = _this$props3['data-test'],
+        restProps = _objectWithoutProperties(_this$props3, _excluded);
+      var classes = classNames(className, {
+        [modules_1db4bbca.row]: true,
+        [modules_1db4bbca.rowFocused]: showFocus,
+        [modules_1db4bbca.rowSelected]: selected
+      });
+      var testAttrs = {
+        'data-test-focused': showFocus || undefined,
+        'data-test-selected': selected || undefined
+      };
+      var metaColumnClasses = classNames(metaColumnClassName, modules_1db4bbca.metaColumn);
+      var SUBITEM_OFFSET = 30;
+      var COLLAPSIBLE_PARENT_OFFSET = 20;
+      var gap = level * SUBITEM_OFFSET + (parentCollapsible ? COLLAPSIBLE_PARENT_OFFSET : 0);
+      var metaColumnStyle = {
+        paddingLeft: "".concat(gap, "px")
+      };
+      var 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: function onClick() {
+          return onExpand(item);
+        }
+      }), collapsible && !collapsed && /*#__PURE__*/React.createElement(Button, {
+        className: modules_1db4bbca.rowCollapseExpandButton,
+        icon: chevronDownIcon,
+        onClick: function onClick() {
+          return onCollapse(item);
+        }
+      }));
+      var cells = columns.map(function (column, index) {
+        var getValue = column.getValue || function () {
+          return item[column.id];
+        };
+        var getDataTest = column.getDataTest || function () {
+          return column.id;
+        };
+        var value = getValue(item, column);
+        var cellClasses = classNames({
+          [modules_1db4bbca.cellRight]: column.rightAlign
+        }, column.className);
+        var showMetaColumn = draggable || selectable || collapsible || 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);
+    }
+  }]);
+  return Row;
+}(PureComponent);
+_defineProperty(Row, "defaultProps", {
+  selectable: true,
+  showFocus: false,
+  draggable: false,
+  alwaysShowDragHandle: false,
+  selected: false,
+  onHover: function onHover() {},
+  onSelect: function onSelect() {},
+  onDoubleClick: function onDoubleClick() {},
+  onClick: function onClick() {},
+  level: 0,
+  collapsible: false,
+  parentCollapsible: false,
+  collapsed: false,
+  onCollapse: function onCollapse() {},
+  onExpand: function onExpand() {}
+});
+Row.propTypes = {
+  className: PropTypes.string,
+  metaColumnClassName: PropTypes.string,
+  item: PropTypes.object.isRequired,
+  columns: PropTypes.array.isRequired,
+  selectable: PropTypes.bool,
+  showFocus: PropTypes.bool,
+  draggable: PropTypes.bool,
+  alwaysShowDragHandle: PropTypes.bool,
+  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
+};
+
+export { Row as default };

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

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

package/components/table/selection-adapter.js

@@ -0,0 +1,14 @@
+import { l as _toConsumableArray } from '../_helpers/_rollupPluginBabelHelpers.js';
+
+function selectionAdapter(getSelection) {
+  return {
+    get size() {
+      return getSelection().getActive().size;
+    },
+    get items() {
+      return _toConsumableArray(getSelection().getActive());
+    }
+  };
+}
+
+export { selectionAdapter as default };

package/components/table/selection-shortcuts-hoc.d.ts

@@ -0,0 +1,17 @@
+import { ComponentType } from 'react';
+import { ShortcutsMap } from '../shortcuts/core';
+import Selection, { SelectionItem } from './selection';
+export interface SelectionShortcutsOuterProps<T extends SelectionItem> {
+    selection: Selection<T>;
+    selectable?: boolean | undefined;
+    onSelect?: ((selection: Selection<T>) => void) | undefined;
+    shortcuts?: ShortcutsMap | undefined;
+}
+export interface SelectionShortcutsAddProps<T extends SelectionItem> {
+    selection: Selection<T>;
+    selectable: boolean;
+    onSelect: (selection: Selection<T>) => void;
+    shortcutsMap: ShortcutsMap;
+}
+export type SelectionShortcutsProps<T extends SelectionItem, P> = Omit<P, keyof SelectionShortcutsAddProps<T>> & SelectionShortcutsOuterProps<T>;
+export default function selectionShortcutsHOC<T extends SelectionItem, P extends SelectionShortcutsAddProps<T>>(ComposedComponent: ComponentType<P>): ComponentType<SelectionShortcutsProps<T, P>>;