@progress/kendo-react-popup 7.2.4-develop.3 → 7.3.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Popup.js +8 -0
- package/Popup.mjs +25 -0
- package/PopupWithoutContext.js +8 -0
- package/PopupWithoutContext.mjs +324 -0
- package/animation.js +8 -0
- package/animation.mjs +35 -0
- package/dist/cdn/js/kendo-react-popup.js +8 -5
- package/index.d.mts +468 -5
- package/index.d.ts +468 -16
- package/index.js +8 -5
- package/index.mjs +12 -373
- package/package-metadata.js +8 -0
- package/package-metadata.mjs +19 -0
- package/package.json +2 -2
- package/util.js +8 -0
- package/util.mjs +25 -0
- package/Popup.d.ts +0 -31
- package/PopupWithoutContext.d.ts +0 -188
- package/animation.d.ts +0 -8
- package/models/Align.d.ts +0 -28
- package/models/Collision.d.ts +0 -18
- package/models/CollisionType.d.ts +0 -14
- package/models/Events.d.ts +0 -40
- package/models/Margin.d.ts +0 -18
- package/models/Offset.d.ts +0 -18
- package/models/PopupAnimation.d.ts +0 -17
- package/models/PopupProps.d.ts +0 -119
- package/models/PositionMode.d.ts +0 -9
- package/package-metadata.d.ts +0 -9
- package/util.d.ts +0 -21
package/Popup.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),a=require("./PopupWithoutContext.js");function s(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:()=>t[o]})}}return e.default=t,Object.freeze(e)}const r=s(u),c=r.createContext(t=>t),p=r.forwardRef((t,e)=>{const n=r.useContext(c).call(void 0,t);return r.createElement(a.PopupWithoutContext,{ref:e,...n})});p.displayName="Popup";exports.Popup=p;exports.PopupPropsContext=c;
|
package/Popup.mjs
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use client";
|
|
9
|
+
import * as o from "react";
|
|
10
|
+
import { PopupWithoutContext as r } from "./PopupWithoutContext.mjs";
|
|
11
|
+
const c = o.createContext((t) => t), n = o.forwardRef((t, e) => {
|
|
12
|
+
const p = o.useContext(c).call(void 0, t);
|
|
13
|
+
return /* @__PURE__ */ o.createElement(
|
|
14
|
+
r,
|
|
15
|
+
{
|
|
16
|
+
ref: e,
|
|
17
|
+
...p
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
});
|
|
21
|
+
n.displayName = "Popup";
|
|
22
|
+
export {
|
|
23
|
+
n as Popup,
|
|
24
|
+
c as PopupPropsContext
|
|
25
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),C=require("react-dom"),e=require("prop-types"),D=require("./animation.js"),f=require("@progress/kendo-react-common"),n=require("@progress/kendo-popup-common"),y=require("./util.js"),E=require("./package-metadata.js");function _(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(i,t,o.get?o:{enumerable:!0,get:()=>a[t]})}}return i.default=a,Object.freeze(i)}const O=_(N),I=_(C),R=100,x=1;function P(a,i){if(a===i)return!0;if(!!a!=!!i)return!1;const t=Object.getOwnPropertyNames(a),o=Object.getOwnPropertyNames(i);if(t.length!==o.length)return!1;for(let l=0;l<t.length;l++){let s=t[l];if(a[s]!==i[s])return!1}return!0}const M={left:-1e3,top:0},z="k-animation-container",b="k-animation-container-shown",S="k-child-animation-container",j="k-popup",v=class v extends O.Component{constructor(i){super(i),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:o,popupAlign:l,collision:s,offset:c,anchor:p,margin:h,scale:g,positionMode:u}=this.props;const{width:d,height:m}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const A=n.alignElement({anchor:p,anchorAlign:o,element:t,elementAlign:l,offset:c,margin:h,positionMode:u,scale:g}),r=n.positionElement({anchor:p,anchorAlign:o,element:t,elementAlign:l,collisions:s,currentLocation:A,margin:this.props.margin});if(t.style.top=r.offset.top+"px",t.style.left=r.offset.left+"px",t.style.width=d,t.style.height=m,this._collisions={fit:r.fit,fitted:r.fitted,flip:r.flip,flipped:r.flipped},this.props.onPosition){const T={target:this,flipped:r.flipped,fitted:r.fitted};this.props.onPosition.call(void 0,T)}},this.onOpened=()=>{const t=this._popup;t&&(this.props.show&&t.classList.add(b),this.attachRepositionHandlers(t),this.props.onOpen&&this.props.onOpen.call(void 0,{target:this}))},this.animate=(t,o,l)=>{if(!this.props.popupAlign)return;let s;const{horizontal:c,vertical:p}=this.props.popupAlign;c==="left"&&p==="center"?s="right":c==="right"&&p==="center"?s="left":p==="top"?s="down":s="up";const h={down:"up",up:"down",left:"right",right:"left"};this._collisions&&this._collisions.flipped&&(s=h[s]),D.slide(t,s,this.animationDuration[o],o,l)},this.onClosing=t=>{this.props.show||t.classList.remove(b),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:R,f.validatePackage(E.packageMetadata),this.reposition=y.throttle(this.reposition.bind(this),y.FRAME_DURATION)}get element(){return this._popup}static getDerivedStateFromProps(i,t){const{show:o,anchor:l,anchorAlign:s,appendTo:c,collision:p,popupAlign:h,className:g,popupClass:u,style:d,offset:m,contentKey:A}=i,r={...t,props:{show:o,anchor:l,anchorAlign:s,appendTo:c,collision:p,popupAlign:h,className:g,popupClass:u,style:d,offset:m,contentKey:A}};return i.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"&&(!P(m,t.props.offset)||!P(s,t.props.anchorAlign)||!P(c,t.props.appendTo)||!P(p,t.props.collision)||!P(h,t.props.popupAlign)||!P(d,t.props.style)||l!==t.props.anchor||u!==t.props.popupClass||g!==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}}componentDidUpdate(i){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"&&i.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:i,className:t,popupClass:o,show:l,id:s,positionMode:c}=this.props,p=this.props.appendTo?this.props.appendTo:f.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 h=Object.assign({},{position:c,top:0,left:-1e4},this.props.style||{}),g=this.state.current==="hiding";if((l||g)&&p){const u=this.getCurrentZIndex(),d=O.createElement(f.ZIndexContext.Provider,{value:u},O.createElement("div",{className:f.classNames(z,t),id:s,ref:m=>this._popup=m,style:{zIndex:u,...h}},O.createElement("div",{className:f.classNames(S),style:{transitionDelay:"0ms"}},O.createElement("div",{role:this.props.role,className:f.classNames(j,o)},i))));return this.props.appendTo!==null?I.createPortal(d,p):d}return null}get animationDuration(){const i=this.props.animate;let t=0,o=0;return i&&(i===!0?t=o=300:(t=i.openDuration||0,o=i.closeDuration||0)),{enter:t,exit:o}}attachRepositionHandlers(i){this.detachRepositionHandlers(),this._scrollableParents=n.domUtils.scrollableParents(this.props.anchor||i),this._scrollableParents&&this._scrollableParents.map(t=>t.addEventListener("scroll",this.reposition)),window.addEventListener("resize",this.reposition)}detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(i=>i.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)}reposition(){this.setState({current:"reposition",previous:this.state.current})}};v.propTypes={anchor:function(i){const t=i.anchor;return t&&typeof t.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(i){const t=i.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([n.Collision.fit,n.Collision.flip,n.Collision.none]),vertical:e.oneOf([n.Collision.fit,n.Collision.flip,n.Collision.none])}),anchorAlign:e.shape({horizontal:e.oneOf([n.AlignPoint.left,n.AlignPoint.center,n.AlignPoint.right]),vertical:e.oneOf([n.AlignPoint.top,n.AlignPoint.center,n.AlignPoint.bottom])}),popupAlign:e.shape({horizontal:e.oneOf([n.AlignPoint.left,n.AlignPoint.center,n.AlignPoint.right]),vertical:e.oneOf([n.AlignPoint.top,n.AlignPoint.center,n.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},v.defaultProps={collision:{horizontal:n.Collision.fit,vertical:n.Collision.flip},anchorAlign:{horizontal:n.AlignPoint.left,vertical:n.AlignPoint.bottom},popupAlign:{horizontal:n.AlignPoint.left,vertical:n.AlignPoint.top},offset:M,animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},v.contextType=f.ZIndexContext,v.displayName="PopupComponent";let w=v;exports.PopupWithoutContext=w;
|
|
@@ -0,0 +1,324 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use client";
|
|
9
|
+
import * as w from "react";
|
|
10
|
+
import * as N from "react-dom";
|
|
11
|
+
import e from "prop-types";
|
|
12
|
+
import { slide as E } from "./animation.mjs";
|
|
13
|
+
import { validatePackage as D, ZIndexContext as _, canUseDOM as I, classNames as P } from "@progress/kendo-react-common";
|
|
14
|
+
import { alignElement as C, positionElement as x, Collision as c, AlignPoint as n, domUtils as R } from "@progress/kendo-popup-common";
|
|
15
|
+
import { throttle as z, FRAME_DURATION as M } from "./util.mjs";
|
|
16
|
+
import { packageMetadata as L } from "./package-metadata.mjs";
|
|
17
|
+
const U = 100, H = 1;
|
|
18
|
+
function g(O, i) {
|
|
19
|
+
if (O === i)
|
|
20
|
+
return !0;
|
|
21
|
+
if (!!O != !!i)
|
|
22
|
+
return !1;
|
|
23
|
+
const t = Object.getOwnPropertyNames(O), s = Object.getOwnPropertyNames(i);
|
|
24
|
+
if (t.length !== s.length)
|
|
25
|
+
return !1;
|
|
26
|
+
for (let p = 0; p < t.length; p++) {
|
|
27
|
+
let o = t[p];
|
|
28
|
+
if (O[o] !== i[o])
|
|
29
|
+
return !1;
|
|
30
|
+
}
|
|
31
|
+
return !0;
|
|
32
|
+
}
|
|
33
|
+
const S = {
|
|
34
|
+
left: -1e3,
|
|
35
|
+
top: 0
|
|
36
|
+
}, j = "k-animation-container", b = "k-animation-container-shown", k = "k-child-animation-container", F = "k-popup", v = class v extends w.Component {
|
|
37
|
+
constructor(i) {
|
|
38
|
+
super(i), this.context = 0, this.state = { current: "hidden", previous: "hidden", props: {} }, this._popup = null, this.show = (t) => {
|
|
39
|
+
this.setPosition(t), this.animate(t.firstChild, "enter", this.onOpened), this.setState({ current: "shown", previous: this.state.current });
|
|
40
|
+
}, this.setPosition = (t) => {
|
|
41
|
+
let { anchorAlign: s, popupAlign: p, collision: o, offset: a, anchor: l, margin: h, scale: d, positionMode: u } = this.props;
|
|
42
|
+
const { width: f, height: m } = t.style;
|
|
43
|
+
t.style.width = t.offsetWidth + "px", t.style.height = t.offsetHeight + "px";
|
|
44
|
+
const y = C({
|
|
45
|
+
anchor: l,
|
|
46
|
+
anchorAlign: s,
|
|
47
|
+
element: t,
|
|
48
|
+
elementAlign: p,
|
|
49
|
+
offset: a,
|
|
50
|
+
margin: h,
|
|
51
|
+
positionMode: u,
|
|
52
|
+
scale: d
|
|
53
|
+
}), r = x({
|
|
54
|
+
anchor: l,
|
|
55
|
+
anchorAlign: s,
|
|
56
|
+
element: t,
|
|
57
|
+
elementAlign: p,
|
|
58
|
+
collisions: o,
|
|
59
|
+
currentLocation: y,
|
|
60
|
+
margin: this.props.margin
|
|
61
|
+
});
|
|
62
|
+
if (t.style.top = r.offset.top + "px", t.style.left = r.offset.left + "px", t.style.width = f, t.style.height = m, this._collisions = {
|
|
63
|
+
fit: r.fit,
|
|
64
|
+
fitted: r.fitted,
|
|
65
|
+
flip: r.flip,
|
|
66
|
+
flipped: r.flipped
|
|
67
|
+
}, this.props.onPosition) {
|
|
68
|
+
const A = {
|
|
69
|
+
target: this,
|
|
70
|
+
flipped: r.flipped,
|
|
71
|
+
fitted: r.fitted
|
|
72
|
+
};
|
|
73
|
+
this.props.onPosition.call(void 0, A);
|
|
74
|
+
}
|
|
75
|
+
}, this.onOpened = () => {
|
|
76
|
+
const t = this._popup;
|
|
77
|
+
t && (this.props.show && t.classList.add(b), this.attachRepositionHandlers(t), this.props.onOpen && this.props.onOpen.call(void 0, { target: this }));
|
|
78
|
+
}, this.animate = (t, s, p) => {
|
|
79
|
+
if (!this.props.popupAlign)
|
|
80
|
+
return;
|
|
81
|
+
let o;
|
|
82
|
+
const { horizontal: a, vertical: l } = this.props.popupAlign;
|
|
83
|
+
a === "left" && l === "center" ? o = "right" : a === "right" && l === "center" ? o = "left" : l === "top" ? o = "down" : o = "up";
|
|
84
|
+
const h = {
|
|
85
|
+
down: "up",
|
|
86
|
+
up: "down",
|
|
87
|
+
left: "right",
|
|
88
|
+
right: "left"
|
|
89
|
+
};
|
|
90
|
+
this._collisions && this._collisions.flipped && (o = h[o]), E(
|
|
91
|
+
t,
|
|
92
|
+
o,
|
|
93
|
+
this.animationDuration[s],
|
|
94
|
+
s,
|
|
95
|
+
p
|
|
96
|
+
);
|
|
97
|
+
}, this.onClosing = (t) => {
|
|
98
|
+
this.props.show || t.classList.remove(b), this.detachRepositionHandlers();
|
|
99
|
+
}, this.onClosed = () => {
|
|
100
|
+
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 });
|
|
101
|
+
}, this.getCurrentZIndex = () => this.context ? this.context + H : U, D(L), this.reposition = z(this.reposition.bind(this), M);
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Represents the Popup DOM element.
|
|
105
|
+
*/
|
|
106
|
+
get element() {
|
|
107
|
+
return this._popup;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* @hidden
|
|
111
|
+
*/
|
|
112
|
+
static getDerivedStateFromProps(i, t) {
|
|
113
|
+
const { show: s, anchor: p, anchorAlign: o, appendTo: a, collision: l, popupAlign: h, className: d, popupClass: u, style: f, offset: m, contentKey: y } = i, r = {
|
|
114
|
+
...t,
|
|
115
|
+
props: {
|
|
116
|
+
show: s,
|
|
117
|
+
anchor: p,
|
|
118
|
+
anchorAlign: o,
|
|
119
|
+
appendTo: a,
|
|
120
|
+
collision: l,
|
|
121
|
+
popupAlign: h,
|
|
122
|
+
className: d,
|
|
123
|
+
popupClass: u,
|
|
124
|
+
style: f,
|
|
125
|
+
offset: m,
|
|
126
|
+
contentKey: y
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
return i.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" && (!g(m, t.props.offset) || !g(o, t.props.anchorAlign) || !g(a, t.props.appendTo) || !g(l, t.props.collision) || !g(h, t.props.popupAlign) || !g(f, t.props.style) || p !== t.props.anchor || u !== t.props.popupClass || d !== 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 };
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
*
|
|
133
|
+
* @hidden
|
|
134
|
+
*/
|
|
135
|
+
componentDidUpdate(i) {
|
|
136
|
+
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(() => {
|
|
137
|
+
this.setState({ current: "shown", previous: this.state.current });
|
|
138
|
+
}, 0) : this.state.current === "shown" && i.contentKey !== this.props.contentKey && this._popup && this.setPosition(this._popup);
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
141
|
+
* @hidden
|
|
142
|
+
*/
|
|
143
|
+
componentDidMount() {
|
|
144
|
+
this.state.current === "showing" && this._popup && this.show(this._popup);
|
|
145
|
+
}
|
|
146
|
+
/**
|
|
147
|
+
* @hidden
|
|
148
|
+
*/
|
|
149
|
+
componentWillUnmount() {
|
|
150
|
+
this.detachRepositionHandlers();
|
|
151
|
+
}
|
|
152
|
+
/**
|
|
153
|
+
* @hidden
|
|
154
|
+
*/
|
|
155
|
+
render() {
|
|
156
|
+
const {
|
|
157
|
+
children: i,
|
|
158
|
+
className: t,
|
|
159
|
+
popupClass: s,
|
|
160
|
+
show: p,
|
|
161
|
+
id: o,
|
|
162
|
+
positionMode: a
|
|
163
|
+
} = this.props, l = this.props.appendTo ? this.props.appendTo : I ? this.props.anchor && this.props.anchor.ownerDocument ? this.props.anchor.ownerDocument.body : document.body : void 0;
|
|
164
|
+
this.state.current === "reposition" && this.state.previous === "shown" && this._popup && this.setPosition(this._popup);
|
|
165
|
+
const h = Object.assign(
|
|
166
|
+
{},
|
|
167
|
+
{ position: a, top: 0, left: -1e4 },
|
|
168
|
+
this.props.style || {}
|
|
169
|
+
), d = this.state.current === "hiding";
|
|
170
|
+
if ((p || d) && l) {
|
|
171
|
+
const u = this.getCurrentZIndex(), f = /* @__PURE__ */ w.createElement(_.Provider, { value: u }, /* @__PURE__ */ w.createElement(
|
|
172
|
+
"div",
|
|
173
|
+
{
|
|
174
|
+
className: P(j, t),
|
|
175
|
+
id: o,
|
|
176
|
+
ref: (m) => this._popup = m,
|
|
177
|
+
style: {
|
|
178
|
+
zIndex: u,
|
|
179
|
+
...h
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
/* @__PURE__ */ w.createElement("div", { className: P(k), style: { transitionDelay: "0ms" } }, /* @__PURE__ */ w.createElement(
|
|
183
|
+
"div",
|
|
184
|
+
{
|
|
185
|
+
role: this.props.role,
|
|
186
|
+
className: P(F, s)
|
|
187
|
+
},
|
|
188
|
+
i
|
|
189
|
+
))
|
|
190
|
+
));
|
|
191
|
+
return this.props.appendTo !== null ? N.createPortal(f, l) : f;
|
|
192
|
+
}
|
|
193
|
+
return null;
|
|
194
|
+
}
|
|
195
|
+
get animationDuration() {
|
|
196
|
+
const i = this.props.animate;
|
|
197
|
+
let t = 0, s = 0;
|
|
198
|
+
return i && (i === !0 ? t = s = 300 : (t = i.openDuration || 0, s = i.closeDuration || 0)), { enter: t, exit: s };
|
|
199
|
+
}
|
|
200
|
+
attachRepositionHandlers(i) {
|
|
201
|
+
this.detachRepositionHandlers(), this._scrollableParents = R.scrollableParents(this.props.anchor || i), this._scrollableParents && this._scrollableParents.map((t) => t.addEventListener("scroll", this.reposition)), window.addEventListener("resize", this.reposition);
|
|
202
|
+
}
|
|
203
|
+
detachRepositionHandlers() {
|
|
204
|
+
this._scrollableParents && (this._scrollableParents.map((i) => i.removeEventListener("scroll", this.reposition)), this._scrollableParents = void 0), window.removeEventListener("resize", this.reposition);
|
|
205
|
+
}
|
|
206
|
+
reposition() {
|
|
207
|
+
this.setState({ current: "reposition", previous: this.state.current });
|
|
208
|
+
}
|
|
209
|
+
};
|
|
210
|
+
v.propTypes = {
|
|
211
|
+
anchor: function(i) {
|
|
212
|
+
const t = i.anchor;
|
|
213
|
+
return t && typeof t.nodeType != "number" ? new Error(
|
|
214
|
+
"Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."
|
|
215
|
+
) : null;
|
|
216
|
+
},
|
|
217
|
+
appendTo: function(i) {
|
|
218
|
+
const t = i.appendTo;
|
|
219
|
+
return t && typeof t.nodeType != "number" ? new Error(
|
|
220
|
+
"Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."
|
|
221
|
+
) : null;
|
|
222
|
+
},
|
|
223
|
+
className: e.oneOfType([
|
|
224
|
+
e.string,
|
|
225
|
+
e.arrayOf(e.string),
|
|
226
|
+
e.object
|
|
227
|
+
]),
|
|
228
|
+
id: e.string,
|
|
229
|
+
popupClass: e.oneOfType([
|
|
230
|
+
e.string,
|
|
231
|
+
e.arrayOf(e.string),
|
|
232
|
+
e.object
|
|
233
|
+
]),
|
|
234
|
+
collision: e.shape({
|
|
235
|
+
horizontal: e.oneOf([
|
|
236
|
+
c.fit,
|
|
237
|
+
c.flip,
|
|
238
|
+
c.none
|
|
239
|
+
]),
|
|
240
|
+
vertical: e.oneOf([
|
|
241
|
+
c.fit,
|
|
242
|
+
c.flip,
|
|
243
|
+
c.none
|
|
244
|
+
])
|
|
245
|
+
}),
|
|
246
|
+
anchorAlign: e.shape({
|
|
247
|
+
horizontal: e.oneOf([
|
|
248
|
+
n.left,
|
|
249
|
+
n.center,
|
|
250
|
+
n.right
|
|
251
|
+
]),
|
|
252
|
+
vertical: e.oneOf([
|
|
253
|
+
n.top,
|
|
254
|
+
n.center,
|
|
255
|
+
n.bottom
|
|
256
|
+
])
|
|
257
|
+
}),
|
|
258
|
+
popupAlign: e.shape({
|
|
259
|
+
horizontal: e.oneOf([
|
|
260
|
+
n.left,
|
|
261
|
+
n.center,
|
|
262
|
+
n.right
|
|
263
|
+
]),
|
|
264
|
+
vertical: e.oneOf([
|
|
265
|
+
n.top,
|
|
266
|
+
n.center,
|
|
267
|
+
n.bottom
|
|
268
|
+
])
|
|
269
|
+
}),
|
|
270
|
+
offset: e.shape({
|
|
271
|
+
left: e.number,
|
|
272
|
+
top: e.number
|
|
273
|
+
}),
|
|
274
|
+
children: e.oneOfType([
|
|
275
|
+
e.element,
|
|
276
|
+
e.node
|
|
277
|
+
]),
|
|
278
|
+
show: e.bool,
|
|
279
|
+
animate: e.oneOfType([
|
|
280
|
+
e.bool,
|
|
281
|
+
e.shape({
|
|
282
|
+
openDuration: e.number,
|
|
283
|
+
closeDuration: e.number
|
|
284
|
+
})
|
|
285
|
+
]),
|
|
286
|
+
margin: e.shape({
|
|
287
|
+
horizontal: e.number,
|
|
288
|
+
vertical: e.number
|
|
289
|
+
}),
|
|
290
|
+
positionMode: e.oneOf([
|
|
291
|
+
"fixed",
|
|
292
|
+
"absolute"
|
|
293
|
+
]),
|
|
294
|
+
scale: e.number,
|
|
295
|
+
style: e.object,
|
|
296
|
+
onClose: e.func,
|
|
297
|
+
onPosition: e.func,
|
|
298
|
+
onOpen: e.func
|
|
299
|
+
}, v.defaultProps = {
|
|
300
|
+
collision: {
|
|
301
|
+
horizontal: c.fit,
|
|
302
|
+
vertical: c.flip
|
|
303
|
+
},
|
|
304
|
+
anchorAlign: {
|
|
305
|
+
horizontal: n.left,
|
|
306
|
+
vertical: n.bottom
|
|
307
|
+
},
|
|
308
|
+
popupAlign: {
|
|
309
|
+
horizontal: n.left,
|
|
310
|
+
vertical: n.top
|
|
311
|
+
},
|
|
312
|
+
offset: S,
|
|
313
|
+
animate: !0,
|
|
314
|
+
show: !1,
|
|
315
|
+
margin: {
|
|
316
|
+
horizontal: 0,
|
|
317
|
+
vertical: 0
|
|
318
|
+
},
|
|
319
|
+
positionMode: "absolute"
|
|
320
|
+
}, v.contextType = _, v.displayName = "PopupComponent";
|
|
321
|
+
let T = v;
|
|
322
|
+
export {
|
|
323
|
+
T as PopupWithoutContext
|
|
324
|
+
};
|
package/animation.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=s=>{s.style.transitionDuration="",Array.from(s.classList).forEach(i=>{i.startsWith("k-slide-")&&s.classList.remove(i)})},y=typeof window!="undefined"&&/Firefox/.test(window.navigator.userAgent),v=(s,i,n,r,o)=>{if(n===0)return o();const a="k-slide-"+i+"-"+r,u=a+"-active",e=l=>{l.target===s&&(s.removeEventListener("transitionend",e),f(s),r==="exit"?s.style.display="none":s.style.display="",o())};s.addEventListener("transitionend",e);const d=s.ownerDocument;if(!d)return;const t=d.defaultView;if(!t)return;const c=()=>{f(s),s.classList.add(a),t.requestAnimationFrame(()=>{s.style.transitionDuration=n+"ms",s.classList.add(u)})};y?t.requestAnimationFrame(c):c()};exports.slide=v;
|
package/animation.mjs
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use client";
|
|
9
|
+
const f = (s) => {
|
|
10
|
+
s.style.transitionDuration = "", Array.from(s.classList).forEach((i) => {
|
|
11
|
+
i.startsWith("k-slide-") && s.classList.remove(i);
|
|
12
|
+
});
|
|
13
|
+
}, w = typeof window != "undefined" && /Firefox/.test(window.navigator.userAgent), v = (s, i, n, r, o) => {
|
|
14
|
+
if (n === 0)
|
|
15
|
+
return o();
|
|
16
|
+
const a = "k-slide-" + i + "-" + r, u = a + "-active", e = (l) => {
|
|
17
|
+
l.target === s && (s.removeEventListener("transitionend", e), f(s), r === "exit" ? s.style.display = "none" : s.style.display = "", o());
|
|
18
|
+
};
|
|
19
|
+
s.addEventListener("transitionend", e);
|
|
20
|
+
const d = s.ownerDocument;
|
|
21
|
+
if (!d)
|
|
22
|
+
return;
|
|
23
|
+
const t = d.defaultView;
|
|
24
|
+
if (!t)
|
|
25
|
+
return;
|
|
26
|
+
const c = () => {
|
|
27
|
+
f(s), s.classList.add(a), t.requestAnimationFrame(() => {
|
|
28
|
+
s.style.transitionDuration = n + "ms", s.classList.add(u);
|
|
29
|
+
});
|
|
30
|
+
};
|
|
31
|
+
w ? t.requestAnimationFrame(c) : c();
|
|
32
|
+
};
|
|
33
|
+
export {
|
|
34
|
+
v as slide
|
|
35
|
+
};
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
*
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
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=>{t.style.transitionDuration="",Array.from(t.classList).forEach((e=>{e.startsWith("k-slide-")&&t.classList.remove(e)}))},c="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),h={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 u(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="k-animation-container-shown",f=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:h}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const u=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:u,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=h,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;t&&(this.props.show&&t.classList.add(d),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:i,vertical:s}=this.props.popupAlign;n="left"===i&&"center"===s?"right":"right"===i&&"center"===s?"left":"top"===s?"down":"up";this._collisions&&this._collisions.flipped&&(n={down:"up",up:"down",left:"right",right:"left"}[n]),((t,e,o,n,i)=>{if(0===o)return i();const s="k-slide-"+e+"-"+n,r=s+"-active",p=e=>{e.target===t&&(t.removeEventListener("transitionend",p),a(t),t.style.display="exit"===n?"none":"",i())};t.addEventListener("transitionend",p);const l=t.ownerDocument;if(!l)return;const h=l.defaultView;if(!h)return;const u=()=>{a(t),t.classList.add(s),h.requestAnimationFrame((()=>{t.style.transitionDuration=o+"ms",t.classList.add(r)}))};c?h.requestAnimationFrame(u):u()})(t,n,this.animationDuration[e],e,o)},this.onClosing=t=>{this.props.show||t.classList.remove(d),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(h),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:h,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:h,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||u(h,e.props.offset)&&u(i,e.props.anchorAlign)&&u(s,e.props.appendTo)&&u(r,e.props.collision)&&u(p,e.props.popupAlign)&&u(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,show:n,id:s,positionMode:r}=this.props,a=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 c=Object.assign({},{position:r,top:0,left:-1e4},this.props.style||{}),h="hiding"===this.state.current;if((n||h)&&a){const n=this.getCurrentZIndex(),r=p.createElement(i.ZIndexContext.Provider,{value:n},p.createElement("div",{className:i.classNames("k-animation-container",e),id:s,ref:t=>this._popup=t,style:{zIndex:n,...c}},p.createElement("div",{className:i.classNames("k-child-animation-container"),style:{transitionDelay:"0ms"}},p.createElement("div",{role:this.props.role,className:i.classNames("k-popup",o)},t))));return null!==this.props.appendTo?l.createPortal(r,a):r}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})}};f.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},f.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"},f.contextType=i.ZIndexContext,f.displayName="PopupComponent";let m=f;const g=p.createContext((t=>t)),v=p.forwardRef(((t,e)=>{const o=p.useContext(g).call(void 0,t);return p.createElement(m,{ref:e,...o})}));v.displayName="Popup",t.Popup=v,t.PopupPropsContext=g,t.PopupWithoutContext=m}));
|