@syncfusion/ej2-filemanager 32.2.7 → 33.1.45

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.7
+*  version : 33.1.45
 *  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": "32.2.7",
+  "version": "33.1.45",
   "description": "Essential JS 2 FileManager Component",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,16 +8,16 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-filemanager.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.2.6",
-    "@syncfusion/ej2-buttons": "~32.2.7",
-    "@syncfusion/ej2-data": "~32.2.3",
-    "@syncfusion/ej2-grids": "~32.2.7",
-    "@syncfusion/ej2-inputs": "~32.2.7",
-    "@syncfusion/ej2-layouts": "~32.2.3",
-    "@syncfusion/ej2-lists": "~32.2.7",
-    "@syncfusion/ej2-navigations": "~32.2.7",
-    "@syncfusion/ej2-popups": "~32.2.7",
-    "@syncfusion/ej2-splitbuttons": "~32.2.7"
+    "@syncfusion/ej2-base": "~33.1.45",
+    "@syncfusion/ej2-buttons": "~33.1.44",
+    "@syncfusion/ej2-data": "~33.1.45",
+    "@syncfusion/ej2-grids": "~33.1.45",
+    "@syncfusion/ej2-inputs": "~33.1.44",
+    "@syncfusion/ej2-layouts": "~33.1.44",
+    "@syncfusion/ej2-lists": "~33.1.44",
+    "@syncfusion/ej2-navigations": "~33.1.45",
+    "@syncfusion/ej2-popups": "~33.1.44",
+    "@syncfusion/ej2-splitbuttons": "~33.1.44"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -285,6 +285,7 @@ var Toolbar = /** @class */ (function () {
         }
     };
     Toolbar.prototype.toolbarItemData = function (data) {
+        var _this = this;
         var items = [];
         var mode = 'Both';
         if (this.parent.isMobile) {
@@ -384,6 +385,13 @@ var Toolbar = /** @class */ (function () {
                 items.push(item);
             }
         }
+        for (var _i = 0, _a = items; _i < _a.length; _i++) {
+            var item = _a[_i];
+            if (typeof item === 'object' && item !== null && typeof item.template === 'string') {
+                var template = item.template;
+                item.template = template.replace(/>((?:Upload|SortBy|View|Refresh|NewFolder|Cut|Copy|Paste|Delete|Rename|Download|SelectAll|Details))</g, function (_match, key) { return '>' + getLocaleText(_this.parent, key) + '<'; });
+            }
+        }
         return items;
     };
     Toolbar.prototype.getItemModel = function (propItem) {

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

@@ -890,4 +890,5 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * @returns {void}
      */
     private setRtl;
+    restoreFocus(): void;
 }

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

@@ -1413,6 +1413,20 @@ var FileManager = /** @class */ (function (_super) {
             this.uploadObj.enableRtl = rtl;
         }
     };
+    FileManager.prototype.restoreFocus = function () {
+        if (this.activeModule === 'detailsview') {
+            if (this.detailsviewModule.gridObj) {
+                this.detailsviewModule.addFocus(this.detailsviewModule.gridObj.selectedRowIndex > -1
+                    ? this.detailsviewModule.gridObj.selectedRowIndex : 0);
+            }
+            return;
+        }
+        var targetItem = this.largeiconsviewModule.getFocusedItem()
+            || this.visitedItem || this.largeiconsviewModule.getFirstItem();
+        if (targetItem && this.largeiconsviewModule) {
+            this.largeiconsviewModule.addFocus(targetItem);
+        }
+    };
     var FileManager_1;
     __decorate([
         Complex({}, AjaxSettings)

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

@@ -926,6 +926,7 @@ export interface IFileManager extends Component<HTMLElement> {
     enableHtmlSanitizer: boolean;
     refreshLayout(): void;
     traverseBackward(): void;
+    restoreFocus(): void;
     isMac: boolean;
     oldView: string;
     oldPath: string;

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

@@ -74,6 +74,7 @@ export declare class DetailsView {
     private onCreateEnd;
     private onRenameInit;
     private onSelectedData;
+    private nextFocusIndex;
     private onDeleteInit;
     private onDeleteEnd;
     private onRefreshEnd;
@@ -138,7 +139,15 @@ export declare class DetailsView {
     private checkRowsKey;
     private InnerItems;
     private shiftSelectFocusItem;
-    private addFocus;
+    /**
+     * Adds focus to the specified grid row.
+     *
+     * @param {number | null} item - The row index of the item to focus.
+     * If null or invalid, no focus is applied.
+     * @returns {void}
+     * @hidden
+     */
+    addFocus(item: number | null): void;
     private addHeaderFocus;
     private getFocusedItem;
     private isSelected;

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

@@ -42,6 +42,7 @@ var DetailsView = /** @class */ (function () {
         this.isMultiSelect = false;
         this.pasteOperation = false;
         this.uploadOperation = false;
+        this.nextFocusIndex = null;
         Grid.Inject(Resize, ContextMenu, Sort, VirtualScroll);
         this.parent = parent;
         this.element = select('#' + this.parent.element.id + CLS.GRID_ID, this.parent.element);
@@ -498,6 +499,13 @@ var DetailsView = /** @class */ (function () {
                 sortIconElement.classList.remove('e-icon-ascending', 'e-ascending', 'e-icon-descending', 'e-descending');
             }
         }
+        if (typeof this.nextFocusIndex === 'number') {
+            var rowCount = this.gridObj.getRows().length;
+            if (rowCount > 0) {
+                this.addFocus(this.nextFocusIndex >= rowCount ? rowCount : this.nextFocusIndex);
+            }
+            this.nextFocusIndex = null;
+        }
     };
     DetailsView.prototype.selectRecords = function (nodes) {
         var gridRecords = this.gridObj.getCurrentViewRecords();
@@ -632,6 +640,21 @@ var DetailsView = /** @class */ (function () {
             showSpinner(this.parent.element);
             this.parent.setProperties({ selectedItems: [] }, true);
             this.gridObj.dataSource = getSortedData(this.parent, args.files);
+            if (this.parent._lastFocused && this.parent.pathId && this.parent.pathId.length) {
+                var key = this.parent.pathId[this.parent.pathId.length - 1];
+                // eslint-disable-next-line security/detect-object-injection
+                var mappedId = this.parent._lastFocused[key];
+                if (mappedId) {
+                    var gridItems = getSortedData(this.parent, args.files);
+                    for (var i = 0; i < gridItems.length; i++) {
+                        // eslint-disable-next-line security/detect-object-injection
+                        if (getValue('_fm_id', gridItems[i]) === mappedId || (this.parent.hasId && getValue('id', gridItems[i]) === mappedId) || getValue('name', gridItems[i]) === mappedId) {
+                            this.nextFocusIndex = i;
+                            break;
+                        }
+                    }
+                }
+            }
             this.gridObj.freezeRefresh();
             if (this.parent.isReact) {
                 this.gridObj.on('reactTemplateRender', this.reactTemplateRender, this);
@@ -691,6 +714,7 @@ var DetailsView = /** @class */ (function () {
         }
         var eventArgs = { cancel: false, fileDetails: data, module: 'DetailsView' };
         this.parent.trigger('fileOpen', eventArgs, function (fileOpenArgs) {
+            var _a;
             if (!fileOpenArgs.cancel) {
                 var name_2 = getValue('name', data);
                 if (getValue('isFile', data)) {
@@ -703,6 +727,9 @@ var DetailsView = /** @class */ (function () {
                 else {
                     var val = _this.parent.breadcrumbbarModule.searchObj.element.value;
                     if (val === '' && !_this.parent.isFiltered) {
+                        if (_this.parent.pathId && _this.parent.pathId.length) {
+                            _this.parent._lastFocused = Object.assign(_this.parent._lastFocused || {}, (_a = {}, _a[_this.parent.pathId[_this.parent.pathId.length - 1]] = getValue('_fm_id', data) || getValue('id', data) || name_2, _a));
+                        }
                         var id = getValue('id', data);
                         _this.parent.oldPath = _this.parent.path;
                         var newPath = _this.parent.path + (isNOU(id) ? name_2 : id) + '/';
@@ -823,6 +850,8 @@ var DetailsView = /** @class */ (function () {
     };
     DetailsView.prototype.onDeleteInit = function () {
         if (this.parent.activeModule === 'detailsview') {
+            var selectedIndex = this.gridObj.selectedRowIndex;
+            this.nextFocusIndex = selectedIndex >= 0 ? selectedIndex : this.nextFocusIndex;
             Delete(this.parent, this.parent.selectedItems, this.parent.path, 'delete');
         }
     };
@@ -1774,6 +1803,14 @@ var DetailsView = /** @class */ (function () {
         }
         this.startIndex = this.gridObj.selectedRowIndex;
     };
+    /**
+     * Adds focus to the specified grid row.
+     *
+     * @param {number | null} item - The row index of the item to focus.
+     * If null or invalid, no focus is applied.
+     * @returns {void}
+     * @hidden
+     */
     DetailsView.prototype.addFocus = function (item) {
         var fItem = this.getFocusedItem();
         var itemElement = this.gridObj.getRowByIndex(item);

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

@@ -63,6 +63,7 @@ export declare class LargeIconsView {
     private onFinalizeEnd;
     private onCreateEnd;
     private onSelectedData;
+    private nextFocusIndex;
     private onDeleteInit;
     private onDeleteEnd;
     private onRefreshEnd;
@@ -115,9 +116,23 @@ export declare class LargeIconsView {
     private performRename;
     private updateRenameData;
     private getVisitedItem;
-    private getFocusedItem;
+    /**
+     *
+     * Gets the currently focused item element in the large icon view.
+     *
+     * @returns {Element} - The DOM element of the focused item, or null if none is focused.
+     * @hidden
+     */
+    getFocusedItem(): Element;
     private getActiveItem;
-    private getFirstItem;
+    /**
+     *
+     * Gets the first item element in the large icon view.
+     *
+     * @returns {Element} - The DOM element representing the first item in the list.
+     * @hidden
+     */
+    getFirstItem(): Element;
     private getLastItem;
     private navigateItem;
     private navigateDown;
@@ -135,7 +150,15 @@ export declare class LargeIconsView {
     private addActive;
     private removeActive;
     private getDataName;
-    private addFocus;
+    /**
+     *
+     * Adds focus to the specified item element in the large icon view.
+     *
+     * @param {Element} item - The DOM element representing the item to focus.
+     * @returns {void} - If null or invalid, no focus is applied.
+     * @hidden
+     */
+    addFocus(item: Element): void;
     private checkState;
     private clearSelect;
     private resizeHandler;

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

@@ -37,6 +37,7 @@ var LargeIconsView = /** @class */ (function () {
         this.isInteracted = true;
         this.imageEventArgsMap = new Map();
         this.imageUrlCache = new Map();
+        this.nextFocusIndex = null;
         this.parent = parent;
         this.element = select('#' + this.parent.element.id + CLS.LARGEICON_ID, this.parent.element);
         addClass([this.element], CLS.LARGE_ICONS);
@@ -445,6 +446,13 @@ var LargeIconsView = /** @class */ (function () {
     };
     LargeIconsView.prototype.onDeleteInit = function () {
         if (this.parent.activeModule === 'largeiconsview') {
+            var activeItem = this.getFocusedItem() || this.getActiveItem();
+            if (activeItem) {
+                var index = this.itemList.indexOf(activeItem);
+                if (index !== -1) {
+                    this.nextFocusIndex = index;
+                }
+            }
             Delete(this.parent, this.parent.selectedItems, this.parent.path, 'delete');
         }
     };
@@ -455,6 +463,16 @@ var LargeIconsView = /** @class */ (function () {
         }
         this.onLayoutChange(args);
         this.parent.setProperties({ selectedItems: [] }, true);
+        if (typeof this.nextFocusIndex === 'number') {
+            var items = this.element.querySelectorAll('li.e-list-item');
+            if (items.length > 0) {
+                var focusIndex = this.nextFocusIndex >= items.length
+                    ? (this.nextFocusIndex === items.length ? items.length - 1 : 0) : this.nextFocusIndex;
+                // eslint-disable-next-line security/detect-object-injection
+                this.addFocus(items[focusIndex]);
+            }
+            this.nextFocusIndex = null;
+        }
         this.clearSelect();
     };
     LargeIconsView.prototype.onRefreshEnd = function (args) {
@@ -482,6 +500,30 @@ var LargeIconsView = /** @class */ (function () {
                 this.clearSelect();
                 this.addSelection(this.parent.renamedItem);
             }
+            var mappedItem = null;
+            if (this.parent._lastFocused && this.parent.pathId && this.parent.pathId.length && this.items && this.itemList) {
+                var key = this.parent.pathId[this.parent.pathId.length - 1];
+                // eslint-disable-next-line security/detect-object-injection
+                var mappedId = this.parent._lastFocused[key];
+                if (mappedId) {
+                    var foundIndex = -1;
+                    for (var i = 0; i < this.items.length; i++) {
+                        // eslint-disable-next-line security/detect-object-injection
+                        if (getValue('_fm_id', this.items[i]) === mappedId || (this.parent.hasId && getValue('id', this.items[i]) === mappedId) || getValue('name', this.items[i]) === mappedId) {
+                            foundIndex = i;
+                            break;
+                        }
+                    }
+                    // eslint-disable-next-line security/detect-object-injection
+                    if (foundIndex > -1 && this.itemList[foundIndex]) {
+                        mappedItem = this.itemList[foundIndex];
+                    }
+                }
+            }
+            var targetItem = this.getFocusedItem() || mappedItem || this.parent.visitedItem || this.getFirstItem();
+            if (targetItem) {
+                this.addFocus(targetItem);
+            }
         }
     };
     LargeIconsView.prototype.onOpenInit = function (args) {
@@ -937,11 +979,15 @@ var LargeIconsView = /** @class */ (function () {
             }
             var eventArgs = { cancel: false, fileDetails: details_1, module: 'LargeIconsView' };
             this.parent.trigger('fileOpen', eventArgs, function (fileOpenArgs) {
+                var _a;
                 if (!fileOpenArgs.cancel) {
                     var text = getValue('name', details_1);
                     if (!_this.parent.isFile) {
                         var val = _this.parent.breadcrumbbarModule.searchObj.element.value;
                         if (val === '' && !_this.parent.isFiltered) {
+                            if (_this.parent.pathId && _this.parent.pathId.length) {
+                                _this.parent._lastFocused = Object.assign(_this.parent._lastFocused || {}, (_a = {}, _a[_this.parent.pathId[_this.parent.pathId.length - 1]] = getValue('_fm_id', details_1) || getValue('id', details_1) || text, _a));
+                            }
                             var id = getValue('id', details_1);
                             _this.parent.oldPath = _this.parent.path;
                             var newPath = _this.parent.path + (isNOU(id) ? text : id) + '/';
@@ -1184,12 +1230,26 @@ var LargeIconsView = /** @class */ (function () {
         var indexes = this.getIndexes([item], this.parent.hasId);
         return this.itemList[indexes[0]];
     };
+    /**
+     *
+     * Gets the currently focused item element in the large icon view.
+     *
+     * @returns {Element} - The DOM element of the focused item, or null if none is focused.
+     * @hidden
+     */
     LargeIconsView.prototype.getFocusedItem = function () {
         return select('.' + CLS.LIST_ITEM + '.' + CLS.FOCUS, this.element);
     };
     LargeIconsView.prototype.getActiveItem = function () {
         return select('.' + CLS.LIST_ITEM + '.' + CLS.ACTIVE, this.element);
     };
+    /**
+     *
+     * Gets the first item element in the large icon view.
+     *
+     * @returns {Element} - The DOM element representing the first item in the list.
+     * @hidden
+     */
     LargeIconsView.prototype.getFirstItem = function () {
         return this.itemList[0];
     };
@@ -1394,6 +1454,14 @@ var LargeIconsView = /** @class */ (function () {
         var data = this.getItemObject(item);
         return getItemName(this.parent, data);
     };
+    /**
+     *
+     * Adds focus to the specified item element in the large icon view.
+     *
+     * @param {Element} item - The DOM element representing the item to focus.
+     * @returns {void} - If null or invalid, no focus is applied.
+     * @hidden
+     */
     LargeIconsView.prototype.addFocus = function (item) {
         this.element.setAttribute('tabindex', '-1');
         var fItem = this.getFocusedItem();

package/src/file-manager/models/default-locale.js

@@ -47,8 +47,8 @@ export var defaultLocale = {
     'None': 'None',
     'View-LargeIcons': 'Large icons',
     'View-Details': 'Details',
-    'Upload-File': 'File',
-    'Upload-Folder': 'Folder',
+    'File': 'File',
+    'Folder': 'Folder',
     'Search': 'Search',
     'Button-Ok': 'OK',
     'Button-Cancel': 'Cancel',

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

@@ -90,6 +90,9 @@ var ContextMenu = /** @class */ (function () {
                 return;
             }
         });
+        if (!this.isMenuItemClicked && this.menuTarget) {
+            this.parent.restoreFocus();
+        }
         this.menuTarget = null;
         if (!this.isMenuItemClicked && this.parent.pathId.length > 1 && this.parent.activeModule === 'navigationpane') {
             this.parent.pathId.pop();
@@ -611,11 +614,11 @@ var ContextMenu = /** @class */ (function () {
                         id: itemId, text: itemText, iconCss: CLS.ICON_UPLOAD,
                         items: [
                             {
-                                id: this.getMenuId('folderupload'), text: getLocaleText(this.parent, 'Upload-Folder'),
+                                id: this.getMenuId('folderupload'), text: getLocaleText(this.parent, 'Folder'),
                                 iconCss: !this.parent.uploadObj.directoryUpload ? null : CLS.TB_OPTION_TICK
                             },
                             {
-                                id: this.getMenuId('fileupload'), text: getLocaleText(this.parent, 'Upload-File'),
+                                id: this.getMenuId('fileupload'), text: getLocaleText(this.parent, 'File'),
                                 iconCss: this.parent.uploadObj.directoryUpload ? null : CLS.TB_OPTION_TICK
                             }
                         ]

package/src/file-manager/pop-up/dialog.js

@@ -165,6 +165,9 @@ function triggerPopupOpen(parent, dlgModule, dialogName) {
 function triggerPopupClose(parent, dlgModule, dialogName) {
     var args = { popupModule: dlgModule, element: dlgModule.element, popupName: dialogName };
     parent.trigger('popupClose', args);
+    if (dialogName !== 'Duplicate Items') {
+        parent.restoreFocus();
+    }
 }
 /**
  *

package/styles/bootstrap4-lite.css

@@ -1053,11 +1053,12 @@ ejs-filemanager {
   background: #fff;
 }
 .e-filemanager .e-grid td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
-  color: #fff;
+  color: #212529;
 }
 .e-filemanager .e-grid td.e-active {
   background-color: #007bff;
   color: #fff;
+  background-color: #ced4da;
 }
 .e-filemanager .e-grid .e-checkbox-wrapper .e-icons.e-check {
   background-color: #fff;
@@ -1070,6 +1071,9 @@ ejs-filemanager {
 .e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
+.e-filemanager .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
+  color: #212529;
+}
 .e-filemanager .e-large-icons .e-list-img {
   border-color: #dee2e6;
 }

package/styles/bootstrap4.css

@@ -1053,11 +1053,12 @@ ejs-filemanager {
   background: #fff;
 }
 .e-filemanager .e-grid td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
-  color: #fff;
+  color: #212529;
 }
 .e-filemanager .e-grid td.e-active {
   background-color: #007bff;
   color: #fff;
+  background-color: #ced4da;
 }
 .e-filemanager .e-grid .e-checkbox-wrapper .e-icons.e-check {
   background-color: #fff;
@@ -1070,6 +1071,9 @@ ejs-filemanager {
 .e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
+.e-filemanager .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
+  color: #212529;
+}
 .e-filemanager .e-large-icons .e-list-img {
   border-color: #dee2e6;
 }

package/styles/bootstrap5-dark-lite.css

@@ -1061,6 +1061,7 @@ ejs-filemanager {
 .e-filemanager .e-grid td.e-active {
   background-color: #0d6efd;
   color: #fff;
+  background-color: rgb(60.2918918919, 67.6, 74.9081081081);
 }
 .e-filemanager .e-grid .e-checkbox-wrapper .e-icons.e-check {
   background-color: #fff;
@@ -1073,6 +1074,9 @@ ejs-filemanager {
 .e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
+.e-filemanager .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
+  color: #e9ecef;
+}
 .e-filemanager .e-large-icons .e-list-img {
   border-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }

package/styles/bootstrap5-dark.css

@@ -1061,6 +1061,7 @@ ejs-filemanager {
 .e-filemanager .e-grid td.e-active {
   background-color: #0d6efd;
   color: #fff;
+  background-color: rgb(60.2918918919, 67.6, 74.9081081081);
 }
 .e-filemanager .e-grid .e-checkbox-wrapper .e-icons.e-check {
   background-color: #fff;
@@ -1073,6 +1074,9 @@ ejs-filemanager {
 .e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
+.e-filemanager .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
+  color: #e9ecef;
+}
 .e-filemanager .e-large-icons .e-list-img {
   border-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }

package/styles/bootstrap5-lite.css

@@ -1056,11 +1056,12 @@ ejs-filemanager {
   color: #495057;
 }
 .e-filemanager .e-grid td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
-  color: #fff;
+  color: #212529;
 }
 .e-filemanager .e-grid td.e-active {
   background-color: #0d6efd;
   color: #fff;
+  background-color: rgb(230.15, 233.7, 237.25);
 }
 .e-filemanager .e-grid .e-checkbox-wrapper .e-icons.e-check {
   background-color: #fff;
@@ -1073,6 +1074,9 @@ ejs-filemanager {
 .e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
+.e-filemanager .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
+  color: #343a40;
+}
 .e-filemanager .e-large-icons .e-list-img {
   border-color: #dee2e6;
 }

package/styles/bootstrap5.css

@@ -1056,11 +1056,12 @@ ejs-filemanager {
   color: #495057;
 }
 .e-filemanager .e-grid td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
-  color: #fff;
+  color: #212529;
 }
 .e-filemanager .e-grid td.e-active {
   background-color: #0d6efd;
   color: #fff;
+  background-color: rgb(230.15, 233.7, 237.25);
 }
 .e-filemanager .e-grid .e-checkbox-wrapper .e-icons.e-check {
   background-color: #fff;
@@ -1073,6 +1074,9 @@ ejs-filemanager {
 .e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
+.e-filemanager .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
+  color: #343a40;
+}
 .e-filemanager .e-large-icons .e-list-img {
   border-color: #dee2e6;
 }

package/styles/file-manager/_bootstrap4-definition.scss

@@ -24,6 +24,9 @@ $fe-text-color: $gray-900 !default;
 $fe-tb-db-sep-color: $gray-200 !default;
 $fe-active-border-color: $primary !default;
 $fe-active-bg-color: $primary !default;
+$fe-grid-active-bg-color: $gray-400 !default;
+$fe-grid-active-font-color: $gray-900 !default;
+$fe-selected-hover-font-color: $gray-900 !default;
 $fe-active-font-color: $primary-font !default;
 $fe-hover-border-color: color.adjust($gray-100, $lightness: -2%) !default;
 $fe-hover-bg-color: color.adjust($gray-100, $lightness: -2%) !default;

package/styles/file-manager/_bootstrap5-dark-definition.scss

@@ -290,6 +290,9 @@ $fe-active-border-color: $content-bg-color-selected !default;
 $fe-tb-active-color: $secondary-text-color !default;
 $fe-active-bg-color: $content-bg-color-selected !default;
 $fe-active-font-color: $secondary-text-color !default;
+$fe-grid-active-bg-color: $table-bg-color-selected !default;
+$fe-grid-active-font-color: $table-text-color-selected !default;
+$fe-selected-hover-font-color: $content-text-color-alt1 !default;
 $fe-hover-border-color: $content-bg-color-hover !default;
 $fe-hover-bg-color: $content-bg-color-hover !default;
 $fe-ah-border-color: $content-bg-color-selected !default;

package/styles/file-manager/_bootstrap5-definition.scss

@@ -290,6 +290,9 @@ $fe-active-border-color: $content-bg-color-selected !default;
 $fe-tb-active-color: $secondary-text-color !default;
 $fe-active-bg-color: $content-bg-color-selected !default;
 $fe-active-font-color: $secondary-text-color !default;
+$fe-grid-active-bg-color: $table-bg-color-selected !default;
+$fe-grid-active-font-color: $table-text-color-selected !default;
+$fe-selected-hover-font-color: $content-text-color-alt1 !default;
 $fe-hover-border-color: $content-bg-color-hover !default;
 $fe-hover-bg-color: $content-bg-color-hover !default;
 $fe-ah-border-color: $content-bg-color-selected !default;

package/styles/file-manager/_fluent2-definition.scss

@@ -25,6 +25,7 @@ $fe-label-color: $content-text-color-alt2 !default;
 $fe-text-color: $content-text-color !default;
 $fe-active-border-color: $content-bg-color-selected !default;
 $fe-active-bg-color: $content-bg-color-selected !default;
+$fe-grid-active-bg-color: $table-bg-color-selected !default;
 $fe-active-font-color: $content-text-color !default;
 $fe-hover-border-color: $content-bg-color-hover !default;
 $fe-hover-bg-color: $content-bg-color-hover !default;

package/styles/file-manager/_theme.scss

@@ -235,7 +235,7 @@
 
       @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap4' {
         td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
-          color: $fe-active-font-color;
+          color: $fe-grid-active-font-color;
         }
       }
 
@@ -244,6 +244,9 @@
         @if $fm-skin-name != 'material-dark' {
           color: $fe-active-font-color;
         }
+        @if $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'fluent2'{
+          background-color: $fe-grid-active-bg-color;
+        }
       }
 
       tr:hover td.e-active {
@@ -278,6 +281,12 @@
       &.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         background-color: transparent;
       }
+
+      &.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
+        @if $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'bootstrap4' {
+          color: $fe-selected-hover-font-color;
+        }
+      }
     }
 
     .e-large-icons {