@jupyterlab/filebrowser 4.0.0-alpha.2 → 4.0.0-alpha.21

package/lib/listing.js

@@ -6,7 +6,7 @@ import { isValidFileName, renameFile } from '@jupyterlab/docmanager';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { nullTranslator } from '@jupyterlab/translation';
 import { caretDownIcon, caretUpIcon, classes, LabIcon } from '@jupyterlab/ui-components';
-import { ArrayExt, ArrayIterator, each, filter, find, StringExt, toArray } from '@lumino/algorithm';
+import { ArrayExt, filter, StringExt } from '@lumino/algorithm';
 import { MimeData, PromiseDelegate } from '@lumino/coreutils';
 import { ElementExt } from '@lumino/domutils';
 import { Drag } from '@lumino/dragdrop';
@@ -54,6 +54,15 @@ const ITEM_ICON_CLASS = 'jp-DirListing-itemIcon';
  * The class name added to the listing item modified cell.
  */
 const ITEM_MODIFIED_CLASS = 'jp-DirListing-itemModified';
+/**
+ * The class name added to the listing item file size cell.
+ */
+const ITEM_FILE_SIZE_CLASS = 'jp-DirListing-itemFileSize';
+/**
+ * The class name added to the label element that wraps each item's checkbox and
+ * the header's check-all checkbox.
+ */
+const CHECKBOX_WRAPPER_CLASS = 'jp-DirListing-checkboxWrapper';
 /**
  * The class name added to the dir listing editor node.
  */
@@ -66,6 +75,10 @@ const NAME_ID_CLASS = 'jp-id-name';
  * The class name added to the modified column header cell.
  */
 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.
  */
@@ -74,6 +87,10 @@ 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.
  */
@@ -175,6 +192,8 @@ export class DirListing extends Widget {
         this._manager = this._model.manager;
         this._renderer = options.renderer || DirListing.defaultRenderer;
         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._manager.activateRequested.connect(this._onActivateRequested, this);
     }
@@ -248,7 +267,7 @@ export class DirListing extends Widget {
      * @returns A new iterator over the listing's sorted items.
      */
     sortedItems() {
-        return new ArrayIterator(this._sortedItems);
+        return this._sortedItems[Symbol.iterator]();
     }
     /**
      * Sort the items using a sort condition.
@@ -292,9 +311,10 @@ export class DirListing extends Widget {
         }
         const basePath = this._model.path;
         const promises = [];
-        each(this._clipboard, path => {
+        for (const path of this._clipboard) {
             if (this._isCut) {
-                const parts = path.split('/');
+                const localPath = this._manager.services.contents.localPath(path);
+                const parts = localPath.split('/');
                 const name = parts[parts.length - 1];
                 const newPath = PathExt.join(basePath, name);
                 promises.push(this._model.manager.rename(path, newPath));
@@ -302,11 +322,11 @@ export class DirListing extends Widget {
             else {
                 promises.push(this._model.manager.copy(path, basePath));
             }
-        });
+        }
         // Remove any cut modifiers.
-        each(this._items, item => {
+        for (const item of this._items) {
             item.classList.remove(CUT_CLASS);
-        });
+        }
         this._clipboard.length = 0;
         this._isCut = false;
         this.removeClass(CLIPBOARD_CLASS);
@@ -354,11 +374,11 @@ export class DirListing extends Widget {
     duplicate() {
         const basePath = this._model.path;
         const promises = [];
-        each(this.selectedItems(), item => {
+        for (const item of this.selectedItems()) {
             if (item.type !== 'directory') {
                 promises.push(this._model.manager.copy(item.path, basePath));
             }
-        });
+        }
         return Promise.all(promises)
             .then(() => {
             return undefined;
@@ -371,7 +391,7 @@ export class DirListing extends Widget {
      * Download the currently selected item(s).
      */
     async download() {
-        await Promise.all(toArray(this.selectedItems())
+        await Promise.all(Array.from(this.selectedItems())
             .filter(item => item.type !== 'directory')
             .map(item => this._model.download(item.path)));
     }
@@ -384,7 +404,7 @@ export class DirListing extends Widget {
         const model = this._model;
         const items = this._sortedItems;
         const paths = items.map(item => item.path);
-        const promises = toArray(this._model.sessions())
+        const promises = Array.from(this._model.sessions())
             .filter(session => {
             const index = ArrayExt.firstIndexOf(paths, session.path);
             return this.selection[items[index].path];
@@ -485,7 +505,7 @@ export class DirListing extends Widget {
      */
     isSelected(name) {
         const items = this._sortedItems;
-        return (toArray(filter(items, item => item.name === name && this.selection[item.path])).length !== 0);
+        return (Array.from(filter(items, item => item.name === name && this.selection[item.path])).length !== 0);
     }
     /**
      * Find a model given a click.
@@ -653,6 +673,7 @@ export class DirListing extends Widget {
      * A handler invoked on an `'update-request'` message.
      */
     onUpdateRequest(msg) {
+        var _a;
         this._isDirty = false;
         // Fetch common variables.
         const items = this._sortedItems;
@@ -673,21 +694,44 @@ export class DirListing extends Widget {
             content.appendChild(node);
         }
         // Remove extra classes from the nodes.
-        nodes.forEach(item => {
-            item.classList.remove(SELECTED_CLASS);
-            item.classList.remove(RUNNING_CLASS);
-            item.classList.remove(CUT_CLASS);
+        nodes.forEach(node => {
+            node.classList.remove(SELECTED_CLASS);
+            node.classList.remove(RUNNING_CLASS);
+            node.classList.remove(CUT_CLASS);
+            const checkbox = renderer.getCheckboxNode(node);
+            if (checkbox) {
+                // Uncheck each file checkbox
+                checkbox.checked = false;
+            }
         });
+        // Put the check-all checkbox in the header into the correct state
+        const checkAllCheckbox = renderer.getCheckboxNode(this.headerNode);
+        if (checkAllCheckbox) {
+            const totalSelected = Object.keys(this.selection).length;
+            const allSelected = items.length > 0 && totalSelected === items.length;
+            const someSelected = !allSelected && totalSelected > 0;
+            checkAllCheckbox.checked = allSelected;
+            checkAllCheckbox.indeterminate = someSelected;
+            // Stash the state in data attributes so we can access them in the click
+            // handler (because in the click handler, checkbox.checked and
+            // checkbox.indeterminate do not hold the previous value; they hold the
+            // next value).
+            checkAllCheckbox.dataset.checked = String(allSelected);
+            checkAllCheckbox.dataset.indeterminate = String(someSelected);
+            const trans = this.translator.load('jupyterlab');
+            checkAllCheckbox === null || checkAllCheckbox === void 0 ? void 0 : checkAllCheckbox.setAttribute('aria-label', allSelected || someSelected
+                ? trans.__('Deselect all files and directories')
+                : trans.__('Select all files and directories'));
+        }
         // Add extra classes to item nodes based on widget state.
         items.forEach((item, i) => {
             const node = nodes[i];
             const ft = this._manager.registry.getFileTypeForModel(item);
-            renderer.updateItemNode(node, item, ft, this.translator, this._hiddenColumns);
-            if (this.selection[item.path]) {
-                node.classList.add(SELECTED_CLASS);
-                if (this._isCut && this._model.path === this._prevPath) {
-                    node.classList.add(CUT_CLASS);
-                }
+            renderer.updateItemNode(node, item, ft, this.translator, this._hiddenColumns, this.selection[item.path]);
+            if (this.selection[item.path] &&
+                this._isCut &&
+                this._model.path === this._prevPath) {
+                node.classList.add(CUT_CLASS);
             }
             // add metadata to the node
             node.setAttribute('data-isdir', item.type === 'directory' ? 'true' : 'false');
@@ -702,8 +746,7 @@ export class DirListing extends Widget {
         }
         // Handle file session statuses.
         const paths = items.map(item => item.path);
-        each(this._model.sessions(), session => {
-            var _a;
+        for (const session of this._model.sessions()) {
             const index = ArrayExt.firstIndexOf(paths, session.path);
             const node = nodes[index];
             // Node may have been filtered out.
@@ -713,11 +756,11 @@ export class DirListing extends Widget {
                 node.classList.add(RUNNING_CLASS);
                 if (specs && name) {
                     const spec = specs.kernelspecs[name];
-                    name = spec ? spec.display_name : 'unknown'; // FIXME-TRANS: Is this localizable?
+                    name = spec ? spec.display_name : this._trans.__('unknown');
                 }
                 node.title = this._trans.__('%1\nKernel: %2', node.title, name);
             }
-        });
+        }
         this._prevPath = this._model.path;
     }
     onResize(msg) {
@@ -734,16 +777,50 @@ export class DirListing extends Widget {
         this.headerNode.innerHTML = '';
         this._renderer.populateHeaderNode(this.headerNode, this.translator, this._hiddenColumns);
     }
+    /**
+     * Would this click (or other event type) hit the checkbox by default?
+     */
+    isWithinCheckboxHitArea(event) {
+        let element = event.target;
+        while (element) {
+            if (element.classList.contains(CHECKBOX_WRAPPER_CLASS)) {
+                return true;
+            }
+            element = element.parentElement;
+        }
+        return false;
+    }
     /**
      * Handle the `'click'` event for the widget.
      */
     _evtClick(event) {
         const target = event.target;
         const header = this.headerNode;
+        const renderer = this._renderer;
         if (header.contains(target)) {
-            const state = this.renderer.handleHeaderClick(header, event);
-            if (state) {
-                this.sort(state);
+            const checkbox = renderer.getCheckboxNode(header);
+            if (checkbox && this.isWithinCheckboxHitArea(event)) {
+                const previouslyUnchecked = checkbox.dataset.indeterminate === 'false' &&
+                    checkbox.dataset.checked === 'false';
+                // The only time a click on the check-all checkbox should check all is
+                // when it was previously unchecked; otherwise, if the checkbox was
+                // either checked (all selected) or indeterminate (some selected), the
+                // click should clear all.
+                if (previouslyUnchecked) {
+                    // Select all items
+                    this._sortedItems.forEach((item) => (this.selection[item.path] = true));
+                }
+                else {
+                    // Unselect all items
+                    this.clearSelectedItems();
+                }
+                this.update();
+            }
+            else {
+                const state = this.renderer.handleHeaderClick(header, event);
+                if (state) {
+                    this.sort(state);
+                }
             }
             return;
         }
@@ -928,6 +1005,12 @@ export class DirListing extends Widget {
         if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
             return;
         }
+        // Do nothing if the double click is on a checkbox. (Otherwise a rapid
+        // check-uncheck on the checkbox will cause the adjacent file/folder to
+        // open, which is probably not what the user intended.)
+        if (this.isWithinCheckboxHitArea(event)) {
+            return;
+        }
         // Stop the event propagation.
         event.preventDefault();
         event.stopPropagation();
@@ -1090,8 +1173,8 @@ export class DirListing extends Widget {
         }
         else {
             const path = selectedPaths[0];
-            item = find(items, value => value.path === path);
-            selectedItems = toArray(this.selectedItems());
+            item = items.find(value => value.path === path);
+            selectedItems = this.selectedItems();
         }
         if (!item) {
             return;
@@ -1173,8 +1256,14 @@ export class DirListing extends Widget {
         this._softSelection = '';
         const path = items[index].path;
         const selected = Object.keys(this.selection);
+        const isLeftClickOnCheckbox = event.button === 0 &&
+            // On Mac, a left-click with the ctrlKey is treated as a right-click.
+            !(IS_MAC && event.ctrlKey) &&
+            this.isWithinCheckboxHitArea(event);
         // Handle toggling.
-        if ((IS_MAC && event.metaKey) || (!IS_MAC && event.ctrlKey)) {
+        if ((IS_MAC && event.metaKey) ||
+            (!IS_MAC && event.ctrlKey) ||
+            isLeftClickOnCheckbox) {
             if (this.selection[path]) {
                 delete this.selection[path];
             }
@@ -1262,9 +1351,9 @@ export class DirListing extends Widget {
      */
     _copy() {
         this._clipboard.length = 0;
-        each(this.selectedItems(), item => {
+        for (const item of this.selectedItems()) {
             this._clipboard.push(item.path);
-        });
+        }
     }
     /**
      * Delete the files with the given paths.
@@ -1352,12 +1441,12 @@ export class DirListing extends Widget {
         // Update the selection.
         const existing = Object.keys(this.selection);
         this.clearSelectedItems();
-        each(this._model.items(), item => {
+        for (const item of this._model.items()) {
             const path = item.path;
             if (existing.indexOf(path) !== -1) {
                 this.selection[path] = true;
             }
-        });
+        }
         if (this.isVisible) {
             // Update the sorted items.
             this.sort(this.sortState);
@@ -1433,26 +1522,40 @@ export class DirListing extends Widget {
          * @param node - The header node to populate.
          */
         populateHeaderNode(node, translator, hiddenColumns) {
-            var _a;
             translator = translator || nullTranslator;
             const trans = translator.load('jupyterlab');
             const name = this.createHeaderItemNode(trans.__('Name'));
             const narrow = document.createElement('div');
             const modified = this.createHeaderItemNode(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({
+                    alwaysVisible: true
+                });
+                node.appendChild(checkboxWrapper);
+            }
             node.appendChild(name);
             node.appendChild(narrow);
             node.appendChild(modified);
-            if ((_a = hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has) === null || _a === void 0 ? void 0 : _a.call(hiddenColumns, 'last_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);
+            }
             // set the initial caret icon
             Private.updateCaret(DOMUtils.findElement(name, HEADER_ITEM_ICON_CLASS), 'right', 'up');
         }
@@ -1468,11 +1571,13 @@ export class DirListing extends Widget {
         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)) {
-                const modifiedIcon = DOMUtils.findElement(modified, HEADER_ITEM_ICON_CLASS);
-                const nameIcon = DOMUtils.findElement(name, HEADER_ITEM_ICON_CLASS);
                 if (name.classList.contains(SELECTED_CLASS)) {
                     if (!name.classList.contains(DESCENDING_CLASS)) {
                         state.direction = 'descending';
@@ -1491,12 +1596,13 @@ export class DirListing extends Widget {
                 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)) {
-                const modifiedIcon = DOMUtils.findElement(modified, HEADER_ITEM_ICON_CLASS);
-                const nameIcon = DOMUtils.findElement(name, HEADER_ITEM_ICON_CLASS);
                 state.key = 'last_modified';
                 if (modified.classList.contains(SELECTED_CLASS)) {
                     if (!modified.classList.contains(DESCENDING_CLASS)) {
@@ -1516,7 +1622,36 @@ export class DirListing extends Widget {
                 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');
+                    }
+                    else {
+                        fileSize.classList.remove(DESCENDING_CLASS);
+                        Private.updateCaret(fileSizeIcon, 'left', 'up');
+                    }
+                }
+                else {
+                    fileSize.classList.remove(DESCENDING_CLASS);
+                    Private.updateCaret(fileSizeIcon, 'left', 'up');
+                }
+                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;
@@ -1527,30 +1662,76 @@ export class DirListing extends Widget {
          * @returns A new DOM node to use as a content item.
          */
         createItemNode(hiddenColumns) {
-            var _a;
             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);
             // Make the text note focusable so that it receives keyboard events;
             // text node was specifically chosen to receive shortcuts because
             // text element gets substituted with input area during file name edits
             // which conveniently deactivate irrelevant shortcuts.
             text.tabIndex = 0;
-            if ((_a = hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has) === null || _a === void 0 ? void 0 : _a.call(hiddenColumns, 'last_modified')) {
+            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);
+            }
             return node;
         }
+        /**
+         * Creates a node containing a checkbox.
+         *
+         * We wrap the checkbox in a label element in order to increase its hit
+         * area. This is because the padding of the checkbox itself cannot be
+         * increased via CSS, as the CSS/form compatibility table at the following
+         * url from MDN shows:
+         * https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls#check_boxes_and_radio_buttons
+         *
+         * @param [options]
+         * @params options.alwaysVisible Should the checkbox be visible even when
+         * not hovered?
+         * @returns A new DOM node that contains a checkbox.
+         */
+        createCheckboxWrapperNode(options) {
+            // Wrap the checkbox in a label element in order to increase its hit area.
+            const labelWrapper = document.createElement('label');
+            labelWrapper.classList.add(CHECKBOX_WRAPPER_CLASS);
+            // The individual file checkboxes are visible on hover, but the header
+            // check-all checkbox is always visible.
+            if (options === null || options === void 0 ? void 0 : options.alwaysVisible) {
+                labelWrapper.classList.add('jp-mod-visible');
+            }
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            // Prevent the user from clicking (via mouse, keyboard, or touch) the
+            // checkbox since other code handles the mouse and keyboard events and
+            // controls the checked state of the checkbox.
+            checkbox.addEventListener('click', event => {
+                event.preventDefault();
+            });
+            labelWrapper.appendChild(checkbox);
+            return labelWrapper;
+        }
         /**
          * Update an item node to reflect the current state of a model.
          *
@@ -1561,9 +1742,10 @@ export class DirListing extends Widget {
          * @param fileType - The file type of the item, if applicable.
          *
          */
-        updateItemNode(node, model, fileType, translator, hiddenColumns) {
-            var _a;
-            translator = translator || nullTranslator;
+        updateItemNode(node, model, fileType, translator, hiddenColumns, selected) {
+            if (selected) {
+                node.classList.add(SELECTED_CLASS);
+            }
             fileType =
                 fileType || DocumentRegistry.getDefaultTextFileType(translator);
             const { icon, iconClass, name } = fileType;
@@ -1572,12 +1754,28 @@ export class DirListing extends Widget {
             const iconContainer = DOMUtils.findElement(node, ITEM_ICON_CLASS);
             const text = DOMUtils.findElement(node, ITEM_TEXT_CLASS);
             const modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
-            if ((_a = hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has) === null || _a === void 0 ? void 0 : _a.call(hiddenColumns, 'last_modified')) {
+            const 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) {
+                node.removeChild(checkboxWrapper);
+            }
+            else if (showFileCheckboxes && !checkboxWrapper) {
+                const checkboxWrapper = this.createCheckboxWrapperNode();
+                node.insertBefore(checkboxWrapper, iconContainer);
+            }
+            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);
+            }
             // render the file item's icon
             LabIcon.resolveElement({
                 icon,
@@ -1589,8 +1787,13 @@ export class DirListing extends Widget {
             let hoverText = trans.__('Name: %1', model.name);
             // 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;
                 hoverText += trans.__('\nSize: %1', Private.formatFileSize(model.size, 1, 1024));
             }
+            else {
+                fileSize.textContent = '';
+            }
             if (model.path) {
                 const dirname = PathExt.dirname(model.path);
                 if (dirname) {
@@ -1601,10 +1804,10 @@ export class DirListing extends Widget {
                 }
             }
             if (model.created) {
-                hoverText += trans.__('\nCreated: %1', Time.format(new Date(model.created), 'YYYY-MM-DD HH:mm:ss'));
+                hoverText += trans.__('\nCreated: %1', Time.format(new Date(model.created)));
             }
             if (model.last_modified) {
-                hoverText += trans.__('\nModified: %1', Time.format(new Date(model.last_modified), 'YYYY-MM-DD HH:mm:ss'));
+                hoverText += trans.__('\nModified: %1', Time.format(new Date(model.last_modified)));
             }
             hoverText += trans.__('\nWritable: %1', model.writable);
             node.title = hoverText;
@@ -1616,16 +1819,33 @@ export class DirListing extends Widget {
                 node.removeAttribute('data-is-dot');
             }
             // If an item is being edited currently, its text node is unavailable.
+            const indices = !model.indices ? [] : model.indices;
+            let highlightedName = StringExt.highlight(model.name, indices, h.mark);
             if (text) {
-                const indices = !model.indices ? [] : model.indices;
-                let highlightedName = StringExt.highlight(model.name, indices, h.mark);
                 VirtualDOM.render(h.span(highlightedName), text);
             }
+            // Adds an aria-label to the checkbox element.
+            const checkbox = checkboxWrapper === null || checkboxWrapper === void 0 ? void 0 : checkboxWrapper.querySelector('input[type="checkbox"]');
+            if (checkbox) {
+                let ariaLabel;
+                if (fileType.contentType === 'directory') {
+                    ariaLabel = selected
+                        ? trans.__('Deselect directory "%1"', highlightedName)
+                        : trans.__('Select directory "%1"', highlightedName);
+                }
+                else {
+                    ariaLabel = selected
+                        ? trans.__('Deselect file "%1"', highlightedName)
+                        : trans.__('Select file "%1"', highlightedName);
+                }
+                checkbox.setAttribute('aria-label', ariaLabel);
+                checkbox.checked = selected !== null && selected !== void 0 ? selected : false;
+            }
             let modText = '';
             let modTitle = '';
             if (model.last_modified) {
                 modText = Time.formatHuman(new Date(model.last_modified));
-                modTitle = Time.format(new Date(model.last_modified), 'lll');
+                modTitle = Time.format(new Date(model.last_modified));
             }
             modified.textContent = modText;
             modified.title = modTitle;
@@ -1640,6 +1860,17 @@ export class DirListing extends Widget {
         getNameNode(node) {
             return DOMUtils.findElement(node, ITEM_TEXT_CLASS);
         }
+        /**
+         * Get the checkbox input element node.
+         *
+         * @param node A node created by [[createItemNode]] or
+         * [[createHeaderItemNode]]
+         *
+         * @returns The checkbox node.
+         */
+        getCheckboxNode(node) {
+            return node.querySelector(`.${CHECKBOX_WRAPPER_CLASS} input[type=checkbox]`);
+        }
         /**
          * Create a drag image for an item.
          *
@@ -1757,7 +1988,7 @@ var Private;
      * Sort a list of items by sort state as a new array.
      */
     function sort(items, state) {
-        const copy = toArray(items);
+        const copy = Array.from(items);
         const reverse = state.direction === 'descending' ? 1 : -1;
         if (state.key === 'last_modified') {
             // Sort by last modified (grouping directories first)
@@ -1769,6 +2000,15 @@ var Private;
                 return t1 - t2 || (valA - valB) * reverse;
             });
         }
+        else if (state.key === 'file_size') {
+            // Sort by size (grouping directories first)
+            copy.sort((a, b) => {
+                var _a, _b;
+                const t1 = a.type === 'directory' ? 0 : 1;
+                const t2 = b.type === 'directory' ? 0 : 1;
+                return t1 - t2 || (((_a = a.size) !== null && _a !== void 0 ? _a : 0) - ((_b = b.size) !== null && _b !== void 0 ? _b : 0)) * reverse;
+            });
+        }
         else {
             // Sort by name (grouping directories first)
             copy.sort((a, b) => {
@@ -1794,10 +2034,10 @@ var Private;
     function formatFileSize(bytes, decimalPoint, k) {
         // https://www.codexworld.com/how-to/convert-file-size-bytes-kb-mb-gb-javascript/
         if (bytes === 0) {
-            return '0 Bytes';
+            return '0 B';
         }
         const dm = decimalPoint || 2;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         if (i >= 0 && i < sizes.length) {
             return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];