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

@wix/design-system

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import VerticalTabsContext from '../VerticalTabs/VerticalTabsContext';
import { withFocusable } from '../common/Focusable';
import { SelectableItem } from './components/SelectableItem';
import { TitleItem } from './components/TitleItem';
import { ActionItem } from './components/ActionItem';
export const VerticalTabsItem = ({ id, type = 'tab', tabIndex, ...rest }) => {
    const { activeTabId, onChange, size, skin: baseSkin, } = useContext(VerticalTabsContext);
    const contextProps = {
        activeTabId,
        onChange,
        size,
        baseSkin,
    };
    const selected = id !== undefined && activeTabId !== undefined && id === activeTabId;
    if (type === 'action') {
        return React.createElement(ActionItem, { ...contextProps, ...rest });
    }
    if (type === 'title') {
        return React.createElement(TitleItem, { ...contextProps, ...rest });
    }
    return (React.createElement(SelectableItem, { id: id, tabIndex: tabIndex ?? (rest.disabled ? -1 : 0), selected: selected, ...contextProps, ...rest }));
};
VerticalTabsItem.displayName = 'VerticalTabsItem';
VerticalTabsItem.propTypes = {
    type: PropTypes.any,
    skin: PropTypes.any,
    dataHook: PropTypes.string,
    prefixIcon: PropTypes.any,
    suffixIcon: PropTypes.any,
    children: PropTypes.any,
    disabled: PropTypes.bool,
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    'aria-controls': PropTypes.string,
};
export default withFocusable(VerticalTabsItem);
//# sourceMappingURL=VerticalTabsItem.js.map