hotfix: Hidden component's box height not shrinking (#10003)

* fix : shrink box size on visibility hidden

* chore : version bump

* fix

* fix : shrinking in subcontainer

.version

@@ -1 +1 @@
-2.60.3
+2.60.4

frontend/.version

@@ -1 +1 @@
-2.60.3
+2.60.4

frontend/src/Editor/Container.jsx

@@ -1046,10 +1046,12 @@ const WidgetWrapper = ({
   const isWidgetActive = (isSelected || isDragging) && mode !== 'view';
 
   const { label = { value: null } } = propertiesDefinition ?? {};
+  const visibility = propertiesDefinition?.visibility?.value ?? stylesDefinition?.visibility?.value ?? null;
+  const resolvedVisibility = resolveWidgetFieldValue(visibility);
 
   const styles = {
     width: width + 'px',
-    height: calculateMoveableBoxHeight() + 'px',
+    height: resolvedVisibility ? calculateMoveableBoxHeight() + 'px' : '10px',
     transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`,
     ...(isGhostComponent ? { opacity: 0.5 } : {}),
     ...(isWidgetActive ? { zIndex: 3 } : {}),

frontend/src/Editor/DragContainer.jsx

@@ -10,6 +10,7 @@ import { restrictedWidgetsObj } from './WidgetManager/restrictedWidgetsConfig';
 import { useGridStore, useIsGroupHandleHoverd, useOpenModalWidgetId } from '@/_stores/gridStore';
 import toast from 'react-hot-toast';
 import { individualGroupableProps } from './gridUtils';
+import { resolveWidgetFieldValue } from '@/_helpers/utils';
 
 const CANVAS_BOUNDS = { left: 0, top: 0, right: 0, bottom: 0, position: 'css' };
 const RESIZABLE_CONFIG = {
@@ -246,6 +247,30 @@ export default function DragContainer({
     lastDraggedEventsRef.current = posWithParent;
   };
 
+  const widgetsWithDefinitions = Object.entries(boxes).map(([id, box]) => {
+    const propertiesDefinition = box?.component?.definition?.properties || {};
+    const stylesDefinition = box?.component?.definition?.styles || {};
+    return {
+      id,
+      propertiesDefinition,
+      stylesDefinition,
+      ...box,
+    };
+  });
+
+  const isComponentVisible = (id) => {
+    for (const key in widgetsWithDefinitions) {
+      if (widgetsWithDefinitions[key].id === id) {
+        const visibility =
+          widgetsWithDefinitions[key].propertiesDefinition?.visibility?.value ??
+          widgetsWithDefinitions[key].stylesDefinition?.visibility?.value ??
+          null;
+        return resolveWidgetFieldValue(visibility);
+      }
+    }
+    return true;
+  };
+
   return mode === 'edit' ? (
     <>
       <Moveable
@@ -375,6 +400,9 @@ export default function DragContainer({
           useGridStore.getState().actions.setDragTarget();
         }}
         onResizeStart={(e) => {
+          if (!isComponentVisible(e.target.id)) {
+            return false;
+          }
           performance.mark('onResizeStart');
           useGridStore.getState().actions.setResizingComponentId(e.target.id);
           e.setMin([gridWidth, 10]);

frontend/src/Editor/SubContainer.jsx

@@ -715,11 +715,19 @@ const SubWidgetWrapper = ({
 
   const isDragging = useGridStore((state) => state?.draggingComponentId === id);
 
+  const isComponentVisible = () => {
+    const visibility =
+      widget.component.definition?.properties?.visibility?.value ??
+      widget.component.definition?.styles?.visibility?.value ??
+      null;
+    return resolveWidgetFieldValue(visibility);
+  };
+
   let width = (canvasWidth * layoutData.width) / 43;
   width = width > canvasWidth ? canvasWidth : width; //this handles scenarios where the width is set more than canvas for older components
   const styles = {
     width: width + 'px',
-    height: layoutData.height + 'px',
+    height: isComponentVisible() ? layoutData.height + 'px' : '10px',
     transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`,
     ...(isGhostComponent ? { opacity: 0.5 } : {}),
   };

server/.version

@@ -1 +1 @@
-2.60.3
+2.60.4