@topconsultnpm/sdkui-react 6.20.0-dev1.111 → 6.20.0-dev1.113

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

@@ -103,6 +103,8 @@ export const MenuItem = styled.div `
   transition: all 0.15s ease;
   position: relative;
   user-select: none;
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
   font-size: var(--base-font-size, 13px);
   color: ${props => props.$disabled ? '#999' : '#1a1a1a'};
   font-weight: 500;

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -131,6 +131,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         isDragging: false,
         isConfigMode: false,
         orientation: initialConfig.orientation,
+        verticalDirection: 'down',
         items: [],
         draggedItemIndex: null,
     });
@@ -138,8 +139,10 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const dragOffset = useRef({ x: 0, y: 0 });
     const [dragOverIndex, setDragOverIndex] = useState(null);
     const [pixelPosition, setPixelPosition] = useState({ x: 0, y: 0 }); // Calculated pixel position
+    const [isOrientationChanging, setIsOrientationChanging] = useState(false); // Hide bar during orientation transition
     const containerSizeRef = useRef({ width: 0, height: 0 });
     const stateSnapshot = useRef(null);
+    const positionBeforeOrientationChange = useRef(null);
     const floatingBarItemIds = useRef(new Set());
     const floatingBarItemNames = useRef(new Set());
     useEffect(() => {
@@ -549,6 +552,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 stateSnapshot.current = {
                     items: [...s.items],
                     orientation: s.orientation,
+                    verticalDirection: s.verticalDirection,
                     position: { ...s.position },
                 };
                 return { ...s, isConfigMode: true };
@@ -617,6 +621,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 ...s,
                 items: [...stateSnapshot.current.items],
                 orientation: stateSnapshot.current.orientation,
+                verticalDirection: stateSnapshot.current.verticalDirection,
                 position: { ...stateSnapshot.current.position },
                 isConfigMode: true,
             }));
@@ -638,6 +643,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 ...s,
                 items: [...stateSnapshot.current.items],
                 orientation: stateSnapshot.current.orientation,
+                verticalDirection: stateSnapshot.current.verticalDirection,
                 position: { ...stateSnapshot.current.position },
                 isConfigMode: false,
             }));
@@ -662,6 +668,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                         ...s,
                         items: [...stateSnapshot.current.items],
                         orientation: stateSnapshot.current.orientation,
+                        verticalDirection: stateSnapshot.current.verticalDirection,
                         position: { ...stateSnapshot.current.position },
                         isConfigMode: false,
                     }));
@@ -672,24 +679,89 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     };
     const toggleOrientation = () => {
         const newOrientation = state.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+        // Hide the bar during transition to prevent flicker
+        setIsOrientationChanging(true);
+        // When switching from vertical back to horizontal, restore the original position
+        if (state.orientation === 'vertical' && newOrientation === 'horizontal') {
+            if (positionBeforeOrientationChange.current) {
+                const savedPosition = positionBeforeOrientationChange.current.position;
+                const savedPixelPosition = positionBeforeOrientationChange.current.pixelPosition;
+                setPixelPosition(savedPixelPosition);
+                setState(s => ({
+                    ...s,
+                    orientation: newOrientation,
+                    verticalDirection: 'down',
+                    position: savedPosition,
+                }));
+                positionBeforeOrientationChange.current = null;
+                // Show the bar after the state has been applied
+                requestAnimationFrame(() => {
+                    setIsOrientationChanging(false);
+                });
+                return;
+            }
+        }
+        // When switching to vertical, save current position and check if we need to expand upward
         if (state.orientation === 'horizontal' && newOrientation === 'vertical') {
+            // Save the current position before changing orientation
+            positionBeforeOrientationChange.current = {
+                position: { ...state.position },
+                pixelPosition: { ...pixelPosition },
+            };
             if (floatingRef.current) {
                 const floating = floatingRef.current.getBoundingClientRect();
-                const screenHeight = window.innerHeight;
-                if (floating.width > screenHeight - 70) {
+                const containerHeight = isConstrained && containerRef.current
+                    ? containerRef.current.getBoundingClientRect().height
+                    : window.innerHeight;
+                // Estimate vertical height (horizontal width becomes vertical height)
+                const estimatedVerticalHeight = floating.width;
+                if (estimatedVerticalHeight > containerHeight - 70) {
                     ShowAlert({
                         mode: 'warning',
                         title: 'Troppi elementi',
                         message: 'Ci sono troppi elementi nella barra mobile per la modalità verticale.',
                         duration: 4000,
                     });
+                    positionBeforeOrientationChange.current = null; // Clear saved position since we're not changing
+                    setIsOrientationChanging(false); // Show bar again since we're not changing
+                    return;
+                }
+                // Check if we're in the bottom part of the screen and don't have enough space below
+                const spaceBelow = containerHeight - floating.bottom;
+                const spaceAbove = floating.top;
+                const needsVerticalSpace = estimatedVerticalHeight - floating.height; // Additional space needed
+                // If not enough space below but enough space above, expand upward
+                if (spaceBelow < needsVerticalSpace && spaceAbove >= needsVerticalSpace) {
+                    // Calculate the new Y position so the bottom of the bar stays at the same place
+                    const currentBottom = pixelPosition.y + floating.height;
+                    const newPixelY = currentBottom - estimatedVerticalHeight;
+                    setState(s => ({
+                        ...s,
+                        orientation: newOrientation,
+                        verticalDirection: 'up',
+                    }));
+                    // Update pixel position and percentage after orientation change
+                    requestAnimationFrame(() => {
+                        requestAnimationFrame(() => {
+                            const newY = Math.max(0, newPixelY);
+                            setPixelPosition(prev => ({ ...prev, y: newY }));
+                            const newPercentY = pixelsToPercent(newY, containerHeight);
+                            setState(s => ({
+                                ...s,
+                                position: { ...s.position, y: newPercentY },
+                            }));
+                            setIsOrientationChanging(false); // Show bar after position is set
+                        });
+                    });
                     return;
                 }
             }
         }
+        // Default case: just change orientation without special positioning
         setState(s => ({
             ...s,
             orientation: newOrientation,
+            verticalDirection: 'down',
         }));
         requestAnimationFrame(() => {
             requestAnimationFrame(() => {
@@ -715,6 +787,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                         }));
                     }
                 }
+                setIsOrientationChanging(false); // Show bar after position is set
             });
         });
     };
@@ -778,7 +851,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         setState(s => ({ ...s, draggedItemIndex: null }));
         setDragOverIndex(null);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, "$bgColor": bgColor, onContextMenu: (e) => e.preventDefault(), children: [!state.isConfigMode ? (_jsx(ContextMenu, { items: [
+    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$verticalDirection": state.verticalDirection, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, "$isHidden": isOrientationChanging, "$bgColor": bgColor, onContextMenu: (e) => e.preventDefault(), children: [!state.isConfigMode ? (_jsx(ContextMenu, { items: [
                             ...(!disbaleConfigMode ? [{
                                     name: SDKUI_Localizator.Configure,
                                     onClick: () => {

package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts

@@ -7,17 +7,21 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
     $x: number;
     $y: number;
     $orientation: "horizontal" | "vertical";
+    $verticalDirection: "down" | "up";
     $isDragging: boolean;
     $isConfigMode: boolean;
     $isConstrained?: boolean;
+    $isHidden?: boolean;
     $bgColor?: string;
 }>, {
     $x: number;
     $y: number;
     $orientation: "horizontal" | "vertical";
+    $verticalDirection: "down" | "up";
     $isDragging: boolean;
     $isConfigMode: boolean;
     $isConstrained?: boolean;
+    $isHidden?: boolean;
     $bgColor?: string;
 }>> & string;
 export declare const GripHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {

package/lib/components/NewComponents/FloatingMenuBar/styles.js

@@ -39,7 +39,8 @@ export const FloatingContainer = styled.div.attrs(props => ({
   position: ${props => props.$isConstrained ? 'absolute' : 'fixed'};
   z-index: ${props => props.$isConfigMode ? 9999 : 1500};
   display: flex;
-  flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : 'column'};
+  visibility: ${props => props.$isHidden ? 'hidden' : 'visible'};
+  flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : (props.$verticalDirection === 'up' ? 'column-reverse' : 'column')};
   align-items: center;
   background: ${props => props.$bgColor || 'linear-gradient(135deg, #0071BC 0%, #1B1464 100%)'};
   border: 1px solid #667eea;
@@ -50,6 +51,8 @@ export const FloatingContainer = styled.div.attrs(props => ({
               0 6px 16px rgba(0, 0, 0, 0.2);
   cursor: ${props => props.$isDragging ? 'grabbing' : 'default'};
   user-select: none;
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
   animation: ${props => props.$isConfigMode && css `${shake} 0.3s ease-in-out`};
   transition: none;
 

package/lib/components/NewComponents/FloatingMenuBar/types.d.ts

@@ -31,6 +31,7 @@ export interface TMFloatingMenuBarState {
     isDragging: boolean;
     isConfigMode: boolean;
     orientation: 'horizontal' | 'vertical';
+    verticalDirection: 'down' | 'up';
     items: TMFloatingMenuItem[];
     draggedItemIndex: number | null;
 }

package/lib/components/base/TMButton.js

@@ -61,6 +61,8 @@ const StyledIconButton = styled.button.withConfig({ shouldForwardProp: prop => !
   background-color: transparent;
   color: ${props => !props.disabled ? getColor(props.color) : 'rgb(180, 180, 180)'};
   user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
 `;
 const StyledTextButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
   font-size: ${props => props.fontSize};
@@ -79,6 +81,8 @@ const StyledTextButton = styled.button.withConfig({ shouldForwardProp: prop => !
   background-color: transparent;
   color: ${props => !props.disabled ? getColor(props.color) : 'rgb(231, 231, 231)'};
   user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
   transition: ease 200ms;
   &:hover {
     background-color: rgb(241, 241, 241);
@@ -118,6 +122,8 @@ const StyledAdvancedButton = styled.button `
     overflow: hidden;
     color: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? TMColors.primaryColor : 'white'};
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     border: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? `1px solid ${TMColors.primaryColor}` : 'none'};
     background: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? 'white' : 'unset'};
 `;

package/lib/components/base/TMClosableList.js

@@ -49,6 +49,8 @@ const StyledClosabelIcon = styled.div `
     justify-content: flex-start;
     padding: 2px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
 `;
 const StyledClosableItemsCount = styled.div `
     /* color: ${Colors.primary}; */
@@ -56,6 +58,8 @@ const StyledClosableItemsCount = styled.div `
     cursor: pointer;
     margin-right: 5px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
 `;
 const TMClosableList = ({ dataSource, visibility = false, label, inline = false, hasPadding = true }) => {
     const [status, setStatus] = useState(visibility);

package/lib/components/base/TMDropDownMenu.js

@@ -12,6 +12,8 @@ const StyledContent = styled.div `
     opacity: ${props => props.$disabled ? 0.4 : 1};
     pointer-events: ${props => props.$disabled ? 'none' : ''};
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     display: flex;
     align-items: center;
 

package/lib/components/base/TMPanel.js

@@ -65,6 +65,8 @@ const StyledPanelContent = styled.div `
     justify-content: space-between;
     position: relative;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     outline: none;
     &:focus {
         outline: none;

package/lib/components/base/TMPopUp.js

@@ -31,6 +31,8 @@ const StyledExeptionToolbar = styled.div `
     gap: 5px;
     padding: 5px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     border-top: 1px solid #f3f3f3;
     /* background-color: ${TMColors.primary_container}; */
     background-color: white;
@@ -45,6 +47,8 @@ const StyledMessageToolbar = styled.div `
     gap: clamp(2px, 1vw, 5px);
     padding: clamp(3px, 1vw, 5px);
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     border-top: 1px solid #f3f3f3;
     background-color: #ffffff;
     z-index: 1;
@@ -69,6 +73,8 @@ const TabContextContainer = styled.div `
     border-radius: 5px;
     overflow: auto;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     position: relative;
 `;
 const StyledAppVersionText = styled.p `

package/lib/components/base/TMToolbarCard.js

@@ -42,6 +42,8 @@ const StyledSearchCardContent = styled.div `
     
     position: relative;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
 `;
 const TMToolbarCard = ({ items = [], onItemClick, selectedItem, showPanel, color = TMColors.colorHeader, backgroundColor = TMColors.backgroundColorHeader, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '3px', onBack, onClose, onHeaderDoubleClick }) => {
     return (_jsxs(StyledSearchCard, { children: [showHeader && _jsx(StyledSearchCardHeader, { "$backgroundColor": backgroundColor, "$color": color, onDoubleClick: () => { if (onHeaderDoubleClick)

package/lib/components/editors/TMCheckBox.js

@@ -16,6 +16,8 @@ const StyledCheckBoxLabel = styled.div `
     color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : props.$labelColor ? props.$labelColor : TMColors.text_normal : TMColors.disabled};
     font-size: ${props => props.$fontSize};
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     &:focus{
         outline: none;
         background-image: linear-gradient(white, #E4E9F7);

package/lib/components/editors/TMEditorStyled.js

@@ -48,6 +48,8 @@ export const StyledEditorIcon = styled.div `
     margin-right: 2px;
     font-size: 18px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     transform: translateY(18px);
 `;
 export const StyledEditorLabel = styled.div `
@@ -55,6 +57,8 @@ export const StyledEditorLabel = styled.div `
     color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : props.$color ? props.$color : TMColors.label_normal : TMColors.disabled};
     padding: 0 3px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     transform: ${props => props.$labelPosition === 'left' && 'translateY(5px)'};
     width: max-content;
     transform: translate(10px, 6px);

package/lib/components/editors/TMRadioButton.js

@@ -39,6 +39,8 @@ const StyledradioButtonLabel = styled.label `
     font-size: ${props => props.$fontSize};
     color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.text_normal : TMColors.disabled};
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     width: 100%;
     cursor: ${props => !props.$disabled && 'pointer'};
     &:focus{

package/lib/components/features/assistant/TMToppyDraggableHelpCenter.js

@@ -67,6 +67,8 @@ const TMToppyButton = styled.div.attrs((props) => ({
     padding: 0;
     outline: none;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     transition: background-color 0.3s ease, border 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease, width 0.3s ease, height 0.3s ease;
     
     img {

package/lib/components/features/documents/TMDcmtBlog.js

@@ -87,6 +87,6 @@ const TMDcmtBlog = ({ tid, did, isVisible, fetchBlogDataTrigger, allTasks = [],
                                 }, externalBlogPost: externalBlogPost, resetExternalBlogPost: resetExternalBlogPost, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, afterTaskSaved: refreshCallback }) }) }) }), (showCommentForm && tid && did) && _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid, did } }, onClose: () => setShowCommentForm(false), refreshCallback: refreshCallback, participants: [], showAttachmentsSection: false, allArchivedDocumentsFileItems: [], onFilterCreated: handleFilterCreated })] }));
 };
 export default TMDcmtBlog;
-const StyledContainer = styled.div ` user-select: none; overflow: hidden; background-color: #ffffff; width: calc(100%); height: calc(100%); display: flex; gap: 10px; `;
+const StyledContainer = styled.div ` user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; overflow: hidden; background-color: #ffffff; width: calc(100%); height: calc(100%); display: flex; gap: 10px; `;
 const StyledSectionContainer = styled.div ` width:  100%; height: 100%; display:flex; flex-direction: column; `;
 const StyledBoardContainer = styled.div `width: 100%; height: 100%;`;

package/lib/components/features/documents/TMDcmtPreview.js

@@ -405,7 +405,7 @@ const StyledPreviewContainer = styled.div `display: flex; justify-content: cente
 export const StyledHeaderIcon = styled.div ` color: ${props => props.$color};  cursor: pointer; display: flex; align-items: center; justify-content: center; &:hover{ color: white ; transition: 200ms ease; } `;
 export const StyledPanelStatusContainer = styled.div ` width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; `;
 const StyledPreviewNotAvailable = styled.div ` display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; `;
-const ImageContainer = styled.div ` width: calc(100% - 20px); height: 100%; left:10px; position: absolute; top:50px; overflow: hidden; background: #f5f5f5; touch-action: none; user-select: none; cursor: ${({ $cursor }) => $cursor ?? 'default'}; `;
+const ImageContainer = styled.div ` width: calc(100% - 20px); height: 100%; left:10px; position: absolute; top:50px; overflow: hidden; background: #f5f5f5; touch-action: none; user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; cursor: ${({ $cursor }) => $cursor ?? 'default'}; `;
 const TopToolbar = styled.div ` position: absolute; top: 0; width: 100%; height: 40px; background-color: #e4e4e4; display: flex; justify-content: center; align-items: center; z-index: 10; `;
 const ToolbarCenter = styled.div ` display: flex; align-items: center; gap: 12px;`;
 const ToolbarIconButton = styled.button ` background: #f0f0f0; border: none; color: #313131; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; padding: 0; border-radius: 50px; &:hover{ background-color: #c4c4c4; } &:disabled { color: #c2c2c2; cursor: not-allowed; } `;

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

@@ -427,6 +427,8 @@ export const StyledToppyText = styled.p `
     color: #2559A5;
     font-size: 1rem;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     margin: 0;
     display: -webkit-box;
     -webkit-box-orient: vertical;

package/lib/components/features/workflow/diagram/DiagramItemComponent.js

@@ -70,6 +70,8 @@ const StyledDiagramItem = styled.g `
     fill: #333;
     text-anchor: middle;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     pointer-events: none;
   }
 `;

package/lib/components/grids/TMValidationItemsList.js

@@ -14,6 +14,8 @@ const StyledValidationItemsTabs = styled.div `
     border-bottom: 1px solid $primary;
     width: 100%;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     background-color: ${TMColors.primary};
     z-index: 20;
     border-top: 1px solid #122C4C;
@@ -44,12 +46,16 @@ const StyledMessageIcon = styled.div `
 const StyledMessageResultType = styled.div `
     width: 50px;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     margin-right: 20px;
 `;
 const StyledMessageElement = styled.div `
     width: 150px;
     text-align: left;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     margin-right: 20px;
 `;
 const StyledMessageText = styled.div `

package/lib/components/query/TMQueryEditor.js

@@ -985,6 +985,8 @@ const StyledContent = styled.div `
     opacity: ${props => props.$disabled ? 0.4 : 1};
     pointer-events: ${props => props.$disabled ? 'none' : ''};
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     display: flex;
     align-items: center;
 

package/lib/components/sidebar/TMHeader.js

@@ -400,6 +400,8 @@ const AppMenuButton = styled.div `
   cursor: pointer;
   box-shadow: 0 2px 8px #2459a41a;
   user-select: none;
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
   gap: 5px;
   transition:
     transform 0.18s cubic-bezier(.4,0,.2,1),
@@ -445,6 +447,8 @@ const UserAvatar = styled.div `
     font-weight: 600;
     letter-spacing: 0.5px;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 `;
 const UserAvatarLarge = styled(UserAvatar) `

package/lib/components/sidebar/TMSidebarItem.js

@@ -21,6 +21,8 @@ const StyledTMSidebarItemContainer = styled.div `
     position: relative;
     transition: background-color 200ms ease;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     background-color: ${props => props.$isSelected ? 'rgba(255,255,255,0.35)' : 'transparent'};
 
     p {

package/lib/helper/TMToppyMessage.js

@@ -19,6 +19,8 @@ const StyledToppyText = styled.div `
     color: #2559A5;
     font-size: 1rem;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     margin: 0;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -35,6 +37,8 @@ const StyledToppyImage = styled.img `
     height: auto;
     display: block;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
 `;
 const TMToppyMessage = (props) => {
     const { message, titleTooltip, maxWidth } = props;

package/package.json

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