@wordpress/components 29.0.0 → 29.1.0

package/src/menu/checkbox-item.tsx

@@ -21,7 +21,7 @@ export const MenuCheckboxItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< MenuCheckboxItemProps, 'div', false >
 >( function MenuCheckboxItem(
-	{ suffix, children, hideOnClick = false, ...props },
+	{ suffix, children, disabled = false, hideOnClick = false, ...props },
 	ref
 ) {
 	const menuContext = useContext( MenuContext );
@@ -37,6 +37,7 @@ export const MenuCheckboxItem = forwardRef<
 			ref={ ref }
 			{ ...props }
 			accessibleWhenDisabled
+			disabled={ disabled }
 			hideOnClick={ hideOnClick }
 			store={ menuContext.store }
 		>

package/src/menu/index.tsx

@@ -2,28 +2,18 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
-import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
-import {
-	useContext,
-	useMemo,
-	cloneElement,
-	isValidElement,
-	useCallback,
-} from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
-import { chevronRightSmall } from '@wordpress/icons';
+import { useContext, useMemo } from '@wordpress/element';
+import { isRTL as isRTLFn } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnect } from '../context';
-import type { WordPressComponentProps } from '../context';
+import { useContextSystem, contextConnectWithoutRef } from '../context';
 import type { MenuContext as MenuContextType, MenuProps } from './types';
-import * as Styled from './styles';
 import { MenuContext } from './context';
 import { MenuItem } from './item';
 import { MenuCheckboxItem } from './checkbox-item';
@@ -33,49 +23,36 @@ import { MenuGroupLabel } from './group-label';
 import { MenuSeparator } from './separator';
 import { MenuItemLabel } from './item-label';
 import { MenuItemHelpText } from './item-help-text';
+import { MenuTriggerButton } from './trigger-button';
+import { MenuSubmenuTriggerItem } from './submenu-trigger-item';
+import { MenuPopover } from './popover';
 
-const UnconnectedMenu = (
-	props: WordPressComponentProps< MenuProps, 'div', false >,
-	ref: React.ForwardedRef< HTMLDivElement >
-) => {
+const UnconnectedMenu = ( props: MenuProps ) => {
 	const {
-		// Store props
-		open,
+		children,
 		defaultOpen = false,
+		open,
 		onOpenChange,
 		placement,
 
-		// Menu trigger props
-		trigger,
-
-		// Menu props
-		gutter,
-		children,
-		shift,
-		modal = true,
-
 		// From internal components context
 		variant,
-
-		// Rest
-		...otherProps
-	} = useContextSystem< typeof props & Pick< MenuContextType, 'variant' > >(
-		props,
-		'Menu'
-	);
+	} = useContextSystem<
+		// @ts-expect-error TODO: missing 'className' in MenuProps
+		typeof props & Pick< MenuContextType, 'variant' >
+	>( props, 'Menu' );
 
 	const parentContext = useContext( MenuContext );
 
-	const computedDirection = isRTL() ? 'rtl' : 'ltr';
+	const rtl = isRTLFn();
 
 	// If an explicit value for the `placement` prop is not passed,
 	// apply a default placement of `bottom-start` for the root menu popover,
 	// and of `right-start` for nested menu popovers.
 	let computedPlacement =
-		props.placement ??
-		( parentContext?.store ? 'right-start' : 'bottom-start' );
+		placement ?? ( parentContext?.store ? 'right-start' : 'bottom-start' );
 	// Swap left/right in case of RTL direction
-	if ( computedDirection === 'rtl' ) {
+	if ( rtl ) {
 		if ( /right/.test( computedPlacement ) ) {
 			computedPlacement = computedPlacement.replace(
 				'right',
@@ -98,7 +75,7 @@ const UnconnectedMenu = (
 		setOpen( willBeOpen ) {
 			onOpenChange?.( willBeOpen );
 		},
-		rtl: computedDirection === 'rtl',
+		rtl,
 	} );
 
 	const contextValue = useMemo(
@@ -106,134 +83,53 @@ const UnconnectedMenu = (
 		[ menuStore, variant ]
 	);
 
-	// Extract the side from the applied placement — useful for animations.
-	// Using `currentPlacement` instead of `placement` to make sure that we
-	// use the final computed placement (including "flips" etc).
-	const appliedPlacementSide = useStoreState(
-		menuStore,
-		'currentPlacement'
-	).split( '-' )[ 0 ];
-
-	if (
-		menuStore.parent &&
-		! ( isValidElement( trigger ) && MenuItem === trigger.type )
-	) {
-		// eslint-disable-next-line no-console
-		console.warn(
-			'For nested Menus, the `trigger` should always be a `MenuItem`.'
-		);
-	}
-
-	const hideOnEscape = useCallback(
-		( event: React.KeyboardEvent< Element > ) => {
-			// Pressing Escape can cause unexpected consequences (ie. exiting
-			// full screen mode on MacOs, close parent modals...).
-			event.preventDefault();
-			// Returning `true` causes the menu to hide.
-			return true;
-		},
-		[]
-	);
-
-	const wrapperProps = useMemo(
-		() => ( {
-			dir: computedDirection,
-			style: {
-				direction:
-					computedDirection as React.CSSProperties[ 'direction' ],
-			},
-		} ),
-		[ computedDirection ]
-	);
-
 	return (
-		<>
-			{ /* Menu trigger */ }
-			<Ariakit.MenuButton
-				ref={ ref }
-				store={ menuStore }
-				render={
-					menuStore.parent
-						? cloneElement( trigger, {
-								// Add submenu arrow, unless a `suffix` is explicitly specified
-								suffix: (
-									<>
-										{ trigger.props.suffix }
-										<Styled.SubmenuChevronIcon
-											aria-hidden="true"
-											icon={ chevronRightSmall }
-											size={ 24 }
-											preserveAspectRatio="xMidYMid slice"
-										/>
-									</>
-								),
-						  } )
-						: trigger
-				}
-			/>
-
-			{ /* Menu popover */ }
-			<Ariakit.Menu
-				{ ...otherProps }
-				modal={ modal }
-				store={ menuStore }
-				// Root menu has an 8px distance from its trigger,
-				// otherwise 0 (which causes the submenu to slightly overlap)
-				gutter={ gutter ?? ( menuStore.parent ? 0 : 8 ) }
-				// Align nested menu by the same (but opposite) amount
-				// as the menu container's padding.
-				shift={ shift ?? ( menuStore.parent ? -4 : 0 ) }
-				hideOnHoverOutside={ false }
-				data-side={ appliedPlacementSide }
-				wrapperProps={ wrapperProps }
-				hideOnEscape={ hideOnEscape }
-				unmountOnHide
-				render={ ( renderProps ) => (
-					// Two wrappers are needed for the entry animation, where the menu
-					// container scales with a different factor than its contents.
-					// The {...renderProps} are passed to the inner wrapper, so that the
-					// menu element is the direct parent of the menu item elements.
-					<Styled.MenuPopoverOuterWrapper variant={ variant }>
-						<Styled.MenuPopoverInnerWrapper { ...renderProps } />
-					</Styled.MenuPopoverOuterWrapper>
-				) }
-			>
-				<MenuContext.Provider value={ contextValue }>
-					{ children }
-				</MenuContext.Provider>
-			</Ariakit.Menu>
-		</>
+		<MenuContext.Provider value={ contextValue }>
+			{ children }
+		</MenuContext.Provider>
 	);
 };
 
-export const Menu = Object.assign( contextConnect( UnconnectedMenu, 'Menu' ), {
-	Context: Object.assign( MenuContext, {
-		displayName: 'Menu.Context',
-	} ),
-	Item: Object.assign( MenuItem, {
-		displayName: 'Menu.Item',
-	} ),
-	RadioItem: Object.assign( MenuRadioItem, {
-		displayName: 'Menu.RadioItem',
-	} ),
-	CheckboxItem: Object.assign( MenuCheckboxItem, {
-		displayName: 'Menu.CheckboxItem',
-	} ),
-	Group: Object.assign( MenuGroup, {
-		displayName: 'Menu.Group',
-	} ),
-	GroupLabel: Object.assign( MenuGroupLabel, {
-		displayName: 'Menu.GroupLabel',
-	} ),
-	Separator: Object.assign( MenuSeparator, {
-		displayName: 'Menu.Separator',
-	} ),
-	ItemLabel: Object.assign( MenuItemLabel, {
-		displayName: 'Menu.ItemLabel',
-	} ),
-	ItemHelpText: Object.assign( MenuItemHelpText, {
-		displayName: 'Menu.ItemHelpText',
-	} ),
-} );
+export const Menu = Object.assign(
+	contextConnectWithoutRef( UnconnectedMenu, 'Menu' ),
+	{
+		Context: Object.assign( MenuContext, {
+			displayName: 'Menu.Context',
+		} ),
+		Item: Object.assign( MenuItem, {
+			displayName: 'Menu.Item',
+		} ),
+		RadioItem: Object.assign( MenuRadioItem, {
+			displayName: 'Menu.RadioItem',
+		} ),
+		CheckboxItem: Object.assign( MenuCheckboxItem, {
+			displayName: 'Menu.CheckboxItem',
+		} ),
+		Group: Object.assign( MenuGroup, {
+			displayName: 'Menu.Group',
+		} ),
+		GroupLabel: Object.assign( MenuGroupLabel, {
+			displayName: 'Menu.GroupLabel',
+		} ),
+		Separator: Object.assign( MenuSeparator, {
+			displayName: 'Menu.Separator',
+		} ),
+		ItemLabel: Object.assign( MenuItemLabel, {
+			displayName: 'Menu.ItemLabel',
+		} ),
+		ItemHelpText: Object.assign( MenuItemHelpText, {
+			displayName: 'Menu.ItemHelpText',
+		} ),
+		Popover: Object.assign( MenuPopover, {
+			displayName: 'Menu.Popover',
+		} ),
+		TriggerButton: Object.assign( MenuTriggerButton, {
+			displayName: 'Menu.TriggerButton',
+		} ),
+		SubmenuTriggerItem: Object.assign( MenuSubmenuTriggerItem, {
+			displayName: 'Menu.SubmenuTriggerItem',
+		} ),
+	}
+);
 
 export default Menu;

package/src/menu/item.tsx

@@ -15,7 +15,15 @@ export const MenuItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< MenuItemProps, 'div', false >
 >( function MenuItem(
-	{ prefix, suffix, children, hideOnClick = true, ...props },
+	{
+		prefix,
+		suffix,
+		children,
+		disabled = false,
+		hideOnClick = true,
+		store,
+		...props
+	},
 	ref
 ) {
 	const menuContext = useContext( MenuContext );
@@ -26,13 +34,20 @@ export const MenuItem = forwardRef<
 		);
 	}
 
+	// In most cases, the menu store will be retrieved from context (ie. the store
+	// created by the top-level menu component). But in rare cases (ie.
+	// `Menu.SubmenuTriggerItem`), the context store wouldn't be correct. This is
+	// why the component accepts a `store` prop to override the context store.
+	const computedStore = store ?? menuContext.store;
+
 	return (
 		<Styled.MenuItem
 			ref={ ref }
 			{ ...props }
 			accessibleWhenDisabled
+			disabled={ disabled }
 			hideOnClick={ hideOnClick }
-			store={ menuContext.store }
+			store={ computedStore }
 		>
 			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
 

package/src/menu/popover.tsx

@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useContext,
+	useMemo,
+	forwardRef,
+	useCallback,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import type { MenuPopoverProps } from './types';
+import * as Styled from './styles';
+import { MenuContext } from './context';
+
+export const MenuPopover = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< MenuPopoverProps, 'div', false >
+>( function MenuPopover(
+	{ gutter, children, shift, modal = true, ...otherProps },
+	ref
+) {
+	const menuContext = useContext( MenuContext );
+
+	// Extract the side from the applied placement — useful for animations.
+	// Using `currentPlacement` instead of `placement` to make sure that we
+	// use the final computed placement (including "flips" etc).
+	const appliedPlacementSide = Ariakit.useStoreState(
+		menuContext?.store,
+		'currentPlacement'
+	)?.split( '-' )[ 0 ];
+
+	const hideOnEscape = useCallback(
+		( event: React.KeyboardEvent< Element > ) => {
+			// Pressing Escape can cause unexpected consequences (ie. exiting
+			// full screen mode on MacOs, close parent modals...).
+			event.preventDefault();
+			// Returning `true` causes the menu to hide.
+			return true;
+		},
+		[]
+	);
+
+	const computedDirection = Ariakit.useStoreState( menuContext?.store, 'rtl' )
+		? 'rtl'
+		: 'ltr';
+
+	const wrapperProps = useMemo(
+		() => ( {
+			dir: computedDirection,
+			style: {
+				direction:
+					computedDirection as React.CSSProperties[ 'direction' ],
+			},
+		} ),
+		[ computedDirection ]
+	);
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.Popover can only be rendered inside a Menu component'
+		);
+	}
+
+	return (
+		<Ariakit.Menu
+			{ ...otherProps }
+			ref={ ref }
+			modal={ modal }
+			store={ menuContext.store }
+			// Root menu has an 8px distance from its trigger,
+			// otherwise 0 (which causes the submenu to slightly overlap)
+			gutter={ gutter ?? ( menuContext.store.parent ? 0 : 8 ) }
+			// Align nested menu by the same (but opposite) amount
+			// as the menu container's padding.
+			shift={ shift ?? ( menuContext.store.parent ? -4 : 0 ) }
+			hideOnHoverOutside={ false }
+			data-side={ appliedPlacementSide }
+			wrapperProps={ wrapperProps }
+			hideOnEscape={ hideOnEscape }
+			unmountOnHide
+			render={ ( renderProps ) => (
+				// Two wrappers are needed for the entry animation, where the menu
+				// container scales with a different factor than its contents.
+				// The {...renderProps} are passed to the inner wrapper, so that the
+				// menu element is the direct parent of the menu item elements.
+				<Styled.MenuPopoverOuterWrapper variant={ menuContext.variant }>
+					<Styled.MenuPopoverInnerWrapper { ...renderProps } />
+				</Styled.MenuPopoverOuterWrapper>
+			) }
+		>
+			{ children }
+		</Ariakit.Menu>
+	);
+} );

package/src/menu/radio-item.tsx

@@ -28,7 +28,7 @@ export const MenuRadioItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< MenuRadioItemProps, 'div', false >
 >( function MenuRadioItem(
-	{ suffix, children, hideOnClick = false, ...props },
+	{ suffix, children, disabled = false, hideOnClick = false, ...props },
 	ref
 ) {
 	const menuContext = useContext( MenuContext );
@@ -44,6 +44,7 @@ export const MenuRadioItem = forwardRef<
 			ref={ ref }
 			{ ...props }
 			accessibleWhenDisabled
+			disabled={ disabled }
 			hideOnClick={ hideOnClick }
 			store={ menuContext.store }
 		>