@base-ui/react
Version:
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.
379 lines • 17.3 kB
TypeScript
import * as React from 'react';
import { ReactStore } from '@base-ui/utils/store';
import { InlineRectCoords, PopupStoreContext, PopupStoreState, type PopupTriggerStoreKeys } from "../../utils/popups/index.js";
import { type PreviewCardRoot } from "../root/PreviewCardRoot.js";
import type { AdaptiveOriginMiddleware } from "../../utils/adaptiveOriginConstants.js";
export type State<Payload> = PopupStoreState<Payload> & {
instantType: 'dismiss' | 'focus' | undefined;
adaptiveOrigin: AdaptiveOriginMiddleware | undefined;
closeDelay: number;
};
export type Context = PopupStoreContext<PreviewCardRoot.ChangeEventDetails> & {
inlineRectCoordsRef: React.MutableRefObject<InlineRectCoords | undefined>;
};
declare const selectors: {
open: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => boolean;
mounted: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => boolean;
transitionStatus: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
triggerCount: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => number;
preventUnmountingOnClose: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => boolean;
payload: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => unknown;
activeTriggerId: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => string | null;
activeTriggerElement: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => Element | null;
popupId: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => string | undefined;
isTriggerActive: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}, triggerId: string | undefined) => boolean;
isOpenedByTrigger: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}, triggerId: string | undefined) => boolean;
isMountedByTrigger: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}, triggerId: string | undefined) => boolean;
triggerProps: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}, isActive: boolean) => import("../../index.js").HTMLProps;
triggerPopupId: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}, triggerId: string | undefined) => string | undefined;
popupProps: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => import("../../index.js").HTMLProps;
popupElement: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => HTMLElement | null;
positionerElement: (state: {
open: boolean;
readonly openProp: boolean | undefined;
mounted: boolean;
transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
floatingId: string | undefined;
triggerCount: number;
preventUnmountingOnClose: boolean;
payload: unknown;
activeTriggerId: string | null;
activeTriggerElement: Element | null;
readonly triggerIdProp: string | null | undefined;
popupElement: HTMLElement | null;
positionerElement: HTMLElement | null;
activeTriggerProps: import("../../index.js").HTMLProps;
inactiveTriggerProps: import("../../index.js").HTMLProps;
popupProps: import("../../index.js").HTMLProps;
}) => HTMLElement | null;
instantType: (state: State<unknown>) => "dismiss" | "focus" | undefined;
adaptiveOrigin: (state: State<unknown>) => AdaptiveOriginMiddleware | undefined;
closeDelay: (state: State<unknown>) => number;
};
type Selectors = typeof selectors;
/**
* The store view that detached handle-backed triggers read from. Both the real `PreviewCardStore`
* and the inert fallback store satisfy it, so a trigger can read from whichever store the handle
* currently exposes. Narrowed to the trigger-data members a trigger uses; it exposes no popup-open
* mutator, so the inert fallback can be a plain `NullStore`.
*/
export type PreviewCardHandleStore<Payload> = Pick<PreviewCardStore<Payload>, PopupTriggerStoreKeys>;
export declare class PreviewCardStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, Selectors> {
constructor(initialState: Partial<State<Payload>>, floatingId: string | undefined, nested: boolean);
setOpen: (nextOpen: boolean, eventDetails: Omit<PreviewCardRoot.ChangeEventDetails, 'preventUnmountOnClose'>) => void;
}
/**
* Creates the inert fallback store used by detached handle-backed triggers while no
* `PreviewCard.Root` is attached. It preserves a preview-card-specific trigger registry in context
* so detached triggers can register before migrating to the live root store.
*/
export declare function createNullPreviewCardStore<Payload>(): PreviewCardHandleStore<Payload>;
export {};