@mantine/core/esm/components/NavLink/NavLink.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { getSpacing } from "../../core/utils/get-size/get-size.mjs";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { polymorphicFactory } from "../../core/factory/polymorphic-factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import { Collapse } from "../Collapse/Collapse.mjs";
import { UnstyledButton } from "../UnstyledButton/UnstyledButton.mjs";
import { AccordionChevron } from "../Accordion/AccordionChevron.mjs";
import NavLink_module_default from "./NavLink.module.mjs";
import { useUncontrolled } from "@mantine/hooks";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/NavLink/NavLink.tsx
const varsResolver = 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": getSpacing(childrenOffset) }
	};
});
const NavLink = polymorphicFactory((_props) => {
	const 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 = useStyles({
		name: "NavLink",
		props,
		classes: NavLink_module_default,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const [_opened, setOpened] = useUncontrolled({
		value: opened,
		defaultValue: defaultOpened,
		finalValue: false,
		onChange
	});
	const withChildren = !!children;
	const handleClick = (event) => {
		onClick?.(event);
		if (withChildren) {
			event.preventDefault();
			setOpened(!_opened);
		}
	};
	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(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__ */ jsx(Box, {
				component: "span",
				...getStyles("section"),
				mod: { position: "left" },
				children: leftSection
			}),
			/* @__PURE__ */ jsxs(Box, {
				...getStyles("body"),
				mod: { "no-wrap": noWrap },
				children: [/* @__PURE__ */ jsx(Box, {
					component: "span",
					...getStyles("label"),
					children: label
				}), /* @__PURE__ */ jsx(Box, {
					component: "span",
					mod: { active },
					...getStyles("description"),
					children: description
				})]
			}),
			(withChildren || rightSection !== void 0) && /* @__PURE__ */ jsx(Box, {
				...getStyles("section"),
				component: "span",
				mod: {
					rotate: _opened && !disableRightSectionRotation,
					position: "right"
				},
				children: withChildren ? rightSection !== void 0 ? rightSection : /* @__PURE__ */ jsx(AccordionChevron, { ...getStyles("chevron") }) : rightSection
			})
		]
	}), withChildren && /* @__PURE__ */ jsx(Collapse, {
		expanded: _opened,
		keepMounted,
		...getStyles("collapse"),
		children: /* @__PURE__ */ jsx("div", {
			...getStyles("children"),
			children
		})
	})] });
});
NavLink.classes = NavLink_module_default;
NavLink.varsResolver = varsResolver;
NavLink.displayName = "@mantine/core/NavLink";
//#endregion
export { NavLink };

//# sourceMappingURL=NavLink.mjs.map