@syncfusion/ej2-filemanager 33.2.3 → 33.2.6

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.2.3
+*  version : 33.2.6
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-filemanager",
-  "version": "33.2.3",
+  "version": "33.2.6",
   "description": "Essential JS 2 FileManager Component",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -9,15 +9,15 @@
   "es2015": "./dist/es6/ej2-filemanager.es5.js",
   "dependencies": {
     "@syncfusion/ej2-base": "~33.2.3",
-    "@syncfusion/ej2-buttons": "~33.2.3",
-    "@syncfusion/ej2-data": "~33.2.3",
-    "@syncfusion/ej2-grids": "~33.2.3",
-    "@syncfusion/ej2-inputs": "~33.2.3",
+    "@syncfusion/ej2-buttons": "~33.2.5",
+    "@syncfusion/ej2-data": "~33.2.5",
+    "@syncfusion/ej2-grids": "~33.2.5",
+    "@syncfusion/ej2-inputs": "~33.2.5",
     "@syncfusion/ej2-layouts": "~33.2.3",
     "@syncfusion/ej2-lists": "~33.2.3",
-    "@syncfusion/ej2-navigations": "~33.2.3",
-    "@syncfusion/ej2-popups": "~33.2.3",
-    "@syncfusion/ej2-splitbuttons": "~33.2.3"
+    "@syncfusion/ej2-navigations": "~33.2.6",
+    "@syncfusion/ej2-popups": "~33.2.5",
+    "@syncfusion/ej2-splitbuttons": "~33.2.6"
   },
   "devDependencies": {},
   "keywords": [

package/src/file-manager/actions/breadcrumb-bar.d.ts

@@ -13,6 +13,10 @@ export declare class BreadCrumbBar {
     private searchTimer;
     private keyConfigs;
     private searchWrapWidth;
+    private boundSearchChangeHandler;
+    private boundOnKeyUp;
+    private searchIcon;
+    private searchSibling;
     /**
      * constructor for addressbar module
      *
@@ -24,6 +28,7 @@ export declare class BreadCrumbBar {
     constructor(parent?: IFileManager);
     private onPropertyChanged;
     private render;
+    private setBreadcrumbNavAttributes;
     onPathChange(): void;
     private updateBreadCrumbBar;
     private onFocus;

package/src/file-manager/actions/breadcrumb-bar.js

@@ -23,10 +23,14 @@ var BreadCrumbBar = /** @class */ (function () {
         this.addressBarLink = '';
         this.searchTimer = null;
         this.searchWrapWidth = null;
+        this.searchIcon = null;
+        this.searchSibling = null;
         this.parent = parent;
         this.keyConfigs = {
             enter: 'enter'
         };
+        this.boundSearchChangeHandler = this.searchChangeHandler.bind(this);
+        this.boundOnKeyUp = this.onKeyUp.bind(this);
         this.render();
     }
     BreadCrumbBar.prototype.onPropertyChanged = function (e) {
@@ -51,8 +55,15 @@ var BreadCrumbBar = /** @class */ (function () {
         }
     };
     BreadCrumbBar.prototype.render = function () {
+        this.setBreadcrumbNavAttributes();
         this.addEventListener();
     };
+    BreadCrumbBar.prototype.setBreadcrumbNavAttributes = function () {
+        var navElement = this.parent && this.parent.breadCrumbNavElement;
+        if (navElement) {
+            navElement.setAttribute('aria-label', 'Breadcrumb');
+        }
+    };
     BreadCrumbBar.prototype.onPathChange = function () {
         var pathNames = this.parent.pathNames;
         var paths = this.parent.path.split('/');
@@ -73,7 +84,6 @@ var BreadCrumbBar = /** @class */ (function () {
                     addressbarLI.appendChild(icon);
                 }
                 addressbarLI.setAttribute('tabindex', '0');
-                addressbarLI.setAttribute('role', 'link');
                 var pathLabel = pathNames.slice(0, i + 1).join(' / ');
                 addressbarLI.setAttribute('aria-label', pathLabel);
                 if (pathNamesLen - i === 1) {
@@ -81,24 +91,24 @@ var BreadCrumbBar = /** @class */ (function () {
                 }
                 id = '';
                 addressATag = createElement('a', { className: CLS.LIST_TEXT });
-                addressATag.setAttribute('role', 'presentation');
+                addressATag.setAttribute('role', 'link');
                 addressATag.innerText = pathNames[i];
                 addressbarLI.appendChild(addressATag);
                 addressbarUL.appendChild(addressbarLI);
             }
-            var ulElement = this.parent.breadCrumbBarNavigation.querySelector('.e-addressbar-ul');
+            var ulElement = this.parent.breadCrumbNavElement.querySelector('.e-addressbar-ul');
             if (!isNullOrUndefined(ulElement)) {
                 if (!isNullOrUndefined(this.subMenuObj)) {
                     this.subMenuObj.destroy();
                 }
                 remove(ulElement);
             }
-            var searchWrap = this.parent.breadCrumbBarNavigation.querySelector('.e-search-wrap');
+            var searchWrap = this.parent.breadCrumbNavElement.querySelector('.e-search-wrap');
             if (!searchWrap) {
-                this.parent.breadCrumbBarNavigation.insertBefore(addressbarUL, searchWrap);
+                this.parent.breadCrumbNavElement.insertBefore(addressbarUL, searchWrap);
             }
             else {
-                this.parent.breadCrumbBarNavigation.appendChild(addressbarUL);
+                this.parent.breadCrumbNavElement.appendChild(addressbarUL);
             }
             this.updateBreadCrumbBar(addressbarUL);
         }
@@ -106,7 +116,7 @@ var BreadCrumbBar = /** @class */ (function () {
     /* istanbul ignore next */
     BreadCrumbBar.prototype.updateBreadCrumbBar = function (addresBarUL) {
         var liElements = addresBarUL.querySelectorAll('li');
-        var ulElement = this.parent.breadCrumbBarNavigation.querySelector('.e-addressbar-ul');
+        var ulElement = this.parent.breadCrumbNavElement.querySelector('.e-addressbar-ul');
         var style = window.getComputedStyle(ulElement, null);
         var pRight = parseFloat(style.getPropertyValue('padding-right'));
         var pLeft = parseFloat(style.getPropertyValue('padding-left'));
@@ -128,12 +138,12 @@ var BreadCrumbBar = /** @class */ (function () {
         var searchInput = createElement('input', { id: id,
             attrs: { autocomplete: 'off', 'aria-label': getLocaleText(this.parent, 'Search') } });
         searchContainer.appendChild(searchInput);
-        var searchEle = this.parent.breadCrumbBarNavigation.querySelector('.e-search-wrap .e-input');
+        var searchEle = this.parent.breadCrumbNavElement.querySelector('.e-search-wrap .e-input');
         if (isNullOrUndefined(searchEle)) {
-            this.parent.breadCrumbBarNavigation.appendChild(searchContainer);
-            var span = createElement('span', { className: 'e-icons e-fe-search' });
-            EventHandler.add(span, 'click', this.onShowInput, this);
-            searchInput.parentElement.insertBefore(span, searchInput);
+            this.parent.breadCrumbNavElement.appendChild(searchContainer);
+            this.searchIcon = createElement('span', { className: 'e-icons e-fe-search' });
+            EventHandler.add(this.searchIcon, 'click', this.onShowInput, this);
+            searchInput.parentElement.insertBefore(this.searchIcon, searchInput);
             this.searchObj = new TextBox({
                 value: '',
                 showClearButton: true,
@@ -143,11 +153,11 @@ var BreadCrumbBar = /** @class */ (function () {
             });
             this.searchObj.appendTo('#' + this.parent.element.id + CLS.SEARCH_ID);
             this.searchEventBind(this.parent.searchSettings.allowSearchOnTyping);
-            var search = this.searchObj.element.nextElementSibling;
-            EventHandler.add(search, 'mousedown', this.searchChangeHandler.bind(this), this);
-            EventHandler.add(this.searchObj.element, 'keyup', this.onKeyUp.bind(this), this);
+            this.searchSibling = this.searchObj.element.nextElementSibling;
+            EventHandler.add(this.searchSibling, 'mousedown', this.boundSearchChangeHandler, this);
+            EventHandler.add(this.searchObj.element, 'keyup', this.boundOnKeyUp, this);
         }
-        var searchWrap = this.parent.breadCrumbBarNavigation.querySelector('.e-search-wrap');
+        var searchWrap = this.parent.breadCrumbNavElement.querySelector('.e-search-wrap');
         breadCrumbBarWidth = breadCrumbBarWidth - (this.searchWrapWidth ? this.searchWrapWidth : searchWrap.offsetWidth);
         if (liElementsWidth > breadCrumbBarWidth) {
             var i = liElements.length;
@@ -185,10 +195,10 @@ var BreadCrumbBar = /** @class */ (function () {
                     break;
                 }
             }
-            this.parent.breadCrumbBarNavigation.insertBefore(addressbarUL, searchWrap);
+            this.parent.breadCrumbNavElement.insertBefore(addressbarUL, searchWrap);
         }
         else {
-            this.parent.breadCrumbBarNavigation.insertBefore(addresBarUL, searchWrap);
+            this.parent.breadCrumbNavElement.insertBefore(addresBarUL, searchWrap);
         }
     };
     /* istanbul ignore next */
@@ -267,7 +277,7 @@ var BreadCrumbBar = /** @class */ (function () {
                 this.searchWrapWidth = null;
             }
             else {
-                var searchWrap = this.parent.breadCrumbBarNavigation.querySelector('.e-search-wrap');
+                var searchWrap = this.parent.breadCrumbNavElement.querySelector('.e-search-wrap');
                 this.searchWrapWidth = searchWrap.offsetWidth;
                 addClass([this.parent.element], CLS.FILTER);
                 this.searchObj.element.focus();
@@ -368,6 +378,18 @@ var BreadCrumbBar = /** @class */ (function () {
         this.parent.off(events.dropInit, this.onDropInit);
         this.parent.off(events.layoutRefresh, this.onResize);
         this.parent.off(events.dropPath, this.onPathChange);
+        if (this.parent.breadCrumbBarNavigation) {
+            EventHandler.remove(this.parent.breadCrumbBarNavigation, 'click', this.addressPathClickHandler);
+        }
+        if (this.searchIcon) {
+            EventHandler.remove(this.searchIcon, 'click', this.onShowInput);
+        }
+        if (this.searchSibling) {
+            EventHandler.remove(this.searchSibling, 'mousedown', this.boundSearchChangeHandler);
+        }
+        if (this.searchObj && this.searchObj.element) {
+            EventHandler.remove(this.searchObj.element, 'keyup', this.boundOnKeyUp);
+        }
     };
     /* istanbul ignore next */
     BreadCrumbBar.prototype.onDropInit = function (args) {

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

@@ -119,6 +119,7 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     splitterObj: Splitter;
     persistData: boolean;
     breadCrumbBarNavigation: HTMLElement;
+    breadCrumbNavElement: HTMLElement;
     localeObj: L10n;
     uploadObj: Uploader;
     uploadDialogObj: Dialog;
@@ -158,6 +159,8 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     private dragX;
     private dragY;
     private dragSelectedItems;
+    private lastDragEvent;
+    private dragContainer;
     /**
      * Specifies the AJAX settings of the file manager.
      *
@@ -709,6 +712,7 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     private onScrollHandler;
     private onDragStart;
     private onDrag;
+    private onDragScroll;
     private onDragStop;
     private selectItems;
     private onLayoutChange;

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

@@ -289,6 +289,8 @@ var FileManager = /** @class */ (function (_super) {
             id: this.element.id + CLS.BREADCRUMBBAR_ID,
             className: CLS.BREADCRUMBS
         });
+        this.breadCrumbNavElement = this.createElement('nav');
+        this.breadCrumbBarNavigation.appendChild(this.breadCrumbNavElement);
         contentWrap.appendChild(this.breadCrumbBarNavigation);
         var gridWrap = this.createElement('div', {
             id: this.element.id + CLS.GRID_ID
@@ -788,41 +790,74 @@ var FileManager = /** @class */ (function (_super) {
                     return;
                 }
             }
+            var contentElem = this.viewElem.firstChild;
+            var isLargeIcons = this.viewElem.classList.contains('e-large-icons');
+            if (isLargeIcons) {
+                this.dragContainer = (contentElem && contentElem.tagName === 'UL') ? contentElem : this.viewElem;
+            }
+            else {
+                this.dragContainer = this.viewElem.firstChild;
+            }
+            if (!this.dragContainer) {
+                return;
+            }
             event.preventDefault();
-            this.dragX = event.pageX;
-            this.dragY = event.pageY;
+            this.lastDragEvent = event;
+            var ulRect = this.dragContainer.getBoundingClientRect();
+            this.dragX = event.clientX - ulRect.left - this.dragContainer.clientLeft + this.dragContainer.scrollLeft;
+            this.dragY = event.clientY - ulRect.top - this.dragContainer.clientTop + this.dragContainer.scrollTop;
             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;'
+                    className: 'e-filemanager e-drag-select'
+                });
+                setStyleAttribute(this.dragSelectElement, {
+                    position: 'absolute',
+                    left: this.dragX + 'px',
+                    top: this.dragY + 'px',
+                    width: '0px',
+                    height: '0px',
+                    pointerEvents: 'none'
                 });
-                document.body.append(this.dragSelectElement);
+                this.dragContainer.appendChild(this.dragSelectElement);
+                this.dragContainer.style.position = 'relative';
             }
+            EventHandler.add(this.dragContainer, 'scroll', this.onDragScroll, this);
             EventHandler.add(document, 'mouseup', this.onDragStop, this);
-            EventHandler.add(this.viewElem, 'mousemove', this.onDrag, this);
+            EventHandler.add(this.dragContainer, 'mousemove', this.onDrag, this);
             EventHandler.add(this.dragSelectElement, 'mousemove', this.onDrag, this);
         }
     };
     FileManager.prototype.onDrag = function (event) {
+        this.lastDragEvent = event;
         event.stopPropagation();
-        if (this.dragSelectElement) {
-            var diffX = event.pageX - this.dragX;
-            var diffY = event.pageY - this.dragY;
+        if (this.dragSelectElement && this.dragContainer) {
+            var ulRect = this.dragContainer.getBoundingClientRect();
+            var currentX = event.clientX - ulRect.left - this.dragContainer.clientLeft + this.dragContainer.scrollLeft;
+            var currentY = event.clientY - ulRect.top - this.dragContainer.clientTop + this.dragContainer.scrollTop;
             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'
+                left: Math.min(this.dragX, currentX) + 'px',
+                top: Math.min(this.dragY, currentY) + 'px',
+                height: Math.abs(currentY - this.dragY) + 'px',
+                width: Math.abs(currentX - this.dragX) + 'px'
             });
             this.selectItems();
         }
-        else {
-            EventHandler.remove(this.viewElem, 'mousemove', this.onDrag);
+        else if (this.dragContainer) {
+            EventHandler.remove(this.dragContainer, 'mousemove', this.onDrag);
         }
     };
+    FileManager.prototype.onDragScroll = function () {
+        if (!this.dragSelectElement || !this.lastDragEvent) {
+            return;
+        }
+        this.onDrag(this.lastDragEvent);
+    };
     FileManager.prototype.onDragStop = function () {
-        if (this.viewElem) {
-            EventHandler.remove(document, 'mouseup', this.onDragStop);
-            EventHandler.remove(this.viewElem, 'mousemove', this.onDrag);
+        EventHandler.remove(document, 'mouseup', this.onDragStop);
+        if (this.dragContainer) {
+            EventHandler.remove(this.dragContainer, 'mousemove', this.onDrag);
+            EventHandler.remove(this.dragContainer, 'scroll', this.onDragScroll);
         }
         if (this.dragSelectElement) {
             EventHandler.remove(this.dragSelectElement, 'mousemove', this.onDrag);
@@ -833,6 +868,7 @@ var FileManager = /** @class */ (function (_super) {
             detach(this.dragSelectElement);
             this.dragSelectElement = null;
         }
+        this.dragContainer = null;
     };
     FileManager.prototype.selectItems = function () {
         var dragRect = this.dragSelectElement.getBoundingClientRect();
@@ -1123,6 +1159,7 @@ var FileManager = /** @class */ (function (_super) {
         removeClass([this.element], [CLS.RTL, CLS.MOBILE, CLS.CHECK_SELECT]);
         this.element.innerHTML = '';
         this.breadCrumbBarNavigation = null;
+        this.breadCrumbNavElement = null;
         this.activeElements = null;
         this.virtualDragElement = null;
         this.visitedItem = null;

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

@@ -822,6 +822,7 @@ export interface IFileManager extends Component<HTMLElement> {
     extDialogObj: Dialog;
     splitterObj: Splitter;
     breadCrumbBarNavigation: HTMLElement;
+    breadCrumbNavElement: HTMLElement;
     searchSettings: SearchSettingsModel;
     activeElements: Element[];
     contextMenuSettings: ContextMenuSettingsModel;

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

@@ -520,9 +520,11 @@ var LargeIconsView = /** @class */ (function () {
                     }
                 }
             }
-            var targetItem = this.getFocusedItem() || mappedItem || this.parent.visitedItem || this.getFirstItem();
-            if (targetItem) {
-                this.addFocus(targetItem);
+            if (this.parent.activeModule !== 'navigationpane') {
+                var targetItem = this.getFocusedItem() || mappedItem || this.parent.visitedItem || this.getFirstItem();
+                if (targetItem) {
+                    this.addFocus(targetItem);
+                }
             }
         }
     };
@@ -760,13 +762,15 @@ var LargeIconsView = /** @class */ (function () {
         }
     };
     LargeIconsView.prototype.destroy = function () {
-        if (this.parent.isDestroyed) {
-            return;
-        }
         this.removeEventListener();
         if (this.listObj) {
             this.unWireEvents();
         }
+        if (this.itemList) {
+            this.itemList.forEach(function (el) {
+                el.ondragstart = null;
+            });
+        }
         this.startItem = null;
         this.listElements = null;
     };

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

@@ -158,10 +158,16 @@ var ContextMenu = /** @class */ (function () {
             }
             else if (!isNOU(closest(target, 'tr.e-row'))) {
                 uid = this.targetElement.getAttribute('data-uid');
-                data = this.parent.detailsviewModule.gridObj.getRowObjectFromUID(uid).data;
-                if (isNOU(this.targetElement.getAttribute('aria-selected'))) {
-                    /* istanbul ignore next */
-                    this.parent.detailsviewModule.gridObj.selectRows([parseInt(this.targetElement.getAttribute('aria-rowindex'), 10) - 1]);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var gridObj = this.parent.detailsviewModule && this.parent.detailsviewModule.gridObj;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var rowObj = (!isNOU(uid) && !isNOU(gridObj)) ? gridObj.getRowObjectFromUID(uid) : null;
+                if (!isNOU(rowObj)) {
+                    data = rowObj.data;
+                    if (isNOU(this.targetElement.getAttribute('aria-selected'))) {
+                        /* istanbul ignore next */
+                        gridObj.selectRows([parseInt(this.targetElement.getAttribute('aria-rowindex'), 10) - 1]);
+                    }
                 }
                 selected = true;
                 /* istanbul ignore next */
@@ -357,10 +363,12 @@ var ContextMenu = /** @class */ (function () {
         this.menuType = 'layout';
         this.contextMenu.items = this.getItemData(this.parent.contextMenuSettings.layout.map(function (item) { return item.trim(); }));
         this.contextMenu.dataBind();
-        if (!this.parent.allowMultiSelection || ((this.parent.view === 'LargeIcons' &&
-            (closest(target, '#' + this.parent.element.id + CLS.LARGEICON_ID).getElementsByClassName(CLS.EMPTY).length !== 0))
-            || (this.parent.view === 'Details' &&
-                (closest(target, '#' + this.parent.element.id + CLS.GRID_ID).getElementsByClassName(CLS.EMPTY).length !== 0)))) {
+        var largeIconsEle = closest(target, '#' + this.parent.element.id + CLS.LARGEICON_ID);
+        var detailsViewEle = closest(target, '#' + this.parent.element.id + CLS.GRID_ID);
+        if (!this.parent.allowMultiSelection || ((this.parent.view === 'LargeIcons' && !isNOU(largeIconsEle) &&
+            (largeIconsEle.getElementsByClassName(CLS.EMPTY).length !== 0))
+            || (this.parent.view === 'Details' && !isNOU(detailsViewEle) &&
+                (detailsViewEle.getElementsByClassName(CLS.EMPTY).length !== 0)))) {
             this.disabledItems.push('SelectAll');
         }
         else {