@grafana/ui/dist/esm/components/Menu/SubMenu.mjs.map

Grafana Components Library

{"version":3,"file":"SubMenu.mjs","sources":["../../../../src/components/Menu/SubMenu.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { memo, CSSProperties, ReactElement, useEffect, useRef, useState } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\n\nimport { MenuItemProps } from './MenuItem';\nimport { useMenuFocus } from './hooks';\nimport { isElementOverflowing } from './utils';\n\n/** @internal */\nexport interface SubMenuProps {\n  /** List of menu items of the subMenu */\n  items?: Array<ReactElement<MenuItemProps>>;\n  /** Open */\n  isOpen: boolean;\n  /** Closes the subMenu */\n  close: () => void;\n  /** Custom style */\n  customStyle?: CSSProperties;\n}\n\n/** @internal */\nexport const SubMenu = memo(({ items, isOpen, close, customStyle }: SubMenuProps) => {\n  const styles = useStyles2(getStyles);\n  const localRef = useRef<HTMLDivElement>(null);\n  const [handleKeys] = useMenuFocus({\n    localRef,\n    isMenuOpen: isOpen,\n    close,\n  });\n\n  const [pushLeft, setPushLeft] = useState(false);\n  useEffect(() => {\n    if (isOpen && localRef.current) {\n      setPushLeft(isElementOverflowing(localRef.current));\n    }\n  }, [isOpen]);\n\n  return (\n    <>\n      <div className={styles.iconWrapper} aria-hidden data-testid={selectors.components.Menu.SubMenu.icon}>\n        <Icon name=\"angle-right\" className={styles.icon} />\n      </div>\n      {isOpen && (\n        <div\n          ref={localRef}\n          className={cx(styles.subMenu, { [styles.pushLeft]: pushLeft })}\n          data-testid={selectors.components.Menu.SubMenu.container}\n          style={customStyle}\n        >\n          <div tabIndex={-1} className={styles.itemsWrapper} role=\"menu\" onKeyDown={handleKeys}>\n            {items}\n          </div>\n        </div>\n      )}\n    </>\n  );\n});\n\nSubMenu.displayName = 'SubMenu';\n\n/** @internal */\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    iconWrapper: css({\n      display: 'flex',\n      flex: 1,\n      justifyContent: 'end',\n    }),\n    icon: css({\n      opacity: 0.7,\n      marginLeft: theme.spacing(1),\n      color: theme.colors.text.secondary,\n    }),\n    itemsWrapper: css({\n      background: theme.colors.background.elevated,\n      padding: theme.spacing(0.5),\n      boxShadow: theme.shadows.z3,\n      display: 'inline-block',\n      borderRadius: theme.shape.radius.default,\n    }),\n    pushLeft: css({\n      right: '100%',\n      left: 'unset',\n    }),\n    subMenu: css({\n      position: 'absolute',\n      top: 0,\n      left: '100%',\n      zIndex: theme.zIndex.dropdown,\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}