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

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

@@ -29,11 +29,19 @@ interface ITMTreeViewProps {
     showLoadMoreButton?: boolean;
     enableVirtualization?: boolean;
 }
-declare const TMTreeView: ({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren, itemsPerPage, showLoadMoreButton, enableVirtualization }: ITMTreeViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMTreeView: ({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren, itemsPerPage, showLoadMoreButton, enableVirtualization }: ITMTreeViewProps) => React.JSX.Element;
 export default TMTreeView;
-export declare const StyledTreeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledTreeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $isSelected?: boolean;
 }>> & string;
-export declare const StyledStickyPaginator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledStickyPaginator: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/lib/components/base/TMTreeView.js

@@ -147,15 +147,26 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             return [];
         return flattenTreeWithDepth(dataSource);
     }, [enableVirtualization, dataSource, flattenTreeWithDepth]);
+    // Chiave dell'ultimo elemento verso cui si è effettivamente scrollato.
+    // Evita di ripetere lo scroll quando cambia solo la struttura dell'albero
+    // (es. espansione di un nodo) a parità di elemento focalizzato.
+    const lastScrolledKeyRef = useRef(undefined);
     // Scroll verso l'elemento focalizzato quando cambia (navigazione con frecce)
     useEffect(() => {
-        if (!focusedItem?.key)
+        if (!focusedItem?.key) {
+            lastScrolledKeyRef.current = undefined;
+            return;
+        }
+        // Focus invariato: l'effect è stato rieseguito solo perché l'albero è cambiato
+        // (espansione/collasso di un nodo). La posizione di scroll non va toccata.
+        if (lastScrolledKeyRef.current === focusedItem.key)
             return;
         if (enableVirtualization) {
             // Lista virtualizzata: usa scrollToRow per garantire che l'elemento sia visibile
             const index = flattenedItems.findIndex(item => item.node.key === focusedItem.key);
             if (index >= 0 && listRef.current) {
                 listRef.current.scrollToRow({ index, align: 'smart' });
+                lastScrolledKeyRef.current = focusedItem.key;
             }
         }
         else {
@@ -164,6 +175,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 const element = containerRef.current.querySelector(`[data-node-key="${focusedItem.key}"]`);
                 if (element) {
                     element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                    lastScrolledKeyRef.current = focusedItem.key;
                 }
             }
         }
@@ -447,6 +459,12 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         return selectedCount > 0 && selectedCount < childKeys.length;
     }, [flattenTree]);
     const hasVisibleItems = useCallback((node) => {
+        // Nodo già caricato: conta i figli visibili (isExpandible è solo una stima a priori)
+        if (node.isLoaded) {
+            if (!node.items)
+                return false;
+            return node.items.filter(o => !o.hidden).length > 0;
+        }
         // If node has explicit isExpandible value, use that
         if (node.isExpandible !== undefined) {
             return node.isExpandible;

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

@@ -1,8 +1,9 @@
+import React from 'react';
 interface TMUserAvatarProps {
     displayName: string;
     nameForColorCalculation: string;
     tooltipName?: string;
     returnType?: 'jsx' | 'svg';
 }
-declare const TMUserAvatar: (props: TMUserAvatarProps) => string | import("react/jsx-runtime").JSX.Element;
+declare const TMUserAvatar: (props: TMUserAvatarProps) => string | React.JSX.Element;
 export default TMUserAvatar;

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

@@ -1,5 +1,6 @@
+import React from 'react';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 declare const TMVilViewer: ({ vil }: {
     vil?: ValidationItem[];
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => React.JSX.Element | null;
 export default TMVilViewer;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ITMLayoutContainerProps } from './TMLayout';
 interface ITMWaitPanelProps {
     title?: string;
@@ -14,7 +15,7 @@ interface ITMWaitPanelProps {
     onAbortClick?: (abortController: AbortController | undefined) => void;
     useHighZIndex?: boolean;
 }
-export declare const TMWaitPanel: (props: ITMWaitPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMWaitPanel: (props: ITMWaitPanelProps) => React.JSX.Element;
 interface ITMLayoutWaitingContainerProps extends ITMLayoutContainerProps {
     showWaitPanel?: boolean;
     waitPanelTitle?: string;
@@ -30,5 +31,5 @@ interface ITMLayoutWaitingContainerProps extends ITMLayoutContainerProps {
     abortController?: AbortController;
     usePortal?: boolean;
 }
-export declare const TMLayoutWaitingContainer: ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, usePortal, gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutWaitingContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMLayoutWaitingContainer: ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, usePortal, gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutWaitingContainerProps) => React.JSX.Element;
 export {};

package/lib/components/base/TMWaitPanel.js

@@ -34,7 +34,7 @@ const StyledTitle = styled.h2 ` margin: 0; font-size: 1.5em; color: #333; `;
 const StyledProgressBarContainer = styled.div ` width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin: 20px 0; `;
 const StyledProgressBar = styled.div ` height: 100%; background: #4caf50; transition: width 0.3s ease; `;
 const StyledProgressText = styled.p ` font-weight: bold; color: #333; margin: 0; `;
-const StyledMessage = styled.p ` color: #666; font-size: 0.9em; margin-top: 10px; `;
+const StyledMessage = styled.p ` color: #666; font-size: 0.9em; margin-top: 10px; white-space: pre-line; `;
 const StyledAbortButton = styled.button ` background: #ff4d4d; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 1em; cursor: pointer; margin-top: 20px; &:hover { background: #ff6666; } `;
 export const TMWaitPanel = (props) => {
     const { title, showPrimary, textPrimary, valuePrimary, maxValuePrimary, showSecondary, textSecondary, valueSecondary, maxValueSecondary, isCancelable, abortController, onAbortClick, useHighZIndex } = props;

package/lib/components/choosers/TMDistinctValues.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
-import { calcResponsiveSizes, IconAll, IconDelete, IconPencil, IconRefresh, SDKUI_Localizator } from '../../helper';
+import { calcResponsiveSizes, IconAll, IconDelete, IconPencil, IconRefresh, IconSelected, SDKUI_Localizator } from '../../helper';
 import TMButton from '../base/TMButton';
 import TMDataGrid from '../base/TMDataGrid';
 import { CounterItemKey } from '../base/TMCounterContainer';
@@ -56,6 +56,7 @@ const StyledGridContainer = styled.div `
         font-weight: 600;
     }
 `;
+const NO_SELECTED_ROW_KEYS = [];
 /* Quota di larghezza attribuita a ciascuna colonna della griglia, oltre a una base fissa per la barra dei comandi.
    I limiti evitano i due estremi: sotto il 40% la barra dei comandi diventa illeggibile, oltre il 95% il modale esce dallo schermo */
 const QUICK_SEARCH_BASE_WIDTH_PERC = 16;
@@ -110,23 +111,31 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
     const isGridReady = !isQuickSearchGridVisible || quickSearch.columns.length > 0;
     const counterConfig = useMemo(() => {
         const counts = isQuickSearchGridVisible ? quickSearch.counts : distinctValues.counts;
+        const items = new Map([
+            [CounterItemKey.selectedItems, {
+                    key: CounterItemKey.selectedItems,
+                    show: true,
+                    caption: SDKUI_Localizator.SelectedItems,
+                    value: selection.selectedValues.length,
+                    icon: _jsx(IconSelected, {}),
+                    order: 1
+                }]
+        ]);
         // Senza il totale resta il conteggio predefinito della griglia: un rapporto con totale a zero sarebbe fuorviante
-        if (!counts?.found)
-            return { show: true };
-        return {
-            show: true,
-            items: new Map([
-                [CounterItemKey.allItems, {
-                        key: CounterItemKey.allItems,
-                        show: true,
-                        caption: `${counts.returned} restituiti su ${counts.found} trovati`,
-                        value: `${counts.returned}/${counts.found}`,
-                        icon: _jsx(IconAll, {}),
-                        order: -1
-                    }]
-            ])
-        };
-    }, [isQuickSearchGridVisible, quickSearch.counts, distinctValues.counts]);
+        if (counts?.found) {
+            items.set(CounterItemKey.allItems, {
+                key: CounterItemKey.allItems,
+                show: true,
+                caption: `${counts.returned} restituiti su ${counts.found} trovati`,
+                value: `${counts.returned}/${counts.found}`,
+                icon: _jsx(IconAll, {}),
+                order: -1
+            });
+        }
+        return { show: true, items: items };
+    }, [isQuickSearchGridVisible, quickSearch.counts, distinctValues.counts, selection.selectedValues]);
+    // Configurazione fissa: dal pannello si preleva un valore per volta, le caselle di selezione non servono
+    const gridSelection = useMemo(() => ({ showCheckBoxesMode: 'none' }), []);
     const modeDataSource = useMemo(() => ([
         { value: DistinctValuesModes.DistinctValues, display: SDKUI_Localizator.DistinctValues },
         { value: DistinctValuesModes.QuickSearch, display: SDK_Localizator.SavedQuery },
@@ -151,7 +160,7 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
                                 _jsx(TMButton, { btnStyle: 'toolbar', color: 'error', caption: SDKUI_Localizator.Delete, icon: _jsx(IconDelete, {}), onClick: quickSearch.onDeleteSettingsClick }), _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Refresh, icon: _jsx(IconRefresh, {}), onClick: () => refreshAsync() }), selection.isAppendVisible && _jsxs(StyledAppendBar, { children: [_jsx(TMCheckBox, { label: 'Accoda e separa con', value: selection.isAppendMode, onValueChanged: selection.onAppendModeChanged }), _jsx(TMTextBox, { width: '30px', readOnly: true, disabled: !selection.isAppendMode, value: separator })] })] }) }), _jsx(TMSelectedValuesSummary, { items: selection.selectedValues, onRemove: selection.onRemoveSelectedValue, onClear: selection.onClearSelectedValues }), _jsx(StyledGridContainer, { children: isGridReady && _jsx(TMDataGrid
                     /* Le due modalità hanno colonne del tutto diverse: ognuna ha la propria istanza di griglia.
                        Nei valori distinti l'intestazione è il nome del metadato, che arriva insieme al primo caricamento */
-                    , { focusedRowKey: selection.focusedItem ? selection.focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: isQuickSearchGridVisible ? quickSearch.columns : distinctValues.columns, dataSource: isQuickSearchGridVisible ? quickSearch.dataSource : distinctValues.dataSource, customizeColumns: isQuickSearchGridVisible ? quickSearch.customizeColumns : distinctValues.customizeColumns, keyExpr: 'rowIndex', height: 'calc(100%)', showHeaderColumnChooser: true, onFocusedRowChanged: selection.onFocusedRowChanged, onRowDblClick: () => onClosePanelCallback?.(), counterConfig: counterConfig }, isQuickSearchGridVisible ? 'quickSearch' : `distinctValues_${distinctValues.md?.id ?? 0}`) })] }));
+                    , { focusedRowKey: selection.focusedItem ? selection.focusedItem.rowIndex : undefined, selection: gridSelection, selectedRowKeys: NO_SELECTED_ROW_KEYS, searchPanel: { highlightCaseSensitive: true, visible: true }, searchPanelFocusTrigger: 1, dataColumns: isQuickSearchGridVisible ? quickSearch.columns : distinctValues.columns, dataSource: isQuickSearchGridVisible ? quickSearch.dataSource : distinctValues.dataSource, customizeColumns: isQuickSearchGridVisible ? quickSearch.customizeColumns : distinctValues.customizeColumns, keyExpr: 'rowIndex', height: 'calc(100%)', showHeaderColumnChooser: true, onFocusedRowChanged: selection.onFocusedRowChanged, onRowDblClick: () => onClosePanelCallback?.(), counterConfig: counterConfig }, isQuickSearchGridVisible ? 'quickSearch' : `distinctValues_${distinctValues.md?.id ?? 0}`) })] }));
     };
     return (_jsxs(_Fragment, { children: [isModal
                 ? isModalReady && _jsx(TMModal, { title: panelTitle, width: isQuickSearchGridVisible ? calcResponsiveSizes(deviceType, quickSearchModalWidth ?? calcQuickSearchModalWidth(0), '95%', '95%') : calcResponsiveSizes(deviceType, '700px', '95%', '95%'), height: isQuickSearchGridVisible ? '95%' : calcResponsiveSizes(deviceType, '600px', '95%', '95%'), resizable: true, expandable: true, onClose: onClosePanelCallback, children: renderContent() }, isQuickSearchGridVisible ? 'quickSearch' : 'distinctValues')

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

@@ -41,4 +41,4 @@ interface ITMDynDataListItemChooserFormProps extends ITMChooserFormProps<DataLis
     /** Se presente, sono i parametri da passare alla query per recuperare il dataSource  */
     queryParamsDynDataList?: string[];
 }
-export declare const TMDynDataListItemChooserForm: (props: ITMDynDataListItemChooserFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMDynDataListItemChooserForm: (props: ITMDynDataListItemChooserFormProps) => React.JSX.Element;

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

@@ -1,4 +1,5 @@
+import React from 'react';
 import { InvoiceRetrieveFormats } from '@topconsultnpm/sdk-ts';
 import { ITMEnumDataBinding } from '../../ts';
-declare const TMInvoiceRetrieveFormats: ({ value, valueOrig, onValueChanged, valuesToExclude, label, width }: ITMEnumDataBinding<InvoiceRetrieveFormats>) => import("react/jsx-runtime").JSX.Element;
+declare const TMInvoiceRetrieveFormats: ({ value, valueOrig, onValueChanged, valuesToExclude, label, width }: ITMEnumDataBinding<InvoiceRetrieveFormats>) => React.JSX.Element;
 export default TMInvoiceRetrieveFormats;

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

@@ -1,4 +1,5 @@
+import React from 'react';
 import { OrderRetrieveFormats } from '@topconsultnpm/sdk-ts';
 import { ITMEnumDataBinding } from '../../ts';
-declare const TMOrderRetrieveFormats: ({ value, valueOrig, onValueChanged, valuesToExclude, label, width }: ITMEnumDataBinding<OrderRetrieveFormats>) => import("react/jsx-runtime").JSX.Element;
+declare const TMOrderRetrieveFormats: ({ value, valueOrig, onValueChanged, valuesToExclude, label, width }: ITMEnumDataBinding<OrderRetrieveFormats>) => React.JSX.Element;
 export default TMOrderRetrieveFormats;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TMEditorButtonData } from '../base/TMEditorBase';
 interface ITMQuickSearchInfo {
     /** Tipo documento della ricerca rapida: serve a ricostruire la ricerca di sistema con tutti i documenti */
@@ -7,6 +8,6 @@ interface ITMQuickSearchInfo {
 }
 export declare const useTMQuickSearchInfo: ({ tid, sqdId }: ITMQuickSearchInfo) => {
     infoButton: TMEditorButtonData | undefined;
-    detailForm: import("react/jsx-runtime").JSX.Element | null;
+    detailForm: React.JSX.Element | null;
 };
 export {};

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

@@ -19,13 +19,13 @@ export declare const TMRelationIdViewer: ({ relationType, relationId, showIcon,
     relationId?: number;
     showIcon?: boolean;
     noneSelectionText?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const TMRelationIcon: ({ rd, relationType }: {
     rd: RelationDescriptor | undefined;
     relationType?: RelationTypes;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const TMRelationTooltip: ({ rd, relationType, children }: {
     rd?: RelationDescriptor;
     relationType: RelationTypes | undefined;
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

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

@@ -38,8 +38,8 @@ interface ITMUserChooserFormProps extends ITMChooserFormProps<UserDescriptor> {
 export declare const TMUserChooserForm: React.FunctionComponent<ITMUserChooserFormProps>;
 export declare const TMUserIcon: ({ ud }: {
     ud?: UserDescriptor;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => React.JSX.Element | null;
 export declare const TMUserTooltip: ({ ud, children }: {
     ud?: UserDescriptor;
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

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

@@ -2,10 +2,14 @@ import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export declare const TMEditorsDefaultBorderRadius = "5px";
 export declare const TMEditorsDefaultLabelFontSize = "0.9rem";
 export declare const editorColorManager: (validationItems: ValidationItem[]) => string;
-export declare const StyledEditorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledEditorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $width: string;
 }>> & string;
-export declare const StyledEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+export declare const StyledEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $vil: ValidationItem[];
     $width: string;
     $type: string;
@@ -16,19 +20,25 @@ export declare const StyledEditor: import("styled-components/dist/types").IStyle
     $isMobile?: boolean;
     $borderRadius?: string;
 }>> & string;
-export declare const StyledEditorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledEditorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $vil: ValidationItem[];
     $disabled: boolean;
     $isModified: boolean;
 }>> & string;
-export declare const StyledEditorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledEditorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $isFocused: boolean;
     $labelPosition: 'right' | 'left' | 'top';
     $disabled: boolean;
     $fontSize?: string;
     $color?: string;
 }>> & string;
-export declare const StyledTextareaEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {
+export declare const StyledTextareaEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $vil: ValidationItem[];
     $width: string;
     $isModified: boolean;

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

@@ -30,7 +30,7 @@ export declare class FormulaDescriptor {
     description?: string;
     syntax?: string;
 }
-export declare const renderFormulaIcon: (iconType: FormulaIconTypes, tid?: number, md?: MetadataDescriptor) => import("react/jsx-runtime").JSX.Element;
+export declare const renderFormulaIcon: (iconType: FormulaIconTypes, tid?: number, md?: MetadataDescriptor) => React.JSX.Element;
 declare const TMFormulaEditor: React.FunctionComponent<ITMApplyFormProps<FormulaDescriptor>>;
 export default TMFormulaEditor;
 export declare class FormulaHelper {

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

@@ -1,7 +1,8 @@
+import React from 'react';
 interface IHtmlContentDisplay {
     markup: string;
     isSelected: boolean;
     searchText?: string;
 }
-declare const TMHtmlContentDisplay: (props: IHtmlContentDisplay) => import("react/jsx-runtime").JSX.Element;
+declare const TMHtmlContentDisplay: (props: IHtmlContentDisplay) => React.JSX.Element;
 export default TMHtmlContentDisplay;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export declare const sanitizeAndFormatComment: (raw?: string) => string;
 export interface ITMHtmlEditor {
@@ -34,5 +35,5 @@ export interface ITMHtmlEditor {
     /** If true, displays a character count below the editor */
     showCount?: boolean;
 }
-declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
+declare const TMHtmlEditor: (props: ITMHtmlEditor) => React.JSX.Element;
 export default TMHtmlEditor;

package/lib/components/editors/TMMetadataValues.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
-import { AccessLevels, AppModules, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
-import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys, isApprovalWorkflowView, StyledTabItem, getAppModuleGradient } from "../../helper";
+import { AccessLevels, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys, isApprovalWorkflowView } from "../../helper";
 import { TMColors } from "../../utils/theme";
 import TMButton from "../base/TMButton";
 import TMDropDownMenu from "../base/TMDropDownMenu";
@@ -13,7 +13,7 @@ import { FormulaHelper } from "./TMFormulaEditor";
 import { ChronologyMIDs, DraftsMIDs, DSAttachsMIDs } from "../../ts";
 import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
 import TMAccordion from "../base/TMAccordion";
-import TabPanel, { Item } from 'devextreme-react/tab-panel';
+import TMTabControl, { TMTabPanel } from "../base/TMTabControl";
 import { TMExceptionBoxManager } from "../base/TMPopUp";
 // Costante per la minWidth degli elementi - garantisce coerenza tra layout orizzontale e verticale
 const ITEM_MIN_WIDTH = 200;
@@ -754,7 +754,7 @@ const TMLayoutTabPanel = React.memo(({ tabItems }) => {
     const handleSelectedIndexChange = useCallback((index) => {
         setActiveTabIndex(index);
     }, []);
-    return (_jsx(TabPanel, { width: "100%", height: "100%", animationEnabled: false, swipeEnabled: false, loop: false, showNavButtons: true, repaintChangesOnly: true, stylingMode: "primary", iconPosition: 'start', tabsPosition: 'top', selectedIndex: activeTabIndex, onSelectedIndexChange: handleSelectedIndexChange, children: tabItems.map((tabItem, index) => (_jsx(Item, { title: tabItem.title, tabRender: () => (_jsxs(StyledTabItem, { $isSelected: activeTabIndex === index, $activeGradient: getAppModuleGradient(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER), children: [_jsx("span", { children: tabItem.title }), tabItem.errorCount !== undefined && tabItem.errorCount > 0 && (_jsx(TMTooltip, { content: _jsxs("div", { style: {
+    return (_jsx(TMTabControl, { variant: 'moduleFilled', contentAnimation: 'none', swipeEnabled: false, selectedId: String(activeTabIndex), onSelectedIdChange: (id) => handleSelectedIndexChange(Number(id)), style: { width: '100%', height: '100%' }, children: tabItems.map((tabItem, index) => (_jsx(TMTabPanel, { id: String(index), label: _jsxs(_Fragment, { children: [_jsx("span", { children: tabItem.title }), tabItem.errorCount !== undefined && tabItem.errorCount > 0 && (_jsx(TMTooltip, { content: _jsxs("div", { style: {
                                 minWidth: '240px',
                                 padding: '14px',
                                 borderRadius: '10px',
@@ -787,5 +787,5 @@ const TMLayoutTabPanel = React.memo(({ tabItems }) => {
                                                     fontSize: '0.85em',
                                                     color: '#7f1d1d',
                                                     lineHeight: 1.4
-                                                }, children: error.message })] }, idx))) })] }), children: _jsx(StyledErrorBadge, { children: tabItem.errorCount > 99 ? '99+' : tabItem.errorCount }) }))] })), children: _jsx("div", { style: { width: '100%', overflowX: 'auto' }, children: _jsx("div", { style: { minWidth: 'max-content' }, children: tabItem.content }) }) }, `tab-${tabItem.layoutItemID}`))) }));
+                                                }, children: error.message })] }, idx))) })] }), children: _jsx(StyledErrorBadge, { children: tabItem.errorCount > 99 ? '99+' : tabItem.errorCount }) }))] }), children: _jsx("div", { style: { width: '100%', overflowX: 'auto' }, children: _jsx("div", { style: { minWidth: 'max-content' }, children: tabItem.content }) }) }, `tab-${tabItem.layoutItemID}`))) }));
 });

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

@@ -14,5 +14,5 @@ interface TMTreeDropDownProps {
     isValidKey?: (key: number) => boolean;
     elementStyle?: React.CSSProperties;
 }
-declare const TMTreeDropDown: (props: TMTreeDropDownProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMTreeDropDown: (props: TMTreeDropDownProps) => React.JSX.Element;
 export default TMTreeDropDown;

package/lib/components/features/archive/TMArchive.js

@@ -22,12 +22,17 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
     const pendingMidsRef = React.useRef(null);
     const deviceType = useDeviceType();
     useEffect(() => { setMruTIDs(SDKUI_Globals.userSettings.archivingSettings.mruTIDs); }, []);
+    // Applica inputTID solo quando cambia davvero: non deve sovrascrivere il tipo documento
+    // selezionato dall'utente.
     useEffect(() => {
         if (!inputTID)
             return;
         setCurrentTID(inputTID);
-        setCurrentMruTID(mruTIDs.includes(inputTID) ? inputTID : 0);
-    }, [inputTID, mruTIDs]);
+    }, [inputTID]);
+    // Evidenzia la scorciatoia del tipo documento corrente, anche quando mruTIDs cambia.
+    useEffect(() => {
+        setCurrentMruTID(currentTID && mruTIDs.includes(currentTID) ? currentTID : 0);
+    }, [currentTID, mruTIDs]);
     useEffect(() => {
         pendingMidsRef.current = inputMids;
         if (currentTID && currentTID > 0 && inputMids && inputMids.length > 0) {

package/lib/components/features/assistant/TMToppyDraggableHelpCenter.d.ts

@@ -11,5 +11,5 @@ interface TMToppyDraggableHelpCenterProps {
     /** Callback chiamato quando si clicca sull'immagine di Toppy */
     onToppyImageClick?: () => void;
 }
-declare const TMToppyDraggableHelpCenter: (props: TMToppyDraggableHelpCenterProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMToppyDraggableHelpCenter: (props: TMToppyDraggableHelpCenterProps) => React.JSX.Element;
 export default TMToppyDraggableHelpCenter;

package/lib/components/features/blog/TMBlogCommentForm.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { BlogPost, UserDescriptor } from "@topconsultnpm/sdk-ts";
 import { FileItem } from '../../base/TMFileManagerUtils';
 import { TMBlogContextDescriptor } from '../../grids/TMBlogsPostUtils';
@@ -18,5 +19,5 @@ interface TMBlogCommentFormProps {
     /** External save handler - when provided, bypasses internal engine logic */
     onCustomSave?: (blogPost: BlogPost) => Promise<void>;
 }
-declare const TMBlogCommentForm: (props: TMBlogCommentFormProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMBlogCommentForm: (props: TMBlogCommentFormProps) => React.JSX.Element;
 export default TMBlogCommentForm;

package/lib/components/features/documents/TMCopyToFolderForm.js

@@ -114,7 +114,7 @@ const TMCopyToFolderForm = ({ mode, selectedDcmtInfos, onClose, showTMRelationVi
     // ---- Scrittura file nel filesystem locale ----
     const writeFileToFolder = async (file, dcmtInfo) => {
         try {
-            let targetFileName = await generateTargetFileName(file, dcmtInfo, {
+            const baseFileName = await generateTargetFileName(file, dcmtInfo, {
                 fileNamingMode: settings.fileNamingMode,
                 separatorChar: settings.separatorChar,
             });
@@ -123,7 +123,7 @@ const TMCopyToFolderForm = ({ mode, selectedDcmtInfos, onClose, showTMRelationVi
                 const url = URL.createObjectURL(file);
                 const a = document.createElement('a');
                 a.href = url;
-                a.download = targetFileName;
+                a.download = baseFileName;
                 document.body.appendChild(a);
                 a.target = '_blank';
                 a.rel = 'noreferrer';
@@ -132,20 +132,22 @@ const TMCopyToFolderForm = ({ mode, selectedDcmtInfos, onClose, showTMRelationVi
                 URL.revokeObjectURL(url);
                 return;
             }
-            const exists = await fileExists(folderHandleRef.current, targetFileName);
+            const folderHandle = folderHandleRef.current;
+            let targetFileName = baseFileName;
+            const exists = await fileExists(folderHandle, targetFileName);
             if (exists) {
                 switch (settings.fileExistsMode) {
                     case 'skip':
                         return;
                     case 'rename':
-                        targetFileName = await generateUniqueFileName(folderHandleRef.current, targetFileName);
+                        targetFileName = await generateUniqueFileName(folderHandle, targetFileName);
                         break;
                     case 'overwrite':
                     default:
                         break;
                 }
             }
-            const fileHandle = await folderHandleRef.current.getFileHandle(targetFileName, { create: true });
+            const fileHandle = await folderHandle.getFileHandle(targetFileName, { create: true });
             const writable = await fileHandle.createWritable();
             await writable.write(file);
             await writable.close();
@@ -179,7 +181,6 @@ const TMCopyToFolderForm = ({ mode, selectedDcmtInfos, onClose, showTMRelationVi
             await downloadDcmtsAsync({ inputDcmts: dcmtInfosToDownload, downloadType: DownloadTypes.Dcmt, downloadMode: 'download', onFileDownloaded: writeFileToFolder, skipConfirmation: true, retrieveOptions, useCache: false });
         }
         else if (settings.exportMode === 'zip') {
-            const zipEntries = [];
             const fileNameCounts = new Map();
             const getUniqueZipFileName = (fileName) => {
                 const lowerName = fileName.toLowerCase();
@@ -192,14 +193,24 @@ const TMCopyToFolderForm = ({ mode, selectedDcmtInfos, onClose, showTMRelationVi
                 const ext = dotIndex > 0 ? fileName.substring(dotIndex) : '';
                 return `${baseName} (${count})${ext}`;
             };
+            // I file scaricati si raccolgono in mappa (nome incluso) e l'archivio viene costruito
+            // dopo, nell'ordine di selezione, così i suffissi di deduplica restano coerenti.
+            const downloadedEntries = new Map();
             const collectFileForZip = async (file, dcmtInfo) => {
                 const targetFileName = await generateTargetFileName(file, dcmtInfo, {
                     fileNamingMode: settings.fileNamingMode,
                     separatorChar: settings.separatorChar,
                 });
-                zipEntries.push({ filename: getUniqueZipFileName(targetFileName), data: file });
+                downloadedEntries.set(`${dcmtInfo.TID}_${dcmtInfo.DID}`, { file, targetFileName });
             };
             await downloadDcmtsAsync({ inputDcmts: dcmtInfosToDownload, downloadType: DownloadTypes.Dcmt, downloadMode: 'download', onFileDownloaded: collectFileForZip, skipConfirmation: true, retrieveOptions, useCache: false });
+            const zipEntries = [];
+            for (const dcmtInfo of dcmtInfosToDownload) {
+                const entry = downloadedEntries.get(`${dcmtInfo.TID}_${dcmtInfo.DID}`);
+                if (!entry)
+                    continue;
+                zipEntries.push({ filename: getUniqueZipFileName(entry.targetFileName), data: entry.file });
+            }
             if (zipEntries.length > 0) {
                 const zipFileName = settings.zipFileName.trim().toLowerCase().endsWith('.zip')
                     ? settings.zipFileName.trim()

package/lib/components/features/documents/TMDcmtForm.js

@@ -1697,7 +1697,7 @@ const TMDcmtForm = ({ TID, DID, groupId, layoutMode = LayoutModes.Update, formMo
                                                     } }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }) }), _jsx(TMToppyDraggableHelpCenter, { isVisible: isToppyVisible, content: _jsx(TMDcmtFormActionButtons, { showToppyForApprove: showToppyForApprove, workItems: workItems, caseFlowWorkItems: showToppyForCaseFlow ? caseFlowWorkItems : [], onCompleteCaseFlowWorkItem: completeCaseFlowWorkItem, onRejectCaseFlowWorkItem: rejectCaseFlowWorkItem, deviceType: deviceType, isMobile: isMobile, handleSignApprove: handleSignApprove, updateShowApprovePopup: updateShowApprovePopup, updateShowRejectPopup: updateShowRejectPopup, updateShowReAssignPopup: updateShowReAssignPopup, updateShowMoreInfoPopup: updateShowMoreInfoPopup, fromDTD: fromDTD, showToppyForCompleteMoreInfo: showToppyForCompleteMoreInfo, moreInfoTasks: moreInfoTasks, setShowCommentForm: setShowCommentForm, showToppyForReferences: showToppyForReferences, dcmtReferences: dcmtReferences, referenceActionMap: referenceActionMap, handleNavigateToReference: handleNavigateToReference, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask }) })] }), (showCommentForm && TID && DID) &&
                             _jsx(TMBlogCommentForm, { maxLength: 500, context: blogCommentFormContext, onClose: handleBlogCommentFormClose, onCustomSave: onBlogCommentFormCustomSave, participants: emptyParticipants, showAttachmentsSection: false, allArchivedDocumentsFileItems: emptyArchivedDocumentsFileItems })] }), renderDcmtOperations, renderFloatingBar] }));
     };
-    return (_jsxs("div", { style: { width: '100%', height: '100%' }, children: [(isModal && onClose)
+    return (_jsxs("div", { style: (isModal && onClose) ? { width: 0, height: 0 } : { width: '100%', height: '100%' }, children: [(isModal && onClose)
                 ? _jsx(TMModal, { title: titleModal, onClose: handleClose, width: widthModal ?? '100%', height: heightModal ?? '100%', hidePopup: false, askClosingConfirm: true, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block', padding: "4px", position: 'relative' }, children: renderDcmtForm() }) })
                 : renderDcmtForm(), (showMoreInfoTaskPopup && showMoreInfoTaskTask && showMoreInfoTaskTask.id && handleNavigateToWGs && handleNavigateToDossiers && getAllTasks && deleteTaskByIdsCallback && addTaskCallback && editTaskCallback) && _jsx(TMTaskForm, { id: Number(showMoreInfoTaskTask.id), title: showMoreInfoTaskTask.name ?? 'N/A', formMode: FormModes.Update, onSaved: onSavedTaskFormCallback, editTaskCallback: editTaskCallback, onClose: () => { setShowMoreInfoTaskPopup(false); setShowMoreInfoTaskTask(undefined); }, onCancel: () => { setShowMoreInfoTaskPopup(false); setShowMoreInfoTaskTask(undefined); }, isModal: true, showBackButton: false, hasNavigation: false, width: taskModalSizes(deviceType, FormModes.Update).width, height: taskModalSizes(deviceType, FormModes.Update).height, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, visualizedTasks: [], currentTask: null, setCurrentTask: () => { }, selectedRowKeys: [], handleFocusedRowKeyChange: () => { }, onStatusChanged: () => { }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback }), (showMultiDetailArchiveModal && fromDTD && multiDetailMasterDcmts.length > 0) &&
                 _jsx(TMMultiMasterDetailDcmtsForm, { dtd: fromDTD, masterDcmt: multiDetailMasterDcmts[0], onClose: () => { setShowMultiDetailArchiveModal(false); setMultiDetailMasterDcmts([]); }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, showDcmtFormSidebar: showDcmtFormSidebar, showTodoDcmtForm: showTodoDcmtForm, openFileUploaderPdfEditor: openFileUploaderPdfEditor, graphometricManager: graphometricManager, editPdfForm: editPdfForm, openS4TViewer: openS4TViewer, fetchRemoteCertificates: fetchRemoteCertificates, onOpenS4TViewerRequest: onOpenS4TViewerRequest, onOpenPdfEditorRequest: onOpenPdfEditorRequest, onReferenceClick: onReferenceClick, onTaskCreateRequest: onTaskCreateRequest })] }));
@@ -1783,7 +1783,8 @@ const validateCustomRegEx = (mvd, value, validationItems) => {
         const regex = new RegExp(`^(?:${pattern})$`);
         if (!regex.test(value)) {
             const fieldName = mvd.md?.nameLoc ?? mvd.md?.name ?? SDKUI_Localizator.Field;
-            const message = SDKUI_Localizator.FormatNotRespected.replaceParams(fieldName, pattern);
+            const description = mvd.md?.description?.trim();
+            const message = description ? description : SDKUI_Localizator.InvalidFormatValue;
             validationItems.push(new ValidationItem(ResultTypes.ERROR, fieldName, message));
         }
     }

package/lib/components/features/documents/TMDcmtFormActionButtons.d.ts

@@ -41,5 +41,5 @@ interface TMDcmtFormActionButtonsProps {
     setShowMoreInfoTaskPopup: React.Dispatch<React.SetStateAction<boolean>>;
     setShowMoreInfoTaskTask: React.Dispatch<React.SetStateAction<TaskDescriptor | undefined>>;
 }
-declare const TMDcmtFormActionButtons: (props: TMDcmtFormActionButtonsProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMDcmtFormActionButtons: (props: TMDcmtFormActionButtonsProps) => React.JSX.Element;
 export default TMDcmtFormActionButtons;

package/lib/components/features/documents/TMDcmtIcon.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DcmtInfo, DownloadModes, DownloadTypes } from '../../../ts';
 import { FileDescriptor } from '@topconsultnpm/sdk-ts';
 interface ITMDcmtIconProps {
@@ -16,5 +17,5 @@ interface ITMDcmtIconProps {
     /** Se true, renderizza il wait panel nel body tramite Portal (centrato a schermo intero) */
     usePortal?: boolean;
 }
-declare const TMDcmtIcon: ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode, tooltipContent, openInOffice, onDownloadDcmtsAsync, usePortal }: ITMDcmtIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMDcmtIcon: ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode, tooltipContent, openInOffice, onDownloadDcmtsAsync, usePortal }: ITMDcmtIconProps) => React.JSX.Element;
 export default TMDcmtIcon;

package/lib/components/features/documents/TMDcmtPreview.d.ts

@@ -25,8 +25,12 @@ export declare const TMNothingToShow: ({ text, secondText, fileExt, icon }: {
     secondText?: any;
     fileExt?: string;
     icon?: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const StyledHeaderIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}) => React.JSX.Element;
+export declare const StyledHeaderIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $color: string;
 }>> & string;
-export declare const StyledPanelStatusContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledPanelStatusContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;