@pzerelles/headlessui-svelte 2.1.2-next.7 → 2.1.2-next.9

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/ElementOrComponent.svelte

@@ -1,47 +1,26 @@
-<script lang="ts" generics="TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue">
-  import type { ElementType, Props } from "./types.js"
-  import { mergePropsAdvanced, RenderFeatures, RenderStrategy, type PropsForFeatures } from "./render.js"
-  import Generic from "./Generic.svelte"
-  import type { ComponentProps } from "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, RenderStrategy } 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} {name} bind:ref bind:value bind:checked />{/if}

package/dist/utils/Generic.svelte

@@ -1,32 +1,20 @@
-<script lang="ts" generics="TTag extends keyof SvelteHTMLProps, TSlot, TValue">
-  import { stateFromSlot } from "./state.js"
-  import type { ElementType, Props, SvelteHTMLProps } from "./types.js"
-
-  let {
-    slot = {} as TSlot,
-    tag,
-    name,
-    ref = $bindable(),
-    value = $bindable(),
-    checked = $bindable(),
-    children,
-    as = tag as TTag,
-    unmount,
-    static: isStatic,
-    ...props
-  }: {
-    as?: TTag
-    slot: TSlot
-    tag: ElementType
-    name: string
-    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 keyof SvelteHTMLProps, TSlot, TValue">import { stateFromSlot } from "./state.js";
+let {
+  slot = {},
+  tag,
+  name,
+  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/id.d.ts

@@ -1,4 +1,4 @@
 export declare const alphaid: (size?: number) => string;
 export declare const htmlid: (size?: number) => string;
-export declare const getIdContext: () => string | undefined;
+export declare const useProvidedId: () => string | undefined;
 export declare const createIdContext: (id: string) => string | undefined;

package/dist/utils/id.js

@@ -2,5 +2,5 @@ import { nanoid, customAlphabet } from "nanoid";
 import { getContext, setContext } from "svelte";
 export const alphaid = customAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz");
 export const htmlid = (size = 10) => alphaid(1) + nanoid(size - 1);
-export const getIdContext = () => getContext("Id");
+export const useProvidedId = () => getContext("Id");
 export const createIdContext = (id) => setContext("Id", id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.7",
+  "version": "2.1.2-next.9",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,40 +13,40 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.0.0-next.242"
+    "svelte": "^5.0.0-next.244"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.7",
+    "@changesets/cli": "^2.27.8",
     "@changesets/types": "^6.0.0",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.47.0",
     "@pzerelles/heroicons-svelte": "^2.1.5",
     "@sveltejs/adapter-auto": "^3.2.4",
-    "@sveltejs/kit": "^2.5.25",
+    "@sveltejs/kit": "^2.5.26",
     "@sveltejs/package": "^2.3.4",
     "@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/svelte": "^5.2.1",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^20.16.3",
+    "@types/node": "^20.16.5",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.1",
+    "eslint": "^9.10.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.43.0",
     "globals": "^15.9.0",
     "jsdom": "^24.1.3",
     "outdent": "^0.8.0",
-    "postcss": "^8.4.44",
+    "postcss": "^8.4.45",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "publint": "^0.2.10",
-    "svelte": "^5.0.0-next.242",
+    "svelte": "^5.0.0-next.244",
     "svelte-check": "^3.8.6",
     "tailwindcss": "^3.4.10",
     "tslib": "^2.7.0",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.3.0",
-    "vite": "^5.4.2",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.5.0",
+    "vite": "^5.4.4",
     "vitest": "^2.0.5"
   },
   "dependencies": {

package/dist/internal/id.d.ts

@@ -1,8 +0,0 @@
-type IdContext = {
-    value?: string;
-};
-export declare function useProvidedId(): IdContext | undefined;
-export declare function useIdContext(options: {
-    id?: string;
-}): void;
-export {};

package/dist/internal/id.js

@@ -1,11 +0,0 @@
-import { getContext, setContext } from "svelte";
-export function useProvidedId() {
-    return getContext("IdContext");
-}
-export function useIdContext(options) {
-    setContext("IdContext", {
-        get value() {
-            return options.id;
-        },
-    });
-}