@base-ui/react 1.2.0 → 1.4.0

package/esm/drawer/viewport/DrawerViewport.js

@@ -3,7 +3,9 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { isElement } from '@floating-ui/utils/dom';
+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 { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
 import { DialogViewport } from "../../dialog/viewport/DialogViewport.js";
@@ -16,12 +18,15 @@ import { useSwipeDismiss } from "../../utils/useSwipeDismiss.js";
 import { DrawerPopupCssVars } from "../popup/DrawerPopupCssVars.js";
 import { DrawerPopupDataAttributes } from "../popup/DrawerPopupDataAttributes.js";
 import { DrawerBackdropCssVars } from "../backdrop/DrawerBackdropCssVars.js";
+import { DRAWER_CONTENT_ATTRIBUTE } from "../content/DrawerContentDataAttributes.js";
 import { REASONS } from "../../utils/reasons.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { contains } from "../../floating-ui-react/utils.js";
+import { activeElement, contains, getTarget } from "../../floating-ui-react/utils.js";
 import { DrawerViewportContext } from "./DrawerViewportContext.js";
 import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
 import { findScrollableTouchTarget } from "../../utils/scrollable.js";
+import { BASE_UI_SWIPE_IGNORE_SELECTOR } from "../../utils/constants.js";
+import { getElementAtPoint } from "../../utils/getElementAtPoint.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MIN_SWIPE_THRESHOLD = 10;
 const FAST_SWIPE_VELOCITY = 0.5;
@@ -34,7 +39,7 @@ const MIN_SWIPE_RELEASE_DURATION_MS = 80;
 const MAX_SWIPE_RELEASE_DURATION_MS = 360;
 const MIN_SWIPE_RELEASE_SCALAR = 0.1;
 const MAX_SWIPE_RELEASE_SCALAR = 1;
-
+const DRAWER_CONTENT_SELECTOR = `[${DRAWER_CONTENT_ATTRIBUTE}]`;
 /**
  * A positioning container for the drawer popup that can be made scrollable.
  * Renders a `<div>` element.
@@ -45,6 +50,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   const {
     className,
     render,
+    style,
     children,
     ...elementProps
   } = props;
@@ -63,11 +69,13 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const nested = store.useState('nested');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
   const viewportElement = store.useState('viewportElement');
   const popupElementState = store.useState('popupElement');
-  const nestedDrawerOpen = nestedOpenDialogCount > 0;
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
   const scrollAxis = swipeDirection === 'left' || swipeDirection === 'right' ? 'horizontal' : 'vertical';
+  const isVerticalScrollAxis = scrollAxis === 'vertical';
+  const crossScrollAxis = isVerticalScrollAxis ? 'horizontal' : 'vertical';
   const {
     snapPoints,
     resolvedSnapPoints,
@@ -79,9 +87,11 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   const [swipeRelease, setSwipeRelease] = React.useState(null);
   const pendingSwipeCloseSnapPointRef = React.useRef(undefined);
   const resetSwipeRef = React.useRef(null);
+  const controlledDismissFrame = useAnimationFrame();
   const nestedSwipeActiveRef = React.useRef(false);
   const lastPointerTypeRef = React.useRef('');
   const ignoreNextTouchStartFromPenRef = React.useRef(false);
+  const ignoreTouchSwipeRef = React.useRef(false);
   const touchScrollStateRef = React.useRef(null);
   const snapPointRange = React.useMemo(() => {
     if (!snapPoints || snapPoints.length < 2) {
@@ -133,6 +143,13 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     store.context.popupRef.current?.removeAttribute(TransitionStatusDataAttributes.endingStyle);
     setSwipeRelease(null);
   });
+  const finishNestedSwipe = useStableCallback(() => {
+    if (!nestedSwipeActiveRef.current) {
+      return;
+    }
+    nestedSwipeActiveRef.current = false;
+    notifyParentSwipingChange?.(false);
+  });
   const applySwipeProgress = useStableCallback(({
     resolvedProgress,
     shouldTrackProgress,
@@ -140,9 +157,12 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   }) => {
     const isActive = open && !nested && shouldTrackProgress;
     const swipeProgress = isActive ? resolvedProgress : 0;
+    const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
     if (notifyParent && notifyParentSwipeProgressChange) {
-      const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
       notifyParentSwipeProgressChange(nestedSwipeProgress);
+      if (nestedSwipeProgress <= 0) {
+        finishNestedSwipe();
+      }
     }
     visualStateStore?.set({
       swipeProgress,
@@ -261,9 +281,8 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     },
     onSwipingChange(swiping) {
       setBackdropSwipingAttribute(store.context.backdropRef.current, swiping);
-      if (!swiping) {
-        nestedSwipeActiveRef.current = false;
-        notifyParentSwipingChange?.(false);
+      if (!swiping && !notifyParentSwipeProgressChange) {
+        finishNestedSwipe();
       }
     },
     swipeThreshold({
@@ -272,14 +291,25 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     }) {
       return getBaseSwipeThreshold(element, direction);
     },
-    canStart(position) {
+    canStart(position, details) {
       const popupElement = store.context.popupRef.current;
       if (!popupElement) {
         return false;
       }
       const doc = popupElement.ownerDocument;
-      const elementAtPoint = typeof doc.elementFromPoint === 'function' ? doc.elementFromPoint(position.x, position.y) : null;
-      return !!(elementAtPoint && contains(popupElement, elementAtPoint));
+      const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
+      if (!elementAtPoint || !contains(popupElement, elementAtPoint)) {
+        return false;
+      }
+      const nativeEvent = details.nativeEvent;
+      const touchLike = 'touches' in nativeEvent || 'pointerType' in nativeEvent && nativeEvent.pointerType === 'touch';
+      if (touchLike && shouldIgnoreSwipeForTextSelection(doc, popupElement)) {
+        return false;
+      }
+      if (nativeEvent.type === 'touchstart' && isSwipeIgnoredTarget(elementAtPoint)) {
+        return false;
+      }
+      return true;
     },
     onProgress(progress, details) {
       updateNestedSwipeActive(details);
@@ -334,7 +364,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         if (!popupElement) {
           return;
         }
-        notifyParentSwipingChange?.(false);
+        finishNestedSwipe();
         setSwipeDismissed(true);
         popupElement.style.removeProperty('transition');
         popupElement.setAttribute(TransitionStatusDataAttributes.endingStyle, '');
@@ -508,6 +538,33 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         clearSwipeRelease();
         return;
       }
+
+      // In controlled mode, the effective open state may not have changed yet
+      // (openProp takes precedence over state.open). Proceed optimistically with the
+      // dismiss animation — React's Scheduler flushes before the next rAF, so we can
+      // reliably check whether the parent accepted or rejected the close.
+      // Note: if onOpenChange is asynchronous (e.g., closes the drawer after a network
+      // call), the rAF check will see open === true, revert the animation, and the
+      // drawer will close without animation when the parent eventually sets open={false}.
+      if (store.select('open')) {
+        const savedEvent = event;
+        controlledDismissFrame.request(() => {
+          if (store.select('open')) {
+            // Parent rejected: revert animation and restore snap point.
+            const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
+            if (pendingSnapPoint !== undefined) {
+              setActiveSnapPoint?.(pendingSnapPoint, createChangeEventDetails(REASONS.swipe, savedEvent));
+            }
+            pendingSwipeCloseSnapPointRef.current = undefined;
+            clearSwipeRelease();
+            resetSwipeRef.current?.();
+          } else {
+            // Parent accepted: clean up the ref.
+            pendingSwipeCloseSnapPointRef.current = undefined;
+          }
+        });
+        return;
+      }
       pendingSwipeCloseSnapPointRef.current = undefined;
       setSwipeDismissed(true);
     }
@@ -521,51 +578,39 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     if (!rootElement) {
       return undefined;
     }
-    const doc = ownerDocument(rootElement);
+    const resolvedRootElement = rootElement;
+    const doc = ownerDocument(resolvedRootElement);
     const win = ownerWindow(doc);
     function handleNativeTouchMove(event) {
+      if (ignoreTouchSwipeRef.current) {
+        return;
+      }
       const touchState = touchScrollStateRef.current;
       const touch = event.touches[0];
       if (!touch || !touchState) {
         return;
       }
-      const target = isElement(event.target) ? event.target : null;
-      const updateTouchPosition = () => {
-        touchState.lastX = touch.clientX;
-        touchState.lastY = touch.clientY;
-      };
+      const drawerAxisDelta = isVerticalScrollAxis ? touch.clientY - touchState.lastY : touch.clientX - touchState.lastX;
 
       // Preserve native range interaction by never locking touchmove for range inputs.
       if (isEventOnRangeInput(event, win)) {
         touchState.allowSwipe = false;
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
 
       // Avoid blocking pinch zoom or text selection adjustments on iOS Safari.
       if (event.touches.length === 2) {
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
-      let allowTouchMove = false;
-
-      // Allow the ability to adjust text selection.
-      if (target) {
-        const selection = target.ownerDocument.defaultView?.getSelection();
-        if (selection && !selection.isCollapsed && selection.containsNode(target, true)) {
-          allowTouchMove = true;
-        }
-      }
-
-      // Allow user to drag the selection handles in an input element.
-      if (target instanceof win.HTMLInputElement) {
-        const input = target;
-        if (input.selectionStart != null && input.selectionEnd != null && input.selectionStart < input.selectionEnd && doc.activeElement === input) {
-          allowTouchMove = true;
-        }
-      }
+      const allowTouchMove = shouldIgnoreSwipeForTextSelection(doc, resolvedRootElement);
       if (allowTouchMove || !open || !mounted || nestedDrawerOpen) {
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
+        return;
+      }
+      if (preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis)) {
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
       const scrollTarget = touchState.scrollTarget;
@@ -573,7 +618,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         if (event.cancelable) {
           event.preventDefault();
         }
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
       const hasScrollableContent = hasScrollableContentOnAxis(scrollTarget, scrollAxis);
@@ -583,13 +628,13 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         if (event.cancelable) {
           event.preventDefault();
         }
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
-      const delta = scrollAxis === 'vertical' ? touch.clientY - touchState.lastY : touch.clientX - touchState.lastX;
+      const delta = drawerAxisDelta;
       if (delta !== 0) {
         const canSwipeFromScrollEdge = canSwipeFromScrollEdgeOnMove(scrollTarget, scrollAxis, swipeDirection, delta);
-        if (touchState.allowSwipe !== true) {
+        if (!touchState.allowSwipe) {
           if (!event.cancelable) {
             touchState.allowSwipe = false;
           } else if (canSwipeFromScrollEdge) {
@@ -602,18 +647,13 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
           event.preventDefault();
         }
       }
-      updateTouchPosition();
+      updateTouchScrollPosition(touchState, touch);
     }
-    doc.addEventListener('touchmove', handleNativeTouchMove, {
+    return addEventListener(doc, 'touchmove', handleNativeTouchMove, {
       passive: false,
       capture: true
     });
-    return () => {
-      doc.removeEventListener('touchmove', handleNativeTouchMove, {
-        capture: true
-      });
-    };
-  }, [mounted, nestedDrawerOpen, open, popupElementState, scrollAxis, swipeDirection, viewportElement]);
+  }, [mounted, nestedDrawerOpen, open, popupElementState, isVerticalScrollAxis, scrollAxis, swipeDirection, viewportElement]);
   React.useEffect(() => {
     if (!snapPointRange || swipe.swiping) {
       return;
@@ -649,9 +689,9 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         frontmostHeight: 0
       });
       setBackdropSwipingAttribute(store.context.backdropRef.current, false);
-      notifyParentSwipingChange?.(false);
+      finishNestedSwipe();
     };
-  }, [notifyParentSwipingChange, store, visualStateStore]);
+  }, [finishNestedSwipe, store, visualStateStore]);
   const swipeProviderValue = React.useMemo(() => ({
     swiping: swipe.swiping,
     getDragStyles: swipe.getDragStyles,
@@ -661,6 +701,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     }
   }), [store, swipe.getDragStyles, swipe.swiping, swipeRelease]);
   function resetTouchTrackingState() {
+    ignoreTouchSwipeRef.current = false;
     touchScrollStateRef.current = null;
     lastPointerTypeRef.current = '';
     ignoreNextTouchStartFromPenRef.current = false;
@@ -673,12 +714,15 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
       onPointerDown(event) {
         lastPointerTypeRef.current = event.pointerType;
         ignoreNextTouchStartFromPenRef.current = event.pointerType === 'pen';
-        if (!open || !mounted || nestedDrawerOpen || event.pointerType === 'touch') {
+        if (!open || !mounted || nestedDrawerOpen) {
           return;
         }
         const doc = ownerDocument(event.currentTarget);
-        const elementAtPoint = typeof doc.elementFromPoint === 'function' ? doc.elementFromPoint(event.clientX, event.clientY) : null;
-        if (elementAtPoint?.closest('[data-swipe-ignore]')) {
+        const elementAtPoint = getElementAtPoint(doc, event.clientX, event.clientY);
+        if (isSwipeIgnoredTarget(elementAtPoint) || isDrawerContentTarget(elementAtPoint)) {
+          return;
+        }
+        if (event.pointerType === 'touch') {
           return;
         }
         swipePointerProps.onPointerDown?.(event);
@@ -711,10 +755,12 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         const startedFromPenPointerDown = lastPointerTypeRef.current === 'pen' && ignoreNextTouchStartFromPenRef.current;
         if (startedFromPenPointerDown) {
           ignoreNextTouchStartFromPenRef.current = false;
+          ignoreTouchSwipeRef.current = false;
           touchScrollStateRef.current = null;
           return;
         }
         if (!open || !mounted || nestedDrawerOpen) {
+          ignoreTouchSwipeRef.current = false;
           touchScrollStateRef.current = null;
           return;
         }
@@ -723,31 +769,60 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
           return;
         }
         if (isReactTouchEventOnRangeInput(event)) {
+          ignoreTouchSwipeRef.current = false;
+          touchScrollStateRef.current = null;
+          return;
+        }
+        const doc = ownerDocument(event.currentTarget);
+        const elementAtPoint = getElementAtPoint(doc, touch.clientX, touch.clientY);
+        ignoreTouchSwipeRef.current = isSwipeIgnoredTarget(elementAtPoint);
+        if (ignoreTouchSwipeRef.current) {
           touchScrollStateRef.current = null;
           return;
         }
         const rootElement = viewportElement ?? popupElementState;
-        const target = isElement(event.target) ? event.target : null;
-        const scrollTarget = rootElement && target && contains(rootElement, target) ? findScrollableTouchTarget(target, rootElement, scrollAxis) : null;
+        const eventTarget = getTarget(event.nativeEvent);
+        const target = isElement(eventTarget) ? eventTarget : null;
+        if (rootElement && target && !contains(rootElement, target)) {
+          ignoreTouchSwipeRef.current = true;
+          touchScrollStateRef.current = null;
+          return;
+        }
+        let scrollTarget = null;
+        let hasCrossAxisScrollableContent = false;
+        if (rootElement && target) {
+          scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
+          hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
+        }
         let allowSwipe = null;
         if (scrollTarget) {
           const canSwipeFromEdge = isAtSwipeStartEdge(scrollTarget, scrollAxis, swipeDirection);
           allowSwipe = canSwipeFromEdge ? null : false;
         }
         touchScrollStateRef.current = {
+          startX: touch.clientX,
+          startY: touch.clientY,
           lastX: touch.clientX,
           lastY: touch.clientY,
           scrollTarget,
-          allowSwipe
+          hasCrossAxisScrollableContent,
+          allowSwipe,
+          preserveNativeCrossAxisScroll: false
         };
         swipeTouchProps.onTouchStart?.(event);
       },
       onTouchMove(event) {
+        if (ignoreTouchSwipeRef.current) {
+          return;
+        }
         if (isReactTouchEventOnRangeInput(event)) {
           return;
         }
         const touchState = touchScrollStateRef.current;
-        if (touchState?.scrollTarget && touchState.allowSwipe !== true) {
+        if (touchState?.preserveNativeCrossAxisScroll) {
+          return;
+        }
+        if (touchState?.allowSwipe === false || touchState?.scrollTarget != null && !touchState.allowSwipe) {
           return;
         }
         swipeTouchProps.onTouchMove?.(event);
@@ -759,7 +834,10 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
       onTouchCancel(event) {
         resetTouchTrackingState();
         swipeTouchProps.onTouchCancel?.(event);
-      }
+      },
+      // Drawer popups use drawer-specific nested state attributes.
+      // Suppress DialogViewport's generic nested dialog attribute.
+      ['data-nested-dialog-open']: undefined
     }),
     children: /*#__PURE__*/_jsx(DrawerViewportContext.Provider, {
       value: swipeProviderValue,
@@ -787,6 +865,12 @@ function setBackdropSwipingAttribute(backdropElement, swiping) {
   }
   backdropElement.removeAttribute(DrawerPopupDataAttributes.swiping);
 }
+function isSwipeIgnoredTarget(target) {
+  return Boolean(target?.closest(BASE_UI_SWIPE_IGNORE_SELECTOR));
+}
+function isDrawerContentTarget(target) {
+  return Boolean(target?.closest(DRAWER_CONTENT_SELECTOR));
+}
 function getBaseSwipeThreshold(element, direction) {
   const size = direction === 'left' || direction === 'right' ? element.offsetWidth : element.offsetHeight;
   return Math.max(size * 0.5, MIN_SWIPE_THRESHOLD);
@@ -794,16 +878,66 @@ function getBaseSwipeThreshold(element, direction) {
 function isRangeInput(target, win) {
   return target instanceof win.HTMLInputElement && target.type === 'range';
 }
+function isTextSelectionControl(target) {
+  if (!isElement(target)) {
+    return false;
+  }
+  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
+}
+function hasExpandedSelectionWithinTarget(selection, target) {
+  const anchorElement = isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
+  const focusElement = isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
+  return selection.containsNode(target, true) || contains(target, anchorElement) || contains(target, focusElement);
+}
+function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
+  const activeEl = activeElement(doc);
+  const activeElementWithinRoot = Boolean(activeEl && contains(rootElement, activeEl));
+  if (activeElementWithinRoot && isTextSelectionControl(activeEl)) {
+    const {
+      selectionStart,
+      selectionEnd
+    } = activeEl;
+    if (selectionStart != null && selectionEnd != null && selectionStart < selectionEnd) {
+      return true;
+    }
+  }
+  const selection = doc.getSelection?.();
+  if (!selection || selection.isCollapsed) {
+    return false;
+  }
+  return hasExpandedSelectionWithinTarget(selection, rootElement);
+}
 function isEventOnRangeInput(event, win) {
   const composedPath = event.composedPath();
   if (composedPath) {
     return composedPath.some(pathTarget => isRangeInput(pathTarget, win));
   }
-  return isRangeInput(event.target, win);
+  return isRangeInput(getTarget(event), win);
 }
 function isReactTouchEventOnRangeInput(event) {
   return isEventOnRangeInput(event.nativeEvent, ownerWindow(event.currentTarget));
 }
+function updateTouchScrollPosition(touchState, touch) {
+  touchState.lastX = touch.clientX;
+  touchState.lastY = touch.clientY;
+}
+function preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis) {
+  if (touchState.preserveNativeCrossAxisScroll) {
+    return true;
+  }
+  if (touchState.allowSwipe === true || !touchState.hasCrossAxisScrollableContent) {
+    return false;
+  }
+  const drawerAxisGestureDelta = isVerticalScrollAxis ? touch.clientY - touchState.startY : touch.clientX - touchState.startX;
+  const crossAxisGestureDelta = isVerticalScrollAxis ? touch.clientX - touchState.startX : touch.clientY - touchState.startY;
+  const absDrawerAxisGestureDelta = Math.abs(drawerAxisGestureDelta);
+  const absCrossAxisGestureDelta = Math.abs(crossAxisGestureDelta);
+  if (absCrossAxisGestureDelta < 6 || absCrossAxisGestureDelta <= absDrawerAxisGestureDelta + 2) {
+    return false;
+  }
+  touchState.preserveNativeCrossAxisScroll = true;
+  return true;
+}
 function hasScrollableContentOnAxis(scrollTarget, axis) {
   return axis === 'vertical' ? scrollTarget.scrollHeight > scrollTarget.clientHeight : scrollTarget.scrollWidth > scrollTarget.clientWidth;
 }

package/esm/drawer/viewport/DrawerViewportDataAttributes.d.ts

@@ -0,0 +1,22 @@
+export declare enum DrawerViewportDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the drawer is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the drawer is animating out.
+   */
+  endingStyle = "data-ending-style",
+  /**
+   * Present when the drawer is nested within another drawer.
+   */
+  nested = "data-nested",
+}

package/esm/drawer/viewport/DrawerViewportDataAttributes.js

@@ -0,0 +1,24 @@
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+export let DrawerViewportDataAttributes = function (DrawerViewportDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Present when the drawer is nested within another drawer.
+   */
+  DrawerViewportDataAttributes["nested"] = "data-nested";
+  return DrawerViewportDataAttributes;
+}({});

package/esm/field/control/FieldControl.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import { type FieldRootState } from "../root/FieldRoot.js";
 import { BaseUIComponentProps } from "../../utils/types.js";
 import { REASONS } from "../../utils/reasons.js";
 import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
@@ -14,8 +14,8 @@ import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDeta
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldControl: React.ForwardRefExoticComponent<Omit<FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export type FieldControlState = FieldRoot.State;
-export interface FieldControlProps extends BaseUIComponentProps<'input', FieldControl.State> {
+export interface FieldControlState extends FieldRootState {}
+export interface FieldControlProps extends BaseUIComponentProps<'input', FieldControlState> {
   /**
    * Callback fired when the `value` changes. Use when controlled.
    */

package/esm/field/control/FieldControl.js

@@ -4,12 +4,13 @@ import * as React from 'react';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerDocument } from '@base-ui/utils/owner';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useFieldRootContext } from "../root/FieldRootContext.js";
+import { useRegisterFieldControl } from "../root/useRegisterFieldControl.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 import { fieldValidityMapping } from "../utils/constants.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useField } from "../useField.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { activeElement } from "../../floating-ui-react/utils.js";
@@ -35,6 +36,7 @@ export const FieldControl = /*#__PURE__*/React.forwardRef(function FieldControl(
     onValueChange,
     defaultValue,
     autoFocus = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -83,13 +85,11 @@ export const FieldControl = /*#__PURE__*/React.forwardRef(function FieldControl(
   });
   const isControlled = valueProp !== undefined;
   const value = isControlled ? valueUnwrapped : undefined;
-  useField({
+  const getFieldValue = useStableCallback(() => validation.inputRef.current?.value);
+  useRegisterFieldControl(validation.inputRef, {
     id,
-    name,
-    commit: validation.commit,
     value,
-    getValue: () => validation.inputRef.current?.value,
-    controlRef: validation.inputRef
+    getValue: getFieldValue
   });
   const element = useRenderElement('input', componentProps, {
     ref: [forwardedRef, inputRef],

package/esm/field/description/FieldDescription.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import { type FieldRootState } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * A paragraph with additional information about the field.
@@ -8,8 +8,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldDescription: React.ForwardRefExoticComponent<Omit<FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export type FieldDescriptionState = FieldRoot.State;
-export interface FieldDescriptionProps extends BaseUIComponentProps<'p', FieldDescription.State> {}
+export interface FieldDescriptionState extends FieldRootState {}
+export interface FieldDescriptionProps extends BaseUIComponentProps<'p', FieldDescriptionState> {}
 export declare namespace FieldDescription {
   type State = FieldDescriptionState;
   type Props = FieldDescriptionProps;

package/esm/field/description/FieldDescription.js

@@ -19,6 +19,7 @@ export const FieldDescription = /*#__PURE__*/React.forwardRef(function FieldDesc
     render,
     id: idProp,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const id = useBaseUiId(idProp);

package/esm/field/error/FieldError.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import { type FieldRootState } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
@@ -9,17 +9,20 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldError: React.ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface FieldErrorState extends FieldRoot.State {
+export interface FieldErrorState extends FieldRootState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldError.State> {
+export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldErrorState> {
   /**
-   * Determines whether to show the error message according to the field’s
+   * Determines whether to show the error message according to the field's
    * [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
    * Specifying `true` will always show the error message, and lets external libraries
    * control the visibility.
    */
-  match?: (boolean | keyof ValidityState) | undefined;
+  match?: boolean | keyof ValidityState | undefined;
 }
 export declare namespace FieldError {
   type State = FieldErrorState;