@grafana/ui
Version:
Grafana Components Library
75 lines (72 loc) • 2.41 kB
JavaScript
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { useFloating, autoUpdate } from '@floating-ui/react';
import { memo } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { getPositioningMiddleware } from '../../utils/floating.mjs';
import { Icon } from '../Icon/Icon.mjs';
import { useMenuFocus } from './hooks.mjs';
"use strict";
const SUBMENU_POSITION = "right-start";
const SubMenu = memo(({ parentItemRef, items, isOpen, close, customStyle }) => {
const styles = useStyles2(getStyles);
const middleware = [...getPositioningMiddleware(SUBMENU_POSITION)];
const { refs, floatingStyles } = useFloating({
open: isOpen,
placement: SUBMENU_POSITION,
middleware,
whileElementsMounted: autoUpdate,
elements: {
reference: parentItemRef.current
}
});
const [handleKeys] = useMenuFocus({
localRef: refs.floating,
isMenuOpen: isOpen,
close
});
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("div", { className: styles.iconWrapper, "aria-hidden": true, "data-testid": selectors.components.Menu.SubMenu.icon, children: /* @__PURE__ */ jsx(Icon, { name: "angle-right", className: styles.icon }) }),
isOpen && /* @__PURE__ */ jsx(
"div",
{
ref: refs.setFloating,
className: styles.subMenu,
"data-testid": selectors.components.Menu.SubMenu.container,
style: {
...floatingStyles,
...customStyle
},
children: /* @__PURE__ */ jsx("div", { tabIndex: -1, className: styles.itemsWrapper, role: "menu", onKeyDown: handleKeys, children: items })
}
)
] });
});
SubMenu.displayName = "SubMenu";
const getStyles = (theme) => {
return {
iconWrapper: css({
display: "flex",
flex: 1,
justifyContent: "end"
}),
icon: css({
opacity: 0.7,
marginLeft: theme.spacing(1),
color: theme.colors.text.secondary
}),
itemsWrapper: 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({
zIndex: theme.zIndex.dropdown
})
};
};
export { SubMenu };
//# sourceMappingURL=SubMenu.mjs.map