@base-ui-components/react/floating-ui-react/components/FloatingPortal.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
import { useRenderElement } from "../../utils/useRenderElement.js";
import type { BaseUIComponentProps } from "../../utils/types.js";
type FocusManagerState = null | {
  modal: boolean;
  open: boolean;
  onOpenChange(open: boolean, data?: {
    reason?: string;
    event?: Event;
  }): 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>;
  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;
  componentProps?: useRenderElement.ComponentProps<any>;
  elementProps?: React.HTMLAttributes<HTMLDivElement>;
  elementState?: Record<string, unknown>;
}
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<FloatingPortal.Props<any> & {
  renderGuards?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
export declare namespace FloatingPortal {
  interface Props<State> extends BaseUIComponentProps<'div', State> {
    /**
     * A parent element to render the portal element into.
     */
    container?: UseFloatingPortalNodeProps['container'];
  }
}
export {};