@topconsultnpm/sdkui-react 6.22.0-t1 → 6.22.0-t3

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>, "$padding" | "$isOpen" | "$background" | "$withMenu"> & {
-    $isOpen?: boolean;
-    $padding?: string;
-    $background?: string;
-    $withMenu?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$padding" | "$isOpen" | "$background" | "$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>, "$width" | "$isOpen" | "$mobileHeight"> & {
+}>> & 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>, "$width" | "$isOpen" | "$mobileHeight"> & {
-    $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;
+}>> & string;
 export declare const cellRenderObjectIcon: (icon: any) => React.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"> & {
+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/TMAccordionNew.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 import { LoadIndicator } from 'devextreme-react';
@@ -293,7 +293,7 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
         if (group.badges && group.badges.length > 0) {
             return (_jsx(BadgeContainer, { children: group.badges.map((badgeData, idx) => {
                     const badgeKey = `${group.id}-badge-${badgeData.badge}-${idx}`;
-                    const badge = _jsx(Badge, { "$color": color, children: badgeData.badge });
+                    const badge = _jsx(Badge, { $color: color, children: badgeData.badge });
                     if (badgeData.tooltip) {
                         return (_jsx(TMTooltip, { content: badgeData.tooltip, children: badge }, badgeKey));
                     }
@@ -301,7 +301,7 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
                 }) }));
         }
         if (group.dataSource && group.dataSource.length > 0) {
-            return _jsx(Badge, { "$color": color, children: group.dataSource.length });
+            return _jsx(Badge, { $color: color, children: group.dataSource.length });
         }
         return null;
     };
@@ -309,19 +309,19 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
         const color = getGroupColor(group, index);
         const isOpen = openAccordions[group.id] ?? true;
         if (group.customComponent) {
-            return (_jsxs(AccordionItem, { "$marginBottom": itemMarginBottom, children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
+            return (_jsxs(AccordionItem, { $marginBottom: itemMarginBottom, children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, $color: color, $isOpen: isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { $isOpen: isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
         }
         if (!group.dataSource || group.dataSource.length === 0)
             return null;
         if (!group.renderItem) {
-            return (_jsxs(AccordionItem, { "$marginBottom": itemMarginBottom, children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
+            return (_jsxs(AccordionItem, { $marginBottom: itemMarginBottom, children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, $color: color, $isOpen: isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { $isOpen: isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { $isOpen: isOpen, $maxHeight: 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
         }
         const itemHeight = group.itemHeight || 80;
         const maxHeight = group.dataSource.length * itemHeight + 20;
-        return (_jsxs(AccordionItem, { "$marginBottom": itemMarginBottom, children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
+        return (_jsxs(AccordionItem, { $marginBottom: itemMarginBottom, children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, $color: color, $isOpen: isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { $isOpen: isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { $isOpen: isOpen, $maxHeight: maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
                             const isSelected = selectedItem === item;
                             const isFocused = focusedItem === item;
-                            return (_jsx(ListItem, { id: `accordion-item-${group.id}-${itemIndex}`, className: "tm-accordion-list-item", "$isSelected": isSelected, "$color": color, onClick: () => handleItemClick(item, group), onDoubleClick: () => handleItemDoubleClick(item, group), onMouseEnter: () => setFocusedItem(item), onMouseLeave: () => setFocusedItem(undefined), onContextMenu: (e) => handleContextMenu(e, item, group), children: group.renderItem(item, isSelected, isFocused, color) }, itemIndex * 2));
+                            return (_jsx(ListItem, { id: `accordion-item-${group.id}-${itemIndex}`, className: "tm-accordion-list-item", $isSelected: isSelected, $color: color, onClick: () => handleItemClick(item, group), onDoubleClick: () => handleItemDoubleClick(item, group), onMouseEnter: () => setFocusedItem(item), onMouseLeave: () => setFocusedItem(undefined), onContextMenu: (e) => handleContextMenu(e, item, group), children: group.renderItem(item, isSelected, isFocused, color) }, itemIndex * 2));
                         }) }) })] }, group.id));
     };
     if (!isInitialized) {

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

@@ -13,54 +13,54 @@ interface AlertModes {
 }
 declare const TMAlertPosition: {
     readonly TOP_RIGHT: {
-        readonly top: "10px";
-        readonly right: "10px";
-        readonly position: "absolute";
+        readonly top: '10px';
+        readonly right: '10px';
+        readonly position: 'absolute';
     };
     readonly TOP_CENTER: {
-        readonly top: "10px";
-        readonly left: "50%";
-        readonly transform: "translateX(-50%)";
-        readonly position: "absolute";
+        readonly top: '10px';
+        readonly left: '50%';
+        readonly transform: 'translateX(-50%)';
+        readonly position: 'absolute';
     };
     readonly TOP_LEFT: {
-        readonly top: "10px";
-        readonly left: "10px";
-        readonly position: "absolute";
+        readonly top: '10px';
+        readonly left: '10px';
+        readonly position: 'absolute';
     };
     readonly BOTTOM_RIGHT: {
-        readonly bottom: "10px";
-        readonly right: "10px";
-        readonly position: "absolute";
+        readonly bottom: '10px';
+        readonly right: '10px';
+        readonly position: 'absolute';
     };
     readonly BOTTOM_LEFT: {
-        readonly bottom: "10px";
-        readonly left: "10px";
-        readonly position: "absolute";
+        readonly bottom: '10px';
+        readonly left: '10px';
+        readonly position: 'absolute';
     };
     readonly BOTTOM_CENTER: {
-        readonly bottom: "10px";
-        readonly left: "50%";
-        readonly transform: "translateX(-50%)";
-        readonly position: "absolute";
+        readonly bottom: '10px';
+        readonly left: '50%';
+        readonly transform: 'translateX(-50%)';
+        readonly position: 'absolute';
     };
     readonly CENTER_RIGHT: {
-        readonly top: "50%";
-        readonly right: "10px";
-        readonly transform: "translateY(-50%)";
-        readonly position: "absolute";
+        readonly top: '50%';
+        readonly right: '10px';
+        readonly transform: 'translateY(-50%)';
+        readonly position: 'absolute';
     };
     readonly CENTER_LEFT: {
-        readonly top: "50%";
-        readonly left: "10px";
-        readonly transform: "translateY(-50%)";
-        readonly position: "absolute";
+        readonly top: '50%';
+        readonly left: '10px';
+        readonly transform: 'translateY(-50%)';
+        readonly position: 'absolute';
     };
     readonly CENTER_CENTER: {
-        readonly top: "50%";
-        readonly left: "50%";
-        readonly transform: "translate(-50%, -50%)";
-        readonly position: "absolute";
+        readonly top: '50%';
+        readonly left: '50%';
+        readonly transform: 'translate(-50%, -50%)';
+        readonly position: 'absolute';
     };
 };
 declare const ShowAlert: ({ mode, message, duration, title, position }: {

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)}