@topconsultnpm/sdkui-react 6.19.0-dev1.9 → 6.19.0-dev2.10

package/lib/components/NewComponents/FloatingMenuBar/types.d.ts

@@ -0,0 +1,30 @@
+import type { TMContextMenuItemProps } from '../ContextMenu';
+export interface TMFloatingMenuItem {
+    id: string;
+    name: string;
+    icon: React.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    isPinned?: boolean;
+    originalMenuItem?: TMContextMenuItemProps;
+}
+export interface TMFloatingMenuBarProps {
+    containerRef: React.RefObject<HTMLElement | null>;
+    contextMenuItems?: TMContextMenuItemProps[];
+    storageKey?: string;
+    isConstrained?: boolean;
+    defaultPosition?: Position;
+    maxItems?: number;
+}
+export interface Position {
+    x: number;
+    y: number;
+}
+export interface TMFloatingMenuBarState {
+    position: Position;
+    isDragging: boolean;
+    isConfigMode: boolean;
+    orientation: 'horizontal' | 'vertical';
+    items: TMFloatingMenuItem[];
+    draggedItemIndex: number | null;
+}

package/lib/components/NewComponents/FloatingMenuBar/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/NewComponents/Notification/Notification.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { NotificationProps } from './types';
+declare const Notification: React.FC<NotificationProps>;
+export default Notification;

package/lib/components/NewComponents/Notification/Notification.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import * as S from './styles';
+const Notification = ({ title, message, mode = 'info', position = 'top-right', duration = 3000, closable = false, stopOnMouseEnter = true, hasProgress = true, onClose, }) => {
+    const [state, setState] = useState({
+        visible: true,
+        isPaused: false,
+        progress: 100,
+    });
+    const timeoutRef = useRef(undefined);
+    const remainingTimeRef = useRef(duration);
+    const pauseTimeRef = useRef(0);
+    const closeNotification = () => {
+        setState(prev => ({ ...prev, visible: false }));
+        setTimeout(() => {
+            onClose?.();
+        }, 300);
+    };
+    useEffect(() => {
+        // Set up auto-close timer
+        timeoutRef.current = setTimeout(() => {
+            closeNotification();
+        }, duration);
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [duration]);
+    const handleMouseEnter = () => {
+        if (!stopOnMouseEnter)
+            return;
+        // Pause the timer
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            pauseTimeRef.current = Date.now();
+        }
+        setState(prev => ({ ...prev, isPaused: true }));
+    };
+    const handleMouseLeave = () => {
+        if (!stopOnMouseEnter)
+            return;
+        // Resume the timer with remaining time
+        const pauseDuration = Date.now() - pauseTimeRef.current;
+        remainingTimeRef.current = Math.max(0, remainingTimeRef.current - pauseDuration);
+        timeoutRef.current = setTimeout(() => {
+            closeNotification();
+        }, remainingTimeRef.current);
+        setState(prev => ({ ...prev, isPaused: false }));
+    };
+    const handleClose = (e) => {
+        e.stopPropagation();
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        closeNotification();
+    };
+    return (_jsxs(S.NotificationContainer, { "$position": position, "$mode": mode, "$visible": state.visible, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "alert", "aria-live": "assertive", children: [_jsxs(S.NotificationContent, { children: [_jsx(S.NotificationTitle, { children: title }), _jsx(S.NotificationMessage, { children: message })] }), closable && (_jsx(S.CloseButton, { onClick: handleClose, "aria-label": "Close notification", children: "\u00D7" })), hasProgress && (_jsx(S.ProgressBar, { "$duration": duration, "$mode": mode, "$isPaused": state.isPaused }))] }));
+};
+export default Notification;

package/lib/components/NewComponents/Notification/NotificationContainer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { NotificationPosition } from './types';
+interface NotificationContainerProps {
+    position: NotificationPosition;
+    children: React.ReactNode;
+}
+declare const NotificationContainer: React.FC<NotificationContainerProps>;
+export default NotificationContainer;

package/lib/components/NewComponents/Notification/NotificationContainer.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+const Container = styled.div `
+  position: fixed;
+  z-index: 10002;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  pointer-events: none;
+
+  ${props => {
+    const isTop = props.$position.startsWith('top');
+    const isBottom = props.$position.startsWith('bottom');
+    const isLeft = props.$position.endsWith('left');
+    const isRight = props.$position.endsWith('right');
+    const isCenter = props.$position.endsWith('center');
+    return `
+      ${isTop ? 'top: 24px;' : ''}
+      ${isBottom ? 'bottom: 24px;' : ''}
+      ${isLeft ? 'left: 24px;' : ''}
+      ${isRight ? 'right: 24px;' : ''}
+      ${isCenter ? 'left: 50%; transform: translateX(-50%);' : ''}
+    `;
+}}
+
+  & > * {
+    pointer-events: auto;
+  }
+`;
+const NotificationContainer = ({ position, children }) => {
+    return _jsx(Container, { "$position": position, children: children });
+};
+export default NotificationContainer;

package/lib/components/NewComponents/Notification/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Notification';
+export * from './types';

package/lib/components/NewComponents/Notification/index.js

@@ -0,0 +1,2 @@
+export { default } from './Notification';
+export * from './types';

package/lib/components/NewComponents/Notification/styles.d.ts

@@ -0,0 +1,21 @@
+import type { NotificationMode, NotificationPosition } from './types';
+export declare const NotificationContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $position: NotificationPosition;
+    $mode: NotificationMode;
+    $visible: boolean;
+}>> & string;
+export declare const NotificationContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const NotificationTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const NotificationMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ProgressBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, {
+    $duration: number;
+    $mode: NotificationMode;
+    $isPaused: boolean;
+}>, {
+    $duration: number;
+    $mode: NotificationMode;
+    $isPaused: boolean;
+}>> & string;

package/lib/components/NewComponents/Notification/styles.js

@@ -0,0 +1,180 @@
+import styled, { keyframes } from 'styled-components';
+const slideInFromTop = keyframes `
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideInFromBottom = keyframes `
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideOut = keyframes `
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+`;
+const getModeColors = (mode) => {
+    const colors = {
+        success: {
+            bg: '#10b981',
+            bgDark: '#059669',
+            border: '#34d399',
+            text: '#ffffff',
+        },
+        error: {
+            bg: '#ef4444',
+            bgDark: '#dc2626',
+            border: '#f87171',
+            text: '#ffffff',
+        },
+        warning: {
+            bg: '#f59e0b',
+            bgDark: '#d97706',
+            border: '#fbbf24',
+            text: '#ffffff',
+        },
+        info: {
+            bg: '#3b82f6',
+            bgDark: '#2563eb',
+            border: '#60a5fa',
+            text: '#ffffff',
+        },
+    };
+    return colors[mode];
+};
+export const NotificationContainer = styled.div `
+  position: relative;
+  z-index: 1;
+  min-width: 320px;
+  max-width: 420px;
+  background: ${props => getModeColors(props.$mode).bg};
+  border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2),
+              0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 16px 20px;
+  animation: ${props => {
+    if (!props.$visible)
+        return slideOut;
+    return props.$position.startsWith('top') ? slideInFromTop : slideInFromBottom;
+}} 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  backdrop-filter: blur(10px);
+  border: 2px solid ${props => getModeColors(props.$mode).border};
+  color: ${props => getModeColors(props.$mode).text};
+  overflow: hidden;
+
+  [data-theme='dark'] & {
+    background: ${props => getModeColors(props.$mode).bgDark};
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
+                0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  @media (max-width: 768px) {
+    min-width: 280px;
+    max-width: calc(100vw - 48px);
+  }
+`;
+export const NotificationContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-right: 24px;
+`;
+export const NotificationTitle = styled.div `
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+`;
+export const NotificationMessage = styled.div `
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  opacity: 0.95;
+`;
+export const CloseButton = styled.button `
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+  font-size: 18px;
+  line-height: 1;
+  padding: 0;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.2);
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &:focus {
+    outline: 2px solid rgba(255, 255, 255, 0.5);
+    outline-offset: 2px;
+  }
+`;
+export const ProgressBar = styled.div.attrs(props => ({
+    style: {
+        animationDuration: `${props.$duration}ms`,
+    },
+})) `
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 4px;
+  width: 100%;
+  background: ${props => getModeColors(props.$mode).border};
+  border-radius: 0 0 0 10px;
+  box-shadow: 0 0 8px ${props => getModeColors(props.$mode).border};
+  transform-origin: left;
+  animation: progress-shrink linear forwards;
+  animation-play-state: ${props => props.$isPaused ? 'paused' : 'running'};
+
+  @keyframes progress-shrink {
+    from {
+      transform: scaleX(1);
+    }
+    to {
+      transform: scaleX(0);
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
+  }
+`;

package/lib/components/NewComponents/Notification/types.d.ts

@@ -0,0 +1,18 @@
+export type NotificationMode = 'warning' | 'info' | 'error' | 'success';
+export type NotificationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface NotificationProps {
+    title: string;
+    message: string;
+    mode?: NotificationMode;
+    position?: NotificationPosition;
+    duration?: number;
+    closable?: boolean;
+    stopOnMouseEnter?: boolean;
+    hasProgress?: boolean;
+    onClose?: () => void;
+}
+export interface NotificationState {
+    visible: boolean;
+    isPaused: boolean;
+    progress: number;
+}

package/lib/components/NewComponents/Notification/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -7,6 +7,7 @@ export declare const StyledMultiViewPanel: import("styled-components/dist/types"
 }>> & 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 StyledReferenceButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 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>, {
     $isOpen?: boolean;
     $padding?: string;

package/lib/components/base/Styled.js

@@ -36,6 +36,46 @@ export const StyledToolbarForm = styled.div `
     gap: 2px;
     background-color: ${TMColors.toolbar_background};
 `;
+export const StyledReferenceButton = styled.button `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 16px;
+    border-radius: 20px;
+    border: none;
+    background-color: ${TMColors.button_floating_background};
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: center;
+    max-width: 200px;
+    gap: 2px;
+    
+    &:hover {
+        opacity: 0.9;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+    
+    &:active {
+        transform: translateY(0);
+    }
+    
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    
+    span {
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
 export const StyledPanelPage = styled.div ` 
   position: absolute; 
   width: calc(100% - 50px); 

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

@@ -0,0 +1,11 @@
+import { LayoutCustomButtonDescriptor } from '@topconsultnpm/sdk-ts';
+import { MetadataValueDescriptorEx } from '../..';
+type TMCustomButtonProps = {
+    button: LayoutCustomButtonDescriptor;
+    isModal?: boolean;
+    formData?: MetadataValueDescriptorEx[];
+    selectedItems?: Array<any>;
+    onClose?: () => void;
+};
+declare const TMCustomButton: (props: TMCustomButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TMCustomButton;

package/lib/components/base/TMCustomButton.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { useEffect, useRef, useState } from 'react';
+import TMModal from './TMModal';
+import styled from 'styled-components';
+import { processButtonAttributes } from '../../helper/dcmtsHelper';
+const IframeContainer = styled.div `
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+`;
+const StyledIframe = styled.iframe `
+  border: none;
+  flex: 1;
+`;
+const TMCustomButton = (props) => {
+    const { button, isModal = true, formData, selectedItems, onClose } = props;
+    const { appName: scriptUrl, arguments: args } = button;
+    const iframeRef = useRef(null);
+    const attributes = processButtonAttributes(args, formData);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
+    const getTargetOrigin = (url) => {
+        if (!url)
+            return '*';
+        try {
+            const urlObj = new URL(url);
+            return urlObj.origin;
+        }
+        catch {
+            return '*';
+        }
+    };
+    useEffect(() => {
+        if (iframeRef.current?.contentWindow) {
+            const mergedAttributes = { ...attributes, selectedItems: selectedItems };
+            iframeRef.current.contentWindow.postMessage({
+                "options": mergedAttributes,
+                "selectedItems": selectedItems,
+                "session": SDK_Globals.tmSession
+            }, getTargetOrigin(scriptUrl));
+        }
+        clearTimeout(timeoutIframe);
+    }, [loading, error, scriptUrl, attributes]);
+    const handleLoad = () => setLoading(false);
+    const handleError = () => {
+        setLoading(false);
+        setError(true);
+    };
+    // Timeout di sicurezza nel caso l'evento 'error' non venga chiamato
+    const timeoutIframe = setTimeout(() => {
+        if (loading)
+            handleError();
+    }, 5000); // 5 secondi
+    useEffect(() => {
+        if (!isModal && scriptUrl) {
+            window.open(scriptUrl, '_blank');
+            onClose?.();
+        }
+    }, [isModal, scriptUrl, onClose]);
+    return isModal ? (_jsx(TMModal, { title: button.title, width: '60%', height: '60%', resizable: true, onClose: onClose, children: _jsxs(IframeContainer, { children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }) })) : null;
+};
+export default TMCustomButton;

package/lib/components/base/TMFileManagerDataGridView.js

@@ -50,7 +50,8 @@ const TMFileManagerDataGridView = (props) => {
         }
     };
     const cellDefaultRender = useCallback((cellData) => {
-        return renderHighlightedText(cellData.value.toString(), searchText, false);
+        const value = cellData.value ?? '';
+        return renderHighlightedText(value.toString(), searchText, false);
     }, [searchText]);
     const cellNameRender = useCallback((cellData) => {
         const { checkoutDate, checkOutUserID, checkOutUserName, version, ext, creationTime, lastUpdateTime } = cellData.data;
@@ -66,6 +67,8 @@ const TMFileManagerDataGridView = (props) => {
         return _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: _jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }) });
     }, []);
     const cellDatetimeRender = useCallback((cellData) => {
+        if (!cellData.value)
+            return '-';
         return renderHighlightedText(Globalization.getDateTimeDisplayValue(cellData.value).toString(), searchText, false);
     }, [searchText]);
     const cellSizeRender = useCallback((cellData) => {

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

@@ -48,7 +48,8 @@ export interface ITMLayoutContainerProps {
     alignItems?: string;
     direction?: 'vertical' | 'horizontal';
     onClick?: () => void;
+    onContextMenu?: (e: React.MouseEvent) => void;
 }
-declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutContainerProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -193,9 +193,9 @@ const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorCo
 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' }) => {
+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, "$direction": direction, style: { gap: gap }, children: [" ", renderedEls(), " "] }));
+    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/TMPopUp.js

@@ -152,24 +152,11 @@ const ResponsiveMessageText = styled.div `
         line-height: 1.1;
     }
 `;
-const ResponsiveButton = styled(TMButton) `
-    font-size: ${props => props.fontSize || 'clamp(12px, 2vw, 1.1rem)'} !important;
-    padding: clamp(2px, 1vw, 8px) clamp(4px, 2vw, 12px) !important;
-    min-width: clamp(30px, 10vw, 60px) !important;
-    white-space: nowrap !important;
-    
-    @media (max-width: 200px) {
-        padding: 2px 4px !important;
-        min-width: 25px !important;
-        font-size: 8px !important;
-    }
-    
-    @media (max-width: 150px) {
-        padding: 1px 3px !important;
-        min-width: 20px !important;
-        font-size: 7px !important;
-    }
-`;
+// ResponsiveButton wrapper component to avoid circular dependency
+const ResponsiveButton = (props) => {
+    const { fontSize: customFontSize, ...otherProps } = props;
+    return _jsx(TMButton, { fontSize: customFontSize || 'clamp(12px, 2vw, 1.1rem)', padding: "clamp(2px, 1vw, 8px) clamp(4px, 2vw, 12px)", width: "clamp(30px, 10vw, 60px)", ...otherProps });
+};
 const ResponsiveMessageBody = ({ message, isMobile, MessageToolbar, showToppy }) => {
     return (_jsxs(ResponsiveMessageContainer, { children: [_jsxs(ResponsiveMessageContent, { "$isMobile": isMobile, children: [showToppy && _jsx(ResponsiveToppyImage, { "$isMobile": isMobile, src: toppy, alt: "Toppy" }), _jsx(ResponsiveMessageText, { "$isMobile": isMobile, children: typeof message === 'string' ? _jsx(Message, { msg: message }) : message })] }), _jsx(MessageToolbar, {})] }));
 };

package/lib/components/base/TMTreeView.js

@@ -332,15 +332,16 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                                 if (input) {
                                     input.indeterminate = isIndeterminate(node);
                                 }
-                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minHeight: 0 }, onClick: (e) => { handleNodeClick(node, e); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: '100%' }, children: [renderTree(getVisibleItems(node)), needsLoadMoreButton(node) && (_jsx("div", { style: { display: 'flex', justifyContent: 'center', margin: '5px 0' }, children: _jsx(TMButton, { onClick: () => handleLoadMoreItems(node.key), showTooltip: false, caption: `Carica altri ${itemsPerPage}... (${node.visibleItemsCount ?? itemsPerPage} / ${node.items?.length ?? 0})` }) }))] }))] }, node.key)));
+                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, onClick: (e) => { handleNodeClick(node, e); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: '100%' }, children: [renderTree(getVisibleItems(node)), needsLoadMoreButton(node) && (_jsx("div", { style: { display: 'flex', justifyContent: 'center', margin: '5px 0' }, children: _jsx(TMButton, { onClick: () => handleLoadMoreItems(node.key), showTooltip: false, caption: `Carica altri ${itemsPerPage}... (${node.visibleItemsCount ?? itemsPerPage} / ${node.items?.length ?? 0})` }) }))] }))] }, node.key)));
     }, [handleNodeClick, handleNodeToggle, handleCheckboxChange, focusedItem, selectedItems, allowMultipleSelection, getVisibleItems, needsLoadMoreButton, handleLoadMoreItems, itemsPerPage]);
-    return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', padding: '0px 5px 2px 2px' }, children: renderTree(dataSource) }));
+    return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', overflowX: 'hidden', padding: '0px 5px 2px 2px' }, children: renderTree(dataSource) }));
 };
 export default TMTreeView;
 export const StyledTreeNode = styled.div `
 	display: flex;
 	flex-direction: row;
 	width: 100%;
+	min-width: 0;
 	min-height: 22px;
 	max-height: 30px;
 	gap: 5px;

package/lib/components/editors/TMHtmlEditor.d.ts

@@ -1,4 +1,5 @@
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
+export declare const sanitizeAndFormatComment: (raw?: string) => string;
 export interface ITMHtmlEditor {
     /** Width of the editor (e.g., '100%', '500px') */
     width?: string;
@@ -28,6 +29,10 @@ export interface ITMHtmlEditor {
     toolbarMode?: 'compact' | 'expanded';
     /** If true, the editor will be focused on mount */
     autoFocus?: boolean;
+    /** Maximum number of characters allowed in the editor */
+    maxLength?: number;
+    /** If true, displays a character count below the editor */
+    showCount?: boolean;
 }
 declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
 export default TMHtmlEditor;