@grafana/ui/dist/cjs/components/Dropdown/Dropdown.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 reactTransitionGroup = require('react-transition-group');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var floating = require('../../utils/floating.cjs');
var reactUtils = require('../../utils/reactUtils.cjs');
var tooltipUtils = require('../../utils/tooltipUtils.cjs');
var Portal = require('../Portal/Portal.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";
const Dropdown = React__namespace.memo(({ children, overlay, placement, offset, root, onVisibleChange }) => {
  var _a, _b;
  const [show, setShow] = React.useState(false);
  const transitionRef = React.useRef(null);
  const floatingUIPlacement = tooltipUtils.getPlacement(placement);
  const handleOpenChange = React.useCallback(
    (newState) => {
      setShow(newState);
      onVisibleChange == null ? void 0 : onVisibleChange(newState);
    },
    [onVisibleChange]
  );
  const middleware = [
    react.offset({
      mainAxis: (_a = offset == null ? void 0 : offset[0]) != null ? _a : 8,
      crossAxis: (_b = offset == null ? void 0 : offset[1]) != null ? _b : 0
    }),
    ...floating.getPositioningMiddleware(floatingUIPlacement)
  ];
  const { context, refs, floatingStyles } = react.useFloating({
    open: show,
    placement: floatingUIPlacement,
    onOpenChange: handleOpenChange,
    middleware,
    whileElementsMounted: react.autoUpdate
  });
  const click = react.useClick(context);
  const dismiss = react.useDismiss(context);
  const { getReferenceProps, getFloatingProps } = react.useInteractions([dismiss, click]);
  const animationDuration = 150;
  const animationStyles = ThemeContext.useStyles2(getStyles, animationDuration);
  const onOverlayClicked = () => {
    handleOpenChange(false);
  };
  const handleKeys = (event) => {
    if (event.key === "Tab") {
      handleOpenChange(false);
    }
  };
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    React__namespace.cloneElement(children, {
      ref: refs.setReference,
      ...getReferenceProps(),
      "aria-expanded": show
    }),
    show && /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, { root, children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context, children: /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        ref: refs.setFloating,
        style: floatingStyles,
        onClick: onOverlayClicked,
        onKeyDown: handleKeys,
        ...getFloatingProps(),
        children: /* @__PURE__ */ jsxRuntime.jsx(
          reactTransitionGroup.CSSTransition,
          {
            nodeRef: transitionRef,
            appear: true,
            in: true,
            timeout: { appear: animationDuration, exit: 0, enter: 0 },
            classNames: animationStyles,
            children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: transitionRef, children: reactUtils.renderOrCallToRender(overlay, {}) })
          }
        )
      }
    ) }) })
  ] });
});
Dropdown.displayName = "Dropdown";
const getStyles = (theme, duration) => {
  return {
    appear: css.css({
      opacity: "0",
      position: "relative",
      transformOrigin: "top",
      [theme.transitions.handleMotion("no-preference")]: {
        transform: "scaleY(0.5)"
      }
    }),
    appearActive: css.css({
      opacity: "1",
      [theme.transitions.handleMotion("no-preference")]: {
        transform: "scaleY(1)",
        transition: `transform ${duration}ms cubic-bezier(0.2, 0, 0.2, 1), opacity ${duration}ms cubic-bezier(0.2, 0, 0.2, 1)`
      }
    })
  };
};

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