@wordpress/components 19.7.0 → 19.8.0

package/src/unit-control/test/index.js

@@ -220,6 +220,91 @@ describe( 'UnitControl', () => {
 			expect( input.value ).toBe( '50' );
 			expect( state ).toBe( 50 );
 		} );
+
+		it( 'should run onBlur callback when quantity input is blurred', async () => {
+			let state = '33%';
+			const onChangeSpy = jest.fn();
+			const onBlurSpy = jest.fn();
+			const setState = ( nextState ) => {
+				onChangeSpy( nextState );
+				state = nextState;
+			};
+
+			const { user } = render(
+				<>
+					<button>Click me</button>
+					<UnitControl
+						value={ state }
+						onChange={ setState }
+						onBlur={ onBlurSpy }
+					/>
+				</>
+			);
+
+			const input = getInput();
+			await user.clear( input );
+			await user.type( input, '41' );
+
+			await waitFor( () =>
+				expect( onChangeSpy ).toHaveBeenCalledTimes( 3 )
+			);
+			expect( onChangeSpy ).toHaveBeenLastCalledWith( '41%' );
+
+			// Clicking on the button should cause the `onBlur` callback to fire.
+			const button = screen.getByRole( 'button' );
+			await user.click( button );
+
+			await waitFor( () =>
+				expect( onBlurSpy ).toHaveBeenCalledTimes( 1 )
+			);
+		} );
+
+		it( 'should invoke onChange and onUnitChange callbacks when isPressEnterToChange is true and the component is blurred with an uncommitted value', async () => {
+			let state = '15px';
+
+			const onUnitChangeSpy = jest.fn();
+			const onChangeSpy = jest.fn();
+
+			const setState = ( nextState ) => {
+				onChangeSpy( nextState );
+				state = nextState;
+			};
+
+			const { user } = render(
+				<>
+					<button>Click me</button>
+					<UnitControl
+						value={ state }
+						onChange={ setState }
+						onUnitChange={ onUnitChangeSpy }
+						isPressEnterToChange
+					/>
+				</>
+			);
+
+			const input = getInput();
+			await user.clear( input );
+			await user.type( input, '41vh' );
+
+			// This is because `isPressEnterToChange` is `true`
+			expect( onChangeSpy ).not.toHaveBeenCalled();
+
+			// Clicking on the button should cause the `onBlur` callback to fire.
+			const button = screen.getByRole( 'button' );
+			await user.click( button );
+
+			await waitFor( () =>
+				expect( onChangeSpy ).toHaveBeenCalledTimes( 1 )
+			);
+
+			expect( onChangeSpy ).toHaveBeenLastCalledWith( '41vh' );
+
+			expect( onUnitChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onUnitChangeSpy ).toHaveBeenLastCalledWith(
+				'vh',
+				expect.anything()
+			);
+		} );
 	} );
 
 	describe( 'Unit', () => {
@@ -384,6 +469,41 @@ describe( 'UnitControl', () => {
 
 			expect( select ).toHaveValue( 'vmax' );
 		} );
+
+		it( 'should run onBlur callback when the unit select is blurred', async () => {
+			const onUnitChangeSpy = jest.fn();
+			const onBlurSpy = jest.fn();
+
+			const { user } = render(
+				<>
+					<button>Click me</button>
+					<UnitControl
+						value="15px"
+						onUnitChange={ onUnitChangeSpy }
+						onBlur={ onBlurSpy }
+					/>
+				</>
+			);
+
+			const select = getSelect();
+			await user.selectOptions( select, [ 'em' ] );
+
+			await waitFor( () =>
+				expect( onUnitChangeSpy ).toHaveBeenCalledTimes( 1 )
+			);
+			expect( onUnitChangeSpy ).toHaveBeenLastCalledWith(
+				'em',
+				expect.anything()
+			);
+
+			// Clicking on the button should cause the `onBlur` callback to fire.
+			const button = screen.getByRole( 'button' );
+			await user.click( button );
+
+			await waitFor( () =>
+				expect( onBlurSpy ).toHaveBeenCalledTimes( 1 )
+			);
+		} );
 	} );
 
 	describe( 'Unit Parser', () => {

package/src/unit-control/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, SyntheticEvent } from 'react';
+import type { CSSProperties, FocusEventHandler, SyntheticEvent } from 'react';
 
 /**
  * Internal dependencies
@@ -131,4 +131,8 @@ export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
 		 * @default 10
 		 */
 		shiftStep?: number;
+		/**
+		 * Callback when either the quantity or the unit inputs lose focus.
+		 */
+		onBlur?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
 	};

package/src/utils/colors-values.js

@@ -166,8 +166,9 @@ export const UI = {
 	textLight: BASE.black,
 };
 
-export const COLORS = {
-	...BASE,
+// Using Object.assign instead of { ...spread } syntax helps TypeScript
+// to extract the correct type defs here.
+export const COLORS = Object.assign( {}, BASE, {
 	darkGray: merge( {}, DARK_GRAY, G2.darkGray ),
 	darkOpacity: DARK_OPACITY,
 	darkOpacityLight: DARK_OPACITY_LIGHT,
@@ -179,6 +180,6 @@ export const COLORS = {
 	alert: ALERT,
 	admin: ADMIN,
 	ui: UI,
-};
+} );
 
 export default COLORS;

package/src/utils/config-values.js

@@ -26,15 +26,20 @@ const CONTROL_PROPS = {
 	controlHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,
 	controlHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,
 };
+
 const TOGGLE_GROUP_CONTROL_PROPS = {
 	toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
 	toggleGroupControlBorderColor: COLORS.ui.border,
+	toggleGroupControlBackdropBackgroundColor:
+		CONTROL_PROPS.controlSurfaceColor,
+	toggleGroupControlBackdropBorderColor: COLORS.ui.border,
+	toggleGroupControlBackdropBoxShadow: 'transparent',
 	toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,
 };
 
-export default {
-	...CONTROL_PROPS,
-	...TOGGLE_GROUP_CONTROL_PROPS,
+// Using Object.assign to avoid creating circular references when emitting
+// TypeScript type declarations.
+export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	colorDivider: 'rgba(0, 0, 0, 0.1)',
 	colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
 	colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
@@ -79,4 +84,4 @@ export default {
 	transitionDurationFastest: '100ms',
 	transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',
 	transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)',
-};
+} );

package/tsconfig.json

@@ -26,9 +26,12 @@
 		"src/animate/**/*",
 		"src/base-control/**/*",
 		"src/base-field/**/*",
+		"src/border-box-control/**/*",
+		"src/border-control/**/*",
 		"src/button/**/*",
 		"src/card/**/*",
 		"src/circular-option-picker/**/*",
+		"src/color-indicator/**/*",
 		"src/color-palette/**/*",
 		"src/color-picker/**/*",
 		"src/confirm-dialog/**/*",