melt

import type { IterableProp, MaybeGetter } from "../types"; import { Collection } from "../utils/collection"; import { SelectionState, type MaybeMultiple } from "../utils/selection-state.svelte"; import type { FalseIfUndefined } from "../utils/types"; /** * Represents a tree item with optional metadata and children * @template Meta - Type of additional metadata properties for the tree item */ export type TreeItem = { /** Unique identifier for the tree item */ id: string; /** Optional array of child tree items */ children?: TreeItem[]; }; /** * Props for configuring the Tree component * @template Item - The type of the Item array * @template Multiple - Boolean indicating if multiple selection is enabled */ export type TreeProps<Item extends TreeItem, Multiple extends boolean = false> = { /** * If `true`, the user can select multiple items. * @default false */ multiple?: MaybeGetter<Multiple | undefined>; /** * The currently selected item(s). * If `multiple` is `true`, this should be an `Iterable`. * Otherwise, it'll be a `string`. * @default undefined */ selected?: MaybeMultiple<string, Multiple>; /** * Callback fired when selection changes * @param value - For multiple selection, a Set of selected IDs. For single selection, a single ID or undefined */ onSelectedChange?: (value: Multiple extends true ? Set<string> : string | undefined) => void; /** * The currently expanded items * * @default undefined */ expanded?: MaybeMultiple<string, true>; /** * Callback fired when expanded state changes * @param value - Set of expanded item IDs */ onExpandedChange?: (value: Set<string>) => void; /** * If `true`, groups (items with children) expand on click. * @default true */ expandOnClick?: MaybeGetter<boolean | undefined>; /** * The items contained in the tree. * @required */ items: IterableProp<Item>; /** * How many time (in ms) the typeahead string is held before it is cleared * @default 500 */ typeaheadTimeout?: MaybeGetter<number | undefined>; }; /** * Main tree component class that handles selection, expansion, and keyboard navigation * @template I - Array type extending TreeItem * @template Multiple - Boolean indicating if multiple selection is enabled */ export declare class Tree { #private; /** The items contained in the tree */ readonly collection: Collection; /** If `true`, the user can select multiple items holding `Control`/`Meta` or `Shift` */ readonly multiple: Multiple; /** If `true`, groups (items with children) expand on click */ readonly expandOnClick: boolean; readonly typeaheadTimeout: number; readonly typeahead: (letter: string) => { readonly child: Child; readonly value: string; readonly typeahead: string; readonly current: boolean; } | undefined; /** * Creates a new Tree instance * @param props - Configuration props for the tree */ constructor(props: TreeProps<I, Multiple>); get items(): I[]; /** * Currently selected item(s) * For multiple selection, returns a Set of IDs * For single selection, returns a single ID or undefined */ get selected(): import("../utils/selection-state.svelte").SelectionStateValue<string, FalseIfUndefined<Multiple>>; set selected(v: import("../utils/selection-state.svelte").SelectionStateValue<string, FalseIfUndefined<Multiple>>); /** * Set of currently expanded item IDs */ get expanded(): import("svelte/reactivity").SvelteSet<string>; set expanded(v: import("svelte/reactivity").SvelteSet<string>); /** * Checks if an item is currently selected * @param id - ID of the item to check */ isSelected(id: string): boolean; /** * Checks if an item is currently expanded * @param id - ID of the item to check */ isExpanded(id: string): boolean; getItem(id: string): I | undefined; /** * Expands a specific item * @param id - ID of the item to expand */ expand: (id: string) => void; /** * Expands all items */ expandAll: () => void; /** * Collapses a specific item * @param id - ID of the item to collapse */ collapse: (id: string) => void; /** * Collapses all items */ collapseAll: () => void; /** * Toggles the expanded state of an item * @param id - ID of the item to toggle */ toggleExpand: (id: string) => void; /** * Selects a specific item * @param id - ID of the item to select */ select: (id: string) => void; /** * Deselects a specific item * @param id - ID of the item to deselect */ deselect: (id: string) => void; /** * Clears all current selections */ clearSelection: () => void; /** * Toggles the selected state of an item * @param id - ID of the item to toggle */ toggleSelect: (id: string) => void; /** * Selects all visible items. * If all items are already selected, clears the selection. */ selectAll: () => void; /** * Gets the DOM ID for a specific tree item * @param id - ID of the item */ getItemId(id: string): string; /** * Gets the DOM element for a specific tree item * @param id - ID of the item */ getItemEl(id: string): HTMLElement | null; /** * Selects all items between the last selected item and the specified item * @param id - ID of the item to select until */ selectUntil(id: string): void; /** * Gets ARIA attributes for the root tree element */ get root(): { role: string; "data-melt-tree-root": string; }; /** * ARIA attributes for group elements */ get group(): { role: string; "data-melt-tree-group": string; }; /** * Array of Child instances representing the top-level items */ get children(): Child[]; /** * Helper function to get all child items in a tree or subtree * @param treeOrChild - Tree or Child instance to get children from * @param onlyVisible - If true, only returns visible (expanded) children */ static getAllChildren(treeOrChild: Tree<I, boolean> | Child, onlyVisible?: boolean): Child[]; } type ChildProps = { tree: Tree<I, boolean>; selectedState: SelectionState<string, boolean>; item: I; parent?: Child | Tree<I, boolean>; }; /** * Class representing a single item in the tree * @template I - Array type extending TreeItem */ declare class Child { #private; tree: Tree<I, boolean>; selectedState: SelectionState<string, boolean>; item: I; elId: string; id: string; parent: Child | Tree<I, boolean> | undefined; /** * Creates a new Child instance * @param props - Configuration props for the child */ constructor(props: ChildProps); /** The DOM element representing this item */ get el(): HTMLElement | null; /** Whether this item is currently selected */ readonly selected: boolean; /** Whether this item is currently expanded */ readonly expanded: boolean; /** Whether this item can be expanded (has children) */ readonly canExpand: boolean; /** Collapses this item */ collapse: () => void; /** Expands this item */ expand: () => void; /** Toggles the expanded state of this item */ toggleExpand: () => void; /** Selects this item */ select: () => void; /** Deselects this item */ deselect: () => void; /** Toggles the selected state of this item */ toggleSelect: () => void; /** Focuses this item's DOM element */ focus: () => void | undefined; idx: number; /** Gets all sibling items */ get siblings(): Child[]; /** Gets the previous sibling item */ get previousSibling(): Child | undefined; /** Gets the next sibling item */ get nextSibling(): Child | undefined; /** Gets the previous item in the tree (including parent/child relationships) */ get previous(): Child | undefined; /** Gets the next item in the tree (including parent/child relationships) */ get next(): Child | undefined; /** Gets the tabindex for this item's DOM element */ get tabindex(): 0 | -1; /** Gets DOM and ARIA attributes for this item */ get attrs(): { id: string; "data-melt-tree-item": string; "data-selected": "" | undefined; tabindex: number; role: string; onclick: (e: MouseEvent) => void; onkeydown: (e: KeyboardEvent) => void; }; /** The item's sub-items, if any */ get children(): Child[] | undefined; } export {};