@syncfusion/ej2-filemanager 19.4.47 → 19.4.50-117124

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

@@ -202,6 +202,45 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/**
+ * Specifies the virtualization settings of the File Manager.
+ */
+var VirtualizationSettings = /** @__PURE__ @class */ (function (_super) {
+    __extends$4(VirtualizationSettings, _super);
+    function VirtualizationSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$4([
+        Property(false)
+    ], VirtualizationSettings.prototype, "enable", void 0);
+    __decorate$4([
+        Property(20)
+    ], VirtualizationSettings.prototype, "detailsViewItemsCount", void 0);
+    __decorate$4([
+        Property(40)
+    ], VirtualizationSettings.prototype, "largeIconsViewItemsCount", void 0);
+    return VirtualizationSettings;
+}(ChildProperty));
+
+var __extends$5 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var fileItems = ['Open', '|', 'Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'];
 var folderItems = ['Open', '|', 'Cut', 'Copy', 'Paste', '|', 'Delete', 'Rename', 'Download', '|', 'Details'];
 var layoutItems = [
@@ -211,26 +250,26 @@ var layoutItems = [
  * Specifies the ContextMenu settings of the File Manager.
  */
 var ContextMenuSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$4(ContextMenuSettings, _super);
+    __extends$5(ContextMenuSettings, _super);
     function ContextMenuSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$4([
+    __decorate$5([
         Property(fileItems)
     ], ContextMenuSettings.prototype, "file", void 0);
-    __decorate$4([
+    __decorate$5([
         Property(folderItems)
     ], ContextMenuSettings.prototype, "folder", void 0);
-    __decorate$4([
+    __decorate$5([
         Property(layoutItems)
     ], ContextMenuSettings.prototype, "layout", void 0);
-    __decorate$4([
+    __decorate$5([
         Property(true)
     ], ContextMenuSettings.prototype, "visible", void 0);
     return ContextMenuSettings;
 }(ChildProperty));
 
-var __extends$5 = (undefined && undefined.__extends) || (function () {
+var __extends$6 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -243,7 +282,7 @@ var __extends$5 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -253,23 +292,26 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
  * Specifies the navigationpane settings of the File Manager.
  */
 var NavigationPaneSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$5(NavigationPaneSettings, _super);
+    __extends$6(NavigationPaneSettings, _super);
     function NavigationPaneSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$5([
+    __decorate$6([
         Property('650px')
     ], NavigationPaneSettings.prototype, "maxWidth", void 0);
-    __decorate$5([
+    __decorate$6([
         Property('240px')
     ], NavigationPaneSettings.prototype, "minWidth", void 0);
-    __decorate$5([
+    __decorate$6([
         Property(true)
     ], NavigationPaneSettings.prototype, "visible", void 0);
+    __decorate$6([
+        Property('None')
+    ], NavigationPaneSettings.prototype, "sortOrder", void 0);
     return NavigationPaneSettings;
 }(ChildProperty));
 
-var __extends$6 = (undefined && undefined.__extends) || (function () {
+var __extends$7 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -282,7 +324,7 @@ var __extends$6 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -292,29 +334,32 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
  * Specifies the Ajax settings of the File Manager.
  */
 var UploadSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$6(UploadSettings, _super);
+    __extends$7(UploadSettings, _super);
     function UploadSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$6([
+    __decorate$7([
         Property('')
     ], UploadSettings.prototype, "allowedExtensions", void 0);
-    __decorate$6([
+    __decorate$7([
         Property(true)
     ], UploadSettings.prototype, "autoUpload", void 0);
-    __decorate$6([
+    __decorate$7([
         Property(false)
     ], UploadSettings.prototype, "autoClose", void 0);
-    __decorate$6([
+    __decorate$7([
+        Property(false)
+    ], UploadSettings.prototype, "directoryUpload", void 0);
+    __decorate$7([
         Property(0)
     ], UploadSettings.prototype, "minFileSize", void 0);
-    __decorate$6([
+    __decorate$7([
         Property(30000000)
     ], UploadSettings.prototype, "maxFileSize", void 0);
     return UploadSettings;
 }(ChildProperty));
 
-var __extends$7 = (undefined && undefined.__extends) || (function () {
+var __extends$8 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -327,7 +372,7 @@ var __extends$7 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -338,56 +383,56 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
  */
 /* istanbul ignore next */
 var Column = /** @__PURE__ @class */ (function (_super) {
-    __extends$7(Column, _super);
+    __extends$8(Column, _super);
     function Column() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$7([
+    __decorate$8([
         Property('')
     ], Column.prototype, "field", void 0);
-    __decorate$7([
+    __decorate$8([
         Property('')
     ], Column.prototype, "headerText", void 0);
-    __decorate$7([
+    __decorate$8([
         Property('')
     ], Column.prototype, "width", void 0);
-    __decorate$7([
+    __decorate$8([
         Property('')
     ], Column.prototype, "minWidth", void 0);
-    __decorate$7([
+    __decorate$8([
         Property('')
     ], Column.prototype, "maxWidth", void 0);
-    __decorate$7([
+    __decorate$8([
         Property('Left')
     ], Column.prototype, "textAlign", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(null)
     ], Column.prototype, "headerTextAlign", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(null)
     ], Column.prototype, "type", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(null)
     ], Column.prototype, "format", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(null)
     ], Column.prototype, "template", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(null)
     ], Column.prototype, "headerTemplate", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(true)
     ], Column.prototype, "allowSorting", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(true)
     ], Column.prototype, "allowResizing", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(null)
     ], Column.prototype, "customAttributes", void 0);
-    __decorate$7([
+    __decorate$8([
         Property('')
     ], Column.prototype, "hideAtMedia", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(null)
     ], Column.prototype, "customFormat", void 0);
     return Column;
@@ -548,6 +593,8 @@ var SUBMENU_ICON = 'e-caret';
 /** @hidden */
 var GRID_VIEW = 'e-content';
 /** @hidden */
+var GRID_CONTENT = 'e-gridcontent';
+/** @hidden */
 var ICON_VIEW = 'e-list-parent';
 /** @hidden */
 var ICON_OPEN = 'e-icons e-fe-open';
@@ -1020,7 +1067,7 @@ function searchWordHandler(parent, value, isLayoutChange) {
     else {
         if (!parent.isFiltered) {
             if (parent.isSortByClicked) {
-                parent.notify(layoutChange, { files: parent.largeiconsviewModule.items });
+                parent.notify(layoutChange, { files: (parent.oldView === 'Details') ? parent.detailsviewModule.gridObj.dataSource : parent.largeiconsviewModule.allItems });
                 parent.isSortByClicked = false;
             }
             else {
@@ -1041,6 +1088,7 @@ function searchWordHandler(parent, value, isLayoutChange) {
  * @private
  */
 function updateLayout(parent, view) {
+    parent.oldView = parent.view;
     parent.setProperties({ view: view }, true);
     if (parent.breadcrumbbarModule.searchObj.element.value !== '' || parent.isFiltered) {
         parent.layoutSelectedItems = parent.selectedItems;
@@ -1064,7 +1112,7 @@ function updateLayout(parent, view) {
 function getTargetModule(parent, element) {
     var tartgetModule = '';
     if (element) {
-        if (closest(element, '.e-gridcontent')) {
+        if (closest(element, '.' + ROOT + '.' + CONTROL + ' .' + GRID_CONTENT)) {
             tartgetModule = 'detailsview';
         }
         else if (closest(element, '.' + LARGE_ICONS)) {
@@ -1205,18 +1253,19 @@ function fileType(file) {
 // eslint-disable-next-line
 function getImageUrl(parent, item) {
     var baseUrl = parent.ajaxSettings.getImageUrl ? parent.ajaxSettings.getImageUrl : parent.ajaxSettings.url;
+    var pathUrl = (baseUrl.indexOf('?') !== -1) ? '&path=' : '?path=';
     var imgUrl;
     var fileName = encodeURIComponent(getValue('name', item));
     var fPath = getValue('filterPath', item);
     if (parent.hasId) {
         var imgId = getValue('id', item);
-        imgUrl = baseUrl + '?path=' + parent.path + '&id=' + imgId;
+        imgUrl = baseUrl + pathUrl + parent.path + '&id=' + imgId;
     }
     else if (!isNullOrUndefined(fPath)) {
-        imgUrl = baseUrl + '?path=' + fPath.replace(/\\/g, '/') + fileName;
+        imgUrl = baseUrl + pathUrl + encodeURIComponent(fPath.replace(/\\/g, '/')) + fileName;
     }
     else {
-        imgUrl = baseUrl + '?path=' + parent.path + fileName;
+        imgUrl = baseUrl + pathUrl + parent.path + fileName;
     }
     imgUrl = imgUrl + '&time=' + (new Date().getTime()).toString();
     var eventArgs = {
@@ -1553,6 +1602,15 @@ function pasteHandler(parent) {
                 parent.enablePaste = false;
                 parent.notify(hidePaste, {});
                 removeBlur(parent);
+                var result = {
+                    files: null,
+                    error: {
+                        code: '402',
+                        message: getLocaleText(parent, 'Same-Folder-Error'),
+                        fileExists: null
+                    }
+                };
+                createDialog(parent, 'Error', result);
             }
         }
     }
@@ -1735,6 +1793,11 @@ function readDropPath(parent) {
     else {
         if (parent.navigationpaneModule) {
             var node = select('[data-uid="' + pathId + '"]', parent.navigationpaneModule.treeObj.element);
+            if (!node) {
+                var liElement = document.querySelector('[data-id = "' + getValue('id', parent.dropData) + '"]');
+                pathId = liElement.getAttribute("data-uid");
+                node = select('[data-uid="' + pathId + '"]', parent.navigationpaneModule.treeObj.element);
+            }
             updatePath(node, parent.dropData, parent);
         }
         read(parent, dropPath, parent.dropPath);
@@ -2561,6 +2624,8 @@ function readSuccess(parent, result, event) {
             parent.notify(selectionChanged, {});
         }
         onFailure(parent, result, 'read');
+        parent.setProperties({ path: parent.oldPath }, true);
+        parent.pathNames.pop();
     }
     if (parent.isDragDrop && parent.isDropEnd) {
         if (parent.droppedObjects.length !== 0) {
@@ -3514,11 +3579,18 @@ function getOptions(parent, text, e, details, replaceItems) {
             ];
             break;
         case 'MultipleFileDetails':
+            var index_1;
             options.dialogName = 'File Details';
-            strArr = details.name.split(',').map(function (val) {
-                var index = val.indexOf('.') + 1;
-                return (index === 0) ? 'Folder' : val.substr(index).replace(' ', '');
+            strArr = parent.itemData.map(function (val) {
+                index_1 = val.name.indexOf('.') + 1;
+                return (index_1 === 0 && (!val.isFile)) ? 'Folder' : ((index_1 !== 0) ? val.name.substr(index_1).replace(' ', '') : 'undetermined');
             });
+            if (strArr[0] == undefined) {
+                strArr = details.name.split(',').map(function (val) {
+                    index_1 = val.indexOf('.') + 1;
+                    return (index_1 === 0) ? 'Folder' : val.substr(index_1).replace(' ', '');
+                });
+            }
             fileType$$1 = strArr.every(function (val, i, arr) { return val === arr[0]; }) ?
                 ((strArr[0] === 'Folder') ? 'Folder' : strArr[0].toLocaleUpperCase() + ' Type') : 'Multiple Types';
             location = details.location;
@@ -3729,7 +3801,7 @@ function onSubmitValidate(parent, ele) {
     onValidate(parent, ele);
     var len = ele.value.length - 1;
     if (ele.value !== '' && ((ele.value.lastIndexOf('.') === len) || (ele.value.lastIndexOf(' ') === len)) &&
-        (parent.showFileExtension || (parent.currentItemText.lastIndexOf('.') === -1))) {
+        (parent.showFileExtension || (ele.value.lastIndexOf('.') === -1 || ele.value.substring(ele.value.indexOf('.') + 1).length === 0))) {
         addInvalid(parent, ele);
     }
 }
@@ -3914,9 +3986,9 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
             altEnter: 'alt+enter',
             esc: 'escape',
             del: 'delete',
-            ctrlX: 'ctrl+x',
-            ctrlC: 'ctrl+c',
-            ctrlV: 'ctrl+v',
+            ctrlX: this.parent.isMac ? 'cmd+x' : 'ctrl+x',
+            ctrlC: this.parent.isMac ? 'cmd+c' : 'ctrl+c',
+            ctrlV: this.parent.isMac ? 'cmd+v' : 'ctrl+v',
             f2: 'f2',
             shiftdel: 'shift+delete',
             back: 'backspace',
@@ -3953,7 +4025,10 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
             };
             this.items = [];
             this.items = this.renderList(args);
-            this.items = getSortedData(this.parent, this.items);
+            this.items = this.allItems = getSortedData(this.parent, this.items);
+            // if (this.parent.virtualizationSettings.enable) {
+            //     this.items = this.allItems.slice(0, this.parent.virtualizationSettings.largeIconsViewItemsCount);
+            // }
             // eslint-disable-next-line
             this.listElements = ListBase.createListFromJson(createElement, this.items, this.listObj);
             this.itemList = Array.prototype.slice.call(selectAll('.' + LIST_ITEM, this.listElements));
@@ -3995,6 +4070,10 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
             this.getItemCount();
             this.addEventListener();
             this.wireEvents();
+            // if (this.parent.virtualizationSettings.enable && this.allItems.length > 0) {
+            //     this.parent.virtualizationModule.setUlElementHeight();
+            //     this.parent.virtualizationModule.wireScrollEvent(false);
+            // }
             this.isRendered = true;
             hideSpinner(this.parent.element);
             if (this.parent.selectedItems.length) {
@@ -4697,6 +4776,7 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
                         var val = _this.parent.breadcrumbbarModule.searchObj.element.value;
                         if (val === '' && !_this.parent.isFiltered) {
                             var id = getValue('id', details_1);
+                            _this.parent.oldPath = _this.parent.path;
                             var newPath = _this.parent.path + (isNullOrUndefined(id) ? text : id) + '/';
                             _this.parent.setProperties({ path: newPath }, true);
                             _this.parent.pathNames.push(text);
@@ -5316,7 +5396,7 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
         else {
             for (var i = 0, len = this.items.length; i < len; i++) {
                 var name_2 = getValue('filterPath', this.items[i]) + getValue('name', this.items[i]);
-                if (items.indexOf(name_2) !== -1) {
+                if ((items.indexOf(name_2) !== -1) || (items.indexOf(getValue(filterName, this.items[i])) !== -1)) {
                     indexes.push(i);
                 }
             }
@@ -5793,7 +5873,7 @@ var BreadCrumbBar = /** @__PURE__ @class */ (function () {
         }
     };
     BreadCrumbBar.prototype.onSearchTextChange = function (args) {
-        this.searchObj.element.placeholder = (this.parent.searchSettings.placeholder != null) ? this.parent.searchSettings.placeholder : getLocaleText(this.parent, 'Search') + ' ' + args.cwd.name;
+        this.searchObj.element.placeholder = (this.parent.searchSettings.placeholder != null) ? this.parent.searchSettings.placeholder : getLocaleText(this.parent, 'Search') + ' ' + getLocaleText(this.parent, args.cwd.name.toString());
     };
     return BreadCrumbBar;
 }());
@@ -5907,7 +5987,7 @@ var ContextMenu$2 = /** @__PURE__ @class */ (function () {
                 data = this.parent.detailsviewModule.gridObj.getRowObjectFromUID(uid).data;
                 if (isNullOrUndefined(this.targetElement.getAttribute('aria-selected'))) {
                     /* istanbul ignore next */
-                    this.parent.detailsviewModule.gridObj.selectRows([parseInt(this.targetElement.getAttribute('aria-rowindex'), 10)]);
+                    this.parent.detailsviewModule.gridObj.selectRows([parseInt(this.targetElement.getAttribute('data-rowindex'), 10)]);
                 }
                 selected = true;
                 /* istanbul ignore next */
@@ -6498,7 +6578,7 @@ var defaultLocale = {
     'Server-Error': 'ServerError: Invalid response from'
 };
 
-var __extends$8 = (undefined && undefined.__extends) || (function () {
+var __extends$9 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -6511,7 +6591,7 @@ var __extends$8 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6530,7 +6610,7 @@ var __decorate$8 = (undefined && undefined.__decorate) || function (decorators,
  * ```
  */
 var FileManager = /** @__PURE__ @class */ (function (_super) {
-    __extends$8(FileManager, _super);
+    __extends$9(FileManager, _super);
     function FileManager(options, element) {
         var _this = _super.call(this, options, element) || this;
         // eslint-disable-next-line
@@ -6547,7 +6627,6 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
         _this.uploadItem = [];
         _this.deleteRecords = [];
         _this.isFile = false;
-        _this.sortBy = 'name';
         _this.isCut = false;
         _this.isSearchCut = false;
         _this.isSearchDrag = false;
@@ -6581,6 +6660,8 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
         _this.droppedObjects = [];
         _this.uploadingCount = 0;
         _this.uploadedCount = 0;
+        //Specifies whether the operating system is MAC or not 
+        _this.isMac = false;
         FileManager_1.Inject(BreadCrumbBar, LargeIconsView, ContextMenu$2);
         return _this;
     }
@@ -6676,6 +6757,12 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
                 args: [this]
             });
         }
+        if (this.virtualizationSettings.enable) {
+            modules.push({
+                member: 'virtualization',
+                args: [this]
+            });
+        }
         return modules;
     };
     /**
@@ -6690,6 +6777,7 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
             this.allowMultiSelection ? this.selectedItems : this.selectedItems.slice(this.selectedItems.length - 1);
         this.setProperties({ selectedItems: slItems }, true);
         this.fileView = this.view;
+        this.isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
         this.setRtl(this.enableRtl);
         this.addEventListeners();
         read(this, (this.path !== this.originalPath) ? initialEnd : finalizeEnd, this.path);
@@ -6887,6 +6975,7 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
             enableRtl: this.enableRtl,
             uploading: this.onUploading.bind(this),
             removing: this.onRemoving.bind(this),
+            canceling: this.onCancel.bind(this),
             clearing: this.onClearing.bind(this),
             selected: this.onSelected.bind(this),
             success: this.onUploadSuccess.bind(this),
@@ -6895,6 +6984,7 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
             minFileSize: this.uploadSettings.minFileSize,
             maxFileSize: this.uploadSettings.maxFileSize,
             allowedExtensions: this.uploadSettings.allowedExtensions,
+            directoryUpload: this.uploadSettings.directoryUpload,
             fileListRendering: this.onFileListRender.bind(this)
         });
         this.uploadObj.appendTo('#' + this.element.id + UPLOAD_ID);
@@ -6907,6 +6997,7 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
         this.uploadObj.minFileSize = this.uploadSettings.minFileSize;
         this.uploadObj.maxFileSize = this.uploadSettings.maxFileSize;
         this.uploadObj.allowedExtensions = this.uploadSettings.allowedExtensions;
+        this.uploadObj.directoryUpload = this.uploadSettings.directoryUpload;
         this.uploadObj.dataBind();
     };
     FileManager.prototype.onBeforeOpen = function (args) {
@@ -6956,7 +7047,7 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
             }
         }
         var data = JSON.stringify(getValue(this.pathId[this.pathId.length - 1], this.feParent));
-        args.customFormData = [{ 'path': this.path }, { 'action': action }, { 'data': data }];
+        args.customFormData = [{ 'path': this.path }, { 'action': action }, { 'data': data }, { 'filename': args.fileData.name }];
         var uploadUrl = this.ajaxSettings.uploadUrl ? this.ajaxSettings.uploadUrl : this.ajaxSettings.url;
         // eslint-disable-next-line
         var ajaxSettings = {
@@ -6994,6 +7085,11 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /* istanbul ignore next */
+    FileManager.prototype.onCancel = function (args) {
+        var data = JSON.stringify(getValue(this.pathId[this.pathId.length - 1], this.feParent));
+        args.customFormData = [{ 'path': this.path }, { 'action': 'remove' }, { 'data': data }];
+    };
+    /* istanbul ignore next */
     FileManager.prototype.onClearing = function () {
         if (this.isOpened) {
             this.uploadDialogObj.hide();
@@ -7264,6 +7360,13 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
                     refresh(this);
                     this.notify(sortByChange, {});
                     break;
+                case 'sortBy':
+                    refresh(this);
+                    this.notify(sortByChange, {});
+                    if (this.view === 'Details') {
+                        this.notify(sortColumn, {});
+                    }
+                    break;
                 case 'popupTarget':
                     if (this.uploadDialogObj) {
                         this.uploadDialogObj.target = newProp.popupTarget;
@@ -7587,148 +7690,154 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
         }
     };
     var FileManager_1;
-    __decorate$8([
+    __decorate$9([
         Complex({}, AjaxSettings)
     ], FileManager.prototype, "ajaxSettings", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(false)
     ], FileManager.prototype, "allowDragAndDrop", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(true)
     ], FileManager.prototype, "allowMultiSelection", void 0);
-    __decorate$8([
+    __decorate$9([
         Complex({}, ContextMenuSettings)
     ], FileManager.prototype, "contextMenuSettings", void 0);
-    __decorate$8([
+    __decorate$9([
         Property('')
     ], FileManager.prototype, "cssClass", void 0);
-    __decorate$8([
+    __decorate$9([
         Complex({}, DetailsViewSettings)
     ], FileManager.prototype, "detailsViewSettings", void 0);
-    __decorate$8([
+    __decorate$9([
+        Complex({}, VirtualizationSettings)
+    ], FileManager.prototype, "virtualizationSettings", void 0);
+    __decorate$9([
         Property(true)
     ], FileManager.prototype, "enableHtmlSanitizer", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(false)
     ], FileManager.prototype, "enablePersistence", void 0);
-    __decorate$8([
+    __decorate$9([
         Property('400px')
     ], FileManager.prototype, "height", void 0);
-    __decorate$8([
+    __decorate$9([
         Property('LargeIcons')
     ], FileManager.prototype, "view", void 0);
-    __decorate$8([
+    __decorate$9([
         Complex({}, NavigationPaneSettings)
     ], FileManager.prototype, "navigationPaneSettings", void 0);
-    __decorate$8([
+    __decorate$9([
         Property('/')
     ], FileManager.prototype, "path", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(null)
     ], FileManager.prototype, "popupTarget", void 0);
-    __decorate$8([
+    __decorate$9([
         Complex({}, SearchSettings)
     ], FileManager.prototype, "searchSettings", void 0);
-    __decorate$8([
+    __decorate$9([
         Property()
     ], FileManager.prototype, "selectedItems", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(true)
     ], FileManager.prototype, "showFileExtension", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(null)
     ], FileManager.prototype, "rootAliasName", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(false)
     ], FileManager.prototype, "showHiddenItems", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(true)
     ], FileManager.prototype, "showThumbnail", void 0);
-    __decorate$8([
+    __decorate$9([
         Property('Ascending')
     ], FileManager.prototype, "sortOrder", void 0);
-    __decorate$8([
+    __decorate$9([
+        Property('name')
+    ], FileManager.prototype, "sortBy", void 0);
+    __decorate$9([
         Complex({}, ToolbarSettings)
     ], FileManager.prototype, "toolbarSettings", void 0);
-    __decorate$8([
+    __decorate$9([
         Complex({}, UploadSettings)
     ], FileManager.prototype, "uploadSettings", void 0);
-    __decorate$8([
+    __decorate$9([
         Property('100%')
     ], FileManager.prototype, "width", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "fileLoad", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "fileOpen", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "beforeDownload", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "beforeImageLoad", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "beforePopupClose", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "beforePopupOpen", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "beforeSend", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "created", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "destroyed", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "fileDragStart", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "fileDragging", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "fileDragStop", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "fileDropped", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "fileSelection", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "fileSelect", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "menuClick", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "menuOpen", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "failure", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "popupClose", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "popupOpen", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "success", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "toolbarClick", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "toolbarCreate", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], FileManager.prototype, "uploadListCreate", void 0);
-    FileManager = FileManager_1 = __decorate$8([
+    FileManager = FileManager_1 = __decorate$9([
         NotifyPropertyChanges
     ], FileManager);
     return FileManager;
@@ -7882,9 +7991,12 @@ var Toolbar$1 = /** @__PURE__ @class */ (function () {
     Toolbar$$1.prototype.toolbarCreateHandler = function () {
         if (!isNullOrUndefined(select('#' + this.getId('SortBy'), this.parent.element))) {
             var items = [
-                { id: this.getPupupId('name'), text: getLocaleText(this.parent, 'Name'), iconCss: TB_OPTION_DOT },
-                { id: this.getPupupId('size'), text: getLocaleText(this.parent, 'Size') },
-                { id: this.getPupupId('date'), text: getLocaleText(this.parent, 'DateModified') },
+                { id: this.getPupupId('name'), text: getLocaleText(this.parent, 'Name'),
+                    iconCss: this.parent.sortBy === 'name' ? TB_OPTION_DOT : '' },
+                { id: this.getPupupId('size'), text: getLocaleText(this.parent, 'Size'),
+                    iconCss: this.parent.sortBy === 'size' ? TB_OPTION_DOT : '' },
+                { id: this.getPupupId('date'), text: getLocaleText(this.parent, 'DateModified'),
+                    iconCss: this.parent.sortBy === '_fm_modified' ? TB_OPTION_DOT : '' },
                 { separator: true },
                 { id: this.getPupupId('ascending'), text: getLocaleText(this.parent, 'Ascending'),
                     iconCss: this.parent.sortOrder === 'Ascending' ? TB_OPTION_TICK : '' },
@@ -7920,7 +8032,6 @@ var Toolbar$1 = /** @__PURE__ @class */ (function () {
                 cssClass: getCssClass(this.parent, 'e-caret-hide ' + ROOT_POPUP),
                 items: layoutItems, select: this.layoutChange.bind(this),
                 enableRtl: this.parent.enableRtl,
-                enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                 content: '<span class="e-tbar-btn-text">' + getLocaleText(this.parent, 'View') + '</span>'
             });
             this.layoutBtnObj.isStringTemplate = true;
@@ -8226,6 +8337,181 @@ var Toolbar$1 = /** @__PURE__ @class */ (function () {
     return Toolbar$$1;
 }());
 
+var Virtualization = /** @__PURE__ @class */ (function () {
+    function Virtualization(instance) {
+        this.largeIconsViewItemsCount = 40;
+        this.filemanagerInstance = instance;
+        this.largeIconInstance = instance.largeiconsviewModule;
+    }
+    // Update the scroller height based on the items count.
+    Virtualization.prototype.setUlElementHeight = function () {
+        this.rowItemCount = this.ValidateItemCount(Object.keys(this.largeIconInstance.allItems).length);
+        this.lastRowCount = (this.largeIconInstance.allItems.length - this.largeIconsViewItemsCount) % this.rowItemCount ?
+            (this.largeIconInstance.allItems.length - this.largeIconsViewItemsCount) % this.rowItemCount : this.rowItemCount;
+        this.topElement = this.filemanagerInstance.createElement('div');
+        this.largeIconInstance.element.firstElementChild.insertBefore(this.topElement, this.largeIconInstance.element.firstElementChild.firstChild);
+        this.bottomElement = this.filemanagerInstance.createElement('div');
+        this.largeIconInstance.element.firstElementChild.insertBefore(this.bottomElement, null);
+        var marginValue = parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-top')) +
+            parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-bottom'));
+        this.listItemHeight = this.largeIconInstance.itemList[0].getBoundingClientRect().height + marginValue;
+        this.totalHeight = (Object.keys(this.largeIconInstance.allItems).length / this.rowItemCount) * this.listItemHeight;
+        this.topElement.style.height = 0 + 'px';
+        this.bottomElement.style.height = this.totalHeight + 'px';
+        this.topElementHeight = 0;
+        this.bottomElementHeight = this.totalHeight;
+        this.listDiff = 0;
+        this.renderedCount = this.largeIconsViewItemsCount;
+    };
+    // Calculated the maximum number of items can be rendered in each row.
+    Virtualization.prototype.ValidateItemCount = function (dataSourceLength) {
+        var width = parseFloat(formatUnit(this.largeIconInstance.element.firstElementChild.clientWidth));
+        var marginValue = parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-right')) +
+            parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-left'));
+        var itemCount = Math.floor(width / (this.largeIconInstance.itemList[0].offsetWidth + marginValue));
+        if (itemCount > dataSourceLength) {
+            itemCount = dataSourceLength;
+        }
+        return itemCount;
+    };
+    // Bind the scroll event for large icons view ul element.
+    Virtualization.prototype.wireScrollEvent = function (destroy) {
+        if (!destroy) {
+            EventHandler.add(this.largeIconInstance.element.firstElementChild, 'scroll', this.onVirtualUiScroll, this);
+        }
+        else {
+            EventHandler.remove(this.largeIconInstance.element.firstElementChild, 'scroll', this.onVirtualUiScroll);
+        }
+    };
+    // Update the top and bottom element height and update the scroll position.
+    Virtualization.prototype.onVirtualUiScroll = function (e) {
+        var _a;
+        var startingHeight = 0;
+        this.scrollPosition = isNullOrUndefined(this.scrollPosition) ? 0 : this.scrollPosition;
+        var scroll = this.getscrollerHeight(startingHeight);
+        this.topElementHeight = this.listItemHeight * Math.floor(scroll / this.listItemHeight);
+        this.bottomElementHeight = this.totalHeight - this.topElementHeight;
+        _a = scroll <= this.totalHeight ?
+            [this.topElementHeight, this.bottomElementHeight] : [this.totalHeight, 0], this.topElementHeight = _a[0], this.bottomElementHeight = _a[1];
+        if (this.topElementHeight !== parseFloat(this.topElement.style.height)) {
+            this.topElement.style.height = this.topElementHeight + 'px';
+            this.bottomElement.style.height = this.bottomElementHeight + 'px';
+            // checked whether the scrolling is upward/downward
+            if (scroll > this.scrollPosition) {
+                var listDiff = Math.round(((this.topElementHeight / this.listItemHeight) - this.listDiff));
+                this.onNormalScroll(listDiff, true);
+            }
+            else {
+                var listDiff = Math.round((this.listDiff - (this.topElementHeight / this.listItemHeight)));
+                this.onNormalScroll(listDiff, false);
+            }
+        }
+        this.listDiff = Math.round(this.topElementHeight / this.listItemHeight);
+        this.scrollPosition = scroll;
+        this.largeIconInstance.itemList = Array.prototype.slice.call(selectAll('.' + LIST_ITEM, this.largeIconInstance.element));
+        this.largeIconInstance.items = this.largeIconInstance.allItems.slice(this.renderedCount -
+            this.largeIconsViewItemsCount, this.renderedCount);
+    };
+    // Calculated the scroller height.
+    Virtualization.prototype.getscrollerHeight = function (startingHeight) {
+        return ((this.largeIconInstance.element.firstElementChild.scrollTop - startingHeight) <= 0) ? 0 :
+            (this.largeIconInstance.element.firstElementChild.scrollTop - startingHeight);
+    };
+    // Update the UI based on the scrolled position.
+    Virtualization.prototype.onNormalScroll = function (listDiff, isScrollingDown) {
+        for (var i = 0; i < listDiff; i++) {
+            this.updateUI(isScrollingDown);
+        }
+        this.updateSelection();
+    };
+    // Updating the items in large icons view dynamically.
+    Virtualization.prototype.updateUI = function (isScrollingDown) {
+        var _this = this;
+        if (isScrollingDown) {
+            this.items = this.largeIconInstance.allItems.slice(this.renderedCount, this.renderedCount + this.rowItemCount);
+            if (this.items.length > 0) {
+                this.listElements = ListBase.createListFromJson(createElement, this.items, this.largeIconInstance.listObj);
+                this.itemList = Array.prototype.slice.call(selectAll('.' + LIST_ITEM, this.listElements));
+                this.itemList.forEach(function (liEle) {
+                    _this.largeIconInstance.element.firstElementChild.insertBefore(liEle, _this.bottomElement);
+                });
+                this.renderedCount = (this.largeIconInstance.allItems.length >= this.renderedCount + this.rowItemCount) ?
+                    this.renderedCount + this.rowItemCount : this.renderedCount + this.lastRowCount;
+                for (var i_1 = 0; i_1 < this.rowItemCount; i_1++) {
+                    detach(this.topElement.nextElementSibling);
+                }
+            }
+        }
+        else {
+            var lastItemIndex = void 0;
+            var isAllRendered = void 0;
+            if (this.renderedCount == this.largeIconInstance.allItems.length) {
+                lastItemIndex = this.renderedCount - (this.largeIconsViewItemsCount - this.rowItemCount + this.lastRowCount);
+                this.renderedCount = ((this.renderedCount - this.lastRowCount) < this.largeIconsViewItemsCount) ?
+                    this.largeIconsViewItemsCount : (this.renderedCount - this.lastRowCount);
+                isAllRendered = true;
+            }
+            else {
+                lastItemIndex = this.renderedCount - this.largeIconsViewItemsCount;
+                this.renderedCount = ((this.renderedCount - this.rowItemCount) < this.largeIconsViewItemsCount) ?
+                    this.largeIconsViewItemsCount : (this.renderedCount - this.rowItemCount);
+            }
+            var startItemIndex = (lastItemIndex - this.rowItemCount > 0) ? lastItemIndex - this.rowItemCount : 0;
+            this.items = this.largeIconInstance.allItems.slice(startItemIndex, lastItemIndex);
+            if (this.items.length > 0) {
+                this.listElements = ListBase.createListFromJson(createElement, this.items, this.largeIconInstance.listObj);
+                this.itemList = Array.prototype.slice.call(selectAll('.' + LIST_ITEM, this.listElements));
+                for (var len = this.itemList.length; len > 0; len--) {
+                    this.largeIconInstance.element.firstElementChild.insertBefore(this.itemList[len - 1], this.topElement.nextElementSibling);
+                }
+                for (var i = 0; i < ((isAllRendered) ? this.lastRowCount : this.rowItemCount); i++) {
+                    detach(this.bottomElement.previousElementSibling);
+                }
+            }
+        }
+    };
+    // Update the selected item state.
+    Virtualization.prototype.updateSelection = function () {
+        for (var i = 0; i < this.filemanagerInstance.selectedItems.length; i++) {
+            for (var j = 0; j < this.items.length; j++) {
+                if (this.filemanagerInstance.selectedItems[i] == getValue('name', this.items[j])) {
+                    this.updateCheckState(this.itemList[j]);
+                }
+            }
+        }
+    };
+    // Update the check state for items.
+    Virtualization.prototype.updateCheckState = function (liItem) {
+        if (this.filemanagerInstance.allowMultiSelection) {
+            addClass([liItem], [ACTIVE]);
+            liItem.setAttribute('aria-selected', 'true');
+            var checkEle = select('.' + FRAME, liItem);
+            if (!checkEle.classList.contains(CHECK)) {
+                addClass([checkEle], CHECK);
+                closest(checkEle, '.' + CB_WRAP).setAttribute('aria-checked', 'true');
+            }
+        }
+    };
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns the module name.
+     * @private
+     */
+    Virtualization.prototype.getModuleName = function () {
+        return 'virtualization';
+    };
+    Virtualization.prototype.destroy = function () {
+        if (this.filemanagerInstance.isDestroyed) {
+            return;
+        }
+        if (!isNullOrUndefined(this.largeIconInstance.element.firstElementChild)) {
+            this.wireScrollEvent(true);
+        }
+    };
+    return Virtualization;
+}());
+
 /**
  * File Manager actions modules
  */
@@ -8240,6 +8526,7 @@ var NavigationPane = /** @__PURE__ @class */ (function () {
      * @param {IFileManager} parent - specifies the parent element.
      * @hidden
      */
+    /* istanbul ignore next */
     function NavigationPane(parent) {
         this.removeNodes = [];
         this.moveNames = [];
@@ -8261,9 +8548,9 @@ var NavigationPane = /** @__PURE__ @class */ (function () {
             altEnter: 'alt+enter',
             esc: 'escape',
             del: 'delete',
-            ctrlX: 'ctrl+x',
-            ctrlC: 'ctrl+c',
-            ctrlV: 'ctrl+v',
+            ctrlX: this.parent.isMac ? 'cmd+x' : 'ctrl+x',
+            ctrlC: this.parent.isMac ? 'cmd+c' : 'ctrl+c',
+            ctrlV: this.parent.isMac ? 'cmd+v' : 'ctrl+v',
             ctrlShiftN: 'ctrl+shift+n',
             shiftF10: 'shift+F10',
             f2: 'f2'
@@ -8294,6 +8581,7 @@ var NavigationPane = /** @__PURE__ @class */ (function () {
                 hasChildren: 'hasChild', iconCss: '_fm_icon', htmlAttributes: '_fm_htmlAttr', tooltip: 'name'
             },
             enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
+            sortOrder: this.parent.navigationPaneSettings.sortOrder,
             nodeSelecting: this.onNodeSelecting.bind(this),
             nodeSelected: this.onNodeSelected.bind(this),
             nodeExpanding: this.onNodeExpand.bind(this),
@@ -8415,7 +8703,7 @@ var NavigationPane = /** @__PURE__ @class */ (function () {
             this.parent.trigger('fileOpen', eventArgs);
             args.cancel = eventArgs.cancel;
             if (args.cancel) {
-                this.restrictSelecting = this.isNodeClickCalled ? this.previousSelected[0] != args.node.getAttribute('data-uid') : false;
+                this.restrictSelecting = this.isNodeClickCalled ? this.previousSelected[0] !== args.node.getAttribute('data-uid') : false;
                 this.treeObj.selectedNodes = this.isNodeClickCalled ? this.previousSelected : this.treeObj.selectedNodes;
                 this.previousSelected = this.treeObj.selectedNodes;
                 if (!isNullOrUndefined(this.parent) && !isNullOrUndefined(this.parent.contextmenuModule)) {
@@ -8453,13 +8741,16 @@ var NavigationPane = /** @__PURE__ @class */ (function () {
         var nodeData = this.getTreeData(getValue('id', args.nodeData));
         this.parent.selectedItems = [];
         this.parent.itemData = nodeData;
+        var previousPath = this.parent.path;
         updatePath(args.node, this.parent.itemData[0], this.parent);
-        this.expandNodeTarget = null;
-        if (args.node.querySelector('.' + ICONS) && args.node.querySelector('.' + LIST_ITEM) === null) {
-            this.expandNodeTarget = 'add';
+        if (previousPath !== this.parent.path) {
+            this.expandNodeTarget = null;
+            if (args.node.querySelector('.' + ICONS) && args.node.querySelector('.' + LIST_ITEM) === null) {
+                this.expandNodeTarget = 'add';
+            }
+            read(this.parent, this.isPathDragged ? pasteEnd : pathChanged, this.parent.path);
+            this.parent.visitedItem = args.node;
         }
-        read(this.parent, this.isPathDragged ? pasteEnd : pathChanged, this.parent.path);
-        this.parent.visitedItem = args.node;
         this.isPathDragged = this.isRenameParent = this.isRightClick = false;
     };
     /* istanbul ignore next */
@@ -8517,7 +8808,7 @@ var NavigationPane = /** @__PURE__ @class */ (function () {
         var currFiles = getValue(this.parent.pathId[this.parent.pathId.length - 1], this.parent.feFiles);
         if (this.expandNodeTarget === 'add') {
             var sNode = select('[data-uid="' + this.treeObj.selectedNodes[0] + '"]', this.treeObj.element);
-            var ul = select('.' + LIST_PARENT, sNode);
+            var ul = (!isNullOrUndefined(sNode)) ? select('.' + LIST_PARENT, sNode) : null;
             if (isNullOrUndefined(ul)) {
                 this.addChild(args.files, this.treeObj.selectedNodes[0], !this.expandTree);
             }
@@ -8527,6 +8818,8 @@ var NavigationPane = /** @__PURE__ @class */ (function () {
         if (isNullOrUndefined(currFiles)) {
             setValue(this.parent.pathId[this.parent.pathId.length - 1], args.files, this.parent.feFiles);
         }
+        if (this.parent.uploadObj.directoryUpload)
+            this.updateTree(args);
     };
     NavigationPane.prototype.updateTree = function (args) {
         if (this.treeObj) {
@@ -8683,6 +8976,9 @@ var NavigationPane = /** @__PURE__ @class */ (function () {
                     break;
                 case 'navigationPaneSettings':
                     read(this.parent, finalizeEnd, '/');
+                    if (e.oldProp.navigationPaneSettings.sortOrder !== e.newProp.navigationPaneSettings.sortOrder) {
+                        this.treeObj.sortOrder = e.newProp.navigationPaneSettings.sortOrder;
+                    }
                     break;
             }
         }
@@ -8975,13 +9271,15 @@ var NavigationPane = /** @__PURE__ @class */ (function () {
                 removeActive(this.parent);
                 break;
             case 'del':
-                this.updateItemData();
-                if (!hasEditAccess(this.parent.itemData[0])) {
-                    createDeniedDialog(this.parent, this.parent.itemData[0], permissionEdit);
-                }
-                else {
-                    this.removeNodes = [];
-                    createDialog(this.parent, 'Delete');
+                if (this.parent.pathId[0] !== this.activeNode.getAttribute('data-uid')) {
+                    this.updateItemData();
+                    if (!hasEditAccess(this.parent.itemData[0])) {
+                        createDeniedDialog(this.parent, this.parent.itemData[0], permissionEdit);
+                    }
+                    else {
+                        this.removeNodes = [];
+                        createDialog(this.parent, 'Delete');
+                    }
                 }
                 break;
             case 'ctrlC':
@@ -9083,6 +9381,9 @@ var DetailsView = /** @__PURE__ @class */ (function () {
         this.isNameWidth = false;
         this.pasteOperation = false;
         this.uploadOperation = false;
+        /* istanbul ignore next */
+        // eslint:disable-next-line
+        this.actionDivert = false;
         Grid.Inject(Resize, ContextMenu$1, Sort, VirtualScroll);
         this.parent = parent;
         this.element = select('#' + this.parent.element.id + GRID_ID, this.parent.element);
@@ -9114,9 +9415,9 @@ var DetailsView = /** @__PURE__ @class */ (function () {
             home: 'home',
             moveUp: 'uparrow',
             del: 'delete',
-            ctrlX: 'ctrl+x',
-            ctrlC: 'ctrl+c',
-            ctrlV: 'ctrl+v',
+            ctrlX: this.parent.isMac ? 'cmd+x' : 'ctrl+x',
+            ctrlC: this.parent.isMac ? 'cmd+c' : 'ctrl+c',
+            ctrlV: this.parent.isMac ? 'cmd+v' : 'ctrl+v',
             ctrlShiftN: 'ctrl+shift+n',
             shiftdel: 'shift+delete',
             ctrlD: 'ctrl+d',
@@ -9157,6 +9458,10 @@ var DetailsView = /** @__PURE__ @class */ (function () {
                 },
                 enableRtl: this.parent.enableRtl,
                 pageSettings: { pageSize: 20 },
+                // enableVirtualization: this.parent.virtualizationSettings.enable,
+                enablePersistence: this.parent.enablePersistence,
+                // enableVirtualMaskRow: true,
+                // pageSettings: { pageSize: this.parent.virtualizationSettings.detailsViewItemsCount },
                 sortSettings: { allowUnsort: false, columns: sortSettings },
                 columns: columns,
                 recordDoubleClick: this.DblClickEvents.bind(this),
@@ -9365,14 +9670,19 @@ var DetailsView = /** @__PURE__ @class */ (function () {
         }
     };
     DetailsView.prototype.onBeforeDataBound = function (args) {
+        // if (!this.parent.virtualizationSettings.enable) {
         showSpinner(this.parent.element);
         // eslint-disable-next-line
         var items = getSortedData(this.parent, this.gridObj.dataSource);
         args.result = items;
+        // }
     };
     /* istanbul ignore next */
     DetailsView.prototype.onDataBound = function () {
         this.createDragObj();
+        // if ((this.parent.selectedItems.length !== 0 && !this.parent.virtualizationSettings.enable) || 
+        //         ((this.parent.selectedItems.length !== 0 && this.parent.virtualizationSettings.enable && 
+        //         this.element.querySelector('.e-content').scrollTop == 0))) {
         if (this.parent.selectedItems.length !== 0) {
             this.selectRecords(this.parent.selectedItems);
         }
@@ -9642,6 +9952,7 @@ var DetailsView = /** @__PURE__ @class */ (function () {
                     var val = _this.parent.breadcrumbbarModule.searchObj.element.value;
                     if (val === '' && !_this.parent.isFiltered) {
                         var id = getValue('id', data);
+                        _this.parent.oldPath = _this.parent.path;
                         var newPath = _this.parent.path + (isNullOrUndefined(id) ? name_2 : id) + '/';
                         _this.parent.setProperties({ path: newPath }, true);
                         _this.parent.pathNames.push(name_2);
@@ -9927,7 +10238,13 @@ var DetailsView = /** @__PURE__ @class */ (function () {
         if (!dragLi) {
             return null;
         }
-        var name = dragLi.getElementsByClassName('e-fe-text')[0].innerText;
+        var name;
+        if (dragLi.getElementsByClassName('e-fe-text')[0]) {
+            name = dragLi.getElementsByClassName('e-fe-text')[0].innerText;
+        }
+        else if (dragLi.getElementsByClassName("e-rowcell e-templatecell")[0].nextElementSibling) {
+            name = dragLi.getElementsByClassName("e-rowcell e-templatecell")[0].nextElementSibling.innerText;
+        }
         if (dragLi && !dragLi.querySelector('.e-active')) {
             this.selectRecords([name]);
         }
@@ -10128,6 +10445,10 @@ var DetailsView = /** @__PURE__ @class */ (function () {
         }
         var len = rows.length;
         if (len > 0) {
+            // if (this.parent.virtualizationSettings.enable) {
+            //     this.parent.currentItemText = getValue('name', args.data);
+            // }
+            // else if (len > 0) {
             // eslint-disable-next-line
             var data = this.gridObj.getRowsObject()[rows[len - 1]].data;
             this.parent.currentItemText = getValue('name', data);
@@ -10271,7 +10592,7 @@ var DetailsView = /** @__PURE__ @class */ (function () {
     };
     DetailsView.prototype.getFocusedItemIndex = function () {
         return (!isNullOrUndefined(this.getFocusedItem())) ?
-            parseInt(this.getFocusedItem().getAttribute('aria-rowindex'), 10) : null;
+            parseInt(this.getFocusedItem().getAttribute('data-rowindex'), 10) : null;
     };
     /* istanbul ignore next */
     // eslint:disable-next-line
@@ -10310,14 +10631,13 @@ var DetailsView = /** @__PURE__ @class */ (function () {
             case 'f2':
             case 'moveDown':
             case 'moveUp':
+            case 'ctrlD':
                 e.preventDefault();
                 break;
             default:
                 break;
         }
     };
-    /* istanbul ignore next */
-    // eslint:disable-next-line
     DetailsView.prototype.keyupHandler = function (e) {
         if (!this.isRendered) {
             return;
@@ -10394,8 +10714,13 @@ var DetailsView = /** @__PURE__ @class */ (function () {
                     else if (this.gridObj.selectedRowIndex !== -1 && e.action === 'tab') {
                         return;
                     }
+                    else if (!this.actionDivert) {
+                        this.addHeaderFocus();
+                        this.actionDivert = true;
+                    }
                     else {
                         this.addFocus(0);
+                        this.actionDivert = false;
                     }
                 }
                 break;
@@ -10682,6 +11007,18 @@ var DetailsView = /** @__PURE__ @class */ (function () {
             addClass([itemElement], [FOCUS, FOCUSED]);
         }
     };
+    DetailsView.prototype.addHeaderFocus = function () {
+        var treeFocus = select('.e-row', this.element);
+        this.gridObj.element.setAttribute('tabindex', '-1');
+        var nameFocus = select('th.e-fe-grid-name', this.element);
+        nameFocus.setAttribute('tabindex', '0');
+        nameFocus.focus();
+        addClass([nameFocus], [FOCUS, FOCUSED]);
+        treeFocus.setAttribute('tabindex', '0');
+        if (treeFocus.tabIndex === 0 && nameFocus.tabIndex === 0) {
+            removeClass([treeFocus], [FOCUS, FOCUSED]);
+        }
+    };
     DetailsView.prototype.getFocusedItem = function () {
         return select('.' + FOCUSED, this.element);
     };
@@ -10893,5 +11230,5 @@ var DetailsView = /** @__PURE__ @class */ (function () {
  * File Manager all modules
  */
 
-export { AjaxSettings, toolbarItems, ToolbarSettings, SearchSettings, columnArray, DetailsViewSettings, fileItems, folderItems, layoutItems, ContextMenuSettings, NavigationPaneSettings, UploadSettings, Column, TOOLBAR_ID, LAYOUT_ID, NAVIGATION_ID, TREE_ID, GRID_ID, LARGEICON_ID, DIALOG_ID, ALT_DIALOG_ID, IMG_DIALOG_ID, EXTN_DIALOG_ID, UPLOAD_DIALOG_ID, RETRY_DIALOG_ID, CONTEXT_MENU_ID, SORTBY_ID, VIEW_ID, SPLITTER_ID, CONTENT_ID, BREADCRUMBBAR_ID, UPLOAD_ID, RETRY_ID, SEARCH_ID, ROOT, CONTROL, CHECK_SELECT, ROOT_POPUP, MOBILE, MOB_POPUP, MULTI_SELECT, FILTER, LAYOUT, NAVIGATION, LAYOUT_CONTENT, LARGE_ICONS, TB_ITEM, LIST_ITEM, LIST_TEXT, LIST_PARENT, TB_OPTION_TICK, TB_OPTION_DOT, BLUR, ACTIVE, HOVER, FOCUS, FOCUSED, CHECK, FRAME, CB_WRAP, ROW, ROWCELL, EMPTY, EMPTY_CONTENT, EMPTY_INNER_CONTENT, CLONE, DROP_FOLDER, DROP_FILE, FOLDER, ICON_IMAGE, ICON_MUSIC, ICON_VIDEO, LARGE_ICON, LARGE_EMPTY_FOLDER, LARGE_EMPTY_FOLDER_TWO, LARGE_ICON_FOLDER, SELECTED_ITEMS, TEXT_CONTENT, GRID_HEADER, TEMPLATE_CELL, TREE_VIEW, MENU_ITEM, MENU_ICON, SUBMENU_ICON, GRID_VIEW, ICON_VIEW, ICON_OPEN, ICON_UPLOAD, ICON_CUT, ICON_COPY, ICON_PASTE, ICON_DELETE, ICON_RENAME, ICON_NEWFOLDER, ICON_DETAILS, ICON_SHORTBY, ICON_REFRESH, ICON_SELECTALL, ICON_DOWNLOAD, ICON_OPTIONS, ICON_GRID, ICON_LARGE, ICON_BREADCRUMB, ICON_CLEAR, ICON_DROP_IN, ICON_DROP_OUT, ICON_NO_DROP, ICONS, DETAILS_LABEL, ERROR_CONTENT, STATUS, BREADCRUMBS, RTL, DISPLAY_NONE, COLLAPSED, FULLROW, ICON_COLLAPSIBLE, SPLIT_BAR, HEADER_CHECK, OVERLAY, VALUE, isFile, modelChanged, initialEnd, finalizeEnd, createEnd, filterEnd, beforeDelete, pathDrag, deleteInit, deleteEnd, refreshEnd, resizeEnd, splitterResize, pathChanged, destroy, beforeRequest, upload, skipUpload, afterRequest, download, layoutRefresh, actionFailure, search, openInit, openEnd, selectionChanged, selectAllInit, clearAllInit, clearPathInit, layoutChange, sortByChange, nodeExpand, detailsInit, menuItemData, renameInit, renameEndParent, renameEnd, showPaste, hidePaste, selectedData, cutCopyInit, pasteInit, pasteEnd, cutEnd, hideLayout, updateTreeSelection, treeSelect, sortColumn, pathColumn, searchTextChange, beforeDownload, downloadInit, dropInit, dragEnd, dropPath, dragHelper, dragging, updateSelectionData, methodCall, permissionRead, permissionEdit, permissionEditContents, permissionCopy, permissionUpload, permissionDownload, FileManager, Toolbar$1 as Toolbar, BreadCrumbBar, NavigationPane, DetailsView, LargeIconsView, createDialog, createExtDialog, createImageDialog, ContextMenu$2 as ContextMenu };
+export { AjaxSettings, toolbarItems, ToolbarSettings, SearchSettings, columnArray, DetailsViewSettings, VirtualizationSettings, fileItems, folderItems, layoutItems, ContextMenuSettings, NavigationPaneSettings, UploadSettings, Column, TOOLBAR_ID, LAYOUT_ID, NAVIGATION_ID, TREE_ID, GRID_ID, LARGEICON_ID, DIALOG_ID, ALT_DIALOG_ID, IMG_DIALOG_ID, EXTN_DIALOG_ID, UPLOAD_DIALOG_ID, RETRY_DIALOG_ID, CONTEXT_MENU_ID, SORTBY_ID, VIEW_ID, SPLITTER_ID, CONTENT_ID, BREADCRUMBBAR_ID, UPLOAD_ID, RETRY_ID, SEARCH_ID, ROOT, CONTROL, CHECK_SELECT, ROOT_POPUP, MOBILE, MOB_POPUP, MULTI_SELECT, FILTER, LAYOUT, NAVIGATION, LAYOUT_CONTENT, LARGE_ICONS, TB_ITEM, LIST_ITEM, LIST_TEXT, LIST_PARENT, TB_OPTION_TICK, TB_OPTION_DOT, BLUR, ACTIVE, HOVER, FOCUS, FOCUSED, CHECK, FRAME, CB_WRAP, ROW, ROWCELL, EMPTY, EMPTY_CONTENT, EMPTY_INNER_CONTENT, CLONE, DROP_FOLDER, DROP_FILE, FOLDER, ICON_IMAGE, ICON_MUSIC, ICON_VIDEO, LARGE_ICON, LARGE_EMPTY_FOLDER, LARGE_EMPTY_FOLDER_TWO, LARGE_ICON_FOLDER, SELECTED_ITEMS, TEXT_CONTENT, GRID_HEADER, TEMPLATE_CELL, TREE_VIEW, MENU_ITEM, MENU_ICON, SUBMENU_ICON, GRID_VIEW, GRID_CONTENT, ICON_VIEW, ICON_OPEN, ICON_UPLOAD, ICON_CUT, ICON_COPY, ICON_PASTE, ICON_DELETE, ICON_RENAME, ICON_NEWFOLDER, ICON_DETAILS, ICON_SHORTBY, ICON_REFRESH, ICON_SELECTALL, ICON_DOWNLOAD, ICON_OPTIONS, ICON_GRID, ICON_LARGE, ICON_BREADCRUMB, ICON_CLEAR, ICON_DROP_IN, ICON_DROP_OUT, ICON_NO_DROP, ICONS, DETAILS_LABEL, ERROR_CONTENT, STATUS, BREADCRUMBS, RTL, DISPLAY_NONE, COLLAPSED, FULLROW, ICON_COLLAPSIBLE, SPLIT_BAR, HEADER_CHECK, OVERLAY, VALUE, isFile, modelChanged, initialEnd, finalizeEnd, createEnd, filterEnd, beforeDelete, pathDrag, deleteInit, deleteEnd, refreshEnd, resizeEnd, splitterResize, pathChanged, destroy, beforeRequest, upload, skipUpload, afterRequest, download, layoutRefresh, actionFailure, search, openInit, openEnd, selectionChanged, selectAllInit, clearAllInit, clearPathInit, layoutChange, sortByChange, nodeExpand, detailsInit, menuItemData, renameInit, renameEndParent, renameEnd, showPaste, hidePaste, selectedData, cutCopyInit, pasteInit, pasteEnd, cutEnd, hideLayout, updateTreeSelection, treeSelect, sortColumn, pathColumn, searchTextChange, beforeDownload, downloadInit, dropInit, dragEnd, dropPath, dragHelper, dragging, updateSelectionData, methodCall, permissionRead, permissionEdit, permissionEditContents, permissionCopy, permissionUpload, permissionDownload, FileManager, Toolbar$1 as Toolbar, BreadCrumbBar, Virtualization, NavigationPane, DetailsView, LargeIconsView, createDialog, createExtDialog, createImageDialog, ContextMenu$2 as ContextMenu };
 //# sourceMappingURL=ej2-filemanager.es5.js.map