@topconsultnpm/sdkui-react 6.19.0-test.1 → 6.19.0-test2

package/lib/components/base/TMAccordion.js

@@ -14,49 +14,49 @@ const TMAccordion = ({ title, titleSize = 'Medium', children, defaultOpen = true
 };
 export default TMAccordion;
 //#region Styled Components
-const StyledAccordionContainer = styled.div `
-    margin-bottom: 10px;
-    overflow: hidden;
+const StyledAccordionContainer = styled.div `
+    margin-bottom: 10px;
+    overflow: hidden;
 `;
-const StyledGroupTemplate = styled.div `
-    cursor: pointer;
-    background: none !important;
-    border: none !important;
-    box-shadow: none !important;
-    padding: 10px;
-    display: flex;
-    flex-direction: row;
-    gap: 5px;
-    align-items: center;
-    font-size: 1rem;
-    font-weight: 600; 
-    color: ${() => TMColors.primaryColor};
-    position: relative;
-
-    .tm-accordion-title, .tm-accordion-title.small {
-        font-weight: 600;
-        margin: 0;
-    }
-    .tm-accordion-title.small {
-        font-size: 1rem;
-    }
-    .tm-accordion-title {
-        font-size: 1.25rem;
-    }
-
-    &::after {
-        content: '';
-        display: block;
-        width: 90%;
-        margin: 0 auto;
-        border-bottom: 1px solid #00A99D;
-        margin-top: 8px;
-        position: absolute;
-        left: 5%;
-        bottom: 0;
-    }
+const StyledGroupTemplate = styled.div `
+    cursor: pointer;
+    background: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    align-items: center;
+    font-size: 1rem;
+    font-weight: 600; 
+    color: ${() => TMColors.primaryColor};
+    position: relative;
+
+    .tm-accordion-title, .tm-accordion-title.small {
+        font-weight: 600;
+        margin: 0;
+    }
+    .tm-accordion-title.small {
+        font-size: 1rem;
+    }
+    .tm-accordion-title {
+        font-size: 1.25rem;
+    }
+
+    &::after {
+        content: '';
+        display: block;
+        width: 90%;
+        margin: 0 auto;
+        border-bottom: 1px solid #00A99D;
+        margin-top: 8px;
+        position: absolute;
+        left: 5%;
+        bottom: 0;
+    }
 `;
-const StyledAccordionContent = styled.div `
-    padding: 10px;
-    background-color: #fff; /* White background for the content area */
+const StyledAccordionContent = styled.div `
+    padding: 10px;
+    background-color: #fff; /* White background for the content area */
 `;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface TMAccordionBadge {
+    badge: number;
+    tooltip?: string;
+}
+export interface TMAccordionGroup {
+    id: string;
+    title: string;
+    dataSource?: Array<any>;
+    color?: string;
+    icon?: React.ReactNode;
+    isExpanded?: boolean;
+    contextMenuItems?: Array<any> | ((item: any) => Array<any>);
+    onItemClick?: (item: any) => void;
+    onItemDoubleClick?: (item: any) => void;
+    renderItem?: (item: any, isSelected: boolean, isFocused: boolean, color: string) => React.ReactNode;
+    itemHeight?: number;
+    badges?: TMAccordionBadge[];
+    customComponent?: React.ReactNode;
+}
+export interface TMAccordionProps {
+    groups?: Array<TMAccordionGroup>;
+    localStorageKey?: string;
+    selectedItem?: any;
+    onSelectedItemChange?: (item: any) => void;
+}
+declare const TMAccordion: React.FC<TMAccordionProps>;
+export default TMAccordion;

package/lib/components/base/TMAccordionNew.js

@@ -0,0 +1,326 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import styled from 'styled-components';
+import { ContextMenu, LoadIndicator } from 'devextreme-react';
+import { LocalStorageService } from '@topconsultnpm/sdk-ts';
+import TMTooltip from './TMTooltip';
+const Container = styled.div `
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 5px;
+    
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+    
+    &::-webkit-scrollbar-track {
+        background: #f1f3f5;
+        border-radius: 4px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+        background: #adb5bd;
+        border-radius: 4px;
+        
+        &:hover {
+            background: #868e96;
+        }
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+    }
+`;
+const AccordionItem = styled.div `
+    margin-bottom: 16px;
+    border-radius: 5px;
+    background: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+    transition: box-shadow 0.3s ease;
+    
+    &:hover {
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    }
+`;
+const AccordionHeader = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    background: ${props => `linear-gradient(135deg, ${props.$color}15 0%, ${props.$color}08 100%)`};
+    border-left: 4px solid ${props => props.$color};
+    cursor: pointer;
+    transition: all 0.3s ease;
+    
+    &:hover {
+        background: ${props => `linear-gradient(135deg, ${props.$color}25 0%, ${props.$color}15 100%)`};
+    }
+`;
+const AccordionTitle = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+`;
+const TitleText = styled.h3 `
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #212529;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+`;
+const BadgeContainer = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 6px;
+`;
+const Badge = styled.div `
+    min-width: 22px;
+    height: 22px;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${props => props.$color};
+    color: white;
+    border-radius: 11px;
+    font-size: 11px;
+    font-weight: 700;
+    box-shadow: 0 2px 6px ${props => props.$color}40;
+`;
+const CustomComponentContainer = styled.div `
+    padding: 8px;
+`;
+const ErrorMessage = styled.div `
+    padding: 20px;
+    text-align: center;
+    color: #fa5252;
+    font-size: 14px;
+    font-weight: 500;
+`;
+const ToggleIcon = styled.div `
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: white;
+    border-radius: 6px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transform: ${props => props.$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+const AccordionContent = styled.div `
+    max-height: ${props => props.$isOpen ? `${props.$maxHeight}px` : '0'};
+    overflow: hidden;
+    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+`;
+const ItemsList = styled.div `
+    padding: 4px;
+`;
+const ListItem = styled.div `
+    padding: 2px;
+    margin: 2px 0;
+    border-radius: 6px;
+    background: ${props => props.$isSelected ? `${props.$color}30` : 'transparent'};
+    border: none;
+    transition: background 0.2s ease;
+    cursor: pointer;
+    
+    &:hover {
+        background: ${props => props.$isSelected ? `${props.$color}40` : `${props.$color}08`};
+    }
+`;
+const LoadingContainer = styled.div `
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+`;
+const DEFAULT_COLORS = ['#339af0', '#fa5252', '#40c057', '#f59f00', '#e64980', '#7950f2'];
+const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChange }) => {
+    const [openAccordions, setOpenAccordions] = useState({});
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [contextMenuItems, setContextMenuItems] = useState([]);
+    const [focusedItem, setFocusedItem] = useState(undefined);
+    const [headerContextGroupId, setHeaderContextGroupId] = useState(null);
+    const [headerContextVisible, setHeaderContextVisible] = useState(false);
+    const [headerContextPosition, setHeaderContextPosition] = useState(null);
+    useEffect(() => {
+        const initialState = {};
+        if (!groups || groups.length === 0) {
+            setIsInitialized(true);
+            return;
+        }
+        if (localStorageKey) {
+            const savedState = LocalStorageService.getItem(localStorageKey);
+            if (savedState && savedState.length === groups.length) {
+                groups.forEach((group, index) => {
+                    initialState[group.id] = savedState[index] === '1';
+                });
+            }
+            else {
+                groups.forEach(group => {
+                    initialState[group.id] = group.isExpanded !== false;
+                });
+            }
+        }
+        else {
+            groups.forEach(group => {
+                initialState[group.id] = group.isExpanded !== false;
+            });
+        }
+        setOpenAccordions(initialState);
+        setIsInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (!isInitialized || !groups)
+            return;
+        setOpenAccordions(prev => {
+            const newState = { ...prev };
+            groups.forEach(group => {
+                if (!(group.id in newState)) {
+                    newState[group.id] = group.isExpanded !== false;
+                }
+            });
+            Object.keys(newState).forEach(groupId => {
+                if (!groups.some(g => g.id === groupId)) { //nosonar
+                    delete newState[groupId];
+                }
+            });
+            return newState;
+        });
+    }, [groups, isInitialized]);
+    useEffect(() => {
+        if (!isInitialized || !groups)
+            return;
+        if (localStorageKey && Object.keys(openAccordions).length === groups.length) {
+            const stateString = groups.map(group => openAccordions[group.id] ? '1' : '0').join('');
+            LocalStorageService.setItem(localStorageKey, stateString);
+        }
+    }, [openAccordions, groups, localStorageKey, isInitialized]);
+    const toggleAccordion = (groupId) => {
+        setOpenAccordions(prev => ({ ...prev, [groupId]: !prev[groupId] }));
+    };
+    const handleItemClick = (item, group) => {
+        if (onSelectedItemChange) {
+            onSelectedItemChange(item);
+        }
+        if (group.onItemClick) {
+            group.onItemClick(item);
+        }
+    };
+    const handleItemDoubleClick = (item, group) => {
+        if (group.onItemDoubleClick) {
+            group.onItemDoubleClick(item);
+        }
+    };
+    const handleContextMenu = (event, item, group) => {
+        event.preventDefault();
+        if (!group.contextMenuItems) {
+            return;
+        }
+        const menuItems = typeof group.contextMenuItems === 'function'
+            ? group.contextMenuItems(item)
+            : group.contextMenuItems;
+        if (menuItems.length === 0) {
+            return;
+        }
+        setAnchorEl(event.currentTarget);
+        setContextMenuItems(menuItems);
+    };
+    const closeContextMenu = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    const handleHeaderContextMenu = (event, groupId) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setHeaderContextPosition({ x: event.clientX, y: event.clientY });
+        setHeaderContextGroupId(groupId);
+        setHeaderContextVisible(true);
+    };
+    const handleHeaderClick = (event, groupId) => {
+        if (event.button !== 0)
+            return;
+        toggleAccordion(groupId);
+    };
+    const closeHeaderContextMenu = useCallback(() => {
+        setHeaderContextVisible(false);
+        setHeaderContextPosition(null);
+        setHeaderContextGroupId(null);
+    }, []);
+    const headerContextMenuItems = headerContextGroupId ? [
+        {
+            text: openAccordions[headerContextGroupId] ? 'Collassa' : 'Espandi',
+            onClick: () => {
+                toggleAccordion(headerContextGroupId);
+                closeHeaderContextMenu();
+            }
+        }
+    ] : [];
+    const getGroupColor = (group, index) => {
+        return group.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length];
+    };
+    const renderBadges = (group, color) => {
+        if (group.badges && group.badges.length > 0) {
+            return (_jsx(BadgeContainer, { children: group.badges.map((badgeData, idx) => {
+                    const badgeKey = `${group.id}-badge-${badgeData.badge}-${idx}`;
+                    const badge = _jsx(Badge, { "$color": color, children: badgeData.badge });
+                    if (badgeData.tooltip) {
+                        return (_jsx(TMTooltip, { content: badgeData.tooltip, children: badge }, badgeKey));
+                    }
+                    return _jsx("span", { children: badge }, badgeKey);
+                }) }));
+        }
+        if (group.dataSource && group.dataSource.length > 0) {
+            return _jsx(Badge, { "$color": color, children: group.dataSource.length });
+        }
+        return null;
+    };
+    const renderAccordion = (group, index) => {
+        const color = getGroupColor(group, index);
+        const isOpen = openAccordions[group.id] ?? true;
+        if (group.customComponent) {
+            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
+        }
+        if (!group.dataSource || group.dataSource.length === 0)
+            return null;
+        if (!group.renderItem) {
+            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
+        }
+        const itemHeight = group.itemHeight || 80;
+        const maxHeight = group.dataSource.length * itemHeight + 20;
+        return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
+                            const isSelected = selectedItem === item;
+                            const isFocused = focusedItem === item;
+                            return (_jsx(ListItem, { "$isSelected": isSelected, "$color": color, onClick: () => handleItemClick(item, group), onDoubleClick: () => handleItemDoubleClick(item, group), onMouseEnter: () => setFocusedItem(item), onMouseLeave: () => setFocusedItem(undefined), onContextMenu: (e) => handleContextMenu(e, item, group), children: group.renderItem(item, isSelected, isFocused, color) }, itemIndex * 2));
+                        }) }) })] }, group.id));
+    };
+    if (!isInitialized) {
+        return (_jsx(LoadingContainer, { children: _jsx(LoadIndicator, { height: 40, width: 40 }) }));
+    }
+    if (!groups || groups.length === 0) {
+        return (_jsx(Container, { children: _jsx(ErrorMessage, { children: "\u26A0\uFE0F No accordion groups defined" }) }));
+    }
+    const handleContainerContextMenu = (event) => {
+        if (event.target === event.currentTarget) {
+            event.preventDefault();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Container, { onContextMenu: handleContainerContextMenu, children: groups.map((group, index) => renderAccordion(group, index)) }), anchorEl && contextMenuItems.length > 0 && (_jsx(ContextMenu, { dataSource: contextMenuItems, target: anchorEl, onHiding: closeContextMenu })), headerContextPosition && headerContextMenuItems.length > 0 && (_jsx(ContextMenu, { dataSource: headerContextMenuItems, visible: headerContextVisible, position: { my: 'left top', at: 'left top', offset: `${headerContextPosition.x} ${headerContextPosition.y}` }, onHiding: closeHeaderContextMenu }))] }));
+};
+export default TMAccordion;

package/lib/components/base/TMAreaManager.js

@@ -27,29 +27,29 @@ export class TMFileSystemItem {
 let abortController = new AbortController();
 const svgString = encodeURIComponent(renderToStaticMarkup(_jsx(IconFolderForCSS, { fill: "#9fc6e7" })));
 const svgDataUrl = `data:image/svg+xml,${svgString}`;
-const StyledFileManagerWrapper = styled.div `
-  .dx-filemanager .dx-treeview-item .dx-icon-folder {
-    display: none !important;
-  }
-  .dx-filemanager .dx-treeview-item .dx-treeview-item-content {
-    position: relative !important;
-    padding-left: 26px !important;
-    min-height: 22px !important;
-  }
-  .dx-filemanager .dx-treeview-item .dx-treeview-item-content::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 60%;
-    width: 20px;
-    height: 20px;
-    transform: translateY(-50%);
-    background-image: url("${svgDataUrl}");
-    background-size: contain;
-    background-repeat: no-repeat;
-    display: inline-block;
-    z-index: 1;
-  }
+const StyledFileManagerWrapper = styled.div `
+  .dx-filemanager .dx-treeview-item .dx-icon-folder {
+    display: none !important;
+  }
+  .dx-filemanager .dx-treeview-item .dx-treeview-item-content {
+    position: relative !important;
+    padding-left: 26px !important;
+    min-height: 22px !important;
+  }
+  .dx-filemanager .dx-treeview-item .dx-treeview-item-content::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 60%;
+    width: 20px;
+    height: 20px;
+    transform: translateY(-50%);
+    background-image: url("${svgDataUrl}");
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
+    z-index: 1;
+  }
 `;
 const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false }) => {
     // State to store the instance of CustomFileSystemProvider. It is initialized once and used for managing file system operations.

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

@@ -16,6 +16,7 @@ export interface ITMButton extends ITMEditorBase {
     padding?: string;
     showTooltip?: boolean;
     onClick?: VoidFunction;
+    onMouseDown?: (e: any) => any;
 }
 declare const TMButton: React.ForwardRefExoticComponent<ITMButton & React.RefAttributes<HTMLButtonElement>>;
 export default TMButton;