@wikimedia/codex/dist/types/composables/useFloatingMenu.d.ts

Codex Design System for Wikimedia

import { Ref } from 'vue';
import { MaybeElement } from '@floating-ui/vue';
import { FloatingMenuOptions } from '../types';
import CdxMenu from '../components/menu/Menu.vue';
/**
 * Implements the useFloating() composable from FloatingUI for menu components.
 *
 * This composable will:
 * - Ensure the menu is always visually attached to its triggering element
 * - Ensure the menu is always the same width as its triggering element
 * - Ensure the menu is positioned below the triggering element when there is enough space,
 *   and it positioned above the triggering element otherwise.
 * - Ensure the menu does not extend past the edge of the viewport
 * - Ensure the menu is hidden if the triggering element is scrolled out of view
 * - Ensure the menu and the reference element don't have rounded corners where they touch.
 *     - If you want the menu and the reference element to have rounded corners on the sides
 *       where they don't touch, you must set a `border-radius` on *all* corners. This composable
 *       will then override the `border-radius` to 0 for the corners that should not be rounded.
 *
 * @param referenceElement The ref of the element the menu is visually attached to
 * @param menu The menu ref
 * @param opt (optional) of type {FloatingMenuOptions} to pass any overrides or similar
 */
export default function useFloatingMenu(referenceElement: Ref<MaybeElement<HTMLElement>>, menu: Ref<InstanceType<typeof CdxMenu> | undefined>, opt?: FloatingMenuOptions): void;