@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.
Files changed (8) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/cjs/core/Dialog/DialogContent.js +12 -1
  3. package/cjs/core/Dialog/DialogMain.js +0 -1
  4. package/cjs/core/utils/components/Resizer.js +21 -13
  5. package/esm/core/Dialog/DialogContent.js +13 -2
  6. package/esm/core/Dialog/DialogMain.js +0 -1
  7. package/esm/core/utils/components/Resizer.js +21 -13
  8. 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
package/cjs/core/Dialog/DialogContent.js CHANGED
@@ -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
- return (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-content', className), ref: ref, ...rest }, children));
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;
package/cjs/core/Dialog/DialogMain.js CHANGED
@@ -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 },
package/cjs/core/utils/components/Resizer.js CHANGED
@@ -57,7 +57,10 @@ const Resizer = (props) => {
57
57
  let height = `${initialHeight}px`;
58
58
  let translateX = initialTranslateX;
59
59
  let translateY = initialTranslateY;
60
- const minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
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: -4,
170
- left: -4,
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: -4,
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: -4,
186
- right: -4,
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: -4,
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: -4,
202
- right: -4,
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: -4,
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: -4,
218
- left: -4,
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: -4,
234
+ left: 0,
227
235
  bottom: 8,
228
236
  width: 8,
229
237
  cursor: 'w-resize',
package/esm/core/Dialog/DialogContent.js CHANGED
@@ -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
- return (React.createElement("div", { className: cx('iui-dialog-content', className), ref: ref, ...rest }, children));
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;
package/esm/core/Dialog/DialogMain.js CHANGED
@@ -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 },
package/esm/core/utils/components/Resizer.js CHANGED
@@ -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
- const minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
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: -4,
144
- left: -4,
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: -4,
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: -4,
160
- right: -4,
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: -4,
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: -4,
176
- right: -4,
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: -4,
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: -4,
192
- left: -4,
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: -4,
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.9",
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.4",
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",