@syncfusion/ej2-filemanager 33.2.10 → 33.2.13

package/dist/es6/ej2-filemanager.es5.js

@@ -11364,6 +11364,7 @@ var DetailsView = /** @__PURE__ @class */ (function () {
         this.dragObj = null;
         this.startIndex = null;
         this.firstItemIndex = null;
+        this.currentColumnIndex = 0;
         this.isSelectionUpdate = false;
         this.currentSelectedItem = [];
         this.count = 0;
@@ -11371,6 +11372,7 @@ var DetailsView = /** @__PURE__ @class */ (function () {
         this.isLoaded = false;
         this.isNameWidth = false;
         this.isMultiSelect = false;
+        this.isTabKeypressed = false;
         this.pasteOperation = false;
         this.uploadOperation = false;
         this.nextFocusIndex = null;
@@ -11382,6 +11384,7 @@ var DetailsView = /** @__PURE__ @class */ (function () {
             altEnter: 'alt+enter',
             esc: 'escape',
             tab: 'tab',
+            shiftTab: 'shift+tab',
             moveDown: 'downarrow',
             ctrlEnd: 'ctrl+end',
             ctrlHome: 'ctrl+home',
@@ -11404,6 +11407,8 @@ var DetailsView = /** @__PURE__ @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',
@@ -12741,8 +12746,21 @@ var DetailsView = /** @__PURE__ @class */ (function () {
         }
     };
     DetailsView.prototype.getFocusedItemIndex = function () {
-        return (!isNullOrUndefined(this.getFocusedItem())) ?
-            parseInt(this.getFocusedItem().getAttribute('aria-rowindex'), 10) - 1 : null;
+        var focusedItem = this.getFocusedItem();
+        if (isNullOrUndefined(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) {
@@ -12771,6 +12789,8 @@ var DetailsView = /** @__PURE__ @class */ (function () {
             case 'ctrlLeft':
             case 'shiftLeft':
             case 'csLeft':
+            case 'tab':
+            case 'shiftTab':
             case 'esc':
             case 'del':
             case 'shiftdel':
@@ -12780,6 +12800,8 @@ var DetailsView = /** @__PURE__ @class */ (function () {
             case 'f2':
             case 'moveDown':
             case 'moveUp':
+            case 'moveLeft':
+            case 'moveRight':
             case 'ctrlD':
                 e.preventDefault();
                 break;
@@ -12860,12 +12882,18 @@ var DetailsView = /** @__PURE__ @class */ (function () {
                 break;
             case 'ctrlHome':
             case 'tab':
+            case 'shiftTab':
                 if (!isNullOrUndefined(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);
@@ -12935,6 +12963,10 @@ var DetailsView = /** @__PURE__ @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);
@@ -13065,6 +13097,72 @@ var DetailsView = /** @__PURE__ @class */ (function () {
         }
         this.addFocus(nextItem);
     };
+    DetailsView.prototype.moveColumn = function (e) {
+        var focusedItem = this.getFocusedItem();
+        if (isNullOrUndefined(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], [FOCUS, FOCUSED]);
+            headerElement.setAttribute('tabindex', '0');
+            headerElement.focus();
+            addClass([headerElement], [FOCUS, 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], [FOCUS, FOCUSED]);
+                row.setAttribute('tabindex', '-1');
+            }
+            else {
+                removeClass([focusedItem], [FOCUS, 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], [FOCUS, FOCUSED]);
+            nextCell.focus();
+        }
+    };
+    DetailsView.prototype.clearCellFocus = function (cells) {
+        for (var i = 0; i < cells.length; i++) {
+            cells[i].setAttribute('tabindex', '-1');
+            removeClass([cells[i]], [FOCUS, 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') {
@@ -13150,18 +13248,58 @@ var DetailsView = /** @__PURE__ @class */ (function () {
         if (fItem) {
             fItem.removeAttribute('tabindex');
             removeClass([fItem], [FOCUS, FOCUSED]);
+            if (fItem.classList.contains('e-rowcell')) {
+                var parentRow = fItem.parentElement;
+                if (parentRow) {
+                    removeClass([parentRow], [FOCUS, 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]], [FOCUS, FOCUSED]);
+                    }
+                }
+            }
         }
         if (!isNullOrUndefined(itemElement)) {
             this.gridObj.element.setAttribute('tabindex', '-1');
-            itemElement.setAttribute('tabindex', '0');
-            itemElement.focus();
-            addClass([itemElement], [FOCUS, FOCUSED]);
+            var targetRow = itemElement;
+            targetRow.setAttribute('tabindex', '0');
+            var cells = targetRow.querySelectorAll('.e-rowcell');
+            this.clearCellFocus(Array.from(cells));
+            targetRow.focus();
+            addClass([targetRow], [FOCUS, 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 (!isNullOrUndefined(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 (!isNullOrUndefined(e.target) && e.target.classList.contains('e-defaultcursor')) {
             this.addFocus(0);
             nameFocus = e.target.nextElementSibling;
@@ -13183,6 +13321,147 @@ var DetailsView = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    DetailsView.prototype.tryNavigateToNextCellInRow = function (focusedRow, gridIconCell, isHeaderFocused) {
+        if ((!isNullOrUndefined(focusedRow) || !isNullOrUndefined(gridIconCell)) && (!isNullOrUndefined(isHeaderFocused) && !isHeaderFocused.classList.contains('e-headercell'))) {
+            if (!isNullOrUndefined(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], [FOCUS, FOCUSED]);
+                        // eslint-disable-next-line security/detect-object-injection
+                        var nextCell = cells[nextIndex];
+                        nextCell.setAttribute('tabindex', '0');
+                        addClass([nextCell], [FOCUS, 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 (!isNullOrUndefined(nextRow)) {
+                                activeCell.setAttribute('tabindex', '-1');
+                                removeClass([activeCell], [FOCUS, FOCUSED]);
+                                this.addFocus(currentRowIndex + 1);
+                                return true;
+                            }
+                            else {
+                                activeCell.setAttribute('tabindex', '-1');
+                                removeClass([activeCell], [FOCUS, FOCUSED]);
+                                activeCell.blur();
+                                return true;
+                            }
+                        }
+                        return false;
+                    }
+                }
+                var focusedRow_1 = this.getFocusedItem();
+                if (!isNullOrUndefined(focusedRow_1) && focusedRow_1.classList.contains('e-row')) {
+                    focusedRow_1.setAttribute('tabindex', '-1');
+                    removeClass([focusedRow_1], [FOCUS, FOCUSED]);
+                }
+                gridIconCell.setAttribute('tabindex', '0');
+                addClass([gridIconCell], [FOCUS, 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 (!isNullOrUndefined(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], [FOCUS, FOCUSED]);
+            targetElement.setAttribute('tabindex', '0');
+            addClass([targetElement], [FOCUS, FOCUSED]);
+            targetElement.focus();
+            return;
+        }
+        if (!isNullOrUndefined(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], [FOCUS, FOCUSED]);
+                lastCell.setAttribute('tabindex', '0');
+                addClass([lastCell], [FOCUS, FOCUSED]);
+                lastCell.focus();
+                return;
+            }
+            focusedItem.setAttribute('tabindex', '-1');
+            removeClass([focusedItem], [FOCUS, FOCUSED]);
+            this.moveFocusToHeader(headers[headers.length - 1]);
+            return;
+        }
+        if (!isNullOrUndefined(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 (!isNullOrUndefined(focusedItem)) {
+            this.moveFocusToHeader(headers[headers.length - 1]);
+        }
+    };
+    DetailsView.prototype.moveFocusToHeader = function (header) {
+        var focusedItem = this.getFocusedItem();
+        if (!isNullOrUndefined(focusedItem)) {
+            focusedItem.setAttribute('tabindex', '-1');
+            removeClass([focusedItem], [FOCUS, FOCUSED]);
+        }
+        header.setAttribute('tabindex', '0');
+        header.focus();
+        addClass([header], [FOCUS, FOCUSED]);
+    };
+    DetailsView.prototype.clearDetailsFocus = function () {
+        var focusedItem = this.getFocusedItem();
+        if (!isNullOrUndefined(focusedItem)) {
+            focusedItem.setAttribute('tabindex', '-1');
+            removeClass([focusedItem], [FOCUS, FOCUSED]);
+        }
+        var breadcrumbBar = select('.' + BREADCRUMBS, this.parent.element);
+        if (!isNullOrUndefined(breadcrumbBar)) {
+            var searchInput = breadcrumbBar.querySelector('input[aria-label="Search"]');
+            if (!isNullOrUndefined(searchInput)) {
+                searchInput.setAttribute('tabindex', '0');
+                searchInput.focus();
+            }
+            else {
+                var lastBreadcrumb = breadcrumbBar.querySelector('.e-address-list-item:last-child');
+                if (!isNullOrUndefined(lastBreadcrumb)) {
+                    lastBreadcrumb.setAttribute('tabindex', '0');
+                    lastBreadcrumb.focus();
+                }
+            }
+        }
+    };
     DetailsView.prototype.getFocusedItem = function () {
         return select('.' + FOCUSED, this.element);
     };