Skip to content

Commit

Permalink
fix(ui-menu): menuItem's onSelect type did not expose its value and s…
Browse files Browse the repository at this point in the history
…elected 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
  • Loading branch information
matyasf committed Jul 24, 2024
1 parent caf37ad commit 98ca20e
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 4 deletions.
4 changes: 2 additions & 2 deletions packages/ui-menu/src/Menu/MenuItem/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -253,7 +253,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}
Expand Down
16 changes: 14 additions & 2 deletions packages/ui-menu/src/Menu/MenuItem/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ import type { ViewOwnProps } from '@instructure/ui-view'

type OnMenuItemSelect = (
e: React.MouseEvent<ViewOwnProps>,
value: MenuItemOwnProps['value'],
selected: MenuItemOwnProps['selected'],
value: MenuItemProps['value'],
selected: MenuItemProps['selected'],
args: MenuItem
) => void

Expand Down Expand Up @@ -74,8 +74,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
}

Expand Down

0 comments on commit 98ca20e

Please sign in to comment.