@wordpress/components 19.10.0 → 19.13.0

package/src/color-picker/color-copy-button.tsx

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import { useCopyToClipboard } from '@wordpress/compose';
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { copy } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { CopyButton } from './styles';
+import { Text } from '../text';
+import { Tooltip } from '../ui/tooltip';
+
+import type { ColorCopyButtonProps } from './types';
+
+export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
+	const { color, colorType } = props;
+	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
+	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
+	const copyRef = useCopyToClipboard< HTMLDivElement >(
+		() => {
+			switch ( colorType ) {
+				case 'hsl': {
+					return color.toHslString();
+				}
+				case 'rgb': {
+					return color.toRgbString();
+				}
+				default:
+				case 'hex': {
+					return color.toHex();
+				}
+			}
+		},
+		() => {
+			if ( copyTimer.current ) {
+				clearTimeout( copyTimer.current );
+			}
+			setCopiedColor( color.toHex() );
+			copyTimer.current = setTimeout( () => {
+				setCopiedColor( null );
+				copyTimer.current = undefined;
+			}, 3000 );
+		}
+	);
+	useEffect( () => {
+		// Clear copyTimer on component unmount.
+		return () => {
+			if ( copyTimer.current ) {
+				clearTimeout( copyTimer.current );
+			}
+		};
+	}, [] );
+
+	return (
+		<Tooltip
+			content={
+				<Text color="white">
+					{ copiedColor === color.toHex()
+						? __( 'Copied!' )
+						: __( 'Copy' ) }
+				</Text>
+			}
+			placement="bottom"
+		>
+			<CopyButton
+				isSmall
+				ref={ copyRef }
+				icon={ copy }
+				showTooltip={ false }
+			/>
+		</Tooltip>
+	);
+};

package/src/color-picker/component.tsx

@@ -9,7 +9,6 @@ import namesPlugin from 'colord/plugins/names';
  * WordPress dependencies
  */
 import { useCallback, useState, useMemo } from '@wordpress/element';
-import { settings } from '@wordpress/icons';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
@@ -27,9 +26,8 @@ import {
 	ColorfulWrapper,
 	SelectControl,
 	AuxiliaryColorArtefactWrapper,
-	DetailsControlButton,
 } from './styles';
-import { ColorDisplay } from './color-display';
+import { ColorCopyButton } from './color-copy-button';
 import { ColorInput } from './color-input';
 import { Picker } from './picker';
 import { useControlledValue } from '../utils/hooks';
@@ -85,7 +83,6 @@ const ColorPicker = (
 		[ debouncedSetColor ]
 	);
 
-	const [ showInputs, setShowInputs ] = useState< boolean >( false );
 	const [ colorType, setColorType ] = useState< ColorType >(
 		copyFormat || 'hex'
 	);
@@ -99,44 +96,27 @@ const ColorPicker = (
 			/>
 			<AuxiliaryColorArtefactWrapper>
 				<HStack justify="space-between">
-					{ showInputs ? (
-						<SelectControl
-							options={ options }
-							value={ colorType }
-							onChange={ ( nextColorType ) =>
-								setColorType( nextColorType as ColorType )
-							}
-							label={ __( 'Color format' ) }
-							hideLabelFromVision
-						/>
-					) : (
-						<ColorDisplay
-							color={ safeColordColor }
-							colorType={ copyFormat || colorType }
-							enableAlpha={ enableAlpha }
-						/>
-					) }
-					<DetailsControlButton
-						isSmall
-						onClick={ () => setShowInputs( ! showInputs ) }
-						icon={ settings }
-						isPressed={ showInputs }
-						label={
-							showInputs
-								? __( 'Hide detailed inputs' )
-								: __( 'Show detailed inputs' )
+					<SelectControl
+						options={ options }
+						value={ colorType }
+						onChange={ ( nextColorType ) =>
+							setColorType( nextColorType as ColorType )
 						}
+						label={ __( 'Color format' ) }
+						hideLabelFromVision
 					/>
-				</HStack>
-				<Spacer margin={ 4 } />
-				{ showInputs && (
-					<ColorInput
-						colorType={ colorType }
+					<ColorCopyButton
 						color={ safeColordColor }
-						onChange={ handleChange }
-						enableAlpha={ enableAlpha }
+						colorType={ copyFormat || colorType }
 					/>
-				) }
+				</HStack>
+				<Spacer margin={ 4 } />
+				<ColorInput
+					colorType={ colorType }
+					color={ safeColordColor }
+					onChange={ handleChange }
+					enableAlpha={ enableAlpha }
+				/>
 			</AuxiliaryColorArtefactWrapper>
 		</ColorfulWrapper>
 	);

package/src/color-picker/hex-input.tsx

@@ -16,6 +16,7 @@ import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { ColorHexInputControl } from './styles';
 import { COLORS } from '../utils/colors-values';
+import type { StateReducer } from '../input-control/reducer/state';
 
 interface HexInputProps {
 	color: Colord;
@@ -33,6 +34,20 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 		onChange( colord( hexValue ) );
 	};
 
+	const stateReducer: StateReducer = ( state, action ) => {
+		const nativeEvent = action.payload?.event?.nativeEvent as InputEvent;
+
+		if ( 'insertFromPaste' !== nativeEvent?.inputType ) {
+			return { ...state };
+		}
+
+		const value = state.value?.startsWith( '#' )
+			? state.value.slice( 1 ).toUpperCase()
+			: state.value?.toUpperCase();
+
+		return { ...state, value };
+	};
+
 	return (
 		<ColorHexInputControl
 			prefix={
@@ -50,6 +65,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			maxLength={ enableAlpha ? 9 : 7 }
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
+			__unstableStateReducer={ stateReducer }
 		/>
 	);
 };

package/src/color-picker/index.native.js

@@ -36,10 +36,13 @@ function ColorPicker( {
 	const didMount = useRef( false );
 	const isIOS = Platform.OS === 'ios';
 	const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
-	const { h: initH, s: initS, v: initV } =
-		! isGradientColor && activeColor
-			? colord( activeColor ).toHsv()
-			: { h: 0, s: 50, v: 50 };
+	const {
+		h: initH,
+		s: initS,
+		v: initV,
+	} = ! isGradientColor && activeColor
+		? colord( activeColor ).toHsv()
+		: { h: 0, s: 50, v: 50 };
 	const [ hue, setHue ] = useState( initH );
 	const [ sat, setSaturation ] = useState( initS / 100 );
 	const [ val, setValue ] = useState( initV / 100 );

package/src/color-picker/styles.ts

@@ -111,10 +111,14 @@ export const ColorfulWrapper = styled.div`
 	${ inputHeightStyle }
 `;
 
-export const DetailsControlButton = styled( Button )`
+export const CopyButton = styled( Button )`
 	&&&&& {
 		min-width: ${ space( 6 ) };
 		padding: 0;
+
+		> svg {
+			margin-right: 0;
+		}
 	}
 `;
 

package/src/color-picker/types.ts

@@ -1 +1,10 @@
+/**
+ * External dependencies
+ */
+import type { Colord } from 'colord';
+
 export type ColorType = 'rgb' | 'hsl' | 'hex';
+export type ColorCopyButtonProps = {
+	color: Colord;
+	colorType: ColorType;
+};

package/src/combobox-control/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop, deburr } from 'lodash';
+import { deburr } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -29,6 +29,8 @@ import Button from '../button';
 import { Flex, FlexBlock, FlexItem } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
 
+const noop = () => {};
+
 const DetectOutside = withFocusOutside(
 	class extends Component {
 		handleFocusOutside( event ) {
@@ -166,7 +168,7 @@ function ComboboxControl( {
 
 	const handleOnReset = () => {
 		onChange( null );
-		inputContainer.current.input.focus();
+		inputContainer.current.focus();
 	};
 
 	// Update current selections when the filter input changes.

package/src/confirm-dialog/component.tsx

@@ -57,14 +57,13 @@ function ConfirmDialog(
 	}, [ isOpenProp ] );
 
 	const handleEvent = useCallback(
-		( callback?: ( event: DialogInputEvent ) => void ) => (
-			event: DialogInputEvent
-		) => {
-			callback?.( event );
-			if ( shouldSelfClose ) {
-				setIsOpen( false );
-			}
-		},
+		( callback?: ( event: DialogInputEvent ) => void ) =>
+			( event: DialogInputEvent ) => {
+				callback?.( event );
+				if ( shouldSelfClose ) {
+					setIsOpen( false );
+				}
+			},
 		[ shouldSelfClose, setIsOpen ]
 	);
 

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

@@ -1,10 +1,10 @@
 export const GRADIENT_MARKERS_WIDTH = 16;
 export const INSERT_POINT_WIDTH = 16;
-export const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;
 export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
 export const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;
 export const MINIMUM_SIGNIFICANT_MOVE = 5;
 
-export const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
+export const KEYBOARD_CONTROL_POINT_VARIATION =
+	MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
 export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =
 	( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;

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 ) ) {
@@ -75,7 +76,7 @@ export function getGradientAstWithControlPoints(
 			return {
 				length: {
 					type: '%',
-					value: position.toString(),
+					value: position?.toString(),
 				},
 				type: a < 1 ? 'rgba' : 'rgb',
 				value: a < 1 ? [ r, g, b, a ] : [ r, g, b ],

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.',
 		},
 	],
 };