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

package/dist/tabs/Tab.svelte

@@ -1,207 +1,155 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+<script lang="ts" module>const DEFAULT_TAB_TAG = "button";
+</script>
 
-  const DEFAULT_TAB_TAG = "button" as const
-  type TabRenderPropArg = {
-    hover: boolean
-    focus: boolean
-    active: boolean
-    autofocus: boolean
-    selected: boolean
-    disabled: boolean
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TAB_TAG">import { useId } from "../hooks/use-id.js";
+import { useStableCollectionIndex } from "../utils/StableCollection.svelte";
+import { Focus, focusIn, FocusResult } from "../utils/focus-management.js";
+import { getOwnerDocument } from "../utils/owner.js";
+import { match } from "../utils/match.js";
+import { microTask } from "../utils/microTask.js";
+import { useActivePress } from "../hooks/use-active-press.svelte.js";
+import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
+import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
+import { onMount } from "svelte";
+import { useHover } from "../hooks/use-hover.svelte.js";
+import { mergeProps } from "../utils/render.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { useTabs } from "./context.svelte.js";
+const internalId = useId();
+let {
+  ref = $bindable(),
+  id = `headlessui-tabs-tab-${internalId}`,
+  disabled = false,
+  autofocus = false,
+  ...theirProps
+} = $props();
+const context = useTabs("Tab");
+const { orientation, activation, selectedIndex, tabs, panels, registerTab, change } = $derived(context);
+const tabRef = $derived({ current: ref });
+onMount(() => registerTab(tabRef));
+const mySSRIndex = useStableCollectionIndex("tabs");
+const myIndex = $derived.by(() => {
+  const index = tabs.findIndex((tab) => tab === tabRef);
+  return index === -1 ? mySSRIndex : index;
+});
+const selected = $derived(myIndex === selectedIndex);
+const activateUsing = $derived((cb) => {
+  let result = cb();
+  if (result === FocusResult.Success && activation === "auto") {
+    let newTab = getOwnerDocument(ref)?.activeElement;
+    let idx = context.tabs.findIndex((tab) => tab.current === newTab);
+    if (idx !== -1) change(idx);
   }
-  type TabPropsWeControl = "aria-controls" | "aria-selected" | "role" | "tabIndex"
-
-  export type TabProps<TTag extends ElementType = typeof DEFAULT_TAB_TAG> = Props<
-    TTag,
-    TabRenderPropArg,
-    TabPropsWeControl,
-    {
-      id?: string
-      autofocus?: boolean
-      disabled?: boolean
+  return result;
+});
+const handleKeyDown = (event) => {
+  let list = tabs.map((tab) => tab.current).filter(Boolean);
+  if (event.key === " " || event.key === "Enter") {
+    event.preventDefault();
+    event.stopPropagation();
+    change(myIndex);
+    return;
+  }
+  switch (event.key) {
+    case "Home":
+    case "PageUp":
+      event.preventDefault();
+      event.stopPropagation();
+      return activateUsing(() => focusIn(list, Focus.First));
+    case "End":
+    case "PageDown":
+      event.preventDefault();
+      event.stopPropagation();
+      return activateUsing(() => focusIn(list, Focus.Last));
+  }
+  let result = activateUsing(() => {
+    return match(orientation, {
+      vertical() {
+        if (event.key === "ArrowUp") return focusIn(list, Focus.Previous | Focus.WrapAround);
+        if (event.key === "ArrowDown") return focusIn(list, Focus.Next | Focus.WrapAround);
+        return FocusResult.Error;
+      },
+      horizontal() {
+        if (event.key === "ArrowLeft") return focusIn(list, Focus.Previous | Focus.WrapAround);
+        if (event.key === "ArrowRight") return focusIn(list, Focus.Next | Focus.WrapAround);
+        return FocusResult.Error;
+      }
+    });
+  });
+  if (result === FocusResult.Success) {
+    return event.preventDefault();
+  }
+};
+let ready = $state(false);
+const handleSelection = () => {
+  if (ready) return;
+  ready = true;
+  ref?.focus({ preventScroll: true });
+  change(myIndex);
+  microTask(() => {
+    ready = false;
+  });
+};
+const handleMouseDown = (event) => {
+  event.preventDefault();
+};
+const { isHovered: hover, hoverProps } = $derived(
+  useHover({
+    get disabled() {
+      return disabled;
     }
-  >
-</script>
-
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TAB_TAG">
-  import { useId } from "../hooks/use-id.js"
-  import { useStableCollectionIndex } from "../utils/StableCollection.svelte"
-  import { Focus, focusIn, FocusResult } from "../utils/focus-management.js"
-  import { getOwnerDocument } from "../utils/owner.js"
-  import { match } from "../utils/match.js"
-  import { microTask } from "../utils/microTask.js"
-  import { useActivePress } from "../hooks/use-active-press.svelte.js"
-  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
-  import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js"
-  import type { MutableRefObject } from "../utils/ref.svelte.js"
-  import { onMount } from "svelte"
-  import { useHover } from "../hooks/use-hover.svelte.js"
-  import { mergeProps } from "../utils/render.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { useTabs } from "./context.svelte.js"
-
-  const internalId = useId()
-  let {
-    ref = $bindable(),
-    id = `headlessui-tabs-tab-${internalId}`,
-    disabled = false,
-    autofocus = false,
-    ...theirProps
-  }: { as?: TTag } & TabProps<TTag> = $props()
-
-  const context = useTabs("Tab")
-  const { orientation, activation, selectedIndex, tabs, panels, registerTab, change } = $derived(context)
-
-  const tabRef = $derived<MutableRefObject<HTMLElement | undefined>>({ current: ref })
-
-  onMount(() => registerTab(tabRef))
-
-  const mySSRIndex = useStableCollectionIndex("tabs")
-
-  const myIndex = $derived.by(() => {
-    const index = tabs.findIndex((tab) => tab === tabRef)
-    return index === -1 ? mySSRIndex : index
   })
-  const selected = $derived(myIndex === selectedIndex)
-
-  const activateUsing = $derived((cb: () => FocusResult) => {
-    let result = cb()
-    if (result === FocusResult.Success && activation === "auto") {
-      let newTab = getOwnerDocument(ref)?.activeElement
-      let idx = context.tabs.findIndex((tab) => tab.current === newTab)
-      if (idx !== -1) change(idx)
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
     }
-    return result
   })
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    let list = tabs.map((tab) => tab.current).filter(Boolean) as HTMLElement[]
-
-    if (event.key === " " || event.key === "Enter") {
-      event.preventDefault()
-      event.stopPropagation()
-
-      change(myIndex)
-      return
-    }
-
-    switch (event.key) {
-      case "Home":
-      case "PageUp":
-        event.preventDefault()
-        event.stopPropagation()
-
-        return activateUsing(() => focusIn(list, Focus.First))
-
-      case "End":
-      case "PageDown":
-        event.preventDefault()
-        event.stopPropagation()
-
-        return activateUsing(() => focusIn(list, Focus.Last))
+);
+const { isFocusVisible: focus, focusProps } = $derived(
+  useFocusRing({
+    get autofocus() {
+      return autofocus;
     }
-
-    let result = activateUsing(() => {
-      return match(orientation, {
-        vertical() {
-          if (event.key === "ArrowUp") return focusIn(list, Focus.Previous | Focus.WrapAround)
-          if (event.key === "ArrowDown") return focusIn(list, Focus.Next | Focus.WrapAround)
-          return FocusResult.Error
-        },
-        horizontal() {
-          if (event.key === "ArrowLeft") return focusIn(list, Focus.Previous | Focus.WrapAround)
-          if (event.key === "ArrowRight") return focusIn(list, Focus.Next | Focus.WrapAround)
-          return FocusResult.Error
-        },
-      })
-    })
-
-    if (result === FocusResult.Success) {
-      return event.preventDefault()
-    }
-  }
-
-  let ready = $state(false)
-  const handleSelection = () => {
-    if (ready) return
-    ready = true
-
-    ref?.focus({ preventScroll: true })
-    change(myIndex)
-
-    microTask(() => {
-      ready = false
-    })
-  }
-
-  // This is important because we want to only focus the tab when it gets focus
-  // OR it finished the click event (mouseup). However, if you perform a `click`,
-  // then you will first get the `focus` and then get the `click` event.
-  const handleMouseDown = (event: MouseEvent) => {
-    event.preventDefault()
+  })
+);
+const slot = $derived({
+  selected,
+  hover,
+  active,
+  focus,
+  autofocus,
+  disabled
+});
+const resolvedType = useResolveButtonType({
+  get props() {
+    return { type: theirProps.type, as: theirProps.as };
+  },
+  get ref() {
+    return tabRef;
   }
-
-  const { isHovered: hover, hoverProps } = $derived(
-    useHover({
-      get disabled() {
-        return disabled
-      },
-    })
-  )
-  const { pressed: active, pressProps } = $derived(
-    useActivePress({
-      get disabled() {
-        return disabled
-      },
-    })
-  )
-  const { isFocusVisible: focus, focusProps } = $derived(
-    useFocusRing({
-      get autofocus() {
-        return autofocus
-      },
-    })
-  )
-
-  const slot = $derived({
-    selected,
-    hover,
-    active,
-    focus,
-    autofocus,
-    disabled,
-  } satisfies TabRenderPropArg)
-
-  const resolvedType = useResolveButtonType({
-    get props() {
-      return { type: theirProps.type, as: theirProps.as }
-    },
-    get ref() {
-      return tabRef
+});
+const ourProps = $derived(
+  mergeProps(
+    {
+      onkeydown: handleKeyDown,
+      onmousedown: handleMouseDown,
+      onclick: handleSelection,
+      id,
+      role: "tab",
+      type: resolvedType.type,
+      "aria-controls": panels[myIndex]?.current?.id,
+      "aria-selected": selected,
+      tabIndex: selected ? 0 : -1,
+      disabled: disabled || void 0,
+      autofocus
     },
-  })
-
-  const ourProps = $derived(
-    mergeProps(
-      {
-        onkeydown: handleKeyDown,
-        onmousedown: handleMouseDown,
-        onclick: handleSelection,
-        id,
-        role: "tab",
-        type: resolvedType.type,
-        "aria-controls": panels[myIndex]?.current?.id,
-        "aria-selected": selected,
-        tabIndex: selected ? 0 : -1,
-        disabled: disabled || undefined,
-        autofocus,
-      },
-      focusProps,
-      hoverProps,
-      pressProps
-    )
+    focusProps,
+    hoverProps,
+    pressProps
   )
+);
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_TAB_TAG} name="Tab" bind:ref />

package/dist/tabs/TabGroup.svelte

@@ -1,92 +1,62 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-  import { sortByDomNode } from "../utils/focus-management.js"
-  import FocusSentinel from "../internal/FocusSentinel.svelte"
-
-  const DEFAULT_TABS_TAG = "div" as const
-  type TabsRenderPropArg = {
-    selectedIndex: number
-  }
-  type TabsPropsWeControl = never
-
-  export type TabGroupProps<TTag extends ElementType = typeof DEFAULT_TABS_TAG> = Props<
-    TTag,
-    TabsRenderPropArg,
-    TabsPropsWeControl,
-    {
-      defaultIndex?: number
-      onchange?: (index: number) => void
-      selectedIndex?: number
-      vertical?: boolean
-      manual?: boolean
-    }
-  >
+<script lang="ts" module>import { sortByDomNode } from "../utils/focus-management.js";
+import FocusSentinel from "../internal/FocusSentinel.svelte";
+const DEFAULT_TABS_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TABS_TAG">
-  import StableCollection from "../utils/StableCollection.svelte"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { createTabContext } from "./context.svelte.js"
-  import { untrack } from "svelte"
-
-  let {
-    ref = $bindable(),
-    defaultIndex = 0,
-    vertical = false,
-    manual = false,
-    onchange,
-    selectedIndex = undefined,
-    ...theirProps
-  }: { as?: TTag } & TabGroupProps<TTag> = $props()
-  const _state = createTabContext({
-    get vertical() {
-      return vertical
-    },
-    get manual() {
-      return manual
-    },
-    get selectedIndex() {
-      return selectedIndex
-    },
-    get defaultIndex() {
-      return defaultIndex
-    },
-    change: (index: number) => {
-      if (realSelectedIndex !== index) {
-        onchange?.(index)
-      }
-
-      if (!isControlled) {
-        _state.selectedIndex = index
-      }
-    },
-  })
-  const isControlled = $derived(_state.info.isControlled)
-  const realSelectedIndex = $derived(isControlled ? selectedIndex! : _state.selectedIndex)
-
-  const slot = $derived({
-    selectedIndex: _state.selectedIndex,
-  } satisfies TabsRenderPropArg)
-  const stableTabs = $derived(_state.tabs)
-
-  $effect(() => {
-    const newSelectedIndex = selectedIndex ?? defaultIndex
-    untrack(() => (_state.selectedIndex = newSelectedIndex))
-  })
-
-  $effect(() => {
-    if (realSelectedIndex === undefined) return
-    if (_state.tabs.length <= 0) return
-
-    // TODO: Figure out a way to detect this without the slow sort on every render. Might be fine
-    //       unless you have a lot of tabs.
-    let sorted = sortByDomNode(_state.tabs, (tab) => tab.current ?? null)
-    let didOrderChange = sorted.some((tab, i) => _state.tabs[i] !== tab)
-
-    if (didOrderChange) {
-      _state.change(sorted.findIndex((tab) => tab === _state.tabs[realSelectedIndex]))
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TABS_TAG">import StableCollection from "../utils/StableCollection.svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { createTabContext } from "./context.svelte.js";
+import { untrack } from "svelte";
+let {
+  ref = $bindable(),
+  defaultIndex = 0,
+  vertical = false,
+  manual = false,
+  onchange,
+  selectedIndex = void 0,
+  ...theirProps
+} = $props();
+const _state = createTabContext({
+  get vertical() {
+    return vertical;
+  },
+  get manual() {
+    return manual;
+  },
+  get selectedIndex() {
+    return selectedIndex;
+  },
+  get defaultIndex() {
+    return defaultIndex;
+  },
+  change: (index) => {
+    if (realSelectedIndex !== index) {
+      onchange?.(index);
     }
-  })
+    if (!isControlled) {
+      _state.selectedIndex = index;
+    }
+  }
+});
+const isControlled = $derived(_state.info.isControlled);
+const realSelectedIndex = $derived(isControlled ? selectedIndex : _state.selectedIndex);
+const slot = $derived({
+  selectedIndex: _state.selectedIndex
+});
+const stableTabs = $derived(_state.tabs);
+$effect(() => {
+  const newSelectedIndex = selectedIndex ?? defaultIndex;
+  untrack(() => _state.selectedIndex = newSelectedIndex);
+});
+$effect(() => {
+  if (realSelectedIndex === void 0) return;
+  if (_state.tabs.length <= 0) return;
+  let sorted = sortByDomNode(_state.tabs, (tab) => tab.current ?? null);
+  let didOrderChange = sorted.some((tab, i) => _state.tabs[i] !== tab);
+  if (didOrderChange) {
+    _state.change(sorted.findIndex((tab) => tab === _state.tabs[realSelectedIndex]));
+  }
+});
 </script>
 
 <StableCollection>

package/dist/tabs/TabGroup.svelte.d.ts

@@ -14,7 +14,7 @@ export type TabGroupProps<TTag extends ElementType = typeof DEFAULT_TABS_TAG> =
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TABS_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "onchange" | "vertical" | "manual" | "selectedIndex" | "defaultIndex"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "onchange" | "manual" | "vertical" | "selectedIndex" | "defaultIndex"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
         children?: import("svelte").Snippet<[{
             slot: TabsRenderPropArg;
             props: Record<string, any>;

package/dist/tabs/TabList.svelte

@@ -1,36 +1,16 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-
-  const DEFAULT_LIST_TAG = "div" as const
-  type ListRenderPropArg = {
-    selectedIndex: number
-  }
-  type ListPropsWeControl = "aria-orientation" | "role"
-
-  export type TabListProps<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = Props<
-    TTag,
-    ListRenderPropArg,
-    ListPropsWeControl,
-    {
-      //
-    }
-  >
+<script lang="ts" module>const DEFAULT_LIST_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LIST_TAG">
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { useTabs } from "./context.svelte.js"
-
-  const context = useTabs("TabList")
-  const { orientation, selectedIndex } = $derived(context)
-
-  const slot = $derived({ selectedIndex } satisfies ListRenderPropArg)
-
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & TabListProps<TTag> = $props()
-  const ourProps = $derived({
-    role: "tablist",
-    "aria-orientation": orientation,
-  })
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LIST_TAG">import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { useTabs } from "./context.svelte.js";
+const context = useTabs("TabList");
+const { orientation, selectedIndex } = $derived(context);
+const slot = $derived({ selectedIndex });
+let { ref = $bindable(), ...theirProps } = $props();
+const ourProps = $derived({
+  role: "tablist",
+  "aria-orientation": orientation
+});
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_LIST_TAG} name="TabList" bind:ref />

package/dist/tabs/TabPanel.svelte

@@ -1,73 +1,48 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-
-  const DEFAULT_PANEL_TAG = "div" as const
-  type PanelRenderPropArg = {
-    selected: boolean
-    focus: boolean
-  }
-  type PanelPropsWeControl = "role" | "aria-labelledby"
-  const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
-
-  export type TabPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<
-    TTag,
-    PanelRenderPropArg,
-    PanelPropsWeControl,
-    PropsForFeatures<typeof PanelRenderFeatures> & { id?: string; tabIndex?: number }
-  >
+<script lang="ts" module>const DEFAULT_PANEL_TAG = "div";
+const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">
-  import { useId } from "../hooks/use-id.js"
-  import { mergeProps, RenderFeatures, type PropsForFeatures } from "../utils/render.js"
-  import { useStableCollectionIndex } from "../utils/StableCollection.svelte"
-  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
-  import Hidden from "../internal/Hidden.svelte"
-  import type { MutableRefObject } from "../utils/ref.svelte.js"
-  import { onMount } from "svelte"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { useTabs } from "./context.svelte.js"
-
-  const internalId = useId()
-  let {
-    ref = $bindable(),
-    id = `headlessui-tabs-panel-${internalId}`,
-    tabIndex = 0,
-    ...theirProps
-  }: { as?: TTag } & TabPanelProps<TTag> = $props()
-  const context = useTabs("TabPanel")
-  const { selectedIndex, tabs, panels, registerPanel } = $derived(context)
-
-  const panelRef = $derived<MutableRefObject<HTMLElement | undefined>>({ current: ref })
-
-  onMount(() => registerPanel(panelRef))
-
-  const mySSRIndex = useStableCollectionIndex("panels")
-
-  const myIndex = $derived.by(() => {
-    const index = tabs.findIndex((panel) => panel === panelRef)
-    return index === -1 ? mySSRIndex : index
-  })
-
-  const selected = $derived(myIndex === selectedIndex)
-
-  const { isFocusVisible: focus, focusProps } = $derived(useFocusRing())
-  const slot = $derived({
-    selected,
-    focus,
-  } satisfies PanelRenderPropArg)
-
-  const ourProps = $derived(
-    mergeProps(
-      {
-        id,
-        role: "tabpanel",
-        "aria-labelledby": tabs[myIndex]?.current?.id,
-        tabIndex: selected ? 0 : -1,
-      },
-      focusProps
-    )
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">import { useId } from "../hooks/use-id.js";
+import { mergeProps, RenderFeatures } from "../utils/render.js";
+import { useStableCollectionIndex } from "../utils/StableCollection.svelte";
+import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
+import Hidden from "../internal/Hidden.svelte";
+import { onMount } from "svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { useTabs } from "./context.svelte.js";
+const internalId = useId();
+let {
+  ref = $bindable(),
+  id = `headlessui-tabs-panel-${internalId}`,
+  tabIndex = 0,
+  ...theirProps
+} = $props();
+const context = useTabs("TabPanel");
+const { selectedIndex, tabs, panels, registerPanel } = $derived(context);
+const panelRef = $derived({ current: ref });
+onMount(() => registerPanel(panelRef));
+const mySSRIndex = useStableCollectionIndex("panels");
+const myIndex = $derived.by(() => {
+  const index = tabs.findIndex((panel) => panel === panelRef);
+  return index === -1 ? mySSRIndex : index;
+});
+const selected = $derived(myIndex === selectedIndex);
+const { isFocusVisible: focus, focusProps } = $derived(useFocusRing());
+const slot = $derived({
+  selected,
+  focus
+});
+const ourProps = $derived(
+  mergeProps(
+    {
+      id,
+      role: "tabpanel",
+      "aria-labelledby": tabs[myIndex]?.current?.id,
+      tabIndex: selected ? 0 : -1
+    },
+    focusProps
   )
+);
 </script>
 
 {#if !selected && (theirProps.unmount ?? true) && !(theirProps.static ?? false)}