@itwin/itwinui-react 2.12.16 → 2.12.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/cjs/core/Menu/MenuItem.js +9 -7
  3. package/esm/core/Menu/MenuItem.js +9 -7
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.12.17
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1698](https://github.com/iTwin/iTwinUI/pull/1698): Fixed an issue where submenu items were not appearing because of overflow on parent menu.
8
+
3
9
  ## 2.12.16
4
10
 
5
11
  ### Patch Changes
package/cjs/core/Menu/MenuItem.js CHANGED
@@ -67,13 +67,11 @@ exports.MenuItem = React.forwardRef((props, ref) => {
67
67
  if (subMenuItems.length > 0) {
68
68
  setIsSubmenuVisible(true);
69
69
  event.preventDefault();
70
- event.stopPropagation();
71
70
  }
72
71
  break;
73
72
  }
74
73
  case 'ArrowLeft': {
75
74
  (_a = parentMenuItemRef === null || parentMenuItemRef === void 0 ? void 0 : parentMenuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
76
- event.stopPropagation();
77
75
  event.preventDefault();
78
76
  break;
79
77
  }
@@ -105,12 +103,16 @@ exports.MenuItem = React.forwardRef((props, ref) => {
105
103
  className: (0, classnames_1.default)(badge.props.className, 'iui-icon'),
106
104
  })));
107
105
  return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
108
- React.createElement(index_js_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
109
- var _a, _b;
110
- !!(e.relatedTarget instanceof Node) &&
111
- !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
112
- !((_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.isEqualNode(e.relatedTarget)) &&
106
+ React.createElement(index_js_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: (item) => {
107
+ var _a;
108
+ // we want the div wrapping the parent menu because the menu has overflow,
109
+ // which can cause the submenu to be cut off
110
+ return (_a = item.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
111
+ }, delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onKeyDown: (e) => {
112
+ if (!e.altKey && e.key === 'ArrowLeft') {
113
113
  setIsSubmenuVisible(false);
114
+ e.stopPropagation();
115
+ }
114
116
  } },
115
117
  React.createElement(Menu_js_1.Menu, { ref: subMenuRef, className: 'iui-scroll' }, subMenuItems)) }, listItem)));
116
118
  });
package/esm/core/Menu/MenuItem.js CHANGED
@@ -38,13 +38,11 @@ export const MenuItem = React.forwardRef((props, ref) => {
38
38
  if (subMenuItems.length > 0) {
39
39
  setIsSubmenuVisible(true);
40
40
  event.preventDefault();
41
- event.stopPropagation();
42
41
  }
43
42
  break;
44
43
  }
45
44
  case 'ArrowLeft': {
46
45
  (_a = parentMenuItemRef === null || parentMenuItemRef === void 0 ? void 0 : parentMenuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
47
- event.stopPropagation();
48
46
  event.preventDefault();
49
47
  break;
50
48
  }
@@ -76,12 +74,16 @@ export const MenuItem = React.forwardRef((props, ref) => {
76
74
  className: cx(badge.props.className, 'iui-icon'),
77
75
  })));
78
76
  return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
79
- React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
80
- var _a, _b;
81
- !!(e.relatedTarget instanceof Node) &&
82
- !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
83
- !((_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.isEqualNode(e.relatedTarget)) &&
77
+ React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: (item) => {
78
+ var _a;
79
+ // we want the div wrapping the parent menu because the menu has overflow,
80
+ // which can cause the submenu to be cut off
81
+ return (_a = item.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
82
+ }, delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onKeyDown: (e) => {
83
+ if (!e.altKey && e.key === 'ArrowLeft') {
84
84
  setIsSubmenuVisible(false);
85
+ e.stopPropagation();
86
+ }
85
87
  } },
86
88
  React.createElement(Menu, { ref: subMenuRef, className: 'iui-scroll' }, subMenuItems)) }, listItem)));
87
89
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-react",
3
- "version": "2.12.16",
3
+ "version": "2.12.17",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "cjs/index.js",