UI: Update @base-ui/react from 1.4.0 to 1.4.1

This upstream release contains two fixes relevant to @wordpress/ui:

- "Fix display: contents tabbability" (mui/base-ui#4642) fixes the
  focus-trap regression in overlay popups that was previously patched
  with a CSS workaround in #77381. That workaround is now removed from
  Dialog, AlertDialog, Popover, Tooltip, and Select styles.
- "Mark date-fns peer dependencies as optional" (mui/base-ui#4639)
  addresses #77395 -- consumers of @wordpress/ui no longer need to
  install date-fns / @date-fns/tz to satisfy Base UI's peer deps.

Made-with: Cursor

Author: ciampo

package-lock.json

@@ -13,7 +13,7 @@
 ### Bug Fixes
 
 -   `Link`: Fix text decoration on the `unstyled` variant when `openInNewTab` is enabled, and simplify new-tab icon markup ([#77420](https://github.com/WordPress/gutenberg/pull/77420)).
--   `Dialog`, `AlertDialog`, `Popover`, `Tooltip`, `Select`: Fix broken focus-trap caused by ThemeProvider's `display: contents` and Base UI's `checkVisibility()` ([#77381](https://github.com/WordPress/gutenberg/pull/77381)).
+-   `Dialog`, `AlertDialog`, `Popover`, `Tooltip`, `Select`: Fix broken focus-trap caused by `ThemeProvider`'s `display: contents` and Base UI's `checkVisibility()` by updating `@base-ui/react` to [`1.4.1`](https://github.com/mui/base-ui/releases/tag/v1.4.1) ([#77381](https://github.com/WordPress/gutenberg/pull/77381)).
 -   `CollapsibleCard`: Fix missing keyboard focus ring on the header chevron icon when rendered inside wp-admin ([#77468](https://github.com/WordPress/gutenberg/pull/77468)).
 -   `Tabs`: Fix missing keyboard focus ring on the panel in Windows High Contrast mode when rendered inside wp-admin ([#77469](https://github.com/WordPress/gutenberg/pull/77469)).
 
@@ -25,6 +25,7 @@
 
 ### Internal
 
+-   Update `@base-ui/react` from `1.4.0` to [`1.4.1`](https://github.com/mui/base-ui/releases/tag/v1.4.1). Marks `date-fns` / `@date-fns/tz` as optional peer dependencies, resolving [#77395](https://github.com/WordPress/gutenberg/issues/77395).
 -   Extract shared `useScheduleValidation` hook; refactor `Dialog`, `Popover`, and `Tabs` validation contexts to use it ([#77165](https://github.com/WordPress/gutenberg/pull/77165)).
 -   `Tabs`: Wrap two validation timeout waits in `act(...)` to avoid intermittent test warnings ([#77319](https://github.com/WordPress/gutenberg/pull/77319)).
 

packages/ui/CHANGELOG.md

@@ -43,7 +43,7 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@base-ui/react": "^1.4.0",
+		"@base-ui/react": "^1.4.1",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/element": "file:../element",

packages/ui/package.json

@@ -1,17 +1,5 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
-/*
- * Temporary workaround for a Base UI tabbability regression with
- * checkVisibility() and display: contents.
- * See: https://github.com/mui/base-ui/issues/4622
- *
- * This must stay outside the CSS layers 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/dialog/style.module.css

@@ -87,10 +87,7 @@ const Popup = forwardRef< HTMLDivElement, PopupProps >( function PopoverPopup(
 					ref={ mergedPopupRef }
 					initialFocus={ resolvedInitialFocus }
 					finalFocus={ finalFocus }
-					className={ clsx(
-						styles.popup,
-						variant !== 'unstyled' && styles.default
-					) }
+					className={ clsx( variant !== 'unstyled' && styles.popup ) }
 					{ ...props }
 				>
 					<PopoverValidationProvider>

packages/ui/src/popover/popup.tsx

@@ -1,33 +1,11 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
-/*
- * Temporary workaround for a Base UI tabbability regression with
- * checkVisibility() and display: contents.
- * See: https://github.com/mui/base-ui/issues/4622
- *
- * This must stay outside the CSS layers 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);
 	}
 
-	/*
-	 * Structural marker; no visual styles. Always applied to the popup so
-	 * the ThemeProvider display workaround above matches regardless of
-	 * `variant`. Visuals live in `.default`.
-	 */
-	/* stylelint-disable-next-line block-no-empty -- structural marker for the
-	 * ThemeProvider display workaround above; kept class-based (not a data
-	 * attribute) so it is defined alongside the other component classes. */
-	.popup {}
-
-	.default {
+	.popup {
 		background-color: var(--wpds-color-bg-surface-neutral-strong);
 		padding: var(--wpds-dimension-padding-lg);
 		border-radius: var(--wpds-border-radius-md);

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

@@ -1,17 +1,5 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
-/*
- * Temporary workaround for a Base UI tabbability regression with
- * checkVisibility() and display: contents.
- * See: https://github.com/mui/base-ui/issues/4622
- *
- * This must stay outside the CSS layers 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-tooltip-z-index, initial);

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

@@ -1,17 +1,5 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
-/*
- * Temporary workaround for a Base UI tabbability regression with
- * checkVisibility() and display: contents.
- * See: https://github.com/mui/base-ui/issues/4622
- *
- * This must stay outside the CSS layers to override ThemeProvider's
- * unlayered display: contents.
- */
-[data-wpds-theme-provider-id]:has(> .popup) {
-	display: block;
-}
-
 @layer wp-ui-utilities {
 	.popup {
 		composes: dropdown-motion from "./dropdown-motion.module.css";