@wordpress/components 28.10.0 → 28.12.0

package/src/{dropdown-menu-v2 → menu}/styles.ts

@@ -12,7 +12,7 @@ import { COLORS, font, rtl, CONFIG } from '../utils';
 import { space } from '../utils/space';
 import Icon from '../icon';
 import { Truncate } from '../truncate';
-import type { DropdownMenuContext } from './types';
+import type { MenuContext } from './types';
 
 const ANIMATION_PARAMS = {
 	SCALE_AMOUNT_OUTER: 0.82,
@@ -43,7 +43,7 @@ const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VAR
 const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
 
 export const MenuPopoverOuterWrapper = styled.div<
-	Pick< DropdownMenuContext, 'variant' >
+	Pick< MenuContext, 'variant' >
 >`
 	position: relative;
 
@@ -229,15 +229,15 @@ const baseItem = css`
 	}
 `;
 
-export const DropdownMenuItem = styled( Ariakit.MenuItem )`
+export const MenuItem = styled( Ariakit.MenuItem )`
 	${ baseItem };
 `;
 
-export const DropdownMenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`
+export const MenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`
 	${ baseItem };
 `;
 
-export const DropdownMenuRadioItem = styled( Ariakit.MenuItemRadio )`
+export const MenuRadioItem = styled( Ariakit.MenuItemRadio )`
 	${ baseItem };
 `;
 
@@ -249,14 +249,14 @@ export const ItemPrefixWrapper = styled.span`
 	 * Even when the item is not checked, occupy the same screen space to avoid
 	 * the space collapside when no items are checked.
 	 */
-	${ DropdownMenuCheckboxItem } > &,
-	${ DropdownMenuRadioItem } > & {
+	${ MenuCheckboxItem } > &,
+	${ MenuRadioItem } > & {
 		/* Same width as the check icons */
 		min-width: ${ space( 6 ) };
 	}
 
-	${ DropdownMenuCheckboxItem } > &,
-	${ DropdownMenuRadioItem } > &,
+	${ MenuCheckboxItem } > &,
+	${ MenuRadioItem } > &,
 	&:not( :empty ) {
 		margin-inline-end: ${ space( 2 ) };
 	}
@@ -278,7 +278,7 @@ export const ItemPrefixWrapper = styled.span`
 	}
 `;
 
-export const DropdownMenuItemContentWrapper = styled.div`
+export const MenuItemContentWrapper = styled.div`
 	/*
 	 * Always occupy the second column, since the first column
 	 * is taken by the prefix wrapper (when displayed).
@@ -293,7 +293,7 @@ export const DropdownMenuItemContentWrapper = styled.div`
 	pointer-events: none;
 `;
 
-export const DropdownMenuItemChildrenWrapper = styled.div`
+export const MenuItemChildrenWrapper = styled.div`
 	flex: 1;
 
 	display: inline-flex;
@@ -324,12 +324,12 @@ export const ItemSuffixWrapper = styled.span`
 	}
 `;
 
-export const DropdownMenuGroup = styled( Ariakit.MenuGroup )`
+export const MenuGroup = styled( Ariakit.MenuGroup )`
 	/* Ignore this element when calculating the layout. Useful for subgrid */
 	display: contents;
 `;
 
-export const DropdownMenuGroupLabel = styled( Ariakit.MenuGroupLabel )`
+export const MenuGroupLabel = styled( Ariakit.MenuGroupLabel )`
 	/* Occupy the width of all grid columns (ie. full width) */
 	grid-column: 1 / -1;
 
@@ -338,8 +338,8 @@ export const DropdownMenuGroupLabel = styled( Ariakit.MenuGroupLabel )`
 	padding-inline: ${ ITEM_PADDING_INLINE };
 `;
 
-export const DropdownMenuSeparator = styled( Ariakit.MenuSeparator )<
-	Pick< DropdownMenuContext, 'variant' >
+export const MenuSeparator = styled( Ariakit.MenuSeparator )<
+	Pick< MenuContext, 'variant' >
 >`
 	/* Occupy the width of all grid columns (ie. full width) */
 	grid-column: 1 / -1;
@@ -370,13 +370,13 @@ export const SubmenuChevronIcon = styled( Icon )`
 	) };
 `;
 
-export const DropdownMenuItemLabel = styled( Truncate )`
+export const MenuItemLabel = styled( Truncate )`
 	font-size: ${ font( 'default.fontSize' ) };
 	line-height: 20px;
 	color: inherit;
 `;
 
-export const DropdownMenuItemHelpText = styled( Truncate )`
+export const MenuItemHelpText = styled( Truncate )`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	line-height: 16px;
 	color: ${ LIGHTER_TEXT_COLOR };