@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.14 kB
Source Map (JSON)
{"version":3,"file":"MenuDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuDropdown/MenuDropdown.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n BoxProps,\n CompoundStylesApiProps,\n createEventHandler,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useMenuContext } from '../Menu.context';\nimport { useMenuTypeAhead } from '../use-menu-type-ahead';\nimport classes from '../Menu.module.css';\n\nexport type MenuDropdownStylesNames = 'dropdown';\n\nexport interface MenuDropdownProps\n extends BoxProps, CompoundStylesApiProps<MenuDropdownFactory>, ElementProps<'div'> {}\n\nexport type MenuDropdownFactory = Factory<{\n props: MenuDropdownProps;\n ref: HTMLDivElement;\n stylesNames: MenuDropdownStylesNames;\n compound: true;\n}>;\n\nexport const MenuDropdown = factory<MenuDropdownFactory>((props) => {\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n children,\n ref,\n ...others\n } = useProps('MenuDropdown', null, props);\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const ctx = useMenuContext();\n\n const typeAhead = useMenuTypeAhead({\n enabled: !ctx.hasSearch,\n opened: ctx.opened,\n getDropdown: () => wrapperRef.current,\n });\n\n const handleKeyDown = createEventHandler<any>(onKeyDown, (event) => {\n typeAhead(event);\n if (event.defaultPrevented || ctx.hasSearch) {\n return;\n }\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n event.preventDefault();\n wrapperRef.current\n ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not(:disabled)')[0]\n ?.focus();\n }\n });\n\n const handleMouseEnter = createEventHandler<any>(\n onMouseEnter,\n () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.openDropdown()\n );\n\n const handleMouseLeave = createEventHandler<any>(\n onMouseLeave,\n () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.closeDropdown()\n );\n\n return (\n <Popover.Dropdown\n {...others}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n role=\"menu\"\n aria-orientation=\"vertical\"\n ref={useMergedRef(ref, wrapperRef)}\n {...ctx.getStyles('dropdown', {\n className,\n style,\n styles,\n classNames,\n withStaticClass: false,\n })}\n tabIndex={-1}\n data-menu-dropdown\n onKeyDown={handleKeyDown}\n >\n {ctx.withInitialFocusPlaceholder && !ctx.hasSearch && (\n <div\n role=\"presentation\"\n tabIndex={-1}\n data-autofocus\n data-mantine-stop-propagation\n style={{ outline: 0 }}\n />\n )}\n {children}\n </Popover.Dropdown>\n );\n});\n\nMenuDropdown.classes = classes;\nMenuDropdown.displayName = '@mantine/core/MenuDropdown';\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAa,eAAe,SAA8B,UAAU;CAClE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,cACA,cACA,WACA,UACA,KACA,GAAG,WACD,SAAS,gBAAgB,MAAM,KAAK;CAExC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,MAAM,eAAe;CAE3B,MAAM,YAAY,iBAAiB;EACjC,SAAS,CAAC,IAAI;EACd,QAAQ,IAAI;EACZ,mBAAmB,WAAW;CAChC,CAAC;CAED,MAAM,gBAAgB,mBAAwB,YAAY,UAAU;EAClE,UAAU,KAAK;EACf,IAAI,MAAM,oBAAoB,IAAI,WAChC;EAEF,IAAI,MAAM,QAAQ,aAAa,MAAM,QAAQ,aAAa;GACxD,MAAM,eAAe;GACrB,WAAW,SACP,iBAAoC,iCAAiC,CAAC,CAAC,EAAE,EACzE,MAAM;EACZ;CACF,CAAC;CAED,MAAM,mBAAmB,mBACvB,qBACO,IAAI,YAAY,WAAW,IAAI,YAAY,kBAAkB,IAAI,aAAa,CACvF;CAEA,MAAM,mBAAmB,mBACvB,qBACO,IAAI,YAAY,WAAW,IAAI,YAAY,kBAAkB,IAAI,cAAc,CACxF;CAEA,OACE,qBAAC,QAAQ,UAAT;EACE,GAAI;EACJ,cAAc;EACd,cAAc;EACd,MAAK;EACL,oBAAiB;EACjB,KAAK,aAAa,KAAK,UAAU;EACjC,GAAI,IAAI,UAAU,YAAY;GAC5B;GACA;GACA;GACA;GACA,iBAAiB;EACnB,CAAC;EACD,UAAU;EACV,sBAAA;EACA,WAAW;YAhBb,CAkBG,IAAI,+BAA+B,CAAC,IAAI,aACvC,oBAAC,OAAD;GACE,MAAK;GACL,UAAU;GACV,kBAAA;GACA,iCAAA;GACA,OAAO,EAAE,SAAS,EAAE;EACrB,CAAA,GAEF,QACe;;AAEtB,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}