@wix/design-system
Version:
@wix/design-system
28 lines • 1.71 kB
JavaScript
import React from 'react';
import VerticalTabsItem from '../VerticalTabsItem';
import VerticalTabsContext from './VerticalTabsContext';
import { SIZE, SKIN } from './VerticalTabs.constants';
import VerticalTabsIconItem from '../VerticalTabsIconItem';
import { useTabNavigation } from '../common/useTabNavigation';
import { classes } from './VerticalTabs.st.css.js';
/** Vertical tabs navigation panel. */
const Footer = ({ children }) => (React.createElement(VerticalTabsItem, { type: "action" }, children));
const TabsGroup = ({ title = '', children }) => (React.createElement(React.Fragment, null,
React.createElement(VerticalTabsItem, { type: "title" }, title),
children));
const VerticalTabs = ({ dataHook, children, size = SIZE.MEDIUM, skin = SKIN.LIGHT, activeTabId, ellipsis = false, maxWidth, onChange, }) => {
const tabNavigationRef = useTabNavigation({ orientation: 'vertical' });
return (React.createElement(VerticalTabsContext.Provider
// @ts-expect-error - didn't manage to make context work with components generics
, {
// @ts-expect-error - didn't manage to make context work with components generics
value: { size, skin, activeTabId, ellipsis, onChange } },
React.createElement("div", { className: classes.root, "data-hook": dataHook, "aria-orientation": "vertical", role: "tablist", style: { maxWidth }, "data-active-tab-id": activeTabId, ref: tabNavigationRef }, children)));
};
VerticalTabs.TabsGroup = TabsGroup;
VerticalTabs.TabItem = VerticalTabsItem;
VerticalTabs.IconItem = VerticalTabsIconItem;
VerticalTabs.Footer = Footer;
VerticalTabs.displayName = 'VerticalTabs';
export default VerticalTabs;
//# sourceMappingURL=VerticalTabs.js.map