@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":";;;;;;;;;;AA0BO,MAAM,OAAA,GAAU,KAAK,CAAC,EAAE,OAAO,MAAA,EAAQ,KAAA,EAAO,aAAY,KAAoB;AACnF,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,QAAA,GAAW,OAAuB,IAAI,CAAA;AAC5C,EAAA,MAAM,CAAC,UAAU,CAAA,GAAI,YAAA,CAAa;AAAA,IAChC,QAAA;AAAA,IACA,UAAA,EAAY,MAAA;AAAA,IACZ;AAAA,GACD,CAAA;AAED,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,MAAA,IAAU,SAAS,OAAA,EAAS;AAC9B,MAAA,WAAA,CAAY,oBAAA,CAAqB,QAAA,CAAS,OAAO,CAAC,CAAA;AAAA,IACpD;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,aAAa,aAAA,EAAW,IAAA,EAAC,eAAa,SAAA,CAAU,UAAA,CAAW,KAAK,OAAA,CAAQ,IAAA,EAC7F,8BAAC,IAAA,EAAA,EAAK,IAAA,EAAK,eAAc,SAAA,EAAW,MAAA,CAAO,MAAM,CAAA,EACnD,CAAA;AAAA,IACC,MAAA,oBACC,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,QAAA;AAAA,QACL,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,OAAA,EAAS,EAAE,CAAC,MAAA,CAAO,QAAQ,GAAG,QAAA,EAAU,CAAA;AAAA,QAC7D,aAAA,EAAa,SAAA,CAAU,UAAA,CAAW,IAAA,CAAK,OAAA,CAAQ,SAAA;AAAA,QAC/C,KAAA,EAAO,WAAA;AAAA,QAEP,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,QAAA,EAAU,CAAA,CAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EAAc,IAAA,EAAK,MAAA,EAAO,SAAA,EAAW,UAAA,EACvE,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ,CAAC;AAED,OAAA,CAAQ,WAAA,GAAc,SAAA;AAGtB,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,aAAa,GAAA,CAAI;AAAA,MACf,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,cAAA,EAAgB;AAAA,KACjB,CAAA;AAAA,IACD,MAAM,GAAA,CAAI;AAAA,MACR,OAAA,EAAS,GAAA;AAAA,MACT,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK;AAAA,KAC1B,CAAA;AAAA,IACD,cAAc,GAAA,CAAI;AAAA,MAChB,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,UAAA,CAAW,QAAA;AAAA,MACpC,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,MAC1B,SAAA,EAAW,MAAM,OAAA,CAAQ,EAAA;AAAA,MACzB,OAAA,EAAS,cAAA;AAAA,MACT,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO;AAAA,KAClC,CAAA;AAAA,IACD,UAAU,GAAA,CAAI;AAAA,MACZ,KAAA,EAAO,MAAA;AAAA,MACP,IAAA,EAAM;AAAA,KACP,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MACV,GAAA,EAAK,CAAA;AAAA,MACL,IAAA,EAAM,MAAA;AAAA,MACN,MAAA,EAAQ,MAAM,MAAA,CAAO;AAAA,KACtB;AAAA,GACH;AACF,CAAA;;;;"}