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

package/components/table/header.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Waypoint } from 'react-waypoint';
 import Checkbox from '../checkbox/checkbox';
 import getUID from '../global/get-uid';
 import style from './table.css';
@@ -32,39 +31,10 @@ export default class Header extends PureComponent {
         sortKey: 'id',
         sortOrder: true
     };
-    state = {
-        fixed: false,
-        headerWidth: undefined,
-        widths: []
-    };
     id = getUID('table-header-');
     onCheckboxFocus = (event) => {
         event.currentTarget.blur();
     };
-    _columnsRowNode;
-    storeColumnsRowNode = (node) => {
-        if (node) {
-            this._columnsRowNode = node;
-            this.calculateColumnsWidths(node);
-        }
-    };
-    onScrollIn = () => {
-        this.calculateColumnsWidths(this._columnsRowNode);
-        this.setState({ fixed: false });
-    };
-    onScrollOut = ({ currentPosition }) => {
-        if (currentPosition !== 'above') {
-            return;
-        }
-        this.calculateColumnsWidths(this._columnsRowNode);
-        this.setState({ fixed: true });
-    };
-    calculateColumnsWidths(columnsRowNode) {
-        this.setState({
-            headerWidth: columnsRowNode?.clientWidth,
-            widths: [...columnsRowNode?.childNodes ?? []].map(column => (column instanceof Element ? column.clientWidth : 0))
-        });
-    }
     createCells(widths = []) {
         const { selectable, draggable, columns, checked, checkboxDisabled, onCheckboxChange, onSort, sortKey, sortOrder } = this.props;
         const metaColumnClasses = classNames(style.metaColumn, style.headerMetaColumn);
@@ -82,30 +52,16 @@ export default class Header extends PureComponent {
     }
     render() {
         const { caption, sticky, topStickOffset } = this.props;
-        const { fixed, widths, headerWidth } = this.state;
         const regularCells = this.createCells();
-        const waypointChild = (<tr data-test="ring-table-header-row">
-        {/*Since we need to keep the exact amount of columns in each row, we need to present them even being empty*/}
-        {/*regularCells doesn't provide any other information than a list of components. Hence using array indexes as keys looks like a sane idea*/}
-        {/*eslint-disable-next-line react/no-array-index-key*/}
-        {regularCells.map((c, i) => <td key={i}/>)}
-      </tr>);
-        return (<thead id={this.id} data-test="ring-table-header" className={style.tableHead}>
+        return (<thead id={this.id} data-test="ring-table-header" style={{ top: topStickOffset }} className={classNames({
+                [style.tableHead]: true,
+                [style.subHeaderSticky]: sticky
+            })}>
         {caption && (<tr data-test="ring-table-header-row">
             <th className={classNames(style.headerCell, style.caption)} colSpan={regularCells.length + 1} data-test="ring-table-header-cell">{caption}</th>
           </tr>)}
 
-        {sticky &&
-                (<Waypoint topOffset={topStickOffset} onEnter={this.onScrollIn} onLeave={this.onScrollOut}>
-            {waypointChild}
-          </Waypoint>)}
-
-        <tr className={style.subHeader} ref={this.storeColumnsRowNode} data-test="ring-table-header-row">{regularCells}</tr>
-
-        {fixed && sticky &&
-                (<tr className={style.subHeaderFixed} style={{ width: headerWidth, top: topStickOffset }} data-test="ring-table-header-row">
-              {this.createCells(widths)}
-            </tr>)}
+        <tr className={style.subHeader} data-test="ring-table-header-row">{regularCells}</tr>
       </thead>);
     }
 }

package/components/table/multitable.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, ReactElement } from 'react';
+import React, { PureComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { TableAttrs } from './table';
 import { SelectionItem } from './selection';
@@ -21,5 +21,5 @@ export default class MultiTable extends PureComponent<MultiTableProps> {
         'command+a': () => boolean;
         'ctrl+a': () => boolean;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/table/row-with-focus-sensor.d.ts

@@ -14,5 +14,5 @@ export default class RowWithFocusSensorCallbacks<T extends SelectionItem> extend
     onSelect: (item: T, selected: boolean) => void;
     onCollapse: () => void;
     onExpand: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/table/row.d.ts

@@ -25,6 +25,7 @@ export interface RowProps<T extends SelectionItem> extends Omit<HTMLAttributes<H
     checkboxTooltip?: string | undefined;
     autofocus?: boolean | null | undefined;
     'data-test'?: string | null | undefined;
+    metaColumnClassName?: string | null | undefined;
 }
 export default class Row<T extends SelectionItem> extends PureComponent<RowProps<T>> {
     static defaultProps: {
@@ -53,6 +54,6 @@ export default class Row<T extends SelectionItem> extends PureComponent<RowProps
     onDoubleClick: () => void;
     row?: HTMLElement | null;
     rowRef: (el: HTMLElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type RowAttrs<T extends SelectionItem> = JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;

package/components/table/row.js

@@ -73,7 +73,7 @@ export default class Row extends PureComponent {
         this.row = el;
     };
     render() {
-        const { item, columns, selectable, selected, showFocus, draggable, alwaysShowDragHandle, dragHandleTitle, level, collapsible, parentCollapsible, collapsed, onCollapse, onExpand, showDisabledSelection, onSelect, checkboxTooltip, innerRef, focused, autofocus, onFocusReset, onFocusRestore, onHover, className, 'data-test': dataTest, ...restProps } = this.props;
+        const { item, columns, selectable, selected, showFocus, draggable, alwaysShowDragHandle, dragHandleTitle, level, collapsible, parentCollapsible, collapsed, onCollapse, onExpand, showDisabledSelection, onSelect, checkboxTooltip, innerRef, focused, autofocus, onFocusReset, onFocusRestore, onHover, className, metaColumnClassName, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(className, {
             [style.row]: true,
             [style.rowFocused]: showFocus,
@@ -83,7 +83,7 @@ export default class Row extends PureComponent {
             'data-test-focused': showFocus || undefined,
             'data-test-selected': selected || undefined
         };
-        const metaColumnClasses = style.metaColumn;
+        const metaColumnClasses = classNames(metaColumnClassName, style.metaColumn);
         const SUBITEM_OFFSET = 30;
         const COLLAPSIBLE_PARENT_OFFSET = 20;
         const gap = level * SUBITEM_OFFSET + (parentCollapsible ? COLLAPSIBLE_PARENT_OFFSET : 0);
@@ -114,7 +114,7 @@ export default class Row extends PureComponent {
             const getDataTest = column.getDataTest || (() => column.id);
             const value = getValue(item, column);
             const cellClasses = classNames({ [style.cellRight]: column.rightAlign }, column.className);
-            const showMetaColumn = draggable || selectable || showDisabledSelection || !!level;
+            const showMetaColumn = draggable || selectable || collapsible || showDisabledSelection || !!level;
             return (<Cell key={column.id} className={cellClasses} data-test={getDataTest(item, column)}>
           {index === 0 && (showMetaColumn) && metaColumn}
           {value}
@@ -125,6 +125,7 @@ export default class Row extends PureComponent {
 }
 Row.propTypes = {
     className: PropTypes.string,
+    metaColumnClassName: PropTypes.string,
     item: PropTypes.object.isRequired,
     columns: PropTypes.array.isRequired,
     selectable: PropTypes.bool,

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

@@ -20,6 +20,7 @@ declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTab
         isItemSelectable: PropTypes.Requireable<(...args: any[]) => any> | React.Validator<((item: SelectionItem) => boolean) | null | undefined>;
         innerRef?: React.Validator<React.Ref<HTMLTableRowElement> | undefined> | undefined;
         autofocus?: React.Validator<boolean | null | undefined> | undefined;
+        scrollOnTableFocus?: React.Validator<boolean | null | undefined> | undefined;
         disabledHover?: React.Validator<boolean> | undefined;
         remoteSelection?: React.Validator<boolean | null | undefined> | undefined;
         onSort?: React.Validator<((params: import("./header-cell").SortParams) => void) | null | undefined> | undefined;
@@ -32,6 +33,7 @@ declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTab
         stickyHeader?: React.Validator<boolean | null | undefined> | undefined;
         getItemLevel?: React.Validator<((item: SelectionItem) => number) | null | undefined> | undefined;
         getItemClassName?: React.Validator<((item: SelectionItem) => string | null | undefined) | null | undefined> | undefined;
+        getMetaColumnClassName?: React.Validator<((item: SelectionItem) => string | null | undefined) | null | undefined> | undefined;
         getItemDataTest?: React.Validator<((item: SelectionItem) => string | null | undefined) | null | undefined> | undefined;
         isItemCollapsible?: React.Validator<((item: SelectionItem) => boolean) | null | undefined> | undefined;
         isParentCollapsible?: React.Validator<((item: SelectionItem) => boolean) | null | undefined> | undefined;
@@ -57,6 +59,6 @@ declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTab
     };
     UNSAFE_componentWillReceiveProps(nextProps: SmartTableProps<T>): void;
     onSelect: (selection: Selection<T>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default SmartTable;

package/components/table/table.css

@@ -79,8 +79,6 @@
   padding-top: unit;
   padding-bottom: 6px;
 
-  text-transform: capitalize;
-
   color: var(--ring-text-color);
   border-bottom: none;
 
@@ -101,34 +99,13 @@
   background-color: var(--ring-line-color);
 }
 
-.subHeaderFixed::after {
-  position: absolute;
-  top: 24px;
-
-  height: 1px;
-
-  content: "";
-
-  background-color: var(--ring-line-color);
-}
-
-.subHeader::after {
-  right: calc(unit * 4);
-  left: calc(unit * 4);
-}
+.subHeaderSticky {
+  position: sticky;
 
-.subHeaderFixed {
-  position: fixed;
   z-index: var(--ring-fixed-z-index);
   top: 0;
 
-  opacity: 0.9;
-  background-color: var(--ring-content-background-color);
-}
-
-.subHeaderFixed::after {
-  right: 0;
-  left: 0;
+  background-color: rgba(var(--ring-content-background-components), 0.9);
 }
 
 .row {
@@ -271,6 +248,12 @@
   color: var(--ring-main-color);
 }
 
+.draggingTable {
+  z-index: var(--ring-overlay-z-index);
+
+  border-spacing: 0;
+}
+
 .tableMessage {
   padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
 

package/components/table/table.d.ts

@@ -29,6 +29,7 @@ export interface TableProps<T extends SelectionItem> extends FocusSensorAddProps
     stickyHeader: boolean;
     getItemLevel: (item: T) => number;
     getItemClassName: (item: T) => string | null | undefined;
+    getMetaColumnClassName: (item: T) => string | null | undefined;
     getItemDataTest: (item: T) => string | null | undefined;
     isItemCollapsible: (item: T) => boolean;
     isParentCollapsible: (item: T) => boolean;
@@ -63,6 +64,7 @@ export declare class Table<T extends SelectionItem> extends PureComponent<TableP
         stickyHeader: boolean;
         getItemLevel: () => number;
         getItemClassName: () => null;
+        getMetaColumnClassName: () => null;
         getItemDataTest: () => null;
         isItemCollapsible: () => boolean;
         isParentCollapsible: () => boolean;
@@ -89,7 +91,7 @@ export declare class Table<T extends SelectionItem> extends PureComponent<TableP
     onSortEnd: ({ oldIndex, newIndex }: OnChangeMeta) => void;
     onCheckboxChange: (e: SyntheticEvent<HTMLInputElement>) => void;
     restoreFocusWithoutScroll: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type TableAttrs<T extends SelectionItem> = DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>;
 export default class TableContainer<T extends SelectionItem> extends Component<TableAttrs<T>> {
@@ -103,7 +105,7 @@ export default class TableContainer<T extends SelectionItem> extends Component<T
             componentWillUnmount(): void;
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
-            render(): JSX.Element;
+            render(): React.JSX.Element;
             context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
@@ -130,7 +132,7 @@ export default class TableContainer<T extends SelectionItem> extends Component<T
             componentWillUnmount(): void;
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
-            render(): JSX.Element;
+            render(): React.JSX.Element;
             context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
@@ -153,5 +155,5 @@ export default class TableContainer<T extends SelectionItem> extends Component<T
         defaultProps: Partial<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>> | undefined;
         contextType?: React.Context<any> | undefined;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/table/table.js

@@ -32,6 +32,7 @@ export class Table extends PureComponent {
         stickyHeader: true,
         getItemLevel: () => 0,
         getItemClassName: () => null,
+        getMetaColumnClassName: () => null,
         getItemDataTest: () => null,
         isItemCollapsible: () => false,
         isParentCollapsible: () => false,
@@ -106,7 +107,7 @@ export class Table extends PureComponent {
         window.scrollTo(scrollX, scrollY);
     };
     render() {
-        const { data, selection, columns, caption, getItemKey, selectable, focused, isItemSelectable, getItemLevel, getItemClassName, getItemDataTest, draggable, alwaysShowDragHandle, dragHandleTitle, loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader, stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed, onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip, onItemDoubleClick, onItemClick, renderEmpty } = this.props;
+        const { data, selection, columns, caption, getItemKey, selectable, focused, isItemSelectable, getItemLevel, getItemClassName, getMetaColumnClassName, getItemDataTest, draggable, alwaysShowDragHandle, dragHandleTitle, loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader, stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed, onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip, onItemDoubleClick, onItemClick, renderEmpty } = this.props;
         // NOTE: Do not construct new object per render because it causes all rows rerendering
         const headerProps = {
             caption, selectable, draggable,
@@ -150,9 +151,9 @@ 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 })} 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={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, borderSpacing: 0 }}>
+                ? (<table style={{ ...props.style }} className={style.draggingTable}>
             <tbody>{row}</tbody>
           </table>)
                 : row;
@@ -186,6 +187,7 @@ Table.propTypes = {
     loading: PropTypes.bool,
     getItemKey: PropTypes.func,
     getItemClassName: PropTypes.func,
+    getMetaColumnClassName: PropTypes.func,
     getItemDataTest: PropTypes.func,
     onSort: PropTypes.func,
     onReorder: PropTypes.func,

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

@@ -8,7 +8,7 @@ export interface FakeMoreButtonProps {
     moreActiveClassName?: string | null | undefined;
 }
 export declare const AnchorLink: {
-    ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }: Omit<LinkProps, 'children'> & FakeMoreButtonProps): JSX.Element;
+    ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }: Omit<LinkProps, 'children'> & FakeMoreButtonProps): React.JSX.Element;
     propTypes: {
         hasActiveChildren: PropTypes.Requireable<boolean>;
         moreClassName: PropTypes.Requireable<string>;
@@ -25,5 +25,5 @@ export interface MoreButtonProps {
     morePopupItemClassName?: string | undefined;
     morePopupBeforeEnd: ReactNode;
 }
-export declare const MoreButton: React.MemoExoticComponent<({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }: MoreButtonProps) => JSX.Element | null>;
-export declare const FakeMoreButton: React.MemoExoticComponent<({ moreClassName, moreActiveClassName, hasActiveChildren }: FakeMoreButtonProps) => JSX.Element>;
+export declare const MoreButton: React.MemoExoticComponent<({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }: MoreButtonProps) => React.JSX.Element | null>;
+export declare const FakeMoreButton: React.MemoExoticComponent<({ moreClassName, moreActiveClassName, hasActiveChildren }: FakeMoreButtonProps) => React.JSX.Element>;

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

@@ -12,5 +12,5 @@ export interface TabTitlesParams extends Omit<Partial<TabTitleProps>, 'selected'
     selected?: string | undefined;
     onSelect?: ((key: string) => ((e: React.MouseEvent<HTMLAnchorElement>) => void) | undefined) | undefined;
 }
-declare const getTabTitles: ({ items, selected, collapsed, onSelect, ...props }: TabTitlesParams) => JSX.Element[];
+declare const getTabTitles: ({ items, selected, collapsed, onSelect, ...props }: TabTitlesParams) => React.JSX.Element[];
 export default getTabTitles;

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

@@ -13,7 +13,7 @@ export interface CollapsibleTabsProps {
     morePopupBeforeEnd?: ReactNode;
 }
 export declare const CollapsibleTabs: {
-    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): JSX.Element;
+    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): React.JSX.Element;
     propTypes: {
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
         selected: PropTypes.Requireable<string>;
@@ -27,7 +27,7 @@ export declare const CollapsibleTabs: {
     };
 };
 declare const _default: React.MemoExoticComponent<{
-    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): JSX.Element;
+    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): React.JSX.Element;
     propTypes: {
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
         selected: PropTypes.Requireable<string>;

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

@@ -1,4 +1,4 @@
-import { PureComponent, ReactElement } from 'react';
+import React, { PureComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { CollapsibleTabsProps } from './collapsible-tabs';
 import { CustomItem } from './custom-item';
@@ -9,6 +9,7 @@ export interface TabsProps extends Omit<CollapsibleTabsProps, 'onSelect' | 'chil
     children: Children;
     onSelect: (key: string) => void;
     className?: string | null | undefined;
+    tabContainerClassName?: string | null | undefined;
     autoCollapse?: boolean | null | undefined;
     'data-test'?: string | null | undefined;
 }
@@ -16,6 +17,7 @@ declare class Tabs extends PureComponent<TabsProps> {
     static propTypes: {
         selected: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
+        tabContainerClassName: PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
@@ -26,8 +28,8 @@ declare class Tabs extends PureComponent<TabsProps> {
         onSelect(): void;
     };
     handleSelect: (arg: string) => () => void;
-    getTabTitle: (child: ReactElement<TabProps>, i: number) => JSX.Element;
-    render(): JSX.Element;
+    getTabTitle: (child: ReactElement<TabProps>, i: number) => React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export type TabsAttrs = JSX.LibraryManagedAttributes<typeof Tabs, TabsProps>;
 export default Tabs;

package/components/tabs/dumb-tabs.js

@@ -12,6 +12,7 @@ class Tabs extends PureComponent {
     static propTypes = {
         selected: PropTypes.string,
         className: PropTypes.string,
+        tabContainerClassName: PropTypes.string,
         href: PropTypes.string,
         children: PropTypes.node.isRequired,
         onSelect: PropTypes.func,
@@ -36,7 +37,7 @@ class Tabs extends PureComponent {
         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, autoCollapse, 'data-test': dataTest, ...restProps } = this.props;
+        const { className, tabContainerClassName, children, selected, autoCollapse, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(styles.tabs, className);
         const childrenArray = React.Children.toArray(children).
             filter(Boolean);
@@ -46,7 +47,7 @@ class Tabs extends PureComponent {
                 : (<div className={styles.titles}>
               {childrenArray.map(this.getTabTitle)}
             </div>)}
-        <div className={styles.tab}>
+        <div className={classNames(tabContainerClassName)}>
           {childrenArray.find(({ props }, i) => (props.id || String(i)) === selected)}
         </div>
       </div>);

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

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { TabsAttrs, Children } from './dumb-tabs';
 export interface SmartTabsProps extends TabsAttrs {
@@ -16,5 +16,5 @@ export default class SmartTabs extends PureComponent<SmartTabsProps> {
         selected: string;
     };
     handleSelect: (selected: string) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -6,7 +6,7 @@ export interface TabLinkProps extends Omit<LinkProps, 'title' | 'children'> {
     collapsed?: boolean;
     title: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
 }
-declare function TabLink({ isSelected, title, collapsed, ...restProps }: TabLinkProps): JSX.Element;
+declare function TabLink({ isSelected, title, collapsed, ...restProps }: TabLinkProps): React.JSX.Element;
 declare namespace TabLink {
     var propTypes: {
         isSelected: PropTypes.Requireable<boolean>;

package/components/tabs/tab.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, ReactNode } from 'react';
+import React, { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { TabLinkProps } from './tab-link';
 export interface TabProps {
@@ -23,5 +23,5 @@ export default class Tab extends PureComponent<TabProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/tabs/tab.js

@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
-import styles from './tabs.css';
 export default class Tab extends PureComponent {
     static propTypes = {
         title: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
@@ -13,7 +12,8 @@ export default class Tab extends PureComponent {
     };
     render() {
         const { className, children, 'data-test': dataTest } = this.props;
-        const classes = classNames(styles.tab, className);
-        return (<div data-test={dataTests('ring-tab', dataTest)} className={classes}>{children}</div>);
+        return (<div data-test={dataTests('ring-tab', dataTest)} className={classNames(className)}>
+        {children}
+      </div>);
     }
 }

package/components/tabs/tabs.css

@@ -1,5 +1,8 @@
 @import "../global/variables.css";
 
+/* ensure styles order */
+@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;
@@ -63,7 +66,7 @@
     }
   }
 
-  &:global(.focus-visible) {
+  &:focus-visible {
     color: var(--ring-main-color);
     box-shadow: selected-line-shadow var(--ring-main-color);
   }

package/components/tag/tag.css

@@ -54,7 +54,7 @@
 }
 
 .focused,
-.tag:global(.focus-visible) {
+.tag:focus-visible {
   position: relative;
 
   outline: none;
@@ -63,8 +63,8 @@
 
 .focused,
 .focused.tagAngled::before,
-.tag:global(.focus-visible),
-.tagAngled:global(.focus-visible)::before,
+.tag:focus-visible,
+.tagAngled:focus-visible::before,
 .tag:hover,
 .tagAngled:hover::before {
   transition: none;

package/components/tag/tag.d.ts

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

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

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