@wordpress/components 25.13.0 → 25.15.1-next.79a6196f.0

package/src/dropdown-menu-v2/index.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -11,283 +12,372 @@ import {
 	createContext,
 	useContext,
 	useMemo,
+	cloneElement,
+	isValidElement,
+	useCallback,
 } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
-import { check, chevronRightSmall, lineSolid } from '@wordpress/icons';
+import { check, chevronRightSmall } from '@wordpress/icons';
 import { SVG, Circle } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnectWithoutRef } from '../context';
-import { useSlot } from '../slot-fill';
+import { useContextSystem, contextConnect } from '../context';
+import type { WordPressComponentProps } from '../context';
 import Icon from '../icon';
-import { SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME } from '../popover';
-import * as DropdownMenuStyled from './styles';
 import type {
+	DropdownMenuContext as DropdownMenuContextType,
 	DropdownMenuProps,
-	DropdownSubMenuProps,
-	DropdownMenuItemProps,
-	DropdownMenuLabelProps,
 	DropdownMenuGroupProps,
+	DropdownMenuItemProps,
 	DropdownMenuCheckboxItemProps,
-	DropdownMenuRadioGroupProps,
 	DropdownMenuRadioItemProps,
 	DropdownMenuSeparatorProps,
-	DropdownSubMenuTriggerProps,
-	DropdownMenuInternalContext,
-	DropdownMenuPrivateContext as DropdownMenuPrivateContextType,
 } from './types';
+import * as Styled from './styles';
 
-// Menu content's side padding + 4px
-const SUB_MENU_OFFSET_SIDE = 16;
-// Opposite amount of the top padding of the menu item
-const SUB_MENU_OFFSET_ALIGN = -8;
+export const DropdownMenuContext = createContext<
+	DropdownMenuContextType | undefined
+>( undefined );
 
-const DropdownMenuPrivateContext =
-	createContext< DropdownMenuPrivateContextType >( {
-		variant: undefined,
-		portalContainer: null,
-	} );
+export const DropdownMenuItem = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< DropdownMenuItemProps, 'div', false >
+>( function DropdownMenuItem(
+	{ prefix, suffix, children, hideOnClick = true, ...props },
+	ref
+) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	return (
+		<Styled.DropdownMenuItem
+			ref={ ref }
+			{ ...props }
+			accessibleWhenDisabled
+			hideOnClick={ hideOnClick }
+			store={ dropdownMenuContext?.store }
+		>
+			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
+		</Styled.DropdownMenuItem>
+	);
+} );
+
+export const DropdownMenuCheckboxItem = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< DropdownMenuCheckboxItemProps, 'div', false >
+>( function DropdownMenuCheckboxItem(
+	{ suffix, children, hideOnClick = false, ...props },
+	ref
+) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	return (
+		<Styled.DropdownMenuCheckboxItem
+			ref={ ref }
+			{ ...props }
+			accessibleWhenDisabled
+			hideOnClick={ hideOnClick }
+			store={ dropdownMenuContext?.store }
+		>
+			<Ariakit.MenuItemCheck
+				store={ dropdownMenuContext?.store }
+				render={ <Styled.ItemPrefixWrapper /> }
+				// Override some ariakit inline styles
+				style={ { width: 'auto', height: 'auto' } }
+			>
+				<Icon icon={ check } size={ 24 } />
+			</Ariakit.MenuItemCheck>
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
+		</Styled.DropdownMenuCheckboxItem>
+	);
+} );
+
+const radioCheck = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
+	</SVG>
+);
+
+export const DropdownMenuRadioItem = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< DropdownMenuRadioItemProps, 'div', false >
+>( function DropdownMenuRadioItem(
+	{ suffix, children, hideOnClick = false, ...props },
+	ref
+) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	return (
+		<Styled.DropdownMenuRadioItem
+			ref={ ref }
+			{ ...props }
+			accessibleWhenDisabled
+			hideOnClick={ hideOnClick }
+			store={ dropdownMenuContext?.store }
+		>
+			<Ariakit.MenuItemCheck
+				store={ dropdownMenuContext?.store }
+				render={ <Styled.ItemPrefixWrapper /> }
+				// Override some ariakit inline styles
+				style={ { width: 'auto', height: 'auto' } }
+			>
+				<Icon icon={ radioCheck } size={ 24 } />
+			</Ariakit.MenuItemCheck>
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
 
-const UnconnectedDropdownMenu = ( props: DropdownMenuProps ) => {
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
+		</Styled.DropdownMenuRadioItem>
+	);
+} );
+
+export const DropdownMenuGroup = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< DropdownMenuGroupProps, 'div', false >
+>( function DropdownMenuGroup( props, ref ) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+	return (
+		<Styled.DropdownMenuGroup
+			ref={ ref }
+			{ ...props }
+			store={ dropdownMenuContext?.store }
+		/>
+	);
+} );
+
+const UnconnectedDropdownMenu = (
+	props: WordPressComponentProps< DropdownMenuProps, 'div', false >,
+	ref: React.ForwardedRef< HTMLDivElement >
+) => {
 	const {
-		// Root props
-		defaultOpen,
+		// Store props
 		open,
+		defaultOpen = false,
 		onOpenChange,
-		modal = true,
-		// Content positioning props
-		side = 'bottom',
-		sideOffset = 0,
-		align = 'center',
-		alignOffset = 0,
-		// Render props
-		children,
+		placement,
+
+		// Menu trigger props
 		trigger,
 
+		// Menu props
+		gutter,
+		children,
+		shift,
+		modal = true,
+
 		// From internal components context
 		variant,
+
+		// Rest
+		...otherProps
 	} = useContextSystem<
-		// Adding `className` to the context type to avoid a TS error
-		DropdownMenuProps & DropdownMenuInternalContext & { className?: string }
+		typeof props & Pick< DropdownMenuContextType, 'variant' >
 	>( props, 'DropdownMenu' );
 
-	// Render the portal in the default slot used by the legacy Popover component.
-	const slot = useSlot( POPOVER_DEFAULT_SLOT_NAME );
-	const portalContainer = slot.ref?.current;
+	const parentContext = useContext( DropdownMenuContext );
 
-	const privateContextValue = useMemo(
-		() => ( {
-			variant,
-			portalContainer,
-		} ),
-		[ variant, portalContainer ]
-	);
+	const computedDirection = isRTL() ? 'rtl' : 'ltr';
 
-	return (
-		<DropdownMenuPrimitive.Root
-			defaultOpen={ defaultOpen }
-			open={ open }
-			onOpenChange={ onOpenChange }
-			modal={ modal }
-			dir={ isRTL() ? 'rtl' : 'ltr' }
-		>
-			<DropdownMenuPrimitive.Trigger asChild>
-				{ trigger }
-			</DropdownMenuPrimitive.Trigger>
-			<DropdownMenuPrimitive.Portal container={ portalContainer }>
-				<DropdownMenuStyled.Content
-					side={ side }
-					align={ align }
-					sideOffset={ sideOffset }
-					alignOffset={ alignOffset }
-					loop={ true }
-					variant={ variant }
-				>
-					<DropdownMenuPrivateContext.Provider
-						value={ privateContextValue }
-					>
-						{ children }
-					</DropdownMenuPrivateContext.Provider>
-				</DropdownMenuStyled.Content>
-			</DropdownMenuPrimitive.Portal>
-		</DropdownMenuPrimitive.Root>
+	// If an explicit value for the `placement` prop is not passed,
+	// apply a default placement of `bottom-start` for the root dropdown,
+	// and of `right-start` for nested dropdowns.
+	let computedPlacement =
+		props.placement ??
+		( parentContext?.store ? 'right-start' : 'bottom-start' );
+	// Swap left/right in case of RTL direction
+	if ( computedDirection === 'rtl' ) {
+		if ( /right/.test( computedPlacement ) ) {
+			computedPlacement = computedPlacement.replace(
+				'right',
+				'left'
+			) as typeof computedPlacement;
+		} else if ( /left/.test( computedPlacement ) ) {
+			computedPlacement = computedPlacement.replace(
+				'left',
+				'right'
+			) as typeof computedPlacement;
+		}
+	}
+
+	const dropdownMenuStore = Ariakit.useMenuStore( {
+		parent: parentContext?.store,
+		open,
+		defaultOpen,
+		placement: computedPlacement,
+		focusLoop: true,
+		setOpen( willBeOpen ) {
+			onOpenChange?.( willBeOpen );
+		},
+		rtl: computedDirection === 'rtl',
+	} );
+
+	const contextValue = useMemo(
+		() => ( { store: dropdownMenuStore, variant } ),
+		[ dropdownMenuStore, variant ]
 	);
-};
 
-/**
- * `DropdownMenu` displays a menu to the user (such as a set of actions
- * or functions) triggered by a button.
- */
-export const DropdownMenu = contextConnectWithoutRef(
-	UnconnectedDropdownMenu,
-	'DropdownMenu'
-);
+	// Extract the side from the applied placement — useful for animations.
+	const appliedPlacementSide = dropdownMenuStore
+		.useState( 'placement' )
+		.split( '-' )[ 0 ];
 
-export const DropdownSubMenuTrigger = ( {
-	prefix,
-	suffix = (
-		<DropdownMenuStyled.SubmenuRtlChevronIcon
-			icon={ chevronRightSmall }
-			size={ 24 }
-		/>
-	),
-	children,
-}: DropdownSubMenuTriggerProps ) => {
-	return (
-		<>
-			{ prefix && (
-				<DropdownMenuStyled.ItemPrefixWrapper>
-					{ prefix }
-				</DropdownMenuStyled.ItemPrefixWrapper>
-			) }
-			{ children }
-			{ suffix && (
-				<DropdownMenuStyled.ItemSuffixWrapper>
-					{ suffix }
-				</DropdownMenuStyled.ItemSuffixWrapper>
-			) }
-		</>
+	if (
+		dropdownMenuStore.parent &&
+		! ( isValidElement( trigger ) && DropdownMenuItem === trigger.type )
+	) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			'For nested DropdownMenus, the `trigger` should always be a `DropdownMenuItem`.'
+		);
+	}
+
+	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;
+		},
+		[]
 	);
-};
 
-export const DropdownSubMenu = ( {
-	// Sub props
-	defaultOpen,
-	open,
-	onOpenChange,
-	// Sub trigger props
-	disabled,
-	textValue,
-	// Render props
-	children,
-	trigger,
-}: DropdownSubMenuProps ) => {
-	const { variant, portalContainer } = useContext(
-		DropdownMenuPrivateContext
+	const wrapperProps = useMemo(
+		() => ( {
+			dir: computedDirection,
+			style: {
+				direction:
+					computedDirection as React.CSSProperties[ 'direction' ],
+			},
+		} ),
+		[ computedDirection ]
 	);
 
 	return (
-		<DropdownMenuPrimitive.Sub
-			defaultOpen={ defaultOpen }
-			open={ open }
-			onOpenChange={ onOpenChange }
-		>
-			<DropdownMenuStyled.SubTrigger
-				disabled={ disabled }
-				textValue={ textValue }
+		<>
+			{ /* Menu trigger */ }
+			<Ariakit.MenuButton
+				ref={ ref }
+				store={ dropdownMenuStore }
+				render={
+					dropdownMenuStore.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 */ }
+			<Styled.DropdownMenu
+				{ ...otherProps }
+				modal={ modal }
+				store={ dropdownMenuStore }
+				// Root menu has an 8px distance from its trigger,
+				// otherwise 0 (which causes the submenu to slightly overlap)
+				gutter={ gutter ?? ( dropdownMenuStore.parent ? 0 : 8 ) }
+				// Align nested menu by the same (but opposite) amount
+				// as the menu container's padding.
+				shift={ shift ?? ( dropdownMenuStore.parent ? -4 : 0 ) }
+				hideOnHoverOutside={ false }
+				data-side={ appliedPlacementSide }
+				variant={ variant }
+				wrapperProps={ wrapperProps }
+				hideOnEscape={ hideOnEscape }
+				unmountOnHide
 			>
-				{ trigger }
-			</DropdownMenuStyled.SubTrigger>
-			<DropdownMenuPrimitive.Portal container={ portalContainer }>
-				<DropdownMenuStyled.SubContent
-					loop
-					sideOffset={ SUB_MENU_OFFSET_SIDE }
-					alignOffset={ SUB_MENU_OFFSET_ALIGN }
-					variant={ variant }
-				>
+				<DropdownMenuContext.Provider value={ contextValue }>
 					{ children }
-				</DropdownMenuStyled.SubContent>
-			</DropdownMenuPrimitive.Portal>
-		</DropdownMenuPrimitive.Sub>
+				</DropdownMenuContext.Provider>
+			</Styled.DropdownMenu>
+		</>
 	);
 };
-
-export const DropdownMenuLabel = ( props: DropdownMenuLabelProps ) => (
-	<DropdownMenuStyled.Label { ...props } />
-);
-
-export const DropdownMenuGroup = ( props: DropdownMenuGroupProps ) => (
-	<DropdownMenuPrimitive.Group { ...props } />
-);
-
-export const DropdownMenuItem = forwardRef(
-	(
-		{ children, prefix, suffix, ...props }: DropdownMenuItemProps,
-		forwardedRef: React.ForwardedRef< any >
-	) => {
-		return (
-			<DropdownMenuStyled.Item { ...props } ref={ forwardedRef }>
-				{ prefix && (
-					<DropdownMenuStyled.ItemPrefixWrapper>
-						{ prefix }
-					</DropdownMenuStyled.ItemPrefixWrapper>
-				) }
-				{ children }
-				{ suffix && (
-					<DropdownMenuStyled.ItemSuffixWrapper>
-						{ suffix }
-					</DropdownMenuStyled.ItemSuffixWrapper>
-				) }
-			</DropdownMenuStyled.Item>
-		);
-	}
+export const DropdownMenu = contextConnect(
+	UnconnectedDropdownMenu,
+	'DropdownMenu'
 );
 
-export const DropdownMenuCheckboxItem = ( {
-	children,
-	checked = false,
-	suffix,
-	...props
-}: DropdownMenuCheckboxItemProps ) => {
+export const DropdownMenuSeparator = forwardRef<
+	HTMLHRElement,
+	WordPressComponentProps< DropdownMenuSeparatorProps, 'hr', false >
+>( function DropdownMenuSeparator( props, ref ) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
 	return (
-		<DropdownMenuStyled.CheckboxItem { ...props } checked={ checked }>
-			<DropdownMenuStyled.ItemPrefixWrapper>
-				<DropdownMenuStyled.ItemIndicator>
-					{ ( checked === 'indeterminate' || checked === true ) && (
-						<Icon
-							icon={
-								checked === 'indeterminate' ? lineSolid : check
-							}
-							size={ 24 }
-						/>
-					) }
-				</DropdownMenuStyled.ItemIndicator>
-			</DropdownMenuStyled.ItemPrefixWrapper>
-			{ children }
-			{ suffix && (
-				<DropdownMenuStyled.ItemSuffixWrapper>
-					{ suffix }
-				</DropdownMenuStyled.ItemSuffixWrapper>
-			) }
-		</DropdownMenuStyled.CheckboxItem>
+		<Styled.DropdownMenuSeparator
+			ref={ ref }
+			{ ...props }
+			store={ dropdownMenuContext?.store }
+			variant={ dropdownMenuContext?.variant }
+		/>
 	);
-};
-
-export const DropdownMenuRadioGroup = (
-	props: DropdownMenuRadioGroupProps
-) => <DropdownMenuPrimitive.RadioGroup { ...props } />;
-
-const radioDot = (
-	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Circle cx={ 12 } cy={ 12 } r={ 3 } fill="currentColor"></Circle>
-	</SVG>
-);
+} );
 
-export const DropdownMenuRadioItem = ( {
-	children,
-	suffix,
-	...props
-}: DropdownMenuRadioItemProps ) => {
+export const DropdownMenuItemLabel = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function DropdownMenuItemLabel( props, ref ) {
 	return (
-		<DropdownMenuStyled.RadioItem { ...props }>
-			<DropdownMenuStyled.ItemPrefixWrapper>
-				<DropdownMenuStyled.ItemIndicator>
-					<Icon icon={ radioDot } size={ 22 } />
-				</DropdownMenuStyled.ItemIndicator>
-			</DropdownMenuStyled.ItemPrefixWrapper>
-			{ children }
-			{ suffix && (
-				<DropdownMenuStyled.ItemSuffixWrapper>
-					{ suffix }
-				</DropdownMenuStyled.ItemSuffixWrapper>
-			) }
-		</DropdownMenuStyled.RadioItem>
+		<Styled.DropdownMenuItemLabel
+			numberOfLines={ 1 }
+			ref={ ref }
+			{ ...props }
+		/>
 	);
-};
+} );
 
-export const DropdownMenuSeparator = ( props: DropdownMenuSeparatorProps ) => {
-	const { variant } = useContext( DropdownMenuPrivateContext );
-	return <DropdownMenuStyled.Separator { ...props } variant={ variant } />;
-};
+export const DropdownMenuItemHelpText = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function DropdownMenuItemHelpText( props, ref ) {
+	return (
+		<Styled.DropdownMenuItemHelpText
+			numberOfLines={ 2 }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+} );