@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 © 2026 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 dt=require("react"),lt=require("react-dom"),i=require("prop-types"),ut=require("./WindowTitlebar.js"),a=require("@progress/kendo-react-common"),ft=require("./WindowResizeHandlers.js"),gt=require("./MiddleLayerOptimization.js"),o=require("./StageEnum.js"),Ze=require("./WindowActionsBar.js"),p=require("./constants.js"),Ke=require("./utils.js");function Pe(e){const S=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const A in e)if(A!=="default"){const k=Object.getOwnPropertyDescriptor(e,A);Object.defineProperty(S,A,k.get?k:{enumerable:!0,get:()=>e[A]})}}return S.default=e,Object.freeze(S)}const T=Pe(dt),ht=Pe(lt),{useState:H,useEffect:U,useCallback:u,useMemo:q,useRef:F,useImperativeHandle:st,useContext:wt,forwardRef:Et}=T,ee=300,te=300,se=120,we=100,b=5,x={minWidth:se,minHeight:we,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0,autoFocus:!0},Ee=Et((e,S)=>{var Me;const{minWidth:A=x.minWidth,minHeight:k=x.minHeight,resizable:ue=x.resizable,draggable:me=x.draggable,modal:fe=x.modal,doubleClickStageChange:je=x.doubleClickStageChange,autoFocus:Xe=x.autoFocus}=e,[Ge,j]=H(e.stage||o.windowStage.DEFAULT),[X,ne]=H(!1),[ie,I]=H(0),[oe,y]=H(0),[ae,N]=H(ee),[re,W]=H(te),[Ve,ge]=H(!0),[he,Se]=H(p.DEFAULT_DIALOGS_ZINDEX),c=(Me=e.stage)!=null?Me:Ge,B=wt(a.ZIndexContext),R=F(null),De=F(null),h=F({leftBeforeAction:0,topBeforeAction:0,widthBeforeAction:ee,heightBeforeAction:te}),O=F({x:0,y:0}),z=F(void 0),G=F(a.canUseDOM?document.activeElement:null),Ce=F("window-title-"+(e.id?e.id+"-accessibility-id":"")),_=F({left:0,top:0,width:ee,height:te,internalLeft:oe,internalTop:ie,internalWidth:ae,internalHeight:re,stage:c,draggable:me,props:e}),M=u(()=>{const t=a.canUseDOM?document:null;return e.appendTo?e.appendTo.ownerDocument:t},[e.appendTo]),w=u(()=>{const t=M();return t==null?void 0:t.defaultView},[M]),Z=q(()=>{var t;return c!==o.windowStage.FULLSCREEN?Math.max((t=e.top)!=null?t:ie,0):0},[c,e.top,ie]),K=q(()=>{var t;return c!==o.windowStage.FULLSCREEN?Math.max((t=e.left)!=null?t:oe,0):0},[c,e.left,oe]),D=q(()=>{var n;const t=(n=e.width)!=null?n:ae;if(c===o.windowStage.FULLSCREEN){if(e.appendTo)return e.appendTo.offsetWidth;const r=w();return r?r.innerWidth:0}return t},[c,e.width,e.appendTo,ae,w]),C=q(()=>{const t=e.height===void 0?re:e.height;if(c===o.windowStage.FULLSCREEN){if(e.appendTo)return e.appendTo.offsetHeight;const n=w();return n?n.innerHeight:0}else if(c===o.windowStage.MINIMIZED)return 0;return t},[c,e.height,e.appendTo,re,w]),ce=q(()=>e.id?e.id+"-accessibility-id":void 0,[e.id]);U(()=>{_.current={left:K,top:Z,width:D,height:C,internalLeft:oe,internalTop:ie,internalWidth:ae,internalHeight:re,stage:c,draggable:me,props:e}});const P=q(()=>{if(B===void 0)return B!=null?B:p.DEFAULT_DIALOGS_ZINDEX;const t=B?B+p.ZINDEX_DIALOGS_STEP:0;return he>t?he:B+p.ZINDEX_DIALOGS_STEP},[he,B]),Le=u(()=>{var r,l;if(e.top!==void 0)return e.top;if(e.initialTop!==void 0)return e.initialTop;let t=te;if(e.height!==void 0?t=e.height:e.initialHeight!==void 0&&(t=e.initialHeight),e.appendTo&&t)return e.appendTo.offsetHeight/2-t/2;const n=w();return n?n.innerHeight/2-((l=t!=null?t:(r=R.current)==null?void 0:r.clientHeight)!=null?l:0)/2:0},[e.top,e.initialTop,e.height,e.initialHeight,e.appendTo,w]),be=u(()=>{if(e.left!==void 0)return e.left;if(e.initialLeft!==void 0)return e.initialLeft;let t=ee;if(e.width!==void 0?t=e.width:e.initialWidth!==void 0&&(t=e.initialWidth),e.appendTo)return e.appendTo.offsetWidth/2-t/2;const n=w();return n?n.innerWidth/2-t/2:0},[e.left,e.initialLeft,e.width,e.initialWidth,e.appendTo,w]),Ie=u(()=>{let t=ee;return e.width!==void 0?t=e.width:e.initialWidth!==void 0&&(t=e.initialWidth),t},[e.width,e.initialWidth]),ye=u(()=>{let t=te;return e.height!==void 0?t=e.height:e.initialHeight!==void 0&&(t=e.initialHeight),t},[e.height,e.initialHeight]),Ye=u(t=>t.filter(n=>(n==null?void 0:n.type)===Ze.WindowActionsBar),[]),$e=u(t=>t.filter(n=>n&&n.type!==Ze.WindowActionsBar),[]),E=u(()=>typeof S=="object"&&S!==null&&"current"in S?S.current:null,[S]),v=u((t,n,r,l,d,f)=>{var Y,$,J;if(!t)return;const{internalLeft:m,internalTop:s,internalWidth:L,internalHeight:le}=_.current;t({nativeEvent:n.nativeEvent?n.nativeEvent:n.originalEvent,drag:r,end:l,target:E(),left:(Y=d==null?void 0:d.left)!=null?Y:m,top:($=d==null?void 0:d.top)!=null?$:s,width:(J=f==null?void 0:f.width)!=null?J:L,height:(f==null?void 0:f.height)===void 0?le:f==null?void 0:f.height})},[E]),Je=u(t=>{var f,m;if(fe&&a.keepFocusInContainer(t,R.current),t.target!==t.currentTarget)return;const n=A||se,r=k||we,l=t.metaKey||t.ctrlKey,d=(m=C!=null?C:(f=R.current)==null?void 0:f.clientHeight)!=null?m:0;if(l&&ue){switch(t.keyCode){case a.Keys.up:t.preventDefault(),r<=d-b&&W(d-b);break;case a.Keys.down:t.preventDefault(),W(d+b);break;case a.Keys.left:n<=D-b&&N(D-b);break;case a.Keys.right:N(D+b);break;default:return}v(e.onResize,t,!1,void 0);return}if(t.altKey){switch(t.keyCode){case a.Keys.up:c===o.windowStage.MINIMIZED?(V(t),a.dispatchEvent(e.onStageChange,t,E(),{state:o.windowStage.DEFAULT})):c===o.windowStage.DEFAULT&&(de(t),a.dispatchEvent(e.onStageChange,t,E(),{state:o.windowStage.FULLSCREEN}));break;case a.Keys.down:c===o.windowStage.FULLSCREEN?(V(t),a.dispatchEvent(e.onStageChange,t,E(),{state:o.windowStage.DEFAULT})):c===o.windowStage.DEFAULT&&(We(t),a.dispatchEvent(e.onStageChange,t,E(),{state:o.windowStage.MINIMIZED}));break}return}if(!t.ctrlKey)switch(t.keyCode){case a.Keys.esc:e.onClose&&ve(t);return;case a.Keys.up:I(s=>s-b);break;case a.Keys.down:I(s=>s+b);break;case a.Keys.left:y(s=>s-b);break;case a.Keys.right:y(s=>s+b);break;default:return}v(e.onMove,t,!1,void 0)},[fe,A,k,ue,e.onResize,e.onStageChange,e.onClose,e.onMove,C,D,c,v,E]),Qe=u(t=>{const n=t.event,{left:r,top:l}=_.current;h.current.differenceLeft=n.pageX-r,h.current.differenceTop=n.pageY-l},[]),pe=u(t=>{const n=t.event;n.originalEvent.preventDefault();const{stage:r,draggable:l,props:d,width:f,height:m}=_.current;if(r!==o.windowStage.FULLSCREEN&&l){const s=Math.max(n.pageY-(h.current.differenceTop||0),0),L=n.pageX-(h.current.differenceLeft||0);I(s),y(L),ne(!0),d.onMove&&v(d.onMove,n,!0,!1,{left:L,top:s},{width:f,height:m})}},[v]),et=u(t=>{const n=t.event,{stage:r,draggable:l,props:d,left:f,top:m,width:s,height:L}=_.current;r!==o.windowStage.FULLSCREEN&&l&&d.onMove&&v(d.onMove,n,!0,!0,{left:f,top:m},{width:s,height:L}),ne(!1)},[v]),tt=u(()=>{z.current?(clearTimeout(z.current),z.current=void 0):(ge(!0),Se(Ke.getMaxZIndex(P,M(),ce)))},[P,M,ce]),nt=u(()=>{clearTimeout(z.current);const t=w();t&&(z.current=t.setTimeout(()=>{ge(!1),z.current=void 0}))},[w]),We=u(t=>{t.preventDefault(),h.current.leftBeforeAction=K,h.current.topBeforeAction=Z,h.current.widthBeforeAction=D,h.current.heightBeforeAction=C,j(o.windowStage.MINIMIZED),W(0),a.dispatchEvent(e.onStageChange,t,E(),{state:o.windowStage.MINIMIZED})},[K,Z,D,C,e.onStageChange,E]),de=u(t=>{t.preventDefault(),h.current.leftBeforeAction=K,h.current.topBeforeAction=Z,h.current.widthBeforeAction=D,h.current.heightBeforeAction=C;const n=w(),r=n?n.innerWidth:0,l=n?n.innerHeight:0;y(0),I(0),N(e.appendTo?e.appendTo.offsetWidth:r),W(e.appendTo?e.appendTo.offsetHeight:l),j(o.windowStage.FULLSCREEN),a.dispatchEvent(e.onStageChange,t,E(),{state:o.windowStage.FULLSCREEN})},[K,Z,D,C,e.appendTo,e.onStageChange,w,E]),V=u(t=>{t.preventDefault(),c===o.windowStage.FULLSCREEN?(j(o.windowStage.DEFAULT),y(h.current.leftBeforeAction),I(h.current.topBeforeAction),N(h.current.widthBeforeAction),W(h.current.heightBeforeAction)):c===o.windowStage.MINIMIZED&&(j(o.windowStage.DEFAULT),W(h.current.heightBeforeAction)),a.dispatchEvent(e.onStageChange,t,E(),{state:o.windowStage.DEFAULT})},[c,e.onStageChange,E]),ve=u(t=>{t.preventDefault(),a.dispatchEvent(e.onClose,t,E(),{state:void 0})},[e.onClose,E]),it=u(t=>{c===o.windowStage.FULLSCREEN||c===o.windowStage.MINIMIZED?V(t):de(t)},[c,V,de]),ot=u((t,n)=>{var Ue,xe,ke,Oe,ze,_e;const{props:r,width:l,height:d,top:f,left:m}=_.current,s=r.appendTo?t.pageX-O.current.x:t.pageX,L=r.appendTo?t.pageY-O.current.y:t.pageY,le=(xe=d!=null?d:(Ue=R.current)==null?void 0:Ue.clientHeight)!=null?xe:0,Y=A||se,$=k||we,J=f-L,He=m-s,Fe=s-m,Ne=L-f;let Q=!1;const g={isDragging:!n.end};n.direction.indexOf("n")>=0&&$-(le+J)<0&&(f>0&&(g.height=le+J),g.top=L,Q=!0),n.direction.indexOf("s")>=0&&$-Ne<0&&(g.height=Ne,Q=!0),n.direction.indexOf("w")>=0&&Y-(l+He)<0&&(m>0&&(g.width=l+He),g.left=s,Q=!0),n.direction.indexOf("e")>=0&&Y-Fe<0&&(g.width=Fe,Q=!0),Q&&(g.height!==void 0&&W(g.height),g.top!==void 0&&I(g.top),g.width!==void 0&&N(g.width),g.left!==void 0&&y(g.left),g.isDragging!==void 0&&ne(g.isDragging)),v(r.onResize,t,!0,n.end,{left:(ke=g.left)!=null?ke:m,top:(Oe=g.top)!=null?Oe:f},{width:(ze=g.width)!=null?ze:l,height:(_e=g.height)!=null?_e:d})},[v]),Ae=u(()=>{if(c===o.windowStage.FULLSCREEN){const t=w(),n=t?t.innerWidth:0,r=t?t.innerHeight:0;N(e.appendTo?e.appendTo.offsetWidth:n),W(e.appendTo?e.appendTo.offsetHeight:r)}},[c,e.appendTo,w]);U(()=>{const t=R.current;t&&Xe&&t.focus({preventScroll:!0});const n=w();n&&n.addEventListener("resize",Ae),j(e.stage||o.windowStage.DEFAULT),ne(!1),I(Le()),y(be()),N(Ie()),W(ye()),ge(!0),Se(Ke.getMaxZIndex(P,M(),ce)),h.current={leftBeforeAction:be(),topBeforeAction:Le(),widthBeforeAction:Ie(),heightBeforeAction:ye()};const r=M();if(e.appendTo&&r){const l=e.appendTo.getBoundingClientRect(),d=r.body.getBoundingClientRect();O.current.x=l.left-d.left,O.current.y=l.top-d.top}return()=>{var d;const l=w();l&&l.removeEventListener("resize",Ae),G.current&&a.canUseDOM&&(document.contains(G.current)?G.current.focus({preventScroll:!0}):G.current.id&&((d=document.getElementById(G.current.id))==null||d.focus({preventScroll:!0})))}},[]),U(()=>{e.left!==void 0&&!X&&y(e.left)},[e.left,X]),U(()=>{e.top!==void 0&&!X&&I(e.top)},[e.top,X]),U(()=>{e.initialLeft!==void 0&&y(e.initialLeft)},[e.initialLeft]),U(()=>{e.initialTop!==void 0&&I(e.initialTop)},[e.initialTop]),U(()=>{const t=M();if(e.appendTo&&t){const n=e.appendTo.getBoundingClientRect(),r=t.body.getBoundingClientRect();O.current.x=n.left-r.left,O.current.y=n.top-r.top}},[e.appendTo,M]),st(S,()=>({get element(){return R.current},get windowElement(){return R.current},get draggable(){return De.current},props:e}),[e]);const Be=T.Children.toArray(e.children),at=$e(Be),rt=Ye(Be),ct=a.classNames("k-window",e.className,{[`k-window-${e.themeColor}`]:e.themeColor,"k-window-minimized":c==="MINIMIZED","k-focus":Ve}),Re=T.createElement(a.ZIndexContext.Provider,{value:P},T.createElement(T.Fragment,null,fe&&T.createElement("div",{className:"k-overlay",style:{zIndex:P,...e.overlayStyle}}),T.createElement("div",{id:e.id,[p.DATA_DIALOGS_ID]:ce,tabIndex:0,role:"dialog","aria-labelledby":Ce.current,onFocus:tt,onBlur:nt,onKeyDown:Je,ref:R,className:ct,style:{top:Z,left:K,width:D,height:C||"",zIndex:P,...e.style}},T.createElement(gt.MiddleLayerOptimization,{shouldUpdateOnDrag:e.shouldUpdateOnDrag||!1,isDragging:X},T.createElement(a.Draggable,{onPress:Qe,onDrag:pe,onRelease:et,autoScroll:!1,ref:De},T.createElement(ut.WindowTitleBar,{stage:c,onDoubleClick:je?it:void 0,onMinimizeButtonClick:We,onFullScreenButtonClick:de,onRestoreButtonClick:V,onCloseButtonClick:ve,closeButton:e.closeButton,minimizeButton:e.minimizeButton,maximizeButton:e.maximizeButton,restoreButton:e.restoreButton,id:Ce.current},e.title)),c===o.windowStage.MINIMIZED?null:T.createElement(T.Fragment,null,T.createElement("div",{className:"k-window-content"},at),rt),c===o.windowStage.DEFAULT&&ue?T.createElement(ft.ResizeHandlers,{onResize:ot}):null))));return a.canUseDOM?e.appendTo===null?Re:ht.createPortal(Re,e.appendTo||document.body):null});Ee.displayName="Window";const qe=a.createPropsContext(),Te=a.withIdHOC(a.withPropsContext(qe,Ee));Te.displayName="KendoReactWindow";const Tt={autoFocus:i.bool,title:i.any,className:i.string,closeButton:i.func,minimizeButton:i.func,maximizeButton:i.func,restoreButton:i.func,modal:i.bool,overlayStyle:i.object,width:i.number,height:i.number,minWidth:i.number,minHeight:i.number,left:i.number,top:i.number,initialLeft:i.number,initialTop:i.number,initialWidth:i.number,initialHeight:i.number,resizable:i.bool,draggable:i.bool,doubleClickStageChange:i.bool,stage:i.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),onClose:i.func,onMove:i.func,onResize:i.func,onStageChange:i.func,children:i.node,id:i.string,dir:i.string,style:i.object,appendTo:i.any,themeColor:i.oneOf(["primary","dark","light"]),shouldUpdateOnDrag:i.bool};Te.propTypes=Tt;exports.Window=Te;exports.WindowPropsContext=qe;exports.WindowWithoutContext=Ee;