eewing
431 lines
17 KiB
TypeScript
431 lines
17 KiB
TypeScript
import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues, type ReadableBox } 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 "../utilities/is-using-keyboard/is-using-keyboard.svelte.js";
|
|
import type { KeyboardEventHandler, PointerEventHandler, MouseEventHandler } from "svelte/elements";
|
|
import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
|
|
import { PresenceManager } from "../../internal/presence-manager.svelte.js";
|
|
export declare const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
|
|
export declare const CONTEXT_MENU_CONTENT_ATTR = "data-context-menu-content";
|
|
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: ReadableBox<string>;
|
|
contentNode: HTMLElement | null;
|
|
contentPresence: PresenceManager;
|
|
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;
|
|
handleInteractOutside(e: PointerEvent): void;
|
|
get shouldRender(): boolean;
|
|
readonly snippetProps: {
|
|
open: boolean;
|
|
};
|
|
readonly props: {
|
|
readonly id: string;
|
|
readonly role: "menu";
|
|
readonly "aria-orientation": "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 contain: "layout style";
|
|
};
|
|
};
|
|
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"> {
|
|
openDelay: ReadableBox<number>;
|
|
}
|
|
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);
|
|
onclick: MouseEventHandler<HTMLElement>;
|
|
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 onclick: MouseEventHandler<HTMLElement>;
|
|
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 {};
|