@react-md/menu/types/MenuVisibilityProvider.d.ts

Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines

import type { ReactElement, ReactNode } from "react";
import type { HoverModeHookReturnValue } from "@react-md/utils";
/** @remarks \@since 5.0.0 */
export declare type MenuVisibilityContext = Pick<HoverModeHookReturnValue, "visible" | "setVisible">;
/**
 * This hook allows you control the visibility of a parent menu. The main
 * use-case for this hook is adding a custom sheet header/footer.
 *
 * @example
 * Simple Example
 * ```tsx
 * function SheetFooter(): ReactElement {
 *   const { setVisible } = useMenuVisibility();
 *
 *   return (
 *     <DialogFooter>
 *       <Button onClick={() => setVisible(false)}>Cancel</Button>
 *     </DialogFooter>
 *   );
 * }
 * ```
 *
 * @returns the {@link MenuVisibilityContext}
 * @remarks \@since 5.0.0
 */
export declare function useMenuVisibility(): Readonly<MenuVisibilityContext>;
/**
 * @internal
 * @remarks \@since 5.0.0
 */
export interface MenuVisibilityProviderProps extends MenuVisibilityContext {
    children: ReactNode;
}
/**
 * @internal
 * @remarks \@since 5.0.0
 */
export declare function MenuVisibilityProvider({ visible, setVisible, children, }: MenuVisibilityProviderProps): ReactElement;