@wordpress/components 29.5.1 → 29.7.0

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

@@ -40,8 +40,21 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should render custom className', () => {
-			render( <NumberControl className="hello" /> );
-			expect( screen.getByRole( 'spinbutton' ) ).toBeVisible();
+			const { container: withoutClassName } = render( <NumberControl /> );
+
+			const { container: withClassName } = render(
+				<NumberControl className="hello" />
+			);
+
+			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+				withoutClassName.querySelector( '.components-number-control' )
+			).not.toHaveClass( 'hello' );
+
+			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+				withClassName.querySelector( '.components-number-control' )
+			).toHaveClass( 'hello' );
 		} );
 	} );
 

package/src/range-control/index.tsx

@@ -391,17 +391,18 @@ function UnforwardedRangeControl(
  * import { useState } from '@wordpress/element';
  *
  * const MyRangeControl = () => {
- *   const [ isChecked, setChecked ] = useState( true );
+ *   const [ value, setValue ] = useState();
  *   return (
  *     <RangeControl
  *       __nextHasNoMarginBottom
  *       __next40pxDefaultSize
  *       help="Please select how transparent you would like this."
- *       initialPosition={50}
+ *       initialPosition={ 50 }
  *       label="Opacity"
- *       max={100}
- *       min={0}
- *       onChange={() => {}}
+ *       max={ 100 }
+ *       min={ 0 }
+ *       value={ value }
+ *       onChange={ setValue }
  *     />
  *   );
  * };

package/src/toolbar/toolbar-dropdown-menu/index.tsx

@@ -16,7 +16,7 @@ import ToolbarContext from '../toolbar-context';
 import DropdownMenu from '../../dropdown-menu';
 import type { DropdownMenuProps } from '../../dropdown-menu/types';
 
-function ToolbarDropdownMenu(
+function UnforwardedToolbarDropdownMenu(
 	props: DropdownMenuProps,
 	ref: ForwardedRef< any >
 ) {
@@ -44,4 +44,5 @@ function ToolbarDropdownMenu(
 	);
 }
 
-export default forwardRef( ToolbarDropdownMenu );
+export const ToolbarDropdownMenu = forwardRef( UnforwardedToolbarDropdownMenu );
+export default ToolbarDropdownMenu;

package/src/toolbar/toolbar-item/index.tsx

@@ -16,7 +16,7 @@ import warning from '@wordpress/warning';
 import ToolbarContext from '../toolbar-context';
 import type { ToolbarItemProps } from './types';
 
-function ToolbarItem(
+function UnforwardedToolbarItem(
 	{ children, as: Component, ...props }: ToolbarItemProps,
 	ref: ForwardedRef< any >
 ) {
@@ -57,4 +57,5 @@ function ToolbarItem(
 	);
 }
 
-export default forwardRef( ToolbarItem );
+export const ToolbarItem = forwardRef( UnforwardedToolbarItem );
+export default ToolbarItem;

package/src/utils/get-node-text.ts

@@ -0,0 +1,24 @@
+const getNodeText = ( node: React.ReactNode ): string => {
+	if ( node === null ) {
+		return '';
+	}
+
+	switch ( typeof node ) {
+		case 'string':
+		case 'number':
+			return node.toString();
+		case 'object': {
+			if ( node instanceof Array ) {
+				return node.map( getNodeText ).join( '' );
+			}
+			if ( 'props' in node ) {
+				return getNodeText( node.props.children );
+			}
+			return '';
+		}
+		default:
+			return '';
+	}
+};
+
+export default getNodeText;

package/src/utils/math.js

@@ -59,9 +59,9 @@ function getPrecision( value ) {
 /**
  * Clamps a value based on a min/max range.
  *
- * @param {number} value The value.
- * @param {number} min   The minimum range.
- * @param {number} max   The maximum range.
+ * @param {number|string} value The value.
+ * @param {number}        min   The minimum range.
+ * @param {number}        max   The maximum range.
  *
  * @return {number} The clamped value.
  */
@@ -71,28 +71,23 @@ export function clamp( value, min, max ) {
 }
 
 /**
- * Clamps a value based on a min/max range with rounding
+ * Rounds a value to the nearest step offset by a minimum.
  *
- * @param {number | string} value The value.
- * @param {number}          min   The minimum range.
- * @param {number}          max   The maximum range.
- * @param {number}          step  A multiplier for the value.
+ * @param {number|string} value The value.
+ * @param {number}        min   The minimum range.
+ * @param {number}        step  The increment for the value.
  *
- * @return {number} The rounded and clamped value.
+ * @return {number} The value as a valid step.
  */
-export function roundClamp(
-	value = 0,
-	min = Infinity,
-	max = Infinity,
-	step = 1
-) {
+export function ensureValidStep( value, min, step ) {
 	const baseValue = getNumber( value );
 	const stepValue = getNumber( step );
-	const precision = getPrecision( step );
-	const rounded = Math.round( baseValue / stepValue ) * stepValue;
-	const clampedValue = clamp( rounded, min, max );
-
-	return precision
-		? getNumber( clampedValue.toFixed( precision ) )
-		: clampedValue;
+	const precision = Math.max( getPrecision( step ), getPrecision( min ) );
+	const realMin = Math.abs( min ) === Infinity ? 0 : min;
+	// If the step is not a factor of the minimum then the step must be
+	// offset by the minimum.
+	const tare = realMin % stepValue ? realMin : 0;
+	const rounded = Math.round( ( baseValue - tare ) / stepValue ) * stepValue;
+	const fromMin = rounded + tare;
+	return precision ? getNumber( fromMin.toFixed( precision ) ) : fromMin;
 }

package/src/utils/test/get-node-text.js

@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import getNodeText from '../get-node-text';
+
+describe( 'getNodeText', () => {
+	it( 'should return an empty string for null', () => {
+		expect( getNodeText( null ) ).toBe( '' );
+	} );
+
+	it( 'should return the string representation of a string node', () => {
+		expect( getNodeText( 'Hello' ) ).toBe( 'Hello' );
+	} );
+
+	it( 'should return the string representation of a number node', () => {
+		expect( getNodeText( 123 ) ).toBe( '123' );
+	} );
+
+	it( 'should return an empty string for a boolean node', () => {
+		expect( getNodeText( true ) ).toBe( '' );
+	} );
+
+	it( 'should concatenate text from an array of nodes', () => {
+		expect( getNodeText( [ 'Hello', ' ', 'World' ] ) ).toBe(
+			'Hello World'
+		);
+	} );
+
+	it( 'should return text from a React element with children', () => {
+		const element = (
+			<div>
+				Hello <span>World</span>
+			</div>
+		);
+		expect( getNodeText( element ) ).toBe( 'Hello World' );
+	} );
+} );

package/src/utils/test/math.js

@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import { add, clamp, subtract, roundClamp } from '../math';
+
+import { add, subtract, clamp, ensureValidStep } from '../math';
 
 describe( 'add', () => {
 	it( 'should add string and number values', () => {
@@ -58,44 +59,39 @@ describe( 'clamp', () => {
 	} );
 } );
 
-describe( 'roundClamp', () => {
-	it( 'should clamp a value between min and max', () => {
-		expect( roundClamp( 10, 1, 10 ) ).toBe( 10 );
-		expect( roundClamp( 1, 1, 10 ) ).toBe( 1 );
-		expect( roundClamp( 0, 1, 10 ) ).toBe( 1 );
+describe( 'ensureValidStep', () => {
+	it( 'should work with number or string values', () => {
+		expect( ensureValidStep( '49', 0, 10 ) ).toBe( 50 );
+		expect( ensureValidStep( 49, '0', 10 ) ).toBe( 50 );
+		expect( ensureValidStep( 49, 0, '10' ) ).toBe( 50 );
+	} );
 
-		expect( roundClamp( 50, 1, 10 ) ).toBe( 10 );
-		expect( roundClamp( 50, -10, 10 ) ).toBe( 10 );
-		expect( roundClamp( -50, -10, 10 ) ).toBe( -10 );
+	it( 'should round to step', () => {
+		expect( ensureValidStep( 40, 0, 10 ) ).toBe( 40 );
+		expect( ensureValidStep( 42, 0, 10 ) ).toBe( 40 );
+		expect( ensureValidStep( 45, 0, 10 ) ).toBe( 50 );
+		expect( ensureValidStep( 49, 0, 10 ) ).toBe( 50 );
 
-		expect( roundClamp( '50', 1, 10 ) ).toBe( 10 );
-		expect( roundClamp( '50', -10, 10 ) ).toBe( 10 );
-		expect( roundClamp( -50, -10, '10' ) ).toBe( -10 );
+		expect( ensureValidStep( 50, 0, 15 ) ).toBe( 45 );
+		expect( ensureValidStep( 50, 0, 11 ) ).toBe( 55 );
 	} );
 
-	it( 'should clamp number or string values', () => {
-		expect( roundClamp( '50', 1, 10 ) ).toBe( 10 );
-		expect( roundClamp( '50', -10, 10 ) ).toBe( 10 );
-		expect( roundClamp( -50, -10, '10' ) ).toBe( -10 );
+	it( 'should round with float in step', () => {
+		expect( ensureValidStep( 40.5, 1, 0.1 ) ).toBe( 40.5 );
+		expect( ensureValidStep( 40.05, 1, 0.01 ) ).toBe( 40.05 );
+		expect( ensureValidStep( 40.06, 1, 0.1 ) ).toBe( 40.1 );
+		expect( ensureValidStep( 40.123005, 1, 0.001 ) ).toBe( 40.123 );
 	} );
 
-	it( 'should clamp with step', () => {
-		expect( roundClamp( 40, 1, 100, 10 ) ).toBe( 40 );
-		expect( roundClamp( 42, 1, 100, 10 ) ).toBe( 40 );
-		expect( roundClamp( 45, 1, 100, 10 ) ).toBe( 50 );
-		expect( roundClamp( 49, 1, 100, 10 ) ).toBe( 50 );
-		expect( roundClamp( 50, 1, 100, 10 ) ).toBe( 50 );
-
-		expect( roundClamp( 50, 1, 100, 15 ) ).toBe( 45 );
-		expect( roundClamp( 50, 1, 100, '15' ) ).toBe( 45 );
-		expect( roundClamp( 50, 1, 100, 11 ) ).toBe( 55 );
+	it( 'should round to steps starting from min', () => {
+		expect( ensureValidStep( 10, 0.25, 1 ) ).toBe( 10.25 );
+		expect( ensureValidStep( 10, -20.25, 1 ) ).toBe( 9.75 );
+		expect( ensureValidStep( 10.5, 0.05, 0.1 ) ).toBe( 10.45 );
+		expect( ensureValidStep( 10.51, 0.05, 0.1 ) ).toBe( 10.55 );
 	} );
 
-	it( 'should clamp with float in step', () => {
-		expect( roundClamp( 40, 1, 100, 1 ) ).toBe( 40 );
-		expect( roundClamp( 40.5, 1, 100, 0.1 ) ).toBe( 40.5 );
-		expect( roundClamp( 40.05, 1, 100, 0.01 ) ).toBe( 40.05 );
-		expect( roundClamp( 40.06, 1, 100, 0.1 ) ).toBe( 40.1 );
-		expect( roundClamp( 40.123005, 1, 100, 0.001 ) ).toBe( 40.123 );
+	it( 'should round with a precision that’s the greater of min and step', () => {
+		expect( ensureValidStep( 10.061, 0.01, 0.1 ) ).toBe( 10.11 );
+		expect( ensureValidStep( 10.105, 0.1, 0.01 ) ).toBe( 10.11 );
 	} );
 } );

package/src/utils/theme-variables.scss

@@ -4,10 +4,6 @@
 // `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
 // defined, fallback to the default theme color (WP blueberry).
 $components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-
-// Define accent color transparent variants.
-$components-color-accent-transparent-40: rgba(var(--wp-components-color-accent--rgb, var(--wp-admin-theme-color--rgb)), 0.04);
-
 $components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 $components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));