Switch to PolymorphicComponentProps type

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

@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -11,12 +17,12 @@ import DropdownMenu from '../../dropdown-menu';
 import MenuGroup from '../../menu-group';
 import MenuItem from '../../menu-item';
 import { useToolsPanelHeader } from './hook';
-import { contextConnect } from '../../ui/context';
-import type { ToolsPanelHeaderProps, forwardRef } from '../types';
+import { contextConnect, PolymorphicComponentProps } from '../../ui/context';
+import type { ToolsPanelHeaderProps } from '../types';
 
 const ToolsPanelHeader = (
-	props: ToolsPanelHeaderProps,
-	forwardedRef: forwardRef
+	props: PolymorphicComponentProps< ToolsPanelHeaderProps, 'h2' >,
+	forwardedRef: Ref< any >
 ) => {
 	const {
 		hasMenuItems,

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

@@ -8,11 +8,13 @@ import { useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { useToolsPanelContext } from '../context';
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, PolymorphicComponentProps } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { ToolsPanelHeaderProps } from '../types';
 
-export function useToolsPanelHeader( props: ToolsPanelHeaderProps ) {
+export function useToolsPanelHeader(
+	props: PolymorphicComponentProps< ToolsPanelHeaderProps, 'h2' >
+) {
 	const { className, ...otherProps } = useContextSystem(
 		props,
 		'ToolsPanelHeader'

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

@@ -1,16 +1,22 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
 /**
  * Internal dependencies
  */
 import { useToolsPanelItem } from './hook';
 import { View } from '../../view';
-import { contextConnect } from '../../ui/context';
-import type { forwardRef, ToolsPanelItemProps } from '../types';
+import { contextConnect, PolymorphicComponentProps } from '../../ui/context';
+import type { 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: ToolsPanelItemProps,
-	forwardedRef: forwardRef
+	props: PolymorphicComponentProps< ToolsPanelItemProps, 'div' >,
+	forwardedRef: Ref< any >
 ) => {
 	const { children, isShown, ...toolsPanelItemProps } = useToolsPanelItem(
 		props

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

@@ -9,11 +9,13 @@ import { useEffect, useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { useToolsPanelContext } from '../context';
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, PolymorphicComponentProps } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { ToolsPanelItemProps } from '../types';
 
-export function useToolsPanelItem( props: ToolsPanelItemProps ) {
+export function useToolsPanelItem(
+	props: PolymorphicComponentProps< ToolsPanelItemProps, 'div' >
+) {
 	const {
 		className,
 		hasValue,

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

@@ -1,14 +1,23 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
 /**
  * Internal dependencies
  */
 import ToolsPanelHeader from '../tools-panel-header';
 import { ToolsPanelContext } from '../context';
 import { useToolsPanel } from './hook';
 import { View } from '../../view';
-import { contextConnect } from '../../ui/context';
-import type { ToolsPanelProps, forwardRef } from '../types';
+import { contextConnect, PolymorphicComponentProps } from '../../ui/context';
+import type { ToolsPanelProps } from '../types';
 
-const ToolsPanel = ( props: ToolsPanelProps, forwardedRef: forwardRef ) => {
+const ToolsPanel = (
+	props: PolymorphicComponentProps< ToolsPanelProps, 'div' >,
+	forwardedRef: Ref< any >
+) => {
 	const {
 		children,
 		header,

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

@@ -7,11 +7,13 @@ import { useEffect, useMemo, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import * as styles from '../styles';
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, PolymorphicComponentProps } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { ToolsPanelProps, ToolsPanelItem } from '../types';
 
-export function useToolsPanel( props: ToolsPanelProps ) {
+export function useToolsPanel(
+	props: PolymorphicComponentProps< ToolsPanelProps, 'div' >
+) {
 	const { className, resetAll, ...otherProps } = useContextSystem(
 		props,
 		'ToolsPanel'

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

@@ -2,9 +2,7 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import type { ReactNode, Ref } from 'react';
-
-export type forwardRef = Ref< any >;
+import type { ReactNode } from 'react';
 
 export interface ToolsPanelProps {
 	label: string;