@grafana/ui/dist/cjs/components/Toggletip/Toggletip.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 i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var floating = require('../../utils/floating.cjs');
var tooltipUtils = require('../../utils/tooltipUtils.cjs');
var IconButton = require('../IconButton/IconButton.cjs');
var Portal = require('../Portal/Portal.cjs');

"use strict";
const Toggletip = React.memo(
  ({
    children,
    theme = "info",
    placement = "auto",
    content,
    title,
    closeButton = true,
    onClose,
    footer,
    fitContent = false,
    onOpen,
    show,
    dismissOnScroll = false
  }) => {
    const arrowRef = React.useRef(null);
    const grafanaTheme = ThemeContext.useTheme2();
    const styles = ThemeContext.useStyles2(getStyles);
    const style = styles[theme];
    const [controlledVisible, setControlledVisible] = React.useState(show);
    const isOpen = show != null ? show : controlledVisible;
    const floatingUIPlacement = tooltipUtils.getPlacement(placement);
    const middleware = [
      react.offset(8),
      ...floating.getPositioningMiddleware(floatingUIPlacement),
      react.arrow({
        element: arrowRef
      })
    ];
    const { context, refs, floatingStyles } = react.useFloating({
      open: isOpen,
      placement: floatingUIPlacement,
      onOpenChange: (open) => {
        if (show === void 0) {
          setControlledVisible(open);
        }
        if (!open) {
          onClose == null ? void 0 : onClose();
        } else {
          onOpen == null ? void 0 : onOpen();
        }
      },
      middleware,
      whileElementsMounted: react.autoUpdate,
      strategy: "fixed"
    });
    const click = react.useClick(context);
    const dismiss = react.useDismiss(context, { ancestorScroll: dismissOnScroll });
    const { getReferenceProps, getFloatingProps } = react.useInteractions([dismiss, click]);
    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      React.cloneElement(children, {
        ref: refs.setReference,
        tabIndex: 0,
        "aria-expanded": isOpen,
        ...getReferenceProps()
      }),
      isOpen && /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context, modal: true, getInsideElements: () => [Portal.getPortalContainer()], children: /* @__PURE__ */ jsxRuntime.jsxs(
        "div",
        {
          "data-testid": "toggletip-content",
          className: css.cx(style.container, {
            [styles.fitContent]: fitContent
          }),
          ref: refs.setFloating,
          style: floatingStyles,
          ...getFloatingProps(),
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              react.FloatingArrow,
              {
                strokeWidth: 0.3,
                stroke: grafanaTheme.colors.border.weak,
                className: style.arrow,
                ref: arrowRef,
                context
              }
            ),
            Boolean(title) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: style.header, children: title }),
            closeButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: style.headerClose, children: /* @__PURE__ */ jsxRuntime.jsx(
              IconButton.IconButton,
              {
                "aria-label": i18n.t("grafana-ui.toggletip.close", "Close"),
                name: "times",
                "data-testid": "toggletip-header-close",
                onClick: () => {
                  setControlledVisible(false);
                  onClose == null ? void 0 : onClose();
                }
              }
            ) }),
            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: style.body, children: [
              (typeof content === "string" || React.isValidElement(content)) && content,
              typeof content === "function" && content({})
            ] }),
            Boolean(footer) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: style.footer, children: footer })
          ]
        }
      ) }) })
    ] });
  }
);
Toggletip.displayName = "Toggletip";
const getStyles = (theme) => {
  const info = tooltipUtils.buildTooltipTheme(
    theme,
    theme.colors.background.primary,
    theme.colors.border.weak,
    theme.components.tooltip.text,
    { topBottom: 2, rightLeft: 2 }
  );
  const error = tooltipUtils.buildTooltipTheme(
    theme,
    theme.colors.error.main,
    theme.colors.error.main,
    theme.colors.error.contrastText,
    { topBottom: 2, rightLeft: 2 }
  );
  return {
    info,
    error,
    fitContent: css.css({
      maxWidth: "fit-content"
    })
  };
};

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