@pzerelles/headlessui-svelte 2.1.2-next.47 → 2.1.2-next.49

package/dist/transition/InternalTransitionChild.svelte

@@ -27,8 +27,8 @@
    *
    * ```tsx
    * <Transition show={true}>
-   *   <Transition.Child enter="duration-100"><div>Child 1</div></Transition.Child>
-   *   <Transition.Child enter="duration-200"><div>Child 2</div></Transition.Child>
+   *   <TransitionChild enter="duration-100"><div>Child 1</div></TransitionChild>
+   *   <TransitionChild enter="duration-200"><div>Child 2</div></TransitionChild>
    * </Transition>
    * ```
    *
@@ -39,11 +39,17 @@
   export function shouldForwardRef(props: TransitionRootProps) {
     return (
       // If we have any of the enter/leave classes
-      Boolean(props.enter || props.enterFrom || props.enterTo || props.leave || props.leaveFrom || props.leaveTo) ||
+      Boolean(
+        props.enter ||
+          props.enterFrom ||
+          props.enterTo ||
+          props.leave ||
+          props.leaveFrom ||
+          props.leaveTo ||
+          props.class
+      ) ||
       // If the `as` prop is not a Fragment
-      !props.asChild ||
-      // If we have a single child, then we can forward the ref directly
-      props.children !== undefined
+      props.asChild
     )
   }
 </script>
@@ -88,7 +94,7 @@
   const { register, unregister } = $derived(parentNesting)
 
   onMount(() => {
-    if (requiresRef) {
+    if (requiresRef || element) {
       container.current = element ?? null
       containerElement = element
     }
@@ -115,10 +121,10 @@
   //[state, container, register, unregister, show, strategy]
 
   $effect(() => {
-    if (!requiresRef) return
+    if (!requiresRef && !element) return
 
     if (_state === TreeStates.Visible && container.current === null) {
-      throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")
+      throw new Error("Did you forget to passthrough the actual DOM node as `element`?")
     }
   })
 
@@ -171,7 +177,7 @@
   }
 
   $effect(() => {
-    if (requiresRef && transition) return
+    if ((requiresRef || element) && transition) return
 
     // When we don't transition, then we can complete the transition
     // immediately.
@@ -185,7 +191,7 @@
     if (!transition) return false
 
     // If we don't require a ref, then we can't transition.
-    if (!requiresRef) return false
+    if (!requiresRef && !element) return false
 
     // If the server handoff isn't completed yet, we can't transition.
     //if (!ready) return false
@@ -221,7 +227,7 @@
         classNames(
           // Incoming classes if any
           // all components accept className (but all HTML elements do)
-          theirProps.asChild
+          theirProps.asChild || !requiresRef
             ? undefined
             : typeof theirProps.class === "function"
               ? theirProps.class({ element })
@@ -245,6 +251,7 @@
           !transitionData.transition && show && entered
         )?.trim() || undefined, // If `class` is an empty string, we can omit it
       ...transitionDataAttributes(transitionData),
+      ...(!theirProps.asChild && !requiresRef ? { asChild: true } : {}),
     })
   )
 

package/dist/transition/InternalTransitionChild.svelte.d.ts

@@ -9,8 +9,8 @@ import { type TransitionChildProps } from "./TransitionChild.svelte";
  *
  * ```tsx
  * <Transition show={true}>
- *   <Transition.Child enter="duration-100"><div>Child 1</div></Transition.Child>
- *   <Transition.Child enter="duration-200"><div>Child 2</div></Transition.Child>
+ *   <TransitionChild enter="duration-100"><div>Child 1</div></TransitionChild>
+ *   <TransitionChild enter="duration-200"><div>Child 2</div></TransitionChild>
  * </Transition>
  * ```
  *
@@ -18,7 +18,7 @@ import { type TransitionChildProps } from "./TransitionChild.svelte";
  * `Transition` parent, which is a `Fragment`, is not. So we should not forward
  * the ref to the `Fragment`.
  */
-export declare function shouldForwardRef(props: TransitionRootProps): boolean;
+export declare function shouldForwardRef(props: TransitionRootProps): boolean | undefined;
 declare const InternalTransitionChild: import("svelte").Component<TransitionChildProps, {}, "element">;
 type InternalTransitionChild = ReturnType<typeof InternalTransitionChild>;
 export default InternalTransitionChild;

package/dist/transition/context.svelte.js

@@ -11,14 +11,14 @@ export var TreeStates;
 export function useTransitionContext() {
     const context = getContext("TransitionContext");
     if (!context) {
-        throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
+        throw new Error("A <TransitionChild /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
     }
     return context;
 }
 export function useParentNesting() {
     const context = getContext("NestingContext");
     if (!context) {
-        throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
+        throw new Error("A <TransitionChild /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
     }
     return context;
 }

package/package.json

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