@wordpress/components 34.0.0 → 35.0.0

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/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/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,

package/src/popover/index.tsx

@@ -199,7 +199,7 @@ const UnforwardedPopover = (
 		} );
 	}
 
-	const arrowRef = useRef< HTMLElement >( null );
+	const arrowRef = useRef< HTMLElement | null >( null );
 
 	const [ fallbackReferenceElement, setFallbackReferenceElement ] =
 		useState< HTMLSpanElement | null >( null );

package/src/popover/types.ts

@@ -1,6 +1,6 @@
 import type { Placement } from '@floating-ui/react-dom';
 import type { useFocusOnMount } from '@wordpress/compose';
-import type { RefObject, ReactNode, SyntheticEvent } from 'react';
+import type { MutableRefObject, ReactNode, SyntheticEvent } from 'react';
 
 type PositionYAxis = 'top' | 'middle' | 'bottom';
 type PositionXAxis = 'left' | 'center' | 'right';
@@ -12,7 +12,9 @@ type DomRectWithOwnerDocument = DOMRect & {
 
 type PopoverPlacement = Placement | 'overlay';
 
-export type PopoverAnchorRefReference = RefObject< Element | null | undefined >;
+export type PopoverAnchorRefReference = MutableRefObject<
+	Element | null | undefined
+>;
 export type PopoverAnchorRefTopBottom = { top: Element; bottom: Element };
 
 export type VirtualElement = Pick< Element, 'getBoundingClientRect' > & {

package/src/range-control/types.ts

@@ -149,7 +149,7 @@ export type RangeControlProps = Pick<
 		 *
 		 * @default () => void
 		 */
-		onChange?: ( value: number | undefined ) => void;
+		onChange?: ( value?: number ) => void;
 		/**
 		 * Callback for when `RangeControl` input gains focus.
 		 *

package/src/responsive-wrapper/index.tsx

@@ -45,20 +45,16 @@ function ResponsiveWrapper( {
 		aspectRatio = `${ naturalWidth } / ${ naturalHeight }`;
 	}
 
-	const ch = children as React.ReactElement<
-		Pick< React.HTMLAttributes< Element >, 'className' | 'style' >
-	>;
-
 	return (
 		<TagName className="components-responsive-wrapper">
 			<div>
-				{ cloneElement( ch, {
+				{ cloneElement( children, {
 					className: clsx(
 						'components-responsive-wrapper__content',
-						ch.props.className
+						children.props.className
 					),
 					style: {
-						...ch.props.style,
+						...children.props.style,
 						aspectRatio,
 					},
 				} ) }

package/src/snackbar/README.md

@@ -61,7 +61,7 @@ The icon to render in the snackbar.
 -   Required: No
 -   Default: `null`
 
-#### `listRef`: `RefObject< HTMLDivElement | null >`
+#### `listRef`: `MutableRefObject< HTMLDivElement | null >`
 
 A ref to the list that contains the snackbar.
 

package/src/snackbar/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { RefObject, ReactNode } from 'react';
+import type { MutableRefObject, ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -25,7 +25,7 @@ type SnackbarOnlyProps = {
 	/**
 	 * A ref to the list that contains the snackbar.
 	 */
-	listRef?: RefObject< HTMLDivElement | null >;
+	listRef?: MutableRefObject< HTMLDivElement | null >;
 };
 
 export type SnackbarProps = Pick<

package/src/tabs/README.md

@@ -164,7 +164,7 @@ still be accessed via the keyboard when navigating through the tablist.
 
 ##### `render`
 
- - Type: `RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }> | ReactElement<unknown, string | JSXElementConstructor<any>>`
+ - Type: `RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }> | ReactElement<any, string | JSXElementConstructor<any>>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React

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

@@ -16,6 +16,7 @@ const meta: Meta< typeof Tabs > = {
 		'Tabs.TabList': Tabs.TabList,
 		'Tabs.Tab': Tabs.Tab,
 		'Tabs.TabPanel': Tabs.TabPanel,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Tabs.Context': Tabs.Context,
 	},
 	tags: [ 'status-private' ],

package/src/tabs/tablist.tsx

@@ -133,7 +133,7 @@ export const TabList = forwardRef<
 		<StyledTabList
 			ref={ refs }
 			store={ store }
-			render={ ( props: React.HTMLAttributes< HTMLDivElement > ) => (
+			render={ ( props ) => (
 				<div
 					{ ...props }
 					// Fallback to -1 to prevent browsers from making the tablist

package/src/tooltip/index.tsx

@@ -93,13 +93,7 @@ function UnforwardedTooltip(
 	// `aria-label`
 	// See: https://github.com/WordPress/gutenberg/pull/64066
 	// See: https://github.com/WordPress/gutenberg/pull/65989
-	function addDescribedById( el: React.ReactElement ) {
-		const element = el as React.ReactElement<
-			Pick<
-				React.HTMLAttributes< Element >,
-				'aria-describedby' | 'aria-label'
-			>
-		>;
+	function addDescribedById( element: React.ReactElement ) {
 		return describedById &&
 			mounted &&
 			element.props[ 'aria-describedby' ] === undefined &&

package/src/tree-grid/test/cell.tsx

@@ -34,6 +34,7 @@ describe( 'TreeGridCell', () => {
 				</TreeGridCell>
 			)
 		).toThrow();
+		expect( console ).toHaveErrored();
 	} );
 
 	it( 'uses a child render function to render children', () => {

package/src/tree-grid/test/roving-tab-index-item.tsx

@@ -26,6 +26,7 @@ describe( 'RovingTabIndexItem', () => {
 		expect( () =>
 			render( <RovingTabIndexItem as={ TestButton } /> )
 		).toThrow();
+		expect( console ).toHaveErrored();
 	} );
 
 	it( 'allows another component to be specified as the rendered component using the `as` prop', () => {

package/src/tree-select/README.md

@@ -118,7 +118,7 @@ If this property is added, an option will be added with this label to represent
 
 ### `onChange`
 
- - Type: `((value: string, extra?: { event?: ChangeEvent<HTMLSelectElement, Element>; }) => void) | undefined`
+ - Type: `((value: string, extra?: { event?: ChangeEvent<HTMLSelectElement>; }) => void) | undefined`
  - Required: No
 
 A function that receives the value of the new option that is being selected as input.

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

@@ -12,13 +12,7 @@ const getNodeText = ( node: React.ReactNode ): string => {
 				return node.map( getNodeText ).join( '' );
 			}
 			if ( 'props' in node ) {
-				return getNodeText(
-					(
-						node as React.ReactElement<
-							React.PropsWithChildren< unknown >
-						>
-					 ).props.children
-				);
+				return getNodeText( node.props.children );
 			}
 			return '';
 		}

package/src/validated-form-controls/control-with-error.tsx

@@ -60,12 +60,7 @@ type ValidityTarget =
 	| HTMLSelectElement
 	| HTMLTextAreaElement;
 
-function UnforwardedControlWithError<
-	C extends React.ReactElement< {
-		label: React.ReactNode;
-		required: boolean;
-	} >,
->(
+function UnforwardedControlWithError< C extends React.ReactElement >(
 	{
 		required,
 		markWhenOptional,