@mantine/core/esm/components/Menu/MenuSubItem/MenuSubItem.mjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"MenuSubItem.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuSubItem/MenuSubItem.tsx"],"sourcesContent":["import { use, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  BoxProps,\n  CompoundStylesApiProps,\n  createEventHandler,\n  createScopedKeydownHandler,\n  MantineColor,\n  parseThemeColor,\n  polymorphicFactory,\n  PolymorphicFactory,\n  useDirection,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { AccordionChevron } from '../../Accordion';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useMenuContext } from '../Menu.context';\nimport { SubMenuContext } from '../MenuSub/MenuSub.context';\nimport classes from '../Menu.module.css';\n\nexport type MenuSubItemStylesNames = 'item' | 'itemLabel' | 'itemSection' | 'itemIndicator';\n\nexport interface MenuSubItemProps extends BoxProps, CompoundStylesApiProps<MenuSubItemFactory> {\n  'data-disabled'?: boolean;\n\n  /** Item label */\n  children?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color */\n  color?: MantineColor;\n\n  /** Section displayed at the start of the label */\n  leftSection?: React.ReactNode;\n\n  /** Section displayed at the end of the label */\n  rightSection?: React.ReactNode;\n\n  /** Sets disabled attribute, applies disabled styles */\n  disabled?: boolean;\n\n  /** If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component. */\n  closeMenuOnClick?: boolean;\n}\n\nexport type MenuSubItemFactory = PolymorphicFactory<{\n  props: MenuSubItemProps;\n  defaultRef: HTMLButtonElement;\n  defaultComponent: 'button';\n  stylesNames: MenuSubItemStylesNames;\n  compound: true;\n}>;\n\nexport const MenuSubItem = polymorphicFactory<MenuSubItemFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    color,\n    leftSection,\n    rightSection,\n    children,\n    disabled,\n    'data-disabled': dataDisabled,\n    closeMenuOnClick,\n    ref,\n    ...others\n  } = useProps('MenuSubItem', null, props);\n\n  const ctx = useMenuContext();\n  const subCtx = use(SubMenuContext);\n  const theme = useMantineTheme();\n  const { dir } = useDirection();\n  const itemRef = useRef<HTMLButtonElement>(null);\n  const _others: any = others;\n\n  const colors = color ? theme.variantColorResolver({ color, theme, variant: 'light' }) : undefined;\n  const parsedThemeColor = color ? parseThemeColor({ color, theme }) : null;\n\n  const handleKeydown = createEventHandler<any>(_others.onKeyDown, (event) => {\n    if (event.key === 'ArrowRight') {\n      subCtx?.open();\n      subCtx?.focusFirstItem();\n    }\n\n    if (event.key === 'ArrowLeft' && subCtx?.parentContext) {\n      subCtx.parentContext.close();\n      subCtx.parentContext.focusParentItem();\n    }\n  });\n\n  const handleClick = createEventHandler(_others.onClick, () => {\n    if (!dataDisabled && closeMenuOnClick) {\n      ctx.closeDropdownImmediately();\n    }\n  });\n\n  const handleMouseMove = createEventHandler<any>(_others.onMouseMove, () => {\n    if (!ctx.hasSearch) {\n      return;\n    }\n    const dropdown = itemRef.current?.closest('[data-menu-dropdown]');\n    if (!dropdown) {\n      return;\n    }\n    dropdown.querySelectorAll<HTMLElement>('[data-menu-active]').forEach((node) => {\n      if (node !== itemRef.current && node.closest('[data-menu-dropdown]') === dropdown) {\n        node.removeAttribute('data-menu-active');\n      }\n    });\n  });\n\n  const referenceProps = subCtx?.getReferenceProps({\n    onMouseEnter: _others.onMouseEnter,\n    onMouseLeave: _others.onMouseLeave,\n    onPointerEnter: _others.onPointerEnter,\n    onPointerLeave: _others.onPointerLeave,\n  });\n\n  return (\n    <UnstyledButton\n      onMouseDown={(event) => event.preventDefault()}\n      {...others}\n      {...referenceProps}\n      unstyled={ctx.unstyled}\n      tabIndex={ctx.menuItemTabIndex}\n      {...ctx.getStyles('item', { className, style, styles, classNames })}\n      ref={useMergedRef(itemRef, ref, subCtx?.setReference)}\n      role=\"menuitem\"\n      disabled={disabled}\n      data-menu-item\n      data-sub-menu-item\n      data-disabled={disabled || dataDisabled || undefined}\n      data-mantine-stop-propagation\n      onClick={handleClick}\n      onMouseMove={handleMouseMove}\n      onKeyDown={createScopedKeydownHandler({\n        siblingSelector: '[data-menu-item]:not([data-disabled])',\n        parentSelector: '[data-menu-dropdown]',\n        activateOnFocus: false,\n        loop: ctx.loop,\n        dir,\n        orientation: 'vertical',\n        onKeyDown: handleKeydown,\n      })}\n      __vars={{\n        '--menu-item-color':\n          parsedThemeColor?.isThemeColor && parsedThemeColor?.shade === undefined\n            ? `var(--mantine-color-${parsedThemeColor.color}-6)`\n            : colors?.color,\n        '--menu-item-hover': colors?.hover,\n      }}\n    >\n      {ctx.alignItemsLabels === 'all' && (\n        <div {...ctx.getStyles('itemIndicator', { styles, classNames })} data-placeholder />\n      )}\n      {leftSection && (\n        <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"left\">\n          {leftSection}\n        </div>\n      )}\n\n      {children && (\n        <div {...ctx.getStyles('itemLabel', { styles, classNames })} data-menu-item-label>\n          {children}\n        </div>\n      )}\n\n      <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"right\">\n        {rightSection || <AccordionChevron {...ctx.getStyles('chevron')} size={14} />}\n      </div>\n    </UnstyledButton>\n  );\n});\n\nMenuSubItem.classes = classes;\nMenuSubItem.displayName = '@mantine/core/MenuSubItem';\n"],"mappings":"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"}