@pzerelles/headlessui-svelte 2.1.2-next.2 → 2.1.2-next.4

package/dist/transition/InternalTransitionChild.svelte

@@ -1,178 +1,267 @@
-<script lang="ts" module>import { compact, RenderStrategy } from "../utils/render.js";
-import { onMount, setContext, untrack } from "svelte";
-import {
-  hasChildren,
-  TreeStates,
-  useNesting,
-  useParentNesting,
-  useTransitionContext
-} from "./context.svelte.js";
-import { match } from "../utils/match.js";
-import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js";
-import { classNames } from "../utils/class-names.js";
-import { createOpenClosedContext, State } from "../internal/open-closed.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { DEFAULT_TRANSITION_CHILD_TAG } from "./TransitionChild.svelte";
-export function shouldForwardRef(props) {
-  return (
-    // If we have any of the enter/leave classes
-    Boolean(props.enter || props.enterFrom || props.enterTo || props.leave || props.leaveFrom || props.leaveTo) || // If the `as` prop is not a Fragment
-    (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== "svelte:fragment" || // If we have a single child, then we can forward the ref directly
-    props.children !== void 0
-  );
-}
-</script>
+<script lang="ts" module>
+  import { compact, RenderStrategy } from "../utils/render.js"
+  import type { ElementType } from "../utils/types.js"
+  import { onMount, setContext, untrack } from "svelte"
+  import {
+    hasChildren,
+    TreeStates,
+    useNesting,
+    useParentNesting,
+    useTransitionContext,
+    type NestingContextValues,
+    type TransitionDirection,
+  } from "./context.svelte.js"
+  import type { TransitionRootProps } from "./Transition.svelte"
+  import { match } from "../utils/match.js"
+  import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js"
+  import { classNames } from "../utils/class-names.js"
+  import { createOpenClosedContext, State } from "../internal/open-closed.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { DEFAULT_TRANSITION_CHILD_TAG, type TransitionChildProps } from "./TransitionChild.svelte"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">let { ref = $bindable(), ..._props } = $props();
-const {
-  // Whether or not to enable transitions on the current element (by exposing
-  // transition data). When set to false, the `Transition` component still
-  // acts as a transition boundary for `TransitionChild` components.
-  transition = true,
-  // Event "handlers"
-  beforeEnter,
-  afterEnter,
-  beforeLeave,
-  afterLeave,
-  // Class names
-  enter,
-  enterFrom,
-  enterTo,
-  entered,
-  leave,
-  leaveFrom,
-  leaveTo,
-  ...theirProps
-} = $derived(_props);
-let containerElement = $state();
-let container = $state({ current: null });
-const requiresRef = $derived(shouldForwardRef(_props));
-const strategy = $derived(theirProps.unmount ?? true ? RenderStrategy.Unmount : RenderStrategy.Hidden);
-const _transitionContext = useTransitionContext();
-const { show, appear, initial } = $derived(_transitionContext);
-let _state = $state(untrack(() => show) ? TreeStates.Visible : TreeStates.Hidden);
-const parentNesting = useParentNesting();
-const { register, unregister } = $derived(parentNesting);
-onMount(() => {
-  if (requiresRef) {
-    container.current = ref ?? null;
-    containerElement = ref;
-  }
-  return register(container);
-});
-$effect(() => {
-  if (strategy !== RenderStrategy.Hidden) return;
-  if (!container.current) return;
-  if (show && _state !== TreeStates.Visible) {
-    _state = TreeStates.Visible;
-    return;
+  /**
+   * Check if we should forward the ref to the child element or not. This is to
+   * prevent crashes when the `as` prop is a Fragment _and_ the component just acts
+   * as a state container (aka, there is no actual transition happening).
+   *
+   * E.g.:
+   *
+   * ```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>
+   * </Transition>
+   * ```
+   *
+   * In this scenario, the child components are transitioning, but the
+   * `Transition` parent, which is a `Fragment`, is not. So we should not forward
+   * the ref to the `Fragment`.
+   */
+  export function shouldForwardRef<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(
+    props: TransitionRootProps<TTag>
+  ) {
+    return (
+      // If we have any of the enter/leave classes
+      Boolean(props.enter || props.enterFrom || props.enterTo || props.leave || props.leaveFrom || props.leaveTo) ||
+      // If the `as` prop is not a Fragment
+      (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== "svelte:fragment" ||
+      // If we have a single child, then we can forward the ref directly
+      props.children !== undefined
+    )
   }
-  match(_state, {
-    [TreeStates.Hidden]: () => unregister(container),
-    [TreeStates.Visible]: () => register(container)
-  });
-});
-$effect(() => {
-  if (!requiresRef) return;
-  if (_state === TreeStates.Visible && container.current === null) {
-    throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?");
-  }
-});
-const skip = $derived(initial && !appear);
-const immediate = $derived(appear && show && initial);
-let isTransitioning = $state(false);
-let nesting = useNesting({
-  done: () => {
-    if (isTransitioning) return;
-    _state = TreeStates.Hidden;
-    unregister(container);
-  },
-  get parent() {
-    return parentNesting;
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">
+  let { ref = $bindable(), ..._props }: { as?: TTag } & TransitionChildProps<TTag> = $props()
+  const {
+    // Whether or not to enable transitions on the current element (by exposing
+    // transition data). When set to false, the `Transition` component still
+    // acts as a transition boundary for `TransitionChild` components.
+    transition = true,
+
+    // Event "handlers"
+    beforeEnter,
+    afterEnter,
+    beforeLeave,
+    afterLeave,
+
+    // Class names
+    enter,
+    enterFrom,
+    enterTo,
+    entered,
+    leave,
+    leaveFrom,
+    leaveTo,
+
+    ...theirProps
+  } = $derived(_props)
+  let containerElement = $state<HTMLElement>()
+  let container = $state<{ current: HTMLElement | null }>({ current: null })
+  const requiresRef = $derived(shouldForwardRef(_props))
+
+  const strategy = $derived((theirProps.unmount ?? true) ? RenderStrategy.Unmount : RenderStrategy.Hidden)
+
+  const _transitionContext = useTransitionContext()
+  const { show, appear, initial } = $derived(_transitionContext)
+
+  let _state = $state(untrack(() => show) ? TreeStates.Visible : TreeStates.Hidden)
+
+  const parentNesting = useParentNesting()
+  const { register, unregister } = $derived(parentNesting)
+
+  onMount(() => {
+    if (requiresRef) {
+      container.current = ref ?? null
+      containerElement = ref
+    }
+
+    return register(container)
+  })
+
+  $effect(() => {
+    // If we are in another mode than the Hidden mode then ignore
+    if (strategy !== RenderStrategy.Hidden) return
+    if (!container.current) return
+
+    // Make sure that we are visible
+    if (show && _state !== TreeStates.Visible) {
+      _state = TreeStates.Visible
+      return
+    }
+
+    match(_state, {
+      [TreeStates.Hidden]: () => unregister(container),
+      [TreeStates.Visible]: () => register(container),
+    })
+  })
+  //[state, container, register, unregister, show, strategy]
+
+  $effect(() => {
+    if (!requiresRef) return
+
+    if (_state === TreeStates.Visible && container.current === null) {
+      throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")
+    }
+  })
+
+  // Skipping initial transition
+  const skip = $derived(initial && !appear)
+  const immediate = $derived(appear && show && initial)
+
+  let isTransitioning = $state(false)
+
+  let nesting = useNesting({
+    done: () => {
+      // When all children have been unmounted we can only hide ourselves if and
+      // only if we are not transitioning ourselves. Otherwise we would unmount
+      // before the transitions are finished.
+      if (isTransitioning) return
+
+      _state = TreeStates.Hidden
+      unregister(container)
+    },
+    get parent() {
+      return parentNesting
+    },
+  })
+
+  const start = (show: boolean) => {
+    isTransitioning = true
+    const direction: TransitionDirection = show ? "enter" : "leave"
+
+    nesting.onStart(container, direction, (direction) => {
+      if (direction === "enter") beforeEnter?.()
+      else if (direction === "leave") beforeLeave?.()
+    })
   }
-});
-const start = (show2) => {
-  isTransitioning = true;
-  const direction = show2 ? "enter" : "leave";
-  nesting.onStart(container, direction, (direction2) => {
-    if (direction2 === "enter") beforeEnter?.();
-    else if (direction2 === "leave") beforeLeave?.();
-  });
-};
-const end = (show2) => {
-  let direction = show2 ? "enter" : "leave";
-  isTransitioning = false;
-  nesting.onStop(container, direction, (direction2) => {
-    if (direction2 === "enter") afterEnter?.();
-    else if (direction2 === "leave") afterLeave?.();
-  });
-  if (direction === "leave" && !hasChildren(nesting)) {
-    _state = TreeStates.Hidden;
-    unregister(container);
+
+  const end = (show: boolean) => {
+    let direction: TransitionDirection = show ? "enter" : "leave"
+
+    isTransitioning = false
+    nesting.onStop(container, direction, (direction) => {
+      if (direction === "enter") afterEnter?.()
+      else if (direction === "leave") afterLeave?.()
+    })
+
+    if (direction === "leave" && !hasChildren(nesting)) {
+      // When we don't have children anymore we can safely unregister from the
+      // parent and hide ourselves.
+      _state = TreeStates.Hidden
+      unregister(container)
+    }
   }
-};
-$effect(() => {
-  if (requiresRef && transition) return;
-  untrack(() => start(show));
-  untrack(() => end(show));
-});
-const enabled = $derived.by(() => {
-  if (!transition) return false;
-  if (!requiresRef) return false;
-  if (skip) return false;
-  return true;
-});
-const _transition = useTransition({
-  get enabled() {
-    return enabled;
-  },
-  get element() {
-    return containerElement;
-  },
-  get show() {
-    return show;
-  },
-  events: { start, end }
-});
-const { data: transitionData } = $derived(_transition);
-const ourProps = $derived(
-  compact({
-    class: classNames(
-      // Incoming classes if any
-      // all components accept className (but all HTML elements do)
-      theirProps.class,
-      // Apply these classes immediately
-      immediate && enter,
-      immediate && enterFrom,
-      // Map data attributes to `enter`, `enterFrom` and `enterTo` classes
-      transitionData.enter && enter,
-      transitionData.enter && transitionData.closed && enterFrom,
-      transitionData.enter && !transitionData.closed && enterTo,
-      // Map data attributes to `leave`, `leaveFrom` and `leaveTo` classes
-      transitionData.leave && leave,
-      transitionData.leave && !transitionData.closed && leaveFrom,
-      transitionData.leave && transitionData.closed && leaveTo,
-      // Map data attributes to `entered` class (backwards compatibility)
-      !transitionData.transition && show && entered
-    )?.trim() || void 0,
-    // If `class` is an empty string, we can omit it
-    ...transitionDataAttributes(transitionData)
+
+  $effect(() => {
+    if (requiresRef && transition) return
+
+    // When we don't transition, then we can complete the transition
+    // immediately.
+    untrack(() => start(show))
+    untrack(() => end(show))
   })
-);
-const openClosedState = $derived.by(() => {
-  let openClosedState2 = 0;
-  if (_state === TreeStates.Visible) openClosedState2 |= State.Open;
-  if (_state === TreeStates.Hidden) openClosedState2 |= State.Closed;
-  if (transitionData.enter) openClosedState2 |= State.Opening;
-  if (transitionData.leave) openClosedState2 |= State.Closing;
-  return openClosedState2;
-});
-createOpenClosedContext({
-  get value() {
-    return openClosedState;
-  }
-});
-setContext("NestingContext", nesting);
+
+  const enabled = $derived.by(() => {
+    // Should the current component transition? If not, then we can still
+    // orchestrate the child transitions.
+    if (!transition) return false
+
+    // If we don't require a ref, then we can't transition.
+    if (!requiresRef) return false
+
+    // If the server handoff isn't completed yet, we can't transition.
+    //if (!ready) return false
+
+    // If we start in a `show` state but without the `appear` prop, then we skip
+    // the initial transition.
+    if (skip) return false
+
+    return true
+  })
+
+  // Ignoring the `visible` state because this doesn't handle the hierarchy. If
+  // a leave transition on the `<Transition>` is done, but there is still a
+  // child `<TransitionChild>` busy, then `visible` would be `false`, while
+  // `state` would still be `TreeStates.Visible`.
+  const _transition = useTransition({
+    get enabled() {
+      return enabled
+    },
+    get element() {
+      return containerElement
+    },
+    get show() {
+      return show
+    },
+    events: { start, end },
+  })
+  const { data: transitionData } = $derived(_transition)
+
+  const ourProps = $derived(
+    compact({
+      class:
+        classNames(
+          // Incoming classes if any
+          // all components accept className (but all HTML elements do)
+          theirProps.class,
+
+          // Apply these classes immediately
+          immediate && enter,
+          immediate && enterFrom,
+
+          // Map data attributes to `enter`, `enterFrom` and `enterTo` classes
+          transitionData.enter && enter,
+          transitionData.enter && transitionData.closed && enterFrom,
+          transitionData.enter && !transitionData.closed && enterTo,
+
+          // Map data attributes to `leave`, `leaveFrom` and `leaveTo` classes
+          transitionData.leave && leave,
+          transitionData.leave && !transitionData.closed && leaveFrom,
+          transitionData.leave && transitionData.closed && leaveTo,
+
+          // Map data attributes to `entered` class (backwards compatibility)
+          !transitionData.transition && show && entered
+        )?.trim() || undefined, // If `class` is an empty string, we can omit it
+      ...transitionDataAttributes(transitionData),
+    })
+  )
+
+  const openClosedState = $derived.by(() => {
+    let openClosedState = 0
+    if (_state === TreeStates.Visible) openClosedState |= State.Open
+    if (_state === TreeStates.Hidden) openClosedState |= State.Closed
+    if (transitionData.enter) openClosedState |= State.Opening
+    if (transitionData.leave) openClosedState |= State.Closing
+    return openClosedState
+  })
+
+  createOpenClosedContext({
+    get value() {
+      return openClosedState
+    },
+  })
+  setContext<NestingContextValues>("NestingContext", nesting)
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_TRANSITION_CHILD_TAG} name="TransitionChild" bind:ref />

package/dist/transition/Transition.svelte

@@ -1,75 +1,105 @@
-<script lang="ts" module>import { State, useOpenClosed } from "../internal/open-closed.js";
-import { setContext, untrack } from "svelte";
-import {
-  DEFAULT_TRANSITION_CHILD_TAG,
-  TransitionChildRenderFeatures
-} from "./TransitionChild.svelte";
+<script lang="ts" module>
+  import { State, useOpenClosed } from "../internal/open-closed.js"
+  import type { ElementType } from "../utils/types.js"
+  import { setContext, untrack, type Component } from "svelte"
+  import {
+    type TransitionChildProps,
+    DEFAULT_TRANSITION_CHILD_TAG,
+    TransitionChildRenderFeatures,
+  } from "./TransitionChild.svelte"
+
+  export type TransitionRootProps<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> =
+    TransitionChildProps<TTag> & {
+      show?: boolean
+      appear?: boolean
+    }
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">import InternalTransitionChild, { shouldForwardRef } from "./InternalTransitionChild.svelte";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import {
-  hasChildren,
-  TreeStates,
-  useNesting
-} from "./context.svelte.js";
-let { ref = $bindable(), show, ..._props } = $props();
-const { appear = false, unmount = true, ...theirProps } = $derived(_props);
-const requiresRef = shouldForwardRef(_props);
-const usesOpenClosedState = useOpenClosed();
-if (show === void 0 && usesOpenClosedState !== null) {
-  show = (usesOpenClosedState.value & State.Open) === State.Open;
-}
-if (show === void 0) {
-  throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");
-}
-let _state = $state(show ? TreeStates.Visible : TreeStates.Hidden);
-const nestingBag = useNesting({
-  done: () => {
-    if (show) return;
-    _state = TreeStates.Hidden;
-  }
-});
-let initial = $state(true);
-let changes = $state([show]);
-$effect(() => {
-  if (untrack(() => initial) === false) {
-    return;
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">
+  import InternalTransitionChild, { shouldForwardRef } from "./InternalTransitionChild.svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import {
+    hasChildren,
+    TreeStates,
+    useNesting,
+    type NestingContextValues,
+    type TransitionContextValues,
+  } from "./context.svelte.js"
+
+  let { ref = $bindable(), show, ..._props }: { as?: TTag } & TransitionRootProps<TTag> = $props()
+  const { appear = false, unmount = true, ...theirProps } = $derived(_props)
+  const requiresRef = shouldForwardRef(_props)
+
+  const usesOpenClosedState = useOpenClosed()
+
+  if (show === undefined && usesOpenClosedState !== null) {
+    show = (usesOpenClosedState.value & State.Open) === State.Open
   }
-  if (changes[changes.length - 1] !== show) {
-    changes.push(show);
-    initial = false;
+
+  if (show === undefined) {
+    throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.")
   }
-});
-$effect(() => {
-  if (show) {
-    _state = TreeStates.Visible;
-  } else if (!hasChildren(nestingBag) && untrack(() => ref)) {
-    _state = TreeStates.Hidden;
+
+  let _state = $state(show ? TreeStates.Visible : TreeStates.Hidden)
+
+  const nestingBag = useNesting({
+    done: () => {
+      if (show) return
+      _state = TreeStates.Hidden
+    },
+  })
+
+  let initial = $state(true)
+
+  // Change the `initial` value
+  let changes = $state([show])
+  $effect(() => {
+    // We can skip this effect
+    if (untrack(() => initial) === false) {
+      return
+    }
+
+    // Track the changes
+    if (changes[changes.length - 1] !== show) {
+      changes.push(show)
+      initial = false
+    }
+  })
+
+  $effect(() => {
+    if (show) {
+      _state = TreeStates.Visible
+    } else if (!hasChildren(nestingBag) && untrack(() => ref)) {
+      _state = TreeStates.Hidden
+    }
+  })
+
+  const sharedProps = $derived({ unmount })
+
+  const beforeEnter = () => {
+    if (initial) initial = false
+    _props.beforeEnter?.()
   }
-});
-const sharedProps = $derived({ unmount });
-const beforeEnter = () => {
-  if (initial) initial = false;
-  _props.beforeEnter?.();
-};
-const beforeLeave = () => {
-  if (initial) initial = false;
-  _props.beforeLeave?.();
-};
-setContext("NestingContext", nestingBag);
-setContext("TransitionContext", {
-  get show() {
-    return show;
-  },
-  get appear() {
-    return appear;
-  },
-  get initial() {
-    return initial;
+
+  const beforeLeave = () => {
+    if (initial) initial = false
+    _props.beforeLeave?.()
   }
-});
-const InternalChild = InternalTransitionChild;
+
+  setContext<NestingContextValues>("NestingContext", nestingBag)
+  setContext<TransitionContextValues>("TransitionContext", {
+    get show() {
+      return show
+    },
+    get appear() {
+      return appear
+    },
+    get initial() {
+      return initial
+    },
+  })
+
+  const InternalChild = InternalTransitionChild as Component<TransitionChildProps<TTag>, any>
 </script>
 
 {#snippet children()}

package/dist/transition/TransitionChild.svelte

@@ -1,16 +1,36 @@
-<script lang="ts" module>import { RenderFeatures } from "../utils/render.js";
-export const DEFAULT_TRANSITION_CHILD_TAG = "svelte:fragment";
-export const TransitionChildRenderFeatures = RenderFeatures.RenderStrategy;
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+  import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
+  import type { TransitionEvents, TransitionClasses } from "./context.svelte.js"
+
+  type TransitionChildPropsWeControl = never
+
+  export type TransitionChildProps<TTag extends ElementType> = Props<
+    TTag,
+    TransitionChildRenderPropArg,
+    TransitionChildPropsWeControl,
+    PropsForFeatures<typeof TransitionChildRenderFeatures> &
+      TransitionClasses &
+      TransitionEvents & { transition?: boolean; appear?: boolean }
+  >
+
+  export const DEFAULT_TRANSITION_CHILD_TAG = "svelte:fragment"
+  export type TransitionChildRenderPropArg = HTMLElement
+  export const TransitionChildRenderFeatures = RenderFeatures.RenderStrategy
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">import { useOpenClosed } from "../internal/open-closed.js";
-import { getContext } from "svelte";
-import InternalTransitionChild from "./InternalTransitionChild.svelte";
-import Transition from "./Transition.svelte";
-const hasTransitionContext = !!getContext("TransitionContext");
-const hasOpenClosedContext = useOpenClosed() !== null;
-let { ref = $bindable(), as, ...props } = $props();
-const TransitionRootOrChild = !hasTransitionContext && hasOpenClosedContext ? Transition : InternalTransitionChild;
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">
+  import { useOpenClosed } from "../internal/open-closed.js"
+  import { getContext } from "svelte"
+  import InternalTransitionChild from "./InternalTransitionChild.svelte"
+  import Transition from "./Transition.svelte"
+
+  const hasTransitionContext = !!getContext("TransitionContext")
+  const hasOpenClosedContext = useOpenClosed() !== null
+
+  let { ref = $bindable(), as, ...props }: { as?: TTag } & TransitionChildProps<TTag> = $props()
+
+  const TransitionRootOrChild = !hasTransitionContext && hasOpenClosedContext ? Transition : InternalTransitionChild
 </script>
 
 <TransitionRootOrChild bind:ref {...props} />