@mantine/core/esm/components/Menubar/MenubarMenu/MenubarMenu.mjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"MenubarMenu.mjs","names":["useId"],"sources":["../../../../src/components/Menubar/MenubarMenu/MenubarMenu.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useId, useIsomorphicEffect } from '@mantine/hooks';\nimport { Menu, MenuProps } from '../../Menu';\nimport { MenubarMenuContextProvider, useMenubarContext } from '../Menubar.context';\n\nexport interface MenubarMenuProps extends Omit<\n  MenuProps,\n  'opened' | 'defaultOpened' | 'onChange' | 'onOpen' | 'onClose' | 'trigger' | 'returnFocus'\n> {\n  /** `Menubar.Target` and `Menubar.Dropdown` components */\n  children?: React.ReactNode;\n}\n\nconst DEFAULT_TRANSITION_DURATION = 150;\n\nexport function MenubarMenu({ children, transitionProps, ...others }: MenubarMenuProps) {\n  const ctx = useMenubarContext();\n  const id = useId();\n  const [index, setIndex] = useState(-1);\n\n  useIsomorphicEffect(() => {\n    const next = ctx.getMenuIndex(id);\n    setIndex((current) => (current === next ? current : next));\n  });\n\n  const opened = ctx.openIndex !== null && index !== -1 && ctx.openIndex === index;\n\n  const handleChange = (value: boolean) => {\n    if (value) {\n      ctx.openMenu(index, 'click');\n      ctx.setActiveIndex(index);\n    } else {\n      ctx.closeMenu();\n    }\n  };\n\n  // Transitions should only play when the whole bar opens or closes, not when\n  // switching between sibling menus while one is already open.\n  const baseDuration = transitionProps?.duration ?? DEFAULT_TRANSITION_DURATION;\n  const baseExitDuration = transitionProps?.exitDuration ?? baseDuration;\n  const animateEnter = ctx.getPreviousOpenIndex() === null;\n  const animateExit = ctx.openIndex === null;\n  const resolvedTransitionProps = {\n    ...transitionProps,\n    duration: animateEnter ? baseDuration : 0,\n    exitDuration: animateExit ? baseExitDuration : 0,\n  };\n\n  return (\n    <MenubarMenuContextProvider value={{ id, index, opened }}>\n      <Menu\n        position={ctx.position}\n        loop={ctx.loop}\n        unstyled={ctx.unstyled}\n        menuItemTabIndex={-1}\n        trapFocus={false}\n        {...others}\n        transitionProps={resolvedTransitionProps}\n        opened={opened}\n        onChange={handleChange}\n        trigger=\"click\"\n        returnFocus={false}\n      >\n        {children}\n      </Menu>\n    </MenubarMenuContextProvider>\n  );\n}\n\nMenubarMenu.displayName = '@mantine/core/MenubarMenu';\n"],"mappings":";;;;;;;AAaA,MAAM,8BAA8B;AAEpC,SAAgB,YAAY,EAAE,UAAU,iBAAiB,GAAG,UAA4B;CACtF,MAAM,MAAM,kBAAkB;CAC9B,MAAM,KAAKA,QAAM;CACjB,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CAErC,0BAA0B;EACxB,MAAM,OAAO,IAAI,aAAa,EAAE;EAChC,UAAU,YAAa,YAAY,OAAO,UAAU,IAAK;CAC3D,CAAC;CAED,MAAM,SAAS,IAAI,cAAc,QAAQ,UAAU,MAAM,IAAI,cAAc;CAE3E,MAAM,gBAAgB,UAAmB;EACvC,IAAI,OAAO;GACT,IAAI,SAAS,OAAO,OAAO;GAC3B,IAAI,eAAe,KAAK;EAC1B,OACE,IAAI,UAAU;CAElB;CAIA,MAAM,eAAe,iBAAiB,YAAY;CAClD,MAAM,mBAAmB,iBAAiB,gBAAgB;CAC1D,MAAM,eAAe,IAAI,qBAAqB,MAAM;CACpD,MAAM,cAAc,IAAI,cAAc;CACtC,MAAM,0BAA0B;EAC9B,GAAG;EACH,UAAU,eAAe,eAAe;EACxC,cAAc,cAAc,mBAAmB;CACjD;CAEA,OACE,oBAAC,4BAAD;EAA4B,OAAO;GAAE;GAAI;GAAO;EAAO;YACrD,oBAAC,MAAD;GACE,UAAU,IAAI;GACd,MAAM,IAAI;GACV,UAAU,IAAI;GACd,kBAAkB;GAClB,WAAW;GACX,GAAI;GACJ,iBAAiB;GACT;GACR,UAAU;GACV,SAAQ;GACR,aAAa;GAEZ;EACG,CAAA;CACoB,CAAA;AAEhC;AAEA,YAAY,cAAc"}