@progress/kendo-react-dialogs/Window.js

React Dialogs provide modal and non-modal windows for showing additional information to the user. KendoReact Dialogs package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"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;