@progress/kendo-react-tooltip 6.1.1 → 7.0.0-develop.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +1 -1
- package/dist/cdn/js/kendo-react-tooltip.js +5 -1
- package/index.d.ts +23 -0
- package/index.js +5 -0
- package/index.mjs +468 -0
- package/package-metadata.d.ts +9 -0
- package/package.json +28 -44
- package/{dist/es/popover → popover}/Popover.d.ts +4 -0
- package/{dist/es/popover → popover}/PopoverActionsBar.d.ts +4 -0
- package/{dist/npm/popover → popover}/interfaces/Align.d.ts +4 -0
- package/{dist/npm/popover → popover}/interfaces/PopoverActionsBarProps.d.ts +4 -1
- package/popover/interfaces/PopoverAnimation.d.ts +10 -0
- package/popover/interfaces/PopoverCloseEvent.d.ts +14 -0
- package/{dist/npm/popover → popover}/interfaces/PopoverCollision.d.ts +4 -0
- package/{dist/npm/popover → popover}/interfaces/PopoverCollisionType.d.ts +5 -1
- package/{dist/npm/popover → popover}/interfaces/PopoverMargin.d.ts +4 -0
- package/popover/interfaces/PopoverOffset.d.ts +18 -0
- package/popover/interfaces/PopoverOpenEvent.d.ts +14 -0
- package/popover/interfaces/PopoverPosition.d.ts +13 -0
- package/{dist/es/popover → popover}/interfaces/PopoverPositionEvent.d.ts +4 -0
- package/popover/interfaces/PopoverPositionMode.d.ts +9 -0
- package/{dist/es/popover → popover}/interfaces/PopoverProps.d.ts +4 -1
- package/{dist/npm/tooltip → tooltip}/Tooltip.d.ts +5 -1
- package/{dist/npm/tooltip → tooltip}/TooltipProps.d.ts +4 -1
- package/{dist/es/tooltip → tooltip}/events.d.ts +4 -0
- package/{dist/npm/tooltip → tooltip}/utils.d.ts +5 -1
- package/about.md +0 -3
- package/dist/es/main.d.ts +0 -19
- package/dist/es/main.js +0 -4
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/es/popover/Popover.js +0 -174
- package/dist/es/popover/PopoverActionsBar.js +0 -33
- package/dist/es/popover/interfaces/Align.d.ts +0 -24
- package/dist/es/popover/interfaces/Align.js +0 -1
- package/dist/es/popover/interfaces/PopoverActionsBarProps.d.ts +0 -28
- package/dist/es/popover/interfaces/PopoverActionsBarProps.js +0 -1
- package/dist/es/popover/interfaces/PopoverAnimation.d.ts +0 -6
- package/dist/es/popover/interfaces/PopoverAnimation.js +0 -1
- package/dist/es/popover/interfaces/PopoverCloseEvent.d.ts +0 -10
- package/dist/es/popover/interfaces/PopoverCloseEvent.js +0 -1
- package/dist/es/popover/interfaces/PopoverCollision.d.ts +0 -14
- package/dist/es/popover/interfaces/PopoverCollision.js +0 -1
- package/dist/es/popover/interfaces/PopoverCollisionType.d.ts +0 -10
- package/dist/es/popover/interfaces/PopoverCollisionType.js +0 -1
- package/dist/es/popover/interfaces/PopoverMargin.d.ts +0 -14
- package/dist/es/popover/interfaces/PopoverMargin.js +0 -1
- package/dist/es/popover/interfaces/PopoverOffset.d.ts +0 -14
- package/dist/es/popover/interfaces/PopoverOffset.js +0 -1
- package/dist/es/popover/interfaces/PopoverOpenEvent.d.ts +0 -10
- package/dist/es/popover/interfaces/PopoverOpenEvent.js +0 -1
- package/dist/es/popover/interfaces/PopoverPosition.d.ts +0 -9
- package/dist/es/popover/interfaces/PopoverPosition.js +0 -1
- package/dist/es/popover/interfaces/PopoverPositionEvent.js +0 -1
- package/dist/es/popover/interfaces/PopoverPositionMode.d.ts +0 -5
- package/dist/es/popover/interfaces/PopoverPositionMode.js +0 -1
- package/dist/es/popover/interfaces/PopoverProps.js +0 -1
- package/dist/es/tooltip/Tooltip.d.ts +0 -85
- package/dist/es/tooltip/Tooltip.js +0 -313
- package/dist/es/tooltip/TooltipProps.d.ts +0 -109
- package/dist/es/tooltip/TooltipProps.js +0 -2
- package/dist/es/tooltip/events.js +0 -1
- package/dist/es/tooltip/utils.d.ts +0 -24
- package/dist/es/tooltip/utils.js +0 -106
- package/dist/npm/main.d.ts +0 -19
- package/dist/npm/main.js +0 -9
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/npm/popover/Popover.d.ts +0 -15
- package/dist/npm/popover/Popover.js +0 -177
- package/dist/npm/popover/PopoverActionsBar.d.ts +0 -19
- package/dist/npm/popover/PopoverActionsBar.js +0 -36
- package/dist/npm/popover/interfaces/Align.js +0 -2
- package/dist/npm/popover/interfaces/PopoverActionsBarProps.js +0 -2
- package/dist/npm/popover/interfaces/PopoverAnimation.d.ts +0 -6
- package/dist/npm/popover/interfaces/PopoverAnimation.js +0 -2
- package/dist/npm/popover/interfaces/PopoverCloseEvent.d.ts +0 -10
- package/dist/npm/popover/interfaces/PopoverCloseEvent.js +0 -2
- package/dist/npm/popover/interfaces/PopoverCollision.js +0 -2
- package/dist/npm/popover/interfaces/PopoverCollisionType.js +0 -2
- package/dist/npm/popover/interfaces/PopoverMargin.js +0 -2
- package/dist/npm/popover/interfaces/PopoverOffset.d.ts +0 -14
- package/dist/npm/popover/interfaces/PopoverOffset.js +0 -2
- package/dist/npm/popover/interfaces/PopoverOpenEvent.d.ts +0 -10
- package/dist/npm/popover/interfaces/PopoverOpenEvent.js +0 -2
- package/dist/npm/popover/interfaces/PopoverPosition.d.ts +0 -9
- package/dist/npm/popover/interfaces/PopoverPosition.js +0 -2
- package/dist/npm/popover/interfaces/PopoverPositionEvent.d.ts +0 -18
- package/dist/npm/popover/interfaces/PopoverPositionEvent.js +0 -2
- package/dist/npm/popover/interfaces/PopoverPositionMode.d.ts +0 -5
- package/dist/npm/popover/interfaces/PopoverPositionMode.js +0 -2
- package/dist/npm/popover/interfaces/PopoverProps.d.ts +0 -112
- package/dist/npm/popover/interfaces/PopoverProps.js +0 -2
- package/dist/npm/tooltip/Tooltip.js +0 -316
- package/dist/npm/tooltip/TooltipProps.js +0 -3
- package/dist/npm/tooltip/events.d.ts +0 -31
- package/dist/npm/tooltip/events.js +0 -2
- package/dist/npm/tooltip/utils.js +0 -113
- package/dist/systemjs/kendo-react-tooltip.js +0 -1
- package/e2e-next/popover.basic.tests.ts +0 -25
- package/e2e-next/tooltip.basic.tests.ts +0 -25
package/index.mjs
ADDED
|
@@ -0,0 +1,468 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import * as s from "react";
|
|
6
|
+
import * as tt from "react-dom";
|
|
7
|
+
import * as n from "prop-types";
|
|
8
|
+
import { ZIndexContext as k, dispatchEvent as P, validatePackage as D, classNames as m } from "@progress/kendo-react-common";
|
|
9
|
+
import { Popup as et } from "@progress/kendo-react-popup";
|
|
10
|
+
const p = 10, u = 10, ot = (o, t, e, i, r) => {
|
|
11
|
+
switch (r) {
|
|
12
|
+
case "bottom":
|
|
13
|
+
return i === "pointer" ? o - t / 2 : e.left - t / 2 + e.width / 2;
|
|
14
|
+
case "left":
|
|
15
|
+
return i === "pointer" ? o - t - p : e.left - t - p;
|
|
16
|
+
case "right":
|
|
17
|
+
return i === "pointer" ? o + p : e.right + p;
|
|
18
|
+
case "top":
|
|
19
|
+
return i === "pointer" ? o - t / 2 : e.left - t / 2 + e.width / 2;
|
|
20
|
+
default:
|
|
21
|
+
return i === "pointer" ? o < window.screen.availWidth / 2 ? o - p : o - t + p : o < window.screen.availWidth / 2 ? e.left : e.right - t;
|
|
22
|
+
}
|
|
23
|
+
}, nt = (o, t, e, i, r) => {
|
|
24
|
+
switch (r) {
|
|
25
|
+
case "bottom":
|
|
26
|
+
return i === "pointer" ? o + u : t.bottom + u;
|
|
27
|
+
case "left":
|
|
28
|
+
return i === "pointer" ? o - e / 2 : t.top - e / 2 + t.height / 2;
|
|
29
|
+
case "right":
|
|
30
|
+
return i === "pointer" ? o - e / 2 : t.top - e / 2 + t.height / 2;
|
|
31
|
+
case "top":
|
|
32
|
+
return i === "pointer" ? o - e - u : t.top - e - u;
|
|
33
|
+
default:
|
|
34
|
+
return i === "pointer" ? o < window.innerHeight / 2 ? o + p : o - e - p : o < window.innerHeight / 2 ? t.bottom + u : t.top - e - u;
|
|
35
|
+
}
|
|
36
|
+
}, it = (o) => o !== null ? o.getBoundingClientRect() : document.body.getBoundingClientRect(), st = [
|
|
37
|
+
"k-tooltip-content",
|
|
38
|
+
"k-animation-container",
|
|
39
|
+
"k-tooltip",
|
|
40
|
+
"k-tooltip-title",
|
|
41
|
+
"k-tooltip k-tooltip-closable",
|
|
42
|
+
"k-icon k-i-close"
|
|
43
|
+
], N = (o) => {
|
|
44
|
+
if (o === null)
|
|
45
|
+
return !1;
|
|
46
|
+
let t = o;
|
|
47
|
+
for (; t; ) {
|
|
48
|
+
if (t !== null && t.classList && t.classList.contains("k-tooltip"))
|
|
49
|
+
return !0;
|
|
50
|
+
t.parentNode !== null ? t = t.parentNode : t = !1;
|
|
51
|
+
}
|
|
52
|
+
return st.filter((e) => e === o.className).length > 0;
|
|
53
|
+
}, R = {
|
|
54
|
+
name: "@progress/kendo-react-tooltip",
|
|
55
|
+
productName: "KendoReact",
|
|
56
|
+
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
57
|
+
publishDate: 1701439805,
|
|
58
|
+
version: "",
|
|
59
|
+
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
60
|
+
}, rt = 100, A = class extends s.PureComponent {
|
|
61
|
+
constructor(o) {
|
|
62
|
+
super(o), this.context = 0, this.state = {
|
|
63
|
+
targetElement: null,
|
|
64
|
+
open: !1,
|
|
65
|
+
title: ""
|
|
66
|
+
}, this.top = 0, this.left = 0, this.willOpen = !1, this.handleMouseOut = (t) => {
|
|
67
|
+
const { targetElement: e } = this.state, i = e ? e.ownerDocument : document;
|
|
68
|
+
let r = i && i.elementFromPoint(t.clientX, t.clientY);
|
|
69
|
+
N(r) || this.props.open || (clearInterval(this.updateIntervalId), this.willOpen = !1, this.onClose(t));
|
|
70
|
+
}, this.handleMouseOver = (t) => {
|
|
71
|
+
const e = t.target;
|
|
72
|
+
!this.isVisible(e) || N(e) || e === this.state.targetElement || this.showToolTip(t);
|
|
73
|
+
}, this.handleBodyMousemove = (t) => {
|
|
74
|
+
this.top = t.clientY, this.left = t.clientX;
|
|
75
|
+
}, this.onClose = (t) => {
|
|
76
|
+
P(this.props.onClose, t, this, void 0), this.setState({ targetElement: null, open: !1, title: "" });
|
|
77
|
+
}, this.setUpdateInterval = () => {
|
|
78
|
+
this.props.updateInterval && (this.updateIntervalId = setInterval(
|
|
79
|
+
this.onIntervalUpdate,
|
|
80
|
+
this.props.updateInterval
|
|
81
|
+
));
|
|
82
|
+
}, this.onIntervalUpdate = () => {
|
|
83
|
+
const t = this.state.targetElement;
|
|
84
|
+
t && (t.parentElement === null ? this.onClose({ target: t }) : this.showToolTip({ target: t }));
|
|
85
|
+
}, this.position = (t) => {
|
|
86
|
+
let e = it(this.state.targetElement);
|
|
87
|
+
const i = ot(
|
|
88
|
+
this.left,
|
|
89
|
+
t.offsetWidth,
|
|
90
|
+
e,
|
|
91
|
+
this.props.anchorElement,
|
|
92
|
+
this.props.position
|
|
93
|
+
), r = nt(
|
|
94
|
+
this.top,
|
|
95
|
+
e,
|
|
96
|
+
t.offsetHeight,
|
|
97
|
+
this.props.anchorElement,
|
|
98
|
+
this.props.position
|
|
99
|
+
);
|
|
100
|
+
return { left: i, top: r };
|
|
101
|
+
}, this.getTitle = (t) => {
|
|
102
|
+
for (; t; ) {
|
|
103
|
+
if (t.getAttribute("title") !== null || t.titleExpando)
|
|
104
|
+
return { title: t.getAttribute("title") || t.titleExpando, element: t };
|
|
105
|
+
t = this.props.parentTitle && t.parentElement || null;
|
|
106
|
+
}
|
|
107
|
+
return { title: "", element: t };
|
|
108
|
+
}, this.calloutClassName = () => {
|
|
109
|
+
switch (this.props.position) {
|
|
110
|
+
case "bottom":
|
|
111
|
+
return "k-callout k-callout-n";
|
|
112
|
+
case "left":
|
|
113
|
+
return "k-callout k-callout-e";
|
|
114
|
+
case "right":
|
|
115
|
+
return "k-callout k-callout-w";
|
|
116
|
+
case "top":
|
|
117
|
+
return "k-callout k-callout-s";
|
|
118
|
+
default:
|
|
119
|
+
return this.top < window.innerHeight / 2 ? "k-callout k-callout-n" : "k-callout k-callout-s";
|
|
120
|
+
}
|
|
121
|
+
}, this.getCurrentZIndex = () => this.context ? this.context : rt, D(R);
|
|
122
|
+
}
|
|
123
|
+
/**
|
|
124
|
+
* @hidden
|
|
125
|
+
*/
|
|
126
|
+
componentDidMount() {
|
|
127
|
+
document && document.body.addEventListener("mousemove", this.handleBodyMousemove);
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* @hidden
|
|
131
|
+
*/
|
|
132
|
+
componentWillUnmount() {
|
|
133
|
+
clearTimeout(this.openTimeoutId), clearInterval(this.updateIntervalId), document && document.body.removeEventListener("mousemove", this.handleBodyMousemove);
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* @hidden
|
|
137
|
+
*/
|
|
138
|
+
componentDidUpdate() {
|
|
139
|
+
this.props.open && this.props.targetElement && this.showToolTip({ target: this.props.targetElement });
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
142
|
+
* @hidden
|
|
143
|
+
*/
|
|
144
|
+
render() {
|
|
145
|
+
if (this.props.children) {
|
|
146
|
+
const { children: e, ...i } = this.props;
|
|
147
|
+
let r = null;
|
|
148
|
+
return /* @__PURE__ */ s.createElement(
|
|
149
|
+
"div",
|
|
150
|
+
{
|
|
151
|
+
onMouseOver: (a) => {
|
|
152
|
+
r && r.handleMouseOver(a);
|
|
153
|
+
},
|
|
154
|
+
onMouseOut: (a) => {
|
|
155
|
+
r && r.handleMouseOut(a);
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
/* @__PURE__ */ s.createElement(A, { ref: (a) => r = a, ...i }),
|
|
159
|
+
e
|
|
160
|
+
);
|
|
161
|
+
}
|
|
162
|
+
if (this.props.open === !1)
|
|
163
|
+
return null;
|
|
164
|
+
const { targetElement: o } = this.state, t = this.getCurrentZIndex();
|
|
165
|
+
return o && this.state.title && o.ownerDocument && tt.createPortal(
|
|
166
|
+
/* @__PURE__ */ s.createElement(
|
|
167
|
+
"div",
|
|
168
|
+
{
|
|
169
|
+
ref: (e) => {
|
|
170
|
+
if (!e)
|
|
171
|
+
return;
|
|
172
|
+
let i;
|
|
173
|
+
if (this.props.onPosition) {
|
|
174
|
+
const r = {
|
|
175
|
+
element: e,
|
|
176
|
+
targetElement: this.state.targetElement,
|
|
177
|
+
mouseTop: this.top,
|
|
178
|
+
mouseLeft: this.left,
|
|
179
|
+
anchorElement: this.props.anchorElement,
|
|
180
|
+
position: this.props.position,
|
|
181
|
+
target: this,
|
|
182
|
+
syntheticEvent: null,
|
|
183
|
+
nativeEvent: null
|
|
184
|
+
};
|
|
185
|
+
i = this.props.onPosition.call(void 0, r);
|
|
186
|
+
} else
|
|
187
|
+
i = this.position(e);
|
|
188
|
+
e.style.left = i.left + "px", e.style.top = i.top + "px";
|
|
189
|
+
},
|
|
190
|
+
className: m(
|
|
191
|
+
"k-animation-container",
|
|
192
|
+
"k-animation-container-fixed",
|
|
193
|
+
"k-animation-container-shown",
|
|
194
|
+
this.props.className
|
|
195
|
+
),
|
|
196
|
+
style: {
|
|
197
|
+
zIndex: t,
|
|
198
|
+
...this.props.style
|
|
199
|
+
},
|
|
200
|
+
tabIndex: 0
|
|
201
|
+
},
|
|
202
|
+
/* @__PURE__ */ s.createElement("div", { className: "k-child-animation-container" }, /* @__PURE__ */ s.createElement(
|
|
203
|
+
"div",
|
|
204
|
+
{
|
|
205
|
+
id: this.props.id,
|
|
206
|
+
role: "tooltip",
|
|
207
|
+
className: m(
|
|
208
|
+
"k-tooltip",
|
|
209
|
+
this.props.tooltipClassName
|
|
210
|
+
),
|
|
211
|
+
style: { position: "relative", ...this.props.tooltipStyle }
|
|
212
|
+
},
|
|
213
|
+
/* @__PURE__ */ s.createElement("div", { className: "k-tooltip-content" }, this.props.content && /* @__PURE__ */ s.createElement(this.props.content, { title: this.state.title, target: this.state.targetElement }) || this.state.title),
|
|
214
|
+
this.props.showCallout && /* @__PURE__ */ s.createElement(
|
|
215
|
+
"div",
|
|
216
|
+
{
|
|
217
|
+
ref: (e) => {
|
|
218
|
+
e && (e.className = this.calloutClassName(), this.props.position === "auto" && (this.left < window.screen.availWidth / 2 ? e.style.left = this.props.setCalloutOnPositionAuto || "25%" : e.style.left = this.props.setCalloutOnPositionAuto || "75%"));
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
)
|
|
222
|
+
))
|
|
223
|
+
),
|
|
224
|
+
this.props.appendTo ? this.props.appendTo : o.ownerDocument.body
|
|
225
|
+
);
|
|
226
|
+
}
|
|
227
|
+
showToolTip(o) {
|
|
228
|
+
clearTimeout(this.openTimeoutId), clearInterval(this.updateIntervalId), o.target.hasChildNodes() && o.target.childNodes.forEach((i) => {
|
|
229
|
+
i.nodeName === "title" && (o.target.titleExpando = i.innerHTML, i.remove());
|
|
230
|
+
});
|
|
231
|
+
const t = this.props.targetElement || o.target;
|
|
232
|
+
let e = this.getTitle(t);
|
|
233
|
+
if (!e.title) {
|
|
234
|
+
this.state.open && this.onClose(o);
|
|
235
|
+
return;
|
|
236
|
+
}
|
|
237
|
+
e.element && (e.element.titleExpando = e.title, e.element.title = ""), this.willOpen = !0, this.props.openDelay ? this.openTimeoutId = window.setTimeout(
|
|
238
|
+
() => {
|
|
239
|
+
this.willOpen && this.setState({ targetElement: t, open: !0, title: e.title }, this.setUpdateInterval);
|
|
240
|
+
},
|
|
241
|
+
this.props.openDelay
|
|
242
|
+
) : this.setState({ targetElement: t, open: !0, title: e.title }, this.setUpdateInterval), this.state.title !== e.title && P(this.props.onOpen, o, this, void 0);
|
|
243
|
+
}
|
|
244
|
+
isVisible(o) {
|
|
245
|
+
return !this.props.filter || this.props.filter(o);
|
|
246
|
+
}
|
|
247
|
+
};
|
|
248
|
+
let T = A;
|
|
249
|
+
T.propTypes = {
|
|
250
|
+
anchorElement: n.oneOf(["pointer", "target"]),
|
|
251
|
+
content: n.func,
|
|
252
|
+
filter: n.func,
|
|
253
|
+
openDelay: n.number,
|
|
254
|
+
position: n.oneOf(["right", "left", "top", "bottom", "auto"]),
|
|
255
|
+
updateInterval: n.number
|
|
256
|
+
};
|
|
257
|
+
T.defaultProps = {
|
|
258
|
+
anchorElement: "pointer",
|
|
259
|
+
openDelay: 400,
|
|
260
|
+
position: "auto",
|
|
261
|
+
showCallout: !0,
|
|
262
|
+
parentTitle: !1
|
|
263
|
+
};
|
|
264
|
+
T.contextType = k;
|
|
265
|
+
const d = s.forwardRef((o, t) => {
|
|
266
|
+
const e = s.useRef(null), i = s.useRef(null);
|
|
267
|
+
return s.useImperativeHandle(i, () => ({ props: o, element: e.current })), s.useImperativeHandle(t, () => i.current), /* @__PURE__ */ s.createElement(
|
|
268
|
+
"div",
|
|
269
|
+
{
|
|
270
|
+
ref: e,
|
|
271
|
+
className: m(
|
|
272
|
+
"k-popover-actions",
|
|
273
|
+
"k-actions",
|
|
274
|
+
{
|
|
275
|
+
[`k-actions-${o.alignment}`]: o.alignment,
|
|
276
|
+
[`k-actions-${o.orientation}`]: o.orientation
|
|
277
|
+
}
|
|
278
|
+
)
|
|
279
|
+
},
|
|
280
|
+
o.children
|
|
281
|
+
);
|
|
282
|
+
}), lt = {
|
|
283
|
+
alignment: "stretched",
|
|
284
|
+
orientation: "horizontal"
|
|
285
|
+
};
|
|
286
|
+
d.propTypes = {
|
|
287
|
+
alignment: n.oneOf(["start", "center", "end", "stretched"]),
|
|
288
|
+
orientation: n.oneOf(["horizontal", "vertical"]),
|
|
289
|
+
children: n.oneOfType([
|
|
290
|
+
n.element,
|
|
291
|
+
n.node
|
|
292
|
+
])
|
|
293
|
+
};
|
|
294
|
+
d.defaultProps = lt;
|
|
295
|
+
d.displayName = "KendoReactPopoverActionsBar";
|
|
296
|
+
const at = 12e3, pt = 2e3, x = 15, ct = {
|
|
297
|
+
top: "k-callout-s",
|
|
298
|
+
left: "k-callout-e",
|
|
299
|
+
bottom: "k-callout-n",
|
|
300
|
+
right: "k-callout-w"
|
|
301
|
+
}, ut = {
|
|
302
|
+
top: "k-callout-n",
|
|
303
|
+
left: "k-callout-w",
|
|
304
|
+
bottom: "k-callout-s",
|
|
305
|
+
right: "k-callout-e"
|
|
306
|
+
}, ht = {
|
|
307
|
+
top: { vertical: "bottom", horizontal: "center" },
|
|
308
|
+
left: { vertical: "center", horizontal: "right" },
|
|
309
|
+
bottom: { vertical: "top", horizontal: "center" },
|
|
310
|
+
right: { vertical: "center", horizontal: "left" }
|
|
311
|
+
}, dt = {
|
|
312
|
+
top: { vertical: "top", horizontal: "center" },
|
|
313
|
+
left: { vertical: "center", horizontal: "left" },
|
|
314
|
+
bottom: { vertical: "bottom", horizontal: "center" },
|
|
315
|
+
right: { vertical: "center", horizontal: "right" }
|
|
316
|
+
}, ft = (o) => s.Children.toArray(o).filter((t) => t && t.type === d), mt = (o) => s.Children.toArray(o).filter((t) => t && t.type !== d), w = s.forwardRef((o, t) => {
|
|
317
|
+
D(R);
|
|
318
|
+
const {
|
|
319
|
+
callout: e,
|
|
320
|
+
position: i,
|
|
321
|
+
title: r,
|
|
322
|
+
children: a,
|
|
323
|
+
show: M,
|
|
324
|
+
anchor: z,
|
|
325
|
+
appendTo: L,
|
|
326
|
+
offset: U,
|
|
327
|
+
animate: B,
|
|
328
|
+
positionMode: S,
|
|
329
|
+
scale: Z,
|
|
330
|
+
popoverClass: c,
|
|
331
|
+
className: _,
|
|
332
|
+
id: F,
|
|
333
|
+
style: K,
|
|
334
|
+
collision: V,
|
|
335
|
+
contentStyle: b,
|
|
336
|
+
onPosition: v,
|
|
337
|
+
onClose: g,
|
|
338
|
+
onOpen: y
|
|
339
|
+
} = o, [j, E] = s.useState(!1), I = i === "top" || i === "bottom", X = o.margin || {
|
|
340
|
+
vertical: e && I ? x : 0,
|
|
341
|
+
horizontal: e && !I ? x : 0
|
|
342
|
+
}, H = ht[i], $ = dt[i], O = s.useContext(k), Y = O ? O + pt : at, h = s.useRef(null);
|
|
343
|
+
s.useImperativeHandle(h, () => ({ props: o })), s.useImperativeHandle(t, () => h.current);
|
|
344
|
+
const q = s.useCallback(
|
|
345
|
+
(l) => {
|
|
346
|
+
if (setTimeout(() => E(l.flipped)), v) {
|
|
347
|
+
const W = { target: h.current, flipped: l.flipped, fitted: l.fitted };
|
|
348
|
+
v.call(void 0, W);
|
|
349
|
+
}
|
|
350
|
+
},
|
|
351
|
+
[v, E]
|
|
352
|
+
), G = s.useCallback(
|
|
353
|
+
() => {
|
|
354
|
+
if (y) {
|
|
355
|
+
const l = { target: h.current };
|
|
356
|
+
y.call(void 0, l);
|
|
357
|
+
}
|
|
358
|
+
},
|
|
359
|
+
[y]
|
|
360
|
+
), J = s.useCallback(
|
|
361
|
+
() => {
|
|
362
|
+
if (g) {
|
|
363
|
+
const l = { target: h.current };
|
|
364
|
+
g.call(void 0, l);
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
[g]
|
|
368
|
+
), f = { "k-popover": !0 };
|
|
369
|
+
Array.isArray(c) ? c.forEach((l) => f[l] = !0) : typeof c == "object" ? Object.keys(c).forEach((l) => {
|
|
370
|
+
f[l] = c[l];
|
|
371
|
+
}) : c && (f[c] = !0);
|
|
372
|
+
const Q = j ? ut[i] : ct[i], C = s.useMemo(
|
|
373
|
+
() => /* @__PURE__ */ s.createElement(s.Fragment, null, r && /* @__PURE__ */ s.createElement("div", { className: "k-popover-header" }, r), /* @__PURE__ */ s.createElement("div", { className: "k-popover-body", style: b }, mt(a)), ft(a)),
|
|
374
|
+
[a, b, r]
|
|
375
|
+
);
|
|
376
|
+
return /* @__PURE__ */ s.createElement(k.Provider, { value: Y }, /* @__PURE__ */ s.createElement(
|
|
377
|
+
et,
|
|
378
|
+
{
|
|
379
|
+
id: F,
|
|
380
|
+
role: "tooltip",
|
|
381
|
+
animate: B,
|
|
382
|
+
collision: V,
|
|
383
|
+
anchor: z,
|
|
384
|
+
offset: U,
|
|
385
|
+
margin: X,
|
|
386
|
+
popupAlign: H,
|
|
387
|
+
anchorAlign: $,
|
|
388
|
+
appendTo: L,
|
|
389
|
+
show: M,
|
|
390
|
+
scale: Z,
|
|
391
|
+
positionMode: S,
|
|
392
|
+
style: K,
|
|
393
|
+
className: _,
|
|
394
|
+
popupClass: f,
|
|
395
|
+
onOpen: G,
|
|
396
|
+
onClose: J,
|
|
397
|
+
onPosition: q
|
|
398
|
+
},
|
|
399
|
+
e && i ? /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement("div", { className: m("k-popover-callout", Q) }), /* @__PURE__ */ s.createElement("div", { className: "k-popover-inner" }, C)) : C
|
|
400
|
+
));
|
|
401
|
+
}), vt = {
|
|
402
|
+
callout: !0,
|
|
403
|
+
position: "top",
|
|
404
|
+
collision: {
|
|
405
|
+
horizontal: "none",
|
|
406
|
+
vertical: "none"
|
|
407
|
+
}
|
|
408
|
+
};
|
|
409
|
+
w.propTypes = {
|
|
410
|
+
callout: n.bool,
|
|
411
|
+
title: n.node,
|
|
412
|
+
position: n.oneOf(["top", "left", "bottom", "right"]),
|
|
413
|
+
show: n.bool,
|
|
414
|
+
animate: n.oneOfType([
|
|
415
|
+
n.bool,
|
|
416
|
+
n.shape({
|
|
417
|
+
openDuration: n.number,
|
|
418
|
+
closeDuration: n.number
|
|
419
|
+
})
|
|
420
|
+
]),
|
|
421
|
+
anchor: function(o) {
|
|
422
|
+
const t = o.anchor;
|
|
423
|
+
return t && typeof t.nodeType != "number" ? new Error(
|
|
424
|
+
"Invalid prop `anchor` supplied to `Kendo React Popover`. Validation failed."
|
|
425
|
+
) : null;
|
|
426
|
+
},
|
|
427
|
+
appendTo: function(o) {
|
|
428
|
+
const t = o.appendTo;
|
|
429
|
+
return t && typeof t.nodeType != "number" ? new Error(
|
|
430
|
+
"Invalid prop `appendTo` supplied to `Kendo React Popover`. Validation failed."
|
|
431
|
+
) : null;
|
|
432
|
+
},
|
|
433
|
+
positionMode: n.oneOf([
|
|
434
|
+
"fixed",
|
|
435
|
+
"absolute"
|
|
436
|
+
]),
|
|
437
|
+
scale: n.number,
|
|
438
|
+
offset: n.shape({
|
|
439
|
+
left: n.number,
|
|
440
|
+
top: n.number
|
|
441
|
+
}),
|
|
442
|
+
children: n.oneOfType([
|
|
443
|
+
n.element,
|
|
444
|
+
n.node
|
|
445
|
+
]),
|
|
446
|
+
className: n.oneOfType([
|
|
447
|
+
n.string,
|
|
448
|
+
n.arrayOf(n.string),
|
|
449
|
+
n.object
|
|
450
|
+
]),
|
|
451
|
+
id: n.string,
|
|
452
|
+
popoverClass: n.oneOfType([
|
|
453
|
+
n.string,
|
|
454
|
+
n.arrayOf(n.string),
|
|
455
|
+
n.object
|
|
456
|
+
]),
|
|
457
|
+
style: n.object,
|
|
458
|
+
onClose: n.func,
|
|
459
|
+
onPosition: n.func,
|
|
460
|
+
onOpen: n.func
|
|
461
|
+
};
|
|
462
|
+
w.defaultProps = vt;
|
|
463
|
+
w.displayName = "KendoReactPopover";
|
|
464
|
+
export {
|
|
465
|
+
w as Popover,
|
|
466
|
+
d as PopoverActionsBar,
|
|
467
|
+
T as Tooltip
|
|
468
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { PackageMetadata } from '@progress/kendo-licensing';
|
|
6
|
+
/**
|
|
7
|
+
* @hidden
|
|
8
|
+
*/
|
|
9
|
+
export declare const packageMetadata: PackageMetadata;
|
package/package.json
CHANGED
|
@@ -1,23 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-tooltip",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.0-develop.10",
|
|
4
4
|
"description": "React Tooltips library represents popups with information that is related to a UI element. KendoReact Tooltips package",
|
|
5
|
-
"
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
"author": "Progress",
|
|
6
|
+
"license": "SEE LICENSE IN LICENSE.md",
|
|
7
|
+
"homepage": "https://www.telerik.com/kendo-react-ui",
|
|
8
|
+
"main": "./index.js",
|
|
9
|
+
"types": "./index.d.ts",
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"import": "./index.mjs",
|
|
13
|
+
"require": "./index.js"
|
|
14
|
+
}
|
|
8
15
|
},
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
"sideEffects": false,
|
|
17
|
+
"peerDependencies": {
|
|
18
|
+
"@progress/kendo-licensing": "^1.3.0",
|
|
19
|
+
"@progress/kendo-react-common": "7.0.0-develop.10",
|
|
20
|
+
"@progress/kendo-react-popup": "7.0.0-develop.10",
|
|
21
|
+
"@progress/kendo-svg-icons": "^2.0.0",
|
|
22
|
+
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
23
|
+
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|
|
24
|
+
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"prop-types": "^15.6.0"
|
|
19
27
|
},
|
|
20
|
-
"homepage": "https://www.telerik.com/kendo-react-ui",
|
|
21
28
|
"keywords": [
|
|
22
29
|
"Kendo UI",
|
|
23
30
|
"React",
|
|
@@ -31,38 +38,15 @@
|
|
|
31
38
|
"React component",
|
|
32
39
|
"Telerik"
|
|
33
40
|
],
|
|
34
|
-
"peerDependencies": {
|
|
35
|
-
"@progress/kendo-licensing": "^1.3.0",
|
|
36
|
-
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
37
|
-
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|
|
38
|
-
},
|
|
39
|
-
"dependencies": {
|
|
40
|
-
"@progress/kendo-react-common": "6.1.1",
|
|
41
|
-
"@progress/kendo-react-popup": "6.1.1",
|
|
42
|
-
"prop-types": "^15.6.0"
|
|
43
|
-
},
|
|
44
|
-
"devDependencies": {
|
|
45
|
-
"@progress/kendo-date-math": "^1.4.0",
|
|
46
|
-
"@progress/kendo-drawing": "^1.17.2",
|
|
47
|
-
"@progress/kendo-licensing": "^1.3.0",
|
|
48
|
-
"@progress/kendo-react-buttons": "6.1.1",
|
|
49
|
-
"@progress/kendo-react-dateinputs": "6.1.1",
|
|
50
|
-
"@progress/kendo-react-dialogs": "6.1.1",
|
|
51
|
-
"@progress/kendo-react-dropdowns": "6.1.1",
|
|
52
|
-
"@progress/kendo-react-form": "6.1.1",
|
|
53
|
-
"@progress/kendo-react-grid": "6.1.1",
|
|
54
|
-
"@progress/kendo-react-inputs": "6.1.1",
|
|
55
|
-
"@progress/kendo-react-intl": "6.1.1",
|
|
56
|
-
"@progress/kendo-react-labels": "6.1.1"
|
|
57
|
-
},
|
|
58
41
|
"@progress": {
|
|
59
42
|
"friendlyName": "Tooltip",
|
|
60
43
|
"framework": "KendoReact"
|
|
61
44
|
},
|
|
62
|
-
"
|
|
63
|
-
|
|
45
|
+
"repository": {
|
|
46
|
+
"type": "git",
|
|
47
|
+
"url": "git+https://github.com/telerik/kendo-react.git"
|
|
48
|
+
},
|
|
64
49
|
"publishConfig": {
|
|
65
50
|
"access": "public"
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
1
5
|
import * as React from 'react';
|
|
2
6
|
import { PopoverProps } from './interfaces/PopoverProps';
|
|
3
7
|
/**
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
1
5
|
import * as React from 'react';
|
|
2
6
|
import { PopoverActionsBarProps } from './interfaces/PopoverActionsBarProps';
|
|
3
7
|
/**
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
1
5
|
import { Align as AlignBase } from '@progress/kendo-react-popup';
|
|
2
6
|
/**
|
|
3
7
|
* Defines the horizontal and vertical aligning point of the Popup.
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
2
5
|
/**
|
|
3
6
|
* Represents the props of the [KendoReact PopoverActionsBar]({% slug api_tooltip_popoveractionsbar %}) component.
|
|
4
7
|
*/
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { PopupAnimation } from '@progress/kendo-react-popup';
|
|
6
|
+
/**
|
|
7
|
+
* The animation settings of the Popover.
|
|
8
|
+
*/
|
|
9
|
+
export interface PopoverAnimation extends PopupAnimation {
|
|
10
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { PopoverHandle } from '../Popover';
|
|
6
|
+
/**
|
|
7
|
+
* Represents the object of the `Close` Popover event.
|
|
8
|
+
*/
|
|
9
|
+
export interface PopoverCloseEvent {
|
|
10
|
+
/**
|
|
11
|
+
* An event target.
|
|
12
|
+
*/
|
|
13
|
+
target: PopoverHandle;
|
|
14
|
+
}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
1
5
|
import { PopoverCollisionType } from './PopoverCollisionType';
|
|
2
6
|
/**
|
|
3
7
|
* Defines the horizontal and vertical collision behavior of the Popover.
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
1
5
|
import { CollisionType as CollisionTypeBase } from '@progress/kendo-react-popup';
|
|
2
6
|
/**
|
|
3
7
|
* Defines the possible collision behavior when the Popover is not fully visible.
|
|
@@ -7,4 +11,4 @@ import { CollisionType as CollisionTypeBase } from '@progress/kendo-react-popup'
|
|
|
7
11
|
* - `flip`—Flips the Popover position based on the origin and the position properties.
|
|
8
12
|
* - `none`—The Popover is rendered at its original position. Usable when the Popover is focused on open and the page is scrolled to it.
|
|
9
13
|
*/
|
|
10
|
-
export
|
|
14
|
+
export type PopoverCollisionType = CollisionTypeBase;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
1
5
|
import { Margin as MarginBase } from '@progress/kendo-react-popup';
|
|
2
6
|
/**
|
|
3
7
|
* Defines the horizontal and the vertical margin offset of the component.
|