@itwin/itwinui-react 2.12.20 → 2.12.22

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 2.12.22
+
+### Patch Changes
+
+- 20b627b4: Fixed an issue where `Table` was showing a dummy vertical scrollbar track inside the table header in Chromium 121 + Windows.
+- 66bddba3: Fixed `Surface.Body` not being visually aligned with `Surface.Header` depending on scrollbar visibility.
+
+## 2.12.21
+
+### Patch Changes
+
+- 764d16fb: Fixed blurring and resizing issues in Dialog/Modal by removing `overflow: hidden` and inline `transform` styles.
+
 ## 2.12.20
 
 ### Patch Changes

package/cjs/core/Dialog/DialogMain.js

@@ -64,7 +64,6 @@ exports.DialogMain = React.forwardRef((props, ref) => {
     (0, index_js_1.useTheme)();
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
-    const [dialogElement, setDialogElement] = React.useState();
     const hasBeenResized = React.useRef(false);
     const previousFocusedElement = React.useRef();
     const originalBodyOverflow = React.useRef('');
@@ -137,17 +136,13 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             ...newStyle,
         }));
     }, []);
-    const roundedTransform = useRoundedTransform({
-        element: dialogElement,
-        transform,
-    });
     const content = (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
-        }, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref, setDialogElement), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
-            transform: styleType !== 'fullPage' ? roundedTransform : undefined,
+        }, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
+            transform: styleType !== 'fullPage' ? transform : undefined,
             ...style,
             ...propStyle,
         }, ...rest },
@@ -180,20 +175,3 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             !trapFocus && content)));
 });
 exports.default = exports.DialogMain;
-// ----------------------------------------------------------------------------
-/**
- * Rounds off an element's transform value based on the device's pixel grid, to avoid blurring.
- */
-const useRoundedTransform = ({ element, transform, }) => {
-    const [roundedStyles, setRoundedStyles] = React.useState(transform);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-        if (!element || typeof DOMMatrix === 'undefined') {
-            return;
-        }
-        const [x, y] = transform
-            ? (0, index_js_1.getTranslateValues)(transform)
-            : (0, index_js_1.getTranslateValuesFromElement)(element);
-        setRoundedStyles(`translate(${(0, index_js_1.roundByDPR)(x)}px, ${(0, index_js_1.roundByDPR)(y)}px)`);
-    }, [element, transform]);
-    return roundedStyles;
-};