@topconsultnpm/sdkui-react 6.19.0-dev1.10

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

@@ -0,0 +1,15 @@
+import React from 'react';
+declare enum DeviceType {
+    MOBILE = "mobile",
+    TABLET = "tablet",
+    DESKTOP = "desktop"
+}
+interface DeviceContextProps {
+    deviceType?: DeviceType;
+}
+declare const DeviceContext: React.Context<DeviceContextProps | undefined>;
+declare const TMDeviceProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+declare const useDeviceType: () => DeviceType | undefined;
+export { DeviceContextProps, DeviceType, useDeviceType, TMDeviceProvider, DeviceContext };

package/lib/components/base/TMDeviceProvider.js

@@ -0,0 +1,41 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, createContext, useMemo, useContext } from 'react';
+var DeviceType;
+(function (DeviceType) {
+    DeviceType["MOBILE"] = "mobile";
+    DeviceType["TABLET"] = "tablet";
+    DeviceType["DESKTOP"] = "desktop";
+})(DeviceType || (DeviceType = {}));
+const DESKTOP_BREAKPOINT = 1024;
+const TABLET_BREAKPOINT = 768;
+const DeviceContext = createContext(undefined);
+const TMDeviceProvider = ({ children }) => {
+    const [deviceType, setDeviceType] = useState(DeviceType.DESKTOP);
+    const updateDeviceType = () => {
+        const width = window.innerWidth;
+        if (width >= DESKTOP_BREAKPOINT) {
+            setDeviceType(DeviceType.DESKTOP);
+        }
+        else if (width >= TABLET_BREAKPOINT) {
+            setDeviceType(DeviceType.TABLET);
+        }
+        else {
+            setDeviceType(DeviceType.MOBILE);
+        }
+    };
+    useEffect(() => {
+        updateDeviceType();
+        window.addEventListener('resize', updateDeviceType);
+        return () => window.removeEventListener('resize', updateDeviceType);
+    }, []);
+    const contextValue = useMemo(() => ({ deviceType }), [deviceType]);
+    return (_jsxs(DeviceContext.Provider, { value: contextValue, children: [" ", children, " "] }));
+};
+const useDeviceType = () => {
+    const context = useContext(DeviceContext);
+    if (!context) {
+        throw new Error('DeviceProvider does not exsist');
+    }
+    return context.deviceType;
+};
+export { DeviceType, useDeviceType, TMDeviceProvider, DeviceContext };

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

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface ITMDropDownMenuRef {
+    focus: () => void;
+}
+export interface ITMDropDownMenu {
+    content: JSX.Element;
+    color?: string;
+    backgroundColor?: string;
+    disabled?: boolean;
+    borderRadius?: string;
+    items?: ITMDropDownMenuItem[];
+    onMenuShown?: () => void;
+}
+export interface ITMDropDownMenuItem {
+    icon?: any;
+    text: any;
+    items?: ITMDropDownMenuItem[];
+    disabled?: boolean;
+    beginGroup?: boolean;
+    onClick?: () => void;
+}
+declare const TMDropDownMenu: React.ForwardRefExoticComponent<ITMDropDownMenu & React.RefAttributes<ITMDropDownMenuRef>>;
+export default TMDropDownMenu;

package/lib/components/base/TMDropDownMenu.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, forwardRef, useRef, useImperativeHandle } from 'react';
+import styled from 'styled-components';
+import ContextMenu from 'devextreme-react/context-menu';
+import { FontSize, TMColors } from '../../utils/theme';
+import { genUniqueId } from '../../helper';
+const StyledContent = styled.div `
+    cursor: pointer;
+    border-radius: ${props => props.$borderRadius};
+    color: ${props => props.$color};
+    /* background-color: ${props => props.$backgroundColor}; */
+    background-color: transparent;
+    opacity: ${props => props.$disabled ? 0.4 : 1};
+    pointer-events: ${props => props.$disabled ? 'none' : ''};
+    user-select: none;
+    display: flex;
+    align-items: center;
+
+    &:focus {
+        outline: none;
+        border-bottom: ${props => props.$disabled ? '' : '2px solid'};
+        border-bottom-color: ${TMColors.primary};
+    }
+`;
+const StyledMenuItem = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    width: 100%;
+    font-size: ${FontSize.defaultFontSize};
+`;
+const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius, onMenuShown }, ref) => {
+    const [id, setID] = useState('');
+    const dropDownMenuElementRef = useRef(null); // Ref all'elemento DOM div principale
+    useEffect(() => { setID(genUniqueId()); }, [content]);
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            dropDownMenuElementRef.current?.focus();
+        },
+    }));
+    const renderItemTemplate = (itemData) => (_jsxs(StyledMenuItem, { children: [itemData.icon && _jsx("div", { style: { display: 'flex', alignItems: 'center' }, children: itemData.icon }), _jsx("span", { style: { flexGrow: 1 }, children: itemData.text }), itemData.items && _jsx("span", { className: "dx-icon-spinright dx-icon", style: { marginLeft: '10px' } })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }), _jsx(ContextMenu, { target: `#idContainer${id}`, dataSource: items, showEvent: 'click', itemRender: renderItemTemplate, onShown: (e) => onMenuShown?.(), onHidden: (e) => dropDownMenuElementRef.current?.focus() })] }));
+});
+export default TMDropDownMenu;

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

@@ -0,0 +1,39 @@
+import { ValidationItem } from "@topconsultnpm/sdk-ts";
+export type Colors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'standard';
+type IconModes = 'outside' | 'inside' | 'none';
+type LabelModes = 'left' | 'top' | 'none';
+export type Sizes = 'small' | 'medium' | 'large';
+export type TMEditorButtonData = {
+    icon: any;
+    text?: string;
+    onClick?: () => void;
+};
+export interface ITMEditorBase {
+    backgroundColor?: string;
+    buttons?: TMEditorButtonData[];
+    customActionIcon?: any;
+    disabled?: boolean;
+    elementStyle?: React.CSSProperties;
+    flexBase?: number;
+    fontSize?: string;
+    height?: string;
+    horizontalFlexBase?: number;
+    icon?: any;
+    iconMode?: IconModes;
+    iconSize?: Sizes;
+    isModifiedWhen?: boolean;
+    label?: string;
+    labelColor?: string;
+    labelMode?: LabelModes;
+    labelPosition?: 'top' | 'left' | 'right';
+    labelAlign?: boolean;
+    placeHolder?: string;
+    readOnly?: boolean;
+    showId?: boolean;
+    showClearButton?: boolean;
+    value?: any;
+    validationItems?: ValidationItem[];
+    width?: string;
+    borderRadius?: string;
+}
+export {};

package/lib/components/base/TMEditorBase.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,45 @@
+import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
+interface TMFileManagerProps {
+    /** The currently focused file */
+    focusedFile: FileItem | undefined;
+    /** Callback to handle changes in the focused file */
+    handleFocusedFile: (fileItem: FileItem | undefined) => void;
+    /** Array of selected files */
+    selectedFiles: Array<FileItem>;
+    /** Callback to handle file selection changes */
+    handleSelectedFiles: (fileItem: Array<FileItem>) => void;
+    /** Selected Folder */
+    selectedFolder: FileItem | undefined;
+    /** Callback to handle folder focus changes */
+    handleFocusedFolder: (folderItem: FileItem | undefined) => void;
+    /** Callback to refresh the file manager */
+    refreshCallback: () => Promise<void>;
+    /** Represents the file system tree structure */
+    treeFs: FileItem;
+    /** Context menu items for folders */
+    folderContextMenuItems: Array<TMFileManagerContextMenuItem>;
+    /** Context menu items for files */
+    fileContextMenuItems: Array<TMFileManagerContextMenuItem>;
+    /** Optional: Callback to handle folder selection changes */
+    handleSelectedFolder?: (folderItem: FileItem | undefined) => void;
+    /** Optional: Callback for handling double-click events on a file */
+    onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;
+    /** Optional: Session User ID */
+    userID?: number;
+    /** Optional: Determines the view mode of the file manager (Can be either 'thumbnails' or 'details') */
+    viewMode?: 'thumbnails' | 'details';
+    /** Optional: Callback for handling drop file */
+    handleDropFileCallback?: (files: Array<File>) => void;
+    /** Optional: Number of total founded */
+    dcmtsFound?: number;
+    /** Optional: Flag to show or hide the panel */
+    showPanel?: boolean;
+    /** Optional: Callback to handle panel close */
+    onClosePanel?: () => void;
+    /** Optional: Flag to allow panel maximization */
+    allowMaximize?: boolean;
+    /** Optional: Callback to handle back button */
+    onMaximizePanel?: () => void;
+}
+declare const TMFileManager: (props: TMFileManagerProps) => import("react/jsx-runtime").JSX.Element;
+export default TMFileManager;

package/lib/components/base/TMFileManager.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { extractTextsFromDirectory, findFileItems, setFolderTreeViewItems } from "./TMFileManagerUtils";
+import { DeviceType, useDeviceType } from "./TMDeviceProvider";
+import { formatBytes, Globalization, IconDashboard, IconFolder, IconHide, IconList, IconMenuVertical, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator, svgToString, TMCommandsContextMenu, TMConditionalWrapper } from "../../helper";
+import TMTooltip from "./TMTooltip";
+import { TMColors } from "../../utils/theme";
+import TMPanel from "./TMPanel";
+import { TMSplitterLayout } from "./TMLayout";
+import { ContextMenu, TreeView } from "devextreme-react";
+import Toolbar, { Item as ToolbarItem } from 'devextreme-react/cjs/toolbar';
+import TMButton from "./TMButton";
+import { TMSearchBar } from "../sidebar/TMHeader";
+import TMFileManagerThumbnailsView from "./TMFileManagerThumbnailsView";
+import TMFileManagerDataGridView from "./TMFileManagerDataGridView";
+const TMFileManager = (props) => {
+    // Destructure props
+    const { 
+    // Required props
+    focusedFile = undefined, handleFocusedFile, selectedFiles = [], handleSelectedFiles, selectedFolder, handleFocusedFolder, refreshCallback, treeFs, folderContextMenuItems, fileContextMenuItems, 
+    // Optional props
+    handleSelectedFolder, onDoubleClickHandler, userID, viewMode: initialViewMode, handleDropFileCallback, dcmtsFound = 0, showPanel = false, onClosePanel, allowMaximize = true, onMaximizePanel, } = props;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    // State to manage the current view mode ('thumbnails' or 'details')
+    const [viewMode, setViewMode] = useState(initialViewMode ?? 'details');
+    // State to store transformed directory data for file manager
+    const [treeViewData, setTreeViewData] = useState([]);
+    // State to store the anchor element for the tree view context men
+    const [treeViewAnchor, setTreeViewAnchor] = useState(null);
+    // State to store the filtered file items after search or filtering
+    const [filteredFileItems, setFilteredFileItems] = useState([]);
+    // State to store the anchor element for draft thumbnails view
+    const [draftThumbViewAnchor, setDraftThumbViewAnchor] = useState(null);
+    // State to store the search text entered by the user
+    const [searchText, setSearchText] = useState('');
+    // State to control the collapse/expand of the left panel
+    const [isLeftPanelCollapsed, setIsLeftPanelCollapsed] = useState(false);
+    // State to control the visibility of the draft list (for mobile)
+    const [openDraftList, setOpenDraftList] = useState(false);
+    // State to store the files that are dropped into the file manager
+    const [droppedFiles, setDroppedFiles] = useState([]);
+    // State to track whether a file drag operation is in progress
+    const [isDragging, setIsDragging] = useState(false);
+    // useEffect runs whenever `treeFs` changes
+    useEffect(() => {
+        // Initialize an empty array to hold tree view directory data
+        let treeViewDataDirectory = [];
+        // Push the root directory data and items into the array
+        treeViewDataDirectory.push({ id: -1, text: treeFs.name, subFileFolderCount: treeFs.items.filter(item => !item.isDirectory).length, expanded: true, items: setFolderTreeViewItems(treeFs.items) });
+        // Update the state with the constructed tree view data
+        setTreeViewData(treeViewDataDirectory);
+    }, [treeFs]);
+    useEffect(() => {
+        const extractedTexts = extractTextsFromDirectory(treeViewData);
+        // Reset the selected file item if its name is not found in the extracted texts.
+        if (selectedFolder)
+            if (!extractedTexts.includes(selectedFolder.name)) {
+                handleSelectedFolder?.(undefined);
+                setIsLeftPanelCollapsed(false);
+            }
+            else {
+                // update selectedFolder
+                const item = selectedFolder.id === treeFs.id ? treeFs : findFileItems(treeFs.items, selectedFolder.id);
+                handleSelectedFolder?.(item);
+            }
+    }, [treeViewData]);
+    useEffect(() => {
+        // Filter items whenever searchText or selectedFolder changes
+        const filterItems = () => {
+            const folderItems = selectedFolder?.items ?? [];
+            const filtered = folderItems.filter(item => !item.isDirectory &&
+                (
+                /* (item.id?.toString()?.includes(searchText.toLowerCase().trim())) || */
+                (item.name?.toLowerCase()?.includes(searchText.toLowerCase().trim())) ||
+                    (item.description?.toLowerCase()?.includes(searchText.toLowerCase().trim())) ||
+                    (item.ext?.toString().toLowerCase().includes(searchText.toLowerCase().trim())) ||
+                    (formatBytes(item.size)?.toLowerCase().toString().includes(searchText.toLowerCase())) ||
+                    (Globalization.getDateTimeDisplayValue(item.lastUpdateTime)?.toLowerCase().toString().includes(searchText.toLowerCase().trim())) ||
+                    (Globalization.getDateTimeDisplayValue(item.creationTime)?.toLowerCase().toString().includes(searchText.toLowerCase().trim())) ||
+                    (item.version?.toString().includes(searchText.toLowerCase().trim()))));
+            setFilteredFileItems(filtered);
+        };
+        filterItems();
+    }, [searchText, selectedFolder]);
+    // Callback to handle the "back" action (closing the draft list view)
+    const onBackCallback = useCallback(() => {
+        setOpenDraftList(false);
+    }, []);
+    const toolbar = useMemo(() => _jsxs(_Fragment, { children: [_jsx(IconMenuVertical, { id: "TMPanel-FileManager-Commands-Header", color: 'white', cursor: 'pointer' }), _jsx(TMCommandsContextMenu, { target: '#TMPanel-FileManager-Commands-Header', menuItems: [
+                    {
+                        icon: isLeftPanelCollapsed ? "eyeclose" : "eyeopen",
+                        onClick: () => setIsLeftPanelCollapsed(prev => !prev),
+                        text: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel,
+                    },
+                    {
+                        icon: svgToString(_jsx(IconRefresh, {})),
+                        onClick: async () => await refreshCallback(),
+                        text: SDKUI_Localizator.Refresh,
+                    },
+                ], showEvent: "click" })] }), [isLeftPanelCollapsed]);
+    // Handle closing the context menu
+    const closeTreeViewContextMenu = useCallback(() => {
+        setTreeViewAnchor(null);
+    }, []);
+    const handleTreeViewItemClick = useCallback((e) => {
+        if (!e)
+            return;
+        const clickedItemId = e.itemData.id;
+        const item = clickedItemId === treeFs.id ? treeFs : findFileItems(treeFs.items, clickedItemId);
+        if (isMobile)
+            setOpenDraftList(true);
+        handleSelectedFolder?.(item);
+        handleFocusedFolder?.(undefined);
+        handleFocusedFile?.(undefined);
+        handleSelectedFiles?.([]);
+    }, [treeFs, isMobile]);
+    // Render each TreeView item (directories) with custom styling/icons
+    const renderTreeViewItem = useCallback((itemData) => {
+        const isSelected = selectedFolder && selectedFolder.id === itemData.id;
+        const tooltipContent = _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID" }), ": ", itemData.id] });
+        const onDragOver = (e) => {
+            if (e === undefined)
+                return;
+            const item = itemData.id === treeFs.id ? treeFs : findFileItems(treeFs.items, itemData.id);
+            if (item)
+                handleSelectedFolder?.(item);
+            handleDragOver(e);
+        };
+        const onDrop = (e) => {
+            if (e === undefined)
+                return;
+            const item = itemData.id === treeFs.id ? treeFs : findFileItems(treeFs.items, itemData.id);
+            if (item)
+                handleSelectedFolder?.(item);
+            handleDrop(e);
+        };
+        const onDragLeave = (e) => {
+            e.preventDefault();
+            handleDragLeave(e);
+        };
+        return (_jsxs("div", { onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave, style: {
+                whiteSpace: "nowrap",
+                display: "flex",
+                alignItems: "center",
+                opacity: (isSelected || itemData.subFileFolderCount > 0) ? 1 : 0.5
+            }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(TMTooltip, { content: tooltipContent, children: _jsx(IconFolder, { fontSize: 24, style: { marginRight: 5, color: TMColors.iconLight } }) }), itemData.text, itemData.subFileFolderCount > 0 && ` (${itemData.subFileFolderCount})`] }));
+    }, [selectedFolder]);
+    const onBackgroundTreeViewContextMenu = useCallback((event) => {
+        if (event === undefined)
+            return;
+        event.preventDefault();
+        setTreeViewAnchor(event.currentTarget);
+        handleFocusedFolder?.(undefined);
+    }, []);
+    const onItemTreeViewContextMenu = useCallback((contextMenuEvent) => {
+        if (contextMenuEvent === undefined || contextMenuEvent.event === undefined)
+            return;
+        contextMenuEvent.event.preventDefault();
+        const clickedItemId = contextMenuEvent.itemData.id;
+        const item = clickedItemId === treeFs.id ? treeFs : findFileItems(treeFs.items, clickedItemId);
+        handleFocusedFolder?.(item);
+    }, []);
+    const toggleViewMode = useCallback(() => {
+        handleFocusedFile(undefined);
+        setViewMode((prevViewMode) => (prevViewMode === 'details' ? 'thumbnails' : 'details'));
+    }, []);
+    // Update searchText state
+    const handleSearchChange = useCallback((value) => {
+        // setFocusedRowKey(undefined);
+        handleFocusedFile?.(undefined);
+        setSearchText(value);
+    }, []);
+    // Handle the file drop
+    const handleDrop = (e) => {
+        e.preventDefault();
+        const files = Array.from(e.dataTransfer?.files || []);
+        setDroppedFiles(files);
+        setIsDragging(false);
+        if (handleDropFileCallback)
+            handleDropFileCallback(files);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
+    const handleDragLeave = (e) => {
+        setIsDragging(false);
+    };
+    return _jsx(TMPanel, { title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, showHeader: showPanel, onBack: (isMobile && openDraftList) ? onBackCallback : undefined, onClose: onClosePanel, allowMaximize: !isMobile ? allowMaximize : false, onMaximize: !isMobile ? onMaximizePanel : undefined, onHeaderDoubleClick: !isMobile ? onMaximizePanel : undefined, toolbar: toolbar, children: _jsx("div", { style: { flexDirection: "column", height: "100%", width: "100%", }, children: _jsxs(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: "flex", flexGrow: 1, height: "100%" }, children: _jsx(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "32%", isLeftPanelCollapsed ? '100%' : "68%"], children: children }, "TMWGs-panels-treeView") }), children: [_jsxs("div", { style: {
+                            height: "100%",
+                            width: "100%",
+                            ...(isMobile && { display: openDraftList ? 'none' : 'block', transition: "opacity 0.3s ease-in-out" }),
+                        }, onContextMenu: onBackgroundTreeViewContextMenu, children: [_jsx(TreeView, { height: "100%", width: "100%", useNativeScrolling: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick, onItemContextMenu: onItemTreeViewContextMenu }), treeViewAnchor && _jsx(ContextMenu, { id: "treeViewContextMenuDesktop", target: treeViewAnchor, dataSource: folderContextMenuItems, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: {
+                            backgroundColor: "#fff",
+                            width: "100%",
+                            height: "100%",
+                            ...(isMobile && { display: openDraftList ? 'block' : 'none', transition: "opacity 0.3s ease-in-out" }),
+                        }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [!showPanel && _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }), _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: '200px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
+                                    width: "100%",
+                                    height: "calc(100% - 40px)",
+                                    position: "relative",
+                                    overflow: "hidden"
+                                }, children: [isDragging && _jsx("div", { style: {
+                                            position: "absolute",
+                                            top: 0,
+                                            left: 0,
+                                            width: "100%",
+                                            height: "100%",
+                                            backgroundColor: "rgba(37, 89, 165, 0.8)",
+                                            color: "#fff",
+                                            display: "flex",
+                                            justifyContent: "center",
+                                            alignItems: "center",
+                                            fontSize: "1.2rem",
+                                            zIndex: 10,
+                                            pointerEvents: "none",
+                                            backdropFilter: "blur(3px)",
+                                            textShadow: "0 2px 4px rgba(0,0,0,0.5)"
+                                        }, children: SDKUI_Localizator.DropFileToShare }), viewMode === 'thumbnails' && _jsx(TMFileManagerThumbnailsView, { items: filteredFileItems ?? [], focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, draftThumbViewAnchor: draftThumbViewAnchor, setDraftThumbViewAnchor: setDraftThumbViewAnchor, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(TMFileManagerDataGridView, { items: filteredFileItems ?? [], focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, onDoubleClickHandler: onDoubleClickHandler })] })] })] }) }) });
+};
+export default TMFileManager;

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

@@ -0,0 +1,14 @@
+import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
+interface TMFileManagerDataGridViewProps {
+    items: Array<FileItem>;
+    focusedFile: FileItem | undefined;
+    handleFocusedFile: (fileItem: FileItem | undefined) => void;
+    selectedFiles: Array<FileItem>;
+    handleSelectedFiles: (fileItems: Array<FileItem>) => void;
+    fileContextMenuItems: Array<TMFileManagerContextMenuItem>;
+    searchText: string;
+    userID?: number;
+    onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;
+}
+declare const TMFileManagerDataGridView: (props: TMFileManagerDataGridViewProps) => import("react/jsx-runtime").JSX.Element;
+export default TMFileManagerDataGridView;

package/lib/components/base/TMFileManagerDataGridView.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { formatBytes, Globalization, renderHighlightedText, SDKUI_Localizator } from "../../helper";
+import TMDataGrid from "./TMDataGrid";
+import TMDcmtIcon from "../features/documents/TMDcmtIcon";
+import TMTooltip from "./TMTooltip";
+const TMFileManagerDataGridView = (props) => {
+    const { items, focusedFile, handleFocusedFile, selectedFiles, handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler } = props;
+    // State hook to store the currently focused row key, initially set to undefined
+    const [focusedRowKey, setFocusedRowKey] = useState(focusedFile?.id);
+    // State to store selected row keys
+    const [selectedRowKeys, setSelectedRowKeys] = useState(selectedFiles.map(selectedFile => selectedFile.id));
+    useEffect(() => {
+        setFocusedRowKey(focusedFile ? focusedFile.id : undefined);
+    }, [focusedFile]);
+    useEffect(() => {
+        setSelectedRowKeys(selectedFiles.map(selectedFile => selectedFile.id));
+    }, [selectedFiles]);
+    // DataGrid Callback    
+    // Handles focus change in the data grid
+    const onFocusedRowChanged = useCallback((e) => {
+        setFocusedRowKey(e.row?.key);
+        if (handleFocusedFile && e.row)
+            handleFocusedFile(e.row.data);
+    }, [handleFocusedFile]);
+    // Handles selection change in the data grid
+    const onSelectionChanged = useCallback((e) => {
+        const selectedKeys = e.component.getSelectedRowKeys() ?? [];
+        setSelectedRowKeys(selectedKeys);
+        if (handleSelectedFiles) {
+            const selectedRowsData = e.component.getSelectedRowsData() ?? [];
+            handleSelectedFiles(selectedRowsData);
+        }
+    }, [handleSelectedFiles]);
+    // Handler for double-click cell event
+    const onCellDblClick = useCallback((e) => {
+        if (e.column.dataField === "ext")
+            return;
+        if (onDoubleClickHandler)
+            onDoubleClickHandler(e.data);
+    }, [onDoubleClickHandler]);
+    const onContextMenuPreparing = (e) => {
+        if (e === undefined)
+            return;
+        if (e.target === 'content') {
+            if (handleFocusedFile && e.row)
+                handleFocusedFile(e.row.data);
+            e.items = e.items || [];
+            e.items = fileContextMenuItems ? [...fileContextMenuItems] : [];
+        }
+    };
+    const cellDefaultRender = useCallback((cellData) => {
+        return renderHighlightedText(cellData.value.toString(), searchText, false);
+    }, [searchText]);
+    const cellNameRender = useCallback((cellData) => {
+        const { checkoutDate, checkOutUserID, checkOutUserName, version, ext, creationTime, lastUpdateTime } = cellData.data;
+        const checkoutUsedId = checkOutUserID;
+        const editMode = checkoutDate && checkoutUsedId && userID && userID === checkoutUsedId;
+        const lockMode = checkoutDate && checkoutUsedId && userID && userID !== checkoutUsedId;
+        const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", 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 }), ": ", checkOutUserName ?? '-', " (ID: ", checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(lastUpdateTime?.toString())] })] })] })] });
+        return _jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: "4px" }, children: [editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-lock" }) }), renderHighlightedText(cellData.value, searchText, false)] });
+    }, [searchText]);
+    const cellExtRender = useCallback((cellData) => {
+        const item = cellData.data;
+        const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", item.id ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "DID:" }), " ", item.did ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "TID:" }), " ", item.tid ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", item.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", item.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", item.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(item.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime)] })] }));
+        return _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: _jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }) });
+    }, []);
+    const cellDatetimeRender = useCallback((cellData) => {
+        return renderHighlightedText(Globalization.getDateTimeDisplayValue(cellData.value).toString(), searchText, false);
+    }, [searchText]);
+    const cellSizeRender = useCallback((cellData) => {
+        const size = formatBytes(cellData.data.size ?? 0);
+        return renderHighlightedText(size.toString(), searchText, false);
+    }, [searchText]);
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: "id", caption: "ID", dataType: 'string', visible: false },
+            { dataField: "ext", caption: "", cellRender: cellExtRender },
+            { dataField: "name", caption: SDKUI_Localizator.Name, cellRender: cellNameRender },
+            { dataField: "version", caption: "V.", cellRender: cellDefaultRender },
+            { dataField: "size", caption: SDKUI_Localizator.Size, cellRender: cellSizeRender },
+            { dataField: "updaterName", caption: SDKUI_Localizator.Author, cellRender: cellDefaultRender },
+            { 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]);
+    return _jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onCellDblClick: onCellDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, noDataText: SDKUI_Localizator.FolderIsEmpty });
+};
+export default TMFileManagerDataGridView;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FileItem } from './TMFileManagerUtils';
+export interface TMFileManagerThumbnailItemsProps {
+    items: Array<FileItem>;
+    paginatedItems: Array<FileItem>;
+    focusedFile: FileItem | undefined;
+    handleFocusedFile: (fileItem: FileItem | undefined) => void;
+    selectedFiles: Array<FileItem>;
+    handleSelectedFiles: (fileItems: Array<FileItem>) => void;
+    searchText: string;
+    setDraftThumbViewAnchor: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    onDoubleClick?: (file: FileItem) => void;
+    userID?: number;
+}
+declare const TMFileManagerThumbnailItems: (props: TMFileManagerThumbnailItemsProps) => import("react/jsx-runtime").JSX.Element;
+export default TMFileManagerThumbnailItems;