@topconsultnpm/sdkui-react 6.19.0-dev2.45 → 6.19.0-dev2.47

package/lib/components/editors/TMTextArea.d.ts

@@ -12,6 +12,7 @@ interface ITMTextArea extends ITMEditorBase {
     rows?: number;
     maxLength?: number;
     resize?: boolean;
+    autoCalculateRows?: boolean;
 }
 declare const TMTextArea: React.FunctionComponent<ITMTextArea>;
 export default TMTextArea;

package/lib/components/editors/TMTextArea.js

@@ -28,7 +28,7 @@ const StyledTextAreaEditorButton = styled.div `
 // Define the TMTextArea component
 const TMTextArea = (props) => {
     // Extract properties from the props object
-    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true } = props;
+    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true, autoCalculateRows = true } = props;
     // Reference to the textarea DOM element
     const inputRef = useRef(null);
     // Stores the textarea is focused
@@ -46,6 +46,8 @@ const TMTextArea = (props) => {
     const deviceType = useDeviceType();
     // Attach a `ResizeObserver` to the textarea to monitor changes in width: dynamically updates rows based on textarea content and width
     useEffect(() => {
+        if (!autoCalculateRows)
+            return;
         const observer = new ResizeObserver(() => { if (currentValue) {
             updateRows();
         } });
@@ -55,18 +57,18 @@ const TMTextArea = (props) => {
         return () => { if (inputRef.current) {
             observer.unobserve(inputRef.current);
         } };
-    }, [currentValue]);
+    }, [currentValue, autoCalculateRows]);
     // Update current value whenever the `value` prop changes, synchronize the internal state with the `value` prop
     useEffect(() => {
         setCurrentValue(value);
     }, [value]);
     // Recalculate the number of rows whenever the `currentValue` changes
     useEffect(() => {
-        if (currentValue) {
+        if (autoCalculateRows && currentValue) {
             const newRowCount = calculateRows(currentValue);
             setCalculatedRows(newRowCount);
         }
-    }, [currentValue]);
+    }, [currentValue, autoCalculateRows]);
     // Populate the formula menu items whenever the `formulaItems` prop changes
     useEffect(() => {
         if (formulaItems && formulaItems.length > 0) {
@@ -171,7 +173,8 @@ const TMTextArea = (props) => {
                             _jsx(StyledTextAreaEditorButton, { onClick: () => {
                                     onValueChanged?.({ target: { value: undefined } });
                                     setCurrentValue('');
-                                    setCalculatedRows(1);
+                                    if (autoCalculateRows)
+                                        setCalculatedRows(1);
                                     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));

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

@@ -40,19 +40,39 @@ const ToppyButton = styled.button.attrs((props) => ({
   background-color: transparent;
   border: none;
 
-  /* Dimensioni dinamiche in base allo stato collassato
+  /* Dimensioni dinamiche in base allo stato collassato e al tipo di dispositivo
      Usa min() per adattarsi su schermi piccoli */
-  width: ${(props) => (props.$isCollapsed ? 'min(60px, 100%)' : '120px')};
-  height: ${(props) => (props.$isCollapsed ? 'min(70px, 100%)' : '140px')};
+  width: ${(props) => {
+    if (props.$isMobile) {
+        return props.$isCollapsed ? 'min(40px, 100%)' : '80px';
+    }
+    return props.$isCollapsed ? 'min(60px, 100%)' : '120px';
+}};
+  height: ${(props) => {
+    if (props.$isMobile) {
+        return props.$isCollapsed ? 'min(45px, 100%)' : '95px';
+    }
+    return props.$isCollapsed ? 'min(70px, 100%)' : '140px';
+}};
   max-width: 100%;
   max-height: 100%;
 
   user-select: none;
 
   img {
-    /* Dimensioni dell'immagine in base allo stato collassato */
-    width: ${(props) => (props.$isCollapsed ? '60px' : '120px')};
-    height: ${(props) => (props.$isCollapsed ? '60px' : '140px')};
+    /* Dimensioni dell'immagine in base allo stato collassato e al tipo di dispositivo */
+    width: ${(props) => {
+    if (props.$isMobile) {
+        return props.$isCollapsed ? '40px' : '80px';
+    }
+    return props.$isCollapsed ? '60px' : '120px';
+}};
+    height: ${(props) => {
+    if (props.$isMobile) {
+        return props.$isCollapsed ? '40px' : '95px';
+    }
+    return props.$isCollapsed ? '60px' : '140px';
+}};
     pointer-events: none;
     border-radius: 50%; /* Rende l'immagine circolare */
     /* Rotazione leggera in base all'allineamento */
@@ -106,6 +126,7 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
     // Ref e stato per tracciare le dimensioni della speech bubble
     const bubbleRef = useRef(null);
     const [bubbleSize, setBubbleSize] = useState({ width: 0, height: 0 });
+    const isMobile = deviceType === DeviceType.MOBILE;
     /**
      * Effect per aggiornare le dimensioni della bubble quando cambia il contenuto
      * o lo stato di collassamento. Necessario per calcolare correttamente i limiti
@@ -278,6 +299,7 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
         }
         return undefined;
     }, [isDragging]);
-    return (_jsxs(ToppyButton, { ref: buttonRef, "$align": align, "$isDragging": isDragging, "$x": position?.x, "$y": position?.y, "$isVisible": isVisible, "$isCollapsed": isCollapsed, onMouseDown: handleMouseDown, onContextMenu: (e) => e.preventDefault(), onDoubleClick: toggleCollapse, children: [(content && !isCollapsed) && (_jsx(ToppySpeechBubble, { ref: bubbleRef, align: align, children: content })), _jsx("img", { src: Toppy, alt: "Toppy Help", draggable: false })] }));
+    return (_jsxs(ToppyButton, { ref: buttonRef, "$align": align, "$isDragging": isDragging, "$x": position?.x, "$y": position?.y, "$isVisible": isVisible, "$isCollapsed": isCollapsed, "$isMobile": isMobile, onMouseDown: handleMouseDown, onContextMenu: (e) => e.preventDefault(), onClick: (e) => { if (isMobile)
+            toggleCollapse(e); }, onDoubleClick: toggleCollapse, children: [(content && !isCollapsed) && (_jsx(ToppySpeechBubble, { ref: bubbleRef, align: align, children: content })), _jsx("img", { src: Toppy, alt: "Toppy Help", draggable: false })] }));
 };
 export default ToppyDraggableHelpCenter;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.19.0-dev2.45",
+    "version": "6.19.0-dev2.47",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",