@wordpress/components 19.10.0 → 19.13.0

package/src/input-control/reducer/reducer.ts

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import type { SyntheticEvent } from 'react';
+import type { SyntheticEvent, ChangeEvent, PointerEvent } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { useReducer } from '@wordpress/element';
+import { useReducer, useLayoutEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,6 +18,7 @@ import {
 	initialStateReducer,
 } from './state';
 import * as actions from './actions';
+import type { InputChangeCallback } from '../types';
 
 /**
  * Prepares initialState for the reducer.
@@ -108,9 +109,7 @@ function inputControlStateReducer(
 				break;
 		}
 
-		if ( action.payload.event ) {
-			nextState._event = action.payload.event;
-		}
+		nextState._event = action.payload.event;
 
 		/**
 		 * Send the nextState + action to the composedReducers via
@@ -131,58 +130,44 @@ function inputControlStateReducer(
  * This technique uses the "stateReducer" design pattern:
  * https://kentcdodds.com/blog/the-state-reducer-pattern/
  *
- * @param  stateReducer An external state reducer.
- * @param  initialState The initial state for the reducer.
+ * @param  stateReducer    An external state reducer.
+ * @param  initialState    The initial state for the reducer.
+ * @param  onChangeHandler A handler for the onChange event.
  * @return State, dispatch, and a collection of actions.
  */
 export function useInputControlStateReducer(
 	stateReducer: StateReducer = initialStateReducer,
-	initialState: Partial< InputState > = initialInputControlState
+	initialState: Partial< InputState > = initialInputControlState,
+	onChangeHandler: InputChangeCallback
 ) {
 	const [ state, dispatch ] = useReducer< StateReducer >(
 		inputControlStateReducer( stateReducer ),
 		mergeInitialState( initialState )
 	);
 
-	const createChangeEvent = ( type: actions.ChangeEventAction[ 'type' ] ) => (
-		nextValue: actions.ChangeEventAction[ 'payload' ][ 'value' ],
-		event: actions.ChangeEventAction[ 'payload' ][ 'event' ]
-	) => {
-		/**
-		 * Persist allows for the (Synthetic) event to be used outside of
-		 * this function call.
-		 * https://reactjs.org/docs/events.html#event-pooling
-		 */
-		if ( event && event.persist ) {
-			event.persist();
-		}
-
-		dispatch( {
-			type,
-			payload: { value: nextValue, event },
-		} as actions.InputAction );
-	};
-
-	const createKeyEvent = ( type: actions.KeyEventAction[ 'type' ] ) => (
-		event: actions.KeyEventAction[ 'payload' ][ 'event' ]
-	) => {
-		/**
-		 * Persist allows for the (Synthetic) event to be used outside of
-		 * this function call.
-		 * https://reactjs.org/docs/events.html#event-pooling
-		 */
-		if ( event && event.persist ) {
-			event.persist();
-		}
-
-		dispatch( { type, payload: { event } } );
-	};
-
-	const createDragEvent = ( type: actions.DragEventAction[ 'type' ] ) => (
-		payload: actions.DragEventAction[ 'payload' ]
-	) => {
-		dispatch( { type, payload } );
-	};
+	const createChangeEvent =
+		( type: actions.ChangeEventAction[ 'type' ] ) =>
+		(
+			nextValue: actions.ChangeEventAction[ 'payload' ][ 'value' ],
+			event: actions.ChangeEventAction[ 'payload' ][ 'event' ]
+		) => {
+			dispatch( {
+				type,
+				payload: { value: nextValue, event },
+			} as actions.InputAction );
+		};
+
+	const createKeyEvent =
+		( type: actions.KeyEventAction[ 'type' ] ) =>
+		( event: actions.KeyEventAction[ 'payload' ][ 'event' ] ) => {
+			dispatch( { type, payload: { event } } );
+		};
+
+	const createDragEvent =
+		( type: actions.DragEventAction[ 'type' ] ) =>
+		( payload: actions.DragEventAction[ 'payload' ] ) => {
+			dispatch( { type, payload } );
+		};
 
 	/**
 	 * Actions for the reducer
@@ -201,6 +186,37 @@ export function useInputControlStateReducer(
 	const pressDown = createKeyEvent( actions.PRESS_DOWN );
 	const pressEnter = createKeyEvent( actions.PRESS_ENTER );
 
+	const currentState = useRef( state );
+	const refProps = useRef( { value: initialState.value, onChangeHandler } );
+	useLayoutEffect( () => {
+		currentState.current = state;
+		refProps.current = { value: initialState.value, onChangeHandler };
+	} );
+	useLayoutEffect( () => {
+		if (
+			currentState.current._event !== undefined &&
+			state.value !== refProps.current.value &&
+			! state.isDirty
+		) {
+			refProps.current.onChangeHandler( state.value ?? '', {
+				event: currentState.current._event as
+					| ChangeEvent< HTMLInputElement >
+					| PointerEvent< HTMLInputElement >,
+			} );
+		}
+	}, [ state.value, state.isDirty ] );
+	useLayoutEffect( () => {
+		if (
+			initialState.value !== currentState.current.value &&
+			! currentState.current.isDirty
+		) {
+			dispatch( {
+				type: actions.RESET,
+				payload: { value: initialState.value },
+			} );
+		}
+	}, [ initialState.value ] );
+
 	return {
 		change,
 		commit,

package/src/input-control/reducer/state.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Reducer } from 'react';
+import type { Reducer, SyntheticEvent } from 'react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { Reducer } from 'react';
 import type { InputAction } from './actions';
 
 export interface InputState {
-	_event: Event | {};
+	_event?: SyntheticEvent;
 	error: unknown;
 	initialValue?: string;
 	isDirty: boolean;
@@ -24,7 +24,6 @@ export type StateReducer = Reducer< InputState, InputAction >;
 export const initialStateReducer: StateReducer = ( state: InputState ) => state;
 
 export const initialInputControlState: InputState = {
-	_event: {},
 	error: null,
 	initialValue: '',
 	isDirty: false,

package/src/input-control/utils.ts

@@ -1,7 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { FocusEventHandler } from 'react';
+
 /**
  * WordPress dependencies
  */
-import { useEffect } from '@wordpress/element';
+import {
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { InputChangeCallback } from './types';
 
 /**
  * Gets a CSS cursor value based on a drag direction.
@@ -48,7 +63,46 @@ export function useDragCursor(
 			// @ts-expect-error
 			document.documentElement.style.cursor = null;
 		}
-	}, [ isDragging ] );
+	}, [ isDragging, dragCursor ] );
 
 	return dragCursor;
 }
+
+export function useDraft( props: {
+	value: string | undefined;
+	onBlur?: FocusEventHandler;
+	onChange: InputChangeCallback;
+} ) {
+	const refPreviousValue = useRef( props.value );
+	const [ draft, setDraft ] = useState< {
+		value?: string;
+		isStale?: boolean;
+	} >( {} );
+	const value = draft.value !== undefined ? draft.value : props.value;
+
+	// Determines when to discard the draft value to restore controlled status.
+	// To do so, it tracks the previous value and marks the draft value as stale
+	// after each render.
+	useLayoutEffect( () => {
+		const { current: previousValue } = refPreviousValue;
+		refPreviousValue.current = props.value;
+		if ( draft.value !== undefined && ! draft.isStale )
+			setDraft( { ...draft, isStale: true } );
+		else if ( draft.isStale && props.value !== previousValue )
+			setDraft( {} );
+	}, [ props.value, draft ] );
+
+	const onChange: InputChangeCallback = ( nextValue, extra ) => {
+		// Mutates the draft value to avoid an extra effect run.
+		setDraft( ( current ) =>
+			Object.assign( current, { value: nextValue, isStale: false } )
+		);
+		props.onChange( nextValue, extra );
+	};
+	const onBlur: FocusEventHandler = ( event ) => {
+		setDraft( {} );
+		props.onBlur?.( event );
+	};
+
+	return { value, onBlur, onChange };
+}

package/src/item-group/stories/index.js

@@ -21,7 +21,7 @@ import { useCx } from '../../utils';
 import { ItemGroup, Item } from '..';
 import Button from '../../button';
 import { FlexItem, FlexBlock } from '../../flex';
-import { Flyout } from '../../flyout';
+import Dropdown from '../../dropdown';
 import { HStack } from '../../h-stack';
 import Icon from '../../icon';
 import { Text } from '../../text';
@@ -57,7 +57,8 @@ export const _default = () => {
 		size: select(
 			'Item 1: size',
 			{
-				'unset (defaults to the value set on the <ItemGroup> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <ItemGroup> parent)':
+					PROP_UNSET,
 				small: 'small',
 				medium: 'medium',
 				large: 'large',
@@ -90,23 +91,27 @@ export const _default = () => {
 };
 
 export const dropdown = () => (
-	<Flyout
-		style={ { width: '350px' } }
-		trigger={ <Button>Open Popover</Button> }
-	>
-		<ItemGroup style={ { padding: 4 } }>
-			<Item>Code is Poetry (no click handlers)</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-		</ItemGroup>
-	</Flyout>
+	<Dropdown
+		renderToggle={ ( { isOpen, onToggle } ) => (
+			<Button onClick={ onToggle } aria-expanded={ isOpen }>
+				Open Popover
+			</Button>
+		) }
+		renderContent={ () => (
+			<ItemGroup style={ { minWidth: 350, padding: 4 } }>
+				<Item>Code is Poetry (no click handlers)</Item>
+				<Item onClick={ () => alert( 'WordPress.org' ) }>
+					Code is Poetry — Click me!
+				</Item>
+				<Item onClick={ () => alert( 'WordPress.org' ) }>
+					Code is Poetry — Click me!
+				</Item>
+				<Item onClick={ () => alert( 'WordPress.org' ) }>
+					Code is Poetry — Click me!
+				</Item>
+			</ItemGroup>
+		) }
+	/>
 );
 
 const SimpleColorSwatch = ( { color, style } ) => (

package/src/menu-item/test/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { shallow } from 'enzyme';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,6 +13,8 @@ import { more } from '@wordpress/icons';
  */
 import { MenuItem } from '../';
 
+const noop = () => {};
+
 describe( 'MenuItem', () => {
 	it( 'should match snapshot when only label provided', () => {
 		const wrapper = shallow( <MenuItem>My item</MenuItem> );

package/src/menu-items-choice/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,6 +8,8 @@ import { check } from '@wordpress/icons';
  */
 import MenuItem from '../menu-item';
 
+const noop = () => {};
+
 export default function MenuItemsChoice( {
 	choices = [],
 	onHover = noop,

package/src/mobile/bottom-sheet/bottom-sheet-context.native.js

@@ -36,7 +36,5 @@ export const BottomSheetContext = createContext( {
 	setIsFullScreen: () => {},
 } );
 
-export const {
-	Provider: BottomSheetProvider,
-	Consumer: BottomSheetConsumer,
-} = BottomSheetContext;
+export const { Provider: BottomSheetProvider, Consumer: BottomSheetConsumer } =
+	BottomSheetContext;

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

@@ -69,7 +69,7 @@ const BottomSheetNavigationScreen = ( {
 			 * Ideally, we refactor onHandleHardwareButtonPress to manage multiple
 			 * callbacks triggered based upon which screen is currently active.
 			 *
-			 * Related: https://git.io/JD2no
+			 * Related: https://github.com/WordPress/gutenberg/pull/36328#discussion_r768897546
 			 */
 		}, [] )
 	);

package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js

@@ -108,7 +108,7 @@ it( 'animates height transitioning from full-screen to non-full-screen', async (
 	);
 	// Navigate to screen 1
 	fireEvent.press(
-		// Use custom waitFor due to https://git.io/JYYGE
+		// Use custom waitFor due to https://github.com/callstack/react-native-testing-library/issues/379
 		await waitFor( () => screen.getByText( /test-screen-2/ ) )
 	);
 	// Await navigation screen to allow async state updates to complete

package/src/mobile/bottom-sheet/cell.native.js

@@ -37,9 +37,8 @@ class BottomSheetCell extends Component {
 			isScreenReaderEnabled: false,
 		};
 
-		this.handleScreenReaderToggled = this.handleScreenReaderToggled.bind(
-			this
-		);
+		this.handleScreenReaderToggled =
+			this.handleScreenReaderToggled.bind( this );
 
 		this.isCurrent = false;
 	}

package/src/mobile/bottom-sheet/cycle-picker-cell.native.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { findIndex } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -14,7 +10,9 @@ export default function BottomSheetCyclePickerCell( props ) {
 		return options[ ( selectedOptionIndex + 1 ) % options.length ].value;
 	};
 
-	const selectedOptionIndex = findIndex( options, [ 'value', value ] );
+	const selectedOptionIndex = options.findIndex(
+		( option ) => option.value === value
+	);
 	const optionsContainsValue =
 		options.length > 0 && selectedOptionIndex !== -1;
 

package/src/mobile/bottom-sheet/index.native.js

@@ -55,22 +55,19 @@ class BottomSheet extends Component {
 		this.isScrolling = this.isScrolling.bind( this );
 		this.onShouldEnableScroll = this.onShouldEnableScroll.bind( this );
 		this.onDismiss = this.onDismiss.bind( this );
-		this.onShouldSetBottomSheetMaxHeight = this.onShouldSetBottomSheetMaxHeight.bind(
-			this
-		);
+		this.onShouldSetBottomSheetMaxHeight =
+			this.onShouldSetBottomSheetMaxHeight.bind( this );
 
 		this.setIsFullScreen = this.setIsFullScreen.bind( this );
 
 		this.onDimensionsChange = this.onDimensionsChange.bind( this );
 		this.onHeaderLayout = this.onHeaderLayout.bind( this );
 		this.onCloseBottomSheet = this.onCloseBottomSheet.bind( this );
-		this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind(
-			this
-		);
+		this.onHandleClosingBottomSheet =
+			this.onHandleClosingBottomSheet.bind( this );
 		this.onHardwareButtonPress = this.onHardwareButtonPress.bind( this );
-		this.onHandleHardwareButtonPress = this.onHandleHardwareButtonPress.bind(
-			this
-		);
+		this.onHandleHardwareButtonPress =
+			this.onHandleHardwareButtonPress.bind( this );
 		this.keyboardShow = this.keyboardShow.bind( this );
 		this.keyboardHide = this.keyboardHide.bind( this );
 
@@ -148,7 +145,7 @@ class BottomSheet extends Component {
 			// TODO: Reinstate animations, possibly replacing `LayoutAnimation` with
 			// more nuanced `Animated` usage or replacing our custom `BottomSheet`
 			// with `@gorhom/bottom-sheet`. This animation was disabled to avoid a
-			// preexisting bug: https://git.io/JMPCV
+			// preexisting bug: https://github.com/WordPress/gutenberg/issues/30562
 			// this.performRegularLayoutAnimation( {
 			// 	useLastLayoutAnimation: false,
 			// } );.
@@ -568,15 +565,15 @@ class BottomSheet extends Component {
 					>
 						<BottomSheetProvider
 							value={ {
-								shouldEnableBottomSheetScroll: this
-									.onShouldEnableScroll,
-								shouldEnableBottomSheetMaxHeight: this
-									.onShouldSetBottomSheetMaxHeight,
+								shouldEnableBottomSheetScroll:
+									this.onShouldEnableScroll,
+								shouldEnableBottomSheetMaxHeight:
+									this.onShouldSetBottomSheetMaxHeight,
 								isBottomSheetContentScrolling: isScrolling,
-								onHandleClosingBottomSheet: this
-									.onHandleClosingBottomSheet,
-								onHandleHardwareButtonPress: this
-									.onHandleHardwareButtonPress,
+								onHandleClosingBottomSheet:
+									this.onHandleClosingBottomSheet,
+								onHandleHardwareButtonPress:
+									this.onHandleHardwareButtonPress,
 								listProps,
 								setIsFullScreen: this.setIsFullScreen,
 								safeAreaBottomInset,

package/src/mobile/bottom-sheet/picker-cell.native.js

@@ -10,13 +10,8 @@ import Cell from './cell';
 import Picker from '../picker';
 
 export default function BottomSheetPickerCell( props ) {
-	const {
-		options,
-		hideCancelButton,
-		onChangeValue,
-		value,
-		...cellProps
-	} = props;
+	const { options, hideCancelButton, onChangeValue, value, ...cellProps } =
+		props;
 
 	let picker;
 

package/src/mobile/bottom-sheet/stepper-cell/index.native.js

@@ -30,13 +30,11 @@ class BottomSheetStepperCell extends Component {
 
 		this.announceValue = this.announceValue.bind( this );
 		this.onDecrementValue = this.onDecrementValue.bind( this );
-		this.onDecrementValuePressIn = this.onDecrementValuePressIn.bind(
-			this
-		);
+		this.onDecrementValuePressIn =
+			this.onDecrementValuePressIn.bind( this );
 		this.onIncrementValue = this.onIncrementValue.bind( this );
-		this.onIncrementValuePressIn = this.onIncrementValuePressIn.bind(
-			this
-		);
+		this.onIncrementValuePressIn =
+			this.onIncrementValuePressIn.bind( this );
 		this.onPressOut = this.onPressOut.bind( this );
 
 		const { value, defaultValue, min } = props;

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -57,11 +57,16 @@ const BottomSheetSelectControl = ( {
 					value={ selectedOption.label }
 					onPress={ openSubSheet }
 					accessibilityRole={ 'button' }
-					accessibilityLabel={ selectedOption.label }
+					accessibilityLabel={ sprintf(
+						// translators:  %1$s: Select control button label e.g. "Button width". %2$s: Select control option value e.g: "Auto, 25%".
+						__( '%1$s. Currently selected: %2$s' ),
+						label,
+						selectedOption.label
+					) }
 					accessibilityHint={ sprintf(
 						// translators: %s: Select control button label e.g. "Button width"
 						__( 'Navigates to select %s' ),
-						selectedOption.label
+						label
 					) }
 				>
 					<Icon icon={ chevronRight }></Icon>

package/src/mobile/color-settings/index.native.js

@@ -68,10 +68,8 @@ const ColorSettingsMemo = memo(
 );
 function ColorSettings( props ) {
 	const route = useRoute();
-	const {
-		onHandleClosingBottomSheet,
-		shouldEnableBottomSheetMaxHeight,
-	} = useContext( BottomSheetContext );
+	const { onHandleClosingBottomSheet, shouldEnableBottomSheetMaxHeight } =
+		useContext( BottomSheetContext );
 
 	return (
 		<ColorSettingsMemo

package/src/mobile/global-styles-context/index.native.js

@@ -83,12 +83,13 @@ export const useGlobalStyles = () => {
 	return globalStyles;
 };
 
-export const withGlobalStyles = ( WrappedComponent ) => ( props ) => (
-	<GlobalStylesContext.Consumer>
-		{ ( globalStyles ) => (
-			<WrappedComponent { ...props } globalStyles={ globalStyles } />
-		) }
-	</GlobalStylesContext.Consumer>
-);
+export const withGlobalStyles = ( WrappedComponent ) => ( props ) =>
+	(
+		<GlobalStylesContext.Consumer>
+			{ ( globalStyles ) => (
+				<WrappedComponent { ...props } globalStyles={ globalStyles } />
+			) }
+		</GlobalStylesContext.Consumer>
+	);
 
 export default GlobalStylesContext;

package/src/mobile/gradient/index.native.js

@@ -109,17 +109,20 @@ function Gradient( {
 	const { width = 0, height = 0 } = sizes || {};
 	const { isGradient, getGradientType, gradients } = colorsUtils;
 
-	const colorGroup = useMemo( () => getGradientColorGroup( gradientValue ), [
-		gradientValue,
-	] );
+	const colorGroup = useMemo(
+		() => getGradientColorGroup( gradientValue ),
+		[ gradientValue ]
+	);
 
-	const locations = useMemo( () => getColorLocations( colorGroup ), [
-		colorGroup,
-	] );
+	const locations = useMemo(
+		() => getColorLocations( colorGroup ),
+		[ colorGroup ]
+	);
 
-	const colors = useMemo( () => getGradientBaseColors( colorGroup ), [
-		colorGroup,
-	] );
+	const colors = useMemo(
+		() => getGradientBaseColors( colorGroup ),
+		[ colorGroup ]
+	);
 
 	if ( ! gradientValue || ! isGradient( gradientValue ) ) {
 		return null;

package/src/mobile/gradient/test/index.native.js

@@ -108,9 +108,7 @@ describe( 'getColorLocations', () => {
 			'linear-gradient(45deg, red, blue, green)'
 		);
 		expect( getColorLocations( colorGroup ) ).toStrictEqual( [
-			0,
-			0.5,
-			1,
+			0, 0.5, 1,
 		] );
 	} );
 } );