@progress/kendo-react-popup 8.3.0-develop.8 → 8.3.0
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/PopupWithoutContext.js +1 -1
- package/PopupWithoutContext.mjs +136 -155
- package/dist/cdn/js/kendo-react-popup.js +1 -1
- package/index.d.mts +29 -1
- package/index.d.ts +29 -1
- package/package-metadata.mjs +1 -1
- package/package.json +2 -2
package/PopupWithoutContext.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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react"),_=require("react-dom"),e=require("prop-types"),T=require("./animation.js"),l=require("@progress/kendo-react-common"),i=require("@progress/kendo-popup-common"),b=require("./util.js"),E=require("./package-metadata.js");function A(h){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>h[t]})}}return o.default=h,Object.freeze(o)}const O=A(D),N=A(_),M=100,x=1;function w(h,o){if(h===o)return!0;if(!!h!=!!o)return!1;const t=Object.getOwnPropertyNames(h),n=Object.getOwnPropertyNames(o);if(t.length!==n.length)return!1;for(let r=0;r<t.length;r++){const s=t[r];if(h[s]!==o[s])return!1}return!0}const R={left:-1e3,top:0},y=class y extends O.Component{constructor(o){super(o),this.context=0,this.state={current:"hidden",previous:"hidden",props:{}},this._popup=null,this.show=t=>{window==null||window.addEventListener("mousedown",this.handleMouseDown),this.setPosition(t),this.animate(t.firstChild,"enter",this.onOpened),this.setState({current:"shown",previous:this.state.current})},this.setPosition=t=>{const{anchorAlign:n,popupAlign:r,collision:s,offset:c,anchor:a,margin:u,scale:d,positionMode:f}=this.props,{width:g,height:m}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const P=i.alignElement({anchor:a,anchorAlign:n,element:t,elementAlign:r,offset:c,margin:u,positionMode:f,scale:d}),p=i.positionElement({anchor:a,anchorAlign:n,element:t,elementAlign:r,collisions:s,currentLocation:P,margin:this.props.margin});if(t.style.top=p.offset.top+"px",t.style.left=p.offset.left+"px",t.style.width=g,t.style.height=m,this._collisions={fit:p.fit,fitted:p.fitted,flip:p.flip,flipped:p.flipped},this.props.onPosition){const C={target:this,flipped:p.flipped,fitted:p.fitted};this.props.onPosition.call(void 0,C)}},this.onOpened=()=>{const t=this._popup;if(t){if(this.props.show){const{unstyled:n}=this.props,r=n&&n.uPopup;t.classList.add(...l.classNames(l.uPopup.animationContainerShown({c:r})).split(" ").filter(s=>s))}this.attachRepositionHandlers(t),this.props.onOpen&&this.props.onOpen.call(void 0,{target:this})}},this.animate=(t,n,r)=>{if(!this.props.popupAlign)return;let s;const{horizontal:c,vertical:a}=this.props.popupAlign;c==="left"&&a==="center"?s="right":c==="right"&&a==="center"?s="left":a==="top"?s="down":s="up";const u={down:"up",up:"down",left:"right",right:"left"};this._collisions&&this._collisions.flipped&&(s=u[s]);const{unstyled:d}=this.props,f=d&&d.uPopup;T.slide(t,s,this.animationDuration[n],n,r,f)},this.handleMouseDown=t=>{var s,c;const n=((s=t==null?void 0:t.target)==null?void 0:s.closest(".k-animation-container"))===null,r=((c=this.props.anchor)==null?void 0:c.contains(t==null?void 0:t.target))||!1;if(n){if(this.props.onMouseDownOutside){const a={target:this,event:t,state:this.state,isAnchorClicked:r};this.props.onMouseDownOutside.call(void 0,a)}window==null||window.removeEventListener("mousedown",this.handleMouseDown)}},this.onClosing=t=>{if(!this.props.show){const{unstyled:n}=this.props,r=n&&n.uPopup;t.classList.remove(...l.classNames(l.uPopup.animationContainerShown({c:r})).split(" ").filter(s=>s))}this.detachRepositionHandlers()},this.onClosed=()=>{this.state.current==="hiding"&&this.state.previous==="shown"&&this.setState({current:"hidden",previous:this.state.current}),this.props.onClose&&this.props.onClose.call(void 0,{target:this})},this.getCurrentZIndex=()=>this.context?this.context+x:M,l.validatePackage(E.packageMetadata),this.reposition=b.throttle(this.reposition.bind(this),b.FRAME_DURATION)}get element(){return this._popup}static getDerivedStateFromProps(o,t){const{show:n,anchor:r,anchorAlign:s,appendTo:c,collision:a,popupAlign:u,className:d,popupClass:f,style:g,offset:m,contentKey:P}=o,p={...t,props:{show:n,anchor:r,anchorAlign:s,appendTo:c,collision:a,popupAlign:u,className:d,popupClass:f,style:g,offset:m,contentKey:P}};return o.show?t.current==="hidden"||t.current==="hiding"?{...p,current:"showing",previous:t.current}:t.current==="showing"?{...p,current:"shown",previous:t.current}:t.current==="shown"&&(!w(m,t.props.offset)||!w(s,t.props.anchorAlign)||!w(c,t.props.appendTo)||!w(a,t.props.collision)||!w(u,t.props.popupAlign)||!w(g,t.props.style)||r!==t.props.anchor||f!==t.props.popupClass||d!==t.props.className)?{...p,current:"reposition",previous:t.current}:p:t.current==="hiding"||t.current==="hidden"?{...p,current:"hidden",previous:t.current}:{...p,current:"hiding",previous:t.current}}componentDidUpdate(o){this.state.current==="showing"&&this._popup?this.show(this._popup):this.state.current==="hiding"&&this._popup?(this.onClosing(this._popup),this.animate(this._popup.firstChild,"exit",this.onClosed)):this.state.current==="reposition"&&this.state.previous==="shown"?setTimeout(()=>{this.setState({current:"shown",previous:this.state.current})},0):this.state.current==="shown"&&o.contentKey!==this.props.contentKey&&this._popup&&this.setPosition(this._popup)}componentDidMount(){this.state.current==="showing"&&this._popup&&this.show(this._popup)}componentWillUnmount(){this.detachRepositionHandlers()}render(){const{children:o,className:t,popupClass:n,unstyled:r,show:s,id:c,positionMode:a}=this.props,u=r&&r.uPopup,d=this.props.appendTo?this.props.appendTo:l.canUseDOM?this.props.anchor&&this.props.anchor.ownerDocument?this.props.anchor.ownerDocument.body:document.body:void 0;this.state.current==="reposition"&&this.state.previous==="shown"&&this._popup&&this.setPosition(this._popup);const f=Object.assign({},{position:a,top:0,left:-1e4},this.props.style||{}),g=this.state.current==="hiding";if((s||g)&&d){const m=this.getCurrentZIndex(),P=O.createElement(l.ZIndexContext.Provider,{value:m},O.createElement("div",{onKeyDown:this.props.onKeyDown,className:l.classNames(l.uPopup.animationContainer({c:u}),t),id:c,ref:p=>this._popup=p,style:{zIndex:m,...f}},O.createElement("div",{className:l.classNames(l.uPopup.animationChild({c:u})),style:{transitionDelay:"0ms"}},O.createElement("div",{role:this.props.role,className:l.classNames(l.uPopup.popup({c:u}),n)},o))));return this.props.appendTo!==null?N.createPortal(P,d):P}return null}get animationDuration(){const o=this.props.animate;let t=0,n=0;return o&&(o===!0?t=n=300:(t=o.openDuration||0,n=o.closeDuration||0)),{enter:t,exit:n}}attachRepositionHandlers(o){this.detachRepositionHandlers(),this._scrollableParents=i.domUtils.scrollableParents(this.props.anchor||o),this._scrollableParents&&this._scrollableParents.map(t=>t.addEventListener("scroll",this.reposition)),window.addEventListener("resize",this.reposition)}detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(o=>o.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)}reposition(){this.setState({current:"reposition",previous:this.state.current})}};y.propTypes={anchor:function(o){const t=o.anchor;return t&&typeof t.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(o){const t=o.appendTo;return t&&typeof t.nodeType!="number"?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),id:e.string,popupClass:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),collision:e.shape({horizontal:e.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none]),vertical:e.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none])}),anchorAlign:e.shape({horizontal:e.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:e.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),popupAlign:e.shape({horizontal:e.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:e.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),offset:e.shape({left:e.number,top:e.number}),children:e.oneOfType([e.element,e.node]),show:e.bool,animate:e.oneOfType([e.bool,e.shape({openDuration:e.number,closeDuration:e.number})]),margin:e.shape({horizontal:e.number,vertical:e.number}),positionMode:e.oneOf(["fixed","absolute"]),scale:e.number,style:e.object,onClose:e.func,onPosition:e.func,onOpen:e.func,onKeyPress:e.func,onMouseDownOutside:e.func},y.defaultProps={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:R,animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},y.contextType=l.ZIndexContext,y.displayName="PopupComponent";let v=y;exports.PopupWithoutContext=v;
|
package/PopupWithoutContext.mjs
CHANGED
|
@@ -6,26 +6,26 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
10
|
-
import * as
|
|
9
|
+
import * as v from "react";
|
|
10
|
+
import * as A from "react-dom";
|
|
11
11
|
import e from "prop-types";
|
|
12
|
-
import { slide as
|
|
13
|
-
import { classNames as P, uPopup as
|
|
14
|
-
import { alignElement as
|
|
15
|
-
import { throttle as
|
|
16
|
-
import { packageMetadata as
|
|
17
|
-
const
|
|
18
|
-
function
|
|
19
|
-
if (
|
|
12
|
+
import { slide as C } from "./animation.mjs";
|
|
13
|
+
import { classNames as P, uPopup as O, validatePackage as E, ZIndexContext as D, canUseDOM as x } from "@progress/kendo-react-common";
|
|
14
|
+
import { alignElement as M, positionElement as N, Collision as d, AlignPoint as p, domUtils as z } from "@progress/kendo-popup-common";
|
|
15
|
+
import { throttle as R, FRAME_DURATION as L } from "./util.mjs";
|
|
16
|
+
import { packageMetadata as I } from "./package-metadata.mjs";
|
|
17
|
+
const S = 100, U = 1;
|
|
18
|
+
function w(b, o) {
|
|
19
|
+
if (b === o)
|
|
20
20
|
return !0;
|
|
21
|
-
if (!!
|
|
21
|
+
if (!!b != !!o)
|
|
22
22
|
return !1;
|
|
23
|
-
const t = Object.getOwnPropertyNames(
|
|
24
|
-
if (t.length !==
|
|
23
|
+
const t = Object.getOwnPropertyNames(b), s = Object.getOwnPropertyNames(o);
|
|
24
|
+
if (t.length !== s.length)
|
|
25
25
|
return !1;
|
|
26
26
|
for (let n = 0; n < t.length; n++) {
|
|
27
|
-
|
|
28
|
-
if (
|
|
27
|
+
const i = t[n];
|
|
28
|
+
if (b[i] !== o[i])
|
|
29
29
|
return !1;
|
|
30
30
|
}
|
|
31
31
|
return !0;
|
|
@@ -33,85 +33,96 @@ function v(O, i) {
|
|
|
33
33
|
const K = {
|
|
34
34
|
left: -1e3,
|
|
35
35
|
top: 0
|
|
36
|
-
},
|
|
37
|
-
constructor(
|
|
38
|
-
super(
|
|
39
|
-
this.setPosition(t), this.animate(t.firstChild, "enter", this.onOpened), this.setState({ current: "shown", previous: this.state.current });
|
|
36
|
+
}, y = class y extends v.Component {
|
|
37
|
+
constructor(o) {
|
|
38
|
+
super(o), this.context = 0, this.state = { current: "hidden", previous: "hidden", props: {} }, this._popup = null, this.show = (t) => {
|
|
39
|
+
window == null || window.addEventListener("mousedown", this.handleMouseDown), this.setPosition(t), this.animate(t.firstChild, "enter", this.onOpened), this.setState({ current: "shown", previous: this.state.current });
|
|
40
40
|
}, this.setPosition = (t) => {
|
|
41
|
-
|
|
42
|
-
const { width: m, height: d } = t.style;
|
|
41
|
+
const { anchorAlign: s, popupAlign: n, collision: i, offset: a, anchor: l, margin: h, scale: c, positionMode: u } = this.props, { width: m, height: f } = t.style;
|
|
43
42
|
t.style.width = t.offsetWidth + "px", t.style.height = t.offsetHeight + "px";
|
|
44
|
-
const g =
|
|
43
|
+
const g = M({
|
|
45
44
|
anchor: l,
|
|
46
|
-
anchorAlign:
|
|
45
|
+
anchorAlign: s,
|
|
47
46
|
element: t,
|
|
48
47
|
elementAlign: n,
|
|
49
|
-
offset:
|
|
50
|
-
margin:
|
|
48
|
+
offset: a,
|
|
49
|
+
margin: h,
|
|
51
50
|
positionMode: u,
|
|
52
|
-
scale:
|
|
53
|
-
}), r =
|
|
51
|
+
scale: c
|
|
52
|
+
}), r = N({
|
|
54
53
|
anchor: l,
|
|
55
|
-
anchorAlign:
|
|
54
|
+
anchorAlign: s,
|
|
56
55
|
element: t,
|
|
57
56
|
elementAlign: n,
|
|
58
|
-
collisions:
|
|
57
|
+
collisions: i,
|
|
59
58
|
currentLocation: g,
|
|
60
59
|
margin: this.props.margin
|
|
61
60
|
});
|
|
62
|
-
if (t.style.top = r.offset.top + "px", t.style.left = r.offset.left + "px", t.style.width = m, t.style.height =
|
|
61
|
+
if (t.style.top = r.offset.top + "px", t.style.left = r.offset.left + "px", t.style.width = m, t.style.height = f, this._collisions = {
|
|
63
62
|
fit: r.fit,
|
|
64
63
|
fitted: r.fitted,
|
|
65
64
|
flip: r.flip,
|
|
66
65
|
flipped: r.flipped
|
|
67
66
|
}, this.props.onPosition) {
|
|
68
|
-
const
|
|
67
|
+
const T = {
|
|
69
68
|
target: this,
|
|
70
69
|
flipped: r.flipped,
|
|
71
70
|
fitted: r.fitted
|
|
72
71
|
};
|
|
73
|
-
this.props.onPosition.call(void 0,
|
|
72
|
+
this.props.onPosition.call(void 0, T);
|
|
74
73
|
}
|
|
75
74
|
}, this.onOpened = () => {
|
|
76
75
|
const t = this._popup;
|
|
77
76
|
if (t) {
|
|
78
77
|
if (this.props.show) {
|
|
79
|
-
const { unstyled:
|
|
80
|
-
t.classList.add(
|
|
78
|
+
const { unstyled: s } = this.props, n = s && s.uPopup;
|
|
79
|
+
t.classList.add(
|
|
80
|
+
...P(O.animationContainerShown({ c: n })).split(" ").filter((i) => i)
|
|
81
|
+
);
|
|
81
82
|
}
|
|
82
83
|
this.attachRepositionHandlers(t), this.props.onOpen && this.props.onOpen.call(void 0, { target: this });
|
|
83
84
|
}
|
|
84
|
-
}, this.animate = (t,
|
|
85
|
+
}, this.animate = (t, s, n) => {
|
|
85
86
|
if (!this.props.popupAlign)
|
|
86
87
|
return;
|
|
87
|
-
let
|
|
88
|
-
const { horizontal:
|
|
89
|
-
|
|
90
|
-
const
|
|
88
|
+
let i;
|
|
89
|
+
const { horizontal: a, vertical: l } = this.props.popupAlign;
|
|
90
|
+
a === "left" && l === "center" ? i = "right" : a === "right" && l === "center" ? i = "left" : l === "top" ? i = "down" : i = "up";
|
|
91
|
+
const h = {
|
|
91
92
|
down: "up",
|
|
92
93
|
up: "down",
|
|
93
94
|
left: "right",
|
|
94
95
|
right: "left"
|
|
95
96
|
};
|
|
96
|
-
this._collisions && this._collisions.flipped && (
|
|
97
|
-
const { unstyled:
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
97
|
+
this._collisions && this._collisions.flipped && (i = h[i]);
|
|
98
|
+
const { unstyled: c } = this.props, u = c && c.uPopup;
|
|
99
|
+
C(t, i, this.animationDuration[s], s, n, u);
|
|
100
|
+
}, this.handleMouseDown = (t) => {
|
|
101
|
+
var i, a;
|
|
102
|
+
const s = ((i = t == null ? void 0 : t.target) == null ? void 0 : i.closest(".k-animation-container")) === null, n = ((a = this.props.anchor) == null ? void 0 : a.contains(t == null ? void 0 : t.target)) || !1;
|
|
103
|
+
if (s) {
|
|
104
|
+
if (this.props.onMouseDownOutside) {
|
|
105
|
+
const l = {
|
|
106
|
+
target: this,
|
|
107
|
+
event: t,
|
|
108
|
+
state: this.state,
|
|
109
|
+
isAnchorClicked: n
|
|
110
|
+
};
|
|
111
|
+
this.props.onMouseDownOutside.call(void 0, l);
|
|
112
|
+
}
|
|
113
|
+
window == null || window.removeEventListener("mousedown", this.handleMouseDown);
|
|
114
|
+
}
|
|
106
115
|
}, this.onClosing = (t) => {
|
|
107
116
|
if (!this.props.show) {
|
|
108
|
-
const { unstyled:
|
|
109
|
-
t.classList.remove(
|
|
117
|
+
const { unstyled: s } = this.props, n = s && s.uPopup;
|
|
118
|
+
t.classList.remove(
|
|
119
|
+
...P(O.animationContainerShown({ c: n })).split(" ").filter((i) => i)
|
|
120
|
+
);
|
|
110
121
|
}
|
|
111
122
|
this.detachRepositionHandlers();
|
|
112
123
|
}, this.onClosed = () => {
|
|
113
124
|
this.state.current === "hiding" && this.state.previous === "shown" && this.setState({ current: "hidden", previous: this.state.current }), this.props.onClose && this.props.onClose.call(void 0, { target: this });
|
|
114
|
-
}, this.getCurrentZIndex = () => this.context ? this.context + U :
|
|
125
|
+
}, this.getCurrentZIndex = () => this.context ? this.context + U : S, E(I), this.reposition = R(this.reposition.bind(this), L);
|
|
115
126
|
}
|
|
116
127
|
/**
|
|
117
128
|
* Represents the Popup DOM element.
|
|
@@ -122,33 +133,45 @@ const K = {
|
|
|
122
133
|
/**
|
|
123
134
|
* @hidden
|
|
124
135
|
*/
|
|
125
|
-
static getDerivedStateFromProps(
|
|
126
|
-
const {
|
|
136
|
+
static getDerivedStateFromProps(o, t) {
|
|
137
|
+
const {
|
|
138
|
+
show: s,
|
|
139
|
+
anchor: n,
|
|
140
|
+
anchorAlign: i,
|
|
141
|
+
appendTo: a,
|
|
142
|
+
collision: l,
|
|
143
|
+
popupAlign: h,
|
|
144
|
+
className: c,
|
|
145
|
+
popupClass: u,
|
|
146
|
+
style: m,
|
|
147
|
+
offset: f,
|
|
148
|
+
contentKey: g
|
|
149
|
+
} = o, r = {
|
|
127
150
|
...t,
|
|
128
151
|
props: {
|
|
129
|
-
show:
|
|
152
|
+
show: s,
|
|
130
153
|
anchor: n,
|
|
131
|
-
anchorAlign:
|
|
132
|
-
appendTo:
|
|
154
|
+
anchorAlign: i,
|
|
155
|
+
appendTo: a,
|
|
133
156
|
collision: l,
|
|
134
|
-
popupAlign:
|
|
135
|
-
className:
|
|
157
|
+
popupAlign: h,
|
|
158
|
+
className: c,
|
|
136
159
|
popupClass: u,
|
|
137
160
|
style: m,
|
|
138
|
-
offset:
|
|
161
|
+
offset: f,
|
|
139
162
|
contentKey: g
|
|
140
163
|
}
|
|
141
164
|
};
|
|
142
|
-
return
|
|
165
|
+
return o.show ? t.current === "hidden" || t.current === "hiding" ? { ...r, current: "showing", previous: t.current } : t.current === "showing" ? { ...r, current: "shown", previous: t.current } : t.current === "shown" && (!w(f, t.props.offset) || !w(i, t.props.anchorAlign) || !w(a, t.props.appendTo) || !w(l, t.props.collision) || !w(h, t.props.popupAlign) || !w(m, t.props.style) || n !== t.props.anchor || u !== t.props.popupClass || c !== t.props.className) ? { ...r, current: "reposition", previous: t.current } : r : t.current === "hiding" || t.current === "hidden" ? { ...r, current: "hidden", previous: t.current } : { ...r, current: "hiding", previous: t.current };
|
|
143
166
|
}
|
|
144
167
|
/**
|
|
145
168
|
*
|
|
146
169
|
* @hidden
|
|
147
170
|
*/
|
|
148
|
-
componentDidUpdate(
|
|
171
|
+
componentDidUpdate(o) {
|
|
149
172
|
this.state.current === "showing" && this._popup ? this.show(this._popup) : this.state.current === "hiding" && this._popup ? (this.onClosing(this._popup), this.animate(this._popup.firstChild, "exit", this.onClosed)) : this.state.current === "reposition" && this.state.previous === "shown" ? setTimeout(() => {
|
|
150
173
|
this.setState({ current: "shown", previous: this.state.current });
|
|
151
|
-
}, 0) : this.state.current === "shown" &&
|
|
174
|
+
}, 0) : this.state.current === "shown" && o.contentKey !== this.props.contentKey && this._popup && this.setPosition(this._popup);
|
|
152
175
|
}
|
|
153
176
|
/**
|
|
154
177
|
* @hidden
|
|
@@ -166,130 +189,90 @@ const K = {
|
|
|
166
189
|
* @hidden
|
|
167
190
|
*/
|
|
168
191
|
render() {
|
|
169
|
-
const {
|
|
170
|
-
children: i,
|
|
171
|
-
className: t,
|
|
172
|
-
popupClass: o,
|
|
173
|
-
unstyled: n,
|
|
174
|
-
show: s,
|
|
175
|
-
id: c,
|
|
176
|
-
positionMode: l
|
|
177
|
-
} = this.props, a = n && n.uPopup, h = this.props.appendTo ? this.props.appendTo : x ? this.props.anchor && this.props.anchor.ownerDocument ? this.props.anchor.ownerDocument.body : document.body : void 0;
|
|
192
|
+
const { children: o, className: t, popupClass: s, unstyled: n, show: i, id: a, positionMode: l } = this.props, h = n && n.uPopup, c = this.props.appendTo ? this.props.appendTo : x ? this.props.anchor && this.props.anchor.ownerDocument ? this.props.anchor.ownerDocument.body : document.body : void 0;
|
|
178
193
|
this.state.current === "reposition" && this.state.previous === "shown" && this._popup && this.setPosition(this._popup);
|
|
179
194
|
const u = Object.assign(
|
|
180
195
|
{},
|
|
181
196
|
{ position: l, top: 0, left: -1e4 },
|
|
182
197
|
this.props.style || {}
|
|
183
198
|
), m = this.state.current === "hiding";
|
|
184
|
-
if ((
|
|
185
|
-
const
|
|
199
|
+
if ((i || m) && c) {
|
|
200
|
+
const f = this.getCurrentZIndex(), g = /* @__PURE__ */ v.createElement(D.Provider, { value: f }, /* @__PURE__ */ v.createElement(
|
|
186
201
|
"div",
|
|
187
202
|
{
|
|
188
203
|
onKeyDown: this.props.onKeyDown,
|
|
189
|
-
className: P(
|
|
190
|
-
id:
|
|
204
|
+
className: P(O.animationContainer({ c: h }), t),
|
|
205
|
+
id: a,
|
|
191
206
|
ref: (r) => this._popup = r,
|
|
192
207
|
style: {
|
|
193
|
-
zIndex:
|
|
208
|
+
zIndex: f,
|
|
194
209
|
...u
|
|
195
210
|
}
|
|
196
211
|
},
|
|
197
|
-
/* @__PURE__ */
|
|
212
|
+
/* @__PURE__ */ v.createElement(
|
|
198
213
|
"div",
|
|
199
214
|
{
|
|
200
|
-
|
|
201
|
-
|
|
215
|
+
className: P(O.animationChild({ c: h })),
|
|
216
|
+
style: { transitionDelay: "0ms" }
|
|
202
217
|
},
|
|
203
|
-
|
|
204
|
-
|
|
218
|
+
/* @__PURE__ */ v.createElement(
|
|
219
|
+
"div",
|
|
220
|
+
{
|
|
221
|
+
role: this.props.role,
|
|
222
|
+
className: P(O.popup({ c: h }), s)
|
|
223
|
+
},
|
|
224
|
+
o
|
|
225
|
+
)
|
|
226
|
+
)
|
|
205
227
|
));
|
|
206
|
-
return this.props.appendTo !== null ?
|
|
228
|
+
return this.props.appendTo !== null ? A.createPortal(g, c) : g;
|
|
207
229
|
}
|
|
208
230
|
return null;
|
|
209
231
|
}
|
|
210
232
|
get animationDuration() {
|
|
211
|
-
const
|
|
212
|
-
let t = 0,
|
|
213
|
-
return
|
|
233
|
+
const o = this.props.animate;
|
|
234
|
+
let t = 0, s = 0;
|
|
235
|
+
return o && (o === !0 ? t = s = 300 : (t = o.openDuration || 0, s = o.closeDuration || 0)), { enter: t, exit: s };
|
|
214
236
|
}
|
|
215
|
-
attachRepositionHandlers(
|
|
216
|
-
this.detachRepositionHandlers(), this._scrollableParents =
|
|
237
|
+
attachRepositionHandlers(o) {
|
|
238
|
+
this.detachRepositionHandlers(), this._scrollableParents = z.scrollableParents(this.props.anchor || o), this._scrollableParents && this._scrollableParents.map((t) => t.addEventListener("scroll", this.reposition)), window.addEventListener("resize", this.reposition);
|
|
217
239
|
}
|
|
218
240
|
detachRepositionHandlers() {
|
|
219
|
-
this._scrollableParents && (this._scrollableParents.map((
|
|
241
|
+
this._scrollableParents && (this._scrollableParents.map((o) => o.removeEventListener("scroll", this.reposition)), this._scrollableParents = void 0), window.removeEventListener("resize", this.reposition);
|
|
220
242
|
}
|
|
221
243
|
reposition() {
|
|
222
244
|
this.setState({ current: "reposition", previous: this.state.current });
|
|
223
245
|
}
|
|
224
246
|
};
|
|
225
|
-
|
|
226
|
-
anchor: function(
|
|
227
|
-
const t =
|
|
228
|
-
return t && typeof t.nodeType != "number" ? new Error(
|
|
229
|
-
"Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."
|
|
230
|
-
) : null;
|
|
247
|
+
y.propTypes = {
|
|
248
|
+
anchor: function(o) {
|
|
249
|
+
const t = o.anchor;
|
|
250
|
+
return t && typeof t.nodeType != "number" ? new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed.") : null;
|
|
231
251
|
},
|
|
232
|
-
appendTo: function(
|
|
233
|
-
const t =
|
|
234
|
-
return t && typeof t.nodeType != "number" ? new Error(
|
|
235
|
-
"Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."
|
|
236
|
-
) : null;
|
|
252
|
+
appendTo: function(o) {
|
|
253
|
+
const t = o.appendTo;
|
|
254
|
+
return t && typeof t.nodeType != "number" ? new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed.") : null;
|
|
237
255
|
},
|
|
238
|
-
className: e.oneOfType([
|
|
239
|
-
e.string,
|
|
240
|
-
e.arrayOf(e.string),
|
|
241
|
-
e.object
|
|
242
|
-
]),
|
|
256
|
+
className: e.oneOfType([e.string, e.arrayOf(e.string), e.object]),
|
|
243
257
|
id: e.string,
|
|
244
|
-
popupClass: e.oneOfType([
|
|
245
|
-
e.string,
|
|
246
|
-
e.arrayOf(e.string),
|
|
247
|
-
e.object
|
|
248
|
-
]),
|
|
258
|
+
popupClass: e.oneOfType([e.string, e.arrayOf(e.string), e.object]),
|
|
249
259
|
collision: e.shape({
|
|
250
|
-
horizontal: e.oneOf([
|
|
251
|
-
|
|
252
|
-
f.flip,
|
|
253
|
-
f.none
|
|
254
|
-
]),
|
|
255
|
-
vertical: e.oneOf([
|
|
256
|
-
f.fit,
|
|
257
|
-
f.flip,
|
|
258
|
-
f.none
|
|
259
|
-
])
|
|
260
|
+
horizontal: e.oneOf([d.fit, d.flip, d.none]),
|
|
261
|
+
vertical: e.oneOf([d.fit, d.flip, d.none])
|
|
260
262
|
}),
|
|
261
263
|
anchorAlign: e.shape({
|
|
262
|
-
horizontal: e.oneOf([
|
|
263
|
-
|
|
264
|
-
p.center,
|
|
265
|
-
p.right
|
|
266
|
-
]),
|
|
267
|
-
vertical: e.oneOf([
|
|
268
|
-
p.top,
|
|
269
|
-
p.center,
|
|
270
|
-
p.bottom
|
|
271
|
-
])
|
|
264
|
+
horizontal: e.oneOf([p.left, p.center, p.right]),
|
|
265
|
+
vertical: e.oneOf([p.top, p.center, p.bottom])
|
|
272
266
|
}),
|
|
273
267
|
popupAlign: e.shape({
|
|
274
|
-
horizontal: e.oneOf([
|
|
275
|
-
|
|
276
|
-
p.center,
|
|
277
|
-
p.right
|
|
278
|
-
]),
|
|
279
|
-
vertical: e.oneOf([
|
|
280
|
-
p.top,
|
|
281
|
-
p.center,
|
|
282
|
-
p.bottom
|
|
283
|
-
])
|
|
268
|
+
horizontal: e.oneOf([p.left, p.center, p.right]),
|
|
269
|
+
vertical: e.oneOf([p.top, p.center, p.bottom])
|
|
284
270
|
}),
|
|
285
271
|
offset: e.shape({
|
|
286
272
|
left: e.number,
|
|
287
273
|
top: e.number
|
|
288
274
|
}),
|
|
289
|
-
children: e.oneOfType([
|
|
290
|
-
e.element,
|
|
291
|
-
e.node
|
|
292
|
-
]),
|
|
275
|
+
children: e.oneOfType([e.element, e.node]),
|
|
293
276
|
show: e.bool,
|
|
294
277
|
animate: e.oneOfType([
|
|
295
278
|
e.bool,
|
|
@@ -302,20 +285,18 @@ w.propTypes = {
|
|
|
302
285
|
horizontal: e.number,
|
|
303
286
|
vertical: e.number
|
|
304
287
|
}),
|
|
305
|
-
positionMode: e.oneOf([
|
|
306
|
-
"fixed",
|
|
307
|
-
"absolute"
|
|
308
|
-
]),
|
|
288
|
+
positionMode: e.oneOf(["fixed", "absolute"]),
|
|
309
289
|
scale: e.number,
|
|
310
290
|
style: e.object,
|
|
311
291
|
onClose: e.func,
|
|
312
292
|
onPosition: e.func,
|
|
313
293
|
onOpen: e.func,
|
|
314
|
-
onKeyPress: e.func
|
|
315
|
-
|
|
294
|
+
onKeyPress: e.func,
|
|
295
|
+
onMouseDownOutside: e.func
|
|
296
|
+
}, y.defaultProps = {
|
|
316
297
|
collision: {
|
|
317
|
-
horizontal:
|
|
318
|
-
vertical:
|
|
298
|
+
horizontal: d.fit,
|
|
299
|
+
vertical: d.flip
|
|
319
300
|
},
|
|
320
301
|
anchorAlign: {
|
|
321
302
|
horizontal: p.left,
|
|
@@ -333,8 +314,8 @@ w.propTypes = {
|
|
|
333
314
|
vertical: 0
|
|
334
315
|
},
|
|
335
316
|
positionMode: "absolute"
|
|
336
|
-
},
|
|
337
|
-
let
|
|
317
|
+
}, y.contextType = D, y.displayName = "PopupComponent";
|
|
318
|
+
let _ = y;
|
|
338
319
|
export {
|
|
339
|
-
|
|
320
|
+
_ as PopupWithoutContext
|
|
340
321
|
};
|
|
@@ -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
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(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"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactPopup={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactCommon,t.KendoPopupCommon)}(this,(function(t,e,o,n,i,s){"use strict";function r(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var p=r(e),l=r(o);const a=(t,e,o)=>{t.style.transitionDuration="",e&&t.classList.remove(...e.split(" ")),e&&t.classList.remove(...o.split(" "))},c="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),u={name:"@progress/kendo-react-popup",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};function h(t,e){if(t===e)return!0;if(!!t!=!!e)return!1;const o=Object.getOwnPropertyNames(t),n=Object.getOwnPropertyNames(e);if(o.length!==n.length)return!1;for(let n=0;n<o.length;n++){let i=o[n];if(t[i]!==e[i])return!1}return!0}const d=class extends p.Component{constructor(t){super(t),this.context=0,this.state={current:"hidden",previous:"hidden",props:{}},this._popup=null,this.show=t=>{this.setPosition(t),this.animate(t.firstChild,"enter",this.onOpened),this.setState({current:"shown",previous:this.state.current})},this.setPosition=t=>{let{anchorAlign:e,popupAlign:o,collision:n,offset:i,anchor:r,margin:p,scale:l,positionMode:a}=this.props;const{width:c,height:u}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const h=s.alignElement({anchor:r,anchorAlign:e,element:t,elementAlign:o,offset:i,margin:p,positionMode:a,scale:l}),d=s.positionElement({anchor:r,anchorAlign:e,element:t,elementAlign:o,collisions:n,currentLocation:h,margin:this.props.margin});if(t.style.top=d.offset.top+"px",t.style.left=d.offset.left+"px",t.style.width=c,t.style.height=u,this._collisions={fit:d.fit,fitted:d.fitted,flip:d.flip,flipped:d.flipped},this.props.onPosition){const t={target:this,flipped:d.flipped,fitted:d.fitted};this.props.onPosition.call(void 0,t)}},this.onOpened=()=>{const t=this._popup;if(t){if(this.props.show){const{unstyled:e}=this.props,o=e&&e.uPopup;t.classList.add(...i.classNames(i.uPopup.animationContainerShown({c:o})).split(" ").filter((t=>t)))}this.attachRepositionHandlers(t),this.props.onOpen&&this.props.onOpen.call(void 0,{target:this})}},this.animate=(t,e,o)=>{if(!this.props.popupAlign)return;let n;const{horizontal:s,vertical:r}=this.props.popupAlign;n="left"===s&&"center"===r?"right":"right"===s&&"center"===r?"left":"top"===r?"down":"up";this._collisions&&this._collisions.flipped&&(n={down:"up",up:"down",left:"right",right:"left"}[n]);const{unstyled:p}=this.props,l=p&&p.uPopup;((t,e,o,n,s,r)=>{if(0===o)return s();const p=i.classNames(i.uPopup.slide({direction:e,type:n,c:r})),l=i.classNames(i.uPopup.slideActive({direction:e,type:n,c:r})),u=e=>{e.target===t&&(t.removeEventListener("transitionend",u),a(t,p,l),t.style.display="exit"===n?"none":"",s())};t.addEventListener("transitionend",u);const h=t.ownerDocument;if(!h)return;const d=h.defaultView;if(!d)return;const f=()=>{a(t,p,l),p&&t.classList.add(...p.split(" ").filter((t=>t))),d.requestAnimationFrame((()=>{t.style.transitionDuration=o+"ms",t.classList.add(...l.split(" ").filter((t=>t)))}))};c?d.requestAnimationFrame(f):f()})(t,n,this.animationDuration[e],e,o,l)},this.onClosing=t=>{if(!this.props.show){const{unstyled:e}=this.props,o=e&&e.uPopup;t.classList.remove(...i.classNames(i.uPopup.animationContainerShown({c:o})).split(" ").filter((t=>t)))}this.detachRepositionHandlers()},this.onClosed=()=>{"hiding"===this.state.current&&"shown"===this.state.previous&&this.setState({current:"hidden",previous:this.state.current}),this.props.onClose&&this.props.onClose.call(void 0,{target:this})},this.getCurrentZIndex=()=>this.context?this.context+1:100,i.validatePackage(u),this.reposition=function(t,e,o={}){let n,i,s,r,p=0;o=o||{};const l=function(){p=!1===o.leading?0:(new Date).getTime(),n=void 0,r=t.apply(i,s),n||(i=s=null)};return function(){const a=(new Date).getTime();!p&&!1===o.leading&&(p=a);const c=e-(a-p);return i=void 0,s=arguments,c<=0||c>e?(n&&(clearTimeout(n),n=void 0),p=a,r=t.apply(i,s),n||(i=s=null)):!n&&!1!==o.trailing&&(n=window.setTimeout(l,c)),r}}(this.reposition.bind(this),16.666666666666668)}get element(){return this._popup}static getDerivedStateFromProps(t,e){const{show:o,anchor:n,anchorAlign:i,appendTo:s,collision:r,popupAlign:p,className:l,popupClass:a,style:c,offset:u,contentKey:d}=t,f={...e,props:{show:o,anchor:n,anchorAlign:i,appendTo:s,collision:r,popupAlign:p,className:l,popupClass:a,style:c,offset:u,contentKey:d}};return t.show?"hidden"===e.current||"hiding"===e.current?{...f,current:"showing",previous:e.current}:"showing"===e.current?{...f,current:"shown",previous:e.current}:"shown"!==e.current||h(u,e.props.offset)&&h(i,e.props.anchorAlign)&&h(s,e.props.appendTo)&&h(r,e.props.collision)&&h(p,e.props.popupAlign)&&h(c,e.props.style)&&n===e.props.anchor&&a===e.props.popupClass&&l===e.props.className?f:{...f,current:"reposition",previous:e.current}:"hiding"===e.current||"hidden"===e.current?{...f,current:"hidden",previous:e.current}:{...f,current:"hiding",previous:e.current}}componentDidUpdate(t){"showing"===this.state.current&&this._popup?this.show(this._popup):"hiding"===this.state.current&&this._popup?(this.onClosing(this._popup),this.animate(this._popup.firstChild,"exit",this.onClosed)):"reposition"===this.state.current&&"shown"===this.state.previous?setTimeout((()=>{this.setState({current:"shown",previous:this.state.current})}),0):"shown"===this.state.current&&t.contentKey!==this.props.contentKey&&this._popup&&this.setPosition(this._popup)}componentDidMount(){"showing"===this.state.current&&this._popup&&this.show(this._popup)}componentWillUnmount(){this.detachRepositionHandlers()}render(){const{children:t,className:e,popupClass:o,unstyled:n,show:s,id:r,positionMode:a}=this.props,c=n&&n.uPopup,u=this.props.appendTo?this.props.appendTo:i.canUseDOM?this.props.anchor&&this.props.anchor.ownerDocument?this.props.anchor.ownerDocument.body:document.body:void 0;"reposition"===this.state.current&&"shown"===this.state.previous&&this._popup&&this.setPosition(this._popup);const h=Object.assign({},{position:a,top:0,left:-1e4},this.props.style||{}),d="hiding"===this.state.current;if((s||d)&&u){const n=this.getCurrentZIndex(),s=p.createElement(i.ZIndexContext.Provider,{value:n},p.createElement("div",{onKeyDown:this.props.onKeyDown,className:i.classNames(i.uPopup.animationContainer({c:c}),e),id:r,ref:t=>this._popup=t,style:{zIndex:n,...h}},p.createElement("div",{className:i.classNames(i.uPopup.animationChild({c:c})),style:{transitionDelay:"0ms"}},p.createElement("div",{role:this.props.role,className:i.classNames(i.uPopup.popup({c:c}),o)},t))));return null!==this.props.appendTo?l.createPortal(s,u):s}return null}get animationDuration(){const t=this.props.animate;let e=0,o=0;return t&&(!0===t?e=o=300:(e=t.openDuration||0,o=t.closeDuration||0)),{enter:e,exit:o}}attachRepositionHandlers(t){this.detachRepositionHandlers(),this._scrollableParents=s.domUtils.scrollableParents(this.props.anchor||t),this._scrollableParents&&this._scrollableParents.map((t=>t.addEventListener("scroll",this.reposition))),window.addEventListener("resize",this.reposition)}detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map((t=>t.removeEventListener("scroll",this.reposition))),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)}reposition(){this.setState({current:"reposition",previous:this.state.current})}};d.propTypes={anchor:function(t){const e=t.anchor;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(t){const e=t.appendTo;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),id:n.string,popupClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),collision:n.shape({horizontal:n.oneOf([s.Collision.fit,s.Collision.flip,s.Collision.none]),vertical:n.oneOf([s.Collision.fit,s.Collision.flip,s.Collision.none])}),anchorAlign:n.shape({horizontal:n.oneOf([s.AlignPoint.left,s.AlignPoint.center,s.AlignPoint.right]),vertical:n.oneOf([s.AlignPoint.top,s.AlignPoint.center,s.AlignPoint.bottom])}),popupAlign:n.shape({horizontal:n.oneOf([s.AlignPoint.left,s.AlignPoint.center,s.AlignPoint.right]),vertical:n.oneOf([s.AlignPoint.top,s.AlignPoint.center,s.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,onKeyPress:n.func},d.defaultProps={collision:{horizontal:s.Collision.fit,vertical:s.Collision.flip},anchorAlign:{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.bottom},popupAlign:{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.top},offset:{left:-1e3,top:0},animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},d.contextType=i.ZIndexContext,d.displayName="PopupComponent";let f=d;const m=p.createContext((t=>t)),g=p.forwardRef(((t,e)=>{const o=p.useContext(m),n=i.useUnstyled(),s=o.call(void 0,t);return p.createElement(f,{ref:e,unstyled:n,...s})}));g.displayName="Popup",t.Popup=g,t.PopupPropsContext=m,t.PopupWithoutContext=f}));
|
|
8
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(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"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactPopup={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactCommon,t.KendoPopupCommon)}(this,(function(t,e,o,n,i,s){"use strict";function r(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var p=r(e),l=r(o);const a=(t,e,o)=>{t.style.transitionDuration="",e&&t.classList.remove(...e.split(" ")),e&&t.classList.remove(...o.split(" "))},c="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),u={name:"@progress/kendo-react-popup",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};function h(t,e){if(t===e)return!0;if(!!t!=!!e)return!1;const o=Object.getOwnPropertyNames(t),n=Object.getOwnPropertyNames(e);if(o.length!==n.length)return!1;for(let n=0;n<o.length;n++){const i=o[n];if(t[i]!==e[i])return!1}return!0}const d=class extends p.Component{constructor(t){super(t),this.context=0,this.state={current:"hidden",previous:"hidden",props:{}},this._popup=null,this.show=t=>{null==window||window.addEventListener("mousedown",this.handleMouseDown),this.setPosition(t),this.animate(t.firstChild,"enter",this.onOpened),this.setState({current:"shown",previous:this.state.current})},this.setPosition=t=>{const{anchorAlign:e,popupAlign:o,collision:n,offset:i,anchor:r,margin:p,scale:l,positionMode:a}=this.props,{width:c,height:u}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const h=s.alignElement({anchor:r,anchorAlign:e,element:t,elementAlign:o,offset:i,margin:p,positionMode:a,scale:l}),d=s.positionElement({anchor:r,anchorAlign:e,element:t,elementAlign:o,collisions:n,currentLocation:h,margin:this.props.margin});if(t.style.top=d.offset.top+"px",t.style.left=d.offset.left+"px",t.style.width=c,t.style.height=u,this._collisions={fit:d.fit,fitted:d.fitted,flip:d.flip,flipped:d.flipped},this.props.onPosition){const t={target:this,flipped:d.flipped,fitted:d.fitted};this.props.onPosition.call(void 0,t)}},this.onOpened=()=>{const t=this._popup;if(t){if(this.props.show){const{unstyled:e}=this.props,o=e&&e.uPopup;t.classList.add(...i.classNames(i.uPopup.animationContainerShown({c:o})).split(" ").filter((t=>t)))}this.attachRepositionHandlers(t),this.props.onOpen&&this.props.onOpen.call(void 0,{target:this})}},this.animate=(t,e,o)=>{if(!this.props.popupAlign)return;let n;const{horizontal:s,vertical:r}=this.props.popupAlign;n="left"===s&&"center"===r?"right":"right"===s&&"center"===r?"left":"top"===r?"down":"up";this._collisions&&this._collisions.flipped&&(n={down:"up",up:"down",left:"right",right:"left"}[n]);const{unstyled:p}=this.props,l=p&&p.uPopup;((t,e,o,n,s,r)=>{if(0===o)return s();const p=i.classNames(i.uPopup.slide({direction:e,type:n,c:r})),l=i.classNames(i.uPopup.slideActive({direction:e,type:n,c:r})),u=e=>{e.target===t&&(t.removeEventListener("transitionend",u),a(t,p,l),t.style.display="exit"===n?"none":"",s())};t.addEventListener("transitionend",u);const h=t.ownerDocument;if(!h)return;const d=h.defaultView;if(!d)return;const f=()=>{a(t,p,l),p&&t.classList.add(...p.split(" ").filter((t=>t))),d.requestAnimationFrame((()=>{t.style.transitionDuration=o+"ms",t.classList.add(...l.split(" ").filter((t=>t)))}))};c?d.requestAnimationFrame(f):f()})(t,n,this.animationDuration[e],e,o,l)},this.handleMouseDown=t=>{var e,o;const n=null===(null==(e=null==t?void 0:t.target)?void 0:e.closest(".k-animation-container")),i=(null==(o=this.props.anchor)?void 0:o.contains(null==t?void 0:t.target))||!1;if(n){if(this.props.onMouseDownOutside){const e={target:this,event:t,state:this.state,isAnchorClicked:i};this.props.onMouseDownOutside.call(void 0,e)}null==window||window.removeEventListener("mousedown",this.handleMouseDown)}},this.onClosing=t=>{if(!this.props.show){const{unstyled:e}=this.props,o=e&&e.uPopup;t.classList.remove(...i.classNames(i.uPopup.animationContainerShown({c:o})).split(" ").filter((t=>t)))}this.detachRepositionHandlers()},this.onClosed=()=>{"hiding"===this.state.current&&"shown"===this.state.previous&&this.setState({current:"hidden",previous:this.state.current}),this.props.onClose&&this.props.onClose.call(void 0,{target:this})},this.getCurrentZIndex=()=>this.context?this.context+1:100,i.validatePackage(u),this.reposition=function(t,e,o={}){let n,i,s,r,p=0;o=o||{};const l=function(){p=!1===o.leading?0:(new Date).getTime(),n=void 0,r=t.apply(i,s),n||(i=s=null)};return function(){const a=(new Date).getTime();!p&&!1===o.leading&&(p=a);const c=e-(a-p);return i=void 0,s=arguments,c<=0||c>e?(n&&(clearTimeout(n),n=void 0),p=a,r=t.apply(i,s),n||(i=s=null)):!n&&!1!==o.trailing&&(n=window.setTimeout(l,c)),r}}(this.reposition.bind(this),16.666666666666668)}get element(){return this._popup}static getDerivedStateFromProps(t,e){const{show:o,anchor:n,anchorAlign:i,appendTo:s,collision:r,popupAlign:p,className:l,popupClass:a,style:c,offset:u,contentKey:d}=t,f={...e,props:{show:o,anchor:n,anchorAlign:i,appendTo:s,collision:r,popupAlign:p,className:l,popupClass:a,style:c,offset:u,contentKey:d}};return t.show?"hidden"===e.current||"hiding"===e.current?{...f,current:"showing",previous:e.current}:"showing"===e.current?{...f,current:"shown",previous:e.current}:"shown"!==e.current||h(u,e.props.offset)&&h(i,e.props.anchorAlign)&&h(s,e.props.appendTo)&&h(r,e.props.collision)&&h(p,e.props.popupAlign)&&h(c,e.props.style)&&n===e.props.anchor&&a===e.props.popupClass&&l===e.props.className?f:{...f,current:"reposition",previous:e.current}:"hiding"===e.current||"hidden"===e.current?{...f,current:"hidden",previous:e.current}:{...f,current:"hiding",previous:e.current}}componentDidUpdate(t){"showing"===this.state.current&&this._popup?this.show(this._popup):"hiding"===this.state.current&&this._popup?(this.onClosing(this._popup),this.animate(this._popup.firstChild,"exit",this.onClosed)):"reposition"===this.state.current&&"shown"===this.state.previous?setTimeout((()=>{this.setState({current:"shown",previous:this.state.current})}),0):"shown"===this.state.current&&t.contentKey!==this.props.contentKey&&this._popup&&this.setPosition(this._popup)}componentDidMount(){"showing"===this.state.current&&this._popup&&this.show(this._popup)}componentWillUnmount(){this.detachRepositionHandlers()}render(){const{children:t,className:e,popupClass:o,unstyled:n,show:s,id:r,positionMode:a}=this.props,c=n&&n.uPopup,u=this.props.appendTo?this.props.appendTo:i.canUseDOM?this.props.anchor&&this.props.anchor.ownerDocument?this.props.anchor.ownerDocument.body:document.body:void 0;"reposition"===this.state.current&&"shown"===this.state.previous&&this._popup&&this.setPosition(this._popup);const h=Object.assign({},{position:a,top:0,left:-1e4},this.props.style||{}),d="hiding"===this.state.current;if((s||d)&&u){const n=this.getCurrentZIndex(),s=p.createElement(i.ZIndexContext.Provider,{value:n},p.createElement("div",{onKeyDown:this.props.onKeyDown,className:i.classNames(i.uPopup.animationContainer({c:c}),e),id:r,ref:t=>this._popup=t,style:{zIndex:n,...h}},p.createElement("div",{className:i.classNames(i.uPopup.animationChild({c:c})),style:{transitionDelay:"0ms"}},p.createElement("div",{role:this.props.role,className:i.classNames(i.uPopup.popup({c:c}),o)},t))));return null!==this.props.appendTo?l.createPortal(s,u):s}return null}get animationDuration(){const t=this.props.animate;let e=0,o=0;return t&&(!0===t?e=o=300:(e=t.openDuration||0,o=t.closeDuration||0)),{enter:e,exit:o}}attachRepositionHandlers(t){this.detachRepositionHandlers(),this._scrollableParents=s.domUtils.scrollableParents(this.props.anchor||t),this._scrollableParents&&this._scrollableParents.map((t=>t.addEventListener("scroll",this.reposition))),window.addEventListener("resize",this.reposition)}detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map((t=>t.removeEventListener("scroll",this.reposition))),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)}reposition(){this.setState({current:"reposition",previous:this.state.current})}};d.propTypes={anchor:function(t){const e=t.anchor;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(t){const e=t.appendTo;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),id:n.string,popupClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),collision:n.shape({horizontal:n.oneOf([s.Collision.fit,s.Collision.flip,s.Collision.none]),vertical:n.oneOf([s.Collision.fit,s.Collision.flip,s.Collision.none])}),anchorAlign:n.shape({horizontal:n.oneOf([s.AlignPoint.left,s.AlignPoint.center,s.AlignPoint.right]),vertical:n.oneOf([s.AlignPoint.top,s.AlignPoint.center,s.AlignPoint.bottom])}),popupAlign:n.shape({horizontal:n.oneOf([s.AlignPoint.left,s.AlignPoint.center,s.AlignPoint.right]),vertical:n.oneOf([s.AlignPoint.top,s.AlignPoint.center,s.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,onKeyPress:n.func,onMouseDownOutside:n.func},d.defaultProps={collision:{horizontal:s.Collision.fit,vertical:s.Collision.flip},anchorAlign:{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.bottom},popupAlign:{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.top},offset:{left:-1e3,top:0},animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},d.contextType=i.ZIndexContext,d.displayName="PopupComponent";let f=d;const m=p.createContext((t=>t)),g=p.forwardRef(((t,e)=>{const o=p.useContext(m),n=i.useUnstyled(),s=o.call(void 0,t);return p.createElement(f,{ref:e,unstyled:n,...s})}));g.displayName="Popup",t.Popup=g,t.PopupPropsContext=m,t.PopupWithoutContext=f}));
|
package/index.d.mts
CHANGED
|
@@ -80,6 +80,28 @@ export declare interface Margin extends MarginSettings {
|
|
|
80
80
|
vertical: number;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
+
/**
|
|
84
|
+
* Represents the object of the `MouseDownOutside` Popup event.
|
|
85
|
+
*/
|
|
86
|
+
export declare interface MouseDownOutsideEvent {
|
|
87
|
+
/**
|
|
88
|
+
* An event target.
|
|
89
|
+
*/
|
|
90
|
+
target: Popup;
|
|
91
|
+
/**
|
|
92
|
+
* The event object.
|
|
93
|
+
*/
|
|
94
|
+
event: MouseEvent;
|
|
95
|
+
/**
|
|
96
|
+
* The state of the Popup.
|
|
97
|
+
*/
|
|
98
|
+
state: PopupState;
|
|
99
|
+
/**
|
|
100
|
+
* Indicates if the MouseDown event is triggered over the anchor of the Popup.
|
|
101
|
+
*/
|
|
102
|
+
isAnchorClicked: boolean;
|
|
103
|
+
}
|
|
104
|
+
|
|
83
105
|
/**
|
|
84
106
|
* The offset position of the Popup.
|
|
85
107
|
*/
|
|
@@ -227,6 +249,10 @@ export declare interface PopupProps extends PopupSettings {
|
|
|
227
249
|
* Fires after the Popup position is set.
|
|
228
250
|
*/
|
|
229
251
|
onPosition?: (event: PositionEvent) => void;
|
|
252
|
+
/**
|
|
253
|
+
* Fires when the mousedown event is triggered outside the Popup.
|
|
254
|
+
*/
|
|
255
|
+
onMouseDownOutside?: (event: MouseDownOutsideEvent) => void;
|
|
230
256
|
/**
|
|
231
257
|
* Controls the Popup visibility ([see example]({% slug hidden_popup %})). Defaults to `false`.
|
|
232
258
|
*/
|
|
@@ -339,6 +365,7 @@ export declare class PopupWithoutContext extends React_2.Component<PopupProps, P
|
|
|
339
365
|
onPosition: PropTypes.Requireable<(...args: any[]) => any>;
|
|
340
366
|
onOpen: PropTypes.Requireable<(...args: any[]) => any>;
|
|
341
367
|
onKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
|
|
368
|
+
onMouseDownOutside: PropTypes.Requireable<(...args: any[]) => any>;
|
|
342
369
|
};
|
|
343
370
|
/**
|
|
344
371
|
* @hidden
|
|
@@ -435,6 +462,7 @@ export declare class PopupWithoutContext extends React_2.Component<PopupProps, P
|
|
|
435
462
|
private setPosition;
|
|
436
463
|
private onOpened;
|
|
437
464
|
private animate;
|
|
465
|
+
private handleMouseDown;
|
|
438
466
|
private onClosing;
|
|
439
467
|
private onClosed;
|
|
440
468
|
private get animationDuration();
|
|
@@ -447,7 +475,7 @@ export declare class PopupWithoutContext extends React_2.Component<PopupProps, P
|
|
|
447
475
|
/**
|
|
448
476
|
* Represents the object of the `Position` Popup event.
|
|
449
477
|
*/
|
|
450
|
-
declare interface PositionEvent {
|
|
478
|
+
export declare interface PositionEvent {
|
|
451
479
|
/**
|
|
452
480
|
* An event target.
|
|
453
481
|
*/
|
package/index.d.ts
CHANGED
|
@@ -80,6 +80,28 @@ export declare interface Margin extends MarginSettings {
|
|
|
80
80
|
vertical: number;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
+
/**
|
|
84
|
+
* Represents the object of the `MouseDownOutside` Popup event.
|
|
85
|
+
*/
|
|
86
|
+
export declare interface MouseDownOutsideEvent {
|
|
87
|
+
/**
|
|
88
|
+
* An event target.
|
|
89
|
+
*/
|
|
90
|
+
target: Popup;
|
|
91
|
+
/**
|
|
92
|
+
* The event object.
|
|
93
|
+
*/
|
|
94
|
+
event: MouseEvent;
|
|
95
|
+
/**
|
|
96
|
+
* The state of the Popup.
|
|
97
|
+
*/
|
|
98
|
+
state: PopupState;
|
|
99
|
+
/**
|
|
100
|
+
* Indicates if the MouseDown event is triggered over the anchor of the Popup.
|
|
101
|
+
*/
|
|
102
|
+
isAnchorClicked: boolean;
|
|
103
|
+
}
|
|
104
|
+
|
|
83
105
|
/**
|
|
84
106
|
* The offset position of the Popup.
|
|
85
107
|
*/
|
|
@@ -227,6 +249,10 @@ export declare interface PopupProps extends PopupSettings {
|
|
|
227
249
|
* Fires after the Popup position is set.
|
|
228
250
|
*/
|
|
229
251
|
onPosition?: (event: PositionEvent) => void;
|
|
252
|
+
/**
|
|
253
|
+
* Fires when the mousedown event is triggered outside the Popup.
|
|
254
|
+
*/
|
|
255
|
+
onMouseDownOutside?: (event: MouseDownOutsideEvent) => void;
|
|
230
256
|
/**
|
|
231
257
|
* Controls the Popup visibility ([see example]({% slug hidden_popup %})). Defaults to `false`.
|
|
232
258
|
*/
|
|
@@ -339,6 +365,7 @@ export declare class PopupWithoutContext extends React_2.Component<PopupProps, P
|
|
|
339
365
|
onPosition: PropTypes.Requireable<(...args: any[]) => any>;
|
|
340
366
|
onOpen: PropTypes.Requireable<(...args: any[]) => any>;
|
|
341
367
|
onKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
|
|
368
|
+
onMouseDownOutside: PropTypes.Requireable<(...args: any[]) => any>;
|
|
342
369
|
};
|
|
343
370
|
/**
|
|
344
371
|
* @hidden
|
|
@@ -435,6 +462,7 @@ export declare class PopupWithoutContext extends React_2.Component<PopupProps, P
|
|
|
435
462
|
private setPosition;
|
|
436
463
|
private onOpened;
|
|
437
464
|
private animate;
|
|
465
|
+
private handleMouseDown;
|
|
438
466
|
private onClosing;
|
|
439
467
|
private onClosed;
|
|
440
468
|
private get animationDuration();
|
|
@@ -447,7 +475,7 @@ export declare class PopupWithoutContext extends React_2.Component<PopupProps, P
|
|
|
447
475
|
/**
|
|
448
476
|
* Represents the object of the `Position` Popup event.
|
|
449
477
|
*/
|
|
450
|
-
declare interface PositionEvent {
|
|
478
|
+
export declare interface PositionEvent {
|
|
451
479
|
/**
|
|
452
480
|
* An event target.
|
|
453
481
|
*/
|
package/package-metadata.mjs
CHANGED
|
@@ -10,7 +10,7 @@ const e = {
|
|
|
10
10
|
name: "@progress/kendo-react-popup",
|
|
11
11
|
productName: "KendoReact",
|
|
12
12
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
13
|
-
publishDate:
|
|
13
|
+
publishDate: 1726561169,
|
|
14
14
|
version: "",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
16
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-popup",
|
|
3
|
-
"version": "8.3.0
|
|
3
|
+
"version": "8.3.0",
|
|
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",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@progress/kendo-licensing": "^1.3.4",
|
|
26
26
|
"@progress/kendo-popup-common": "^1.9.0",
|
|
27
|
-
"@progress/kendo-react-common": "8.3.0
|
|
27
|
+
"@progress/kendo-react-common": "8.3.0",
|
|
28
28
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
29
29
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|
|
30
30
|
},
|