@topconsultnpm/sdkui-react-beta 6.5.51

package/lib/components/base/Styled.js

@@ -0,0 +1,117 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
+import { FontSize, TMColors } from '../../utils/theme';
+export const StyledDivHorizontal = styled.div `
+    display: flex; 
+    flex-direction: row; 
+    align-items: center; 
+    justify-content: flex-start;
+`;
+export const StyledParagraph = styled.p `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0 10px;
+    font-size: 1rem;
+`;
+export const StyledToolbarForm = styled.div `
+    display: flex; 
+    flex-direction: row; 
+    align-items: center; 
+    justify-content: flex-start;
+    height: 35px;
+    width: 100%;
+    padding-left: 10px;
+    gap: 2px;
+    background-color: ${TMColors.toolbar_background};
+`;
+export const StyledPanelPage = styled.div `
+  position: absolute;
+  width: calc(100% - 50px);
+  top: 50px;
+  left: ${(props) => props.$isOpen ? '50px' : '-150%'};
+  bottom: 30px;
+  border-radius: 0px;
+  background: ${TMColors.default_background};
+  /* transition: left ease 1000ms; */
+  z-index: 1500;
+  overflow: hidden;
+  padding: 10px;
+`;
+export const StyledModalContainer = styled.div `
+    position: absolute;
+    width: 100%;
+    height: calc(100%);//TODO: Centralizzare STATUSBAR_HEIGHT
+    top: 0;
+    left: 0;
+    background-color: transparent;
+    z-index: 100;//TODO: Devexpress checkbox DataGrid z-index: 2
+`;
+export const StyledResultTypeContainer = styled.div `
+    display: flex; 
+    align-items: center; 
+    justify-content: center; 
+    width: fit-content; 
+    gap: 5px; 
+    padding: 6px 3px; 
+    height: 100%; 
+    border-radius: 3px; 
+    color: white; 
+    font-weight: bold; 
+    cursor: pointer;
+    background-color: ${props => props.$resultType === ResultTypes.ERROR ? TMColors.error : props.$resultType === ResultTypes.WARNING ? TMColors.warning : TMColors.success}; 
+`;
+export const StyledTooltipSeparatorItem = styled.hr `
+  width: 75%;
+  margin-bottom: 3px;
+`;
+export const StyledTooltipItem = styled.div `
+  margin-right: 5px;
+  margin-bottom: 3px;
+  margin-top: ${props => props.$marginTop || '0px'};
+  color: ${TMColors.text_normal};
+  font-size: ${props => props.$fontSize || FontSize.defaultFontSize};
+`;
+export const StyledTooltipContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    z-index: 100;//TODO: Devexpress checkbox DataGrid z-index: 2
+`;
+export const StyledDraggableDiv = styled.div `
+    display: flex;
+    cursor: move;
+`;
+export const StyledBadge = styled.div `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.$backgroundColor};
+    color: #fff;
+    font-size: 10px;
+    padding: 0 6px;
+    border-radius: 999em;
+    line-height: 16px;
+    margin-left: 5px;
+`;
+export const StyledDxGridGroupHeader = styled.div `
+    display: flex; 
+    flex-direction: row; 
+    align-items: center; 
+    justify-content: flex-start;
+    gap: 5px;
+    height: 30px;
+    font-weight: bold;
+    /* background-image: linear-gradient(white, #E4E9F7); */
+    background: ${(props) => props.$backgroundColor ? `linear-gradient(90deg, #f0f4fa, ${props.$backgroundColor}) ` : 'linear-gradient(90deg, #f0f4fa, #135596)'} ;
+`;
+const StyledCellRenderObjectIcon = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
+`;
+export const cellRenderObjectIcon = (icon) => { return (_jsxs(StyledCellRenderObjectIcon, { children: [" ", icon, " "] })); };

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

@@ -0,0 +1,20 @@
+interface AlertVariant {
+    variant: string;
+    color: string;
+    borderColor: string;
+    icon: JSX.Element;
+    textColor: string;
+}
+interface AlertModes {
+    warning: AlertVariant;
+    error: AlertVariant;
+    success: AlertVariant;
+    info: AlertVariant;
+}
+declare const ShowAlert: ({ mode, message, duration, title }: {
+    mode: keyof AlertModes;
+    message: string;
+    duration?: number;
+    title?: string;
+}) => void;
+export default ShowAlert;

package/lib/components/base/TMAlert.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { IconCloseCircle, IconInfo, IconSuccess, IconWarning } from '../../helper';
+const TMAlertPosition = {
+    TOP_RIGHT: { top: '10px', right: '10px', position: 'absolute' },
+    TOP_CENTER: { top: '10px', left: '50%', transform: 'translateX(-50%)', position: 'absolute' },
+    TOP_LEFT: { top: '10px', left: '10px', position: 'absolute' },
+    BOTTOM_RIGHT: { bottom: '10px', right: '10px', position: 'absolute' },
+    BOTTOM_LEFT: { bottom: '10px', left: '10px', position: 'absolute' },
+    BOTTOM_CENTER: { bottom: '10px', left: '50%', transform: 'translateX(-50%)', position: 'absolute' },
+    CENTER_RIGHT: { top: '50%', right: '10px', transform: 'translateY(-50%)', position: 'absolute' },
+    CENTER_LEFT: { top: '50%', left: '10px', transform: 'translateY(-50%)', position: 'absolute' },
+    CENTER_CENTER: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', position: 'absolute' },
+};
+const Mode = {
+    warning: {
+        variant: 'warning',
+        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #EAD305 100%) 0% 0% no-repeat padding-box',
+        borderColor: '#ba873d',
+        textColor: '#6e5024',
+        icon: _jsx(IconWarning, { fontSize: 16, color: '#F0AD4E' }),
+    },
+    error: {
+        variant: 'error',
+        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #E87A8E 100%) 0% 0% no-repeat padding-box',
+        borderColor: '#a8413e',
+        textColor: '#4a1b1b',
+        icon: _jsx(IconCloseCircle, { fontSize: 16, color: '#D9534F' }),
+    },
+    success: {
+        variant: 'success',
+        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #6DB735 100%) 0% 0% no-repeat padding-box',
+        borderColor: '#4d994d',
+        textColor: '#203d20',
+        icon: _jsx(IconSuccess, { fontSize: 16, color: '#5CB85C' }),
+    },
+    info: {
+        variant: 'info',
+        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #679CE8 100%) 0% 0% no-repeat padding-box',
+        borderColor: '#285f8f',
+        textColor: '#16354f',
+        icon: _jsx(IconInfo, { fontSize: 16, color: '#337AB7' }),
+    },
+};
+// const TMAlert = ({ mode, duration = 5000, message, position = 'BOTTOM_CENTER' }: { mode: keyof AlertModes, duration?: number, message: string, position?: keyof typeof TMAlertPosition }) => {
+const TMAlert = ({ mode, duration = 1000, title, message }) => {
+    const [currentWidth, setCurrentWidth] = useState(window.innerWidth);
+    const [container] = useState(document.getElementsByClassName('tm-alert-temporary-container'));
+    useEffect(() => {
+        window.addEventListener('resize', () => {
+            setCurrentWidth(window.innerWidth);
+        });
+    }, [currentWidth]);
+    useEffect(() => {
+        const tiemout = setTimeout(() => {
+            let container = document.getElementsByClassName('tm-alert-temporary-container');
+            container[0]?.remove();
+        }, duration + 50);
+        return () => {
+            clearTimeout(tiemout);
+        };
+    }, [container]);
+    return (_jsx("div", { style: { width: '100%', paddingTop: '3px', position: 'absolute', bottom: `10px`, right: '10px' }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms`, position: 'relative', float: 'right', zIndex: '20000999', width: '356px', height: '86px', borderRadius: '8px', overflow: 'hidden', border: '2px white solid', boxShadow: '0px 3px 6px #00000029' }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms` }, children: _jsxs("div", { className: 'tm-alert-container', style: { background: Mode[mode].color, animationDuration: `${duration}ms` }, children: [_jsxs("div", { className: "tm-alert-context", style: { position: 'relative' }, children: [_jsx("div", { className: 'tm-alert-icon', style: { position: 'absolute', top: '12px', left: '12px', paddingTop: '1px' }, children: Mode[mode].icon }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: '15px', left: '45px', textAlign: 'left', fontSize: '1.1rem', fontWeight: 'bold', maxWidth: '280px' }, children: title }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: '35px', left: '45px', textAlign: 'left', fontSize: '1rem', maxWidth: '280px' }, children: message })] }), _jsx("div", { className: 'tm-alert-loading', style: { backgroundImage: `linear-gradient(to right, ${Mode[mode].borderColor}, ${Mode[mode].textColor})`, animationDuration: `${duration}ms` } })] }) }) }) }));
+};
+const ShowAlert = ({ mode, message, duration, title }) => {
+    let container = document.createElement('div');
+    container.setAttribute("class", 'tm-alert-temporary-container');
+    document.body.appendChild(container);
+    // container.style.position = 'relative'
+    container.style.display = 'flex';
+    const root = ReactDOM.createRoot(container);
+    root.render(_jsx(React.StrictMode, { children: _jsx(TMAlert, { message: message, mode: mode, duration: duration, title: title }) }));
+};
+export default ShowAlert;

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

@@ -0,0 +1,17 @@
+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';
+type ButtonStyle = 'normal' | 'toolbar' | 'icon' | 'text';
+interface ITMButton extends ITMEditorBase {
+    color?: ButtonColors;
+    btnStyle?: ButtonStyle;
+    caption?: string;
+    description?: string;
+    icon?: any;
+    keyGesture?: string;
+    padding?: string;
+    showTooltip?: boolean;
+    onClick?: VoidFunction;
+}
+declare const TMButton: React.FunctionComponent<ITMButton>;
+export default TMButton;

package/lib/components/base/TMButton.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { getColor } from '../../helper';
+import { FontSize } 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'};
+  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 TMButton = ({ width, height, keyGesture, btnStyle = 'normal', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { } }) => {
+    // const [random, setRandom] = useState(0.0);
+    // const [key, setKey] = useState("");
+    // let accBtns = keyGesture?.replaceAll(' ', '').split('+')
+    // const registerKeyPress = useCallback((e: KeyboardEvent) => {
+    //   setRandom(Math.random());
+    //   if (accBtns && accBtns?.length > 1) {
+    //     if (accBtns[0].toLowerCase() === 'alt') {
+    //       if (e.altKey) {
+    //         e.preventDefault()
+    //         setKey(e.key);
+    //       }
+    //     }
+    //     if (accBtns[0].toLowerCase() === 'ctrl') {
+    //       if (e.ctrlKey) {
+    //         e.preventDefault()
+    //         setKey(e.key);
+    //       }
+    //     }
+    //     if (accBtns[0].toLowerCase() === 'shift') {
+    //       if (e.shiftKey) {
+    //         e.preventDefault()
+    //         setKey(e.key);
+    //       }
+    //     }
+    //   }
+    // }, []);
+    // useEffect(() => {
+    //   if (accBtns && key.toLowerCase() === accBtns[1]) { !disabled && onClick && onClick(); setKey('') }
+    // }, [random]);
+    // useEffect(() => {
+    //   if (keyGesture) {
+    //     document.addEventListener("keydown", registerKeyPress);
+    //   }
+    //   return () => { document.removeEventListener("keydown", registerKeyPress) }
+    // }, [registerKeyPress]);
+    const renderedButton = () => {
+        if (btnStyle === 'normal') {
+            return (_jsx(StyledNormalButton, { width: width, height: height, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: caption }));
+        }
+        else if (btnStyle === 'toolbar') {
+            return (_jsx(StyledToolbarButton, { color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: icon }));
+        }
+        else if (btnStyle === 'icon') {
+            return (_jsx(StyledIconButton, { color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, children: icon }));
+        }
+        else {
+            return (_jsx(StyledTextButton, { color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: caption }));
+        }
+    };
+    const renderTooltip = () => {
+        return (showTooltip &&
+            _jsxs(_Fragment, { children: [caption && _jsxs(StyledButtonTooltipHeader, { "$description": description, children: [_jsx(StyledButtonTooltipIcon, { "$color": color, children: icon }), _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,69 @@
+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, useWindowWidth } from '../../helper';
+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 width = useWindowWidth();
+    const renderedItems = () => {
+        return (dataSource.map((item, index) => (_jsx(StyledClosableItem, { children: item }, index))));
+    };
+    return (_jsxs(StyledClosableContainer, { "$isMobile": width < 1024, "$padding": hasPadding ? '5px' : '0', children: [_jsxs(StyledClosableContext, { children: [label && _jsxs(StyledClosableLabel, { "$isMobile": width < 640, "$inline": inline, children: [label, ":"] }), status ?
+                        _jsxs(StyledClosableItems, { "$isMobile": width < 640, "$inline": inline, children: ["  ", renderedItems(), " "] }) :
+                        _jsxs(StyledClosableItems, { "$isMobile": width < 640, "$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/TMContextMenu.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 TMContextMenu: React.FunctionComponent<ITMContextMenu>;
+export default TMContextMenu;

package/lib/components/base/TMContextMenu.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 TMContextMenu = ({ 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 TMContextMenu;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { Colors, ITMEditorBase } from './TMEditorBase';
+interface ITMDropDown extends ITMEditorBase {
+    dataSource?: any[];
+    color?: Colors;
+    value?: string | number | undefined;
+    disabled?: boolean;
+    onValueChanged?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+}
+declare const TMDropDown: React.FC<ITMDropDown>;
+export default TMDropDown;

package/lib/components/base/TMDropDown.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import styled from 'styled-components';
+import { FontSize } from '../../utils/theme';
+import { getColor } from "../../helper/helpers";
+const StyledDropDownContainer = styled.div.withConfig({ shouldForwardProp: prop => !['labelPosition'].includes(prop) }) `
+    width: ${props => props.width};
+    display: flex;
+    flex-direction: ${props => props.labelPosition === 'left' ? 'row' : 'column'};
+    justify-content: flex-start;
+    align-items: ${props => props.labelPosition === 'left' ? 'center' : 'flex-start'};;
+    position: relative;
+`;
+const StyledDropDown = styled.select.withConfig({ shouldForwardProp: prop => !['flexBase'].includes(prop) }) `
+    width: ${props => props.width};
+    padding: 3px 15px 3px 5px;
+    border: 1px solid;
+    border-color: ${props => !props.disabled ? getColor(props.color) : 'rgb(180,180,180)'};;
+    color: ${props => getColor(props.color)};
+    border-radius: 5px;
+    min-width: 70px;
+    /* &:focus{
+        outline: none;
+    } */
+    font-size: ${props => props.fontSize};
+    flex: ${props => 10 - props.flexBase};
+    &::placeholder {
+        color: ${props => getColor(props.color)};
+        font-size: ${props => props.fontSize};
+    }
+`;
+const StyledDropDownIcon = styled.div.withConfig({ shouldForwardProp: prop => !['labelPosition'].includes(prop) }) `
+    color: ${props => !props.disabled ? getColor(props.color) : 'rgb(180,180,180)'};
+    width: 25px;
+    height: 25px;
+    margin-right: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    user-select: none;
+`;
+const StyledDropDownLabel = styled.div.withConfig({ shouldForwardProp: prop => !['flexBase'].includes(prop) }) `
+    font-size: ${props => props.fontSize} ;
+    color: ${props => !props.disabled ? getColor(props.color) : 'rgb(180,180,180)'};
+    flex: ${props => props.flexBase};
+    transform: translateY(1px);
+    user-select: none;
+    padding-right: 10px;
+`;
+const TMDropDown = ({ disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', flexBase = 1, label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, color = 'primary', value, onValueChanged }) => {
+    const [currentColor, setCurrentColor] = useState(color);
+    useEffect(() => {
+        setCurrentColor(isModifiedWhen ? 'tertiary' : color);
+    }, [isModifiedWhen, color]);
+    const renderedLeftLabelTextBox = () => {
+        return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', width: '100%' }, children: _jsxs(StyledDropDownContainer, { labelPosition: labelPosition, width: width, children: [icon && _jsx(StyledDropDownIcon, { disabled: disabled, labelPosition: labelPosition, color: currentColor, children: icon }), label && _jsx(StyledDropDownLabel, { disabled: disabled, flexBase: flexBase, color: currentColor, fontSize: fontSize, children: label }), _jsx(StyledDropDown, { disabled: disabled, flexBase: flexBase, fontSize: fontSize, width: width, color: currentColor, value: value, onChange: onValueChanged, children: dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index))) })] }) }));
+    };
+    const renderedTopLabelTextBox = () => {
+        return (_jsxs(StyledDropDownContainer, { labelPosition: labelPosition, width: width, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2px', marginTop: '3px', width: '100%' }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }, children: [icon && _jsx(StyledDropDownIcon, { disabled: disabled, labelPosition: labelPosition, color: currentColor, children: icon }), label && _jsx(StyledDropDownLabel, { disabled: disabled, flexBase: flexBase, color: currentColor, fontSize: fontSize, children: label })] }) }), _jsx("div", { style: { width: '100%', display: 'flex', flexDirection: 'row', position: 'relative' }, children: _jsx(StyledDropDown, { disabled: disabled, flexBase: flexBase, fontSize: fontSize, width: width, color: currentColor, value: value, onChange: onValueChanged, children: dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index))) }) })] }));
+    };
+    return (_jsx("div", { style: elementStyle, children: labelPosition === 'left' ? renderedLeftLabelTextBox() : renderedTopLabelTextBox() }));
+};
+export default TMDropDown;

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

@@ -0,0 +1,17 @@
+export interface ITMDropDownMenu {
+    content: JSX.Element;
+    color?: string;
+    backgroundColor?: string;
+    disabled?: boolean;
+    borderRadius?: string;
+    items?: ITMDropDownMenuItem[];
+}
+export interface ITMDropDownMenuItem {
+    icon?: any;
+    text: any;
+    items?: ITMDropDownMenuItem[];
+    disabled?: boolean;
+    onClick?: () => void;
+}
+declare const TMDropDownMenu: ({ content, items, disabled, color, backgroundColor, borderRadius }: ITMDropDownMenu) => import("react/jsx-runtime").JSX.Element;
+export default TMDropDownMenu;