@topconsultnpm/sdkui-react 6.22.0-dev3.9 → 6.22.0-dev4.10

package/lib/components/base/TMCustomButton.js

@@ -1,10 +1,11 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useMemo } from 'react';
 import TMModal from './TMModal';
 import styled from 'styled-components';
-import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
+import { SDKUI_Localizator } from '../..';
 import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
+import TMWaitPanelManager from './waitPanel/TMWaitPanelManager';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
@@ -53,12 +54,6 @@ const TMCustomButton = (props) => {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
     const itemsToProcess = useMemo(() => selectedItems && selectedItems.length > 0 ? selectedItems : [attributes], [selectedItems, attributes]);
-    // Stati per il wait panel
-    const [showWaitPanel, setShowWaitPanel] = useState(itemsToProcess.length > 0 && !RunOnce);
-    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, itemsToProcess.length));
-    const [waitPanelValue, setWaitPanelValue] = useState(0);
-    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(itemsToProcess.length);
-    const [abortController, setAbortController] = useState(undefined);
     // Aggiungi timestamp all'URL per evitare cache
     const iframeUrl = useMemo(() => {
         if (!scriptUrl)
@@ -83,41 +78,45 @@ const TMCustomButton = (props) => {
         setLoading(false);
         setError(true);
     };
-    const executeSequentially = async (controller) => {
+    const executeSequentially = async () => {
         if (!itemsToProcess)
             return;
-        for (const [index, item] of itemsToProcess.entries()) {
-            if (controller.signal.aborted)
-                break;
-            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
-            setWaitPanelValue(index);
-            // Attendi che l'iframe sia pronto e invia il messaggio
-            await new Promise((resolve) => {
-                const checkIframe = setInterval(() => {
-                    if (iframeRef.current?.contentWindow) {
-                        clearInterval(checkIframe);
-                        if (selectedItems && selectedItems.length > 0) {
-                            //devo convertire item in formData
-                            const processedItem = getSelectedItem(args, formData, item);
-                            postMessageIframe(processedItem);
-                        }
-                        else {
-                            postMessageIframe(item);
+        const waitPanel = TMWaitPanelManager.show({
+            title: SDKUI_Localizator.CustomButtonAction,
+            max: itemsToProcess.length,
+            cancelable: true,
+            showCounters: false,
+        });
+        try {
+            for (const [index, item] of itemsToProcess.entries()) {
+                if (waitPanel.aborted)
+                    break;
+                waitPanel.setSubtitle(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
+                // Attendi che l'iframe sia pronto e invia il messaggio
+                await new Promise((resolve) => {
+                    const checkIframe = setInterval(() => {
+                        if (iframeRef.current?.contentWindow) {
+                            clearInterval(checkIframe);
+                            if (selectedItems && selectedItems.length > 0) {
+                                //devo convertire item in formData
+                                const processedItem = getSelectedItem(args, formData, item);
+                                postMessageIframe(processedItem);
+                            }
+                            else {
+                                postMessageIframe(item);
+                            }
+                            // Attendi prima di passare al prossimo
+                            setTimeout(resolve, 500);
                         }
-                        //imposta 100% se sono all'ultimo item
-                        if (index === itemsToProcess.length - 1)
-                            setWaitPanelValue(index + 1);
-                        // Attendi prima di passare al prossimo
-                        setTimeout(() => {
-                            setWaitPanelValue(index + 1);
-                            resolve();
-                        }, 500);
-                    }
-                }, 100);
-            });
+                    }, 100);
+                });
+                await waitPanel.step();
+            }
+        }
+        finally {
+            waitPanel.close();
+            onClose?.();
         }
-        setShowWaitPanel(false);
-        onClose?.();
     };
     const postMessageIframe = (data) => {
         console.log("TMCustomButton - postMessageIframe - data:", data);
@@ -130,14 +129,7 @@ const TMCustomButton = (props) => {
             return;
         if (!RunOnce && itemsToProcess.length > 0) {
             // esegui per ogni item selezionato
-            const controller = new AbortController();
-            controller.signal.addEventListener('abort', () => {
-                setShowWaitPanel(false);
-                onClose?.();
-            });
-            setAbortController(controller);
-            setWaitPanelMaxValue(itemsToProcess.length);
-            executeSequentially(controller);
+            executeSequentially();
         }
         else {
             // Modalità RunOnce: invia dati all'iframe quando è caricato
@@ -157,6 +149,6 @@ const TMCustomButton = (props) => {
         }
     }, []);
     const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [loading && _jsx(LoadingOverlay, {}), error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: iframeUrl })] }));
-    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && iframeContent;
 };
 export default TMCustomButton;

package/lib/components/base/TMDataGrid.js

@@ -3,8 +3,8 @@ import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, us
 import styled, { createGlobalStyle, css } from 'styled-components';
 import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail, Position, ColumnChooserSearch, ColumnChooserSelection } from 'devextreme-react/data-grid';
 import DataSource from 'devextreme/data/data_source';
-import { IconAll, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
-import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
+import { IconAll, IconFormatPageSplit, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
+import TMCounterContainer, { CounterItemKey, formatCount } from './TMCounterContainer';
 import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import { useLongPress } from '../NewComponents/ContextMenu/useLongPress';
 ;
@@ -132,6 +132,9 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             setCustomContextMenuOnEmptyArea(false);
         },
     });
+    // Valori primitivi: paging di default viene ricreato a ogni render e non può stare tra le dipendenze dell'effetto
+    const pagingEnabled = !!paging && paging.enabled !== false;
+    const rowsPerPage = paging?.pageSize ?? pageSize;
     // Creating a ref to store the timestamp of the last selection change
     const lastSelectionChangeTime = useRef(Date.now());
     useEffect(() => {
@@ -148,6 +151,11 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 [
                     CounterItemKey.selectedItems,
                     { key: CounterItemKey.selectedItems, show: true, caption: SDKUI_Localizator.SelectedItems, value: selectedRowKeys.length, icon: _jsx(IconSelected, {}), order: 1 }
+                ],
+                [
+                    // Righe per pagina: visibile solo quando c'è il paginatore, cioè gli elementi non stanno in una pagina
+                    CounterItemKey.pageSize,
+                    { key: CounterItemKey.pageSize, show: pagingEnabled && totalRecordCount > rowsPerPage, caption: SDKUI_Localizator.DocumentsPerPage, value: `${formatCount(rowsPerPage)} ${SDKUI_Localizator.PerPage}`, icon: _jsx(IconFormatPageSplit, {}), order: 2 }
                 ]
             ]);
             const mergedCounterItems = new Map(defaultCounterItems);
@@ -164,7 +172,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             }));
             setCounterValues(sortedCounterItems);
         }
-    }, [counterConfig, visibleItemsCount, selectedRowKeys]);
+    }, [counterConfig, visibleItemsCount, selectedRowKeys, pagingEnabled, rowsPerPage, totalRecordCount]);
     // Handle selection changes and invoke callback if provided
     const onSelectionChangedCallback = useCallback((e) => {
         lastSelectionChangeTime.current = Date.now(); // Store current time of selection change
@@ -331,7 +339,8 @@ const TMDataGrid = React.forwardRef((props, ref) => {
         if (!internalRef.current)
             return;
         // Update state with the current number of visible rows in the DataGrid
-        setVisibleItemsCount(internalRef.current.instance()?.getVisibleRows()?.length ?? 0);
+        const grid = internalRef.current.instance();
+        setVisibleItemsCount(grid ? getVisibleItemsCount(grid) : 0);
         // Focusing SearchPanel on content ready - solo se non è già stato fatto
         if (showSearchPanel && searchPanelFocusTrigger && searchPanelFocusTrigger > 0 && !searchPanelFocusedRef.current) {
             // Use a small delay to ensure the DOM is fully rendered before trying to focus
@@ -434,229 +443,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)) {
@@ -667,3 +676,14 @@ const getRecordCount = (dataSource) => {
     }
     return 0; // Default case when neither condition is met
 };
+/* Righe della pagina corrente: una per gruppo più le sue righe dati, che non contano se il gruppo è chiuso.
+   Stesso criterio di DevExtreme: un gruppo ha la proprietà items, valorizzata a null quando è chiuso. */
+const countPageRows = (items) => items.reduce((count, item) => count + (item.items === undefined ? 1 : 1 + countPageRows(item.items ?? [])), 0);
+/* Con il rendering virtuale getVisibleRows restituisce solo le righe disegnate a video, non tutte quelle della pagina:
+   in quel caso le righe si contano dagli elementi caricati per la pagina corrente. */
+const getVisibleItemsCount = (grid) => {
+    if (grid.option('scrolling.rowRenderingMode') === 'virtual') {
+        return countPageRows(grid.getDataSource()?.items() ?? []);
+    }
+    return grid.getVisibleRows()?.length ?? 0;
+};

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

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

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

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