UNPKG

@melt-ui/svelte

Version:
228 lines (227 loc) 17.9 kB
/// <reference types="svelte" /> import type { CreateDropdownMenuProps } from './types.js'; export declare function createDropdownMenu(props?: CreateDropdownMenuProps): { ids: import("../../internal/helpers/index.js").ToWritableStores<{ menu: string; trigger: string; }>; elements: { trigger: import("../../internal/helpers/index.js").MeltElement<[import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean>>, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<string>>, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<string>>], (node: HTMLElement) => import("../../internal/types.js").MeltActionReturn<"keydown" | "pointerdown">, ([$rootOpen, $rootMenuId, $rootTriggerId]: [boolean, string, string]) => { readonly 'aria-controls': string; readonly 'aria-expanded': boolean; readonly 'data-state': "open" | "closed"; readonly id: string; readonly tabindex: 0; }, string>; menu: import("../../internal/helpers/index.js").MeltElement<[import("svelte/store").Readable<boolean>, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean>>, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<HTMLElement | null>>, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<string | HTMLElement | null | undefined>>, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<string>>, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<string>>], (node: HTMLElement) => import("../../internal/types.js").MeltActionReturn<"keydown">, ([$isVisible, $rootOpen, $rootActiveTrigger, $portal, $rootMenuId, $rootTriggerId,]: [boolean, boolean, HTMLElement | null, string | HTMLElement | null | undefined, string, string]) => { readonly role: "menu"; readonly hidden: true | undefined; readonly style: string | undefined; readonly id: string; readonly 'aria-labelledby': string; readonly 'data-state': "open" | "closed"; readonly 'data-portal': "" | undefined; readonly tabindex: -1; }, string>; overlay: import("../../internal/helpers/index.js").MeltElement<[import("svelte/store").Readable<boolean>], <Node_1 extends any>(node: HTMLElement) => { destroy(): void; }, ([$isVisible]: [boolean]) => { readonly hidden: true | undefined; readonly tabindex: -1; readonly style: string; readonly 'aria-hidden': "true"; readonly 'data-state': "open" | "closed"; }, string>; item: import("../../internal/helpers/index.js").MeltElement<import("svelte/store").Stores | undefined, (node: HTMLElement) => import("../../internal/types.js").MeltActionReturn<"click" | "focusin" | "focusout" | "keydown" | "pointerdown" | "pointerleave" | "pointermove">, () => { readonly role: "menuitem"; readonly tabindex: -1; readonly 'data-orientation': "vertical"; }, string>; group: import("../../internal/helpers/index.js").MeltElement<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => (groupId: string) => { readonly role: "group"; readonly 'aria-labelledby': string; }, string>; groupLabel: import("../../internal/helpers/index.js").MeltElement<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => (groupId: string) => { readonly id: string; }, string>; arrow: import("../../internal/helpers/index.js").MeltElement<import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<number | undefined>>, import("svelte/action").Action<any, any, Record<never, any>>, ($arrowSize: number | undefined) => { readonly 'data-arrow': true; readonly style: string; }, string>; separator: import("../../internal/helpers/index.js").MeltElement<[import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<import("../../internal/types.js").Orientation>>, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean>>], import("svelte/action").Action<any, any, Record<never, any>>, ([$orientation, $decorative]: [import("../../internal/types.js").Orientation, boolean]) => { readonly role: "none" | "separator"; readonly 'aria-orientation': "vertical" | undefined; readonly 'aria-hidden': boolean; readonly 'data-orientation': import("../../internal/types.js").Orientation; }, "separator">; }; states: { open: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean>>; }; builders: { createCheckboxItem: (props?: import("../menu/types.js")._CheckboxItemProps | undefined) => { elements: { checkboxItem: import("../../internal/helpers/index.js").MeltElement<[{ update: (updater: import("svelte/store").Updater<boolean | "indeterminate">, sideEffect?: ((newValue: boolean | "indeterminate") => void) | undefined) => void; set: (this: void, value: boolean | "indeterminate") => void; subscribe(this: void, run: import("svelte/store").Subscriber<boolean | "indeterminate">, invalidate?: import("svelte/store").Invalidator<boolean | "indeterminate"> | undefined): import("svelte/store").Unsubscriber; get: () => boolean | "indeterminate"; destroy?: (() => void) | undefined; }, import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("../../internal/types.js").MeltActionReturn<"click" | "focusin" | "focusout" | "keydown" | "pointerdown" | "pointerleave" | "pointermove">, ([$checked, $disabled]: [boolean | "indeterminate", boolean]) => { readonly role: "menuitemcheckbox"; readonly tabindex: -1; readonly 'data-orientation': "vertical"; readonly 'aria-checked': "true" | "mixed" | "false"; readonly 'data-disabled': true | undefined; readonly 'data-state': "indeterminate" | "checked" | "unchecked"; }, string>; }; states: { checked: { update: (updater: import("svelte/store").Updater<boolean | "indeterminate">, sideEffect?: ((newValue: boolean | "indeterminate") => void) | undefined) => void; set: (this: void, value: boolean | "indeterminate") => void; subscribe(this: void, run: import("svelte/store").Subscriber<boolean | "indeterminate">, invalidate?: import("svelte/store").Invalidator<boolean | "indeterminate"> | undefined): import("svelte/store").Unsubscriber; get: () => boolean | "indeterminate"; destroy?: (() => void) | undefined; }; }; helpers: { isChecked: import("svelte/store").Readable<boolean>; isIndeterminate: import("svelte/store").Readable<boolean>; }; options: { disabled: import("svelte/store").Writable<boolean>; }; }; createSubmenu: (args?: import("../menu/types.js")._CreateSubmenuProps | undefined) => { ids: import("../../internal/helpers/index.js").ToWritableStores<{ menu: string; trigger: string; }>; elements: { subTrigger: import("../../internal/helpers/index.js").MeltElement<[{ update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void; set: (this: void, value: boolean) => void; subscribe(this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined): import("svelte/store").Unsubscriber; get: () => boolean; destroy?: (() => void) | undefined; }, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean>>, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<string>>, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<string>>], (node: HTMLElement) => import("../../internal/types.js").MeltActionReturn<"click" | "focusin" | "focusout" | "keydown" | "pointerleave" | "pointermove">, ([$subOpen, $disabled, $subMenuId, $subTriggerId]: [boolean, boolean, string, string]) => { readonly role: "menuitem"; readonly id: string; readonly tabindex: -1; readonly 'aria-controls': string; readonly 'aria-expanded': boolean; readonly 'data-state': "open" | "closed"; readonly 'data-disabled': true | undefined; readonly 'aria-haspopop': "menu"; }, string>; subMenu: import("../../internal/helpers/index.js").MeltElement<[import("svelte/store").Readable<boolean>, { update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void; set: (this: void, value: boolean) => void; subscribe(this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined): import("svelte/store").Unsubscriber; get: () => boolean; destroy?: (() => void) | undefined; }, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<HTMLElement | null>>, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<string>>, import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<string>>], (node: HTMLElement) => import("../../internal/types.js").MeltActionReturn<"focusout" | "keydown" | "pointermove">, ([$subIsVisible, $subOpen, $subActiveTrigger, $subMenuId, $subTriggerId]: [boolean, boolean, HTMLElement | null, string, string]) => { readonly role: "menu"; readonly hidden: true | undefined; readonly style: string | undefined; readonly id: string; readonly 'aria-labelledby': string; readonly 'data-state': "open" | "closed"; readonly 'data-id': string; readonly tabindex: -1; }, string>; subArrow: import("../../internal/helpers/index.js").MeltElement<import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<number>>, import("svelte/action").Action<any, any, Record<never, any>>, ($arrowSize: number) => { readonly 'data-arrow': true; readonly style: string; }, string>; }; states: { subOpen: { update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void; set: (this: void, value: boolean) => void; subscribe(this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined): import("svelte/store").Unsubscriber; get: () => boolean; destroy?: (() => void) | undefined; }; }; options: import("../../internal/helpers/index.js").ToWritableStores<Omit<{ open?: import("svelte/store").Writable<boolean> | undefined; ids?: Partial<{ menu: string; trigger: string; }> | undefined; onOpenChange?: import("../../internal/helpers/index.js").ChangeFn<boolean> | undefined; positioning: import("../../internal/actions/index.js").FloatingConfig | { placement: "right-start"; gutter: number; }; arrowSize: number; disabled: boolean; preventScroll: true; escapeBehavior: "close"; closeOnOutsideClick: true; portal: string; loop: false; dir: "ltr"; defaultOpen: false; typeahead: true; closeOnItemClick: true; onOutsideClick: undefined; preventTextSelectionOverflow: true; }, "ids">>; }; createMenuRadioGroup: (args?: import("../menu/types.js")._CreateRadioGroupProps) => { elements: { radioGroup: import("../../internal/helpers/index.js").MeltElement<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => { readonly role: "group"; }, string>; radioItem: import("../../internal/helpers/index.js").MeltElement<[{ update: (updater: import("svelte/store").Updater<string | null>, sideEffect?: ((newValue: string | null) => void) | undefined) => void; set: (this: void, value: string | null) => void; subscribe(this: void, run: import("svelte/store").Subscriber<string | null>, invalidate?: import("svelte/store").Invalidator<string | null> | undefined): import("svelte/store").Unsubscriber; get: () => string | null; destroy?: (() => void) | undefined; }], (node: HTMLElement) => import("../../internal/types.js").MeltActionReturn<"click" | "focusin" | "focusout" | "keydown" | "pointerdown" | "pointerleave" | "pointermove">, ([$value]: [string | null]) => (itemProps: import("../menu/types.js")._RadioItemProps) => { readonly disabled: boolean; readonly role: "menuitemradio"; readonly 'data-state': "checked" | "unchecked"; readonly 'aria-checked': boolean; readonly 'data-disabled': true | undefined; readonly 'data-value': string; readonly 'data-orientation': "vertical"; readonly tabindex: -1; }, string>; }; states: { value: { update: (updater: import("svelte/store").Updater<string | null>, sideEffect?: ((newValue: string | null) => void) | undefined) => void; set: (this: void, value: string | null) => void; subscribe(this: void, run: import("svelte/store").Subscriber<string | null>, invalidate?: import("svelte/store").Invalidator<string | null> | undefined): import("svelte/store").Unsubscriber; get: () => string | null; destroy?: (() => void) | undefined; }; }; helpers: { isChecked: import("svelte/store").Readable<(itemValue: string) => boolean>; }; }; }; options: { positioning: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<import("../../internal/actions/index.js").FloatingConfig>>; arrowSize: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<number | undefined>>; preventScroll: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean | undefined>>; loop: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean | undefined>>; dir: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<import("../../internal/types.js").TextDirection>>; escapeBehavior: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<import("../../internal/actions/index.js").EscapeBehaviorType>>; closeOnOutsideClick: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean>>; preventTextSelectionOverflow: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean>>; portal: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<string | HTMLElement | null | undefined>>; forceVisible: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean>>; typeahead: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean>>; closeFocus: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<import("../../internal/helpers/index.js").FocusProp | undefined>>; disableFocusFirstItem: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean>>; closeOnItemClick: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<boolean>>; onOutsideClick: import("../../internal/helpers/withGet.js").WithGet<import("svelte/store").Writable<((event: import("../../index.js").InteractOutsideEvent) => void) | undefined>>; }; };