MenuItem: Refactor to TypeScript (#53132)

* - Add new type props, combine with WordPressComponentProps

- Convert menu-item.js to tsx

- Update JSDoc

* * Update ChangeLog

packages/components/CHANGELOG.md

@@ -24,6 +24,9 @@
 ### Internal
 
 -   `ControlGroup`, `FormGroup`, `ControlLabel`, `Spinner`: Remove unused `ui/` components from the codebase ([#52953](https://github.com/WordPress/gutenberg/pull/52953)).
+-   `MenuItem`: Convert to TypeScript ([#53132](https://github.com/WordPress/gutenberg/pull/53132)).
+-   `MenuGroup`: Add Storybook stories ([#53090](https://github.com/WordPress/gutenberg/pull/53090)).
+
 
 ## 25.4.0 (2023-07-20)
 

packages/components/src/menu-item/index.js → packages/components/src/menu-item/index.tsx

@@ -1,7 +1,7 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
+import type { ForwardedRef } from 'react';
 import classnames from 'classnames';
 
 /**
@@ -15,8 +15,13 @@ import { cloneElement, forwardRef } from '@wordpress/element';
 import Shortcut from '../shortcut';
 import Button from '../button';
 import Icon from '../icon';
+import type { WordPressComponentProps } from '../ui/context';
+import type { MenuItemProps } from './types';
 
-export function MenuItem( props, ref ) {
+export function MenuItem(
+	props: WordPressComponentProps< MenuItemProps, 'button', false >,
+	ref: ForwardedRef< HTMLButtonElement >
+) {
 	let {
 		children,
 		info,
@@ -78,4 +83,26 @@ export function MenuItem( props, ref ) {
 	);
 }
 
+/**
+ * MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.
+ *
+ * ```jsx
+ * import { MenuItem } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyMenuItem = () => {
+ * 	const [ isActive, setIsActive ] = useState( true );
+ *
+ * 	return (
+ * 		<MenuItem
+ * 			icon={ isActive ? 'yes' : 'no' }
+ * 			isSelected={ isActive }
+ * 			onClick={ () => setIsActive( ( state ) => ! state ) }
+ * 		>
+ * 			Toggle
+ * 		</MenuItem>
+ * 	);
+ * };
+ * ```
+ */
 export default forwardRef( MenuItem );

packages/components/src/menu-item/types.ts

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { ButtonAsButtonProps } from '../button/types';
+
+export type MenuItemProps = ButtonAsButtonProps & {
+	/**
+	 * A CSS `class` to give to the container element.
+	 */
+	className?: string;
+	/**
+	 * The children elements.
+	 */
+	children?: ReactNode;
+	/**
+	 * Text to use as description for button text.
+	 */
+	info?: string;
+	/**
+	 * The icon to render. Supported values are: Dashicons (specified as
+	 * strings), functions, Component instances and `null`.
+	 *
+	 * @default null
+	 */
+	icon?: JSX.Element | null;
+	/**
+	 * Determines where to display the provided `icon`.
+	 */
+	iconPosition?: ButtonAsButtonProps[ 'iconPosition' ];
+	/**
+	 * Whether or not the menu item is currently selected.
+	 */
+	isSelected?: boolean;
+	/**
+	 * If shortcut is a string, it is expecting the display text. If shortcut is an object,
+	 * it will accept the properties of `display` (string) and `ariaLabel` (string).
+	 */
+	shortcut?: string | { display: string; ariaLabel: string };
+	/**
+	 * If you need to have selectable menu items use menuitemradio for single select,
+	 * and menuitemcheckbox for multiselect.
+	 *
+	 * @default 'menuitem'
+	 */
+	role?: string;
+	/**
+	 * Allows for markup other than icons or shortcuts to be added to the menu item.
+	 *
+	 */
+	suffix?: ReactNode;
+	/**
+	 * Human-readable label for item.
+	 */
+	label?: string;
+};

packages/components/src/menu-items-choice/index.tsx

@@ -59,7 +59,7 @@ function MenuItemsChoice( {
 						key={ item.value }
 						role="menuitemradio"
 						disabled={ item.disabled }
-						icon={ isSelected && check }
+						icon={ isSelected ? check : null }
 						info={ item.info }
 						isSelected={ isSelected }
 						shortcut={ item.shortcut }

packages/components/src/tools-panel/tools-panel-header/component.tsx

@@ -112,7 +112,7 @@ const OptionalControlsGroup = ( {
 				return (
 					<MenuItem
 						key={ label }
-						icon={ isSelected && check }
+						icon={ isSelected ? check : null }
 						isSelected={ isSelected }
 						label={ itemLabel }
 						onClick={ () => {