@wordpress/components 28.5.0 → 28.7.0

package/build-types/utils/config-values.d.ts

@@ -1,11 +1,10 @@
 declare const _default: {
     controlSurfaceColor: "#fff";
     controlTextActiveColor: string;
-    controlPaddingX: string;
-    controlPaddingXLarge: string;
-    controlPaddingXSmall: string;
+    controlPaddingX: number;
+    controlPaddingXSmall: number;
+    controlPaddingXLarge: number;
     controlBackgroundColor: "#fff";
-    controlBorderRadius: string;
     controlBoxShadow: string;
     controlBoxShadowFocus: string;
     controlDestructiveBorderColor: string;
@@ -32,7 +31,6 @@ declare const _default: {
     radiusLarge: string;
     radiusFull: string;
     radiusRound: string;
-    radiusBlockUi: string;
     borderWidth: string;
     borderWidthFocus: string;
     borderWidthTab: string;
@@ -57,7 +55,10 @@ declare const _default: {
     cardPaddingSmall: string;
     cardPaddingMedium: string;
     cardPaddingLarge: string;
-    popoverShadow: string;
+    elevationXSmall: string;
+    elevationSmall: string;
+    elevationMedium: string;
+    elevationLarge: string;
     surfaceBackgroundColor: "#fff";
     surfaceBackgroundSubtleColor: string;
     surfaceBackgroundTintColor: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.5.0",
+	"version": "28.7.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,7 +31,7 @@
 	],
 	"types": "build-types",
 	"dependencies": {
-		"@ariakit/react": "^0.4.7",
+		"@ariakit/react": "^0.4.10",
 		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",
@@ -43,23 +43,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.5.0",
-		"@wordpress/compose": "^7.5.0",
-		"@wordpress/date": "^5.5.0",
-		"@wordpress/deprecated": "^4.5.0",
-		"@wordpress/dom": "^4.5.0",
-		"@wordpress/element": "^6.5.0",
-		"@wordpress/escape-html": "^3.5.0",
-		"@wordpress/hooks": "^4.5.0",
-		"@wordpress/html-entities": "^4.5.0",
-		"@wordpress/i18n": "^5.5.0",
-		"@wordpress/icons": "^10.5.0",
-		"@wordpress/is-shallow-equal": "^5.5.0",
-		"@wordpress/keycodes": "^4.5.0",
-		"@wordpress/primitives": "^4.5.0",
-		"@wordpress/private-apis": "^1.5.0",
-		"@wordpress/rich-text": "^7.5.0",
-		"@wordpress/warning": "^3.5.0",
+		"@wordpress/a11y": "^4.7.0",
+		"@wordpress/compose": "^7.7.0",
+		"@wordpress/date": "^5.7.0",
+		"@wordpress/deprecated": "^4.7.0",
+		"@wordpress/dom": "^4.7.0",
+		"@wordpress/element": "^6.7.0",
+		"@wordpress/escape-html": "^3.7.0",
+		"@wordpress/hooks": "^4.7.0",
+		"@wordpress/html-entities": "^4.7.0",
+		"@wordpress/i18n": "^5.7.0",
+		"@wordpress/icons": "^10.7.0",
+		"@wordpress/is-shallow-equal": "^5.7.0",
+		"@wordpress/keycodes": "^4.7.0",
+		"@wordpress/primitives": "^4.7.0",
+		"@wordpress/private-apis": "^1.7.0",
+		"@wordpress/rich-text": "^7.7.0",
+		"@wordpress/warning": "^3.7.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
+	"gitHead": "c90d920de07c53dff82c5914635b56fafa503b7f"
 }

package/src/alignment-matrix-control/README.md

@@ -1,16 +1,12 @@
 # AlignmentMatrixControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
 
 ## Usage
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+import { AlignmentMatrixControl } from '@wordpress/components';
 
 const Example = () => {
 	const [ alignment, setAlignment ] = useState( 'center center' );

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

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { CompositeItem } from '../composite/v2';
+import { Composite } from '../composite';
 import Tooltip from '../tooltip';
 import { VisuallyHidden } from '../visually-hidden';
 
@@ -9,24 +9,18 @@ import { VisuallyHidden } from '../visually-hidden';
  * Internal dependencies
  */
 import { ALIGNMENT_LABEL } from './utils';
-import {
-	Cell as CellView,
-	Point,
-} from './styles/alignment-matrix-control-styles';
+import { Cell as CellView, Point } from './styles';
 import type { AlignmentMatrixControlCellProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
 export default function Cell( {
 	id,
-	isActive = false,
 	value,
 	...props
 }: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {
-	const tooltipText = ALIGNMENT_LABEL[ value ];
-
 	return (
-		<Tooltip text={ tooltipText }>
-			<CompositeItem
+		<Tooltip text={ ALIGNMENT_LABEL[ value ] }>
+			<Composite.Item
 				id={ id }
 				render={ <CellView { ...props } role="gridcell" /> }
 			>
@@ -34,8 +28,8 @@ export default function Cell( {
 			otherwise it'll announce the content as "blank". So we use a visually
 			hidden element instead of aria-label. */ }
 				<VisuallyHidden>{ value }</VisuallyHidden>
-				<Point isActive={ isActive } role="presentation" />
-			</CompositeItem>
+				<Point role="presentation" />
+			</Composite.Item>
 		</Tooltip>
 	);
 }

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

@@ -3,59 +3,77 @@
  */
 import clsx from 'clsx';
 
+/**
+ * WordPress dependencies
+ */
+import { Rect, SVG } from '@wordpress/primitives';
+
 /**
  * Internal dependencies
  */
 import { ALIGNMENTS, getAlignmentIndex } from './utils';
-import {
-	Root,
-	Cell,
-	Point,
-} from './styles/alignment-matrix-control-icon-styles';
 import type { AlignmentMatrixControlIconProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
 const BASE_SIZE = 24;
+const GRID_CELL_SIZE = 7;
+const GRID_PADDING = ( BASE_SIZE - 3 * GRID_CELL_SIZE ) / 2;
+const DOT_SIZE = 2;
+const DOT_SIZE_SELECTED = 4;
 
 function AlignmentMatrixControlIcon( {
 	className,
 	disablePointerEvents = true,
-	size = BASE_SIZE,
+	size,
+	width,
+	height,
 	style = {},
 	value = 'center',
 	...props
-}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'div', false > ) {
-	const alignIndex = getAlignmentIndex( value );
-	const scale = ( size / BASE_SIZE ).toFixed( 2 );
-
-	const classes = clsx(
-		'component-alignment-matrix-control-icon',
-		className
-	);
-
-	const styles = {
-		...style,
-		transform: `scale(${ scale })`,
-	};
-
+}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'svg', false > ) {
 	return (
-		<Root
-			{ ...props }
-			className={ classes }
-			disablePointerEvents={ disablePointerEvents }
+		<SVG
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox={ `0 0 ${ BASE_SIZE } ${ BASE_SIZE }` }
+			width={ size ?? width ?? BASE_SIZE }
+			height={ size ?? height ?? BASE_SIZE }
 			role="presentation"
-			style={ styles }
+			className={ clsx(
+				'component-alignment-matrix-control-icon',
+				className
+			) }
+			style={ {
+				pointerEvents: disablePointerEvents ? 'none' : undefined,
+				...style,
+			} }
+			{ ...props }
 		>
 			{ ALIGNMENTS.map( ( align, index ) => {
-				const isActive = alignIndex === index;
+				const dotSize =
+					getAlignmentIndex( value ) === index
+						? DOT_SIZE_SELECTED
+						: DOT_SIZE;
 
 				return (
-					<Cell key={ align }>
-						<Point isActive={ isActive } />
-					</Cell>
+					<Rect
+						key={ align }
+						x={
+							GRID_PADDING +
+							( index % 3 ) * GRID_CELL_SIZE +
+							( GRID_CELL_SIZE - dotSize ) / 2
+						}
+						y={
+							GRID_PADDING +
+							Math.floor( index / 3 ) * GRID_CELL_SIZE +
+							( GRID_CELL_SIZE - dotSize ) / 2
+						}
+						width={ dotSize }
+						height={ dotSize }
+						fill="currentColor"
+					/>
 				);
 			} ) }
-		</Root>
+		</SVG>
 	);
 }
 

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

@@ -8,39 +8,20 @@ import clsx from 'clsx';
  */
 import { __, isRTL } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Cell from './cell';
-import { Composite, CompositeRow, useCompositeStore } from '../composite/v2';
-import { Root, Row } from './styles/alignment-matrix-control-styles';
+import { Composite } from '../composite';
+import { GridContainer, GridRow } from './styles';
 import AlignmentMatrixControlIcon from './icon';
 import { GRID, getItemId, getItemValue } from './utils';
 import type { WordPressComponentProps } from '../context';
 import type { AlignmentMatrixControlProps } from './types';
 
-/**
- *
- * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
- *
- * ```jsx
- * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const Example = () => {
- * 	const [ alignment, setAlignment ] = useState( 'center center' );
- *
- * 	return (
- * 		<AlignmentMatrixControl
- * 			value={ alignment }
- * 			onChange={ setAlignment }
- * 		/>
- * 	);
- * };
- * ```
- */
-export function AlignmentMatrixControl( {
+function UnforwardedAlignmentMatrixControl( {
 	className,
 	id,
 	label = __( 'Alignment Matrix Control' ),
@@ -51,32 +32,33 @@ export function AlignmentMatrixControl( {
 	...props
 }: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {
 	const baseId = useInstanceId(
-		AlignmentMatrixControl,
+		UnforwardedAlignmentMatrixControl,
 		'alignment-matrix-control',
 		id
 	);
 
-	const compositeStore = useCompositeStore( {
-		defaultActiveId: getItemId( baseId, defaultValue ),
-		activeId: getItemId( baseId, value ),
-		setActiveId: ( nextActiveId ) => {
+	const setActiveId = useCallback<
+		NonNullable< React.ComponentProps< typeof Composite >[ 'setActiveId' ] >
+	>(
+		( nextActiveId ) => {
 			const nextValue = getItemValue( baseId, nextActiveId );
 			if ( nextValue ) {
 				onChange?.( nextValue );
 			}
 		},
-		rtl: isRTL(),
-	} );
-
-	const activeId = compositeStore.useState( 'activeId' );
+		[ baseId, onChange ]
+	);
 
 	const classes = clsx( 'component-alignment-matrix-control', className );
 
 	return (
 		<Composite
-			store={ compositeStore }
+			defaultActiveId={ getItemId( baseId, defaultValue ) }
+			activeId={ getItemId( baseId, value ) }
+			setActiveId={ setActiveId }
+			rtl={ isRTL() }
 			render={
-				<Root
+				<GridContainer
 					{ ...props }
 					aria-label={ label }
 					className={ classes }
@@ -87,26 +69,55 @@ export function AlignmentMatrixControl( {
 			}
 		>
 			{ GRID.map( ( cells, index ) => (
-				<CompositeRow render={ <Row role="row" /> } key={ index }>
-					{ cells.map( ( cell ) => {
-						const cellId = getItemId( baseId, cell );
-						const isActive = cellId === activeId;
-
-						return (
-							<Cell
-								id={ cellId }
-								isActive={ isActive }
-								key={ cell }
-								value={ cell }
-							/>
-						);
-					} ) }
-				</CompositeRow>
+				<Composite.Row render={ <GridRow role="row" /> } key={ index }>
+					{ cells.map( ( cell ) => (
+						<Cell
+							id={ getItemId( baseId, cell ) }
+							key={ cell }
+							value={ cell }
+						/>
+					) ) }
+				</Composite.Row>
 			) ) }
 		</Composite>
 	);
 }
 
-AlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;
+/**
+ * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
+ *
+ * ```jsx
+ * import { AlignmentMatrixControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ * 	const [ alignment, setAlignment ] = useState( 'center center' );
+ *
+ * 	return (
+ * 		<AlignmentMatrixControl
+ * 			value={ alignment }
+ * 			onChange={ setAlignment }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+export const AlignmentMatrixControl = Object.assign(
+	UnforwardedAlignmentMatrixControl,
+	{
+		/**
+		 * Render an alignment matrix as an icon.
+		 *
+		 * ```jsx
+		 * import { AlignmentMatrixControl } from '@wordpress/components';
+		 *
+		 * <Icon icon={<AlignmentMatrixControl.Icon value="top left" />} />
+		 * ```
+		 */
+		Icon: Object.assign( AlignmentMatrixControlIcon, {
+			displayName: 'AlignmentMatrixControl.Icon',
+		} ),
+	}
+);
 
 export default AlignmentMatrixControl;

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

@@ -17,7 +17,7 @@ import { HStack } from '../../h-stack';
 import type { AlignmentMatrixControlProps } from '../types';
 
 const meta: Meta< typeof AlignmentMatrixControl > = {
-	title: 'Components (Experimental)/AlignmentMatrixControl',
+	title: 'Components/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
@@ -59,18 +59,9 @@ export const Default = Template.bind( {} );
 export const IconSubcomponent = () => {
 	return (
 		<HStack justify="flex-start">
+			<Icon icon={ <AlignmentMatrixControl.Icon value="top left" /> } />
 			<Icon
-				icon={
-					<AlignmentMatrixControl.Icon size={ 24 } value="top left" />
-				}
-			/>
-			<Icon
-				icon={
-					<AlignmentMatrixControl.Icon
-						size={ 24 }
-						value="center center"
-					/>
-				}
+				icon={ <AlignmentMatrixControl.Icon value="center center" /> }
 			/>
 		</HStack>
 	);

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

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../utils';
+import type {
+	AlignmentMatrixControlProps,
+	AlignmentMatrixControlIconProps,
+} from './types';
+
+// Grid structure
+
+const rootBase = ( { size = 92 } ) => css`
+	direction: ltr;
+
+	display: grid;
+	grid-template-columns: repeat( 3, 1fr );
+	grid-template-rows: repeat( 3, 1fr );
+
+	box-sizing: border-box;
+	width: ${ size }px;
+	aspect-ratio: 1;
+
+	border-radius: ${ CONFIG.radiusMedium };
+	outline: none;
+`;
+
+export const GridContainer = styled.div< {
+	size?: AlignmentMatrixControlProps[ 'width' ];
+	disablePointerEvents?: AlignmentMatrixControlIconProps[ 'disablePointerEvents' ];
+} >`
+	${ rootBase }
+
+	border: 1px solid transparent;
+
+	${ ( props ) =>
+		props.disablePointerEvents
+			? css``
+			: css`
+					cursor: pointer;
+			  ` }
+`;
+
+export const GridRow = styled.div`
+	grid-column: 1 / -1;
+
+	box-sizing: border-box;
+	display: grid;
+	grid-template-columns: repeat( 3, 1fr );
+`;
+
+// Cell
+export const Cell = styled.span`
+	position: relative;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+
+	appearance: none;
+	border: none;
+	outline: none;
+`;
+
+const POINT_SIZE = 6;
+export const Point = styled.span`
+	display: block;
+	contain: strict;
+
+	box-sizing: border-box;
+	width: ${ POINT_SIZE }px;
+	aspect-ratio: 1;
+
+	margin: auto;
+
+	color: ${ COLORS.theme.gray[ 400 ] };
+
+	/* Use border instead of background color so that the point shows
+	in Windows High Contrast Mode */
+	border: ${ POINT_SIZE / 2 }px solid currentColor;
+
+	/* Highlight active item */
+	${ Cell }[data-active-item] & {
+		color: ${ COLORS.gray[ 900 ] };
+		transform: scale( calc( 5 / 3 ) );
+	}
+
+	/* Hover styles for non-active items */
+	${ Cell }:not([data-active-item]):hover & {
+		color: ${ COLORS.theme.accent };
+	}
+
+	/* Show an outline only when interacting with keyboard */
+	${ Cell }[data-focus-visible] & {
+		outline: 1px solid ${ COLORS.theme.accent };
+		outline-offset: 1px;
+	}
+
+	@media not ( prefers-reduced-motion ) {
+		transition-property: color, transform;
+		transition-duration: 120ms;
+		transition-timing-function: linear;
+	}
+`;

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

@@ -44,11 +44,22 @@ export type AlignmentMatrixControlIconProps = Pick<
 	AlignmentMatrixControlProps,
 	'value'
 > & {
+	/**
+	 * If `true`, disables pointer events on the icon.
+	 * @default true
+	 */
 	disablePointerEvents?: boolean;
+	/**
+	 * _Note: this prop is deprecated. Use the `size` prop on the parent `Icon`
+	 * component instead_
+	 *
+	 * The size of the icon.
+	 * @ignore
+	 * @default 24
+	 */
 	size?: number;
 };
 
 export type AlignmentMatrixControlCellProps = {
-	isActive?: boolean;
 	value: NonNullable< AlignmentMatrixControlProps[ 'value' ] >;
 };

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

@@ -28,8 +28,10 @@ function AngleCircle( {
 	...props
 }: WordPressComponentProps< AngleCircleProps, 'div' > ) {
 	const angleCircleRef = useRef< HTMLDivElement | null >( null );
-	const angleCircleCenter = useRef< { x: number; y: number } | undefined >();
-	const previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();
+	const angleCircleCenterRef = useRef<
+		{ x: number; y: number } | undefined
+	>();
+	const previousCursorValueRef = useRef< CSSStyleDeclaration[ 'cursor' ] >();
 
 	const setAngleCircleCenter = () => {
 		if ( angleCircleRef.current === null ) {
@@ -37,7 +39,7 @@ function AngleCircle( {
 		}
 
 		const rect = angleCircleRef.current.getBoundingClientRect();
-		angleCircleCenter.current = {
+		angleCircleCenterRef.current = {
 			x: rect.x + rect.width / 2,
 			y: rect.y + rect.height / 2,
 		};
@@ -55,10 +57,10 @@ function AngleCircle( {
 		( event.target as HTMLDivElement | null )?.focus();
 
 		if (
-			angleCircleCenter.current !== undefined &&
+			angleCircleCenterRef.current !== undefined &&
 			onChange !== undefined
 		) {
-			const { x: centerX, y: centerY } = angleCircleCenter.current;
+			const { x: centerX, y: centerY } = angleCircleCenterRef.current;
 			onChange(
 				getAngle( centerX, centerY, event.clientX, event.clientY )
 			);
@@ -76,13 +78,13 @@ function AngleCircle( {
 
 	useEffect( () => {
 		if ( isDragging ) {
-			if ( previousCursorValue.current === undefined ) {
-				previousCursorValue.current = document.body.style.cursor;
+			if ( previousCursorValueRef.current === undefined ) {
+				previousCursorValueRef.current = document.body.style.cursor;
 			}
 			document.body.style.cursor = 'grabbing';
 		} else {
-			document.body.style.cursor = previousCursorValue.current || '';
-			previousCursorValue.current = undefined;
+			document.body.style.cursor = previousCursorValueRef.current || '';
+			previousCursorValueRef.current = undefined;
 		}
 	}, [ isDragging ] );
 

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

@@ -15,7 +15,7 @@ const CIRCLE_SIZE = 32;
 const INNER_CIRCLE_SIZE = 6;
 
 export const CircleRoot = styled.div`
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
 	box-sizing: border-box;
 	cursor: grab;
@@ -41,7 +41,7 @@ export const CircleIndicatorWrapper = styled.div`
 
 export const CircleIndicator = styled.div`
 	background: ${ COLORS.theme.accent };
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 	box-sizing: border-box;
 	display: block;
 	left: 50%;