@grafana/ui
Version:
Grafana Components Library
1 lines • 4.73 kB
Source Map (JSON)
{"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/ThemeContext';\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\n/**\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-menu--docs\n */\nconst MenuComp = React.forwardRef<HTMLDivElement, MenuProps>(\n ({ header, children, ariaLabel, onOpen, onClose, onKeyDown, ...otherProps }, forwardedRef) => {\n const styles = useStyles2(getStyles);\n const componentTokens = useComponentTokens();\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={componentTokens.borderRadius}\n boxShadow=\"z3\"\n display=\"inline-block\"\n onKeyDown={handleKeys}\n padding={componentTokens.padding}\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 useComponentTokens = () =>\n useStyles2((theme: GrafanaTheme2) => {\n const {\n components: { menu },\n } = theme;\n\n return {\n padding: menu.padding,\n borderRadius: menu.borderRadius,\n };\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":";;;;;;;;;;;;AA2BA,MAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,MAAA,EAAQ,QAAA,EAAU,SAAA,EAAW,MAAA,EAAQ,OAAA,EAAS,SAAA,EAAW,GAAG,UAAA,EAAW,EAAG,YAAA,KAAiB;AAC5F,IAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,IAAA,MAAM,kBAAkB,kBAAA,EAAmB;AAE3C,IAAA,MAAM,QAAA,GAAW,OAAuB,IAAI,CAAA;AAC5C,IAAA,mBAAA,CAAoB,YAAA,EAAc,MAAM,QAAA,CAAS,OAAQ,CAAA;AAEzD,IAAA,MAAM,CAAC,UAAU,CAAA,GAAI,YAAA,CAAa,EAAE,UAAA,EAAY,IAAA,EAAM,QAAA,EAAU,MAAA,EAAQ,OAAA,EAAS,SAAA,EAAW,CAAA;AAE5F,IAAA,uBACE,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,YAAA,EAAY,SAAA;AAAA,QACZ,eAAA,EAAgB,UAAA;AAAA,QAChB,cAAc,eAAA,CAAgB,YAAA;AAAA,QAC9B,SAAA,EAAU,IAAA;AAAA,QACV,OAAA,EAAQ,cAAA;AAAA,QACR,SAAA,EAAW,UAAA;AAAA,QACX,SAAS,eAAA,CAAgB,OAAA;AAAA,QACzB,GAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAK,MAAA;AAAA,QACL,QAAA,EAAU,CAAA,CAAA;AAAA,QAET,QAAA,EAAA;AAAA,UAAA,MAAA,oBACC,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,MAAA,CAAO,MAAA;AAAA,gBACP,OAAA,CAAQ,QAAQ,CAAA,IAAK,KAAA,CAAM,QAAA,CAAS,QAAQ,QAAQ,CAAA,CAAE,MAAA,GAAS,CAAA,IAAK,MAAA,CAAO;AAAA,eAC7E;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,QAAA,CAAS,WAAA,GAAc,MAAA;AAEhB,MAAM,IAAA,GAAO,MAAA,CAAO,MAAA,CAAO,QAAA,EAAU;AAAA,EAC1C,IAAA,EAAM,QAAA;AAAA,EACN,OAAA,EAAS,WAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAC;AAED,MAAM,kBAAA,GAAqB,MACzB,UAAA,CAAW,CAAC,KAAA,KAAyB;AACnC,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,EAAE,IAAA;AAAK,GACrB,GAAI,KAAA;AAEJ,EAAA,OAAO;AAAA,IACL,SAAS,IAAA,CAAK,OAAA;AAAA,IACd,cAAc,IAAA,CAAK;AAAA,GACrB;AACF,CAAC,CAAA;AAEH,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,QAAQ,GAAA,CAAI;AAAA,MACV,SAAS,KAAA,CAAM,OAAA,CAAQ,GAAA,EAAK,GAAA,EAAK,GAAG,GAAG;AAAA,KACxC,CAAA;AAAA,IACD,cAAc,GAAA,CAAI;AAAA,MAChB,YAAA,EAAc,CAAA,UAAA,EAAa,KAAA,CAAM,MAAA,CAAO,OAAO,IAAI,CAAA,CAAA;AAAA,MACnD,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,KAChC;AAAA,GACH;AACF,CAAA;;;;"}