Move ts-nocheck to dependencies and fix type errors

packages/components/src/dropdown-menu/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */
@@ -33,19 +34,21 @@ function mergeProps( defaultProps = {}, props = {} ) {
 	return mergedProps;
 }
 
-function DropdownMenu( {
-	children,
-	className,
-	controls,
-	icon = menu,
-	label,
-	popoverProps,
-	toggleProps,
-	menuProps,
-	disableOpenOnArrowDown = false,
-	text,
-	noIcons,
-} ) {
+function DropdownMenu( dropdownMenuProps ) {
+	const {
+		children,
+		className,
+		controls,
+		icon = menu,
+		label,
+		popoverProps,
+		toggleProps,
+		menuProps,
+		disableOpenOnArrowDown = false,
+		text,
+		noIcons,
+	} = dropdownMenuProps;
+
 	if ( isEmpty( controls ) && ! isFunction( children ) ) {
 		return null;
 	}

packages/components/src/dropdown/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/menu-group/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */
@@ -9,12 +10,8 @@ import classnames from 'classnames';
 import { Children } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
-export function MenuGroup( {
-	children,
-	className = '',
-	label,
-	hideSeparator,
-} ) {
+export function MenuGroup( props ) {
+	const { children, className = '', label, hideSeparator } = props;
 	const instanceId = useInstanceId( MenuGroup );
 
 	if ( ! Children.count( children ) ) {

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */
@@ -16,34 +17,18 @@ import Shortcut from '../shortcut';
 import Button from '../button';
 import Icon from '../icon';
 
-/**
- * Renders a generic menu item for use inside the more menu.
- *
- * @param {Object}        props                   Component props.
- * @param {WPElement}     props.children          Element to render as child of button.
- * @param {string}        props.info              Text to use as description for button text.
- * @param {string}        props.className         Class to set on the container.
- * @param {WPIcon}        props.icon              Button's `icon` prop.
- * @param {string|Object} props.shortcut          Shortcut's `shortcut` prop.
- * @param {boolean}       props.isSelected        Whether or not the menu item is currently selected.
- * @param {string}        [props.role="menuitem"] ARIA role of the menu item.
- * @param {Object}        ref                     React Element ref.
- *
- * @return {WPComponent} The component to be rendered.
- */
-export function MenuItem(
-	{
+export function MenuItem( props, ref ) {
+	let {
 		children,
 		info,
 		className,
 		icon,
 		shortcut,
 		isSelected,
 		role = 'menuitem',
-		...props
-	},
-	ref
-) {
+		...buttonProps
+	} = props;
+
 	className = classnames( 'components-menu-item__button', className );
 
 	if ( info ) {
@@ -72,7 +57,7 @@ export function MenuItem(
 			}
 			role={ role }
 			className={ className }
-			{ ...props }
+			{ ...buttonProps }
 		>
 			<span className="components-menu-item__item">{ children }</span>
 			<Shortcut

packages/components/src/navigable-container/container.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/navigable-container/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * Internal Dependencies
  */

packages/components/src/navigable-container/menu.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

packages/components/src/navigable-container/tabbable.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

packages/components/src/tools-panel/context.ts

@@ -9,4 +9,5 @@ import { createContext, useContext } from '@wordpress/element';
 import type { TPContext } from './types';
 
 export const ToolsPanelContext = createContext< TPContext >( {} );
-export const useToolsPanelContext = () => useContext( ToolsPanelContext );
+export const useToolsPanelContext = () =>
+	useContext< TPContext >( ToolsPanelContext );

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

@@ -1,7 +1,3 @@
-// This can be removed once typing has been completed for DropdownMenu,
-// MenuGroup & MenuItem.
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -22,9 +18,14 @@ import MenuGroup from '../../menu-group';
 import MenuItem from '../../menu-item';
 import { useToolsPanelHeader } from './hook';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
-import type { ToolsPanelHeaderProps } from '../types';
+import type {
+	ToolsPanelControlsGroupProps,
+	ToolsPanelHeaderProps,
+} from '../types';
+
+const DefaultControlsGroup = ( props: ToolsPanelControlsGroupProps ) => {
+	const { items, onClose, toggleItem } = props;
 
-const DefaultControlsGroup = ( { items, onClose, toggleItem } ) => {
 	if ( ! items.length ) {
 		return null;
 	}
@@ -62,7 +63,9 @@ const DefaultControlsGroup = ( { items, onClose, toggleItem } ) => {
 	);
 };
 
-const OptionalControlsGroup = ( { items, onClose, toggleItem } ) => {
+const OptionalControlsGroup = ( props: ToolsPanelControlsGroupProps ) => {
+	const { items, onClose, toggleItem } = props;
+
 	if ( ! items.length ) {
 		return null;
 	}
@@ -132,7 +135,7 @@ const ToolsPanelHeader = (
 					label={ labelText }
 					menuProps={ { className: dropdownMenuClassName } }
 				>
-					{ ( { onClose } ) => (
+					{ ( { onClose = () => undefined } ) => (
 						<>
 							<DefaultControlsGroup
 								items={ defaultItems }

packages/components/src/tools-panel/tools-panel-item/hook.ts

@@ -36,9 +36,9 @@ export function useToolsPanelItem(
 	const {
 		panelId: currentPanelId,
 		menuItems,
-		registerPanelItem,
-		deregisterPanelItem,
-		flagItemCustomization,
+		registerPanelItem = () => undefined,
+		deregisterPanelItem = () => undefined,
+		flagItemCustomization = () => undefined,
 		isResetting,
 	} = useToolsPanelContext();
 

packages/components/src/tools-panel/tools-panel/hook.ts

@@ -9,12 +9,20 @@ import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
 import * as styles from '../styles';
 import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { ToolsPanelProps, ToolsPanelItem } from '../types';
-
-const generateMenuItems = ( { panelItems, reset } ) => {
-	const menuItems = { default: {}, optional: {} };
-
-	panelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {
+import type {
+	ToolsPanelItem,
+	ToolsPanelMenuItemKey,
+	ToolsPanelMenuItems,
+	ToolsPanelMenuItemsConfig,
+	ToolsPanelProps,
+} from '../types';
+
+const generateMenuItems = ( config: ToolsPanelMenuItemsConfig ) => {
+	const { panelItems, reset } = config;
+	const menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
+
+	panelItems.forEach( ( panelItem: ToolsPanelItem ) => {
+		const { hasValue, isShownByDefault, label } = panelItem;
 		const group = isShownByDefault ? 'default' : 'optional';
 		menuItems[ group ][ label ] = reset ? false : hasValue();
 	} );
@@ -49,7 +57,7 @@ export function useToolsPanel(
 	}, [ wasResetting ] );
 
 	// Allow panel items to register themselves.
-	const [ panelItems, setPanelItems ] = useState( [] );
+	const [ panelItems, setPanelItems ] = useState( <ToolsPanelItem[]>[] );
 
 	const registerPanelItem = ( item: ToolsPanelItem ) => {
 		setPanelItems( ( items ) => [ ...items, item ] );
@@ -62,7 +70,9 @@ export function useToolsPanel(
 		// controls, e.g. both panels have a "padding" control, the
 		// deregistration of the first panel doesn't occur until after the
 		// registration of the next.
-		const index = panelItems.findIndex( ( item ) => item.label === label );
+		const index = panelItems.findIndex(
+			( item: ToolsPanelItem ) => item.label === label
+		);
 
 		if ( index !== -1 ) {
 			setPanelItems( ( items ) => items.splice( index, 1 ) );
@@ -73,7 +83,10 @@ export function useToolsPanel(
 	// This is intended for use with default panel items. They are displayed
 	// separately to optional items and have different display states,
 	//.we need to update that when their value is customized.
-	const flagItemCustomization = ( label: string, group = 'default' ) => {
+	const flagItemCustomization = (
+		label: string,
+		group: ToolsPanelMenuItemKey = 'default'
+	) => {
 		setMenuItems( {
 			...menuItems,
 			[ group ]: {
@@ -84,12 +97,15 @@ export function useToolsPanel(
 	};
 
 	// Manage and share display state of menu items representing child controls.
-	const [ menuItems, setMenuItems ] = useState( {} );
+	const [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {
+		default: {},
+		optional: {},
+	} );
 
 	const getResetAllFilters = () => {
-		const filters = [];
+		const filters: Array< Function > = [];
 
-		panelItems.forEach( ( item ) => {
+		panelItems.forEach( ( item: ToolsPanelItem ) => {
 			if ( item.resetAllFilter ) {
 				filters.push( item.resetAllFilter );
 			}
@@ -99,28 +115,37 @@ export function useToolsPanel(
 
 	// Setup menuItems state as panel items register themselves.
 	useEffect( () => {
-		const items = generateMenuItems( { panelItems, reset: false } );
+		const items: ToolsPanelMenuItems = generateMenuItems( {
+			panelItems,
+			reset: false,
+		} );
 		setMenuItems( items );
 	}, [ panelItems ] );
 
 	// Toggle the checked state of a menu item which is then used to determine
 	// display of the item within the panel.
 	const toggleItem = ( label: string ) => {
-		const currentItem = panelItems.find( ( item ) => item.label === label );
+		const currentItem: ToolsPanelItem | undefined = panelItems.find(
+			( item: ToolsPanelItem ) => item.label === label
+		);
 
 		if ( ! currentItem ) {
 			return;
 		}
 
-		const menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';
+		const menuGroup: ToolsPanelMenuItemKey = currentItem.isShownByDefault
+			? 'default'
+			: 'optional';
 
-		setMenuItems( {
+		const newMenuItems: ToolsPanelMenuItems = {
 			...menuItems,
 			[ menuGroup ]: {
 				...menuItems[ menuGroup ],
 				[ label ]: ! menuItems[ menuGroup ][ label ],
 			},
-		} );
+		};
+
+		setMenuItems( newMenuItems );
 	};
 
 	// Resets display of children and executes resetAll callback if available.

packages/components/src/tools-panel/types.ts

@@ -41,12 +41,29 @@ export interface ToolsPanelItemProps extends ToolsPanelItem {
 	resetAllFilter: ResetAllFilter;
 }
 
+export type ToolsPanelMenuItemKey = 'default' | 'optional';
+
+export type ToolsPanelMenuItems = {
+	[ menuItemKey in ToolsPanelMenuItemKey ]: { [ key: string ]: boolean };
+};
+
 export interface TPContext {
 	panelId?: PanelId;
-	menuItems?: { [ key: string ]: boolean };
+	menuItems?: ToolsPanelMenuItems;
 	hasMenuItems?: number;
 	registerPanelItem?: ( item: ToolsPanelItem ) => void;
 	deregisterPanelItem?: ( label: Label ) => void;
 	flagItemCustomization?: ( label: Label ) => void;
 	isResetting?: boolean;
 }
+
+export interface ToolsPanelControlsGroupProps {
+	items: [ string, boolean ][];
+	onClose: () => void;
+	toggleItem: ( label: Label ) => void;
+}
+
+export interface ToolsPanelMenuItemsConfig {
+	panelItems: ToolsPanelItem[];
+	reset: boolean;
+}

packages/components/tsconfig.json

@@ -31,6 +31,8 @@
 		"src/disabled/**/*",
 		"src/divider/**/*",
 		"src/draggable/**/*",
+		"src/dropdown/**/*",
+		"src/dropdown-menu/**/*",
 		"src/elevation/**/*",
 		"src/flex/**/*",
 		"src/flyout/**/*",
@@ -41,6 +43,9 @@
 		"src/item-group/**/*",
 		"src/input-control/**/*",
 		"src/icon/**/*",
+		"src/menu-item/**/*",
+		"src/menu-group/**/*",
+		"src/navigable-container/**/*",
 		"src/number-control/**/*",
 		"src/popover/**/*",
 		"src/range-control/**/*",
@@ -55,6 +60,7 @@
 		"src/text/**/*",
 		"src/tip/**/*",
 		"src/toggle-group-control/**/*",
+		"src/tools-panel/**/*",
 		"src/tooltip/**/*",
 		"src/truncate/**/*",
 		"src/ui/**/*",