@wordpress/components 28.10.0 → 28.11.0

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

@@ -4,9 +4,9 @@
 import type * as Ariakit from '@ariakit/react';
 import type { Placement } from '@floating-ui/react-dom';
 
-export interface DropdownMenuContext {
+export interface MenuContext {
 	/**
-	 * The ariakit store shared across all DropdownMenu subcomponents.
+	 * The ariakit store shared across all Menu subcomponents.
 	 */
 	store: Ariakit.MenuStore;
 	/**
@@ -15,33 +15,33 @@ export interface DropdownMenuContext {
 	variant?: 'toolbar';
 }
 
-export interface DropdownMenuProps {
+export interface MenuProps {
 	/**
-	 * The trigger button.
+	 * The button triggering the menu popover.
 	 */
 	trigger: React.ReactElement;
 	/**
-	 * The contents of the dropdown.
+	 * The contents of the menu (ie. one or more menu items).
 	 */
 	children?: React.ReactNode;
 	/**
-	 * The open state of the dropdown menu when it is initially rendered. Use when
+	 * The open state of the menu popover when it is initially rendered. Use when
 	 * not wanting to control its open state.
 	 *
 	 * @default false
 	 */
 	defaultOpen?: boolean;
 	/**
-	 * The controlled open state of the dropdown menu. Must be used in conjunction
+	 * The controlled open state of the menu popover. Must be used in conjunction
 	 * with `onOpenChange`.
 	 */
 	open?: boolean;
 	/**
-	 * Event handler called when the open state of the dropdown menu changes.
+	 * Event handler called when the open state of the menu popover changes.
 	 */
 	onOpenChange?: ( open: boolean ) => void;
 	/**
-	 * The modality of the dropdown menu. When set to true, interaction with
+	 * The modality of the menu popover. When set to true, interaction with
 	 * outside elements will be disabled and only menu content will be visible to
 	 * screen readers.
 	 *
@@ -49,7 +49,7 @@ export interface DropdownMenuProps {
 	 */
 	modal?: boolean;
 	/**
-	 * The placement of the dropdown menu popover.
+	 * The placement of the menu popover.
 	 *
 	 * @default 'bottom-start' for root-level menus, 'right-start' for nested menus
 	 */
@@ -80,21 +80,22 @@ export interface DropdownMenuProps {
 		  ) => boolean );
 }
 
-export interface DropdownMenuGroupProps {
+export interface MenuGroupProps {
 	/**
-	 * The contents of the dropdown menu group.
+	 * The contents of the menu group (ie. an optional menu group label and one
+	 * or more menu items).
 	 */
 	children: React.ReactNode;
 }
 
-export interface DropdownMenuGroupLabelProps {
+export interface MenuGroupLabelProps {
 	/**
-	 * The contents of the dropdown menu group.
+	 * The contents of the menu group label.
 	 */
 	children: React.ReactNode;
 }
 
-export interface DropdownMenuItemProps {
+export interface MenuItemProps {
 	/**
 	 * The contents of the menu item.
 	 */
@@ -108,7 +109,7 @@ export interface DropdownMenuItemProps {
 	 */
 	suffix?: React.ReactNode;
 	/**
-	 * Whether to hide the parent menu when the item is clicked.
+	 * Whether to hide the menu popover when the menu item is clicked.
 	 *
 	 * @default true
 	 */
@@ -119,10 +120,10 @@ export interface DropdownMenuItemProps {
 	disabled?: boolean;
 }
 
-export interface DropdownMenuCheckboxItemProps
-	extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
+export interface MenuCheckboxItemProps
+	extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > {
 	/**
-	 * Whether to hide the dropdown menu when the item is clicked.
+	 * Whether to hide the menu popover when the menu item is clicked.
 	 *
 	 * @default false
 	 */
@@ -151,10 +152,10 @@ export interface DropdownMenuCheckboxItemProps
 	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 }
 
-export interface DropdownMenuRadioItemProps
-	extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
+export interface MenuRadioItemProps
+	extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > {
 	/**
-	 * Whether to hide the dropdown menu when the item is clicked.
+	 * Whether to hide the menu popover when the menu item is clicked.
 	 *
 	 * @default false
 	 */
@@ -182,4 +183,4 @@ export interface DropdownMenuRadioItemProps
 	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 }
 
-export interface DropdownMenuSeparatorProps {}
+export interface MenuSeparatorProps {}

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

@@ -71,9 +71,9 @@ const BottomSheetNavigationScreen = ( {
 			 * callbacks triggered based upon which screen is currently active.
 			 *
 			 * Related: https://github.com/WordPress/gutenberg/pull/36328#discussion_r768897546
+			 *
+			 * Also see https://github.com/WordPress/gutenberg/pull/41166.
 			 */
-			// see https://github.com/WordPress/gutenberg/pull/41166
-			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [] )
 	);
 
@@ -130,9 +130,7 @@ const BottomSheetNavigationScreen = ( {
 				</TouchableHighlight>
 			</ScrollView>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [
 		children,
 		isFocused,

package/src/mobile/bottom-sheet/range-cell.native.js

@@ -165,7 +165,7 @@ class BottomSheetRangeCell extends Component {
 
 		const getAccessibilityLabel = () => {
 			return sprintf(
-				/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */
+				/* translators: accessibility text. Inform about current value. 1: Control label. 2: setting label (example: width). 3: Current value. 4: value measurement unit (example: pixels) */
 				__( '%1$s. %2$s is %3$s %4$s.' ),
 				cellProps.label,
 				settingLabel,

package/src/mobile/bottom-sheet/stepper-cell/index.native.js

@@ -159,7 +159,7 @@ class BottomSheetStepperCell extends Component {
 		};
 
 		const accessibilityLabel = sprintf(
-			/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */
+			/* translators: accessibility text. Inform about current value. 1: Control label. 2: setting label (example: width). 3: Current value. 4: value measurement unit (example: pixels) */
 			__( '%1$s. %2$s is %3$s %4$s.' ),
 			label,
 			settingLabel,

package/src/mobile/bottom-sheet/sub-sheet/index.native.js

@@ -28,9 +28,7 @@ const BottomSheetSubSheet = ( {
 		if ( showSheet ) {
 			setIsFullScreen( isFullScreen );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ showSheet, isFullScreen ] );
 
 	return (

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -64,7 +64,7 @@ const BottomSheetSelectControl = ( {
 					onPress={ openSubSheet }
 					accessibilityRole="button"
 					accessibilityLabel={ sprintf(
-						// translators:  %1$s: Select control button label e.g. "Button width". %2$s: Select control option value e.g: "Auto, 25%".
+						// translators:  1: Select control button label e.g. "Button width". 2: Select control option value e.g: "Auto, 25%".
 						__( '%1$s. Currently selected: %2$s' ),
 						label,
 						selectedOption.label
@@ -102,7 +102,7 @@ const BottomSheetSelectControl = ( {
 							accessibilityLabel={
 								item.value === selectedValue
 									? sprintf(
-											// translators: %s: Select control option value e.g: "Auto, 25%".
+											// translators: %s: The selected option.
 											__( 'Selected: %s' ),
 											item.label
 									  )

package/src/mobile/color-settings/index.native.js

@@ -35,9 +35,7 @@ const ColorSettingsMemo = memo(
 		useEffect( () => {
 			shouldEnableBottomSheetMaxHeight( true );
 			onHandleClosingBottomSheet( null );
-			// Disable reason: deferring this refactor to the native team.
-			// see https://github.com/WordPress/gutenberg/pull/41166
-			// eslint-disable-next-line react-hooks/exhaustive-deps
+			// See https://github.com/WordPress/gutenberg/pull/41166
 		}, [] );
 		return (
 			<BottomSheet.NavigationContainer>

package/src/mobile/color-settings/picker-screen.native.js

@@ -43,9 +43,7 @@ const PickerScreen = () => {
 				onHandleHardwareButtonPress={ onHandleHardwareButtonPress }
 			/>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [
 		setColor,
 		currentValue,

package/src/mobile/image/index.native.js

@@ -112,9 +112,7 @@ const ImageComponent = ( {
 			}
 		}
 		return () => ( isCurrent = false );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ url ] );
 
 	const onContainerLayout = ( event ) => {

package/src/mobile/keyboard-avoiding-view/index.ios.js

@@ -69,9 +69,7 @@ export const KeyboardAvoidingView = ( {
 			keyboardShowSubscription.remove();
 			keyboardHideSubscription.remove();
 		};
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	function onSafeAreaInsetsUpdate( { safeAreaInsets } ) {

package/src/mobile/link-picker/link-picker-results.native.js

@@ -75,9 +75,8 @@ export default function LinkPickerResults( {
 		return {
 			fetchMoreSuggestions: debounce( fetchMore, REQUEST_DEBOUNCE_DELAY ),
 		};
-		// Disable eslint rule for now, to avoid introducing a regression
+		// Not adding dependencies for now, to avoid introducing a regression
 		// (see https://github.com/WordPress/gutenberg/pull/23922#discussion_r1170634879).
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	// Prevent setting state when unmounted.
@@ -90,9 +89,7 @@ export default function LinkPickerResults( {
 		setHasAllSuggestions( false );
 		setLinks( [ directEntry ] );
 		fetchMoreSuggestions( { query, links: [ directEntry ] } );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ query ] );
 
 	const onEndReached = () => fetchMoreSuggestions( { query, links } );

package/src/mobile/link-picker/link-picker-screen.native.js

@@ -53,9 +53,7 @@ const LinkPickerScreen = ( { returnScreenName } ) => {
 				onCancel={ onCancel }
 			/>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ inputValue ] );
 };
 

package/src/mobile/link-settings/index.native.js

@@ -101,9 +101,7 @@ function LinkSettings( {
 		if ( onHandleClosingBottomSheet ) {
 			onHandleClosingBottomSheet( onCloseSettingsSheet );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ urlInputValue, labelInputValue, linkRelInputValue ] );
 
 	useEffect( () => {
@@ -115,9 +113,7 @@ function LinkSettings( {
 		if ( url !== urlInputValue ) {
 			setUrlInputValue( url || '' );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ url ] );
 
 	useEffect( () => {
@@ -141,9 +137,7 @@ function LinkSettings( {
 		if ( prevEditorSidebarOpened && ! editorSidebarOpened ) {
 			onSetAttributes();
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ editorSidebarOpened, isVisible ] );
 
 	useEffect( () => {
@@ -156,9 +150,7 @@ function LinkSettings( {
 				url: prependHTTP( urlValue ),
 			} );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ urlValue ] );
 
 	const onChangeURL = useCallback(
@@ -188,9 +180,7 @@ function LinkSettings( {
 				rel: linkRelInputValue,
 			} );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ urlInputValue, labelInputValue, linkRelInputValue, setAttributes ] );
 
 	const onCloseSettingsSheet = useCallback( () => {
@@ -223,9 +213,7 @@ function LinkSettings( {
 				rel: updatedRel,
 			} );
 		},
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 		[ linkRelInputValue ]
 	);
 

package/src/mobile/link-settings/link-settings-screen.native.js

@@ -37,9 +37,7 @@ const LinkSettingsScreen = ( props ) => {
 				urlValue={ inputValue }
 			/>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ props, inputValue, navigation, route ] );
 };
 

package/src/mobile/segmented-control/index.native.js

@@ -74,18 +74,14 @@ const SegmentedControls = ( {
 	useEffect( () => {
 		setActiveSegmentIndex( selectedSegmentIndex );
 		segmentHandler( segments[ selectedSegmentIndex ] );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	useEffect( () => {
 		positionAnimationValue.setValue(
 			calculateEndValue( activeSegmentIndex )
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ segmentsDimensions ] );
 
 	const containerStyle = usePreferredColorSchemeStyle(

package/src/mobile/utils/use-unit-converter-to-mobile.native.js

@@ -66,9 +66,7 @@ const useConvertUnitToMobile = ( value, unit, styles ) => {
 		return () => {
 			dimensionsChangeSubscription.remove();
 		};
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	const onDimensionsChange = useCallback( ( { window } ) => {
@@ -85,9 +83,7 @@ const useConvertUnitToMobile = ( value, unit, styles ) => {
 			valueToConvert,
 			valueUnit
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ windowSizes, value, unit ] );
 };
 

package/src/navigable-container/stories/navigable-menu.story.tsx

@@ -9,7 +9,8 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { NavigableMenu } from '..';
 
 const meta: Meta< typeof NavigableMenu > = {
-	title: 'Components/NavigableMenu',
+	title: 'Components/Containers/NavigableMenu',
+	id: 'components-navigablemenu',
 	component: NavigableMenu,
 	argTypes: {
 		children: { control: { type: null } },

package/src/navigable-container/stories/tabbable-container.story.tsx

@@ -9,7 +9,8 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { TabbableContainer } from '..';
 
 const meta: Meta< typeof TabbableContainer > = {
-	title: 'Components/TabbableContainer',
+	title: 'Components/Containers/TabbableContainer',
+	id: 'components-tabbablecontainer',
 	component: TabbableContainer,
 	argTypes: {
 		children: { control: { type: null } },

package/src/navigation/index.tsx

@@ -104,9 +104,8 @@ export function Navigation( {
 		if ( activeMenu !== menu ) {
 			setActiveMenu( activeMenu );
 		}
-		// Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.
+		// Not adding deps for now, as it would require either a larger refactor or some questionable workarounds.
 		// See https://github.com/WordPress/gutenberg/pull/41612 for context.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ activeMenu ] );
 
 	const context = {

package/src/navigation/item/use-navigation-tree-item.tsx

@@ -41,7 +41,7 @@ export const useNavigationTreeItem = (
 		return () => {
 			removeItem( itemId );
 		};
-		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Not adding deps for now, as it would require either a larger refactor.
+		// See https://github.com/WordPress/gutenberg/pull/41639
 	}, [ activeMenu, search ] );
 };

package/src/navigation/menu/menu-title-search.tsx

@@ -55,8 +55,8 @@ function MenuTitleSearch( {
 			count
 		);
 		debouncedSpeak( resultsFoundMessage );
-		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Not adding deps for now, as it would require either a larger refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44090
 	}, [ items, search ] );
 
 	const onClose = () => {

package/src/navigation/menu/use-navigation-tree-menu.tsx

@@ -23,7 +23,7 @@ export const useNavigationTreeMenu = ( props: NavigationMenuProps ) => {
 		return () => {
 			removeMenu( key );
 		};
-		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Not adding deps for now, as it would require either a larger refactor
+		// See https://github.com/WordPress/gutenberg/pull/44090
 	}, [] );
 };

package/src/palette-edit/index.tsx

@@ -24,7 +24,7 @@ import Button from '../button';
 import { ColorPicker } from '../color-picker';
 import { FlexItem } from '../flex';
 import { HStack } from '../h-stack';
-import { ItemGroup } from '../item-group';
+import { Item, ItemGroup } from '../item-group';
 import { VStack } from '../v-stack';
 import GradientPicker from '../gradient-picker';
 import ColorPalette from '../color-palette';
@@ -35,7 +35,6 @@ import {
 	PaletteEditStyles,
 	PaletteHeading,
 	IndicatorStyled,
-	PaletteItem,
 	NameContainer,
 	NameInputControl,
 	DoneButton,
@@ -213,7 +212,7 @@ function Option< T extends PaletteElement >( {
 	);
 
 	return (
-		<PaletteItem ref={ setPopoverAnchor } as="div">
+		<Item ref={ setPopoverAnchor } size="small">
 			<HStack justify="flex-start">
 				<Button
 					onClick={ () => {
@@ -282,7 +281,7 @@ function Option< T extends PaletteElement >( {
 					onClose={ () => setIsEditingColor( false ) }
 				/>
 			) }
-		</PaletteItem>
+		</Item>
 	);
 }
 
@@ -309,7 +308,7 @@ function PaletteEditListView< T extends PaletteElement >( {
 
 	return (
 		<VStack spacing={ 3 }>
-			<ItemGroup isRounded>
+			<ItemGroup isRounded isBordered isSeparated>
 				{ elements.map( ( element, index ) => (
 					<Option
 						isGradient={ isGradient }

package/src/palette-edit/styles.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
@@ -10,7 +9,7 @@ import { css } from '@emotion/react';
 import Button from '../button';
 import { Heading } from '../heading';
 import { space } from '../utils/space';
-import { COLORS, CONFIG, font } from '../utils';
+import { COLORS, CONFIG } from '../utils';
 import { View } from '../view';
 import InputControl from '../input-control';
 import {
@@ -42,71 +41,6 @@ export const NameInputControl = styled( InputControl )`
 	}
 `;
 
-const buttonStyleReset = ( {
-	as,
-}: {
-	as: React.ComponentProps< typeof View >[ 'as' ];
-} ) => {
-	if ( as === 'button' ) {
-		return css`
-			display: flex;
-			align-items: center;
-			width: 100%;
-			appearance: none;
-			background: transparent;
-			border: none;
-			border-radius: 0;
-			padding: 0;
-			cursor: pointer;
-
-			&:hover {
-				color: ${ COLORS.theme.accent };
-			}
-		`;
-	}
-	return null;
-};
-
-export const PaletteItem = styled( View )`
-	${ buttonStyleReset }
-
-	padding-block: 3px;
-	padding-inline-start: ${ space( 3 ) };
-	border: 1px solid ${ CONFIG.surfaceBorderColor };
-	border-bottom-color: transparent;
-	font-size: ${ font( 'default.fontSize' ) };
-
-	&:focus-visible {
-		border-color: transparent;
-		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
-			${ COLORS.theme.accent };
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
-		outline-offset: 0;
-	}
-
-	border-top-left-radius: ${ CONFIG.radiusSmall };
-	border-top-right-radius: ${ CONFIG.radiusSmall };
-
-	& + & {
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
-
-	&:last-child {
-		border-bottom-left-radius: ${ CONFIG.radiusSmall };
-		border-bottom-right-radius: ${ CONFIG.radiusSmall };
-		border-bottom-color: ${ CONFIG.surfaceBorderColor };
-	}
-
-	&.is-selected + & {
-		border-top-color: transparent;
-	}
-	&.is-selected {
-		border-color: ${ COLORS.theme.accent };
-	}
-`;
-
 export const NameContainer = styled.div`
 	line-height: ${ space( 8 ) };
 	margin-left: ${ space( 2 ) };

package/src/panel/stories/index.story.tsx

@@ -17,7 +17,8 @@ import InputControl from '../../input-control';
 import { wordpress } from '@wordpress/icons';
 
 const meta: Meta< typeof Panel > = {
-	title: 'Components/Panel',
+	title: 'Components/Containers/Panel',
+	id: 'components-panel',
 	component: Panel,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { PanelRow, PanelBody },

package/src/private-apis.ts

@@ -3,10 +3,10 @@
  */
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
-import { DropdownMenuV2 } from './dropdown-menu-v2';
+import { Menu } from './menu';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
-import Tabs from './tabs';
+import { Tabs } from './tabs';
 import { kebabCase } from './utils/strings';
 import { lock } from './lock-unlock';
 
@@ -17,6 +17,6 @@ lock( privateApis, {
 	ComponentsContext,
 	Tabs,
 	Theme,
-	DropdownMenuV2,
+	Menu,
 	kebabCase,
 } );