@drivy/cobalt/components/Tabs/index.js

Opinionated design system for Drivy's projects.

import React from 'react';
import { Tabs as Tabs$1 } from '@ark-ui/react';
import cx from 'classnames';

// Only for the API, render nothing, we use InternalTab component internally
const Tab = (_props) => null;
Tab.displayName = "Tab";
const isTabComponent = (component) => React.isValidElement(component) && component.type === Tab;
const Tabs = ({ defaultTabId, subLevel, children, onChange, }) => {
    var _a;
    const tabsPropsArray = [];
    const tabsChildren = [];
    let matchedHrefId = undefined;
    React.Children.forEach(children, (child) => {
        if (isTabComponent(child)) {
            const { children: tabChildren, ...tabProps } = child.props;
            tabsPropsArray.push(tabProps);
            // if no children, it will be null, nothing will be rendered
            tabsChildren.push(React.createElement(Tabs$1.Content, { value: tabProps.id, className: "cobalt-tabs__panel", key: tabProps.id }, tabChildren));
            if (tabProps.href === window.location.pathname) {
                matchedHrefId = tabProps.id;
            }
        }
    });
    const getOnLinkClick = (href) => {
        if (!href)
            return;
        return () => (window.location.pathname = href);
    };
    return (React.createElement(Tabs$1.Root, { className: "cobalt-tabs", defaultValue: matchedHrefId || (defaultTabId === null || defaultTabId === void 0 ? void 0 : defaultTabId.toString()) || ((_a = tabsPropsArray === null || tabsPropsArray === void 0 ? void 0 : tabsPropsArray[0]) === null || _a === void 0 ? void 0 : _a.id), onValueChange: (details) => onChange === null || onChange === void 0 ? void 0 : onChange(details.value) },
        React.createElement(Tabs$1.List, { className: cx("cobalt-tabs__labels", {
                "cobalt-tabs__labels--subLevel": subLevel,
            }) },
            tabsPropsArray.map((props, index) => (React.createElement(Tabs$1.Trigger, { className: "cobalt-tabs__label", value: props.id, onClick: getOnLinkClick(props.href), key: index }, props.label))),
            React.createElement(Tabs$1.Indicator, { className: "cobalt-tabs__indicator" })),
        tabsChildren));
};
Tabs.Tab = Tab;

export { Tab, Tabs as default };
//# sourceMappingURL=index.js.map