@mantine/core/cjs/components/NavLink/NavLink.cjs

React components library focused on usability, accessibility and developer experience

'use client';
'use strict';

var React = require('react');
var hooks = require('@mantine/hooks');
var getSize = require('../../core/utils/get-size/get-size.cjs');
var createVarsResolver = require('../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs');
require('clsx');
require('../../core/MantineProvider/Mantine.context.cjs');
require('../../core/MantineProvider/default-theme.cjs');
require('../../core/MantineProvider/MantineProvider.cjs');
require('../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs');
var useProps = require('../../core/MantineProvider/use-props/use-props.cjs');
var useStyles = require('../../core/styles-api/use-styles/use-styles.cjs');
var Box = require('../../core/Box/Box.cjs');
var polymorphicFactory = require('../../core/factory/polymorphic-factory.cjs');
require('../../core/DirectionProvider/DirectionProvider.cjs');
require('../Accordion/Accordion.cjs');
var AccordionChevron = require('../Accordion/AccordionChevron.cjs');
require('../Accordion/AccordionItem/AccordionItem.cjs');
require('../Accordion/AccordionPanel/AccordionPanel.cjs');
require('../Accordion/AccordionControl/AccordionControl.cjs');
var Collapse = require('../Collapse/Collapse.cjs');
var UnstyledButton = require('../UnstyledButton/UnstyledButton.cjs');
var NavLink_module = require('./NavLink.module.css.cjs');

const defaultProps = {};
const varsResolver = createVarsResolver.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": getSize.getSpacing(childrenOffset)
      }
    };
  }
);
const NavLink = polymorphicFactory.polymorphicFactory((_props, ref) => {
  const props = useProps.useProps("NavLink", defaultProps, _props);
  const {
    classNames,
    className,
    style,
    styles,
    unstyled,
    vars,
    opened,
    defaultOpened,
    onChange,
    children,
    onClick,
    active,
    disabled,
    leftSection,
    rightSection,
    label,
    description,
    disableRightSectionRotation,
    noWrap,
    childrenOffset,
    onKeyDown,
    autoContrast,
    mod,
    ...others
  } = props;
  const getStyles = useStyles.useStyles({
    name: "NavLink",
    props,
    classes: NavLink_module,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  const [_opened, setOpened] = 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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    UnstyledButton.UnstyledButton,
    {
      ...getStyles("root"),
      component: "a",
      ref,
      onClick: handleClick,
      onKeyDown: (event) => {
        onKeyDown?.(event);
        if (event.nativeEvent.code === "Space" && withChildren) {
          event.preventDefault();
          setOpened(!_opened);
        }
      },
      unstyled,
      mod: [{ disabled, active, expanded: _opened }, mod],
      ...others
    },
    leftSection && /* @__PURE__ */ React.createElement(Box.Box, { component: "span", ...getStyles("section"), mod: { position: "left" } }, leftSection),
    /* @__PURE__ */ React.createElement(Box.Box, { ...getStyles("body"), mod: { "no-wrap": noWrap } }, /* @__PURE__ */ React.createElement(Box.Box, { component: "span", ...getStyles("label") }, label), /* @__PURE__ */ React.createElement(Box.Box, { component: "span", mod: { active }, ...getStyles("description") }, description)),
    (withChildren || rightSection) && /* @__PURE__ */ React.createElement(
      Box.Box,
      {
        ...getStyles("section"),
        component: "span",
        mod: { rotate: _opened && !disableRightSectionRotation, position: "right" }
      },
      withChildren ? rightSection || /* @__PURE__ */ React.createElement(AccordionChevron.AccordionChevron, { ...getStyles("chevron") }) : rightSection
    )
  ), /* @__PURE__ */ React.createElement(Collapse.Collapse, { in: _opened }, /* @__PURE__ */ React.createElement("div", { ...getStyles("children") }, children)));
});
NavLink.classes = NavLink_module;
NavLink.displayName = "@mantine/core/NavLink";

exports.NavLink = NavLink;
//# sourceMappingURL=NavLink.cjs.map