@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/table-ng/table-ng.stories.js

@@ -0,0 +1,84 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import TableLegacyToolbar from '../table-legacy-ng/table-legacy-ng__toolbar';
+import Selection from '../table/selection';
+import data from '../table/table.stories.json';
+
+import TableNG from './table-ng';
+
+export default {
+  title: 'Legacy Angular/Table Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for Table.'
+  }
+};
+
+export const basic = () => {
+  angular.
+    module(APP_NAME, [TableNG, TableLegacyToolbar]).
+    controller('testCtrl', function controller() {
+      const columns = [
+        {
+          id: 'country',
+          title: 'Country'
+        },
+        {
+          id: 'city',
+          title: 'City',
+          sortable: true
+        },
+        {
+          id: 'url',
+          title: 'URL'
+        }
+      ];
+
+      this.data = data;
+      this.columns = columns;
+      this.selection = new Selection({data});
+      this.sortKey = 'city';
+      this.sortOrder = false;
+
+      this.onSelect = selection => {
+        this.selection = selection;
+      };
+
+      this.onSort = ({column: {id: key}, order}) => {
+        this.sortOrder = order;
+        this.data = this.data.
+          slice().
+          sort((itemA, itemB) =>
+            (order ? itemA[key].localeCompare(itemB[key]) : itemB[key].localeCompare(itemA[key]))
+          );
+      };
+    });
+
+  return `
+      <div ng-controller="testCtrl as ctrl">
+        <h3>Title of the page</h3>
+
+        <rg-legacy-table-toolbar stick>
+          <div>Some toolbar content. Focused: {{ctrl.selection.getFocused().country}}</div>
+        </rg-legacy-table-toolbar>
+
+        <rg-table
+          data="ctrl.data"
+          columns="ctrl.columns"
+          selection="ctrl.selection"
+          on-select="ctrl.onSelect"
+          autofocus="true"
+          sticky-header-offset="'56px'"
+
+          sort-key="ctrl.sortKey"
+          sort-order="ctrl.sortOrder"
+          on-sort="ctrl.onSort"
+        ></rg-table>
+      </div>
+    `;
+};
+
+basic.storyName = 'Table Ng';

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

@@ -0,0 +1,29 @@
+import React, { ReactElement, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { LinkProps } from '../link/link';
+import { TabProps } from './tab';
+export interface FakeMoreButtonProps {
+    hasActiveChildren: boolean;
+    moreClassName?: string | null | undefined;
+    moreActiveClassName?: string | null | undefined;
+}
+export declare const AnchorLink: {
+    ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }: Omit<LinkProps, 'children'> & FakeMoreButtonProps): React.JSX.Element;
+    propTypes: {
+        hasActiveChildren: PropTypes.Requireable<boolean>;
+        moreClassName: PropTypes.Requireable<string>;
+        moreActiveClassName: PropTypes.Requireable<string>;
+    };
+};
+export interface MoreButtonProps {
+    items: ReactElement<TabProps>[];
+    selected?: string | undefined;
+    onSelect: (key: string) => () => void;
+    moreClassName?: string | null | undefined;
+    moreActiveClassName?: string | null | undefined;
+    morePopupClassName?: string | null | undefined;
+    morePopupItemClassName?: string | undefined;
+    morePopupBeforeEnd: ReactNode;
+}
+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-more.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import classNames from 'classnames';
+import chevronDownIcon from '@jetbrains/icons/chevron-10px';
+import PropTypes from 'prop-types';
+import { Directions } from '../popup/popup.consts';
+import PopupMenu, { ListProps } from '../popup-menu/popup-menu';
+import Dropdown from '../dropdown/dropdown';
+import Link from '../link/link';
+import Icon from '../icon/icon';
+import styles from './tabs.css';
+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}>
+      {'More'}
+      <Icon glyph={chevronDownIcon} className={styles.chevron}/></Link>);
+};
+AnchorLink.propTypes = {
+    hasActiveChildren: PropTypes.bool,
+    moreClassName: PropTypes.string,
+    moreActiveClassName: PropTypes.string
+};
+const morePopupDirections = [
+    Directions.BOTTOM_CENTER,
+    Directions.BOTTOM_LEFT,
+    Directions.BOTTOM_RIGHT
+];
+export const MoreButton = React.memo(({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }) => {
+    const onSelectHandler = React.useCallback((listItem) => {
+        if (listItem.disabled === true || listItem.custom === true) {
+            return;
+        }
+        const cb = onSelect(String(listItem.key));
+        cb();
+    }, [onSelect]);
+    const hasActiveChild = React.useMemo(() => items.some(item => item.props.alwaysHidden && item.props.id === selected), [items, selected]);
+    const data = React.useMemo(() => {
+        const popupItems = getTabTitles({
+            items,
+            selected,
+            collapsed: true
+        }).map(tab => {
+            const disabled = tab.props.disabled === true;
+            const custom = tab.props.child.type === CustomItem;
+            return ({
+                template: tab,
+                key: tab.key,
+                rgItemType: ListProps.Type.CUSTOM,
+                className: morePopupItemClassName,
+                disabled,
+                custom
+            });
+        });
+        if (morePopupBeforeEnd) {
+            popupItems.push({
+                template: morePopupBeforeEnd,
+                key: 'before-end-content',
+                className: styles.morePopupBeforeEnd,
+                rgItemType: ListProps.Type.CUSTOM
+            });
+        }
+        return popupItems;
+    }, [items, morePopupBeforeEnd, morePopupItemClassName, selected]);
+    const popupAnchor = React.useMemo(() => (<AnchorLink moreClassName={moreClassName} moreActiveClassName={moreActiveClassName} hasActiveChildren={hasActiveChild}/>), [hasActiveChild, moreActiveClassName, moreClassName]);
+    const popup = React.useMemo(() => (<PopupMenu directions={morePopupDirections} className={morePopupClassName} onSelect={onSelectHandler} data={data}/>), [data, morePopupClassName, onSelectHandler]);
+    if (items.length === 0) {
+        return null;
+    }
+    return (<div className={classNames(styles.title, moreClassName, hasActiveChild && moreActiveClassName)}>
+      <Dropdown hoverMode anchor={popupAnchor}>
+        {popup}
+      </Dropdown>
+    </div>);
+});
+MoreButton.propTypes = {
+    children: PropTypes.node,
+    items: PropTypes.array,
+    selected: PropTypes.string,
+    onSelect: PropTypes.func,
+    toMeasure: PropTypes.bool,
+    moreClassName: PropTypes.string,
+    moreActiveClassName: PropTypes.string,
+    morePopupClassName: PropTypes.string,
+    morePopupItemClassName: PropTypes.string,
+    morePopupBeforeEnd: PropTypes.element
+};
+MoreButton.displayName = 'MoreButton';
+export const FakeMoreButton = React.memo(({ moreClassName, moreActiveClassName, hasActiveChildren }) => (<div className={classNames(styles.moreButton, styles.title)}>
+    <AnchorLink moreClassName={moreClassName} moreActiveClassName={moreActiveClassName} hasActiveChildren={hasActiveChildren} tabIndex={-1} disabled/>
+  </div>));
+FakeMoreButton.propTypes = {
+    moreClassName: PropTypes.string,
+    moreActiveClassName: PropTypes.string,
+    hasActiveChildren: PropTypes.bool
+};
+FakeMoreButton.displayName = 'FakeMoreButton';

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

@@ -0,0 +1,16 @@
+import React, { ReactElement } from 'react';
+import { TabProps } from './tab';
+export interface TabTitleProps {
+    selected: boolean;
+    child: ReactElement<TabProps> | null;
+    handleSelect?: ((e: React.MouseEvent<HTMLAnchorElement>) => void) | undefined;
+    collapsed?: boolean | undefined;
+    tabIndex?: number | undefined;
+}
+export interface TabTitlesParams extends Omit<Partial<TabTitleProps>, 'selected'> {
+    items: ReactElement<TabProps>[];
+    selected?: string | undefined;
+    onSelect?: ((key: string) => ((e: React.MouseEvent<HTMLAnchorElement>) => void) | undefined) | undefined;
+}
+declare const getTabTitles: ({ items, selected, collapsed, onSelect, ...props }: TabTitlesParams) => React.JSX.Element[];
+export default getTabTitles;

package/components/tabs/collapsible-tab.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './tabs.css';
+import TabLink from './tab-link';
+import { CustomItem } from './custom-item';
+function noop() { }
+const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect = noop, collapsed = false, tabIndex }) {
+    if (child == null || typeof child !== 'object' || child.type === CustomItem) {
+        return child;
+    }
+    const { title, titleProps, disabled, href, className, activeClassName, collapsedClassName, collapsedActiveClassName } = child.props;
+    const titleClasses = classNames(styles.title, className, {
+        [styles.selected]: selected,
+        [styles.collapsed]: collapsed,
+        [activeClassName ?? '']: selected,
+        [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}/>);
+});
+TabTitle.propTypes = {
+    child: PropTypes.element,
+    handleSelect: PropTypes.func,
+    selected: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    tabIndex: PropTypes.number
+};
+const getTabTitles = ({ items, selected = '0', collapsed, onSelect = () => undefined, ...props }) => items.map((tab, index) => {
+    const key = tab.props.id || String(index);
+    const isSelected = selected === key;
+    return (<TabTitle key={key} handleSelect={onSelect(key)} selected={isSelected} child={tab} collapsed={collapsed} {...props}/>);
+});
+export default getTabTitles;

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

@@ -0,0 +1,43 @@
+import React, { ReactElement, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { TabProps } from './tab';
+export interface CollapsibleTabsProps {
+    children: ReactElement<TabProps>[];
+    selected?: string | undefined;
+    onSelect: (key: string) => () => void;
+    moreClassName?: string | null | undefined;
+    moreActiveClassName?: string | null | undefined;
+    morePopupClassName?: string | null | undefined;
+    morePopupItemClassName?: string | undefined;
+    initialVisibleItems?: number | null | undefined;
+    morePopupBeforeEnd?: ReactNode;
+}
+export declare const CollapsibleTabs: {
+    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        selected: PropTypes.Requireable<string>;
+        onSelect: PropTypes.Validator<(...args: any[]) => any>;
+        moreClassName: PropTypes.Requireable<string>;
+        moreActiveClassName: PropTypes.Requireable<string>;
+        morePopupClassName: PropTypes.Requireable<string>;
+        morePopupItemClassName: PropTypes.Requireable<string>;
+        initialVisibleItems: PropTypes.Requireable<number>;
+        morePopupBeforeEnd: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    };
+};
+declare const _default: React.MemoExoticComponent<{
+    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        selected: PropTypes.Requireable<string>;
+        onSelect: PropTypes.Validator<(...args: any[]) => any>;
+        moreClassName: PropTypes.Requireable<string>;
+        moreActiveClassName: PropTypes.Requireable<string>;
+        morePopupClassName: PropTypes.Requireable<string>;
+        morePopupItemClassName: PropTypes.Requireable<string>;
+        initialVisibleItems: PropTypes.Requireable<number>;
+        morePopupBeforeEnd: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    };
+}>;
+export default _default;

package/components/tabs/collapsible-tabs.js

@@ -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 ?? 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);
+                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<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+};

package/components/tabs/custom-item.js

@@ -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,35 @@
+import React, { PureComponent, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import { CollapsibleTabsProps } from './collapsible-tabs';
+import { CustomItem } from './custom-item';
+import { TabProps } from './tab';
+export { CustomItem };
+export 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;
+    tabContainerClassName?: string | null | undefined;
+    autoCollapse?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+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>;
+        'data-test': PropTypes.Requireable<string>;
+        autoCollapse: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        onSelect(): void;
+    };
+    handleSelect: (arg: string) => () => void;
+    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

@@ -0,0 +1,56 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import memoize from '../global/memoize';
+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 = {
+        selected: PropTypes.string,
+        className: PropTypes.string,
+        tabContainerClassName: PropTypes.string,
+        href: PropTypes.string,
+        children: PropTypes.node.isRequired,
+        onSelect: PropTypes.func,
+        'data-test': PropTypes.string,
+        autoCollapse: PropTypes.bool
+    };
+    static defaultProps = {
+        onSelect() { }
+    };
+    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, 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} key={key} href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={this.handleSelect(key)} {...titleProps}/>);
+    };
+    render() {
+        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);
+        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={classNames(tabContainerClassName)}>
+          {childrenArray.find(({ props }, i) => (props.id || String(i)) === selected)}
+        </div>
+      </div>);
+    }
+}
+export default Tabs;

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

@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { TabsAttrs, Children } from './dumb-tabs';
+export interface SmartTabsProps extends TabsAttrs {
+    children: Children;
+    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>;
+    };
+    constructor(props: SmartTabsProps);
+    state: {
+        selected: string;
+    };
+    handleSelect: (selected: string) => void;
+    render(): React.JSX.Element;
+}

package/components/tabs/smart-tabs.js

@@ -0,0 +1,25 @@
+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
+    };
+    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;
+        return (<Tabs data-test={dataTests('ring-smart-tabs', dataTest)} selected={this.state.selected} onSelect={this.handleSelect} {...restProps}>{children}</Tabs>);
+    }
+}