@wordpress/ui 0.12.0 → 0.13.1-next.v.202605131006.0

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

@@ -5,6 +5,12 @@ const meta: Meta< typeof Stack > = {
 	tags: [ 'manifest' ],
 	title: 'Design System/Components/Stack',
 	component: Stack,
+	parameters: {
+		componentStatus: {
+			status: 'recommended',
+			whereUsed: 'global',
+		},
+	},
 };
 export default meta;
 

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

@@ -12,6 +12,13 @@ const meta: Meta< typeof Tabs.Root > = {
 		'Tabs.Tab': Tabs.Tab,
 		'Tabs.Panel': Tabs.Panel,
 	},
+	parameters: {
+		componentStatus: {
+			status: 'use-with-caution',
+			whereUsed: 'global',
+			notes: 'Not yet recommended for use alongside components from `@wordpress/components`, pending review of color consistency with `@wordpress/components`. See [WordPress/gutenberg#76135](https://github.com/WordPress/gutenberg/issues/76135).',
+		},
+	},
 };
 export default meta;
 
@@ -281,7 +288,14 @@ export const WithTabIconsAndTooltips: StoryObj< typeof Tabs.Root > = {
 										} }
 									/>
 								</Tooltip.Trigger>
-								<Tooltip.Popup align="center" side="top">
+								<Tooltip.Popup
+									positioner={
+										<Tooltip.Positioner
+											align="center"
+											side="top"
+										/>
+									}
+								>
 									{ label }
 								</Tooltip.Popup>
 							</Tooltip.Root>

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

@@ -6,6 +6,12 @@ const meta: Meta< typeof Text > = {
 	tags: [ 'manifest' ],
 	title: 'Design System/Components/Text',
 	component: Text,
+	parameters: {
+		componentStatus: {
+			status: 'recommended',
+			whereUsed: 'global',
+		},
+	},
 };
 export default meta;
 

package/src/text/style.module.css

@@ -5,8 +5,13 @@
 		margin: 0;
 	}
 
+	/* Text variants can render as either paragraphs or headings, so each variant
+	   provides values for both element-specific CSS defenses. */
 	.heading-2xl {
 		--_gcd-heading-font-size: var(--wpds-typography-font-size-2xl);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-2xl);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-2xl);
 
 		font-family: var(--wpds-typography-font-family-heading);
 		font-size: var(--wpds-typography-font-size-2xl);
@@ -16,6 +21,9 @@
 
 	.heading-xl {
 		--_gcd-heading-font-size: var(--wpds-typography-font-size-xl);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-xl);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-md);
 
 		font-family: var(--wpds-typography-font-family-heading);
 		font-size: var(--wpds-typography-font-size-xl);
@@ -25,6 +33,9 @@
 
 	.heading-lg {
 		--_gcd-heading-font-size: var(--wpds-typography-font-size-lg);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-lg);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-sm);
 
 		font-family: var(--wpds-typography-font-family-heading);
 		font-size: var(--wpds-typography-font-size-lg);
@@ -34,6 +45,9 @@
 
 	.heading-md {
 		--_gcd-heading-font-size: var(--wpds-typography-font-size-md);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-md);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-sm);
 
 		font-family: var(--wpds-typography-font-family-heading);
 		font-size: var(--wpds-typography-font-size-md);
@@ -43,6 +57,9 @@
 
 	.heading-sm {
 		--_gcd-heading-font-size: var(--wpds-typography-font-size-xs);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-xs);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-xs);
 
 		font-family: var(--wpds-typography-font-family-heading);
 		font-size: var(--wpds-typography-font-size-xs);
@@ -52,6 +69,8 @@
 	}
 
 	.body-xl {
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-xl);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-regular);
 		--_gcd-p-font-size: var(--wpds-typography-font-size-xl);
 		--_gcd-p-line-height: var(--wpds-typography-line-height-xl);
 
@@ -62,6 +81,8 @@
 	}
 
 	.body-lg {
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-lg);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-regular);
 		--_gcd-p-font-size: var(--wpds-typography-font-size-lg);
 		--_gcd-p-line-height: var(--wpds-typography-line-height-md);
 
@@ -72,6 +93,8 @@
 	}
 
 	.body-md {
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-md);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-regular);
 		--_gcd-p-font-size: var(--wpds-typography-font-size-md);
 		--_gcd-p-line-height: var(--wpds-typography-line-height-sm);
 
@@ -82,6 +105,8 @@
 	}
 
 	.body-sm {
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-sm);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-regular);
 		--_gcd-p-font-size: var(--wpds-typography-font-size-sm);
 		--_gcd-p-line-height: var(--wpds-typography-line-height-xs);
 

package/src/tooltip/index.ts

@@ -1,7 +1,8 @@
 import { Popup } from './popup';
 import { Portal } from './portal';
+import { Positioner } from './positioner';
 import { Trigger } from './trigger';
 import { Root } from './root';
 import { Provider } from './provider';
 
-export { Provider, Root, Trigger, Popup, Portal };
+export { Provider, Root, Trigger, Popup, Portal, Positioner };

package/src/tooltip/popup.tsx

@@ -8,54 +8,46 @@ import {
 import type { PopupProps } from './types';
 import { unlock } from '../lock-unlock';
 import { Portal } from './portal';
-import { renderPortalWithChildren } from '../utils/render-portal-with-children';
-import resetStyles from '../utils/css/resets.module.css';
+import { Positioner } from './positioner';
+import { renderSlotWithChildren } from '../utils/render-slot-with-children';
 import styles from './style.module.css';
 
 const ThemeProvider: typeof ThemeProviderType =
 	unlock( themePrivateApis ).ThemeProvider;
 
 const Popup = forwardRef< HTMLDivElement, PopupProps >( function TooltipPopup(
-	{
-		align = 'center',
-		portal,
-		side = 'top',
-		sideOffset = 4,
-		children,
-		className,
-		...props
-	},
+	{ portal, positioner, children, className, ...props },
 	ref
 ) {
-	const portalChildren = (
-		<_Tooltip.Positioner
-			align={ align }
-			side={ side }
-			sideOffset={ sideOffset }
-			className={ clsx( resetStyles[ 'box-sizing' ], styles.positioner ) }
-		>
-			{ /* This should ideally use whatever dark color makes sense,
-				and not be hardcoded to #1e1e1e. The solutions would be to:
-				  - review the design of the tooltip, in case we want to stop
-				    hardcoding it to a dark background
-				  - create new semantic tokens as needed (aliasing either the "inverted
-					  bg" or "perma-dark bg" private tokens) and have Tooltip.Popup use
-				    them;
-				  - remove the hardcoded `bg` setting from the `ThemeProvider` below
-					*/ }
-			<ThemeProvider color={ { bg: '#1e1e1e' } }>
-				<_Tooltip.Popup
-					ref={ ref }
-					className={ clsx( styles.popup, className ) }
-					{ ...props }
-				>
-					{ children }
-				</_Tooltip.Popup>
-			</ThemeProvider>
-		</_Tooltip.Positioner>
+	const popupContent = (
+		/* This should ideally use whatever dark color makes sense,
+		 * and not be hardcoded to #1e1e1e. The solutions would be to:
+		 *   - review the design of the tooltip, in case we want to stop
+		 *     hardcoding it to a dark background
+		 *   - create new semantic tokens as needed (aliasing either the
+		 *     "inverted bg" or "perma-dark bg" private tokens) and have
+		 *     Tooltip.Popup use them;
+		 *   - remove the hardcoded `bg` setting from the `ThemeProvider`
+		 *     below
+		 */
+		<ThemeProvider color={ { bg: '#1e1e1e' } }>
+			<_Tooltip.Popup
+				ref={ ref }
+				className={ clsx( styles.popup, className ) }
+				{ ...props }
+			>
+				{ children }
+			</_Tooltip.Popup>
+		</ThemeProvider>
 	);
 
-	return renderPortalWithChildren( portal, <Portal />, portalChildren );
+	const positionedPopup = renderSlotWithChildren(
+		positioner,
+		<Positioner />,
+		popupContent
+	);
+
+	return renderSlotWithChildren( portal, <Portal />, positionedPopup );
 } );
 
 export { Popup };

package/src/tooltip/positioner.tsx

@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import { Tooltip as _Tooltip } from '@base-ui/react/tooltip';
+import { forwardRef } from '@wordpress/element';
+import type { PositionerProps } from './types';
+import resetStyles from '../utils/css/resets.module.css';
+import styles from './style.module.css';
+
+/**
+ * Positions the floating tooltip content relative to the trigger. Pass to
+ * `Tooltip.Popup`'s `positioner` prop to customize `side`, `align`,
+ * `sideOffset`, collision behavior, etc. When `positioner` is omitted,
+ * `Tooltip.Popup` uses this component with default props.
+ */
+const Positioner = forwardRef< HTMLDivElement, PositionerProps >(
+	function TooltipPositioner(
+		{ align = 'center', className, side = 'top', sideOffset = 4, ...props },
+		ref
+	) {
+		return (
+			<_Tooltip.Positioner
+				ref={ ref }
+				align={ align }
+				side={ side }
+				sideOffset={ sideOffset }
+				{ ...props }
+				className={ clsx(
+					resetStyles[ 'box-sizing' ],
+					styles.positioner,
+					className
+				) }
+			/>
+		);
+	}
+);
+
+export { Positioner };

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

@@ -7,10 +7,18 @@ const meta: Meta< typeof Tooltip.Root > = {
 	title: 'Design System/Components/Tooltip',
 	component: Tooltip.Root,
 	subcomponents: {
-		Provider: Tooltip.Provider,
-		Trigger: Tooltip.Trigger,
-		Popup: Tooltip.Popup,
-		Portal: Tooltip.Portal,
+		'Tooltip.Provider': Tooltip.Provider,
+		'Tooltip.Trigger': Tooltip.Trigger,
+		'Tooltip.Popup': Tooltip.Popup,
+		'Tooltip.Positioner': Tooltip.Positioner,
+		'Tooltip.Portal': Tooltip.Portal,
+	},
+	parameters: {
+		componentStatus: {
+			status: 'use-with-caution',
+			whereUsed: 'global',
+			notes: 'Not yet recommended for use alongside components from `@wordpress/components`, pending review of overlays compatibility. See [WordPress/gutenberg#76135](https://github.com/WordPress/gutenberg/issues/76135).',
+		},
 	},
 };
 export default meta;
@@ -40,8 +48,11 @@ export const Disabled: StoryObj< typeof Tooltip.Root > = {
 };
 
 /**
- * Use the `side` prop to control where the tooltip appears relative to the
- * trigger element.
+ * Customize where the tooltip appears relative to the trigger by passing a
+ * `<Tooltip.Positioner />` element to `Tooltip.Popup`'s `positioner` prop.
+ * `Tooltip.Positioner` accepts `side`, `align`, `sideOffset`, and collision
+ * settings; when `positioner` is omitted, the tooltip uses the defaults
+ * (`side="top"`, `align="center"`, `sideOffset={ 4 }`).
  */
 export const Positioning: StoryObj< typeof Tooltip.Root > = {
 	render: () => (
@@ -55,27 +66,67 @@ export const Positioning: StoryObj< typeof Tooltip.Root > = {
 		>
 			<Tooltip.Root>
 				<Tooltip.Trigger aria-label="Up">⬆️</Tooltip.Trigger>
-				<Tooltip.Popup side="top">Up</Tooltip.Popup>
+				<Tooltip.Popup positioner={ <Tooltip.Positioner side="top" /> }>
+					Up
+				</Tooltip.Popup>
 			</Tooltip.Root>
 
 			<Tooltip.Root>
 				<Tooltip.Trigger aria-label="Forward">➡️</Tooltip.Trigger>
-				<Tooltip.Popup side="right">Forward</Tooltip.Popup>
+				<Tooltip.Popup
+					positioner={ <Tooltip.Positioner side="right" /> }
+				>
+					Forward
+				</Tooltip.Popup>
 			</Tooltip.Root>
 
 			<Tooltip.Root>
 				<Tooltip.Trigger aria-label="Down">⬇️</Tooltip.Trigger>
-				<Tooltip.Popup side="bottom">Down</Tooltip.Popup>
+				<Tooltip.Popup
+					positioner={ <Tooltip.Positioner side="bottom" /> }
+				>
+					Down
+				</Tooltip.Popup>
 			</Tooltip.Root>
 
 			<Tooltip.Root>
 				<Tooltip.Trigger aria-label="Back">⬅️</Tooltip.Trigger>
-				<Tooltip.Popup side="left">Back</Tooltip.Popup>
+				<Tooltip.Popup
+					positioner={ <Tooltip.Positioner side="left" /> }
+				>
+					Back
+				</Tooltip.Popup>
 			</Tooltip.Root>
 		</div>
 	),
 };
 
+/**
+ * Beyond `side`, `Tooltip.Positioner` accepts the rest of the positioner
+ * surface — `align`, `alignOffset`, `sideOffset`, collision settings, and
+ * more — for fine-grained placement.
+ */
+export const WithCustomPositioner: StoryObj< typeof Tooltip.Root > = {
+	args: {
+		children: (
+			<>
+				<Tooltip.Trigger aria-label="Save">💾</Tooltip.Trigger>
+				<Tooltip.Popup
+					positioner={
+						<Tooltip.Positioner
+							side="right"
+							align="start"
+							sideOffset={ 16 }
+						/>
+					}
+				>
+					Save
+				</Tooltip.Popup>
+			</>
+		),
+	},
+};
+
 /**
  * Popovers in Gutenberg are managed with explicit z-index values, which can
  * create situations where a tooltip renders below another popover when you

package/src/tooltip/stories/usage-guidelines.story.tsx

@@ -15,6 +15,11 @@ const meta: Meta = {
 	title: 'Design System/Components/Tooltip/Usage Guidelines',
 	parameters: {
 		controls: { disable: true },
+		componentStatus: {
+			status: 'use-with-caution',
+			whereUsed: 'global',
+			notes: 'Not yet recommended for use alongside components from `@wordpress/components`, pending review of overlays compatibility. See [WordPress/gutenberg#76135](https://github.com/WordPress/gutenberg/issues/76135).',
+		},
 	},
 	tags: [ '!dev' ],
 };

package/src/tooltip/types.ts

@@ -5,6 +5,10 @@ import type { ComponentProps } from '../utils/types';
 
 export type PortalProps = ComponentPropsWithoutRef< typeof _Tooltip.Portal >;
 
+export type PositionerProps = ComponentPropsWithoutRef<
+	typeof _Tooltip.Positioner
+>;
+
 export type RootProps = Pick< _Tooltip.Root.Props, 'disabled' | 'children' >;
 
 export type ProviderProps = Pick<
@@ -19,9 +23,7 @@ export interface TriggerProps extends ComponentProps< 'button' > {
 	children?: ReactNode;
 }
 
-export interface PopupProps
-	extends ComponentProps< 'div' >,
-		Pick< _Tooltip.Positioner.Props, 'align' | 'side' | 'sideOffset' > {
+export interface PopupProps extends ComponentProps< 'div' > {
 	/**
 	 * The content to be rendered inside the component.
 	 */
@@ -34,4 +36,13 @@ export interface PopupProps
 	 * be ignored.
 	 */
 	portal?: ReactElement< Omit< PortalProps, 'children' > >;
+
+	/**
+	 * Optional positioner element, typically `<Tooltip.Positioner />` with
+	 * custom positioning props (`side`, `align`, `sideOffset`, collision
+	 * settings, etc.). When omitted, `Tooltip.Popup` uses `Tooltip.Positioner`
+	 * with default props. Do not pass `children` on the positioner element;
+	 * they would be ignored.
+	 */
+	positioner?: ReactElement< Omit< PositionerProps, 'children' > >;
 }

package/src/utils/css/dropdown-motion.module.css

@@ -8,9 +8,9 @@
 @layer wp-ui-utilities {
 	.dropdown-motion {
 		--wp-ui-dropdown-slide-distance: 4px;
-		--wp-ui-dropdown-slide-duration: 200ms;
-		--wp-ui-dropdown-slide-easing: cubic-bezier(0, 0, 0, 1);
-		--wp-ui-dropdown-fade-duration: 80ms;
+		--wp-ui-dropdown-slide-duration: var(--wpds-motion-duration-md);
+		--wp-ui-dropdown-slide-easing: var(--wpds-motion-easing-expressive);
+		--wp-ui-dropdown-fade-duration: var(--wpds-motion-duration-sm);
 		--wp-ui-dropdown-fade-easing: linear;
 
 		@media not ( prefers-reduced-motion ) {

package/src/utils/css/item-popup.module.css

@@ -59,7 +59,6 @@
 		align-items: center;
 		justify-content: flex-start;
 		gap: var(--wpds-dimension-gap-xs);
-		cursor: var(--wpds-cursor-control);
 		min-height: var(--wp-ui-popup-item-height);
 		border-radius: var(--wpds-border-radius-sm);
 		user-select: none;
@@ -70,6 +69,10 @@
 		padding-inline-start: calc(var(--wp-ui-popup-item-padding-inline) - 4px);
 		padding-inline-end: var(--wp-ui-popup-item-padding-inline);
 
+		&:not([data-disabled]) {
+			cursor: var(--wpds-cursor-control);
+		}
+
 		&.is-size-compact {
 			--wp-ui-popup-item-height: 32px;
 			--wp-ui-popup-item-padding-inline: 8px;
@@ -90,6 +93,7 @@
 		&[data-highlighted]:not([aria-disabled="true"]) {
 			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
 			color: var(--wpds-color-fg-interactive-neutral);
+			outline: none; /* Disable user agent focus ring */
 
 			@media ( forced-colors: active ) {
 				outline: 1px solid Highlight;

package/src/utils/css/overlay-chrome.module.css

@@ -160,20 +160,37 @@
 	 * between the chrome and any preceding / following siblings inside
 	 * `.content`. No border — the separator is specific to the pinned
 	 * case.
+	 *
+	 * Each rule is duplicated with `> [data-drawer-content] >` so it
+	 * also fires for `Drawer`, where `Drawer.Content` renders an outer
+	 * wrapper around Base UI's `_Drawer.Content` marker (so the popup-
+	 * edge gutter falls outside `[data-drawer-content]` and stays
+	 * mouse-draggable for swipe-dismiss). The marker is a transparent
+	 * one-level wrapper, so mirroring each direct-child rule one level
+	 * deeper through it preserves the same intent: chrome sitting at
+	 * the scroll body's true visual edge collapses its popup-edge
+	 * padding; chrome wrapped in arbitrary consumer-supplied
+	 * intermediate elements keeps its own padding. `Dialog` and
+	 * `AlertDialog` have no such wrapper, so the `[data-drawer-content]`
+	 * variants never match for them.
 	 */
-	.content > .header {
+	.content > .header,
+	.content > [data-drawer-content] > .header {
 		padding-inline: 0;
 	}
 
-	.content > .header:first-child {
+	.content > .header:first-child,
+	.content > [data-drawer-content] > .header:first-child {
 		padding-block-start: 0;
 	}
 
-	.content > .footer {
+	.content > .footer,
+	.content > [data-drawer-content] > .footer {
 		padding-inline: 0;
 	}
 
-	.content > .footer:last-child {
+	.content > .footer:last-child,
+	.content > [data-drawer-content] > .footer:last-child {
 		padding-block-end: 0;
 	}
 

package/src/utils/css/select-trigger.module.css

@@ -26,9 +26,12 @@
 		font-size: inherit;
 		line-height: 1.4;
 		text-align: start;
-		cursor: var(--wpds-cursor-control);
 		user-select: none;
 
+		&:not([data-disabled]) {
+			cursor: var(--wpds-cursor-control);
+		}
+
 		&.is-minimal {
 			width: auto;
 		}
@@ -48,7 +51,7 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 
-		&.is-placeholder {
+		&[data-placeholder] {
 			color: var(--wpds-color-fg-interactive-neutral-disabled);
 		}
 	}

package/src/utils/render-slot-with-children.ts

@@ -0,0 +1,31 @@
+import { cloneElement } from '@wordpress/element';
+import type { ReactElement, ReactNode } from 'react';
+
+/**
+ * Fills an optional "slot" element prop with content by cloning it and
+ * injecting the given `children`. When `slot` is undefined, the provided
+ * `defaultSlot` is used in its place.
+ *
+ * Shared by overlay `Popup` components for their slot-shaped customization
+ * props (e.g. `portal`, `positioner`), so the merge behavior — defaults,
+ * children injection — stays consistent across all of them.
+ *
+ * Callers should type the slot prop as `ReactElement<Omit<Props, 'children'>>`:
+ * any subtree passed on the slot element is overwritten by `children`.
+ *
+ * @param slot        Optional element from the slot prop (e.g. `<Tooltip.Portal … />`
+ *                    or `<Tooltip.Positioner … />`). When omitted, `defaultSlot`
+ *                    is used. Injected `children` replace any subtree the caller
+ *                    may have passed on the slot element.
+ * @param defaultSlot Unpopulated default element used when `slot` is omitted
+ *                    (e.g. `<Tooltip.Portal />`).
+ * @param children    Content to inject as the slot's children (backdrop,
+ *                    positioner, popup subtree, etc.).
+ */
+export function renderSlotWithChildren(
+	slot: ReactElement | undefined,
+	defaultSlot: ReactElement,
+	children: ReactNode
+): ReactElement {
+	return cloneElement( slot ?? defaultSlot, { children } );
+}

package/src/visually-hidden/stories/index.story.tsx

@@ -6,6 +6,12 @@ const meta: Meta< typeof VisuallyHidden > = {
 	tags: [ 'manifest' ],
 	title: 'Design System/Components/VisuallyHidden',
 	component: VisuallyHidden,
+	parameters: {
+		componentStatus: {
+			status: 'recommended',
+			whereUsed: 'global',
+		},
+	},
 };
 export default meta;
 

package/build/utils/render-portal-with-children.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/render-portal-with-children.ts"],
-  "sourcesContent": ["import { cloneElement } from '@wordpress/element';\nimport type { ReactElement, ReactNode } from 'react';\n\n/**\n * Renders overlay markup (`children`) through an optional `portal` element from\n * `portal={ <Component.Portal \u2026 /> }`, or through the package default portal.\n *\n * Shared by overlay `Popup` components so portal merge behavior stays consistent.\n *\n * @param portal        Optional element from the `portal` prop (should have no\n *                      `children`; callers type this via `Omit<PortalProps,'children'>`).\n *                      When omitted, `defaultPortal` is used. Injected `children`\n *                      replace any subtree on the portal element.\n * @param defaultPortal Unpopulated default portal element (e.g. `<Dialog.Portal />`).\n * @param children      Popup subtree (backdrop, positioner, etc.) to inject as the portal\u2019s children.\n */\nexport function renderPortalWithChildren(\n\tportal: ReactElement | undefined,\n\tdefaultPortal: ReactElement,\n\tchildren: ReactNode\n): ReactElement {\n\tconst rootPortal = portal ?? defaultPortal;\n\n\treturn cloneElement( rootPortal, {\n\t\tchildren,\n\t} );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA6B;AAgBtB,SAAS,yBACf,QACA,eACA,UACe;AACf,QAAM,aAAa,UAAU;AAE7B,aAAO,6BAAc,YAAY;AAAA,IAChC;AAAA,EACD,CAAE;AACH;",
-  "names": []
-}

package/build-module/utils/render-portal-with-children.mjs

@@ -1,12 +0,0 @@
-// packages/ui/src/utils/render-portal-with-children.ts
-import { cloneElement } from "@wordpress/element";
-function renderPortalWithChildren(portal, defaultPortal, children) {
-  const rootPortal = portal ?? defaultPortal;
-  return cloneElement(rootPortal, {
-    children
-  });
-}
-export {
-  renderPortalWithChildren
-};
-//# sourceMappingURL=render-portal-with-children.mjs.map

package/build-module/utils/render-portal-with-children.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/render-portal-with-children.ts"],
-  "sourcesContent": ["import { cloneElement } from '@wordpress/element';\nimport type { ReactElement, ReactNode } from 'react';\n\n/**\n * Renders overlay markup (`children`) through an optional `portal` element from\n * `portal={ <Component.Portal \u2026 /> }`, or through the package default portal.\n *\n * Shared by overlay `Popup` components so portal merge behavior stays consistent.\n *\n * @param portal        Optional element from the `portal` prop (should have no\n *                      `children`; callers type this via `Omit<PortalProps,'children'>`).\n *                      When omitted, `defaultPortal` is used. Injected `children`\n *                      replace any subtree on the portal element.\n * @param defaultPortal Unpopulated default portal element (e.g. `<Dialog.Portal />`).\n * @param children      Popup subtree (backdrop, positioner, etc.) to inject as the portal\u2019s children.\n */\nexport function renderPortalWithChildren(\n\tportal: ReactElement | undefined,\n\tdefaultPortal: ReactElement,\n\tchildren: ReactNode\n): ReactElement {\n\tconst rootPortal = portal ?? defaultPortal;\n\n\treturn cloneElement( rootPortal, {\n\t\tchildren,\n\t} );\n}\n"],
-  "mappings": ";AAAA,SAAS,oBAAoB;AAgBtB,SAAS,yBACf,QACA,eACA,UACe;AACf,QAAM,aAAa,UAAU;AAE7B,SAAO,aAAc,YAAY;AAAA,IAChC;AAAA,EACD,CAAE;AACH;",
-  "names": []
-}

package/build-types/utils/render-portal-with-children.d.ts

@@ -1,16 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-/**
- * Renders overlay markup (`children`) through an optional `portal` element from
- * `portal={ <Component.Portal … /> }`, or through the package default portal.
- *
- * Shared by overlay `Popup` components so portal merge behavior stays consistent.
- *
- * @param portal        Optional element from the `portal` prop (should have no
- *                      `children`; callers type this via `Omit<PortalProps,'children'>`).
- *                      When omitted, `defaultPortal` is used. Injected `children`
- *                      replace any subtree on the portal element.
- * @param defaultPortal Unpopulated default portal element (e.g. `<Dialog.Portal />`).
- * @param children      Popup subtree (backdrop, positioner, etc.) to inject as the portal’s children.
- */
-export declare function renderPortalWithChildren(portal: ReactElement | undefined, defaultPortal: ReactElement, children: ReactNode): ReactElement;
-//# sourceMappingURL=render-portal-with-children.d.ts.map

package/build-types/utils/render-portal-with-children.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"render-portal-with-children.d.ts","sourceRoot":"","sources":["../../src/utils/render-portal-with-children.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD;;;;;;;;;;;;GAYG;AACH,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,YAAY,GAAG,SAAS,EAChC,aAAa,EAAE,YAAY,EAC3B,QAAQ,EAAE,SAAS,GACjB,YAAY,CAMd"}