From 036531ba58aad50833ecec319f3dbfb844fdd3dd Mon Sep 17 00:00:00 2001
From: Matyas Szabo <forianszm@gmail.com>
Date: Tue, 23 Jul 2024 16:14:56 +0200
Subject: [PATCH] fix(ui-menu): menuItem's onSelect type did not expose its
 value and selected types

Closes: INSTUI-4145

This is uses MenuItemProps instead, this type is exported
TEST PLAN:
import this component and check in the IDE that you can use the onSelect prop in TypeScript
---
 packages/ui-menu/src/Menu/MenuItem/index.tsx |  4 ++--
 packages/ui-menu/src/Menu/MenuItem/props.ts  | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/ui-menu/src/Menu/MenuItem/index.tsx b/packages/ui-menu/src/Menu/MenuItem/index.tsx
index 77d48fd639..4eeed0573f 100644
--- a/packages/ui-menu/src/Menu/MenuItem/index.tsx
+++ b/packages/ui-menu/src/Menu/MenuItem/index.tsx
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 /** @jsx jsx */
-import React, { Component, MouseEventHandler } from 'react'
+import React, { Component } from 'react'
 import keycode from 'keycode'
 
 import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons'
@@ -252,7 +252,7 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
               : 'false'
             : undefined
         }
-        onClick={this.handleClick as MouseEventHandler}
+        onClick={this.handleClick}
         onKeyUp={createChainedFunction(onKeyUp, this.handleKeyUp)}
         onKeyDown={createChainedFunction(onKeyDown, this.handleKeyDown)}
         ref={this.handleRef}
diff --git a/packages/ui-menu/src/Menu/MenuItem/props.ts b/packages/ui-menu/src/Menu/MenuItem/props.ts
index 19ebee8b40..dd7b82adae 100644
--- a/packages/ui-menu/src/Menu/MenuItem/props.ts
+++ b/packages/ui-menu/src/Menu/MenuItem/props.ts
@@ -38,8 +38,8 @@ import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type OnMenuItemSelect = (
   e: React.MouseEvent,
-  value: MenuItemOwnProps['value'],
-  selected: MenuItemOwnProps['selected'],
+  value: MenuItemProps['value'],
+  selected: MenuItemProps['selected'],
   args: MenuItem
 ) => void
 
@@ -73,8 +73,20 @@ type MenuItemOwnProps = {
    * the element type to render as (will default to `<a>` if href is provided)
    */
   as?: AsElementType
+  /**
+   * How this component should be rendered. If it's `checkbox` or `radio` it will
+   * display a checkmark based on its own 'selected' state, if it's `flyout` it will
+   * render an arrow after the label.
+   */
   type?: 'button' | 'checkbox' | 'radio' | 'flyout'
+  /**
+   * Arbitrary value that you can store in this component. Is sent out by the
+   * `onSelect` event
+   */
   value?: string | number
+  /**
+   * Value of the `href` prop that will be put on the underlying DOM element.
+   */
   href?: string
 }