@wordpress/components 23.6.0 → 23.8.0

package/src/color-picker/types.ts

@@ -1,10 +1,137 @@
 /**
  * External dependencies
  */
-import type { Colord } from 'colord';
+import type {
+	Colord,
+	HslColor,
+	HsvaColor,
+	HsvColor,
+	RgbaColor,
+	RgbColor,
+} from 'colord';
+import type { HslaColor } from 'react-colorful';
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../ui/context';
+import type { useDeprecatedProps } from './use-deprecated-props';
 
 export type ColorType = 'rgb' | 'hsl' | 'hex';
 export type ColorCopyButtonProps = {
 	color: Colord;
 	colorType: ColorType;
 };
+
+export type LegacyAdapterProps = Parameters< typeof useDeprecatedProps >[ 0 ];
+
+export type ColorPickerProps = WordPressComponentProps<
+	{
+		/**
+		 * When `true` the color picker will display the alpha channel both in
+		 * the bottom inputs as well as in the color picker itself.
+		 *
+		 * @default false
+		 */
+		enableAlpha?: boolean;
+		/**
+		 * The current color value to display in the picker.
+		 * Must be a hex or hex8 string.
+		 */
+		color?: string;
+		/**
+		 * Fired when the color changes. Always passes a hex or hex8 color string.
+		 */
+		onChange?: ( color: string ) => void;
+		/**
+		 * An optional default value to use for the color picker.
+		 */
+		defaultValue?: string;
+		/**
+		 * The format to copy when clicking the displayed color format.
+		 */
+		copyFormat?: ColorType;
+	},
+	'div',
+	false
+>;
+
+export interface PickerProps {
+	color: Colord;
+	enableAlpha: boolean;
+	onChange: ( nextColor: Colord ) => void;
+}
+
+export interface ColorInputProps {
+	colorType: 'hsl' | 'hex' | 'rgb';
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export interface InputWithSliderProps {
+	min: number;
+	max: number;
+	value: number;
+	label: string;
+	abbreviation: string;
+	onChange: ( value: number ) => void;
+}
+
+export interface HexInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export interface HslInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export interface RgbInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+/**
+ * @deprecated
+ */
+export type LegacyColor =
+	| string
+	| {
+			hex: string;
+			hsl: HslColor | HslaColor;
+			hsv: HsvColor | HsvaColor;
+			rgb: RgbColor | RgbaColor;
+			/**
+			 * @deprecated
+			 */
+			oldHue: number;
+			/**
+			 * @deprecated
+			 */
+			source: 'hex';
+	  };
+
+/**
+ * @deprecated
+ */
+export interface LegacyProps {
+	color?: LegacyColor;
+	/**
+	 * @deprecated
+	 */
+	onChangeComplete: ( colors: LegacyColor ) => void;
+	/**
+	 * @deprecated
+	 */
+	oldHue: string;
+	className: string;
+	/**
+	 * @deprecated
+	 */
+	disableAlpha: boolean;
+	onChange?: never;
+}

package/src/color-picker/use-deprecated-props.ts

@@ -1,16 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	colord,
-	HslColor,
-	HslaColor,
-	HsvColor,
-	HsvaColor,
-	RgbColor,
-	RgbaColor,
-} from 'colord';
-import type { ComponentProps } from 'react';
+import { colord } from 'colord';
 import memoize from 'memize';
 
 /**
@@ -21,49 +12,7 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type ColorPicker from './component';
-
-type ColorPickerProps = ComponentProps< typeof ColorPicker >;
-
-/**
- * @deprecated
- */
-type LegacyColor =
-	| string
-	| {
-			hex: string;
-			hsl: HslColor | HslaColor;
-			hsv: HsvColor | HsvaColor;
-			rgb: RgbColor | RgbaColor;
-			/**
-			 * @deprecated
-			 */
-			oldHue: number;
-			/**
-			 * @deprecated
-			 */
-			source: 'hex';
-	  };
-
-/**
- * @deprecated
- */
-export interface LegacyProps {
-	color?: LegacyColor;
-	/**
-	 * @deprecated
-	 */
-	onChangeComplete: ( colors: LegacyColor ) => void;
-	/**
-	 * @deprecated
-	 */
-	oldHue: string;
-	className: string;
-	/**
-	 * @deprecated
-	 */
-	disableAlpha: boolean;
-}
+import type { ColorPickerProps, LegacyColor, LegacyProps } from './types';
 
 function isLegacyProps( props: any ): props is LegacyProps {
 	return (

package/src/combobox-control/stories/index.tsx

@@ -36,7 +36,7 @@ const meta: ComponentMeta< typeof ComboboxControl > = {
 };
 export default meta;
 
-const mapCountryOption = ( country: typeof countries[ number ] ) => ( {
+const mapCountryOption = ( country: ( typeof countries )[ number ] ) => ( {
 	value: country.code,
 	label: country.name,
 } );

package/src/custom-gradient-picker/{constants.js → constants.ts}

@@ -10,8 +10,8 @@ export const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
 
 export const HORIZONTAL_GRADIENT_ORIENTATION = {
 	type: 'angular',
-	value: 90,
-};
+	value: '90',
+} as const;
 
 export const GRADIENT_OPTIONS = [
 	{ value: 'linear-gradient', label: __( 'Linear' ) },

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

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -36,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 (
@@ -75,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 ),
 		[]
 	);
 
@@ -110,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 ) >=
@@ -150,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(
-												removeControlPoint(
+												updateControlPointPosition(
 													controlPoints,
-													index
+													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()
 												)
 											);
-											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( {
@@ -296,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}

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -16,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' ) {
@@ -65,8 +73,10 @@ function customGradientBarReducer( state, action ) {
 			break;
 	}
 	return state;
-}
-const customGradientBarReducerInitialState = { id: 'IDLE' };
+};
+const customGradientBarReducerInitialState: CustomGradientBarIdleState = {
+	id: 'IDLE',
+};
 
 export default function CustomGradientBar( {
 	background,
@@ -75,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
@@ -123,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"