@jetbrains/ring-ui 5.0.126 → 5.0.128

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

@@ -1,5 +1,4 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React, { Component, PureComponent } from 'react';
+import React, { PureComponent, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import getEventKey from '../global/get-event-key.js';
@@ -12,6 +11,7 @@ import { Size } from '../input/input.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
 import getUID from '../global/get-uid.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/close-12px';
 import 'deep-equal';
@@ -88,171 +88,67 @@ function noop() {}
  */
 const POPUP_VERTICAL_SHIFT = 2;
 class TagsInput extends PureComponent {
+  static 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: PropTypes.instanceOf(Component),
+    maxPopupHeight: PropTypes.number,
+    minPopupWidth: PropTypes.number,
+    placeholder: PropTypes.string,
+    canNotBeEmpty: PropTypes.bool,
+    disabled: PropTypes.bool,
+    autoOpen: PropTypes.bool,
+    renderOptimization: PropTypes.bool,
+    filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+      fn: PropTypes.func
+    })]),
+    size: PropTypes.string,
+    height: PropTypes.string,
+    label: PropTypes.node,
+    loadingMessage: PropTypes.string,
+    notFoundMessage: PropTypes.string,
+    allowAddNewTags: PropTypes.bool
+  };
+  static defaultProps = {
+    dataSource: noop,
+    onAddTag: noop,
+    onRemoveTag: noop,
+    customTagComponent: null,
+    maxPopupHeight: 500,
+    minPopupWidth: 360,
+    canNotBeEmpty: false,
+    disabled: false,
+    autoOpen: false,
+    renderOptimization: true,
+    allowAddNewTags: false,
+    filter: {
+      fn: () => true
+    },
+    placeholder: 'Select an option',
+    size: Size.M
+  };
   constructor(props) {
-    var _this;
     super(props);
-    _this = this;
-    _defineProperty(this, "state", {
-      tags: [],
-      prevTags: null,
-      suggestions: [],
-      loading: true,
-      focused: false,
-      query: '',
-      activeIndex: 0
-    });
-    _defineProperty(this, "ngModelStateField", void 0);
-    _defineProperty(this, "id", getUID('ring-tags-list-'));
-    _defineProperty(this, "node", void 0);
-    _defineProperty(this, "nodeRef", node => {
-      this.node = node;
-    });
-    _defineProperty(this, "input", void 0);
-    _defineProperty(this, "caret", void 0);
-    _defineProperty(this, "focusInput", () => {
-      this.getInputNode()?.focus();
-    });
-    _defineProperty(this, "addTag", tag => {
-      if (tag == null) {
-        return;
-      }
-      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 && event.target.parentElement !== this.node) {
-        return;
-      }
-      this.select?._clickHandler();
-    });
-    _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 {
-          const suggestionsResult = _this.props.dataSource({
-            query
-          });
-          const allSuggestions = Array.isArray(suggestionsResult) ? suggestionsResult : await suggestionsResult;
-          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 = () => {
-        var _this$getInputNode$ta;
-        return event.target instanceof Element && event.target.matches((_this$getInputNode$ta = this.getInputNode()?.tagName) !== null && _this$getInputNode$ta !== void 0 ? _this$getInputNode$ta : '');
-      };
-      if (key === ' ' && this.props.allowAddNewTags) {
-        event.stopPropagation();
-        const value = this.getInputNode()?.value;
-        if (value != null && value !== '') {
-          this.handleTagCreation(value);
-        }
-        return true;
-      }
-      if (this.select?._popup?.isVisible()) {
-        return true;
-      }
-      if (key === 'ArrowLeft') {
-        if (this.getInputNode() && this.caret != null && 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.activeIndex != null && 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, "select", void 0);
-    _defineProperty(this, "selectRef", el => {
-      this.select = el;
-    });
     this.ngModelStateField = TagsInput.ngModelStateField;
   }
+  state = {
+    tags: [],
+    prevTags: null,
+    suggestions: [],
+    loading: true,
+    focused: false,
+    query: '',
+    activeIndex: 0
+  };
   static getDerivedStateFromProps(_ref, _ref2) {
     let {
       tags
@@ -278,6 +174,16 @@ class TagsInput extends PureComponent {
       this.select?._showPopup();
     }
   }
+  static ngModelStateField = 'tags';
+  ngModelStateField;
+  static contextType = ControlsHeightContext;
+  id = getUID('ring-tags-list-');
+  node;
+  nodeRef = node => {
+    this.node = node;
+  };
+  input;
+  caret;
   getInputNode() {
     if (!this.input) {
       this.input = this.select?.filter;
@@ -292,6 +198,26 @@ class TagsInput extends PureComponent {
       activeIndex
     });
   }
+  focusInput = () => {
+    this.getInputNode()?.focus();
+  };
+  addTag = tag => {
+    if (tag == null) {
+      return;
+    }
+    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();
+    }
+  };
   onRemoveTag(tagToRemove) {
     return Promise.resolve(this.props.onRemoveTag({
       tag: tagToRemove
@@ -306,6 +232,131 @@ class TagsInput extends PureComponent {
       return tags;
     }, this.focusInput);
   }
+  clickHandler = event => {
+    if (event.target !== this.node && event.target.parentElement !== this.node) {
+      return;
+    }
+    this.select?._clickHandler();
+  };
+  filterExistingTags = suggestions => {
+    const tagsMap = new Map(this.state.tags.map(tag => [tag.key, tag]));
+    return suggestions.filter(suggestion => !tagsMap.has(suggestion.key));
+  };
+  loadSuggestions = (() => {
+    var _this = this;
+    return function () {
+      let query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      return _this.setState({
+        loading: true,
+        query
+      }, async () => {
+        try {
+          const suggestionsResult = _this.props.dataSource({
+            query
+          });
+          const allSuggestions = Array.isArray(suggestionsResult) ? suggestionsResult : await suggestionsResult;
+          const suggestions = _this.filterExistingTags(allSuggestions);
+          if (_this.node && query === _this.state.query) {
+            _this.setState({
+              suggestions,
+              loading: false
+            });
+          }
+        } catch (e) {
+          _this.setState({
+            loading: false
+          });
+        }
+      });
+    };
+  })();
+  _focusHandler = () => {
+    this.setActiveIndex(null);
+    this.setState({
+      focused: true
+    });
+  };
+  _blurHandler = () => {
+    this.setState({
+      focused: false
+    });
+  };
+  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);
+    }
+  };
+  handleKeyDown = event => {
+    const key = getEventKey(event);
+    const isInputFocused = () => {
+      var _this$getInputNode$ta;
+      return event.target instanceof Element && event.target.matches((_this$getInputNode$ta = this.getInputNode()?.tagName) !== null && _this$getInputNode$ta !== void 0 ? _this$getInputNode$ta : '');
+    };
+    if (key === ' ' && this.props.allowAddNewTags) {
+      event.stopPropagation();
+      const value = this.getInputNode()?.value;
+      if (value != null && value !== '') {
+        this.handleTagCreation(value);
+      }
+      return true;
+    }
+    if (this.select?._popup?.isVisible()) {
+      return true;
+    }
+    if (key === 'ArrowLeft') {
+      if (this.getInputNode() && this.caret != null && Number(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.activeIndex != null && this.state.tags[this.state.activeIndex]) {
+        this.onRemoveTag(this.state.tags[this.state.activeIndex]).then(() => this.selectTag(true));
+        return false;
+      }
+    }
+    return true;
+  };
+  handleClick = memoize(tag => () => {
+    this.setActiveIndex(this.state.tags.indexOf(tag));
+  });
+  handleRemove = memoize(tag => () => this.onRemoveTag(tag));
+  handleTagCreation = label => {
+    this.addTag({
+      key: label,
+      label
+    });
+  };
+  select;
+  selectRef = el => {
+    this.select = el;
+  };
   render() {
     const {
       focused,
@@ -376,56 +427,6 @@ class TagsInput extends PureComponent {
     })));
   }
 }
-_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: PropTypes.instanceOf(Component),
-  maxPopupHeight: PropTypes.number,
-  minPopupWidth: PropTypes.number,
-  placeholder: PropTypes.string,
-  canNotBeEmpty: PropTypes.bool,
-  disabled: PropTypes.bool,
-  autoOpen: PropTypes.bool,
-  renderOptimization: PropTypes.bool,
-  filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    fn: PropTypes.func
-  })]),
-  size: PropTypes.string,
-  height: PropTypes.string,
-  label: PropTypes.node,
-  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,
-  allowAddNewTags: false,
-  filter: {
-    fn: () => true
-  },
-  placeholder: 'Select an option',
-  size: Size.M
-});
-_defineProperty(TagsInput, "ngModelStateField", 'tags');
-_defineProperty(TagsInput, "contextType", ControlsHeightContext);
 const RerenderableTagsInput = rerenderHOC(TagsInput);
 
 export { RerenderableTagsInput, TagsInput as default };

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

@@ -1,6 +1,5 @@
 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 '../global/react-render-adapter.js';
@@ -11,6 +10,7 @@ import 'prop-types';
 import 'classnames';
 import '../global/get-event-key.js';
 import '../select/select.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/close-12px';
 import 'deep-equal';

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

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -22,6 +22,25 @@ function noop() {}
  * @name Tags List
  */
 class TagsList extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    tags: PropTypes.array,
+    customTagComponent: PropTypes.elementType,
+    activeIndex: PropTypes.number,
+    canNotBeEmpty: PropTypes.bool,
+    disabled: PropTypes.bool,
+    handleClick: PropTypes.func,
+    handleRemove: PropTypes.func,
+    className: PropTypes.string,
+    tagClassName: PropTypes.string
+  };
+  static defaultProps = {
+    customTagComponent: null,
+    canNotBeEmpty: false,
+    disabled: false,
+    handleClick: noop,
+    handleRemove: noop
+  };
   renderTag(tag, focusTag) {
     const TagComponent = this.props.customTagComponent || Tag;
     const readOnly = this.props.disabled || tag.readOnly || this.props.canNotBeEmpty && this.props.tags.length === 1;
@@ -58,24 +77,5 @@ class TagsList extends Component {
     }, props), tagsList, children);
   }
 }
-_defineProperty(TagsList, "propTypes", {
-  children: PropTypes.node,
-  tags: PropTypes.array,
-  customTagComponent: PropTypes.elementType,
-  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 };

package/dist/template-ng/template-ng.js

@@ -1,4 +1,3 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import angular from 'angular';
 import RingAngularComponent from '../global/ring-angular-component.js';
 
@@ -8,37 +7,37 @@ import RingAngularComponent from '../global/ring-angular-component.js';
 
 const angularModule = angular.module('Ring.template', []);
 class RgTemplateController extends RingAngularComponent {
+  currentScope = null;
   constructor() {
     super(...arguments);
-    _defineProperty(this, "currentScope", null);
-    _defineProperty(this, "render", template => {
-      const {
-        $scope,
-        $element,
-        $compile
-      } = this.$inject;
-      this.cleanup();
-      this.currentScope = $scope.$new();
-      this.currentScope.$evalAsync(() => {
-        $element.html(template);
-        this.addInnerClass();
-        $compile($element.contents())(this.currentScope);
-      });
-    });
-    _defineProperty(this, "addInnerClass", () => {
-      const {
-        rgTemplateClass
-      } = this.$inject.$attrs;
-      if (rgTemplateClass) {
-        this.$inject.$element.contents().addClass(rgTemplateClass);
-      }
-    });
     const {
-      $scope: _$scope,
+      $scope,
       $attrs
     } = this.$inject;
-    _$scope.$watch($attrs.rgTemplate || $attrs.template, this.render);
+    $scope.$watch($attrs.rgTemplate || $attrs.template, this.render);
   }
+  render = template => {
+    const {
+      $scope,
+      $element,
+      $compile
+    } = this.$inject;
+    this.cleanup();
+    this.currentScope = $scope.$new();
+    this.currentScope.$evalAsync(() => {
+      $element.html(template);
+      this.addInnerClass();
+      $compile($element.contents())(this.currentScope);
+    });
+  };
+  addInnerClass = () => {
+    const {
+      rgTemplateClass
+    } = this.$inject.$attrs;
+    if (rgTemplateClass) {
+      this.$inject.$element.contents().addClass(rgTemplateClass);
+    }
+  };
   cleanup() {
     if (this.currentScope) {
       this.currentScope.$destroy();

package/dist/text/text.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -9,6 +9,11 @@ var modules_78d1bce6 = {"light":"light_rui_6f30","text":"text_rui_6f30","info":"
  * @name Text
  */
 class Text extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    info: PropTypes.bool,
+    className: PropTypes.string
+  };
   render() {
     const {
       children,
@@ -24,10 +29,5 @@ class Text extends Component {
     }, restProps), children);
   }
 }
-_defineProperty(Text, "propTypes", {
-  children: PropTypes.node,
-  info: PropTypes.bool,
-  className: PropTypes.string
-});
 
 export { Text as default };

package/dist/toggle/toggle.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -12,6 +12,24 @@ const Size = {
   Size20: modules_331c5aa7.size20
 };
 class Toggle extends PureComponent {
+  static propTypes = {
+    children: PropTypes.node,
+    name: PropTypes.string,
+    className: PropTypes.string,
+    title: PropTypes.string,
+    leftLabel: PropTypes.node,
+    defaultChecked: PropTypes.bool,
+    checked: PropTypes.bool,
+    disabled: PropTypes.bool,
+    pale: PropTypes.bool,
+    onChange: PropTypes.func,
+    onTransitionEnd: PropTypes.func,
+    size: PropTypes.oneOf(Object.values(Size)),
+    'data-test': PropTypes.string
+  };
+  static defaultProps = {
+    size: Size.Size14
+  };
   render() {
     const {
       className,
@@ -48,23 +66,5 @@ class Toggle extends PureComponent {
     }, children));
   }
 }
-_defineProperty(Toggle, "propTypes", {
-  children: PropTypes.node,
-  name: PropTypes.string,
-  className: PropTypes.string,
-  title: PropTypes.string,
-  leftLabel: PropTypes.node,
-  defaultChecked: PropTypes.bool,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  pale: PropTypes.bool,
-  onChange: PropTypes.func,
-  onTransitionEnd: PropTypes.func,
-  size: PropTypes.oneOf(Object.values(Size)),
-  'data-test': PropTypes.string
-});
-_defineProperty(Toggle, "defaultProps", {
-  size: Size.Size14
-});
 
 export { Size, Toggle as default };