From 16f6def3764a357d1fde50d454510006782c2550 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 16 Aug 2021 14:19:26 +1200 Subject: [PATCH] Switch to PolymorphicComponentProps type --- .../tools-panel/tools-panel-header/component.tsx | 14 ++++++++++---- .../src/tools-panel/tools-panel-header/hook.ts | 6 ++++-- .../tools-panel/tools-panel-item/component.tsx | 14 ++++++++++---- .../src/tools-panel/tools-panel-item/hook.ts | 6 ++++-- .../src/tools-panel/tools-panel/component.tsx | 15 ++++++++++++--- .../src/tools-panel/tools-panel/hook.ts | 6 ++++-- packages/components/src/tools-panel/types.ts | 4 +--- 7 files changed, 45 insertions(+), 20 deletions(-) diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/src/tools-panel/tools-panel-header/component.tsx index 83fe5202e0d41b..a2567ddafbfd6b 100644 --- a/packages/components/src/tools-panel/tools-panel-header/component.tsx +++ b/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, diff --git a/packages/components/src/tools-panel/tools-panel-header/hook.ts b/packages/components/src/tools-panel/tools-panel-header/hook.ts index 1d3d371d2390da..69efca776d20df 100644 --- a/packages/components/src/tools-panel/tools-panel-header/hook.ts +++ b/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' diff --git a/packages/components/src/tools-panel/tools-panel-item/component.tsx b/packages/components/src/tools-panel/tools-panel-item/component.tsx index 3efd81bd55a1e6..d2627930d50c77 100644 --- a/packages/components/src/tools-panel/tools-panel-item/component.tsx +++ b/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 diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.ts b/packages/components/src/tools-panel/tools-panel-item/hook.ts index 152dcd134c2bab..4b62f9c311ed30 100644 --- a/packages/components/src/tools-panel/tools-panel-item/hook.ts +++ b/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, diff --git a/packages/components/src/tools-panel/tools-panel/component.tsx b/packages/components/src/tools-panel/tools-panel/component.tsx index 642a51c1aa2759..f4c63b68346583 100644 --- a/packages/components/src/tools-panel/tools-panel/component.tsx +++ b/packages/components/src/tools-panel/tools-panel/component.tsx @@ -1,3 +1,9 @@ +/** + * External dependencies + */ +// eslint-disable-next-line no-restricted-imports +import type { Ref } from 'react'; + /** * Internal dependencies */ @@ -5,10 +11,13 @@ 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, diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts index 5620a287ea32d7..091b8c74e2c285 100644 --- a/packages/components/src/tools-panel/tools-panel/hook.ts +++ b/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' diff --git a/packages/components/src/tools-panel/types.ts b/packages/components/src/tools-panel/types.ts index 41a660cf30bbe5..67a2d0133bca62 100644 --- a/packages/components/src/tools-panel/types.ts +++ b/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;