@wordpress/components 23.5.0 → 23.7.0

package/src/custom-gradient-picker/gradient-bar/{control-points.js → control-points.tsx}

@@ -34,8 +34,21 @@ import {
 	MINIMUM_SIGNIFICANT_MOVE,
 	KEYBOARD_CONTROL_POINT_VARIATION,
 } from './constants';
+import type { WordPressComponentProps } from '../../ui/context';
+import type {
+	ControlPointButtonProps,
+	ControlPointMoveState,
+	ControlPointsProps,
+	InsertPointProps,
+} from '../types';
+import type { CustomColorPickerDropdownProps } from '../../color-palette/types';
 
-function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
+function ControlPointButton( {
+	isOpen,
+	position,
+	color,
+	...additionalProps
+}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {
 	const instanceId = useInstanceId( ControlPointButton );
 	const descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;
 	return (
@@ -73,13 +86,14 @@ function GradientColorPickerDropdown( {
 	isRenderedInSidebar,
 	className,
 	...props
-} ) {
+}: CustomColorPickerDropdownProps ) {
 	// Open the popover below the gradient control/insertion point
 	const popoverProps = useMemo(
-		() => ( {
-			placement: 'bottom',
-			offset: 8,
-		} ),
+		() =>
+			( {
+				placement: 'bottom',
+				offset: 8,
+			} as const ),
 		[]
 	);
 
@@ -108,16 +122,25 @@ function ControlPoints( {
 	onStartControlPointChange,
 	onStopControlPointChange,
 	__experimentalIsRenderedInSidebar,
-} ) {
-	const controlPointMoveState = useRef();
+}: ControlPointsProps ) {
+	const controlPointMoveState = useRef< ControlPointMoveState >();
+
+	const onMouseMove = ( event: MouseEvent ) => {
+		if (
+			controlPointMoveState.current === undefined ||
+			gradientPickerDomRef.current === null
+		) {
+			return;
+		}
 
-	const onMouseMove = ( event ) => {
 		const relativePosition = getHorizontalRelativeGradientPosition(
 			event.clientX,
 			gradientPickerDomRef.current
 		);
+
 		const { initialPosition, index, significantMoveHappened } =
 			controlPointMoveState.current;
+
 		if (
 			! significantMoveHappened &&
 			Math.abs( initialPosition - relativePosition ) >=
@@ -148,142 +171,158 @@ function ControlPoints( {
 	// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`
 	// This memoization would prevent the event listeners from being properly cleaned.
 	// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.
-	const cleanEventListenersRef = useRef();
+	const cleanEventListenersRef = useRef< () => void >();
 	cleanEventListenersRef.current = cleanEventListeners;
 
 	useEffect( () => {
 		return () => {
-			cleanEventListenersRef.current();
+			cleanEventListenersRef.current?.();
 		};
 	}, [] );
 
-	return controlPoints.map( ( point, index ) => {
-		const initialPosition = point?.position;
-		return (
-			ignoreMarkerPosition !== initialPosition && (
-				<GradientColorPickerDropdown
-					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
-					key={ index }
-					onClose={ onStopControlPointChange }
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<ControlPointButton
+	return (
+		<>
+			{ controlPoints.map( ( point, index ) => {
+				const initialPosition = point?.position;
+				return (
+					ignoreMarkerPosition !== initialPosition && (
+						<GradientColorPickerDropdown
+							isRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
 							key={ index }
-							onClick={ () => {
-								if (
-									controlPointMoveState.current &&
-									controlPointMoveState.current
-										.significantMoveHappened
-								) {
-									return;
-								}
-								if ( isOpen ) {
-									onStopControlPointChange();
-								} else {
-									onStartControlPointChange();
-								}
-								onToggle();
-							} }
-							onMouseDown={ () => {
-								if ( window && window.addEventListener ) {
-									controlPointMoveState.current = {
-										initialPosition,
-										index,
-										significantMoveHappened: false,
-										listenersActivated: true,
-									};
-									onStartControlPointChange();
-									window.addEventListener(
-										'mousemove',
-										onMouseMove
-									);
-									window.addEventListener(
-										'mouseup',
-										cleanEventListeners
-									);
-								}
-							} }
-							onKeyDown={ ( event ) => {
-								if ( event.code === 'ArrowLeft' ) {
-									// Stop propagation of the key press event to avoid focus moving
-									// to another editor area.
-									event.stopPropagation();
-									onChange(
-										updateControlPointPosition(
-											controlPoints,
-											index,
-											clampPercent(
-												point.position -
-													KEYBOARD_CONTROL_POINT_VARIATION
-											)
-										)
-									);
-								} else if ( event.code === 'ArrowRight' ) {
-									// Stop propagation of the key press event to avoid focus moving
-									// to another editor area.
-									event.stopPropagation();
-									onChange(
-										updateControlPointPosition(
-											controlPoints,
-											index,
-											clampPercent(
-												point.position +
-													KEYBOARD_CONTROL_POINT_VARIATION
-											)
-										)
-									);
-								}
-							} }
-							isOpen={ isOpen }
-							position={ point.position }
-							color={ point.color }
-						/>
-					) }
-					renderContent={ ( { onClose } ) => (
-						<>
-							<ColorPicker
-								enableAlpha={ ! disableAlpha }
-								color={ point.color }
-								onChange={ ( color ) => {
-									onChange(
-										updateControlPointColor(
-											controlPoints,
-											index,
-											colord( color ).toRgbString()
-										)
-									);
-								} }
-							/>
-							{ ! disableRemove && controlPoints.length > 2 && (
-								<HStack
-									className="components-custom-gradient-picker__remove-control-point-wrapper"
-									alignment="center"
-								>
-									<Button
-										onClick={ () => {
+							onClose={ onStopControlPointChange }
+							renderToggle={ ( { isOpen, onToggle } ) => (
+								<ControlPointButton
+									key={ index }
+									onClick={ () => {
+										if (
+											controlPointMoveState.current &&
+											controlPointMoveState.current
+												.significantMoveHappened
+										) {
+											return;
+										}
+										if ( isOpen ) {
+											onStopControlPointChange();
+										} else {
+											onStartControlPointChange();
+										}
+										onToggle();
+									} }
+									onMouseDown={ () => {
+										if (
+											window &&
+											window.addEventListener
+										) {
+											controlPointMoveState.current = {
+												initialPosition,
+												index,
+												significantMoveHappened: false,
+												listenersActivated: true,
+											};
+											onStartControlPointChange();
+											window.addEventListener(
+												'mousemove',
+												onMouseMove
+											);
+											window.addEventListener(
+												'mouseup',
+												cleanEventListeners
+											);
+										}
+									} }
+									onKeyDown={ ( event ) => {
+										if ( event.code === 'ArrowLeft' ) {
+											// Stop propagation of the key press event to avoid focus moving
+											// to another editor area.
+											event.stopPropagation();
+											onChange(
+												updateControlPointPosition(
+													controlPoints,
+													index,
+													clampPercent(
+														point.position -
+															KEYBOARD_CONTROL_POINT_VARIATION
+													)
+												)
+											);
+										} else if (
+											event.code === 'ArrowRight'
+										) {
+											// Stop propagation of the key press event to avoid focus moving
+											// to another editor area.
+											event.stopPropagation();
+											onChange(
+												updateControlPointPosition(
+													controlPoints,
+													index,
+													clampPercent(
+														point.position +
+															KEYBOARD_CONTROL_POINT_VARIATION
+													)
+												)
+											);
+										}
+									} }
+									isOpen={ isOpen }
+									position={ point.position }
+									color={ point.color }
+								/>
+							) }
+							renderContent={ ( { onClose } ) => (
+								<>
+									<ColorPicker
+										enableAlpha={ ! disableAlpha }
+										color={ point.color }
+										onChange={ ( color ) => {
 											onChange(
-												removeControlPoint(
+												updateControlPointColor(
 													controlPoints,
-													index
+													index,
+													colord(
+														color
+													).toRgbString()
 												)
 											);
-											onClose();
 										} }
-										variant="link"
-									>
-										{ __( 'Remove Control Point' ) }
-									</Button>
-								</HStack>
+									/>
+									{ ! disableRemove &&
+										controlPoints.length > 2 && (
+											<HStack
+												className="components-custom-gradient-picker__remove-control-point-wrapper"
+												alignment="center"
+											>
+												<Button
+													onClick={ () => {
+														onChange(
+															removeControlPoint(
+																controlPoints,
+																index
+															)
+														);
+														onClose();
+													} }
+													variant="link"
+												>
+													{ __(
+														'Remove Control Point'
+													) }
+												</Button>
+											</HStack>
+										) }
+								</>
 							) }
-						</>
-					) }
-					style={ {
-						left: `${ point.position }%`,
-						transform: 'translateX( -50% )',
-					} }
-				/>
-			)
-		);
-	} );
+							style={ {
+								left: `${ point.position }%`,
+								transform: 'translateX( -50% )',
+							} }
+						/>
+					)
+				);
+			} ) }
+		</>
+	);
 }
 
 function InsertPoint( {
@@ -294,7 +333,7 @@ function InsertPoint( {
 	insertPosition,
 	disableAlpha,
 	__experimentalIsRenderedInSidebar,
-} ) {
+}: InsertPointProps ) {
 	const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
 	return (
 		<GradientColorPickerDropdown

package/src/custom-gradient-picker/gradient-bar/{index.js → index.tsx}

@@ -14,8 +14,18 @@ import { useRef, useReducer } from '@wordpress/element';
 import ControlPoints from './control-points';
 import { getHorizontalRelativeGradientPosition } from './utils';
 import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';
+import type {
+	CustomGradientBarProps,
+	CustomGradientBarReducerState,
+	CustomGradientBarReducerAction,
+	CustomGradientBarIdleState,
+} from '../types';
+import type { MouseEventHandler } from 'react';
 
-function customGradientBarReducer( state, action ) {
+const customGradientBarReducer = (
+	state: CustomGradientBarReducerState,
+	action: CustomGradientBarReducerAction
+): CustomGradientBarReducerState => {
 	switch ( action.type ) {
 		case 'MOVE_INSERTER':
 			if ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {
@@ -63,8 +73,10 @@ function customGradientBarReducer( state, action ) {
 			break;
 	}
 	return state;
-}
-const customGradientBarReducerInitialState = { id: 'IDLE' };
+};
+const customGradientBarReducerInitialState: CustomGradientBarIdleState = {
+	id: 'IDLE',
+};
 
 export default function CustomGradientBar( {
 	background,
@@ -73,15 +85,21 @@ export default function CustomGradientBar( {
 	onChange,
 	disableInserter = false,
 	disableAlpha = false,
-	__experimentalIsRenderedInSidebar,
-} ) {
-	const gradientMarkersContainerDomRef = useRef();
+	__experimentalIsRenderedInSidebar = false,
+}: CustomGradientBarProps ) {
+	const gradientMarkersContainerDomRef = useRef< HTMLDivElement >( null );
 
 	const [ gradientBarState, gradientBarStateDispatch ] = useReducer(
 		customGradientBarReducer,
 		customGradientBarReducerInitialState
 	);
-	const onMouseEnterAndMove = ( event ) => {
+	const onMouseEnterAndMove: MouseEventHandler< HTMLDivElement > = (
+		event
+	) => {
+		if ( ! gradientMarkersContainerDomRef.current ) {
+			return;
+		}
+
 		const insertPosition = getHorizontalRelativeGradientPosition(
 			event.clientX,
 			gradientMarkersContainerDomRef.current
@@ -121,9 +139,15 @@ export default function CustomGradientBar( {
 			) }
 			onMouseEnter={ onMouseEnterAndMove }
 			onMouseMove={ onMouseEnterAndMove }
-			style={ { background } }
 			onMouseLeave={ onMouseLeave }
 		>
+			<div
+				className="components-custom-gradient-picker__gradient-bar-background"
+				style={ {
+					background,
+					opacity: hasGradient ? 1 : 0.4,
+				} }
+			/>
 			<div
 				ref={ gradientMarkersContainerDomRef }
 				className="components-custom-gradient-picker__markers-container"

package/src/custom-gradient-picker/gradient-bar/test/{utils.js → utils.ts}

@@ -5,38 +5,54 @@ import { getHorizontalRelativeGradientPosition } from '../utils';
 
 describe( 'getHorizontalRelativeGradientPosition', () => {
 	it( 'should return relative percentage position', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 0,
-				width: 1000,
-			} ),
-		};
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 0,
+					width: 1000,
+				} as DOMRect )
+		);
 
+		const containerElement = document.createElement( 'div' );
 		expect(
 			getHorizontalRelativeGradientPosition( 500, containerElement )
 		).toBe( 50 );
 	} );
 
 	it( 'should subtract the x position of the container from the mouse position', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 50,
-				width: 1000,
-			} ),
-		};
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 50,
+					width: 1000,
+				} as DOMRect )
+		);
 
+		const containerElement = document.createElement( 'div' );
 		expect(
 			getHorizontalRelativeGradientPosition( 550, containerElement )
 		).toBe( 50 );
 	} );
 
 	it( 'should clamp to a whole percentage number', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 0,
-				width: 1000,
-			} ),
-		};
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 0,
+					width: 1000,
+				} as DOMRect )
+		);
+
+		const containerElement = document.createElement( 'div' );
 
 		expect(
 			getHorizontalRelativeGradientPosition( 333, containerElement )
@@ -44,12 +60,17 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 	} );
 
 	it( 'should clamp to zero when mouse position is less the x position', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 50,
-				width: 1000,
-			} ),
-		};
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 50,
+					width: 1000,
+				} as DOMRect )
+		);
+		const containerElement = document.createElement( 'div' );
 
 		expect(
 			getHorizontalRelativeGradientPosition( 2, containerElement )
@@ -57,12 +78,18 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 	} );
 
 	it( 'should clamp to 100 when mouse position is greater than width', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 0,
-				width: 1000,
-			} ),
-		};
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 50,
+					width: 1000,
+				} as DOMRect )
+		);
+
+		const containerElement = document.createElement( 'div' );
 
 		expect(
 			getHorizontalRelativeGradientPosition( 1500, containerElement )
@@ -70,7 +97,7 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 	} );
 
 	it( 'should return undefined if no containerElement is provided', () => {
-		const containerElement = undefined;
+		const containerElement = null;
 
 		expect(
 			getHorizontalRelativeGradientPosition( 1500, containerElement )