@itwin/itwinui-react 2.11.9 → 2.11.10

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.11.10
+
+### Patch Changes
+
+- [#1434](https://github.com/iTwin/iTwinUI/pull/1434), [#1427](https://github.com/iTwin/iTwinUI/pull/1427): Fixed a few different resizing issues in Dialog.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.11.5
+
 ## 2.11.9
 
 ### Patch Changes

package/cjs/core/Dialog/DialogContent.js

@@ -44,7 +44,18 @@ require("@itwin/itwinui-css/css/dialog.css");
  */
 exports.DialogContent = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
+    const contentRef = React.useRef(null);
     (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-content', className), ref: ref, ...rest }, children));
+    React.useEffect(() => {
+        var _a;
+        // firefox hack for adding data-iui-flex in absence of :has
+        if (!(0, index_js_1.supportsHas)()) {
+            const dialog = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.closest('[role=dialog]');
+            if (dialog instanceof HTMLElement) {
+                dialog.dataset.iuiFlex = 'true';
+            }
+        }
+    }, []);
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-content', className), ref: (0, index_js_1.useMergedRefs)(contentRef, ref), ...rest }, children));
 });
 exports.default = exports.DialogContent;

package/cjs/core/Dialog/DialogMain.js

@@ -145,7 +145,6 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
             transform,
-            overflow: 'unset',
             ...style,
             ...propStyle,
         }, ...rest },

package/cjs/core/utils/components/Resizer.js

@@ -57,7 +57,10 @@ const Resizer = (props) => {
         let height = `${initialHeight}px`;
         let translateX = initialTranslateX;
         let translateY = initialTranslateY;
-        const minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+        let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+        if (Number.isNaN(minWidth)) {
+            minWidth = 380;
+        }
         const minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
         const resizer = event.currentTarget.dataset.iuiResizer;
         const ownerDocument = elementRef.current.ownerDocument || document;
@@ -166,15 +169,15 @@ const Resizer = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
-                top: -4,
-                left: -4,
+                top: 0,
+                left: 0,
                 width: 12,
                 height: 12,
                 cursor: 'nw-resize',
             } }),
         React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
-                top: -4,
+                top: 0,
                 left: 8,
                 right: 8,
                 height: 8,
@@ -182,8 +185,8 @@ const Resizer = (props) => {
             } }),
         React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
-                top: -4,
-                right: -4,
+                top: 0,
+                right: 0,
                 width: 12,
                 height: 12,
                 cursor: 'ne-resize',
@@ -191,22 +194,22 @@ const Resizer = (props) => {
         React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
                 top: 8,
-                right: -4,
+                right: 0,
                 bottom: 8,
                 width: 8,
                 cursor: 'e-resize',
             } }),
         React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
-                bottom: -4,
-                right: -4,
+                bottom: 0,
+                right: 0,
                 width: 12,
                 height: 12,
                 cursor: 'se-resize',
             } }),
         React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
-                bottom: -4,
+                bottom: 0,
                 left: 8,
                 right: 8,
                 height: 8,
@@ -214,8 +217,8 @@ const Resizer = (props) => {
             } }),
         React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
-                bottom: -4,
-                left: -4,
+                bottom: 0,
+                left: 0,
                 width: 12,
                 height: 12,
                 cursor: 'sw-resize',
@@ -223,7 +226,7 @@ const Resizer = (props) => {
         React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
                 top: 8,
-                left: -4,
+                left: 0,
                 bottom: 8,
                 width: 8,
                 cursor: 'w-resize',

package/esm/core/Dialog/DialogContent.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { supportsHas, useMergedRefs, useTheme } from '../utils/index.js';
 import '@itwin/itwinui-css/css/dialog.css';
 /**
  * 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';
  */
 export const DialogContent = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
+    const contentRef = React.useRef(null);
     useTheme();
-    return (React.createElement("div", { className: cx('iui-dialog-content', className), ref: ref, ...rest }, children));
+    React.useEffect(() => {
+        var _a;
+        // firefox hack for adding data-iui-flex in absence of :has
+        if (!supportsHas()) {
+            const dialog = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.closest('[role=dialog]');
+            if (dialog instanceof HTMLElement) {
+                dialog.dataset.iuiFlex = 'true';
+            }
+        }
+    }, []);
+    return (React.createElement("div", { className: cx('iui-dialog-content', className), ref: useMergedRefs(contentRef, ref), ...rest }, children));
 });
 export default DialogContent;

package/esm/core/Dialog/DialogMain.js

@@ -116,7 +116,6 @@ export const DialogMain = React.forwardRef((props, ref) => {
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
             transform,
-            overflow: 'unset',
             ...style,
             ...propStyle,
         }, ...rest },

package/esm/core/utils/components/Resizer.js

@@ -31,7 +31,10 @@ export const Resizer = (props) => {
         let height = `${initialHeight}px`;
         let translateX = initialTranslateX;
         let translateY = initialTranslateY;
-        const minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+        let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+        if (Number.isNaN(minWidth)) {
+            minWidth = 380;
+        }
         const minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
         const resizer = event.currentTarget.dataset.iuiResizer;
         const ownerDocument = elementRef.current.ownerDocument || document;
@@ -140,15 +143,15 @@ export const Resizer = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
-                top: -4,
-                left: -4,
+                top: 0,
+                left: 0,
                 width: 12,
                 height: 12,
                 cursor: 'nw-resize',
             } }),
         React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
-                top: -4,
+                top: 0,
                 left: 8,
                 right: 8,
                 height: 8,
@@ -156,8 +159,8 @@ export const Resizer = (props) => {
             } }),
         React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
-                top: -4,
-                right: -4,
+                top: 0,
+                right: 0,
                 width: 12,
                 height: 12,
                 cursor: 'ne-resize',
@@ -165,22 +168,22 @@ export const Resizer = (props) => {
         React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
                 top: 8,
-                right: -4,
+                right: 0,
                 bottom: 8,
                 width: 8,
                 cursor: 'e-resize',
             } }),
         React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
-                bottom: -4,
-                right: -4,
+                bottom: 0,
+                right: 0,
                 width: 12,
                 height: 12,
                 cursor: 'se-resize',
             } }),
         React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
-                bottom: -4,
+                bottom: 0,
                 left: 8,
                 right: 8,
                 height: 8,
@@ -188,8 +191,8 @@ export const Resizer = (props) => {
             } }),
         React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
-                bottom: -4,
-                left: -4,
+                bottom: 0,
+                left: 0,
                 width: 12,
                 height: 12,
                 cursor: 'sw-resize',
@@ -197,7 +200,7 @@ export const Resizer = (props) => {
         React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: {
                 position: 'absolute',
                 top: 8,
-                left: -4,
+                left: 0,
                 bottom: 8,
                 width: 8,
                 cursor: 'w-resize',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.11.9",
+  "version": "2.11.10",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -67,7 +67,7 @@
     "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^1.11.4",
+    "@itwin/itwinui-css": "^1.11.5",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
     "@itwin/itwinui-variables": "^2.0.0",
     "@tippyjs/react": "^4.2.6",