@grafana/ui
Version:
Grafana Components Library
1 lines • 4.08 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\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;;;;"}