@base-ui/react 1.2.0 → 1.4.0

package/utils/useSwipeDismiss.d.ts

@@ -11,98 +11,98 @@ export declare function getElementTransform(element: HTMLElement): {
   y: number;
   scale: number;
 };
-export declare function useSwipeDismiss(options: useSwipeDismiss.Options): useSwipeDismiss.ReturnValue;
-export declare namespace useSwipeDismiss {
-  interface SwipeDismissDetails {
-    nativeEvent: PointerEvent | TouchEvent;
+export declare function useSwipeDismiss(options: UseSwipeDismissOptions): UseSwipeDismissReturnValue;
+export interface UseSwipeDismissState {}
+export interface UseSwipeDismissDetails {
+  nativeEvent: PointerEvent | TouchEvent;
+  direction: SwipeDirection | undefined;
+}
+export type UseSwipeDismissProgressDetails = SwipeProgressDetailsInternal;
+export interface UseSwipeDismissOptions {
+  enabled: boolean;
+  directions: SwipeDirection[];
+  elementRef: React.RefObject<HTMLElement | null>;
+  movementCssVars: {
+    x: string;
+    y: string;
+  };
+  /**
+   * The minimum distance (in pixels) the pointer must travel from the initial swipe point
+   * before the gesture is considered a dismiss.
+   * @default 40
+   */
+  swipeThreshold?: number | ((details: {
+    element: HTMLElement;
+    direction: SwipeDirection;
+  }) => number) | undefined;
+  /**
+   * If provided, swiping will only begin once this returns true.
+   * The predicate is evaluated on start and on subsequent move events while the pointer is down.
+   */
+  canStart?: ((position: {
+    x: number;
+    y: number;
+  }, details: UseSwipeDismissDetails) => boolean) | undefined;
+  /**
+   * If true, swiping won't start when the gesture begins within a scrollable element.
+   * This helps avoid conflicts between scrolling content and swipe-to-dismiss.
+   * @default false
+   */
+  ignoreScrollableAncestors?: boolean | undefined;
+  /**
+   * If false, touch interactions can start swiping on interactive elements
+   * that are ignored during pointer swipes.
+   * @default true
+   */
+  ignoreSelectorWhenTouch?: boolean | undefined;
+  /**
+   * Whether to update drag offsets in React state on every move.
+   * Disable for event-only usage to avoid re-renders.
+   * @default true
+   */
+  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.
+   */
+  onSwipingChange?: ((swiping: boolean) => void) | undefined;
+  /**
+   * Called when the swipe interaction ends. Returning `true` or `false`
+   * overrides the default dismissal behavior.
+   */
+  onRelease?: ((details: {
+    event: PointerEvent | TouchEvent;
     direction: SwipeDirection | undefined;
-  }
-  type SwipeProgressDetails = SwipeProgressDetailsInternal;
-  interface Options {
-    enabled: boolean;
-    directions: SwipeDirection[];
-    elementRef: React.RefObject<HTMLElement | null>;
-    movementCssVars: {
-      x: string;
-      y: string;
-    };
-    /**
-     * The minimum distance (in pixels) the pointer must travel from the initial swipe point
-     * before the gesture is considered a dismiss.
-     * @default 40
-     */
-    swipeThreshold?: number | ((details: {
-      element: HTMLElement;
-      direction: SwipeDirection;
-    }) => number) | undefined;
-    /**
-     * If provided, swiping will only begin once this returns true.
-     * The predicate is evaluated on start and on subsequent move events while the pointer is down.
-     */
-    canStart?: ((position: {
-      x: number;
-      y: number;
-    }, details: SwipeDismissDetails) => boolean) | undefined;
-    /**
-     * If true, swiping won't start when the gesture begins within a scrollable element.
-     * This helps avoid conflicts between scrolling content and swipe-to-dismiss.
-     * @default false
-     */
-    ignoreScrollableAncestors?: boolean | undefined;
-    /**
-     * If false, touch interactions can start swiping on interactive elements
-     * that are ignored during pointer swipes.
-     * @default true
-     */
-    ignoreSelectorWhenTouch?: boolean | undefined;
-    /**
-     * Whether to update drag offsets in React state on every move.
-     * Disable for event-only usage to avoid re-renders.
-     * @default true
-     */
-    trackDrag?: boolean | undefined;
-    onSwipeStart?: ((event: PointerEvent | TouchEvent) => void) | undefined;
-    onProgress?: ((progress: number, details?: SwipeProgressDetailsInternal) => void) | undefined;
-    /**
-     * Called when the swipe interaction starts or ends.
-     */
-    onSwipingChange?: ((swiping: boolean) => void) | undefined;
-    /**
-     * Called when the swipe interaction ends. Returning `true` or `false`
-     * overrides the default dismissal behavior.
-     */
-    onRelease?: ((details: {
-      event: PointerEvent | TouchEvent;
-      direction: SwipeDirection | undefined;
-      deltaX: number;
-      deltaY: number;
-      velocityX: number;
-      velocityY: number;
-      releaseVelocityX: number;
-      releaseVelocityY: number;
-    }) => boolean | void) | undefined;
-    onDismiss?: ((event: PointerEvent | TouchEvent, details: {
-      direction: SwipeDirection;
-    }) => void) | undefined;
-  }
-  interface ReturnValue {
-    swiping: boolean;
-    swipeDirection: SwipeDirection | undefined;
-    dragDismissed: boolean;
-    getPointerProps: () => {
-      onPointerDown?: ((event: React.PointerEvent) => void) | undefined;
-      onPointerMove?: ((event: React.PointerEvent) => void) | undefined;
-      onPointerUp?: ((event: React.PointerEvent) => void) | undefined;
-      onPointerCancel?: ((event: React.PointerEvent) => void) | undefined;
-    };
-    getTouchProps: () => {
-      onTouchStart?: ((event: React.TouchEvent) => void) | undefined;
-      onTouchMove?: ((event: React.TouchEvent) => void) | undefined;
-      onTouchEnd?: ((event: React.TouchEvent) => void) | undefined;
-      onTouchCancel?: ((event: React.TouchEvent) => void) | undefined;
-    };
-    getDragStyles: () => React.CSSProperties;
-    reset: () => void;
-  }
+    deltaX: number;
+    deltaY: number;
+    velocityX: number;
+    velocityY: number;
+    releaseVelocityX: number;
+    releaseVelocityY: number;
+  }) => boolean | void) | undefined;
+  onDismiss?: ((event: PointerEvent | TouchEvent, details: {
+    direction: SwipeDirection;
+  }) => void) | undefined;
+}
+export interface UseSwipeDismissReturnValue {
+  swiping: boolean;
+  swipeDirection: SwipeDirection | undefined;
+  dragDismissed: boolean;
+  getPointerProps: () => {
+    onPointerDown?: ((event: React.PointerEvent) => void) | undefined;
+    onPointerMove?: ((event: React.PointerEvent) => void) | undefined;
+    onPointerUp?: ((event: React.PointerEvent) => void) | undefined;
+    onPointerCancel?: ((event: React.PointerEvent) => void) | undefined;
+  };
+  getTouchProps: () => {
+    onTouchStart?: ((event: React.TouchEvent) => void) | undefined;
+    onTouchMove?: ((event: React.TouchEvent) => void) | undefined;
+    onTouchEnd?: ((event: React.TouchEvent) => void) | undefined;
+    onTouchCancel?: ((event: React.TouchEvent) => void) | undefined;
+  };
+  getDragStyles: () => React.CSSProperties;
+  reset: () => void;
 }
 export {};

package/utils/useSwipeDismiss.js

@@ -14,6 +14,7 @@ var _owner = require("@base-ui/utils/owner");
 var _utils = require("../floating-ui-react/utils");
 var _scrollable = require("./scrollable");
 var _clamp = require("./clamp");
+var _getElementAtPoint = require("./getElementAtPoint");
 const DEFAULT_SWIPE_THRESHOLD = 40;
 const REVERSE_CANCEL_THRESHOLD = 10;
 const MIN_DRAG_THRESHOLD = 1;
@@ -36,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;
@@ -94,6 +95,7 @@ function useSwipeDismiss(options) {
     swipeThreshold: swipeThresholdProp,
     onDismiss,
     onProgress,
+    onCancel,
     onSwipeStart,
     onRelease,
     onSwipingChange,
@@ -316,7 +318,7 @@ function useSwipeDismiss(options) {
   }
   function getTargetAtPoint(position, nativeEvent) {
     const doc = (0, _owner.ownerDocument)(elementRef.current);
-    const elementAtPoint = typeof doc?.elementFromPoint === 'function' ? doc.elementFromPoint(position.x, position.y) : null;
+    const elementAtPoint = (0, _getElementAtPoint.getElementAtPoint)(doc, position.x, position.y);
     const target = elementAtPoint ?? (0, _utils.getTarget)(nativeEvent);
     return target;
   }
@@ -429,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>;
-}

package/esm/field/useField.js

@@ -1,75 +0,0 @@
-'use client';
-
-import * as ReactDOM from 'react-dom';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { getCombinedFieldValidityData } from "./utils/getCombinedFieldValidityData.js";
-import { useFormContext } from "../form/FormContext.js";
-import { useFieldRootContext } from "./root/FieldRootContext.js";
-export function useField(params) {
-  const {
-    enabled = true,
-    value,
-    id,
-    name,
-    controlRef,
-    commit
-  } = params;
-  const {
-    formRef
-  } = useFormContext();
-  const {
-    invalid,
-    markedDirtyRef,
-    validityData,
-    setValidityData
-  } = useFieldRootContext();
-  const getValue = useStableCallback(params.getValue);
-  useIsoLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    let initialValue = value;
-    if (initialValue === undefined) {
-      initialValue = getValue();
-    }
-    if (validityData.initialValue === null && initialValue !== null) {
-      setValidityData(prev => ({
-        ...prev,
-        initialValue
-      }));
-    }
-  }, [enabled, setValidityData, value, validityData.initialValue, getValue]);
-  useIsoLayoutEffect(() => {
-    if (!enabled || !id) {
-      return;
-    }
-    formRef.current.fields.set(id, {
-      getValue,
-      name,
-      controlRef,
-      validityData: getCombinedFieldValidityData(validityData, invalid),
-      validate(flushSync = true) {
-        let nextValue = value;
-        if (nextValue === undefined) {
-          nextValue = getValue();
-        }
-        markedDirtyRef.current = true;
-        if (!flushSync) {
-          commit(nextValue);
-        } else {
-          // Synchronously update the validity state so the submit event can be prevented.
-          ReactDOM.flushSync(() => commit(nextValue));
-        }
-      }
-    });
-  }, [commit, controlRef, enabled, formRef, getValue, id, invalid, markedDirtyRef, name, validityData, value]);
-  useIsoLayoutEffect(() => {
-    const fields = formRef.current.fields;
-    return () => {
-      if (id) {
-        fields.delete(id);
-      }
-    };
-  }, [formRef, id]);
-}

package/esm/navigation-menu/utils/setFixedSize.d.ts

@@ -1 +0,0 @@
-export declare function setFixedSize(element: HTMLElement, type: 'popup' | 'positioner'): void;

package/esm/navigation-menu/utils/setFixedSize.js

@@ -1,11 +0,0 @@
-import { getCssDimensions } from "../../utils/getCssDimensions.js";
-import { NavigationMenuPopupCssVars } from "../popup/NavigationMenuPopupCssVars.js";
-import { NavigationMenuPositionerCssVars } from "../positioner/NavigationMenuPositionerCssVars.js";
-export function setFixedSize(element, type) {
-  const {
-    width,
-    height
-  } = getCssDimensions(element);
-  element.style.setProperty(type === 'popup' ? NavigationMenuPopupCssVars.popupWidth : NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
-  element.style.setProperty(type === 'popup' ? NavigationMenuPopupCssVars.popupHeight : NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
-}

package/esm/scroll-area/utils/onVisible.d.ts

@@ -1,4 +0,0 @@
-/**
- * Executes a callback when an element becomes visible.
- */
-export declare function onVisible(element: HTMLElement, callback: () => void): () => void;

package/esm/scroll-area/utils/onVisible.js

@@ -1,20 +0,0 @@
-/**
- * Executes a callback when an element becomes visible.
- */
-export function onVisible(element, callback) {
-  if (typeof IntersectionObserver === 'undefined') {
-    return () => {};
-  }
-  const observer = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      if (entry.intersectionRatio > 0) {
-        callback();
-        observer.disconnect();
-      }
-    });
-  });
-  observer.observe(element);
-  return () => {
-    observer.disconnect();
-  };
-}

package/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>;
-}

package/field/useField.js

@@ -1,81 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useField = useField;
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _getCombinedFieldValidityData = require("./utils/getCombinedFieldValidityData");
-var _FormContext = require("../form/FormContext");
-var _FieldRootContext = require("./root/FieldRootContext");
-function useField(params) {
-  const {
-    enabled = true,
-    value,
-    id,
-    name,
-    controlRef,
-    commit
-  } = params;
-  const {
-    formRef
-  } = (0, _FormContext.useFormContext)();
-  const {
-    invalid,
-    markedDirtyRef,
-    validityData,
-    setValidityData
-  } = (0, _FieldRootContext.useFieldRootContext)();
-  const getValue = (0, _useStableCallback.useStableCallback)(params.getValue);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!enabled) {
-      return;
-    }
-    let initialValue = value;
-    if (initialValue === undefined) {
-      initialValue = getValue();
-    }
-    if (validityData.initialValue === null && initialValue !== null) {
-      setValidityData(prev => ({
-        ...prev,
-        initialValue
-      }));
-    }
-  }, [enabled, setValidityData, value, validityData.initialValue, getValue]);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!enabled || !id) {
-      return;
-    }
-    formRef.current.fields.set(id, {
-      getValue,
-      name,
-      controlRef,
-      validityData: (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
-      validate(flushSync = true) {
-        let nextValue = value;
-        if (nextValue === undefined) {
-          nextValue = getValue();
-        }
-        markedDirtyRef.current = true;
-        if (!flushSync) {
-          commit(nextValue);
-        } else {
-          // Synchronously update the validity state so the submit event can be prevented.
-          ReactDOM.flushSync(() => commit(nextValue));
-        }
-      }
-    });
-  }, [commit, controlRef, enabled, formRef, getValue, id, invalid, markedDirtyRef, name, validityData, value]);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    const fields = formRef.current.fields;
-    return () => {
-      if (id) {
-        fields.delete(id);
-      }
-    };
-  }, [formRef, id]);
-}

package/navigation-menu/utils/setFixedSize.d.ts

@@ -1 +0,0 @@
-export declare function setFixedSize(element: HTMLElement, type: 'popup' | 'positioner'): void;

package/navigation-menu/utils/setFixedSize.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.setFixedSize = setFixedSize;
-var _getCssDimensions = require("../../utils/getCssDimensions");
-var _NavigationMenuPopupCssVars = require("../popup/NavigationMenuPopupCssVars");
-var _NavigationMenuPositionerCssVars = require("../positioner/NavigationMenuPositionerCssVars");
-function setFixedSize(element, type) {
-  const {
-    width,
-    height
-  } = (0, _getCssDimensions.getCssDimensions)(element);
-  element.style.setProperty(type === 'popup' ? _NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth : _NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
-  element.style.setProperty(type === 'popup' ? _NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight : _NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
-}

package/scroll-area/utils/onVisible.d.ts

@@ -1,4 +0,0 @@
-/**
- * Executes a callback when an element becomes visible.
- */
-export declare function onVisible(element: HTMLElement, callback: () => void): () => void;

package/scroll-area/utils/onVisible.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.onVisible = onVisible;
-/**
- * Executes a callback when an element becomes visible.
- */
-function onVisible(element, callback) {
-  if (typeof IntersectionObserver === 'undefined') {
-    return () => {};
-  }
-  const observer = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      if (entry.intersectionRatio > 0) {
-        callback();
-        observer.disconnect();
-      }
-    });
-  });
-  observer.observe(element);
-  return () => {
-    observer.disconnect();
-  };
-}