@itwin/itwinui-react 2.11.9 → 2.11.11
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/CHANGELOG.md +14 -0
- package/cjs/core/Dialog/DialogContent.js +12 -1
- package/cjs/core/Dialog/DialogMain.js +0 -1
- package/cjs/core/utils/components/Resizer.js +21 -13
- package/esm/core/Dialog/DialogContent.js +13 -2
- package/esm/core/Dialog/DialogMain.js +0 -1
- package/esm/core/utils/components/Resizer.js +21 -13
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.11.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#3](https://github.com/iTwin/iTwinUI/pull/3): Fix resizable Dialog bug where Dialog jumped around the screen when resized on right side.
|
|
8
|
+
|
|
9
|
+
## 2.11.10
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#1424](https://github.com/iTwin/iTwinUI/pull/1424), [#1427](https://github.com/iTwin/iTwinUI/pull/1427): Fixed a few different resizing issues in Dialog.
|
|
14
|
+
- Updated dependencies:
|
|
15
|
+
- @itwin/itwinui-css@1.11.5
|
|
16
|
+
|
|
3
17
|
## 2.11.9
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -44,7 +44,18 @@ require("@itwin/itwinui-css/css/dialog.css");
|
|
|
44
44
|
*/
|
|
45
45
|
exports.DialogContent = React.forwardRef((props, ref) => {
|
|
46
46
|
const { children, className, ...rest } = props;
|
|
47
|
+
const contentRef = React.useRef(null);
|
|
47
48
|
(0, index_js_1.useTheme)();
|
|
48
|
-
|
|
49
|
+
React.useEffect(() => {
|
|
50
|
+
var _a;
|
|
51
|
+
// firefox hack for adding data-iui-flex in absence of :has
|
|
52
|
+
if (!(0, index_js_1.supportsHas)()) {
|
|
53
|
+
const dialog = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.closest('[role=dialog]');
|
|
54
|
+
if (dialog instanceof HTMLElement) {
|
|
55
|
+
dialog.dataset.iuiFlex = 'true';
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}, []);
|
|
59
|
+
return (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-content', className), ref: (0, index_js_1.useMergedRefs)(contentRef, ref), ...rest }, children));
|
|
49
60
|
});
|
|
50
61
|
exports.default = exports.DialogContent;
|
|
@@ -145,7 +145,6 @@ exports.DialogMain = React.forwardRef((props, ref) => {
|
|
|
145
145
|
'iui-dialog-draggable': isDraggable,
|
|
146
146
|
}, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
|
|
147
147
|
transform,
|
|
148
|
-
overflow: 'unset',
|
|
149
148
|
...style,
|
|
150
149
|
...propStyle,
|
|
151
150
|
}, ...rest },
|
|
@@ -57,7 +57,10 @@ const Resizer = (props) => {
|
|
|
57
57
|
let height = `${initialHeight}px`;
|
|
58
58
|
let translateX = initialTranslateX;
|
|
59
59
|
let translateY = initialTranslateY;
|
|
60
|
-
|
|
60
|
+
let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
|
|
61
|
+
if (Number.isNaN(minWidth)) {
|
|
62
|
+
minWidth = 380;
|
|
63
|
+
}
|
|
61
64
|
const minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
|
|
62
65
|
const resizer = event.currentTarget.dataset.iuiResizer;
|
|
63
66
|
const ownerDocument = elementRef.current.ownerDocument || document;
|
|
@@ -114,15 +117,19 @@ const Resizer = (props) => {
|
|
|
114
117
|
}
|
|
115
118
|
case 'right': {
|
|
116
119
|
width = elementRef.current.style.width = `${initialWidth - diffX}px`;
|
|
120
|
+
height = elementRef.current.style.height = `${initialHeight}px`;
|
|
121
|
+
elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
|
|
117
122
|
break;
|
|
118
123
|
}
|
|
119
124
|
case 'bottom-right': {
|
|
120
125
|
width = elementRef.current.style.width = `${initialWidth - diffX}px`;
|
|
121
126
|
height = elementRef.current.style.height = `${initialHeight - diffY}px`;
|
|
127
|
+
elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
|
|
122
128
|
break;
|
|
123
129
|
}
|
|
124
130
|
case 'bottom': {
|
|
125
131
|
height = elementRef.current.style.height = `${initialHeight - diffY}px`;
|
|
132
|
+
elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
|
|
126
133
|
break;
|
|
127
134
|
}
|
|
128
135
|
case 'bottom-left': {
|
|
@@ -141,6 +148,7 @@ const Resizer = (props) => {
|
|
|
141
148
|
break;
|
|
142
149
|
}
|
|
143
150
|
width = elementRef.current.style.width = `${newWidth}px`;
|
|
151
|
+
height = elementRef.current.style.height = `${initialHeight}px`;
|
|
144
152
|
translateX = initialTranslateX - diffX;
|
|
145
153
|
elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
|
|
146
154
|
break;
|
|
@@ -166,15 +174,15 @@ const Resizer = (props) => {
|
|
|
166
174
|
return (React.createElement(React.Fragment, null,
|
|
167
175
|
React.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: {
|
|
168
176
|
position: 'absolute',
|
|
169
|
-
top:
|
|
170
|
-
left:
|
|
177
|
+
top: 0,
|
|
178
|
+
left: 0,
|
|
171
179
|
width: 12,
|
|
172
180
|
height: 12,
|
|
173
181
|
cursor: 'nw-resize',
|
|
174
182
|
} }),
|
|
175
183
|
React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: {
|
|
176
184
|
position: 'absolute',
|
|
177
|
-
top:
|
|
185
|
+
top: 0,
|
|
178
186
|
left: 8,
|
|
179
187
|
right: 8,
|
|
180
188
|
height: 8,
|
|
@@ -182,8 +190,8 @@ const Resizer = (props) => {
|
|
|
182
190
|
} }),
|
|
183
191
|
React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: {
|
|
184
192
|
position: 'absolute',
|
|
185
|
-
top:
|
|
186
|
-
right:
|
|
193
|
+
top: 0,
|
|
194
|
+
right: 0,
|
|
187
195
|
width: 12,
|
|
188
196
|
height: 12,
|
|
189
197
|
cursor: 'ne-resize',
|
|
@@ -191,22 +199,22 @@ const Resizer = (props) => {
|
|
|
191
199
|
React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: {
|
|
192
200
|
position: 'absolute',
|
|
193
201
|
top: 8,
|
|
194
|
-
right:
|
|
202
|
+
right: 0,
|
|
195
203
|
bottom: 8,
|
|
196
204
|
width: 8,
|
|
197
205
|
cursor: 'e-resize',
|
|
198
206
|
} }),
|
|
199
207
|
React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: {
|
|
200
208
|
position: 'absolute',
|
|
201
|
-
bottom:
|
|
202
|
-
right:
|
|
209
|
+
bottom: 0,
|
|
210
|
+
right: 0,
|
|
203
211
|
width: 12,
|
|
204
212
|
height: 12,
|
|
205
213
|
cursor: 'se-resize',
|
|
206
214
|
} }),
|
|
207
215
|
React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: {
|
|
208
216
|
position: 'absolute',
|
|
209
|
-
bottom:
|
|
217
|
+
bottom: 0,
|
|
210
218
|
left: 8,
|
|
211
219
|
right: 8,
|
|
212
220
|
height: 8,
|
|
@@ -214,8 +222,8 @@ const Resizer = (props) => {
|
|
|
214
222
|
} }),
|
|
215
223
|
React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: {
|
|
216
224
|
position: 'absolute',
|
|
217
|
-
bottom:
|
|
218
|
-
left:
|
|
225
|
+
bottom: 0,
|
|
226
|
+
left: 0,
|
|
219
227
|
width: 12,
|
|
220
228
|
height: 12,
|
|
221
229
|
cursor: 'sw-resize',
|
|
@@ -223,7 +231,7 @@ const Resizer = (props) => {
|
|
|
223
231
|
React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: {
|
|
224
232
|
position: 'absolute',
|
|
225
233
|
top: 8,
|
|
226
|
-
left:
|
|
234
|
+
left: 0,
|
|
227
235
|
bottom: 8,
|
|
228
236
|
width: 8,
|
|
229
237
|
cursor: 'w-resize',
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import cx from 'classnames';
|
|
7
|
-
import { useTheme } from '../utils/index.js';
|
|
7
|
+
import { supportsHas, useMergedRefs, useTheme } from '../utils/index.js';
|
|
8
8
|
import '@itwin/itwinui-css/css/dialog.css';
|
|
9
9
|
/**
|
|
10
10
|
* Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
|
|
@@ -15,7 +15,18 @@ import '@itwin/itwinui-css/css/dialog.css';
|
|
|
15
15
|
*/
|
|
16
16
|
export const DialogContent = React.forwardRef((props, ref) => {
|
|
17
17
|
const { children, className, ...rest } = props;
|
|
18
|
+
const contentRef = React.useRef(null);
|
|
18
19
|
useTheme();
|
|
19
|
-
|
|
20
|
+
React.useEffect(() => {
|
|
21
|
+
var _a;
|
|
22
|
+
// firefox hack for adding data-iui-flex in absence of :has
|
|
23
|
+
if (!supportsHas()) {
|
|
24
|
+
const dialog = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.closest('[role=dialog]');
|
|
25
|
+
if (dialog instanceof HTMLElement) {
|
|
26
|
+
dialog.dataset.iuiFlex = 'true';
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}, []);
|
|
30
|
+
return (React.createElement("div", { className: cx('iui-dialog-content', className), ref: useMergedRefs(contentRef, ref), ...rest }, children));
|
|
20
31
|
});
|
|
21
32
|
export default DialogContent;
|
|
@@ -116,7 +116,6 @@ export const DialogMain = React.forwardRef((props, ref) => {
|
|
|
116
116
|
'iui-dialog-draggable': isDraggable,
|
|
117
117
|
}, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
|
|
118
118
|
transform,
|
|
119
|
-
overflow: 'unset',
|
|
120
119
|
...style,
|
|
121
120
|
...propStyle,
|
|
122
121
|
}, ...rest },
|
|
@@ -31,7 +31,10 @@ export const Resizer = (props) => {
|
|
|
31
31
|
let height = `${initialHeight}px`;
|
|
32
32
|
let translateX = initialTranslateX;
|
|
33
33
|
let translateY = initialTranslateY;
|
|
34
|
-
|
|
34
|
+
let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
|
|
35
|
+
if (Number.isNaN(minWidth)) {
|
|
36
|
+
minWidth = 380;
|
|
37
|
+
}
|
|
35
38
|
const minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
|
|
36
39
|
const resizer = event.currentTarget.dataset.iuiResizer;
|
|
37
40
|
const ownerDocument = elementRef.current.ownerDocument || document;
|
|
@@ -88,15 +91,19 @@ export const Resizer = (props) => {
|
|
|
88
91
|
}
|
|
89
92
|
case 'right': {
|
|
90
93
|
width = elementRef.current.style.width = `${initialWidth - diffX}px`;
|
|
94
|
+
height = elementRef.current.style.height = `${initialHeight}px`;
|
|
95
|
+
elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
|
|
91
96
|
break;
|
|
92
97
|
}
|
|
93
98
|
case 'bottom-right': {
|
|
94
99
|
width = elementRef.current.style.width = `${initialWidth - diffX}px`;
|
|
95
100
|
height = elementRef.current.style.height = `${initialHeight - diffY}px`;
|
|
101
|
+
elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
|
|
96
102
|
break;
|
|
97
103
|
}
|
|
98
104
|
case 'bottom': {
|
|
99
105
|
height = elementRef.current.style.height = `${initialHeight - diffY}px`;
|
|
106
|
+
elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
|
|
100
107
|
break;
|
|
101
108
|
}
|
|
102
109
|
case 'bottom-left': {
|
|
@@ -115,6 +122,7 @@ export const Resizer = (props) => {
|
|
|
115
122
|
break;
|
|
116
123
|
}
|
|
117
124
|
width = elementRef.current.style.width = `${newWidth}px`;
|
|
125
|
+
height = elementRef.current.style.height = `${initialHeight}px`;
|
|
118
126
|
translateX = initialTranslateX - diffX;
|
|
119
127
|
elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
|
|
120
128
|
break;
|
|
@@ -140,15 +148,15 @@ export const Resizer = (props) => {
|
|
|
140
148
|
return (React.createElement(React.Fragment, null,
|
|
141
149
|
React.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: {
|
|
142
150
|
position: 'absolute',
|
|
143
|
-
top:
|
|
144
|
-
left:
|
|
151
|
+
top: 0,
|
|
152
|
+
left: 0,
|
|
145
153
|
width: 12,
|
|
146
154
|
height: 12,
|
|
147
155
|
cursor: 'nw-resize',
|
|
148
156
|
} }),
|
|
149
157
|
React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: {
|
|
150
158
|
position: 'absolute',
|
|
151
|
-
top:
|
|
159
|
+
top: 0,
|
|
152
160
|
left: 8,
|
|
153
161
|
right: 8,
|
|
154
162
|
height: 8,
|
|
@@ -156,8 +164,8 @@ export const Resizer = (props) => {
|
|
|
156
164
|
} }),
|
|
157
165
|
React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: {
|
|
158
166
|
position: 'absolute',
|
|
159
|
-
top:
|
|
160
|
-
right:
|
|
167
|
+
top: 0,
|
|
168
|
+
right: 0,
|
|
161
169
|
width: 12,
|
|
162
170
|
height: 12,
|
|
163
171
|
cursor: 'ne-resize',
|
|
@@ -165,22 +173,22 @@ export const Resizer = (props) => {
|
|
|
165
173
|
React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: {
|
|
166
174
|
position: 'absolute',
|
|
167
175
|
top: 8,
|
|
168
|
-
right:
|
|
176
|
+
right: 0,
|
|
169
177
|
bottom: 8,
|
|
170
178
|
width: 8,
|
|
171
179
|
cursor: 'e-resize',
|
|
172
180
|
} }),
|
|
173
181
|
React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: {
|
|
174
182
|
position: 'absolute',
|
|
175
|
-
bottom:
|
|
176
|
-
right:
|
|
183
|
+
bottom: 0,
|
|
184
|
+
right: 0,
|
|
177
185
|
width: 12,
|
|
178
186
|
height: 12,
|
|
179
187
|
cursor: 'se-resize',
|
|
180
188
|
} }),
|
|
181
189
|
React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: {
|
|
182
190
|
position: 'absolute',
|
|
183
|
-
bottom:
|
|
191
|
+
bottom: 0,
|
|
184
192
|
left: 8,
|
|
185
193
|
right: 8,
|
|
186
194
|
height: 8,
|
|
@@ -188,8 +196,8 @@ export const Resizer = (props) => {
|
|
|
188
196
|
} }),
|
|
189
197
|
React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: {
|
|
190
198
|
position: 'absolute',
|
|
191
|
-
bottom:
|
|
192
|
-
left:
|
|
199
|
+
bottom: 0,
|
|
200
|
+
left: 0,
|
|
193
201
|
width: 12,
|
|
194
202
|
height: 12,
|
|
195
203
|
cursor: 'sw-resize',
|
|
@@ -197,7 +205,7 @@ export const Resizer = (props) => {
|
|
|
197
205
|
React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: {
|
|
198
206
|
position: 'absolute',
|
|
199
207
|
top: 8,
|
|
200
|
-
left:
|
|
208
|
+
left: 0,
|
|
201
209
|
bottom: 8,
|
|
202
210
|
width: 8,
|
|
203
211
|
cursor: 'w-resize',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/itwinui-react",
|
|
3
|
-
"version": "2.11.
|
|
3
|
+
"version": "2.11.11",
|
|
4
4
|
"author": "Bentley Systems",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "cjs/index.js",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
|
|
68
68
|
},
|
|
69
69
|
"dependencies": {
|
|
70
|
-
"@itwin/itwinui-css": "^1.11.
|
|
70
|
+
"@itwin/itwinui-css": "^1.11.5",
|
|
71
71
|
"@itwin/itwinui-illustrations-react": "^2.0.0",
|
|
72
72
|
"@itwin/itwinui-variables": "^2.0.0",
|
|
73
73
|
"@tippyjs/react": "^4.2.6",
|