@wordpress/components 34.0.0 → 35.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "34.0.0",
+	"version": "35.0.1",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,7 +43,6 @@
 		"./package.json": "./package.json",
 		"./build-style/": "./build-style/"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": [
@@ -51,49 +50,48 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@ariakit/react": "^0.4.22",
+		"@ariakit/react": "^0.4.21",
 		"@date-fns/utc": "^2.1.1",
 		"@emotion/cache": "^11.14.0",
 		"@emotion/css": "^11.13.5",
-		"@emotion/native": "^11.11.0",
 		"@emotion/react": "^11.14.0",
 		"@emotion/serialize": "^1.3.3",
 		"@emotion/styled": "^11.14.1",
 		"@emotion/utils": "^1.4.2",
-		"@floating-ui/react-dom": "2.0.8",
-		"@types/gradient-parser": "1.1.0",
-		"@types/highlight-words-core": "1.2.1",
-		"@types/react": "^19.2.13",
+		"@floating-ui/react-dom": "^2.0.8",
+		"@types/gradient-parser": "^1.1.0",
+		"@types/highlight-words-core": "^1.2.1",
+		"@types/react": "^18.3.27",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.47.0",
-		"@wordpress/base-styles": "^9.0.0",
-		"@wordpress/compose": "^8.0.0",
-		"@wordpress/date": "^5.47.0",
-		"@wordpress/deprecated": "^4.47.0",
-		"@wordpress/dom": "^4.47.0",
-		"@wordpress/element": "^7.0.0",
-		"@wordpress/escape-html": "^3.47.0",
-		"@wordpress/hooks": "^4.47.0",
-		"@wordpress/html-entities": "^4.47.0",
-		"@wordpress/i18n": "^6.20.0",
-		"@wordpress/icons": "^13.2.0",
-		"@wordpress/is-shallow-equal": "^5.47.0",
-		"@wordpress/keycodes": "^4.47.0",
-		"@wordpress/primitives": "^4.47.0",
-		"@wordpress/private-apis": "^1.47.0",
-		"@wordpress/rich-text": "^7.47.0",
-		"@wordpress/style-runtime": "^0.3.0",
-		"@wordpress/ui": "^0.14.0",
-		"@wordpress/warning": "^3.47.0",
+		"@wordpress/a11y": "^4.48.1",
+		"@wordpress/base-styles": "^10.0.1",
+		"@wordpress/compose": "^8.1.1",
+		"@wordpress/date": "^5.48.1",
+		"@wordpress/deprecated": "^4.48.1",
+		"@wordpress/dom": "^4.48.1",
+		"@wordpress/element": "^8.0.1",
+		"@wordpress/escape-html": "^3.48.1",
+		"@wordpress/hooks": "^4.48.1",
+		"@wordpress/html-entities": "^4.48.1",
+		"@wordpress/i18n": "^6.21.1",
+		"@wordpress/icons": "^14.0.1",
+		"@wordpress/is-shallow-equal": "^5.48.1",
+		"@wordpress/keycodes": "^4.48.1",
+		"@wordpress/primitives": "^4.48.1",
+		"@wordpress/private-apis": "^1.48.1",
+		"@wordpress/rich-text": "^7.48.1",
+		"@wordpress/style-runtime": "^0.4.1",
+		"@wordpress/ui": "^0.15.1",
+		"@wordpress/warning": "^3.48.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
-		"colord": "^2.7.0",
+		"colord": "^2.9.3",
 		"csstype": "^3.2.3",
 		"date-fns": "^4.1.0",
-		"deepmerge": "^4.3.0",
+		"deepmerge": "^4.3.1",
 		"fast-deep-equal": "^3.1.3",
 		"framer-motion": "^11.15.0",
-		"gradient-parser": "1.1.1",
+		"gradient-parser": "^1.1.1",
 		"highlight-words-core": "^1.2.2",
 		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
@@ -108,19 +106,23 @@
 		"@ariakit/test": "^0.4.13",
 		"@storybook/addon-docs": "^10.2.8",
 		"@storybook/react-vite": "^10.2.8",
+		"@testing-library/dom": "^10.4.1",
 		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
 		"@types/jest": "^29.5.14",
-		"@wordpress/jest-console": "^8.47.0",
+		"@types/react-dom": "^18.3.1",
+		"@wordpress/jest-console": "^8.48.1",
 		"snapshot-diff": "^0.10.0",
 		"storybook": "^10.2.8",
 		"timezone-mock": "^1.3.6"
 	},
 	"peerDependencies": {
-		"react": "^19.2.4",
-		"react-dom": "^19.2.4"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d653c5fd6161571a0c2ebde28553d6e25624eacc"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

package/src/autocomplete/README.md

@@ -39,7 +39,7 @@ An array of all of the completers to apply to the current element.
 A ref containing the editable element that will serve as the anchor for `Autocomplete`'s `Popover`.
 
 -   Required: Yes
--   `RefObject< HTMLElement | undefined >`
+-   `MutableRefObject< HTMLElement | undefined >`
 
 ### children
 

package/src/border-control/border-control-dropdown/component.tsx

@@ -160,7 +160,6 @@ const BorderControlDropdown = (
 		resetButtonWrapperClassName,
 		size,
 		__unstablePopoverProps,
-		onToggle: onToggleProp, // Remove from `otherProps` to avoid type errors (native HTML `onToggle` vs `Dropdown` `onToggle`).
 		...otherProps
 	} = useBorderControlDropdown( props );
 
@@ -200,42 +199,44 @@ const BorderControlDropdown = (
 		</Button>
 	);
 
-	const renderContent = () => (
-		<DropdownContentWrapper paddingSize="medium">
-			<VStack className={ popoverControlsClassName } spacing={ 6 }>
-				<ColorPalette
-					className={ popoverContentClassName }
-					value={ color }
-					onChange={ onColorChange }
-					{ ...{ colors, disableCustomColors } }
-					__experimentalIsRenderedInSidebar={
-						__experimentalIsRenderedInSidebar
-					}
-					clearable={ false }
-					enableAlpha={ enableAlpha }
-				/>
-				{ enableStyle && isStyleSettable && (
-					<BorderControlStylePicker
-						label={ __( 'Style' ) }
-						value={ style }
-						onChange={ onStyleChange }
+	const renderContent: DropdownComponentProps[ 'renderContent' ] = () => (
+		<>
+			<DropdownContentWrapper paddingSize="medium">
+				<VStack className={ popoverControlsClassName } spacing={ 6 }>
+					<ColorPalette
+						className={ popoverContentClassName }
+						value={ color }
+						onChange={ onColorChange }
+						{ ...{ colors, disableCustomColors } }
+						__experimentalIsRenderedInSidebar={
+							__experimentalIsRenderedInSidebar
+						}
+						clearable={ false }
+						enableAlpha={ enableAlpha }
 					/>
-				) }
-			</VStack>
-			<div className={ resetButtonWrapperClassName }>
-				<Button
-					variant="tertiary"
-					onClick={ () => {
-						onReset();
-					} }
-					disabled={ ! enableResetButton }
-					accessibleWhenDisabled
-					__next40pxDefaultSize
-				>
-					{ __( 'Reset' ) }
-				</Button>
-			</div>
-		</DropdownContentWrapper>
+					{ enableStyle && isStyleSettable && (
+						<BorderControlStylePicker
+							label={ __( 'Style' ) }
+							value={ style }
+							onChange={ onStyleChange }
+						/>
+					) }
+				</VStack>
+				<div className={ resetButtonWrapperClassName }>
+					<Button
+						variant="tertiary"
+						onClick={ () => {
+							onReset();
+						} }
+						disabled={ ! enableResetButton }
+						accessibleWhenDisabled
+						__next40pxDefaultSize
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</div>
+			</DropdownContentWrapper>
+		</>
 	);
 
 	return (

package/src/card/card/README.md

@@ -85,9 +85,9 @@ This component provides a collection of sub-component that can be used to compos
 
 -   [`<CardBody />`](/packages/components/src/card/card-body/README.md)
 -   [`<CardDivider />`](/packages/components/src/card/card-divider/README.md)
--   [`<CardFooter />`](/packages/components/src/card/card-footer/README.md))
--   [`<CardHeader />`](/packages/components/src/card/card-header/README.md))
--   [`<CardMedia />`](/packages/components/src/card/card-media/README.md))
+-   [`<CardFooter />`](/packages/components/src/card/card-footer/README.md)
+-   [`<CardHeader />`](/packages/components/src/card/card-header/README.md)
+-   [`<CardMedia />`](/packages/components/src/card/card-media/README.md)
 
 ### Sub-Components Example
 
@@ -165,7 +165,7 @@ const Example = () => (
 );
 ```
 
-These sub-components are designed to be flexible. The Context props can be overridden by the sub-component(s) as required. In the following example, the last `<CardBody />` will render it's specified size:
+These sub-components are designed to be flexible. The Context props can be overridden by the sub-component(s) as required. In the following example, the last `<CardBody />` will render its specified size:
 
 ```jsx
 import { Card, CardBody } from '@wordpress/components';

package/src/checkbox-control/README.md

@@ -45,7 +45,7 @@ If only a few child checkboxes are checked, the parent checkbox becomes a mixed
 
 ### Usage
 
-Render an is author checkbox:
+Render an author checkbox:
 
 ```jsx
 import { useState } from 'react';

package/src/clipboard-button/README.md

@@ -51,15 +51,15 @@ The text that will be copied to the clipboard.
 
 The function that will be called when the text is copied.
 
--- Type: `() => void`
--- Required: yes
+- Type: `() => void`
+- Required: yes
 
 ### onFinishCopy
 
 The function that will be called when the text is copied and the copy animation is finished.
 
--- Type: `() => void`
--- Required: no
+- Type: `() => void`
+- Required: no
 
 ### Inherited props
 

package/src/color-palette/index.tsx

@@ -276,6 +276,11 @@ function UnforwardedColorPalette(
 		ariaLabelledby
 	);
 
+	// If disableCustomColors is true and colors.length is 0, return null to avoid rendering an empty palette wrapper.
+	if ( disableCustomColors && colors.length === 0 && ! actions ) {
+		return null;
+	}
+
 	return (
 		<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>
 			{ ! disableCustomColors && (

package/src/color-palette/test/index.tsx

@@ -151,6 +151,20 @@ describe( 'ColorPalette', () => {
 		).not.toBeInTheDocument();
 	} );
 
+	it( 'should render nothing when custom colors are disabled, there are no colors, and it is not clearable', () => {
+		const onChange = jest.fn();
+		const { container } = render(
+			<ColorPalette
+				colors={ [] }
+				disableCustomColors
+				clearable={ false }
+				onChange={ onChange }
+			/>
+		);
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
 	it( 'should render dropdown and its content', async () => {
 		const user = userEvent.setup();
 		const onChange = jest.fn();
@@ -217,6 +231,22 @@ describe( 'ColorPalette', () => {
 		).toBeInTheDocument();
 	} );
 
+	it( 'should still show the clear button when colors is empty and custom colors are disabled', () => {
+		const onChange = jest.fn();
+
+		render(
+			<ColorPalette
+				colors={ [] }
+				disableCustomColors
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Clear' } )
+		).toBeInTheDocument();
+	} );
+
 	it( 'should display the selected color name and value', async () => {
 		const user = userEvent.setup();
 

package/src/combobox-control/README.md

@@ -91,7 +91,7 @@ Function called when the control's search input value changes. The argument cont
 
 #### onChange
 
-Function called with the selected value changes.
+Function called when the selected value changes.
 
 -   Type: `( value: string | null | undefined ) => void`
 -   Required: No

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

@@ -27,6 +27,7 @@ const meta: Meta< typeof Composite > = {
 		'Composite.Item': Composite.Item,
 		'Composite.Hover': Composite.Hover,
 		'Composite.Typeahead': Composite.Typeahead,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Composite.Context': Composite.Context,
 	},
 	argTypes: {

package/src/confirm-dialog/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>
 
-`ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md) and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
+`ConfirmDialog` is built on top of [`Modal`](/packages/components/src/modal/README.md) and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
 
 The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key. It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay).
 

package/src/custom-gradient-picker/gradient-bar/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import type { MouseEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -21,6 +20,7 @@ import type {
 	CustomGradientBarReducerAction,
 	CustomGradientBarIdleState,
 } from '../types';
+import type { MouseEventHandler } from 'react';
 
 const customGradientBarReducer = (
 	state: CustomGradientBarReducerState,

package/src/disabled/index.tsx

@@ -61,7 +61,7 @@ function Disabled( {
 		<Provider value={ isDisabled }>
 			<div
 				// @ts-ignore Reason: inert is a recent HTML attribute
-				inert={ isDisabled ? true : undefined }
+				inert={ isDisabled ? 'true' : undefined }
 				className={
 					isDisabled
 						? cx( disabledStyles, className, 'components-disabled' )

package/src/flex/flex/README.md

@@ -4,7 +4,7 @@
 
 ## Usage
 
-`Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.
+`Flex` is used with any of its two sub-components, `FlexItem` and `FlexBlock`.
 
 ```jsx
 import { Flex, FlexBlock, FlexItem } from '@wordpress/components';

package/src/form-file-upload/README.md

@@ -65,7 +65,7 @@ Whether to allow multiple selection of files or not.
 
 ### `onChange`
 
- - Type: `ChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefined`
+ - Type: `ChangeEventHandler<HTMLInputElement> | undefined`
  - Required: Yes
 
 Callback function passed directly to the `input` file element.

package/src/h-stack/hook.tsx

@@ -29,7 +29,7 @@ export function useHStack( props: WordPressComponentProps< Props, 'div' > ) {
 		const _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] );
 
 		if ( _isSpacer ) {
-			const childElement = child as ReactElement< typeof FlexItem >;
+			const childElement = child as ReactElement;
 			const _key = childElement.key || `hstack-${ index }`;
 
 			return <FlexItem isBlock key={ _key } { ...childElement.props } />;

package/src/higher-order/with-notices/index.tsx

@@ -6,7 +6,7 @@ import { v4 as uuid } from 'uuid';
 /**
  * WordPress dependencies
  */
-import { useState, useMemo } from '@wordpress/element';
+import { forwardRef, useState, useMemo } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -45,7 +45,10 @@ import type { WithNoticeProps } from './types';
  * @return Wrapped component.
  */
 export default createHigherOrderComponent( ( OriginalComponent ) => {
-	return function Component( props: { [ key: string ]: any } ) {
+	function Component(
+		props: { [ key: string ]: any },
+		ref: React.ForwardedRef< any >
+	) {
 		const [ noticeList, setNoticeList ] = useState<
 			WithNoticeProps[ 'noticeList' ]
 		>( [] );
@@ -94,6 +97,20 @@ export default createHigherOrderComponent( ( OriginalComponent ) => {
 			),
 		};
 
-		return <OriginalComponent { ...propsOut } />;
-	};
+		return isForwardRef ? (
+			<OriginalComponent { ...propsOut } ref={ ref } />
+		) : (
+			<OriginalComponent { ...propsOut } />
+		);
+	}
+
+	let isForwardRef: boolean;
+	// @ts-expect-error - `render` will only be present when OriginalComponent was wrapped with forwardRef().
+	const { render } = OriginalComponent;
+	// Returns a forwardRef if OriginalComponent appears to be a forwardRef.
+	if ( typeof render === 'function' ) {
+		isForwardRef = true;
+		return forwardRef( Component );
+	}
+	return Component;
 }, 'withNotices' );

package/src/higher-order/with-notices/test/index.tsx

@@ -33,6 +33,14 @@ function noticesFrom( list: string[] ) {
 	return list.map( ( item ) => ( { id: item, content: item } ) );
 }
 
+function isComponentLike( object: any ) {
+	return typeof object === 'function';
+}
+
+function isForwardRefLike( { render: renderMethod }: any ) {
+	return typeof renderMethod === 'function';
+}
+
 const content = 'Base content';
 
 const BaseComponent = ( {
@@ -72,6 +80,16 @@ const TestNoticeOperations = withNotices(
 	} )
 );
 
+describe( 'withNotices return type', () => {
+	it( 'should be a component given a component', () => {
+		expect( isComponentLike( TestComponent ) ).toBe( true );
+	} );
+
+	it( 'should be a forwardRef given a forwardRef', () => {
+		expect( isForwardRefLike( TestNoticeOperations ) ).toBe( true );
+	} );
+} );
+
 describe( 'withNotices operations', () => {
 	function setup( props: any = {} ) {
 		const handle = createRef< any >();

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

@@ -23,7 +23,6 @@ import {
 	useContextSystem,
 } from '../context';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import type { FlexDirection } from '../flex/types';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -35,7 +34,7 @@ function useUniqueId( idProp?: string ) {
 // Adapter to map props for the new ui/flex component.
 function getUIFlexProps( labelPosition?: LabelPosition ) {
 	const props: {
-		direction?: FlexDirection;
+		direction?: string;
 		gap?: number;
 		justify?: string;
 		expanded?: boolean;
@@ -93,6 +92,7 @@ function InputBase(
 	}, [ __next40pxDefaultSize, size ] );
 
 	return (
+		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
 		<Root
 			{ ...restProps }
 			{ ...getUIFlexProps( labelPosition ) }

package/src/menu/README.md

@@ -120,7 +120,7 @@ make disabled elements still accessible via keyboard.
 
 ##### `render`
 
- - Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
+ - Type: `ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React
@@ -245,7 +245,7 @@ The contents of the menu item's prefix, such as an icon.
 
 ##### `render`
 
- - Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
+ - Type: `ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React
@@ -329,14 +329,14 @@ The radio item's name.
 
 ##### `onChange`
 
- - Type: `BivariantCallback<(event: ChangeEvent<HTMLInputElement, Element>) => void>`
+ - Type: `BivariantCallback<(event: ChangeEvent<HTMLInputElement>) => void>`
  - Required: No
 
 A function that is called when the checkbox's checked state changes.
 
 ##### `render`
 
- - Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
+ - Type: `ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React
@@ -427,14 +427,14 @@ The checkbox menu item's name.
 
 ##### `onChange`
 
- - Type: `ChangeEventHandler<HTMLInputElement, HTMLInputElement>`
+ - Type: `ChangeEventHandler<HTMLInputElement>`
  - Required: No
 
 A function that is called when the checkbox's checked state changes.
 
 ##### `render`
 
- - Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
+ - Type: `ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React
@@ -575,7 +575,7 @@ The contents of the menu item's prefix, such as an icon.
 
 ##### `render`
 
- - Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
+ - Type: `ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React

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

@@ -33,6 +33,7 @@ const meta: Meta< typeof Menu > = {
 		Group: Menu.Group,
 		GroupLabel: Menu.GroupLabel,
 		Separator: Menu.Separator,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		Context: Menu.Context,
 		RadioItem: Menu.RadioItem,
 		ItemLabel: Menu.ItemLabel,