@topconsultnpm/sdkui-react 6.17.0-test9

package/lib/components/base/TMCounterBar.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TMTooltip from './TMTooltip';
+import styled from 'styled-components';
+const StyledList = styled.div `
+    background-color: #f0f0f0;
+    display: flex;
+    align-items: center;
+    /* border: 1px solid #dadada; */
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-top: 0;
+    width: 100%;
+    margin-top: -3px;
+`;
+const StyledListItem = styled.div `
+    display: flex;
+    align-items: center;
+    border-right: 1px dashed lightgray;
+    padding: 4px 12px;
+    gap: 3px;
+    transition: all .5s ease-in;
+    &:hover {
+        background-color: white;
+        svg, span {
+            color: orange;
+        }
+    }
+    svg {
+        margin-right: 3px;
+        font-size: 12px;
+        color: gray;
+	}
+    span {
+        color: gray;
+        cursor: default;
+    }
+`;
+const TMCounterBar = ({ items }) => {
+    return (_jsx(StyledList, { children: parseInt(items[0].text) !== -1 && items.map((item, index) => {
+            return _jsx(TMTooltip, { content: item.tooltip, children: _jsxs(StyledListItem, { children: [" ", item.icon, _jsx("span", { children: item.text })] }) }, index);
+        }) }));
+};
+export default TMCounterBar;

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

@@ -0,0 +1,23 @@
+export declare enum CounterItemKey {
+    allItems = "allItems",
+    visibleItems = "visibleItems",
+    selectedItems = "selectedItems"
+}
+export interface ITMCounterItemData {
+    key?: string;
+    show: boolean;
+    caption?: string;
+    icon?: JSX.Element;
+    value?: number | string;
+    order?: number;
+}
+export interface ITMCounterContainerProps {
+    show?: boolean;
+    items?: Map<string, ITMCounterItemData>;
+    bgColorContainer?: string;
+    bgColorItem?: string;
+    textColorItem?: string;
+    hoverColorItem?: string;
+}
+declare const TMCounterContainer: (props: ITMCounterContainerProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export default TMCounterContainer;

package/lib/components/base/TMCounterContainer.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import TMTooltip from './TMTooltip';
+/* Styled container component that holds all counter items */
+const Container = styled.div `
+    background: ${({ bgColor }) => bgColor || 'linear-gradient(to right, #f8f9fa, #e9ecef)'};
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 4px 8px;
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
+    gap: 8px;
+`;
+/* Styled counter item component with customizable styles */
+const Counter = styled.div `
+    display: flex;
+    align-items: center;
+    border-right: 1px solid rgba(211, 211, 211, 0.5);
+    padding: 4px 10px;
+    gap: 8px;
+    transition: all 0.3s ease-in-out;
+    background: ${({ color }) => color || 'rgba(255, 255, 255, 0.6)'};
+    
+    &:last-child {
+        border-right: none;
+    }
+
+    svg {
+        color: ${({ textColor }) => textColor || '#495057'};
+        transition: color 0.3s ease-in-out;
+    }
+
+    span {
+        color: ${({ textColor }) => textColor || '#495057'};
+        transition: color 0.3s ease-in-out;
+    }
+`;
+/* Enum for possible counter item keys */
+export var CounterItemKey;
+(function (CounterItemKey) {
+    /* Key for all item count */
+    CounterItemKey["allItems"] = "allItems";
+    /* Key for visible item count */
+    CounterItemKey["visibleItems"] = "visibleItems";
+    /* Key for selected item count */
+    CounterItemKey["selectedItems"] = "selectedItems";
+})(CounterItemKey || (CounterItemKey = {}));
+;
+;
+const TMCounterContainer = (props) => {
+    const { items, bgColorContainer, hoverColorItem, bgColorItem, textColorItem } = props;
+    return (items && _jsx(Container, { bgColor: bgColorContainer, children: [...items.values()].map((item) => {
+            if (!item.show)
+                return null;
+            return _jsx(TMTooltip, { content: item.caption ?? '', children: _jsxs(Counter, { bgColor: bgColorContainer, color: bgColorItem, hoverColor: hoverColorItem, textColor: textColorItem, children: [item.icon ?? null, _jsx("span", { children: item.value?.toString() ?? '' })] }) }, item.key ?? '');
+        }) }));
+};
+export default TMCounterContainer;

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

@@ -0,0 +1,11 @@
+import { LayoutCustomButtonDescriptor } from '@topconsultnpm/sdk-ts';
+import { MetadataValueDescriptorEx } from '../..';
+type TMCustomButtonProps = {
+    button: LayoutCustomButtonDescriptor;
+    isModal?: boolean;
+    formData?: MetadataValueDescriptorEx[];
+    selectedItems?: Array<any>;
+    onClose?: () => void;
+};
+declare const TMCustomButton: (props: TMCustomButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TMCustomButton;

package/lib/components/base/TMCustomButton.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { useEffect, useRef, useState, useMemo } from 'react';
+import TMModal from './TMModal';
+import styled from 'styled-components';
+import { TMLayoutWaitingContainer } from '../..';
+import { processButtonAttributes, processSelectedItems } from '../../helper/dcmtsHelper';
+const IframeContainer = styled.div `
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  padding-left: 15px;
+`;
+const StyledIframe = styled.iframe `
+  border: none;
+  flex: 1;
+`;
+const TMCustomButton = (props) => {
+    const { button, isModal = true, formData, selectedItems, onClose } = props;
+    const { appName: scriptUrl, arguments: args } = button;
+    const iframeRef = useRef(null);
+    const attributes = useMemo(() => processButtonAttributes(args, formData), [args, formData]);
+    const selectedItemsProcessed = useMemo(() => processSelectedItems(selectedItems), [selectedItems]);
+    const RunOnce = button.mode === "RunOnce";
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
+    const selectedItemsCount = selectedItems?.length || 1;
+    // Stati per il wait panel
+    const [showWaitPanel, setShowWaitPanel] = useState(true);
+    const [waitPanelText, setWaitPanelText] = useState("Esecuzione azione 1/" + selectedItemsCount.toString());
+    const [waitPanelValue, setWaitPanelValue] = useState(0);
+    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(selectedItemsCount);
+    const [abortController, setAbortController] = useState(undefined);
+    const targetOrigin = useMemo(() => {
+        if (!scriptUrl)
+            return '*';
+        try {
+            const urlObj = new URL(scriptUrl);
+            return urlObj.origin;
+        }
+        catch {
+            return '*';
+        }
+    }, [scriptUrl]);
+    const handleLoad = () => setLoading(false);
+    const handleError = () => {
+        setLoading(false);
+        setError(true);
+    };
+    const executeSequentially = async (controller) => {
+        if (!selectedItemsProcessed)
+            return;
+        const processedItems = selectedItemsProcessed.length === 0 ? [...selectedItemsProcessed, attributes] : selectedItemsProcessed;
+        for (const [index, item] of processedItems.entries()) {
+            if (controller.signal.aborted)
+                break;
+            setWaitPanelText("Esecuzione azione " + (index + 1).toString() + "/" + selectedItemsCount.toString());
+            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);
+                        iframeRef.current.contentWindow.postMessage({
+                            "options": item,
+                            "session": SDK_Globals.tmSession
+                        }, targetOrigin);
+                        // Attendi prima di passare al prossimo
+                        setTimeout(() => {
+                            setWaitPanelValue(index + 1);
+                            resolve();
+                        }, 500);
+                    }
+                }, 100);
+            });
+        }
+        setShowWaitPanel(false);
+        onClose?.();
+    };
+    useEffect(() => {
+        if (loading || error)
+            return;
+        //if(error) clearTimeout(timeoutIframe);
+        console.log("TMCustomButton - useEffect - loading:", loading, " error:", error, " RunOnce:", RunOnce);
+        if (!RunOnce) {
+            // esegui per ogni item selezionato
+            const controller = new AbortController();
+            controller.signal.addEventListener('abort', () => {
+                setShowWaitPanel(false);
+                onClose?.();
+            });
+            setAbortController(controller);
+            setWaitPanelMaxValue(selectedItemsCount);
+            executeSequentially(controller);
+        }
+        else if (iframeRef.current?.contentWindow) {
+            // Modalità RunOnce: invia dati all'iframe quando è caricato
+            const mergedAttributes = { ...attributes, selectedItems: selectedItemsProcessed };
+            iframeRef.current.contentWindow.postMessage({
+                "options": mergedAttributes,
+                "session": SDK_Globals.tmSession
+            }, targetOrigin);
+            //clearTimeout(timeoutIframe);
+        }
+    }, [loading, error, RunOnce]);
+    useEffect(() => {
+        if (!isModal && RunOnce && scriptUrl) {
+            window.open(scriptUrl, '_blank');
+            onClose?.();
+        }
+    }, []);
+    const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [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: scriptUrl })] }));
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, onClose: onClose, children: iframeContent })) : !RunOnce && showWaitPanel ? (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: true, waitPanelTitle: "Operazione in corso", showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }))
+        : null;
+};
+export default TMCustomButton;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { IColumnProps, IDataGridOptions, IMasterDetailProps } from 'devextreme-react/data-grid';
+import dxDataGrid from 'devextreme/ui/data_grid';
+import { ITMCounterContainerProps } from './TMCounterContainer';
+export interface TMDataGridContextMenuItem {
+    text: string;
+    icon: string;
+    onClick?: (param?: any) => void;
+    operationType?: 'singleRow' | 'multiRow';
+    disabled?: boolean;
+    visible?: boolean;
+    id?: string;
+    items?: Array<TMDataGridContextMenuItem>;
+    beginGroup?: boolean;
+}
+export declare enum TMDataGridPageSize {
+    Small = 30,
+    Medium = 50,
+    Large = 100
+}
+export interface TMDataGridProps<T> extends IDataGridOptions {
+    /** An ID of grid */
+    id?: string;
+    /** An array of grid columns */
+    dataColumns: Array<IColumnProps>;
+    /** Specifies initially or currently focused grid row's key */
+    focusedRowKey: number | undefined;
+    /** Allows you to select rows or determine which rows are selected. Applies only if selection.deferred is false */
+    selectedRowKeys?: Array<number>;
+    /** Defines the number of rows per page in the data grid (Small = 30 rows, Medium = 50 rows, Large = 100 rows) */
+    pageSize?: TMDataGridPageSize;
+    /** Configures the search panel position in the toolbar */
+    searchPanelToolbarPosition?: 'before' | 'default';
+    /** if visible, set focus on SearchPanel */
+    searchPanelFocusStarting?: boolean;
+    /** Show the header filter */
+    showHeaderFilter?: boolean;
+    /** Show the filter panel */
+    showFilterPanel?: boolean;
+    /** Show the load panel */
+    showLoadPanel?: boolean;
+    /** Show the column chooser */
+    showColumnChooser?: boolean;
+    /** Show the search panel */
+    showSearchPanel?: boolean;
+    /** Show the group panel */
+    showGroupPanel?: boolean;
+    /** Counter configuration */
+    counterConfig?: ITMCounterContainerProps;
+    /** Master Detail */
+    masterDetail?: IMasterDetailProps;
+    /** On Has Filters Change */
+    onHasFiltersChange?: (hasFilters: boolean) => void;
+}
+declare const TMDataGrid: React.ForwardRefExoticComponent<TMDataGridProps<unknown> & React.RefAttributes<dxDataGrid<any, any>>>;
+export default TMDataGrid;

package/lib/components/base/TMDataGrid.js

@@ -0,0 +1,237 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail } 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';
+;
+export var TMDataGridPageSize;
+(function (TMDataGridPageSize) {
+    TMDataGridPageSize[TMDataGridPageSize["Small"] = 30] = "Small";
+    TMDataGridPageSize[TMDataGridPageSize["Medium"] = 50] = "Medium";
+    TMDataGridPageSize[TMDataGridPageSize["Large"] = 100] = "Large";
+})(TMDataGridPageSize || (TMDataGridPageSize = {}));
+const TMDataGrid = React.forwardRef((props, ref) => {
+    const { 
+    // main properties
+    keyExpr = 'id', dataSource, focusedRowEnabled = true, hoverStateEnabled = true, focusedRowKey, selectedRowKeys = [], 
+    // custom options
+    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusStarting = false, counterConfig = { show: false, items: new Map() }, onHasFiltersChange, 
+    // 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, columnChooser, 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, 
+    // styles
+    id, width = '100%', height = '100%', } = props;
+    const internalRef = React.useRef(null);
+    useImperativeHandle(ref, () => internalRef.current);
+    const [counterValues, setCounterValues] = useState(new Map());
+    const [totalRecordCount, setTotalRecordCount] = useState(0);
+    const [visibleItemsCount, setVisibleItemsCount] = useState(0);
+    const [hasFilters, setHasFilters] = useState(false);
+    useEffect(() => {
+        const count = getRecordCount(dataSource);
+        setTotalRecordCount(count);
+    }, [dataSource]);
+    // Creating a ref to store the timestamp of the last selection change
+    const lastSelectionChangeTime = useRef(Date.now());
+    useEffect(() => {
+        if (counterConfig.show) {
+            const defaultCounterItems = new Map([
+                [
+                    CounterItemKey.allItems,
+                    { key: CounterItemKey.allItems, show: true, caption: SDKUI_Localizator.All, value: totalRecordCount, icon: _jsx(IconAll, {}), order: -1 }
+                ],
+                [
+                    CounterItemKey.visibleItems,
+                    { key: CounterItemKey.visibleItems, show: true, caption: SDKUI_Localizator.VisibleItems, value: visibleItemsCount, icon: _jsx(IconVisible, {}), order: 0 }
+                ],
+                [
+                    CounterItemKey.selectedItems,
+                    { key: CounterItemKey.selectedItems, show: true, caption: SDKUI_Localizator.SelectedItems, value: selectedRowKeys.length, icon: _jsx(IconSelected, {}), order: 1 }
+                ]
+            ]);
+            const mergedCounterItems = new Map(defaultCounterItems);
+            counterConfig.items?.forEach((value, key) => { mergedCounterItems.set(key.toString(), value); });
+            // Convert map to array and sort by order, then caption alphabetically
+            const sortedCounterItems = new Map([...mergedCounterItems.entries()]
+                .sort((a, b) => {
+                const aValue = a[1]; // Extract value
+                const bValue = b[1];
+                if ((aValue.order ?? 0) === (bValue.order ?? 0)) {
+                    return (aValue.caption ?? '').localeCompare(bValue.caption ?? '');
+                }
+                return (aValue.order ?? 0) - (bValue.order ?? 0);
+            }));
+            setCounterValues(sortedCounterItems);
+        }
+    }, [counterConfig, visibleItemsCount, selectedRowKeys]);
+    // Handle selection changes and invoke callback if provided
+    const onSelectionChangedCallback = useCallback((e) => {
+        lastSelectionChangeTime.current = Date.now(); // Store current time of selection change
+        if (onSelectionChanged)
+            onSelectionChanged(e);
+    }, [onSelectionChanged]);
+    // Handle row double-click event
+    const onRowDblClickCallback = useCallback((e) => {
+        if (selection.mode === 'multiple' && selection.showCheckBoxesMode !== 'onClick' && Date.now() - lastSelectionChangeTime.current < 300) {
+            // Skip the double-click if selection has changed recently
+            return;
+        }
+        if (onRowDblClick)
+            onRowDblClick(e);
+    }, [onRowDblClick]);
+    // Update context menu items based on operation type (single row or multi row)
+    const updateContextMenuItems = useCallback((items, rowID) => {
+        return items.map(item => {
+            // Determine if item is explicitly disabled; default to `false` if not provided
+            let disabled = item.disabled ?? false;
+            // Variable to determine if the item should be disabled based on row selection
+            let disabledCalculation = false;
+            // Get the active row ID, prioritizing `focusedRowKey` if `focusedRowEnabled` is true
+            const id = focusedRowEnabled ? focusedRowKey : rowID;
+            // Disable items based on their operation type and selection state
+            if (item.operationType === 'singleRow') {
+                // A single-row operation requires exactly one row to be selected
+                disabledCalculation = selectedRowKeys.length > 1 || id === undefined;
+            }
+            if (item.operationType === 'multiRow') {
+                // A multi-row operation requires at least one selected row
+                disabledCalculation = selectedRowKeys.length === 0 && id === undefined;
+            }
+            return {
+                ...item,
+                disabled: disabled || disabledCalculation, // An item is disabled if it's explicitly set to `true` or if the calculation above determines so
+                // Define the behavior when the menu item is clicked
+                onClick: () => {
+                    // If there is no click handler defined, exit early
+                    if (!item.onClick)
+                        return;
+                    if (item.operationType === 'singleRow' && id !== undefined) {
+                        // For single-row operations, call onItemClick with the row ID
+                        item.onClick(id);
+                    }
+                    else if (item.operationType === 'multiRow' && id !== undefined) {
+                        // For multi-row operations, determine the appropriate argument
+                        if (selectedRowKeys.length > 0) {
+                            // If multiple rows are selected, pass all selected row IDs
+                            item.onClick(selectedRowKeys);
+                        }
+                        else if (id !== undefined) {
+                            // If no rows are selected but `id` exists, pass it as an array
+                            item.onClick([id]);
+                        }
+                    }
+                    else {
+                        // For general operations without a specific row selection
+                        item.onClick();
+                    }
+                },
+                // Recursively update nested menu items, if present
+                items: item.items ? updateContextMenuItems(item.items, id) : undefined,
+            };
+        });
+    }, [focusedRowEnabled, focusedRowKey, selectedRowKeys]);
+    // Handle context menu preparation
+    const onContextMenuPreparingCallback = useCallback((e) => {
+        if (e === undefined)
+            return;
+        if (onContextMenuPreparing)
+            onContextMenuPreparing(e);
+        if (e.target === 'content') {
+            e.items = e.items || [];
+            if (e.items.length > 0) {
+                const rowId = e.row?.key;
+                const updatedContextMenuItems = updateContextMenuItems(e.items, rowId);
+                e.items = [...updatedContextMenuItems];
+            }
+        }
+    }, [updateContextMenuItems, onContextMenuPreparing]);
+    // Handle toolbar preparation, especially for the search panel
+    const onToolbarPreparingCallback = useCallback((e) => {
+        if (e === undefined || e.toolbarOptions === undefined || e.toolbarOptions.items === undefined)
+            return;
+        if (showSearchPanel && searchPanelToolbarPosition === 'before') {
+            e.toolbarOptions.items.forEach((item) => {
+                if (item.name === "searchPanel") {
+                    item.location = "before";
+                }
+            });
+        }
+    }, [showSearchPanel, searchPanelToolbarPosition]);
+    // Memoized callback that runs when the DataGrid content is ready
+    const onContentReadyCallback = useCallback((e) => {
+        // If event is undefined, exit early (safety check)
+        if (e === undefined)
+            return;
+        // Call the external onContentReady callback if it was provided
+        onContentReady?.(e);
+        // If ref to the DataGrid is not set yet, exit early
+        if (!internalRef.current)
+            return;
+        // Update state with the current number of visible rows in the DataGrid
+        setVisibleItemsCount(internalRef.current.instance()?.getVisibleRows()?.length ?? 0);
+        // Focusing SearchPanel
+        if (showSearchPanel && searchPanelFocusStarting) {
+            // Use a small delay to ensure the DOM is fully rendered before trying to focus
+            // This can prevent issues with the focus not being set correctly
+            setTimeout(() => {
+                const searchInput = internalRef.current?.instance().element().querySelector('.dx-datagrid-search-panel input');
+                if (searchInput) {
+                    searchInput.focus();
+                }
+            }, 100);
+        }
+    }, [onContentReady]);
+    const onOptionChangedCallback = useCallback((e) => {
+        // Assicurati che component esista
+        const grid = e.component;
+        if (!grid)
+            return;
+        // Controlla se il cambiamento riguarda i filtri
+        const isFilterChange = e.fullName === 'filterValue' || (e.fullName?.startsWith('columns') && e.fullName.endsWith('filterValues'));
+        if (isFilterChange) {
+            let newHasFilters = false;
+            // Filtro globale
+            const filterValue = grid.option('filterValue');
+            if (Array.isArray(filterValue)) {
+                newHasFilters = filterValue.length > 0;
+            }
+            else if (filterValue) {
+                newHasFilters = true;
+            }
+            // Filtro per colonne
+            const columns = grid.option('columns') || [];
+            const columnFilters = columns.some((col) => {
+                if (Array.isArray(col.filterValues))
+                    return col.filterValues.length > 0;
+                return !!col.filterValue;
+            });
+            if (columnFilters)
+                newHasFilters = true;
+            setHasFilters(newHasFilters);
+            onHasFiltersChange?.(newHasFilters);
+        }
+        // Propaga l'evento originale
+        onOptionChanged?.(e);
+    }, [onOptionChanged, onHasFiltersChange]);
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
+                    // main properties
+                    keyExpr: keyExpr, dataSource: dataSource, selectedRowKeys: selectedRowKeys, focusedRowEnabled: focusedRowEnabled, hoverStateEnabled: hoverStateEnabled, 
+                    // 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, noDataText: noDataText, 
+                    // styles
+                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, 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 }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), columnChooser && _jsx(ColumnChooser, { ...columnChooser }), 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 }), pager && _jsx(Pager, { ...pager, 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 }) })] });
+});
+export default TMDataGrid;
+const getRecordCount = (dataSource) => {
+    if (Array.isArray(dataSource)) {
+        return dataSource.length; // For array
+    }
+    if (dataSource instanceof DataSource) {
+        return dataSource.totalCount(); // For DataSource instance
+    }
+    return 0; // Default case when neither condition is met
+};

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

@@ -0,0 +1,15 @@
+import { IColumnProps } from 'devextreme-react/data-grid';
+import { SearchResultDescriptor } from '@topconsultnpm/sdk-ts';
+export type FormatOption = {
+    value: 'csv' | 'xlsx' | 'xls' | 'txt';
+    display: string;
+};
+interface TMDataGridExportFormProps {
+    searchResult: SearchResultDescriptor;
+    dataSource: Array<any> | undefined;
+    dataColumns: Array<IColumnProps>;
+    selectedRowKeys: Array<number>;
+    onCloseExportForm: () => void;
+}
+declare const TMDataGridExportForm: (props: TMDataGridExportFormProps) => import("react/jsx-runtime").JSX.Element;
+export default TMDataGridExportForm;