@jetbrains/ring-ui-built 7.0.0-beta.1 → 7.0.0-beta.10

package/components/tag/tag.js

@@ -1,221 +1,162 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
+import { _ as _defineProperty, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close-12px';
-import deprecate from 'util-deprecate';
 import Icon from '../icon/icon.js';
 import { Button } from '../button/button.js';
 import { ControlsHeight } from '../global/controls-height.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+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 'core-js/modules/es.string.starts-with.js';
 import '../global/memoize.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.weak-map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import '@jetbrains/icons/chevron-down';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 
-var modules_2f9be069 = {"max-height":"20px","tag":"tag_rui_5765 resetButton_rui_f295","tagAngled":"tagAngled_rui_5765","light":"light_rui_2ac4","withRemove":"withRemove_rui_5765","container":"container_rui_5765","focused":"focused_rui_5765","content":"content_rui_5765 ellipsis_rui_f295","disabled":"disabled_rui_5765","remove":"remove_rui_5765","removeIcon":"removeIcon_rui_5765","icon":"icon_rui_5765","avatarContainer":"avatarContainer_rui_5765","customIcon":"customIcon_rui_5765","avatarIcon":"avatarIcon_rui_5765"};
+var modules_2f9be069 = {"max-height":"20px","tag":"tag_rui_5765 resetButton_rui_f295","light":"light_rui_2ac4","withRemove":"withRemove_rui_5765","container":"container_rui_5765","focused":"focused_rui_5765","content":"content_rui_5765 ellipsis_rui_f295","disabled":"disabled_rui_5765","remove":"remove_rui_5765","removeIcon":"removeIcon_rui_5765","icon":"icon_rui_5765","avatarContainer":"avatarContainer_rui_5765","customIcon":"customIcon_rui_5765","avatarIcon":"avatarIcon_rui_5765"};
 
-var warnAngled = deprecate(function () {}, 'Tag angled prop is deprecated and will be removed in Ring UI 7.0');
-/**
- * @name Tag
- */
-var Tag = /*#__PURE__*/function (_PureComponent) {
-  function Tag() {
-    var _this;
-    _classCallCheck(this, Tag);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, Tag, [].concat(args));
-    _defineProperty(_this, "state", {
+class Tag extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
       focused: false
     });
-    _defineProperty(_this, "onDocumentClick", function (event) {
-      if (_this.tagNode) {
-        _this.setState({
-          focused: _this.tagNode === event.target
+    _defineProperty(this, "onDocumentClick", event => {
+      if (this.tagNode) {
+        this.setState({
+          focused: this.tagNode === event.target
         });
       }
     });
-    _defineProperty(_this, "tagNode", void 0);
-    _defineProperty(_this, "tagRef", function (el) {
-      _this.tagNode = el;
+    _defineProperty(this, "tagNode", void 0);
+    _defineProperty(this, "tagRef", el => {
+      this.tagNode = el;
     });
-    return _this;
   }
-  _inherits(Tag, _PureComponent);
-  return _createClass(Tag, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (this.props.focused !== prevProps.focused) {
-        this.setState({
-          focused: this.props.focused
-        });
-      }
-      if (this.state.focused) {
-        var _this$tagNode;
-        (_this$tagNode = this.tagNode) === null || _this$tagNode === void 0 || _this$tagNode.focus();
-      }
-      this.setDocumentClickListener(this.state.focused);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.setDocumentClickListener(false);
+  componentDidUpdate(prevProps) {
+    if (this.props.focused !== prevProps.focused) {
       this.setState({
-        focused: false
+        focused: this.props.focused
       });
     }
-  }, {
-    key: "setDocumentClickListener",
-    value: function setDocumentClickListener(setListener) {
-      if (setListener) {
-        document.addEventListener('click', this.onDocumentClick);
-      } else {
-        document.removeEventListener('click', this.onDocumentClick);
-      }
+    if (this.state.focused) {
+      var _this$tagNode;
+      (_this$tagNode = this.tagNode) === null || _this$tagNode === void 0 || _this$tagNode.focus();
     }
-  }, {
-    key: "renderCustomIcon",
-    value: function renderCustomIcon() {
-      if (this.props.rgTagIcon) {
-        return /*#__PURE__*/jsx(Icon, {
-          className: modules_2f9be069.icon,
-          title: this.props.rgTagTitle,
-          glyph: this.props.rgTagIcon
-        });
-      }
-      return null;
+    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);
     }
-  }, {
-    key: "_renderImageElement",
-    value: function _renderImageElement(avatarSrc) {
-      var classes = classNames({
-        [modules_2f9be069.customIcon]: this.props.icon,
-        [modules_2f9be069.avatarIcon]: avatarSrc
-      });
-      return /*#__PURE__*/jsx("img", {
-        alt: avatarSrc ? 'Avatar' : 'Icon',
-        className: classes,
-        src: avatarSrc || this.props.icon
+  }
+  renderCustomIcon() {
+    if (this.props.rgTagIcon) {
+      return /*#__PURE__*/jsx(Icon, {
+        className: modules_2f9be069.icon,
+        title: this.props.rgTagTitle,
+        glyph: this.props.rgTagIcon
       });
     }
-  }, {
-    key: "renderImage",
-    value: function renderImage() {
-      if (this.props.icon && !this.props.avatar) {
-        return this._renderImageElement();
-      }
-      return null;
-    }
-  }, {
-    key: "renderAvatar",
-    value: function renderAvatar() {
-      if (this.props.avatar) {
-        return /*#__PURE__*/jsx("span", {
-          className: modules_2f9be069.avatarContainer,
-          children: this._renderImageElement(this.props.avatar)
-        });
-      }
-      return null;
+    return null;
+  }
+  _renderImageElement(avatarSrc) {
+    const classes = classNames({
+      [modules_2f9be069.customIcon]: this.props.icon,
+      [modules_2f9be069.avatarIcon]: avatarSrc
+    });
+    return /*#__PURE__*/jsx("img", {
+      alt: avatarSrc ? 'Avatar' : 'Icon',
+      className: classes,
+      src: avatarSrc || this.props.icon
+    });
+  }
+  renderImage() {
+    if (this.props.icon && !this.props.avatar) {
+      return this._renderImageElement();
     }
-  }, {
-    key: "renderRemoveIcon",
-    value: function renderRemoveIcon() {
-      if (!this.props.readOnly) {
-        return /*#__PURE__*/jsx(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
-          },
-          height: ControlsHeight.M
-        });
-      }
-      return null;
+    return null;
+  }
+  renderAvatar() {
+    if (this.props.avatar) {
+      return /*#__PURE__*/jsx("span", {
+        className: modules_2f9be069.avatarContainer,
+        children: this._renderImageElement(this.props.avatar)
+      });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      if (this.props.angled) {
-        warnAngled();
-      }
-      var 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);
-      var _this$props = this.props,
-        backgroundColor = _this$props.backgroundColor,
-        textColor = _this$props.textColor,
-        render = _this$props.render;
-      return /*#__PURE__*/jsxs("span", {
-        className: modules_2f9be069.container,
-        children: [render({
-          'data-test': 'ring-tag',
-          className: classes,
-          ref: this.tagRef,
-          onClick: this.props.onClick,
-          style: {
-            backgroundColor,
-            color: textColor
-          },
-          disabled: this.props.disabled,
-          children: /*#__PURE__*/jsxs(Fragment, {
-            children: [this.renderAvatar(), this.renderCustomIcon(), this.renderImage(), /*#__PURE__*/jsx("span", {
-              className: modules_2f9be069.content,
-              children: this.props.children
-            })]
-          })
-        }), this.renderRemoveIcon()]
+    return null;
+  }
+  renderRemoveIcon() {
+    if (!this.props.readOnly) {
+      return /*#__PURE__*/jsx(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
+        },
+        height: ControlsHeight.M
       });
     }
-  }]);
-}(PureComponent);
-_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,
-  render: PropTypes.func
-});
+    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.withRemove]: !this.props.readOnly
+    }, this.props.className);
+    const {
+      backgroundColor,
+      textColor,
+      render
+    } = this.props;
+    return /*#__PURE__*/jsxs("span", {
+      className: modules_2f9be069.container,
+      children: [render({
+        'data-test': 'ring-tag',
+        className: classes,
+        ref: this.tagRef,
+        onClick: this.props.onClick,
+        style: {
+          backgroundColor,
+          color: textColor
+        },
+        disabled: this.props.disabled,
+        children: /*#__PURE__*/jsxs(Fragment, {
+          children: [this.renderAvatar(), this.renderCustomIcon(), this.renderImage(), /*#__PURE__*/jsx("span", {
+            className: modules_2f9be069.content,
+            children: this.props.children
+          })]
+        })
+      }), this.renderRemoveIcon()]
+    });
+  }
+}
 _defineProperty(Tag, "defaultProps", {
-  onRemove: function onRemove() {},
-  onClick: function onClick() {},
+  onRemove: () => {},
+  onClick: () => {},
   readOnly: false,
   disabled: false,
   focused: false,
-  render: function render(props) {
-    return /*#__PURE__*/jsx("button", _objectSpread2({
-      type: "button"
-    }, props));
-  }
+  render: props => /*#__PURE__*/jsx("button", _objectSpread2({
+    type: "button"
+  }, props))
 });
 
 export { Tag as default };

package/components/tags-input/tags-input.d.ts

@@ -1,6 +1,5 @@
-import { Component, PureComponent, SyntheticEvent, ReactNode, ComponentType } from 'react';
+import { PureComponent, SyntheticEvent, ReactNode, ComponentType } from 'react';
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Select, { SelectItem } from '../select/select';
 import { TagType } from '../tags-list/tags-list';
 import Caret from '../caret/caret';
@@ -17,6 +16,12 @@ export interface TagsInputRequestParams {
     query: string;
 }
 export interface TagsInputProps {
+    /**
+     * 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: (params: TagsInputRequestParams) => readonly SelectItem[] | Promise<readonly SelectItem[]>;
     onAddTag: (params: ToggleTagParams) => void;
     onRemoveTag: (params: ToggleTagParams) => void;
@@ -51,37 +56,6 @@ interface TagsInputState {
     activeIndex: number | null | undefined;
 }
 export default class TagsInput extends PureComponent<TagsInputProps, TagsInputState> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        tags: PropTypes.Requireable<any[]>;
-        /**
-         * 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.Requireable<(...args: any[]) => any>;
-        onAddTag: PropTypes.Requireable<(...args: any[]) => any>;
-        onRemoveTag: PropTypes.Requireable<(...args: any[]) => any>;
-        customTagComponent: PropTypes.Requireable<Component<unknown, unknown, unknown>>;
-        maxPopupHeight: PropTypes.Requireable<number>;
-        minPopupWidth: PropTypes.Requireable<number>;
-        placeholder: PropTypes.Requireable<string>;
-        canNotBeEmpty: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        autoOpen: PropTypes.Requireable<boolean>;
-        renderOptimization: PropTypes.Requireable<boolean>;
-        filter: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
-            fn: PropTypes.Requireable<(...args: any[]) => any>;
-        }> | null | undefined>>;
-        size: PropTypes.Requireable<string>;
-        height: PropTypes.Requireable<string>;
-        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        loadingMessage: PropTypes.Requireable<string>;
-        notFoundMessage: PropTypes.Requireable<string>;
-        hint: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        allowAddNewTags: PropTypes.Requireable<boolean>;
-    };
     static defaultProps: {
         dataSource: typeof noop;
         onAddTag: typeof noop;