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

package/dist/listbox/Listbox.svelte.d.ts

@@ -26,7 +26,7 @@ export * from "./context.svelte.js";
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("slot" | "as" | "children" | "class" | "ref") | "invalid" | "disabled" | "value" | "name" | "onchange" | "__demoMode" | "horizontal" | "defaultValue" | "by" | "multiple" | "closeOnSelect"> 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>, "form" | ("slot" | "as" | "children" | "class" | "ref") | "invalid" | "disabled" | "value" | "name" | "onchange" | "multiple" | "__demoMode" | "horizontal" | "defaultValue" | "by" | "closeOnSelect"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
         children?: Snippet<[{
             slot: ListboxRenderPropArg<TType>;
             props: Record<string, any>;

package/dist/listbox/ListboxButton.svelte

@@ -1,185 +1,139 @@
-<script lang="ts" module>
-  import { useId } from "../hooks/use-id.js"
-  import { useProvidedId } from "../utils/id.js"
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-  import { ListboxStates, useActions, useData } from "./Listbox.svelte"
-  import { attemptSubmit } from "../utils/form.js"
-  import { Focus } from "../utils/calculate-active-index.js"
-  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
-  import { useActivePress } from "../hooks/use-active-press.svelte.js"
-  import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js"
-  import { useFloatingReference, useFloatingReferenceProps } from "../internal/floating.svelte.js"
-  import { stateFromSlot } from "../utils/state.js"
-  import type { Snippet } from "svelte"
-  import { useLabelledBy } from "../label/context.svelte.js"
-  import { useDescribedBy } from "../description/context.svelte.js"
-  import { useHover } from "../hooks/use-hover.svelte.js"
-  import { mergeProps } from "../utils/render.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+<script lang="ts" module>import { useId } from "../hooks/use-id.js";
+import { useProvidedId } from "../utils/id.js";
+import { ListboxStates, useActions, useData } from "./Listbox.svelte";
+import { attemptSubmit } from "../utils/form.js";
+import { Focus } from "../utils/calculate-active-index.js";
+import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
+import { useActivePress } from "../hooks/use-active-press.svelte.js";
+import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
+import { useFloatingReference, useFloatingReferenceProps } from "../internal/floating.svelte.js";
+import { stateFromSlot } from "../utils/state.js";
+import { useLabelledBy } from "../label/context.svelte.js";
+import { useDescribedBy } from "../description/context.svelte.js";
+import { useHover } from "../hooks/use-hover.svelte.js";
+import { mergeProps } from "../utils/render.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const DEFAULT_BUTTON_TAG = "button";
+</script>
 
-  const DEFAULT_BUTTON_TAG = "button" as const
-  type ButtonRenderPropArg = {
-    disabled: boolean
-    invalid: boolean
-    hover: boolean
-    focus: boolean
-    autofocus: boolean
-    open: boolean
-    active: boolean
-    value: any
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">const data = useData("ListboxButton");
+const actions = useActions("ListboxButton");
+const internalId = useId();
+const providedId = useProvidedId();
+let {
+  ref = $bindable(),
+  id = providedId || `headlessui-listbox-button-${internalId}`,
+  disabled: ownDisabled = false,
+  autofocus = false,
+  ...theirProps
+} = $props();
+const { setReference } = useFloatingReference();
+const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps();
+$effect(() => {
+  data.buttonElement = ref || null;
+  setReference(ref);
+});
+const disabled = $derived(data.disabled || ownDisabled);
+const handleKeyDown = (event) => {
+  switch (event.key) {
+    case "Enter":
+      if (event.currentTarget) attemptSubmit(event.currentTarget);
+      break;
+    case " ":
+    case "ArrowDown":
+      event.preventDefault();
+      actions.openListbox();
+      if (!data.value) actions.goToOption(Focus.First);
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      actions.openListbox();
+      if (!data.value) actions.goToOption(Focus.Last);
+      break;
   }
-  type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup" | "aria-labelledby" | "disabled"
-
-  export type ListboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<
-    TTag,
-    ButtonRenderPropArg,
-    ButtonPropsWeControl,
-    {
-      autofocus?: boolean
-      disabled?: boolean
+};
+const handleKeyUp = (event) => {
+  switch (event.key) {
+    case " ":
+      event.preventDefault();
+      break;
+  }
+};
+const handleClick = (event) => {
+  if (data.listboxState === ListboxStates.Open) {
+    actions.closeListbox();
+    data.buttonElement?.focus({ preventScroll: true });
+  } else {
+    event.preventDefault();
+    actions.openListbox();
+  }
+};
+const handleKeyPress = (event) => event.preventDefault();
+const labelledBy = useLabelledBy();
+const describedBy = useDescribedBy();
+const { isHovered: hover, hoverProps } = $derived(
+  useHover({
+    get disabled() {
+      return disabled;
     }
-  >
-</script>
-
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
-  const data = useData("ListboxButton")
-  const actions = useActions("ListboxButton")
-
-  const internalId = useId()
-  const providedId = useProvidedId()
-  let {
-    ref = $bindable(),
-    id = (providedId || `headlessui-listbox-button-${internalId}`) as PropsOf<TTag>["id"],
-    disabled: ownDisabled = false,
-    autofocus = false,
-    ...theirProps
-  }: { as?: TTag } & ListboxButtonProps<TTag> = $props()
-  const { setReference } = useFloatingReference()
-  const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps()
-  $effect(() => {
-    data.buttonElement = ref || null
-    setReference(ref)
   })
-
-  const disabled = $derived(data.disabled || ownDisabled)
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    switch (event.key) {
-      // Ref: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/#keyboard-interaction-13
-
-      case "Enter":
-        if (event.currentTarget) attemptSubmit(event.currentTarget as HTMLElement)
-        break
-
-      case " ":
-      case "ArrowDown":
-        event.preventDefault()
-        actions.openListbox()
-        if (!data.value) actions.goToOption(Focus.First)
-        break
-
-      case "ArrowUp":
-        event.preventDefault()
-        actions.openListbox()
-        if (!data.value) actions.goToOption(Focus.Last)
-        break
-    }
-  }
-
-  const handleKeyUp = (event: KeyboardEvent) => {
-    switch (event.key) {
-      case " ":
-        // Required for firefox, event.preventDefault() in handleKeyDown for
-        // the Space key doesn't cancel the handleKeyUp, which in turn
-        // triggers a *click*.
-        event.preventDefault()
-        break
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
     }
-  }
-
-  const handleClick = (event: MouseEvent) => {
-    //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
-    if (data.listboxState === ListboxStates.Open) {
-      actions.closeListbox()
-      data.buttonElement?.focus({ preventScroll: true })
-    } else {
-      event.preventDefault()
-      actions.openListbox()
+  })
+);
+const { isFocusVisible: focus, focusProps } = $derived(
+  useFocusRing({
+    get autofocus() {
+      return autofocus;
     }
+  })
+);
+const slot = $derived({
+  open: data.listboxState === ListboxStates.Open,
+  active: active || data.listboxState === ListboxStates.Open,
+  disabled,
+  invalid: data.invalid,
+  value: data.value,
+  hover,
+  focus,
+  autofocus: autofocus ?? false
+});
+const buttonType = useResolveButtonType({
+  get props() {
+    return { type: theirProps.type, as: theirProps.as };
+  },
+  get ref() {
+    return { current: data.buttonElement };
   }
-
-  // This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
-  const handleKeyPress = (event: KeyboardEvent) => event.preventDefault()
-
-  const labelledBy = useLabelledBy()
-  const describedBy = useDescribedBy()
-
-  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({
-    open: data.listboxState === ListboxStates.Open,
-    active: active || data.listboxState === ListboxStates.Open,
-    disabled,
-    invalid: data.invalid,
-    value: data.value,
-    hover,
-    focus,
-    autofocus: autofocus ?? false,
-  } satisfies ButtonRenderPropArg)
-
-  const buttonType = useResolveButtonType({
-    get props() {
-      return { type: theirProps.type, as: theirProps.as }
-    },
-    get ref() {
-      return { current: data.buttonElement }
+});
+const ourProps = $derived(
+  mergeProps(
+    {
+      ...getFloatingReferenceProps(),
+      id,
+      type: buttonType.type,
+      "aria-haspopup": "listbox",
+      "aria-controls": data.optionsElement?.id,
+      "aria-expanded": data.listboxState === ListboxStates.Open,
+      "aria-labelledby": labelledBy.value,
+      "aria-describedby": describedBy.value,
+      disabled: disabled || void 0,
+      autofocus,
+      onkeydown: handleKeyDown,
+      onkeyup: handleKeyUp,
+      onkeypress: handleKeyPress,
+      onclick: handleClick
     },
-  })
-
-  const ourProps = $derived(
-    mergeProps(
-      {
-        ...getFloatingReferenceProps(),
-        id,
-        type: buttonType.type,
-        "aria-haspopup": "listbox",
-        "aria-controls": data.optionsElement?.id,
-        "aria-expanded": data.listboxState === ListboxStates.Open,
-        "aria-labelledby": labelledBy.value,
-        "aria-describedby": describedBy.value,
-        disabled: disabled || undefined,
-        autofocus,
-        onkeydown: handleKeyDown,
-        onkeyup: handleKeyUp,
-        onkeypress: handleKeyPress,
-        onclick: handleClick,
-      },
-      focusProps,
-      hoverProps,
-      pressProps,
-      stateFromSlot(slot)
-    )
+    focusProps,
+    hoverProps,
+    pressProps,
+    stateFromSlot(slot)
   )
+);
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="ListboxButton" bind:ref />

package/dist/listbox/ListboxOption.svelte

@@ -1,179 +1,138 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-
-  const DEFAULT_OPTION_TAG = "div" as const
-  type OptionRenderPropArg = {
-    /** @deprecated use `focus` instead */
-    active: boolean
-    focus: boolean
-    selected: boolean
-    disabled: boolean
-
-    selectedOption: boolean
-  }
-  type OptionPropsWeControl = "aria-disabled" | "aria-selected" | "role" | "tabIndex"
-
-  export type ListboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<
-    TTag,
-    OptionRenderPropArg,
-    OptionPropsWeControl,
-    {
-      id?: string
-      disabled?: boolean
-      value: TType
-    }
-  >
+<script lang="ts" module>const DEFAULT_OPTION_TAG = "div";
 </script>
 
-<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG">
-  import { useId } from "../hooks/use-id.js"
-  import {
-    ActivationTrigger,
-    ListboxStates,
-    useActions,
-    useData,
-    ValueMode,
-    type ListboxOptionDataRef,
-  } from "./Listbox.svelte"
-  import { disposables } from "../utils/disposables.js"
-  import { Focus } from "../utils/calculate-active-index.js"
-  import { getContext, onMount, type Snippet } from "svelte"
-  import { useTextValue } from "../hooks/use-text-value.svelte.js"
-  import { useTrackedPointer } from "../hooks/use-tracked-pointer.js"
-  import { stateFromSlot } from "../utils/state.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-
-  const internalId = useId()
-  let {
-    ref = $bindable(),
-    id = `headlessui-listbox-option-${internalId}`,
-    disabled = false,
-    value,
-    ...theirProps
-  }: { as?: TTag } & ListboxOptionProps<TTag, TType> = $props()
-  const usedInSelectedOption = getContext<boolean>("SelectedOptionContext") === true
-  const data = useData("ListboxOption")
-  const actions = useActions("ListboxOption")
-
-  const { activeOptionIndex, options } = $derived(data)
-
-  const active = $derived(activeOptionIndex !== null ? options[activeOptionIndex].id === id : false)
-
-  const selected = $derived(data.isSelected(value))
-  const getTextValue = useTextValue({
-    get element() {
-      return ref as HTMLElement
-    },
-  })
-  const bag: ListboxOptionDataRef<TType>["current"] = $derived({
-    disabled,
-    value,
-    domRef: { current: ref || null },
-    get textValue() {
-      return getTextValue()
-    },
-  })
-
-  $effect(() => {
-    if (usedInSelectedOption) return
-    if (!ref) {
-      data.listElements.delete(id)
-    } else {
-      data.listElements.set(id, ref)
-    }
-
-    return () => {
-      if (ref) data.listElements.delete(id)
-    }
-  })
-
-  $effect(() => {
-    if (data.__demoMode) return
-    if (data.listboxState !== ListboxStates.Open) return
-    if (!active) return
-    if (data.activationTrigger === ActivationTrigger.Pointer) return
-    return disposables().requestAnimationFrame(() => {
-      ;(ref as HTMLElement)?.scrollIntoView?.({ block: "nearest" })
-    })
-  })
-
-  onMount(() => {
-    if (usedInSelectedOption) return
-    return actions.registerOption(id, {
-      get current() {
-        return bag
-      },
-    })
-  })
-
-  const handleClick = (event: { preventDefault: Function }) => {
-    if (disabled) return event.preventDefault()
-    actions.onChange(value)
-    if (data.closeOnSelect === true || (data.closeOnSelect === undefined && data.mode === ValueMode.Single)) {
-      actions.closeListbox()
-      data.buttonElement?.focus({ preventScroll: true })
-    }
-  }
-
-  const handleFocus = () => {
-    if (disabled) return actions.goToOption(Focus.Nothing)
-    actions.goToOption(Focus.Specific, id)
+<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG">import { useId } from "../hooks/use-id.js";
+import {
+  ActivationTrigger,
+  ListboxStates,
+  useActions,
+  useData,
+  ValueMode
+} from "./Listbox.svelte";
+import { disposables } from "../utils/disposables.js";
+import { Focus } from "../utils/calculate-active-index.js";
+import { getContext, onMount } from "svelte";
+import { useTextValue } from "../hooks/use-text-value.svelte.js";
+import { useTrackedPointer } from "../hooks/use-tracked-pointer.js";
+import { stateFromSlot } from "../utils/state.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const internalId = useId();
+let {
+  ref = $bindable(),
+  id = `headlessui-listbox-option-${internalId}`,
+  disabled = false,
+  value,
+  ...theirProps
+} = $props();
+const usedInSelectedOption = getContext("SelectedOptionContext") === true;
+const data = useData("ListboxOption");
+const actions = useActions("ListboxOption");
+const { activeOptionIndex, options } = $derived(data);
+const active = $derived(activeOptionIndex !== null ? options[activeOptionIndex].id === id : false);
+const selected = $derived(data.isSelected(value));
+const getTextValue = useTextValue({
+  get element() {
+    return ref;
   }
-
-  const pointer = useTrackedPointer()
-
-  const handleEnter = (evt: PointerEvent) => {
-    pointer.update(evt)
-    if (disabled) return
-    if (active) return
-    actions.goToOption(Focus.Specific, id, ActivationTrigger.Pointer)
+});
+const bag = $derived({
+  disabled,
+  value,
+  domRef: { current: ref || null },
+  get textValue() {
+    return getTextValue();
   }
-
-  const handleMove = (evt: PointerEvent) => {
-    if (!pointer.wasMoved(evt)) return
-    if (disabled) return
-    if (active) return
-    actions.goToOption(Focus.Specific, id, ActivationTrigger.Pointer)
+});
+$effect(() => {
+  if (usedInSelectedOption) return;
+  if (!ref) {
+    data.listElements.delete(id);
+  } else {
+    data.listElements.set(id, ref);
   }
-
-  const handleLeave = (evt: PointerEvent) => {
-    if (!pointer.wasMoved(evt)) return
-    if (disabled) return
-    if (!active) return
-    actions.goToOption(Focus.Nothing)
+  return () => {
+    if (ref) data.listElements.delete(id);
+  };
+});
+$effect(() => {
+  if (data.__demoMode) return;
+  if (data.listboxState !== ListboxStates.Open) return;
+  if (!active) return;
+  if (data.activationTrigger === ActivationTrigger.Pointer) return;
+  return disposables().requestAnimationFrame(() => {
+    ;
+    ref?.scrollIntoView?.({ block: "nearest" });
+  });
+});
+onMount(() => {
+  if (usedInSelectedOption) return;
+  return actions.registerOption(id, {
+    get current() {
+      return bag;
+    }
+  });
+});
+const handleClick = (event) => {
+  if (disabled) return event.preventDefault();
+  actions.onChange(value);
+  if (data.closeOnSelect === true || data.closeOnSelect === void 0 && data.mode === ValueMode.Single) {
+    actions.closeListbox();
+    data.buttonElement?.focus({ preventScroll: true });
   }
-
-  const slot = $derived({
-    active,
-    focus: active,
-    selected,
-    disabled,
-    selectedOption: selected && usedInSelectedOption,
-  } satisfies OptionRenderPropArg)
-  const ourProps = $derived(
-    !usedInSelectedOption
-      ? {
-          id,
-          role: "option",
-          tabIndex: disabled === true ? undefined : -1,
-          "aria-disabled": disabled === true ? true : undefined,
-          // According to the WAI-ARIA best practices, we should use aria-checked for
-          // multi-select,but Voice-Over disagrees. So we use aria-checked instead for
-          // both single and multi-select.
-          "aria-selected": selected,
-          disabled: undefined, // Never forward the `disabled` prop
-          onclick: handleClick,
-          onfocus: handleFocus,
-          onpointerenter: handleEnter,
-          onmouseenter: handleEnter,
-          onpointermove: handleMove,
-          onmousemove: handleMove,
-          onpointerleave: handleLeave,
-          onmouseleave: handleLeave,
-          ...stateFromSlot(slot),
-        }
-      : {}
-  )
+};
+const handleFocus = () => {
+  if (disabled) return actions.goToOption(Focus.Nothing);
+  actions.goToOption(Focus.Specific, id);
+};
+const pointer = useTrackedPointer();
+const handleEnter = (evt) => {
+  pointer.update(evt);
+  if (disabled) return;
+  if (active) return;
+  actions.goToOption(Focus.Specific, id, ActivationTrigger.Pointer);
+};
+const handleMove = (evt) => {
+  if (!pointer.wasMoved(evt)) return;
+  if (disabled) return;
+  if (active) return;
+  actions.goToOption(Focus.Specific, id, ActivationTrigger.Pointer);
+};
+const handleLeave = (evt) => {
+  if (!pointer.wasMoved(evt)) return;
+  if (disabled) return;
+  if (!active) return;
+  actions.goToOption(Focus.Nothing);
+};
+const slot = $derived({
+  active,
+  focus: active,
+  selected,
+  disabled,
+  selectedOption: selected && usedInSelectedOption
+});
+const ourProps = $derived(
+  !usedInSelectedOption ? {
+    id,
+    role: "option",
+    tabIndex: disabled === true ? void 0 : -1,
+    "aria-disabled": disabled === true ? true : void 0,
+    // According to the WAI-ARIA best practices, we should use aria-checked for
+    // multi-select,but Voice-Over disagrees. So we use aria-checked instead for
+    // both single and multi-select.
+    "aria-selected": selected,
+    disabled: void 0,
+    // Never forward the `disabled` prop
+    onclick: handleClick,
+    onfocus: handleFocus,
+    onpointerenter: handleEnter,
+    onmouseenter: handleEnter,
+    onpointermove: handleMove,
+    onmousemove: handleMove,
+    onpointerleave: handleLeave,
+    onmouseleave: handleLeave,
+    ...stateFromSlot(slot)
+  } : {}
+);
 </script>
 
 {#if selected || !usedInSelectedOption}