@base-ui/react 1.2.0 → 1.3.0

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

@@ -13,7 +13,6 @@ var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
@@ -89,7 +88,7 @@ function isFocusable(element) {
   if (typeof element.checkVisibility === 'function') {
     return element.checkVisibility();
   }
-  return (0, _dom.getComputedStyle)(element).display !== 'none';
+  return (0, _utils.isElementVisible)(element);
 }
 function handleTabIndex(floatingFocusElement, orderRef) {
   if (!orderRef.current.includes('floating') && !floatingFocusElement.getAttribute('role')?.includes('dialog')) {
@@ -130,7 +129,8 @@ function FloatingFocusManager(props) {
     nextFocusableElement,
     previousFocusableElement,
     beforeContentFocusGuardRef,
-    externalTree
+    externalTree,
+    getInsideElements
   } = props;
   const store = 'rootStore' in context ? context.rootStore : context;
   const open = store.useState('open');
@@ -154,8 +154,6 @@ function FloatingFocusManager(props) {
   const openInteractionTypeRef = (0, _useValueAsRef.useValueAsRef)(openInteractionType);
   const tree = (0, _FloatingTree.useFloatingTree)(externalTree);
   const portalContext = (0, _FloatingPortal.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);
@@ -174,6 +172,7 @@ function FloatingFocusManager(props) {
   const getTabbableContent = (0, _useStableCallback.useStableCallback)((container = floatingFocusElement) => {
     return container ? (0, _tabbable.tabbable)(container, (0, _utils.getTabbableOptions)()) : [];
   });
+  const getResolvedInsideElements = (0, _useStableCallback.useStableCallback)(() => getInsideElements?.().filter(element => element != null) ?? []);
   const getTabbableElements = (0, _useStableCallback.useStableCallback)(container => {
     const content = getTabbableContent(container);
     return orderRef.current.map(() => content).filter(Boolean).flat();
@@ -210,7 +209,8 @@ function FloatingFocusManager(props) {
     }
     function onPointerDown(event) {
       const target = (0, _utils.getTarget)(event);
-      const pointerTargetInside = (0, _utils.contains)(floating, target) || (0, _utils.contains)(domReference, target) || (0, _utils.contains)(portalContext?.portalNode, target);
+      const insideElements = getResolvedInsideElements();
+      const pointerTargetInside = (0, _utils.contains)(floating, target) || (0, _utils.contains)(domReference, target) || (0, _utils.contains)(portalContext?.portalNode, target) || insideElements.some(element => element === target || (0, _utils.contains)(element, target));
       pointerDownOutsideRef.current = !pointerTargetInside;
       lastInteractionTypeRef.current = event.pointerType || 'keyboard';
       if (target?.closest(`[${_constants.CLICK_TRIGGER_IDENTIFIER}]`)) {
@@ -230,7 +230,7 @@ function FloatingFocusManager(props) {
       doc.removeEventListener('pointercancel', clearPointerDownOutside, true);
       doc.removeEventListener('keydown', onKeyDown, true);
     };
-  }, [disabled, floating, domReference, floatingFocusElement, open, portalContext]);
+  }, [disabled, floating, domReference, floatingFocusElement, open, portalContext, getResolvedInsideElements]);
 
   // Close on focus out and restore focus within the floating tree when needed.
   React.useEffect(() => {
@@ -261,8 +261,9 @@ function FloatingFocusManager(props) {
       queueMicrotask(() => {
         const nodeId = getNodeId();
         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, _utils.contains)(domReference, relatedTarget) || (0, _utils.contains)(floating, relatedTarget) || (0, _utils.contains)(relatedTarget, floating) || (0, _utils.contains)(portalContext?.portalNode, relatedTarget) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => (0, _utils.contains)(trigger, relatedTarget)) || isRelatedFocusGuard || tree && ((0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId).find(node => (0, _utils.contains)(node.context?.elements.floating, relatedTarget) || (0, _utils.contains)(node.context?.elements.domReference, relatedTarget)) || (0, _utils.getNodeAncestors)(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, (0, _utils.getFloatingFocusElement)(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
+        const movedToUnrelatedNode = !((0, _utils.contains)(domReference, relatedTarget) || (0, _utils.contains)(floating, relatedTarget) || (0, _utils.contains)(relatedTarget, floating) || (0, _utils.contains)(portalContext?.portalNode, relatedTarget) || insideElements.some(element => element === relatedTarget || (0, _utils.contains)(element, relatedTarget)) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => (0, _utils.contains)(trigger, relatedTarget)) || isRelatedFocusGuard || tree && ((0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId).find(node => (0, _utils.contains)(node.context?.elements.floating, relatedTarget) || (0, _utils.contains)(node.context?.elements.domReference, relatedTarget)) || (0, _utils.getNodeAncestors)(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, (0, _utils.getFloatingFocusElement)(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
         if (currentTarget === domReference && floatingFocusElement) {
           handleTabIndex(floatingFocusElement, orderRef);
         }
@@ -358,7 +359,7 @@ function FloatingFocusManager(props) {
         cleanup();
       });
     };
-  }, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame, nextFocusableElement, previousFocusableElement]);
+  }, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame, nextFocusableElement, previousFocusableElement, getResolvedInsideElements]);
 
   // Hide everything outside the floating tree from assistive tech while open.
   React.useEffect(() => {
@@ -370,9 +371,19 @@ function FloatingFocusManager(props) {
     const portalNodes = Array.from(portalContext?.portalNode?.querySelectorAll(`[${(0, _createAttribute.createAttribute)('portal')}]`) || []);
     const ancestors = tree ? (0, _utils.getNodeAncestors)(tree.nodesRef.current, getNodeId()) : [];
     const rootAncestorComboboxDomReference = ancestors.find(node => (0, _utils.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, (0, _resolveRef.resolveRef)(previousFocusableElement), (0, _resolveRef.resolveRef)(nextFocusableElement), isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
-    return (0, _markOthers.markOthers)(insideElements, modal || isUntrappedTypeableCombobox);
-  }, [open, disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, tree, getNodeId, nextFocusableElement, previousFocusableElement]);
+    const controlInsideElements = [floating, ...portalNodes, beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, ...getResolvedInsideElements()];
+    const insideElements = [...controlInsideElements, rootAncestorComboboxDomReference, (0, _resolveRef.resolveRef)(previousFocusableElement), (0, _resolveRef.resolveRef)(nextFocusableElement), isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
+    const ariaHiddenCleanup = (0, _markOthers.markOthers)(insideElements, {
+      ariaHidden: modal || isUntrappedTypeableCombobox,
+      mark: false
+    });
+    const markerInsideElements = [floating, ...portalNodes].filter(x => x != null);
+    const markerCleanup = (0, _markOthers.markOthers)(markerInsideElements);
+    return () => {
+      markerCleanup();
+      ariaHiddenCleanup();
+    };
+  }, [open, disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, tree, getNodeId, nextFocusableElement, previousFocusableElement, getResolvedInsideElements]);
 
   // Focus the initial element when the floating element opens.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
@@ -450,13 +461,6 @@ function FloatingFocusManager(props) {
       }
     }
     events.on('openchange', onOpenChangeLocal);
-    const fallbackEl = doc.createElement('span');
-    fallbackEl.setAttribute('tabindex', '-1');
-    fallbackEl.setAttribute('aria-hidden', 'true');
-    Object.assign(fallbackEl.style, _visuallyHidden.visuallyHidden);
-    if (isInsidePortal && domReference) {
-      domReference.insertAdjacentElement('afterend', fallbackEl);
-    }
     function getReturnElement() {
       const returnFocusValueOrFn = returnFocusRef.current;
       let resolvedReturnFocusValue = typeof returnFocusValueOrFn === 'function' ? returnFocusValueOrFn(closeTypeRef.current) : returnFocusValueOrFn;
@@ -470,15 +474,16 @@ function FloatingFocusManager(props) {
       }
       if (typeof resolvedReturnFocusValue === 'boolean') {
         const el = domReference || getPreviouslyFocusedElement();
-        return el && el.isConnected ? el : fallbackEl;
+        return el && el.isConnected ? el : null;
       }
-      const fallback = domReference || getPreviouslyFocusedElement() || fallbackEl;
-      return (0, _resolveRef.resolveRef)(resolvedReturnFocusValue) || fallback;
+      const fallback = domReference || getPreviouslyFocusedElement();
+      return (0, _resolveRef.resolveRef)(resolvedReturnFocusValue) || fallback || null;
     }
     return () => {
       events.off('openchange', onOpenChangeLocal);
       const activeEl = (0, _utils.activeElement)(doc);
-      const isFocusInsideFloatingTree = (0, _utils.contains)(floating, activeEl) || tree && (0, _utils.getNodeChildren)(tree.nodesRef.current, getNodeId(), false).some(node => (0, _utils.contains)(node.context?.elements.floating, activeEl));
+      const insideElements = getResolvedInsideElements();
+      const isFocusInsideFloatingTree = (0, _utils.contains)(floating, activeEl) || insideElements.some(element => element === activeEl || (0, _utils.contains)(element, activeEl)) || tree && (0, _utils.getNodeChildren)(tree.nodesRef.current, getNodeId(), false).some(node => (0, _utils.contains)(node.context?.elements.floating, activeEl));
       const returnElement = getReturnElement();
       queueMicrotask(() => {
         // This is `returnElement`, if it's tabbable, or its first tabbable child.
@@ -495,11 +500,10 @@ function FloatingFocusManager(props) {
             preventScroll: true
           });
         }
-        fallbackEl.remove();
         preventReturnFocusRef.current = false;
       });
     };
-  }, [disabled, floating, floatingFocusElement, returnFocusRef, dataRef, events, tree, isInsidePortal, domReference, getNodeId]);
+  }, [disabled, floating, floatingFocusElement, returnFocusRef, dataRef, events, tree, domReference, getNodeId, getResolvedInsideElements]);
 
   // 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.

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { type UseRenderElementComponentProps } from "../../utils/useRenderElement.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 type FocusManagerState = null | {
   modal: boolean;
@@ -21,8 +21,8 @@ export declare const usePortalContext: () => {
 } | null;
 export interface UseFloatingPortalNodeProps {
   ref?: React.Ref<HTMLDivElement> | undefined;
-  container?: (HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>) | undefined;
-  componentProps?: useRenderElement.ComponentProps<any> | undefined;
+  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null> | undefined;
+  componentProps?: UseRenderElementComponentProps<any> | undefined;
   elementProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
 }
 export interface UseFloatingPortalNodeResult {
@@ -42,8 +42,10 @@ export declare function useFloatingPortalNode(props?: UseFloatingPortalNodeProps
 export declare const FloatingPortal: React.ForwardRefExoticComponent<Omit<FloatingPortal.Props<any> & {
   renderGuards?: boolean | undefined;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface FloatingPortalState {}
 export declare namespace FloatingPortal {
-  interface Props<State> extends BaseUIComponentProps<'div', State> {
+  type State = FloatingPortalState;
+  interface Props<TState> extends BaseUIComponentProps<'div', TState> {
     /**
      * A parent element to render the portal element into.
      */

package/floating-ui-react/hooks/useClick.d.ts

@@ -12,7 +12,7 @@ export interface UseClickProps {
    * Keyboard clicks work as normal.
    * @default 'click'
    */
-  event?: ('click' | 'mousedown' | 'mousedown-only') | undefined;
+  event?: 'click' | 'mousedown' | 'mousedown-only' | undefined;
   /**
    * Whether to toggle the open state with repeated clicks.
    * @default true
@@ -40,7 +40,7 @@ export interface UseClickProps {
    * The reason for the click.
    * @default REASONS.triggerPress
    */
-  reason?: (typeof REASONS.triggerPress | typeof REASONS.inputPress) | undefined;
+  reason?: typeof REASONS.triggerPress | typeof REASONS.inputPress | undefined;
 }
 /**
  * Opens or closes the floating element when clicking the reference element.

package/floating-ui-react/hooks/useClientPoint.d.ts

@@ -12,7 +12,7 @@ export interface UseClientPointProps {
    * floating element is also interactive.
    * @default 'both'
    */
-  axis?: ('x' | 'y' | 'both') | undefined;
+  axis?: 'x' | 'y' | 'both' | undefined;
 }
 /**
  * Positions the floating element relative to a client point (in the viewport),

package/floating-ui-react/hooks/useDismiss.d.ts

@@ -24,9 +24,11 @@ export interface UseDismissProps {
    * Whether to dismiss the floating element upon pressing the reference
    * element. You likely want to ensure the `move` option in the `useHover()`
    * Hook has been disabled when this is in use.
+   *
+   * A lazy getter invoked when handling reference press events.
    * @default false
    */
-  referencePress?: boolean | undefined;
+  referencePress?: (() => boolean) | undefined;
   /**
    * The type of event to use to determine a "press".
    * - `down` is `pointerdown` on mouse input, but special iOS-like touch handling on touch input.
@@ -47,33 +49,27 @@ export interface UseDismissProps {
    * ```
    * @default true
    */
-  outsidePress?: (boolean | ((event: MouseEvent | TouchEvent) => boolean)) | undefined;
+  outsidePress?: boolean | ((event: MouseEvent | TouchEvent) => boolean) | undefined;
   /**
    * The type of event to use to determine an outside "press".
    * - `intentional` requires the user to click outside intentionally, firing on `pointerup` for mouse, and requiring minimal `touchmove`s for touch.
    * - `sloppy` fires on `pointerdown` for mouse, while for touch it fires on `touchend` (within 1 second) or while scrolling away after `touchstart`.
    */
-  outsidePressEvent?: (PressType | {
+  outsidePressEvent?: PressType | {
     mouse: PressType;
     touch: PressType;
   } | (() => PressType | {
     mouse: PressType;
     touch: PressType;
-  })) | undefined;
-  /**
-   * Whether to dismiss the floating element upon scrolling an overflow
-   * ancestor.
-   * @default false
-   */
-  ancestorScroll?: boolean | undefined;
+  }) | undefined;
   /**
    * Determines whether event listeners bubble upwards through a tree of
    * floating elements.
    */
-  bubbles?: (boolean | {
+  bubbles?: boolean | {
     escapeKey?: boolean | undefined;
     outsidePress?: boolean | undefined;
-  }) | undefined;
+  } | undefined;
   /**
    * External FlatingTree to use when the one provided by context can't be used.
    */