@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/dist/tag/tag.d.ts

@@ -54,11 +54,11 @@ export default class Tag extends PureComponent<TagProps> {
     tagNode?: HTMLElement | null;
     tagRef: (el: HTMLElement | null) => void;
     setDocumentClickListener(setListener: boolean): void;
-    renderCustomIcon(): JSX.Element | null;
+    renderCustomIcon(): React.JSX.Element | null;
     private _renderImageElement;
-    renderImage(): JSX.Element | null;
-    renderAvatar(): JSX.Element | null;
-    renderRemoveIcon(): JSX.Element | null;
-    render(): JSX.Element;
+    renderImage(): React.JSX.Element | null;
+    renderAvatar(): React.JSX.Element | null;
+    renderRemoveIcon(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }
 export type TagAttrs = JSX.LibraryManagedAttributes<typeof Tag, TagProps>;

package/dist/tag/tag.js

@@ -1,4 +1,5 @@
-import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -8,143 +9,172 @@ import { Button } from '../button/button.js';
 import { ControlsHeight } from '../global/controls-height.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
-import '../_helpers/icon.js';
-import '../icon/icon__svg.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 'focus-visible';
+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.string.iterator.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
 import '@jetbrains/icons/chevron-10px';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 
-var modules_2f9be069 = {"unit":"8px","max-height":"20px","tag":"tag_rui_2f49 resetButton_rui_8bff","tagAngled":"tagAngled_rui_2f49","light":"light_rui_2f49","withRemove":"withRemove_rui_2f49","container":"container_rui_2f49","focused":"focused_rui_2f49","content":"content_rui_2f49 ellipsis_rui_8bff","disabled":"disabled_rui_2f49","remove":"remove_rui_2f49","removeIcon":"removeIcon_rui_2f49","icon":"icon_rui_2f49","avatarContainer":"avatarContainer_rui_2f49","customIcon":"customIcon_rui_2f49","avatarIcon":"avatarIcon_rui_2f49"};
+var modules_2f9be069 = {"unit":"i__const_unit_0","max-height":"20px","tag":"tag_rui_2f49 resetButton_rui_8bff","tagAngled":"tagAngled_rui_2f49","light":"light_rui_2ac4","withRemove":"withRemove_rui_2f49","container":"container_rui_2f49","focused":"focused_rui_2f49","content":"content_rui_2f49 ellipsis_rui_8bff","disabled":"disabled_rui_2f49","remove":"remove_rui_2f49","removeIcon":"removeIcon_rui_2f49","icon":"icon_rui_2f49","avatarContainer":"avatarContainer_rui_2f49","customIcon":"customIcon_rui_2f49","avatarIcon":"avatarIcon_rui_2f49"};
 
 /**
  * @name Tag
  */
-class Tag extends PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
+var Tag = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Tag, _PureComponent);
+  var _super = _createSuper(Tag);
+  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 = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
       focused: false
     });
-    _defineProperty(this, "onDocumentClick", event => {
-      if (this.tagNode) {
-        this.setState({
-          focused: this.tagNode === event.target
+    _defineProperty(_assertThisInitialized(_this), "onDocumentClick", function (event) {
+      if (_this.tagNode) {
+        _this.setState({
+          focused: _this.tagNode === event.target
         });
       }
     });
-    _defineProperty(this, "tagNode", void 0);
-    _defineProperty(this, "tagRef", el => {
-      this.tagNode = el;
+    _defineProperty(_assertThisInitialized(_this), "tagNode", void 0);
+    _defineProperty(_assertThisInitialized(_this), "tagRef", function (el) {
+      _this.tagNode = el;
     });
+    return _this;
   }
-  componentDidUpdate(prevProps) {
-    if (this.props.focused !== prevProps.focused) {
+  _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 ? void 0 : _this$tagNode.focus();
+      }
+      this.setDocumentClickListener(this.state.focused);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.setDocumentClickListener(false);
       this.setState({
-        focused: this.props.focused
+        focused: false
       });
     }
-    if (this.state.focused) {
-      this.tagNode?.focus();
+  }, {
+    key: "setDocumentClickListener",
+    value: function setDocumentClickListener(setListener) {
+      if (setListener) {
+        document.addEventListener('click', this.onDocumentClick);
+      } else {
+        document.removeEventListener('click', this.onDocumentClick);
+      }
     }
-    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: "renderCustomIcon",
+    value: function renderCustomIcon() {
+      if (this.props.rgTagIcon) {
+        return /*#__PURE__*/React.createElement(Icon, {
+          className: modules_2f9be069.icon,
+          title: this.props.rgTagTitle,
+          glyph: this.props.rgTagIcon
+        });
+      }
+      return null;
     }
-  }
-  renderCustomIcon() {
-    if (this.props.rgTagIcon) {
-      return /*#__PURE__*/React.createElement(Icon, {
-        className: modules_2f9be069.icon,
-        title: this.props.rgTagTitle,
-        glyph: this.props.rgTagIcon
+  }, {
+    key: "_renderImageElement",
+    value: function _renderImageElement(avatarSrc) {
+      var _classNames;
+      var classes = classNames((_classNames = {}, _defineProperty(_classNames, modules_2f9be069.customIcon, this.props.icon), _defineProperty(_classNames, modules_2f9be069.avatarIcon, avatarSrc), _classNames));
+      return /*#__PURE__*/React.createElement("img", {
+        alt: avatarSrc ? 'Avatar' : 'Icon',
+        className: classes,
+        src: avatarSrc || this.props.icon
       });
     }
-    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();
+  }, {
+    key: "renderImage",
+    value: function renderImage() {
+      if (this.props.icon && !this.props.avatar) {
+        return this._renderImageElement();
+      }
+      return null;
     }
-    return null;
-  }
-  renderAvatar() {
-    if (this.props.avatar) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: modules_2f9be069.avatarContainer
-      }, this._renderImageElement(this.props.avatar));
+  }, {
+    key: "renderAvatar",
+    value: function renderAvatar() {
+      if (this.props.avatar) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: modules_2f9be069.avatarContainer
+        }, this._renderImageElement(this.props.avatar));
+      }
+      return null;
     }
-    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,
+  }, {
+    key: "renderRemoveIcon",
+    value: function 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
+          },
+          height: ControlsHeight.M
+        });
+      }
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames2;
+      var classes = classNames('ring-js-shortcuts', modules_2f9be069.tag, (_classNames2 = {}, _defineProperty(_classNames2, modules_2f9be069.focused, this.state.focused), _defineProperty(_classNames2, modules_2f9be069.disabled, this.props.disabled), _defineProperty(_classNames2, modules_2f9be069.tagAngled, this.props.angled), _defineProperty(_classNames2, modules_2f9be069.withRemove, !this.props.readOnly), _classNames2), this.props.className);
+      var _this$props = this.props,
+        backgroundColor = _this$props.backgroundColor,
+        textColor = _this$props.textColor,
+        render = _this$props.render;
+      return /*#__PURE__*/React.createElement("span", {
+        className: modules_2f9be069.container
+      }, render({
+        'data-test': 'ring-tag',
+        className: classes,
+        ref: this.tagRef,
+        onClick: this.props.onClick,
         style: {
-          '--ring-icon-secondary-color': this.props.textColor
+          backgroundColor: backgroundColor,
+          color: textColor
         },
-        height: ControlsHeight.M
-      });
+        disabled: this.props.disabled,
+        children: /*#__PURE__*/React.createElement(React.Fragment, null, this.renderAvatar(), this.renderCustomIcon(), this.renderImage(), /*#__PURE__*/React.createElement("span", {
+          className: modules_2f9be069.content
+        }, this.props.children))
+      }), this.renderRemoveIcon());
     }
-    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,
-      render
-    } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
-      className: modules_2f9be069.container
-    }, render({
-      'data-test': 'ring-tag',
-      className: classes,
-      ref: this.tagRef,
-      onClick: this.props.onClick,
-      style: {
-        backgroundColor,
-        color: textColor
-      },
-      disabled: this.props.disabled,
-      children: /*#__PURE__*/React.createElement(React.Fragment, null, this.renderAvatar(), this.renderCustomIcon(), this.renderImage(), /*#__PURE__*/React.createElement("span", {
-        className: modules_2f9be069.content
-      }, this.props.children))
-    }), this.renderRemoveIcon());
-  }
-}
+  }]);
+  return Tag;
+}(PureComponent);
 _defineProperty(Tag, "propTypes", {
   onRemove: PropTypes.func,
   onClick: PropTypes.func,
@@ -163,14 +193,16 @@ _defineProperty(Tag, "propTypes", {
   render: PropTypes.func
 });
 _defineProperty(Tag, "defaultProps", {
-  onRemove: () => {},
-  onClick: () => {},
+  onRemove: function onRemove() {},
+  onClick: function onClick() {},
   readOnly: false,
   disabled: false,
   focused: false,
-  render: props => /*#__PURE__*/React.createElement("button", _extends({
-    type: "button"
-  }, props))
+  render: function render(props) {
+    return /*#__PURE__*/React.createElement("button", _extends({
+      type: "button"
+    }, props));
+  }
 });
 
 export { Tag as default };

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

@@ -1,4 +1,4 @@
-import React, { Component, PureComponent, SyntheticEvent, ReactNode } from 'react';
+import React, { PureComponent, SyntheticEvent, ReactNode, ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import Select, { SelectItem } from '../select/select';
 import { TagType } from '../tags-list/tags-list';
@@ -6,6 +6,8 @@ import Caret from '../caret/caret';
 import { Size } from '../input/input';
 import { ControlsHeight } from '../global/controls-height';
 import { Filter } from '../select/select__popup';
+import { TagAttrs } from '../tag/tag';
+import { LabelType } from '../control-label/control-label';
 declare function noop(): void;
 export interface ToggleTagParams {
     tag: TagType;
@@ -17,7 +19,7 @@ export interface TagsInputProps {
     dataSource: (params: TagsInputRequestParams) => readonly SelectItem[] | Promise<readonly SelectItem[]>;
     onAddTag: (params: ToggleTagParams) => void;
     onRemoveTag: (params: ToggleTagParams) => void;
-    customTagComponent: Component;
+    customTagComponent: ComponentType<TagAttrs>;
     maxPopupHeight: number;
     minPopupWidth: number;
     canNotBeEmpty: boolean;
@@ -31,9 +33,11 @@ export interface TagsInputProps {
     tags?: readonly TagType[] | null | undefined;
     loadingMessage?: string | undefined;
     notFoundMessage?: string | undefined;
+    hint?: ReactNode | null | undefined;
     size: Size;
     height?: ControlsHeight | undefined;
     label?: ReactNode;
+    labelType?: LabelType;
 }
 interface TagsInputState {
     tags: TagType[];
@@ -73,6 +77,7 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
         label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         loadingMessage: PropTypes.Requireable<string>;
         notFoundMessage: PropTypes.Requireable<string>;
+        hint: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         allowAddNewTags: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
@@ -113,7 +118,7 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     addTag: (tag: TagType | null) => void;
     onRemoveTag(tagToRemove: TagType): Promise<void | TagType[]>;
     clickHandler: (event: SyntheticEvent) => void;
-    filterExistingTags: (suggestions: readonly SelectItem[]) => SelectItem<unknown>[];
+    filterExistingTags: (suggestions: readonly SelectItem[]) => SelectItem[];
     loadSuggestions: (query?: string) => void;
     private _focusHandler;
     private _blurHandler;
@@ -124,7 +129,7 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     handleTagCreation: (label: string) => void;
     select?: Select | null;
     selectRef: (el: Select | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const RerenderableTagsInput: {
     new (props: TagsInputProps): {