@instructure/ui-menu 8.26.3 → 8.26.4-snapshot-3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.26.4-snapshot-3](https://github.com/instructure/instructure-ui/compare/v8.26.3...v8.26.4-snapshot-3) (2022-07-18)
+
+
+### Features
+
+* support React 18 ([0a2bf0c](https://github.com/instructure/instructure-ui/commit/0a2bf0cdd4d8bcec6e42a7ccf28a787e4a35bc40))
+
+
+
+
+
 ## [8.26.3](https://github.com/instructure/instructure-ui/compare/v8.26.2...v8.26.3) (2022-07-14)
 
 **Note:** Version bump only for package @instructure/ui-menu

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "8.26.3",
+  "version": "8.26.4-snapshot-3",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,32 +23,32 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.26.3",
-    "@instructure/ui-color-utils": "8.26.3",
-    "@instructure/ui-test-locator": "8.26.3",
-    "@instructure/ui-test-queries": "8.26.3",
-    "@instructure/ui-test-utils": "8.26.3",
-    "@instructure/ui-themes": "8.26.3"
+    "@instructure/ui-babel-preset": "8.26.4-snapshot-3",
+    "@instructure/ui-color-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-test-locator": "8.26.4-snapshot-3",
+    "@instructure/ui-test-queries": "8.26.4-snapshot-3",
+    "@instructure/ui-test-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-themes": "8.26.4-snapshot-3"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.26.3",
-    "@instructure/emotion": "8.26.3",
-    "@instructure/shared-types": "8.26.3",
-    "@instructure/ui-a11y-utils": "8.26.3",
-    "@instructure/ui-dom-utils": "8.26.3",
-    "@instructure/ui-icons": "8.26.3",
-    "@instructure/ui-popover": "8.26.3",
-    "@instructure/ui-position": "8.26.3",
-    "@instructure/ui-prop-types": "8.26.3",
-    "@instructure/ui-react-utils": "8.26.3",
-    "@instructure/ui-testable": "8.26.3",
-    "@instructure/ui-utils": "8.26.3",
+    "@instructure/console": "8.26.4-snapshot-3",
+    "@instructure/emotion": "8.26.4-snapshot-3",
+    "@instructure/shared-types": "8.26.4-snapshot-3",
+    "@instructure/ui-a11y-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-dom-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-icons": "8.26.4-snapshot-3",
+    "@instructure/ui-popover": "8.26.4-snapshot-3",
+    "@instructure/ui-position": "8.26.4-snapshot-3",
+    "@instructure/ui-prop-types": "8.26.4-snapshot-3",
+    "@instructure/ui-react-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-testable": "8.26.4-snapshot-3",
+    "@instructure/ui-utils": "8.26.4-snapshot-3",
     "keycode": "^2",
     "prop-types": "^15"
   },
   "peerDependencies": {
-    "react": ">=16.8 <=17"
+    "react": ">=16.8 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/Menu/MenuItem/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 /** @jsx jsx */
-import React, { Component } from 'react'
+import React, { Component, MouseEventHandler } from 'react'
 import keycode from 'keycode'
 
 import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons'
@@ -43,6 +43,7 @@ import generateComponentTheme from './theme'
 
 import { propTypes, allowedProps } from './props'
 import type { MenuItemProps, MenuItemState } from './props'
+import type { ViewOwnProps } from '@instructure/ui-view'
 
 /**
 ---
@@ -115,7 +116,7 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
     }
   }
 
-  handleClick = (e: React.MouseEvent) => {
+  handleClick = (e: React.MouseEvent<ViewOwnProps>) => {
     const { onSelect, onClick, disabled, value } = this.props
     const selected = !this.selected
 
@@ -254,7 +255,7 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
               : 'false'
             : undefined
         }
-        onClick={this.handleClick}
+        onClick={this.handleClick as MouseEventHandler}
         onKeyUp={createChainedFunction(onKeyUp, this.handleKeyUp)}
         onKeyDown={createChainedFunction(onKeyDown, this.handleKeyDown)}
         ref={this.handleRef}

package/src/Menu/MenuItem/props.ts

@@ -35,9 +35,10 @@ import type {
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import type { ViewOwnProps } from '@instructure/ui-view'
 
 type OnMenuItemSelect = (
-  e: React.MouseEvent,
+  e: React.MouseEvent<ViewOwnProps>,
   value: MenuItemOwnProps['value'],
   selected: MenuItemOwnProps['selected'],
   args: MenuItem
@@ -60,7 +61,7 @@ type MenuItemOwnProps = {
    * when used with the `selected` prop, the component will not control its own state
    */
   onSelect?: OnMenuItemSelect
-  onClick?: (e: React.MouseEvent) => void
+  onClick?: (e: React.MouseEvent<ViewOwnProps>) => void
   onKeyDown?: (e: React.KeyboardEvent) => void
   onKeyUp?: (e: React.KeyboardEvent) => void
   onMouseOver?: (e: React.MouseEvent, args: MenuItem) => void
@@ -84,7 +85,8 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type MenuItemProps = MenuItemOwnProps &
   WithStyleProps<MenuItemTheme, MenuItemStyle> &
-  OtherHTMLAttributes<MenuItemOwnProps> & WithDeterministicIdProps
+  OtherHTMLAttributes<MenuItemOwnProps> &
+  WithDeterministicIdProps
 
 type MenuItemStyle = ComponentStyle<'menuItem' | 'icon' | 'label'>
 

package/src/Menu/MenuItemGroup/index.tsx

@@ -45,6 +45,7 @@ import generateComponentTheme from './theme'
 
 import { propTypes, allowedProps } from './props'
 import type { MenuGroupProps, MenuGroupState } from './props'
+import type { ViewOwnProps } from '@instructure/ui-view'
 
 type MenuItemChild = React.ComponentElement<MenuItemProps, MenuItem>
 type MenuSeparatorChild = React.ComponentElement<
@@ -126,7 +127,7 @@ class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
   }
 
   updateSelected = (
-    e: React.MouseEvent,
+    e: React.MouseEvent<ViewOwnProps>,
     value: MenuItemProps['value'],
     items: MenuGroupState['selected'],
     selected: MenuItemProps['selected'],

package/src/Menu/MenuItemGroup/props.ts

@@ -41,6 +41,7 @@ import type {
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { MenuItemProps } from '../MenuItem/props'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import type { ViewOwnProps } from '@instructure/ui-view'
 
 type MenuGroupOwnProps = {
   label: React.ReactNode
@@ -61,7 +62,7 @@ type MenuGroupOwnProps = {
    * call this function when a menu item is selected
    */
   onSelect?: (
-    e: React.MouseEvent,
+    e: React.MouseEvent<ViewOwnProps>,
     updated: MenuItemProps['value'][],
     selected: MenuItemProps['selected'],
     item: MenuItem