@jetbrains/ring-ui 7.0.61 → 7.0.63

package/components/tabs/collapsible-tab.js

@@ -5,7 +5,7 @@ import styles from './tabs.css';
 import TabLink from './tab-link';
 import { CustomItem } from './custom-item';
 const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect, collapsed = false, tabIndex, }) {
-    if (child == null || typeof child !== 'object' || child.type === CustomItem) {
+    if (child === null || typeof child !== 'object' || child.type === CustomItem) {
         return child;
     }
     const { title, titleProps, disabled, href, className, activeClassName, collapsedClassName, collapsedActiveClassName } = child.props;

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

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from 'react';
-import { TabProps } from './tab';
+import { type ReactElement, type ReactNode } from 'react';
+import { type TabProps } from './tab';
 export interface CollapsibleTabsProps {
     children: ReactElement<TabProps>[];
     selected?: string | undefined;

package/components/tabs/collapsible-tabs.js

@@ -37,12 +37,10 @@ export const CollapsibleTabs = ({ children, selected, onSelect, onLastVisibleInd
         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;
@@ -102,10 +100,10 @@ export const CollapsibleTabs = ({ children, selected, onSelect, onLastVisibleInd
                     accumulator.hidden.push(tab);
                 }
                 return accumulator;
-            }, { visible: [], hidden: [], ready: elements.lastVisibleIndex !== null });
+            }, { visible: [], hidden: [], ready: !!elements.lastVisibleIndex });
             if (selectedIndex > (elements.lastVisibleIndex ?? 0)) {
                 const selectedItem = children.find(tab => !tab.props.alwaysHidden && tab.props.id === selected);
-                if (selectedItem != null) {
+                if (selectedItem) {
                     res.visible.push(selectedItem);
                 }
             }
@@ -128,7 +126,7 @@ export const CollapsibleTabs = ({ children, selected, onSelect, onLastVisibleInd
     }, [children]);
     // Initial measure for tabs and more button sizes
     useEffect(() => {
-        if (measureRef.current == null) {
+        if (measureRef.current === null) {
             return undefined;
         }
         const measureTask = fastdom.measure(() => {
@@ -173,7 +171,7 @@ export const CollapsibleTabs = ({ children, selected, onSelect, onLastVisibleInd
             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, children: [_jsxs("div", { className: classNames(className, styles.rendered), children: [visibleElements, _jsx(MoreButton, { moreClassName: moreClassName, moreActiveClassName: moreActiveClassName, morePopupClassName: morePopupClassName, morePopupBeforeEnd: morePopupBeforeEnd, morePopupItemClassName: morePopupItemClassName, items: hiddenElements, selected: selected, onSelect: onSelect })] }), _jsxs("div", { ref: measureRef, className: classNames(className, styles.measure), children: [childrenToMeasure, _jsx(FakeMoreButton, { hasActiveChildren: hiddenElements.some(item => item.props.alwaysHidden && item.props.id === selected), moreClassName: moreClassName, moreActiveClassName: moreActiveClassName })] })] }));
 };

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

@@ -12,7 +12,7 @@ export { CustomItem };
 class Tabs extends PureComponent {
     handleSelect = memoize((key) => () => this.props.onSelect?.(key));
     getTabTitle = (child, i) => {
-        if (child == null || typeof child !== 'object' || child.type === CustomItem) {
+        if (child === null || typeof child !== 'object' || child.type === CustomItem) {
             return child;
         }
         const { selected, onSelect } = this.props;
@@ -22,13 +22,13 @@ class Tabs extends PureComponent {
         const titleClasses = classNames(styles.title, className, isSelected && activeClassName, {
             [styles.selected]: isSelected,
         });
-        return (_jsx(TabLink, { title: title, isSelected: isSelected, href: href, className: titleClasses, disabled: disabled, onPlainLeftClick: onSelect != null ? this.handleSelect(key) : undefined, ...titleProps }, key));
+        return (_jsx(TabLink, { title: title, isSelected: isSelected, href: href, className: titleClasses, disabled: disabled, onPlainLeftClick: onSelect ? this.handleSelect(key) : undefined, ...titleProps }, key));
     };
     render() {
         const { className, tabContainerClassName, children, selected, autoCollapse, 'data-test': dataTest, onSelect, ...restProps } = this.props;
         const classes = classNames(styles.tabs, className);
         const childrenArray = React.Children.toArray(children).filter(Boolean);
-        return (_jsxs("div", { className: classes, "data-test": dataTests('ring-dumb-tabs', dataTest), children: [autoCollapse === true ? (_jsx(CollapsibleTabs, { ...restProps, onSelect: onSelect != null ? this.handleSelect : undefined, selected: selected, children: childrenArray })) : (_jsx("div", { className: styles.titles, children: childrenArray.map(this.getTabTitle) })), _jsx("div", { className: classNames(tabContainerClassName), children: childrenArray.find(({ props }, i) => (props.id || String(i)) === selected) })] }));
+        return (_jsxs("div", { className: classes, "data-test": dataTests('ring-dumb-tabs', dataTest), children: [autoCollapse === true ? (_jsx(CollapsibleTabs, { ...restProps, onSelect: onSelect ? this.handleSelect : undefined, selected: selected, children: childrenArray })) : (_jsx("div", { className: styles.titles, children: childrenArray.map(this.getTabTitle) })), _jsx("div", { className: classNames(tabContainerClassName), children: childrenArray.find(({ props }, i) => (props.id || String(i)) === selected) })] }));
     }
 }
 export default Tabs;

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/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.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.css

@@ -1,7 +1,7 @@
-@import "../global/variables.css";
+@import '../global/variables.css';
 
 /* ensure styles order */
-@import "../link/link.css";
+@import '../link/link.css';
 
 :root,
 :host {
@@ -16,7 +16,7 @@
   --ring-tabs-line-shadow: inset 0 -1px 0 0;
   --ring-tabs-selected-line-shadow: inset 0 -2px 0 0;
 
-  composes: font from "../global/global.css";
+  composes: font from '../global/global.css';
 }
 
 .titles {
@@ -34,7 +34,7 @@
 }
 
 .title {
-  composes: font from "../global/global.css";
+  composes: font from '../global/global.css';
 
   position: relative;
 
@@ -46,7 +46,7 @@
 
   color: inherit;
 
-  border: none;
+  border: 0;
   border-radius: 0;
   background: none;
 
@@ -191,7 +191,7 @@
 .collapsed.collapsed {
   width: 100%;
 
-  border-bottom: none;
+  border-bottom: 0;
   box-shadow: none;
 
   line-height: calc(var(--ring-unit) * 3);

package/components/tag/tag.css

@@ -1,12 +1,21 @@
-@import "../global/variables.css";
+@import '../global/variables.css';
 
 /* ensure styles order */
-@import "../link/link.css";
+@import '../link/link.css';
+
+:root,
+:host {
+  --ring-error-tag-text-color: var(--ring-main-error-hover-color);
+}
+
+:global(.ring-ui-theme-dark) {
+  --ring-error-tag-text-color: var(--ring-error-color);
+}
 
 .tag {
   --ring-tag-max-height: 20px;
 
-  composes: resetButton from "../global/global.css";
+  composes: resetButton from '../global/global.css';
 
   position: relative;
   z-index: 1;
@@ -23,9 +32,9 @@
 
   vertical-align: top;
 
-  color: var(--ring-text-color);
+  color: var(--ring-tag-text-color);
 
-  border: none;
+  border: 0;
   border-radius: var(--ring-border-radius);
 
   font-size: 12px;
@@ -52,8 +61,80 @@
 
   border-radius: var(--ring-border-radius);
 
-  background-color: var(--ring-tag-background-color);
+  background-color: var(--ring-tag-container-background-color);
+}
+
+.default {
+  --ring-tag-container-background-color: var(--ring-tag-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-tag-hover-background-color);
+  --ring-tag-text-color: var(--ring-text-color);
+  --ring-tag-icon-color: var(--ring-secondary-color);
+  --ring-tag-container-outline-background-color: var(--ring-grey-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-tag-background-color);
+  --ring-tag-outline-color: var(--ring-line-color);
+  --ring-tag-outline-hover-color: var(--ring-borders-color);
+}
+
+.main {
+  --ring-tag-container-background-color: var(--ring-hover-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-selected-background-color);
+  --ring-tag-text-color: var(--ring-link-color);
+  --ring-tag-icon-color: var(--ring-link-color);
+  --ring-tag-container-outline-background-color: var(--ring-main-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-hover-background-color);
+  --ring-tag-outline-color: var(--ring-border-hover-color);
+  --ring-tag-outline-hover-color: var(--ring-border-accent-color);
+}
 
+.success {
+  --ring-tag-container-background-color: var(--ring-added-subtle-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-added-background-color);
+  --ring-tag-text-color: var(--ring-success-color);
+  --ring-tag-icon-color: var(--ring-icon-success-color);
+  --ring-tag-container-outline-background-color: var(--ring-success-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-added-subtle-background-color);
+  --ring-tag-outline-color: var(--ring-success-border-color);
+  --ring-tag-outline-hover-color: var(--ring-success-border-hover-color);
+}
+
+.warning {
+  --ring-tag-container-background-color: var(--ring-warning-subtle-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-warning-background-color);
+  --ring-tag-text-color: var(--ring-warning-color);
+  --ring-tag-icon-color: var(--ring-icon-warning-color);
+  --ring-tag-container-outline-background-color: var(--ring-warning-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-warning-subtle-background-color);
+  --ring-tag-outline-color: var(--ring-warning-border-color);
+  --ring-tag-outline-hover-color: var(--ring-warning-border-hover-color);
+}
+
+.error {
+  --ring-tag-container-background-color: var(--ring-removed-subtle-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-removed-background-color);
+  --ring-tag-text-color: var(--ring-error-tag-text-color);
+  --ring-tag-icon-color: var(--ring-icon-error-color);
+  --ring-tag-container-outline-background-color: var(--ring-error-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-removed-subtle-background-color);
+  --ring-tag-outline-color: var(--ring-error-border-color);
+  --ring-tag-outline-hover-color: var(--ring-error-border-hover-color);
+}
+
+.purple {
+  --ring-tag-container-background-color: var(--ring-purple-subtle-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-purple-background-color);
+  --ring-tag-text-color: var(--ring-purple-text-color);
+  --ring-tag-icon-color: var(--ring-main-purple-color);
+  --ring-tag-container-outline-background-color: var(--ring-purple-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-purple-subtle-background-color);
+  --ring-tag-outline-color: var(--ring-purple-border-color);
+  --ring-tag-outline-hover-color: var(--ring-purple-border-hover-color);
+}
+
+.outline {
+  --ring-tag-container-background-color: var(--ring-tag-container-outline-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-tag-container-outline-hover-background-color);
+
+  box-shadow: inset 0 0 0 1px var(--ring-tag-outline-color);
 }
 
 .focused,
@@ -67,13 +148,14 @@
 .focused,
 .tag:focus-visible,
 .container:hover {
-  transition: none;
+  --ring-tag-outline-color: var(--ring-tag-outline-hover-color);
+  --ring-tag-container-background-color: var(--ring-tag-container-hover-background-color);
 
-  background-color: var(--ring-tag-hover-background-color);
+  transition: none;
 }
 
 .content {
-  composes: ellipsis from "../global/global.css";
+  composes: ellipsis from '../global/global.css';
 }
 
 .disabled.tag {
@@ -84,6 +166,8 @@
 }
 
 .remove {
+  --ring-button-text-color: var(--ring-secondary-color);
+
   position: absolute;
   z-index: 1;
   top: 2px;
@@ -95,15 +179,11 @@
   line-height: calc(var(--ring-unit) * 2);
 }
 
-.removeIcon.removeIcon {
-  color: var(--ring-secondary-color);
-}
-
 .icon {
   margin-right: calc(var(--ring-unit) / 2);
   margin-left: calc(var(--ring-unit) * -0.5);
 
-  color: var(--ring-secondary-color);
+  color: var(--ring-tag-icon-color);
 
   && svg {
     vertical-align: -3.5px;

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

@@ -6,6 +6,15 @@ import Icon from '../icon/icon';
 import Button from '../button/button';
 import { ControlsHeight } from '../global/controls-height';
 import styles from './tag.css';
+export 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
  */
@@ -15,7 +24,8 @@ export default class Tag extends PureComponent {
         readOnly: false,
         disabled: false,
         focused: false,
-        render: props => _jsx("button", { type: "button", ...props }),
+        render: props => _jsx("button", { type: 'button', ...props }),
+        tagType: TagType.DEFAULT,
     };
     state = {
         focused: false,
@@ -33,6 +43,7 @@ export default class Tag extends PureComponent {
         this.setDocumentClickListener(false);
         this.setState({ focused: false });
     }
+    static Type = TagType;
     onDocumentClick = (event) => {
         if (this.tagNode) {
             this.setState({ focused: this.tagNode === event.target });
@@ -77,7 +88,7 @@ export default class Tag extends PureComponent {
     }
     renderRemoveIcon() {
         if (!this.props.readOnly && this.props.onRemove) {
-            return (_jsx(Button, { title: "Remove", icon: closeIcon, "data-test": "ring-tag-remove", className: styles.remove, iconClassName: styles.removeIcon, onClick: this.props.onRemove, style: { '--ring-secondary-color': this.props.textColor }, height: ControlsHeight.M }));
+            return (_jsx(Button, { title: 'Remove', icon: closeIcon, "data-test": 'ring-tag-remove', className: styles.remove, onClick: this.props.onRemove, style: { '--ring-secondary-color': this.props.textColor }, height: ControlsHeight.M }));
         }
         return null;
     }
@@ -88,7 +99,9 @@ export default class Tag extends PureComponent {
             [styles.withRemove]: !this.props.readOnly && this.props.onRemove,
         }, this.props.className);
         const { backgroundColor, textColor, render } = this.props;
-        return (_jsxs("span", { className: classNames(styles.container, this.props.containerClassName), children: [render({
+        return (_jsxs("span", { className: classNames(styles.container, this.props.containerClassName, styles[this.props.tagType], {
+                [styles.outline]: this.props.outline,
+            }), children: [render({
                     'data-test': 'ring-tag',
                     className: classes,
                     ref: this.tagRef,

package/components/tags-input/tags-input.css

@@ -1,6 +1,6 @@
-@import "../global/variables.css";
+@import '../global/variables.css';
 
-@value outerContainer, container, input from "../input/input.css";
+@value outerContainer, container, input from '../input/input.css';
 
 .tagsInput {
   --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
@@ -60,7 +60,7 @@
 
   caret-color: var(--ring-main-color);
 
-  [dir="rtl"] & {
+  [dir='rtl'] & {
     padding-right: var(--ring-input-padding-start);
     padding-left: var(--ring-input-padding-end);
   }

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-lines */
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import getEventKey from '../global/get-event-key';
@@ -50,8 +51,8 @@ export default class TagsInput extends PureComponent {
     };
     static getDerivedStateFromProps({ tags }, { prevTags }) {
         const nextState = { prevTags: tags };
-        if (tags != null && tags !== prevTags) {
-            Object.assign(nextState, { tags, activeIndex: tags.length });
+        if (tags && tags !== prevTags) {
+            Object.assign(nextState, { tags, activeIndex: tags?.length });
         }
         return nextState;
     }
@@ -59,6 +60,7 @@ export default class TagsInput extends PureComponent {
         if (this.props.autoOpen && !this.props.disabled) {
             this.focusInput();
             this.loadSuggestions();
+            // eslint-disable-next-line no-underscore-dangle
             this.select?._showPopup();
         }
     }
@@ -91,7 +93,7 @@ export default class TagsInput extends PureComponent {
         this.focusInput();
     };
     addTag = (tag) => {
-        if (tag == null) {
+        if (tag === null) {
             return;
         }
         const isUniqueTag = this.state.tags.filter(item => tag.key === item.key).length === 0;
@@ -119,6 +121,7 @@ export default class TagsInput extends PureComponent {
         if (event.target !== this.node && event.target.parentElement !== this.node) {
             return;
         }
+        // eslint-disable-next-line no-underscore-dangle
         this.select?._clickHandler();
     };
     filterExistingTags = (suggestions) => {
@@ -158,22 +161,24 @@ export default class TagsInput extends PureComponent {
             this.setActiveIndex(newActiveIndex);
         }
     };
+    // eslint-disable-next-line complexity
     handleKeyDown = (event) => {
         const key = getEventKey(event);
         const isInputFocused = () => event.target instanceof Element && event.target.matches(this.getInputNode()?.tagName ?? '');
         if (key === ' ' && this.props.allowAddNewTags) {
             event.stopPropagation();
             const value = this.getInputNode()?.value;
-            if (value != null && 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 != null && Number(this.caret.getPosition()) > 0) {
+            if (this.getInputNode() && this.caret && Number(this.caret?.getPosition()) > 0) {
                 return true;
             }
             this.selectTag();
@@ -195,12 +200,13 @@ export default class TagsInput extends PureComponent {
             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 &&
                 this.state.tags[this.state.activeIndex]) {
                 this.onRemoveTag(this.state.tags[this.state.activeIndex]).then(() => this.selectTag(true));
                 return false;
@@ -228,7 +234,7 @@ export default class TagsInput extends PureComponent {
         }, this.props.className);
         return (_jsxs("div", { 
             // it transfers focus to input
-            role: "presentation", className: classes, onKeyDown: this.handleKeyDown, onClick: this.clickHandler, ref: this.nodeRef, children: [label && (_jsx(ControlLabel, { htmlFor: this.id, disabled: disabled, type: labelType, children: label })), _jsx(TagsList, { tags: tags, activeIndex: activeIndex, disabled: disabled, canNotBeEmpty: canNotBeEmpty, handleRemove: this.handleRemove, className: styles.tagsList, tagClassName: styles.tag, handleClick: this.handleClick, customTagComponent: this.props.customTagComponent, children: _jsx(Select, { id: this.id, ref: this.selectRef, size: Select.Size.AUTO, type: Select.Type.INPUT_WITHOUT_CONTROLS, inputPlaceholder: this.props.placeholder, data: this.state.suggestions, className: classNames(styles.tagsSelect), onSelect: this.addTag, onFocus: this._focusHandler, onBlur: this._blurHandler, renderOptimization: this.props.renderOptimization, add: allowAddNewTags ? { prefix: 'Add new tag' } : undefined, onAdd: allowAddNewTags ? this.handleTagCreation : undefined, filter: filter, maxHeight: this.props.maxPopupHeight, minWidth: this.props.minPopupWidth, top: POPUP_VERTICAL_SHIFT, loading: this.state.loading, onFilter: this.loadSuggestions, onBeforeOpen: this.loadSuggestions, onKeyDown: this.handleKeyDown, disabled: this.props.disabled, loadingMessage: this.props.loadingMessage, notFoundMessage: this.props.notFoundMessage, hint: this.props.hint }) })] }));
+            role: 'presentation', className: classes, onKeyDown: this.handleKeyDown, onClick: this.clickHandler, ref: this.nodeRef, children: [label && (_jsx(ControlLabel, { htmlFor: this.id, disabled: disabled, type: labelType, children: label })), _jsx(TagsList, { tags: tags, activeIndex: activeIndex, disabled: disabled, canNotBeEmpty: canNotBeEmpty, handleRemove: this.handleRemove, className: styles.tagsList, tagClassName: styles.tag, handleClick: this.handleClick, customTagComponent: this.props.customTagComponent, children: _jsx(Select, { id: this.id, ref: this.selectRef, size: Select.Size.AUTO, type: Select.Type.INPUT_WITHOUT_CONTROLS, inputPlaceholder: this.props.placeholder, data: this.state.suggestions, className: classNames(styles.tagsSelect), onSelect: this.addTag, onFocus: this._focusHandler, onBlur: this._blurHandler, renderOptimization: this.props.renderOptimization, add: allowAddNewTags ? { prefix: 'Add new tag' } : undefined, onAdd: allowAddNewTags ? this.handleTagCreation : undefined, filter: filter, maxHeight: this.props.maxPopupHeight, minWidth: this.props.minPopupWidth, top: POPUP_VERTICAL_SHIFT, loading: this.state.loading, onFilter: this.loadSuggestions, onBeforeOpen: this.loadSuggestions, onKeyDown: this.handleKeyDown, disabled: this.props.disabled, loadingMessage: this.props.loadingMessage, notFoundMessage: this.props.notFoundMessage, hint: this.props.hint }) })] }));
     }
 }
 export const RerenderableTagsInput = rerenderHOC(TagsInput);

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;

package/components/tags-list/tags-list.js

@@ -25,6 +25,6 @@ export default class TagsList extends Component {
         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", { "data-test": "ring-tags-list", className: classes, ...props, children: [tagsList, children] }));
+        return (_jsxs("div", { "data-test": 'ring-tags-list', className: classes, ...props, children: [tagsList, children] }));
     }
 }

package/components/text/text.css

@@ -1,4 +1,4 @@
-@import "../global/variables.css";
+@import '../global/variables.css';
 
 .text {
   color: var(--ring-text-color);

package/components/text/text.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes } from 'react';
+import { Component, type HTMLAttributes } from 'react';
 declare const TextSizes: {
     readonly S: "s";
     readonly M: "m";

package/components/toggle/toggle.css

@@ -1,4 +1,4 @@
-@import "../global/variables.css";
+@import '../global/variables.css';
 
 .toggle {
   --ring-toggle-padding: 2px;
@@ -94,7 +94,7 @@
     width: calc(var(--ring-unit) * 1.5);
     height: calc(var(--ring-unit) * 1.5);
 
-    content: "";
+    content: '';
 
     transition: transform var(--ring-toggle-timing-function) var(--ring-toggle-duration);
 
@@ -190,6 +190,10 @@
   }
 }
 
+.input[disabled] + .switch {
+  --ring-toggle-item-color: var(--ring-content-background-color);
+}
+
 /* stylelint-disable-next-line selector-max-specificity */
 .input:checked[disabled] + .switch {
   --ring-toggle-background-color: var(--ring-border-disabled-active-color);
@@ -197,7 +201,6 @@
 
 /* stylelint-disable-next-line selector-max-specificity */
 .input[disabled]:not(:checked) + .switch {
-  --ring-toggle-item-color: var(--ring-content-background-color);
   --ring-toggle-background-color: var(--ring-disabled-background-color);
   --ring-toggle-border-color: var(--ring-border-disabled-color);
   --ring-switch-border-color: var(--ring-border-disabled-color);