@theia/core 1.22.1 → 1.23.0-next.26

package/src/browser/shell/application-shell.ts

@@ -24,7 +24,7 @@ import { Message } from '@phosphor/messaging';
 import { IDragEvent } from '@phosphor/dragdrop';
 import { RecursivePartial, Event as CommonEvent, DisposableCollection, Disposable, environment } from '../../common';
 import { animationFrame } from '../browser';
-import { Saveable, SaveableWidget, SaveOptions } from '../saveable';
+import { Saveable, SaveableWidget, SaveOptions, SaveableSource } from '../saveable';
 import { StatusBarImpl, StatusBarEntry, StatusBarAlignment } from '../status-bar/status-bar';
 import { TheiaDockPanel, BOTTOM_AREA_ID, MAIN_AREA_ID } from './theia-dock-panel';
 import { SidePanelHandler, SidePanel, SidePanelHandlerFactory } from './side-panel-handler';
@@ -1025,7 +1025,7 @@ export class ApplicationShell extends Widget {
         }
         this.tracker.add(widget);
         this.checkActivation(widget);
-        Saveable.apply(widget);
+        Saveable.apply(widget, () => this.widgets.filter((maybeSaveable): maybeSaveable is Widget & SaveableSource => !!Saveable.get(maybeSaveable)));
         if (ApplicationShell.TrackableWidgetProvider.is(widget)) {
             for (const toTrack of widget.getTrackableWidgets()) {
                 this.track(toTrack);
@@ -1036,6 +1036,11 @@ export class ApplicationShell extends Widget {
         }
     }
 
+    /**
+     * @returns an array of Widgets, all of which are tracked by the focus tracker
+     * The first member of the array is the widget whose id is passed in, and the other widgets
+     * are its tracked parents in ascending order
+     */
     protected toTrackedStack(id: string): Widget[] {
         const tracked = new Map<string, Widget>(this.tracker.widgets.map(w => [w.id, w] as [string, Widget]));
         let current = tracked.get(id);
@@ -1392,24 +1397,23 @@ export class ApplicationShell extends Widget {
      * @param filter
      *      If undefined, all tabs are closed; otherwise only those tabs that match the filter are closed.
      */
-    closeTabs(tabBarOrArea: TabBar<Widget> | ApplicationShell.Area,
-        filter?: (title: Title<Widget>, index: number) => boolean): void {
+    async closeTabs(tabBarOrArea: TabBar<Widget> | ApplicationShell.Area,
+        filter?: (title: Title<Widget>, index: number) => boolean): Promise<void> {
+        const titles: Array<Title<Widget>> = [];
         if (tabBarOrArea === 'main') {
-            this.mainAreaTabBars.forEach(tb => this.closeTabs(tb, filter));
+            this.mainAreaTabBars.forEach(tabbar => titles.push(...toArray(tabbar.titles)));
         } else if (tabBarOrArea === 'bottom') {
-            this.bottomAreaTabBars.forEach(tb => this.closeTabs(tb, filter));
+            this.bottomAreaTabBars.forEach(tabbar => titles.push(...toArray(tabbar.titles)));
         } else if (typeof tabBarOrArea === 'string') {
-            const tabBar = this.getTabBarFor(tabBarOrArea);
-            if (tabBar) {
-                this.closeTabs(tabBar, filter);
+            const tabbar = this.getTabBarFor(tabBarOrArea);
+            if (tabbar) {
+                titles.push(...toArray(tabbar.titles));
             }
         } else if (tabBarOrArea) {
-            const titles = toArray(tabBarOrArea.titles);
-            for (let i = 0; i < titles.length; i++) {
-                if (filter === undefined || filter(titles[i], i)) {
-                    titles[i].owner.close();
-                }
-            }
+            titles.push(...toArray(tabBarOrArea.titles));
+        }
+        if (titles.length) {
+            await this.closeMany((filter ? titles.filter(filter) : titles).map(title => title.owner));
         }
     }
 
@@ -1436,6 +1440,22 @@ export class ApplicationShell extends Widget {
         }
     }
 
+    /**
+     * @param targets the widgets to be closed
+     * @return an array of all the widgets that were actually closed.
+     */
+    async closeMany(targets: Widget[], options?: ApplicationShell.CloseOptions): Promise<Widget[]> {
+        if (options?.save === false || await Saveable.confirmSaveBeforeClose(targets, this.widgets.filter(widget => !targets.includes(widget)))) {
+            return (await Promise.all(targets.map(target => this.closeWidget(target.id, options)))).filter((widget): widget is Widget => widget !== undefined);
+        }
+        return [];
+    }
+
+    /**
+     * @returns the widget that was closed, if any, `undefined` otherwise.
+     *
+     * If your use case requires closing multiple widgets, use {@link ApplicationShell#closeMany} instead. That method handles closing saveable widgets more reliably.
+     */
     async closeWidget(id: string, options?: ApplicationShell.CloseOptions): Promise<Widget | undefined> {
         // TODO handle save for composite widgets, i.e. the preference widget has 2 editors
         const stack = this.toTrackedStack(id);
@@ -1443,17 +1463,10 @@ export class ApplicationShell extends Widget {
         if (!current) {
             return undefined;
         }
-        let pendingClose;
-        if (SaveableWidget.is(current)) {
-            let shouldSave;
-            if (options && 'save' in options) {
-                shouldSave = () => options.save;
-            }
-            pendingClose = current.closeWithSaving({ shouldSave });
-        } else {
-            current.close();
-            pendingClose = waitForClosed(current);
-        };
+        const saveableOptions = options && { shouldSave: () => options.save };
+        const pendingClose = SaveableWidget.is(current)
+            ? current.closeWithSaving(saveableOptions)
+            : (current.close(), waitForClosed(current));
         await Promise.all([
             pendingClose,
             this.pendingUpdates
@@ -1744,8 +1757,9 @@ export class ApplicationShell extends Widget {
         if (!prevBar) {
             return false;
         }
-        const len = prevBar.titles.length;
-        prevBar.currentIndex = len - 1;
+        if (!prevBar.currentTitle) {
+            prevBar.currentIndex = prevBar.titles.length - 1;
+        }
         if (prevBar.currentTitle) {
             this.activateWidget(prevBar.currentTitle.owner.id);
         }

package/src/browser/shell/side-panel-handler.ts

@@ -458,6 +458,7 @@ export class SidePanelHandler {
         const currentTitle = tabBar.currentTitle;
         // eslint-disable-next-line no-null/no-null
         const hideDockPanel = currentTitle === null;
+        this.updateSashState(this.container, hideDockPanel);
         let relativeSizes: number[] | undefined;
 
         if (hideDockPanel) {
@@ -659,6 +660,17 @@ export class SidePanelHandler {
         this.refresh();
     }
 
+    protected updateSashState(sidePanelElement: Panel | null, sidePanelCollapsed: boolean): void {
+        if (sidePanelElement) {
+            // Hide the sash when the left/right side panel is collapsed
+            if (sidePanelElement.id === 'theia-left-content-panel' && sidePanelElement.node.nextElementSibling) {
+                sidePanelElement.node.nextElementSibling.classList.toggle('sash-hidden', sidePanelCollapsed);
+            } else if (sidePanelElement.id === 'theia-right-content-panel' && sidePanelElement.node.previousElementSibling) {
+                sidePanelElement.node.previousElementSibling.classList.toggle('sash-hidden', sidePanelCollapsed);
+            }
+        }
+    }
+
 }
 
 export namespace SidePanel {

package/src/browser/shell/tab-bars.ts

@@ -640,6 +640,7 @@ export class ToolbarAwareTabBar extends ScrollableTabBar {
     /**
      * Overrides the `contentNode` property getter in PhosphorJS' TabBar.
      */
+    // @ts-expect-error TS2611 `TabBar<T>.contentNode` is declared as `readonly contentNode` but is implemented as a getter.
     get contentNode(): HTMLUListElement {
         return this.tabBarContainer.getElementsByClassName(ToolbarAwareTabBar.Styles.TAB_BAR_CONTENT)[0] as HTMLUListElement;
     }

package/src/browser/source-tree/source-tree-widget.tsx

@@ -17,7 +17,7 @@
 import * as React from 'react';
 import { injectable, postConstruct, interfaces, Container } from 'inversify';
 import { DisposableCollection } from '../../common/disposable';
-import { TreeWidget, TreeNode, createTreeContainer, TreeProps, TreeImpl, Tree, TreeModel } from '../tree';
+import { TreeWidget, TreeNode, createTreeContainer, TreeProps, TreeModel } from '../tree';
 import { TreeSource, TreeElement } from './tree-source';
 import { SourceTree, TreeElementNode, TreeSourceNode } from './source-tree';
 
@@ -25,14 +25,11 @@ import { SourceTree, TreeElementNode, TreeSourceNode } from './source-tree';
 export class SourceTreeWidget extends TreeWidget {
 
     static createContainer(parent: interfaces.Container, props?: Partial<TreeProps>): Container {
-        const child = createTreeContainer(parent, props);
-
-        child.unbind(TreeImpl);
-        child.bind(SourceTree).toSelf();
-        child.rebind(Tree).toService(SourceTree);
-
-        child.unbind(TreeWidget);
-        child.bind(SourceTreeWidget).toSelf();
+        const child = createTreeContainer(parent, {
+            props,
+            tree: SourceTree,
+            widget: SourceTreeWidget,
+        });
 
         return child;
     }

package/src/browser/source-tree/source-tree.ts

@@ -14,6 +14,8 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { injectable } from 'inversify';
 import { MaybePromise } from '../../common/types';
 import { TreeImpl, CompositeTreeNode, TreeNode, SelectableTreeNode, ExpandableTreeNode } from '../tree';
@@ -67,15 +69,15 @@ export class SourceTree extends TreeImpl {
             } as TreeElementNode;
         }
         if (CompositeTreeElementNode.is(updated)) {
-            delete updated.expanded;
-            delete updated.children;
+            delete (updated as any).expanded;
+            delete (updated as any).children;
         }
         if (updated) {
             if (ExpandableTreeNode.is(updated)) {
-                delete updated.expanded;
+                delete (updated as any).expanded;
             }
             if (CompositeTreeNode.is(updated)) {
-                delete updated.children;
+                delete (updated as any).children;
             }
             return updated;
         }

package/src/browser/style/sidepanel.css

@@ -228,6 +228,10 @@
   font-size: 16px;
 }
 
+.p-SplitPanel-handle.sash-hidden {
+  visibility: hidden;
+}
+
 /*-----------------------------------------------------------------------------
 | Perfect scrollbar
 |----------------------------------------------------------------------------*/

package/src/browser/style/view-container.css

@@ -63,14 +63,6 @@
     min-height: var(--theia-sash-width);
 }
 
-.p-SplitPanel[data-orientation='vertical'] > .p-SplitPanel-handle.sash-hidden {
-    visibility: hidden;
-}
-
-.p-SplitPanel[data-orientation='vertical'] > .p-SplitPanel-handle.sash-hidden::after {
-    min-height: 0px;
-}
-
 .theia-view-container .part {
     height: 100%;
 }

package/src/browser/tree/index.ts

@@ -25,3 +25,4 @@ export * from './tree-view-welcome-widget';
 export * from './tree-container';
 export * from './tree-decorator';
 export * from './tree-search';
+export * from './tree-compression';

package/src/browser/tree/tree-compression/compressed-tree-expansion-service.ts

@@ -0,0 +1,46 @@
+/********************************************************************************
+ * Copyright (C) 2022 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { injectable, inject } from 'inversify';
+import { CompressionToggle, TreeCompressionService } from './tree-compression-service';
+import { ExpandableTreeNode, TreeExpansionServiceImpl } from '../tree-expansion';
+
+@injectable()
+export class CompressedExpansionService extends TreeExpansionServiceImpl {
+    @inject(CompressionToggle) protected readonly compressionToggle: CompressionToggle;
+    @inject(TreeCompressionService) protected readonly compressionService: TreeCompressionService;
+
+    async expandNode(raw: ExpandableTreeNode): Promise<ExpandableTreeNode | undefined> {
+        if (!this.compressionToggle.compress) { return super.expandNode(raw); }
+        const participants = this.compressionService.getCompressionChain(raw);
+        let expansionRoot;
+        for (const node of participants ?? [raw]) {
+            const next = await super.expandNode(node);
+            expansionRoot = expansionRoot ?? next;
+        }
+        return expansionRoot;
+    }
+
+    async collapseNode(raw: ExpandableTreeNode): Promise<boolean> {
+        if (!this.compressionToggle.compress) { return super.collapseNode(raw); }
+        const participants = this.compressionService.getCompressionChain(raw);
+        let didCollapse = false;
+        for (const participant of participants ?? [raw]) {
+            didCollapse = await super.collapseNode(participant) || didCollapse;
+        }
+        return didCollapse;
+    }
+}

package/src/browser/tree/tree-compression/compressed-tree-model.ts

@@ -0,0 +1,82 @@
+/********************************************************************************
+ * Copyright (C) 2022 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { injectable, inject } from 'inversify';
+import { CompressionToggle, TreeCompressionService } from './tree-compression-service';
+import { CompositeTreeNode, TreeNode } from '../tree';
+import { TreeModelImpl } from '../tree-model';
+import { SelectableTreeNode, TreeSelection } from '../tree-selection';
+import { ExpandableTreeNode } from '../tree-expansion';
+import { TopDownTreeIterator, TreeIterator } from '../tree-iterator';
+
+export class TopDownCompressedTreeIterator extends TopDownTreeIterator {
+    protected isCollapsed(candidate: TreeNode): boolean {
+        return ExpandableTreeNode.isCollapsed(candidate) && !TreeCompressionService.prototype.isCompressionParent(candidate);
+    }
+}
+
+enum BackOrForward {
+    Forward,
+    Backward,
+}
+
+@injectable()
+export class CompressedTreeModel extends TreeModelImpl {
+    @inject(CompressionToggle) protected readonly compressionToggle: CompressionToggle;
+    @inject(TreeCompressionService) protected readonly compressionService: TreeCompressionService;
+
+    protected selectAdjacentRow(direction: BackOrForward, type: TreeSelection.SelectionType = TreeSelection.SelectionType.DEFAULT): void {
+        let startingPoint: TreeNode = this.selectedNodes[0];
+        if (this.compressionService.isCompressionParticipant(startingPoint)) {
+            const chain = this.compressionService.getCompressionChain(startingPoint);
+            startingPoint = (direction === BackOrForward.Backward ? chain?.head() : chain?.tail()) ?? startingPoint;
+        }
+
+        const iterator = direction === BackOrForward.Backward ? this.createBackwardIterator(startingPoint) : this.createIterator(startingPoint);
+
+        const test = (candidate: TreeNode): candidate is SelectableTreeNode => SelectableTreeNode.isVisible(candidate)
+            && (this.compressionService.isCompressionHead(candidate) || !this.compressionService.isCompressionParticipant(candidate));
+
+        const rowRoot = iterator && this.doGetNextNode(iterator, test);
+        const nodes: Array<TreeNode | undefined> = (this.compressionService.getCompressionChain(rowRoot) ?? [rowRoot]).reverse();
+
+        const node = nodes.find(SelectableTreeNode.is);
+
+        if (node) {
+            this.addSelection({ node, type });
+        }
+    }
+
+    selectPrevRow(type?: TreeSelection.SelectionType): void {
+        this.selectAdjacentRow(BackOrForward.Backward, type);
+    }
+
+    selectNextRow(type?: TreeSelection.SelectionType): void {
+        this.selectAdjacentRow(BackOrForward.Forward, type);
+    }
+
+    protected createForwardIteratorForNode(node: TreeNode): TreeIterator {
+        return new TopDownCompressedTreeIterator(node, { pruneCollapsed: true });
+    }
+
+    protected selectIfAncestorOfSelected(node: Readonly<ExpandableTreeNode>): void {
+        if (!this.compressionToggle.compress) { return super.selectIfAncestorOfSelected(node); }
+        const tail = this.compressionService.getCompressionChain(node)?.tail() ?? node;
+        if (SelectableTreeNode.is(tail) && !tail.expanded && this.selectedNodes.some(selectedNode => CompositeTreeNode.isAncestor(tail, selectedNode))) {
+            this.selectNode(tail);
+        }
+    }
+}

package/src/browser/tree/tree-compression/compressed-tree-widget.tsx

@@ -0,0 +1,181 @@
+/********************************************************************************
+ * Copyright (C) 2022 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import '../../../../src/browser/tree/tree-compression/tree-compression.css';
+import { injectable, inject } from 'inversify';
+import * as React from 'react';
+import { ArrayUtils } from '../../../common/types';
+import { ContextMenuRenderer } from '../../context-menu-renderer';
+import { CompressionToggle, TreeCompressionService } from './tree-compression-service';
+import { CompositeTreeNode, TreeNode } from '../tree';
+import { NodeProps, TreeProps, TreeWidget } from '../tree-widget';
+import { SelectableTreeNode, TreeSelection } from '../tree-selection';
+import { ExpandableTreeNode } from '../tree-expansion';
+import { TreeViewWelcomeWidget } from '../tree-view-welcome-widget';
+import { CompressedTreeModel } from './compressed-tree-model';
+
+export interface CompressedChildren {
+    compressionChain?: ArrayUtils.HeadAndTail<TreeNode>;
+}
+
+export interface CompressedNodeRow extends TreeWidget.NodeRow, CompressedChildren { }
+
+export interface CompressedNodeProps extends NodeProps, CompressedChildren { }
+
+@injectable()
+export class CompressedTreeWidget extends TreeViewWelcomeWidget {
+
+    @inject(CompressionToggle) protected readonly compressionToggle: CompressionToggle;
+    @inject(TreeCompressionService) protected readonly compressionService: TreeCompressionService;
+
+    constructor(
+        @inject(TreeProps) readonly props: TreeProps,
+        @inject(CompressedTreeModel) readonly model: CompressedTreeModel,
+        @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer,
+    ) {
+        super(props, model, contextMenuRenderer);
+    }
+
+    protected rows = new Map<string, CompressedNodeRow>();
+
+    toggleCompression(newCompression = !this.compressionToggle.compress): void {
+        if (newCompression !== this.compressionToggle.compress) {
+            this.compressionToggle.compress = newCompression;
+            this.updateRows();
+        }
+    }
+
+    protected shouldDisplayNode(node: TreeNode): boolean {
+        if (this.compressionToggle.compress && this.compressionService.isCompressionParticipant(node) && !this.compressionService.isCompressionHead(node)) {
+            return false;
+        }
+        return super.shouldDisplayNode(node);
+    }
+
+    protected getDepthForNode(node: TreeNode, depths: Map<CompositeTreeNode | undefined, number>): number {
+        if (!this.compressionToggle.compress) { return super.getDepthForNode(node, depths); }
+        const parent = this.compressionService.getCompressionHead(node.parent) ?? node.parent;
+        const parentDepth = depths.get(parent);
+        return parentDepth === undefined ? 0 : TreeNode.isVisible(node.parent) ? parentDepth + 1 : parentDepth;
+    }
+
+    protected toNodeRow(node: TreeNode, index: number, depth: number): CompressedNodeRow {
+        if (!this.compressionToggle.compress) { return super.toNodeRow(node, index, depth); }
+        const row: CompressedNodeRow = { node, index, depth };
+        if (this.compressionService.isCompressionHead(node)) {
+            row.compressionChain = this.compressionService.getCompressionChain(node);
+        }
+        return row;
+    }
+
+    protected doRenderNodeRow({ node, depth, compressionChain }: CompressedNodeRow): React.ReactNode {
+        const nodeProps: CompressedNodeProps = { depth, compressionChain };
+        return <>
+            {this.renderIndent(node, nodeProps)}
+            {this.renderNode(node, nodeProps)}
+        </>;
+    }
+
+    protected rowIsSelected(node: TreeNode, props: CompressedNodeProps): boolean {
+        if (this.compressionToggle.compress && props.compressionChain) {
+            return props.compressionChain.some(participant => SelectableTreeNode.isSelected(participant));
+        }
+        return SelectableTreeNode.isSelected(node);
+    }
+
+    protected getCaptionAttributes(node: TreeNode, props: CompressedNodeProps): React.Attributes & React.HTMLAttributes<HTMLElement> {
+        const operativeNode = props.compressionChain?.tail() ?? node;
+        return super.getCaptionAttributes(operativeNode, props);
+    }
+
+    protected getCaptionChildren(node: TreeNode, props: CompressedNodeProps): React.ReactNode {
+        if (!this.compressionToggle.compress || !props.compressionChain) { return super.getCaptionChildren(node, props); }
+        return props.compressionChain.map((subNode, index, self) => {
+            const classes = ['theia-tree-compressed-label-part'];
+            if (SelectableTreeNode.isSelected(subNode)) {
+                classes.push('theia-tree-compressed-selected');
+            }
+            const handlers = this.getCaptionChildEventHandlers(subNode, props);
+            const caption = <span className={classes.join(' ')} key={subNode.id} {...handlers}>{super.getCaptionChildren(subNode, props)}</span>;
+            if (index === self.length - 1) {
+                return caption;
+            }
+            return [
+                caption,
+                <span className='theia-tree-compressed-label-separator' key={subNode + '-separator'}>{this.getSeparatorContent(node, props)}</span>
+            ];
+        });
+    }
+
+    protected getCaptionChildEventHandlers(node: TreeNode, props: CompressedNodeProps): React.Attributes & React.HtmlHTMLAttributes<HTMLElement> {
+        return {
+            onClick: event => (event.stopPropagation(), this.handleClickEvent(node, event)),
+            onDoubleClick: event => (event.stopPropagation(), this.handleClickEvent(node, event)),
+            onContextMenu: event => (event.stopPropagation(), this.handleClickEvent(node, event)),
+        };
+    }
+
+    protected handleUp(event: KeyboardEvent): void {
+        if (!this.compressionToggle.compress) { return super.handleUp(event); }
+        const type = this.props.multiSelect && this.hasShiftMask(event) ? TreeSelection.SelectionType.RANGE : undefined;
+        this.model.selectPrevRow(type);
+    }
+
+    protected handleDown(event: KeyboardEvent): void {
+        if (!this.compressionToggle.compress) { return super.handleDown(event); }
+        const type = this.props.multiSelect && this.hasShiftMask(event) ? TreeSelection.SelectionType.RANGE : undefined;
+        this.model.selectNextRow(type);
+    }
+
+    protected async handleLeft(event: KeyboardEvent): Promise<void> {
+        if (!this.compressionToggle.compress) { return super.handleLeft(event); }
+        if (Boolean(this.props.multiSelect) && (this.hasCtrlCmdMask(event) || this.hasShiftMask(event))) {
+            return;
+        }
+        const active = this.model.selectedNodes[0];
+        if (ExpandableTreeNode.isExpanded(active)
+            && (
+                this.compressionService.isCompressionHead(active)
+                || !this.compressionService.isCompressionParticipant(active)
+            )) {
+            await this.model.collapseNode(active);
+        } else {
+            this.model.selectParent();
+        }
+    }
+
+    protected async handleRight(event: KeyboardEvent): Promise<void> {
+        if (!this.compressionToggle.compress) { return super.handleRight(event); }
+        if (Boolean(this.props.multiSelect) && (this.hasCtrlCmdMask(event) || this.hasShiftMask(event))) {
+            return;
+        }
+        const active = this.model.selectedNodes[0];
+
+        if (ExpandableTreeNode.isCollapsed(active)
+            && (
+                !this.compressionService.isCompressionParticipant(active)
+                || this.compressionService.isCompressionTail(active)
+            )) {
+            await this.model.expandNode(active);
+        } else if (ExpandableTreeNode.is(active)) {
+            this.model.selectNextNode();
+        }
+    }
+
+    protected getSeparatorContent(node: TreeNode, props: CompressedNodeProps): React.ReactNode {
+        return '/';
+    }
+}

package/src/browser/tree/tree-compression/index.ts

@@ -0,0 +1,20 @@
+/********************************************************************************
+ * Copyright (C) 2022 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+export * from './compressed-tree-expansion-service';
+export * from './compressed-tree-model';
+export * from './compressed-tree-widget';
+export * from './tree-compression-service';