@topconsultnpm/sdkui-react 6.22.0-dev2.9 → 6.22.0-t2

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 { jsx as _jsx, Fragment as _Fragment, 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,22 +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"> & {
-    $vil: ValidationItem[];
-    $width: string;
-    $type: string;
-    $isModified: boolean;
-    $maxValue: number;
-    $fontSize: string;
-    $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"> & {
+}>> & 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;
@@ -27,40 +19,26 @@ export declare const StyledEditor: import("styled-components/dist/types").IStyle
     $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"> & {
+}>> & 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> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$vil" | "$isModified"> & {
-    $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";
     $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/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/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/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;

package/lib/components/features/blog/TMBlogCommentForm.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { BlogPost, UserDescriptor } from "@topconsultnpm/sdk-ts";
 import { FileItem } from '../../base/TMFileManagerUtils';
 import { TMBlogContextDescriptor } from '../../grids/TMBlogsPostUtils';
@@ -18,5 +19,5 @@ interface TMBlogCommentFormProps {
     /** External save handler - when provided, bypasses internal engine logic */
     onCustomSave?: (blogPost: BlogPost) => Promise<void>;
 }
-declare const TMBlogCommentForm: (props: TMBlogCommentFormProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMBlogCommentForm: (props: TMBlogCommentFormProps) => React.JSX.Element;
 export default TMBlogCommentForm;

package/lib/components/features/documents/TMBatchUpdateForm.js

@@ -7,7 +7,7 @@ import { DcmtOperationTypes, FormModes } from '../../../ts';
 import { StyledToolbarCardContainer, StyledFormButtonsContainer } from '../../base/Styled';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import { TMSplitterLayout } from '../../base/TMLayout';
-import { TMExceptionBoxManager } from '../../base/TMPopUp';
+import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from '../../base/TMPopUp';
 import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
 import TMSpinner from '../../base/TMSpinner';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
@@ -114,10 +114,24 @@ const TMBatchUpdateForm = ({ inputDcmts, TID, DID, isExpertMode = SDKUI_Globals.
     const totalItems = metadataValues.filter(o => o.mid && o.mid > 100).length;
     const metadataValuesSource = metadataValues.filter(o => o.mid && o.mid > 100).slice(0, showAll ? metadataValues.filter(o => o.mid && o.mid > 100).length : listMaxItems);
     const metadataValuesSourceOrig = metadataValuesOrig.filter(o => o.mid && o.mid > 100).slice(0, showAll ? metadataValuesOrig.filter(o => o.mid && o.mid > 100).length : listMaxItems);
+    /**
+     * Chiusura del form: con modifiche pendenti chiede conferma prima di scartarle.
+     * Il TMModal è montato con askClosingConfirm, quindi non si auto-nasconde: la chiusura
+     * effettiva avviene solo quando onBack smonta il componente.
+     */
+    const handleClose = () => {
+        if (!isModified) {
+            onBack?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            title: SDKUI_Localizator.Cancel, message: SDKUI_Localizator.ConfirmOnCancel, buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: (e) => { if (e === ButtonNames.YES)
+                onBack?.(); }
+        });
+    };
     const renderContent = () => {
-        return (_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: Gutters.getGutters(), separatorColor: 'transparent', separatorActiveColor: 'transparent', showSeparator: showFormulaEditor, start: showFormulaEditor ? ['50%', '50%'] : ['100%', '0%'], min: ['0', '0'], children: [_jsx(TMPanel, { title: isModal ? 'Modifica i metadati' : `${SDKUI_Localizator.BatchUpdate} (${inputDcmts.length} documenti selezionati)`, onBack: deviceType === DeviceType.MOBILE ? onBack : undefined, 
-                        // onClose={deviceType !== DeviceType.MOBILE ? onBack : undefined}
-                        allowMaximize: !isModal, showHeader: !isModal, children: _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, isExpertMode: isExpertMode, showCheckBoxes: ShowCheckBoxesMode.Always, showNullValueCheckBoxes: true, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, validationItems: validationItems, isOpenDistinctValues: showDistinctValuesPanel, selectedMID: focusedMetadataValue?.mid, onFocusedItemChanged: (item) => { setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+        return (_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: Gutters.getGutters(), separatorColor: 'transparent', separatorActiveColor: 'transparent', showSeparator: showFormulaEditor, start: showFormulaEditor ? ['50%', '50%'] : ['100%', '0%'], min: ['0', '0'], children: [_jsx(TMPanel, { title: isModal ? 'Modifica i metadati' : `${SDKUI_Localizator.BatchUpdate} (${inputDcmts.length} documenti selezionati)`, onBack: deviceType === DeviceType.MOBILE ? handleClose : undefined, allowMaximize: !isModal, showHeader: !isModal, children: _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, isExpertMode: isExpertMode, showCheckBoxes: ShowCheckBoxesMode.Always, showNullValueCheckBoxes: true, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, validationItems: validationItems, isOpenDistinctValues: showDistinctValuesPanel, selectedMID: focusedMetadataValue?.mid, onFocusedItemChanged: (item) => { setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
                                         setMetadataValues((prevItems) => prevItems.map((item) => {
                                             const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
                                             return newItem ? { ...item, ...newItem } : item;
@@ -153,7 +167,7 @@ const TMBatchUpdateForm = ({ inputDcmts, TID, DID, isExpertMode = SDKUI_Globals.
                                         } })] }) })] }) }));
     };
     return (_jsx(_Fragment, { children: (isModal && onBack)
-            ? _jsx(TMModal, { title: titleModal, onClose: onBack, width: widthModal ?? '100%', height: heightModal ?? '100%', hidePopup: false, askClosingConfirm: true, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block', padding: "4px" }, children: renderContent() }) })
+            ? _jsx(TMModal, { title: titleModal, onClose: handleClose, width: widthModal ?? '100%', height: heightModal ?? '100%', hidePopup: false, askClosingConfirm: true, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block', padding: "4px" }, children: renderContent() }) })
             : renderContent() }));
 };
 export default TMBatchUpdateForm;

package/lib/components/features/documents/TMDcmtBlog.d.ts

@@ -3,7 +3,10 @@ import { HomeBlogPost, TaskDescriptor } from '@topconsultnpm/sdk-ts';
 interface ITMDcmtBlogProps {
     tid: number | undefined;
     did: number | undefined;
+    /** Il pannello è aperto. La inietta TMPanelWrapper, non va passata dal chiamante */
     isVisible?: boolean;
+    /** La pagina che contiene il pannello è a video: quelle in secondo piano restano montate e non devono caricare */
+    isPageVisible?: boolean;
     fetchBlogDataTrigger?: number;
     onRefreshBlogDatagrid?: () => Promise<void>;
     showFloatingCommentButton?: boolean;

package/lib/components/features/documents/TMDcmtBlog.js

@@ -8,7 +8,7 @@ import TMBlogCommentForm from '../blog/TMBlogCommentForm';
 import TMBlogsPost from '../../grids/TMBlogsPost';
 import TMSpinner from '../../base/TMSpinner';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
-const TMDcmtBlog = ({ tid, did, isVisible, fetchBlogDataTrigger, onRefreshBlogDatagrid, showFloatingCommentButton = true, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
+const TMDcmtBlog = ({ tid, did, isVisible, isPageVisible = true, fetchBlogDataTrigger, onRefreshBlogDatagrid, showFloatingCommentButton = true, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
     const [blogsDatasource, setBlogsDatasource] = useState([]);
     const [hasLoadedDataOnce, setHasLoadedDataOnce] = useState(false); //traccia se *qualsiasi* dato è stato caricato per la prima volta
     const [lastLoadedDid, setLastLoadedDid] = useState(undefined); // `lastLoadedDid` tiene traccia dell'ultimo `did` per cui abbiamo caricato i dati
@@ -47,15 +47,15 @@ const TMDcmtBlog = ({ tid, did, isVisible, fetchBlogDataTrigger, onRefreshBlogDa
             return;
         }
         // Condizione per eseguire il fetch:
-        // 1. Il pannello è visibile
+        // 1. Il pannello è visibile in una pagina a video
         // 2. E (non abbiamo ancora caricato dati o il `did` è cambiato rispetto all'ultima volta)
-        const shouldFetch = isVisible && (!hasLoadedDataOnce || did !== lastLoadedDid);
+        const shouldFetch = isVisible && isPageVisible && (!hasLoadedDataOnce || did !== lastLoadedDid);
         // Esegui la chiamata API solo se il pannello è visibile E i dati non sono già stati caricati
         // O, se vuoi ricaricare ogni volta che diventa visibile (ma è meno efficiente per "pesante")
         if (shouldFetch) {
             fetchBlogDataAsync(tid, did);
         }
-    }, [tid, did, isVisible, hasLoadedDataOnce, lastLoadedDid]);
+    }, [tid, did, isVisible, isPageVisible, hasLoadedDataOnce, lastLoadedDid]);
     const refreshCallback = async () => {
         await fetchBlogDataAsync(tid, did);
         await onRefreshBlogDatagrid?.();

package/lib/components/features/documents/TMDcmtForm.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { DcmtTypeDescriptor, HomeBlogPost, LayoutModes, ObjectRef, SearchResultDescriptor, TaskDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { DcmtInfo, FormModes, MetadataValueDescriptorEx, TaskContext, IGraphometricManagerProp } from '../../../ts';
 import { IntesiCertificateData } from '../../../helper';
+import { ArchiveListMode } from '../../../hooks/useArchiveListForm';
 /**
  * Definisce il contesto da cui è stato invocato il TMDcmtForm.
  * Permette di gestire logiche diverse in base alla provenienza.
@@ -77,6 +78,12 @@ interface ITMDcmtFormProps {
         mid: number;
         value: string;
     }>, tid?: number) => void;
+    /**
+     * Modalità "aggiungi a elenco" (es. archiviazione dettagli multipli): se valorizzata, in layout di archiviazione
+     * il form non archivia ma emette i metadati compilati al chiamante (pulsanti "Aggiungi"/"Modifica" + "Pulisci").
+     * Tutta la logica è incapsulata in useArchiveListForm; usata solo da TMMultiMasterDetailDcmts.
+     */
+    archiveListMode?: ArchiveListMode;
     fetchRemoteCertificates?: (email: string) => Promise<IntesiCertificateData[]>;
     datagridUtility?: {
         onRefreshSearchAsyncDatagrid?: () => Promise<void>;