@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/tags-input/tags-input.js

@@ -0,0 +1,478 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { Component, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import getEventKey from '../global/get-event-key.js';
+import Select from '../select/select.js';
+import TagsList from '../tags-list/tags-list.js';
+import Caret from '../caret/caret.js';
+import memoize from '../global/memoize.js';
+import rerenderHOC from '../global/rerender-hoc.js';
+import '@jetbrains/icons/chevron-10px';
+import '@jetbrains/icons/close';
+import 'deep-equal';
+import '../dropdown/dropdown.js';
+import '../global/data-tests.js';
+import '../_helpers/anchor.js';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../button/button.js';
+import 'focus-visible';
+import '../global/theme.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import '../global/dom.js';
+import '../avatar/fallback-avatar.js';
+import '../global/get-uid.js';
+import '../popup/popup.js';
+import 'react-dom';
+import '../global/schedule-raf.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';
+import '../list/list.js';
+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/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 '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../_helpers/checkbox.js';
+import '../list/list__custom.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.js';
+import '../input/input.js';
+import '../_helpers/input.js';
+import '../global/fuzzy-highlight.js';
+import '../select/select__popup.js';
+import '@jetbrains/icons/search';
+import '../loader-inline/loader-inline.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 '../shortcuts/shortcuts-hoc.js';
+import '../text/text.js';
+import '../_helpers/select__filter.js';
+import '../tag/tag.js';
+
+var modules_5aa8aaf3 = {"tagsInput":"tagsInput_rui_3bf1","tagsInputLegacyMode":"tagsInputLegacyMode_rui_3bf1","tagsList":"tagsList_rui_3bf1","tag":"tag_rui_3bf1","tagsInputDisabled":"tagsInputDisabled_rui_3bf1","underline":"underline_rui_3bf1","tagsInputFocused":"tagsInputFocused_rui_3bf1","tagsSelect":"tagsSelect_rui_3bf1","focusUnderline":"focusUnderline_rui_3bf1"};
+
+function noop() {}
+/**
+ * @name Tags Input
+ */
+
+
+const POPUP_VERTICAL_SHIFT = 2;
+class TagsInput extends PureComponent {
+  constructor(props) {
+    var _this;
+
+    super(props);
+    _this = this;
+
+    _defineProperty(this, "state", {
+      tags: [],
+      prevTags: null,
+      suggestions: [],
+      loading: true,
+      focused: false,
+      query: '',
+      activeIndex: 0
+    });
+
+    _defineProperty(this, "nodeRef", node => {
+      this.node = node;
+    });
+
+    _defineProperty(this, "focusInput", () => {
+      this.getInputNode().focus();
+    });
+
+    _defineProperty(this, "addTag", tag => {
+      const isUniqueTag = this.state.tags.filter(item => tag.key === item.key).length === 0;
+      this.select.clear();
+      this.select.filterValue('');
+
+      if (isUniqueTag) {
+        this.setState(prevState => ({
+          tags: prevState.tags.concat([tag])
+        }));
+        this.props.onAddTag({
+          tag
+        });
+        this.setActiveIndex();
+      }
+    });
+
+    _defineProperty(this, "clickHandler", event => {
+      if (event.target !== this.node) {
+        return;
+      }
+
+      this.loadSuggestions(this.getInputNode().value);
+      this.focusInput();
+    });
+
+    _defineProperty(this, "filterExistingTags", suggestions => {
+      const tagsMap = new Map(this.state.tags.map(tag => [tag.key, tag]));
+      return suggestions.filter(suggestion => !tagsMap.has(suggestion.key));
+    });
+
+    _defineProperty(this, "loadSuggestions", function () {
+      let query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      return _this.setState({
+        loading: true,
+        query
+      }, async () => {
+        try {
+          let allSuggestions = _this.props.dataSource({
+            query
+          });
+
+          if (typeof allSuggestions.then === 'function') {
+            allSuggestions = await allSuggestions;
+          }
+
+          const suggestions = _this.filterExistingTags(allSuggestions);
+
+          if (_this.node && query === _this.state.query) {
+            _this.setState({
+              suggestions,
+              loading: false
+            });
+          }
+        } catch (e) {
+          _this.setState({
+            loading: false
+          });
+        }
+      });
+    });
+
+    _defineProperty(this, "_focusHandler", () => {
+      this.setActiveIndex(null);
+      this.setState({
+        focused: true
+      });
+    });
+
+    _defineProperty(this, "_blurHandler", () => {
+      this.setState({
+        focused: false
+      });
+    });
+
+    _defineProperty(this, "selectTag", moveForward => {
+      const activeIndex = typeof this.state.activeIndex === 'number' ? this.state.activeIndex : this.state.tags.length + 1;
+      let newActiveIndex = activeIndex + (moveForward ? 1 : -1);
+
+      if (newActiveIndex >= this.state.tags.length) {
+        newActiveIndex = this.state.tags.length - 1;
+      } else if (newActiveIndex < 0) {
+        newActiveIndex = 0;
+      }
+
+      if (this.state.activeIndex !== newActiveIndex) {
+        this.setActiveIndex(newActiveIndex);
+      }
+    });
+
+    _defineProperty(this, "handleKeyDown", event => {
+      const key = getEventKey(event);
+
+      const isInputFocused = () => event.target.matches(this.getInputNode().tagName);
+
+      if (key === ' ' && this.props.allowAddNewTags) {
+        event.stopPropagation();
+        const value = this.getInputNode().value;
+
+        if (value !== '') {
+          this.handleTagCreation(value);
+        }
+
+        return true;
+      }
+
+      if (this.select._popup.isVisible()) {
+        return true;
+      }
+
+      if (key === 'ArrowLeft') {
+        if (this.getInputNode() && this.caret.getPosition() > 0) {
+          return true;
+        }
+
+        this.selectTag();
+        return false;
+      }
+
+      if (key === 'ArrowRight' && !isInputFocused()) {
+        if (this.state.activeIndex === this.state.tags.length - 1) {
+          if (!this.props.disabled) {
+            this.getInputNode().focus();
+            this.setActiveIndex();
+          }
+        } else {
+          this.selectTag(true);
+        }
+
+        return false;
+      }
+
+      if (!this.props.disabled) {
+        if (key === 'Backspace' && !this.getInputNode().value) {
+          event.preventDefault();
+          const tagsLength = this.state.tags.length;
+
+          this.select._hidePopup(true); // otherwise confirmation may be overlapped by popup
+
+
+          this.onRemoveTag(this.state.tags[tagsLength - 1]);
+          return false;
+        }
+
+        if ((key === 'Delete' || key === 'Backspace') && this.state.tags[this.state.activeIndex]) {
+          this.onRemoveTag(this.state.tags[this.state.activeIndex]).then(() => this.selectTag(true));
+          return false;
+        }
+      }
+
+      return true;
+    });
+
+    _defineProperty(this, "handleClick", memoize(tag => () => {
+      this.setActiveIndex(this.state.tags.indexOf(tag));
+    }));
+
+    _defineProperty(this, "handleRemove", memoize(tag => () => this.onRemoveTag(tag)));
+
+    _defineProperty(this, "handleTagCreation", label => {
+      this.addTag({
+        key: label,
+        label
+      });
+    });
+
+    _defineProperty(this, "selectRef", el => {
+      this.select = el;
+    });
+
+    this.ngModelStateField = TagsInput.ngModelStateField;
+  }
+
+  static getDerivedStateFromProps(_ref, _ref2) {
+    let {
+      tags
+    } = _ref;
+    let {
+      prevTags
+    } = _ref2;
+    const nextState = {
+      prevTags: tags
+    };
+
+    if (tags != null && tags !== prevTags) {
+      Object.assign(nextState, {
+        tags,
+        activeIndex: tags.length
+      });
+    }
+
+    return nextState;
+  }
+
+  componentDidMount() {
+    if (this.props.autoOpen && !this.props.disabled) {
+      this.focusInput();
+      this.loadSuggestions();
+
+      this.select._showPopup();
+    }
+  }
+
+  getInputNode() {
+    if (!this.input) {
+      this.input = this.select.filter;
+      this.caret = new Caret(this.input);
+    }
+
+    return this.input;
+  }
+
+  setActiveIndex(activeIndex) {
+    this.setState({
+      activeIndex
+    });
+  }
+
+  onRemoveTag(tagToRemove) {
+    return Promise.resolve(this.props.onRemoveTag({
+      tag: tagToRemove
+    })).then(() => {
+      const tags = this.state.tags.filter(tag => tag !== tagToRemove);
+
+      if (this.node) {
+        this.setState({
+          tags
+        });
+        this.focusInput();
+      }
+
+      return tags;
+    }, this.focusInput);
+  }
+
+  render() {
+    const {
+      focused,
+      tags,
+      activeIndex
+    } = this.state;
+    const {
+      legacyMode,
+      disabled,
+      canNotBeEmpty,
+      allowAddNewTags,
+      filter
+    } = this.props;
+    const classes = classNames(modules_5aa8aaf3.tagsInput, {
+      [modules_5aa8aaf3.tagsInputDisabled]: disabled,
+      [modules_5aa8aaf3.tagsInputFocused]: focused,
+      [modules_5aa8aaf3.tagsInputLegacyMode]: legacyMode
+    }, this.props.className);
+    return /*#__PURE__*/React.createElement("div", {
+      // it transfers focus to input
+      role: "presentation",
+      className: classes,
+      onKeyDown: this.handleKeyDown,
+      onClick: this.clickHandler,
+      ref: this.nodeRef
+    }, /*#__PURE__*/React.createElement(TagsList, {
+      tags: tags,
+      activeIndex: activeIndex,
+      disabled: disabled,
+      canNotBeEmpty: canNotBeEmpty,
+      handleRemove: this.handleRemove,
+      className: modules_5aa8aaf3.tagsList,
+      tagClassName: modules_5aa8aaf3.tag,
+      handleClick: this.handleClick
+    }, /*#__PURE__*/React.createElement(Select, {
+      ref: this.selectRef,
+      size: Select.Size.AUTO,
+      type: Select.Type.INPUT_WITHOUT_CONTROLS,
+      inputPlaceholder: this.props.placeholder,
+      data: this.state.suggestions,
+      className: classNames(modules_5aa8aaf3.tagsSelect),
+      onSelect: this.addTag,
+      onFocus: this._focusHandler,
+      onBlur: this._blurHandler,
+      renderOptimization: this.props.renderOptimization,
+      add: allowAddNewTags ? {
+        prefix: 'Add new tag'
+      } : undefined,
+      onAdd: allowAddNewTags ? this.handleTagCreation : undefined,
+      filter: filter,
+      maxHeight: this.props.maxPopupHeight,
+      minWidth: this.props.minPopupWidth,
+      top: POPUP_VERTICAL_SHIFT,
+      loading: this.state.loading,
+      onFilter: this.loadSuggestions,
+      onBeforeOpen: this.loadSuggestions,
+      onKeyDown: this.handleKeyDown,
+      disabled: this.props.disabled,
+      loadingMessage: this.props.loadingMessage,
+      notFoundMessage: this.props.notFoundMessage
+    })), !legacyMode && /*#__PURE__*/React.createElement("div", {
+      className: modules_5aa8aaf3.underline
+    }), !legacyMode && /*#__PURE__*/React.createElement("div", {
+      className: modules_5aa8aaf3.focusUnderline
+    }));
+  }
+
+}
+
+_defineProperty(TagsInput, "propTypes", {
+  className: PropTypes.string,
+  tags: PropTypes.array,
+
+  /**
+   * Datasource should return array(or promise) of suggestions.
+   * Each suggestion should contain key and label fields.
+   * DataSource should handle caching and response racing (when later request
+   * responded earlier) by himself.
+   */
+  dataSource: PropTypes.func,
+  onAddTag: PropTypes.func,
+  onRemoveTag: PropTypes.func,
+  customTagComponent: (props, propName, componentName) => {
+    if (props[propName] && !props[propName].prototype instanceof Component) {
+      return new Error(`Invalid prop ${propName} supplied to ${componentName}. Validation failed.`);
+    }
+
+    return null;
+  },
+  maxPopupHeight: PropTypes.number,
+  minPopupWidth: PropTypes.number,
+  placeholder: PropTypes.string,
+  canNotBeEmpty: PropTypes.bool,
+  disabled: PropTypes.bool,
+  autoOpen: PropTypes.bool,
+  renderOptimization: PropTypes.bool,
+  legacyMode: PropTypes.bool,
+  filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+    fn: PropTypes.func
+  })]),
+  loadingMessage: PropTypes.string,
+  notFoundMessage: PropTypes.string,
+  allowAddNewTags: PropTypes.bool
+});
+
+_defineProperty(TagsInput, "defaultProps", {
+  dataSource: noop,
+  onAddTag: noop,
+  onRemoveTag: noop,
+  customTagComponent: null,
+  maxPopupHeight: 500,
+  minPopupWidth: 360,
+  canNotBeEmpty: false,
+  disabled: false,
+  autoOpen: false,
+  renderOptimization: true,
+  legacyMode: false,
+  allowAddNewTags: false,
+  filter: {
+    fn: () => true
+  },
+  placeholder: 'Select an option'
+});
+
+_defineProperty(TagsInput, "ngModelStateField", 'tags');
+
+const RerenderableTagsInput = rerenderHOC(TagsInput);
+
+export { RerenderableTagsInput, TagsInput as default };

package/dist/tags-input-ng/tags-input-ng.js

@@ -0,0 +1,89 @@
+import angularComponentFactory from '../global/angular-component-factory.js';
+import TagsInput from '../tags-input/tags-input.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'angular';
+import 'react';
+import 'react-dom';
+import '../global/ring-angular-component.js';
+import '../global/react-dom-renderer.js';
+import 'prop-types';
+import 'classnames';
+import '../global/get-event-key.js';
+import '../select/select.js';
+import '@jetbrains/icons/chevron-10px';
+import '@jetbrains/icons/close';
+import 'deep-equal';
+import '../dropdown/dropdown.js';
+import '../global/data-tests.js';
+import '../_helpers/anchor.js';
+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 '../button/button.js';
+import 'focus-visible';
+import '../global/theme.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import '../global/dom.js';
+import '../avatar/fallback-avatar.js';
+import '../global/get-uid.js';
+import '../popup/popup.js';
+import '../global/schedule-raf.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';
+import '../list/list.js';
+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/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 '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../_helpers/checkbox.js';
+import '../list/list__custom.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.js';
+import '../input/input.js';
+import '../_helpers/input.js';
+import '../global/rerender-hoc.js';
+import '../global/fuzzy-highlight.js';
+import '../select/select__popup.js';
+import '@jetbrains/icons/search';
+import '../loader-inline/loader-inline.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 '../shortcuts/shortcuts-hoc.js';
+import '../tags-list/tags-list.js';
+import '../tag/tag.js';
+import '../caret/caret.js';
+import '../text/text.js';
+import '../_helpers/select__filter.js';
+
+var tagsInputNg = angularComponentFactory(TagsInput, 'TagsInput').name;
+
+export { tagsInputNg as default };

package/dist/tags-list/tags-list.js

@@ -0,0 +1,93 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Tag from '../tag/tag.js';
+import '@jetbrains/icons/close';
+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 '../button/button.js';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+import '../global/theme.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+
+function noop() {}
+/**
+ * @name Tags List
+ */
+
+
+class TagsList extends Component {
+  renderTag(tag, focusTag) {
+    const TagComponent = this.props.customTagComponent || Tag;
+    const readOnly = this.props.disabled || tag.readOnly || this.props.canNotBeEmpty && this.props.tags.length === 1;
+    const {
+      tagClassName
+    } = this.props;
+    return /*#__PURE__*/React.createElement(TagComponent, _extends({}, tag, {
+      readOnly: readOnly,
+      disabled: this.props.disabled || tag.disabled,
+      focused: focusTag,
+      onClick: this.props.handleClick(tag),
+      onRemove: this.props.handleRemove(tag),
+      className: tagClassName
+    }), tag.label);
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      customTagComponent,
+      canNotBeEmpty,
+      handleClick,
+      tagClassName,
+      handleRemove,
+      tags,
+      activeIndex,
+      ...props
+    } = this.props;
+    const classes = classNames('ring-js-shortcuts', className);
+    const tagsList = (this.props.tags || []).map((tag, index) => this.renderTag(tag, this.props.activeIndex === index));
+    return /*#__PURE__*/React.createElement("div", _extends({
+      "data-test": "ring-tags-list",
+      className: classes
+    }, props), tagsList, children);
+  }
+
+}
+
+_defineProperty(TagsList, "propTypes", {
+  children: PropTypes.node,
+  tags: PropTypes.array,
+  customTagComponent: (props, propName, componentName) => {
+    if (props[propName] && !props[propName].prototype instanceof Component) {
+      return new Error(`Invalid prop ${propName} supplied to ${componentName}. Validation failed.`);
+    }
+
+    return null;
+  },
+  activeIndex: PropTypes.number,
+  canNotBeEmpty: PropTypes.bool,
+  disabled: PropTypes.bool,
+  handleClick: PropTypes.func,
+  handleRemove: PropTypes.func,
+  className: PropTypes.string,
+  tagClassName: PropTypes.string
+});
+
+_defineProperty(TagsList, "defaultProps", {
+  customTagComponent: null,
+  canNotBeEmpty: false,
+  disabled: false,
+  handleClick: noop,
+  handleRemove: noop
+});
+
+export { TagsList as default };