@jupyterlab/filebrowser 4.0.0-alpha.9 → 4.0.0-beta.1

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,10 @@ 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.
@@ -71,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.
  */
@@ -79,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.
  */
@@ -180,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);
     }
@@ -253,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.
@@ -297,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));
@@ -307,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);
@@ -359,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;
@@ -376,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)));
     }
@@ -389,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];
@@ -490,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.
@@ -658,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;
@@ -692,7 +708,7 @@ export class DirListing extends Widget {
         const checkAllCheckbox = renderer.getCheckboxNode(this.headerNode);
         if (checkAllCheckbox) {
             const totalSelected = Object.keys(this.selection).length;
-            const allSelected = totalSelected === items.length;
+            const allSelected = items.length > 0 && totalSelected === items.length;
             const someSelected = !allSelected && totalSelected > 0;
             checkAllCheckbox.checked = allSelected;
             checkAllCheckbox.indeterminate = someSelected;
@@ -702,21 +718,20 @@ export class DirListing extends Widget {
             // 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);
-                }
-                const checkbox = renderer.getCheckboxNode(node);
-                if (checkbox) {
-                    checkbox.checked = true;
-                }
+            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');
@@ -731,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.
@@ -742,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) {
@@ -1159,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;
@@ -1337,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.
@@ -1427,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);
@@ -1508,18 +1522,19 @@ export class DirListing extends Widget {
          * @param node - The header node to populate.
          */
         populateHeaderNode(node, translator, hiddenColumns) {
-            var _a, _b;
             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 (!((_a = hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has) === null || _a === void 0 ? void 0 : _a.call(hiddenColumns, 'is_selected'))) {
+            if (!(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('is_selected'))) {
                 const checkboxWrapper = this.createCheckboxWrapperNode({
                     alwaysVisible: true
                 });
@@ -1528,12 +1543,19 @@ export class DirListing extends Widget {
             node.appendChild(name);
             node.appendChild(narrow);
             node.appendChild(modified);
-            if ((_b = hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has) === null || _b === void 0 ? void 0 : _b.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');
         }
@@ -1549,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';
@@ -1572,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)) {
@@ -1597,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;
@@ -1608,32 +1662,40 @@ export class DirListing extends Widget {
          * @returns A new DOM node to use as a content item.
          */
         createItemNode(hiddenColumns) {
-            var _a, _b;
             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;
-            if (!((_a = hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has) === null || _a === void 0 ? void 0 : _a.call(hiddenColumns, 'is_selected'))) {
+            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 ((_b = hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has) === null || _b === void 0 ? void 0 : _b.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;
         }
         /**
@@ -1680,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, _b;
-            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;
@@ -1691,8 +1754,9 @@ 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);
+            const fileSize = DOMUtils.findElement(node, ITEM_FILE_SIZE_CLASS);
             const checkboxWrapper = DOMUtils.findElement(node, CHECKBOX_WRAPPER_CLASS);
-            const showFileCheckboxes = !((_a = hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has) === null || _a === void 0 ? void 0 : _a.call(hiddenColumns, 'is_selected'));
+            const showFileCheckboxes = !(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('is_selected'));
             if (checkboxWrapper && !showFileCheckboxes) {
                 node.removeChild(checkboxWrapper);
             }
@@ -1700,12 +1764,18 @@ export class DirListing extends Widget {
                 const checkboxWrapper = this.createCheckboxWrapperNode();
                 node.insertBefore(checkboxWrapper, iconContainer);
             }
-            if ((_b = hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has) === null || _b === void 0 ? void 0 : _b.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);
+            }
             // render the file item's icon
             LabIcon.resolveElement({
                 icon,
@@ -1717,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) {
@@ -1729,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;
@@ -1744,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;
@@ -1896,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)
@@ -1908,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) => {
@@ -1933,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];