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

package/lib/components/NewComponents/ContextMenu/TMContextMenu.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, useRef, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as S from './styles';
@@ -488,7 +488,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                     rightIconClickHandler = handleRightIconPropsClick;
                 }
             }
-            return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, "data-disabled": item.disabled ? "true" : undefined, onMouseDown: handleClick, onMouseEnter: (e) => !isMobile && handleMouseEnter(item, e, depth + 1), onMouseLeave: () => !isMobile && handleMouseLeave(depth + 1), title: item.tooltip, children: [_jsxs(S.MenuItemContent, { children: [item.icon && _jsx(S.IconWrapper, { children: item.icon }), _jsx(S.MenuItemName, { children: item.name })] }), rightIconElement && rightIconClickHandler ? (_jsx(S.RightIconButton, { onClick: rightIconClickHandler, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: rightIconElement })) : rightIconElement ? (_jsx(S.IconWrapper, { children: rightIconElement })) : null, item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { "$isMobile": isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
+            return (_jsxs(S.MenuItem, { $disabled: item.disabled, $hasSubmenu: !!item.submenu && item.submenu.length > 0, $beginGroup: item.beginGroup, "data-disabled": item.disabled ? "true" : undefined, onMouseDown: handleClick, onMouseEnter: (e) => !isMobile && handleMouseEnter(item, e, depth + 1), onMouseLeave: () => !isMobile && handleMouseLeave(depth + 1), title: item.tooltip, children: [_jsxs(S.MenuItemContent, { children: [item.icon && _jsx(S.IconWrapper, { children: item.icon }), _jsx(S.MenuItemName, { children: item.name })] }), rightIconElement && rightIconClickHandler ? (_jsx(S.RightIconButton, { onClick: rightIconClickHandler, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: rightIconElement })) : rightIconElement ? (_jsx(S.IconWrapper, { children: rightIconElement })) : null, item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { $isMobile: isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
         });
     };
     const currentParentName = menuState.parentNames[menuState.parentNames.length - 1] || '';
@@ -500,6 +500,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                     // display: 'inline-block',
                     WebkitTouchCallout: isIOS ? 'none' : undefined,
                     WebkitUserSelect: isIOS ? 'none' : undefined,
-                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, className: "notranslate", translate: "no", "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { className: "notranslate", translate: "no", "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", "data-open-up": submenu.openUp ? 'true' : 'false', onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
+                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, className: "notranslate", translate: "no", $x: menuState.position.x, $y: menuState.position.y, $openLeft: openLeft, $openUp: openUp, $isPositioned: isCalculated, $externalControl: !!externalControl, $needsScroll: needsScroll, $maxHeight: maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { className: "notranslate", translate: "no", $parentRect: submenu.parentRect, $openUp: submenu.openUp, "data-submenu": "true", "data-open-up": submenu.openUp ? 'true' : 'false', onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
 };
 export default TMContextMenu;

package/lib/components/NewComponents/ContextMenu/hooks.d.ts

@@ -6,11 +6,11 @@ interface Position {
     y: number;
 }
 export declare const useMenuPosition: (menuRef: React.RefObject<HTMLDivElement | null>, position: Position, itemsCount?: number) => {
-    isCalculated: boolean;
     openLeft: boolean;
     openUp: boolean;
     needsScroll: boolean;
     maxHeight: number | undefined;
+    isCalculated: boolean;
 };
 export declare const getContextMenuTarget: <T extends {
     id: string;

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

@@ -837,13 +837,13 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         setState(s => ({ ...s, draggedItemIndex: null }));
         setDragOverIndex(null);
     };
-    return (_jsxs(S.FloatingContainer, { ref: floatingRef, className: "notranslate", translate: "no", "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$verticalDirection": state.verticalDirection, "$isDragging": state.isDragging, "$isConfigMode": false, "$isConstrained": isConstrained, "$isHidden": isOrientationChanging, "$bgColor": bgColor, onContextMenu: undefined, children: [_jsx(ContextMenu, { items: [
+    return (_jsxs(S.FloatingContainer, { ref: floatingRef, className: "notranslate", translate: "no", $x: pixelPosition.x, $y: pixelPosition.y, $orientation: state.orientation, $verticalDirection: state.verticalDirection, $isDragging: state.isDragging, $isConfigMode: false, $isConstrained: isConstrained, $isHidden: isOrientationChanging, $bgColor: bgColor, onContextMenu: undefined, children: [_jsx(ContextMenu, { items: [
                     {
                         name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
                         icon: _jsx(IconRotate, { fontSize: 16, style: { transform: state.orientation === 'horizontal' ? 'rotate(90deg)' : 'rotate(0deg)' } }),
                         onClick: toggleOrientation,
                     },
-                ], trigger: "right", children: _jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) }) }), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
+                ], trigger: "right", children: _jsx(S.GripHandle, { $orientation: state.orientation, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) }) }), _jsx(S.Separator, { $orientation: state.orientation }), state.items.map((item, index) => {
                 // Check visibility for non-separator items
                 if (!item.isSeparator) {
                     const currentState = getCurrentItemState(item.id);
@@ -854,7 +854,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 }
                 // Handle separator items
                 if (item.isSeparator) {
-                    return (_jsx(S.DraggableItem, { "$isDragging": state.draggedItemIndex === index, "$isDragOver": dragOverIndex === index && state.draggedItemIndex !== index, draggable: enableConfigMode, onDragStart: (e) => handleDragStart(e, index), onDragEnter: (e) => handleDragEnter(e, index), onDragOver: handleDragOver, onDragLeave: (e) => handleDragLeave(e, index), onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, children: enableConfigMode ? (_jsx(ContextMenu, { items: getSeparatorRightClickMenuItems(index), trigger: "right", children: _jsx(S.ItemSeparator, { "$orientation": state.orientation, "$isConfigMode": false }) })) : (_jsx(S.ItemSeparator, { "$orientation": state.orientation, "$isConfigMode": false })) }, item.id));
+                    return (_jsx(S.DraggableItem, { $isDragging: state.draggedItemIndex === index, $isDragOver: dragOverIndex === index && state.draggedItemIndex !== index, draggable: enableConfigMode, onDragStart: (e) => handleDragStart(e, index), onDragEnter: (e) => handleDragEnter(e, index), onDragOver: handleDragOver, onDragLeave: (e) => handleDragLeave(e, index), onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, children: enableConfigMode ? (_jsx(ContextMenu, { items: getSeparatorRightClickMenuItems(index), trigger: "right", children: _jsx(S.ItemSeparator, { $orientation: state.orientation, $isConfigMode: false }) })) : (_jsx(S.ItemSeparator, { $orientation: state.orientation, $isConfigMode: false })) }, item.id));
                 }
                 // Get current state (disabled and onClick) from contextMenuItems
                 const currentState = getCurrentItemState(item.id);
@@ -863,19 +863,19 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                     ? currentState.disabled === true
                     : item.disabled === true;
                 const currentOnClick = currentState.onClick || item.onClick; // Fallback to stored onClick if not found
-                return (_jsx(S.DraggableItem, { "$isDragging": state.draggedItemIndex === index, "$isDragOver": dragOverIndex === index && state.draggedItemIndex !== index, draggable: enableConfigMode, onDragStart: (e) => handleDragStart(e, index), onDragEnter: (e) => handleDragEnter(e, index), onDragOver: handleDragOver, onDragLeave: (e) => handleDragLeave(e, index), onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, children: enableConfigMode ? (_jsx(ContextMenu, { items: getItemRightClickMenuItems(item, index), trigger: "right", children: item.staticItem ? (_jsx("div", { children: item.staticItem })) : (_jsx(TMTooltip, { content: item.name, position: "bottom", children: _jsx(S.MenuButton, { onClick: () => {
+                return (_jsx(S.DraggableItem, { $isDragging: state.draggedItemIndex === index, $isDragOver: dragOverIndex === index && state.draggedItemIndex !== index, draggable: enableConfigMode, onDragStart: (e) => handleDragStart(e, index), onDragEnter: (e) => handleDragEnter(e, index), onDragOver: handleDragOver, onDragLeave: (e) => handleDragLeave(e, index), onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, children: enableConfigMode ? (_jsx(ContextMenu, { items: getItemRightClickMenuItems(item, index), trigger: "right", children: item.staticItem ? (_jsx("div", { children: item.staticItem })) : (_jsx(TMTooltip, { content: item.name, position: "bottom", children: _jsx(S.MenuButton, { onClick: () => {
                                     if (isDisabled)
                                         return;
                                     if (currentOnClick) {
                                         currentOnClick();
                                     }
-                                }, disabled: isDisabled, "$isActive": item.isToggle, children: item.icon }) })) })) : (item.staticItem ? (_jsx("div", { children: item.staticItem })) : (_jsx(TMTooltip, { content: item.name, position: "bottom", children: _jsx(S.MenuButton, { onClick: () => {
+                                }, disabled: isDisabled, $isActive: item.isToggle, children: item.icon }) })) })) : (item.staticItem ? (_jsx("div", { children: item.staticItem })) : (_jsx(TMTooltip, { content: item.name, position: "bottom", children: _jsx(S.MenuButton, { onClick: () => {
                                 if (isDisabled)
                                     return;
                                 if (currentOnClick) {
                                     currentOnClick();
                                 }
-                            }, disabled: isDisabled, "$isActive": item.isToggle, children: item.icon }) }))) }, item.id));
+                            }, disabled: isDisabled, $isActive: item.isToggle, children: item.icon }) }))) }, item.id));
             }), enableConfigMode && hasContextMenu && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getContextMenuItemsWithPinIcons(), trigger: "left", keepOpenOnClick: false, children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) }))] }));
 };
 export default TMFloatingMenuBar;

package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts

@@ -8,8 +8,8 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
 }, {
     $x: number;
     $y: number;
-    $orientation: "horizontal" | "vertical";
-    $verticalDirection: "down" | "up";
+    $orientation: 'horizontal' | 'vertical';
+    $verticalDirection: 'down' | 'up';
     $isDragging: boolean;
     $isConfigMode: boolean;
     $isConstrained?: boolean;
@@ -18,20 +18,20 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
 }>, {
     $x: number;
     $y: number;
-    $orientation: "horizontal" | "vertical";
-    $verticalDirection: "down" | "up";
+    $orientation: 'horizontal' | 'vertical';
+    $verticalDirection: 'down' | 'up';
     $isDragging: boolean;
     $isConfigMode: boolean;
     $isConstrained?: boolean;
     $isHidden?: boolean;
     $bgColor?: string;
-}>, "children" | "ref" | "title" | "accessKey" | "tabIndex" | "content" | "id" | "style" | "hidden" | "color" | "onMouseEnter" | "onMouseLeave" | "onTouchStart" | "onClick" | "onTouchEnd" | "suppressHydrationWarning" | "className" | "lang" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "$bgColor" | "$x" | "$y" | "$isDragging" | "$orientation" | "$verticalDirection" | "$isConfigMode" | "$isConstrained" | "$isHidden"> & Partial<Pick<import("styled-components/dist/types").Merged<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+}>, "$bgColor" | "$isConfigMode" | "$isConstrained" | "$isDragging" | "$isHidden" | "$orientation" | "$verticalDirection" | "$x" | "$y" | "about" | "accessKey" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "children" | "className" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "draggable" | "enterKeyHint" | "exportparts" | "hidden" | "id" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "part" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "title" | "translate" | "typeof" | "unselectable" | "vocab"> & Partial<Pick<import("styled-components/dist/types").Merged<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
     $x: number;
     $y: number;
-    $orientation: "horizontal" | "vertical";
-    $verticalDirection: "down" | "up";
+    $orientation: 'horizontal' | 'vertical';
+    $verticalDirection: 'down' | 'up';
     $isDragging: boolean;
     $isConfigMode: boolean;
     $isConstrained?: boolean;
@@ -40,28 +40,28 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
 }>, {
     $x: number;
     $y: number;
-    $orientation: "horizontal" | "vertical";
-    $verticalDirection: "down" | "up";
+    $orientation: 'horizontal' | 'vertical';
+    $verticalDirection: 'down' | 'up';
     $isDragging: boolean;
     $isConfigMode: boolean;
     $isConstrained?: boolean;
     $isHidden?: boolean;
     $bgColor?: string;
-}>, "children" | "ref" | "title" | "accessKey" | "tabIndex" | "content" | "id" | "style" | "hidden" | "color" | "onMouseEnter" | "onMouseLeave" | "onTouchStart" | "onClick" | "onTouchEnd" | "suppressHydrationWarning" | "className" | "lang" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "$bgColor" | "$x" | "$y" | "$isDragging" | "$orientation" | "$verticalDirection" | "$isConfigMode" | "$isConstrained" | "$isHidden">>> & string;
+}>, "$bgColor" | "$isConfigMode" | "$isConstrained" | "$isDragging" | "$isHidden" | "$orientation" | "$verticalDirection" | "$x" | "$y" | "about" | "accessKey" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "children" | "className" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "draggable" | "enterKeyHint" | "exportparts" | "hidden" | "id" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "part" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "title" | "translate" | "typeof" | "unselectable" | "vocab">>> & string;
 export declare const GripHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
-    $orientation: "horizontal" | "vertical";
+    $orientation: 'horizontal' | 'vertical';
 }>> & string;
 export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
-    $orientation: "horizontal" | "vertical";
+    $orientation: 'horizontal' | 'vertical';
 }>> & string;
 export declare const ItemSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
-    $orientation: "horizontal" | "vertical";
+    $orientation: 'horizontal' | 'vertical';
     $isConfigMode: boolean;
 }>> & string;
 export declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
@@ -86,7 +86,7 @@ export declare const ContextMenuButton: import("styled-components/dist/types").I
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+    ref?: import("react").RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
         [key: `--${string}`]: string | number | undefined;
@@ -113,5 +113,5 @@ export declare const ContextMenuWrapper: import("styled-components/dist/types").
 export declare const ButtonGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
-    $orientation: "horizontal" | "vertical";
+    $orientation: 'horizontal' | 'vertical';
 }>> & 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;