@jetbrains/ring-ui-built 7.0.66 → 7.0.70

package/components/tag/tag.js

@@ -1,5 +1,3 @@
-import { _ as _defineProperty, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
@@ -11,8 +9,6 @@ import { ControlsHeight } from '../global/configuration.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 '../global/memoize.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
@@ -34,23 +30,23 @@ var TagType;
  * @name Tag
  */
 class Tag extends PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      focused: false
-    });
-    _defineProperty(this, "onDocumentClick", event => {
-      if (this.tagNode) {
-        this.setState({
-          focused: this.tagNode === event.target
-        });
-      }
-    });
-    _defineProperty(this, "tagNode", void 0);
-    _defineProperty(this, "tagRef", el => {
-      this.tagNode = el;
-    });
-  }
+  static defaultProps = {
+    onClick: () => {},
+    readOnly: false,
+    disabled: false,
+    focused: false,
+    interactive: true,
+    render: (props, interactive) => interactive ? jsx("button", {
+      type: 'button',
+      ...props
+    }) : jsx("span", {
+      ...props
+    }),
+    tagType: TagType.DEFAULT
+  };
+  state = {
+    focused: false
+  };
   componentDidUpdate(prevProps) {
     if (this.props.focused !== prevProps.focused) {
       this.setState({
@@ -58,8 +54,7 @@ class Tag extends PureComponent {
       });
     }
     if (this.state.focused) {
-      var _this$tagNode;
-      (_this$tagNode = this.tagNode) === null || _this$tagNode === void 0 || _this$tagNode.focus();
+      this.tagNode?.focus();
     }
     this.setDocumentClickListener(this.state.focused);
   }
@@ -69,6 +64,18 @@ class Tag extends PureComponent {
       focused: false
     });
   }
+  static Type = TagType;
+  onDocumentClick = event => {
+    if (this.tagNode) {
+      this.setState({
+        focused: this.tagNode === event.target
+      });
+    }
+  };
+  tagNode;
+  tagRef = el => {
+    this.tagNode = el;
+  };
   setDocumentClickListener(setListener) {
     if (setListener) {
       document.addEventListener('click', this.onDocumentClick);
@@ -164,17 +171,5 @@ class Tag extends PureComponent {
     });
   }
 }
-_defineProperty(Tag, "defaultProps", {
-  onClick: () => {},
-  readOnly: false,
-  disabled: false,
-  focused: false,
-  interactive: true,
-  render: (props, interactive) => interactive ? jsx("button", _objectSpread2({
-    type: 'button'
-  }, props)) : jsx("span", _objectSpread2({}, props)),
-  tagType: TagType.DEFAULT
-});
-_defineProperty(Tag, "Type", TagType);
 
 export { TagType, Tag as default };

package/components/tags-input/tags-input.js

@@ -1,5 +1,3 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
@@ -13,13 +11,9 @@ import { S as Size, i as inputStyles } from '../_helpers/input.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
 import getUID from '../global/get-uid.js';
 import { ControlLabel } from '../control-label/control-label.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/es.string.trim.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/close-12px';
 import 'dequal';
-import '../dropdown/dropdown.js';
 import '../global/data-tests.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
@@ -48,12 +42,10 @@ 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 '../popup/position-css.js';
 import '../list/list.js';
-import 'core-js/modules/es.symbol.description.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';
@@ -94,218 +86,74 @@ function noop() {}
  */
 const POPUP_VERTICAL_SHIFT = 2;
 class TagsInput extends PureComponent {
+  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", this.props.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", () => {
-      var _this$getInputNode;
-      (_this$getInputNode = this.getInputNode()) === null || _this$getInputNode === void 0 || _this$getInputNode.focus();
-    });
-    _defineProperty(this, "focus", () => {
-      this.focusInput();
-    });
-    _defineProperty(this, "addTag", tag => {
-      var _this$select, _this$select2;
-      if (tag === null) {
-        return;
-      }
-      const isUniqueTag = this.state.tags.filter(item => tag.key === item.key).length === 0;
-      (_this$select = this.select) === null || _this$select === void 0 || _this$select.clear();
-      (_this$select2 = this.select) === null || _this$select2 === void 0 || _this$select2.filterValue('');
-      if (isUniqueTag) {
-        this.setState(prevState => ({
-          tags: prevState.tags.concat([tag])
-        }));
-        this.props.onAddTag({
-          tag
-        });
-        this.setActiveIndex();
-      }
-    });
-    _defineProperty(this, "clickHandler", event => {
-      var _this$select3;
-      if (event.target !== this.node && event.target.parentElement !== this.node) {
-        return;
-      }
-      // eslint-disable-next-line no-underscore-dangle
-      (_this$select3 = this.select) === null || _this$select3 === void 0 || _this$select3._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);
-      }
-    });
-    // eslint-disable-next-line complexity
-    _defineProperty(this, "handleKeyDown", event => {
-      var _this$select4;
-      const key = getEventKey(event);
-      const isInputFocused = () => {
-        var _this$getInputNode$ta, _this$getInputNode2;
-        return event.target instanceof Element && event.target.matches((_this$getInputNode$ta = (_this$getInputNode2 = this.getInputNode()) === null || _this$getInputNode2 === void 0 ? void 0 : _this$getInputNode2.tagName) !== null && _this$getInputNode$ta !== void 0 ? _this$getInputNode$ta : '');
-      };
-      if (key === ' ' && this.props.allowAddNewTags) {
-        var _this$getInputNode3;
-        event.stopPropagation();
-        const value = (_this$getInputNode3 = this.getInputNode()) === null || _this$getInputNode3 === void 0 ? void 0 : _this$getInputNode3.value;
-        if (value) {
-          this.handleTagCreation(value);
-        }
-        return true;
-      }
-      // eslint-disable-next-line no-underscore-dangle
-      if ((_this$select4 = this.select) !== null && _this$select4 !== void 0 && (_this$select4 = _this$select4._popup) !== null && _this$select4 !== void 0 && _this$select4.isVisible()) {
-        return true;
-      }
-      if (key === 'ArrowLeft') {
-        var _this$caret;
-        if (this.getInputNode() && this.caret && Number((_this$caret = this.caret) === null || _this$caret === void 0 ? void 0 : _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) {
-            var _this$getInputNode4;
-            (_this$getInputNode4 = this.getInputNode()) === null || _this$getInputNode4 === void 0 || _this$getInputNode4.focus();
-            this.setActiveIndex();
-          }
-        } else {
-          this.selectTag(true);
-        }
-        return false;
-      }
-      if (!this.props.disabled) {
-        var _this$getInputNode5;
-        if (key === 'Backspace' && !((_this$getInputNode5 = this.getInputNode()) !== null && _this$getInputNode5 !== void 0 && _this$getInputNode5.value)) {
-          var _this$select5;
-          event.preventDefault();
-          const tagsLength = this.state.tags.length;
-          // eslint-disable-next-line no-underscore-dangle
-          (_this$select5 = this.select) === null || _this$select5 === void 0 || _this$select5._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 && 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;
   }
-  static getDerivedStateFromProps(_ref, _ref2) {
-    let {
-      tags
-    } = _ref;
-    let {
-      prevTags
-    } = _ref2;
+  state = {
+    tags: [],
+    prevTags: null,
+    suggestions: [],
+    loading: true,
+    focused: false,
+    query: '',
+    activeIndex: 0
+  };
+  static getDerivedStateFromProps({
+    tags
+  }, {
+    prevTags
+  }) {
     const nextState = {
       prevTags: tags
     };
     if (tags && tags !== prevTags) {
       Object.assign(nextState, {
         tags,
-        activeIndex: tags === null || tags === void 0 ? void 0 : tags.length
+        activeIndex: tags?.length
       });
     }
     return nextState;
   }
   componentDidMount() {
     if (this.props.autoOpen && !this.props.disabled) {
-      var _this$select6;
       this.focusInput();
       this.loadSuggestions();
       // eslint-disable-next-line no-underscore-dangle
-      (_this$select6 = this.select) === null || _this$select6 === void 0 || _this$select6._showPopup();
+      this.select?._showPopup();
     }
   }
+  static ngModelStateField = 'tags';
+  ngModelStateField;
+  static contextType = ControlsHeightContext;
+  id = this.props.id || getUID('ring-tags-list-');
+  node;
+  nodeRef = node => {
+    this.node = node;
+  };
+  input;
+  caret;
   getInputNode() {
     if (!this.input) {
-      var _this$select7;
-      this.input = (_this$select7 = this.select) === null || _this$select7 === void 0 ? void 0 : _this$select7.filter;
+      this.input = this.select?.filter;
       if (this.input) {
         this.caret = new Caret(this.input);
       }
@@ -317,6 +165,29 @@ class TagsInput extends PureComponent {
       activeIndex
     });
   }
+  focusInput = () => {
+    this.getInputNode()?.focus();
+  };
+  focus = () => {
+    this.focusInput();
+  };
+  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
@@ -331,6 +202,129 @@ class TagsInput extends PureComponent {
       return tags;
     }, this.focusInput);
   }
+  clickHandler = event => {
+    if (event.target !== this.node && event.target.parentElement !== this.node) {
+      return;
+    }
+    // eslint-disable-next-line no-underscore-dangle
+    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 = (query = '') => 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);
+    }
+  };
+  // eslint-disable-next-line complexity
+  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) {
+        this.handleTagCreation(value);
+      }
+      return true;
+    }
+    // eslint-disable-next-line no-underscore-dangle
+    if (this.select?._popup?.isVisible()) {
+      return true;
+    }
+    if (key === 'ArrowLeft') {
+      if (this.getInputNode() && this.caret && 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;
+        // eslint-disable-next-line no-underscore-dangle
+        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.activeIndex !== undefined && 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,
@@ -347,7 +341,7 @@ class TagsInput extends PureComponent {
       height = typeof this.context === 'function' ? this.context() : this.context,
       label
     } = this.props;
-    const classes = classNames(styles.tagsInput, [inputStyles["size".concat(size)]], [inputStyles["height".concat(height)]], {
+    const classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
       [styles.tagsInputDisabled]: disabled,
       [styles.tagsInputFocused]: focused
     }, this.props.className);
@@ -406,26 +400,6 @@ class TagsInput extends PureComponent {
     });
   }
 }
-_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/components/tags-list/tags-list.js

@@ -1,16 +1,12 @@
-import { _ as _defineProperty, b as _objectSpread2, a as _objectWithoutProperties } from '../_helpers/_rollupPluginBabelHelpers.js';
 import { jsxs } from 'react/jsx-runtime';
 import { Component, createElement } from 'react';
 import classNames from 'classnames';
 import Tag from '../tag/tag.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import '@jetbrains/icons/close-12px';
 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 '../global/memoize.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
@@ -20,19 +16,26 @@ import '../global/controls-height.js';
 import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 
-const _excluded = ["children", "className", "customTagComponent", "canNotBeEmpty", "handleClick", "tagClassName", "handleRemove", "tags", "activeIndex"];
 function noop() {}
 /**
  * @name Tags List
  */
 class TagsList extends Component {
+  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;
     const {
       tagClassName
     } = this.props;
-    return /*#__PURE__*/createElement(TagComponent, _objectSpread2(_objectSpread2({}, tag), {}, {
+    return /*#__PURE__*/createElement(TagComponent, {
+      ...tag,
       key: tag.key,
       readOnly: readOnly,
       disabled: this.props.disabled || tag.disabled,
@@ -40,38 +43,30 @@ class TagsList extends Component {
       onClick: this.props.handleClick(tag),
       onRemove: this.props.handleRemove(tag),
       className: tagClassName
-    }), tag.label);
+    }, tag.label);
   }
   render() {
-    const _this$props = this.props,
-      {
-        children,
-        className,
-        customTagComponent,
-        canNotBeEmpty,
-        handleClick,
-        tagClassName,
-        handleRemove,
-        tags,
-        activeIndex
-      } = _this$props,
-      props = _objectWithoutProperties(_this$props, _excluded);
+    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 jsxs("div", _objectSpread2(_objectSpread2({
+    return jsxs("div", {
       "data-test": 'ring-tags-list',
-      className: classes
-    }, props), {}, {
+      className: classes,
+      ...props,
       children: [tagsList, children]
-    }));
+    });
   }
 }
-_defineProperty(TagsList, "defaultProps", {
-  customTagComponent: null,
-  canNotBeEmpty: false,
-  disabled: false,
-  handleClick: () => noop,
-  handleRemove: () => noop
-});
 
 export { TagsList as default };