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

package/components/tabs/collapsible-tabs.jsx

@@ -0,0 +1,196 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import fastdom from 'fastdom';
+import styles from './tabs.css';
+import { FakeMoreButton, MoreButton } from './collapsible-more';
+import getTabTitles from './collapsible-tab';
+const DEFAULT_DEBOUNCE_INTERVAL = 100;
+const MEASURE_TOLERANCE = 0.5;
+export const CollapsibleTabs = ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }) => {
+    const [sizes, setSizes] = React.useState({ tabs: [], more: undefined });
+    const [lastVisibleIndex, setLastVisibleIndex] = React.useState(null);
+    const elements = { sizes, lastVisibleIndex };
+    const [preparedElements, setPreparedElements] = React.useState({
+        visible: [],
+        hidden: []
+    });
+    const measureRef = React.useRef(null);
+    const selectedIndex = React.useMemo(() => children.
+        filter(tab => tab.props.alwaysHidden !== true).
+        findIndex(tab => tab.props.id === selected) ?? null, [children, selected]);
+    const visibleElements = React.useMemo(() => {
+        let items;
+        if (preparedElements.ready) {
+            items = preparedElements.visible;
+        }
+        else {
+            items = initialVisibleItems
+                ? children.filter(item => item.props.alwaysHidden !== true).slice(0, initialVisibleItems)
+                : [];
+        }
+        return getTabTitles({
+            items,
+            selected,
+            onSelect
+        });
+    }, [
+        initialVisibleItems,
+        children,
+        preparedElements.ready,
+        preparedElements.visible,
+        onSelect,
+        selected
+    ]);
+    const adjustTabs = React.useCallback(entry => {
+        const containerWidth = entry.contentRect.width;
+        const { tabs: tabsSizes, more = 0 } = elements.sizes;
+        let renderMore = children.some(tab => tab.props.alwaysHidden);
+        const tabsToRender = [];
+        let filledWidth = renderMore ? more ?? 0 : 0;
+        for (let i = 0; i < tabsSizes.length; i++) {
+            if (filledWidth + tabsSizes[i] < containerWidth + MEASURE_TOLERANCE) {
+                filledWidth += tabsSizes[i];
+                tabsToRender.push(tabsSizes[i]);
+            }
+            else {
+                break;
+            }
+        }
+        if (tabsToRender.length < tabsSizes.length && !renderMore) {
+            for (let i = tabsToRender.length - 1; i >= 0; i--) {
+                if (filledWidth + more < containerWidth + MEASURE_TOLERANCE) {
+                    filledWidth += more;
+                    renderMore = true;
+                    break;
+                }
+                else {
+                    filledWidth -= tabsToRender[i];
+                    tabsToRender.pop();
+                }
+            }
+        }
+        if (selectedIndex > tabsToRender.length - 1) {
+            const selectedWidth = tabsSizes[selectedIndex];
+            for (let i = tabsToRender.length - 1; i >= 0; i--) {
+                if (filledWidth + selectedWidth < containerWidth + MEASURE_TOLERANCE) {
+                    filledWidth += selectedWidth;
+                    break;
+                }
+                else {
+                    filledWidth -= tabsToRender[i];
+                    tabsToRender.pop();
+                }
+            }
+        }
+        if (elements.lastVisibleIndex !== tabsToRender.length - 1) {
+            setLastVisibleIndex(tabsToRender.length - 1);
+        }
+    }, [children, elements.lastVisibleIndex, elements.sizes, selectedIndex]);
+    // Prepare list of visible and hidden elements
+    React.useEffect(() => {
+        const timeout = setTimeout(() => {
+            const res = children.reduce((accumulator, tab) => {
+                if (tab.props.alwaysHidden !== true &&
+                    accumulator.visible.length - 1 < (elements.lastVisibleIndex ?? 0)) {
+                    accumulator.visible.push(tab);
+                }
+                else {
+                    accumulator.hidden.push(tab);
+                }
+                return accumulator;
+            }, { visible: [], hidden: [], ready: elements.lastVisibleIndex !== null });
+            if (selectedIndex > (elements.lastVisibleIndex ?? 0)) {
+                const selectedItem = children.find(tab => !tab.props.alwaysHidden && tab.props.id === selected);
+                if (selectedItem != null) {
+                    res.visible.push(selectedItem);
+                }
+            }
+            const allVisibleTheSame = res.visible.length === preparedElements.visible.length &&
+                res.visible.every((item, index) => item === preparedElements.visible[index]);
+            const allHiddenTheSame = res.hidden.length === preparedElements.hidden.length &&
+                res.hidden.every((item, index) => item === preparedElements.hidden[index]);
+            if (!allVisibleTheSame || !allHiddenTheSame || preparedElements.ready !== res.ready) {
+                fastdom.mutate(() => setPreparedElements(res));
+            }
+        }, DEFAULT_DEBOUNCE_INTERVAL);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [children, elements.lastVisibleIndex, preparedElements, selected, selectedIndex]);
+    // Get list of all possibly visible elements to render in a measure container
+    const childrenToMeasure = React.useMemo(() => {
+        const items = children.filter(tab => tab.props.alwaysHidden !== true);
+        return getTabTitles({ items, tabIndex: -1 });
+    }, [children]);
+    // Initial measure for tabs and more button sizes
+    React.useEffect(() => {
+        if (measureRef.current == null) {
+            return undefined;
+        }
+        const measureTask = fastdom.measure(() => {
+            const container = measureRef.current;
+            const descendants = [...container?.children ?? []];
+            const moreButton = descendants.pop();
+            let moreButtonWidth = moreButton.offsetWidth;
+            const { marginLeft: moreButtonMarginLeft, marginRight: moreButtonMarginRight } = getComputedStyle(moreButton);
+            moreButtonWidth += +moreButtonMarginLeft.replace('px', '') + +moreButtonMarginRight.replace('px', '');
+            const tabsWidth = descendants.map(node => {
+                const { marginLeft, marginRight } = getComputedStyle(node);
+                const width = node.getBoundingClientRect().width;
+                return width + +marginLeft.replace('px', '') + +marginRight.replace('px', '');
+            });
+            const newSummaryWidth = tabsWidth.reduce((acc, curr) => (acc + curr), 0);
+            const oldSummaryWidth = elements.sizes.tabs.reduce((acc, curr) => (acc + curr), 0);
+            if (elements.sizes.more !== moreButtonWidth || newSummaryWidth !== oldSummaryWidth) {
+                fastdom.mutate(() => setSizes({ more: moreButtonWidth, tabs: tabsWidth }));
+            }
+        });
+        return () => {
+            fastdom.clear(measureTask);
+        };
+    }, [children, elements.sizes.more, elements.sizes.tabs]);
+    // Start observers to listen resizing and mutation
+    React.useEffect(() => {
+        if (measureRef.current === null) {
+            return undefined;
+        }
+        let measureTask = () => { };
+        const resizeObserver = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+                fastdom.clear(measureTask);
+                measureTask = fastdom.mutate(() => adjustTabs(entry));
+            });
+        });
+        resizeObserver.observe(measureRef.current);
+        return () => {
+            fastdom.clear(measureTask);
+            resizeObserver.disconnect();
+        };
+    }, [adjustTabs]);
+    const isAdjusted = (elements.lastVisibleIndex !== null &&
+        preparedElements.ready === true) || initialVisibleItems;
+    const className = classNames(styles.titles, styles.autoCollapse, isAdjusted && styles.adjusted);
+    return (<div className={styles.autoCollapseContainer}>
+      <div className={classNames(className, styles.rendered)}>
+        {visibleElements}
+        <MoreButton moreClassName={moreClassName} moreActiveClassName={moreActiveClassName} morePopupClassName={morePopupClassName} morePopupBeforeEnd={morePopupBeforeEnd} morePopupItemClassName={morePopupItemClassName} items={preparedElements.hidden} selected={selected} onSelect={onSelect}/>
+      </div>
+      <div ref={measureRef} className={classNames(className, styles.measure)}>
+        {childrenToMeasure}
+        <FakeMoreButton hasActiveChildren={preparedElements.hidden.some(item => item.props.alwaysHidden && item.props.id === selected)} moreClassName={moreClassName} moreActiveClassName={moreActiveClassName}/>
+      </div>
+    </div>);
+};
+CollapsibleTabs.propTypes = {
+    children: PropTypes.node.isRequired,
+    selected: PropTypes.string,
+    onSelect: PropTypes.func.isRequired,
+    moreClassName: PropTypes.string,
+    moreActiveClassName: PropTypes.string,
+    morePopupClassName: PropTypes.string,
+    morePopupItemClassName: PropTypes.string,
+    initialVisibleItems: PropTypes.number,
+    morePopupBeforeEnd: PropTypes.element
+};
+export default React.memo(CollapsibleTabs);

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

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+import { ReactElement } from 'react';
+import { TabProps } from './tab';
+export declare const CustomItem: {
+    ({ children }: TabProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    };
+};

package/components/tabs/custom-item.jsx

@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+export const CustomItem = ({ children }) => children;
+CustomItem.propTypes = {
+    children: PropTypes.node.isRequired
+};

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

@@ -0,0 +1,136 @@
+import React, { ComponentPropsWithRef, 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'> {
+    children: Children;
+    onSelect: (key: string) => void;
+    className?: string | null | undefined;
+    autoCollapse?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+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>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        'data-test': PropTypes.Requireable<string>;
+        autoCollapse: PropTypes.Requireable<boolean>;
+    };
+    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;

package/components/tabs/dumb-tabs.jsx

@@ -0,0 +1,59 @@
+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';
+import CollapsibleTabs from './collapsible-tabs';
+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,
+        children: PropTypes.node.isRequired,
+        onSelect: PropTypes.func,
+        'data-test': PropTypes.string,
+        autoCollapse: PropTypes.bool
+    };
+    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 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)}/>);
+    };
+    render() {
+        const { className, children, selected, theme, autoCollapse, 'data-test': dataTest, ...restProps } = this.props;
+        const classes = classNames(styles.tabs, className, styles[theme]);
+        const childrenArray = React.Children.toArray(children).
+            filter(Boolean);
+        return (<div className={classes} data-test={dataTests('ring-dumb-tabs', dataTest)}>
+        {autoCollapse === true
+                ? (<CollapsibleTabs {...restProps} onSelect={this.handleSelect} selected={selected}>{childrenArray}</CollapsibleTabs>)
+                : (<div className={styles.titles}>
+              {childrenArray.map(this.getTabTitle)}
+            </div>)}
+        <div className={styles.tab}>
+          {childrenArray.find(({ props }, i) => (props.id || String(i)) === selected)}
+        </div>
+      </div>);
+    }
+}
+const ThemedTabs = withTheme()(Tabs);
+export default ThemedTabs;

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

@@ -0,0 +1,20 @@
+import { PureComponent, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import { TabsAttrs } from './dumb-tabs';
+import { TabProps } from './tab';
+export interface SmartTabsProps extends TabsAttrs {
+    children: ReactElement<TabProps>[];
+    initSelected?: string | null | undefined;
+}
+export default class SmartTabs extends PureComponent<SmartTabsProps> {
+    static propTypes: {
+        children: PropTypes.Validator<(PropTypes.ReactElementLike | null | undefined)[]>;
+        initSelected: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    state: {
+        selected: string;
+    };
+    handleSelect: (selected: string) => void;
+    render(): JSX.Element;
+}

package/components/tabs/smart-tabs.jsx

@@ -0,0 +1,19 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import dataTests from '../global/data-tests';
+import Tabs from './dumb-tabs';
+export default class SmartTabs extends PureComponent {
+    static propTypes = {
+        children: PropTypes.arrayOf(PropTypes.element).isRequired,
+        initSelected: PropTypes.string,
+        'data-test': PropTypes.string
+    };
+    state = {
+        selected: this.props.initSelected || this.props.children[0].props.id || '0'
+    };
+    handleSelect = (selected) => this.setState({ selected });
+    render() {
+        const { children, initSelected, 'data-test': dataTest, ...restProps } = this.props;
+        return (<Tabs data-test={dataTests('ring-smart-tabs', dataTest)} selected={this.state.selected} onSelect={this.handleSelect} {...restProps}>{children}</Tabs>);
+    }
+}

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

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { LinkProps } from '../link/link';
+export interface TabLinkProps extends Omit<LinkProps, 'title' | 'children'> {
+    isSelected: boolean;
+    collapsed?: boolean;
+    title: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
+}
+declare function TabLink({ isSelected, title, collapsed, ...restProps }: TabLinkProps): JSX.Element;
+declare namespace TabLink {
+    var propTypes: {
+        isSelected: PropTypes.Requireable<boolean>;
+        collapsed: PropTypes.Requireable<boolean>;
+        title: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    };
+}
+declare const _default: React.MemoExoticComponent<typeof TabLink>;
+export default _default;

package/components/tabs/{tab-link.js → tab-link.jsx}

@@ -1,34 +1,24 @@
-import React, {memo} from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-
 import Link from '../link/link';
-
 import styles from './tabs.css';
-
-function TabLink({isSelected, title, collapsed, ...restProps}) {
-  const renderedTitle = typeof title === 'function'
-    ? title(isSelected, collapsed)
-    : title;
-
-  return (
-    <Link {...restProps}>
-      {() => (
-        <div className={styles.container}>
+function TabLink({ isSelected, title, collapsed, ...restProps }) {
+    const renderedTitle = typeof title === 'function'
+        ? 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>
-      )}
-    </Link>
-  );
+        </div>)}
+    </Link>);
 }
-
 TabLink.propTypes = {
-  isSelected: PropTypes.bool,
-  collapsed: PropTypes.bool,
-  title: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.node])
+    isSelected: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    title: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.node])
 };
-
 export default memo(TabLink);

package/components/tabs/tab.d.ts

@@ -0,0 +1,25 @@
+import { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface TabProps {
+    title?: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
+    id?: string | null | undefined;
+    className?: string | null | undefined;
+    children?: ReactNode;
+    'data-test'?: string | null | undefined;
+    alwaysHidden?: boolean | null | undefined;
+    disabled?: boolean | undefined;
+    href?: string | undefined;
+    activeClassName?: string | null | undefined;
+    collapsedClassName?: string | null | undefined;
+    collapsedActiveClassName?: string | null | undefined;
+}
+export default class Tab extends PureComponent<TabProps> {
+    static propTypes: {
+        title: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        id: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}

package/components/tabs/tab.jsx

@@ -0,0 +1,19 @@
+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,
+        id: PropTypes.string,
+        className: PropTypes.string,
+        children: PropTypes.node,
+        'data-test': PropTypes.string
+    };
+    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>);
+    }
+}

package/components/tabs/tabs.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @name Tabs
+ */
+export { CustomItem } from './custom-item';
+export { default as Tabs } from './dumb-tabs';
+export { default as SmartTabs } from './smart-tabs';
+export { default as Tab } from './tab';

package/components/tabs/tabs.js

@@ -1,8 +1,7 @@
 /**
  * @name Tabs
  */
-
-export {CustomItem} from './custom-item';
-export {default as Tabs} from './dumb-tabs';
-export {default as SmartTabs} from './smart-tabs';
-export {default as Tab} from './tab';
+export { CustomItem } from './custom-item';
+export { default as Tabs } from './dumb-tabs';
+export { default as SmartTabs } from './smart-tabs';
+export { default as Tab } from './tab';

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import RingTabs from '@jetbrains/ring-ui/components/tabs-ng/tabs-ng';
+import RingTabs from './tabs-ng';
 
 export default {
   title: 'Legacy Angular/Tabs Ng',