@pzerelles/headlessui-svelte 2.1.2-next.31 → 2.1.2-next.33

package/dist/listbox/ListboxOption.svelte

@@ -1,140 +1,181 @@
-<script lang="ts" module>const DEFAULT_OPTION_TAG = "div";
+<script lang="ts" module>
+  import type { 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<TType = string> = Props<
+    typeof DEFAULT_OPTION_TAG,
+    OptionRenderPropArg,
+    {
+      element?: HTMLElement
+      id?: string
+      disabled?: boolean
+      value: TType
+    }
+  >
 </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
-} 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;
+<script lang="ts" generics="TType">
+  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 } 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 {
+    element = $bindable(),
+    id = `headlessui-listbox-option-${internalId}`,
+    disabled = false,
+    value,
+    ...theirProps
+  }: ListboxOptionProps<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 element as HTMLElement
+    },
+  })
+  const bag: ListboxOptionDataRef<TType>["current"] = $derived({
+    disabled,
+    value,
+    domRef: { current: element || null },
+    get textValue() {
+      return getTextValue()
+    },
+  })
+
+  $effect(() => {
+    if (usedInSelectedOption) return
+    if (!element) {
+      data.listElements.delete(id)
+    } else {
+      data.listElements.set(id, element)
+    }
+
+    return () => {
+      if (element) 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(() => {
+      ;(element 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)
   }
-});
-const bag = $derived({
-  disabled,
-  value,
-  domRef: { current: ref || null },
-  get textValue() {
-    return getTextValue();
+
+  const pointer = useTrackedPointer()
+
+  const handleEnter = (evt: PointerEvent) => {
+    pointer.update(evt)
+    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 handleMove = (evt: PointerEvent) => {
+    if (!pointer.wasMoved(evt)) return
+    if (disabled) return
+    if (active) return
+    actions.goToOption(Focus.Specific, id, ActivationTrigger.Pointer)
   }
-  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 handleLeave = (evt: PointerEvent) => {
+    if (!pointer.wasMoved(evt)) return
+    if (disabled) return
+    if (!active) return
+    actions.goToOption(Focus.Nothing)
   }
-};
-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)
-  } : {}
-);
+
+  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),
+        }
+      : {}
+  )
 </script>
 
 {#if selected || !usedInSelectedOption}
-  <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_OPTION_TAG} name="Listbox" bind:ref />
+  <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_OPTION_TAG} name="Listbox" bind:element />
 {/if}

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

@@ -1,4 +1,4 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_OPTION_TAG: "div";
 type OptionRenderPropArg = {
     /** @deprecated use `focus` instead */
@@ -8,40 +8,26 @@ type OptionRenderPropArg = {
     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, {
+export type ListboxOptionProps<TType = string> = Props<typeof DEFAULT_OPTION_TAG, OptionRenderPropArg, {
+    element?: HTMLElement;
     id?: string;
     disabled?: boolean;
     value: TType;
 }>;
-import { type Snippet } from "svelte";
-declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "value" | "id" | OptionPropsWeControl> 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: OptionRenderPropArg;
-            props: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: OptionRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        id?: string;
-        disabled?: boolean;
-        value: TType;
-    };
+declare class __sveltets_Render<TType> {
+    props(): ListboxOptionProps<TType>;
     events(): {};
     slots(): {};
-    bindings(): "ref";
+    bindings(): "element";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType, TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType, TTag>['props']>, ReturnType<__sveltets_Render<TType, TTag>['events']>, ReturnType<__sveltets_Render<TType, TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TType, TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TType, TTag>['exports']>;
-    <TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TType, TTag>['props']> & {}): ReturnType<__sveltets_Render<TType, TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType>['props']>, ReturnType<__sveltets_Render<TType>['events']>, ReturnType<__sveltets_Render<TType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TType>['bindings']>;
+    } & ReturnType<__sveltets_Render<TType>['exports']>;
+    <TType>(internal: unknown, props: ReturnType<__sveltets_Render<TType>['props']> & {}): ReturnType<__sveltets_Render<TType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const ListboxOption: $$IsomorphicComponent;
-type ListboxOption<TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG> = InstanceType<typeof ListboxOption<TType, TTag>>;
+type ListboxOption<TType> = InstanceType<typeof ListboxOption<TType>>;
 export default ListboxOption;