@progress/kendo-react-tooltip
Version:
React Tooltips library represents popups with information that is related to a UI element. KendoReact Tooltips package
183 lines (182 loc) • 5.69 kB
JavaScript
/**
* @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 t from "react";
import e from "prop-types";
import { ZIndexContext as k, classNames as J } from "@progress/kendo-react-common";
import { Popup as Q } from "@progress/kendo-react-popup";
import { PopoverActionsBar as T } from "./PopoverActionsBar.mjs";
import { getFirstFocusableElement as W, handleFocusTrap as Y } from "./utils.mjs";
const $ = 12e3, ee = 2e3, O = 15, oe = {
top: "k-callout-s",
left: "k-callout-e",
bottom: "k-callout-n",
right: "k-callout-w"
}, te = {
top: "k-callout-n",
left: "k-callout-w",
bottom: "k-callout-s",
right: "k-callout-e"
}, ne = {
top: { vertical: "bottom", horizontal: "center" },
left: { vertical: "center", horizontal: "right" },
bottom: { vertical: "top", horizontal: "center" },
right: { vertical: "center", horizontal: "left" }
}, re = {
top: { vertical: "top", horizontal: "center" },
left: { vertical: "center", horizontal: "left" },
bottom: { vertical: "bottom", horizontal: "center" },
right: { vertical: "center", horizontal: "right" }
}, le = (r) => t.Children.toArray(r).filter((n) => n && n.type === T), ae = (r) => t.Children.toArray(r).filter((n) => n && n.type !== T), A = t.forwardRef((r, n) => {
const {
autoFocus: w = !0,
callout: p = y.callout,
position: l = y.position,
collision: z = y.collision,
title: u,
children: f,
show: N,
anchor: F,
appendTo: R,
offset: x,
animate: D,
positionMode: I,
scale: K,
popoverClass: a,
className: j,
id: S,
style: V,
contentStyle: b,
onPosition: d,
onClose: m,
onOpen: h,
onKeyDown: v
} = r, [Z, g] = t.useState(!1), P = l === "top" || l === "bottom", _ = r.margin || {
vertical: p && P ? O : 0,
horizontal: p && !P ? O : 0
}, B = ne[l], L = re[l], E = t.useContext(k), M = E ? E + ee : $, i = t.useRef(null);
t.useImperativeHandle(i, () => ({ props: r })), t.useImperativeHandle(n, () => i.current);
const H = t.useCallback(
(o) => {
if (setTimeout(() => g(o.flipped)), d) {
const c = {
target: i.current,
flipped: o.flipped,
fitted: o.fitted
};
d.call(void 0, c);
}
},
[d, g]
), U = t.useCallback(() => {
if (w) {
const o = W(document.querySelector(".k-popover-inner"));
o && o.focus();
}
if (h) {
const o = { target: i.current };
h.call(void 0, o);
}
}, [h]), X = t.useCallback(
(o) => {
if (v && o.key === "Escape") {
const c = { target: i.current, show: !1 };
v.call(void 0, c);
}
o.key === "Tab" && Y(o);
},
[v]
), q = t.useCallback(
(o) => {
if (m) {
const c = { target: i.current };
m.call(void 0, c);
}
o && o.target && o.target.props && o.target.props.anchor && o.target.props.anchor.focus();
},
[m]
), s = { "k-popover": !0 };
Array.isArray(a) ? a.forEach((o) => s[o] = !0) : typeof a == "object" ? Object.keys(a).forEach((o) => {
s[o] = a[o];
}) : a && (s[a] = !0);
const G = Z ? te[l] : oe[l], C = t.useMemo(
() => /* @__PURE__ */ t.createElement(t.Fragment, null, u && /* @__PURE__ */ t.createElement("div", { className: "k-popover-header" }, u), /* @__PURE__ */ t.createElement("div", { className: "k-popover-body", style: b }, ae(f)), le(f)),
[f, b, u]
);
return /* @__PURE__ */ t.createElement(k.Provider, { value: M }, /* @__PURE__ */ t.createElement(
Q,
{
id: S,
role: "tooltip",
animate: D,
collision: z,
anchor: F,
offset: x,
margin: _,
popupAlign: B,
anchorAlign: L,
appendTo: R,
show: N,
scale: K,
positionMode: I,
style: V,
className: j,
popupClass: s,
onOpen: U,
onClose: q,
onPosition: H,
onKeyDown: X
},
p && l ? /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: J("k-popover-callout", G) }), /* @__PURE__ */ t.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
};