@wordpress/components 23.3.1 → 23.4.0

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

package/src/box-control/README.md

@@ -30,82 +30,73 @@ const Example = () => {
 ```
 
 ## Props
-### allowReset
+### `allowReset`: `boolean`
 
 If this property is true, a button to reset the box control is rendered.
 
-- Type: `Boolean`
 - Required: No
 - Default: `true`
 
-### splitOnAxis
+### `splitOnAxis`: `boolean`
 
 If this property is true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides.
 
-- Type: `Boolean`
 - Required: No
 - Default: `false`
 
-### inputProps
+### `inputProps`: `object`
 
-Props for the internal [InputControl](../input-control) components.
+Props for the internal [UnitControl](../unit-control) components.
 
--   Type: `Object`
 -   Required: No
+-   Default: `{ min: 0 }`
 
-### label
+### `label`: `string`
 
-Heading label for BoxControl.
+Heading label for the control.
 
--   Type: `String`
 -   Required: No
--   Default: `Box Control`
+-   Default: `__( 'Box Control' )`
 
-### onChange
+### `onChange`: `(next: BoxControlValue) => void`
 
 A callback function when an input value changes.
 
--   Type: `Function`
 -   Required: Yes
 
-### resetValues
+### `resetValues`: `object`
 
 The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
 
--   Type: `Object`
 -   Required: No
+-   Default: `{ top: undefined, right: undefined, bottom: undefined, left: undefined }`
 
-### sides
+### `sides`: `string[]`
 
-Collection of sides to allow control of. If omitted or empty, all sides will be available.
+Collection of sides to allow control of. If omitted or empty, all sides will be available. Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
 
--   Type: `Array<Object>`
 -   Required: No
 
-### units
+### `units`: `WPUnitControlUnit[]`
 
 Collection of available units which are compatible with [UnitControl](../unit-control).
 
--   Type: `Array<Object>`
 -   Required: No
 
-### values
+### `values`: `object`
 
 The `top`, `right`, `bottom`, and `left` box dimension values.
 
--   Type: `Object`
 -   Required: No
 
-### onMouseOver
+### `onMouseOver`: `function`
 
 A handler for onMouseOver events.
 
--   Type: `Function`
 -   Required: No
 
-### onMouseOut
+### `onMouseOut`: `function`
 
 A handler for onMouseOut events.
 
--   Type: `Function`
 -   Required: No

package/src/box-control/{all-input-control.js → all-input-control.tsx}

@@ -1,6 +1,8 @@
 /**
  * Internal dependencies
  */
+import type { UnitControlProps } from '../unit-control/types';
+import type { BoxControlInputControlProps } from './types';
 import UnitControl from './unit-control';
 import {
 	LABELS,
@@ -22,18 +24,20 @@ export default function AllInputControl( {
 	selectedUnits,
 	setSelectedUnits,
 	...props
-} ) {
+}: BoxControlInputControlProps ) {
 	const allValue = getAllValue( values, selectedUnits, sides );
 	const hasValues = isValuesDefined( values );
 	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
-	const allPlaceholder = isMixed ? LABELS.mixed : null;
+	const allPlaceholder = isMixed ? LABELS.mixed : undefined;
 
-	const handleOnFocus = ( event ) => {
+	const handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (
+		event
+	) => {
 		onFocus( event, { side: 'all' } );
 	};
 
-	const handleOnChange = ( next ) => {
-		const isNumeric = ! isNaN( parseFloat( next ) );
+	const handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => {
+		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : undefined;
 		const nextValues = applyValueToSides( values, nextValue, sides );
 
@@ -42,7 +46,7 @@ export default function AllInputControl( {
 
 	// Set selected unit so it can be used as fallback by unlinked controls
 	// when individual sides do not have a value containing a unit.
-	const handleOnUnitChange = ( unit ) => {
+	const handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {
 		const newUnits = applyValueToSides( selectedUnits, unit, sides );
 		setSelectedUnits( newUnits );
 	};

package/src/box-control/{axial-input-controls.js → axial-input-controls.tsx}

@@ -5,8 +5,10 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import UnitControl from './unit-control';
 import { LABELS } from './utils';
 import { Layout } from './styles/box-control-styles';
+import type { BoxControlInputControlProps } from './types';
 
-const groupedSides = [ 'vertical', 'horizontal' ];
+const groupedSides = [ 'vertical', 'horizontal' ] as const;
+type GroupedSide = typeof groupedSides[ number ];
 
 export default function AxialInputControls( {
 	onChange,
@@ -18,15 +20,17 @@ export default function AxialInputControls( {
 	setSelectedUnits,
 	sides,
 	...props
-} ) {
-	const createHandleOnFocus = ( side ) => ( event ) => {
-		if ( ! onFocus ) {
-			return;
-		}
-		onFocus( event, { side } );
-	};
+}: BoxControlInputControlProps ) {
+	const createHandleOnFocus =
+		( side: GroupedSide ) =>
+		( event: React.FocusEvent< HTMLInputElement > ) => {
+			if ( ! onFocus ) {
+				return;
+			}
+			onFocus( event, { side } );
+		};
 
-	const createHandleOnHoverOn = ( side ) => () => {
+	const createHandleOnHoverOn = ( side: GroupedSide ) => () => {
 		if ( ! onHoverOn ) {
 			return;
 		}
@@ -44,7 +48,7 @@ export default function AxialInputControls( {
 		}
 	};
 
-	const createHandleOnHoverOff = ( side ) => () => {
+	const createHandleOnHoverOff = ( side: GroupedSide ) => () => {
 		if ( ! onHoverOff ) {
 			return;
 		}
@@ -62,12 +66,12 @@ export default function AxialInputControls( {
 		}
 	};
 
-	const createHandleOnChange = ( side ) => ( next ) => {
+	const createHandleOnChange = ( side: GroupedSide ) => ( next?: string ) => {
 		if ( ! onChange ) {
 			return;
 		}
 		const nextValues = { ...values };
-		const isNumeric = ! isNaN( parseFloat( next ) );
+		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : undefined;
 
 		if ( side === 'vertical' ) {
@@ -83,21 +87,22 @@ export default function AxialInputControls( {
 		onChange( nextValues );
 	};
 
-	const createHandleOnUnitChange = ( side ) => ( next ) => {
-		const newUnits = { ...selectedUnits };
+	const createHandleOnUnitChange =
+		( side: GroupedSide ) => ( next?: string ) => {
+			const newUnits = { ...selectedUnits };
 
-		if ( side === 'vertical' ) {
-			newUnits.top = next;
-			newUnits.bottom = next;
-		}
+			if ( side === 'vertical' ) {
+				newUnits.top = next;
+				newUnits.bottom = next;
+			}
 
-		if ( side === 'horizontal' ) {
-			newUnits.left = next;
-			newUnits.right = next;
-		}
+			if ( side === 'horizontal' ) {
+				newUnits.left = next;
+				newUnits.right = next;
+			}
 
-		setSelectedUnits( newUnits );
-	};
+			setSelectedUnits( newUnits );
+		};
 
 	// Filter sides if custom configuration provided, maintaining default order.
 	const filteredSides = sides?.length