@topconsultnpm/sdkui-react 6.22.0-dev3.2 → 6.22.0-dev3.4

package/lib/components/base/TMDataGrid.js

@@ -19,11 +19,11 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     // main properties
     keyExpr = 'id', dataSource, focusedRowEnabled = true, hoverStateEnabled = true, focusedRowKey, selectedRowKeys = [], 
     // custom options
-    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showHeaderColumnChooser = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusTrigger = 0, counterConfig = { show: false, items: new Map() }, compactPager = false, onHasFiltersChange, customContextMenuItems, 
+    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showHeaderColumnChooser = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusTrigger = 0, keepSearchPanelFocus = true, counterConfig = { show: false, items: new Map() }, compactPager = false, onHasFiltersChange, customContextMenuItems, 
     // events and callbacks
     onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
     // other properties
-    disabled = false, autoNavigateToFocusedRow = true, columnResizingMode = 'widget', columnHidingEnabled = true, columnAutoWidth = true, allowColumnResizing = true, allowColumnReordering = true, showBorders = true, showRowLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines === 1, showColumnLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines === 1, showColumnHeaders = true, rowAlternationEnabled = false, wordWrapEnabled = false, noDataText, columnMinWidth, 
+    disabled = false, autoNavigateToFocusedRow = true, columnResizingMode = 'widget', columnHidingEnabled = true, columnAutoWidth = true, allowColumnResizing = true, allowColumnReordering = true, showBorders = true, showRowLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines === 1, showColumnLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines === 1, showColumnHeaders = true, rowAlternationEnabled = false, repaintChangesOnly = false, wordWrapEnabled = false, noDataText, columnMinWidth, 
     // styles
     id, width = '100%', height = '100%', } = props;
     const internalRef = React.useRef(null);
@@ -42,6 +42,9 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     const gridContainerRef = useRef(null);
     // Ref per evitare focus ripetuti sulla search panel
     const searchPanelFocusedRef = useRef(false);
+    // true quando il testo è stato confermato mentre si stava scrivendo: il fuoco va rimesso nella casella
+    const restoreSearchPanelFocusRef = useRef(false);
+    const getSearchPanelInput = useCallback(() => internalRef.current?.instance().element().querySelector('.dx-datagrid-search-panel input'), []);
     useEffect(() => {
         const count = getRecordCount(dataSource);
         setTotalRecordCount(count);
@@ -342,12 +345,33 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 }
             }, 100);
         }
-    }, [onContentReady, showSearchPanel, searchPanelFocusTrigger]);
+        /* Applicando il testo la griglia ricostruisce la propria barra di intestazione, e con essa la casella di
+           ricerca: senza rimettere il fuoco si dovrebbe cliccare di nuovo nella casella per continuare a scrivere.
+           Il rinvio serve ad agire sulla casella definitiva, non su quella che sta per essere sostituita. */
+        if (restoreSearchPanelFocusRef.current) {
+            restoreSearchPanelFocusRef.current = false;
+            setTimeout(() => {
+                const searchInput = getSearchPanelInput();
+                if (!searchInput || document.activeElement === searchInput)
+                    return;
+                searchInput.focus();
+                // Il cursore va in fondo al testo già digitato: si continua a scrivere da dove si era rimasti
+                const caretPosition = searchInput.value.length;
+                searchInput.setSelectionRange(caretPosition, caretPosition);
+            }, 0);
+        }
+    }, [onContentReady, showSearchPanel, searchPanelFocusTrigger, getSearchPanelInput]);
     const onOptionChangedCallback = useCallback((e) => {
         // Assicurati che component esista
         const grid = e.component;
         if (!grid)
             return;
+        // Il testo digitato viene confermato dopo una pausa: se il fuoco è ancora nella casella, va conservato.
+        // Senza la casella a video non c'è nulla da riportare a fuoco: il testo può cambiare solo da codice
+        if (keepSearchPanelFocus && showSearchPanel && e.fullName === 'searchPanel.text') {
+            const searchInput = getSearchPanelInput();
+            restoreSearchPanelFocusRef.current = !!searchInput && document.activeElement === searchInput;
+        }
         // Controlla se il cambiamento riguarda i filtri
         const isFilterChange = e.fullName === 'filterValue' || (e.fullName?.startsWith('columns') && e.fullName.endsWith('filterValues'));
         if (isFilterChange) {
@@ -374,7 +398,11 @@ const TMDataGrid = React.forwardRef((props, ref) => {
         }
         // Propaga l'evento originale
         onOptionChanged?.(e);
-    }, [onOptionChanged, onHasFiltersChange]);
+    }, [onOptionChanged, onHasFiltersChange, keepSearchPanelFocus, showSearchPanel, getSearchPanelInput]);
+    /* Ricreare questo oggetto a ogni render lo farebbe leggere come un cambiamento da devextreme-react, che confronta
+       le opzioni per riferimento: ogni cambio di headerFilter invalida la barra di intestazione della griglia, cioè
+       proprio dove sta la casella di ricerca. Tenendolo stabile la barra viene ricostruita solo quando serve davvero. */
+    const headerFilterSearch = useMemo(() => ({ enabled: true, ...headerFilter?.search }), [headerFilter?.search]);
     // In modalità compatta il pager usa il displayMode 'compact' di DevExtreme (page numbers sostituiti da "pagina / totale"),
     // salvo displayMode esplicito passato dal chiamante
     const effectivePager = useMemo(() => {
@@ -388,14 +416,14 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                     // events and callbacks
                     onSelectionChanged: onSelectionChangedCallback, onRowDblClick: onRowDblClickCallback, onRowPrepared: onRowPrepared, onContextMenuPreparing: onContextMenuPreparingCallback, onToolbarPreparing: onToolbarPreparingCallback, onFocusedRowChanged: onFocusedRowChanged, onRowClick: onRowClick, onCellClick: onCellClick, onCellDblClick: onCellDblClick, onOptionChanged: onOptionChangedCallback, onContentReady: onContentReadyCallback, onInitialized: onInitialized, customizeColumns: customizeColumns, onEditorPreparing: onEditorPreparing, onCellPrepared: onCellPrepared, onRowUpdating: onRowUpdating, onRowExpanded: onRowExpanded, onRowCollapsed: onRowCollapsed, onRowUpdated: onRowUpdated, onSaved: onSaved, onEditCanceled: onEditCanceled, onEditingStart: onEditingStart, onEditingChange: onEditingChange, onKeyDown: onKeyDown, 
                     // other properties
-                    disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, wordWrapEnabled: wordWrapEnabled, columnMinWidth: columnMinWidth, noDataText: noDataText, 
+                    disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, repaintChangesOnly: repaintChangesOnly, wordWrapEnabled: wordWrapEnabled, columnMinWidth: columnMinWidth, noDataText: noDataText, 
                     // styles
                     width: width, height: height, style: {
                         userSelect: 'none',
                         // Temporary: iOS-specific styles to prevent default long-press menu and text selection
                         WebkitTouchCallout: 'none',
                         WebkitUserSelect: 'none'
-                    }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column, alignment: column.alignment ?? 'left' }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter, search: { enabled: true, ...headerFilter?.search } }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), effectivePager && _jsx(Pager, { ...effectivePager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { target: ".dx-data-row", items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
+                    }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column, alignment: column.alignment ?? 'left' }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter, search: headerFilterSearch }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), effectivePager && _jsx(Pager, { ...effectivePager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { target: ".dx-data-row", items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
                     visible: customContextMenuVisible,
                     position: customContextMenuPosition,
                     onClose: () => setCustomContextMenuVisible(false)
@@ -406,229 +434,229 @@ export default TMDataGrid;
 // (padding, altezza minima, font e dimensione dei pulsanti di pagina).
 // Con compactPager = false non emette nessuna regola: width/height restano inline come in precedenza,
 // così il rendering è identico a quello del div originale.
-const StyledDataGridContainer = styled.div `
-    ${({ $compactPager }) => $compactPager && css `
-        & .dx-datagrid-pager {
-            padding: 2px 4px !important;
-            min-height: 0 !important;
-            font-size: 11px;
-        }
-
-        & .dx-datagrid-pager .dx-page,
-        & .dx-datagrid-pager .dx-page-size,
-        & .dx-datagrid-pager .dx-selection,
-        & .dx-datagrid-pager .dx-navigate-button {
-            min-width: 18px !important;
-            min-height: 18px !important;
-            height: auto !important;
-            padding: 1px 5px !important;
-            line-height: 16px !important;
-            font-size: 11px;
-        }
-
-        & .dx-datagrid-pager .dx-pages,
-        & .dx-datagrid-pager .dx-page-sizes,
-        & .dx-datagrid-pager .dx-info,
-        & .dx-datagrid-pager .dx-page-index,
-        & .dx-datagrid-pager .dx-pages .dx-info {
-            font-size: 11px;
-            margin-top: 0 !important;
-            margin-bottom: 0 !important;
-        }
-
-        & .dx-datagrid-pager .dx-info {
-            margin-left: 4px !important;
-            margin-right: 4px !important;
-        }
-
-        /* Editor del numero di pagina (displayMode compact) */
-        & .dx-datagrid-pager .dx-page-index .dx-texteditor-input,
-        & .dx-datagrid-pager .dx-page-sizes .dx-texteditor-input {
-            min-height: 18px !important;
-            height: 18px !important;
-            padding: 0 4px !important;
-            font-size: 11px;
-        }
-    `}
+const StyledDataGridContainer = styled.div `
+    ${({ $compactPager }) => $compactPager && css `
+        & .dx-datagrid-pager {
+            padding: 2px 4px !important;
+            min-height: 0 !important;
+            font-size: 11px;
+        }
+
+        & .dx-datagrid-pager .dx-page,
+        & .dx-datagrid-pager .dx-page-size,
+        & .dx-datagrid-pager .dx-selection,
+        & .dx-datagrid-pager .dx-navigate-button {
+            min-width: 18px !important;
+            min-height: 18px !important;
+            height: auto !important;
+            padding: 1px 5px !important;
+            line-height: 16px !important;
+            font-size: 11px;
+        }
+
+        & .dx-datagrid-pager .dx-pages,
+        & .dx-datagrid-pager .dx-page-sizes,
+        & .dx-datagrid-pager .dx-info,
+        & .dx-datagrid-pager .dx-page-index,
+        & .dx-datagrid-pager .dx-pages .dx-info {
+            font-size: 11px;
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+        }
+
+        & .dx-datagrid-pager .dx-info {
+            margin-left: 4px !important;
+            margin-right: 4px !important;
+        }
+
+        /* Editor del numero di pagina (displayMode compact) */
+        & .dx-datagrid-pager .dx-page-index .dx-texteditor-input,
+        & .dx-datagrid-pager .dx-page-sizes .dx-texteditor-input {
+            min-height: 18px !important;
+            height: 18px !important;
+            padding: 0 4px !important;
+            font-size: 11px;
+        }
+    `}
 `;
 // Stile del pannello del filtro d'intestazione (ricerca, elenco valori, OK/Annulla).
 // Il popup è in portale sul body, fuori da StyledDataGridContainer: le regole sono globali
 // ma tutte sotto .dx-header-filter-menu, classe che DevExtreme applica solo a questo popup.
-const HeaderFilterMenuGlobalStyle = createGlobalStyle `
-    .dx-header-filter-menu {
-
-        &.dx-popup-wrapper > .dx-overlay-content.dx-popup-normal {
-            border: 1px solid #E4E8EE;
-            border-radius: 8px;
-            box-shadow: 0 2px 6px rgba(18, 44, 76, .08), 0 12px 28px rgba(18, 44, 76, .14);
-            overflow: hidden;
-        }
-
-        &.dx-popup-wrapper .dx-popup-content {
-            padding: 10px 10px 4px;
-        }
-
-        /* Campo di ricerca: TextBox mode "search" resa da List o da TreeView (filtri gerarchici) */
-        .dx-searchbox.dx-list-search,
-        .dx-searchbox.dx-treeview-search {
-            margin-bottom: 8px;
-            border-radius: 6px;
-            border: 1px solid #CDD2D8;
-            background-color: #F4F6F9;
-            box-shadow: none;
-            transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
-
-            /* fluent disegna qui la barretta di focus, sostituita da bordo + alone */
-            &::before,
-            &::after {
-                display: none;
-            }
-
-            &.dx-state-hover:not(.dx-state-focused) {
-                border-color: #AEB6C1;
-                background-color: #EEF2F7;
-            }
-
-            &.dx-state-focused {
-                border-color: #2559A5;
-                background-color: #FFFFFF;
-                box-shadow: 0 0 0 2px rgba(37, 89, 165, .16);
-            }
-
-            .dx-icon-search {
-                width: 28px;
-                color: #8A929B;
-                transition: color .15s ease;
-            }
-
-            &.dx-state-focused .dx-icon-search {
-                color: #2559A5;
-            }
-
-            .dx-texteditor-input {
-                min-height: 28px;
-                padding-inline-start: 28px;
-                padding-inline-end: 8px;
-                font-size: 12px;
-                background-color: transparent;
-            }
-
-            .dx-placeholder {
-                color: #9AA3AD;
-                font-size: 12px;
-
-                &::before {
-                    padding-inline-start: 28px;
-                    padding-inline-end: 8px;
-                }
-            }
-
-            .dx-clear-button-area .dx-icon-clear {
-                color: #8A929B;
-                transition: color .15s ease;
-            }
-
-            .dx-clear-button-area:hover .dx-icon-clear {
-                color: #2559A5;
-            }
-        }
-
-        .dx-list-item {
-            border-radius: 4px;
-            transition: background-color .12s ease;
-        }
-
-        .dx-list-item-content {
-            padding: 4px 6px;
-        }
-
-        .dx-list-item.dx-state-hover,
-        .dx-list-item.dx-state-focused {
-            background-color: #F1F6FD;
-            color: #122C4C;
-        }
-
-        .dx-list-select-all {
-            padding: 2px 0 6px;
-            margin-bottom: 4px;
-            border-bottom: 1px solid #ECEFF3;
-        }
-
-        .dx-list-select-all-label {
-            font-weight: 600;
-            color: #122C4C;
-        }
-
-        .dx-checkbox-checked .dx-checkbox-icon,
-        .dx-checkbox-indeterminate .dx-checkbox-icon {
-            border-color: #2559A5;
-            background-color: #2559A5;
-        }
-
-        .dx-checkbox.dx-state-hover:not(.dx-checkbox-checked) .dx-checkbox-icon {
-            border-color: #2559A5;
-        }
-
-        /* il :not() lascia intatto il fade-out nativo della scrollbar */
-        .dx-scrollable-scroll:not(.dx-state-invisible) .dx-scrollable-scroll-content {
-            background-color: rgba(18, 44, 76, .28);
-            border-radius: 3px;
-        }
-
-        &.dx-popup-wrapper .dx-popup-bottom.dx-toolbar {
-            padding: 8px 10px 10px;
-            border-top: 1px solid #ECEFF3;
-        }
-
-        .dx-popup-bottom .dx-button {
-            border-radius: 5px;
-            min-width: 76px;
-            margin: 0;
-        }
-
-        .dx-popup-bottom .dx-toolbar-button + .dx-toolbar-button {
-            margin-inline-start: 6px;
-
-            .dx-button {
-                margin: 0;
-            }
-        }
-
-        /* DevExtreme aggiunge prima OK e poi Annulla: individuarli per posizione li rende indipendenti dalla lingua */
-        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button:first-child .dx-button {
-            border-color: transparent;
-            background-color: #2559A5;
-
-            .dx-button-text {
-                color: #FFFFFF;
-            }
-
-            &.dx-state-hover {
-                background-color: #1E4A8C;
-            }
-
-            &.dx-state-active {
-                background-color: #1A3F78;
-            }
-        }
-
-        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button + .dx-toolbar-button .dx-button {
-            border-color: transparent;
-            background-color: transparent;
-
-            .dx-button-text {
-                color: #44506B;
-            }
-
-            &.dx-state-hover {
-                background-color: #F0F3F7;
-            }
-
-            &.dx-state-active {
-                background-color: #E6EBF2;
-            }
-        }
-    }
+const HeaderFilterMenuGlobalStyle = createGlobalStyle `
+    .dx-header-filter-menu {
+
+        &.dx-popup-wrapper > .dx-overlay-content.dx-popup-normal {
+            border: 1px solid #E4E8EE;
+            border-radius: 8px;
+            box-shadow: 0 2px 6px rgba(18, 44, 76, .08), 0 12px 28px rgba(18, 44, 76, .14);
+            overflow: hidden;
+        }
+
+        &.dx-popup-wrapper .dx-popup-content {
+            padding: 10px 10px 4px;
+        }
+
+        /* Campo di ricerca: TextBox mode "search" resa da List o da TreeView (filtri gerarchici) */
+        .dx-searchbox.dx-list-search,
+        .dx-searchbox.dx-treeview-search {
+            margin-bottom: 8px;
+            border-radius: 6px;
+            border: 1px solid #CDD2D8;
+            background-color: #F4F6F9;
+            box-shadow: none;
+            transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
+
+            /* fluent disegna qui la barretta di focus, sostituita da bordo + alone */
+            &::before,
+            &::after {
+                display: none;
+            }
+
+            &.dx-state-hover:not(.dx-state-focused) {
+                border-color: #AEB6C1;
+                background-color: #EEF2F7;
+            }
+
+            &.dx-state-focused {
+                border-color: #2559A5;
+                background-color: #FFFFFF;
+                box-shadow: 0 0 0 2px rgba(37, 89, 165, .16);
+            }
+
+            .dx-icon-search {
+                width: 28px;
+                color: #8A929B;
+                transition: color .15s ease;
+            }
+
+            &.dx-state-focused .dx-icon-search {
+                color: #2559A5;
+            }
+
+            .dx-texteditor-input {
+                min-height: 28px;
+                padding-inline-start: 28px;
+                padding-inline-end: 8px;
+                font-size: 12px;
+                background-color: transparent;
+            }
+
+            .dx-placeholder {
+                color: #9AA3AD;
+                font-size: 12px;
+
+                &::before {
+                    padding-inline-start: 28px;
+                    padding-inline-end: 8px;
+                }
+            }
+
+            .dx-clear-button-area .dx-icon-clear {
+                color: #8A929B;
+                transition: color .15s ease;
+            }
+
+            .dx-clear-button-area:hover .dx-icon-clear {
+                color: #2559A5;
+            }
+        }
+
+        .dx-list-item {
+            border-radius: 4px;
+            transition: background-color .12s ease;
+        }
+
+        .dx-list-item-content {
+            padding: 4px 6px;
+        }
+
+        .dx-list-item.dx-state-hover,
+        .dx-list-item.dx-state-focused {
+            background-color: #F1F6FD;
+            color: #122C4C;
+        }
+
+        .dx-list-select-all {
+            padding: 2px 0 6px;
+            margin-bottom: 4px;
+            border-bottom: 1px solid #ECEFF3;
+        }
+
+        .dx-list-select-all-label {
+            font-weight: 600;
+            color: #122C4C;
+        }
+
+        .dx-checkbox-checked .dx-checkbox-icon,
+        .dx-checkbox-indeterminate .dx-checkbox-icon {
+            border-color: #2559A5;
+            background-color: #2559A5;
+        }
+
+        .dx-checkbox.dx-state-hover:not(.dx-checkbox-checked) .dx-checkbox-icon {
+            border-color: #2559A5;
+        }
+
+        /* il :not() lascia intatto il fade-out nativo della scrollbar */
+        .dx-scrollable-scroll:not(.dx-state-invisible) .dx-scrollable-scroll-content {
+            background-color: rgba(18, 44, 76, .28);
+            border-radius: 3px;
+        }
+
+        &.dx-popup-wrapper .dx-popup-bottom.dx-toolbar {
+            padding: 8px 10px 10px;
+            border-top: 1px solid #ECEFF3;
+        }
+
+        .dx-popup-bottom .dx-button {
+            border-radius: 5px;
+            min-width: 76px;
+            margin: 0;
+        }
+
+        .dx-popup-bottom .dx-toolbar-button + .dx-toolbar-button {
+            margin-inline-start: 6px;
+
+            .dx-button {
+                margin: 0;
+            }
+        }
+
+        /* DevExtreme aggiunge prima OK e poi Annulla: individuarli per posizione li rende indipendenti dalla lingua */
+        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button:first-child .dx-button {
+            border-color: transparent;
+            background-color: #2559A5;
+
+            .dx-button-text {
+                color: #FFFFFF;
+            }
+
+            &.dx-state-hover {
+                background-color: #1E4A8C;
+            }
+
+            &.dx-state-active {
+                background-color: #1A3F78;
+            }
+        }
+
+        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button + .dx-toolbar-button .dx-button {
+            border-color: transparent;
+            background-color: transparent;
+
+            .dx-button-text {
+                color: #44506B;
+            }
+
+            &.dx-state-hover {
+                background-color: #F0F3F7;
+            }
+
+            &.dx-state-active {
+                background-color: #E6EBF2;
+            }
+        }
+    }
 `;
 const getRecordCount = (dataSource) => {
     if (Array.isArray(dataSource)) {

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IColumnProps } from 'devextreme-react/data-grid';
 import { SearchResultDescriptor } from '@topconsultnpm/sdk-ts';
 export type FormatOption = {
@@ -11,5 +12,5 @@ interface TMDataGridExportFormProps {
     selectedRowKeys: Array<number>;
     onCloseExportForm: () => void;
 }
-declare const TMDataGridExportForm: (props: TMDataGridExportFormProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMDataGridExportForm: (props: TMDataGridExportFormProps) => React.JSX.Element;
 export default TMDataGridExportForm;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { FileItem } from "./TMFileManagerUtils";
 import { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
 interface TMFileManagerProps {
@@ -42,5 +43,5 @@ interface TMFileManagerProps {
     /** Optional: Callback to handle back button */
     onMaximizePanel?: () => void;
 }
-declare const TMFileManager: (props: TMFileManagerProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMFileManager: (props: TMFileManagerProps) => React.JSX.Element;
 export default TMFileManager;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { FileItem } from "./TMFileManagerUtils";
 import { UserDescriptor } from "@topconsultnpm/sdk-ts";
 import { TMContextMenuItemProps } from "../NewComponents/ContextMenu/types";
@@ -13,5 +14,5 @@ interface TMFileManagerDataGridViewProps {
     userID?: number;
     onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;
 }
-declare const TMFileManagerDataGridView: (props: TMFileManagerDataGridViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMFileManagerDataGridView: (props: TMFileManagerDataGridViewProps) => React.JSX.Element;
 export default TMFileManagerDataGridView;

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

@@ -20,5 +20,5 @@ export interface TMFileManagerThumbnailItemsProps {
     onDoubleClick?: (file: FileItem) => void;
     userID?: number;
 }
-declare const TMFileManagerThumbnailItems: (props: TMFileManagerThumbnailItemsProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMFileManagerThumbnailItems: (props: TMFileManagerThumbnailItemsProps) => React.JSX.Element;
 export default TMFileManagerThumbnailItems;

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

@@ -28,5 +28,5 @@ interface TMFileManagerThumbnailsViewProps {
         };
     }>>;
 }
-declare const TMFileManagerThumbnailsView: (props: TMFileManagerThumbnailsViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMFileManagerThumbnailsView: (props: TMFileManagerThumbnailsViewProps) => React.JSX.Element;
 export default TMFileManagerThumbnailsView;

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

@@ -48,7 +48,9 @@ export declare const colors: {
     LIGHT_YELLOW: string;
     MEDIUM_GREEN: string;
 };
-export declare const TMFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const TMFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $backgroundColor?: string;
     $textColor?: string;
     $bgHoverColor?: string;

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

@@ -17,7 +17,7 @@ declare const TMCard: ({ borderRadius, onClick, scrollX, scrollY, width, height,
     scroll?: boolean;
     backgroundColor?: string;
     color?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 declare const TMSplitterLayout: ({ animation, showSeparator, separatorColor, overflow, separatorActiveColor, separatorSize, direction, children, start, min, }: {
     animation?: boolean;
     separatorColor?: string;
@@ -29,7 +29,7 @@ declare const TMSplitterLayout: ({ animation, showSeparator, separatorColor, ove
     children?: React.ReactNode;
     start?: string[];
     min?: string[];
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 declare const TMLayoutItem: ({ onClick, children, width, minWidth, maxWidth, maxHeight, height, minHeight }: {
     onClick?: () => void;
     children: React.ReactNode;
@@ -40,7 +40,7 @@ declare const TMLayoutItem: ({ onClick, children, width, minWidth, maxWidth, max
     fixed?: boolean;
     height?: string;
     minHeight?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export interface ITMLayoutContainerProps {
     children: React.ReactNode;
     gap?: number;
@@ -50,6 +50,6 @@ export interface ITMLayoutContainerProps {
     onClick?: () => void;
     onContextMenu?: (e: React.MouseEvent) => void;
 }
-declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction, onContextMenu }: ITMLayoutContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction, onContextMenu }: ITMLayoutContainerProps) => React.JSX.Element;
 export { TMCard, TMLayoutItem, TMSplitterLayout };
 export default TMLayoutContainer;