@progress/kendo-react-popup 14.5.0-develop.9 → 15.0.0-develop.1
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/Popup.js +1 -1
- package/Popup.mjs +65 -61
- package/README.md +4 -4
- package/dist/cdn/js/kendo-react-popup.js +1 -1
- package/models/PopupProps.d.ts +8 -0
- package/package-metadata.mjs +2 -2
- package/package.json +3 -3
package/Popup.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ae=require("react"),Ce=require("react-dom"),n=require("prop-types"),Ee=require("./animation.js"),u=require("@progress/kendo-react-common"),t=require("@progress/kendo-popup-common"),te=require("./util.js");function ie(r){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const P in r)if(P!=="default"){const h=Object.getOwnPropertyDescriptor(r,P);Object.defineProperty(c,P,h.get?h:{enumerable:!0,get:()=>r[P]})}}return c.default=r,Object.freeze(c)}const l=ie(Ae),De=ie(Ce),re=l.createContext(r=>r),xe=100,Re=1;function O(r,c){if(r===c)return!0;if(!!r!=!!c)return!1;const P=Object.getOwnPropertyNames(r),h=Object.getOwnPropertyNames(c);if(P.length!==h.length)return!1;for(let y=0;y<P.length;y++){const v=P[y];if(r[v]!==c[v])return!1}return!0}const Te={left:-1e3,top:0},K=l.forwardRef((r,c)=>{const h=l.useContext(re).call(void 0,r),{collision:y=g.collision,anchorAlign:v=g.anchorAlign,popupAlign:w=g.popupAlign,offset:x=g.offset,animate:R=g.animate,show:b=g.show,margin:Z=g.margin,positionMode:F=g.positionMode,appendTo:A,contentKey:T,anchor:d,scale:se,role:le,ariaLabelledBy:ce,ariaDescribedBy:ae,onKeyDown:ue,onPosition:B,onOpen:V,onMouseDownOutside:W,onClose:X,className:N,popupClass:z,id:pe,style:M,children:fe}=h,de=u.useUnstyled(),L=h.unstyled||de,D=L&&L.uPopup,[o,S]=l.useState({current:"hidden",previous:"hidden",props:{}}),j=R&&typeof R!="object"?oe:{...oe,...R},me=e=>{window==null||window.addEventListener("mousedown",J),I(e),G(e.firstChild,"enter",he),S({...i,current:"shown",previous:i.current})},I=e=>{const{width:s,height:m}=e.style;if(e.offsetWidth===0&&e.offsetHeight===0)return;e.style.width=e.offsetWidth+"px",e.style.height=e.offsetHeight+"px";const p=t.alignElement({anchor:d,anchorAlign:v,element:e,elementAlign:w,offset:x,margin:Z,positionMode:F,scale:se}),f=t.positionElement({anchor:d,anchorAlign:v,element:e,elementAlign:w,collisions:y,currentLocation:p,margin:Z});if(e.style.top=f.offset.top+"px",e.style.left=f.offset.left+"px",e.style.width=s,e.style.height=m,$.current={fit:f.fit,fitted:f.fitted,flip:f.flip,flipped:f.flipped},B){const k={target:E.current,flipped:f.flipped,fitted:f.fitted};B.call(void 0,k)}},he=()=>{const e=a.current;e&&(b&&e.classList.add(...u.classNames(u.uPopup.animationContainerShown({c:D})).split(" ").filter(s=>s)),ye(e),V&&V.call(void 0,{target:E.current}))},G=(e,s,m)=>{var f;if(!w)return;let p=j.direction;if(j.type==="slide"){const{horizontal:k,vertical:H}=w;typeof r.animate=="object"&&r.animate.direction?p=j.direction:k==="left"&&H==="center"?p="right":k==="right"&&H==="center"?p="left":H==="top"?p="down":p="up",(f=$.current)!=null&&f.flipped&&(p={down:"up",up:"down",left:"right",right:"left"}[p])}Ee.animations(e,Pe()[s],s,m,D,j.type,p)},J=e=>{var p;const s=((p=e==null?void 0:e.target)==null?void 0:p.closest(".k-animation-container"))===null,m=(d==null?void 0:d.contains(e==null?void 0:e.target))||!1;if(s){if(W){const f={target:E.current,event:e,state:o,isAnchorClicked:m};W.call(void 0,f)}window==null||window.removeEventListener("mousedown",J)}},ge=e=>{if(!b){const s=L&&L.uPopup;e.classList.remove(...u.classNames(u.uPopup.animationContainerShown({c:s})).split(" ").filter(m=>m))}q()},Q=()=>{i.current==="hiding"&&(i.previous==="shown"||i.previous==="reposition")&&S({...i,current:"hidden",previous:i.current}),X&&X.call(void 0,{target:E.current})},Pe=()=>{const e=R;let s=0,m=0;return e&&(e===!0?s=m=300:(s=e.openDuration||0,m=e.closeDuration||0)),{enter:s,exit:m}},ye=e=>{q(),C.current=t.domUtils.scrollableParents(d||e),C.current&&C.current.map(s=>s.addEventListener("scroll",_)),window.addEventListener("resize",_)},q=()=>{C.current&&(C.current.map(e=>e.removeEventListener("scroll",_)),C.current=void 0),window.removeEventListener("resize",_)},_=te.throttle(()=>{a.current&&i.current!=="hidden"&&i.current!=="hiding"&&S({...o,current:"reposition",previous:i.current})},te.FRAME_DURATION),ve=()=>Y?Y+Re:xe,Y=u.useZIndexContext()||0,$=l.useRef(void 0),C=l.useRef(void 0),a=l.useRef(null),E=l.useRef(null),ee=l.useRef({}),U=l.useRef(!1);l.useImperativeHandle(E,()=>({element:a.current,setPosition:I,props:r})),l.useImperativeHandle(c,()=>E.current);const i=l.useMemo(()=>{const e={...o,props:{show:b,anchor:d,anchorAlign:v,appendTo:A,collision:y,popupAlign:w,className:N,popupClass:z,style:M,offset:x,contentKey:T}};return b?o.current==="hidden"||o.current==="hiding"?{...e,current:"showing",previous:o.current}:o.current==="showing"?{...e,current:"shown",previous:o.current}:o.current==="shown"&&(!O(x,o.props.offset)||!O(v,o.props.anchorAlign)||!O(A,o.props.appendTo)||!O(y,o.props.collision)||!O(w,o.props.popupAlign)||!O(M,o.props.style)||d!==o.props.anchor||z!==o.props.popupClass||N!==o.props.className)?{...e,current:"reposition",previous:o.current}:e:o.current==="hiding"||o.current==="hidden"?{...e,current:"hidden",previous:o.current}:{...e,current:"hiding",previous:o.current}},[b,d,v,A,y,w,N,z,M,x,T,o]);l.useEffect(()=>{i.current==="hiding"&&!U.current&&a.current?(U.current=!0,ge(a.current),G(a.current.firstChild,"exit",Q)):(U.current=!1,i.current==="showing"&&a.current&&!a.current.classList.contains("k-animation-container-shown")?me(a.current):i.current==="hiding"&&a.current?Q():i.current==="reposition"&&i.previous==="shown"?setTimeout(()=>{S({...i,current:"shown",previous:i.current})},0):i.current==="shown"&&ee.current.contentKey!==T&&a.current&&I(a.current)),i.current==="reposition"&&(i.previous==="shown"||i.previous==="showing")&&a.current&&I(a.current),ee.current={contentKey:T}},[i]),l.useEffect(()=>()=>{q()},[]);const ne=A||(u.canUseDOM?d&&d.ownerDocument?d.ownerDocument.body:document.body:void 0),we=Object.assign({},{position:F,top:0,left:-1e4},M||{}),Oe=h.offset!==void 0&&!O(h.offset,g.offset)||h.margin!==void 0,be=i.current==="hiding";if((b||be)&&ne){const e=ve(),s=l.createElement(u.ZIndexContext.Provider,{value:e},l.createElement("div",{onKeyDown:ue,className:u.classNames(u.uPopup.animationContainer({c:D}),N),id:pe,ref:a,style:{zIndex:e,...we}},l.createElement("div",{className:u.classNames(u.uPopup.animationChild({c:D})),style:{transitionDelay:"0ms"}},l.createElement("div",{role:le,"aria-labelledby":ce,"aria-describedby":ae,className:u.classNames(u.uPopup.popup({c:D}),z),style:Oe?{margin:0}:void 0},fe))));return A!==null?De.createPortal(s,ne):s}return null}),g={collision:{horizontal:t.Collision.fit,vertical:t.Collision.flip},anchorAlign:{horizontal:t.AlignPoint.left,vertical:t.AlignPoint.bottom},popupAlign:{horizontal:t.AlignPoint.left,vertical:t.AlignPoint.top},offset:Te,animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},oe={type:"slide",direction:"down"};K.displayName="Popup";K.propTypes={anchor:function(r){const c=r.anchor;return c&&typeof c.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(r){const c=r.appendTo;return c&&typeof c.nodeType!="number"?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:n.oneOfType([n.string,n.arrayOf(n.string.isRequired)]),id:n.string,popupClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),collision:n.shape({horizontal:n.oneOf([t.Collision.fit,t.Collision.flip,t.Collision.none]),vertical:n.oneOf([t.Collision.fit,t.Collision.flip,t.Collision.none])}),anchorAlign:n.shape({horizontal:n.oneOf([t.AlignPoint.left,t.AlignPoint.center,t.AlignPoint.right]),vertical:n.oneOf([t.AlignPoint.top,t.AlignPoint.center,t.AlignPoint.bottom])}),popupAlign:n.shape({horizontal:n.oneOf([t.AlignPoint.left,t.AlignPoint.center,t.AlignPoint.right]),vertical:n.oneOf([t.AlignPoint.top,t.AlignPoint.center,t.AlignPoint.bottom])}),offset:n.shape({left:n.number,top:n.number}),children:n.oneOfType([n.element,n.node]),show:n.bool,animate:n.oneOfType([n.bool,n.shape({type:n.oneOf(["slide","zoom","push","expand","fade"]),openDuration:n.number,closeDuration:n.number})]),margin:n.shape({horizontal:n.number,vertical:n.number}),positionMode:n.oneOf(["fixed","absolute"]),scale:n.number,style:n.object,onClose:n.func,onPosition:n.func,onOpen:n.func,onKeyDown:n.func,onMouseDownOutside:n.func};exports.Popup=K;exports.PopupPropsContext=re;exports.popupDefaultProps=g;
|
package/Popup.mjs
CHANGED
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as i from "react";
|
|
9
|
-
import * as
|
|
9
|
+
import * as be from "react-dom";
|
|
10
10
|
import t from "prop-types";
|
|
11
|
-
import { animations as
|
|
12
|
-
import { useUnstyled as
|
|
13
|
-
import { Collision as w, AlignPoint as s, alignElement as
|
|
14
|
-
import { throttle as
|
|
15
|
-
const
|
|
11
|
+
import { animations as Ee } from "./animation.mjs";
|
|
12
|
+
import { useUnstyled as Ce, useZIndexContext as xe, canUseDOM as Ae, ZIndexContext as De, classNames as A, uPopup as D } from "@progress/kendo-react-common";
|
|
13
|
+
import { Collision as w, AlignPoint as s, alignElement as Te, positionElement as Re, domUtils as ze } from "@progress/kendo-popup-common";
|
|
14
|
+
import { throttle as Ne, FRAME_DURATION as Le } from "./util.mjs";
|
|
15
|
+
const Ie = i.createContext((c) => c), Me = 100, Se = 1;
|
|
16
16
|
function P(c, p) {
|
|
17
17
|
if (c === p)
|
|
18
18
|
return !0;
|
|
@@ -28,11 +28,11 @@ function P(c, p) {
|
|
|
28
28
|
}
|
|
29
29
|
return !0;
|
|
30
30
|
}
|
|
31
|
-
const
|
|
31
|
+
const Ue = {
|
|
32
32
|
left: -1e3,
|
|
33
33
|
top: 0
|
|
34
34
|
}, re = i.forwardRef((c, p) => {
|
|
35
|
-
const v = i.useContext(
|
|
35
|
+
const v = i.useContext(Ie).call(void 0, c), {
|
|
36
36
|
collision: h = m.collision,
|
|
37
37
|
anchorAlign: g = m.anchorAlign,
|
|
38
38
|
popupAlign: y = m.popupAlign,
|
|
@@ -40,43 +40,45 @@ const Me = {
|
|
|
40
40
|
animate: z = m.animate,
|
|
41
41
|
show: O = m.show,
|
|
42
42
|
margin: q = m.margin,
|
|
43
|
-
positionMode:
|
|
44
|
-
appendTo:
|
|
43
|
+
positionMode: B = m.positionMode,
|
|
44
|
+
appendTo: b,
|
|
45
45
|
contentKey: N,
|
|
46
46
|
anchor: f,
|
|
47
47
|
scale: ie,
|
|
48
48
|
role: se,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
ariaLabelledBy: ce,
|
|
50
|
+
ariaDescribedBy: le,
|
|
51
|
+
onKeyDown: ae,
|
|
52
|
+
onPosition: V,
|
|
53
|
+
onOpen: W,
|
|
54
|
+
onMouseDownOutside: X,
|
|
53
55
|
onClose: G,
|
|
54
|
-
className:
|
|
55
|
-
popupClass:
|
|
56
|
-
id:
|
|
56
|
+
className: L,
|
|
57
|
+
popupClass: I,
|
|
58
|
+
id: ue,
|
|
57
59
|
style: M,
|
|
58
|
-
children:
|
|
59
|
-
} = v,
|
|
60
|
+
children: pe
|
|
61
|
+
} = v, fe = Ce(), S = v.unstyled || fe, x = S && S.uPopup, [n, U] = i.useState({
|
|
60
62
|
current: "hidden",
|
|
61
63
|
previous: "hidden",
|
|
62
64
|
props: {}
|
|
63
|
-
}), j = z && typeof z != "object" ? oe : { ...oe, ...z },
|
|
64
|
-
window == null || window.addEventListener("mousedown", Q), k(e), J(e.firstChild, "enter",
|
|
65
|
+
}), j = z && typeof z != "object" ? oe : { ...oe, ...z }, de = (e) => {
|
|
66
|
+
window == null || window.addEventListener("mousedown", Q), k(e), J(e.firstChild, "enter", me), U({ ...o, current: "shown", previous: o.current });
|
|
65
67
|
}, k = (e) => {
|
|
66
68
|
const { width: r, height: d } = e.style;
|
|
67
69
|
if (e.offsetWidth === 0 && e.offsetHeight === 0)
|
|
68
70
|
return;
|
|
69
71
|
e.style.width = e.offsetWidth + "px", e.style.height = e.offsetHeight + "px";
|
|
70
|
-
const a =
|
|
72
|
+
const a = Te({
|
|
71
73
|
anchor: f,
|
|
72
74
|
anchorAlign: g,
|
|
73
75
|
element: e,
|
|
74
76
|
elementAlign: y,
|
|
75
77
|
offset: R,
|
|
76
78
|
margin: q,
|
|
77
|
-
positionMode:
|
|
79
|
+
positionMode: B,
|
|
78
80
|
scale: ie
|
|
79
|
-
}), u =
|
|
81
|
+
}), u = Re({
|
|
80
82
|
anchor: f,
|
|
81
83
|
anchorAlign: g,
|
|
82
84
|
element: e,
|
|
@@ -90,19 +92,19 @@ const Me = {
|
|
|
90
92
|
fitted: u.fitted,
|
|
91
93
|
flip: u.flip,
|
|
92
94
|
flipped: u.flipped
|
|
93
|
-
},
|
|
95
|
+
}, V) {
|
|
94
96
|
const K = {
|
|
95
97
|
target: C.current,
|
|
96
98
|
flipped: u.flipped,
|
|
97
99
|
fitted: u.fitted
|
|
98
100
|
};
|
|
99
|
-
|
|
101
|
+
V.call(void 0, K);
|
|
100
102
|
}
|
|
101
|
-
},
|
|
103
|
+
}, me = () => {
|
|
102
104
|
const e = l.current;
|
|
103
105
|
e && (O && e.classList.add(
|
|
104
106
|
...A(D.animationContainerShown({ c: x })).split(" ").filter((r) => r)
|
|
105
|
-
),
|
|
107
|
+
), we(e), W && W.call(void 0, { target: C.current }));
|
|
106
108
|
}, J = (e, r, d) => {
|
|
107
109
|
var u;
|
|
108
110
|
if (!y)
|
|
@@ -117,9 +119,9 @@ const Me = {
|
|
|
117
119
|
right: "left"
|
|
118
120
|
}[a]);
|
|
119
121
|
}
|
|
120
|
-
|
|
122
|
+
Ee(
|
|
121
123
|
e,
|
|
122
|
-
|
|
124
|
+
ge()[r],
|
|
123
125
|
r,
|
|
124
126
|
d,
|
|
125
127
|
x,
|
|
@@ -130,18 +132,18 @@ const Me = {
|
|
|
130
132
|
var a;
|
|
131
133
|
const r = ((a = e == null ? void 0 : e.target) == null ? void 0 : a.closest(".k-animation-container")) === null, d = (f == null ? void 0 : f.contains(e == null ? void 0 : e.target)) || !1;
|
|
132
134
|
if (r) {
|
|
133
|
-
if (
|
|
135
|
+
if (X) {
|
|
134
136
|
const u = {
|
|
135
137
|
target: C.current,
|
|
136
138
|
event: e,
|
|
137
139
|
state: n,
|
|
138
140
|
isAnchorClicked: d
|
|
139
141
|
};
|
|
140
|
-
|
|
142
|
+
X.call(void 0, u);
|
|
141
143
|
}
|
|
142
144
|
window == null || window.removeEventListener("mousedown", Q);
|
|
143
145
|
}
|
|
144
|
-
},
|
|
146
|
+
}, he = (e) => {
|
|
145
147
|
if (!O) {
|
|
146
148
|
const r = S && S.uPopup;
|
|
147
149
|
e.classList.remove(
|
|
@@ -151,17 +153,17 @@ const Me = {
|
|
|
151
153
|
Z();
|
|
152
154
|
}, Y = () => {
|
|
153
155
|
o.current === "hiding" && (o.previous === "shown" || o.previous === "reposition") && U({ ...o, current: "hidden", previous: o.current }), G && G.call(void 0, { target: C.current });
|
|
154
|
-
},
|
|
156
|
+
}, ge = () => {
|
|
155
157
|
const e = z;
|
|
156
158
|
let r = 0, d = 0;
|
|
157
159
|
return e && (e === !0 ? r = d = 300 : (r = e.openDuration || 0, d = e.closeDuration || 0)), { enter: r, exit: d };
|
|
158
|
-
},
|
|
159
|
-
Z(),
|
|
160
|
+
}, we = (e) => {
|
|
161
|
+
Z(), E.current = ze.scrollableParents(f || e), E.current && E.current.map((r) => r.addEventListener("scroll", H)), window.addEventListener("resize", H);
|
|
160
162
|
}, Z = () => {
|
|
161
|
-
|
|
162
|
-
}, H =
|
|
163
|
+
E.current && (E.current.map((e) => e.removeEventListener("scroll", H)), E.current = void 0), window.removeEventListener("resize", H);
|
|
164
|
+
}, H = Ne(() => {
|
|
163
165
|
l.current && o.current !== "hidden" && o.current !== "hiding" && U({ ...n, current: "reposition", previous: o.current });
|
|
164
|
-
},
|
|
166
|
+
}, Le), ve = () => $ ? $ + Se : Me, $ = xe() || 0, ee = i.useRef(void 0), E = i.useRef(void 0), l = i.useRef(null), C = i.useRef(null), te = i.useRef({}), _ = i.useRef(!1);
|
|
165
167
|
i.useImperativeHandle(C, () => ({
|
|
166
168
|
element: l.current,
|
|
167
169
|
setPosition: k,
|
|
@@ -174,54 +176,54 @@ const Me = {
|
|
|
174
176
|
show: O,
|
|
175
177
|
anchor: f,
|
|
176
178
|
anchorAlign: g,
|
|
177
|
-
appendTo:
|
|
179
|
+
appendTo: b,
|
|
178
180
|
collision: h,
|
|
179
181
|
popupAlign: y,
|
|
180
|
-
className:
|
|
181
|
-
popupClass:
|
|
182
|
+
className: L,
|
|
183
|
+
popupClass: I,
|
|
182
184
|
style: M,
|
|
183
185
|
offset: R,
|
|
184
186
|
contentKey: N
|
|
185
187
|
}
|
|
186
188
|
};
|
|
187
|
-
return O ? n.current === "hidden" || n.current === "hiding" ? { ...e, current: "showing", previous: n.current } : n.current === "showing" ? { ...e, current: "shown", previous: n.current } : n.current === "shown" && (!P(R, n.props.offset) || !P(g, n.props.anchorAlign) || !P(
|
|
189
|
+
return O ? n.current === "hidden" || n.current === "hiding" ? { ...e, current: "showing", previous: n.current } : n.current === "showing" ? { ...e, current: "shown", previous: n.current } : n.current === "shown" && (!P(R, n.props.offset) || !P(g, n.props.anchorAlign) || !P(b, n.props.appendTo) || !P(h, n.props.collision) || !P(y, n.props.popupAlign) || !P(M, n.props.style) || f !== n.props.anchor || I !== n.props.popupClass || L !== n.props.className) ? { ...e, current: "reposition", previous: n.current } : e : n.current === "hiding" || n.current === "hidden" ? { ...e, current: "hidden", previous: n.current } : { ...e, current: "hiding", previous: n.current };
|
|
188
190
|
}, [
|
|
189
191
|
O,
|
|
190
192
|
f,
|
|
191
193
|
g,
|
|
192
|
-
|
|
194
|
+
b,
|
|
193
195
|
h,
|
|
194
196
|
y,
|
|
195
|
-
I,
|
|
196
197
|
L,
|
|
198
|
+
I,
|
|
197
199
|
M,
|
|
198
200
|
R,
|
|
199
201
|
N,
|
|
200
202
|
n
|
|
201
203
|
]);
|
|
202
204
|
i.useEffect(() => {
|
|
203
|
-
o.current === "hiding" && !_.current && l.current ? (_.current = !0,
|
|
205
|
+
o.current === "hiding" && !_.current && l.current ? (_.current = !0, he(l.current), J(l.current.firstChild, "exit", Y)) : (_.current = !1, o.current === "showing" && l.current && !l.current.classList.contains("k-animation-container-shown") ? de(l.current) : o.current === "hiding" && l.current ? Y() : o.current === "reposition" && o.previous === "shown" ? setTimeout(() => {
|
|
204
206
|
U({ ...o, current: "shown", previous: o.current });
|
|
205
207
|
}, 0) : o.current === "shown" && te.current.contentKey !== N && l.current && k(l.current)), o.current === "reposition" && (o.previous === "shown" || o.previous === "showing") && l.current && k(l.current), te.current = { contentKey: N };
|
|
206
208
|
}, [o]), i.useEffect(() => () => {
|
|
207
209
|
Z();
|
|
208
210
|
}, []);
|
|
209
|
-
const ne =
|
|
211
|
+
const ne = b || (Ae ? f && f.ownerDocument ? f.ownerDocument.body : document.body : void 0), ye = Object.assign(
|
|
210
212
|
{},
|
|
211
|
-
{ position:
|
|
213
|
+
{ position: B, top: 0, left: -1e4 },
|
|
212
214
|
M || {}
|
|
213
|
-
),
|
|
214
|
-
if ((O ||
|
|
215
|
-
const e =
|
|
215
|
+
), Pe = v.offset !== void 0 && !P(v.offset, m.offset) || v.margin !== void 0, Oe = o.current === "hiding";
|
|
216
|
+
if ((O || Oe) && ne) {
|
|
217
|
+
const e = ve(), r = /* @__PURE__ */ i.createElement(De.Provider, { value: e }, /* @__PURE__ */ i.createElement(
|
|
216
218
|
"div",
|
|
217
219
|
{
|
|
218
|
-
onKeyDown:
|
|
219
|
-
className: A(D.animationContainer({ c: x }),
|
|
220
|
-
id:
|
|
220
|
+
onKeyDown: ae,
|
|
221
|
+
className: A(D.animationContainer({ c: x }), L),
|
|
222
|
+
id: ue,
|
|
221
223
|
ref: l,
|
|
222
224
|
style: {
|
|
223
225
|
zIndex: e,
|
|
224
|
-
...
|
|
226
|
+
...ye
|
|
225
227
|
}
|
|
226
228
|
},
|
|
227
229
|
/* @__PURE__ */ i.createElement(
|
|
@@ -234,14 +236,16 @@ const Me = {
|
|
|
234
236
|
"div",
|
|
235
237
|
{
|
|
236
238
|
role: se,
|
|
237
|
-
|
|
238
|
-
|
|
239
|
+
"aria-labelledby": ce,
|
|
240
|
+
"aria-describedby": le,
|
|
241
|
+
className: A(D.popup({ c: x }), I),
|
|
242
|
+
style: Pe ? { margin: 0 } : void 0
|
|
239
243
|
},
|
|
240
|
-
|
|
244
|
+
pe
|
|
241
245
|
)
|
|
242
246
|
)
|
|
243
247
|
));
|
|
244
|
-
return
|
|
248
|
+
return b !== null ? be.createPortal(r, ne) : r;
|
|
245
249
|
}
|
|
246
250
|
return null;
|
|
247
251
|
}), m = {
|
|
@@ -257,7 +261,7 @@ const Me = {
|
|
|
257
261
|
horizontal: s.left,
|
|
258
262
|
vertical: s.top
|
|
259
263
|
},
|
|
260
|
-
offset:
|
|
264
|
+
offset: Ue,
|
|
261
265
|
animate: !0,
|
|
262
266
|
show: !1,
|
|
263
267
|
margin: {
|
|
@@ -323,6 +327,6 @@ re.propTypes = {
|
|
|
323
327
|
};
|
|
324
328
|
export {
|
|
325
329
|
re as Popup,
|
|
326
|
-
|
|
330
|
+
Ie as PopupPropsContext,
|
|
327
331
|
m as popupDefaultProps
|
|
328
332
|
};
|
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
[](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-popup&utm_content=banner)
|
|
1
|
+
[](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-popup&utm_content=banner)
|
|
2
2
|
|
|
3
3
|
# KendoReact Popup Component for React
|
|
4
4
|
|
|
5
5
|
> **Important**
|
|
6
6
|
>
|
|
7
7
|
> - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-popup)—an enterprise-grade UI library with 120+ free and premium components.
|
|
8
|
-
> - This is a free React Popup component. You can use it even in production, no sign-up or license required. If you're looking for more free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
8
|
+
> - This is a free React Popup component. You can use it even in production, no sign-up or license required. If you're looking for more free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started).
|
|
9
9
|
> - Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-popup).
|
|
10
10
|
> - The [30-day free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-popup) gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team!
|
|
11
11
|
|
|
@@ -52,7 +52,7 @@ Check out the [KendoReact Popup API](https://www.telerik.com/kendo-react-ui/comp
|
|
|
52
52
|
|
|
53
53
|
The following table outlines the key resources available with KendoReact and KendoReact Free.
|
|
54
54
|
|
|
55
|
-
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
|
|
55
|
+
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
|
|
56
56
|
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
57
57
|
| React components | 50+ | 120+ |
|
|
58
58
|
| Four professional themes | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
|
|
@@ -75,7 +75,7 @@ For any issues you might encounter while working with the KendoReact Popup, use
|
|
|
75
75
|
## Resources
|
|
76
76
|
|
|
77
77
|
- [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-popup)
|
|
78
|
-
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
78
|
+
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started)
|
|
79
79
|
- [Get Started with the KendoReact Popup](https://www.telerik.com/kendo-react-ui/components/popup/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-popup)
|
|
80
80
|
- [API Reference of the KendoReact Popup](https://www.telerik.com/kendo-react-ui/components/popup/api/PopupProps/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-popup)
|
|
81
81
|
- [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-popup)
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-popup-common")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-common","@progress/kendo-popup-common"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactPopup={},e.React,e.ReactDOM,e.PropTypes,e.KendoReactCommon,e.KendoPopupCommon)}(this,function(e,n,t,o,r,i){"use strict";function s(e){var n=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,Object.freeze(n)}var l=s(n),c=s(t);const
|
|
15
|
+
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-popup-common")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-common","@progress/kendo-popup-common"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactPopup={},e.React,e.ReactDOM,e.PropTypes,e.KendoReactCommon,e.KendoPopupCommon)}(this,function(e,n,t,o,r,i){"use strict";function s(e){var n=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,Object.freeze(n)}var l=s(n),c=s(t);const a=(e,n,t)=>{e.style.transitionDuration="",n&&e.classList.remove(...n.split(" ")),t&&e.classList.remove(...t.split(" "))},p="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),u=(e,n,t,o,i,s,l)=>{if(0===n)return o();const c=`${s}Active`,u=r.classNames(r.uPopup[s]({direction:l,type:t,c:i})),d=r.classNames(r.uPopup[c]({direction:l,type:t,c:i})),f=n=>{n.target===e&&(e.removeEventListener("transitionend",f),a(e,u,d),e.style.display="exit"===t?"none":"",o())};e.addEventListener("transitionend",f);const m=e.ownerDocument;if(!m)return;const h=m.defaultView;if(!h)return;const g=()=>{a(e,u,d),"enter"===t&&(e.style.display=""),u&&e.classList.add(...u.split(" ").filter(e=>e)),h.requestAnimationFrame(()=>{e.style.transitionDuration=n+"ms",e.classList.add(...d.split(" ").filter(e=>e))})};p?h.requestAnimationFrame(g):g()},d=l.createContext(e=>e);function f(e,n){if(e===n)return!0;if(!!e!=!!n)return!1;const t=Object.getOwnPropertyNames(e),o=Object.getOwnPropertyNames(n);if(t.length!==o.length)return!1;for(let o=0;o<t.length;o++){const r=t[o];if(e[r]!==n[r])return!1}return!0}const m=l.forwardRef((e,n)=>{const t=l.useContext(d).call(void 0,e),{collision:o=h.collision,anchorAlign:s=h.anchorAlign,popupAlign:a=h.popupAlign,offset:p=h.offset,animate:m=h.animate,show:v=h.show,margin:y=h.margin,positionMode:w=h.positionMode,appendTo:P,contentKey:b,anchor:A,scale:O,role:C,ariaLabelledBy:x,ariaDescribedBy:D,onKeyDown:T,onPosition:E,onOpen:L,onMouseDownOutside:N,onClose:z,className:R,popupClass:j,id:K,style:M,children:k}=t,q=r.useUnstyled(),I=t.unstyled||q,H=I&&I.uPopup,[F,S]=l.useState({current:"hidden",previous:"hidden",props:{}}),U=m&&"object"!=typeof m?g:{...g,...m},V=e=>{const{width:n,height:t}=e.style;if(0===e.offsetWidth&&0===e.offsetHeight)return;e.style.width=e.offsetWidth+"px",e.style.height=e.offsetHeight+"px";const r=i.alignElement({anchor:A,anchorAlign:s,element:e,elementAlign:a,offset:p,margin:y,positionMode:w,scale:O}),l=i.positionElement({anchor:A,anchorAlign:s,element:e,elementAlign:a,collisions:o,currentLocation:r,margin:y});if(e.style.top=l.offset.top+"px",e.style.left=l.offset.left+"px",e.style.width=n,e.style.height=t,_.current={fit:l.fit,fitted:l.fitted,flip:l.flip,flipped:l.flipped},E){const e={target:te.current,flipped:l.flipped,fitted:l.fitted};E.call(void 0,e)}},B=()=>{const e=ne.current;e&&(v&&e.classList.add(...r.classNames(r.uPopup.animationContainerShown({c:H})).split(" ").filter(e=>e)),J(e),L&&L.call(void 0,{target:te.current}))},W=(n,t,o)=>{var r;if(!a)return;let i=U.direction;if("slide"===U.type){const{horizontal:n,vertical:t}=a;i="object"==typeof e.animate&&e.animate.direction?U.direction:"left"===n&&"center"===t?"right":"right"===n&&"center"===t?"left":"top"===t?"down":"up",null!=(r=_.current)&&r.flipped&&(i={down:"up",up:"down",left:"right",right:"left"}[i])}u(n,G()[t],t,o,H,U.type,i)},Z=e=>{var n;const t=null===(null==(n=null==e?void 0:e.target)?void 0:n.closest(".k-animation-container")),o=(null==A?void 0:A.contains(null==e?void 0:e.target))||!1;if(t){if(N){const n={target:te.current,event:e,state:F,isAnchorClicked:o};N.call(void 0,n)}null==window||window.removeEventListener("mousedown",Z)}},$=()=>{"hiding"===ie.current&&("shown"===ie.previous||"reposition"===ie.previous)&&S({...ie,current:"hidden",previous:ie.current}),z&&z.call(void 0,{target:te.current})},G=()=>{const e=m;let n=0,t=0;return e&&(!0===e?n=t=300:(n=e.openDuration||0,t=e.closeDuration||0)),{enter:n,exit:t}},J=e=>{Q(),ee.current=i.domUtils.scrollableParents(A||e),ee.current&&ee.current.map(e=>e.addEventListener("scroll",X)),window.addEventListener("resize",X)},Q=()=>{ee.current&&(ee.current.map(e=>e.removeEventListener("scroll",X)),ee.current=void 0),window.removeEventListener("resize",X)},X=function(e,n,t={}){let o,r,i,s,l=0;t=t||{};const c=function(){l=!1===t.leading?0:(new Date).getTime(),o=void 0,s=e.apply(r,i),o||(r=i=null)};return function(){const a=(new Date).getTime();!l&&!1===t.leading&&(l=a);const p=n-(a-l);return r=void 0,i=arguments,p<=0||p>n?(o&&(clearTimeout(o),o=void 0),l=a,s=e.apply(r,i),o||(r=i=null)):!o&&!1!==t.trailing&&(o=window.setTimeout(c,p)),s}}(()=>{ne.current&&"hidden"!==ie.current&&"hiding"!==ie.current&&S({...F,current:"reposition",previous:ie.current})},16.666666666666668),Y=r.useZIndexContext()||0,_=l.useRef(void 0),ee=l.useRef(void 0),ne=l.useRef(null),te=l.useRef(null),oe=l.useRef({}),re=l.useRef(!1);l.useImperativeHandle(te,()=>({element:ne.current,setPosition:V,props:e})),l.useImperativeHandle(n,()=>te.current);const ie=l.useMemo(()=>{const e={...F,props:{show:v,anchor:A,anchorAlign:s,appendTo:P,collision:o,popupAlign:a,className:R,popupClass:j,style:M,offset:p,contentKey:b}};return v?"hidden"===F.current||"hiding"===F.current?{...e,current:"showing",previous:F.current}:"showing"===F.current?{...e,current:"shown",previous:F.current}:"shown"!==F.current||f(p,F.props.offset)&&f(s,F.props.anchorAlign)&&f(P,F.props.appendTo)&&f(o,F.props.collision)&&f(a,F.props.popupAlign)&&f(M,F.props.style)&&A===F.props.anchor&&j===F.props.popupClass&&R===F.props.className?e:{...e,current:"reposition",previous:F.current}:"hiding"===F.current||"hidden"===F.current?{...e,current:"hidden",previous:F.current}:{...e,current:"hiding",previous:F.current}},[v,A,s,P,o,a,R,j,M,p,b,F]);l.useEffect(()=>{var e;"hiding"===ie.current&&!re.current&&ne.current?(re.current=!0,(e=>{if(!v){const n=I&&I.uPopup;e.classList.remove(...r.classNames(r.uPopup.animationContainerShown({c:n})).split(" ").filter(e=>e))}Q()})(ne.current),W(ne.current.firstChild,"exit",$)):(re.current=!1,"showing"===ie.current&&ne.current&&!ne.current.classList.contains("k-animation-container-shown")?(e=ne.current,null==window||window.addEventListener("mousedown",Z),V(e),W(e.firstChild,"enter",B),S({...ie,current:"shown",previous:ie.current})):"hiding"===ie.current&&ne.current?$():"reposition"===ie.current&&"shown"===ie.previous?setTimeout(()=>{S({...ie,current:"shown",previous:ie.current})},0):"shown"===ie.current&&oe.current.contentKey!==b&&ne.current&&V(ne.current)),"reposition"===ie.current&&("shown"===ie.previous||"showing"===ie.previous)&&ne.current&&V(ne.current),oe.current={contentKey:b}},[ie]),l.useEffect(()=>()=>{Q()},[]);const se=P||(r.canUseDOM?A&&A.ownerDocument?A.ownerDocument.body:document.body:void 0),le=Object.assign({},{position:w,top:0,left:-1e4},M||{}),ce=void 0!==t.offset&&!f(t.offset,h.offset)||void 0!==t.margin,ae="hiding"===ie.current;if((v||ae)&&se){const e=Y?Y+1:100,n=l.createElement(r.ZIndexContext.Provider,{value:e},l.createElement("div",{onKeyDown:T,className:r.classNames(r.uPopup.animationContainer({c:H}),R),id:K,ref:ne,style:{zIndex:e,...le}},l.createElement("div",{className:r.classNames(r.uPopup.animationChild({c:H})),style:{transitionDelay:"0ms"}},l.createElement("div",{role:C,"aria-labelledby":x,"aria-describedby":D,className:r.classNames(r.uPopup.popup({c:H}),j),style:ce?{margin:0}:void 0},k))));return null!==P?c.createPortal(n,se):n}return null}),h={collision:{horizontal:i.Collision.fit,vertical:i.Collision.flip},anchorAlign:{horizontal:i.AlignPoint.left,vertical:i.AlignPoint.bottom},popupAlign:{horizontal:i.AlignPoint.left,vertical:i.AlignPoint.top},offset:{left:-1e3,top:0},animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},g={type:"slide",direction:"down"};m.displayName="Popup",m.propTypes={anchor:function(e){const n=e.anchor;return n&&"number"!=typeof n.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(e){const n=e.appendTo;return n&&"number"!=typeof n.nodeType?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:o.oneOfType([o.string,o.arrayOf(o.string.isRequired)]),id:o.string,popupClass:o.oneOfType([o.string,o.arrayOf(o.string),o.object]),collision:o.shape({horizontal:o.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none]),vertical:o.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none])}),anchorAlign:o.shape({horizontal:o.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:o.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),popupAlign:o.shape({horizontal:o.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:o.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),offset:o.shape({left:o.number,top:o.number}),children:o.oneOfType([o.element,o.node]),show:o.bool,animate:o.oneOfType([o.bool,o.shape({type:o.oneOf(["slide","zoom","push","expand","fade"]),openDuration:o.number,closeDuration:o.number})]),margin:o.shape({horizontal:o.number,vertical:o.number}),positionMode:o.oneOf(["fixed","absolute"]),scale:o.number,style:o.object,onClose:o.func,onPosition:o.func,onOpen:o.func,onKeyDown:o.func,onMouseDownOutside:o.func},e.Popup=m,e.PopupPropsContext=d});
|
package/models/PopupProps.d.ts
CHANGED
package/package-metadata.mjs
CHANGED
|
@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
|
|
|
7
7
|
productName: 'KendoReact',
|
|
8
8
|
productCode: 'KENDOUIREACT',
|
|
9
9
|
productCodes: ['KENDOUIREACT'],
|
|
10
|
-
publishDate:
|
|
11
|
-
version: '
|
|
10
|
+
publishDate: 1779199383,
|
|
11
|
+
version: '15.0.0-develop.1',
|
|
12
12
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
|
|
13
13
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-popup",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.0-develop.1",
|
|
4
4
|
"description": "React Popup positions a piece of content next to a specific anchor component. KendoReact Popup package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.7.2",
|
|
29
29
|
"@progress/kendo-popup-common": "^1.9.5",
|
|
30
|
-
"@progress/kendo-react-common": "
|
|
30
|
+
"@progress/kendo-react-common": "15.0.0-develop.1",
|
|
31
31
|
"react": "^18.0.0 || ^19.0.0",
|
|
32
32
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
33
33
|
},
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"package": {
|
|
55
55
|
"productName": "KendoReact",
|
|
56
56
|
"productCode": "KENDOUIREACT",
|
|
57
|
-
"publishDate":
|
|
57
|
+
"publishDate": 1779199383,
|
|
58
58
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
59
59
|
}
|
|
60
60
|
},
|