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

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} 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>);
+    }
+}

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): React.JSX.Element;
+declare namespace TabLink {
+    var propTypes: {
+        isSelected: PropTypes.Requireable<boolean>;
+        collapsed: PropTypes.Requireable<boolean>;
+        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+    };
+}
+declare const _default: React.MemoExoticComponent<typeof TabLink>;
+export default _default;

package/components/tabs/tab-link.js

@@ -0,0 +1,24 @@
+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}>
+        <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 = {
+    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,27 @@
+import React, { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { TabLinkProps } from './tab-link';
+export interface TabProps {
+    title?: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
+    titleProps?: Partial<TabLinkProps>;
+    id?: string | null | undefined;
+    className?: string | null | undefined;
+    children?: ReactNode;
+    '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<NonNullable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>>;
+        id: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}

package/components/tabs/tab.js

@@ -0,0 +1,19 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+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;
+        return (<div data-test={dataTests('ring-tab', dataTest)} className={classNames(className)}>
+        {children}
+      </div>);
+    }
+}

package/components/tabs/tabs.css

@@ -0,0 +1,223 @@
+@import "../global/variables.css";
+
+/* ensure styles order */
+@import "../link/link.css";
+
+@value dark from "../global/variables_dark.css";
+@value line-shadow: inset 0 -1px 0 0;
+@value selected-line-shadow: inset 0 -2px 0 0;
+
+:root {
+  --ring-selected-tab-color: var(--ring-text-color);
+}
+
+.dark,
+:global(.ring-ui-theme-dark) {
+  --ring-selected-tab-color: var(--ring-main-color);
+}
+
+.tabs {
+  composes: font from "../global/global.css";
+}
+
+.titles {
+  display: inline-block;
+
+  margin-bottom: calc(var(--ring-unit) * 2);
+}
+
+.titles {
+  box-shadow: line-shadow var(--ring-line-color);
+}
+
+.title {
+  composes: font from "../global/global.css";
+
+  position: relative;
+
+  display: inline-block;
+
+  padding: 0;
+
+  cursor: pointer;
+
+  color: inherit;
+
+  border: none;
+  border-radius: 0;
+  background: none;
+
+  line-height: calc(var(--ring-unit) * 4);
+
+  &:hover,
+  &:active {
+    &.selected,
+    &.collapsed {
+      color: inherit;
+      box-shadow: selected-line-shadow var(--ring-text-color);
+    }
+
+    &:not(.selected),
+    &:not(.collapsed) {
+      color: var(--ring-link-hover-color);
+      outline-style: none;
+      box-shadow: inset 0 -1px 0 0 var(--ring-link-hover-color);
+    }
+  }
+
+  &:focus-visible {
+    color: var(--ring-main-color);
+    box-shadow: selected-line-shadow var(--ring-main-color);
+  }
+
+  &[disabled] {
+    pointer-events: none;
+  }
+}
+
+.title.titleLegacy {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.title + .title {
+  margin-left: calc(var(--ring-unit) * 3);
+}
+
+.title[disabled] {
+  color: var(--ring-disabled-color);
+}
+
+.selected {
+  cursor: default;
+
+  color: var(--ring-active-text-color);
+
+  outline: none;
+  box-shadow: selected-line-shadow var(--ring-selected-tab-color);
+
+  font-weight: bold;
+}
+
+.visible {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  text-align: center;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.hidden {
+  display: flex;
+  visibility: hidden;
+}
+
+.hiddenBold {
+  display: flex;
+  visibility: hidden;
+
+  height: 0;
+
+  font-weight: bold;
+}
+
+.hiddenRegular {
+  display: flex;
+  visibility: hidden;
+
+  height: 0;
+
+  font-weight: normal;
+}
+
+.tabCounter {
+  padding-left: 8px;
+
+  color: var(--ring-secondary-color);
+
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 19px; /* prevent jumps in Firefox */
+}
+
+.autoCollapseContainer {
+  position: relative;
+}
+
+.autoCollapse {
+  position: relative;
+
+  display: inline-flex;
+  visibility: hidden;
+  overflow: hidden;
+
+  max-width: 100%;
+}
+
+.autoCollapse .title {
+  flex-shrink: 0;
+}
+
+.rendered.adjusted {
+  visibility: visible;
+  overflow: visible;
+}
+
+.measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  overflow: hidden;
+
+  height: 0;
+  margin: 0;
+
+  pointer-events: none;
+
+  opacity: 0;
+}
+
+.morePopup {
+  display: flex;
+  flex-direction: column;
+}
+
+.collapsed.collapsed {
+  width: 100%;
+
+  border-bottom: none;
+  box-shadow: none;
+
+  &:hover {
+    box-shadow: none;
+  }
+}
+
+.collapsed.collapsed[disabled] {
+  color: var(--ring-disabled-color);
+}
+
+.collapsed .visible,
+.collapsed .hidden {
+  text-align: left;
+}
+
+.chevron {
+  padding-left: 4px;
+}
+
+.morePopupBeforeEnd.morePopupBeforeEnd.morePopupBeforeEnd {
+  padding: 0;
+}
+
+.morePopupBeforeEnd ~ div {
+  display: none;
+}

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

@@ -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';