@itwin/itwinui-react 2.12.16 → 2.12.18

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 2.12.18
+
+### Patch Changes
+
+- a68561cf: Fixed an issue where Dialog content was appearing blurred on Windows.
+
+## 2.12.17
+
+### Patch Changes
+
+- [#1698](https://github.com/iTwin/iTwinUI/pull/1698): Fixed an issue where submenu items were not appearing because of overflow on parent menu.
+
 ## 2.12.16
 
 ### Patch Changes

package/cjs/core/Dialog/DialogMain.js

@@ -64,7 +64,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
     (0, index_js_1.useTheme)();
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(dialogRef, ref);
+    const [dialogElement, setDialogElement] = React.useState();
     const hasBeenResized = React.useRef(false);
     const previousFocusedElement = React.useRef();
     const originalBodyOverflow = React.useRef('');
@@ -118,7 +118,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             return;
         }
         const rect = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const [translateX, translateY] = (0, index_js_1.getTranslateValues)(dialogRef.current);
+        const [translateX, translateY] = (0, index_js_1.getTranslateValuesFromElement)(dialogRef.current);
         setStyle((oldStyle) => {
             var _a, _b;
             return ({
@@ -137,13 +137,17 @@ 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: refs, onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
-            transform,
+        }, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref, setDialogElement), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
+            transform: roundedTransform,
             ...style,
             ...propStyle,
         }, ...rest },
@@ -176,3 +180,20 @@ 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;
+};

package/cjs/core/Menu/MenuItem.js

@@ -67,13 +67,11 @@ exports.MenuItem = React.forwardRef((props, ref) => {
                 if (subMenuItems.length > 0) {
                     setIsSubmenuVisible(true);
                     event.preventDefault();
-                    event.stopPropagation();
                 }
                 break;
             }
             case 'ArrowLeft': {
                 (_a = parentMenuItemRef === null || parentMenuItemRef === void 0 ? void 0 : parentMenuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                event.stopPropagation();
                 event.preventDefault();
                 break;
             }
@@ -105,12 +103,16 @@ exports.MenuItem = React.forwardRef((props, ref) => {
                 className: (0, classnames_1.default)(badge.props.className, 'iui-icon'),
             })));
     return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        React.createElement(index_js_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
-                    var _a, _b;
-                    !!(e.relatedTarget instanceof Node) &&
-                        !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
-                        !((_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.isEqualNode(e.relatedTarget)) &&
+        React.createElement(index_js_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: (item) => {
+                var _a;
+                // we want the div wrapping the parent menu because the menu has overflow,
+                // which can cause the submenu to be cut off
+                return (_a = item.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+            }, delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onKeyDown: (e) => {
+                    if (!e.altKey && e.key === 'ArrowLeft') {
                         setIsSubmenuVisible(false);
+                        e.stopPropagation();
+                    }
                 } },
                 React.createElement(Menu_js_1.Menu, { ref: subMenuRef, className: 'iui-scroll' }, subMenuItems)) }, listItem)));
 });

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

@@ -51,7 +51,7 @@ const Resizer = (props) => {
         }
         const initialPointerX = event.clientX;
         const initialPointerY = event.clientY;
-        const [initialTranslateX, initialTranslateY] = (0, index_js_1.getTranslateValues)(elementRef.current);
+        const [initialTranslateX, initialTranslateY] = (0, index_js_1.getTranslateValuesFromElement)(elementRef.current);
         const { width: initialWidth, height: initialHeight } = elementRef.current.getBoundingClientRect();
         let width = `${initialWidth}px`;
         let height = `${initialHeight}px`;

package/cjs/core/utils/functions/dom.d.ts

@@ -27,4 +27,5 @@ export declare const mergeEventHandlers: <E extends import("react").SyntheticEve
  * @param element HTML element you want to get translate value of
  * @returns Translate values in pixels in an array `[translateX, translateY]`
  */
-export declare const getTranslateValues: (element: HTMLElement | null | undefined) => number[];
+export declare const getTranslateValuesFromElement: (element: HTMLElement | null | undefined) => number[];
+export declare const getTranslateValues: (transformValue: string) => number[];

package/cjs/core/utils/functions/dom.js

@@ -4,7 +4,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTranslateValues = exports.mergeEventHandlers = exports.getWindow = exports.getDocument = exports.getContainer = void 0;
+exports.getTranslateValues = exports.getTranslateValuesFromElement = exports.mergeEventHandlers = exports.getWindow = exports.getDocument = exports.getContainer = void 0;
 /**
  * Get the container as a child of body, or create one if it doesn't exist.
  * Mostly used for dynamic components like Modal or Toast.
@@ -58,11 +58,15 @@ exports.mergeEventHandlers = mergeEventHandlers;
  * @param element HTML element you want to get translate value of
  * @returns Translate values in pixels in an array `[translateX, translateY]`
  */
-const getTranslateValues = (element) => {
+const getTranslateValuesFromElement = (element) => {
     if (!element) {
         return [];
     }
     const transformValue = getComputedStyle(element).getPropertyValue('transform');
+    return (0, exports.getTranslateValues)(transformValue);
+};
+exports.getTranslateValuesFromElement = getTranslateValuesFromElement;
+const getTranslateValues = (transformValue) => {
     const matrix = new DOMMatrix(transformValue);
     return [matrix.m41, matrix.m42];
 };

package/cjs/core/utils/functions/numbers.d.ts

@@ -6,3 +6,10 @@ export declare const getBoundedValue: (val: number, min: number, max: number) =>
  * Returns a random value of a given length containing `A-Za-z0-9_-` symbols.
  */
 export declare const getRandomValue: (length?: number) => string;
+/**
+ * Rounds a pixel value based on the device's pixel ratio. This ensures that values can be
+ * placed evenly on the device’s pixel grid, avoiding any blurring.
+ *
+ * @see https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
+ */
+export declare const roundByDPR: (value: number) => number;

package/cjs/core/utils/functions/numbers.js

@@ -4,7 +4,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRandomValue = exports.getBoundedValue = void 0;
+exports.roundByDPR = exports.getRandomValue = exports.getBoundedValue = void 0;
 /**
  * Return input value bounded by specified range.
  */
@@ -24,3 +24,14 @@ const getRandomValue = (length = 21) => {
     return id;
 };
 exports.getRandomValue = getRandomValue;
+/**
+ * Rounds a pixel value based on the device's pixel ratio. This ensures that values can be
+ * placed evenly on the device’s pixel grid, avoiding any blurring.
+ *
+ * @see https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
+ */
+const roundByDPR = (value) => {
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+};
+exports.roundByDPR = roundByDPR;

package/cjs/core/utils/hooks/useDragAndDrop.js

@@ -62,7 +62,7 @@ const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
             return;
         }
         const { top, right, bottom, left } = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        let [newTranslateX, newTranslateY] = (0, index_js_1.getTranslateValues)(elementRef.current);
+        let [newTranslateX, newTranslateY] = (0, index_js_1.getTranslateValuesFromElement)(elementRef.current);
         containerRectRef.current = getContainerRect(containerRef);
         if (bottom > containerRectRef.current.bottom) {
             newTranslateY -= bottom - containerRectRef.current.bottom;
@@ -108,7 +108,7 @@ const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
         if (!elementRef.current || e.button !== 0 || !enabled) {
             return;
         }
-        const [x, y] = (0, index_js_1.getTranslateValues)(elementRef.current);
+        const [x, y] = (0, index_js_1.getTranslateValuesFromElement)(elementRef.current);
         grabOffsetX.current = e.clientX - x;
         grabOffsetY.current = e.clientY - y;
         originalUserSelect.current = elementRef.current.style.userSelect;

package/esm/core/Dialog/DialogMain.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { FocusTrap, getTranslateValues, Resizer, useMergedRefs, useTheme, useIsomorphicLayoutEffect, } from '../utils/index.js';
+import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useTheme, useIsomorphicLayoutEffect, getTranslateValues, roundByDPR, } from '../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
 import { CSSTransition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
@@ -35,7 +35,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
     useTheme();
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
-    const refs = useMergedRefs(dialogRef, ref);
+    const [dialogElement, setDialogElement] = React.useState();
     const hasBeenResized = React.useRef(false);
     const previousFocusedElement = React.useRef();
     const originalBodyOverflow = React.useRef('');
@@ -89,7 +89,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
             return;
         }
         const rect = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const [translateX, translateY] = getTranslateValues(dialogRef.current);
+        const [translateX, translateY] = getTranslateValuesFromElement(dialogRef.current);
         setStyle((oldStyle) => {
             var _a, _b;
             return ({
@@ -108,13 +108,17 @@ export const DialogMain = React.forwardRef((props, ref) => {
             ...newStyle,
         }));
     }, []);
+    const roundedTransform = useRoundedTransform({
+        element: dialogElement,
+        transform,
+    });
     const content = (React.createElement("div", { className: cx('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: refs, onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
-            transform,
+        }, className), role: 'dialog', ref: useMergedRefs(dialogRef, ref, setDialogElement), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
+            transform: roundedTransform,
             ...style,
             ...propStyle,
         }, ...rest },
@@ -147,3 +151,20 @@ export const DialogMain = React.forwardRef((props, ref) => {
             !trapFocus && content)));
 });
 export default 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);
+    useIsomorphicLayoutEffect(() => {
+        if (!element || typeof DOMMatrix === 'undefined') {
+            return;
+        }
+        const [x, y] = transform
+            ? getTranslateValues(transform)
+            : getTranslateValuesFromElement(element);
+        setRoundedStyles(`translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`);
+    }, [element, transform]);
+    return roundedStyles;
+};

package/esm/core/Menu/MenuItem.js

@@ -38,13 +38,11 @@ export const MenuItem = React.forwardRef((props, ref) => {
                 if (subMenuItems.length > 0) {
                     setIsSubmenuVisible(true);
                     event.preventDefault();
-                    event.stopPropagation();
                 }
                 break;
             }
             case 'ArrowLeft': {
                 (_a = parentMenuItemRef === null || parentMenuItemRef === void 0 ? void 0 : parentMenuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                event.stopPropagation();
                 event.preventDefault();
                 break;
             }
@@ -76,12 +74,16 @@ export const MenuItem = React.forwardRef((props, ref) => {
                 className: cx(badge.props.className, 'iui-icon'),
             })));
     return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
-                    var _a, _b;
-                    !!(e.relatedTarget instanceof Node) &&
-                        !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
-                        !((_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.isEqualNode(e.relatedTarget)) &&
+        React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: (item) => {
+                var _a;
+                // we want the div wrapping the parent menu because the menu has overflow,
+                // which can cause the submenu to be cut off
+                return (_a = item.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+            }, delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onKeyDown: (e) => {
+                    if (!e.altKey && e.key === 'ArrowLeft') {
                         setIsSubmenuVisible(false);
+                        e.stopPropagation();
+                    }
                 } },
                 React.createElement(Menu, { ref: subMenuRef, className: 'iui-scroll' }, subMenuItems)) }, listItem)));
 });

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

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getBoundedValue, getTranslateValues } from '../functions/index.js';
+import { getBoundedValue, getTranslateValuesFromElement, } from '../functions/index.js';
 /**
  * Component that allows to resize parent element.
  * Parent must have `position: relative`.
@@ -25,7 +25,7 @@ export const Resizer = (props) => {
         }
         const initialPointerX = event.clientX;
         const initialPointerY = event.clientY;
-        const [initialTranslateX, initialTranslateY] = getTranslateValues(elementRef.current);
+        const [initialTranslateX, initialTranslateY] = getTranslateValuesFromElement(elementRef.current);
         const { width: initialWidth, height: initialHeight } = elementRef.current.getBoundingClientRect();
         let width = `${initialWidth}px`;
         let height = `${initialHeight}px`;

package/esm/core/utils/functions/dom.d.ts

@@ -27,4 +27,5 @@ export declare const mergeEventHandlers: <E extends import("react").SyntheticEve
  * @param element HTML element you want to get translate value of
  * @returns Translate values in pixels in an array `[translateX, translateY]`
  */
-export declare const getTranslateValues: (element: HTMLElement | null | undefined) => number[];
+export declare const getTranslateValuesFromElement: (element: HTMLElement | null | undefined) => number[];
+export declare const getTranslateValues: (transformValue: string) => number[];

package/esm/core/utils/functions/dom.js

@@ -51,11 +51,14 @@ export const mergeEventHandlers = (...callbacks) => (event) => {
  * @param element HTML element you want to get translate value of
  * @returns Translate values in pixels in an array `[translateX, translateY]`
  */
-export const getTranslateValues = (element) => {
+export const getTranslateValuesFromElement = (element) => {
     if (!element) {
         return [];
     }
     const transformValue = getComputedStyle(element).getPropertyValue('transform');
+    return getTranslateValues(transformValue);
+};
+export const getTranslateValues = (transformValue) => {
     const matrix = new DOMMatrix(transformValue);
     return [matrix.m41, matrix.m42];
 };

package/esm/core/utils/functions/numbers.d.ts

@@ -6,3 +6,10 @@ export declare const getBoundedValue: (val: number, min: number, max: number) =>
  * Returns a random value of a given length containing `A-Za-z0-9_-` symbols.
  */
 export declare const getRandomValue: (length?: number) => string;
+/**
+ * Rounds a pixel value based on the device's pixel ratio. This ensures that values can be
+ * placed evenly on the device’s pixel grid, avoiding any blurring.
+ *
+ * @see https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
+ */
+export declare const roundByDPR: (value: number) => number;

package/esm/core/utils/functions/numbers.js

@@ -19,3 +19,13 @@ export const getRandomValue = (length = 21) => {
     }
     return id;
 };
+/**
+ * Rounds a pixel value based on the device's pixel ratio. This ensures that values can be
+ * placed evenly on the device’s pixel grid, avoiding any blurring.
+ *
+ * @see https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
+ */
+export const roundByDPR = (value) => {
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+};

package/esm/core/utils/hooks/useDragAndDrop.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getTranslateValues, getWindow } from '../functions/index.js';
+import { getTranslateValuesFromElement, getWindow, } from '../functions/index.js';
 import { useEventListener } from './useEventListener.js';
 import { useResizeObserver } from './useResizeObserver.js';
 const getContainerRect = (containerRef) => {
@@ -36,7 +36,7 @@ export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
             return;
         }
         const { top, right, bottom, left } = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        let [newTranslateX, newTranslateY] = getTranslateValues(elementRef.current);
+        let [newTranslateX, newTranslateY] = getTranslateValuesFromElement(elementRef.current);
         containerRectRef.current = getContainerRect(containerRef);
         if (bottom > containerRectRef.current.bottom) {
             newTranslateY -= bottom - containerRectRef.current.bottom;
@@ -82,7 +82,7 @@ export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
         if (!elementRef.current || e.button !== 0 || !enabled) {
             return;
         }
-        const [x, y] = getTranslateValues(elementRef.current);
+        const [x, y] = getTranslateValuesFromElement(elementRef.current);
         grabOffsetX.current = e.clientX - x;
         grabOffsetY.current = e.clientY - y;
         originalUserSelect.current = elementRef.current.style.userSelect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.12.16",
+  "version": "2.12.18",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",