/**
 * Menu component.
 *
 * Site Kit by Google, Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import classnames from 'classnames';
import PropTypes from 'prop-types';
import useMergedRef from '@react-hook/merged-ref';

/**
 * WordPress dependencies
 */
import {
	forwardRef,
	useCallback,
	useEffect,
	useRef,
	useState,
} from '@wordpress/element';

/**
 * Internal dependencies
 */
import { MDCMenu } from '../material-components';

const Menu = forwardRef(
	( { children, className, menuOpen, menuItems, onSelected, id }, ref ) => {
		const [ menu, setMenu ] = useState( null );

		const menuRef = useRef( null );
		const mergedRefs = useMergedRef( ref, menuRef );

		const handleMenuSelected = useCallback(
			( event ) => {
				const {
					detail: { index },
				} = event;

				onSelected( index, event );
			},
			[ onSelected ]
		);

		useEffect( () => {
			if ( ! menuRef?.current ) {
				return;
			}

			const menuComponent = new MDCMenu( menuRef.current );
			menuComponent.listen( 'MDCMenu:selected', handleMenuSelected );
			setMenu( menuComponent );

			return () => {
				menuComponent.unlisten(
					'MDCMenu:selected',
					handleMenuSelected
				);

				menuComponent.destroy();
			};
		}, [ menuRef, handleMenuSelected ] );

		useEffect( () => {
			if ( menu ) {
				menu.open = menuOpen;
				menu.setDefaultFocusState( 1 );
			}
		}, [ menu, menuOpen ] );

		return (
			<div
				className={ classnames(
					'mdc-menu',
					'mdc-menu-surface',
					className
				) }
				ref={ mergedRefs }
			>
				<ul
					aria-hidden={ ! menuOpen }
					aria-orientation="vertical"
					className="mdc-list"
					id={ id }
					role="menu"
					tabIndex="-1"
				>
					{ ! children &&
						menuItems.map( ( item, index ) => (
							<li
								key={ index }
								className="mdc-list-item"
								role="menuitem"
							>
								<span className="mdc-list-item__text">
									{ item }
								</span>
							</li>
						) ) }
					{ children }
				</ul>
			</div>
		);
	}
);

Menu.displayName = 'Menu';

Menu.propTypes = {
	className: PropTypes.string,
	children: PropTypes.node,
	menuOpen: PropTypes.bool.isRequired,
	menuItems: PropTypes.array,
	id: PropTypes.string.isRequired,
	onSelected: PropTypes.func,
};

Menu.defaultProps = {
	onSelected: () => {},
};

export default Menu;

@@ -1033,19 +1033,24 @@
 dRef(%0A%09(
- %7B 
+%0A%09%09%7B%0A%09%09%09
 children
@@ -1050,17 +1050,20 @@
 hildren,
- 
+%0A%09%09%09
 classNam
@@ -1064,17 +1064,20 @@
 assName,
- 
+%0A%09%09%09
 menuOpen
@@ -1077,17 +1077,20 @@
 enuOpen,
- 
+%0A%09%09%09
 menuItem
@@ -1091,17 +1091,20 @@
 nuItems,
- 
+%0A%09%09%09
 onSelect
@@ -1110,19 +1110,47 @@
 ted,
- id %7D, ref 
+%0A%09%09%09nonInteractive,%0A%09%09%09id,%0A%09%09%7D,%0A%09%09ref%0A%09
 ) =%3E
@@ -1653,16 +1653,17 @@
 cted );%0A
+%0A
 %09%09%09setMe
@@ -1856,16 +1856,32 @@
 Selected
+, nonInteractive
  %5D );%0A%0A%09
@@ -2244,18 +2244,97 @@
 ame=
-%22mdc-list%22
+%7B classnames( 'mdc-list', %7B%0A%09%09%09%09%09%09'mdc-list--non-interactive': nonInteractive,%0A%09%09%09%09%09%7D ) %7D
 %0A%09%09%09
@@ -2940,16 +2940,49 @@
 s.func,%0A
+%09nonInteractive: PropTypes.bool,%0A
 %7D;%0A%0AMenu
@@ -3022,16 +3022,40 @@
  =%3E %7B%7D,%0A
+%09nonInteractive: false,%0A
 %7D;%0A%0Aexpo

Add optional nonInteractive prop to Menu.