@base-ui/react 1.6.0 → 1.7.0

package/floating-ui-react/components/FloatingFocusManager.js

@@ -142,11 +142,10 @@ function FloatingFocusManager(props) {
   } = store.context;
   const getNodeId = (0, _useStableCallback.useStableCallback)(() => dataRef.current.floatingContext?.nodeId);
   const ignoreInitialFocus = initialFocus === false;
-  // If the reference is a combobox and is typeable (e.g. input/textarea),
-  // there are different focus semantics. The guards should not be rendered, but
-  // aria-hidden should be applied to all nodes still. Further, the visually
-  // hidden dismiss button should only appear at the end of the list, not the
-  // start.
+  // A typeable combobox reference (e.g. input/textarea) with `initialFocus={false}`
+  // has different focus semantics: focus is not trapped inside the floating element,
+  // so in the modal case the guards are not rendered, but `aria-hidden` is still
+  // applied to the outside nodes.
   const isUntrappedTypeableCombobox = (0, _element.isTypeableCombobox)(domReference) && ignoreInitialFocus;
   const initialFocusRef = (0, _useValueAsRef.useValueAsRef)(initialFocus);
   const returnFocusRef = (0, _useValueAsRef.useValueAsRef)(returnFocus);
@@ -260,12 +259,12 @@ function FloatingFocusManager(props) {
         const triggers = store.context.triggerElements;
         const insideElements = getResolvedInsideElements();
         const isRelatedFocusGuard = relatedTarget?.hasAttribute((0, _createAttribute.createAttribute)('focus-guard')) && [beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeInsideRef.current, portalContext?.afterInsideRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, (0, _resolveRef.resolveRef)(previousFocusableElement), (0, _resolveRef.resolveRef)(nextFocusableElement)].includes(relatedTarget);
-        const movedToUnrelatedNode = !((0, _element.contains)(domReference, relatedTarget) || (0, _element.contains)(floating, relatedTarget) || (0, _element.contains)(relatedTarget, floating) || (0, _element.contains)(portalContext?.portalNode, relatedTarget) || insideElements.some(element => element === relatedTarget || (0, _element.contains)(element, relatedTarget)) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => (0, _element.contains)(trigger, relatedTarget)) || isRelatedFocusGuard || tree && ((0, _nodes.getNodeChildren)(tree.nodesRef.current, nodeId).find(node => (0, _element.contains)(node.context?.elements.floating, relatedTarget) || (0, _element.contains)(node.context?.elements.domReference, relatedTarget)) || (0, _nodes.getNodeAncestors)(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, (0, _element.getFloatingFocusElement)(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
+        const movedToUnrelatedNode = !((0, _element.contains)(domReference, relatedTarget) || (0, _element.contains)(floating, relatedTarget) || (0, _element.contains)(relatedTarget, floating) || (0, _element.contains)(portalContext?.portalNode, relatedTarget) || insideElements.some(element => element === relatedTarget || (0, _element.contains)(element, relatedTarget)) || triggers.hasMatchingElement(trigger => (0, _element.contains)(trigger, relatedTarget)) || isRelatedFocusGuard || tree && ((0, _nodes.getNodeChildren)(tree.nodesRef.current, nodeId).find(node => (0, _element.contains)(node.context?.elements.floating, relatedTarget) || (0, _element.contains)(node.context?.elements.domReference, relatedTarget)) || (0, _nodes.getNodeAncestors)(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, (0, _element.getFloatingFocusElement)(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
         if (currentTarget === domReference && floatingFocusElement) {
           handleTabIndex(floatingFocusElement);
         }
 
-        // Restore focus to the previous tabbable element index to prevent
+        // Restore focus to the previously focused tabbable element to prevent
         // focus from being lost outside the floating tree.
         if (restoreFocus && currentTarget !== domReference && !(0, _composite.isElementVisible)(target) && (0, _element.activeElement)(doc) === doc.body) {
           // Let `FloatingPortal` effect knows that focus is still inside the
@@ -275,10 +274,10 @@ function FloatingFocusManager(props) {
             // If explicitly requested to restore focus to the popup container, do not search
             // for the next/previous tabbable element.
             if (restoreFocus === 'popup') {
-              // If the element is removed on pointerdown, focus tries to move it,
-              // but since it's removed at the same time, focus gets lost as it
-              // happens after the .focus() call above.
-              // In this case, focus needs to be moved asynchronously.
+              // If the focused element is removed on pointerdown, the browser
+              // tries to move focus to it right after the `.focus()` call above,
+              // but because it's removed in the same tick, focus is lost instead.
+              // Re-focusing asynchronously (next frame) wins that race.
               restoreFocusFrame.request(() => {
                 floatingFocusElement.focus();
               });
@@ -360,6 +359,8 @@ function FloatingFocusManager(props) {
     if (!open || disabled || !(0, _dom.isHTMLElement)(floatingFocusElement)) {
       return;
     }
+    closeTypeRef.current = '';
+    lastInteractionTypeRef.current = '';
     const doc = (0, _owner.ownerDocument)(floatingFocusElement);
     const previouslyFocusedElement = (0, _element.activeElement)(doc);
 
@@ -391,7 +392,9 @@ function FloatingFocusManager(props) {
       }
       elToFocus = elToFocus || getDefaultFocusElement();
       const hadFocusInside = (0, _element.contains)(floatingFocusElement, (0, _element.activeElement)(doc));
-      (0, _enqueueFocus.enqueueFocus)(elToFocus, {
+
+      // enqueueFocus returns a rAF-cancel function; we intentionally don't cancel this focus.
+      void (0, _enqueueFocus.enqueueFocus)(elToFocus, {
         preventScroll: elToFocus === floatingFocusElement,
         shouldFocus() {
           // This focus is queued on the next animation frame. If the floating element has closed
@@ -418,13 +421,11 @@ function FloatingFocusManager(props) {
     }
     const doc = (0, _owner.ownerDocument)(floatingFocusElement);
     const elementFocusedBeforeOpen = (0, _element.activeElement)(doc);
-    // Only nullish interaction types represent programmatic opens. The empty
-    // string default is intentionally not treated as programmatic.
+    // Only an explicit `null` interaction type represents a programmatic open.
+    // `undefined` is normalized to `''` by the prop default, so it never reaches
+    // here as nullish and is intentionally not treated as programmatic.
     const preferPreviousFocus = openInteractionTypeRef.current == null;
     addPreviouslyFocusedElement(elementFocusedBeforeOpen);
-
-    // Dismissing via outside press should always ignore `returnFocus` to
-    // prevent unwanted scrolling.
     function onOpenChangeLocal(details) {
       if (!details.open) {
         closeTypeRef.current = getEventType(details.nativeEvent, lastInteractionTypeRef.current);
@@ -440,6 +441,11 @@ function FloatingFocusManager(props) {
       } else if ((0, _event.isVirtualClick)(details.nativeEvent) || (0, _event.isVirtualPointerEvent)(details.nativeEvent)) {
         preventReturnFocusRef.current = false;
       } else {
+        // On outside press, only return focus to the reference when the browser supports the
+        // `focus({ preventScroll })` option; without it, restoring focus scrolls the page.
+        // Chrome on Android and Samsung Internet still don't support `preventScroll`
+        // (https://issues.chromium.org/issues/41453122), so the runtime check keeps return
+        // focus disabled there to avoid the scroll jump.
         let isPreventScrollSupported = false;
         (0, _owner.ownerDocument)(floatingFocusElement).createElement('div').focus({
           get preventScroll() {
@@ -455,9 +461,9 @@ function FloatingFocusManager(props) {
       }
     }
     events.on('openchange', onOpenChangeLocal);
-    function getReturnElement() {
+    function getReturnElement(closeType) {
       const returnFocusValueOrFn = returnFocusRef.current;
-      let resolvedReturnFocusValue = typeof returnFocusValueOrFn === 'function' ? returnFocusValueOrFn(closeTypeRef.current) : returnFocusValueOrFn;
+      let resolvedReturnFocusValue = typeof returnFocusValueOrFn === 'function' ? returnFocusValueOrFn(closeType) : returnFocusValueOrFn;
 
       // `null` should fallback to default behavior in case of an empty ref.
       if (resolvedReturnFocusValue === undefined || resolvedReturnFocusValue === false) {
@@ -485,9 +491,11 @@ function FloatingFocusManager(props) {
 
       // eslint-disable-next-line react-hooks/exhaustive-deps
       const returnFocusValueOrFn = returnFocusRef.current;
-      const returnElement = getReturnElement();
+      const closeType = closeTypeRef.current;
+      const returnElement = getReturnElement(closeType);
       queueMicrotask(() => {
-        // This is `returnElement`, if it's tabbable, or its first tabbable child.
+        // `returnElement` if it is tabbable, otherwise its first tabbable child,
+        // otherwise `returnElement` itself (which may not be tabbable at all).
         const tabbableReturnElement = getFirstTabbableElement(returnElement);
         const hasExplicitReturnFocus = typeof returnFocusValueOrFn !== 'boolean';
         if (returnFocusValueOrFn && !preventReturnFocusRef.current && (0, _dom.isHTMLElement)(tabbableReturnElement) && (
@@ -495,9 +503,13 @@ function FloatingFocusManager(props) {
         // since it likely entered a different element which should be
         // respected: https://github.com/floating-ui/floating-ui/issues/2607
         !hasExplicitReturnFocus && tabbableReturnElement !== activeEl && activeEl !== doc.body ? isFocusInsideFloatingTree : true)) {
-          tabbableReturnElement.focus({
+          const focusOptions = {
             preventScroll: true
-          });
+          };
+          if (closeType === 'keyboard') {
+            focusOptions.focusVisible = true;
+          }
+          tabbableReturnElement.focus(focusOptions);
         }
         preventReturnFocusRef.current = false;
       });
@@ -520,8 +532,8 @@ function FloatingFocusManager(props) {
     }
   }, [open, floating]);
 
-  // Synchronize the `context` & `modal` value to the FloatingPortal context.
-  // It will decide whether or not it needs to render its own guards.
+  // Synchronize the focus manager state (modal, closeOnFocusOut, open, etc.) to the
+  // FloatingPortal context, which uses it to decide whether to render its own guards.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (disabled || !portalContext) {
       return undefined;
@@ -556,7 +568,8 @@ function FloatingFocusManager(props) {
       onFocus: event => {
         if (modal) {
           const els = getTabbableContent();
-          (0, _enqueueFocus.enqueueFocus)(els[els.length - 1]);
+          // enqueueFocus returns a rAF-cancel function we don't need here.
+          void (0, _enqueueFocus.enqueueFocus)(els[els.length - 1]);
         } else if (portalContext?.portalNode) {
           preventReturnFocusRef.current = false;
           if ((0, _tabbable.isOutsideEvent)(event, portalContext.portalNode)) {
@@ -572,7 +585,8 @@ function FloatingFocusManager(props) {
       ref: mergedAfterGuardRef,
       onFocus: event => {
         if (modal) {
-          (0, _enqueueFocus.enqueueFocus)(getTabbableContent()[0]);
+          // enqueueFocus returns a rAF-cancel function we don't need here.
+          void (0, _enqueueFocus.enqueueFocus)(getTabbableContent()[0]);
         } else if (portalContext?.portalNode) {
           if (closeOnFocusOut) {
             preventReturnFocusRef.current = true;

package/floating-ui-react/components/FloatingFocusManager.mjs

@@ -136,11 +136,10 @@ export function FloatingFocusManager(props) {
   } = store.context;
   const getNodeId = useStableCallback(() => dataRef.current.floatingContext?.nodeId);
   const ignoreInitialFocus = initialFocus === false;
-  // If the reference is a combobox and is typeable (e.g. input/textarea),
-  // there are different focus semantics. The guards should not be rendered, but
-  // aria-hidden should be applied to all nodes still. Further, the visually
-  // hidden dismiss button should only appear at the end of the list, not the
-  // start.
+  // A typeable combobox reference (e.g. input/textarea) with `initialFocus={false}`
+  // has different focus semantics: focus is not trapped inside the floating element,
+  // so in the modal case the guards are not rendered, but `aria-hidden` is still
+  // applied to the outside nodes.
   const isUntrappedTypeableCombobox = isTypeableCombobox(domReference) && ignoreInitialFocus;
   const initialFocusRef = useValueAsRef(initialFocus);
   const returnFocusRef = useValueAsRef(returnFocus);
@@ -254,12 +253,12 @@ export function FloatingFocusManager(props) {
         const triggers = store.context.triggerElements;
         const insideElements = getResolvedInsideElements();
         const isRelatedFocusGuard = relatedTarget?.hasAttribute(createAttribute('focus-guard')) && [beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeInsideRef.current, portalContext?.afterInsideRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, resolveRef(previousFocusableElement), resolveRef(nextFocusableElement)].includes(relatedTarget);
-        const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext?.portalNode, relatedTarget) || insideElements.some(element => element === relatedTarget || contains(element, relatedTarget)) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => contains(trigger, relatedTarget)) || isRelatedFocusGuard || tree && (getNodeChildren(tree.nodesRef.current, nodeId).find(node => contains(node.context?.elements.floating, relatedTarget) || contains(node.context?.elements.domReference, relatedTarget)) || getNodeAncestors(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, getFloatingFocusElement(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
+        const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext?.portalNode, relatedTarget) || insideElements.some(element => element === relatedTarget || contains(element, relatedTarget)) || triggers.hasMatchingElement(trigger => contains(trigger, relatedTarget)) || isRelatedFocusGuard || tree && (getNodeChildren(tree.nodesRef.current, nodeId).find(node => contains(node.context?.elements.floating, relatedTarget) || contains(node.context?.elements.domReference, relatedTarget)) || getNodeAncestors(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, getFloatingFocusElement(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
         if (currentTarget === domReference && floatingFocusElement) {
           handleTabIndex(floatingFocusElement);
         }
 
-        // Restore focus to the previous tabbable element index to prevent
+        // Restore focus to the previously focused tabbable element to prevent
         // focus from being lost outside the floating tree.
         if (restoreFocus && currentTarget !== domReference && !isElementVisible(target) && activeElement(doc) === doc.body) {
           // Let `FloatingPortal` effect knows that focus is still inside the
@@ -269,10 +268,10 @@ export function FloatingFocusManager(props) {
             // If explicitly requested to restore focus to the popup container, do not search
             // for the next/previous tabbable element.
             if (restoreFocus === 'popup') {
-              // If the element is removed on pointerdown, focus tries to move it,
-              // but since it's removed at the same time, focus gets lost as it
-              // happens after the .focus() call above.
-              // In this case, focus needs to be moved asynchronously.
+              // If the focused element is removed on pointerdown, the browser
+              // tries to move focus to it right after the `.focus()` call above,
+              // but because it's removed in the same tick, focus is lost instead.
+              // Re-focusing asynchronously (next frame) wins that race.
               restoreFocusFrame.request(() => {
                 floatingFocusElement.focus();
               });
@@ -354,6 +353,8 @@ export function FloatingFocusManager(props) {
     if (!open || disabled || !isHTMLElement(floatingFocusElement)) {
       return;
     }
+    closeTypeRef.current = '';
+    lastInteractionTypeRef.current = '';
     const doc = ownerDocument(floatingFocusElement);
     const previouslyFocusedElement = activeElement(doc);
 
@@ -385,7 +386,9 @@ export function FloatingFocusManager(props) {
       }
       elToFocus = elToFocus || getDefaultFocusElement();
       const hadFocusInside = contains(floatingFocusElement, activeElement(doc));
-      enqueueFocus(elToFocus, {
+
+      // enqueueFocus returns a rAF-cancel function; we intentionally don't cancel this focus.
+      void enqueueFocus(elToFocus, {
         preventScroll: elToFocus === floatingFocusElement,
         shouldFocus() {
           // This focus is queued on the next animation frame. If the floating element has closed
@@ -412,13 +415,11 @@ export function FloatingFocusManager(props) {
     }
     const doc = ownerDocument(floatingFocusElement);
     const elementFocusedBeforeOpen = activeElement(doc);
-    // Only nullish interaction types represent programmatic opens. The empty
-    // string default is intentionally not treated as programmatic.
+    // Only an explicit `null` interaction type represents a programmatic open.
+    // `undefined` is normalized to `''` by the prop default, so it never reaches
+    // here as nullish and is intentionally not treated as programmatic.
     const preferPreviousFocus = openInteractionTypeRef.current == null;
     addPreviouslyFocusedElement(elementFocusedBeforeOpen);
-
-    // Dismissing via outside press should always ignore `returnFocus` to
-    // prevent unwanted scrolling.
     function onOpenChangeLocal(details) {
       if (!details.open) {
         closeTypeRef.current = getEventType(details.nativeEvent, lastInteractionTypeRef.current);
@@ -434,6 +435,11 @@ export function FloatingFocusManager(props) {
       } else if (isVirtualClick(details.nativeEvent) || isVirtualPointerEvent(details.nativeEvent)) {
         preventReturnFocusRef.current = false;
       } else {
+        // On outside press, only return focus to the reference when the browser supports the
+        // `focus({ preventScroll })` option; without it, restoring focus scrolls the page.
+        // Chrome on Android and Samsung Internet still don't support `preventScroll`
+        // (https://issues.chromium.org/issues/41453122), so the runtime check keeps return
+        // focus disabled there to avoid the scroll jump.
         let isPreventScrollSupported = false;
         ownerDocument(floatingFocusElement).createElement('div').focus({
           get preventScroll() {
@@ -449,9 +455,9 @@ export function FloatingFocusManager(props) {
       }
     }
     events.on('openchange', onOpenChangeLocal);
-    function getReturnElement() {
+    function getReturnElement(closeType) {
       const returnFocusValueOrFn = returnFocusRef.current;
-      let resolvedReturnFocusValue = typeof returnFocusValueOrFn === 'function' ? returnFocusValueOrFn(closeTypeRef.current) : returnFocusValueOrFn;
+      let resolvedReturnFocusValue = typeof returnFocusValueOrFn === 'function' ? returnFocusValueOrFn(closeType) : returnFocusValueOrFn;
 
       // `null` should fallback to default behavior in case of an empty ref.
       if (resolvedReturnFocusValue === undefined || resolvedReturnFocusValue === false) {
@@ -479,9 +485,11 @@ export function FloatingFocusManager(props) {
 
       // eslint-disable-next-line react-hooks/exhaustive-deps
       const returnFocusValueOrFn = returnFocusRef.current;
-      const returnElement = getReturnElement();
+      const closeType = closeTypeRef.current;
+      const returnElement = getReturnElement(closeType);
       queueMicrotask(() => {
-        // This is `returnElement`, if it's tabbable, or its first tabbable child.
+        // `returnElement` if it is tabbable, otherwise its first tabbable child,
+        // otherwise `returnElement` itself (which may not be tabbable at all).
         const tabbableReturnElement = getFirstTabbableElement(returnElement);
         const hasExplicitReturnFocus = typeof returnFocusValueOrFn !== 'boolean';
         if (returnFocusValueOrFn && !preventReturnFocusRef.current && isHTMLElement(tabbableReturnElement) && (
@@ -489,9 +497,13 @@ export function FloatingFocusManager(props) {
         // since it likely entered a different element which should be
         // respected: https://github.com/floating-ui/floating-ui/issues/2607
         !hasExplicitReturnFocus && tabbableReturnElement !== activeEl && activeEl !== doc.body ? isFocusInsideFloatingTree : true)) {
-          tabbableReturnElement.focus({
+          const focusOptions = {
             preventScroll: true
-          });
+          };
+          if (closeType === 'keyboard') {
+            focusOptions.focusVisible = true;
+          }
+          tabbableReturnElement.focus(focusOptions);
         }
         preventReturnFocusRef.current = false;
       });
@@ -514,8 +526,8 @@ export function FloatingFocusManager(props) {
     }
   }, [open, floating]);
 
-  // Synchronize the `context` & `modal` value to the FloatingPortal context.
-  // It will decide whether or not it needs to render its own guards.
+  // Synchronize the focus manager state (modal, closeOnFocusOut, open, etc.) to the
+  // FloatingPortal context, which uses it to decide whether to render its own guards.
   useIsoLayoutEffect(() => {
     if (disabled || !portalContext) {
       return undefined;
@@ -550,7 +562,8 @@ export function FloatingFocusManager(props) {
       onFocus: event => {
         if (modal) {
           const els = getTabbableContent();
-          enqueueFocus(els[els.length - 1]);
+          // enqueueFocus returns a rAF-cancel function we don't need here.
+          void enqueueFocus(els[els.length - 1]);
         } else if (portalContext?.portalNode) {
           preventReturnFocusRef.current = false;
           if (isOutsideEvent(event, portalContext.portalNode)) {
@@ -566,7 +579,8 @@ export function FloatingFocusManager(props) {
       ref: mergedAfterGuardRef,
       onFocus: event => {
         if (modal) {
-          enqueueFocus(getTabbableContent()[0]);
+          // enqueueFocus returns a rAF-cancel function we don't need here.
+          void enqueueFocus(getTabbableContent()[0]);
         } else if (portalContext?.portalNode) {
           if (closeOnFocusOut) {
             preventReturnFocusRef.current = true;

package/floating-ui-react/components/FloatingPortal.d.mts

@@ -26,22 +26,15 @@ export interface UseFloatingPortalNodeProps {
   elementProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
 }
 export interface UseFloatingPortalNodeResult {
-  portalNode: HTMLElement | null;
-  portalSubtree: React.ReactPortal | null;
+  node: HTMLElement | null;
+  /**
+   * The `id` attribute of the portal node. On React 17 it is `undefined` until the `useId`
+   * polyfill assigns it in an effect after the node has been created.
+   */
+  nodeId: string | undefined;
+  subtree: React.ReactPortal | null;
 }
 export declare function useFloatingPortalNode(props?: UseFloatingPortalNodeProps): UseFloatingPortalNodeResult;
-/**
- * Portals the floating element into a given container element — by default,
- * outside of the app root and into the body.
- * This is necessary to ensure the floating element can appear outside any
- * potential parent containers that cause clipping (such as `overflow: hidden`),
- * while retaining its location in the React tree.
- * @see https://floating-ui.com/docs/FloatingPortal
- * @internal
- */
-export declare const FloatingPortal: React.ForwardRefExoticComponent<Omit<FloatingPortal.Props<any> & {
-  renderGuards?: boolean | undefined;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface FloatingPortalState {}
 export declare namespace FloatingPortal {
   type State = FloatingPortalState;

package/floating-ui-react/components/FloatingPortal.d.ts

@@ -26,22 +26,15 @@ export interface UseFloatingPortalNodeProps {
   elementProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
 }
 export interface UseFloatingPortalNodeResult {
-  portalNode: HTMLElement | null;
-  portalSubtree: React.ReactPortal | null;
+  node: HTMLElement | null;
+  /**
+   * The `id` attribute of the portal node. On React 17 it is `undefined` until the `useId`
+   * polyfill assigns it in an effect after the node has been created.
+   */
+  nodeId: string | undefined;
+  subtree: React.ReactPortal | null;
 }
 export declare function useFloatingPortalNode(props?: UseFloatingPortalNodeProps): UseFloatingPortalNodeResult;
-/**
- * Portals the floating element into a given container element — by default,
- * outside of the app root and into the body.
- * This is necessary to ensure the floating element can appear outside any
- * potential parent containers that cause clipping (such as `overflow: hidden`),
- * while retaining its location in the React tree.
- * @see https://floating-ui.com/docs/FloatingPortal
- * @internal
- */
-export declare const FloatingPortal: React.ForwardRefExoticComponent<Omit<FloatingPortal.Props<any> & {
-  renderGuards?: boolean | undefined;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface FloatingPortalState {}
 export declare namespace FloatingPortal {
   type State = FloatingPortalState;

package/floating-ui-react/components/FloatingPortal.js

@@ -61,11 +61,6 @@ function useFloatingPortalNode(props = {}) {
       }
       return;
     }
-
-    // React 17 does not use React.useId().
-    if (uniqueId == null) {
-      return;
-    }
     const resolvedContainer = (containerProp && ((0, _dom.isNode)(containerProp) ? containerProp : containerProp.current)) ?? parentPortalNode ?? document.body;
     if (resolvedContainer == null) {
       if (containerRef.current) {
@@ -80,7 +75,7 @@ function useFloatingPortalNode(props = {}) {
       setPortalNode(null);
       setContainerElement(resolvedContainer);
     }
-  }, [containerProp, parentPortalNode, uniqueId]);
+  }, [containerProp, parentPortalNode]);
   const portalElement = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [ref, setPortalNodeRef],
     props: [{
@@ -93,8 +88,11 @@ function useFloatingPortalNode(props = {}) {
   // Another call inside `FloatingPortal`/`FloatingPortalLite` then injects the children into `portalElement`.
   const portalSubtree = containerElement && portalElement ? /*#__PURE__*/ReactDOM.createPortal(portalElement, containerElement) : null;
   return {
-    portalNode,
-    portalSubtree
+    node: portalNode,
+    // `id` and `render` props can override or remove the generated ID. Use the exact
+    // rendered value so `aria-owns` never points at an ID absent from the DOM.
+    nodeId: /*#__PURE__*/React.isValidElement(portalElement) ? portalElement.props.id : undefined,
+    subtree: portalSubtree
   };
 }
 
@@ -114,12 +112,12 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
     style,
     children,
     container,
-    renderGuards,
     ...elementProps
   } = componentProps;
   const {
-    portalNode,
-    portalSubtree
+    node: portalNode,
+    nodeId: portalNodeId,
+    subtree: portalSubtree
   } = useFloatingPortalNode({
     container,
     ref: forwardedRef,
@@ -134,7 +132,7 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
   const focusInsideDisabledRef = React.useRef(false);
   const modal = focusManagerState?.modal;
   const open = focusManagerState?.open;
-  const shouldRenderGuards = typeof renderGuards === 'boolean' ? renderGuards : !!focusManagerState && !focusManagerState.modal && focusManagerState.open && !!portalNode;
+  const shouldRenderGuards = !!focusManagerState && !focusManagerState.modal && focusManagerState.open && !!portalNode;
 
   // https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/TabbablePortal.tsx
   React.useEffect(() => {
@@ -196,7 +194,7 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
           }
         }
       }), shouldRenderGuards && portalNode && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        "aria-owns": portalNode.id,
+        "aria-owns": portalNodeId,
         style: _constants.ownerVisuallyHidden
       }), portalNode && /*#__PURE__*/ReactDOM.createPortal(children, portalNode), shouldRenderGuards && portalNode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
         "data-type": "outside",

package/floating-ui-react/components/FloatingPortal.mjs

@@ -52,11 +52,6 @@ export function useFloatingPortalNode(props = {}) {
       }
       return;
     }
-
-    // React 17 does not use React.useId().
-    if (uniqueId == null) {
-      return;
-    }
     const resolvedContainer = (containerProp && (isNode(containerProp) ? containerProp : containerProp.current)) ?? parentPortalNode ?? document.body;
     if (resolvedContainer == null) {
       if (containerRef.current) {
@@ -71,7 +66,7 @@ export function useFloatingPortalNode(props = {}) {
       setPortalNode(null);
       setContainerElement(resolvedContainer);
     }
-  }, [containerProp, parentPortalNode, uniqueId]);
+  }, [containerProp, parentPortalNode]);
   const portalElement = useRenderElement('div', componentProps, {
     ref: [ref, setPortalNodeRef],
     props: [{
@@ -84,8 +79,11 @@ export function useFloatingPortalNode(props = {}) {
   // Another call inside `FloatingPortal`/`FloatingPortalLite` then injects the children into `portalElement`.
   const portalSubtree = containerElement && portalElement ? /*#__PURE__*/ReactDOM.createPortal(portalElement, containerElement) : null;
   return {
-    portalNode,
-    portalSubtree
+    node: portalNode,
+    // `id` and `render` props can override or remove the generated ID. Use the exact
+    // rendered value so `aria-owns` never points at an ID absent from the DOM.
+    nodeId: /*#__PURE__*/React.isValidElement(portalElement) ? portalElement.props.id : undefined,
+    subtree: portalSubtree
   };
 }
 
@@ -105,12 +103,12 @@ export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPor
     style,
     children,
     container,
-    renderGuards,
     ...elementProps
   } = componentProps;
   const {
-    portalNode,
-    portalSubtree
+    node: portalNode,
+    nodeId: portalNodeId,
+    subtree: portalSubtree
   } = useFloatingPortalNode({
     container,
     ref: forwardedRef,
@@ -125,7 +123,7 @@ export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPor
   const focusInsideDisabledRef = React.useRef(false);
   const modal = focusManagerState?.modal;
   const open = focusManagerState?.open;
-  const shouldRenderGuards = typeof renderGuards === 'boolean' ? renderGuards : !!focusManagerState && !focusManagerState.modal && focusManagerState.open && !!portalNode;
+  const shouldRenderGuards = !!focusManagerState && !focusManagerState.modal && focusManagerState.open && !!portalNode;
 
   // https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/TabbablePortal.tsx
   React.useEffect(() => {
@@ -187,7 +185,7 @@ export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPor
           }
         }
       }), shouldRenderGuards && portalNode && /*#__PURE__*/_jsx("span", {
-        "aria-owns": portalNode.id,
+        "aria-owns": portalNodeId,
         style: ownerVisuallyHidden
       }), portalNode && /*#__PURE__*/ReactDOM.createPortal(children, portalNode), shouldRenderGuards && portalNode && /*#__PURE__*/_jsx(FocusGuard, {
         "data-type": "outside",

package/floating-ui-react/components/FloatingRootStore.js

@@ -8,12 +8,12 @@ var _store = require("@base-ui/utils/store");
 var _createEventEmitter = require("../utils/createEventEmitter");
 var _utils = require("../utils");
 const selectors = {
-  open: (0, _store.createSelector)(state => state.open),
-  transitionStatus: (0, _store.createSelector)(state => state.transitionStatus),
-  domReferenceElement: (0, _store.createSelector)(state => state.domReferenceElement),
-  referenceElement: (0, _store.createSelector)(state => state.positionReference ?? state.referenceElement),
-  floatingElement: (0, _store.createSelector)(state => state.floatingElement),
-  floatingId: (0, _store.createSelector)(state => state.floatingId)
+  open: state => state.open,
+  transitionStatus: state => state.transitionStatus,
+  domReferenceElement: state => state.domReferenceElement,
+  referenceElement: state => state.positionReference ?? state.referenceElement,
+  floatingElement: state => state.floatingElement,
+  floatingId: state => state.floatingId
 };
 class FloatingRootStore extends _store.ReactStore {
   constructor(options) {

package/floating-ui-react/components/FloatingRootStore.mjs

@@ -1,13 +1,13 @@
-import { createSelector, ReactStore } from '@base-ui/utils/store';
+import { ReactStore } from '@base-ui/utils/store';
 import { createEventEmitter } from "../utils/createEventEmitter.mjs";
 import { isClickLikeEvent } from "../utils.mjs";
 const selectors = {
-  open: createSelector(state => state.open),
-  transitionStatus: createSelector(state => state.transitionStatus),
-  domReferenceElement: createSelector(state => state.domReferenceElement),
-  referenceElement: createSelector(state => state.positionReference ?? state.referenceElement),
-  floatingElement: createSelector(state => state.floatingElement),
-  floatingId: createSelector(state => state.floatingId)
+  open: state => state.open,
+  transitionStatus: state => state.transitionStatus,
+  domReferenceElement: state => state.domReferenceElement,
+  referenceElement: state => state.positionReference ?? state.referenceElement,
+  floatingElement: state => state.floatingElement,
+  floatingId: state => state.floatingId
 };
 export class FloatingRootStore extends ReactStore {
   constructor(options) {

package/floating-ui-react/components/FloatingTree.d.mts

@@ -19,25 +19,7 @@ export interface FloatingNodeProps {
   children?: React.ReactNode;
   id: string | undefined;
 }
-/**
- * Provides parent node context for nested floating elements.
- * @see https://floating-ui.com/docs/FloatingTree
- * @internal
- */
-export declare function FloatingNode(props: FloatingNodeProps): React.JSX.Element;
 export interface FloatingTreeProps {
   children?: React.ReactNode;
   externalTree?: FloatingTreeStore | undefined;
-}
-/**
- * Provides context for nested floating elements when they are not children of
- * each other on the DOM.
- * This is not necessary in all cases, except when there must be explicit communication between parent and child floating elements. It is necessary for:
- * - The `bubbles` option in the `useDismiss()` Hook
- * - Nested virtual list navigation
- * - Nested floating elements that each open on hover
- * - Custom communication between parent and child floating elements
- * @see https://floating-ui.com/docs/FloatingTree
- * @internal
- */
-export declare function FloatingTree(props: FloatingTreeProps): React.JSX.Element;
+}

package/floating-ui-react/components/FloatingTree.d.ts

@@ -19,25 +19,7 @@ export interface FloatingNodeProps {
   children?: React.ReactNode;
   id: string | undefined;
 }
-/**
- * Provides parent node context for nested floating elements.
- * @see https://floating-ui.com/docs/FloatingTree
- * @internal
- */
-export declare function FloatingNode(props: FloatingNodeProps): React.JSX.Element;
 export interface FloatingTreeProps {
   children?: React.ReactNode;
   externalTree?: FloatingTreeStore | undefined;
-}
-/**
- * Provides context for nested floating elements when they are not children of
- * each other on the DOM.
- * This is not necessary in all cases, except when there must be explicit communication between parent and child floating elements. It is necessary for:
- * - The `bubbles` option in the `useDismiss()` Hook
- * - Nested virtual list navigation
- * - Nested floating elements that each open on hover
- * - Custom communication between parent and child floating elements
- * @see https://floating-ui.com/docs/FloatingTree
- * @internal
- */
-export declare function FloatingTree(props: FloatingTreeProps): React.JSX.Element;
+}