diff --git a/apps/builder/app/canvas/collapsed.ts b/apps/builder/app/canvas/collapsed.ts index 6ba29827ac36..b9b5cbdd63a4 100644 --- a/apps/builder/app/canvas/collapsed.ts +++ b/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); diff --git a/packages/sdk-components-react-radix/src/collapsible.tsx b/packages/sdk-components-react-radix/src/collapsible.tsx index 8999875a0c21..90c269935b38 100644 --- a/packages/sdk-components-react-radix/src/collapsible.tsx +++ b/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); + } + } + } + }, }; diff --git a/packages/sdk-components-react-radix/src/tabs.tsx b/packages/sdk-components-react-radix/src/tabs.tsx index f08d1318b802..b0183d57b1da 100644 --- a/packages/sdk-components-react-radix/src/tabs.tsx +++ b/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); + } + } + } + }, };