fix: Radix components bugs during edit

apps/builder/app/canvas/collapsed.ts

@@ -129,8 +129,10 @@ const findFirstNonContentsParent = (element: Element) => {
     // Get the computed style of the parent
     const computedStyle = window.getComputedStyle(parent);
 
+    const isHidden = parent.getAttribute("hidden") !== null;
+
     // Check if the display is not 'contents'
-    if (computedStyle.display !== "contents") {
+    if (computedStyle.display !== "contents" && !isHidden) {
       return parent;
     }
 
@@ -196,14 +198,20 @@ const recalculate = () => {
       continue;
     }
 
+    const elementStyle = window.getComputedStyle(element);
+
     // Find all Leaf like elements
     // Leaf like elements are elements that have no children or all children are absolute or fixed
+    // Excluding hidden elements without size
     if (element.childElementCount === 0) {
-      elementsToRecalculate.push(element);
-    }
+      if (element.offsetParent !== null) {
+        elementsToRecalculate.push(element);
+      }
 
-    const elementStyle = window.getComputedStyle(element);
-    // const elementPosition = window.getComputedStyle(element).position;
+      if (elementStyle.position === "fixed") {
+        elementsToRecalculate.push(element);
+      }
+    }
 
     const parentElement = findFirstNonContentsParent(element);
 

packages/sdk-components-react-radix/src/collapsible.tsx

@@ -59,4 +59,18 @@ export const hooksCollapsible: Hook = {
       }
     }
   },
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:CollapsibleContent`) {
+        const collapsible = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Collapsible`
+        );
+        if (collapsible) {
+          context.setMemoryProp(collapsible, "open", undefined);
+        }
+      }
+    }
+  },
 };

packages/sdk-components-react-radix/src/tabs.tsx

@@ -44,7 +44,10 @@ const namespace = "@webstudio-is/sdk-components-react-radix";
 export const hooksTabs: Hook = {
   onNavigatorSelect: (context, event) => {
     for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:TabsContent`) {
+      if (
+        instance.component === `${namespace}:TabsContent` ||
+        instance.component === `${namespace}:TabsTrigger`
+      ) {
         const tabs = getClosestInstance(
           event.instancePath,
           instance,
@@ -59,4 +62,24 @@ export const hooksTabs: Hook = {
       }
     }
   },
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (
+        instance.component === `${namespace}:TabsContent` ||
+        instance.component === `${namespace}:TabsTrigger`
+      ) {
+        const tabs = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Tabs`
+        );
+        const contentValue =
+          context.getPropValue(instance, "value") ??
+          context.indexesWithinAncestors.get(instance.id)?.toString();
+        if (tabs && contentValue) {
+          context.setMemoryProp(tabs, "value", undefined);
+        }
+      }
+    }
+  },
 };