@topconsultnpm/sdkui-react-beta 6.11.113 → 6.11.116

package/lib/components/base/TMFileManager.d.ts

@@ -1,12 +1,3 @@
-export interface TMWGsDraftThumbViewItemProps {
-    item: FileItem;
-    isSelected: boolean;
-    showId: boolean;
-    onClick: (id: number) => void;
-    onDoubleClick?: (file: FileItem) => void;
-    handleSelectedFiles?: (fileItems: Array<FileItem>) => void;
-    handleFocusedFile?: (fileItem: FileItem | undefined) => void;
-}
 export interface TMFileManagerContextMenuItem {
     text: string;
     icon: string;
@@ -51,6 +42,8 @@ export declare enum TMFileManagerPageSize {
     Large = 100
 }
 export interface TMFileManagerProps {
+    /** Session User ID */
+    userID?: number;
     /** Determines the view mode of the file manager (Can be either 'thumbnails' or 'details') */
     viewMode?: 'thumbnails' | 'details';
     /** Represents the file system tree structure */
@@ -76,8 +69,6 @@ export interface TMFileManagerProps {
     onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;
     /** Callback for handling drop file */
     handleDropFileCallback?: (files: Array<File>) => void;
-    /** JSX element representing the thumbnail view item for a file or folder */
-    thumbnailsViewItemComponent?: (props: TMWGsDraftThumbViewItemProps) => JSX.Element;
     /** Number of total founded */
     dcmtsFound?: number;
 }

package/lib/components/base/TMFileManager.js

@@ -11,6 +11,7 @@ import TMDataGrid from './TMDataGrid';
 import { TMSplitterLayout } from './TMLayout';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
 import TMToolbarCard from './TMToolbarCard';
+import { TMFileManagerThumbnailItems } from './TMFileManagerThumbnailItems';
 export var TMFileManagerPageSize;
 (function (TMFileManagerPageSize) {
     TMFileManagerPageSize[TMFileManagerPageSize["Small"] = 30] = "Small";
@@ -19,7 +20,7 @@ export var TMFileManagerPageSize;
 })(TMFileManagerPageSize || (TMFileManagerPageSize = {}));
 const TMFileManager = (props) => {
     // Destructure the treeFs prop to get the root file system
-    const { treeFs, selectedFolder, selectedFiles, focusedFile, handleSelectedFiles, handleFocusedFile, handleSelectedFolder, viewMode: initialViewMode, contextMenuItems, onDoubleClickHandler, thumbnailsViewItemComponent, handleDropFileCallback, dcmtsFound } = props;
+    const { treeFs, selectedFolder, selectedFiles, focusedFile, userID, handleSelectedFiles, handleFocusedFile, handleSelectedFolder, viewMode: initialViewMode, contextMenuItems, onDoubleClickHandler, handleDropFileCallback, dcmtsFound } = props;
     // State to manage the current view mode ('thumbnails' or 'details')
     const [viewMode, setViewMode] = useState(initialViewMode ?? 'thumbnails');
     // State to store the search text entered by the user
@@ -204,11 +205,20 @@ const TMFileManager = (props) => {
                             display: "flex",
                             flexGrow: 1,
                             height: "calc(100% - 40px)"
-                        }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuDesktop', dataSource: menuItems.folder, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { items: filteredFileItems, selectedFiles: selectedFiles, contextMenuItems: menuItems.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, thumbnailsViewItemComponent: thumbnailsViewItemComponent }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: menuItems.file, selectedFiles: selectedFiles, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileContextMenuDesktop', dataSource: menuItems.file, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }, "TMWGs-panels-treeView") })] }), isMobile && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsxs(TMToolbarCard, { onBack: openDraftList ? onBackCallback : undefined, title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, children: [_jsxs("div", { style: { display: openDraftList ? 'none' : 'block', transition: 'opacity 0.3s ease-in-out' }, children: [_jsx(TreeView, { style: { marginTop: "10px", }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuMobile', dataSource: menuItems.folder, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%", display: openDraftList ? 'block' : 'none', transition: 'opacity 0.3s ease-in-out' }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { items: filteredFileItems, selectedFiles: selectedFiles, contextMenuItems: contextMenuItems?.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, thumbnailsViewItemComponent: thumbnailsViewItemComponent }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: contextMenuItems?.file, selectedFiles: selectedFiles, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: menuItems.file, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }) })] });
+                        }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuDesktop', dataSource: menuItems.folder, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, contextMenuItems: menuItems.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: menuItems.file, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileContextMenuDesktop', dataSource: menuItems.file, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }, "TMWGs-panels-treeView") })] }), isMobile && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsxs(TMToolbarCard, { onBack: openDraftList ? onBackCallback : undefined, title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, children: [_jsxs("div", { style: { display: openDraftList ? 'none' : 'block', transition: 'opacity 0.3s ease-in-out' }, children: [_jsx(TreeView, { style: { marginTop: "10px", }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuMobile', dataSource: menuItems.folder, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%", display: openDraftList ? 'block' : 'none', transition: 'opacity 0.3s ease-in-out' }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, contextMenuItems: contextMenuItems?.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: contextMenuItems?.file, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: menuItems.file, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }) })] });
 };
 export default TMFileManager;
+const highlightText = (text, searchText, isSelected) => {
+    if (!searchText)
+        return text;
+    const regex = new RegExp(`(${searchText})`, 'gi');
+    return text.split(regex).map((part, index) => regex.test(part) ? (_jsx("span", { style: { backgroundColor: isSelected ? '#6c9023' : 'yellow' }, children: part }, index)) : (part));
+};
 const DetailsView = (props) => {
-    const { items, contextMenuItems, focusedFile, selectedFiles, handleFocusedFile, handleSelectedFiles, onDoubleClickHandler } = props;
+    const { items, contextMenuItems, focusedFile, selectedFiles, searchText = '', handleFocusedFile, handleSelectedFiles, onDoubleClickHandler } = props;
+    const cellDefaultRender = useCallback((cellData) => {
+        return _jsx("div", { children: highlightText(cellData.value, searchText, false) });
+    }, [searchText]);
     const cellExtRender = (cellData) => {
         const data = cellData.data;
         return _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: getFileIcon(data.ext, data.version) });
@@ -222,14 +232,14 @@ const DetailsView = (props) => {
         return [
             { dataField: "id", caption: "ID", dataType: 'string', visible: false },
             { dataField: "ext", caption: SDKUI_Localizator.Extension, cellRender: cellExtRender },
-            { dataField: "name", caption: SDKUI_Localizator.Name },
+            { dataField: "name", caption: SDKUI_Localizator.Name, cellRender: cellDefaultRender },
             { dataField: "version", caption: SDKUI_Localizator.Version },
             { dataField: "size", caption: SDKUI_Localizator.Size, cellRender: (cellData) => formatBytes(cellData.data.size ?? 0) },
             { dataField: "updaterName", caption: SDKUI_Localizator.Author },
             { dataField: "lastUpdateTime", caption: SDKUI_Localizator.LastUpdateTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
             { dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
         ];
-    }, []);
+    }, [searchText]);
     // Handles selection change in the data grid
     const onSelectionChanged = useCallback((e) => {
         if (handleSelectedFiles) {
@@ -255,10 +265,10 @@ const DetailsView = (props) => {
             e.items = contextMenuItems ? [...contextMenuItems] : [];
         }
     };
-    return (items && items.length > 0) ? (_jsx(TMDataGrid, { dataSource: items, dataColumns: dataColumns, focusedRowKey: focusedFile?.id, selectedRowKeys: selectedFiles?.map(file => file.id), onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });
+    return (items && items.length > 0) ? (_jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedFile?.id, selectedRowKeys: selectedFiles?.map(file => file.id), onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });
 };
 const ThumbnailsView = (props) => {
-    const { items, selectedFiles, handleSelectedFiles, handleFocusedFile, onDoubleClickHandler, thumbnailsViewItemComponent } = props;
+    const { items, selectedFiles, searchText = '', userID, handleSelectedFiles, handleFocusedFile, onDoubleClickHandler } = props;
     const PAGE_SIZES = [TMFileManagerPageSize.Small, TMFileManagerPageSize.Medium, TMFileManagerPageSize.Large];
     const initPageSize = TMFileManagerPageSize.Small;
     const showPagination = (items?.length ?? 0) > initPageSize;
@@ -286,12 +296,5 @@ const ThumbnailsView = (props) => {
         if (onDoubleClickHandler)
             onDoubleClickHandler(item);
     };
-    // Fallback to a default div component if no thumbnailsViewItemComponent is provided
-    const defaultThumbnailViewItem = (props) => {
-        const { item, isSelected } = props;
-        return _jsx("div", { style: { padding: '10px', border: isSelected ? '2px solid blue' : '1px solid gray', marginBottom: '5px', cursor: 'pointer', }, children: _jsx("span", { children: item.name }) });
-    };
-    return items && items.length > 0 ? (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'both', children: _jsx("div", { style: { width: "100%", height: "100%" }, children: paginatedItems?.map(item => (_jsx("div", { children: thumbnailsViewItemComponent ?
-                            thumbnailsViewItemComponent({ item, handleSelectedFiles, handleFocusedFile, isSelected: selectedFiles?.map(file => file.id).includes(item.id) ?? false, showId: false, onClick: () => handleItemClick(item), onDoubleClick: () => handleItemDoubleClick(item) }) :
-                            defaultThumbnailViewItem({ item, handleSelectedFiles, handleFocusedFile, isSelected: selectedFiles?.map(file => file.id).includes(item.id) ?? false, showId: false, onClick: () => handleItemClick(item), onDoubleClick: () => handleItemDoubleClick(item) }) }, item.id))) }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize })] })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });
+    return items && items.length > 0 ? (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'both', children: _jsx(TMFileManagerThumbnailItems, { items: items, paginatedItems: paginatedItems, selectedFiles: selectedFiles, showId: false, userID: userID, searchText: searchText, handleFocusedFile: handleFocusedFile, handleSelectedFiles: handleSelectedFiles, onClick: handleItemClick, onDoubleClick: handleItemDoubleClick }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize })] })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });
 };

package/lib/components/base/TMFileManagerThumbnailItems.d.ts

@@ -0,0 +1,14 @@
+import { FileItem } from './TMFileManager';
+export interface TMFileManagerThumbnailItemsProps {
+    items: Array<FileItem>;
+    paginatedItems: Array<FileItem>;
+    selectedFiles: Array<FileItem> | undefined;
+    showId: boolean;
+    searchText: string;
+    onClick: (file: FileItem) => void;
+    onDoubleClick?: (file: FileItem) => void;
+    handleSelectedFiles?: (fileItems: Array<FileItem>) => void;
+    handleFocusedFile?: (fileItem: FileItem | undefined) => void;
+    userID?: number;
+}
+export declare const TMFileManagerThumbnailItems: (props: TMFileManagerThumbnailItemsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/base/TMFileManagerThumbnailItems.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import TMTooltip from './TMTooltip';
+import { formatBytes, getFileIcon, Globalization, SDKUI_Localizator } from '../../helper';
+const colors = {
+    BLACK: "#000000",
+    WHITE: "#fff",
+    LIGHT_GRAY: "#f9f9f9",
+    PRIMARY_BLUE: "#135596",
+    LIGHT_GREEN: "#c8e6c9",
+    LIGHT_YELLOW: "#fff9c4",
+    MEDIUM_GREEN: "#28a745",
+};
+const FileItemContainer = styled.div `
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        margin: 10px 5px; 
+        background-color: ${({ $backgroundColor }) => $backgroundColor ?? colors.LIGHT_GRAY};
+        color: ${({ $textColor }) => $textColor ?? colors.BLACK}; 
+        position: relative;
+        min-width: 200px;
+        cursor: pointer;
+        &:hover {
+            background-color: ${({ $bgHoverColor }) => $bgHoverColor ?? '#e0e0e0'};
+            border-color: #999;
+        }
+        &:focus {
+            outline: none;
+        }
+    `;
+const IconWrapper = styled.div `
+        display: flex;
+        flex-direction: column; 
+        align-items: center;
+        margin-right: 10px;
+        font-size: 24px;
+
+        i {
+            font-size: 16px;
+            color: #555;
+            margin-top: 5px;
+        }
+    `;
+const FileDetails = styled.div `
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        font-size: 14px;
+    `;
+const FileName = styled.div `
+        font-size: 13px;
+        font-weight: bold;
+        word-break: break-word;
+    `;
+const FileMeta = styled.div `
+        font-size: 12px;
+    `;
+const Badge = styled.div `
+        width: 30px;
+        height: 30px;
+        border: 2px solid #28a745;
+        background-color: #28a745;
+        color: #fff;
+        font-size: 12px;
+        font-weight: bold;
+        padding: 5px 10px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: auto;
+    `;
+const highlightText = (text, searchText, isSelected) => {
+    if (!searchText)
+        return text;
+    const regex = new RegExp(`(${searchText})`, 'gi');
+    return text.split(regex).map((part, index) => regex.test(part) ? (_jsx("span", { style: { backgroundColor: isSelected ? '#6c9023' : 'yellow' }, children: part }, index)) : (part));
+};
+export const TMFileManagerThumbnailItems = (props) => {
+    const { items, paginatedItems, selectedFiles, searchText, showId, userID, onClick, onDoubleClick, handleSelectedFiles, handleFocusedFile } = props;
+    // Ref to the container
+    const containerRef = useRef(null);
+    // Scroll the focused blog post into view
+    useEffect(() => {
+        if (selectedFiles && selectedFiles.length === 1 && containerRef.current) {
+            const selectedElement = document.getElementById(selectedFiles[0].id.toString());
+            if (selectedElement) {
+                selectedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        }
+    }, [selectedFiles]);
+    return _jsx("div", { style: { width: "100%", height: "100%" }, children: paginatedItems.map(item => {
+            let clickTimeout = null;
+            const isSelected = selectedFiles?.map(file => file.id).includes(item.id) ?? false;
+            const checkoutDate = item.checkoutDate;
+            const checkoutUsedId = item.checkOutUserID;
+            const editMode = checkoutDate && checkoutUsedId && userID && userID === checkoutUsedId;
+            const lockMode = checkoutDate && checkoutUsedId && userID && userID !== checkoutUsedId;
+            const textColor = isSelected ? colors.WHITE : colors.BLACK;
+            const backgroundColors = { editMode: colors.LIGHT_GREEN, lockMode: colors.LIGHT_YELLOW, };
+            let bgColor = isSelected ? colors.PRIMARY_BLUE : colors.LIGHT_GRAY;
+            let bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#e0e0e0";
+            if (editMode) {
+                bgColor = isSelected ? colors.PRIMARY_BLUE : backgroundColors.editMode;
+                bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#a5d6a7";
+            }
+            if (lockMode) {
+                bgColor = isSelected ? colors.PRIMARY_BLUE : backgroundColors.lockMode;
+                bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#fff59d";
+            }
+            const handleKeyDown = (event) => {
+                event.preventDefault();
+                if (event.key === 'ArrowDown' && selectedFiles && selectedFiles.length === 1) {
+                    const currentIndex = items.findIndex(element => element.id === selectedFiles[0].id);
+                    if (items[currentIndex + 1]) {
+                        if (handleSelectedFiles)
+                            handleSelectedFiles([items[currentIndex + 1]]);
+                    }
+                    ;
+                }
+            };
+            const handleKeyUp = (event) => {
+                event.preventDefault();
+                if (event.key === 'ArrowUp' && selectedFiles && selectedFiles.length === 1) {
+                    const currentIndex = items.findIndex(element => element.id === selectedFiles[0].id);
+                    if (items[currentIndex - 1]) {
+                        if (handleSelectedFiles)
+                            handleSelectedFiles([items[currentIndex - 1]]);
+                    }
+                    ;
+                }
+            };
+            const onDoubleClickHandler = () => {
+                if (clickTimeout) {
+                    clearTimeout(clickTimeout);
+                    clickTimeout = null;
+                }
+                if (onDoubleClick && item)
+                    onDoubleClick(item);
+            };
+            const onClickHandler = () => {
+                if (clickTimeout) {
+                    clearTimeout(clickTimeout);
+                    clickTimeout = null;
+                }
+                else {
+                    clickTimeout = setTimeout(() => {
+                        if (onClick && item)
+                            onClick(item);
+                    }, 200);
+                }
+            };
+            const onContextMenu = () => {
+                if (handleFocusedFile)
+                    handleFocusedFile(item);
+            };
+            const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", item.checkOutUserName ?? '-', " (ID: ", item.checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(item.checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", item.version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", item.ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(item.creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime?.toString())] })] })] })] });
+            return _jsxs(FileItemContainer, { ref: containerRef, id: item.id.toString(), "$backgroundColor": bgColor, "$bgHoverColor": bgHoverColor, "$textColor": textColor, onDoubleClick: onDoubleClickHandler, onContextMenu: onContextMenu, onClick: onClickHandler, tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: [_jsxs(IconWrapper, { children: [getFileIcon(item.ext, item.version), editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-lock" }) })] }), _jsxs(FileDetails, { children: [_jsx(FileName, { children: showId ? highlightText(`(${item.id}) ${item.name}`, searchText, isSelected) : highlightText(item.name, searchText, isSelected) }), _jsx(FileMeta, { children: formatBytes(item.size ?? 0) })] }), item.version && _jsx(Badge, { children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: item.version }) })] }, "item-file-manager-" + item.id);
+        }) });
+};

package/lib/helper/SDKUI_Localizator.d.ts

@@ -68,6 +68,7 @@ export declare class SDKUI_Localizator {
     static get Create(): "Erstellen" | "Create" | "Crear" | "Créer" | "Criar" | "Crea";
     static get CreationTime(): "Erstellungsdatum" | "Creation Time" | "Fecha creación" | "Date de création" | "Data de criação" | "Data creazione";
     static get CultureID(): "Sprache" | "Language" | "Idioma" | "Lingue" | "Língua" | "Lingua";
+    static get CurrentUserExtract(): string;
     static get Date(): "Datum" | "Date" | "fecha" | "Data";
     static get Date_Modified(): "Datum geändert" | "Date Modified" | "Fecha modificada" | "Date modifiée" | "Data modificada" | "Data modificata";
     static get DcmtCount(): "Anzahl der Dokumente" | "Number of documents" | "Número de documentos" | "Nombre de documents" | "Numero documenti";
@@ -106,6 +107,9 @@ export declare class SDKUI_Localizator {
     static get EnterValue(): "Geben Sie einen Wert ein" | "Enter a value" | "Introducir un valor" | "Entrez une valeur" | "Digite um valor" | "Inserire un valore";
     static get Error(): "Fehler" | "Error" | "Erreur" | "Erro" | "Errore";
     static get ErrorParsingFileContent(): "Fehler beim Parsen des Dateiinhalts. Stellen Sie sicher, dass die Datei im richtigen Format vorliegt." | "Error parsing the file content. Ensure the file is in the correct format." | "Error al analizar el contenido del archivo. Asegúrese de que el archivo esté en el formato correcto." | "Erreur lors de l'analyse du contenu du fichier. Assurez-vous que le fichier est dans le bon format." | "Erro ao analisar o conteúdo do arquivo. Certifique-se de que o arquivo está no formato correto." | "Errore durante l'analisi del contenuto del file. Assicurati che il file sia nel formato corretto.";
+    static get ExtractedBy(): "Ausgezogen von" | "Extracted by" | "Extraído por" | "Extrait par" | "Estratto da";
+    static get ExtractedFromOtherUser(): string;
+    static get ExtractedOn(): "Ausgezogen am" | "Extracted on" | "Extraído el" | "Extrait le" | "Extraído em" | "Estratto il";
     static get EvaluateResult(): "Bewerten Sie das Ergebnis" | "Evaluate result" | "Valorar el resultado" | "Évalue les résultats" | "Avalia os resultados" | "Valuta il risultato";
     static get ExpertMode(): "Expertenmodus" | "Expert mode" | "Modo experto" | "Mode expert" | "Modo especialista" | "Modalità esperto";
     static get Export(): "Exportieren" | "Export" | "Exportar" | "Exporter" | "Esporta";

package/lib/helper/SDKUI_Localizator.js

@@ -629,6 +629,16 @@ export class SDKUI_Localizator {
             default: return "Lingua";
         }
     }
+    static get CurrentUserExtract() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Auszug aus dem aktuellen Benutzer und änderbar";
+            case CultureIDs.En_US: return "Extracted from the current user and editable";
+            case CultureIDs.Es_ES: return "Extraído del usuario actual y editable";
+            case CultureIDs.Fr_FR: return "Extrait de l'utilisateur actuel et modifiable";
+            case CultureIDs.Pt_PT: return "Extraído do usuário atual e editável";
+            default: return "Estratto dall'utente corrente e modificabile";
+        }
+    }
     static get Date() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Datum";
@@ -1021,6 +1031,36 @@ export class SDKUI_Localizator {
             default: return "Errore durante l'analisi del contenuto del file. Assicurati che il file sia nel formato corretto.";
         }
     }
+    static get ExtractedBy() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Ausgezogen von";
+            case CultureIDs.En_US: return "Extracted by";
+            case CultureIDs.Es_ES: return "Extraído por";
+            case CultureIDs.Fr_FR: return "Extrait par";
+            case CultureIDs.Pt_PT: return "Extraído por";
+            default: return "Estratto da";
+        }
+    }
+    static get ExtractedFromOtherUser() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Auszug von einem anderen Benutzer und nicht bearbeitbar";
+            case CultureIDs.En_US: return "Extracted from another user and not editable";
+            case CultureIDs.Es_ES: return "Extraído de otro usuario y no editable";
+            case CultureIDs.Fr_FR: return "Extrait d'un autre utilisateur et non modifiable";
+            case CultureIDs.Pt_PT: return "Extraído de outro usuário e não editável";
+            default: return "Estratto da un altro utente e non modificabile";
+        }
+    }
+    static get ExtractedOn() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Ausgezogen am";
+            case CultureIDs.En_US: return "Extracted on";
+            case CultureIDs.Es_ES: return "Extraído el";
+            case CultureIDs.Fr_FR: return "Extrait le";
+            case CultureIDs.Pt_PT: return "Extraído em";
+            default: return "Estratto il";
+        }
+    }
     static get EvaluateResult() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Bewerten Sie das Ergebnis";

package/lib/stories/TMFileManager.stories.js

@@ -88,7 +88,7 @@ export const DefaultTMFileManager = (args) => {
             }
         ]
     };
-    return _jsx(TMFileManager, { ...args, treeFs: {
+    return _jsx(TMFileManager, { ...args, userID: 1, treeFs: {
             id: 0,
             name: 'Root Directory',
             isDirectory: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react-beta",
-  "version": "6.11.113",
+  "version": "6.11.116",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/lib/stories/TMHtmlEditor.stories.d.ts

@@ -1,4 +0,0 @@
-import { Meta } from '@storybook/react';
-declare const _default: Meta;
-export default _default;
-export declare const HtmlEditor: any;

package/lib/stories/TMHtmlEditor.stories.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { sortArgTypes } from './TMStoriesUtils';
-import TMHtmlEditor from '../components/editors/TMHtmlEditor';
-export default {
-    // The title will determine how the component appears in the sidebar of Storybook
-    title: 'Components/TMHtmlEditor',
-    // Specifies the component that is being documented in this story
-    component: TMHtmlEditor,
-    tags: ['autodocs'],
-    // Tags for categorizing the component within Storybook
-    argTypes: sortArgTypes({}),
-};
-/******* 1. Default Template and Default TMHtmlEditor *******/
-const Template = (args) => _jsx(TMHtmlEditor, { ...args });
-export const HtmlEditor = Template.bind({});
-HtmlEditor.args = {};