@pzerelles/headlessui-svelte 2.1.2-next.29 → 2.1.2-next.30

package/dist/transition/Transition.svelte

@@ -1,105 +1,75 @@
-<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 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>
 
-<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
+<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;
   }
-
-  if (show === undefined) {
-    throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.")
+});
+let initial = $state(true);
+let changes = $state([show]);
+$effect(() => {
+  if (untrack(() => initial) === false) {
+    return;
   }
-
-  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?.()
+  if (changes[changes.length - 1] !== show) {
+    changes.push(show);
+    initial = false;
   }
-
-  const beforeLeave = () => {
-    if (initial) initial = false
-    _props.beforeLeave?.()
+});
+$effect(() => {
+  if (show) {
+    _state = TreeStates.Visible;
+  } else if (!hasChildren(nestingBag) && untrack(() => ref)) {
+    _state = TreeStates.Hidden;
   }
-
-  setContext<NestingContextValues>("NestingContext", nestingBag)
-  setContext<TransitionContextValues>("TransitionContext", {
-    get show() {
-      return show
-    },
-    get appear() {
-      return appear
-    },
-    get initial() {
-      return initial
-    },
-  })
-
-  const InternalChild = InternalTransitionChild<any>
+});
+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 InternalChild = InternalTransitionChild;
 </script>
 
 {#snippet children()}

package/dist/transition/TransitionChild.svelte

@@ -1,36 +1,16 @@
-<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 lang="ts" module>import { RenderFeatures } from "../utils/render.js";
+export const DEFAULT_TRANSITION_CHILD_TAG = "svelte:fragment";
+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 }: { as?: TTag } & TransitionChildProps<TTag> = $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 } = $props();
+const TransitionRootOrChild = !hasTransitionContext && hasOpenClosedContext ? Transition : InternalTransitionChild;
 </script>
 
 <TransitionRootOrChild bind:ref {...props} />

package/dist/utils/DisabledProvider.svelte

@@ -1,10 +1,6 @@
-<script lang="ts">
-  import { provideDisabled } from "../hooks/use-disabled.js"
-  import type { Snippet } from "svelte"
-
-  const { disabled, children }: { disabled?: boolean; children?: Snippet } = $props()
-
-  provideDisabled(() => disabled ?? false)
+<script lang="ts">import { provideDisabled } from "../hooks/use-disabled.js";
+const { disabled, children } = $props();
+provideDisabled(() => disabled ?? false);
 </script>
 
 {@render children?.()}

package/dist/utils/ElementOrComponent.svelte

@@ -1,46 +1,26 @@
-<script lang="ts" generics="TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue">
-  import type { ElementType, Props } from "./types.js"
-  import { mergePropsAdvanced, RenderFeatures, type PropsForFeatures } from "./render.js"
-  import Generic from "./Generic.svelte"
-
-  let {
-    ourProps,
-    theirProps,
-    slots,
-    slot = slots,
-    defaultTag,
-    features,
-    visible = true,
-    name,
-    ref = $bindable(),
-    value = $bindable(),
-    checked = $bindable(),
-  }: {
-    ourProps?: Expand<Props<any, TSlot> & PropsForFeatures<TFeature>>
-    theirProps: Expand<{ as?: TTag } & Props<any, TSlot, any>>
-    slot?: TSlot
-    slots?: TSlot
-    defaultTag: ElementType
-    features?: TFeature
-    visible?: boolean
-    name: string
-    ref?: HTMLElement
-    value?: TValue
-    checked?: boolean
-  } = $props()
-
-  const featureFlags = $derived(features ?? RenderFeatures.None)
-  const { static: isStatic = false, unmount = true, ...rest } = $derived(mergePropsAdvanced(theirProps, ourProps ?? {}))
-  const render = $derived(
-    visible ||
-      (featureFlags & RenderFeatures.Static && isStatic) ||
-      (featureFlags & RenderFeatures.RenderStrategy && !unmount)
-  )
-  const hiddenProps = $derived(
-    !visible && !(featureFlags & RenderFeatures.Static) && featureFlags & RenderFeatures.RenderStrategy && !unmount
-      ? { hidden: true, style: "display: none;" }
-      : {}
-  )
+<script lang="ts" generics="TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue">import { mergePropsAdvanced, RenderFeatures } from "./render.js";
+import Generic from "./Generic.svelte";
+let {
+  ourProps,
+  theirProps,
+  slots,
+  slot = slots,
+  defaultTag,
+  features,
+  visible = true,
+  name,
+  ref = $bindable(),
+  value = $bindable(),
+  checked = $bindable()
+} = $props();
+const featureFlags = $derived(features ?? RenderFeatures.None);
+const { static: isStatic = false, unmount = true, ...rest } = $derived(mergePropsAdvanced(theirProps, ourProps ?? {}));
+const render = $derived(
+  visible || featureFlags & RenderFeatures.Static && isStatic || featureFlags & RenderFeatures.RenderStrategy && !unmount
+);
+const hiddenProps = $derived(
+  !visible && !(featureFlags & RenderFeatures.Static) && featureFlags & RenderFeatures.RenderStrategy && !unmount ? { hidden: true, style: "display: none;" } : {}
+);
 </script>
 
 {#if render}<Generic {...rest} {...hiddenProps} {slot} tag={defaultTag} bind:ref bind:value bind:checked />{/if}

package/dist/utils/Generic.svelte

@@ -1,30 +1,19 @@
-<script lang="ts" generics="TTag extends ElementType, TSlot, TValue">
-  import { stateFromSlot } from "./state.js"
-  import type { ElementType, Props } from "./types.js"
-
-  let {
-    slot = {} as TSlot,
-    tag,
-    ref = $bindable(),
-    value = $bindable(),
-    checked = $bindable(),
-    children,
-    as = tag as TTag,
-    unmount,
-    static: isStatic,
-    ...props
-  }: {
-    as?: TTag
-    slot: TSlot
-    tag: ElementType
-    ref?: HTMLElement
-    value?: TValue
-    checked?: boolean
-  } & Props<TTag, TSlot> = $props()
-
-  const resolvedClass = $derived(
-    typeof props.class === "function" ? props.class(slot) : (props.class as string | undefined)
-  )
+<script lang="ts" generics="TTag extends ElementType, TSlot, TValue">import { stateFromSlot } from "./state.js";
+let {
+  slot = {},
+  tag,
+  ref = $bindable(),
+  value = $bindable(),
+  checked = $bindable(),
+  children,
+  as = tag,
+  unmount,
+  static: isStatic,
+  ...props
+} = $props();
+const resolvedClass = $derived(
+  typeof props.class === "function" ? props.class(slot) : props.class
+);
 </script>
 
 {#if as === "svelte:fragment"}

package/dist/utils/StableCollection.svelte

@@ -1,61 +1,43 @@
-<script lang="ts" module>
-  import { useId } from "../hooks/use-id.js"
-  import { getContext, setContext, type Snippet } from "svelte"
-
-  type CollectionKey = string | symbol
-  type CollectionItem = [number, () => void]
-  type Collection = ReturnType<typeof createCollection>
-
-  function createCollection() {
-    return {
-      /** @type {Map<string, Map<string, number>>} */
-      groups: new Map(),
-
-      get(group: string, key: CollectionKey): CollectionItem {
-        let list = this.groups.get(group)
-        if (!list) {
-          list = new Map()
-          this.groups.set(group, list)
-        }
-
-        let renders = list.get(key) ?? 0
-        // FIXME: This is a side-effect during render. `release` is only called in
-        // an effect cleanup so we may never release if we had to render multiple
-        // times before commit e.g. when a sibling suspends.
-        list.set(key, renders + 1)
-
-        let index = Array.from(list.keys()).indexOf(key)
-        function release() {
-          let renders = list.get(key)
-          if (renders > 1) {
-            list.set(key, renders - 1)
-          } else {
-            list.delete(key)
-          }
+<script lang="ts" module>import { useId } from "../hooks/use-id.js";
+import { getContext, setContext } from "svelte";
+function createCollection() {
+  return {
+    /** @type {Map<string, Map<string, number>>} */
+    groups: /* @__PURE__ */ new Map(),
+    get(group, key) {
+      let list = this.groups.get(group);
+      if (!list) {
+        list = /* @__PURE__ */ new Map();
+        this.groups.set(group, list);
+      }
+      let renders = list.get(key) ?? 0;
+      list.set(key, renders + 1);
+      let index = Array.from(list.keys()).indexOf(key);
+      function release() {
+        let renders2 = list.get(key);
+        if (renders2 > 1) {
+          list.set(key, renders2 - 1);
+        } else {
+          list.delete(key);
         }
-
-        return [index, release]
-      },
+      }
+      return [index, release];
     }
-  }
-
-  export function useStableCollectionIndex(group: string) {
-    let collection = getContext<Collection>("StableCollection")
-    if (!collection) throw new Error("You must wrap your component in a <StableCollection>")
-
-    let key = useId()
-    let [idx, cleanupIdx] = collection.get(group, key)
-
-    $effect(() => cleanupIdx)
-    return idx
-  }
+  };
+}
+export function useStableCollectionIndex(group) {
+  let collection = getContext("StableCollection");
+  if (!collection) throw new Error("You must wrap your component in a <StableCollection>");
+  let key = useId();
+  let [idx, cleanupIdx] = collection.get(group, key);
+  $effect(() => cleanupIdx);
+  return idx;
+}
 </script>
 
-<script lang="ts">
-  const collection = createCollection()
-  setContext<Collection>("StableCollection", collection)
-
-  let { children }: { children: Snippet } = $props()
+<script lang="ts">const collection = createCollection();
+setContext("StableCollection", collection);
+let { children } = $props();
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte

@@ -1,32 +1,17 @@
-<script lang="ts" module>
-  import type { Snippet } from "svelte"
+<script lang="ts" module></script>
 
-  export interface FloatingNodeProps {
-    children?: Snippet
-    id: string
+<script lang="ts">import { setContext } from "svelte";
+import { useFloatingParentNodeId } from "./FloatingTree.svelte";
+const { children, id } = $props();
+const parentId = useFloatingParentNodeId();
+setContext("FloatingNodeContext", {
+  get id() {
+    return id;
+  },
+  get parentId() {
+    return parentId.value;
   }
-</script>
-
-<script lang="ts">
-  /**
-   * Provides parent node context for nested floating elements.
-   * @see https://floating-ui.com/docs/FloatingTree
-   */
-  import { setContext } from "svelte"
-  import type { FloatingNodeType } from "../types.js"
-  import { useFloatingParentNodeId } from "./FloatingTree.svelte"
-
-  const { children, id }: FloatingNodeProps = $props()
-
-  const parentId = useFloatingParentNodeId()
-  setContext<FloatingNodeType>("FloatingNodeContext", {
-    get id() {
-      return id
-    },
-    get parentId() {
-      return parentId.value
-    },
-  })
+});
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte

@@ -1,94 +1,50 @@
-<script lang="ts" module>
-  import { getContext, type Snippet } from "svelte"
-  import { useId } from "../hooks/useId.svelte.js"
-  import type { FloatingNodeType, FloatingTreeType, ReferenceType } from "../types.js"
-  import { createPubSub } from "../utils/createPubSub.js"
-  import type { MutableRefObject } from "../../../ref.svelte.js"
-
-  //const FloatingNodeContext = React.createContext<FloatingNodeType | null>(null)
-  //const FloatingTreeContext = React.createContext<FloatingTreeType | null>(null)
-
-  /**
-   * Returns the parent node id for nested floating elements, if available.
-   * Returns `null` for top-level floating elements.
-   */
-  export const useFloatingParentNodeId = (): { readonly value: string | null } => {
-    const context = getContext<FloatingNodeType>("FloatingNodeContext")
-    return {
-      get value() {
-        return context?.id ?? null
-      },
+<script lang="ts" module>import { getContext } from "svelte";
+import { useId } from "../hooks/useId.svelte.js";
+import { createPubSub } from "../utils/createPubSub.js";
+export const useFloatingParentNodeId = () => {
+  const context = getContext("FloatingNodeContext");
+  return {
+    get value() {
+      return context?.id ?? null;
     }
-  }
-
-  /**
-   * Returns the nearest floating tree context, if available.
-   */
-  export const useFloatingTree = <RT extends ReferenceType = ReferenceType>(): FloatingTreeType<RT> | null =>
-    getContext<FloatingTreeType<RT>>("FloatingTreeContext") ?? null
-
-  /**
-   * Registers a node into the `FloatingTree`, returning its id.
-   * @see https://floating-ui.com/docs/FloatingTree
-   */
-  export function useFloatingNodeId(options: { customParentId?: string }): string {
-    const { customParentId } = $derived(options)
-    const id = useId()
-    const tree = useFloatingTree()
-    const reactParentId = useFloatingParentNodeId()
-    const parentId = $derived(customParentId || reactParentId.value)
-
-    $effect(() => {
-      const node = { id, parentId }
-      tree?.addNode(node)
-      return () => {
-        tree?.removeNode(node)
-      }
-    }) //, [tree, id, parentId])
-
-    return id
-  }
-
-  export interface FloatingTreeProps {
-    children?: Snippet
-  }
+  };
+};
+export const useFloatingTree = () => getContext("FloatingTreeContext") ?? null;
+export function useFloatingNodeId(options) {
+  const { customParentId } = $derived(options);
+  const id = useId();
+  const tree = useFloatingTree();
+  const reactParentId = useFloatingParentNodeId();
+  const parentId = $derived(customParentId || reactParentId.value);
+  $effect(() => {
+    const node = { id, parentId };
+    tree?.addNode(node);
+    return () => {
+      tree?.removeNode(node);
+    };
+  });
+  return id;
+}
 </script>
 
-<script lang="ts">
-  /**
-   * Provides context for nested floating elements when they are not children of
-   * each other on the DOM.
-   * This is not necessary in all cases, except when there must be explicit communication between parent and child floating elements. It is necessary for:
-   * - The `bubbles` option in the `useDismiss()` Hook
-   * - Nested virtual list navigation
-   * - Nested floating elements that each open on hover
-   * - Custom communication between parent and child floating elements
-   * @see https://floating-ui.com/docs/FloatingTree
-   */
-  import { setContext } from "svelte"
-
-  const { children }: FloatingTreeProps = $props()
-
-  const nodesRef = $state<MutableRefObject<Array<FloatingNodeType>>>({ current: [] })
-
-  const addNode = (node: FloatingNodeType) => {
-    nodesRef.current = [...nodesRef.current, node]
-  }
-
-  const removeNode = (node: FloatingNodeType) => {
-    nodesRef.current = nodesRef.current.filter((n) => n !== node)
-  }
-
-  const events = createPubSub()
-
-  setContext<FloatingTreeType<ReferenceType>>("FloatingTreeContext", {
-    get nodesRef() {
-      return nodesRef
-    },
-    addNode,
-    removeNode,
-    events,
-  })
+<script lang="ts">import { setContext } from "svelte";
+const { children } = $props();
+const nodesRef = $state({ current: [] });
+const addNode = (node) => {
+  nodesRef.current = [...nodesRef.current, node];
+};
+const removeNode = (node) => {
+  nodesRef.current = nodesRef.current.filter((n) => n !== node);
+};
+const events = createPubSub();
+setContext("FloatingTreeContext", {
+  get nodesRef() {
+    return nodesRef;
+  },
+  addNode,
+  removeNode,
+  events
+});
 </script>
 
 {#if children}{@render children()}{/if}