Components: Rename PolymorphicComponent* types to `WordPressCompone…

…nt*` (#34330)

packages/components/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 -   Fixed RTL styles in `Flex` component ([#33729](https://github.com/WordPress/gutenberg/pull/33729)).
 
+### Internal
+
+-   Renamed `PolymorphicComponent*` types to `WordPressComponent*` ([#34330](https://github.com/WordPress/gutenberg/pull/34330))
+
 ## 16.0.0 (2021-08-23)
 
 ### Breaking Change

packages/components/src/base-field/hook.js

@@ -23,7 +23,7 @@ import { useCx } from '../utils/hooks/use-cx';
 /** @typedef {import('../flex/types').FlexProps & OwnProps} Props */
 
 /**
- * @param {import('../ui/context').PolymorphicComponentProps<Props, 'div'>} props
+ * @param {import('../ui/context').WordPressComponentProps<Props, 'div'>} props
  */
 export function useBaseField( props ) {
 	const {

packages/components/src/card/card-body/component.js

@@ -7,8 +7,8 @@ import { View } from '../../view';
 import { useCardBody } from './hook';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').BodyProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                  forwardedRef
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props
+ * @param {import('react').Ref<any>}                                                                forwardedRef
  */
 function CardBody( props, forwardedRef ) {
 	const { isScrollable, ...otherProps } = useCardBody( props );

packages/components/src/card/card-body/hook.js

@@ -11,7 +11,7 @@ import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').BodyProps, 'div'>} props
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props
  */
 export function useCardBody( props ) {
 	const {

packages/components/src/card/card-divider/component.js

@@ -6,8 +6,8 @@ import { Divider } from '../../divider';
 import { useCardDivider } from './hook';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../../divider').DividerProps, 'hr', false>} props
- * @param {import('react').Ref<any>}                                                                                forwardedRef
+ * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props
+ * @param {import('react').Ref<any>}                                                                              forwardedRef
  */
 function CardDivider( props, forwardedRef ) {
 	const dividerProps = useCardDivider( props );

packages/components/src/card/card-divider/hook.js

@@ -11,7 +11,7 @@ import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../../divider').DividerProps, 'hr', false>} props
+ * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props
  */
 export function useCardDivider( props ) {
 	const { className, ...otherProps } = useContextSystem(

packages/components/src/card/card-footer/component.js

@@ -6,8 +6,8 @@ import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FooterProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                    forwardedRef
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props
+ * @param {import('react').Ref<any>}                                                                  forwardedRef
  */
 function CardFooter( props, forwardedRef ) {
 	const footerProps = useCardFooter( props );

packages/components/src/card/card-footer/hook.js

@@ -11,7 +11,7 @@ import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FooterProps, 'div'>} props
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props
  */
 export function useCardFooter( props ) {
 	const {

packages/components/src/card/card-header/component.js

@@ -6,8 +6,8 @@ import { Flex } from '../../flex';
 import { useCardHeader } from './hook';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').HeaderProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                    forwardedRef
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props
+ * @param {import('react').Ref<any>}                                                                  forwardedRef
  */
 function CardHeader( props, forwardedRef ) {
 	const headerProps = useCardHeader( props );

packages/components/src/card/card-header/hook.js

@@ -11,7 +11,7 @@ import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').HeaderProps, 'div'>} props
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props
  */
 export function useCardHeader( props ) {
 	const {

packages/components/src/card/card-media/hook.js

@@ -11,7 +11,7 @@ import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} props
+ * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
  */
 export function useCardMedia( props ) {
 	const { className, ...otherProps } = useContextSystem( props, 'CardMedia' );

packages/components/src/card/card/component.js

@@ -20,8 +20,8 @@ import CONFIG from '../../utils/config-values';
 import { useCx } from '../../utils/hooks/use-cx';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                              forwardedRef
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
+ * @param {import('react').Ref<any>}                                                            forwardedRef
  */
 function Card( props, forwardedRef ) {
 	const {

packages/components/src/card/card/hook.js

@@ -13,10 +13,10 @@ import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div'>} props
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
  */
 function useDeprecatedProps( { elevation, isElevated, ...otherProps } ) {
-	/**@type {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div'>} */
+	/**@type {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} */
 	const propsToReturn = {
 		...otherProps,
 	};
@@ -40,7 +40,7 @@ function useDeprecatedProps( { elevation, isElevated, ...otherProps } ) {
 }
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div'>} props
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
  */
 export function useCard( props ) {
 	const {

packages/components/src/divider/component.tsx

@@ -9,13 +9,16 @@ import type { Ref } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, useContextSystem } from '../ui/context';
-import type { PolymorphicComponentProps } from '../ui/context';
+import {
+	contextConnect,
+	useContextSystem,
+	WordPressComponentProps,
+} from '../ui/context';
 import { DividerView } from './styles';
 import type { Props } from './types';
 
 function Divider(
-	props: PolymorphicComponentProps< Props, 'hr', false >,
+	props: WordPressComponentProps< Props, 'hr', false >,
 	forwardedRef: Ref< any >
 ) {
 	const contextProps = useContextSystem( props, 'Divider' );

packages/components/src/elevation/hook.js

@@ -30,7 +30,7 @@ export function getBoxShadow( value ) {
 }
 
 /**
- * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'div'>} props
+ * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
  */
 export function useElevation( props ) {
 	const {

packages/components/src/flex/flex-block/hook.js

@@ -5,7 +5,7 @@ import { useContextSystem } from '../../ui/context';
 import { useFlexItem } from '../flex-item';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexBlockProps, 'div'>} props
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props
  */
 export function useFlexBlock( props ) {
 	const otherProps = useContextSystem( props, 'FlexBlock' );

packages/components/src/flex/flex-item/hook.js

@@ -12,7 +12,7 @@ import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexItemProps, 'div'>} props
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props
  */
 export function useFlexItem( props ) {
 	const {

packages/components/src/flex/flex/component.js

@@ -7,8 +7,8 @@ import { FlexContext } from './../context';
 import { View } from '../../view';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                  forwardedRef
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
+ * @param {import('react').Ref<any>}                                                                forwardedRef
  */
 function Flex( props, forwardedRef ) {
 	const { children, isColumn, ...otherProps } = useFlex( props );

packages/components/src/flex/flex/hook.js

@@ -20,8 +20,8 @@ import { useCx, rtl } from '../../utils';
 
 /**
  *
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexProps, 'div'>} props
- * @return {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexProps, 'div'>} Props with the deprecated props removed.
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
+ * @return {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} Props with the deprecated props removed.
  */
 function useDeprecatedProps( { isReversed, ...otherProps } ) {
 	if ( typeof isReversed !== 'undefined' ) {
@@ -39,7 +39,7 @@ function useDeprecatedProps( { isReversed, ...otherProps } ) {
 }
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexProps, 'div'>} props
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
  */
 export function useFlex( props ) {
 	const {

packages/components/src/flyout/flyout-content/component.js

@@ -7,8 +7,8 @@ import { contextConnect, useContextSystem } from '../../ui/context';
 
 /**
  *
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').ContentProps, 'div', false>} props
- * @param {import('react').Ref<any>}                                                                            forwardedRef
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').ContentProps, 'div', false>} props
+ * @param {import('react').Ref<any>}                                                                          forwardedRef
  */
 function FlyoutContent( props, forwardedRef ) {
 	const {

packages/components/src/flyout/flyout/component.js

@@ -21,8 +21,8 @@ import { useFlyout } from './hook';
 
 /**
  *
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div', false>} props
- * @param {import('react').Ref<any>}                                                                     forwardedRef
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div', false>} props
+ * @param {import('react').Ref<any>}                                                                   forwardedRef
  */
 function Flyout( props, forwardedRef ) {
 	const {

packages/components/src/flyout/flyout/hook.js

@@ -10,7 +10,7 @@ import { usePopoverState } from 'reakit';
 import { useContextSystem } from '../../ui/context';
 
 /**
- * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div', false>} props
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div', false>} props
  */
 export function useFlyout( props ) {
 	const {

packages/components/src/grid/hook.js

@@ -18,7 +18,7 @@ import CONFIG from '../utils/config-values';
 import { useCx } from '../utils/hooks/use-cx';
 
 /**
- * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'div'>} props
+ * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
  */
 export default function useGrid( props ) {
 	const {

packages/components/src/h-stack/hook.js

@@ -8,7 +8,7 @@ import { getValidChildren } from '../ui/utils/get-valid-children';
 
 /**
  *
- * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'div'>} props
+ * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
  */
 export function useHStack( props ) {
 	const {

packages/components/src/heading/hook.ts

@@ -1,8 +1,7 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../ui/context';
-import type { PolymorphicComponentProps } from '../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../ui/context';
 import type { Props as TextProps } from '../text/types';
 import { useText } from '../text';
 import { getHeadingFontSize } from '../ui/utils/font-size';
@@ -50,7 +49,7 @@ export interface HeadingProps extends Omit< TextProps, 'size' > {
 }
 
 export function useHeading(
-	props: PolymorphicComponentProps< HeadingProps, 'h1' >
+	props: WordPressComponentProps< HeadingProps, 'h1' >
 ) {
 	const { as: asProp, level = 2, ...otherProps } = useContextSystem(
 		props,

packages/components/src/input-control/input-field.tsx

@@ -22,7 +22,7 @@ import { UP, DOWN, ENTER } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import type { PolymorphicComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
 import { useDragCursor } from './utils';
 import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './reducer/reducer';
@@ -53,7 +53,7 @@ function InputField(
 		value: valueProp,
 		type,
 		...props
-	}: PolymorphicComponentProps< InputFieldProps, 'input', false >,
+	}: WordPressComponentProps< InputFieldProps, 'input', false >,
 	ref: Ref< HTMLInputElement >
 ) {
 	const {

packages/components/src/input-control/label.tsx

@@ -3,15 +3,15 @@
  */
 import { VisuallyHidden } from '../visually-hidden';
 import { Label as BaseLabel } from './styles/input-control-styles';
-import type { PolymorphicComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
 import type { InputControlLabelProps } from './types';
 
 export default function Label( {
 	children,
 	hideLabelFromVision,
 	htmlFor,
 	...props
-}: PolymorphicComponentProps< InputControlLabelProps, 'label', false > ) {
+}: WordPressComponentProps< InputControlLabelProps, 'label', false > ) {
 	if ( ! children ) return null;
 
 	if ( hideLabelFromVision ) {

packages/components/src/input-control/styles/input-control-styles.tsx

@@ -9,7 +9,7 @@ import type { CSSProperties, ReactNode } from 'react';
 /**
  * Internal dependencies
  */
-import type { PolymorphicComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { COLORS, rtl } from '../../utils';
@@ -251,7 +251,7 @@ const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
 `;
 
 export const Label = (
-	props: PolymorphicComponentProps<
+	props: WordPressComponentProps<
 		{ labelPosition?: LabelPosition; children: ReactNode },
 		'label',
 		false

packages/components/src/input-control/types.ts

@@ -15,7 +15,7 @@ import type { useDrag } from 'react-use-gesture';
  */
 import type { StateReducer } from './reducer/state';
 import type { FlexProps } from '../flex/types';
-import type { PolymorphicComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
 
 export type LabelPosition = 'top' | 'bottom' | 'side' | 'edge';
 
@@ -65,17 +65,17 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 export interface InputControlProps
 	extends Omit< InputBaseProps, 'children' | 'isFocused' >,
 		/**
-		 * The `prefix` prop in `PolymorphicComponentProps< InputFieldProps, 'input', false >` comes from the
+		 * The `prefix` prop in `WordPressComponentProps< InputFieldProps, 'input', false >` comes from the
 		 * `HTMLInputAttributes` and clashes with the one from `InputBaseProps`. So we have to omit it from
-		 * `PolymorphicComponentProps< InputFieldProps, 'input', false >` in order that `InputBaseProps[ 'prefix' ]`
+		 * `WordPressComponentProps< InputFieldProps, 'input', false >` in order that `InputBaseProps[ 'prefix' ]`
 		 * be the only prefix prop. Otherwise it tries to do a union of the two prefix properties and you end up
 		 * with an unresolvable type.
 		 *
 		 * `isFocused` and `setIsFocused` are managed internally by the InputControl, but the rest of the props
 		 * for InputField are passed through.
 		 */
 		Omit<
-			PolymorphicComponentProps< InputFieldProps, 'input', false >,
+			WordPressComponentProps< InputFieldProps, 'input', false >,
 			'stateReducer' | 'prefix' | 'isFocused' | 'setIsFocused'
 		> {
 	__unstableStateReducer?: InputFieldProps[ 'stateReducer' ];

packages/components/src/item-group/item-group/component.tsx

@@ -7,14 +7,14 @@ import type { Ref } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, PolymorphicComponentProps } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { useItemGroup } from './hook';
 import { ItemGroupContext, useItemGroupContext } from '../context';
 import { View } from '../../view';
 import type { ItemGroupProps } from '../types';
 
 function ItemGroup(
-	props: PolymorphicComponentProps< ItemGroupProps, 'div' >,
+	props: WordPressComponentProps< ItemGroupProps, 'div' >,
 	forwardedRef: Ref< any >
 ) {
 	const {