@progress/kendo-react-dialogs 7.2.4-develop.2 → 7.2.4-develop.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-react-dialogs.js +1 -1
- package/index.js +1 -1
- package/index.mjs +67 -72
- package/package.json +3 -3
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
(function(c,S){typeof exports=="object"&&typeof module!="undefined"?S(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")):typeof define=="function"&&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"],S):(c=typeof globalThis!="undefined"?globalThis:c||self,S(c.KendoReactDialogs={},c.React,c.ReactDOM,c.PropTypes,c.KendoReactButtons,c.KendoSvgIcons,c.KendoReactCommon,c.KendoReactIntl))})(this,function(c,S,$,o,b,C,n,J){"use strict";"use client";function Z(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:()=>h[t]})}}return i.default=h,Object.freeze(i)}const s=Z(S),R=Z($),Q=({children:h,onCloseButtonClick:i,id:t,closeIcon:e})=>s.createElement("div",{className:"k-window-titlebar k-dialog-titlebar",id:t},s.createElement("span",{className:"k-window-title k-dialog-title"},h),s.createElement("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions"},e&&s.createElement(b.Button,{role:"button","aria-label":"Close",onClick:i,icon:"x",svgIcon:C.xIcon,fillMode:"flat",className:"k-window-titlebar-action k-dialog-titlebar-action"}))),v=h=>{const i={layout:"stretched",...h},{layout:t,children:e}=i,r=n.classNames("k-actions","k-actions-horizontal","k-window-actions k-dialog-actions",{[`k-actions-${t}`]:t});return s.createElement("div",{className:r},e)};v.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const y={name:"@progress/kendo-react-dialogs",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},M="data-windowid",z=10002,x=2,P=".k-window:not(.k-dialog), .k-dialog-wrapper",A=(h,i,t)=>{let e=h;if(i&&i.defaultView){let r=i.querySelectorAll(P),d=!1;return r.forEach(p=>{let l=i.defaultView.getComputedStyle(p,null);if(p.getAttribute(M)!==t&&l.zIndex!==null){let u=parseInt(l.zIndex,10);u>=e&&(e=u,d=!0)}}),d?e+x:e}return e};class W extends s.Component{constructor(i){super(i),this.context=0,this.titleId=this.generateTitleId(),this.contentId=this.generateContentId(),this.showLicenseWatermark=!1,this.onCloseDialog=t=>{t.preventDefault(),n.dispatchEvent(this.props.onClose,t,this,void 0)},this.onKeyDown=t=>{t.keyCode===n.Keys.esc&&this.props.onClose&&(t.preventDefault(),this.onCloseDialog(t));const e=this.element;if(e&&t.keyCode===n.Keys.tab){const r='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',d=e.querySelectorAll(r),p=d[0],l=d[d.length-1],g=this.getDocument(),u=n.getActiveElement(g);t.shiftKey?(g&&u===p||g&&u===this.element)&&(l.focus(),t.preventDefault()):g&&u===l&&(p.focus(),t.preventDefault())}},this.getCurrentZIndex=()=>!this.state||this.context===void 0?this.context?this.context:z:this.state.zIndex>(this.context?this.context+x:0)?this.state.zIndex:this.context+x,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,n.validatePackage(y),this.showLicenseWatermark=n.shouldShowValidationUI(y)}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){this.element&&(this.props.autoFocus&&this.element.focus(),this.setState({zIndex:A(this.getCurrentZIndex(),this.getDocument(),this._id)}))}render(){const i=this.props.id!==void 0?this.props.id:this.titleId,{title:t,width:e,height:r,children:d,minWidth:p,dir:l,style:g,contentStyle:u}=this.props,m=s.Children.toArray(d),E=this.getContent(m),D=this.getActionBar(m),I=t?{"aria-labelledby":i}:null,f=this.props.closeIcon!==void 0?this.props.closeIcon:!0,X=this.getCurrentZIndex(),Y=s.createElement(n.ZIndexContext.Provider,{value:X},s.createElement("div",{[M]:this._id,className:"k-dialog-wrapper"+(this.props.className?" "+this.props.className:""),onKeyDown:this.onKeyDown,tabIndex:0,dir:l,style:{zIndex:X,...g},ref:ot=>this.element=ot},s.createElement("div",{className:"k-overlay"}),s.createElement("div",{...I,className:n.classNames("k-window k-dialog",{[`k-window-${this.props.themeColor}`]:this.props.themeColor}),role:"dialog","aria-labelledby":i,"aria-modal":!0,"aria-describedby":this.contentId,style:{width:e,height:r,minWidth:p}},this.props.title&&s.createElement(Q,{closeIcon:f,onCloseButtonClick:this.onCloseDialog,id:i},t),s.createElement("div",{className:"k-window-content k-dialog-content",style:u,id:this.contentId},E),D,this.showLicenseWatermark&&s.createElement(n.WatermarkOverlay,null))));return n.canUseDOM?this.props.appendTo!==null?R.createPortal(Y,this.props.appendTo||document.body):Y:null}getActionBar(i){return i.filter(t=>t&&t.type===v)}getContent(i){return i.filter(t=>t&&t.type!==v)}generateTitleId(){return"dialog-title-"+this._id}generateContentId(){return"dialog-content-"+this._id}}W.displayName="Dialog",W.propTypes={title:o.any,id:o.string,dir:o.string,style:o.object,closeIcon:o.bool,width:o.oneOfType([o.number,o.string]),height:o.oneOfType([o.number,o.string]),minWidth:o.oneOfType([o.number,o.string]),autoFocus:o.bool},W.defaultProps={autoFocus:!1},W.contextType=n.ZIndexContext;const j=n.createPropsContext(),q=n.withIdHOC(n.withPropsContext(j,W));q.displayName="KendoReactDialog";var a=(h=>(h.DEFAULT="DEFAULT",h.FULLSCREEN="FULLSCREEN",h.MINIMIZED="MINIMIZED",h))(a||{});const T="dialogs.windowMaximizeButton",k="dialogs.windowMinimizeButton",F="dialogs.windowRestoreButton",U="dialogs.windowCloseButton",B={[T]:"maximize",[k]:"minimize",[F]:"restore",[U]:"close"},tt=h=>{const{children:i,onCloseButtonClick:t,onMinimizeButtonClick:e,onFullScreenButtonClick:r,onRestoreButtonClick:d,onDoubleClick:p,stage:l,forwardedRef:g,id:u}=h,m=J.useLocalization(),E=h.minimizeButton?s.createElement(h.minimizeButton,{onClick:e,stage:l}):s.createElement(b.Button,{fillMode:"flat",icon:"window-minimize",svgIcon:C.windowMinimizeIcon,className:"k-window-titlebar-action",onClick:e,"aria-label":m.toLanguageString(k,B[k])}),D=h.maximizeButton?s.createElement(h.maximizeButton,{onClick:r,stage:l}):s.createElement(b.Button,{fillMode:"flat",icon:"window-maximize",svgIcon:C.windowIcon,className:"k-window-titlebar-action",onClick:r,"aria-label":m.toLanguageString(T,B[T])}),I=h.restoreButton?s.createElement(h.restoreButton,{onClick:d,stage:l}):s.createElement(b.Button,{fillMode:"flat",icon:"window-restore",svgIcon:C.windowRestoreIcon,className:"k-window-titlebar-action",onClick:d,"aria-label":m.toLanguageString(F,B[F])}),f=h.closeButton?s.createElement(h.closeButton,{onClick:t,stage:l}):s.createElement(b.Button,{fillMode:"flat",icon:"x",svgIcon:C.xIcon,className:"k-window-titlebar-action",onClick:t,"aria-label":m.toLanguageString(U,B[U])});return s.createElement("div",{className:"k-window-titlebar",style:{touchAction:"none"},ref:g,onDoubleClick:p},s.createElement("span",{className:"k-window-title",id:u},i||""),s.createElement("div",{className:"k-window-titlebar-actions"},l===a.DEFAULT&&E,l===a.DEFAULT&&D,l!==a.DEFAULT&&I,f))},et=s.forwardRef((h,i)=>s.createElement(tt,{...h,forwardedRef:i})),it=["n","e","s","w","se","sw","ne","nw"];class st extends s.Component{render(){return s.createElement("div",{className:"k-resize-handles-wrapper"}," ",it.map((i,t)=>s.createElement(n.Draggable,{key:t,onDrag:e=>{const{event:r}=e;r.originalEvent.preventDefault(),this.props.onResize(r,{end:!1,direction:i})},onRelease:e=>{const{event:r}=e;r.originalEvent.preventDefault(),this.props.onResize(r,{end:!0,direction:i})}},s.createElement("div",{className:"k-resize-handle k-resize-"+i,style:{display:"block",touchAction:"none"}}))))}}class nt extends s.Component{shouldComponentUpdate(i){return i.shouldUpdateOnDrag||!i.isDragging}render(){return this.props.children}}const N=h=>{const i={layout:"end",...h},{layout:t,children:e}=i,r=n.classNames("k-actions","k-window-actions","k-actions-horizontal","k-hstack",{"k-justify-content-start":t==="start","k-justify-content-center":t==="center","k-justify-content-end":t==="end","k-justify-content-stretch":t==="stretched"});return s.createElement("div",{className:r},e)};N.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const O=300,H=300,_=120,K=100,w=5;class L extends s.Component{constructor(i){super(i),this.context=0,this.draggable=null,this.offSetCoordinates={x:0,y:0},this.titleId=this.generateTitleId(),this.mounted=!1,this.showLicenseWatermark=!1,this.onKeyDown=t=>{if(t.target!==t.currentTarget)return;const e=this.props.minWidth||_,r=this.props.minHeight||K;if(t.ctrlKey&&this.props.resizable){switch(t.keyCode){case n.Keys.up:t.preventDefault(),r<=this.height-w&&this.setState({height:this.height-w});break;case n.Keys.down:t.preventDefault(),this.setState({height:this.height+w});break;case n.Keys.left:e<=this.width-w&&this.setState({width:this.width-w});break;case n.Keys.right:this.setState({width:this.width+w});break;default:return}this.dispatchMoveEvent(this.props.onResize,t,!1,void 0);return}if(t.altKey){switch(t.keyCode){case n.Keys.up:this.windowStage===a.MINIMIZED?(this.handleRestore(t),n.dispatchEvent(this.props.onStageChange,t,this,{state:a.DEFAULT})):this.windowStage===a.DEFAULT&&(this.handleFullscreen(t),n.dispatchEvent(this.props.onStageChange,t,this,{state:a.FULLSCREEN}));break;case n.Keys.down:this.windowStage===a.FULLSCREEN?(this.handleRestore(t),n.dispatchEvent(this.props.onStageChange,t,this,{state:a.DEFAULT})):this.windowStage===a.DEFAULT&&(this.handleMinimize(t),n.dispatchEvent(this.props.onStageChange,t,this,{state:a.MINIMIZED}));break}return}if(!t.ctrlKey)switch(t.keyCode){case n.Keys.esc:this.props.onClose&&this.handleCloseWindow(t);return;case n.Keys.up:this.setState({top:this.state.top-w});break;case n.Keys.down:this.setState({top:this.state.top+w});break;case n.Keys.left:this.setState({left:this.state.left-w});break;case n.Keys.right:this.setState({left:this.state.left+w});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!==a.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!==a.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:A(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=H;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=O;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=O;return this.props.width!==void 0?t=this.props.width:this.props.initialWidth!==void 0&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=H;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:a.MINIMIZED,height:0}),n.dispatchEvent(this.props.onStageChange,t,this,{state:a.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(),r=e?e.innerWidth:0,d=e?e.innerHeight:0;this.setState({left:0,top:0,width:this.props.appendTo?this.props.appendTo.offsetWidth:r,height:this.props.appendTo?this.props.appendTo.offsetHeight:d,stage:a.FULLSCREEN}),n.dispatchEvent(this.props.onStageChange,t,this,{state:a.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===a.FULLSCREEN?this.setState({stage:a.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===a.MINIMIZED&&this.setState({stage:a.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),n.dispatchEvent(this.props.onStageChange,t,this,{state:a.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),n.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===a.FULLSCREEN||this.windowStage===a.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{const r=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,d=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,p=this.width,l=this.height,g=this.props.minWidth||_,u=this.props.minHeight||K,m=this.top-d,E=this.left-r;let D=r-this.left,I=d-this.top;const f=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&u-(l+m)<0&&(this.top>0&&(f.height=l+m),f.top=d),e.direction.indexOf("s")>=0&&u-I<0&&(f.height=I),e.direction.indexOf("w")>=0&&g-(p+E)<0&&(this.left>0&&(f.width=p+E),f.left=r),e.direction.indexOf("e")>=0&&g-D<0&&(f.width=D),this.setState(f),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,r,d)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:r,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===a.FULLSCREEN){const t=this.getWindow(),e=t?t.innerWidth:0,r=t?t.innerHeight:0;this.setState({width:this.props.appendTo?this.props.appendTo.offsetWidth:e,height:this.props.appendTo?this.props.appendTo.offsetHeight:r})}},this.getCurrentZIndex=()=>!this.state||this.context===void 0?this.context?this.context:z:this.state.zIndex>(this.context?this.context+x:0)?this.state.zIndex:this.context+x,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},n.validatePackage(y),this.showLicenseWatermark=n.shouldShowValidationUI(y),this.state={stage:this.props.stage||a.DEFAULT,isDragging:!1,top:0,left:0,width:O,height:H,focused:!0,zIndex:z}}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){const i=this.getWindow();i&&i.addEventListener("resize",this.handleBrowserWindowResize),this.setState({stage:this.props.stage||a.DEFAULT,isDragging:!1,top:this.getInitialTop(),left:this.getInitialLeft(),width:this.getInitialWidth(),height:this.getInitialHeight(),focused:!0,zIndex:A(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){let e=this.props.appendTo.getBoundingClientRect(),r=t.body.getBoundingClientRect();this.offSetCoordinates.x=e.left-r.left,this.offSetCoordinates.y=e.top-r.top}this.mounted=!0}componentWillUnmount(){const i=this.getWindow();i&&i.removeEventListener("resize",this.handleBrowserWindowResize),this.mounted=!1}componentDidUpdate(){const i=this.getDocument();if(this.props.appendTo&&i){let t=this.props.appendTo.getBoundingClientRect(),e=i.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-e.left,this.offSetCoordinates.y=t.top-e.top}this.mounted=!0}render(){const i=s.Children.toArray(this.props.children),t=this.getContent(i),e=this.getActionBar(i),r=this.getCurrentZIndex(),d=n.classNames("k-window",this.props.className,{[`k-window-${this.props.themeColor}`]:this.props.themeColor,"k-window-minimized":this.state.stage==="MINIMIZED","k-window-focused":this.state.focused}),p=s.createElement(n.ZIndexContext.Provider,{value:r},s.createElement(s.Fragment,null,this.props.modal&&s.createElement("div",{className:"k-overlay",style:{zIndex:r,...this.props.overlayStyle}}),s.createElement("div",{id:this.props.id,[M]: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:r,...this.props.style}},s.createElement(nt,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},s.createElement(n.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,ref:l=>this.draggable=l},s.createElement(et,{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!==a.MINIMIZED?s.createElement(s.Fragment,null,s.createElement("div",{className:"k-window-content"},t),e):null,this.windowStage===a.DEFAULT&&this.props.resizable?s.createElement(st,{onResize:this.handleResize}):null),this.showLicenseWatermark&&s.createElement(n.WatermarkOverlay,null))));return n.canUseDOM?this.props.appendTo!==null?R.createPortal(p,this.props.appendTo||document.body):p:null}get top(){return this.windowStage!==a.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==a.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let i=this.props.width||this.state.width;if(this.windowStage===a.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===a.FULLSCREEN){if(this.props.appendTo)return i=this.props.appendTo.offsetHeight,i;const t=this.getWindow();i=t?t.innerHeight:0}else this.windowStage===a.MINIMIZED&&(i=0);return i}get windowStage(){return this.props.stage||this.state.stage}getActionBar(i){return i.filter(t=>t&&t.type===N)}getContent(i){return i.filter(t=>t&&t.type!==N)}generateTitleId(){return"window-title-"+this._id}}L.displayName="Window",L.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},L.defaultProps={minWidth:_,minHeight:K,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0},L.contextType=n.ZIndexContext;const G=n.createPropsContext(),V=n.withIdHOC(n.withPropsContext(G,L));V.displayName="KendoReactWindow",c.Dialog=q,c.DialogActionsBar=v,c.DialogPropsContext=j,c.Window=V,c.WindowActionsBar=N,c.WindowPropsContext=G,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
|
|
5
|
+
(function(d,S){typeof exports=="object"&&typeof module!="undefined"?S(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")):typeof define=="function"&&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"],S):(d=typeof globalThis!="undefined"?globalThis:d||self,S(d.KendoReactDialogs={},d.React,d.ReactDOM,d.PropTypes,d.KendoReactButtons,d.KendoSvgIcons,d.KendoReactCommon,d.KendoReactIntl))})(this,function(d,S,$,o,C,b,n,J){"use strict";"use client";function Z(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:()=>h[t]})}}return i.default=h,Object.freeze(i)}const s=Z(S),R=Z($),Q=({children:h,onCloseButtonClick:i,id:t,closeIcon:e})=>s.createElement("div",{className:"k-window-titlebar k-dialog-titlebar",id:t},s.createElement("span",{className:"k-window-title k-dialog-title"},h),s.createElement("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions"},e&&s.createElement(C.Button,{role:"button","aria-label":"Close",onClick:i,icon:"x",svgIcon:b.xIcon,fillMode:"flat",className:"k-window-titlebar-action k-dialog-titlebar-action"}))),v=h=>{const i={layout:"stretched",...h},{layout:t,children:e}=i,a=n.classNames("k-actions","k-actions-horizontal","k-window-actions k-dialog-actions",{[`k-actions-${t}`]:t});return s.createElement("div",{className:a},e)};v.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const B={name:"@progress/kendo-react-dialogs",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},M="data-windowid",z=10002,x=2,P=".k-window:not(.k-dialog), .k-dialog-wrapper",T=(h,i,t)=>{let e=h;if(i&&i.defaultView){let a=i.querySelectorAll(P),c=!1;return a.forEach(p=>{let l=i.defaultView.getComputedStyle(p,null);if(p.getAttribute(M)!==t&&l.zIndex!==null){let f=parseInt(l.zIndex,10);f>=e&&(e=f,c=!0)}}),c?e+x:e}return e};class W extends s.Component{constructor(i){super(i),this.context=0,this.titleId=this.generateTitleId(),this.contentId=this.generateContentId(),this.showLicenseWatermark=!1,this.onCloseDialog=t=>{t.preventDefault(),n.dispatchEvent(this.props.onClose,t,this,void 0)},this.onKeyDown=t=>{t.keyCode===n.Keys.esc&&this.props.onClose&&(t.preventDefault(),this.onCloseDialog(t)),n.keepFocusInContainer(t,this.element)},this.getCurrentZIndex=()=>!this.state||this.context===void 0?this.context?this.context:z:this.state.zIndex>(this.context?this.context+x:0)?this.state.zIndex:this.context+x,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,n.validatePackage(B),this.showLicenseWatermark=n.shouldShowValidationUI(B)}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){this.element&&(this.props.autoFocus&&this.element.focus(),this.setState({zIndex:T(this.getCurrentZIndex(),this.getDocument(),this._id)}))}render(){const i=this.props.id!==void 0?this.props.id:this.titleId,{title:t,width:e,height:a,children:c,minWidth:p,dir:l,style:m,contentStyle:f}=this.props,w=s.Children.toArray(c),E=this.getContent(w),I=this.getActionBar(w),D=t?{"aria-labelledby":i}:null,g=this.props.closeIcon!==void 0?this.props.closeIcon:!0,X=this.getCurrentZIndex(),Y=s.createElement(n.ZIndexContext.Provider,{value:X},s.createElement("div",{[M]:this._id,className:"k-dialog-wrapper"+(this.props.className?" "+this.props.className:""),onKeyDown:this.onKeyDown,tabIndex:0,dir:l,style:{zIndex:X,...m},ref:ot=>this.element=ot},s.createElement("div",{className:"k-overlay"}),s.createElement("div",{...D,className:n.classNames("k-window k-dialog",{[`k-window-${this.props.themeColor}`]:this.props.themeColor}),role:"dialog","aria-labelledby":i,"aria-modal":!0,"aria-describedby":this.contentId,style:{width:e,height:a,minWidth:p}},this.props.title&&s.createElement(Q,{closeIcon:g,onCloseButtonClick:this.onCloseDialog,id:i},t),s.createElement("div",{className:"k-window-content k-dialog-content",style:f,id:this.contentId},E),I,this.showLicenseWatermark&&s.createElement(n.WatermarkOverlay,null))));return n.canUseDOM?this.props.appendTo!==null?R.createPortal(Y,this.props.appendTo||document.body):Y:null}getActionBar(i){return i.filter(t=>t&&t.type===v)}getContent(i){return i.filter(t=>t&&t.type!==v)}generateTitleId(){return"dialog-title-"+this._id}generateContentId(){return"dialog-content-"+this._id}}W.displayName="Dialog",W.propTypes={title:o.any,id:o.string,dir:o.string,style:o.object,closeIcon:o.bool,width:o.oneOfType([o.number,o.string]),height:o.oneOfType([o.number,o.string]),minWidth:o.oneOfType([o.number,o.string]),autoFocus:o.bool},W.defaultProps={autoFocus:!1},W.contextType=n.ZIndexContext;const j=n.createPropsContext(),q=n.withIdHOC(n.withPropsContext(j,W));q.displayName="KendoReactDialog";var r=(h=>(h.DEFAULT="DEFAULT",h.FULLSCREEN="FULLSCREEN",h.MINIMIZED="MINIMIZED",h))(r||{});const A="dialogs.windowMaximizeButton",k="dialogs.windowMinimizeButton",F="dialogs.windowRestoreButton",U="dialogs.windowCloseButton",y={[A]:"maximize",[k]:"minimize",[F]:"restore",[U]:"close"},tt=h=>{const{children:i,onCloseButtonClick:t,onMinimizeButtonClick:e,onFullScreenButtonClick:a,onRestoreButtonClick:c,onDoubleClick:p,stage:l,forwardedRef:m,id:f}=h,w=J.useLocalization(),E=h.minimizeButton?s.createElement(h.minimizeButton,{onClick:e,stage:l}):s.createElement(C.Button,{fillMode:"flat",icon:"window-minimize",svgIcon:b.windowMinimizeIcon,className:"k-window-titlebar-action",onClick:e,"aria-label":w.toLanguageString(k,y[k])}),I=h.maximizeButton?s.createElement(h.maximizeButton,{onClick:a,stage:l}):s.createElement(C.Button,{fillMode:"flat",icon:"window-maximize",svgIcon:b.windowIcon,className:"k-window-titlebar-action",onClick:a,"aria-label":w.toLanguageString(A,y[A])}),D=h.restoreButton?s.createElement(h.restoreButton,{onClick:c,stage:l}):s.createElement(C.Button,{fillMode:"flat",icon:"window-restore",svgIcon:b.windowRestoreIcon,className:"k-window-titlebar-action",onClick:c,"aria-label":w.toLanguageString(F,y[F])}),g=h.closeButton?s.createElement(h.closeButton,{onClick:t,stage:l}):s.createElement(C.Button,{fillMode:"flat",icon:"x",svgIcon:b.xIcon,className:"k-window-titlebar-action",onClick:t,"aria-label":w.toLanguageString(U,y[U])});return s.createElement("div",{className:"k-window-titlebar",style:{touchAction:"none"},ref:m,onDoubleClick:p},s.createElement("span",{className:"k-window-title",id:f},i||""),s.createElement("div",{className:"k-window-titlebar-actions"},l===r.DEFAULT&&E,l===r.DEFAULT&&I,l!==r.DEFAULT&&D,g))},et=s.forwardRef((h,i)=>s.createElement(tt,{...h,forwardedRef:i})),it=["n","e","s","w","se","sw","ne","nw"];class st extends s.Component{render(){return s.createElement("div",{className:"k-resize-handles-wrapper"}," ",it.map((i,t)=>s.createElement(n.Draggable,{key:t,onDrag:e=>{const{event:a}=e;a.originalEvent.preventDefault(),this.props.onResize(a,{end:!1,direction:i})},onRelease:e=>{const{event:a}=e;a.originalEvent.preventDefault(),this.props.onResize(a,{end:!0,direction:i})}},s.createElement("div",{className:"k-resize-handle k-resize-"+i,style:{display:"block",touchAction:"none"}}))))}}class nt extends s.Component{shouldComponentUpdate(i){return i.shouldUpdateOnDrag||!i.isDragging}render(){return this.props.children}}const N=h=>{const i={layout:"end",...h},{layout:t,children:e}=i,a=n.classNames("k-actions","k-window-actions","k-actions-horizontal","k-hstack",{"k-justify-content-start":t==="start","k-justify-content-center":t==="center","k-justify-content-end":t==="end","k-justify-content-stretch":t==="stretched"});return s.createElement("div",{className:a},e)};N.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const O=300,H=300,_=120,K=100,u=5;class L extends s.Component{constructor(i){super(i),this.context=0,this.draggable=null,this.offSetCoordinates={x:0,y:0},this.titleId=this.generateTitleId(),this.mounted=!1,this.showLicenseWatermark=!1,this.onKeyDown=t=>{if(t.target!==t.currentTarget)return;const e=this.props.minWidth||_,a=this.props.minHeight||K;if(t.ctrlKey&&this.props.resizable){switch(t.keyCode){case n.Keys.up:t.preventDefault(),a<=this.height-u&&this.setState({height:this.height-u});break;case n.Keys.down:t.preventDefault(),this.setState({height:this.height+u});break;case n.Keys.left:e<=this.width-u&&this.setState({width:this.width-u});break;case n.Keys.right:this.setState({width:this.width+u});break;default:return}this.dispatchMoveEvent(this.props.onResize,t,!1,void 0);return}if(t.altKey){switch(t.keyCode){case n.Keys.up:this.windowStage===r.MINIMIZED?(this.handleRestore(t),n.dispatchEvent(this.props.onStageChange,t,this,{state:r.DEFAULT})):this.windowStage===r.DEFAULT&&(this.handleFullscreen(t),n.dispatchEvent(this.props.onStageChange,t,this,{state:r.FULLSCREEN}));break;case n.Keys.down:this.windowStage===r.FULLSCREEN?(this.handleRestore(t),n.dispatchEvent(this.props.onStageChange,t,this,{state:r.DEFAULT})):this.windowStage===r.DEFAULT&&(this.handleMinimize(t),n.dispatchEvent(this.props.onStageChange,t,this,{state:r.MINIMIZED}));break}return}if(!t.ctrlKey)switch(t.keyCode){case n.Keys.esc:this.props.onClose&&this.handleCloseWindow(t);return;case n.Keys.up:this.setState({top:this.state.top-u});break;case n.Keys.down:this.setState({top:this.state.top+u});break;case n.Keys.left:this.setState({left:this.state.left-u});break;case n.Keys.right:this.setState({left:this.state.left+u});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!==r.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!==r.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:T(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=H;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=O;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=O;return this.props.width!==void 0?t=this.props.width:this.props.initialWidth!==void 0&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=H;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:r.MINIMIZED,height:0}),n.dispatchEvent(this.props.onStageChange,t,this,{state:r.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(),a=e?e.innerWidth:0,c=e?e.innerHeight:0;this.setState({left:0,top:0,width:this.props.appendTo?this.props.appendTo.offsetWidth:a,height:this.props.appendTo?this.props.appendTo.offsetHeight:c,stage:r.FULLSCREEN}),n.dispatchEvent(this.props.onStageChange,t,this,{state:r.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===r.FULLSCREEN?this.setState({stage:r.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===r.MINIMIZED&&this.setState({stage:r.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),n.dispatchEvent(this.props.onStageChange,t,this,{state:r.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),n.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===r.FULLSCREEN||this.windowStage===r.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{const a=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,c=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,p=this.width,l=this.height,m=this.props.minWidth||_,f=this.props.minHeight||K,w=this.top-c,E=this.left-a;let I=a-this.left,D=c-this.top;const g=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&f-(l+w)<0&&(this.top>0&&(g.height=l+w),g.top=c),e.direction.indexOf("s")>=0&&f-D<0&&(g.height=D),e.direction.indexOf("w")>=0&&m-(p+E)<0&&(this.left>0&&(g.width=p+E),g.left=a),e.direction.indexOf("e")>=0&&m-I<0&&(g.width=I),this.setState(g),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,a,c)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:a,end:c,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===r.FULLSCREEN){const t=this.getWindow(),e=t?t.innerWidth:0,a=t?t.innerHeight:0;this.setState({width:this.props.appendTo?this.props.appendTo.offsetWidth:e,height:this.props.appendTo?this.props.appendTo.offsetHeight:a})}},this.getCurrentZIndex=()=>!this.state||this.context===void 0?this.context?this.context:z:this.state.zIndex>(this.context?this.context+x:0)?this.state.zIndex:this.context+x,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},n.validatePackage(B),this.showLicenseWatermark=n.shouldShowValidationUI(B),this.state={stage:this.props.stage||r.DEFAULT,isDragging:!1,top:0,left:0,width:O,height:H,focused:!0,zIndex:z}}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){const i=this.getWindow();i&&i.addEventListener("resize",this.handleBrowserWindowResize),this.setState({stage:this.props.stage||r.DEFAULT,isDragging:!1,top:this.getInitialTop(),left:this.getInitialLeft(),width:this.getInitialWidth(),height:this.getInitialHeight(),focused:!0,zIndex:T(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){let e=this.props.appendTo.getBoundingClientRect(),a=t.body.getBoundingClientRect();this.offSetCoordinates.x=e.left-a.left,this.offSetCoordinates.y=e.top-a.top}this.mounted=!0}componentWillUnmount(){const i=this.getWindow();i&&i.removeEventListener("resize",this.handleBrowserWindowResize),this.mounted=!1}componentDidUpdate(){const i=this.getDocument();if(this.props.appendTo&&i){let t=this.props.appendTo.getBoundingClientRect(),e=i.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-e.left,this.offSetCoordinates.y=t.top-e.top}this.mounted=!0}render(){const i=s.Children.toArray(this.props.children),t=this.getContent(i),e=this.getActionBar(i),a=this.getCurrentZIndex(),c=n.classNames("k-window",this.props.className,{[`k-window-${this.props.themeColor}`]:this.props.themeColor,"k-window-minimized":this.state.stage==="MINIMIZED","k-window-focused":this.state.focused}),p=s.createElement(n.ZIndexContext.Provider,{value:a},s.createElement(s.Fragment,null,this.props.modal&&s.createElement("div",{className:"k-overlay",style:{zIndex:a,...this.props.overlayStyle}}),s.createElement("div",{id:this.props.id,[M]: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:c,style:{top:this.top,left:this.left,width:this.width,height:this.height||"",zIndex:a,...this.props.style}},s.createElement(nt,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},s.createElement(n.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,ref:l=>this.draggable=l},s.createElement(et,{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!==r.MINIMIZED?s.createElement(s.Fragment,null,s.createElement("div",{className:"k-window-content"},t),e):null,this.windowStage===r.DEFAULT&&this.props.resizable?s.createElement(st,{onResize:this.handleResize}):null),this.showLicenseWatermark&&s.createElement(n.WatermarkOverlay,null))));return n.canUseDOM?this.props.appendTo!==null?R.createPortal(p,this.props.appendTo||document.body):p:null}get top(){return this.windowStage!==r.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==r.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let i=this.props.width||this.state.width;if(this.windowStage===r.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===r.FULLSCREEN){if(this.props.appendTo)return i=this.props.appendTo.offsetHeight,i;const t=this.getWindow();i=t?t.innerHeight:0}else this.windowStage===r.MINIMIZED&&(i=0);return i}get windowStage(){return this.props.stage||this.state.stage}getActionBar(i){return i.filter(t=>t&&t.type===N)}getContent(i){return i.filter(t=>t&&t.type!==N)}generateTitleId(){return"window-title-"+this._id}}L.displayName="Window",L.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},L.defaultProps={minWidth:_,minHeight:K,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0},L.contextType=n.ZIndexContext;const G=n.createPropsContext(),V=n.withIdHOC(n.withPropsContext(G,L));V.displayName="KendoReactWindow",d.Dialog=q,d.DialogActionsBar=v,d.DialogPropsContext=j,d.Window=V,d.WindowActionsBar=N,d.WindowPropsContext=G,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
|
package/index.js
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),Y=require("react-dom"),n=require("prop-types"),I=require("@progress/kendo-react-buttons"),D=require("@progress/kendo-svg-icons"),o=require("@progress/kendo-react-common"),$=require("@progress/kendo-react-intl");function Z(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:()=>h[t]})}}return i.default=h,Object.freeze(i)}const s=Z(X),K=Z(Y),J=({children:h,onCloseButtonClick:i,id:t,closeIcon:e})=>s.createElement("div",{className:"k-window-titlebar k-dialog-titlebar",id:t},s.createElement("span",{className:"k-window-title k-dialog-title"},h),s.createElement("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions"},e&&s.createElement(I.Button,{role:"button","aria-label":"Close",onClick:i,icon:"x",svgIcon:D.xIcon,fillMode:"flat",className:"k-window-titlebar-action k-dialog-titlebar-action"}))),T=h=>{const i={layout:"stretched",...h},{layout:t,children:e}=i,a=o.classNames("k-actions","k-actions-horizontal","k-window-actions k-dialog-actions",{[`k-actions-${t}`]:t});return s.createElement("div",{className:a},e)};T.propTypes={children:n.any,layout:n.oneOf(["start","center","end","stretched"])};const x={name:"@progress/kendo-react-dialogs",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},O="data-windowid",B=10002,S=2,Q=".k-window:not(.k-dialog), .k-dialog-wrapper",N=(h,i,t)=>{let e=h;if(i&&i.defaultView){let a=i.querySelectorAll(Q),d=!1;return a.forEach(c=>{let l=i.defaultView.getComputedStyle(c,null);if(c.getAttribute(O)!==t&&l.zIndex!==null){let p=parseInt(l.zIndex,10);p>=e&&(e=p,d=!0)}}),d?e+S:e}return e};class y extends s.Component{constructor(i){super(i),this.context=0,this.titleId=this.generateTitleId(),this.contentId=this.generateContentId(),this.showLicenseWatermark=!1,this.onCloseDialog=t=>{t.preventDefault(),o.dispatchEvent(this.props.onClose,t,this,void 0)},this.onKeyDown=t=>{t.keyCode===o.Keys.esc&&this.props.onClose&&(t.preventDefault(),this.onCloseDialog(t));const e=this.element;if(e&&t.keyCode===o.Keys.tab){const a='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',d=e.querySelectorAll(a),c=d[0],l=d[d.length-1],g=this.getDocument(),p=o.getActiveElement(g);t.shiftKey?(g&&p===c||g&&p===this.element)&&(l.focus(),t.preventDefault()):g&&p===l&&(c.focus(),t.preventDefault())}},this.getCurrentZIndex=()=>!this.state||this.context===void 0?this.context?this.context:B:this.state.zIndex>(this.context?this.context+S:0)?this.state.zIndex:this.context+S,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,o.validatePackage(x),this.showLicenseWatermark=o.shouldShowValidationUI(x)}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){this.element&&(this.props.autoFocus&&this.element.focus(),this.setState({zIndex:N(this.getCurrentZIndex(),this.getDocument(),this._id)}))}render(){const i=this.props.id!==void 0?this.props.id:this.titleId,{title:t,width:e,height:a,children:d,minWidth:c,dir:l,style:g,contentStyle:p}=this.props,w=s.Children.toArray(d),m=this.getContent(w),C=this.getActionBar(w),E=t?{"aria-labelledby":i}:null,u=this.props.closeIcon!==void 0?this.props.closeIcon:!0,H=this.getCurrentZIndex(),_=s.createElement(o.ZIndexContext.Provider,{value:H},s.createElement("div",{[O]:this._id,className:"k-dialog-wrapper"+(this.props.className?" "+this.props.className:""),onKeyDown:this.onKeyDown,tabIndex:0,dir:l,style:{zIndex:H,...g},ref:V=>this.element=V},s.createElement("div",{className:"k-overlay"}),s.createElement("div",{...E,className:o.classNames("k-window k-dialog",{[`k-window-${this.props.themeColor}`]:this.props.themeColor}),role:"dialog","aria-labelledby":i,"aria-modal":!0,"aria-describedby":this.contentId,style:{width:e,height:a,minWidth:c}},this.props.title&&s.createElement(J,{closeIcon:u,onCloseButtonClick:this.onCloseDialog,id:i},t),s.createElement("div",{className:"k-window-content k-dialog-content",style:p,id:this.contentId},m),C,this.showLicenseWatermark&&s.createElement(o.WatermarkOverlay,null))));return o.canUseDOM?this.props.appendTo!==null?K.createPortal(_,this.props.appendTo||document.body):_:null}getActionBar(i){return i.filter(t=>t&&t.type===T)}getContent(i){return i.filter(t=>t&&t.type!==T)}generateTitleId(){return"dialog-title-"+this._id}generateContentId(){return"dialog-content-"+this._id}}y.displayName="Dialog";y.propTypes={title:n.any,id:n.string,dir:n.string,style:n.object,closeIcon:n.bool,width:n.oneOfType([n.number,n.string]),height:n.oneOfType([n.number,n.string]),minWidth:n.oneOfType([n.number,n.string]),autoFocus:n.bool};y.defaultProps={autoFocus:!1};y.contextType=o.ZIndexContext;const P=o.createPropsContext(),j=o.withIdHOC(o.withPropsContext(P,y));j.displayName="KendoReactDialog";var r=(h=>(h.DEFAULT="DEFAULT",h.FULLSCREEN="FULLSCREEN",h.MINIMIZED="MINIMIZED",h))(r||{});const M="dialogs.windowMaximizeButton",z="dialogs.windowMinimizeButton",R="dialogs.windowRestoreButton",A="dialogs.windowCloseButton",k={[M]:"maximize",[z]:"minimize",[R]:"restore",[A]:"close"},tt=h=>{const{children:i,onCloseButtonClick:t,onMinimizeButtonClick:e,onFullScreenButtonClick:a,onRestoreButtonClick:d,onDoubleClick:c,stage:l,forwardedRef:g,id:p}=h,w=$.useLocalization(),m=h.minimizeButton?s.createElement(h.minimizeButton,{onClick:e,stage:l}):s.createElement(I.Button,{fillMode:"flat",icon:"window-minimize",svgIcon:D.windowMinimizeIcon,className:"k-window-titlebar-action",onClick:e,"aria-label":w.toLanguageString(z,k[z])}),C=h.maximizeButton?s.createElement(h.maximizeButton,{onClick:a,stage:l}):s.createElement(I.Button,{fillMode:"flat",icon:"window-maximize",svgIcon:D.windowIcon,className:"k-window-titlebar-action",onClick:a,"aria-label":w.toLanguageString(M,k[M])}),E=h.restoreButton?s.createElement(h.restoreButton,{onClick:d,stage:l}):s.createElement(I.Button,{fillMode:"flat",icon:"window-restore",svgIcon:D.windowRestoreIcon,className:"k-window-titlebar-action",onClick:d,"aria-label":w.toLanguageString(R,k[R])}),u=h.closeButton?s.createElement(h.closeButton,{onClick:t,stage:l}):s.createElement(I.Button,{fillMode:"flat",icon:"x",svgIcon:D.xIcon,className:"k-window-titlebar-action",onClick:t,"aria-label":w.toLanguageString(A,k[A])});return s.createElement("div",{className:"k-window-titlebar",style:{touchAction:"none"},ref:g,onDoubleClick:c},s.createElement("span",{className:"k-window-title",id:p},i||""),s.createElement("div",{className:"k-window-titlebar-actions"},l===r.DEFAULT&&m,l===r.DEFAULT&&C,l!==r.DEFAULT&&E,u))},et=s.forwardRef((h,i)=>s.createElement(tt,{...h,forwardedRef:i})),it=["n","e","s","w","se","sw","ne","nw"];class st extends s.Component{render(){return s.createElement("div",{className:"k-resize-handles-wrapper"}," ",it.map((i,t)=>s.createElement(o.Draggable,{key:t,onDrag:e=>{const{event:a}=e;a.originalEvent.preventDefault(),this.props.onResize(a,{end:!1,direction:i})},onRelease:e=>{const{event:a}=e;a.originalEvent.preventDefault(),this.props.onResize(a,{end:!0,direction:i})}},s.createElement("div",{className:"k-resize-handle k-resize-"+i,style:{display:"block",touchAction:"none"}}))))}}class ot extends s.Component{shouldComponentUpdate(i){return i.shouldUpdateOnDrag||!i.isDragging}render(){return this.props.children}}const v=h=>{const i={layout:"end",...h},{layout:t,children:e}=i,a=o.classNames("k-actions","k-window-actions","k-actions-horizontal","k-hstack",{"k-justify-content-start":t==="start","k-justify-content-center":t==="center","k-justify-content-end":t==="end","k-justify-content-stretch":t==="stretched"});return s.createElement("div",{className:a},e)};v.propTypes={children:n.any,layout:n.oneOf(["start","center","end","stretched"])};const W=300,L=300,F=120,U=100,f=5;class b extends s.Component{constructor(i){super(i),this.context=0,this.draggable=null,this.offSetCoordinates={x:0,y:0},this.titleId=this.generateTitleId(),this.mounted=!1,this.showLicenseWatermark=!1,this.onKeyDown=t=>{if(t.target!==t.currentTarget)return;const e=this.props.minWidth||F,a=this.props.minHeight||U;if(t.ctrlKey&&this.props.resizable){switch(t.keyCode){case o.Keys.up:t.preventDefault(),a<=this.height-f&&this.setState({height:this.height-f});break;case o.Keys.down:t.preventDefault(),this.setState({height:this.height+f});break;case o.Keys.left:e<=this.width-f&&this.setState({width:this.width-f});break;case o.Keys.right:this.setState({width:this.width+f});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===r.MINIMIZED?(this.handleRestore(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.DEFAULT})):this.windowStage===r.DEFAULT&&(this.handleFullscreen(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.FULLSCREEN}));break;case o.Keys.down:this.windowStage===r.FULLSCREEN?(this.handleRestore(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.DEFAULT})):this.windowStage===r.DEFAULT&&(this.handleMinimize(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.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({top:this.state.top-f});break;case o.Keys.down:this.setState({top:this.state.top+f});break;case o.Keys.left:this.setState({left:this.state.left-f});break;case o.Keys.right:this.setState({left:this.state.left+f});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!==r.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!==r.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:N(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=L;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=W;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;return this.props.width!==void 0?t=this.props.width:this.props.initialWidth!==void 0&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=L;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:r.MINIMIZED,height:0}),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.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(),a=e?e.innerWidth:0,d=e?e.innerHeight:0;this.setState({left:0,top:0,width:this.props.appendTo?this.props.appendTo.offsetWidth:a,height:this.props.appendTo?this.props.appendTo.offsetHeight:d,stage:r.FULLSCREEN}),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===r.FULLSCREEN?this.setState({stage:r.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===r.MINIMIZED&&this.setState({stage:r.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),o.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===r.FULLSCREEN||this.windowStage===r.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{const a=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,d=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,c=this.width,l=this.height,g=this.props.minWidth||F,p=this.props.minHeight||U,w=this.top-d,m=this.left-a;let C=a-this.left,E=d-this.top;const u=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&p-(l+w)<0&&(this.top>0&&(u.height=l+w),u.top=d),e.direction.indexOf("s")>=0&&p-E<0&&(u.height=E),e.direction.indexOf("w")>=0&&g-(c+m)<0&&(this.left>0&&(u.width=c+m),u.left=a),e.direction.indexOf("e")>=0&&g-C<0&&(u.width=C),this.setState(u),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,a,d)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:a,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===r.FULLSCREEN){const t=this.getWindow(),e=t?t.innerWidth:0,a=t?t.innerHeight:0;this.setState({width:this.props.appendTo?this.props.appendTo.offsetWidth:e,height:this.props.appendTo?this.props.appendTo.offsetHeight:a})}},this.getCurrentZIndex=()=>!this.state||this.context===void 0?this.context?this.context:B:this.state.zIndex>(this.context?this.context+S:0)?this.state.zIndex:this.context+S,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},o.validatePackage(x),this.showLicenseWatermark=o.shouldShowValidationUI(x),this.state={stage:this.props.stage||r.DEFAULT,isDragging:!1,top:0,left:0,width:W,height:L,focused:!0,zIndex:B}}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){const i=this.getWindow();i&&i.addEventListener("resize",this.handleBrowserWindowResize),this.setState({stage:this.props.stage||r.DEFAULT,isDragging:!1,top:this.getInitialTop(),left:this.getInitialLeft(),width:this.getInitialWidth(),height:this.getInitialHeight(),focused:!0,zIndex:N(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){let e=this.props.appendTo.getBoundingClientRect(),a=t.body.getBoundingClientRect();this.offSetCoordinates.x=e.left-a.left,this.offSetCoordinates.y=e.top-a.top}this.mounted=!0}componentWillUnmount(){const i=this.getWindow();i&&i.removeEventListener("resize",this.handleBrowserWindowResize),this.mounted=!1}componentDidUpdate(){const i=this.getDocument();if(this.props.appendTo&&i){let t=this.props.appendTo.getBoundingClientRect(),e=i.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-e.left,this.offSetCoordinates.y=t.top-e.top}this.mounted=!0}render(){const i=s.Children.toArray(this.props.children),t=this.getContent(i),e=this.getActionBar(i),a=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-window-focused":this.state.focused}),c=s.createElement(o.ZIndexContext.Provider,{value:a},s.createElement(s.Fragment,null,this.props.modal&&s.createElement("div",{className:"k-overlay",style:{zIndex:a,...this.props.overlayStyle}}),s.createElement("div",{id:this.props.id,[O]: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:a,...this.props.style}},s.createElement(ot,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},s.createElement(o.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,ref:l=>this.draggable=l},s.createElement(et,{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!==r.MINIMIZED?s.createElement(s.Fragment,null,s.createElement("div",{className:"k-window-content"},t),e):null,this.windowStage===r.DEFAULT&&this.props.resizable?s.createElement(st,{onResize:this.handleResize}):null),this.showLicenseWatermark&&s.createElement(o.WatermarkOverlay,null))));return o.canUseDOM?this.props.appendTo!==null?K.createPortal(c,this.props.appendTo||document.body):c:null}get top(){return this.windowStage!==r.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==r.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let i=this.props.width||this.state.width;if(this.windowStage===r.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===r.FULLSCREEN){if(this.props.appendTo)return i=this.props.appendTo.offsetHeight,i;const t=this.getWindow();i=t?t.innerHeight:0}else this.windowStage===r.MINIMIZED&&(i=0);return i}get windowStage(){return this.props.stage||this.state.stage}getActionBar(i){return i.filter(t=>t&&t.type===v)}getContent(i){return i.filter(t=>t&&t.type!==v)}generateTitleId(){return"window-title-"+this._id}}b.displayName="Window";b.propTypes={width:n.number,height:n.number,left:n.number,top:n.number,initialWidth:n.number,initialHeight:n.number,initialLeft:n.number,initialTop:n.number,minWidth:n.number,minHeight:n.number,resizable:n.bool,draggable:n.bool,title:n.any,shouldUpdateOnDrag:n.bool,stage:n.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),className:n.string,id:n.string,style:n.object,overlayStyle:n.object};b.defaultProps={minWidth:F,minHeight:U,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0};b.contextType=o.ZIndexContext;const q=o.createPropsContext(),G=o.withIdHOC(o.withPropsContext(q,b));G.displayName="KendoReactWindow";exports.Dialog=j;exports.DialogActionsBar=T;exports.DialogPropsContext=P;exports.Window=G;exports.WindowActionsBar=v;exports.WindowPropsContext=q;
|
|
5
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),Y=require("react-dom"),n=require("prop-types"),I=require("@progress/kendo-react-buttons"),D=require("@progress/kendo-svg-icons"),o=require("@progress/kendo-react-common"),$=require("@progress/kendo-react-intl");function Z(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:()=>h[t]})}}return i.default=h,Object.freeze(i)}const s=Z(X),P=Z(Y),J=({children:h,onCloseButtonClick:i,id:t,closeIcon:e})=>s.createElement("div",{className:"k-window-titlebar k-dialog-titlebar",id:t},s.createElement("span",{className:"k-window-title k-dialog-title"},h),s.createElement("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions"},e&&s.createElement(I.Button,{role:"button","aria-label":"Close",onClick:i,icon:"x",svgIcon:D.xIcon,fillMode:"flat",className:"k-window-titlebar-action k-dialog-titlebar-action"}))),T=h=>{const i={layout:"stretched",...h},{layout:t,children:e}=i,a=o.classNames("k-actions","k-actions-horizontal","k-window-actions k-dialog-actions",{[`k-actions-${t}`]:t});return s.createElement("div",{className:a},e)};T.propTypes={children:n.any,layout:n.oneOf(["start","center","end","stretched"])};const x={name:"@progress/kendo-react-dialogs",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},O="data-windowid",B=10002,S=2,Q=".k-window:not(.k-dialog), .k-dialog-wrapper",N=(h,i,t)=>{let e=h;if(i&&i.defaultView){let a=i.querySelectorAll(Q),l=!1;return a.forEach(c=>{let d=i.defaultView.getComputedStyle(c,null);if(c.getAttribute(O)!==t&&d.zIndex!==null){let w=parseInt(d.zIndex,10);w>=e&&(e=w,l=!0)}}),l?e+S:e}return e};class y extends s.Component{constructor(i){super(i),this.context=0,this.titleId=this.generateTitleId(),this.contentId=this.generateContentId(),this.showLicenseWatermark=!1,this.onCloseDialog=t=>{t.preventDefault(),o.dispatchEvent(this.props.onClose,t,this,void 0)},this.onKeyDown=t=>{t.keyCode===o.Keys.esc&&this.props.onClose&&(t.preventDefault(),this.onCloseDialog(t)),o.keepFocusInContainer(t,this.element)},this.getCurrentZIndex=()=>!this.state||this.context===void 0?this.context?this.context:B:this.state.zIndex>(this.context?this.context+S:0)?this.state.zIndex:this.context+S,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,o.validatePackage(x),this.showLicenseWatermark=o.shouldShowValidationUI(x)}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){this.element&&(this.props.autoFocus&&this.element.focus(),this.setState({zIndex:N(this.getCurrentZIndex(),this.getDocument(),this._id)}))}render(){const i=this.props.id!==void 0?this.props.id:this.titleId,{title:t,width:e,height:a,children:l,minWidth:c,dir:d,style:f,contentStyle:w}=this.props,g=s.Children.toArray(l),m=this.getContent(g),C=this.getActionBar(g),E=t?{"aria-labelledby":i}:null,p=this.props.closeIcon!==void 0?this.props.closeIcon:!0,H=this.getCurrentZIndex(),_=s.createElement(o.ZIndexContext.Provider,{value:H},s.createElement("div",{[O]:this._id,className:"k-dialog-wrapper"+(this.props.className?" "+this.props.className:""),onKeyDown:this.onKeyDown,tabIndex:0,dir:d,style:{zIndex:H,...f},ref:V=>this.element=V},s.createElement("div",{className:"k-overlay"}),s.createElement("div",{...E,className:o.classNames("k-window k-dialog",{[`k-window-${this.props.themeColor}`]:this.props.themeColor}),role:"dialog","aria-labelledby":i,"aria-modal":!0,"aria-describedby":this.contentId,style:{width:e,height:a,minWidth:c}},this.props.title&&s.createElement(J,{closeIcon:p,onCloseButtonClick:this.onCloseDialog,id:i},t),s.createElement("div",{className:"k-window-content k-dialog-content",style:w,id:this.contentId},m),C,this.showLicenseWatermark&&s.createElement(o.WatermarkOverlay,null))));return o.canUseDOM?this.props.appendTo!==null?P.createPortal(_,this.props.appendTo||document.body):_:null}getActionBar(i){return i.filter(t=>t&&t.type===T)}getContent(i){return i.filter(t=>t&&t.type!==T)}generateTitleId(){return"dialog-title-"+this._id}generateContentId(){return"dialog-content-"+this._id}}y.displayName="Dialog";y.propTypes={title:n.any,id:n.string,dir:n.string,style:n.object,closeIcon:n.bool,width:n.oneOfType([n.number,n.string]),height:n.oneOfType([n.number,n.string]),minWidth:n.oneOfType([n.number,n.string]),autoFocus:n.bool};y.defaultProps={autoFocus:!1};y.contextType=o.ZIndexContext;const K=o.createPropsContext(),j=o.withIdHOC(o.withPropsContext(K,y));j.displayName="KendoReactDialog";var r=(h=>(h.DEFAULT="DEFAULT",h.FULLSCREEN="FULLSCREEN",h.MINIMIZED="MINIMIZED",h))(r||{});const M="dialogs.windowMaximizeButton",z="dialogs.windowMinimizeButton",R="dialogs.windowRestoreButton",A="dialogs.windowCloseButton",b={[M]:"maximize",[z]:"minimize",[R]:"restore",[A]:"close"},tt=h=>{const{children:i,onCloseButtonClick:t,onMinimizeButtonClick:e,onFullScreenButtonClick:a,onRestoreButtonClick:l,onDoubleClick:c,stage:d,forwardedRef:f,id:w}=h,g=$.useLocalization(),m=h.minimizeButton?s.createElement(h.minimizeButton,{onClick:e,stage:d}):s.createElement(I.Button,{fillMode:"flat",icon:"window-minimize",svgIcon:D.windowMinimizeIcon,className:"k-window-titlebar-action",onClick:e,"aria-label":g.toLanguageString(z,b[z])}),C=h.maximizeButton?s.createElement(h.maximizeButton,{onClick:a,stage:d}):s.createElement(I.Button,{fillMode:"flat",icon:"window-maximize",svgIcon:D.windowIcon,className:"k-window-titlebar-action",onClick:a,"aria-label":g.toLanguageString(M,b[M])}),E=h.restoreButton?s.createElement(h.restoreButton,{onClick:l,stage:d}):s.createElement(I.Button,{fillMode:"flat",icon:"window-restore",svgIcon:D.windowRestoreIcon,className:"k-window-titlebar-action",onClick:l,"aria-label":g.toLanguageString(R,b[R])}),p=h.closeButton?s.createElement(h.closeButton,{onClick:t,stage:d}):s.createElement(I.Button,{fillMode:"flat",icon:"x",svgIcon:D.xIcon,className:"k-window-titlebar-action",onClick:t,"aria-label":g.toLanguageString(A,b[A])});return s.createElement("div",{className:"k-window-titlebar",style:{touchAction:"none"},ref:f,onDoubleClick:c},s.createElement("span",{className:"k-window-title",id:w},i||""),s.createElement("div",{className:"k-window-titlebar-actions"},d===r.DEFAULT&&m,d===r.DEFAULT&&C,d!==r.DEFAULT&&E,p))},et=s.forwardRef((h,i)=>s.createElement(tt,{...h,forwardedRef:i})),it=["n","e","s","w","se","sw","ne","nw"];class st extends s.Component{render(){return s.createElement("div",{className:"k-resize-handles-wrapper"}," ",it.map((i,t)=>s.createElement(o.Draggable,{key:t,onDrag:e=>{const{event:a}=e;a.originalEvent.preventDefault(),this.props.onResize(a,{end:!1,direction:i})},onRelease:e=>{const{event:a}=e;a.originalEvent.preventDefault(),this.props.onResize(a,{end:!0,direction:i})}},s.createElement("div",{className:"k-resize-handle k-resize-"+i,style:{display:"block",touchAction:"none"}}))))}}class ot extends s.Component{shouldComponentUpdate(i){return i.shouldUpdateOnDrag||!i.isDragging}render(){return this.props.children}}const W=h=>{const i={layout:"end",...h},{layout:t,children:e}=i,a=o.classNames("k-actions","k-window-actions","k-actions-horizontal","k-hstack",{"k-justify-content-start":t==="start","k-justify-content-center":t==="center","k-justify-content-end":t==="end","k-justify-content-stretch":t==="stretched"});return s.createElement("div",{className:a},e)};W.propTypes={children:n.any,layout:n.oneOf(["start","center","end","stretched"])};const v=300,L=300,F=120,U=100,u=5;class k extends s.Component{constructor(i){super(i),this.context=0,this.draggable=null,this.offSetCoordinates={x:0,y:0},this.titleId=this.generateTitleId(),this.mounted=!1,this.showLicenseWatermark=!1,this.onKeyDown=t=>{if(t.target!==t.currentTarget)return;const e=this.props.minWidth||F,a=this.props.minHeight||U;if(t.ctrlKey&&this.props.resizable){switch(t.keyCode){case o.Keys.up:t.preventDefault(),a<=this.height-u&&this.setState({height:this.height-u});break;case o.Keys.down:t.preventDefault(),this.setState({height:this.height+u});break;case o.Keys.left:e<=this.width-u&&this.setState({width:this.width-u});break;case o.Keys.right:this.setState({width:this.width+u});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===r.MINIMIZED?(this.handleRestore(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.DEFAULT})):this.windowStage===r.DEFAULT&&(this.handleFullscreen(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.FULLSCREEN}));break;case o.Keys.down:this.windowStage===r.FULLSCREEN?(this.handleRestore(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.DEFAULT})):this.windowStage===r.DEFAULT&&(this.handleMinimize(t),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.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({top:this.state.top-u});break;case o.Keys.down:this.setState({top:this.state.top+u});break;case o.Keys.left:this.setState({left:this.state.left-u});break;case o.Keys.right:this.setState({left:this.state.left+u});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!==r.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!==r.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:N(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=L;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=v;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=v;return this.props.width!==void 0?t=this.props.width:this.props.initialWidth!==void 0&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=L;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:r.MINIMIZED,height:0}),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.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(),a=e?e.innerWidth:0,l=e?e.innerHeight:0;this.setState({left:0,top:0,width:this.props.appendTo?this.props.appendTo.offsetWidth:a,height:this.props.appendTo?this.props.appendTo.offsetHeight:l,stage:r.FULLSCREEN}),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===r.FULLSCREEN?this.setState({stage:r.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===r.MINIMIZED&&this.setState({stage:r.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),o.dispatchEvent(this.props.onStageChange,t,this,{state:r.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),o.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===r.FULLSCREEN||this.windowStage===r.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{const a=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,l=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,c=this.width,d=this.height,f=this.props.minWidth||F,w=this.props.minHeight||U,g=this.top-l,m=this.left-a;let C=a-this.left,E=l-this.top;const p=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&w-(d+g)<0&&(this.top>0&&(p.height=d+g),p.top=l),e.direction.indexOf("s")>=0&&w-E<0&&(p.height=E),e.direction.indexOf("w")>=0&&f-(c+m)<0&&(this.left>0&&(p.width=c+m),p.left=a),e.direction.indexOf("e")>=0&&f-C<0&&(p.width=C),this.setState(p),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,a,l)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:a,end:l,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===r.FULLSCREEN){const t=this.getWindow(),e=t?t.innerWidth:0,a=t?t.innerHeight:0;this.setState({width:this.props.appendTo?this.props.appendTo.offsetWidth:e,height:this.props.appendTo?this.props.appendTo.offsetHeight:a})}},this.getCurrentZIndex=()=>!this.state||this.context===void 0?this.context?this.context:B:this.state.zIndex>(this.context?this.context+S:0)?this.state.zIndex:this.context+S,this.getDocument=()=>this.props.appendTo?this.props.appendTo.ownerDocument:document,this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},o.validatePackage(x),this.showLicenseWatermark=o.shouldShowValidationUI(x),this.state={stage:this.props.stage||r.DEFAULT,isDragging:!1,top:0,left:0,width:v,height:L,focused:!0,zIndex:B}}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){const i=this.getWindow();i&&i.addEventListener("resize",this.handleBrowserWindowResize),this.setState({stage:this.props.stage||r.DEFAULT,isDragging:!1,top:this.getInitialTop(),left:this.getInitialLeft(),width:this.getInitialWidth(),height:this.getInitialHeight(),focused:!0,zIndex:N(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){let e=this.props.appendTo.getBoundingClientRect(),a=t.body.getBoundingClientRect();this.offSetCoordinates.x=e.left-a.left,this.offSetCoordinates.y=e.top-a.top}this.mounted=!0}componentWillUnmount(){const i=this.getWindow();i&&i.removeEventListener("resize",this.handleBrowserWindowResize),this.mounted=!1}componentDidUpdate(){const i=this.getDocument();if(this.props.appendTo&&i){let t=this.props.appendTo.getBoundingClientRect(),e=i.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-e.left,this.offSetCoordinates.y=t.top-e.top}this.mounted=!0}render(){const i=s.Children.toArray(this.props.children),t=this.getContent(i),e=this.getActionBar(i),a=this.getCurrentZIndex(),l=o.classNames("k-window",this.props.className,{[`k-window-${this.props.themeColor}`]:this.props.themeColor,"k-window-minimized":this.state.stage==="MINIMIZED","k-window-focused":this.state.focused}),c=s.createElement(o.ZIndexContext.Provider,{value:a},s.createElement(s.Fragment,null,this.props.modal&&s.createElement("div",{className:"k-overlay",style:{zIndex:a,...this.props.overlayStyle}}),s.createElement("div",{id:this.props.id,[O]: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:l,style:{top:this.top,left:this.left,width:this.width,height:this.height||"",zIndex:a,...this.props.style}},s.createElement(ot,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},s.createElement(o.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,ref:d=>this.draggable=d},s.createElement(et,{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!==r.MINIMIZED?s.createElement(s.Fragment,null,s.createElement("div",{className:"k-window-content"},t),e):null,this.windowStage===r.DEFAULT&&this.props.resizable?s.createElement(st,{onResize:this.handleResize}):null),this.showLicenseWatermark&&s.createElement(o.WatermarkOverlay,null))));return o.canUseDOM?this.props.appendTo!==null?P.createPortal(c,this.props.appendTo||document.body):c:null}get top(){return this.windowStage!==r.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==r.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let i=this.props.width||this.state.width;if(this.windowStage===r.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===r.FULLSCREEN){if(this.props.appendTo)return i=this.props.appendTo.offsetHeight,i;const t=this.getWindow();i=t?t.innerHeight:0}else this.windowStage===r.MINIMIZED&&(i=0);return i}get windowStage(){return this.props.stage||this.state.stage}getActionBar(i){return i.filter(t=>t&&t.type===W)}getContent(i){return i.filter(t=>t&&t.type!==W)}generateTitleId(){return"window-title-"+this._id}}k.displayName="Window";k.propTypes={width:n.number,height:n.number,left:n.number,top:n.number,initialWidth:n.number,initialHeight:n.number,initialLeft:n.number,initialTop:n.number,minWidth:n.number,minHeight:n.number,resizable:n.bool,draggable:n.bool,title:n.any,shouldUpdateOnDrag:n.bool,stage:n.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),className:n.string,id:n.string,style:n.object,overlayStyle:n.object};k.defaultProps={minWidth:F,minHeight:U,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0};k.contextType=o.ZIndexContext;const q=o.createPropsContext(),G=o.withIdHOC(o.withPropsContext(q,k));G.displayName="KendoReactWindow";exports.Dialog=j;exports.DialogActionsBar=T;exports.DialogPropsContext=K;exports.Window=G;exports.WindowActionsBar=W;exports.WindowPropsContext=q;
|
package/index.mjs
CHANGED
|
@@ -8,7 +8,7 @@ import * as K from "react-dom";
|
|
|
8
8
|
import o from "prop-types";
|
|
9
9
|
import { Button as D } from "@progress/kendo-react-buttons";
|
|
10
10
|
import { xIcon as j, windowMinimizeIcon as et, windowIcon as it, windowRestoreIcon as st } from "@progress/kendo-svg-icons";
|
|
11
|
-
import { classNames as x, ZIndexContext as L, createPropsContext as G, withIdHOC as X, withPropsContext as V, dispatchEvent as
|
|
11
|
+
import { classNames as x, ZIndexContext as L, createPropsContext as G, withIdHOC as X, withPropsContext as V, dispatchEvent as f, Keys as c, keepFocusInContainer as ot, validatePackage as Y, shouldShowValidationUI as $, WatermarkOverlay as q, canUseDOM as J, Draggable as Q } from "@progress/kendo-react-common";
|
|
12
12
|
import { useLocalization as nt } from "@progress/kendo-react-intl";
|
|
13
13
|
const at = ({ children: r, onCloseButtonClick: i, id: t, closeIcon: e }) => /* @__PURE__ */ s.createElement("div", { className: "k-window-titlebar k-dialog-titlebar", id: t }, /* @__PURE__ */ s.createElement("span", { className: "k-window-title k-dialog-title" }, r), /* @__PURE__ */ s.createElement("div", { className: "k-window-titlebar-actions k-dialog-titlebar-actions" }, e && /* @__PURE__ */ s.createElement(
|
|
14
14
|
D,
|
|
@@ -43,7 +43,7 @@ const y = {
|
|
|
43
43
|
name: "@progress/kendo-react-dialogs",
|
|
44
44
|
productName: "KendoReact",
|
|
45
45
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
46
|
-
publishDate:
|
|
46
|
+
publishDate: 1709631786,
|
|
47
47
|
version: "",
|
|
48
48
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
49
49
|
}, O = "data-windowid", N = 10002, S = 2, rt = ".k-window:not(.k-dialog), .k-dialog-wrapper", z = (r, i, t) => {
|
|
@@ -53,24 +53,19 @@ const y = {
|
|
|
53
53
|
return n.forEach((d) => {
|
|
54
54
|
let h = i.defaultView.getComputedStyle(d, null);
|
|
55
55
|
if (d.getAttribute(O) !== t && h.zIndex !== null) {
|
|
56
|
-
let
|
|
57
|
-
|
|
56
|
+
let w = parseInt(h.zIndex, 10);
|
|
57
|
+
w >= e && (e = w, l = !0);
|
|
58
58
|
}
|
|
59
59
|
}), l ? e + S : e;
|
|
60
60
|
}
|
|
61
61
|
return e;
|
|
62
62
|
};
|
|
63
|
-
class
|
|
63
|
+
class k extends s.Component {
|
|
64
64
|
constructor(i) {
|
|
65
65
|
super(i), this.context = 0, this.titleId = this.generateTitleId(), this.contentId = this.generateContentId(), this.showLicenseWatermark = !1, this.onCloseDialog = (t) => {
|
|
66
|
-
t.preventDefault(),
|
|
66
|
+
t.preventDefault(), f(this.props.onClose, t, this, void 0);
|
|
67
67
|
}, this.onKeyDown = (t) => {
|
|
68
|
-
t.keyCode ===
|
|
69
|
-
const e = this.element;
|
|
70
|
-
if (e && t.keyCode === p.tab) {
|
|
71
|
-
const n = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', l = e.querySelectorAll(n), d = l[0], h = l[l.length - 1], g = this.getDocument(), c = ot(g);
|
|
72
|
-
t.shiftKey ? (g && c === d || g && c === this.element) && (h.focus(), t.preventDefault()) : g && c === h && (d.focus(), t.preventDefault());
|
|
73
|
-
}
|
|
68
|
+
t.keyCode === c.esc && this.props.onClose && (t.preventDefault(), this.onCloseDialog(t)), ot(t, this.element);
|
|
74
69
|
}, this.getCurrentZIndex = () => !this.state || this.context === void 0 ? this.context ? this.context : N : this.state.zIndex > (this.context ? this.context + S : 0) ? this.state.zIndex : this.context + S, this.getDocument = () => this.props.appendTo ? this.props.appendTo.ownerDocument : document, Y(y), this.showLicenseWatermark = $(y);
|
|
75
70
|
}
|
|
76
71
|
get _id() {
|
|
@@ -88,9 +83,9 @@ class b extends s.Component {
|
|
|
88
83
|
* @hidden
|
|
89
84
|
*/
|
|
90
85
|
render() {
|
|
91
|
-
const i = this.props.id !== void 0 ? this.props.id : this.titleId, { title: t, width: e, height: n, children: l, minWidth: d, dir: h, style:
|
|
86
|
+
const i = this.props.id !== void 0 ? this.props.id : this.titleId, { title: t, width: e, height: n, children: l, minWidth: d, dir: h, style: m, contentStyle: w } = this.props, g = s.Children.toArray(l), C = this.getContent(g), E = this.getActionBar(g), I = t ? {
|
|
92
87
|
"aria-labelledby": i
|
|
93
|
-
} : null,
|
|
88
|
+
} : null, p = this.props.closeIcon !== void 0 ? this.props.closeIcon : !0, Z = this.getCurrentZIndex(), P = /* @__PURE__ */ s.createElement(L.Provider, { value: Z }, /* @__PURE__ */ s.createElement(
|
|
94
89
|
"div",
|
|
95
90
|
{
|
|
96
91
|
[O]: this._id,
|
|
@@ -100,7 +95,7 @@ class b extends s.Component {
|
|
|
100
95
|
dir: h,
|
|
101
96
|
style: {
|
|
102
97
|
zIndex: Z,
|
|
103
|
-
...
|
|
98
|
+
...m
|
|
104
99
|
},
|
|
105
100
|
ref: (tt) => this.element = tt
|
|
106
101
|
},
|
|
@@ -124,13 +119,13 @@ class b extends s.Component {
|
|
|
124
119
|
this.props.title && /* @__PURE__ */ s.createElement(
|
|
125
120
|
at,
|
|
126
121
|
{
|
|
127
|
-
closeIcon:
|
|
122
|
+
closeIcon: p,
|
|
128
123
|
onCloseButtonClick: this.onCloseDialog,
|
|
129
124
|
id: i
|
|
130
125
|
},
|
|
131
126
|
t
|
|
132
127
|
),
|
|
133
|
-
/* @__PURE__ */ s.createElement("div", { className: "k-window-content k-dialog-content", style:
|
|
128
|
+
/* @__PURE__ */ s.createElement("div", { className: "k-window-content k-dialog-content", style: w, id: this.contentId }, C),
|
|
134
129
|
E,
|
|
135
130
|
this.showLicenseWatermark && /* @__PURE__ */ s.createElement(q, null)
|
|
136
131
|
)
|
|
@@ -150,8 +145,8 @@ class b extends s.Component {
|
|
|
150
145
|
return "dialog-content-" + this._id;
|
|
151
146
|
}
|
|
152
147
|
}
|
|
153
|
-
|
|
154
|
-
|
|
148
|
+
k.displayName = "Dialog";
|
|
149
|
+
k.propTypes = {
|
|
155
150
|
title: o.any,
|
|
156
151
|
id: o.string,
|
|
157
152
|
dir: o.string,
|
|
@@ -162,14 +157,14 @@ b.propTypes = {
|
|
|
162
157
|
minWidth: o.oneOfType([o.number, o.string]),
|
|
163
158
|
autoFocus: o.bool
|
|
164
159
|
};
|
|
165
|
-
|
|
160
|
+
k.defaultProps = {
|
|
166
161
|
autoFocus: !1
|
|
167
162
|
};
|
|
168
|
-
|
|
169
|
-
const ht = G(), lt = X(V(ht,
|
|
163
|
+
k.contextType = L;
|
|
164
|
+
const ht = G(), lt = X(V(ht, k));
|
|
170
165
|
lt.displayName = "KendoReactDialog";
|
|
171
166
|
var a = /* @__PURE__ */ ((r) => (r.DEFAULT = "DEFAULT", r.FULLSCREEN = "FULLSCREEN", r.MINIMIZED = "MINIMIZED", r))(a || {});
|
|
172
|
-
const M = "dialogs.windowMaximizeButton", A = "dialogs.windowMinimizeButton", R = "dialogs.windowRestoreButton", F = "dialogs.windowCloseButton",
|
|
167
|
+
const M = "dialogs.windowMaximizeButton", A = "dialogs.windowMinimizeButton", R = "dialogs.windowRestoreButton", F = "dialogs.windowCloseButton", b = {
|
|
173
168
|
[M]: "maximize",
|
|
174
169
|
[A]: "minimize",
|
|
175
170
|
[R]: "restore",
|
|
@@ -183,9 +178,9 @@ const M = "dialogs.windowMaximizeButton", A = "dialogs.windowMinimizeButton", R
|
|
|
183
178
|
onRestoreButtonClick: l,
|
|
184
179
|
onDoubleClick: d,
|
|
185
180
|
stage: h,
|
|
186
|
-
forwardedRef:
|
|
187
|
-
id:
|
|
188
|
-
} = r,
|
|
181
|
+
forwardedRef: m,
|
|
182
|
+
id: w
|
|
183
|
+
} = r, g = nt(), C = r.minimizeButton ? /* @__PURE__ */ s.createElement(r.minimizeButton, { onClick: e, stage: h }) : /* @__PURE__ */ s.createElement(
|
|
189
184
|
D,
|
|
190
185
|
{
|
|
191
186
|
fillMode: "flat",
|
|
@@ -193,7 +188,7 @@ const M = "dialogs.windowMaximizeButton", A = "dialogs.windowMinimizeButton", R
|
|
|
193
188
|
svgIcon: et,
|
|
194
189
|
className: "k-window-titlebar-action",
|
|
195
190
|
onClick: e,
|
|
196
|
-
"aria-label":
|
|
191
|
+
"aria-label": g.toLanguageString(A, b[A])
|
|
197
192
|
}
|
|
198
193
|
), E = r.maximizeButton ? /* @__PURE__ */ s.createElement(r.maximizeButton, { onClick: n, stage: h }) : /* @__PURE__ */ s.createElement(
|
|
199
194
|
D,
|
|
@@ -203,7 +198,7 @@ const M = "dialogs.windowMaximizeButton", A = "dialogs.windowMinimizeButton", R
|
|
|
203
198
|
svgIcon: it,
|
|
204
199
|
className: "k-window-titlebar-action",
|
|
205
200
|
onClick: n,
|
|
206
|
-
"aria-label":
|
|
201
|
+
"aria-label": g.toLanguageString(M, b[M])
|
|
207
202
|
}
|
|
208
203
|
), I = r.restoreButton ? /* @__PURE__ */ s.createElement(r.restoreButton, { onClick: l, stage: h }) : /* @__PURE__ */ s.createElement(
|
|
209
204
|
D,
|
|
@@ -213,9 +208,9 @@ const M = "dialogs.windowMaximizeButton", A = "dialogs.windowMinimizeButton", R
|
|
|
213
208
|
svgIcon: st,
|
|
214
209
|
className: "k-window-titlebar-action",
|
|
215
210
|
onClick: l,
|
|
216
|
-
"aria-label":
|
|
211
|
+
"aria-label": g.toLanguageString(R, b[R])
|
|
217
212
|
}
|
|
218
|
-
),
|
|
213
|
+
), p = r.closeButton ? /* @__PURE__ */ s.createElement(r.closeButton, { onClick: t, stage: h }) : /* @__PURE__ */ s.createElement(
|
|
219
214
|
D,
|
|
220
215
|
{
|
|
221
216
|
fillMode: "flat",
|
|
@@ -223,7 +218,7 @@ const M = "dialogs.windowMaximizeButton", A = "dialogs.windowMinimizeButton", R
|
|
|
223
218
|
svgIcon: j,
|
|
224
219
|
className: "k-window-titlebar-action",
|
|
225
220
|
onClick: t,
|
|
226
|
-
"aria-label":
|
|
221
|
+
"aria-label": g.toLanguageString(F, b[F])
|
|
227
222
|
}
|
|
228
223
|
);
|
|
229
224
|
return /* @__PURE__ */ s.createElement(
|
|
@@ -231,11 +226,11 @@ const M = "dialogs.windowMaximizeButton", A = "dialogs.windowMinimizeButton", R
|
|
|
231
226
|
{
|
|
232
227
|
className: "k-window-titlebar",
|
|
233
228
|
style: { touchAction: "none" },
|
|
234
|
-
ref:
|
|
229
|
+
ref: m,
|
|
235
230
|
onDoubleClick: d
|
|
236
231
|
},
|
|
237
|
-
/* @__PURE__ */ s.createElement("span", { className: "k-window-title", id:
|
|
238
|
-
/* @__PURE__ */ s.createElement("div", { className: "k-window-titlebar-actions" }, h === a.DEFAULT && C, h === a.DEFAULT && E, h !== a.DEFAULT && I,
|
|
232
|
+
/* @__PURE__ */ s.createElement("span", { className: "k-window-title", id: w }, i || ""),
|
|
233
|
+
/* @__PURE__ */ s.createElement("div", { className: "k-window-titlebar-actions" }, h === a.DEFAULT && C, h === a.DEFAULT && E, h !== a.DEFAULT && I, p)
|
|
239
234
|
);
|
|
240
235
|
}, ct = s.forwardRef((r, i) => /* @__PURE__ */ s.createElement(
|
|
241
236
|
dt,
|
|
@@ -299,8 +294,8 @@ U.propTypes = {
|
|
|
299
294
|
children: o.any,
|
|
300
295
|
layout: o.oneOf(["start", "center", "end", "stretched"])
|
|
301
296
|
};
|
|
302
|
-
const W = 300, B = 300, H = 120, _ = 100,
|
|
303
|
-
class
|
|
297
|
+
const W = 300, B = 300, H = 120, _ = 100, u = 5;
|
|
298
|
+
class T extends s.Component {
|
|
304
299
|
constructor(i) {
|
|
305
300
|
super(i), this.context = 0, this.draggable = null, this.offSetCoordinates = { x: 0, y: 0 }, this.titleId = this.generateTitleId(), this.mounted = !1, this.showLicenseWatermark = !1, this.onKeyDown = (t) => {
|
|
306
301
|
if (t.target !== t.currentTarget)
|
|
@@ -308,17 +303,17 @@ class k extends s.Component {
|
|
|
308
303
|
const e = this.props.minWidth || H, n = this.props.minHeight || _;
|
|
309
304
|
if (t.ctrlKey && this.props.resizable) {
|
|
310
305
|
switch (t.keyCode) {
|
|
311
|
-
case
|
|
312
|
-
t.preventDefault(), n <= this.height -
|
|
306
|
+
case c.up:
|
|
307
|
+
t.preventDefault(), n <= this.height - u && this.setState({ height: this.height - u });
|
|
313
308
|
break;
|
|
314
|
-
case
|
|
315
|
-
t.preventDefault(), this.setState({ height: this.height +
|
|
309
|
+
case c.down:
|
|
310
|
+
t.preventDefault(), this.setState({ height: this.height + u });
|
|
316
311
|
break;
|
|
317
|
-
case
|
|
318
|
-
e <= this.width -
|
|
312
|
+
case c.left:
|
|
313
|
+
e <= this.width - u && this.setState({ width: this.width - u });
|
|
319
314
|
break;
|
|
320
|
-
case
|
|
321
|
-
this.setState({ width: this.width +
|
|
315
|
+
case c.right:
|
|
316
|
+
this.setState({ width: this.width + u });
|
|
322
317
|
break;
|
|
323
318
|
default:
|
|
324
319
|
return;
|
|
@@ -328,31 +323,31 @@ class k extends s.Component {
|
|
|
328
323
|
}
|
|
329
324
|
if (t.altKey) {
|
|
330
325
|
switch (t.keyCode) {
|
|
331
|
-
case
|
|
332
|
-
this.windowStage === a.MINIMIZED ? (this.handleRestore(t),
|
|
326
|
+
case c.up:
|
|
327
|
+
this.windowStage === a.MINIMIZED ? (this.handleRestore(t), f(this.props.onStageChange, t, this, { state: a.DEFAULT })) : this.windowStage === a.DEFAULT && (this.handleFullscreen(t), f(this.props.onStageChange, t, this, { state: a.FULLSCREEN }));
|
|
333
328
|
break;
|
|
334
|
-
case
|
|
335
|
-
this.windowStage === a.FULLSCREEN ? (this.handleRestore(t),
|
|
329
|
+
case c.down:
|
|
330
|
+
this.windowStage === a.FULLSCREEN ? (this.handleRestore(t), f(this.props.onStageChange, t, this, { state: a.DEFAULT })) : this.windowStage === a.DEFAULT && (this.handleMinimize(t), f(this.props.onStageChange, t, this, { state: a.MINIMIZED }));
|
|
336
331
|
break;
|
|
337
332
|
}
|
|
338
333
|
return;
|
|
339
334
|
}
|
|
340
335
|
if (!t.ctrlKey)
|
|
341
336
|
switch (t.keyCode) {
|
|
342
|
-
case
|
|
337
|
+
case c.esc:
|
|
343
338
|
this.props.onClose && this.handleCloseWindow(t);
|
|
344
339
|
return;
|
|
345
|
-
case
|
|
346
|
-
this.setState({ top: this.state.top -
|
|
340
|
+
case c.up:
|
|
341
|
+
this.setState({ top: this.state.top - u });
|
|
347
342
|
break;
|
|
348
|
-
case
|
|
349
|
-
this.setState({ top: this.state.top +
|
|
343
|
+
case c.down:
|
|
344
|
+
this.setState({ top: this.state.top + u });
|
|
350
345
|
break;
|
|
351
|
-
case
|
|
352
|
-
this.setState({ left: this.state.left -
|
|
346
|
+
case c.left:
|
|
347
|
+
this.setState({ left: this.state.left - u });
|
|
353
348
|
break;
|
|
354
|
-
case
|
|
355
|
-
this.setState({ left: this.state.left +
|
|
349
|
+
case c.right:
|
|
350
|
+
this.setState({ left: this.state.left + u });
|
|
356
351
|
break;
|
|
357
352
|
default:
|
|
358
353
|
return;
|
|
@@ -414,7 +409,7 @@ class k extends s.Component {
|
|
|
414
409
|
t.preventDefault(), this.windowCoordinatesState.leftBeforeAction = this.left, this.windowCoordinatesState.topBeforeAction = this.top, this.windowCoordinatesState.widthBeforeAction = this.width, this.windowCoordinatesState.heightBeforeAction = this.height, this.setState({
|
|
415
410
|
stage: a.MINIMIZED,
|
|
416
411
|
height: 0
|
|
417
|
-
}),
|
|
412
|
+
}), f(this.props.onStageChange, t, this, { state: a.MINIMIZED });
|
|
418
413
|
}, this.handleFullscreen = (t) => {
|
|
419
414
|
t.preventDefault(), this.windowCoordinatesState.leftBeforeAction = this.left, this.windowCoordinatesState.topBeforeAction = this.top, this.windowCoordinatesState.widthBeforeAction = this.width, this.windowCoordinatesState.heightBeforeAction = this.height;
|
|
420
415
|
const e = this.getWindow(), n = e ? e.innerWidth : 0, l = e ? e.innerHeight : 0;
|
|
@@ -424,7 +419,7 @@ class k extends s.Component {
|
|
|
424
419
|
width: this.props.appendTo ? this.props.appendTo.offsetWidth : n,
|
|
425
420
|
height: this.props.appendTo ? this.props.appendTo.offsetHeight : l,
|
|
426
421
|
stage: a.FULLSCREEN
|
|
427
|
-
}),
|
|
422
|
+
}), f(this.props.onStageChange, t, this, { state: a.FULLSCREEN });
|
|
428
423
|
}, this.handleRestore = (t) => {
|
|
429
424
|
t.preventDefault(), this.windowStage === a.FULLSCREEN ? this.setState({
|
|
430
425
|
stage: a.DEFAULT,
|
|
@@ -435,16 +430,16 @@ class k extends s.Component {
|
|
|
435
430
|
}) : this.windowStage === a.MINIMIZED && this.setState({
|
|
436
431
|
stage: a.DEFAULT,
|
|
437
432
|
height: this.windowCoordinatesState.heightBeforeAction
|
|
438
|
-
}),
|
|
433
|
+
}), f(this.props.onStageChange, t, this, { state: a.DEFAULT });
|
|
439
434
|
}, this.handleCloseWindow = (t) => {
|
|
440
|
-
t.preventDefault(),
|
|
435
|
+
t.preventDefault(), f(this.props.onClose, t, this, { state: void 0 });
|
|
441
436
|
}, this.handleDoubleClick = (t) => {
|
|
442
437
|
this.windowStage === a.FULLSCREEN || this.windowStage === a.MINIMIZED ? this.handleRestore(t) : this.handleFullscreen(t);
|
|
443
438
|
}, this.handleResize = (t, e) => {
|
|
444
|
-
const n = this.props.appendTo ? t.pageX - this.offSetCoordinates.x : t.pageX, l = this.props.appendTo ? t.pageY - this.offSetCoordinates.y : t.pageY, d = this.width, h = this.height,
|
|
439
|
+
const n = this.props.appendTo ? t.pageX - this.offSetCoordinates.x : t.pageX, l = this.props.appendTo ? t.pageY - this.offSetCoordinates.y : t.pageY, d = this.width, h = this.height, m = this.props.minWidth || H, w = this.props.minHeight || _, g = this.top - l, C = this.left - n;
|
|
445
440
|
let E = n - this.left, I = l - this.top;
|
|
446
|
-
const
|
|
447
|
-
e.direction.indexOf("n") >= 0 &&
|
|
441
|
+
const p = Object.assign({}, this.state, { isDragging: !e.end });
|
|
442
|
+
e.direction.indexOf("n") >= 0 && w - (h + g) < 0 && (this.top > 0 && (p.height = h + g), p.top = l), e.direction.indexOf("s") >= 0 && w - I < 0 && (p.height = I), e.direction.indexOf("w") >= 0 && m - (d + C) < 0 && (this.left > 0 && (p.width = d + C), p.left = n), e.direction.indexOf("e") >= 0 && m - E < 0 && (p.width = E), this.setState(p), this.dispatchMoveEvent(this.props.onResize, t, !0, e.end);
|
|
448
443
|
}, this.dispatchMoveEvent = (t, e, n, l) => {
|
|
449
444
|
t && t.call(void 0, {
|
|
450
445
|
nativeEvent: e.nativeEvent ? e.nativeEvent : e.originalEvent,
|
|
@@ -652,8 +647,8 @@ class k extends s.Component {
|
|
|
652
647
|
return "window-title-" + this._id;
|
|
653
648
|
}
|
|
654
649
|
}
|
|
655
|
-
|
|
656
|
-
|
|
650
|
+
T.displayName = "Window";
|
|
651
|
+
T.propTypes = {
|
|
657
652
|
width: o.number,
|
|
658
653
|
height: o.number,
|
|
659
654
|
left: o.number,
|
|
@@ -674,7 +669,7 @@ k.propTypes = {
|
|
|
674
669
|
style: o.object,
|
|
675
670
|
overlayStyle: o.object
|
|
676
671
|
};
|
|
677
|
-
|
|
672
|
+
T.defaultProps = {
|
|
678
673
|
minWidth: H,
|
|
679
674
|
minHeight: _,
|
|
680
675
|
resizable: !0,
|
|
@@ -682,14 +677,14 @@ k.defaultProps = {
|
|
|
682
677
|
modal: !1,
|
|
683
678
|
doubleClickStageChange: !0
|
|
684
679
|
};
|
|
685
|
-
|
|
686
|
-
const
|
|
687
|
-
|
|
680
|
+
T.contextType = L;
|
|
681
|
+
const wt = G(), ft = X(V(wt, T));
|
|
682
|
+
ft.displayName = "KendoReactWindow";
|
|
688
683
|
export {
|
|
689
684
|
lt as Dialog,
|
|
690
685
|
v as DialogActionsBar,
|
|
691
686
|
ht as DialogPropsContext,
|
|
692
|
-
|
|
687
|
+
ft as Window,
|
|
693
688
|
U as WindowActionsBar,
|
|
694
|
-
|
|
689
|
+
wt as WindowPropsContext
|
|
695
690
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-dialogs",
|
|
3
|
-
"version": "7.2.4-develop.
|
|
3
|
+
"version": "7.2.4-develop.3",
|
|
4
4
|
"description": "React Dialogs provide modal and non-modal windows for showing additional information to the user. KendoReact Dialogs package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@progress/kendo-licensing": "^1.3.4",
|
|
26
|
-
"@progress/kendo-react-buttons": "7.2.4-develop.
|
|
27
|
-
"@progress/kendo-react-common": "7.2.4-develop.
|
|
26
|
+
"@progress/kendo-react-buttons": "7.2.4-develop.3",
|
|
27
|
+
"@progress/kendo-react-common": "7.2.4-develop.3",
|
|
28
28
|
"@progress/kendo-svg-icons": "^2.1.0",
|
|
29
29
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
30
30
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|