@topconsultnpm/sdkui-react 6.22.0-dev3.3 → 6.22.0-dev3.31

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

@@ -1,102 +1,118 @@
 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", 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"> & {
+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;
+}, {
     $isVisible: boolean;
-}, 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"> & {
+}>> & 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;
+}, {
     $bgColor?: string;
-}, 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"> & {
+}>> & 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;
+}, {
     $isOpen?: boolean;
     $padding?: string;
     $background?: string;
     $withMenu?: boolean;
-}, 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"> & {
+}>> & 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;
+}, {
     $disabled?: boolean;
-}, 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"> & {
+}>> & 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;
+}, {
     $isOpen: boolean;
     $width?: string;
     $mobileHeight?: string;
-}, 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"> & {
+}>> & 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;
+}, {
     $isOpen: boolean;
-}, 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"> & {
+}>> & 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;
+}, {
     $resultType: ResultTypes;
-}, 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"> & {
+}>> & 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;
+}, {
     $color?: TMColors;
     $fontSize?: string;
     $marginTop?: string;
-}, 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"> & {
+}>> & 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;
+}, {
     $backgroundColor: string;
-}, 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"> & {
+}>> & 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;
+}, {
     $backgroundColor?: string;
-}, 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"> & {
+}>> & 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;
+}, {
     $backgroundColor?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor"> & {
+}>> & 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;
+}, {
     $backgroundColor?: string;
-}, 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"> & {
+}>> & 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;
+}, {
     $delay?: string;
     $scale?: number;
-}, 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"> & {
+}>> & 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;
+}, {
     $delay?: string;
-}, never>>> & string;
+}>> & string;

package/lib/components/base/Styled.js

@@ -87,11 +87,13 @@ export const StyledReferenceButton = styled.button `
 export const StyledPanelPage = styled.div ` 
   position: absolute; 
   width: calc(100% - 50px); 
-  top: ${(props) => props.$isOpen ? '50px' : '-9999px'}; 
-  left: ${(props) => props.$isOpen ? '50px' : '-9999px'}; 
-  visibility: ${(props) => props.$isOpen ? 'visible' : 'hidden'}; 
-  bottom: 0; 
-  border-radius: 0px; 
+  top: 50px;
+  left: 50px;
+  bottom: ${(props) => props.$isOpen ? '0' : 'auto'};
+  height: ${(props) => props.$isOpen ? 'auto' : '0'};
+  visibility: ${(props) => props.$isOpen ? 'visible' : 'hidden'};
+  content-visibility: ${(props) => props.$isOpen ? 'visible' : 'hidden'};
+  border-radius: 0px;
   background: ${(props) => props.$background ?? 'transparent'}; 
   z-index: 1500; 
   overflow: hidden;

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/TMCounterBar.d.ts

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

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

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare enum CounterItemKey {
     allItems = "allItems",
     visibleItems = "visibleItems",
@@ -19,5 +20,5 @@ export interface ITMCounterContainerProps {
     textColorItem?: string;
     hoverColorItem?: string;
 }
-declare const TMCounterContainer: (props: ITMCounterContainerProps) => import("react/jsx-runtime").JSX.Element | undefined;
+declare const TMCounterContainer: (props: ITMCounterContainerProps) => React.JSX.Element | undefined;
 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-runtime").JSX.Element;
+declare const TMCustomButton: (props: TMCustomButtonProps) => false | import("react").JSX.Element;
 export default TMCustomButton;