@progress/kendo-react-dialogs 11.4.0-develop.5 → 11.4.0-develop.7

package/Window.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"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"),U=require("./WindowResizeHandlers.js"),N=require("./MiddleLayerOptimization.js"),s=require("./StageEnum.js"),W=require("./WindowActionsBar.js"),f=require("./constants.js"),M=require("./utils.js");function v(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=v(F),z=v(R),S=300,m=300,E=120,D=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||D;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: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,a=this.width,l=this.height,C=this.props.minWidth||E,T=this.props.minHeight||D,I=this.top-d,L=this.left-n,b=n-this.left,y=d-this.top,c=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&T-(l+I)<0&&(this.top>0&&(c.height=l+I),c.top=d),e.direction.indexOf("s")>=0&&T-y<0&&(c.height=y),e.direction.indexOf("w")>=0&&C-(a+L)<0&&(this.left>0&&(c.width=a+L),c.left=n),e.direction.indexOf("e")>=0&&C-b<0&&(c.width=b),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=()=>{const t=o.canUseDOM?document:null;return this.props.appendTo?this.props.appendTo.ownerDocument:t},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},o.canUseDOM&&(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&&o.canUseDOM&&(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}),this.props.initialLeft&&i.initialLeft!==this.props.initialLeft&&this.setState({left:this.props.initialLeft}),this.props.initialTop&&i.initialTop!==this.props.initialTop&&this.setState({top:this.props.initialTop});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(N.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(U.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:D,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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const U=require("react"),N=require("react-dom"),h=require("prop-types"),H=require("./WindowTitlebar.js"),o=require("@progress/kendo-react-common"),z=require("./WindowResizeHandlers.js"),k=require("./MiddleLayerOptimization.js"),s=require("./StageEnum.js"),A=require("./WindowActionsBar.js"),m=require("./constants.js"),B=require("./utils.js");function F(f){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const t in f)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(f,t);Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:()=>f[t]})}}return i.default=f,Object.freeze(i)}const a=F(U),O=F(N),D=300,C=300,T=120,I=100,l=5,w=class w 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.activeElement=null,this.onKeyDown=t=>{var d,u,S;if(this.props.modal&&o.keepFocusInContainer(t,this.element),t.target!==t.currentTarget)return;const e=this.props.minWidth||T,n=this.props.minHeight||I,r=t.metaKey||t.ctrlKey,c=(S=(u=this.height)!=null?u:(d=this.windowElement)==null?void 0:d.clientHeight)!=null?S:0;if(r&&this.props.resizable){switch(t.keyCode){case o.Keys.up:t.preventDefault(),n<=c-l&&this.setState({height:c-l});break;case o.Keys.down:t.preventDefault(),this.setState({height:c+l});break;case o.Keys.left:e<=this.width-l&&this.setState({width:this.width-l});break;case o.Keys.right:this.setState({width:this.width+l});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(p=>({top:p.top-l}));break;case o.Keys.down:this.setState(p=>({top:p.top+l}));break;case o.Keys.left:this.setState(p=>({left:p.left-l}));break;case o.Keys.right:this.setState(p=>({left:p.left+l}));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:B.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=()=>{var n,r;if(this.props.top!==void 0)return this.props.top;if(this.props.initialTop!==void 0)return this.props.initialTop;let t=C;if(this.props.height!==void 0?t=this.props.height:this.props.initialHeight!==void 0&&(t=this.props.initialHeight),this.props.appendTo&&t)return this.props.appendTo.offsetHeight/2-t/2;const e=this.getWindow();return e?e.innerHeight/2-((r=t!=null?t:(n=this.windowElement)==null?void 0:n.clientHeight)!=null?r:0)/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=D;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=D;return this.props.width!==void 0?t=this.props.width:this.props.initialWidth!==void 0&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=C;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,r=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:r,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)=>{var W,M,v;const n=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,r=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,c=this.width,d=(v=(M=this.height)!=null?M:(W=this.windowElement)==null?void 0:W.clientHeight)!=null?v:0,u=this.props.minWidth||T,S=this.props.minHeight||I,p=this.top-r,L=this.left-n,b=n-this.left,y=r-this.top,g=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&S-(d+p)<0&&(this.top>0&&(g.height=d+p),g.top=r),e.direction.indexOf("s")>=0&&S-y<0&&(g.height=y),e.direction.indexOf("w")>=0&&u-(c+L)<0&&(this.left>0&&(g.width=c+L),g.left=n),e.direction.indexOf("e")>=0&&u-b<0&&(g.width=b),this.setState(g),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,n,r)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:n,end:r,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:m.DEFAULT_DIALOGS_ZINDEX:this.state.zIndex>(this.context?this.context+m.ZINDEX_DIALOGS_STEP:0)?this.state.zIndex:this.context+m.ZINDEX_DIALOGS_STEP,this.getDocument=()=>{const t=o.canUseDOM?document:null;return this.props.appendTo?this.props.appendTo.ownerDocument:t},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:D,height:C,focused:!0,zIndex:m.DEFAULT_DIALOGS_ZINDEX},o.canUseDOM&&(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:B.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&&o.canUseDOM&&(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}),this.props.initialLeft&&i.initialLeft!==this.props.initialLeft&&this.setState({left:this.props.initialLeft}),this.props.initialTop&&i.initialTop!==this.props.initialTop&&this.setState({top:this.props.initialTop});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(),r=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}),c=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,[m.DATA_DIALOGS_ID]:this._id,tabIndex:0,role:"dialog","aria-labelledby":this.titleId,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,ref:d=>{this.windowElement=d,this.element=d},className:r,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:d=>{this.draggable=d}},a.createElement(H.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(z.ResizeHandlers,{onResize:this.handleResize}):null))));return o.canUseDOM?this.props.appendTo!==null?O.createPortal(c,this.props.appendTo||document.body):c: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===A.WindowActionsBar)}getContent(i){return i.filter(t=>t&&t.type!==A.WindowActionsBar)}generateTitleId(){return"window-title-"+this._id}};w.displayName="Window",w.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},w.defaultProps={minWidth:T,minHeight:I,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0,autoFocus:!0},w.contextType=o.ZIndexContext;let E=w;const R=o.createPropsContext(),x=o.withIdHOC(o.withPropsContext(R,E));x.displayName="KendoReactWindow";exports.Window=x;exports.WindowPropsContext=R;exports.WindowWithoutContext=E;

package/Window.mjs

@@ -5,36 +5,37 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as h from "react";
-import * as v from "react-dom";
+import * as r from "react";
+import * as H from "react-dom";
 import n from "prop-types";
-import { WindowTitleBar as R } from "./WindowTitlebar.mjs";
-import { keepFocusInContainer as x, Keys as a, dispatchEvent as l, canUseDOM as u, ZIndexContext as M, classNames as N, Draggable as U, createPropsContext as H, withIdHOC as z, withPropsContext as k } from "@progress/kendo-react-common";
-import { ResizeHandlers as _ } from "./WindowResizeHandlers.mjs";
-import { MiddleLayerOptimization as Z } from "./MiddleLayerOptimization.mjs";
+import { WindowTitleBar as N } from "./WindowTitlebar.mjs";
+import { keepFocusInContainer as U, Keys as a, dispatchEvent as g, canUseDOM as S, ZIndexContext as A, classNames as z, Draggable as k, createPropsContext as _, withIdHOC as Z, withPropsContext as O } from "@progress/kendo-react-common";
+import { ResizeHandlers as K } from "./WindowResizeHandlers.mjs";
+import { MiddleLayerOptimization as P } from "./MiddleLayerOptimization.mjs";
 import { windowStage as i } from "./StageEnum.mjs";
-import { WindowActionsBar as F } from "./WindowActionsBar.mjs";
-import { DEFAULT_DIALOGS_ZINDEX as y, ZINDEX_DIALOGS_STEP as A, DATA_DIALOGS_ID as O } from "./constants.mjs";
-import { getMaxZIndex as B } from "./utils.mjs";
-const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component {
+import { WindowActionsBar as B } from "./WindowActionsBar.mjs";
+import { DEFAULT_DIALOGS_ZINDEX as v, ZINDEX_DIALOGS_STEP as R, DATA_DIALOGS_ID as X } from "./constants.mjs";
+import { getMaxZIndex as x } from "./utils.mjs";
+const E = 300, C = 300, D = 120, T = 100, l = 5, u = class u extends r.Component {
   constructor(s) {
     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) => {
-      if (this.props.modal && x(t, this.element), t.target !== t.currentTarget)
+      var p, w, m;
+      if (this.props.modal && U(t, this.element), t.target !== t.currentTarget)
         return;
-      const e = this.props.minWidth || S, o = this.props.minHeight || E;
-      if ((t.metaKey || t.ctrlKey) && this.props.resizable) {
+      const e = this.props.minWidth || D, o = this.props.minHeight || T, h = t.metaKey || t.ctrlKey, c = (m = (w = this.height) != null ? w : (p = this.windowElement) == null ? void 0 : p.clientHeight) != null ? m : 0;
+      if (h && this.props.resizable) {
         switch (t.keyCode) {
           case a.up:
-            t.preventDefault(), o <= this.height - d && this.setState({ height: this.height - d });
+            t.preventDefault(), o <= c - l && this.setState({ height: c - l });
             break;
           case a.down:
-            t.preventDefault(), this.setState({ height: this.height + d });
+            t.preventDefault(), this.setState({ height: c + l });
             break;
           case a.left:
-            e <= this.width - d && this.setState({ width: this.width - d });
+            e <= this.width - l && this.setState({ width: this.width - l });
             break;
           case a.right:
-            this.setState({ width: this.width + d });
+            this.setState({ width: this.width + l });
             break;
           default:
             return;
@@ -45,10 +46,10 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
       if (t.altKey) {
         switch (t.keyCode) {
           case a.up:
-            this.windowStage === i.MINIMIZED ? (this.handleRestore(t), l(this.props.onStageChange, t, this, { state: i.DEFAULT })) : this.windowStage === i.DEFAULT && (this.handleFullscreen(t), l(this.props.onStageChange, t, this, { state: i.FULLSCREEN }));
+            this.windowStage === i.MINIMIZED ? (this.handleRestore(t), g(this.props.onStageChange, t, this, { state: i.DEFAULT })) : this.windowStage === i.DEFAULT && (this.handleFullscreen(t), g(this.props.onStageChange, t, this, { state: i.FULLSCREEN }));
             break;
           case a.down:
-            this.windowStage === i.FULLSCREEN ? (this.handleRestore(t), l(this.props.onStageChange, t, this, { state: i.DEFAULT })) : this.windowStage === i.DEFAULT && (this.handleMinimize(t), l(this.props.onStageChange, t, this, { state: i.MINIMIZED }));
+            this.windowStage === i.FULLSCREEN ? (this.handleRestore(t), g(this.props.onStageChange, t, this, { state: i.DEFAULT })) : this.windowStage === i.DEFAULT && (this.handleMinimize(t), g(this.props.onStageChange, t, this, { state: i.MINIMIZED }));
             break;
         }
         return;
@@ -59,16 +60,16 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
             this.props.onClose && this.handleCloseWindow(t);
             return;
           case a.up:
-            this.setState((r) => ({ top: r.top - d }));
+            this.setState((d) => ({ top: d.top - l }));
             break;
           case a.down:
-            this.setState((r) => ({ top: r.top + d }));
+            this.setState((d) => ({ top: d.top + l }));
             break;
           case a.left:
-            this.setState((r) => ({ left: r.left - d }));
+            this.setState((d) => ({ left: d.left - l }));
             break;
           case a.right:
-            this.setState((r) => ({ left: r.left + d }));
+            this.setState((d) => ({ left: d.left + l }));
             break;
           default:
             return;
@@ -92,7 +93,7 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
     }, this.onFocus = () => {
       this._blurTimeout ? (clearTimeout(this._blurTimeout), this._blurTimeout = void 0) : this.setState({
         focused: !0,
-        zIndex: B(this.getCurrentZIndex(), this.getDocument(), this._id)
+        zIndex: x(this.getCurrentZIndex(), this.getDocument(), this._id)
       });
     }, this.onBlur = () => {
       clearTimeout(this._blurTimeout);
@@ -101,46 +102,47 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
         this.mounted && this.setState({ focused: !1 }), this._blurTimeout = void 0;
       }));
     }, this.getInitialTop = () => {
+      var o, h;
       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)
+      let t = C;
+      if (this.props.height !== void 0 ? t = this.props.height : this.props.initialHeight !== void 0 && (t = this.props.initialHeight), this.props.appendTo && t)
         return this.props.appendTo.offsetHeight / 2 - t / 2;
       const e = this.getWindow();
-      return e ? e.innerHeight / 2 - t / 2 : 0;
+      return e ? e.innerHeight / 2 - ((h = t != null ? t : (o = this.windowElement) == null ? void 0 : o.clientHeight) != null ? h : 0) / 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 = w;
+      let t = E;
       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 = w;
+      let t = E;
       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;
+      let t = C;
       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: i.MINIMIZED,
         height: 0
-      }), l(this.props.onStageChange, t, this, { state: i.MINIMIZED });
+      }), g(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(), o = e ? e.innerWidth : 0, p = e ? e.innerHeight : 0;
+      const e = this.getWindow(), o = e ? e.innerWidth : 0, h = e ? e.innerHeight : 0;
       this.setState({
         left: 0,
         top: 0,
         width: this.props.appendTo ? this.props.appendTo.offsetWidth : o,
-        height: this.props.appendTo ? this.props.appendTo.offsetHeight : p,
+        height: this.props.appendTo ? this.props.appendTo.offsetHeight : h,
         stage: i.FULLSCREEN
-      }), l(this.props.onStageChange, t, this, { state: i.FULLSCREEN });
+      }), g(this.props.onStageChange, t, this, { state: i.FULLSCREEN });
     }, this.handleRestore = (t) => {
       t.preventDefault(), this.windowStage === i.FULLSCREEN ? this.setState({
         stage: i.DEFAULT,
@@ -151,19 +153,20 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
       }) : this.windowStage === i.MINIMIZED && this.setState({
         stage: i.DEFAULT,
         height: this.windowCoordinatesState.heightBeforeAction
-      }), l(this.props.onStageChange, t, this, { state: i.DEFAULT });
+      }), g(this.props.onStageChange, t, this, { state: i.DEFAULT });
     }, this.handleCloseWindow = (t) => {
-      t.preventDefault(), l(this.props.onClose, t, this, { state: void 0 });
+      t.preventDefault(), g(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 o = this.props.appendTo ? t.pageX - this.offSetCoordinates.x : t.pageX, p = this.props.appendTo ? t.pageY - this.offSetCoordinates.y : t.pageY, r = this.width, c = this.height, D = this.props.minWidth || S, T = this.props.minHeight || E, I = this.top - p, L = this.left - o, b = o - this.left, W = p - this.top, g = Object.assign({}, this.state, { isDragging: !e.end });
-      e.direction.indexOf("n") >= 0 && T - (c + I) < 0 && (this.top > 0 && (g.height = c + I), g.top = p), e.direction.indexOf("s") >= 0 && T - W < 0 && (g.height = W), e.direction.indexOf("w") >= 0 && D - (r + L) < 0 && (this.left > 0 && (g.width = r + L), g.left = o), e.direction.indexOf("e") >= 0 && D - b < 0 && (g.width = b), this.setState(g), this.dispatchMoveEvent(this.props.onResize, t, !0, e.end);
-    }, this.dispatchMoveEvent = (t, e, o, p) => {
+      var M, F, y;
+      const o = this.props.appendTo ? t.pageX - this.offSetCoordinates.x : t.pageX, h = this.props.appendTo ? t.pageY - this.offSetCoordinates.y : t.pageY, c = this.width, p = (y = (F = this.height) != null ? F : (M = this.windowElement) == null ? void 0 : M.clientHeight) != null ? y : 0, w = this.props.minWidth || D, m = this.props.minHeight || T, d = this.top - h, L = this.left - o, b = o - this.left, W = h - this.top, f = Object.assign({}, this.state, { isDragging: !e.end });
+      e.direction.indexOf("n") >= 0 && m - (p + d) < 0 && (this.top > 0 && (f.height = p + d), f.top = h), e.direction.indexOf("s") >= 0 && m - W < 0 && (f.height = W), e.direction.indexOf("w") >= 0 && w - (c + L) < 0 && (this.left > 0 && (f.width = c + L), f.left = o), e.direction.indexOf("e") >= 0 && w - b < 0 && (f.width = b), this.setState(f), this.dispatchMoveEvent(this.props.onResize, t, !0, e.end);
+    }, this.dispatchMoveEvent = (t, e, o, h) => {
       t && t.call(void 0, {
         nativeEvent: e.nativeEvent ? e.nativeEvent : e.originalEvent,
         drag: o,
-        end: p,
+        end: h,
         target: this,
         left: this.state.left,
         top: this.state.top,
@@ -179,8 +182,8 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
           height: this.props.appendTo ? this.props.appendTo.offsetHeight : o
         });
       }
-    }, this.getCurrentZIndex = () => !this.state || this.context === void 0 ? this.context ? this.context : y : this.state.zIndex > (this.context ? this.context + A : 0) ? this.state.zIndex : this.context + A, this.getDocument = () => {
-      const t = u ? document : null;
+    }, this.getCurrentZIndex = () => !this.state || this.context === void 0 ? this.context ? this.context : v : this.state.zIndex > (this.context ? this.context + R : 0) ? this.state.zIndex : this.context + R, this.getDocument = () => {
+      const t = S ? document : null;
       return this.props.appendTo ? this.props.appendTo.ownerDocument : t;
     }, this.getWindow = () => {
       const t = this.getDocument();
@@ -190,11 +193,11 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
       isDragging: !1,
       top: 0,
       left: 0,
-      width: w,
-      height: m,
+      width: E,
+      height: C,
       focused: !0,
-      zIndex: y
-    }, u && (this.activeElement = document.activeElement);
+      zIndex: v
+    }, S && (this.activeElement = document.activeElement);
   }
   get _id() {
     return this.props.id + "-accessibility-id";
@@ -213,7 +216,7 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
       width: this.getInitialWidth(),
       height: this.getInitialHeight(),
       focused: !0,
-      zIndex: B(this.getCurrentZIndex(), this.getDocument(), this._id)
+      zIndex: x(this.getCurrentZIndex(), this.getDocument(), this._id)
     }), this.windowCoordinatesState = {
       leftBeforeAction: this.getInitialLeft(),
       topBeforeAction: this.getInitialTop(),
@@ -234,7 +237,7 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
     const s = this.getWindow();
     s && s.removeEventListener("resize", this.handleBrowserWindowResize), this.mounted = !1, setTimeout(() => {
       var t;
-      !this.element && this.activeElement && u && (document.contains(this.activeElement) ? this.activeElement.focus({ preventScroll: !0 }) : this.activeElement.id && ((t = document.getElementById(this.activeElement.id)) == null || t.focus({ preventScroll: !0 })));
+      !this.element && this.activeElement && S && (document.contains(this.activeElement) ? this.activeElement.focus({ preventScroll: !0 }) : this.activeElement.id && ((t = document.getElementById(this.activeElement.id)) == null || t.focus({ preventScroll: !0 })));
     });
   }
   /**
@@ -253,11 +256,11 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
    * @hidden
    */
   render() {
-    const s = h.Children.toArray(this.props.children), t = this.getContent(s), e = this.getActionBar(s), o = this.getCurrentZIndex(), p = N("k-window", this.props.className, {
+    const s = r.Children.toArray(this.props.children), t = this.getContent(s), e = this.getActionBar(s), o = this.getCurrentZIndex(), h = z("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 = /* @__PURE__ */ h.createElement(M.Provider, { value: o }, /* @__PURE__ */ h.createElement(h.Fragment, null, this.props.modal && /* @__PURE__ */ h.createElement(
+    }), c = /* @__PURE__ */ r.createElement(A.Provider, { value: o }, /* @__PURE__ */ r.createElement(r.Fragment, null, this.props.modal && /* @__PURE__ */ r.createElement(
       "div",
       {
         className: "k-overlay",
@@ -266,21 +269,21 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
           ...this.props.overlayStyle
         }
       }
-    ), /* @__PURE__ */ h.createElement(
+    ), /* @__PURE__ */ r.createElement(
       "div",
       {
         id: this.props.id,
-        [O]: this._id,
+        [X]: this._id,
         tabIndex: 0,
         role: "dialog",
         "aria-labelledby": this.titleId,
         onFocus: this.onFocus,
         onBlur: this.onBlur,
         onKeyDown: this.onKeyDown,
-        ref: (c) => {
-          this.windowElement = c, this.element = c;
+        ref: (p) => {
+          this.windowElement = p, this.element = p;
         },
-        className: p,
+        className: h,
         style: {
           top: this.top,
           left: this.left,
@@ -290,25 +293,25 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
           ...this.props.style
         }
       },
-      /* @__PURE__ */ h.createElement(
-        Z,
+      /* @__PURE__ */ r.createElement(
+        P,
         {
           shouldUpdateOnDrag: this.props.shouldUpdateOnDrag || !1,
           isDragging: this.state.isDragging
         },
-        /* @__PURE__ */ h.createElement(
-          U,
+        /* @__PURE__ */ r.createElement(
+          k,
           {
             onPress: this.onPress,
             onDrag: this.onDrag,
             onRelease: this.onRelease,
             autoScroll: !1,
-            ref: (c) => {
-              this.draggable = c;
+            ref: (p) => {
+              this.draggable = p;
             }
           },
-          /* @__PURE__ */ h.createElement(
-            R,
+          /* @__PURE__ */ r.createElement(
+            N,
             {
               stage: this.windowStage,
               onDoubleClick: this.props.doubleClickStageChange ? this.handleDoubleClick : void 0,
@@ -325,11 +328,11 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
             this.props.title
           )
         ),
-        this.windowStage !== i.MINIMIZED ? /* @__PURE__ */ h.createElement(h.Fragment, null, /* @__PURE__ */ h.createElement("div", { className: "k-window-content" }, t), e) : null,
-        this.windowStage === i.DEFAULT && this.props.resizable ? /* @__PURE__ */ h.createElement(_, { onResize: this.handleResize }) : null
+        this.windowStage !== i.MINIMIZED ? /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", { className: "k-window-content" }, t), e) : null,
+        this.windowStage === i.DEFAULT && this.props.resizable ? /* @__PURE__ */ r.createElement(K, { onResize: this.handleResize }) : null
       )
     )));
-    return u ? this.props.appendTo !== null ? v.createPortal(r, this.props.appendTo || document.body) : r : null;
+    return S ? this.props.appendTo !== null ? H.createPortal(c, this.props.appendTo || document.body) : c : null;
   }
   // Getters
   get top() {
@@ -362,16 +365,16 @@ const w = 300, m = 300, S = 120, E = 100, d = 5, f = class f extends h.Component
     return this.props.stage || this.state.stage;
   }
   getActionBar(s) {
-    return s.filter((t) => t && t.type === F);
+    return s.filter((t) => t && t.type === B);
   }
   getContent(s) {
-    return s.filter((t) => t && t.type !== F);
+    return s.filter((t) => t && t.type !== B);
   }
   generateTitleId() {
     return "window-title-" + this._id;
   }
 };
-f.displayName = "Window", f.propTypes = {
+u.displayName = "Window", u.propTypes = {
   width: n.number,
   height: n.number,
   left: n.number,
@@ -392,25 +395,25 @@ f.displayName = "Window", f.propTypes = {
   style: n.object,
   overlayStyle: n.object,
   autoFocus: n.bool
-}, f.defaultProps = {
-  minWidth: S,
-  minHeight: E,
+}, u.defaultProps = {
+  minWidth: D,
+  minHeight: T,
   resizable: !0,
   draggable: !0,
   modal: !1,
   doubleClickStageChange: !0,
   autoFocus: !0
-}, f.contextType = M;
-let C = f;
-const K = H(), P = z(
-  k(
-    K,
-    C
+}, u.contextType = A;
+let I = u;
+const G = _(), Y = Z(
+  O(
+    G,
+    I
   )
 );
-P.displayName = "KendoReactWindow";
+Y.displayName = "KendoReactWindow";
 export {
-  P as Window,
-  K as WindowPropsContext,
-  C as WindowWithoutContext
+  Y as Window,
+  G as WindowPropsContext,
+  I as WindowWithoutContext
 };

package/dist/cdn/js/kendo-react-dialogs.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!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,o,s,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 o=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,o.get?o:{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:o})=>l.createElement("div",{className:"k-window-titlebar k-dialog-titlebar",id:i},l.createElement("span",{className:"k-window-title k-dialog-title"},t),o&&l.createElement("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions"},l.createElement(s.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:o}=e,s=a.classNames("k-actions","k-actions-horizontal","k-window-actions k-dialog-actions",{[`k-actions-${i}`]:i});return l.createElement("div",{className:s},o)};c.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const u="data-windowid",g=10002,f=a.createPropsContext(),m=l.forwardRef(((t,e)=>{const i=a.useZIndexContext(),o=i?i+2:g,s=l.useRef(null),n=l.useRef(null),r=l.useRef(a.getActiveElement(document)),h=a.usePropsContext(f,t),m=l.useMemo((()=>({...w,...h})),[h]),{title:E,width:C,height:v,children:S,minWidth:y,dir:b,style:k,themeColor:I,contentStyle:D,autoFocusedElement:T,appendTo:B,className:L,overlayStyle:x,modal:M=w.modal,closeIcon:N=w.closeIcon,autoFocus:R=w.autoFocus}=m,F=l.useCallback((()=>({props:m,element:n.current})),[m]);l.useImperativeHandle(s,F),l.useImperativeHandle(e,(()=>s.current));const z=l.useMemo((()=>l.Children.toArray(S).filter((t=>!l.isValidElement(t)||t.type!==c))),[S]),W=l.useMemo((()=>l.Children.toArray(S).filter((t=>l.isValidElement(t)&&t.type===c))),[S]),{_id:A,contentId:U,id:O}=l.useMemo((()=>{const t=m.id,e=`${null!=t?t:"accessibility"}-id`;return{_id:e,contentId:`dialog-content-${e}`,id:t||`dialog-title-${e}`}}),[m.id]),K=l.useCallback((()=>{if(n.current)if(R&&!T)n.current.focus();else if(!R&&T&&n.current){const t=n.current.querySelector(T);null==t||t.focus()}else{const t=[...a.FOCUSABLE_ELEMENTS].map((t=>t+":not(.k-dialog-titlebar *)"));a.focusFirstFocusableChild(n.current,t)}}),[R,T]);l.useEffect((()=>(K(),()=>{setTimeout((()=>{var t;!n.current&&r.current&&a.canUseDOM&&(document.contains(r.current)?r.current.focus():r.current.id&&(null==(t=document.getElementById(r.current.id))||t.focus()))}))})),[K]);const H=l.useCallback((t=>{t.preventDefault(),a.dispatchEvent(m.onClose,t,F(),void 0)}),[m.onClose]),Z=l.useCallback((t=>{t.keyCode===a.Keys.esc&&m.onClose&&(t.preventDefault(),H(t)),a.keepFocusInContainer(t,n.current)}),[m.onClose,H]),P=l.useMemo((()=>l.createElement(a.ZIndexContext.Provider,{value:o},l.createElement("div",{ref:n,[u]:A,className:"k-dialog-wrapper"+(L?" "+L:""),onKeyDown:Z,tabIndex:0,dir:b,style:{zIndex:o,...k}},M&&l.createElement("div",{className:"k-overlay",style:x}),l.createElement("div",{className:a.classNames("k-window k-dialog",{[`k-window-${I}`]:I}),role:"dialog","aria-labelledby":O,"aria-modal":!0,"aria-describedby":U,style:{width:C,height:v,minWidth:y}},E&&l.createElement(p,{closeIcon:N,onCloseButtonClick:H,id:O},E),l.createElement("div",{className:"k-window-content k-dialog-content",style:D,id:U},z),W)))),[o,A,L,Z,k,b,x,I,O,U,C,v,y,N,H,D,E,z,W,M]);return a.canUseDOM?null!==B?d.createPortal(P,B||document.body):P:null})),w={autoFocus:!1,modal:!0,closeIcon:!0},E={autoFocus:o.bool,autoFocusedElement:o.string,title:o.any,className:o.string,closeIcon:o.bool,modal:o.bool,overlayStyle:o.object,width:o.oneOfType([o.number,o.string]),height:o.oneOfType([o.number,o.string]),minWidth:o.oneOfType([o.number,o.string]),onClose:o.func,children:o.node,id:o.string,dir:o.string,style:o.object,contentStyle:o.object,appendTo:o.any,themeColor:o.oneOf(["primary","dark","light"])};m.displayName="KendoReactDialog",m.propTypes=E;var C=(t=>(t.DEFAULT="DEFAULT",t.FULLSCREEN="FULLSCREEN",t.MINIMIZED="MINIMIZED",t))(C||{});const v="dialogs.windowMaximizeButton",S="dialogs.windowMinimizeButton",y="dialogs.windowRestoreButton",b="dialogs.windowCloseButton",k={[v]:"maximize",[S]:"minimize",[y]:"restore",[b]:"close"},I=t=>{const{children:e,onCloseButtonClick:i,onMinimizeButtonClick:o,onFullScreenButtonClick:a,onRestoreButtonClick:h,onDoubleClick:d,stage:p,forwardedRef:c,id:u}=t,g=r.useLocalization(),f=t.minimizeButton?l.createElement(t.minimizeButton,{onClick:o,stage:p}):l.createElement(s.Button,{fillMode:"flat",icon:"window-minimize",svgIcon:n.windowMinimizeIcon,className:"k-window-titlebar-action",onClick:o,"aria-label":g.toLanguageString(S,k[S])}),m=t.maximizeButton?l.createElement(t.maximizeButton,{onClick:a,stage:p}):l.createElement(s.Button,{fillMode:"flat",icon:"window-maximize",svgIcon:n.windowIcon,className:"k-window-titlebar-action",onClick:a,"aria-label":g.toLanguageString(v,k[v])}),w=t.restoreButton?l.createElement(t.restoreButton,{onClick:h,stage:p}):l.createElement(s.Button,{fillMode:"flat",icon:"window-restore",svgIcon:n.windowRestoreIcon,className:"k-window-titlebar-action",onClick:h,"aria-label":g.toLanguageString(y,k[y])}),E=t.closeButton?l.createElement(t.closeButton,{onClick:i,stage:p}):l.createElement(s.Button,{fillMode:"flat",icon:"x",svgIcon:n.xIcon,className:"k-window-titlebar-action",onClick:i,"aria-label":g.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:u},e||""),l.createElement("div",{className:"k-window-titlebar-actions"},p===C.DEFAULT&&f,p===C.DEFAULT&&m,p!==C.DEFAULT&&w,E))},D=l.forwardRef(((t,e)=>l.createElement(I,{...t,forwardedRef:e}))),T=["n","e","s","w","se","sw","ne","nw"];class B extends l.Component{render(){return l.createElement("div",{className:"k-resize-handles-wrapper"}," ",T.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 x=t=>{const e={layout:"end",...t},{layout:i,children:o}=e,s=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:s},o)};x.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const M=(t,e,i)=>{let o=t;if(e&&e.defaultView){const t=e.querySelectorAll(".k-window:not(.k-dialog), .k-dialog-wrapper");let s=!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>=o&&(o=t,s=!0)}})),s?o+2:o}return o},N=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===C.MINIMIZED?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})):this.windowStage===C.DEFAULT&&(this.handleFullscreen(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.FULLSCREEN}));break;case a.Keys.down:this.windowStage===C.FULLSCREEN?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})):this.windowStage===C.DEFAULT&&(this.handleMinimize(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.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!==C.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!==C.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:C.MINIMIZED,height:0}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.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,o=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:o,stage:C.FULLSCREEN}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===C.FULLSCREEN?this.setState({stage:C.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===C.MINIMIZED&&this.setState({stage:C.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),a.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===C.FULLSCREEN||this.windowStage===C.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{const i=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,o=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,s=this.width,n=this.height,a=this.props.minWidth||120,r=this.props.minHeight||100,h=this.top-o,l=this.left-i,d=i-this.left,p=o-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=o),e.direction.indexOf("s")>=0&&r-p<0&&(c.height=p),e.direction.indexOf("w")>=0&&a-(s+l)<0&&(this.left>0&&(c.width=s+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,o)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:i,end:o,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===C.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:g,this.getDocument=()=>{const t=a.canUseDOM?document:null;return this.props.appendTo?this.props.appendTo.ownerDocument:t},this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},this.state={stage:this.props.stage||C.DEFAULT,isDragging:!1,top:0,left:0,width:300,height:300,focused:!0,zIndex:g},a.canUseDOM&&(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||C.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&&a.canUseDOM&&(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}),this.props.initialLeft&&t.initialLeft!==this.props.initialLeft&&this.setState({left:this.props.initialLeft}),this.props.initialTop&&t.initialTop!==this.props.initialTop&&this.setState({top:this.props.initialTop});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),o=this.getCurrentZIndex(),s=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:o},l.createElement(l.Fragment,null,this.props.modal&&l.createElement("div",{className:"k-overlay",style:{zIndex:o,...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:s,style:{top:this.top,left:this.left,width:this.width,height:this.height||"",zIndex:o,...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(D,{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!==C.MINIMIZED?l.createElement(l.Fragment,null,l.createElement("div",{className:"k-window-content"},e),i):null,this.windowStage===C.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!==C.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==C.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let t=this.props.width||this.state.width;if(this.windowStage===C.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===C.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetHeight,t;const e=this.getWindow();t=e?e.innerHeight:0}else this.windowStage===C.MINIMIZED&&(t=0);return t}get windowStage(){return this.props.stage||this.state.stage}getActionBar(t){return t.filter((t=>t&&t.type===x))}getContent(t){return t.filter((t=>t&&t.type!==x))}generateTitleId(){return"window-title-"+this._id}};N.displayName="Window",N.propTypes={width:o.number,height:o.number,left:o.number,top:o.number,initialWidth:o.number,initialHeight:o.number,initialLeft:o.number,initialTop:o.number,minWidth:o.number,minHeight:o.number,resizable:o.bool,draggable:o.bool,title:o.any,shouldUpdateOnDrag:o.bool,stage:o.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),className:o.string,id:o.string,style:o.object,overlayStyle:o.object,autoFocus:o.bool},N.defaultProps={minWidth:120,minHeight:100,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0,autoFocus:!0},N.contextType=a.ZIndexContext;let R=N;const F=a.createPropsContext(),z=a.withIdHOC(a.withPropsContext(F,R));z.displayName="KendoReactWindow",t.Dialog=m,t.DialogActionsBar=c,t.DialogPropsContext=f,t.Window=z,t.WindowActionsBar=x,t.WindowPropsContext=F,t.WindowWithoutContext=R}));
+!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,o,s,n,a,r){"use strict";function l(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(i){if("default"!==i){var o=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,o.get?o:{enumerable:!0,get:function(){return t[i]}})}})),e.default=t,Object.freeze(e)}var h=l(e),d=l(i);const p=({children:t,onCloseButtonClick:e,id:i,closeIcon:o})=>h.createElement("div",{className:"k-window-titlebar k-dialog-titlebar",id:i},h.createElement("span",{className:"k-window-title k-dialog-title"},t),o&&h.createElement("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions"},h.createElement(s.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:o}=e,s=a.classNames("k-actions","k-actions-horizontal","k-window-actions k-dialog-actions",{[`k-actions-${i}`]:i});return h.createElement("div",{className:s},o)};c.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const u="data-windowid",g=10002,w=a.createPropsContext(),m=h.forwardRef(((t,e)=>{const i=a.useZIndexContext(),o=i?i+2:g,s=h.useRef(null),n=h.useRef(null),r=h.useRef(a.getActiveElement(document)),l=a.usePropsContext(w,t),m=h.useMemo((()=>({...f,...l})),[l]),{title:E,width:C,height:v,children:S,minWidth:y,dir:b,style:k,themeColor:I,contentStyle:D,autoFocusedElement:T,appendTo:B,className:L,overlayStyle:x,modal:M=f.modal,closeIcon:N=f.closeIcon,autoFocus:R=f.autoFocus}=m,F=h.useCallback((()=>({props:m,element:n.current})),[m]);h.useImperativeHandle(s,F),h.useImperativeHandle(e,(()=>s.current));const z=h.useMemo((()=>h.Children.toArray(S).filter((t=>!h.isValidElement(t)||t.type!==c))),[S]),W=h.useMemo((()=>h.Children.toArray(S).filter((t=>h.isValidElement(t)&&t.type===c))),[S]),{_id:A,contentId:U,id:O}=h.useMemo((()=>{const t=m.id,e=`${null!=t?t:"accessibility"}-id`;return{_id:e,contentId:`dialog-content-${e}`,id:t||`dialog-title-${e}`}}),[m.id]),K=h.useCallback((()=>{if(n.current)if(R&&!T)n.current.focus();else if(!R&&T&&n.current){const t=n.current.querySelector(T);null==t||t.focus()}else{const t=[...a.FOCUSABLE_ELEMENTS].map((t=>t+":not(.k-dialog-titlebar *)"));a.focusFirstFocusableChild(n.current,t)}}),[R,T]);h.useEffect((()=>(K(),()=>{setTimeout((()=>{var t;!n.current&&r.current&&a.canUseDOM&&(document.contains(r.current)?r.current.focus():r.current.id&&(null==(t=document.getElementById(r.current.id))||t.focus()))}))})),[K]);const H=h.useCallback((t=>{t.preventDefault(),a.dispatchEvent(m.onClose,t,F(),void 0)}),[m.onClose]),Z=h.useCallback((t=>{t.keyCode===a.Keys.esc&&m.onClose&&(t.preventDefault(),H(t)),a.keepFocusInContainer(t,n.current)}),[m.onClose,H]),P=h.useMemo((()=>h.createElement(a.ZIndexContext.Provider,{value:o},h.createElement("div",{ref:n,[u]:A,className:"k-dialog-wrapper"+(L?" "+L:""),onKeyDown:Z,tabIndex:0,dir:b,style:{zIndex:o,...k}},M&&h.createElement("div",{className:"k-overlay",style:x}),h.createElement("div",{className:a.classNames("k-window k-dialog",{[`k-window-${I}`]:I}),role:"dialog","aria-labelledby":O,"aria-modal":!0,"aria-describedby":U,style:{width:C,height:v,minWidth:y}},E&&h.createElement(p,{closeIcon:N,onCloseButtonClick:H,id:O},E),h.createElement("div",{className:"k-window-content k-dialog-content",style:D,id:U},z),W)))),[o,A,L,Z,k,b,x,I,O,U,C,v,y,N,H,D,E,z,W,M]);return a.canUseDOM?null!==B?d.createPortal(P,B||document.body):P:null})),f={autoFocus:!1,modal:!0,closeIcon:!0},E={autoFocus:o.bool,autoFocusedElement:o.string,title:o.any,className:o.string,closeIcon:o.bool,modal:o.bool,overlayStyle:o.object,width:o.oneOfType([o.number,o.string]),height:o.oneOfType([o.number,o.string]),minWidth:o.oneOfType([o.number,o.string]),onClose:o.func,children:o.node,id:o.string,dir:o.string,style:o.object,contentStyle:o.object,appendTo:o.any,themeColor:o.oneOf(["primary","dark","light"])};m.displayName="KendoReactDialog",m.propTypes=E;var C=(t=>(t.DEFAULT="DEFAULT",t.FULLSCREEN="FULLSCREEN",t.MINIMIZED="MINIMIZED",t))(C||{});const v="dialogs.windowMaximizeButton",S="dialogs.windowMinimizeButton",y="dialogs.windowRestoreButton",b="dialogs.windowCloseButton",k={[v]:"maximize",[S]:"minimize",[y]:"restore",[b]:"close"},I=t=>{const{children:e,onCloseButtonClick:i,onMinimizeButtonClick:o,onFullScreenButtonClick:a,onRestoreButtonClick:l,onDoubleClick:d,stage:p,forwardedRef:c,id:u}=t,g=r.useLocalization(),w=t.minimizeButton?h.createElement(t.minimizeButton,{onClick:o,stage:p}):h.createElement(s.Button,{fillMode:"flat",icon:"window-minimize",svgIcon:n.windowMinimizeIcon,className:"k-window-titlebar-action",onClick:o,"aria-label":g.toLanguageString(S,k[S])}),m=t.maximizeButton?h.createElement(t.maximizeButton,{onClick:a,stage:p}):h.createElement(s.Button,{fillMode:"flat",icon:"window-maximize",svgIcon:n.windowIcon,className:"k-window-titlebar-action",onClick:a,"aria-label":g.toLanguageString(v,k[v])}),f=t.restoreButton?h.createElement(t.restoreButton,{onClick:l,stage:p}):h.createElement(s.Button,{fillMode:"flat",icon:"window-restore",svgIcon:n.windowRestoreIcon,className:"k-window-titlebar-action",onClick:l,"aria-label":g.toLanguageString(y,k[y])}),E=t.closeButton?h.createElement(t.closeButton,{onClick:i,stage:p}):h.createElement(s.Button,{fillMode:"flat",icon:"x",svgIcon:n.xIcon,className:"k-window-titlebar-action",onClick:i,"aria-label":g.toLanguageString(b,k[b])});return h.createElement("div",{className:"k-window-titlebar",style:{touchAction:"none"},ref:c,onDoubleClick:d},h.createElement("span",{className:"k-window-title",id:u},e||""),h.createElement("div",{className:"k-window-titlebar-actions"},p===C.DEFAULT&&w,p===C.DEFAULT&&m,p!==C.DEFAULT&&f,E))},D=h.forwardRef(((t,e)=>h.createElement(I,{...t,forwardedRef:e}))),T=["n","e","s","w","se","sw","ne","nw"];class B extends h.Component{render(){return h.createElement("div",{className:"k-resize-handles-wrapper"}," ",T.map(((t,e)=>h.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})}},h.createElement("div",{className:"k-resize-handle k-resize-"+t,style:{display:"block",touchAction:"none",userSelect:"none"}})))))}}class L extends h.Component{shouldComponentUpdate(t){return t.shouldUpdateOnDrag||!t.isDragging}render(){return this.props.children}}const x=t=>{const e={layout:"end",...t},{layout:i,children:o}=e,s=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 h.createElement("div",{className:s},o)};x.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const M=(t,e,i)=>{let o=t;if(e&&e.defaultView){const t=e.querySelectorAll(".k-window:not(.k-dialog), .k-dialog-wrapper");let s=!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>=o&&(o=t,s=!0)}})),s?o+2:o}return o},N=class extends h.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=>{var e,i,o;if(this.props.modal&&a.keepFocusInContainer(t,this.element),t.target!==t.currentTarget)return;const s=this.props.minWidth||120,n=this.props.minHeight||100,r=t.metaKey||t.ctrlKey,l=null!=(o=null!=(i=this.height)?i:null==(e=this.windowElement)?void 0:e.clientHeight)?o:0;if(r&&this.props.resizable){switch(t.keyCode){case a.Keys.up:t.preventDefault(),n<=l-5&&this.setState({height:l-5});break;case a.Keys.down:t.preventDefault(),this.setState({height:l+5});break;case a.Keys.left:s<=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===C.MINIMIZED?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})):this.windowStage===C.DEFAULT&&(this.handleFullscreen(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.FULLSCREEN}));break;case a.Keys.down:this.windowStage===C.FULLSCREEN?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})):this.windowStage===C.DEFAULT&&(this.handleMinimize(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.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!==C.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!==C.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=()=>{var t,e;if(void 0!==this.props.top)return this.props.top;if(void 0!==this.props.initialTop)return this.props.initialTop;let i=300;if(void 0!==this.props.height?i=this.props.height:void 0!==this.props.initialHeight&&(i=this.props.initialHeight),this.props.appendTo&&i)return this.props.appendTo.offsetHeight/2-i/2;const o=this.getWindow();return o?o.innerHeight/2-(null!=(e=null!=i?i:null==(t=this.windowElement)?void 0:t.clientHeight)?e:0)/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:C.MINIMIZED,height:0}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.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,o=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:o,stage:C.FULLSCREEN}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===C.FULLSCREEN?this.setState({stage:C.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===C.MINIMIZED&&this.setState({stage:C.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),a.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===C.FULLSCREEN||this.windowStage===C.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{var i,o,s;const n=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,a=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,r=this.width,l=null!=(s=null!=(o=this.height)?o:null==(i=this.windowElement)?void 0:i.clientHeight)?s:0,h=this.props.minWidth||120,d=this.props.minHeight||100,p=this.top-a,c=this.left-n,u=n-this.left,g=a-this.top,w=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&d-(l+p)<0&&(this.top>0&&(w.height=l+p),w.top=a),e.direction.indexOf("s")>=0&&d-g<0&&(w.height=g),e.direction.indexOf("w")>=0&&h-(r+c)<0&&(this.left>0&&(w.width=r+c),w.left=n),e.direction.indexOf("e")>=0&&h-u<0&&(w.width=u),this.setState(w),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,i,o)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:i,end:o,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===C.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:g,this.getDocument=()=>{const t=a.canUseDOM?document:null;return this.props.appendTo?this.props.appendTo.ownerDocument:t},this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},this.state={stage:this.props.stage||C.DEFAULT,isDragging:!1,top:0,left:0,width:300,height:300,focused:!0,zIndex:g},a.canUseDOM&&(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||C.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&&a.canUseDOM&&(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}),this.props.initialLeft&&t.initialLeft!==this.props.initialLeft&&this.setState({left:this.props.initialLeft}),this.props.initialTop&&t.initialTop!==this.props.initialTop&&this.setState({top:this.props.initialTop});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=h.Children.toArray(this.props.children),e=this.getContent(t),i=this.getActionBar(t),o=this.getCurrentZIndex(),s=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=h.createElement(a.ZIndexContext.Provider,{value:o},h.createElement(h.Fragment,null,this.props.modal&&h.createElement("div",{className:"k-overlay",style:{zIndex:o,...this.props.overlayStyle}}),h.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:s,style:{top:this.top,left:this.left,width:this.width,height:this.height||"",zIndex:o,...this.props.style}},h.createElement(L,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},h.createElement(a.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,autoScroll:!1,ref:t=>{this.draggable=t}},h.createElement(D,{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!==C.MINIMIZED?h.createElement(h.Fragment,null,h.createElement("div",{className:"k-window-content"},e),i):null,this.windowStage===C.DEFAULT&&this.props.resizable?h.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!==C.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==C.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let t=this.props.width||this.state.width;if(this.windowStage===C.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===C.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetHeight,t;const e=this.getWindow();t=e?e.innerHeight:0}else this.windowStage===C.MINIMIZED&&(t=0);return t}get windowStage(){return this.props.stage||this.state.stage}getActionBar(t){return t.filter((t=>t&&t.type===x))}getContent(t){return t.filter((t=>t&&t.type!==x))}generateTitleId(){return"window-title-"+this._id}};N.displayName="Window",N.propTypes={width:o.number,height:o.number,left:o.number,top:o.number,initialWidth:o.number,initialHeight:o.number,initialLeft:o.number,initialTop:o.number,minWidth:o.number,minHeight:o.number,resizable:o.bool,draggable:o.bool,title:o.any,shouldUpdateOnDrag:o.bool,stage:o.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),className:o.string,id:o.string,style:o.object,overlayStyle:o.object,autoFocus:o.bool},N.defaultProps={minWidth:120,minHeight:100,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0,autoFocus:!0},N.contextType=a.ZIndexContext;let R=N;const F=a.createPropsContext(),z=a.withIdHOC(a.withPropsContext(F,R));z.displayName="KendoReactWindow",t.Dialog=m,t.DialogActionsBar=c,t.DialogPropsContext=w,t.Window=z,t.WindowActionsBar=x,t.WindowPropsContext=F,t.WindowWithoutContext=R}));

package/index.d.mts

@@ -390,13 +390,14 @@ export declare interface WindowProps {
     draggable?: boolean;
     /**
      * Specifies the height of the Window ([see example]({% slug dimensionsresizing_window %}#toc-dimensions)).
+     * When set to null the window is automatically sized to fit its content.
      *
      * @example
      * ```jsx
      * <Window height={500} />
      * ```
      */
-    height?: number;
+    height?: number | null;
     /**
      * Specifies the initial `left` value ([see example]({% slug positioningdragging_window %}#toc-positioning)). The Window will be in an uncontrolled mode.
      *
@@ -432,7 +433,7 @@ export declare interface WindowProps {
      * <Window initialHeight={200} />
      * ```
      */
-    initialHeight?: number;
+    initialHeight?: number | null;
     /**
      * Specifies the left coordinates of the Window.
      *
@@ -661,7 +662,7 @@ declare interface WindowState {
     top: number;
     left: number;
     width: number;
-    height: number;
+    height: number | null;
     focused: boolean;
     zIndex: number;
 }

package/index.d.ts

@@ -390,13 +390,14 @@ export declare interface WindowProps {
     draggable?: boolean;
     /**
      * Specifies the height of the Window ([see example]({% slug dimensionsresizing_window %}#toc-dimensions)).
+     * When set to null the window is automatically sized to fit its content.
      *
      * @example
      * ```jsx
      * <Window height={500} />
      * ```
      */
-    height?: number;
+    height?: number | null;
     /**
      * Specifies the initial `left` value ([see example]({% slug positioningdragging_window %}#toc-positioning)). The Window will be in an uncontrolled mode.
      *
@@ -432,7 +433,7 @@ export declare interface WindowProps {
      * <Window initialHeight={200} />
      * ```
      */
-    initialHeight?: number;
+    initialHeight?: number | null;
     /**
      * Specifies the left coordinates of the Window.
      *
@@ -661,7 +662,7 @@ declare interface WindowState {
     top: number;
     left: number;
     width: number;
-    height: number;
+    height: number | null;
     focused: boolean;
     zIndex: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-dialogs",
-  "version": "11.4.0-develop.5",
+  "version": "11.4.0-develop.7",
   "description": "React Dialogs provide modal and non-modal windows for showing additional information to the user. KendoReact Dialogs package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,10 +25,10 @@
   },
   "sideEffects": false,
   "peerDependencies": {
-    "@progress/kendo-licensing": "^1.6.0",
-    "@progress/kendo-react-buttons": "11.4.0-develop.5",
-    "@progress/kendo-react-common": "11.4.0-develop.5",
-    "@progress/kendo-react-intl": "11.4.0-develop.5",
+    "@progress/kendo-licensing": "^1.7.0",
+    "@progress/kendo-react-buttons": "11.4.0-develop.7",
+    "@progress/kendo-react-common": "11.4.0-develop.7",
+    "@progress/kendo-react-intl": "11.4.0-develop.7",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"