@wordpress/components 23.5.0 → 23.6.0

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

package/src/navigation/back-button/{index.js → index.tsx}

@@ -15,9 +15,17 @@ import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 import { useNavigationContext } from '../context';
 import { MenuBackButtonUI } from '../styles/navigation-styles';
 
-function NavigationBackButton(
-	{ backButtonLabel, className, href, onClick, parentMenu },
-	ref
+import type { NavigationBackButtonProps } from '../types';
+
+function UnforwardedNavigationBackButton(
+	{
+		backButtonLabel,
+		className,
+		href,
+		onClick,
+		parentMenu,
+	}: NavigationBackButtonProps,
+	ref: React.ForwardedRef< HTMLAnchorElement | HTMLButtonElement >
 ) {
 	const { setActiveMenu, navigationTree } = useNavigationContext();
 
@@ -26,9 +34,12 @@ function NavigationBackButton(
 		className
 	);
 
-	const parentMenuTitle = navigationTree.getMenu( parentMenu )?.title;
+	const parentMenuTitle =
+		parentMenu !== undefined
+			? navigationTree.getMenu( parentMenu )?.title
+			: undefined;
 
-	const handleOnClick = ( event ) => {
+	const handleOnClick: React.MouseEventHandler< HTMLElement > = ( event ) => {
 		if ( typeof onClick === 'function' ) {
 			onClick( event );
 		}
@@ -52,4 +63,9 @@ function NavigationBackButton(
 		</MenuBackButtonUI>
 	);
 }
-export default forwardRef( NavigationBackButton );
+
+export const NavigationBackButton = forwardRef(
+	UnforwardedNavigationBackButton
+);
+
+export default NavigationBackButton;

package/src/navigation/{context.js → context.tsx}

@@ -8,27 +8,30 @@ import { createContext, useContext } from '@wordpress/element';
  */
 import { ROOT_MENU } from './constants';
 
+import type { NavigationContext as NavigationContextType } from './types';
+
 const noop = () => {};
+const defaultIsEmpty = () => false;
+const defaultGetter = () => undefined;
 
-export const NavigationContext = createContext( {
+export const NavigationContext = createContext< NavigationContextType >( {
 	activeItem: undefined,
 	activeMenu: ROOT_MENU,
 	setActiveMenu: noop,
-	isMenuEmpty: noop,
 
 	navigationTree: {
 		items: {},
-		getItem: noop,
+		getItem: defaultGetter,
 		addItem: noop,
 		removeItem: noop,
 
 		menus: {},
-		getMenu: noop,
+		getMenu: defaultGetter,
 		addMenu: noop,
 		removeMenu: noop,
 		childMenu: {},
 		traverseMenu: noop,
-		isMenuEmpty: noop,
+		isMenuEmpty: defaultIsEmpty,
 	},
 } );
 export const useNavigationContext = () => useContext( NavigationContext );

package/src/navigation/group/context.tsx

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NavigationGroupContext as NavigationGroupContextType } from '../types';
+
+export const NavigationGroupContext =
+	createContext< NavigationGroupContextType >( { group: undefined } );
+
+export const useNavigationGroupContext = () =>
+	useContext( NavigationGroupContext );

package/src/navigation/group/{index.js → index.tsx}

@@ -15,9 +15,15 @@ import { NavigationGroupContext } from './context';
 import { GroupTitleUI } from '../styles/navigation-styles';
 import { useNavigationContext } from '../context';
 
+import type { NavigationGroupProps } from '../types';
+
 let uniqueId = 0;
 
-export default function NavigationGroup( { children, className, title } ) {
+export function NavigationGroup( {
+	children,
+	className,
+	title,
+}: NavigationGroupProps ) {
 	const [ groupId ] = useState( `group-${ ++uniqueId }` );
 	const {
 		navigationTree: { items },
@@ -60,3 +66,5 @@ export default function NavigationGroup( { children, className, title } ) {
 		</NavigationGroupContext.Provider>
 	);
 }
+
+export default NavigationGroup;

package/src/navigation/{index.js → index.tsx}

@@ -18,21 +18,70 @@ import { NavigationContext } from './context';
 import { NavigationUI } from './styles/navigation-styles';
 import { useCreateNavigationTree } from './use-create-navigation-tree';
 
+import type {
+	NavigationProps,
+	NavigationContext as NavigationContextType,
+} from './types';
+
 const noop = () => {};
 
-export default function Navigation( {
+/**
+ * Render a navigation list with optional groupings and hierarchy.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalNavigation as Navigation,
+ *   __experimentalNavigationGroup as NavigationGroup,
+ *   __experimentalNavigationItem as NavigationItem,
+ *   __experimentalNavigationMenu as NavigationMenu,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <Navigation>
+ *     <NavigationMenu title="Home">
+ *       <NavigationGroup title="Group 1">
+ *         <NavigationItem item="item-1" title="Item 1" />
+ *         <NavigationItem item="item-2" title="Item 2" />
+ *       </NavigationGroup>
+ *       <NavigationGroup title="Group 2">
+ *         <NavigationItem
+ *           item="item-3"
+ *           navigateToMenu="category"
+ *           title="Category"
+ *         />
+ *       </NavigationGroup>
+ *     </NavigationMenu>
+ *
+ *     <NavigationMenu
+ *       backButtonLabel="Home"
+ *       menu="category"
+ *       parentMenu="root"
+ *       title="Category"
+ *     >
+ *       <NavigationItem badge="1" item="child-1" title="Child 1" />
+ *       <NavigationItem item="child-2" title="Child 2" />
+ *     </NavigationMenu>
+ *   </Navigation>
+ * );
+ * ```
+ */
+export function Navigation( {
 	activeItem,
 	activeMenu = ROOT_MENU,
 	children,
 	className,
 	onActivateMenu = noop,
-} ) {
+}: NavigationProps ) {
 	const [ menu, setMenu ] = useState( activeMenu );
-	const [ slideOrigin, setSlideOrigin ] = useState();
+	const [ slideOrigin, setSlideOrigin ] = useState< 'left' | 'right' >();
 	const navigationTree = useCreateNavigationTree();
 	const defaultSlideOrigin = isRTL() ? 'right' : 'left';
 
-	const setActiveMenu = ( menuId, slideInOrigin = defaultSlideOrigin ) => {
+	const setActiveMenu: NavigationContextType[ 'setActiveMenu' ] = (
+		menuId,
+		slideInOrigin = defaultSlideOrigin
+	) => {
 		if ( ! navigationTree.getMenu( menuId ) ) {
 			return;
 		}
@@ -76,9 +125,14 @@ export default function Navigation( {
 		<NavigationUI className={ classes }>
 			<div
 				key={ menu }
-				className={ classnames( {
-					[ animateClassName ]: isMounted.current && slideOrigin,
-				} ) }
+				className={
+					animateClassName
+						? classnames( {
+								[ animateClassName ]:
+									isMounted.current && slideOrigin,
+						  } )
+						: undefined
+				}
 			>
 				<NavigationContext.Provider value={ context }>
 					{ children }
@@ -87,3 +141,5 @@ export default function Navigation( {
 		</NavigationUI>
 	);
 }
+
+export default Navigation;

package/src/navigation/item/{base-content.js → base-content.tsx}

@@ -3,7 +3,11 @@
  */
 import { ItemBadgeUI, ItemTitleUI } from '../styles/navigation-styles';
 
-export default function NavigationItemBaseContent( props ) {
+import type { NavigationItemBaseContentProps } from '../types';
+
+export default function NavigationItemBaseContent(
+	props: NavigationItemBaseContentProps
+) {
 	const { badge, title } = props;
 
 	return (
@@ -11,7 +15,6 @@ export default function NavigationItemBaseContent( props ) {
 			{ title && (
 				<ItemTitleUI
 					className="components-navigation__item-title"
-					variant="body.small"
 					as="span"
 				>
 					{ title }

package/src/navigation/item/{base.js → base.tsx}

@@ -15,9 +15,11 @@ import { useNavigationContext } from '../context';
 import { useNavigationTreeItem } from './use-navigation-tree-item';
 import { ItemBaseUI } from '../styles/navigation-styles';
 
+import type { NavigationItemBaseProps } from '../types';
+
 let uniqueId = 0;
 
-export default function NavigationItemBase( props ) {
+export default function NavigationItemBase( props: NavigationItemBaseProps ) {
 	// Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.
 	const { children, className, title, href, ...restProps } = props;
 

package/src/navigation/item/{index.js → index.tsx}

@@ -18,9 +18,11 @@ import { ItemUI, ItemIconUI } from '../styles/navigation-styles';
 import NavigationItemBaseContent from './base-content';
 import NavigationItemBase from './base';
 
+import type { NavigationItemProps } from '../types';
+
 const noop = () => {};
 
-export default function NavigationItem( props ) {
+export function NavigationItem( props: NavigationItemProps ) {
 	const {
 		badge,
 		children,
@@ -59,7 +61,9 @@ export default function NavigationItem( props ) {
 		'is-active': isActive,
 	} );
 
-	const onItemClick = ( event ) => {
+	const onItemClick: React.MouseEventHandler<
+		HTMLButtonElement | HTMLAnchorElement
+	> = ( event ) => {
 		if ( navigateToMenu ) {
 			setActiveMenu( navigateToMenu );
 		}
@@ -99,3 +103,5 @@ export default function NavigationItem( props ) {
 		</NavigationItemBase>
 	);
 }
+
+export default NavigationItem;

package/src/navigation/item/{use-navigation-tree-item.js → use-navigation-tree-item.tsx}

@@ -11,7 +11,12 @@ import { useNavigationGroupContext } from '../group/context';
 import { useNavigationMenuContext } from '../menu/context';
 import { normalizedSearch } from '../utils';
 
-export const useNavigationTreeItem = ( itemId, props ) => {
+import type { NavigationItemProps } from '../types';
+
+export const useNavigationTreeItem = (
+	itemId: string,
+	props: NavigationItemProps
+) => {
 	const {
 		activeMenu,
 		navigationTree: { addItem, removeItem },
@@ -22,7 +27,9 @@ export const useNavigationTreeItem = ( itemId, props ) => {
 	useEffect( () => {
 		const isMenuActive = activeMenu === menu;
 		const isItemVisible =
-			! search || normalizedSearch( props.title, search );
+			! search ||
+			( props.title !== undefined &&
+				normalizedSearch( props.title, search ) );
 
 		addItem( itemId, {
 			...props,

package/src/navigation/menu/context.tsx

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NavigationMenuContext as NavigationMenuContextType } from '../types';
+
+export const NavigationMenuContext = createContext< NavigationMenuContextType >(
+	{
+		menu: undefined,
+		search: '',
+	}
+);
+export const useNavigationMenuContext = () =>
+	useContext( NavigationMenuContext );

package/src/navigation/menu/{index.js → index.tsx}

@@ -21,7 +21,9 @@ import NavigationSearchNoResultsFound from './search-no-results-found';
 import { NavigableMenu } from '../../navigable-container';
 import { MenuUI } from '../styles/navigation-styles';
 
-export default function NavigationMenu( props ) {
+import type { NavigationMenuProps } from '../types';
+
+export function NavigationMenu( props: NavigationMenuProps ) {
 	const {
 		backButtonLabel,
 		children,
@@ -96,3 +98,5 @@ export default function NavigationMenu( props ) {
 		</NavigationMenuContext.Provider>
 	);
 }
+
+export default NavigationMenu;

package/src/navigation/menu/{menu-title-search.js → menu-title-search.tsx}

@@ -13,24 +13,26 @@ import { useNavigationContext } from '../context';
 import { MenuTitleSearchUI } from '../styles/navigation-styles';
 import { SEARCH_FOCUS_DELAY } from '../constants';
 
+import type { NavigationMenuTitleSearchProps } from '../types';
+
 function MenuTitleSearch( {
 	debouncedSpeak,
 	onCloseSearch,
 	onSearch,
 	search,
 	title,
-} ) {
+}: NavigationMenuTitleSearchProps ) {
 	const {
 		navigationTree: { items },
 	} = useNavigationContext();
 	const { menu } = useNavigationMenuContext();
-	const inputRef = useRef();
+	const inputRef = useRef< HTMLInputElement >( null );
 
 	// Wait for the slide-in animation to complete before autofocusing the input.
 	// This prevents scrolling to the input during the animation.
 	useEffect( () => {
 		const delayedFocus = setTimeout( () => {
-			inputRef.current.focus();
+			inputRef.current?.focus();
 		}, SEARCH_FOCUS_DELAY );
 
 		return () => {
@@ -57,16 +59,18 @@ function MenuTitleSearch( {
 	}, [ items, search ] );
 
 	const onClose = () => {
-		onSearch( '' );
+		onSearch?.( '' );
 		onCloseSearch();
 	};
 
-	function onKeyDown( event ) {
+	const onKeyDown: React.KeyboardEventHandler< HTMLInputElement > = (
+		event
+	) => {
 		if ( event.code === 'Escape' && ! event.defaultPrevented ) {
 			event.preventDefault();
 			onClose();
 		}
-	}
+	};
 
 	const inputId = `components-navigation__menu-title-search-${ menu }`;
 	const placeholder = sprintf(
@@ -81,7 +85,7 @@ function MenuTitleSearch( {
 				autoComplete="off"
 				className="components-navigation__menu-search-input"
 				id={ inputId }
-				onChange={ ( value ) => onSearch( value ) }
+				onChange={ ( value ) => onSearch?.( value ) }
 				onKeyDown={ onKeyDown }
 				placeholder={ placeholder }
 				onClose={ onClose }

package/src/navigation/menu/{menu-title.js → menu-title.tsx}

@@ -19,16 +19,18 @@ import {
 import { useNavigationMenuContext } from './context';
 import { SEARCH_FOCUS_DELAY } from '../constants';
 
+import type { NavigationMenuTitleProps } from '../types';
+
 export default function NavigationMenuTitle( {
 	hasSearch,
 	onSearch,
 	search,
 	title,
 	titleAction,
-} ) {
+}: NavigationMenuTitleProps ) {
 	const [ isSearching, setIsSearching ] = useState( false );
 	const { menu } = useNavigationMenuContext();
-	const searchButtonRef = useRef();
+	const searchButtonRef = useRef< HTMLElement >( null );
 
 	if ( ! title ) {
 		return null;
@@ -40,7 +42,7 @@ export default function NavigationMenuTitle( {
 		// Wait for the slide-in animation to complete before focusing the search button.
 		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
 		setTimeout( () => {
-			searchButtonRef.current.focus();
+			searchButtonRef.current?.focus();
 		}, SEARCH_FOCUS_DELAY );
 	};
 

package/src/navigation/menu/{search-no-results-found.js → search-no-results-found.tsx}

@@ -9,7 +9,11 @@ import { __ } from '@wordpress/i18n';
 import { useNavigationContext } from '../context';
 import { ItemBaseUI, ItemUI } from '../styles/navigation-styles';
 
-export default function NavigationSearchNoResultsFound( { search } ) {
+import type { NavigationSearchNoResultsFoundProps } from '../types';
+
+export default function NavigationSearchNoResultsFound( {
+	search,
+}: NavigationSearchNoResultsFoundProps ) {
 	const {
 		navigationTree: { items },
 	} = useNavigationContext();