@jetbrains/ring-ui-built 7.0.61 → 7.0.63

package/components/tabs/collapsible-tabs.js

@@ -11,7 +11,7 @@ import getTabTitles from './collapsible-tab.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import '../link/link.js';
 import '../global/data-tests.js';
-import '../link/clickableLink.js';
+import '../link/clickable-link.js';
 import '../_helpers/link.js';
 import '../popup/popup.consts.js';
 import '../popup-menu/popup-menu.js';
@@ -42,7 +42,7 @@ import 'util-deprecate';
 import 'memoize-one';
 import '../global/memoize.js';
 import '../global/create-stateful-context.js';
-import '../list/list__item.js';
+import '../list/list-item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
 import '../_helpers/avatar-info.js';
@@ -52,18 +52,18 @@ import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../icon/icon.js';
-import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
-import '../global/composeRefs.js';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import '../global/compose-refs.js';
 import '../control-help/control-help.js';
 import '../_helpers/list.js';
 import '../list/consts.js';
-import '../list/list__classes.js';
-import '../list/list__custom.js';
+import '../list/list.classes.js';
+import '../list/list-custom.js';
 import '../global/get-event-key.js';
-import '../list/list__title.js';
-import '../list/list__separator.js';
-import '../list/list__hint.js';
+import '../list/list-title.js';
+import '../list/list-separator.js';
+import '../list/list-hint.js';
 import '../dropdown/dropdown.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
@@ -71,7 +71,7 @@ import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../global/controls-height.js';
-import '../_helpers/button__classes.js';
+import '../_helpers/button.classes.js';
 import './custom-item.js';
 
 const DEFAULT_DEBOUNCE_INTERVAL = 100;
@@ -123,11 +123,11 @@ const CollapsibleTabs = _ref => {
   const hiddenElements = useMemo(() => {
     if (preparedElements.ready) {
       return preparedElements.hidden;
-    } else if (initialVisibleItems) {
+    }
+    if (initialVisibleItems) {
       return children.filter(item => !visibleElements.some(visibleItem => visibleItem.props.child === item));
-    } else {
-      return [];
     }
+    return [];
   }, [children, preparedElements.hidden, preparedElements.ready, visibleElements, initialVisibleItems]);
   const adjustTabs = useCallback(entry => {
     const containerWidth = entry.contentRect.width;
@@ -191,11 +191,11 @@ const CollapsibleTabs = _ref => {
       }, {
         visible: [],
         hidden: [],
-        ready: elements.lastVisibleIndex !== null
+        ready: !!elements.lastVisibleIndex
       });
       if (selectedIndex > ((_elements$lastVisible2 = elements.lastVisibleIndex) !== null && _elements$lastVisible2 !== void 0 ? _elements$lastVisible2 : 0)) {
         const selectedItem = children.find(tab => !tab.props.alwaysHidden && tab.props.id === selected);
-        if (selectedItem != null) {
+        if (selectedItem) {
           res.visible.push(selectedItem);
         }
       }
@@ -219,7 +219,7 @@ const CollapsibleTabs = _ref => {
   }, [children]);
   // Initial measure for tabs and more button sizes
   useEffect(() => {
-    if (measureRef.current == null) {
+    if (measureRef.current === null) {
       return undefined;
     }
     const measureTask = fastdom.measure(() => {
@@ -272,7 +272,7 @@ const CollapsibleTabs = _ref => {
       resizeObserver.disconnect();
     };
   }, [adjustTabs]);
-  const isAdjusted = elements.lastVisibleIndex !== null && preparedElements.ready === true || initialVisibleItems;
+  const isAdjusted = !!elements.lastVisibleIndex && preparedElements.ready || initialVisibleItems;
   const className = classNames(styles.titles, styles.autoCollapse, isAdjusted && styles.adjusted);
   return jsxs("div", {
     className: styles.autoCollapseContainer,

package/components/tabs/custom-item.d.ts

@@ -1,3 +1,3 @@
-import { ReactElement } from 'react';
-import { TabProps } from './tab';
+import { type ReactElement } from 'react';
+import { type TabProps } from './tab';
 export declare const CustomItem: ({ children }: TabProps) => ReactElement;

package/components/tabs/dumb-tabs.d.ts

@@ -1,8 +1,8 @@
-import { PureComponent, ReactElement } from 'react';
+import { PureComponent, type ReactElement } from 'react';
 import * as React from 'react';
-import { CollapsibleTabsProps } from './collapsible-tabs';
+import { type CollapsibleTabsProps } from './collapsible-tabs';
 import { CustomItem } from './custom-item';
-import { TabProps } from './tab';
+import { type TabProps } from './tab';
 export { CustomItem };
 export type Children = readonly (Children | null | boolean)[] | ReactElement<TabProps> | null | boolean;
 export interface TabsProps extends Omit<CollapsibleTabsProps, 'onSelect' | 'children'> {

package/components/tabs/dumb-tabs.js

@@ -10,7 +10,7 @@ import { s as styles, T as TabLink } from '../_helpers/tab-link.js';
 import CollapsibleTabs from './collapsible-tabs.js';
 import { CustomItem } from './custom-item.js';
 import '../link/link.js';
-import '../link/clickableLink.js';
+import '../link/clickable-link.js';
 import '../_helpers/link.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
@@ -44,7 +44,7 @@ import 'react-virtualized/dist/es/CellMeasurer';
 import 'util-deprecate';
 import 'memoize-one';
 import '../global/create-stateful-context.js';
-import '../list/list__item.js';
+import '../list/list-item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
 import '../_helpers/avatar-info.js';
@@ -54,18 +54,18 @@ import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../icon/icon.js';
-import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
-import '../global/composeRefs.js';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import '../global/compose-refs.js';
 import '../control-help/control-help.js';
 import '../_helpers/list.js';
 import '../list/consts.js';
-import '../list/list__classes.js';
-import '../list/list__custom.js';
+import '../list/list.classes.js';
+import '../list/list-custom.js';
 import '../global/get-event-key.js';
-import '../list/list__title.js';
-import '../list/list__separator.js';
-import '../list/list__hint.js';
+import '../list/list-title.js';
+import '../list/list-separator.js';
+import '../list/list-hint.js';
 import '../dropdown/dropdown.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
@@ -73,7 +73,7 @@ import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../global/controls-height.js';
-import '../_helpers/button__classes.js';
+import '../_helpers/button.classes.js';
 import './collapsible-tab.js';
 
 const _excluded = ["className", "tabContainerClassName", "children", "selected", "autoCollapse", "data-test", "onSelect"];
@@ -85,7 +85,7 @@ class Tabs extends PureComponent {
       return (_this$props$onSelect = (_this$props = this.props).onSelect) === null || _this$props$onSelect === void 0 ? void 0 : _this$props$onSelect.call(_this$props, key);
     }));
     _defineProperty(this, "getTabTitle", (child, i) => {
-      if (child == null || typeof child !== 'object' || child.type === CustomItem) {
+      if (child === null || typeof child !== 'object' || child.type === CustomItem) {
         return child;
       }
       const {
@@ -112,7 +112,7 @@ class Tabs extends PureComponent {
         href: href,
         className: titleClasses,
         disabled: disabled,
-        onPlainLeftClick: onSelect != null ? this.handleSelect(key) : undefined
+        onPlainLeftClick: onSelect ? this.handleSelect(key) : undefined
       }, titleProps), key);
     });
   }
@@ -134,7 +134,7 @@ class Tabs extends PureComponent {
       className: classes,
       "data-test": joinDataTestAttributes('ring-dumb-tabs', dataTest),
       children: [autoCollapse === true ? jsx(CollapsibleTabs, _objectSpread2(_objectSpread2({}, restProps), {}, {
-        onSelect: onSelect != null ? this.handleSelect : undefined,
+        onSelect: onSelect ? this.handleSelect : undefined,
         selected: selected,
         children: childrenArray
       })) : jsx("div", {

package/components/tabs/smart-tabs.d.ts

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import { TabsAttrs, Children } from './dumb-tabs';
+import { type TabsAttrs, type Children } from './dumb-tabs';
 export interface SmartTabsProps extends TabsAttrs {
     children: Children;
     initSelected?: string | null | undefined;

package/components/tabs/smart-tabs.js

@@ -8,7 +8,7 @@ import 'classnames';
 import '../global/memoize.js';
 import '../_helpers/tab-link.js';
 import '../link/link.js';
-import '../link/clickableLink.js';
+import '../link/clickable-link.js';
 import '../_helpers/link.js';
 import './collapsible-tabs.js';
 import 'core-js/modules/es.regexp.exec.js';
@@ -43,7 +43,7 @@ import 'react-virtualized/dist/es/CellMeasurer';
 import 'util-deprecate';
 import 'memoize-one';
 import '../global/create-stateful-context.js';
-import '../list/list__item.js';
+import '../list/list-item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
 import '../_helpers/avatar-info.js';
@@ -53,18 +53,18 @@ import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../icon/icon.js';
-import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
-import '../global/composeRefs.js';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import '../global/compose-refs.js';
 import '../control-help/control-help.js';
 import '../_helpers/list.js';
 import '../list/consts.js';
-import '../list/list__classes.js';
-import '../list/list__custom.js';
+import '../list/list.classes.js';
+import '../list/list-custom.js';
 import '../global/get-event-key.js';
-import '../list/list__title.js';
-import '../list/list__separator.js';
-import '../list/list__hint.js';
+import '../list/list-title.js';
+import '../list/list-separator.js';
+import '../list/list-hint.js';
 import '../dropdown/dropdown.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
@@ -72,7 +72,7 @@ import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../global/controls-height.js';
-import '../_helpers/button__classes.js';
+import '../_helpers/button.classes.js';
 import './collapsible-tab.js';
 import './custom-item.js';
 

package/components/tabs/tab-link.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { LinkProps } from '../link/link';
+import { type ReactNode } from 'react';
+import { type LinkProps } from '../link/link';
 export interface TabLinkProps extends Omit<LinkProps, 'title' | 'children'> {
     isSelected: boolean;
     collapsed?: boolean;

package/components/tabs/tab-link.js

@@ -6,5 +6,5 @@ export { T as default } from '../_helpers/tab-link.js';
 import 'classnames';
 import '../global/data-tests.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import '../link/clickableLink.js';
+import '../link/clickable-link.js';
 import '../_helpers/link.js';

package/components/tabs/tab.d.ts

@@ -1,5 +1,5 @@
-import { PureComponent, ReactNode } from 'react';
-import { TabLinkProps } from './tab-link';
+import { PureComponent, type ReactNode } from 'react';
+import { type TabLinkProps } from './tab-link';
 export interface TabProps {
     title?: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
     titleProps?: Partial<TabLinkProps>;

package/components/tabs/tabs.js

@@ -11,7 +11,7 @@ import '../global/memoize.js';
 import '../global/data-tests.js';
 import '../_helpers/tab-link.js';
 import '../link/link.js';
-import '../link/clickableLink.js';
+import '../link/clickable-link.js';
 import '../_helpers/link.js';
 import './collapsible-tabs.js';
 import 'core-js/modules/es.regexp.exec.js';
@@ -46,7 +46,7 @@ import 'react-virtualized/dist/es/CellMeasurer';
 import 'util-deprecate';
 import 'memoize-one';
 import '../global/create-stateful-context.js';
-import '../list/list__item.js';
+import '../list/list-item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
 import '../_helpers/avatar-info.js';
@@ -56,18 +56,18 @@ import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../icon/icon.js';
-import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
-import '../global/composeRefs.js';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import '../global/compose-refs.js';
 import '../control-help/control-help.js';
 import '../_helpers/list.js';
 import '../list/consts.js';
-import '../list/list__classes.js';
-import '../list/list__custom.js';
+import '../list/list.classes.js';
+import '../list/list-custom.js';
 import '../global/get-event-key.js';
-import '../list/list__title.js';
-import '../list/list__separator.js';
-import '../list/list__hint.js';
+import '../list/list-title.js';
+import '../list/list-separator.js';
+import '../list/list-hint.js';
 import '../dropdown/dropdown.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
@@ -75,5 +75,5 @@ import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../global/controls-height.js';
-import '../_helpers/button__classes.js';
+import '../_helpers/button.classes.js';
 import './collapsible-tab.js';

package/components/tag/tag.d.ts

@@ -1,11 +1,19 @@
-import { HTMLAttributes, PureComponent, ReactNode, RefCallback } from 'react';
+import { type HTMLAttributes, PureComponent, type ReactNode, type RefCallback } from 'react';
 import * as React from 'react';
-import { IconType } from '../icon/icon';
+import { type IconType } from '../icon/icon';
 export interface TagRenderProps extends HTMLAttributes<HTMLElement> {
     disabled: boolean;
     ref: RefCallback<HTMLElement>;
     'data-test': string;
 }
+export declare enum TagType {
+    DEFAULT = "default",
+    MAIN = "main",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error",
+    PURPLE = "purple"
+}
 export interface TagProps {
     onRemove?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
@@ -22,6 +30,8 @@ export interface TagProps {
     rgTagTitle?: string | undefined;
     textColor?: string | undefined;
     backgroundColor?: string | undefined;
+    outline?: boolean;
+    tagType?: TagType;
 }
 /**
  * @name Tag
@@ -33,6 +43,7 @@ export default class Tag extends PureComponent<TagProps> {
     };
     componentDidUpdate(prevProps: TagProps): void;
     componentWillUnmount(): void;
+    static Type: typeof TagType;
     onDocumentClick: (event: MouseEvent) => void;
     tagNode?: HTMLElement | null;
     tagRef: (el: HTMLElement | null) => void;

package/components/tag/tag.js

@@ -9,18 +9,27 @@ import { Button } from '../button/button.js';
 import '../global/controls-height.js';
 import { ControlsHeight } from '../global/configuration.js';
 import 'util-deprecate';
-import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
+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';
-import '../link/clickableLink.js';
-import '../_helpers/button__classes.js';
+import '../link/clickable-link.js';
+import '../_helpers/button.classes.js';
 
-var styles = {"container":"ring-tag-container","tag":"ring-tag-tag ring-global-resetButton","withRemove":"ring-tag-withRemove","focused":"ring-tag-focused","content":"ring-tag-content ring-global-ellipsis","disabled":"ring-tag-disabled","remove":"ring-tag-remove","removeIcon":"ring-tag-removeIcon","icon":"ring-tag-icon","avatarContainer":"ring-tag-avatarContainer","customIcon":"ring-tag-customIcon","avatarIcon":"ring-tag-avatarIcon"};
+var styles = {"container":"ring-tag-container","tag":"ring-tag-tag ring-global-resetButton","withRemove":"ring-tag-withRemove","default":"ring-tag-default","main":"ring-tag-main","success":"ring-tag-success","warning":"ring-tag-warning","error":"ring-tag-error","purple":"ring-tag-purple","outline":"ring-tag-outline","focused":"ring-tag-focused","content":"ring-tag-content ring-global-ellipsis","disabled":"ring-tag-disabled","remove":"ring-tag-remove","icon":"ring-tag-icon","avatarContainer":"ring-tag-avatarContainer","customIcon":"ring-tag-customIcon","avatarIcon":"ring-tag-avatarIcon"};
 
+var TagType;
+(function (TagType) {
+  TagType["DEFAULT"] = "default";
+  TagType["MAIN"] = "main";
+  TagType["SUCCESS"] = "success";
+  TagType["WARNING"] = "warning";
+  TagType["ERROR"] = "error";
+  TagType["PURPLE"] = "purple";
+})(TagType || (TagType = {}));
 /**
  * @name Tag
  */
@@ -106,11 +115,10 @@ class Tag extends PureComponent {
   renderRemoveIcon() {
     if (!this.props.readOnly && this.props.onRemove) {
       return jsx(Button, {
-        title: "Remove",
+        title: 'Remove',
         icon: closeIcon,
-        "data-test": "ring-tag-remove",
+        "data-test": 'ring-tag-remove',
         className: styles.remove,
-        iconClassName: styles.removeIcon,
         onClick: this.props.onRemove,
         style: {
           '--ring-secondary-color': this.props.textColor
@@ -132,7 +140,9 @@ class Tag extends PureComponent {
       render
     } = this.props;
     return jsxs("span", {
-      className: classNames(styles.container, this.props.containerClassName),
+      className: classNames(styles.container, this.props.containerClassName, styles[this.props.tagType], {
+        [styles.outline]: this.props.outline
+      }),
       children: [render({
         'data-test': 'ring-tag',
         className: classes,
@@ -159,8 +169,10 @@ _defineProperty(Tag, "defaultProps", {
   disabled: false,
   focused: false,
   render: props => jsx("button", _objectSpread2({
-    type: "button"
-  }, props))
+    type: 'button'
+  }, props)),
+  tagType: TagType.DEFAULT
 });
+_defineProperty(Tag, "Type", TagType);
 
-export { Tag as default };
+export { TagType, Tag as default };

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

@@ -1,13 +1,13 @@
-import { PureComponent, SyntheticEvent, ReactNode, ComponentType } from 'react';
+import { PureComponent, type SyntheticEvent, type ReactNode, type ComponentType } from 'react';
 import * as React from 'react';
-import Select, { SelectItem } from '../select/select';
-import { TagType } from '../tags-list/tags-list';
+import Select, { type SelectItem } from '../select/select';
+import { type TagType } from '../tags-list/tags-list';
 import Caret from '../caret/caret';
 import { Size } from '../input/input';
-import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
-import { Filter } from '../select/select__popup';
-import { TagAttrs } from '../tag/tag';
-import { LabelType } from '../control-label/control-label';
+import { type ControlsHeight, ControlsHeightContext } from '../global/controls-height';
+import { type Filter } from '../select/select-popup';
+import { type TagAttrs } from '../tag/tag';
+import { type LabelType } from '../control-label/control-label';
 declare function noop(): void;
 export interface ToggleTagParams {
     tag: TagType;
@@ -104,7 +104,7 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     handleKeyDown: (event: React.KeyboardEvent) => boolean;
     handleClick: (arg: TagType) => () => void;
     handleRemove: (arg: TagType) => () => Promise<void | TagType[]>;
-    handleTagCreation: (label: string) => void;
+    handleTagCreation: (label: string | undefined) => void;
     select?: Select | null;
     selectRef: (el: Select | null) => void;
     render(): import("react/jsx-runtime").JSX.Element;

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

@@ -27,10 +27,10 @@ import '../button/button.js';
 import '@jetbrains/icons/chevron-12px-down';
 import 'util-deprecate';
 import '../icon/icon.js';
-import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
-import '../link/clickableLink.js';
-import '../_helpers/button__classes.js';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import '../link/clickable-link.js';
+import '../_helpers/button.classes.js';
 import '../global/configuration.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
@@ -60,30 +60,30 @@ import 'react-virtualized/dist/es/WindowScroller';
 import 'react-virtualized/dist/es/CellMeasurer';
 import 'memoize-one';
 import '../global/create-stateful-context.js';
-import '../list/list__item.js';
+import '../list/list-item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
-import '../global/composeRefs.js';
+import '../global/compose-refs.js';
 import '../control-help/control-help.js';
 import '../link/link.js';
 import '../_helpers/link.js';
 import '../_helpers/list.js';
 import '../list/consts.js';
-import '../list/list__classes.js';
-import '../list/list__custom.js';
-import '../list/list__title.js';
-import '../list/list__separator.js';
-import '../list/list__hint.js';
+import '../list/list.classes.js';
+import '../list/list-custom.js';
+import '../list/list-title.js';
+import '../list/list-separator.js';
+import '../list/list-hint.js';
 import '../global/fuzzy-highlight.js';
 import '../i18n/i18n-context.js';
 import '../i18n/i18n.js';
-import '../select/select__popup.js';
+import '../select/select-popup.js';
 import '@jetbrains/icons/search';
 import '../loader-inline/loader-inline.js';
 import '../shortcuts/shortcuts-hoc.js';
 import '../text/text.js';
-import '../_helpers/select__filter.js';
+import '../_helpers/select-filter.js';
 import '../tag/tag.js';
 
 var styles = {"outerContainer":"ring-input-outerContainer","container":"ring-input-container","input":"ring-input-input","tagsInput":"ring-tags-input-tagsInput","tagsInputDisabled":"ring-tags-input-tagsInputDisabled","tagsInputFocused":"ring-tags-input-tagsInputFocused","tagsList":"ring-tags-input-tagsList","tagsSelect":"ring-tags-input-tagsSelect"};
@@ -124,7 +124,7 @@ class TagsInput extends PureComponent {
     });
     _defineProperty(this, "addTag", tag => {
       var _this$select, _this$select2;
-      if (tag == null) {
+      if (tag === null) {
         return;
       }
       const isUniqueTag = this.state.tags.filter(item => tag.key === item.key).length === 0;
@@ -145,6 +145,7 @@ class TagsInput extends PureComponent {
       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 => {
@@ -199,6 +200,7 @@ class TagsInput extends PureComponent {
         this.setActiveIndex(newActiveIndex);
       }
     });
+    // eslint-disable-next-line complexity
     _defineProperty(this, "handleKeyDown", event => {
       var _this$select4;
       const key = getEventKey(event);
@@ -210,16 +212,18 @@ class TagsInput extends PureComponent {
         var _this$getInputNode3;
         event.stopPropagation();
         const value = (_this$getInputNode3 = this.getInputNode()) === null || _this$getInputNode3 === void 0 ? void 0 : _this$getInputNode3.value;
-        if (value != null && 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') {
-        if (this.getInputNode() && this.caret != null && Number(this.caret.getPosition()) > 0) {
+        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();
@@ -243,11 +247,12 @@ class TagsInput extends PureComponent {
           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 != null && this.state.tags[this.state.activeIndex]) {
+        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;
         }
@@ -280,10 +285,10 @@ class TagsInput extends PureComponent {
     const nextState = {
       prevTags: tags
     };
-    if (tags != null && tags !== prevTags) {
+    if (tags && tags !== prevTags) {
       Object.assign(nextState, {
         tags,
-        activeIndex: tags.length
+        activeIndex: tags === null || tags === void 0 ? void 0 : tags.length
       });
     }
     return nextState;
@@ -293,6 +298,7 @@ class TagsInput extends PureComponent {
       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();
     }
   }
@@ -347,7 +353,7 @@ class TagsInput extends PureComponent {
     }, this.props.className);
     return jsxs("div", {
       // it transfers focus to input
-      role: "presentation",
+      role: 'presentation',
       className: classes,
       onKeyDown: this.handleKeyDown,
       onClick: this.clickHandler,

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

@@ -1,6 +1,6 @@
-import { Component, ComponentType, HTMLAttributes, ReactNode } from 'react';
+import { Component, type ComponentType, type HTMLAttributes, type ReactNode } from 'react';
 import * as React from 'react';
-import { TagAttrs } from '../tag/tag';
+import { type TagAttrs } from '../tag/tag';
 declare function noop(): void;
 export interface TagType extends Omit<TagAttrs, 'onClick' | 'children'> {
     label?: ReactNode;