bits-ui/dist/bits/menu/menu.svelte.d.ts

The headless components for Svelte.

import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
import { Context } from "runed";
import { CustomEventDispatcher } from "../../internal/events.js";
import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
import type { Direction } from "../../shared/index.js";
import { IsUsingKeyboard } from "../../index.js";
import type { KeyboardEventHandler, PointerEventHandler } from "svelte/elements";
import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
export declare const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
export declare const MenuCheckboxGroupContext: Context<MenuCheckboxGroupState>;
type MenuVariant = "context-menu" | "dropdown-menu" | "menubar";
export interface MenuRootStateOpts extends ReadableBoxedValues<{
    dir: Direction;
    variant: MenuVariant;
}> {
    onClose: AnyFn;
}
export declare const MenuOpenEvent: CustomEventDispatcher<unknown>;
export declare const menuAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["trigger", "content", "sub-trigger", "item", "group", "group-heading", "checkbox-group", "checkbox-item", "radio-group", "radio-item", "separator", "sub-content", "arrow"]>;
export declare class MenuRootState {
    static create(opts: MenuRootStateOpts): MenuRootState;
    readonly opts: MenuRootStateOpts;
    readonly isUsingKeyboard: IsUsingKeyboard;
    ignoreCloseAutoFocus: boolean;
    isPointerInTransit: boolean;
    constructor(opts: MenuRootStateOpts);
    getBitsAttr: typeof menuAttrs.getAttr;
}
interface MenuMenuStateOpts extends WritableBoxedValues<{
    open: boolean;
}>, ReadableBoxedValues<{
    onOpenChangeComplete: OnChangeFn<boolean>;
}> {
}
export declare class MenuMenuState {
    static create(opts: MenuMenuStateOpts, root: MenuRootState): MenuMenuState;
    readonly opts: MenuMenuStateOpts;
    readonly root: MenuRootState;
    readonly parentMenu: MenuMenuState | null;
    contentId: import("svelte-toolbelt").ReadableBox<string>;
    contentNode: HTMLElement | null;
    triggerNode: HTMLElement | null;
    constructor(opts: MenuMenuStateOpts, root: MenuRootState, parentMenu: MenuMenuState | null);
    toggleOpen(): void;
    onOpen(): void;
    onClose(): void;
}
interface MenuContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
    loop: boolean;
    onCloseAutoFocus: (event: Event) => void;
}> {
    isSub?: boolean;
}
export declare class MenuContentState {
    #private;
    static create(opts: MenuContentStateOpts): MenuContentState;
    readonly opts: MenuContentStateOpts;
    readonly parentMenu: MenuMenuState;
    readonly rovingFocusGroup: RovingFocusGroup;
    readonly domContext: DOMContext;
    readonly attachment: RefAttachment;
    search: string;
    mounted: boolean;
    constructor(opts: MenuContentStateOpts, parentMenu: MenuMenuState);
    onCloseAutoFocus: (e: Event) => void;
    handleTabKeyDown(e: BitsKeyboardEvent): void;
    onkeydown(e: BitsKeyboardEvent): void;
    onblur(e: BitsFocusEvent): void;
    onfocus(_: BitsFocusEvent): void;
    onItemEnter(): boolean;
    onItemLeave(e: BitsPointerEvent): void;
    onTriggerLeave(): boolean;
    onOpenAutoFocus: (e: Event) => void;
    handleInteractOutside(e: PointerEvent): void;
    readonly snippetProps: {
        open: boolean;
    };
    readonly props: {
        readonly id: string;
        readonly role: "menu";
        readonly "aria-orientation": "horizontal" | "vertical";
        readonly "data-state": "open" | "closed";
        readonly onkeydown: (e: BitsKeyboardEvent) => void;
        readonly onblur: (e: BitsFocusEvent) => void;
        readonly onfocus: (_: BitsFocusEvent) => void;
        readonly dir: Direction;
        readonly style: {
            readonly pointerEvents: "auto";
        };
    };
    readonly popperProps: {
        onCloseAutoFocus: (e: Event) => void;
    };
}
interface MenuItemSharedStateOpts extends WithRefOpts, ReadableBoxedValues<{
    disabled: boolean;
}> {
}
declare class MenuItemSharedState {
    #private;
    readonly opts: MenuItemSharedStateOpts;
    readonly content: MenuContentState;
    readonly attachment: RefAttachment;
    constructor(opts: MenuItemSharedStateOpts, content: MenuContentState);
    onpointermove(e: BitsPointerEvent): void;
    onpointerleave(e: BitsPointerEvent): void;
    onfocus(e: BitsFocusEvent): void;
    onblur(e: BitsFocusEvent): void;
    readonly props: {
        readonly id: string;
        readonly tabindex: -1;
        readonly role: "menuitem";
        readonly "aria-disabled": "true" | "false";
        readonly "data-disabled": "" | undefined;
        readonly "data-highlighted": "" | undefined;
        readonly onpointermove: (e: BitsPointerEvent) => void;
        readonly onpointerleave: (e: BitsPointerEvent) => void;
        readonly onfocus: (e: BitsFocusEvent) => void;
        readonly onblur: (e: BitsFocusEvent) => void;
    };
}
type MenuItemCombinedProps = MenuItemSharedStateOpts & MenuItemStateOpts;
interface MenuItemStateOpts extends ReadableBoxedValues<{
    onSelect: AnyFn;
    closeOnSelect: boolean;
}> {
}
export declare class MenuItemState {
    #private;
    static create(opts: MenuItemCombinedProps): MenuItemState;
    readonly opts: MenuItemStateOpts;
    readonly item: MenuItemSharedState;
    readonly root: MenuRootState;
    constructor(opts: MenuItemStateOpts, item: MenuItemSharedState);
    onkeydown(e: BitsKeyboardEvent): void;
    onclick(_: BitsMouseEvent): void;
    onpointerup(e: BitsPointerEvent): void;
    onpointerdown(_: BitsPointerEvent): void;
    readonly props: {
        readonly id: string;
        readonly tabindex: -1;
        readonly role: "menuitem";
        readonly "aria-disabled": "true" | "false";
        readonly "data-disabled": "" | undefined;
        readonly "data-highlighted": "" | undefined;
        readonly onpointermove: (e: BitsPointerEvent) => void;
        readonly onpointerleave: (e: BitsPointerEvent) => void;
        readonly onfocus: (e: BitsFocusEvent) => void;
        readonly onblur: (e: BitsFocusEvent) => void;
    } & {
        onclick: (_: BitsMouseEvent) => void;
        onpointerdown: (_: BitsPointerEvent) => void;
        onpointerup: (e: BitsPointerEvent) => void;
        onkeydown: (e: BitsKeyboardEvent) => void;
    } & {
        style?: string;
    };
}
interface MenuSubTriggerStateOpts extends MenuItemSharedStateOpts, Pick<MenuItemStateOpts, "onSelect"> {
}
export declare class MenuSubTriggerState {
    #private;
    static create(opts: MenuSubTriggerStateOpts): MenuSubTriggerState;
    readonly opts: MenuSubTriggerStateOpts;
    readonly item: MenuItemSharedState;
    readonly content: MenuContentState;
    readonly submenu: MenuMenuState;
    readonly attachment: RefAttachment;
    constructor(opts: MenuSubTriggerStateOpts, item: MenuItemSharedState, content: MenuContentState, submenu: MenuMenuState);
    onpointermove(e: BitsPointerEvent): void;
    onpointerleave(e: BitsPointerEvent): void;
    onkeydown(e: BitsKeyboardEvent): void;
    onclick(e: BitsMouseEvent): void;
    readonly props: {
        readonly id: string;
        readonly tabindex: -1;
        readonly role: "menuitem";
        readonly "aria-disabled": "true" | "false";
        readonly "data-disabled": "" | undefined;
        readonly "data-highlighted": "" | undefined;
        readonly onpointermove: (e: BitsPointerEvent) => void;
        readonly onpointerleave: (e: BitsPointerEvent) => void;
        readonly onfocus: (e: BitsFocusEvent) => void;
        readonly onblur: (e: BitsFocusEvent) => void;
    } & {
        "aria-haspopup": string;
        "aria-expanded": "true" | "false";
        "data-state": "open" | "closed";
        "aria-controls": string | undefined;
        onclick: (e: BitsMouseEvent) => void;
        onpointermove: (e: BitsPointerEvent) => void;
        onpointerleave: (e: BitsPointerEvent) => void;
        onkeydown: (e: BitsKeyboardEvent) => void;
    } & {
        style?: string;
    };
}
interface MenuCheckboxItemStateOpts extends WritableBoxedValues<{
    checked: boolean;
    indeterminate: boolean;
}>, ReadableBoxedValues<{
    value: string;
}> {
}
export declare class MenuCheckboxItemState {
    static create(opts: MenuItemCombinedProps & MenuCheckboxItemStateOpts, checkboxGroup: MenuCheckboxGroupState | null): MenuCheckboxItemState;
    readonly opts: MenuCheckboxItemStateOpts;
    readonly item: MenuItemState;
    readonly group: MenuCheckboxGroupState | null;
    constructor(opts: MenuCheckboxItemStateOpts, item: MenuItemState, group?: MenuCheckboxGroupState | null);
    toggleChecked(): void;
    readonly snippetProps: {
        checked: boolean;
        indeterminate: boolean;
    };
    readonly props: {
        readonly role: "menuitemcheckbox";
        readonly "aria-checked": "true" | "false" | "mixed";
        readonly "data-state": "checked" | "indeterminate" | "unchecked";
        readonly id: string;
        readonly tabindex: -1;
        readonly "aria-disabled": "true" | "false";
        readonly "data-disabled": "" | undefined;
        readonly "data-highlighted": "" | undefined;
        readonly onpointermove: (e: BitsPointerEvent) => void;
        readonly onpointerleave: (e: BitsPointerEvent) => void;
        readonly onfocus: (e: BitsFocusEvent) => void;
        readonly onblur: (e: BitsFocusEvent) => void;
        readonly onclick: (_: BitsMouseEvent) => void;
        readonly onpointerdown: (_: BitsPointerEvent) => void;
        readonly onpointerup: (e: BitsPointerEvent) => void;
        readonly onkeydown: (e: BitsKeyboardEvent) => void;
        readonly style?: string;
    };
}
interface MenuGroupStateOpts extends WithRefOpts {
}
export declare class MenuGroupState {
    static create(opts: MenuGroupStateOpts): MenuGroupState | MenuRadioGroupState;
    readonly opts: MenuGroupStateOpts;
    readonly root: MenuRootState;
    readonly attachment: RefAttachment;
    groupHeadingId: string | undefined;
    constructor(opts: MenuGroupStateOpts, root: MenuRootState);
    readonly props: {
        readonly id: string;
        readonly role: "group";
        readonly "aria-labelledby": string | undefined;
    };
}
interface MenuGroupHeadingStateOpts extends WithRefOpts {
}
export declare class MenuGroupHeadingState {
    static create(opts: MenuGroupHeadingStateOpts): MenuGroupHeadingState;
    readonly opts: MenuGroupHeadingStateOpts;
    readonly group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState;
    readonly attachment: RefAttachment;
    constructor(opts: MenuGroupHeadingStateOpts, group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState);
    readonly props: {
        readonly id: string;
        readonly role: "group";
    };
}
interface MenuSeparatorStateOpts extends WithRefOpts {
}
export declare class MenuSeparatorState {
    static create(opts: MenuSeparatorStateOpts): MenuSeparatorState;
    readonly opts: MenuSeparatorStateOpts;
    readonly root: MenuRootState;
    readonly attachment: RefAttachment;
    constructor(opts: MenuSeparatorStateOpts, root: MenuRootState);
    readonly props: {
        readonly id: string;
        readonly role: "group";
    };
}
export declare class MenuArrowState {
    static create(): MenuArrowState;
    readonly root: MenuRootState;
    constructor(root: MenuRootState);
    readonly props: {
        readonly [x: string]: "";
    };
}
interface MenuRadioGroupStateOpts extends WithRefOpts, WritableBoxedValues<{
    value: string;
}> {
}
export declare class MenuRadioGroupState {
    static create(opts: MenuRadioGroupStateOpts): MenuGroupState | MenuRadioGroupState;
    readonly opts: MenuRadioGroupStateOpts;
    readonly content: MenuContentState;
    readonly attachment: RefAttachment;
    groupHeadingId: string | null;
    root: MenuRootState;
    constructor(opts: MenuRadioGroupStateOpts, content: MenuContentState);
    setValue(v: string): void;
    readonly props: {
        readonly id: string;
        readonly role: "group";
        readonly "aria-labelledby": string | null;
    };
}
interface MenuRadioItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
    value: string;
    closeOnSelect: boolean;
}> {
}
export declare class MenuRadioItemState {
    static create(opts: MenuRadioItemStateOpts & MenuItemCombinedProps): MenuRadioItemState;
    readonly opts: MenuRadioItemStateOpts;
    readonly item: MenuItemState;
    readonly group: MenuRadioGroupState;
    readonly attachment: RefAttachment;
    readonly isChecked: boolean;
    constructor(opts: MenuRadioItemStateOpts, item: MenuItemState, group: MenuRadioGroupState);
    selectValue(): void;
    readonly props: {
        readonly role: "menuitemradio";
        readonly "aria-checked": "true" | "false" | "mixed";
        readonly "data-state": "checked" | "indeterminate" | "unchecked";
        readonly id: string;
        readonly tabindex: -1;
        readonly "aria-disabled": "true" | "false";
        readonly "data-disabled": "" | undefined;
        readonly "data-highlighted": "" | undefined;
        readonly onpointermove: (e: BitsPointerEvent) => void;
        readonly onpointerleave: (e: BitsPointerEvent) => void;
        readonly onfocus: (e: BitsFocusEvent) => void;
        readonly onblur: (e: BitsFocusEvent) => void;
        readonly onclick: (_: BitsMouseEvent) => void;
        readonly onpointerdown: (_: BitsPointerEvent) => void;
        readonly onpointerup: (e: BitsPointerEvent) => void;
        readonly onkeydown: (e: BitsKeyboardEvent) => void;
        readonly style?: string;
    };
}
interface DropdownMenuTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
    disabled: boolean;
}> {
}
export declare class DropdownMenuTriggerState {
    #private;
    static create(opts: DropdownMenuTriggerStateOpts): DropdownMenuTriggerState;
    readonly opts: DropdownMenuTriggerStateOpts;
    readonly parentMenu: MenuMenuState;
    readonly attachment: RefAttachment;
    constructor(opts: DropdownMenuTriggerStateOpts, parentMenu: MenuMenuState);
    onpointerdown: PointerEventHandler<HTMLElement>;
    onpointerup: PointerEventHandler<HTMLElement>;
    onkeydown: KeyboardEventHandler<HTMLElement>;
    readonly props: {
        readonly id: string;
        readonly disabled: boolean;
        readonly "aria-haspopup": "menu";
        readonly "aria-expanded": "true" | "false";
        readonly "aria-controls": string | undefined;
        readonly "data-disabled": "" | undefined;
        readonly "data-state": "open" | "closed";
        readonly onpointerdown: PointerEventHandler<HTMLElement>;
        readonly onpointerup: PointerEventHandler<HTMLElement>;
        readonly onkeydown: KeyboardEventHandler<HTMLElement>;
    };
}
interface ContextMenuTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
    disabled: boolean;
}> {
}
export declare class ContextMenuTriggerState {
    #private;
    static create(opts: ContextMenuTriggerStateOpts): ContextMenuTriggerState;
    readonly opts: ContextMenuTriggerStateOpts;
    readonly parentMenu: MenuMenuState;
    readonly attachment: RefAttachment;
    virtualElement: import("svelte-toolbelt").WritableBox<{
        getBoundingClientRect: () => DOMRect;
    }>;
    constructor(opts: ContextMenuTriggerStateOpts, parentMenu: MenuMenuState);
    oncontextmenu(e: BitsMouseEvent): void;
    onpointerdown(e: BitsPointerEvent): void;
    onpointermove(e: BitsPointerEvent): void;
    onpointercancel(e: BitsPointerEvent): void;
    onpointerup(e: BitsPointerEvent): void;
    readonly props: {
        readonly id: string;
        readonly disabled: boolean;
        readonly "data-disabled": "" | undefined;
        readonly "data-state": "open" | "closed";
        readonly "data-context-menu-trigger": "";
        readonly tabindex: -1;
        readonly onpointerdown: (e: BitsPointerEvent) => void;
        readonly onpointermove: (e: BitsPointerEvent) => void;
        readonly onpointercancel: (e: BitsPointerEvent) => void;
        readonly onpointerup: (e: BitsPointerEvent) => void;
        readonly oncontextmenu: (e: BitsMouseEvent) => void;
    };
}
interface MenuCheckboxGroupStateOpts extends WithRefOpts, ReadableBoxedValues<{
    onValueChange: (value: string[]) => void;
}>, WritableBoxedValues<{
    value: string[];
}> {
}
export declare class MenuCheckboxGroupState {
    static create(opts: MenuCheckboxGroupStateOpts): MenuCheckboxGroupState;
    readonly opts: MenuCheckboxGroupStateOpts;
    readonly content: MenuContentState;
    readonly root: MenuRootState;
    readonly attachment: RefAttachment;
    groupHeadingId: string | null;
    constructor(opts: MenuCheckboxGroupStateOpts, content: MenuContentState);
    addValue(checkboxValue: string | undefined): void;
    removeValue(checkboxValue: string | undefined): void;
    readonly props: {
        readonly id: string;
        readonly role: "group";
        readonly "aria-labelledby": string | null;
    };
}
export declare class MenuSubmenuState {
    static create(opts: MenuMenuStateOpts): MenuMenuState;
}
export {};