@topconsultnpm/sdkui-react 6.22.0-t1 → 6.22.0-t3

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

@@ -3,6 +3,17 @@ import { ITMEditorBase } from './TMEditorBase';
 export type ButtonColors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'standard' | 'primaryOutline' | 'secondaryOutline' | 'tertiaryOutline' | 'errorOutline' | 'warningOutline' | 'successOutline' | 'infoOutline';
 export type ButtonStyle = 'normal' | 'toolbar' | 'icon' | 'text' | 'advanced';
 export type AdvancedButtonType = 'success' | 'error' | 'tertiary' | 'primary';
+/** Azione secondaria mostrata nel dropdown "split button" (freccia a destra) */
+export interface ITMButtonSecondaryAction {
+    /** Etichetta mostrata nella voce di menu */
+    name: string;
+    /** Icona opzionale a sinistra della voce */
+    icon?: React.ReactNode;
+    /** Callback al click della voce */
+    onClick?: () => void;
+    /** Disabilita la singola voce */
+    disabled?: boolean;
+}
 export interface ITMButton extends ITMEditorBase {
     color?: ButtonColors;
     btnStyle?: ButtonStyle;
@@ -17,6 +28,8 @@ export interface ITMButton extends ITMEditorBase {
     showTooltip?: boolean;
     onClick?: VoidFunction;
     onMouseDown?: (e: any) => any;
+    /** Azioni secondarie: se valorizzate, il bottone mostra una freccia a destra che apre un dropdown con queste azioni */
+    secondaryActions?: ITMButtonSecondaryAction[];
 }
 declare const TMButton: React.ForwardRefExoticComponent<ITMButton & React.RefAttributes<HTMLButtonElement>>;
 export default TMButton;

package/lib/components/base/TMButton.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, forwardRef } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
-import { getColor } from '../../helper';
+import { getColor, IconChevronDown } from '../../helper';
 import { FontSize, TMColors } from '../../utils/theme';
 import TMTooltip from './TMTooltip';
 const StyledNormalButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
@@ -149,10 +150,132 @@ const StyledAdvancedButtonText = styled.div `
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
     padding: 5px;
+    padding-right: ${props => props.$reserveArrow ? '26px' : '5px'};
+`;
+const StyledSplitContainer = styled.div `
+  display: inline-flex;
+  align-items: stretch;
+  position: relative;
+`;
+const StyledSplitArrow = styled.button `
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  cursor: ${props => props.$isDisabled ? 'default' : 'pointer'};
+  color: white;
+  background-color: rgba(255, 255, 255, 0.22);
+  transition: background-color ease 150ms;
+  &:hover { background-color: ${props => props.$isDisabled ? 'rgba(255, 255, 255, 0.22)' : 'rgba(255, 255, 255, 0.38)'}; }
+  & svg {
+    transition: transform ease 150ms;
+    transform: rotate(${props => props.$isOpen ? '180deg' : '0deg'});
+  }
+`;
+const StyledDropdown = styled.div `
+  position: fixed;
+  left: ${props => props.$left}px;
+  top: ${props => props.$top}px;
+  transform: translateY(-100%);
+  transform-origin: bottom left;
+  min-width: ${props => props.$minWidth}px;
+  background: #ffffff;
+  border-radius: 14px;
+  box-shadow: 0 10px 30px rgba(20, 40, 80, 0.20);
+  border: 1px solid rgba(74, 150, 210, 0.18);
+  padding: 5px;
+  z-index: 100000;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  animation: tmSplitDropdownIn cubic-bezier(0.2, 0.8, 0.2, 1) 150ms;
+  @keyframes tmSplitDropdownIn {
+    from { opacity: 0; transform: translateY(calc(-100% + 8px)); }
+    to   { opacity: 1; transform: translateY(-100%); }
+  }
+`;
+const StyledDropdownItem = styled.button `
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 5px 9px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  text-align: left;
+  font-size: ${FontSize.defaultFontSize};
+  font-weight: 500;
+  color: ${props => props.$disabled ? '#b4b4b4' : '#2c3e50'};
+  cursor: ${props => props.$disabled ? 'default' : 'pointer'};
+  transition: background ease 150ms, color ease 150ms;
+  &:hover {
+    background: ${props => props.$disabled ? 'transparent' : 'linear-gradient(135deg, rgba(74, 150, 210, 0.16) 0%, rgba(37, 89, 165, 0.16) 100%)'};
+    color: ${props => props.$disabled ? '#b4b4b4' : '#2559A5'};
+  }
+  & > .tm-split-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+    border-radius: 6px;
+    background: rgba(74, 150, 210, 0.14);
+    color: #4A96D2;
+    transition: background ease 150ms, color ease 150ms;
+  }
+  &:hover > .tm-split-item-icon {
+    background: ${props => props.$disabled ? 'rgba(74, 150, 210, 0.14)' : '#4A96D2'};
+    color: ${props => props.$disabled ? '#4A96D2' : '#ffffff'};
+  }
 `;
 const TMButton = forwardRef((props, ref) => {
-    const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { }, onMouseDown = () => { } } = props;
+    const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { }, onMouseDown = () => { }, secondaryActions } = props;
     const [isHovered, setIsHovered] = useState(false);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [dropdownPos, setDropdownPos] = useState({ left: 0, top: 0, minWidth: 200 });
+    const splitContainerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const hasSecondaryActions = !!secondaryActions && secondaryActions.length > 0;
+    useEffect(() => {
+        if (!isDropdownOpen)
+            return;
+        const handlePointerDown = (e) => {
+            const target = e.target;
+            if (splitContainerRef.current?.contains(target) || dropdownRef.current?.contains(target))
+                return;
+            setIsDropdownOpen(false);
+        };
+        const handleKeyDown = (e) => { if (e.key === 'Escape')
+            setIsDropdownOpen(false); };
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('touchstart', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('touchstart', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isDropdownOpen]);
+    const toggleDropdown = () => {
+        if (disabled)
+            return;
+        if (!isDropdownOpen && splitContainerRef.current) {
+            const rect = splitContainerRef.current.getBoundingClientRect();
+            setDropdownPos({ left: rect.left, top: rect.top - 6, minWidth: Math.max(rect.width, 200) });
+        }
+        setIsDropdownOpen(prev => !prev);
+    };
     const renderedButton = () => {
         if (btnStyle === 'normal') {
             return (_jsx(StyledNormalButton, { ref: ref, width: width, height: height, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
@@ -164,7 +287,7 @@ const TMButton = forwardRef((props, ref) => {
             return (_jsx(StyledIconButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: icon }));
         }
         else if (btnStyle === 'advanced') {
-            return (_jsxs(StyledAdvancedButton, { ref: ref, "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), onMouseDown: (e) => !disabled && onMouseDown?.(e), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: caption })] }));
+            return (_jsxs(StyledAdvancedButton, { ref: ref, $width: width ?? '90px', $height: height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), $isDisabled: disabled, $isPrimaryOutline: advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), onMouseDown: (e) => !disabled && onMouseDown?.(e), children: [_jsx(StyledAdvancedButtonIcon, { $color: advancedColor, $isVisible: isHovered, $isDisabled: disabled, $type: advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { $color: advancedColor, $isDisabled: disabled, $type: advancedType, $reserveArrow: hasSecondaryActions, children: caption })] }));
         }
         else {
             return (_jsx(StyledTextButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
@@ -173,8 +296,17 @@ const TMButton = forwardRef((props, ref) => {
     const renderTooltip = () => {
         return (showTooltip &&
             _jsxs(_Fragment, { children: [caption &&
-                        _jsx(StyledButtonTooltipHeader, { "$description": description, children: _jsx(StyledButtonTooltipItem, { "$color": color, children: caption }) }), description && _jsx(StyledButtonTooltipItem, { children: description })] }));
+                        _jsx(StyledButtonTooltipHeader, { $description: description, children: _jsx(StyledButtonTooltipItem, { $color: color, children: caption }) }), description && _jsx(StyledButtonTooltipItem, { children: description })] }));
     };
-    return (_jsx("div", { style: elementStyle, children: showTooltip ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() }) : renderedButton() }));
+    const buttonWithTooltip = showTooltip
+        ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() })
+        : renderedButton();
+    const renderSplitButton = () => (_jsxs(StyledSplitContainer, { ref: splitContainerRef, children: [buttonWithTooltip, _jsx(StyledSplitArrow, { type: 'button', $isDisabled: disabled, $isOpen: isDropdownOpen, "aria-haspopup": 'menu', "aria-expanded": isDropdownOpen, onClick: (e) => { e.stopPropagation(); toggleDropdown(); }, onMouseDown: (e) => e.stopPropagation(), children: _jsx(IconChevronDown, { fontSize: 14 }) }), isDropdownOpen && createPortal(_jsx(StyledDropdown, { ref: dropdownRef, role: 'menu', $left: dropdownPos.left, $top: dropdownPos.top, $minWidth: dropdownPos.minWidth, children: secondaryActions.map((action, idx) => (_jsxs(StyledDropdownItem, { type: 'button', role: 'menuitem', $disabled: action.disabled, disabled: action.disabled, onClick: () => {
+                        if (action.disabled)
+                            return;
+                        setIsDropdownOpen(false);
+                        action.onClick?.();
+                    }, children: [action.icon && _jsx("span", { className: 'tm-split-item-icon', children: action.icon }), _jsx("span", { children: action.name })] }, `${action.name}-${idx}`))) }), document.body)] }));
+    return (_jsx("div", { style: elementStyle, children: hasSecondaryActions ? renderSplitButton() : buttonWithTooltip }));
 });
 export default TMButton;

package/lib/components/base/TMClosableList.js

@@ -67,8 +67,8 @@ const TMClosableList = ({ dataSource, visibility = false, label, inline = false,
     const renderedItems = () => {
         return (dataSource.map((item, index) => (_jsx(StyledClosableItem, { children: item }, index))));
     };
-    return (_jsxs(StyledClosableContainer, { "$isMobile": devicrType === DeviceType.TABLET, "$padding": hasPadding ? '5px' : '0', children: [_jsxs(StyledClosableContext, { children: [label && _jsxs(StyledClosableLabel, { "$isMobile": devicrType === DeviceType.MOBILE, "$inline": inline, children: [label, ":"] }), status ?
-                        _jsxs(StyledClosableItems, { "$isMobile": devicrType === DeviceType.MOBILE, "$inline": inline, children: ["  ", renderedItems(), " "] }) :
-                        _jsxs(StyledClosableItems, { "$isMobile": devicrType === DeviceType.MOBILE, "$inline": inline, children: [" ", _jsxs(StyledClosableItem, { children: [" ", dataSource[0], " "] }), " "] })] }), dataSource.length > 1 && _jsxs(StyledClosabelIcon, { onClick: () => setStatus(!status), children: [!status && _jsxs(StyledClosableItemsCount, { children: [" (", _jsx("span", { children: "+" }), " ", dataSource.length - 1, " ", dataSource.length === 2 ? SDKUI_Localizator.OneMore : SDKUI_Localizator.More, ") "] }), !status ? _jsx(IconRight, { fontSize: 14 }) : _jsx(IconDown, { fontSize: 14 })] })] }));
+    return (_jsxs(StyledClosableContainer, { $isMobile: devicrType === DeviceType.TABLET, $padding: hasPadding ? '5px' : '0', children: [_jsxs(StyledClosableContext, { children: [label && _jsxs(StyledClosableLabel, { $isMobile: devicrType === DeviceType.MOBILE, $inline: inline, children: [label, ":"] }), status ?
+                        _jsxs(StyledClosableItems, { $isMobile: devicrType === DeviceType.MOBILE, $inline: inline, children: ["  ", renderedItems(), " "] }) :
+                        _jsxs(StyledClosableItems, { $isMobile: devicrType === DeviceType.MOBILE, $inline: inline, children: [" ", _jsxs(StyledClosableItem, { children: [" ", dataSource[0], " "] }), " "] })] }), dataSource.length > 1 && _jsxs(StyledClosabelIcon, { onClick: () => setStatus(!status), children: [!status && _jsxs(StyledClosableItemsCount, { children: [" (", _jsx("span", { children: "+" }), " ", dataSource.length - 1, " ", dataSource.length === 2 ? SDKUI_Localizator.OneMore : SDKUI_Localizator.More, ") "] }), !status ? _jsx(IconRight, { fontSize: 14 }) : _jsx(IconDown, { fontSize: 14 })] })] }));
 };
 export default TMClosableList;

package/lib/components/base/TMCustomButton.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useMemo } from 'react';
 import TMModal from './TMModal';
 import styled from 'styled-components';
-import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
+import { SDKUI_Localizator } from '../..';
 import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
+import TMWaitPanelManager from './waitPanel/TMWaitPanelManager';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
@@ -53,12 +54,6 @@ const TMCustomButton = (props) => {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
     const itemsToProcess = useMemo(() => selectedItems && selectedItems.length > 0 ? selectedItems : [attributes], [selectedItems, attributes]);
-    // Stati per il wait panel
-    const [showWaitPanel, setShowWaitPanel] = useState(itemsToProcess.length > 0 && !RunOnce);
-    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, itemsToProcess.length));
-    const [waitPanelValue, setWaitPanelValue] = useState(0);
-    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(itemsToProcess.length);
-    const [abortController, setAbortController] = useState(undefined);
     // Aggiungi timestamp all'URL per evitare cache
     const iframeUrl = useMemo(() => {
         if (!scriptUrl)
@@ -83,41 +78,45 @@ const TMCustomButton = (props) => {
         setLoading(false);
         setError(true);
     };
-    const executeSequentially = async (controller) => {
+    const executeSequentially = async () => {
         if (!itemsToProcess)
             return;
-        for (const [index, item] of itemsToProcess.entries()) {
-            if (controller.signal.aborted)
-                break;
-            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
-            setWaitPanelValue(index);
-            // Attendi che l'iframe sia pronto e invia il messaggio
-            await new Promise((resolve) => {
-                const checkIframe = setInterval(() => {
-                    if (iframeRef.current?.contentWindow) {
-                        clearInterval(checkIframe);
-                        if (selectedItems && selectedItems.length > 0) {
-                            //devo convertire item in formData
-                            const processedItem = getSelectedItem(args, formData, item);
-                            postMessageIframe(processedItem);
-                        }
-                        else {
-                            postMessageIframe(item);
+        const waitPanel = TMWaitPanelManager.show({
+            title: SDKUI_Localizator.CustomButtonAction,
+            max: itemsToProcess.length,
+            cancelable: true,
+            showCounters: false,
+        });
+        try {
+            for (const [index, item] of itemsToProcess.entries()) {
+                if (waitPanel.aborted)
+                    break;
+                waitPanel.setSubtitle(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
+                // Attendi che l'iframe sia pronto e invia il messaggio
+                await new Promise((resolve) => {
+                    const checkIframe = setInterval(() => {
+                        if (iframeRef.current?.contentWindow) {
+                            clearInterval(checkIframe);
+                            if (selectedItems && selectedItems.length > 0) {
+                                //devo convertire item in formData
+                                const processedItem = getSelectedItem(args, formData, item);
+                                postMessageIframe(processedItem);
+                            }
+                            else {
+                                postMessageIframe(item);
+                            }
+                            // Attendi prima di passare al prossimo
+                            setTimeout(resolve, 500);
                         }
-                        //imposta 100% se sono all'ultimo item
-                        if (index === itemsToProcess.length - 1)
-                            setWaitPanelValue(index + 1);
-                        // Attendi prima di passare al prossimo
-                        setTimeout(() => {
-                            setWaitPanelValue(index + 1);
-                            resolve();
-                        }, 500);
-                    }
-                }, 100);
-            });
+                    }, 100);
+                });
+                await waitPanel.step();
+            }
+        }
+        finally {
+            waitPanel.close();
+            onClose?.();
         }
-        setShowWaitPanel(false);
-        onClose?.();
     };
     const postMessageIframe = (data) => {
         console.log("TMCustomButton - postMessageIframe - data:", data);
@@ -130,14 +129,7 @@ const TMCustomButton = (props) => {
             return;
         if (!RunOnce && itemsToProcess.length > 0) {
             // esegui per ogni item selezionato
-            const controller = new AbortController();
-            controller.signal.addEventListener('abort', () => {
-                setShowWaitPanel(false);
-                onClose?.();
-            });
-            setAbortController(controller);
-            setWaitPanelMaxValue(itemsToProcess.length);
-            executeSequentially(controller);
+            executeSequentially();
         }
         else {
             // Modalità RunOnce: invia dati all'iframe quando è caricato
@@ -157,6 +149,6 @@ const TMCustomButton = (props) => {
         }
     }, []);
     const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [loading && _jsx(LoadingOverlay, {}), 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: iframeUrl })] }));
-    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && iframeContent;
 };
 export default TMCustomButton;

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

@@ -34,6 +34,8 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     searchPanelToolbarPosition?: 'before' | 'default';
     /** Trigger to set focus on SearchPanel (only if visible) - change the number to trigger focus */
     searchPanelFocusTrigger?: number;
+    /** Riporta il fuoco nella casella di ricerca dopo che la griglia ha applicato il testo digitato, così si può continuare a scrivere */
+    keepSearchPanelFocus?: boolean;
     /** Show the header filter */
     showHeaderFilter?: boolean;
     /** Show the filter panel */
@@ -46,6 +48,8 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     showSearchPanel?: boolean;
     /** Show the group panel */
     showGroupPanel?: boolean;
+    /** Rende il paginatore compatto (meno alto, font e pulsanti ridotti, page numbers sostituiti da "pagina / totale"): utile quando la griglia è dentro pannelli bassi */
+    compactPager?: boolean;
     /** Counter configuration */
     counterConfig?: ITMCounterContainerProps;
     /** Master Detail */