@wix/design-system/dist/esm/Tabs/Tabs.js

@wix/design-system

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import SideContent from './components/SideContent';
import TabItems from './components/TabItems';
import { classes, st } from './Tabs.st.css.js';
import { SIZE } from './Tabs.constants';
import HorizontalScroll from '../HorizontalScroll';
import deprecationLog from '../utils/deprecationLog';
const Tabs = ({ dataHook, className, activeId, hasDivider = true, // TODO: add default value to showDivider once hasDivider is removed
items, minWidth, type, size = SIZE.medium, sideContent, width, alignment, onClick, scrollOnOverflow, horizontalScrollProps, ...props }) => {
    const showDivider = props.showDivider ?? hasDivider;
    const tabItemsProps = {
        className,
        activeId,
        hasDivider,
        items,
        minWidth,
        type,
        size,
        width,
        alignment,
        onClick,
        scrollOnOverflow,
    };
    useEffect(() => {
        if (hasDivider) {
            deprecationLog('<Tabs/> - prop "hasDivider" is deprecated and will be removed in next major release, please use "showDivider" property instead.');
        }
    }, [hasDivider]);
    return (React.createElement("div", { "data-divider": showDivider, "data-hook": dataHook, className: st(classes.container, {
            showDivider,
            size,
            scrollOnOverflow,
        }, className) },
        scrollOnOverflow ? (React.createElement(HorizontalScroll, { ...horizontalScrollProps },
            React.createElement(TabItems, { ...tabItemsProps }))) : (React.createElement(TabItems, { ...tabItemsProps })),
        React.createElement(SideContent, { content: sideContent })));
};
Tabs.displayName = 'Tabs';
Tabs.propTypes = {
    dataHook: PropTypes.string,
    className: PropTypes.string,
    activeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    showDivider: PropTypes.bool,
    hasDivider: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        title: PropTypes.node,
        minWidth: PropTypes.number,
        maxWidth: PropTypes.number,
        dataHook: PropTypes.string,
        prefix: PropTypes.node,
        suffix: PropTypes.node,
    })).isRequired,
    minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    type: PropTypes.oneOf([
        'compact',
        'compactSide',
        'uniformSide',
        'uniformFull',
    ]),
    size: PropTypes.oneOf(['medium', 'small']),
    sideContent: PropTypes.node,
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    alignment: PropTypes.oneOf(['start', 'center', 'end']),
    onClick: PropTypes.func,
    scrollOnOverflow: PropTypes.bool,
    horizontalScrollProps: PropTypes.shape(HorizontalScroll.propTypes),
};
export default Tabs;
//# sourceMappingURL=Tabs.js.map