@base-ui/react 1.3.0 → 1.4.0

package/utils/useAnchoredPopupScrollLock.js

@@ -0,0 +1,36 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnchoredPopupScrollLock = useAnchoredPopupScrollLock;
+var React = _interopRequireWildcard(require("react"));
+var _owner = require("@base-ui/utils/owner");
+var _useScrollLock = require("@base-ui/utils/useScrollLock");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+// Touch-opened popups normally avoid scroll locking so users can still swipe outside to dismiss.
+// This hook re-enables scroll lock only when the popup is effectively full-width.
+// Treat popups with up to 20px of total horizontal gutter as full-width so common ~10px side
+// padding still locks scroll, since that leaves too little outside space for a reliable swipe.
+const VIEWPORT_WIDTH_TOLERANCE_PX = 20;
+
+/**
+ * Manages scroll lock for anchored popups. For non-touch opens, scroll lock is applied when
+ * enabled. For touch opens, scroll lock is applied only when the positioner width is effectively
+ * viewport-sized.
+ */
+function useAnchoredPopupScrollLock(enabled, touchOpen, positionerElement, referenceElement) {
+  const [touchOpenShouldLockScroll, setTouchOpenShouldLockScroll] = React.useState(false);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (!enabled || !touchOpen || positionerElement == null) {
+      setTouchOpenShouldLockScroll(false);
+      return;
+    }
+    const viewportWidth = (0, _owner.ownerDocument)(positionerElement).documentElement.clientWidth;
+    const popupWidth = positionerElement.offsetWidth;
+    setTouchOpenShouldLockScroll(viewportWidth > 0 && popupWidth > 0 && popupWidth >= viewportWidth - VIEWPORT_WIDTH_TOLERANCE_PX);
+  }, [enabled, touchOpen, positionerElement]);
+  (0, _useScrollLock.useScrollLock)(enabled && (!touchOpen || touchOpenShouldLockScroll), referenceElement);
+}

package/utils/useAnimationsFinished.js

@@ -29,69 +29,66 @@ function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false
    */
   signal = null) => {
     frame.cancel();
-    function done() {
-      // Synchronously flush the unmounting of the component so that the browser doesn't
-      // paint: https://github.com/mui/base-ui/issues/979
-      ReactDOM.flushSync(fnToExecute);
-    }
     const element = (0, _resolveRef.resolveRef)(elementOrRef);
     if (element == null) {
       return;
     }
     const resolvedElement = element;
+    const done = () => {
+      // Synchronously flush the unmounting of the component so that the browser doesn't
+      // paint: https://github.com/mui/base-ui/issues/979
+      ReactDOM.flushSync(fnToExecute);
+    };
     if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
       fnToExecute();
-    } else {
-      function execWaitForStartingStyleRemoved() {
-        const startingStyleAttribute = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle;
-
-        // If `[data-starting-style]` isn't present, fall back to waiting one more frame
-        // to give "open" animations a chance to be registered.
-        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
-          frame.request(exec);
-          return;
-        }
-
-        // Wait for `[data-starting-style]` to have been removed.
-        const attributeObserver = new MutationObserver(() => {
-          if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
-            attributeObserver.disconnect();
-            exec();
-          }
-        });
-        attributeObserver.observe(resolvedElement, {
-          attributes: true,
-          attributeFilter: [startingStyleAttribute]
-        });
-        signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
-          once: true
-        });
-      }
-      function exec() {
-        Promise.all(resolvedElement.getAnimations().map(anim => anim.finished)).then(() => {
-          if (signal?.aborted) {
-            return;
-          }
+      return;
+    }
+    function exec() {
+      Promise.all(resolvedElement.getAnimations().map(animation => animation.finished)).then(() => {
+        if (!signal?.aborted) {
           done();
-        }).catch(() => {
-          const currentAnimations = resolvedElement.getAnimations();
-          if (treatAbortedAsFinished) {
-            if (signal?.aborted) {
-              return;
-            }
+        }
+      }).catch(() => {
+        if (treatAbortedAsFinished) {
+          if (!signal?.aborted) {
             done();
-          } else if (currentAnimations.length > 0 && currentAnimations.some(anim => anim.pending || anim.playState !== 'finished')) {
-            // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
-            // In such cases, we need to re-check if any new animations have started.
-            exec();
           }
-        });
-      }
-      if (waitForStartingStyleRemoved) {
-        execWaitForStartingStyleRemoved();
+          return;
+        }
+        const currentAnimations = resolvedElement.getAnimations();
+        if (!signal?.aborted && currentAnimations.length > 0 && currentAnimations.some(animation => animation.pending || animation.playState !== 'finished')) {
+          // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
+          // In such cases, we need to re-check if any new animations have started.
+          exec();
+        }
+      });
+    }
+    if (waitForStartingStyleRemoved) {
+      const startingStyleAttribute = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle;
+
+      // If `[data-starting-style]` isn't present, fall back to waiting one more frame
+      // to give "open" animations a chance to be registered.
+      if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+        frame.request(exec);
         return;
       }
-      frame.request(exec);
+
+      // Wait for `[data-starting-style]` to have been removed.
+      const attributeObserver = new MutationObserver(() => {
+        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+          attributeObserver.disconnect();
+          exec();
+        }
+      });
+      attributeObserver.observe(resolvedElement, {
+        attributes: true,
+        attributeFilter: [startingStyleAttribute]
+      });
+      signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
+        once: true
+      });
+      return;
     }
+    frame.request(exec);
   });
 }

package/utils/useIsHydrating.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns `true` while React is hydrating server-rendered markup and `false`
+ * for fresh client-only mounts.
+ */
+export declare function useIsHydrating(): boolean;

package/utils/useIsHydrating.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsHydrating = useIsHydrating;
+var _shim = require("use-sync-external-store/shim");
+var _noop = require("./noop");
+function subscribe() {
+  return _noop.NOOP;
+}
+function getSnapshot() {
+  return false;
+}
+function getServerSnapshot() {
+  return true;
+}
+
+/**
+ * Returns `true` while React is hydrating server-rendered markup and `false`
+ * for fresh client-only mounts.
+ */
+function useIsHydrating() {
+  return (0, _shim.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+}

package/utils/usePopupViewport.js

@@ -13,6 +13,7 @@ var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _usePreviousValue = require("@base-ui/utils/usePreviousValue");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _owner = require("@base-ui/utils/owner");
 var _useAnimationsFinished = require("./useAnimationsFinished");
 var _usePopupAutoResize = require("./usePopupAutoResize");
 var _directionProvider = require("../direction-provider");
@@ -107,7 +108,7 @@ function usePopupViewport(parameters) {
     if (!source) {
       return;
     }
-    const wrapper = document.createElement('div');
+    const wrapper = (0, _owner.ownerDocument)(source).createElement('div');
     for (const child of Array.from(source.childNodes)) {
       wrapper.appendChild(child.cloneNode(true));
     }

package/utils/usePositioner.d.ts

@@ -0,0 +1,23 @@
+import { type UseRenderElementComponentProps } from "./useRenderElement.js";
+import type { TransitionStatus } from "./useTransitionStatus.js";
+interface UsePositionerOptions {
+  styles: React.CSSProperties;
+  transitionStatus: TransitionStatus;
+  props?: React.ComponentProps<'div'> | undefined;
+  refs?: React.Ref<HTMLDivElement> | (React.Ref<HTMLDivElement> | undefined)[] | undefined;
+  hidden?: boolean | undefined;
+  inert?: boolean | undefined;
+}
+/**
+ * Renders the shared outer Positioner element used by popup components.
+ * Applies the common role, hidden state, transition styles, state attributes, and optional inert styling.
+ */
+export declare function usePositioner<State extends Record<string, any>>(componentProps: UseRenderElementComponentProps<State>, state: State, {
+  styles,
+  transitionStatus,
+  props,
+  refs,
+  hidden,
+  inert
+}: UsePositionerOptions): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/utils/usePositioner.js

@@ -0,0 +1,39 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePositioner = usePositioner;
+var _popupStateMapping = require("./popupStateMapping");
+var _useRenderElement = require("./useRenderElement");
+var _getDisabledMountTransitionStyles = require("./getDisabledMountTransitionStyles");
+/**
+ * Renders the shared outer Positioner element used by popup components.
+ * Applies the common role, hidden state, transition styles, state attributes, and optional inert styling.
+ */
+function usePositioner(componentProps, state, {
+  styles,
+  transitionStatus,
+  props,
+  refs,
+  hidden,
+  inert = false
+}) {
+  const style = {
+    ...styles
+  };
+  if (inert) {
+    style.pointerEvents = 'none';
+  }
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    ref: refs,
+    props: [{
+      role: 'presentation',
+      hidden,
+      style
+    }, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), props],
+    stateAttributesMapping: _popupStateMapping.popupStateMapping
+  });
+}

package/utils/usePressAndHold.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+export interface UsePressAndHoldParameters {
+  disabled: boolean;
+  readOnly?: boolean | undefined;
+  /**
+   * Called on each tick during a hold. Return `false` to stop the auto-change sequence.
+   */
+  tick: (triggerEvent?: Event) => boolean;
+  /**
+   * Called when the hold ends via the global `pointerup` event.
+   */
+  onStop?: ((nativeEvent: PointerEvent) => void) | undefined;
+  /**
+   * Interval between ticks once the hold is active.
+   * @default 60
+   */
+  tickDelay?: number | undefined;
+  /**
+   * Delay before the repeating ticks start after the initial hold.
+   * @default 400
+   */
+  startDelay?: number | undefined;
+  /**
+   * Pointer movement distance (px) that cancels the hold and is treated as scrolling.
+   * @default 8
+   */
+  scrollDistance?: number | undefined;
+  /**
+   * Ref to the anchor element used to resolve `ownerWindow`.
+   */
+  elementRef: React.RefObject<HTMLElement | null>;
+}
+export interface UsePressAndHoldReturnValue {
+  pointerHandlers: {
+    onTouchStart: React.TouchEventHandler<HTMLElement>;
+    onTouchEnd: React.TouchEventHandler<HTMLElement>;
+    onPointerDown: React.PointerEventHandler<HTMLElement>;
+    onPointerUp: React.PointerEventHandler<HTMLElement>;
+    onPointerMove: React.PointerEventHandler<HTMLElement>;
+    onMouseEnter: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave: React.MouseEventHandler<HTMLElement>;
+    onMouseUp: React.MouseEventHandler<HTMLElement>;
+  };
+  /**
+   * Returns `true` if the `onClick` handler should be skipped.
+   * Use this in the element's `onClick` to prevent double-firing on mouse clicks
+   * (already handled by `onPointerDown`) and to suppress the synthesized click
+   * that browsers fire after a touch hold.
+   */
+  shouldSkipClick: (event: React.MouseEvent) => boolean;
+}
+/**
+ * Adds press-and-hold behavior to a button element.
+ * On pointer down, performs one action immediately, then after a delay starts
+ * continuous repeated actions at a fixed interval. Handles mouse, touch, and pen
+ * inputs correctly, including Android-specific quirks.
+ */
+export declare function usePressAndHold(params: UsePressAndHoldParameters): UsePressAndHoldReturnValue;

package/utils/usePressAndHold.js

@@ -0,0 +1,198 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePressAndHold = usePressAndHold;
+var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _useTimeout = require("@base-ui/utils/useTimeout");
+var _useInterval = require("@base-ui/utils/useInterval");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _owner = require("@base-ui/utils/owner");
+const DEFAULT_TICK_DELAY = 60;
+const DEFAULT_START_DELAY = 400;
+const DEFAULT_SCROLL_DISTANCE = 8;
+const TOUCH_TIMEOUT = 50;
+const MAX_POINTER_MOVES_AFTER_TOUCH = 3;
+
+// Treat pen as touch-like to avoid forcing the software keyboard on stylus taps.
+// Linux Chrome may emit "pen" historically for mouse usage due to a bug, but the touch path
+// still works with minor behavioral differences.
+function isTouchLikePointerType(pointerType) {
+  return pointerType === 'touch' || pointerType === 'pen';
+}
+/**
+ * Adds press-and-hold behavior to a button element.
+ * On pointer down, performs one action immediately, then after a delay starts
+ * continuous repeated actions at a fixed interval. Handles mouse, touch, and pen
+ * inputs correctly, including Android-specific quirks.
+ */
+function usePressAndHold(params) {
+  const {
+    disabled,
+    readOnly = false,
+    tick,
+    onStop,
+    tickDelay = DEFAULT_TICK_DELAY,
+    startDelay = DEFAULT_START_DELAY,
+    scrollDistance = DEFAULT_SCROLL_DISTANCE,
+    elementRef
+  } = params;
+  const startTickTimeout = (0, _useTimeout.useTimeout)();
+  const tickInterval = (0, _useInterval.useInterval)();
+  const intentionalTouchCheckTimeout = (0, _useTimeout.useTimeout)();
+  const isPressedRef = React.useRef(false);
+  const movesAfterTouchRef = React.useRef(0);
+  const downCoordsRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const isTouchingButtonRef = React.useRef(false);
+  const ignoreClickRef = React.useRef(false);
+  const pointerTypeRef = React.useRef('');
+  const unsubscribeFromGlobalContextMenuRef = React.useRef(() => {});
+  const stopAutoChange = (0, _useStableCallback.useStableCallback)(() => {
+    intentionalTouchCheckTimeout.clear();
+    startTickTimeout.clear();
+    tickInterval.clear();
+    unsubscribeFromGlobalContextMenuRef.current();
+    movesAfterTouchRef.current = 0;
+  });
+  const startAutoChange = (0, _useStableCallback.useStableCallback)(triggerNativeEvent => {
+    stopAutoChange();
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+    const win = (0, _owner.ownerWindow)(element);
+    function handleContextMenu(event) {
+      event.preventDefault();
+    }
+
+    // A global context menu listener is necessary to prevent the context menu from
+    // appearing when the touch is slightly outside of the element's hit area.
+    unsubscribeFromGlobalContextMenuRef.current = (0, _addEventListener.addEventListener)(win, 'contextmenu', handleContextMenu);
+    (0, _addEventListener.addEventListener)(win, 'pointerup', event => {
+      isPressedRef.current = false;
+      stopAutoChange();
+      onStop?.(event);
+    }, {
+      once: true
+    });
+    if (!tick(triggerNativeEvent)) {
+      stopAutoChange();
+      return;
+    }
+    startTickTimeout.start(startDelay, () => {
+      tickInterval.start(tickDelay, () => {
+        if (!tick(triggerNativeEvent)) {
+          stopAutoChange();
+        }
+      });
+    });
+  });
+  React.useEffect(() => () => stopAutoChange(), [stopAutoChange]);
+  const pointerHandlers = {
+    onTouchStart() {
+      isTouchingButtonRef.current = true;
+    },
+    onTouchEnd() {
+      isTouchingButtonRef.current = false;
+    },
+    onPointerDown(event) {
+      const isMainButton = !event.button || event.button === 0;
+      if (event.defaultPrevented || !isMainButton || disabled || readOnly) {
+        return;
+      }
+      pointerTypeRef.current = event.pointerType;
+      ignoreClickRef.current = false;
+      isPressedRef.current = true;
+      downCoordsRef.current = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      const isTouchPointer = isTouchLikePointerType(event.pointerType);
+      if (!isTouchPointer) {
+        event.preventDefault();
+        startAutoChange(event.nativeEvent);
+      } else {
+        // Check if the pointerdown was intentional and not the result of a scroll or
+        // pinch-zoom. In that case, we don't want to start the auto-change sequence.
+        intentionalTouchCheckTimeout.start(TOUCH_TIMEOUT, () => {
+          const moves = movesAfterTouchRef.current;
+          movesAfterTouchRef.current = 0;
+          // Only start auto-change if the touch is still pressed (prevents races
+          // with pointerup occurring before the timeout fires on quick taps).
+          const stillPressed = isPressedRef.current;
+          if (stillPressed && moves < MAX_POINTER_MOVES_AFTER_TOUCH) {
+            startAutoChange(event.nativeEvent);
+            ignoreClickRef.current = true; // synthesized click after hold should be ignored
+          } else {
+            // No auto-change (simple tap or scroll gesture), allow the click handler
+            // to perform a single action.
+            ignoreClickRef.current = false;
+            stopAutoChange();
+          }
+        });
+      }
+    },
+    onPointerUp(event) {
+      // Ensure we mark the press as released for touch flows even if auto-change never
+      // started, so the delayed auto-change check won't start after a quick tap.
+      if (isTouchLikePointerType(event.pointerType)) {
+        isPressedRef.current = false;
+      }
+    },
+    onPointerMove(event) {
+      if (disabled || readOnly || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
+        return;
+      }
+      if (movesAfterTouchRef.current != null) {
+        movesAfterTouchRef.current += 1;
+      }
+      const {
+        x,
+        y
+      } = downCoordsRef.current;
+      const dx = x - event.clientX;
+      const dy = y - event.clientY;
+      if (dx ** 2 + dy ** 2 > scrollDistance ** 2) {
+        stopAutoChange();
+      }
+    },
+    onMouseEnter(event) {
+      if (event.defaultPrevented || disabled || readOnly || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
+        return;
+      }
+      startAutoChange(event.nativeEvent);
+    },
+    onMouseLeave() {
+      if (isTouchingButtonRef.current) {
+        return;
+      }
+      stopAutoChange();
+    },
+    onMouseUp() {
+      if (isTouchingButtonRef.current) {
+        return;
+      }
+      stopAutoChange();
+    }
+  };
+  const shouldSkipClick = (0, _useStableCallback.useStableCallback)(event => {
+    if (event.defaultPrevented) {
+      return true;
+    }
+    if (isTouchLikePointerType(pointerTypeRef.current)) {
+      return ignoreClickRef.current;
+    }
+    return event.detail !== 0;
+  });
+  return {
+    pointerHandlers,
+    shouldSkipClick
+  };
+}

package/utils/useRenderElement.js

@@ -54,7 +54,12 @@ function useRenderElementProps(componentProps, params = {}) {
   const className = enabled ? (0, _resolveClassName.resolveClassName)(classNameProp, state) : undefined;
   const style = enabled ? (0, _resolveStyle.resolveStyle)(styleProp, state) : undefined;
   const stateProps = enabled ? (0, _getStateAttributesProps.getStateAttributesProps)(state, stateAttributesMapping) : _constants.EMPTY_OBJECT;
-  const outProps = enabled ? (0, _mergeObjects.mergeObjects)(stateProps, Array.isArray(props) ? (0, _mergeProps.mergePropsN)(props) : props) ?? _constants.EMPTY_OBJECT : _constants.EMPTY_OBJECT;
+  const resolvedProps = enabled && props ? resolveRenderFunctionProps(props) : undefined;
+
+  // Ensure outProps is always a new mutable object when enabled, never EMPTY_OBJECT.
+  // This prevents potential TypeError when setting ref, className, or style properties,
+  // since EMPTY_OBJECT is frozen and mutations would fail in strict mode.
+  const outProps = enabled ? (0, _mergeObjects.mergeObjects)(stateProps, resolvedProps) ?? {} : _constants.EMPTY_OBJECT;
 
   // SAFETY: The `useMergedRefs` functions use a single hook to store the same value,
   // switching between them at runtime is safe. If this assertion fails, React will
@@ -82,12 +87,20 @@ function useRenderElementProps(componentProps, params = {}) {
   }
   return outProps;
 }
+function resolveRenderFunctionProps(props) {
+  if (Array.isArray(props)) {
+    return (0, _mergeProps.mergePropsN)(props);
+  }
+  return (0, _mergeProps.mergeProps)(undefined, props);
+}
 
 // The symbol React uses internally for lazy components
 // https://github.com/facebook/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/shared/ReactSymbols.js#L31
 //
 // TODO delete once https://github.com/facebook/react/issues/32392 is fixed
 const REACT_LAZY_TYPE = Symbol.for('react.lazy');
+const COMPONENT_IDENTIFIER_PATTERN = /^[A-Z][A-Za-z0-9$]*$/;
+const LOWERCASE_CHARACTER_PATTERN = /[a-z]/;
 function evaluateRenderProp(element, render, props, state) {
   if (render) {
     if (typeof render === 'function') {
@@ -135,8 +148,10 @@ function warnIfRenderPropLooksLikeComponent(renderFn) {
   if (functionName.length === 0) {
     return;
   }
-  const firstCharacterCode = functionName.charCodeAt(0);
-  if (firstCharacterCode < 65 || firstCharacterCode > 90) {
+  if (!COMPONENT_IDENTIFIER_PATTERN.test(functionName)) {
+    return;
+  }
+  if (!LOWERCASE_CHARACTER_PATTERN.test(functionName)) {
     return;
   }
   (0, _warn.warn)(`The \`render\` prop received a function named \`${functionName}\` that starts with an uppercase letter.`, 'This usually means a React component was passed directly as `render={Component}`.', 'Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.', 'If this is an intentional render callback, rename it to start with a lowercase letter.', 'Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.', 'https://base-ui.com/r/invalid-render-prop');

package/utils/useSwipeDismiss.d.ts

@@ -63,6 +63,7 @@ export interface UseSwipeDismissOptions {
   trackDrag?: boolean | undefined;
   onSwipeStart?: ((event: PointerEvent | TouchEvent) => void) | undefined;
   onProgress?: ((progress: number, details?: UseSwipeDismissProgressDetails) => void) | undefined;
+  onCancel?: ((event: PointerEvent | TouchEvent) => void) | undefined;
   /**
    * Called when the swipe interaction starts or ends.
    */

package/utils/useSwipeDismiss.js

@@ -37,7 +37,7 @@ function getDisplacement(direction, deltaX, deltaY) {
   }
 }
 function getElementTransform(element) {
-  const computedStyle = window.getComputedStyle(element);
+  const computedStyle = (0, _owner.ownerWindow)(element).getComputedStyle(element);
   const transform = computedStyle.transform;
   let translateX = 0;
   let translateY = 0;
@@ -95,6 +95,7 @@ function useSwipeDismiss(options) {
     swipeThreshold: swipeThresholdProp,
     onDismiss,
     onProgress,
+    onCancel,
     onSwipeStart,
     onRelease,
     onSwipingChange,
@@ -430,6 +431,7 @@ function useSwipeDismiss(options) {
       deltaY: 0,
       direction: undefined
     });
+    onCancel?.(event.nativeEvent);
   }
   function applyDirectionalDamping(deltaX, deltaY) {
     const exponent = value => value >= 0 ? value ** 0.5 : -(Math.abs(value) ** 0.5);

package/utils/useTransitionStatus.js

@@ -64,10 +64,10 @@ function useTransitionStatus(open, enableIdleState = false, deferEndingState = f
     return () => {
       _useAnimationFrame.AnimationFrame.cancel(frame);
     };
-  }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]);
-  return React.useMemo(() => ({
+  }, [enableIdleState, open, mounted, transitionStatus]);
+  return {
     mounted,
     setMounted,
     transitionStatus
-  }), [mounted, transitionStatus]);
+  };
 }

package/esm/field/useField.d.ts

@@ -1,14 +0,0 @@
-export declare function useField(params: UseFieldParameters): void;
-export interface UseFieldParameters {
-  enabled?: boolean | undefined;
-  value: unknown;
-  getValue?: (() => unknown) | undefined;
-  id: string | undefined;
-  name?: string | undefined;
-  commit: (value: unknown) => void;
-  /**
-   * A ref to a focusable element that receives focus when the field fails
-   * validation during form submission.
-   */
-  controlRef: React.RefObject<any>;
-}