import { default as React } from 'react'; import { MiddlewareModifier } from '@viasat/beam-shared/components/floatingui'; import { Placement, AutoPlacementOptions, FlipOptions, ShiftOptions, HideOptions, OffsetOptions, UseHoverProps, UseClickProps, UseDismissProps, UseFocusProps, FloatingPortalProps, UseTransitionStylesProps, UseFloatingOptions, UseRoleProps, FloatingRootContext, UseListNavigationProps, UseTypeaheadProps, SizeOptions } from '@floating-ui/react'; import { FocusManagerProps } from '../FloatingUI/FloatingUI.content'; import { ArrowOptions } from '../FloatingUI/FloatingUI.arrow'; import { UseSelectedProps } from './useSelected'; export interface FloatingUIProps { /** * Specify the location of the floating content * * @default 'top' * */ placement?: Placement; /** * Specify if the floating content should automatically choose the placement that has the most space. * [AutoPlacementOptions](https://floating-ui.com/docs/autoplacement#options) * */ autoPlacement?: boolean | AutoPlacementOptions; /** * Specify if the floating content should flip to the opposite side if there is not enough space. * [FlipOptions](https://floating-ui.com/docs/flip#options) * * Cannot be used with `autoPlacement` */ flip?: boolean | FlipOptions; /** * Allow shifting of the floating content. * [ShiftOptions](https://floating-ui.com/docs/shift#options) * */ shift?: boolean | ShiftOptions; /** * Specify if the floating content should auto-hide when the anchor is not in view * [HideOptions](https://floating-ui.com/docs/hide#options) */ autoHiding?: boolean | HideOptions; /** * Constrain the floating element's size to fit within available space. * [SizeOptions](https://floating-ui.com/docs/size#options) */ size?: boolean | SizeOptions; /** * Middleware functions to modify the behavior of the floating element */ middleware?: MiddlewareModifier; /** * Specify the options for the arrow */ arrow?: ArrowOptions; /** * Specify the offset * * @link https://floating-ui.com/docs/offset | Offset Options */ offset?: OffsetOptions; /** * Specify the display state */ open?: boolean; /** * Specify the default open state */ defaultOpen?: boolean; /** * Enable hover interaction */ openOnHover?: boolean | UseHoverProps; /** * Enable click interaction */ openOnClick?: boolean | UseClickProps; /** * Enable focus interaction */ openOnFocus?: boolean | UseFocusProps; /** * Enable selection interaction */ openOnSelected?: boolean | UseSelectedProps; /** * Specify if the floating element is portalled */ portalled?: boolean | FloatingPortalProps; /** * Configure the focus manager * * If nothing is specified, the focus manager will not be rendered * * [FloatingFocusManagerProps](https://floating-ui.com/docs/floatingfocusmanager#props) */ focusConfiguration?: boolean | FocusManagerProps; /** * Callback function that receives change in visibility state of the FloatingUI * * * onOpenChange * * */ onOpenChange?: UseFloatingOptions['onOpenChange']; /** * Transition configuration */ transitionConfig?: UseTransitionStylesProps; /** * Adds base screen reader props to the reference and floating elements for a given `role` */ role?: UseRoleProps; /** * Specify the floating ui root context, if any */ rootContext?: FloatingRootContext; /** * Adds list navigation support to the floating list, if any */ listNavigation?: UseListNavigationProps; /** * Adds typeahead support to the floating list, if any */ typeahead?: UseTypeaheadProps; /** * Configure dismiss behaviour (escape key, outside press, etc.) */ dismiss?: UseDismissProps; } export declare const useBmFloatingUI: ({ defaultOpen, open: controlledOpen, placement, offset: _offset, onOpenChange: setControlledOpen, openOnClick, openOnHover, openOnFocus, openOnSelected, focusConfiguration, listNavigation, typeahead, dismiss, middleware, autoPlacement, flip, shift, autoHiding, size, arrow, transitionConfig, portalled, role, rootContext, }: FloatingUIProps) => { portalled: boolean | FloatingPortalProps | undefined; focusConfiguration: boolean | FocusManagerProps | undefined; transitionConfig: UseTransitionStylesProps | undefined; labelId: string | undefined; descriptionId: string | undefined; arrow: ArrowOptions | undefined; setLabelId: React.Dispatch>; setDescriptionId: React.Dispatch>; setArrowEl: React.Dispatch>; nodeId: string; placement: Placement; strategy: import('@floating-ui/utils').Strategy; middlewareData: import('@floating-ui/core').MiddlewareData; x: number; y: number; isPositioned: boolean; update: () => void; floatingStyles: React.CSSProperties; refs: { reference: React.MutableRefObject; floating: React.MutableRefObject; setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void; setFloating: (node: HTMLElement | null) => void; } & import('@floating-ui/react').ExtendedRefs; elements: { reference: import('@floating-ui/react-dom').ReferenceType | null; floating: HTMLElement | null; } & import('@floating-ui/react').ExtendedElements; context: { x: number; y: number; placement: Placement; strategy: import('@floating-ui/utils').Strategy; middlewareData: import('@floating-ui/core').MiddlewareData; isPositioned: boolean; update: () => void; floatingStyles: React.CSSProperties; open: boolean; onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void; events: import('@floating-ui/react').FloatingEvents; dataRef: React.MutableRefObject; nodeId: string | undefined; floatingId: string; refs: import('@floating-ui/react').ExtendedRefs; elements: import('@floating-ui/react').ExtendedElements; }; getReferenceProps: (userProps?: React.HTMLProps) => Record; getFloatingProps: (userProps?: React.HTMLProps) => Record; getItemProps: (userProps?: Omit, "selected" | "active"> & { active?: boolean; selected?: boolean; }) => Record; open: boolean; setOpen: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void; }; export type BmFloatingContext = ReturnType | null; export declare const BmFloatingUIContext: React.Context; export declare const useBmFloatingUIContext: () => { portalled: boolean | FloatingPortalProps | undefined; focusConfiguration: boolean | FocusManagerProps | undefined; transitionConfig: UseTransitionStylesProps | undefined; labelId: string | undefined; descriptionId: string | undefined; arrow: ArrowOptions | undefined; setLabelId: React.Dispatch>; setDescriptionId: React.Dispatch>; setArrowEl: React.Dispatch>; nodeId: string; placement: Placement; strategy: import('@floating-ui/utils').Strategy; middlewareData: import('@floating-ui/core').MiddlewareData; x: number; y: number; isPositioned: boolean; update: () => void; floatingStyles: React.CSSProperties; refs: { reference: React.MutableRefObject; floating: React.MutableRefObject; setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void; setFloating: (node: HTMLElement | null) => void; } & import('@floating-ui/react').ExtendedRefs; elements: { reference: import('@floating-ui/react-dom').ReferenceType | null; floating: HTMLElement | null; } & import('@floating-ui/react').ExtendedElements; context: { x: number; y: number; placement: Placement; strategy: import('@floating-ui/utils').Strategy; middlewareData: import('@floating-ui/core').MiddlewareData; isPositioned: boolean; update: () => void; floatingStyles: React.CSSProperties; open: boolean; onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void; events: import('@floating-ui/react').FloatingEvents; dataRef: React.MutableRefObject; nodeId: string | undefined; floatingId: string; refs: import('@floating-ui/react').ExtendedRefs; elements: import('@floating-ui/react').ExtendedElements; }; getReferenceProps: (userProps?: React.HTMLProps) => Record; getFloatingProps: (userProps?: React.HTMLProps) => Record; getItemProps: (userProps?: Omit, "selected" | "active"> & { active?: boolean; selected?: boolean; }) => Record; open: boolean; setOpen: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void; };