@wordpress/components 29.6.0 → 29.8.0

package/build-types/utils/math.d.ts

@@ -25,22 +25,21 @@ export function subtract(...args: Array<number | string>): number;
 /**
  * Clamps a value based on a min/max range.
  *
- * @param {number} value The value.
- * @param {number} min   The minimum range.
- * @param {number} max   The maximum range.
+ * @param {number|string} value The value.
+ * @param {number}        min   The minimum range.
+ * @param {number}        max   The maximum range.
  *
  * @return {number} The clamped value.
  */
-export function clamp(value: number, min: number, max: number): number;
+export function clamp(value: number | string, min: number, max: number): number;
 /**
- * Clamps a value based on a min/max range with rounding
+ * Rounds a value to the nearest step offset by a minimum.
  *
- * @param {number | string} value The value.
- * @param {number}          min   The minimum range.
- * @param {number}          max   The maximum range.
- * @param {number}          step  A multiplier for the value.
+ * @param {number|string} value The value.
+ * @param {number}        min   The minimum range.
+ * @param {number}        step  The increment for the value.
  *
- * @return {number} The rounded and clamped value.
+ * @return {number} The value as a valid step.
  */
-export function roundClamp(value?: number | string, min?: number, max?: number, step?: number): number;
+export function ensureValidStep(value: number | string, min: number, step: number): number;
 //# sourceMappingURL=math.d.ts.map

package/build-types/utils/math.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../../src/utils/math.js"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,iCAJW,OAAO,GAEN,MAAM,CAMjB;AAED;;;;;;GAMG;AACH,6BAJW,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,GAEnB,MAAM,CAQjB;AAED;;;;;;GAMG;AACH,kCAJW,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,GAEnB,MAAM,CAWjB;AAcD;;;;;;;;GAQG;AACH,6BANW,MAAM,OACN,MAAM,OACN,MAAM,GAEL,MAAM,CAKjB;AAED;;;;;;;;;GASG;AACH,mCAPW,MAAM,GAAG,MAAM,QACf,MAAM,QACN,MAAM,SACN,MAAM,GAEL,MAAM,CAiBjB"}
+{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../../src/utils/math.js"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,iCAJW,OAAO,GAEN,MAAM,CAMjB;AAED;;;;;;GAMG;AACH,6BAJW,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,GAEnB,MAAM,CAQjB;AAED;;;;;;GAMG;AACH,kCAJW,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,GAEnB,MAAM,CAWjB;AAcD;;;;;;;;GAQG;AACH,6BANW,MAAM,GAAC,MAAM,OACb,MAAM,OACN,MAAM,GAEL,MAAM,CAKjB;AAED;;;;;;;;GAQG;AACH,uCANW,MAAM,GAAC,MAAM,OACb,MAAM,QACN,MAAM,GAEL,MAAM,CAajB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "29.6.0",
+	"version": "29.8.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,23 +44,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.20.0",
-		"@wordpress/compose": "^7.20.0",
-		"@wordpress/date": "^5.20.0",
-		"@wordpress/deprecated": "^4.20.0",
-		"@wordpress/dom": "^4.20.0",
-		"@wordpress/element": "^6.20.0",
-		"@wordpress/escape-html": "^3.20.0",
-		"@wordpress/hooks": "^4.20.0",
-		"@wordpress/html-entities": "^4.20.0",
-		"@wordpress/i18n": "^5.20.0",
-		"@wordpress/icons": "^10.20.0",
-		"@wordpress/is-shallow-equal": "^5.20.0",
-		"@wordpress/keycodes": "^4.20.0",
-		"@wordpress/primitives": "^4.20.0",
-		"@wordpress/private-apis": "^1.20.0",
-		"@wordpress/rich-text": "^7.20.0",
-		"@wordpress/warning": "^3.20.0",
+		"@wordpress/a11y": "^4.22.0",
+		"@wordpress/compose": "^7.22.0",
+		"@wordpress/date": "^5.22.0",
+		"@wordpress/deprecated": "^4.22.0",
+		"@wordpress/dom": "^4.22.0",
+		"@wordpress/element": "^6.22.0",
+		"@wordpress/escape-html": "^3.22.0",
+		"@wordpress/hooks": "^4.22.0",
+		"@wordpress/html-entities": "^4.22.0",
+		"@wordpress/i18n": "^5.22.0",
+		"@wordpress/icons": "^10.22.0",
+		"@wordpress/is-shallow-equal": "^5.22.0",
+		"@wordpress/keycodes": "^4.22.0",
+		"@wordpress/primitives": "^4.22.0",
+		"@wordpress/private-apis": "^1.22.0",
+		"@wordpress/rich-text": "^7.22.0",
+		"@wordpress/warning": "^3.22.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -68,7 +68,7 @@
 		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
 		"framer-motion": "^11.1.9",
-		"gradient-parser": "^0.1.5",
+		"gradient-parser": "1.0.2",
 		"highlight-words-core": "^1.2.2",
 		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "72476970386146d450c375e5c71a96dda7c9aaa8"
+	"gitHead": "01a314d7e46a50101e328fdb11959c441e49372d"
 }

package/src/angle-picker-control/README.md

@@ -19,7 +19,7 @@ function Example() {
     <AnglePickerControl
       value={ angle }
       onChange={ setAngle }
-    </>
+    />
   );
 }
 ```

package/src/angle-picker-control/index.tsx

@@ -97,7 +97,7 @@ function UnforwardedAnglePickerControl(
  *     <AnglePickerControl
  *       value={ angle }
  *       onChange={ setAngle }
- *     </>
+ *     />
  *   );
  * }
  * ```

package/src/autocomplete/index.tsx

@@ -40,35 +40,7 @@ import type {
 	UseAutocompleteProps,
 	WPCompleter,
 } from './types';
-
-const getNodeText = ( node: React.ReactNode ): string => {
-	if ( node === null ) {
-		return '';
-	}
-
-	switch ( typeof node ) {
-		case 'string':
-		case 'number':
-			return node.toString();
-			break;
-		case 'boolean':
-			return '';
-			break;
-		case 'object': {
-			if ( node instanceof Array ) {
-				return node.map( getNodeText ).join( '' );
-			}
-			if ( 'props' in node ) {
-				return getNodeText( node.props.children );
-			}
-			break;
-		}
-		default:
-			return '';
-	}
-
-	return '';
-};
+import getNodeText from '../utils/get-node-text';
 
 const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
 
@@ -394,12 +366,13 @@ export function useAutocomplete( {
 		? `components-autocomplete-item-${ instanceId }-${ selectedKey }`
 		: null;
 	const hasSelection = record.start !== undefined;
+	const showPopover = !! textContent && hasSelection && !! AutocompleterUI;
 
 	return {
 		listBoxId,
 		activeId,
 		onKeyDown: withIgnoreIMEEvents( handleKeyDown ),
-		popover: hasSelection && AutocompleterUI && (
+		popover: showPopover && (
 			<AutocompleterUI
 				className={ className }
 				filterValue={ filterValue }

package/src/button/style.scss

@@ -167,7 +167,7 @@
 		color: $components-color-accent;
 		background: transparent;
 
-		&:hover:not(:disabled, [aria-disabled="true"]) {
+		&:hover:not(:disabled, [aria-disabled="true"], .is-pressed) {
 			background: color-mix(in srgb, $components-color-accent 4%, transparent);
 			color: $components-color-accent-darker-20;
 		}

package/src/combobox-control/style.scss

@@ -12,6 +12,8 @@ input.components-combobox-control__input[type="text"] {
 	margin: 0;
 	line-height: inherit;
 	min-height: auto;
+	background: $components-color-background;
+	color: $components-color-foreground;
 
 	// Resolves Zooming on iOS devices
 	// https://github.com/WordPress/gutenberg/issues/27405
@@ -26,7 +28,7 @@ input.components-combobox-control__input[type="text"] {
 }
 
 .components-combobox-control__suggestions-container {
-	@include input-control;
+	@include input-control($components-color-accent);
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
@@ -34,7 +36,7 @@ input.components-combobox-control__input[type="text"] {
 	padding: 0;
 
 	&:focus-within {
-		@include input-style__focus();
+		@include input-style__focus($components-color-accent);
 	}
 
 	.components-spinner {

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

@@ -213,6 +213,7 @@ export const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`
 	display: flex;
 	align-items: center;
 	margin-inline-start: ${ space( 2 ) };
+	fill: currentColor;
 
 	// Keep the checkmark vertically aligned at the top. Since the item text has a
 	// 28px line height and the checkmark is 24px tall, a (28-24)/2 = 2px margin

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

@@ -1,5 +1,5 @@
 .components-form-token-field__input-container {
-	@include input-control();
+	@include input-control($components-color-accent);
 	width: 100%;
 	padding: 0;
 	cursor: text;
@@ -10,7 +10,7 @@
 	}
 
 	&.is-active {
-		@include input-style__focus();
+		@include input-style__focus($components-color-accent);
 	}
 
 	// Token input
@@ -27,7 +27,7 @@
 		min-width: 50px;
 		background: inherit;
 		border: 0;
-		color: $gray-900;
+		color: $components-color-foreground;
 		box-shadow: none;
 
 		// Resolves Zooming on iOS devices
@@ -168,7 +168,7 @@
 }
 
 .components-form-token-field__suggestion {
-	color: $gray-900;
+	color: $components-color-foreground;
 	display: block;
 	font-size: $default-font-size;
 	padding: $grid-unit-10 $grid-unit-15;
@@ -178,7 +178,7 @@
 
 	&.is-selected {
 		background: $components-color-accent;
-		color: $white;
+		color: $components-color-foreground-inverted;
 	}
 
 	&[aria-disabled="true"] {
@@ -186,7 +186,7 @@
 		color: $gray-600;
 
 		&.is-selected {
-			background-color: $components-color-accent-transparent-40;
+			background: color-mix(in srgb, $components-color-accent 4%, transparent);
 		}
 	}
 

package/src/number-control/index.tsx

@@ -18,7 +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 { add, subtract, roundClamp } from '../utils/math';
+import { add, subtract, clamp, ensureValidStep } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
 import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { NumberControlProps } from './types';
@@ -78,17 +78,18 @@ function UnforwardedNumberControl(
 	const isStepAny = step === 'any';
 	const baseStep = isStepAny ? 1 : ensureNumber( step );
 	const baseSpin = ensureNumber( spinFactor ) * baseStep;
-	const baseValue = roundClamp( 0, min, max, baseStep );
 	const constrainValue = (
 		value: number | string,
 		stepOverride?: number
 	) => {
-		// When step is "any" clamp the value, otherwise round and clamp it.
-		// Use '' + to convert to string for use in input value attribute.
-		return isStepAny
-			? '' + Math.min( max, Math.max( min, ensureNumber( value ) ) )
-			: '' + roundClamp( value, min, max, stepOverride ?? baseStep );
+		// When step is not "any" the value must be a valid step.
+		if ( ! isStepAny ) {
+			value = ensureValidStep( value, min, stepOverride ?? baseStep );
+		}
+
+		return `${ clamp( value, min, max ) }`;
 	};
+	const baseValue = constrainValue( 0 );
 
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
 	const classes = clsx( 'components-number-control', className );

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

@@ -40,8 +40,21 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should render custom className', () => {
-			render( <NumberControl className="hello" /> );
-			expect( screen.getByRole( 'spinbutton' ) ).toBeVisible();
+			const { container: withoutClassName } = render( <NumberControl /> );
+
+			const { container: withClassName } = render(
+				<NumberControl className="hello" />
+			);
+
+			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+				withoutClassName.querySelector( '.components-number-control' )
+			).not.toHaveClass( 'hello' );
+
+			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+				withClassName.querySelector( '.components-number-control' )
+			).toHaveClass( 'hello' );
 		} );
 	} );
 

package/src/popover/index.tsx

@@ -59,6 +59,7 @@ import type {
 	PopoverProps,
 	PopoverAnchorRefReference,
 	PopoverAnchorRefTopBottom,
+	PopoverSlotProps,
 } from './types';
 import { overlayMiddlewares } from './overlay-middlewares';
 import { StyleProvider } from '../style-provider';
@@ -478,6 +479,20 @@ const UnforwardedPopover = (
 	);
 };
 
+// Export the PopoverSlot individually to allow typescript to pick the types up.
+export const PopoverSlot = forwardRef< HTMLDivElement, PopoverSlotProps >(
+	( { name = SLOT_NAME }, ref ) => {
+		return (
+			<Slot
+				bubblesVirtually
+				name={ name }
+				className="popover-slot"
+				ref={ ref }
+			/>
+		);
+	}
+);
+
 /**
  * `Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default.
  *
@@ -501,25 +516,24 @@ const UnforwardedPopover = (
  * ```
  *
  */
-export const Popover = contextConnect( UnforwardedPopover, 'Popover' );
-
-function PopoverSlot(
-	{ name = SLOT_NAME }: { name?: string },
-	ref: ForwardedRef< any >
-) {
-	return (
-		<Slot
-			bubblesVirtually
-			name={ name }
-			className="popover-slot"
-			ref={ ref }
-		/>
-	);
-}
-
-// @ts-expect-error For Legacy Reasons
-Popover.Slot = forwardRef( PopoverSlot );
-// @ts-expect-error For Legacy Reasons
-Popover.__unstableSlotNameProvider = slotNameContext.Provider;
+export const Popover = Object.assign(
+	contextConnect( UnforwardedPopover, 'Popover' ),
+	{
+		/**
+		 * Renders a slot that is used internally by Popover for rendering content.
+		 */
+		Slot: Object.assign( PopoverSlot, {
+			displayName: 'Popover.Slot',
+		} ),
+		/**
+		 * Provides a context to manage popover slot names.
+		 *
+		 * This is marked as unstable and should not be used directly.
+		 */
+		__unstableSlotNameProvider: Object.assign( slotNameContext.Provider, {
+			displayName: 'Popover.__unstableSlotNameProvider',
+		} ),
+	}
+);
 
 export default Popover;

package/src/popover/stories/index.story.tsx

@@ -36,6 +36,10 @@ const meta: Meta< typeof Popover > = {
 	title: 'Components/Overlays/Popover',
 	id: 'components-popover',
 	component: Popover,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Popover.Slot': Popover.Slot,
+	},
 	argTypes: {
 		anchor: { control: false },
 		anchorRef: { control: false },
@@ -86,10 +90,13 @@ export const Default: StoryObj< typeof Popover > = {
 	decorators: [
 		( Story ) => {
 			const [ isVisible, setIsVisible ] = useState( false );
-			const toggleVisible = () => {
+			const buttonRef = useRef< HTMLButtonElement | undefined >();
+			const toggleVisible = ( event: React.MouseEvent ) => {
+				if ( buttonRef.current && event.target !== buttonRef.current ) {
+					return;
+				}
 				setIsVisible( ( state ) => ! state );
 			};
-			const buttonRef = useRef< HTMLButtonElement | undefined >();
 			useEffect( () => {
 				buttonRef.current?.scrollIntoView?.( {
 					block: 'center',
@@ -255,3 +262,77 @@ export const WithSlotOutsideIframe: StoryObj< typeof Popover > = {
 		...Default.args,
 	},
 };
+
+export const WithCloseHandlers: StoryObj< typeof Popover > = {
+	render: function WithCloseHandlersStory( args ) {
+		const [ isVisible, setIsVisible ] = useState( false );
+		const buttonRef = useRef< HTMLButtonElement >( null );
+
+		const toggleVisible = ( event: React.MouseEvent ) => {
+			if ( buttonRef.current && event.target !== buttonRef.current ) {
+				return;
+			}
+			setIsVisible( ( prev ) => ! prev );
+		};
+
+		const handleClose = () => {
+			args.onClose?.();
+			setIsVisible( false );
+		};
+
+		const handleFocusOutside = ( e: React.SyntheticEvent ) => {
+			args.onFocusOutside?.( e );
+			setIsVisible( false );
+		};
+
+		useEffect( () => {
+			buttonRef.current?.scrollIntoView( {
+				block: 'center',
+				inline: 'center',
+			} );
+		}, [] );
+
+		return (
+			<div
+				style={ {
+					width: '300vw',
+					height: '300vh',
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+				} }
+			>
+				<Button
+					variant="secondary"
+					onClick={ toggleVisible }
+					ref={ buttonRef }
+				>
+					Toggle Popover
+					{ isVisible && (
+						<Popover
+							{ ...args }
+							onClose={ handleClose }
+							onFocusOutside={ handleFocusOutside }
+						>
+							{ args.children }
+						</Popover>
+					) }
+				</Button>
+			</div>
+		);
+	},
+	args: {
+		...Default.args,
+		focusOnMount: true,
+		children: (
+			<div style={ { width: '280px', whiteSpace: 'normal' } }>
+				<p>
+					Clicking outside triggers the onFocusOutside callback prop.
+				</p>
+				<p>
+					Pressing the Escape key triggers the onClose callback prop.
+				</p>
+			</div>
+		),
+	},
+};

package/src/popover/test/utils/index.tsx

@@ -46,7 +46,6 @@ export const PopoverInsideIframeRenderedInExternalSlot = (
 
 	return (
 		<SlotFillProvider>
-			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
 			<Popover.Slot name={ SLOT_NAME } />
 			<GenericIframe
 				style={ {

package/src/popover/types.ts

@@ -206,3 +206,13 @@ export type PopoverProps = {
 	 */
 	isAlternate?: boolean;
 };
+
+export type PopoverSlotProps = {
+	/**
+	 * The name of the Slot in which the popover should be rendered. It should
+	 * be also passed to the corresponding `PopoverSlot` component.
+	 *
+	 * @default 'Popover'
+	 */
+	name?: string;
+};

package/src/range-control/index.tsx

@@ -391,17 +391,18 @@ function UnforwardedRangeControl(
  * import { useState } from '@wordpress/element';
  *
  * const MyRangeControl = () => {
- *   const [ isChecked, setChecked ] = useState( true );
+ *   const [ value, setValue ] = useState();
  *   return (
  *     <RangeControl
  *       __nextHasNoMarginBottom
  *       __next40pxDefaultSize
  *       help="Please select how transparent you would like this."
- *       initialPosition={50}
+ *       initialPosition={ 50 }
  *       label="Opacity"
- *       max={100}
- *       min={0}
- *       onChange={() => {}}
+ *       max={ 100 }
+ *       min={ 0 }
+ *       value={ value }
+ *       onChange={ setValue }
  *     />
  *   );
  * };

package/src/toolbar/toolbar-dropdown-menu/index.tsx

@@ -16,7 +16,7 @@ import ToolbarContext from '../toolbar-context';
 import DropdownMenu from '../../dropdown-menu';
 import type { DropdownMenuProps } from '../../dropdown-menu/types';
 
-function ToolbarDropdownMenu(
+function UnforwardedToolbarDropdownMenu(
 	props: DropdownMenuProps,
 	ref: ForwardedRef< any >
 ) {
@@ -44,4 +44,5 @@ function ToolbarDropdownMenu(
 	);
 }
 
-export default forwardRef( ToolbarDropdownMenu );
+export const ToolbarDropdownMenu = forwardRef( UnforwardedToolbarDropdownMenu );
+export default ToolbarDropdownMenu;

package/src/toolbar/toolbar-item/index.tsx

@@ -16,7 +16,7 @@ import warning from '@wordpress/warning';
 import ToolbarContext from '../toolbar-context';
 import type { ToolbarItemProps } from './types';
 
-function ToolbarItem(
+function UnforwardedToolbarItem(
 	{ children, as: Component, ...props }: ToolbarItemProps,
 	ref: ForwardedRef< any >
 ) {
@@ -57,4 +57,5 @@ function ToolbarItem(
 	);
 }
 
-export default forwardRef( ToolbarItem );
+export const ToolbarItem = forwardRef( UnforwardedToolbarItem );
+export default ToolbarItem;

package/src/utils/get-node-text.ts

@@ -0,0 +1,24 @@
+const getNodeText = ( node: React.ReactNode ): string => {
+	if ( node === null ) {
+		return '';
+	}
+
+	switch ( typeof node ) {
+		case 'string':
+		case 'number':
+			return node.toString();
+		case 'object': {
+			if ( node instanceof Array ) {
+				return node.map( getNodeText ).join( '' );
+			}
+			if ( 'props' in node ) {
+				return getNodeText( node.props.children );
+			}
+			return '';
+		}
+		default:
+			return '';
+	}
+};
+
+export default getNodeText;