@pzerelles/headlessui-svelte 2.1.2-next.6 → 2.1.2-next.8

package/dist/switch/SwitchGroup.svelte

@@ -1,50 +1,37 @@
-<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 lang="ts" module>const DEFAULT_GROUP_TAG = "svelte:fragment";
 </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<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 })
-      },
+<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;
     },
-  })
-  useDescriptions()
-
-  setContext<GroupContext>("GroupContext", {
-    get switchElement() {
-      return switchElement
-    },
-    set switchElement(element) {
-      switchElement = element
-    },
-  })
-
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & SwitchGroupProps<TTag> = $props()
+    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();
 </script>
 
 <ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="SwitchGroup" bind:ref />

package/dist/tabs/Tab.svelte

@@ -1,208 +1,156 @@
-<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 { 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);
   }
-  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();
+    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();
+  }
+};
+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;
     }
-  >
-</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 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)
+);
+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()
-
-      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 { 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 })
-    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 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 />