@wordpress/components 23.8.0 → 23.9.0

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/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/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

package/src/mobile/color-settings/palette.screen.native.js

@@ -78,22 +78,15 @@ const PaletteScreen = () => {
 		setCurrentValue( color );
 		if ( isSolidSegment && onColorChange && onGradientChange ) {
 			onColorChange( color );
-			onGradientChange( '' );
 		} else if ( isSolidSegment && onColorChange ) {
 			onColorChange( color );
 		} else if ( ! isSolidSegment && onGradientChange ) {
 			onGradientChange( color );
-			onColorChange( '' );
 		}
 	};
 
 	function onClear() {
 		setCurrentValue( undefined );
-		if ( isSolidSegment ) {
-			onColorChange( '' );
-		} else {
-			onGradientChange( '' );
-		}
 
 		if ( onColorCleared ) {
 			onColorCleared();

package/src/mobile/global-styles-context/utils.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { camelCase } from 'change-case';
-import { get } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -191,6 +190,22 @@ export function getBlockTypography(
 	return typographyStyles;
 }
 
+/**
+ * Return a value from a certain path of the object.
+ * Path is specified as an array of properties, like: [ 'parent', 'child' ].
+ *
+ * @param {Object} object Input object.
+ * @param {Array}  path   Path to the object property.
+ * @return {*} Value of the object property at the specified path.
+ */
+const getValueFromObjectPath = ( object, path ) => {
+	let value = object;
+	path.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value;
+};
+
 export function parseStylesVariables( styles, mappedValues, customValues ) {
 	let stylesBase = styles;
 	const variables = [ 'preset', 'custom', 'var', 'fontSize' ];
@@ -231,11 +246,11 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 						customValuesData
 					)
 				) {
-					return get( customValuesData, path );
+					return getValueFromObjectPath( customValuesData, path );
 				}
 
 				// Check for camelcase properties.
-				return get( customValuesData, [
+				return getValueFromObjectPath( customValuesData, [
 					...path.slice( 0, path.length - 1 ),
 					camelCase( path[ path.length - 1 ] ),
 				] );

package/src/mobile/segmented-control/index.native.js

@@ -140,8 +140,8 @@ const SegmentedControls = ( {
 		styles.selectedDark
 	);
 
-	const width = segmentsDimensions[ activeSegmentIndex ].width;
-	const height = segmentsDimensions[ activeSegmentIndex ].height;
+	const width = segmentsDimensions[ activeSegmentIndex ]?.width;
+	const height = segmentsDimensions[ activeSegmentIndex ]?.height;
 
 	const outlineStyle = [ styles.outline, isIOS && styles.outlineIOS ];
 

package/src/modal/style.scss

@@ -16,31 +16,39 @@
 // The modal window element.
 .components-modal__frame {
 	// Use the entire viewport on smaller screens.
-	margin: 0;
+	margin: $grid-unit-50 0 0 0;
 	width: 100%;
 	background: $white;
 	box-shadow: $shadow-modal;
-	border-radius: $radius-block-ui;
+	border-radius: $grid-unit-10 $grid-unit-10 0 0;
 	overflow: hidden;
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
+	// Animate the modal frame/contents appearing on the page.
+	animation: components-modal__appear-animation 0.1s ease-out;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
 
 	// Show a centered modal on bigger screens.
 	@include break-small() {
+		border-radius: $grid-unit-10;
 		margin: auto;
 		width: auto;
 		min-width: $modal-min-width;
 		max-width: calc(100% - #{$grid-unit-20 * 2});
 		max-height: calc(100% - #{$header-height * 2});
 
-		// Animate the modal frame/contents appearing on the page.
-		animation: components-modal__appear-animation 0.1s ease-out;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
-
 		&.is-full-screen {
-			width: 90vw;
-			min-height: 90vh;
+			@include break-small() {
+				width: calc(100% - #{ $grid-unit-20 * 2 });
+				height: calc(100% - #{ $grid-unit-20 * 2 });
+				max-height: none;
+			}
+			@include break-medium() {
+				width: calc(100% - #{ $grid-unit-50 * 2 });
+				height: calc(100% - #{ $grid-unit-50 * 2 });
+				max-width: none;
+			}
 		}
 	}
 
@@ -64,12 +72,12 @@
 .components-modal__header {
 	box-sizing: border-box;
 	border-bottom: $border-width solid transparent;
-	padding: 0 $grid-unit-40;
+	padding: $grid-unit-30 $grid-unit-40 $grid-unit-15;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	height: $header-height + $grid-unit-20;
+	height: $header-height + $grid-unit-15;
 	width: 100%;
 	z-index: z-index(".components-modal__header");
 	position: absolute;
@@ -121,7 +129,7 @@
 // Modal contents.
 .components-modal__content {
 	flex: 1;
-	margin-top: $header-height + $grid-unit-20;
+	margin-top: $header-height + $grid-unit-15;
 	padding: 0 $grid-unit-40 $grid-unit-40;
 	overflow: auto;
 

package/src/navigator/navigator-screen/component.tsx

@@ -43,7 +43,7 @@ const animationExitDelay = 0;
 // as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)
 type Props = Omit<
 	WordPressComponentProps< NavigatorScreenProps, 'div', false >,
-	Exclude< keyof MotionProps, 'style' >
+	Exclude< keyof MotionProps, 'style' | 'children' >
 >;
 
 function UnconnectedNavigatorScreen(