@instructure/ui-menu 10.17.1-snapshot-5 → 10.17.1-snapshot-7

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.17.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.17.0...v10.17.1-snapshot-5) (2025-05-26)
+## [10.17.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.17.0...v10.17.1-snapshot-7) (2025-05-26)
 
-**Note:** Version bump only for package @instructure/ui-menu
+
+### Features
+
+* **ui-menu:** add prop to focus first element on open ([79c7349](https://github.com/instructure/instructure-ui/commit/79c734991509d84ce678118c0984ddbbac2207f8))
 
 
 

package/es/Menu/MenuItem/index.js

@@ -100,7 +100,9 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       }
     };
     this.handleMouseOver = event => {
-      this.focus();
+      if (!this.focused) {
+        this.focus();
+      }
       if (typeof this.props.onMouseOver === 'function') {
         this.props.onMouseOver(event, this);
       }

package/es/Menu/index.js

@@ -380,6 +380,10 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
         onKeyDown: this.handleTriggerKeyDown,
         disabled: trigger.props.disabled || disabled
       }),
+      defaultFocusElement: () => {
+        var _this$_popover, _this$_popover$_conte;
+        return (_this$_popover = this._popover) === null || _this$_popover === void 0 ? void 0 : (_this$_popover$_conte = _this$_popover._contentElement) === null || _this$_popover$_conte === void 0 ? void 0 : _this$_popover$_conte.querySelector('[class$="menuItem"]');
+      },
       children: this.renderMenu()
     }) : this.renderMenu();
   }

package/lib/Menu/MenuItem/index.js

@@ -111,7 +111,9 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
       }
     };
     this.handleMouseOver = event => {
-      this.focus();
+      if (!this.focused) {
+        this.focus();
+      }
       if (typeof this.props.onMouseOver === 'function') {
         this.props.onMouseOver(event, this);
       }

package/lib/Menu/index.js

@@ -407,6 +407,10 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
         onKeyDown: this.handleTriggerKeyDown,
         disabled: trigger.props.disabled || disabled
       }),
+      defaultFocusElement: () => {
+        var _this$_popover, _this$_popover$_conte;
+        return (_this$_popover = this._popover) === null || _this$_popover === void 0 ? void 0 : (_this$_popover$_conte = _this$_popover._contentElement) === null || _this$_popover$_conte === void 0 ? void 0 : _this$_popover$_conte.querySelector('[class$="menuItem"]');
+      },
       children: this.renderMenu()
     }) : this.renderMenu();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "10.17.1-snapshot-5",
+  "version": "10.17.1-snapshot-7",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.17.1-snapshot-5",
-    "@instructure/ui-babel-preset": "10.17.1-snapshot-5",
-    "@instructure/ui-color-utils": "10.17.1-snapshot-5",
-    "@instructure/ui-test-utils": "10.17.1-snapshot-5",
-    "@instructure/ui-themes": "10.17.1-snapshot-5",
+    "@instructure/ui-axe-check": "10.17.1-snapshot-7",
+    "@instructure/ui-babel-preset": "10.17.1-snapshot-7",
+    "@instructure/ui-color-utils": "10.17.1-snapshot-7",
+    "@instructure/ui-test-utils": "10.17.1-snapshot-7",
+    "@instructure/ui-themes": "10.17.1-snapshot-7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -35,19 +35,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.17.1-snapshot-5",
-    "@instructure/emotion": "10.17.1-snapshot-5",
-    "@instructure/shared-types": "10.17.1-snapshot-5",
-    "@instructure/ui-a11y-utils": "10.17.1-snapshot-5",
-    "@instructure/ui-dom-utils": "10.17.1-snapshot-5",
-    "@instructure/ui-icons": "10.17.1-snapshot-5",
-    "@instructure/ui-popover": "10.17.1-snapshot-5",
-    "@instructure/ui-position": "10.17.1-snapshot-5",
-    "@instructure/ui-prop-types": "10.17.1-snapshot-5",
-    "@instructure/ui-react-utils": "10.17.1-snapshot-5",
-    "@instructure/ui-testable": "10.17.1-snapshot-5",
-    "@instructure/ui-utils": "10.17.1-snapshot-5",
-    "@instructure/ui-view": "10.17.1-snapshot-5",
+    "@instructure/console": "10.17.1-snapshot-7",
+    "@instructure/emotion": "10.17.1-snapshot-7",
+    "@instructure/shared-types": "10.17.1-snapshot-7",
+    "@instructure/ui-a11y-utils": "10.17.1-snapshot-7",
+    "@instructure/ui-dom-utils": "10.17.1-snapshot-7",
+    "@instructure/ui-icons": "10.17.1-snapshot-7",
+    "@instructure/ui-popover": "10.17.1-snapshot-7",
+    "@instructure/ui-position": "10.17.1-snapshot-7",
+    "@instructure/ui-prop-types": "10.17.1-snapshot-7",
+    "@instructure/ui-react-utils": "10.17.1-snapshot-7",
+    "@instructure/ui-testable": "10.17.1-snapshot-7",
+    "@instructure/ui-utils": "10.17.1-snapshot-7",
+    "@instructure/ui-view": "10.17.1-snapshot-7",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/Menu/MenuItem/index.tsx

@@ -170,7 +170,9 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
   }
 
   handleMouseOver = (event: React.MouseEvent) => {
-    this.focus()
+    if (!this.focused) {
+      this.focus()
+    }
 
     if (typeof this.props.onMouseOver === 'function') {
       this.props.onMouseOver(event, this)

package/src/Menu/index.tsx

@@ -500,6 +500,9 @@ class Menu extends Component<MenuProps> {
           onKeyDown: this.handleTriggerKeyDown,
           disabled: (trigger as ReactElement).props.disabled || disabled
         })}
+        defaultFocusElement={() =>
+          this._popover?._contentElement?.querySelector('[class$="menuItem"]')
+        }
       >
         {this.renderMenu()}
       </Popover>