@jetbrains/ring-ui 5.0.0-beta.2 → 5.0.0-beta.22

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

@@ -1,12 +1,11 @@
-import React, { ComponentPropsWithRef, PureComponent, ReactElement } from 'react';
+import { PureComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import Theme, { ThemeProps } from '../global/theme';
 import { CollapsibleTabsProps } from './collapsible-tabs';
 import { CustomItem } from './custom-item';
 import { TabProps } from './tab';
 export { CustomItem };
-declare type Children = readonly Children[] | ReactElement<TabProps> | null | boolean;
-export interface TabsProps extends ThemeProps, Omit<CollapsibleTabsProps, 'onSelect' | 'children'> {
+export declare type Children = readonly (Children | null | boolean)[] | ReactElement<TabProps> | null | boolean;
+export interface TabsProps extends Omit<CollapsibleTabsProps, 'onSelect' | 'children'> {
     children: Children;
     onSelect: (key: string) => void;
     className?: string | null | undefined;
@@ -15,11 +14,10 @@ export interface TabsProps extends ThemeProps, Omit<CollapsibleTabsProps, 'onSel
 }
 declare class Tabs extends PureComponent<TabsProps> {
     static propTypes: {
-        theme: PropTypes.Requireable<string>;
         selected: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         'data-test': PropTypes.Requireable<string>;
         autoCollapse: PropTypes.Requireable<boolean>;
@@ -27,110 +25,9 @@ declare class Tabs extends PureComponent<TabsProps> {
     static defaultProps: {
         onSelect(): void;
     };
-    static Theme: typeof Theme;
     handleSelect: (arg: string) => () => void;
     getTabTitle: (child: ReactElement<TabProps>, i: number) => JSX.Element;
     render(): JSX.Element;
 }
-declare const ThemedTabs: React.NamedExoticComponent<Omit<(Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<{
-    theme: PropTypes.Requireable<string>;
-    selected: PropTypes.Requireable<string>;
-    className: PropTypes.Requireable<string>;
-    href: PropTypes.Requireable<string>;
-    children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    'data-test': PropTypes.Requireable<string>;
-    autoCollapse: PropTypes.Requireable<boolean>;
-}>, "href"> & Pick<TabsProps, "moreClassName" | "moreActiveClassName" | "morePopupClassName" | "morePopupItemClassName" | "morePopupBeforeEnd" | "initialVisibleItems">, "className" | "href" | "children" | "theme" | "data-test" | "selected" | "moreClassName" | "moreActiveClassName" | "morePopupClassName" | "morePopupItemClassName" | "morePopupBeforeEnd" | "initialVisibleItems" | "autoCollapse"> & Partial<Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<{
-    theme: PropTypes.Requireable<string>;
-    selected: PropTypes.Requireable<string>;
-    className: PropTypes.Requireable<string>;
-    href: PropTypes.Requireable<string>;
-    children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    'data-test': PropTypes.Requireable<string>;
-    autoCollapse: PropTypes.Requireable<boolean>;
-}>, "href"> & Pick<TabsProps, "moreClassName" | "moreActiveClassName" | "morePopupClassName" | "morePopupItemClassName" | "morePopupBeforeEnd" | "initialVisibleItems">, "onSelect">> & Partial<Pick<{
-    onSelect(): void;
-}, never>>) | (Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<React.WeakValidationMap<TabsProps> & {
-    theme: PropTypes.Requireable<string>;
-    selected: PropTypes.Requireable<string>;
-    className: PropTypes.Requireable<string>;
-    href: PropTypes.Requireable<string>;
-    children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    'data-test': PropTypes.Requireable<string>;
-    autoCollapse: PropTypes.Requireable<boolean>;
-}>, "href"> & Pick<TabsProps, never>, "href"> & Partial<Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<React.WeakValidationMap<TabsProps> & {
-    theme: PropTypes.Requireable<string>;
-    selected: PropTypes.Requireable<string>;
-    className: PropTypes.Requireable<string>;
-    href: PropTypes.Requireable<string>;
-    children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    'data-test': PropTypes.Requireable<string>;
-    autoCollapse: PropTypes.Requireable<boolean>;
-}>, "href"> & Pick<TabsProps, never>, keyof TabsProps>> & Partial<Pick<Partial<TabsProps> & {
-    onSelect(): void;
-}, never>>), "theme"> & import("../global/theme").ThemeOuterProps & React.RefAttributes<Tabs>> & {
-    readonly type: React.ForwardRefExoticComponent<Omit<(Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<{
-        theme: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        href: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        'data-test': PropTypes.Requireable<string>;
-        autoCollapse: PropTypes.Requireable<boolean>;
-    }>, "href"> & Pick<TabsProps, "moreClassName" | "moreActiveClassName" | "morePopupClassName" | "morePopupItemClassName" | "morePopupBeforeEnd" | "initialVisibleItems">, "className" | "href" | "children" | "theme" | "data-test" | "selected" | "moreClassName" | "moreActiveClassName" | "morePopupClassName" | "morePopupItemClassName" | "morePopupBeforeEnd" | "initialVisibleItems" | "autoCollapse"> & Partial<Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<{
-        theme: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        href: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        'data-test': PropTypes.Requireable<string>;
-        autoCollapse: PropTypes.Requireable<boolean>;
-    }>, "href"> & Pick<TabsProps, "moreClassName" | "moreActiveClassName" | "morePopupClassName" | "morePopupItemClassName" | "morePopupBeforeEnd" | "initialVisibleItems">, "onSelect">> & Partial<Pick<{
-        onSelect(): void;
-    }, never>>) | (Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<React.WeakValidationMap<TabsProps> & {
-        theme: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        href: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        'data-test': PropTypes.Requireable<string>;
-        autoCollapse: PropTypes.Requireable<boolean>;
-    }>, "href"> & Pick<TabsProps, never>, "href"> & Partial<Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<React.WeakValidationMap<TabsProps> & {
-        theme: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        href: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        'data-test': PropTypes.Requireable<string>;
-        autoCollapse: PropTypes.Requireable<boolean>;
-    }>, "href"> & Pick<TabsProps, never>, keyof TabsProps>> & Partial<Pick<Partial<TabsProps> & {
-        onSelect(): void;
-    }, never>>), "theme"> & import("../global/theme").ThemeOuterProps & React.RefAttributes<Tabs>>;
-} & {
-    prototype: Tabs;
-    propTypes: {
-        theme: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        href: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        'data-test': PropTypes.Requireable<string>;
-        autoCollapse: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        onSelect(): void;
-    };
-    Theme: typeof Theme;
-    contextType?: React.Context<any> | undefined;
-};
-export declare type TabsAttrs = ComponentPropsWithRef<typeof ThemedTabs>;
-export default ThemedTabs;
+export declare type TabsAttrs = JSX.LibraryManagedAttributes<typeof Tabs, TabsProps>;
+export default Tabs;

package/components/tabs/{dumb-tabs.jsx → dumb-tabs.js}

@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import memoize from '../global/memoize';
-import Theme, { withTheme } from '../global/theme';
 import dataTests from '../global/data-tests';
 import styles from './tabs.css';
 import TabLink from './tab-link';
@@ -11,7 +10,6 @@ import { CustomItem } from './custom-item';
 export { CustomItem };
 class Tabs extends PureComponent {
     static propTypes = {
-        theme: PropTypes.string,
         selected: PropTypes.string,
         className: PropTypes.string,
         href: PropTypes.string,
@@ -23,24 +21,23 @@ class Tabs extends PureComponent {
     static defaultProps = {
         onSelect() { }
     };
-    static Theme = Theme;
     handleSelect = memoize((key) => () => this.props.onSelect(key));
     getTabTitle = (child, i) => {
         if (child == null || typeof child !== 'object' || child.type === CustomItem) {
             return child;
         }
         const { selected } = this.props;
-        const { title, id, disabled, href, className, activeClassName } = child.props;
+        const { title, titleProps, id, disabled, href, className, activeClassName } = child.props;
         const key = id || String(i);
         const isSelected = key === selected;
         const titleClasses = classNames(styles.title, className, isSelected && activeClassName, {
             [styles.selected]: isSelected
         });
-        return (<TabLink title={title} isSelected={isSelected} active key={key} href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={this.handleSelect(key)}/>);
+        return (<TabLink title={title} isSelected={isSelected} key={key} href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={this.handleSelect(key)} {...titleProps}/>);
     };
     render() {
-        const { className, children, selected, theme, autoCollapse, 'data-test': dataTest, ...restProps } = this.props;
-        const classes = classNames(styles.tabs, className, styles[theme]);
+        const { className, children, selected, autoCollapse, 'data-test': dataTest, ...restProps } = this.props;
+        const classes = classNames(styles.tabs, className);
         const childrenArray = React.Children.toArray(children).
             filter(Boolean);
         return (<div className={classes} data-test={dataTests('ring-dumb-tabs', dataTest)}>
@@ -55,5 +52,4 @@ class Tabs extends PureComponent {
       </div>);
     }
 }
-const ThemedTabs = withTheme()(Tabs);
-export default ThemedTabs;
+export default Tabs;

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

@@ -1,9 +1,8 @@
-import { PureComponent, ReactElement } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { TabsAttrs } from './dumb-tabs';
-import { TabProps } from './tab';
+import { TabsAttrs, Children } from './dumb-tabs';
 export interface SmartTabsProps extends TabsAttrs {
-    children: ReactElement<TabProps>[];
+    children: Children;
     initSelected?: string | null | undefined;
 }
 export default class SmartTabs extends PureComponent<SmartTabsProps> {
@@ -12,6 +11,7 @@ export default class SmartTabs extends PureComponent<SmartTabsProps> {
         initSelected: PropTypes.Requireable<string>;
         'data-test': PropTypes.Requireable<string>;
     };
+    constructor(props: SmartTabsProps);
     state: {
         selected: string;
     };

package/components/tabs/{smart-tabs.jsx → smart-tabs.js}

@@ -8,9 +8,15 @@ export default class SmartTabs extends PureComponent {
         initSelected: PropTypes.string,
         'data-test': PropTypes.string
     };
-    state = {
-        selected: this.props.initSelected || this.props.children[0].props.id || '0'
-    };
+    constructor(props) {
+        super(props);
+        this.state = {
+            selected: this.props.initSelected ||
+                (Array.isArray(this.props.children) && this.props.children[0].props.id) ||
+                '0'
+        };
+    }
+    state;
     handleSelect = (selected) => this.setState({ selected });
     render() {
         const { children, initSelected, 'data-test': dataTest, ...restProps } = this.props;

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

@@ -11,7 +11,7 @@ declare namespace TabLink {
     var propTypes: {
         isSelected: PropTypes.Requireable<boolean>;
         collapsed: PropTypes.Requireable<boolean>;
-        title: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        title: PropTypes.Requireable<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray | ((...args: any[]) => any)>;
     };
 }
 declare const _default: React.MemoExoticComponent<typeof TabLink>;

package/components/tabs/tab.d.ts

@@ -1,7 +1,9 @@
 import { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
+import { TabLinkProps } from './tab-link';
 export interface TabProps {
     title?: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
+    titleProps?: Partial<TabLinkProps>;
     id?: string | null | undefined;
     className?: string | null | undefined;
     children?: ReactNode;
@@ -15,7 +17,7 @@ export interface TabProps {
 }
 export default class Tab extends PureComponent<TabProps> {
     static propTypes: {
-        title: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        title: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray | ((...args: any[]) => any)>;
         id: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/components/tabs/tabs.css

@@ -1,8 +1,17 @@
 @import "../global/variables.css";
 
+@value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
 @value line-shadow: inset 0 -1px 0 0;
-@value selected-line-shadow: inset 0 -3px 0 0;
+@value selected-line-shadow: inset 0 -2px 0 0;
+
+:root {
+  --ring-selected-tab-color: var(--ring-text-color);
+}
+
+.dark {
+  --ring-selected-tab-color: var(--ring-main-color);
+}
 
 .tabs {
   composes: font from "../global/global.css";
@@ -14,14 +23,10 @@
   margin-bottom: calc(unit * 2);
 }
 
-.light .titles {
+.titles {
   box-shadow: line-shadow var(--ring-line-color);
 }
 
-.dark .titles {
-  box-shadow: line-shadow var(--ring-dark-line-color);
-}
-
 .title {
   composes: font from "../global/global.css";
 
@@ -58,6 +63,7 @@
   }
 
   &:global(.focus-visible) {
+    color: var(--ring-main-color);
     box-shadow: selected-line-shadow var(--ring-main-color);
   }
 
@@ -75,38 +81,21 @@
   margin-left: calc(unit * 3);
 }
 
-.light .title {
-  &[disabled] {
-    color: var(--ring-disabled-color);
-  }
-}
-
-.dark .title {
-  color: var(--ring-dark-secondary-color);
-
-  &[disabled] {
-    color: var(--ring-text-color);
-  }
+.title[disabled] {
+  color: var(--ring-disabled-color);
 }
 
 .selected {
   cursor: default;
 
+  color: var(--ring-active-text-color);
+
   outline: none;
-  box-shadow: selected-line-shadow var(--ring-text-color);
+  box-shadow: selected-line-shadow var(--ring-selected-tab-color);
 
   font-weight: bold;
 }
 
-.dark .selected.selected {
-  color: var(--ring-dark-text-color);
-  box-shadow: selected-line-shadow var(--ring-main-color);
-}
-
-.dark .title:global(.focus-visible) {
-  color: var(--ring-main-color);
-}
-
 .visible {
   position: absolute;
   top: 0;

package/components/tabs-ng/tabs-ng.examples.js

@@ -1,6 +1,7 @@
 import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+import darkStyles from '../global/variables_dark.css';
 
 import RingTabs from './tabs-ng';
 
@@ -33,13 +34,15 @@ export const dark = () => {
   angular.module(APP_NAME, [RingTabs]);
 
   return `
-      <rg-tabs class="container container_tabs" theme="dark">
+    <div class="${darkStyles.dark}">
+      <rg-tabs class="container container_tabs">
         <rg-tabs-pane x-title="Settings">Settings tab content</rg-tabs-pane>
         <rg-tabs-pane x-title="Access" counter="7">Access tab content</rg-tabs-pane>
         <rg-tabs-pane x-title="Disabled" ng-disabled="true" counter="8">Inaccessible tab content</rg-tabs-pane>
         <rg-tabs-pane x-title="Members">Members tab content</rg-tabs-pane>
         <rg-tabs-pane x-title="Members" counter="666">Members 666 tab content</rg-tabs-pane>
       </rg-tabs>
+    </div>
     `;
 };
 
@@ -49,8 +52,13 @@ dark.parameters = {
   storyStyles: `
     <style>
       body {
-        background: #000;
-        color: #fff;
+        margin: 0 !important;
+      }
+
+      .container {
+        padding: 8px;
+        background: var(--ring-content-background-color);
+        color: var(--ring-text-color);
       }
     </style>`
 };

package/components/tabs-ng/tabs-ng.js

@@ -3,7 +3,6 @@ import angular from 'angular';
 import className from 'classnames';
 
 import styles from '../tabs/tabs.css';
-import Theme from '../global/theme';
 
 import template from './tabs-ng__template';
 
@@ -24,15 +23,13 @@ angularModule.directive('rgTabs', function rgTabsDirective($location, $rootScope
       tabParameter: '@',
       tabsClass: '=',
       control: '=?',
-      disableLocationChanging: '=',
-      theme: '@?'
+      disableLocationChanging: '='
     },
 
     controller: function controller($scope) {
       $scope.panes = [];
       $scope.current = null;
       $scope.styles = styles;
-      $scope.theme = $scope.theme || Theme.LIGHT;
 
       function getTabIdFromUrl() {
         return $location.search()[$scope.tabParameter];

package/components/tabs-ng/tabs-ng__template.js

@@ -1,5 +1,5 @@
 export default `<div
-  ng-class=":: [styles.tabs, styles[theme]]"
+  ng-class=":: styles.tabs"
   rg-shortcuts="ring-tabs"
   shortcuts-map="keyMap"
   shortcuts-focus="focus"

package/components/tag/tag.css

@@ -1,7 +1,6 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
-@value background-color: var(--ring-tag-background-color);
 @value max-height: 20px;
 
 .tag {
@@ -19,18 +18,26 @@
   margin-bottom: 1px;
   padding: 0 unit;
 
+  cursor: pointer;
+
   vertical-align: top;
 
   color: var(--ring-text-color);
 
   border: none;
   border-radius: var(--ring-border-radius);
-  background-color: background-color;
 
   font-size: 12px;
   line-height: var(--ring-line-height);
 }
 
+.tag,
+.tagAngled::before {
+  transition: background-color var(--ring-ease);
+
+  background-color: var(--ring-tag-background-color);
+}
+
 .withRemove {
   padding-right: 22px;
 }
@@ -48,13 +55,24 @@
 }
 
 .focused,
-.tag:focus {
+.tag:global(.focus-visible) {
   position: relative;
 
   outline: none;
   box-shadow: 0 0 0 2px var(--ring-border-hover-color);
 }
 
+.focused,
+.focused.tagAngled::before,
+.tag:global(.focus-visible),
+.tagAngled:global(.focus-visible)::before,
+.tag:hover,
+.tagAngled:hover::before {
+  transition: none;
+
+  background-color: var(--ring-tag-hover-background-color);
+}
+
 .tagAngled {
   /* it needs to fix vertical alignment broken by "overflow: hidden". Remove this class, when IE11 will be deprecated */
 
@@ -81,8 +99,6 @@
     transform-origin: 0 0;
 
     border: none;
-
-    background-color: background-color;
   }
 
   &.focused,
@@ -101,17 +117,24 @@
   composes: ellipsis from "../global/global.css";
 }
 
-.disabled {
-  opacity: 0.5;
+.disabled.tag,
+.disabled.tagAngled::before {
+  pointer-events: none;
+
+  color: var(--ring-disabled-color);
+  background-color: var(--ring-disabled-background-color);
 }
 
 .remove {
   position: absolute;
   z-index: 1;
-  top: -1px;
+  top: 2px;
   right: 0;
 
+  height: auto;
   padding: 0 calc(unit / 2);
+
+  line-height: calc(unit * 2);
 }
 
 .removeIcon.removeIcon {

package/components/tag/tag.d.ts

@@ -2,6 +2,7 @@ import React, { HTMLAttributes, PureComponent, ReactNode, RefCallback } from 're
 import PropTypes from 'prop-types';
 import { IconType } from '../icon/icon';
 export interface TagRenderProps extends HTMLAttributes<HTMLElement> {
+    disabled: boolean;
     ref: RefCallback<HTMLElement>;
     'data-test': string;
 }

package/components/tag/{tag.jsx → tag.js}

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close';
+import closeIcon from '@jetbrains/icons/close-12px';
 import Icon from '../icon/icon';
 import Button from '../button/button';
 import styles from './tag.css';
@@ -39,7 +39,6 @@ export default class Tag extends PureComponent {
     };
     componentDidUpdate(prevProps) {
         if (this.props.focused !== prevProps.focused) {
-            // eslint-disable-next-line react/no-did-update-set-state
             this.setState({ focused: this.props.focused });
         }
         if (this.state.focused) {
@@ -116,6 +115,7 @@ export default class Tag extends PureComponent {
                 ref: this.tagRef,
                 onClick: this.props.onClick,
                 style: { backgroundColor, color: textColor },
+                disabled: this.props.disabled,
                 children: (<>
               {this.renderAvatar()}
               {this.renderCustomIcon()}

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

@@ -1,5 +1,7 @@
 @import "../global/variables.css";
 
+@value outerContainer, container, input from "../input/input.css";
+
 .tagsInput {
   padding-top: 2px;
   padding-bottom: 2px;
@@ -30,6 +32,10 @@
 
   color: var(--ring-disabled-color);
 
+  & .input {
+    background-color: transparent;
+  }
+
   & .underline {
     border-bottom-style: dashed;
   }
@@ -55,12 +61,12 @@
 .tagsSelect {
   margin-bottom: -1px;
 
-  & > div {
-    min-height: 20px;
+  & .outerContainer {
+    --ring-input-padding-block: 0;
   }
 
-  & input {
-    min-height: 20px;
+  & .container {
+    line-height: calc(var(--ring-line-height) - 2px);
   }
 }
 

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

@@ -120,18 +120,14 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
 }
 export declare const RerenderableTagsInput: {
     new (props: TagsInputProps): {
-        _propsCache: Readonly<TagsInputProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        rerender(props?: Partial<TagsInputProps>, callback?: (() => void) | undefined): void | Element | React.Component<TagsInputProps, any, any>;
+        _propsCache: TagsInputProps & React.RefAttributes<unknown>;
+        rerender(props?: Partial<TagsInputProps>, callback?: (() => void) | undefined): void;
         node?: HTMLElement | null | undefined;
-        context: any;
+        context: unknown;
         setState<K extends keyof TagsInputState>(state: TagsInputState | ((prevState: Readonly<TagsInputState>, props: Readonly<TagsInputProps>) => TagsInputState | Pick<TagsInputState, K> | null) | Pick<TagsInputState, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         render(): React.ReactNode;
-        readonly props: Readonly<TagsInputProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<TagsInputProps>;
         state: Readonly<TagsInputState>;
         refs: {
             [key: string]: React.ReactInstance;

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

@@ -2,7 +2,7 @@ import React, { Component, ComponentType, HTMLAttributes, ReactNode } from 'reac
 import PropTypes from 'prop-types';
 import { TagAttrs } from '../tag/tag';
 declare function noop(): void;
-export interface TagType extends Omit<TagAttrs, 'onClick'> {
+export interface TagType extends Omit<TagAttrs, 'onClick' | 'children'> {
     label?: ReactNode;
     key?: string | number | null | undefined;
 }