@grafana/ui/dist/cjs/components/Menu/SubMenu.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var react = require('@floating-ui/react');
var React = require('react');
var e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var floating = require('../../utils/floating.cjs');
var Icon = require('../Icon/Icon.cjs');
var hooks = require('./hooks.cjs');

"use strict";
const SUBMENU_POSITION = "right-start";
const SubMenu = React.memo(({ parentItemRef, items, isOpen, close, customStyle }) => {
  const styles = ThemeContext.useStyles2(getStyles);
  const middleware = [...floating.getPositioningMiddleware(SUBMENU_POSITION)];
  const { refs, floatingStyles } = react.useFloating({
    open: isOpen,
    placement: SUBMENU_POSITION,
    middleware,
    whileElementsMounted: react.autoUpdate,
    elements: {
      reference: parentItemRef.current
    }
  });
  const [handleKeys] = hooks.useMenuFocus({
    localRef: refs.floating,
    isMenuOpen: isOpen,
    close
  });
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.iconWrapper, "aria-hidden": true, "data-testid": e2eSelectors.selectors.components.Menu.SubMenu.icon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "angle-right", className: styles.icon }) }),
    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        ref: refs.setFloating,
        className: styles.subMenu,
        "data-testid": e2eSelectors.selectors.components.Menu.SubMenu.container,
        style: {
          ...floatingStyles,
          ...customStyle
        },
        children: /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: -1, className: styles.itemsWrapper, role: "menu", onKeyDown: handleKeys, children: items })
      }
    )
  ] });
});
SubMenu.displayName = "SubMenu";
const getStyles = (theme) => {
  return {
    iconWrapper: css.css({
      display: "flex",
      flex: 1,
      justifyContent: "end"
    }),
    icon: css.css({
      opacity: 0.7,
      marginLeft: theme.spacing(1),
      color: theme.colors.text.secondary
    }),
    itemsWrapper: css.css({
      background: theme.colors.background.elevated,
      padding: theme.spacing(0.5),
      boxShadow: theme.shadows.z3,
      display: "inline-block",
      borderRadius: theme.shape.radius.default
    }),
    subMenu: css.css({
      zIndex: theme.zIndex.dropdown
    })
  };
};

exports.SubMenu = SubMenu;
//# sourceMappingURL=SubMenu.cjs.map