@pzerelles/headlessui-svelte 2.1.2-next.50 → 2.1.2-next.52

package/dist/disclosure/DisclosurePanel.svelte

@@ -21,8 +21,6 @@
 <script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { mergeProps } from "../utils/render.js"
-  import TransitionChild from "../transition/TransitionChild.svelte"
   import {
     createDisclosurePanelContext,
     DisclosureStates,
@@ -70,6 +68,9 @@
         ? (usesOpenClosedState.value & State.Open) === State.Open
         : context.disclosureState === DisclosureStates.Open
     },
+    get asChild() {
+      return theirProps.asChild
+    },
   })
 
   const slot = $derived({

package/dist/hooks/use-transition.svelte.d.ts

@@ -13,6 +13,7 @@ export declare function useTransition(options: {
         start?(show: boolean): void;
         end?(show: boolean): void;
     };
+    asChild?: boolean;
 }): {
     readonly visible: boolean;
     readonly data: TransitionData;

package/dist/hooks/use-transition.svelte.js

@@ -1,6 +1,7 @@
+import { hasChildren, useNesting, } from "../transition/context.svelte.js";
 import { disposables, useDisposables } from "../utils/disposables.js";
 import { once } from "../utils/once.js";
-import { untrack } from "svelte";
+import { setContext, untrack } from "svelte";
 /**
  * ```
  * ┌──────┐                │        ┌──────────────┐
@@ -36,12 +37,19 @@ export function transitionDataAttributes(data) {
     return attributes;
 }
 export function useTransition(options) {
-    const { enabled, element, show, events } = $derived(options);
+    const { enabled, element, show, events, asChild } = $derived(options);
     let visible = $state((() => show)());
     let flags = $state((() => (enabled && visible ? TransitionState.Enter | TransitionState.Closed : TransitionState.None))());
     let inFlight = $state(false);
     let cancelled = $state(false);
     const d = useDisposables();
+    const nestingBag = useNesting({
+        done: () => {
+            if (show)
+                return;
+            visible = false;
+        },
+    });
     function retry(enabled, show, node, d) {
         if (!enabled)
             return;
@@ -50,7 +58,7 @@ export function useTransition(options) {
         }
         if (!node) {
             // Retry if the DOM node isn't available yet
-            if (show) {
+            if (show && !asChild) {
                 flags |= TransitionState.Enter | TransitionState.Closed;
                 return d.nextFrame(() => retry(enabled, show, node, d));
             }
@@ -115,7 +123,7 @@ export function useTransition(options) {
                 }
                 inFlight = false;
                 flags = 0;
-                if (!show) {
+                if (!show && !hasChildren(nestingBag)) {
                     visible = false;
                 }
                 events?.end?.(show);
@@ -134,6 +142,23 @@ export function useTransition(options) {
         leave: enabled ? !!(flags & TransitionState.Leave) : undefined,
         transition: enabled ? !!(flags & (TransitionState.Enter | TransitionState.Leave)) : undefined,
     });
+    $effect(() => {
+        if (enabled)
+            untrack(() => {
+                setContext("NestingContext", nestingBag);
+                setContext("TransitionContext", {
+                    get show() {
+                        return show;
+                    },
+                    get appear() {
+                        return false;
+                    },
+                    get initial() {
+                        return false;
+                    },
+                });
+            });
+    });
     return {
         get visible() {
             return enabled ? visible : show;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.50",
+  "version": "2.1.2-next.52",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",