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

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

@@ -1,118 +1,102 @@
 import React from 'react';
 import { ResultTypes } from '@topconsultnpm/sdk-ts';
 import { TMColors } from '../../utils/theme';
-export declare const StyledDivHorizontal: 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 StyledMultiViewPanel: 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;
-}, {
+export declare const StyledDivHorizontal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledMultiViewPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isVisible"> & {
     $isVisible: boolean;
-}>> & string;
-export declare const StyledParagraph: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
-    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;
-export declare const StyledToolbarForm: 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 ReferencesContainer: 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 StyledReferenceButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isVisible"> & {
+    $isVisible: boolean;
+}, never>>> & string;
+export declare const StyledParagraph: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
+export declare const StyledToolbarForm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ReferencesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledReferenceButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$bgColor"> & {
+    $bgColor?: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$bgColor"> & {
     $bgColor?: string;
-}>> & string;
-export declare const StyledPanelPage: 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;
-}, {
+}, never>>> & string;
+export declare const StyledPanelPage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$background" | "$isOpen" | "$padding" | "$withMenu"> & {
+    $isOpen?: boolean;
+    $padding?: string;
+    $background?: string;
+    $withMenu?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$background" | "$isOpen" | "$padding" | "$withMenu"> & {
     $isOpen?: boolean;
     $padding?: string;
     $background?: string;
     $withMenu?: boolean;
-}>> & string;
-export declare const StyledClickableIconWrapper: 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;
-}, {
+}, never>>> & string;
+export declare const StyledClickableIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
     $disabled?: boolean;
-}>> & string;
-export declare const StyledOffCanvasPanel: 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;
-}, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
+    $disabled?: boolean;
+}, never>>> & string;
+export declare const StyledOffCanvasPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isOpen" | "$mobileHeight" | "$width"> & {
     $isOpen: boolean;
     $width?: string;
     $mobileHeight?: string;
-}>> & string;
-export declare const StyledOverlay: 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;
-}, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isOpen" | "$mobileHeight" | "$width"> & {
+    $isOpen: boolean;
+    $width?: string;
+    $mobileHeight?: string;
+}, never>>> & string;
+export declare const StyledOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isOpen"> & {
+    $isOpen: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isOpen"> & {
     $isOpen: boolean;
-}>> & string;
-export declare const StyledModalContainer: 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 StyledResultTypeContainer: 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;
-}, {
+}, never>>> & string;
+export declare const StyledModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledResultTypeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$resultType"> & {
     $resultType: ResultTypes;
-}>> & string;
-export declare const StyledTooltipSeparatorItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "style"> & {
-    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;
-export declare const StyledTooltipItem: 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;
-}, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$resultType"> & {
+    $resultType: ResultTypes;
+}, never>>> & string;
+export declare const StyledTooltipSeparatorItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>>> & string;
+export declare const StyledTooltipItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$fontSize" | "$marginTop"> & {
+    $color?: TMColors;
+    $fontSize?: string;
+    $marginTop?: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$fontSize" | "$marginTop"> & {
     $color?: TMColors;
     $fontSize?: string;
     $marginTop?: string;
-}>> & string;
-export declare const StyledTooltipContainer: 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 StyledDraggableDiv: 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 StyledBadge: 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;
-}, {
+}, never>>> & string;
+export declare const StyledTooltipContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledDraggableDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor"> & {
+    $backgroundColor: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor"> & {
     $backgroundColor: string;
-}>> & string;
-export declare const StyledDxGridGroupHeader: 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;
-}, {
+}, never>>> & string;
+export declare const StyledDxGridGroupHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor"> & {
+    $backgroundColor?: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor"> & {
     $backgroundColor?: string;
-}>> & string;
-export declare const cellRenderObjectIcon: (icon: any) => React.JSX.Element;
-export declare const StyledChartOverlay: 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;
-}, {
+}, never>>> & string;
+export declare const cellRenderObjectIcon: (icon: any) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledChartOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor"> & {
     $backgroundColor?: string;
-}>> & string;
-export declare const StyledBtnLoadChart: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor"> & {
     $backgroundColor?: string;
-}>> & string;
-export declare const StyledFormButtonsContainer: 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 StyledToolbarCardContainer: 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 StyledSpinner: 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 StyledLoadingContainer: 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 StyledAnimatedComponentScaleColor: 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;
-}, {
+}, never>>> & string;
+export declare const StyledBtnLoadChart: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$backgroundColor"> & {
+    $backgroundColor?: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$backgroundColor"> & {
+    $backgroundColor?: string;
+}, never>>> & string;
+export declare const StyledFormButtonsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledToolbarCardContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledSpinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledLoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledAnimatedComponentScaleColor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$delay" | "$scale"> & {
     $delay?: string;
     $scale?: number;
-}>> & string;
-export declare const StyledAnimatedComponentOpacity: 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;
-}, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$delay" | "$scale"> & {
+    $delay?: string;
+    $scale?: number;
+}, never>>> & string;
+export declare const StyledAnimatedComponentOpacity: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$delay"> & {
+    $delay?: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$delay"> & {
     $delay?: string;
-}>> & string;
+}, never>>> & string;

package/lib/components/base/TMAlert.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import { IconCloseCircle, IconInfo, IconSuccess, IconWarning } from '../../helper';
+import { DeviceType, TMDeviceProvider, useDeviceType } from './TMDeviceProvider';
 const TMAlertPosition = {
     TOP_RIGHT: { top: '10px', right: '10px', position: 'absolute' },
     TOP_CENTER: { top: '10px', left: '50%', transform: 'translateX(-50%)', position: 'absolute' },
@@ -45,13 +46,8 @@ const Mode = {
 };
 // const TMAlert = ({ mode, duration = 5000, message, position = 'BOTTOM_CENTER' }: { mode: keyof AlertModes, duration?: number, message: string, position?: keyof typeof TMAlertPosition }) => {
 const TMAlert = ({ mode, duration = 1000, title, message, position = 'BOTTOM_RIGHT' }) => {
-    const [currentWidth, setCurrentWidth] = useState(window.innerWidth);
+    const deviceType = useDeviceType();
     const [container] = useState(document.getElementsByClassName('tm-alert-temporary-container'));
-    useEffect(() => {
-        window.addEventListener('resize', () => {
-            setCurrentWidth(window.innerWidth);
-        });
-    }, [currentWidth]);
     useEffect(() => {
         const tiemout = setTimeout(() => {
             let container = document.getElementsByClassName('tm-alert-temporary-container');
@@ -63,7 +59,9 @@ const TMAlert = ({ mode, duration = 1000, title, message, position = 'BOTTOM_RIG
     }, [container]);
     // Determine the style for the alert container based on the position prop
     const alertContainerStyle = TMAlertPosition[position];
-    return (_jsx("div", { style: { width: '100%', paddingTop: '3px', ...alertContainerStyle }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms`, position: 'relative', float: 'right', zIndex: '20000999', width: '356px', height: '86px', borderRadius: '8px', overflow: 'hidden', border: '2px white solid', boxShadow: '0px 3px 6px #00000029' }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms` }, children: _jsxs("div", { className: 'tm-alert-container', style: { background: Mode[mode].color, animationDuration: `${duration}ms` }, children: [_jsxs("div", { className: "tm-alert-context", style: { position: 'relative' }, children: [_jsx("div", { className: 'tm-alert-icon', style: { position: 'absolute', top: '12px', left: '12px', paddingTop: '1px' }, children: Mode[mode].icon }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: '15px', left: '45px', textAlign: 'left', fontSize: '1.1rem', fontWeight: 'bold', maxWidth: '280px' }, children: title }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: '35px', left: '45px', textAlign: 'left', fontSize: '1rem', maxWidth: '280px' }, children: message })] }), _jsx("div", { className: 'tm-alert-loading', style: { backgroundImage: `linear-gradient(to right, ${Mode[mode].borderColor}, ${Mode[mode].textColor})`, animationDuration: `${duration}ms` } })] }) }) }) }));
+    // Su mobile l'alert e' piu' basso e con testo piu' piccolo: la versione desktop copre troppo schermo.
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (_jsx("div", { style: { width: '100%', paddingTop: '3px', ...alertContainerStyle }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms`, position: 'relative', float: 'right', zIndex: '20000999', width: isMobile ? 'min(300px, calc(100vw - 20px))' : '356px', height: isMobile ? '58px' : '86px', borderRadius: '8px', overflow: 'hidden', border: '2px white solid', boxShadow: '0px 3px 6px #00000029' }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms` }, children: _jsxs("div", { className: 'tm-alert-container', style: { background: Mode[mode].color, animationDuration: `${duration}ms` }, children: [_jsxs("div", { className: "tm-alert-context", style: { position: 'relative' }, children: [_jsx("div", { className: 'tm-alert-icon', style: { position: 'absolute', top: isMobile ? '8px' : '12px', left: isMobile ? '8px' : '12px', paddingTop: '1px' }, children: Mode[mode].icon }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: isMobile ? '7px' : '15px', left: isMobile ? '38px' : '45px', textAlign: 'left', fontSize: isMobile ? '0.85rem' : '1.1rem', fontWeight: 'bold', maxWidth: isMobile ? 'calc(100% - 46px)' : '280px', ...(isMobile && { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }) }, children: title }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: isMobile ? '25px' : '35px', left: isMobile ? '38px' : '45px', textAlign: 'left', fontSize: isMobile ? '0.8rem' : '1rem', maxWidth: isMobile ? 'calc(100% - 46px)' : '280px', ...(isMobile && { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }) }, children: message })] }), _jsx("div", { className: 'tm-alert-loading', style: { backgroundImage: `linear-gradient(to right, ${Mode[mode].borderColor}, ${Mode[mode].textColor})`, animationDuration: `${duration}ms` } })] }) }) }) }));
 };
 const ShowAlert = ({ mode, message, duration, title, position = 'BOTTOM_RIGHT' }) => {
     let container = document.createElement('div');
@@ -72,6 +70,6 @@ const ShowAlert = ({ mode, message, duration, title, position = 'BOTTOM_RIGHT' }
     // container.style.position = 'relative'
     container.style.display = 'flex';
     const root = ReactDOM.createRoot(container);
-    root.render(_jsx(React.StrictMode, { children: _jsx(TMAlert, { message: message, mode: mode, duration: duration, title: title, position: position }) }));
+    root.render(_jsx(React.StrictMode, { children: _jsx(TMDeviceProvider, { children: _jsx(TMAlert, { message: message, mode: mode, duration: duration, title: title, position: position }) }) }));
 };
 export default ShowAlert;

package/lib/components/base/TMAreaManager.js

@@ -10,7 +10,8 @@ import { loadMessages } from 'devextreme/localization';
 import { getFileManagerFolderColor, Globalization, IconAll, IconCloud, IconFolder, IconFolderForCSS, IconSelected, SDKUI_Localizator, svgToString } from '../../helper';
 import { TMExceptionBoxManager } from './TMPopUp';
 import ShowAlert from './TMAlert';
-import { TMLayoutWaitingContainer } from './TMWaitPanel';
+import TMLayoutContainer from './TMLayout';
+import TMWaitPanelManager from './waitPanel/TMWaitPanelManager';
 import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
 import { IconPdf, IconTxt, IconXls, IconDocx, IconImage, IconZip, IconXml, IconMp4, IconEmail, IconPpt, IconSigned, IconExe, IconHtml, IconDwg, IconDicom, IconSlddrw } from '../../assets/thumbnails';
 import styled from 'styled-components';
@@ -89,17 +90,6 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
     const [counterValues, setCounterValues] = useState(new Map());
     // State to maintain the selection mode (File System Item - right panel)
     const [selectionMode, setSelectionMode] = useState('single');
-    /* State to manage the Wait Panel */
-    const [showWaitPanel, setShowWaitPanel] = useState(false);
-    const [waitPanelTitle, setWaitPanelTitle] = useState('');
-    const [showPrimary, setShowPrimary] = useState(false);
-    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
-    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
-    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
-    const [showSecondary, setShowSecondary] = useState(false);
-    const [waitPanelTextSecondary, setWaitPanelTextSecondary] = useState('');
-    const [waitPanelValueSecondary, setWaitPanelValueSecondary] = useState(0);
-    const [waitPanelMaxValueSecondary, setWaitPanelMaxValueSecondary] = useState(0);
     // Timer ID to store reference for any scheduled operation
     let timerId = null;
     // Prefix for area folder names
@@ -430,44 +420,55 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
         }
     };
     const downloadItems = async (items) => {
+        const files = items.filter(item => !item.isDirectory);
+        const isBatch = files.length > 1;
+        const waitPanel = TMWaitPanelManager.show({
+            title: "Download",
+            max: isBatch ? files.length : 0,
+            cancelable: true,
+            showCounters: false,
+            showSecondary: isBatch,
+            primaryLabel: isBatch ? 'File' : undefined,
+            secondaryLabel: isBatch ? 'File corrente' : undefined,
+        });
+        abortController = waitPanel.abortController;
+        const publishBytes = (loaded, total) => {
+            const text = total > 0
+                ? `Downloading... ${Globalization.getNumberDisplayValue(loaded, true)} / ${Globalization.getNumberDisplayValue(total, true)}`
+                : '';
+            if (isBatch)
+                waitPanel.setSecondary({ value: loaded, max: total, text });
+            else
+                waitPanel.update({ value: loaded, max: total, subtitle: text });
+        };
+        // Un solo avviso per tutta l'operazione: con più file riporta quanti ne sono stati scaricati.
+        let downloaded = 0;
+        const showInterrupted = () => ShowAlert({
+            mode: 'warning',
+            title: "Download",
+            duration: 3000,
+            message: isBatch ? SDKUI_Localizator.DownloadInterruptedFiles.replaceParams(downloaded, files.length) : SDKUI_Localizator.DownloadInterrupted,
+        });
         try {
-            setShowWaitPanel(true);
-            setShowPrimary(items.length > 1);
-            setShowSecondary(true);
-            setWaitPanelTitle("Download");
-            abortController = new AbortController();
-            let i = 0;
-            setWaitPanelMaxValuePrimary(items.length);
-            let firstBlock = true;
-            let maxFileSize = 0;
-            for (const item of items) {
-                if (item.isDirectory)
-                    continue;
-                if (abortController.signal.aborted) {
-                    ShowAlert({ message: 'Operazione interrotta', mode: 'warning', title: "Download files", duration: 3000 });
+            for (const item of files) {
+                if (waitPanel.aborted) {
+                    showInterrupted();
                     return;
                 }
-                setWaitPanelTextPrimary(`Download ${item.name}`);
+                if (isBatch)
+                    waitPanel.setSubtitle(`Download ${item.name}`);
                 const ad = item.dataItem.dataItem;
                 const aid = ad?.id;
                 const subFolder = item.parentPath === ad.name ? '' : item.parentPath.replace(ad.name + '/', '');
                 const tms = props.tmSession ?? SDK_Globals.tmSession;
-                const file = await tms?.NewAreaEngine().RetrieveFileAsync(aid, subFolder, item.name, FileFormats.None, abortController.signal, (pd) => {
-                    if (firstBlock) {
-                        maxFileSize = pd.ProgressBarMaximum ?? 0;
-                        setWaitPanelMaxValueSecondary(maxFileSize);
-                        firstBlock = false;
-                    }
-                    setWaitPanelValueSecondary(pd.ProgressBarValue);
-                    setWaitPanelTextSecondary(`Downloading... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(maxFileSize, true)}`);
-                    if (pd.ProgressBarValue === pd.ProgressBarMaximum) {
-                        setWaitPanelMaxValueSecondary(0);
-                        setWaitPanelValueSecondary(0);
-                        setWaitPanelTextSecondary('');
-                        firstBlock = true;
-                    }
-                });
-                setWaitPanelValuePrimary(i + 1);
+                let file;
+                try {
+                    file = await tms?.NewAreaEngine().RetrieveFileAsync(aid, subFolder, item.name, FileFormats.None, waitPanel.signal, (pd) => publishBytes(pd.ProgressBarValue, pd.ProgressBarMaximum ?? 0));
+                }
+                finally {
+                    if (isBatch)
+                        publishBytes(0, 0);
+                }
                 const fileURL = window.URL.createObjectURL(file);
                 const alink2 = document.createElement('a');
                 alink2.href = fileURL;
@@ -475,25 +476,22 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
                 alink2.target = "_blank";
                 alink2.rel = "noreferrer";
                 alink2.click();
-                i++;
+                downloaded++;
+                if (isBatch)
+                    await waitPanel.step();
             }
+            if (files.length > 0)
+                ShowAlert({ mode: 'success', message: SDKUI_Localizator.OperationSuccess, title: "Download", duration: 3000 });
         }
         catch (ex) {
             const err = ex;
-            if (err.name === 'CanceledError') {
-                ShowAlert({ message: err.message, mode: 'warning', duration: 3000, title: 'Abort' });
-            }
+            if (waitPanel.aborted || err.name === 'CanceledError')
+                showInterrupted();
             else
                 TMExceptionBoxManager.show({ exception: ex });
         }
         finally {
-            setWaitPanelTextPrimary('');
-            setWaitPanelMaxValuePrimary(0);
-            setWaitPanelValuePrimary(0);
-            setWaitPanelTextSecondary('');
-            setWaitPanelMaxValueSecondary(0);
-            setWaitPanelValueSecondary(0);
-            setShowWaitPanel(false);
+            waitPanel.close();
         }
     };
     // Asynchronous function to retrieve the items in a given directory (parentDirectory)
@@ -767,7 +765,7 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
         }
     };
     const folderColor = getFileManagerFolderColor(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER);
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(StyledFileManagerWrapper, { $folderColor: folderColor, style: { width: "100%", height: "100%" }, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: `calc(${props.height} - 30px)`, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, customizeThumbnail: customizeIcon, rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, 
+    return (_jsx(TMLayoutContainer, { direction: 'vertical', children: _jsxs(StyledFileManagerWrapper, { $folderColor: folderColor, style: { width: "100%", height: "100%" }, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: `calc(${props.height} - 30px)`, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, customizeThumbnail: customizeIcon, rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, 
                     /* onItemMoved={() => setCounter(counter => counter + 1)}
                     onItemCopied={() => setCounter(counter => counter + 1)}
                     onItemDeleted={() => setCounter(counter => counter - 1)}

package/lib/components/base/TMButton.js

@@ -246,13 +246,15 @@ const TMButton = forwardRef((props, ref) => {
     const [dropdownPos, setDropdownPos] = useState({ left: 0, top: 0, minWidth: 200 });
     const splitContainerRef = useRef(null);
     const dropdownRef = useRef(null);
+    const splitArrowRef = 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))
+            // Il pulsante principale chiude il menu: la sua azione non deve lasciarlo aperto
+            if (splitArrowRef.current?.contains(target) || dropdownRef.current?.contains(target))
                 return;
             setIsDropdownOpen(false);
         };
@@ -301,7 +303,7 @@ const TMButton = forwardRef((props, ref) => {
     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: () => {
+    const renderSplitButton = () => (_jsxs(StyledSplitContainer, { ref: splitContainerRef, children: [buttonWithTooltip, _jsx(StyledSplitArrow, { ref: splitArrowRef, 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);

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 interface IProps {
     icon: ReactNode;
     text: string;
@@ -6,5 +6,5 @@ interface IProps {
 }
 declare const TMCounterBar: ({ items }: {
     items: IProps[];
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TMCounterBar;

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

@@ -1,8 +1,9 @@
-import React from 'react';
+export declare const formatCount: (value: number | string | undefined) => string;
 export declare enum CounterItemKey {
     allItems = "allItems",
     visibleItems = "visibleItems",
-    selectedItems = "selectedItems"
+    selectedItems = "selectedItems",
+    pageSize = "pageSize"
 }
 export interface ITMCounterItemData {
     key?: string;
@@ -20,5 +21,5 @@ export interface ITMCounterContainerProps {
     textColorItem?: string;
     hoverColorItem?: string;
 }
-declare const TMCounterContainer: (props: ITMCounterContainerProps) => React.JSX.Element | undefined;
+declare const TMCounterContainer: (props: ITMCounterContainerProps) => import("react/jsx-runtime").JSX.Element | undefined;
 export default TMCounterContainer;

package/lib/components/base/TMCounterContainer.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import TMTooltip from './TMTooltip';
+import { DeviceType, useDeviceType } from './TMDeviceProvider';
 /* Styled container component that holds all counter items */
 const Container = styled.div `
     background: ${({ bgColor }) => bgColor || 'linear-gradient(to right, #f8f9fa, #e9ecef)'};
@@ -35,6 +36,14 @@ const Counter = styled.div `
         transition: color 0.3s ease-in-out;
     }
 `;
+/* Formatta un conteggio con il separatore delle migliaia della lingua del browser; i valori non numerici restano invariati.
+   useGrouping 'always' forza il separatore anche sotto le 10.000 unità, che in italiano e spagnolo di default non viene messo (2000 invece di 2.000).
+   Il cast serve perché la lib ES2021 tipizza useGrouping solo come boolean. */
+export const formatCount = (value) => {
+    if (value === undefined || value === '' || isNaN(Number(value)))
+        return String(value ?? '');
+    return Number(value).toLocaleString(navigator.language, { useGrouping: 'always' });
+};
 /* Enum for possible counter item keys */
 export var CounterItemKey;
 (function (CounterItemKey) {
@@ -44,15 +53,21 @@ export var CounterItemKey;
     CounterItemKey["visibleItems"] = "visibleItems";
     /* Key for selected item count */
     CounterItemKey["selectedItems"] = "selectedItems";
+    /* Key for rows per page count */
+    CounterItemKey["pageSize"] = "pageSize";
 })(CounterItemKey || (CounterItemKey = {}));
 ;
 ;
 const TMCounterContainer = (props) => {
     const { items, bgColorContainer, hoverColorItem, bgColorItem, textColorItem } = props;
+    // Su mobile lo spazio è poco: le righe per pagina non vengono mostrate
+    const isMobile = useDeviceType() === DeviceType.MOBILE;
     return (items && _jsx(Container, { bgColor: bgColorContainer, children: [...items.values()].map((item) => {
             if (!item.show)
                 return null;
-            return _jsx(TMTooltip, { content: item.caption ?? '', children: _jsxs(Counter, { bgColor: bgColorContainer, color: bgColorItem, hoverColor: hoverColorItem, textColor: textColorItem, children: [item.icon ?? null, _jsx("span", { children: item.value?.toString() ?? '' })] }) }, item.key ?? '');
+            if (isMobile && item.key === CounterItemKey.pageSize)
+                return null;
+            return _jsx(TMTooltip, { content: item.caption ?? '', children: _jsxs(Counter, { bgColor: bgColorContainer, color: bgColorItem, hoverColor: hoverColorItem, textColor: textColorItem, children: [item.icon ?? null, _jsx("span", { children: formatCount(item.value) })] }) }, item.key ?? '');
         }) }));
 };
 export default TMCounterContainer;

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

@@ -7,5 +7,5 @@ type TMCustomButtonProps = {
     selectedItems?: Array<any>;
     onClose?: () => void;
 };
-declare const TMCustomButton: (props: TMCustomButtonProps) => false | import("react").JSX.Element;
+declare const TMCustomButton: (props: TMCustomButtonProps) => false | import("react/jsx-runtime").JSX.Element;
 export default TMCustomButton;