@wordpress/components 19.6.1-next.a55ed9455a.0 → 19.7.0

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 import type { SyntheticEvent } from 'react';
 
 /**
@@ -38,27 +37,6 @@ function mergeInitialState(
 	} as InputState;
 }
 
-/**
- * Composes multiple stateReducers into a single stateReducer, building
- * the pipeline to control the flow for state and actions.
- *
- * @param  fns State reducers.
- * @return The single composed stateReducer.
- */
-export const composeStateReducers = (
-	...fns: StateReducer[]
-): StateReducer => {
-	return ( ...args ) => {
-		return fns.reduceRight( ( state, fn ) => {
-			// TODO: Assess whether this can be replaced with a more standard `compose` implementation
-			// like wp.data.compose() (aka lodash flowRight) or Redux compose().
-			// The current implementation only works by functions mutating the original state object.
-			const fnState = fn( ...args );
-			return isEmpty( fnState ) ? state : { ...state, ...fnState };
-		}, {} as InputState );
-	};
-};
-
 /**
  * Creates a reducer that opens the channel for external state subscription
  * and modification.
@@ -122,11 +100,6 @@ function inputControlStateReducer(
 				nextState.value = action.payload.value || state.initialValue;
 				break;
 
-			case actions.UPDATE:
-				nextState.value = action.payload.value;
-				nextState.isDirty = false;
-				break;
-
 			/**
 			 * Validation
 			 */
@@ -219,7 +192,6 @@ export function useInputControlStateReducer(
 		dispatch( { type: actions.INVALIDATE, payload: { error, event } } );
 	const reset = createChangeEvent( actions.RESET );
 	const commit = createChangeEvent( actions.COMMIT );
-	const update = createChangeEvent( actions.UPDATE );
 
 	const dragStart = createDragEvent( actions.DRAG_START );
 	const drag = createDragEvent( actions.DRAG );
@@ -242,6 +214,5 @@ export function useInputControlStateReducer(
 		pressUp,
 		reset,
 		state,
-		update,
 	} as const;
 }

package/src/input-control/types.ts

@@ -6,6 +6,7 @@ import type {
 	ReactNode,
 	ChangeEvent,
 	SyntheticEvent,
+	PointerEvent,
 } from 'react';
 import type { useDrag } from '@use-gesture/react';
 
@@ -33,7 +34,7 @@ interface BaseProps {
 }
 
 export type InputChangeCallback<
-	E = ChangeEvent< HTMLInputElement >,
+	E = ChangeEvent< HTMLInputElement > | PointerEvent< HTMLInputElement >,
 	P = {}
 > = ( nextValue: string | undefined, extra: { event: E } & P ) => void;
 

package/src/mobile/image/style.native.scss

@@ -89,6 +89,7 @@
 	color: #fff;
 	font-size: 14;
 	margin-top: 5;
+	text-align: center;
 }
 
 .editContainer {

package/src/number-control/README.md

@@ -97,6 +97,20 @@ The minimum `value` allowed.
 -   Required: No
 -   Default: `-Infinity`
 
+### onChange
+
+Callback fired whenever the value of the input changes.
+
+The callback receives two arguments:
+
+1. `newValue`: the new value of the input
+2. `extra`: an object containing, under the `event` key, the original browser event.
+
+Note that the value received as the first argument of the callback is _not_ guaranteed to be a valid value (e.g. it could be outside of the range defined by the [`min`, `max`] props, or it could not match the `step`). In order to check the value's validity, check the `event.target?.validity.valid` property from the callback's second argument.
+
+-   Type: `(newValue, extra) => void`
+-   Required: No
+
 ### required
 
 If `true` enforces a valid number within the control's min/max range. If `false` allows an empty string as a valid value.

package/src/number-control/index.js

@@ -15,13 +15,12 @@ import { isRTL } from '@wordpress/i18n';
  */
 import { Input } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
-import { composeStateReducers } from '../input-control/reducer/reducer';
 import { add, subtract, roundClamp } from '../utils/math';
 import { isValueEmpty } from '../utils/values';
 
 export function NumberControl(
 	{
-		__unstableStateReducer: stateReducer = ( state ) => state,
+		__unstableStateReducer: stateReducerProp,
 		className,
 		dragDirection = 'n',
 		hideHTMLArrows = false,
@@ -62,9 +61,11 @@ export function NumberControl(
 	 * @return {Object} The updated state to apply to InputControl
 	 */
 	const numberControlStateReducer = ( state, action ) => {
+		const nextState = { ...state };
+
 		const { type, payload } = action;
 		const event = payload?.event;
-		const currentValue = state.value;
+		const currentValue = nextState.value;
 
 		/**
 		 * Handles custom UP and DOWN Keyboard events
@@ -94,7 +95,7 @@ export function NumberControl(
 				nextValue = subtract( nextValue, incrementalValue );
 			}
 
-			state.value = constrainValue(
+			nextState.value = constrainValue(
 				nextValue,
 				enableShift ? incrementalValue : null
 			);
@@ -139,7 +140,7 @@ export function NumberControl(
 				delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
 				const distance = delta * modifier * directionModifier;
 
-				state.value = constrainValue(
+				nextState.value = constrainValue(
 					add( currentValue, distance ),
 					enableShift ? modifier : null
 				);
@@ -147,7 +148,7 @@ export function NumberControl(
 		}
 
 		/**
-		 * Handles commit (ENTER key press or on blur if isPressEnterToChange)
+		 * Handles commit (ENTER key press or blur)
 		 */
 		if (
 			type === inputControlActionTypes.PRESS_ENTER ||
@@ -155,12 +156,12 @@ export function NumberControl(
 		) {
 			const applyEmptyValue = required === false && currentValue === '';
 
-			state.value = applyEmptyValue
+			nextState.value = applyEmptyValue
 				? currentValue
 				: constrainValue( currentValue );
 		}
 
-		return state;
+		return nextState;
 	};
 
 	return (
@@ -180,10 +181,10 @@ export function NumberControl(
 			step={ step }
 			type={ typeProp }
 			value={ valueProp }
-			__unstableStateReducer={ composeStateReducers(
-				numberControlStateReducer,
-				stateReducer
-			) }
+			__unstableStateReducer={ ( state, action ) => {
+				const baseState = numberControlStateReducer( state, action );
+				return stateReducerProp?.( baseState, action ) ?? baseState;
+			} }
 		/>
 	);
 }

package/src/number-control/stories/index.js

@@ -23,6 +23,7 @@ export default {
 
 function Example() {
 	const [ value, setValue ] = useState( '0' );
+	const [ isValidValue, setIsValidValue ] = useState( true );
 
 	const props = {
 		disabled: boolean( 'disabled', false ),
@@ -32,18 +33,24 @@ function Example() {
 		label: text( 'label', 'Number' ),
 		min: number( 'min', 0 ),
 		max: number( 'max', 100 ),
-		placeholder: text( 'placeholder', 0 ),
+		placeholder: text( 'placeholder', '0' ),
 		required: boolean( 'required', false ),
 		shiftStep: number( 'shiftStep', 10 ),
-		step: text( 'step', 1 ),
+		step: text( 'step', '1' ),
 	};
 
 	return (
-		<NumberControl
-			{ ...props }
-			value={ value }
-			onChange={ ( v ) => setValue( v ) }
-		/>
+		<>
+			<NumberControl
+				{ ...props }
+				value={ value }
+				onChange={ ( v, extra ) => {
+					setValue( v );
+					setIsValidValue( extra.event.target.validity.valid );
+				} }
+			/>
+			<p>Is valid? { isValidValue ? 'Yes' : 'No' }</p>
+		</>
 	);
 }
 

package/src/number-control/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -63,6 +63,68 @@ describe( 'NumberControl', () => {
 
 			expect( spy ).toHaveBeenCalledWith( '10' );
 		} );
+
+		it( 'should call onChange callback when value is clamped on blur', async () => {
+			const spy = jest.fn();
+			render(
+				<NumberControl
+					value={ 5 }
+					min={ 4 }
+					max={ 10 }
+					onChange={ ( v ) => spy( v ) }
+				/>
+			);
+
+			const input = getInput();
+			input.focus();
+			fireEvent.change( input, { target: { value: 1 } } );
+
+			// Before blurring, the value is still un-clamped
+			expect( input.value ).toBe( '1' );
+
+			input.blur();
+
+			// After blur, value is clamped
+			expect( input.value ).toBe( '4' );
+
+			// After the blur, the `onChange` callback fires asynchronously.
+			await waitFor( () => {
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( spy ).toHaveBeenNthCalledWith( 1, '1' );
+				expect( spy ).toHaveBeenNthCalledWith( 2, 4 );
+			} );
+		} );
+
+		it( 'should call onChange callback when value is not valid', () => {
+			const spy = jest.fn();
+			render(
+				<NumberControl
+					value={ 5 }
+					min={ 1 }
+					max={ 10 }
+					onChange={ ( v, extra ) =>
+						spy( v, extra.event.target.validity.valid )
+					}
+				/>
+			);
+
+			const input = getInput();
+			input.focus();
+			fireEvent.change( input, { target: { value: 14 } } );
+
+			expect( input.value ).toBe( '14' );
+
+			fireKeyDown( { keyCode: ENTER } );
+
+			expect( input.value ).toBe( '10' );
+
+			expect( spy ).toHaveBeenCalledTimes( 2 );
+
+			// First call: invalid, unclamped value
+			expect( spy ).toHaveBeenNthCalledWith( 1, '14', false );
+			// Second call: valid, clamped value
+			expect( spy ).toHaveBeenNthCalledWith( 2, 10, true );
+		} );
 	} );
 
 	describe( 'Validation', () => {
@@ -82,6 +144,22 @@ describe( 'NumberControl', () => {
 			expect( input.value ).toBe( '0' );
 		} );
 
+		it( 'should clamp value within range on blur', () => {
+			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
+
+			const input = getInput();
+			input.focus();
+			fireEvent.change( input, { target: { value: 41 } } );
+
+			// Before blurring, the value is still un-clamped
+			expect( input.value ).toBe( '41' );
+
+			input.blur();
+
+			// After blur, value is clamped
+			expect( input.value ).toBe( '10' );
+		} );
+
 		it( 'should parse to number value on ENTER keypress when required', () => {
 			render( <NumberControl value={ 5 } required={ true } /> );
 

package/src/range-control/stories/index.js

@@ -1,145 +1,128 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { boolean, number, text } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { wordpress } from '@wordpress/icons';
+import { styles, wordpress } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import RangeControl from '../index';
-import { COLORS } from '../../utils';
+
+const ICONS = { styles, wordpress };
 
 export default {
 	title: 'Components/RangeControl',
 	component: RangeControl,
+	argTypes: {
+		afterIcon: {
+			control: { type: 'select' },
+			options: Object.keys( ICONS ),
+			mapping: ICONS,
+		},
+		allowReset: { control: { type: 'boolean' } },
+		beforeIcon: {
+			control: { type: 'select' },
+			options: Object.keys( ICONS ),
+			mapping: ICONS,
+		},
+		color: { control: { type: 'color' } },
+		disabled: { control: { type: 'boolean' } },
+		help: { control: { type: 'text' } },
+		initialPosition: { control: { type: 'number' } },
+		marks: { control: { type: 'object' } },
+		min: { control: { type: 'number' } },
+		max: { control: { type: 'number' } },
+		railColor: { control: { type: 'color' } },
+		showTooltip: { control: { type: 'boolean' } },
+		step: { control: { type: 'number' } },
+		trackColor: { control: { type: 'color' } },
+		withInputField: { control: { type: 'boolean' } },
+	},
 	parameters: {
-		knobs: { disable: false },
+		docs: { source: { state: 'open' } },
 	},
 };
 
 const RangeControlWithState = ( props ) => {
-	const initialValue = props.value === undefined ? 5 : props.value;
-	const [ value, setValue ] = useState( initialValue );
+	const [ value, setValue ] = useState();
 
 	return <RangeControl { ...props } value={ value } onChange={ setValue } />;
 };
 
-const DefaultExample = () => {
-	const [ value, setValue ] = useState( undefined );
-
-	const showBeforeIcon = boolean( 'beforeIcon', false );
-	const showAfterIcon = boolean( 'afterIcon', false );
-
-	const props = {
-		afterIcon: showAfterIcon ? wordpress : undefined,
-		allowReset: boolean( 'allowReset', false ),
-		beforeIcon: showBeforeIcon ? wordpress : undefined,
-		color: text( 'color', COLORS.ui.theme ),
-		disabled: boolean( 'disabled', false ),
-		help: text( 'help', '' ),
-		label: text( 'label', 'Range Label' ),
-		marks: boolean( 'marks', false ),
-		max: number( 'max', 100 ),
-		min: number( 'min', 0 ),
-		showTooltip: boolean( 'showTooltip', false ),
-		step: text( 'step', 1 ),
-		railColor: text( 'railColor', null ),
-		trackColor: text( 'trackColor', null ),
-		withInputField: boolean( 'withInputField', true ),
-		value,
-		onChange: setValue,
-	};
-
-	return (
-		<Wrapper>
-			<RangeControl { ...props } />
-		</Wrapper>
-	);
-};
-
-const RangeControlLabeledByMarksType = ( props ) => {
-	const label = Array.isArray( props.marks ) ? 'Custom' : 'Automatic';
-	return <RangeControl { ...{ ...props, label } } />;
+export const Default = RangeControlWithState.bind( {} );
+Default.args = {
+	label: 'Range label',
 };
 
-export const _default = () => {
-	return <DefaultExample />;
+/**
+ * The `initialPosition` prop sets the starting position of the slider when no `value` is provided.
+ */
+export const InitialValueZero = RangeControlWithState.bind( {} );
+InitialValueZero.args = {
+	...Default.args,
+	initialPosition: 0,
+	max: 20,
 };
 
-export const InitialValueZero = () => {
-	const label = text( 'Label', 'How many columns should this use?' );
+/**
+ * Setting the `step` prop to `"any"` will allow users to select non-integer values.
+ * This also overrides both `withInputField` and `showTooltip` props to `false`.
+ */
+export const WithAnyStep = ( props ) => {
+	const [ value, setValue ] = useState( 1.2345 );
 
 	return (
-		<RangeControlWithState
-			initialPosition={ 0 }
-			label={ label }
-			max={ 20 }
-			min={ 0 }
-			value={ null }
-		/>
+		<>
+			<RangeControl value={ value } onChange={ setValue } { ...props } />
+			<p>Current value: { value }</p>
+		</>
 	);
 };
-
-export const withAnyStep = () => {
-	return <RangeControlWithState label="Brightness" step="any" />;
+WithAnyStep.args = {
+	label: 'Brightness',
+	step: 'any',
 };
 
-export const withHelp = () => {
-	const label = text( 'Label', 'How many columns should this use?' );
-	const help = text(
-		'Help Text',
-		'Please select the number of columns you would like this to contain.'
-	);
-
-	return <RangeControlWithState label={ label } help={ help } />;
+export const WithHelp = RangeControlWithState.bind( {} );
+WithHelp.args = {
+	...Default.args,
+	label: 'How many columns should this use?',
+	help: 'Please select the number of columns you would like this to contain.',
 };
 
-export const withMinimumAndMaximumLimits = () => {
-	const label = text( 'Label', 'How many columns should this use?' );
-	const min = number( 'Min Value', 2 );
-	const max = number( 'Max Value', 10 );
-
-	return <RangeControlWithState label={ label } min={ min } max={ max } />;
+/**
+ * Set `min` and `max` values to constrain the range of allowed values.
+ */
+export const WithMinimumAndMaximumLimits = RangeControlWithState.bind( {} );
+WithMinimumAndMaximumLimits.args = {
+	...Default.args,
+	min: 2,
+	max: 10,
 };
 
-export const withIconBefore = () => {
-	const label = text( 'Label', 'How many columns should this use?' );
-	const showIcon = boolean( 'icon', true );
-
-	return (
-		<RangeControlWithState
-			label={ label }
-			beforeIcon={ showIcon ? wordpress : undefined }
-		/>
-	);
+export const WithIconBefore = RangeControlWithState.bind( {} );
+WithIconBefore.args = {
+	...Default.args,
+	beforeIcon: wordpress,
 };
 
-export const withIconAfter = () => {
-	const label = text( 'Label', 'How many columns should this use?' );
-	const showIcon = boolean( 'icon', true );
-
-	return (
-		<RangeControlWithState
-			label={ label }
-			afterIcon={ showIcon ? wordpress : undefined }
-		/>
-	);
+export const WithIconAfter = RangeControlWithState.bind( {} );
+WithIconAfter.args = {
+	...Default.args,
+	afterIcon: wordpress,
 };
 
-export const withReset = () => {
-	const label = text( 'Label', 'How many columns should this use?' );
-
-	return <RangeControlWithState label={ label } allowReset />;
+export const WithReset = RangeControlWithState.bind( {} );
+WithReset.args = {
+	...Default.args,
+	allowReset: true,
 };
 
-export const marks = () => {
+/**
+ * Use `marks` to render a visual representation of `step` ticks. Custom mark indicators can be provided by an `Array`.
+ */
+export const WithMarks = ( props ) => {
 	const marksBase = [
 		{ value: 0, label: '0' },
 		{ value: 1, label: '1' },
@@ -164,11 +147,15 @@ export const marks = () => {
 	const minNegative = { min: -10, max: 10, step: 1 };
 	const rangeNegative = { min: -10, max: -1, step: 1 };
 
-	// Use a short alias to keep formatting to fewer lines.
-	const Range = RangeControlLabeledByMarksType;
+	const Range = ( localProps ) => {
+		const label = Array.isArray( localProps.marks )
+			? 'Custom'
+			: 'Automatic';
+		return <RangeControl { ...{ ...localProps, ...props, label } } />;
+	};
 
 	return (
-		<Wrapper>
+		<>
 			<h2>Integer Step</h2>
 			<Range marks { ...stepInteger } />
 			<Range marks={ marksBase } { ...stepInteger } />
@@ -188,21 +175,6 @@ export const marks = () => {
 			<h2>Any Step</h2>
 			<Range marks { ...{ ...stepInteger, step: 'any' } } />
 			<Range marks={ marksBase } { ...{ ...stepInteger, step: 'any' } } />
-		</Wrapper>
+		</>
 	);
 };
-
-export const multiple = () => {
-	return (
-		<Wrapper>
-			<RangeControlWithState />
-			<RangeControlWithState />
-			<RangeControlWithState />
-			<RangeControlWithState />
-		</Wrapper>
-	);
-};
-
-const Wrapper = styled.div`
-	padding: 60px 40px;
-`;

package/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js

@@ -48,5 +48,6 @@ export const LabelText = styled( Text )`
 		display: block;
 		font-size: 13px;
 		line-height: 1.4;
+		white-space: nowrap;
 	}
 `;

package/src/toggle-group-control/test/__snapshots__/index.js.snap

@@ -122,21 +122,6 @@ exports[`ToggleGroupControl should render correctly 1`] = `
 .emotion-11 {
   font-size: 13px;
   line-height: 1;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate( -50%, -50% );
-  -moz-transform: translate( -50%, -50% );
-  -ms-transform: translate( -50%, -50% );
-  transform: translate( -50%, -50% );
-}
-
-.emotion-13 {
-  font-size: 13px;
-  font-weight: bold;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
 }
 
 <div
@@ -180,12 +165,6 @@ exports[`ToggleGroupControl should render correctly 1`] = `
           >
             R
           </div>
-          <div
-            aria-hidden="true"
-            class="emotion-13 emotion-14"
-          >
-            R
-          </div>
         </button>
       </div>
       <div
@@ -208,12 +187,6 @@ exports[`ToggleGroupControl should render correctly 1`] = `
           >
             J
           </div>
-          <div
-            aria-hidden="true"
-            class="emotion-13 emotion-14"
-          >
-            J
-          </div>
         </button>
       </div>
     </div>

package/src/toggle-group-control/toggle-group-control-option/component.tsx

@@ -24,7 +24,7 @@ import * as styles from './styles';
 import { useCx } from '../../utils/hooks';
 import Tooltip from '../../tooltip';
 
-const { ButtonContentView, LabelPlaceholderView, LabelView } = styles;
+const { ButtonContentView, LabelView } = styles;
 
 const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
 	if ( showTooltip && text ) {
@@ -88,9 +88,6 @@ function ToggleGroupControlOption(
 					value={ value }
 				>
 					<ButtonContentView>{ label }</ButtonContentView>
-					<LabelPlaceholderView aria-hidden>
-						{ label }
-					</LabelPlaceholderView>
 				</Radio>
 			</WithToolTip>
 		</LabelView>