@vscode-elements/elements 2.0.0-pre.1 → 2.0.0-pre.3

package/dist/vscode-tree/vscode-tree.js

@@ -4,713 +4,415 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { VscElement } from '../includes/VscElement.js';
-import { stylePropertyMap } from '../includes/style-property-map.js';
-import '../vscode-badge/index.js';
-import '../vscode-icon/index.js';
-import styles from './vscode-tree.styles.js';
-const ARROW_OUTER_WIDTH = 30;
-const ARROW_ICON_WIDTH = 16;
-const CONTENT_PADDING = 3;
-const addPath = (tree, prevPath = []) => {
-    const nextTree = [];
-    tree.forEach((item, index) => {
-        const path = [...prevPath, index];
-        const nextItem = {
-            ...item,
-            path,
-        };
-        if (item.subItems) {
-            nextItem.subItems = addPath(item.subItems, path);
-        }
-        nextTree.push(nextItem);
-    });
-    return nextTree;
+import { html } from 'lit';
+import { provide } from '@lit/context';
+import { customElement, property, queryAssignedElements, } from 'lit/decorators.js';
+import { VscElement } from '../includes/VscElement';
+import styles from './vscode-tree.styles';
+import { configContext, treeContext, } from './tree-context';
+import { findNextItem, findPrevItem, findParentItem, initPathTrackerProps, } from './helpers.js';
+export const ExpandMode = {
+    singleClick: 'singleClick',
+    doubleClick: 'doubleClick',
 };
-const isBranch = (item) => {
-    if (item.subItems &&
-        Array.isArray(item.subItems) &&
-        item?.subItems?.length > 0) {
-        return true;
-    }
-    return false;
+export const IndentGuides = {
+    none: 'none',
+    onHover: 'onHover',
+    always: 'always',
 };
+const listenedKeys = [
+    ' ',
+    'ArrowDown',
+    'ArrowUp',
+    'ArrowLeft',
+    'ArrowRight',
+    'Enter',
+    'Escape',
+    'Shift',
+];
+const DEFAULT_HIDE_ARROWS = false;
+const DEFAULT_INDENT = 8;
+const DEFAULT_MULTI_SELECT = false;
+const DEFAULT_EXPAND_MODE = ExpandMode.singleClick;
+const DEFAULT_INDENT_GUIDE_DISPLAY = IndentGuides.onHover;
 /**
  * @tag vscode-tree
- *
- * @fires vsc-select Dispatched when an item is selected.
- * @fires {VscTreeSelectEvent} vsc-tree-select Dispatched when an item is selected.
- * @fires vsc-run-action Dispatched when an action icon is clicked.
- * @fires {VscTreeActionEvent} vsc-tree-action Dispatched when an action icon is clicked.
- *
- * @cssprop --vscode-focusBorder
- * @cssprop --vscode-font-family
- * @cssprop --vscode-font-size
- * @cssprop --vscode-font-weight
- * @cssprop --vscode-list-hoverForeground
- * @cssprop --vscode-list-hoverBackground
- * @cssprop --vscode-list-inactiveSelectionBackground
- * @cssprop --vscode-list-inactiveSelectionForeground
- * @cssprop --vscode-list-activeSelectionBackground
- * @cssprop --vscode-list-activeSelectionForeground
- * @cssprop --vscode-list-inactiveSelectionIconForeground
- * @cssprop --vscode-list-inactiveFocusBackground
- * @cssprop --vscode-list-inactiveFocusOutline
- * @cssprop --vscode-list-focusOutline
- * @cssprop --vscode-tree-inactiveIndentGuidesStroke
- * @cssprop --vscode-tree-indentGuidesStroke
- *
- * @csspart text-content
- * @csspart description
- * @csspart counter-badge-decoration
- * @csspart filled-circle-decoration
- * @csspart caption-decoration
- * @csspart decorations Container of decorations
  */
 let VscodeTree = class VscodeTree extends VscElement {
+    //#endregion
+    //#region lifecycle methods
     constructor() {
-        super(...arguments);
-        this.indent = 8;
-        this.arrows = false;
-        this.multiline = false;
-        this.tabindex = 0;
-        this.indentGuides = false;
-        this._data = [];
-        this._selectedItem = null;
-        this._focusedItem = null;
-        this._selectedBranch = null;
-        this._focusedBranch = null;
-        this._handleComponentKeyDownBound = this._handleComponentKeyDown.bind(this);
+        super();
+        //#region properties
+        /**
+         * Although arrows are always visible in the Tree component by default in VSCode, some icon sets
+         * (e.g., Material Icon Theme) allow disabling them in the file explorer view. This flag makes it
+         * possible to mimic that behavior.
+         *
+         * @type {boolean}
+         * @default false
+         */
+        this.hideArrows = DEFAULT_HIDE_ARROWS;
+        /**
+         * Controls how tree folders are expanded when clicked. This property is designed to use
+         * the `workbench.tree.expandMode` setting.
+         *
+         * Valid options are available as constants.
+         *
+         * ```javascript
+         * import {ExpandMode} from '@vscode-elements/elements/dist/vscode-tree/vscode-tree.js';
+         *
+         * document.querySelector('vscode-tree').expandMode = ExpandMode.singleClick;
+         * ```
+         *
+         * @type {'singleClick' | 'doubleClick'}
+         * @default 'singleClick'
+         */
+        this.expandMode = DEFAULT_EXPAND_MODE;
+        /**
+         * Controls the indentation in pixels. This property is designed to use the
+         * `workbench.tree.indent` setting.
+         *
+         * @type {number}
+         * @default 8
+         */
+        this.indent = DEFAULT_INDENT;
+        /**
+         * Controls whether the tree should render indent guides. This property is
+         * designed to use the `workbench.tree.renderIndentGuides` setting.
+         *
+         * Valid options are available as constants.
+         *
+         * ```javascript
+         * import {IndentGuides} from '@vscode-elements/elements/dist/vscode-tree/vscode-tree.js';
+         *
+         * document.querySelector('vscode-tree').expandMode = IndentGuides.onHover;
+         * ```
+         *
+         * @type {'none' | 'onHover' | 'always'}
+         * @default 'onHover'
+         */
+        this.indentGuides = DEFAULT_INDENT_GUIDE_DISPLAY;
+        /**
+         * Allows selecting multiple items.
+         *
+         * @type {boolean}
+         * @default false
+         */
+        this.multiSelect = DEFAULT_MULTI_SELECT;
+        //#endregion
+        //#region private variables
+        this._treeContextState = {
+            isShiftPressed: false,
+            activeItem: null,
+            selectedItems: new Set(),
+            allItems: null,
+            itemListUpToDate: false,
+            focusedItem: null,
+            prevFocusedItem: null,
+            hasBranchItem: false,
+            rootElement: this,
+            highlightedItems: new Set(),
+            highlightIndentGuides: () => {
+                this._highlightIndentGuides();
+            },
+            emitSelectEvent: () => {
+                this._emitSelectEvent();
+            },
+        };
+        this._configContext = {
+            hideArrows: DEFAULT_HIDE_ARROWS,
+            expandMode: DEFAULT_EXPAND_MODE,
+            indent: DEFAULT_INDENT,
+            indentGuides: DEFAULT_INDENT_GUIDE_DISPLAY,
+            multiSelect: DEFAULT_MULTI_SELECT,
+        };
+        this._handleComponentKeyDown = (ev) => {
+            const key = ev.key;
+            if (listenedKeys.includes(key)) {
+                ev.stopPropagation();
+                ev.preventDefault();
+            }
+            switch (key) {
+                case ' ':
+                case 'Enter':
+                    this._handleEnterPress();
+                    break;
+                case 'ArrowDown':
+                    this._handleArrowDownPress();
+                    break;
+                case 'ArrowLeft':
+                    this._handleArrowLeftPress(ev);
+                    break;
+                case 'ArrowRight':
+                    this._handleArrowRightPress();
+                    break;
+                case 'ArrowUp':
+                    this._handleArrowUpPress();
+                    break;
+                case 'Shift':
+                    this._handleShiftPress();
+                    break;
+                default:
+            }
+        };
+        this._handleComponentKeyUp = (ev) => {
+            if (ev.key === 'Shift') {
+                this._treeContextState.isShiftPressed = false;
+            }
+        };
+        this._handleSlotChange = () => {
+            this._treeContextState.itemListUpToDate = false;
+            initPathTrackerProps(this, this._assignedTreeItems);
+            this.updateComplete.then(() => {
+                if (this._treeContextState.activeItem === null) {
+                    const firstChild = this.querySelector(':scope > vscode-tree-item');
+                    if (firstChild) {
+                        firstChild.active = true;
+                    }
+                }
+            });
+        };
+        this.addEventListener('keyup', this._handleComponentKeyUp);
+        this.addEventListener('keydown', this._handleComponentKeyDown);
     }
-    set data(val) {
-        const oldVal = this._data;
-        this._data = addPath(val);
-        this.requestUpdate('data', oldVal);
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = 'tree';
     }
-    get data() {
-        return this._data;
+    willUpdate(changedProperties) {
+        this._updateConfigContext(changedProperties);
+        if (changedProperties.has('multiSelect')) {
+            this.ariaMultiSelectable = this.multiSelect ? 'true' : 'false';
+        }
     }
+    //#endregion
+    //#region public methods
     /**
-     * Closes all opened tree items recursively.
+     * Expands all folders.
      */
-    closeAll() {
-        this._closeSubTreeRecursively(this.data);
-        this.requestUpdate();
+    expandAll() {
+        const children = this.querySelectorAll('vscode-tree-item');
+        children.forEach((item) => {
+            if (item.branch) {
+                item.open = true;
+            }
+        });
     }
     /**
-     * Deselects all selected items.
+     * Collapses all folders.
      */
-    deselectAll() {
-        this._deselectItemsRecursively(this.data);
-        this.requestUpdate();
+    collapseAll() {
+        const children = this.querySelectorAll('vscode-tree-item');
+        children.forEach((item) => {
+            if (item.branch) {
+                item.open = false;
+            }
+        });
     }
     /**
-     * Returns a reference to a TreeItem object by path.
-     * @param path
-     * @returns
+     * @internal
+     * Updates `hasBranchItem` property in the context state in order to removing
+     * extra padding before the leaf elements, if it is required.
      */
-    getItemByPath(path) {
-        return this._getItemByPath(path);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('keydown', this._handleComponentKeyDownBound);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('keydown', this._handleComponentKeyDownBound);
+    updateHasBranchItemFlag() {
+        const hasBranchItem = this._assignedTreeItems.some((li) => li.branch);
+        this._treeContextState = { ...this._treeContextState, hasBranchItem };
     }
-    _getItemByPath(path) {
-        let current = this._data;
-        let item = null;
-        path.forEach((el, i) => {
-            if (i === path.length - 1) {
-                item = current[el];
-            }
-            else {
-                current = current[el].subItems;
-            }
+    //#endregion
+    //#region private methods
+    _emitSelectEvent() {
+        const ev = new CustomEvent('vsc-tree-select', {
+            detail: Array.from(this._treeContextState.selectedItems),
         });
-        return item;
-    }
-    _handleActionClick(ev) {
-        ev.stopPropagation();
-        const el = ev.target;
-        const itemPath = el.dataset.itemPath;
-        const actionIndex = el.dataset.index;
-        let item = null;
-        let actionId = '';
-        let value = '';
-        if (itemPath) {
-            const path = itemPath.split('/').map((p) => Number(p));
-            item = this._getItemByPath(path);
-            if (item?.actions) {
-                const index = Number(actionIndex);
-                if (item.actions[index]) {
-                    actionId = item.actions[index].actionId;
-                }
-            }
-            if (item?.value) {
-                value = item.value;
-            }
-        }
-        /** @deprecated Renamed to `vsc-tree-action` */
-        this.dispatchEvent(new CustomEvent('vsc-run-action', {
-            detail: {
-                actionId,
-                item,
-                value,
-            },
-        }));
-        /**
-         * Dispatched when an action icon is clicked.
-         */
-        this.dispatchEvent(new CustomEvent('vsc-tree-action', {
-            detail: {
-                actionId,
-                item,
-                value,
-            },
-        }));
+        this.dispatchEvent(ev);
     }
-    _renderIconVariant(variant) {
-        const { type, value } = variant;
-        if (type === 'themeicon') {
-            return html `<vscode-icon name=${value} class="theme-icon"></vscode-icon>`;
+    _highlightIndentGuideOfItem(item) {
+        if (item.branch && item.open) {
+            item.highlightedGuides = true;
+            this._treeContextState.highlightedItems?.add(item);
         }
         else {
-            return html `<span
-        class="image-icon"
-        .style=${stylePropertyMap({ backgroundImage: `url(${value})` })}
-      ></span>`;
-        }
-    }
-    _renderIcon(item) {
-        const iconVariants = {
-            branch: {
-                value: 'folder',
-                type: 'themeicon',
-            },
-            open: {
-                value: 'folder-opened',
-                type: 'themeicon',
-            },
-            leaf: {
-                value: 'file',
-                type: 'themeicon',
-            },
-        };
-        if (item.iconUrls) {
-            if (item.iconUrls.branch) {
-                iconVariants.branch = {
-                    value: item.iconUrls.branch,
-                    type: 'image',
-                };
-            }
-            if (item.iconUrls.leaf) {
-                iconVariants.leaf = {
-                    value: item.iconUrls.leaf,
-                    type: 'image',
-                };
-            }
-            if (item.iconUrls.open) {
-                iconVariants.open = {
-                    value: item.iconUrls.open,
-                    type: 'image',
-                };
+            const parent = findParentItem(item);
+            if (parent) {
+                parent.highlightedGuides = true;
+                this._treeContextState.highlightedItems?.add(parent);
             }
         }
-        else if (typeof item.icons === 'object') {
-            if (item.icons.branch) {
-                iconVariants.branch = {
-                    value: item.icons.branch,
-                    type: 'themeicon',
-                };
-            }
-            if (item.icons.leaf) {
-                iconVariants.leaf = {
-                    value: item.icons.leaf,
-                    type: 'themeicon',
-                };
-            }
-            if (item.icons.open) {
-                iconVariants.open = {
-                    value: item.icons.open,
-                    type: 'themeicon',
-                };
-            }
-        }
-        else if (!item.icons) {
-            return html `${nothing}`;
-        }
-        if (isBranch(item)) {
-            if (item.open) {
-                return this._renderIconVariant(iconVariants.open);
-            }
-            else {
-                return this._renderIconVariant(iconVariants.branch);
-            }
-        }
-        else {
-            return this._renderIconVariant(iconVariants.leaf);
-        }
     }
-    _renderArrow(item) {
-        if (!this.arrows || !isBranch(item)) {
-            return html `${nothing}`;
-        }
-        const { open = false } = item;
-        const arrowIconName = open ? 'chevron-down' : 'chevron-right';
-        return html `
-      <div class="arrow-container">
-        <vscode-icon name=${arrowIconName} class="icon-arrow"></vscode-icon>
-      </div>
-    `;
-    }
-    _renderActions(item) {
-        const actionButtons = [];
-        if (item.actions && Array.isArray(item.actions)) {
-            item.actions.forEach((action, index) => {
-                if (action.icon) {
-                    const icon = html `<vscode-icon
-            name=${action.icon}
-            action-icon
-            title=${ifDefined(action.tooltip)}
-            data-item-path=${ifDefined(item.path?.join('/'))}
-            data-index=${index}
-            class="action-icon"
-            @click=${this._handleActionClick}
-          ></vscode-icon>`;
-                    actionButtons.push(icon);
-                }
-            });
-        }
-        if (actionButtons.length > 0) {
-            return html `<div class="actions">${actionButtons}</div>`;
+    _highlightIndentGuides() {
+        if (this.indentGuides === IndentGuides.none) {
+            return;
         }
-        else {
-            return html `${nothing}`;
+        this._treeContextState.highlightedItems?.forEach((i) => (i.highlightedGuides = false));
+        this._treeContextState.highlightedItems?.clear();
+        if (this._treeContextState.activeItem) {
+            this._highlightIndentGuideOfItem(this._treeContextState.activeItem);
         }
+        this._treeContextState.selectedItems.forEach((item) => {
+            this._highlightIndentGuideOfItem(item);
+        });
     }
-    _renderDecorations(item) {
-        const decorations = [];
-        if (item.decorations && Array.isArray(item.decorations)) {
-            item.decorations.forEach((decoration) => {
-                const { appearance = 'text', visibleWhen = 'always', content = '', color = '', focusedColor = '', hoverColor = '', selectedColor = '', } = decoration;
-                const visibleWhenClass = `visible-when-${visibleWhen}`;
-                const inlineStyles = {};
-                if (color) {
-                    inlineStyles['--color'] = color;
-                }
-                if (focusedColor) {
-                    inlineStyles['--focused-color'] = focusedColor;
-                }
-                if (hoverColor) {
-                    inlineStyles['--hover-color'] = hoverColor;
-                }
-                if (selectedColor) {
-                    inlineStyles['--selected-color'] = selectedColor;
-                }
-                switch (appearance) {
-                    case 'counter-badge':
-                        decorations.push(html `<vscode-badge
-                variant="counter"
-                class=${['counter-badge', visibleWhenClass].join(' ')}
-                part="counter-badge-decoration"
-                >${content}</vscode-badge
-              >`);
-                        break;
-                    case 'filled-circle':
-                        decorations.push(html `<vscode-icon
-                name="circle-filled"
-                size="14"
-                class=${['filled-circle', visibleWhenClass].join(' ')}
-                part="filled-circle-decoration"
-                .style=${stylePropertyMap(inlineStyles)}
-              ></vscode-icon>`);
-                        break;
-                    case 'text':
-                        decorations.push(html `<div
-                class=${['decoration-text', visibleWhenClass].join(' ')}
-                part="caption-decoration"
-                .style=${stylePropertyMap(inlineStyles)}
-              >
-                ${content}
-              </div>`);
-                        break;
-                    default:
-                }
-            });
+    _updateConfigContext(changedProperties) {
+        const { hideArrows, expandMode, indent, indentGuides, multiSelect } = this;
+        if (changedProperties.has('hideArrows')) {
+            this._configContext = { ...this._configContext, hideArrows };
         }
-        if (decorations.length > 0) {
-            return html `<div class="decorations" part="decorations">
-        ${decorations}
-      </div>`;
+        if (changedProperties.has('expandMode')) {
+            this._configContext = { ...this._configContext, expandMode };
         }
-        else {
-            return html `${nothing}`;
+        if (changedProperties.has('indent')) {
+            this._configContext = { ...this._configContext, indent };
         }
-    }
-    _renderTreeItem(item, additionalOptions) {
-        const { open = false, label, description = '', tooltip, selected = false, focused = false, subItems = [], } = item;
-        const { path, itemType, hasFocusedItem = false, hasSelectedItem = false, } = additionalOptions;
-        const indentLevel = path.length - 1;
-        const contentsClasses = ['contents'];
-        const liClasses = open ? ['open'] : [];
-        const indentSize = indentLevel * this.indent;
-        const padLeft = this.arrows && itemType === 'leaf'
-            ? ARROW_OUTER_WIDTH + indentSize
-            : indentSize;
-        const arrowMarkup = this._renderArrow(item);
-        const iconMarkup = this._renderIcon(item);
-        const indentGuidePos = this.arrows
-            ? indentSize + ARROW_ICON_WIDTH
-            : indentSize + CONTENT_PADDING;
-        const subTreeMarkup = open && itemType === 'branch'
-            ? html `<ul
-            .style=${stylePropertyMap({
-                '--indent-guide-pos': `${indentGuidePos}px`,
-            })}
-            class=${classMap({
-                'has-active-item': hasFocusedItem || hasSelectedItem,
-            })}
-          >
-            ${this._renderTree(subItems, path)}
-          </ul>`
-            : nothing;
-        const descriptionMarkup = description
-            ? html `<span class="description" part="description">${description}</span>`
-            : nothing;
-        const actionsMarkup = this._renderActions(item);
-        const decorationsMarkup = this._renderDecorations(item);
-        liClasses.push(itemType);
-        if (selected) {
-            contentsClasses.push('selected');
+        if (changedProperties.has('indentGuides')) {
+            this._configContext = { ...this._configContext, indentGuides };
         }
-        if (focused) {
-            contentsClasses.push('focused');
+        if (changedProperties.has('multiSelect')) {
+            this._configContext = { ...this._configContext, multiSelect };
         }
-        return html `
-      <li data-path=${path.join('/')} class=${liClasses.join(' ')}>
-        <div
-          class=${contentsClasses.join(' ')}
-          .style=${stylePropertyMap({
-            paddingLeft: `${padLeft + CONTENT_PADDING}px`,
-        })}
-        >
-          ${arrowMarkup}${iconMarkup}<span
-            class="text-content"
-            part="text-content"
-            title=${ifDefined(tooltip)}
-            >${label}${descriptionMarkup}</span
-          >
-          ${actionsMarkup} ${decorationsMarkup}
-        </div>
-        ${subTreeMarkup}
-      </li>
-    `;
     }
-    _renderTree(tree, oldPath = []) {
-        const ret = [];
-        if (!tree) {
-            return nothing;
-        }
-        tree.forEach((item, index) => {
-            const path = [...oldPath, index];
-            const itemType = isBranch(item) ? 'branch' : 'leaf';
-            const { selected = false, focused = false, hasFocusedItem = false, hasSelectedItem = false, } = item;
-            if (selected) {
-                this._selectedItem = item;
-            }
-            if (focused) {
-                this._focusedItem = item;
-            }
-            ret.push(this._renderTreeItem(item, {
-                path,
-                itemType,
-                hasFocusedItem,
-                hasSelectedItem,
-            }));
+    _focusItem(item) {
+        item.active = true;
+        item.updateComplete.then(() => {
+            item.focus();
+            this._highlightIndentGuides();
         });
-        return ret;
     }
-    _selectItem(item) {
-        if (this._selectedItem) {
-            this._selectedItem.selected = false;
-        }
-        if (this._focusedItem) {
-            this._focusedItem.focused = false;
-        }
-        this._selectedItem = item;
-        item.selected = true;
-        this._focusedItem = item;
-        item.focused = true;
-        if (this._selectedBranch) {
-            this._selectedBranch.hasSelectedItem = false;
-        }
-        let parentBranch = null;
-        if (item.path?.length && item.path.length > 1) {
-            parentBranch = this._getItemByPath(item.path.slice(0, -1));
-        }
-        if (isBranch(item)) {
-            this._selectedBranch = item;
-            item.hasSelectedItem = true;
-            item.open = !item.open;
-            if (!item.open) {
-                if (parentBranch) {
-                    this._selectedBranch = parentBranch;
-                    parentBranch.hasSelectedItem = true;
+    _focusPrevItem() {
+        if (this._treeContextState.focusedItem) {
+            const item = findPrevItem(this._treeContextState.focusedItem);
+            if (item) {
+                this._focusItem(item);
+                if (this._treeContextState.isShiftPressed && this.multiSelect) {
+                    item.selected = !item.selected;
+                    this._emitSelectEvent();
                 }
             }
-            else {
-                this._selectedBranch = item;
-                item.hasSelectedItem = true;
-            }
         }
-        else {
-            if (item.path?.length && item.path.length > 1) {
-                const parentBranch = this._getItemByPath(item.path.slice(0, -1));
-                if (parentBranch) {
-                    this._selectedBranch = parentBranch;
-                    parentBranch.hasSelectedItem = true;
-                }
-            }
-            else {
-                this._selectedBranch = item;
-                item.hasSelectedItem = true;
-            }
-        }
-        this._emitSelectEvent(this._selectedItem, this._selectedItem.path.join('/'));
-        this.requestUpdate();
     }
-    _focusItem(item) {
-        if (this._focusedItem) {
-            this._focusedItem.focused = false;
-        }
-        this._focusedItem = item;
-        item.focused = true;
-        const isBranch = !!item?.subItems?.length;
-        if (this._focusedBranch) {
-            this._focusedBranch.hasFocusedItem = false;
-        }
-        let parentBranch = null;
-        if (item.path?.length && item.path.length > 1) {
-            parentBranch = this._getItemByPath(item.path.slice(0, -1));
-        }
-        if (!isBranch) {
-            if (parentBranch) {
-                this._focusedBranch = parentBranch;
-                parentBranch.hasFocusedItem = true;
-            }
-        }
-        else {
-            if (item.open) {
-                this._focusedBranch = item;
-                item.hasFocusedItem = true;
-            }
-            else if (!item.open && parentBranch) {
-                this._focusedBranch = parentBranch;
-                parentBranch.hasFocusedItem = true;
+    _focusNextItem() {
+        if (this._treeContextState.focusedItem) {
+            const item = findNextItem(this._treeContextState.focusedItem);
+            if (item) {
+                this._focusItem(item);
+                if (this._treeContextState.isShiftPressed && this.multiSelect) {
+                    item.selected = !item.selected;
+                    this._emitSelectEvent();
+                }
             }
         }
     }
-    _closeSubTreeRecursively(tree) {
-        tree.forEach((item) => {
-            item.open = false;
-            if (item.subItems && item.subItems.length > 0) {
-                this._closeSubTreeRecursively(item.subItems);
-            }
-        });
-    }
-    _deselectItemsRecursively(tree) {
-        tree.forEach((item) => {
-            if (item.selected) {
-                item.selected = false;
-            }
-            if (item.subItems && item.subItems.length > 0) {
-                this._deselectItemsRecursively(item.subItems);
-            }
-        });
-    }
-    _emitSelectEvent(item, path) {
-        const { icons, label, open, value } = item;
-        const detail = {
-            icons,
-            itemType: isBranch(item) ? 'branch' : 'leaf',
-            label,
-            open: open || false,
-            value: value || label,
-            path,
-        };
-        /** @deprecated Renamed to `vsc-tree-select` */
-        this.dispatchEvent(new CustomEvent('vsc-select', {
-            bubbles: true,
-            composed: true,
-            detail,
-        }));
-        this.dispatchEvent(new CustomEvent('vsc-tree-select', {
-            detail,
-        }));
-    }
-    _focusPrevItem() {
-        if (!this._focusedItem) {
-            this._focusItem(this._data[0]);
+    //#endregion
+    //#region event handlers
+    _handleArrowRightPress() {
+        if (!this._treeContextState.focusedItem) {
             return;
         }
-        const { path } = this._focusedItem;
-        if (path && path?.length > 0) {
-            const currentItemIndex = path[path.length - 1];
-            const hasParent = path.length > 1;
-            if (currentItemIndex > 0) {
-                const newPath = [...path];
-                newPath[newPath.length - 1] = currentItemIndex - 1;
-                const prevSibling = this._getItemByPath(newPath);
-                let newFocusedItem = prevSibling;
-                if (prevSibling?.open && prevSibling.subItems?.length) {
-                    const { subItems } = prevSibling;
-                    newFocusedItem = subItems[subItems.length - 1];
-                }
-                this._focusItem(newFocusedItem);
+        const { focusedItem } = this._treeContextState;
+        if (focusedItem.branch) {
+            if (focusedItem.open) {
+                this._focusNextItem();
             }
             else {
-                if (hasParent) {
-                    const newPath = [...path];
-                    newPath.pop();
-                    this._focusItem(this._getItemByPath(newPath));
-                }
+                focusedItem.open = true;
             }
         }
-        else {
-            this._focusItem(this._data[0]);
-        }
     }
-    _focusNextItem() {
-        if (!this._focusedItem) {
-            this._focusItem(this._data[0]);
+    _handleArrowLeftPress(ev) {
+        if (ev.ctrlKey) {
+            this.collapseAll();
             return;
         }
-        const { path, open } = this._focusedItem;
-        if (open &&
-            Array.isArray(this._focusedItem.subItems) &&
-            this._focusedItem.subItems.length > 0) {
-            this._focusItem(this._focusedItem.subItems[0]);
+        if (!this._treeContextState.focusedItem) {
             return;
         }
-        const nextPath = [...path];
-        nextPath[nextPath.length - 1] += 1;
-        let nextFocusedItem = this._getItemByPath(nextPath);
-        if (nextFocusedItem) {
-            this._focusItem(nextFocusedItem);
+        const { focusedItem } = this._treeContextState;
+        const parent = findParentItem(focusedItem);
+        if (!focusedItem.branch) {
+            if (parent && parent.branch) {
+                this._focusItem(parent);
+            }
         }
         else {
-            nextPath.pop();
-            if (nextPath.length > 0) {
-                nextPath[nextPath.length - 1] += 1;
-                nextFocusedItem = this._getItemByPath(nextPath);
-                if (nextFocusedItem) {
-                    this._focusItem(nextFocusedItem);
+            if (focusedItem.open) {
+                focusedItem.open = false;
+            }
+            else {
+                if (parent && parent.branch) {
+                    this._focusItem(parent);
                 }
             }
         }
     }
-    _handleClick(event) {
-        const composedPath = event.composedPath();
-        const targetElement = composedPath.find((el) => el.tagName &&
-            el.tagName.toUpperCase() === 'LI');
-        if (targetElement) {
-            const pathStr = targetElement.dataset.path || '';
-            const path = pathStr.split('/').map((el) => Number(el));
-            const item = this._getItemByPath(path);
-            this._selectItem(item);
+    _handleArrowDownPress() {
+        if (this._treeContextState.focusedItem) {
+            this._focusNextItem();
         }
         else {
-            if (this._focusedItem) {
-                this._focusedItem.focused = false;
-            }
-            this._focusedItem = null;
+            this._focusItem(this._assignedTreeItems[0]);
         }
     }
-    _handleComponentKeyDown(ev) {
-        const keys = [
-            ' ',
-            'ArrowDown',
-            'ArrowUp',
-            'Enter',
-            'Escape',
-        ];
-        const key = ev.key;
-        if (keys.includes(ev.key)) {
-            ev.stopPropagation();
-            ev.preventDefault();
-        }
-        if (key === 'Escape') {
-            this._focusedItem = null;
-        }
-        if (key === 'ArrowUp') {
+    _handleArrowUpPress() {
+        if (this._treeContextState.focusedItem) {
             this._focusPrevItem();
         }
-        if (key === 'ArrowDown') {
-            this._focusNextItem();
+        else {
+            this._focusItem(this._assignedTreeItems[0]);
         }
-        if (key === 'Enter' || key === ' ') {
-            if (this._focusedItem) {
-                this._selectItem(this._focusedItem);
+    }
+    _handleEnterPress() {
+        const { focusedItem } = this._treeContextState;
+        if (focusedItem) {
+            this._treeContextState.selectedItems.forEach((li) => (li.selected = false));
+            this._treeContextState.selectedItems.clear();
+            this._highlightIndentGuides();
+            focusedItem.selected = true;
+            this._emitSelectEvent();
+            if (focusedItem.branch) {
+                focusedItem.open = !focusedItem.open;
             }
         }
     }
+    _handleShiftPress() {
+        this._treeContextState.isShiftPressed = true;
+    }
+    //#endregion
     render() {
-        const classes = classMap({
-            multi: this.multiline,
-            single: !this.multiline,
-            wrapper: true,
-            'has-not-focused-item': !this._focusedItem,
-            'selection-none': !this._selectedItem,
-            'selection-single': this._selectedItem !== null,
-        });
-        return html `
-      <div @click=${this._handleClick} class=${classes}>
-        <ul>
-          ${this._renderTree(this._data)}
-        </ul>
-      </div>
-    `;
+        return html `<div>
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    </div>`;
     }
 };
 VscodeTree.styles = styles;
 __decorate([
-    property({ type: Array, reflect: false })
-], VscodeTree.prototype, "data", null);
+    property({ type: Boolean, reflect: true, attribute: 'hide-arrows' })
+], VscodeTree.prototype, "hideArrows", void 0);
 __decorate([
-    property({ type: Number })
-], VscodeTree.prototype, "indent", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], VscodeTree.prototype, "arrows", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], VscodeTree.prototype, "multiline", void 0);
+    property({ type: String, attribute: 'expand-mode' })
+], VscodeTree.prototype, "expandMode", void 0);
 __decorate([
     property({ type: Number, reflect: true })
-], VscodeTree.prototype, "tabindex", void 0);
+], VscodeTree.prototype, "indent", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'indent-guides' })
+    property({
+        type: String,
+        attribute: 'indent-guides',
+        useDefault: true,
+        reflect: true,
+    })
 ], VscodeTree.prototype, "indentGuides", void 0);
 __decorate([
-    state()
-], VscodeTree.prototype, "_selectedItem", void 0);
+    property({ type: Boolean, reflect: true, attribute: 'multi-select' })
+], VscodeTree.prototype, "multiSelect", void 0);
 __decorate([
-    state()
-], VscodeTree.prototype, "_focusedItem", void 0);
+    provide({ context: treeContext })
+], VscodeTree.prototype, "_treeContextState", void 0);
 __decorate([
-    state()
-], VscodeTree.prototype, "_selectedBranch", void 0);
+    provide({ context: configContext })
+], VscodeTree.prototype, "_configContext", void 0);
 __decorate([
-    state()
-], VscodeTree.prototype, "_focusedBranch", void 0);
+    queryAssignedElements({ selector: 'vscode-tree-item' })
+], VscodeTree.prototype, "_assignedTreeItems", void 0);
 VscodeTree = __decorate([
     customElement('vscode-tree')
 ], VscodeTree);