@instructure/ui-menu 10.17.1-snapshot-4 → 10.17.1-snapshot-6

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 (11) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Menu/MenuItem/index.js +3 -1
  3. package/es/Menu/index.js +4 -0
  4. package/lib/Menu/MenuItem/index.js +3 -1
  5. package/lib/Menu/index.js +4 -0
  6. package/package.json +19 -19
  7. package/src/Menu/MenuItem/index.tsx +3 -1
  8. package/src/Menu/index.tsx +3 -0
  9. package/tsconfig.build.tsbuildinfo +1 -1
  10. package/types/Menu/MenuItem/index.d.ts.map +1 -1
  11. package/types/Menu/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.17.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.17.0...v10.17.1-snapshot-4) (2025-05-26)
6
+ ## [10.17.1-snapshot-6](https://github.com/instructure/instructure-ui/compare/v10.17.0...v10.17.1-snapshot-6) (2025-05-26)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-menu
8
+
9
+ ### Features
10
+
11
+ * **ui-menu:** add prop to focus first element on open ([79c7349](https://github.com/instructure/instructure-ui/commit/79c734991509d84ce678118c0984ddbbac2207f8))
9
12
 
10
13
 
11
14
 
package/es/Menu/MenuItem/index.js CHANGED
@@ -100,7 +100,9 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
100
100
  }
101
101
  };
102
102
  this.handleMouseOver = event => {
103
- this.focus();
103
+ if (!this.focused) {
104
+ this.focus();
105
+ }
104
106
  if (typeof this.props.onMouseOver === 'function') {
105
107
  this.props.onMouseOver(event, this);
106
108
  }
package/es/Menu/index.js CHANGED
@@ -380,6 +380,10 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
380
380
  onKeyDown: this.handleTriggerKeyDown,
381
381
  disabled: trigger.props.disabled || disabled
382
382
  }),
383
+ defaultFocusElement: () => {
384
+ var _this$_popover, _this$_popover$_conte;
385
+ 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"]');
386
+ },
383
387
  children: this.renderMenu()
384
388
  }) : this.renderMenu();
385
389
  }
package/lib/Menu/MenuItem/index.js CHANGED
@@ -111,7 +111,9 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
111
111
  }
112
112
  };
113
113
  this.handleMouseOver = event => {
114
- this.focus();
114
+ if (!this.focused) {
115
+ this.focus();
116
+ }
115
117
  if (typeof this.props.onMouseOver === 'function') {
116
118
  this.props.onMouseOver(event, this);
117
119
  }
package/lib/Menu/index.js CHANGED
@@ -407,6 +407,10 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
407
407
  onKeyDown: this.handleTriggerKeyDown,
408
408
  disabled: trigger.props.disabled || disabled
409
409
  }),
410
+ defaultFocusElement: () => {
411
+ var _this$_popover, _this$_popover$_conte;
412
+ 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"]');
413
+ },
410
414
  children: this.renderMenu()
411
415
  }) : this.renderMenu();
412
416
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-menu",
3
- "version": "10.17.1-snapshot-4",
3
+ "version": "10.17.1-snapshot-6",
4
4
  "description": "A dropdown menu component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,11 +23,11 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.17.1-snapshot-4",
27
- "@instructure/ui-babel-preset": "10.17.1-snapshot-4",
28
- "@instructure/ui-color-utils": "10.17.1-snapshot-4",
29
- "@instructure/ui-test-utils": "10.17.1-snapshot-4",
30
- "@instructure/ui-themes": "10.17.1-snapshot-4",
26
+ "@instructure/ui-axe-check": "10.17.1-snapshot-6",
27
+ "@instructure/ui-babel-preset": "10.17.1-snapshot-6",
28
+ "@instructure/ui-color-utils": "10.17.1-snapshot-6",
29
+ "@instructure/ui-test-utils": "10.17.1-snapshot-6",
30
+ "@instructure/ui-themes": "10.17.1-snapshot-6",
31
31
  "@testing-library/jest-dom": "^6.6.3",
32
32
  "@testing-library/react": "^16.0.1",
33
33
  "@testing-library/user-event": "^14.5.2",
@@ -35,19 +35,19 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@babel/runtime": "^7.26.0",
38
- "@instructure/console": "10.17.1-snapshot-4",
39
- "@instructure/emotion": "10.17.1-snapshot-4",
40
- "@instructure/shared-types": "10.17.1-snapshot-4",
41
- "@instructure/ui-a11y-utils": "10.17.1-snapshot-4",
42
- "@instructure/ui-dom-utils": "10.17.1-snapshot-4",
43
- "@instructure/ui-icons": "10.17.1-snapshot-4",
44
- "@instructure/ui-popover": "10.17.1-snapshot-4",
45
- "@instructure/ui-position": "10.17.1-snapshot-4",
46
- "@instructure/ui-prop-types": "10.17.1-snapshot-4",
47
- "@instructure/ui-react-utils": "10.17.1-snapshot-4",
48
- "@instructure/ui-testable": "10.17.1-snapshot-4",
49
- "@instructure/ui-utils": "10.17.1-snapshot-4",
50
- "@instructure/ui-view": "10.17.1-snapshot-4",
38
+ "@instructure/console": "10.17.1-snapshot-6",
39
+ "@instructure/emotion": "10.17.1-snapshot-6",
40
+ "@instructure/shared-types": "10.17.1-snapshot-6",
41
+ "@instructure/ui-a11y-utils": "10.17.1-snapshot-6",
42
+ "@instructure/ui-dom-utils": "10.17.1-snapshot-6",
43
+ "@instructure/ui-icons": "10.17.1-snapshot-6",
44
+ "@instructure/ui-popover": "10.17.1-snapshot-6",
45
+ "@instructure/ui-position": "10.17.1-snapshot-6",
46
+ "@instructure/ui-prop-types": "10.17.1-snapshot-6",
47
+ "@instructure/ui-react-utils": "10.17.1-snapshot-6",
48
+ "@instructure/ui-testable": "10.17.1-snapshot-6",
49
+ "@instructure/ui-utils": "10.17.1-snapshot-6",
50
+ "@instructure/ui-view": "10.17.1-snapshot-6",
51
51
  "keycode": "^2",
52
52
  "prop-types": "^15.8.1"
53
53
  },
package/src/Menu/MenuItem/index.tsx CHANGED
@@ -170,7 +170,9 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
170
170
  }
171
171
 
172
172
  handleMouseOver = (event: React.MouseEvent) => {
173
- this.focus()
173
+ if (!this.focused) {
174
+ this.focus()
175
+ }
174
176
 
175
177
  if (typeof this.props.onMouseOver === 'function') {
176
178
  this.props.onMouseOver(event, this)
package/src/Menu/index.tsx CHANGED
@@ -500,6 +500,9 @@ class Menu extends Component<MenuProps> {
500
500
  onKeyDown: this.handleTriggerKeyDown,
501
501
  disabled: (trigger as ReactElement).props.disabled || disabled
502
502
  })}
503
+ defaultFocusElement={() =>
504
+ this._popover?._contentElement?.querySelector('[class$="menuItem"]')
505
+ }
503
506
  >
504
507
  {this.renderMenu()}
505
508
  </Popover>