@magicbell/magicbell-react/dist/commonjs/components/Tabs/Tabs.js

React components for building a notification inbox for your app

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
const react_1 = require("@emotion/react");
const react_2 = require("react");
const MagicBellThemeContext_js_1 = require("../../context/MagicBellThemeContext.js");
const index_js_1 = tslib_1.__importDefault(require("../Text/index.js"));
function isTab(child) {
    return child != null && typeof child === 'object' && child['type'] === Tab;
}
function Tabs({ children, active, onChange, }) {
    const { tabs } = (0, MagicBellThemeContext_js_1.useTheme)();
    const style = (0, react_1.css) `
    margin: ${tabs.margin} !important;

    & > * + * {
      margin-left: ${tabs.spacing} !important;
    }
  `;
    return ((0, jsx_runtime_1.jsx)("div", { css: style, role: "tablist", children: react_2.Children.toArray(children)
            .filter(isTab)
            .map((child, idx) => ({
            ...child,
            props: {
                ...child.props,
                'data-selected': active ? child.props.value === active : idx === 0,
                onClick: () => onChange(child.props.value),
            },
        })) }));
}
function Tab({ children, value, ...props }) {
    const { tabs } = (0, MagicBellThemeContext_js_1.useTheme)();
    // use [aria-selected] to increase specificity, we'll lose from header > button without it
    const style = (0, react_1.css) `
    &[aria-selected] {
      padding: 10px 8px 12px !important;
      font-weight: ${tabs.fontWeight} !important;
      line-height: 1.5 !important;
      font-size: ${tabs.fontSize} !important;
      color: ${tabs.color} !important;

      &[aria-selected='true'] {
        color: ${tabs.activeColor} !important;
        box-shadow: inset 0px -2px 0px ${tabs.activeColor};
      }
    }
  `;
    return ((0, jsx_runtime_1.jsx)("button", { ...props, css: style, role: "tab", "aria-selected": Boolean(props['data-selected']), children: typeof children === 'string' ? (0, jsx_runtime_1.jsx)(index_js_1.default, { id: `tab.${value}`, defaultMessage: children }) : children }));
}
Tabs.Tab = Tab;
exports.default = Tabs;
//# sourceMappingURL=Tabs.js.map