fix: svelte render strategy

Author: segunadebayo

.changeset/fix-svelte-backdrop-presence.md

@@ -0,0 +1,5 @@
+---
+'@ark-ui/svelte': patch
+---
+
+Fix `lazyMount` and `unmountOnExit` not working for backdrop in Dialog, Drawer, NavigationMenu, Tabs, and Tour components.

bun.lock

@@ -19,7 +19,7 @@
   const dialog = useDialogContext()
   const renderStrategyProps = useRenderStrategyPropsContext()
 
-  const presence = usePresence(() => ({ ...renderStrategyProps, present: dialog().open }))
+  const presence = usePresence(() => ({ ...renderStrategyProps(), present: dialog().open }))
   const mergedProps = $derived(mergeProps(dialog().getBackdropProps(), presence().getPresenceProps(), props))
 
   function setNode(node: Element | null) {

packages/svelte/src/lib/components/dialog/dialog-backdrop.svelte

@@ -19,7 +19,7 @@
   const drawer = useDrawerContext()
   const renderStrategyProps = useRenderStrategyPropsContext()
 
-  const presence = usePresence(() => ({ ...renderStrategyProps, present: drawer().open }))
+  const presence = usePresence(() => ({ ...renderStrategyProps(), present: drawer().open }))
   const mergedProps = $derived(mergeProps(drawer().getBackdropProps(), presence().getPresenceProps(), props))
 
   function setNode(node: Element | null) {

packages/svelte/src/lib/components/drawer/drawer-backdrop.svelte

@@ -33,7 +33,7 @@
   const renderStrategyProps = useRenderStrategyPropsContext()
 
   const presence = usePresence(() => ({
-    ...renderStrategyProps,
+    ...renderStrategyProps(),
     present: navigationMenu().value === value,
   }))
 

packages/svelte/src/lib/components/navigation-menu/navigation-menu-content.svelte

@@ -16,7 +16,7 @@
 
   const navigationMenu = useNavigationMenuContext()
   const renderStrategyProps = useRenderStrategyPropsContext()
-  const presence = usePresence(() => ({ ...renderStrategyProps, present: navigationMenu().open }))
+  const presence = usePresence(() => ({ ...renderStrategyProps(), present: navigationMenu().open }))
   const mergedProps = $derived(mergeProps(navigationMenu().getIndicatorProps(), presence().getPresenceProps(), props))
 
   function setNode(node: Element | null) {

packages/svelte/src/lib/components/navigation-menu/navigation-menu-indicator.svelte

@@ -19,7 +19,7 @@
 
   const navigationMenu = useNavigationMenuContext()
   const renderStrategyProps = useRenderStrategyPropsContext()
-  const presence = usePresence(() => ({ ...renderStrategyProps, present: navigationMenu().open }))
+  const presence = usePresence(() => ({ ...renderStrategyProps(), present: navigationMenu().open }))
   const mergedProps = $derived(
     mergeProps(navigationMenu().getViewportProps(viewportPropsContext?.()), presence().getPresenceProps(), props),
   )

packages/svelte/src/lib/components/navigation-menu/navigation-menu-viewport.svelte

@@ -21,7 +21,7 @@
   const renderStrategyProps = useRenderStrategyPropsContext()
 
   const machineProps = $derived.by<UsePresenceProps>(() => ({
-    ...renderStrategyProps,
+    ...renderStrategyProps(),
     present: tabs().value === contentProps.value,
     immediate: true,
   }))

packages/svelte/src/lib/components/tabs/tabs-content.svelte

@@ -17,7 +17,7 @@
 
   const tour = useTourContext()
   const presence = usePresence(() => ({
-    ...renderStrategyProps,
+    ...renderStrategyProps(),
     present: tour().open,
   }))
 

packages/svelte/src/lib/components/tour/tour-backdrop.svelte

@@ -19,7 +19,7 @@
 
   const presence = usePresence(() => ({
     present: tour().open,
-    ...renderStrategyProps,
+    ...renderStrategyProps(),
   }))
 
   const mergedProps = $derived(mergeProps(tour().getSpotlightProps(), presence().getPresenceProps(), props))