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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"MenuSub.cjs","names":["useProps","SubMenuContext","useMenuContext","useDirection","getFloatingPosition","Popover","MenuSubTarget","MenuSubDropdown","MenuSubItem"],"sources":["../../../../src/components/Menu/MenuSub/MenuSub.tsx"],"sourcesContent":["import { use, useCallback, useRef } from 'react';\nimport {\n  safePolygon,\n  useFloating,\n  useHover,\n  useInteractions,\n  type SafePolygonOptions,\n} from '@floating-ui/react';\nimport { useDisclosure, useId } from '@mantine/hooks';\nimport { ExtendComponent, Factory, useDirection, useProps } from '../../../core';\nimport {\n  FloatingAxesOffsets,\n  FloatingPosition,\n  getFloatingPosition,\n} from '../../../utils/Floating';\nimport { __PopoverProps, Popover } from '../../Popover';\nimport { TransitionOverride } from '../../Transition';\nimport { useMenuContext } from '../Menu.context';\nimport { MenuSubDropdown } from '../MenuSubDropdown/MenuSubDropdown';\nimport { MenuSubItem } from '../MenuSubItem/MenuSubItem';\nimport { MenuSubTarget } from '../MenuSubTarget/MenuSubTarget';\nimport { SubMenuContext } from './MenuSub.context';\n\nexport type MenuSubFactory = Factory<{\n  props: MenuSubProps;\n}>;\n\nexport interface MenuSubProps extends __PopoverProps {\n  children: React.ReactNode;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Open delay in ms, applicable when hover trigger is used */\n  openDelay?: number;\n\n  /** Close delay in ms, applicable when hover trigger is used */\n  closeDelay?: number;\n\n  /** Dropdown position relative to the target element @default 'right-start' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 0 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type @default { duration: 0 } */\n  transitionProps?: TransitionOverride;\n\n  /** Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior. @default true */\n  safeAreaPolygon?: boolean | SafePolygonOptions;\n}\n\nconst defaultProps = {\n  offset: 0,\n  position: 'right-start',\n  safeAreaPolygon: true,\n  transitionProps: { duration: 0 },\n  openDelay: 0,\n  middlewares: {\n    shift: {\n      // Enable crossAxis shift to keep submenu dropdown within viewport bounds when positioned horizontally\n      crossAxis: true,\n    },\n  },\n} satisfies Partial<MenuSubProps>;\n\nexport function MenuSub(_props: MenuSubProps) {\n  const { children, closeDelay, openDelay, position, safeAreaPolygon, ...others } = useProps(\n    'MenuSub',\n    defaultProps,\n    _props\n  );\n  const id = useId();\n  const [opened, { open, close }] = useDisclosure(false);\n  const parentSubCtx = use(SubMenuContext);\n  const menuCtx = useMenuContext();\n  const { dir } = useDirection();\n  const resolvedPosition = getFloatingPosition(dir, position);\n\n  const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;\n  const unregisterRef = useRef<(() => void) | null>(null);\n\n  const activeChildCloseRef = useRef<(() => void) | null>(null);\n  const registerOpenSub = useCallback((closeFn: () => void) => {\n    const prev = activeChildCloseRef.current;\n    if (prev && prev !== closeFn) {\n      prev();\n    }\n    activeChildCloseRef.current = closeFn;\n    return () => {\n      if (activeChildCloseRef.current === closeFn) {\n        activeChildCloseRef.current = null;\n      }\n    };\n  }, []);\n\n  const handleOpen = useCallback(() => {\n    unregisterRef.current = levelRegister(close);\n    open();\n  }, [close, levelRegister, open]);\n\n  const handleClose = useCallback(() => {\n    unregisterRef.current?.();\n    unregisterRef.current = null;\n    close();\n  }, [close]);\n\n  const { context, refs } = useFloating({\n    placement: resolvedPosition,\n    open: opened,\n    onOpenChange: (nextOpen) => {\n      if (nextOpen) {\n        handleOpen();\n      } else {\n        handleClose();\n      }\n    },\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      handleClose: safeAreaPolygon\n        ? safePolygon(typeof safeAreaPolygon === 'object' ? safeAreaPolygon : undefined)\n        : undefined,\n      delay: { open: openDelay, close: closeDelay },\n    }),\n  ]);\n\n  const focusFirstItem = () =>\n    window.setTimeout(() => {\n      document\n        .getElementById(`${id}-dropdown`)\n        ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not([data-disabled])')[0]\n        ?.focus();\n    }, 16);\n\n  const focusParentItem = () =>\n    window.setTimeout(() => {\n      document.getElementById(`${id}-target`)?.focus();\n    }, 16);\n\n  return (\n    <SubMenuContext\n      value={{\n        opened,\n        close: handleClose,\n        open: handleOpen,\n        focusFirstItem,\n        focusParentItem,\n        parentContext: parentSubCtx,\n        setReference: refs.setReference,\n        setFloating: refs.setFloating,\n        getReferenceProps,\n        getFloatingProps,\n        registerOpenSub,\n      }}\n    >\n      <Popover\n        opened={opened}\n        withinPortal={false}\n        withArrow={false}\n        id={id}\n        position={position}\n        {...others}\n      >\n        {children}\n      </Popover>\n    </SubMenuContext>\n  );\n}\n\nMenuSub.extend = (input: ExtendComponent<MenuSubFactory>) => input;\nMenuSub.displayName = '@mantine/core/MenuSub';\nMenuSub.Target = MenuSubTarget;\nMenuSub.Dropdown = MenuSubDropdown;\nMenuSub.Item = MenuSubItem;\n"],"mappings":";;;;;;;;;;;;;;;;AAoDA,MAAM,eAAe;CACnB,QAAQ;CACR,UAAU;CACV,iBAAiB;CACjB,iBAAiB,EAAE,UAAU,EAAE;CAC/B,WAAW;CACX,aAAa,EACX,OAAO,EAEL,WAAW,KACb,EACF;AACF;AAEA,SAAgB,QAAQ,QAAsB;CAC5C,MAAM,EAAE,UAAU,YAAY,WAAW,UAAU,iBAAiB,GAAG,WAAWA,kBAAAA,SAChF,WACA,cACA,MACF;CACA,MAAM,MAAA,GAAA,eAAA,OAAW;CACjB,MAAM,CAAC,QAAQ,EAAE,MAAM,YAAA,GAAA,eAAA,eAAyB,KAAK;CACrD,MAAM,gBAAA,GAAA,MAAA,KAAmBC,wBAAAA,cAAc;CACvC,MAAM,UAAUC,qBAAAA,eAAe;CAC/B,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAC7B,MAAM,mBAAmBC,8BAAAA,oBAAoB,KAAK,QAAQ;CAE1D,MAAM,gBAAgB,cAAc,mBAAmB,QAAQ;CAC/D,MAAM,iBAAA,GAAA,MAAA,QAA4C,IAAI;CAEtD,MAAM,uBAAA,GAAA,MAAA,QAAkD,IAAI;CAC5D,MAAM,mBAAA,GAAA,MAAA,cAA+B,YAAwB;EAC3D,MAAM,OAAO,oBAAoB;EACjC,IAAI,QAAQ,SAAS,SACnB,KAAK;EAEP,oBAAoB,UAAU;EAC9B,aAAa;GACX,IAAI,oBAAoB,YAAY,SAClC,oBAAoB,UAAU;EAElC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,cAAA,GAAA,MAAA,mBAA+B;EACnC,cAAc,UAAU,cAAc,KAAK;EAC3C,KAAK;CACP,GAAG;EAAC;EAAO;EAAe;CAAI,CAAC;CAE/B,MAAM,eAAA,GAAA,MAAA,mBAAgC;EACpC,cAAc,UAAU;EACxB,cAAc,UAAU;EACxB,MAAM;CACR,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,EAAE,SAAS,UAAA,GAAA,mBAAA,aAAqB;EACpC,WAAW;EACX,MAAM;EACN,eAAe,aAAa;GAC1B,IAAI,UACF,WAAW;QAEX,YAAY;EAEhB;CACF,CAAC;CAED,MAAM,EAAE,mBAAmB,sBAAA,GAAA,mBAAA,iBAAqC,EAAA,GAAA,mBAAA,UACrD,SAAS;EAChB,aAAa,mBAAA,GAAA,mBAAA,aACG,OAAO,oBAAoB,WAAW,kBAAkB,KAAA,CAAS,IAC7E,KAAA;EACJ,OAAO;GAAE,MAAM;GAAW,OAAO;EAAW;CAC9C,CAAC,CACH,CAAC;CAED,MAAM,uBACJ,OAAO,iBAAiB;EACtB,SACG,eAAe,GAAG,GAAG,UAAU,GAC9B,iBAAoC,uCAAuC,EAAE,IAC7E,MAAM;CACZ,GAAG,EAAE;CAEP,MAAM,wBACJ,OAAO,iBAAiB;EACtB,SAAS,eAAe,GAAG,GAAG,QAAQ,GAAG,MAAM;CACjD,GAAG,EAAE;CAEP,OACE,iBAAA,GAAA,kBAAA,KAACH,wBAAAA,gBAAD;EACE,OAAO;GACL;GACA,OAAO;GACP,MAAM;GACN;GACA;GACA,eAAe;GACf,cAAc,KAAK;GACnB,aAAa,KAAK;GAClB;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,KAACI,gBAAAA,SAAD;GACU;GACR,cAAc;GACd,WAAW;GACP;GACM;GACV,GAAI;GAEH;EACM,CAAA;CACK,CAAA;AAEpB;AAEA,QAAQ,UAAU,UAA2C;AAC7D,QAAQ,cAAc;AACtB,QAAQ,SAASC,sBAAAA;AACjB,QAAQ,WAAWC,wBAAAA;AACnB,QAAQ,OAAOC,oBAAAA"}