@topconsultnpm/sdkui-react 6.20.0-dev1.13 → 6.20.0-dev1.131

package/lib/components/NewComponents/Notification/NotificationContainer.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-const Container = styled.div `
-  position: fixed;
-  z-index: 10002;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  pointer-events: none;
-
-  ${props => {
-    const isTop = props.$position.startsWith('top');
-    const isBottom = props.$position.startsWith('bottom');
-    const isLeft = props.$position.endsWith('left');
-    const isRight = props.$position.endsWith('right');
-    const isCenter = props.$position.endsWith('center');
-    return `
-      ${isTop ? 'top: 24px;' : ''}
-      ${isBottom ? 'bottom: 24px;' : ''}
-      ${isLeft ? 'left: 24px;' : ''}
-      ${isRight ? 'right: 24px;' : ''}
-      ${isCenter ? 'left: 50%; transform: translateX(-50%);' : ''}
-    `;
-}}
-
-  & > * {
-    pointer-events: auto;
-  }
-`;
-const NotificationContainer = ({ position, children }) => {
-    return _jsx(Container, { "$position": position, children: children });
-};
-export default NotificationContainer;

package/lib/components/NewComponents/Notification/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './Notification';
-export * from './types';

package/lib/components/NewComponents/Notification/index.js

@@ -1,2 +0,0 @@
-export { default } from './Notification';
-export * from './types';

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

@@ -1,21 +0,0 @@
-import type { NotificationMode, NotificationPosition } from './types';
-export declare const NotificationContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $position: NotificationPosition;
-    $mode: NotificationMode;
-    $visible: boolean;
-}>> & string;
-export declare const NotificationContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NotificationTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NotificationMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const ProgressBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | 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<HTMLDivElement> | null | undefined;
-}>, {
-    $duration: number;
-    $mode: NotificationMode;
-    $isPaused: boolean;
-}>, {
-    $duration: number;
-    $mode: NotificationMode;
-    $isPaused: boolean;
-}>> & string;

package/lib/components/NewComponents/Notification/styles.js

@@ -1,180 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-const slideInFromTop = keyframes `
-  from {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-const slideInFromBottom = keyframes `
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-const slideOut = keyframes `
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-`;
-const getModeColors = (mode) => {
-    const colors = {
-        success: {
-            bg: '#10b981',
-            bgDark: '#059669',
-            border: '#34d399',
-            text: '#ffffff',
-        },
-        error: {
-            bg: '#ef4444',
-            bgDark: '#dc2626',
-            border: '#f87171',
-            text: '#ffffff',
-        },
-        warning: {
-            bg: '#f59e0b',
-            bgDark: '#d97706',
-            border: '#fbbf24',
-            text: '#ffffff',
-        },
-        info: {
-            bg: '#3b82f6',
-            bgDark: '#2563eb',
-            border: '#60a5fa',
-            text: '#ffffff',
-        },
-    };
-    return colors[mode];
-};
-export const NotificationContainer = styled.div `
-  position: relative;
-  z-index: 1;
-  min-width: 320px;
-  max-width: 420px;
-  background: ${props => getModeColors(props.$mode).bg};
-  border-radius: 12px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2),
-              0 4px 12px rgba(0, 0, 0, 0.15);
-  padding: 16px 20px;
-  animation: ${props => {
-    if (!props.$visible)
-        return slideOut;
-    return props.$position.startsWith('top') ? slideInFromTop : slideInFromBottom;
-}} 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  backdrop-filter: blur(10px);
-  border: 2px solid ${props => getModeColors(props.$mode).border};
-  color: ${props => getModeColors(props.$mode).text};
-  overflow: hidden;
-
-  [data-theme='dark'] & {
-    background: ${props => getModeColors(props.$mode).bgDark};
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
-                0 4px 12px rgba(0, 0, 0, 0.3);
-  }
-
-  @media (max-width: 768px) {
-    min-width: 280px;
-    max-width: calc(100vw - 48px);
-  }
-`;
-export const NotificationContent = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding-right: 24px;
-`;
-export const NotificationTitle = styled.div `
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.4;
-  letter-spacing: -0.01em;
-`;
-export const NotificationMessage = styled.div `
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5;
-  opacity: 0.95;
-`;
-export const CloseButton = styled.button `
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  background: transparent;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  transition: all 0.15s ease;
-  font-size: 18px;
-  line-height: 1;
-  padding: 0;
-  opacity: 0.8;
-
-  &:hover {
-    opacity: 1;
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-
-  &:focus {
-    outline: 2px solid rgba(255, 255, 255, 0.5);
-    outline-offset: 2px;
-  }
-`;
-export const ProgressBar = styled.div.attrs(props => ({
-    style: {
-        animationDuration: `${props.$duration}ms`,
-    },
-})) `
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 4px;
-  width: 100%;
-  background: ${props => getModeColors(props.$mode).border};
-  border-radius: 0 0 0 10px;
-  box-shadow: 0 0 8px ${props => getModeColors(props.$mode).border};
-  transform-origin: left;
-  animation: progress-shrink linear forwards;
-  animation-play-state: ${props => props.$isPaused ? 'paused' : 'running'};
-
-  @keyframes progress-shrink {
-    from {
-      transform: scaleX(1);
-    }
-    to {
-      transform: scaleX(0);
-    }
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 20px;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
-  }
-`;

package/lib/components/NewComponents/Notification/types.d.ts

@@ -1,18 +0,0 @@
-export type NotificationMode = 'warning' | 'info' | 'error' | 'success';
-export type NotificationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export interface NotificationProps {
-    title: string;
-    message: string;
-    mode?: NotificationMode;
-    position?: NotificationPosition;
-    duration?: number;
-    closable?: boolean;
-    stopOnMouseEnter?: boolean;
-    hasProgress?: boolean;
-    onClose?: () => void;
-}
-export interface NotificationState {
-    visible: boolean;
-    isPaused: boolean;
-    progress: number;
-}

package/lib/components/NewComponents/Notification/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,25 +0,0 @@
-import React, { ReactNode } from 'react';
-export interface ITMContextMenuItemProps {
-    icon?: ReactNode;
-    text?: any;
-    items?: ITMContextMenuItemProps[];
-    disabled?: boolean;
-    isSelected?: boolean;
-    id?: string;
-    onItemClick?: () => void;
-    onItemMouseOver?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-}
-export interface ITMContextMenuProps {
-    items?: ITMContextMenuItemProps[];
-    coords?: {
-        x: number;
-        y: number;
-    };
-    subMenuDir?: 'left' | 'right';
-}
-declare const TMContextMenu: ({ items, coords, subMenuDir, }: ITMContextMenuProps) => import("react/jsx-runtime").JSX.Element;
-export declare const useTMContextMenu: (ref: React.RefObject<HTMLElement>) => (boolean | {
-    x: number;
-    y: number;
-})[];
-export default TMContextMenu;

package/lib/components/base/TMContextMenu.js

@@ -1,109 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { IconRight } from '../../helper/TMIcons';
-const StyledContextMenuContainer = styled.div `
-    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; z-index: 300; position: fixed; top: ${props => `${props.$top}px`}; left: ${props => `${props.$left}px`}; right: ${props => `${props.$right}px`}; bottom: ${props => `${props.$bottom}px`}; width: max-content; height: max-content; background-color: white; box-shadow: 1px 1px 2px #00000040;
-`;
-const StyledContextMenuItem = styled.div `
-    cursor: ${props => !props.$disabled ? 'pointer' : 'default'}; display: flex; align-items: center; gap: 5px; transition: ease 100ms; padding: 5px; background-color: ${props => props.$isSelected && '#e9e9e9'}; width: 100%; height: 100%; color: ${props => props.$disabled && '#d0d0d0'}; &:hover { background-color: ${props => !props.$disabled && '#e9e9e9'} ; }
-`;
-const TMContextMenu = ({ items = [], coords = { x: 0, y: 0 }, subMenuDir = 'right', }) => {
-    // Coordinates for sub-menus
-    const [subMenuCoords, setSubMenuCoords] = useState({ x: 0, y: 0 });
-    // Track which item is currently hovered
-    const [hoveredItem, setHoveredItem] = useState(null);
-    // Size of the menu
-    const [menuSize, setMenuSize] = useState({ x: 0, y: 0 });
-    // Current direction for submenus
-    const [currentSubMenuDir, setCurrentSubMenuDir] = useState(subMenuDir);
-    // Reference to the context menu DOM element
-    const contextMenuRef = useRef(null);
-    // Uupdate submenu direction based on incoming props
-    useEffect(() => setCurrentSubMenuDir(subMenuDir), [subMenuDir]);
-    // Calculate the size of the context menu and adjust submenu direction
-    // Run this effect only once when the component mounts
-    useEffect(() => {
-        if (contextMenuRef.current) {
-            setMenuSize({
-                x: contextMenuRef.current.getBoundingClientRect().width || 0,
-                y: contextMenuRef.current.getBoundingClientRect().height || 0,
-            });
-        }
-    }, []);
-    useEffect(() => {
-        // This effect checks the width on resize
-        const handleResize = () => {
-            if (window.innerWidth <= coords.x + menuSize.x) {
-                // Change direction to left if menu goes beyond right edge
-                setCurrentSubMenuDir('left');
-            }
-            else {
-                // Default to right if there's space
-                setCurrentSubMenuDir('right');
-            }
-        };
-        // Attach event listener
-        window.addEventListener('resize', handleResize);
-        handleResize(); // Call it initially to set the direction
-        // Clean up the event listener on unmount
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [coords, menuSize.x]); // Only watch coords and the width of menuSize
-    // Handle mouse over event on items to potentially show submenus
-    const onItemMouseOver = (item, index) => {
-        if (!item.disabled && item.items && item.items.length > 0) {
-            setHoveredItem(index);
-            const boundingRect = contextMenuRef.current?.getBoundingClientRect();
-            if (boundingRect) {
-                // Calculate the sub-menu position based on the current item position
-                const subMenuX = currentSubMenuDir === 'right' ? boundingRect.right : boundingRect.left - menuSize.x;
-                const subMenuY = boundingRect.top + index * 30; // Adjust Y coordinate to match item
-                setSubMenuCoords({ x: subMenuX, y: subMenuY });
-            }
-        }
-        else {
-            // Clear hover state if the item has no sub-menu
-            setHoveredItem(null); // If no submenu, clear hover state
-        }
-    };
-    return (_jsx(StyledContextMenuContainer, { ref: contextMenuRef, "$left": currentSubMenuDir === 'right' ? coords.x : 'none', "$top": window.innerHeight > coords.y + menuSize.y ? coords.y : 'none', "$right": currentSubMenuDir === 'left' ? window.innerWidth - coords.x : 'none', "$bottom": window.innerHeight <= coords.y + menuSize.y ? window.innerHeight - coords.y : 'none', children: items.map((item, index) => (_jsxs("div", { style: { width: '100%' }, children: [_jsxs(StyledContextMenuItem, { id: item.id, onMouseOver: () => onItemMouseOver(item, index), onMouseEnter: () => onItemMouseOver(item, index), "$isSelected": item.isSelected, "$disabled": item.disabled, onClick: () => !item.disabled && item.onItemClick && item.onItemClick(), children: [_jsx("div", { style: { transform: 'translateY(3px)' }, children: item.icon }), _jsx("div", { style: { width: '100%' }, children: item.items && item.items.length > 0 ? (_jsxs("div", { style: {
-                                    width: '100%',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: 5,
-                                    justifyContent: 'space-between',
-                                }, children: [item.text, " ", _jsx(IconRight, { style: { transform: 'translateY(1px)' }, fontSize: 10 })] })) : (_jsx("div", { style: { width: '100%' }, children: item.text })) })] }), item.items && item.items.length > 0 && hoveredItem === index && (_jsx(TMContextMenu, { subMenuDir: currentSubMenuDir, coords: subMenuCoords, items: item.items }))] }, index))) }));
-};
-export const useTMContextMenu = (ref) => {
-    // Coordinates for the context menu
-    const [coords, setCoords] = useState({ x: 0, y: 0 });
-    // State to control visibility of the context menu
-    const [showContextMenu, setShowContexMenu] = useState(false);
-    // Effect to hide context menu when clicking outside of the referenced element
-    useEffect(() => {
-        const menu = ref.current;
-        const deSelectAll = (e) => { if (menu && !menu.contains(e.target)) {
-            setShowContexMenu(false);
-        } };
-        window.addEventListener('contextmenu', deSelectAll);
-        return () => { window.removeEventListener('contextmenu', deSelectAll); };
-    }, []);
-    // Effect to hide context menu on left-click anywhere
-    useEffect(() => {
-        const handleClick = () => { setShowContexMenu(false); };
-        window.addEventListener("click", handleClick);
-        return () => { window.removeEventListener("click", handleClick); };
-    }, []);
-    // Effect to show context menu on right-click and prevent default context menu
-    useEffect(() => {
-        let menu = ref.current;
-        if (menu) {
-            menu?.addEventListener('contextmenu', (e) => { e.preventDefault(); setShowContexMenu(true); setCoords({ x: e.pageX, y: e.pageY }); });
-        }
-        return () => menu?.removeEventListener('contextmenu', (e) => { setCoords({ x: e.pageX, y: e.pageY }); });
-    }, [ref]);
-    return [coords, showContextMenu];
-};
-export default TMContextMenu;

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

@@ -1,26 +0,0 @@
-import React from 'react';
-export declare const useContextMenu: () => {
-    clicked: boolean;
-    setClicked: React.Dispatch<React.SetStateAction<boolean>>;
-    points: {
-        x: number;
-        y: number;
-    };
-    setPoints: React.Dispatch<React.SetStateAction<{
-        x: number;
-        y: number;
-    }>>;
-};
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $top: number;
-    $left: number;
-}>> & string;
-export declare const MenuOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-interface ITMContextMenu {
-    menuData: any[];
-    onMenuItemClick?: (item: string) => void;
-    top: number;
-    left: number;
-}
-declare const TMContextMenuOLD: React.FunctionComponent<ITMContextMenu>;
-export default TMContextMenuOLD;

package/lib/components/base/TMContextMenuOLD.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Colors, FontSize } from '../../utils/theme';
-// #region Hook useContextMenu
-export const useContextMenu = () => {
-    // boolean value to determine if the user has right clicked
-    const [clicked, setClicked] = useState(false);
-    // allows us to track the x,y coordinates of the users right click
-    const [points, setPoints] = useState({ x: 0, y: 0 });
-    useEffect(() => {
-        // reset clicked to false on user click
-        const handleClick = () => {
-            setClicked(false);
-        };
-        // add listener for user click
-        document.addEventListener("click", handleClick);
-        // clean up listener function to avoid memory leaks
-        return () => {
-            document.removeEventListener("click", handleClick);
-        };
-    }, []);
-    return { clicked, setClicked, points, setPoints };
-};
-// #endregion
-export const Container = styled.div `
-    position: absolute;
-    padding: 5px 5px;
-    background-color: white;
-    width: max-content;
-    height: max-content;
-    border-radius: 2px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    box-shadow: 2px 2px 10px #00000030;
-    z-index: 2;
-    top: ${(props) => props.$top || 0}px;
-    left: ${(props) => props.$left || 0}px;
-`;
-export const MenuOption = styled.div `
-    width: 100%;
-    height: 20px;
-    padding: 3px;
-    cursor: pointer;
-    font-size: ${FontSize.defaultFontSize};
-    
-    &:hover {
-        color: ${Colors.primary};
-    }
-`;
-const TMContextMenuOLD = ({ menuData, top, left, onMenuItemClick }) => {
-    return (_jsx(_Fragment, { children: _jsx(Container, { "$top": top, "$left": left, children: menuData.map((item, index) => (_jsx(MenuOption, { onClick: (e) => onMenuItemClick?.(e.target.innerText), children: item.text }, index))) }) }));
-};
-export default TMContextMenuOLD;

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

@@ -1,9 +0,0 @@
-import React from 'react';
-interface ITMFloatingToolbarProps {
-    children: React.ReactNode;
-    backgroundColor: string | undefined;
-    initialLeft?: string;
-    initialTop?: string;
-}
-declare const TMFloatingToolbar: ({ children, backgroundColor, initialLeft, initialTop }: ITMFloatingToolbarProps) => import("react/jsx-runtime").JSX.Element;
-export default TMFloatingToolbar;

package/lib/components/base/TMFloatingToolbar.js

@@ -1,101 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { IconDraggabledots } from '../../helper/TMIcons';
-const StyledFloatingToolbarContainer = styled.div `
-    position: absolute;
-    width: max-content;
-    height: max-content;
-    display: flex;
-    flex-direction: row;
-    background-color: ${props => `${props.$backgroundColor}a6`};
-    left: calc(50% - 90px);
-    top: calc(100% - 40px);
-    border-radius: 8px;
-    z-index: 10;
-    &:hover {
-        background: ${props => props.$backgroundColor};
-    }
-`;
-const StyledFloatingToolbarDraggable = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 25px;
-    height: 100%;
-    background-color: ${props => `${props.$backgroundColor}FF`};
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-    padding: 10px 0px 10px 0px;
-    &:hover {
-        cursor: grab;
-    }
-`;
-const StyledFloatingToolbar = styled.div `
-    width: max-content;
-    display: flex;
-    flex-direction: row;
-    padding: 10px 10px 10px 20px; 
-    gap: 8px; 
-    border-radius: 8px;
-`;
-const TMFloatingToolbar = ({ children, backgroundColor, initialLeft, initialTop }) => {
-    const boxRef = useRef(null);
-    const boxDraggableRef = useRef(null);
-    const isClicked = useRef(false);
-    const coords = useRef({
-        startX: 0,
-        startY: 0,
-        lastX: 0,
-        lastY: 0
-    });
-    useEffect(() => {
-        if (!boxRef.current)
-            return;
-        if (!boxDraggableRef.current)
-            return;
-        let container = boxRef.current?.parentElement;
-        if (!container)
-            return;
-        const box = boxRef.current;
-        box.style.top = initialTop ?? `0px`;
-        box.style.left = initialLeft ?? `0px`;
-        const onMouseDown = (e) => {
-            isClicked.current = true;
-            coords.current.startX = e.clientX;
-            coords.current.startY = e.clientY;
-            coords.current.lastX = box.offsetLeft;
-            coords.current.lastY = box.offsetTop;
-        };
-        const onMouseUp = (e) => {
-            isClicked.current = false;
-            coords.current.lastX = box.offsetLeft;
-            coords.current.lastY = box.offsetTop;
-        };
-        const onMouseMove = (e) => {
-            if (!isClicked.current)
-                return;
-            const nextX = e.clientX - coords.current.startX + coords.current.lastX;
-            const nextY = e.clientY - coords.current.startY + coords.current.lastY;
-            const screenWidth = container.getBoundingClientRect().width;
-            const screenHeight = container.getBoundingClientRect().height;
-            const boundedX = Math.max(0, Math.min(screenWidth - box.getBoundingClientRect().width, nextX));
-            const boundedY = Math.max(0, Math.min(screenHeight - box.getBoundingClientRect().height, nextY));
-            box.style.top = `${boundedY}px`;
-            box.style.left = `${boundedX}px`;
-        };
-        boxDraggableRef.current?.addEventListener('mousedown', onMouseDown);
-        window.addEventListener('mouseup', onMouseUp);
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseleave', onMouseUp);
-        const cleanup = () => {
-            boxDraggableRef.current?.removeEventListener('mousedown', onMouseDown);
-            window.removeEventListener('mouseup', onMouseUp);
-            window.removeEventListener('mousemove', onMouseMove);
-            window.removeEventListener('mouseleave', onMouseUp);
-        };
-        return cleanup;
-    }, [initialLeft, initialTop]);
-    return (_jsxs(StyledFloatingToolbarContainer, { ref: boxRef, "$backgroundColor": backgroundColor, children: [_jsx(StyledFloatingToolbarDraggable, { ref: boxDraggableRef, "$backgroundColor": backgroundColor, children: _jsx(IconDraggabledots, { color: 'white' }) }), _jsx(StyledFloatingToolbar, { "$backgroundColor": backgroundColor, children: children })] }));
-};
-export default TMFloatingToolbar;

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import { DeviceType } from '../../base/TMDeviceProvider';
-/**
- * Proprietà del componente ToppyDraggableHelpCenter
- */
-interface ToppyDraggableHelpCenterProps {
-    /** Contenuto da visualizzare nella speech bubble */
-    content?: React.ReactNode;
-    /** Tipo di dispositivo per adattare il comportamento */
-    deviceType?: DeviceType;
-    /** Allineamento iniziale del componente (destra o sinistra) */
-    align?: 'right' | 'left';
-    /** Stato iniziale collassato/espanso */
-    initialIsCollapsed?: boolean;
-    /** Callback chiamato quando si clicca sull'immagine di Toppy */
-    onToppyImageClick?: () => void;
-    /** Visibilità del componente */
-    isVisible?: boolean;
-    /** Se true, renderizza Toppy nel document.body tramite Portal invece che nel parent */
-    usePortal?: boolean;
-}
-/**
- * Componente ToppyDraggableHelpCenter
- *
- * Renderizza un assistente virtuale (Toppy) draggable che può mostrare contenuti
- * in una speech bubble. Il componente può essere trascinato all'interno del suo
- * contenitore e può essere collassato/espanso con un doppio click.
- */
-declare const ToppyDraggableHelpCenter: React.FC<ToppyDraggableHelpCenterProps>;
-export default ToppyDraggableHelpCenter;