@wordpress/components 23.3.2 → 23.4.0

package/src/angle-picker-control/{index.js → index.tsx}

@@ -1,12 +1,14 @@
 /**
  * External dependencies
  */
+import type { ForwardedRef } from 'react';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
+import { forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -21,14 +23,22 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { COLORS } from '../utils/colors-values';
 
-export default function AnglePickerControl( {
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMarginBottom = false,
-	className,
-	label = __( 'Angle' ),
-	onChange,
-	value,
-} ) {
+import type { WordPressComponentProps } from '../ui/context';
+import type { AnglePickerControlProps } from './types';
+
+function UnforwardedAnglePickerControl(
+	props: WordPressComponentProps< AnglePickerControlProps, 'div' >,
+	ref: ForwardedRef< any >
+) {
+	const {
+		__nextHasNoMarginBottom = false,
+		className,
+		label = __( 'Angle' ),
+		onChange,
+		value,
+		...restProps
+	} = props;
+
 	if ( ! __nextHasNoMarginBottom ) {
 		deprecated(
 			'Bottom margin styles for wp.components.AnglePickerControl',
@@ -40,9 +50,15 @@ export default function AnglePickerControl( {
 		);
 	}
 
-	const handleOnNumberChange = ( unprocessedValue ) => {
+	const handleOnNumberChange = ( unprocessedValue: string | undefined ) => {
+		if ( onChange === undefined ) {
+			return;
+		}
+
 		const inputValue =
-			unprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;
+			unprocessedValue !== undefined && unprocessedValue !== ''
+				? parseInt( unprocessedValue, 10 )
+				: 0;
 		onChange( inputValue );
 	};
 
@@ -50,6 +66,8 @@ export default function AnglePickerControl( {
 
 	return (
 		<Root
+			{ ...restProps }
+			ref={ ref }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			className={ classes }
 			gap={ 4 }
@@ -94,3 +112,29 @@ export default function AnglePickerControl( {
 		</Root>
 	);
 }
+
+/**
+ * `AnglePickerControl` is a React component to render a UI that allows users to
+ * pick an angle. Users can choose an angle in a visual UI with the mouse by
+ * dragging an angle indicator inside a circle or by directly inserting the
+ * desired angle in a text field.
+ *
+ * ```jsx
+ * import { useState } from '@wordpress/element';
+ * import { AnglePickerControl } from '@wordpress/components';
+ *
+ * function Example() {
+ *   const [ angle, setAngle ] = useState( 0 );
+ *   return (
+ *     <AnglePickerControl
+ *       value={ angle }
+ *       onChange={ setAngle }
+ *       __nextHasNoMarginBottom
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export const AnglePickerControl = forwardRef( UnforwardedAnglePickerControl );
+
+export default AnglePickerControl;

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

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AnglePickerControl } from '..';
+
+const meta: ComponentMeta< typeof AnglePickerControl > = {
+	title: 'Components/AnglePickerControl',
+	component: AnglePickerControl,
+	argTypes: {
+		as: { control: { type: null } },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+
+export default meta;
+
+const AnglePickerWithState: ComponentStory< typeof AnglePickerControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ angle, setAngle ] = useState< number >( 0 );
+
+	const handleChange = ( newValue: number ) => {
+		setAngle( newValue );
+		onChange( newValue );
+	};
+
+	return (
+		<AnglePickerControl
+			{ ...args }
+			value={ angle }
+			onChange={ handleChange }
+		/>
+	);
+};
+
+export const Default = AnglePickerWithState.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+};

package/src/angle-picker-control/styles/{angle-picker-control-styles.js → angle-picker-control-styles.tsx}

@@ -12,10 +12,14 @@ import { COLORS } from '../../utils';
 import { space } from '../../ui/utils/space';
 import CONFIG from '../../utils/config-values';
 
+import type { AnglePickerControlProps } from '../types';
+
 const CIRCLE_SIZE = 32;
 const INNER_CIRCLE_SIZE = 3;
 
-const deprecatedBottomMargin = ( { __nextHasNoMarginBottom } ) => {
+const deprecatedBottomMargin = ( {
+	__nextHasNoMarginBottom,
+}: Pick< AnglePickerControlProps, '__nextHasNoMarginBottom' > ) => {
 	return ! __nextHasNoMarginBottom
 		? css`
 				margin-bottom: ${ space( 2 ) };

package/src/angle-picker-control/types.ts

@@ -0,0 +1,29 @@
+export type AnglePickerControlProps = {
+	/**
+	 * Start opting into the new margin-free styles that will become the default
+	 * in a future version.
+	 *
+	 * @default false
+	 */
+	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Label to use for the angle picker.
+	 *
+	 * @default __( 'Angle' )
+	 */
+	label?: string;
+	/**
+	 * A function that receives the new value of the input.
+	 */
+	onChange: ( value: number ) => void;
+	/**
+	 * The current value of the input. The value represents an angle in degrees
+	 * and should be a value between 0 and 360.
+	 */
+	value: number | string;
+};
+
+export type AngleCircleProps = Pick<
+	AnglePickerControlProps,
+	'value' | 'onChange'
+>;

package/src/autocomplete/autocompleter-ui.native.js

@@ -144,6 +144,7 @@ export function getAutoCompleterUI( autocompleter ) {
 					<Animated.View style={ contentStyles }>
 						<BackgroundView>
 							<ScrollView
+								testID="autocompleter"
 								ref={ scrollViewRef }
 								horizontal
 								contentContainerStyle={

package/src/base-control/hooks.ts

@@ -14,7 +14,7 @@ import type { BaseControlProps } from './types';
  *
  * Namely, it takes care of generating a unique `id`, properly associating it with the `label` and `help` elements.
  *
- * @param  props
+ * @param props
  */
 export function useBaseControlProps(
 	props: Omit< BaseControlProps, 'children' >

package/src/border-box-control/test/{index.js → index.tsx}

@@ -1,16 +1,13 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { act } from 'react-test-renderer';
 
 /**
  * Internal dependencies
  */
-import { BorderBoxControl } from '../';
-
-jest.useFakeTimers();
+import { BorderBoxControl } from '..';
 
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
@@ -98,7 +95,7 @@ describe( 'BorderBoxControl', () => {
 
 			const widthInput = screen.getByRole( 'spinbutton', {
 				name: 'Border width',
-			} );
+			} ) as HTMLInputElement;
 
 			expect( widthInput.value ).toBe( '1' );
 		} );
@@ -110,23 +107,37 @@ describe( 'BorderBoxControl', () => {
 
 			const widthInput = screen.getByRole( 'spinbutton', {
 				name: 'Border width',
-			} );
+			} ) as HTMLInputElement;
 
 			expect( widthInput.value ).toBe( '1' );
 		} );
 
 		it( 'should render placeholder and omit unit select when border values are mixed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
 
+			// There are 4 inputs when in unlinked mode (top/right/bottom/left)
+			expect(
+				screen.getAllByRole( 'spinbutton', {
+					name: 'Border width',
+				} )
+			).toHaveLength( 4 );
+
 			// First render of control with mixed values should show split view.
 			await user.click(
 				screen.getByRole( 'button', { name: 'Link sides' } )
 			);
 
+			// In linked mode, there is only one input
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'spinbutton', {
+						name: 'Border width',
+					} )
+				).toBeVisible()
+			);
+
 			const widthInput = screen.getByRole( 'spinbutton', {
 				name: 'Border width',
 			} );
@@ -139,9 +150,7 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		it( 'should render shared border width and unit select when switching to linked view', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			// Render control with mixed border values but consistent widths.
 			render(
@@ -171,7 +180,7 @@ describe( 'BorderBoxControl', () => {
 
 			const linkedInput = screen.getByRole( 'spinbutton', {
 				name: 'Border width',
-			} );
+			} ) as HTMLInputElement;
 			const unitSelect = screen.getByRole( 'combobox', {
 				name: 'Select unit',
 			} );
@@ -181,31 +190,30 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		it( 'should omit style options when requested', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <BorderBoxControl { ...props } enableStyle={ false } /> );
 
 			const colorButton = screen.getByLabelText( colorPickerRegex );
 			await user.click( colorButton );
-			await act( () => Promise.resolve() );
 
-			const styleLabel = screen.queryByText( 'Style' );
-			const solidButton = screen.queryByRole( 'button', {
-				name: 'Solid',
-			} );
-			const dashedButton = screen.queryByRole( 'button', {
-				name: 'Dashed',
-			} );
-			const dottedButton = screen.queryByRole( 'button', {
-				name: 'Dotted',
-			} );
+			// Wait for the custom color picker in the dropdown to appear
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Custom color picker.',
+					} )
+				).toBeVisible()
+			);
 
-			expect( styleLabel ).not.toBeInTheDocument();
-			expect( solidButton ).not.toBeInTheDocument();
-			expect( dashedButton ).not.toBeInTheDocument();
-			expect( dottedButton ).not.toBeInTheDocument();
+			// Make sure that none of the border style buttons (and the section
+			// title) are rendered to screen.
+			expect( screen.queryByText( 'Style' ) ).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', {
+					name: /(Solid)|(Dashed)|(Dotted)/,
+				} )
+			).not.toBeInTheDocument();
 		} );
 	} );
 
@@ -237,7 +245,7 @@ describe( 'BorderBoxControl', () => {
 
 			const widthInputs = screen.getAllByRole( 'spinbutton', {
 				name: 'Border width',
-			} );
+			} ) as HTMLInputElement[];
 
 			expect( widthInputs[ 0 ].value ).toBe( '1' ); // Top.
 			expect( widthInputs[ 1 ].value ).toBe( '0.75' ); // Left.
@@ -246,9 +254,7 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		it( 'should render split view correctly when starting with flat border', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<BorderBoxControl { ...props } value={ defaultBorders } />
@@ -260,60 +266,44 @@ describe( 'BorderBoxControl', () => {
 
 			const widthInputs = screen.getAllByRole( 'spinbutton', {
 				name: 'Border width',
-			} );
+			} ) as HTMLInputElement[];
 			expect( widthInputs[ 0 ].value ).toBe( '1' ); // Top.
 			expect( widthInputs[ 1 ].value ).toBe( '1' ); // Left.
 			expect( widthInputs[ 2 ].value ).toBe( '1' ); // Right.
 			expect( widthInputs[ 3 ].value ).toBe( '1' ); // Bottom.
 		} );
 
-		it( 'should omit style options when requested', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+		// We're expecting to have 4 color buttons by default.
+		const colorButtonIndexes = [ ...Array( 4 ).keys() ];
 
-			render( <BorderBoxControl { ...props } enableStyle={ false } /> );
+		it.each( colorButtonIndexes )(
+			'should omit style options when color button %s is pressed',
+			async ( colorButtonIndex ) => {
+				const user = userEvent.setup();
 
-			await user.click(
-				screen.getByRole( 'button', { name: 'Unlink sides' } )
-			);
-
-			const colorButtons = screen.getAllByLabelText( colorPickerRegex );
-
-			function assertStyleOptionsMissing() {
-				const styleLabel = screen.queryByText( 'Style' );
-				const solidButton = screen.queryByRole( 'button', {
-					name: 'Solid',
-				} );
-				const dashedButton = screen.queryByRole( 'button', {
-					name: 'Dashed',
-				} );
-				const dottedButton = screen.queryByRole( 'button', {
-					name: 'Dotted',
-				} );
-
-				expect( styleLabel ).not.toBeInTheDocument();
-				expect( solidButton ).not.toBeInTheDocument();
-				expect( dashedButton ).not.toBeInTheDocument();
-				expect( dottedButton ).not.toBeInTheDocument();
-			}
+				render(
+					<BorderBoxControl { ...props } enableStyle={ false } />
+				);
 
-			await user.click( colorButtons[ 0 ] );
-			assertStyleOptionsMissing();
-			await user.click( colorButtons[ 0 ] );
+				await user.click(
+					screen.getByRole( 'button', { name: 'Unlink sides' } )
+				);
 
-			await user.click( colorButtons[ 1 ] );
-			assertStyleOptionsMissing();
-			await user.click( colorButtons[ 1 ] );
+				const colorButtons =
+					screen.getAllByLabelText( colorPickerRegex );
 
-			await user.click( colorButtons[ 2 ] );
-			assertStyleOptionsMissing();
-			await user.click( colorButtons[ 2 ] );
+				await user.click( colorButtons[ colorButtonIndex ] );
 
-			await user.click( colorButtons[ 3 ] );
-			assertStyleOptionsMissing();
-			await user.click( colorButtons[ 3 ] );
-		} );
+				// Make sure that none of the border style buttons (and the section
+				// title) are rendered to screen.
+				expect( screen.queryByText( 'Style' ) ).not.toBeInTheDocument();
+				expect(
+					screen.queryByRole( 'button', {
+						name: /(Solid)|(Dashed)|(Dotted)/,
+					} )
+				).not.toBeInTheDocument();
+			}
+		);
 	} );
 
 	describe( 'onChange handling', () => {
@@ -324,9 +314,7 @@ describe( 'BorderBoxControl', () => {
 
 		describe( 'Linked value change handling', () => {
 			it( 'should set undefined when new border is empty', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<BorderBoxControl { ...props } value={ { width: '1px' } } />
@@ -340,9 +328,7 @@ describe( 'BorderBoxControl', () => {
 			} );
 
 			it( 'should update with complete flat border', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<BorderBoxControl { ...props } value={ defaultBorder } />
@@ -361,9 +347,7 @@ describe( 'BorderBoxControl', () => {
 			} );
 
 			it( 'should maintain mixed values if not explicitly set via linked control', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<BorderBoxControl
@@ -396,9 +380,7 @@ describe( 'BorderBoxControl', () => {
 			} );
 
 			it( 'should update with consistent split borders', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<BorderBoxControl { ...props } value={ defaultBorders } />
@@ -417,9 +399,7 @@ describe( 'BorderBoxControl', () => {
 			} );
 
 			it( 'should set undefined borders when change results in empty borders', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<BorderBoxControl
@@ -441,9 +421,7 @@ describe( 'BorderBoxControl', () => {
 			} );
 
 			it( 'should set flat border when change results in consistent split borders', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<BorderBoxControl
@@ -476,9 +454,7 @@ describe( 'BorderBoxControl', () => {
 
 		describe( 'Split value change handling', () => {
 			it( 'should set split borders when the updated borders are mixed', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				const borders = {
 					top: { ...defaultBorder, width: '1px' },
@@ -502,9 +478,7 @@ describe( 'BorderBoxControl', () => {
 			} );
 
 			it( 'should set flat border when updated borders are consistent', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				const borders = {
 					top: { ...defaultBorder, width: '4px' },

package/src/border-box-control/test/{utils.js → utils.ts}

@@ -47,11 +47,15 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'isEmptyBorder', () => {
 		it( 'should determine a undefined, null, and {} to be empty', () => {
 			expect( isEmptyBorder( undefined ) ).toBe( true );
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
 			expect( isEmptyBorder( null ) ).toBe( true );
 			expect( isEmptyBorder( {} ) ).toBe( true );
 		} );
 
 		it( 'should determine object missing all border props to be empty', () => {
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
 			expect( isEmptyBorder( nonBorder ) ).toBe( true );
 		} );
 
@@ -110,11 +114,15 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'isCompleteBorder', () => {
 		it( 'should determine a undefined, null, and {} to be incomplete', () => {
 			expect( isCompleteBorder( undefined ) ).toBe( false );
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
 			expect( isCompleteBorder( null ) ).toBe( false );
 			expect( isCompleteBorder( {} ) ).toBe( false );
 		} );
 
 		it( 'should determine objects missing border props to be incomplete', () => {
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
 			expect( isCompleteBorder( nonBorder ) ).toBe( false );
 			expect( isCompleteBorder( partialBorder ) ).toBe( false );
 			expect( isCompleteBorder( partialWithExtraProp ) ).toBe( false );
@@ -149,6 +157,8 @@ describe( 'BorderBoxControl Utils', () => {
 		it( 'should determine undefined, non-border or empty object as not being mixed', () => {
 			expect( hasMixedBorders( undefined ) ).toBe( false );
 			expect( hasMixedBorders( {} ) ).toBe( false );
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
 			expect( hasMixedBorders( nonBorder ) ).toBe( false );
 		} );
 
@@ -168,11 +178,15 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'getSplitBorders', () => {
 		it( 'should return undefined when no border provided', () => {
 			expect( getSplitBorders( undefined ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
 			expect( getSplitBorders( null ) ).toEqual( undefined );
 		} );
 
 		it( 'should return undefined when supplied border is empty', () => {
 			expect( getSplitBorders( {} ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
 			expect( getSplitBorders( nonBorder ) ).toEqual( undefined );
 		} );
 
@@ -193,6 +207,8 @@ describe( 'BorderBoxControl Utils', () => {
 		} );
 
 		it( 'should only return differences for border related properties', () => {
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
 			const diff = getBorderDiff( nonBorder, { caffeine: 'coffee' } );
 			expect( diff ).toEqual( {} );
 		} );
@@ -201,6 +217,8 @@ describe( 'BorderBoxControl Utils', () => {
 			const diff = getBorderDiff( completeBorder, {
 				...completeBorder,
 				color: '#21759b',
+				// Checking for extra resilience, even if not a valid type.
+				// @ts-expect-error
 				caffeine: 'cola',
 			} );
 			expect( diff ).toEqual( { color: '#21759b' } );
@@ -298,6 +316,8 @@ describe( 'BorderBoxControl Utils', () => {
 		it( 'should return undefined when no border provided', () => {
 			expect( getShorthandBorderStyle( undefined ) ).toEqual( undefined );
 			expect( getShorthandBorderStyle( {} ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
 			expect( getShorthandBorderStyle( nonBorder ) ).toEqual( undefined );
 		} );
 

package/src/border-box-control/utils.ts

@@ -171,7 +171,7 @@ export const getMostCommonUnit = (
  * Finds the mode value out of the array passed favouring the first value
  * as a tiebreaker.
  *
- * @param  values Values to determine the mode from.
+ * @param values Values to determine the mode from.
  *
  * @return The mode value.
  */