packages/components/src/context/wordpress-component.ts - trunk - githubmirror/gutenberg

packages/components/src/context/wordpress-component.ts
94 строки3 KB
Marco Ciampini
ESLint: Replace strict config with bulk suppressions (#81248)
07 авг 2026, 14:34
07 авг 2026, 14:347f43eaf
import type * as React from 'react';

/**
 * Loose intrinsic attribute bag used when a polymorphic component is rendered
 * with an `as` prop. Previous implementations enabled precise typings for the
 * given `as` element (e.g. `as="label"` unlocks `htmlFor`), but doing so
 * contributed to high memory usage and slow compilation times.
 */
type PolymorphicIntrinsicProps = Omit<
	React.AllHTMLAttributes< Element > & React.SVGAttributes< Element >,
	'as' | 'children'
>;

// Based on https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/types.ts
export type WordPressComponentProps<
	/** Prop types. */
	P,
	/** The HTML element to inherit props from. */
	T extends React.ElementType | null,
	/** Supports polymorphism through the `as` prop. */
	IsPolymorphic extends boolean = true,
> = P &
	( T extends React.ElementType
		? // The `children` prop is being explicitly omitted since it is otherwise implicitly added
		  // by `ComponentPropsWithRef`. The context is that components should require the `children`
		  // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).
		  Omit<
				React.ComponentPropsWithoutRef< T >,
				'as' | keyof P | 'children'
		  >
		: {} ) &
	( IsPolymorphic extends true
		? {
				/** The HTML element or React component to render the component as. */
				as?:
					| T
					| keyof React.JSX.IntrinsicElements
					| React.JSXElementConstructor< any >;
		  }
		: {} );

export type WordPressComponent<
	T extends React.ElementType | null,
	O,
	IsPolymorphic extends boolean,
> = ( IsPolymorphic extends true
	? {
			/**
			 * Intrinsic `as` (e.g. `as="label"`): accept a flat HTML/SVG attribute
			 * bag instead of remapping to that tag's props.
			 */
			(
				props: WordPressComponentProps< O, T, false > & {
					/** The HTML element to render the component as. */
					as: keyof React.JSX.IntrinsicElements;
				} & Omit< PolymorphicIntrinsicProps, keyof O >
			): React.ReactNode;
			/**
			 * Component `as` (e.g. `as={ Item }`): remap to that component's props.
			 */
			< C extends React.JSXElementConstructor< any > >(
				props: WordPressComponentProps< O, T, false > & {
					/** The React component to render the component as. */
					as: C;
				} & Omit<
						React.ComponentPropsWithoutRef< C >,
						'as' | keyof O | 'children'
					>
			): React.ReactNode;
	  }
	: unknown ) & {
	( props: WordPressComponentProps< O, T, IsPolymorphic > ): React.ReactNode;
	displayName?: string;
	/**
	 * A CSS selector used to fake component interpolation in styled components
	 * for components not generated by `styled`. Anything passed to `contextConnect`
	 * will get this property.
	 *
	 * We restrict it to a class to align with the already existing class names that
	 * are generated by the context system.
	 */
	selector?: `.${ string }`;
};

export type WordPressComponentFromProps<
	Props,
	ForwardsRef extends boolean = true,
> = Props extends WordPressComponentProps< infer P, infer T, infer I >
	? WordPressComponent<
			T,
			P & ( ForwardsRef extends true ? React.RefAttributes< any > : {} ),
			I
	  >
	: never;