@mantine/core/cjs/components/Menu/MenuSubItem/MenuSubItem.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"MenuSubItem.cjs","names":["polymorphicFactory","useProps","useMenuContext","SubMenuContext","useMantineTheme","useDirection","parseThemeColor","createEventHandler","UnstyledButton","createScopedKeydownHandler","AccordionChevron","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';\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 handleMouseEnter = createEventHandler(_others.onMouseEnter, subCtx?.open);\n  const handleMouseLeave = createEventHandler(_others.onMouseLeave, subCtx?.close);\n\n  return (\n    <UnstyledButton\n      onMouseDown={(event) => event.preventDefault()}\n      {...others}\n      unstyled={ctx.unstyled}\n      tabIndex={ctx.menuItemTabIndex}\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-sub-menu-item\n      data-disabled={disabled || dataDisabled || undefined}\n      data-mantine-stop-propagation\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onClick={handleClick}\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      {leftSection && (\n        <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"left\">\n          {leftSection}\n        </div>\n      )}\n\n      {children && <div {...ctx.getStyles('itemLabel', { styles, classNames })}>{children}</div>}\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":";;;;;;;;;;;;;;;;;;AAqDA,MAAa,cAAcA,4BAAAA,oBAAwC,UAAU;CAC3E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,aACA,cACA,UACA,UACA,iBAAiB,cACjB,kBACA,KACA,GAAG,WACDC,kBAAAA,SAAS,eAAe,MAAM,MAAM;CAExC,MAAM,MAAMC,qBAAAA,gBAAgB;CAC5B,MAAM,UAAA,GAAA,MAAA,KAAaC,wBAAAA,eAAe;CAClC,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,EAAE,QAAQC,0BAAAA,cAAc;CAC9B,MAAM,WAAA,GAAA,MAAA,QAAoC,KAAK;CAC/C,MAAM,UAAe;CAErB,MAAM,SAAS,QAAQ,MAAM,qBAAqB;EAAE;EAAO;EAAO,SAAS;EAAS,CAAC,GAAG,KAAA;CACxF,MAAM,mBAAmB,QAAQC,0BAAAA,gBAAgB;EAAE;EAAO;EAAO,CAAC,GAAG;CAErE,MAAM,gBAAgBC,6BAAAA,mBAAwB,QAAQ,YAAY,UAAU;AAC1E,MAAI,MAAM,QAAQ,cAAc;AAC9B,WAAQ,MAAM;AACd,WAAQ,gBAAgB;;AAG1B,MAAI,MAAM,QAAQ,eAAe,QAAQ,eAAe;AACtD,UAAO,cAAc,OAAO;AAC5B,UAAO,cAAc,iBAAiB;;GAExC;CAEF,MAAM,cAAcA,6BAAAA,mBAAmB,QAAQ,eAAe;AAC5D,MAAI,CAAC,gBAAgB,iBACnB,KAAI,0BAA0B;GAEhC;CAEF,MAAM,mBAAmBA,6BAAAA,mBAAmB,QAAQ,cAAc,QAAQ,KAAK;CAC/E,MAAM,mBAAmBA,6BAAAA,mBAAmB,QAAQ,cAAc,QAAQ,MAAM;AAEhF,QACE,iBAAA,GAAA,kBAAA,MAACC,uBAAAA,gBAAD;EACE,cAAc,UAAU,MAAM,gBAAgB;EAC9C,GAAI;EACJ,UAAU,IAAI;EACd,UAAU,IAAI;EACd,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO;GAAQ;GAAY,CAAC;EACnE,MAAA,GAAA,eAAA,cAAkB,SAAS,IAAI;EAC/B,MAAK;EACK;EACV,kBAAA;EACA,sBAAA;EACA,iBAAe,YAAY,gBAAgB,KAAA;EAC3C,iCAAA;EACA,cAAc;EACd,cAAc;EACd,SAAS;EACT,WAAWC,sCAAAA,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB;GACjB,MAAM,IAAI;GACV;GACA,aAAa;GACb,WAAW;GACZ,CAAC;EACF,QAAQ;GACN,qBACE,kBAAkB,gBAAgB,kBAAkB,UAAU,KAAA,IAC1D,uBAAuB,iBAAiB,MAAM,OAC9C,QAAQ;GACd,qBAAqB,QAAQ;GAC9B;YA/BH;GAiCG,eACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe;KAAE;KAAQ;KAAY,CAAC;IAAE,iBAAc;cAC1E;IACG,CAAA;GAGP,YAAY,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa;KAAE;KAAQ;KAAY,CAAC;IAAG;IAAe,CAAA;GAE1F,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe;KAAE;KAAQ;KAAY,CAAC;IAAE,iBAAc;cAC1E,gBAAgB,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD;KAAkB,GAAI,IAAI,UAAU,UAAU;KAAE,MAAM;KAAM,CAAA;IACzE,CAAA;GACS;;EAEnB;AAEF,YAAY,UAAUC,oBAAAA;AACtB,YAAY,cAAc"}