@grafana/ui/dist/cjs/components/PanelChrome/HoverWidget.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('react');
var e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Icon = require('../Icon/Icon.cjs');
var PanelMenu = require('./PanelMenu.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

"use strict";
function HoverWidget({ menu, title, dragClass, children, offset = -32, onOpenMenu, onDragStart }) {
  const styles = ThemeContext.useStyles2(getStyles);
  const draggableRef = React.useRef(null);
  const selectors = e2eSelectors.selectors.components.Panels.Panel.HoverWidget;
  const onPointerDown = React.useCallback(
    (e) => {
      var _a;
      (_a = draggableRef.current) == null ? void 0 : _a.setPointerCapture(e.pointerId);
      onDragStart == null ? void 0 : onDragStart(e);
    },
    [onDragStart]
  );
  const onPointerUp = React.useCallback((e) => {
    var _a;
    (_a = draggableRef.current) == null ? void 0 : _a.releasePointerCapture(e.pointerId);
  }, []);
  if (children === void 0 || React__namespace.Children.count(children) === 0) {
    return null;
  }
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      className: css.cx(styles.container, "show-on-hover"),
      style: { top: offset === 0 ? -1 : offset },
      "data-testid": selectors.container,
      children: [
        dragClass && /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            className: css.cx(styles.square, styles.draggable, dragClass),
            onPointerDown,
            onPointerUp,
            ref: draggableRef,
            "data-testid": selectors.dragIcon,
            children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "expand-arrows", className: styles.draggableIcon })
          }
        ),
        children,
        menu && /* @__PURE__ */ jsxRuntime.jsx(
          PanelMenu.PanelMenu,
          {
            menu,
            title,
            placement: "bottom",
            menuButtonClass: styles.menuButton,
            onOpenMenu
          }
        )
      ]
    }
  );
}
function getStyles(theme) {
  return {
    container: css.css({
      label: "hover-container-widget",
      [theme.transitions.handleMotion("no-preference", "reduce")]: {
        transition: `all .1s linear`
      },
      display: "flex",
      position: "absolute",
      zIndex: 1,
      right: -1,
      top: -1,
      boxSizing: "content-box",
      alignItems: "center",
      background: theme.colors.background.secondary,
      color: theme.colors.text.primary,
      border: `1px solid ${theme.colors.border.weak}`,
      borderBottomLeftRadius: theme.shape.radius.default,
      height: theme.spacing(4),
      boxShadow: theme.shadows.z1,
      gap: theme.spacing(1),
      padding: theme.spacing(0, 1)
    }),
    square: css.css({
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      width: theme.spacing(4),
      height: "100%"
    }),
    draggable: css.css({
      cursor: "move",
      // mobile do not support draggable panels
      [theme.breakpoints.down("md")]: {
        display: "none"
      }
    }),
    menuButton: css.css({
      // Background and border are overriden when topnav toggle is disabled
      background: "inherit",
      border: "none"
    }),
    draggableIcon: css.css({
      transform: "rotate(45deg)",
      color: theme.colors.text.secondary,
      "&:hover": {
        color: theme.colors.text.primary
      }
    })
  };
}

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