@wordpress/components 33.1.1-next.v.202605131032.0 → 34.0.0

package/src/draggable/index.tsx

@@ -8,16 +8,28 @@ import type { DragEvent } from 'react';
  */
 import { throttle } from '@wordpress/compose';
 import { useEffect, useRef } from '@wordpress/element';
+import { getWpCompatOverlaySlot } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
 import type { DraggableProps } from './types';
-
-const dragImageClass = 'components-draggable__invisible-drag-image';
-const cloneWrapperClass = 'components-draggable__clone';
-const clonePadding = 0;
+import styles from './style.module.scss';
+
+// Legacy class names preserved alongside the CSS-module hashed ones for
+// backwards compatibility. `filter(Boolean)` strips `undefined` from Jest's
+// CSS-module mock.
+const dragImageClasses = [
+	styles[ 'invisible-drag-image' ],
+	'components-draggable__invisible-drag-image',
+].filter( Boolean );
+const cloneWrapperClasses = [
+	styles.clone,
+	'components-draggable__clone',
+].filter( Boolean );
+// Global class — shared with external code (e.g. block-editor keyboard drag).
 const bodyClass = 'is-dragging-components-draggable';
+const clonePadding = 0;
 
 /**
  * `Draggable` is a Component that provides a way to set up a cross-browser
@@ -99,6 +111,10 @@ export function Draggable( {
 	 */
 	function start( event: DragEvent ) {
 		const { ownerDocument } = event.target as HTMLElement;
+		// Only use the slot when it lives in the same document as the
+		// dragged element, so coordinate resolution stays in one space.
+		const slot = getWpCompatOverlaySlot();
+		const compatSlot = slot?.ownerDocument === ownerDocument ? slot : null;
 
 		event.dataTransfer.setData(
 			transferDataType,
@@ -116,12 +132,18 @@ export function Draggable( {
 		// right after. event.dataTransfer.setDragImage is not supported yet in
 		// IE, we need to check for its existence first.
 		if ( 'function' === typeof event.dataTransfer.setDragImage ) {
-			dragImage.classList.add( dragImageClass );
+			dragImage.classList.add( ...dragImageClasses );
+			// Invisible — stays at the document body, no slot needed.
 			ownerDocument.body.appendChild( dragImage );
 			event.dataTransfer.setDragImage( dragImage, 0, 0 );
 		}
 
-		cloneWrapper.classList.add( cloneWrapperClass );
+		cloneWrapper.classList.add( ...cloneWrapperClasses );
+
+		const inSlotClass = styles[ 'is-in-compat-slot' ];
+		if ( compatSlot && inSlotClass ) {
+			cloneWrapper.classList.add( inSlotClass );
+		}
 
 		if ( cloneClassname ) {
 			cloneWrapper.classList.add( cloneClassname );
@@ -141,8 +163,7 @@ export function Draggable( {
 			clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;
 			cloneWrapper.appendChild( clonedDragComponent );
 
-			// Inject the cloneWrapper into the DOM.
-			ownerDocument.body.appendChild( cloneWrapper );
+			( compatSlot ?? ownerDocument.body ).appendChild( cloneWrapper );
 		} else {
 			const element = ownerDocument.getElementById(
 				elementId
@@ -173,8 +194,9 @@ export function Draggable( {
 
 			cloneWrapper.appendChild( clone );
 
-			// Inject the cloneWrapper into the DOM.
-			if ( appendToOwnerDocument ) {
+			if ( compatSlot ) {
+				compatSlot.appendChild( cloneWrapper );
+			} else if ( appendToOwnerDocument ) {
 				ownerDocument.body.appendChild( cloneWrapper );
 			} else {
 				elementWrapper?.appendChild( cloneWrapper );

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

@@ -32,7 +32,13 @@ const meta: Meta< typeof Draggable > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { code: '' } },
+		docs: {
+			source: { code: '' },
+			// Render in its own iframe — Storybook's docs-page wrappers
+			// create transform-based containing blocks that break the
+			// clone's `position: fixed` resolution.
+			story: { inline: false, height: '250px' },
+		},
 		componentStatus: {
 			status: 'use-with-caution',
 			whereUsed: 'global',
@@ -115,11 +121,10 @@ export const Default: StoryFn< typeof Draggable > = DefaultTemplate.bind( {} );
 Default.args = {};
 
 /**
- * `appendToOwnerDocument` is used to append the element being dragged to the body of the owner document.
- *
- * This is useful when the element being dragged should not receive styles from its parent.
- * For example, when the element's parent sets a `z-index` value that would cause the dragged
- * element to be rendered behind other elements.
+ * `appendToOwnerDocument` appends the dragged element's clone to the owner
+ * document's body instead of the element's parent, which is useful when an
+ * ancestor's stacking context (e.g. its `z-index`) would otherwise place the
+ * clone behind other content.
  */
 export const AppendElementToOwnerDocument: StoryFn< typeof Draggable > =
 	DefaultTemplate.bind( {} );

package/src/draggable/style.module.scss

@@ -0,0 +1,29 @@
+@use "@wordpress/base-styles/z-index" as *;
+
+.invisible-drag-image {
+	position: fixed;
+	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Offscreen drag-image stand-in; flipping with writing direction has no benefit. */
+	left: -1000px;
+	height: 50px;
+	width: 50px;
+}
+
+.clone {
+	position: fixed;
+	padding: 0; // Matches the `clonePadding` JS constant.
+	background: transparent;
+	pointer-events: none;
+}
+
+// Fallback for clones placed outside the compat overlay slot — the
+// slot's stacking context handles ordering inside it.
+.clone:not(.is-in-compat-slot) {
+	z-index: z-index(".components-draggable__clone");
+}
+
+// Global selector — external code (e.g. block-editor keyboard drag)
+// toggles the same body class.
+:global(body.is-dragging-components-draggable) {
+	cursor: move; /* Fallback for IE/Edge < 14 */
+	cursor: grabbing !important;
+}

package/src/draggable/types.ts

@@ -21,6 +21,10 @@ export type DraggableProps = {
 	 * Whether to append the cloned element to the `ownerDocument` body.
 	 * By default, elements sourced by id are appended to the element's wrapper.
 	 *
+	 * Has no effect when the `@wordpress/ui` compat overlay slot is in use in
+	 * the same document — the clone goes into the slot instead. Cross-document
+	 * drags fall back to this prop's regular semantics.
+	 *
 	 * @default false
 	 */
 	appendToOwnerDocument?: boolean;

package/src/form-file-upload/README.md

@@ -65,7 +65,7 @@ Whether to allow multiple selection of files or not.
 
 ### `onChange`
 
- - Type: `ChangeEventHandler<HTMLInputElement> | undefined`
+ - Type: `ChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefined`
  - Required: Yes
 
 Callback function passed directly to the `input` file element.

package/src/form-token-field/index.tsx

@@ -253,7 +253,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 				break;
 			case 'Space':
 				if ( tokenizeOnSpace ) {
-					preventDefault = addCurrentToken();
+					preventDefault = addCurrentToken( {
+						preventDefaultOnFailedValidation: false,
+					} );
 				}
 				break;
 			case 'Escape':
@@ -320,7 +322,65 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		const tokenValue = items[ items.length - 1 ] || '';
 
 		if ( items.length > 1 ) {
-			addNewTokens( items.slice( 0, -1 ) );
+			const tokensToProcess = items.slice( 0, -1 );
+
+			// Pre-check: would any segment be rejected by
+			// `__experimentalValidateInput`? Empties and duplicates of the
+			// current selection are intentional skips, not failures.
+			const willFailValidation = ( segment: string ) => {
+				const transformed = saveTransform( segment );
+				return (
+					!! transformed &&
+					! valueContainsToken( transformed ) &&
+					! __experimentalValidateInput( transformed )
+				);
+			};
+			const hasFailures = tokensToProcess.some( willFailValidation );
+
+			// When there are failures, also commit the trailing in-progress
+			// segment so the user is left with only the items that need
+			// fixing, instead of mixing the trailing segment with the failed
+			// ones (which would block tokenization on Enter or comma).
+			const addedTokens = addNewTokens(
+				hasFailures ? items : tokensToProcess
+			);
+
+			if ( hasFailures ) {
+				// Derive rejected segments from `addedTokens` so this stays
+				// in sync with `addNewTokens`'s filter chain.
+				const rejected = items.filter( ( token ) => {
+					const transformed = saveTransform( token );
+					if ( ! transformed ) {
+						return false;
+					}
+					if ( addedTokens.has( transformed ) ) {
+						return false;
+					}
+					if ( valueContainsToken( transformed ) ) {
+						return false;
+					}
+					return ! __experimentalValidateInput( transformed );
+				} );
+
+				// Reuse the separator the user actually used (the last one
+				// in `text`) so we don't rewrite their input: comma-separated
+				// paste under `tokenizeOnSpace` stays comma-separated, and
+				// typed space under `tokenizeOnSpace` stays a space. Falls
+				// back to the mode-appropriate separator only when no
+				// separator characters are present in `text`.
+				const usedSeparators = text.match( /[ ,\t]/g );
+				const separatorChar =
+					usedSeparators?.[ usedSeparators.length - 1 ] ??
+					( tokenizeOnSpace ? ' ' : ',' );
+				// Preserve a trailing separator when the input ended with
+				// one, so the user can keep typing past a failed-validation
+				// space without their separator disappearing.
+				const trailing = tokenValue === '' ? separatorChar : '';
+				const remaining = rejected.join( separatorChar ) + trailing;
+				setIncompleteTokenValue( remaining );
+				onInputChange( remaining );
+				return;
+			}
 		}
 		setIncompleteTokenValue( tokenValue );
 		onInputChange( tokenValue );
@@ -417,7 +477,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			addNewToken( incompleteTokenValue );
 		}
 
-		return true; // PreventDefault.
+		// Comma is always a separator (typed in onKeyPress, never as input).
+		// Pasted commas go through onInputChangeHandler, which validates.
+		return true;
 	}
 
 	function moveInputToIndex( index: number ) {
@@ -454,7 +516,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		}
 	}
 
-	function addCurrentToken() {
+	function addCurrentToken( {
+		preventDefaultOnFailedValidation = true,
+	} = {} ) {
 		let preventDefault = false;
 		const selectedSuggestion = getSelectedSuggestion();
 
@@ -462,20 +526,22 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			addNewToken( selectedSuggestion );
 			preventDefault = true;
 		} else if ( inputHasValidValue() ) {
-			addNewToken( incompleteTokenValue );
-			preventDefault = true;
+			const passedValidation = addNewToken( incompleteTokenValue );
+			preventDefault =
+				passedValidation || preventDefaultOnFailedValidation;
 		}
 
 		return preventDefault;
 	}
 
-	function addNewTokens( tokens: string[] ) {
+	function addNewTokens( tokens: string[] ): Set< string > {
 		const tokensToAdd = [
 			...new Set(
 				tokens
 					.map( saveTransform )
 					.filter( Boolean )
 					.filter( ( token ) => ! valueContainsToken( token ) )
+					.filter( ( token ) => __experimentalValidateInput( token ) )
 			),
 		];
 
@@ -484,12 +550,20 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			newValue.splice( getIndexOfInput(), 0, ...tokensToAdd );
 			onChange( newValue );
 		}
+
+		return new Set( tokensToAdd );
 	}
 
+	/**
+	 * Validates and adds `token`. Returns `true` if validation passed,
+	 * `false` if it was rejected by `__experimentalValidateInput`. A `true`
+	 * return does not guarantee the token was added: `addNewTokens` may
+	 * still drop it as a duplicate or after `saveTransform` returns empty.
+	 */
 	function addNewToken( token: string ) {
 		if ( ! __experimentalValidateInput( token ) ) {
 			speak( messages.__experimentalInvalid, 'assertive' );
-			return;
+			return false;
 		}
 		addNewTokens( [ token ] );
 		speak( messages.added, 'assertive' );
@@ -502,6 +576,8 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		if ( isActive && ! tokenizeOnBlur ) {
 			focus();
 		}
+
+		return true;
 	}
 
 	function deleteToken( token: string | TokenItem ) {

package/src/form-token-field/test/index.tsx

@@ -1929,6 +1929,195 @@ describe( 'FormTokenField', () => {
 			expect( onChangeSpy ).toHaveBeenCalledTimes( 2 );
 			expectTokensToBeInTheDocument( [ 'cherry', 'Cranberry' ] );
 		} );
+
+		it( 'should still preventDefault on Enter when validation rejects the value', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+			const onSubmitSpy = jest.fn( ( e: React.FormEvent ) =>
+				e.preventDefault()
+			);
+			const startsWithCapitalLetter = ( tokenText: string ) =>
+				/^[A-Z]/.test( tokenText );
+
+			render(
+				<form onSubmit={ onSubmitSpy }>
+					<FormTokenFieldWithState
+						onChange={ onChangeSpy }
+						__experimentalValidateInput={ startsWithCapitalLetter }
+					/>
+				</form>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Type 'hello' — lowercase, fails validation.
+			// Press Enter — should NOT submit the parent form.
+			await user.type( input, 'hello[Enter]' );
+			expect( onChangeSpy ).not.toHaveBeenCalled();
+			expect( onSubmitSpy ).not.toHaveBeenCalled();
+			expect( input ).toHaveValue( 'hello' );
+		} );
+
+		it( 'should not preventDefault on space when validation fails and `tokenizeOnSpace` is true', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+			const startsWithCapitalLetter = ( tokenText: string ) =>
+				/^[A-Z]/.test( tokenText );
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					tokenizeOnSpace
+					__experimentalValidateInput={ startsWithCapitalLetter }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Type 'hello ', lowercase, fails validation.
+			// The space should be typed into the input (not prevented), and
+			// the trailing space should be preserved by the rejoin so the
+			// user can keep typing past the failed-validation space.
+			await user.type( input, 'hello ' );
+			expect( onChangeSpy ).not.toHaveBeenCalled();
+			expect( input ).toHaveValue( 'hello ' );
+
+			// User can keep typing past the failed-validation space.
+			await user.type( input, 'w' );
+			expect( input ).toHaveValue( 'hello w' );
+
+			// Clear and type 'Hello ', capital letter, passes validation.
+			// The space should be prevented, and a token should be created.
+			await user.clear( input );
+			await user.type( input, 'Hello ' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenCalledWith( [ 'Hello' ] );
+			expectTokensToBeInTheDocument( [ 'Hello' ] );
+		} );
+
+		it( 'should filter out invalid tokens when pasting with separators', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+			const startsWithCapitalLetter = ( tokenText: string ) =>
+				/^[A-Z]/.test( tokenText );
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					__experimentalValidateInput={ startsWithCapitalLetter }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Paste values separated by comma, only valid ones should be added.
+			// Uses paste (not type) because comma keystrokes go through
+			// handleCommaKey, while pasted text goes through
+			// onInputChangeHandler which splits by separator.
+			await user.click( input );
+			await user.paste( 'Apple,banana,Cherry,' );
+			expect( onChangeSpy ).toHaveBeenCalledWith( [ 'Apple', 'Cherry' ] );
+			expectTokensToBeInTheDocument( [ 'Apple', 'Cherry' ] );
+			expectTokensNotToBeInTheDocument( [ 'banana' ] );
+			expect( input ).toHaveValue( 'banana,' );
+		} );
+
+		it( 'should leave all segments in the input when none pass validation on paste', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+			const startsWithCapitalLetter = ( tokenText: string ) =>
+				/^[A-Z]/.test( tokenText );
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					__experimentalValidateInput={ startsWithCapitalLetter }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.click( input );
+			await user.paste( 'apple,banana,cherry,' );
+
+			expect( onChangeSpy ).not.toHaveBeenCalled();
+			expect( input ).toHaveValue( 'apple,banana,cherry,' );
+		} );
+
+		it( 'should commit a trailing valid segment and leave only failed segments in the input when pasting without a trailing separator', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+			const startsWithCapitalLetter = ( tokenText: string ) =>
+				/^[A-Z]/.test( tokenText );
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					__experimentalValidateInput={ startsWithCapitalLetter }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.click( input );
+			await user.paste( 'Apple,banana,Cherry' );
+
+			expect( onChangeSpy ).toHaveBeenCalledWith( [ 'Apple', 'Cherry' ] );
+			expectTokensToBeInTheDocument( [ 'Apple', 'Cherry' ] );
+			expect( input ).toHaveValue( 'banana' );
+		} );
+
+		it( 'should not leave a duplicate of an existing token in the input when pasting comma-separated values', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					initialValue={ [ 'Apple' ] }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.click( input );
+			await user.paste( 'Apple,Cherry,' );
+
+			expect( onChangeSpy ).toHaveBeenCalledWith( [ 'Apple', 'Cherry' ] );
+			expectTokensToBeInTheDocument( [ 'Apple', 'Cherry' ] );
+			expect( input ).toHaveValue( '' );
+		} );
+
+		it( 'should not leave a duplicate of an existing token in the input when pasting comma-separated values with `__experimentalValidateInput`', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+			const startsWithCapitalLetter = ( tokenText: string ) =>
+				/^[A-Z]/.test( tokenText );
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					initialValue={ [ 'Apple' ] }
+					__experimentalValidateInput={ startsWithCapitalLetter }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.click( input );
+			await user.paste( 'Apple,Cherry,' );
+
+			expect( onChangeSpy ).toHaveBeenCalledWith( [ 'Apple', 'Cherry' ] );
+			expectTokensToBeInTheDocument( [ 'Apple', 'Cherry' ] );
+			expect( input ).toHaveValue( '' );
+		} );
 	} );
 
 	describe( 'maxLength', () => {

package/src/h-stack/hook.tsx

@@ -29,7 +29,7 @@ export function useHStack( props: WordPressComponentProps< Props, 'div' > ) {
 		const _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] );
 
 		if ( _isSpacer ) {
-			const childElement = child as ReactElement;
+			const childElement = child as ReactElement< typeof FlexItem >;
 			const _key = childElement.key || `hstack-${ index }`;
 
 			return <FlexItem isBlock key={ _key } { ...childElement.props } />;

package/src/higher-order/with-notices/index.tsx

@@ -6,7 +6,7 @@ import { v4 as uuid } from 'uuid';
 /**
  * WordPress dependencies
  */
-import { forwardRef, useState, useMemo } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -45,10 +45,7 @@ import type { WithNoticeProps } from './types';
  * @return Wrapped component.
  */
 export default createHigherOrderComponent( ( OriginalComponent ) => {
-	function Component(
-		props: { [ key: string ]: any },
-		ref: React.ForwardedRef< any >
-	) {
+	return function Component( props: { [ key: string ]: any } ) {
 		const [ noticeList, setNoticeList ] = useState<
 			WithNoticeProps[ 'noticeList' ]
 		>( [] );
@@ -97,20 +94,6 @@ export default createHigherOrderComponent( ( OriginalComponent ) => {
 			),
 		};
 
-		return isForwardRef ? (
-			<OriginalComponent { ...propsOut } ref={ ref } />
-		) : (
-			<OriginalComponent { ...propsOut } />
-		);
-	}
-
-	let isForwardRef: boolean;
-	// @ts-expect-error - `render` will only be present when OriginalComponent was wrapped with forwardRef().
-	const { render } = OriginalComponent;
-	// Returns a forwardRef if OriginalComponent appears to be a forwardRef.
-	if ( typeof render === 'function' ) {
-		isForwardRef = true;
-		return forwardRef( Component );
-	}
-	return Component;
+		return <OriginalComponent { ...propsOut } />;
+	};
 }, 'withNotices' );

package/src/higher-order/with-notices/test/index.tsx

@@ -33,14 +33,6 @@ function noticesFrom( list: string[] ) {
 	return list.map( ( item ) => ( { id: item, content: item } ) );
 }
 
-function isComponentLike( object: any ) {
-	return typeof object === 'function';
-}
-
-function isForwardRefLike( { render: renderMethod }: any ) {
-	return typeof renderMethod === 'function';
-}
-
 const content = 'Base content';
 
 const BaseComponent = ( {
@@ -80,16 +72,6 @@ const TestNoticeOperations = withNotices(
 	} )
 );
 
-describe( 'withNotices return type', () => {
-	it( 'should be a component given a component', () => {
-		expect( isComponentLike( TestComponent ) ).toBe( true );
-	} );
-
-	it( 'should be a forwardRef given a forwardRef', () => {
-		expect( isForwardRefLike( TestNoticeOperations ) ).toBe( true );
-	} );
-} );
-
 describe( 'withNotices operations', () => {
 	function setup( props: any = {} ) {
 		const handle = createRef< any >();

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

@@ -1,31 +1,19 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
 import { SVG, Path } from '@wordpress/primitives';
 import { wordpress } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import Icon from '..';
 import { VStack } from '../../v-stack';
 
 const meta: Meta< typeof Icon > = {
-	tags: [ 'manifest' ],
 	title: 'Components/Icon',
 	component: Icon,
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'use-with-caution',
 			whereUsed: 'global',
-			notes: 'Prefer this component over the `Icon` component from `@wordpress/icons`.',
+			notes: 'When rendering SVGs, use `Icon` from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/index.ts

@@ -45,7 +45,6 @@ export {
 	/** @deprecated Import `BoxControl` instead. */
 	default as __experimentalBoxControl,
 	default as BoxControl,
-	applyValueToSides as __experimentalApplyValueToSides,
 } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
@@ -118,11 +117,6 @@ export { default as MenuItemsChoice } from './menu-items-choice';
 export { default as Modal } from './modal';
 export { default as ScrollLock } from './scroll-lock';
 export { NavigableMenu, TabbableContainer } from './navigable-container';
-export { default as __experimentalNavigation } from './navigation';
-export { default as __experimentalNavigationBackButton } from './navigation/back-button';
-export { default as __experimentalNavigationGroup } from './navigation/group';
-export { default as __experimentalNavigationItem } from './navigation/item';
-export { default as __experimentalNavigationMenu } from './navigation/menu';
 export {
 	/** @deprecated Import `Navigator` instead. */
 	NavigatorProvider as __experimentalNavigatorProvider,