Rename ViewOwnProps to PolymorphicComponentProps (#32053)

packages/components/src/divider/component.tsx

@@ -19,7 +19,7 @@ import { useMemo } from '@wordpress/element';
  */
 import { contextConnect, useContextSystem } from '../ui/context';
 // eslint-disable-next-line no-duplicate-imports
-import type { ViewOwnProps } from '../ui/context';
+import type { PolymorphicComponentProps } from '../ui/context';
 import * as styles from './styles';
 import { space } from '../ui/utils/space';
 
@@ -39,7 +39,7 @@ export interface DividerProps extends SeparatorProps {
 }
 
 function Divider(
-	props: ViewOwnProps< DividerProps, 'hr' >,
+	props: PolymorphicComponentProps< DividerProps, 'hr' >,
 	forwardedRef: Ref< any >
 ) {
 	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').ViewOwnProps<import('../types').FlexBlockProps, 'div'>} props
+ * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexBlockProps, 'div'>} props
  */
 export function useFlexBlock( props ) {
 	const otherProps = useContextSystem( props, 'FlexBlock' );

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

@@ -11,7 +11,7 @@ import { useFlexContext } from '../context';
 import * as styles from '../styles';
 
 /**
- * @param {import('../../ui/context').ViewOwnProps<import('../types').FlexItemProps, 'div'>} props
+ * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexItemProps, 'div'>} props
  */
 export function useFlexItem( props ) {
 	const {

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

@@ -7,7 +7,7 @@ import { FlexContext } from './../context';
 import { View } from '../../view';
 
 /**
- * @param {import('../../ui/context').ViewOwnProps<import('../types').FlexProps, 'div'>} props
+ * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexProps, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function Flex( props, forwardedRef ) {

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

@@ -19,8 +19,8 @@ import * as styles from '../styles';
 
 /**
  *
- * @param {import('../../ui/context').ViewOwnProps<import('../types').FlexProps, 'div'>} props
- * @return {import('../../ui/context').ViewOwnProps<import('../types').FlexProps, 'div'>} Props with the deprecated props removed.
+ * @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.
  */
 function useDeprecatedProps( { isReversed, ...otherProps } ) {
 	if ( typeof isReversed !== 'undefined' ) {
@@ -38,7 +38,7 @@ function useDeprecatedProps( { isReversed, ...otherProps } ) {
 }
 
 /**
- * @param {import('../../ui/context').ViewOwnProps<import('../types').FlexProps, 'div'>} props
+ * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexProps, 'div'>} props
  */
 export function useFlex( props ) {
 	const {

packages/components/src/grid/hook.js

@@ -17,7 +17,7 @@ import { useResponsiveValue } from '../ui/utils/use-responsive-value';
 import CONFIG from '../utils/config-values';
 
 /**
- * @param {import('../ui/context').ViewOwnProps<import('./types').Props, 'div'>} props
+ * @param {import('../ui/context').PolymorphicComponentProps<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').ViewOwnProps<import('./types').Props, 'div'>} props
+ * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'div'>} props
  */
 export function useHStack( props ) {
 	const {

packages/components/src/heading/hook.ts

@@ -3,7 +3,7 @@
  */
 import { useContextSystem } from '../ui/context';
 // eslint-disable-next-line no-duplicate-imports
-import type { ViewOwnProps } from '../ui/context';
+import type { PolymorphicComponentProps } from '../ui/context';
 import type { Props as TextProps } from '../text/types';
 import { useText } from '../text';
 import { getHeadingFontSize } from '../ui/utils/font-size';
@@ -50,7 +50,9 @@ export interface HeadingProps extends Omit< TextProps, 'size' > {
 	level: HeadingSize;
 }
 
-export function useHeading( props: ViewOwnProps< HeadingProps, 'h1' > ) {
+export function useHeading(
+	props: PolymorphicComponentProps< HeadingProps, 'h1' >
+) {
 	const { as: asProp, level = 2, ...otherProps } = useContextSystem(
 		props,
 		'Heading'

packages/components/src/spacer/hook.ts

@@ -8,7 +8,7 @@ import { css, cx } from 'emotion';
  */
 import { useContextSystem } from '../ui/context';
 // eslint-disable-next-line no-duplicate-imports
-import type { ViewOwnProps } from '../ui/context';
+import type { PolymorphicComponentProps } from '../ui/context';
 import { space } from '../ui/utils/space';
 
 const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > =>
@@ -75,7 +75,9 @@ export interface SpacerProps {
 	paddingRight?: number;
 }
 
-export function useSpacer( props: ViewOwnProps< SpacerProps, 'div' > ) {
+export function useSpacer(
+	props: PolymorphicComponentProps< SpacerProps, 'div' >
+) {
 	const {
 		className,
 		margin,

packages/components/src/text/hook.js

@@ -22,7 +22,7 @@ import { CONFIG, COLORS } from '../utils';
 import { getLineHeight } from './get-line-height';
 
 /**
- * @param {import('../ui/context').ViewOwnProps<import('./types').Props, 'span'>} props
+ * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'span'>} props
  */
 export default function useText( props ) {
 	const {

packages/components/src/truncate/hook.js

@@ -16,7 +16,7 @@ import * as styles from './styles';
 import { TRUNCATE_ELLIPSIS, TRUNCATE_TYPE, truncateContent } from './utils';
 
 /**
- * @param {import('../ui/context').ViewOwnProps<import('./types').Props, 'span'>} props
+ * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'span'>} props
  */
 export default function useTruncate( props ) {
 	const {

packages/components/src/ui/card/body.js

@@ -17,7 +17,7 @@ import { View } from '../../view';
 import * as styles from './styles';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').CardBodyProps, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').CardBodyProps, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function CardBody( props, forwardedRef ) {

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

@@ -19,7 +19,7 @@ import { useCard } from './hook';
 import CONFIG from '../../utils/config-values';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').CardProps, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').CardProps, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function Card( props, forwardedRef ) {

packages/components/src/ui/card/footer.js

@@ -16,7 +16,7 @@ import { Flex } from '../../flex';
 import * as styles from './styles';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').CardFooterProps, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').CardFooterProps, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function CardFooter( props, forwardedRef ) {

packages/components/src/ui/card/header.js

@@ -16,7 +16,7 @@ import { Flex } from '../../flex';
 import * as styles from './styles';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').CardHeaderProps, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').CardHeaderProps, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function CardHeader( props, forwardedRef ) {

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

@@ -16,7 +16,7 @@ import { useSurface } from '../surface';
 import * as styles from './styles';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').CardProps, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').CardProps, 'div'>} props
  */
 export function useCard( props ) {
 	const {

packages/components/src/ui/card/inner-body.js

@@ -11,7 +11,7 @@ import { contextConnect, useContextSystem } from '../context';
 import * as styles from './styles';
 
 /**
- * @param {import('../context').ViewOwnProps<{}, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<{}, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function CardInnerBody( props, forwardedRef ) {

packages/components/src/ui/context/context-connect.js

@@ -24,12 +24,12 @@ import { getStyledClassNameFromKey } from './get-styled-class-name-from-key';
  * The hope is that we can improve render performance by removing functional
  * component wrappers.
  *
- * @template {import('./polymorphic-component').ViewOwnProps<{}, any>} P
+ * @template {import('./polymorphic-component').PolymorphicComponentProps<{}, any>} P
  * @param {(props: P, ref: import('react').Ref<any>) => JSX.Element | null} Component The component to register into the Context system.
  * @param {string} namespace The namespace to register the component under.
  * @param {Object} options
  * @param {boolean} [options.memo=false]
- * @return {import('./polymorphic-component').PolymorphicComponent<import('./polymorphic-component').ElementTypeFromViewOwnProps<P>, import('./polymorphic-component').PropsFromViewOwnProps<P>>} The connected PolymorphicComponent
+ * @return {import('./polymorphic-component').PolymorphicComponent<import('./polymorphic-component').ElementTypeFromPolymorphicComponentProps<P>, import('./polymorphic-component').PropsFromPolymorphicComponentProps<P>>} The connected PolymorphicComponent
  */
 export function contextConnect( Component, namespace, options = {} ) {
 	/* eslint-enable jsdoc/valid-types */

packages/components/src/ui/context/polymorphic-component.ts

@@ -9,28 +9,25 @@ import type { Interpolation } from 'create-emotion';
 /**
  * Based on https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/types.ts
  */
-export type ViewOwnProps< P, T extends As > = P &
+export type PolymorphicComponentProps< P, T extends As > = P &
 	Omit< React.ComponentPropsWithRef< T >, 'as' | keyof P > & {
 		as?: T | keyof JSX.IntrinsicElements;
 		children?: React.ReactNode | RenderProp< ExtractHTMLAttributes< any > >;
 	};
 
-export type ElementTypeFromViewOwnProps< P > = P extends ViewOwnProps<
-	unknown,
-	infer T
->
-	? T
-	: never;
+export type ElementTypeFromPolymorphicComponentProps<
+	P
+> = P extends PolymorphicComponentProps< unknown, infer T > ? T : never;
 
-export type PropsFromViewOwnProps< P > = P extends ViewOwnProps< infer PP, any >
-	? PP
-	: never;
+export type PropsFromPolymorphicComponentProps<
+	P
+> = P extends PolymorphicComponentProps< infer PP, any > ? PP : never;
 
 export type PolymorphicComponent< T extends As, O > = {
 	< TT extends As >(
-		props: ViewOwnProps< O, TT > & { as: TT }
+		props: PolymorphicComponentProps< O, TT > & { as: TT }
 	): JSX.Element | null;
-	( props: ViewOwnProps< O, T > ): JSX.Element | null;
+	( props: PolymorphicComponentProps< O, T > ): JSX.Element | null;
 	displayName?: string;
 	selector: string;
 };

packages/components/src/ui/control-group/component.js

@@ -11,7 +11,7 @@ import { useControlGroup } from './hook';
 import { contextConnect } from '../context';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').Props, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').Props, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function ControlGroup( props, forwardedRef ) {

packages/components/src/ui/control-group/hook.js

@@ -12,7 +12,7 @@ import { ControlGroupContext } from './context';
 import * as styles from './styles';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').Props, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').Props, 'div'>} props
  */
 export function useControlGroup( props ) {
 	const {

packages/components/src/ui/control-label/hook.js

@@ -12,7 +12,7 @@ import { useText } from '../../text';
 import * as styles from './styles';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').Props, 'label'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').Props, 'label'>} props
  */
 export function useControlLabel( props ) {
 	const {

packages/components/src/ui/elevation/hook.js

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

packages/components/src/ui/form-group/form-group-content.js

@@ -12,7 +12,7 @@ import FormGroupHelp from './form-group-help';
 import FormGroupLabel from './form-group-label';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').FormGroupContentProps, 'label'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').FormGroupContentProps, 'label'>} props
  */
 function FormGroupContent( {
 	alignLabel,

packages/components/src/ui/form-group/form-group-label.js

@@ -10,7 +10,7 @@ import { ControlLabel } from '../control-label';
 import VisuallyHidden from '../../visually-hidden';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').FormGroupLabelProps, 'label'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').FormGroupLabelProps, 'label'>} props
  * @return {JSX.Element | null} The form group's label.
  */
 function FormGroupLabel( { children, id, labelHidden = false, ...props } ) {

packages/components/src/ui/form-group/form-group.js

@@ -8,7 +8,7 @@ import FormGroupContent from './form-group-content';
 import { useFormGroup } from './use-form-group';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').FormGroupProps, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').FormGroupProps, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function FormGroup( props, forwardedRef ) {

packages/components/src/ui/form-group/use-form-group.js

@@ -11,7 +11,7 @@ import * as styles from './form-group-styles';
 import { useInstanceId } from '../utils';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').FormGroupProps, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').FormGroupProps, 'div'>} props
  */
 export function useFormGroup( props ) {
 	const {

packages/components/src/ui/popover/component.js

@@ -21,7 +21,7 @@ import { useUpdateEffect } from '../../utils/hooks';
 
 /**
  *
- * @param {import('../context').ViewOwnProps<import('./types').Props, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').Props, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function Popover( props, forwardedRef ) {
@@ -112,7 +112,7 @@ function Popover( props, forwardedRef ) {
  * @example
  * ```jsx
  * import { Button, Popover, Text } from `@wordpress/components/ui`;
- 
+ *
  * function Example() {
  * 	return (
  * 		<Popover trigger={ <Button>Popover</Button> }>

packages/components/src/ui/popover/content.js

@@ -16,7 +16,7 @@ import { contextConnect, useContextSystem } from '../context';
 
 /**
  *
- * @param {import('../context').ViewOwnProps<import('./types').ContentProps, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').ContentProps, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function PopoverContent( props, forwardedRef ) {

packages/components/src/ui/scrollable/hook.js

@@ -16,7 +16,7 @@ import * as styles from './styles';
 
 /* eslint-disable jsdoc/valid-types */
 /**
- * @param {import('../context').ViewOwnProps<import('./types').Props, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').Props, 'div'>} props
  */
 /* eslint-enable jsdoc/valid-types */
 export function useScrollable( props ) {

packages/components/src/ui/shortcut/component.tsx

@@ -9,7 +9,7 @@ import type { Ref } from 'react';
  */
 import { useContextSystem, contextConnect } from '../context';
 // eslint-disable-next-line no-duplicate-imports
-import type { ViewOwnProps } from '../context';
+import type { PolymorphicComponentProps } from '../context';
 
 export interface ShortcutDescription {
 	display: string;
@@ -22,7 +22,7 @@ export interface Props {
 }
 
 function Shortcut(
-	props: ViewOwnProps< Props, 'span' >,
+	props: PolymorphicComponentProps< Props, 'span' >,
 	forwardedRef: Ref< any >
 ): JSX.Element | null {
 	const { shortcut, className, ...otherProps } = useContextSystem(

packages/components/src/ui/spinner/component.js

@@ -16,7 +16,7 @@ import { COLORS } from '../../utils/colors-values';
 
 /**
  *
- * @param {import('../context').ViewOwnProps<Props, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<Props, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function Spinner( props, forwardedRef ) {

packages/components/src/ui/surface/hook.js

@@ -15,7 +15,7 @@ import { useContextSystem } from '../context';
 import * as styles from './styles';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').Props, 'div'>} props
+ * @param {import('../context').PolymorphicComponentProps<import('./types').Props, 'div'>} props
  */
 export function useSurface( props ) {
 	const {