@wordpress/components 21.0.2 → 21.1.0

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

@@ -47,6 +47,10 @@ function UnitControl( {
 		if ( pickerRef?.current ) {
 			pickerRef.current.presentPicker();
 		}
+		// Disable reason: this should be fixed by the native team.
+		// It would be great if this could be done in the context of
+		// https://github.com/WordPress/gutenberg/pull/39218
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ pickerRef?.current ] );
 
 	const currentInputValue = currentInput === null ? value : currentInput;
@@ -102,6 +106,10 @@ function UnitControl( {
 			anchorNodeRef?.current
 				? findNodeHandle( anchorNodeRef?.current )
 				: undefined,
+		// Disable reason: this should be fixed by the native team.
+		// It would be great if this could be done in the context of
+		// https://github.com/WordPress/gutenberg/pull/39218
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ anchorNodeRef?.current ]
 	);
 

package/src/unit-control/index.tsx

@@ -100,7 +100,7 @@ function UnforwardedUnitControl(
 		if ( parsedUnit !== undefined ) {
 			setUnit( parsedUnit );
 		}
-	}, [ parsedUnit ] );
+	}, [ parsedUnit, setUnit ] );
 
 	// Stores parsed value for hand-off in state reducer.
 	const refParsedQuantity = useRef< number | undefined >( undefined );
@@ -265,7 +265,7 @@ function UnforwardedUnitControl(
 				autoComplete={ autoComplete }
 				className={ classes }
 				disabled={ disabled }
-				disableUnits={ disableUnits }
+				hideHTMLArrows
 				isPressEnterToChange={ isPressEnterToChange }
 				label={ label }
 				onBlur={ handleOnBlur }

package/src/unit-control/styles/unit-control-styles.ts

@@ -18,10 +18,6 @@ type SelectProps = {
 	selectSize: SelectSize;
 };
 
-type InputProps = {
-	disableUnits?: boolean;
-};
-
 export const Root = styled.div`
 	box-sizing: border-box;
 	position: relative;
@@ -32,30 +28,14 @@ export const Root = styled.div`
 	}
 `;
 
-const arrowStyles = ( { disableUnits }: InputProps ) => {
-	if ( disableUnits ) return '';
-
-	return css`
-		&::-webkit-outer-spin-button,
-		&::-webkit-inner-spin-button {
-			-webkit-appearance: none;
-			margin: 0;
-		}
-	`;
-};
-
 // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
 
 export const ValueInput = styled( NumberControl )`
 	&&& {
 		input {
-			appearance: none;
-			-moz-appearance: textfield;
 			display: block;
 			width: 100%;
-
-			${ arrowStyles };
 		}
 	}
 `;

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

@@ -111,9 +111,12 @@ describe( 'UnitControl', () => {
 				<UnitControl className="hello" />
 			);
 
-			expect( withoutClassName.firstChild ).toMatchDiffSnapshot(
-				withClassName.firstChild
-			);
+			expect(
+				withoutClassName.querySelector( '.components-unit-control' )
+			).not.toHaveClass( 'hello' );
+			expect(
+				withClassName.querySelector( '.components-unit-control' )
+			).toHaveClass( 'hello' );
 		} );
 
 		it( 'should not render select, if units are disabled', () => {

package/src/utils/hooks/use-controlled-state.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -70,11 +70,14 @@ function useControlledState( currentState, options = defaultOptions ) {
 
 	/* eslint-disable jsdoc/no-undefined-types */
 	/** @type {(nextState: T) => void} */
-	const setState = ( nextState ) => {
-		if ( ! hasCurrentState ) {
-			setInternalState( nextState );
-		}
-	};
+	const setState = useCallback(
+		( nextState ) => {
+			if ( ! hasCurrentState ) {
+				setInternalState( nextState );
+			}
+		},
+		[ hasCurrentState ]
+	);
 	/* eslint-enable jsdoc/no-undefined-types */
 
 	return [ state, setState ];