@pzerelles/headlessui-svelte 2.1.2-next.3 → 2.1.2-next.5

package/dist/switch/SwitchGroup.svelte

@@ -1,37 +1,50 @@
-<script lang="ts" module>const DEFAULT_GROUP_TAG = "svelte:fragment";
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+
+  const DEFAULT_GROUP_TAG = "svelte:fragment"
+
+  export type SwitchGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag>
+
+  export type GroupContext = {
+    switchElement: HTMLElement | null
+  }
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">import { setContext } from "svelte";
-import { useLabels } from "../label/context.svelte.js";
-import { useDescriptions } from "../description/context.svelte.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-let switchElement = $state(null);
-useLabels({
-  name: "SwitchGroup",
-  props: {
-    get htmlFor() {
-      return switchElement?.id;
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">
+  import { setContext } from "svelte"
+  import { useLabels } from "../label/context.svelte.js"
+  import { useDescriptions } from "../description/context.svelte.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  let switchElement = $state<HTMLElement | null>(null)
+  useLabels({
+    name: "SwitchGroup",
+    props: {
+      get htmlFor() {
+        return switchElement?.id
+      },
+      onclick: (event: MouseEvent) => {
+        if (!switchElement) return
+        if (event.currentTarget instanceof HTMLLabelElement) {
+          event.preventDefault()
+        }
+        switchElement.click()
+        switchElement.focus({ preventScroll: true })
+      },
     },
-    onclick: (event) => {
-      if (!switchElement) return;
-      if (event.currentTarget instanceof HTMLLabelElement) {
-        event.preventDefault();
-      }
-      switchElement.click();
-      switchElement.focus({ preventScroll: true });
-    }
-  }
-});
-useDescriptions();
-setContext("GroupContext", {
-  get switchElement() {
-    return switchElement;
-  },
-  set switchElement(element) {
-    switchElement = element;
-  }
-});
-let { ref = $bindable(), ...theirProps } = $props();
+  })
+  useDescriptions()
+
+  setContext<GroupContext>("GroupContext", {
+    get switchElement() {
+      return switchElement
+    },
+    set switchElement(element) {
+      switchElement = element
+    },
+  })
+
+  let { ref = $bindable(), ...theirProps }: { as?: TTag } & SwitchGroupProps<TTag> = $props()
 </script>
 
 <ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="SwitchGroup" bind:ref />

package/dist/tabs/Tab.svelte

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