@itwin/itwinui-react 2.12.7 → 2.12.8

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2.12.8
+
+### Patch Changes
+
+- [#1576](https://github.com/iTwin/iTwinUI/pull/1576): Dropdown menus will now automatically become scrollable if there are too many menu items. Also added delay to submenu.
+- [#1578](https://github.com/iTwin/iTwinUI/pull/1578): Fixed missing animation in ComboBox.
+- [#1572](https://github.com/iTwin/iTwinUI/pull/1572): Adjusted borders and shadow values to be more prominent in dark theme.
+- [#1575](https://github.com/iTwin/iTwinUI/pull/1575): ProgressRadial now stays inside container when using size="x-small".
+
 ## 2.12.7
 
 ### Patch Changes

package/cjs/core/ComboBox/ComboBoxDropdown.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { PopoverProps } from '../utils/index.js';
+import 'tippy.js/animations/shift-away.css';
 declare type ComboBoxDropdownProps = PopoverProps & {
     children: JSX.Element;
 };

package/cjs/core/ComboBox/ComboBoxDropdown.js

@@ -31,6 +31,7 @@ exports.ComboBoxDropdown = void 0;
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const helpers_js_1 = require("./helpers.js");
+require("tippy.js/animations/shift-away.css");
 exports.ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
     const { children, ...rest } = props;
     const { isOpen } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownMenu = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -29,6 +32,7 @@ exports.DropdownMenu = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const index_js_2 = require("../Menu/index.js");
 /**
@@ -70,7 +74,7 @@ const DropdownMenu = (props) => {
         onHide === null || onHide === void 0 ? void 0 : onHide(instance);
     }, [onHide]);
     (0, index_js_1.useTheme)();
-    return (React.createElement(index_js_1.Popover, { content: React.createElement(index_js_2.Menu, { className: className, style: style, role: role, id: id }, React.useMemo(() => menuItems(close), [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined, ...rest }, React.cloneElement(children, {
+    return (React.createElement(index_js_1.Popover, { content: React.createElement(index_js_2.Menu, { className: (0, classnames_1.default)('iui-scroll', className), style: style, role: role, id: id }, React.useMemo(() => menuItems(close), [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined, ...rest }, React.cloneElement(children, {
         ref: (0, index_js_1.mergeRefs)(targetRef, props.children.ref),
         onClick: (args) => {
             var _a, _b;

package/cjs/core/Menu/MenuItem.js

@@ -105,13 +105,13 @@ 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', content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
+        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)) &&
                         setIsSubmenuVisible(false);
                 } },
-                React.createElement(Menu_js_1.Menu, { ref: subMenuRef }, subMenuItems)) }, listItem)));
+                React.createElement(Menu_js_1.Menu, { ref: subMenuRef, className: 'iui-scroll' }, subMenuItems)) }, listItem)));
 });
 exports.default = exports.MenuItem;