@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

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

@@ -1,78 +0,0 @@
-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

@@ -1,207 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,201 +0,0 @@
-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

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