@pzerelles/headlessui-svelte 2.1.2-next.23 → 2.1.2-next.24

package/dist/tabs/Tab.svelte

@@ -1,156 +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 { useActions, useData } from "./TabGroup.svelte";
-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";
-const internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-tabs-tab-${internalId}`,
-  disabled = false,
-  autofocus = false,
-  ...theirProps
-} = $props();
-const data = useData("Tab");
-const { orientation, activation, selectedIndex, tabs, panels } = $derived(data);
-const actions = useActions("Tab");
-const tabRef = $derived({ current: ref });
-onMount(() => actions.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 = data.tabs.findIndex((tab) => tab.current === newTab);
-    if (idx !== -1) actions.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();
-    actions.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 });
-  actions.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

@@ -17,11 +17,14 @@ export type TabProps<TTag extends ElementType = typeof DEFAULT_TAB_TAG> = Props<
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TAB_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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<[TabRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "class") | "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>;
+        }]> | undefined;
         ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: TabRenderPropArg) => string) | undefined;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[TTag] ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
+        class?: string | ((bag: TabRenderPropArg) => string) | null | undefined;
     } : {}) & {
         id?: string;
         autofocus?: boolean;