melt
Version:
The next generation of Melt UI. Built for Svelte 5.
109 lines (108 loc) • 3.32 kB
TypeScript
import type { MaybeGetter } from "../types";
export type SpatialMenuProps<T> = {
/**
* The currently highlighted value.
*/
highlighted?: MaybeGetter<T | null | undefined>;
/**
* Called when the highlighted value changes.
*/
onHighlightChange?: (highlighted: T | null) => void;
onSelect?: (value: T) => void;
/**
* Whether navigation should wrap around when reaching the edges.
* @default false
*/
wrap?: MaybeGetter<boolean>;
/**
* Scroll behavior when highlighting an item with the keyboard.
* `null` to disable scrolling.
*
* @default "smooth"
*/
scrollBehavior?: MaybeGetter<"smooth" | "instant" | "auto" | null>;
/**
* The maximum distance a the centerX of an item can be in relation
* to the highlighted item to be considered as being on the same column.
*
* Set to `null` to disable.
*
* @default 16
*/
toleranceCol?: MaybeGetter<number | null>;
/**
* The maximum distance a the centerY of an item can be in relation
* to the highlighted item to be considered as being on the same row.
*
* Set to `null` to disable.
*
* @default 16
*/
toleranceRow?: MaybeGetter<number | null>;
/**
* If `true`, arrow keys will navigate cross-axis as well, if no item
* is available on the current axis.
*
* @default true
*/
crossAxis?: MaybeGetter<boolean>;
};
export declare class SpatialMenu<T> {
#private;
onSelect: ((value: T) => void) | undefined;
wrap: boolean;
scrollBehavior: "auto" | "smooth" | "instant" | null;
toleranceCol: number | null;
toleranceRow: number | null;
crossAxis: boolean;
selectionMode: "keyboard" | "mouse";
get highlighted(): T | null;
set highlighted(v: T | null);
constructor(props?: SpatialMenuProps<T>);
/** The root element. */
get root(): {
readonly [x: symbol]: (node: HTMLElement) => () => void;
readonly "data-melt-spatial-menu-root": "";
readonly tabindex: 0;
readonly onkeydown: (e: KeyboardEvent) => void;
};
get input(): {
readonly [x: symbol]: (node: HTMLInputElement) => () => void;
readonly "data-melt-spatial-menu-input": "";
readonly onkeydown: (e: KeyboardEvent) => void;
};
getItem(value: T, options?: Pick<SpatialMenuItemProps<T>, "onSelect" | "disabled">): SpatialMenuItem<T>;
}
type SpatialMenuItemProps<T> = {
value: T;
onSelect?: () => void;
disabled?: boolean;
parent: SpatialMenu<T>;
lifecycle: {
onMount: () => void;
onUnmount: () => void;
};
};
declare class SpatialMenuItem<T> {
#private;
value: T;
disabled: boolean;
el: HTMLElement | null;
parent: SpatialMenu<T>;
highlighted: boolean;
constructor(props: SpatialMenuItemProps<T>);
attrs: {
readonly "data-melt-spatial-menu-item": "";
readonly "data-highlighted": "" | undefined;
readonly "data-disabled": "" | undefined;
readonly onmousemove: () => void;
readonly onclick: () => void;
};
get rect(): DOMRect | undefined;
get extendedRect(): (DOMRect & {
centerX: number;
centerY: number;
}) | undefined;
onSelect(): void;
}
export {};