@wordpress/components 23.7.0 → 23.9.0

package/src/checkbox-control/index.tsx

@@ -50,6 +50,7 @@ export function CheckboxControl(
 		checked,
 		indeterminate,
 		help,
+		id: idProp,
 		onChange,
 		...additionalProps
 	} = props;
@@ -81,8 +82,11 @@ export function CheckboxControl(
 		},
 		[ checked, indeterminate ]
 	);
-	const instanceId = useInstanceId( CheckboxControl );
-	const id = `inspector-checkbox-control-${ instanceId }`;
+	const id = useInstanceId(
+		CheckboxControl,
+		'inspector-checkbox-control',
+		idProp
+	);
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.checked );
 

package/src/color-palette/index.native.js

@@ -15,7 +15,7 @@ import {
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useRef, useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -175,6 +175,22 @@ function ColorPalette( {
 		}
 	}
 
+	function getColorGradientName( value ) {
+		const fallbackName = sprintf(
+			/* translators: %s: the hex color value */
+			__( 'Unlabeled color. %s' ),
+			value
+		);
+		const foundColorName = isGradientSegment
+			? defaultSettings.gradients?.find(
+					( gradient ) => gradient.gradient === value
+			  )
+			: defaultSettings.allColors?.find(
+					( color ) => color.color === value
+			  );
+		return foundColorName ? foundColorName?.name : fallbackName;
+	}
+
 	function onColorPress( color ) {
 		deselectCustomGradient();
 		performAnimation( color );
@@ -251,6 +267,8 @@ function ColorPalette( {
 					const scaleValue = isSelected( color )
 						? scaleInterpolation
 						: 1;
+					const colorName = getColorGradientName( color );
+
 					return (
 						<View key={ `${ color }-${ isSelected( color ) }` }>
 							<TouchableWithoutFeedback
@@ -260,6 +278,7 @@ function ColorPalette( {
 									selected: isSelected( color ),
 								} }
 								accessibilityHint={ color }
+								accessibilityLabel={ colorName }
 								testID={ color }
 							>
 								<Animated.View

package/src/color-picker/test/index.tsx

@@ -1,49 +1,14 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import { ColorPicker } from '..';
 
-/**
- * Ordinarily we'd try to select the component by role but the slider role appears
- * on several elements and we'd end up encoding assumptions about order when
- * trying to select the appropriate element. We might as well just use the class name
- * on the container which will be more durable if, for example, the order changes.
- */
-function getSaturation( container: HTMLElement ) {
-	return container.querySelector(
-		'.react-colorful__saturation .react-colorful__interactive'
-	);
-}
-
-type PageXPageY = { pageX: number; pageY: number };
-
-// Fix to pass `pageX` and `pageY`
-// See https://github.com/testing-library/react-testing-library/issues/268
-class FakeMouseEvent extends MouseEvent {
-	constructor( type: MouseEvent[ 'type' ], values?: PageXPageY ) {
-		super( type, { buttons: 1, bubbles: true, ...values } );
-
-		Object.assign( this, {
-			pageX: values?.pageX ?? 0,
-			pageY: values?.pageY ?? 0,
-		} );
-	}
-}
-
-function moveReactColorfulSlider(
-	sliderElement: Element,
-	from: PageXPageY,
-	to: PageXPageY
-) {
-	fireEvent( sliderElement, new FakeMouseEvent( 'mousedown', from ) );
-	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
-}
-
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),
 	s: expect.any( Number ),
@@ -73,99 +38,134 @@ const legacyColorMatcher = {
 describe( 'ColorPicker', () => {
 	describe( 'legacy props', () => {
 		it( 'should fire onChangeComplete with the legacy color format', async () => {
+			const user = userEvent.setup();
 			const onChangeComplete = jest.fn();
-			const color = '#fff';
+			const color = '#000';
 
-			const { container } = render(
+			render(
 				<ColorPicker
 					onChangeComplete={ onChangeComplete }
 					color={ color }
+					enableAlpha={ false }
 				/>
 			);
 
-			const saturation = getSaturation( container );
-
-			if ( saturation === null ) {
-				throw new Error( 'The saturation slider could not be found' );
-			}
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
 
-			expect( saturation ).toBeInTheDocument();
+			await user.selectOptions( formatSelector, 'hex' );
 
-			moveReactColorfulSlider(
-				saturation,
-				{ pageX: 0, pageY: 0 },
-				{ pageX: 10, pageY: 10 }
-			);
+			const hexInput = screen.getByRole( 'textbox' );
+			expect( hexInput ).toBeVisible();
 
-			await waitFor( () =>
-				expect( onChangeComplete ).toHaveBeenCalled()
-			);
+			await user.clear( hexInput );
+			await user.type( hexInput, '1ab' );
 
-			expect( onChangeComplete ).toHaveBeenCalledWith(
+			expect( onChangeComplete ).toHaveBeenCalledTimes( 3 );
+			expect( onChangeComplete ).toHaveBeenLastCalledWith(
 				legacyColorMatcher
 			);
 		} );
 	} );
+	describe( 'Hex input', () => {
+		it( 'should fire onChange with the correct value from the hex input', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const color = '#000';
+
+			render(
+				<ColorPicker
+					onChange={ onChange }
+					color={ color }
+					enableAlpha={ false }
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
+
+			await user.selectOptions( formatSelector, 'hex' );
 
-	it( 'should fire onChange with the string value', async () => {
-		const onChange = jest.fn();
-		const color = 'rgba(1, 1, 1, 0.5)';
+			const hexInput = screen.getByRole( 'textbox' );
+			expect( hexInput ).toBeVisible();
 
-		const { container } = render(
-			<ColorPicker onChange={ onChange } color={ color } enableAlpha />
-		);
+			await user.clear( hexInput );
+			await user.type( hexInput, '1ab' );
 
-		const saturation = getSaturation( container );
+			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#11aabb' );
+		} );
+	} );
 
-		if ( saturation === null ) {
-			throw new Error( 'The saturation slider could not be found' );
-		}
+	describe.each( [
+		[ 'red', 'Red', '#7dffff' ],
+		[ 'green', 'Green', '#ff7dff' ],
+		[ 'blue', 'Blue', '#ffff7d' ],
+	] )( 'RGB inputs', ( colorInput, inputLabel, expected ) => {
+		it( `should fire onChange with the correct value when the ${ colorInput } value is updated`, async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const color = '#fff';
 
-		expect( saturation ).toBeInTheDocument();
+			render(
+				<ColorPicker
+					onChange={ onChange }
+					color={ color }
+					enableAlpha={ false }
+				/>
+			);
 
-		moveReactColorfulSlider(
-			saturation,
-			{ pageX: 0, pageY: 0 },
-			{ pageX: 10, pageY: 10 }
-		);
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
 
-		await waitFor( () => expect( onChange ).toHaveBeenCalled() );
+			await user.selectOptions( formatSelector, 'rgb' );
 
-		expect( onChange ).toHaveBeenCalledWith(
-			expect.stringMatching( /^#([a-fA-F0-9]{8})$/ )
-		);
-	} );
+			const inputElement = screen.getByRole( 'spinbutton', {
+				name: inputLabel,
+			} );
+			expect( inputElement ).toBeVisible();
 
-	it( 'should fire onChange with the HSL value', async () => {
-		const onChange = jest.fn();
-		const color = 'hsla(125, 20%, 50%, 0.5)';
+			await user.clear( inputElement );
+			await user.type( inputElement, '125' );
 
-		const { container } = render(
-			<ColorPicker
-				onChange={ onChange }
-				color={ color }
-				enableAlpha={ false }
-			/>
-		);
+			expect( onChange ).toHaveBeenCalledTimes( 4 );
+			expect( onChange ).toHaveBeenLastCalledWith( expected );
+		} );
+	} );
 
-		const saturation = getSaturation( container );
+	describe.each( [
+		[ 'hue', 'Hue', '#aad52a' ],
+		[ 'saturation', 'Saturation', '#20dfdf' ],
+		[ 'lightness', 'Lightness', '#95eaea' ],
+	] )( 'HSL inputs', ( colorInput, inputLabel, expected ) => {
+		it( `should fire onChange with the correct value when the ${ colorInput } value is updated`, async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const color = '#2ad5d5';
+
+			render(
+				<ColorPicker
+					onChange={ onChange }
+					color={ color }
+					enableAlpha={ false }
+				/>
+			);
 
-		if ( saturation === null ) {
-			throw new Error( 'The saturation slider could not be found' );
-		}
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
 
-		expect( saturation ).toBeInTheDocument();
+			await user.selectOptions( formatSelector, 'hsl' );
 
-		moveReactColorfulSlider(
-			saturation,
-			{ pageX: 0, pageY: 0 },
-			{ pageX: 10, pageY: 10 }
-		);
+			const inputElement = screen.getByRole( 'spinbutton', {
+				name: inputLabel,
+			} );
+			expect( inputElement ).toBeVisible();
 
-		await waitFor( () => expect( onChange ).toHaveBeenCalled() );
+			await user.clear( inputElement );
+			await user.type( inputElement, '75' );
 
-		expect( onChange ).toHaveBeenCalledWith(
-			expect.stringMatching( /^#([a-fA-F0-9]{6})$/ )
-		);
+			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			expect( onChange ).toHaveBeenLastCalledWith( expected );
+		} );
 	} );
 } );

package/src/custom-gradient-picker/index.native.js

@@ -25,7 +25,7 @@ function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
 	const [ currentColor, setCurrentColor ] = useState( currentValue );
 
 	const { getGradientType, gradients, gradientOptions } = colorsUtils;
-	const gradientAST = getGradientAstWithDefault( currentColor );
+	const { gradientAST } = getGradientAstWithDefault( currentColor );
 	const gradientType = getGradientType( currentColor );
 
 	function isLinearGradient( type ) {

package/src/custom-gradient-picker/serializer.ts

@@ -2,15 +2,11 @@
  * External dependencies
  */
 import type gradientParser from 'gradient-parser';
-/**
- * Internal dependencies
- */
-import type { ColorStopTypeAndValue } from './types';
 
 export function serializeGradientColor( {
 	type,
 	value,
-}: ColorStopTypeAndValue ) {
+}: gradientParser.ColorStop ) {
 	if ( type === 'literal' ) {
 		return value;
 	}
@@ -38,7 +34,7 @@ export function serializeGradientColorStop( {
 	return `${ serializeGradientColor( {
 		type,
 		value,
-	} as ColorStopTypeAndValue ) } ${ serializeGradientPosition( length ) }`;
+	} as gradientParser.ColorStop ) } ${ serializeGradientPosition( length ) }`;
 }
 
 export function serializeGradientOrientation(

package/src/custom-gradient-picker/types.ts

@@ -48,24 +48,6 @@ export type GradientTypePickerProps = {
 
 export type ControlPoint = { color: string; position: number };
 
-// When dealing with unions of objects, using `Pick` will result
-// in a new type where each desired prop is a union of the values for that prop
-// across all of the original union members. This does not maintain the specific
-// combinations of props present in the original union.
-// To avoid this, the `DistributivePick` type will
-// "distribute" the `Pick` across the union. This allows the `Pick`
-// to act on each member individually, maintaining the relationships between the
-// resulting props.
-// https://stackoverflow.com/questions/57103834/typescript-omit-a-property-from-all-interfaces-in-a-union-but-keep-the-union-s
-type DistributivePick< T, K extends keyof T > = T extends any
-	? Pick< T, K >
-	: never;
-
-export type ColorStopTypeAndValue = DistributivePick<
-	gradientParser.ColorStop,
-	'type' | 'value'
->;
-
 export type CustomGradientBarProps = {
 	background: React.CSSProperties[ 'background' ];
 	hasGradient: boolean;

package/src/dimension-control/README.md

@@ -9,8 +9,8 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import { useState } from 'react';
 import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 export default function MyCustomDimensionControl() {
 	const [ paddingSize, setPaddingSize ] = useState( '' );

package/src/draggable/README.md

@@ -8,9 +8,16 @@ Note that the drag handle needs to declare the `draggable="true"` property and b
 
 The component accepts the following props:
 
+### `appendToOwnerDocument`: `boolean`
+
+Whether to append the cloned element to the `ownerDocument` body. By default, elements sourced by id are appended to the element's wrapper.
+
+-   Required: No
+-   Default: `false`
+
 ### `elementId`: `string`
 
-The HTML id of the element to clone on drag
+The HTML id of the element to clone on drag.
 
 -   Required: Yes
 

package/src/draggable/index.tsx

@@ -63,6 +63,7 @@ export function Draggable( {
 	onDragStart,
 	onDragOver,
 	onDragEnd,
+	appendToOwnerDocument = false,
 	cloneClassname,
 	elementId,
 	transferData,
@@ -173,7 +174,11 @@ export function Draggable( {
 			cloneWrapper.appendChild( clone );
 
 			// Inject the cloneWrapper into the DOM.
-			elementWrapper?.appendChild( cloneWrapper );
+			if ( appendToOwnerDocument ) {
+				ownerDocument.body.appendChild( cloneWrapper );
+			} else {
+				elementWrapper?.appendChild( cloneWrapper );
+			}
 		}
 
 		// Mark the current cursor coordinates.

package/src/draggable/stories/index.tsx

@@ -7,6 +7,7 @@ import type { DragEvent } from 'react';
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { Icon, more } from '@wordpress/icons';
 
@@ -32,46 +33,68 @@ export default meta;
 
 const DefaultTemplate: ComponentStory< typeof Draggable > = ( args ) => {
 	const [ isDragging, setDragging ] = useState( false );
+	const instanceId = useInstanceId( DefaultTemplate );
 
 	// Allow for the use of ID in the example.
 	return (
 		<div>
-			<p>Is Dragging? { isDragging ? 'Yes' : 'No!' }</p>
+			<p
+				style={ {
+					padding: '1em',
+					position: 'relative',
+					zIndex: 1000,
+					backgroundColor: 'whitesmoke',
+				} }
+			>
+				Is Dragging? { isDragging ? 'Yes' : 'No!' }
+			</p>
 			<div
-				/* eslint-disable no-restricted-syntax, eslint-comments/disable-enable-pair */
-				id="draggable-example-box"
-				style={ { display: 'inline-flex' } }
+				style={ {
+					zIndex: 100,
+					position: 'relative',
+				} }
 			>
-				<Draggable { ...args } elementId="draggable-example-box">
-					{ ( { onDraggableStart, onDraggableEnd } ) => {
-						const handleOnDragStart = ( event: DragEvent ) => {
-							setDragging( true );
-							onDraggableStart( event );
-						};
-						const handleOnDragEnd = ( event: DragEvent ) => {
-							setDragging( false );
-							onDraggableEnd( event );
-						};
-
-						return (
-							<div
-								onDragStart={ handleOnDragStart }
-								onDragEnd={ handleOnDragEnd }
-								draggable
-								style={ {
-									alignItems: 'center',
-									display: 'flex',
-									justifyContent: 'center',
-									width: 100,
-									height: 100,
-									background: '#ddd',
-								} }
-							>
-								<Icon icon={ more } />
-							</div>
-						);
+				<div
+					id={ `draggable-example-box-${ instanceId }` }
+					style={ {
+						display: 'inline-flex',
+						position: 'relative',
 					} }
-				</Draggable>
+				>
+					<Draggable
+						{ ...args }
+						elementId={ `draggable-example-box-${ instanceId }` }
+					>
+						{ ( { onDraggableStart, onDraggableEnd } ) => {
+							const handleOnDragStart = ( event: DragEvent ) => {
+								setDragging( true );
+								onDraggableStart( event );
+							};
+							const handleOnDragEnd = ( event: DragEvent ) => {
+								setDragging( false );
+								onDraggableEnd( event );
+							};
+
+							return (
+								<div
+									onDragStart={ handleOnDragStart }
+									onDragEnd={ handleOnDragEnd }
+									draggable
+									style={ {
+										alignItems: 'center',
+										display: 'flex',
+										justifyContent: 'center',
+										width: 100,
+										height: 100,
+										background: '#ddd',
+									} }
+								>
+									<Icon icon={ more } />
+								</div>
+							);
+						} }
+					</Draggable>
+				</div>
 			</div>
 		</div>
 	);
@@ -81,3 +104,16 @@ export const Default: ComponentStory< typeof Draggable > = DefaultTemplate.bind(
 	{}
 );
 Default.args = {};
+
+/**
+ * `appendToOwnerDocument` is used to append the element being dragged to the body of the owner document.
+ *
+ * This is useful when the element being dragged should not receive styles from its parent.
+ * For example, when the element's parent sets a `z-index` value that would cause the dragged
+ * element to be rendered behind other elements.
+ */
+export const AppendElementToOwnerDocument: ComponentStory< typeof Draggable > =
+	DefaultTemplate.bind( {} );
+AppendElementToOwnerDocument.args = {
+	appendToOwnerDocument: true,
+};

package/src/draggable/types.ts

@@ -17,6 +17,13 @@ export type DraggableProps = {
 		 */
 		onDraggableEnd: ( event: DragEvent ) => void;
 	} ) => JSX.Element | null;
+	/**
+	 * Whether to append the cloned element to the `ownerDocument` body.
+	 * By default, elements sourced by id are appended to the element's wrapper.
+	 *
+	 * @default false
+	 */
+	appendToOwnerDocument?: boolean;
 	/**
 	 * Classname for the cloned element.
 	 */

package/src/drop-zone/index.tsx

@@ -120,30 +120,34 @@ export function DropZoneComponent( {
 
 	let children;
 	const backdrop = {
-		hidden: { scaleY: 0, opacity: 0 },
+		hidden: { opacity: 0 },
 		show: {
-			scaleY: 1,
 			opacity: 1,
 			transition: {
 				type: 'tween',
 				duration: 0.2,
-				delay: 0.1,
-				delayChildren: 0.2,
+				delay: 0,
+				delayChildren: 0.1,
 			},
 		},
 		exit: {
-			scaleY: 1,
 			opacity: 0,
 			transition: {
-				duration: 0.3,
+				duration: 0.2,
 				delayChildren: 0,
 			},
 		},
 	};
 
 	const foreground = {
-		hidden: { opacity: 0, scale: 0.75 },
-		show: { opacity: 1, scale: 1 },
+		hidden: { opacity: 0, scale: 0.9 },
+		show: {
+			opacity: 1,
+			scale: 1,
+			transition: {
+				duration: 0.1,
+			},
+		},
 		exit: { opacity: 0, scale: 0.9 },
 	};
 

package/src/drop-zone/style.scss

@@ -38,7 +38,7 @@
 }
 
 .components-drop-zone__content-icon {
-	margin: 0 auto;
+	margin: 0 auto $grid-unit-10;
 	line-height: 0;
 	fill: currentColor;
 	pointer-events: none;

package/src/{index.js → index.ts}

@@ -90,6 +90,7 @@ export { default as GuidePage } from './guide/page';
 export { Heading as __experimentalHeading } from './heading';
 export { HStack as __experimentalHStack } from './h-stack';
 export { default as Icon } from './icon';
+export type { IconType } from './icon';
 export { default as IconButton } from './button/deprecated';
 export {
 	ItemGroup as __experimentalItemGroup,

package/src/mobile/bottom-sheet/cell.native.js

@@ -10,7 +10,6 @@ import {
 	AccessibilityInfo,
 	Platform,
 } from 'react-native';
-import { isEmpty, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -273,8 +272,8 @@ class BottomSheetCell extends Component {
 				return accessibilityLabel || label;
 			}
 
-			if ( isEmpty( value ) ) {
-				return isEmpty( help )
+			if ( ! value ) {
+				return ! help
 					? sprintf(
 							/* translators: accessibility text. Empty state of a inline textinput cell. %s: The cell's title */
 							_x( '%s. Empty', 'inline textinput cell' ),
@@ -288,7 +287,7 @@ class BottomSheetCell extends Component {
 							help
 					  );
 			}
-			return isEmpty( help )
+			return ! help
 				? sprintf(
 						/* translators: accessibility text. Inline textinput title and value.%1: Cell title, %2: cell value. */
 						_x( '%1$s, %2$s', 'inline textinput cell' ),
@@ -323,7 +322,7 @@ class BottomSheetCell extends Component {
 		const opacity =
 			activeOpacity !== undefined
 				? activeOpacity
-				: get( platformStyles, 'activeOpacity.opacity' );
+				: platformStyles.activeOpacity?.opacity;
 
 		return (
 			<TouchableRipple