@wordpress/components 25.11.1-next.f8d8eceb.0 → 25.13.0

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

@@ -14,6 +14,7 @@ import {
 	useMemo,
 	cloneElement,
 	isValidElement,
+	useCallback,
 } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 import { check, chevronRightSmall } from '@wordpress/icons';
@@ -29,7 +30,6 @@ import type {
 	DropdownMenuContext as DropdownMenuContextType,
 	DropdownMenuProps,
 	DropdownMenuGroupProps,
-	DropdownMenuGroupLabelProps,
 	DropdownMenuItemProps,
 	DropdownMenuCheckboxItemProps,
 	DropdownMenuRadioItemProps,
@@ -54,16 +54,23 @@ export const DropdownMenuItem = forwardRef<
 		<Styled.DropdownMenuItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
-			{ prefix && (
-				<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
-			) }
-			{ children }
-			{ suffix && (
-				<Styled.ItemSuffixWrapper>{ suffix }</Styled.ItemSuffixWrapper>
-			) }
+			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
 		</Styled.DropdownMenuItem>
 	);
 } );
@@ -81,24 +88,40 @@ export const DropdownMenuCheckboxItem = forwardRef<
 		<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>
 
-			{ children }
-			{ suffix && (
-				<Styled.ItemSuffixWrapper>{ suffix }</Styled.ItemSuffixWrapper>
-			) }
+			<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 >
@@ -112,24 +135,30 @@ export const DropdownMenuRadioItem = forwardRef<
 		<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' } }
 			>
-				<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-					<Circle
-						cx={ 12 }
-						cy={ 12 }
-						r={ 3 }
-						fill="currentColor"
-					></Circle>
-				</SVG>
+				<Icon icon={ radioCheck } size={ 24 } />
 			</Ariakit.MenuItemCheck>
-			{ children }
-			{ suffix }
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
 		</Styled.DropdownMenuRadioItem>
 	);
 } );
@@ -148,20 +177,6 @@ export const DropdownMenuGroup = forwardRef<
 	);
 } );
 
-export const DropdownMenuGroupLabel = forwardRef<
-	HTMLDivElement,
-	WordPressComponentProps< DropdownMenuGroupLabelProps, 'div', false >
->( function DropdownMenuGroupLabel( props, ref ) {
-	const dropdownMenuContext = useContext( DropdownMenuContext );
-	return (
-		<Styled.DropdownMenuGroupLabel
-			ref={ ref }
-			{ ...props }
-			store={ dropdownMenuContext?.store }
-		/>
-	);
-} );
-
 const UnconnectedDropdownMenu = (
 	props: WordPressComponentProps< DropdownMenuProps, 'div', false >,
 	ref: React.ForwardedRef< HTMLDivElement >
@@ -181,7 +196,6 @@ const UnconnectedDropdownMenu = (
 		children,
 		shift,
 		modal = true,
-		hideOnEscape = true,
 
 		// From internal components context
 		variant,
@@ -249,6 +263,28 @@ const UnconnectedDropdownMenu = (
 		);
 	}
 
+	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 */ }
@@ -259,12 +295,16 @@ const UnconnectedDropdownMenu = (
 					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 }
-									/>
+								suffix: (
+									<>
+										{ trigger.props.suffix }
+										<Styled.SubmenuChevronIcon
+											aria-hidden="true"
+											icon={ chevronRightSmall }
+											size={ 24 }
+											preserveAspectRatio="xMidYMid slice"
+										/>
+									</>
 								),
 						  } )
 						: trigger
@@ -276,17 +316,16 @@ const UnconnectedDropdownMenu = (
 				{ ...otherProps }
 				modal={ modal }
 				store={ dropdownMenuStore }
-				gutter={ gutter ?? ( dropdownMenuStore.parent ? 16 : 8 ) }
-				shift={ shift ?? ( dropdownMenuStore.parent ? -8 : 0 ) }
+				// 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={ {
-					dir: computedDirection,
-					style: {
-						direction: computedDirection,
-					},
-				} }
+				wrapperProps={ wrapperProps }
 				hideOnEscape={ hideOnEscape }
 				unmountOnHide
 			>
@@ -316,3 +355,29 @@ export const DropdownMenuSeparator = forwardRef<
 		/>
 	);
 } );
+
+export const DropdownMenuItemLabel = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function DropdownMenuItemLabel( props, ref ) {
+	return (
+		<Styled.DropdownMenuItemLabel
+			numberOfLines={ 1 }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+} );
+
+export const DropdownMenuItemHelpText = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function DropdownMenuItemHelpText( props, ref ) {
+	return (
+		<Styled.DropdownMenuItemHelpText
+			numberOfLines={ 2 }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+} );