@topconsultnpm/sdkui-react-beta 6.12.36 → 6.12.38

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

@@ -2,6 +2,9 @@ import React from 'react';
 import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
 import { TMColors } from '../../utils/theme';
 export declare const StyledDivHorizontal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledMultiViewPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isVisible: boolean;
+}>> & string;
 export declare const StyledParagraph: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 export declare const StyledToolbarForm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledPanelPage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
@@ -33,3 +36,12 @@ export declare const StyledChartOverlay: import("styled-components/dist/types").
 export declare const StyledBtnLoadChart: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $backgroundColor?: string;
 }>> & string;
+export declare const StyledFormButtonsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledToolbarCardContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAnimatedComponentScaleColor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $delay?: string;
+    $scale?: number;
+}>> & string;
+export declare const StyledAnimatedComponentOpacity: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $delay?: string;
+}>> & string;

package/lib/components/base/Styled.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
 import { FontSize, TMColors } from '../../utils/theme';
 export const StyledDivHorizontal = styled.div `
@@ -8,6 +8,15 @@ export const StyledDivHorizontal = styled.div `
     align-items: center; 
     justify-content: flex-start;
 `;
+export const StyledMultiViewPanel = styled.div `
+    display: flex; 
+    width: 100%;
+    height: 100%;
+    position: ${(props) => props.$isVisible ? 'relative' : 'absolute'};
+    left: ${(props) => props.$isVisible ? '0px' : '-9999px'};
+    top: ${(props) => props.$isVisible ? '0px' : '-9999px'};
+    top: ${(props) => props.$isVisible ? 'visible' : '-hidden'};
+`;
 export const StyledParagraph = styled.p `
     display: flex;
     flex-direction: row;
@@ -126,7 +135,7 @@ export const StyledChartOverlay = styled.div `
     position: absolute;
     align-items: center;
     justify-content: center;
-    background-color: ${(props) => props.$backgroundColor ? props.$backgroundColor : 'black'};
+    background-color: ${(props) => props.$backgroundColor ?? 'black'};
 `;
 export const StyledBtnLoadChart = styled.button `
 	display: flex;
@@ -145,7 +154,7 @@ export const StyledBtnLoadChart = styled.button `
 	  cursor: pointer;
 	  transform: translateY(1px);
 	  box-shadow: 1px 1px #bbbbbb;
-	  background-color: ${(props) => props.$backgroundColor ? props.$backgroundColor : 'orange'};
+	  background-color: ${(props) => props.$backgroundColor ?? 'orange'};
 	  .iconrefresh {
 		transition:.5s;
 		transform: rotate(180deg);
@@ -157,3 +166,40 @@ export const StyledBtnLoadChart = styled.button `
 	  box-shadow: 0 0 1px #bbbbbb;
 	}
 `;
+export const StyledFormButtonsContainer = styled.div ` 
+    display: flex; 
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    position: relative;
+    width: 100%; 
+    min-width: max-content;
+    gap: 80px; 
+`;
+export const StyledToolbarCardContainer = styled.div ` 
+    background-color: #ffffff; 
+    width: 100%; 
+    height: 100%; 
+    display: flex; 
+    flex-direction: column; 
+    gap: 10px; 
+`;
+//#region  Animations
+const scaleAndColorChange = (scaleValue) => keyframes `
+  0% { transform: scale(1); color: white; }
+  50% { transform: scale(${scaleValue}); color: orange; }
+  100% { transform: scale(1); color: white; }
+`;
+const opacityChange = keyframes `
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+export const StyledAnimatedComponentScaleColor = styled.div `
+  animation: ${props => scaleAndColorChange(props.$scale ?? 1.5)} 400ms ease-in-out ;
+  animation-delay: ${props => props.$delay ?? '0'};
+`;
+export const StyledAnimatedComponentOpacity = styled.div `
+  opacity: 0;
+  animation: ${opacityChange} 400ms ease forwards normal  ;
+  animation-delay: ${props => props.$delay ?? '0'};
+`;

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,99 @@
+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)
+            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;
+        };
+        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;
+    }, []);
+    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/TMRightSidebar.d.ts

@@ -17,7 +17,3 @@ export interface ITMRightSidebarProps {
 }
 declare const TMRightSidebar: React.FC<ITMRightSidebarProps>;
 export default TMRightSidebar;
-export declare const StyledAnimatedComponentScaleColor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $delay?: string;
-    $scale?: number;
-}>> & string;

package/lib/components/base/TMRightSidebar.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import styled, { keyframes } from 'styled-components';
+import styled from 'styled-components';
 import { TMColors } from '../../utils/theme';
+import { StyledAnimatedComponentScaleColor } from './Styled';
 const TMRightSidebar = ({ items = [], onItemClick, selectedItem, showPanel = false }) => {
     const [hoveredItem, setHoveredItem] = useState(null);
     const [activeItems, setActiveItems] = useState(new Set());
@@ -35,15 +36,6 @@ const TMRightSidebar = ({ items = [], onItemClick, selectedItem, showPanel = fal
 };
 export default TMRightSidebar;
 // Styled Components
-const scaleAndColorChange = (scaleValue) => keyframes `
-  0% { transform: scale(1); color: white; }
-  50% { transform: scale(${scaleValue}); color: orange; }
-  100% { transform: scale(1); color: white; }
-`;
-export const StyledAnimatedComponentScaleColor = styled.div `
-  animation: ${props => scaleAndColorChange(props.$scale ?? 1.5)} 400ms ease-in-out;
-  animation-delay: ${props => props.$delay ? props.$delay : '0'};
-`;
 const SidebarContainer = styled.div `
   width: 30px;
   height: 100%;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ITMShowAllOrMaxItemsButtonProps {
+    showAll: boolean;
+    dataSourceLength: number;
+    onClick?: () => void;
+}
+declare const TMShowAllOrMaxItemsButton: React.FC<ITMShowAllOrMaxItemsButtonProps>;
+export default TMShowAllOrMaxItemsButton;

package/lib/components/base/TMShowAllOrMaxItemsButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getListMaxItems } from '../../helper';
+import { TMColors } from '../../utils/theme';
+import TMButton from './TMButton';
+import { useDeviceType, DeviceType } from './TMDeviceProvider';
+const TMShowAllOrMaxItemsButton = ({ showAll, dataSourceLength, onClick }) => {
+    const deviceType = useDeviceType();
+    let maxItems = getListMaxItems(deviceType ?? DeviceType.DESKTOP);
+    const captionText = showAll ? "Mostra meno" : `Mostra tutti (+${dataSourceLength - maxItems})`;
+    return (_jsx(TMButton, { elementStyle: { position: 'absolute', right: '10px' }, btnStyle: 'icon', caption: captionText, icon: showAll ?
+            _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `-${dataSourceLength - maxItems}` }) }) :
+            _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `+${dataSourceLength - maxItems}` }) }), onClick: () => onClick?.() }));
+};
+export default TMShowAllOrMaxItemsButton;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface ITMTreeItem {
+    key: string | undefined;
+    name?: string;
+    expanded?: boolean;
+    hidden?: boolean;
+    isLoaded?: boolean;
+    isContainer: boolean;
+    items?: ITMTreeItem[];
+}
+interface ITMTreeViewProps<T extends ITMTreeItem> {
+    dataSource?: T[];
+    focusedItem?: T | null;
+    selectedItems?: T[];
+    allowMultipleSelection?: boolean;
+    calculateItemsForNode?: (node: T) => Promise<T[] | undefined>;
+    itemRender: (item: T | null) => JSX.Element;
+    onFocusedItemChanged?: (item: T | null) => void;
+    onSelectionChanged?: (selectedItems: T[]) => void;
+    onNodeUpdate?: (updatedNode: T) => void;
+    onDataChanged?: (items: T[]) => void;
+}
+declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TMTreeView;
+export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isSelected?: boolean;
+}>> & string;

package/lib/components/base/TMTreeView.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { IconChevronDown, IconChevronRight } from '../../helper';
+import { TMColors } from '../../utils/theme';
+const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged }) => {
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!focusedItem)
+                return;
+            let newFocusedItem = null;
+            switch (event.key) {
+                case 'ArrowDown':
+                    newFocusedItem = findNextItem(dataSource, focusedItem);
+                    break;
+                case 'ArrowUp':
+                    newFocusedItem = findPreviousItem(dataSource, focusedItem);
+                    break;
+                case '+':
+                    if (!focusedItem.expanded) {
+                        handleNodeToggle(focusedItem.key, false);
+                        newFocusedItem = { ...focusedItem, expanded: true };
+                    }
+                    break;
+                case '-':
+                    if (focusedItem.expanded) {
+                        handleNodeToggle(focusedItem.key, false);
+                        newFocusedItem = { ...focusedItem, expanded: false };
+                    }
+                    break;
+                // case ' ':
+                // 	allowMultipleSelection && handleCheckboxChange(focusedItem, !selectedItems.some(item => item.key === focusedItem.key));
+                // 	break;
+                // case '*':
+                // 	handleExpandAllNodes();
+                // 	break;
+                // case '/':
+                // 	handleCollapseAllNodes();
+                // 	break;
+                default:
+                    break;
+            }
+            if (newFocusedItem)
+                onFocusedItemChanged?.(newFocusedItem);
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [focusedItem, dataSource, onFocusedItemChanged]);
+    const findNextItem = (nodes, currentItem) => {
+        const flatList = flattenTree(nodes);
+        const currentIndex = flatList.findIndex(item => item.key === currentItem.key);
+        return flatList[currentIndex + 1] || null;
+    };
+    const findPreviousItem = (nodes, currentItem) => {
+        const flatList = flattenTree(nodes);
+        const currentIndex = flatList.findIndex(item => item.key === currentItem.key);
+        return flatList[currentIndex - 1] || null;
+    };
+    const flattenTree = (nodes) => {
+        let flatList = [];
+        nodes.forEach(node => {
+            if (!node.hidden) {
+                flatList.push(node);
+                if (node.expanded && node.items) {
+                    flatList = flatList.concat(flattenTree(node.items));
+                }
+            }
+        });
+        return flatList;
+    };
+    const handleNodeToggle = async (key, ctrlKey) => {
+        const updateNodeRecursively = async (nodes) => {
+            const updatedNodes = await Promise.all(nodes.map(async (node) => {
+                if (node.key === key) {
+                    if (node.expanded) {
+                        const updatedNode = { ...node, expanded: false };
+                        onNodeUpdate?.(updatedNode); // Update parent data
+                        return updatedNode;
+                    }
+                    else {
+                        let newItems = node.items;
+                        if (ctrlKey || !node.isLoaded) {
+                            newItems = await calculateItemsForNode?.(node);
+                            const updatedNode = { ...node, expanded: true, items: newItems };
+                            onNodeUpdate?.(updatedNode); // Update parent data
+                            return updatedNode;
+                        }
+                        return { ...node, expanded: true, items: newItems };
+                    }
+                }
+                if (node.items) {
+                    const updatedItems = await updateNodeRecursively(node.items);
+                    return { ...node, items: updatedItems };
+                }
+                return node;
+            }));
+            return updatedNodes;
+        };
+        updateNodeRecursively(dataSource).then(updatedData => {
+            onDataChanged?.(updatedData);
+        });
+    };
+    const handleNodeClick = (node, ctrlKey) => {
+        onFocusedItemChanged?.(node);
+        handleNodeToggle(node.key, ctrlKey);
+    };
+    const handleCheckboxChange = (node, checked) => {
+        let newSelectedItems;
+        if (checked) {
+            if (node.isContainer) {
+                newSelectedItems = [...selectedItems, ...flattenTree(node.items || [])];
+            }
+            else if (!selectedItems.some(item => item.key === node.key)) {
+                newSelectedItems = [...selectedItems, node];
+            }
+            else {
+                newSelectedItems = selectedItems;
+            }
+        }
+        else if (node.isContainer) {
+            const childKeys = flattenTree(node.items || []).map(item => item.key);
+            newSelectedItems = selectedItems.filter(item => !childKeys.includes(item.key));
+        }
+        else {
+            newSelectedItems = selectedItems.filter(item => item.key !== node.key);
+        }
+        onSelectionChanged?.(newSelectedItems);
+    };
+    // const handleExpandAllNodes = () => {
+    // 	const expandAll = (nodes: T[]): T[] => {
+    // 		return nodes.map(node => ({
+    // 			...node,
+    // 			expanded: true,
+    // 			items: node.items ? expandAll(node.items as T[]) : node.items
+    // 		}));
+    // 	};
+    // 	setTreeData(prevData => expandAll(prevData));
+    // };
+    // const handleCollapseAllNodes = () => {
+    // 	const collapseAll = (nodes: T[]): T[] => {
+    // 		return nodes.map(node => ({
+    // 			...node,
+    // 			expanded: false,
+    // 			items: node.items ? collapseAll(node.items as T[]) : node.items
+    // 		}));
+    // 	};
+    // 	setTreeData(prevData => collapseAll(prevData));
+    // };
+    const isIndeterminate = (node) => {
+        if (!node.isContainer || !node.items)
+            return false;
+        const childKeys = flattenTree(node.items).map(item => item.key);
+        const selectedChildKeys = selectedItems.map(item => item.key);
+        const selectedCount = childKeys.filter(key => selectedChildKeys.includes(key)).length;
+        return selectedCount > 0 && selectedCount < childKeys.length;
+    };
+    const isFullySelected = (node) => {
+        if (!node.isContainer || !node.items)
+            return false;
+        const childKeys = flattenTree(node.items).map(item => item.key);
+        const selectedChildKeys = selectedItems.map(item => item.key);
+        return childKeys.every(key => selectedChildKeys.includes(key));
+    };
+    const hasVisibleItems = (node) => {
+        if (!node.items)
+            return false;
+        if (node.items.length <= 0)
+            return false;
+        return node.items.filter(o => !o.hidden).length > 0;
+    };
+    const renderTree = useCallback((nodes) => {
+        return nodes.map(node => !node.hidden && (_jsxs("div", { style: { width: '100%', height: '100%' }, children: [_jsxs(StyledTreeNode, { "$isSelected": node.key === focusedItem?.key, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', height: '18px', width: '18px' }, onClick: (e) => { handleNodeToggle(node.key, e.ctrlKey); }, children: hasVisibleItems(node)
+                                ? node.expanded
+                                    ? _jsx(IconChevronDown, { cursor: 'pointer' })
+                                    : _jsx(IconChevronRight, { cursor: 'pointer' })
+                                : _jsx("div", { style: { height: '18px', width: '18px' } }) }), allowMultipleSelection && (_jsx("input", { type: "checkbox", checked: isFullySelected(node) || selectedItems.some(item => item.key === node.key), onChange: (e) => handleCheckboxChange(node, e.target.checked), onClick: (e) => e.stopPropagation(), ref: input => {
+                                if (input) {
+                                    input.indeterminate = isIndeterminate(node);
+                                }
+                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', width: '100%', height: '100%' }, onClick: () => { onFocusedItemChanged?.(node); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsx("div", { style: { paddingLeft: 20, width: '100%' }, children: renderTree(node.items) }))] }, node.key)));
+    }, [handleNodeClick, handleNodeToggle, handleCheckboxChange, focusedItem, selectedItems, allowMultipleSelection]);
+    return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', padding: '2px 5px 2px 2px' }, children: renderTree(dataSource) }));
+};
+export default TMTreeView;
+export const StyledTreeNode = styled.div `
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: 25px;
+	gap: 5px;
+	align-items: center;
+	background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
+
+    /* &:hover {
+        background: ${() => `${TMColors.primaryColor}33`};
+    } */
+`;

package/lib/components/grids/TMBlogs.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import { BlogPost, HomeBlogPost, IDCount, UserDescriptor, WorkingGroupDescriptor } from "@topconsultnpm/sdk-ts-beta";
+import { FileItem } from '../base/TMFileManager';
+interface TMBlogsProps {
+    /** Component Identifier */
+    id: string;
+    /** An array of blog posts or home blog posts */
+    allData: Array<BlogPost | HomeBlogPost>;
+    /** Optional flag to show extended attachments */
+    showExtendedAttachments?: boolean;
+    /** Optional view mode for displaying blog posts ('thumbnails' or 'details') */
+    viewMode?: 'thumbnails' | 'details';
+    /** Optional flag to automatically scroll to the bottom of the list */
+    scrollToBottom?: boolean;
+    /** Optional height of the component (CSS value) */
+    height?: string;
+    /** Optional width of the component (CSS value) */
+    width?: string;
+    /** Optional header configuration object */
+    header?: {
+        /** Flag to display the view mode toggle */
+        showViewMode: boolean;
+        /** Flag to display filter options */
+        showFilters: boolean;
+        /** Flag to display the search bar */
+        showSearchBar: boolean;
+        /** Flag to display a dropdown menu for selecting posts */
+        showPostsDropDown: boolean;
+    };
+    /** Optional flag to show an icon in the component */
+    showIconHeader?: boolean;
+    /** Optional color for customizing the appearance */
+    color?: string;
+    /** Optional file system tree structure */
+    treeFs?: FileItem;
+    /** Optional map storing the latest draft information, where the key is the draft ID */
+    draftLatestInfoMap?: Map<number, {
+        latestVersion: number;
+        folderId: number;
+        folderName: string;
+        fileExt: string;
+        fileSize: string;
+    }>;
+    /** Optional map storing the archived document information */
+    archivedDocumentMap?: Map<number, {
+        tid: number;
+        did: number;
+        fileExt: string;
+        fileSize: string;
+    }>;
+    /** Optional callback function to update the list of visualized blog posts */
+    updateVisualizedBlogCallback?: (blogPosts: Array<BlogPost | HomeBlogPost>) => void;
+    /** Optional callback to handle clicks on attachment folder files */
+    handleClickAttachmentFolderFileCallback?: (folderId: number, draftId: number) => void;
+    /** Optional callback to handle navigation to working groups */
+    handleNavigateToWGs?: (selectedWorkingGroupId: number) => void;
+    /** Optional boolean to control the visibility of an ID */
+    showId?: boolean;
+    /** Optional setter function to update the visibility state of an ID */
+    setShowId?: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Optional currect working group */
+    currentWorkingGroup?: WorkingGroupDescriptor;
+    /** Optional context menu params */
+    contextMenuParams?: {
+        isShowHideFilterEnabled: boolean;
+        isShowHideIDEnaled: boolean;
+        isCommentEnabled: boolean;
+        isDeleteEnabled: boolean;
+        isRestoreEnabled: boolean;
+        isRefreshEnabled: boolean;
+        isCreateContextualTask: boolean;
+    };
+    refreshCallback?: () => void;
+    /** An array of partecipants */
+    participants?: Array<UserDescriptor>;
+    /** An array of new blog posts ID */
+    newPosts?: Array<IDCount>;
+    /** Show Comment Form Callback */
+    showCommentFormCallback?: () => void;
+    /** Show Task Form Callback */
+    showTaskFormCallback?: () => void;
+}
+declare const TMBlogs: (props: TMBlogsProps) => import("react/jsx-runtime").JSX.Element;
+export default TMBlogs;