{"version":3,"file":"MenuItem.cjs","sources":["../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef } from '@raikou/hooks';\nimport {\n  BoxProps,\n  CompoundStylesApiProps,\n  createEventHandler,\n  createScopedKeydownHandler,\n  parseThemeColor,\n  polymorphicFactory,\n  PolymorphicFactory,\n  RaikouColor,\n  useDirection,\n  useProps,\n  useRaikouTheme,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useMenuContext } from '../Menu.context';\n\nexport type MenuItemStylesNames = 'item' | 'itemLabel' | 'itemSection';\n\nexport interface MenuItemProps extends BoxProps, CompoundStylesApiProps<MenuItemFactory> {\n  /** Item label */\n  children?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color */\n  color?: RaikouColor;\n\n  /** Determines whether the menu should be closed when the item is clicked, overrides `closeOnItemClick` prop on the `Menu` component */\n  closeMenuOnClick?: boolean;\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  /** Disables item */\n  disabled?: boolean;\n}\n\nexport type MenuItemFactory = PolymorphicFactory<{\n  props: MenuItemProps;\n  defaultRef: HTMLButtonElement;\n  defaultComponent: 'button';\n  stylesNames: MenuItemStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<MenuItemProps> = {};\n\nexport const MenuItem = polymorphicFactory<MenuItemFactory>((props, ref) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    color,\n    closeMenuOnClick,\n    leftSection,\n    rightSection,\n    children,\n    disabled,\n    ...others\n  } = useProps('MenuItem', defaultProps, props);\n\n  const ctx = useMenuContext();\n  const theme = useRaikouTheme();\n  const { dir } = useDirection();\n  const itemRef = useRef<HTMLButtonElement>();\n  const itemIndex = ctx.getItemIndex(itemRef.current!);\n  const _others: any = others;\n\n  const handleMouseLeave = createEventHandler(_others.onMouseLeave, () => ctx.setHovered(-1));\n  const handleMouseEnter = createEventHandler(_others.onMouseEnter, () =>\n    ctx.setHovered(ctx.getItemIndex(itemRef.current!))\n  );\n\n  const handleClick = createEventHandler(_others.onClick, () => {\n    if (typeof closeMenuOnClick === 'boolean') {\n      closeMenuOnClick && ctx.closeDropdownImmediately();\n    } else {\n      ctx.closeOnItemClick && ctx.closeDropdownImmediately();\n    }\n  });\n\n  const handleFocus = createEventHandler(_others.onFocus, () =>\n    ctx.setHovered(ctx.getItemIndex(itemRef.current!))\n  );\n\n  const colors = color ? theme.variantColorResolver({ color, theme, variant: 'light' }) : undefined;\n  const parsedThemeColor = color ? parseThemeColor({ color, theme }) : null;\n\n  return (\n    <UnstyledButton\n      {...others}\n      unstyled={ctx.unstyled}\n      tabIndex={ctx.menuItemTabIndex}\n      onFocus={handleFocus}\n      {...ctx.getStyles('item', { className, style, styles, classNames })}\n      ref={useMergedRef(itemRef, ref)}\n      role=\"menuitem\"\n      disabled={disabled}\n      data-menu-item\n      data-disabled={disabled || undefined}\n      data-hovered={ctx.hovered === itemIndex ? true : undefined}\n      data-raikou-stop-propagation\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onClick={handleClick}\n      onKeyDown={createScopedKeydownHandler({\n        siblingSelector: '[data-menu-item]',\n        parentSelector: '[data-menu-dropdown]',\n        activateOnFocus: false,\n        loop: ctx.loop,\n        dir,\n        orientation: 'vertical',\n        onKeyDown: _others.onKeyDown,\n      })}\n      __vars={{\n        '--menu-item-color':\n          parsedThemeColor?.isThemeColor && parsedThemeColor?.shade === undefined\n            ? `var(--raikou-color-${parsedThemeColor.color}-6)`\n            : colors?.color,\n        '--menu-item-hover': colors?.hover,\n      }}\n    >\n      {leftSection && (\n        <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"left\">\n          {leftSection}\n        </div>\n      )}\n      {children && <div {...ctx.getStyles('itemLabel', { styles, classNames })}>{children}</div>}\n      {rightSection && (\n        <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"right\">\n          {rightSection}\n        </div>\n      )}\n    </UnstyledButton>\n  );\n});\n\nMenuItem.displayName = '@raikou/core/MenuItem';\n"],"names":["polymorphicFactory","useProps","useMenuContext","useRaikouTheme","useDirection","useRef","createEventHandler","parseThemeColor","jsxs","UnstyledButton","useMergedRef","createScopedKeydownHandler","jsx"],"mappings":"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"}