@wordpress/components 25.6.1 → 26.0.1-next.5a1d1283.0

package/src/color-indicator/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import ColorIndicator from '..';
 
-const meta: ComponentMeta< typeof ColorIndicator > = {
+const meta: Meta< typeof ColorIndicator > = {
 	component: ColorIndicator,
 	title: 'Components/ColorIndicator',
 	argTypes: {
@@ -25,13 +25,11 @@ const meta: ComponentMeta< typeof ColorIndicator > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ColorIndicator > = ( { ...args } ) => (
+const Template: StoryFn< typeof ColorIndicator > = ( { ...args } ) => (
 	<ColorIndicator { ...args } />
 );
 
-export const Default: ComponentStory< typeof ColorIndicator > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ColorIndicator > = Template.bind( {} );
 Default.args = {
 	colorValue: '#0073aa',
 };

package/src/color-palette/stories/index.story.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { CSSProperties } from 'react';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,10 +13,8 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import ColorPalette from '..';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof ColorPalette > = {
+const meta: Meta< typeof ColorPalette > = {
 	title: 'Components/ColorPalette',
 	component: ColorPalette,
 	argTypes: {
@@ -31,25 +29,18 @@ const meta: ComponentMeta< typeof ColorPalette > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ColorPalette > = ( {
-	onChange,
-	...args
-} ) => {
+const Template: StoryFn< typeof ColorPalette > = ( { onChange, ...args } ) => {
 	const [ color, setColor ] = useState< string | undefined >();
 
 	return (
-		<SlotFillProvider>
-			<ColorPalette
-				{ ...args }
-				value={ color }
-				onChange={ ( newColor ) => {
-					setColor( newColor );
-					onChange?.( newColor );
-				} }
-			/>
-			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-			<Popover.Slot />
-		</SlotFillProvider>
+		<ColorPalette
+			{ ...args }
+			value={ color }
+			onChange={ ( newColor ) => {
+				setColor( newColor );
+				onChange?.( newColor );
+			} }
+		/>
 	);
 };
 
@@ -84,7 +75,7 @@ MultipleOrigins.args = {
 	],
 };
 
-export const CSSVariables: ComponentStory< typeof ColorPalette > = ( args ) => {
+export const CSSVariables: StoryFn< typeof ColorPalette > = ( args ) => {
 	return (
 		<div
 			style={

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

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { View, Dimensions } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HuePicker from './hue-picker';
+import SaturationValuePicker from './saturation-picker';
+import styles from './style.native.scss';
+
+const HsvColorPicker = ( props ) => {
+	const maxWidth = Dimensions.get( 'window' ).width - 32;
+	const satValPickerRef = useRef( null );
+
+	const {
+		containerStyle = {},
+		currentColor,
+		huePickerContainerStyle = {},
+		huePickerBorderRadius = 0,
+		huePickerHue = 0,
+		huePickerBarWidth = maxWidth,
+		huePickerBarHeight = 12,
+		huePickerSliderSize = 24,
+		onHuePickerDragStart,
+		onHuePickerDragMove,
+		onHuePickerDragEnd,
+		onHuePickerDragTerminate,
+		onHuePickerPress,
+		satValPickerContainerStyle = {},
+		satValPickerBorderRadius = 0,
+		satValPickerSize = { width: maxWidth, height: 200 },
+		satValPickerSliderSize = 24,
+		satValPickerHue = 0,
+		satValPickerSaturation = 1,
+		satValPickerValue = 1,
+		onSatValPickerDragStart,
+		onSatValPickerDragMove,
+		onSatValPickerDragEnd,
+		onSatValPickerDragTerminate,
+		onSatValPickerPress,
+	} = props;
+
+	return (
+		<View
+			style={ [ styles[ 'hsv-container' ], containerStyle ] }
+			testID="hsv-color-picker"
+		>
+			<SaturationValuePicker
+				containerStyle={ satValPickerContainerStyle }
+				currentColor={ currentColor }
+				borderRadius={ satValPickerBorderRadius }
+				size={ satValPickerSize }
+				sliderSize={ satValPickerSliderSize }
+				hue={ satValPickerHue }
+				saturation={ satValPickerSaturation }
+				value={ satValPickerValue }
+				onDragStart={ onSatValPickerDragStart }
+				onDragMove={ onSatValPickerDragMove }
+				onDragEnd={ onSatValPickerDragEnd }
+				onDragTerminate={ onSatValPickerDragTerminate }
+				onPress={ onSatValPickerPress }
+				ref={ satValPickerRef }
+			/>
+			<HuePicker
+				containerStyle={ huePickerContainerStyle }
+				borderRadius={ huePickerBorderRadius }
+				hue={ huePickerHue }
+				barWidth={ huePickerBarWidth }
+				barHeight={ huePickerBarHeight }
+				sliderSize={ huePickerSliderSize }
+				onDragStart={ onHuePickerDragStart }
+				onDragMove={ onHuePickerDragMove }
+				onDragEnd={ onHuePickerDragEnd }
+				onDragTerminate={ onHuePickerDragTerminate }
+				onPress={ onHuePickerPress }
+			/>
+		</View>
+	);
+};
+
+export default HsvColorPicker;

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

@@ -0,0 +1,194 @@
+/**
+ * External dependencies
+ */
+import { Animated, View, PanResponder } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+/**
+ * WordPress dependencies
+ */
+import React, { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+export default class HuePicker extends Component {
+	constructor( props ) {
+		super( props );
+		this.hueColors = [
+			'#ff0000',
+			'#ffff00',
+			'#00ff00',
+			'#00ffff',
+			'#0000ff',
+			'#ff00ff',
+			'#ff0000',
+		];
+		this.sliderX = new Animated.Value(
+			( props.barHeight * props.hue ) / 360
+		);
+		this.panResponder = PanResponder.create( {
+			onStartShouldSetPanResponder: () => true,
+			onStartShouldSetPanResponderCapture: () => true,
+			onMoveShouldSetPanResponder: () => true,
+			onMoveShouldSetPanResponderCapture: () => true,
+			onPanResponderGrant: ( evt, gestureState ) => {
+				const { onPress } = this.props;
+				this.dragStartValue = this.computeHueValuePress( evt );
+
+				if ( onPress ) {
+					onPress( {
+						hue: this.computeHueValuePress( evt ),
+						nativeEvent: evt.nativeEvent,
+					} );
+				}
+
+				this.fireDragEvent( 'onDragStart', gestureState );
+			},
+			onPanResponderMove: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragMove', gestureState );
+			},
+			onPanResponderTerminationRequest: () => true,
+			onPanResponderRelease: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragEnd', gestureState );
+			},
+			onPanResponderTerminate: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragTerminate', gestureState );
+			},
+			onShouldBlockNativeResponder: () => true,
+		} );
+	}
+
+	componentDidUpdate( prevProps ) {
+		const { hue = 0, barWidth = 200, sliderSize = 24 } = this.props;
+		const borderWidth = sliderSize / 10;
+		if ( prevProps.hue !== hue || prevProps.barWidth !== barWidth ) {
+			this.sliderX.setValue(
+				( ( barWidth - sliderSize + borderWidth ) * hue ) / 360
+			);
+		}
+	}
+
+	normalizeValue( value ) {
+		if ( value < 0 ) return 0;
+		if ( value > 1 ) return 1;
+		return value;
+	}
+
+	getContainerStyle() {
+		const {
+			sliderSize = 24,
+			barHeight = 12,
+			containerStyle = {},
+		} = this.props;
+		const paddingLeft = sliderSize / 2;
+		const paddingTop =
+			sliderSize - barHeight > 0 ? ( sliderSize - barHeight ) / 2 : 0;
+		return [
+			styles[ 'hsv-container' ],
+			containerStyle,
+			{
+				paddingTop,
+				paddingBottom: paddingTop,
+				paddingLeft,
+				paddingRight: paddingLeft,
+			},
+		];
+	}
+
+	computeHueValueDrag( gestureState ) {
+		const { dx } = gestureState;
+		const { barWidth = 200 } = this.props;
+		const { dragStartValue } = this;
+		const diff = dx / barWidth;
+		const updatedHue =
+			this.normalizeValue( dragStartValue / 360 + diff ) * 360;
+		return updatedHue;
+	}
+
+	computeHueValuePress( event ) {
+		const { nativeEvent } = event;
+		const { locationX } = nativeEvent;
+		const { barWidth = 200 } = this.props;
+		const updatedHue = this.normalizeValue( locationX / barWidth ) * 360;
+		return updatedHue;
+	}
+
+	fireDragEvent( eventName, gestureState ) {
+		const { [ eventName ]: event } = this.props;
+		if ( event ) {
+			event( {
+				hue: this.computeHueValueDrag( gestureState ),
+				gestureState,
+			} );
+		}
+	}
+
+	firePressEvent( event ) {
+		const { onPress } = this.props;
+		if ( onPress ) {
+			onPress( {
+				hue: this.computeHueValuePress( event ),
+				nativeEvent: event.nativeEvent,
+			} );
+		}
+	}
+
+	render() {
+		const { hueColors } = this;
+		const {
+			sliderSize = 24,
+			barWidth = 200,
+			barHeight = 12,
+			borderRadius = 0,
+		} = this.props;
+		const borderWidth = sliderSize / 10;
+		return (
+			<View
+				style={ this.getContainerStyle() }
+				{ ...this.panResponder.panHandlers }
+				hitSlop={ {
+					top: 10,
+					bottom: 10,
+					left: 0,
+					right: 0,
+				} }
+			>
+				<LinearGradient
+					colors={ hueColors }
+					style={ {
+						borderRadius,
+					} }
+					start={ { x: 0, y: 0 } }
+					end={ { x: 1, y: 0 } }
+				>
+					<View
+						style={ {
+							width: barWidth,
+							height: barHeight,
+						} }
+					/>
+				</LinearGradient>
+				<Animated.View
+					pointerEvents="none"
+					style={ [
+						styles[ 'hue-slider' ],
+						{
+							width: sliderSize,
+							height: sliderSize,
+							left: ( sliderSize - borderWidth ) / 2,
+							borderRadius: sliderSize / 2,
+							transform: [
+								{
+									translateX: this.sliderX,
+								},
+							],
+						},
+					] }
+				/>
+			</View>
+		);
+	}
+}

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';
-import HsvColorPicker from 'react-native-hsv-color-picker';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 /**
@@ -17,6 +16,7 @@ import { Icon, check, close } from '@wordpress/icons';
  * Internal dependencies
  */
 import styles from './style.scss';
+import HsvColorPicker from './hsv-color-picker.native.js';
 
 extend( [ namesPlugin ] );
 
@@ -122,6 +122,7 @@ function ColorPicker( {
 		<>
 			<HsvColorPicker
 				huePickerHue={ hue }
+				currentColor={ currentColor }
 				onHuePickerDragMove={ updateColor }
 				onHuePickerPress={
 					! isBottomSheetContentScrolling && updateColor

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

@@ -0,0 +1,163 @@
+/**
+ * External dependencies
+ */
+import { View, PanResponder } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import React, { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.native.scss';
+
+export default class SaturationValuePicker extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.panResponder = PanResponder.create( {
+			onStartShouldSetPanResponder: () => true,
+			onStartShouldSetPanResponderCapture: () => true,
+			onMoveShouldSetPanResponder: () => true,
+			onMoveShouldSetPanResponderCapture: () => true,
+			onPanResponderGrant: ( evt, gestureState ) => {
+				const { onPress } = this.props;
+				const { saturation, value } = this.computeSatValPress( evt );
+				this.dragStartValue = {
+					saturation,
+					value,
+				};
+
+				if ( onPress ) {
+					onPress( {
+						...this.computeSatValPress( evt ),
+						nativeEvent: evt.nativeEvent,
+					} );
+				}
+
+				this.fireDragEvent( 'onDragStart', gestureState );
+			},
+			onPanResponderMove: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragMove', gestureState );
+			},
+			onPanResponderTerminationRequest: () => true,
+			onPanResponderRelease: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragEnd', gestureState );
+			},
+			onPanResponderTerminate: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragTerminate', gestureState );
+			},
+			onShouldBlockNativeResponder: () => true,
+		} );
+	}
+
+	normalizeValue( value ) {
+		if ( value < 0 ) return 0;
+		if ( value > 1 ) return 1;
+		return value;
+	}
+
+	computeSatValDrag( gestureState ) {
+		const { dx, dy } = gestureState;
+		const { size } = this.props;
+		const { saturation, value } = this.dragStartValue;
+		const diffx = dx / size.width;
+		const diffy = dy / size.height;
+		return {
+			saturation: this.normalizeValue( saturation + diffx ),
+			value: this.normalizeValue( value - diffy ),
+		};
+	}
+
+	computeSatValPress( event ) {
+		const { nativeEvent } = event;
+		const { locationX, locationY } = nativeEvent;
+		const { size } = this.props;
+		return {
+			saturation: this.normalizeValue( locationX / size.width ),
+			value: 1 - this.normalizeValue( locationY / size.height ),
+		};
+	}
+
+	fireDragEvent( eventName, gestureState ) {
+		const { [ eventName ]: event } = this.props;
+		if ( event ) {
+			event( {
+				...this.computeSatValDrag( gestureState ),
+				gestureState,
+			} );
+		}
+	}
+
+	render() {
+		const {
+			size,
+			sliderSize = 24,
+			hue = 0,
+			value = 1,
+			saturation = 1,
+			containerStyle = {},
+			borderRadius = 0,
+			currentColor,
+		} = this.props;
+
+		return (
+			<View
+				style={ [
+					styles[ 'hsv-container' ],
+					containerStyle,
+					{
+						height: size.height + sliderSize,
+						width: size.width + sliderSize,
+					},
+				] }
+				{ ...this.panResponder.panHandlers }
+			>
+				<LinearGradient
+					style={ [
+						styles[ 'gradient-container' ],
+						{
+							borderRadius,
+						},
+					] }
+					colors={ [
+						'#fff',
+						colord( { h: hue, s: 100, l: 50 } ).toHex(),
+					] }
+					start={ { x: 0, y: 0.5 } }
+					end={ { x: 1, y: 0.5 } }
+				>
+					<LinearGradient colors={ [ 'rgba(0, 0, 0, 0)', '#000' ] }>
+						<View
+							style={ {
+								height: size.height,
+								width: size.width,
+							} }
+						/>
+					</LinearGradient>
+				</LinearGradient>
+				<View
+					pointerEvents="none"
+					style={ [
+						styles[ 'saturation-slider' ],
+						{
+							width: sliderSize,
+							height: sliderSize,
+							borderRadius: sliderSize / 2,
+							borderWidth: sliderSize / 10,
+							backgroundColor: currentColor,
+							transform: [
+								{ translateX: size.width * saturation },
+								{ translateY: size.height * ( 1 - value ) },
+							],
+						},
+					] }
+				/>
+			</View>
+		);
+	}
+}

package/src/color-picker/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import { ColorPicker } from '../component';
 
-const meta: ComponentMeta< typeof ColorPicker > = {
+const meta: Meta< typeof ColorPicker > = {
 	component: ColorPicker,
 	title: 'Components/ColorPicker',
 	argTypes: {
@@ -30,7 +30,7 @@ const meta: ComponentMeta< typeof ColorPicker > = {
 };
 export default meta;
 
-const Template: Story< typeof ColorPicker > = ( { onChange, ...props } ) => {
+const Template: StoryFn< typeof ColorPicker > = ( { onChange, ...props } ) => {
 	const [ color, setColor ] = useState< string | undefined >();
 
 	return (

package/src/color-picker/style.native.scss

@@ -62,3 +62,26 @@
 .pickerPointer {
 	height: 16px;
 }
+
+.hsv-container {
+	justify-content: center;
+	align-items: center;
+}
+
+.gradient-gontainer {
+	overflow: hidden;
+}
+
+.saturation-slider {
+	top: 0;
+	left: 0;
+	position: absolute;
+	border-color: $white;
+}
+
+.hue-slider {
+	position: absolute;
+	background-color: #fff;
+	box-shadow: 0 7px 10px rgba(0, 0, 0, 0.5);
+	z-index: 5;
+}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -22,7 +22,7 @@ const countries = [
 	{ name: 'American Samoa', code: 'AS' },
 ];
 
-const meta: ComponentMeta< typeof ComboboxControl > = {
+const meta: Meta< typeof ComboboxControl > = {
 	title: 'Components/ComboboxControl',
 	component: ComboboxControl,
 	argTypes: {
@@ -43,7 +43,7 @@ const mapCountryOption = ( country: ( typeof countries )[ number ] ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-const Template: ComponentStory< typeof ComboboxControl > = ( {
+const Template: StoryFn< typeof ComboboxControl > = ( {
 	onChange,
 	...args
 } ) => {

package/src/custom-gradient-picker/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
  */
 import CustomGradientPicker from '../';
 
-const meta: ComponentMeta< typeof CustomGradientPicker > = {
+const meta: Meta< typeof CustomGradientPicker > = {
 	title: 'Components/CustomGradientPicker',
 	component: CustomGradientPicker,
 	parameters: {
@@ -23,7 +23,7 @@ const meta: ComponentMeta< typeof CustomGradientPicker > = {
 };
 export default meta;
 
-const CustomGradientPickerWithState: ComponentStory<
+const CustomGradientPickerWithState: StoryFn<
 	typeof CustomGradientPicker
 > = ( { onChange, ...props } ) => {
 	const [ gradient, setGradient ] = useState< string >();