@wordpress/components 28.10.0 → 28.11.0

package/src/{dropdown-menu-v2 → menu}/index.tsx

@@ -22,23 +22,20 @@ import { chevronRightSmall } from '@wordpress/icons';
  */
 import { useContextSystem, contextConnect } from '../context';
 import type { WordPressComponentProps } from '../context';
-import type {
-	DropdownMenuContext as DropdownMenuContextType,
-	DropdownMenuProps,
-} from './types';
+import type { MenuContext as MenuContextType, MenuProps } from './types';
 import * as Styled from './styles';
-import { DropdownMenuContext } from './context';
-import { DropdownMenuItem } from './item';
-import { DropdownMenuCheckboxItem } from './checkbox-item';
-import { DropdownMenuRadioItem } from './radio-item';
-import { DropdownMenuGroup } from './group';
-import { DropdownMenuGroupLabel } from './group-label';
-import { DropdownMenuSeparator } from './separator';
-import { DropdownMenuItemLabel } from './item-label';
-import { DropdownMenuItemHelpText } from './item-help-text';
-
-const UnconnectedDropdownMenu = (
-	props: WordPressComponentProps< DropdownMenuProps, 'div', false >,
+import { MenuContext } from './context';
+import { MenuItem } from './item';
+import { MenuCheckboxItem } from './checkbox-item';
+import { MenuRadioItem } from './radio-item';
+import { MenuGroup } from './group';
+import { MenuGroupLabel } from './group-label';
+import { MenuSeparator } from './separator';
+import { MenuItemLabel } from './item-label';
+import { MenuItemHelpText } from './item-help-text';
+
+const UnconnectedMenu = (
+	props: WordPressComponentProps< MenuProps, 'div', false >,
 	ref: React.ForwardedRef< HTMLDivElement >
 ) => {
 	const {
@@ -62,17 +59,18 @@ const UnconnectedDropdownMenu = (
 
 		// Rest
 		...otherProps
-	} = useContextSystem<
-		typeof props & Pick< DropdownMenuContextType, 'variant' >
-	>( props, 'DropdownMenu' );
+	} = useContextSystem< typeof props & Pick< MenuContextType, 'variant' > >(
+		props,
+		'Menu'
+	);
 
-	const parentContext = useContext( DropdownMenuContext );
+	const parentContext = useContext( MenuContext );
 
 	const computedDirection = isRTL() ? 'rtl' : 'ltr';
 
 	// 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.
+	// 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' );
@@ -91,7 +89,7 @@ const UnconnectedDropdownMenu = (
 		}
 	}
 
-	const dropdownMenuStore = Ariakit.useMenuStore( {
+	const menuStore = Ariakit.useMenuStore( {
 		parent: parentContext?.store,
 		open,
 		defaultOpen,
@@ -104,25 +102,25 @@ const UnconnectedDropdownMenu = (
 	} );
 
 	const contextValue = useMemo(
-		() => ( { store: dropdownMenuStore, variant } ),
-		[ dropdownMenuStore, variant ]
+		() => ( { store: menuStore, variant } ),
+		[ 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(
-		dropdownMenuStore,
+		menuStore,
 		'currentPlacement'
 	).split( '-' )[ 0 ];
 
 	if (
-		dropdownMenuStore.parent &&
-		! ( isValidElement( trigger ) && DropdownMenuItem === trigger.type )
+		menuStore.parent &&
+		! ( isValidElement( trigger ) && MenuItem === trigger.type )
 	) {
 		// eslint-disable-next-line no-console
 		console.warn(
-			'For nested DropdownMenus, the `trigger` should always be a `DropdownMenuItem`.'
+			'For nested Menus, the `trigger` should always be a `MenuItem`.'
 		);
 	}
 
@@ -153,9 +151,9 @@ const UnconnectedDropdownMenu = (
 			{ /* Menu trigger */ }
 			<Ariakit.MenuButton
 				ref={ ref }
-				store={ dropdownMenuStore }
+				store={ menuStore }
 				render={
-					dropdownMenuStore.parent
+					menuStore.parent
 						? cloneElement( trigger, {
 								// Add submenu arrow, unless a `suffix` is explicitly specified
 								suffix: (
@@ -178,13 +176,13 @@ const UnconnectedDropdownMenu = (
 			<Ariakit.Menu
 				{ ...otherProps }
 				modal={ modal }
-				store={ dropdownMenuStore }
+				store={ menuStore }
 				// Root menu has an 8px distance from its trigger,
 				// otherwise 0 (which causes the submenu to slightly overlap)
-				gutter={ gutter ?? ( dropdownMenuStore.parent ? 0 : 8 ) }
+				gutter={ gutter ?? ( menuStore.parent ? 0 : 8 ) }
 				// Align nested menu by the same (but opposite) amount
 				// as the menu container's padding.
-				shift={ shift ?? ( dropdownMenuStore.parent ? -4 : 0 ) }
+				shift={ shift ?? ( menuStore.parent ? -4 : 0 ) }
 				hideOnHoverOutside={ false }
 				data-side={ appliedPlacementSide }
 				wrapperProps={ wrapperProps }
@@ -200,45 +198,42 @@ const UnconnectedDropdownMenu = (
 					</Styled.MenuPopoverOuterWrapper>
 				) }
 			>
-				<DropdownMenuContext.Provider value={ contextValue }>
+				<MenuContext.Provider value={ contextValue }>
 					{ children }
-				</DropdownMenuContext.Provider>
+				</MenuContext.Provider>
 			</Ariakit.Menu>
 		</>
 	);
 };
 
-export const DropdownMenuV2 = Object.assign(
-	contextConnect( UnconnectedDropdownMenu, 'DropdownMenu' ),
-	{
-		Context: Object.assign( DropdownMenuContext, {
-			displayName: 'DropdownMenuV2.Context',
-		} ),
-		Item: Object.assign( DropdownMenuItem, {
-			displayName: 'DropdownMenuV2.Item',
-		} ),
-		RadioItem: Object.assign( DropdownMenuRadioItem, {
-			displayName: 'DropdownMenuV2.RadioItem',
-		} ),
-		CheckboxItem: Object.assign( DropdownMenuCheckboxItem, {
-			displayName: 'DropdownMenuV2.CheckboxItem',
-		} ),
-		Group: Object.assign( DropdownMenuGroup, {
-			displayName: 'DropdownMenuV2.Group',
-		} ),
-		GroupLabel: Object.assign( DropdownMenuGroupLabel, {
-			displayName: 'DropdownMenuV2.GroupLabel',
-		} ),
-		Separator: Object.assign( DropdownMenuSeparator, {
-			displayName: 'DropdownMenuV2.Separator',
-		} ),
-		ItemLabel: Object.assign( DropdownMenuItemLabel, {
-			displayName: 'DropdownMenuV2.ItemLabel',
-		} ),
-		ItemHelpText: Object.assign( DropdownMenuItemHelpText, {
-			displayName: 'DropdownMenuV2.ItemHelpText',
-		} ),
-	}
-);
-
-export default DropdownMenuV2;
+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 default Menu;

package/src/{dropdown-menu-v2 → menu}/item-help-text.tsx

@@ -9,15 +9,11 @@ import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../context';
 import * as Styled from './styles';
 
-export const DropdownMenuItemHelpText = forwardRef<
+export const MenuItemHelpText = forwardRef<
 	HTMLSpanElement,
 	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
->( function DropdownMenuItemHelpText( props, ref ) {
+>( function MenuItemHelpText( props, ref ) {
 	return (
-		<Styled.DropdownMenuItemHelpText
-			numberOfLines={ 2 }
-			ref={ ref }
-			{ ...props }
-		/>
+		<Styled.MenuItemHelpText numberOfLines={ 2 } ref={ ref } { ...props } />
 	);
 } );

package/src/{dropdown-menu-v2 → menu}/item-label.tsx

@@ -9,15 +9,11 @@ import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../context';
 import * as Styled from './styles';
 
-export const DropdownMenuItemLabel = forwardRef<
+export const MenuItemLabel = forwardRef<
 	HTMLSpanElement,
 	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
->( function DropdownMenuItemLabel( props, ref ) {
+>( function MenuItemLabel( props, ref ) {
 	return (
-		<Styled.DropdownMenuItemLabel
-			numberOfLines={ 1 }
-			ref={ ref }
-			{ ...props }
-		/>
+		<Styled.MenuItemLabel numberOfLines={ 1 } ref={ ref } { ...props } />
 	);
 } );

package/src/{dropdown-menu-v2 → menu}/item.tsx

@@ -7,44 +7,44 @@ import { forwardRef, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
-import type { DropdownMenuItemProps } from './types';
+import type { MenuItemProps } from './types';
 import * as Styled from './styles';
-import { DropdownMenuContext } from './context';
+import { MenuContext } from './context';
 import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
 
-export const DropdownMenuItem = forwardRef<
+export const MenuItem = forwardRef<
 	HTMLDivElement,
-	WordPressComponentProps< DropdownMenuItemProps, 'div', false >
->( function DropdownMenuItem(
+	WordPressComponentProps< MenuItemProps, 'div', false >
+>( function MenuItem(
 	{ prefix, suffix, children, onBlur, hideOnClick = true, ...props },
 	ref
 ) {
 	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
 	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
-	const dropdownMenuContext = useContext( DropdownMenuContext );
+	const menuContext = useContext( MenuContext );
 
 	return (
-		<Styled.DropdownMenuItem
+		<Styled.MenuItem
 			ref={ ref }
 			{ ...props }
 			{ ...focusVisibleFixProps }
 			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
-			store={ dropdownMenuContext?.store }
+			store={ menuContext?.store }
 		>
 			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
 
-			<Styled.DropdownMenuItemContentWrapper>
-				<Styled.DropdownMenuItemChildrenWrapper>
+			<Styled.MenuItemContentWrapper>
+				<Styled.MenuItemChildrenWrapper>
 					{ children }
-				</Styled.DropdownMenuItemChildrenWrapper>
+				</Styled.MenuItemChildrenWrapper>
 
 				{ suffix && (
 					<Styled.ItemSuffixWrapper>
 						{ suffix }
 					</Styled.ItemSuffixWrapper>
 				) }
-			</Styled.DropdownMenuItemContentWrapper>
-		</Styled.DropdownMenuItem>
+			</Styled.MenuItemContentWrapper>
+		</Styled.MenuItem>
 	);
 } );

package/src/{dropdown-menu-v2 → menu}/radio-item.tsx

@@ -13,8 +13,8 @@ import { Icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
-import { DropdownMenuContext } from './context';
-import type { DropdownMenuRadioItemProps } from './types';
+import { MenuContext } from './context';
+import type { MenuRadioItemProps } from './types';
 import * as Styled from './styles';
 import { SVG, Circle } from '@wordpress/primitives';
 import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
@@ -25,28 +25,28 @@ const radioCheck = (
 	</SVG>
 );
 
-export const DropdownMenuRadioItem = forwardRef<
+export const MenuRadioItem = forwardRef<
 	HTMLDivElement,
-	WordPressComponentProps< DropdownMenuRadioItemProps, 'div', false >
->( function DropdownMenuRadioItem(
+	WordPressComponentProps< MenuRadioItemProps, 'div', false >
+>( function MenuRadioItem(
 	{ suffix, children, onBlur, hideOnClick = false, ...props },
 	ref
 ) {
 	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
 	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
-	const dropdownMenuContext = useContext( DropdownMenuContext );
+	const menuContext = useContext( MenuContext );
 
 	return (
-		<Styled.DropdownMenuRadioItem
+		<Styled.MenuRadioItem
 			ref={ ref }
 			{ ...props }
 			{ ...focusVisibleFixProps }
 			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
-			store={ dropdownMenuContext?.store }
+			store={ menuContext?.store }
 		>
 			<Ariakit.MenuItemCheck
-				store={ dropdownMenuContext?.store }
+				store={ menuContext?.store }
 				render={ <Styled.ItemPrefixWrapper /> }
 				// Override some ariakit inline styles
 				style={ { width: 'auto', height: 'auto' } }
@@ -54,17 +54,17 @@ export const DropdownMenuRadioItem = forwardRef<
 				<Icon icon={ radioCheck } size={ 24 } />
 			</Ariakit.MenuItemCheck>
 
-			<Styled.DropdownMenuItemContentWrapper>
-				<Styled.DropdownMenuItemChildrenWrapper>
+			<Styled.MenuItemContentWrapper>
+				<Styled.MenuItemChildrenWrapper>
 					{ children }
-				</Styled.DropdownMenuItemChildrenWrapper>
+				</Styled.MenuItemChildrenWrapper>
 
 				{ suffix && (
 					<Styled.ItemSuffixWrapper>
 						{ suffix }
 					</Styled.ItemSuffixWrapper>
 				) }
-			</Styled.DropdownMenuItemContentWrapper>
-		</Styled.DropdownMenuRadioItem>
+			</Styled.MenuItemContentWrapper>
+		</Styled.MenuRadioItem>
 	);
 } );

package/src/menu/separator.tsx

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { MenuContext } from './context';
+import type { MenuSeparatorProps } from './types';
+import * as Styled from './styles';
+
+export const MenuSeparator = forwardRef<
+	HTMLHRElement,
+	WordPressComponentProps< MenuSeparatorProps, 'hr', false >
+>( function MenuSeparator( props, ref ) {
+	const menuContext = useContext( MenuContext );
+	return (
+		<Styled.MenuSeparator
+			ref={ ref }
+			{ ...props }
+			store={ menuContext?.store }
+			variant={ menuContext?.variant }
+		/>
+	);
+} );