@instructure/ui-menu 8.13.1-snapshot.42 → 8.13.1-snapshot.48

package/es/Menu/index.js

@@ -93,13 +93,13 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
     this.handleTriggerKeyDown = event => {
       if (this.props.type === 'flyout' && event.keyCode === keycode.codes.right) {
         event.persist();
-        this.show();
+        this.show(event);
       }
     };
 
-    this.handleTriggerMouseOver = () => {
+    this.handleTriggerMouseOver = event => {
       if (this.props.type === 'flyout') {
-        this.show();
+        this.show(event);
       }
     };
 
@@ -195,7 +195,6 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
 
     this.show = event => {
       if (this._popover) {
-        //TODO make events consistents
         this._popover.show(event);
       }
     };
@@ -424,7 +423,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       renderTrigger: safeCloneElement(trigger, {
         ref: el => {
           this._trigger = el;
-          this.ref = el;
+          this.ref = (el === null || el === void 0 ? void 0 : el.ref) || el;
         },
         'aria-haspopup': true,
         id: this._labelId,

package/lib/Menu/index.js

@@ -115,13 +115,13 @@ let Menu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     this.handleTriggerKeyDown = event => {
       if (this.props.type === 'flyout' && event.keyCode === _keycode.default.codes.right) {
         event.persist();
-        this.show();
+        this.show(event);
       }
     };
 
-    this.handleTriggerMouseOver = () => {
+    this.handleTriggerMouseOver = event => {
       if (this.props.type === 'flyout') {
-        this.show();
+        this.show(event);
       }
     };
 
@@ -217,7 +217,6 @@ let Menu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
 
     this.show = event => {
       if (this._popover) {
-        //TODO make events consistents
         this._popover.show(event);
       }
     };
@@ -446,7 +445,7 @@ let Menu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       renderTrigger: (0, _safeCloneElement.safeCloneElement)(trigger, {
         ref: el => {
           this._trigger = el;
-          this.ref = el;
+          this.ref = (el === null || el === void 0 ? void 0 : el.ref) || el;
         },
         'aria-haspopup': true,
         id: this._labelId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "8.13.1-snapshot.42+be0c3d29e",
+  "version": "8.13.1-snapshot.48+4961e7204",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,28 +24,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-color-utils": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-test-locator": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-test-queries": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-themes": "8.13.1-snapshot.42+be0c3d29e"
+    "@instructure/ui-babel-preset": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-color-utils": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-test-locator": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-test-queries": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-test-utils": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-themes": "8.13.1-snapshot.48+4961e7204"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/emotion": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/shared-types": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-a11y-utils": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-dom-utils": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-icons": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-popover": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-position": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-prop-types": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-testable": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/ui-utils": "8.13.1-snapshot.42+be0c3d29e",
-    "@instructure/uid": "8.13.1-snapshot.42+be0c3d29e",
+    "@instructure/console": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/emotion": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/shared-types": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-a11y-utils": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-dom-utils": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-icons": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-popover": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-position": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-prop-types": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-react-utils": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-testable": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/ui-utils": "8.13.1-snapshot.48+4961e7204",
+    "@instructure/uid": "8.13.1-snapshot.48+4961e7204",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "be0c3d29ed9f56474899ea4d1d2dd3f5bcc84c6a"
+  "gitHead": "4961e72046cb5d951afcc2d90f416e34539cbde2"
 }

package/src/Menu/index.tsx

@@ -84,13 +84,14 @@ class Menu extends Component<MenuProps> {
   _rootNode = null
   _menuItems: MenuItem[] = []
   _popover: Popover | null = null
-  _trigger: MenuItem | (ReactElement & { focus?: () => void }) | null = null
+  _trigger: MenuItem | (React.ReactInstance & { focus?: () => void }) | null =
+    null
   _menu: HTMLUListElement | null = null
   _labelId = uid('Menu__label')
   _activeSubMenu?: Menu | null
   _id: string
 
-  ref: ReactElement | null = null
+  ref: Element | null = null
 
   handleRef = (el: HTMLUListElement | null) => {
     const { menuRef } = this.props
@@ -139,13 +140,13 @@ class Menu extends Component<MenuProps> {
   handleTriggerKeyDown = (event: React.KeyboardEvent) => {
     if (this.props.type === 'flyout' && event.keyCode === keycode.codes.right) {
       event.persist()
-      this.show()
+      this.show(event)
     }
   }
 
-  handleTriggerMouseOver = () => {
+  handleTriggerMouseOver = (event: React.MouseEvent) => {
     if (this.props.type === 'flyout') {
-      this.show()
+      this.show(event)
     }
   }
 
@@ -155,7 +156,7 @@ class Menu extends Component<MenuProps> {
     }
   }
 
-  handleMenuKeyDown = (event: React.KeyboardEvent) => {
+  handleMenuKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {
     const key = event && event.keyCode
     const { down, up, tab, left } = keycode.codes
     const pgdn = keycode.codes['page down']
@@ -232,14 +233,13 @@ class Menu extends Component<MenuProps> {
 
   hide = (event: React.MouseEvent | React.KeyboardEvent) => {
     if (this._popover) {
-      this._popover.hide(event as unknown as Event)
+      this._popover.hide(event)
     }
   }
 
-  show = (event?: React.MouseEvent | React.KeyboardEvent) => {
+  show = (event: React.MouseEvent | React.KeyboardEvent) => {
     if (this._popover) {
-      //TODO make events consistents
-      this._popover.show(event as unknown as Event)
+      this._popover.show(event)
     }
   }
 
@@ -470,9 +470,9 @@ class Menu extends Component<MenuProps> {
           }
         }}
         renderTrigger={safeCloneElement(trigger as ReactElement, {
-          ref: (el: ReactElement) => {
+          ref: (el: (React.ReactInstance & { ref?: Element }) | null) => {
             this._trigger = el
-            this.ref = el
+            this.ref = el?.ref || (el as Element)
           },
           'aria-haspopup': true,
           id: this._labelId,

package/src/Menu/props.ts

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { PositionPropTypes } from '@instructure/ui-position'
@@ -44,7 +45,6 @@ import type {
 } from '@instructure/ui-position'
 import type { OnMenuItemSelect } from './MenuItem/props'
 import type { Popover } from '@instructure/ui-popover'
-import React from 'react'
 
 type MenuOwnProps = {
   /**
@@ -87,19 +87,22 @@ type MenuOwnProps = {
   /**
    * If a trigger is supplied, callback fired when the `<Menu />` is closed
    */
-  onDismiss?: (event: Event, documentClick: boolean) => void
+  onDismiss?: (
+    event: React.UIEvent | React.FocusEvent,
+    documentClick: boolean
+  ) => void
   /**
    * If a trigger is supplied, callback fired when the `<Menu />` trigger is focused
    */
-  onFocus?: (event: Event) => void
+  onFocus?: (event: React.FocusEvent) => void
   /**
    * If a trigger is supplied, callback fired onMouseOver for the `<Menu />` trigger
    */
-  onMouseOver?: (event: Event) => void
+  onMouseOver?: (event: React.MouseEvent) => void
   /**
    * Callback fired on the onKeyDown of the `<Menu />`
    */
-  onKeyDown?: (event: React.KeyboardEvent) => void
+  onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>) => void
   /**
    * Callback fired on the onKeyUp of the `<Menu />`
    */