@progress/kendo-react-dialogs 9.5.0 → 10.0.0-develop.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Dialog.js +1 -1
- package/Dialog.mjs +28 -30
- package/Window.js +1 -1
- package/Window.mjs +31 -33
- package/dist/cdn/js/kendo-react-dialogs.js +1 -1
- package/index.d.mts +0 -2
- package/index.d.ts +0 -2
- package/package.json +4 -10
- package/package-metadata.js +0 -8
- package/package-metadata.mjs +0 -19
package/Dialog.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react"),F=require("react-dom"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react"),F=require("react-dom"),s=require("prop-types"),_=require("./DialogTitleBar.js"),u=require("./DialogActionsBar.js"),o=require("@progress/kendo-react-common"),N=require("./utils.js"),l=require("./constants.js");function m(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const c=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(t,e,c.get?c:{enumerable:!0,get:()=>r[e]})}}return t.default=r,Object.freeze(t)}const i=m(A),k=m(F),n=class n extends i.Component{constructor(t){super(t),this.context=0,this.titleId=this.generateTitleId(),this.contentId=this.generateContentId(),this.activeElement=null,this.onCloseDialog=e=>{e.preventDefault(),o.dispatchEvent(this.props.onClose,e,this,void 0)},this.onKeyDown=e=>{e.keyCode===o.Keys.esc&&this.props.onClose&&(e.preventDefault(),this.onCloseDialog(e)),o.keepFocusInContainer(e,this.element)},this.getCurrentZIndex=()=>!this.state||this.context===void 0?this.context?this.context:l.DEFAULT_DIALOGS_ZINDEX:this.state.zIndex>(this.context?this.context+l.ZINDEX_DIALOGS_STEP:0)?this.state.zIndex:this.context+l.ZINDEX_DIALOGS_STEP,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,this.activeElement=o.getActiveElement(document)}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){if(this.element){if(this.props.autoFocus&&!this.props.autoFocusedElement)this.element.focus();else if(this.props.autoFocus&&this.props.autoFocusedElement)this.element.focus();else if(!this.props.autoFocus&&this.props.autoFocusedElement){const t=this.element.querySelector(this.props.autoFocusedElement);t&&t.focus()}else{const t=[...o.FOCUSABLE_ELEMENTS].map(e=>e+":not(.k-dialog-titlebar *)");o.focusFirstFocusableChild(this.element,t)}this.setState({zIndex:N.getMaxZIndex(this.getCurrentZIndex(),this.getDocument(),this._id)})}}componentWillUnmount(){setTimeout(()=>{var t;!this.element&&this.activeElement&&document&&(document.contains(this.activeElement)?this.activeElement.focus():this.activeElement.id&&((t=document.getElementById(this.activeElement.id))==null||t.focus()))})}render(){const t=this.props.id!==void 0?this.props.id:this.titleId,{title:e,width:c,height:f,children:I,minWidth:D,dir:E,style:b,contentStyle:C,modal:x=!0}=this.props,d=i.Children.toArray(I),T=this.getContent(d),v=this.getActionBar(d),O=e?{"aria-labelledby":t}:null,S=this.props.closeIcon!==void 0?this.props.closeIcon:!0,p=this.getCurrentZIndex(),h=i.createElement(o.ZIndexContext.Provider,{value:p},i.createElement("div",{[l.DATA_DIALOGS_ID]:this._id,className:"k-dialog-wrapper"+(this.props.className?" "+this.props.className:""),onKeyDown:this.onKeyDown,tabIndex:0,dir:E,style:{zIndex:p,...b},ref:w=>this.element=w},x&&i.createElement("div",{className:"k-overlay",style:this.props.overlayStyle}),i.createElement("div",{...O,className:o.classNames("k-window k-dialog",{[`k-window-${this.props.themeColor}`]:this.props.themeColor}),role:"dialog","aria-labelledby":t,"aria-modal":!0,"aria-describedby":this.contentId,style:{width:c,height:f,minWidth:D}},this.props.title&&i.createElement(_.DialogTitleBar,{closeIcon:S,onCloseButtonClick:this.onCloseDialog,id:t},e),i.createElement("div",{className:"k-window-content k-dialog-content",style:C,id:this.contentId},T),v)));return o.canUseDOM?this.props.appendTo!==null?k.createPortal(h,this.props.appendTo||document.body):h:null}getActionBar(t){return t.filter(e=>e&&e.type===u.DialogActionsBar)}getContent(t){return t.filter(e=>e&&e.type!==u.DialogActionsBar)}generateTitleId(){return"dialog-title-"+this._id}generateContentId(){return"dialog-content-"+this._id}};n.displayName="Dialog",n.propTypes={title:s.any,id:s.string,dir:s.string,style:s.object,closeIcon:s.bool,width:s.oneOfType([s.number,s.string]),height:s.oneOfType([s.number,s.string]),minWidth:s.oneOfType([s.number,s.string]),autoFocus:s.bool},n.defaultProps={autoFocus:!1},n.contextType=o.ZIndexContext;let a=n;const g=o.createPropsContext(),y=o.withIdHOC(o.withPropsContext(g,a));y.displayName="KendoReactDialog";exports.Dialog=y;exports.DialogPropsContext=g;
|
package/Dialog.mjs
CHANGED
|
@@ -8,19 +8,18 @@
|
|
|
8
8
|
import * as o from "react";
|
|
9
9
|
import * as b from "react-dom";
|
|
10
10
|
import s from "prop-types";
|
|
11
|
-
import { DialogTitleBar as
|
|
11
|
+
import { DialogTitleBar as w } from "./DialogTitleBar.mjs";
|
|
12
12
|
import { DialogActionsBar as c } from "./DialogActionsBar.mjs";
|
|
13
|
-
import { dispatchEvent as F, Keys as A, keepFocusInContainer as N,
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import { DEFAULT_DIALOGS_ZINDEX as R, ZINDEX_DIALOGS_STEP as h, DATA_DIALOGS_ID as W } from "./constants.mjs";
|
|
13
|
+
import { dispatchEvent as F, Keys as A, keepFocusInContainer as N, getActiveElement as k, ZIndexContext as p, FOCUSABLE_ELEMENTS as S, focusFirstFocusableChild as O, classNames as P, canUseDOM as Z, createPropsContext as _, withIdHOC as B, withPropsContext as L } from "@progress/kendo-react-common";
|
|
14
|
+
import { getMaxZIndex as K } from "./utils.mjs";
|
|
15
|
+
import { DEFAULT_DIALOGS_ZINDEX as M, ZINDEX_DIALOGS_STEP as d, DATA_DIALOGS_ID as z } from "./constants.mjs";
|
|
17
16
|
const i = class i extends o.Component {
|
|
18
17
|
constructor(e) {
|
|
19
|
-
super(e), this.context = 0, this.titleId = this.generateTitleId(), this.contentId = this.generateContentId(), this.
|
|
18
|
+
super(e), this.context = 0, this.titleId = this.generateTitleId(), this.contentId = this.generateContentId(), this.activeElement = null, this.onCloseDialog = (t) => {
|
|
20
19
|
t.preventDefault(), F(this.props.onClose, t, this, void 0);
|
|
21
20
|
}, this.onKeyDown = (t) => {
|
|
22
21
|
t.keyCode === A.esc && this.props.onClose && (t.preventDefault(), this.onCloseDialog(t)), N(t, this.element);
|
|
23
|
-
}, this.getCurrentZIndex = () => !this.state || this.context === void 0 ? this.context ? this.context :
|
|
22
|
+
}, this.getCurrentZIndex = () => !this.state || this.context === void 0 ? this.context ? this.context : M : this.state.zIndex > (this.context ? this.context + d : 0) ? this.state.zIndex : this.context + d, this.getDocument = () => this.props.appendTo ? this.props.appendTo.ownerDocument : document, this.activeElement = k(document);
|
|
24
23
|
}
|
|
25
24
|
get _id() {
|
|
26
25
|
return this.props.id + "-accessibility-id";
|
|
@@ -40,13 +39,13 @@ const i = class i extends o.Component {
|
|
|
40
39
|
);
|
|
41
40
|
e && e.focus();
|
|
42
41
|
} else {
|
|
43
|
-
const e = [...
|
|
42
|
+
const e = [...S].map(
|
|
44
43
|
(t) => t + ":not(.k-dialog-titlebar *)"
|
|
45
44
|
);
|
|
46
|
-
|
|
45
|
+
O(this.element, e);
|
|
47
46
|
}
|
|
48
47
|
this.setState({
|
|
49
|
-
zIndex:
|
|
48
|
+
zIndex: K(this.getCurrentZIndex(), this.getDocument(), this._id)
|
|
50
49
|
});
|
|
51
50
|
}
|
|
52
51
|
}
|
|
@@ -63,43 +62,42 @@ const i = class i extends o.Component {
|
|
|
63
62
|
* @hidden
|
|
64
63
|
*/
|
|
65
64
|
render() {
|
|
66
|
-
const e = this.props.id !== void 0 ? this.props.id : this.titleId, { title: t, width:
|
|
65
|
+
const e = this.props.id !== void 0 ? this.props.id : this.titleId, { title: t, width: h, height: m, children: u, minWidth: g, dir: y, style: f, contentStyle: I, modal: E = !0 } = this.props, r = o.Children.toArray(u), D = this.getContent(r), C = this.getActionBar(r), x = t ? {
|
|
67
66
|
"aria-labelledby": e
|
|
68
|
-
} : null,
|
|
67
|
+
} : null, v = this.props.closeIcon !== void 0 ? this.props.closeIcon : !0, l = this.getCurrentZIndex(), a = /* @__PURE__ */ o.createElement(p.Provider, { value: l }, /* @__PURE__ */ o.createElement(
|
|
69
68
|
"div",
|
|
70
69
|
{
|
|
71
|
-
[
|
|
70
|
+
[z]: this._id,
|
|
72
71
|
className: "k-dialog-wrapper" + (this.props.className ? " " + this.props.className : ""),
|
|
73
72
|
onKeyDown: this.onKeyDown,
|
|
74
73
|
tabIndex: 0,
|
|
75
74
|
dir: y,
|
|
76
75
|
style: {
|
|
77
|
-
zIndex:
|
|
78
|
-
...
|
|
76
|
+
zIndex: l,
|
|
77
|
+
...f
|
|
79
78
|
},
|
|
80
79
|
ref: (T) => this.element = T
|
|
81
80
|
},
|
|
82
|
-
|
|
81
|
+
E && /* @__PURE__ */ o.createElement("div", { className: "k-overlay", style: this.props.overlayStyle }),
|
|
83
82
|
/* @__PURE__ */ o.createElement(
|
|
84
83
|
"div",
|
|
85
84
|
{
|
|
86
85
|
...x,
|
|
87
|
-
className:
|
|
86
|
+
className: P("k-window k-dialog", {
|
|
88
87
|
[`k-window-${this.props.themeColor}`]: this.props.themeColor
|
|
89
88
|
}),
|
|
90
89
|
role: "dialog",
|
|
91
90
|
"aria-labelledby": e,
|
|
92
91
|
"aria-modal": !0,
|
|
93
92
|
"aria-describedby": this.contentId,
|
|
94
|
-
style: { width:
|
|
93
|
+
style: { width: h, height: m, minWidth: g }
|
|
95
94
|
},
|
|
96
|
-
this.props.title && /* @__PURE__ */ o.createElement(
|
|
97
|
-
/* @__PURE__ */ o.createElement("div", { className: "k-window-content k-dialog-content", style:
|
|
98
|
-
|
|
99
|
-
this.showLicenseWatermark && /* @__PURE__ */ o.createElement(B, null)
|
|
95
|
+
this.props.title && /* @__PURE__ */ o.createElement(w, { closeIcon: v, onCloseButtonClick: this.onCloseDialog, id: e }, t),
|
|
96
|
+
/* @__PURE__ */ o.createElement("div", { className: "k-window-content k-dialog-content", style: I, id: this.contentId }, D),
|
|
97
|
+
C
|
|
100
98
|
)
|
|
101
99
|
));
|
|
102
|
-
return
|
|
100
|
+
return Z ? this.props.appendTo !== null ? b.createPortal(a, this.props.appendTo || document.body) : a : null;
|
|
103
101
|
}
|
|
104
102
|
getActionBar(e) {
|
|
105
103
|
return e.filter((t) => t && t.type === c);
|
|
@@ -126,16 +124,16 @@ i.displayName = "Dialog", i.propTypes = {
|
|
|
126
124
|
autoFocus: s.bool
|
|
127
125
|
}, i.defaultProps = {
|
|
128
126
|
autoFocus: !1
|
|
129
|
-
}, i.contextType =
|
|
127
|
+
}, i.contextType = p;
|
|
130
128
|
let n = i;
|
|
131
|
-
const
|
|
132
|
-
|
|
133
|
-
|
|
129
|
+
const U = _(), G = B(
|
|
130
|
+
L(
|
|
131
|
+
U,
|
|
134
132
|
n
|
|
135
133
|
)
|
|
136
134
|
);
|
|
137
|
-
|
|
135
|
+
G.displayName = "KendoReactDialog";
|
|
138
136
|
export {
|
|
139
|
-
|
|
140
|
-
|
|
137
|
+
G as Dialog,
|
|
138
|
+
U as DialogPropsContext
|
|
141
139
|
};
|
package/Window.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),x=require("react-dom"),h=require("prop-types"),N=require("./WindowTitlebar.js"),o=require("@progress/kendo-react-common"),U=require("./WindowResizeHandlers.js"),k=require("./MiddleLayerOptimization.js"),s=require("./StageEnum.js"),y=require("./package-metadata.js"),v=require("./WindowActionsBar.js"),u=require("./constants.js"),M=require("./utils.js");function A(w){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(w){for(const t in w)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(w,t);Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:()=>w[t]})}}return i.default=w,Object.freeze(i)}const a=A(R),z=A(x),S=300,m=300,E=120,C=100,p=5,g=class g extends a.Component{constructor(i){super(i),this.context=0,this.draggable=null,this.offSetCoordinates={x:0,y:0},this.titleId=this.generateTitleId(),this.mounted=!1,this.showLicenseWatermark=!1,this.activeElement=null,this.onKeyDown=t=>{if(this.props.modal&&o.keepFocusInContainer(t,this.element),t.target!==t.currentTarget)return;const e=this.props.minWidth||E,n=this.props.minHeight||C;if((t.metaKey||t.ctrlKey)&&this.props.resizable){switch(t.keyCode){case o.Keys.up:t.preventDefault(),n<=this.height-p&&this.setState({height:this.height-p});break;case o.Keys.down:t.preventDefault(),this.setState({height:this.height+p});break;case o.Keys.left:e<=this.width-p&&this.setState({width:this.width-p});break;case o.Keys.right:this.setState({width:this.width+p});break;default:return}this.dispatchMoveEvent(this.props.onResize,t,!1,void 0);return}if(t.altKey){switch(t.keyCode){case o.Keys.up:this.windowStage===s.windowStage.MINIMIZED?(this.handleRestore(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.DEFAULT})):this.windowStage===s.windowStage.DEFAULT&&(this.handleFullscreen(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.FULLSCREEN}));break;case o.Keys.down:this.windowStage===s.windowStage.FULLSCREEN?(this.handleRestore(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.DEFAULT})):this.windowStage===s.windowStage.DEFAULT&&(this.handleMinimize(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.MINIMIZED}));break}return}if(!t.ctrlKey)switch(t.keyCode){case o.Keys.esc:this.props.onClose&&this.handleCloseWindow(t);return;case o.Keys.up:this.setState(r=>({top:r.top-p}));break;case o.Keys.down:this.setState(r=>({top:r.top+p}));break;case o.Keys.left:this.setState(r=>({left:r.left-p}));break;case o.Keys.right:this.setState(r=>({left:r.left+p}));break;default:return}this.dispatchMoveEvent(this.props.onMove,t,!1,void 0)},this.onPress=t=>{const e=t.event;this.windowCoordinatesState.differenceLeft=e.pageX-this.left,this.windowCoordinatesState.differenceTop=e.pageY-this.top},this.onDrag=t=>{const e=t.event;e.originalEvent.preventDefault(),this.windowStage!==s.windowStage.FULLSCREEN&&this.props.draggable&&(this.setState({top:Math.max(e.pageY-this.windowCoordinatesState.differenceTop,0),left:e.pageX-this.windowCoordinatesState.differenceLeft,isDragging:!0}),this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!1))},this.onRelease=t=>{const e=t.event;this.windowStage!==s.windowStage.FULLSCREEN&&this.props.draggable&&this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!0),this.setState({isDragging:!1})},this.onFocus=()=>{this._blurTimeout?(clearTimeout(this._blurTimeout),this._blurTimeout=void 0):this.setState({focused:!0,zIndex:M.getMaxZIndex(this.getCurrentZIndex(),this.getDocument(),this._id)})},this.onBlur=()=>{clearTimeout(this._blurTimeout);const t=this.getWindow();t&&(this._blurTimeout=t.setTimeout(()=>{this.mounted&&this.setState({focused:!1}),this._blurTimeout=void 0}))},this.getInitialTop=()=>{if(this.props.top!==void 0)return this.props.top;if(this.props.initialTop!==void 0)return this.props.initialTop;let t=m;if(this.props.height!==void 0?t=this.props.height:this.props.initialHeight!==void 0&&(t=this.props.initialHeight),this.props.appendTo)return this.props.appendTo.offsetHeight/2-t/2;const e=this.getWindow();return e?e.innerHeight/2-t/2:0},this.getInitialLeft=()=>{if(this.props.left!==void 0)return this.props.left;if(this.props.initialLeft!==void 0)return this.props.initialLeft;let t=S;if(this.props.width!==void 0?t=this.props.width:this.props.initialWidth!==void 0&&(t=this.props.initialWidth),this.props.appendTo)return this.props.appendTo.offsetWidth/2-t/2;const e=this.getWindow();return e?e.innerWidth/2-t/2:0},this.getInitialWidth=()=>{let t=S;return this.props.width!==void 0?t=this.props.width:this.props.initialWidth!==void 0&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=m;return this.props.height!==void 0?t=this.props.height:this.props.initialHeight!==void 0&&(t=this.props.initialHeight),t},this.handleMinimize=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height,this.setState({stage:s.windowStage.MINIMIZED,height:0}),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.MINIMIZED})},this.handleFullscreen=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height;const e=this.getWindow(),n=e?e.innerWidth:0,d=e?e.innerHeight:0;this.setState({left:0,top:0,width:this.props.appendTo?this.props.appendTo.offsetWidth:n,height:this.props.appendTo?this.props.appendTo.offsetHeight:d,stage:s.windowStage.FULLSCREEN}),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===s.windowStage.FULLSCREEN?this.setState({stage:s.windowStage.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===s.windowStage.MINIMIZED&&this.setState({stage:s.windowStage.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),o.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===s.windowStage.FULLSCREEN||this.windowStage===s.windowStage.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{const n=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,d=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,r=this.width,l=this.height,D=this.props.minWidth||E,I=this.props.minHeight||C,T=this.top-d,b=this.left-n,L=n-this.left,W=d-this.top,c=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&I-(l+T)<0&&(this.top>0&&(c.height=l+T),c.top=d),e.direction.indexOf("s")>=0&&I-W<0&&(c.height=W),e.direction.indexOf("w")>=0&&D-(r+b)<0&&(this.left>0&&(c.width=r+b),c.left=n),e.direction.indexOf("e")>=0&&D-L<0&&(c.width=L),this.setState(c),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,n,d)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:n,end:d,target:this,left:this.state.left,top:this.state.top,width:this.state.width,hight:this.state.height,height:this.state.height})},this.handleBrowserWindowResize=()=>{if(this.windowStage===s.windowStage.FULLSCREEN){const t=this.getWindow(),e=t?t.innerWidth:0,n=t?t.innerHeight:0;this.setState({width:this.props.appendTo?this.props.appendTo.offsetWidth:e,height:this.props.appendTo?this.props.appendTo.offsetHeight:n})}},this.getCurrentZIndex=()=>!this.state||this.context===void 0?this.context?this.context:u.DEFAULT_DIALOGS_ZINDEX:this.state.zIndex>(this.context?this.context+u.ZINDEX_DIALOGS_STEP:0)?this.state.zIndex:this.context+u.ZINDEX_DIALOGS_STEP,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},o.validatePackage(y.packageMetadata),this.showLicenseWatermark=o.shouldShowValidationUI(y.packageMetadata),this.state={stage:this.props.stage||s.windowStage.DEFAULT,isDragging:!1,top:0,left:0,width:S,height:m,focused:!0,zIndex:u.DEFAULT_DIALOGS_ZINDEX},this.activeElement=document.activeElement}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){this.element&&this.props.autoFocus&&this.element.focus({preventScroll:!0});const i=this.getWindow();i&&i.addEventListener("resize",this.handleBrowserWindowResize),this.setState({stage:this.props.stage||s.windowStage.DEFAULT,isDragging:!1,top:this.getInitialTop(),left:this.getInitialLeft(),width:this.getInitialWidth(),height:this.getInitialHeight(),focused:!0,zIndex:M.getMaxZIndex(this.getCurrentZIndex(),this.getDocument(),this._id)}),this.windowCoordinatesState={leftBeforeAction:this.getInitialLeft(),topBeforeAction:this.getInitialTop(),widthBeforeAction:this.getInitialWidth(),heightBeforeAction:this.getInitialHeight()};const t=this.getDocument();if(this.props.appendTo&&t){const e=this.props.appendTo.getBoundingClientRect(),n=t.body.getBoundingClientRect();this.offSetCoordinates.x=e.left-n.left,this.offSetCoordinates.y=e.top-n.top}this.mounted=!0}componentWillUnmount(){const i=this.getWindow();i&&i.removeEventListener("resize",this.handleBrowserWindowResize),this.mounted=!1,setTimeout(()=>{var t;!this.element&&this.activeElement&&document&&(document.contains(this.activeElement)?this.activeElement.focus({preventScroll:!0}):this.activeElement.id&&((t=document.getElementById(this.activeElement.id))==null||t.focus({preventScroll:!0})))})}componentDidUpdate(i){this.props.left&&i.left!==this.props.left&&this.setState({left:this.props.left}),this.props.top&&i.top!==this.props.top&&this.setState({top:this.props.top});const t=this.getDocument();if(this.props.appendTo&&t){const e=this.props.appendTo.getBoundingClientRect(),n=t.body.getBoundingClientRect();this.offSetCoordinates.x=e.left-n.left,this.offSetCoordinates.y=e.top-n.top}this.mounted=!0}render(){const i=a.Children.toArray(this.props.children),t=this.getContent(i),e=this.getActionBar(i),n=this.getCurrentZIndex(),d=o.classNames("k-window",this.props.className,{[`k-window-${this.props.themeColor}`]:this.props.themeColor,"k-window-minimized":this.state.stage==="MINIMIZED","k-focus":this.state.focused}),r=a.createElement(o.ZIndexContext.Provider,{value:n},a.createElement(a.Fragment,null,this.props.modal&&a.createElement("div",{className:"k-overlay",style:{zIndex:n,...this.props.overlayStyle}}),a.createElement("div",{id:this.props.id,[u.DATA_DIALOGS_ID]:this._id,tabIndex:0,role:"dialog","aria-labelledby":this.titleId,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,ref:l=>{this.windowElement=l,this.element=l},className:d,style:{top:this.top,left:this.left,width:this.width,height:this.height||"",zIndex:n,...this.props.style}},a.createElement(k.MiddleLayerOptimization,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},a.createElement(o.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,autoScroll:!1,ref:l=>this.draggable=l},a.createElement(N.WindowTitleBar,{stage:this.windowStage,onDoubleClick:this.props.doubleClickStageChange?this.handleDoubleClick:void 0,onMinimizeButtonClick:this.handleMinimize,onFullScreenButtonClick:this.handleFullscreen,onRestoreButtonClick:this.handleRestore,onCloseButtonClick:this.handleCloseWindow,closeButton:this.props.closeButton,minimizeButton:this.props.minimizeButton,maximizeButton:this.props.maximizeButton,restoreButton:this.props.restoreButton,id:this.titleId},this.props.title)),this.windowStage!==s.windowStage.MINIMIZED?a.createElement(a.Fragment,null,a.createElement("div",{className:"k-window-content"},t),e):null,this.windowStage===s.windowStage.DEFAULT&&this.props.resizable?a.createElement(U.ResizeHandlers,{onResize:this.handleResize}):null),this.showLicenseWatermark&&a.createElement(o.WatermarkOverlay,null))));return o.canUseDOM?this.props.appendTo!==null?z.createPortal(r,this.props.appendTo||document.body):r:null}get top(){return this.windowStage!==s.windowStage.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==s.windowStage.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let i=this.props.width||this.state.width;if(this.windowStage===s.windowStage.FULLSCREEN){if(this.props.appendTo)return i=this.props.appendTo.offsetWidth,i;const t=this.getWindow();i=t?t.innerWidth:0}return i}get height(){let i=this.props.height||this.state.height;if(this.windowStage===s.windowStage.FULLSCREEN){if(this.props.appendTo)return i=this.props.appendTo.offsetHeight,i;const t=this.getWindow();i=t?t.innerHeight:0}else this.windowStage===s.windowStage.MINIMIZED&&(i=0);return i}get windowStage(){return this.props.stage||this.state.stage}getActionBar(i){return i.filter(t=>t&&t.type===v.WindowActionsBar)}getContent(i){return i.filter(t=>t&&t.type!==v.WindowActionsBar)}generateTitleId(){return"window-title-"+this._id}};g.displayName="Window",g.propTypes={width:h.number,height:h.number,left:h.number,top:h.number,initialWidth:h.number,initialHeight:h.number,initialLeft:h.number,initialTop:h.number,minWidth:h.number,minHeight:h.number,resizable:h.bool,draggable:h.bool,title:h.any,shouldUpdateOnDrag:h.bool,stage:h.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),className:h.string,id:h.string,style:h.object,overlayStyle:h.object,autoFocus:h.bool},g.defaultProps={minWidth:E,minHeight:C,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0,autoFocus:!0},g.contextType=o.ZIndexContext;let f=g;const B=o.createPropsContext(),F=o.withIdHOC(o.withPropsContext(B,f));F.displayName="KendoReactWindow";exports.Window=F;exports.WindowPropsContext=B;exports.WindowWithoutContext=f;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react"),R=require("react-dom"),h=require("prop-types"),x=require("./WindowTitlebar.js"),o=require("@progress/kendo-react-common"),N=require("./WindowResizeHandlers.js"),U=require("./MiddleLayerOptimization.js"),s=require("./StageEnum.js"),W=require("./WindowActionsBar.js"),f=require("./constants.js"),v=require("./utils.js");function M(w){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(w){for(const t in w)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(w,t);Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:()=>w[t]})}}return i.default=w,Object.freeze(i)}const r=M(F),z=M(R),S=300,m=300,E=120,C=100,p=5,g=class g extends r.Component{constructor(i){super(i),this.context=0,this.draggable=null,this.offSetCoordinates={x:0,y:0},this.titleId=this.generateTitleId(),this.mounted=!1,this.activeElement=null,this.onKeyDown=t=>{if(this.props.modal&&o.keepFocusInContainer(t,this.element),t.target!==t.currentTarget)return;const e=this.props.minWidth||E,n=this.props.minHeight||C;if((t.metaKey||t.ctrlKey)&&this.props.resizable){switch(t.keyCode){case o.Keys.up:t.preventDefault(),n<=this.height-p&&this.setState({height:this.height-p});break;case o.Keys.down:t.preventDefault(),this.setState({height:this.height+p});break;case o.Keys.left:e<=this.width-p&&this.setState({width:this.width-p});break;case o.Keys.right:this.setState({width:this.width+p});break;default:return}this.dispatchMoveEvent(this.props.onResize,t,!1,void 0);return}if(t.altKey){switch(t.keyCode){case o.Keys.up:this.windowStage===s.windowStage.MINIMIZED?(this.handleRestore(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.DEFAULT})):this.windowStage===s.windowStage.DEFAULT&&(this.handleFullscreen(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.FULLSCREEN}));break;case o.Keys.down:this.windowStage===s.windowStage.FULLSCREEN?(this.handleRestore(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.DEFAULT})):this.windowStage===s.windowStage.DEFAULT&&(this.handleMinimize(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.MINIMIZED}));break}return}if(!t.ctrlKey)switch(t.keyCode){case o.Keys.esc:this.props.onClose&&this.handleCloseWindow(t);return;case o.Keys.up:this.setState(a=>({top:a.top-p}));break;case o.Keys.down:this.setState(a=>({top:a.top+p}));break;case o.Keys.left:this.setState(a=>({left:a.left-p}));break;case o.Keys.right:this.setState(a=>({left:a.left+p}));break;default:return}this.dispatchMoveEvent(this.props.onMove,t,!1,void 0)},this.onPress=t=>{const e=t.event;this.windowCoordinatesState.differenceLeft=e.pageX-this.left,this.windowCoordinatesState.differenceTop=e.pageY-this.top},this.onDrag=t=>{const e=t.event;e.originalEvent.preventDefault(),this.windowStage!==s.windowStage.FULLSCREEN&&this.props.draggable&&(this.setState({top:Math.max(e.pageY-this.windowCoordinatesState.differenceTop,0),left:e.pageX-this.windowCoordinatesState.differenceLeft,isDragging:!0}),this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!1))},this.onRelease=t=>{const e=t.event;this.windowStage!==s.windowStage.FULLSCREEN&&this.props.draggable&&this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!0),this.setState({isDragging:!1})},this.onFocus=()=>{this._blurTimeout?(clearTimeout(this._blurTimeout),this._blurTimeout=void 0):this.setState({focused:!0,zIndex:v.getMaxZIndex(this.getCurrentZIndex(),this.getDocument(),this._id)})},this.onBlur=()=>{clearTimeout(this._blurTimeout);const t=this.getWindow();t&&(this._blurTimeout=t.setTimeout(()=>{this.mounted&&this.setState({focused:!1}),this._blurTimeout=void 0}))},this.getInitialTop=()=>{if(this.props.top!==void 0)return this.props.top;if(this.props.initialTop!==void 0)return this.props.initialTop;let t=m;if(this.props.height!==void 0?t=this.props.height:this.props.initialHeight!==void 0&&(t=this.props.initialHeight),this.props.appendTo)return this.props.appendTo.offsetHeight/2-t/2;const e=this.getWindow();return e?e.innerHeight/2-t/2:0},this.getInitialLeft=()=>{if(this.props.left!==void 0)return this.props.left;if(this.props.initialLeft!==void 0)return this.props.initialLeft;let t=S;if(this.props.width!==void 0?t=this.props.width:this.props.initialWidth!==void 0&&(t=this.props.initialWidth),this.props.appendTo)return this.props.appendTo.offsetWidth/2-t/2;const e=this.getWindow();return e?e.innerWidth/2-t/2:0},this.getInitialWidth=()=>{let t=S;return this.props.width!==void 0?t=this.props.width:this.props.initialWidth!==void 0&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=m;return this.props.height!==void 0?t=this.props.height:this.props.initialHeight!==void 0&&(t=this.props.initialHeight),t},this.handleMinimize=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height,this.setState({stage:s.windowStage.MINIMIZED,height:0}),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.MINIMIZED})},this.handleFullscreen=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height;const e=this.getWindow(),n=e?e.innerWidth:0,d=e?e.innerHeight:0;this.setState({left:0,top:0,width:this.props.appendTo?this.props.appendTo.offsetWidth:n,height:this.props.appendTo?this.props.appendTo.offsetHeight:d,stage:s.windowStage.FULLSCREEN}),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===s.windowStage.FULLSCREEN?this.setState({stage:s.windowStage.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===s.windowStage.MINIMIZED&&this.setState({stage:s.windowStage.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),o.dispatchEvent(this.props.onStageChange,t,this,{state:s.windowStage.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),o.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===s.windowStage.FULLSCREEN||this.windowStage===s.windowStage.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{const n=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,d=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,a=this.width,l=this.height,D=this.props.minWidth||E,I=this.props.minHeight||C,T=this.top-d,b=this.left-n,L=n-this.left,y=d-this.top,c=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&I-(l+T)<0&&(this.top>0&&(c.height=l+T),c.top=d),e.direction.indexOf("s")>=0&&I-y<0&&(c.height=y),e.direction.indexOf("w")>=0&&D-(a+b)<0&&(this.left>0&&(c.width=a+b),c.left=n),e.direction.indexOf("e")>=0&&D-L<0&&(c.width=L),this.setState(c),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,n,d)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:n,end:d,target:this,left:this.state.left,top:this.state.top,width:this.state.width,hight:this.state.height,height:this.state.height})},this.handleBrowserWindowResize=()=>{if(this.windowStage===s.windowStage.FULLSCREEN){const t=this.getWindow(),e=t?t.innerWidth:0,n=t?t.innerHeight:0;this.setState({width:this.props.appendTo?this.props.appendTo.offsetWidth:e,height:this.props.appendTo?this.props.appendTo.offsetHeight:n})}},this.getCurrentZIndex=()=>!this.state||this.context===void 0?this.context?this.context:f.DEFAULT_DIALOGS_ZINDEX:this.state.zIndex>(this.context?this.context+f.ZINDEX_DIALOGS_STEP:0)?this.state.zIndex:this.context+f.ZINDEX_DIALOGS_STEP,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},this.state={stage:this.props.stage||s.windowStage.DEFAULT,isDragging:!1,top:0,left:0,width:S,height:m,focused:!0,zIndex:f.DEFAULT_DIALOGS_ZINDEX},this.activeElement=document.activeElement}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){this.element&&this.props.autoFocus&&this.element.focus({preventScroll:!0});const i=this.getWindow();i&&i.addEventListener("resize",this.handleBrowserWindowResize),this.setState({stage:this.props.stage||s.windowStage.DEFAULT,isDragging:!1,top:this.getInitialTop(),left:this.getInitialLeft(),width:this.getInitialWidth(),height:this.getInitialHeight(),focused:!0,zIndex:v.getMaxZIndex(this.getCurrentZIndex(),this.getDocument(),this._id)}),this.windowCoordinatesState={leftBeforeAction:this.getInitialLeft(),topBeforeAction:this.getInitialTop(),widthBeforeAction:this.getInitialWidth(),heightBeforeAction:this.getInitialHeight()};const t=this.getDocument();if(this.props.appendTo&&t){const e=this.props.appendTo.getBoundingClientRect(),n=t.body.getBoundingClientRect();this.offSetCoordinates.x=e.left-n.left,this.offSetCoordinates.y=e.top-n.top}this.mounted=!0}componentWillUnmount(){const i=this.getWindow();i&&i.removeEventListener("resize",this.handleBrowserWindowResize),this.mounted=!1,setTimeout(()=>{var t;!this.element&&this.activeElement&&document&&(document.contains(this.activeElement)?this.activeElement.focus({preventScroll:!0}):this.activeElement.id&&((t=document.getElementById(this.activeElement.id))==null||t.focus({preventScroll:!0})))})}componentDidUpdate(i){this.props.left&&i.left!==this.props.left&&this.setState({left:this.props.left}),this.props.top&&i.top!==this.props.top&&this.setState({top:this.props.top});const t=this.getDocument();if(this.props.appendTo&&t){const e=this.props.appendTo.getBoundingClientRect(),n=t.body.getBoundingClientRect();this.offSetCoordinates.x=e.left-n.left,this.offSetCoordinates.y=e.top-n.top}this.mounted=!0}render(){const i=r.Children.toArray(this.props.children),t=this.getContent(i),e=this.getActionBar(i),n=this.getCurrentZIndex(),d=o.classNames("k-window",this.props.className,{[`k-window-${this.props.themeColor}`]:this.props.themeColor,"k-window-minimized":this.state.stage==="MINIMIZED","k-focus":this.state.focused}),a=r.createElement(o.ZIndexContext.Provider,{value:n},r.createElement(r.Fragment,null,this.props.modal&&r.createElement("div",{className:"k-overlay",style:{zIndex:n,...this.props.overlayStyle}}),r.createElement("div",{id:this.props.id,[f.DATA_DIALOGS_ID]:this._id,tabIndex:0,role:"dialog","aria-labelledby":this.titleId,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,ref:l=>{this.windowElement=l,this.element=l},className:d,style:{top:this.top,left:this.left,width:this.width,height:this.height||"",zIndex:n,...this.props.style}},r.createElement(U.MiddleLayerOptimization,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},r.createElement(o.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,autoScroll:!1,ref:l=>this.draggable=l},r.createElement(x.WindowTitleBar,{stage:this.windowStage,onDoubleClick:this.props.doubleClickStageChange?this.handleDoubleClick:void 0,onMinimizeButtonClick:this.handleMinimize,onFullScreenButtonClick:this.handleFullscreen,onRestoreButtonClick:this.handleRestore,onCloseButtonClick:this.handleCloseWindow,closeButton:this.props.closeButton,minimizeButton:this.props.minimizeButton,maximizeButton:this.props.maximizeButton,restoreButton:this.props.restoreButton,id:this.titleId},this.props.title)),this.windowStage!==s.windowStage.MINIMIZED?r.createElement(r.Fragment,null,r.createElement("div",{className:"k-window-content"},t),e):null,this.windowStage===s.windowStage.DEFAULT&&this.props.resizable?r.createElement(N.ResizeHandlers,{onResize:this.handleResize}):null))));return o.canUseDOM?this.props.appendTo!==null?z.createPortal(a,this.props.appendTo||document.body):a:null}get top(){return this.windowStage!==s.windowStage.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==s.windowStage.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let i=this.props.width||this.state.width;if(this.windowStage===s.windowStage.FULLSCREEN){if(this.props.appendTo)return i=this.props.appendTo.offsetWidth,i;const t=this.getWindow();i=t?t.innerWidth:0}return i}get height(){let i=this.props.height||this.state.height;if(this.windowStage===s.windowStage.FULLSCREEN){if(this.props.appendTo)return i=this.props.appendTo.offsetHeight,i;const t=this.getWindow();i=t?t.innerHeight:0}else this.windowStage===s.windowStage.MINIMIZED&&(i=0);return i}get windowStage(){return this.props.stage||this.state.stage}getActionBar(i){return i.filter(t=>t&&t.type===W.WindowActionsBar)}getContent(i){return i.filter(t=>t&&t.type!==W.WindowActionsBar)}generateTitleId(){return"window-title-"+this._id}};g.displayName="Window",g.propTypes={width:h.number,height:h.number,left:h.number,top:h.number,initialWidth:h.number,initialHeight:h.number,initialLeft:h.number,initialTop:h.number,minWidth:h.number,minHeight:h.number,resizable:h.bool,draggable:h.bool,title:h.any,shouldUpdateOnDrag:h.bool,stage:h.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),className:h.string,id:h.string,style:h.object,overlayStyle:h.object,autoFocus:h.bool},g.defaultProps={minWidth:E,minHeight:C,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0,autoFocus:!0},g.contextType=o.ZIndexContext;let u=g;const A=o.createPropsContext(),B=o.withIdHOC(o.withPropsContext(A,u));B.displayName="KendoReactWindow";exports.Window=B;exports.WindowPropsContext=A;exports.WindowWithoutContext=u;
|
package/Window.mjs
CHANGED
|
@@ -6,21 +6,20 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as h from "react";
|
|
9
|
-
import * as
|
|
9
|
+
import * as A from "react-dom";
|
|
10
10
|
import n from "prop-types";
|
|
11
|
-
import { WindowTitleBar as
|
|
12
|
-
import { keepFocusInContainer as
|
|
13
|
-
import { ResizeHandlers as
|
|
14
|
-
import { MiddleLayerOptimization as
|
|
11
|
+
import { WindowTitleBar as B } from "./WindowTitlebar.mjs";
|
|
12
|
+
import { keepFocusInContainer as R, Keys as a, dispatchEvent as l, ZIndexContext as W, classNames as x, Draggable as N, canUseDOM as U, createPropsContext as H, withIdHOC as z, withPropsContext as k } from "@progress/kendo-react-common";
|
|
13
|
+
import { ResizeHandlers as _ } from "./WindowResizeHandlers.mjs";
|
|
14
|
+
import { MiddleLayerOptimization as Z } from "./MiddleLayerOptimization.mjs";
|
|
15
15
|
import { windowStage as i } from "./StageEnum.mjs";
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import { getMaxZIndex as A } from "./utils.mjs";
|
|
16
|
+
import { WindowActionsBar as M } from "./WindowActionsBar.mjs";
|
|
17
|
+
import { DEFAULT_DIALOGS_ZINDEX as v, ZINDEX_DIALOGS_STEP as F, DATA_DIALOGS_ID as O } from "./constants.mjs";
|
|
18
|
+
import { getMaxZIndex as y } from "./utils.mjs";
|
|
20
19
|
const u = 300, w = 300, m = 120, S = 100, d = 5, f = class f extends h.Component {
|
|
21
20
|
constructor(s) {
|
|
22
|
-
super(s), this.context = 0, this.draggable = null, this.offSetCoordinates = { x: 0, y: 0 }, this.titleId = this.generateTitleId(), this.mounted = !1, this.
|
|
23
|
-
if (this.props.modal &&
|
|
21
|
+
super(s), this.context = 0, this.draggable = null, this.offSetCoordinates = { x: 0, y: 0 }, this.titleId = this.generateTitleId(), this.mounted = !1, this.activeElement = null, this.onKeyDown = (t) => {
|
|
22
|
+
if (this.props.modal && R(t, this.element), t.target !== t.currentTarget)
|
|
24
23
|
return;
|
|
25
24
|
const e = this.props.minWidth || m, o = this.props.minHeight || S;
|
|
26
25
|
if ((t.metaKey || t.ctrlKey) && this.props.resizable) {
|
|
@@ -93,7 +92,7 @@ const u = 300, w = 300, m = 120, S = 100, d = 5, f = class f extends h.Component
|
|
|
93
92
|
}, this.onFocus = () => {
|
|
94
93
|
this._blurTimeout ? (clearTimeout(this._blurTimeout), this._blurTimeout = void 0) : this.setState({
|
|
95
94
|
focused: !0,
|
|
96
|
-
zIndex:
|
|
95
|
+
zIndex: y(this.getCurrentZIndex(), this.getDocument(), this._id)
|
|
97
96
|
});
|
|
98
97
|
}, this.onBlur = () => {
|
|
99
98
|
clearTimeout(this._blurTimeout);
|
|
@@ -180,10 +179,10 @@ const u = 300, w = 300, m = 120, S = 100, d = 5, f = class f extends h.Component
|
|
|
180
179
|
height: this.props.appendTo ? this.props.appendTo.offsetHeight : o
|
|
181
180
|
});
|
|
182
181
|
}
|
|
183
|
-
}, this.getCurrentZIndex = () => !this.state || this.context === void 0 ? this.context ? this.context :
|
|
182
|
+
}, this.getCurrentZIndex = () => !this.state || this.context === void 0 ? this.context ? this.context : v : this.state.zIndex > (this.context ? this.context + F : 0) ? this.state.zIndex : this.context + F, this.getDocument = () => this.props.appendTo ? this.props.appendTo.ownerDocument : document, this.getWindow = () => {
|
|
184
183
|
const t = this.getDocument();
|
|
185
184
|
return t && t.defaultView;
|
|
186
|
-
},
|
|
185
|
+
}, this.state = {
|
|
187
186
|
stage: this.props.stage || i.DEFAULT,
|
|
188
187
|
isDragging: !1,
|
|
189
188
|
top: 0,
|
|
@@ -191,7 +190,7 @@ const u = 300, w = 300, m = 120, S = 100, d = 5, f = class f extends h.Component
|
|
|
191
190
|
width: u,
|
|
192
191
|
height: w,
|
|
193
192
|
focused: !0,
|
|
194
|
-
zIndex:
|
|
193
|
+
zIndex: v
|
|
195
194
|
}, this.activeElement = document.activeElement;
|
|
196
195
|
}
|
|
197
196
|
get _id() {
|
|
@@ -211,7 +210,7 @@ const u = 300, w = 300, m = 120, S = 100, d = 5, f = class f extends h.Component
|
|
|
211
210
|
width: this.getInitialWidth(),
|
|
212
211
|
height: this.getInitialHeight(),
|
|
213
212
|
focused: !0,
|
|
214
|
-
zIndex:
|
|
213
|
+
zIndex: y(this.getCurrentZIndex(), this.getDocument(), this._id)
|
|
215
214
|
}), this.windowCoordinatesState = {
|
|
216
215
|
leftBeforeAction: this.getInitialLeft(),
|
|
217
216
|
topBeforeAction: this.getInitialTop(),
|
|
@@ -251,7 +250,7 @@ const u = 300, w = 300, m = 120, S = 100, d = 5, f = class f extends h.Component
|
|
|
251
250
|
* @hidden
|
|
252
251
|
*/
|
|
253
252
|
render() {
|
|
254
|
-
const s = h.Children.toArray(this.props.children), t = this.getContent(s), e = this.getActionBar(s), o = this.getCurrentZIndex(), p =
|
|
253
|
+
const s = h.Children.toArray(this.props.children), t = this.getContent(s), e = this.getActionBar(s), o = this.getCurrentZIndex(), p = x("k-window", this.props.className, {
|
|
255
254
|
[`k-window-${this.props.themeColor}`]: this.props.themeColor,
|
|
256
255
|
"k-window-minimized": this.state.stage === "MINIMIZED",
|
|
257
256
|
"k-focus": this.state.focused
|
|
@@ -268,7 +267,7 @@ const u = 300, w = 300, m = 120, S = 100, d = 5, f = class f extends h.Component
|
|
|
268
267
|
"div",
|
|
269
268
|
{
|
|
270
269
|
id: this.props.id,
|
|
271
|
-
[
|
|
270
|
+
[O]: this._id,
|
|
272
271
|
tabIndex: 0,
|
|
273
272
|
role: "dialog",
|
|
274
273
|
"aria-labelledby": this.titleId,
|
|
@@ -289,13 +288,13 @@ const u = 300, w = 300, m = 120, S = 100, d = 5, f = class f extends h.Component
|
|
|
289
288
|
}
|
|
290
289
|
},
|
|
291
290
|
/* @__PURE__ */ h.createElement(
|
|
292
|
-
|
|
291
|
+
Z,
|
|
293
292
|
{
|
|
294
293
|
shouldUpdateOnDrag: this.props.shouldUpdateOnDrag || !1,
|
|
295
294
|
isDragging: this.state.isDragging
|
|
296
295
|
},
|
|
297
296
|
/* @__PURE__ */ h.createElement(
|
|
298
|
-
|
|
297
|
+
N,
|
|
299
298
|
{
|
|
300
299
|
onPress: this.onPress,
|
|
301
300
|
onDrag: this.onDrag,
|
|
@@ -304,7 +303,7 @@ const u = 300, w = 300, m = 120, S = 100, d = 5, f = class f extends h.Component
|
|
|
304
303
|
ref: (c) => this.draggable = c
|
|
305
304
|
},
|
|
306
305
|
/* @__PURE__ */ h.createElement(
|
|
307
|
-
|
|
306
|
+
B,
|
|
308
307
|
{
|
|
309
308
|
stage: this.windowStage,
|
|
310
309
|
onDoubleClick: this.props.doubleClickStageChange ? this.handleDoubleClick : void 0,
|
|
@@ -322,11 +321,10 @@ const u = 300, w = 300, m = 120, S = 100, d = 5, f = class f extends h.Component
|
|
|
322
321
|
)
|
|
323
322
|
),
|
|
324
323
|
this.windowStage !== i.MINIMIZED ? /* @__PURE__ */ h.createElement(h.Fragment, null, /* @__PURE__ */ h.createElement("div", { className: "k-window-content" }, t), e) : null,
|
|
325
|
-
this.windowStage === i.DEFAULT && this.props.resizable ? /* @__PURE__ */ h.createElement(
|
|
326
|
-
)
|
|
327
|
-
this.showLicenseWatermark && /* @__PURE__ */ h.createElement(z, null)
|
|
324
|
+
this.windowStage === i.DEFAULT && this.props.resizable ? /* @__PURE__ */ h.createElement(_, { onResize: this.handleResize }) : null
|
|
325
|
+
)
|
|
328
326
|
)));
|
|
329
|
-
return
|
|
327
|
+
return U ? this.props.appendTo !== null ? A.createPortal(r, this.props.appendTo || document.body) : r : null;
|
|
330
328
|
}
|
|
331
329
|
// Getters
|
|
332
330
|
get top() {
|
|
@@ -360,10 +358,10 @@ const u = 300, w = 300, m = 120, S = 100, d = 5, f = class f extends h.Component
|
|
|
360
358
|
return this.props.stage || this.state.stage;
|
|
361
359
|
}
|
|
362
360
|
getActionBar(s) {
|
|
363
|
-
return s.filter((t) => t && t.type ===
|
|
361
|
+
return s.filter((t) => t && t.type === M);
|
|
364
362
|
}
|
|
365
363
|
getContent(s) {
|
|
366
|
-
return s.filter((t) => t && t.type !==
|
|
364
|
+
return s.filter((t) => t && t.type !== M);
|
|
367
365
|
}
|
|
368
366
|
generateTitleId() {
|
|
369
367
|
return "window-title-" + this._id;
|
|
@@ -400,15 +398,15 @@ f.displayName = "Window", f.propTypes = {
|
|
|
400
398
|
autoFocus: !0
|
|
401
399
|
}, f.contextType = W;
|
|
402
400
|
let E = f;
|
|
403
|
-
const
|
|
404
|
-
|
|
405
|
-
|
|
401
|
+
const P = H(), K = z(
|
|
402
|
+
k(
|
|
403
|
+
P,
|
|
406
404
|
E
|
|
407
405
|
)
|
|
408
406
|
);
|
|
409
|
-
|
|
407
|
+
K.displayName = "KendoReactWindow";
|
|
410
408
|
export {
|
|
411
|
-
|
|
412
|
-
|
|
409
|
+
K as Window,
|
|
410
|
+
P as WindowPropsContext,
|
|
413
411
|
E as WindowWithoutContext
|
|
414
412
|
};
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-buttons","@progress/kendo-svg-icons","@progress/kendo-react-common","@progress/kendo-react-intl"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactDialogs={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactButtons,t.KendoSvgIcons,t.KendoReactCommon,t.KendoReactIntl)}(this,(function(t,e,i,s,o,n,a,r){"use strict";function h(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,s.get?s:{enumerable:!0,get:function(){return t[i]}})}})),e.default=t,Object.freeze(e)}var l=h(e),d=h(i);const p=({children:t,onCloseButtonClick:e,id:i,closeIcon:s})=>l.createElement("div",{className:"k-window-titlebar k-dialog-titlebar",id:i},l.createElement("span",{className:"k-window-title k-dialog-title"},t),s&&l.createElement("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions"},l.createElement(o.Button,{role:"button","aria-label":"Close",onClick:e,icon:"x",svgIcon:n.xIcon,fillMode:"flat",className:"k-window-titlebar-action k-dialog-titlebar-action"}))),c=t=>{const e={layout:"stretched",...t},{layout:i,children:s}=e,o=a.classNames("k-actions","k-actions-horizontal","k-window-actions k-dialog-actions",{[`k-actions-${i}`]:i});return l.createElement("div",{className:o},s)};c.propTypes={children:s.any,layout:s.oneOf(["start","center","end","stretched"])};const g={name:"@progress/kendo-react-dialogs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"$VERSION",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},u="data-windowid",m=10002,w=(t,e,i)=>{let s=t;if(e&&e.defaultView){const t=e.querySelectorAll(".k-window:not(.k-dialog), .k-dialog-wrapper");let o=!1;return t.forEach((t=>{const n=e.defaultView.getComputedStyle(t,null);if(t.getAttribute(u)!==i&&null!==n.zIndex){const t=parseInt(n.zIndex,10);t>=s&&(s=t,o=!0)}})),o?s+2:s}return s},f=class extends l.Component{constructor(t){super(t),this.context=0,this.titleId=this.generateTitleId(),this.contentId=this.generateContentId(),this.showLicenseWatermark=!1,this.activeElement=null,this.onCloseDialog=t=>{t.preventDefault(),a.dispatchEvent(this.props.onClose,t,this,void 0)},this.onKeyDown=t=>{t.keyCode===a.Keys.esc&&this.props.onClose&&(t.preventDefault(),this.onCloseDialog(t)),a.keepFocusInContainer(t,this.element)},this.getCurrentZIndex=()=>this.state&&void 0!==this.context?this.state.zIndex>(this.context?this.context+2:0)?this.state.zIndex:this.context+2:this.context?this.context:m,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,a.validatePackage(g),this.showLicenseWatermark=a.shouldShowValidationUI(g),this.activeElement=a.getActiveElement(document)}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){if(this.element){if(this.props.autoFocus&&!this.props.autoFocusedElement)this.element.focus();else if(this.props.autoFocus&&this.props.autoFocusedElement)this.element.focus();else if(!this.props.autoFocus&&this.props.autoFocusedElement){const t=this.element.querySelector(this.props.autoFocusedElement);t&&t.focus()}else{const t=[...a.FOCUSABLE_ELEMENTS].map((t=>t+":not(.k-dialog-titlebar *)"));a.focusFirstFocusableChild(this.element,t)}this.setState({zIndex:w(this.getCurrentZIndex(),this.getDocument(),this._id)})}}componentWillUnmount(){setTimeout((()=>{var t;!this.element&&this.activeElement&&document&&(document.contains(this.activeElement)?this.activeElement.focus():this.activeElement.id&&(null==(t=document.getElementById(this.activeElement.id))||t.focus()))}))}render(){const t=void 0!==this.props.id?this.props.id:this.titleId,{title:e,width:i,height:s,children:o,minWidth:n,dir:r,style:h,contentStyle:c,modal:g=!0}=this.props,m=l.Children.toArray(o),w=this.getContent(m),f=this.getActionBar(m),E=e?{"aria-labelledby":t}:null,C=void 0===this.props.closeIcon||this.props.closeIcon,v=this.getCurrentZIndex(),I=l.createElement(a.ZIndexContext.Provider,{value:v},l.createElement("div",{[u]:this._id,className:"k-dialog-wrapper"+(this.props.className?" "+this.props.className:""),onKeyDown:this.onKeyDown,tabIndex:0,dir:r,style:{zIndex:v,...h},ref:t=>this.element=t},g&&l.createElement("div",{className:"k-overlay",style:this.props.overlayStyle}),l.createElement("div",{...E,className:a.classNames("k-window k-dialog",{[`k-window-${this.props.themeColor}`]:this.props.themeColor}),role:"dialog","aria-labelledby":t,"aria-modal":!0,"aria-describedby":this.contentId,style:{width:i,height:s,minWidth:n}},this.props.title&&l.createElement(p,{closeIcon:C,onCloseButtonClick:this.onCloseDialog,id:t},e),l.createElement("div",{className:"k-window-content k-dialog-content",style:c,id:this.contentId},w),f,this.showLicenseWatermark&&l.createElement(a.WatermarkOverlay,null))));return a.canUseDOM?null!==this.props.appendTo?d.createPortal(I,this.props.appendTo||document.body):I:null}getActionBar(t){return t.filter((t=>t&&t.type===c))}getContent(t){return t.filter((t=>t&&t.type!==c))}generateTitleId(){return"dialog-title-"+this._id}generateContentId(){return"dialog-content-"+this._id}};f.displayName="Dialog",f.propTypes={title:s.any,id:s.string,dir:s.string,style:s.object,closeIcon:s.bool,width:s.oneOfType([s.number,s.string]),height:s.oneOfType([s.number,s.string]),minWidth:s.oneOfType([s.number,s.string]),autoFocus:s.bool},f.defaultProps={autoFocus:!1},f.contextType=a.ZIndexContext;let E=f;const C=a.createPropsContext(),v=a.withIdHOC(a.withPropsContext(C,E));v.displayName="KendoReactDialog";var I=(t=>(t.DEFAULT="DEFAULT",t.FULLSCREEN="FULLSCREEN",t.MINIMIZED="MINIMIZED",t))(I||{});const S="dialogs.windowMaximizeButton",k="dialogs.windowMinimizeButton",y="dialogs.windowRestoreButton",b="dialogs.windowCloseButton",D={[S]:"maximize",[k]:"minimize",[y]:"restore",[b]:"close"},T=t=>{const{children:e,onCloseButtonClick:i,onMinimizeButtonClick:s,onFullScreenButtonClick:a,onRestoreButtonClick:h,onDoubleClick:d,stage:p,forwardedRef:c,id:g}=t,u=r.useLocalization(),m=t.minimizeButton?l.createElement(t.minimizeButton,{onClick:s,stage:p}):l.createElement(o.Button,{fillMode:"flat",icon:"window-minimize",svgIcon:n.windowMinimizeIcon,className:"k-window-titlebar-action",onClick:s,"aria-label":u.toLanguageString(k,D[k])}),w=t.maximizeButton?l.createElement(t.maximizeButton,{onClick:a,stage:p}):l.createElement(o.Button,{fillMode:"flat",icon:"window-maximize",svgIcon:n.windowIcon,className:"k-window-titlebar-action",onClick:a,"aria-label":u.toLanguageString(S,D[S])}),f=t.restoreButton?l.createElement(t.restoreButton,{onClick:h,stage:p}):l.createElement(o.Button,{fillMode:"flat",icon:"window-restore",svgIcon:n.windowRestoreIcon,className:"k-window-titlebar-action",onClick:h,"aria-label":u.toLanguageString(y,D[y])}),E=t.closeButton?l.createElement(t.closeButton,{onClick:i,stage:p}):l.createElement(o.Button,{fillMode:"flat",icon:"x",svgIcon:n.xIcon,className:"k-window-titlebar-action",onClick:i,"aria-label":u.toLanguageString(b,D[b])});return l.createElement("div",{className:"k-window-titlebar",style:{touchAction:"none"},ref:c,onDoubleClick:d},l.createElement("span",{className:"k-window-title",id:g},e||""),l.createElement("div",{className:"k-window-titlebar-actions"},p===I.DEFAULT&&m,p===I.DEFAULT&&w,p!==I.DEFAULT&&f,E))},x=l.forwardRef(((t,e)=>l.createElement(T,{...t,forwardedRef:e}))),B=["n","e","s","w","se","sw","ne","nw"];class L extends l.Component{render(){return l.createElement("div",{className:"k-resize-handles-wrapper"}," ",B.map(((t,e)=>l.createElement(a.Draggable,{key:e,onDrag:e=>{const{event:i}=e;i.originalEvent.preventDefault(),this.props.onResize(i,{end:!1,direction:t})},onRelease:e=>{const{event:i}=e;i.originalEvent.preventDefault(),this.props.onResize(i,{end:!0,direction:t})}},l.createElement("div",{className:"k-resize-handle k-resize-"+t,style:{display:"block",touchAction:"none",userSelect:"none"}})))))}}class N extends l.Component{shouldComponentUpdate(t){return t.shouldUpdateOnDrag||!t.isDragging}render(){return this.props.children}}const F=t=>{const e={layout:"end",...t},{layout:i,children:s}=e,o=a.classNames("k-actions","k-window-actions","k-actions-horizontal","k-hstack",{"k-justify-content-start":"start"===i,"k-justify-content-center":"center"===i,"k-justify-content-end":"end"===i,"k-justify-content-stretch":"stretched"===i});return l.createElement("div",{className:o},s)};F.propTypes={children:s.any,layout:s.oneOf(["start","center","end","stretched"])};const R=class extends l.Component{constructor(t){super(t),this.context=0,this.draggable=null,this.offSetCoordinates={x:0,y:0},this.titleId=this.generateTitleId(),this.mounted=!1,this.showLicenseWatermark=!1,this.activeElement=null,this.onKeyDown=t=>{if(this.props.modal&&a.keepFocusInContainer(t,this.element),t.target!==t.currentTarget)return;const e=this.props.minWidth||120,i=this.props.minHeight||100;if((t.metaKey||t.ctrlKey)&&this.props.resizable){switch(t.keyCode){case a.Keys.up:t.preventDefault(),i<=this.height-5&&this.setState({height:this.height-5});break;case a.Keys.down:t.preventDefault(),this.setState({height:this.height+5});break;case a.Keys.left:e<=this.width-5&&this.setState({width:this.width-5});break;case a.Keys.right:this.setState({width:this.width+5});break;default:return}this.dispatchMoveEvent(this.props.onResize,t,!1,void 0)}else if(t.altKey)switch(t.keyCode){case a.Keys.up:this.windowStage===I.MINIMIZED?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:I.DEFAULT})):this.windowStage===I.DEFAULT&&(this.handleFullscreen(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:I.FULLSCREEN}));break;case a.Keys.down:this.windowStage===I.FULLSCREEN?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:I.DEFAULT})):this.windowStage===I.DEFAULT&&(this.handleMinimize(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:I.MINIMIZED}))}else{if(!t.ctrlKey)switch(t.keyCode){case a.Keys.esc:return void(this.props.onClose&&this.handleCloseWindow(t));case a.Keys.up:this.setState((t=>({top:t.top-5})));break;case a.Keys.down:this.setState((t=>({top:t.top+5})));break;case a.Keys.left:this.setState((t=>({left:t.left-5})));break;case a.Keys.right:this.setState((t=>({left:t.left+5})));break;default:return}this.dispatchMoveEvent(this.props.onMove,t,!1,void 0)}},this.onPress=t=>{const e=t.event;this.windowCoordinatesState.differenceLeft=e.pageX-this.left,this.windowCoordinatesState.differenceTop=e.pageY-this.top},this.onDrag=t=>{const e=t.event;e.originalEvent.preventDefault(),this.windowStage!==I.FULLSCREEN&&this.props.draggable&&(this.setState({top:Math.max(e.pageY-this.windowCoordinatesState.differenceTop,0),left:e.pageX-this.windowCoordinatesState.differenceLeft,isDragging:!0}),this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!1))},this.onRelease=t=>{const e=t.event;this.windowStage!==I.FULLSCREEN&&this.props.draggable&&this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!0),this.setState({isDragging:!1})},this.onFocus=()=>{this._blurTimeout?(clearTimeout(this._blurTimeout),this._blurTimeout=void 0):this.setState({focused:!0,zIndex:w(this.getCurrentZIndex(),this.getDocument(),this._id)})},this.onBlur=()=>{clearTimeout(this._blurTimeout);const t=this.getWindow();t&&(this._blurTimeout=t.setTimeout((()=>{this.mounted&&this.setState({focused:!1}),this._blurTimeout=void 0})))},this.getInitialTop=()=>{if(void 0!==this.props.top)return this.props.top;if(void 0!==this.props.initialTop)return this.props.initialTop;let t=300;if(void 0!==this.props.height?t=this.props.height:void 0!==this.props.initialHeight&&(t=this.props.initialHeight),this.props.appendTo)return this.props.appendTo.offsetHeight/2-t/2;const e=this.getWindow();return e?e.innerHeight/2-t/2:0},this.getInitialLeft=()=>{if(void 0!==this.props.left)return this.props.left;if(void 0!==this.props.initialLeft)return this.props.initialLeft;let t=300;if(void 0!==this.props.width?t=this.props.width:void 0!==this.props.initialWidth&&(t=this.props.initialWidth),this.props.appendTo)return this.props.appendTo.offsetWidth/2-t/2;const e=this.getWindow();return e?e.innerWidth/2-t/2:0},this.getInitialWidth=()=>{let t=300;return void 0!==this.props.width?t=this.props.width:void 0!==this.props.initialWidth&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=300;return void 0!==this.props.height?t=this.props.height:void 0!==this.props.initialHeight&&(t=this.props.initialHeight),t},this.handleMinimize=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height,this.setState({stage:I.MINIMIZED,height:0}),a.dispatchEvent(this.props.onStageChange,t,this,{state:I.MINIMIZED})},this.handleFullscreen=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height;const e=this.getWindow(),i=e?e.innerWidth:0,s=e?e.innerHeight:0;this.setState({left:0,top:0,width:this.props.appendTo?this.props.appendTo.offsetWidth:i,height:this.props.appendTo?this.props.appendTo.offsetHeight:s,stage:I.FULLSCREEN}),a.dispatchEvent(this.props.onStageChange,t,this,{state:I.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===I.FULLSCREEN?this.setState({stage:I.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===I.MINIMIZED&&this.setState({stage:I.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),a.dispatchEvent(this.props.onStageChange,t,this,{state:I.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),a.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===I.FULLSCREEN||this.windowStage===I.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{const i=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,s=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,o=this.width,n=this.height,a=this.props.minWidth||120,r=this.props.minHeight||100,h=this.top-s,l=this.left-i,d=i-this.left,p=s-this.top,c=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&r-(n+h)<0&&(this.top>0&&(c.height=n+h),c.top=s),e.direction.indexOf("s")>=0&&r-p<0&&(c.height=p),e.direction.indexOf("w")>=0&&a-(o+l)<0&&(this.left>0&&(c.width=o+l),c.left=i),e.direction.indexOf("e")>=0&&a-d<0&&(c.width=d),this.setState(c),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,i,s)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:i,end:s,target:this,left:this.state.left,top:this.state.top,width:this.state.width,hight:this.state.height,height:this.state.height})},this.handleBrowserWindowResize=()=>{if(this.windowStage===I.FULLSCREEN){const t=this.getWindow(),e=t?t.innerWidth:0,i=t?t.innerHeight:0;this.setState({width:this.props.appendTo?this.props.appendTo.offsetWidth:e,height:this.props.appendTo?this.props.appendTo.offsetHeight:i})}},this.getCurrentZIndex=()=>this.state&&void 0!==this.context?this.state.zIndex>(this.context?this.context+2:0)?this.state.zIndex:this.context+2:this.context?this.context:m,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},a.validatePackage(g),this.showLicenseWatermark=a.shouldShowValidationUI(g),this.state={stage:this.props.stage||I.DEFAULT,isDragging:!1,top:0,left:0,width:300,height:300,focused:!0,zIndex:m},this.activeElement=document.activeElement}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){this.element&&this.props.autoFocus&&this.element.focus({preventScroll:!0});const t=this.getWindow();t&&t.addEventListener("resize",this.handleBrowserWindowResize),this.setState({stage:this.props.stage||I.DEFAULT,isDragging:!1,top:this.getInitialTop(),left:this.getInitialLeft(),width:this.getInitialWidth(),height:this.getInitialHeight(),focused:!0,zIndex:w(this.getCurrentZIndex(),this.getDocument(),this._id)}),this.windowCoordinatesState={leftBeforeAction:this.getInitialLeft(),topBeforeAction:this.getInitialTop(),widthBeforeAction:this.getInitialWidth(),heightBeforeAction:this.getInitialHeight()};const e=this.getDocument();if(this.props.appendTo&&e){const t=this.props.appendTo.getBoundingClientRect(),i=e.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-i.left,this.offSetCoordinates.y=t.top-i.top}this.mounted=!0}componentWillUnmount(){const t=this.getWindow();t&&t.removeEventListener("resize",this.handleBrowserWindowResize),this.mounted=!1,setTimeout((()=>{var t;!this.element&&this.activeElement&&document&&(document.contains(this.activeElement)?this.activeElement.focus({preventScroll:!0}):this.activeElement.id&&(null==(t=document.getElementById(this.activeElement.id))||t.focus({preventScroll:!0})))}))}componentDidUpdate(t){this.props.left&&t.left!==this.props.left&&this.setState({left:this.props.left}),this.props.top&&t.top!==this.props.top&&this.setState({top:this.props.top});const e=this.getDocument();if(this.props.appendTo&&e){const t=this.props.appendTo.getBoundingClientRect(),i=e.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-i.left,this.offSetCoordinates.y=t.top-i.top}this.mounted=!0}render(){const t=l.Children.toArray(this.props.children),e=this.getContent(t),i=this.getActionBar(t),s=this.getCurrentZIndex(),o=a.classNames("k-window",this.props.className,{[`k-window-${this.props.themeColor}`]:this.props.themeColor,"k-window-minimized":"MINIMIZED"===this.state.stage,"k-focus":this.state.focused}),n=l.createElement(a.ZIndexContext.Provider,{value:s},l.createElement(l.Fragment,null,this.props.modal&&l.createElement("div",{className:"k-overlay",style:{zIndex:s,...this.props.overlayStyle}}),l.createElement("div",{id:this.props.id,[u]:this._id,tabIndex:0,role:"dialog","aria-labelledby":this.titleId,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,ref:t=>{this.windowElement=t,this.element=t},className:o,style:{top:this.top,left:this.left,width:this.width,height:this.height||"",zIndex:s,...this.props.style}},l.createElement(N,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},l.createElement(a.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,autoScroll:!1,ref:t=>this.draggable=t},l.createElement(x,{stage:this.windowStage,onDoubleClick:this.props.doubleClickStageChange?this.handleDoubleClick:void 0,onMinimizeButtonClick:this.handleMinimize,onFullScreenButtonClick:this.handleFullscreen,onRestoreButtonClick:this.handleRestore,onCloseButtonClick:this.handleCloseWindow,closeButton:this.props.closeButton,minimizeButton:this.props.minimizeButton,maximizeButton:this.props.maximizeButton,restoreButton:this.props.restoreButton,id:this.titleId},this.props.title)),this.windowStage!==I.MINIMIZED?l.createElement(l.Fragment,null,l.createElement("div",{className:"k-window-content"},e),i):null,this.windowStage===I.DEFAULT&&this.props.resizable?l.createElement(L,{onResize:this.handleResize}):null),this.showLicenseWatermark&&l.createElement(a.WatermarkOverlay,null))));return a.canUseDOM?null!==this.props.appendTo?d.createPortal(n,this.props.appendTo||document.body):n:null}get top(){return this.windowStage!==I.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==I.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let t=this.props.width||this.state.width;if(this.windowStage===I.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetWidth,t;const e=this.getWindow();t=e?e.innerWidth:0}return t}get height(){let t=this.props.height||this.state.height;if(this.windowStage===I.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetHeight,t;const e=this.getWindow();t=e?e.innerHeight:0}else this.windowStage===I.MINIMIZED&&(t=0);return t}get windowStage(){return this.props.stage||this.state.stage}getActionBar(t){return t.filter((t=>t&&t.type===F))}getContent(t){return t.filter((t=>t&&t.type!==F))}generateTitleId(){return"window-title-"+this._id}};R.displayName="Window",R.propTypes={width:s.number,height:s.number,left:s.number,top:s.number,initialWidth:s.number,initialHeight:s.number,initialLeft:s.number,initialTop:s.number,minWidth:s.number,minHeight:s.number,resizable:s.bool,draggable:s.bool,title:s.any,shouldUpdateOnDrag:s.bool,stage:s.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),className:s.string,id:s.string,style:s.object,overlayStyle:s.object,autoFocus:s.bool},R.defaultProps={minWidth:120,minHeight:100,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0,autoFocus:!0},R.contextType=a.ZIndexContext;let z=R;const M=a.createPropsContext(),W=a.withIdHOC(a.withPropsContext(M,z));W.displayName="KendoReactWindow",t.Dialog=v,t.DialogActionsBar=c,t.DialogPropsContext=C,t.Window=W,t.WindowActionsBar=F,t.WindowPropsContext=M,t.WindowWithoutContext=z}));
|
|
15
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-buttons","@progress/kendo-svg-icons","@progress/kendo-react-common","@progress/kendo-react-intl"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactDialogs={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactButtons,t.KendoSvgIcons,t.KendoReactCommon,t.KendoReactIntl)}(this,(function(t,e,i,s,o,n,a,r){"use strict";function h(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,s.get?s:{enumerable:!0,get:function(){return t[i]}})}})),e.default=t,Object.freeze(e)}var l=h(e),d=h(i);const p=({children:t,onCloseButtonClick:e,id:i,closeIcon:s})=>l.createElement("div",{className:"k-window-titlebar k-dialog-titlebar",id:i},l.createElement("span",{className:"k-window-title k-dialog-title"},t),s&&l.createElement("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions"},l.createElement(o.Button,{role:"button","aria-label":"Close",onClick:e,icon:"x",svgIcon:n.xIcon,fillMode:"flat",className:"k-window-titlebar-action k-dialog-titlebar-action"}))),c=t=>{const e={layout:"stretched",...t},{layout:i,children:s}=e,o=a.classNames("k-actions","k-actions-horizontal","k-window-actions k-dialog-actions",{[`k-actions-${i}`]:i});return l.createElement("div",{className:o},s)};c.propTypes={children:s.any,layout:s.oneOf(["start","center","end","stretched"])};const g="data-windowid",u=10002,m=(t,e,i)=>{let s=t;if(e&&e.defaultView){const t=e.querySelectorAll(".k-window:not(.k-dialog), .k-dialog-wrapper");let o=!1;return t.forEach((t=>{const n=e.defaultView.getComputedStyle(t,null);if(t.getAttribute(g)!==i&&null!==n.zIndex){const t=parseInt(n.zIndex,10);t>=s&&(s=t,o=!0)}})),o?s+2:s}return s},w=class extends l.Component{constructor(t){super(t),this.context=0,this.titleId=this.generateTitleId(),this.contentId=this.generateContentId(),this.activeElement=null,this.onCloseDialog=t=>{t.preventDefault(),a.dispatchEvent(this.props.onClose,t,this,void 0)},this.onKeyDown=t=>{t.keyCode===a.Keys.esc&&this.props.onClose&&(t.preventDefault(),this.onCloseDialog(t)),a.keepFocusInContainer(t,this.element)},this.getCurrentZIndex=()=>this.state&&void 0!==this.context?this.state.zIndex>(this.context?this.context+2:0)?this.state.zIndex:this.context+2:this.context?this.context:u,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,this.activeElement=a.getActiveElement(document)}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){if(this.element){if(this.props.autoFocus&&!this.props.autoFocusedElement)this.element.focus();else if(this.props.autoFocus&&this.props.autoFocusedElement)this.element.focus();else if(!this.props.autoFocus&&this.props.autoFocusedElement){const t=this.element.querySelector(this.props.autoFocusedElement);t&&t.focus()}else{const t=[...a.FOCUSABLE_ELEMENTS].map((t=>t+":not(.k-dialog-titlebar *)"));a.focusFirstFocusableChild(this.element,t)}this.setState({zIndex:m(this.getCurrentZIndex(),this.getDocument(),this._id)})}}componentWillUnmount(){setTimeout((()=>{var t;!this.element&&this.activeElement&&document&&(document.contains(this.activeElement)?this.activeElement.focus():this.activeElement.id&&(null==(t=document.getElementById(this.activeElement.id))||t.focus()))}))}render(){const t=void 0!==this.props.id?this.props.id:this.titleId,{title:e,width:i,height:s,children:o,minWidth:n,dir:r,style:h,contentStyle:c,modal:u=!0}=this.props,m=l.Children.toArray(o),w=this.getContent(m),f=this.getActionBar(m),E=e?{"aria-labelledby":t}:null,C=void 0===this.props.closeIcon||this.props.closeIcon,v=this.getCurrentZIndex(),S=l.createElement(a.ZIndexContext.Provider,{value:v},l.createElement("div",{[g]:this._id,className:"k-dialog-wrapper"+(this.props.className?" "+this.props.className:""),onKeyDown:this.onKeyDown,tabIndex:0,dir:r,style:{zIndex:v,...h},ref:t=>this.element=t},u&&l.createElement("div",{className:"k-overlay",style:this.props.overlayStyle}),l.createElement("div",{...E,className:a.classNames("k-window k-dialog",{[`k-window-${this.props.themeColor}`]:this.props.themeColor}),role:"dialog","aria-labelledby":t,"aria-modal":!0,"aria-describedby":this.contentId,style:{width:i,height:s,minWidth:n}},this.props.title&&l.createElement(p,{closeIcon:C,onCloseButtonClick:this.onCloseDialog,id:t},e),l.createElement("div",{className:"k-window-content k-dialog-content",style:c,id:this.contentId},w),f)));return a.canUseDOM?null!==this.props.appendTo?d.createPortal(S,this.props.appendTo||document.body):S:null}getActionBar(t){return t.filter((t=>t&&t.type===c))}getContent(t){return t.filter((t=>t&&t.type!==c))}generateTitleId(){return"dialog-title-"+this._id}generateContentId(){return"dialog-content-"+this._id}};w.displayName="Dialog",w.propTypes={title:s.any,id:s.string,dir:s.string,style:s.object,closeIcon:s.bool,width:s.oneOfType([s.number,s.string]),height:s.oneOfType([s.number,s.string]),minWidth:s.oneOfType([s.number,s.string]),autoFocus:s.bool},w.defaultProps={autoFocus:!1},w.contextType=a.ZIndexContext;let f=w;const E=a.createPropsContext(),C=a.withIdHOC(a.withPropsContext(E,f));C.displayName="KendoReactDialog";var v=(t=>(t.DEFAULT="DEFAULT",t.FULLSCREEN="FULLSCREEN",t.MINIMIZED="MINIMIZED",t))(v||{});const S="dialogs.windowMaximizeButton",I="dialogs.windowMinimizeButton",y="dialogs.windowRestoreButton",b="dialogs.windowCloseButton",k={[S]:"maximize",[I]:"minimize",[y]:"restore",[b]:"close"},D=t=>{const{children:e,onCloseButtonClick:i,onMinimizeButtonClick:s,onFullScreenButtonClick:a,onRestoreButtonClick:h,onDoubleClick:d,stage:p,forwardedRef:c,id:g}=t,u=r.useLocalization(),m=t.minimizeButton?l.createElement(t.minimizeButton,{onClick:s,stage:p}):l.createElement(o.Button,{fillMode:"flat",icon:"window-minimize",svgIcon:n.windowMinimizeIcon,className:"k-window-titlebar-action",onClick:s,"aria-label":u.toLanguageString(I,k[I])}),w=t.maximizeButton?l.createElement(t.maximizeButton,{onClick:a,stage:p}):l.createElement(o.Button,{fillMode:"flat",icon:"window-maximize",svgIcon:n.windowIcon,className:"k-window-titlebar-action",onClick:a,"aria-label":u.toLanguageString(S,k[S])}),f=t.restoreButton?l.createElement(t.restoreButton,{onClick:h,stage:p}):l.createElement(o.Button,{fillMode:"flat",icon:"window-restore",svgIcon:n.windowRestoreIcon,className:"k-window-titlebar-action",onClick:h,"aria-label":u.toLanguageString(y,k[y])}),E=t.closeButton?l.createElement(t.closeButton,{onClick:i,stage:p}):l.createElement(o.Button,{fillMode:"flat",icon:"x",svgIcon:n.xIcon,className:"k-window-titlebar-action",onClick:i,"aria-label":u.toLanguageString(b,k[b])});return l.createElement("div",{className:"k-window-titlebar",style:{touchAction:"none"},ref:c,onDoubleClick:d},l.createElement("span",{className:"k-window-title",id:g},e||""),l.createElement("div",{className:"k-window-titlebar-actions"},p===v.DEFAULT&&m,p===v.DEFAULT&&w,p!==v.DEFAULT&&f,E))},T=l.forwardRef(((t,e)=>l.createElement(D,{...t,forwardedRef:e}))),x=["n","e","s","w","se","sw","ne","nw"];class B extends l.Component{render(){return l.createElement("div",{className:"k-resize-handles-wrapper"}," ",x.map(((t,e)=>l.createElement(a.Draggable,{key:e,onDrag:e=>{const{event:i}=e;i.originalEvent.preventDefault(),this.props.onResize(i,{end:!1,direction:t})},onRelease:e=>{const{event:i}=e;i.originalEvent.preventDefault(),this.props.onResize(i,{end:!0,direction:t})}},l.createElement("div",{className:"k-resize-handle k-resize-"+t,style:{display:"block",touchAction:"none",userSelect:"none"}})))))}}class L extends l.Component{shouldComponentUpdate(t){return t.shouldUpdateOnDrag||!t.isDragging}render(){return this.props.children}}const N=t=>{const e={layout:"end",...t},{layout:i,children:s}=e,o=a.classNames("k-actions","k-window-actions","k-actions-horizontal","k-hstack",{"k-justify-content-start":"start"===i,"k-justify-content-center":"center"===i,"k-justify-content-end":"end"===i,"k-justify-content-stretch":"stretched"===i});return l.createElement("div",{className:o},s)};N.propTypes={children:s.any,layout:s.oneOf(["start","center","end","stretched"])};const F=class extends l.Component{constructor(t){super(t),this.context=0,this.draggable=null,this.offSetCoordinates={x:0,y:0},this.titleId=this.generateTitleId(),this.mounted=!1,this.activeElement=null,this.onKeyDown=t=>{if(this.props.modal&&a.keepFocusInContainer(t,this.element),t.target!==t.currentTarget)return;const e=this.props.minWidth||120,i=this.props.minHeight||100;if((t.metaKey||t.ctrlKey)&&this.props.resizable){switch(t.keyCode){case a.Keys.up:t.preventDefault(),i<=this.height-5&&this.setState({height:this.height-5});break;case a.Keys.down:t.preventDefault(),this.setState({height:this.height+5});break;case a.Keys.left:e<=this.width-5&&this.setState({width:this.width-5});break;case a.Keys.right:this.setState({width:this.width+5});break;default:return}this.dispatchMoveEvent(this.props.onResize,t,!1,void 0)}else if(t.altKey)switch(t.keyCode){case a.Keys.up:this.windowStage===v.MINIMIZED?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.DEFAULT})):this.windowStage===v.DEFAULT&&(this.handleFullscreen(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.FULLSCREEN}));break;case a.Keys.down:this.windowStage===v.FULLSCREEN?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.DEFAULT})):this.windowStage===v.DEFAULT&&(this.handleMinimize(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.MINIMIZED}))}else{if(!t.ctrlKey)switch(t.keyCode){case a.Keys.esc:return void(this.props.onClose&&this.handleCloseWindow(t));case a.Keys.up:this.setState((t=>({top:t.top-5})));break;case a.Keys.down:this.setState((t=>({top:t.top+5})));break;case a.Keys.left:this.setState((t=>({left:t.left-5})));break;case a.Keys.right:this.setState((t=>({left:t.left+5})));break;default:return}this.dispatchMoveEvent(this.props.onMove,t,!1,void 0)}},this.onPress=t=>{const e=t.event;this.windowCoordinatesState.differenceLeft=e.pageX-this.left,this.windowCoordinatesState.differenceTop=e.pageY-this.top},this.onDrag=t=>{const e=t.event;e.originalEvent.preventDefault(),this.windowStage!==v.FULLSCREEN&&this.props.draggable&&(this.setState({top:Math.max(e.pageY-this.windowCoordinatesState.differenceTop,0),left:e.pageX-this.windowCoordinatesState.differenceLeft,isDragging:!0}),this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!1))},this.onRelease=t=>{const e=t.event;this.windowStage!==v.FULLSCREEN&&this.props.draggable&&this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!0),this.setState({isDragging:!1})},this.onFocus=()=>{this._blurTimeout?(clearTimeout(this._blurTimeout),this._blurTimeout=void 0):this.setState({focused:!0,zIndex:m(this.getCurrentZIndex(),this.getDocument(),this._id)})},this.onBlur=()=>{clearTimeout(this._blurTimeout);const t=this.getWindow();t&&(this._blurTimeout=t.setTimeout((()=>{this.mounted&&this.setState({focused:!1}),this._blurTimeout=void 0})))},this.getInitialTop=()=>{if(void 0!==this.props.top)return this.props.top;if(void 0!==this.props.initialTop)return this.props.initialTop;let t=300;if(void 0!==this.props.height?t=this.props.height:void 0!==this.props.initialHeight&&(t=this.props.initialHeight),this.props.appendTo)return this.props.appendTo.offsetHeight/2-t/2;const e=this.getWindow();return e?e.innerHeight/2-t/2:0},this.getInitialLeft=()=>{if(void 0!==this.props.left)return this.props.left;if(void 0!==this.props.initialLeft)return this.props.initialLeft;let t=300;if(void 0!==this.props.width?t=this.props.width:void 0!==this.props.initialWidth&&(t=this.props.initialWidth),this.props.appendTo)return this.props.appendTo.offsetWidth/2-t/2;const e=this.getWindow();return e?e.innerWidth/2-t/2:0},this.getInitialWidth=()=>{let t=300;return void 0!==this.props.width?t=this.props.width:void 0!==this.props.initialWidth&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=300;return void 0!==this.props.height?t=this.props.height:void 0!==this.props.initialHeight&&(t=this.props.initialHeight),t},this.handleMinimize=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height,this.setState({stage:v.MINIMIZED,height:0}),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.MINIMIZED})},this.handleFullscreen=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height;const e=this.getWindow(),i=e?e.innerWidth:0,s=e?e.innerHeight:0;this.setState({left:0,top:0,width:this.props.appendTo?this.props.appendTo.offsetWidth:i,height:this.props.appendTo?this.props.appendTo.offsetHeight:s,stage:v.FULLSCREEN}),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===v.FULLSCREEN?this.setState({stage:v.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===v.MINIMIZED&&this.setState({stage:v.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),a.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===v.FULLSCREEN||this.windowStage===v.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{const i=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,s=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,o=this.width,n=this.height,a=this.props.minWidth||120,r=this.props.minHeight||100,h=this.top-s,l=this.left-i,d=i-this.left,p=s-this.top,c=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&r-(n+h)<0&&(this.top>0&&(c.height=n+h),c.top=s),e.direction.indexOf("s")>=0&&r-p<0&&(c.height=p),e.direction.indexOf("w")>=0&&a-(o+l)<0&&(this.left>0&&(c.width=o+l),c.left=i),e.direction.indexOf("e")>=0&&a-d<0&&(c.width=d),this.setState(c),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,i,s)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:i,end:s,target:this,left:this.state.left,top:this.state.top,width:this.state.width,hight:this.state.height,height:this.state.height})},this.handleBrowserWindowResize=()=>{if(this.windowStage===v.FULLSCREEN){const t=this.getWindow(),e=t?t.innerWidth:0,i=t?t.innerHeight:0;this.setState({width:this.props.appendTo?this.props.appendTo.offsetWidth:e,height:this.props.appendTo?this.props.appendTo.offsetHeight:i})}},this.getCurrentZIndex=()=>this.state&&void 0!==this.context?this.state.zIndex>(this.context?this.context+2:0)?this.state.zIndex:this.context+2:this.context?this.context:u,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},this.state={stage:this.props.stage||v.DEFAULT,isDragging:!1,top:0,left:0,width:300,height:300,focused:!0,zIndex:u},this.activeElement=document.activeElement}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){this.element&&this.props.autoFocus&&this.element.focus({preventScroll:!0});const t=this.getWindow();t&&t.addEventListener("resize",this.handleBrowserWindowResize),this.setState({stage:this.props.stage||v.DEFAULT,isDragging:!1,top:this.getInitialTop(),left:this.getInitialLeft(),width:this.getInitialWidth(),height:this.getInitialHeight(),focused:!0,zIndex:m(this.getCurrentZIndex(),this.getDocument(),this._id)}),this.windowCoordinatesState={leftBeforeAction:this.getInitialLeft(),topBeforeAction:this.getInitialTop(),widthBeforeAction:this.getInitialWidth(),heightBeforeAction:this.getInitialHeight()};const e=this.getDocument();if(this.props.appendTo&&e){const t=this.props.appendTo.getBoundingClientRect(),i=e.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-i.left,this.offSetCoordinates.y=t.top-i.top}this.mounted=!0}componentWillUnmount(){const t=this.getWindow();t&&t.removeEventListener("resize",this.handleBrowserWindowResize),this.mounted=!1,setTimeout((()=>{var t;!this.element&&this.activeElement&&document&&(document.contains(this.activeElement)?this.activeElement.focus({preventScroll:!0}):this.activeElement.id&&(null==(t=document.getElementById(this.activeElement.id))||t.focus({preventScroll:!0})))}))}componentDidUpdate(t){this.props.left&&t.left!==this.props.left&&this.setState({left:this.props.left}),this.props.top&&t.top!==this.props.top&&this.setState({top:this.props.top});const e=this.getDocument();if(this.props.appendTo&&e){const t=this.props.appendTo.getBoundingClientRect(),i=e.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-i.left,this.offSetCoordinates.y=t.top-i.top}this.mounted=!0}render(){const t=l.Children.toArray(this.props.children),e=this.getContent(t),i=this.getActionBar(t),s=this.getCurrentZIndex(),o=a.classNames("k-window",this.props.className,{[`k-window-${this.props.themeColor}`]:this.props.themeColor,"k-window-minimized":"MINIMIZED"===this.state.stage,"k-focus":this.state.focused}),n=l.createElement(a.ZIndexContext.Provider,{value:s},l.createElement(l.Fragment,null,this.props.modal&&l.createElement("div",{className:"k-overlay",style:{zIndex:s,...this.props.overlayStyle}}),l.createElement("div",{id:this.props.id,[g]:this._id,tabIndex:0,role:"dialog","aria-labelledby":this.titleId,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,ref:t=>{this.windowElement=t,this.element=t},className:o,style:{top:this.top,left:this.left,width:this.width,height:this.height||"",zIndex:s,...this.props.style}},l.createElement(L,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},l.createElement(a.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,autoScroll:!1,ref:t=>this.draggable=t},l.createElement(T,{stage:this.windowStage,onDoubleClick:this.props.doubleClickStageChange?this.handleDoubleClick:void 0,onMinimizeButtonClick:this.handleMinimize,onFullScreenButtonClick:this.handleFullscreen,onRestoreButtonClick:this.handleRestore,onCloseButtonClick:this.handleCloseWindow,closeButton:this.props.closeButton,minimizeButton:this.props.minimizeButton,maximizeButton:this.props.maximizeButton,restoreButton:this.props.restoreButton,id:this.titleId},this.props.title)),this.windowStage!==v.MINIMIZED?l.createElement(l.Fragment,null,l.createElement("div",{className:"k-window-content"},e),i):null,this.windowStage===v.DEFAULT&&this.props.resizable?l.createElement(B,{onResize:this.handleResize}):null))));return a.canUseDOM?null!==this.props.appendTo?d.createPortal(n,this.props.appendTo||document.body):n:null}get top(){return this.windowStage!==v.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==v.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let t=this.props.width||this.state.width;if(this.windowStage===v.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetWidth,t;const e=this.getWindow();t=e?e.innerWidth:0}return t}get height(){let t=this.props.height||this.state.height;if(this.windowStage===v.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetHeight,t;const e=this.getWindow();t=e?e.innerHeight:0}else this.windowStage===v.MINIMIZED&&(t=0);return t}get windowStage(){return this.props.stage||this.state.stage}getActionBar(t){return t.filter((t=>t&&t.type===N))}getContent(t){return t.filter((t=>t&&t.type!==N))}generateTitleId(){return"window-title-"+this._id}};F.displayName="Window",F.propTypes={width:s.number,height:s.number,left:s.number,top:s.number,initialWidth:s.number,initialHeight:s.number,initialLeft:s.number,initialTop:s.number,minWidth:s.number,minHeight:s.number,resizable:s.bool,draggable:s.bool,title:s.any,shouldUpdateOnDrag:s.bool,stage:s.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),className:s.string,id:s.string,style:s.object,overlayStyle:s.object,autoFocus:s.bool},F.defaultProps={minWidth:120,minHeight:100,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0,autoFocus:!0},F.contextType=a.ZIndexContext;let z=F;const M=a.createPropsContext(),R=a.withIdHOC(a.withPropsContext(M,z));R.displayName="KendoReactWindow",t.Dialog=C,t.DialogActionsBar=c,t.DialogPropsContext=E,t.Window=R,t.WindowActionsBar=N,t.WindowPropsContext=M,t.WindowWithoutContext=z}));
|
package/index.d.mts
CHANGED
|
@@ -195,7 +195,6 @@ declare class DialogWithoutContext extends React_2.Component<DialogProps, Dialog
|
|
|
195
195
|
private get _id();
|
|
196
196
|
private titleId;
|
|
197
197
|
private contentId;
|
|
198
|
-
private showLicenseWatermark;
|
|
199
198
|
private activeElement;
|
|
200
199
|
constructor(props: DialogProps);
|
|
201
200
|
/**
|
|
@@ -552,7 +551,6 @@ export declare class WindowWithoutContext extends React_2.Component<WindowProps,
|
|
|
552
551
|
private titleId;
|
|
553
552
|
private _blurTimeout?;
|
|
554
553
|
private mounted;
|
|
555
|
-
private showLicenseWatermark;
|
|
556
554
|
private activeElement;
|
|
557
555
|
constructor(props: WindowProps);
|
|
558
556
|
/**
|
package/index.d.ts
CHANGED
|
@@ -195,7 +195,6 @@ declare class DialogWithoutContext extends React_2.Component<DialogProps, Dialog
|
|
|
195
195
|
private get _id();
|
|
196
196
|
private titleId;
|
|
197
197
|
private contentId;
|
|
198
|
-
private showLicenseWatermark;
|
|
199
198
|
private activeElement;
|
|
200
199
|
constructor(props: DialogProps);
|
|
201
200
|
/**
|
|
@@ -552,7 +551,6 @@ export declare class WindowWithoutContext extends React_2.Component<WindowProps,
|
|
|
552
551
|
private titleId;
|
|
553
552
|
private _blurTimeout?;
|
|
554
553
|
private mounted;
|
|
555
|
-
private showLicenseWatermark;
|
|
556
554
|
private activeElement;
|
|
557
555
|
constructor(props: WindowProps);
|
|
558
556
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-dialogs",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "10.0.0-develop.2",
|
|
4
4
|
"description": "React Dialogs provide modal and non-modal windows for showing additional information to the user. KendoReact Dialogs package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.5.0",
|
|
29
|
-
"@progress/kendo-react-buttons": "
|
|
30
|
-
"@progress/kendo-react-common": "
|
|
29
|
+
"@progress/kendo-react-buttons": "10.0.0-develop.2",
|
|
30
|
+
"@progress/kendo-react-common": "10.0.0-develop.2",
|
|
31
31
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
32
32
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
33
33
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
@@ -49,13 +49,7 @@
|
|
|
49
49
|
],
|
|
50
50
|
"@progress": {
|
|
51
51
|
"friendlyName": "Dialogs",
|
|
52
|
-
"framework": "KendoReact"
|
|
53
|
-
"package": {
|
|
54
|
-
"productName": "KendoReact",
|
|
55
|
-
"productCode": "KENDOUIREACT",
|
|
56
|
-
"publishDate": 1741090661,
|
|
57
|
-
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
58
|
-
}
|
|
52
|
+
"framework": "KendoReact"
|
|
59
53
|
},
|
|
60
54
|
"repository": {
|
|
61
55
|
"type": "git",
|
package/package-metadata.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
*-------------------------------------------------------------------------------------------
|
|
4
|
-
* Copyright © 2025 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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-dialogs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1741090661,version:"9.5.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
|
package/package-metadata.mjs
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
*-------------------------------------------------------------------------------------------
|
|
4
|
-
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
5
|
-
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
-
*-------------------------------------------------------------------------------------------
|
|
7
|
-
*/
|
|
8
|
-
const e = {
|
|
9
|
-
name: "@progress/kendo-react-dialogs",
|
|
10
|
-
productName: "KendoReact",
|
|
11
|
-
productCode: "KENDOUIREACT",
|
|
12
|
-
productCodes: ["KENDOUIREACT"],
|
|
13
|
-
publishDate: 1741090661,
|
|
14
|
-
version: "9.5.0",
|
|
15
|
-
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
|
-
};
|
|
17
|
-
export {
|
|
18
|
-
e as packageMetadata
|
|
19
|
-
};
|