@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/base/TMFileManagerThumbnailItems.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { colors, TMFileItemContainer } from './TMFileManagerUtils';
+import { formatBytes, Globalization, renderHighlightedText, SDKUI_Localizator } from '../../helper';
+import TMTooltip from './TMTooltip';
+import TMDcmtIcon from '../features/documents/TMDcmtIcon';
+const TMFileManagerThumbnailItems = (props) => {
+    // Destructuring props for cleaner usage
+    const { items, paginatedItems, selectedFiles, searchText, userID, onDoubleClick, handleSelectedFiles, handleFocusedFile, setDraftThumbViewAnchor } = props;
+    // Ref for the scrollable container
+    const containerRef = useRef(null);
+    // Stores index of the last selected item for shift selection
+    const lastSelectedIndexRef = useRef(null);
+    // Ref to handle click vs double click timing
+    const clickTimeoutRef = useRef(null);
+    // Automatically scrolls selected file into view
+    useEffect(() => {
+        if (items.length > 0 && containerRef.current && lastSelectedIndexRef.current !== null) {
+            const lastSelected = items[lastSelectedIndexRef.current];
+            if (lastSelected && lastSelected.id) {
+                const selectedElement = document.getElementById("tm-file-manager-thumbnail-item-" + lastSelected.id.toString());
+                if (selectedElement) {
+                    selectedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            }
+        }
+    }, [items, lastSelectedIndexRef.current]);
+    const handleKeyUp = useCallback((event) => {
+        event.preventDefault();
+        if (event.key === 'ArrowUp' && lastSelectedIndexRef.current) {
+            const currentIndex = lastSelectedIndexRef.current - 1;
+            if (currentIndex > -1 && items[currentIndex]) {
+                handleSelectedFiles([items[currentIndex]]);
+                lastSelectedIndexRef.current = currentIndex;
+            }
+        }
+    }, [items, lastSelectedIndexRef.current]);
+    const handleKeyDown = useCallback((event) => {
+        event.preventDefault();
+        if (event.key === 'ArrowDown' && lastSelectedIndexRef.current !== null) {
+            const currentIndex = lastSelectedIndexRef.current + 1;
+            if (currentIndex > -1 && items[currentIndex]) {
+                handleSelectedFiles([items[currentIndex]]);
+                lastSelectedIndexRef.current = currentIndex;
+            }
+        }
+        if (event.key === 'Enter' && selectedFiles.length === 1 && onDoubleClick) {
+            const currentItem = items.find(item => item.id === selectedFiles[0].id);
+            if (currentItem)
+                onDoubleClick(currentItem);
+        }
+    }, [items, lastSelectedIndexRef.current, selectedFiles]);
+    // Double click handler with timeout cleanup
+    const onDoubleClickHandler = useCallback((item) => {
+        if (clickTimeoutRef.current) {
+            clearTimeout(clickTimeoutRef.current);
+            clickTimeoutRef.current = null;
+        }
+        if (onDoubleClick && item)
+            onDoubleClick(item);
+    }, [onDoubleClick]);
+    const onClickHandler = useCallback((e, item) => {
+        // If a click timeout is already running, clear it (distinguish between single and double clicks)
+        if (clickTimeoutRef.current) {
+            clearTimeout(clickTimeoutRef.current);
+            clickTimeoutRef.current = null;
+        }
+        else {
+            // Start a timeout to defer selection until we know it's not a double click
+            clickTimeoutRef.current = setTimeout(() => {
+                const clickedIndex = items.findIndex(f => f.id === item.id);
+                if (clickedIndex === -1)
+                    return;
+                // Determine if Ctrl (or Cmd on Mac) or Shift is pressed
+                const isCtrlPressed = e.ctrlKey || e.metaKey;
+                const isShiftPressed = e.shiftKey;
+                // If Shift is pressed and there's a valid last selection, select a range
+                if (isShiftPressed && lastSelectedIndexRef.current !== null) {
+                    const rangeStart = Math.min(lastSelectedIndexRef.current, clickedIndex);
+                    const rangeEnd = Math.max(lastSelectedIndexRef.current, clickedIndex);
+                    const selectedFilesRange = items.slice(rangeStart, rangeEnd + 1);
+                    handleSelectedFiles(selectedFilesRange);
+                }
+                else if (isCtrlPressed) {
+                    // If Ctrl/Cmd is pressed, toggle selection of this item
+                    let newSelectedFiles = [];
+                    const isAlreadySelected = selectedFiles.some(f => f.id === item.id);
+                    if (isAlreadySelected) {
+                        // Deselect if already selected
+                        newSelectedFiles = selectedFiles.filter(f => f.id !== item.id);
+                    }
+                    else {
+                        // Add to selection
+                        newSelectedFiles = [...selectedFiles, item];
+                    }
+                    // Apply new selection
+                    handleSelectedFiles(newSelectedFiles);
+                    lastSelectedIndexRef.current = clickedIndex;
+                }
+                else {
+                    // Regular single click selection
+                    lastSelectedIndexRef.current = clickedIndex;
+                    handleSelectedFiles([item]);
+                }
+                clickTimeoutRef.current = null;
+            }, 200); // Short delay to allow for double click to interrupt
+        }
+    }, [selectedFiles, items]);
+    // Right-click to open context menu and set focus
+    const onContextMenu = useCallback((e, item) => {
+        e.preventDefault();
+        setDraftThumbViewAnchor(e.currentTarget);
+        handleFocusedFile(item);
+    }, []);
+    return _jsx("div", { style: { width: "100%", height: "100%" }, children: paginatedItems.map(item => {
+            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 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())] })] })] })] });
+            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(TMFileItemContainer, { className: "tm-file-manager-thumbnail-items", ref: containerRef, id: "tm-file-manager-thumbnail-item-" + item.id.toString(), "$backgroundColor": bgColor, "$bgHoverColor": bgHoverColor, "$textColor": textColor, onDoubleClick: () => onDoubleClickHandler(item), onContextMenu: (e) => onContextMenu(e, item), onClick: (e) => onClickHandler(e, item), tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { marginRight: '16px', flexShrink: 0 }, children: [_jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }), editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-lock" }) })] }), _jsxs("div", { style: { overflow: 'hidden', minWidth: 0 }, children: [_jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: '1rem', fontWeight: "bold" }, children: _jsx(TMTooltip, { parentStyle: { overflow: 'hidden' }, childStyle: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block' }, children: renderHighlightedText(item.name, searchText, isSelected) }) }), _jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: 'calc(1rem - 1px)' }, children: formatBytes(item.size ?? 0) })] })] }), item.version && (_jsx("div", { style: { flexShrink: 0, marginLeft: '12px', whiteSpace: 'nowrap' }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: _jsx("div", { style: { border: "2px solid #28a745", backgroundColor: "#28a745", color: "#ffffff", borderRadius: '50%', width: '30px', height: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 'bold' }, children: item.version }) }) }))] }) }, "tm-file-manager-thumbnail-item-" + item.id);
+        }) });
+};
+export default TMFileManagerThumbnailItems;

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
+interface TMFileManagerThumbnailsViewProps {
+    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;
+    draftThumbViewAnchor: HTMLElement | null;
+    setDraftThumbViewAnchor: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+}
+declare const TMFileManagerThumbnailsView: (props: TMFileManagerThumbnailsViewProps) => import("react/jsx-runtime").JSX.Element;
+export default TMFileManagerThumbnailsView;

package/lib/components/base/TMFileManagerThumbnailsView.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { TMFileManagerPageSize } from "./TMFileManagerUtils";
+import { ContextMenu, Pagination, ScrollView } from "devextreme-react";
+import TMFileManagerThumbnailItems from "./TMFileManagerThumbnailItems";
+import { SDKUI_Localizator } from "../../helper";
+const TMFileManagerThumbnailsView = (props) => {
+    const { items, focusedFile, handleFocusedFile, selectedFiles = [], handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler, draftThumbViewAnchor, setDraftThumbViewAnchor } = props;
+    const PAGE_SIZES = [TMFileManagerPageSize.Small, TMFileManagerPageSize.Medium, TMFileManagerPageSize.Large];
+    const initPageSize = TMFileManagerPageSize.Small;
+    const showPagination = (items?.length ?? 0) > initPageSize;
+    const [pageSize, setPageSize] = useState(TMFileManagerPageSize.Small);
+    const [pageIndex, setPageIndex] = useState(1);
+    const [paginatedItems, setPaginatedItems] = useState([]);
+    // Update paginated items when pageSize or pageIndex changes
+    useEffect(() => {
+        const startIndex = (pageIndex - 1) * pageSize;
+        const endIndex = startIndex + pageSize;
+        // Slice the items array based on the current page
+        setPaginatedItems(items?.slice(startIndex, endIndex) ?? []);
+    }, [pageSize, pageIndex, items]);
+    // Handle item selection
+    const handleItemDoubleClick = useCallback((item) => {
+        if (onDoubleClickHandler)
+            onDoubleClickHandler(item);
+    }, []);
+    // Handle closing the context menu
+    const closeViewContextMenu = useCallback(() => {
+        setDraftThumbViewAnchor(null);
+    }, []);
+    const onBackgroundContextMenu = (event) => {
+        if (event === undefined)
+            return;
+        if (event.target.closest('.tm-file-manager-thumbnail-items'))
+            return;
+        event.preventDefault();
+        setDraftThumbViewAnchor(event.currentTarget);
+        handleFocusedFile?.(undefined);
+        handleSelectedFiles?.([]);
+    };
+    return items.length > 0 ?
+        _jsxs("div", { style: { width: "100%", height: "100%" }, onContextMenu: onBackgroundContextMenu, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'vertical', children: _jsx(TMFileManagerThumbnailItems, { items: items, paginatedItems: paginatedItems, focusedFile: focusedFile, selectedFiles: selectedFiles, userID: userID, searchText: searchText, handleFocusedFile: handleFocusedFile, handleSelectedFiles: handleSelectedFiles, onDoubleClick: handleItemDoubleClick, setDraftThumbViewAnchor: setDraftThumbViewAnchor }) }), 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 }), draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] })
+        :
+            _jsxs("div", { onContextMenu: onBackgroundContextMenu, style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: [SDKUI_Localizator.FolderIsEmpty, draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] });
+};
+export default TMFileManagerThumbnailsView;

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

@@ -0,0 +1,78 @@
+import React from "react";
+import { SearchResultDescriptor, UserDescriptor, WGTreeDescriptor } from "@topconsultnpm/sdk-ts";
+export interface FileItem {
+    id: number;
+    name: string;
+    isDirectory: boolean;
+    items: Array<FileItem>;
+    tid?: number;
+    did?: number;
+    ext?: string;
+    creationTime?: Date;
+    lastUpdateTime?: Date;
+    updaterID?: number;
+    updaterName?: string;
+    description?: string;
+    checkOutUserID?: number;
+    checkOutUserName?: string;
+    checkoutDate?: Date | null;
+    size?: number;
+    version?: number;
+}
+export interface TMFileManagerContextMenuItem {
+    text: string;
+    icon: string;
+    onClick?: (param?: any) => void;
+    operationType?: 'singleRow' | 'multiRow';
+    disabled?: boolean;
+    id?: string;
+    items?: Array<TMFileManagerContextMenuItem>;
+    beginGroup?: boolean;
+    tooltip?: string;
+    visible?: boolean;
+}
+export interface TMFileManagerTreeViewDirectory {
+    id: number;
+    text: string;
+    expanded: boolean;
+    subFileFolderCount: number;
+    items?: Array<TMFileManagerTreeViewDirectory>;
+}
+export declare enum TMFileManagerPageSize {
+    Small = 30,
+    Medium = 50,
+    Large = 100
+}
+export declare const colors: {
+    BLACK: string;
+    WHITE: string;
+    LIGHT_GRAY: string;
+    PRIMARY_BLUE: string;
+    LIGHT_GREEN: string;
+    LIGHT_YELLOW: string;
+    MEDIUM_GREEN: string;
+};
+export declare const TMFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $backgroundColor?: string;
+    $textColor?: string;
+    $bgHoverColor?: string;
+}>> & string;
+export declare const findFileItems: (items: Array<FileItem>, id: number) => FileItem | undefined;
+export declare const setFolderTreeViewItems: (items: Array<FileItem>) => Array<TMFileManagerTreeViewDirectory>;
+export declare const buildFolderHierarchy: (fileSystemTree: WGTreeDescriptor | undefined, draftsFile: SearchResultDescriptor | undefined, archivedDocuments: Array<SearchResultDescriptor> | undefined, participants: Array<UserDescriptor> | undefined) => {
+    folderMap: Map<number, FileItem>;
+    draftInfoMap: Map<number, {
+        latestVersion: number;
+        folderId: number;
+        folderName: string;
+        fileExt: string;
+        fileSize: string;
+    }>;
+    archivedDocumentMap: Map<number, {
+        tid: number;
+        did: number;
+        fileExt: string;
+        fileSize: string;
+    }>;
+};
+export declare const extractTextsFromDirectory: (directories: Array<TMFileManagerTreeViewDirectory>) => Array<string>;

package/lib/components/base/TMFileManagerUtils.js

@@ -0,0 +1,207 @@
+import styled from "styled-components";
+import { associateColumnsToRows } from "../../helper";
+export var TMFileManagerPageSize;
+(function (TMFileManagerPageSize) {
+    TMFileManagerPageSize[TMFileManagerPageSize["Small"] = 30] = "Small";
+    TMFileManagerPageSize[TMFileManagerPageSize["Medium"] = 50] = "Medium";
+    TMFileManagerPageSize[TMFileManagerPageSize["Large"] = 100] = "Large";
+})(TMFileManagerPageSize || (TMFileManagerPageSize = {}));
+export const colors = {
+    BLACK: "#000000",
+    WHITE: "#fff",
+    LIGHT_GRAY: "#f9f9f9",
+    PRIMARY_BLUE: "#135596",
+    LIGHT_GREEN: "#c8e6c9",
+    LIGHT_YELLOW: "#fff9c4",
+    MEDIUM_GREEN: "#28a745",
+};
+export const TMFileItemContainer = styled.div `
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background-color: ${({ $backgroundColor }) => $backgroundColor ?? colors.LIGHT_GRAY};
+    color: ${({ $textColor }) => $textColor ?? colors.BLACK}; 
+    cursor: pointer;
+    margin: 10px 5px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    min-width: 100px;
+    gap: 4px;
+    &:hover {
+        background-color: ${({ $bgHoverColor }) => $bgHoverColor ?? '#e0e0e0'};
+        border-color: #999;
+    }
+    &:focus {
+        outline: none;
+    }
+`;
+// Function to find a specific file or folder based on its ID (used for finding nested items)
+export const findFileItems = (items, id) => {
+    for (let item of items) {
+        if (item.id === id) {
+            return item; // Return the found item
+        }
+        // Recursively search in sub-items if any
+        if (item.items) {
+            const found = findFileItems(item.items, id);
+            if (found) {
+                return found; // Return the found item from recursive call
+            }
+        }
+    }
+    return undefined; // Return undefined if not found
+};
+// Function to recursively transform file items into directory format for TreeView
+export const setFolderTreeViewItems = (items) => {
+    return items
+        .filter(item => item.isDirectory)
+        .map((item) => {
+        const el = {
+            id: item.id,
+            text: item.name,
+            expanded: true,
+            subFileFolderCount: item.items.filter(item => !item.isDirectory).length,
+            items: item.items && item.items.length > 0 ? setFolderTreeViewItems(item.items) : [],
+        };
+        return el;
+    });
+};
+// Function to process and build the folder hierarchy
+export const buildFolderHierarchy = (fileSystemTree, draftsFile, archivedDocuments, participants) => {
+    // Initialize a map to hold folder data
+    const folderMap = new Map();
+    // Initialize a map to hold information draft
+    const draftInfoMap = new Map();
+    // Initialize a map to hold archived document
+    const archivedDocumentMap = new Map();
+    // Set to track IDs of folders that are children
+    const childFolderIds = new Set();
+    // Extract folders from the file system tree
+    const folders = fileSystemTree?.folders ?? [];
+    // Step 1: Populate the folderMap with folder data
+    folders.forEach((folder) => {
+        if (folder.id) {
+            folderMap.set(folder.id, { id: folder.id, name: `${folder.name ?? '-'}`, isDirectory: true, items: [] });
+        }
+    });
+    // Step 2: Process the draftsFile if it is provided, and populate items for corresponding folders
+    if (draftsFile !== undefined && draftsFile.dtdResult !== undefined) {
+        // Process the columns and rows to associate them with folder IDs
+        const data = associateColumnsToRows(draftsFile.dtdResult.columns, draftsFile.dtdResult.rows);
+        data.forEach(row => {
+            if (row.FolderID) {
+                // Ensure FolderID is a number, and retrieve the folder from the folderMap
+                const folderId = Number(row.FolderID);
+                const folder = folderMap.get(folderId);
+                const draftID = Number(row.DraftID);
+                const version = row.Versione ? Number(row.Versione) : 0;
+                let checkOutUserName = '';
+                let updaterName = '';
+                if (participants) {
+                    const checkOutUserParticipant = participants.find(participant => participant.id === Number(row.CheckOutUserID)) || null;
+                    if (checkOutUserParticipant) {
+                        checkOutUserName = checkOutUserParticipant.name ?? '-';
+                    }
+                    const updaterUserParticipant = participants.find(participant => participant.id === Number(row.UpdaterID)) || null;
+                    if (updaterUserParticipant) {
+                        updaterName = updaterUserParticipant.name ?? '-';
+                    }
+                }
+                const fileItem = {
+                    id: draftID,
+                    name: (row.Nome ?? '-'),
+                    tid: Number(row.TID),
+                    did: Number(row.DID),
+                    isDirectory: false,
+                    items: [],
+                    size: row.FileSize ? Number(row.FileSize) : 0,
+                    ext: row.FileExt,
+                    creationTime: new Date(row.CreationTime),
+                    lastUpdateTime: new Date(row.LastUpdateTime),
+                    updaterID: Number(row.UpdaterID),
+                    updaterName: updaterName,
+                    description: row.Descrizione,
+                    checkOutUserID: Number(row.CheckOutUserID),
+                    checkOutUserName: checkOutUserName,
+                    checkoutDate: row.CheckOutDate ? new Date(row.CheckOutDate) : null,
+                    version,
+                };
+                if (draftInfoMap.has(draftID)) {
+                    // Get the current version in the map
+                    const currentDraftInfo = draftInfoMap.get(draftID);
+                    // Update only if the new version is greater than the current version
+                    if (currentDraftInfo && version > currentDraftInfo.latestVersion) {
+                        draftInfoMap.set(draftID, { latestVersion: version, folderId: folderId, folderName: folder ? folder.name : '', fileExt: row.FileExt, fileSize: row.FileSize });
+                    }
+                }
+                else {
+                    // If DraftID doesn't exist in the map, add it
+                    draftInfoMap.set(draftID, { latestVersion: version, folderId: folderId, folderName: folder ? folder.name : '', fileExt: row.FileExt, fileSize: row.FileSize });
+                }
+                if (folder) {
+                    // Add the item to the folder's items if the folder exists
+                    folder.items.push(fileItem);
+                }
+                else {
+                    folderMap.set(draftID, fileItem);
+                }
+            }
+        });
+    }
+    // Step 3: Process the archived document if it is provided, and populate items for corresponding files
+    if (archivedDocuments !== undefined && archivedDocuments.length > 0) {
+        archivedDocuments.forEach((archivedDocument) => {
+            if (archivedDocument.dtdResult?.columns && archivedDocument.dtdResult.rows) {
+                const data = associateColumnsToRows(archivedDocument.dtdResult.columns, archivedDocument.dtdResult.rows);
+                data.forEach((row) => {
+                    const did = Number(row.DID);
+                    const tid = Number(row.TID);
+                    if (did && tid) {
+                        if (archivedDocumentMap.has(did)) {
+                            const currentArchivedDocumentInfo = draftInfoMap.get(did);
+                            if (currentArchivedDocumentInfo) {
+                                archivedDocumentMap.set(did, { tid, did, fileExt: row.FileExt, fileSize: row.FileSize });
+                            }
+                        }
+                        else {
+                            archivedDocumentMap.set(did, { tid, did, fileExt: row.FileExt, fileSize: row.FileSize });
+                        }
+                    }
+                });
+            }
+        });
+    }
+    // Step 4: Build parent-child relationships based on folder structure
+    folders.forEach((folder) => {
+        if (folder.parentID !== undefined && folder.id !== undefined) {
+            const parent = folderMap.get(folder.parentID);
+            const child = folderMap.get(folder.id);
+            if (parent && child) {
+                parent.items.push(child); // Attach the child folder to the parent's items
+                childFolderIds.add(folder.id); // Mark folder ID as a child
+            }
+        }
+    });
+    // Step 4: Remove child folders from the root-level folder map
+    childFolderIds.forEach((id) => {
+        folderMap.delete(id);
+    });
+    return { folderMap, draftInfoMap, archivedDocumentMap };
+};
+// Collects all text fields from a nested file manager directory structure
+export const extractTextsFromDirectory = (directories) => {
+    const collectedTexts = [];
+    // Recursively traverses the directory structure and collects text fields.
+    const traverseDirectory = (directory) => {
+        if (directory.text !== undefined) {
+            collectedTexts.push(directory.text);
+        }
+        if (directory.items && Array.isArray(directory.items)) {
+            directory.items.forEach(traverseDirectory);
+        }
+    };
+    // Start traversal from the first directory if available.
+    if (directories.length > 0)
+        traverseDirectory(directories[0]);
+    return collectedTexts;
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ITMFloatingToolbarProps {
+    children: React.ReactNode;
+    backgroundColor: string | undefined;
+    initialLeft?: string;
+    initialTop?: string;
+}
+declare const TMFloatingToolbar: ({ children, backgroundColor, initialLeft, initialTop }: ITMFloatingToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export default TMFloatingToolbar;

package/lib/components/base/TMFloatingToolbar.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { IconDraggabledots } from '../../helper/TMIcons';
+const StyledFloatingToolbarContainer = styled.div `
+    position: absolute;
+    width: max-content;
+    height: max-content;
+    display: flex;
+    flex-direction: row;
+    background-color: ${props => `${props.$backgroundColor}a6`};
+    left: calc(50% - 90px);
+    top: calc(100% - 40px);
+    border-radius: 8px;
+    z-index: 10;
+    &:hover {
+        background: ${props => props.$backgroundColor};
+    }
+`;
+const StyledFloatingToolbarDraggable = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 25px;
+    height: 100%;
+    background-color: ${props => `${props.$backgroundColor}FF`};
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    padding: 10px 0px 10px 0px;
+    &:hover {
+        cursor: grab;
+    }
+`;
+const StyledFloatingToolbar = styled.div `
+    width: max-content;
+    display: flex;
+    flex-direction: row;
+    padding: 10px 10px 10px 20px; 
+    gap: 8px; 
+    border-radius: 8px;
+`;
+const TMFloatingToolbar = ({ children, backgroundColor, initialLeft, initialTop }) => {
+    const boxRef = useRef(null);
+    const boxDraggableRef = useRef(null);
+    const isClicked = useRef(false);
+    const coords = useRef({
+        startX: 0,
+        startY: 0,
+        lastX: 0,
+        lastY: 0
+    });
+    useEffect(() => {
+        if (!boxRef.current)
+            return;
+        if (!boxDraggableRef.current)
+            return;
+        let container = boxRef.current?.parentElement;
+        if (!container)
+            return;
+        const box = boxRef.current;
+        box.style.top = initialTop ?? `0px`;
+        box.style.left = initialLeft ?? `0px`;
+        const onMouseDown = (e) => {
+            isClicked.current = true;
+            coords.current.startX = e.clientX;
+            coords.current.startY = e.clientY;
+            coords.current.lastX = box.offsetLeft;
+            coords.current.lastY = box.offsetTop;
+        };
+        const onMouseUp = (e) => {
+            isClicked.current = false;
+            coords.current.lastX = box.offsetLeft;
+            coords.current.lastY = box.offsetTop;
+        };
+        const onMouseMove = (e) => {
+            if (!isClicked.current)
+                return;
+            const nextX = e.clientX - coords.current.startX + coords.current.lastX;
+            const nextY = e.clientY - coords.current.startY + coords.current.lastY;
+            const screenWidth = container.getBoundingClientRect().width;
+            const screenHeight = container.getBoundingClientRect().height;
+            const boundedX = Math.max(0, Math.min(screenWidth - box.getBoundingClientRect().width, nextX));
+            const boundedY = Math.max(0, Math.min(screenHeight - box.getBoundingClientRect().height, nextY));
+            box.style.top = `${boundedY}px`;
+            box.style.left = `${boundedX}px`;
+        };
+        boxDraggableRef.current?.addEventListener('mousedown', onMouseDown);
+        window.addEventListener('mouseup', onMouseUp);
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseleave', onMouseUp);
+        const cleanup = () => {
+            boxDraggableRef.current?.removeEventListener('mousedown', onMouseDown);
+            window.removeEventListener('mouseup', onMouseUp);
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseleave', onMouseUp);
+        };
+        return cleanup;
+    }, [initialLeft, initialTop]);
+    return (_jsxs(StyledFloatingToolbarContainer, { ref: boxRef, "$backgroundColor": backgroundColor, children: [_jsx(StyledFloatingToolbarDraggable, { ref: boxDraggableRef, "$backgroundColor": backgroundColor, children: _jsx(IconDraggabledots, { color: 'white' }) }), _jsx(StyledFloatingToolbar, { "$backgroundColor": backgroundColor, children: children })] }));
+};
+export default TMFloatingToolbar;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+declare const TMCard: ({ borderRadius, onClick, scrollX, scrollY, width, height, children, title, fontSize, fontWeight, showBorder, padding, scroll, backgroundColor, color }: {
+    borderRadius?: boolean;
+    onClick?: () => void;
+    scrollX?: boolean;
+    scrollY?: boolean;
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    minHeight?: string;
+    children?: React.ReactNode;
+    title?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    showBorder?: boolean;
+    padding?: boolean;
+    scroll?: boolean;
+    backgroundColor?: string;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const TMSplitterLayout: ({ animation, showSeparator, separatorColor, overflow, separatorActiveColor, separatorSize, direction, children, start, min, }: {
+    animation?: boolean;
+    separatorColor?: string;
+    separatorActiveColor?: string;
+    overflow?: "hidden" | "visible";
+    showSeparator?: boolean;
+    separatorSize?: number;
+    direction?: "horizontal" | "vertical";
+    children?: React.ReactNode;
+    start?: string[];
+    min?: string[];
+}) => import("react/jsx-runtime").JSX.Element;
+declare const TMLayoutItem: ({ onClick, children, width, minWidth, maxWidth, maxHeight, height, minHeight }: {
+    onClick?: () => void;
+    children: React.ReactNode;
+    minWidth?: string;
+    width?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    fixed?: boolean;
+    height?: string;
+    minHeight?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface ITMLayoutContainerProps {
+    children: React.ReactNode;
+    gap?: number;
+    justifyContent?: string;
+    alignItems?: string;
+    direction?: 'vertical' | 'horizontal';
+    onClick?: () => void;
+}
+declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutContainerProps) => import("react/jsx-runtime").JSX.Element;
+export { TMCard, TMLayoutItem, TMSplitterLayout };
+export default TMLayoutContainer;