melt
Version:
The next generation of Melt UI. Built for Svelte 5.
171 lines (170 loc) • 6.75 kB
TypeScript
import type { MaybeGetter } from "../types";
import { type UseFloatingArgs, type UseFloatingConfig } from "../utils/use-floating.svelte";
export type CloseOnOutsideClickCheck = (el: Element | Window | Document) => boolean;
type CloseOnOutsideClickProp = MaybeGetter<boolean | CloseOnOutsideClickCheck | undefined>;
export declare const isCloseOnOutsideClickCheck: (value: CloseOnOutsideClickProp) => value is CloseOnOutsideClickCheck;
export type PopoverProps = {
/**
* If the Popover is open.
*
* When passing a getter, it will be used as source of truth,
* meaning that the value only changes when the getter returns a new value.
*
* Otherwise, if passing a static value, it'll serve as the default value.
*
*
* @default false
*/
open?: MaybeGetter<boolean | undefined>;
/**
* Called when the value is supposed to change.
*/
onOpenChange?: (value: boolean) => void;
/**
* If the popover visibility should be controlled by the user.
*
* @default false
*/
forceVisible?: MaybeGetter<boolean | undefined>;
/**
* Config to be passed to `useFloating`
*/
floatingConfig?: UseFloatingArgs["config"];
/**
* If the popover should have the same width as the trigger
*
* @default false
*/
sameWidth?: MaybeGetter<boolean | undefined>;
/**
* If the popover should close when clicking escape.
*
* @default true
*/
closeOnEscape?: MaybeGetter<boolean | undefined>;
/**
* If the popover should close when clicking outside.
* Alternatively, accepts a function that receives the clicked element,
* and returns if the popover should close.
*
* @default true
*/
closeOnOutsideClick?: CloseOnOutsideClickProp;
focus?: {
/**
* Which element to focus when the popover opens.
* Can be a selector string, an element, or a Getter for those.
* If null, the focus remains on the trigger element.
*
* Defaults to the popover content element.
*/
onOpen?: MaybeGetter<HTMLElement | string | null | undefined>;
/**
* Which element to focus when the popover closes.
* Can be a selector string, an element, or a Getter for those.
* If null, the focus goes to the document body.
*
* Defaults to the last used trigger element.
*/
onClose?: MaybeGetter<HTMLElement | string | null | undefined>;
/**
* If focus should be trapped inside the popover content when open.
*
* @default false
*/
trap?: MaybeGetter<boolean | undefined>;
};
};
export declare class BasePopover {
#private;
forceVisible: boolean;
closeOnEscape: boolean;
sameWidth: boolean;
closeOnOutsideClick: boolean | CloseOnOutsideClickCheck;
floatingConfig: UseFloatingConfig;
focus: {
onOpen: string | HTMLElement | null;
onClose: string | HTMLElement | null;
trap: boolean;
};
ids: {
popover: string;
};
invokerRect: {
x: number;
y: number;
width: number;
height: number;
} | undefined;
availableWidth: number | undefined;
availableHeight: number | undefined;
triggerEl: HTMLElement | null;
constructor(props?: PopoverProps);
get open(): boolean;
set open(value: boolean);
protected get sharedProps(): {
onfocus: (event: FocusEvent) => void;
onfocusout: (event: FocusEvent) => Promise<void>;
style: `--melt-invoker-width: ${string}; --melt-invoker-height: ${string}; --melt-invoker-x: ${string}; --melt-invoker-y: ${string}; --melt-popover-available-width: ${string}; --melt-popover-available-height: ${string}`;
};
/** The trigger that toggles the value. */
protected getInvoker(): {
readonly onfocus: (event: FocusEvent) => void;
readonly onfocusout: (event: FocusEvent) => Promise<void>;
readonly style: `--melt-invoker-width: ${string}; --melt-invoker-height: ${string}; --melt-invoker-x: ${string}; --melt-invoker-y: ${string}; --melt-popover-available-width: ${string}; --melt-popover-available-height: ${string}`;
readonly popovertarget: string;
readonly onclick: (e: Event) => void;
};
protected getPopover(): {
readonly onfocus: (event: FocusEvent) => void;
readonly onfocusout: (event: FocusEvent) => Promise<void>;
readonly style: `--melt-invoker-width: ${string}; --melt-invoker-height: ${string}; --melt-invoker-x: ${string}; --melt-invoker-y: ${string}; --melt-popover-available-width: ${string}; --melt-popover-available-height: ${string}`;
readonly id: string;
readonly popover: "manual";
readonly ontoggle: (e: ToggleEvent & {
currentTarget: EventTarget & HTMLElement;
}) => void;
readonly tabindex: -1;
readonly inert: boolean;
readonly "data-open": "" | undefined;
};
get arrow(): {
readonly "data-melt-popover-arrow": "";
readonly "data-arrow": "";
readonly "aria-hidden": true;
readonly "data-open": "" | undefined;
};
}
export declare class Popover extends BasePopover {
ids: BasePopover["ids"] & {
trigger: string;
content: string;
};
constructor(props?: PopoverProps);
/** The trigger that toggles the value. */
get trigger(): {
readonly onfocus: (event: FocusEvent) => void;
readonly onfocusout: (event: FocusEvent) => Promise<void>;
readonly style: `--melt-invoker-width: ${string}; --melt-invoker-height: ${string}; --melt-invoker-x: ${string}; --melt-invoker-y: ${string}; --melt-popover-available-width: ${string}; --melt-popover-available-height: ${string}`;
readonly popovertarget: string;
readonly onclick: (e: Event) => void;
} & {
"data-melt-popover-trigger": string;
};
get content(): {
readonly onfocus: (event: FocusEvent) => void;
readonly onfocusout: (event: FocusEvent) => Promise<void>;
readonly style: `--melt-invoker-width: ${string}; --melt-invoker-height: ${string}; --melt-invoker-x: ${string}; --melt-invoker-y: ${string}; --melt-popover-available-width: ${string}; --melt-popover-available-height: ${string}`;
readonly id: string;
readonly popover: "manual";
readonly ontoggle: (e: ToggleEvent & {
currentTarget: EventTarget & HTMLElement;
}) => void;
readonly tabindex: -1;
readonly inert: boolean;
readonly "data-open": "" | undefined;
} & {
"data-melt-popover-content": string;
};
}
export {};