@progress/kendo-react-dialogs 11.0.0-develop.8 → 11.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Dialog.js +1 -1
- package/Dialog.mjs +149 -125
- package/codemods/utils.js +9 -0
- package/codemods/v11/dialog-handle.js +9 -0
- package/dist/cdn/js/kendo-react-dialogs.js +1 -1
- package/index.d.mts +11 -78
- package/index.d.ts +11 -78
- package/package.json +21 -6
package/Dialog.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("react"),W=require("react-dom"),o=require("prop-types"),X=require("./DialogTitleBar.js"),U=require("./DialogActionsBar.js"),n=require("@progress/kendo-react-common"),k=require("./constants.js");function $(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const l in c)if(l!=="default"){const a=Object.getOwnPropertyDescriptor(c,l);Object.defineProperty(i,l,a.get?a:{enumerable:!0,get:()=>c[l]})}}return i.default=c,Object.freeze(i)}const t=$(V),J=$(W),G=n.createPropsContext(),O=t.forwardRef((c,i)=>{const l=n.useZIndexContext(),a=l?l+k.ZINDEX_DIALOGS_STEP:k.DEFAULT_DIALOGS_ZINDEX,T=t.useRef(null),r=t.useRef(null),u=t.useRef(n.getActiveElement(document)),h=n.usePropsContext(G,c),s=t.useMemo(()=>({...m,...h}),[h]),{title:y,width:v,height:S,children:p,minWidth:P,dir:_,style:x,themeColor:D,contentStyle:A,autoFocusedElement:f,appendTo:w,className:b,overlayStyle:M,modal:N=m.modal,closeIcon:R=m.closeIcon,autoFocus:C=m.autoFocus}=s,F=t.useCallback(()=>({props:s,element:r.current}),[s]);t.useImperativeHandle(T,F),t.useImperativeHandle(i,()=>T.current);const j=t.useMemo(()=>t.Children.toArray(p).filter(e=>t.isValidElement(e)&&e.type!==U.DialogActionsBar),[p]),q=t.useMemo(()=>t.Children.toArray(p).filter(e=>t.isValidElement(e)&&e.type===U.DialogActionsBar),[p]),{_id:B,contentId:I,id:E}=t.useMemo(()=>{const e=s.id,d=`${e!=null?e:"accessibility"}-id`,H=`dialog-title-${d}`,K=`dialog-content-${d}`;return{_id:d,contentId:K,id:e||H}},[s.id]),L=t.useCallback(()=>{if(r.current)if(C&&!f)r.current.focus();else if(!C&&f&&r.current){const e=r.current.querySelector(f);e==null||e.focus()}else{const e=[...n.FOCUSABLE_ELEMENTS].map(d=>d+":not(.k-dialog-titlebar *)");n.focusFirstFocusableChild(r.current,e)}},[C,f]);t.useEffect(()=>(L(),()=>{setTimeout(()=>{var e;!r.current&&u.current&&n.canUseDOM&&(document.contains(u.current)?u.current.focus():u.current.id&&((e=document.getElementById(u.current.id))==null||e.focus()))})}),[L]);const g=t.useCallback(e=>{e.preventDefault(),n.dispatchEvent(s.onClose,e,F(),void 0)},[s.onClose]),Z=t.useCallback(e=>{e.keyCode===n.Keys.esc&&s.onClose&&(e.preventDefault(),g(e)),n.keepFocusInContainer(e,r.current)},[s.onClose,g]),z=t.useMemo(()=>t.createElement(n.ZIndexContext.Provider,{value:a},t.createElement("div",{ref:r,[k.DATA_DIALOGS_ID]:B,className:"k-dialog-wrapper"+(b?" "+b:""),onKeyDown:Z,tabIndex:0,dir:_,style:{zIndex:a,...x}},N&&t.createElement("div",{className:"k-overlay",style:M}),t.createElement("div",{className:n.classNames("k-window k-dialog",{[`k-window-${D}`]:D}),role:"dialog","aria-labelledby":E,"aria-modal":!0,"aria-describedby":I,style:{width:v,height:S,minWidth:P}},y&&t.createElement(X.DialogTitleBar,{closeIcon:R,onCloseButtonClick:g,id:E},y),t.createElement("div",{className:"k-window-content k-dialog-content",style:A,id:I},j),q))),[a,B,b,Z,x,_,M,D,E,I,v,S,P,R,g,A,y,j,q,N]);return n.canUseDOM?w!==null?J.createPortal(z,w||document.body):z:null}),m={autoFocus:!1,modal:!0,closeIcon:!0},Q={autoFocus:o.bool,autoFocusedElement:o.string,title:o.any,className:o.string,closeIcon:o.bool,modal:o.bool,overlayStyle:o.object,width:o.oneOfType([o.number,o.string]),height:o.oneOfType([o.number,o.string]),minWidth:o.oneOfType([o.number,o.string]),onClose:o.func,children:o.node,id:o.string,dir:o.string,style:o.object,contentStyle:o.object,appendTo:o.any,themeColor:o.oneOf(["primary","dark","light"])};O.displayName="KendoReactDialog";O.propTypes=Q;exports.Dialog=O;exports.DialogDefaultProps=m;exports.DialogPropsContext=G;
|
package/Dialog.mjs
CHANGED
|
@@ -5,140 +5,164 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
9
|
-
import * as
|
|
10
|
-
import
|
|
11
|
-
import { DialogTitleBar as
|
|
12
|
-
import { DialogActionsBar as
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
8
|
+
import * as t from "react";
|
|
9
|
+
import * as K from "react-dom";
|
|
10
|
+
import o from "prop-types";
|
|
11
|
+
import { DialogTitleBar as U } from "./DialogTitleBar.mjs";
|
|
12
|
+
import { DialogActionsBar as B } from "./DialogActionsBar.mjs";
|
|
13
|
+
import { createPropsContext as V, useZIndexContext as W, getActiveElement as X, usePropsContext as q, FOCUSABLE_ELEMENTS as J, focusFirstFocusableChild as Q, canUseDOM as Z, dispatchEvent as Y, Keys as ee, keepFocusInContainer as te, ZIndexContext as oe, classNames as ne } from "@progress/kendo-react-common";
|
|
14
|
+
import { DATA_DIALOGS_ID as re, ZINDEX_DIALOGS_STEP as le, DEFAULT_DIALOGS_ZINDEX as se } from "./constants.mjs";
|
|
15
|
+
const ce = V(), $ = t.forwardRef((j, z) => {
|
|
16
|
+
const I = W(), u = I ? I + le : se, E = t.useRef(null), n = t.useRef(null), l = t.useRef(X(document)), b = q(ce, j), r = t.useMemo(
|
|
17
|
+
() => ({
|
|
18
|
+
...d,
|
|
19
|
+
...b
|
|
20
|
+
}),
|
|
21
|
+
[b]
|
|
22
|
+
), {
|
|
23
|
+
title: m,
|
|
24
|
+
width: D,
|
|
25
|
+
height: h,
|
|
26
|
+
children: c,
|
|
27
|
+
minWidth: k,
|
|
28
|
+
dir: v,
|
|
29
|
+
style: T,
|
|
30
|
+
themeColor: p,
|
|
31
|
+
contentStyle: x,
|
|
32
|
+
autoFocusedElement: a,
|
|
33
|
+
appendTo: S,
|
|
34
|
+
className: f,
|
|
35
|
+
overlayStyle: w,
|
|
36
|
+
modal: A = d.modal,
|
|
37
|
+
closeIcon: F = d.closeIcon,
|
|
38
|
+
autoFocus: y = d.autoFocus
|
|
39
|
+
} = r, N = t.useCallback(
|
|
40
|
+
() => ({
|
|
41
|
+
props: r,
|
|
42
|
+
element: n.current
|
|
43
|
+
}),
|
|
44
|
+
[r]
|
|
45
|
+
);
|
|
46
|
+
t.useImperativeHandle(E, N), t.useImperativeHandle(z, () => E.current);
|
|
47
|
+
const O = t.useMemo(() => t.Children.toArray(c).filter(
|
|
48
|
+
(e) => t.isValidElement(e) && e.type !== B
|
|
49
|
+
), [c]), P = t.useMemo(() => t.Children.toArray(c).filter(
|
|
50
|
+
(e) => t.isValidElement(e) && e.type === B
|
|
51
|
+
), [c]), { _id: R, contentId: g, id: C } = t.useMemo(() => {
|
|
52
|
+
const e = r.id, s = `${e != null ? e : "accessibility"}-id`, G = `dialog-title-${s}`, H = `dialog-content-${s}`;
|
|
53
|
+
return { _id: s, contentId: H, id: e || G };
|
|
54
|
+
}, [r.id]), _ = t.useCallback(() => {
|
|
55
|
+
if (n.current)
|
|
56
|
+
if (y && !a)
|
|
57
|
+
n.current.focus();
|
|
58
|
+
else if (!y && a && n.current) {
|
|
59
|
+
const e = n.current.querySelector(a);
|
|
60
|
+
e == null || e.focus();
|
|
44
61
|
} else {
|
|
45
|
-
const e = [...
|
|
46
|
-
(
|
|
62
|
+
const e = [...J].map(
|
|
63
|
+
(s) => s + ":not(.k-dialog-titlebar *)"
|
|
47
64
|
);
|
|
48
|
-
|
|
65
|
+
Q(n.current, e);
|
|
49
66
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
/**
|
|
56
|
-
* @hidden
|
|
57
|
-
*/
|
|
58
|
-
componentWillUnmount() {
|
|
67
|
+
}, [y, a]);
|
|
68
|
+
t.useEffect(() => (_(), () => {
|
|
59
69
|
setTimeout(() => {
|
|
60
70
|
var e;
|
|
61
|
-
!
|
|
71
|
+
!n.current && l.current && Z && (document.contains(l.current) ? l.current.focus() : l.current.id && ((e = document.getElementById(l.current.id)) == null || e.focus()));
|
|
62
72
|
});
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
73
|
+
}), [_]);
|
|
74
|
+
const i = t.useCallback(
|
|
75
|
+
(e) => {
|
|
76
|
+
e.preventDefault(), Y(r.onClose, e, N(), void 0);
|
|
77
|
+
},
|
|
78
|
+
[r.onClose]
|
|
79
|
+
), M = t.useCallback(
|
|
80
|
+
(e) => {
|
|
81
|
+
e.keyCode === ee.esc && r.onClose && (e.preventDefault(), i(e)), te(e, n.current);
|
|
82
|
+
},
|
|
83
|
+
[r.onClose, i]
|
|
84
|
+
), L = t.useMemo(() => /* @__PURE__ */ t.createElement(oe.Provider, { value: u }, /* @__PURE__ */ t.createElement(
|
|
85
|
+
"div",
|
|
86
|
+
{
|
|
87
|
+
ref: n,
|
|
88
|
+
[re]: R,
|
|
89
|
+
className: "k-dialog-wrapper" + (f ? " " + f : ""),
|
|
90
|
+
onKeyDown: M,
|
|
91
|
+
tabIndex: 0,
|
|
92
|
+
dir: v,
|
|
93
|
+
style: {
|
|
94
|
+
zIndex: u,
|
|
95
|
+
...T
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
A && /* @__PURE__ */ t.createElement("div", { className: "k-overlay", style: w }),
|
|
99
|
+
/* @__PURE__ */ t.createElement(
|
|
71
100
|
"div",
|
|
72
101
|
{
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
},
|
|
82
|
-
ref: (b) => {
|
|
83
|
-
this.element = b;
|
|
84
|
-
}
|
|
102
|
+
className: ne("k-window k-dialog", {
|
|
103
|
+
[`k-window-${p}`]: p
|
|
104
|
+
}),
|
|
105
|
+
role: "dialog",
|
|
106
|
+
"aria-labelledby": C,
|
|
107
|
+
"aria-modal": !0,
|
|
108
|
+
"aria-describedby": g,
|
|
109
|
+
style: { width: D, height: h, minWidth: k }
|
|
85
110
|
},
|
|
86
|
-
|
|
87
|
-
/* @__PURE__ */
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
111
|
+
m && /* @__PURE__ */ t.createElement(U, { closeIcon: F, onCloseButtonClick: i, id: C }, m),
|
|
112
|
+
/* @__PURE__ */ t.createElement("div", { className: "k-window-content k-dialog-content", style: x, id: g }, O),
|
|
113
|
+
P
|
|
114
|
+
)
|
|
115
|
+
)), [
|
|
116
|
+
u,
|
|
117
|
+
R,
|
|
118
|
+
f,
|
|
119
|
+
M,
|
|
120
|
+
T,
|
|
121
|
+
v,
|
|
122
|
+
w,
|
|
123
|
+
p,
|
|
124
|
+
C,
|
|
125
|
+
g,
|
|
126
|
+
D,
|
|
127
|
+
h,
|
|
128
|
+
k,
|
|
129
|
+
F,
|
|
130
|
+
i,
|
|
131
|
+
x,
|
|
132
|
+
m,
|
|
133
|
+
O,
|
|
134
|
+
P,
|
|
135
|
+
A
|
|
136
|
+
]);
|
|
137
|
+
return Z ? S !== null ? K.createPortal(L, S || document.body) : L : null;
|
|
138
|
+
}), d = {
|
|
139
|
+
autoFocus: !1,
|
|
140
|
+
modal: !0,
|
|
141
|
+
closeIcon: !0
|
|
142
|
+
}, ae = {
|
|
143
|
+
autoFocus: o.bool,
|
|
144
|
+
autoFocusedElement: o.string,
|
|
145
|
+
title: o.any,
|
|
146
|
+
className: o.string,
|
|
147
|
+
closeIcon: o.bool,
|
|
148
|
+
modal: o.bool,
|
|
149
|
+
overlayStyle: o.object,
|
|
150
|
+
width: o.oneOfType([o.number, o.string]),
|
|
151
|
+
height: o.oneOfType([o.number, o.string]),
|
|
152
|
+
minWidth: o.oneOfType([o.number, o.string]),
|
|
153
|
+
onClose: o.func,
|
|
154
|
+
children: o.node,
|
|
155
|
+
id: o.string,
|
|
156
|
+
dir: o.string,
|
|
157
|
+
style: o.object,
|
|
158
|
+
contentStyle: o.object,
|
|
159
|
+
appendTo: o.any,
|
|
160
|
+
themeColor: o.oneOf(["primary", "dark", "light"])
|
|
119
161
|
};
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
id: s.string,
|
|
123
|
-
dir: s.string,
|
|
124
|
-
style: s.object,
|
|
125
|
-
closeIcon: s.bool,
|
|
126
|
-
width: s.oneOfType([s.number, s.string]),
|
|
127
|
-
height: s.oneOfType([s.number, s.string]),
|
|
128
|
-
minWidth: s.oneOfType([s.number, s.string]),
|
|
129
|
-
autoFocus: s.bool
|
|
130
|
-
}, i.defaultProps = {
|
|
131
|
-
autoFocus: !1
|
|
132
|
-
}, i.contextType = d;
|
|
133
|
-
let r = i;
|
|
134
|
-
const U = _(), G = B(
|
|
135
|
-
L(
|
|
136
|
-
U,
|
|
137
|
-
r
|
|
138
|
-
)
|
|
139
|
-
);
|
|
140
|
-
G.displayName = "KendoReactDialog";
|
|
162
|
+
$.displayName = "KendoReactDialog";
|
|
163
|
+
$.propTypes = ae;
|
|
141
164
|
export {
|
|
142
|
-
|
|
143
|
-
|
|
165
|
+
$ as Dialog,
|
|
166
|
+
d as DialogDefaultProps,
|
|
167
|
+
ce as DialogPropsContext
|
|
144
168
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=(e,r,i,o)=>{const s=r.find(e.ImportDeclaration,{source:{value:o}});if(s.size()>0){const t=s.get(0).node.specifiers;t.some(n=>n.type==="ImportSpecifier"&&n.imported.name===i)||t.push(e.importSpecifier(e.identifier(i)))}else{const t=e.importDeclaration([e.importSpecifier(e.identifier(i))],e.literal(o));r.get().node.program.body.unshift(t)}};exports.ensureImportExists=p;
|
|
9
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3BhY2thZ2VzL2RpYWxvZ3MvY29kZW1vZHMvdXRpbHMudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSlNDb2Rlc2hpZnQgfSBmcm9tICdqc2NvZGVzaGlmdCc7XG5cbmV4cG9ydCBjb25zdCBlbnN1cmVJbXBvcnRFeGlzdHMgPSAoajogSlNDb2Rlc2hpZnQsIHJvb3Q6IGFueSwgaW1wb3J0TmFtZTogc3RyaW5nLCBzb3VyY2U6IHN0cmluZykgPT4ge1xuICAgIGNvbnN0IGltcG9ydERlY2xhcmF0aW9uID0gcm9vdC5maW5kKGouSW1wb3J0RGVjbGFyYXRpb24sIHtcbiAgICAgICAgc291cmNlOiB7IHZhbHVlOiBzb3VyY2UgfVxuICAgIH0pO1xuXG4gICAgaWYgKGltcG9ydERlY2xhcmF0aW9uLnNpemUoKSA+IDApIHtcbiAgICAgICAgY29uc3Qgc3BlY2lmaWVycyA9IGltcG9ydERlY2xhcmF0aW9uLmdldCgwKS5ub2RlLnNwZWNpZmllcnM7XG4gICAgICAgIGNvbnN0IGFscmVhZHlJbXBvcnRlZCA9IHNwZWNpZmllcnMuc29tZShcbiAgICAgICAgICAgIChzcGVjaWZpZXI6IGFueSkgPT4gc3BlY2lmaWVyLnR5cGUgPT09ICdJbXBvcnRTcGVjaWZpZXInICYmIHNwZWNpZmllci5pbXBvcnRlZC5uYW1lID09PSBpbXBvcnROYW1lXG4gICAgICAgICk7XG5cbiAgICAgICAgaWYgKCFhbHJlYWR5SW1wb3J0ZWQpIHtcbiAgICAgICAgICAgIHNwZWNpZmllcnMucHVzaChqLmltcG9ydFNwZWNpZmllcihqLmlkZW50aWZpZXIoaW1wb3J0TmFtZSkpKTtcbiAgICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICAgIGNvbnN0IG5ld0ltcG9ydCA9IGouaW1wb3J0RGVjbGFyYXRpb24oW2ouaW1wb3J0U3BlY2lmaWVyKGouaWRlbnRpZmllcihpbXBvcnROYW1lKSldLCBqLmxpdGVyYWwoc291cmNlKSk7XG4gICAgICAgIHJvb3QuZ2V0KCkubm9kZS5wcm9ncmFtLmJvZHkudW5zaGlmdChuZXdJbXBvcnQpO1xuICAgIH1cbn07XG4iXSwibmFtZXMiOlsiZW5zdXJlSW1wb3J0RXhpc3RzIiwiaiIsInJvb3QiLCJpbXBvcnROYW1lIiwic291cmNlIiwiaW1wb3J0RGVjbGFyYXRpb24iLCJzcGVjaWZpZXJzIiwic3BlY2lmaWVyIiwibmV3SW1wb3J0Il0sIm1hcHBpbmdzIjoiZ0ZBRU8sTUFBTUEsRUFBcUIsQ0FBQ0MsRUFBZ0JDLEVBQVdDLEVBQW9CQyxJQUFtQixDQUNqRyxNQUFNQyxFQUFvQkgsRUFBSyxLQUFLRCxFQUFFLGtCQUFtQixDQUNyRCxPQUFRLENBQUUsTUFBT0csQ0FBTyxDQUFBLENBQzNCLEVBRUcsR0FBQUMsRUFBa0IsS0FBSyxFQUFJLEVBQUcsQ0FDOUIsTUFBTUMsRUFBYUQsRUFBa0IsSUFBSSxDQUFDLEVBQUUsS0FBSyxXQUN6QkMsRUFBVyxLQUM5QkMsR0FBbUJBLEVBQVUsT0FBUyxtQkFBcUJBLEVBQVUsU0FBUyxPQUFTSixDQUFBLEdBSXhGRyxFQUFXLEtBQUtMLEVBQUUsZ0JBQWdCQSxFQUFFLFdBQVdFLENBQVUsQ0FBQyxDQUFDLENBQy9ELEtBQ0csQ0FDSCxNQUFNSyxFQUFZUCxFQUFFLGtCQUFrQixDQUFDQSxFQUFFLGdCQUFnQkEsRUFBRSxXQUFXRSxDQUFVLENBQUMsQ0FBQyxFQUFHRixFQUFFLFFBQVFHLENBQU0sQ0FBQyxFQUN0R0YsRUFBSyxNQUFNLEtBQUssUUFBUSxLQUFLLFFBQVFNLENBQVMsQ0FDbEQsQ0FDSiJ9
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use strict";const a=require("../utils.js");function p(o,c){const n=c.jscodeshift,t=n(o.source);if(!(o.path.endsWith(".ts")||o.path.endsWith(".tsx")))return t.toSource();let r=!1;const i=e=>{e&&e.type==="Identifier"&&e.name==="Dialog"&&(e.name="DialogHandle",r=!0)};return t.find(n.TSTypeReference).forEach(e=>{const{typeName:s}=e.node;i(s)}),t.find(n.TSAsExpression).forEach(e=>{const{typeAnnotation:s}=e.node;s&&s.type==="TSTypeReference"&&i(s.typeName)}),r&&a.ensureImportExists(n,t,"DialogHandle","@progress/kendo-react-dialogs"),t.toSource()}module.exports=p;
|
|
9
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLWhhbmRsZS5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvZGlhbG9ncy9jb2RlbW9kcy92MTEvZGlhbG9nLWhhbmRsZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBUEksIEZpbGVJbmZvLCBKU0NvZGVzaGlmdCB9IGZyb20gJ2pzY29kZXNoaWZ0JztcbmltcG9ydCB7IGVuc3VyZUltcG9ydEV4aXN0cyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gKGZpbGVJbmZvOiBGaWxlSW5mbywgYXBpOiBBUEkpIHtcbiAgICBjb25zdCBqOiBKU0NvZGVzaGlmdCA9IGFwaS5qc2NvZGVzaGlmdDtcbiAgICBjb25zdCByb290ID0gaihmaWxlSW5mby5zb3VyY2UpO1xuXG4gICAgY29uc3QgaXNUeXBlU2NyaXB0ID0gZmlsZUluZm8ucGF0aC5lbmRzV2l0aCgnLnRzJykgfHwgZmlsZUluZm8ucGF0aC5lbmRzV2l0aCgnLnRzeCcpO1xuICAgIGlmICghaXNUeXBlU2NyaXB0KSB7XG4gICAgICAgIHJldHVybiByb290LnRvU291cmNlKCk7XG4gICAgfVxuXG4gICAgbGV0IGhhc0NoYW5nZXMgPSBmYWxzZTtcblxuICAgIGNvbnN0IHJlcGxhY2VUeXBlTmFtZSA9ICh0eXBlTmFtZTogYW55KSA9PiB7XG4gICAgICAgIGlmICh0eXBlTmFtZSAmJiB0eXBlTmFtZS50eXBlID09PSAnSWRlbnRpZmllcicgJiYgdHlwZU5hbWUubmFtZSA9PT0gJ0RpYWxvZycpIHtcbiAgICAgICAgICAgIHR5cGVOYW1lLm5hbWUgPSAnRGlhbG9nSGFuZGxlJztcbiAgICAgICAgICAgIGhhc0NoYW5nZXMgPSB0cnVlO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIHJvb3QuZmluZChqLlRTVHlwZVJlZmVyZW5jZSkuZm9yRWFjaCgocGF0aCkgPT4ge1xuICAgICAgICBjb25zdCB7IHR5cGVOYW1lIH0gPSBwYXRoLm5vZGU7XG4gICAgICAgIHJlcGxhY2VUeXBlTmFtZSh0eXBlTmFtZSk7XG4gICAgfSk7XG5cbiAgICByb290LmZpbmQoai5UU0FzRXhwcmVzc2lvbikuZm9yRWFjaCgocGF0aCkgPT4ge1xuICAgICAgICBjb25zdCB7IHR5cGVBbm5vdGF0aW9uIH0gPSBwYXRoLm5vZGU7XG4gICAgICAgIGlmICh0eXBlQW5ub3RhdGlvbiAmJiB0eXBlQW5ub3RhdGlvbi50eXBlID09PSAnVFNUeXBlUmVmZXJlbmNlJykge1xuICAgICAgICAgICAgcmVwbGFjZVR5cGVOYW1lKHR5cGVBbm5vdGF0aW9uLnR5cGVOYW1lKTtcbiAgICAgICAgfVxuICAgIH0pO1xuXG4gICAgaWYgKGhhc0NoYW5nZXMpIHtcbiAgICAgICAgZW5zdXJlSW1wb3J0RXhpc3RzKGosIHJvb3QsICdEaWFsb2dIYW5kbGUnLCAnQHByb2dyZXNzL2tlbmRvLXJlYWN0LWRpYWxvZ3MnKTtcbiAgICB9XG5cbiAgICByZXR1cm4gcm9vdC50b1NvdXJjZSgpO1xufVxuIl0sIm5hbWVzIjpbImRpYWxvZ0hhbmRsZSIsImZpbGVJbmZvIiwiYXBpIiwiaiIsInJvb3QiLCJoYXNDaGFuZ2VzIiwicmVwbGFjZVR5cGVOYW1lIiwidHlwZU5hbWUiLCJwYXRoIiwidHlwZUFubm90YXRpb24iLCJlbnN1cmVJbXBvcnRFeGlzdHMiXSwibWFwcGluZ3MiOiI0Q0FHQSxTQUFBQSxFQUF5QkMsRUFBb0JDLEVBQVUsQ0FDbkQsTUFBTUMsRUFBaUJELEVBQUksWUFDckJFLEVBQU9ELEVBQUVGLEVBQVMsTUFBTSxFQUc5QixHQUFJLEVBRGlCQSxFQUFTLEtBQUssU0FBUyxLQUFLLEdBQUtBLEVBQVMsS0FBSyxTQUFTLE1BQU0sR0FFL0UsT0FBT0csRUFBSyxXQUdoQixJQUFJQyxFQUFhLEdBRVgsTUFBQUMsRUFBbUJDLEdBQWtCLENBQ25DQSxHQUFZQSxFQUFTLE9BQVMsY0FBZ0JBLEVBQVMsT0FBUyxXQUNoRUEsRUFBUyxLQUFPLGVBQ0hGLEVBQUEsR0FDakIsRUFHSixPQUFBRCxFQUFLLEtBQUtELEVBQUUsZUFBZSxFQUFFLFFBQVNLLEdBQVMsQ0FDckMsS0FBQSxDQUFFLFNBQUFELENBQVMsRUFBSUMsRUFBSyxLQUMxQkYsRUFBZ0JDLENBQVEsQ0FBQSxDQUMzQixFQUVESCxFQUFLLEtBQUtELEVBQUUsY0FBYyxFQUFFLFFBQVNLLEdBQVMsQ0FDcEMsS0FBQSxDQUFFLGVBQUFDLENBQWUsRUFBSUQsRUFBSyxLQUM1QkMsR0FBa0JBLEVBQWUsT0FBUyxtQkFDMUNILEVBQWdCRyxFQUFlLFFBQVEsQ0FDM0MsQ0FDSCxFQUVHSixHQUNtQkssRUFBQUEsbUJBQUFQLEVBQUdDLEVBQU0sZUFBZ0IsK0JBQStCLEVBR3hFQSxFQUFLLFVBQ2hCIn0=
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-buttons","@progress/kendo-svg-icons","@progress/kendo-react-common","@progress/kendo-react-intl"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactDialogs={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactButtons,t.KendoSvgIcons,t.KendoReactCommon,t.KendoReactIntl)}(this,(function(t,e,i,s,o,n,a,r){"use strict";function h(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,s.get?s:{enumerable:!0,get:function(){return t[i]}})}})),e.default=t,Object.freeze(e)}var l=h(e),d=h(i);const p=({children:t,onCloseButtonClick:e,id:i,closeIcon:s})=>l.createElement("div",{className:"k-window-titlebar k-dialog-titlebar",id:i},l.createElement("span",{className:"k-window-title k-dialog-title"},t),s&&l.createElement("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions"},l.createElement(o.Button,{role:"button","aria-label":"Close",onClick:e,icon:"x",svgIcon:n.xIcon,fillMode:"flat",className:"k-window-titlebar-action k-dialog-titlebar-action"}))),c=t=>{const e={layout:"stretched",...t},{layout:i,children:s}=e,o=a.classNames("k-actions","k-actions-horizontal","k-window-actions k-dialog-actions",{[`k-actions-${i}`]:i});return l.createElement("div",{className:o},s)};c.propTypes={children:s.any,layout:s.oneOf(["start","center","end","stretched"])};const g="data-windowid",u=10002,m=(t,e,i)=>{let s=t;if(e&&e.defaultView){const t=e.querySelectorAll(".k-window:not(.k-dialog), .k-dialog-wrapper");let o=!1;return t.forEach((t=>{const n=e.defaultView.getComputedStyle(t,null);if(t.getAttribute(g)!==i&&null!==n.zIndex){const t=parseInt(n.zIndex,10);t>=s&&(s=t,o=!0)}})),o?s+2:s}return s},w=class extends l.Component{constructor(t){super(t),this.context=0,this.titleId=this.generateTitleId(),this.contentId=this.generateContentId(),this.activeElement=null,this.onCloseDialog=t=>{t.preventDefault(),a.dispatchEvent(this.props.onClose,t,this,void 0)},this.onKeyDown=t=>{t.keyCode===a.Keys.esc&&this.props.onClose&&(t.preventDefault(),this.onCloseDialog(t)),a.keepFocusInContainer(t,this.element)},this.getCurrentZIndex=()=>this.state&&void 0!==this.context?this.state.zIndex>(this.context?this.context+2:0)?this.state.zIndex:this.context+2:this.context?this.context:u,this.getDocument=()=>{const t=a.canUseDOM?document:null;return this.props.appendTo?this.props.appendTo.ownerDocument:t},a.canUseDOM&&(this.activeElement=a.getActiveElement(document))}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){if(this.element){if(this.props.autoFocus&&!this.props.autoFocusedElement)this.element.focus();else if(this.props.autoFocus&&this.props.autoFocusedElement)this.element.focus();else if(!this.props.autoFocus&&this.props.autoFocusedElement){const t=this.element.querySelector(this.props.autoFocusedElement);t&&t.focus()}else{const t=[...a.FOCUSABLE_ELEMENTS].map((t=>t+":not(.k-dialog-titlebar *)"));a.focusFirstFocusableChild(this.element,t)}this.setState({zIndex:m(this.getCurrentZIndex(),this.getDocument(),this._id)})}}componentWillUnmount(){setTimeout((()=>{var t;!this.element&&this.activeElement&&a.canUseDOM&&(document.contains(this.activeElement)?this.activeElement.focus():this.activeElement.id&&(null==(t=document.getElementById(this.activeElement.id))||t.focus()))}))}render(){const t=void 0!==this.props.id?this.props.id:this.titleId,{title:e,width:i,height:s,children:o,minWidth:n,dir:r,style:h,contentStyle:c,modal:u=!0}=this.props,m=l.Children.toArray(o),w=this.getContent(m),f=this.getActionBar(m),E=e?{"aria-labelledby":t}:null,C=void 0===this.props.closeIcon||this.props.closeIcon,v=this.getCurrentZIndex(),S=l.createElement(a.ZIndexContext.Provider,{value:v},l.createElement("div",{[g]:this._id,className:"k-dialog-wrapper"+(this.props.className?" "+this.props.className:""),onKeyDown:this.onKeyDown,tabIndex:0,dir:r,style:{zIndex:v,...h},ref:t=>{this.element=t}},u&&l.createElement("div",{className:"k-overlay",style:this.props.overlayStyle}),l.createElement("div",{...E,className:a.classNames("k-window k-dialog",{[`k-window-${this.props.themeColor}`]:this.props.themeColor}),role:"dialog","aria-labelledby":t,"aria-modal":!0,"aria-describedby":this.contentId,style:{width:i,height:s,minWidth:n}},this.props.title&&l.createElement(p,{closeIcon:C,onCloseButtonClick:this.onCloseDialog,id:t},e),l.createElement("div",{className:"k-window-content k-dialog-content",style:c,id:this.contentId},w),f)));return a.canUseDOM?null!==this.props.appendTo?d.createPortal(S,this.props.appendTo||document.body):S:null}getActionBar(t){return t.filter((t=>t&&t.type===c))}getContent(t){return t.filter((t=>t&&t.type!==c))}generateTitleId(){return"dialog-title-"+this._id}generateContentId(){return"dialog-content-"+this._id}};w.displayName="Dialog",w.propTypes={title:s.any,id:s.string,dir:s.string,style:s.object,closeIcon:s.bool,width:s.oneOfType([s.number,s.string]),height:s.oneOfType([s.number,s.string]),minWidth:s.oneOfType([s.number,s.string]),autoFocus:s.bool},w.defaultProps={autoFocus:!1},w.contextType=a.ZIndexContext;let f=w;const E=a.createPropsContext(),C=a.withIdHOC(a.withPropsContext(E,f));C.displayName="KendoReactDialog";var v=(t=>(t.DEFAULT="DEFAULT",t.FULLSCREEN="FULLSCREEN",t.MINIMIZED="MINIMIZED",t))(v||{});const S="dialogs.windowMaximizeButton",I="dialogs.windowMinimizeButton",y="dialogs.windowRestoreButton",b="dialogs.windowCloseButton",k={[S]:"maximize",[I]:"minimize",[y]:"restore",[b]:"close"},D=t=>{const{children:e,onCloseButtonClick:i,onMinimizeButtonClick:s,onFullScreenButtonClick:a,onRestoreButtonClick:h,onDoubleClick:d,stage:p,forwardedRef:c,id:g}=t,u=r.useLocalization(),m=t.minimizeButton?l.createElement(t.minimizeButton,{onClick:s,stage:p}):l.createElement(o.Button,{fillMode:"flat",icon:"window-minimize",svgIcon:n.windowMinimizeIcon,className:"k-window-titlebar-action",onClick:s,"aria-label":u.toLanguageString(I,k[I])}),w=t.maximizeButton?l.createElement(t.maximizeButton,{onClick:a,stage:p}):l.createElement(o.Button,{fillMode:"flat",icon:"window-maximize",svgIcon:n.windowIcon,className:"k-window-titlebar-action",onClick:a,"aria-label":u.toLanguageString(S,k[S])}),f=t.restoreButton?l.createElement(t.restoreButton,{onClick:h,stage:p}):l.createElement(o.Button,{fillMode:"flat",icon:"window-restore",svgIcon:n.windowRestoreIcon,className:"k-window-titlebar-action",onClick:h,"aria-label":u.toLanguageString(y,k[y])}),E=t.closeButton?l.createElement(t.closeButton,{onClick:i,stage:p}):l.createElement(o.Button,{fillMode:"flat",icon:"x",svgIcon:n.xIcon,className:"k-window-titlebar-action",onClick:i,"aria-label":u.toLanguageString(b,k[b])});return l.createElement("div",{className:"k-window-titlebar",style:{touchAction:"none"},ref:c,onDoubleClick:d},l.createElement("span",{className:"k-window-title",id:g},e||""),l.createElement("div",{className:"k-window-titlebar-actions"},p===v.DEFAULT&&m,p===v.DEFAULT&&w,p!==v.DEFAULT&&f,E))},T=l.forwardRef(((t,e)=>l.createElement(D,{...t,forwardedRef:e}))),x=["n","e","s","w","se","sw","ne","nw"];class B extends l.Component{render(){return l.createElement("div",{className:"k-resize-handles-wrapper"}," ",x.map(((t,e)=>l.createElement(a.Draggable,{key:e,onDrag:e=>{const{event:i}=e;i.originalEvent.preventDefault(),this.props.onResize(i,{end:!1,direction:t})},onRelease:e=>{const{event:i}=e;i.originalEvent.preventDefault(),this.props.onResize(i,{end:!0,direction:t})}},l.createElement("div",{className:"k-resize-handle k-resize-"+t,style:{display:"block",touchAction:"none",userSelect:"none"}})))))}}class L extends l.Component{shouldComponentUpdate(t){return t.shouldUpdateOnDrag||!t.isDragging}render(){return this.props.children}}const M=t=>{const e={layout:"end",...t},{layout:i,children:s}=e,o=a.classNames("k-actions","k-window-actions","k-actions-horizontal","k-hstack",{"k-justify-content-start":"start"===i,"k-justify-content-center":"center"===i,"k-justify-content-end":"end"===i,"k-justify-content-stretch":"stretched"===i});return l.createElement("div",{className:o},s)};M.propTypes={children:s.any,layout:s.oneOf(["start","center","end","stretched"])};const N=class extends l.Component{constructor(t){super(t),this.context=0,this.draggable=null,this.offSetCoordinates={x:0,y:0},this.titleId=this.generateTitleId(),this.mounted=!1,this.activeElement=null,this.onKeyDown=t=>{if(this.props.modal&&a.keepFocusInContainer(t,this.element),t.target!==t.currentTarget)return;const e=this.props.minWidth||120,i=this.props.minHeight||100;if((t.metaKey||t.ctrlKey)&&this.props.resizable){switch(t.keyCode){case a.Keys.up:t.preventDefault(),i<=this.height-5&&this.setState({height:this.height-5});break;case a.Keys.down:t.preventDefault(),this.setState({height:this.height+5});break;case a.Keys.left:e<=this.width-5&&this.setState({width:this.width-5});break;case a.Keys.right:this.setState({width:this.width+5});break;default:return}this.dispatchMoveEvent(this.props.onResize,t,!1,void 0)}else if(t.altKey)switch(t.keyCode){case a.Keys.up:this.windowStage===v.MINIMIZED?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.DEFAULT})):this.windowStage===v.DEFAULT&&(this.handleFullscreen(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.FULLSCREEN}));break;case a.Keys.down:this.windowStage===v.FULLSCREEN?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.DEFAULT})):this.windowStage===v.DEFAULT&&(this.handleMinimize(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.MINIMIZED}))}else{if(!t.ctrlKey)switch(t.keyCode){case a.Keys.esc:return void(this.props.onClose&&this.handleCloseWindow(t));case a.Keys.up:this.setState((t=>({top:t.top-5})));break;case a.Keys.down:this.setState((t=>({top:t.top+5})));break;case a.Keys.left:this.setState((t=>({left:t.left-5})));break;case a.Keys.right:this.setState((t=>({left:t.left+5})));break;default:return}this.dispatchMoveEvent(this.props.onMove,t,!1,void 0)}},this.onPress=t=>{const e=t.event;this.windowCoordinatesState.differenceLeft=e.pageX-this.left,this.windowCoordinatesState.differenceTop=e.pageY-this.top},this.onDrag=t=>{const e=t.event;e.originalEvent.preventDefault(),this.windowStage!==v.FULLSCREEN&&this.props.draggable&&(this.setState({top:Math.max(e.pageY-this.windowCoordinatesState.differenceTop,0),left:e.pageX-this.windowCoordinatesState.differenceLeft,isDragging:!0}),this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!1))},this.onRelease=t=>{const e=t.event;this.windowStage!==v.FULLSCREEN&&this.props.draggable&&this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!0),this.setState({isDragging:!1})},this.onFocus=()=>{this._blurTimeout?(clearTimeout(this._blurTimeout),this._blurTimeout=void 0):this.setState({focused:!0,zIndex:m(this.getCurrentZIndex(),this.getDocument(),this._id)})},this.onBlur=()=>{clearTimeout(this._blurTimeout);const t=this.getWindow();t&&(this._blurTimeout=t.setTimeout((()=>{this.mounted&&this.setState({focused:!1}),this._blurTimeout=void 0})))},this.getInitialTop=()=>{if(void 0!==this.props.top)return this.props.top;if(void 0!==this.props.initialTop)return this.props.initialTop;let t=300;if(void 0!==this.props.height?t=this.props.height:void 0!==this.props.initialHeight&&(t=this.props.initialHeight),this.props.appendTo)return this.props.appendTo.offsetHeight/2-t/2;const e=this.getWindow();return e?e.innerHeight/2-t/2:0},this.getInitialLeft=()=>{if(void 0!==this.props.left)return this.props.left;if(void 0!==this.props.initialLeft)return this.props.initialLeft;let t=300;if(void 0!==this.props.width?t=this.props.width:void 0!==this.props.initialWidth&&(t=this.props.initialWidth),this.props.appendTo)return this.props.appendTo.offsetWidth/2-t/2;const e=this.getWindow();return e?e.innerWidth/2-t/2:0},this.getInitialWidth=()=>{let t=300;return void 0!==this.props.width?t=this.props.width:void 0!==this.props.initialWidth&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=300;return void 0!==this.props.height?t=this.props.height:void 0!==this.props.initialHeight&&(t=this.props.initialHeight),t},this.handleMinimize=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height,this.setState({stage:v.MINIMIZED,height:0}),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.MINIMIZED})},this.handleFullscreen=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height;const e=this.getWindow(),i=e?e.innerWidth:0,s=e?e.innerHeight:0;this.setState({left:0,top:0,width:this.props.appendTo?this.props.appendTo.offsetWidth:i,height:this.props.appendTo?this.props.appendTo.offsetHeight:s,stage:v.FULLSCREEN}),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===v.FULLSCREEN?this.setState({stage:v.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===v.MINIMIZED&&this.setState({stage:v.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),a.dispatchEvent(this.props.onStageChange,t,this,{state:v.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),a.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===v.FULLSCREEN||this.windowStage===v.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{const i=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,s=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,o=this.width,n=this.height,a=this.props.minWidth||120,r=this.props.minHeight||100,h=this.top-s,l=this.left-i,d=i-this.left,p=s-this.top,c=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&r-(n+h)<0&&(this.top>0&&(c.height=n+h),c.top=s),e.direction.indexOf("s")>=0&&r-p<0&&(c.height=p),e.direction.indexOf("w")>=0&&a-(o+l)<0&&(this.left>0&&(c.width=o+l),c.left=i),e.direction.indexOf("e")>=0&&a-d<0&&(c.width=d),this.setState(c),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,i,s)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:i,end:s,target:this,left:this.state.left,top:this.state.top,width:this.state.width,hight:this.state.height,height:this.state.height})},this.handleBrowserWindowResize=()=>{if(this.windowStage===v.FULLSCREEN){const t=this.getWindow(),e=t?t.innerWidth:0,i=t?t.innerHeight:0;this.setState({width:this.props.appendTo?this.props.appendTo.offsetWidth:e,height:this.props.appendTo?this.props.appendTo.offsetHeight:i})}},this.getCurrentZIndex=()=>this.state&&void 0!==this.context?this.state.zIndex>(this.context?this.context+2:0)?this.state.zIndex:this.context+2:this.context?this.context:u,this.getDocument=()=>{const t=a.canUseDOM?document:null;return this.props.appendTo?this.props.appendTo.ownerDocument:t},this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},this.state={stage:this.props.stage||v.DEFAULT,isDragging:!1,top:0,left:0,width:300,height:300,focused:!0,zIndex:u},a.canUseDOM&&(this.activeElement=document.activeElement)}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){this.element&&this.props.autoFocus&&this.element.focus({preventScroll:!0});const t=this.getWindow();t&&t.addEventListener("resize",this.handleBrowserWindowResize),this.setState({stage:this.props.stage||v.DEFAULT,isDragging:!1,top:this.getInitialTop(),left:this.getInitialLeft(),width:this.getInitialWidth(),height:this.getInitialHeight(),focused:!0,zIndex:m(this.getCurrentZIndex(),this.getDocument(),this._id)}),this.windowCoordinatesState={leftBeforeAction:this.getInitialLeft(),topBeforeAction:this.getInitialTop(),widthBeforeAction:this.getInitialWidth(),heightBeforeAction:this.getInitialHeight()};const e=this.getDocument();if(this.props.appendTo&&e){const t=this.props.appendTo.getBoundingClientRect(),i=e.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-i.left,this.offSetCoordinates.y=t.top-i.top}this.mounted=!0}componentWillUnmount(){const t=this.getWindow();t&&t.removeEventListener("resize",this.handleBrowserWindowResize),this.mounted=!1,setTimeout((()=>{var t;!this.element&&this.activeElement&&a.canUseDOM&&(document.contains(this.activeElement)?this.activeElement.focus({preventScroll:!0}):this.activeElement.id&&(null==(t=document.getElementById(this.activeElement.id))||t.focus({preventScroll:!0})))}))}componentDidUpdate(t){this.props.left&&t.left!==this.props.left&&this.setState({left:this.props.left}),this.props.top&&t.top!==this.props.top&&this.setState({top:this.props.top});const e=this.getDocument();if(this.props.appendTo&&e){const t=this.props.appendTo.getBoundingClientRect(),i=e.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-i.left,this.offSetCoordinates.y=t.top-i.top}this.mounted=!0}render(){const t=l.Children.toArray(this.props.children),e=this.getContent(t),i=this.getActionBar(t),s=this.getCurrentZIndex(),o=a.classNames("k-window",this.props.className,{[`k-window-${this.props.themeColor}`]:this.props.themeColor,"k-window-minimized":"MINIMIZED"===this.state.stage,"k-focus":this.state.focused}),n=l.createElement(a.ZIndexContext.Provider,{value:s},l.createElement(l.Fragment,null,this.props.modal&&l.createElement("div",{className:"k-overlay",style:{zIndex:s,...this.props.overlayStyle}}),l.createElement("div",{id:this.props.id,[g]:this._id,tabIndex:0,role:"dialog","aria-labelledby":this.titleId,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,ref:t=>{this.windowElement=t,this.element=t},className:o,style:{top:this.top,left:this.left,width:this.width,height:this.height||"",zIndex:s,...this.props.style}},l.createElement(L,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},l.createElement(a.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,autoScroll:!1,ref:t=>{this.draggable=t}},l.createElement(T,{stage:this.windowStage,onDoubleClick:this.props.doubleClickStageChange?this.handleDoubleClick:void 0,onMinimizeButtonClick:this.handleMinimize,onFullScreenButtonClick:this.handleFullscreen,onRestoreButtonClick:this.handleRestore,onCloseButtonClick:this.handleCloseWindow,closeButton:this.props.closeButton,minimizeButton:this.props.minimizeButton,maximizeButton:this.props.maximizeButton,restoreButton:this.props.restoreButton,id:this.titleId},this.props.title)),this.windowStage!==v.MINIMIZED?l.createElement(l.Fragment,null,l.createElement("div",{className:"k-window-content"},e),i):null,this.windowStage===v.DEFAULT&&this.props.resizable?l.createElement(B,{onResize:this.handleResize}):null))));return a.canUseDOM?null!==this.props.appendTo?d.createPortal(n,this.props.appendTo||document.body):n:null}get top(){return this.windowStage!==v.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==v.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let t=this.props.width||this.state.width;if(this.windowStage===v.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetWidth,t;const e=this.getWindow();t=e?e.innerWidth:0}return t}get height(){let t=this.props.height||this.state.height;if(this.windowStage===v.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetHeight,t;const e=this.getWindow();t=e?e.innerHeight:0}else this.windowStage===v.MINIMIZED&&(t=0);return t}get windowStage(){return this.props.stage||this.state.stage}getActionBar(t){return t.filter((t=>t&&t.type===M))}getContent(t){return t.filter((t=>t&&t.type!==M))}generateTitleId(){return"window-title-"+this._id}};N.displayName="Window",N.propTypes={width:s.number,height:s.number,left:s.number,top:s.number,initialWidth:s.number,initialHeight:s.number,initialLeft:s.number,initialTop:s.number,minWidth:s.number,minHeight:s.number,resizable:s.bool,draggable:s.bool,title:s.any,shouldUpdateOnDrag:s.bool,stage:s.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),className:s.string,id:s.string,style:s.object,overlayStyle:s.object,autoFocus:s.bool},N.defaultProps={minWidth:120,minHeight:100,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0,autoFocus:!0},N.contextType=a.ZIndexContext;let F=N;const z=a.createPropsContext(),R=a.withIdHOC(a.withPropsContext(z,F));R.displayName="KendoReactWindow",t.Dialog=C,t.DialogActionsBar=c,t.DialogPropsContext=E,t.Window=R,t.WindowActionsBar=M,t.WindowPropsContext=z,t.WindowWithoutContext=F}));
|
|
15
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-buttons","@progress/kendo-svg-icons","@progress/kendo-react-common","@progress/kendo-react-intl"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactDialogs={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactButtons,t.KendoSvgIcons,t.KendoReactCommon,t.KendoReactIntl)}(this,(function(t,e,i,o,s,n,a,r){"use strict";function h(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(i){if("default"!==i){var o=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,o.get?o:{enumerable:!0,get:function(){return t[i]}})}})),e.default=t,Object.freeze(e)}var l=h(e),d=h(i);const c=({children:t,onCloseButtonClick:e,id:i,closeIcon:o})=>l.createElement("div",{className:"k-window-titlebar k-dialog-titlebar",id:i},l.createElement("span",{className:"k-window-title k-dialog-title"},t),o&&l.createElement("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions"},l.createElement(s.Button,{role:"button","aria-label":"Close",onClick:e,icon:"x",svgIcon:n.xIcon,fillMode:"flat",className:"k-window-titlebar-action k-dialog-titlebar-action"}))),p=t=>{const e={layout:"stretched",...t},{layout:i,children:o}=e,s=a.classNames("k-actions","k-actions-horizontal","k-window-actions k-dialog-actions",{[`k-actions-${i}`]:i});return l.createElement("div",{className:s},o)};p.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const u="data-windowid",g=10002,m=a.createPropsContext(),w=l.forwardRef(((t,e)=>{const i=a.useZIndexContext(),o=i?i+2:g,s=l.useRef(null),n=l.useRef(null),r=l.useRef(a.getActiveElement(document)),h=a.usePropsContext(m,t),w=l.useMemo((()=>({...f,...h})),[h]),{title:E,width:C,height:v,children:S,minWidth:y,dir:b,style:k,themeColor:I,contentStyle:D,autoFocusedElement:T,appendTo:B,className:x,overlayStyle:L,modal:M=f.modal,closeIcon:N=f.closeIcon,autoFocus:R=f.autoFocus}=w,F=l.useCallback((()=>({props:w,element:n.current})),[w]);l.useImperativeHandle(s,F),l.useImperativeHandle(e,(()=>s.current));const z=l.useMemo((()=>l.Children.toArray(S).filter((t=>l.isValidElement(t)&&t.type!==p))),[S]),W=l.useMemo((()=>l.Children.toArray(S).filter((t=>l.isValidElement(t)&&t.type===p))),[S]),{_id:A,contentId:U,id:O}=l.useMemo((()=>{const t=w.id,e=`${null!=t?t:"accessibility"}-id`;return{_id:e,contentId:`dialog-content-${e}`,id:t||`dialog-title-${e}`}}),[w.id]),K=l.useCallback((()=>{if(n.current)if(R&&!T)n.current.focus();else if(!R&&T&&n.current){const t=n.current.querySelector(T);null==t||t.focus()}else{const t=[...a.FOCUSABLE_ELEMENTS].map((t=>t+":not(.k-dialog-titlebar *)"));a.focusFirstFocusableChild(n.current,t)}}),[R,T]);l.useEffect((()=>(K(),()=>{setTimeout((()=>{var t;!n.current&&r.current&&a.canUseDOM&&(document.contains(r.current)?r.current.focus():r.current.id&&(null==(t=document.getElementById(r.current.id))||t.focus()))}))})),[K]);const H=l.useCallback((t=>{t.preventDefault(),a.dispatchEvent(w.onClose,t,F(),void 0)}),[w.onClose]),Z=l.useCallback((t=>{t.keyCode===a.Keys.esc&&w.onClose&&(t.preventDefault(),H(t)),a.keepFocusInContainer(t,n.current)}),[w.onClose,H]),P=l.useMemo((()=>l.createElement(a.ZIndexContext.Provider,{value:o},l.createElement("div",{ref:n,[u]:A,className:"k-dialog-wrapper"+(x?" "+x:""),onKeyDown:Z,tabIndex:0,dir:b,style:{zIndex:o,...k}},M&&l.createElement("div",{className:"k-overlay",style:L}),l.createElement("div",{className:a.classNames("k-window k-dialog",{[`k-window-${I}`]:I}),role:"dialog","aria-labelledby":O,"aria-modal":!0,"aria-describedby":U,style:{width:C,height:v,minWidth:y}},E&&l.createElement(c,{closeIcon:N,onCloseButtonClick:H,id:O},E),l.createElement("div",{className:"k-window-content k-dialog-content",style:D,id:U},z),W)))),[o,A,x,Z,k,b,L,I,O,U,C,v,y,N,H,D,E,z,W,M]);return a.canUseDOM?null!==B?d.createPortal(P,B||document.body):P:null})),f={autoFocus:!1,modal:!0,closeIcon:!0},E={autoFocus:o.bool,autoFocusedElement:o.string,title:o.any,className:o.string,closeIcon:o.bool,modal:o.bool,overlayStyle:o.object,width:o.oneOfType([o.number,o.string]),height:o.oneOfType([o.number,o.string]),minWidth:o.oneOfType([o.number,o.string]),onClose:o.func,children:o.node,id:o.string,dir:o.string,style:o.object,contentStyle:o.object,appendTo:o.any,themeColor:o.oneOf(["primary","dark","light"])};w.displayName="KendoReactDialog",w.propTypes=E;var C=(t=>(t.DEFAULT="DEFAULT",t.FULLSCREEN="FULLSCREEN",t.MINIMIZED="MINIMIZED",t))(C||{});const v="dialogs.windowMaximizeButton",S="dialogs.windowMinimizeButton",y="dialogs.windowRestoreButton",b="dialogs.windowCloseButton",k={[v]:"maximize",[S]:"minimize",[y]:"restore",[b]:"close"},I=t=>{const{children:e,onCloseButtonClick:i,onMinimizeButtonClick:o,onFullScreenButtonClick:a,onRestoreButtonClick:h,onDoubleClick:d,stage:c,forwardedRef:p,id:u}=t,g=r.useLocalization(),m=t.minimizeButton?l.createElement(t.minimizeButton,{onClick:o,stage:c}):l.createElement(s.Button,{fillMode:"flat",icon:"window-minimize",svgIcon:n.windowMinimizeIcon,className:"k-window-titlebar-action",onClick:o,"aria-label":g.toLanguageString(S,k[S])}),w=t.maximizeButton?l.createElement(t.maximizeButton,{onClick:a,stage:c}):l.createElement(s.Button,{fillMode:"flat",icon:"window-maximize",svgIcon:n.windowIcon,className:"k-window-titlebar-action",onClick:a,"aria-label":g.toLanguageString(v,k[v])}),f=t.restoreButton?l.createElement(t.restoreButton,{onClick:h,stage:c}):l.createElement(s.Button,{fillMode:"flat",icon:"window-restore",svgIcon:n.windowRestoreIcon,className:"k-window-titlebar-action",onClick:h,"aria-label":g.toLanguageString(y,k[y])}),E=t.closeButton?l.createElement(t.closeButton,{onClick:i,stage:c}):l.createElement(s.Button,{fillMode:"flat",icon:"x",svgIcon:n.xIcon,className:"k-window-titlebar-action",onClick:i,"aria-label":g.toLanguageString(b,k[b])});return l.createElement("div",{className:"k-window-titlebar",style:{touchAction:"none"},ref:p,onDoubleClick:d},l.createElement("span",{className:"k-window-title",id:u},e||""),l.createElement("div",{className:"k-window-titlebar-actions"},c===C.DEFAULT&&m,c===C.DEFAULT&&w,c!==C.DEFAULT&&f,E))},D=l.forwardRef(((t,e)=>l.createElement(I,{...t,forwardedRef:e}))),T=["n","e","s","w","se","sw","ne","nw"];class B extends l.Component{render(){return l.createElement("div",{className:"k-resize-handles-wrapper"}," ",T.map(((t,e)=>l.createElement(a.Draggable,{key:e,onDrag:e=>{const{event:i}=e;i.originalEvent.preventDefault(),this.props.onResize(i,{end:!1,direction:t})},onRelease:e=>{const{event:i}=e;i.originalEvent.preventDefault(),this.props.onResize(i,{end:!0,direction:t})}},l.createElement("div",{className:"k-resize-handle k-resize-"+t,style:{display:"block",touchAction:"none",userSelect:"none"}})))))}}class x extends l.Component{shouldComponentUpdate(t){return t.shouldUpdateOnDrag||!t.isDragging}render(){return this.props.children}}const L=t=>{const e={layout:"end",...t},{layout:i,children:o}=e,s=a.classNames("k-actions","k-window-actions","k-actions-horizontal","k-hstack",{"k-justify-content-start":"start"===i,"k-justify-content-center":"center"===i,"k-justify-content-end":"end"===i,"k-justify-content-stretch":"stretched"===i});return l.createElement("div",{className:s},o)};L.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const M=(t,e,i)=>{let o=t;if(e&&e.defaultView){const t=e.querySelectorAll(".k-window:not(.k-dialog), .k-dialog-wrapper");let s=!1;return t.forEach((t=>{const n=e.defaultView.getComputedStyle(t,null);if(t.getAttribute(u)!==i&&null!==n.zIndex){const t=parseInt(n.zIndex,10);t>=o&&(o=t,s=!0)}})),s?o+2:o}return o},N=class extends l.Component{constructor(t){super(t),this.context=0,this.draggable=null,this.offSetCoordinates={x:0,y:0},this.titleId=this.generateTitleId(),this.mounted=!1,this.activeElement=null,this.onKeyDown=t=>{if(this.props.modal&&a.keepFocusInContainer(t,this.element),t.target!==t.currentTarget)return;const e=this.props.minWidth||120,i=this.props.minHeight||100;if((t.metaKey||t.ctrlKey)&&this.props.resizable){switch(t.keyCode){case a.Keys.up:t.preventDefault(),i<=this.height-5&&this.setState({height:this.height-5});break;case a.Keys.down:t.preventDefault(),this.setState({height:this.height+5});break;case a.Keys.left:e<=this.width-5&&this.setState({width:this.width-5});break;case a.Keys.right:this.setState({width:this.width+5});break;default:return}this.dispatchMoveEvent(this.props.onResize,t,!1,void 0)}else if(t.altKey)switch(t.keyCode){case a.Keys.up:this.windowStage===C.MINIMIZED?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})):this.windowStage===C.DEFAULT&&(this.handleFullscreen(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.FULLSCREEN}));break;case a.Keys.down:this.windowStage===C.FULLSCREEN?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})):this.windowStage===C.DEFAULT&&(this.handleMinimize(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.MINIMIZED}))}else{if(!t.ctrlKey)switch(t.keyCode){case a.Keys.esc:return void(this.props.onClose&&this.handleCloseWindow(t));case a.Keys.up:this.setState((t=>({top:t.top-5})));break;case a.Keys.down:this.setState((t=>({top:t.top+5})));break;case a.Keys.left:this.setState((t=>({left:t.left-5})));break;case a.Keys.right:this.setState((t=>({left:t.left+5})));break;default:return}this.dispatchMoveEvent(this.props.onMove,t,!1,void 0)}},this.onPress=t=>{const e=t.event;this.windowCoordinatesState.differenceLeft=e.pageX-this.left,this.windowCoordinatesState.differenceTop=e.pageY-this.top},this.onDrag=t=>{const e=t.event;e.originalEvent.preventDefault(),this.windowStage!==C.FULLSCREEN&&this.props.draggable&&(this.setState({top:Math.max(e.pageY-this.windowCoordinatesState.differenceTop,0),left:e.pageX-this.windowCoordinatesState.differenceLeft,isDragging:!0}),this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!1))},this.onRelease=t=>{const e=t.event;this.windowStage!==C.FULLSCREEN&&this.props.draggable&&this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!0),this.setState({isDragging:!1})},this.onFocus=()=>{this._blurTimeout?(clearTimeout(this._blurTimeout),this._blurTimeout=void 0):this.setState({focused:!0,zIndex:M(this.getCurrentZIndex(),this.getDocument(),this._id)})},this.onBlur=()=>{clearTimeout(this._blurTimeout);const t=this.getWindow();t&&(this._blurTimeout=t.setTimeout((()=>{this.mounted&&this.setState({focused:!1}),this._blurTimeout=void 0})))},this.getInitialTop=()=>{if(void 0!==this.props.top)return this.props.top;if(void 0!==this.props.initialTop)return this.props.initialTop;let t=300;if(void 0!==this.props.height?t=this.props.height:void 0!==this.props.initialHeight&&(t=this.props.initialHeight),this.props.appendTo)return this.props.appendTo.offsetHeight/2-t/2;const e=this.getWindow();return e?e.innerHeight/2-t/2:0},this.getInitialLeft=()=>{if(void 0!==this.props.left)return this.props.left;if(void 0!==this.props.initialLeft)return this.props.initialLeft;let t=300;if(void 0!==this.props.width?t=this.props.width:void 0!==this.props.initialWidth&&(t=this.props.initialWidth),this.props.appendTo)return this.props.appendTo.offsetWidth/2-t/2;const e=this.getWindow();return e?e.innerWidth/2-t/2:0},this.getInitialWidth=()=>{let t=300;return void 0!==this.props.width?t=this.props.width:void 0!==this.props.initialWidth&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=300;return void 0!==this.props.height?t=this.props.height:void 0!==this.props.initialHeight&&(t=this.props.initialHeight),t},this.handleMinimize=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height,this.setState({stage:C.MINIMIZED,height:0}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.MINIMIZED})},this.handleFullscreen=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height;const e=this.getWindow(),i=e?e.innerWidth:0,o=e?e.innerHeight:0;this.setState({left:0,top:0,width:this.props.appendTo?this.props.appendTo.offsetWidth:i,height:this.props.appendTo?this.props.appendTo.offsetHeight:o,stage:C.FULLSCREEN}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===C.FULLSCREEN?this.setState({stage:C.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===C.MINIMIZED&&this.setState({stage:C.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),a.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===C.FULLSCREEN||this.windowStage===C.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{const i=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,o=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,s=this.width,n=this.height,a=this.props.minWidth||120,r=this.props.minHeight||100,h=this.top-o,l=this.left-i,d=i-this.left,c=o-this.top,p=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&r-(n+h)<0&&(this.top>0&&(p.height=n+h),p.top=o),e.direction.indexOf("s")>=0&&r-c<0&&(p.height=c),e.direction.indexOf("w")>=0&&a-(s+l)<0&&(this.left>0&&(p.width=s+l),p.left=i),e.direction.indexOf("e")>=0&&a-d<0&&(p.width=d),this.setState(p),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,i,o)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:i,end:o,target:this,left:this.state.left,top:this.state.top,width:this.state.width,hight:this.state.height,height:this.state.height})},this.handleBrowserWindowResize=()=>{if(this.windowStage===C.FULLSCREEN){const t=this.getWindow(),e=t?t.innerWidth:0,i=t?t.innerHeight:0;this.setState({width:this.props.appendTo?this.props.appendTo.offsetWidth:e,height:this.props.appendTo?this.props.appendTo.offsetHeight:i})}},this.getCurrentZIndex=()=>this.state&&void 0!==this.context?this.state.zIndex>(this.context?this.context+2:0)?this.state.zIndex:this.context+2:this.context?this.context:g,this.getDocument=()=>{const t=a.canUseDOM?document:null;return this.props.appendTo?this.props.appendTo.ownerDocument:t},this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},this.state={stage:this.props.stage||C.DEFAULT,isDragging:!1,top:0,left:0,width:300,height:300,focused:!0,zIndex:g},a.canUseDOM&&(this.activeElement=document.activeElement)}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){this.element&&this.props.autoFocus&&this.element.focus({preventScroll:!0});const t=this.getWindow();t&&t.addEventListener("resize",this.handleBrowserWindowResize),this.setState({stage:this.props.stage||C.DEFAULT,isDragging:!1,top:this.getInitialTop(),left:this.getInitialLeft(),width:this.getInitialWidth(),height:this.getInitialHeight(),focused:!0,zIndex:M(this.getCurrentZIndex(),this.getDocument(),this._id)}),this.windowCoordinatesState={leftBeforeAction:this.getInitialLeft(),topBeforeAction:this.getInitialTop(),widthBeforeAction:this.getInitialWidth(),heightBeforeAction:this.getInitialHeight()};const e=this.getDocument();if(this.props.appendTo&&e){const t=this.props.appendTo.getBoundingClientRect(),i=e.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-i.left,this.offSetCoordinates.y=t.top-i.top}this.mounted=!0}componentWillUnmount(){const t=this.getWindow();t&&t.removeEventListener("resize",this.handleBrowserWindowResize),this.mounted=!1,setTimeout((()=>{var t;!this.element&&this.activeElement&&a.canUseDOM&&(document.contains(this.activeElement)?this.activeElement.focus({preventScroll:!0}):this.activeElement.id&&(null==(t=document.getElementById(this.activeElement.id))||t.focus({preventScroll:!0})))}))}componentDidUpdate(t){this.props.left&&t.left!==this.props.left&&this.setState({left:this.props.left}),this.props.top&&t.top!==this.props.top&&this.setState({top:this.props.top});const e=this.getDocument();if(this.props.appendTo&&e){const t=this.props.appendTo.getBoundingClientRect(),i=e.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-i.left,this.offSetCoordinates.y=t.top-i.top}this.mounted=!0}render(){const t=l.Children.toArray(this.props.children),e=this.getContent(t),i=this.getActionBar(t),o=this.getCurrentZIndex(),s=a.classNames("k-window",this.props.className,{[`k-window-${this.props.themeColor}`]:this.props.themeColor,"k-window-minimized":"MINIMIZED"===this.state.stage,"k-focus":this.state.focused}),n=l.createElement(a.ZIndexContext.Provider,{value:o},l.createElement(l.Fragment,null,this.props.modal&&l.createElement("div",{className:"k-overlay",style:{zIndex:o,...this.props.overlayStyle}}),l.createElement("div",{id:this.props.id,[u]:this._id,tabIndex:0,role:"dialog","aria-labelledby":this.titleId,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,ref:t=>{this.windowElement=t,this.element=t},className:s,style:{top:this.top,left:this.left,width:this.width,height:this.height||"",zIndex:o,...this.props.style}},l.createElement(x,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},l.createElement(a.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,autoScroll:!1,ref:t=>{this.draggable=t}},l.createElement(D,{stage:this.windowStage,onDoubleClick:this.props.doubleClickStageChange?this.handleDoubleClick:void 0,onMinimizeButtonClick:this.handleMinimize,onFullScreenButtonClick:this.handleFullscreen,onRestoreButtonClick:this.handleRestore,onCloseButtonClick:this.handleCloseWindow,closeButton:this.props.closeButton,minimizeButton:this.props.minimizeButton,maximizeButton:this.props.maximizeButton,restoreButton:this.props.restoreButton,id:this.titleId},this.props.title)),this.windowStage!==C.MINIMIZED?l.createElement(l.Fragment,null,l.createElement("div",{className:"k-window-content"},e),i):null,this.windowStage===C.DEFAULT&&this.props.resizable?l.createElement(B,{onResize:this.handleResize}):null))));return a.canUseDOM?null!==this.props.appendTo?d.createPortal(n,this.props.appendTo||document.body):n:null}get top(){return this.windowStage!==C.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==C.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let t=this.props.width||this.state.width;if(this.windowStage===C.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetWidth,t;const e=this.getWindow();t=e?e.innerWidth:0}return t}get height(){let t=this.props.height||this.state.height;if(this.windowStage===C.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetHeight,t;const e=this.getWindow();t=e?e.innerHeight:0}else this.windowStage===C.MINIMIZED&&(t=0);return t}get windowStage(){return this.props.stage||this.state.stage}getActionBar(t){return t.filter((t=>t&&t.type===L))}getContent(t){return t.filter((t=>t&&t.type!==L))}generateTitleId(){return"window-title-"+this._id}};N.displayName="Window",N.propTypes={width:o.number,height:o.number,left:o.number,top:o.number,initialWidth:o.number,initialHeight:o.number,initialLeft:o.number,initialTop:o.number,minWidth:o.number,minHeight:o.number,resizable:o.bool,draggable:o.bool,title:o.any,shouldUpdateOnDrag:o.bool,stage:o.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),className:o.string,id:o.string,style:o.object,overlayStyle:o.object,autoFocus:o.bool},N.defaultProps={minWidth:120,minHeight:100,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0,autoFocus:!0},N.contextType=a.ZIndexContext;let R=N;const F=a.createPropsContext(),z=a.withIdHOC(a.withPropsContext(F,R));z.displayName="KendoReactWindow",t.Dialog=w,t.DialogActionsBar=p,t.DialogPropsContext=m,t.Window=z,t.WindowActionsBar=L,t.WindowPropsContext=F,t.WindowWithoutContext=R}));
|
package/index.d.mts
CHANGED
|
@@ -18,9 +18,6 @@ import { ZIndexContextType } from '@progress/kendo-react-common';
|
|
|
18
18
|
*/
|
|
19
19
|
export declare type ActionsLayout = 'start' | 'center' | 'end' | 'stretched';
|
|
20
20
|
|
|
21
|
-
/** @hidden */
|
|
22
|
-
export declare type Dialog = DialogHandle;
|
|
23
|
-
|
|
24
21
|
/**
|
|
25
22
|
* Represents the [KendoReact Dialog component]({% slug overview_dialog %}).
|
|
26
23
|
*
|
|
@@ -30,7 +27,7 @@ export declare type Dialog = DialogHandle;
|
|
|
30
27
|
* @remarks
|
|
31
28
|
* Supported children components are: {@link DialogActionsBar}.
|
|
32
29
|
*/
|
|
33
|
-
export declare const Dialog: React_2.ForwardRefExoticComponent<DialogProps & React_2.RefAttributes<
|
|
30
|
+
export declare const Dialog: React_2.ForwardRefExoticComponent<DialogProps & React_2.RefAttributes<DialogHandle | null>>;
|
|
34
31
|
|
|
35
32
|
/**
|
|
36
33
|
* Returns the action bar of the Dialog.
|
|
@@ -56,13 +53,21 @@ declare interface DialogActionsBarProps {
|
|
|
56
53
|
/**
|
|
57
54
|
* @hidden
|
|
58
55
|
*/
|
|
59
|
-
export declare interface DialogCloseEvent extends BaseEvent<
|
|
56
|
+
export declare interface DialogCloseEvent extends BaseEvent<DialogHandle> {
|
|
60
57
|
}
|
|
61
58
|
|
|
62
59
|
/**
|
|
63
60
|
* Represent the `ref` of the Dialog component.
|
|
64
61
|
*/
|
|
65
|
-
export declare interface DialogHandle
|
|
62
|
+
export declare interface DialogHandle {
|
|
63
|
+
/**
|
|
64
|
+
* The current element or `null` if there is no one.
|
|
65
|
+
*/
|
|
66
|
+
element: HTMLDivElement | null;
|
|
67
|
+
/**
|
|
68
|
+
* The props of the Dialog component.
|
|
69
|
+
*/
|
|
70
|
+
props: DialogProps;
|
|
66
71
|
}
|
|
67
72
|
|
|
68
73
|
/**
|
|
@@ -240,78 +245,6 @@ export declare interface DialogProps {
|
|
|
240
245
|
*/
|
|
241
246
|
export declare const DialogPropsContext: React_2.Context<(p: DialogProps) => DialogProps>;
|
|
242
247
|
|
|
243
|
-
declare interface DialogState {
|
|
244
|
-
zIndex: number;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
/** @hidden */
|
|
248
|
-
declare class DialogWithoutContext extends React_2.Component<DialogProps, DialogState> {
|
|
249
|
-
static displayName: string;
|
|
250
|
-
/**
|
|
251
|
-
* @hidden
|
|
252
|
-
*/
|
|
253
|
-
static propTypes: {
|
|
254
|
-
title: default_2.Requireable<any>;
|
|
255
|
-
id: default_2.Requireable<string>;
|
|
256
|
-
dir: default_2.Requireable<string>;
|
|
257
|
-
style: default_2.Requireable<object>;
|
|
258
|
-
closeIcon: default_2.Requireable<boolean>;
|
|
259
|
-
width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
|
|
260
|
-
height: default_2.Requireable<NonNullable<string | number | null | undefined>>;
|
|
261
|
-
minWidth: default_2.Requireable<NonNullable<string | number | null | undefined>>;
|
|
262
|
-
autoFocus: default_2.Requireable<boolean>;
|
|
263
|
-
};
|
|
264
|
-
/**
|
|
265
|
-
* @hidden
|
|
266
|
-
*/
|
|
267
|
-
static defaultProps: {
|
|
268
|
-
autoFocus: boolean;
|
|
269
|
-
};
|
|
270
|
-
/**
|
|
271
|
-
* @hidden
|
|
272
|
-
*/
|
|
273
|
-
static contextType: React_2.Context<ZIndexContextType>;
|
|
274
|
-
/**
|
|
275
|
-
* @hidden
|
|
276
|
-
*/
|
|
277
|
-
context: React_2.ContextType<typeof ZIndexContext>;
|
|
278
|
-
/**
|
|
279
|
-
* @hidden
|
|
280
|
-
*/
|
|
281
|
-
element?: HTMLDivElement | null;
|
|
282
|
-
private get _id();
|
|
283
|
-
private titleId;
|
|
284
|
-
private contentId;
|
|
285
|
-
private activeElement;
|
|
286
|
-
constructor(props: DialogProps);
|
|
287
|
-
/**
|
|
288
|
-
* @hidden
|
|
289
|
-
*/
|
|
290
|
-
componentDidMount(): void;
|
|
291
|
-
/**
|
|
292
|
-
* @hidden
|
|
293
|
-
*/
|
|
294
|
-
componentWillUnmount(): void;
|
|
295
|
-
/**
|
|
296
|
-
* @hidden
|
|
297
|
-
*/
|
|
298
|
-
onCloseDialog: (event: React_2.SyntheticEvent<any>) => void;
|
|
299
|
-
/**
|
|
300
|
-
* @hidden
|
|
301
|
-
*/
|
|
302
|
-
onKeyDown: React_2.KeyboardEventHandler<HTMLDivElement>;
|
|
303
|
-
/**
|
|
304
|
-
* @hidden
|
|
305
|
-
*/
|
|
306
|
-
render(): JSX.Element | null;
|
|
307
|
-
private getActionBar;
|
|
308
|
-
private getContent;
|
|
309
|
-
private generateTitleId;
|
|
310
|
-
private generateContentId;
|
|
311
|
-
private getCurrentZIndex;
|
|
312
|
-
private getDocument;
|
|
313
|
-
}
|
|
314
|
-
|
|
315
248
|
/** @hidden */
|
|
316
249
|
declare type Window_2 = WindowHandle;
|
|
317
250
|
|
package/index.d.ts
CHANGED
|
@@ -18,9 +18,6 @@ import { ZIndexContextType } from '@progress/kendo-react-common';
|
|
|
18
18
|
*/
|
|
19
19
|
export declare type ActionsLayout = 'start' | 'center' | 'end' | 'stretched';
|
|
20
20
|
|
|
21
|
-
/** @hidden */
|
|
22
|
-
export declare type Dialog = DialogHandle;
|
|
23
|
-
|
|
24
21
|
/**
|
|
25
22
|
* Represents the [KendoReact Dialog component]({% slug overview_dialog %}).
|
|
26
23
|
*
|
|
@@ -30,7 +27,7 @@ export declare type Dialog = DialogHandle;
|
|
|
30
27
|
* @remarks
|
|
31
28
|
* Supported children components are: {@link DialogActionsBar}.
|
|
32
29
|
*/
|
|
33
|
-
export declare const Dialog: React_2.ForwardRefExoticComponent<DialogProps & React_2.RefAttributes<
|
|
30
|
+
export declare const Dialog: React_2.ForwardRefExoticComponent<DialogProps & React_2.RefAttributes<DialogHandle | null>>;
|
|
34
31
|
|
|
35
32
|
/**
|
|
36
33
|
* Returns the action bar of the Dialog.
|
|
@@ -56,13 +53,21 @@ declare interface DialogActionsBarProps {
|
|
|
56
53
|
/**
|
|
57
54
|
* @hidden
|
|
58
55
|
*/
|
|
59
|
-
export declare interface DialogCloseEvent extends BaseEvent<
|
|
56
|
+
export declare interface DialogCloseEvent extends BaseEvent<DialogHandle> {
|
|
60
57
|
}
|
|
61
58
|
|
|
62
59
|
/**
|
|
63
60
|
* Represent the `ref` of the Dialog component.
|
|
64
61
|
*/
|
|
65
|
-
export declare interface DialogHandle
|
|
62
|
+
export declare interface DialogHandle {
|
|
63
|
+
/**
|
|
64
|
+
* The current element or `null` if there is no one.
|
|
65
|
+
*/
|
|
66
|
+
element: HTMLDivElement | null;
|
|
67
|
+
/**
|
|
68
|
+
* The props of the Dialog component.
|
|
69
|
+
*/
|
|
70
|
+
props: DialogProps;
|
|
66
71
|
}
|
|
67
72
|
|
|
68
73
|
/**
|
|
@@ -240,78 +245,6 @@ export declare interface DialogProps {
|
|
|
240
245
|
*/
|
|
241
246
|
export declare const DialogPropsContext: React_2.Context<(p: DialogProps) => DialogProps>;
|
|
242
247
|
|
|
243
|
-
declare interface DialogState {
|
|
244
|
-
zIndex: number;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
/** @hidden */
|
|
248
|
-
declare class DialogWithoutContext extends React_2.Component<DialogProps, DialogState> {
|
|
249
|
-
static displayName: string;
|
|
250
|
-
/**
|
|
251
|
-
* @hidden
|
|
252
|
-
*/
|
|
253
|
-
static propTypes: {
|
|
254
|
-
title: default_2.Requireable<any>;
|
|
255
|
-
id: default_2.Requireable<string>;
|
|
256
|
-
dir: default_2.Requireable<string>;
|
|
257
|
-
style: default_2.Requireable<object>;
|
|
258
|
-
closeIcon: default_2.Requireable<boolean>;
|
|
259
|
-
width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
|
|
260
|
-
height: default_2.Requireable<NonNullable<string | number | null | undefined>>;
|
|
261
|
-
minWidth: default_2.Requireable<NonNullable<string | number | null | undefined>>;
|
|
262
|
-
autoFocus: default_2.Requireable<boolean>;
|
|
263
|
-
};
|
|
264
|
-
/**
|
|
265
|
-
* @hidden
|
|
266
|
-
*/
|
|
267
|
-
static defaultProps: {
|
|
268
|
-
autoFocus: boolean;
|
|
269
|
-
};
|
|
270
|
-
/**
|
|
271
|
-
* @hidden
|
|
272
|
-
*/
|
|
273
|
-
static contextType: React_2.Context<ZIndexContextType>;
|
|
274
|
-
/**
|
|
275
|
-
* @hidden
|
|
276
|
-
*/
|
|
277
|
-
context: React_2.ContextType<typeof ZIndexContext>;
|
|
278
|
-
/**
|
|
279
|
-
* @hidden
|
|
280
|
-
*/
|
|
281
|
-
element?: HTMLDivElement | null;
|
|
282
|
-
private get _id();
|
|
283
|
-
private titleId;
|
|
284
|
-
private contentId;
|
|
285
|
-
private activeElement;
|
|
286
|
-
constructor(props: DialogProps);
|
|
287
|
-
/**
|
|
288
|
-
* @hidden
|
|
289
|
-
*/
|
|
290
|
-
componentDidMount(): void;
|
|
291
|
-
/**
|
|
292
|
-
* @hidden
|
|
293
|
-
*/
|
|
294
|
-
componentWillUnmount(): void;
|
|
295
|
-
/**
|
|
296
|
-
* @hidden
|
|
297
|
-
*/
|
|
298
|
-
onCloseDialog: (event: React_2.SyntheticEvent<any>) => void;
|
|
299
|
-
/**
|
|
300
|
-
* @hidden
|
|
301
|
-
*/
|
|
302
|
-
onKeyDown: React_2.KeyboardEventHandler<HTMLDivElement>;
|
|
303
|
-
/**
|
|
304
|
-
* @hidden
|
|
305
|
-
*/
|
|
306
|
-
render(): JSX.Element | null;
|
|
307
|
-
private getActionBar;
|
|
308
|
-
private getContent;
|
|
309
|
-
private generateTitleId;
|
|
310
|
-
private generateContentId;
|
|
311
|
-
private getCurrentZIndex;
|
|
312
|
-
private getDocument;
|
|
313
|
-
}
|
|
314
|
-
|
|
315
248
|
/** @hidden */
|
|
316
249
|
declare type Window_2 = WindowHandle;
|
|
317
250
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-dialogs",
|
|
3
|
-
"version": "11.0.0
|
|
3
|
+
"version": "11.0.0",
|
|
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",
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
},
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@progress/kendo-licensing": "^1.
|
|
29
|
-
"@progress/kendo-react-buttons": "11.0.0
|
|
30
|
-
"@progress/kendo-react-common": "11.0.0
|
|
31
|
-
"@progress/kendo-react-intl": "11.0.0
|
|
28
|
+
"@progress/kendo-licensing": "^1.6.0",
|
|
29
|
+
"@progress/kendo-react-buttons": "11.0.0",
|
|
30
|
+
"@progress/kendo-react-common": "11.0.0",
|
|
31
|
+
"@progress/kendo-react-intl": "11.0.0",
|
|
32
32
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
33
33
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
34
34
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
@@ -53,7 +53,22 @@
|
|
|
53
53
|
],
|
|
54
54
|
"@progress": {
|
|
55
55
|
"friendlyName": "Dialogs",
|
|
56
|
-
"framework": "KendoReact"
|
|
56
|
+
"framework": "KendoReact",
|
|
57
|
+
"migrations": {
|
|
58
|
+
"options": {
|
|
59
|
+
"parser": "tsx",
|
|
60
|
+
"pattern": "*.{js,jsx,ts,tsx}"
|
|
61
|
+
},
|
|
62
|
+
"codemods": {
|
|
63
|
+
"11": [
|
|
64
|
+
{
|
|
65
|
+
"description": "Migrate the Dialog type to the new DialogHandle type.",
|
|
66
|
+
"file": "codemods/v11/dialog-handle.js",
|
|
67
|
+
"prompt": true
|
|
68
|
+
}
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
}
|
|
57
72
|
},
|
|
58
73
|
"repository": {
|
|
59
74
|
"type": "git",
|