@topconsultnpm/sdkui-react 6.21.0-dev3.4 → 6.21.0-dev3.41

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/base/TMTreeView.js

@@ -138,22 +138,19 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         }
         if (delayFocus) {
             // Logica per il ritardo del focus (es. click singolo su icona desktop, gestito dal padre)
-            if (clickTimeoutRef.current) {
-                // Questo è il secondo click di un potenziale doppio click.
-                // Annulla l'azione di focus dal click singolo precedente.
-                clearTimeout(clickTimeoutRef.current);
-                clickTimeoutRef.current = null;
-                lastClickedNodeKeyRef.current = undefined;
-                return; // Non attivare onFocusedItemChanged per il doppio click
+            // Il focus viene ritardato per permettere al doppio click di registrarsi sull'icona,
+            // ma il focus avviene comunque (sia con click singolo che doppio)
+            if (!clickTimeoutRef.current) {
+                // Primo click: imposta il timer per il focus
+                lastClickedNodeKeyRef.current = node.key;
+                clickTimeoutRef.current = setTimeout(() => {
+                    onFocusedItemChanged?.(node);
+                    clickTimeoutRef.current = null;
+                    lastClickedNodeKeyRef.current = undefined;
+                }, 200);
             }
-            // Primo click di un potenziale doppio click o un click singolo che necessita di ritardo
-            lastClickedNodeKeyRef.current = node.key;
-            clickTimeoutRef.current = setTimeout(() => {
-                // Se il timer scade, significa che è stato solo un click singolo.
-                onFocusedItemChanged?.(node);
-                clickTimeoutRef.current = null;
-                lastClickedNodeKeyRef.current = undefined;
-            }, 200);
+            // Se c'è già un timer attivo (secondo click di doppio click), non fare nulla
+            // Il focus avverrà comunque quando scade il timer del primo click
         }
         else {
             // Logica per il focus immediato (per tutti gli altri click, o se shouldDelayFocusOnEvent è false)

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>, "$disabled" | "$isMobile" | "$width" | "$type" | "$borderRadius" | "$fontSize" | "$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>, "$disabled" | "$isMobile" | "$width" | "$type" | "$borderRadius" | "$fontSize" | "$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;
@@ -37,20 +37,20 @@ export declare const StyledEditorIcon: import("styled-components/dist/types").IS
     $disabled: boolean;
     $isModified: boolean;
 }, never>>> & string;
-export declare const StyledEditorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$disabled" | "$fontSize" | "$isFocused" | "$labelPosition"> & {
+export declare const StyledEditorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$fontSize" | "$disabled" | "$isFocused" | "$labelPosition"> & {
     $isFocused: boolean;
     $labelPosition: "right" | "left" | "top";
     $disabled: boolean;
     $fontSize?: string;
     $color?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$disabled" | "$fontSize" | "$isFocused" | "$labelPosition"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$fontSize" | "$disabled" | "$isFocused" | "$labelPosition"> & {
     $isFocused: boolean;
     $labelPosition: "right" | "left" | "top";
     $disabled: boolean;
     $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>, "$maxHeight" | "$disabled" | "$isMobile" | "$width" | "$borderRadius" | "$fontSize" | "$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>, "$maxHeight" | "$disabled" | "$isMobile" | "$width" | "$borderRadius" | "$fontSize" | "$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>>;