@jupyterlab/filebrowser 4.3.0-alpha.2 → 4.3.0-beta.0

package/lib/listing.js

@@ -9,6 +9,7 @@ import { caretDownIcon, caretUpIcon, classes, LabIcon } from '@jupyterlab/ui-com
 import { ArrayExt, filter, StringExt } from '@lumino/algorithm';
 import { MimeData, PromiseDelegate } from '@lumino/coreutils';
 import { ElementExt } from '@lumino/domutils';
+import { DisposableDelegate } from '@lumino/disposable';
 import { Drag } from '@lumino/dragdrop';
 import { MessageLoop } from '@lumino/messaging';
 import { Signal } from '@lumino/signaling';
@@ -46,6 +47,10 @@ const ITEM_CLASS = 'jp-DirListing-item';
  * The class name added to the listing item text cell.
  */
 const ITEM_TEXT_CLASS = 'jp-DirListing-itemText';
+/**
+ * The class name added to the listing item text cell.
+ */
+const ITEM_NAME_COLUMN_CLASS = 'jp-DirListing-itemName';
 /**
  * The class name added to the listing item icon cell.
  */
@@ -79,18 +84,6 @@ const MODIFIED_ID_CLASS = 'jp-id-modified';
  * The class name added to the file size column header cell.
  */
 const FILE_SIZE_ID_CLASS = 'jp-id-filesize';
-/**
- * The class name added to the narrow column header cell.
- */
-const NARROW_ID_CLASS = 'jp-id-narrow';
-/**
- * The class name added to the modified column header cell and modified item cell when hidden.
- */
-const MODIFIED_COLUMN_HIDDEN = 'jp-LastModified-hidden';
-/**
- * The class name added to the size column header cell and size item cell when hidden.
- */
-const FILE_SIZE_COLUMN_HIDDEN = 'jp-FileSize-hidden';
 /**
  * The mime type for a contents drag object.
  */
@@ -111,6 +104,10 @@ const SELECTED_CLASS = 'jp-mod-selected';
  * The class name added to drag state icons to add space between the icon and the file name
  */
 const DRAG_ICON_CLASS = 'jp-DragIcon';
+/**
+ * The class name added to column resize handle.
+ */
+const RESIZE_HANDLE_CLASS = 'jp-DirListing-resizeHandle';
 /**
  * The class name added to the widget when there are items on the clipboard.
  */
@@ -127,6 +124,10 @@ const MULTI_SELECTED_CLASS = 'jp-mod-multiSelected';
  * The class name added to indicate running notebook.
  */
 const RUNNING_CLASS = 'jp-mod-running';
+/**
+ * The class name added to indicate the active element.
+ */
+const ACTIVE_CLASS = 'jp-mod-active';
 /**
  * The class name added for a descending sort.
  */
@@ -169,6 +170,7 @@ export class DirListing extends Widget {
         this._onItemOpened = new Signal(this);
         this._drag = null;
         this._dragData = null;
+        this._resizeData = null;
         this._selectTimer = -1;
         this._isCut = false;
         this._prevPath = '';
@@ -180,9 +182,19 @@ export class DirListing extends Widget {
         this._inRename = false;
         this._isDirty = false;
         this._hiddenColumns = new Set();
+        this._columnSizes = {
+            name: null,
+            file_size: null,
+            is_selected: null,
+            last_modified: null
+        };
         this._sortNotebooksFirst = false;
+        this._allowSingleClick = false;
         // _focusIndex should never be set outside the range [0, this._items.length - 1]
         this._focusIndex = 0;
+        this._allUploaded = new Signal(this);
+        this._width = null;
+        this._state = null;
         this.addClass(DIR_LISTING_CLASS);
         this.translator = options.translator || nullTranslator;
         this._trans = this.translator.load('jupyterlab');
@@ -194,12 +206,13 @@ export class DirListing extends Widget {
         this._editNode.className = EDITOR_CLASS;
         this._manager = this._model.manager;
         this._renderer = options.renderer || DirListing.defaultRenderer;
+        this._state = options.state || null;
         // Get the width of the "modified" column
         this._updateModifiedSize(this.node);
         const headerNode = DOMUtils.findElement(this.node, HEADER_CLASS);
         // hide the file size column by default
         this._hiddenColumns.add('file_size');
-        this._renderer.populateHeaderNode(headerNode, this.translator, this._hiddenColumns);
+        this._renderer.populateHeaderNode(headerNode, this.translator, this._hiddenColumns, this._columnSizes);
         this._manager.activateRequested.connect(this._onActivateRequested, this);
     }
     /**
@@ -409,6 +422,37 @@ export class DirListing extends Widget {
             .filter(item => item.type !== 'directory')
             .map(item => this._model.download(item.path)));
     }
+    /**
+     * Restore the state of the file browser listing.
+     *
+     * @param id - The unique ID that is used to construct a state database key.
+     *
+     */
+    async restore(id) {
+        const key = `file-browser-${id}:columns`;
+        const state = this._state;
+        this._stateColumnsKey = key;
+        if (!state) {
+            return;
+        }
+        try {
+            const columns = await state.fetch(key);
+            if (!columns) {
+                return;
+            }
+            const sizes = columns['sizes'];
+            if (!sizes) {
+                return;
+            }
+            for (const [key, size] of Object.entries(sizes)) {
+                this._columnSizes[key] = size;
+            }
+            this._updateColumnSizes();
+        }
+        catch (error) {
+            await state.remove(key);
+        }
+    }
     /**
      * Shut down kernels on the applicable currently selected items.
      *
@@ -649,6 +693,7 @@ export class DirListing extends Widget {
     onAfterAttach(msg) {
         super.onAfterAttach(msg);
         const node = this.node;
+        this._width = this.node.getBoundingClientRect().width;
         const content = DOMUtils.findElement(node, CONTENT_CLASS);
         node.addEventListener('mousedown', this);
         node.addEventListener('keydown', this);
@@ -699,12 +744,15 @@ export class DirListing extends Widget {
             this.update();
         }
     }
-    // Update the modified column's size
+    /**
+     * Update the modified column's size
+     */
     _updateModifiedSize(node) {
-        var _a;
+        var _a, _b;
         // Look for the modified column's header
         const modified = DOMUtils.findElement(node, MODIFIED_ID_CLASS);
-        this._modifiedWidth = (_a = modified === null || modified === void 0 ? void 0 : modified.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 83;
+        this._modifiedWidth =
+            (_b = (_a = this._columnSizes['last_modified']) !== null && _a !== void 0 ? _a : modified === null || modified === void 0 ? void 0 : modified.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 83;
         this._modifiedStyle =
             this._modifiedWidth < 100
                 ? 'narrow'
@@ -712,7 +760,20 @@ export class DirListing extends Widget {
                     ? 'long'
                     : 'short';
     }
-    // Update only the modified dates.
+    /**
+     * Rerender item nodes' modified dates, if the modified style has changed.
+     */
+    _updateModifiedStyleAndSize() {
+        const oldModifiedStyle = this._modifiedStyle;
+        // Update both size and style
+        this._updateModifiedSize(this.node);
+        if (oldModifiedStyle !== this._modifiedStyle) {
+            this.updateModified(this._sortedItems, this._items);
+        }
+    }
+    /**
+     * Update only the modified dates.
+     */
     updateModified(items, nodes) {
         items.forEach((item, i) => {
             const node = nodes[i];
@@ -728,12 +789,15 @@ export class DirListing extends Widget {
         });
     }
     // Update item nodes based on widget state.
-    updateNodes(items, nodes) {
+    updateNodes(items, nodes, sizeOnly = false) {
         var _a;
         items.forEach((item, i) => {
             const node = nodes[i];
+            if (sizeOnly && this.renderer.updateItemSize) {
+                return this.renderer.updateItemSize(node, item, this._modifiedStyle, this._columnSizes);
+            }
             const ft = this._manager.registry.getFileTypeForModel(item);
-            this.renderer.updateItemNode(node, item, ft, this.translator, this._hiddenColumns, this.selection[item.path], this._modifiedStyle);
+            this.renderer.updateItemNode(node, item, ft, this.translator, this._hiddenColumns, this.selection[item.path], this._modifiedStyle, this._columnSizes);
             if (this.selection[item.path] &&
                 this._isCut &&
                 this._model.path === this._prevPath) {
@@ -786,7 +850,7 @@ export class DirListing extends Widget {
         }
         // Add any missing item nodes.
         while (nodes.length < items.length) {
-            const node = renderer.createItemNode(this._hiddenColumns);
+            const node = renderer.createItemNode(this._hiddenColumns, this._columnSizes);
             node.classList.add(ITEM_CLASS);
             nodes.push(node);
             content.appendChild(node);
@@ -833,14 +897,8 @@ export class DirListing extends Widget {
     }
     onResize(msg) {
         const { width } = msg.width === -1 ? this.node.getBoundingClientRect() : msg;
-        this.toggleClass('jp-DirListing-narrow', width < 250);
-        // Rerender item nodes' modified dates, if the modified style has changed.
-        const oldModifiedStyle = this._modifiedStyle;
-        // Update both size and style
-        this._updateModifiedSize(this.node);
-        if (oldModifiedStyle !== this._modifiedStyle) {
-            this.updateModified(this._sortedItems, this._items);
-        }
+        this._width = width;
+        this._updateColumnSizes();
     }
     setColumnVisibility(name, visible) {
         if (visible) {
@@ -850,7 +908,99 @@ export class DirListing extends Widget {
             this._hiddenColumns.add(name);
         }
         this.headerNode.innerHTML = '';
-        this._renderer.populateHeaderNode(this.headerNode, this.translator, this._hiddenColumns);
+        this._renderer.populateHeaderNode(this.headerNode, this.translator, this._hiddenColumns, this._columnSizes);
+        this._updateColumnSizes();
+    }
+    _updateColumnSizes() {
+        // adjust column sizes so that they add up to the total width available, preserving ratios
+        // and removing width from the last column so that it fills the width available;
+        const visibleColumns = this._visibleColumns.map(column => ({
+            ...column,
+            element: DOMUtils.findElement(this.node, column.className)
+        }));
+        // read from DOM
+        let total = 0;
+        for (const column of visibleColumns) {
+            let size = this._columnSizes[column.id];
+            if (size === null) {
+                size = column.element.getBoundingClientRect().width;
+            }
+            // restrict the minimum and maximum width
+            size = Math.max(size, column.minWidth);
+            if (this._width) {
+                let reservedForOtherColums = 0;
+                for (const other of visibleColumns) {
+                    if (other.id === column.id) {
+                        continue;
+                    }
+                    reservedForOtherColums += other.minWidth;
+                }
+                size = Math.min(size, this._width - reservedForOtherColums);
+            }
+            this._columnSizes[column.id] = size;
+            total += size;
+        }
+        // Ensure that total fits
+        if (this._width && total > this._width) {
+            for (const column of visibleColumns) {
+                this._columnSizes[column.id] =
+                    (this._columnSizes[column.id] / total) * this._width;
+            }
+        }
+        // Write to DOM
+        for (const column of visibleColumns) {
+            const size = this._columnSizes[column.id];
+            column.element.style.width = size === null ? '' : size + 'px';
+        }
+        this._updateModifiedStyleAndSize();
+        // Refresh sizes on the per item widths
+        if (this.isVisible) {
+            const items = this._items;
+            if (items.length !== 0) {
+                this.updateNodes(this._sortedItems, this._items, true);
+            }
+        }
+        if (this._state && this._stateColumnsKey) {
+            void this._state.save(this._stateColumnsKey, {
+                sizes: this._columnSizes
+            });
+        }
+    }
+    get _visibleColumns() {
+        return DirListing.columns.filter(column => { var _a; return column.id === 'name' || !((_a = this._hiddenColumns) === null || _a === void 0 ? void 0 : _a.has(column.id)); });
+    }
+    _setColumnSize(name, size) {
+        var _a;
+        const previousSize = this._columnSizes[name];
+        if (previousSize && size && size > previousSize) {
+            // check if we can resize up
+            let total = 0;
+            let before = true;
+            for (const column of this._visibleColumns) {
+                if (column.id === name) {
+                    // add proposed size for the current columns
+                    total += size;
+                    before = false;
+                    continue;
+                }
+                if (before) {
+                    // add size as-is for columns before
+                    const element = DOMUtils.findElement(this.node, column.className);
+                    total +=
+                        (_a = this._columnSizes[column.id]) !== null && _a !== void 0 ? _a : element.getBoundingClientRect().width;
+                }
+                else {
+                    // add minimum acceptable size for columns after
+                    total += column.minWidth;
+                }
+            }
+            if (this._width && total > this._width) {
+                // up sizing is no longer possible
+                return;
+            }
+        }
+        this._columnSizes[name] = size;
+        this._updateColumnSizes();
     }
     /**
      * Update the setting to sort notebooks above files.
@@ -863,6 +1013,13 @@ export class DirListing extends Widget {
             this.sort(this._sortState);
         }
     }
+    /**
+     * Update the setting to allow single click navigation.
+     * This enables opening files/directories with a single click.
+     */
+    setAllowSingleClickNavigation(isEnabled) {
+        this._allowSingleClick = isEnabled;
+    }
     /**
      * Would this click (or other event type) hit the checkbox by default?
      */
@@ -945,6 +1102,36 @@ export class DirListing extends Widget {
         }
         let index = Private.hitTestNodes(this._items, event);
         if (index === -1) {
+            // Left mouse press for drag or resize start.
+            if (event.button === 0) {
+                const resizeHandle = event.target;
+                if (resizeHandle instanceof HTMLElement &&
+                    resizeHandle.classList.contains(RESIZE_HANDLE_CLASS)) {
+                    const columnId = resizeHandle.dataset.column;
+                    if (!columnId) {
+                        throw Error('Column resize handle is missing data-column attribute');
+                    }
+                    const column = DirListing.columns.find(c => c.id === columnId);
+                    if (!column) {
+                        throw Error(`Column with identifier ${columnId} not found`);
+                    }
+                    const element = DOMUtils.findElement(this.node, column.className);
+                    resizeHandle.classList.add(ACTIVE_CLASS);
+                    const cursorOverride = Drag.overrideCursor('col-resize');
+                    this._resizeData = {
+                        pressX: event.clientX,
+                        column: columnId,
+                        initialSize: element.getBoundingClientRect().width,
+                        overrides: new DisposableDelegate(() => {
+                            cursorOverride.dispose();
+                            resizeHandle.classList.remove(ACTIVE_CLASS);
+                        })
+                    };
+                    document.addEventListener('mouseup', this, true);
+                    document.addEventListener('mousemove', this, true);
+                    return;
+                }
+            }
             return;
         }
         this.handleFileSelect(event);
@@ -956,7 +1143,7 @@ export class DirListing extends Widget {
         if (newContext) {
             return;
         }
-        // Left mouse press for drag start.
+        // Left mouse press for drag or resize start.
         if (event.button === 0) {
             this._dragData = {
                 pressX: event.clientX,
@@ -966,6 +1153,9 @@ export class DirListing extends Widget {
             document.addEventListener('mouseup', this, true);
             document.addEventListener('mousemove', this, true);
         }
+        if (this._allowSingleClick) {
+            this.evtDblClick(event);
+        }
     }
     /**
      * Handle the `'mouseup'` event for the widget.
@@ -988,6 +1178,13 @@ export class DirListing extends Widget {
         if (event.button === 0) {
             this._focusItem(this._focusIndex);
         }
+        // Remove the resize listeners if necessary.
+        if (this._resizeData) {
+            this._resizeData.overrides.dispose();
+            document.removeEventListener('mousemove', this, true);
+            document.removeEventListener('mouseup', this, true);
+            return;
+        }
         // Remove the drag listeners if necessary.
         if (event.button !== 0 || !this._drag) {
             document.removeEventListener('mousemove', this, true);
@@ -1003,6 +1200,11 @@ export class DirListing extends Widget {
     _evtMousemove(event) {
         event.preventDefault();
         event.stopPropagation();
+        if (this._resizeData) {
+            const { initialSize, column, pressX } = this._resizeData;
+            this._setColumnSize(column, initialSize + event.clientX - pressX);
+            return;
+        }
         // Bail if we are the one dragging.
         if (this._drag || !this._dragData) {
             return;
@@ -1245,29 +1447,61 @@ export class DirListing extends Widget {
      */
     evtNativeDrop(event) {
         var _a, _b, _c;
-        const files = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
-        if (!files || files.length === 0) {
-            return;
-        }
-        const length = (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.items.length;
-        if (!length) {
+        // Prevent navigation
+        event.preventDefault();
+        const items = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.items;
+        if (!items) {
+            // Fallback to simple upload of files (if any)
+            const files = (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.files;
+            if (!files || files.length === 0) {
+                return;
+            }
+            const promises = [];
+            for (const file of files) {
+                const promise = this._model.upload(file);
+                promises.push(promise);
+            }
+            Promise.all(promises)
+                .then(() => this._allUploaded.emit())
+                .catch(err => {
+                console.error('Error while uploading files: ', err);
+            });
             return;
         }
-        for (let i = 0; i < length; i++) {
-            let entry = (_c = event.dataTransfer) === null || _c === void 0 ? void 0 : _c.items[i].webkitGetAsEntry();
-            if (entry === null || entry === void 0 ? void 0 : entry.isDirectory) {
-                console.log('currently not supporting drag + drop for folders');
-                void showDialog({
-                    title: this._trans.__('Error Uploading Folder'),
-                    body: this._trans.__('Drag and Drop is currently not supported for folders'),
-                    buttons: [Dialog.cancelButton({ label: this._trans.__('Close') })]
-                });
+        const uploadEntry = async (entry, path) => {
+            if (Private.isDirectoryEntry(entry)) {
+                const dirPath = await Private.createDirectory(this._model.manager, path, entry.name);
+                const directoryReader = entry.createReader();
+                const allEntries = await Private.collectEntries(directoryReader);
+                for (const childEntry of allEntries) {
+                    await uploadEntry(childEntry, dirPath);
+                }
             }
+            else if (Private.isFileEntry(entry)) {
+                const file = await Private.readFile(entry);
+                await this._model.upload(file, path);
+            }
+        };
+        const promises = [];
+        for (const item of items) {
+            const entry = Private.defensiveGetAsEntry(item);
+            if (!entry) {
+                continue;
+            }
+            const promise = uploadEntry(entry, (_c = this._model.path) !== null && _c !== void 0 ? _c : '/');
+            promises.push(promise);
         }
-        event.preventDefault();
-        for (let i = 0; i < files.length; i++) {
-            void this._model.upload(files[i]);
-        }
+        Promise.all(promises)
+            .then(() => this._allUploaded.emit())
+            .catch(err => {
+            console.error('Error while uploading files: ', err);
+        });
+    }
+    /**
+     * Signal emitted on when all files were uploaded after native drag.
+     */
+    get allUploaded() {
+        return this._allUploaded;
     }
     /**
      * Handle the `'lm-dragenter'` event for the widget.
@@ -1801,10 +2035,83 @@ export class DirListing extends Widget {
  * The namespace for the `DirListing` class statics.
  */
 (function (DirListing) {
+    /**
+     * Column definitions.
+     */
+    DirListing.columns = [
+        {
+            id: 'is_selected',
+            className: CHECKBOX_WRAPPER_CLASS,
+            itemClassName: CHECKBOX_WRAPPER_CLASS,
+            minWidth: 18,
+            resizable: false,
+            sortable: false
+        },
+        {
+            id: 'name',
+            className: NAME_ID_CLASS,
+            itemClassName: ITEM_NAME_COLUMN_CLASS,
+            minWidth: 60,
+            resizable: true,
+            sortable: true,
+            caretSide: 'right'
+        },
+        {
+            id: 'last_modified',
+            className: MODIFIED_ID_CLASS,
+            itemClassName: ITEM_MODIFIED_CLASS,
+            minWidth: 60,
+            resizable: true,
+            sortable: true,
+            caretSide: 'left'
+        },
+        {
+            id: 'file_size',
+            className: FILE_SIZE_ID_CLASS,
+            itemClassName: ITEM_FILE_SIZE_CLASS,
+            minWidth: 60,
+            resizable: true,
+            sortable: true,
+            caretSide: 'left'
+        }
+    ];
     /**
      * The default implementation of an `IRenderer`.
      */
     class Renderer {
+        constructor() {
+            /**
+             * Factories for individual parts of the item.
+             */
+            this.itemFactories = {
+                name: () => {
+                    const name = document.createElement('span');
+                    const icon = document.createElement('span');
+                    const text = document.createElement('span');
+                    icon.className = ITEM_ICON_CLASS;
+                    text.className = ITEM_TEXT_CLASS;
+                    name.className = ITEM_NAME_COLUMN_CLASS;
+                    name.appendChild(icon);
+                    name.appendChild(text);
+                    return name;
+                },
+                last_modified: () => {
+                    const modified = document.createElement('span');
+                    modified.className = ITEM_MODIFIED_CLASS;
+                    return modified;
+                },
+                file_size: () => {
+                    const fileSize = document.createElement('span');
+                    fileSize.className = ITEM_FILE_SIZE_CLASS;
+                    return fileSize;
+                },
+                is_selected: () => this.createCheckboxWrapperNode()
+            };
+            /**
+             * Register of most recent arguments for last modified column update.
+             */
+            this._modifiedColumnLastUpdate = new WeakMap();
+        }
         /**
          * Create the DOM node for a dir listing.
          */
@@ -1827,45 +2134,43 @@ export class DirListing extends Widget {
          *
          * @param node - The header node to populate.
          */
-        populateHeaderNode(node, translator, hiddenColumns) {
+        populateHeaderNode(node, translator, hiddenColumns, columnsSizes) {
             translator = translator || nullTranslator;
             const trans = translator.load('jupyterlab');
-            const name = this.createHeaderItemNode(trans.__('Name'));
-            const narrow = document.createElement('div');
-            const modified = this._createHeaderItemNodeWithSizes({
-                small: trans.__('Modified'),
-                large: trans.__('Last Modified')
-            });
-            const fileSize = this.createHeaderItemNode(trans.__('File Size'));
-            name.classList.add(NAME_ID_CLASS);
-            name.classList.add(SELECTED_CLASS);
-            modified.classList.add(MODIFIED_ID_CLASS);
-            fileSize.classList.add(FILE_SIZE_ID_CLASS);
-            narrow.classList.add(NARROW_ID_CLASS);
-            narrow.textContent = '...';
-            if (!(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('is_selected'))) {
-                const checkboxWrapper = this.createCheckboxWrapperNode({
+            const elementCreators = {
+                name: () => this.createHeaderItemNode(trans.__('Name')),
+                last_modified: () => this._createHeaderItemNodeWithSizes({
+                    small: trans.__('Modified'),
+                    large: trans.__('Last Modified')
+                }),
+                file_size: () => this.createHeaderItemNode(trans.__('File Size')),
+                is_selected: () => this.createCheckboxWrapperNode({
                     alwaysVisible: true,
                     headerNode: true
-                });
-                node.appendChild(checkboxWrapper);
-            }
-            node.appendChild(name);
-            node.appendChild(narrow);
-            node.appendChild(modified);
-            node.appendChild(fileSize);
-            if (hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('last_modified')) {
-                modified.classList.add(MODIFIED_COLUMN_HIDDEN);
-            }
-            else {
-                modified.classList.remove(MODIFIED_COLUMN_HIDDEN);
-            }
-            if (hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('file_size')) {
-                fileSize.classList.add(FILE_SIZE_COLUMN_HIDDEN);
-            }
-            else {
-                fileSize.classList.remove(FILE_SIZE_COLUMN_HIDDEN);
+                })
+            };
+            const visibleColumns = DirListing.columns.filter(column => column.id === 'name' || !(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has(column.id)));
+            for (const column of visibleColumns) {
+                const createElement = elementCreators[column.id];
+                const element = createElement();
+                element.classList.add(column.className);
+                const isLastVisible = column.id === visibleColumns[visibleColumns.length - 1].id;
+                if (columnsSizes) {
+                    const size = columnsSizes[column.id];
+                    if (!isLastVisible) {
+                        element.style.width = size + 'px';
+                    }
+                }
+                node.appendChild(element);
+                if (Private.isResizable(column) && !isLastVisible) {
+                    const resizer = document.createElement('div');
+                    resizer.classList.add(RESIZE_HANDLE_CLASS);
+                    resizer.dataset.column = column.id;
+                    node.appendChild(resizer);
+                }
             }
+            const name = DOMUtils.findElement(node, NAME_ID_CLASS);
+            name.classList.add(SELECTED_CLASS);
             // set the initial caret icon
             Private.updateCaret(DOMUtils.findElement(name, HEADER_ITEM_ICON_CLASS), 'right', 'up');
         }
@@ -1879,90 +2184,51 @@ export class DirListing extends Widget {
          * @returns The sort state of the header after the click event.
          */
         handleHeaderClick(node, event) {
-            const name = DOMUtils.findElement(node, NAME_ID_CLASS);
-            const modified = DOMUtils.findElement(node, MODIFIED_ID_CLASS);
-            const fileSize = DOMUtils.findElement(node, FILE_SIZE_ID_CLASS);
             const state = { direction: 'ascending', key: 'name' };
             const target = event.target;
-            const modifiedIcon = DOMUtils.findElement(modified, HEADER_ITEM_ICON_CLASS);
-            const fileSizeIcon = DOMUtils.findElement(fileSize, HEADER_ITEM_ICON_CLASS);
-            const nameIcon = DOMUtils.findElement(name, HEADER_ITEM_ICON_CLASS);
-            if (name.contains(target)) {
-                if (name.classList.contains(SELECTED_CLASS)) {
-                    if (!name.classList.contains(DESCENDING_CLASS)) {
-                        state.direction = 'descending';
-                        name.classList.add(DESCENDING_CLASS);
-                        Private.updateCaret(nameIcon, 'right', 'down');
-                    }
-                    else {
-                        name.classList.remove(DESCENDING_CLASS);
-                        Private.updateCaret(nameIcon, 'right', 'up');
-                    }
-                }
-                else {
-                    name.classList.remove(DESCENDING_CLASS);
-                    Private.updateCaret(nameIcon, 'right', 'up');
+            const sortableColumns = DirListing.columns.filter(Private.isSortable);
+            console.log(sortableColumns);
+            for (const column of sortableColumns) {
+                const header = node.querySelector(`.${column.className}`);
+                if (!header) {
+                    // skip if the column is hidden
+                    continue;
                 }
-                name.classList.add(SELECTED_CLASS);
-                modified.classList.remove(SELECTED_CLASS);
-                modified.classList.remove(DESCENDING_CLASS);
-                fileSize.classList.remove(SELECTED_CLASS);
-                fileSize.classList.remove(DESCENDING_CLASS);
-                Private.updateCaret(modifiedIcon, 'left');
-                Private.updateCaret(fileSizeIcon, 'left');
-                return state;
-            }
-            if (modified.contains(target)) {
-                state.key = 'last_modified';
-                if (modified.classList.contains(SELECTED_CLASS)) {
-                    if (!modified.classList.contains(DESCENDING_CLASS)) {
-                        state.direction = 'descending';
-                        modified.classList.add(DESCENDING_CLASS);
-                        Private.updateCaret(modifiedIcon, 'left', 'down');
+                if (header.contains(target)) {
+                    state.key = column.id;
+                    const headerIcon = DOMUtils.findElement(header, HEADER_ITEM_ICON_CLASS);
+                    if (header.classList.contains(SELECTED_CLASS)) {
+                        if (!header.classList.contains(DESCENDING_CLASS)) {
+                            state.direction = 'descending';
+                            header.classList.add(DESCENDING_CLASS);
+                            Private.updateCaret(headerIcon, column.caretSide, 'down');
+                        }
+                        else {
+                            header.classList.remove(DESCENDING_CLASS);
+                            Private.updateCaret(headerIcon, column.caretSide, 'up');
+                        }
                     }
                     else {
-                        modified.classList.remove(DESCENDING_CLASS);
-                        Private.updateCaret(modifiedIcon, 'left', 'up');
+                        header.classList.remove(DESCENDING_CLASS);
+                        Private.updateCaret(headerIcon, column.caretSide, 'up');
                     }
-                }
-                else {
-                    modified.classList.remove(DESCENDING_CLASS);
-                    Private.updateCaret(modifiedIcon, 'left', 'up');
-                }
-                modified.classList.add(SELECTED_CLASS);
-                name.classList.remove(SELECTED_CLASS);
-                name.classList.remove(DESCENDING_CLASS);
-                fileSize.classList.remove(SELECTED_CLASS);
-                fileSize.classList.remove(DESCENDING_CLASS);
-                Private.updateCaret(nameIcon, 'right');
-                Private.updateCaret(fileSizeIcon, 'left');
-                return state;
-            }
-            if (fileSize.contains(target)) {
-                state.key = 'file_size';
-                if (fileSize.classList.contains(SELECTED_CLASS)) {
-                    if (!fileSize.classList.contains(DESCENDING_CLASS)) {
-                        state.direction = 'descending';
-                        fileSize.classList.add(DESCENDING_CLASS);
-                        Private.updateCaret(fileSizeIcon, 'left', 'down');
+                    header.classList.add(SELECTED_CLASS);
+                    for (const otherColumn of sortableColumns) {
+                        if (otherColumn.id === column.id) {
+                            continue;
+                        }
+                        const otherHeader = node.querySelector(`.${otherColumn.className}`);
+                        if (!otherHeader) {
+                            // skip if hidden
+                            continue;
+                        }
+                        otherHeader.classList.remove(SELECTED_CLASS);
+                        otherHeader.classList.remove(DESCENDING_CLASS);
+                        const otherHeaderIcon = DOMUtils.findElement(otherHeader, HEADER_ITEM_ICON_CLASS);
+                        Private.updateCaret(otherHeaderIcon, otherColumn.caretSide);
                     }
-                    else {
-                        fileSize.classList.remove(DESCENDING_CLASS);
-                        Private.updateCaret(fileSizeIcon, 'left', 'up');
-                    }
-                }
-                else {
-                    fileSize.classList.remove(DESCENDING_CLASS);
-                    Private.updateCaret(fileSizeIcon, 'left', 'up');
+                    return state;
                 }
-                fileSize.classList.add(SELECTED_CLASS);
-                name.classList.remove(SELECTED_CLASS);
-                name.classList.remove(DESCENDING_CLASS);
-                modified.classList.remove(SELECTED_CLASS);
-                modified.classList.remove(DESCENDING_CLASS);
-                Private.updateCaret(nameIcon, 'right');
-                Private.updateCaret(modifiedIcon, 'left');
-                return state;
             }
             return state;
         }
@@ -1971,35 +2237,19 @@ export class DirListing extends Widget {
          *
          * @returns A new DOM node to use as a content item.
          */
-        createItemNode(hiddenColumns) {
+        createItemNode(hiddenColumns, columnsSizes) {
             const node = document.createElement('li');
-            const icon = document.createElement('span');
-            const text = document.createElement('span');
-            const modified = document.createElement('span');
-            const fileSize = document.createElement('span');
-            icon.className = ITEM_ICON_CLASS;
-            text.className = ITEM_TEXT_CLASS;
-            modified.className = ITEM_MODIFIED_CLASS;
-            fileSize.className = ITEM_FILE_SIZE_CLASS;
-            if (!(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('is_selected'))) {
-                const checkboxWrapper = this.createCheckboxWrapperNode();
-                node.appendChild(checkboxWrapper);
-            }
-            node.appendChild(icon);
-            node.appendChild(text);
-            node.appendChild(modified);
-            node.appendChild(fileSize);
-            if (hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('last_modified')) {
-                modified.classList.add(MODIFIED_COLUMN_HIDDEN);
-            }
-            else {
-                modified.classList.remove(MODIFIED_COLUMN_HIDDEN);
-            }
-            if (hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('file_size')) {
-                fileSize.classList.add(FILE_SIZE_COLUMN_HIDDEN);
-            }
-            else {
-                fileSize.classList.remove(FILE_SIZE_COLUMN_HIDDEN);
+            for (const column of DirListing.columns) {
+                if (column.id != 'name' && (hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has(column.id))) {
+                    continue;
+                }
+                const createElement = this.itemFactories[column.id];
+                const element = createElement();
+                node.appendChild(element);
+                if (columnsSizes) {
+                    const size = columnsSizes[column.id];
+                    element.style.width = size + 'px';
+                }
             }
             return node;
         }
@@ -2053,14 +2303,25 @@ export class DirListing extends Widget {
          * @param modifiedStyle - The date style for the modified column: narrow, short, or long
          */
         updateItemModified(modified, modifiedDate, modifiedStyle) {
-            let modText = '';
-            let modTitle = '';
+            // Formatting dates is expensive (0.1-0.2ms per call,
+            // so over 150 files can easily already choke the renderer),
+            // let's do the bare minimum check of comparing if an update
+            // is needed using a last update cache:
+            const previousUpdate = this._modifiedColumnLastUpdate.get(modified);
+            if ((previousUpdate === null || previousUpdate === void 0 ? void 0 : previousUpdate.date) === modifiedDate &&
+                (previousUpdate === null || previousUpdate === void 0 ? void 0 : previousUpdate.style) === modifiedStyle) {
+                return;
+            }
             const parsedDate = new Date(modifiedDate);
             // Render the date in one of multiple formats, depending on the container's size
-            modText = Time.formatHuman(parsedDate, modifiedStyle);
-            modTitle = Time.format(parsedDate);
+            const modText = Time.formatHuman(parsedDate, modifiedStyle);
+            const modTitle = Time.format(parsedDate);
             modified.textContent = modText;
             modified.title = modTitle;
+            this._modifiedColumnLastUpdate.set(modified, {
+                date: modifiedDate,
+                style: modifiedStyle
+            });
         }
         /**
          * Update an item node to reflect the current state of a model.
@@ -2072,7 +2333,7 @@ export class DirListing extends Widget {
          * @param fileType - The file type of the item, if applicable.
          *
          */
-        updateItemNode(node, model, fileType, translator, hiddenColumns, selected, modifiedStyle) {
+        updateItemNode(node, model, fileType, translator, hiddenColumns, selected, modifiedStyle, columnsSizes) {
             if (selected) {
                 node.classList.add(SELECTED_CLASS);
             }
@@ -2083,8 +2344,9 @@ export class DirListing extends Widget {
             const trans = translator.load('jupyterlab');
             const iconContainer = DOMUtils.findElement(node, ITEM_ICON_CLASS);
             const text = DOMUtils.findElement(node, ITEM_TEXT_CLASS);
-            const modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
-            const fileSize = DOMUtils.findElement(node, ITEM_FILE_SIZE_CLASS);
+            const nameColumn = DOMUtils.findElement(node, ITEM_NAME_COLUMN_CLASS);
+            let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
+            let fileSize = DOMUtils.findElement(node, ITEM_FILE_SIZE_CLASS);
             const checkboxWrapper = DOMUtils.findElement(node, CHECKBOX_WRAPPER_CLASS);
             const showFileCheckboxes = !(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('is_selected'));
             if (checkboxWrapper && !showFileCheckboxes) {
@@ -2092,19 +2354,23 @@ export class DirListing extends Widget {
             }
             else if (showFileCheckboxes && !checkboxWrapper) {
                 const checkboxWrapper = this.createCheckboxWrapperNode();
-                node.insertBefore(checkboxWrapper, iconContainer);
+                nameColumn.insertAdjacentElement('beforebegin', checkboxWrapper);
             }
-            if (hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('last_modified')) {
-                modified.classList.add(MODIFIED_COLUMN_HIDDEN);
+            const showModified = !(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('last_modified'));
+            if (modified && !showModified) {
+                node.removeChild(modified);
             }
-            else {
-                modified.classList.remove(MODIFIED_COLUMN_HIDDEN);
+            else if (showModified && !modified) {
+                modified = this.itemFactories.last_modified();
+                nameColumn.insertAdjacentElement('afterend', modified);
             }
-            if (hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('file_size')) {
-                fileSize.classList.add(FILE_SIZE_COLUMN_HIDDEN);
+            const showFileSize = !(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('file_size'));
+            if (fileSize && !showFileSize) {
+                node.removeChild(fileSize);
             }
-            else {
-                fileSize.classList.remove(FILE_SIZE_COLUMN_HIDDEN);
+            else if (showFileSize && !fileSize) {
+                fileSize = this.itemFactories.file_size();
+                (modified !== null && modified !== void 0 ? modified : nameColumn).insertAdjacentElement('afterend', fileSize);
             }
             // render the file item's icon
             LabIcon.resolveElement({
@@ -2118,10 +2384,12 @@ export class DirListing extends Widget {
             // add file size to pop up if its available
             if (model.size !== null && model.size !== undefined) {
                 const fileSizeText = Private.formatFileSize(model.size, 1, 1024);
-                fileSize.textContent = fileSizeText;
+                if (fileSize) {
+                    fileSize.textContent = fileSizeText;
+                }
                 hoverText += trans.__('\nSize: %1', Private.formatFileSize(model.size, 1, 1024));
             }
-            else {
+            else if (fileSize) {
                 fileSize.textContent = '';
             }
             if (model.path) {
@@ -2171,7 +2439,27 @@ export class DirListing extends Widget {
                 checkbox.setAttribute('aria-label', ariaLabel);
                 checkbox.checked = selected !== null && selected !== void 0 ? selected : false;
             }
-            if (model.last_modified) {
+            this.updateItemSize(node, model, modifiedStyle, columnsSizes);
+        }
+        /**
+         * Update size of item nodes, assuming that model has not changed.
+         */
+        updateItemSize(node, model, modifiedStyle, columnsSizes) {
+            if (columnsSizes) {
+                for (const column of DirListing.columns) {
+                    const element = DOMUtils.findElement(node, column.itemClassName);
+                    if (!element) {
+                        continue;
+                    }
+                    const sizeSpec = columnsSizes[column.id];
+                    const newWidth = sizeSpec === null ? '' : sizeSpec + 'px';
+                    if (newWidth !== element.style.width) {
+                        element.style.width = newWidth;
+                    }
+                }
+            }
+            let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
+            if (model.last_modified && modified) {
                 this.updateItemModified(modified, model.last_modified, modifiedStyle !== null && modifiedStyle !== void 0 ? modifiedStyle : 'short');
             }
         }
@@ -2381,6 +2669,18 @@ var Private;
         return copy;
     }
     Private.sort = sort;
+    /**
+     * Check if the column is resizable.
+     */
+    Private.isResizable = (column) => {
+        return 'resizable' in column && column.resizable;
+    };
+    /**
+     * Check if the column is sortable.
+     */
+    Private.isSortable = (column) => {
+        return 'sortable' in column && column.sortable;
+    };
     /**
      * Get the index of the node at a client position, or `-1`.
      */
@@ -2416,9 +2716,14 @@ var Private;
             (state === 'down' ? caretDownIcon : caretUpIcon).element({
                 container,
                 tag: 'span',
-                stylesheet: 'listingHeaderItem',
-                float
+                stylesheet: 'listingHeaderItem'
             });
+            if (float === 'left') {
+                container.style.order = '-1';
+            }
+            else {
+                container.style.order = '';
+            }
         }
         else {
             LabIcon.remove(container);
@@ -2426,5 +2731,66 @@ var Private;
         }
     }
     Private.updateCaret = updateCaret;
+    async function createDirectory(manager, path, name) {
+        const model = await manager.newUntitled({
+            path: path,
+            type: 'directory'
+        });
+        const tmpDirPath = PathExt.join(path, model.name);
+        const dirPath = PathExt.join(path, name);
+        try {
+            await manager.rename(tmpDirPath, dirPath);
+        }
+        catch (e) {
+            // The `dirPath` already exists, remove the temporary new directory
+            await manager.deleteFile(tmpDirPath);
+        }
+        return dirPath;
+    }
+    Private.createDirectory = createDirectory;
+    function isDirectoryEntry(entry) {
+        return entry.isDirectory;
+    }
+    Private.isDirectoryEntry = isDirectoryEntry;
+    function isFileEntry(entry) {
+        return entry.isFile;
+    }
+    Private.isFileEntry = isFileEntry;
+    function defensiveGetAsEntry(item) {
+        if (item.webkitGetAsEntry) {
+            return item.webkitGetAsEntry();
+        }
+        if ('getAsEntry' in item) {
+            // See https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry
+            return item['getAsEntry']();
+        }
+        return null;
+    }
+    Private.defensiveGetAsEntry = defensiveGetAsEntry;
+    function readEntries(reader) {
+        return new Promise((resolve, reject) => reader.readEntries(resolve, reject));
+    }
+    function readFile(entry) {
+        return new Promise((resolve, reject) => entry.file(resolve, reject));
+    }
+    Private.readFile = readFile;
+    async function collectEntries(reader) {
+        // Spec requires calling `readEntries` until these are exhausted;
+        // in practice this is only required in Chromium-based browsers for >100 files.
+        // https://issues.chromium.org/issues/41110876
+        const allEntries = [];
+        let done = false;
+        while (!done) {
+            const entries = await readEntries(reader);
+            if (entries.length === 0) {
+                done = true;
+            }
+            else {
+                allEntries.push(...entries);
+            }
+        }
+        return allEntries;
+    }
+    Private.collectEntries = collectEntries;
 })(Private || (Private = {}));
 //# sourceMappingURL=listing.js.map