@syncfusion/ej2-filemanager 22.2.12 → 23.1.38

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.2.12
-*  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
+*  version : 23.1.38
+*  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
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-filemanager@*",
-  "_id": "@syncfusion/ej2-filemanager@22.2.10",
+  "_id": "@syncfusion/ej2-filemanager@23.1.36",
   "_inBundle": false,
-  "_integrity": "sha512-93ga+Z7ugOFIrtBkfHE1B+XyhzKgjLlZHdmHUVGpvKYeLnmoHTslyArB0f91sPxd2E33oW35hqFO3SmaWwV5Tg==",
+  "_integrity": "sha512-inDlT6xPbUpZpboqEsJRhXQ3YJrDhxpDuLt94BggB84M/3KN3CYVNIIKzbg0AhhS/ghDmklxAvtOxikrSaD4/w==",
   "_location": "/@syncfusion/ej2-filemanager",
   "_phantomChildren": {},
   "_requested": {
@@ -25,10 +25,10 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-filemanager"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-22.2.10.tgz",
-  "_shasum": "d23d29c3efa7ceddd57180143f44cd00621d3736",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-23.1.36.tgz",
+  "_shasum": "7047e09e8e538c5df61362148eb51fb06f31423a",
   "_spec": "@syncfusion/ej2-filemanager@*",
-  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -37,16 +37,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.2.12",
-    "@syncfusion/ej2-buttons": "~22.2.9",
-    "@syncfusion/ej2-data": "~22.2.5",
-    "@syncfusion/ej2-grids": "~22.2.12",
-    "@syncfusion/ej2-inputs": "~22.2.12",
-    "@syncfusion/ej2-layouts": "~22.2.9",
-    "@syncfusion/ej2-lists": "~22.2.11",
-    "@syncfusion/ej2-navigations": "~22.2.11",
-    "@syncfusion/ej2-popups": "~22.2.11",
-    "@syncfusion/ej2-splitbuttons": "~22.2.8"
+    "@syncfusion/ej2-base": "~23.1.38",
+    "@syncfusion/ej2-buttons": "~23.1.36",
+    "@syncfusion/ej2-data": "~23.1.36",
+    "@syncfusion/ej2-grids": "~23.1.38",
+    "@syncfusion/ej2-inputs": "~23.1.38",
+    "@syncfusion/ej2-layouts": "~23.1.36",
+    "@syncfusion/ej2-lists": "~23.1.36",
+    "@syncfusion/ej2-navigations": "~23.1.36",
+    "@syncfusion/ej2-popups": "~23.1.38",
+    "@syncfusion/ej2-splitbuttons": "~23.1.36"
   },
   "deprecated": false,
   "description": "Essential JS 2 FileManager Component",
@@ -76,6 +76,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "22.2.12",
+  "version": "23.1.38",
   "sideEffects": false
 }

package/src/file-manager/actions/toolbar.d.ts

@@ -30,6 +30,7 @@ export declare class Toolbar {
     private getPupupId;
     private layoutChange;
     private toolbarItemData;
+    private getItemModel;
     private getId;
     private addEventListener;
     private reRenderToolbar;

package/src/file-manager/actions/toolbar.js

@@ -1,3 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Toolbar as BaseToolbar } from '@syncfusion/ej2-navigations';
 import { select, isNullOrUndefined as isNOU, closest, selectAll } from '@syncfusion/ej2-base';
 import { createDialog } from '../pop-up/dialog';
@@ -44,6 +56,7 @@ var Toolbar = /** @class */ (function () {
                 enableRtl: _this.parent.enableRtl
             });
             _this.toolbarObj.isStringTemplate = true;
+            _this.toolbarObj.root = _this.parent.root ? _this.parent.root : _this.parent;
             _this.toolbarObj.appendTo('#' + _this.parent.element.id + CLS.TOOLBAR_ID);
         });
     };
@@ -61,6 +74,9 @@ var Toolbar = /** @class */ (function () {
         if (this.parent.isDevice && this.parent.allowMultiSelection) {
             currItems.push('SelectAll');
         }
+        if (this.parent.toolbarItems.length > 0) {
+            currItems = this.parent.toolbarItems.map(function (item) { return item.name; });
+        }
         return currItems;
     };
     /* istanbul ignore next */
@@ -201,6 +217,10 @@ var Toolbar = /** @class */ (function () {
         }
         this.hideItems(this.default, true);
         this.hideStatus();
+        if (this.parent.portals && this.toolbarObj.portals) {
+            this.parent.portals = this.parent.portals.concat(this.toolbarObj.portals);
+            this.parent['renderReactTemplates']();
+        }
         var btnElement = selectAll('.e-btn', this.toolbarObj.element);
         var _loop_1 = function (btnCount) {
             /* istanbul ignore next */
@@ -273,10 +293,13 @@ var Toolbar = /** @class */ (function () {
         }
         for (var i = 0; i < data.length; i++) {
             var item = void 0;
+            var propItem = void 0;
+            if (this.parent.toolbarItems.length > 0) {
+                propItem = this.getItemModel(this.parent.toolbarItems[parseInt(i.toString(), 10)]);
+            }
             var itemId = this.getId(data[i]);
             var itemText = getLocaleText(this.parent, data[i]);
             var itemTooltip = getLocaleText(this.parent, 'Tooltip-' + data[i]);
-            var spanElement = '<span class="e-tbar-btn-text e-tbar-ddb-text">' + itemText + '</span>';
             switch (data[i]) {
                 case '|':
                     item = { type: 'Separator' };
@@ -284,12 +307,17 @@ var Toolbar = /** @class */ (function () {
                 case 'Upload':
                     item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_UPLOAD, showTextOn: mode };
                     break;
-                case 'SortBy':
+                case 'SortBy': {
+                    var spanElement = '<span class="e-tbar-btn-text e-tbar-ddb-text">' + itemText + '</span>';
+                    if (propItem && propItem.text) {
+                        spanElement = '<span class="e-tbar-btn-text e-tbar-ddb-text">' + propItem.text + '</span>';
+                    }
                     item = {
                         id: itemId, tooltipText: itemTooltip,
                         template: '<button id="' + itemId + '" class="e-tbar-btn e-tbtn-txt" tabindex="-1">' + spanElement + '</button>'
                     };
                     break;
+                }
                 case 'Refresh':
                     item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_REFRESH, showTextOn: mode };
                     break;
@@ -299,14 +327,22 @@ var Toolbar = /** @class */ (function () {
                         align: 'Right'
                     };
                     break;
-                case 'View':
+                case 'View': {
+                    var viewText = void 0;
+                    if (propItem && propItem.text) {
+                        viewText = propItem.text;
+                    }
+                    else {
+                        viewText = getLocaleText(this.parent, 'View');
+                    }
                     item = {
                         id: itemId, tooltipText: itemTooltip, prefixIcon: this.parent.view === 'Details' ? CLS.ICON_GRID : CLS.ICON_LARGE,
                         overflow: 'Show', align: 'Right', text: itemText, showTextOn: 'Overflow',
                         template: '<button id="' + itemId + '" class="e-tbar-btn e-tbtn-txt" tabindex="-1" aria-label=' +
-                            getLocaleText(this.parent, 'View') + '></button>'
+                            viewText + '></button>'
                     };
                     break;
+                }
                 case 'Details':
                     item = {
                         id: itemId, tooltipText: itemTooltip, prefixIcon: CLS.ICON_DETAILS, overflow: 'Show', align: 'Right',
@@ -338,13 +374,74 @@ var Toolbar = /** @class */ (function () {
                     item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_SELECTALL, showTextOn: mode };
                     break;
                 default:
-                    item = { id: itemId, text: itemText, tooltipText: itemTooltip };
+                    item = { id: itemId, text: itemText, tooltipText: itemTooltip, template: '' };
                     break;
             }
-            items.push(item);
+            if (this.parent.toolbarItems.length > 0 && propItem) {
+                var mergedItems = __assign({}, item, propItem);
+                items.push(mergedItems);
+            }
+            else {
+                items.push(item);
+            }
         }
         return items;
     };
+    Toolbar.prototype.getItemModel = function (propItem) {
+        var item = {};
+        if (propItem.id) {
+            item.id = propItem.id;
+        }
+        if (propItem.text) {
+            item.text = propItem.text;
+        }
+        if (propItem.tooltipText) {
+            item.tooltipText = propItem.tooltipText;
+        }
+        if (propItem.prefixIcon) {
+            item.prefixIcon = propItem.prefixIcon;
+        }
+        if (propItem.cssClass) {
+            item.cssClass = propItem.cssClass;
+        }
+        if (propItem.showTextOn !== 'Both') {
+            item.showTextOn = propItem.showTextOn;
+        }
+        if (propItem.template) {
+            item.template = propItem.template;
+        }
+        if (propItem.disabled) {
+            item.disabled = propItem.disabled;
+        }
+        if (propItem.width !== 'auto') {
+            item.width = propItem.width;
+        }
+        if (propItem.suffixIcon) {
+            item.suffixIcon = propItem.suffixIcon;
+        }
+        if (propItem.align !== 'Left') {
+            item.align = propItem.align;
+        }
+        if (propItem.overflow !== 'None') {
+            item.overflow = propItem.overflow;
+        }
+        if (propItem.htmlAttributes) {
+            item.htmlAttributes = propItem.htmlAttributes;
+        }
+        if (propItem.type !== 'Button') {
+            item.type = propItem.type;
+        }
+        if (propItem.visible !== true) {
+            item.visible = propItem.visible;
+        }
+        if (propItem.showAlwaysInPopup) {
+            item.showAlwaysInPopup = propItem.showAlwaysInPopup;
+        }
+        if (propItem.tabIndex !== -1) {
+            item.tabIndex = propItem.tabIndex;
+        }
+        return item;
+    };
     Toolbar.prototype.getId = function (id) {
         return this.parent.element.id + '_tb_' + id.toLowerCase();
     };
@@ -359,8 +456,19 @@ var Toolbar = /** @class */ (function () {
     };
     Toolbar.prototype.reRenderToolbar = function (e) {
         var _this = this;
-        if (e.newProp.toolbarSettings.items !== undefined) {
-            this.items = this.toolbarItemData(this.getItems(e.newProp.toolbarSettings.items.map(function (item) { return item.trim(); })));
+        var itemsToProcess = [];
+        if (this.parent.toolbarItems.length > 0) {
+            itemsToProcess = this.parent.toolbarItems.map(function (item) {
+                return item.name;
+            });
+        }
+        else if (e.newProp.toolbarSettings.items !== undefined) {
+            itemsToProcess = e.newProp.toolbarSettings.items.map(function (item) {
+                return item.trim();
+            });
+        }
+        if (itemsToProcess.length > 0) {
+            this.items = this.toolbarItemData(this.getItems(itemsToProcess));
             var eventArgs = { items: this.items };
             this.parent.trigger('toolbarCreate', eventArgs, function (toolbarCreateArgs) {
                 if (_this.buttonObj) {
@@ -474,6 +582,7 @@ var Toolbar = /** @class */ (function () {
                     this.toolbarObj.refreshOverflow();
                     break;
                 case 'toolbarSettings':
+                case 'toolbarItems':
                     this.reRenderToolbar(e);
                     break;
             }

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

@@ -1,4 +1,4 @@
-import { Component, EmitType, ModuleDeclaration, isNullOrUndefined, L10n, closest } 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 { 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 } 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 } 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 { 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 } 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 } 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 {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -217,6 +217,17 @@ export interface FileManagerModel extends ComponentModel{
      */
     toolbarSettings?: ToolbarSettingsModel;
 
+    /**
+     * An array of items that are used to configure File Manager toolbar items. 
+     * 
+     * @remarks 
+     * Use this property if you want to include custom toolbar items along with existing toolbar items. If both `toolbarSettings` and `toolbarItems` are defined, then items will be rendered based on toolbarItems.
+     * 
+     * @default [] 
+     * 
+     */ 
+    toolbarItems?: ToolbarItemModel[]; 
+
     /**
      * Specifies the upload settings for the file manager.
      *

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

@@ -3,6 +3,7 @@ import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
 import { Splitter } from '@syncfusion/ej2-layouts';
 import { Dialog } from '@syncfusion/ej2-popups';
 import { ToolbarSettingsModel } from '../models/index';
+import { ToolbarItemModel } from '../models/index';
 import { NavigationPaneSettingsModel, DetailsViewSettingsModel } from '../models/index';
 import { AjaxSettingsModel, SearchSettingsModel } from '../models/index';
 import { Toolbar } from '../actions/toolbar';
@@ -334,6 +335,16 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * }
      */
     toolbarSettings: ToolbarSettingsModel;
+    /**
+     * An array of items that are used to configure File Manager toolbar items.
+     *
+     * @remarks
+     * Use this property if you want to include custom toolbar items along with existing toolbar items. If both `toolbarSettings` and `toolbarItems` are defined, then items will be rendered based on toolbarItems.
+     *
+     * @default []
+     *
+     */
+    toolbarItems: ToolbarItemModel[];
     /**
      * Specifies the upload settings for the file manager.
      *

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 } from '@syncfusion/ej2-base';
+import { Component, isNullOrUndefined, L10n, closest, Collection } 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';
@@ -26,6 +26,7 @@ import { Splitter } from '@syncfusion/ej2-layouts';
 import { Dialog, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import { createDialog, createExtDialog } from '../pop-up/dialog';
 import { ToolbarSettings, AjaxSettings, NavigationPaneSettings, DetailsViewSettings } from '../models/index';
+import { ToolbarItem } from '../models/index';
 import { SearchSettings } from '../models/index';
 import { LargeIconsView } from '../layout/large-icons-view';
 import { Uploader } from '@syncfusion/ej2-inputs';
@@ -782,6 +783,7 @@ var FileManager = /** @class */ (function (_super) {
                     this.notify(events.modelChanged, { module: 'largeiconsview', newProp: newProp, oldProp: oldProp });
                     break;
                 case 'toolbarSettings':
+                case 'toolbarItems':
                     this.adjustHeight();
                     this.notify(events.modelChanged, { module: 'toolbar', newProp: newProp, oldProp: oldProp });
                     break;
@@ -890,10 +892,10 @@ var FileManager = /** @class */ (function (_super) {
         this.element.innerHTML = '';
         this.breadCrumbBarNavigation = null;
         this.activeElements = null;
-        this.virtualizationModule = null;
         this.virtualDragElement = null;
         this.visitedItem = null;
         _super.prototype.destroy.call(this);
+        this.virtualizationModule = null;
         this.navigationpaneModule = null;
         this.toolbarModule = null;
         this.contextmenuModule = null;
@@ -958,7 +960,7 @@ var FileManager = /** @class */ (function (_super) {
      * @returns {void}
      */
     FileManager.prototype.disableToolbarItems = function (items) {
-        if (!isNOU(items)) {
+        if (!isNOU(items) && this.toolbarModule) {
             this.toolbarModule.enableItems(items, false);
         }
     };
@@ -982,7 +984,7 @@ var FileManager = /** @class */ (function (_super) {
      * @returns {void}
      */
     FileManager.prototype.enableToolbarItems = function (items) {
-        if (!isNOU(items)) {
+        if (!isNOU(items) && this.toolbarModule) {
             this.toolbarModule.enableItems(items, true);
         }
     };
@@ -1217,6 +1219,9 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Complex({}, ToolbarSettings)
     ], FileManager.prototype, "toolbarSettings", void 0);
+    __decorate([
+        Collection([], ToolbarItem)
+    ], FileManager.prototype, "toolbarItems", void 0);
     __decorate([
         Complex({}, UploadSettings)
     ], FileManager.prototype, "uploadSettings", void 0);

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

@@ -1,7 +1,7 @@
 import { Component, EmitType, L10n } from '@syncfusion/ej2-base';
 import { Dialog, ButtonPropsModel } from '@syncfusion/ej2-popups';
 import { FileManagerModel } from '../base/file-manager-model';
-import { ToolbarSettingsModel, AjaxSettingsModel } from '../models/index';
+import { ToolbarSettingsModel, AjaxSettingsModel, ToolbarItemModel } from '../models/index';
 import { DetailsViewSettingsModel } from '../models/details-view-settings-model';
 import { TreeView, ContextMenu, MenuItemModel, ItemModel } from '@syncfusion/ej2-navigations';
 import { DetailsView } from '../layout/details-view';
@@ -533,6 +533,7 @@ export interface IFileManager extends Component<HTMLElement> {
     feFiles: Object[];
     ajaxSettings: AjaxSettingsModel;
     toolbarSettings: ToolbarSettingsModel;
+    toolbarItems: ToolbarItemModel[];
     detailsViewSettings: DetailsViewSettingsModel;
     dialogObj: Dialog;
     viewerObj: Dialog;

package/src/file-manager/layout/details-view.d.ts

@@ -41,6 +41,7 @@ export declare class DetailsView {
     private reactTemplateRender;
     /**
      * Gets the grid height.
+     *
      * @returns The grid height.
      * @private
      */

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

@@ -152,11 +152,16 @@ var DetailsView = /** @class */ (function () {
     };
     DetailsView.prototype.reactTemplateRender = function (args) {
         this.parent["portals"] = args;
+        if (this.parent.portals && this.parent.toolbarModule && this.parent.toolbarModule.toolbarObj &&
+            this.parent.toolbarModule.toolbarObj.portals) {
+            this.parent["portals"] = this.parent["portals"].concat(this.parent.toolbarModule.toolbarObj.portals);
+        }
         this.parent.notify('renderReactTemplate', this.parent["portals"]);
         this.parent["renderReactTemplates"]();
     };
     /**
      * Gets the grid height.
+     *
      * @returns The grid height.
      * @private
      */
@@ -223,7 +228,7 @@ var DetailsView = /** @class */ (function () {
             }), allowResizing: false, allowSorting: true, customAttributes: { class: 'e-fe-grid-icon' },
             headerTemplate: initializeCSPTemplate(function () {
                 return "<span class=\"e-fe-icon e-fe-folder\"></span>";
-            }),
+            })
         };
         columns.unshift(icon);
         if (this.parent.showItemCheckBoxes) {
@@ -956,8 +961,8 @@ var DetailsView = /** @class */ (function () {
         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;
+        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]);
@@ -1026,7 +1031,7 @@ var DetailsView = /** @class */ (function () {
     };
     DetailsView.prototype.createDragObj = function () {
         var _this = this;
-        if (!this.parent.isMobile && this.gridObj) {
+        if (this.gridObj) {
             if (this.parent.allowDragAndDrop) {
                 if (this.dragObj) {
                     this.dragObj.destroy();

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

@@ -183,7 +183,7 @@ var LargeIconsView = /** @class */ (function () {
     };
     LargeIconsView.prototype.createDragObj = function () {
         var _this = this;
-        if (!this.parent.isMobile && this.listObj) {
+        if (this.listObj) {
             if (this.parent.allowDragAndDrop) {
                 if (this.dragObj) {
                     this.dragObj.destroy();

package/src/file-manager/layout/navigation-pane.js

@@ -181,8 +181,12 @@ var NavigationPane = /** @class */ (function () {
                 }
                 length_1++;
             }
-            // eslint-disable-next-line
-            this.treeObj.addNodes(directories, target, null, prevent);
+            var element = select('[data-uid="' + target + '"]', this.treeObj.element);
+            var childElements = select('ul', element);
+            if (isNOU(childElements)) {
+                // eslint-disable-next-line
+                this.treeObj.addNodes(directories, target, null, prevent);
+            }
         }
     };
     // Node Selecting event handler
@@ -267,7 +271,6 @@ var NavigationPane = /** @class */ (function () {
             this.parent.pathId = getPathId(args.node);
             this.parent.visitedItem = args.node;
         }
-        this.expandNodeTarget = null;
         if (args.node.querySelector('.' + CLS.ICONS) && args.node.querySelector('.' + CLS.LIST_ITEM) === null) {
             this.expandNodeTarget = 'add';
         }

package/src/file-manager/models/details-view-settings-model.d.ts

@@ -1,4 +1,4 @@
-import { Property, ChildProperty, initializeCSPTemplate  } from '@syncfusion/ej2-base';import { ColumnModel } from './index';
+import { Property, ChildProperty, initializeCSPTemplate } from '@syncfusion/ej2-base';import { ColumnModel } from './index';
 
 /**
  * Interface for a class DetailsViewSettings