@jupyterlab/filebrowser 4.6.0-alpha.2 → 4.6.0-alpha.4

package/src/crumbs.ts

@@ -4,21 +4,19 @@
 import { DOMUtils, showErrorMessage } from '@jupyterlab/apputils';
 import { PageConfig, PathExt } from '@jupyterlab/coreutils';
 import { renameFile } from '@jupyterlab/docmanager';
-import {
-  ITranslator,
-  nullTranslator,
-  TranslationBundle
-} from '@jupyterlab/translation';
+import type { ITranslator, TranslationBundle } from '@jupyterlab/translation';
+import { nullTranslator } from '@jupyterlab/translation';
 import {
   ellipsesIcon,
   homeIcon as preferredIcon,
   folderIcon as rootIcon
 } from '@jupyterlab/ui-components';
 import { JSONExt } from '@lumino/coreutils';
-import { Drag } from '@lumino/dragdrop';
-import { Message } from '@lumino/messaging';
+import { Throttler } from '@lumino/polling';
+import type { Drag } from '@lumino/dragdrop';
+import type { Message } from '@lumino/messaging';
 import { Widget } from '@lumino/widgets';
-import { FileBrowserModel } from './model';
+import type { FileBrowserModel } from './model';
 
 /**
  * The class name added to the breadcrumb node.
@@ -45,6 +43,11 @@ const BREADCRUMB_ITEM_CLASS = 'jp-BreadCrumbs-item';
  */
 const BREADCRUMB_ELLIPSIS_CLASS = 'jp-BreadCrumbs-ellipsis';
 
+/**
+ * The class name for the breadcrumbs separator node
+ */
+const BREADCRUMB_SEPARATOR_CLASS = 'jp-BreadCrumbs-separator';
+
 /**
  * The mime type for a contents drag object.
  */
@@ -81,6 +84,19 @@ export class BreadCrumbs extends Widget {
     }
     this.node.appendChild(this._crumbs[Private.Crumb.Home]);
     this._model.refreshed.connect(this.update, this);
+    this._resizeThrottler = new Throttler(() => this._onResize(), 50);
+    this._resizeObserver = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      const newWidth = entry.contentRect.width;
+      if (this._lastRenderedWidth > 0 && newWidth < this._lastRenderedWidth) {
+        this._onResize();
+      } else {
+        void this._resizeThrottler.invoke();
+      }
+    });
   }
 
   /**
@@ -148,6 +164,18 @@ export class BreadCrumbs extends Widget {
     this._minimumRightItems = value;
   }
 
+  /**
+   * Dispose of the resources held by the widget.
+   */
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this._resizeObserver.disconnect();
+    this._resizeThrottler.dispose();
+    super.dispose();
+  }
+
   /**
    * A message handler invoked on an `'after-attach'` message.
    */
@@ -159,6 +187,7 @@ export class BreadCrumbs extends Widget {
     node.addEventListener('lm-dragenter', this);
     node.addEventListener('lm-dragleave', this);
     node.addEventListener('lm-dragover', this);
+    this._resizeObserver.observe(node);
     node.addEventListener('lm-drop', this);
   }
 
@@ -173,6 +202,7 @@ export class BreadCrumbs extends Widget {
     node.removeEventListener('lm-dragleave', this);
     node.removeEventListener('lm-dragover', this);
     node.removeEventListener('lm-drop', this);
+    this._resizeObserver.unobserve(node);
   }
 
   /**
@@ -182,12 +212,21 @@ export class BreadCrumbs extends Widget {
     // Update the breadcrumb list.
     const contents = this._model.manager.services.contents;
     const localPath = contents.localPath(this._model.path);
+
+    // Invalidate cached widths if the path changed
+    if (this._previousState && this._previousState.path !== localPath) {
+      this._cachedWidths = null;
+    }
+
+    // Calculate adaptive items based on available width
+    const adaptiveItems = this._calculateAdaptiveItems(localPath);
+
     const state = {
       path: localPath,
       hasPreferred: this._hasPreferred,
       fullPath: this._fullPath,
-      minimumLeftItems: this._minimumLeftItems,
-      minimumRightItems: this._minimumRightItems
+      minimumLeftItems: adaptiveItems.left,
+      minimumRightItems: adaptiveItems.right
     };
     if (this._previousState && JSONExt.deepEqual(state, this._previousState)) {
       return;
@@ -391,6 +430,176 @@ export class BreadCrumbs extends Widget {
     return elements;
   }
 
+  /**
+   * Handle resize events with throttling.
+   */
+  private _onResize(): void {
+    if (this.isDisposed || !this.isAttached) {
+      return;
+    }
+    // Force recalculation by clearing previous state
+    this._previousState = null;
+    this.update();
+  }
+
+  /**
+   * Measure ALL breadcrumb item widths by rendering them off-screen.
+   * This ensures we have accurate widths for every path segment,
+   * including those currently hidden behind the ellipsis.
+   */
+  private _measureAllItemWidths(parts: string[]): void {
+    const node = this.node;
+
+    // Measure fixed elements that are already in the DOM
+    const home = this._crumbs[Private.Crumb.Home];
+    const ellipsis = this._crumbs[Private.Crumb.Ellipsis];
+    const preferred = this._crumbs[Private.Crumb.Preferred];
+    const separators = node.getElementsByClassName(BREADCRUMB_SEPARATOR_CLASS);
+    const separator = separators.length > 0 ? separators[0] : null;
+
+    // Create an off-screen container to measure all items
+    const measurer = document.createElement('div');
+    measurer.style.position = 'absolute';
+    measurer.style.visibility = 'hidden';
+    measurer.style.height = '0';
+    measurer.style.overflow = 'hidden';
+    measurer.style.whiteSpace = 'nowrap';
+    // Inherit font styles from the breadcrumb node
+    measurer.className = BREADCRUMB_CLASS;
+    node.appendChild(measurer);
+
+    // Create and measure each breadcrumb item for every path segment
+    const itemWidths: number[] = [];
+    for (let i = 0; i < parts.length; i++) {
+      const elem = document.createElement('span');
+      elem.className = BREADCRUMB_ITEM_CLASS;
+      elem.textContent = parts[i];
+      measurer.appendChild(elem);
+      const measured = elem.getBoundingClientRect().width;
+      // Fall back to a character-based estimate if layout is not available.
+      itemWidths.push(
+        (measured > 0 ? measured : Math.max(parts[i].length * 8, 20)) + 4
+      );
+    }
+
+    // Clean up
+    node.removeChild(measurer);
+
+    this._cachedWidths = {
+      home: (home.getBoundingClientRect().width || 22) + 4,
+      ellipsis: (ellipsis.getBoundingClientRect().width || 28) + 4,
+      separator: separator?.getBoundingClientRect().width || 4,
+      preferred: this._hasPreferred
+        ? (preferred.getBoundingClientRect().width || 22) + 4
+        : 0,
+      itemWidths: itemWidths
+    };
+  }
+
+  /**
+   * Calculate adaptive left/right items based on available width.
+   */
+  private _calculateAdaptiveItems(path: string): {
+    left: number;
+    right: number;
+  } {
+    // Reset last rendered width to avoid stale data on early returns
+    this._lastRenderedWidth = 0;
+
+    const parts = path.split('/').filter(part => part !== '');
+    const totalParts = parts.length;
+
+    // If fullPath is enabled or there are no parts, use minimum settings
+    if (this._fullPath || totalParts === 0) {
+      return { left: this._minimumLeftItems, right: this._minimumRightItems };
+    }
+
+    // If total parts fit within minimums, no adaptation needed
+    const minTotal = this._minimumLeftItems + this._minimumRightItems;
+    if (totalParts <= minTotal) {
+      return { left: this._minimumLeftItems, right: this._minimumRightItems };
+    }
+
+    const containerWidth = this.node.clientWidth;
+    if (containerWidth === 0) {
+      return { left: this._minimumLeftItems, right: this._minimumRightItems };
+    }
+
+    // Ensure we have accurate measurements for ALL items
+    if (
+      !this._cachedWidths ||
+      this._cachedWidths.itemWidths.length !== totalParts
+    ) {
+      this._measureAllItemWidths(parts);
+    }
+
+    const homeWidth = this._cachedWidths!.home;
+    const separatorWidth = this._cachedWidths!.separator;
+    const ellipsisWidth = this._cachedWidths!.ellipsis;
+    const preferredWidth = this._cachedWidths!.preferred;
+    const itemWidths = this._cachedWidths!.itemWidths;
+
+    // Calculate available space for items
+    let fixedOverhead = homeWidth + separatorWidth;
+    if (this._hasPreferred) {
+      fixedOverhead += preferredWidth + separatorWidth;
+    }
+    const availableForItems = containerWidth - fixedOverhead;
+
+    // Check if all parts can fit without ellipsis
+    let totalWidth = 0;
+    for (let i = 0; i < totalParts; i++) {
+      totalWidth += itemWidths[i] + separatorWidth;
+    }
+    if (totalWidth <= availableForItems) {
+      this._lastRenderedWidth = fixedOverhead + totalWidth;
+      return { left: totalParts, right: 0 };
+    }
+
+    // calculate how many right items fit
+    const ellipsisOverhead = ellipsisWidth + separatorWidth;
+    const availableWithEllipsis = availableForItems - ellipsisOverhead;
+
+    // Account for left items first
+    let leftUsed = 0;
+    for (let i = 0; i < this._minimumLeftItems && i < totalParts; i++) {
+      leftUsed += itemWidths[i] + separatorWidth;
+    }
+
+    const availableForRight = availableWithEllipsis - leftUsed;
+
+    // Fill right items from the end
+    let rightItems = 0;
+    let usedWidth = 0;
+    for (let i = totalParts - 1; i >= this._minimumLeftItems; i--) {
+      const w = itemWidths[i] + separatorWidth;
+      if (usedWidth + w <= availableForRight) {
+        usedWidth += w;
+        rightItems++;
+      } else {
+        break;
+      }
+    }
+
+    // Ensure minimums are respected
+    const finalRight = Math.max(rightItems, this._minimumRightItems);
+    // Track the total rendered width for the immediate-collapse check.
+    // If minimums forced extra items, recalculate; otherwise reuse usedWidth.
+    let rightUsed = usedWidth;
+    if (finalRight > rightItems) {
+      rightUsed = 0;
+      for (let i = totalParts - finalRight; i < totalParts; i++) {
+        rightUsed += itemWidths[i] + separatorWidth;
+      }
+    }
+    this._lastRenderedWidth =
+      fixedOverhead + ellipsisOverhead + leftUsed + rightUsed;
+    return {
+      left: this._minimumLeftItems,
+      right: finalRight
+    };
+  }
+
   protected translator: ITranslator;
   private _trans: TranslationBundle;
   private _model: FileBrowserModel;
@@ -400,6 +609,16 @@ export class BreadCrumbs extends Widget {
   private _previousState: Private.ICrumbsState | null = null;
   private _minimumLeftItems: number;
   private _minimumRightItems: number;
+  private _resizeObserver: ResizeObserver;
+  private _resizeThrottler: Throttler;
+  private _cachedWidths: {
+    home: number;
+    separator: number;
+    ellipsis: number;
+    preferred: number;
+    itemWidths: number[];
+  } | null = null;
+  private _lastRenderedWidth = 0;
 }
 
 /**
@@ -534,9 +753,7 @@ namespace Private {
         const elemPath = parts.slice(0, i + 1).join('/');
         const elem = createBreadcrumbElement(parts[i], elemPath);
         node.appendChild(elem);
-        const separator = document.createElement('span');
-        separator.textContent = '/';
-        node.appendChild(separator);
+        node.appendChild(createCrumbSeparator());
       }
     }
   }
@@ -592,6 +809,7 @@ namespace Private {
    */
   export function createCrumbSeparator(): HTMLElement {
     const item = document.createElement('span');
+    item.className = BREADCRUMB_SEPARATOR_CLASS;
     item.textContent = '/';
     return item;
   }

package/src/listing.ts

@@ -8,19 +8,13 @@ import {
   showErrorMessage
 } from '@jupyterlab/apputils';
 import { PageConfig, PathExt, Time } from '@jupyterlab/coreutils';
-import {
-  IDocumentManager,
-  isValidFileName,
-  renameFile
-} from '@jupyterlab/docmanager';
+import type { IDocumentManager } from '@jupyterlab/docmanager';
+import { isValidFileName, renameFile } from '@jupyterlab/docmanager';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
-import { Contents } from '@jupyterlab/services';
-import { IStateDB } from '@jupyterlab/statedb';
-import {
-  ITranslator,
-  nullTranslator,
-  TranslationBundle
-} from '@jupyterlab/translation';
+import type { Contents } from '@jupyterlab/services';
+import type { IStateDB } from '@jupyterlab/statedb';
+import type { ITranslator, TranslationBundle } from '@jupyterlab/translation';
+import { nullTranslator } from '@jupyterlab/translation';
 import {
   caretDownIcon,
   caretUpIcon,
@@ -28,19 +22,19 @@ import {
   LabIcon
 } from '@jupyterlab/ui-components';
 import { ArrayExt, filter, StringExt } from '@lumino/algorithm';
-import {
-  MimeData,
-  PromiseDelegate,
-  ReadonlyJSONObject
-} from '@lumino/coreutils';
+import type { ReadonlyJSONObject } from '@lumino/coreutils';
+import { MimeData, PromiseDelegate } from '@lumino/coreutils';
 import { ElementExt } from '@lumino/domutils';
-import { DisposableDelegate, IDisposable } from '@lumino/disposable';
+import type { IDisposable } from '@lumino/disposable';
+import { DisposableDelegate } from '@lumino/disposable';
 import { Drag } from '@lumino/dragdrop';
-import { Message, MessageLoop } from '@lumino/messaging';
-import { ISignal, Signal } from '@lumino/signaling';
+import type { Message } from '@lumino/messaging';
+import { MessageLoop } from '@lumino/messaging';
+import type { ISignal } from '@lumino/signaling';
+import { Signal } from '@lumino/signaling';
 import { h, VirtualDOM } from '@lumino/virtualdom';
 import { Widget } from '@lumino/widgets';
-import { FilterFileBrowserModel } from './model';
+import type { FilterFileBrowserModel } from './model';
 
 /**
  * The class name added to DirListing widget.
@@ -356,6 +350,7 @@ export class DirListing extends Widget {
       this.model.items(),
       state,
       this._sortNotebooksFirst,
+      this._sortFileNamesNaturally,
       this.translator
     );
     this._sortState = state;
@@ -962,8 +957,8 @@ export class DirListing extends Widget {
       this._modifiedWidth < 100
         ? 'narrow'
         : this._modifiedWidth > 120
-        ? 'long'
-        : 'short';
+          ? 'long'
+          : 'short';
   }
 
   /**
@@ -1361,6 +1356,19 @@ export class DirListing extends Widget {
     }
   }
 
+  /**
+   * Update the setting to sort file names naturally
+   * vs lexicographically. Default is true (natural).
+   * This sorts the items again if the internal value is modified.
+   */
+  setSortFileNamesNaturally(natural: boolean): void {
+    const previousValue = this._sortFileNamesNaturally;
+    this._sortFileNamesNaturally = natural;
+    if (this._sortFileNamesNaturally !== previousValue) {
+      this.sort(this._sortState);
+    }
+  }
+
   /**
    * Update the setting to allow single click navigation.
    * This enables opening files/directories with a single click.
@@ -2121,7 +2129,7 @@ export class DirListing extends Widget {
       } as DirListing.IContentsThunk);
     }
 
-    if (item && item.type !== 'directory') {
+    if (item.type !== 'directory') {
       const otherPaths = selectedPaths.slice(1).reverse();
       this._drag.mimeData.setData(FACTORY_MIME, () => {
         if (!item) {
@@ -2541,6 +2549,9 @@ export class DirListing extends Widget {
    * Handle a `pathChanged` signal from the model.
    */
   private _onPathChanged(): void {
+    // Check if the directory listing (or any of its children) has focus.
+    const hasFocus = this.node.contains(document.activeElement);
+
     // Reset the selection.
     this.clearSelectedItems();
     // Update the sorted items.
@@ -2548,7 +2559,16 @@ export class DirListing extends Widget {
     // Reset focus. But wait until the DOM has been updated (hence
     // `requestAnimationFrame`).
     requestAnimationFrame(() => {
-      this._focusItem(0);
+      if (this.isDisposed) {
+        return;
+      }
+      // Only focus the first item if the listing (or a child) previously had focus.
+      if (hasFocus) {
+        this._focusItem(0);
+      } else {
+        // Otherwise, just reset the internal focus index without moving DOM focus.
+        this._focusIndex = 0;
+      }
     });
   }
 
@@ -2645,6 +2665,7 @@ export class DirListing extends Widget {
     last_modified: null
   };
   private _sortNotebooksFirst = false;
+  private _sortFileNamesNaturally = true;
   private _allowSingleClick = false;
   private _allowDragDropUpload = true;
   // _focusIndex should never be set outside the range [0, this._items.length - 1]
@@ -3679,6 +3700,7 @@ namespace Private {
     items: Iterable<Contents.IModel>,
     state: DirListing.ISortState,
     sortNotebooksFirst: boolean = false,
+    sortFileNamesNaturally: boolean = true,
     translator: ITranslator
   ): Contents.IModel[] {
     const copy = Array.from(items);
@@ -3710,6 +3732,7 @@ namespace Private {
 
     /**
      * Compare two items by their name using `translator.languageCode`, with fallback to `navigator.language`.
+     * When sortFileNamesNaturally is true, uses natural order.
      */
     function compareByName(a: Contents.IModel, b: Contents.IModel) {
       // Wokaround for Chromium invalid language code on CI, see
@@ -3718,19 +3741,17 @@ namespace Private {
       const languageCode = (
         translator.languageCode ?? navigatorLanguage
       ).replace('_', '-');
+      const localeOptions: Intl.CollatorOptions = {
+        numeric: sortFileNamesNaturally,
+        sensitivity: 'base'
+      };
       try {
-        return a.name.localeCompare(b.name, languageCode, {
-          numeric: true,
-          sensitivity: 'base'
-        });
+        return a.name.localeCompare(b.name, languageCode, localeOptions);
       } catch (e) {
         console.warn(
           `localeCompare failed to compare ${a.name} and ${b.name} under languageCode: ${languageCode}`
         );
-        return a.name.localeCompare(b.name, navigatorLanguage, {
-          numeric: true,
-          sensitivity: 'base'
-        });
+        return a.name.localeCompare(b.name, navigatorLanguage, localeOptions);
       }
     }
 

package/src/model.ts

@@ -2,21 +2,22 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { Dialog, showDialog } from '@jupyterlab/apputils';
-import { IChangedArgs, PageConfig, PathExt } from '@jupyterlab/coreutils';
-import { IDocumentManager, shouldOverwrite } from '@jupyterlab/docmanager';
-import { Contents, KernelSpec, Session } from '@jupyterlab/services';
-import { IStateDB } from '@jupyterlab/statedb';
-import {
-  ITranslator,
-  nullTranslator,
-  TranslationBundle
-} from '@jupyterlab/translation';
-import { IFilterBoxProps, IScore } from '@jupyterlab/ui-components';
+import type { IChangedArgs } from '@jupyterlab/coreutils';
+import { PageConfig, PathExt } from '@jupyterlab/coreutils';
+import type { IDocumentManager } from '@jupyterlab/docmanager';
+import { shouldOverwrite } from '@jupyterlab/docmanager';
+import type { Contents, KernelSpec, Session } from '@jupyterlab/services';
+import type { IStateDB } from '@jupyterlab/statedb';
+import type { ITranslator, TranslationBundle } from '@jupyterlab/translation';
+import { nullTranslator } from '@jupyterlab/translation';
+import type { IFilterBoxProps, IScore } from '@jupyterlab/ui-components';
 import { ArrayExt, filter } from '@lumino/algorithm';
-import { PromiseDelegate, ReadonlyJSONObject } from '@lumino/coreutils';
-import { IDisposable } from '@lumino/disposable';
+import type { ReadonlyJSONObject } from '@lumino/coreutils';
+import { PromiseDelegate } from '@lumino/coreutils';
+import type { IDisposable } from '@lumino/disposable';
 import { Poll } from '@lumino/polling';
-import { ISignal, Signal } from '@lumino/signaling';
+import type { ISignal } from '@lumino/signaling';
+import { Signal } from '@lumino/signaling';
 
 /**
  * The default duration of the auto-refresh in ms
@@ -633,10 +634,10 @@ export class FileBrowserModel implements IDisposable {
       prefix + PathExt.dirname(oldValue.path) === path
         ? oldValue
         : newValue &&
-          newValue.path &&
-          prefix + PathExt.dirname(newValue.path) === path
-        ? newValue
-        : undefined;
+            newValue.path &&
+            prefix + PathExt.dirname(newValue.path) === path
+          ? newValue
+          : undefined;
 
     // If either the old value or the new value is in the current path, update.
     if (value) {

package/src/opendialog.ts

@@ -3,14 +3,16 @@
 
 import { Dialog, setToolbar, ToolbarButton } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
-import { IDocumentManager } from '@jupyterlab/docmanager';
-import { Contents } from '@jupyterlab/services';
-import { ITranslator, nullTranslator } from '@jupyterlab/translation';
-import { IScore, newFolderIcon, refreshIcon } from '@jupyterlab/ui-components';
+import type { IDocumentManager } from '@jupyterlab/docmanager';
+import type { Contents } from '@jupyterlab/services';
+import type { ITranslator } from '@jupyterlab/translation';
+import { nullTranslator } from '@jupyterlab/translation';
+import type { IScore } from '@jupyterlab/ui-components';
+import { newFolderIcon, refreshIcon } from '@jupyterlab/ui-components';
 import { PanelLayout, Widget } from '@lumino/widgets';
 import { FileBrowser } from './browser';
 import { FilterFileBrowserModel } from './model';
-import { IFileBrowserFactory } from './tokens';
+import type { IFileBrowserFactory } from './tokens';
 import { PromiseDelegate } from '@lumino/coreutils';
 
 /**
@@ -30,16 +32,15 @@ export namespace FileDialog {
   /**
    * Options for the open directory dialog
    */
-  export interface IDirectoryOptions
-    extends Partial<
-      Pick<
-        Dialog.IOptions<Promise<Contents.IModel[]>>,
-        Exclude<
-          keyof Dialog.IOptions<Promise<Contents.IModel[]>>,
-          'body' | 'buttons' | 'defaultButton'
-        >
+  export interface IDirectoryOptions extends Partial<
+    Pick<
+      Dialog.IOptions<Promise<Contents.IModel[]>>,
+      Exclude<
+        keyof Dialog.IOptions<Promise<Contents.IModel[]>>,
+        'body' | 'buttons' | 'defaultButton'
       >
-    > {
+    >
+  > {
     /**
      * Document manager
      */

package/src/tokens.ts

@@ -5,6 +5,7 @@ import type { WidgetTracker } from '@jupyterlab/apputils';
 import type { IStateDB } from '@jupyterlab/statedb';
 import { Token } from '@lumino/coreutils';
 import type { FileBrowser } from './browser';
+import type { DirListing } from './listing';
 
 /**
  * The file browser factory token.
@@ -24,6 +25,17 @@ export const IDefaultFileBrowser = new Token<IDefaultFileBrowser>(
   'A service for the default file browser.'
 );
 
+/**
+ * The default file browser renderer token.
+ */
+export interface IDefaultFileBrowserRenderer extends DirListing.IRenderer {}
+
+export const IDefaultFileBrowserRenderer =
+  new Token<IDefaultFileBrowserRenderer>(
+    '@jupyterlab/filebrowser:IDefaultFileBrowserRenderer',
+    'A service for overriding the default file browser directory listing renderer.'
+  );
+
 /**
  * Default file browser type.
  */
@@ -120,6 +132,14 @@ export namespace IFileBrowserFactory {
      * Whether to allow file uploads. Defaults to `true`.
      */
     allowFileUploads?: boolean;
+
+    /**
+     * An optional renderer for the directory listing area.
+     *
+     * #### Notes
+     * If not provided, the default renderer will be used.
+     */
+    renderer?: DirListing.IRenderer;
   }
 }
 

package/src/upload.ts

@@ -2,15 +2,13 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { showErrorMessage } from '@jupyterlab/apputils';
-import {
-  ITranslator,
-  nullTranslator,
-  TranslationBundle
-} from '@jupyterlab/translation';
+import type { ITranslator, TranslationBundle } from '@jupyterlab/translation';
+import { nullTranslator } from '@jupyterlab/translation';
 import { fileUploadIcon, ToolbarButton } from '@jupyterlab/ui-components';
-import { FileBrowserModel } from './model';
-import { Contents } from '@jupyterlab/services';
-import { ISignal, Signal } from '@lumino/signaling';
+import type { FileBrowserModel } from './model';
+import type { Contents } from '@jupyterlab/services';
+import type { ISignal } from '@lumino/signaling';
+import { Signal } from '@lumino/signaling';
 
 /**
  * A widget which provides an upload button.