@topconsultnpm/sdkui-react 6.22.0-dev2.9 → 6.22.0-dev3.11

package/lib/components/editors/TMDropDown.js

@@ -1,11 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import styled from "styled-components";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import styled, { css } from "styled-components";
 import { FontSize, TMColors } from '../../utils/theme';
 import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, TMEditorsDefaultBorderRadius, editorColorManager } from "./TMEditorStyled";
 import TMLayoutContainer, { TMLayoutItem } from "../base/TMLayout";
 import TMVilViewer from "../base/TMVilViewer";
 import TMTooltip from "../base/TMTooltip";
+import { SDKUI_Localizator } from "../../helper";
 const StyledDropDownWrapper = styled.div `
   position: relative;
   width: ${props => props.$width};
@@ -54,9 +56,199 @@ const StyledDropDownEditorButton = styled.div `
     align-items: center;
     cursor: pointer;
 `;
-const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, onValueChanged, buttons = [], placeHolder, }) => {
+// Variante filtrabile: un input di testo con la stessa resa grafica della select nativa
+const StyledSearchInput = styled.input `
+    width: 100%;
+    padding: 5px 35px 3px 9px;
+    border: 1px solid;
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
+    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+    color: ${props => !props.$disabled ? (props.$vil.length === 0 ? (!props.$isModified ? TMColors.text_normal : TMColors.isModified) : editorColorManager(props.$vil)) : TMColors.disabled};
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
+    font-size: ${props => props.$fontSize};
+    background-color: ${props => props.$disabled ? '#F5F5F5' : 'white'};
+    text-overflow: ellipsis;
+
+    &:focus {
+        outline: none;
+        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+    }
+`;
+const OPTIONS_PANEL_MAX_HEIGHT = 220;
+const OPTIONS_PANEL_MIN_HEIGHT = 80;
+const OPTIONS_PANEL_MARGIN = 4;
+// L'elenco aperto con usePortal esce dal contenitore dell'editor: deve stare sopra tutto ciò che può trovarsi nella stessa pagina
+const DROPDOWN_OPTIONS_PANEL_Z_INDEX = 100001;
+const optionsPanelCss = css `
+    overflow-y: auto;
+    background-color: white;
+    border: 1px solid ${TMColors.border_normal};
+    border-radius: ${TMEditorsDefaultBorderRadius};
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+`;
+// Elenco ancorato all'editor: resta nel flusso del DOM e quindi soggetto al clipping dei contenitori con overflow
+const StyledOptionsPanel = styled.div `
+    ${optionsPanelCss}
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 0;
+    right: 0;
+    z-index: 10001;
+    max-height: ${OPTIONS_PANEL_MAX_HEIGHT}px;
+`;
+// Variante usePortal: posizione calcolata rispetto alla finestra, così l'elenco non viene tagliato da nessun contenitore
+const StyledPortalOptionsPanel = styled.div `
+    ${optionsPanelCss}
+    position: fixed;
+    left: ${props => props.$left}px;
+    ${props => props.$top !== undefined ? `top: ${props.$top}px;` : ''}
+    ${props => props.$bottom !== undefined ? `bottom: ${props.$bottom}px;` : ''}
+    width: ${props => props.$width}px;
+    z-index: ${DROPDOWN_OPTIONS_PANEL_Z_INDEX};
+    max-height: ${props => props.$maxHeight}px;
+`;
+const StyledOption = styled.div `
+    padding: 5px 9px;
+    font-size: ${props => props.$fontSize};
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: ${props => props.$isSelected ? 600 : 'normal'};
+    background-color: ${props => props.$isHighlighted ? TMColors.primary_container : 'transparent'};
+`;
+const StyledNoOptions = styled.div `
+    padding: 5px 9px;
+    font-size: ${props => props.$fontSize};
+    color: ${TMColors.disabled};
+`;
+// L'elenco si apre sotto l'editor se c'è spazio, altrimenti sopra, e in ogni caso non esce dalla finestra
+const calcOptionsPanelPosition = (rect) => {
+    const spaceBelow = window.innerHeight - rect.bottom - OPTIONS_PANEL_MARGIN;
+    const spaceAbove = rect.top - OPTIONS_PANEL_MARGIN;
+    const openUpwards = spaceBelow < OPTIONS_PANEL_MAX_HEIGHT && spaceAbove > spaceBelow;
+    const availableHeight = openUpwards ? spaceAbove : spaceBelow;
+    return {
+        left: Math.max(OPTIONS_PANEL_MARGIN, Math.min(rect.left, window.innerWidth - rect.width - OPTIONS_PANEL_MARGIN)),
+        top: openUpwards ? undefined : rect.bottom + OPTIONS_PANEL_MARGIN,
+        bottom: openUpwards ? window.innerHeight - rect.top + OPTIONS_PANEL_MARGIN : undefined,
+        width: rect.width,
+        maxHeight: Math.max(OPTIONS_PANEL_MIN_HEIGHT, Math.min(OPTIONS_PANEL_MAX_HEIGHT, availableHeight)),
+    };
+};
+const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, searchEnabled = false, usePortal = false, itemRender, onValueChanged, buttons = [], placeHolder, }) => {
     const [isFocused, setIsFocused] = useState(false);
-    const renderedLeftLabelTextBox = () => (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), _jsxs(StyledDropDownWrapper, { "$width": width, children: [_jsxs(StyledDropDown, { value: value, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: [placeHolder && _jsx("option", { value: "", disabled: true, hidden: true, children: placeHolder }), dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index)))] }), buttons.length > 0 && (_jsx(ButtonsContainer, { children: buttons.map((buttonItem) => (_jsx(StyledDropDownEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text))) })), _jsx(CustomArrow, {})] }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchText, setSearchText] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [optionsPanelPosition, setOptionsPanelPosition] = useState();
+    const optionsPanelRef = useRef(null);
+    const dropDownWrapperRef = useRef(null);
+    const selectedItem = dataSource?.find(o => String(o.value) === String(value));
+    // A elenco chiuso l'input mostra la voce selezionata, ad elenco aperto il testo digitato
+    const filteredDataSource = (!isOpen || !searchText) ? (dataSource ?? []) : (dataSource ?? []).filter(o => String(o.display ?? '').toLocaleLowerCase().includes(searchText.toLocaleLowerCase()));
+    // Mantiene visibile la voce evidenziata durante la navigazione da tastiera
+    useEffect(() => {
+        if (!isOpen || highlightedIndex < 0)
+            return;
+        const option = optionsPanelRef.current?.children[highlightedIndex];
+        option?.scrollIntoView({ block: 'nearest' });
+    }, [isOpen, highlightedIndex]);
+    // Solo nel portal la posizione va ricalcolata: essendo fissa non segue lo scorrimento o il ridimensionamento del contenitore
+    useEffect(() => {
+        if (!isOpen || !usePortal)
+            return;
+        const updatePosition = () => updateOptionsPanelPosition();
+        window.addEventListener('scroll', updatePosition, true);
+        window.addEventListener('resize', updatePosition);
+        return () => {
+            window.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, [isOpen, usePortal]);
+    const updateOptionsPanelPosition = () => {
+        const rect = dropDownWrapperRef.current?.getBoundingClientRect();
+        if (rect)
+            setOptionsPanelPosition(calcOptionsPanelPosition(rect));
+    };
+    const openOptions = () => {
+        if (disabled)
+            return;
+        if (usePortal)
+            updateOptionsPanelPosition();
+        setIsOpen(true);
+        setSearchText('');
+        setHighlightedIndex(dataSource?.findIndex(o => String(o.value) === String(value)) ?? -1);
+    };
+    const closeOptions = () => {
+        setIsOpen(false);
+        setSearchText('');
+        setHighlightedIndex(-1);
+    };
+    const selectItem = (item) => {
+        closeOptions();
+        // La select nativa notifica un ChangeEvent: qui viene ricostruito il solo dato letto dai consumatori (target.value)
+        onValueChanged?.({ target: { value: String(item.value) } });
+    };
+    const onSearchKeyDown = (e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!isOpen) {
+                    openOptions();
+                    return;
+                }
+                if (filteredDataSource.length <= 0)
+                    return;
+                setHighlightedIndex(prev => {
+                    const delta = e.key === 'ArrowDown' ? 1 : -1;
+                    const next = prev + delta;
+                    if (next < 0)
+                        return filteredDataSource.length - 1;
+                    if (next >= filteredDataSource.length)
+                        return 0;
+                    return next;
+                });
+                break;
+            case 'Enter': {
+                if (!isOpen)
+                    return;
+                e.preventDefault();
+                const item = filteredDataSource[highlightedIndex] ?? filteredDataSource[0];
+                if (item)
+                    selectItem(item);
+                break;
+            }
+            case 'Escape':
+                if (isOpen) {
+                    e.preventDefault();
+                    closeOptions();
+                }
+                break;
+        }
+    };
+    const renderOptions = () => (filteredDataSource.length > 0
+        ? filteredDataSource.map((data, index) => (_jsx(StyledOption, { $fontSize: fontSize, $isSelected: String(data.value) === String(value), $isHighlighted: index === highlightedIndex, onMouseEnter: () => setHighlightedIndex(index), onClick: () => selectItem(data), children: itemRender ? itemRender(data) : data.display }, index)))
+        : _jsx(StyledNoOptions, { $fontSize: fontSize, children: SDKUI_Localizator.NoDataToDisplay }));
+    // onMouseDown va bloccato: senza preventDefault il blur dell'input chiuderebbe l'elenco prima del click
+    const renderOptionsPanel = () => {
+        if (!isOpen)
+            return null;
+        if (!usePortal) {
+            return (_jsx(StyledOptionsPanel, { ref: optionsPanelRef, onMouseDown: (e) => e.preventDefault(), children: renderOptions() }));
+        }
+        if (!optionsPanelPosition)
+            return null;
+        return createPortal(_jsx(StyledPortalOptionsPanel, { ref: optionsPanelRef, $left: optionsPanelPosition.left, $top: optionsPanelPosition.top, $bottom: optionsPanelPosition.bottom, $width: optionsPanelPosition.width, $maxHeight: optionsPanelPosition.maxHeight, onMouseDown: (e) => e.preventDefault(), children: renderOptions() }), document.body);
+    };
+    const renderSearchableDropDown = () => (_jsxs(_Fragment, { children: [_jsx(StyledSearchInput, { value: isOpen ? searchText : (selectedItem?.display ?? ''), placeholder: isOpen ? SDKUI_Localizator.Search : placeHolder, readOnly: disabled, disabled: disabled, $disabled: disabled, $fontSize: fontSize, $isModified: isModifiedWhen, $vil: validationItems, onFocus: () => { setIsFocused(true); openOptions(); }, onBlur: () => { setIsFocused(false); closeOptions(); }, onClick: () => { if (!isOpen)
+                    openOptions(); }, onChange: (e) => { setSearchText(e.target.value); setIsOpen(true); setHighlightedIndex(0); }, onKeyDown: onSearchKeyDown }), renderOptionsPanel()] }));
+    const renderNativeDropDown = () => (_jsxs(StyledDropDown, { value: value, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), $disabled: disabled, disabled: disabled, $fontSize: fontSize, $isModified: isModifiedWhen, $vil: validationItems, onChange: onValueChanged, children: [placeHolder && _jsx("option", { value: "", disabled: true, hidden: true, children: placeHolder }), dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index)))] }));
+    const renderedLeftLabelTextBox = () => (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { $disabled: disabled, $vil: validationItems, $isModified: isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { $width: width, children: [label && _jsx(StyledEditorLabel, { $isFocused: isFocused, $labelPosition: labelPosition, $disabled: disabled, children: label }), _jsxs(StyledDropDownWrapper, { ref: dropDownWrapperRef, $width: width, children: [searchEnabled ? renderSearchableDropDown() : renderNativeDropDown(), buttons.length > 0 && (_jsx(ButtonsContainer, { children: buttons.map((buttonItem) => (_jsx(StyledDropDownEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.tooltipContent ?? buttonItem.text, children: buttonItem.icon }) }, buttonItem.text))) })), _jsx(CustomArrow, {})] }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
     return _jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() });
 };
 export default TMDropDown;

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

@@ -2,12 +2,14 @@ import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export declare const TMEditorsDefaultBorderRadius = "5px";
 export declare const TMEditorsDefaultLabelFontSize = "0.9rem";
 export declare const editorColorManager: (validationItems: ValidationItem[]) => string;
-export declare const StyledEditorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$width"> & {
+export declare const StyledEditorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $width: string;
-}, 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" | "$vil" | "$isModified" | "$maxValue" | "$isMobile"> & {
+}>> & string;
+export declare const StyledEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $vil: ValidationItem[];
     $width: string;
     $type: string;
@@ -17,50 +19,26 @@ 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" | "$vil" | "$isModified" | "$maxValue" | "$isMobile"> & {
-    $vil: ValidationItem[];
-    $width: string;
-    $type: string;
-    $isModified: boolean;
-    $maxValue: number;
-    $fontSize: string;
-    $disabled: boolean;
-    $isMobile?: boolean;
-    $borderRadius?: string;
-}, never>>> & string;
-export declare const StyledEditorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$vil" | "$isModified"> & {
-    $vil: ValidationItem[];
-    $disabled: boolean;
-    $isModified: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$vil" | "$isModified"> & {
+}>> & string;
+export declare const StyledEditorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $vil: ValidationItem[];
     $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" | "$fontSize" | "$disabled" | "$isFocused" | "$labelPosition"> & {
+}>> & string;
+export declare const StyledEditorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $isFocused: boolean;
-    $labelPosition: "right" | "left" | "top";
+    $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" | "$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>, "$width" | "$maxHeight" | "$borderRadius" | "$fontSize" | "$disabled" | "$vil" | "$isModified" | "$isMobile" | "$resize"> & {
-    $vil: ValidationItem[];
-    $width: string;
-    $isModified: boolean;
-    $fontSize: string;
-    $disabled: boolean;
-    $isMobile?: boolean;
-    $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" | "$vil" | "$isModified" | "$isMobile" | "$resize"> & {
+}>> & string;
+export declare const StyledTextareaEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $vil: ValidationItem[];
     $width: string;
     $isModified: boolean;
@@ -70,4 +48,4 @@ export declare const StyledTextareaEditor: import("styled-components/dist/types"
     $maxHeight?: string;
     $borderRadius?: string;
     $resize?: boolean;
-}, never>>> & string;
+}>> & string;

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

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

package/lib/components/editors/TMFormulaEditor.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { ValidationItem, SDK_Globals, MetadataDataTypes, DBBrands, ResultTypes } from '@topconsultnpm/sdk-ts';
 import { TreeView } from 'devextreme-react';

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

@@ -1,7 +1,8 @@
+import React from 'react';
 interface IHtmlContentDisplay {
     markup: string;
     isSelected: boolean;
     searchText?: string;
 }
-declare const TMHtmlContentDisplay: (props: IHtmlContentDisplay) => import("react/jsx-runtime").JSX.Element;
+declare const TMHtmlContentDisplay: (props: IHtmlContentDisplay) => React.JSX.Element;
 export default TMHtmlContentDisplay;

package/lib/components/editors/TMHtmlContentDisplay.js

@@ -73,6 +73,6 @@ const TMHtmlContentDisplay = (props) => {
     updatedMarkup = convertLinksToAnchors(updatedMarkup);
     updatedMarkup = addMentionStyling(updatedMarkup, usersName);
     updatedMarkup = highlightText(updatedMarkup, searchText);
-    return (_jsx(Wrapper, { "$isSelected": isSelected, children: _jsx("div", { dangerouslySetInnerHTML: { __html: updatedMarkup } }) }));
+    return (_jsx(Wrapper, { $isSelected: isSelected, children: _jsx("div", { dangerouslySetInnerHTML: { __html: updatedMarkup } }) }));
 };
 export default TMHtmlContentDisplay;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export declare const sanitizeAndFormatComment: (raw?: string) => string;
 export interface ITMHtmlEditor {
@@ -34,5 +35,5 @@ export interface ITMHtmlEditor {
     /** If true, displays a character count below the editor */
     showCount?: boolean;
 }
-declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
+declare const TMHtmlEditor: (props: ITMHtmlEditor) => React.JSX.Element;
 export default TMHtmlEditor;

package/lib/components/editors/TMLocalizedTextBox.js

@@ -122,6 +122,6 @@ const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_
         icon: (_jsxs(IconContainer, { children: [_jsx(IconLanguage, {}), localizedCount > 0 && _jsx(Badge, { children: localizedCount })] })),
         onClick: handleTogglePopover,
     };
-    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [(qd || tid) ? (_jsx(TMMetadataTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, qd: qd, tid: tid, readOnly: readOnly, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })) : (_jsx(TMTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, readOnly: readOnly, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })), isPopoverVisible && (_jsx(Portal, { popoverRef: popoverRef, children: _jsx(Popover, { ref: popoverRef, "$isVisible": isPopoverVisible, "$top": popoverPosition.top, "$left": popoverPosition.left, "$width": popoverPosition.width, onMouseDown: (e) => e.stopPropagation(), children: languages.map((lang) => ((qd || tid) ? (_jsx(TMMetadataTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', qd: qd, tid: tid, readOnly: readOnly, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)) : (_jsx(TMTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', readOnly: readOnly, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)))) }) }))] }));
+    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [(qd || tid) ? (_jsx(TMMetadataTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, qd: qd, tid: tid, readOnly: readOnly, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })) : (_jsx(TMTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, readOnly: readOnly, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })), isPopoverVisible && (_jsx(Portal, { popoverRef: popoverRef, children: _jsx(Popover, { ref: popoverRef, $isVisible: isPopoverVisible, $top: popoverPosition.top, $left: popoverPosition.left, $width: popoverPosition.width, onMouseDown: (e) => e.stopPropagation(), children: languages.map((lang) => ((qd || tid) ? (_jsx(TMMetadataTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', qd: qd, tid: tid, readOnly: readOnly, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)) : (_jsx(TMTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', readOnly: readOnly, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)))) }) }))] }));
 };
 export default TMLocalizedTextBox;

package/lib/components/editors/TMMetadataValues.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
-import { AccessLevels, AppModules, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
-import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys, isApprovalWorkflowView, StyledTabItem, getAppModuleGradient } from "../../helper";
+import { AccessLevels, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys, isApprovalWorkflowView } from "../../helper";
 import { TMColors } from "../../utils/theme";
 import TMButton from "../base/TMButton";
 import TMDropDownMenu from "../base/TMDropDownMenu";
@@ -13,7 +13,7 @@ import { FormulaHelper } from "./TMFormulaEditor";
 import { ChronologyMIDs, DraftsMIDs, DSAttachsMIDs } from "../../ts";
 import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
 import TMAccordion from "../base/TMAccordion";
-import TabPanel, { Item } from 'devextreme-react/tab-panel';
+import TMTabControl, { TMTabPanel } from "../base/TMTabControl";
 import { TMExceptionBoxManager } from "../base/TMPopUp";
 // Costante per la minWidth degli elementi - garantisce coerenza tra layout orizzontale e verticale
 const ITEM_MIN_WIDTH = 200;
@@ -754,7 +754,7 @@ const TMLayoutTabPanel = React.memo(({ tabItems }) => {
     const handleSelectedIndexChange = useCallback((index) => {
         setActiveTabIndex(index);
     }, []);
-    return (_jsx(TabPanel, { width: "100%", height: "100%", animationEnabled: false, swipeEnabled: false, loop: false, showNavButtons: true, repaintChangesOnly: true, stylingMode: "primary", iconPosition: 'start', tabsPosition: 'top', selectedIndex: activeTabIndex, onSelectedIndexChange: handleSelectedIndexChange, children: tabItems.map((tabItem, index) => (_jsx(Item, { title: tabItem.title, tabRender: () => (_jsxs(StyledTabItem, { "$isSelected": activeTabIndex === index, "$activeGradient": getAppModuleGradient(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER), children: [_jsx("span", { children: tabItem.title }), tabItem.errorCount !== undefined && tabItem.errorCount > 0 && (_jsx(TMTooltip, { content: _jsxs("div", { style: {
+    return (_jsx(TMTabControl, { variant: 'moduleFilled', contentAnimation: 'none', swipeEnabled: false, selectedId: String(activeTabIndex), onSelectedIdChange: (id) => handleSelectedIndexChange(Number(id)), style: { width: '100%', height: '100%' }, children: tabItems.map((tabItem, index) => (_jsx(TMTabPanel, { id: String(index), label: _jsxs(_Fragment, { children: [_jsx("span", { children: tabItem.title }), tabItem.errorCount !== undefined && tabItem.errorCount > 0 && (_jsx(TMTooltip, { content: _jsxs("div", { style: {
                                 minWidth: '240px',
                                 padding: '14px',
                                 borderRadius: '10px',
@@ -787,5 +787,5 @@ const TMLayoutTabPanel = React.memo(({ tabItems }) => {
                                                     fontSize: '0.85em',
                                                     color: '#7f1d1d',
                                                     lineHeight: 1.4
-                                                }, children: error.message })] }, idx))) })] }), children: _jsx(StyledErrorBadge, { children: tabItem.errorCount > 99 ? '99+' : tabItem.errorCount }) }))] })), children: _jsx("div", { style: { width: '100%', overflowX: 'auto' }, children: _jsx("div", { style: { minWidth: 'max-content' }, children: tabItem.content }) }) }, `tab-${tabItem.layoutItemID}`))) }));
+                                                }, children: error.message })] }, idx))) })] }), children: _jsx(StyledErrorBadge, { children: tabItem.errorCount > 99 ? '99+' : tabItem.errorCount }) }))] }), children: _jsx("div", { style: { width: '100%', overflowX: 'auto' }, children: _jsx("div", { style: { minWidth: 'max-content' }, children: tabItem.content }) }) }, `tab-${tabItem.layoutItemID}`))) }));
 });

package/lib/components/editors/TMRadioButton.js

@@ -54,8 +54,8 @@ const StyledradioButtonLabel = styled.label `
 `;
 const TMRadioButton = ({ isModifiedWhen, flexBase = 1, elementStyle, label, value, fontSize = FontSize.defaultFontSize, dataSource = [], direction = 'row', onValueChanged, disabled = false }) => {
     const renderedRadioButtons = () => {
-        return (_jsx(StyledRadioButtonWrapper, { "$direction": direction, children: dataSource.map((data, index) => (_jsxs(StyledRadioButtoncontainer, { children: [_jsx(StyledRadioButton, { "$disabled": disabled, tabIndex: -1, name: makeID(8), checked: value === data.value ? true : false, onChange: () => onValueChanged(data.value), disabled: disabled, type: 'radio' }), _jsxs(StyledradioButtonLabel, { tabIndex: 0, onKeyDown: (e) => e.code === 'Space' && onValueChanged(data.value), onClick: () => onValueChanged(data.value), "$isModifiedWhen": isModifiedWhen, "$fontSize": fontSize, "$disabled": disabled, children: [" ", data.display, " "] })] }, index))) }));
+        return (_jsx(StyledRadioButtonWrapper, { $direction: direction, children: dataSource.map((data, index) => (_jsxs(StyledRadioButtoncontainer, { children: [_jsx(StyledRadioButton, { $disabled: disabled, tabIndex: -1, name: makeID(8), checked: value === data.value ? true : false, onChange: () => onValueChanged(data.value), disabled: disabled, type: 'radio' }), _jsxs(StyledradioButtonLabel, { tabIndex: 0, onKeyDown: (e) => e.code === 'Space' && onValueChanged(data.value), onClick: () => onValueChanged(data.value), $isModifiedWhen: isModifiedWhen, $fontSize: fontSize, $disabled: disabled, children: [" ", data.display, " "] })] }, index))) }));
     };
-    return (_jsx("div", { style: elementStyle, children: _jsxs(StyledWrapper, { "$isModifiedWhen": isModifiedWhen, "$direction": direction, "$disabled": disabled, "$fontSize": fontSize, style: { display: 'flex', flexDirection: direction, alignItems: direction === 'row' ? 'center' : 'flex-start', fontSize: fontSize, gap: direction === 'row' ? '20px' : "10px" }, children: [label && _jsx(StyledRadioGroupLabel, { "$flexBase": flexBase, children: label }), _jsx(StyledRadioGroupContainer, { "$flexBase": flexBase, children: renderedRadioButtons() })] }) }));
+    return (_jsx("div", { style: elementStyle, children: _jsxs(StyledWrapper, { $isModifiedWhen: isModifiedWhen, $direction: direction, $disabled: disabled, $fontSize: fontSize, style: { display: 'flex', flexDirection: direction, alignItems: direction === 'row' ? 'center' : 'flex-start', fontSize: fontSize, gap: direction === 'row' ? '20px' : "10px" }, children: [label && _jsx(StyledRadioGroupLabel, { $flexBase: flexBase, children: label }), _jsx(StyledRadioGroupContainer, { $flexBase: flexBase, children: renderedRadioButtons() })] }) }));
 };
 export default TMRadioButton;

package/lib/components/editors/TMSummary.js

@@ -61,7 +61,7 @@ const TMSummary = forwardRef(({ placeHolder, readOnly, labelColor, hasValue, bor
         onClearClick?.();
     };
     const renderTemplateField = () => {
-        return (_jsxs(StyledSummaryTemplateInput, { ref: summaryElementRef, "$readOnly": readOnly, tabIndex: 0, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, "$isModified": isModifiedWhen, "$vil": validationItems, "$disabled": disabled, "$showBorder": showBorder, "$fontSize": fontSize, "$width": width, "$height": height, onChange: onValueChanged, children: [_jsx("div", { onClick: () => { if (openEditorOnSummaryClick && !disabled)
+        return (_jsxs(StyledSummaryTemplateInput, { ref: summaryElementRef, $readOnly: readOnly, tabIndex: 0, $backgroundColor: backgroundColor, $borderRadius: borderRadius, $isModified: isModifiedWhen, $vil: validationItems, $disabled: disabled, $showBorder: showBorder, $fontSize: fontSize, $width: width, $height: height, onChange: onValueChanged, children: [_jsx("div", { onClick: () => { if (openEditorOnSummaryClick && !disabled)
                         onEditorClick?.(); }, onDoubleClick: () => { if (!openEditorOnSummaryClick && !disabled)
                         onEditorClick?.(); }, style: {
                         display: 'flex',
@@ -82,10 +82,10 @@ const TMSummary = forwardRef(({ placeHolder, readOnly, labelColor, hasValue, bor
                         })] })] }));
     };
     const renderLabel = () => {
-        return (_jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));
+        return (_jsx(StyledEditorLabel, { $color: labelColor, $isFocused: false, $labelPosition: labelPosition, $disabled: disabled, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));
     };
     const renderSummary = () => {
-        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: icon && _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && renderLabel(), renderTemplateField(), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: icon && _jsx(StyledEditorIcon, { $disabled: disabled, $vil: validationItems, $isModified: isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { $width: width, children: [label && renderLabel(), renderTemplateField(), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
     };
     return (_jsx("div", { style: elementStyle, children: renderSummary() }));
 });

package/lib/components/editors/TMTextArea.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useId } from 'react';
 import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
@@ -160,7 +160,7 @@ const TMTextArea = (props) => {
                                     newValue = newValue.toUpperCase();
                                 setCurrentValue(newValue);
                                 onValueChanged?.({ ...e, target: { ...e.target, value: newValue } });
-                            }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize, style: fillHeight ? { flex: 1, height: 0 } : undefined }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: '50%', transform: 'translateY(-50%)', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+                            }, $isMobile: deviceType === DeviceType.MOBILE, $maxHeight: maxHeight, $disabled: disabled, $vil: validationItems, $isModified: isModifiedWhen, $fontSize: fontSize, $width: width, $resize: resize, style: fillHeight ? { flex: 1, height: 0 } : undefined }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: '50%', transform: 'translateY(-50%)', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
                                     _jsx(StyledTextAreaEditorButton, { onClick: () => {
                                             setShowFormulaItemsChooser(true);
                                         }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
@@ -181,7 +181,7 @@ const TMTextArea = (props) => {
     };
     // Layout for the textarea with a left-aligned label
     const renderedLeftLabelTextArea = () => {
-        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, style: fillHeight ? { height: '100%', display: 'flex', flexDirection: 'column' } : {}, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label ?? '' }), renderTextArea()] }) })] }));
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { $disabled: disabled, $vil: validationItems, $isModified: isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { $width: width, style: fillHeight ? { height: '100%', display: 'flex', flexDirection: 'column' } : {}, children: [label && _jsx(StyledEditorLabel, { $isFocused: isFocused, $labelPosition: labelPosition, $disabled: disabled, children: label ?? '' }), renderTextArea()] }) })] }));
     };
     return (_jsx("div", { style: { ...elementStyle, ...(fillHeight ? { height: '100%' } : {}) }, children: renderedLeftLabelTextArea() }));
 };

package/lib/components/editors/TMTextBox.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { StyledEditor, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
@@ -303,7 +303,7 @@ const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, pre
                                             e.preventDefault();
                                     }
                                     onKeyDown?.(e);
-                                }, "$isMobile": deviceType === DeviceType.MOBILE, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType, "$borderRadius": borderRadius, style: { paddingLeft: `${calculateLeftPadding()}px`, paddingRight: `${calculateRightPadding()}px`, cursor: onClick ? 'pointer' : undefined } }), (initialType === 'password' || initialType === 'secureText') && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), (formulaItems.length > 0 || (showClearButton && currentValue) || buttons.length > 0) &&
+                                }, $isMobile: deviceType === DeviceType.MOBILE, $disabled: disabled, $vil: validationItems, $isModified: isModifiedWhen, $fontSize: fontSize, $maxValue: maxValue, $width: width, $type: currentType, $borderRadius: borderRadius, style: { paddingLeft: `${calculateLeftPadding()}px`, paddingRight: `${calculateRightPadding()}px`, cursor: onClick ? 'pointer' : undefined } }), (initialType === 'password' || initialType === 'secureText') && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, $disabled: disabled, $vil: validationItems, $isModified: isModifiedWhen, children: showPasswordIcon() }), (formulaItems.length > 0 || (showClearButton && currentValue) || buttons.length > 0) &&
                                 _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: type === 'number' ? '25px' : (initialType === 'password' ? '34px' : '6px'), top: '50%', transform: 'translateY(-50%)', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
                                             _jsx(StyledTextBoxEditorButton, { onClick: () => {
                                                     setShowFormulaItemsChooser(true);
@@ -313,7 +313,7 @@ const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, pre
                                         })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(TMContextMenu, { items: formulaMenuItems, target: `#text-${id}` }))] }), _jsx(TMVilViewer, { vil: validationItems })] }) }));
     };
     const renderedLeftLabelTextBox = () => {
-        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), renderInputField()] }) })] }));
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { $disabled: disabled, $vil: validationItems, $isModified: isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { $width: width, children: [label && _jsx(StyledEditorLabel, { $color: labelColor, $isFocused: isFocused, $labelPosition: labelPosition, $disabled: disabled, children: label }), renderInputField()] }) })] }));
     };
     return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() }));
 };

package/lib/components/editors/TMTextExpression.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { IconClear, IconColumns, SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
 import { TMMetadataChooserForm } from '../choosers/TMMetadataChooser';

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

@@ -14,5 +14,5 @@ interface TMTreeDropDownProps {
     isValidKey?: (key: number) => boolean;
     elementStyle?: React.CSSProperties;
 }
-declare const TMTreeDropDown: (props: TMTreeDropDownProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMTreeDropDown: (props: TMTreeDropDownProps) => React.JSX.Element;
 export default TMTreeDropDown;

package/lib/components/features/archive/TMArchive.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Logo from '../../../assets/Toppy-generico.png';
 import { ArchiveConstraints, DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid, getMoreInfoTasksForDocument } from '../../../helper';
@@ -56,6 +56,13 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
         previousTIDRef.current = currentTID;
     }, [currentTID, onDcmtTypeSelect, isSharedArchive]);
     const isMobile = deviceType === DeviceType.MOBILE;
+    // Scorciatoie: rilegge dal server l'elenco dei tipi documento, così le scorciatoie riflettono
+    // quelli aggiunti o rimossi. La nuova identità di mruTIDs fa ricaricare i descrittori a TMRecentsManager.
+    const refreshRecentsAsync = useCallback(async () => {
+        DcmtTypeListCacheService.RemoveAllWithoutMetadata();
+        await DcmtTypeListCacheService.GetAllWithoutMetadataAsync();
+        setMruTIDs([...SDKUI_Globals.userSettings.archivingSettings.mruTIDs]);
+    }, []);
     const tmTreeSelectorElement = useMemo(() => _jsx(TMTreeSelectorWrapper, { isMobile: isMobile, isSharedArchive: isSharedArchive, onSelectedTIDChanged: (tid) => {
             setCurrentTID(tid);
             if (tid && mruTIDs.includes(tid))
@@ -108,7 +115,14 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
         {
             id: 'tmRecentsManager',
             name: SDKUI_Localizator.Shortcuts,
-            contentOptions: { component: tmRecentsManagerElement, panelContainer: { title: SDKUI_Localizator.Shortcuts, totalItems: mruTIDs.length } },
+            contentOptions: {
+                component: tmRecentsManagerElement,
+                panelContainer: {
+                    title: SDKUI_Localizator.Shortcuts,
+                    totalItems: mruTIDs.length,
+                    onRefresh: refreshRecentsAsync
+                }
+            },
             toolbarOptions: { icon: _jsx(IconRecentlyViewed, { fontSize: 24 }), visible: true, orderNumber: 2, isActive: allInitialPanelVisibility['tmRecentsManager'] }
         },
         {
@@ -139,7 +153,7 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
                 }
             ]
         },
-    ], [tmTreeSelectorElement, tmRecentsManagerElement, tmFormElement, currentTID, mruTIDs, isSharedArchive]);
+    ], [tmTreeSelectorElement, tmRecentsManagerElement, tmFormElement, currentTID, mruTIDs, isSharedArchive, refreshRecentsAsync]);
     return (_jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }));
 };
 export default TMArchive;

package/lib/components/features/assistant/TMToppyDraggableHelpCenter.d.ts

@@ -11,5 +11,5 @@ interface TMToppyDraggableHelpCenterProps {
     /** Callback chiamato quando si clicca sull'immagine di Toppy */
     onToppyImageClick?: () => void;
 }
-declare const TMToppyDraggableHelpCenter: (props: TMToppyDraggableHelpCenterProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMToppyDraggableHelpCenter: (props: TMToppyDraggableHelpCenterProps) => React.JSX.Element;
 export default TMToppyDraggableHelpCenter;