@topconsultnpm/sdkui-react 6.22.0-dev2.4 → 6.22.0-dev2.40

package/lib/components/NewComponents/ContextMenu/TMContextMenu.js

@@ -500,6 +500,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                     // display: 'inline-block',
                     WebkitTouchCallout: isIOS ? 'none' : undefined,
                     WebkitUserSelect: isIOS ? 'none' : undefined,
-                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", "data-open-up": submenu.openUp ? 'true' : 'false', onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
+                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, className: "notranslate", translate: "no", "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { className: "notranslate", translate: "no", "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", "data-open-up": submenu.openUp ? 'true' : 'false', onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
 };
 export default TMContextMenu;

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -837,7 +837,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         setState(s => ({ ...s, draggedItemIndex: null }));
         setDragOverIndex(null);
     };
-    return (_jsxs(S.FloatingContainer, { ref: floatingRef, "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$verticalDirection": state.verticalDirection, "$isDragging": state.isDragging, "$isConfigMode": false, "$isConstrained": isConstrained, "$isHidden": isOrientationChanging, "$bgColor": bgColor, onContextMenu: undefined, children: [_jsx(ContextMenu, { items: [
+    return (_jsxs(S.FloatingContainer, { ref: floatingRef, className: "notranslate", translate: "no", "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$verticalDirection": state.verticalDirection, "$isDragging": state.isDragging, "$isConfigMode": false, "$isConstrained": isConstrained, "$isHidden": isOrientationChanging, "$bgColor": bgColor, onContextMenu: undefined, children: [_jsx(ContextMenu, { items: [
                     {
                         name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
                         icon: _jsx(IconRotate, { fontSize: 16, style: { transform: state.orientation === 'horizontal' ? 'rotate(90deg)' : 'rotate(0deg)' } }),

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

@@ -3,6 +3,17 @@ import { ITMEditorBase } from './TMEditorBase';
 export type ButtonColors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'standard' | 'primaryOutline' | 'secondaryOutline' | 'tertiaryOutline' | 'errorOutline' | 'warningOutline' | 'successOutline' | 'infoOutline';
 export type ButtonStyle = 'normal' | 'toolbar' | 'icon' | 'text' | 'advanced';
 export type AdvancedButtonType = 'success' | 'error' | 'tertiary' | 'primary';
+/** Azione secondaria mostrata nel dropdown "split button" (freccia a destra) */
+export interface ITMButtonSecondaryAction {
+    /** Etichetta mostrata nella voce di menu */
+    name: string;
+    /** Icona opzionale a sinistra della voce */
+    icon?: React.ReactNode;
+    /** Callback al click della voce */
+    onClick?: () => void;
+    /** Disabilita la singola voce */
+    disabled?: boolean;
+}
 export interface ITMButton extends ITMEditorBase {
     color?: ButtonColors;
     btnStyle?: ButtonStyle;
@@ -17,6 +28,8 @@ export interface ITMButton extends ITMEditorBase {
     showTooltip?: boolean;
     onClick?: VoidFunction;
     onMouseDown?: (e: any) => any;
+    /** Azioni secondarie: se valorizzate, il bottone mostra una freccia a destra che apre un dropdown con queste azioni */
+    secondaryActions?: ITMButtonSecondaryAction[];
 }
 declare const TMButton: React.ForwardRefExoticComponent<ITMButton & React.RefAttributes<HTMLButtonElement>>;
 export default TMButton;

package/lib/components/base/TMButton.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, forwardRef } from 'react';
+import { useState, forwardRef, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
-import { getColor } from '../../helper';
+import { getColor, IconChevronDown } from '../../helper';
 import { FontSize, TMColors } from '../../utils/theme';
 import TMTooltip from './TMTooltip';
 const StyledNormalButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
@@ -149,10 +150,132 @@ const StyledAdvancedButtonText = styled.div `
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
     padding: 5px;
+    padding-right: ${props => props.$reserveArrow ? '26px' : '5px'};
+`;
+const StyledSplitContainer = styled.div `
+  display: inline-flex;
+  align-items: stretch;
+  position: relative;
+`;
+const StyledSplitArrow = styled.button `
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  cursor: ${props => props.$isDisabled ? 'default' : 'pointer'};
+  color: white;
+  background-color: rgba(255, 255, 255, 0.22);
+  transition: background-color ease 150ms;
+  &:hover { background-color: ${props => props.$isDisabled ? 'rgba(255, 255, 255, 0.22)' : 'rgba(255, 255, 255, 0.38)'}; }
+  & svg {
+    transition: transform ease 150ms;
+    transform: rotate(${props => props.$isOpen ? '180deg' : '0deg'});
+  }
+`;
+const StyledDropdown = styled.div `
+  position: fixed;
+  left: ${props => props.$left}px;
+  top: ${props => props.$top}px;
+  transform: translateY(-100%);
+  transform-origin: bottom left;
+  min-width: ${props => props.$minWidth}px;
+  background: #ffffff;
+  border-radius: 14px;
+  box-shadow: 0 10px 30px rgba(20, 40, 80, 0.20);
+  border: 1px solid rgba(74, 150, 210, 0.18);
+  padding: 5px;
+  z-index: 100000;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  animation: tmSplitDropdownIn cubic-bezier(0.2, 0.8, 0.2, 1) 150ms;
+  @keyframes tmSplitDropdownIn {
+    from { opacity: 0; transform: translateY(calc(-100% + 8px)); }
+    to   { opacity: 1; transform: translateY(-100%); }
+  }
+`;
+const StyledDropdownItem = styled.button `
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 5px 9px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  text-align: left;
+  font-size: ${FontSize.defaultFontSize};
+  font-weight: 500;
+  color: ${props => props.$disabled ? '#b4b4b4' : '#2c3e50'};
+  cursor: ${props => props.$disabled ? 'default' : 'pointer'};
+  transition: background ease 150ms, color ease 150ms;
+  &:hover {
+    background: ${props => props.$disabled ? 'transparent' : 'linear-gradient(135deg, rgba(74, 150, 210, 0.16) 0%, rgba(37, 89, 165, 0.16) 100%)'};
+    color: ${props => props.$disabled ? '#b4b4b4' : '#2559A5'};
+  }
+  & > .tm-split-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+    border-radius: 6px;
+    background: rgba(74, 150, 210, 0.14);
+    color: #4A96D2;
+    transition: background ease 150ms, color ease 150ms;
+  }
+  &:hover > .tm-split-item-icon {
+    background: ${props => props.$disabled ? 'rgba(74, 150, 210, 0.14)' : '#4A96D2'};
+    color: ${props => props.$disabled ? '#4A96D2' : '#ffffff'};
+  }
 `;
 const TMButton = forwardRef((props, ref) => {
-    const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { }, onMouseDown = () => { } } = props;
+    const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { }, onMouseDown = () => { }, secondaryActions } = props;
     const [isHovered, setIsHovered] = useState(false);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [dropdownPos, setDropdownPos] = useState({ left: 0, top: 0, minWidth: 200 });
+    const splitContainerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const hasSecondaryActions = !!secondaryActions && secondaryActions.length > 0;
+    useEffect(() => {
+        if (!isDropdownOpen)
+            return;
+        const handlePointerDown = (e) => {
+            const target = e.target;
+            if (splitContainerRef.current?.contains(target) || dropdownRef.current?.contains(target))
+                return;
+            setIsDropdownOpen(false);
+        };
+        const handleKeyDown = (e) => { if (e.key === 'Escape')
+            setIsDropdownOpen(false); };
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('touchstart', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('touchstart', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isDropdownOpen]);
+    const toggleDropdown = () => {
+        if (disabled)
+            return;
+        if (!isDropdownOpen && splitContainerRef.current) {
+            const rect = splitContainerRef.current.getBoundingClientRect();
+            setDropdownPos({ left: rect.left, top: rect.top - 6, minWidth: Math.max(rect.width, 200) });
+        }
+        setIsDropdownOpen(prev => !prev);
+    };
     const renderedButton = () => {
         if (btnStyle === 'normal') {
             return (_jsx(StyledNormalButton, { ref: ref, width: width, height: height, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
@@ -164,7 +287,7 @@ const TMButton = forwardRef((props, ref) => {
             return (_jsx(StyledIconButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: icon }));
         }
         else if (btnStyle === 'advanced') {
-            return (_jsxs(StyledAdvancedButton, { ref: ref, "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), onMouseDown: (e) => !disabled && onMouseDown?.(e), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: caption })] }));
+            return (_jsxs(StyledAdvancedButton, { ref: ref, "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), onMouseDown: (e) => !disabled && onMouseDown?.(e), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, "$reserveArrow": hasSecondaryActions, children: caption })] }));
         }
         else {
             return (_jsx(StyledTextButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
@@ -175,6 +298,15 @@ const TMButton = forwardRef((props, ref) => {
             _jsxs(_Fragment, { children: [caption &&
                         _jsx(StyledButtonTooltipHeader, { "$description": description, children: _jsx(StyledButtonTooltipItem, { "$color": color, children: caption }) }), description && _jsx(StyledButtonTooltipItem, { children: description })] }));
     };
-    return (_jsx("div", { style: elementStyle, children: showTooltip ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() }) : renderedButton() }));
+    const buttonWithTooltip = showTooltip
+        ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() })
+        : renderedButton();
+    const renderSplitButton = () => (_jsxs(StyledSplitContainer, { ref: splitContainerRef, children: [buttonWithTooltip, _jsx(StyledSplitArrow, { type: 'button', "$isDisabled": disabled, "$isOpen": isDropdownOpen, "aria-haspopup": 'menu', "aria-expanded": isDropdownOpen, onClick: (e) => { e.stopPropagation(); toggleDropdown(); }, onMouseDown: (e) => e.stopPropagation(), children: _jsx(IconChevronDown, { fontSize: 14 }) }), isDropdownOpen && createPortal(_jsx(StyledDropdown, { ref: dropdownRef, role: 'menu', "$left": dropdownPos.left, "$top": dropdownPos.top, "$minWidth": dropdownPos.minWidth, children: secondaryActions.map((action, idx) => (_jsxs(StyledDropdownItem, { type: 'button', role: 'menuitem', "$disabled": action.disabled, disabled: action.disabled, onClick: () => {
+                        if (action.disabled)
+                            return;
+                        setIsDropdownOpen(false);
+                        action.onClick?.();
+                    }, children: [action.icon && _jsx("span", { className: 'tm-split-item-icon', children: action.icon }), _jsx("span", { children: action.name })] }, `${action.name}-${idx}`))) }), document.body)] }));
+    return (_jsx("div", { style: elementStyle, children: hasSecondaryActions ? renderSplitButton() : buttonWithTooltip }));
 });
 export default TMButton;

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

@@ -46,6 +46,8 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     showSearchPanel?: boolean;
     /** Show the group panel */
     showGroupPanel?: boolean;
+    /** Rende il paginatore compatto (meno alto, font e pulsanti ridotti, page numbers sostituiti da "pagina / totale"): utile quando la griglia è dentro pannelli bassi */
+    compactPager?: boolean;
     /** Counter configuration */
     counterConfig?: ITMCounterContainerProps;
     /** Master Detail */

package/lib/components/base/TMDataGrid.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import styled, { 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';
@@ -18,7 +19,7 @@ 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() }, onHasFiltersChange, customContextMenuItems, 
+    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, 
     // 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
@@ -35,6 +36,9 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     const [customContextMenuVisible, setCustomContextMenuVisible] = useState(false);
     const [customContextMenuPosition, setCustomContextMenuPosition] = useState({ x: 0, y: 0 });
     const [customContextMenuRowKey, setCustomContextMenuRowKey] = useState(undefined);
+    // true quando il menu contestuale viene aperto su spazio vuoto senza alcuna riga di riferimento:
+    // in tal caso i comandi legati alla riga (singleRow/multiRow) devono risultare disabilitati
+    const [customContextMenuOnEmptyArea, setCustomContextMenuOnEmptyArea] = useState(false);
     const gridContainerRef = useRef(null);
     // Ref per evitare focus ripetuti sulla search panel
     const searchPanelFocusedRef = useRef(false);
@@ -75,9 +79,17 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 const rowKey = internalRef.current.instance().getKeyByRowIndex(rowIndex);
                 internalRef.current.instance().option('focusedRowKey', rowKey);
                 setCustomContextMenuRowKey(rowKey);
+                setCustomContextMenuOnEmptyArea(false);
             }
             else {
-                setCustomContextMenuRowKey(focusedRowKey);
+                // Right-click su spazio vuoto: ricade sulla riga focalizzata solo se esiste ancora.
+                // Se non c'è una riga focalizzata (es. primo click dopo l'apertura) o se focusedRowKey punta a
+                // una riga non più presente (dopo un'eliminazione), il menu viene comunque mostrato ma senza
+                // riga di riferimento: i comandi di riga restano disabilitati, quelli generali utilizzabili
+                const grid = internalRef.current?.instance();
+                const focusedRowExists = focusedRowKey !== undefined && !!grid && grid.getRowIndexByKey(focusedRowKey) >= 0;
+                setCustomContextMenuRowKey(focusedRowExists ? focusedRowKey : undefined);
+                setCustomContextMenuOnEmptyArea(!focusedRowExists);
             }
             setCustomContextMenuVisible(true);
             setCustomContextMenuPosition({ x: e.clientX, y: e.clientY });
@@ -114,6 +126,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             setCustomContextMenuVisible(true);
             setCustomContextMenuPosition({ x: clientX, y: clientY });
             setCustomContextMenuRowKey(rowKey);
+            setCustomContextMenuOnEmptyArea(false);
         },
     });
     // Creating a ref to store the timestamp of the last selection change
@@ -222,7 +235,8 @@ const TMDataGrid = React.forwardRef((props, ref) => {
         return items.map(item => {
             let disabled = item.disabled ?? false;
             let disabledCalculation = false;
-            const id = focusedRowEnabled ? focusedRowKey : rowID;
+            // Menu aperto su spazio vuoto senza riga di riferimento: nessun id, i comandi di riga sono disabilitati
+            const id = customContextMenuOnEmptyArea ? undefined : (focusedRowEnabled ? focusedRowKey : rowID);
             if (item.operationType === 'singleRow') {
                 disabledCalculation = selectedRowKeys.length > 1 || id === undefined;
             }
@@ -237,7 +251,10 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                     if (item.operationType === 'singleRow' && id !== undefined) {
                         originalOnClick(id);
                     }
-                    else if (item.operationType === 'multiRow' && id !== undefined) {
+                    else if (item.operationType === 'multiRow' && (selectedRowKeys.length > 0 || id !== undefined)) {
+                        // Condizione allineata a quella di disabilitazione: con righe selezionate il comando è
+                        // attivo anche senza riga di riferimento (es. menu aperto su spazio vuoto), quindi qui
+                        // devono comunque essere passate le chiavi selezionate e non un onClick senza argomenti
                         if (selectedRowKeys.length > 0) {
                             originalOnClick(selectedRowKeys);
                         }
@@ -252,7 +269,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 submenu: item.submenu ? processCustomContextMenuItems(item.submenu, id) : undefined,
             };
         });
-    }, [focusedRowEnabled, focusedRowKey, selectedRowKeys]);
+    }, [focusedRowEnabled, focusedRowKey, selectedRowKeys, customContextMenuOnEmptyArea]);
     // Gestisce la preparazione del menu contestuale della griglia (header e righe)
     const onContextMenuPreparingCallback = useCallback((e) => {
         if (e === undefined)
@@ -358,7 +375,14 @@ const TMDataGrid = React.forwardRef((props, ref) => {
         // Propaga l'evento originale
         onOptionChanged?.(e);
     }, [onOptionChanged, onHasFiltersChange]);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { ref: gridContainerRef, style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
+    // 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(() => {
+        if (!pager || !compactPager)
+            return pager;
+        return { ...pager, displayMode: pager.displayMode ?? 'compact' };
+    }, [pager, compactPager]);
+    return _jsxs(StyledDataGridContainer, { "$compactPager": compactPager, style: { width: "100%", height: "100%" }, children: [_jsx("div", { ref: gridContainerRef, 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
@@ -371,13 +395,62 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                         // 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 }, 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 }), 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 }), 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 }) }), 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: { 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: {
                     visible: customContextMenuVisible,
                     position: customContextMenuPosition,
                     onClose: () => setCustomContextMenuVisible(false)
                 } }))] });
 });
 export default TMDataGrid;
+// Contenitore della griglia: in modalità compatta riduce l'ingombro verticale del pager DevExtreme
+// (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 getRecordCount = (dataSource) => {
     if (Array.isArray(dataSource)) {
         return dataSource.length; // For array

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { ValidationItem } from "@topconsultnpm/sdk-ts";
 export type Colors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'standard';
 type IconModes = 'outside' | 'inside' | 'none';
@@ -6,6 +7,7 @@ export type Sizes = 'small' | 'medium' | 'large';
 export type TMEditorButtonData = {
     icon: any;
     text?: string;
+    tooltipContent?: React.ReactNode;
     onClick?: () => void;
 };
 export interface ITMEditorBase {

package/lib/components/base/TMFileManager.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { extractTextsFromDirectory, findFileItems, setFolderTreeViewItems } from "./TMFileManagerUtils";
+import { extractTextsFromDirectory, findFileItems, resolveFileItemUserNames, setFolderTreeViewItems } from "./TMFileManagerUtils";
 import { DeviceType, useDeviceType } from "./TMDeviceProvider";
 import { formatBytes, Globalization, IconDashboard, IconFolder, IconHide, IconList, IconMenuVertical, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator, TMCommandsContextMenu, TMConditionalWrapper } from "../../helper";
 import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
@@ -91,10 +91,12 @@ const TMFileManager = (props) => {
                     (Globalization.getDateTimeDisplayValue(item.lastUpdateTime)?.toLowerCase().toString().includes(searchText.toLowerCase().trim())) ||
                     (Globalization.getDateTimeDisplayValue(item.creationTime)?.toLowerCase().toString().includes(searchText.toLowerCase().trim())) ||
                     (item.version?.toString().includes(searchText.toLowerCase().trim()))));
-            setFilteredFileItems(filtered);
+            // I nomi utente possono mancare quando la lista viene ricostruita senza i partecipanti
+            // (es. refresh dopo la condivisione di un file): vengono risolti qui dagli ID
+            setFilteredFileItems(filtered.map(item => resolveFileItemUserNames(item, allUsers)));
         };
         filterItems();
-    }, [searchText, selectedFolder]);
+    }, [searchText, selectedFolder, allUsers]);
     // Callback to handle the "back" action (closing the draft list view)
     const onBackCallback = useCallback(() => {
         setOpenDraftList(false);

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

@@ -26,6 +26,7 @@ export interface FileItem {
     version?: number;
     isSigned?: number;
 }
+export declare const resolveFileItemUserNames: (item: FileItem, users: Array<UserDescriptor>) => FileItem;
 export interface TMFileManagerTreeViewDirectory {
     id: number;
     text: string;

package/lib/components/base/TMFileManagerUtils.js

@@ -12,6 +12,22 @@ export const isSigned = (ext) => {
     const parts = normalized.split('.');
     return parts.some(part => SIGNATURE_EXTENSIONS.has(part));
 };
+// Completa i nomi utente (autore e utente di check-out) di un FileItem quando mancano, risolvendoli dagli ID.
+export const resolveFileItemUserNames = (item, users) => {
+    if (!users || users.length === 0)
+        return item;
+    const isValidUserID = (id) => id !== undefined && Number.isFinite(id) && id > 0;
+    const needsUpdaterName = !item.updaterName && isValidUserID(item.updaterID);
+    const needsCheckOutUserName = !item.checkOutUserName && isValidUserID(item.checkOutUserID);
+    if (!needsUpdaterName && !needsCheckOutUserName)
+        return item;
+    const resolved = { ...item };
+    if (needsUpdaterName)
+        resolved.updaterName = users.find(user => user.id === item.updaterID)?.name ?? item.updaterName;
+    if (needsCheckOutUserName)
+        resolved.checkOutUserName = users.find(user => user.id === item.checkOutUserID)?.name ?? item.checkOutUserName;
+    return resolved;
+};
 export var TMFileManagerPageSize;
 (function (TMFileManagerPageSize) {
     TMFileManagerPageSize[TMFileManagerPageSize["Small"] = 30] = "Small";

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

@@ -14,6 +14,17 @@ interface ITMModal {
     askClosingConfirm?: boolean;
     showCloseButton?: boolean;
     showHeader?: boolean;
+    /** Se true, ricentra il popup ogni volta che cambiano width/height, annullando lo spostamento manuale */
+    recenterOnResize?: boolean;
+    /** Contenuto aggiuntivo nella barra del titolo, prima del pulsante di chiusura (es. un menu di opzioni) */
+    titleActions?: React.ReactNode;
+    /** Dimensioni in px al termine di un ridimensionamento manuale */
+    onResized?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    /** A ogni cambio di valore le dimensioni tornano a `width`/`height`, anche se invariate */
+    sizeResetToken?: number | string;
 }
 declare const TMModal: React.FC<ITMModal>;
 export default TMModal;

package/lib/components/base/TMModal.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import { Popup } from 'devextreme-react';
+import { ToolbarItem } from 'devextreme-react/popup';
 import styled from 'styled-components';
 import { TMCard } from './TMLayout';
 import { FontSize, TMColors } from '../../utils/theme';
 import { IconWindowMaximize, IconWindowMinimize, svgToString } from '../../helper';
+/** Valori di `height` con cui il popup si dimensiona sul contenuto (vedi applyContentFillLayout) */
+const CONTENT_DRIVEN_HEIGHTS = ['auto', 'max-content', 'min-content', 'fit-content'];
 const StyledModal = styled.div `
     width: ${props => props.$width};
     height: ${props => props.$height};
@@ -39,10 +42,13 @@ const StyledModalContext = styled.div `
     overflow: auto;
     height: 100%;
 `;
-const TMModal = ({ resizable = true, expandable = false, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true, showHeader = true }) => {
+const TMModal = ({ resizable = true, expandable = false, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true, showHeader = true, recenterOnResize = false, titleActions, onResized, sizeResetToken }) => {
     const popupRef = useRef(null);
     const [initialWidth, setInitialWidth] = useState(width);
     const [initialHeight, setInitialHeight] = useState(height);
+    // Posizione controllata: un nuovo riferimento oggetto forza DevExtreme a riposizionare (ricentrare).
+    // Lasciata invariata durante il drag, così lo spostamento manuale viene preservato
+    const [position, setPosition] = useState(undefined);
     const [showPopup, setShowPopup] = useState(false);
     const [isResizing, setIsResizing] = useState(false);
     const [isFullScreen, setIsFullScreen] = useState(false);
@@ -51,6 +57,26 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
     const DEFAULT_MIN_HEIGHT = 400;
     const [minWidth, setMinWidth] = useState(0);
     const [minHeight, setMinHeight] = useState(0);
+    /**
+     * DevExtreme fissa in px l'altezza del contenuto del popup: se le dimensioni cambiano a popup
+     * già aperto (es. cambio step) resta quella del passo precedente e sotto rimane spazio vuoto.
+     * Come figlio flex il contenuto riempie il popup senza dipendere da quel calcolo.
+     * Non si applica alle altezze dimensionate sul contenuto (`auto`, `max-content`, ...):
+     * lì è il contenuto a dare l'altezza al popup e non c'è spazio da riempire.
+     */
+    const applyContentFillLayout = () => {
+        const content = popupRef.current?.instance()?.content();
+        const overlayContent = content?.parentElement;
+        if (!content || !overlayContent)
+            return;
+        const fill = !CONTENT_DRIVEN_HEIGHTS.some(value => initialHeight.trim().startsWith(value));
+        overlayContent.style.display = fill ? 'flex' : '';
+        overlayContent.style.flexDirection = fill ? 'column' : '';
+        content.style.flex = fill ? '1 1 auto' : '';
+        // Testata e toolbar inferiore restano alla loro altezza naturale
+        overlayContent.querySelectorAll(':scope > .dx-popup-title, :scope > .dx-popup-bottom')
+            .forEach(el => { el.style.flexShrink = fill ? '0' : ''; });
+    };
     /**
      * Gestore chiamato quando il popup viene mostrato.
      * Calcola e imposta le dimensioni minime del popup in base allo spazio disponibile.
@@ -59,6 +85,7 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
     const handleShown = () => {
         // Usa requestAnimationFrame per attendere il completamento del rendering
         requestAnimationFrame(() => {
+            applyContentFillLayout();
             if (popupRef.current && popupRef.current.instance) {
                 const instance = popupRef.current.instance();
                 if (instance) {
@@ -85,14 +112,27 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
     useEffect(() => {
         setInitialWidth(width);
         setInitialHeight(height);
-    }, [width, height]);
+        // Al cambio di dimensioni (es. cambio step) ricentra il popup con un nuovo riferimento oggetto,
+        // annullando l'eventuale spostamento manuale precedente
+        if (recenterOnResize)
+            setPosition({ my: 'center', at: 'center', of: window });
+        // Il token annulla un ridimensionamento manuale, che non cambia width/height
+    }, [width, height, recenterOnResize, sizeResetToken]);
+    // Dimensioni, testata e schermo pieno fanno rigenerare geometria ed elementi del popup:
+    // il layout flex del contenuto va riapplicato dopo il ridisegno (vedi applyContentFillLayout)
+    useEffect(() => {
+        const rafId = requestAnimationFrame(() => applyContentFillLayout());
+        return () => cancelAnimationFrame(rafId);
+    }, [initialWidth, initialHeight, title, isFullScreen, showPopup]);
     const handleResizeStart = () => {
         setIsResizing(true);
     };
     const handleResizeEnd = (e) => {
         setIsResizing(false);
-        setInitialWidth(e.width.toString());
-        setInitialHeight(e.height.toString());
+        // Le dimensioni arrivano in px: senza unità non sarebbero un valore CSS valido
+        setInitialWidth(`${e.width}px`);
+        setInitialHeight(`${e.height}px`);
+        onResized?.({ width: e.width, height: e.height });
     };
     const onHiding = (e) => {
         if (askClosingConfirm)
@@ -101,15 +141,9 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
             setShowPopup(false);
         onClose && onClose();
     };
-    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { ref: popupRef, showCloseButton: showHeader ? showCloseButton : false, showTitle: showHeader, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing && !isFullScreen, resizeEnabled: resizable && !isFullScreen, position: expandable && isFullScreen ? { my: 'center', at: 'center', of: window } : undefined, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, toolbarItems: showHeader && expandable ? [
-                {
-                    widget: 'dxButton',
-                    location: 'after',
-                    options: {
+    return (_jsx(_Fragment, { children: isModal ? (_jsxs(Popup, { ref: popupRef, showCloseButton: showHeader ? showCloseButton : false, showTitle: showHeader, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing && !isFullScreen, resizeEnabled: resizable && !isFullScreen, position: expandable && isFullScreen ? { my: 'center', at: 'center', of: window } : position, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, children: [showHeader && titleActions && (_jsx(ToolbarItem, { toolbar: 'top', location: 'after', render: () => _jsx(_Fragment, { children: titleActions }) })), showHeader && expandable && (_jsx(ToolbarItem, { toolbar: 'top', location: 'after', widget: 'dxButton', options: {
                         icon: isFullScreen ? svgToString(_jsx(IconWindowMinimize, {})) : svgToString(_jsx(IconWindowMaximize, {})),
                         onClick: () => setIsFullScreen(!isFullScreen)
-                    }
-                }
-            ] : undefined, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }, children: [toolbar && (_jsx(StyledModalToolbar, { children: toolbar })), _jsx("div", { style: { flex: 1, overflow: 'hidden', minHeight: 0 }, children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
+                    } })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }, children: [toolbar && (_jsx(StyledModalToolbar, { children: toolbar })), _jsx("div", { style: { flex: 1, overflow: 'hidden', minHeight: 0 }, children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] })] })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
 };
 export default TMModal;

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

@@ -10,6 +10,7 @@ export interface ITMPanelProps {
     children?: React.ReactNode;
     showHeader?: boolean;
     title?: React.ReactNode;
+    enableTitleMarquee?: boolean;
     displayedItemsCount?: number;
     totalItems?: number;
     toolbar?: any;