@progress/kendo-react-popup 10.2.0-develop.11 → 10.2.0-develop.13
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 +71 -69
- package/dist/cdn/js/kendo-react-popup.js +1 -1
- package/package.json +2 -2
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 we=require("react"),ve=require("react-dom"),n=require("prop-types"),ye=require("./animation.js"),a=require("@progress/kendo-react-common"),t=require("@progress/kendo-popup-common"),ee=require("./util.js");function ne(i){const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const we=require("react"),ve=require("react-dom"),n=require("prop-types"),ye=require("./animation.js"),a=require("@progress/kendo-react-common"),t=require("@progress/kendo-popup-common"),ee=require("./util.js");function ne(i){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const h in i)if(h!=="default"){const v=Object.getOwnPropertyDescriptor(i,h);Object.defineProperty(u,h,v.get?v:{enumerable:!0,get:()=>i[h]})}}return u.default=i,Object.freeze(u)}const l=ne(we),Oe=ne(ve),te=l.createContext(i=>i),Ae=100,be=1;function E(i,u){if(i===u)return!0;if(!!i!=!!u)return!1;const h=Object.getOwnPropertyNames(i),v=Object.getOwnPropertyNames(u);if(h.length!==v.length)return!1;for(let P=0;P<h.length;P++){const w=h[P];if(i[w]!==u[w])return!1}return!0}const Ce={left:-1e3,top:0},U=l.forwardRef((i,u)=>{const v=l.useContext(te).call(void 0,i),{collision:P=g.collision,anchorAlign:w=g.anchorAlign,popupAlign:y=g.popupAlign,offset:R=g.offset,animate:oe=g.animate,show:O=g.show,margin:H=g.margin,positionMode:K=g.positionMode,appendTo:A,contentKey:T,anchor:d,scale:re,role:ie,onKeyDown:se,onPosition:Z,onOpen:F,onMouseDownOutside:V,onClose:W,className:N,popupClass:z,id:le,style:M,children:ce}=v,ue=a.useUnstyled(),S=v.unstyled||ue,D=S&&S.uPopup,[o,I]=l.useState({current:"hidden",previous:"hidden",props:{}}),X=e=>{window==null||window.addEventListener("mousedown",G),L(e),B(e.firstChild,"enter",ae),I({...r,current:"shown",previous:r.current})},L=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:w,element:e,elementAlign:y,offset:R,margin:H,positionMode:K,scale:re}),f=t.positionElement({anchor:d,anchorAlign:w,element:e,elementAlign:y,collisions:P,currentLocation:p,margin:H});if(e.style.top=f.offset.top+"px",e.style.left=f.offset.left+"px",e.style.width=s,e.style.height=m,k.current={fit:f.fit,fitted:f.fitted,flip:f.flip,flipped:f.flipped},Z){const x={target:C.current,flipped:f.flipped,fitted:f.fitted};Z.call(void 0,x)}},ae=()=>{const e=c.current;e&&(O&&e.classList.add(...a.classNames(a.uPopup.animationContainerShown({c:D})).split(" ").filter(s=>s)),de(e),F&&F.call(void 0,{target:C.current}))},B=(e,s,m)=>{if(!y)return;let p;const{horizontal:f,vertical:x}=y;typeof i.animate=="object"&&i.animate.direction?p=i.animate.direction:f==="left"&&x==="center"?p="right":f==="right"&&x==="center"?p="left":x==="top"?p="down":p="up";const Pe={down:"up",up:"down",left:"right",right:"left"};k.current&&k.current.flipped&&(p=Pe[p]),ye.slide(e,p,fe()[s],s,m,D)},G=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(V){const f={target:C.current,event:e,state:o,isAnchorClicked:m};V.call(void 0,f)}window==null||window.removeEventListener("mousedown",G)}},pe=e=>{if(!O){const s=S&&S.uPopup;e.classList.remove(...a.classNames(a.uPopup.animationContainerShown({c:s})).split(" ").filter(m=>m))}_()},J=()=>{r.current==="hiding"&&(r.previous==="shown"||r.previous==="reposition")&&I({...r,current:"hidden",previous:r.current}),W&&W.call(void 0,{target:C.current})},fe=()=>{const e=oe;let s=0,m=0;return e&&(e===!0?s=m=300:(s=e.openDuration||0,m=e.closeDuration||0)),{enter:s,exit:m}},de=e=>{_(),b.current=t.domUtils.scrollableParents(d||e),b.current&&b.current.map(s=>s.addEventListener("scroll",j)),window.addEventListener("resize",j)},_=()=>{b.current&&(b.current.map(e=>e.removeEventListener("scroll",j)),b.current=void 0),window.removeEventListener("resize",j)},j=ee.throttle(()=>{c.current&&r.current!=="hidden"&&r.current!=="hiding"&&I({...o,current:"reposition",previous:r.current})},ee.FRAME_DURATION),me=()=>Q?Q+be:Ae,Q=a.useZIndexContext()||0,k=l.useRef(void 0),b=l.useRef(void 0),c=l.useRef(null),C=l.useRef(null),Y=l.useRef({}),q=l.useRef(!1);l.useImperativeHandle(C,()=>({element:c.current,setPosition:L,props:i})),l.useImperativeHandle(u,()=>C.current);const r=l.useMemo(()=>{const e={...o,props:{show:O,anchor:d,anchorAlign:w,appendTo:A,collision:P,popupAlign:y,className:N,popupClass:z,style:M,offset:R,contentKey:T}};return O?o.current==="hidden"||o.current==="hiding"?{...e,current:"showing",previous:o.current}:o.current==="showing"?{...e,current:"shown",previous:o.current}:o.current==="shown"&&(!E(R,o.props.offset)||!E(w,o.props.anchorAlign)||!E(A,o.props.appendTo)||!E(P,o.props.collision)||!E(y,o.props.popupAlign)||!E(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}},[O,d,w,A,P,y,N,z,M,R,T,o]);l.useEffect(()=>{r.current==="hiding"&&!q.current&&c.current?(q.current=!0,pe(c.current),B(c.current.firstChild,"exit",J)):(q.current=!1,r.current==="showing"&&c.current&&!c.current.classList.contains("k-animation-container-shown")?X(c.current):r.current==="hiding"&&c.current?J():r.current==="reposition"&&r.previous==="shown"?setTimeout(()=>{I({...r,current:"shown",previous:r.current})},0):r.current==="shown"&&Y.current.contentKey!==T&&c.current&&L(c.current)),r.current==="reposition"&&(r.previous==="shown"||r.previous==="showing")&&c.current&&L(c.current),Y.current={contentKey:T}},[r]),l.useEffect(()=>(r.current==="showing"&&c.current&&X(c.current),()=>{_()}),[]);const $=A||(a.canUseDOM?d&&d.ownerDocument?d.ownerDocument.body:document.body:void 0),he=Object.assign({},{position:K,top:0,left:-1e4},M||{}),ge=r.current==="hiding";if((O||ge)&&$){const e=me(),s=l.createElement(a.ZIndexContext.Provider,{value:e},l.createElement("div",{onKeyDown:se,className:a.classNames(a.uPopup.animationContainer({c:D}),N),id:le,ref:c,style:{zIndex:e,...he}},l.createElement("div",{className:a.classNames(a.uPopup.animationChild({c:D})),style:{transitionDelay:"0ms"}},l.createElement("div",{role:ie,className:a.classNames(a.uPopup.popup({c:D}),z)},ce))));return A!==null?Oe.createPortal(s,$):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:Ce,animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"};U.displayName="Popup";U.propTypes={anchor:function(i){const u=i.anchor;return u&&typeof u.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(i){const u=i.appendTo;return u&&typeof u.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({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=U;exports.PopupPropsContext=te;exports.popupDefaultProps=g;
|
package/Popup.mjs
CHANGED
|
@@ -10,20 +10,20 @@ import * as we from "react-dom";
|
|
|
10
10
|
import t from "prop-types";
|
|
11
11
|
import { slide as ve } from "./animation.mjs";
|
|
12
12
|
import { useUnstyled as ye, useZIndexContext as Pe, canUseDOM as Oe, ZIndexContext as Ee, classNames as D, uPopup as A } from "@progress/kendo-react-common";
|
|
13
|
-
import { Collision as w, AlignPoint as
|
|
13
|
+
import { Collision as w, AlignPoint as l, alignElement as be, positionElement as Ce, domUtils as xe } from "@progress/kendo-popup-common";
|
|
14
14
|
import { throttle as De, FRAME_DURATION as Ae } from "./util.mjs";
|
|
15
|
-
const Te = i.createContext((
|
|
16
|
-
function b(
|
|
17
|
-
if (
|
|
15
|
+
const Te = i.createContext((c) => c), Re = 100, Ne = 1;
|
|
16
|
+
function b(c, p) {
|
|
17
|
+
if (c === p)
|
|
18
18
|
return !0;
|
|
19
|
-
if (!!
|
|
19
|
+
if (!!c != !!p)
|
|
20
20
|
return !1;
|
|
21
|
-
const T = Object.getOwnPropertyNames(
|
|
21
|
+
const T = Object.getOwnPropertyNames(c), R = Object.getOwnPropertyNames(p);
|
|
22
22
|
if (T.length !== R.length)
|
|
23
23
|
return !1;
|
|
24
24
|
for (let m = 0; m < T.length; m++) {
|
|
25
25
|
const h = T[m];
|
|
26
|
-
if (
|
|
26
|
+
if (c[h] !== p[h])
|
|
27
27
|
return !1;
|
|
28
28
|
}
|
|
29
29
|
return !0;
|
|
@@ -31,16 +31,16 @@ function b(s, p) {
|
|
|
31
31
|
const ze = {
|
|
32
32
|
left: -1e3,
|
|
33
33
|
top: 0
|
|
34
|
-
}, te = i.forwardRef((
|
|
35
|
-
const R = i.useContext(Te).call(void 0,
|
|
34
|
+
}, te = i.forwardRef((c, p) => {
|
|
35
|
+
const R = i.useContext(Te).call(void 0, c), {
|
|
36
36
|
collision: m = g.collision,
|
|
37
37
|
anchorAlign: h = g.anchorAlign,
|
|
38
38
|
popupAlign: v = g.popupAlign,
|
|
39
39
|
offset: N = g.offset,
|
|
40
40
|
animate: ne = g.animate,
|
|
41
41
|
show: y = g.show,
|
|
42
|
-
margin:
|
|
43
|
-
positionMode:
|
|
42
|
+
margin: _ = g.margin,
|
|
43
|
+
positionMode: F = g.positionMode,
|
|
44
44
|
appendTo: P,
|
|
45
45
|
contentKey: z,
|
|
46
46
|
anchor: f,
|
|
@@ -49,8 +49,8 @@ const ze = {
|
|
|
49
49
|
onKeyDown: ie,
|
|
50
50
|
onPosition: q,
|
|
51
51
|
onOpen: V,
|
|
52
|
-
onMouseDownOutside:
|
|
53
|
-
onClose:
|
|
52
|
+
onMouseDownOutside: W,
|
|
53
|
+
onClose: X,
|
|
54
54
|
className: I,
|
|
55
55
|
popupClass: L,
|
|
56
56
|
id: se,
|
|
@@ -61,99 +61,101 @@ const ze = {
|
|
|
61
61
|
previous: "hidden",
|
|
62
62
|
props: {}
|
|
63
63
|
}), B = (e) => {
|
|
64
|
-
window == null || window.addEventListener("mousedown", J),
|
|
65
|
-
},
|
|
64
|
+
window == null || window.addEventListener("mousedown", J), k(e), G(e.firstChild, "enter", ae), U({ ...o, current: "shown", previous: o.current });
|
|
65
|
+
}, k = (e) => {
|
|
66
66
|
const { width: r, height: d } = e.style;
|
|
67
|
+
if (e.offsetWidth === 0 && e.offsetHeight === 0)
|
|
68
|
+
return;
|
|
67
69
|
e.style.width = e.offsetWidth + "px", e.style.height = e.offsetHeight + "px";
|
|
68
|
-
const
|
|
70
|
+
const a = be({
|
|
69
71
|
anchor: f,
|
|
70
72
|
anchorAlign: h,
|
|
71
73
|
element: e,
|
|
72
74
|
elementAlign: v,
|
|
73
75
|
offset: N,
|
|
74
|
-
margin:
|
|
75
|
-
positionMode:
|
|
76
|
+
margin: _,
|
|
77
|
+
positionMode: F,
|
|
76
78
|
scale: oe
|
|
77
|
-
}),
|
|
79
|
+
}), u = Ce({
|
|
78
80
|
anchor: f,
|
|
79
81
|
anchorAlign: h,
|
|
80
82
|
element: e,
|
|
81
83
|
elementAlign: v,
|
|
82
84
|
collisions: m,
|
|
83
|
-
currentLocation:
|
|
84
|
-
margin:
|
|
85
|
+
currentLocation: a,
|
|
86
|
+
margin: _
|
|
85
87
|
});
|
|
86
|
-
if (e.style.top =
|
|
87
|
-
fit:
|
|
88
|
-
fitted:
|
|
89
|
-
flip:
|
|
90
|
-
flipped:
|
|
88
|
+
if (e.style.top = u.offset.top + "px", e.style.left = u.offset.left + "px", e.style.width = r, e.style.height = d, K.current = {
|
|
89
|
+
fit: u.fit,
|
|
90
|
+
fitted: u.fitted,
|
|
91
|
+
flip: u.flip,
|
|
92
|
+
flipped: u.flipped
|
|
91
93
|
}, q) {
|
|
92
94
|
const x = {
|
|
93
95
|
target: E.current,
|
|
94
|
-
flipped:
|
|
95
|
-
fitted:
|
|
96
|
+
flipped: u.flipped,
|
|
97
|
+
fitted: u.fitted
|
|
96
98
|
};
|
|
97
99
|
q.call(void 0, x);
|
|
98
100
|
}
|
|
99
|
-
},
|
|
100
|
-
const e =
|
|
101
|
+
}, ae = () => {
|
|
102
|
+
const e = s.current;
|
|
101
103
|
e && (y && e.classList.add(
|
|
102
104
|
...D(A.animationContainerShown({ c: C })).split(" ").filter((r) => r)
|
|
103
105
|
), fe(e), V && V.call(void 0, { target: E.current }));
|
|
104
106
|
}, G = (e, r, d) => {
|
|
105
107
|
if (!v)
|
|
106
108
|
return;
|
|
107
|
-
let
|
|
108
|
-
const { horizontal:
|
|
109
|
-
typeof
|
|
109
|
+
let a;
|
|
110
|
+
const { horizontal: u, vertical: x } = v;
|
|
111
|
+
typeof c.animate == "object" && c.animate.direction ? a = c.animate.direction : u === "left" && x === "center" ? a = "right" : u === "right" && x === "center" ? a = "left" : x === "top" ? a = "down" : a = "up";
|
|
110
112
|
const ge = {
|
|
111
113
|
down: "up",
|
|
112
114
|
up: "down",
|
|
113
115
|
left: "right",
|
|
114
116
|
right: "left"
|
|
115
117
|
};
|
|
116
|
-
|
|
118
|
+
K.current && K.current.flipped && (a = ge[a]), ve(e, a, pe()[r], r, d, C);
|
|
117
119
|
}, J = (e) => {
|
|
118
|
-
var
|
|
119
|
-
const r = ((
|
|
120
|
+
var a;
|
|
121
|
+
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;
|
|
120
122
|
if (r) {
|
|
121
|
-
if (
|
|
122
|
-
const
|
|
123
|
+
if (W) {
|
|
124
|
+
const u = {
|
|
123
125
|
target: E.current,
|
|
124
126
|
event: e,
|
|
125
127
|
state: n,
|
|
126
128
|
isAnchorClicked: d
|
|
127
129
|
};
|
|
128
|
-
|
|
130
|
+
W.call(void 0, u);
|
|
129
131
|
}
|
|
130
132
|
window == null || window.removeEventListener("mousedown", J);
|
|
131
133
|
}
|
|
132
|
-
},
|
|
134
|
+
}, ue = (e) => {
|
|
133
135
|
if (!y) {
|
|
134
136
|
const r = S && S.uPopup;
|
|
135
137
|
e.classList.remove(
|
|
136
138
|
...D(A.animationContainerShown({ c: r })).split(" ").filter((d) => d)
|
|
137
139
|
);
|
|
138
140
|
}
|
|
139
|
-
|
|
141
|
+
H();
|
|
140
142
|
}, Q = () => {
|
|
141
|
-
o.current === "hiding" && (o.previous === "shown" || o.previous === "reposition") && U({ ...o, current: "hidden", previous: o.current }),
|
|
143
|
+
o.current === "hiding" && (o.previous === "shown" || o.previous === "reposition") && U({ ...o, current: "hidden", previous: o.current }), X && X.call(void 0, { target: E.current });
|
|
142
144
|
}, pe = () => {
|
|
143
145
|
const e = ne;
|
|
144
146
|
let r = 0, d = 0;
|
|
145
147
|
return e && (e === !0 ? r = d = 300 : (r = e.openDuration || 0, d = e.closeDuration || 0)), { enter: r, exit: d };
|
|
146
148
|
}, fe = (e) => {
|
|
147
|
-
|
|
148
|
-
},
|
|
149
|
-
O.current && (O.current.map((e) => e.removeEventListener("scroll",
|
|
150
|
-
},
|
|
151
|
-
o.current !== "hidden" && o.current !== "hiding" && U({ ...n, current: "reposition", previous: o.current });
|
|
152
|
-
}, Ae), de = () => Y ? Y + Ne : Re, Y = Pe() || 0,
|
|
149
|
+
H(), O.current = xe.scrollableParents(f || e), O.current && O.current.map((r) => r.addEventListener("scroll", j)), window.addEventListener("resize", j);
|
|
150
|
+
}, H = () => {
|
|
151
|
+
O.current && (O.current.map((e) => e.removeEventListener("scroll", j)), O.current = void 0), window.removeEventListener("resize", j);
|
|
152
|
+
}, j = De(() => {
|
|
153
|
+
s.current && o.current !== "hidden" && o.current !== "hiding" && U({ ...n, current: "reposition", previous: o.current });
|
|
154
|
+
}, Ae), de = () => Y ? Y + Ne : Re, Y = Pe() || 0, K = i.useRef(void 0), O = i.useRef(void 0), s = i.useRef(null), E = i.useRef(null), $ = i.useRef({}), Z = i.useRef(!1);
|
|
153
155
|
i.useImperativeHandle(E, () => ({
|
|
154
|
-
element:
|
|
155
|
-
setPosition:
|
|
156
|
-
props:
|
|
156
|
+
element: s.current,
|
|
157
|
+
setPosition: k,
|
|
158
|
+
props: c
|
|
157
159
|
})), i.useImperativeHandle(p, () => E.current);
|
|
158
160
|
const o = i.useMemo(() => {
|
|
159
161
|
const e = {
|
|
@@ -188,15 +190,15 @@ const ze = {
|
|
|
188
190
|
n
|
|
189
191
|
]);
|
|
190
192
|
i.useEffect(() => {
|
|
191
|
-
o.current === "hiding" && !
|
|
193
|
+
o.current === "hiding" && !Z.current && s.current ? (Z.current = !0, ue(s.current), G(s.current.firstChild, "exit", Q)) : (Z.current = !1, o.current === "showing" && s.current && !s.current.classList.contains("k-animation-container-shown") ? B(s.current) : o.current === "hiding" && s.current ? Q() : o.current === "reposition" && o.previous === "shown" ? setTimeout(() => {
|
|
192
194
|
U({ ...o, current: "shown", previous: o.current });
|
|
193
|
-
}, 0) : o.current === "shown" && $.current.contentKey !== z &&
|
|
194
|
-
}, [o]), i.useEffect(() => (o.current === "showing" &&
|
|
195
|
-
|
|
195
|
+
}, 0) : o.current === "shown" && $.current.contentKey !== z && s.current && k(s.current)), o.current === "reposition" && (o.previous === "shown" || o.previous === "showing") && s.current && k(s.current), $.current = { contentKey: z };
|
|
196
|
+
}, [o]), i.useEffect(() => (o.current === "showing" && s.current && B(s.current), () => {
|
|
197
|
+
H();
|
|
196
198
|
}), []);
|
|
197
199
|
const ee = P || (Oe ? f && f.ownerDocument ? f.ownerDocument.body : document.body : void 0), me = Object.assign(
|
|
198
200
|
{},
|
|
199
|
-
{ position:
|
|
201
|
+
{ position: F, top: 0, left: -1e4 },
|
|
200
202
|
M || {}
|
|
201
203
|
), he = o.current === "hiding";
|
|
202
204
|
if ((y || he) && ee) {
|
|
@@ -206,7 +208,7 @@ const ze = {
|
|
|
206
208
|
onKeyDown: ie,
|
|
207
209
|
className: D(A.animationContainer({ c: C }), I),
|
|
208
210
|
id: se,
|
|
209
|
-
ref:
|
|
211
|
+
ref: s,
|
|
210
212
|
style: {
|
|
211
213
|
zIndex: e,
|
|
212
214
|
...me
|
|
@@ -230,12 +232,12 @@ const ze = {
|
|
|
230
232
|
vertical: w.flip
|
|
231
233
|
},
|
|
232
234
|
anchorAlign: {
|
|
233
|
-
horizontal:
|
|
234
|
-
vertical:
|
|
235
|
+
horizontal: l.left,
|
|
236
|
+
vertical: l.bottom
|
|
235
237
|
},
|
|
236
238
|
popupAlign: {
|
|
237
|
-
horizontal:
|
|
238
|
-
vertical:
|
|
239
|
+
horizontal: l.left,
|
|
240
|
+
vertical: l.top
|
|
239
241
|
},
|
|
240
242
|
offset: ze,
|
|
241
243
|
animate: !0,
|
|
@@ -248,12 +250,12 @@ const ze = {
|
|
|
248
250
|
};
|
|
249
251
|
te.displayName = "Popup";
|
|
250
252
|
te.propTypes = {
|
|
251
|
-
anchor: function(
|
|
252
|
-
const p =
|
|
253
|
+
anchor: function(c) {
|
|
254
|
+
const p = c.anchor;
|
|
253
255
|
return p && typeof p.nodeType != "number" ? new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed.") : null;
|
|
254
256
|
},
|
|
255
|
-
appendTo: function(
|
|
256
|
-
const p =
|
|
257
|
+
appendTo: function(c) {
|
|
258
|
+
const p = c.appendTo;
|
|
257
259
|
return p && typeof p.nodeType != "number" ? new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed.") : null;
|
|
258
260
|
},
|
|
259
261
|
className: t.oneOfType([t.string, t.arrayOf(t.string.isRequired)]),
|
|
@@ -264,12 +266,12 @@ te.propTypes = {
|
|
|
264
266
|
vertical: t.oneOf([w.fit, w.flip, w.none])
|
|
265
267
|
}),
|
|
266
268
|
anchorAlign: t.shape({
|
|
267
|
-
horizontal: t.oneOf([
|
|
268
|
-
vertical: t.oneOf([
|
|
269
|
+
horizontal: t.oneOf([l.left, l.center, l.right]),
|
|
270
|
+
vertical: t.oneOf([l.top, l.center, l.bottom])
|
|
269
271
|
}),
|
|
270
272
|
popupAlign: t.shape({
|
|
271
|
-
horizontal: t.oneOf([
|
|
272
|
-
vertical: t.oneOf([
|
|
273
|
+
horizontal: t.oneOf([l.left, l.center, l.right]),
|
|
274
|
+
vertical: t.oneOf([l.top, l.center, l.bottom])
|
|
273
275
|
}),
|
|
274
276
|
offset: t.shape({
|
|
275
277
|
left: t.number,
|
|
@@ -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 u=(e,n,t)=>{e.style.transitionDuration="",n&&e.classList.remove(...n.split(" ")),t&&e.classList.remove(...t.split(" "))},
|
|
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 u=(e,n,t)=>{e.style.transitionDuration="",n&&e.classList.remove(...n.split(" ")),t&&e.classList.remove(...t.split(" "))},a="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),p=(e,n,t,o,i,s)=>{if(0===t)return i();const l=r.classNames(r.uPopup.slide({direction:n,type:o,c:s})),c=r.classNames(r.uPopup.slideActive({direction:n,type:o,c:s})),p=n=>{n.target===e&&(e.removeEventListener("transitionend",p),u(e,l,c),e.style.display="exit"===o?"none":"",i())};e.addEventListener("transitionend",p);const d=e.ownerDocument;if(!d)return;const f=d.defaultView;if(!f)return;const m=()=>{u(e,l,c),"enter"===o&&(e.style.display=""),l&&e.classList.add(...l.split(" ").filter((e=>e))),f.requestAnimationFrame((()=>{e.style.transitionDuration=t+"ms",e.classList.add(...c.split(" ").filter((e=>e)))}))};a?f.requestAnimationFrame(m):m()},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:u=h.popupAlign,offset:a=h.offset,animate:m=h.animate,show:g=h.show,margin:v=h.margin,positionMode:w=h.positionMode,appendTo:y,contentKey:P,anchor:A,scale:b,role:O,onKeyDown:C,onPosition:T,onOpen:x,onMouseDownOutside:D,onClose:E,className:N,popupClass:L,id:R,style:z,children:j}=t,K=r.useUnstyled(),M=t.unstyled||K,k=M&&M.uPopup,[q,I]=l.useState({current:"hidden",previous:"hidden",props:{}}),H=e=>{null==window||window.addEventListener("mousedown",V),F(e),U(e.firstChild,"enter",S),I({...te,current:"shown",previous:te.current})},F=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:u,offset:a,margin:v,positionMode:w,scale:b}),l=i.positionElement({anchor:A,anchorAlign:s,element:e,elementAlign:u,collisions:o,currentLocation:r,margin:v});if(e.style.top=l.offset.top+"px",e.style.left=l.offset.left+"px",e.style.width=n,e.style.height=t,X.current={fit:l.fit,fitted:l.fitted,flip:l.flip,flipped:l.flipped},T){const e={target:_.current,flipped:l.flipped,fitted:l.fitted};T.call(void 0,e)}},S=()=>{const e=$.current;e&&(g&&e.classList.add(...r.classNames(r.uPopup.animationContainerShown({c:k})).split(" ").filter((e=>e))),B(e),x&&x.call(void 0,{target:_.current}))},U=(n,t,o)=>{if(!u)return;let r;const{horizontal:i,vertical:s}=u;r="object"==typeof e.animate&&e.animate.direction?e.animate.direction:"left"===i&&"center"===s?"right":"right"===i&&"center"===s?"left":"top"===s?"down":"up";X.current&&X.current.flipped&&(r={down:"up",up:"down",left:"right",right:"left"}[r]),p(n,r,Z()[t],t,o,k)},V=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(D){const n={target:_.current,event:e,state:q,isAnchorClicked:o};D.call(void 0,n)}null==window||window.removeEventListener("mousedown",V)}},W=()=>{"hiding"===te.current&&("shown"===te.previous||"reposition"===te.previous)&&I({...te,current:"hidden",previous:te.current}),E&&E.call(void 0,{target:_.current})},Z=()=>{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}},B=e=>{G(),Y.current=i.domUtils.scrollableParents(A||e),Y.current&&Y.current.map((e=>e.addEventListener("scroll",J))),window.addEventListener("resize",J)},G=()=>{Y.current&&(Y.current.map((e=>e.removeEventListener("scroll",J))),Y.current=void 0),window.removeEventListener("resize",J)},J=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 u=(new Date).getTime();!l&&!1===t.leading&&(l=u);const a=n-(u-l);return r=void 0,i=arguments,a<=0||a>n?(o&&(clearTimeout(o),o=void 0),l=u,s=e.apply(r,i),o||(r=i=null)):!o&&!1!==t.trailing&&(o=window.setTimeout(c,a)),s}}((()=>{$.current&&"hidden"!==te.current&&"hiding"!==te.current&&I({...q,current:"reposition",previous:te.current})}),16.666666666666668),Q=r.useZIndexContext()||0,X=l.useRef(void 0),Y=l.useRef(void 0),$=l.useRef(null),_=l.useRef(null),ee=l.useRef({}),ne=l.useRef(!1);l.useImperativeHandle(_,(()=>({element:$.current,setPosition:F,props:e}))),l.useImperativeHandle(n,(()=>_.current));const te=l.useMemo((()=>{const e={...q,props:{show:g,anchor:A,anchorAlign:s,appendTo:y,collision:o,popupAlign:u,className:N,popupClass:L,style:z,offset:a,contentKey:P}};return g?"hidden"===q.current||"hiding"===q.current?{...e,current:"showing",previous:q.current}:"showing"===q.current?{...e,current:"shown",previous:q.current}:"shown"!==q.current||f(a,q.props.offset)&&f(s,q.props.anchorAlign)&&f(y,q.props.appendTo)&&f(o,q.props.collision)&&f(u,q.props.popupAlign)&&f(z,q.props.style)&&A===q.props.anchor&&L===q.props.popupClass&&N===q.props.className?e:{...e,current:"reposition",previous:q.current}:"hiding"===q.current||"hidden"===q.current?{...e,current:"hidden",previous:q.current}:{...e,current:"hiding",previous:q.current}}),[g,A,s,y,o,u,N,L,z,a,P,q]);l.useEffect((()=>{"hiding"===te.current&&!ne.current&&$.current?(ne.current=!0,(e=>{if(!g){const n=M&&M.uPopup;e.classList.remove(...r.classNames(r.uPopup.animationContainerShown({c:n})).split(" ").filter((e=>e)))}G()})($.current),U($.current.firstChild,"exit",W)):(ne.current=!1,"showing"===te.current&&$.current&&!$.current.classList.contains("k-animation-container-shown")?H($.current):"hiding"===te.current&&$.current?W():"reposition"===te.current&&"shown"===te.previous?setTimeout((()=>{I({...te,current:"shown",previous:te.current})}),0):"shown"===te.current&&ee.current.contentKey!==P&&$.current&&F($.current)),"reposition"===te.current&&("shown"===te.previous||"showing"===te.previous)&&$.current&&F($.current),ee.current={contentKey:P}}),[te]),l.useEffect((()=>("showing"===te.current&&$.current&&H($.current),()=>{G()})),[]);const oe=y||(r.canUseDOM?A&&A.ownerDocument?A.ownerDocument.body:document.body:void 0),re=Object.assign({},{position:w,top:0,left:-1e4},z||{}),ie="hiding"===te.current;if((g||ie)&&oe){const e=Q?Q+1:100,n=l.createElement(r.ZIndexContext.Provider,{value:e},l.createElement("div",{onKeyDown:C,className:r.classNames(r.uPopup.animationContainer({c:k}),N),id:R,ref:$,style:{zIndex:e,...re}},l.createElement("div",{className:r.classNames(r.uPopup.animationChild({c:k})),style:{transitionDelay:"0ms"}},l.createElement("div",{role:O,className:r.classNames(r.uPopup.popup({c:k}),L)},j))));return null!==y?c.createPortal(n,oe):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"};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({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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-popup",
|
|
3
|
-
"version": "10.2.0-develop.
|
|
3
|
+
"version": "10.2.0-develop.13",
|
|
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.5.1",
|
|
29
29
|
"@progress/kendo-popup-common": "^1.9.0",
|
|
30
|
-
"@progress/kendo-react-common": "10.2.0-develop.
|
|
30
|
+
"@progress/kendo-react-common": "10.2.0-develop.13",
|
|
31
31
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
32
32
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
33
33
|
},
|