@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import { ITMEditorBase } from './TMEditorBase';
-export type ButtonColors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'standard' | 'primaryOutline' | 'secondaryOutline' | 'tertiaryOutline' | 'errorOutline' | 'warningOutline' | 'successOutline' | 'infoOutline';
-export type ButtonStyle = 'normal' | 'toolbar' | 'icon' | 'text' | 'advanced';
-export type AdvancedButtonType = 'success' | 'error' | 'tertiary' | 'primary';
-export interface ITMButton extends ITMEditorBase {
-    color?: ButtonColors;
-    btnStyle?: ButtonStyle;
-    advancedType?: AdvancedButtonType;
-    advancedColor?: string;
-    /** The label that will be displayed on the UI **/
-    caption?: string;
-    description?: string;
-    icon?: any;
-    keyGesture?: string;
-    padding?: string;
-    showTooltip?: boolean;
-    onClick?: VoidFunction;
-    onMouseDown?: (e: any) => any;
-}
-declare const TMButton: React.ForwardRefExoticComponent<ITMButton & React.RefAttributes<HTMLButtonElement>>;
-export default TMButton;

package/lib/components/base/TMButton.js

@@ -1,174 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, forwardRef } from 'react';
-import styled from 'styled-components';
-import { getColor } from '../../helper';
-import { FontSize, TMColors } from '../../utils/theme';
-import TMTooltip from './TMTooltip';
-const StyledNormalButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
-  font-size: ${props => props.fontSize};
-  width: ${props => props.width && props.width};
-  height: ${props => props.height && props.height};
-  min-width: 60px;
-  min-height: 25px;
-  padding: 3px 10px;
-  border: none;
-  cursor: ${props => !props.disabled && 'pointer'};
-  border-radius: 3px;
-  border: 1px solid;
-  border-color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(225, 225, 225)'};
-  background-color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? 'white' : getColor(props.color) : 'rgb(225, 225, 225)'};
-  color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(160, 160, 160)'};
-  &:hover {
-    border-color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(225, 225, 225)'};
-    background-color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? 'white' : getColor(props.color.split('Outline')[0]) : 'rgb(225, 225, 225)'};
-    color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(160, 160, 160)'};
-  }
-`;
-const StyledToolbarButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
-  font-size: ${props => props.fontSize ? props.fontSize : '18px'};
-  width: 30px;
-  height: 30px;
-  padding: 5px;
-  border-radius: 50px;
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: ${props => !props.disabled && 'pointer'};
-  border: 1px solid;
-  border-color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'none' : 'rgb(225, 225, 225)'};
-  background-color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? 'white' : getColor(props.color) : 'rgb(225, 225, 225)'};
-  color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(160, 160, 160)'};
-  &:hover {
-    border-color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(225, 225, 225)'};
-    background-color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? 'white' : getColor(props.color.split('Outline')[0]) : 'rgb(225, 225, 225)'};
-    color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(160, 160, 160)'};
-  }
-`;
-const StyledIconButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
-  font-size: ${props => props.fontSize};
-  min-width: 10px;
-  min-height: 10px;
-  padding: ${props => props.padding ?? '0px'};
-  display: flex;
-  border: none;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  cursor: ${props => !props.disabled && 'pointer'};
-  opacity: ${props => !props.disabled ? 1 : 0.4};
-  background-color: transparent;
-  color: ${props => !props.disabled ? getColor(props.color) : 'rgb(180, 180, 180)'};
-  user-select: none;
-`;
-const StyledTextButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
-  font-size: ${props => props.fontSize};
-  width: ${props => props.width && props.width};
-  height: ${props => props.height && props.height};
-  min-width: 60px;
-  min-height: 30px;
-  padding: 3px;
-  display: flex;
-  border: none;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  cursor: ${props => !props.disabled && 'pointer'};
-  border-radius: 2px;
-  background-color: transparent;
-  color: ${props => !props.disabled ? getColor(props.color) : 'rgb(231, 231, 231)'};
-  user-select: none;
-  transition: ease 200ms;
-  &:hover {
-    background-color: rgb(241, 241, 241);
-  }
-`;
-const StyledButtonTooltipHeader = styled.div `
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  background-color: white;
-  width: 100%;
-  height: 28px;
-  padding: 0 5px;
-  border-bottom: ${props => props.$description ? '1px solid rgb(210, 210, 210)' : 'none'};
-  margin-bottom: ${props => props.$description ? '5px' : '0px'};
-`;
-const StyledButtonTooltipIcon = styled.div `
-  margin-right: 5px;
-  color: ${props => props.$color ? props.$color : "primary"};
-  font-size: '20px';
-`;
-const StyledButtonTooltipItem = styled.div `
-  margin-right: 5px;
-  color: ${props => props.$color ? props.$color : "primary"};
-  font-size: ${props => props.fontSize || FontSize.defaultFontSize};
-`;
-const StyledAdvancedButton = styled.button `
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    width: ${props => props.$width};
-    height: ${props => props.$height};
-    font-weight: 600;
-    cursor: ${props => !props.$isDisabled ? 'pointer' : 'default'};
-    border-radius: 10px;
-    overflow: hidden;
-    color: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? TMColors.primaryColor : 'white'};
-    user-select: none;
-    border: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? `1px solid ${TMColors.primaryColor}` : 'none'};
-    background: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? 'white' : 'unset'};
-`;
-const StyledAdvancedButtonIcon = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${props => props.$isVisible ? '25px' : '0px'};
-   
-    transition: width ease-in-out 100ms;
-    height: 100%;
-    background-color: ${props => props.$isDisabled ? '#b4b4b4' : props.$color ? `${props.$color}90` : props.$type === 'success' ? `${TMColors.success}90` : props.$type === 'error' ? `${TMColors.error}90` : props.$type === 'tertiary' ? `${TMColors.tertiary}90` : `${TMColors.primary}90`};
-    border-top-left-radius: 10px;
-    border-bottom-left-radius: 10px;
-`;
-const StyledAdvancedButtonText = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background-color: ${props => props.$isDisabled ? '#d1d1d1' : props.$color ? props.$color : props.$type === 'success' ? `${TMColors.success}` : props.$type === 'error' ? `${TMColors.error}` : props.$type === 'tertiary' ? `${TMColors.tertiary}` : `${TMColors.primary}`};
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
-    padding: 5px;
-`;
-const TMButton = forwardRef((props, ref) => {
-    const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { }, onMouseDown = () => { } } = props;
-    const [isHovered, setIsHovered] = useState(false);
-    const renderedButton = () => {
-        if (btnStyle === 'normal') {
-            return (_jsx(StyledNormalButton, { ref: ref, width: width, height: height, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
-        }
-        else if (btnStyle === 'toolbar') {
-            return (_jsx(StyledToolbarButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: icon }));
-        }
-        else if (btnStyle === 'icon') {
-            return (_jsx(StyledIconButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: icon }));
-        }
-        else if (btnStyle === 'advanced') {
-            return (_jsxs(StyledAdvancedButton, { ref: ref, "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), onMouseDown: (e) => !disabled && onMouseDown?.(e), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: caption })] }));
-        }
-        else {
-            return (_jsx(StyledTextButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
-        }
-    };
-    const renderTooltip = () => {
-        return (showTooltip &&
-            _jsxs(_Fragment, { children: [caption &&
-                        _jsx(StyledButtonTooltipHeader, { "$description": description, children: _jsx(StyledButtonTooltipItem, { "$color": color, children: caption }) }), description && _jsx(StyledButtonTooltipItem, { children: description })] }));
-    };
-    return (_jsx("div", { style: elementStyle, children: showTooltip ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() }) : renderedButton() }));
-});
-export default TMButton;

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

@@ -1,10 +0,0 @@
-import React from 'react';
-interface ITMClosable {
-    dataSource: any[];
-    visibility?: boolean;
-    label?: string;
-    hasPadding?: boolean;
-    inline?: boolean;
-}
-declare const TMClosableList: React.FC<ITMClosable>;
-export default TMClosableList;

package/lib/components/base/TMClosableList.js

@@ -1,70 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import styled from 'styled-components';
-import { Colors, FontSize } from '../../utils/theme';
-import { IconDown, IconRight, SDKUI_Localizator } from '../../helper';
-import { DeviceType, useDeviceType } from './TMDeviceProvider';
-const StyledClosableContainer = styled.div `
-    background-color: rgb(248,248,248);
-    border-radius: 5px;
-    padding: ${props => props.$padding};
-    display: flex;
-    flex-direction: ${props => !props.$isMobile ? 'row' : 'column'};
-    align-items: flex-start;
-    justify-content: space-between;
-    width: 100%;
-    margin-bottom: 5px;
-`;
-const StyledClosableContext = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-`;
-const StyledClosableLabel = styled.div `
-    /* color: black; */
-    font-size: ${FontSize.defaultFontSize};
-    width: ${props => props.$inline ? '100%' : !props.$isMobile && '180px'};
-    padding: 1px;
-`;
-const StyledClosableItems = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    width: ${props => props.$inline ? '100%' : !props.$isMobile && 'calc(100% - 180px)'};
-`;
-const StyledClosableItem = styled.div `
-    /* font-weight: bold; */
-    font-size: ${FontSize.defaultFontSize};
-    padding: 2px;
-`;
-const StyledClosabelIcon = styled.div `
-    /* color: ${Colors.primary}; */
-    font-size: ${FontSize.defaultFontSize};
-    cursor: pointer;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 2px;
-    user-select: none;
-`;
-const StyledClosableItemsCount = styled.div `
-    /* color: ${Colors.primary}; */
-    font-size: ${FontSize.defaultFontSize};
-    cursor: pointer;
-    margin-right: 5px;
-    user-select: none;
-`;
-const TMClosableList = ({ dataSource, visibility = false, label, inline = false, hasPadding = true }) => {
-    const [status, setStatus] = useState(visibility);
-    let devicrType = useDeviceType();
-    const renderedItems = () => {
-        return (dataSource.map((item, index) => (_jsx(StyledClosableItem, { children: item }, index))));
-    };
-    return (_jsxs(StyledClosableContainer, { "$isMobile": devicrType === DeviceType.TABLET, "$padding": hasPadding ? '5px' : '0', children: [_jsxs(StyledClosableContext, { children: [label && _jsxs(StyledClosableLabel, { "$isMobile": devicrType === DeviceType.MOBILE, "$inline": inline, children: [label, ":"] }), status ?
-                        _jsxs(StyledClosableItems, { "$isMobile": devicrType === DeviceType.MOBILE, "$inline": inline, children: ["  ", renderedItems(), " "] }) :
-                        _jsxs(StyledClosableItems, { "$isMobile": devicrType === DeviceType.MOBILE, "$inline": inline, children: [" ", _jsxs(StyledClosableItem, { children: [" ", dataSource[0], " "] }), " "] })] }), dataSource.length > 1 && _jsxs(StyledClosabelIcon, { onClick: () => setStatus(!status), children: [!status && _jsxs(StyledClosableItemsCount, { children: [" (", _jsx("span", { children: "+" }), " ", dataSource.length - 1, " ", dataSource.length === 2 ? SDKUI_Localizator.OneMore : SDKUI_Localizator.More, ") "] }), !status ? _jsx(IconRight, { fontSize: 14 }) : _jsx(IconDown, { fontSize: 14 })] })] }));
-};
-export default TMClosableList;

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

@@ -1,13 +0,0 @@
-interface ShowConfirmOptions {
-    message: string;
-    title: string;
-    okButtonText?: string;
-    cancelButtonText?: string;
-}
-/**
- * Mostra una finestra di conferma personalizzata tramite un componente modale.
- * @param options Opzioni per la finestra di conferma (messaggio, titolo, testi dei bottoni).
- * @returns Una Promise che si risolve a `true` se l'utente conferma, `false` se annulla.
- */
-export declare const ShowConfirm: (options: ShowConfirmOptions) => Promise<boolean>;
-export {};

package/lib/components/base/TMConfirm.js

@@ -1,119 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom/client';
-import { createPortal } from 'react-dom';
-import styled from 'styled-components';
-import TMModal from './TMModal';
-import TMButton from './TMButton';
-import Toppy from '../../assets/Toppy-generico.png';
-import { TMColors } from '../../utils/theme';
-// *** Stili per la modale (immutati) ***
-const StyledModalBodyWrapper = styled.div `
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-`;
-const StyledModalFooter = styled.div `
-    padding: 12px;
-    height: auto;
-    display: flex;
-    justify-content: flex-end;
-    flex-direction: row;
-    gap: 10px;
-`;
-const StyledModalContentContainer = styled.div `
-    width: 100%;
-    padding: 10px;
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 10px;
-`;
-// *** Componente della modale di conferma ***
-const TMConfirmModal = ({ isOpen, title, message, okButtonText = 'OK', cancelButtonText = 'Annulla', onConfirm, onCancel, onClose }) => {
-    // Stato per la larghezza e l'altezza della modale
-    const [modalWidth, setModalWidth] = useState('520px');
-    const [modalHeight, setModalHeight] = useState('240px');
-    useEffect(() => {
-        const handleResize = () => {
-            if (window.innerWidth <= 768) {
-                setModalWidth('300px');
-                setModalHeight('200px');
-            }
-            else {
-                setModalWidth('520px');
-                setModalHeight('240px');
-            }
-        };
-        // Imposta la dimensione iniziale
-        handleResize();
-        // Aggiungi il listener per l'evento di ridimensionamento della finestra
-        window.addEventListener('resize', handleResize);
-        // Rimuovi il listener quando il componente viene smontato
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-    return (_jsx(TMModal, { title: title, width: modalWidth, height: modalHeight, resizable: false, onClose: onClose, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx("img", { width: 60, height: 75, src: Toppy, alt: "Toppy" }), _jsx("p", { style: { color: TMColors.primaryColor }, children: message })] }), _jsxs(StyledModalFooter, { children: [_jsx(TMButton, { btnStyle: 'text', showTooltip: false, caption: okButtonText, onClick: onConfirm }), _jsx(TMButton, { btnStyle: 'text', showTooltip: false, caption: cancelButtonText, onClick: onCancel })] })] }) }));
-};
-// *** Variabili globali per la gestione della Promise e del root dinamico ***
-let resolvePromise = null;
-let confirmRoot = null;
-let portalContainer = null;
-/**
- * Funzione interna per creare/aggiornare/rimuovere la modale tramite un Portal.
- * Questa non è esportata e viene gestita solo da `ShowConfirm`.
- */
-const updateConfirmModal = (options, isOpen, onConfirm, onCancel, onClose) => {
-    if (!portalContainer) {
-        // Crea il div in cui il portal verrà renderizzato la prima volta
-        portalContainer = document.createElement('div');
-        portalContainer.id = 'confirm-modal-portal-root';
-        document.body.appendChild(portalContainer);
-        confirmRoot = ReactDOM.createRoot(portalContainer);
-    }
-    if (isOpen && options && confirmRoot) {
-        // Renderizza il componente usando un Portal
-        confirmRoot.render(createPortal(_jsx(TMConfirmModal, { isOpen: isOpen, title: options.title, message: options.message, okButtonText: options.okButtonText, cancelButtonText: options.cancelButtonText, onConfirm: onConfirm, onCancel: onCancel, onClose: onClose }), portalContainer));
-    }
-    else if (confirmRoot) {
-        // Se non è più aperto, renderizza null per smontare il componente dal portal
-        confirmRoot.render(null);
-        // È buona pratica pulire anche il container dal DOM se non è più necessario
-        if (portalContainer && portalContainer.parentNode) {
-            confirmRoot.unmount(); // Smonta il root completamente
-            portalContainer.parentNode.removeChild(portalContainer);
-            portalContainer = null;
-            confirmRoot = null;
-        }
-    }
-};
-/**
- * Mostra una finestra di conferma personalizzata tramite un componente modale.
- * @param options Opzioni per la finestra di conferma (messaggio, titolo, testi dei bottoni).
- * @returns Una Promise che si risolve a `true` se l'utente conferma, `false` se annulla.
- */
-export const ShowConfirm = (options) => {
-    return new Promise((resolve, reject) => {
-        if (resolvePromise) {
-            // Se c'è già una modale di conferma aperta, rifiuta la nuova richiesta.
-            // Potresti voler mettere in coda le richieste o gestirle diversamente.
-            reject(new Error('Another confirm modal is already open.'));
-            return;
-        }
-        resolvePromise = resolve;
-        const cleanupAndResolve = (value) => {
-            if (resolvePromise) {
-                resolvePromise(value);
-                resolvePromise = null;
-                // Chiudi e pulisci la modale
-                updateConfirmModal(null, false, () => { }, () => { }, () => { });
-            }
-        };
-        const handleConfirm = () => cleanupAndResolve(true);
-        const handleCancel = () => cleanupAndResolve(false);
-        const handleClose = () => cleanupAndResolve(false); // Gestione della chiusura tramite 'X' o ESC
-        // Mostra la modale
-        updateConfirmModal(options, true, handleConfirm, handleCancel, handleClose);
-    });
-};

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

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