@wordpress/components 28.14.1-next.cd6172eb0.0 → 29.0.0

package/src/box-control/index.tsx

@@ -9,13 +9,10 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { BaseControl } from '../base-control';
-import AllInputControl from './all-input-control';
-import InputControls from './input-controls';
-import AxialInputControls from './axial-input-controls';
+import InputControl from './input-control';
 import LinkedButton from './linked-button';
 import { Grid } from '../grid';
 import {
-	FlexedBoxControlIcon,
 	InputWrapper,
 	ResetButton,
 	LinkedButtonWrapper,
@@ -24,8 +21,9 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	DEFAULT_VALUES,
 	getInitialSide,
-	isValuesMixed,
+	isValueMixed,
 	isValuesDefined,
+	getAllowedSides,
 } from './utils';
 import { useControlledState } from '../utils/hooks';
 import type {
@@ -97,7 +95,7 @@ function BoxControl( {
 
 	const [ isDirty, setIsDirty ] = useState( hasInitialValue );
 	const [ isLinked, setIsLinked ] = useState(
-		! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide
+		! hasInitialValue || ! isValueMixed( inputValues ) || hasOneSide
 	);
 
 	const [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(
@@ -162,6 +160,7 @@ function BoxControl( {
 		__next40pxDefaultSize,
 		size: undefined,
 	} );
+	const sidesToRender = getAllowedSides( sides );
 
 	return (
 		<Grid
@@ -176,8 +175,7 @@ function BoxControl( {
 			</BaseControl.VisualLabel>
 			{ isLinked && (
 				<InputWrapper>
-					<FlexedBoxControlIcon side={ side } sides={ sides } />
-					<AllInputControl { ...inputControlProps } />
+					<InputControl side="all" { ...inputControlProps } />
 				</InputWrapper>
 			) }
 			{ ! hasOneSide && (
@@ -189,12 +187,24 @@ function BoxControl( {
 				</LinkedButtonWrapper>
 			) }
 
-			{ ! isLinked && splitOnAxis && (
-				<AxialInputControls { ...inputControlProps } />
-			) }
-			{ ! isLinked && ! splitOnAxis && (
-				<InputControls { ...inputControlProps } />
-			) }
+			{ ! isLinked &&
+				splitOnAxis &&
+				[ 'vertical', 'horizontal' ].map( ( axis ) => (
+					<InputControl
+						key={ axis }
+						side={ axis as 'horizontal' | 'vertical' }
+						{ ...inputControlProps }
+					/>
+				) ) }
+			{ ! isLinked &&
+				! splitOnAxis &&
+				Array.from( sidesToRender ).map( ( axis ) => (
+					<InputControl
+						key={ axis }
+						side={ axis }
+						{ ...inputControlProps }
+					/>
+				) ) }
 			{ allowReset && (
 				<ResetButton
 					className="component-box-control__reset-button"

package/src/box-control/input-control.tsx

@@ -0,0 +1,197 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Tooltip from '../tooltip';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
+import {
+	CUSTOM_VALUE_SETTINGS,
+	getAllowedSides,
+	getMergedValue,
+	isValueMixed,
+	isValuesDefined,
+	LABELS,
+} from './utils';
+import {
+	FlexedBoxControlIcon,
+	FlexedRangeControl,
+	InputWrapper,
+	StyledUnitControl,
+} from './styles/box-control-styles';
+import type { BoxControlInputControlProps, BoxControlValue } from './types';
+
+const noop = () => {};
+
+function getSidesToModify(
+	side: BoxControlInputControlProps[ 'side' ],
+	sides: BoxControlInputControlProps[ 'sides' ],
+	isAlt?: boolean
+) {
+	const allowedSides = getAllowedSides( sides );
+
+	let modifiedSides: ( keyof BoxControlValue )[] = [];
+	switch ( side ) {
+		case 'all':
+			modifiedSides = [ 'top', 'bottom', 'left', 'right' ];
+			break;
+		case 'horizontal':
+			modifiedSides = [ 'left', 'right' ];
+			break;
+		case 'vertical':
+			modifiedSides = [ 'top', 'bottom' ];
+			break;
+		default:
+			modifiedSides = [ side ];
+	}
+
+	if ( isAlt ) {
+		switch ( side ) {
+			case 'top':
+				modifiedSides.push( 'bottom' );
+				break;
+			case 'bottom':
+				modifiedSides.push( 'top' );
+				break;
+			case 'left':
+				modifiedSides.push( 'left' );
+				break;
+			case 'right':
+				modifiedSides.push( 'right' );
+				break;
+		}
+	}
+
+	return modifiedSides.filter( ( s ) => allowedSides.has( s ) );
+}
+
+export default function BoxInputControl( {
+	__next40pxDefaultSize,
+	onChange = noop,
+	onFocus = noop,
+	values,
+	selectedUnits,
+	setSelectedUnits,
+	sides,
+	side,
+	...props
+}: BoxControlInputControlProps ) {
+	const defaultValuesToModify = getSidesToModify( side, sides );
+
+	const handleOnFocus = ( event: React.FocusEvent< HTMLInputElement > ) => {
+		onFocus( event, { side } );
+	};
+
+	const handleOnChange = ( nextValues: BoxControlValue ) => {
+		onChange( nextValues );
+	};
+
+	const handleOnValueChange = (
+		next?: string,
+		extra?: { event: React.SyntheticEvent< Element, Event > }
+	) => {
+		const nextValues = { ...values };
+		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
+		const modifiedSides = getSidesToModify(
+			side,
+			sides,
+			/**
+			 * Supports changing pair sides. For example, holding the ALT key
+			 * when changing the TOP will also update BOTTOM.
+			 */
+			// @ts-expect-error - TODO: event.altKey is only present when the change event was
+			// triggered by a keyboard event. Should this feature be implemented differently so
+			// it also works with drag events?
+			!! extra?.event.altKey
+		);
+
+		modifiedSides.forEach( ( modifiedSide ) => {
+			nextValues[ modifiedSide ] = nextValue;
+		} );
+
+		handleOnChange( nextValues );
+	};
+
+	const handleOnUnitChange = ( next?: string ) => {
+		const newUnits = { ...selectedUnits };
+		defaultValuesToModify.forEach( ( modifiedSide ) => {
+			newUnits[ modifiedSide ] = next;
+		} );
+		setSelectedUnits( newUnits );
+	};
+
+	const mergedValue = getMergedValue( values, defaultValuesToModify );
+	const hasValues = isValuesDefined( values );
+	const isMixed =
+		hasValues &&
+		defaultValuesToModify.length > 1 &&
+		isValueMixed( values, defaultValuesToModify );
+	const [ parsedQuantity, parsedUnit ] =
+		parseQuantityAndUnitFromRawValue( mergedValue );
+	const computedUnit = hasValues
+		? parsedUnit
+		: selectedUnits[ defaultValuesToModify[ 0 ] ];
+	const generatedId = useInstanceId( BoxInputControl, 'box-control-input' );
+	const inputId = [ generatedId, side ].join( '-' );
+	const isMixedUnit =
+		defaultValuesToModify.length > 1 &&
+		mergedValue === undefined &&
+		defaultValuesToModify.some(
+			( s ) => selectedUnits[ s ] !== computedUnit
+		);
+	const usedValue =
+		mergedValue === undefined && computedUnit ? computedUnit : mergedValue;
+	const mixedPlaceholder = isMixed || isMixedUnit ? __( 'Mixed' ) : undefined;
+
+	return (
+		<InputWrapper key={ `box-control-${ side }` } expanded>
+			<FlexedBoxControlIcon side={ side } sides={ sides } />
+			<Tooltip placement="top-end" text={ LABELS[ side ] }>
+				<StyledUnitControl
+					{ ...props }
+					__shouldNotWarnDeprecated36pxSize
+					__next40pxDefaultSize={ __next40pxDefaultSize }
+					className="component-box-control__unit-control"
+					id={ inputId }
+					isPressEnterToChange
+					disableUnits={ isMixed || isMixedUnit }
+					value={ usedValue }
+					onChange={ handleOnValueChange }
+					onUnitChange={ handleOnUnitChange }
+					onFocus={ handleOnFocus }
+					label={ LABELS[ side ] }
+					placeholder={ mixedPlaceholder }
+					hideLabelFromVision
+				/>
+			</Tooltip>
+
+			<FlexedRangeControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__shouldNotWarnDeprecated36pxSize
+				aria-controls={ inputId }
+				label={ LABELS[ side ] }
+				hideLabelFromVision
+				onChange={ ( newValue ) => {
+					handleOnValueChange(
+						newValue !== undefined
+							? [ newValue, computedUnit ].join( '' )
+							: undefined
+					);
+				} }
+				min={ 0 }
+				max={ CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]?.max ?? 10 }
+				step={
+					CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]?.step ?? 0.1
+				}
+				value={ parsedQuantity ?? 0 }
+				withInputField={ false }
+			/>
+		</InputWrapper>
+	);
+}

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

@@ -17,7 +17,7 @@ const meta: Meta< typeof BoxControl > = {
 	title: 'Components/BoxControl',
 	component: BoxControl,
 	argTypes: {
-		values: { control: { type: null } },
+		values: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/box-control/types.ts

@@ -110,8 +110,16 @@ export type BoxControlInputControlProps = UnitControlPassthroughProps & {
 	) => void;
 	selectedUnits: BoxControlValue;
 	setSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;
-	sides: BoxControlProps[ 'sides' ];
 	values: BoxControlValue;
+	/**
+	 * Collection of sides to allow control of. If omitted or empty, all sides will be available.
+	 */
+	sides: BoxControlProps[ 'sides' ];
+	/**
+	 * Side represents the current side being rendered by the input.
+	 * It can be a concrete side like: left, right, top, bottom or a combined one like: horizontal, vertical.
+	 */
+	side: keyof typeof LABELS;
 };
 
 export type BoxControlIconProps = {

package/src/box-control/utils.ts

@@ -6,12 +6,13 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import type {
+	BoxControlInputControlProps,
 	BoxControlProps,
 	BoxControlValue,
 	CustomValueUnits,
 } from './types';
+import deprecated from '@wordpress/deprecated';
 
 export const CUSTOM_VALUE_SETTINGS: CustomValueUnits = {
 	px: { max: 300, step: 1 },
@@ -50,7 +51,6 @@ export const LABELS = {
 	bottom: __( 'Bottom side' ),
 	left: __( 'Left side' ),
 	right: __( 'Right side' ),
-	mixed: __( 'Mixed' ),
 	vertical: __( 'Top and bottom sides' ),
 	horizontal: __( 'Left and right sides' ),
 };
@@ -82,56 +82,46 @@ function mode< T >( arr: T[] ) {
 }
 
 /**
- * Gets the 'all' input value and unit from values data.
+ * Gets the merged input value and unit from values data.
  *
  * @param values         Box values.
- * @param selectedUnits  Box units.
  * @param availableSides Available box sides to evaluate.
  *
  * @return A value + unit for the 'all' input.
  */
-export function getAllValue(
+export function getMergedValue(
 	values: BoxControlValue = {},
-	selectedUnits?: BoxControlValue,
 	availableSides: BoxControlProps[ 'sides' ] = ALL_SIDES
 ) {
 	const sides = normalizeSides( availableSides );
-	const parsedQuantitiesAndUnits = sides.map( ( side ) =>
-		parseQuantityAndUnitFromRawValue( values[ side ] )
-	);
-	const allParsedQuantities = parsedQuantitiesAndUnits.map(
-		( value ) => value[ 0 ] ?? ''
-	);
-	const allParsedUnits = parsedQuantitiesAndUnits.map(
-		( value ) => value[ 1 ]
-	);
-
-	const commonQuantity = allParsedQuantities.every(
-		( v ) => v === allParsedQuantities[ 0 ]
-	)
-		? allParsedQuantities[ 0 ]
-		: '';
-
-	/**
-	 * The typeof === 'number' check is important. On reset actions, the incoming value
-	 * may be null or an empty string.
-	 *
-	 * Also, the value may also be zero (0), which is considered a valid unit value.
-	 *
-	 * typeof === 'number' is more specific for these cases, rather than relying on a
-	 * simple truthy check.
-	 */
-	let commonUnit;
-	if ( typeof commonQuantity === 'number' ) {
-		commonUnit = mode( allParsedUnits );
-	} else {
-		// Set meaningful unit selection if no commonQuantity and user has previously
-		// selected units without assigning values while controls were unlinked.
-		commonUnit =
-			getAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );
+	if (
+		sides.every(
+			( side: keyof BoxControlValue ) =>
+				values[ side ] === values[ sides[ 0 ] ]
+		)
+	) {
+		return values[ sides[ 0 ] ];
 	}
 
-	return [ commonQuantity, commonUnit ].join( '' );
+	return undefined;
+}
+
+/**
+ * Checks if the values are mixed.
+ *
+ * @param values         Box values.
+ * @param availableSides Available box sides to evaluate.
+ * @return Whether the values are mixed.
+ */
+export function isValueMixed(
+	values: BoxControlValue = {},
+	availableSides: BoxControlProps[ 'sides' ] = ALL_SIDES
+) {
+	const sides = normalizeSides( availableSides );
+	return sides.some(
+		( side: keyof BoxControlValue ) =>
+			values[ side ] !== values[ sides[ 0 ] ]
+	);
 }
 
 /**
@@ -150,26 +140,6 @@ export function getAllUnitFallback( selectedUnits?: BoxControlValue ) {
 	return mode( filteredUnits );
 }
 
-/**
- * Checks to determine if values are mixed.
- *
- * @param values        Box values.
- * @param selectedUnits Box units.
- * @param sides         Available box sides to evaluate.
- *
- * @return Whether values are mixed.
- */
-export function isValuesMixed(
-	values: BoxControlValue = {},
-	selectedUnits?: BoxControlValue,
-	sides: BoxControlProps[ 'sides' ] = ALL_SIDES
-) {
-	const allValue = getAllValue( values, selectedUnits, sides );
-	const isMixed = isNaN( parseFloat( allValue ) );
-
-	return isMixed;
-}
-
 /**
  * Checks to determine if values are defined.
  *
@@ -239,6 +209,8 @@ export function normalizeSides( sides: BoxControlProps[ 'sides' ] ) {
  * Applies a value to an object representing top, right, bottom and left sides
  * while taking into account any custom side configuration.
  *
+ * @deprecated
+ *
  * @param currentValues The current values for each side.
  * @param newValue      The value to apply to the sides object.
  * @param sides         Array defining valid sides.
@@ -250,6 +222,10 @@ export function applyValueToSides(
 	newValue?: string,
 	sides?: BoxControlProps[ 'sides' ]
 ): BoxControlValue {
+	deprecated( 'applyValueToSides', {
+		since: '6.8',
+		version: '7.0',
+	} );
 	const newValues = { ...currentValues };
 
 	if ( sides?.length ) {
@@ -270,3 +246,29 @@ export function applyValueToSides(
 
 	return newValues;
 }
+
+/**
+ * Return the allowed sides based on the sides configuration.
+ *
+ * @param sides Sides configuration.
+ * @return Allowed sides.
+ */
+export function getAllowedSides(
+	sides: BoxControlInputControlProps[ 'sides' ]
+) {
+	const allowedSides: Set< keyof BoxControlValue > = new Set(
+		! sides ? ALL_SIDES : []
+	);
+	sides?.forEach( ( allowedSide ) => {
+		if ( allowedSide === 'vertical' ) {
+			allowedSides.add( 'top' );
+			allowedSides.add( 'bottom' );
+		} else if ( allowedSide === 'horizontal' ) {
+			allowedSides.add( 'right' );
+			allowedSides.add( 'left' );
+		} else {
+			allowedSides.add( allowedSide );
+		}
+	} );
+	return allowedSides;
+}