@wordpress/components 19.12.0 → 19.13.0

package/src/custom-gradient-bar/control-points.js

@@ -31,7 +31,6 @@ import {
 	getHorizontalRelativeGradientPosition,
 } from './utils';
 import {
-	GRADIENT_MARKERS_WIDTH,
 	MINIMUM_SIGNIFICANT_MOVE,
 	KEYBOARD_CONTROL_POINT_VARIATION,
 } from './constants';
@@ -61,6 +60,7 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 				) }
 				style={ {
 					left: `${ position }%`,
+					transform: 'translateX( -50% )',
 				} }
 				{ ...additionalProps }
 			/>
@@ -89,7 +89,7 @@ function GradientColorPickerDropdown( {
 			result.position = 'bottom left';
 		}
 		return result;
-	}, [ gradientPickerDomRef.current, isRenderedInSidebar ] );
+	}, [ gradientPickerDomRef, isRenderedInSidebar ] );
 	return (
 		<CustomColorPickerDropdown
 			isRenderedInSidebar={ isRenderedInSidebar }
@@ -115,14 +115,10 @@ function ControlPoints( {
 	const onMouseMove = ( event ) => {
 		const relativePosition = getHorizontalRelativeGradientPosition(
 			event.clientX,
-			gradientPickerDomRef.current,
-			GRADIENT_MARKERS_WIDTH
+			gradientPickerDomRef.current
 		);
-		const {
-			initialPosition,
-			index,
-			significantMoveHappened,
-		} = controlPointMoveState.current;
+		const { initialPosition, index, significantMoveHappened } =
+			controlPointMoveState.current;
 		if (
 			! significantMoveHappened &&
 			Math.abs( initialPosition - relativePosition ) >=
@@ -150,9 +146,15 @@ 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();
+	cleanEventListenersRef.current = cleanEventListeners;
+
 	useEffect( () => {
 		return () => {
-			cleanEventListeners();
+			cleanEventListenersRef.current();
 		};
 	}, [] );
 
@@ -312,12 +314,14 @@ function InsertPoint( {
 					} }
 					className="components-custom-gradient-picker__insert-point"
 					icon={ plus }
-					style={ {
-						left:
-							insertPosition !== null
-								? `${ insertPosition }%`
-								: undefined,
-					} }
+					style={
+						insertPosition !== null
+							? {
+									left: `${ insertPosition }%`,
+									transform: 'translateX( -50% )',
+							  }
+							: undefined
+					}
 				/>
 			) }
 			renderContent={ () => (

package/src/custom-gradient-bar/index.js

@@ -15,10 +15,7 @@ import { useRef, useReducer } from '@wordpress/element';
  */
 import ControlPoints from './control-points';
 import { getHorizontalRelativeGradientPosition } from './utils';
-import {
-	INSERT_POINT_WIDTH,
-	MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT,
-} from './constants';
+import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';
 
 function customGradientBarReducer( state, action ) {
 	switch ( action.type ) {
@@ -80,7 +77,7 @@ export default function CustomGradientBar( {
 	disableAlpha = false,
 	__experimentalIsRenderedInSidebar,
 } ) {
-	const gradientPickerDomRef = useRef();
+	const gradientMarkersContainerDomRef = useRef();
 
 	const [ gradientBarState, gradientBarStateDispatch ] = useReducer(
 		customGradientBarReducer,
@@ -89,8 +86,7 @@ export default function CustomGradientBar( {
 	const onMouseEnterAndMove = ( event ) => {
 		const insertPosition = getHorizontalRelativeGradientPosition(
 			event.clientX,
-			gradientPickerDomRef.current,
-			INSERT_POINT_WIDTH
+			gradientMarkersContainerDomRef.current
 		);
 
 		// If the insert point is close to an existing control point don't show it.
@@ -121,7 +117,6 @@ export default function CustomGradientBar( {
 
 	return (
 		<div
-			ref={ gradientPickerDomRef }
 			className={ classnames(
 				'components-custom-gradient-picker__gradient-bar',
 				{ 'has-gradient': hasGradient }
@@ -131,14 +126,19 @@ export default function CustomGradientBar( {
 			style={ { background } }
 			onMouseLeave={ onMouseLeave }
 		>
-			<div className="components-custom-gradient-picker__markers-container">
+			<div
+				ref={ gradientMarkersContainerDomRef }
+				className="components-custom-gradient-picker__markers-container"
+			>
 				{ ! disableInserter &&
 					( isMovingInserter || isInsertingControlPoint ) && (
 						<ControlPoints.InsertPoint
 							__experimentalIsRenderedInSidebar={
 								__experimentalIsRenderedInSidebar
 							}
-							gradientPickerDomRef={ gradientPickerDomRef }
+							gradientPickerDomRef={
+								gradientMarkersContainerDomRef
+							}
 							disableAlpha={ disableAlpha }
 							insertPosition={ gradientBarState.insertPosition }
 							value={ controlPoints }
@@ -161,7 +161,7 @@ export default function CustomGradientBar( {
 					}
 					disableAlpha={ disableAlpha }
 					disableRemove={ disableInserter }
-					gradientPickerDomRef={ gradientPickerDomRef }
+					gradientPickerDomRef={ gradientMarkersContainerDomRef }
 					ignoreMarkerPosition={
 						isInsertingControlPoint
 							? gradientBarState.insertPosition

package/src/custom-gradient-bar/test/utils.js

@@ -0,0 +1,79 @@
+/**
+ * Internal dependencies
+ */
+import { getHorizontalRelativeGradientPosition } from '../utils';
+
+describe( 'getHorizontalRelativeGradientPosition', () => {
+	it( 'should return relative percentage position', () => {
+		const containerElement = {
+			getBoundingClientRect: () => ( {
+				x: 0,
+				width: 1000,
+			} ),
+		};
+
+		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,
+			} ),
+		};
+
+		expect(
+			getHorizontalRelativeGradientPosition( 550, containerElement )
+		).toBe( 50 );
+	} );
+
+	it( 'should clamp to a whole percentage number', () => {
+		const containerElement = {
+			getBoundingClientRect: () => ( {
+				x: 0,
+				width: 1000,
+			} ),
+		};
+
+		expect(
+			getHorizontalRelativeGradientPosition( 333, containerElement )
+		).toBe( 33 );
+	} );
+
+	it( 'should clamp to zero when mouse position is less the x position', () => {
+		const containerElement = {
+			getBoundingClientRect: () => ( {
+				x: 50,
+				width: 1000,
+			} ),
+		};
+
+		expect(
+			getHorizontalRelativeGradientPosition( 2, containerElement )
+		).toBe( 0 );
+	} );
+
+	it( 'should clamp to 100 when mouse position is greater than width', () => {
+		const containerElement = {
+			getBoundingClientRect: () => ( {
+				x: 0,
+				width: 1000,
+			} ),
+		};
+
+		expect(
+			getHorizontalRelativeGradientPosition( 1500, containerElement )
+		).toBe( 100 );
+	} );
+
+	it( 'should return undefined if no containerElement is provided', () => {
+		const containerElement = undefined;
+
+		expect(
+			getHorizontalRelativeGradientPosition( 1500, containerElement )
+		).toBeUndefined();
+	} );
+} );

package/src/custom-gradient-bar/utils.js

@@ -1,11 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	MINIMUM_DISTANCE_BETWEEN_POINTS,
-	MINIMUM_ABSOLUTE_LEFT_POSITION,
-	INSERT_POINT_WIDTH,
-} from './constants';
+import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
 
 /**
  * Control point for the gradient bar.
@@ -171,29 +167,21 @@ export function updateControlPointColorByPosition(
 /**
  * Gets the horizontal coordinate when dragging a control point with the mouse.
  *
- * @param {number}  mouseXCoordinate       Horizontal coordinate of the mouse position.
- * @param {Element} containerElement       Container for the gradient picker.
- * @param {number}  positionedElementWidth Width of the positioned element.
+ * @param {number}  mouseXCoordinate Horizontal coordinate of the mouse position.
+ * @param {Element} containerElement Container for the gradient picker.
  *
  * @return {number} Whole number percentage from the left.
  */
 export function getHorizontalRelativeGradientPosition(
 	mouseXCoordinate,
-	containerElement,
-	positionedElementWidth
+	containerElement
 ) {
 	if ( ! containerElement ) {
 		return;
 	}
 	const { x, width } = containerElement.getBoundingClientRect();
-	const absolutePositionValue =
-		mouseXCoordinate -
-		x -
-		MINIMUM_ABSOLUTE_LEFT_POSITION -
-		positionedElementWidth / 2;
-	const availableWidth =
-		width - MINIMUM_ABSOLUTE_LEFT_POSITION - INSERT_POINT_WIDTH;
+	const absolutePositionValue = mouseXCoordinate - x;
 	return Math.round(
-		clampPercent( ( absolutePositionValue * 100 ) / availableWidth )
+		clampPercent( ( absolutePositionValue * 100 ) / width )
 	);
 }

package/src/custom-gradient-picker/style.scss

@@ -10,12 +10,10 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 	width: 100%;
 	height: $grid-unit-60;
 	margin-bottom: $grid-unit-20+$grid-unit-05;
-	/*rtl:ignore*/
-	padding-right: $components-custom-gradient-picker__padding;
 
 	.components-custom-gradient-picker__markers-container {
 		position: relative;
-		width: calc(100% - #{ $grid-unit-40 });
+		width: calc(100% - #{ $grid-unit-60 });
 		margin-left: auto;
 		margin-right: auto;
 	}

package/src/custom-gradient-picker/utils.js

@@ -44,9 +44,10 @@ export function getGradientAstWithDefault( value ) {
 
 	if ( gradientAST.orientation?.type === 'directional' ) {
 		gradientAST.orientation.type = 'angular';
-		gradientAST.orientation.value = DIRECTIONAL_ORIENTATION_ANGLE_MAP[
-			gradientAST.orientation.value
-		].toString();
+		gradientAST.orientation.value =
+			DIRECTIONAL_ORIENTATION_ANGLE_MAP[
+				gradientAST.orientation.value
+			].toString();
 	}
 
 	if ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {

package/src/custom-select-control/index.js

@@ -180,7 +180,8 @@ export default function CustomSelectControl( {
 										'is-highlighted':
 											index === highlightedIndex,
 										'has-hint': !! item.__experimentalHint,
-										'is-next-36px-default-size': __next36pxDefaultSize,
+										'is-next-36px-default-size':
+											__next36pxDefaultSize,
 									}
 								),
 								style: item.style,

package/src/custom-select-control/stories/index.js

@@ -55,8 +55,7 @@ WithLongLabels.args = {
 		},
 		{
 			key: 'reallylonglabel3',
-			name:
-				'That really is ok though because you should stress test your UIs.',
+			name: 'That really is ok though because you should stress test your UIs.',
 		},
 	],
 };

package/src/date-time/date/index.tsx

@@ -3,7 +3,6 @@
  */
 import moment from 'moment';
 import type { Moment } from 'moment';
-import { noop } from 'lodash';
 // Needed to initialise the default datepicker styles.
 // See: https://github.com/airbnb/react-dates#initialize
 import 'react-dates/initialize';
@@ -27,6 +26,7 @@ import { Day, NavPrevButton, NavNextButton } from './styles';
 
 const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
 const ARIAL_LABEL_TIME_FORMAT = 'dddd, LL';
+const noop = () => {};
 
 function DatePickerDay( { day, events = [] }: DatePickerDayProps ) {
 	const ref = useRef< HTMLDivElement >( null );
@@ -64,7 +64,7 @@ function DatePickerDay( { day, events = [] }: DatePickerDayProps ) {
 		);
 
 		parentNode.setAttribute( 'aria-label', dayWithEventsDescription );
-	}, [ events.length ] );
+	}, [ day, events.length ] );
 
 	return (
 		<Day

package/src/date-time/date/style.scss

@@ -53,6 +53,11 @@
 		border: none;
 		font-size: $default-font-size;
 		border-radius: $radius-round;
+		background: $white;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
 
 		&:focus {
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 #{ $border-width-focus + $border-width } $white;
@@ -60,12 +65,17 @@
 		}
 	}
 
+	.CalendarDay__today {
+		background: $gray-100;
+	}
+
 	.CalendarDay__selected {
 		background: var(--wp-admin-theme-color);
 		border: 2px solid transparent; // This indicates selection in Windows 10 high contrast mode.
 
 		&:hover {
 			background: var(--wp-admin-theme-color-darker-20);
+			color: $white;
 		}
 
 		&:focus {

package/src/date-time/date/test/index.tsx

@@ -28,7 +28,7 @@ describe( 'DatePicker', () => {
 	it( "should highlight today's date when not provided a currentDate", () => {
 		render( <DatePicker /> );
 
-		const todayDescription = moment().format( 'dddd, MMM D, YYYY' );
+		const todayDescription = moment().format( 'dddd, MMMM D, YYYY' );
 		expect(
 			screen.getByRole( 'button', { name: todayDescription } )
 		).toHaveClass( 'CalendarDay__selected' );

package/src/date-time/date-time/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -25,6 +24,8 @@ import { Spacer } from '../../spacer';
 
 export { DatePicker, TimePicker };
 
+const noop = () => {};
+
 function UnforwardedDateTimePicker(
 	{
 		currentDate,
@@ -42,22 +43,19 @@ function UnforwardedDateTimePicker(
 		deprecated( 'Help button in wp.components.DateTimePicker', {
 			since: '13.4',
 			version: '14.6', // Six months of plugin releases.
-			hint:
-				'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
+			hint: 'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
 		} );
 	}
 	if ( ! __nextRemoveResetButton ) {
 		deprecated( 'Reset button in wp.components.DateTimePicker', {
 			since: '13.4',
 			version: '14.6', // Six months of plugin releases.
-			hint:
-				'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
+			hint: 'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
 		} );
 	}
 
-	const [ calendarHelpIsVisible, setCalendarHelpIsVisible ] = useState(
-		false
-	);
+	const [ calendarHelpIsVisible, setCalendarHelpIsVisible ] =
+		useState( false );
 
 	function onClickDescriptionToggle() {
 		setCalendarHelpIsVisible( ! calendarHelpIsVisible );

package/src/date-time/stories/date-time.tsx

@@ -53,9 +53,8 @@ export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
 	{}
 );
 
-export const WithEvents: ComponentStory<
-	typeof DateTimePicker
-> = Template.bind( {} );
+export const WithEvents: ComponentStory< typeof DateTimePicker > =
+	Template.bind( {} );
 WithEvents.args = {
 	currentDate: new Date(),
 	events: [
@@ -66,9 +65,8 @@ WithEvents.args = {
 	],
 };
 
-export const WithInvalidDates: ComponentStory<
-	typeof DateTimePicker
-> = Template.bind( {} );
+export const WithInvalidDates: ComponentStory< typeof DateTimePicker > =
+	Template.bind( {} );
 WithInvalidDates.args = {
 	currentDate: new Date(),
 	isInvalidDate: isWeekend,

package/src/date-time/stories/date.tsx

@@ -64,9 +64,8 @@ WithEvents.args = {
 	],
 };
 
-export const WithInvalidDates: ComponentStory<
-	typeof DatePicker
-> = Template.bind( {} );
+export const WithInvalidDates: ComponentStory< typeof DatePicker > =
+	Template.bind( {} );
 WithInvalidDates.args = {
 	currentDate: new Date(),
 	isInvalidDate: isWeekend,

package/src/date-time/time/test/index.tsx

@@ -366,20 +366,20 @@ describe( 'TimePicker', () => {
 			/>
 		);
 
-		const monthInput = ( screen.getByLabelText(
-			'Month'
-		) as HTMLInputElement ).value;
+		const monthInput = (
+			screen.getByLabelText( 'Month' ) as HTMLInputElement
+		 ).value;
 		const dayInput = ( screen.getByLabelText( 'Day' ) as HTMLInputElement )
 			.value;
-		const yearInput = ( screen.getByLabelText(
-			'Year'
-		) as HTMLInputElement ).value;
-		const hoursInput = ( screen.getByLabelText(
-			'Hours'
-		) as HTMLInputElement ).value;
-		const minutesInput = ( screen.getByLabelText(
-			'Minutes'
-		) as HTMLInputElement ).value;
+		const yearInput = (
+			screen.getByLabelText( 'Year' ) as HTMLInputElement
+		 ).value;
+		const hoursInput = (
+			screen.getByLabelText( 'Hours' ) as HTMLInputElement
+		 ).value;
+		const minutesInput = (
+			screen.getByLabelText( 'Minutes' ) as HTMLInputElement
+		 ).value;
 
 		expect( Number.isNaN( parseInt( monthInput, 10 ) ) ).toBe( false );
 		expect( Number.isNaN( parseInt( dayInput, 10 ) ) ).toBe( false );

package/src/dimension-control/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isFunction } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,7 +34,7 @@ export function DimensionControl( props ) {
 
 		if ( ! theSize || value === theSize.slug ) {
 			onChange( undefined );
-		} else if ( isFunction( onChange ) ) {
+		} else if ( typeof onChange === 'function' ) {
 			onChange( theSize.slug );
 		}
 	};

package/src/divider/styles.ts

@@ -57,9 +57,8 @@ const renderBorder = ( {
 	'aria-orientation': orientation = 'horizontal',
 }: Props ) => {
 	return css( {
-		[ orientation === 'vertical'
-			? 'borderRight'
-			: 'borderBottom' ]: '1px solid currentColor',
+		[ orientation === 'vertical' ? 'borderRight' : 'borderBottom' ]:
+			'1px solid currentColor',
 	} );
 };
 

package/src/draggable/index.js

@@ -144,9 +144,9 @@ export default function Draggable( {
 			cloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;
 
 			// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.
-			Array.from(
-				clone.querySelectorAll( 'iframe' )
-			).forEach( ( child ) => child.parentNode.removeChild( child ) );
+			Array.from( clone.querySelectorAll( 'iframe' ) ).forEach(
+				( child ) => child.parentNode.removeChild( child )
+			);
 
 			cloneWrapper.appendChild( clone );
 

package/src/draggable/index.native.js

@@ -142,7 +142,16 @@ const Draggable = ( {
 
 	const providerValue = useMemo( () => {
 		return { panGestureRef, isDragging, isPanActive, draggingId };
-	}, [] );
+	}, [
+		// `isDragging`, `isPanActive` and `draggingId` are created using the
+		// `useSharedValue` hook provided by the `react-native-reanimated`, which in
+		// theory should guarantee that the value of these variables remains stable.
+		// ESLint can't pick this up, and that's why they have to be specified as
+		// dependencies for this hook call.
+		isDragging,
+		isPanActive,
+		draggingId,
+	] );
 
 	return (
 		<GestureDetector gesture={ panGesture }>
@@ -180,9 +189,8 @@ const DraggableTrigger = ( {
 	onLongPressEnd,
 	testID,
 } ) => {
-	const { panGestureRef, isDragging, isPanActive, draggingId } = useContext(
-		Context
-	);
+	const { panGestureRef, isDragging, isPanActive, draggingId } =
+		useContext( Context );
 
 	const gestureHandler = useAnimatedGestureHandler( {
 		onActive: () => {

package/src/drop-zone/provider.js

@@ -6,8 +6,7 @@ import deprecated from '@wordpress/deprecated';
 export default function DropZoneProvider( { children } ) {
 	deprecated( 'wp.components.DropZoneProvider', {
 		since: '5.8',
-		hint:
-			'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.',
+		hint: 'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.',
 	} );
 	return children;
 }

package/src/dropdown/index.js

@@ -46,11 +46,11 @@ export default function Dropdown( props ) {
 
 	useEffect(
 		() => () => {
-			if ( onToggle ) {
+			if ( onToggle && isOpen ) {
 				onToggle( false );
 			}
 		},
-		[]
+		[ onToggle, isOpen ]
 	);
 
 	function toggle() {

package/src/dropdown-menu/index.js

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { flatMap, isEmpty, isFunction } from 'lodash';
+import { flatMap, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -34,6 +34,16 @@ function mergeProps( defaultProps = {}, props = {} ) {
 	return mergedProps;
 }
 
+/**
+ * Whether the argument is a function.
+ *
+ * @param {*} maybeFunc The argument to check.
+ * @return {boolean} True if the argument is a function, false otherwise.
+ */
+function isFunction( maybeFunc ) {
+	return typeof maybeFunc === 'function';
+}
+
 function DropdownMenu( dropdownMenuProps ) {
 	const {
 		children,

package/src/dropdown-menu/index.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { flatMap, isEmpty, isFunction } from 'lodash';
+import { flatMap, isEmpty } from 'lodash';
 import { Platform } from 'react-native';
 /**
  * WordPress dependencies
@@ -34,6 +34,16 @@ function mergeProps( defaultProps = {}, props = {} ) {
 	return mergedProps;
 }
 
+/**
+ * Whether the argument is a function.
+ *
+ * @param {*} maybeFunc The argument to check.
+ * @return {boolean} True if the argument is a function, false otherwise.
+ */
+function isFunction( maybeFunc ) {
+	return typeof maybeFunc === 'function';
+}
+
 function DropdownMenu( {
 	children,
 	className,