@jupyterlab/filebrowser 4.6.0-alpha.3 → 4.6.0-alpha.5

package/lib/listing.js

@@ -63,6 +63,10 @@ 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 listing item created cell.
+ */
+const ITEM_CREATED_CLASS = 'jp-DirListing-itemCreated';
 /**
  * The class name added to the label element that wraps each item's checkbox and
  * the header's check-all checkbox.
@@ -84,6 +88,10 @@ 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 created column header cell.
+ */
+const CREATED_ID_CLASS = 'jp-id-created';
 /**
  * The mime type for a contents drag object.
  */
@@ -192,7 +200,8 @@ export class DirListing extends Widget {
             name: null,
             file_size: null,
             is_selected: null,
-            last_modified: null
+            last_modified: null,
+            date_created: null
         };
         this._sortNotebooksFirst = false;
         this._sortFileNamesNaturally = true;
@@ -200,6 +209,9 @@ export class DirListing extends Widget {
         this._allowDragDropUpload = true;
         // _focusIndex should never be set outside the range [0, this._items.length - 1]
         this._focusIndex = 0;
+        this._focusPath = '';
+        this._modifiedStyle = 'short';
+        this._createdStyle = 'short';
         this._allUploaded = new Signal(this);
         this._width = null;
         this._state = null;
@@ -228,9 +240,13 @@ export class DirListing extends Widget {
                 });
         // Get the width of the "modified" column
         this._updateModifiedSize(this.node);
+        // Get the width of the "created" column
+        this._updateCreatedSize(this.node);
         const headerNode = DOMUtils.findElement(this.node, HEADER_CLASS);
         // hide the file size column by default
         this._hiddenColumns.add('file_size');
+        // hide the date created column by default
+        this._hiddenColumns.add('date_created');
         this._renderer.populateHeaderNode(headerNode, this.translator, this._hiddenColumns, this._columnSizes);
         this._manager.activateRequested.connect(this._onActivateRequested, this);
     }
@@ -319,6 +335,7 @@ export class DirListing extends Widget {
         this._sortedItems = Private.sort(this.model.items(), state, this._sortNotebooksFirst, this._sortFileNamesNaturally, this.translator);
         this._sortState = state;
         this.update();
+        this._saveState();
     }
     /**
      * Rename the first currently selected item.
@@ -491,18 +508,43 @@ export class DirListing extends Widget {
                 return;
             }
             const sizes = columns['sizes'];
-            if (!sizes) {
-                return;
-            }
-            for (const [key, size] of Object.entries(sizes)) {
-                this._columnSizes[key] = size;
+            const sortState = columns['sortState'];
+            // Set sort state before updating column sizes so that any
+            // state save triggered by _updateColumnSizes includes the
+            // correct sort state rather than the default.
+            if (sortState) {
+                this._sortState = sortState;
+            }
+            if (sizes) {
+                for (const [key, size] of Object.entries(sizes)) {
+                    this._columnSizes[key] = size;
+                }
+                this._updateColumnSizes();
+            }
+            // Sort items and rebuild the header to reflect the restored
+            // sort state without calling sort() to avoid a redundant save.
+            if (sortState) {
+                this._sortedItems = Private.sort(this.model.items(), sortState, this._sortNotebooksFirst, this._sortFileNamesNaturally, this.translator);
+                this.headerNode.innerHTML = '';
+                this._renderer.populateHeaderNode(this.headerNode, this.translator, this._hiddenColumns, this._columnSizes, sortState);
+                this.update();
             }
-            this._updateColumnSizes();
         }
         catch (error) {
             await state.remove(key);
         }
     }
+    /**
+     * Save the current column sizes and sort state to the state database.
+     */
+    _saveState() {
+        if (this._state && this._stateColumnsKey) {
+            void this._state.save(this._stateColumnsKey, {
+                sizes: this._columnSizes,
+                sortState: { ...this._sortState }
+            });
+        }
+    }
     /**
      * Shut down kernels on the applicable currently selected items.
      *
@@ -639,6 +681,30 @@ export class DirListing extends Widget {
             this._selectionChanged.emit();
         }
     }
+    /**
+     * Move focus to selected item, or to the first item if no item is selected.
+     */
+    _focusContent() {
+        const items = this._sortedItems;
+        if (items.length === 0) {
+            this._focusItem(0);
+            return;
+        }
+        let index = this._focusPath !== ''
+            ? ArrayExt.findFirstIndex(items, value => value.path === this._focusPath)
+            : -1;
+        // Fallbacks if path is missing/not found.
+        if (index === -1) {
+            index = Math.min(Math.max(this._focusIndex, 0), items.length - 1);
+        }
+        this._selectItem(index, false, true);
+    }
+    /**
+     * Handle `'activate-request'` messages.
+     */
+    onActivateRequest(msg) {
+        this._focusContent();
+    }
     /**
      * Select an item by name.
      *
@@ -826,32 +892,47 @@ export class DirListing extends Widget {
         return width - this._paddingWidth * 2 - this._contentScrollbarWidth;
     }
     /**
-     * Update the modified column's size
+     * Update the 'modified' column's size
      */
     _updateModifiedSize(node) {
+        this._modifiedStyle = this._computeDateColumnStyle(node, MODIFIED_ID_CLASS, 'last_modified');
+    }
+    /**
+     * Update the 'date created' column's size
+     */
+    _updateCreatedSize(node) {
+        this._createdStyle = this._computeDateColumnStyle(node, CREATED_ID_CLASS, 'date_created');
+    }
+    /**
+     * Compute the Intl.RelativeTimeFormat style for a date column based on
+     * its pixel width: < 100px → 'narrow', 100–120px → 'short', > 120px → 'long'.
+     */
+    _computeDateColumnStyle(node, columnClassName, columnName) {
         var _a, _b;
-        // Look for the modified column's header
-        const modified = DOMUtils.findElement(node, MODIFIED_ID_CLASS);
-        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'
-                : this._modifiedWidth > 120
-                    ? 'long'
-                    : 'short';
+        const columnElement = DOMUtils.findElement(node, columnClassName);
+        const width = (_b = (_a = this._columnSizes[columnName]) !== null && _a !== void 0 ? _a : columnElement === null || columnElement === void 0 ? void 0 : columnElement.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 83;
+        return width < 100 ? 'narrow' : width > 120 ? 'long' : 'short';
     }
     /**
      * 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);
         }
     }
+    /**
+     * Rerender item nodes' created dates, if the created style has changed.
+     */
+    _updateCreatedStyleAndSize() {
+        const oldCreatedStyle = this._createdStyle;
+        this._updateCreatedSize(this.node);
+        if (oldCreatedStyle !== this._createdStyle) {
+            this.updateCreated(this._sortedItems, this._items);
+        }
+    }
     /**
      * Update only the modified dates.
      */
@@ -860,6 +941,9 @@ export class DirListing extends Widget {
             const node = nodes[i];
             if (node && item.last_modified) {
                 const modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
+                if (!modified) {
+                    return;
+                }
                 if (this.renderer.updateItemModified !== undefined) {
                     this.renderer.updateItemModified(modified, item.last_modified, this._modifiedStyle);
                 }
@@ -869,6 +953,26 @@ export class DirListing extends Widget {
             }
         });
     }
+    /**
+     * Update only the created dates.
+     */
+    updateCreated(items, nodes) {
+        items.forEach((item, i) => {
+            const node = nodes[i];
+            if (node && item.created) {
+                const created = DOMUtils.findElement(node, ITEM_CREATED_CLASS);
+                if (!created) {
+                    return;
+                }
+                if (this.renderer.updateItemCreated !== undefined) {
+                    this.renderer.updateItemCreated(created, item.created, this._createdStyle);
+                }
+                else {
+                    DirListing.defaultRenderer.updateItemCreated(created, item.created, this._createdStyle);
+                }
+            }
+        });
+    }
     // Update item nodes based on widget state.
     updateNodes(items, nodes, sizeOnly = false) {
         var _a;
@@ -879,10 +983,10 @@ export class DirListing extends Widget {
                     // short-circuit in case if node is not yet ready
                     return;
                 }
-                return this.renderer.updateItemSize(node, item, this._modifiedStyle, this._columnSizes);
+                return this.renderer.updateItemSize(node, item, this._modifiedStyle, this._columnSizes, this._createdStyle);
             }
             const ft = this._manager.registry.getFileTypeForModel(item);
-            this.renderer.updateItemNode(node, item, ft, this.translator, this._hiddenColumns, this.selection[item.path], this._modifiedStyle, this._columnSizes);
+            this.renderer.updateItemNode(node, item, ft, this.translator, this._hiddenColumns, this.selection[item.path], this._modifiedStyle, this._columnSizes, this._createdStyle);
             if (this.selection[item.path] &&
                 this._isCut &&
                 this._model.path === this._prevPath) {
@@ -1011,7 +1115,7 @@ export class DirListing extends Widget {
             this._hiddenColumns.add(name);
         }
         this.headerNode.innerHTML = '';
-        this._renderer.populateHeaderNode(this.headerNode, this.translator, this._hiddenColumns, this._columnSizes);
+        this._renderer.populateHeaderNode(this.headerNode, this.translator, this._hiddenColumns, this._columnSizes, this._sortState);
         this._updateColumnSizes();
     }
     _updateColumnSizes(doNotGrowBeforeInclusive = null) {
@@ -1090,6 +1194,7 @@ export class DirListing extends Widget {
             column.element.style.width = size === null ? '' : size + 'px';
         }
         this._updateModifiedStyleAndSize();
+        this._updateCreatedStyleAndSize();
         // Refresh sizes on the per item widths
         if (this.isVisible) {
             const items = this._items;
@@ -1097,11 +1202,7 @@ export class DirListing extends Widget {
                 this.updateNodes(this._sortedItems, this._items, true);
             }
         }
-        if (this._state && this._stateColumnsKey) {
-            void this._state.save(this._stateColumnsKey, {
-                sizes: this._columnSizes
-            });
-        }
+        this._saveState();
     }
     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)); });
@@ -1474,6 +1575,10 @@ export class DirListing extends Widget {
         if (model.path === model.rootPath) {
             return;
         }
+        // Check if we're at the navigation root boundary
+        if (model.root && model.path === model.root) {
+            return;
+        }
         try {
             await model.cd('..');
         }
@@ -1489,9 +1594,8 @@ export class DirListing extends Widget {
         if (this._inRename) {
             return;
         }
-        switch (event.keyCode) {
-            case 13: {
-                // Enter
+        switch (event.key) {
+            case 'Enter': {
                 // Do nothing if any modifier keys are pressed.
                 if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
                     return;
@@ -1503,16 +1607,14 @@ export class DirListing extends Widget {
                 }
                 return;
             }
-            case 38:
-                // Up arrow
+            case 'ArrowUp':
                 this._handleArrowY(event, -1);
                 return;
-            case 40:
-                // Down arrow
+            case 'ArrowDown':
                 this._handleArrowY(event, 1);
                 return;
-            case 32: {
-                // Space
+            case ' ':
+            case 'Spacebar': {
                 if (event.ctrlKey) {
                     // Follow the Windows and Ubuntu convention: you must press `ctrl` +
                     // `space` in order to toggle whether an item is selected.
@@ -1555,7 +1657,7 @@ export class DirListing extends Widget {
             event.key.length === 1 &&
             // Don't gobble up the space key on the check-all checkbox (which the
             // browser treats as a click event).
-            !((event.key === ' ' || event.keyCode === 32) &&
+            !((event.key === ' ' || event.key === 'Spacebar') &&
                 event.target.type === 'checkbox')) {
             if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
                 return;
@@ -1908,16 +2010,20 @@ export class DirListing extends Widget {
      * @param index The index of the item node to focus
      */
     _focusItem(index) {
+        var _a, _b;
         const items = this._items;
         if (items.length === 0) {
             // Focus the top node if the folder is empty and therefore there are no
             // items inside the folder to focus.
             this._focusIndex = 0;
+            this._focusPath = '';
             this.node.focus();
             return;
         }
-        this._focusIndex = index;
-        const node = items[index];
+        const clampedIndex = Math.min(Math.max(index, 0), items.length - 1);
+        this._focusIndex = clampedIndex;
+        this._focusPath = (_b = (_a = this._sortedItems[clampedIndex]) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : '';
+        const node = items[clampedIndex];
         const nameNode = this.renderer.getNameNode(node);
         if (nameNode) {
             // Make the filename text node focusable so that it receives keyboard
@@ -2260,6 +2366,16 @@ export class DirListing extends Widget {
             caretSide: 'left',
             grow: 1
         },
+        {
+            id: 'date_created',
+            className: CREATED_ID_CLASS,
+            itemClassName: ITEM_CREATED_CLASS,
+            minWidth: 60,
+            resizable: true,
+            sortable: true,
+            caretSide: 'left',
+            grow: 1
+        },
         {
             id: 'file_size',
             className: FILE_SIZE_ID_CLASS,
@@ -2301,12 +2417,21 @@ export class DirListing extends Widget {
                     fileSize.className = ITEM_FILE_SIZE_CLASS;
                     return fileSize;
                 },
+                date_created: () => {
+                    const created = document.createElement('span');
+                    created.className = ITEM_CREATED_CLASS;
+                    return created;
+                },
                 is_selected: () => this.createCheckboxWrapperNode()
             };
             /**
              * Register of most recent arguments for last modified column update.
              */
             this._modifiedColumnLastUpdate = new WeakMap();
+            /**
+             * Register of most recent arguments for date created column update.
+             */
+            this._createdColumnLastUpdate = new WeakMap();
             this._lastRenderedState = new WeakMap();
         }
         /**
@@ -2331,7 +2456,7 @@ export class DirListing extends Widget {
          *
          * @param node - The header node to populate.
          */
-        populateHeaderNode(node, translator, hiddenColumns, columnsSizes) {
+        populateHeaderNode(node, translator, hiddenColumns, columnsSizes, sortState) {
             translator = translator || nullTranslator;
             const trans = translator.load('jupyterlab');
             const elementCreators = {
@@ -2344,6 +2469,10 @@ export class DirListing extends Widget {
                     small: trans.__('Size'),
                     large: trans.__('File Size')
                 }),
+                date_created: () => this._createHeaderItemNodeWithSizes({
+                    small: trans.__('Created'),
+                    large: trans.__('Date Created')
+                }),
                 is_selected: () => this.createCheckboxWrapperNode({
                     alwaysVisible: true,
                     headerNode: true
@@ -2369,10 +2498,7 @@ export class DirListing extends Widget {
                     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');
+            this._updateSortIndicator(node, sortState !== null && sortState !== void 0 ? sortState : { direction: 'ascending', key: 'name' });
         }
         /**
          * Handle a header click.
@@ -2384,52 +2510,52 @@ export class DirListing extends Widget {
          * @returns The sort state of the header after the click event.
          */
         handleHeaderClick(node, event) {
-            const state = { direction: 'ascending', key: 'name' };
             const target = event.target;
             const sortableColumns = DirListing.columns.filter(Private.isSortable);
             for (const column of sortableColumns) {
                 const header = node.querySelector(`.${column.className}`);
                 if (!header) {
-                    // skip if the column is hidden
                     continue;
                 }
                 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');
-                        }
+                    const isSelected = header.classList.contains(SELECTED_CLASS);
+                    const isDescending = header.classList.contains(DESCENDING_CLASS);
+                    let direction = 'ascending';
+                    if (isSelected && !isDescending) {
+                        direction = 'descending';
+                    }
+                    const state = { direction, key: column.id };
+                    this._updateSortIndicator(node, state);
+                    return state;
+                }
+            }
+            return { direction: 'ascending', key: 'name' };
+        }
+        _updateSortIndicator(node, sortState) {
+            const sortableColumns = DirListing.columns.filter(Private.isSortable);
+            for (const column of sortableColumns) {
+                const header = node.querySelector(`.${column.className}`);
+                if (!header) {
+                    continue;
+                }
+                const headerIcon = DOMUtils.findElement(header, HEADER_ITEM_ICON_CLASS);
+                if (column.id === sortState.key) {
+                    header.classList.add(SELECTED_CLASS);
+                    if (sortState.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');
                     }
-                    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);
-                    }
-                    return state;
+                }
+                else {
+                    header.classList.remove(SELECTED_CLASS);
+                    header.classList.remove(DESCENDING_CLASS);
+                    Private.updateCaret(headerIcon, column.caretSide);
                 }
             }
-            return state;
         }
         /**
          * Create a new item node for a dir listing.
@@ -2502,25 +2628,47 @@ export class DirListing extends Widget {
          * @param modifiedStyle - The date style for the modified column: narrow, short, or long
          */
         updateItemModified(modified, modifiedDate, modifiedStyle) {
-            // 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) {
+            this._updateItemDate(modified, modifiedDate, modifiedStyle, this._modifiedColumnLastUpdate);
+        }
+        /**
+         * Update an item's created date.
+         *
+         * @param created - Element containing the file's created date.
+         *
+         * @param createdDate - String representation of the created date.
+         *
+         * @param createdStyle - The date style for the created column: narrow, short, or long
+         */
+        updateItemCreated(created, createdDate, createdStyle) {
+            this._updateItemDate(created, createdDate, createdStyle, this._createdColumnLastUpdate);
+        }
+        /**
+         * Shared implementation for updating a date column element.
+         *
+         * Formatting dates is expensive (0.1-0.2ms per call, so over 150 files
+         * can easily already choke the renderer), so we do the bare minimum check
+         * of comparing if an update is needed using a last update cache.
+         *
+         * @param element - The date column element to update.
+         *
+         * @param dateString - String representation of the date.
+         *
+         * @param style - The date style: narrow, short, or long.
+         *
+         * @param cache - The WeakMap cache tracking the last rendered state for
+         *   this column.
+         */
+        _updateItemDate(element, dateString, style, cache) {
+            const previousUpdate = cache.get(element);
+            if ((previousUpdate === null || previousUpdate === void 0 ? void 0 : previousUpdate.date) === dateString &&
+                (previousUpdate === null || previousUpdate === void 0 ? void 0 : previousUpdate.style) === style) {
                 return;
             }
-            const parsedDate = new Date(modifiedDate);
+            const parsedDate = new Date(dateString);
             // Render the date in one of multiple formats, depending on the container's size
-            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
-            });
+            element.textContent = Time.formatHuman(parsedDate, style);
+            element.title = Time.format(parsedDate);
+            cache.set(element, { date: dateString, style });
         }
         /**
          * Update an item node to reflect the current state of a model.
@@ -2532,7 +2680,8 @@ export class DirListing extends Widget {
          * @param fileType - The file type of the item, if applicable.
          *
          */
-        updateItemNode(node, model, fileType, translator, hiddenColumns, selected, modifiedStyle, columnsSizes) {
+        updateItemNode(node, model, fileType, translator, hiddenColumns, selected, modifiedStyle, columnsSizes, createdStyle) {
+            var _a;
             if (selected) {
                 node.classList.add(SELECTED_CLASS);
             }
@@ -2546,8 +2695,10 @@ export class DirListing extends Widget {
                 name: model.name,
                 selected,
                 lastModified: model.last_modified,
+                created: model.created,
                 modifiedStyle,
-                hiddenColumns,
+                createdStyle,
+                hiddenColumns: Array.from(hiddenColumns !== null && hiddenColumns !== void 0 ? hiddenColumns : []).sort(),
                 columnsSizes,
                 fileSize: model.size
             });
@@ -2563,6 +2714,7 @@ export class DirListing extends Widget {
             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);
+            let created = DOMUtils.findElement(node, ITEM_CREATED_CLASS);
             const showFileCheckboxes = !(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('is_selected'));
             if (checkboxWrapper && !showFileCheckboxes) {
                 node.removeChild(checkboxWrapper);
@@ -2574,18 +2726,31 @@ export class DirListing extends Widget {
             const showModified = !(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('last_modified'));
             if (modified && !showModified) {
                 node.removeChild(modified);
+                modified = undefined;
             }
             else if (showModified && !modified) {
                 modified = this.itemFactories.last_modified();
                 nameColumn.insertAdjacentElement('afterend', modified);
             }
+            const showCreated = !(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('date_created'));
+            if (created && !showCreated) {
+                node.removeChild(created);
+                created = undefined;
+            }
+            else if (showCreated && !created) {
+                created = this.itemFactories.date_created();
+                (modified !== null && modified !== void 0 ? modified : nameColumn).insertAdjacentElement('afterend', created);
+            }
             const showFileSize = !(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.has('file_size'));
             if (fileSize && !showFileSize) {
                 node.removeChild(fileSize);
             }
             else if (showFileSize && !fileSize) {
                 fileSize = this.itemFactories.file_size();
-                (modified !== null && modified !== void 0 ? modified : nameColumn).insertAdjacentElement('afterend', fileSize);
+                const insertAfter = (_a = created !== null && created !== void 0 ? created : modified) !== null && _a !== void 0 ? _a : nameColumn;
+                if (insertAfter) {
+                    insertAfter.insertAdjacentElement('afterend', fileSize);
+                }
             }
             // render the file item's icon
             requestAnimationFrame(() => {
@@ -2655,12 +2820,12 @@ export class DirListing extends Widget {
                 checkbox.setAttribute('aria-label', ariaLabel);
                 checkbox.checked = selected !== null && selected !== void 0 ? selected : false;
             }
-            this.updateItemSize(node, model, modifiedStyle, columnsSizes);
+            this.updateItemSize(node, model, modifiedStyle, columnsSizes, createdStyle);
         }
         /**
          * Update size of item nodes, assuming that model has not changed.
          */
-        updateItemSize(node, model, modifiedStyle, columnsSizes) {
+        updateItemSize(node, model, modifiedStyle, columnsSizes, createdStyle) {
             if (columnsSizes) {
                 for (const column of DirListing.columns) {
                     const element = DOMUtils.findElement(node, column.itemClassName);
@@ -2678,6 +2843,10 @@ export class DirListing extends Widget {
             if (model.last_modified && modified) {
                 this.updateItemModified(modified, model.last_modified, modifiedStyle !== null && modifiedStyle !== void 0 ? modifiedStyle : 'short');
             }
+            let created = DOMUtils.findElement(node, ITEM_CREATED_CLASS);
+            if (model.created && created) {
+                this.updateItemCreated(created, model.created, createdStyle !== null && createdStyle !== void 0 ? createdStyle : 'short');
+            }
         }
         /**
          * Get the node containing the file name.
@@ -2805,13 +2974,13 @@ var Private;
                 resolve(edit.value);
             };
             edit.onkeydown = (event) => {
-                switch (event.keyCode) {
-                    case 13: // Enter
+                switch (event.key) {
+                    case 'Enter':
                         event.stopPropagation();
                         event.preventDefault();
                         edit.blur();
                         break;
-                    case 27: // Escape
+                    case 'Escape':
                         event.stopPropagation();
                         event.preventDefault();
                         edit.value = original;
@@ -2906,6 +3075,14 @@ var Private;
                 return ((_a = b.size) !== null && _a !== void 0 ? _a : 0) - ((_b = a.size) !== null && _b !== void 0 ? _b : 0);
             }));
         }
+        else if (state.key === 'date_created') {
+            // Sort by date created
+            copy.sort(compare((a, b) => {
+                var _a, _b;
+                return (new Date((_a = a.created) !== null && _a !== void 0 ? _a : '').getTime() -
+                    new Date((_b = b.created) !== null && _b !== void 0 ? _b : '').getTime());
+            }));
+        }
         else {
             // Sort by name
             copy.sort(compare((a, b) => {