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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"NavLink.cjs","names":["createVarsResolver","getSpacing","polymorphicFactory","useProps","useStyles","UnstyledButton","Box","AccordionChevron","Collapse","classes"],"sources":["../../../src/components/NavLink/NavLink.tsx"],"sourcesContent":["import { useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getSpacing,\n  MantineColor,\n  MantineSpacing,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AccordionChevron } from '../Accordion';\nimport { Collapse } from '../Collapse';\nimport { UnstyledButton } from '../UnstyledButton';\nimport classes from './NavLink.module.css';\n\nexport type NavLinkStylesNames =\n  | 'root'\n  | 'section'\n  | 'body'\n  | 'label'\n  | 'description'\n  | 'chevron'\n  | 'collapse'\n  | 'children';\nexport type NavLinkVariant = 'filled' | 'light' | 'subtle';\nexport type NavLinkCssVariables = {\n  root: '--nl-color' | '--nl-bg' | '--nl-hover';\n  children: '--nl-offset';\n};\n\nexport interface NavLinkProps extends BoxProps, StylesApiProps<NavLinkFactory> {\n  /** Main link label */\n  label?: React.ReactNode;\n\n  /** Link description, displayed below the label */\n  description?: React.ReactNode;\n\n  /** Section displayed on the left side of the label */\n  leftSection?: React.ReactNode;\n\n  /** Section displayed on the right side of the label */\n  rightSection?: React.ReactNode;\n\n  /** Determines whether the link should have active styles @default false */\n  active?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color to control active styles @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** If set, label and description are truncated with ellipsis instead of wrapping @default false */\n  noWrap?: boolean;\n\n  /** Child `NavLink` components */\n  children?: React.ReactNode;\n\n  /** Controlled nested items collapse state */\n  opened?: boolean;\n\n  /** Uncontrolled nested items collapse initial state */\n  defaultOpened?: boolean;\n\n  /** Called when open state changes */\n  onChange?: (opened: boolean) => void;\n\n  /** If set, right section will not be rotated when collapse is opened @default false */\n  disableRightSectionRotation?: boolean;\n\n  /** Controls indentation of nested NavLink components, key of `theme.spacing` or any valid CSS value @default 'lg' */\n  childrenOffset?: MantineSpacing;\n\n  /** If set, disabled styles will be added to the root element @default false */\n  disabled?: boolean;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Called when the root element is clicked */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n\n  /** Called on keydown of the root element */\n  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n\n  /** If set to `false`, child `NavLinks` are unmounted when collapsed */\n  keepMounted?: boolean;\n}\n\nexport type NavLinkFactory = PolymorphicFactory<{\n  props: NavLinkProps;\n  defaultRef: HTMLAnchorElement;\n  defaultComponent: 'a';\n  stylesNames: NavLinkStylesNames;\n  vars: NavLinkCssVariables;\n  variant: NavLinkVariant;\n}>;\n\nconst varsResolver = createVarsResolver<NavLinkFactory>(\n  (theme, { variant, color, childrenOffset, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'light',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--nl-bg': color || variant ? colors.background : undefined,\n        '--nl-hover': color || variant ? colors.hover : undefined,\n        '--nl-color': color || variant ? colors.color : undefined,\n      },\n\n      children: {\n        '--nl-offset': getSpacing(childrenOffset),\n      },\n    };\n  }\n);\n\nexport const NavLink = polymorphicFactory<NavLinkFactory>((_props) => {\n  const props = useProps('NavLink', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    opened,\n    defaultOpened,\n    onChange,\n    children,\n    active,\n    disabled,\n    leftSection,\n    rightSection,\n    label,\n    description,\n    disableRightSectionRotation,\n    noWrap,\n    childrenOffset,\n    autoContrast,\n    mod,\n    attributes,\n    onClick,\n    onKeyDown,\n    keepMounted,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<NavLinkFactory>({\n    name: 'NavLink',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const [_opened, setOpened] = useUncontrolled({\n    value: opened,\n    defaultValue: defaultOpened,\n    finalValue: false,\n    onChange,\n  });\n\n  const withChildren = !!children;\n\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.(event);\n\n    if (withChildren) {\n      event.preventDefault();\n      setOpened(!_opened);\n    }\n  };\n\n  return (\n    <>\n      <UnstyledButton\n        {...getStyles('root')}\n        component=\"a\"\n        onClick={handleClick}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n\n          if (event.nativeEvent.code === 'Space' && withChildren) {\n            event.preventDefault();\n            setOpened(!_opened);\n          }\n        }}\n        unstyled={unstyled}\n        mod={[{ disabled, active, expanded: _opened }, mod]}\n        {...others}\n      >\n        {leftSection && (\n          <Box component=\"span\" {...getStyles('section')} mod={{ position: 'left' }}>\n            {leftSection}\n          </Box>\n        )}\n        <Box {...getStyles('body')} mod={{ 'no-wrap': noWrap }}>\n          <Box component=\"span\" {...getStyles('label')}>\n            {label}\n          </Box>\n          <Box component=\"span\" mod={{ active }} {...getStyles('description')}>\n            {description}\n          </Box>\n        </Box>\n        {(withChildren || rightSection !== undefined) && (\n          <Box\n            {...getStyles('section')}\n            component=\"span\"\n            mod={{ rotate: _opened && !disableRightSectionRotation, position: 'right' }}\n          >\n            {withChildren ? (\n              rightSection !== undefined ? (\n                rightSection\n              ) : (\n                <AccordionChevron {...getStyles('chevron')} />\n              )\n            ) : (\n              rightSection\n            )}\n          </Box>\n        )}\n      </UnstyledButton>\n      {withChildren && (\n        <Collapse expanded={_opened} keepMounted={keepMounted} {...getStyles('collapse')}>\n          <div {...getStyles('children')}>{children}</div>\n        </Collapse>\n      )}\n    </>\n  );\n});\n\nNavLink.classes = classes;\nNavLink.varsResolver = varsResolver;\nNavLink.displayName = '@mantine/core/NavLink';\n"],"mappings":"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"}