@wordpress/components 19.7.0-next.e230fbab09.0 → 19.7.0

package/src/toggle-group-control/toggle-group-control-option/styles.ts

@@ -61,24 +61,12 @@ export const buttonActive = css`
 export const ButtonContentView = styled.div`
 	font-size: ${ CONFIG.fontSize };
 	line-height: 1;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate( -50%, -50% );
 `;
 
 export const separatorActive = css`
 	background: transparent;
 `;
 
-export const LabelPlaceholderView = styled.div`
-	font-size: ${ CONFIG.fontSize };
-	font-weight: bold;
-	height: 0;
-	overflow: hidden;
-	visibility: hidden;
-`;
-
 export const medium = css`
 	min-height: ${ CONFIG.controlHeight };
 `;

package/src/toolbar-group/style.scss

@@ -64,76 +64,3 @@ div.components-toolbar {
 		}
 	}
 }
-
-// Size multiple sequential buttons to be optically balanced.
-// Icons are 36px, as set by a 24px icon and 12px padding.
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, // When a plugin adds to a slot, the segment has a `components-toolbar` class.
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot, // When no plugin adds to slots, the segment has a `components-toolbar-group` class.
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, // The nesting order is sometimes reversed.
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, // Targets unique markup for the "Replace" button.
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group { // Inline formatting tools use this class.
-
-	// Segments with just a single button.
-	> .components-button:first-child:last-child,
-	> .components-dropdown:first-child:last-child .components-button,
-	&.components-dropdown > .components-button.components-button, // Single segments where the dropdown is also the toolbar group (such as text align).
-	&.components-dropdown > * .components-button {
-		min-width: $block-toolbar-height;
-		padding-left: $grid-unit-15;
-		padding-right: $grid-unit-15;
-
-		&::before {
-			left: $grid-unit-10;
-			right: $grid-unit-10;
-		}
-	}
-
-	// First.
-	// @todo, this unnamed div only shows up when plugins add to slots. We should remove the fragment.
-	> .components-button:first-child,
-	> div:first-child > .components-button,
-	> .components-dropdown:first-child .components-button {
-		min-width: $block-toolbar-height - $grid-unit-15 * 0.5;
-		padding-left: $grid-unit-15 - $border-width;
-		padding-right: $grid-unit-15 * 0.5;
-
-		&::before {
-			left: $grid-unit-10;
-			right: 2px;
-		}
-	}
-
-	// Middle.
-	// @todo, this unnamed div only shows up when plugins add to slots. We should remove the fragment.
-	> .components-button,
-	> div > .components-button,
-	> .components-dropdown .components-button {
-		min-width: $block-toolbar-height - $grid-unit-15;
-		padding-left: $grid-unit-15 * 0.5; // 6px.
-		padding-right: $grid-unit-15 * 0.5;
-
-		svg {
-			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
-		}
-
-		&::before {
-			left: 2px;
-			right: 2px;
-		}
-	}
-
-	// Last.
-	// @todo, this unnamed div only shows up when plugins add to slots. We should remove the fragment.
-	> .components-button:last-child,
-	> div:last-child > .components-button,
-	> .components-dropdown:last-child .components-button {
-		min-width: $block-toolbar-height - $grid-unit-15 * 0.5;
-		padding-left: $grid-unit-15 * 0.5;
-		padding-right: $grid-unit-15 - $border-width;
-
-		&::before {
-			left: 2px;
-			right: $grid-unit-10;
-		}
-	}
-}

package/src/tree-grid/README.md

@@ -114,7 +114,7 @@ Aside from the documented callback functions, any props specified will be passed
 
 ###### onFocusRow( event: Event, startRow: HTMLElement, destinationRow: HTMLElement )
 
-Callback that fires when focus is shifted from one row to another via the UP and DOWN keys.
+Callback that fires when focus is shifted from one row to another via the Up and Down keys. Callback is also fired on Home and End keys which move focus from the beginning row to the end row.
 The callback is passed the event, the start row element that the focus was on originally, and
 the destination row element after the focus has moved.
 

package/src/tree-grid/index.js

@@ -275,6 +275,10 @@ function TreeGrid(
 				);
 				focusablesInNextRow[ nextIndex ].focus();
 
+				// Let consumers know the row that was originally focused,
+				// and the row that is now in focus.
+				onFocusRow( event, activeRow, rows[ nextRowIndex ] );
+
 				// Prevent key use for anything else. This ensures Voiceover
 				// doesn't try to handle key navigation.
 				event.preventDefault();

package/src/tree-grid/test/index.js

@@ -6,7 +6,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 /**
  * WordPress dependencies
  */
-import { LEFT, RIGHT, UP, DOWN } from '@wordpress/keycodes';
+import { LEFT, RIGHT, UP, DOWN, HOME, END } from '@wordpress/keycodes';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -68,10 +68,10 @@ describe( 'TreeGrid', () => {
 						level={ 1 }
 						positionInSet={ 1 }
 						setSize={ 3 }
-						isExpanded={ true }
+						isExpanded={ false }
 					>
 						<TreeGridCell withoutGridItem>
-							<TestButton>Row 1</TestButton>
+							<TestButton aria-expanded="false">Row 1</TestButton>
 						</TreeGridCell>
 					</TreeGridRow>
 					<TreeGridRow
@@ -88,7 +88,7 @@ describe( 'TreeGrid', () => {
 						level={ 1 }
 						positionInSet={ 3 }
 						setSize={ 3 }
-						isExpanded={ true }
+						isExpanded={ false }
 					>
 						<TreeGridCell withoutGridItem>
 							<TestButton>Row 3</TestButton>
@@ -97,16 +97,16 @@ describe( 'TreeGrid', () => {
 				</TreeGrid>
 			);
 
-			screen.getByText( 'Row 2' ).focus();
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
+			screen.getByText( 'Row 1' ).focus();
+			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
 
-			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
+			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'ArrowRight',
 				keyCode: RIGHT,
-				currentTarget: row2Element,
+				currentTarget: row1Element,
 			} );
 
-			expect( onExpandRow ).toHaveBeenCalledWith( row2Element );
+			expect( onExpandRow ).toHaveBeenCalledWith( row1Element );
 		} );
 	} );
 
@@ -120,17 +120,17 @@ describe( 'TreeGrid', () => {
 						level={ 1 }
 						positionInSet={ 1 }
 						setSize={ 3 }
-						isExpanded={ false }
+						isExpanded={ true }
 					>
 						<TreeGridCell withoutGridItem>
-							<TestButton>Row 1</TestButton>
+							<TestButton aria-expanded="true">Row 1</TestButton>
 						</TreeGridCell>
 					</TreeGridRow>
 					<TreeGridRow
 						level={ 1 }
 						positionInSet={ 2 }
 						setSize={ 3 }
-						isExpanded={ true }
+						isExpanded={ false }
 					>
 						<TreeGridCell withoutGridItem>
 							<TestButton>Row 2</TestButton>
@@ -149,16 +149,16 @@ describe( 'TreeGrid', () => {
 				</TreeGrid>
 			);
 
-			screen.getByText( 'Row 2' ).focus();
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
+			screen.getByText( 'Row 1' ).focus();
+			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
 
-			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
+			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'ArrowLeft',
 				keyCode: LEFT,
-				currentTarget: row2Element,
+				currentTarget: row1Element,
 			} );
 
-			expect( onCollapseRow ).toHaveBeenCalledWith( row2Element );
+			expect( onCollapseRow ).toHaveBeenCalledWith( row1Element );
 		} );
 	} );
 
@@ -205,6 +205,28 @@ describe( 'TreeGrid', () => {
 			);
 		} );
 
+		it( 'should call onFocusRow with event, start and end nodes when pressing End', () => {
+			const onFocusRow = jest.fn();
+			render( <TestTree onFocusRow={ onFocusRow } /> );
+
+			screen.getByText( 'Row 1' ).focus();
+
+			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
+
+			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
+				key: 'End',
+				keyCode: END,
+				currentTarget: row1Element,
+			} );
+
+			expect( onFocusRow ).toHaveBeenCalledWith(
+				expect.objectContaining( { key: 'End', keyCode: END } ),
+				row1Element,
+				row3Element
+			);
+		} );
+
 		it( 'should call onFocusRow with event, start and end nodes when pressing Up Arrow', () => {
 			const onFocusRow = jest.fn();
 			render( <TestTree onFocusRow={ onFocusRow } /> );
@@ -227,6 +249,28 @@ describe( 'TreeGrid', () => {
 			);
 		} );
 
+		it( 'should call onFocusRow with event, start and end nodes when pressing Home', () => {
+			const onFocusRow = jest.fn();
+			render( <TestTree onFocusRow={ onFocusRow } /> );
+
+			screen.getByText( 'Row 3' ).focus();
+
+			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
+			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+
+			fireEvent.keyDown( screen.getByText( 'Row 3' ), {
+				key: 'Home',
+				keyCode: HOME,
+				currentTarget: row3Element,
+			} );
+
+			expect( onFocusRow ).toHaveBeenCalledWith(
+				expect.objectContaining( { key: 'Home', keyCode: HOME } ),
+				row3Element,
+				row1Element
+			);
+		} );
+
 		it( 'should call onFocusRow when shift key is held', () => {
 			const onFocusRow = jest.fn();
 			render( <TestTree onFocusRow={ onFocusRow } /> );

package/src/unit-control/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-UnitControl allows the user to set a value as well as a unit (e.g. `px`).
+`UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
 
 ## Usage
 
@@ -66,14 +66,12 @@ The position of the label (`top`, `side`, `bottom`, or `edge`).
 Callback when the `value` changes.
 
 -   Required: No
--   Default: `noop`
 
 ### `onUnitChange`: `UnitControlOnChangeCallback`
 
 Callback when the `unit` changes.
 
 -   Required: No
--   Default: `noop`
 
 ### `size`: `string`
 

package/src/unit-control/index.tsx

@@ -7,23 +7,23 @@ import type {
 	ForwardedRef,
 	SyntheticEvent,
 	ChangeEvent,
+	PointerEvent,
 } from 'react';
-import { noop, omit } from 'lodash';
+import { omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../ui/context';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
-import { composeStateReducers } from '../input-control/reducer/reducer';
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
 import {
@@ -36,9 +36,16 @@ import { useControlledState } from '../utils/hooks';
 import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
 import type { StateReducer } from '../input-control/reducer/state';
 
-function UnitControl(
-	{
-		__unstableStateReducer: stateReducer = ( state ) => state,
+function UnforwardedUnitControl(
+	unitControlProps: WordPressComponentProps<
+		UnitControlProps,
+		'input',
+		false
+	>,
+	forwardedRef: ForwardedRef< any >
+) {
+	const {
+		__unstableStateReducer: stateReducerProp,
 		autoComplete = 'off',
 		className,
 		disabled = false,
@@ -47,17 +54,24 @@ function UnitControl(
 		isResetValueOnUnitChange = false,
 		isUnitSelectTabbable = true,
 		label,
-		onChange = noop,
-		onUnitChange = noop,
+		onChange: onChangeProp,
+		onUnitChange,
 		size = 'default',
 		style,
 		unit: unitProp,
 		units: unitsProp = CSS_UNITS,
 		value: valueProp,
 		...props
-	}: WordPressComponentProps< UnitControlProps, 'input', false >,
-	forwardedRef: ForwardedRef< any >
-) {
+	} = unitControlProps;
+
+	if ( 'unit' in unitControlProps ) {
+		deprecated( 'UnitControl unit prop', {
+			since: '5.6',
+			hint: 'The unit should be provided within the `value` prop.',
+			version: '6.2',
+		} );
+	}
+
 	// The `value` prop, in theory, should not be `null`, but the following line
 	// ensures it fallback to `undefined` in case a consumer of `UnitControl`
 	// still passes `null` as a `value`.
@@ -81,7 +95,9 @@ function UnitControl(
 	);
 
 	useEffect( () => {
-		setUnit( parsedUnit );
+		if ( parsedUnit !== undefined ) {
+			setUnit( parsedUnit );
+		}
 	}, [ parsedUnit ] );
 
 	// Stores parsed value for hand-off in state reducer.
@@ -91,14 +107,18 @@ function UnitControl(
 
 	const handleOnQuantityChange = (
 		nextQuantityValue: number | string | undefined,
-		changeProps: { event: ChangeEvent< HTMLInputElement > }
+		changeProps: {
+			event:
+				| ChangeEvent< HTMLInputElement >
+				| PointerEvent< HTMLInputElement >;
+		}
 	) => {
 		if (
 			nextQuantityValue === '' ||
 			typeof nextQuantityValue === 'undefined' ||
 			nextQuantityValue === null
 		) {
-			onChange( '', changeProps );
+			onChangeProp?.( '', changeProps );
 			return;
 		}
 
@@ -113,7 +133,7 @@ function UnitControl(
 			unit
 		).join( '' );
 
-		onChange( onChangeValue, changeProps );
+		onChangeProp?.( onChangeValue, changeProps );
 	};
 
 	const handleOnUnitChange: UnitControlOnChangeCallback = (
@@ -128,8 +148,8 @@ function UnitControl(
 			nextValue = `${ data.default }${ nextUnitValue }`;
 		}
 
-		onChange( nextValue, changeProps );
-		onUnitChange( nextUnitValue, changeProps );
+		onChangeProp?.( nextValue, changeProps );
+		onUnitChange?.( nextUnitValue, changeProps );
 
 		setUnit( nextUnitValue );
 	};
@@ -157,11 +177,11 @@ function UnitControl(
 				: undefined;
 			const changeProps = { event, data };
 
-			onChange(
+			onChangeProp?.(
 				`${ validParsedQuantity ?? '' }${ validParsedUnit }`,
 				changeProps
 			);
-			onUnitChange( validParsedUnit, changeProps );
+			onUnitChange?.( validParsedUnit, changeProps );
 
 			setUnit( validParsedUnit );
 		}
@@ -170,8 +190,8 @@ function UnitControl(
 	const handleOnBlur: FocusEventHandler< HTMLInputElement > = mayUpdateUnit;
 
 	const handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {
-		const { keyCode } = event;
-		if ( keyCode === ENTER ) {
+		const { key } = event;
+		if ( key === 'Enter' ) {
 			mayUpdateUnit( event );
 		}
 	};
@@ -186,6 +206,8 @@ function UnitControl(
 	 * @return The updated state to apply to InputControl
 	 */
 	const unitControlStateReducer: StateReducer = ( state, action ) => {
+		const nextState = { ...state };
+
 		/*
 		 * On commits (when pressing ENTER and on blur if
 		 * isPressEnterToChange is true), if a parse has been performed
@@ -193,14 +215,24 @@ function UnitControl(
 		 */
 		if ( action.type === inputControlActionTypes.COMMIT ) {
 			if ( refParsedQuantity.current !== undefined ) {
-				state.value = ( refParsedQuantity.current ?? '' ).toString();
+				nextState.value = (
+					refParsedQuantity.current ?? ''
+				).toString();
 				refParsedQuantity.current = undefined;
 			}
 		}
 
-		return state;
+		return nextState;
 	};
 
+	let stateReducer: StateReducer = unitControlStateReducer;
+	if ( stateReducerProp ) {
+		stateReducer = ( state, action ) => {
+			const baseState = unitControlStateReducer( state, action );
+			return stateReducerProp( baseState, action );
+		};
+	}
+
 	const inputSuffix = ! disableUnits ? (
 		<UnitSelectControl
 			aria-label={ __( 'Select unit' ) }
@@ -244,17 +276,14 @@ function UnitControl(
 				suffix={ inputSuffix }
 				value={ parsedQuantity ?? '' }
 				step={ step }
-				__unstableStateReducer={ composeStateReducers(
-					unitControlStateReducer,
-					stateReducer
-				) }
+				__unstableStateReducer={ stateReducer }
 			/>
 		</Root>
 	);
 }
 
 /**
- * `UnitControl` allows the user to set a value as well as a unit (e.g. `px`).
+ * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
  *
  *
  * @example
@@ -269,7 +298,7 @@ function UnitControl(
  * };
  * ```
  */
-const ForwardedUnitControl = forwardRef( UnitControl );
+export const UnitControl = forwardRef( UnforwardedUnitControl );
 
 export { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';
-export default ForwardedUnitControl;
+export default UnitControl;

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

@@ -0,0 +1,170 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { UnitControl } from '../';
+import { CSS_UNITS } from '../utils';
+
+const meta: ComponentMeta< typeof UnitControl > = {
+	component: UnitControl,
+	title: 'Components (Experimental)/UnitControl',
+	argTypes: {
+		__unstableInputWidth: {
+			control: { type: 'text' },
+		},
+		__unstableStateReducer: {
+			control: { type: null },
+		},
+		size: {
+			control: { type: 'select' },
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+		},
+		onUnitChange: {
+			control: { type: null },
+		},
+		value: {
+			control: { type: null },
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState< string | undefined >( '10px' );
+
+	return (
+		<div style={ { maxWidth: '100px' } }>
+			<UnitControl
+				{ ...args }
+				value={ value }
+				onChange={ ( v, extra ) => {
+					setValue( v );
+					onChange?.( v, extra );
+				} }
+			/>
+		</div>
+	);
+};
+
+export const Default: ComponentStory<
+	typeof UnitControl
+> = DefaultTemplate.bind( {} );
+Default.args = {
+	label: 'Label',
+};
+
+/**
+ * If the `isPressEnterToChange` prop is set to `true`, the `onChange` callback
+ * will not fire while a new value is typed in the input field (you can verify this
+ * behavior by inspecting the console's output).
+ */
+export const PressEnterToChange: ComponentStory<
+	typeof UnitControl
+> = DefaultTemplate.bind( {} );
+PressEnterToChange.args = {
+	...Default.args,
+	isPressEnterToChange: true,
+	onChange: ( v ) => {
+		// eslint-disable-next-line no-console
+		console.log( v );
+	},
+};
+
+/**
+ * Most of `NumberControl`'s props can be passed to `UnitControl`, and they will
+ * affect its numeric input field.
+ */
+export const TweakingTheNumberInput: ComponentStory<
+	typeof UnitControl
+> = DefaultTemplate.bind( {} );
+TweakingTheNumberInput.args = {
+	...Default.args,
+	min: 0,
+	max: 100,
+	step: 'any',
+	label: 'Custom label',
+};
+
+/**
+ * When only one unit is available, the unit selection dropdown becomes static text.
+ */
+export const WithSingleUnit: ComponentStory<
+	typeof UnitControl
+> = DefaultTemplate.bind( {} );
+WithSingleUnit.args = {
+	...Default.args,
+	units: CSS_UNITS.slice( 0, 1 ),
+};
+
+/**
+ * It is possible to pass a custom list of units. Every time the unit changes,
+ * if the `isResetValueOnUnitChange` is set to `true`, the input's quantity is
+ * reset to the new unit's default value.
+ */
+export const WithCustomUnits: ComponentStory< typeof UnitControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState< string | undefined >( '80km' );
+
+	return (
+		<div style={ { maxWidth: '100px' } }>
+			<UnitControl
+				{ ...args }
+				value={ value }
+				onChange={ ( v, extra ) => {
+					setValue( v );
+					onChange?.( v, extra );
+				} }
+			/>
+		</div>
+	);
+};
+WithCustomUnits.args = {
+	...Default.args,
+	isResetValueOnUnitChange: true,
+	min: 0,
+	units: [
+		{
+			value: 'km',
+			label: 'km',
+			default: 1,
+		},
+		{
+			value: 'mi',
+			label: 'mi',
+			default: 1,
+		},
+		{
+			value: 'm',
+			label: 'm',
+			default: 1000,
+		},
+		{
+			value: 'yd',
+			label: 'yd',
+			default: 1760,
+		},
+	],
+};