{"version":3,"file":"Menu.mjs","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useImperativeHandle, useRef } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes';\nimport { Box } from '../Layout/Box/Box';\n\nimport { MenuDivider } from './MenuDivider';\nimport { MenuGroup } from './MenuGroup';\nimport { MenuItem } from './MenuItem';\nimport { useMenuFocus } from './hooks';\n\nexport interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** React element rendered at the top of the menu */\n  header?: React.ReactNode;\n  children: React.ReactNode;\n  ariaLabel?: string;\n  onOpen?: (focusOnItem: (itemId: number) => void) => void;\n  onClose?: () => void;\n  onKeyDown?: React.KeyboardEventHandler;\n}\n\nconst MenuComp = React.forwardRef<HTMLDivElement, MenuProps>(\n  ({ header, children, ariaLabel, onOpen, onClose, onKeyDown, ...otherProps }, forwardedRef) => {\n    const styles = useStyles2(getStyles);\n\n    const localRef = useRef<HTMLDivElement>(null);\n    useImperativeHandle(forwardedRef, () => localRef.current!);\n\n    const [handleKeys] = useMenuFocus({ isMenuOpen: true, localRef, onOpen, onClose, onKeyDown });\n\n    return (\n      <Box\n        {...otherProps}\n        aria-label={ariaLabel}\n        backgroundColor=\"elevated\"\n        borderRadius=\"default\"\n        boxShadow=\"z3\"\n        display=\"inline-block\"\n        onKeyDown={handleKeys}\n        paddingX={0.5}\n        paddingY={0.5}\n        ref={localRef}\n        role=\"menu\"\n        tabIndex={-1}\n      >\n        {header && (\n          <div\n            className={cx(\n              styles.header,\n              Boolean(children) && React.Children.toArray(children).length > 0 && styles.headerBorder\n            )}\n          >\n            {header}\n          </div>\n        )}\n        {children}\n      </Box>\n    );\n  }\n);\n\nMenuComp.displayName = 'Menu';\n\nexport const Menu = Object.assign(MenuComp, {\n  Item: MenuItem,\n  Divider: MenuDivider,\n  Group: MenuGroup,\n});\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    header: css({\n      padding: theme.spacing(0.5, 0.5, 1, 0.5),\n    }),\n    headerBorder: css({\n      borderBottom: `1px solid ${theme.colors.border.weak}`,\n      marginBottom: theme.spacing(0.5),\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAwBA,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,MAAA,EAAQ,QAAU,EAAA,SAAA,EAAW,MAAQ,EAAA,OAAA,EAAS,SAAW,EAAA,GAAG,UAAW,EAAA,EAAG,YAAiB,KAAA;AAC5F,IAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,IAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA;AAC5C,IAAoB,mBAAA,CAAA,YAAA,EAAc,MAAM,QAAA,CAAS,OAAQ,CAAA;AAEzD,IAAM,MAAA,CAAC,UAAU,CAAA,GAAI,YAAa,CAAA,EAAE,UAAY,EAAA,IAAA,EAAM,QAAU,EAAA,MAAA,EAAQ,OAAS,EAAA,SAAA,EAAW,CAAA;AAE5F,IACE,uBAAA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,YAAY,EAAA,SAAA;AAAA,QACZ,eAAgB,EAAA,UAAA;AAAA,QAChB,YAAa,EAAA,SAAA;AAAA,QACb,SAAU,EAAA,IAAA;AAAA,QACV,OAAQ,EAAA,cAAA;AAAA,QACR,SAAW,EAAA,UAAA;AAAA,QACX,QAAU,EAAA,GAAA;AAAA,QACV,QAAU,EAAA,GAAA;AAAA,QACV,GAAK,EAAA,QAAA;AAAA,QACL,IAAK,EAAA,MAAA;AAAA,QACL,QAAU,EAAA,CAAA,CAAA;AAAA,QAET,QAAA,EAAA;AAAA,UACC,MAAA,oBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAW,EAAA,EAAA;AAAA,gBACT,MAAO,CAAA,MAAA;AAAA,gBACP,OAAA,CAAQ,QAAQ,CAAA,IAAK,KAAM,CAAA,QAAA,CAAS,QAAQ,QAAQ,CAAA,CAAE,MAAS,GAAA,CAAA,IAAK,MAAO,CAAA;AAAA,eAC7E;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED;AAAA;AAAA;AAAA,KACH;AAAA;AAGN,CAAA;AAEA,QAAA,CAAS,WAAc,GAAA,MAAA;AAEV,MAAA,IAAA,GAAO,MAAO,CAAA,MAAA,CAAO,QAAU,EAAA;AAAA,EAC1C,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,WAAA;AAAA,EACT,KAAO,EAAA;AACT,CAAC;AAED,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,QAAQ,GAAI,CAAA;AAAA,MACV,SAAS,KAAM,CAAA,OAAA,CAAQ,GAAK,EAAA,GAAA,EAAK,GAAG,GAAG;AAAA,KACxC,CAAA;AAAA,IACD,cAAc,GAAI,CAAA;AAAA,MAChB,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,OAAO,IAAI,CAAA,CAAA;AAAA,MACnD,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,GAAG;AAAA,KAChC;AAAA,GACH;AACF,CAAA;;;;"}