@wordpress/components 19.9.0 → 19.10.0

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

@@ -7,21 +7,28 @@ import {
 	getValidParsedQuantityAndUnit,
 	getUnitsWithCurrentUnit,
 } from '../utils';
+import type { WPUnitControlUnit } from '../types';
 
 describe( 'UnitControl utils', () => {
 	describe( 'useCustomUnits', () => {
 		it( 'should return filtered css units', () => {
-			const cssUnits = [ { value: 'px' }, { value: '%' } ];
+			const cssUnits = [
+				{ value: 'px', label: 'pixel' },
+				{ value: '%', label: 'percent' },
+			];
 			const units = useCustomUnits( {
 				availableUnits: [ 'em', 'px' ],
 				units: cssUnits,
 			} );
 
-			expect( units ).toEqual( [ { value: 'px' } ] );
+			expect( units ).toEqual( [ { value: 'px', label: 'pixel' } ] );
 		} );
 
 		it( 'should add default values to available units', () => {
-			const cssUnits = [ { value: 'px' }, { value: '%' } ];
+			const cssUnits = [
+				{ value: 'px', label: 'pixel' },
+				{ value: '%', label: 'percent' },
+			];
 			const units = useCustomUnits( {
 				availableUnits: [ '%', 'px' ],
 				defaultValues: { '%': 10, px: 10 },
@@ -29,8 +36,8 @@ describe( 'UnitControl utils', () => {
 			} );
 
 			expect( units ).toEqual( [
-				{ value: 'px', default: 10 },
-				{ value: '%', default: 10 },
+				{ value: 'px', label: 'pixel', default: 10 },
+				{ value: '%', label: 'percent', default: 10 },
 			] );
 		} );
 
@@ -38,24 +45,32 @@ describe( 'UnitControl utils', () => {
 			// Although the public APIs of the component expect a `number` as the type of the
 			// default values, it's still good to test for strings (as it can happen in un-typed
 			// environments)
-			const cssUnits = [ { value: 'px' }, { value: '%' } ];
+			const cssUnits = [
+				{ value: 'px', label: 'pixel' },
+				{ value: '%', label: 'percent' },
+			];
 			const units = useCustomUnits( {
 				availableUnits: [ '%', 'px' ],
 				defaultValues: {
+					// @ts-expect-error (passing a string instead of a number is the point of the test)
 					'%': '14',
+					// @ts-expect-error (passing a string instead of a number is the point of the test)
 					px: 'not a valid numeric quantity',
 				},
 				units: cssUnits,
 			} );
 
 			expect( units ).toEqual( [
-				{ value: 'px', default: undefined },
-				{ value: '%', default: 14 },
+				{ value: 'px', label: 'pixel', default: undefined },
+				{ value: '%', label: 'percent', default: 14 },
 			] );
 		} );
 
 		it( 'should return an empty array where availableUnits match no preferred css units', () => {
-			const cssUnits = [ { value: 'em' }, { value: 'vh' } ];
+			const cssUnits = [
+				{ value: 'em', label: 'em' },
+				{ value: 'vh', label: 'vh' },
+			];
 			const units = useCustomUnits( {
 				availableUnits: [ '%', 'px' ],
 				defaultValues: { '%': 10, px: 10 },
@@ -69,16 +84,19 @@ describe( 'UnitControl utils', () => {
 	describe( 'filterUnitsWithSettings', () => {
 		it( 'should return filtered units array', () => {
 			const preferredUnits = [ '%', 'px' ];
-			const availableUnits = [ { value: 'px' }, { value: 'em' } ];
+			const availableUnits = [
+				{ value: 'px', label: 'pixel' },
+				{ value: 'em', label: 'em' },
+			];
 
 			expect(
 				filterUnitsWithSettings( preferredUnits, availableUnits )
-			).toEqual( [ { value: 'px' } ] );
+			).toEqual( [ { value: 'px', label: 'pixel' } ] );
 		} );
 
 		it( 'should return empty array where preferred units match no available css unit', () => {
 			const preferredUnits = [ '%', 'px' ];
-			const availableUnits = [ { value: 'em' } ];
+			const availableUnits = [ { value: 'em', label: 'em' } ];
 
 			expect(
 				filterUnitsWithSettings( preferredUnits, availableUnits )
@@ -92,13 +110,14 @@ describe( 'UnitControl utils', () => {
 			const availableUnits = false;
 
 			expect(
+				// @ts-expect-error (passing `false` instead of a valid array of units is the point of the test)
 				filterUnitsWithSettings( preferredUnits, availableUnits )
 			).toEqual( [] );
 		} );
 
 		it( 'should return empty array where available units is set to an empty array', () => {
 			const preferredUnits = [ '%', 'px' ];
-			const availableUnits = [];
+			const availableUnits: WPUnitControlUnit[] = [];
 
 			expect(
 				filterUnitsWithSettings( preferredUnits, availableUnits )
@@ -127,7 +146,7 @@ describe( 'UnitControl utils', () => {
 
 		it( 'should return fallback value', () => {
 			const nextValue = 'thirteen';
-			const preferredUnits = [ { value: 'em' } ];
+			const preferredUnits = [ { value: 'em', label: 'em' } ];
 			const fallbackValue = 13;
 
 			expect(
@@ -155,7 +174,7 @@ describe( 'UnitControl utils', () => {
 
 		it( 'should return first unit in preferred units collection as second fallback unit', () => {
 			const nextValue = 101;
-			const preferredUnits = [ { value: 'px' } ];
+			const preferredUnits = [ { value: 'px', label: 'pixel' } ];
 
 			expect(
 				getValidParsedQuantityAndUnit( nextValue, preferredUnits )
@@ -185,8 +204,8 @@ describe( 'UnitControl utils', () => {
 			expect( result ).toHaveLength( 3 );
 
 			const currentUnit = result.shift();
-			expect( currentUnit.value ).toBe( '%' );
-			expect( currentUnit.label ).toBe( '%' );
+			expect( currentUnit?.value ).toBe( '%' );
+			expect( currentUnit?.label ).toBe( '%' );
 			expect( result ).toEqual( limitedUnits );
 		} );
 
@@ -196,8 +215,8 @@ describe( 'UnitControl utils', () => {
 			expect( result ).toHaveLength( 3 );
 
 			const currentUnit = result.shift();
-			expect( currentUnit.value ).toBe( '%' );
-			expect( currentUnit.label ).toBe( '%' );
+			expect( currentUnit?.value ).toBe( '%' );
+			expect( currentUnit?.label ).toBe( '%' );
 			expect( result ).toEqual( limitedUnits );
 		} );
 

package/src/unit-control/types.ts

@@ -74,7 +74,10 @@ export type UnitSelectControlProps = {
 
 // TODO: when available, should (partially) extend `NumberControl` props.
 export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
-	Pick< InputControlProps, 'hideLabelFromVision' > & {
+	Pick<
+		InputControlProps,
+		'hideLabelFromVision' | '__next36pxDefaultSize'
+	> & {
 		__unstableStateReducer?: StateReducer;
 		__unstableInputWidth?: CSSProperties[ 'width' ];
 		/**

package/src/unit-control/utils.ts

@@ -155,7 +155,9 @@ export function getParsedQuantityAndUnit(
  * @param  units List of units.
  * @return Whether the list actually contains any units.
  */
-export function hasUnits( units?: WPUnitControlUnit[] ): boolean {
+export function hasUnits(
+	units?: WPUnitControlUnit[]
+): units is WPUnitControlUnit[] {
 	// Although the `isArray` check shouldn't be necessary (given the signature of
 	// this typed function), it's better to stay on the side of caution, since
 	// this function may be called from un-typed environments.
@@ -218,7 +220,7 @@ export function parseQuantityAndUnitFromRawValue(
  */
 export function getValidParsedQuantityAndUnit(
 	rawValue: string | number,
-	allowedUnits: WPUnitControlUnit[],
+	allowedUnits?: WPUnitControlUnit[],
 	fallbackQuantity?: number,
 	fallbackUnit?: string
 ): [ number | undefined, string | undefined ] {
@@ -295,7 +297,7 @@ export const useCustomUnits = ( {
 }: {
 	units?: WPUnitControlUnit[];
 	availableUnits?: string[];
-	defaultValues: Record< string, number >;
+	defaultValues?: Record< string, number >;
 } ): WPUnitControlUnit[] => {
 	const customUnitsToReturn = filterUnitsWithSettings(
 		availableUnits,

package/tsconfig.json

@@ -8,7 +8,7 @@
 			"gutenberg-test-env",
 			"jest",
 			"@testing-library/jest-dom",
-			"snapshot-diff",
+			"snapshot-diff"
 		],
 		// Some errors in Reakit types with TypeScript 4.3
 		// Remove the following line when they've been addressed.
@@ -77,6 +77,7 @@
 		"src/spinner/**/*",
 		"src/surface/**/*",
 		"src/text/**/*",
+		"src/text-control/**/*",
 		"src/tip/**/*",
 		"src/toggle-group-control/**/*",
 		"src/tools-panel/**/*",