@wordpress/components 32.2.2-next.v.202602200903.0 → 32.3.0

package/src/date-time/date/styles.ts

@@ -68,6 +68,7 @@ export const DayButton = styled( Button, {
 	grid-column: ${ ( props ) => props.column };
 	position: relative;
 	justify-content: center;
+	padding: 0;
 
 	${ ( props ) =>
 		props.disabled &&

package/src/dropdown/types.ts

@@ -1,11 +1,5 @@
-/**
- * External dependencies
- */
+import type { useFocusOnMount } from '@wordpress/compose';
 import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
-
-/**
- * Internal dependencies
- */
 import type Popover from '../popover';
 import type { PopoverProps } from '../popover/types';
 
@@ -42,16 +36,17 @@ export type DropdownProps = {
 	 */
 	expandOnMobile?: boolean;
 	/**
-	 * By default, the first tabbable element in the popover will receive focus
-	 * when it mounts. This is the same as setting this prop to "firstElement".
-	 * Specifying a true value will focus the container instead.
-	 * Specifying a false value disables the focus handling entirely
-	 * (this should only be done when an appropriately accessible
-	 * substitute behavior exists).
+	 * Determines focus behavior when the dialog mounts.
+	 *
+	 * - `"firstElement"` focuses the first tabbable element within.
+	 * - `"firstInputElement"` focuses the first value control within.
+	 * - `true` focuses the element itself.
+	 * - `false` does nothing and _should not be used unless an accessible
+	 *    substitute behavior is implemented_.
 	 *
 	 * @default 'firstElement'
 	 */
-	focusOnMount?: 'firstElement' | boolean;
+	focusOnMount?: useFocusOnMount.Mode;
 	/**
 	 * Set this to customize the text that is shown in the dropdown's header
 	 * when it is fullscreen on mobile.

package/src/form-token-field/style.scss

@@ -25,6 +25,7 @@
 		flex: 1;
 		font-family: inherit;
 		font-size: 16px;
+		line-height: 1; // Override forms.css styles
 		width: 100%;
 		max-width: 100%;
 		margin-left: 4px;

package/src/modal/types.ts

@@ -51,14 +51,18 @@ export type ModalProps = {
 	 */
 	contentLabel?: string;
 	/**
-	 * If this property is true, it will focus the first tabbable element
-	 * rendered in the modal.
+	 * Determines focus behavior when the modal opens.
+	 *
+	 * - `"firstElement"` focuses the first tabbable element within.
+	 * - `"firstInputElement"` focuses the first value control within.
+	 * - `"firstContentElement"` focuses the first tabbable element within the modal’s content element.
+	 * - `true` focuses the element itself.
+	 * - `false` does nothing and _should not be used unless an accessible
+	 *    substitute behavior is implemented_.
 	 *
 	 * @default true
 	 */
-	focusOnMount?:
-		| Parameters< typeof useFocusOnMount >[ 0 ]
-		| 'firstContentElement';
+	focusOnMount?: useFocusOnMount.Mode | 'firstContentElement';
 	/**
 	 * Elements that are injected into the modal header to the left of the close button (if rendered).
 	 * Hidden if `__experimentalHideHeader` is `true`.

package/src/number-control/index.tsx

@@ -18,6 +18,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import { Input, SpinButton, styles } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
+import type { StateReducer } from '../input-control/reducer/state';
 import { add, subtract, clamp, ensureValidStep } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
 import type { WordPressComponentProps } from '../context/wordpress-component';
@@ -120,93 +121,91 @@ function UnforwardedNumberControl(
 	 *
 	 * @return The updated state to apply to InputControl
 	 */
-	const numberControlStateReducer: NumberControlProps[ '__unstableStateReducer' ] =
-		( state, action ) => {
-			const nextState = { ...state };
+	const numberControlStateReducer: StateReducer = ( state, action ) => {
+		const nextState = { ...state };
 
-			const { type, payload } = action;
-			const event = payload.event;
-			const currentValue = nextState.value;
+		const { type, payload } = action;
+		const event = payload.event;
+		const currentValue = nextState.value;
 
-			/**
-			 * Handles custom UP and DOWN Keyboard events
-			 */
-			if (
-				type === inputControlActionTypes.PRESS_UP ||
-				type === inputControlActionTypes.PRESS_DOWN
-			) {
-				nextState.value = spinValue(
-					currentValue,
-					type === inputControlActionTypes.PRESS_UP ? 'up' : 'down',
-					event as KeyboardEvent | undefined
-				);
-			}
+		/**
+		 * Handles custom UP and DOWN Keyboard events
+		 */
+		if (
+			type === inputControlActionTypes.PRESS_UP ||
+			type === inputControlActionTypes.PRESS_DOWN
+		) {
+			nextState.value = spinValue(
+				currentValue,
+				type === inputControlActionTypes.PRESS_UP ? 'up' : 'down',
+				event as KeyboardEvent | undefined
+			);
+		}
 
-			/**
-			 * Handles drag to update events
-			 */
-			if ( type === inputControlActionTypes.DRAG && isDragEnabled ) {
-				const [ x, y ] = payload.delta;
-				const enableShift = payload.shiftKey && isShiftStepEnabled;
-				const modifier = enableShift
-					? ensureNumber( shiftStep ) * baseSpin
-					: baseSpin;
+		/**
+		 * Handles drag to update events
+		 */
+		if ( type === inputControlActionTypes.DRAG && isDragEnabled ) {
+			const [ x, y ] = payload.delta;
+			const enableShift = payload.shiftKey && isShiftStepEnabled;
+			const modifier = enableShift
+				? ensureNumber( shiftStep ) * baseSpin
+				: baseSpin;
 
-				let directionModifier;
-				let delta;
+			let directionModifier;
+			let delta;
 
-				switch ( dragDirection ) {
-					case 'n':
-						delta = y;
-						directionModifier = -1;
-						break;
+			switch ( dragDirection ) {
+				case 'n':
+					delta = y;
+					directionModifier = -1;
+					break;
 
-					case 'e':
-						delta = x;
-						directionModifier = isRTL() ? -1 : 1;
-						break;
+				case 'e':
+					delta = x;
+					directionModifier = isRTL() ? -1 : 1;
+					break;
 
-					case 's':
-						delta = y;
-						directionModifier = 1;
-						break;
+				case 's':
+					delta = y;
+					directionModifier = 1;
+					break;
 
-					case 'w':
-						delta = x;
-						directionModifier = isRTL() ? 1 : -1;
-						break;
-				}
+				case 'w':
+					delta = x;
+					directionModifier = isRTL() ? 1 : -1;
+					break;
+			}
 
-				if ( delta !== 0 ) {
-					delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
-					const distance = delta * modifier * directionModifier;
+			if ( delta !== 0 ) {
+				delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
+				const distance = delta * modifier * directionModifier;
 
-					nextState.value = constrainValue(
-						// @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
-						add( currentValue, distance ),
-						enableShift ? modifier : undefined
-					);
-				}
+				nextState.value = constrainValue(
+					// @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
+					add( currentValue, distance ),
+					enableShift ? modifier : undefined
+				);
 			}
+		}
 
-			/**
-			 * Handles commit (ENTER key press or blur)
-			 */
-			if (
-				type === inputControlActionTypes.PRESS_ENTER ||
-				type === inputControlActionTypes.COMMIT
-			) {
-				const applyEmptyValue =
-					required === false && currentValue === '';
+		/**
+		 * Handles commit (ENTER key press or blur)
+		 */
+		if (
+			type === inputControlActionTypes.PRESS_ENTER ||
+			type === inputControlActionTypes.COMMIT
+		) {
+			const applyEmptyValue = required === false && currentValue === '';
 
-				nextState.value = applyEmptyValue
-					? currentValue
-					: // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
-					  constrainValue( currentValue );
-			}
+			nextState.value = applyEmptyValue
+				? currentValue
+				: // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
+				  constrainValue( currentValue );
+		}
 
-			return nextState;
-		};
+		return stateReducerProp?.( nextState, action ) ?? nextState;
+	};
 
 	const buildSpinButtonClickHandler =
 		( direction: 'up' | 'down' ) =>
@@ -238,10 +237,7 @@ function UnforwardedNumberControl(
 			type={ typeProp }
 			// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
 			value={ valueProp }
-			__unstableStateReducer={ ( state, action ) => {
-				const baseState = numberControlStateReducer( state, action );
-				return stateReducerProp?.( baseState, action ) ?? baseState;
-			} }
+			__unstableStateReducer={ numberControlStateReducer }
 			size={ size }
 			__shouldNotWarnDeprecated36pxSize
 			suffix={

package/src/popover/types.ts

@@ -1,8 +1,6 @@
-/**
- * External dependencies
- */
-import type { ReactNode, MutableRefObject, SyntheticEvent } from 'react';
 import type { Placement } from '@floating-ui/react-dom';
+import type { useFocusOnMount } from '@wordpress/compose';
+import type { MutableRefObject, ReactNode, SyntheticEvent } from 'react';
 
 type PositionYAxis = 'top' | 'middle' | 'bottom';
 type PositionXAxis = 'left' | 'center' | 'right';
@@ -75,15 +73,17 @@ export type PopoverProps = {
 	 */
 	constrainTabbing?: boolean;
 	/**
-	 * By default, the _first tabbable element_ in the popover will receive focus
-	 * when it mounts. This is the same as setting this prop to `"firstElement"`.
-	 * Specifying a `false` value disables the focus handling entirely (this
-	 * should only be done when an appropriately accessible substitute behavior
-	 * exists).
+	 * Determines focus behavior when the popover mounts.
+	 *
+	 * - `"firstElement"` focuses the first tabbable element within.
+	 * - `"firstInputElement"` focuses the first value control within.
+	 * - `true` focuses the element itself.
+	 * - `false` does nothing and _should not be used unless an accessible
+	 *    substitute behavior is implemented_.
 	 *
 	 * @default 'firstElement'
 	 */
-	focusOnMount?: 'firstElement' | boolean;
+	focusOnMount?: useFocusOnMount.Mode;
 	/**
 	 * A callback invoked when the focus leaves the opened popover. This should
 	 * only be provided in advanced use-cases when a popover should close under

package/src/select-control/styles/select-control-styles.ts

@@ -162,6 +162,7 @@ export const Select = styled.select< SelectProps >`
 		cursor: inherit;
 		display: block;
 		font-family: inherit;
+		line-height: 1.3; // Override forms.css styles, large enough value to prevent descender clipping without affecting height
 		margin: 0;
 		width: 100%;
 		max-width: none;

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

@@ -137,7 +137,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 38px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -157,12 +156,13 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   border: 0;
 }
 
-.emotion-12[disabled] {
+.emotion-12[disabled],
+.emotion-12[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-12:hover {
+.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
@@ -211,7 +211,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 38px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -229,12 +228,13 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   border: 0;
 }
 
-.emotion-17[disabled] {
+.emotion-17[disabled],
+.emotion-17[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-17:hover {
+.emotion-17:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
@@ -491,12 +491,13 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   border: 0;
 }
 
-.emotion-12[disabled] {
+.emotion-12[disabled],
+.emotion-12[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-12:hover {
+.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
@@ -726,7 +727,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 38px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -746,12 +746,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   border: 0;
 }
 
-.emotion-12[disabled] {
+.emotion-12[disabled],
+.emotion-12[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-12:hover {
+.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
@@ -800,7 +801,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 38px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -818,12 +818,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   border: 0;
 }
 
-.emotion-17[disabled] {
+.emotion-17[disabled],
+.emotion-17[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-17:hover {
+.emotion-17:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
@@ -1074,12 +1075,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   border: 0;
 }
 
-.emotion-12[disabled] {
+.emotion-12[disabled],
+.emotion-12[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-12:hover {
+.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 

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

@@ -63,13 +63,14 @@ export const buttonView = ( {
 		border: 0;
 	}
 
-	&[disabled] {
+	&[disabled],
+	&[aria-disabled='true'] {
 		opacity: 0.4;
 		cursor: default;
 	}
 
-	&:hover {
-		color: ${ COLORS.theme.gray[ 900 ] };
+	&:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+		color: ${ COLORS.theme.foreground };
 	}
 
 	${ isDeselectable && deselectable }
@@ -83,8 +84,6 @@ const pressed = css`
 `;
 
 const deselectable = css`
-	color: ${ COLORS.theme.foreground };
-
 	&:focus {
 		outline: ${ CONFIG.borderWidthFocus } solid ${ COLORS.ui.borderFocus };
 		outline-offset: 2px;
@@ -112,7 +111,6 @@ const isIconStyles = ( {
 	};
 
 	return css`
-		color: ${ COLORS.theme.foreground };
 		height: ${ iconButtonSizes[ size ] };
 		aspect-ratio: 1;
 		padding-left: 0;

package/src/tools-panel/types.ts

@@ -20,7 +20,10 @@ export type ToolsPanelProps = {
 	/**
 	 * The dropdown menu props to configure the panel's `DropdownMenu`.
 	 */
-	dropdownMenuProps?: React.ComponentProps< typeof DropdownMenu >;
+	dropdownMenuProps?: Omit<
+		React.ComponentProps< typeof DropdownMenu >,
+		'label'
+	>;
 	/**
 	 * Flags that the items in this ToolsPanel will be contained within an inner
 	 * wrapper element allowing the panel to lay them out accordingly.