From 66267ca288754dd163c02327b5e513d82aa9d4a0 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 20 May 2021 17:23:15 +0200 Subject: [PATCH] Rename ViewOwnProps to PolymorphicComponentProps --- packages/components/src/divider/component.tsx | 4 ++-- .../components/src/flex/flex-block/hook.js | 2 +- .../components/src/flex/flex-item/hook.js | 2 +- .../components/src/flex/flex/component.js | 2 +- packages/components/src/flex/flex/hook.js | 6 +++--- packages/components/src/grid/hook.js | 2 +- packages/components/src/h-stack/hook.js | 2 +- packages/components/src/heading/hook.ts | 6 ++++-- packages/components/src/spacer/hook.ts | 6 ++++-- packages/components/src/text/hook.js | 2 +- packages/components/src/truncate/hook.js | 2 +- packages/components/src/ui/card/body.js | 2 +- packages/components/src/ui/card/component.js | 2 +- packages/components/src/ui/card/footer.js | 2 +- packages/components/src/ui/card/header.js | 2 +- packages/components/src/ui/card/hook.js | 2 +- packages/components/src/ui/card/inner-body.js | 2 +- .../src/ui/context/context-connect.js | 4 ++-- .../src/ui/context/polymorphic-component.ts | 21 ++++++++----------- .../src/ui/control-group/component.js | 2 +- .../components/src/ui/control-group/hook.js | 2 +- .../components/src/ui/control-label/hook.js | 2 +- packages/components/src/ui/elevation/hook.js | 2 +- .../src/ui/form-group/form-group-content.js | 2 +- .../src/ui/form-group/form-group-label.js | 2 +- .../src/ui/form-group/form-group.js | 2 +- .../src/ui/form-group/use-form-group.js | 2 +- .../components/src/ui/popover/component.js | 4 ++-- packages/components/src/ui/popover/content.js | 2 +- packages/components/src/ui/scrollable/hook.js | 2 +- .../components/src/ui/shortcut/component.tsx | 4 ++-- .../components/src/ui/spinner/component.js | 2 +- packages/components/src/ui/surface/hook.js | 2 +- .../components/src/ui/tooltip/component.js | 2 +- packages/components/src/ui/tooltip/content.js | 2 +- .../src/ui/utils/create-component.tsx | 17 ++++++++------- .../src/ui/utils/test/create-component.js | 2 +- .../components/src/ui/visually-hidden/hook.js | 4 ++-- packages/components/src/v-stack/hook.js | 2 +- 39 files changed, 69 insertions(+), 65 deletions(-) diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx index 4fd4572373678..2ea05e62d63f4 100644 --- a/packages/components/src/divider/component.tsx +++ b/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 { diff --git a/packages/components/src/flex/flex-block/hook.js b/packages/components/src/flex/flex-block/hook.js index 9780aa896ad58..82d0e2abb6e9d 100644 --- a/packages/components/src/flex/flex-block/hook.js +++ b/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} props + * @param {import('../../ui/context').PolymorphicComponentProps} props */ export function useFlexBlock( props ) { const otherProps = useContextSystem( props, 'FlexBlock' ); diff --git a/packages/components/src/flex/flex-item/hook.js b/packages/components/src/flex/flex-item/hook.js index cc1fb57e2fbe3..27b36edbaf2eb 100644 --- a/packages/components/src/flex/flex-item/hook.js +++ b/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} props + * @param {import('../../ui/context').PolymorphicComponentProps} props */ export function useFlexItem( props ) { const { diff --git a/packages/components/src/flex/flex/component.js b/packages/components/src/flex/flex/component.js index 758b4fc98e9f1..f2241aa47511e 100644 --- a/packages/components/src/flex/flex/component.js +++ b/packages/components/src/flex/flex/component.js @@ -7,7 +7,7 @@ import { FlexContext } from './../context'; import { View } from '../../view'; /** - * @param {import('../../ui/context').ViewOwnProps} props + * @param {import('../../ui/context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ function Flex( props, forwardedRef ) { diff --git a/packages/components/src/flex/flex/hook.js b/packages/components/src/flex/flex/hook.js index 89d1d8070ed94..7fb645ebc2e71 100644 --- a/packages/components/src/flex/flex/hook.js +++ b/packages/components/src/flex/flex/hook.js @@ -19,8 +19,8 @@ import * as styles from '../styles'; /** * - * @param {import('../../ui/context').ViewOwnProps} props - * @return {import('../../ui/context').ViewOwnProps} Props with the deprecated props removed. + * @param {import('../../ui/context').PolymorphicComponentProps} props + * @return {import('../../ui/context').PolymorphicComponentProps} 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} props + * @param {import('../../ui/context').PolymorphicComponentProps} props */ export function useFlex( props ) { const { diff --git a/packages/components/src/grid/hook.js b/packages/components/src/grid/hook.js index 6b44bae25e3fe..e596b1644dfd4 100644 --- a/packages/components/src/grid/hook.js +++ b/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} props + * @param {import('../ui/context').PolymorphicComponentProps} props */ export default function useGrid( props ) { const { diff --git a/packages/components/src/h-stack/hook.js b/packages/components/src/h-stack/hook.js index 8d05fa1ada0d7..ceadb162e307b 100644 --- a/packages/components/src/h-stack/hook.js +++ b/packages/components/src/h-stack/hook.js @@ -8,7 +8,7 @@ import { getValidChildren } from '../ui/utils/get-valid-children'; /** * - * @param {import('../ui/context').ViewOwnProps} props + * @param {import('../ui/context').PolymorphicComponentProps} props */ export function useHStack( props ) { const { diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts index aa58ac9089020..cb85d5704f36c 100644 --- a/packages/components/src/heading/hook.ts +++ b/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' diff --git a/packages/components/src/spacer/hook.ts b/packages/components/src/spacer/hook.ts index cd2465627d31c..a40bbcc1de44a 100644 --- a/packages/components/src/spacer/hook.ts +++ b/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, diff --git a/packages/components/src/text/hook.js b/packages/components/src/text/hook.js index 24bc033dc2dbc..ae2afc7282558 100644 --- a/packages/components/src/text/hook.js +++ b/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} props + * @param {import('../ui/context').PolymorphicComponentProps} props */ export default function useText( props ) { const { diff --git a/packages/components/src/truncate/hook.js b/packages/components/src/truncate/hook.js index 07bfc21f6830f..2d8755f3b9a33 100644 --- a/packages/components/src/truncate/hook.js +++ b/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} props + * @param {import('../ui/context').PolymorphicComponentProps} props */ export default function useTruncate( props ) { const { diff --git a/packages/components/src/ui/card/body.js b/packages/components/src/ui/card/body.js index b0514c654f21f..99b624ba8cab7 100644 --- a/packages/components/src/ui/card/body.js +++ b/packages/components/src/ui/card/body.js @@ -17,7 +17,7 @@ import { View } from '../../view'; import * as styles from './styles'; /** - * @param {import('../context').ViewOwnProps} props + * @param {import('../context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ function CardBody( props, forwardedRef ) { diff --git a/packages/components/src/ui/card/component.js b/packages/components/src/ui/card/component.js index 9f169ad4df40f..47affa19f9528 100644 --- a/packages/components/src/ui/card/component.js +++ b/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} props + * @param {import('../context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ function Card( props, forwardedRef ) { diff --git a/packages/components/src/ui/card/footer.js b/packages/components/src/ui/card/footer.js index 40a7445010077..f31a9e5510ace 100644 --- a/packages/components/src/ui/card/footer.js +++ b/packages/components/src/ui/card/footer.js @@ -16,7 +16,7 @@ import { Flex } from '../../flex'; import * as styles from './styles'; /** - * @param {import('../context').ViewOwnProps} props + * @param {import('../context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ function CardFooter( props, forwardedRef ) { diff --git a/packages/components/src/ui/card/header.js b/packages/components/src/ui/card/header.js index 051608dea02b8..bf1ba57260686 100644 --- a/packages/components/src/ui/card/header.js +++ b/packages/components/src/ui/card/header.js @@ -16,7 +16,7 @@ import { Flex } from '../../flex'; import * as styles from './styles'; /** - * @param {import('../context').ViewOwnProps} props + * @param {import('../context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ function CardHeader( props, forwardedRef ) { diff --git a/packages/components/src/ui/card/hook.js b/packages/components/src/ui/card/hook.js index b7b4392b41e80..f434a3626a066 100644 --- a/packages/components/src/ui/card/hook.js +++ b/packages/components/src/ui/card/hook.js @@ -16,7 +16,7 @@ import { useSurface } from '../surface'; import * as styles from './styles'; /** - * @param {import('../context').ViewOwnProps} props + * @param {import('../context').PolymorphicComponentProps} props */ export function useCard( props ) { const { diff --git a/packages/components/src/ui/card/inner-body.js b/packages/components/src/ui/card/inner-body.js index 59efaf6e92567..ab12a97e020ed 100644 --- a/packages/components/src/ui/card/inner-body.js +++ b/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} forwardedRef */ function CardInnerBody( props, forwardedRef ) { diff --git a/packages/components/src/ui/context/context-connect.js b/packages/components/src/ui/context/context-connect.js index a6960e3389a8e..6f6c90f24123b 100644 --- a/packages/components/src/ui/context/context-connect.js +++ b/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) => 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').PropsFromViewOwnProps

>} The connected PolymorphicComponent + * @return {import('./polymorphic-component').PolymorphicComponent, import('./polymorphic-component').PropsFromPolymorphicComponentProps

>} The connected PolymorphicComponent */ export function contextConnect( Component, namespace, options = {} ) { /* eslint-enable jsdoc/valid-types */ diff --git a/packages/components/src/ui/context/polymorphic-component.ts b/packages/components/src/ui/context/polymorphic-component.ts index e8f4abc9f09a8..dcc2f3df8090f 100644 --- a/packages/components/src/ui/context/polymorphic-component.ts +++ b/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; }; diff --git a/packages/components/src/ui/control-group/component.js b/packages/components/src/ui/control-group/component.js index 7cab290d17a87..7ea82f0138711 100644 --- a/packages/components/src/ui/control-group/component.js +++ b/packages/components/src/ui/control-group/component.js @@ -11,7 +11,7 @@ import { useControlGroup } from './hook'; import { contextConnect } from '../context'; /** - * @param {import('../context').ViewOwnProps} props + * @param {import('../context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ function ControlGroup( props, forwardedRef ) { diff --git a/packages/components/src/ui/control-group/hook.js b/packages/components/src/ui/control-group/hook.js index db3db0c60c19b..3166a2d67c811 100644 --- a/packages/components/src/ui/control-group/hook.js +++ b/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} props + * @param {import('../context').PolymorphicComponentProps} props */ export function useControlGroup( props ) { const { diff --git a/packages/components/src/ui/control-label/hook.js b/packages/components/src/ui/control-label/hook.js index 81f201d80112e..c21cbe3fc292f 100644 --- a/packages/components/src/ui/control-label/hook.js +++ b/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} props + * @param {import('../context').PolymorphicComponentProps} props */ export function useControlLabel( props ) { const { diff --git a/packages/components/src/ui/elevation/hook.js b/packages/components/src/ui/elevation/hook.js index 0489698745574..a72d27124f815 100644 --- a/packages/components/src/ui/elevation/hook.js +++ b/packages/components/src/ui/elevation/hook.js @@ -29,7 +29,7 @@ export function getBoxShadow( value ) { } /** - * @param {import('../context').ViewOwnProps} props + * @param {import('../context').PolymorphicComponentProps} props */ export function useElevation( props ) { const { diff --git a/packages/components/src/ui/form-group/form-group-content.js b/packages/components/src/ui/form-group/form-group-content.js index 98dbd1a1a8358..a84f5fa32faab 100644 --- a/packages/components/src/ui/form-group/form-group-content.js +++ b/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} props + * @param {import('../context').PolymorphicComponentProps} props */ function FormGroupContent( { alignLabel, diff --git a/packages/components/src/ui/form-group/form-group-label.js b/packages/components/src/ui/form-group/form-group-label.js index fd4af178cf620..b39f000916a5f 100644 --- a/packages/components/src/ui/form-group/form-group-label.js +++ b/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} props + * @param {import('../context').PolymorphicComponentProps} props * @return {JSX.Element | null} The form group's label. */ function FormGroupLabel( { children, id, labelHidden = false, ...props } ) { diff --git a/packages/components/src/ui/form-group/form-group.js b/packages/components/src/ui/form-group/form-group.js index 0c05df1bb8111..33a16482eb308 100644 --- a/packages/components/src/ui/form-group/form-group.js +++ b/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} props + * @param {import('../context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ function FormGroup( props, forwardedRef ) { diff --git a/packages/components/src/ui/form-group/use-form-group.js b/packages/components/src/ui/form-group/use-form-group.js index a8dbcaf1e046f..27ea0b4f96d01 100644 --- a/packages/components/src/ui/form-group/use-form-group.js +++ b/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} props + * @param {import('../context').PolymorphicComponentProps} props */ export function useFormGroup( props ) { const { diff --git a/packages/components/src/ui/popover/component.js b/packages/components/src/ui/popover/component.js index 70638993796ae..4d0fe390962de 100644 --- a/packages/components/src/ui/popover/component.js +++ b/packages/components/src/ui/popover/component.js @@ -21,7 +21,7 @@ import { useUpdateEffect } from '../../utils/hooks'; /** * - * @param {import('../context').ViewOwnProps} props + * @param {import('../context').PolymorphicComponentProps} props * @param {import('react').Ref} 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 }> diff --git a/packages/components/src/ui/popover/content.js b/packages/components/src/ui/popover/content.js index 0c161e248b985..6356049bb98c1 100644 --- a/packages/components/src/ui/popover/content.js +++ b/packages/components/src/ui/popover/content.js @@ -16,7 +16,7 @@ import { contextConnect, useContextSystem } from '../context'; /** * - * @param {import('../context').ViewOwnProps} props + * @param {import('../context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ function PopoverContent( props, forwardedRef ) { diff --git a/packages/components/src/ui/scrollable/hook.js b/packages/components/src/ui/scrollable/hook.js index 3cf82c907307c..ca95f237dbd6a 100644 --- a/packages/components/src/ui/scrollable/hook.js +++ b/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} props + * @param {import('../context').PolymorphicComponentProps} props */ /* eslint-enable jsdoc/valid-types */ export function useScrollable( props ) { diff --git a/packages/components/src/ui/shortcut/component.tsx b/packages/components/src/ui/shortcut/component.tsx index 549055b2f96b7..d82cd26fedeb8 100644 --- a/packages/components/src/ui/shortcut/component.tsx +++ b/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( diff --git a/packages/components/src/ui/spinner/component.js b/packages/components/src/ui/spinner/component.js index acbb5d32aa949..d5c4ed3f69b4d 100644 --- a/packages/components/src/ui/spinner/component.js +++ b/packages/components/src/ui/spinner/component.js @@ -16,7 +16,7 @@ import { COLORS } from '../../utils/colors-values'; /** * - * @param {import('../context').ViewOwnProps} props + * @param {import('../context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ function Spinner( props, forwardedRef ) { diff --git a/packages/components/src/ui/surface/hook.js b/packages/components/src/ui/surface/hook.js index 889d879a4d3f5..cf69919b512f2 100644 --- a/packages/components/src/ui/surface/hook.js +++ b/packages/components/src/ui/surface/hook.js @@ -15,7 +15,7 @@ import { useContextSystem } from '../context'; import * as styles from './styles'; /** - * @param {import('../context').ViewOwnProps} props + * @param {import('../context').PolymorphicComponentProps} props */ export function useSurface( props ) { const { diff --git a/packages/components/src/ui/tooltip/component.js b/packages/components/src/ui/tooltip/component.js index 94f5ed3ea0139..059872e61d88e 100644 --- a/packages/components/src/ui/tooltip/component.js +++ b/packages/components/src/ui/tooltip/component.js @@ -18,7 +18,7 @@ import TooltipContent from './content'; import { TooltipShortcut } from './styles'; /** - * @param {import('../context').ViewOwnProps} props + * @param {import('../context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ function Tooltip( props, forwardedRef ) { diff --git a/packages/components/src/ui/tooltip/content.js b/packages/components/src/ui/tooltip/content.js index 370dee96a7644..1fc0780eae468 100644 --- a/packages/components/src/ui/tooltip/content.js +++ b/packages/components/src/ui/tooltip/content.js @@ -17,7 +17,7 @@ const { TooltipPopoverView } = styles; /** * - * @param {import('../context').ViewOwnProps} props + * @param {import('../context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ function TooltipContent( props, forwardedRef ) { diff --git a/packages/components/src/ui/utils/create-component.tsx b/packages/components/src/ui/utils/create-component.tsx index 45b7742448942..4cf21c2352751 100644 --- a/packages/components/src/ui/utils/create-component.tsx +++ b/packages/components/src/ui/utils/create-component.tsx @@ -12,13 +12,16 @@ import { contextConnect } from '../context'; // eslint-disable-next-line no-duplicate-imports import type { PolymorphicComponent, - PropsFromViewOwnProps, - ElementTypeFromViewOwnProps, - ViewOwnProps, + PropsFromPolymorphicComponentProps, + ElementTypeFromPolymorphicComponentProps, + PolymorphicComponentProps, } from '../context'; import { View } from '../../view'; -interface Options< A extends As, P extends ViewOwnProps< {}, A > > { +interface Options< + A extends As, + P extends PolymorphicComponentProps< {}, A > +> { as: A; name: string; useHook: ( props: P ) => any; @@ -37,15 +40,15 @@ interface Options< A extends As, P extends ViewOwnProps< {}, A > > { */ export const createComponent = < A extends As, - P extends ViewOwnProps< {}, A > + P extends PolymorphicComponentProps< {}, A > >( { as, name, useHook, memo = false, }: Options< A, P > ): PolymorphicComponent< - ElementTypeFromViewOwnProps< P >, - PropsFromViewOwnProps< P > + ElementTypeFromPolymorphicComponentProps< P >, + PropsFromPolymorphicComponentProps< P > > => { function Component( props: P, forwardedRef: Ref< any > ) { const otherProps = useHook( props ); diff --git a/packages/components/src/ui/utils/test/create-component.js b/packages/components/src/ui/utils/test/create-component.js index 44819369c381b..01dbd7b991797 100644 --- a/packages/components/src/ui/utils/test/create-component.js +++ b/packages/components/src/ui/utils/test/create-component.js @@ -15,7 +15,7 @@ import { createComponent } from '../create-component'; describe( 'createComponent', () => { /** - * @param {import('../context').ViewOwnProps<{}, 'output'>} props + * @param {import('../context').PolymorphicComponentProps<{}, 'output'>} props */ const useHook = ( props ) => ( { ...props, 'data-hook-test-prop': true } ); const name = 'Output'; diff --git a/packages/components/src/ui/visually-hidden/hook.js b/packages/components/src/ui/visually-hidden/hook.js index d46c65cb8cbfe..e8e7980c72dbe 100644 --- a/packages/components/src/ui/visually-hidden/hook.js +++ b/packages/components/src/ui/visually-hidden/hook.js @@ -9,10 +9,10 @@ import { cx } from 'emotion'; import * as styles from './styles'; // duplicate this for the sake of being able to export it, it'll be removed when we replace VisuallyHidden in components/src anyway -/** @typedef {import('../context').ViewOwnProps<{}, 'div'>} Props */ +/** @typedef {import('../context').PolymorphicComponentProps<{}, 'div'>} Props */ /** - * @param {import('../context').ViewOwnProps<{}, 'div'>} props + * @param {import('../context').PolymorphicComponentProps<{}, 'div'>} props */ export function useVisuallyHidden( { className, ...props } ) { // circumvent the context system and write the classnames ourselves diff --git a/packages/components/src/v-stack/hook.js b/packages/components/src/v-stack/hook.js index 86cd61076ffce..0dcd4d33c739a 100644 --- a/packages/components/src/v-stack/hook.js +++ b/packages/components/src/v-stack/hook.js @@ -6,7 +6,7 @@ import { useHStack } from '../h-stack'; /** * - * @param {import('../ui/context').ViewOwnProps} props + * @param {import('../ui/context').PolymorphicComponentProps} props */ export function useVStack( props ) { const { expanded = false, ...otherProps } = useContextSystem(