@progress/kendo-react-popup 10.0.0 → 10.1.0-develop.2
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 +66 -66
- package/dist/cdn/js/kendo-react-popup.js +1 -1
- package/index.d.mts +4 -0
- package/index.d.ts +4 -0
- package/package.json +4 -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 c=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(c,h,v.get?v:{enumerable:!0,get:()=>i[h]})}}return c.default=i,Object.freeze(c)}const l=ne(we),Oe=ne(ve),te=l.createContext(i=>i),Ae=100,
|
|
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 c=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(c,h,v.get?v:{enumerable:!0,get:()=>i[h]})}}return c.default=i,Object.freeze(c)}const l=ne(we),Oe=ne(ve),te=l.createContext(i=>i),Ae=100,be=1;function E(i,c){if(i===c)return!0;if(!!i!=!!c)return!1;const h=Object.getOwnPropertyNames(i),v=Object.getOwnPropertyNames(c);if(h.length!==v.length)return!1;for(let P=0;P<h.length;P++){const w=h[P];if(i[w]!==c[w])return!1}return!0}const Ce={left:-1e3,top:0},U=l.forwardRef((i,c)=>{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:K=g.margin,positionMode:Z=g.positionMode,appendTo:A,contentKey:T,anchor:d,scale:re,role:ie,onKeyDown:se,onPosition:F,onOpen:H,onMouseDownOutside:V,onClose:X,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:{}}),W=e=>{window==null||window.addEventListener("mousedown",G),j(e),B(e.firstChild,"enter",ae),I({...r,current:"shown",previous:r.current})},j=e=>{const{width:s,height:m}=e.style;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:K,positionMode:Z,scale:re}),f=t.positionElement({anchor:d,anchorAlign:w,element:e,elementAlign:y,collisions:P,currentLocation:p,margin:K});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},F){const x={target:C.current,flipped:f.flipped,fitted:f.fitted};F.call(void 0,x)}},ae=()=>{const e=u.current;e&&(O&&e.classList.add(...a.classNames(a.uPopup.animationContainerShown({c:D})).split(" ").filter(s=>s)),de(e),H&&H.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}),X&&X.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",L)),window.addEventListener("resize",L)},_=()=>{b.current&&(b.current.map(e=>e.removeEventListener("scroll",L)),b.current=void 0),window.removeEventListener("resize",L)},L=ee.throttle(()=>{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(),b=l.useRef(),u=l.useRef(null),C=l.useRef(null),Y=l.useRef({}),q=l.useRef(!1);l.useImperativeHandle(C,()=>({element:u.current,setPosition:j,props:i})),l.useImperativeHandle(c,()=>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&&u.current?(q.current=!0,pe(u.current),B(u.current.firstChild,"exit",J)):(q.current=!1,r.current==="showing"&&u.current?W(u.current):r.current==="hiding"&&u.current?J():r.current==="reposition"&&r.previous==="shown"?setTimeout(()=>{I({...r,current:"shown",previous:r.current})},0):r.current==="shown"&&Y.current.contentKey!==T&&u.current&&j(u.current)),r.current==="reposition"&&(r.previous==="shown"||r.previous==="showing")&&u.current&&j(u.current),Y.current={contentKey:T}},[r]),l.useEffect(()=>(r.current==="showing"&&u.current&&W(u.current),()=>{_()}),[]);const $=A||(a.canUseDOM?d&&d.ownerDocument?d.ownerDocument.body:document.body:void 0),he=Object.assign({},{position:Z,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:u,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 c=i.anchor;return c&&typeof c.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(i){const c=i.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({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 c, 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((s) => s), Re = 100, Ne = 1;
|
|
16
|
+
function b(s, p) {
|
|
17
|
+
if (s === p)
|
|
18
18
|
return !0;
|
|
19
|
-
if (!!
|
|
19
|
+
if (!!s != !!p)
|
|
20
20
|
return !1;
|
|
21
|
-
const T = Object.getOwnPropertyNames(
|
|
21
|
+
const T = Object.getOwnPropertyNames(s), 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 (s[h] !== p[h])
|
|
27
27
|
return !1;
|
|
28
28
|
}
|
|
29
29
|
return !0;
|
|
@@ -31,8 +31,8 @@ function b(l, a) {
|
|
|
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((s, p) => {
|
|
35
|
+
const R = i.useContext(Te).call(void 0, s), {
|
|
36
36
|
collision: m = g.collision,
|
|
37
37
|
anchorAlign: h = g.anchorAlign,
|
|
38
38
|
popupAlign: v = g.popupAlign,
|
|
@@ -43,7 +43,7 @@ const ze = {
|
|
|
43
43
|
positionMode: H = g.positionMode,
|
|
44
44
|
appendTo: P,
|
|
45
45
|
contentKey: z,
|
|
46
|
-
anchor:
|
|
46
|
+
anchor: f,
|
|
47
47
|
scale: oe,
|
|
48
48
|
role: re,
|
|
49
49
|
onKeyDown: ie,
|
|
@@ -61,12 +61,12 @@ 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), j(e), G(e.firstChild, "enter", ue), U({ ...o, current: "shown", previous: o.current });
|
|
65
|
+
}, j = (e) => {
|
|
66
66
|
const { width: r, height: d } = e.style;
|
|
67
67
|
e.style.width = e.offsetWidth + "px", e.style.height = e.offsetHeight + "px";
|
|
68
|
-
const
|
|
69
|
-
anchor:
|
|
68
|
+
const u = be({
|
|
69
|
+
anchor: f,
|
|
70
70
|
anchorAlign: h,
|
|
71
71
|
element: e,
|
|
72
72
|
elementAlign: v,
|
|
@@ -74,58 +74,58 @@ const ze = {
|
|
|
74
74
|
margin: F,
|
|
75
75
|
positionMode: H,
|
|
76
76
|
scale: oe
|
|
77
|
-
}),
|
|
78
|
-
anchor:
|
|
77
|
+
}), a = Ce({
|
|
78
|
+
anchor: f,
|
|
79
79
|
anchorAlign: h,
|
|
80
80
|
element: e,
|
|
81
81
|
elementAlign: v,
|
|
82
82
|
collisions: m,
|
|
83
|
-
currentLocation:
|
|
83
|
+
currentLocation: u,
|
|
84
84
|
margin: F
|
|
85
85
|
});
|
|
86
|
-
if (e.style.top =
|
|
87
|
-
fit:
|
|
88
|
-
fitted:
|
|
89
|
-
flip:
|
|
90
|
-
flipped:
|
|
86
|
+
if (e.style.top = a.offset.top + "px", e.style.left = a.offset.left + "px", e.style.width = r, e.style.height = d, Z.current = {
|
|
87
|
+
fit: a.fit,
|
|
88
|
+
fitted: a.fitted,
|
|
89
|
+
flip: a.flip,
|
|
90
|
+
flipped: a.flipped
|
|
91
91
|
}, q) {
|
|
92
92
|
const x = {
|
|
93
93
|
target: E.current,
|
|
94
|
-
flipped:
|
|
95
|
-
fitted:
|
|
94
|
+
flipped: a.flipped,
|
|
95
|
+
fitted: a.fitted
|
|
96
96
|
};
|
|
97
97
|
q.call(void 0, x);
|
|
98
98
|
}
|
|
99
99
|
}, ue = () => {
|
|
100
|
-
const e =
|
|
100
|
+
const e = l.current;
|
|
101
101
|
e && (y && e.classList.add(
|
|
102
102
|
...D(A.animationContainerShown({ c: C })).split(" ").filter((r) => r)
|
|
103
103
|
), fe(e), V && V.call(void 0, { target: E.current }));
|
|
104
104
|
}, G = (e, r, d) => {
|
|
105
105
|
if (!v)
|
|
106
106
|
return;
|
|
107
|
-
let
|
|
108
|
-
const { horizontal:
|
|
109
|
-
u === "left" && x === "center" ?
|
|
107
|
+
let u;
|
|
108
|
+
const { horizontal: a, vertical: x } = v;
|
|
109
|
+
typeof s.animate == "object" && s.animate.direction ? u = s.animate.direction : a === "left" && x === "center" ? u = "right" : a === "right" && x === "center" ? u = "left" : x === "top" ? u = "down" : u = "up";
|
|
110
110
|
const ge = {
|
|
111
111
|
down: "up",
|
|
112
112
|
up: "down",
|
|
113
113
|
left: "right",
|
|
114
114
|
right: "left"
|
|
115
115
|
};
|
|
116
|
-
|
|
116
|
+
Z.current && Z.current.flipped && (u = ge[u]), ve(e, u, pe()[r], r, d, C);
|
|
117
117
|
}, J = (e) => {
|
|
118
|
-
var
|
|
119
|
-
const r = ((
|
|
118
|
+
var u;
|
|
119
|
+
const r = ((u = e == null ? void 0 : e.target) == null ? void 0 : u.closest(".k-animation-container")) === null, d = (f == null ? void 0 : f.contains(e == null ? void 0 : e.target)) || !1;
|
|
120
120
|
if (r) {
|
|
121
121
|
if (X) {
|
|
122
|
-
const
|
|
122
|
+
const a = {
|
|
123
123
|
target: E.current,
|
|
124
124
|
event: e,
|
|
125
125
|
state: n,
|
|
126
126
|
isAnchorClicked: d
|
|
127
127
|
};
|
|
128
|
-
X.call(void 0,
|
|
128
|
+
X.call(void 0, a);
|
|
129
129
|
}
|
|
130
130
|
window == null || window.removeEventListener("mousedown", J);
|
|
131
131
|
}
|
|
@@ -136,7 +136,7 @@ const ze = {
|
|
|
136
136
|
...D(A.animationContainerShown({ c: r })).split(" ").filter((d) => d)
|
|
137
137
|
);
|
|
138
138
|
}
|
|
139
|
-
|
|
139
|
+
K();
|
|
140
140
|
}, Q = () => {
|
|
141
141
|
o.current === "hiding" && (o.previous === "shown" || o.previous === "reposition") && U({ ...o, current: "hidden", previous: o.current }), W && W.call(void 0, { target: E.current });
|
|
142
142
|
}, pe = () => {
|
|
@@ -144,23 +144,23 @@ const ze = {
|
|
|
144
144
|
let r = 0, d = 0;
|
|
145
145
|
return e && (e === !0 ? r = d = 300 : (r = e.openDuration || 0, d = e.closeDuration || 0)), { enter: r, exit: d };
|
|
146
146
|
}, fe = (e) => {
|
|
147
|
-
|
|
148
|
-
},
|
|
149
|
-
O.current && (O.current.map((e) => e.removeEventListener("scroll",
|
|
150
|
-
},
|
|
147
|
+
K(), O.current = xe.scrollableParents(f || e), O.current && O.current.map((r) => r.addEventListener("scroll", k)), window.addEventListener("resize", k);
|
|
148
|
+
}, K = () => {
|
|
149
|
+
O.current && (O.current.map((e) => e.removeEventListener("scroll", k)), O.current = void 0), window.removeEventListener("resize", k);
|
|
150
|
+
}, k = De(() => {
|
|
151
151
|
o.current !== "hidden" && o.current !== "hiding" && U({ ...n, current: "reposition", previous: o.current });
|
|
152
|
-
}, Ae), de = () => Y ? Y + Ne : Re, Y = Pe() || 0,
|
|
152
|
+
}, Ae), de = () => Y ? Y + Ne : Re, Y = Pe() || 0, Z = i.useRef(), O = i.useRef(), l = i.useRef(null), E = i.useRef(null), $ = i.useRef({}), _ = i.useRef(!1);
|
|
153
153
|
i.useImperativeHandle(E, () => ({
|
|
154
|
-
element:
|
|
155
|
-
setPosition:
|
|
156
|
-
props:
|
|
157
|
-
})), i.useImperativeHandle(
|
|
154
|
+
element: l.current,
|
|
155
|
+
setPosition: j,
|
|
156
|
+
props: s
|
|
157
|
+
})), i.useImperativeHandle(p, () => E.current);
|
|
158
158
|
const o = i.useMemo(() => {
|
|
159
159
|
const e = {
|
|
160
160
|
...n,
|
|
161
161
|
props: {
|
|
162
162
|
show: y,
|
|
163
|
-
anchor:
|
|
163
|
+
anchor: f,
|
|
164
164
|
anchorAlign: h,
|
|
165
165
|
appendTo: P,
|
|
166
166
|
collision: m,
|
|
@@ -172,10 +172,10 @@ const ze = {
|
|
|
172
172
|
contentKey: z
|
|
173
173
|
}
|
|
174
174
|
};
|
|
175
|
-
return y ? n.current === "hidden" || n.current === "hiding" ? { ...e, current: "showing", previous: n.current } : n.current === "showing" ? { ...e, current: "shown", previous: n.current } : n.current === "shown" && (!b(N, n.props.offset) || !b(h, n.props.anchorAlign) || !b(P, n.props.appendTo) || !b(m, n.props.collision) || !b(v, n.props.popupAlign) || !b(M, n.props.style) ||
|
|
175
|
+
return y ? n.current === "hidden" || n.current === "hiding" ? { ...e, current: "showing", previous: n.current } : n.current === "showing" ? { ...e, current: "shown", previous: n.current } : n.current === "shown" && (!b(N, n.props.offset) || !b(h, n.props.anchorAlign) || !b(P, n.props.appendTo) || !b(m, n.props.collision) || !b(v, n.props.popupAlign) || !b(M, n.props.style) || f !== n.props.anchor || L !== n.props.popupClass || I !== 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 };
|
|
176
176
|
}, [
|
|
177
177
|
y,
|
|
178
|
-
|
|
178
|
+
f,
|
|
179
179
|
h,
|
|
180
180
|
P,
|
|
181
181
|
m,
|
|
@@ -188,13 +188,13 @@ const ze = {
|
|
|
188
188
|
n
|
|
189
189
|
]);
|
|
190
190
|
i.useEffect(() => {
|
|
191
|
-
o.current === "hiding" && !
|
|
191
|
+
o.current === "hiding" && !_.current && l.current ? (_.current = !0, ae(l.current), G(l.current.firstChild, "exit", Q)) : (_.current = !1, o.current === "showing" && l.current ? B(l.current) : o.current === "hiding" && l.current ? Q() : o.current === "reposition" && o.previous === "shown" ? setTimeout(() => {
|
|
192
192
|
U({ ...o, current: "shown", previous: o.current });
|
|
193
|
-
}, 0) : o.current === "shown" && $.current.contentKey !== z &&
|
|
194
|
-
}, [o]), i.useEffect(() => (o.current === "showing" &&
|
|
195
|
-
|
|
193
|
+
}, 0) : o.current === "shown" && $.current.contentKey !== z && l.current && j(l.current)), o.current === "reposition" && (o.previous === "shown" || o.previous === "showing") && l.current && j(l.current), $.current = { contentKey: z };
|
|
194
|
+
}, [o]), i.useEffect(() => (o.current === "showing" && l.current && B(l.current), () => {
|
|
195
|
+
K();
|
|
196
196
|
}), []);
|
|
197
|
-
const ee = P || (Oe ?
|
|
197
|
+
const ee = P || (Oe ? f && f.ownerDocument ? f.ownerDocument.body : document.body : void 0), me = Object.assign(
|
|
198
198
|
{},
|
|
199
199
|
{ position: H, top: 0, left: -1e4 },
|
|
200
200
|
M || {}
|
|
@@ -206,7 +206,7 @@ const ze = {
|
|
|
206
206
|
onKeyDown: ie,
|
|
207
207
|
className: D(A.animationContainer({ c: C }), I),
|
|
208
208
|
id: se,
|
|
209
|
-
ref:
|
|
209
|
+
ref: l,
|
|
210
210
|
style: {
|
|
211
211
|
zIndex: e,
|
|
212
212
|
...me
|
|
@@ -230,12 +230,12 @@ const ze = {
|
|
|
230
230
|
vertical: w.flip
|
|
231
231
|
},
|
|
232
232
|
anchorAlign: {
|
|
233
|
-
horizontal:
|
|
234
|
-
vertical:
|
|
233
|
+
horizontal: c.left,
|
|
234
|
+
vertical: c.bottom
|
|
235
235
|
},
|
|
236
236
|
popupAlign: {
|
|
237
|
-
horizontal:
|
|
238
|
-
vertical:
|
|
237
|
+
horizontal: c.left,
|
|
238
|
+
vertical: c.top
|
|
239
239
|
},
|
|
240
240
|
offset: ze,
|
|
241
241
|
animate: !0,
|
|
@@ -248,13 +248,13 @@ const ze = {
|
|
|
248
248
|
};
|
|
249
249
|
te.displayName = "Popup";
|
|
250
250
|
te.propTypes = {
|
|
251
|
-
anchor: function(
|
|
252
|
-
const
|
|
253
|
-
return
|
|
251
|
+
anchor: function(s) {
|
|
252
|
+
const p = s.anchor;
|
|
253
|
+
return p && typeof p.nodeType != "number" ? new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed.") : null;
|
|
254
254
|
},
|
|
255
|
-
appendTo: function(
|
|
256
|
-
const
|
|
257
|
-
return
|
|
255
|
+
appendTo: function(s) {
|
|
256
|
+
const p = s.appendTo;
|
|
257
|
+
return p && typeof p.nodeType != "number" ? new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed.") : null;
|
|
258
258
|
},
|
|
259
259
|
className: t.oneOfType([t.string, t.arrayOf(t.string.isRequired)]),
|
|
260
260
|
id: t.string,
|
|
@@ -264,12 +264,12 @@ te.propTypes = {
|
|
|
264
264
|
vertical: t.oneOf([w.fit, w.flip, w.none])
|
|
265
265
|
}),
|
|
266
266
|
anchorAlign: t.shape({
|
|
267
|
-
horizontal: t.oneOf([
|
|
268
|
-
vertical: t.oneOf([
|
|
267
|
+
horizontal: t.oneOf([c.left, c.center, c.right]),
|
|
268
|
+
vertical: t.oneOf([c.top, c.center, c.bottom])
|
|
269
269
|
}),
|
|
270
270
|
popupAlign: t.shape({
|
|
271
|
-
horizontal: t.oneOf([
|
|
272
|
-
vertical: t.oneOf([
|
|
271
|
+
horizontal: t.oneOf([c.left, c.center, c.right]),
|
|
272
|
+
vertical: t.oneOf([c.top, c.center, c.bottom])
|
|
273
273
|
}),
|
|
274
274
|
offset: t.shape({
|
|
275
275
|
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(" "))},p="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),a=(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})),a=n=>{n.target===e&&(e.removeEventListener("transitionend",a),u(e,l,c),e.style.display="exit"===o?"none":"",i())};e.addEventListener("transitionend",a);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)))}))};p?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=g.collision,anchorAlign:s=g.anchorAlign,popupAlign:u=g.popupAlign,offset:p=g.offset,animate:m=g.animate,show:h=g.show,margin:v=g.margin,positionMode:w=g.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:
|
|
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(" "))},p="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),a=(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})),a=n=>{n.target===e&&(e.removeEventListener("transitionend",a),u(e,l,c),e.style.display="exit"===o?"none":"",i())};e.addEventListener("transitionend",a);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)))}))};p?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=g.collision,anchorAlign:s=g.anchorAlign,popupAlign:u=g.popupAlign,offset:p=g.offset,animate:m=g.animate,show:h=g.show,margin:v=g.margin,positionMode:w=g.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,q=M&&M.uPopup,[k,I]=l.useState({current:"hidden",previous:"hidden",props:{}}),F=e=>{null==window||window.addEventListener("mousedown",V),H(e),U(e.firstChild,"enter",S),I({...te,current:"shown",previous:te.current})},H=e=>{const{width:n,height:t}=e.style;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:p,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&&(h&&e.classList.add(...r.classNames(r.uPopup.animationContainerShown({c:q})).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]),a(n,r,W()[t],t,o,q)},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:k,isAnchorClicked:o};D.call(void 0,n)}null==window||window.removeEventListener("mousedown",V)}},Z=()=>{"hiding"===te.current&&("shown"===te.previous||"reposition"===te.previous)&&I({...te,current:"hidden",previous:te.current}),E&&E.call(void 0,{target:_.current})},W=()=>{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 p=n-(u-l);return r=void 0,i=arguments,p<=0||p>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,p)),s}}((()=>{"hidden"!==te.current&&"hiding"!==te.current&&I({...k,current:"reposition",previous:te.current})}),16.666666666666668),Q=r.useZIndexContext()||0,X=l.useRef(),Y=l.useRef(),$=l.useRef(null),_=l.useRef(null),ee=l.useRef({}),ne=l.useRef(!1);l.useImperativeHandle(_,(()=>({element:$.current,setPosition:H,props:e}))),l.useImperativeHandle(n,(()=>_.current));const te=l.useMemo((()=>{const e={...k,props:{show:h,anchor:A,anchorAlign:s,appendTo:y,collision:o,popupAlign:u,className:N,popupClass:L,style:z,offset:p,contentKey:P}};return h?"hidden"===k.current||"hiding"===k.current?{...e,current:"showing",previous:k.current}:"showing"===k.current?{...e,current:"shown",previous:k.current}:"shown"!==k.current||f(p,k.props.offset)&&f(s,k.props.anchorAlign)&&f(y,k.props.appendTo)&&f(o,k.props.collision)&&f(u,k.props.popupAlign)&&f(z,k.props.style)&&A===k.props.anchor&&L===k.props.popupClass&&N===k.props.className?e:{...e,current:"reposition",previous:k.current}:"hiding"===k.current||"hidden"===k.current?{...e,current:"hidden",previous:k.current}:{...e,current:"hiding",previous:k.current}}),[h,A,s,y,o,u,N,L,z,p,P,k]);l.useEffect((()=>{"hiding"===te.current&&!ne.current&&$.current?(ne.current=!0,(e=>{if(!h){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",Z)):(ne.current=!1,"showing"===te.current&&$.current?F($.current):"hiding"===te.current&&$.current?Z():"reposition"===te.current&&"shown"===te.previous?setTimeout((()=>{I({...te,current:"shown",previous:te.current})}),0):"shown"===te.current&&ee.current.contentKey!==P&&$.current&&H($.current)),"reposition"===te.current&&("shown"===te.previous||"showing"===te.previous)&&$.current&&H($.current),ee.current={contentKey:P}}),[te]),l.useEffect((()=>("showing"===te.current&&$.current&&F($.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((h||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:q}),N),id:R,ref:$,style:{zIndex:e,...re}},l.createElement("div",{className:r.classNames(r.uPopup.animationChild({c:q})),style:{transitionDelay:"0ms"}},l.createElement("div",{role:O,className:r.classNames(r.uPopup.popup({c:q}),L)},j))));return null!==y?c.createPortal(n,oe):n}return null})),g={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/index.d.mts
CHANGED
|
@@ -129,6 +129,10 @@ export declare interface PopupAnimation {
|
|
|
129
129
|
* The duration of the closing animation in milliseconds. Defaults to `300ms`.
|
|
130
130
|
*/
|
|
131
131
|
closeDuration?: number;
|
|
132
|
+
/**
|
|
133
|
+
* The direction of the animation.
|
|
134
|
+
*/
|
|
135
|
+
direction?: 'left' | 'right' | 'up' | 'down';
|
|
132
136
|
}
|
|
133
137
|
|
|
134
138
|
/**
|
package/index.d.ts
CHANGED
|
@@ -129,6 +129,10 @@ export declare interface PopupAnimation {
|
|
|
129
129
|
* The duration of the closing animation in milliseconds. Defaults to `300ms`.
|
|
130
130
|
*/
|
|
131
131
|
closeDuration?: number;
|
|
132
|
+
/**
|
|
133
|
+
* The direction of the animation.
|
|
134
|
+
*/
|
|
135
|
+
direction?: 'left' | 'right' | 'up' | 'down';
|
|
132
136
|
}
|
|
133
137
|
|
|
134
138
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-popup",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.1.0-develop.2",
|
|
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.0.
|
|
30
|
+
"@progress/kendo-react-common": "10.1.0-develop.2",
|
|
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
|
},
|
|
@@ -40,10 +40,12 @@
|
|
|
40
40
|
"Progress",
|
|
41
41
|
"Popup",
|
|
42
42
|
"KendoReact",
|
|
43
|
+
"KendoReact Free",
|
|
43
44
|
"reactjs",
|
|
44
45
|
"UI",
|
|
45
46
|
"components",
|
|
46
47
|
"React component",
|
|
48
|
+
"free React component",
|
|
47
49
|
"Telerik"
|
|
48
50
|
],
|
|
49
51
|
"@progress": {
|