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

package/src/notice/types.ts

@@ -53,8 +53,7 @@ export type NoticeProps = {
 	/**
 	 * Determines the color of the notice: `warning` (yellow),
 	 * `success` (green), `error` (red), or `'info'`.
-	 * By default `'info'` will be blue, but if there is a parent Theme component
-	 * with an accent color prop, the notice will take on that color instead.
+	 * By default `'info'` will be blue.
 	 *
 	 * @default 'info'
 	 */

package/src/popover/index.tsx

@@ -146,6 +146,11 @@ const UnforwardedPopover = (
 		getAnchorRect,
 		isAlternate,
 
+		// `onKeyDown` is forwarded to `useDialog` so the consumer's handler
+		// is merged with the close-on-Escape one (rather than being silently
+		// overridden by the spread of `dialogProps` further below).
+		onKeyDown,
+
 		// Rest
 		...contentProps
 	} = useContextSystem( props, 'Popover' );
@@ -279,6 +284,28 @@ const UnforwardedPopover = (
 				) {
 					return;
 				}
+				// Treat focus moves involving portaled descendants as
+				// internal: either the next focus target is in the
+				// `@wordpress/ui` compat overlay slot, or focus is back
+				// inside this popover by the time we evaluate (e.g. when
+				// a portaled overlay is dismissed and synchronously
+				// restores focus to its trigger).
+				// See https://github.com/WordPress/gutenberg/issues/78406.
+				const relatedTarget =
+					'relatedTarget' in event ? event.relatedTarget : null;
+				if (
+					relatedTarget instanceof Element &&
+					relatedTarget.closest( '[data-wp-compat-overlay-slot]' )
+				) {
+					return;
+				}
+				if (
+					floatingElement &&
+					ownerDocument?.activeElement instanceof Element &&
+					floatingElement.contains( ownerDocument.activeElement )
+				) {
+					return;
+				}
 				// Call onFocusOutside if defined or call onClose.
 				if ( onFocusOutside ) {
 					onFocusOutside( event );
@@ -295,6 +322,7 @@ const UnforwardedPopover = (
 	const [ dialogRef, dialogProps ] = useDialog( {
 		constrainTabbing,
 		focusOnMount,
+		onKeyDown,
 		__unstableOnClose: onDialogClose,
 		// @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675)
 		onClose: onDialogClose,

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/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`

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/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';
@@ -35,9 +24,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/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"]
-}

package/build/navigation/constants.cjs

@@ -1,34 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/navigation/constants.tsx
-var constants_exports = {};
-__export(constants_exports, {
-  ROOT_MENU: () => ROOT_MENU,
-  SEARCH_FOCUS_DELAY: () => SEARCH_FOCUS_DELAY
-});
-module.exports = __toCommonJS(constants_exports);
-var ROOT_MENU = "root";
-var SEARCH_FOCUS_DELAY = 100;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ROOT_MENU,
-  SEARCH_FOCUS_DELAY
-});
-//# sourceMappingURL=constants.cjs.map

package/build/navigation/constants.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/navigation/constants.tsx"],
-  "sourcesContent": ["export const ROOT_MENU = 'root';\nexport const SEARCH_FOCUS_DELAY = 100;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,IAAM,YAAY;AAClB,IAAM,qBAAqB;",
-  "names": []
-}

package/build/navigation/context.cjs

@@ -1,58 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/navigation/context.tsx
-var context_exports = {};
-__export(context_exports, {
-  NavigationContext: () => NavigationContext,
-  useNavigationContext: () => useNavigationContext
-});
-module.exports = __toCommonJS(context_exports);
-var import_element = require("@wordpress/element");
-var import_constants = require("./constants.cjs");
-var noop = () => {
-};
-var defaultIsEmpty = () => false;
-var defaultGetter = () => void 0;
-var NavigationContext = (0, import_element.createContext)({
-  activeItem: void 0,
-  activeMenu: import_constants.ROOT_MENU,
-  setActiveMenu: noop,
-  navigationTree: {
-    items: {},
-    getItem: defaultGetter,
-    addItem: noop,
-    removeItem: noop,
-    menus: {},
-    getMenu: defaultGetter,
-    addMenu: noop,
-    removeMenu: noop,
-    childMenu: {},
-    traverseMenu: noop,
-    isMenuEmpty: defaultIsEmpty
-  }
-});
-NavigationContext.displayName = "NavigationContext";
-var useNavigationContext = () => (0, import_element.useContext)(NavigationContext);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  NavigationContext,
-  useNavigationContext
-});
-//# sourceMappingURL=context.cjs.map

package/build/navigation/context.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/navigation/context.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ROOT_MENU } from './constants';\nconst noop = () => {};\nconst defaultIsEmpty = () => false;\nconst defaultGetter = () => undefined;\nexport const NavigationContext = createContext({\n  activeItem: undefined,\n  activeMenu: ROOT_MENU,\n  setActiveMenu: noop,\n  navigationTree: {\n    items: {},\n    getItem: defaultGetter,\n    addItem: noop,\n    removeItem: noop,\n    menus: {},\n    getMenu: defaultGetter,\n    addMenu: noop,\n    removeMenu: noop,\n    childMenu: {},\n    traverseMenu: noop,\n    isMenuEmpty: defaultIsEmpty\n  }\n});\nNavigationContext.displayName = 'NavigationContext';\nexport const useNavigationContext = () => useContext(NavigationContext);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0C;AAK1C,uBAA0B;AAC1B,IAAM,OAAO,MAAM;AAAC;AACpB,IAAM,iBAAiB,MAAM;AAC7B,IAAM,gBAAgB,MAAM;AACrB,IAAM,wBAAoB,8BAAc;AAAA,EAC7C,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,gBAAgB;AAAA,IACd,OAAO,CAAC;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO,CAAC;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW,CAAC;AAAA,IACZ,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF,CAAC;AACD,kBAAkB,cAAc;AACzB,IAAM,uBAAuB,UAAM,2BAAW,iBAAiB;",
-  "names": []
-}