@topconsultnpm/sdkui-react 6.20.0-dev1.93 → 6.20.0-dev1.95

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/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/features/search/TMSearch.d.ts

@@ -23,6 +23,7 @@ interface ITMSearchProps {
     onFileOpened?: (dcmtFile: File | undefined) => void;
     onTaskCreateRequest?: (taskContext: TaskContext, onTaskCreated?: (task?: TaskDescriptor) => void) => void;
     openWGsCopyMoveForm?: (mode: "copyToWgDraft" | "copyToWgArchivedDoc", dcmtTypeDescriptor: DcmtTypeDescriptor, documents: Array<DcmtInfo>) => void;
+    editPdfForm?: boolean;
     openEditPdf?: (documents: Array<DcmtInfo>) => void;
     openS4TViewer?: boolean;
     onOpenS4TViewerRequest?: (dcmtInfo: Array<DcmtInfo>, onRefreshSearchAsync?: (() => Promise<void>)) => void;

package/lib/components/features/search/TMSearch.js

@@ -19,7 +19,7 @@ var TMSearchViews;
     TMSearchViews[TMSearchViews["Search"] = 0] = "Search";
     TMSearchViews[TMSearchViews["Result"] = 1] = "Result";
 })(TMSearchViews || (TMSearchViews = {}));
-const TMSearch = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, openInOffice, isVisible, inputTID, inputSqdID, inputMids, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, floatingActionConfig, onFileOpened, onRefreshAfterAddDcmtToFavs, onTaskCreateRequest, openWGsCopyMoveForm, openEditPdf, openS4TViewer, onOpenS4TViewerRequest, showTodoDcmtForm, passToArchiveCallback, onCurrentTIDChangedCallback, onlyShowSearchQueryPanel, onReferenceClick }) => {
+const TMSearch = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, openInOffice, isVisible, inputTID, inputSqdID, inputMids, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, floatingActionConfig, onFileOpened, onRefreshAfterAddDcmtToFavs, onTaskCreateRequest, openWGsCopyMoveForm, openEditPdf, editPdfForm = false, openS4TViewer, onOpenS4TViewerRequest, showTodoDcmtForm, passToArchiveCallback, onCurrentTIDChangedCallback, onlyShowSearchQueryPanel, onReferenceClick }) => {
     const [allSQDs, setAllSQDs] = useState([]);
     const [filteredByTIDSQDs, setFilteredByTIDSQDs] = useState([]);
     const [currentSQD, setCurrentSQD] = useState();
@@ -254,7 +254,7 @@ const TMSearch = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTask
             toolbarOptions: { icon: _jsx(IconSavedQuery, { fontSize: 24 }), visible: true, orderNumber: 4, isActive: allInitialPanelVisibility['TMSavedQuerySelector'] }
         }
     ], [tmTreeSelectorElement, showSearchResults, tmRecentsManagerElement, tmSearchQueryPanelElement, tmSavedQuerySelectorElement, fromDTD, mruTIDs]);
-    return (_jsxs(_Fragment, { children: [showSearchResults ? _jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'TMRecentsManager', isPersistenceEnabled: !isMobile ? hasSavedLayout() : false, persistPanelStates: !isMobile ? (state) => persistPanelStates(state) : undefined, persistedPanelStates: getPersistedPanelStates(), children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true, minPanelSizePx: !isMobile ? 250 : 150 }) }) }) : tmSearchQueryPanelElement, showSearchResults && _jsx(TMSearchResult, { isVisible: isVisible && currentSearchView === TMSearchViews.Result, context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, floatingActionConfig: floatingActionConfig, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, openInOffice: openInOffice, onRefreshSearchAsync: onRefreshSearchAsync, onClose: () => { onlyShowSearchQueryPanel ? setShowSearchResults(false) : setCurrentSearchView(TMSearchViews.Search); }, onFileOpened: onFileOpened, onTaskCreateRequest: onTaskCreateRequest, openWGsCopyMoveForm: openWGsCopyMoveForm, openEditPdf: openEditPdf, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, passToArchiveCallback: passToArchiveCallback, onSelectedTIDChanged: onCurrentTIDChangedCallback, showTodoDcmtForm: showTodoDcmtForm, onReferenceClick: onReferenceClick, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers })] }));
+    return (_jsxs(_Fragment, { children: [showSearchResults ? _jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'TMRecentsManager', isPersistenceEnabled: !isMobile ? hasSavedLayout() : false, persistPanelStates: !isMobile ? (state) => persistPanelStates(state) : undefined, persistedPanelStates: getPersistedPanelStates(), children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true, minPanelSizePx: !isMobile ? 250 : 150 }) }) }) : tmSearchQueryPanelElement, showSearchResults && _jsx(TMSearchResult, { isVisible: isVisible && currentSearchView === TMSearchViews.Result, context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, floatingActionConfig: floatingActionConfig, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, openInOffice: openInOffice, onRefreshSearchAsync: onRefreshSearchAsync, onClose: () => { onlyShowSearchQueryPanel ? setShowSearchResults(false) : setCurrentSearchView(TMSearchViews.Search); }, onFileOpened: onFileOpened, onTaskCreateRequest: onTaskCreateRequest, openWGsCopyMoveForm: openWGsCopyMoveForm, editPdfForm: editPdfForm, openEditPdf: openEditPdf, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, passToArchiveCallback: passToArchiveCallback, onSelectedTIDChanged: onCurrentTIDChangedCallback, showTodoDcmtForm: showTodoDcmtForm, onReferenceClick: onReferenceClick, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers })] }));
 };
 export default TMSearch;
 const TMTreeSelectorWrapper = ({ isMobile, onSelectedTIDChanged }) => {

package/lib/components/features/search/TMSearchResult.d.ts

@@ -37,6 +37,7 @@ interface ITMSearchResultProps {
     onFileOpened?: (blob: File | undefined) => void;
     onTaskCreateRequest?: (taskContext: TaskContext, onTaskCreated?: (task?: TaskDescriptor) => void) => void;
     openWGsCopyMoveForm?: (mode: "copyToWgDraft" | "copyToWgArchivedDoc", dcmtTypeDescriptor: DcmtTypeDescriptor, documents: Array<DcmtInfo>) => void;
+    editPdfForm?: boolean;
     openEditPdf?: (documents: Array<DcmtInfo>) => void;
     openCommentFormCallback?: (documents: Array<DcmtInfo>) => void;
     openAddDocumentForm?: () => void;

package/lib/components/features/search/TMSearchResult.js

@@ -67,7 +67,7 @@ const orderByName = (array) => {
         return 1;
     } return 0; });
 };
-const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, context = SearchResultContext.METADATA_SEARCH, isVisible = true, allowRelations = true, openDcmtFormAsModal = false, searchResults = [], showSearchResultSidebar = true, showSelector = false, groupId, title, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, showBackButton = true, selectedSearchResultTID, workingGroupContext = undefined, disableAccordionIfSingleCategory = false, floatingActionConfig, openInOffice, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync, onSelectedTIDChanged, onWFOperationCompleted, onClose, onFileOpened, onTaskCreateRequest, openWGsCopyMoveForm, openEditPdf, openCommentFormCallback, openAddDocumentForm, openS4TViewer = false, onOpenS4TViewerRequest, passToArchiveCallback, showTodoDcmtForm = false, onReferenceClick, }) => {
+const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, context = SearchResultContext.METADATA_SEARCH, isVisible = true, allowRelations = true, openDcmtFormAsModal = false, searchResults = [], showSearchResultSidebar = true, showSelector = false, groupId, title, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, showBackButton = true, selectedSearchResultTID, workingGroupContext = undefined, disableAccordionIfSingleCategory = false, floatingActionConfig, openInOffice, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync, onSelectedTIDChanged, onWFOperationCompleted, onClose, onFileOpened, onTaskCreateRequest, openWGsCopyMoveForm, editPdfForm = false, openEditPdf, openCommentFormCallback, openAddDocumentForm, openS4TViewer = false, onOpenS4TViewerRequest, passToArchiveCallback, showTodoDcmtForm = false, onReferenceClick, }) => {
     const [id, setID] = useState('');
     const [showApprovePopup, setShowApprovePopup] = useState(false);
     const [showRejectPopup, setShowRejectPopup] = useState(false);
@@ -576,6 +576,21 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
     const showToppyForApprove = useMemo(() => {
         return Boolean(isVisible && fromDTD && isApprovalWorkflowView(fromDTD) && !isOpenDcmtForm && !isOpenDetails && !isOpenMaster);
     }, [isVisible, fromDTD, isOpenDcmtForm, isOpenDetails, isOpenMaster]);
+    /**
+     * TMToppyDraggableHelpCenter viene nascosto quando è aperto qualsiasi altro popup o modale che potrebbe
+     * interferire con l'interazione dell'utente (approvazione, rifiuto, riassegnazione, info aggiuntive,
+     * modifica PDF, visualizzatore S4T, form todo documento).
+     */
+    const isToppyHelpCenterVisible = useMemo(() => {
+        return Boolean(showToppyForApprove
+            && !showApprovePopup
+            && !showRejectPopup
+            && !showReAssignPopup
+            && !showMoreInfoPopup
+            && !editPdfForm
+            && !openS4TViewer
+            && !showTodoDcmtForm);
+    }, [showToppyForApprove, showApprovePopup, showRejectPopup, showReAssignPopup, showMoreInfoPopup, editPdfForm, openS4TViewer, showTodoDcmtForm]);
     const floatingMenuItems = useMemo(() => {
         const baseMenuItems = getCommandsMenuItems(isMobile, fromDTD, allUsers, selectedItems, focusedItem, context, showFloatingBar, workingGroupContext, showSearch, setShowFloatingBar, openFormHandler, openSharedArchiveHandler, showSharedDcmtsHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler, openExportForm, handleToggleSearch, handleSignApprove, openSignSettingsForm, handleCheckOutOperationCallback, handleCheckInOperationCallback, showCheckoutInformationFormCallback, showHistoryCallback, copyCheckoutPathToClipboardOperationCallback, openWGsCopyMoveForm, openCommentFormCallback, openEditPdf, openAddDocumentForm, passToArchiveCallback, archiveMasterDocuments, archiveDetailDocuments, currentTIDHasMasterRelations, currentTIDHasDetailRelations, canArchiveMasterRelation, canArchiveDetailRelation, pairManyToMany, hasManyToManyRelation);
         const customButtons = customButtonMenuItems();
@@ -601,7 +616,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
                                     setIsOpenBatchUpdate(false);
                                     setIsModifiedBatchUpdate(false);
                                     await refreshSelectionDataRowsAsync();
-                                }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }), _jsx(TMToppyDraggableHelpCenter, { usePortal: true, isVisible: showToppyForApprove && !showApprovePopup && !showRejectPopup && !showReAssignPopup && !showMoreInfoPopup && !openS4TViewer && !showTodoDcmtForm, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => {
+                                }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }), _jsx(TMToppyDraggableHelpCenter, { usePortal: true, isVisible: isToppyHelpCenterVisible, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => {
                                             setShowApprovePopup(true);
                                         }, onSignApprove: () => {
                                             handleSignApprove();
@@ -644,7 +659,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
                                     TMSpinner.hide();
                                 }
                             }, onClose: () => setShowManyToManyChooser(false), manageUseLocalizedName: false }), showPairDcmtsModal &&
-                        _jsx(TMModal, { title: (isPairingManyToMany ? "Abbina" : "Disabbina") + " documenti", onClose: () => setShowPairDcmtsModal(false), width: isMobile ? '90%' : '50%', height: isMobile ? '90%' : '70%', children: _jsx(TMSearchResult, { searchResults: pairedSearchResults, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: onRefreshSearchAsync, onFileOpened: onFileOpened, onTaskCreateRequest: onTaskCreateRequest, openWGsCopyMoveForm: openWGsCopyMoveForm, openEditPdf: openEditPdf, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, passToArchiveCallback: passToArchiveCallback, showTodoDcmtForm: showTodoDcmtForm, allowFloatingBar: false, floatingActionConfig: pairFloatingActionConfig, showBackButton: false, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), showPairSearchModal &&
+                        _jsx(TMModal, { title: (isPairingManyToMany ? "Abbina" : "Disabbina") + " documenti", onClose: () => setShowPairDcmtsModal(false), width: isMobile ? '90%' : '50%', height: isMobile ? '90%' : '70%', children: _jsx(TMSearchResult, { searchResults: pairedSearchResults, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: onRefreshSearchAsync, onFileOpened: onFileOpened, onTaskCreateRequest: onTaskCreateRequest, openWGsCopyMoveForm: openWGsCopyMoveForm, editPdfForm: editPdfForm, openEditPdf: openEditPdf, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, passToArchiveCallback: passToArchiveCallback, showTodoDcmtForm: showTodoDcmtForm, allowFloatingBar: false, floatingActionConfig: pairFloatingActionConfig, showBackButton: false, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), showPairSearchModal &&
                         _jsx(TMModal, { title: "Ricerca documenti", onClose: () => setShowPairSearchModal(false), width: isMobile ? '90%' : '50%', height: isMobile ? '90%' : '70%', children: _jsx(TMSearch, { onlyShowSearchQueryPanel: true, inputTID: pairSearchModalTargetTID, inputMids: pairSearchModalInputMids, floatingActionConfig: pairSearchModalFloatingActionConfig, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), isOpenSharedArchive && _jsx(TMModal, { title: "Archiviazione condivisa", onClose: () => {
                             setIsOpenSharedArchive(false);
                         }, width: isMobile ? '90%' : '60%', height: isMobile ? '90%' : '80%', children: _jsx(TMArchive, { inputDID: focusedItem?.DID, inputTID: focusedItem?.TID, inputMids: currentMetadataValues.filter(md => md.mid && md.mid > 100).map(md => ({ mid: md.mid, value: md.value ?? '' })), isSharedArchive: true, inputFile: sharedDcmtFile, onSavedAsyncCallback: async (tid, did) => {
@@ -708,6 +723,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
         onRefreshSearchAsync,
         handleNavigateToWGs,
         handleNavigateToDossiers,
+        editPdfForm
     ]);
     const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID, fetchBlogDataTrigger: refreshBlogTrigger, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), [focusedItem, allTasks, refreshBlogTrigger, handleNavigateToWGs, handleNavigateToDossiers]);
     const tmSysMetadata = useMemo(() => _jsx(TMMetadataValues, { layoutMode: LayoutModes.Update, openChooserBySingleClick: true, TID: focusedItem?.TID, isReadOnly: true, deviceType: deviceType, metadataValues: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] }), [focusedItem, currentMetadataValues, deviceType]);

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.93",
+  "version": "6.20.0-dev1.95",
   "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;