fix: svelte portal warning

Author: segunadebayo

packages/svelte/CHANGELOG.md

@@ -20,18 +20,17 @@ description: All notable changes will be documented in this file.
   - Fix issue where the browser might not be able to infer the mime type of a file due to limitations, drag source or
     security restrictions. As a fallback in the file validation logic, we now infer the mime type from the file
     extension.
+- **Portal**: Fix issue where `lifecycle_double_unmount` warning could be triggered.
 
 ## [5.1.1] - 2025-07-05
 
 ### Fixed
 
 - **Combobox**
-
   - Expose `reason` to `onOpenChange` and `onInputValueChange` callbacks
   - Expose `api.clearHighlightedValue` function to clear highlighted value
 
 - **Date Picker**
-
   - Fix issue where datepicker errors when setting `selectionMode=range` and `minView=year`
   - Fix issue where `focusedValue` could not be fully controlled
 
@@ -40,7 +39,6 @@ description: All notable changes will be documented in this file.
 - **Progress**: Improve `valueAsString` formatting
 
 - **Select**
-
   - Select highlighted item only if it exists in the collection
   - Expose `api.clearHighlightedValue` function to clear highlighted value
 
@@ -110,15 +108,13 @@ description: All notable changes will be documented in this file.
   is now required. A warning will be logged if it is not provided
 
 - **Tree View**
-
   - Fix issue where clicking a branch with indeterminate state doesn't check its child nodes
   - Remove `aria-busy` attribute from branch trigger when not loading children
   - Expose node details in `onExpandChange`, `onSelectionChange` and `onFocusChange`
 
 - **Angle Slider**: Fix issue where scrubbing doesn't feel smooth on touch devices
 
 - **Timer**
-
   - Fix issue where timer could continue beyond `targetMs` when window is not visible
   - Add validation to ensure `startMs` and `targetMs` are configured correctly
   - Fix `progressPercent` calculation for countdown timers
@@ -135,7 +131,6 @@ description: All notable changes will be documented in this file.
 ### Added
 
 - **Tree View**
-
   - Add support for checkbox state for checkbox trees via `defaultCheckedValue`, `checkedValue`, `onCheckedChange` props
   - Add callback for when `loadChildren` fails via `onLoadChildrenError` prop
 

packages/svelte/src/lib/components/portal/portal.svelte

@@ -1,7 +1,18 @@
 <script module lang="ts">
   import type { Snippet } from 'svelte'
+
   export interface PortalProps {
+    /**
+     * If true, the portal will not be rendered.
+     */
+    disabled?: boolean
+    /**
+     * The container to render the portal into.
+     */
     container?: HTMLElement
+    /**
+     * The children to render in the portal.
+     */
     children: Snippet
   }
 </script>
@@ -13,13 +24,37 @@
   import { getAllContexts, mount, unmount } from 'svelte'
   import PortalConsumer from './portal-consumer.svelte'
 
-  const { container = globalThis?.document?.body, children }: PortalProps = $props()
+  const { container = globalThis?.document?.body, children, disabled = false }: PortalProps = $props()
 
   const context = getAllContexts()
 
+  let instance: ReturnType<typeof mount> | null = null
+
+  const unmountInstance = () => {
+    if (instance) {
+      unmount(instance)
+      instance = null
+    }
+  }
+
   $effect(() => {
-    mount(PortalConsumer, { target: container, props: { children }, context })
+    if (disabled || !container) {
+      unmountInstance()
+      return
+    }
+
+    instance = mount(PortalConsumer, {
+      target: container,
+      props: { children },
+      context,
+    })
 
-    return () => unmount(PortalConsumer)
+    return () => {
+      unmountInstance()
+    }
   })
 </script>
+
+{#if disabled}
+  {@render children?.()}
+{/if}