@syncfusion/ej2-filemanager 33.2.10 → 34.1.29

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.2.10
+*  version : 34.1.29
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-filemanager",
-  "version": "33.2.10",
+  "version": "34.1.29",
   "description": "Essential JS 2 FileManager Component",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,16 +8,16 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-filemanager.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~33.2.3",
-    "@syncfusion/ej2-buttons": "~33.2.5",
-    "@syncfusion/ej2-data": "~33.2.5",
-    "@syncfusion/ej2-grids": "~33.2.10",
-    "@syncfusion/ej2-inputs": "~33.2.10",
-    "@syncfusion/ej2-layouts": "~33.2.3",
-    "@syncfusion/ej2-lists": "~33.2.3",
-    "@syncfusion/ej2-navigations": "~33.2.10",
-    "@syncfusion/ej2-popups": "~33.2.7",
-    "@syncfusion/ej2-splitbuttons": "~33.2.6"
+    "@syncfusion/ej2-base": "~34.1.29",
+    "@syncfusion/ej2-buttons": "~34.1.29",
+    "@syncfusion/ej2-data": "~34.1.29",
+    "@syncfusion/ej2-grids": "~34.1.29",
+    "@syncfusion/ej2-inputs": "~34.1.29",
+    "@syncfusion/ej2-layouts": "~34.1.29",
+    "@syncfusion/ej2-lists": "~34.1.29",
+    "@syncfusion/ej2-navigations": "~34.1.29",
+    "@syncfusion/ej2-popups": "~34.1.29",
+    "@syncfusion/ej2-splitbuttons": "~34.1.29"
   },
   "devDependencies": {},
   "keywords": [

package/src/file-manager/common/operations.js

@@ -772,7 +772,7 @@ function performReadOperation(parent, result, fn, data, event, operation, target
         setValue('location', location_1, result.details);
     }
     fn(parent, result, event, operation, targetPath);
-    if (!isNOU(result.files) && (event === 'path-changed' || event === 'finalize-end' || event === 'open-end' || event === 'drop-path')) {
+    if (!isNOU(result.files) && (event === 'path-changed' || event === 'finalize-end' || event === 'open-end' || event === 'drop-path' || event === 'delete-end')) {
         parent.notify(events.searchTextChange, result);
     }
     if (typeof getValue('onSuccess', beforeSendArgs.ajaxSettings) === 'function') {

package/src/file-manager/layout/details-view.d.ts

@@ -21,6 +21,7 @@ export declare class DetailsView {
     private dragObj;
     private startIndex;
     private firstItemIndex;
+    private currentColumnIndex;
     private isSelectionUpdate;
     private currentSelectedItem;
     private count;
@@ -28,6 +29,7 @@ export declare class DetailsView {
     private isLoaded;
     private isNameWidth;
     private isMultiSelect;
+    private isTabKeypressed;
     gridObj: Grid;
     pasteOperation: boolean;
     uploadOperation: boolean;
@@ -125,6 +127,7 @@ export declare class DetailsView {
     private removeFocus;
     private onBlur;
     private getFocusedItemIndex;
+    private getRowIndexFromParent;
     private keydownHandler;
     private keyupHandler;
     gridSelectNodes(): Object[];
@@ -136,6 +139,9 @@ export declare class DetailsView {
     private moveFunction;
     private spaceSelection;
     private ctrlMoveFunction;
+    private moveColumn;
+    private clearCellFocus;
+    private getNextColumnIndex;
     private checkRowsKey;
     private InnerItems;
     private shiftSelectFocusItem;
@@ -149,6 +155,10 @@ export declare class DetailsView {
      */
     addFocus(item: number | null): void;
     private addHeaderFocus;
+    private tryNavigateToNextCellInRow;
+    private handleReverseTabNavigation;
+    private moveFocusToHeader;
+    private clearDetailsFocus;
     private getFocusedItem;
     private isSelected;
     private shiftSelectedItem;

package/src/file-manager/layout/details-view.js

@@ -33,6 +33,7 @@ var DetailsView = /** @class */ (function () {
         this.dragObj = null;
         this.startIndex = null;
         this.firstItemIndex = null;
+        this.currentColumnIndex = 0;
         this.isSelectionUpdate = false;
         this.currentSelectedItem = [];
         this.count = 0;
@@ -40,6 +41,7 @@ var DetailsView = /** @class */ (function () {
         this.isLoaded = false;
         this.isNameWidth = false;
         this.isMultiSelect = false;
+        this.isTabKeypressed = false;
         this.pasteOperation = false;
         this.uploadOperation = false;
         this.nextFocusIndex = null;
@@ -51,6 +53,7 @@ var DetailsView = /** @class */ (function () {
             altEnter: 'alt+enter',
             esc: 'escape',
             tab: 'tab',
+            shiftTab: 'shift+tab',
             moveDown: 'downarrow',
             ctrlEnd: 'ctrl+end',
             ctrlHome: 'ctrl+home',
@@ -73,6 +76,8 @@ var DetailsView = /** @class */ (function () {
             end: 'end',
             home: 'home',
             moveUp: 'uparrow',
+            moveLeft: 'leftarrow',
+            moveRight: 'rightarrow',
             del: 'delete',
             ctrlX: this.parent.isMac ? 'cmd+x' : 'ctrl+x',
             ctrlC: this.parent.isMac ? 'cmd+c' : 'ctrl+c',
@@ -291,6 +296,9 @@ var DetailsView = /** @class */ (function () {
         var pane = select('#' + this.parent.element.id + CLS.CONTENT_ID, this.parent.element);
         var bar = select('#' + this.parent.element.id + CLS.BREADCRUMBBAR_ID, this.parent.element);
         var gridHeader = select('.' + CLS.GRID_HEADER, this.parent.element);
+        if (isNOU(pane) || isNOU(bar) || isNOU(gridHeader)) {
+            return;
+        }
         var height = (pane.offsetHeight - bar.offsetHeight - gridHeader.offsetHeight);
         this.gridObj.height = height;
         this.gridObj.dataBind();
@@ -500,9 +508,11 @@ var DetailsView = /** @class */ (function () {
             }
         }
         if (typeof this.nextFocusIndex === 'number') {
-            var rowCount = this.gridObj.getRows().length;
-            if (rowCount > 0) {
-                this.addFocus(this.nextFocusIndex >= rowCount ? rowCount : this.nextFocusIndex);
+            if (!isNOU(this.gridObj.getRows())) {
+                var rowCount = this.gridObj.getRows().length;
+                if (rowCount > 0) {
+                    this.addFocus(this.nextFocusIndex >= rowCount ? rowCount : this.nextFocusIndex);
+                }
             }
             this.nextFocusIndex = null;
         }
@@ -1263,7 +1273,7 @@ var DetailsView = /** @class */ (function () {
                 this.openContent(args.data);
             }
         }
-        this.parent.visitedItem = args.row;
+        this.parent.visitedItem = (Array.isArray(args.row) ? args.row[args.row.length - 1] : args.row);
         if ((!this.parent.enableVirtualization) || (!args.isHeaderCheckboxClicked)) {
             this.addFocus(this.gridObj.selectedRowIndex);
         }
@@ -1410,8 +1420,21 @@ var DetailsView = /** @class */ (function () {
         }
     };
     DetailsView.prototype.getFocusedItemIndex = function () {
-        return (!isNOU(this.getFocusedItem())) ?
-            parseInt(this.getFocusedItem().getAttribute('aria-rowindex'), 10) - 1 : null;
+        var focusedItem = this.getFocusedItem();
+        if (isNOU(focusedItem)) {
+            return null;
+        }
+        if (focusedItem.classList.contains('e-rowcell')) {
+            return this.getRowIndexFromParent(focusedItem);
+        }
+        return parseInt(focusedItem.getAttribute('aria-rowindex'), 10) - 1;
+    };
+    DetailsView.prototype.getRowIndexFromParent = function (focusedItem) {
+        var parentRow = focusedItem.parentElement;
+        if (parentRow && parentRow.classList.contains('e-row')) {
+            return parseInt(parentRow.getAttribute('aria-rowindex'), 10) - 1;
+        }
+        return null;
     };
     /* istanbul ignore next */
     DetailsView.prototype.keydownHandler = function (e) {
@@ -1440,6 +1463,8 @@ var DetailsView = /** @class */ (function () {
             case 'ctrlLeft':
             case 'shiftLeft':
             case 'csLeft':
+            case 'tab':
+            case 'shiftTab':
             case 'esc':
             case 'del':
             case 'shiftdel':
@@ -1449,6 +1474,8 @@ var DetailsView = /** @class */ (function () {
             case 'f2':
             case 'moveDown':
             case 'moveUp':
+            case 'moveLeft':
+            case 'moveRight':
             case 'ctrlD':
                 e.preventDefault();
                 break;
@@ -1531,12 +1558,18 @@ var DetailsView = /** @class */ (function () {
                 break;
             case 'ctrlHome':
             case 'tab':
+            case 'shiftTab':
                 if (!isNOU(gridItems[0])) {
                     if (!this.parent.allowMultiSelection && e.action === 'ctrlHome') {
                         this.gridObj.selectRow(0);
                     }
-                    else if (this.gridObj.selectedRowIndex !== -1 && e.action === 'tab') {
-                        return;
+                    else if (e.action === 'shiftTab') {
+                        this.handleReverseTabNavigation(e);
+                    }
+                    else if (e.action === 'tab') {
+                        this.isTabKeypressed = true;
+                        this.addHeaderFocus(e);
+                        this.isTabKeypressed = false;
                     }
                     else {
                         this.addHeaderFocus(e);
@@ -1606,6 +1639,10 @@ var DetailsView = /** @class */ (function () {
             case 'moveDown':
                 this.moveFunction(gridItems, e, selIndex);
                 break;
+            case 'moveLeft':
+            case 'moveRight':
+                this.moveColumn(e);
+                break;
             case 'end':
                 lastItem = [getValue(this.parent.hasId ? 'id' : 'name', gridItems[gridLength - 1])];
                 this.parent.setProperties({ selectedItems: lastItem }, true);
@@ -1736,6 +1773,72 @@ var DetailsView = /** @class */ (function () {
         }
         this.addFocus(nextItem);
     };
+    DetailsView.prototype.moveColumn = function (e) {
+        var focusedItem = this.getFocusedItem();
+        if (isNOU(focusedItem)) {
+            return;
+        }
+        var isHeaderFocused = focusedItem.classList.contains('e-headercell');
+        var isRowFocused = focusedItem.classList.contains('e-row');
+        var isCellFocused = focusedItem.classList.contains('e-rowcell');
+        if (!isHeaderFocused && !isRowFocused && !isCellFocused) {
+            return;
+        }
+        if (isHeaderFocused) {
+            var headers = Array.from(this.element.querySelectorAll('th.e-headercell:not(.e-fe-checkbox)'));
+            var currentIndex = headers.indexOf(focusedItem);
+            if (currentIndex === -1) {
+                return;
+            }
+            var nextIndex = this.getNextColumnIndex(currentIndex, headers.length, e.action === 'moveRight');
+            // eslint-disable-next-line security/detect-object-injection
+            var headerElement = headers[nextIndex];
+            focusedItem.setAttribute('tabindex', '-1');
+            removeClass([focusedItem], [CLS.FOCUS, CLS.FOCUSED]);
+            headerElement.setAttribute('tabindex', '0');
+            headerElement.focus();
+            addClass([headerElement], [CLS.FOCUS, CLS.FOCUSED]);
+        }
+        else if (isRowFocused || isCellFocused) {
+            var row = (isRowFocused ? focusedItem : focusedItem.parentElement);
+            if (!isRowFocused && (!row || !row.classList.contains('e-row'))) {
+                return;
+            }
+            var cells = Array.from(row.querySelectorAll('.e-rowcell'));
+            if (cells.length === 0) {
+                return;
+            }
+            var currentCellIndex = this.currentColumnIndex || 0;
+            var nextColumnIndex = this.getNextColumnIndex(currentCellIndex, cells.length, e.action === 'moveRight');
+            this.currentColumnIndex = nextColumnIndex;
+            if (isRowFocused) {
+                removeClass([row], [CLS.FOCUS, CLS.FOCUSED]);
+                row.setAttribute('tabindex', '-1');
+            }
+            else {
+                removeClass([focusedItem], [CLS.FOCUS, CLS.FOCUSED]);
+                focusedItem.setAttribute('tabindex', '-1');
+            }
+            this.clearCellFocus(cells);
+            // eslint-disable-next-line security/detect-object-injection
+            var nextCell = cells[nextColumnIndex];
+            nextCell.setAttribute('tabindex', '0');
+            addClass([nextCell], [CLS.FOCUS, CLS.FOCUSED]);
+            nextCell.focus();
+        }
+    };
+    DetailsView.prototype.clearCellFocus = function (cells) {
+        for (var i = 0; i < cells.length; i++) {
+            cells[i].setAttribute('tabindex', '-1');
+            removeClass([cells[i]], [CLS.FOCUS, CLS.FOCUSED]);
+        }
+    };
+    DetailsView.prototype.getNextColumnIndex = function (currentIndex, maxLength, isRight) {
+        if (isRight) {
+            return Math.min(currentIndex + 1, maxLength - 1);
+        }
+        return Math.max(currentIndex - 1, 0);
+    };
     DetailsView.prototype.checkRowsKey = function (items, indexValue, focIndex, e) {
         if (this.gridObj.checkAllRows === 'Uncheck' || this.gridObj.checkAllRows === 'Intermediate') {
             if (e.action !== 'csHome' && e.action !== 'csEnd') {
@@ -1821,18 +1924,58 @@ var DetailsView = /** @class */ (function () {
         if (fItem) {
             fItem.removeAttribute('tabindex');
             removeClass([fItem], [CLS.FOCUS, CLS.FOCUSED]);
+            if (fItem.classList.contains('e-rowcell')) {
+                var parentRow = fItem.parentElement;
+                if (parentRow) {
+                    removeClass([parentRow], [CLS.FOCUS, CLS.FOCUSED]);
+                    parentRow.removeAttribute('tabindex');
+                }
+            }
+            if (fItem.classList.contains('e-row')) {
+                var focusedCells = fItem.querySelectorAll('.e-rowcell');
+                for (var i = 0; i < focusedCells.length; i++) {
+                    if (focusedCells[i].classList.contains('e-focus') || focusedCells[i].classList.contains('e-focused')) {
+                        focusedCells[i].removeAttribute('tabindex');
+                        removeClass([focusedCells[i]], [CLS.FOCUS, CLS.FOCUSED]);
+                    }
+                }
+            }
         }
         if (!isNOU(itemElement)) {
             this.gridObj.element.setAttribute('tabindex', '-1');
-            itemElement.setAttribute('tabindex', '0');
-            itemElement.focus();
-            addClass([itemElement], [CLS.FOCUS, CLS.FOCUSED]);
+            var targetRow = itemElement;
+            targetRow.setAttribute('tabindex', '0');
+            var cells = targetRow.querySelectorAll('.e-rowcell');
+            this.clearCellFocus(Array.from(cells));
+            targetRow.focus();
+            addClass([targetRow], [CLS.FOCUS, CLS.FOCUSED]);
+            this.currentColumnIndex = 0;
         }
     };
     DetailsView.prototype.addHeaderFocus = function (e) {
         var treeFocus = select('.e-row', this.element);
         this.gridObj.element.setAttribute('tabindex', '-1');
+        var isHeaderFocused = this.getFocusedItem();
         var nameFocus;
+        var focusedRow = select('.e-row.e-focus', this.element);
+        var gridIconCell;
+        if (!isNOU(focusedRow) && this.isTabKeypressed) {
+            gridIconCell = select('.e-rowcell.e-fe-grid-icon', focusedRow);
+        }
+        else {
+            if (this.isTabKeypressed) {
+                var activeCell = this.getFocusedItem();
+                if (activeCell && activeCell.classList.contains('e-rowcell')) {
+                    gridIconCell = select('.e-rowcell.e-fe-grid-icon', activeCell.closest('.e-row'));
+                }
+                else {
+                    gridIconCell = select('.e-rowcell.e-fe-grid-icon', this.element);
+                }
+            }
+        }
+        if (this.tryNavigateToNextCellInRow(focusedRow, gridIconCell, isHeaderFocused)) {
+            return;
+        }
         if (!isNOU(e.target) && e.target.classList.contains('e-defaultcursor')) {
             this.addFocus(0);
             nameFocus = e.target.nextElementSibling;
@@ -1854,6 +1997,147 @@ var DetailsView = /** @class */ (function () {
             }
         }
     };
+    DetailsView.prototype.tryNavigateToNextCellInRow = function (focusedRow, gridIconCell, isHeaderFocused) {
+        if ((!isNOU(focusedRow) || !isNOU(gridIconCell)) && (!isNOU(isHeaderFocused) && !isHeaderFocused.classList.contains('e-headercell'))) {
+            if (!isNOU(gridIconCell)) {
+                var activeCell = this.getFocusedItem();
+                if (activeCell && activeCell.classList.contains('e-rowcell')) {
+                    var row = activeCell.parentElement;
+                    var cells = row ? Array.from(row.querySelectorAll('.e-rowcell')) : [];
+                    var currentIndex = cells.indexOf(activeCell);
+                    var nextIndex = currentIndex + 1;
+                    if (nextIndex < cells.length) {
+                        this.currentColumnIndex = nextIndex;
+                        activeCell.setAttribute('tabindex', '-1');
+                        removeClass([activeCell], [CLS.FOCUS, CLS.FOCUSED]);
+                        // eslint-disable-next-line security/detect-object-injection
+                        var nextCell = cells[nextIndex];
+                        nextCell.setAttribute('tabindex', '0');
+                        addClass([nextCell], [CLS.FOCUS, CLS.FOCUSED]);
+                        nextCell.focus();
+                        return true;
+                    }
+                    else {
+                        var currentRow = activeCell.parentElement;
+                        var rows = this.gridObj.getRows();
+                        var currentRowIndex = rows.indexOf(currentRow);
+                        if (currentRowIndex !== -1) {
+                            var nextRow = this.gridObj.getRowByIndex(currentRowIndex + 1);
+                            if (!isNOU(nextRow)) {
+                                activeCell.setAttribute('tabindex', '-1');
+                                removeClass([activeCell], [CLS.FOCUS, CLS.FOCUSED]);
+                                this.addFocus(currentRowIndex + 1);
+                                return true;
+                            }
+                            else {
+                                activeCell.setAttribute('tabindex', '-1');
+                                removeClass([activeCell], [CLS.FOCUS, CLS.FOCUSED]);
+                                activeCell.blur();
+                                return true;
+                            }
+                        }
+                        return false;
+                    }
+                }
+                var focusedRow_1 = this.getFocusedItem();
+                if (!isNOU(focusedRow_1) && focusedRow_1.classList.contains('e-row')) {
+                    focusedRow_1.setAttribute('tabindex', '-1');
+                    removeClass([focusedRow_1], [CLS.FOCUS, CLS.FOCUSED]);
+                }
+                gridIconCell.setAttribute('tabindex', '0');
+                addClass([gridIconCell], [CLS.FOCUS, CLS.FOCUSED]);
+                gridIconCell.focus();
+                return true;
+            }
+        }
+        return false;
+    };
+    DetailsView.prototype.handleReverseTabNavigation = function (e) {
+        e.preventDefault();
+        var focusedItem = this.getFocusedItem();
+        var headers = Array.from(this.element.querySelectorAll('th.e-headercell:not(.e-fe-checkbox)'));
+        if (headers.length === 0) {
+            return;
+        }
+        if (!isNOU(focusedItem) && focusedItem.classList.contains('e-rowcell')) {
+            var row = focusedItem.parentElement;
+            var cells = row ? Array.from(row.querySelectorAll('.e-rowcell:not(.e-gridchkbox)')) : [];
+            var currentTargetIndex = cells.indexOf(focusedItem);
+            var prevIndex = currentTargetIndex - 1;
+            // eslint-disable-next-line security/detect-object-injection
+            var targetElement = prevIndex >= 0 ? cells[prevIndex] : row;
+            focusedItem.setAttribute('tabindex', '-1');
+            removeClass([focusedItem], [CLS.FOCUS, CLS.FOCUSED]);
+            targetElement.setAttribute('tabindex', '0');
+            addClass([targetElement], [CLS.FOCUS, CLS.FOCUSED]);
+            targetElement.focus();
+            return;
+        }
+        if (!isNOU(focusedItem) && focusedItem.classList.contains('e-row')) {
+            var rows = this.gridObj.getRows();
+            var currentRowIndex = rows.indexOf(focusedItem);
+            if (currentRowIndex > 0) {
+                var previousRow = rows[currentRowIndex - 1];
+                var previousRowCells = Array.from(previousRow.querySelectorAll('.e-rowcell:not(.e-gridchkbox)'));
+                var lastCell = previousRowCells[previousRowCells.length - 1];
+                focusedItem.setAttribute('tabindex', '-1');
+                removeClass([focusedItem], [CLS.FOCUS, CLS.FOCUSED]);
+                lastCell.setAttribute('tabindex', '0');
+                addClass([lastCell], [CLS.FOCUS, CLS.FOCUSED]);
+                lastCell.focus();
+                return;
+            }
+            focusedItem.setAttribute('tabindex', '-1');
+            removeClass([focusedItem], [CLS.FOCUS, CLS.FOCUSED]);
+            this.moveFocusToHeader(headers[headers.length - 1]);
+            return;
+        }
+        if (!isNOU(focusedItem) && focusedItem.classList.contains('e-headercell')) {
+            var currentIndex = headers.indexOf(focusedItem);
+            if (currentIndex > 0) {
+                this.moveFocusToHeader(headers[currentIndex - 1]);
+            }
+            else if (currentIndex === 0) {
+                this.clearDetailsFocus();
+            }
+            return;
+        }
+        if (!isNOU(focusedItem)) {
+            this.moveFocusToHeader(headers[headers.length - 1]);
+        }
+    };
+    DetailsView.prototype.moveFocusToHeader = function (header) {
+        var focusedItem = this.getFocusedItem();
+        if (!isNOU(focusedItem)) {
+            focusedItem.setAttribute('tabindex', '-1');
+            removeClass([focusedItem], [CLS.FOCUS, CLS.FOCUSED]);
+        }
+        header.setAttribute('tabindex', '0');
+        header.focus();
+        addClass([header], [CLS.FOCUS, CLS.FOCUSED]);
+    };
+    DetailsView.prototype.clearDetailsFocus = function () {
+        var focusedItem = this.getFocusedItem();
+        if (!isNOU(focusedItem)) {
+            focusedItem.setAttribute('tabindex', '-1');
+            removeClass([focusedItem], [CLS.FOCUS, CLS.FOCUSED]);
+        }
+        var breadcrumbBar = select('.' + CLS.BREADCRUMBS, this.parent.element);
+        if (!isNOU(breadcrumbBar)) {
+            var searchInput = breadcrumbBar.querySelector('input[aria-label="Search"]');
+            if (!isNOU(searchInput)) {
+                searchInput.setAttribute('tabindex', '0');
+                searchInput.focus();
+            }
+            else {
+                var lastBreadcrumb = breadcrumbBar.querySelector('.e-address-list-item:last-child');
+                if (!isNOU(lastBreadcrumb)) {
+                    lastBreadcrumb.setAttribute('tabindex', '0');
+                    lastBreadcrumb.focus();
+                }
+            }
+        }
+    };
     DetailsView.prototype.getFocusedItem = function () {
         return select('.' + CLS.FOCUSED, this.element);
     };

package/src/file-manager/layout/large-icons-view.js

@@ -1255,7 +1255,7 @@ var LargeIconsView = /** @class */ (function () {
      * @hidden
      */
     LargeIconsView.prototype.getFirstItem = function () {
-        return this.itemList[0];
+        return !isNOU(this.itemList) && this.itemList.length > 0 ? this.itemList[0] : null;
     };
     LargeIconsView.prototype.getLastItem = function () {
         return this.itemList[this.itemList.length - 1];