@wordpress/components 36.0.1 → 37.0.1-next.v.202607070741.0

package/src/truncate/hook.ts

@@ -1,22 +1,16 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
-
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
 import { useContextSystem } from '../context';
-import * as styles from './styles';
 import { TRUNCATE_ELLIPSIS, TRUNCATE_TYPE, truncateContent } from './utils';
-import { useCx } from '../utils/hooks/use-cx';
 import type { TruncateProps } from './types';
+import styles from './style.module.scss';
 
 export default function useTruncate(
 	props: WordPressComponentProps< TruncateProps, 'span' >
@@ -28,11 +22,10 @@ export default function useTruncate(
 		ellipsizeMode = TRUNCATE_TYPE.auto,
 		limit = 0,
 		numberOfLines = 0,
+		style,
 		...otherProps
 	} = useContextSystem( props, 'Truncate' );
 
-	const cx = useCx();
-
 	let childrenAsText;
 	if ( typeof children === 'string' ) {
 		childrenAsText = children;
@@ -51,25 +44,27 @@ export default function useTruncate(
 
 	const shouldTruncate =
 		!! childrenAsText && ellipsizeMode === TRUNCATE_TYPE.auto;
+	const shouldClampLines = shouldTruncate && !! numberOfLines;
+	const shouldClampSingleLine = shouldClampLines && numberOfLines === 1;
 
-	const classes = useMemo( () => {
-		// The `word-break: break-all` property first makes sure a text line
-		// breaks even when it contains 'unbreakable' content such as long URLs.
-		// See https://github.com/WordPress/gutenberg/issues/60860.
-		const truncateLines = css`
-			${ numberOfLines === 1 ? 'word-break: break-all;' : '' }
-			-webkit-box-orient: vertical;
-			-webkit-line-clamp: ${ numberOfLines };
-			display: -webkit-box;
-			overflow: hidden;
-		`;
+	const classes = clsx(
+		shouldTruncate && ! numberOfLines && styles.truncate,
+		shouldClampLines && styles[ 'is-line-clamp' ],
+		shouldClampSingleLine && styles[ 'is-single-line' ],
+		className
+	);
 
-		return cx(
-			shouldTruncate && ! numberOfLines && styles.Truncate,
-			shouldTruncate && !! numberOfLines && truncateLines,
-			className
-		);
-	}, [ className, cx, numberOfLines, shouldTruncate ] );
+	const truncateStyle = shouldClampLines
+		? {
+				...style,
+				'--wp-components-truncate-lines': numberOfLines,
+		  }
+		: style;
 
-	return { ...otherProps, className: classes, children: truncatedContent };
+	return {
+		...otherProps,
+		className: classes,
+		style: truncateStyle,
+		children: truncatedContent,
+	};
 }

package/src/truncate/style.module.scss

@@ -0,0 +1,21 @@
+.truncate {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.is-line-clamp {
+	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- -webkit-line-clamp requires this legacy physical value. */
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: var(--wp-components-truncate-lines);
+	display: -webkit-box;
+	overflow: hidden;
+
+	// The `word-break: break-all` property first makes sure a text line
+	// breaks even when it contains 'unbreakable' content such as long URLs.
+	// See https://github.com/WordPress/gutenberg/issues/60860.
+	&.is-single-line {
+		word-break: break-all;
+	}
+}

package/src/unit-control/README.md

@@ -15,7 +15,7 @@ import { __experimentalUnitControl as UnitControl } from '@wordpress/components'
 const Example = () => {
 	const [ value, setValue ] = useState( '10px' );
 
-	return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />;
+	return <UnitControl onChange={ setValue } value={ value } />;
 };
 ```
 
@@ -128,7 +128,7 @@ const Example = () => {
 	];
 
 	return (
-		<UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } units={ units } />
+		<UnitControl onChange={ setValue } value={ value } units={ units } />
 	);
 };
 ```
@@ -143,14 +143,8 @@ For example, a `value` of `50%` will set the current unit to `%`.
 Example:
 
 ```jsx
-<UnitControl __next40pxDefaultSize value="50%" />
+<UnitControl value="50%" />
 ```
 
 -   Required: No
 
-### `__next40pxDefaultSize`: `boolean`
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Required: No
--   Default: `false`

package/src/unit-control/index.tsx

@@ -26,8 +26,6 @@ import {
 import { useControlledState } from '../utils/hooks';
 import { escapeRegExp } from '../utils/strings';
 import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function UnforwardedUnitControl(
 	unitControlProps: WordPressComponentProps<
@@ -56,16 +54,8 @@ function UnforwardedUnitControl(
 		units: unitsProp = CSS_UNITS,
 		value: valueProp,
 		onFocus: onFocusProp,
-		__shouldNotWarnDeprecated36pxSize,
 		...props
-	} = useDeprecated36pxDefaultSizeProp( unitControlProps );
-
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'UnitControl',
-		__next40pxDefaultSize: props.__next40pxDefaultSize,
-		size,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
+	} = unitControlProps;
 
 	if ( 'unit' in unitControlProps ) {
 		deprecated( 'UnitControl unit prop', {
@@ -198,10 +188,7 @@ function UnforwardedUnitControl(
 			isUnitSelectTabbable={ isUnitSelectTabbable }
 			onChange={ handleOnUnitChange }
 			size={
-				[ 'small', 'compact' ].includes( size ) ||
-				( size === 'default' && ! props.__next40pxDefaultSize )
-					? 'small'
-					: 'default'
+				[ 'small', 'compact' ].includes( size ) ? 'small' : 'default'
 			}
 			unit={ unit }
 			units={ units }
@@ -224,7 +211,7 @@ function UnforwardedUnitControl(
 	return (
 		<ValueInput
 			{ ...props }
-			__shouldNotWarnDeprecated36pxSize
+			__next40pxDefaultSize
 			autoComplete={ autoComplete }
 			className={ classes }
 			disabled={ disabled }
@@ -256,7 +243,7 @@ function UnforwardedUnitControl(
  * const Example = () => {
  *   const [ value, setValue ] = useState( '10px' );
  *
- *   return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />;
+ *   return <UnitControl onChange={ setValue } value={ value } />;
  * };
  * ```
  */

package/src/unit-control/stories/index.story.tsx

@@ -55,7 +55,6 @@ const DefaultTemplate: StoryFn< typeof UnitControl > = ( {
 
 	return (
 		<UnitControl
-			__next40pxDefaultSize
 			{ ...args }
 			value={ value }
 			onChange={ ( v, extra ) => {
@@ -71,7 +70,6 @@ export const Default: StoryFn< typeof UnitControl > = DefaultTemplate.bind(
 );
 Default.args = {
 	label: 'Label',
-	__next40pxDefaultSize: true,
 };
 
 /**
@@ -123,7 +121,6 @@ export const WithCustomUnits: StoryFn< typeof UnitControl > = ( {
 
 	return (
 		<UnitControl
-			__next40pxDefaultSize
 			{ ...args }
 			value={ value }
 			onChange={ ( v, extra ) => {

package/src/unit-control/test/index.tsx

@@ -12,13 +12,9 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import _UnitControl from '..';
+import UnitControl from '..';
 import { CSS_UNITS, parseQuantityAndUnitFromRawValue } from '../utils';
 
-const UnitControl = ( props: React.ComponentProps< typeof _UnitControl > ) => (
-	<_UnitControl __next40pxDefaultSize { ...props } />
-);
-
 const getInput = ( {
 	isInputTypeText = false,
 }: {

package/src/unit-control/types.ts

@@ -70,7 +70,10 @@ export type UnitSelectControlProps = {
 
 export type UnitControlProps = Pick< InputControlProps, 'size' > &
 	Omit< UnitSelectControlProps, 'size' | 'unit' > &
-	Omit< NumberControlProps, 'spinControls' | 'suffix' | 'type' > & {
+	Omit<
+		NumberControlProps,
+		'spinControls' | 'suffix' | 'type' | '__next40pxDefaultSize'
+	> & {
 		/**
 		 * If `true`, the unit `<select>` is hidden.
 		 *
@@ -114,4 +117,11 @@ export type UnitControlProps = Pick< InputControlProps, 'size' > &
 		 * @ignore
 		 */
 		__shouldNotWarnDeprecated36pxSize?: boolean;
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+		 * @ignore
+		 */
+		__next40pxDefaultSize?: boolean;
 	};

package/src/utils/config-values.js

@@ -57,13 +57,7 @@ export default Object.assign( {}, CONTROL_PROPS, {
 	elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
 	elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
 	elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,
-	surfaceBackgroundColor: COLORS.white,
-	surfaceBackgroundSubtleColor: '#F3F3F3',
-	surfaceBackgroundTintColor: '#F5F5F5',
 	surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',
-	surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',
-	surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',
-	surfaceBackgroundTertiaryColor: COLORS.white,
 	surfaceColor: COLORS.white,
 	// Modal exit animation: `use-modal-exit-animation` parses this for the
 	// `animationend` timeout race; keep the numeric duration equal to the WPDS

package/src/utils/hooks/use-cx.ts

@@ -24,6 +24,10 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles =>
  * `cx` normally knows how to handle. It also hooks into the Emotion
  * Cache, allowing `css` calls to work inside iframes.
  *
+ * Passing multiple `SerializedStyles` arguments emits multiple classes. When
+ * fragments rely on source-order overrides, compose them in a single `css()`
+ * call before passing them to `cx`.
+ *
  * ```jsx
  * import { css } from '@emotion/react';
  *

package/src/utils/polymorphic-element.tsx

@@ -0,0 +1,152 @@
+/**
+ * External dependencies
+ */
+import type * as React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+type PolymorphicElementProps< T extends React.ElementType > = Omit<
+	React.ComponentPropsWithoutRef< T >,
+	'as'
+> & {
+	as?: T;
+};
+
+type PolymorphicElementRef< T extends React.ElementType > =
+	React.ComponentPropsWithRef< T >[ 'ref' ];
+
+const customAttributeRegExp = /^(data|aria|x)-/i;
+const eventHandlerRegExp = /^on[A-Z]/;
+
+// Derived from @emotion/is-prop-valid's React prop allowlist, but split by
+// element type so SVG-only props are intentionally filtered from HTML elements.
+// The event-handler check is also deliberately stricter than Emotion's
+// charCode-based `on*` fallback.
+const svgElementNames = new Set(
+	`animate animateMotion animateTransform circle clipPath defs desc ellipse
+	feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix
+	feDiffuseLighting feDisplacementMap feDistantLight feDropShadow feFlood
+	feFuncA feFuncB feFuncG feFuncR feGaussianBlur feImage feMerge feMergeNode
+	feMorphology feOffset fePointLight feSpecularLighting feSpotLight feTile
+	feTurbulence filter foreignObject g image line linearGradient marker mask
+	metadata mpath path pattern polygon polyline radialGradient rect set stop svg
+	switch symbol text textPath tspan use view`.split( /\s+/ )
+);
+
+const baseElementProps = new Set(
+	`children dangerouslySetInnerHTML key autoFocus defaultValue defaultChecked
+	innerHTML suppressContentEditableWarning suppressHydrationWarning valueLink
+	abbr accept acceptCharset accessKey action allow allowUserMedia
+	allowPaymentRequest allowFullScreen allowTransparency alt async autoComplete
+	autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID
+	className cols colSpan content contentEditable contextMenu controls controlsList
+	coords crossOrigin data dateTime decoding default defer dir disabled
+	disablePictureInPicture disableRemotePlayback download draggable encType
+	enterKeyHint fetchpriority fetchPriority form formAction formEncType formMethod
+	formNoValidate formTarget frameBorder headers height hidden high href hrefLang
+	htmlFor httpEquiv id inputMode integrity is keyParams keyType kind label lang
+	list loading loop low marginHeight marginWidth max maxLength media mediaGroup
+	method min minLength multiple muted name nonce noValidate open optimum pattern
+	placeholder playsInline popover popoverTarget popoverTargetAction poster
+	preload profile radioGroup readOnly referrerPolicy rel required reversed role
+	rows rowSpan sandbox scope scoped scrolling seamless selected shape size sizes
+	slot span spellCheck src srcDoc srcLang srcSet start step style summary
+	tabIndex target title translate type useMap value width wmode wrap about
+	datatype inlist prefix property resource typeof vocab autoCapitalize
+	autoCorrect autoSave color incremental fallback inert itemProp itemScope
+	itemType itemID itemRef on option results security unselectable`.split( /\s+/ )
+);
+
+const svgElementProps = new Set(
+	`accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
+	amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
+	baseFrequency baselineShift baseProfile bbox begin bias by calcMode capHeight
+	clip clipPathUnits clipPath clipRule colorInterpolation
+	colorInterpolationFilters colorProfile colorRendering contentScriptType
+	contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
+	display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
+	end exponent externalResourcesRequired fill fillOpacity fillRule filter
+	filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
+	fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fr fx
+	fy g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical
+	glyphRef gradientTransform gradientUnits hanging horizAdvX horizOriginX
+	ideographic imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix
+	kernelUnitLength kerning keyPoints keySplines keyTimes lengthAdjust
+	letterSpacing lightingColor limitingConeAngle local markerEnd markerMid
+	markerStart markerHeight markerUnits markerWidth mask maskContentUnits
+	maskUnits mathematical mode numOctaves offset opacity operator order orient
+	orientation origin overflow overlinePosition overlineThickness panose1
+	paintOrder pathLength patternContentUnits patternTransform patternUnits
+	pointerEvents points pointsAtX pointsAtY pointsAtZ preserveAlpha
+	preserveAspectRatio primitiveUnits r radius refX refY renderingIntent
+	repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate
+	rx ry scale seed shapeRendering slope spacing specularConstant
+	specularExponent speed spreadMethod startOffset stdDeviation stemh stemv
+	stitchTiles stopColor stopOpacity strikethroughPosition strikethroughThickness
+	string stroke strokeDasharray strokeDashoffset strokeLinecap strokeLinejoin
+	strokeMiterlimit strokeOpacity strokeWidth surfaceScale systemLanguage
+	tableValues targetX targetY textAnchor textDecoration textRendering textLength
+	to transform u1 u2 underlinePosition underlineThickness unicode unicodeBidi
+	unicodeRange unitsPerEm vAlphabetic vHanging vIdeographic vMathematical values
+	vectorEffect version vertAdvY vertOriginX vertOriginY viewBox viewTarget
+	visibility widths wordSpacing writingMode x xHeight x1 x2 xChannelSelector
+	xlinkActuate xlinkArcrole xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType
+	xmlBase xmlns xmlnsXlink xmlLang xmlSpace y y1 y2 yChannelSelector z
+	zoomAndPan`.split( /\s+/ )
+);
+
+const compatElementProps = new Set( [ 'autofocus', 'class', 'for' ] );
+
+function isValidIntrinsicElementProp( prop: string, element: string ) {
+	if (
+		customAttributeRegExp.test( prop ) ||
+		eventHandlerRegExp.test( prop )
+	) {
+		return true;
+	}
+
+	if ( baseElementProps.has( prop ) || compatElementProps.has( prop ) ) {
+		return true;
+	}
+
+	return svgElementNames.has( element ) && svgElementProps.has( prop );
+}
+
+function filterIntrinsicElementProps(
+	props: PolymorphicElementProps< React.ElementType >,
+	element: string
+) {
+	return Object.fromEntries(
+		Object.entries( props ).filter( ( [ prop ] ) =>
+			isValidIntrinsicElementProp( prop, element )
+		)
+	);
+}
+
+function UnforwardedPolymorphicElement(
+	{ as, ...props }: PolymorphicElementProps< React.ElementType >,
+	ref: React.ForwardedRef< unknown >
+) {
+	const Element = as || 'div';
+	const forwardedProps =
+		typeof Element === 'string'
+			? filterIntrinsicElementProps( props, Element )
+			: props;
+
+	return <Element ref={ ref } { ...forwardedProps } />;
+}
+
+/**
+ * Internal utility for components that need Emotion-compatible `as` behavior
+ * while rendering with plain React elements.
+ */
+export const PolymorphicElement = forwardRef(
+	UnforwardedPolymorphicElement
+) as < T extends React.ElementType = 'div' >(
+	props: PolymorphicElementProps< T > & {
+		ref?: PolymorphicElementRef< T >;
+	}
+) => React.ReactElement | null;

package/src/utils/test/polymorphic-element.tsx

@@ -0,0 +1,231 @@
+import styled from '@emotion/styled';
+import { render, screen } from '@testing-library/react';
+import { renderToString } from 'react-dom/server';
+
+import { createElement, createRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { PolymorphicElement } from '../polymorphic-element';
+
+const StyledDiv = styled.div``;
+
+const components = [
+	{
+		name: 'PolymorphicElement',
+		Component: PolymorphicElement,
+	},
+	{
+		name: 'styled.div',
+		Component: StyledDiv,
+	},
+] as const;
+
+describe.each( components )( '$name', ( { Component: RawComponent } ) => {
+	const Component = RawComponent as typeof PolymorphicElement;
+
+	it( 'filters invalid props from intrinsic elements', () => {
+		render(
+			createElement( Component, {
+				as: 'label',
+				'data-testid': 'label',
+				htmlFor: 'field',
+				labelPosition: 'top',
+			} as Parameters< typeof Component >[ 0 ] & {
+				labelPosition: string;
+			} )
+		);
+
+		const label = screen.getByTestId( 'label' );
+
+		expect( label ).toHaveAttribute( 'for', 'field' );
+		expect( label ).not.toHaveAttribute( 'labelPosition' );
+		expect( label ).not.toHaveAttribute( 'labelposition' );
+	} );
+
+	it( 'preserves standard props for intrinsic elements', () => {
+		render(
+			<Component
+				aria-label="Notice"
+				className="custom-class"
+				data-testid="notice"
+				style={ { color: 'red' } }
+				title="Notice title"
+			/>
+		);
+
+		const element = screen.getByTestId( 'notice' );
+
+		expect( element ).toHaveAttribute( 'aria-label', 'Notice' );
+		expect( element ).toHaveAttribute( 'title', 'Notice title' );
+		expect( element ).toHaveClass( 'custom-class' );
+		expect( element ).toHaveStyle( { color: 'rgb(255, 0, 0)' } );
+	} );
+
+	it( 'preserves standard props without relying on the DOM', () => {
+		const view = renderToString(
+			createElement( Component, {
+				as: 'form',
+				acceptCharset: 'utf-8',
+			} as Parameters< typeof Component >[ 0 ] & {
+				acceptCharset: string;
+			} )
+		);
+
+		expect( view ).toContain( 'accept-charset="utf-8"' );
+	} );
+
+	it( 'preserves SVG props for SVG intrinsic elements', () => {
+		render(
+			<Component
+				as="svg"
+				data-testid="svg"
+				fill="currentColor"
+				preserveAspectRatio="xMidYMid meet"
+				stroke="none"
+				strokeWidth={ 2 }
+				viewBox="0 0 24 24"
+			/>
+		);
+
+		const svg = screen.getByTestId( 'svg' );
+
+		expect( svg ).toHaveAttribute( 'fill', 'currentColor' );
+		expect( svg ).toHaveAttribute( 'preserveAspectRatio', 'xMidYMid meet' );
+		expect( svg ).toHaveAttribute( 'stroke', 'none' );
+		expect( svg ).toHaveAttribute( 'stroke-width', '2' );
+		expect( svg ).toHaveAttribute( 'viewBox', '0 0 24 24' );
+	} );
+
+	it( 'preserves SVG props without relying on the DOM', () => {
+		const view = renderToString(
+			<Component
+				as="svg"
+				fill="currentColor"
+				strokeWidth={ 2 }
+				viewBox="0 0 24 24"
+			/>
+		);
+
+		expect( view ).toContain( 'fill="currentColor"' );
+		expect( view ).toContain( 'stroke-width="2"' );
+		expect( view ).toContain( 'viewBox="0 0 24 24"' );
+	} );
+
+	it( 'preserves SVG props for non-SVG-root intrinsic elements', () => {
+		render(
+			<svg>
+				<Component
+					as="path"
+					d="M0 0h24v24H0z"
+					data-testid="path"
+					fillRule="evenodd"
+					clipPath="url(#clip)"
+				/>
+			</svg>
+		);
+
+		const path = screen.getByTestId( 'path' );
+
+		expect( path ).toHaveAttribute( 'clip-path', 'url(#clip)' );
+		expect( path ).toHaveAttribute( 'd', 'M0 0h24v24H0z' );
+		expect( path ).toHaveAttribute( 'fill-rule', 'evenodd' );
+	} );
+
+	it( 'filters invalid props from SVG intrinsic elements', () => {
+		render(
+			createElement( Component, {
+				as: 'svg',
+				'data-testid': 'svg',
+				labelPosition: 'top',
+				viewBox: '0 0 24 24',
+			} as Parameters< typeof Component >[ 0 ] & {
+				labelPosition: string;
+			} )
+		);
+
+		const svg = screen.getByTestId( 'svg' );
+
+		expect( svg ).toHaveAttribute( 'viewBox', '0 0 24 24' );
+		expect( svg ).not.toHaveAttribute( 'labelPosition' );
+		expect( svg ).not.toHaveAttribute( 'labelposition' );
+	} );
+
+	it( 'passes custom props through to custom components', () => {
+		function CustomComponent( {
+			variant,
+			...props
+		}: JSX.IntrinsicElements[ 'section' ] & {
+			variant: string;
+		} ) {
+			return <section data-variant={ variant } { ...props } />;
+		}
+
+		render(
+			<Component
+				as={ CustomComponent }
+				data-testid="custom"
+				variant="primary"
+			/>
+		);
+
+		expect( screen.getByTestId( 'custom' ) ).toHaveAttribute(
+			'data-variant',
+			'primary'
+		);
+	} );
+
+	it( 'forwards refs to the rendered element', () => {
+		const ref = createRef< HTMLButtonElement >();
+
+		render(
+			<Component
+				as="button"
+				data-testid="button"
+				ref={ ref }
+				type="button"
+			/>
+		);
+
+		expect( ref.current ).toBe( screen.getByTestId( 'button' ) );
+	} );
+} );
+
+describe( 'PolymorphicElement prop filtering', () => {
+	it( 'filters invalid on-prefixed props from intrinsic elements', () => {
+		render(
+			createElement( PolymorphicElement, {
+				'data-testid': 'element',
+				on1: 'invalid',
+				'on-foo': 'invalid',
+			} as Parameters< typeof PolymorphicElement >[ 0 ] & {
+				on1: string;
+				'on-foo': string;
+			} )
+		);
+
+		const element = screen.getByTestId( 'element' );
+
+		expect( element ).not.toHaveAttribute( 'on1' );
+		expect( element ).not.toHaveAttribute( 'on-foo' );
+	} );
+
+	it( 'filters SVG-only props from HTML intrinsic elements', () => {
+		render(
+			createElement( PolymorphicElement, {
+				'data-testid': 'element',
+				fill: 'currentColor',
+				strokeWidth: 2,
+			} as Parameters< typeof PolymorphicElement >[ 0 ] & {
+				fill: string;
+				strokeWidth: number;
+			} )
+		);
+
+		const element = screen.getByTestId( 'element' );
+
+		expect( element ).not.toHaveAttribute( 'fill' );
+		expect( element ).not.toHaveAttribute( 'stroke-width' );
+	} );
+} );