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

package/src/popover/test/index.tsx

@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor, getByText } from '@testing-library/react';
+import {
+	act,
+	render,
+	screen,
+	waitFor,
+	getByText,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { CSSProperties } from 'react';
 
@@ -663,4 +669,135 @@ describe( 'Popover', () => {
 			} );
 		} );
 	} );
+
+	describe( 'wp compat overlay slot', () => {
+		function createOverlaySlot() {
+			const slot = document.createElement( 'div' );
+			slot.setAttribute( 'data-wp-compat-overlay-slot', '' );
+			const slotButton = document.createElement( 'button' );
+			slotButton.textContent = 'Slotted item';
+			slot.appendChild( slotButton );
+			document.body.appendChild( slot );
+			return { slot, slotButton };
+		}
+
+		it( 'should not call onFocusOutside when focus moves into the wp compat overlay slot', async () => {
+			const user = userEvent.setup();
+			const onFocusOutside = jest.fn();
+			const { slot, slotButton } = createOverlaySlot();
+
+			render(
+				<Popover onFocusOutside={ onFocusOutside }>
+					<button>Inside popover</button>
+				</Popover>
+			);
+
+			await user.click( screen.getByText( 'Inside popover' ) );
+			await user.click( slotButton );
+
+			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			expect( onFocusOutside ).not.toHaveBeenCalled();
+
+			document.body.removeChild( slot );
+		} );
+
+		it( 'should not call onFocusOutside when focus returns from the slot to a popover descendant', async () => {
+			const user = userEvent.setup();
+			const onFocusOutside = jest.fn();
+			const { slot, slotButton } = createOverlaySlot();
+
+			render(
+				<Popover onFocusOutside={ onFocusOutside }>
+					<button>Inside popover</button>
+				</Popover>
+			);
+
+			const insideButton = screen.getByText( 'Inside popover' );
+			await user.click( insideButton );
+			await user.click( slotButton );
+			insideButton.focus();
+
+			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			expect( onFocusOutside ).not.toHaveBeenCalled();
+
+			document.body.removeChild( slot );
+		} );
+
+		it( 'should not call onFocusOutside when focus is restored to a popover descendant by the time the blur check runs', async () => {
+			// Mimics the base-ui `Select` backdrop dismissal: focus drops
+			// to `body` (so the captured `relatedTarget` is `null`), then
+			// is synchronously restored to the popover before the blur
+			// check runs.
+			const onFocusOutside = jest.fn();
+			const { slot, slotButton } = createOverlaySlot();
+
+			render(
+				<Popover
+					data-testid="popover"
+					onFocusOutside={ onFocusOutside }
+				>
+					<button>Trigger</button>
+				</Popover>
+			);
+
+			const trigger = screen.getByText( 'Trigger' );
+			const floating = screen.getByTestId( 'popover' );
+
+			await act( async () => {
+				slotButton.focus();
+				floating.dispatchEvent(
+					new FocusEvent( 'blur', {
+						bubbles: true,
+						relatedTarget: null,
+					} )
+				);
+				trigger.focus();
+				await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			} );
+
+			expect( onFocusOutside ).not.toHaveBeenCalled();
+
+			document.body.removeChild( slot );
+		} );
+
+		it( 'should still call onFocusOutside when focus moves to a sibling outside the slot', async () => {
+			const user = userEvent.setup();
+			const onFocusOutside = jest.fn();
+
+			render(
+				<>
+					<Popover onFocusOutside={ onFocusOutside }>
+						<button>Inside popover</button>
+					</Popover>
+					<button>Outside</button>
+				</>
+			);
+
+			await user.click( screen.getByText( 'Inside popover' ) );
+			await user.click( screen.getByText( 'Outside' ) );
+
+			await waitFor( () => {
+				expect( onFocusOutside ).toHaveBeenCalledTimes( 1 );
+			} );
+		} );
+	} );
+
+	it( 'should call a consumer-provided onKeyDown alongside close-on-Escape', async () => {
+		const user = userEvent.setup();
+		const onClose = jest.fn();
+		const onKeyDown = jest.fn();
+
+		render(
+			<Popover onClose={ onClose } onKeyDown={ onKeyDown }>
+				<button>Inside popover</button>
+			</Popover>
+		);
+
+		await user.click( screen.getByText( 'Inside popover' ) );
+		await user.keyboard( '[Escape]' );
+
+		expect( onKeyDown ).toHaveBeenCalled();
+		expect( onKeyDown.mock.calls[ 0 ][ 0 ].key ).toBe( 'Escape' );
+		expect( onClose ).toHaveBeenCalledTimes( 1 );
+	} );
 } );

package/src/popover/types.ts

@@ -1,6 +1,6 @@
 import type { Placement } from '@floating-ui/react-dom';
 import type { useFocusOnMount } from '@wordpress/compose';
-import type { MutableRefObject, ReactNode, SyntheticEvent } from 'react';
+import type { RefObject, ReactNode, SyntheticEvent } from 'react';
 
 type PositionYAxis = 'top' | 'middle' | 'bottom';
 type PositionXAxis = 'left' | 'center' | 'right';
@@ -12,9 +12,7 @@ type DomRectWithOwnerDocument = DOMRect & {
 
 type PopoverPlacement = Placement | 'overlay';
 
-export type PopoverAnchorRefReference = MutableRefObject<
-	Element | null | undefined
->;
+export type PopoverAnchorRefReference = RefObject< Element | null | undefined >;
 export type PopoverAnchorRefTopBottom = { top: Element; bottom: Element };
 
 export type VirtualElement = Pick< Element, 'getBoundingClientRect' > & {

package/src/range-control/stories/index.story.tsx

@@ -35,7 +35,6 @@ const meta: Meta< typeof RangeControl > = {
 		},
 		color: { control: { type: 'color' } },
 		help: { control: { type: 'text' } },
-		icon: { control: false },
 		marks: { control: { type: 'object' } },
 		onBlur: { control: false },
 		onChange: { control: false },

package/src/range-control/types.ts

@@ -114,10 +114,6 @@ export type RangeControlProps = Pick<
 		 * `undefined`.
 		 */
 		currentInput?: number;
-		/**
-		 * An icon to be shown above the slider next to its container title.
-		 */
-		icon?: string;
 		/**
 		 * The slider starting position, used when no `value` is passed.
 		 * The `initialPosition` will be clamped between the provided `min`
@@ -153,7 +149,7 @@ export type RangeControlProps = Pick<
 		 *
 		 * @default () => void
 		 */
-		onChange?: ( value?: number ) => void;
+		onChange?: ( value: number | undefined ) => void;
 		/**
 		 * Callback for when `RangeControl` input gains focus.
 		 *

package/src/responsive-wrapper/index.tsx

@@ -45,16 +45,20 @@ function ResponsiveWrapper( {
 		aspectRatio = `${ naturalWidth } / ${ naturalHeight }`;
 	}
 
+	const ch = children as React.ReactElement<
+		Pick< React.HTMLAttributes< Element >, 'className' | 'style' >
+	>;
+
 	return (
 		<TagName className="components-responsive-wrapper">
 			<div>
-				{ cloneElement( children, {
+				{ cloneElement( ch, {
 					className: clsx(
 						'components-responsive-wrapper__content',
-						children.props.className
+						ch.props.className
 					),
 					style: {
-						...children.props.style,
+						...ch.props.style,
 						aspectRatio,
 					},
 				} ) }

package/src/snackbar/README.md

@@ -61,7 +61,7 @@ The icon to render in the snackbar.
 -   Required: No
 -   Default: `null`
 
-#### `listRef`: `MutableRefObject< HTMLDivElement | null >`
+#### `listRef`: `RefObject< HTMLDivElement | null >`
 
 A ref to the list that contains the snackbar.
 

package/src/snackbar/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { MutableRefObject, ReactNode } from 'react';
+import type { RefObject, ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -25,7 +25,7 @@ type SnackbarOnlyProps = {
 	/**
 	 * A ref to the list that contains the snackbar.
 	 */
-	listRef?: MutableRefObject< HTMLDivElement | null >;
+	listRef?: RefObject< HTMLDivElement | null >;
 };
 
 export type SnackbarProps = Pick<

package/src/style.scss

@@ -12,7 +12,6 @@
 @use "./combobox-control/style.scss" as *;
 @use "./color-palette/style.scss" as *;
 @use "./custom-gradient-picker/style.scss" as *;
-@use "./draggable/style.scss" as *;
 @use "./drop-zone/style.scss" as *;
 @use "./dropdown/style.scss" as *;
 @use "./dropdown-menu/style.scss" as *;

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

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
-
-/**
- * WordPress dependencies
- */
 import { link, more, wordpress } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import TabPanel from '..';
 
 const meta: Meta< typeof TabPanel > = {
@@ -22,9 +11,9 @@ const meta: Meta< typeof TabPanel > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'use-with-caution',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'When building for the Gutenberg repo, use `Tabs` instead. Otherwise, continue using for now.',
+			notes: 'Use `Tabs` from `@wordpress/ui` instead.',
 		},
 	},
 	args: {

package/src/tab-panel/style.scss

@@ -1,11 +1,10 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "../utils/theme-variables" as *;
 
 .components-tab-panel__tabs {
 	display: flex;
 	align-items: stretch;
 	flex-direction: row;
+
 	&[aria-orientation="vertical"] {
 		flex-direction: column;
 	}
@@ -19,9 +18,19 @@
 	border: none;
 	box-shadow: none;
 	cursor: var(--wpds-cursor-control);
-	padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
+	padding: 3px var(--wpds-dimension-padding-lg); // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
-	font-weight: $font-weight-regular;
+	font-weight: var(--wpds-typography-font-weight-regular);
+	color: var(--wpds-color-fg-interactive-neutral);
+
+	&:disabled,
+	&[aria-disabled="true"] {
+		color: var(--wpds-color-fg-interactive-neutral-disabled);
+	}
+
+	&:not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
+		color: var(--wpds-color-fg-interactive-neutral-active);
+	}
 
 	&:focus:not(:disabled) {
 		position: relative;
@@ -39,8 +48,8 @@
 		pointer-events: none;
 
 		// Draw the indicator.
-		background: $components-color-accent;
-		height: calc(0 * var(--wp-admin-border-width-focus));
+		background: var(--wpds-color-stroke-interactive-neutral-strong);
+		height: calc(0 * var(--wpds-border-width-focus));
 		border-radius: 0;
 
 		// Animation
@@ -51,7 +60,7 @@
 
 	// Active.
 	&.is-active::after {
-		height: calc(1 * var(--wp-admin-border-width-focus));
+		height: calc(1 * var(--wpds-border-width-focus));
 
 		// Windows high contrast mode.
 		outline: 2px solid transparent;
@@ -62,15 +71,12 @@
 	&::before {
 		content: "";
 		position: absolute;
-		top: $grid-unit-15;
-		right: $grid-unit-15;
-		bottom: $grid-unit-15;
-		left: $grid-unit-15;
+		inset: var(--wpds-dimension-padding-md);
 		pointer-events: none;
 
 		// Draw the indicator.
 		box-shadow: 0 0 0 0 transparent;
-		border-radius: $radius-small;
+		border-radius: var(--wpds-border-radius-sm);
 
 		// Animation
 		@media not (prefers-reduced-motion) {
@@ -79,11 +85,25 @@
 	}
 
 	&:focus-visible::before {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+		box-shadow:
+			0 0 0 var(--wpds-border-width-focus)
+			var(--wpds-color-stroke-focus-brand);
 
 		// Windows high contrast mode.
 		outline: 2px solid transparent;
 	}
+
+	.components-tab-panel__tabs[aria-orientation="vertical"] & {
+		border-radius: var(--wpds-border-radius-sm);
+
+		&::after {
+			display: none;
+		}
+
+		&.is-active {
+			background: var(--wpds-color-bg-interactive-neutral-weak-active);
+		}
+	}
 }
 
 .components-tab-panel__tab-content {
@@ -93,7 +113,9 @@
 	}
 
 	&:focus-visible {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+		box-shadow:
+			0 0 0 var(--wpds-border-width-focus)
+			var(--wpds-color-stroke-focus-brand);
 
 		// Windows high contrast mode.
 		outline: 2px solid transparent;

package/src/tabs/README.md

@@ -164,7 +164,7 @@ still be accessed via the keyboard when navigating through the tablist.
 
 ##### `render`
 
- - Type: `RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }> | ReactElement<any, string | JSXElementConstructor<any>>`
+ - Type: `RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }> | ReactElement<unknown, string | JSXElementConstructor<any>>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React

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

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
-
-/**
- * WordPress dependencies
- */
 import { wordpress, more, link } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { Tabs } from '..';
 import { Slot, Fill, Provider as SlotFillProvider } from '../../slot-fill';
 import Button from '../../button';
@@ -27,7 +16,6 @@ const meta: Meta< typeof Tabs > = {
 		'Tabs.TabList': Tabs.TabList,
 		'Tabs.Tab': Tabs.Tab,
 		'Tabs.TabPanel': Tabs.TabPanel,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Tabs.Context': Tabs.Context,
 	},
 	tags: [ 'status-private' ],
@@ -35,9 +23,9 @@ const meta: Meta< typeof Tabs > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'When building for the Gutenberg repo, use this component instead of `TabPanel`. Otherwise, continue using `TabPanel`. Both will be superseded by `Tabs` in `@wordpress/ui`, but continue using these for now.',
+			notes: 'Use `Tabs` from `@wordpress/ui` instead.',
 		},
 	},
 	args: {

package/src/tabs/styles.ts

@@ -99,7 +99,7 @@ export const StyledTabList = styled( Ariakit.TabList )`
 					)
 				);
 			border-bottom: var( --wp-admin-border-width-focus ) solid
-				${ COLORS.theme.accent };
+				${ COLORS.theme.gray[ 700 ] };
 		}
 	}
 	&[aria-orientation='vertical'] {
@@ -124,11 +124,7 @@ export const StyledTabList = styled( Ariakit.TabList )`
 							var( --antialiasing-factor )
 					)
 				);
-			background-color: color-mix(
-				in srgb,
-				${ COLORS.theme.accent },
-				transparent 96%
-			);
+			background-color: ${ COLORS.theme.gray[ 100 ] };
 		}
 		&[data-select-on-move='true']:has(
 				:is( :focus-visible, [data-focus-visible] )
@@ -173,7 +169,7 @@ export const Tab = styled( Ariakit.Tab )`
 		}
 
 		&:not( [aria-disabled='true'] ):is( :hover, [data-focus-visible] ) {
-			color: ${ COLORS.theme.accent };
+			color: ${ COLORS.theme.foreground };
 		}
 
 		&:focus:not( :disabled ) {
@@ -222,7 +218,6 @@ export const Tab = styled( Ariakit.Tab )`
 		min-height: ${ space( 10 ) };
 
 		&[aria-selected='true'] {
-			color: ${ COLORS.theme.accent };
 			fill: currentColor;
 		}
 	}

package/src/tabs/tablist.tsx

@@ -133,7 +133,7 @@ export const TabList = forwardRef<
 		<StyledTabList
 			ref={ refs }
 			store={ store }
-			render={ ( props ) => (
+			render={ ( props: React.HTMLAttributes< HTMLDivElement > ) => (
 				<div
 					{ ...props }
 					// Fallback to -1 to prevent browsers from making the tablist

package/src/tooltip/index.tsx

@@ -93,7 +93,13 @@ function UnforwardedTooltip(
 	// `aria-label`
 	// See: https://github.com/WordPress/gutenberg/pull/64066
 	// See: https://github.com/WordPress/gutenberg/pull/65989
-	function addDescribedById( element: React.ReactElement ) {
+	function addDescribedById( el: React.ReactElement ) {
+		const element = el as React.ReactElement<
+			Pick<
+				React.HTMLAttributes< Element >,
+				'aria-describedby' | 'aria-label'
+			>
+		>;
 		return describedById &&
 			mounted &&
 			element.props[ 'aria-describedby' ] === undefined &&

package/src/tree-grid/test/cell.tsx

@@ -34,7 +34,6 @@ describe( 'TreeGridCell', () => {
 				</TreeGridCell>
 			)
 		).toThrow();
-		expect( console ).toHaveErrored();
 	} );
 
 	it( 'uses a child render function to render children', () => {

package/src/tree-grid/test/roving-tab-index-item.tsx

@@ -26,7 +26,6 @@ describe( 'RovingTabIndexItem', () => {
 		expect( () =>
 			render( <RovingTabIndexItem as={ TestButton } /> )
 		).toThrow();
-		expect( console ).toHaveErrored();
 	} );
 
 	it( 'allows another component to be specified as the rendered component using the `as` prop', () => {

package/src/tree-select/README.md

@@ -118,7 +118,7 @@ If this property is added, an option will be added with this label to represent
 
 ### `onChange`
 
- - Type: `((value: string, extra?: { event?: ChangeEvent<HTMLSelectElement>; }) => void) | undefined`
+ - Type: `((value: string, extra?: { event?: ChangeEvent<HTMLSelectElement, Element>; }) => void) | undefined`
  - Required: No
 
 A function that receives the value of the new option that is being selected as input.

package/src/utils/get-node-text.ts

@@ -12,7 +12,13 @@ const getNodeText = ( node: React.ReactNode ): string => {
 				return node.map( getNodeText ).join( '' );
 			}
 			if ( 'props' in node ) {
-				return getNodeText( node.props.children );
+				return getNodeText(
+					(
+						node as React.ReactElement<
+							React.PropsWithChildren< unknown >
+						>
+					 ).props.children
+				);
 			}
 			return '';
 		}

package/src/validated-form-controls/control-with-error.tsx

@@ -60,7 +60,12 @@ type ValidityTarget =
 	| HTMLSelectElement
 	| HTMLTextAreaElement;
 
-function UnforwardedControlWithError< C extends React.ReactElement >(
+function UnforwardedControlWithError<
+	C extends React.ReactElement< {
+		label: React.ReactNode;
+		required: boolean;
+	} >,
+>(
 	{
 		required,
 		markWhenOptional,

package/build/navigation/back-button/index.cjs

@@ -1,86 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/navigation/back-button/index.tsx
-var back_button_exports = {};
-__export(back_button_exports, {
-  NavigationBackButton: () => NavigationBackButton,
-  default: () => back_button_default
-});
-module.exports = __toCommonJS(back_button_exports);
-var import_clsx = __toESM(require("clsx"));
-var import_element = require("@wordpress/element");
-var import_i18n = require("@wordpress/i18n");
-var import_icons = require("@wordpress/icons");
-var import_context = require("../context.cjs");
-var import_navigation_styles = require("../styles/navigation-styles.cjs");
-var import_jsx_runtime = require("react/jsx-runtime");
-function UnforwardedNavigationBackButton({
-  backButtonLabel,
-  className,
-  href,
-  onClick,
-  parentMenu
-}, ref) {
-  const {
-    setActiveMenu,
-    navigationTree
-  } = (0, import_context.useNavigationContext)();
-  const classes = (0, import_clsx.default)("components-navigation__back-button", className);
-  const parentMenuTitle = parentMenu !== void 0 ? navigationTree.getMenu(parentMenu)?.title : void 0;
-  const handleOnClick = (event) => {
-    if (typeof onClick === "function") {
-      onClick(event);
-    }
-    const animationDirection = (0, import_i18n.isRTL)() ? "left" : "right";
-    if (parentMenu && !event.defaultPrevented) {
-      setActiveMenu(parentMenu, animationDirection);
-    }
-  };
-  const icon = (0, import_i18n.isRTL)() ? import_icons.chevronRight : import_icons.chevronLeft;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_navigation_styles.MenuBackButtonUI, {
-    __next40pxDefaultSize: true,
-    className: classes,
-    href,
-    variant: "tertiary",
-    ref,
-    onClick: handleOnClick,
-    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, {
-      icon
-    }), backButtonLabel || parentMenuTitle || (0, import_i18n.__)("Back")]
-  });
-}
-var NavigationBackButton = (0, import_element.forwardRef)(UnforwardedNavigationBackButton);
-NavigationBackButton.displayName = "NavigationBackButton";
-var back_button_default = NavigationBackButton;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  NavigationBackButton
-});
-//# sourceMappingURL=index.cjs.map

package/build/navigation/back-button/index.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/navigation/back-button/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { MenuBackButtonUI } from '../styles/navigation-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedNavigationBackButton({\n  backButtonLabel,\n  className,\n  href,\n  onClick,\n  parentMenu\n}, ref) {\n  const {\n    setActiveMenu,\n    navigationTree\n  } = useNavigationContext();\n  const classes = clsx('components-navigation__back-button', className);\n  const parentMenuTitle = parentMenu !== undefined ? navigationTree.getMenu(parentMenu)?.title : undefined;\n  const handleOnClick = event => {\n    if (typeof onClick === 'function') {\n      onClick(event);\n    }\n    const animationDirection = isRTL() ? 'left' : 'right';\n    if (parentMenu && !event.defaultPrevented) {\n      setActiveMenu(parentMenu, animationDirection);\n    }\n  };\n  const icon = isRTL() ? chevronRight : chevronLeft;\n  return /*#__PURE__*/_jsxs(MenuBackButtonUI, {\n    __next40pxDefaultSize: true,\n    className: classes,\n    href: href,\n    variant: \"tertiary\",\n    ref: ref,\n    onClick: handleOnClick,\n    children: [/*#__PURE__*/_jsx(Icon, {\n      icon: icon\n    }), backButtonLabel || parentMenuTitle || __('Back')]\n  });\n}\n\n/**\n * @deprecated Use `Navigator` instead.\n */\nexport const NavigationBackButton = forwardRef(UnforwardedNavigationBackButton);\nNavigationBackButton.displayName = 'NavigationBackButton';\nexport default NavigationBackButton;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAA2B;AAC3B,kBAA0B;AAC1B,mBAAgD;AAKhD,qBAAqC;AACrC,+BAAiC;AACjC,yBAA2C;AAC3C,SAAS,gCAAgC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AACN,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,qCAAqB;AACzB,QAAM,cAAU,YAAAA,SAAK,sCAAsC,SAAS;AACpE,QAAM,kBAAkB,eAAe,SAAY,eAAe,QAAQ,UAAU,GAAG,QAAQ;AAC/F,QAAM,gBAAgB,WAAS;AAC7B,QAAI,OAAO,YAAY,YAAY;AACjC,cAAQ,KAAK;AAAA,IACf;AACA,UAAM,yBAAqB,mBAAM,IAAI,SAAS;AAC9C,QAAI,cAAc,CAAC,MAAM,kBAAkB;AACzC,oBAAc,YAAY,kBAAkB;AAAA,IAC9C;AAAA,EACF;AACA,QAAM,WAAO,mBAAM,IAAI,4BAAe;AACtC,SAAoB,uCAAAC,MAAM,2CAAkB;AAAA,IAC1C,uBAAuB;AAAA,IACvB,WAAW;AAAA,IACX;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT,UAAU,CAAc,uCAAAC,KAAK,mBAAM;AAAA,MACjC;AAAA,IACF,CAAC,GAAG,mBAAmB,uBAAmB,gBAAG,MAAM,CAAC;AAAA,EACtD,CAAC;AACH;AAKO,IAAM,2BAAuB,2BAAW,+BAA+B;AAC9E,qBAAqB,cAAc;AACnC,IAAO,sBAAQ;",
-  "names": ["clsx", "_jsxs", "_jsx"]
-}