@itwin/itwinui-react 2.12.18 → 2.12.20

package/CHANGELOG.md

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

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/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

@@ -147,7 +147,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             '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: roundedTransform,
+            transform: styleType !== 'fullPage' ? roundedTransform : undefined,
             ...style,
             ...propStyle,
         }, ...rest },

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/esm/core/ComboBox/ComboBoxInput.js

@@ -8,7 +8,7 @@ import { useSafeContext, useMergedRefs, useContainerWidth, mergeEventHandlers, }
 import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer.js';
 import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers.js';
 export const 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, } = useSafeContext(ComboBoxStateContext);
     const dispatch = useSafeContext(ComboBoxActionContext);
     const { inputRef, menuRef, optionsExtraInfoRef } = useSafeContext(ComboBoxRefsContext);
@@ -133,7 +133,10 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(Input, { ref: refs, onKeyDown: handleKeyDown, onClick: 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, { ref: tagContainerWidthRef, selectedItems: selectTags, id: `${id}-selected-live` })) : null));
 });
 ComboBoxInput.displayName = 'ComboBoxInput';

package/esm/core/Dialog/DialogMain.js

@@ -118,7 +118,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: useMergedRefs(dialogRef, ref, setDialogElement), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
-            transform: roundedTransform,
+            transform: styleType !== 'fullPage' ? roundedTransform : undefined,
             ...style,
             ...propStyle,
         }, ...rest },

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/package.json

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