@jetbrains/ring-ui 6.0.1-beta.0 → 6.0.1

package/components/select/select__popup.js

@@ -227,8 +227,11 @@ export default class SelectPopup extends PureComponent {
         return this.getFilter();
     }
     getBottomLine() {
-        const { loading, message } = this.props;
-        return (loading || message) && (<div className={styles.bottomLine}>
+        const { loading, message, data } = this.props;
+        const hasMoreThanOneItem = data.length > 1;
+        return (loading || message) && (<div className={classNames(styles.bottomLine, {
+                [styles.bottomLineOverItem]: hasMoreThanOneItem
+            })}>
         {loading && <LoaderInline />}
 
         {message && (<div className={styles.message}>{message}</div>)}

package/components/sidebar/sidebar.css

@@ -1,7 +1,5 @@
 @import "../global/global.css";
 
-@value unit from "../global/global.css";
-
 @keyframes show-sidebar {
   0% {
     right: -100%;
@@ -25,10 +23,10 @@
 
   box-sizing: border-box;
 
-  width: calc(unit * 58);
+  width: calc(var(--ring-unit) * 58);
   height: 100%;
 
-  padding-top: calc(2 * unit);
+  padding-top: calc(2 * var(--ring-unit));
 
   transition: right 0.5s ease, visibility 0.5s;
 
@@ -60,16 +58,16 @@
 :global(.ring-sidebar__avatar) {
   float: left;
 
-  width: calc(6 * unit);
-  height: calc(6 * unit);
+  width: calc(6 * var(--ring-unit));
+  height: calc(6 * var(--ring-unit));
   object-fit: contain;
 
-  padding: 0 calc(2 * unit) 0 calc(4 * unit);
+  padding: 0 calc(2 * var(--ring-unit)) 0 calc(4 * var(--ring-unit));
 }
 
 :global(.ring-sidebar__title) {
   margin: 0;
-  padding-left: calc(4 * unit);
+  padding-left: calc(4 * var(--ring-unit));
 
   vertical-align: middle;
 
@@ -90,8 +88,8 @@
 :global(.ring-sidebar__section) {
   position: relative;
 
-  margin-top: calc(3 * unit);
-  padding: 0 calc(2 * unit) 0 calc(4 * unit);
+  margin-top: calc(3 * var(--ring-unit));
+  padding: 0 calc(2 * var(--ring-unit)) 0 calc(4 * var(--ring-unit));
 }
 
 :global(.ring-sidebar__section-title) {
@@ -107,7 +105,7 @@
   color: var(--ring-text-color);
 
   font-size: var(--ring-font-size);
-  line-height: calc(3 * unit);
+  line-height: calc(3 * var(--ring-unit));
 }
 
 :global(.ring-sidebar__section-text_multiline) {
@@ -117,7 +115,7 @@
 }
 
 :global(.ring-sidebar__section-roster) {
-  margin-top: unit;
+  margin-top: var(--ring-unit);
 }
 
 :global(.ring-sidebar__section-icon) {
@@ -126,7 +124,7 @@
 
   display: block;
 
-  width: calc(4 * unit);
+  width: calc(4 * var(--ring-unit));
 
   text-align: center;
 
@@ -136,7 +134,7 @@
 }
 
 :global(.ring-sidebar__empty) {
-  margin-top: calc(unit * 4);
+  margin-top: calc(var(--ring-unit) * 4);
 
   text-align: center;
 }
@@ -148,7 +146,7 @@
 }
 
 :global(.ring-sidebar__empty-description) {
-  margin-top: calc(unit * 2);
+  margin-top: calc(var(--ring-unit) * 2);
   padding-top: 4px;
 
   color: var(--ring-text-color);

package/components/table/table.css

@@ -1,9 +1,7 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-@value height: calc(4 * unit);
 @value compensate: 2px;
-@value compensated: calc(height - compensate);
+@value compensated: calc(calc(4 * var(--ring-unit)) - compensate);
 
 .tableWrapper {
   position: relative;
@@ -23,8 +21,8 @@
   composes: font-smaller-lower from "../global/global.css";
 
   box-sizing: border-box;
-  height: calc(unit * 3);
-  padding-right: calc(unit * 5);
+  height: calc(var(--ring-unit) * 3);
+  padding-right: calc(var(--ring-unit) * 5);
 
   text-align: left;
   white-space: nowrap;
@@ -35,12 +33,12 @@
 }
 
 .headerCell:first-child {
-  padding-left: calc(unit * 4);
+  padding-left: calc(var(--ring-unit) * 4);
 }
 
 .headerCell:last-child {
   width: 100%;
-  padding-right: calc(unit * 4);
+  padding-right: calc(var(--ring-unit) * 4);
 }
 
 .headerCell:first-child:only-child {
@@ -76,7 +74,7 @@
 }
 
 .caption {
-  padding-top: unit;
+  padding-top: var(--ring-unit);
   padding-bottom: 6px;
 
   color: var(--ring-text-color);
@@ -152,15 +150,15 @@
 
   min-width: 0;
 
-  height: height;
+  height: calc(4 * var(--ring-unit));
   padding: 0;
-  padding-right: calc(unit * 5);
+  padding-right: calc(var(--ring-unit) * 5);
 
   color: var(--ring-text-color);
 }
 
 .cell:first-child {
-  padding-left: calc(unit * 4);
+  padding-left: calc(var(--ring-unit) * 4);
 }
 
 .cell:last-child {
@@ -169,12 +167,12 @@
   /* Markup hack, allows cell to have content which is wider than cell and collapses it */
 
   max-width: 0;
-  padding-right: calc(unit * 4);
+  padding-right: calc(var(--ring-unit) * 4);
 }
 
 .cell:first-child {
-  min-width: calc(unit * 37);
-  max-width: calc(unit * 77);
+  min-width: calc(var(--ring-unit) * 37);
+  max-width: calc(var(--ring-unit) * 77);
 }
 
 .cell:first-child:only-child {
@@ -207,7 +205,7 @@
 
 .dragHandle {
   top: top;
-  left: calc(-2 * unit);
+  left: calc(-2 * var(--ring-unit));
 
   cursor: grab;
 
@@ -218,7 +216,7 @@
 .dragHandle.dragHandle {
   position: absolute;
 
-  height: calc(height - top);
+  height: calc(calc(4 * var(--ring-unit)) - top);
   padding: 0;
 }
 
@@ -228,7 +226,7 @@
 }
 
 .rowCollapseExpandButton {
-  padding-right: calc(unit / 2);
+  padding-right: calc(var(--ring-unit) / 2);
   padding-left: 7px;
 }
 

package/components/table/table.js

@@ -151,7 +151,7 @@ export class Table extends PureComponent {
                 return null;
             }
             const { ref, ...restProps } = props;
-            const row = (<Row innerRef={ref} key={getItemKey(value)} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} {...restProps}/>);
+            const row = (<Row innerRef={ref} key={getItemKey(value)} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={focused && selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} {...restProps}/>);
             return isDragged
                 ? (<table style={{ ...props.style }} className={style.draggingTable}>
             <tbody>{row}</tbody>

package/components/table-legacy/table-legacy.css

@@ -1,7 +1,5 @@
 @import "./table-legacy__toolbar.css";
 
-@value unit from "../global/global.css";
-
 :global(.ring-table) {
   width: 100%;
 
@@ -32,7 +30,7 @@
 
   display: table-cell;
 
-  padding: 0 unit;
+  padding: 0 var(--ring-unit);
 
   text-align: left;
   white-space: nowrap;
@@ -51,7 +49,7 @@
 }
 
 :global(.ring-table__title:first-child) {
-  padding-left: calc(unit * 4);
+  padding-left: calc(var(--ring-unit) * 4);
 }
 
 /* Have to emulate right border because of Fx weird bug —
@@ -79,7 +77,7 @@
 }
 
 :global(.ring-table__title_nested) {
-  padding-left: calc(unit * 5);
+  padding-left: calc(var(--ring-unit) * 5);
 }
 
 /* fix header checkbox position in nested table */
@@ -96,7 +94,7 @@
   width: 12px;
   height: 9px;
 
-  margin-left: calc(unit * 2);
+  margin-left: calc(var(--ring-unit) * 2);
   padding-bottom: 21px;
 
   cursor: pointer;
@@ -129,7 +127,7 @@
 }
 
 :global(.ring-table__column_selector) {
-  min-width: calc(3 * unit);
+  min-width: calc(3 * var(--ring-unit));
   padding: 0 !important;
 
   text-align: center;
@@ -138,13 +136,13 @@
 :global(.ring-table__selector) {
   display: inline-block;
 
-  margin: 0 0 0 calc(unit / 2);
+  margin: 0 0 0 calc(var(--ring-unit) / 2);
 }
 
 :global(.ring-table__column) {
   display: table-cell;
 
-  padding: calc(unit - 2px) unit;
+  padding: calc(var(--ring-unit) - 2px) var(--ring-unit);
 
   vertical-align: middle;
   white-space: nowrap;
@@ -162,7 +160,7 @@
 }
 
 :global(.ring-table__column:first-child) {
-  padding-left: calc(4 * unit);
+  padding-left: calc(4 * var(--ring-unit));
 }
 
 :global(.ring-table__column.ring-table__column_gap) {
@@ -172,7 +170,7 @@
 
 /* Combined class is required here for specificity */
 :global(.ring-table__column.ring-table__column_toggle) {
-  width: calc(unit * 2);
+  width: calc(var(--ring-unit) * 2);
   padding: 0;
 
   text-align: right;
@@ -201,7 +199,7 @@
 }
 
 :global(.ring-table__column_gap) {
-  padding-left: calc(unit * 2) !important;
+  padding-left: calc(var(--ring-unit) * 2) !important;
 }
 
 :global(.ring-table__column-title) {
@@ -209,13 +207,13 @@
 }
 
 :global(.ring-table__column_wide) {
-  min-width: calc(10 * unit);
+  min-width: calc(10 * var(--ring-unit));
 }
 
 :global(.ring-table__column_limited) {
   overflow: hidden;
 
-  max-width: calc(50 * unit);
+  max-width: calc(50 * var(--ring-unit));
 
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -232,7 +230,7 @@
 }
 
 :global(.ring-table__column_narrow) {
-  min-width: calc(3 * unit);
+  min-width: calc(3 * var(--ring-unit));
   padding: 0 !important;
 }
 
@@ -244,7 +242,7 @@
   display: table-row;
 
   width: 100%;
-  height: calc(5 * unit);
+  height: calc(5 * var(--ring-unit));
 }
 
 :global(.ring-table__row .ring-table__row_ghost) {
@@ -294,7 +292,7 @@
 }
 
 :global(.ring-table__description) {
-  margin-left: unit;
+  margin-left: var(--ring-unit);
 
   color: var(--ring-secondary-color);
 
@@ -302,13 +300,13 @@
 }
 
 :global(.ring-table__avatar) {
-  width: calc(3 * unit);
-  height: calc(3 * unit + 3px); /* If avatar is missing */
+  width: calc(3 * var(--ring-unit));
+  height: calc(3 * var(--ring-unit) + 3px); /* If avatar is missing */
 }
 
 :global(.ring-table__avatar-img) {
-  width: calc(3 * unit);
-  height: calc(3 * unit);
+  width: calc(3 * var(--ring-unit));
+  height: calc(3 * var(--ring-unit));
 }
 
 :global(.ring-table__header_sticky) {
@@ -325,17 +323,17 @@
 }
 
 :global(.table__pager) {
-  padding: calc(4 * unit) calc(4 * unit);
+  padding: calc(4 * var(--ring-unit)) calc(4 * var(--ring-unit));
 }
 
 :global(.table__pager-links) {
-  margin-bottom: calc(2 * unit);
+  margin-bottom: calc(2 * var(--ring-unit));
 }
 
 :global(.table__pager-link) {
   display: inline-block;
 
-  margin-right: calc(4 * unit);
+  margin-right: calc(4 * var(--ring-unit));
 }
 
 :global(.table__pager-link_disabled) {

package/components/table-legacy/table-legacy__toolbar.css

@@ -1,5 +1,3 @@
-@value unit from "../global/global.css";
-
 :global(.ring-table__toolbar) {
   background: inherit;
 }
@@ -9,9 +7,9 @@
 
   display: block;
 
-  min-height: calc(unit * 3);
+  min-height: calc(var(--ring-unit) * 3);
 
-  padding: calc(unit * 2) calc(unit * 4);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
 
   white-space: initial;
 

package/components/tabs/collapsible-more.js

@@ -12,7 +12,7 @@ import getTabTitles from './collapsible-tab';
 import { CustomItem } from './custom-item';
 export const AnchorLink = ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }) => {
     const classnames = classNames(styles.title, hasActiveChildren && styles.selected, hasActiveChildren && moreActiveClassName, moreClassName);
-    return (<Link title={'More'} innerClassName={classnames} className={classnames} {...restProps}>
+    return (<Link title={'More'} className={classnames} {...restProps}>
       {'More'}
       <Icon glyph={chevronDownIcon} className={styles.chevron}/></Link>);
 };

package/components/tabs/collapsible-tab.js

@@ -17,7 +17,7 @@ const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect =
         [collapsedClassName ?? '']: collapsed,
         [collapsedActiveClassName ?? '']: collapsed && selected
     });
-    return (<TabLink title={title} isSelected={selected} active href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={handleSelect} tabIndex={tabIndex} collapsed={collapsed} {...titleProps}/>);
+    return (<TabLink title={title} isSelected={selected} active href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={handleSelect} tabIndex={tabIndex} collapsed={collapsed} {...titleProps}/>);
 });
 TabTitle.propTypes = {
     child: PropTypes.element,

package/components/tabs/collapsible-tabs.js

@@ -132,8 +132,8 @@ export const CollapsibleTabs = ({ children, selected, onSelect, moreClassName, m
             const container = measureRef.current;
             const descendants = [...container?.children ?? []];
             const moreButton = descendants.pop();
-            let moreButtonWidth = moreButton.offsetWidth;
-            const { marginLeft: moreButtonMarginLeft, marginRight: moreButtonMarginRight } = getComputedStyle(moreButton);
+            let moreButtonWidth = moreButton?.offsetWidth ?? 0;
+            const { marginLeft: moreButtonMarginLeft = '0', marginRight: moreButtonMarginRight = '0' } = moreButton ? getComputedStyle(moreButton) : {};
             moreButtonWidth += +moreButtonMarginLeft.replace('px', '') + +moreButtonMarginRight.replace('px', '');
             const tabsWidth = descendants.map(node => {
                 const { marginLeft, marginRight } = getComputedStyle(node);

package/components/tabs/dumb-tabs.js

@@ -34,7 +34,7 @@ class Tabs extends PureComponent {
         const titleClasses = classNames(styles.title, className, isSelected && activeClassName, {
             [styles.selected]: isSelected
         });
-        return (<TabLink title={title} isSelected={isSelected} key={key} href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={this.handleSelect(key)} {...titleProps}/>);
+        return (<TabLink title={title} isSelected={isSelected} key={key} href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={this.handleSelect(key)} {...titleProps}/>);
     };
     render() {
         const { className, tabContainerClassName, children, selected, autoCollapse, 'data-test': dataTest, ...restProps } = this.props;

package/components/tabs/tab-link.js

@@ -7,13 +7,13 @@ function TabLink({ isSelected, title, collapsed, ...restProps }) {
         ? title(isSelected, collapsed)
         : title;
     return (<Link {...restProps}>
-      {() => (<div className={styles.container}>
-          <span className={styles.visible}>{renderedTitle}</span>
-          {/* hack for preserving constant tab width*/}
-          <span className={styles.hidden}>{renderedTitle}</span>
-          <span className={styles.hiddenBold}>{renderedTitle}</span>
-          <span className={styles.hiddenRegular}>{renderedTitle}</span>
-        </div>)}
+      <div className={styles.container}>
+        <span className={styles.visible}>{renderedTitle}</span>
+        {/* hack for preserving constant tab width*/}
+        <span className={styles.hidden}>{renderedTitle}</span>
+        <span className={styles.hiddenBold}>{renderedTitle}</span>
+        <span className={styles.hiddenRegular}>{renderedTitle}</span>
+      </div>
     </Link>);
 }
 TabLink.propTypes = {

package/components/tabs/tabs.css

@@ -4,7 +4,6 @@
 @import "../link/link.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 -2px 0 0;
 
@@ -24,7 +23,7 @@
 .titles {
   display: inline-block;
 
-  margin-bottom: calc(unit * 2);
+  margin-bottom: calc(var(--ring-unit) * 2);
 }
 
 .titles {
@@ -48,7 +47,7 @@
   border-radius: 0;
   background: none;
 
-  line-height: calc(unit * 4);
+  line-height: calc(var(--ring-unit) * 4);
 
   &:hover,
   &:active {
@@ -82,7 +81,7 @@
 }
 
 .title + .title {
-  margin-left: calc(unit * 3);
+  margin-left: calc(var(--ring-unit) * 3);
 }
 
 .title[disabled] {

package/components/tag/tag.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value max-height: 20px;
 
 .tag {
@@ -15,7 +14,7 @@
   max-width: 100%;
   height: max-height;
 
-  padding: 0 unit;
+  padding: 0 var(--ring-unit);
 
   cursor: pointer;
 
@@ -46,9 +45,9 @@
 
   display: inline-block;
 
-  max-width: calc(100% - unit / 2);
+  max-width: calc(100% - var(--ring-unit) / 2);
 
-  margin-right: calc(unit / 2);
+  margin-right: calc(var(--ring-unit) / 2);
 
   white-space: nowrap;
 }
@@ -77,8 +76,8 @@
 
   margin-bottom: -5px !important;
 
-  margin-left: unit;
-  padding-left: calc(unit / 2);
+  margin-left: var(--ring-unit);
+  padding-left: calc(var(--ring-unit) / 2);
 
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -131,9 +130,9 @@
   right: 0;
 
   height: auto;
-  padding: 0 calc(unit / 2);
+  padding: 0 calc(var(--ring-unit) / 2);
 
-  line-height: calc(unit * 2);
+  line-height: calc(var(--ring-unit) * 2);
 }
 
 .removeIcon.removeIcon {
@@ -157,8 +156,8 @@
   box-sizing: border-box;
   width: max-height;
   height: max-height;
-  margin-right: calc(unit / 2);
-  margin-left: calc(0 - unit);
+  margin-right: calc(var(--ring-unit) / 2);
+  margin-left: calc(var(--ring-unit) * -1);
 
   vertical-align: top;
 
@@ -167,10 +166,10 @@
 }
 
 .customIcon {
-  max-width: calc(unit * 2);
-  max-height: calc(unit * 2);
+  max-width: calc(var(--ring-unit) * 2);
+  max-height: calc(var(--ring-unit) * 2);
 
-  margin-right: calc(unit / 2);
+  margin-right: calc(var(--ring-unit) / 2);
 
   vertical-align: bottom;
 }

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

@@ -1,10 +1,9 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value outerContainer, container, input from "../input/input.css";
 
 .tagsInput {
-  --ring-input-icon-offset: calc(unit * 2.5);
+  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
   --ring-input-padding-inline: 3px;
 
   box-sizing: border-box;

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

@@ -38,6 +38,7 @@ export interface TagsInputProps {
     height?: ControlsHeight | undefined;
     label?: ReactNode;
     labelType?: LabelType;
+    id?: string | undefined;
 }
 interface TagsInputState {
     tags: TagType[];
@@ -115,6 +116,7 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     getInputNode(): HTMLInputElement | null | undefined;
     setActiveIndex(activeIndex?: number | null): void;
     focusInput: () => void;
+    focus: () => void;
     addTag: (tag: TagType | null) => void;
     onRemoveTag(tagToRemove: TagType): Promise<void | TagType[]>;
     clickHandler: (event: SyntheticEvent) => void;
@@ -131,33 +133,6 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     selectRef: (el: Select | null) => void;
     render(): React.JSX.Element;
 }
-export declare const RerenderableTagsInput: {
-    new (props: TagsInputProps): {
-        _propsCache: TagsInputProps & React.RefAttributes<unknown>;
-        rerender(props?: Partial<TagsInputProps>, callback?: (() => void) | undefined): void;
-        node?: HTMLElement | null | undefined;
-        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>;
-        state: Readonly<TagsInputState>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<TagsInputProps>, nextState: Readonly<TagsInputState>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<TagsInputProps>, prevState: Readonly<TagsInputState>): any;
-        componentDidUpdate?(prevProps: Readonly<TagsInputProps>, prevState: Readonly<TagsInputState>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<TagsInputProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<TagsInputProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<TagsInputProps>, nextState: Readonly<TagsInputState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<TagsInputProps>, nextState: Readonly<TagsInputState>, nextContext: any): void;
-    };
-};
+export declare const RerenderableTagsInput: React.ForwardRefExoticComponent<TagsInputProps & React.RefAttributes<TagsInput>>;
 export type TagsInputAttrs = JSX.LibraryManagedAttributes<typeof TagsInput, TagsInputProps>;
 export {};

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

@@ -94,7 +94,7 @@ export default class TagsInput extends PureComponent {
     static ngModelStateField = 'tags';
     ngModelStateField;
     static contextType = ControlsHeightContext;
-    id = getUID('ring-tags-list-');
+    id = this.props.id || getUID('ring-tags-list-');
     node;
     nodeRef = (node) => {
         this.node = node;
@@ -116,6 +116,9 @@ export default class TagsInput extends PureComponent {
     focusInput = () => {
         this.getInputNode()?.focus();
     };
+    focus = () => {
+        this.focusInput();
+    };
     addTag = (tag) => {
         if (tag == null) {
             return;