@wordpress/components 23.4.0 → 23.6.0

package/src/higher-order/with-filters/{index.js → index.tsx}

@@ -13,11 +13,37 @@ const ANIMATION_FRAME_PERIOD = 16;
  * to be mounted. When a filter is added or removed that matches the hook name,
  * the wrapped component re-renders.
  *
- * @param {string} hookName Hook name exposed to be used by filters.
+ * @param hookName Hook name exposed to be used by filters.
  *
- * @return {Function} Higher-order component factory.
+ * @return Higher-order component factory.
+ *
+ * ```jsx
+ * import { withFilters } from '@wordpress/components';
+ * import { addFilter } from '@wordpress/hooks';
+ *
+ * const MyComponent = ( { title } ) => <h1>{ title }</h1>;
+ *
+ * const ComponentToAppend = () => <div>Appended component</div>;
+ *
+ * function withComponentAppended( FilteredComponent ) {
+ * 	return ( props ) => (
+ * 		<>
+ * 			<FilteredComponent { ...props } />
+ * 			<ComponentToAppend />
+ * 		</>
+ * 	);
+ * }
+ *
+ * addFilter(
+ * 	'MyHookName',
+ * 	'my-plugin/with-component-appended',
+ * 	withComponentAppended
+ * );
+ *
+ * const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent );
+ * ```
  */
-export default function withFilters( hookName ) {
+export default function withFilters( hookName: string ) {
 	return createHigherOrderComponent( ( OriginalComponent ) => {
 		const namespace = 'core/with-filters/' + hookName;
 
@@ -25,10 +51,8 @@ export default function withFilters( hookName ) {
 		 * The component definition with current filters applied. Each instance
 		 * reuse this shared reference as an optimization to avoid excessive
 		 * calls to `applyFilters` when many instances exist.
-		 *
-		 * @type {?Component}
 		 */
-		let FilteredComponent;
+		let FilteredComponent: React.ComponentType;
 
 		/**
 		 * Initializes the FilteredComponent variable once, if not already
@@ -36,13 +60,18 @@ export default function withFilters( hookName ) {
 		 */
 		function ensureFilteredComponent() {
 			if ( FilteredComponent === undefined ) {
-				FilteredComponent = applyFilters( hookName, OriginalComponent );
+				FilteredComponent = applyFilters(
+					hookName,
+					OriginalComponent
+				) as React.ComponentType;
 			}
 		}
 
 		class FilteredComponentRenderer extends Component {
-			constructor() {
-				super( ...arguments );
+			static instances: FilteredComponentRenderer[];
+
+			constructor( props: { [ key: string ]: any } ) {
+				super( props );
 
 				ensureFilteredComponent();
 			}
@@ -86,7 +115,10 @@ export default function withFilters( hookName ) {
 		const throttledForceUpdate = debounce( () => {
 			// Recreate the filtered component, only after delay so that it's
 			// computed once, even if many filters added.
-			FilteredComponent = applyFilters( hookName, OriginalComponent );
+			FilteredComponent = applyFilters(
+				hookName,
+				OriginalComponent
+			) as React.ComponentType;
 
 			// Force each instance to render.
 			FilteredComponentRenderer.instances.forEach( ( instance ) => {
@@ -99,9 +131,9 @@ export default function withFilters( hookName ) {
 		 * mounted instance should re-render with the new filters having been
 		 * applied to the original component.
 		 *
-		 * @param {string} updatedHookName Name of the hook that was updated.
+		 * @param updatedHookName Name of the hook that was updated.
 		 */
-		function onHooksUpdated( updatedHookName ) {
+		function onHooksUpdated( updatedHookName: string ) {
 			if ( updatedHookName === hookName ) {
 				throttledForceUpdate();
 			}

package/src/higher-order/with-filters/test/{index.js → index.tsx}

@@ -18,7 +18,11 @@ describe( 'withFilters', () => {
 	const MyComponent = () => <div>My component</div>;
 
 	afterEach( () => {
-		removeAllFilters( hookName );
+		removeAllFilters( hookName, 'test/enhanced-component-override' );
+		removeAllFilters( hookName, 'test/enhanced-component-compose' );
+		removeAllFilters( hookName, 'test/enhanced-component-spy' );
+		removeAllFilters( hookName, 'test/enhanced-component-spy-1' );
+		removeAllFilters( hookName, 'test/enhanced-component-spy-2' );
 	} );
 
 	it( 'should display original component when no filters applied', () => {

package/src/higher-order/with-focus-return/index.tsx

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { createHigherOrderComponent, useFocusReturn } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Returns true if the given object is component-like. An object is component-
+ * like if it is an instance of wp.element.Component, or is a function.
+ *
+ * @param object Object to test.
+ *
+ * @return Whether object is component-like.
+ */
+function isComponentLike( object: any ): object is React.ComponentType {
+	return object instanceof Component || typeof object === 'function';
+}
+
+type Props = {
+	onFocusReturn?: () => void;
+};
+
+/**
+ * Higher Order Component used to be used to wrap disposable elements like
+ * sidebars, modals, dropdowns. When mounting the wrapped component, we track a
+ * reference to the current active element so we know where to restore focus
+ * when the component is unmounted.
+ *
+ * @param options The component to be enhanced with
+ *                focus return behavior, or an object
+ *                describing the component and the
+ *                focus return characteristics.
+ *
+ * @return Higher Order Component with the focus restauration behaviour.
+ */
+export default createHigherOrderComponent(
+	// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types
+	( options: WPComponent | Record< string, unknown > ) => {
+		const HoC =
+			( { onFocusReturn }: Props = {} ) =>
+			( WrappedComponent: React.ComponentType ) => {
+				const WithFocusReturn = (
+					props: Record< string, unknown >
+				) => {
+					const ref = useFocusReturn( onFocusReturn );
+					return (
+						<div ref={ ref }>
+							<WrappedComponent { ...props } />
+						</div>
+					);
+				};
+
+				return WithFocusReturn;
+			};
+
+		if ( isComponentLike( options ) ) {
+			const WrappedComponent = options;
+			return HoC()( WrappedComponent );
+		}
+
+		return HoC( options );
+	},
+	'withFocusReturn'
+);
+
+export const Provider = ( { children }: { children: React.ReactNode } ) => {
+	deprecated( 'wp.components.FocusReturnProvider component', {
+		since: '5.7',
+		hint: 'This provider is not used anymore. You can just remove it from your codebase',
+	} );
+
+	return children;
+};

package/src/higher-order/with-focus-return/test/{index.js → index.tsx}

@@ -12,9 +12,9 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import withFocusReturn from '../';
+import withFocusReturn from '..';
 
-class Test extends Component {
+class Test extends Component< { className: string; focusHistory: unknown } > {
 	render() {
 		const { className, focusHistory } = this.props;
 		return (

package/src/higher-order/with-notices/README.md

@@ -2,7 +2,7 @@
 
 `withNotices` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) used typically in adding the ability to post notice messages within the original component.
 
-Wrapping the original component with `withNotices` encapsulates the component with the additional props `noticeOperations` and `noticeUI`.
+Wrapping the original component with `withNotices` encapsulates the component with the additional props `noticeOperations`, `noticeUI`, and `noticeList`.
 
 **noticeOperations**
 Contains a number of useful functions to add notices to your site.
@@ -34,6 +34,9 @@ _Parameters_
 <a  name="noticeUi"  href="#noticeUi">#</a>**noticeUi**
 The rendered `NoticeList`.
 
+<a  name="noticeList"  href="#noticeList">#</a>**noticeList**
+The array of notice objects to be displayed.
+
 ## Usage
 
 ```jsx

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

@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { v4 as uuid } from 'uuid';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useState, useMemo } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import NoticeList from '../../notice/list';
+import type { WithNoticeProps } from './types';
+
+/**
+ * Override the default edit UI to include notices if supported.
+ *
+ * Wrapping the original component with `withNotices` encapsulates the component
+ * with the additional props `noticeOperations` and `noticeUI`.
+ *
+ * ```jsx
+ * import { withNotices, Button } from '@wordpress/components';
+ *
+ * const MyComponentWithNotices = withNotices(
+ * 	( { noticeOperations, noticeUI } ) => {
+ * 		const addError = () =>
+ * 			noticeOperations.createErrorNotice( 'Error message' );
+ * 		return (
+ * 			<div>
+ * 				{ noticeUI }
+ * 				<Button variant="secondary" onClick={ addError }>
+ * 					Add error
+ * 				</Button>
+ * 			</div>
+ * 		);
+ * 	}
+ * );
+ * ```
+ *
+ * @param OriginalComponent Original component.
+ *
+ * @return Wrapped component.
+ */
+export default createHigherOrderComponent( ( OriginalComponent ) => {
+	function Component(
+		props: { [ key: string ]: any },
+		ref: React.ForwardedRef< any >
+	) {
+		const [ noticeList, setNoticeList ] = useState<
+			WithNoticeProps[ 'noticeList' ]
+		>( [] );
+
+		const noticeOperations = useMemo<
+			WithNoticeProps[ 'noticeOperations' ]
+		>( () => {
+			const createNotice: WithNoticeProps[ 'noticeOperations' ][ 'createNotice' ] =
+				( notice ) => {
+					const noticeToAdd = notice.id
+						? notice
+						: { ...notice, id: uuid() };
+					setNoticeList( ( current ) => [ ...current, noticeToAdd ] );
+				};
+
+			return {
+				createNotice,
+				createErrorNotice: ( msg ) => {
+					// @ts-expect-error TODO: Missing `id`, potentially a bug
+					createNotice( {
+						status: 'error',
+						content: msg,
+					} );
+				},
+				removeNotice: ( id ) => {
+					setNoticeList( ( current ) =>
+						current.filter( ( notice ) => notice.id !== id )
+					);
+				},
+				removeAllNotices: () => {
+					setNoticeList( [] );
+				},
+			};
+		}, [] );
+
+		const propsOut = {
+			...props,
+			noticeList,
+			noticeOperations,
+			noticeUI: noticeList.length > 0 && (
+				<NoticeList
+					className="components-with-notices-ui"
+					notices={ noticeList }
+					onRemove={ noticeOperations.removeNotice }
+				/>
+			),
+		};
+
+		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.js → index.tsx}

@@ -24,25 +24,30 @@ import {
  * Internal dependencies
  */
 import withNotices from '..';
+import type { WithNoticeProps } from '../types';
 
 // Implementation detail of Notice component used to query the dismissal button.
 const stockDismissText = 'Dismiss this notice';
 
-function noticesFrom( list ) {
+function noticesFrom( list: string[] ) {
 	return list.map( ( item ) => ( { id: item, content: item } ) );
 }
 
-function isComponentLike( object ) {
+function isComponentLike( object: any ) {
 	return typeof object === 'function';
 }
 
-function isForwardRefLike( { render: renderMethod } ) {
+function isForwardRefLike( { render: renderMethod }: any ) {
 	return typeof renderMethod === 'function';
 }
 
 const content = 'Base content';
 
-const BaseComponent = ( { noticeOperations, noticeUI, notifications } ) => {
+const BaseComponent = ( {
+	noticeOperations,
+	noticeUI,
+	notifications,
+}: WithNoticeProps & { notifications: ReturnType< typeof noticesFrom > } ) => {
 	useEffect( () => {
 		if ( notifications ) {
 			notifications.forEach( ( item ) =>
@@ -78,8 +83,8 @@ describe( 'withNotices return type', () => {
 } );
 
 describe( 'withNotices operations', () => {
-	let handle;
-	const Handle = ( props ) => {
+	let handle: React.MutableRefObject< any >;
+	const Handle = ( props: any ) => {
 		handle = useRef();
 		return <TestNoticeOperations { ...props } ref={ handle } />;
 	};

package/src/higher-order/with-notices/types.ts

@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+import type { NoticeListProps } from '../../notice/types';
+
+export type WithNoticeProps = {
+	noticeList: NoticeListProps[ 'notices' ];
+	noticeOperations: {
+		/**
+		 * Function passed down as a prop that adds a new notice.
+		 *
+		 * @param notice Notice to add.
+		 */
+		createNotice: (
+			notice: NoticeListProps[ 'notices' ][ number ]
+		) => void;
+		/**
+		 * Function passed as a prop that adds a new error notice.
+		 *
+		 * @param msg Error message of the notice.
+		 */
+		createErrorNotice: ( msg: string ) => void;
+		/**
+		 * Removes a notice by id.
+		 *
+		 * @param id Id of the notice to remove.
+		 */
+		removeNotice: ( id: string ) => void;
+		/**
+		 * Removes all notices
+		 */
+		removeAllNotices: () => void;
+	};
+	noticeUI: false | JSX.Element;
+};

package/src/higher-order/with-spoken-messages/test/{index.js → index.tsx}

@@ -12,7 +12,8 @@ describe( 'withSpokenMessages', () => {
 	it( 'should generate speak and debouncedSpeak props', () => {
 		const testSpeak = jest.fn();
 		const testDebouncedSpeak = jest.fn();
-		const isFunction = ( maybeFunc ) => typeof maybeFunc === 'function';
+		const isFunction = ( maybeFunc: any ) =>
+			typeof maybeFunc === 'function';
 		const DumpComponent = withSpokenMessages(
 			( { speak, debouncedSpeak } ) => {
 				testSpeak( isFunction( speak ) );

package/src/icon/index.tsx

@@ -9,7 +9,6 @@ import type { ComponentType, HTMLProps, SVGProps } from 'react';
 import {
 	cloneElement,
 	createElement,
-	Component,
 	isValidElement,
 } from '@wordpress/element';
 import { SVG } from '@wordpress/primitives';
@@ -20,16 +19,20 @@ import { SVG } from '@wordpress/primitives';
 import Dashicon from '../dashicon';
 import type { IconKey as DashiconIconKey } from '../dashicon/types';
 
-export type IconType< P > = DashiconIconKey | ComponentType< P > | JSX.Element;
+export type IconType =
+	| DashiconIconKey
+	| ComponentType< { size?: number } >
+	| ( ( props: { size?: number } ) => JSX.Element )
+	| JSX.Element;
 
-interface BaseProps< P > {
+interface BaseProps {
 	/**
 	 * The icon to render. Supported values are: Dashicons (specified as
 	 * strings), functions, Component instances and `null`.
 	 *
 	 * @default null
 	 */
-	icon?: IconType< P > | null;
+	icon?: IconType | null;
 	/**
 	 * The size (width and height) of the icon.
 	 *
@@ -44,13 +47,13 @@ type AdditionalProps< T > = T extends ComponentType< infer U >
 	? SVGProps< SVGSVGElement >
 	: {};
 
-export type Props< P > = BaseProps< P > & AdditionalProps< IconType< P > >;
+export type Props = BaseProps & AdditionalProps< IconType >;
 
-function Icon< P >( {
+function Icon( {
 	icon = null,
 	size = 'string' === typeof icon ? 20 : 24,
 	...additionalProps
-}: Props< P > ) {
+}: Props ) {
 	if ( 'string' === typeof icon ) {
 		return (
 			<Dashicon
@@ -68,14 +71,7 @@ function Icon< P >( {
 	}
 
 	if ( 'function' === typeof icon ) {
-		if ( icon.prototype instanceof Component ) {
-			return createElement( icon, {
-				size,
-				...additionalProps,
-			} as unknown as P );
-		}
-
-		return ( icon as ( ...args: any[] ) => JSX.Element )( {
+		return createElement( icon, {
 			size,
 			...additionalProps,
 		} );

package/src/icon/test/{index.js → index.tsx}

@@ -3,11 +3,15 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
 /**
  * Internal dependencies
  */
-import Icon from '../';
-import { Path, SVG } from '../../';
+import Icon from '..';
 
 describe( 'Icon', () => {
 	const testId = 'icon';

package/src/index.native.js

@@ -35,6 +35,7 @@ export {
 
 export { default as __experimentalStyleProvider } from './style-provider';
 export { default as BaseControl } from './base-control';
+export { hasSplitBorders as __experimentalHasSplitBorders } from './border-box-control/utils';
 export { default as TextareaControl } from './textarea-control';
 export { default as PanelBody } from './panel/body';
 export { default as PanelActions } from './panel/actions';

package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js

@@ -28,7 +28,7 @@ const TestScreen = ( { fullScreen, name, navigateTo } ) => {
 };
 
 beforeAll( () => {
-	jest.useFakeTimers( 'legacy' );
+	jest.useFakeTimers( { legacyFakeTimers: true } );
 } );
 
 afterAll( () => {

package/src/mobile/bottom-sheet/cell.native.js

@@ -234,7 +234,7 @@ class BottomSheetCell extends Component {
 			// we show the TextInput just when the user wants to edit the value,
 			// and the Text component to display it.
 			// We also show the TextInput to display placeholder.
-			const shouldShowPlaceholder = isValueEditable && value === '';
+			const shouldShowPlaceholder = isInteractive && value === '';
 			return this.state.isEditingValue || shouldShowPlaceholder ? (
 				<TextInput
 					ref={ ( c ) => ( this._valueTextInput = c ) }

package/src/mobile/bottom-sheet-text-control/README.md

@@ -64,7 +64,14 @@ A function that receives the value that's input into the text editor.
 
 #### placeholder
 
-The placeholder text that will display in the component's subsheet, when its text editor is empty.
+The placeholder text that will display in the component's cell and subsheet when there is no set value.
+
+-   Type: `String`
+-   Required: No
+
+### cellPlaceholder
+
+The placeholder text that will display in the component's cell when there is no set value. The `cellPlaceholder` will override the more generic placeholder prop when set, enabling the placeholders in the component's cell and subsheet to be different if desired.
 
 -   Type: `String`
 -   Required: No

package/src/mobile/bottom-sheet-text-control/index.native.js

@@ -28,6 +28,7 @@ const BottomSheetTextControl = ( {
 	label,
 	icon,
 	footerNote,
+	cellPlaceholder,
 } ) => {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -57,10 +58,10 @@ const BottomSheetTextControl = ( {
 			navigationButton={
 				<BottomSheet.Cell
 					icon={ icon }
-					placeholder={ placeholder }
 					label={ label }
 					onPress={ openSubSheet }
 					value={ initialValue || '' }
+					placeholder={ cellPlaceholder || placeholder || '' }
 				>
 					<Icon icon={ chevronRight }></Icon>
 				</BottomSheet.Cell>

package/src/mobile/global-styles-context/utils.native.js

@@ -416,6 +416,7 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 				fontSizes,
 				customLineHeight: features?.custom?.[ 'line-height' ],
 			},
+			spacing: features?.spacing,
 		},
 		__experimentalGlobalStylesBaseStyles: globalStyles,
 	};

package/src/mobile/link-settings/test/link-settings-navigation.native.js

@@ -10,7 +10,7 @@ import { render, fireEvent, waitFor } from 'test/helpers';
 import LinkSettingsNavigation from '../link-settings-navigation';
 
 beforeAll( () => {
-	jest.useFakeTimers( 'legacy' );
+	jest.useFakeTimers( { legacyFakeTimers: true } );
 } );
 
 afterAll( () => {

package/src/navigation/README.md

@@ -122,7 +122,7 @@ The unique identifier of the menu. The root menu can omit this, and it will defa
 
 ### onSearch
 
--   Type: `function`
+-   Type: `( searchString: string ) => void;`
 -   Required: No
 
 When `hasSearch` is active, this function handles the search input's `onChange` event, making it controlled from the outside. It requires setting the `search` prop as well.
@@ -162,6 +162,13 @@ Indicates whether the menu is empty or not. Used together with the `hideIfTarget
 
 The menu title. It's also the field used by the menu search function.
 
+### `titleAction`
+
+-   Type: `React.ReactNode`
+-   Required: No
+
+Use this prop to render additional actions in the menu title.
+
 ## Navigation Group Props
 
 `NavigationGroup` supports the following props.
@@ -205,6 +212,13 @@ Optional className for the `NavigationItem` component.
 
 If provided, renders `a` instead of `button`.
 
+### `icon`
+
+-   Type: `JSX.Element`
+-   Required: No
+
+If no `children` are passed, this prop allows to specify a custom icon for the menu item.
+
 ### `item`
 
 -   Type: `string`
@@ -228,7 +242,7 @@ Indicates whether this item should be hidden if the menu specified in `navigateT
 
 ### `onClick`
 
--   Type: `function`
+-   Type: `React.MouseEventHandler`
 -   Required: No
 
 A callback to handle clicking on a menu item.