UI: Restore popup CSS workaround for focus trap

Revert the ThemeProvider hasLayoutBox follow-up and keep the temporary unlayered popup stylesheet override while we reassess the longer-term fix upstream.

Made-with: Cursor

Author: ciampo

packages/theme/src/style.module.css

@@ -1,7 +1,3 @@
 .root {
 	display: contents;
 }
-
-.has-layout-box {
-	display: block;
-}

packages/theme/src/theme-provider.tsx

@@ -49,7 +49,6 @@ export const ThemeProvider = ( {
 	children,
 	color = {},
 	cursor,
-	hasLayoutBox = false,
 	isRoot = false,
 	density,
 }: ThemeProviderProps ) => {
@@ -81,11 +80,7 @@ export const ThemeProvider = ( {
 				data-wpds-theme-provider-id={ instanceId }
 				data-wpds-root-provider={ isRoot }
 				data-wpds-density={ density }
-				className={
-					hasLayoutBox
-						? `${ styles.root } ${ styles[ 'has-layout-box' ] }`
-						: styles.root
-				}
+				className={ styles.root }
 			>
 				<ThemeContext.Provider value={ contextValue }>
 					{ children }

packages/theme/src/types.ts

@@ -54,17 +54,6 @@ export interface ThemeProviderProps extends ThemeProviderSettings {
 	 */
 	children?: ReactNode;
 
-	/**
-	 * Whether the ThemeProvider wrapper should generate a layout box instead of
-	 * using `display: contents`.
-	 *
-	 * This is useful for cases where descendants rely on visibility or layout
-	 * APIs that require an ancestor box to exist.
-	 *
-	 * @default false
-	 */
-	hasLayoutBox?: boolean;
-
 	/**
 	 * When a ThemeProvider is the root provider, it will apply its theming
 	 * settings also to the root document element (e.g. the html element).

packages/ui/src/alert-dialog/popup.tsx

@@ -51,7 +51,7 @@ const Popup = forwardRef< HTMLDivElement, PopupProps >(
 				className={ portalClassName }
 			>
 				<_AlertDialog.Backdrop className={ dialogStyles.backdrop } />
-				<ThemeProvider hasLayoutBox>
+				<ThemeProvider>
 					<_AlertDialog.Popup
 						ref={ ref }
 						className={ clsx(

packages/ui/src/dialog/popup.tsx

@@ -43,7 +43,7 @@ const Popup = forwardRef< HTMLDivElement, PopupProps >( function DialogPopup(
 	return (
 		<_Dialog.Portal container={ container } className={ portalClassName }>
 			<_Dialog.Backdrop className={ styles.backdrop } />
-			<ThemeProvider hasLayoutBox>
+			<ThemeProvider>
 				<_Dialog.Popup
 					ref={ mergedRef }
 					className={ clsx(

packages/ui/src/dialog/style.module.css

@@ -1,5 +1,17 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
+/*
+ * Base UI ≥1.4.0 uses checkVisibility() to detect tabbable elements.
+ * checkVisibility() returns false for display:contents (no generated box),
+ * which breaks the focus-trap when ThemeProvider wraps the popup.
+ *
+ * This rule must be unlayered to override ThemeProvider's unlayered
+ * display:contents.
+ */
+[data-wpds-theme-provider-id]:has(> .popup) {
+	display: block;
+}
+
 @layer wp-ui-components {
 	.backdrop {
 		position: fixed;

packages/ui/src/form/primitives/select/popup.tsx

@@ -32,7 +32,7 @@ export const Popup = forwardRef< HTMLDivElement, SelectPopupProps >(
 						className
 					) }
 				>
-					<ThemeProvider hasLayoutBox>
+					<ThemeProvider>
 						<_Select.Popup
 							ref={ ref }
 							className={ itemPopupStyles.popup }

packages/ui/src/popover/popup.tsx

@@ -79,7 +79,7 @@ const Popup = forwardRef< HTMLDivElement, PopupProps >( function PopoverPopup(
 				className
 			) }
 		>
-			<ThemeProvider hasLayoutBox>
+			<ThemeProvider>
 				<_Popover.Popup
 					ref={ mergedPopupRef }
 					initialFocus={ resolvedInitialFocus }

packages/ui/src/popover/style.module.css

@@ -1,5 +1,17 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
+/*
+ * Base UI ≥1.4.0 uses checkVisibility() to detect tabbable elements.
+ * checkVisibility() returns false for display:contents (no generated box),
+ * which breaks the focus-trap when ThemeProvider wraps the popup.
+ *
+ * This rule must be unlayered to override ThemeProvider's unlayered
+ * display:contents.
+ */
+[data-wpds-theme-provider-id]:has(> .popup) {
+	display: block;
+}
+
 @layer wp-ui-components {
 	.positioner {
 		z-index: var(--wp-ui-popover-z-index, initial);

packages/ui/src/tooltip/popup.tsx

@@ -48,7 +48,7 @@ const Popup = forwardRef< HTMLDivElement, PopupProps >( function TooltipPopup(
 				    them;
 				  - remove the hardcoded `bg` setting from the `ThemeProvider` below
 					*/ }
-				<ThemeProvider color={ { bg: '#1e1e1e' } } hasLayoutBox>
+				<ThemeProvider color={ { bg: '#1e1e1e' } }>
 					<Tooltip.Popup
 						ref={ ref }
 						className={ styles.popup }