Add remaining types

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

@@ -12,11 +12,11 @@ import MenuGroup from '../../menu-group';
 import MenuItem from '../../menu-item';
 import { useToolsPanelHeader } from './hook';
 import { contextConnect } from '../../ui/context';
-import type { ToolsPanelHeaderProps, toolsPanelforwardRef } from '../types';
+import type { ToolsPanelHeaderProps, forwardRef } from '../types';
 
 const ToolsPanelHeader = (
 	props: ToolsPanelHeaderProps,
-	forwardedRef: toolsPanelforwardRef
+	forwardedRef: forwardRef
 ) => {
 	const {
 		hasMenuItems,

packages/components/src/tools-panel/tools-panel-item/component.js → packages/components/src/tools-panel/tools-panel-item/component.tsx

@@ -4,10 +4,14 @@
 import { useToolsPanelItem } from './hook';
 import { View } from '../../view';
 import { contextConnect } from '../../ui/context';
+import type { forwardRef, ToolsPanelItemProps } from '../types';
 
 // This wraps controls to be conditionally displayed within a tools panel. It
 // prevents props being applied to HTML elements that would make them invalid.
-const ToolsPanelItem = ( props, forwardedRef ) => {
+const ToolsPanelItem = (
+	props: ToolsPanelItemProps,
+	forwardedRef: forwardRef
+) => {
 	const { children, isShown, ...toolsPanelItemProps } = useToolsPanelItem(
 		props
 	);

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

@@ -11,8 +11,9 @@ import * as styles from '../styles';
 import { useToolsPanelContext } from '../context';
 import { useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { ToolsPanelItemProps } from '../types';
 
-export function useToolsPanelItem( props ) {
+export function useToolsPanelItem( props: ToolsPanelItemProps ) {
 	const {
 		className,
 		hasValue,
@@ -26,7 +27,7 @@ export function useToolsPanelItem( props ) {
 	const cx = useCx();
 	const classes = useMemo( () => {
 		return cx( styles.ToolsPanelItem, className );
-	} );
+	}, [ styles.ToolsPanelItem, className ] );
 
 	const { menuItems, registerPanelItem } = useToolsPanelContext();
 

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

@@ -6,12 +6,9 @@ import { ToolsPanelContext } from '../context';
 import { useToolsPanel } from './hook';
 import { View } from '../../view';
 import { contextConnect } from '../../ui/context';
-import type { ToolsPanelProps, toolsPanelforwardRef } from '../types';
+import type { ToolsPanelProps, forwardRef } from '../types';
 
-const ToolsPanel = (
-	props: ToolsPanelProps,
-	forwardedRef: toolsPanelforwardRef
-) => {
+const ToolsPanel = ( props: ToolsPanelProps, forwardedRef: forwardRef ) => {
 	const {
 		children,
 		header,

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

@@ -9,7 +9,7 @@ import { useEffect, useMemo, useState } from '@wordpress/element';
 import * as styles from '../styles';
 import { useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { ToolsPanelProps, ToolPanelItem } from '../types';
+import type { ToolsPanelProps, ToolsPanelItem } from '../types';
 
 export function useToolsPanel( props: ToolsPanelProps ) {
 	const { className, resetAll, ...otherProps } = useContextSystem(
@@ -25,7 +25,7 @@ export function useToolsPanel( props: ToolsPanelProps ) {
 	// Allow panel items to register themselves.
 	const [ panelItems, setPanelItems ] = useState( [] );
 
-	const registerPanelItem = ( item: ToolPanelItem ) => {
+	const registerPanelItem = ( item: ToolsPanelItem ) => {
 		setPanelItems( ( items ) => [ ...items, item ] );
 	};
 

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

@@ -4,30 +4,38 @@
 // eslint-disable-next-line no-restricted-imports
 import type { ReactNode, Ref } from 'react';
 
-export type toolsPanelforwardRef = Ref< any >;
+export type forwardRef = Ref< any >;
 
 export interface ToolsPanelProps {
 	label: string;
 	header: string;
 	children: ReactNode;
-	resetAll: () => undefined;
+	resetAll: () => void;
 	className?: string;
 }
 
 export interface ToolsPanelHeaderProps {
 	menuLabel: string;
 	header: string;
-	resetAll: () => undefined;
-	toggleItem: ( label: string ) => undefined;
+	resetAll: () => void;
+	toggleItem: ( label: string ) => void;
 	className?: string;
 }
 
-export interface ToolPanelItem {
+export interface ToolsPanelItem {
 	hasValue: () => boolean;
 	isShownByDefault: boolean;
 	label: string;
 }
 
+export interface ToolsPanelItemProps extends ToolsPanelItem {
+	children?: ReactNode;
+	onDeselect?: () => void;
+	onSelect?: () => void;
+	className?: string;
+}
+
 export interface TPContext {
 	menuItems?: { [ key: string ]: boolean };
+	registerPanelItem?: ( item: ToolsPanelItem ) => void;
 }