@base-ui/react 1.2.0 → 1.4.0

package/drawer/index.parts.d.ts

@@ -8,6 +8,7 @@ export { DrawerPopup as Popup } from "./popup/DrawerPopup.js";
 export { DrawerPortal as Portal } from "./portal/DrawerPortal.js";
 export { DrawerProvider as Provider } from "./provider/DrawerProvider.js";
 export { DrawerRoot as Root } from "./root/DrawerRoot.js";
+export { DrawerSwipeArea as SwipeArea } from "./swipe-area/DrawerSwipeArea.js";
 export { DrawerTitle as Title } from "./title/DrawerTitle.js";
 export { DrawerTrigger as Trigger } from "./trigger/DrawerTrigger.js";
 export { DrawerViewport as Viewport } from "./viewport/DrawerViewport.js";

package/drawer/index.parts.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "Root", {
     return _DrawerRoot.DrawerRoot;
   }
 });
+Object.defineProperty(exports, "SwipeArea", {
+  enumerable: true,
+  get: function () {
+    return _DrawerSwipeArea.DrawerSwipeArea;
+  }
+});
 Object.defineProperty(exports, "Title", {
   enumerable: true,
   get: function () {
@@ -103,6 +109,7 @@ var _DrawerPopup = require("./popup/DrawerPopup");
 var _DrawerPortal = require("./portal/DrawerPortal");
 var _DrawerProvider = require("./provider/DrawerProvider");
 var _DrawerRoot = require("./root/DrawerRoot");
+var _DrawerSwipeArea = require("./swipe-area/DrawerSwipeArea");
 var _DrawerTitle = require("./title/DrawerTitle");
 var _DrawerTrigger = require("./trigger/DrawerTrigger");
 var _DrawerViewport = require("./viewport/DrawerViewport");

package/drawer/popup/DrawerPopup.d.ts

@@ -10,7 +10,7 @@ import { type DrawerSwipeDirection } from "../root/DrawerRootContext.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerPopup: React.ForwardRefExoticComponent<Omit<DrawerPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopup.State> {
+export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopupState> {
   /**
    * Determines the element to focus when the drawer is opened.
    *
@@ -20,7 +20,7 @@ export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopu
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
+  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
   /**
    * Determines the element to focus when the drawer is closed.
    *
@@ -30,13 +30,16 @@ export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopu
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
+  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
 }
 export interface DrawerPopupState {
   /**
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the active snap point is the full-height expanded state.

package/drawer/popup/DrawerPopup.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DrawerPopup = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _error = require("@base-ui/utils/error");
+var _safeReact = require("@base-ui/utils/safeReact");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _floatingUiReact = require("../../floating-ui-react");
@@ -25,6 +27,63 @@ var _useDrawerSnapPoints = require("../root/useDrawerSnapPoints");
 var _DrawerViewportContext = require("../viewport/DrawerViewportContext");
 var _constants = require("../../utils/constants");
 var _jsxRuntime = require("react/jsx-runtime");
+// Module-level flag to ensure we only register the CSS properties once,
+// regardless of how many Drawer components are mounted.
+let drawerSwipeVarsRegistered = false;
+
+/**
+ * Removes inheritance of high-frequency drawer swipe CSS variables, which
+ * reduces style recalculation cost in complex drawers with deep subtrees.
+ * Child elements that need these values can still opt-in by using `inherit`.
+ * See https://motion.dev/blog/web-animation-performance-tier-list
+ * under the "Improving CSS variable performance" section.
+ */
+function removeCSSVariableInheritance() {
+  if (drawerSwipeVarsRegistered) {
+    return;
+  }
+
+  // Intentionally keep inheritance disabled on WebKit as well. Safari doesn't support
+  // opting descendants back in via `--var: inherit` for custom properties registered
+  // with `inherits: false`, but Drawer does not rely on descendant access to these vars
+  // (unlike ScrollArea), so we keep the performance optimization enabled.
+  if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
+    [_DrawerPopupCssVars.DrawerPopupCssVars.swipeMovementX, _DrawerPopupCssVars.DrawerPopupCssVars.swipeMovementY, _DrawerPopupCssVars.DrawerPopupCssVars.snapPointOffset].forEach(name => {
+      try {
+        CSS.registerProperty({
+          name,
+          syntax: '<length>',
+          inherits: false,
+          initialValue: '0px'
+        });
+      } catch {
+        /* ignore already-registered */
+      }
+    });
+    [{
+      name: _DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress,
+      initialValue: '0'
+    }, {
+      name: _DrawerPopupCssVars.DrawerPopupCssVars.swipeStrength,
+      initialValue: '1'
+    }].forEach(({
+      name,
+      initialValue
+    }) => {
+      try {
+        CSS.registerProperty({
+          name,
+          syntax: '<number>',
+          inherits: false,
+          initialValue
+        });
+      } catch {
+        /* ignore already-registered */
+      }
+    });
+  }
+  drawerSwipeVarsRegistered = true;
+}
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._stateAttributesMapping.transitionStatusMapping,
@@ -67,6 +126,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
     finalFocus,
     initialFocus,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -89,13 +149,13 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
   const modal = store.useState('modal');
   const mounted = store.useState('mounted');
   const nested = store.useState('nested');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
   const transitionStatus = store.useState('transitionStatus');
   const open = store.useState('open');
   const openMethod = store.useState('openMethod');
   const titleElementId = store.useState('titleElementId');
   const role = store.useState('role');
-  const nestedDrawerOpen = nestedOpenDialogCount > 0;
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
   const swipe = (0, _DrawerViewportContext.useDrawerViewportContext)(true);
   const swiping = swipe?.swiping ?? false;
   const swipeStrength = swipe?.swipeStrength ?? null;
@@ -107,6 +167,17 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
   (0, _DialogPortalContext.useDialogPortalContext)();
   const [popupHeight, setPopupHeight] = React.useState(0);
   const popupHeightRef = React.useRef(0);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (swipe) {
+        return;
+      }
+      const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
+      const message = '<Drawer.Popup> expected to be rendered within <Drawer.Viewport>. Omitting the ' + 'viewport disables drawer swipe handling and touch scroll locking. Wrap ' + '<Drawer.Popup> in <Drawer.Viewport>.';
+      (0, _error.error)(`${message}${ownerStackMessage}`);
+    }, [swipe]);
+  }
   const measureHeight = (0, _useStableCallback.useStableCallback)(() => {
     const popupElement = store.context.popupRef.current;
     if (!popupElement) {
@@ -125,8 +196,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
       onPopupHeightChange(oldHeight);
       return;
     }
-    const scrollHeight = popupElement.scrollHeight;
-    const nextHeight = scrollHeight > 0 ? Math.min(offsetHeight, scrollHeight) : offsetHeight;
+    const nextHeight = offsetHeight;
     if (nextHeight === popupHeightRef.current) {
       return;
     }
@@ -145,6 +215,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
     if (!popupElement) {
       return undefined;
     }
+    removeCSSVariableInheritance();
     measureHeight();
     if (typeof ResizeObserver !== 'function') {
       return undefined;
@@ -266,7 +337,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
       style: {
         ...dragStyles,
         [_DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress]: '0',
-        [_DrawerPopupCssVars.DrawerPopupCssVars.nestedDrawers]: nestedOpenDialogCount,
+        [_DrawerPopupCssVars.DrawerPopupCssVars.nestedDrawers]: nestedOpenDrawerCount,
         [_DrawerPopupCssVars.DrawerPopupCssVars.height]: popupHeightCssVarValue,
         [_DrawerPopupCssVars.DrawerPopupCssVars.snapPointOffset]: typeof snapPointOffsetValue === 'number' ? `${snapPointOffsetValue}px` : '0px',
         [_DrawerPopupCssVars.DrawerPopupCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined,

package/drawer/popup/DrawerPopupDataAttributes.d.ts

@@ -1,4 +1,20 @@
 export declare enum DrawerPopupDataAttributes {
+  /**
+   * 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 at the expanded (full-height) snap point.
    */

package/drawer/popup/DrawerPopupDataAttributes.js

@@ -4,7 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DrawerPopupDataAttributes = void 0;
-let DrawerPopupDataAttributes = exports.DrawerPopupDataAttributes = /*#__PURE__*/function (DrawerPopupDataAttributes) {
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let DrawerPopupDataAttributes = exports.DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = _popupStateMapping.CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = _popupStateMapping.CommonPopupDataAttributes.endingStyle] = "endingStyle";
   /**
    * Present when the drawer is at the expanded (full-height) snap point.
    */

package/drawer/portal/DrawerPortal.d.ts

@@ -9,7 +9,7 @@ import type { FloatingPortal } from "../../floating-ui-react/index.js";
  */
 export declare const DrawerPortal: DrawerPortal;
 export interface DrawerPortalState {}
-export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortal.State> {
+export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -18,7 +18,7 @@ export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortal.Sta
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<DrawerPortal.State>['container'] | undefined;
+  container?: FloatingPortal.Props<DrawerPortalState>['container'] | undefined;
 }
 export interface DrawerPortal {
   (componentProps: DrawerPortalProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element | null;

package/drawer/provider/DrawerProvider.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 /**
- * Provides a shared context for coordinating global Drawer UI,
- * such as indent/background effects based on whether any Drawer is open.
+ * Provides a shared context for coordinating global Drawer UI, such as indent/background effects based on whether any Drawer is open.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */

package/drawer/provider/DrawerProvider.js

@@ -11,8 +11,8 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _DrawerProviderContext = require("./DrawerProviderContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
- * Provides a shared context for coordinating global Drawer UI,
- * such as indent/background effects based on whether any Drawer is open.
+ * Provides a shared context for coordinating global Drawer UI, such as indent/background effects based on whether any Drawer is open.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */

package/drawer/root/DrawerRoot.d.ts

@@ -11,6 +11,7 @@ import type { PayloadChildRenderFunction } from "../../utils/popups/index.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare function DrawerRoot<Payload = unknown>(props: DrawerRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export interface DrawerRootState {}
 export interface DrawerRootProps<Payload = unknown> {
   /**
    * Whether the drawer is currently open.
@@ -30,7 +31,7 @@ export interface DrawerRootProps<Payload = unknown> {
    * - `'trap-focus'`: focus is trapped inside the drawer, but document page scroll is not locked and pointer interactions outside of it remain enabled.
    * @default true
    */
-  modal?: (boolean | 'trap-focus') | undefined;
+  modal?: boolean | 'trap-focus' | undefined;
   /**
    * Event handler called when the drawer is opened or closed.
    */
@@ -61,14 +62,14 @@ export interface DrawerRootProps<Payload = unknown> {
   /**
    * ID of the trigger that the drawer is associated with.
    * This is useful in conjunction with the `open` prop to create a controlled drawer.
-   * There's no need to specify this prop when the drawer is uncontrolled (i.e. when the `open` prop is not set).
+   * There's no need to specify this prop when the drawer is uncontrolled (that is, when the `open` prop is not set).
    */
-  triggerId?: (string | null) | undefined;
+  triggerId?: string | null | undefined;
   /**
    * ID of the trigger that the drawer is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open drawer.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
   /**
    * The content of the drawer.
    */
@@ -114,6 +115,7 @@ export type DrawerRootChangeEventDetails = BaseUIChangeEventDetails<DrawerRoot.C
 export type DrawerRootSnapPointChangeEventReason = DrawerRootChangeEventReason;
 export type DrawerRootSnapPointChangeEventDetails = BaseUIChangeEventDetails<DrawerRootSnapPointChangeEventReason>;
 export declare namespace DrawerRoot {
+  type State = DrawerRootState;
   type Props<Payload = unknown> = DrawerRootProps<Payload>;
   type Actions = DrawerRootActions;
   type ChangeEventReason = DrawerRootChangeEventReason;

package/drawer/root/DrawerRoot.js

@@ -7,12 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DrawerRoot = DrawerRoot;
 var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
+var _useId = require("@base-ui/utils/useId");
 var _DrawerRootContext = require("./DrawerRootContext");
 var _dialog = require("../../dialog");
+var _DialogRoot = require("../../dialog/root/DialogRoot");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
@@ -150,18 +153,21 @@ function DrawerRoot(props) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerRootContext.DrawerRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.Dialog.Root, {
-      open: openProp,
-      defaultOpen: defaultOpen,
-      onOpenChange: handleOpenChange,
-      onOpenChangeComplete: onOpenChangeComplete,
-      disablePointerDismissal: disablePointerDismissal,
-      modal: modal,
-      actionsRef: actionsRef,
-      handle: handle,
-      triggerId: triggerIdProp,
-      defaultTriggerId: defaultTriggerIdProp,
-      children: resolvedChildren
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRoot.IsDrawerContext.Provider, {
+      value: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.Dialog.Root, {
+        open: openProp,
+        defaultOpen: defaultOpen,
+        onOpenChange: handleOpenChange,
+        onOpenChangeComplete: onOpenChangeComplete,
+        disablePointerDismissal: disablePointerDismissal,
+        modal: modal,
+        actionsRef: actionsRef,
+        handle: handle,
+        triggerId: triggerIdProp,
+        defaultTriggerId: defaultTriggerIdProp,
+        children: resolvedChildren
+      })
     })
   });
 }
@@ -189,7 +195,7 @@ function createNestedSwipeProgressStore() {
   };
 }
 function DrawerProviderReporter() {
-  const drawerId = React.useId();
+  const drawerId = (0, _useId.useId)();
   const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);
   const dialogRootContext = (0, _DialogRootContext.useDialogRootContext)(false);
   const open = dialogRootContext.store.useState('open');
@@ -197,7 +203,7 @@ function DrawerProviderReporter() {
   const popupElement = dialogRootContext.store.useState('popupElement');
   const isTopmost = nestedOpenDialogCount === 0;
   React.useEffect(() => {
-    if (!providerContext) {
+    if (!providerContext || drawerId == null) {
       return undefined;
     }
     return () => {
@@ -205,6 +211,9 @@ function DrawerProviderReporter() {
     };
   }, [drawerId, providerContext]);
   React.useEffect(() => {
+    if (drawerId == null) {
+      return;
+    }
     providerContext?.setDrawerOpen(drawerId, open);
   }, [drawerId, open, providerContext]);
   React.useEffect(() => {
@@ -225,9 +234,9 @@ function DrawerProviderReporter() {
       dialogRootContext.store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.closeWatcher, event));
     }
     const closeWatcher = new CloseWatcherCtor();
-    closeWatcher.addEventListener('close', handleCloseWatcher);
+    const unsubscribe = (0, _addEventListener.addEventListener)(closeWatcher, 'close', handleCloseWatcher);
     return () => {
-      closeWatcher.removeEventListener('close', handleCloseWatcher);
+      unsubscribe();
       closeWatcher.destroy();
     };
   }, [dialogRootContext.store, isTopmost, open, popupElement]);

package/drawer/root/DrawerRootContext.d.ts

@@ -38,6 +38,10 @@ export interface DrawerRootContext {
    * transitioning out).
    */
   hasNestedDrawer: boolean;
+  /**
+   * Called by the drawer popup to report its own measured height.
+   */
+  onPopupHeightChange: (height: number) => void;
   /**
    * Whether a nested drawer is currently being swiped.
    */
@@ -50,10 +54,6 @@ export interface DrawerRootContext {
    * Called by a nested drawer to report whether it is still present (open or transitioning out).
    */
   onNestedDrawerPresenceChange: (present: boolean) => void;
-  /**
-   * Called by the drawer popup to report its own measured height.
-   */
-  onPopupHeightChange: (height: number) => void;
   /**
    * Called by a nested drawer to report the frontmost height of its own stack.
    */

package/drawer/swipe-area/DrawerSwipeArea.d.ts

@@ -9,7 +9,7 @@ import { type DrawerSwipeDirection } from "../root/DrawerRootContext.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerSwipeArea: React.ForwardRefExoticComponent<Omit<DrawerSwipeAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerSwipeAreaProps extends BaseUIComponentProps<'div', DrawerSwipeArea.State> {
+export interface DrawerSwipeAreaProps extends BaseUIComponentProps<'div', DrawerSwipeAreaState> {
   /**
    * Whether the swipe area is disabled.
    * @default false

package/drawer/swipe-area/DrawerSwipeArea.js

@@ -21,35 +21,37 @@ var _DrawerRootContext = require("../root/DrawerRootContext");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _popups = require("../../utils/popups");
 var _DrawerProviderContext = require("../provider/DrawerProviderContext");
-var _popupStateMapping = require("../../utils/popupStateMapping");
+var _DrawerSwipeAreaDataAttributes = require("./DrawerSwipeAreaDataAttributes");
 const DEFAULT_SWIPE_OPEN_RATIO = 0.5;
 const MIN_SWIPE_START_DISTANCE = 1;
 const VELOCITY_THRESHOLD = 0.1;
 const FALLBACK_SWIPE_OPEN_THRESHOLD = 40;
 const SWIPE_AREA_OPEN_HOOK = {
-  [_popupStateMapping.CommonPopupDataAttributes.open]: ''
+  [_DrawerSwipeAreaDataAttributes.DrawerSwipeAreaDataAttributes.open]: ''
 };
 const SWIPE_AREA_CLOSED_HOOK = {
-  [_popupStateMapping.CommonPopupDataAttributes.closed]: ''
+  [_DrawerSwipeAreaDataAttributes.DrawerSwipeAreaDataAttributes.closed]: ''
+};
+const SWIPE_AREA_SWIPING_HOOK = {
+  [_DrawerSwipeAreaDataAttributes.DrawerSwipeAreaDataAttributes.swiping]: ''
+};
+const SWIPE_AREA_DISABLED_HOOK = {
+  [_DrawerSwipeAreaDataAttributes.DrawerSwipeAreaDataAttributes.disabled]: ''
 };
 const stateAttributesMapping = {
   open(value) {
     return value ? SWIPE_AREA_OPEN_HOOK : SWIPE_AREA_CLOSED_HOOK;
   },
   swiping(value) {
-    return value ? {
-      'data-swiping': ''
-    } : null;
+    return value ? SWIPE_AREA_SWIPING_HOOK : null;
   },
   swipeDirection(value) {
     return value ? {
-      'data-swipe-direction': value
+      [_DrawerSwipeAreaDataAttributes.DrawerSwipeAreaDataAttributes.swipeDirection]: value
     } : null;
   },
   disabled(value) {
-    return value ? {
-      'data-disabled': ''
-    } : null;
+    return value ? SWIPE_AREA_DISABLED_HOOK : null;
   }
 };
 const oppositeSwipeDirection = {
@@ -74,6 +76,7 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
     render,
     disabled = false,
     swipeDirection: swipeDirectionProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -245,6 +248,18 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
     }
     store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.swipe, event, swipeAreaRef.current ?? undefined));
   }
+  function resetSwipeInteractionState() {
+    swipeStartEventRef.current = null;
+    openedBySwipeRef.current = false;
+    closedOffsetRef.current = null;
+    setSwipeActive(false);
+  }
+  function finishSwipeInteraction() {
+    resetSwipeInteractionState();
+    enableDismissAfterRelease();
+    resetDragDelta();
+    clearSwipeStyles();
+  }
   const swipe = (0, _useSwipeDismiss.useSwipeDismiss)({
     enabled,
     directions: [resolvedSwipeDirection],
@@ -303,15 +318,10 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
       } else if (openedBySwipeRef.current) {
         closeDrawer(event);
       }
-      swipeStartEventRef.current = null;
-      openedBySwipeRef.current = false;
-      setSwipeActive(false);
-      closedOffsetRef.current = null;
-      enableDismissAfterRelease();
-      resetDragDelta();
-      clearSwipeStyles();
+      finishSwipeInteraction();
       return false;
-    }
+    },
+    onCancel: finishSwipeInteraction
   });
   const swipePointerProps = swipe.getPointerProps();
   const swipeTouchProps = swipe.getTouchProps();
@@ -321,10 +331,7 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
       resetSwipe();
       resetDragDelta();
       clearSwipeStyles();
-      setSwipeActive(false);
-      openedBySwipeRef.current = false;
-      swipeStartEventRef.current = null;
-      closedOffsetRef.current = null;
+      resetSwipeInteractionState();
     }
   }, [clearSwipeStyles, enabled, resetDragDelta, resetSwipe]);
   React.useEffect(() => {

package/drawer/swipe-area/DrawerSwipeAreaDataAttributes.d.ts

@@ -0,0 +1,23 @@
+export declare enum DrawerSwipeAreaDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the swipe area is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Indicates the swipe direction.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  swipeDirection = "data-swipe-direction",
+  /**
+   * Present when the drawer is being swiped.
+   */
+  swiping = "data-swiping",
+}

package/drawer/swipe-area/DrawerSwipeAreaDataAttributes.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerSwipeAreaDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let DrawerSwipeAreaDataAttributes = exports.DrawerSwipeAreaDataAttributes = function (DrawerSwipeAreaDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["open"] = _popupStateMapping.CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the swipe area is disabled.
+   */
+  DrawerSwipeAreaDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Indicates the swipe direction.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  DrawerSwipeAreaDataAttributes["swipeDirection"] = "data-swipe-direction";
+  /**
+   * Present when the drawer is being swiped.
+   */
+  DrawerSwipeAreaDataAttributes["swiping"] = "data-swiping";
+  return DrawerSwipeAreaDataAttributes;
+}({});

package/drawer/title/DrawerTitle.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerTitle: DrawerTitle;
-export interface DrawerTitleProps extends BaseUIComponentProps<'h2', DrawerTitle.State> {}
+export interface DrawerTitleProps extends BaseUIComponentProps<'h2', DrawerTitleState> {}
 export interface DrawerTitleState {}
 export interface DrawerTitle {
   (componentProps: DrawerTitleProps): React.JSX.Element;

package/drawer/trigger/DrawerTrigger.d.ts

@@ -11,7 +11,7 @@ export declare const DrawerTrigger: DrawerTrigger;
 export interface DrawerTrigger {
   <Payload>(componentProps: DrawerTriggerProps<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
 }
-export interface DrawerTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', DrawerTrigger.State> {
+export interface DrawerTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', DrawerTriggerState> {
   /**
    * A handle to associate the trigger with a drawer.
    * Can be created with the Drawer.createHandle() method.