@syncfusion/ej2-filemanager 26.2.10 → 27.1.48

package/dist/global/index.d.ts

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-filemanager@*",
-  "_id": "@syncfusion/ej2-filemanager@26.2.7",
+  "_id": "@syncfusion/ej2-filemanager@18.28.1",
   "_inBundle": false,
-  "_integrity": "sha512-WBLVyIiVrlyLJO0YbLcMYkHc+eJvQSwHeUsr5JWhapUTSo3L0u5Z6Mb0K3BV5q7X6VesEExXXqYXH+OKL4FUaw==",
+  "_integrity": "sha512-opby/2n/6yJA4+14V/syjuS4wTJVti6Up4krWzctYlPcbQk7GuKiJuQlveSIbLKjk4I6ERRfHBAxnZiNKdkqZQ==",
   "_location": "/@syncfusion/ej2-filemanager",
   "_phantomChildren": {},
   "_requested": {
@@ -24,10 +24,10 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-filemanager"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-26.2.7.tgz",
-  "_shasum": "823145120e2b236a4907d250a101ac8e1da431f6",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-filemanager/-/ej2-filemanager-18.28.1.tgz",
+  "_shasum": "0fb6ec0705a6e57f523e448c4e28626ae7d3d8b7",
   "_spec": "@syncfusion/ej2-filemanager@*",
-  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -36,16 +36,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.2.10",
-    "@syncfusion/ej2-buttons": "~26.2.10",
-    "@syncfusion/ej2-data": "~26.2.10",
-    "@syncfusion/ej2-grids": "~26.2.10",
-    "@syncfusion/ej2-inputs": "~26.2.10",
-    "@syncfusion/ej2-layouts": "~26.2.10",
-    "@syncfusion/ej2-lists": "~26.2.10",
-    "@syncfusion/ej2-navigations": "~26.2.10",
-    "@syncfusion/ej2-popups": "~26.2.10",
-    "@syncfusion/ej2-splitbuttons": "~26.2.10"
+    "@syncfusion/ej2-base": "~27.1.48",
+    "@syncfusion/ej2-buttons": "~27.1.48",
+    "@syncfusion/ej2-data": "~27.1.48",
+    "@syncfusion/ej2-grids": "~27.1.48",
+    "@syncfusion/ej2-inputs": "~27.1.48",
+    "@syncfusion/ej2-layouts": "~27.1.48",
+    "@syncfusion/ej2-lists": "~27.1.48",
+    "@syncfusion/ej2-navigations": "~27.1.48",
+    "@syncfusion/ej2-popups": "~27.1.48",
+    "@syncfusion/ej2-splitbuttons": "~27.1.48"
   },
   "deprecated": false,
   "description": "Essential JS 2 FileManager Component",
@@ -75,6 +75,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "26.2.10",
+  "version": "27.1.48",
   "sideEffects": false
 }

package/src/file-manager/base/file-manager-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, EmitType, ModuleDeclaration, isNullOrUndefined, L10n, closest, Collection } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, Complex, select } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, setStyleAttribute as setAttr, getUniqueID } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Event, EventHandler, getValue, setValue } from '@syncfusion/ej2-base';import { Splitter, PanePropertiesModel } from '@syncfusion/ej2-layouts';import { Dialog, createSpinner, hideSpinner, showSpinner, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';import { createDialog, createExtDialog } from '../pop-up/dialog';import { ToolbarSettings, ToolbarSettingsModel, AjaxSettings, NavigationPaneSettings, DetailsViewSettings } from '../models/index';import { ToolbarItem, ToolbarItemModel } from'../models/index' ;import { NavigationPaneSettingsModel, DetailsViewSettingsModel } from '../models/index';import { AjaxSettingsModel, SearchSettings, SearchSettingsModel } from '../models/index';import { Toolbar } from '../actions/toolbar';import { DetailsView } from '../layout/details-view';import { LargeIconsView } from '../layout/large-icons-view';import { Uploader, UploadingEventArgs, SelectedEventArgs, FileInfo, CancelEventArgs } from '@syncfusion/ej2-inputs';import { UploadSettingsModel } from '../models/upload-settings-model';import { UploadSettings } from '../models/upload-settings';import * as events from './constant';import * as CLS from './classes';import { read, filter, createFolder } from '../common/operations';import { ITreeView, IContextMenu, ViewType, SortOrder, FileDragEventArgs, RetryArgs, ReadArgs, FileSelectionEventArgs } from './interface';import { BeforeSendEventArgs, SuccessEventArgs, FailureEventArgs, FileLoadEventArgs, FolderCreateEventArgs, DeleteEventArgs, RenameEventArgs, MoveEventArgs, SearchEventArgs } from './interface';import { FileOpenEventArgs, FileSelectEventArgs, MenuClickEventArgs, MenuOpenEventArgs } from './interface';import { ToolbarClickEventArgs, ToolbarCreateEventArgs, UploadListCreateArgs } from './interface';import { PopupOpenCloseEventArgs, BeforePopupOpenCloseEventArgs, BeforeDownloadEventArgs, BeforeImageLoadEventArgs } from './interface';import { refresh, getPathObject, getLocaleText, setNextPath, createDeniedDialog, getCssClass } from '../common/utility';import { hasContentAccess, hasUploadAccess, updateLayout, createNewFolder, uploadItem, closePopup } from '../common/utility';import { TreeView as BaseTreeView } from '@syncfusion/ej2-navigations';import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';import { ContextMenuSettings } from '../models/contextMenu-settings';import { BreadCrumbBar } from '../actions/breadcrumb-bar';import { ContextMenu } from '../pop-up/context-menu';import { defaultLocale } from '../models/default-locale';import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';import { Virtualization } from '../actions/virtualization';import { SortComparer } from './interface';
+import { Component, EmitType, ModuleDeclaration, isNullOrUndefined, L10n, closest, Collection, detach, selectAll, setStyleAttribute } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, Complex, select } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, setStyleAttribute as setAttr, getUniqueID } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Event, EventHandler, getValue, setValue } from '@syncfusion/ej2-base';import { Splitter, PanePropertiesModel } from '@syncfusion/ej2-layouts';import { Dialog, createSpinner, hideSpinner, showSpinner, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';import { createDialog, createExtDialog } from '../pop-up/dialog';import { ToolbarSettings, ToolbarSettingsModel, AjaxSettings, NavigationPaneSettings, DetailsViewSettings } from '../models/index';import { ToolbarItem, ToolbarItemModel } from'../models/index' ;import { NavigationPaneSettingsModel, DetailsViewSettingsModel } from '../models/index';import { AjaxSettingsModel, SearchSettings, SearchSettingsModel } from '../models/index';import { Toolbar } from '../actions/toolbar';import { DetailsView } from '../layout/details-view';import { LargeIconsView } from '../layout/large-icons-view';import { Uploader, UploadingEventArgs, SelectedEventArgs, FileInfo, CancelEventArgs } from '@syncfusion/ej2-inputs';import { UploadSettingsModel } from '../models/upload-settings-model';import { UploadSettings } from '../models/upload-settings';import * as events from './constant';import * as CLS from './classes';import { read, filter, createFolder } from '../common/operations';import { ITreeView, IContextMenu, ViewType, SortOrder, FileDragEventArgs, RetryArgs, ReadArgs, FileSelectionEventArgs } from './interface';import { BeforeSendEventArgs, SuccessEventArgs, FailureEventArgs, FileLoadEventArgs, FolderCreateEventArgs, DeleteEventArgs, RenameEventArgs, MoveEventArgs, SearchEventArgs } from './interface';import { FileOpenEventArgs, FileSelectEventArgs, MenuClickEventArgs, MenuOpenEventArgs, MenuCloseEventArgs } from './interface';import { ToolbarClickEventArgs, ToolbarCreateEventArgs, UploadListCreateArgs } from './interface';import { PopupOpenCloseEventArgs, BeforePopupOpenCloseEventArgs, BeforeDownloadEventArgs, BeforeImageLoadEventArgs } from './interface';import { refresh, getPathObject, getLocaleText, setNextPath, createDeniedDialog, getCssClass } from '../common/utility';import { hasContentAccess, hasUploadAccess, updateLayout, createNewFolder, uploadItem, closePopup } from '../common/utility';import { TreeView as BaseTreeView } from '@syncfusion/ej2-navigations';import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';import { ContextMenuSettings } from '../models/contextMenu-settings';import { BreadCrumbBar } from '../actions/breadcrumb-bar';import { ContextMenu } from '../pop-up/context-menu';import { defaultLocale } from '../models/default-locale';import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';import { Virtualization } from '../actions/virtualization';import { SortComparer } from './interface';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -226,6 +226,15 @@ export interface FileManagerModel extends ComponentModel{
      */
     sortComparer?: SortComparer | string;
 
+    /**
+     * Gets or sets a value that indicates whether the File Manager allows multiple items selection with mouse dragging.
+     * Set this property to true to allow users to select multiple items with mouse drag as like file explorer. Hover over
+     * the files or folders and drag the mouse to select the required items.
+     *
+     * @default false
+     */
+    enableRangeSelection?: boolean;
+
     /**
      * Specifies the group of items aligned horizontally in the toolbar.
      *
@@ -451,6 +460,13 @@ export interface FileManagerModel extends ComponentModel{
      */
     menuOpen?: EmitType<MenuOpenEventArgs>;
 
+    /**
+     * Triggers before the context menu is closed.
+     *
+     * @event menuClose
+     */
+    menuClose?: EmitType<MenuCloseEventArgs>;
+
     /**
      * Triggers when the AJAX request is failed.
      *

package/src/file-manager/base/file-manager.d.ts

@@ -14,7 +14,7 @@ import { UploadSettingsModel } from '../models/upload-settings-model';
 import { FileManagerModel } from './file-manager-model';
 import { ITreeView, IContextMenu, ViewType, SortOrder, FileDragEventArgs, RetryArgs, FileSelectionEventArgs } from './interface';
 import { BeforeSendEventArgs, SuccessEventArgs, FailureEventArgs, FileLoadEventArgs, FolderCreateEventArgs, DeleteEventArgs, RenameEventArgs, MoveEventArgs, SearchEventArgs } from './interface';
-import { FileOpenEventArgs, FileSelectEventArgs, MenuClickEventArgs, MenuOpenEventArgs } from './interface';
+import { FileOpenEventArgs, FileSelectEventArgs, MenuClickEventArgs, MenuOpenEventArgs, MenuCloseEventArgs } from './interface';
 import { ToolbarClickEventArgs, ToolbarCreateEventArgs, UploadListCreateArgs } from './interface';
 import { PopupOpenCloseEventArgs, BeforePopupOpenCloseEventArgs, BeforeDownloadEventArgs, BeforeImageLoadEventArgs } from './interface';
 import { TreeView as BaseTreeView } from '@syncfusion/ej2-navigations';
@@ -153,6 +153,11 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     isMac: boolean;
     oldView: string;
     oldPath: string;
+    private viewElem;
+    private dragSelectElement;
+    private dragX;
+    private dragY;
+    private dragSelectedItems;
     /**
      * Specifies the AJAX settings of the file manager.
      *
@@ -350,6 +355,14 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * @aspType string
      */
     sortComparer: SortComparer | string;
+    /**
+     * Gets or sets a value that indicates whether the File Manager allows multiple items selection with mouse dragging.
+     * Set this property to true to allow users to select multiple items with mouse drag as like file explorer. Hover over
+     * the files or folders and drag the mouse to select the required items.
+     *
+     * @default false
+     */
+    enableRangeSelection: boolean;
     /**
      * Specifies the group of items aligned horizontally in the toolbar.
      *
@@ -545,6 +558,12 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * @event menuOpen
      */
     menuOpen: EmitType<MenuOpenEventArgs>;
+    /**
+     * Triggers before the context menu is closed.
+     *
+     * @event menuClose
+     */
+    menuClose: EmitType<MenuCloseEventArgs>;
     /**
      * Triggers when the AJAX request is failed.
      *
@@ -655,8 +674,14 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     private onDetailsInit;
     private resizeHandler;
     private keyActionHandler;
+    private wireSelectOnDragEvent;
     private wireEvents;
     private unWireEvents;
+    private onDragStart;
+    private onDrag;
+    private onDragStop;
+    private selectItems;
+    private onLayoutChange;
     private setPath;
     /**
      * Called internally if any of the property value changed.
@@ -783,6 +808,12 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * @returns {void}
      */
     selectAll(): void;
+    /**
+     * Specifies the method that must be invoked to traverse the path backwards in the file manager.
+     *
+     * @returns {void}
+     */
+    traverseBackward(): void;
     /**
      * Deselects the currently selected folders and files in current path.
      *

package/src/file-manager/base/file-manager.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-import { Component, isNullOrUndefined, L10n, closest, Collection } from '@syncfusion/ej2-base';
+import { Component, isNullOrUndefined, L10n, closest, Collection, detach, selectAll, setStyleAttribute } from '@syncfusion/ej2-base';
 import { Property, NotifyPropertyChanges, Complex, select } from '@syncfusion/ej2-base';
 import { createElement, addClass, removeClass, setStyleAttribute as setAttr, getUniqueID } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, formatUnit, Browser, KeyboardEvents } from '@syncfusion/ej2-base';
@@ -101,6 +101,7 @@ var FileManager = /** @class */ (function (_super) {
         _this.uploadedCount = 0;
         //Specifies whether the operating system is MAC or not
         _this.isMac = false;
+        _this.dragSelectedItems = [];
         FileManager_1.Inject(BreadCrumbBar, LargeIconsView, ContextMenu);
         return _this;
     }
@@ -225,6 +226,9 @@ var FileManager = /** @class */ (function (_super) {
         this.setRtl(this.enableRtl);
         this.addEventListeners();
         read(this, (this.path !== this.originalPath) ? events.initialEnd : events.finalizeEnd, this.path);
+        if (this.fileView === 'Details') {
+            this.largeiconsviewModule.element.classList.add(CLS.DISPLAY_NONE);
+        }
         this.adjustHeight();
         if (isNOU(this.navigationpaneModule)) {
             this.splitterObj.collapse(this.enableRtl ? 1 : 0);
@@ -661,7 +665,33 @@ var FileManager = /** @class */ (function (_super) {
                 break;
         }
     };
+    FileManager.prototype.wireSelectOnDragEvent = function (isBind) {
+        if (isNOU(this.view)) {
+            return;
+        }
+        if (isBind) {
+            this.viewElem = this.view === 'LargeIcons' ? this.largeiconsviewModule.element : this.element.querySelector('.e-gridcontent');
+        }
+        if (!this.viewElem) {
+            return;
+        }
+        if (isBind) {
+            if (this.allowMultiSelection) {
+                EventHandler.add(this.viewElem, 'mousedown', this.onDragStart, this);
+                this.on(events.layoutChange, this.onLayoutChange, this);
+                this.on(events.selectionChanged, this.onLayoutChange, this);
+            }
+        }
+        else {
+            EventHandler.remove(this.viewElem, 'mousedown', this.onDragStart);
+            this.off(events.layoutChange, this.onLayoutChange);
+            this.off(events.selectionChanged, this.onLayoutChange);
+        }
+    };
     FileManager.prototype.wireEvents = function () {
+        if (this.enableRangeSelection) {
+            this.wireSelectOnDragEvent(true);
+        }
         EventHandler.add(window, 'resize', this.resizeHandler, this);
         this.keyboardModule = new KeyboardEvents(this.element, {
             keyAction: this.keyActionHandler.bind(this),
@@ -670,9 +700,94 @@ var FileManager = /** @class */ (function (_super) {
         });
     };
     FileManager.prototype.unWireEvents = function () {
+        this.wireSelectOnDragEvent(false);
         EventHandler.remove(window, 'resize', this.resizeHandler);
         this.keyboardModule.destroy();
     };
+    FileManager.prototype.onDragStart = function (event) {
+        if (this.viewElem) {
+            if (this.allowDragAndDrop) {
+                var targetElement = closest(event.target, this.viewElem.classList.contains('e-large-icons') ? '.e-list-item' : '.e-fe-text');
+                if (targetElement) {
+                    return;
+                }
+            }
+            event.preventDefault();
+            this.dragX = event.pageX;
+            this.dragY = event.pageY;
+            if (!this.dragSelectElement) {
+                this.dragSelectElement = createElement('div', {
+                    id: this.element.id + '_drag',
+                    className: 'e-filemanager e-drag-select',
+                    styles: 'left: ' + this.dragX + 'px;top: ' + this.dragY + 'px;'
+                });
+                document.body.append(this.dragSelectElement);
+            }
+            EventHandler.add(document, 'mouseup', this.onDragStop, this);
+            EventHandler.add(this.viewElem, 'mousemove', this.onDrag, this);
+            EventHandler.add(this.dragSelectElement, 'mousemove', this.onDrag, this);
+        }
+    };
+    FileManager.prototype.onDrag = function (event) {
+        event.stopPropagation();
+        if (this.dragSelectElement) {
+            var diffX = event.pageX - this.dragX;
+            var diffY = event.pageY - this.dragY;
+            setStyleAttribute(this.dragSelectElement, {
+                'left': diffX < 0 ? this.dragX + diffX + 'px' : this.dragX + 'px', 'top': diffY < 0 ? this.dragY + diffY + 'px' : this.dragY + 'px',
+                'height': Math.abs(diffY) + 'px', 'width': Math.abs(diffX) + 'px'
+            });
+            this.selectItems();
+        }
+        else {
+            EventHandler.remove(this.viewElem, 'mousemove', this.onDrag);
+        }
+    };
+    FileManager.prototype.onDragStop = function () {
+        if (this.viewElem) {
+            EventHandler.remove(document, 'mouseup', this.onDragStop);
+            EventHandler.remove(this.viewElem, 'mousemove', this.onDrag);
+        }
+        if (this.dragSelectElement) {
+            EventHandler.remove(this.dragSelectElement, 'mousemove', this.onDrag);
+            if (this.dragSelectElement.clientHeight > 0 && this.dragSelectElement.clientWidth > 0) {
+                this.setProperties({ selectedItems: this.dragSelectedItems });
+            }
+            this.dragSelectedItems = [];
+            detach(this.dragSelectElement);
+            this.dragSelectElement = null;
+        }
+    };
+    FileManager.prototype.selectItems = function () {
+        this.dragSelectedItems = [];
+        var dragRect = this.dragSelectElement.getBoundingClientRect();
+        var allItems = selectAll(this.viewElem.classList.contains('e-large-icons') ? '.e-list-item' : '.e-row', this.viewElem);
+        removeClass(selectAll('.e-active', this.viewElem), ['e-active', 'e-focus']);
+        removeClass(selectAll('.e-check', this.viewElem), ['e-check']);
+        for (var _i = 0, allItems_1 = allItems; _i < allItems_1.length; _i++) {
+            var item = allItems_1[_i];
+            var itemRect = item.getBoundingClientRect();
+            if (!(dragRect.right < itemRect.left || dragRect.left > itemRect.right
+                || dragRect.bottom < itemRect.top || dragRect.top > itemRect.bottom)
+                && (this.dragSelectElement.clientHeight > 0 && this.dragSelectElement.clientWidth > 0)) {
+                if (this.viewElem.classList.contains('e-large-icons')) {
+                    item.classList.add('e-active');
+                    this.dragSelectedItems.push(item.getAttribute('title'));
+                }
+                else {
+                    addClass(selectAll('.e-rowcell', item), ['e-active']);
+                    this.dragSelectedItems.push(item.querySelector('.e-drag-text').textContent);
+                }
+                item.querySelector('.e-frame').classList.add('e-check');
+            }
+        }
+    };
+    FileManager.prototype.onLayoutChange = function () {
+        if (this.enableRangeSelection) {
+            this.unWireEvents();
+            this.wireEvents();
+        }
+    };
     FileManager.prototype.setPath = function () {
         this.setProperties({ selectedItems: [] }, true);
         this.ensurePath();
@@ -719,6 +834,12 @@ var FileManager = /** @class */ (function (_super) {
                 case 'detailsViewSettings':
                     this.notify(events.modelChanged, { module: 'detailsview', newProp: newProp, oldProp: oldProp });
                     break;
+                case 'enableRangeSelection':
+                    this.wireSelectOnDragEvent(false);
+                    if (newProp.enableRangeSelection) {
+                        this.wireSelectOnDragEvent(true);
+                    }
+                    break;
                 case 'enableRtl':
                     this.enableRtl = newProp.enableRtl;
                     this.refresh();
@@ -899,6 +1020,9 @@ var FileManager = /** @class */ (function (_super) {
         this.largeiconsviewModule = null;
         this.detailsviewModule = null;
         this.breadcrumbbarModule = null;
+        this.viewElem = null;
+        this.dragSelectElement = null;
+        this.dragSelectedItems = null;
     };
     /**
      * Creates a new folder in file manager.
@@ -1087,6 +1211,23 @@ var FileManager = /** @class */ (function (_super) {
     FileManager.prototype.selectAll = function () {
         this.notify(events.methodCall, { action: 'selectAll' });
     };
+    /**
+     * Specifies the method that must be invoked to traverse the path backwards in the file manager.
+     *
+     * @returns {void}
+     */
+    FileManager.prototype.traverseBackward = function () {
+        if (this.pathNames.length > 1 && this.breadcrumbbarModule.searchObj.element.value === '' && !this.isFiltered) {
+            this.pathId.pop();
+            this.pathNames.pop();
+            var newPath = this.pathNames.slice(1).join('/');
+            newPath = newPath === '' ? '/' : '/' + newPath + '/';
+            this.setProperties({ path: newPath }, true);
+            read(this, events.pathChanged, this.path);
+            var treeNodeId = this.pathId[this.pathId.length - 1];
+            this.notify(events.updateTreeSelection, { module: 'treeview', selectedNode: treeNodeId });
+        }
+    };
     /**
      * Deselects the currently selected folders and files in current path.
      *
@@ -1223,6 +1364,9 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], FileManager.prototype, "sortComparer", void 0);
+    __decorate([
+        Property(false)
+    ], FileManager.prototype, "enableRangeSelection", void 0);
     __decorate([
         Complex({}, ToolbarSettings)
     ], FileManager.prototype, "toolbarSettings", void 0);
@@ -1313,6 +1457,9 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], FileManager.prototype, "menuOpen", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "menuClose", void 0);
     __decorate([
         Event()
     ], FileManager.prototype, "failure", void 0);

package/src/file-manager/base/interface.d.ts

@@ -678,6 +678,43 @@ export interface MenuOpenEventArgs {
      */
     menuType?: string;
 }
+/**
+ * Interface for MenuClose event arguments.
+ */
+export interface MenuCloseEventArgs {
+    /**
+     * If you want to cancel this event then, set cancel to true. Otherwise, false.
+     */
+    cancel?: boolean;
+    /**
+     * Returns the current context menu element.
+     */
+    element?: HTMLElement;
+    /**
+     * Specifies the actual event.
+     */
+    event?: Event;
+    /**
+     * Returns whether the current context menu is focused or not.
+     */
+    isFocused?: boolean;
+    /**
+     * Returns the target folder/file item as an array of JSON object.
+     */
+    fileDetails?: Object[];
+    /**
+     * Returns the current context menu items as JSON object.
+     */
+    items?: MenuItemModel[];
+    /**
+     * Returns the parent context menu item as JSON object.
+     */
+    parentItem?: MenuItemModel;
+    /**
+     * Returns the current context menu type based on current target.
+     */
+    menuType?: string;
+}
 /**
  * Interface for UploadListCreate event arguments.
  */
@@ -878,6 +915,7 @@ export interface IFileManager extends Component<HTMLElement> {
     destinationPath: string;
     enableHtmlSanitizer: boolean;
     refreshLayout(): void;
+    traverseBackward(): void;
     isMac: boolean;
     oldView: string;
     oldPath: string;

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

@@ -492,6 +492,7 @@ function triggerSearchOperation(parent, data, eventArgs) {
         showHiddenItems: getValue('showHiddenItems', data)
     };
     parent.trigger('search', searchEventArgs, function (args) {
+        setValue('data', args.searchResults, data);
         if (args.cancel) {
             eventArgs.cancel = true;
         }

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

@@ -880,6 +880,9 @@ export function pasteHandler(parent) {
     parent.isDragDrop = false;
     if (parent.selectedNodes.length !== 0 && parent.enablePaste) {
         var path = (parent.folderPath === '') ? parent.path : parent.folderPath;
+        if (parent.activeModule === 'navigationpane' && !parent.selectedNodes[0].includes('/')) {
+            parent.targetPath = getValue('filterPath', parent.actionRecords[0]).replace(/\\/g, '/');
+        }
         var subFolder = validateSubFolder(parent, parent.actionRecords, path, parent.path);
         if (!subFolder) {
             if ((parent.fileAction === 'move' && parent.targetPath !== path) || parent.fileAction === 'copy') {

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

@@ -80,7 +80,8 @@ var DetailsView = /** @class */ (function () {
             ctrlD: 'ctrl+d',
             f2: 'f2',
             ctrlA: 'ctrl+a',
-            enter: 'enter'
+            enter: 'enter',
+            back: 'backspace'
         };
     }
     /* istanbul ignore next */
@@ -255,6 +256,10 @@ var DetailsView = /** @class */ (function () {
         for (var i = 0, len = columns.length; i < len; i++) {
             columns[i].disableHtmlEncode = !this.parent.enableHtmlSanitizer;
         }
+        if (this.parent.enableRangeSelection) {
+            var HiddenName = { field: 'name', visible: false, customAttributes: { class: 'e-drag-text' } };
+            columns.push(HiddenName);
+        }
         return columns;
     };
     DetailsView.prototype.adjustHeight = function () {
@@ -1082,7 +1087,8 @@ var DetailsView = /** @class */ (function () {
     DetailsView.prototype.onpasteEnd = function (args) {
         if (this.parent.view === 'Details') {
             this.isPasteOperation = true;
-            if (this.parent.path === this.parent.destinationPath || this.parent.path === getDirectoryPath(this.parent, args)) {
+            if (this.parent.path === this.parent.destinationPath ||
+                this.parent.path === getDirectoryPath(this.parent, args) || this.parent.hasId) {
                 this.onPathChanged(args);
             }
         }
@@ -1521,6 +1527,9 @@ var DetailsView = /** @class */ (function () {
                 this.parent.setProperties({ selectedItems: lastItem }, true);
                 this.selectRecords(lastItem);
                 break;
+            case 'back':
+                this.parent.traverseBackward();
+                break;
         }
     };
     DetailsView.prototype.gridSelectNodes = function () {

package/src/file-manager/layout/large-icons-view.d.ts

@@ -52,7 +52,6 @@ export declare class LargeIconsView {
      * @private
      */
     private getModuleName;
-    private adjustHeight;
     private onItemCreated;
     private renderCheckbox;
     private onLayoutChange;

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

@@ -120,9 +120,6 @@ var LargeIconsView = /** @class */ (function () {
             }
             iconsView.classList.remove(CLS.DISPLAY_NONE);
             if (this.parent.enableVirtualization && this.allItems.length > 0) {
-                if (!this.element.style.height) {
-                    this.adjustHeight();
-                }
                 this.parent.virtualizationModule.setUIVirtualization();
             }
             this.listElements = ListBase.createListFromJson(createElement, this.items, this.listObj);
@@ -160,7 +157,6 @@ var LargeIconsView = /** @class */ (function () {
             for (var i = 0; i < activeEle.length; i++) {
                 activeEle[i].setAttribute('aria-selected', 'true');
             }
-            this.adjustHeight();
             this.element.style.maxHeight = '100%';
             this.getItemCount();
             this.addEventListener();
@@ -267,11 +263,6 @@ var LargeIconsView = /** @class */ (function () {
     LargeIconsView.prototype.getModuleName = function () {
         return 'largeiconsview';
     };
-    LargeIconsView.prototype.adjustHeight = function () {
-        var pane = select('#' + this.parent.element.id + CLS.CONTENT_ID, this.parent.element);
-        var bar = select('#' + this.parent.element.id + CLS.BREADCRUMBBAR_ID, this.parent.element);
-        this.element.style.height = (pane.offsetHeight - bar.offsetHeight) + 'px';
-    };
     LargeIconsView.prototype.onItemCreated = function (args) {
         args.item.removeAttribute('aria-level');
         if (!this.parent.showFileExtension && getValue('isFile', args.curData)) {
@@ -471,7 +462,6 @@ var LargeIconsView = /** @class */ (function () {
         if (this.parent.view !== 'LargeIcons') {
             return;
         }
-        this.adjustHeight();
     };
     LargeIconsView.prototype.onUpdateSelectionData = function () {
         if (this.parent.view !== 'LargeIcons') {
@@ -599,7 +589,8 @@ var LargeIconsView = /** @class */ (function () {
     LargeIconsView.prototype.onpasteEnd = function (args) {
         if (this.parent.view === 'LargeIcons') {
             this.isPasteOperation = true;
-            if (this.parent.path === this.parent.destinationPath || this.parent.path === getDirectoryPath(this.parent, args)) {
+            if (this.parent.path === this.parent.destinationPath ||
+                this.parent.path === getDirectoryPath(this.parent, args) || this.parent.hasId) {
                 this.onPathChanged(args);
             }
         }
@@ -621,9 +612,6 @@ var LargeIconsView = /** @class */ (function () {
                 case 'allowDragAndDrop':
                     this.createDragObj();
                     break;
-                case 'height':
-                    this.adjustHeight();
-                    break;
                 case 'selectedItems':
                     this.isInteraction = false;
                     this.isInteracted = false;
@@ -1089,6 +1077,9 @@ var LargeIconsView = /** @class */ (function () {
             case 'ctrlD':
                 this.doDownload();
                 break;
+            case 'back':
+                this.parent.traverseBackward();
+                break;
         }
     };
     LargeIconsView.prototype.doDownload = function () {
@@ -1381,9 +1372,6 @@ var LargeIconsView = /** @class */ (function () {
     };
     LargeIconsView.prototype.resizeHandler = function () {
         this.getItemCount();
-        if (!isNOU(this.listObj)) {
-            this.adjustHeight();
-        }
     };
     LargeIconsView.prototype.splitterResizeHandler = function () {
         this.getItemCount();

package/src/file-manager/pop-up/context-menu.d.ts

@@ -27,7 +27,7 @@ export declare class ContextMenu {
     constructor(parent?: IFileManager);
     private render;
     onBeforeItemRender(args: MenuEventArgs): void;
-    onBeforeClose(): void;
+    onBeforeClose(args: BeforeOpenCloseMenuEventArgs): void;
     onBeforeOpen(args: BeforeOpenCloseMenuEventArgs): void;
     private updateActiveModule;
     /**

package/src/file-manager/pop-up/context-menu.js

@@ -61,7 +61,23 @@ var ContextMenu = /** @class */ (function () {
             iconSpan.setAttribute('class', CLS.ICON_GRID + ' ' + CLS.MENU_ICON);
         }
     };
-    ContextMenu.prototype.onBeforeClose = function () {
+    ContextMenu.prototype.onBeforeClose = function (args) {
+        var eventArgs = {
+            cancel: false,
+            element: args.element,
+            event: args.event,
+            isFocused: args.isFocused,
+            fileDetails: [this.menuItemData],
+            items: args.items,
+            parentItem: args.parentItem,
+            menuType: this.menuType
+        };
+        this.parent.trigger('menuClose', eventArgs, function (menuCloseArgs) {
+            if (menuCloseArgs.cancel) {
+                args.cancel = menuCloseArgs.cancel;
+                return;
+            }
+        });
         this.menuTarget = null;
         if (!this.isMenuItemClicked && this.parent.pathId.length > 1 && this.parent.activeModule === 'navigationpane') {
             this.parent.pathId.pop();
@@ -398,7 +414,13 @@ var ContextMenu = /** @class */ (function () {
                         break;
                     case 'paste':
                         if (_this.menuType === 'folder') {
-                            _this.parent.folderPath = getFullPath(_this.parent, _this.menuItemData, _this.parent.path);
+                            if (_this.parent.activeModule === 'navigationpane') {
+                                _this.parent.navigationpaneModule.openFileOnContextMenuClick(closest(_this.targetNodeElement, 'li'));
+                                _this.parent.folderPath = _this.parent.path;
+                            }
+                            else {
+                                _this.parent.folderPath = getFullPath(_this.parent, _this.menuItemData, _this.parent.path);
+                            }
                         }
                         else {
                             _this.parent.folderPath = '';