@wordpress/components 27.4.0 → 27.6.0

package/build-types/view/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI,EAAE,kBAAkB,CACpC,KAAK,EACL,SAAS,GAAG,aAAa,CAAE,GAAG,CAAE,EAChC,IAAI,CACW,CAAC;AAKjB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":";;AAwBA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEd,CAAC;AAEJ,eAAe,IAAI,CAAC"}

package/build-types/z-stack/styles.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 export declare const ZStackChildView: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     offsetAmount: number;
     zIndex: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ZStackView: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     isLayered: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "27.4.0",
+	"version": "27.6.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,32 +41,32 @@
 		"@floating-ui/react-dom": "^2.0.8",
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
-		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.56.0",
-		"@wordpress/compose": "^6.33.0",
-		"@wordpress/date": "^4.56.0",
-		"@wordpress/deprecated": "^3.56.0",
-		"@wordpress/dom": "^3.56.0",
-		"@wordpress/element": "^5.33.0",
-		"@wordpress/escape-html": "^2.56.0",
-		"@wordpress/hooks": "^3.56.0",
-		"@wordpress/html-entities": "^3.56.0",
-		"@wordpress/i18n": "^4.56.0",
-		"@wordpress/icons": "^9.47.0",
-		"@wordpress/is-shallow-equal": "^4.56.0",
-		"@wordpress/keycodes": "^3.56.0",
-		"@wordpress/primitives": "^3.54.0",
-		"@wordpress/private-apis": "^0.38.0",
-		"@wordpress/rich-text": "^6.33.0",
-		"@wordpress/warning": "^2.56.0",
+		"@use-gesture/react": "^10.3.1",
+		"@wordpress/a11y": "^3.58.0",
+		"@wordpress/compose": "^6.35.0",
+		"@wordpress/date": "^4.58.0",
+		"@wordpress/deprecated": "^3.58.0",
+		"@wordpress/dom": "^3.58.0",
+		"@wordpress/element": "^5.35.0",
+		"@wordpress/escape-html": "^2.58.0",
+		"@wordpress/hooks": "^3.58.0",
+		"@wordpress/html-entities": "^3.58.0",
+		"@wordpress/i18n": "^4.58.0",
+		"@wordpress/icons": "^9.49.0",
+		"@wordpress/is-shallow-equal": "^4.58.0",
+		"@wordpress/keycodes": "^3.58.0",
+		"@wordpress/primitives": "^3.56.0",
+		"@wordpress/private-apis": "^0.40.0",
+		"@wordpress/rich-text": "^6.35.0",
+		"@wordpress/warning": "^2.58.0",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^3.6.0",
 		"deepmerge": "^4.3.0",
 		"downshift": "^6.0.15",
 		"fast-deep-equal": "^3.1.3",
-		"framer-motion": "^10.13.0",
+		"framer-motion": "^11.1.9",
 		"gradient-parser": "^0.1.5",
 		"highlight-words-core": "^1.2.2",
 		"is-plain-object": "^5.0.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
 }

package/src/alignment-matrix-control/icon.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -28,7 +28,7 @@ function AlignmentMatrixControlIcon( {
 	const alignIndex = getAlignmentIndex( value );
 	const scale = ( size / BASE_SIZE ).toFixed( 2 );
 
-	const classes = classnames(
+	const classes = clsx(
 		'component-alignment-matrix-control-icon',
 		className
 	);

package/src/alignment-matrix-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -61,17 +61,16 @@ export function AlignmentMatrixControl( {
 		activeId: getItemId( baseId, value ),
 		setActiveId: ( nextActiveId ) => {
 			const nextValue = getItemValue( baseId, nextActiveId );
-			if ( nextValue ) onChange?.( nextValue );
+			if ( nextValue ) {
+				onChange?.( nextValue );
+			}
 		},
 		rtl: isRTL(),
 	} );
 
 	const activeId = compositeStore.useState( 'activeId' );
 
-	const classes = classnames(
-		'component-alignment-matrix-control',
-		className
-	);
+	const classes = clsx( 'component-alignment-matrix-control', className );
 
 	return (
 		<Composite

package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { COLORS, reduceMotion } from '../../utils';
+import { COLORS } from '../../utils';
 import type {
 	AlignmentMatrixControlProps,
 	AlignmentMatrixControlCellProps,
@@ -74,9 +74,10 @@ export const pointBase = (
 		box-sizing: border-box;
 		display: grid;
 		margin: auto;
-		transition: all 120ms linear;
+		@media not ( prefers-reduced-motion ) {
+			transition: all 120ms linear;
+		}
 
-		${ reduceMotion( 'transition' ) }
 		${ pointActive( props ) }
 	`;
 };

package/src/alignment-matrix-control/utils.tsx

@@ -65,7 +65,9 @@ export function getItemId(
 	value?: AlignmentMatrixControlValue
 ) {
 	const normalized = normalize( value );
-	if ( ! normalized ) return;
+	if ( ! normalized ) {
+		return;
+	}
 
 	const id = normalized.replace( ' ', '-' );
 	return `${ prefixId }-${ id }`;
@@ -94,7 +96,9 @@ export function getAlignmentIndex(
 	alignment: AlignmentMatrixControlValue = 'center'
 ) {
 	const normalized = normalize( alignment );
-	if ( ! normalized ) return undefined;
+	if ( ! normalized ) {
+		return undefined;
+	}
 
 	const index = ALIGNMENTS.indexOf( normalized );
 	return index > -1 ? index : undefined;

package/src/angle-picker-control/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,7 @@ function UnforwardedAnglePickerControl(
 		onChange( inputValue );
 	};
 
-	const classes = classnames( 'components-angle-picker-control', className );
+	const classes = clsx( 'components-angle-picker-control', className );
 
 	const unitText = <UnitText>°</UnitText>;
 	const [ prefixedUnitText, suffixedUnitText ] = isRTL()

package/src/animate/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -23,24 +23,21 @@ function getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {
  */
 export function getAnimateClassName( options: GetAnimateOptions ) {
 	if ( options.type === 'loading' ) {
-		return classnames( 'components-animate__loading' );
+		return clsx( 'components-animate__loading' );
 	}
 
 	const { type, origin = getDefaultOrigin( type ) } = options;
 
 	if ( type === 'appear' ) {
 		const [ yAxis, xAxis = 'center' ] = origin.split( ' ' );
-		return classnames( 'components-animate__appear', {
+		return clsx( 'components-animate__appear', {
 			[ 'is-from-' + xAxis ]: xAxis !== 'center',
 			[ 'is-from-' + yAxis ]: yAxis !== 'middle',
 		} );
 	}
 
 	if ( type === 'slide-in' ) {
-		return classnames(
-			'components-animate__slide-in',
-			'is-from-' + origin
-		);
+		return clsx( 'components-animate__slide-in', 'is-from-' + origin );
 	}
 
 	return undefined;

package/src/autocomplete/autocompleter-ui.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -55,7 +55,9 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 			popoverRef,
 			useRefEffect(
 				( node ) => {
-					if ( ! contentRef.current ) return;
+					if ( ! contentRef.current ) {
+						return;
+					}
 
 					// If the popover is rendered in a different document than
 					// the content, we need to duplicate the options list in the
@@ -139,7 +141,7 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 						role="option"
 						aria-selected={ index === selectedIndex }
 						disabled={ option.isDisabled }
-						className={ classnames(
+						className={ clsx(
 							'components-autocomplete__result',
 							className,
 							{

package/src/autocomplete/index.tsx

@@ -253,7 +253,9 @@ export function useAutocomplete( {
 
 	useEffect( () => {
 		if ( ! textContent ) {
-			if ( autocompleter ) reset();
+			if ( autocompleter ) {
+				reset();
+			}
 			return;
 		}
 
@@ -277,7 +279,9 @@ export function useAutocomplete( {
 		);
 
 		if ( ! completer ) {
-			if ( autocompleter ) reset();
+			if ( autocompleter ) {
+				reset();
+			}
 			return;
 		}
 
@@ -293,7 +297,9 @@ export function useAutocomplete( {
 		// significantly. This could happen, for example, if `matchingWhileBackspacing`
 		// is true and one of the "words" end up being too long. If that's the case,
 		// it will be caught by this guard.
-		if ( tooDistantFromTrigger ) return;
+		if ( tooDistantFromTrigger ) {
+			return;
+		}
 
 		const mismatch = filteredOptions.length === 0;
 		const wordsFromTrigger = textWithoutTrigger.split( /\s/ );
@@ -318,7 +324,9 @@ export function useAutocomplete( {
 			backspacing.current && wordsFromTrigger.length <= 3;
 
 		if ( mismatch && ! ( matchingWhileBackspacing || hasOneTriggerWord ) ) {
-			if ( autocompleter ) reset();
+			if ( autocompleter ) {
+				reset();
+			}
 			return;
 		}
 
@@ -333,7 +341,9 @@ export function useAutocomplete( {
 				textAfterSelection
 			)
 		) {
-			if ( autocompleter ) reset();
+			if ( autocompleter ) {
+				reset();
+			}
 			return;
 		}
 
@@ -341,12 +351,16 @@ export function useAutocomplete( {
 			/^\s/.test( textWithoutTrigger ) ||
 			/\s\s+$/.test( textWithoutTrigger )
 		) {
-			if ( autocompleter ) reset();
+			if ( autocompleter ) {
+				reset();
+			}
 			return;
 		}
 
 		if ( ! /[\u0000-\uFFFF]*$/.test( textWithoutTrigger ) ) {
-			if ( autocompleter ) reset();
+			if ( autocompleter ) {
+				reset();
+			}
 			return;
 		}
 

package/src/autocomplete/style.scss

@@ -1,6 +1,6 @@
 .components-autocomplete__popover .components-popover__content {
-	padding: $grid-unit-20;
-	min-width: 220px;
+	padding: $grid-unit-10;
+	min-width: 200px;
 }
 
 .components-autocomplete__result.components-button {
@@ -10,7 +10,13 @@
 	text-align: left;
 	width: 100%;
 
-	&.is-selected {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+	&:focus:not(:disabled) {
+		@include block-toolbar-button-style__focus();
+	}
+
+	&.is-selected,
+	&:not(:disabled,[aria-disabled="true"]):active {
+		background: $components-color-accent;
+		color: $white;
 	}
 }

package/src/base-control/README.md

@@ -53,7 +53,7 @@ If true, the label will only be visible to screen readers.
 
 ### help
 
-Additional description for the control. It is preferable to use plain text for `help`, as it can be accessibly associated with the control using `aria-describedby`. When the `help` contains links, or otherwise non-plain text content, it will be associated with the control using `aria-details`.
+Additional description for the control. The element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 
 -   Type: `ReactNode`
 -   Required: No

package/src/base-control/hooks.ts

@@ -27,10 +27,6 @@ export function useBaseControlProps(
 		preferredId
 	);
 
-	// ARIA descriptions can only contain plain text, so fall back to aria-details if not.
-	const helpPropName =
-		typeof help === 'string' ? 'aria-describedby' : 'aria-details';
-
 	return {
 		baseControlProps: {
 			id: uniqueId,
@@ -39,7 +35,7 @@ export function useBaseControlProps(
 		},
 		controlProps: {
 			id: uniqueId,
-			...( !! help ? { [ helpPropName ]: `${ uniqueId }__help` } : {} ),
+			...( !! help ? { 'aria-describedby': `${ uniqueId }__help` } : {} ),
 		},
 	};
 }

package/src/base-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -124,10 +124,7 @@ export const VisualLabel = ( {
 	return (
 		<StyledVisualLabel
 			{ ...props }
-			className={ classnames(
-				'components-base-control__label',
-				className
-			) }
+			className={ clsx( 'components-base-control__label', className ) }
 		>
 			{ children }
 		</StyledVisualLabel>

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

@@ -31,7 +31,7 @@ describe( 'BaseControl', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should render help as aria-details when not plain text', () => {
+	it( 'should still render help as aria-describedby when not plain text', () => {
 		render(
 			<MyBaseControl
 				label="Text"
@@ -44,10 +44,10 @@ describe( 'BaseControl', () => {
 			name: 'My help text',
 		} );
 
-		expect( textarea ).toHaveAttribute( 'aria-details' );
+		expect( textarea ).toHaveAttribute( 'aria-describedby' );
 		expect(
 			// eslint-disable-next-line testing-library/no-node-access
-			help.closest( `#${ textarea.getAttribute( 'aria-details' ) }` )
+			help.closest( `#${ textarea.getAttribute( 'aria-describedby' ) }` )
 		).toBeVisible();
 	} );
 } );

package/src/base-control/types.ts

@@ -21,8 +21,7 @@ export type BaseControlProps = {
 	/**
 	 * Additional description for the control.
 	 *
-	 * It is preferable to use plain text for `help`, as it can be accessibly associated with the control using `aria-describedby`.
-	 * When the `help` contains links, or otherwise non-plain text content, it will be associated with the control using `aria-details`.
+	 * The element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 	 */
 	help?: ReactNode;
 	/**

package/src/border-control/types.ts

@@ -61,6 +61,10 @@ export type BorderControlProps = ColorProps &
 		 * interaction that selects or clears, border color, style, or width.
 		 */
 		onChange: ( value?: Border ) => void;
+		/**
+		 * Placeholder text for the number input.
+		 */
+		placeholder?: HTMLInputElement[ 'placeholder' ];
 		/**
 		 * An internal prop used to control the visibility of the dropdown.
 		 */

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

@@ -80,6 +80,28 @@ describe( 'BoxControl', () => {
 			expect( input ).toHaveValue( '50' );
 			expect( screen.getByRole( 'slider' ) ).toHaveValue( '50' );
 		} );
+
+		it( 'should render the number input with a default min value of 0', () => {
+			render( <BoxControl onChange={ () => {} } /> );
+
+			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
+
+			expect( input ).toHaveAttribute( 'min', '0' );
+		} );
+
+		it( 'should pass down `inputProps` to the underlying number input', () => {
+			render(
+				<BoxControl
+					onChange={ () => {} }
+					inputProps={ { min: 10, max: 50 } }
+				/>
+			);
+
+			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
+
+			expect( input ).toHaveAttribute( 'min', '10' );
+			expect( input ).toHaveAttribute( 'max', '50' );
+		} );
 	} );
 
 	describe( 'Reset', () => {

package/src/button/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type {
 	ComponentPropsWithoutRef,
 	ForwardedRef,
@@ -141,7 +141,7 @@ export function UnforwardedButton(
 		'mixed',
 	];
 
-	const classes = classnames( 'components-button', className, {
+	const classes = clsx( 'components-button', className, {
 		'is-next-40px-default-size': __next40pxDefaultSize,
 		'is-secondary': variant === 'secondary',
 		'is-primary': variant === 'primary',

package/src/button/style.scss

@@ -93,8 +93,7 @@
 		&.is-busy[aria-disabled="true"] {
 			color: $components-color-accent-inverted;
 			background-size: 100px 100%;
-			// Disable reason: This function call looks nicer when each argument is on its own line.
-			/* stylelint-disable */
+			/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 			background-image: linear-gradient(
 				-45deg,
 				$components-color-accent 33%,
@@ -163,13 +162,13 @@
 
 		&:hover:not(:disabled, [aria-disabled="true"]) {
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
-			/* stylelint-disable-next-line declaration-property-value-disallowed-list */
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		}
 
 		&:active:not(:disabled, [aria-disabled="true"]) {
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
-			/* stylelint-disable-next-line declaration-property-value-disallowed-list */
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 		}
 
@@ -262,8 +261,7 @@
 		}
 		opacity: 1;
 		background-size: 100px 100%;
-		// Disable reason: This function call looks nicer when each argument is on its own line.
-		/* stylelint-disable */
+		/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 		background-image: linear-gradient(
 			-45deg,
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)

package/src/button-group/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -20,7 +20,7 @@ function UnforwardedButtonGroup(
 	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const { className, ...restProps } = props;
-	const classes = classnames( 'components-button-group', className );
+	const classes = clsx( 'components-button-group', className );
 
 	return (
 		<div ref={ ref } role="group" className={ classes } { ...restProps } />