@progress/kendo-react-tooltip/popover/Popover.mjs

React Tooltips library represents popups with information that is related to a UI element. KendoReact Tooltips package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as o from "react";
import e from "prop-types";
import { ZIndexContext as k, classNames as G } from "@progress/kendo-react-common";
import { Popup as J } from "@progress/kendo-react-popup";
import { PopoverActionsBar as T } from "./PopoverActionsBar.mjs";
import { getFirstFocusableElement as Q, handleFocusTrap as W } from "./utils.mjs";
const Y = 12e3, $ = 2e3, O = 15, ee = {
  top: "k-callout-s",
  left: "k-callout-e",
  bottom: "k-callout-n",
  right: "k-callout-w"
}, oe = {
  top: "k-callout-n",
  left: "k-callout-w",
  bottom: "k-callout-s",
  right: "k-callout-e"
}, te = {
  top: { vertical: "bottom", horizontal: "center" },
  left: { vertical: "center", horizontal: "right" },
  bottom: { vertical: "top", horizontal: "center" },
  right: { vertical: "center", horizontal: "left" }
}, ne = {
  top: { vertical: "top", horizontal: "center" },
  left: { vertical: "center", horizontal: "left" },
  bottom: { vertical: "bottom", horizontal: "center" },
  right: { vertical: "center", horizontal: "right" }
}, re = (r) => o.Children.toArray(r).filter((n) => n && n.type === T), le = (r) => o.Children.toArray(r).filter((n) => n && n.type !== T), A = o.forwardRef((r, n) => {
  const {
    callout: p = y.callout,
    position: l = y.position,
    collision: w = y.collision,
    title: u,
    children: f,
    show: z,
    anchor: N,
    appendTo: R,
    offset: x,
    animate: D,
    positionMode: F,
    scale: I,
    popoverClass: a,
    className: K,
    id: j,
    style: S,
    contentStyle: b,
    onPosition: d,
    onClose: m,
    onOpen: h,
    onKeyDown: v
  } = r, [V, g] = o.useState(!1), P = l === "top" || l === "bottom", Z = r.margin || {
    vertical: p && P ? O : 0,
    horizontal: p && !P ? O : 0
  }, _ = te[l], B = ne[l], E = o.useContext(k), L = E ? E + $ : Y, c = o.useRef(null);
  o.useImperativeHandle(c, () => ({ props: r })), o.useImperativeHandle(n, () => c.current);
  const M = o.useCallback(
    (t) => {
      if (setTimeout(() => g(t.flipped)), d) {
        const i = {
          target: c.current,
          flipped: t.flipped,
          fitted: t.fitted
        };
        d.call(void 0, i);
      }
    },
    [d, g]
  ), H = o.useCallback(() => {
    const t = Q(document.querySelector(".k-popover-inner"));
    if (t && t.focus(), h) {
      const i = { target: c.current };
      h.call(void 0, i);
    }
  }, [h]), U = o.useCallback(
    (t) => {
      if (v && t.key === "Escape") {
        const i = { target: c.current, show: !1 };
        v.call(void 0, i);
      }
      t.key === "Tab" && W(t);
    },
    [v]
  ), X = o.useCallback(
    (t) => {
      if (m) {
        const i = { target: c.current };
        m.call(void 0, i);
      }
      t && t.target && t.target.props && t.target.props.anchor && t.target.props.anchor.focus();
    },
    [m]
  ), s = { "k-popover": !0 };
  Array.isArray(a) ? a.forEach((t) => s[t] = !0) : typeof a == "object" ? Object.keys(a).forEach((t) => {
    s[t] = a[t];
  }) : a && (s[a] = !0);
  const q = V ? oe[l] : ee[l], C = o.useMemo(
    () => /* @__PURE__ */ o.createElement(o.Fragment, null, u && /* @__PURE__ */ o.createElement("div", { className: "k-popover-header" }, u), /* @__PURE__ */ o.createElement("div", { className: "k-popover-body", style: b }, le(f)), re(f)),
    [f, b, u]
  );
  return /* @__PURE__ */ o.createElement(k.Provider, { value: L }, /* @__PURE__ */ o.createElement(
    J,
    {
      id: j,
      role: "tooltip",
      animate: D,
      collision: w,
      anchor: N,
      offset: x,
      margin: Z,
      popupAlign: _,
      anchorAlign: B,
      appendTo: R,
      show: z,
      scale: I,
      positionMode: F,
      style: S,
      className: K,
      popupClass: s,
      onOpen: H,
      onClose: X,
      onPosition: M,
      onKeyDown: U
    },
    p && l ? /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", { className: G("k-popover-callout", q) }), /* @__PURE__ */ o.createElement("div", { className: "k-popover-inner" }, C)) : C
  ));
}), y = {
  callout: !0,
  position: "top",
  collision: {
    horizontal: "none",
    vertical: "none"
  }
};
A.propTypes = {
  callout: e.bool,
  title: e.node,
  position: e.oneOf(["top", "left", "bottom", "right"]),
  show: e.bool,
  animate: e.oneOfType([
    e.bool,
    e.shape({
      openDuration: e.number,
      closeDuration: e.number
    })
  ]),
  anchor: function(r) {
    const n = r.anchor;
    return n && typeof n.nodeType != "number" ? new Error("Invalid prop `anchor` supplied to `Kendo React Popover`. Validation failed.") : null;
  },
  appendTo: function(r) {
    const n = r.appendTo;
    return n && typeof n.nodeType != "number" ? new Error("Invalid prop `appendTo` supplied to `Kendo React Popover`. Validation failed.") : null;
  },
  positionMode: e.oneOf(["fixed", "absolute"]),
  scale: e.number,
  offset: e.shape({
    left: e.number,
    top: e.number
  }),
  children: e.oneOfType([e.element, e.node]),
  className: e.oneOfType([e.string, e.arrayOf(e.string), e.object]),
  id: e.string,
  popoverClass: e.oneOfType([e.string, e.arrayOf(e.string), e.object]),
  style: e.object,
  onClose: e.func,
  onPosition: e.func,
  onOpen: e.func
};
A.displayName = "KendoReactPopover";
export {
  A as Popover
};