@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
127 lines (126 loc) • 4.73 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_get_size = require("../../core/utils/get-size/get-size.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_polymorphic_factory = require("../../core/factory/polymorphic-factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
const require_Collapse = require("../Collapse/Collapse.cjs");
const require_UnstyledButton = require("../UnstyledButton/UnstyledButton.cjs");
const require_AccordionChevron = require("../Accordion/AccordionChevron.cjs");
const require_NavLink_module = require("./NavLink.module.cjs");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/NavLink/NavLink.tsx
const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { variant, color, childrenOffset, autoContrast }) => {
const colors = theme.variantColorResolver({
color: color || theme.primaryColor,
theme,
variant: variant || "light",
autoContrast
});
return {
root: {
"--nl-bg": color || variant ? colors.background : void 0,
"--nl-hover": color || variant ? colors.hover : void 0,
"--nl-color": color || variant ? colors.color : void 0
},
children: { "--nl-offset": require_get_size.getSpacing(childrenOffset) }
};
});
const NavLink = require_polymorphic_factory.polymorphicFactory((_props) => {
const props = require_use_props.useProps("NavLink", null, _props);
const { classNames, className, style, styles, unstyled, vars, opened, defaultOpened, onChange, children, active, disabled, leftSection, rightSection, label, description, disableRightSectionRotation, noWrap, childrenOffset, autoContrast, mod, attributes, onClick, onKeyDown, keepMounted, ...others } = props;
const getStyles = require_use_styles.useStyles({
name: "NavLink",
props,
classes: require_NavLink_module.default,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
const [_opened, setOpened] = (0, _mantine_hooks.useUncontrolled)({
value: opened,
defaultValue: defaultOpened,
finalValue: false,
onChange
});
const withChildren = !!children;
const handleClick = (event) => {
onClick?.(event);
if (withChildren) {
event.preventDefault();
setOpened(!_opened);
}
};
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_UnstyledButton.UnstyledButton, {
...getStyles("root"),
component: "a",
onClick: handleClick,
onKeyDown: (event) => {
onKeyDown?.(event);
if (event.nativeEvent.code === "Space" && withChildren) {
event.preventDefault();
setOpened(!_opened);
}
},
unstyled,
mod: [{
disabled,
active,
expanded: _opened
}, mod],
...others,
children: [
leftSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
component: "span",
...getStyles("section"),
mod: { position: "left" },
children: leftSection
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
...getStyles("body"),
mod: { "no-wrap": noWrap },
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
component: "span",
...getStyles("label"),
children: label
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
component: "span",
mod: { active },
...getStyles("description"),
children: description
})]
}),
(withChildren || rightSection !== void 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
...getStyles("section"),
component: "span",
mod: {
rotate: _opened && !disableRightSectionRotation,
position: "right"
},
children: withChildren ? rightSection !== void 0 ? rightSection : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AccordionChevron.AccordionChevron, { ...getStyles("chevron") }) : rightSection
})
]
}), withChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Collapse.Collapse, {
expanded: _opened,
keepMounted,
...getStyles("collapse"),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
...getStyles("children"),
children
})
})] });
});
NavLink.classes = require_NavLink_module.default;
NavLink.varsResolver = varsResolver;
NavLink.displayName = "@mantine/core/NavLink";
//#endregion
exports.NavLink = NavLink;
//# sourceMappingURL=NavLink.cjs.map