@jetbrains/ring-ui 4.1.0-beta.3 → 4.1.1

package/dist/tag.js

@@ -1,187 +0,0 @@
-import { b as _defineProperty } from './_helpers/_rollupPluginBabelHelpers.js';
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close';
-import Icon from './icon.js';
-import { B as Button } from './_helpers/button.js';
-import 'util-deprecate';
-import './_helpers/memoize.js';
-import 'focus-visible';
-import '@jetbrains/icons/chevron-10px';
-import './_helpers/theme.js';
-import './_helpers/clickableLink.js';
-
-var modules_2f9be069 = {"unit":"8px","resetButton":"global_resetButton__0f8f4370","background-color":"var(--ring-tag-background-color)","max-height":"20px","tag":"tag_tag__e2972246 global_resetButton__0f8f4370","withRemove":"tag_withRemove__e2972246","container":"tag_container__e2972246","focused":"tag_focused__e2972246","tagAngled":"tag_tagAngled__e2972246","content":"tag_content__e2972246 global_ellipsis__0f8f4370","disabled":"tag_disabled__e2972246","remove":"tag_remove__e2972246","removeIcon":"tag_removeIcon__e2972246","icon":"tag_icon__e2972246","avatarContainer":"tag_avatarContainer__e2972246","customIcon":"tag_customIcon__e2972246","avatarIcon":"tag_avatarIcon__e2972246"};
-
-/**
- * @name Tag
- */
-
-class Tag extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      focused: false
-    });
-
-    _defineProperty(this, "onDocumentClick", event => {
-      if (this.tagNode) {
-        this.setState({
-          focused: this.tagNode === event.target
-        });
-      }
-    });
-
-    _defineProperty(this, "tagRef", el => {
-      this.tagNode = el;
-    });
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.focused !== prevProps.focused) {
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        focused: this.props.focused
-      });
-    }
-
-    if (this.state.focused) {
-      this.tagNode.focus();
-    }
-
-    this.setDocumentClickListener(this.state.focused);
-  }
-
-  componentWillUnmount() {
-    this.setDocumentClickListener(false);
-    this.setState({
-      focused: false
-    });
-  }
-
-  setDocumentClickListener(setListener) {
-    if (setListener) {
-      document.addEventListener('click', this.onDocumentClick);
-    } else {
-      document.removeEventListener('click', this.onDocumentClick);
-    }
-  }
-
-  renderCustomIcon() {
-    if (this.props.rgTagIcon) {
-      return /*#__PURE__*/React.createElement(Icon, {
-        className: modules_2f9be069.icon,
-        title: this.props.rgTagTitle,
-        glyph: this.props.rgTagIcon
-      });
-    }
-
-    return null;
-  }
-
-  _renderImageElement(avatarSrc) {
-    const classes = classNames({
-      [modules_2f9be069.customIcon]: this.props.icon,
-      [modules_2f9be069.avatarIcon]: avatarSrc
-    });
-    return /*#__PURE__*/React.createElement("img", {
-      alt: avatarSrc ? 'Avatar' : 'Icon',
-      className: classes,
-      src: avatarSrc || this.props.icon
-    });
-  }
-
-  renderImage() {
-    if (this.props.icon && !this.props.avatar) {
-      return this._renderImageElement();
-    }
-
-    return null;
-  }
-
-  renderAvatar() {
-    if (this.props.avatar) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: modules_2f9be069.avatarContainer
-      }, this._renderImageElement(this.props.avatar));
-    }
-
-    return null;
-  }
-
-  renderRemoveIcon() {
-    if (!this.props.readOnly) {
-      return /*#__PURE__*/React.createElement(Button, {
-        title: "Remove",
-        icon: closeIcon,
-        "data-test": "ring-tag-remove",
-        className: modules_2f9be069.remove,
-        iconClassName: modules_2f9be069.removeIcon,
-        onClick: this.props.onRemove,
-        style: {
-          '--ring-icon-secondary-color': this.props.textColor
-        }
-      });
-    }
-
-    return null;
-  }
-
-  render() {
-    const classes = classNames('ring-js-shortcuts', modules_2f9be069.tag, {
-      [modules_2f9be069.focused]: this.state.focused,
-      [modules_2f9be069.disabled]: this.props.disabled,
-      [modules_2f9be069.tagAngled]: this.props.angled,
-      [modules_2f9be069.withRemove]: !this.props.readOnly
-    }, this.props.className);
-    const {
-      backgroundColor,
-      textColor
-    } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
-      className: modules_2f9be069.container
-    }, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      "data-test": "ring-tag",
-      className: classes,
-      ref: this.tagRef,
-      onClick: this.props.onClick,
-      style: {
-        backgroundColor,
-        color: textColor
-      }
-    }, this.renderAvatar(), this.renderCustomIcon(), this.renderImage(), /*#__PURE__*/React.createElement("span", {
-      className: modules_2f9be069.content
-    }, this.props.children)), this.renderRemoveIcon());
-  }
-
-}
-
-_defineProperty(Tag, "propTypes", {
-  onRemove: PropTypes.func,
-  onClick: PropTypes.func,
-  rgTagIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  icon: PropTypes.string,
-  avatar: PropTypes.string,
-  rgTagTitle: PropTypes.string,
-  readOnly: PropTypes.bool,
-  disabled: PropTypes.bool,
-  focused: PropTypes.bool,
-  angled: PropTypes.bool,
-  backgroundColor: PropTypes.string,
-  textColor: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string
-});
-
-_defineProperty(Tag, "defaultProps", {
-  onRemove: () => {},
-  onClick: () => {},
-  readOnly: false,
-  disabled: false,
-  focused: false
-});
-
-export default Tag;

package/dist/tags-input.js

@@ -1,440 +0,0 @@
-import { b as _defineProperty } from './_helpers/_rollupPluginBabelHelpers.js';
-import React, { PureComponent, Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { g as getEventKey } from './_helpers/list.js';
-import Select from './select.js';
-import TagsList from './tags-list.js';
-import Caret from './caret.js';
-import { m as memoize } from './_helpers/memoize.js';
-import { r as rerenderHOC } from './_helpers/rerender-hoc.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 'util-deprecate';
-import 'memoize-one';
-import './_helpers/data-tests.js';
-import './_helpers/get-uid.js';
-import './_helpers/schedule-raf.js';
-import './_helpers/dom.js';
-import './shortcuts.js';
-import 'combokeys';
-import './_helpers/sniffer.js';
-import 'sniffr';
-import './link.js';
-import 'focus-visible';
-import './_helpers/clickableLink.js';
-import './avatar.js';
-import './_helpers/url.js';
-import './checkbox.js';
-import '@jetbrains/icons/checkmark';
-import '@jetbrains/icons/remove-10px';
-import './icon.js';
-import '@jetbrains/icons/chevron-10px';
-import '@jetbrains/icons/close';
-import 'deep-equal';
-import './dropdown.js';
-import './_helpers/button.js';
-import './_helpers/theme.js';
-import './_helpers/popup.js';
-import 'react-dom';
-import './tab-trap.js';
-import './_helpers/popup.target.js';
-import './input.js';
-import '@jetbrains/icons/search';
-import './loader-inline.js';
-import 'conic-gradient';
-import './text.js';
-import './tag.js';
-
-var modules_5aa8aaf3 = {"tagsInput":"tagsInput_tagsInput__3bf16b19","tagsInputLegacyMode":"tagsInput_tagsInputLegacyMode__3bf16b19","tagsList":"tagsInput_tagsList__3bf16b19","tag":"tagsInput_tag__3bf16b19","tagsInputDisabled":"tagsInput_tagsInputDisabled__3bf16b19","underline":"tagsInput_underline__3bf16b19","tagsInputFocused":"tagsInput_tagsInputFocused__3bf16b19","tagsSelect":"tagsInput_tagsSelect__3bf16b19","focusUnderline":"tagsInput_focusUnderline__3bf16b19"};
-
-function noop() {}
-/**
- * @name Tags Input
- */
-
-
-const POPUP_VERTICAL_SHIFT = 2;
-class TagsInput extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      tags: [],
-      prevTags: null,
-      suggestions: [],
-      loading: true,
-      focused: false,
-      query: '',
-      activeIndex: 0
-    });
-
-    _defineProperty(this, "nodeRef", node => {
-      this.node = node;
-    });
-
-    _defineProperty(this, "ngModelStateField", TagsInput.ngModelStateField);
-
-    _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", (query = '') => 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;
-    });
-  }
-
-  static getDerivedStateFromProps({
-    tags
-  }, {
-    prevTags
-  }) {
-    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 default TagsInput;
-export { RerenderableTagsInput };

package/dist/tags-list.js

@@ -1,91 +0,0 @@
-import { a as _extends, _ as _objectWithoutProperties, b as _defineProperty } from './_helpers/_rollupPluginBabelHelpers.js';
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Tag from './tag.js';
-import '@jetbrains/icons/close';
-import './icon.js';
-import 'util-deprecate';
-import './_helpers/memoize.js';
-import './_helpers/button.js';
-import 'focus-visible';
-import '@jetbrains/icons/chevron-10px';
-import './_helpers/theme.js';
-import './_helpers/clickableLink.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 _this$props = this.props,
-          {
-      children,
-      className,
-      customTagComponent,
-      canNotBeEmpty,
-      handleClick,
-      tagClassName,
-      handleRemove,
-      tags,
-      activeIndex
-    } = _this$props,
-          props = _objectWithoutProperties(_this$props, ["children", "className", "customTagComponent", "canNotBeEmpty", "handleClick", "tagClassName", "handleRemove", "tags", "activeIndex"]);
-
-    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 default TagsList;