@syncfusion/ej2-filemanager 33.2.6 → 33.2.13

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

@@ -11144,6 +11144,7 @@ class DetailsView {
         this.dragObj = null;
         this.startIndex = null;
         this.firstItemIndex = null;
+        this.currentColumnIndex = 0;
         this.isSelectionUpdate = false;
         this.currentSelectedItem = [];
         this.count = 0;
@@ -11151,6 +11152,7 @@ class DetailsView {
         this.isLoaded = false;
         this.isNameWidth = false;
         this.isMultiSelect = false;
+        this.isTabKeypressed = false;
         this.pasteOperation = false;
         this.uploadOperation = false;
         this.nextFocusIndex = null;
@@ -11162,6 +11164,7 @@ class DetailsView {
             altEnter: 'alt+enter',
             esc: 'escape',
             tab: 'tab',
+            shiftTab: 'shift+tab',
             moveDown: 'downarrow',
             ctrlEnd: 'ctrl+end',
             ctrlHome: 'ctrl+home',
@@ -11184,6 +11187,8 @@ class DetailsView {
             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',
@@ -11653,7 +11658,10 @@ class DetailsView {
         }
     }
     onSortColumn() {
-        if (this.parent.sortOrder !== 'None') {
+        const columns = this.gridObj.columns;
+        const isValidSortField = !isNullOrUndefined(columns) &&
+            columns.some((col) => col.field === this.parent.sortBy);
+        if (this.parent.sortOrder !== 'None' && isValidSortField) {
             this.gridObj.sortModule.sortColumn(this.parent.sortBy, this.parent.sortOrder);
         }
         else {
@@ -12506,8 +12514,21 @@ class DetailsView {
         }
     }
     getFocusedItemIndex() {
-        return (!isNullOrUndefined(this.getFocusedItem())) ?
-            parseInt(this.getFocusedItem().getAttribute('aria-rowindex'), 10) - 1 : null;
+        const 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;
+    }
+    getRowIndexFromParent(focusedItem) {
+        const parentRow = focusedItem.parentElement;
+        if (parentRow && parentRow.classList.contains('e-row')) {
+            return parseInt(parentRow.getAttribute('aria-rowindex'), 10) - 1;
+        }
+        return null;
     }
     /* istanbul ignore next */
     keydownHandler(e) {
@@ -12536,6 +12557,8 @@ class DetailsView {
             case 'ctrlLeft':
             case 'shiftLeft':
             case 'csLeft':
+            case 'tab':
+            case 'shiftTab':
             case 'esc':
             case 'del':
             case 'shiftdel':
@@ -12545,6 +12568,8 @@ class DetailsView {
             case 'f2':
             case 'moveDown':
             case 'moveUp':
+            case 'moveLeft':
+            case 'moveRight':
             case 'ctrlD':
                 e.preventDefault();
                 break;
@@ -12625,12 +12650,18 @@ class DetailsView {
                 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);
@@ -12700,6 +12731,10 @@ class DetailsView {
             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);
@@ -12830,6 +12865,72 @@ class DetailsView {
         }
         this.addFocus(nextItem);
     }
+    moveColumn(e) {
+        const focusedItem = this.getFocusedItem();
+        if (isNullOrUndefined(focusedItem)) {
+            return;
+        }
+        const isHeaderFocused = focusedItem.classList.contains('e-headercell');
+        const isRowFocused = focusedItem.classList.contains('e-row');
+        const isCellFocused = focusedItem.classList.contains('e-rowcell');
+        if (!isHeaderFocused && !isRowFocused && !isCellFocused) {
+            return;
+        }
+        if (isHeaderFocused) {
+            const headers = Array.from(this.element.querySelectorAll('th.e-headercell:not(.e-fe-checkbox)'));
+            const currentIndex = headers.indexOf(focusedItem);
+            if (currentIndex === -1) {
+                return;
+            }
+            const nextIndex = this.getNextColumnIndex(currentIndex, headers.length, e.action === 'moveRight');
+            // eslint-disable-next-line security/detect-object-injection
+            const 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) {
+            const row = (isRowFocused ? focusedItem : focusedItem.parentElement);
+            if (!isRowFocused && (!row || !row.classList.contains('e-row'))) {
+                return;
+            }
+            const cells = Array.from(row.querySelectorAll('.e-rowcell'));
+            if (cells.length === 0) {
+                return;
+            }
+            const currentCellIndex = this.currentColumnIndex || 0;
+            const 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
+            const nextCell = cells[nextColumnIndex];
+            nextCell.setAttribute('tabindex', '0');
+            addClass([nextCell], [FOCUS, FOCUSED]);
+            nextCell.focus();
+        }
+    }
+    clearCellFocus(cells) {
+        for (let i = 0; i < cells.length; i++) {
+            cells[i].setAttribute('tabindex', '-1');
+            removeClass([cells[i]], [FOCUS, FOCUSED]);
+        }
+    }
+    getNextColumnIndex(currentIndex, maxLength, isRight) {
+        if (isRight) {
+            return Math.min(currentIndex + 1, maxLength - 1);
+        }
+        return Math.max(currentIndex - 1, 0);
+    }
     checkRowsKey(items, indexValue, focIndex, e) {
         if (this.gridObj.checkAllRows === 'Uncheck' || this.gridObj.checkAllRows === 'Intermediate') {
             if (e.action !== 'csHome' && e.action !== 'csEnd') {
@@ -12915,18 +13016,58 @@ class DetailsView {
         if (fItem) {
             fItem.removeAttribute('tabindex');
             removeClass([fItem], [FOCUS, FOCUSED]);
+            if (fItem.classList.contains('e-rowcell')) {
+                const parentRow = fItem.parentElement;
+                if (parentRow) {
+                    removeClass([parentRow], [FOCUS, FOCUSED]);
+                    parentRow.removeAttribute('tabindex');
+                }
+            }
+            if (fItem.classList.contains('e-row')) {
+                const focusedCells = fItem.querySelectorAll('.e-rowcell');
+                for (let 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]);
+            const targetRow = itemElement;
+            targetRow.setAttribute('tabindex', '0');
+            const cells = targetRow.querySelectorAll('.e-rowcell');
+            this.clearCellFocus(Array.from(cells));
+            targetRow.focus();
+            addClass([targetRow], [FOCUS, FOCUSED]);
+            this.currentColumnIndex = 0;
         }
     }
     addHeaderFocus(e) {
         const treeFocus = select('.e-row', this.element);
         this.gridObj.element.setAttribute('tabindex', '-1');
+        const isHeaderFocused = this.getFocusedItem();
         let nameFocus;
+        const focusedRow = select('.e-row.e-focus', this.element);
+        let gridIconCell;
+        if (!isNullOrUndefined(focusedRow) && this.isTabKeypressed) {
+            gridIconCell = select('.e-rowcell.e-fe-grid-icon', focusedRow);
+        }
+        else {
+            if (this.isTabKeypressed) {
+                const 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;
@@ -12948,6 +13089,147 @@ class DetailsView {
             }
         }
     }
+    tryNavigateToNextCellInRow(focusedRow, gridIconCell, isHeaderFocused) {
+        if ((!isNullOrUndefined(focusedRow) || !isNullOrUndefined(gridIconCell)) && (!isNullOrUndefined(isHeaderFocused) && !isHeaderFocused.classList.contains('e-headercell'))) {
+            if (!isNullOrUndefined(gridIconCell)) {
+                const activeCell = this.getFocusedItem();
+                if (activeCell && activeCell.classList.contains('e-rowcell')) {
+                    const row = activeCell.parentElement;
+                    const cells = row ? Array.from(row.querySelectorAll('.e-rowcell')) : [];
+                    const currentIndex = cells.indexOf(activeCell);
+                    const 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
+                        const nextCell = cells[nextIndex];
+                        nextCell.setAttribute('tabindex', '0');
+                        addClass([nextCell], [FOCUS, FOCUSED]);
+                        nextCell.focus();
+                        return true;
+                    }
+                    else {
+                        const currentRow = activeCell.parentElement;
+                        const rows = this.gridObj.getRows();
+                        const currentRowIndex = rows.indexOf(currentRow);
+                        if (currentRowIndex !== -1) {
+                            const 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;
+                    }
+                }
+                const focusedRow = this.getFocusedItem();
+                if (!isNullOrUndefined(focusedRow) && focusedRow.classList.contains('e-row')) {
+                    focusedRow.setAttribute('tabindex', '-1');
+                    removeClass([focusedRow], [FOCUS, FOCUSED]);
+                }
+                gridIconCell.setAttribute('tabindex', '0');
+                addClass([gridIconCell], [FOCUS, FOCUSED]);
+                gridIconCell.focus();
+                return true;
+            }
+        }
+        return false;
+    }
+    handleReverseTabNavigation(e) {
+        e.preventDefault();
+        const focusedItem = this.getFocusedItem();
+        const 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')) {
+            const row = focusedItem.parentElement;
+            const cells = row ? Array.from(row.querySelectorAll('.e-rowcell:not(.e-gridchkbox)')) : [];
+            const currentTargetIndex = cells.indexOf(focusedItem);
+            const prevIndex = currentTargetIndex - 1;
+            // eslint-disable-next-line security/detect-object-injection
+            const 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')) {
+            const rows = this.gridObj.getRows();
+            const currentRowIndex = rows.indexOf(focusedItem);
+            if (currentRowIndex > 0) {
+                const previousRow = rows[currentRowIndex - 1];
+                const previousRowCells = Array.from(previousRow.querySelectorAll('.e-rowcell:not(.e-gridchkbox)'));
+                const 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')) {
+            const 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]);
+        }
+    }
+    moveFocusToHeader(header) {
+        const focusedItem = this.getFocusedItem();
+        if (!isNullOrUndefined(focusedItem)) {
+            focusedItem.setAttribute('tabindex', '-1');
+            removeClass([focusedItem], [FOCUS, FOCUSED]);
+        }
+        header.setAttribute('tabindex', '0');
+        header.focus();
+        addClass([header], [FOCUS, FOCUSED]);
+    }
+    clearDetailsFocus() {
+        const focusedItem = this.getFocusedItem();
+        if (!isNullOrUndefined(focusedItem)) {
+            focusedItem.setAttribute('tabindex', '-1');
+            removeClass([focusedItem], [FOCUS, FOCUSED]);
+        }
+        const breadcrumbBar = select('.' + BREADCRUMBS, this.parent.element);
+        if (!isNullOrUndefined(breadcrumbBar)) {
+            const searchInput = breadcrumbBar.querySelector('input[aria-label="Search"]');
+            if (!isNullOrUndefined(searchInput)) {
+                searchInput.setAttribute('tabindex', '0');
+                searchInput.focus();
+            }
+            else {
+                const lastBreadcrumb = breadcrumbBar.querySelector('.e-address-list-item:last-child');
+                if (!isNullOrUndefined(lastBreadcrumb)) {
+                    lastBreadcrumb.setAttribute('tabindex', '0');
+                    lastBreadcrumb.focus();
+                }
+            }
+        }
+    }
     getFocusedItem() {
         return select('.' + FOCUSED, this.element);
     }