@theia/core 1.18.0-next.de7b81be → 1.20.0

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

@@ -30,6 +30,7 @@ import { TabBarDecoratorService } from './tab-bar-decorator';
 import { IconThemeService } from '../icon-theme-service';
 import { BreadcrumbsRenderer, BreadcrumbsRendererFactory } from '../breadcrumbs/breadcrumbs-renderer';
 import { NavigatableWidget } from '../navigatable-types';
+import { IDragEvent } from '@phosphor/dragdrop';
 
 /** The class name added to hidden content nodes, which are required to render vertical side bars. */
 const HIDDEN_CONTENT_CLASS = 'theia-TabBar-hidden-content';
@@ -229,11 +230,11 @@ export class TabBarRenderer extends TabBar.Renderer {
     }
 
     renderBadge(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement {
-        const badge: number | undefined = this.getDecorationData(data.title, 'badge')[0];
-        if (!badge) {
+        const totalBadge = this.getDecorationData(data.title, 'badge').reduce((sum, badge) => sum! + badge!, 0);
+        if (!totalBadge) {
             return h.div({});
         }
-        const limitedBadge = badge >= 100 ? '99+' : badge;
+        const limitedBadge = totalBadge >= 100 ? '99+' : totalBadge;
         return isInSidePanel
             ? h.div({ className: 'theia-badge-decorator-sidebar' }, `${limitedBadge}`)
             : h.div({ className: 'theia-badge-decorator-horizontal' }, `${limitedBadge}`);
@@ -279,7 +280,6 @@ export class TabBarRenderer extends TabBar.Renderer {
      */
     protected getDecorationData<K extends keyof WidgetDecoration.Data>(title: Title<Widget>, key: K): WidgetDecoration.Data[K][] {
         return this.getDecorations(title).filter(data => data[key] !== undefined).map(data => data[key]);
-
     }
 
     /**
@@ -383,8 +383,8 @@ export class TabBarRenderer extends TabBar.Renderer {
      * @param {SideBarRenderData} data Data used to render the tab icon.
      * @param {boolean} isInSidePanel An optional check which determines if the tab is in the side-panel.
      */
-    renderIcon(data: SideBarRenderData, inSidePanel?: boolean): VirtualElement {
-        if (!inSidePanel && this.iconThemeService && this.iconThemeService.current === 'none') {
+    renderIcon(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement {
+        if (!isInSidePanel && this.iconThemeService && this.iconThemeService.current === 'none') {
             return h.div();
         }
         let top: string | undefined;
@@ -401,13 +401,13 @@ export class TabBarRenderer extends TabBar.Renderer {
         if (decorationData.length > 0) {
             const baseIcon: VirtualElement = h.div({ className: baseClassName, style }, data.title.iconLabel);
             const wrapperClassName: string = WidgetDecoration.Styles.ICON_WRAPPER_CLASS;
-            const decoratorSizeClassName: string = inSidePanel ? WidgetDecoration.Styles.DECORATOR_SIDEBAR_SIZE_CLASS : WidgetDecoration.Styles.DECORATOR_SIZE_CLASS;
+            const decoratorSizeClassName: string = isInSidePanel ? WidgetDecoration.Styles.DECORATOR_SIDEBAR_SIZE_CLASS : WidgetDecoration.Styles.DECORATOR_SIZE_CLASS;
 
             decorationData
                 .filter(notEmpty)
                 .map(overlay => [overlay.position, overlay] as [WidgetDecoration.IconOverlayPosition, WidgetDecoration.IconOverlay | WidgetDecoration.IconClassOverlay])
                 .forEach(([position, overlay]) => {
-                    const iconAdditionalClasses: string[] = [decoratorSizeClassName, WidgetDecoration.IconOverlayPosition.getStyle(position, inSidePanel)];
+                    const iconAdditionalClasses: string[] = [decoratorSizeClassName, WidgetDecoration.IconOverlayPosition.getStyle(position, isInSidePanel)];
                     const overlayIconStyle = (color?: string) => {
                         if (color === undefined) {
                             return {};
@@ -772,6 +772,18 @@ export class SideTabBar extends ScrollableTabBar {
     protected onAfterAttach(msg: Message): void {
         super.onAfterAttach(msg);
         this.renderTabBar();
+        this.node.addEventListener('p-dragenter', this);
+        this.node.addEventListener('p-dragover', this);
+        this.node.addEventListener('p-dragleave', this);
+        document.addEventListener('p-drop', this);
+    }
+
+    protected onAfterDetach(msg: Message): void {
+        super.onAfterDetach(msg);
+        this.node.removeEventListener('p-dragenter', this);
+        this.node.removeEventListener('p-dragover', this);
+        this.node.removeEventListener('p-dragleave', this);
+        document.removeEventListener('p-drop', this);
     }
 
     protected onUpdateRequest(msg: Message): void {
@@ -869,6 +881,15 @@ export class SideTabBar extends ScrollableTabBar {
                 this.onMouseMove(event as MouseEvent);
                 super.handleEvent(event);
                 break;
+            case 'p-dragenter':
+                this.onDragEnter(event as IDragEvent);
+                break;
+            case 'p-dragover':
+                this.onDragOver(event as IDragEvent);
+                break;
+            case 'p-dragleave': case 'p-drop':
+                this.cancelViewContainerDND();
+                break;
             default:
                 super.handleEvent(event);
         }
@@ -934,4 +955,78 @@ export class SideTabBar extends ScrollableTabBar {
         }
     }
 
+    toCancelViewContainerDND = new DisposableCollection();
+    protected cancelViewContainerDND = () => {
+        this.toCancelViewContainerDND.dispose();
+    };
+
+    /**
+     * Handles `viewContainerPart` drag enter.
+     */
+    protected onDragEnter = (event: IDragEvent) => {
+        this.cancelViewContainerDND();
+        if (event.mimeData.getData('application/vnd.phosphor.view-container-factory')) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+
+    /**
+     * Handle `viewContainerPart` drag over,
+     * Defines the appropriate `drpAction` and opens the tab on which the mouse stands on for more than 800 ms.
+     */
+    protected onDragOver = (event: IDragEvent) => {
+        const factory = event.mimeData.getData('application/vnd.phosphor.view-container-factory');
+        const widget = factory && factory();
+        if (!widget) {
+            event.dropAction = 'none';
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.toCancelViewContainerDND.disposed) {
+            event.dropAction = event.proposedAction;
+            return;
+        }
+
+        const { target, clientX, clientY } = event;
+        if (target instanceof HTMLElement) {
+            if (widget.options.disableDraggingToOtherContainers || widget.viewContainer.disableDNDBetweenContainers) {
+                event.dropAction = 'none';
+                target.classList.add('theia-cursor-no-drop');
+                this.toCancelViewContainerDND.push(Disposable.create(() => {
+                    target.classList.remove('theia-cursor-no-drop');
+                }));
+            } else {
+                event.dropAction = event.proposedAction;
+            }
+            const { top, bottom, left, right, height } = target.getBoundingClientRect();
+            const mouseOnTop = (clientY - top) < (height / 2);
+            const dropTargetClass = `drop-target-${mouseOnTop ? 'top' : 'bottom'}`;
+            const tabs = this.contentNode.children;
+            const targetTab = ArrayExt.findFirstValue(tabs, t => ElementExt.hitTest(t, clientX, clientY));
+            if (!targetTab) {
+                return;
+            }
+            targetTab.classList.add(dropTargetClass);
+            this.toCancelViewContainerDND.push(Disposable.create(() => {
+                if (targetTab) {
+                    targetTab.classList.remove(dropTargetClass);
+                }
+            }));
+            const openTabTimer = setTimeout(() => {
+                const title = this.titles.find(t => (this.renderer as TabBarRenderer).createTabId(t) === targetTab.id);
+                if (title) {
+                    const mouseStillOnTab = clientX >= left && clientX <= right && clientY >= top && clientY <= bottom;
+                    if (mouseStillOnTab) {
+                        this.currentTitle = title;
+                    }
+                }
+            }, 800);
+            this.toCancelViewContainerDND.push(Disposable.create(() => {
+                clearTimeout(openTabTimer);
+            }));
+        }
+    };
+
 }

package/src/browser/status-bar/status-bar.tsx

@@ -21,6 +21,7 @@ import { CommandService } from '../../common';
 import { ReactWidget } from '../widgets/react-widget';
 import { FrontendApplicationStateService } from '../frontend-application-state';
 import { LabelParser, LabelIcon } from '../label-parser';
+import { PreferenceService } from '../preferences';
 
 export interface StatusBarEntry {
     /**
@@ -78,12 +79,26 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
     constructor(
         @inject(CommandService) protected readonly commands: CommandService,
         @inject(LabelParser) protected readonly entryService: LabelParser,
-        @inject(FrontendApplicationStateService) protected readonly applicationStateService: FrontendApplicationStateService
+        @inject(FrontendApplicationStateService) protected readonly applicationStateService: FrontendApplicationStateService,
+        @inject(PreferenceService) protected readonly preferences: PreferenceService,
     ) {
         super();
         delete this.scrollOptions;
         this.id = 'theia-statusBar';
         this.addClass('noselect');
+        // Hide the status bar until the `workbench.statusBar.visible` preference returns with a `true` value.
+        this.hide();
+        this.preferences.ready.then(() => {
+            const preferenceValue = this.preferences.get<boolean>('workbench.statusBar.visible', true);
+            this.setHidden(!preferenceValue);
+        });
+        this.toDispose.push(
+            this.preferences.onPreferenceChanged(preference => {
+                if (preference.preferenceName === 'workbench.statusBar.visible') {
+                    this.setHidden(!preference.newValue);
+                }
+            })
+        );
     }
 
     protected get ready(): Promise<void> {

package/src/browser/storage-service.spec.ts

@@ -34,7 +34,7 @@ before(() => {
         MockLogger since it does what we need but this is there as a demo of
         sinon for other uses-cases. We can remove this once this technique is
         more generally used. */
-        sinon.stub(logger, 'warn').callsFake(() => { });
+        sinon.stub(logger, 'warn').callsFake(async () => { });
         return logger;
     });
     testContainer.bind(StorageService).to(LocalStorageService).inSingletonScope();

package/src/browser/style/alert-messages.css

@@ -21,6 +21,7 @@
 }
 
 .theia-alert-message-container i {
+    transform: translateY(2px);
     padding-right: 3px;
 }
 

package/src/browser/style/index.css

@@ -235,6 +235,10 @@ button.secondary[disabled], .theia-button.secondary[disabled] {
     z-index: 999;
 }
 
+.theia-cursor-no-drop, .theia-cursor-no-drop:active {
+  cursor: no-drop;
+}
+
 /*-----------------------------------------------------------------------------
 | Import children style files
 |----------------------------------------------------------------------------*/
@@ -259,3 +263,4 @@ button.secondary[disabled], .theia-button.secondary[disabled] {
 @import './quick-title-bar.css';
 @import './progress-bar.css';
 @import './breadcrumbs.css';
+@import './tooltip.css';

package/src/browser/style/menus.css

@@ -160,13 +160,14 @@
 
 .p-Menu-itemSubmenuIcon {
   width: var(--theia-icon-size);
-  padding: 0px 4px 0px 0px;
+  padding: 0px 10px 0px 0px;
 }
 
 
 .p-Menu-item[data-type='separator'] > div {
   padding: 0;
   height: 9px;
+  opacity: 0.36;
 }
 
 
@@ -178,6 +179,14 @@
   border-top: var(--theia-border-width) solid var(--theia-menu-separatorBackground);
 }
 
+.p-Menu-item[data-type='separator'] > div.p-Menu-itemIcon::after {
+  margin-left: 12px;
+}
+
+.p-Menu-item[data-type='separator'] > div.p-Menu-itemSubmenuIcon::after {
+  margin-right: 12px;
+}
+
 .p-Menu-itemIcon::before,
 .p-Menu-itemSubmenuIcon::before {
   font: normal normal normal 16px/1 codicon;

package/src/browser/style/sidepanel.css

@@ -128,6 +128,11 @@
   -webkit-mask-position: 50% 50%;
 }
 
+/* inactive legacy/plugin icons */
+.p-TabBar.theia-app-sides .p-TabBar-tabIcon:not(.codicon) {
+  background: var(--theia-activityBar-inactiveForeground);
+}
+
 /* inactive file icons */
 .p-TabBar.theia-app-sides .file-icon.p-TabBar-tabIcon {
   background: inherit !important;
@@ -144,8 +149,9 @@
   color: var(--theia-activityBar-foreground);
 }
 
-.p-TabBar.theia-app-sides .p-TabBar-tabIcon.theia-plugin-view-container:hover,
-.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon.theia-plugin-view-container {
+/* active legacy/plugin icons */
+.p-TabBar.theia-app-sides .p-TabBar-tabIcon:not(.codicon):hover,
+.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon:not(.codicon) {
   background-color: var(--theia-activityBar-foreground);
 }
 
@@ -219,7 +225,7 @@
 }
 
 .theia-sidebar-menu > i.codicon-menu {
-  font-size: calc(var(--theia-private-sidebar-icon-size)*0.7);
+  font-size: 16px;
 }
 
 /*-----------------------------------------------------------------------------

package/src/browser/style/tabs.css

@@ -10,6 +10,7 @@
   --theia-tabbar-toolbar-z-index: 1001;
   --theia-toolbar-active-transform-scale: 1.272019649;
   --theia-horizontal-toolbar-height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2);
+  --theia-dragover-tab-border-width: 2px;
 }
 
 /*-----------------------------------------------------------------------------
@@ -39,6 +40,19 @@
   align-items: center;
 }
 
+.p-TabBar[data-orientation='vertical'] .p-TabBar-tab {
+  border-top: var(--theia-dragover-tab-border-width) solid transparent !important;
+  border-bottom: var(--theia-dragover-tab-border-width) solid transparent !important;
+}
+
+.p-TabBar[data-orientation='vertical'] .p-TabBar-tab.drop-target-top {
+  border-top-color: var(--theia-activityBar-activeBorder) !important;
+}
+
+.p-TabBar[data-orientation='vertical'] .p-TabBar-tab.drop-target-bottom {
+  border-bottom-color: var(--theia-activityBar-activeBorder) !important;
+}
+
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-tab .theia-tab-icon-label,
 .p-TabBar-tab.p-mod-drag-image .theia-tab-icon-label  {
     display: flex;
@@ -185,11 +199,13 @@ body.theia-editor-highlightModifiedTabs
     background-repeat: no-repeat;
 }
 
+/* common icons */
 .p-TabBar.theia-app-centers .p-TabBar-tabIcon,
 .p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon {
     min-height: 14px;
     background-size: 13px;
     background-position-y: 3px;
+    background: var(--theia-icon-foreground);
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: auto 13px;
     mask-repeat: no-repeat;
@@ -197,6 +213,20 @@ body.theia-editor-highlightModifiedTabs
     padding-right: 8px;
 }
 
+/* codicons */
+.p-TabBar.theia-app-centers .p-TabBar-tabIcon.codicon,
+.p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.codicon {
+    background: none;
+}
+
+/* file icons */
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-tabIcon.file-icon,
+.p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.file-icon {
+    background: none;
+    padding-bottom: 0px;
+    min-height: 20px;
+}
+
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-tabIcon.fa,
 .p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.fa {
     background: none;

package/src/browser/style/tooltip.css

@@ -0,0 +1,28 @@
+/********************************************************************************
+ * Copyright (C) 2021 Arm 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
+ ********************************************************************************/
+
+.theia-tooltip {
+    color: var(--theia-list-hoverForeground) !important;
+    background: var(--theia-list-hoverBackground) !important;
+    border: 1px solid !important;
+    border-color: var(--theia-list-hoverForeground) !important;
+}
+
+/* Hide tooltip arrow */
+.theia-tooltip::before,
+.theia-tooltip::after {
+    border: none !important;
+}

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

@@ -50,7 +50,7 @@
     height: 100%;
 }
 
-.theia-view-container .part > .header {
+.theia-view-container-part-header {
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -61,26 +61,26 @@
     font-weight: 700;
 }
 
-.theia-view-container .part > .header .theia-ExpansionToggle {
+.theia-view-container-part-header .theia-ExpansionToggle {
     padding-left: 4px;
 }
 
-.theia-view-container > .p-SplitPanel[data-orientation='horizontal'] .part > .header .theia-ExpansionToggle::before {
+.theia-view-container > .p-SplitPanel[data-orientation='horizontal'] .part > .theia-header .theia-ExpansionToggle::before {
     display: none;
     padding-left: 0px;
 }
 
-.theia-view-container > .p-SplitPanel[data-orientation='horizontal'] .part > .header .theia-ExpansionToggle {
+.theia-view-container > .p-SplitPanel[data-orientation='horizontal'] .part > .theia-header .theia-ExpansionToggle {
     padding-left: 0px;
 }
 
-.theia-view-container .part > .header .label {
+.theia-view-container-part-header .label {
     flex: 0;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.theia-view-container .part > .header .description {
+.theia-view-container-part-header .description {
     flex: 1;
     overflow: hidden;
     white-space: nowrap;
@@ -107,7 +107,7 @@
 }
 
 .theia-view-container .part.drop-target {
-    background: var(--theia-sideBar-dropBackground);
+    background: var(--theia-list-dropBackground);
     border: var(--theia-border-width) dashed var(--theia-contrastActiveBorder);
     transition-property: top, left, right, bottom;
     transition-duration: 150ms;
@@ -143,7 +143,7 @@
 }
 
 .theia-view-container-part-title.menu-open,
-.p-Widget.part:not(.collapsed):hover .header .theia-view-container-part-title,
-.p-Widget.part:not(.collapsed):focus-within .header .theia-view-container-part-title {
+.p-Widget.part:not(.collapsed):hover .theia-view-container-part-header .theia-view-container-part-title,
+.p-Widget.part:not(.collapsed):focus-within .theia-view-container-part-header .theia-view-container-part-title {
     display: flex;
 }

package/src/browser/theming.ts

@@ -18,25 +18,14 @@ import { Emitter, Event } from '../common/event';
 import { Disposable } from '../common/disposable';
 import { FrontendApplicationConfigProvider } from './frontend-application-config-provider';
 import { ApplicationProps } from '@theia/application-package/lib/application-props';
+import { Theme, ThemeChangeEvent } from '../common/theme';
 
-export const ThemeServiceSymbol = Symbol('ThemeService');
-
-export type ThemeType = 'light' | 'dark' | 'hc';
-
-export interface Theme {
-    readonly id: string;
-    readonly type: ThemeType;
-    readonly label: string;
-    readonly description?: string;
-    readonly editorTheme?: string;
-    activate(): void;
-    deactivate(): void;
-}
+/**
+ * @deprecated since 1.20.0. Import from `@theia/core/lib/common/theme` instead.
+ */
+export * from '../common/theme';
 
-export interface ThemeChangeEvent {
-    readonly newTheme: Theme;
-    readonly oldTheme?: Theme;
-}
+export const ThemeServiceSymbol = Symbol('ThemeService');
 
 export class ThemeService {
 

package/src/browser/tooltip-service.tsx

@@ -0,0 +1,98 @@
+/********************************************************************************
+ * Copyright (C) 2021 Arm 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, optional, postConstruct } from 'inversify';
+import * as React from 'react';
+import ReactTooltip from 'react-tooltip';
+import { ReactRenderer, RendererHost } from './widgets/react-renderer';
+import { CorePreferences } from './core-preferences';
+import { DisposableCollection } from '../common/disposable';
+import { v4 } from 'uuid';
+
+export const TooltipService = Symbol('TooltipService');
+
+export interface TooltipService {
+    tooltipId: string;
+    attachTo(host: HTMLElement): void;
+    update(fullRender?: boolean): void;
+}
+
+/**
+ * Attributes to be added to an HTML element to enable
+ * rich HTML tooltip rendering
+ */
+export interface TooltipAttributes {
+    /**
+     * HTML to render in the tooltip.
+     */
+    'data-tip': string;
+    /**
+     * The ID of the tooltip renderer. Should be TOOLTIP_ID.
+     */
+    'data-for': string;
+}
+
+const DELAY_PREFERENCE = 'workbench.hover.delay';
+
+@injectable()
+export class TooltipServiceImpl extends ReactRenderer implements TooltipService {
+
+    @inject(CorePreferences)
+    protected readonly corePreferences: CorePreferences;
+
+    public readonly tooltipId: string;
+    protected rendered = false;
+    protected toDispose: DisposableCollection = new DisposableCollection();
+
+    constructor(
+        @inject(RendererHost) @optional() host?: RendererHost
+    ) {
+        super(host);
+        this.tooltipId = v4();
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.toDispose.push(this.corePreferences.onPreferenceChanged(preference => {
+            if (preference.preferenceName === DELAY_PREFERENCE) {
+                this.update(true);
+            }
+        }));
+    }
+
+    public attachTo(host: HTMLElement): void {
+        host.appendChild(this.host);
+    }
+
+    public update(fullRender = false): void {
+        if (fullRender || !this.rendered) {
+            this.render();
+            this.rendered = true;
+        }
+
+        ReactTooltip.rebuild();
+    }
+
+    protected doRender(): React.ReactNode {
+        const hoverDelay = this.corePreferences.get(DELAY_PREFERENCE);
+        return <ReactTooltip id={this.tooltipId} className='theia-tooltip' html={true} delayShow={hoverDelay} />;
+    }
+
+    public dispose(): void {
+        this.toDispose.dispose();
+        super.dispose();
+    }
+}

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

@@ -19,7 +19,7 @@ import { Event, Emitter, WaitUntilEvent } from '../../common/event';
 import { DisposableCollection } from '../../common/disposable';
 import { CancellationToken } from '../../common/cancellation';
 import { ILogger } from '../../common/logger';
-import { SelectionProvider, } from '../../common/selection-service';
+import { SelectionProvider } from '../../common/selection-service';
 import { Tree, TreeNode, CompositeTreeNode } from './tree';
 import { TreeSelectionService, SelectableTreeNode, TreeSelection } from './tree-selection';
 import { TreeExpansionService, ExpandableTreeNode } from './tree-expansion';

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

@@ -127,7 +127,7 @@ export interface NodeProps {
  */
 export const defaultTreeProps: TreeProps = {
     leftPadding: 8,
-    expansionTogglePadding: 18
+    expansionTogglePadding: 22
 };
 
 export namespace TreeWidget {