@itwin/itwinui-react 2.12.17 → 2.12.19

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 2.12.19
+
+### Patch Changes
+
+- [#1765](https://github.com/iTwin/iTwinUI/pull/1765): Fixed full page `Modal` not showing up.
+- [#1764](https://github.com/iTwin/iTwinUI/pull/1764): Fixed submenu items being unreachable in popout windows.
+
+## 2.12.18
+
+### Patch Changes
+
+- a68561cf: Fixed an issue where Dialog content was appearing blurred on Windows.
+
 ## 2.12.17
 
 ### Patch Changes

package/LICENSE.md

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright © 2021-2023 Bentley Systems, Incorporated. All rights reserved.
+Copyright © 2021-2024 Bentley Systems, Incorporated. All rights reserved.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

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: styleType !== 'fullPage' ? roundedTransform : undefined,
             ...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

@@ -85,10 +85,12 @@ exports.MenuItem = React.forwardRef((props, ref) => {
             'iui-disabled': disabled,
         }, className), onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)), ref: refs, style: style, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: () => setIsSubmenuVisible(true), onMouseLeave: (e) => {
             var _a;
-            if (!(e.relatedTarget instanceof Node) ||
-                !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
-                setIsSubmenuVisible(false);
+            try {
+                if (!((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+                    setIsSubmenuVisible(false);
+                }
             }
+            catch (_b) { }
         }, ...rest },
         icon &&
             React.cloneElement(icon, {

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: styleType !== 'fullPage' ? roundedTransform : undefined,
             ...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

@@ -56,10 +56,12 @@ export const MenuItem = React.forwardRef((props, ref) => {
             'iui-disabled': disabled,
         }, className), onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)), ref: refs, style: style, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: () => setIsSubmenuVisible(true), onMouseLeave: (e) => {
             var _a;
-            if (!(e.relatedTarget instanceof Node) ||
-                !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
-                setIsSubmenuVisible(false);
+            try {
+                if (!((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+                    setIsSubmenuVisible(false);
+                }
             }
+            catch (_b) { }
         }, ...rest },
         icon &&
             React.cloneElement(icon, {

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.17",
+  "version": "2.12.19",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",