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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Menu.cjs","names":["factory","useProps","useStyles","useDelayedHover","getContextItemIndex","useResolvedStylesApi","MenuContextProvider","Popover","classes","MenuItem","MenuLabel","MenuDropdown","MenuTarget","MenuDivider","MenuSub"],"sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  factory,\n  Factory,\n  getContextItemIndex,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { useDelayedHover } from '../../utils/Floating';\nimport { __PopoverProps, Popover, PopoverStylesNames } from '../Popover';\nimport { MenuContextProvider, type MenuContextValue } from './Menu.context';\nimport { MenuDivider, type MenuDividerProps } from './MenuDivider/MenuDivider';\nimport { MenuDropdown, type MenuDropdownProps } from './MenuDropdown/MenuDropdown';\nimport { MenuItem, type MenuItemProps } from './MenuItem/MenuItem';\nimport { MenuLabel, type MenuLabelProps } from './MenuLabel/MenuLabel';\nimport { MenuSub, type MenuSubProps } from './MenuSub/MenuSub';\nimport { MenuTarget, type MenuTargetProps } from './MenuTarget/MenuTarget';\nimport classes from './Menu.module.css';\nimport type { MenuSubDropdownProps } from './MenuSubDropdown/MenuSubDropdown';\nimport type { MenuSubItemProps } from './MenuSubItem/MenuSubItem';\nimport type { MenuSubTargetProps } from './MenuSubTarget/MenuSubTarget';\n\nexport type MenuStylesNames =\n  | 'item'\n  | 'itemLabel'\n  | 'itemSection'\n  | 'label'\n  | 'divider'\n  | 'chevron'\n  | PopoverStylesNames;\n\nexport type MenuFactory = Factory<{\n  props: MenuProps;\n  stylesNames: MenuStylesNames;\n  staticComponents: {\n    Item: typeof MenuItem;\n    Label: typeof MenuLabel;\n    Dropdown: typeof MenuDropdown;\n    Target: typeof MenuTarget;\n    Divider: typeof MenuDivider;\n    Sub: typeof MenuSub;\n  };\n}>;\n\nexport interface MenuProps extends __PopoverProps, StylesApiProps<MenuFactory> {\n  variant?: string;\n\n  /** Menu children */\n  children?: React.ReactNode;\n\n  /** Controlled menu opened state */\n  opened?: boolean;\n\n  /** Uncontrolled menu initial opened state */\n  defaultOpened?: boolean;\n\n  /** If set, focus is trapped within the menu dropdown when it is opened */\n  trapFocus?: boolean;\n\n  /** Called when menu opened state changes */\n  onChange?: (opened: boolean) => void;\n\n  /** Called when Menu is opened */\n  onOpen?: () => void;\n\n  /** Called when Menu is closed */\n  onClose?: () => void;\n\n  /** If set, the Menu is closed when one of the items is clicked. Can be overridden per item with `closeMenuOnClick` prop */\n  closeOnItemClick?: boolean;\n\n  /** If set, arrow key presses wrap around from last item to first and vice versa */\n  loop?: boolean;\n\n  /** If set, the dropdown is closed when the `Escape` key is pressed @default true */\n  closeOnEscape?: boolean;\n\n  /** Event trigger to open menu. Note: 'hover' is not keyboard accessible; prefer 'click-hover' for accessible hover menus */\n  trigger?: 'click' | 'hover' | 'click-hover';\n\n  /** Open delay in ms, applicable only to `trigger=\"hover\"` variant */\n  openDelay?: number;\n\n  /** Close delay in ms, applicable only to `trigger=\"hover\"` variant */\n  closeDelay?: number;\n\n  /** If set, the dropdown is closed on outside clicks */\n  closeOnClickOutside?: boolean;\n\n  /** Events that trigger outside click detection. Includes mousedown for desktop clicks, touchstart for mobile, and keydown for Escape key handling @default ['mousedown', 'touchstart', 'keydown'] */\n  clickOutsideEvents?: string[];\n\n  /** Id base to create accessibility connections */\n  id?: string;\n\n  /** Set the `tabindex` on all menu items. Use `0` to allow Tab key navigation through menu items (required for navigation menus following WAI-ARIA disclosure pattern). @default -1 */\n  menuItemTabIndex?: -1 | 0;\n\n  /** Adds a hidden focusable element at the start of the dropdown to prevent unexpected focus jumps when opening with keyboard. Set to false if you need custom focus management. @default true */\n  withInitialFocusPlaceholder?: boolean;\n\n  /** Determines whether focus should be automatically returned to control when dropdown closes @default `true` */\n  returnFocus?: boolean;\n}\n\nconst defaultProps = {\n  trapFocus: true,\n  closeOnItemClick: true,\n  withInitialFocusPlaceholder: true,\n  clickOutsideEvents: ['mousedown', 'touchstart', 'keydown'],\n  loop: true,\n  trigger: 'click',\n  openDelay: 0,\n  closeDelay: 100,\n  menuItemTabIndex: -1,\n} satisfies Partial<MenuProps>;\n\nexport const Menu = factory<MenuFactory>((_props) => {\n  const props = useProps('Menu', defaultProps, _props);\n  const {\n    children,\n    onOpen,\n    onClose,\n    opened,\n    defaultOpened,\n    trapFocus,\n    onChange,\n    closeOnItemClick,\n    loop,\n    closeOnEscape,\n    trigger,\n    openDelay,\n    closeDelay,\n    classNames,\n    styles,\n    unstyled,\n    variant,\n    vars,\n    menuItemTabIndex,\n    keepMounted,\n    withInitialFocusPlaceholder,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<MenuFactory>({\n    name: 'Menu',\n    classes,\n    props,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  const [_opened, setOpened] = useUncontrolled({\n    value: opened,\n    defaultValue: defaultOpened,\n    finalValue: false,\n    onChange,\n  });\n  const [openedViaClick, setOpenedViaClick] = useState(false);\n\n  const close = () => {\n    setOpened(false);\n    setOpenedViaClick(false);\n    _opened && onClose?.();\n  };\n\n  const open = () => {\n    setOpened(true);\n    !_opened && onOpen?.();\n  };\n\n  const toggleDropdown = () => {\n    _opened ? close() : open();\n  };\n\n  const { openDropdown, closeDropdown } = useDelayedHover({ open, close, closeDelay, openDelay });\n\n  const activeSubCloseRef = useRef<(() => void) | null>(null);\n  const registerOpenSub = useCallback((closeFn: () => void) => {\n    const prev = activeSubCloseRef.current;\n    if (prev && prev !== closeFn) {\n      prev();\n    }\n    activeSubCloseRef.current = closeFn;\n    return () => {\n      if (activeSubCloseRef.current === closeFn) {\n        activeSubCloseRef.current = null;\n      }\n    };\n  }, []);\n\n  const getItemIndex = (node: HTMLButtonElement) =>\n    getContextItemIndex('[data-menu-item]', '[data-menu-dropdown]', node);\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MenuFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <MenuContextProvider\n      value={{\n        getStyles,\n        opened: _opened,\n        toggleDropdown,\n        getItemIndex,\n        openedViaClick,\n        setOpenedViaClick,\n        closeOnItemClick,\n        closeDropdown: trigger === 'click' ? close : closeDropdown,\n        openDropdown: trigger === 'click' ? open : openDropdown,\n        closeDropdownImmediately: close,\n        loop,\n        trigger,\n        unstyled,\n        menuItemTabIndex,\n        withInitialFocusPlaceholder,\n        registerOpenSub,\n      }}\n    >\n      <Popover\n        returnFocus\n        {...others}\n        opened={_opened}\n        onChange={toggleDropdown}\n        defaultOpened={defaultOpened}\n        trapFocus={keepMounted ? false : trapFocus}\n        closeOnEscape={closeOnEscape}\n        __staticSelector=\"Menu\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        variant={variant}\n        keepMounted={keepMounted}\n      >\n        {children}\n      </Popover>\n    </MenuContextProvider>\n  );\n});\n\nMenu.displayName = '@mantine/core/Menu';\nMenu.classes = classes;\nMenu.Item = MenuItem;\nMenu.Label = MenuLabel;\nMenu.Dropdown = MenuDropdown;\nMenu.Target = MenuTarget;\nMenu.Divider = MenuDivider;\nMenu.Sub = MenuSub;\n\nexport namespace Menu {\n  export type Props = MenuProps;\n  export type StylesNames = MenuStylesNames;\n  export type Factory = MenuFactory;\n  export type ContextValue = MenuContextValue;\n\n  export namespace Item {\n    export type Props = MenuItemProps;\n  }\n\n  export namespace Label {\n    export type Props = MenuLabelProps;\n  }\n\n  export namespace Divider {\n    export type Props = MenuDividerProps;\n  }\n\n  export namespace Dropdown {\n    export type Props = MenuDropdownProps;\n  }\n\n  export namespace Target {\n    export type Props = MenuTargetProps;\n  }\n\n  export namespace Sub {\n    export type Props = MenuSubProps;\n  }\n\n  export namespace SubDropdown {\n    export type Props = MenuSubDropdownProps;\n  }\n\n  export namespace SubItem {\n    export type Props = MenuSubItemProps;\n  }\n\n  export namespace SubTarget {\n    export type Props = MenuSubTargetProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4GA,MAAM,eAAe;CACnB,WAAW;CACX,kBAAkB;CAClB,6BAA6B;CAC7B,oBAAoB;EAAC;EAAa;EAAc;CAAS;CACzD,MAAM;CACN,SAAS;CACT,WAAW;CACX,YAAY;CACZ,kBAAkB;AACpB;AAEA,MAAa,OAAOA,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,UACA,QACA,SACA,QACA,eACA,WACA,UACA,kBACA,MACA,eACA,SACA,WACA,YACA,YACA,QACA,UACA,SACA,MACA,kBACA,aACA,6BACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,CAAC,SAAS,cAAA,GAAA,eAAA,iBAA6B;EAC3C,OAAO;EACP,cAAc;EACd,YAAY;EACZ;CACF,CAAC;CACD,MAAM,CAAC,gBAAgB,sBAAA,GAAA,MAAA,UAA8B,KAAK;CAE1D,MAAM,cAAc;EAClB,UAAU,KAAK;EACf,kBAAkB,KAAK;EACvB,WAAW,UAAU;CACvB;CAEA,MAAM,aAAa;EACjB,UAAU,IAAI;EACd,CAAC,WAAW,SAAS;CACvB;CAEA,MAAM,uBAAuB;EAC3B,UAAU,MAAM,IAAI,KAAK;CAC3B;CAEA,MAAM,EAAE,cAAc,kBAAkBC,0BAAAA,gBAAgB;EAAE;EAAM;EAAO;EAAY;CAAU,CAAC;CAE9F,MAAM,qBAAA,GAAA,MAAA,QAAgD,IAAI;CAC1D,MAAM,mBAAA,GAAA,MAAA,cAA+B,YAAwB;EAC3D,MAAM,OAAO,kBAAkB;EAC/B,IAAI,QAAQ,SAAS,SACnB,KAAK;EAEP,kBAAkB,UAAU;EAC5B,aAAa;GACX,IAAI,kBAAkB,YAAY,SAChC,kBAAkB,UAAU;EAEhC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,SACpBC,+BAAAA,oBAAoB,oBAAoB,wBAAwB,IAAI;CAEtE,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAAkC;EAC/E;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,qBAAD;EACE,OAAO;GACL;GACA,QAAQ;GACR;GACA;GACA;GACA;GACA;GACA,eAAe,YAAY,UAAU,QAAQ;GAC7C,cAAc,YAAY,UAAU,OAAO;GAC3C,0BAA0B;GAC1B;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;GACE,aAAA;GACA,GAAI;GACJ,QAAQ;GACR,UAAU;GACK;GACf,WAAW,cAAc,QAAQ;GAClB;GACf,kBAAiB;GACjB,YAAY;GACZ,QAAQ;GACE;GACD;GACI;GAEZ;EACM,CAAA;CACU,CAAA;AAEzB,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,UAAUC,oBAAAA;AACf,KAAK,OAAOC,iBAAAA;AACZ,KAAK,QAAQC,kBAAAA;AACb,KAAK,WAAWC,qBAAAA;AAChB,KAAK,SAASC,mBAAAA;AACd,KAAK,UAAUC,oBAAAA;AACf,KAAK,MAAMC,gBAAAA"}