@wordpress/components 36.0.1 → 37.0.0

package/src/tree-select/index.tsx

@@ -9,8 +9,6 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { SelectControl } from '../select-control';
 import type { TreeSelectProps, Tree, Truthy } from './types';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function getSelectOptions(
 	tree: Tree[],
@@ -38,7 +36,6 @@ function getSelectOptions(
  *
  * 	return (
  * 		<TreeSelect
- * 			__next40pxDefaultSize
  * 			label="Parent page"
  * 			noOptionLabel="No parent page"
  * 			onChange={ ( newPage ) => setPage( newPage ) }
@@ -76,14 +73,16 @@ function getSelectOptions(
  */
 export function TreeSelect( props: TreeSelectProps ) {
 	const {
-		__nextHasNoMarginBottom: _, // Prevent passing to internal component
+		// Prevent passing legacy props to internal component.
+		__nextHasNoMarginBottom: _,
+		__next40pxDefaultSize: _next40pxDefaultSize,
 		label,
 		noOptionLabel,
 		onChange,
 		selectedId,
 		tree = [],
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp( props );
+	} = props;
 
 	const options = useMemo( () => {
 		return [
@@ -92,17 +91,8 @@ export function TreeSelect( props: TreeSelectProps ) {
 		].filter( < T, >( option: T ): option is Truthy< T > => !! option );
 	}, [ noOptionLabel, tree ] );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'TreeSelect',
-		size: restProps.size,
-		__next40pxDefaultSize: restProps.__next40pxDefaultSize,
-	} );
-
 	return (
-		// Disable reason: the parent component already takes case of the `__next40pxDefaultSize` prop.
-		// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
 		<SelectControl
-			__shouldNotWarnDeprecated36pxSize
 			{ ...{ label, options, onChange } }
 			value={ selectedId }
 			{ ...restProps }

package/src/tree-select/stories/index.story.tsx

@@ -45,7 +45,6 @@ const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 
 	return (
 		<TreeSelect
-			__next40pxDefaultSize
 			{ ...props }
 			onChange={ setSelection }
 			selectedId={ selection }
@@ -55,7 +54,6 @@ const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 
 export const Default = TreeSelectWithState.bind( {} );
 Default.args = {
-	__next40pxDefaultSize: true,
 	label: 'Label Text',
 	noOptionLabel: 'No parent page',
 	help: 'Help text to explain the select control.',

package/src/tree-select/types.ts

@@ -18,8 +18,15 @@ export interface Tree {
 export interface TreeSelectProps
 	extends Omit<
 		SelectControlSingleSelectionProps,
-		'value' | 'multiple' | 'onChange'
+		'value' | 'multiple' | 'onChange' | '__next40pxDefaultSize'
 	> {
+	/**
+	 * 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;
 	/**
 	 * If this property is added, an option will be added with this label to represent empty selection.
 	 */

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,6 @@ function UnforwardedUnitControl(
 	return (
 		<ValueInput
 			{ ...props }
-			__shouldNotWarnDeprecated36pxSize
 			autoComplete={ autoComplete }
 			className={ classes }
 			disabled={ disabled }
@@ -256,7 +242,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/base-label.ts

@@ -12,7 +12,7 @@ import CONFIG from './config-values.js';
 // Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can.
 export const baseLabelTypography = css`
 	font-size: 11px;
-	font-weight: ${ CONFIG.fontWeightMedium };
+	font-weight: ${ CONFIG.fontWeightEmphasis };
 	line-height: 1.4;
 	text-transform: uppercase;
 `;

package/src/utils/config-values.js

@@ -50,20 +50,13 @@ export default Object.assign( {}, CONTROL_PROPS, {
 	fontSizeXSmall: 'calc(0.75 * 13px)',
 	fontLineHeightBase: '1.4',
 	fontWeight: 'normal',
-	fontWeightMedium: '499', // ensures fallback to 400 (instead of 600)
-	fontWeightHeading: '600',
+	fontWeightEmphasis: '600',
 	gridBase: '4px',
 	elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
 	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/font-values.js

@@ -1,6 +1,6 @@
 export default {
 	'default.fontFamily':
-		"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+		"-apple-system, system-ui, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
 	'default.fontSize': '13px',
 
 	'helpText.fontSize': '12px',

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;