stream-chat-react
Version:
React components to create chat conversations or livestream style chat
69 lines (68 loc) • 3.3 kB
TypeScript
/// <reference types="react" />
import { autoUpdate, type Placement } from '@floating-ui/react';
export type PopperLikePlacement = Placement | 'auto' | 'auto-start' | 'auto-end';
type OffsetOpt = number | {
mainAxis?: number;
crossAxis?: number;
alignmentAxis?: number;
} | [crossAxis: number, mainAxis: number];
export type UsePopoverParams = {
placement?: PopperLikePlacement;
/** Add flip() when placement is not 'auto*' */
allowFlip?: boolean;
/** Keep in viewport; default true to match common popper setups */
allowShift?: boolean;
/** The floating UI is fitted to the available space (by constraining its max size) instead of letting it overflow; default false */
fitAvailableSpace?: boolean;
/** Offset (number, object, or [crossAxis, mainAxis] tuple) */
offset?: OffsetOpt;
/**
* Freeze behavior like Popper's eventListeners: { scroll:false, resize:false }.
* If true → no autoUpdate (you can call `update()` manually).
*/
freeze?: boolean;
/**
* Fine-grained control of autoUpdate triggers (only if freeze=false).
* Defaults match Popper's "disabled" example when all set to false.
*/
autoUpdateOptions?: Partial<Parameters<typeof autoUpdate>[3]>;
};
export declare function usePopoverPosition({ allowFlip, allowShift, autoUpdateOptions, fitAvailableSpace, freeze, offset, placement, }: UsePopoverParams): {
placement: Placement;
strategy: import("@floating-ui/utils").Strategy;
middlewareData: import("@floating-ui/core").MiddlewareData;
y: number;
x: number;
isPositioned: boolean;
update: () => void;
floatingStyles: import("react").CSSProperties;
refs: {
reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
floating: import("react").MutableRefObject<HTMLElement | null>;
setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
setFloating: (node: HTMLElement | null) => void;
} & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
elements: {
reference: import("@floating-ui/react-dom").ReferenceType | null;
floating: HTMLElement | null;
} & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
context: {
y: number;
x: number;
placement: Placement;
strategy: import("@floating-ui/utils").Strategy;
middlewareData: import("@floating-ui/core").MiddlewareData;
isPositioned: boolean;
update: () => void;
floatingStyles: import("react").CSSProperties;
open: boolean;
onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
events: import("@floating-ui/react").FloatingEvents;
dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
nodeId: string | undefined;
floatingId: string | undefined;
refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
};
};
export {};