@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 8.68 kB
Source Map (JSON)
{"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 { 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 } from './Menu.context';\nimport { MenuDivider } from './MenuDivider/MenuDivider';\nimport { MenuDropdown } from './MenuDropdown/MenuDropdown';\nimport { MenuItem } from './MenuItem/MenuItem';\nimport { MenuLabel } from './MenuLabel/MenuLabel';\nimport { MenuSub } from './MenuSub/MenuSub';\nimport { MenuTarget } from './MenuTarget/MenuTarget';\nimport classes from './Menu.module.css';\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 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 }}\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyGA,MAAM,eAAe;CACnB,WAAW;CACX,kBAAkB;CAClB,6BAA6B;CAC7B,oBAAoB;EAAC;EAAa;EAAc;EAAU;CAC1D,MAAM;CACN,SAAS;CACT,WAAW;CACX,YAAY;CACZ,kBAAkB;CACnB;AAED,MAAa,OAAOA,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,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;EACD,CAAC;CAEF,MAAM,CAAC,SAAS,cAAA,GAAA,eAAA,iBAA6B;EAC3C,OAAO;EACP,cAAc;EACd,YAAY;EACZ;EACD,CAAC;CACF,MAAM,CAAC,gBAAgB,sBAAA,GAAA,MAAA,UAA8B,MAAM;CAE3D,MAAM,cAAc;AAClB,YAAU,MAAM;AAChB,oBAAkB,MAAM;AACxB,aAAW,WAAW;;CAGxB,MAAM,aAAa;AACjB,YAAU,KAAK;AACf,GAAC,WAAW,UAAU;;CAGxB,MAAM,uBAAuB;AAC3B,YAAU,OAAO,GAAG,MAAM;;CAG5B,MAAM,EAAE,cAAc,kBAAkBC,0BAAAA,gBAAgB;EAAE;EAAM;EAAO;EAAY;EAAW,CAAC;CAE/F,MAAM,gBAAgB,SACpBC,+BAAAA,oBAAoB,oBAAoB,wBAAwB,KAAK;CAEvE,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAAkC;EAC/E;EACA;EACA;EACD,CAAC;AAEF,QACE,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;GACD;YAED,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;GACO,CAAA;EACU,CAAA;EAExB;AAEF,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"}