@base-ui/react 1.6.0 → 1.7.0

package/drawer/virtual-keyboard-provider/DrawerVirtualKeyboardProvider.mjs

@@ -6,6 +6,7 @@ import { addEventListener } from '@base-ui/utils/addEventListener';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.mjs";
 import { clamp } from "../../internals/clamp.mjs";
 import { activeElement, contains, getTarget, isInteractiveElement } from "../../floating-ui-react/utils.mjs";
@@ -20,6 +21,15 @@ const KEYBOARD_VISIBILITY_MARGIN = 16;
 // keyboard overlap, so the field can be scrolled clear of the keyboard instead of
 // ending up flush against it. Only applied when there is actual overlap.
 const KEYBOARD_SCROLL_SLACK = 48;
+// Cadence of the settle-watching realign passes after focus moves with the keyboard open:
+// long enough for a smooth scroll to show progress between passes, short enough to recover
+// quickly from a scroll canceled by WebKit's reveal; the pass count covers CSS transitions
+// reacting to the focus change (e.g. a 260ms footer resize) with room to spare.
+const KEYBOARD_REALIGN_INTERVAL = 150;
+const KEYBOARD_REALIGN_MAX_PASSES = 4;
+// Frames the alignment waits for the scroll destination to stop moving (layout reacting to
+// the focus change, e.g. a footer resizing over a CSS transition) before scrolling anyway.
+const KEYBOARD_SETTLE_FRAME_LIMIT = 60;
 const INPUT_TAP_MOVE_THRESHOLD = 10;
 const INPUT_TAP_HIT_SLOP = 16;
 const KEYBOARD_INPUT_TYPES = new Set(['email', 'number', 'password', 'search', 'tel', 'text', 'url']);
@@ -43,11 +53,10 @@ export function DrawerVirtualKeyboardProvider(props) {
   const {
     children
   } = props;
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const open = store.useState('open');
   const mounted = store.useState('mounted');
+  const modal = store.useState('modal');
   const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
   const viewportElement = store.useState('viewportElement');
 
@@ -60,7 +69,9 @@ export function DrawerVirtualKeyboardProvider(props) {
   const keyboardTouchStartRef = React.useRef(null);
   const focusedKeyboardTargetRef = React.useRef(null);
   const keyboardScrollAdjustmentRef = React.useRef(null);
+  const programmaticKeyboardFocusRef = React.useRef(false);
   const keyboardFocusFrame = useAnimationFrame();
+  const keyboardRealignTimeout = useTimeout();
   const restoreKeyboardScrollAdjustment = useStableCallback(() => {
     const adjustment = keyboardScrollAdjustmentRef.current;
     if (!adjustment) {
@@ -128,46 +139,100 @@ export function DrawerVirtualKeyboardProvider(props) {
     const doc = ownerDocument(rootElement);
     const win = ownerWindow(rootElement);
     const visualViewport = win.visualViewport;
+
+    // Alignment scroll bookkeeping: destination stability, whether a scroll was issued,
+    // and the last observed progress so delayed passes can distinguish moving from stalled.
+    let keyboardScrollElement = null;
+    let keyboardScrollDestination = 0;
+    let keyboardScrollChecks = 0;
+    let keyboardScrollObserved = -1;
     const setDrawerKeyboardInset = inset => {
       rootElement.style.setProperty(DrawerViewportCssVars.keyboardInset, `${Math.max(0, Math.ceil(inset))}px`);
     };
-    const resetDrawerKeyboardInset = () => {
-      setDrawerKeyboardInset(0);
-    };
     const clearFocusedKeyboardTarget = () => {
       focusedKeyboardTargetRef.current = null;
-      resetDrawerKeyboardInset();
+      keyboardScrollElement = null;
+      setDrawerKeyboardInset(0);
       restoreKeyboardScrollAdjustment();
       keyboardFocusFrame.cancel();
+      keyboardRealignTimeout.clear();
+    };
+
+    // WebKit's native reveal scroll can move the page even while the scroll lock hides
+    // overflow (e.g. when the software keyboard's previous/next field arrows move focus).
+    // While the drawer is modal, any window scroll during keyboard interaction is spurious,
+    // so pin the page to the position it had when the drawer opened.
+    const baseScrollX = win.scrollX;
+    const baseScrollY = win.scrollY;
+    const restoreWindowScroll = () => {
+      if (modal !== true || nestedDrawerOpen || !focusedKeyboardTargetRef.current || getKeyboardVisualViewport(win) == null) {
+        return false;
+      }
+      if (win.scrollX !== baseScrollX || win.scrollY !== baseScrollY) {
+        // Force an instant jump: the two-argument form defaults `behavior` to `auto`, which
+        // obeys the page's `scroll-behavior`, so a global `scroll-behavior: smooth` would
+        // animate the restore. The measurements that follow assume the page is already back
+        // at rest, and a smooth restore also re-emits `scroll`, re-entering this handler.
+        win.scrollTo({
+          left: baseScrollX,
+          top: baseScrollY,
+          behavior: 'instant'
+        });
+        return true;
+      }
+      return false;
+    };
+
+    // Focus moved by the drawer itself goes through `focusKeyboardInputWithoutPageScroll`,
+    // but native focus changes (the iOS keyboard's previous/next field arrows) commit
+    // WebKit's reveal scroll before `focusin` reaches us — cancelling it afterwards
+    // visibly jitters the sheet. `focusout` on the outgoing field fires before focus
+    // lands, so override the incoming field's geometry there and restore it in `focusin`.
+    let restorePreemptedFocus = null;
+    const consumePreemptedFocus = () => {
+      restorePreemptedFocus?.();
+      restorePreemptedFocus = null;
+    };
+    const preemptFocusReveal = (target, keyboardViewport) => {
+      consumePreemptedFocus();
+
+      // Native focus carries no preventScroll, so a fake off-screen rect would make WebKit
+      // scroll the drawer's own scroll containers thousands of pixels chasing it. Presenting
+      // the field as already centered in the visible band above the keyboard instead makes
+      // both the in-page reveal and the viewport pan no-ops.
+      const rect = target.getBoundingClientRect();
+      restorePreemptedFocus = overrideGeometryDuringFocus(target, (keyboardViewport.top + keyboardViewport.bottom - rect.top - rect.bottom) / 2);
     };
     const alignFocusedKeyboardTarget = () => {
+      // If focus never lands on a preempted target, the focusout-scheduled alignment still
+      // restores it on the next frame before paint.
+      consumePreemptedFocus();
       const target = focusedKeyboardTargetRef.current;
       // If the focused field is removed from the DOM without firing `focusout` (e.g. it is
       // conditionally rendered away), any applied scroll slack is restored here on the next
       // focus/viewport event or when the drawer closes. This self-corrects rather than
       // tracking each field's lifecycle.
       if (nestedDrawerOpen || !target || !contains(rootElement, target)) {
-        resetDrawerKeyboardInset();
+        setDrawerKeyboardInset(0);
         restoreKeyboardScrollAdjustment();
         return;
       }
+
+      // Undo any reveal scroll WebKit applied to the locked page before measuring, so the
+      // keyboard inset and alignment are computed against the resting viewport.
+      restoreWindowScroll();
       const keyboardViewport = getKeyboardVisualViewport(win);
       if (!keyboardViewport) {
-        resetDrawerKeyboardInset();
+        setDrawerKeyboardInset(0);
         restoreKeyboardScrollAdjustment();
         return;
       }
-      setDrawerKeyboardInset(getDrawerKeyboardInset(win, keyboardViewport));
+      setDrawerKeyboardInset(Math.max(0, win.innerHeight - keyboardViewport.bottom));
       const scrollTarget = findKeyboardScrollTarget(target, rootElement);
       if (!scrollTarget) {
         restoreKeyboardScrollAdjustment();
         return;
       }
-      if (!scrollTarget.isConnected || !contains(rootElement, scrollTarget)) {
-        resetDrawerKeyboardInset();
-        restoreKeyboardScrollAdjustment();
-        return;
-      }
       const scrollTargetRect = scrollTarget.getBoundingClientRect();
       const clippedBottom = Math.min(scrollTargetRect.bottom, keyboardViewport.bottom);
       const overlap = Math.max(0, scrollTargetRect.bottom - keyboardViewport.bottom);
@@ -183,14 +248,70 @@ export function DrawerVirtualKeyboardProvider(props) {
         return;
       }
       const targetRect = target.getBoundingClientRect();
-      const targetCenter = (targetRect.top + targetRect.bottom) / 2;
-      const visibleCenter = (visibleTop + visibleBottom) / 2;
-      const nextScrollTop = scrollTarget.scrollTop + targetCenter - visibleCenter;
-      animateKeyboardScroll(scrollTarget, clamp(nextScrollTop, 0, maxScrollTop));
+      const nextScrollTop = scrollTarget.scrollTop + (targetRect.top + targetRect.bottom - visibleTop - visibleBottom) / 2;
+      const destination = Math.round(clamp(nextScrollTop, 0, maxScrollTop));
+      const settled = keyboardScrollElement === scrollTarget && Math.abs(keyboardScrollDestination - destination) <= 1;
+      if (!settled) {
+        // Commit the scroll only once the destination holds across two consecutive checks.
+        // Layout may still be reacting to the focus change (e.g. a footer sized by
+        // `:focus-within` resizing over a transition), and scrolling toward a
+        // mid-transition destination overshoots, then visibly pulls back once corrected.
+        // The destination is scroll-position-invariant, so an in-flight scroll of the
+        // container itself never defers the commit.
+        const checks = keyboardScrollElement === scrollTarget ? keyboardScrollChecks + 1 : 1;
+        keyboardScrollElement = scrollTarget;
+        keyboardScrollDestination = destination;
+        keyboardScrollChecks = checks;
+        keyboardScrollObserved = -1;
+        // Re-check next frame; give up and scroll anyway if layout never settles.
+        if (checks <= KEYBOARD_SETTLE_FRAME_LIMIT) {
+          keyboardFocusFrame.request(alignFocusedKeyboardTarget);
+          return;
+        }
+      } else if (keyboardScrollObserved >= 0) {
+        // A scroll toward this destination is already out. Leave it alone while it has
+        // arrived or is still progressing — re-issuing restarts the smooth-scroll easing
+        // curve, a visible stutter on every realign pass — and re-issue only when it
+        // stalled short (WebKit cancels in-flight smooth scrolls when its native reveal
+        // for the focus resolves).
+        const current = scrollTarget.scrollTop;
+        if (Math.abs(current - destination) <= 1) {
+          return;
+        }
+        if (current !== keyboardScrollObserved) {
+          keyboardScrollObserved = current;
+          return;
+        }
+      }
+      keyboardScrollElement = scrollTarget;
+      keyboardScrollDestination = destination;
+      keyboardScrollChecks = 0;
+      keyboardScrollObserved = scrollTarget.scrollTop;
+      animateKeyboardScroll(scrollTarget, destination);
     };
     const scheduleKeyboardFocusAlignment = () => {
       keyboardFocusFrame.request(alignFocusedKeyboardTarget);
     };
+
+    // When focus moves with the keyboard already up, no viewport resize events follow to
+    // re-run alignment, and the single frame-scheduled pass is unreliable: WebKit resolves
+    // the reveal for the focus asynchronously (a UI-process round trip) and cancels any
+    // in-flight scroll the pass started when it lands, and layout reacting to the focus
+    // change (e.g. a footer sized by `:focus-within` and the keyboard inset) settles only
+    // after its transition, so the pass measures stale geometry. Re-align on an interval
+    // until both settle; the alignment's scroll bookkeeping observes before re-issuing,
+    // so passes that find the scroll on course are inert.
+    const scheduleDelayedKeyboardRealign = () => {
+      let remainingPasses = KEYBOARD_REALIGN_MAX_PASSES;
+      const realign = () => {
+        alignFocusedKeyboardTarget();
+        remainingPasses -= 1;
+        if (remainingPasses > 0) {
+          keyboardRealignTimeout.start(KEYBOARD_REALIGN_INTERVAL, realign);
+        }
+      };
+      keyboardRealignTimeout.start(KEYBOARD_REALIGN_INTERVAL, realign);
+    };
     const captureFocusedKeyboardTarget = eventTarget => {
       if (nestedDrawerOpen) {
         return false;
@@ -202,16 +323,56 @@ export function DrawerVirtualKeyboardProvider(props) {
       if (!target || !contains(rootElement, target)) {
         return false;
       }
+
+      // A new field starts a fresh alignment; the scroll bookkeeping must not carry
+      // over from the previous field's scroll.
+      if (focusedKeyboardTargetRef.current !== target) {
+        keyboardScrollElement = null;
+      }
       focusedKeyboardTargetRef.current = target;
       return true;
     };
     const handleFocusIn = event => {
-      if (captureFocusedKeyboardTarget(getTarget(event))) {
-        scheduleKeyboardFocusAlignment();
+      // The programmatic transition is over once focus lands, which happens before
+      // `.focus()` returns. Any later `focusout` is the consumer's own — an `onFocus`
+      // handler that blurs or moves focus — and must be reconciled rather than
+      // suppressed, so stop suppressing here instead of waiting for `.focus()` to return.
+      programmaticKeyboardFocusRef.current = false;
+      consumePreemptedFocus();
+      if (!captureFocusedKeyboardTarget(getTarget(event))) {
+        // Focus landed outside any drawer keyboard input. The `focusout` on the previous
+        // field normally clears the tracked target, but the tap path suppresses that
+        // `focusout` via `programmaticKeyboardFocusRef`, so a consumer `onFocus` handler that
+        // redirects focus out of the drawer would otherwise leave a stale target holding its
+        // inset, slack, and pending realign. Reconcile against the real focus here.
+        // A handler that ends focus entirely emits no `focusin` to reconcile from; that case
+        // is covered by clearing the suppression flag above so its `focusout` is handled.
+        clearFocusedKeyboardTarget();
+        return;
       }
+
+      // Covers every way focus can land with the keyboard already up: native moves (the
+      // keyboard's previous/next arrows) and the tap path (which suppresses `focusout`
+      // handling via the programmatic flag).
+      if (getKeyboardVisualViewport(win) != null) {
+        scheduleDelayedKeyboardRealign();
+      }
+      scheduleKeyboardFocusAlignment();
     };
     const handleFocusOut = event => {
+      // The blur inside `focusKeyboardInputWithoutPageScroll` is followed synchronously by
+      // a re-focus; clearing state here would drop the keyboard inset for a frame.
+      if (programmaticKeyboardFocusRef.current) {
+        return;
+      }
       if (captureFocusedKeyboardTarget(event.relatedTarget)) {
+        const target = focusedKeyboardTargetRef.current;
+        const keyboardViewport = getKeyboardVisualViewport(win);
+        // The delayed realign passes are scheduled by the `focusin` that follows once
+        // focus lands on the captured target.
+        if (target && keyboardViewport) {
+          preemptFocusReveal(target, keyboardViewport);
+        }
         scheduleKeyboardFocusAlignment();
         return;
       }
@@ -226,25 +387,36 @@ export function DrawerVirtualKeyboardProvider(props) {
     if (visualViewport) {
       cleanupListeners.push(addEventListener(visualViewport, 'resize', handleViewportUpdate), addEventListener(visualViewport, 'scroll', handleViewportUpdate));
     }
-    cleanupListeners.push(addEventListener(doc, 'focusin', handleFocusIn, true), addEventListener(doc, 'focusout', handleFocusOut, true));
+    const handleWindowScroll = () => {
+      if (restoreWindowScroll()) {
+        // Recompute the keyboard inset once the page is back at rest; measurements taken
+        // mid-reveal (a non-zero visual viewport offset) inflate it and push the popup up.
+        scheduleKeyboardFocusAlignment();
+      }
+    };
+
+    // Once the user puts a finger down they own the scroll position. Stop both the frame settle
+    // loop, which can center after changing layout settles, and the delayed passes, which can't
+    // distinguish a user scroll from a reveal scroll WebKit canceled. A later focus or viewport
+    // change reschedules alignment if it's still needed.
+    const cancelKeyboardRealignOnPointerDown = () => {
+      keyboardFocusFrame.cancel();
+      keyboardRealignTimeout.clear();
+      keyboardScrollElement = null;
+    };
+    cleanupListeners.push(addEventListener(doc, 'focusin', handleFocusIn, true), addEventListener(doc, 'focusout', handleFocusOut, true), addEventListener(win, 'scroll', handleWindowScroll), addEventListener(doc, 'pointerdown', cancelKeyboardRealignOnPointerDown, true));
     if (captureFocusedKeyboardTarget(activeElement(doc))) {
       scheduleKeyboardFocusAlignment();
     }
     return () => {
       cleanupListeners.forEach(cleanup => cleanup());
+      consumePreemptedFocus();
       clearFocusedKeyboardTarget();
       rootElement.style.removeProperty(DrawerViewportCssVars.keyboardInset);
     };
-  }, [animateKeyboardScroll, keyboardFocusFrame, mounted, nestedDrawerOpen, open, restoreKeyboardScrollAdjustment, rootElement, setKeyboardScrollSlack]);
+  }, [animateKeyboardScroll, keyboardFocusFrame, keyboardRealignTimeout, modal, mounted, nestedDrawerOpen, open, restoreKeyboardScrollAdjustment, rootElement, setKeyboardScrollSlack]);
   const onTouchStart = useStableCallback(event => {
-    if (!open || !mounted || nestedDrawerOpen) {
-      resetTouchTrackingState();
-      return;
-    }
     const touch = event.touches[0];
-    if (!touch) {
-      return;
-    }
     pendingKeyboardFocusMovedRef.current = false;
     keyboardTouchStartRef.current = {
       x: touch.clientX,
@@ -270,9 +442,9 @@ export function DrawerVirtualKeyboardProvider(props) {
       return;
     }
     const touch = event.changedTouches[0] ?? event.touches[0];
-    const doc = ownerDocument(event.currentTarget);
+    const root = rootElement.getRootNode();
     const nativeEventTarget = getTarget(event.nativeEvent);
-    const pointTarget = touch ? resolveKeyboardTouchTargetFromPoint(doc, touch.clientX, touch.clientY) : null;
+    const pointTarget = touch ? resolveKeyboardTouchTargetFromPoint(root, touch.clientX, touch.clientY) : null;
 
     // The lift point landed on another interactive/label element; let its native tap
     // through instead of stealing it for the touchstart input.
@@ -301,15 +473,24 @@ export function DrawerVirtualKeyboardProvider(props) {
 
       // Already focused with the keyboard up: let the native tap through so it can
       // reposition the caret, rather than blurring and re-focusing the same input.
-      if (activeElement(ownerDocument(keyboardFocusTarget)) === keyboardFocusTarget && isKeyboardVisualViewportOpen(win)) {
+      if (activeElement(ownerDocument(keyboardFocusTarget)) === keyboardFocusTarget && (!win.visualViewport || getKeyboardVisualViewport(win) != null)) {
         resetTouchTrackingState();
         return;
       }
 
       // iOS only opens the software keyboard when focus happens synchronously
-      // inside the touch gesture.
+      // inside the touch gesture. The flag suppresses the `focusout` cleanup the
+      // intermediate blur would otherwise trigger, so the keyboard inset isn't
+      // dropped for a frame between the blur and the re-focus. It is cleared by the
+      // `focusin` that lands, so only that blur is suppressed; the `finally` is the
+      // backstop for a target that never takes focus.
       event.preventDefault();
-      focusKeyboardInputWithoutPageScroll(keyboardFocusTarget);
+      programmaticKeyboardFocusRef.current = true;
+      try {
+        focusKeyboardInputWithoutPageScroll(keyboardFocusTarget);
+      } finally {
+        programmaticKeyboardFocusRef.current = false;
+      }
       // Preventing the touchend default also suppresses the compatibility mouse
       // events, including `click`; redispatch an untrusted replacement on the
       // original tap target so click handlers still run with the tap coordinates.
@@ -354,13 +535,16 @@ function resolveKeyboardInputTarget(target) {
   return isHTMLElement(control) && isKeyboardInputElement(control) ? control : null;
 }
 function resolveKeyboardTouchTarget(target) {
+  if (!isHTMLElement(target)) {
+    return null;
+  }
   const focusTarget = resolveKeyboardInputTarget(target);
   if (!focusTarget) {
     return null;
   }
   return {
     focusTarget,
-    clickTarget: isHTMLElement(target) ? target : focusTarget
+    clickTarget: target
   };
 }
 
@@ -373,14 +557,16 @@ function getContentEditableHost(element) {
   }
   return host;
 }
-function resolveKeyboardTouchTargetFromPoint(doc, clientX, clientY) {
-  const exactTarget = getElementAtPoint(doc, clientX, clientY);
-  const exactKeyboardTarget = resolveKeyboardInputTarget(exactTarget);
-  if (exactKeyboardTarget) {
-    return {
-      focusTarget: exactKeyboardTarget,
-      clickTarget: isHTMLElement(exactTarget) ? exactTarget : exactKeyboardTarget
-    };
+function resolveKeyboardTouchTargetFromPoint(root, clientX, clientY) {
+  const exactTarget = getElementAtPoint(root, clientX, clientY);
+  if (isHTMLElement(exactTarget)) {
+    const exactKeyboardTarget = resolveKeyboardInputTarget(exactTarget);
+    if (exactKeyboardTarget) {
+      return {
+        focusTarget: exactKeyboardTarget,
+        clickTarget: exactTarget
+      };
+    }
   }
 
   // Probing nearby points compensates for iOS retargeting taps while the page reacts
@@ -393,7 +579,7 @@ function resolveKeyboardTouchTargetFromPoint(doc, clientX, clientY) {
     return KEYBOARD_TAP_BLOCKED;
   }
   for (const [offsetX, offsetY] of [[0, INPUT_TAP_HIT_SLOP], [0, -INPUT_TAP_HIT_SLOP], [INPUT_TAP_HIT_SLOP, 0], [-INPUT_TAP_HIT_SLOP, 0]]) {
-    const keyboardTarget = resolveKeyboardInputTarget(getElementAtPoint(doc, clientX + offsetX, clientY + offsetY));
+    const keyboardTarget = resolveKeyboardInputTarget(getElementAtPoint(root, clientX + offsetX, clientY + offsetY));
     if (keyboardTarget) {
       return {
         focusTarget: keyboardTarget,
@@ -417,15 +603,10 @@ function dispatchKeyboardClick(target, touch) {
 }
 function focusKeyboardInputWithoutPageScroll(target) {
   const wasFocused = activeElement(ownerDocument(target)) === target;
-  const previousOpacity = target.style.opacity;
-  const previousTransform = target.style.transform;
-  const previousTransition = target.style.transition;
-
   // iOS Safari can still scroll the page for transformed sheets even with preventScroll.
-  // Move the input off-screen only for the synchronous focus call.
-  target.style.transition = 'none';
-  target.style.opacity = '0';
-  target.style.transform = 'translateY(-2000px)';
+  // Move the input off-screen only for the synchronous focus call; `preventScroll`
+  // suppresses the in-page ancestor scrolling that would otherwise chase the fake rect.
+  const restoreStyles = overrideGeometryDuringFocus(target, -2000);
   try {
     if (wasFocused) {
       target.blur();
@@ -434,10 +615,25 @@ function focusKeyboardInputWithoutPageScroll(target) {
       preventScroll: true
     });
   } finally {
+    restoreStyles();
+  }
+}
+
+// Overrides the painted geometry WebKit samples when an element gains focus. The rect is
+// hidden (opacity) rather than detached so layout is unaffected; the caller must restore
+// synchronously before the next paint.
+function overrideGeometryDuringFocus(target, translateY) {
+  const previousOpacity = target.style.opacity;
+  const previousTransform = target.style.transform;
+  const previousTransition = target.style.transition;
+  target.style.transition = 'none';
+  target.style.opacity = '0';
+  target.style.transform = `translateY(${translateY}px)`;
+  return () => {
     target.style.opacity = previousOpacity;
     target.style.transform = previousTransform;
     target.style.transition = previousTransition;
-  }
+  };
 }
 function findKeyboardScrollTarget(target, root) {
   // Start at the parent: scrolling the focused field's own content (an overflowing
@@ -464,10 +660,4 @@ function getKeyboardVisualViewport(win) {
     top,
     bottom: Math.min(win.innerHeight, top + visualViewport.height)
   };
-}
-function getDrawerKeyboardInset(win, keyboardViewport) {
-  return Math.max(0, win.innerHeight - keyboardViewport.bottom);
-}
-function isKeyboardVisualViewportOpen(win) {
-  return !win.visualViewport || getKeyboardVisualViewport(win) != null;
 }

package/field/control/FieldControl.js

@@ -115,10 +115,10 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
         const inputValue = event.currentTarget.value;
         onValueChange?.(inputValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent));
         // `validation.change` reads `markedDirtyRef`, so update dirty before validating.
-        setDirty(inputValue !== validityData.initialValue);
+        setDirty(inputValue !== (validityData.initialValue ?? ''));
         setFilled(inputValue !== '');
 
-        // Workaround for https://github.com/facebook/react/issues/9023
+        // Workaround for https://github.com/react/react/issues/9023
         if (!event.nativeEvent.defaultPrevented) {
           clearErrors(name);
           validation.change(inputValue);

package/field/control/FieldControl.mjs

@@ -110,10 +110,10 @@ export const FieldControl = /*#__PURE__*/React.forwardRef(function FieldControl(
         const inputValue = event.currentTarget.value;
         onValueChange?.(inputValue, createChangeEventDetails(REASONS.none, event.nativeEvent));
         // `validation.change` reads `markedDirtyRef`, so update dirty before validating.
-        setDirty(inputValue !== validityData.initialValue);
+        setDirty(inputValue !== (validityData.initialValue ?? ''));
         setFilled(inputValue !== '');
 
-        // Workaround for https://github.com/facebook/react/issues/9023
+        // Workaround for https://github.com/react/react/issues/9023
         if (!event.nativeEvent.defaultPrevented) {
           clearErrors(name);
           validation.change(inputValue);

package/field/error/FieldError.js

@@ -86,13 +86,13 @@ const FieldError = exports.FieldError = /*#__PURE__*/React.forwardRef(function F
   } else if (validityData.errors.length > 1) {
     error = validityData.errors;
   }
-  let errorMessage = error ?? '';
+  let errorMessage = error;
   if (Array.isArray(error)) {
     errorMessage = error.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
       children: error.map(message => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: message
       }, message))
-    }) : error[0] ?? '';
+    }) : error[0];
   }
   const errorKey = Array.isArray(error) ? JSON.stringify(error) : error;
   if (rendered && errorKey !== lastRenderedMessageKey) {

package/field/error/FieldError.mjs

@@ -80,13 +80,13 @@ export const FieldError = /*#__PURE__*/React.forwardRef(function FieldError(comp
   } else if (validityData.errors.length > 1) {
     error = validityData.errors;
   }
-  let errorMessage = error ?? '';
+  let errorMessage = error;
   if (Array.isArray(error)) {
     errorMessage = error.length > 1 ? /*#__PURE__*/_jsx("ul", {
       children: error.map(message => /*#__PURE__*/_jsx("li", {
         children: message
       }, message))
-    }) : error[0] ?? '';
+    }) : error[0];
   }
   const errorKey = Array.isArray(error) ? JSON.stringify(error) : error;
   if (rendered && errorKey !== lastRenderedMessageKey) {

package/field/error/FieldErrorDataAttributes.d.mts

@@ -28,7 +28,7 @@ export declare enum FieldErrorDataAttributes {
    */
   focused = "data-focused",
   /**
-   * Present when the error message is animating in.
+   * Present when the error message begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/field/error/FieldErrorDataAttributes.d.ts

@@ -28,7 +28,7 @@ export declare enum FieldErrorDataAttributes {
    */
   focused = "data-focused",
   /**
-   * Present when the error message is animating in.
+   * Present when the error message begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/field/error/FieldErrorDataAttributes.js

@@ -35,7 +35,7 @@ let FieldErrorDataAttributes = exports.FieldErrorDataAttributes = function (Fiel
    */
   FieldErrorDataAttributes["focused"] = "data-focused";
   /**
-   * Present when the error message is animating in.
+   * Present when the error message begins animating in.
    */
   FieldErrorDataAttributes[FieldErrorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/field/error/FieldErrorDataAttributes.mjs

@@ -29,7 +29,7 @@ export let FieldErrorDataAttributes = function (FieldErrorDataAttributes) {
    */
   FieldErrorDataAttributes["focused"] = "data-focused";
   /**
-   * Present when the error message is animating in.
+   * Present when the error message begins animating in.
    */
   FieldErrorDataAttributes[FieldErrorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/field/item/FieldItem.js

@@ -12,7 +12,6 @@ var _constants = require("../../internals/field-constants/constants");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _FieldItemContext = require("./FieldItemContext");
 var _labelableProvider = require("../../internals/labelable-provider");
-var _CheckboxGroupContext = require("../../checkbox-group/CheckboxGroupContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups individual items in a checkbox group or radio group with a label and description.
@@ -37,9 +36,6 @@ const FieldItem = exports.FieldItem = /*#__PURE__*/React.forwardRef(function Fie
     ...fieldState,
     disabled
   };
-  const checkboxGroupContext = (0, _CheckboxGroupContext.useCheckboxGroupContext)();
-  const hasParentCheckbox = checkboxGroupContext?.allValues !== undefined;
-  const controlId = hasParentCheckbox ? checkboxGroupContext?.parent.id : undefined;
   const fieldItemContext = React.useMemo(() => ({
     disabled
   }), [disabled]);
@@ -50,7 +46,6 @@ const FieldItem = exports.FieldItem = /*#__PURE__*/React.forwardRef(function Fie
     stateAttributesMapping: _constants.fieldValidityMapping
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_labelableProvider.LabelableProvider, {
-    controlId: controlId,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldItemContext.FieldItemContext.Provider, {
       value: fieldItemContext,
       children: element

package/field/item/FieldItem.mjs

@@ -6,7 +6,6 @@ import { fieldValidityMapping } from "../../internals/field-constants/constants.
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { FieldItemContext } from "./FieldItemContext.mjs";
 import { LabelableProvider } from "../../internals/labelable-provider/index.mjs";
-import { useCheckboxGroupContext } from "../../checkbox-group/CheckboxGroupContext.mjs";
 
 /**
  * Groups individual items in a checkbox group or radio group with a label and description.
@@ -32,9 +31,6 @@ export const FieldItem = /*#__PURE__*/React.forwardRef(function FieldItem(compon
     ...fieldState,
     disabled
   };
-  const checkboxGroupContext = useCheckboxGroupContext();
-  const hasParentCheckbox = checkboxGroupContext?.allValues !== undefined;
-  const controlId = hasParentCheckbox ? checkboxGroupContext?.parent.id : undefined;
   const fieldItemContext = React.useMemo(() => ({
     disabled
   }), [disabled]);
@@ -45,7 +41,6 @@ export const FieldItem = /*#__PURE__*/React.forwardRef(function FieldItem(compon
     stateAttributesMapping: fieldValidityMapping
   });
   return /*#__PURE__*/_jsx(LabelableProvider, {
-    controlId: controlId,
     children: /*#__PURE__*/_jsx(FieldItemContext.Provider, {
       value: fieldItemContext,
       children: element