@topconsultnpm/sdkui-react 6.20.0-dev1.92 → 6.20.0-dev1.94

package/lib/components/NewComponents/ContextMenu/TMContextMenu.js

@@ -137,8 +137,8 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
             style.webkitTouchCallout = 'none';
             style.webkitUserSelect = 'none';
             style.userSelect = 'none';
-            el.addEventListener('touchstart', handleTouchStart, { passive: true });
-            el.addEventListener('touchmove', handleTouchMove, { passive: true });
+            el.addEventListener('touchstart', handleTouchStart, { passive: false });
+            el.addEventListener('touchmove', handleTouchMove, { passive: false });
             el.addEventListener('touchend', handleTouchEnd);
             el.addEventListener('touchcancel', handleTouchEnd);
             el.addEventListener('contextmenu', handleContextMenu);

package/lib/components/base/TMDataGrid.js

@@ -356,7 +356,12 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                     // other properties
                     disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, wordWrapEnabled: wordWrapEnabled, noDataText: noDataText, 
                     // styles
-                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { target: ".dx-data-row", items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
+                    width: width, height: height, style: {
+                        userSelect: 'none',
+                        // Temporary: iOS-specific styles to prevent default long-press menu and text selection
+                        WebkitTouchCallout: 'none',
+                        WebkitUserSelect: 'none'
+                    }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { target: ".dx-data-row", items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
                     visible: customContextMenuVisible,
                     position: customContextMenuPosition,
                     onClose: () => setCustomContextMenuVisible(false)

package/lib/components/base/TMListView.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { ObjectClasses } from '@topconsultnpm/sdk-ts';
-import TMContextMenu, { useTMContextMenu } from './TMContextMenu';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import { IconApply, IconCloseCircle, IconColumns, IconDown, IconHide, IconShow, IconUp, IconVisible } from '../../helper/TMIcons';
 import { TMSearchBar } from '../sidebar/TMHeader';
 import TMTooltip from './TMTooltip';
@@ -26,9 +26,17 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
     const [isFocused, setIsFocused] = useState(false);
     const [showOrderMenu, setShowOrderMenu] = useState(false);
     const [showOrderOptions, setShowOrderOptions] = useState(false);
+    const [contextMenuVisible, setContextMenuVisible] = useState(false);
+    const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+    const [orderMenuVisible, setOrderMenuVisible] = useState(false);
+    const [orderMenuPosition, setOrderMenuPosition] = useState({ x: 0, y: 0 });
     useEffect(() => { setCurrentDataSource(dataSource); }, [dataSource]);
-    const openContextMenu = (e) => { setIsFocused(true); };
-    let [coords, show] = useTMContextMenu(contRef);
+    const openContextMenu = (e) => {
+        e.preventDefault();
+        setIsFocused(true);
+        setContextMenuVisible(true);
+        setContextMenuPosition({ x: e.clientX, y: e.clientY });
+    };
     useEffect(() => { if (orderBy) {
         setOrderedBy(orderBy);
     } }, [orderBy]);
@@ -235,10 +243,10 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
             for (let key of searchKeys) {
                 arr.push({
                     disabled: !localShowId && key === exprKey,
-                    isSelected: key === orderedBy,
-                    onItemClick: () => { setOrderedBy(key); setShowOrderOptions(false); },
+                    onClick: () => { setOrderedBy(key); setShowOrderOptions(false); setOrderMenuVisible(false); },
                     icon: _jsx(IconColumns, { fontSize: 16 }),
-                    text: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [key, " ", key === orderedBy && _jsx(IconApply, { fontSize: 14, color: 'gray' })] })
+                    name: key,
+                    rightIcon: key === orderedBy ? _jsx(IconApply, { fontSize: 14, color: 'gray' }) : undefined
                 });
             }
         }
@@ -328,16 +336,16 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
         if (showSearch === undefined) {
             items.push({
                 icon: localShowSearch ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }),
-                onItemClick: () => setLocalShowSearch(!localShowSearch),
-                text: localShowSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch
+                onClick: () => setLocalShowSearch(!localShowSearch),
+                name: localShowSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch
             });
         }
         // Add ID menu item only if showId prop is undefined
         if (showId === undefined) {
             items.push({
                 icon: localShowId ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }),
-                onItemClick: () => setLocalShowId(!localShowId),
-                text: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+                onClick: () => setLocalShowId(!localShowId),
+                name: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
             });
         }
         // Add order menu item only if grouping length is zero
@@ -345,21 +353,31 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
             items.push({
                 icon: showOrderMenu ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }),
                 disabled: searchKeys.length === 0,
-                onItemClick: () => setShowOrderMenu(!showOrderMenu),
-                text: showOrderMenu ? 'Nascondi menu di ordinamento' : 'Mostra menu di ordinamento'
+                onClick: () => setShowOrderMenu(!showOrderMenu),
+                name: showOrderMenu ? 'Nascondi menu di ordinamento' : 'Mostra menu di ordinamento'
             });
         }
         return items;
     };
     const contextMenuItems = generateContextMenuItems(localShowSearch, localShowId, showOrderMenu, grouping, searchKeys);
-    return (_jsxs(StyledListViewContainer, { ref: contRef, onContextMenu: openContextMenu, children: [(show && contextMenuItems.length > 0) && _jsx(TMContextMenu, { coords: coords, items: contextMenuItems }), showOrderOptions &&
-                _jsx(TMContextMenu, { items: orderMenuItems(), coords: { x: orderRef.current?.getBoundingClientRect().left, y: orderRef.current?.getBoundingClientRect().top - (searchKeys.length * 30) - 10 } }), header && _jsx("div", { style: { width: '100%', height: '40px', backgroundColor: headerBackGroundColor ?? `${customColor}30`, marginBottom: '3px', display: 'flex', alignItems: 'center' }, children: header }), localShowSearch &&
+    return (_jsxs(StyledListViewContainer, { ref: contRef, onContextMenu: openContextMenu, children: [contextMenuItems.length > 0 && (_jsx(TMContextMenu, { items: contextMenuItems, externalControl: {
+                    visible: contextMenuVisible,
+                    position: contextMenuPosition,
+                    onClose: () => setContextMenuVisible(false)
+                } })), showOrderOptions && orderRef.current && (_jsx(TMContextMenu, { items: orderMenuItems(), externalControl: {
+                    visible: orderMenuVisible || showOrderOptions,
+                    position: {
+                        x: orderRef.current.getBoundingClientRect().left,
+                        y: orderRef.current.getBoundingClientRect().top - (searchKeys.length * 30) - 10
+                    },
+                    onClose: () => { setOrderMenuVisible(false); setShowOrderOptions(false); }
+                } })), header && _jsx("div", { style: { width: '100%', height: '40px', backgroundColor: headerBackGroundColor ?? `${customColor}30`, marginBottom: '3px', display: 'flex', alignItems: 'center' }, children: header }), localShowSearch &&
                 _jsx(StyledSearchContainer, { children: _jsxs(StyledSearchContainer, { children: [_jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchValue, onSearchValueChanged: (e) => setSearchValue(e) }), _jsx(TMTooltip, { content: 'Nascondi ricerca', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setSearchValue(''); setLocalShowSearch(false); } }) })] }) }), _jsx("div", { ref: listRef, onClick: () => setIsFocused(true), style: { width: '100%', overflow: 'auto', height: listHeight() }, children: currentDataSource.length > 0 ?
                     grouping.length === 0 ? memoList : groupedMemoList :
                     searchValue.length > 0 ? _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data found" }) :
                         _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data" }) }), (searchValue.length > 0 || showOrderMenu) &&
                 _jsxs(StyledListViewFooter, { "$bgColor": `${customColor}20`, children: [showOrderMenu &&
-                            _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("div", { style: { width: 'max-content' }, children: "Ordinato per" }), _jsx("div", { ref: orderRef, onClick: () => { setShowOrderOptions(!showOrderOptions); }, style: { cursor: 'pointer', fontWeight: 'bold' }, children: orderedBy.length > 0 ? orderedBy : 'Nulla' }), orderedBy.length > 0 && _jsxs(TMTooltip, { content: orderDir ? 'ASC' : 'DESC', children: [" ", orderDir ? _jsx(IconUp, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(false), fontSize: 14 }) : _jsx(IconDown, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(true), fontSize: 14 }), " "] }), _jsx(TMTooltip, { content: 'Annulla ordinamento', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setOrderedBy(''); setShowOrderMenu(false); setShowOrderOptions(false); } }) })] }), searchValue.length > 0 && _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'flex-end', gap: 5 }, children: [_jsx(TMTooltip, { content: 'Visibili', children: _jsx(IconVisible, { fontSize: 14 }) }), currentDataSource.length] })] })] }));
+                            _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("div", { style: { width: 'max-content' }, children: "Ordinato per" }), _jsx("div", { ref: orderRef, onClick: () => { setShowOrderOptions(!showOrderOptions); setOrderMenuVisible(!orderMenuVisible); }, style: { cursor: 'pointer', fontWeight: 'bold' }, children: orderedBy.length > 0 ? orderedBy : 'Nulla' }), orderedBy.length > 0 && _jsxs(TMTooltip, { content: orderDir ? 'ASC' : 'DESC', children: [" ", orderDir ? _jsx(IconUp, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(false), fontSize: 14 }) : _jsx(IconDown, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(true), fontSize: 14 }), " "] }), _jsx(TMTooltip, { content: 'Annulla ordinamento', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setOrderedBy(''); setShowOrderMenu(false); setShowOrderOptions(false); } }) })] }), searchValue.length > 0 && _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'flex-end', gap: 5 }, children: [_jsx(TMTooltip, { content: 'Visibili', children: _jsx(IconVisible, { fontSize: 14 }) }), currentDataSource.length] })] })] }));
 };
 export default TMListView;
 export const CustomListViewHeader = (props) => {

package/lib/components/choosers/TMDistinctValues.js

@@ -131,7 +131,7 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
         return md.dataDomain === undefined || md.dataDomain === MetadataDataDomains.None;
     };
     const renderContent = () => {
-        return (_jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary })] }));
+        return (_jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary, onRowDblClick: () => !isAppendMode && onClosePanelCallback?.() })] }));
     };
     return (_jsx(_Fragment, { children: isModal
             ? _jsx(TMModal, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), height: '600px', width: '500px', resizable: true, onClose: onClosePanelCallback, children: renderContent() })

package/lib/components/editors/TMTextArea.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
-import TMContextMenu, { useContextMenu } from '../base/TMContextMenuOLD';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
@@ -35,14 +35,10 @@ const TMTextArea = (props) => {
     const [isFocused, setIsFocused] = useState(false);
     // Stores the current value of the textarea
     const [currentValue, setCurrentValue] = useState(value);
-    // Stores the items for the context menu
-    const [formulaMenuItems, setFormulaMenuItems] = useState([]);
     // Stores the calculated number of rows for the textarea
     const [calculatedRows, setCalculatedRows] = useState(rows ?? 1);
     //Show chooserForm formulaItems
     const [showFormulaItemsChooser, setShowFormulaItemsChooser] = useState(false);
-    // Manages the state for the custom context menu
-    const { clicked, setClicked, points, setPoints } = useContextMenu();
     const deviceType = useDeviceType();
     // Attach a `ResizeObserver` to the textarea to monitor changes in width: dynamically updates rows based on textarea content and width
     useEffect(() => {
@@ -69,16 +65,15 @@ const TMTextArea = (props) => {
             setCalculatedRows(newRowCount);
         }
     }, [currentValue, autoCalculateRows]);
-    // Populate the formula menu items whenever the `formulaItems` prop changes
-    useEffect(() => {
-        if (formulaItems && formulaItems.length > 0) {
-            let menuItems = [];
-            for (const formula of formulaItems) {
-                menuItems.push({ text: formula });
-            }
-            setFormulaMenuItems(menuItems);
-        }
-    }, [formulaItems]);
+    // Build context menu items for formulas
+    const getFormulaMenuItems = () => {
+        if (!formulaItems || formulaItems.length === 0)
+            return [];
+        return formulaItems.map(formula => ({
+            name: formula,
+            onClick: () => insertText(formula)
+        }));
+    };
     function getFormulaDataSorce() {
         let fiarray = [];
         if (!formulaItems)
@@ -153,20 +148,8 @@ const TMTextArea = (props) => {
     };
     // Renders the textarea
     const renderTextArea = () => {
-        return _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
-                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, onContextMenu: (e) => {
-                        if (formulaItems.length <= 0)
-                            return;
-                        // prevent default right click behavior
-                        e.preventDefault();
-                        // set our click state to true when a user right clicks
-                        setClicked(true);
-                        const bounds = e.currentTarget.getBoundingClientRect();
-                        const x = e.clientX - bounds.left;
-                        const y = e.clientY - bounds.top;
-                        // set the x and y coordinates of our users right click
-                        setPoints({ x, y });
-                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+        const textareaElement = _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
                             _jsx(StyledTextAreaEditorButton, { onClick: () => {
                                     setShowFormulaItemsChooser(true);
                                 }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
@@ -178,7 +161,12 @@ const TMTextArea = (props) => {
                                     onBlur?.(undefined);
                                 }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
                             return (_jsx(StyledTextAreaEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
-                        })] }), openFormulaItemsChooser(), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
+                        })] }), openFormulaItemsChooser(), _jsx(TMVilViewer, { vil: validationItems })] });
+        // Wrap with context menu if formula items exist
+        if (formulaItems.length > 0) {
+            return (_jsx(TMContextMenu, { items: getFormulaMenuItems(), trigger: "right", children: textareaElement }));
+        }
+        return textareaElement;
     };
     // Layout for the textarea with a left-aligned label
     const renderedLeftLabelTextArea = () => {

package/lib/components/index.d.ts

@@ -1,7 +1,6 @@
 export { default as ShowAlert } from './base/TMAlert';
 export { default as TMButton } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
-export * from './base/TMContextMenu';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';
 export * from './base/TMListView';
 export { default as TMList } from './base/TMList';
@@ -25,7 +24,6 @@ export { default as TMToggleButton } from './base/TMToggleButton';
 export { default as TMTooltip } from './base/TMTooltip';
 export { default as TMVilViewer } from './base/TMVilViewer';
 export { default as TMUserAvatar } from './base/TMUserAvatar';
-export { default as TMFloatingToolbar } from './base/TMFloatingToolbar';
 export { default as TMDropDown } from './editors/TMDropDown';
 export { default as TMTreeDropDown } from './editors/TMTreeDropDown';
 export { default as TMSummary } from './editors/TMSummary';

package/lib/components/index.js

@@ -2,7 +2,6 @@
 export { default as ShowAlert } from './base/TMAlert';
 export { default as TMButton } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
-export * from './base/TMContextMenu';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';
 export * from './base/TMListView';
 export { default as TMList } from './base/TMList';
@@ -26,7 +25,6 @@ export { default as TMToggleButton } from './base/TMToggleButton';
 export { default as TMTooltip } from './base/TMTooltip';
 export { default as TMVilViewer } from './base/TMVilViewer';
 export { default as TMUserAvatar } from './base/TMUserAvatar';
-export { default as TMFloatingToolbar } from './base/TMFloatingToolbar';
 //editors
 export { default as TMDropDown } from './editors/TMDropDown';
 export { default as TMTreeDropDown } from './editors/TMTreeDropDown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.92",
+  "version": "6.20.0-dev1.94",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

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

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

package/lib/components/base/TMContextMenu.js

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

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

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

package/lib/components/base/TMContextMenuOLD.js

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

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

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

package/lib/components/base/TMFloatingToolbar.js

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