@topconsultnpm/sdkui-react-beta 6.6.1 → 6.6.2

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

@@ -1,26 +1,25 @@
-import React from 'react';
-export declare const useContextMenu: () => {
-    clicked: boolean;
-    setClicked: React.Dispatch<React.SetStateAction<boolean>>;
-    points: {
+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;
     };
-    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;
+    subMenuDir?: 'left' | 'right';
 }
-declare const TMContextMenu: React.FunctionComponent<ITMContextMenu>;
+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,56 +1,109 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, 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 });
+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(() => {
-        // reset clicked to false on user click
-        const handleClick = () => {
-            setClicked(false);
+        // 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');
+            }
         };
-        // add listener for user click
-        document.addEventListener("click", handleClick);
-        // clean up listener function to avoid memory leaks
+        // Attach event listener
+        window.addEventListener('resize', handleResize);
+        handleResize(); // Call it initially to set the direction
+        // Clean up the event listener on unmount
         return () => {
-            document.removeEventListener("click", handleClick);
+            window.removeEventListener('resize', handleResize);
         };
-    }, []);
-    return { clicked, setClicked, points, setPoints };
+    }, [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))) }));
 };
-// #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 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/TMListView.d.ts

@@ -1,24 +1,25 @@
-import React from 'react';
-import { ITMEditorBase, Colors as C } from '../base/TMEditorBase';
-type SelectedValueType = {
-    fieldName: string;
-    fieldValues: any[];
-};
-interface ITMListView extends ITMEditorBase {
-    dataSource?: any[];
-    multipleSelect?: boolean;
+interface ListProps<T> {
+    dataSource?: T[];
+    selectedItem?: T;
+    exprKey?: string;
+    searchKeys?: string[];
+    customColor?: string;
     searchable?: boolean;
-    header?: boolean;
-    footer?: boolean;
-    selectedListItems?: (e: any[]) => void;
-    displayField?: string;
-    customListViewItem?: JSX.Element;
-    customItemDetails?: JSX.Element;
-    hasItemDetails?: boolean;
-    detailsFields?: string[];
-    color?: C;
-    selectedValues?: any[] | SelectedValueType;
-    maxHeight?: string;
+    id?: string;
+    scroll?: {
+        x: number;
+        y: number;
+    };
+    orderBy?: string;
+    grouping?: string;
+    onScrollChange?: (e: {
+        x: number;
+        y: number;
+    }) => void;
+    onSelectionChanged?: (item: T) => void;
+    onItemClick?: (item: T) => void;
+    onItemDblClick?: (item: T) => void;
+    itemTemplate?: (item: T) => JSX.Element;
 }
-declare const TMListView: React.FC<ITMListView>;
+declare const TMListView: <T>({ grouping, orderBy, id, onScrollChange, scroll, searchKeys, searchable, itemTemplate, customColor, dataSource, exprKey, onSelectionChanged, onItemClick, onItemDblClick, selectedItem }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TMListView;