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

package/lib/components/choosers/TMQuickSearchSettingsForm.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { ResultTypes, SavedQueryCacheService, SDK_Localizator, ValidationItem } from '@topconsultnpm/sdk-ts';
+import styled from 'styled-components';
+import { calcIsModified, calcResponsiveSizes, DEFAULT_QUICK_SEARCH_MAX_DCMTS, IconClear, IconDelete, IconMetadata, SDKUI_Localizator, SYS_ALL_DCMTS_SQD_ID } from '../../helper';
+import { FormModes } from '../../ts';
+import ShowAlert from '../base/TMAlert';
+import TMButton from '../base/TMButton';
+import { useDeviceType } from '../base/TMDeviceProvider';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import TMSpinner from '../base/TMSpinner';
+import TMDropDown from '../editors/TMDropDown';
+import TMTextBox from '../editors/TMTextBox';
+import TMSaveForm from '../forms/TMSaveForm';
+import TMDcmtTypeChooser from './TMDcmtTypeChooser';
+import TMMetadataChooser from './TMMetadataChooser';
+import { useTMQuickSearchInfo } from './TMQuickSearchInfo';
+const StyledFormContent = styled.div `display: flex; flex-direction: column; gap: 12px; padding: 10px 15px;`;
+/** Impostazione vuota da cui parte la configurazione: solo il numero massimo di documenti ha un valore predefinito */
+export const newQuickSearchSettings = () => ({
+    tid: undefined,
+    sqdId: undefined,
+    mid: undefined,
+    maxDcmtsToBeReturned: DEFAULT_QUICK_SEARCH_MAX_DCMTS,
+});
+const TMQuickSearchSettingsForm = ({ settings, onSave, onDelete, onClose }) => {
+    const initialSettings = useMemo(() => settings ?? newQuickSearchSettings(), [settings]);
+    const deviceType = useDeviceType();
+    const [formData, setFormData] = useState(initialSettings);
+    // Finché è undefined la cache delle ricerche rapide non è ancora stata caricata
+    const [allSQDs, setAllSQDs] = useState();
+    // Icona informativa della ricerca rapida scelta: sta fra i pulsanti del suo editor, il dettaglio si apre a parte
+    const { infoButton, detailForm } = useTMQuickSearchInfo({ tid: formData.tid, sqdId: formData.sqdId });
+    useEffect(() => { loadSQDsAsync(); }, []);
+    // L'avviso ha senso solo a cache caricata: prima le ricerche rapide risulterebbero assenti per tutti i tipi documento
+    useEffect(() => {
+        if (!formData.tid || !allSQDs)
+            return;
+        if (allSQDs.some(o => o.masterTID === formData.tid))
+            return;
+        ShowAlert({ mode: 'warning', title: SDK_Localizator.SavedQuery, message: 'Non ci sono ricerche rapide per il tipo documento selezionato', duration: 4000 });
+    }, [formData.tid, allSQDs]);
+    const loadSQDsAsync = async () => {
+        try {
+            TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.SavedQuery} ...` });
+            setAllSQDs(await SavedQueryCacheService.GetAllAsync() ?? []);
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    // Stessa logica di TMSearch: in testa all'elenco c'è la ricerca di sistema con tutti i documenti del tipo documento
+    const sqdsDataSource = useMemo(() => {
+        if (!formData.tid)
+            return [];
+        return [
+            { value: SYS_ALL_DCMTS_SQD_ID, display: SDKUI_Localizator.AllDcmts },
+            ...(allSQDs ?? []).filter(o => o.masterTID === formData.tid).map(o => ({ value: o.id, display: o.name ?? `ID ${o.id}` })),
+        ];
+    }, [allSQDs, formData.tid]);
+    const validationItems = useMemo(() => {
+        const vil = [];
+        if (!formData.tid)
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.DcmtType, SDKUI_Localizator.RequiredField));
+        if (!formData.sqdId)
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDK_Localizator.SavedQuery, SDKUI_Localizator.RequiredField));
+        if (!formData.mid)
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDK_Localizator.Metadata, SDKUI_Localizator.RequiredField));
+        if (!formData.maxDcmtsToBeReturned || formData.maxDcmtsToBeReturned <= 0)
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.MaxDcmtsToBeReturned, SDKUI_Localizator.RequiredField));
+        return vil;
+    }, [formData]);
+    // Ogni editor mostra solo gli errori del proprio campo
+    const validationItemsOf = (propertyName) => validationItems.filter(o => o.PropertyName === propertyName);
+    const patchFormData = (changes) => setFormData(prev => ({ ...prev, ...changes }));
+    /** Cambiare tipo documento rende privi di senso la ricerca rapida e il metadato scelti prima */
+    const onTidChanged = (tids) => {
+        const tid = tids?.[0];
+        if (tid === formData.tid)
+            return;
+        patchFormData({ tid, sqdId: undefined, mid: undefined });
+    };
+    const onSaveAsync = async () => { onSave?.(formData); };
+    /* Ricomincia da capo la configurazione: cambiare tipo documento azzera già ricerca rapida e metadato, ma non
+       permette di tornare alla scelta vuota, da cui l'elenco delle ricerche rapide riparte senza filtri */
+    const isFormDataEmpty = !formData.tid && !formData.sqdId && !formData.mid && formData.maxDcmtsToBeReturned === DEFAULT_QUICK_SEARCH_MAX_DCMTS;
+    const onClearClick = () => setFormData(newQuickSearchSettings());
+    return (_jsx(TMSaveForm, { title: `${SDKUI_Localizator.DistinctValues} - ${SDK_Localizator.SavedQuery}`, showTitleFormMode: false, formMode: FormModes.Update, isModal: true, width: calcResponsiveSizes(deviceType, '600px', '90%', '95%'), height: calcResponsiveSizes(deviceType, '500px', '90%', '95%'), showBackButton: false, hasNavigation: false, skipIsModifiedCheck: true, validationItems: validationItems, isModified: calcIsModified(formData, initialSettings), customToolbarElements: _jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), disabled: isFormDataEmpty, onClick: onClearClick }), onDelete && settings &&
+                    _jsx(TMButton, { btnStyle: 'toolbar', color: 'error', caption: SDKUI_Localizator.Delete, icon: _jsx(IconDelete, {}), onClick: onDelete })] }), onUndo: () => setFormData(initialSettings), onSaveAsync: onSaveAsync, onClose: onClose, children: _jsxs(StyledFormContent, { children: [_jsx(TMDcmtTypeChooser, { label: SDKUI_Localizator.DcmtType, placeHolder: SDKUI_Localizator.DcmtTypeSelect, accessFilter: 'canSearch', values: formData.tid ? [formData.tid] : [], isModifiedWhen: formData.tid !== initialSettings.tid, validationItems: validationItemsOf(SDKUI_Localizator.DcmtType), onValueChanged: onTidChanged }), _jsx(TMDropDown, { searchEnabled: true, usePortal: true, label: SDK_Localizator.SavedQuery, placeHolder: `<${SDKUI_Localizator.NoneSelection}>`, disabled: !formData.tid, value: formData.sqdId ?? '', dataSource: sqdsDataSource, buttons: infoButton ? [infoButton] : [], isModifiedWhen: formData.sqdId !== initialSettings.sqdId, validationItems: validationItemsOf(SDK_Localizator.SavedQuery), onValueChanged: (e) => patchFormData({ sqdId: Number(e.target.value) }) }), _jsx(TMMetadataChooser, { icon: _jsx(IconMetadata, {}), label: SDK_Localizator.Metadata, placeHolder: SDKUI_Localizator.SelectMetadata, disabled: !formData.tid || !formData.sqdId, allowSysMetadata: false, tids: formData.tid ? [formData.tid] : [], values: formData.mid ? [{ tid: formData.tid, mid: formData.mid }] : [], isModifiedWhen: formData.mid !== initialSettings.mid, validationItems: validationItemsOf(SDK_Localizator.Metadata), onValueChanged: (values) => patchFormData({ mid: values?.[0]?.mid }) }), _jsx(TMTextBox, { type: 'number', label: SDKUI_Localizator.MaxDcmtsToBeReturned, minValue: 1, value: formData.maxDcmtsToBeReturned, isModifiedWhen: formData.maxDcmtsToBeReturned !== initialSettings.maxDcmtsToBeReturned, validationItems: validationItemsOf(SDKUI_Localizator.MaxDcmtsToBeReturned), onValueChanged: (e) => patchFormData({ maxDcmtsToBeReturned: Number(e.target.value) || DEFAULT_QUICK_SEARCH_MAX_DCMTS }) }), detailForm] }) }));
+};
+export default TMQuickSearchSettingsForm;

package/lib/components/choosers/TMSelectedValuesSummary.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/** Valore selezionato: value è quello che finisce nel campo del form, display quello mostrato all'utente */
+export type SelectedValueItem = {
+    value: string;
+    display: string;
+};
+interface ITMSelectedValuesSummary {
+    items: Array<SelectedValueItem>;
+    onRemove: (value: string) => void;
+    onClear: () => void;
+}
+declare const TMSelectedValuesSummary: React.FC<ITMSelectedValuesSummary>;
+export default TMSelectedValuesSummary;

package/lib/components/choosers/TMSelectedValuesSummary.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { IconCloseOutline, IconEraser, IconSelected, SDKUI_Localizator } from '../../helper';
+import TMButton from '../base/TMButton';
+import TMTooltip from '../base/TMTooltip';
+import { TMColors } from '../../utils/theme';
+/* Riepilogo dei valori selezionati: sta sopra la griglia perché è il contenuto che finirà nel campo del form.
+   Titolo, chip e pulsante di pulizia stanno su un'unica riga per rubare il minor spazio possibile alla griglia */
+const StyledSelectionSummary = styled.div `
+    display: flex;
+    flex-direction: row;
+    /* Titolo, chip e azioni centrati fra loro: con una sola riga di chip la barra non risulta schiacciata in alto */
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    background-color: ${TMColors.primary_container};
+    border: 1px solid ${TMColors.primary};
+    border-radius: 6px;
+`;
+const StyledSelectionTitle = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 4px;
+    min-height: 28px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    white-space: nowrap;
+    color: ${TMColors.primary};
+
+    svg { flex-shrink: 0; }
+`;
+const StyledSelectionCounter = styled.span `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 5px;
+    border-radius: 10px;
+    background-color: ${TMColors.primary};
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 600;
+`;
+/* max-height: due righe di chip (28px) più il gap: oltre si scorre invece di rubare spazio alla griglia */
+const StyledSelectionChips = styled.div `display: flex; flex: 1; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 4px; max-height: 60px; overflow-y: auto;`;
+const StyledChip = styled.div `
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    max-width: 320px;
+    height: 28px;
+    padding: 0 4px 0 10px;
+    border: 1px solid ${TMColors.primary};
+    border-radius: 14px;
+    background-color: ${TMColors.default_background};
+    color: ${TMColors.text_normal};
+    font-size: 0.875rem;
+`;
+const StyledChipLabel = styled.span `overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`;
+const StyledChipRemove = styled.button `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    color: ${TMColors.button_icon};
+    cursor: pointer;
+
+    &:hover { background-color: ${TMColors.primary}; color: white; }
+`;
+/* Il pulsante di pulizia non deve scorrere con i chip né stringersi */
+const StyledSelectionActions = styled.div `display: flex; flex-shrink: 0; align-items: center; min-height: 28px;`;
+const TMSelectedValuesSummary = ({ items, onRemove, onClear }) => {
+    if (items.length <= 0)
+        return null;
+    return (_jsxs(StyledSelectionSummary, { children: [_jsxs(StyledSelectionTitle, { children: [_jsx(IconSelected, { fontSize: 17, color: TMColors.primary }), _jsx("span", { children: SDKUI_Localizator.Selected }), _jsx(StyledSelectionCounter, { children: items.length })] }), _jsx(StyledSelectionChips, { children: items.map((item) => 
+                /* Il valore lungo viene troncato nel chip: il tooltip è l'unico modo per leggerlo per intero */
+                _jsx(TMTooltip, { content: item.display, children: _jsxs(StyledChip, { children: [_jsx(StyledChipLabel, { children: item.display }), _jsx(StyledChipRemove, { type: 'button', title: SDKUI_Localizator.Remove, onClick: () => onRemove(item.value), children: _jsx(IconCloseOutline, { fontSize: 13 }) })] }) }, item.value)) }), _jsx(StyledSelectionActions, { children: _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Clear, icon: _jsx(IconEraser, {}), onClick: onClear }) })] }));
+};
+export default TMSelectedValuesSummary;

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

@@ -1,17 +1,32 @@
 import React from 'react';
-import { ValidationItem } from '@topconsultnpm/sdk-ts';
+import { MetadataFormats, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { IDateBoxOptions } from 'devextreme-react/date-box';
 import { DateDisplayTypes } from '../../helper';
 interface ITMDateBoxProps extends IDateBoxOptions {
+    /** Tipo di picker da mostrare: Date (solo calendario), Time (solo ora), DateTime (entrambi). Determina quali controlli appaiono nel dropdown. */
     dateDisplayType?: DateDisplayTypes;
+    /** Lista di errori/warning di validazione da mostrare sotto il campo */
     validationItems?: ValidationItem[];
+    /** Se true, evidenzia il campo come modificato (bordo e testo colorati) */
     isModifiedWhen?: boolean;
+    /** Se true, serializza la data nel formato ISO 'yyyy-MM-ddTHH:mm:ss' */
     useDateSerializationFormat?: boolean;
+    /** Elemento DOM contenitore per il dropdown del calendario */
     containerElement?: Element;
+    /** Pulsanti aggiuntivi da mostrare nel campo */
     buttons?: any;
+    /** Se true (default), resetta l'ora a 00:00:00 quando si preme un tasto */
     resetTimeToZeroOnKeyPress?: boolean;
+    /** Icona da mostrare a sinistra del campo */
     icon?: any;
+    /** Padding del contenitore esterno */
     padding?: string;
+    /** Cultura/locale per la formattazione (es. 'en-gb', 'it-it'). Usata per tradurre i nomi dei mesi/giorni nella lingua corretta. */
+    formatCulture?: string;
+    /** Formato di visualizzazione della data (es. ShortDate='17/07/2026', LongDate='17 July 2026'). Determina come la data viene rappresentata come stringa nel campo. */
+    metadataFormat?: MetadataFormats;
+    /** Messaggio personalizzato per data non valida. Se non specificato, genera automaticamente un messaggio con esempio del formato (es. 'Formato richiesto: 20/07/2026') */
+    invalidDateMessage?: string;
 }
 declare const TMDateBox: React.FC<ITMDateBoxProps>;
 export default TMDateBox;

package/lib/components/editors/TMDateBox.js

@@ -1,35 +1,103 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef } from 'react';
+import { useEffect, useId, useMemo, useRef } from 'react';
 import { DateBox } from 'devextreme-react';
-import { DateDisplayTypes, Globalization } from '../../helper';
+import { MetadataFormats } from '@topconsultnpm/sdk-ts';
+import { DateDisplayTypes, Globalization, SDKUI_Localizator } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import TMVilViewer from '../base/TMVilViewer';
+import { formatDateTimeByMetadataFormat } from '../../helper/TMUtils';
 const TMDateBox = (props) => {
-    const resetTimeToZero = props.resetTimeToZeroOnKeyPress ?? true;
+    const { dateDisplayType, validationItems, isModifiedWhen, useDateSerializationFormat, containerElement, resetTimeToZeroOnKeyPress, icon, padding, formatCulture, metadataFormat, invalidDateMessage, readOnly, showClearButton, disabled, displayFormat, label, type, value, width, onValueChange, onInitialized, onContentReady, placeholder, name, inputAttr } = props;
+    const resetTimeToZero = resetTimeToZeroOnKeyPress ?? true;
     const autoId = useId();
-    const effectiveInputAttr = { id: autoId, ...props.inputAttr };
+    const effectiveInputAttr = { id: autoId, ...inputAttr };
+    // Determina se il formato richiede nomi testuali (mesi/giorni) che dipendono dalla cultura
+    const requiresTextualFormat = useMemo(() => {
+        // Solo i formati con "Long" nella data hanno nomi di mesi/giorni che variano per cultura
+        return metadataFormat === MetadataFormats.LongDate ||
+            metadataFormat === MetadataFormats.LongDateShortTime ||
+            metadataFormat === MetadataFormats.LongDateLongTime;
+    }, [metadataFormat]);
+    // Funzione di formattazione personalizzata per rispettare formatCulture
+    // Usata SOLO per formati con nomi testuali (LongDate, LongDateShortTime, LongDateLongTime) e se formatCulture è specificato
+    const customDisplayFormat = useMemo(() => {
+        // Usa funzione custom solo se c'è formatCulture E il formato richiede nomi testuali
+        if (!formatCulture || !requiresTextualFormat)
+            return undefined;
+        // Restituisce una funzione che DevExtreme userà per formattare la data
+        return (date) => {
+            try {
+                if (!date)
+                    return '';
+                // Assicurati che sia un oggetto Date valido
+                const dateObj = date instanceof Date ? date : new Date(date);
+                if (isNaN(dateObj.getTime()))
+                    return '';
+                return formatDateTimeByMetadataFormat(dateObj, metadataFormat, formatCulture);
+            }
+            catch {
+                // Fallback: restituisce stringa ISO o vuota in caso di errore
+                try {
+                    return date instanceof Date ? date.toISOString() : String(date ?? '');
+                }
+                catch {
+                    return '';
+                }
+            }
+        };
+    }, [formatCulture, metadataFormat, requiresTextualFormat]);
+    // Genera il messaggio di errore con esempio del formato supportato
+    const computedInvalidDateMessage = useMemo(() => {
+        try {
+            if (invalidDateMessage)
+                return invalidDateMessage;
+            // Genera un esempio usando la data corrente
+            const exampleDate = new Date();
+            let exampleFormatted;
+            if (customDisplayFormat) {
+                // Usa la funzione custom se disponibile
+                exampleFormatted = customDisplayFormat(exampleDate);
+            }
+            else if (typeof displayFormat === 'string') {
+                // Usa formatDateTimeByMetadataFormat se abbiamo un formato stringa
+                exampleFormatted = formatDateTimeByMetadataFormat(exampleDate, metadataFormat, formatCulture) || displayFormat;
+            }
+            else {
+                // Fallback: usa il formato di Globalization o localizzazione standard
+                const globFormat = Globalization.getDateDisplayFormat(dateDisplayType);
+                exampleFormatted = typeof globFormat === 'string' ? globFormat : exampleDate.toLocaleDateString(formatCulture || 'it-IT');
+            }
+            if (!exampleFormatted)
+                return SDKUI_Localizator.ValueMustBeDateOrTime;
+            return `${SDKUI_Localizator.RequiredFormat}: ${exampleFormatted}`;
+        }
+        catch {
+            // In caso di errore, usa il messaggio generico tradotto
+            return SDKUI_Localizator.ValueMustBeDateOrTime;
+        }
+    }, [invalidDateMessage, customDisplayFormat, displayFormat, dateDisplayType, metadataFormat, formatCulture]);
     useEffect(() => {
         let htmlElement = dateBoxRef?.current?.instance().element();
         if (!htmlElement)
             return;
-        let borderColor = props.isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
-        let textColor = props.isModifiedWhen ? TMColors.isModified : TMColors.text_normal;
+        let borderColor = isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
+        let textColor = isModifiedWhen ? TMColors.isModified : TMColors.text_normal;
         let inputContainer = htmlElement.getElementsByClassName("dx-texteditor-input-container")[0];
         if (inputContainer) {
-            inputContainer.style.background = props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : '';
-            inputContainer.style.color = props.readOnly ? '#525252' : textColor;
+            inputContainer.style.background = readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : '';
+            inputContainer.style.color = readOnly ? '#525252' : textColor;
         }
         let input = htmlElement.querySelector(".dx-texteditor-input");
         if (input) {
-            if (!props.readOnly) {
+            if (!readOnly) {
                 input.style.color = textColor;
             }
             input.style.fontSize = 'var(--base-font-size)';
             input.style.fontFamily = 'var(--base-font-family)';
         }
-        let label = htmlElement.getElementsByClassName("dx-label")[0];
-        if (label) {
-            label.style.borderBottomColor = borderColor;
+        let labelEl = htmlElement.getElementsByClassName("dx-label")[0];
+        if (labelEl) {
+            labelEl.style.borderBottomColor = borderColor;
         }
         let labelBefore = htmlElement.getElementsByClassName("dx-label-before")[0];
         if (labelBefore) {
@@ -43,13 +111,13 @@ const TMDateBox = (props) => {
             labelAfter.style.borderTopColor = borderColor;
             labelAfter.style.borderInlineEndColor = borderColor;
         }
-    }, [props.isModifiedWhen, props.readOnly]);
+    }, [isModifiedWhen, readOnly]);
     const dateBoxRef = useRef(null);
     // soluzione tratta da https://supportcenter.devexpress.com/ticket/details/t1025617/setting-default-time-in-datebox
     const dropDownOptions = {
-        container: props.containerElement,
+        container: containerElement,
         onShown: (e) => {
-            if (props.value != undefined)
+            if (value != undefined)
                 return;
             let dateBoxInstance = dateBoxRef.current?.instance();
             const currentDate = new Date();
@@ -59,13 +127,13 @@ const TMDateBox = (props) => {
         }
     };
     const getType = () => {
-        if (props.type != undefined)
-            return props.type;
-        if (!props.dateDisplayType || props.dateDisplayType == DateDisplayTypes.DateTime)
+        if (type != undefined)
+            return type;
+        if (!dateDisplayType || dateDisplayType == DateDisplayTypes.DateTime)
             return "datetime";
-        return props.dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
+        return dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
     };
-    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', padding: props.padding }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', marginTop: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { onContextMenu: (e) => e.stopPropagation(), style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { readOnly: props.readOnly, ref: dateBoxRef, showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onInitialized: (e) => { props.onInitialized?.(e); }, onContentReady: (e) => { props.onContentReady?.(e); }, placeholder: props.placeholder, ...(props.name && { name: props.name }), inputAttr: effectiveInputAttr, onKeyUp: (e) => {
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', padding: padding }, children: [icon && (_jsx("span", { style: { marginRight: '8px', marginTop: '8px', display: 'flex', alignItems: 'center' }, children: icon })), _jsxs("div", { onContextMenu: (e) => e.stopPropagation(), style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { readOnly: readOnly, ref: dateBoxRef, showClearButton: showClearButton, dateSerializationFormat: useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: disabled, displayFormat: customDisplayFormat ?? displayFormat ?? Globalization.getDateDisplayFormat(dateDisplayType), dropDownOptions: dropDownOptions, invalidDateMessage: computedInvalidDateMessage, label: label, labelMode: 'static', type: getType(), useMaskBehavior: !customDisplayFormat, height: '28px', value: value, width: width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { onValueChange?.(e); }, onInitialized: (e) => { onInitialized?.(e); }, onContentReady: (e) => { onContentReady?.(e); }, placeholder: placeholder, ...(name && { name: name }), inputAttr: effectiveInputAttr, onKeyUp: (e) => {
                             if (e.event?.code == "Space") {
                                 const currentDate = new Date();
                                 currentDate.setHours(0, 0, 0, 0);
@@ -73,7 +141,7 @@ const TMDateBox = (props) => {
                             }
                         }, onValueChanged: (e) => {
                             if (resetTimeToZero) {
-                                if (props.value != undefined)
+                                if (value != undefined)
                                     return;
                                 if (!e.value)
                                     return;
@@ -81,6 +149,6 @@ const TMDateBox = (props) => {
                                 currentDate.setHours(0, 0, 0, 0);
                                 e.component.option("value", currentDate.toISOString());
                             }
-                        } }), _jsx(TMVilViewer, { vil: props.validationItems })] })] }));
+                        } }), _jsx(TMVilViewer, { vil: validationItems })] })] }));
 };
 export default TMDateBox;

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

@@ -4,6 +4,9 @@ interface ITMDropDown extends ITMEditorBase {
     dataSource?: any[];
     value?: string | number | undefined;
     disabled?: boolean;
+    searchEnabled?: boolean;
+    usePortal?: boolean;
+    itemRender?: (item: any) => React.ReactNode;
     onValueChanged?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 declare const TMDropDown: React.FC<ITMDropDown>;

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;