@carbon/react
Version:
React components for the Carbon Design System
84 lines (83 loc) • 2.69 kB
TypeScript
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { type CSSProperties, type ReactElement, type RefObject } from 'react';
export declare const DIRECTION_LEFT = "left";
export declare const DIRECTION_TOP = "top";
export declare const DIRECTION_RIGHT = "right";
export declare const DIRECTION_BOTTOM = "bottom";
export interface Offset {
top: number;
left: number;
}
interface Container {
rect: DOMRect;
position: string;
}
export type MenuDirection = typeof DIRECTION_LEFT | typeof DIRECTION_TOP | typeof DIRECTION_RIGHT | typeof DIRECTION_BOTTOM;
export type MenuOffset = Offset | ((menuBody: HTMLElement, menuDirection: MenuDirection, triggerEl?: HTMLElement | null, flipped?: boolean) => Offset);
interface FloatingMenuProps {
/**
* Contents of the floating menu.
*/
children: ReactElement;
/**
* Whether the menu alignment should be flipped.
*/
flipped?: boolean;
/**
* Enable or disable focus trap behavior.
*/
focusTrap?: boolean;
/**
* Where to put the menu relative to the trigger.
*/
menuDirection?: MenuDirection;
/**
* The adjustment of the floating menu's position.
*/
menuOffset?: MenuOffset;
/**
* Callback when the menu body is mounted/unmounted.
*/
menuRef?: (menuBody: HTMLElement | null) => void;
/**
* Callback when the menu body has been placed.
*/
onPlace?: (menuBody: HTMLElement) => void;
/**
* CSS selector for the element to focus when the menu opens.
*/
selectorPrimaryFocus?: string;
/**
* Additional styles to apply to the menu.
*/
styles?: CSSProperties;
/**
* Function returning the element where the floating menu is rendered.
* @default () => document.body
*/
target?: () => Element;
/**
* The `ref` of the tooltip’s trigger element. It is assumed to be a
* `RefObject` pointing to an `HTMLElement`.
*/
triggerRef: RefObject<HTMLElement>;
/**
* Optional function to adjust orientation
*/
updateOrientation?: (params: {
menuSize: DOMRect;
refPosition: DOMRect | undefined;
direction: string;
offset: Offset;
scrollX: number;
scrollY: number;
container: Container;
}) => void;
}
export declare const FloatingMenu: ({ children, flipped, focusTrap, menuDirection, menuOffset, menuRef: externalMenuRef, onPlace, selectorPrimaryFocus, styles, target, triggerRef, updateOrientation, }: FloatingMenuProps) => any;
export {};