@tale-ui/react 0.0.3

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

@@ -0,0 +1,580 @@
+'use client';
+
+import * as React from 'react';
+import { tabbable, isTabbable, focusable } from 'tabbable';
+import { getComputedStyle, getNodeName, isHTMLElement } from '@floating-ui/utils/dom';
+import { useMergedRefs } from '@tale-ui/utils/useMergedRefs';
+import { useValueAsRef } from '@tale-ui/utils/useValueAsRef';
+import { useStableCallback } from '@tale-ui/utils/useStableCallback';
+import { useIsoLayoutEffect } from '@tale-ui/utils/useIsoLayoutEffect';
+import { visuallyHidden } from '@tale-ui/utils/visuallyHidden';
+import { useTimeout } from '@tale-ui/utils/useTimeout';
+import { isWebKit } from '@tale-ui/utils/detectBrowser';
+import { useAnimationFrame } from '@tale-ui/utils/useAnimationFrame';
+import { ownerDocument, ownerWindow } from '@tale-ui/utils/owner';
+import { FocusGuard } from "../../utils/FocusGuard.js";
+import { activeElement, contains, getTarget, isTypeableCombobox, isVirtualClick, isVirtualPointerEvent, stopEvent, getNodeAncestors, getNodeChildren, getFloatingFocusElement, getTabbableOptions, isOutsideEvent, getNextTabbable, getPreviousTabbable, isTypeableElement } from "../utils.js";
+import { createChangeEventDetails } from "../../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+import { createAttribute } from "../utils/createAttribute.js";
+import { enqueueFocus } from "../utils/enqueueFocus.js";
+import { markOthers } from "../utils/markOthers.js";
+import { usePortalContext } from "./FloatingPortal.js";
+import { useFloatingTree } from "./FloatingTree.js";
+import { CLICK_TRIGGER_IDENTIFIER } from "../../utils/constants.js";
+import { resolveRef } from "../../utils/resolveRef.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getEventType(event, lastInteractionType) {
+  const win = ownerWindow(event.target);
+  if (event instanceof win.KeyboardEvent) {
+    return 'keyboard';
+  }
+  if (event instanceof win.FocusEvent) {
+    // Focus events can be caused by a preceding pointer interaction (e.g., focusout on outside press).
+    // Prefer the last known pointer type if provided, else treat as keyboard.
+    return lastInteractionType || 'keyboard';
+  }
+  if ('pointerType' in event) {
+    return event.pointerType || 'keyboard';
+  }
+  if ('touches' in event) {
+    return 'touch';
+  }
+  if (event instanceof win.MouseEvent) {
+    // onClick events may not contain pointer events, and will fall through to here
+    return lastInteractionType || (event.detail === 0 ? 'keyboard' : 'mouse');
+  }
+  return '';
+}
+const LIST_LIMIT = 20;
+let previouslyFocusedElements = [];
+function clearDisconnectedPreviouslyFocusedElements() {
+  previouslyFocusedElements = previouslyFocusedElements.filter(entry => {
+    return entry.deref()?.isConnected;
+  });
+}
+function addPreviouslyFocusedElement(element) {
+  clearDisconnectedPreviouslyFocusedElements();
+  if (element && getNodeName(element) !== 'body') {
+    previouslyFocusedElements.push(new WeakRef(element));
+    if (previouslyFocusedElements.length > LIST_LIMIT) {
+      previouslyFocusedElements = previouslyFocusedElements.slice(-LIST_LIMIT);
+    }
+  }
+}
+function getPreviouslyFocusedElement() {
+  clearDisconnectedPreviouslyFocusedElements();
+  return previouslyFocusedElements[previouslyFocusedElements.length - 1]?.deref();
+}
+function getFirstTabbableElement(container) {
+  if (!container) {
+    return null;
+  }
+  const tabbableOptions = getTabbableOptions();
+  if (isTabbable(container, tabbableOptions)) {
+    return container;
+  }
+  return tabbable(container, tabbableOptions)[0] || container;
+}
+function isFocusable(element) {
+  if (!element || !element.isConnected) {
+    return false;
+  }
+  if (typeof element.checkVisibility === 'function') {
+    return element.checkVisibility();
+  }
+  return getComputedStyle(element).display !== 'none';
+}
+function handleTabIndex(floatingFocusElement, orderRef) {
+  if (!orderRef.current.includes('floating') && !floatingFocusElement.getAttribute('role')?.includes('dialog')) {
+    return;
+  }
+  const options = getTabbableOptions();
+  const focusableElements = focusable(floatingFocusElement, options);
+  const tabbableContent = focusableElements.filter(element => {
+    const dataTabIndex = element.getAttribute('data-tabindex') || '';
+    return isTabbable(element, options) || element.hasAttribute('data-tabindex') && !dataTabIndex.startsWith('-');
+  });
+  const tabIndex = floatingFocusElement.getAttribute('tabindex');
+  if (orderRef.current.includes('floating') || tabbableContent.length === 0) {
+    if (tabIndex !== '0') {
+      floatingFocusElement.setAttribute('tabindex', '0');
+    }
+  } else if (tabIndex !== '-1' || floatingFocusElement.hasAttribute('data-tabindex') && floatingFocusElement.getAttribute('data-tabindex') !== '-1') {
+    floatingFocusElement.setAttribute('tabindex', '-1');
+    floatingFocusElement.setAttribute('data-tabindex', '-1');
+  }
+}
+/**
+ * Provides focus management for the floating element.
+ * @see https://floating-ui.com/docs/FloatingFocusManager
+ * @internal
+ */
+export function FloatingFocusManager(props) {
+  const {
+    context,
+    children,
+    disabled = false,
+    initialFocus = true,
+    returnFocus = true,
+    restoreFocus = false,
+    modal = true,
+    closeOnFocusOut = true,
+    openInteractionType = '',
+    nextFocusableElement,
+    previousFocusableElement,
+    beforeContentFocusGuardRef,
+    externalTree
+  } = props;
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const open = store.useState('open');
+  const domReference = store.useState('domReferenceElement');
+  const floating = store.useState('floatingElement');
+  const {
+    events,
+    dataRef
+  } = 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.
+  const isUntrappedTypeableCombobox = isTypeableCombobox(domReference) && ignoreInitialFocus;
+  const orderRef = React.useRef(['content']);
+  const initialFocusRef = useValueAsRef(initialFocus);
+  const returnFocusRef = useValueAsRef(returnFocus);
+  const openInteractionTypeRef = useValueAsRef(openInteractionType);
+  const tree = useFloatingTree(externalTree);
+  const portalContext = usePortalContext();
+  const startDismissButtonRef = React.useRef(null);
+  const endDismissButtonRef = React.useRef(null);
+  const preventReturnFocusRef = React.useRef(false);
+  const isPointerDownRef = React.useRef(false);
+  const pointerDownOutsideRef = React.useRef(false);
+  const tabbableIndexRef = React.useRef(-1);
+  const closeTypeRef = React.useRef('');
+  const lastInteractionTypeRef = React.useRef('');
+  const beforeGuardRef = React.useRef(null);
+  const afterGuardRef = React.useRef(null);
+  const mergedBeforeGuardRef = useMergedRefs(beforeGuardRef, beforeContentFocusGuardRef, portalContext?.beforeInsideRef);
+  const mergedAfterGuardRef = useMergedRefs(afterGuardRef, portalContext?.afterInsideRef);
+  const blurTimeout = useTimeout();
+  const pointerDownTimeout = useTimeout();
+  const restoreFocusFrame = useAnimationFrame();
+  const isInsidePortal = portalContext != null;
+  const floatingFocusElement = getFloatingFocusElement(floating);
+  const getTabbableContent = useStableCallback((container = floatingFocusElement) => {
+    return container ? tabbable(container, getTabbableOptions()) : [];
+  });
+  const getTabbableElements = useStableCallback(container => {
+    const content = getTabbableContent(container);
+    return orderRef.current.map(() => content).filter(Boolean).flat();
+  });
+
+  // Prevent Tab from escaping the modal when there are no tabbable elements.
+  React.useEffect(() => {
+    if (disabled || !modal) {
+      return undefined;
+    }
+    function onKeyDown(event) {
+      if (event.key === 'Tab') {
+        // The focus guards have nothing to focus, so we need to stop the event.
+        if (contains(floatingFocusElement, activeElement(ownerDocument(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
+          stopEvent(event);
+        }
+      }
+    }
+    const doc = ownerDocument(floatingFocusElement);
+    doc.addEventListener('keydown', onKeyDown);
+    return () => {
+      doc.removeEventListener('keydown', onKeyDown);
+    };
+  }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
+
+  // Track pointer/keyboard interactions to disambiguate focus and outside presses.
+  React.useEffect(() => {
+    if (disabled || !open) {
+      return undefined;
+    }
+    const doc = ownerDocument(floatingFocusElement);
+    function clearPointerDownOutside() {
+      pointerDownOutsideRef.current = false;
+    }
+    function onPointerDown(event) {
+      const target = getTarget(event);
+      const pointerTargetInside = contains(floating, target) || contains(domReference, target) || contains(portalContext?.portalNode, target);
+      pointerDownOutsideRef.current = !pointerTargetInside;
+      lastInteractionTypeRef.current = event.pointerType || 'keyboard';
+      if (target?.closest(`[${CLICK_TRIGGER_IDENTIFIER}]`)) {
+        isPointerDownRef.current = true;
+      }
+    }
+    function onKeyDown() {
+      lastInteractionTypeRef.current = 'keyboard';
+    }
+    doc.addEventListener('pointerdown', onPointerDown, true);
+    doc.addEventListener('pointerup', clearPointerDownOutside, true);
+    doc.addEventListener('pointercancel', clearPointerDownOutside, true);
+    doc.addEventListener('keydown', onKeyDown, true);
+    return () => {
+      doc.removeEventListener('pointerdown', onPointerDown, true);
+      doc.removeEventListener('pointerup', clearPointerDownOutside, true);
+      doc.removeEventListener('pointercancel', clearPointerDownOutside, true);
+      doc.removeEventListener('keydown', onKeyDown, true);
+    };
+  }, [disabled, floating, domReference, floatingFocusElement, open, portalContext]);
+
+  // Close on focus out and restore focus within the floating tree when needed.
+  React.useEffect(() => {
+    if (disabled || !closeOnFocusOut) {
+      return undefined;
+    }
+    const doc = ownerDocument(floatingFocusElement);
+
+    // In Safari, buttons lose focus when pressing them.
+    function handlePointerDown() {
+      isPointerDownRef.current = true;
+      pointerDownTimeout.start(0, () => {
+        isPointerDownRef.current = false;
+      });
+    }
+    function handleFocusIn(event) {
+      const target = getTarget(event);
+      const tabbableContent = getTabbableContent();
+      const tabbableIndex = tabbableContent.indexOf(target);
+      if (tabbableIndex !== -1) {
+        tabbableIndexRef.current = tabbableIndex;
+      }
+    }
+    function handleFocusOutside(event) {
+      const relatedTarget = event.relatedTarget;
+      const currentTarget = event.currentTarget;
+      const target = getTarget(event);
+      queueMicrotask(() => {
+        const nodeId = getNodeId();
+        const triggers = store.context.triggerElements;
+        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) || 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)));
+        if (currentTarget === domReference && floatingFocusElement) {
+          handleTabIndex(floatingFocusElement, orderRef);
+        }
+
+        // Restore focus to the previous tabbable element index to prevent
+        // focus from being lost outside the floating tree.
+        if (restoreFocus && currentTarget !== domReference && !isFocusable(target) && activeElement(doc) === doc.body) {
+          // Let `FloatingPortal` effect knows that focus is still inside the
+          // floating tree.
+          if (isHTMLElement(floatingFocusElement)) {
+            floatingFocusElement.focus();
+            // 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.
+              restoreFocusFrame.request(() => {
+                floatingFocusElement.focus();
+              });
+              return;
+            }
+          }
+          const prevTabbableIndex = tabbableIndexRef.current;
+          const tabbableContent = getTabbableContent();
+          const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
+          if (isHTMLElement(nodeToFocus)) {
+            nodeToFocus.focus();
+          }
+        }
+
+        // https://github.com/floating-ui/floating-ui/issues/3060
+        if (dataRef.current.insideReactTree) {
+          dataRef.current.insideReactTree = false;
+          return;
+        }
+
+        // Focus did not move inside the floating tree, and there are no tabbable
+        // portal guards to handle closing.
+        if ((isUntrappedTypeableCombobox ? true : !modal) && relatedTarget && movedToUnrelatedNode && !isPointerDownRef.current && (
+        // Fix React 18 Strict Mode returnFocus due to double rendering.
+        // For an "untrapped" typeable combobox (input role=combobox with
+        // initialFocus=false), re-opening the popup and tabbing out should still close it even
+        // when the previously focused element (e.g. the next tabbable outside the popup) is
+        // focused again. Otherwise, the popup remains open on the second Tab sequence:
+        // click input -> Tab (closes) -> click input -> Tab.
+        // Allow closing when `isUntrappedTypeableCombobox` regardless of the previously focused element.
+        isUntrappedTypeableCombobox || relatedTarget !== getPreviouslyFocusedElement())) {
+          preventReturnFocusRef.current = true;
+          store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event));
+        }
+      });
+    }
+    function markInsideReactTree() {
+      if (pointerDownOutsideRef.current) {
+        return;
+      }
+      dataRef.current.insideReactTree = true;
+      blurTimeout.start(0, () => {
+        dataRef.current.insideReactTree = false;
+      });
+    }
+    const domReferenceElement = isHTMLElement(domReference) ? domReference : null;
+    const cleanups = [];
+    if (!floating && !domReferenceElement) {
+      return undefined;
+    }
+    if (domReferenceElement) {
+      domReferenceElement.addEventListener('focusout', handleFocusOutside);
+      domReferenceElement.addEventListener('pointerdown', handlePointerDown);
+      cleanups.push(() => {
+        domReferenceElement.removeEventListener('focusout', handleFocusOutside);
+        domReferenceElement.removeEventListener('pointerdown', handlePointerDown);
+      });
+    }
+    if (floating) {
+      floating.addEventListener('focusin', handleFocusIn);
+      floating.addEventListener('focusout', handleFocusOutside);
+      if (portalContext) {
+        floating.addEventListener('focusout', markInsideReactTree, true);
+        cleanups.push(() => {
+          floating.removeEventListener('focusout', markInsideReactTree, true);
+        });
+      }
+      cleanups.push(() => {
+        floating.removeEventListener('focusin', handleFocusIn);
+        floating.removeEventListener('focusout', handleFocusOutside);
+      });
+    }
+    return () => {
+      cleanups.forEach(cleanup => {
+        cleanup();
+      });
+    };
+  }, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame, nextFocusableElement, previousFocusableElement]);
+
+  // Hide everything outside the floating tree from assistive tech while open.
+  React.useEffect(() => {
+    if (disabled || !floating || !open) {
+      return undefined;
+    }
+
+    // Don't hide portals nested within the parent portal.
+    const portalNodes = Array.from(portalContext?.portalNode?.querySelectorAll(`[${createAttribute('portal')}]`) || []);
+    const ancestors = tree ? getNodeAncestors(tree.nodesRef.current, getNodeId()) : [];
+    const rootAncestorComboboxDomReference = ancestors.find(node => isTypeableCombobox(node.context?.elements.domReference || null))?.context?.elements.domReference;
+    const insideElements = [floating, rootAncestorComboboxDomReference, ...portalNodes, startDismissButtonRef.current, endDismissButtonRef.current, beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, resolveRef(previousFocusableElement), resolveRef(nextFocusableElement), isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
+    return markOthers(insideElements, modal || isUntrappedTypeableCombobox);
+  }, [open, disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, tree, getNodeId, nextFocusableElement, previousFocusableElement]);
+
+  // Focus the initial element when the floating element opens.
+  useIsoLayoutEffect(() => {
+    if (!open || disabled || !isHTMLElement(floatingFocusElement)) {
+      return;
+    }
+    const doc = ownerDocument(floatingFocusElement);
+    const previouslyFocusedElement = activeElement(doc);
+
+    // Wait for any layout effect state setters to execute to set `tabIndex`.
+    queueMicrotask(() => {
+      const focusableElements = getTabbableElements(floatingFocusElement);
+      const initialFocusValueOrFn = initialFocusRef.current;
+      const resolvedInitialFocus = typeof initialFocusValueOrFn === 'function' ? initialFocusValueOrFn(openInteractionTypeRef.current || '') : initialFocusValueOrFn;
+
+      // `null` should fallback to default behavior in case of an empty ref.
+      if (resolvedInitialFocus === undefined || resolvedInitialFocus === false) {
+        return;
+      }
+      let elToFocus;
+      if (resolvedInitialFocus === true || resolvedInitialFocus === null) {
+        elToFocus = focusableElements[0] || floatingFocusElement;
+      } else {
+        elToFocus = resolveRef(resolvedInitialFocus);
+      }
+      elToFocus = elToFocus || focusableElements[0] || floatingFocusElement;
+      const focusAlreadyInsideFloatingEl = contains(floatingFocusElement, previouslyFocusedElement);
+      if (focusAlreadyInsideFloatingEl) {
+        return;
+      }
+      enqueueFocus(elToFocus, {
+        preventScroll: elToFocus === floatingFocusElement
+      });
+    });
+  }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef, openInteractionTypeRef]);
+
+  // Track return focus targets and restore focus on unmount/close.
+  useIsoLayoutEffect(() => {
+    if (disabled || !floatingFocusElement) {
+      return undefined;
+    }
+    const doc = ownerDocument(floatingFocusElement);
+    const previouslyFocusedElement = activeElement(doc);
+    addPreviouslyFocusedElement(previouslyFocusedElement);
+
+    // 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);
+      }
+      if (details.reason === REASONS.triggerHover && details.nativeEvent.type === 'mouseleave') {
+        preventReturnFocusRef.current = true;
+      }
+      if (details.reason !== REASONS.outsidePress) {
+        return;
+      }
+      if (details.nested) {
+        preventReturnFocusRef.current = false;
+      } else if (isVirtualClick(details.nativeEvent) || isVirtualPointerEvent(details.nativeEvent)) {
+        preventReturnFocusRef.current = false;
+      } else {
+        let isPreventScrollSupported = false;
+        document.createElement('div').focus({
+          get preventScroll() {
+            isPreventScrollSupported = true;
+            return false;
+          }
+        });
+        if (isPreventScrollSupported) {
+          preventReturnFocusRef.current = false;
+        } else {
+          preventReturnFocusRef.current = true;
+        }
+      }
+    }
+    events.on('openchange', onOpenChangeLocal);
+    const fallbackEl = doc.createElement('span');
+    fallbackEl.setAttribute('tabindex', '-1');
+    fallbackEl.setAttribute('aria-hidden', 'true');
+    Object.assign(fallbackEl.style, visuallyHidden);
+    if (isInsidePortal && domReference) {
+      domReference.insertAdjacentElement('afterend', fallbackEl);
+    }
+    function getReturnElement() {
+      const returnFocusValueOrFn = returnFocusRef.current;
+      let resolvedReturnFocusValue = typeof returnFocusValueOrFn === 'function' ? returnFocusValueOrFn(closeTypeRef.current) : returnFocusValueOrFn;
+
+      // `null` should fallback to default behavior in case of an empty ref.
+      if (resolvedReturnFocusValue === undefined || resolvedReturnFocusValue === false) {
+        return null;
+      }
+      if (resolvedReturnFocusValue === null) {
+        resolvedReturnFocusValue = true;
+      }
+      if (typeof resolvedReturnFocusValue === 'boolean') {
+        const el = domReference || getPreviouslyFocusedElement();
+        return el && el.isConnected ? el : fallbackEl;
+      }
+      const fallback = domReference || getPreviouslyFocusedElement() || fallbackEl;
+      return resolveRef(resolvedReturnFocusValue) || fallback;
+    }
+    return () => {
+      events.off('openchange', onOpenChangeLocal);
+      const activeEl = activeElement(doc);
+      const isFocusInsideFloatingTree = contains(floating, activeEl) || tree && getNodeChildren(tree.nodesRef.current, getNodeId(), false).some(node => contains(node.context?.elements.floating, activeEl));
+      const returnElement = getReturnElement();
+      queueMicrotask(() => {
+        // This is `returnElement`, if it's tabbable, or its first tabbable child.
+        const tabbableReturnElement = getFirstTabbableElement(returnElement);
+        const hasExplicitReturnFocus = typeof returnFocusRef.current !== 'boolean';
+        if (
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        returnFocusRef.current && !preventReturnFocusRef.current && isHTMLElement(tabbableReturnElement) && (
+        // If the focus moved somewhere else after mount, avoid returning focus
+        // 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({
+            preventScroll: true
+          });
+        }
+        fallbackEl.remove();
+        preventReturnFocusRef.current = false;
+      });
+    };
+  }, [disabled, floating, floatingFocusElement, returnFocusRef, dataRef, events, tree, isInsidePortal, domReference, getNodeId]);
+
+  // Safari may randomly scroll to the bottom of the page if an input inside a popup has focus
+  // when the popup unmounts from the DOM.
+  // By blurring it before the popup unmounts, we can prevent this behavior.
+  useIsoLayoutEffect(() => {
+    if (!isWebKit || open || !floating) {
+      return;
+    }
+    const activeEl = activeElement(ownerDocument(floating));
+    if (!isHTMLElement(activeEl) || !isTypeableElement(activeEl)) {
+      return;
+    }
+    if (contains(floating, activeEl)) {
+      activeEl.blur();
+    }
+  }, [open, floating]);
+  // Synchronize the `context` & `modal` value to the FloatingPortal context.
+  // It will decide whether or not it needs to render its own guards.
+  useIsoLayoutEffect(() => {
+    if (disabled || !portalContext) {
+      return undefined;
+    }
+    portalContext.setFocusManagerState({
+      modal,
+      closeOnFocusOut,
+      open,
+      onOpenChange: store.setOpen,
+      domReference
+    });
+    return () => {
+      portalContext.setFocusManagerState(null);
+    };
+  }, [disabled, portalContext, modal, open, store, closeOnFocusOut, domReference]);
+
+  // Keep the floating element tabIndex in sync and clear stale focus records.
+  useIsoLayoutEffect(() => {
+    if (disabled || !floatingFocusElement) {
+      return undefined;
+    }
+    handleTabIndex(floatingFocusElement, orderRef);
+    return () => {
+      queueMicrotask(clearDisconnectedPreviouslyFocusedElements);
+    };
+  }, [disabled, floatingFocusElement, orderRef]);
+  const shouldRenderGuards = !disabled && (modal ? !isUntrappedTypeableCombobox : true) && (isInsidePortal || modal);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [shouldRenderGuards && /*#__PURE__*/_jsx(FocusGuard, {
+      "data-type": "inside",
+      ref: mergedBeforeGuardRef,
+      onFocus: event => {
+        if (modal) {
+          const els = getTabbableElements();
+          enqueueFocus(els[els.length - 1]);
+        } else if (portalContext?.portalNode) {
+          preventReturnFocusRef.current = false;
+          if (isOutsideEvent(event, portalContext.portalNode)) {
+            const nextTabbable = getNextTabbable(domReference);
+            nextTabbable?.focus();
+          } else {
+            resolveRef(previousFocusableElement ?? portalContext.beforeOutsideRef)?.focus();
+          }
+        }
+      }
+    }), children, shouldRenderGuards && /*#__PURE__*/_jsx(FocusGuard, {
+      "data-type": "inside",
+      ref: mergedAfterGuardRef,
+      onFocus: event => {
+        if (modal) {
+          enqueueFocus(getTabbableElements()[0]);
+        } else if (portalContext?.portalNode) {
+          if (closeOnFocusOut) {
+            preventReturnFocusRef.current = true;
+          }
+          if (isOutsideEvent(event, portalContext.portalNode)) {
+            const prevTabbable = getPreviousTabbable(domReference);
+            prevTabbable?.focus();
+          } else {
+            resolveRef(nextFocusableElement ?? portalContext.afterOutsideRef)?.focus();
+          }
+        }
+      }
+    })]
+  });
+}

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import type { TaleUIComponentProps } from "../../utils/types.js";
+type FocusManagerState = null | {
+  modal: boolean;
+  open: boolean;
+  onOpenChange(open: boolean, data?: {
+    reason?: string | undefined;
+    event?: Event | undefined;
+  }): void;
+  domReference: Element | null;
+  closeOnFocusOut: boolean;
+};
+export declare const usePortalContext: () => {
+  portalNode: HTMLElement | null;
+  setFocusManagerState: React.Dispatch<React.SetStateAction<FocusManagerState>>;
+  beforeInsideRef: React.RefObject<HTMLSpanElement | null>;
+  afterInsideRef: React.RefObject<HTMLSpanElement | null>;
+  beforeOutsideRef: React.RefObject<HTMLSpanElement | null>;
+  afterOutsideRef: React.RefObject<HTMLSpanElement | null>;
+} | null;
+export interface UseFloatingPortalNodeProps {
+  ref?: React.Ref<HTMLDivElement> | undefined;
+  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null> | undefined;
+  componentProps?: useRenderElement.ComponentProps<any> | undefined;
+  elementProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+}
+export interface UseFloatingPortalNodeResult {
+  portalNode: HTMLElement | null;
+  portalSubtree: 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 declare namespace FloatingPortal {
+  interface Props<State> extends TaleUIComponentProps<'div', State> {
+    /**
+     * A parent element to render the portal element into.
+     */
+    container?: UseFloatingPortalNodeProps['container'] | undefined;
+  }
+}
+export {};