@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
87 lines (86 loc) • 3.53 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_create_scoped_keydown_handler = require("../../../core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.cjs");
const require_get_theme_color = require("../../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.cjs");
const require_MantineThemeProvider = require("../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
const require_factory = require("../../../core/factory/factory.cjs");
const require_DirectionProvider = require("../../../core/DirectionProvider/DirectionProvider.cjs");
const require_UnstyledButton = require("../../UnstyledButton/UnstyledButton.cjs");
const require_Tabs_context = require("../Tabs.context.cjs");
const require_Tabs_module = require("../Tabs.module.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Tabs/TabsTab/TabsTab.tsx
const TabsTab = require_factory.factory((_props) => {
const props = require_use_props.useProps("TabsTab", null, _props);
const { className, children, rightSection, leftSection, value, onClick, onKeyDown, disabled, color, style, classNames, styles, vars, mod, tabIndex, ...others } = props;
const theme = require_MantineThemeProvider.useMantineTheme();
const { dir } = require_DirectionProvider.useDirection();
const ctx = require_Tabs_context.useTabsContext();
const active = value === ctx.value;
const activateTab = (event) => {
ctx.onChange(ctx.allowTabDeactivation ? value === ctx.value ? null : value : value);
onClick?.(event);
};
const stylesApiProps = {
classNames,
styles,
props
};
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_UnstyledButton.UnstyledButton, {
...ctx.getStyles("tab", {
className,
style,
variant: ctx.variant,
...stylesApiProps
}),
disabled,
unstyled: ctx.unstyled,
variant: ctx.variant,
mod: [{
active,
disabled,
orientation: ctx.orientation,
inverted: ctx.inverted,
placement: ctx.orientation === "vertical" && ctx.placement
}, mod],
role: "tab",
id: ctx.getTabId(value),
"aria-selected": active,
tabIndex: tabIndex !== void 0 ? tabIndex : active || ctx.value === null ? 0 : -1,
"aria-controls": ctx.getPanelId(value),
onClick: activateTab,
__vars: { "--tabs-color": color ? require_get_theme_color.getThemeColor(color, theme) : void 0 },
onKeyDown: require_create_scoped_keydown_handler.createScopedKeydownHandler({
siblingSelector: "[role=\"tab\"]",
parentSelector: "[role=\"tablist\"]",
activateOnFocus: ctx.activateTabWithKeyboard,
loop: ctx.loop,
orientation: ctx.orientation || "horizontal",
dir,
onKeyDown
}),
...others,
children: [
leftSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
...ctx.getStyles("tabSection", stylesApiProps),
"data-position": "left",
children: leftSection
}),
children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
...ctx.getStyles("tabLabel", stylesApiProps),
children
}),
rightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
...ctx.getStyles("tabSection", stylesApiProps),
"data-position": "right",
children: rightSection
})
]
});
});
TabsTab.classes = require_Tabs_module.default;
TabsTab.displayName = "@mantine/core/TabsTab";
//#endregion
exports.TabsTab = TabsTab;
//# sourceMappingURL=TabsTab.cjs.map