@dosgato/dialog 0.0.19 → 0.0.21

package/tree/Tree.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import { TreeStore } from './treestore';
+import type { DragEligibleFn, CopyHandlerFn, DropEffectFn, FetchChildrenFn, MoveHandlerFn, TreeHeader, TreeItemFromDB } from './treestore';
+declare class __sveltets_Render<T extends TreeItemFromDB> {
+    props(): {
+        headers: TreeHeader<T>[];
+        nodeClass?: (itm: T) => string;
+        singleSelect?: boolean;
+        enableResize?: boolean;
+        fetchChildren?: FetchChildrenFn<T>;
+        dragEligible?: DragEligibleFn<T>;
+        moveHandler?: MoveHandlerFn<T>;
+        copyHandler?: CopyHandlerFn<T>;
+        dropEffect?: DropEffectFn<T>;
+        store?: TreeStore<T>;
+    };
+    events(): {
+        choose: CustomEvent<T>;
+        deselect: CustomEvent<T>;
+    };
+    slots(): {};
+}
+export type TreeProps<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['props']>;
+export type TreeEvents<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['events']>;
+export type TreeSlots<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Tree<T extends TreeItemFromDB> extends SvelteComponentTyped<TreeProps<T>, TreeEvents<T>, TreeSlots<T>> {
+}
+export {};

package/tree/TreeCell.svelte

@@ -0,0 +1,18 @@
+<script>import { get } from 'txstate-utils';
+import { Icon } from '..';
+export let header;
+export let item;
+$: icon = typeof header.icon === 'function' ? header.icon(item) : header.icon;
+$: headerComponent = header.component;
+</script>
+
+{#if header.icon}
+  <span class="icon"><Icon {icon} inline width="1.5em" /></span>
+{/if}
+{#if header.component}
+  <svelte:component this={headerComponent} {item} {header} />
+{:else if header.render}
+  {@html header.render(item)}
+{:else if header.get}
+  {#if get(item, header.get)}{get(item, header.get)}{:else}&nbsp;{/if}
+{/if}

package/tree/TreeCell.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TreeHeader, TreeItemFromDB, TypedTreeItem } from './treestore';
+declare class __sveltets_Render<T extends TreeItemFromDB> {
+    props(): {
+        header: TreeHeader<T>;
+        item: TypedTreeItem<T>;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type TreeCellProps<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['props']>;
+export type TreeCellEvents<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['events']>;
+export type TreeCellSlots<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class TreeCell<T extends TreeItemFromDB> extends SvelteComponentTyped<TreeCellProps<T>, TreeCellEvents<T>, TreeCellSlots<T>> {
+}
+export {};

package/tree/TreeNode.svelte

@@ -0,0 +1,418 @@
+<script>import checkboxOutline from '@iconify-icons/mdi/checkbox-outline';
+import checkboxBlankOutline from '@iconify-icons/mdi/checkbox-blank-outline';
+import menuDown from '@iconify-icons/mdi/menu-down';
+import menuRight from '@iconify-icons/mdi/menu-right';
+import { modifierKey, ScreenReaderOnly } from '@txstate-mws/svelte-components';
+import { createEventDispatcher, getContext } from 'svelte';
+import { hashid, isNotBlank, toArray } from 'txstate-utils';
+import { Icon } from '..';
+import { TREE_STORE_CONTEXT } from './treestore';
+import LoadIcon from './LoadIcon.svelte';
+import TreeCell from './TreeCell.svelte';
+export let headers;
+export let headerSizes;
+export let nodeClass = undefined;
+export let item;
+export let posinset;
+export let setsize;
+export let level;
+export let next;
+export let prev;
+export let parent = undefined;
+const store = getContext(TREE_STORE_CONTEXT);
+const { dragging, draggable, selectedUndraggable, selected, focused, copied, headerOverride } = store;
+const dispatch = createEventDispatcher();
+let nodeelement;
+let userWantsCopy = false;
+$: isSelected = $selected.has(item.id);
+$: showChildren = !!item.open && !!item.children?.length;
+$: hashedId = hashid(item.id);
+$: isDraggable = $draggable && ((isSelected && !$selectedUndraggable) || store.dragEligible([item], true) || store.dragEligible([item], false));
+$: dropZone = $dragging && store.dropEffect(item, false, userWantsCopy) !== 'none';
+$: dropDisabled = $dragging && !dropZone;
+$: dropAbove = $dragging && store.dropEffect(item, true, userWantsCopy) !== 'none';
+$: inClipboard = $copied.has(item.id);
+function onKeyDown(e) {
+    if (e.ctrlKey || e.metaKey) {
+        if (e.key === 'x') {
+            store.cut();
+        }
+        else if (e.key === 'c') {
+            store.copy();
+        }
+        else if (e.key === 'v') {
+            store.paste();
+        }
+    }
+    else if (e.key === 'Escape') {
+        store.cancelCopy();
+    }
+    if (modifierKey(e) && !['Enter', ' '].includes(e.key))
+        return;
+    if (['Enter', ' '].includes(e.key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        if ($store.selected && $store.selected.size === 1 && $store.selected.has(item.id))
+            dispatch('choose', item);
+        else {
+            if (e.metaKey || e.altKey) {
+                store.select(item, { clear: false, toggle: true });
+            }
+            else if (e.shiftKey) {
+                shiftClick();
+            }
+            else {
+                store.select(item, { clear: true });
+            }
+        }
+    }
+    else if (e.key === 'Escape') {
+        store.deselect();
+    }
+    else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (item.open && item.children?.length) {
+            const child = item.children[0];
+            store.focus(child);
+        }
+        else {
+            store.open(item);
+        }
+    }
+    else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (item.open) {
+            store.close(item);
+        }
+        else if (parent) {
+            store.focus(parent);
+        }
+    }
+    else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        const mynext = item.open && item.children?.length ? item.children[0] : next;
+        if (mynext) {
+            store.focus(mynext);
+        }
+    }
+    else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        const anyprev = prev;
+        const myprev = anyprev?.open && anyprev.children?.length && (!parent || parent.children?.some(c => c.id === anyprev.id)) ? anyprev.children[anyprev.children.length - 1] : prev;
+        if (myprev) {
+            store.focus(myprev);
+        }
+    }
+    else if (e.key === '*') {
+        e.preventDefault();
+        e.stopPropagation();
+        const toOpen = (parent ? parent.children : $store.rootItems) ?? [];
+        for (const child of toOpen) {
+            store.open(child).catch(console.error);
+        }
+    }
+}
+function shiftClick() {
+    const treenodes = Array.from(store.treeElement?.querySelectorAll('div[role="treeitem"]') ?? []);
+    const selectedNodes = treenodes.filter(n => n.matches('.selected'));
+    const firstSelected = selectedNodes[0];
+    if (!firstSelected || (selectedNodes.length === 1 && firstSelected === nodeelement)) {
+        return store.select(item, { toggle: true });
+    }
+    const lastSelected = selectedNodes[selectedNodes.length - 1];
+    const selectingdownward = firstSelected.compareDocumentPosition(nodeelement) === Node.DOCUMENT_POSITION_FOLLOWING;
+    let selecting = false;
+    store.deselect(false);
+    for (const node of treenodes) {
+        if (selectingdownward && node === firstSelected)
+            selecting = true;
+        if (!selectingdownward && node === nodeelement)
+            selecting = true;
+        if (selecting)
+            store.selectById(node.getAttribute('data-id'), { notify: false, toggle: false });
+        if (selectingdownward && node === nodeelement)
+            selecting = false;
+        if (!selectingdownward && node === lastSelected)
+            selecting = false;
+    }
+    store.trigger();
+}
+function onClick(e) {
+    if (e.button > 0)
+        return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.metaKey || e.altKey || e.ctrlKey) {
+        store.select(item, { clear: false, toggle: true });
+    }
+    else if (e.shiftKey) {
+        shiftClick();
+    }
+    else {
+        const wasFocused = $store.focused?.id === item.id;
+        store.select(item, { clear: true, toggle: false });
+        if (item.open && wasFocused && !item.loading)
+            store.close(item);
+        else if (!item.open)
+            store.open(item);
+    }
+}
+function onCheckClick(e) {
+    if (e.button > 0)
+        return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.shiftKey) {
+        shiftClick();
+    }
+    else {
+        console.log('onCheckClick', isSelected);
+        if (isSelected)
+            dispatch('deselect', item);
+        store.select(item, { clear: false, toggle: true });
+    }
+}
+function onDblClick(e) {
+    if (modifierKey(e) || e.button > 0)
+        return;
+    e.preventDefault();
+    e.stopPropagation();
+    if ($store.selected.size <= 1)
+        dispatch('choose', item);
+}
+function onDragStart(e) {
+    userWantsCopy = e.dataTransfer.dropEffect === 'copy';
+    e.dataTransfer.effectAllowed = 'copyMove';
+    e.dataTransfer.setData('text/plain', item.id);
+    store.dragStart(item);
+}
+function onDragOver(e) {
+    userWantsCopy = e.dataTransfer.dropEffect === 'copy';
+    if (dropZone) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = store.dropEffect(item, false, userWantsCopy);
+    }
+    return !dropZone;
+}
+function onDragOverAbove(e) {
+    userWantsCopy = e.dataTransfer.dropEffect === 'copy';
+    if (dropAbove) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = store.dropEffect(item, true, userWantsCopy);
+    }
+    return !dropAbove;
+}
+let dragOver = 0;
+let dragOverAbove = 0;
+function onDrop(e) {
+    e.preventDefault();
+    dragOver = 0;
+    return store.drop(item, false, e.dataTransfer.dropEffect === 'copy');
+}
+function onDropAbove(e) {
+    e.preventDefault();
+    dragOverAbove = 0;
+    return store.drop(item, true, e.dataTransfer.dropEffect === 'copy');
+}
+function onDragEnter(e) {
+    if (!dropZone)
+        dragOver = 0;
+    else
+        dragOver++;
+    onDragOver(e);
+}
+function onDragEnterAbove(e) {
+    if (!dropAbove)
+        dragOverAbove = 0;
+    else
+        dragOverAbove++;
+    onDragOverAbove(e);
+}
+function onDragLeave(e) {
+    if (!dropZone)
+        dragOver = 0;
+    else
+        dragOver--;
+}
+function onDragLeaveAbove(e) {
+    if (!dropAbove)
+        dragOverAbove = 0;
+    else
+        dragOverAbove--;
+}
+$: if ($dragging) {
+    dragOver = 0;
+    dragOverAbove = 0;
+}
+</script>
+<li>
+  {#if dropAbove}
+    <div class="drop-above"
+      class:dragOverAbove
+      on:dragenter={onDragEnterAbove}
+      on:dragleave={onDragLeaveAbove}
+      on:dragover={onDragOverAbove}
+      on:drop={onDropAbove}
+      style:left="{level + 1.3}em"
+    ></div>
+  {/if}
+  <div
+    id={hashedId}
+    bind:this={nodeelement}
+    class={['tree-node', nodeClass?.(item)].filter(isNotBlank).join(' ')}
+    class:selected={isSelected}
+    class:dragOver
+    class:dropDisabled
+    class:inClipboard
+    role="treeitem"
+    data-id={item.id}
+    draggable={isDraggable}
+    tabindex={$focused && $focused.id === item.id ? 0 : -1}
+    aria-level={level}
+    aria-posinset={posinset}
+    aria-setsize={setsize}
+    aria-selected={isSelected}
+    aria-expanded={item.hasChildren ? item.open && !!item.children && !!item.children.length : undefined}
+    aria-busy={item.loading}
+    on:keydown={onKeyDown}
+    on:click={onClick}
+    on:dragstart={onDragStart}
+    on:dragover={onDragOver}
+    on:dragenter={onDragEnter}
+    on:dragleave={onDragLeave}
+    on:drop={onDrop}
+    on:mousedown={e => { if (e.shiftKey) e.preventDefault() }}
+    on:dblclick={onDblClick}
+  >
+    <!-- keyboard users have modifier keys, they don't ever focus the checkbox -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="checkbox" on:click={onCheckClick}>
+      <Icon icon={isSelected ? checkboxOutline : checkboxBlankOutline } width="1.15em" inline />
+    </div>
+    {#each headers as header, i (header.id)}
+      <div
+        class={(header.class ? toArray(header.class(item)) : []).concat([header.id]).join(' ')}
+        style:width={$headerSizes?.[i] ?? '1px'}
+        style:padding-left={i === 0 ? `calc(min(${(level - 1) * 1.6}em, ${(level - 1) * 2.7}vw) + 1.4em)` : undefined}
+        class:left={i === 0}
+      >
+        {#if i === 0 && item.hasChildren}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <span class="arrow" on:click={onClick}><Icon icon={item.open ? menuDown : menuRight} width="1.5em" inline /></span>
+        {/if}
+        <TreeCell {header} {item} />
+        {#if i === 0 && item.loading}
+          <LoadIcon />
+        {/if}
+      </div>
+    {/each}
+    <ScreenReaderOnly>
+      command enter select multiple, shift enter select all from last selection
+    </ScreenReaderOnly>
+  </div>
+  {#if showChildren && item.children}
+    <ul role="group">
+      {#each item.children as child, i (child.id)}
+        <svelte:self
+          item={child}
+          {headers}
+          {headerSizes}
+          {nodeClass}
+          posinset={i + 1}
+          setsize={item.children.length}
+          level={child.level}
+          prev={i === 0 ? item : item.children[i - 1]}
+          next={i === item.children.length - 1 ? next : item.children[i + 1]}
+          parent={item}
+          on:choose
+          on:deselect
+        />
+      {/each}
+    </ul>
+  {/if}
+</li>
+
+<style>
+  .tree-node {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    border-bottom: var(--tree-border, 1px dashed #aaaaaa);
+    width: 100%;
+    overflow: hidden;
+  }
+  :global(.resizing) .tree-node {
+    cursor: col-resize;
+  }
+  .tree-node .checkbox {
+    min-width: 1.5em;
+    max-width: 1.5em;
+  }
+  .tree-node > div {
+    padding: 0.6em 0.3em;
+  }
+  .tree-node > div.left {
+    display: flex;
+    align-items: center;
+  }
+  .tree-node > div.left .arrow {
+    margin-left: -1.6em;
+    margin-right: 0.1em;
+  }
+  .tree-node > div.left :global(.icon) {
+    margin-right: 0.4em;
+  }
+  .tree-node.selected {
+    background-color: var(--tree-selected, #f1f1f1);
+    color: var(--tree-selected-text, inherit);
+  }
+  .tree-node.dragOver {
+    background-color: var(--tree-droppable, #555555);
+    color: var(--tree-droppable-text, white);
+  }
+  .tree-node.dropDisabled {
+    opacity: 0.6;
+  }
+  .drop-above {
+    position: absolute;
+    top: -3px;
+    left: 0;
+    width: 100%;
+    height: 6px;
+  }
+  .drop-above.dragOverAbove {
+    background-color: var(--tree-droppable, #555555);
+  }
+  li {
+    position: relative;
+  }
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .inClipboard {
+    background-image: linear-gradient(90deg, #999999 50%, transparent 50%), linear-gradient(90deg, #999999 50%, transparent 50%), linear-gradient(0deg, #999999 50%, transparent 50%), linear-gradient(0deg, #999999 50%, transparent 50%);
+    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+    background-size: 15px 1px, 15px 1px, 1px 15px, 1px 15px;
+    background-position: left top, right bottom, left bottom, right   top;
+    animation: border-dance 1s infinite linear;
+  }
+  @keyframes border-dance {
+    0% {
+      background-position: left top, right bottom, left bottom, right   top;
+    }
+    100% {
+      background-position: left 15px top, right 15px bottom , left bottom 15px , right   top 15px;
+    }
+  }
+  @media (prefers-reduced-motion) {
+    .inClipboard {
+      animation: none;
+    }
+  }
+</style>

package/tree/TreeNode.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Store } from '@txstate-mws/svelte-store';
+import { type TypedTreeItem, type TreeItemFromDB, type TreeHeader } from './treestore';
+declare class __sveltets_Render<T extends TreeItemFromDB> {
+    props(): {
+        headers: TreeHeader<T>[];
+        headerSizes: Store<string[]>;
+        nodeClass?: (itm: T) => string;
+        item: TypedTreeItem<T>;
+        posinset: number;
+        setsize: number;
+        level: number;
+        next: TypedTreeItem<T>;
+        prev: TypedTreeItem<T>;
+        parent?: TypedTreeItem<T>;
+    };
+    events(): {
+        choose: CustomEvent<any>;
+        deselect: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type TreeNodeProps<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['props']>;
+export type TreeNodeEvents<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['events']>;
+export type TreeNodeSlots<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class TreeNode<T extends TreeItemFromDB> extends SvelteComponentTyped<TreeNodeProps<T>, TreeNodeEvents<T>, TreeNodeSlots<T>> {
+}
+export {};

package/tree/index.d.ts

@@ -0,0 +1,3 @@
+export * from './treestore.js';
+export { default as Tree } from './Tree.svelte';
+export { default as LoadIcon } from './LoadIcon.svelte';

package/tree/index.js

@@ -0,0 +1,3 @@
+export * from './treestore.js';
+export { default as Tree } from './Tree.svelte';
+export { default as LoadIcon } from './LoadIcon.svelte';

package/tree/treestore.d.ts

@@ -0,0 +1,117 @@
+import { ActiveStore } from '@txstate-mws/svelte-store';
+import type { IconifyIcon } from '@iconify/svelte';
+import type { SvelteComponent } from 'svelte';
+export declare const TREE_STORE_CONTEXT: {};
+export interface TreeItemFromDB {
+    id: string;
+    hasChildren?: boolean;
+}
+export interface TreeItem<T extends TreeItemFromDB> extends TreeItemFromDB {
+    level: number;
+    parent?: TypedTreeItem<T>;
+    loading?: boolean;
+    open?: boolean;
+    children?: TypedTreeItem<T>[];
+}
+export type TypedTreeItem<T extends TreeItemFromDB> = TreeItem<T> & T;
+export interface ITreeStore<T extends TreeItemFromDB> {
+    loading?: boolean;
+    rootItems?: TypedTreeItem<T>[];
+    itemsById: Record<string, TypedTreeItem<T> | undefined>;
+    focused?: TypedTreeItem<T>;
+    selected: Map<string, TypedTreeItem<T>>;
+    selectedItems: TypedTreeItem<T>[];
+    copied: Map<string, TypedTreeItem<T>>;
+    cut?: boolean;
+    draggable: boolean;
+    selectedUndraggable?: boolean;
+    dragging: boolean;
+    headerWidthOverrides: Record<string, string>;
+}
+export type FetchChildrenFn<T extends TreeItemFromDB> = (item?: TypedTreeItem<T>) => Promise<T[]>;
+export type DragEligibleFn<T extends TreeItemFromDB> = (selectedItems: TypedTreeItem<T>[], userWantsCopy: boolean) => boolean;
+export type DropEffectFn<T extends TreeItemFromDB> = (selectedItems: TypedTreeItem<T>[], dropTarget: TypedTreeItem<T>, above: boolean, userWantsCopy: boolean) => 'move' | 'copy' | 'none';
+export type MoveHandlerFn<T extends TreeItemFromDB> = (selectedItems: TypedTreeItem<T>[], dropTarget: TypedTreeItem<T>, above: boolean) => boolean | Promise<boolean>;
+export type CopyHandlerFn<T extends TreeItemFromDB> = (selectedItems: TypedTreeItem<T>[], dropTarget: TypedTreeItem<T>, above: boolean, userWantsRecursive: boolean | undefined) => boolean | Promise<boolean>;
+export interface TreeHeader<T extends TreeItemFromDB> {
+    id: string;
+    label: string;
+    fixed?: string;
+    grow?: number;
+    icon?: IconifyIcon | ((item: TypedTreeItem<T>) => IconifyIcon | undefined);
+    get?: string;
+    render?: (item: TypedTreeItem<T>) => string;
+    component?: SvelteComponent;
+    class?: (item: TypedTreeItem<T>) => string | string[];
+}
+export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITreeStore<T>> {
+    #private;
+    fetchChildren: FetchChildrenFn<T>;
+    treeElement?: HTMLElement;
+    rootItems: import("@txstate-mws/svelte-store").DerivedStore<TypedTreeItem<T>[], ITreeStore<T>>;
+    draggable: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
+    dragging: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
+    selectedUndraggable: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
+    selected: import("@txstate-mws/svelte-store").DerivedStore<Map<string, TypedTreeItem<T>>, ITreeStore<T>>;
+    focused: import("@txstate-mws/svelte-store").DerivedStore<TypedTreeItem<T>, ITreeStore<T>>;
+    copied: import("@txstate-mws/svelte-store").DerivedStore<Map<string, TypedTreeItem<T>>, ITreeStore<T>>;
+    headerOverride: import("@txstate-mws/svelte-store").DerivedStore<Record<string, string>, ITreeStore<T>>;
+    moveHandler?: MoveHandlerFn<T>;
+    copyHandler?: CopyHandlerFn<T>;
+    dragEligibleHandler?: DragEligibleFn<T>;
+    dropEffectHandler?: DropEffectFn<T>;
+    singleSelect?: boolean;
+    private refreshPromise?;
+    constructor(fetchChildren: FetchChildrenFn<T>, { moveHandler, copyHandler, dragEligible, dropEffect, singleSelect }?: {
+        moveHandler?: MoveHandlerFn<T>;
+        copyHandler?: CopyHandlerFn<T>;
+        dragEligible?: DragEligibleFn<T>;
+        dropEffect?: DropEffectFn<T>;
+        singleSelect?: boolean;
+    });
+    visit(item: TypedTreeItem<T>, cb: (item: TypedTreeItem<T>) => Promise<void>): Promise<void>;
+    visitSync(item: TypedTreeItem<T>, cb: (item: TypedTreeItem<T>) => void): void;
+    addLookup(items: TypedTreeItem<T>[]): void;
+    cleanSelected(): void;
+    determineDraggable(): void;
+    trigger(): void;
+    fetch(item?: TypedTreeItem<T>): Promise<TypedTreeItem<T>[]>;
+    refresh(item?: TypedTreeItem<T>, skipNotify?: boolean): Promise<void>;
+    focus(item: TypedTreeItem<T> | undefined, notify?: boolean): void;
+    select(item: TypedTreeItem<T>, { clear, notify, toggle }: {
+        clear?: boolean;
+        notify?: boolean;
+        toggle?: boolean;
+    }): void;
+    selectById(id: string, { clear, notify, toggle }: {
+        clear?: boolean;
+        notify?: boolean;
+        toggle?: boolean;
+    }): void;
+    deselect(notify?: boolean): void;
+    isSelected(item: TypedTreeItem<T>): boolean;
+    open(item: TypedTreeItem<T>, notify?: boolean): Promise<void>;
+    openAndRefresh(item: TypedTreeItem<T>, notify?: boolean): Promise<void>;
+    close(item: TypedTreeItem<T>): void;
+    toggle(item: TypedTreeItem<T>): Promise<void>;
+    viewUnder(item?: TypedTreeItem<T>): Promise<void>;
+    dragStart(item: TypedTreeItem<T>): void;
+    protected _drop(item: TypedTreeItem<T>, droppedItems: Map<string, TypedTreeItem<T>>, above: boolean, userWantsCopy: boolean, userWantsRecursive: boolean | undefined): Promise<boolean>;
+    drop(item: TypedTreeItem<T>, above: boolean, userWantsCopy: any): Promise<boolean>;
+    collectAncestors(item: TypedTreeItem<T>): TypedTreeItem<T>[];
+    root(item: TypedTreeItem<T>): TypedTreeItem<T>;
+    findCommonParent(items: TypedTreeItem<T>[]): TypedTreeItem<T>;
+    dragEligible(selectedItems: TypedTreeItem<T>[], userWantsCopy: boolean): boolean;
+    protected _dropEffect(item: TypedTreeItem<T>, droppedItems: Map<string, TypedTreeItem<T>>, above: boolean, userWantsCopy: boolean): "none" | "copy" | "move";
+    dropEffect(item: TypedTreeItem<T>, above: boolean, userWantsCopy: boolean): "none" | "copy" | "move";
+    cut(): void;
+    copy(): void;
+    cutEligible(): boolean;
+    copyEligible(): boolean;
+    cancelCopy(): void;
+    pasteEligible(above?: boolean): boolean;
+    pasteEffect(above?: boolean): "none" | "copy" | "move";
+    paste(above?: boolean, userWantsRecursive?: boolean): Promise<boolean>;
+    setHeaderOverride(id: string, width: string): void;
+    resetHeaderOverride(): void;
+}