@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 } from '@emotion/css';\nimport { autoUpdate, useFloating } from '@floating-ui/react';\nimport { memo, type CSSProperties, type ReactElement } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getPositioningMiddleware } from '../../utils/floating';\nimport { Icon } from '../Icon/Icon';\n\nimport { type MenuItemProps } from './MenuItem';\nimport { useMenuFocus } from './hooks';\n\n/** @internal */\nexport interface SubMenuProps {\n  parentItemRef: React.RefObject<HTMLElement | null>;\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\nconst SUBMENU_POSITION = 'right-start';\n\n/** @internal */\nexport const SubMenu = memo(({ parentItemRef, items, isOpen, close, customStyle }: SubMenuProps) => {\n  const styles = useStyles2(getStyles);\n  // the order of middleware is important!\n  const middleware = [...getPositioningMiddleware(SUBMENU_POSITION)];\n\n  const { refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: SUBMENU_POSITION,\n    middleware,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: parentItemRef.current,\n    },\n  });\n\n  const [handleKeys] = useMenuFocus({\n    localRef: refs.floating,\n    isMenuOpen: isOpen,\n    close,\n  });\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={refs.setFloating}\n          className={styles.subMenu}\n          data-testid={selectors.components.Menu.SubMenu.container}\n          style={{\n            ...floatingStyles,\n            ...customStyle,\n          }}\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    subMenu: css({\n      zIndex: theme.zIndex.dropdown,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA2BA,MAAM,gBAAA,GAAmB,aAAA;AAGlB,MAAM,OAAA,GAAU,KAAK,CAAC,EAAE,eAAe,KAAA,EAAO,MAAA,EAAQ,KAAA,EAAO,WAAA,EAAY,KAAoB;AAClG,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,MAAM,UAAA,GAAa,CAAC,GAAG,wBAAA,CAAyB,gBAAgB,CAAC,CAAA;AAEjE,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAe,GAAI,WAAA,CAAY;AAAA,IAC3C,IAAA,EAAM,MAAA;AAAA,IACN,SAAA,EAAW,gBAAA;AAAA,IACX,UAAA;AAAA,IACA,oBAAA,EAAsB,UAAA;AAAA,IACtB,QAAA,EAAU;AAAA,MACR,WAAW,aAAA,CAAc;AAAA;AAC3B,GACD,CAAA;AAED,EAAA,MAAM,CAAC,UAAU,CAAA,GAAI,YAAA,CAAa;AAAA,IAChC,UAAU,IAAA,CAAK,QAAA;AAAA,IACf,UAAA,EAAY,MAAA;AAAA,IACZ;AAAA,GACD,CAAA;AAED,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,KAAK,IAAA,CAAK,WAAA;AAAA,QACV,WAAW,MAAA,CAAO,OAAA;AAAA,QAClB,aAAA,EAAa,SAAA,CAAU,UAAA,CAAW,IAAA,CAAK,OAAA,CAAQ,SAAA;AAAA,QAC/C,KAAA,EAAO;AAAA,UACL,GAAG,cAAA;AAAA,UACH,GAAG;AAAA,SACL;AAAA,QAEA,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,SAAS,GAAA,CAAI;AAAA,MACX,MAAA,EAAQ,MAAM,MAAA,CAAO;AAAA,KACtB;AAAA,GACH;AACF,CAAA;;;;"}