@topconsultnpm/sdkui-react 6.19.0-dev1.10

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

@@ -0,0 +1,21 @@
+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;
+}
+declare const TMButton: React.ForwardRefExoticComponent<ITMButton & React.RefAttributes<HTMLButtonElement>>;
+export default TMButton;

package/lib/components/base/TMButton.js

@@ -0,0 +1,174 @@
+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 = () => { } } = 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, children: caption }));
+        }
+        else if (btnStyle === 'toolbar') {
+            return (_jsx(StyledToolbarButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: icon }));
+        }
+        else if (btnStyle === 'icon') {
+            return (_jsx(StyledIconButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, 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?.(), 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, 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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,10 @@
+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;