@base-ui/react 1.0.0-rc.2 → 1.1.0

package/utils/usePopupAutoResize.js

@@ -9,6 +9,7 @@ var React = _interopRequireWildcard(require("react"));
 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 _getCssDimensions = require("./getCssDimensions");
 var _constants = require("./constants");
@@ -30,10 +31,12 @@ function usePopupAutoResize(parameters) {
     side,
     direction
   } = parameters;
-  const isInitialRender = React.useRef(true);
   const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(popupElement, true, false);
   const animationFrame = (0, _useAnimationFrame.useAnimationFrame)();
-  const previousDimensionsRef = React.useRef(null);
+  const committedDimensionsRef = React.useRef(null);
+  const liveDimensionsRef = React.useRef(null);
+  const isInitialRenderRef = React.useRef(true);
+  const restoreAnchoringStylesRef = React.useRef(_empty.NOOP);
   const onMeasureLayout = (0, _useStableCallback.useStableCallback)(onMeasureLayoutParam);
   const onMeasureLayoutComplete = (0, _useStableCallback.useStableCallback)(onMeasureLayoutCompleteParam);
   const anchoringStyles = React.useMemo(() => {
@@ -56,80 +59,90 @@ function usePopupAutoResize(parameters) {
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Reset the state when the popup is closed.
     if (!mounted || !enabled() || !supportsResizeObserver) {
-      isInitialRender.current = true;
-      previousDimensionsRef.current = null;
+      restoreAnchoringStylesRef.current = _empty.NOOP;
+      isInitialRenderRef.current = true;
+      committedDimensionsRef.current = null;
+      liveDimensionsRef.current = null;
       return undefined;
     }
     if (!popupElement || !positionerElement) {
       return undefined;
     }
-    Object.entries(anchoringStyles).forEach(([key, value]) => {
-      popupElement.style.setProperty(key, value);
-    });
+    restoreAnchoringStylesRef.current = applyElementStyles(popupElement, anchoringStyles);
     const observer = new ResizeObserver(entries => {
       const entry = entries[0];
       if (entry) {
-        if (previousDimensionsRef.current === null) {
-          previousDimensionsRef.current = {
-            width: Math.ceil(entry.borderBoxSize[0].inlineSize),
-            height: Math.ceil(entry.borderBoxSize[0].blockSize)
-          };
-        } else {
-          previousDimensionsRef.current.width = Math.ceil(entry.borderBoxSize[0].inlineSize);
-          previousDimensionsRef.current.height = Math.ceil(entry.borderBoxSize[0].blockSize);
-        }
+        liveDimensionsRef.current = {
+          width: Math.ceil(entry.borderBoxSize[0].inlineSize),
+          height: Math.ceil(entry.borderBoxSize[0].blockSize)
+        };
       }
     });
     observer.observe(popupElement);
 
     // Measure the rendered size to enable transitions:
-    popupElement.style.setProperty('--popup-width', 'auto');
-    popupElement.style.setProperty('--popup-height', 'auto');
+    setPopupCssSize(popupElement, 'auto');
     const restorePopupPosition = overrideElementStyle(popupElement, 'position', 'static');
     const restorePopupTransform = overrideElementStyle(popupElement, 'transform', 'none');
     const restorePopupScale = overrideElementStyle(popupElement, 'scale', '1');
-    const restoreAvailableWidth = overrideElementStyle(positionerElement, '--available-width', 'max-content');
-    const restoreAvailableHeight = overrideElementStyle(positionerElement, '--available-height', 'max-content');
+    const restorePositionerAvailableSize = applyElementStyles(positionerElement, {
+      '--available-width': 'max-content',
+      '--available-height': 'max-content'
+    });
+    function restoreMeasurementOverrides() {
+      restorePopupPosition();
+      restorePopupTransform();
+      restorePositionerAvailableSize();
+    }
+    function restoreMeasurementOverridesIncludingScale() {
+      restoreMeasurementOverrides();
+      restorePopupScale();
+    }
     onMeasureLayout?.();
 
     // Initial render (for each time the popup opens).
-    if (isInitialRender.current || previousDimensionsRef.current === null) {
-      positionerElement.style.setProperty('--positioner-width', 'max-content');
-      positionerElement.style.setProperty('--positioner-height', 'max-content');
+    if (isInitialRenderRef.current || committedDimensionsRef.current === null) {
+      setPositionerCssSize(positionerElement, 'max-content');
       const dimensions = (0, _getCssDimensions.getCssDimensions)(popupElement);
-      positionerElement.style.setProperty('--positioner-width', `${dimensions.width}px`);
-      positionerElement.style.setProperty('--positioner-height', `${dimensions.height}px`);
-      restorePopupPosition();
-      restorePopupTransform();
-      restorePopupScale();
-      restoreAvailableWidth();
-      restoreAvailableHeight();
+      committedDimensionsRef.current = dimensions;
+      setPositionerCssSize(positionerElement, dimensions);
+      restoreMeasurementOverridesIncludingScale();
       onMeasureLayoutComplete?.(null, dimensions);
-      isInitialRender.current = false;
+      isInitialRenderRef.current = false;
       return () => {
         observer.disconnect();
+        restoreAnchoringStylesRef.current();
+        restoreAnchoringStylesRef.current = _empty.NOOP;
       };
     }
 
     // Subsequent renders while open (when `content` changes).
-    popupElement.style.setProperty('--popup-width', 'auto');
-    popupElement.style.setProperty('--popup-height', 'auto');
-    positionerElement.style.setProperty('--positioner-width', 'max-content');
-    positionerElement.style.setProperty('--positioner-height', 'max-content');
+    setPopupCssSize(popupElement, 'auto');
+    setPositionerCssSize(positionerElement, 'max-content');
+    const previousDimensions = committedDimensionsRef.current ?? liveDimensionsRef.current;
     const newDimensions = (0, _getCssDimensions.getCssDimensions)(popupElement);
-    popupElement.style.setProperty('--popup-width', `${previousDimensionsRef.current.width}px`);
-    popupElement.style.setProperty('--popup-height', `${previousDimensionsRef.current.height}px`);
-    restorePopupPosition();
-    restorePopupTransform();
-    restoreAvailableWidth();
-    restoreAvailableHeight();
-    onMeasureLayoutComplete?.(previousDimensionsRef.current, newDimensions);
-    positionerElement.style.setProperty('--positioner-width', `${newDimensions.width}px`);
-    positionerElement.style.setProperty('--positioner-height', `${newDimensions.height}px`);
+
+    // Commit immediately so future content changes have a stable previous size, even if
+    // ResizeObserver runs after this point.
+    committedDimensionsRef.current = newDimensions;
+    if (!previousDimensions) {
+      setPositionerCssSize(positionerElement, newDimensions);
+      restoreMeasurementOverridesIncludingScale();
+      onMeasureLayoutComplete?.(null, newDimensions);
+      return () => {
+        observer.disconnect();
+        animationFrame.cancel();
+        restoreAnchoringStylesRef.current();
+        restoreAnchoringStylesRef.current = _empty.NOOP;
+      };
+    }
+    setPopupCssSize(popupElement, previousDimensions);
+    restoreMeasurementOverrides();
+    onMeasureLayoutComplete?.(previousDimensions, newDimensions);
+    setPositionerCssSize(positionerElement, newDimensions);
     const abortController = new AbortController();
     animationFrame.request(() => {
-      popupElement.style.setProperty('--popup-width', `${newDimensions.width}px`);
-      popupElement.style.setProperty('--popup-height', `${newDimensions.height}px`);
+      setPopupCssSize(popupElement, newDimensions);
       runOnceAnimationsFinish(() => {
         popupElement.style.setProperty('--popup-width', 'auto');
         popupElement.style.setProperty('--popup-height', 'auto');
@@ -139,6 +152,8 @@ function usePopupAutoResize(parameters) {
       observer.disconnect();
       abortController.abort();
       animationFrame.cancel();
+      restoreAnchoringStylesRef.current();
+      restoreAnchoringStylesRef.current = _empty.NOOP;
     };
   }, [content, popupElement, positionerElement, runOnceAnimationsFinish, animationFrame, enabled, mounted, onMeasureLayout, onMeasureLayoutComplete, anchoringStyles]);
 }
@@ -148,4 +163,25 @@ function overrideElementStyle(element, property, value) {
   return () => {
     element.style.setProperty(property, originalValue);
   };
+}
+function applyElementStyles(element, styles) {
+  const restorers = [];
+  for (const [key, value] of Object.entries(styles)) {
+    restorers.push(overrideElementStyle(element, key, value));
+  }
+  return restorers.length ? () => {
+    restorers.forEach(restore => restore());
+  } : _empty.NOOP;
+}
+function setPopupCssSize(popupElement, size) {
+  const width = size === 'auto' ? 'auto' : `${size.width}px`;
+  const height = size === 'auto' ? 'auto' : `${size.height}px`;
+  popupElement.style.setProperty('--popup-width', width);
+  popupElement.style.setProperty('--popup-height', height);
+}
+function setPositionerCssSize(positionerElement, size) {
+  const width = size === 'max-content' ? 'max-content' : `${size.width}px`;
+  const height = size === 'max-content' ? 'max-content' : `${size.height}px`;
+  positionerElement.style.setProperty('--positioner-width', width);
+  positionerElement.style.setProperty('--positioner-height', height);
 }

package/esm/utils/interactions/useFocusWithDelay.d.ts

@@ -1,9 +0,0 @@
-import type { FloatingRootContext, ElementProps } from "../../floating-ui-react/index.js";
-interface UseFocusWithDelayProps {
-  delay?: number | (() => number | undefined);
-}
-/**
- * Adds support for delay, since Floating UI's `useFocus` hook does not support it.
- */
-export declare function useFocusWithDelay(store: FloatingRootContext, props?: UseFocusWithDelayProps): ElementProps;
-export {};

package/esm/utils/interactions/useFocusWithDelay.js

@@ -1,81 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { getWindow, isHTMLElement } from '@floating-ui/utils/dom';
-import { useTimeout } from '@base-ui/utils/useTimeout';
-import { createChangeEventDetails } from "../createBaseUIEventDetails.js";
-import { REASONS } from "../reasons.js";
-import { activeElement, contains, getDocument } from "../../floating-ui-react/utils.js";
-/**
- * Adds support for delay, since Floating UI's `useFocus` hook does not support it.
- */
-export function useFocusWithDelay(store, props = {}) {
-  const domReference = store.useState('domReferenceElement');
-  const dataRef = store.context.dataRef;
-  const {
-    delay
-  } = props;
-  const timeout = useTimeout();
-  const blockFocusRef = React.useRef(false);
-  React.useEffect(() => {
-    // TODO: remove domReference from dependencies or split this hook into trigger/popup hooks.
-    const win = getWindow(domReference);
-
-    // If the reference was focused and the user left the tab/window, and the preview card was not
-    // open, the focus should be blocked when they return to the tab/window.
-    function handleBlur() {
-      const currentDomReference = store.select('domReferenceElement');
-      if (!store.select('open') && isHTMLElement(currentDomReference) && currentDomReference === activeElement(getDocument(currentDomReference))) {
-        blockFocusRef.current = true;
-      }
-    }
-    win.addEventListener('blur', handleBlur);
-    return () => {
-      win.removeEventListener('blur', handleBlur);
-    };
-  }, [store, domReference]);
-  const reference = React.useMemo(() => ({
-    onFocus(event) {
-      const {
-        nativeEvent
-      } = event;
-      const delayValue = typeof delay === 'function' ? delay() : delay;
-      timeout.start(delayValue ?? 0, () => {
-        store.setOpen(true, createChangeEventDetails(REASONS.triggerFocus, nativeEvent));
-      });
-    },
-    onBlur(event) {
-      blockFocusRef.current = false;
-      const {
-        relatedTarget,
-        nativeEvent
-      } = event;
-
-      // Wait for the window blur listener to fire.
-      timeout.start(0, () => {
-        const currentDomReference = store.select('domReferenceElement');
-        const activeEl = activeElement(currentDomReference ? currentDomReference.ownerDocument : document);
-
-        // Focus left the page, keep it open.
-        if (!relatedTarget && activeEl === currentDomReference) {
-          return;
-        }
-
-        // When focusing the reference element (e.g. regular click), then
-        // clicking into the floating element, prevent it from hiding.
-        // Note: it must be focusable, e.g. `tabindex="-1"`.
-        // We can not rely on relatedTarget to point to the correct element
-        // as it will only point to the shadow host of the newly focused element
-        // and not the element that actually has received focus if it is located
-        // inside a shadow root.
-        if (contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || contains(currentDomReference, activeEl)) {
-          return;
-        }
-        store.setOpen(false, createChangeEventDetails(REASONS.triggerFocus, nativeEvent));
-      });
-    }
-  }), [delay, store, dataRef, timeout]);
-  return React.useMemo(() => ({
-    reference
-  }), [reference]);
-}

package/utils/interactions/useFocusWithDelay.d.ts

@@ -1,9 +0,0 @@
-import type { FloatingRootContext, ElementProps } from "../../floating-ui-react/index.js";
-interface UseFocusWithDelayProps {
-  delay?: number | (() => number | undefined);
-}
-/**
- * Adds support for delay, since Floating UI's `useFocus` hook does not support it.
- */
-export declare function useFocusWithDelay(store: FloatingRootContext, props?: UseFocusWithDelayProps): ElementProps;
-export {};

package/utils/interactions/useFocusWithDelay.js

@@ -1,87 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFocusWithDelay = useFocusWithDelay;
-var React = _interopRequireWildcard(require("react"));
-var _dom = require("@floating-ui/utils/dom");
-var _useTimeout = require("@base-ui/utils/useTimeout");
-var _createBaseUIEventDetails = require("../createBaseUIEventDetails");
-var _reasons = require("../reasons");
-var _utils = require("../../floating-ui-react/utils");
-/**
- * Adds support for delay, since Floating UI's `useFocus` hook does not support it.
- */
-function useFocusWithDelay(store, props = {}) {
-  const domReference = store.useState('domReferenceElement');
-  const dataRef = store.context.dataRef;
-  const {
-    delay
-  } = props;
-  const timeout = (0, _useTimeout.useTimeout)();
-  const blockFocusRef = React.useRef(false);
-  React.useEffect(() => {
-    // TODO: remove domReference from dependencies or split this hook into trigger/popup hooks.
-    const win = (0, _dom.getWindow)(domReference);
-
-    // If the reference was focused and the user left the tab/window, and the preview card was not
-    // open, the focus should be blocked when they return to the tab/window.
-    function handleBlur() {
-      const currentDomReference = store.select('domReferenceElement');
-      if (!store.select('open') && (0, _dom.isHTMLElement)(currentDomReference) && currentDomReference === (0, _utils.activeElement)((0, _utils.getDocument)(currentDomReference))) {
-        blockFocusRef.current = true;
-      }
-    }
-    win.addEventListener('blur', handleBlur);
-    return () => {
-      win.removeEventListener('blur', handleBlur);
-    };
-  }, [store, domReference]);
-  const reference = React.useMemo(() => ({
-    onFocus(event) {
-      const {
-        nativeEvent
-      } = event;
-      const delayValue = typeof delay === 'function' ? delay() : delay;
-      timeout.start(delayValue ?? 0, () => {
-        store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent));
-      });
-    },
-    onBlur(event) {
-      blockFocusRef.current = false;
-      const {
-        relatedTarget,
-        nativeEvent
-      } = event;
-
-      // Wait for the window blur listener to fire.
-      timeout.start(0, () => {
-        const currentDomReference = store.select('domReferenceElement');
-        const activeEl = (0, _utils.activeElement)(currentDomReference ? currentDomReference.ownerDocument : document);
-
-        // Focus left the page, keep it open.
-        if (!relatedTarget && activeEl === currentDomReference) {
-          return;
-        }
-
-        // When focusing the reference element (e.g. regular click), then
-        // clicking into the floating element, prevent it from hiding.
-        // Note: it must be focusable, e.g. `tabindex="-1"`.
-        // We can not rely on relatedTarget to point to the correct element
-        // as it will only point to the shadow host of the newly focused element
-        // and not the element that actually has received focus if it is located
-        // inside a shadow root.
-        if ((0, _utils.contains)(dataRef.current.floatingContext?.refs.floating.current, activeEl) || (0, _utils.contains)(currentDomReference, activeEl)) {
-          return;
-        }
-        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent));
-      });
-    }
-  }), [delay, store, dataRef, timeout]);
-  return React.useMemo(() => ({
-    reference
-  }), [reference]);
-}