@topconsultnpm/sdkui-react 6.17.0-test9

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,55 @@
+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;
+    onContextMenu?: (e: React.MouseEvent) => void;
+}
+declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction, onContextMenu }: ITMLayoutContainerProps) => import("react/jsx-runtime").JSX.Element;
+export { TMCard, TMLayoutItem, TMSplitterLayout };
+export default TMLayoutContainer;

package/lib/components/base/TMLayout.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { FontSize, TMColors } from '../../utils/theme';
+const StyledLayoutContainer = styled.div `
+    width: 100%;
+    position: relative;
+    height: 100%;
+    /* min-height: max-content; */
+    /* min-width: max-content; */
+    display: flex;
+    flex-direction: ${props => props.$direction === 'horizontal' ? 'row' : 'column'};
+    justify-content: ${props => props.$justifyContent};
+    align-items: ${props => props.$alignItems};
+    /* overflow: ${props => props.$direction === 'horizontal' ? 'auto' : 'hidden'}; */
+    /* gap: 3px; */
+`;
+const StyledLayoutItem = styled.div `
+    width: ${props => props.$width};
+    min-width: ${props => props.$minWidth};
+    max-width: ${props => props.$maxWidth};
+    max-height: ${props => props.$maxHeight};
+    min-height: ${props => props.$minHeight};
+    height: ${props => props.$height};
+    position: relative;
+`;
+const StyledCardHeader = styled.div `
+    width:100% ;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 4px 5px;
+    background-color: ${props => props.$backgroundColor ?? TMColors.backgroundColorHeader};
+    color: ${props => props.$color ?? TMColors.colorHeader};
+    border-top-right-radius: ${props => props.$borderRadius && '3px'};
+    border-top-left-radius: ${props => props.$borderRadius && '3px'};
+    overflow: hidden;
+    position: sticky;
+    top: 0;
+    font-weight: ${props => props.$fontWeight ?? 'normal'};
+`;
+const StyledCardContext = styled.div `
+    width: 100%;
+    height: ${props => props.$showHeader ? 'calc(100% - 25px);' : '100%'} ;
+    overflow: ${props => props.$scroll && 'auto'};
+    overflow-y:  ${props => props.$scrollY && 'auto'};
+    overflow-x:  ${props => props.$scrollX && 'auto'};
+    background-color: white;
+    top: 0;
+    padding: ${props => props.$padding ? '5px' : '0'};
+`;
+const TMCard = ({ borderRadius = true, onClick, scrollX = false, scrollY = false, width = '100%', height = '100%', children, title = '', fontSize = FontSize.defaultFontSize, fontWeight, showBorder = true, padding = true, scroll = false, backgroundColor, color }) => {
+    return (_jsxs("div", { onClick: onClick, style: { width: width, height: height, fontSize: fontSize, overflow: 'hidden' }, children: [title.length > 0 && _jsx(StyledCardHeader, { "$borderRadius": borderRadius, "$fontWeight": fontWeight, "$backgroundColor": backgroundColor, "$color": color, children: title }), _jsxs(StyledCardContext, { "$scrollX": scrollX, "$scrollY": scrollY, "$scroll": scroll, "$padding": padding, "$showHeader": title.length > 0, style: { border: showBorder ? '2px solid #CAD9EB' : 'none', borderBottomLeftRadius: showBorder ? '3px' : '0', borderBottomRightRadius: showBorder ? '3px' : '0' }, children: [" ", children, " "] })] }));
+};
+const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorColor = '#e4e4e4', overflow = 'hidden', separatorActiveColor = 'orange', separatorSize = 4, direction = 'horizontal', children, start = ['50%', '50%'], min = ['150px', '150px'], }) => {
+    function isReactFragment(variableToInspect) {
+        return variableToInspect?.type === React.Fragment;
+    }
+    const sepRef = useRef(null);
+    const firstDivRef = useRef(null);
+    const containerRef = useRef(null);
+    const secondDivRef = useRef(null);
+    const [isFrag, setIsFrag] = useState(isReactFragment(React.Children.toArray(children)[1]));
+    const [separatorBgColor, setSeparatorBgColor] = useState(separatorColor);
+    const [isResizing, setIsResizing] = useState(false);
+    useEffect(() => {
+        setIsFrag(isReactFragment(React.Children.toArray(children)[1]));
+    }, [children]);
+    useEffect(() => {
+        const firstDiv = firstDivRef.current;
+        const secondDiv = secondDivRef.current;
+        const sepDiv = sepRef.current;
+        const containerDiv = containerRef.current;
+        let xCord = 0;
+        let yCord = 0;
+        let overlay = document.createElement('div');
+        let previewCont = document.getElementById('tm-preview-container');
+        overlay.style.width = '100%';
+        overlay.style.height = '100%';
+        overlay.style.position = 'absolute';
+        overlay.style.top = '0px';
+        overlay.style.left = '0px';
+        overlay.style.backgroundColor = 'transparent';
+        overlay.style.zIndex = '2000';
+        const minFirstSize = parseFloat(min[0]);
+        const minSecondSize = parseFloat(min[1]);
+        const updateDimensions = (tempX, tempY) => {
+            const containerSize = direction === 'horizontal' ? containerDiv.offsetWidth : containerDiv.offsetHeight;
+            const firstSize = direction === 'horizontal' ? firstDiv.offsetWidth : firstDiv.offsetHeight;
+            const secondSize = direction === 'horizontal' ? secondDiv.offsetWidth : secondDiv.offsetHeight;
+            if (direction === 'horizontal') {
+                const newFirstSize = firstSize + tempX;
+                const newSecondSize = secondSize - tempX;
+                if (newFirstSize >= minFirstSize && newSecondSize >= minSecondSize) {
+                    firstDiv.style.width = `${(newFirstSize / containerSize) * 100}%`;
+                    secondDiv.style.width = `${(newSecondSize / containerSize) * 100}%`;
+                }
+                xCord += tempX;
+            }
+            else {
+                const newFirstSize = firstSize + tempY;
+                const newSecondSize = secondSize - tempY;
+                if (newFirstSize >= minFirstSize && newSecondSize >= minSecondSize) {
+                    firstDiv.style.height = `${(newFirstSize / containerSize) * 100}%`;
+                    secondDiv.style.height = `${(newSecondSize / containerSize) * 100}%`;
+                }
+                yCord += tempY;
+            }
+        };
+        const onMouseMoveSep = (e) => {
+            const containerRect = containerDiv.getBoundingClientRect();
+            if (e.clientX < containerRect.left ||
+                e.clientX > containerRect.right ||
+                e.clientY < containerRect.top ||
+                e.clientY > containerRect.bottom) {
+                return;
+            }
+            if (direction === 'horizontal') {
+                const tempX = e.clientX - xCord;
+                updateDimensions(tempX, 0);
+                xCord = e.clientX;
+            }
+            else {
+                const tempY = e.clientY - yCord;
+                updateDimensions(0, tempY);
+                yCord = e.clientY;
+            }
+        };
+        const onTouchMoveSep = (e) => {
+            const containerRect = containerDiv.getBoundingClientRect();
+            const touch = e.touches[0];
+            if (touch.clientX < containerRect.left ||
+                touch.clientX > containerRect.right ||
+                touch.clientY < containerRect.top ||
+                touch.clientY > containerRect.bottom) {
+                return;
+            }
+            if (direction === 'horizontal') {
+                const tempX = touch.clientX - xCord;
+                updateDimensions(tempX, 0);
+                xCord = touch.clientX;
+            }
+            else {
+                const tempY = touch.clientY - yCord;
+                updateDimensions(0, tempY);
+                yCord = touch.clientY;
+            }
+        };
+        const onMouseUpSep = () => {
+            setSeparatorBgColor(separatorColor);
+            document.body.style.userSelect = 'auto';
+            if (animation) {
+                firstDiv.style.transition = 'ease 300ms';
+                secondDiv.style.transition = 'ease 300ms';
+            }
+            window.removeEventListener('mousemove', onMouseMoveSep);
+            window.removeEventListener('touchmove', onTouchMoveSep);
+            window.removeEventListener('mouseup', onMouseUpSep);
+            window.removeEventListener('touchend', onMouseUpSep);
+            overlay.remove();
+            setIsResizing(false);
+        };
+        const onMouseDownSep = (e) => {
+            setIsResizing(true);
+            if (previewCont) {
+                previewCont.appendChild(overlay);
+            }
+            xCord = 'clientX' in e ? e.clientX : e.touches[0].clientX;
+            yCord = 'clientY' in e ? e.clientY : e.touches[0].clientY;
+            setSeparatorBgColor(separatorActiveColor);
+            document.body.style.userSelect = 'none';
+            firstDiv.style.transition = 'none';
+            secondDiv.style.transition = 'none';
+            window.addEventListener('mousemove', onMouseMoveSep);
+            window.addEventListener('mouseup', onMouseUpSep);
+            window.addEventListener('touchmove', onTouchMoveSep);
+            window.addEventListener('touchend', onMouseUpSep);
+        };
+        sepDiv?.addEventListener('mousedown', onMouseDownSep);
+        sepDiv?.addEventListener('touchstart', onMouseDownSep, { passive: true });
+        return () => {
+            sepDiv?.removeEventListener('mousedown', onMouseDownSep);
+            sepDiv?.removeEventListener('touchstart', onMouseDownSep);
+            window.removeEventListener('mousemove', onMouseMoveSep);
+            window.removeEventListener('mouseup', onMouseUpSep);
+            window.removeEventListener('touchmove', onTouchMoveSep);
+            window.removeEventListener('touchend', onMouseUpSep);
+        };
+    }, [direction, isFrag, separatorColor, separatorActiveColor, min, animation]);
+    return (_jsxs("div", { ref: containerRef, style: { display: 'flex', width: '100%', height: '100%', flexDirection: direction === 'vertical' ? 'column' : 'row', position: 'relative', }, children: [_jsxs("div", { style: { position: 'relative', transition: animation ? 'ease 300ms' : 'none', overflow: overflow, height: direction === 'vertical' ? start[0] : '100%', width: direction === 'horizontal' ? start[0] : '100%', minHeight: direction === 'vertical' ? min[0] : '100%', minWidth: direction === 'horizontal' ? min[0] : '100%', }, ref: firstDivRef, children: [" ", React.Children.toArray(children)[0], " ", isResizing && _jsx("div", { style: { position: 'absolute', top: '0px', left: '0px', zIndex: 1000, backgroundColor: 'transparent', width: '100%', height: '100%', pointerEvents: 'none' } }), " "] }), !isFrag && (_jsx("div", { ref: sepRef, style: { display: showSeparator ? 'block' : 'none', backgroundColor: separatorBgColor, cursor: direction === 'vertical' ? 's-resize' : 'e-resize', minWidth: direction === 'horizontal' ? `${separatorSize}px` : '100%', minHeight: direction === 'vertical' ? `${separatorSize}px` : '100%', } })), _jsxs("div", { style: { position: 'relative', transition: animation ? 'ease 300ms' : 'none', overflow: overflow, height: direction === 'vertical' ? start[1] : '100%', width: direction === 'horizontal' ? start[1] : '100%', minHeight: direction === 'vertical' ? min[1] : '100%', minWidth: direction === 'horizontal' ? min[1] : '100%', }, ref: secondDivRef, children: [" ", React.Children.toArray(children)[1], " ", isResizing && _jsx("div", { style: { position: 'absolute', top: '0px', left: '0px', zIndex: 1000, backgroundColor: 'transparent', width: '100%', height: '100%', pointerEvents: 'none' } }), " "] })] }));
+};
+const TMLayoutItem = ({ onClick, children, width = '100%', minWidth, maxWidth, maxHeight, height = '100%', minHeight }) => {
+    return (_jsx(StyledLayoutItem, { onClick: onClick, "$height": height, "$maxHeight": maxHeight, "$minHeight": minHeight, "$width": width, "$minWidth": minWidth, "$maxWidth": maxWidth, children: children }));
+};
+const TMLayoutContainer = ({ gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical', onContextMenu }) => {
+    const renderedEls = () => { return (React.Children.map(children, child => (child))); };
+    return (_jsxs(StyledLayoutContainer, { "$alignItems": alignItems, "$justifyContent": justifyContent, onClick: onClick, onContextMenu: onContextMenu, "$direction": direction, style: { gap: gap }, children: [" ", renderedEls(), " "] }));
+};
+export { TMCard, TMLayoutItem, TMSplitterLayout };
+export default TMLayoutContainer;

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

@@ -0,0 +1,9 @@
+interface ITMListItem {
+    icon: any;
+    text?: string;
+    onClick?: () => void;
+}
+declare const TMList: ({ items }: {
+    items: ITMListItem[];
+}) => import("react/jsx-runtime").JSX.Element;
+export default TMList;