@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/select/select__filter.js

@@ -0,0 +1,54 @@
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';
+import 'prop-types';
+import 'classnames';
+import '../input/input.js';
+import '../global/sniffer.js';
+import '../list/list.js';
+export { S as default } from '../_helpers/select__filter.js';
+import '@jetbrains/icons/close';
+import '../global/theme.js';
+import '../button/button.js';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../global/get-uid.js';
+import '../_helpers/input.js';
+import 'sniffr';
+import 'react-virtualized/dist/es/List';
+import 'react-virtualized/dist/es/AutoSizer';
+import 'react-virtualized/dist/es/WindowScroller';
+import 'react-virtualized/dist/es/CellMeasurer';
+import 'memoize-one';
+import '../global/data-tests.js';
+import '../global/schedule-raf.js';
+import '../global/dom.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/create-stateful-context.js';
+import '../list/list__link.js';
+import '../link/link.js';
+import '../_helpers/link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import '../avatar/fallback-avatar.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../_helpers/checkbox.js';
+import '../list/list__custom.js';
+import '../global/get-event-key.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.js';

package/dist/select/select__popup.js

@@ -0,0 +1,546 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import searchIcon from '@jetbrains/icons/search';
+import memoizeOne from 'memoize-one';
+import PropTypes from 'prop-types';
+import Icon from '../icon/icon.js';
+import Popup, { getPopupContainer } from '../popup/popup.js';
+import { maxHeightForDirection } from '../popup/position.js';
+import { PopupTargetContext } from '../popup/popup.target.js';
+import List from '../list/list.js';
+import LoaderInline from '../loader-inline/loader-inline.js';
+import shortcutsHOC from '../shortcuts/shortcuts-hoc.js';
+import { getStyles } from '../global/dom.js';
+import getUID from '../global/get-uid.js';
+import memoize from '../global/memoize.js';
+import TagsList from '../tags-list/tags-list.js';
+import Caret from '../caret/caret.js';
+import Shortcuts from '../shortcuts/shortcuts.js';
+import Button from '../button/button.js';
+import Text from '../text/text.js';
+import { DEFAULT_DIRECTIONS } from '../popup/popup.consts.js';
+import { S as SelectFilter, m as modules_b607bec2 } from '../_helpers/select__filter.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import 'react-dom';
+import '../global/schedule-raf.js';
+import '../global/data-tests.js';
+import '../tab-trap/tab-trap.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import 'react-virtualized/dist/es/List';
+import 'react-virtualized/dist/es/AutoSizer';
+import 'react-virtualized/dist/es/WindowScroller';
+import 'react-virtualized/dist/es/CellMeasurer';
+import '../global/create-stateful-context.js';
+import '../list/list__link.js';
+import '../link/link.js';
+import 'focus-visible';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import '../avatar/fallback-avatar.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../_helpers/checkbox.js';
+import '../list/list__custom.js';
+import '../global/get-event-key.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.js';
+import '../global/theme.js';
+import '../_helpers/inject-styles.js';
+import '../global/conic-gradient.js';
+import 'conic-gradient';
+import '../global/supports-css.js';
+import '../global/inject-styles.js';
+import '../global/radial-gradient-mask.js';
+import '../tag/tag.js';
+import '@jetbrains/icons/close';
+import '@jetbrains/icons/chevron-10px';
+import '../_helpers/button__classes.js';
+import '../input/input.js';
+import '../_helpers/input.js';
+
+const INPUT_MARGIN_COMPENSATION = -14;
+const FILTER_HEIGHT = 35;
+const TOOLBAR_HEIGHT = 49;
+
+function noop() {}
+
+const FilterWithShortcuts = shortcutsHOC(SelectFilter);
+class SelectPopup extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      popupFilterShortcutsOptions: {
+        modal: true,
+        disabled: true
+      },
+      tagsActiveIndex: null
+    });
+
+    _defineProperty(this, "isClickingPopup", false);
+
+    _defineProperty(this, "onFilterFocus", () => {
+      this._togglePopupFilterShortcuts(false);
+
+      this.setState({
+        tagsActiveIndex: null
+      });
+    });
+
+    _defineProperty(this, "popupFilterOnBlur", () => {
+      if (this.state.tagsActiveIndex === null) {
+        this._togglePopupFilterShortcuts(true);
+      }
+    });
+
+    _defineProperty(this, "mouseDownHandler", () => {
+      this.isClickingPopup = true;
+    });
+
+    _defineProperty(this, "mouseUpHandler", () => {
+      this.isClickingPopup = false;
+    });
+
+    _defineProperty(this, "onListSelect", (selected, event, opts) => {
+      const getSelectItemEvent = () => {
+        let customEvent;
+
+        if (document.createEvent) {
+          customEvent = document.createEvent('Event');
+          customEvent.initEvent('select', true, false);
+        }
+
+        if (event && event.persist) {
+          event.persist();
+        }
+
+        customEvent.originalEvent = event;
+        return customEvent;
+      };
+
+      this.props.onSelect(selected, getSelectItemEvent(), opts);
+    });
+
+    _defineProperty(this, "tabPress", event => {
+      this.props.onCloseAttempt(event, true);
+    });
+
+    _defineProperty(this, "onClickHandler", () => this.filter.focus());
+
+    _defineProperty(this, "handleRemoveTag", memoize(tag => event => this.removeTag(tag, event)));
+
+    _defineProperty(this, "handleTagClick", memoize(tag => () => {
+      this.setState({
+        tagsActiveIndex: this.props.selected.indexOf(tag)
+      });
+    }));
+
+    _defineProperty(this, "handleListResize", () => {
+      this.forceUpdate();
+    });
+
+    _defineProperty(this, "handleSelectAll", () => this.props.onSelectAll(this.props.data.filter(item => !item.disabled).length !== this.props.selected.length));
+
+    _defineProperty(this, "getSelectAll", () => {
+      const activeFilters = this.props.data.filter(item => !item.disabled);
+      return /*#__PURE__*/React.createElement("div", {
+        className: modules_b607bec2.selectAll
+      }, activeFilters.length === 0 ? /*#__PURE__*/React.createElement("span", null) : /*#__PURE__*/React.createElement(Button, {
+        text: true,
+        inline: true,
+        onClick: this.handleSelectAll
+      }, activeFilters.length !== this.props.selected.length ? 'Select all' : 'Deselect all'), /*#__PURE__*/React.createElement(Text, {
+        info: true
+      }, `${this.props.selected.length} selected`));
+    });
+
+    _defineProperty(this, "_adjustListMaxHeight", memoizeOne((hidden, userDefinedMaxHeight, ringPopupTarget) => {
+      if (hidden) {
+        return userDefinedMaxHeight;
+      } // Calculate list's maximum height that can't
+      // get beyond the screen
+      // @see RG-1838, JT-48358
+
+
+      const minMaxHeight = 100;
+      const directions = this.props.directions || DEFAULT_DIRECTIONS; // Note:
+      // Create a method which'll be called only when the popup opens and before
+      // render the list would be a better way
+
+      const anchorNode = this.props.anchorElement;
+      const containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
+      return Math.min(directions.reduce((maxHeight, direction) => Math.max(maxHeight, maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null)), minMaxHeight), userDefinedMaxHeight);
+    }));
+
+    _defineProperty(this, "popupRef", el => {
+      this.popup = el;
+    });
+
+    _defineProperty(this, "listRef", el => {
+      this.list = el;
+    });
+
+    _defineProperty(this, "filterRef", el => {
+      this.filter = el;
+      this.caret = new Caret(this.filter);
+    });
+
+    _defineProperty(this, "shortcutsScope", getUID('select-popup-'));
+
+    _defineProperty(this, "shortcutsMap", {
+      tab: this.tabPress
+    });
+
+    _defineProperty(this, "popupFilterShortcuts", {
+      map: {
+        up: event => this.list && this.list.upHandler(event),
+        down: event => this.list && this.list.downHandler(event),
+        home: event => this.list && this.list.homeHandler(event),
+        end: event => this.list && this.list.endHandler(event),
+        enter: event => this.list ? this.list.enterHandler(event) : this.props.onEmptyPopupEnter(event),
+        esc: event => this.props.onCloseAttempt(event, true),
+        tab: event => this.tabPress(event),
+        backspace: event => this.handleBackspace(event),
+        del: () => this.removeSelectedTag(),
+        left: () => this.handleNavigation(true),
+        right: () => this.handleNavigation()
+      }
+    });
+  }
+
+  componentDidMount() {
+    window.document.addEventListener('mouseup', this.mouseUpHandler);
+  }
+
+  componentWillUnmount() {
+    window.document.removeEventListener('mouseup', this.mouseUpHandler);
+  }
+
+  // This flag is set to true while an item in the popup is being clicked
+  focusFilter() {
+    setTimeout(() => this.filter.focus());
+  }
+
+  isEventTargetFilter(event) {
+    return event.target && event.target.matches('input,textarea');
+  }
+
+  handleNavigation(navigateLeft) {
+    if (this.isEventTargetFilter(event) && this.caret.getPosition() > 0) {
+      return;
+    }
+
+    let newIndex = null;
+
+    if (navigateLeft) {
+      newIndex = this.state.tagsActiveIndex === null ? this.props.selected.length - 1 : this.state.tagsActiveIndex - 1;
+    } else if (this.state.tagsActiveIndex !== null) {
+      newIndex = this.state.tagsActiveIndex + 1;
+    }
+
+    if (newIndex !== null && (newIndex >= this.props.selected.length || newIndex < 0)) {
+      newIndex = null;
+      this.focusFilter();
+    }
+
+    this.setState({
+      tagsActiveIndex: newIndex
+    });
+  }
+
+  removeTag(tag, event) {
+    const _tag = tag || this.props.selected.slice(0)[this.props.selected.length - 1];
+
+    if (_tag) {
+      this.onListSelect(_tag, event, {
+        tryKeepOpen: true
+      });
+      this.setState({
+        tagsActiveIndex: null
+      });
+      this.focusFilter();
+    }
+  }
+
+  removeSelectedTag() {
+    if (this.state.tagsActiveIndex != null) {
+      this.removeTag(this.props.selected[this.state.tagsActiveIndex]);
+      return false;
+    }
+
+    return true;
+  }
+
+  handleBackspace(event) {
+    if (!this.props.tags) {
+      return true;
+    }
+
+    if (!this.isEventTargetFilter(event)) {
+      this.removeSelectedTag();
+      return false;
+    }
+
+    if (!event.target.value) {
+      this.removeTag();
+      return false;
+    }
+
+    return true;
+  }
+
+  _togglePopupFilterShortcuts(shortcutsDisabled) {
+    this.setState({
+      popupFilterShortcutsOptions: {
+        modal: true,
+        disabled: shortcutsDisabled
+      }
+    });
+  }
+
+  isVisible() {
+    return this.popup && this.popup.isVisible();
+  }
+
+  getFilter() {
+    if (this.props.filter || this.props.tags) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: modules_b607bec2.filterWrapper,
+        "data-test": "ring-select-popup-filter"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        glyph: searchIcon,
+        className: modules_b607bec2.filterIcon,
+        "data-test-custom": "ring-select-popup-filter-icon"
+      }), /*#__PURE__*/React.createElement(FilterWithShortcuts, {
+        rgShortcutsOptions: this.state.popupFilterShortcutsOptions,
+        rgShortcutsMap: this.popupFilterShortcuts.map,
+        value: this.props.filterValue,
+        inputRef: this.filterRef,
+        onBlur: this.popupFilterOnBlur,
+        onFocus: this.onFilterFocus,
+        className: "ring-js-shortcuts",
+        placeholder: this.props.filter.placeholder,
+        onChange: this.props.onFilter,
+        onClick: this.onClickHandler,
+        onClear: this.props.onClear,
+        "data-test-custom": "ring-select-popup-filter-input",
+        listId: this.props.listId,
+        enableShortcuts: Object.keys(this.popupFilterShortcuts.map)
+      }));
+    }
+
+    return null;
+  }
+
+  getTags() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TagsList, {
+      tags: this.props.selected,
+      activeIndex: this.state.tagsActiveIndex,
+      handleRemove: this.handleRemoveTag,
+      handleClick: this.handleTagClick,
+      disabled: this.props.disabled
+    }));
+  }
+
+  getFilterWithTags() {
+    if (this.props.tags) {
+      const classes = classNames([modules_b607bec2.filterWithTags, {
+        [modules_b607bec2.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled
+      }]);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes
+      }, this.getTags(), this.getFilter());
+    }
+
+    return this.getFilter();
+  }
+
+  getBottomLine() {
+    const {
+      loading,
+      message
+    } = this.props;
+    return (loading || message) && /*#__PURE__*/React.createElement("div", {
+      className: modules_b607bec2.bottomLine
+    }, loading && /*#__PURE__*/React.createElement(LoaderInline, null), message && /*#__PURE__*/React.createElement("div", {
+      className: modules_b607bec2.message
+    }, message));
+  }
+
+  getList(ringPopupTarget) {
+    if (this.props.data.length) {
+      let {
+        maxHeight
+      } = this.props;
+
+      if (this.props.anchorElement) {
+        maxHeight = this._adjustListMaxHeight(this.props.hidden, maxHeight, ringPopupTarget);
+      }
+
+      if (this.props.filter) {
+        maxHeight -= FILTER_HEIGHT;
+      }
+
+      if (this.props.toolbar) {
+        maxHeight -= TOOLBAR_HEIGHT;
+      }
+
+      return /*#__PURE__*/React.createElement(List, {
+        id: this.props.listId,
+        maxHeight: maxHeight,
+        data: this.props.data,
+        activeIndex: this.props.activeIndex,
+        ref: this.listRef,
+        restoreActiveIndex: true,
+        activateFirstItem: true,
+        onSelect: this.onListSelect,
+        onResize: this.handleListResize,
+        onScrollToBottom: this.props.onLoadMore,
+        hidden: this.props.hidden,
+        shortcuts: !this.props.hidden,
+        disableMoveOverflow: this.props.disableMoveOverflow,
+        disableMoveDownOverflow: this.props.loading,
+        disableScrollToActive: this.props.disableScrollToActive,
+        compact: this.props.compact,
+        renderOptimization: this.props.renderOptimization
+      });
+    }
+
+    return null;
+  }
+
+  render() {
+    const {
+      toolbar,
+      className,
+      multiple,
+      hidden,
+      isInputMode,
+      anchorElement,
+      minWidth,
+      onCloseAttempt,
+      directions,
+      top,
+      left,
+      style,
+      dir,
+      filter
+    } = this.props;
+    const classes = classNames(modules_b607bec2.popup, className);
+    return /*#__PURE__*/React.createElement(PopupTargetContext.Consumer, null, ringPopupTarget => {
+      const filterWithTags = this.getFilterWithTags();
+      const selectAll = multiple && !multiple.limit && multiple.selectAll && this.getSelectAll();
+      const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
+      const bottomLine = this.getBottomLine();
+      const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar;
+      return /*#__PURE__*/React.createElement(Popup, {
+        trapFocus: false,
+        ref: this.popupRef,
+        hidden: hidden || !hasContent,
+        attached: isInputMode,
+        className: classes,
+        dontCloseOnAnchorClick: true,
+        anchorElement: anchorElement,
+        minWidth: minWidth,
+        onCloseAttempt: onCloseAttempt,
+        directions: directions,
+        top: top || (isInputMode ? INPUT_MARGIN_COMPENSATION : null),
+        left: left,
+        onMouseDown: this.mouseDownHandler,
+        target: this.props.ringPopupTarget,
+        autoCorrectTopOverflow: false,
+        style: style
+      }, /*#__PURE__*/React.createElement("div", {
+        dir: dir
+      }, !hidden && filter && /*#__PURE__*/React.createElement(Shortcuts, {
+        map: this.shortcutsMap,
+        scope: this.shortcutsScope
+      }), hidden ? /*#__PURE__*/React.createElement("div", null) : filterWithTags, selectAll, list, bottomLine, toolbar));
+    });
+  }
+
+}
+
+_defineProperty(SelectPopup, "propTypes", {
+  activeIndex: PropTypes.number,
+  anchorElement: PropTypes.instanceOf(HTMLElement),
+  className: PropTypes.string,
+  compact: PropTypes.bool,
+  data: PropTypes.array,
+  dir: PropTypes.oneOf(['ltr', 'rtl']),
+  directions: PropTypes.array,
+  disabled: PropTypes.bool,
+  disableMoveOverflow: PropTypes.bool,
+  disableScrollToActive: PropTypes.bool,
+  filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+    value: PropTypes.string,
+    placeholder: PropTypes.string
+  })]),
+  filterValue: PropTypes.string,
+  hidden: PropTypes.bool,
+  isInputMode: PropTypes.bool,
+  listId: PropTypes.string,
+  maxHeight: PropTypes.number,
+  message: PropTypes.string,
+  minWidth: PropTypes.number,
+  multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+    label: PropTypes.string,
+    limit: PropTypes.number,
+    selectAll: PropTypes.bool
+  })]),
+  left: PropTypes.bool,
+  loading: PropTypes.bool,
+  onClear: PropTypes.func,
+  onCloseAttempt: PropTypes.func,
+  onEmptyPopupEnter: PropTypes.func,
+  onFilter: PropTypes.func,
+  onLoadMore: PropTypes.func,
+  onSelect: PropTypes.func,
+  onSelectAll: PropTypes.func,
+  renderOptimization: PropTypes.bool,
+  ringPopupTarget: PropTypes.string,
+  selected: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  style: PropTypes.object,
+  tags: PropTypes.object,
+  toolbar: PropTypes.node,
+  top: PropTypes.number
+});
+
+_defineProperty(SelectPopup, "defaultProps", {
+  data: [],
+  activeIndex: null,
+  toolbar: null,
+  filter: false,
+  multiple: false,
+  message: null,
+  anchorElement: null,
+  maxHeight: 600,
+  minWidth: 240,
+  loading: false,
+  onSelect: noop,
+  onCloseAttempt: noop,
+  onFilter: noop,
+  onClear: noop,
+  onLoadMore: noop,
+  selected: [],
+  tags: null,
+  ringPopupTarget: null,
+  onSelectAll: noop,
+  onEmptyPopupEnter: noop
+});
+
+export { SelectPopup as default };