@topconsultnpm/sdkui-react 6.21.0-dev3.8 → 6.21.0-dev4.10

package/lib/components/NewComponents/ContextMenu/TMContextMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as S from './styles';
 import { useIsMobile, useMenuPosition, useIsIOS } from './hooks';
@@ -395,6 +395,32 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
             ];
         });
     };
+    useLayoutEffect(() => {
+        if (hoveredSubmenus.length === 0)
+            return;
+        const capSubmenus = () => {
+            const padding = 8;
+            const submenus = document.querySelectorAll('[data-submenu="true"]');
+            submenus.forEach(el => {
+                el.style.maxHeight = '';
+                el.style.overflowY = '';
+                el.style.overflowX = '';
+                const rect = el.getBoundingClientRect();
+                const opensUp = el.dataset.openUp === 'true';
+                const available = opensUp
+                    ? rect.bottom - padding
+                    : window.innerHeight - rect.top - padding;
+                if (rect.height <= available)
+                    return;
+                el.style.maxHeight = `${Math.max(80, available)}px`;
+                el.style.overflowY = 'auto';
+                el.style.overflowX = 'hidden';
+            });
+        };
+        capSubmenus();
+        window.addEventListener('resize', capSubmenus);
+        return () => window.removeEventListener('resize', capSubmenus);
+    }, [hoveredSubmenus]);
     const handleMouseLeave = (depth = 0) => {
         if (isMobile)
             return;
@@ -474,6 +500,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                     // display: 'inline-block',
                     WebkitTouchCallout: isIOS ? 'none' : undefined,
                     WebkitUserSelect: isIOS ? 'none' : undefined,
-                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
+                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", "data-open-up": submenu.openUp ? 'true' : 'false', onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
 };
 export default TMContextMenu;

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

@@ -5,7 +5,7 @@ export declare const Overlay: import("styled-components/dist/types").IStyledComp
 }, never>>> & string;
 export declare const FloatingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "key" | keyof import("react").HTMLAttributes<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;
-}, "$x" | "$y" | "$bgColor" | "$orientation" | "$verticalDirection" | "$isDragging" | "$isConfigMode" | "$isConstrained" | "$isHidden"> & {
+}, "$bgColor" | "$x" | "$y" | "$isDragging" | "$orientation" | "$verticalDirection" | "$isConfigMode" | "$isConstrained" | "$isHidden"> & {
     $x: number;
     $y: number;
     $orientation: "horizontal" | "vertical";
@@ -15,7 +15,7 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
     $isConstrained?: boolean;
     $isHidden?: boolean;
     $bgColor?: string;
-}, "$x" | "$y" | "$bgColor" | "$orientation" | "$verticalDirection" | "$isDragging" | "$isConfigMode" | "$isConstrained" | "$isHidden"> & {
+}, "$bgColor" | "$x" | "$y" | "$isDragging" | "$orientation" | "$verticalDirection" | "$isConfigMode" | "$isConstrained" | "$isHidden"> & {
     $x: number;
     $y: number;
     $orientation: "horizontal" | "vertical";
@@ -25,9 +25,9 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
     $isConstrained?: boolean;
     $isHidden?: boolean;
     $bgColor?: string;
-}, "children" | "ref" | "title" | "accessKey" | "tabIndex" | "content" | "id" | "style" | "hidden" | "color" | "onMouseEnter" | "onMouseLeave" | "onTouchStart" | "onClick" | "onTouchEnd" | "suppressHydrationWarning" | "className" | "lang" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "$x" | "$y" | "$bgColor" | "$orientation" | "$verticalDirection" | "$isDragging" | "$isConfigMode" | "$isConstrained" | "$isHidden"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+}, "children" | "ref" | "title" | "accessKey" | "tabIndex" | "content" | "id" | "style" | "hidden" | "color" | "onMouseEnter" | "onMouseLeave" | "onTouchStart" | "onClick" | "onTouchEnd" | "suppressHydrationWarning" | "className" | "lang" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "$bgColor" | "$x" | "$y" | "$isDragging" | "$orientation" | "$verticalDirection" | "$isConfigMode" | "$isConstrained" | "$isHidden"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "key" | keyof import("react").HTMLAttributes<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;
-}, "$x" | "$y" | "$bgColor" | "$orientation" | "$verticalDirection" | "$isDragging" | "$isConfigMode" | "$isConstrained" | "$isHidden"> & {
+}, "$bgColor" | "$x" | "$y" | "$isDragging" | "$orientation" | "$verticalDirection" | "$isConfigMode" | "$isConstrained" | "$isHidden"> & {
     $x: number;
     $y: number;
     $orientation: "horizontal" | "vertical";
@@ -37,7 +37,7 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
     $isConstrained?: boolean;
     $isHidden?: boolean;
     $bgColor?: string;
-}, "$x" | "$y" | "$bgColor" | "$orientation" | "$verticalDirection" | "$isDragging" | "$isConfigMode" | "$isConstrained" | "$isHidden"> & {
+}, "$bgColor" | "$x" | "$y" | "$isDragging" | "$orientation" | "$verticalDirection" | "$isConfigMode" | "$isConstrained" | "$isHidden"> & {
     $x: number;
     $y: number;
     $orientation: "horizontal" | "vertical";
@@ -47,7 +47,7 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
     $isConstrained?: boolean;
     $isHidden?: boolean;
     $bgColor?: string;
-}, "children" | "ref" | "title" | "accessKey" | "tabIndex" | "content" | "id" | "style" | "hidden" | "color" | "onMouseEnter" | "onMouseLeave" | "onTouchStart" | "onClick" | "onTouchEnd" | "suppressHydrationWarning" | "className" | "lang" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "$x" | "$y" | "$bgColor" | "$orientation" | "$verticalDirection" | "$isDragging" | "$isConfigMode" | "$isConstrained" | "$isHidden">>> & string;
+}, "children" | "ref" | "title" | "accessKey" | "tabIndex" | "content" | "id" | "style" | "hidden" | "color" | "onMouseEnter" | "onMouseLeave" | "onTouchStart" | "onClick" | "onTouchEnd" | "suppressHydrationWarning" | "className" | "lang" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "$bgColor" | "$x" | "$y" | "$isDragging" | "$orientation" | "$verticalDirection" | "$isConfigMode" | "$isConstrained" | "$isHidden">>> & string;
 export declare const GripHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$orientation"> & {
     $orientation: "horizontal" | "vertical";
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$orientation"> & {

package/lib/components/base/TMAreaManager.js

@@ -51,6 +51,17 @@ const StyledFileManagerWrapper = styled.div `
     display: inline-block;
     z-index: 1;
   }
+  /* Nodi foglia: nascondiamo il toggle (stato incoerente in DevExtreme) e riserviamo lo stesso spazio della freccia (16px expander + 8px gap = 24px). */
+  .dx-filemanager .dx-treeview-node-is-leaf
+    > .dx-treeview-item
+    > [class*="dx-treeview-toggle-item-visibility"] {
+    display: none !important;
+  }
+  .dx-filemanager .dx-treeview-node-is-leaf
+    > .dx-treeview-item
+    > .dx-treeview-item-content {
+    margin-inline-start: 24px;
+  }
 `;
 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/TMDataGrid.js

@@ -36,6 +36,8 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     const [customContextMenuPosition, setCustomContextMenuPosition] = useState({ x: 0, y: 0 });
     const [customContextMenuRowKey, setCustomContextMenuRowKey] = useState(undefined);
     const gridContainerRef = useRef(null);
+    // Ref per evitare focus ripetuti sulla search panel
+    const searchPanelFocusedRef = useRef(false);
     useEffect(() => {
         const count = getRecordCount(dataSource);
         setTotalRecordCount(count);
@@ -44,10 +46,15 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     useEffect(() => {
         if (!searchPanelFocusTrigger || searchPanelFocusTrigger <= 0 || !showSearchPanel || !internalRef.current)
             return;
+        // Reset del flag quando cambia il trigger (per permettere un nuovo focus se richiesto)
+        searchPanelFocusedRef.current = false;
         setTimeout(() => {
+            if (searchPanelFocusedRef.current)
+                return;
             const searchInput = internalRef.current?.instance().element().querySelector('.dx-datagrid-search-panel input');
             if (searchInput) {
                 searchInput.focus();
+                searchPanelFocusedRef.current = true;
             }
         }, 100);
     }, [searchPanelFocusTrigger, showSearchPanel]);
@@ -305,13 +312,16 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             return;
         // Update state with the current number of visible rows in the DataGrid
         setVisibleItemsCount(internalRef.current.instance()?.getVisibleRows()?.length ?? 0);
-        // Focusing SearchPanel on content ready
-        if (showSearchPanel && searchPanelFocusTrigger && searchPanelFocusTrigger > 0) {
+        // Focusing SearchPanel on content ready - solo se non è già stato fatto
+        if (showSearchPanel && searchPanelFocusTrigger && searchPanelFocusTrigger > 0 && !searchPanelFocusedRef.current) {
             // Use a small delay to ensure the DOM is fully rendered before trying to focus
             setTimeout(() => {
+                if (searchPanelFocusedRef.current)
+                    return;
                 const searchInput = internalRef.current?.instance().element().querySelector('.dx-datagrid-search-panel input');
                 if (searchInput) {
                     searchInput.focus();
+                    searchPanelFocusedRef.current = true;
                 }
             }, 100);
         }

package/lib/components/base/TMDataGridExportForm.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Workbook } from 'exceljs';
+import { Workbook } from 'devextreme-exceljs-fork';
 import { buildValueToLabelMapFromDataColumns, getExceptionMessage, SDKUI_Localizator } from '../../helper';
 import TMCheckBox from '../editors/TMCheckBox';
 import TMButton from './TMButton';
@@ -69,15 +69,24 @@ const TMDataGridExportForm = (props) => {
             const selectedSet = new Set(selectedRowKeys);
             // If exporting only selected rows, filter the dataSource accordingly; otherwise use the full dataSource
             const rowsToExport = exportSelectedOnly ? dataSource.filter((item) => selectedSet.has(item.rowIndex)) : dataSource;
-            // Filter columns to only those that are visible; optionally hide 'object' data types based on the `hideSelection` flag
+            // Filter columns to only those that are visible; optionally include FILEEXT column based on `exportSelectedFormatColumns` flag
             let visibleColumns = dataColumns.filter(col => {
                 if (!exportSelectedFormatColumns) {
                     return col.visible !== false && col.dataField !== "FILEEXT";
                 }
                 else {
-                    return col.visible !== false;
+                    // Include FILEEXT even if not visible when exportSelectedFormatColumns is true
+                    return col.visible !== false || col.dataField === "FILEEXT";
                 }
             });
+            // If exportSelectedFormatColumns is true, move FILEEXT to be the first column (will be second after "Selected" column)
+            if (exportSelectedFormatColumns) {
+                const fileExtIndex = visibleColumns.findIndex(col => col.dataField === "FILEEXT");
+                if (fileExtIndex > 0) {
+                    const [fileExtCol] = visibleColumns.splice(fileExtIndex, 1);
+                    visibleColumns.unshift(fileExtCol);
+                }
+            }
             // Function to get the value for a column and its value in a row
             const getValue = (col, value) => {
                 // Replace raw value with corresponding label from the map if applicable
@@ -164,11 +173,13 @@ const TMDataGridExportForm = (props) => {
                             return;
                         const headerLength = col.header.toString().length;
                         // 'getColumn' accetta solo string | number, col.key è garantito perché controllato sopra
-                        const maxDataLength = worksheet.getColumn(col.key).values.reduce((max, val) => {
-                            const strVal = val !== undefined && val !== null ? val.toString() : '';
-                            const length = strVal.length;
-                            return length > max ? length : max;
-                        }, 0);
+                        const columnValues = worksheet.getColumn(col.key).values;
+                        const maxDataLength = Array.isArray(columnValues)
+                            ? columnValues.reduce((max, val) => {
+                                const strVal = val !== undefined && val !== null ? String(val) : '';
+                                return strVal.length > max ? strVal.length : max;
+                            }, 0)
+                            : 0;
                         col.width = Math.max(headerLength, maxDataLength) + 2;
                     });
                     // Apply font and border styling to all cells in all rows in a single pass

package/lib/components/base/TMModal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import { Popup } from 'devextreme-react';
 import styled from 'styled-components';
-import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
+import { TMCard } from './TMLayout';
 import { FontSize, TMColors } from '../../utils/theme';
 import { IconWindowMaximize, IconWindowMinimize, svgToString } from '../../helper';
 const StyledModal = styled.div `
@@ -110,6 +110,6 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
                         onClick: () => setIsFullScreen(!isFullScreen)
                     }
                 }
-            ] : undefined, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 40px)' : '100%', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
+            ] : undefined, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }, children: [toolbar && (_jsx(StyledModalToolbar, { children: toolbar })), _jsx("div", { style: { flex: 1, overflow: 'hidden', minHeight: 0 }, children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
 };
 export default TMModal;

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

@@ -24,6 +24,7 @@ interface ITMExceptionBox extends ITMPopup {
     exception?: any;
     onClose?: () => void;
 }
+export declare const sanitizeException: (exception: any) => any;
 declare class TMExceptionBoxManager {
     static show({ title, exception, onClose }: ITMExceptionBox): void;
 }

package/lib/components/base/TMPopUp.js

@@ -23,6 +23,45 @@ export var ButtonNames;
 // Dimensioni minime di default per i popup
 const DEFAULT_MIN_WIDTH = 500;
 const DEFAULT_MIN_HEIGHT = 400;
+// filtr sensitive keys from all errors.
+const SENSITIVE_KEYS = ['password', 'username'];
+const redactSensitiveJsonString = (value) => {
+    const trimmed = value.trim();
+    const looksLikeJson = (trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'));
+    if (!looksLikeJson)
+        return value;
+    try {
+        return JSON.stringify(redactSensitiveValue(JSON.parse(value)));
+    }
+    catch {
+        return value;
+    }
+};
+const redactSensitiveValue = (value) => {
+    if (Array.isArray(value))
+        return value.map(redactSensitiveValue);
+    if (typeof value === 'string')
+        return redactSensitiveJsonString(value);
+    if (!value || typeof value !== 'object')
+        return value;
+    const result = {};
+    for (const key of Object.keys(value)) {
+        result[key] = SENSITIVE_KEYS.includes(key.toLowerCase()) ? '***' : redactSensitiveValue(value[key]);
+    }
+    return result;
+};
+export const sanitizeException = (exception) => {
+    if (exception === null || exception === undefined)
+        return exception;
+    let plain;
+    try {
+        plain = JSON.parse(JSON.stringify(exception));
+    }
+    catch {
+        return exception;
+    }
+    return redactSensitiveValue(plain);
+};
 const StyledExeptionToolbar = styled.div `
     display: flex;
     flex-direction: row;
@@ -273,6 +312,7 @@ const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.a
     let dateString = d.getDate() + '/' + d.getMonth() + 1 + '/' + d.getFullYear();
     let timeString = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ':' + d.getMilliseconds();
     let message = getExceptionMessage(exception);
+    const safeException = useMemo(() => sanitizeException(exception), [exception]);
     let deviceType = useDeviceType();
     /**
      * Gestore chiamato quando il popup viene mostrato.
@@ -304,17 +344,34 @@ const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.a
     };
     const getFullMessage = () => {
         let fullMessage = '';
-        fullMessage += `${d}\n${'-' + JSON.stringify(exception)}\n` + `-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`;
+        fullMessage += `${d}\n${'-' + JSON.stringify(safeException)}\n` + `-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`;
         return fullMessage.replaceAll('{', '').replaceAll('}', '').replaceAll(`":`, '=').replaceAll(`,"`, '\n').replaceAll(`"`, '');
     };
     const copyToClipBoard = (e) => {
         navigator.clipboard.writeText(e);
         ShowAlert({ mode: 'success', duration: 3000, message: SDKUI_Localizator.CopiedSuccessfully, title: 'Success' });
     };
+    const handleClose = useCallback(() => {
+        onClose?.();
+        setIsVisible(false);
+    }, [onClose]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' || e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            handleClose();
+        }
+    }, [handleClose]);
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        window.addEventListener('keydown', handleKeyDown, true);
+        return () => window.removeEventListener('keydown', handleKeyDown, true);
+    }, [isVisible, handleKeyDown]);
     const ExceptionToolbar = () => {
         return (_jsxs(StyledExeptionToolbar, { children: [_jsx(TMButton, { color: 'primaryOutline', btnStyle: 'text', onClick: () => copyToClipBoard(getFullMessage()), caption: SDKUI_Localizator.CopyToClipboard, showTooltip: false }), _jsx(TMButton, { btnStyle: 'text', onClick: () => { onClose?.(); setIsVisible(false); }, caption: SDKUI_Localizator.Close, showTooltip: false, color: 'error' })] }));
     };
-    return (_jsx(Popup, { ref: popupRef, resizeEnabled: resizable, visible: isVisible, onHidden: () => { onClose?.(); setIsVisible(false); }, onShown: handleShown, showCloseButton: true, width: calcResponsiveSizes(deviceType, '600px', '400px', '350px'), height: '350px', minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', title: title, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsxs(TMTabGroup, { validationItems: [], children: [_jsxs(TMTab, { label: SDKUI_Localizator.Error, children: [_jsxs(TabContextContainer, { style: { height: 'calc(100% - 68px )', paddingRight: '40px' }, children: [_jsxs("p", { children: [" ", _jsx("span", { style: { color: TMColors.primary }, children: "Messaggio: " }), " ", message] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: '5px', marginTop: '5px' }, children: _jsxs("div", { children: [_jsxs("span", { style: { color: TMColors.primary }, children: [SDKUI_Localizator.Date, "  ", SDKUI_Localizator.Time.toLowerCase(), ": "] }), d.toString()] }) })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`Date: ${dateString}\nTime: ${timeString}\nMessage: ${message}`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.CompleteError, children: [_jsx(TabContextContainer, { style: { paddingRight: '40px' }, children: JSON.stringify(exception).replaceAll('{', '').replaceAll('}', '').split(`,"`).map((t, index) => (_jsxs("div", { style: { padding: '5px', borderBottom: '1px solid rgb(180,180,180)' }, children: ["\u261B", ' ' + (t.toLowerCase().includes('detail') ? (t.replaceAll(`"`, '').replaceAll(`:`, ': ').replaceAll(String.fromCharCode(92), '')) : (t.replaceAll(`"`, '').replaceAll(`:`, ': ')))] }, index))) }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(JSON.stringify(exception).replaceAll('{', '').replaceAll('}', '').replaceAll(',', '\n')), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.Details, children: [_jsxs(TabContextContainer, { children: [_jsxs(StyledAppVersionText, { "$color": TMColors.primary, children: [SDK_Globals.appModule, " ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.appVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.tertiary, children: ["SDKUI: ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkuiVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.success, children: ["SDK : ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkVersion })] })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] })] }) }), _jsx(TMLayoutItem, { height: '40px', children: _jsx(ExceptionToolbar, {}) })] }) }));
+    return (_jsx(Popup, { ref: popupRef, resizeEnabled: resizable, visible: isVisible, onHidden: () => { onClose?.(); setIsVisible(false); }, onShown: handleShown, showCloseButton: true, width: calcResponsiveSizes(deviceType, '600px', '400px', '350px'), height: '350px', minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', title: title, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsxs(TMTabGroup, { validationItems: [], children: [_jsxs(TMTab, { label: SDKUI_Localizator.Error, children: [_jsxs(TabContextContainer, { style: { height: 'calc(100% - 68px )', paddingRight: '40px' }, children: [_jsxs("p", { children: [" ", _jsx("span", { style: { color: TMColors.primary }, children: "Messaggio: " }), " ", message] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: '5px', marginTop: '5px' }, children: _jsxs("div", { children: [_jsxs("span", { style: { color: TMColors.primary }, children: [SDKUI_Localizator.Date, "  ", SDKUI_Localizator.Time.toLowerCase(), ": "] }), d.toString()] }) })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`Date: ${dateString}\nTime: ${timeString}\nMessage: ${message}`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.CompleteError, children: [_jsx(TabContextContainer, { style: { paddingRight: '40px' }, children: JSON.stringify(safeException).replaceAll('{', '').replaceAll('}', '').split(`,"`).map((t, index) => (_jsxs("div", { style: { padding: '5px', borderBottom: '1px solid rgb(180,180,180)' }, children: ["\u261B", ' ' + (t.toLowerCase().includes('detail') ? (t.replaceAll(`"`, '').replaceAll(`:`, ': ').replaceAll(String.fromCharCode(92), '')) : (t.replaceAll(`"`, '').replaceAll(`:`, ': ')))] }, index))) }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(JSON.stringify(safeException).replaceAll('{', '').replaceAll('}', '').replaceAll(',', '\n')), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.Details, children: [_jsxs(TabContextContainer, { children: [_jsxs(StyledAppVersionText, { "$color": TMColors.primary, children: [SDK_Globals.appModule, " ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.appVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.tertiary, children: ["SDKUI: ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkuiVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.success, children: ["SDK : ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkVersion })] })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] })] }) }), _jsx(TMLayoutItem, { height: '40px', children: _jsx(ExceptionToolbar, {}) })] }) }));
 };
 class TMExceptionBoxManager {
     static show({ title, exception, onClose }) {

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

@@ -4,10 +4,12 @@ interface ITMSpinner {
     description?: string;
     width?: string;
     flat?: boolean;
+    onCancel?: () => void;
+    cancelText?: string;
 }
-declare const Spinner: ({ backgroundColor, description, fontSize, width, flat }: ITMSpinner) => import("react/jsx-runtime").JSX.Element;
+declare const Spinner: ({ backgroundColor, description, fontSize, width, flat, onCancel, cancelText }: ITMSpinner) => import("react/jsx-runtime").JSX.Element;
 declare class TMSpinner {
-    static show({ description, backgroundColor, fontSize, flat }?: ITMSpinner): void;
+    static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText }?: ITMSpinner): void;
     static hide(): void;
 }
 export { Spinner };

package/lib/components/base/TMSpinner.js

@@ -32,7 +32,7 @@ const StyledSpinnerWrapper = styled.div `
     width: ${props => props.$width || 'fit-content'};
     height: fit-content;
     max-width: 250px;
-    max-height: 200px;
+    max-height: ${props => props.$hasCancel ? '280px' : '200px'};
     padding: 10px;
     border-radius: 5px;
     background-color: ${props => props.$flat ? 'transparent' : '#fcfcfc'};
@@ -134,22 +134,49 @@ const StyledSpinnerAnimation = styled.div `
 const StyledSpinnerDescription = styled.div `
     font-size: ${props => props.$fontSize || FontSize.defaultFontSize};
     text-align: center;
+    white-space: pre-line;
 `;
-const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content', flat = false }) => {
-    return (_jsx(StyledSpinnerContainer, { "$backgroundColor": backgroundColor, children: _jsxs(StyledSpinnerWrapper, { "$width": width, "$flat": flat, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
+// Pulsante Annulla sotto lo spinner
+const StyledCancelButton = styled.button `
+    margin-top: 15px;
+    padding: 8px 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #fff;
+    background-color: #d12a1c;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.1s ease;
+
+    &:hover {
+        background-color: #b8241a;
+    }
+
+    &:active {
+        transform: scale(0.98);
+    }
+`;
+const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content', flat = false, onCancel, cancelText = 'Annulla' }) => {
+    return (_jsx(StyledSpinnerContainer, { "$backgroundColor": backgroundColor, children: _jsxs(StyledSpinnerWrapper, { "$width": width, "$flat": flat, "$hasCancel": !!onCancel, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
                                 position: 'absolute',
                                 top: '50%',
                                 left: '50%',
                                 transform: 'translate(-54%, -54%)'
-                            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx(StyledSpinnerDescription, { "$fontSize": fontSize, children: description })] }) }));
+                            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx(StyledSpinnerDescription, { "$fontSize": fontSize, children: description }), onCancel && (_jsx(StyledCancelButton, { onClick: onCancel, children: cancelText }))] }) }));
 };
 class TMSpinner {
-    static show({ description, backgroundColor, fontSize, flat } = { backgroundColor: 'transparent', description: '', fontSize: FontSize.defaultFontSize, flat: false }) {
+    static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText } = {
+        backgroundColor: 'transparent',
+        description: '',
+        fontSize: FontSize.defaultFontSize,
+        flat: false
+    }) {
         let container = document.createElement('div');
         container.setAttribute("id", 'tm-spinner-temporary-container');
         document.body.appendChild(container);
         const root = ReactDOM.createRoot(container);
-        root.render(_jsx(React.StrictMode, { children: _jsx(Spinner, { backgroundColor: backgroundColor, fontSize: fontSize, description: description, flat: flat }) }));
+        root.render(_jsx(React.StrictMode, { children: _jsx(Spinner, { backgroundColor: backgroundColor, fontSize: fontSize, description: description, flat: flat, onCancel: onCancel, cancelText: cancelText }) }));
     }
     static hide() {
         let container = document.getElementById('tm-spinner-temporary-container');

package/lib/components/choosers/TMDistinctValues.js

@@ -11,7 +11,7 @@ import TMPanel from '../base/TMPanel';
 import TMModal from '../base/TMModal';
 import { useDataListItem } from '../../hooks/useDataListItem';
 import { useDataUserIdItem } from '../../hooks/useDataUserIdItem';
-const StyledDistinctValues = styled.div `display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 10px;`;
+const StyledDistinctValues = styled.div `display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 10px; position: relative;`;
 const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppendMode = true, showHeader = true, isModal, separator = " ", onSelectionChanged, onClosePanelCallback }) => {
     const [focusedItem, setFocusedItem] = useState();
     const [dataSource, setDataSource] = useState([]);

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -84,10 +84,15 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
             _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
     };
     const renderTemplate = () => {
+        const isPlaceholder = values?.[0] === placeHolder;
+        // Selezione singola: mostra direttamente il primo valore
+        if (!allowMultipleSelection) {
+            const singleDescription = getValueDescription(values?.[0]);
+            return (_jsx(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit', alignItems: 'center' }, children: dataSource && singleDescription && _jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: '8px' }, children: [getIcon(), _jsx("p", { children: singleDescription })] }) }));
+        }
         const MIN_COUNT_FOR_BADGE = 1;
         const MAX_VISIBLE_ITEMS = 3;
         const MAX_TOOLTIP_ITEMS = 50;
-        const isPlaceholder = values?.[0] === placeHolder;
         const descriptions = getDescriptions(MAX_VISIBLE_ITEMS);
         const remainingCount = (values?.length ?? 0) - MAX_VISIBLE_ITEMS;
         const totalCount = values?.length ?? 0;

package/lib/components/choosers/TMGroupChooser.js

@@ -11,7 +11,7 @@ export const TMGroupChooserForm = (props) => {
         TMSpinner.hide();
         return items ?? [];
     };
-    return (_jsx(TMChooserForm, { title: SDK_Localizator.Groups, allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, manageUseLocalizedName: true, hasShowOnlySelectedItems: true, selectedIDs: props.selectedIDs, startWithShowOnlySelectedItems: false, cellRenderIcon: () => _jsx(IconUserGroup, { color: '#767676' }), dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => { props.onChoose?.(IDs); } }));
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.Groups, allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, manageUseLocalizedName: props.manageUseLocalizedName ?? true, hasShowOnlySelectedItems: true, selectedIDs: props.selectedIDs, startWithShowOnlySelectedItems: false, cellRenderIcon: () => _jsx(IconUserGroup, { color: '#767676' }), dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => { props.onChoose?.(IDs); } }));
 };
 export const TMGroupIdViewer = (props) => {
     const [group, setGroup] = useState(null);

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

@@ -7,7 +7,7 @@ export declare const StyledEditorContainer: import("styled-components/dist/types
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$width"> & {
     $width: string;
 }, never>>> & string;
-export declare const StyledEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$width" | "$borderRadius" | "$fontSize" | "$type" | "$disabled" | "$isMobile" | "$vil" | "$isModified" | "$maxValue"> & {
+export declare const StyledEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$width" | "$borderRadius" | "$fontSize" | "$type" | "$disabled" | "$vil" | "$isModified" | "$maxValue" | "$isMobile"> & {
     $vil: ValidationItem[];
     $width: string;
     $type: string;
@@ -17,7 +17,7 @@ export declare const StyledEditor: import("styled-components/dist/types").IStyle
     $disabled: boolean;
     $isMobile?: boolean;
     $borderRadius?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$width" | "$borderRadius" | "$fontSize" | "$type" | "$disabled" | "$isMobile" | "$vil" | "$isModified" | "$maxValue"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$width" | "$borderRadius" | "$fontSize" | "$type" | "$disabled" | "$vil" | "$isModified" | "$maxValue" | "$isMobile"> & {
     $vil: ValidationItem[];
     $width: string;
     $type: string;
@@ -50,7 +50,7 @@ export declare const StyledEditorLabel: import("styled-components/dist/types").I
     $fontSize?: string;
     $color?: string;
 }, never>>> & string;
-export declare const StyledTextareaEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "$width" | "$maxHeight" | "$borderRadius" | "$fontSize" | "$disabled" | "$isMobile" | "$vil" | "$isModified" | "$resize"> & {
+export declare const StyledTextareaEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "$width" | "$maxHeight" | "$borderRadius" | "$fontSize" | "$disabled" | "$vil" | "$isModified" | "$isMobile" | "$resize"> & {
     $vil: ValidationItem[];
     $width: string;
     $isModified: boolean;
@@ -60,7 +60,7 @@ export declare const StyledTextareaEditor: import("styled-components/dist/types"
     $maxHeight?: string;
     $borderRadius?: string;
     $resize?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "$width" | "$maxHeight" | "$borderRadius" | "$fontSize" | "$disabled" | "$isMobile" | "$vil" | "$isModified" | "$resize"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "$width" | "$maxHeight" | "$borderRadius" | "$fontSize" | "$disabled" | "$vil" | "$isModified" | "$isMobile" | "$resize"> & {
     $vil: ValidationItem[];
     $width: string;
     $isModified: boolean;

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

@@ -28,6 +28,7 @@ export declare class FormulaDescriptor {
     metadataDataTypeDest?: MetadataDataTypes;
     tid?: number;
     description?: string;
+    syntax?: string;
 }
 export declare const renderFormulaIcon: (iconType: FormulaIconTypes, tid?: number, md?: MetadataDescriptor) => import("react/jsx-runtime").JSX.Element;
 declare const TMFormulaEditor: React.FunctionComponent<ITMApplyFormProps<FormulaDescriptor>>;