@base-ui/react 1.3.0 → 1.4.1

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/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("../internals/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/useMixedToggleClickHandler.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useMixedToggleClickHandler = useMixedToggleClickHandler;
 var React = _interopRequireWildcard(require("react"));
 var _owner = require("@base-ui/utils/owner");
-var _constants = require("./constants");
+var _empty = require("@base-ui/utils/empty");
 /**
  * Returns `click` and `mousedown` handlers that fix the behavior of triggers of popups that are toggled by different events.
  * For example, a button that opens a popup on mousedown and closes it on click.
@@ -23,7 +23,7 @@ function useMixedToggleClickHandler(params) {
   const ignoreClickRef = React.useRef(false);
   return React.useMemo(() => {
     if (!enabled) {
-      return _constants.EMPTY_OBJECT;
+      return _empty.EMPTY_OBJECT;
     }
     return {
       onMouseDown: event => {

package/utils/useOpenInteractionType.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useEnhancedClickHandler = require("@base-ui/utils/useEnhancedClickHandler");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
-var _useValueChanged = require("./useValueChanged");
+var _useValueChanged = require("../internals/useValueChanged");
 /**
  * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
  *

package/utils/usePopupAutoResize.js

@@ -11,9 +11,8 @@ var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _empty = require("@base-ui/utils/empty");
-var _useAnimationsFinished = require("./useAnimationsFinished");
+var _useAnimationsFinished = require("../internals/useAnimationsFinished");
 var _getCssDimensions = require("./getCssDimensions");
-var _constants = require("./constants");
 const DEFAULT_ENABLED = () => true;
 
 /**
@@ -54,7 +53,7 @@ function usePopupAutoResize(parameters) {
       position: 'absolute',
       [side === 'top' ? 'bottom' : 'top']: '0',
       [isPhysicalLeft ? 'right' : 'left']: '0'
-    } : _constants.EMPTY_OBJECT;
+    } : _empty.EMPTY_OBJECT;
   }, [side, direction]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Reset the state when the popup is closed.

package/utils/usePopupViewport.js

@@ -13,7 +13,8 @@ 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 _useAnimationsFinished = require("./useAnimationsFinished");
+var _owner = require("@base-ui/utils/owner");
+var _useAnimationsFinished = require("../internals/useAnimationsFinished");
 var _usePopupAutoResize = require("./usePopupAutoResize");
 var _directionProvider = require("../direction-provider");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -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 "../internals/useRenderElement.js";
+import type { TransitionStatus } from "../internals/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("../internals/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/useRegisteredLabelId.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useRegisteredLabelId = useRegisteredLabelId;
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useBaseUiId = require("./useBaseUiId");
+var _useBaseUiId = require("../internals/useBaseUiId");
 function useRegisteredLabelId(idProp, setLabelId) {
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {

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

@@ -13,7 +13,7 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
 var _utils = require("../floating-ui-react/utils");
 var _scrollable = require("./scrollable");
-var _clamp = require("./clamp");
+var _clamp = require("../internals/clamp");
 var _getElementAtPoint = require("./getElementAtPoint");
 const DEFAULT_SWIPE_THRESHOLD = 40;
 const REVERSE_CANCEL_THRESHOLD = 10;
@@ -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/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/labelable-provider/index.d.ts

@@ -1 +0,0 @@
-export * from "./LabelableProvider.js";

package/esm/labelable-provider/index.js

@@ -1 +0,0 @@
-export * from "./LabelableProvider.js";

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/labelable-provider/index.d.ts

@@ -1 +0,0 @@
-export * from "./LabelableProvider.js";

package/labelable-provider/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _LabelableProvider = require("./LabelableProvider");
-Object.keys(_LabelableProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _LabelableProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _LabelableProvider[key];
-    }
-  });
-});

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();
-  };
-}