@itwin/itwinui-react 2.12.19 → 2.12.21

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 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
+
+- 9f1f3cff: Fixed `ComboBox` to correctly merge `inputProps.style` with internal styles.
+
 ## 2.12.19
 
 ### Patch Changes

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -34,7 +34,7 @@ const index_js_2 = require("../utils/index.js");
 const ComboBoxMultipleContainer_js_1 = require("./ComboBoxMultipleContainer.js");
 const helpers_js_1 = require("./helpers.js");
 exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
-    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, onClick: onClickProp, selectTags, ...rest } = props;
+    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, onClick: onClickProp, selectTags, style, ...rest } = props;
     const { isOpen, id, focusedIndex, enableVirtualization, multiple, onClickHandler, } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
     const dispatch = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxActionContext);
     const { inputRef, menuRef, optionsExtraInfoRef } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
@@ -159,7 +159,10 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(index_js_1.Input, { ref: refs, onKeyDown: handleKeyDown, onClick: (0, index_js_2.mergeEventHandlers)(onClickProp, handleClick), onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
                 ? getIdFromIndex(focusedIndex)
-                : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: multiple ? { paddingLeft: tagContainerWidth + 18 } : {}, "aria-describedby": multiple ? `${id}-selected-live` : undefined, ...rest }),
+                : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: {
+                ...(multiple && { paddingInlineStart: tagContainerWidth + 18 }),
+                ...style,
+            }, "aria-describedby": multiple ? `${id}-selected-live` : undefined, ...rest }),
         multiple && selectTags ? (React.createElement(ComboBoxMultipleContainer_js_1.ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags, id: `${id}-selected-live` })) : null));
 });
 exports.ComboBoxInput.displayName = 'ComboBoxInput';

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;
-};