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

package/dist/tabs/Tab.svelte

@@ -1,155 +1,207 @@
-<script lang="ts" module>const DEFAULT_TAB_TAG = "button";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
 
-<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);
-  }
-  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));
+  const DEFAULT_TAB_TAG = "button" as const
+  type TabRenderPropArg = {
+    hover: boolean
+    focus: boolean
+    active: boolean
+    autofocus: boolean
+    selected: boolean
+    disabled: boolean
   }
-  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;
+  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
     }
+  >
+</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 { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
+  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)
     }
+    return result
   })
-);
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
+
+  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))
+    }
+
+    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()
     }
-  })
-);
-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 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
+
+  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 { 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
     },
-    focusProps,
-    hoverProps,
-    pressProps
+  })
+
+  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
+    )
   )
-);
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_TAB_TAG} name="Tab" bind:ref />

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

@@ -18,9 +18,8 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TAB_TA
     props(): {
         as?: TTag | undefined;
     } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "id" | TabPropsWeControl> 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: TabRenderPropArg;
-            props: Record<string, any>;
+        children?: import("svelte").Snippet<[TabRenderPropArg & {
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: TabRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;

package/dist/tabs/TabGroup.svelte

@@ -1,62 +1,92 @@
-<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" 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
 
-<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);
+  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
     }
-    if (!isControlled) {
-      _state.selectedIndex = index;
+  >
+</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]))
     }
-  }
-});
-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

@@ -15,9 +15,8 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TABS_T
     props(): {
         as?: TTag | undefined;
     } & (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>;
+        children?: import("svelte").Snippet<[TabsRenderPropArg & {
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: TabsRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;

package/dist/tabs/TabList.svelte

@@ -1,16 +1,36 @@
-<script lang="ts" module>const DEFAULT_LIST_TAG = "div";
+<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>
 
-<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 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>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_LIST_TAG} name="TabList" bind:ref />

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

@@ -9,9 +9,8 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LIST_T
     props(): {
         as?: TTag | undefined;
     } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | ListPropsWeControl> 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: ListRenderPropArg;
-            props: Record<string, any>;
+        children?: import("svelte").Snippet<[ListRenderPropArg & {
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: ListRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;