@syncfusion/ej2-filemanager 33.2.10 → 34.1.29

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

@@ -3189,7 +3189,7 @@ function performReadOperation(parent, result, fn, data, event, operation, target
         setValue('location', location, result.details);
     }
     fn(parent, result, event, operation, targetPath);
-    if (!isNullOrUndefined(result.files) && (event === 'path-changed' || event === 'finalize-end' || event === 'open-end' || event === 'drop-path')) {
+    if (!isNullOrUndefined(result.files) && (event === 'path-changed' || event === 'finalize-end' || event === 'open-end' || event === 'drop-path' || event === 'delete-end')) {
         parent.notify(searchTextChange, result);
     }
     if (typeof getValue('onSuccess', beforeSendArgs.ajaxSettings) === 'function') {
@@ -6027,7 +6027,7 @@ class LargeIconsView {
      * @hidden
      */
     getFirstItem() {
-        return this.itemList[0];
+        return !isNullOrUndefined(this.itemList) && this.itemList.length > 0 ? this.itemList[0] : null;
     }
     getLastItem() {
         return this.itemList[this.itemList.length - 1];
@@ -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',
@@ -11397,6 +11402,9 @@ class DetailsView {
         const pane = select('#' + this.parent.element.id + CONTENT_ID, this.parent.element);
         const bar = select('#' + this.parent.element.id + BREADCRUMBBAR_ID, this.parent.element);
         const gridHeader = select('.' + GRID_HEADER, this.parent.element);
+        if (isNullOrUndefined(pane) || isNullOrUndefined(bar) || isNullOrUndefined(gridHeader)) {
+            return;
+        }
         const height = (pane.offsetHeight - bar.offsetHeight - gridHeader.offsetHeight);
         this.gridObj.height = height;
         this.gridObj.dataBind();
@@ -11605,9 +11613,11 @@ class DetailsView {
             }
         }
         if (typeof this.nextFocusIndex === 'number') {
-            const rowCount = this.gridObj.getRows().length;
-            if (rowCount > 0) {
-                this.addFocus(this.nextFocusIndex >= rowCount ? rowCount : this.nextFocusIndex);
+            if (!isNullOrUndefined(this.gridObj.getRows())) {
+                const rowCount = this.gridObj.getRows().length;
+                if (rowCount > 0) {
+                    this.addFocus(this.nextFocusIndex >= rowCount ? rowCount : this.nextFocusIndex);
+                }
             }
             this.nextFocusIndex = null;
         }
@@ -12363,7 +12373,7 @@ class DetailsView {
                 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);
         }
@@ -12509,8 +12519,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) {
@@ -12539,6 +12562,8 @@ class DetailsView {
             case 'ctrlLeft':
             case 'shiftLeft':
             case 'csLeft':
+            case 'tab':
+            case 'shiftTab':
             case 'esc':
             case 'del':
             case 'shiftdel':
@@ -12548,6 +12573,8 @@ class DetailsView {
             case 'f2':
             case 'moveDown':
             case 'moveUp':
+            case 'moveLeft':
+            case 'moveRight':
             case 'ctrlD':
                 e.preventDefault();
                 break;
@@ -12628,12 +12655,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);
@@ -12703,6 +12736,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);
@@ -12833,6 +12870,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') {
@@ -12918,18 +13021,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;
@@ -12951,6 +13094,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);
     }