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

package/dist/listbox/ListboxButton.svelte

@@ -1,16 +1,15 @@
 <script lang="ts" module>
   import { useId } from "../hooks/use-id.js"
-  import { getIdContext } from "../utils/id.js"
-  import type { ElementType, Props } from "../utils/types.js"
+  import { useProvidedId } from "../utils/id.js"
+  import type { Props } 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 { useFloating } from "../internal/floating.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"
@@ -18,7 +17,7 @@
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
   const DEFAULT_BUTTON_TAG = "button" as const
-  type ButtonRenderPropArg = {
+  export type ButtonRenderPropArg = {
     disabled: boolean
     invalid: boolean
     hover: boolean
@@ -30,38 +29,34 @@
   }
   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,
-    {
-      id?: string
-      autofocus?: boolean
-      disabled?: boolean
-    }
-  >
+  export type ListboxButtonOwnProps = {
+    element?: HTMLElement
+    id?: string
+    autofocus?: boolean
+    disabled?: boolean
+  }
 
-  export type ListboxButtonChildren = Snippet<[ButtonRenderPropArg]>
+  export type ListboxButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, ListboxButtonOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
+<script lang="ts">
   const data = useData("ListboxButton")
   const actions = useActions("ListboxButton")
 
   const internalId = useId()
-  const providedId = getIdContext()
+  const providedId = useProvidedId()
   let {
-    as = DEFAULT_BUTTON_TAG as TTag,
-    ref = $bindable(),
+    element = $bindable(),
     id = providedId || `headlessui-listbox-button-${internalId}`,
     disabled: ownDisabled = false,
     autofocus = false,
     ...theirProps
-  }: { as?: TTag } & ListboxButtonProps<TTag> = $props()
-  const { setReference, getReferenceProps: getFloatingReferenceProps } = useFloating()
+  }: ListboxButtonProps = $props()
+  const { setReference } = useFloatingReference()
+  const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps()
   $effect(() => {
-    data.buttonRef.current = ref || null
-    setReference(ref)
+    data.buttonElement = element || null
+    setReference(element)
   })
 
   const disabled = $derived(data.disabled || ownDisabled)
@@ -104,7 +99,7 @@
     //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
     if (data.listboxState === ListboxStates.Open) {
       actions.closeListbox()
-      data.buttonRef.current?.focus({ preventScroll: true })
+      data.buttonElement?.focus({ preventScroll: true })
     } else {
       event.preventDefault()
       actions.openListbox()
@@ -152,10 +147,10 @@
 
   const buttonType = useResolveButtonType({
     get props() {
-      return { type: theirProps.type, as }
+      return { type: theirProps.type ?? undefined, as: DEFAULT_BUTTON_TAG }
     },
     get ref() {
-      return data.buttonRef
+      return { current: data.buttonElement }
     },
   })
 
@@ -166,7 +161,7 @@
         id,
         type: buttonType.type,
         "aria-haspopup": "listbox",
-        "aria-controls": data.optionsRef.current?.id,
+        "aria-controls": data.optionsElement?.id,
         "aria-expanded": data.listboxState === ListboxStates.Open,
         "aria-labelledby": labelledBy.value,
         "aria-describedby": describedBy.value,
@@ -185,4 +180,11 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="ListboxButton" bind:ref />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_BUTTON_TAG}
+  name="ListboxButton"
+  bind:element
+/>

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

@@ -1,7 +1,6 @@
-import type { ElementType, Props } from "../utils/types.js";
-import type { Snippet } from "svelte";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_BUTTON_TAG: "button";
-type ButtonRenderPropArg = {
+export type ButtonRenderPropArg = {
     disabled: boolean;
     invalid: boolean;
     hover: boolean;
@@ -11,42 +10,13 @@ type ButtonRenderPropArg = {
     active: boolean;
     value: any;
 };
-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, {
+export type ListboxButtonOwnProps = {
+    element?: HTMLElement;
     id?: string;
     autofocus?: boolean;
     disabled?: boolean;
-}>;
-export type ListboxButtonChildren = Snippet<[ButtonRenderPropArg]>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "autofocus" | "id" | ButtonPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<ButtonRenderPropArg> | 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: ButtonRenderPropArg) => string) | undefined;
-    } : {}) & {
-        id?: string;
-        autofocus?: boolean;
-        disabled?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const ListboxButton: $$IsomorphicComponent;
-type ListboxButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof ListboxButton<TTag>>;
+};
+export type ListboxButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, ListboxButtonOwnProps>;
+declare const ListboxButton: import("svelte").Component<ListboxButtonProps, {}, "element">;
+type ListboxButton = ReturnType<typeof ListboxButton>;
 export default ListboxButton;

package/dist/listbox/ListboxOption.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_OPTION_TAG = "div" as const
-  type OptionRenderPropArg = {
+  export type OptionRenderPropArg = {
     /** @deprecated use `focus` instead */
     active: boolean
     focus: boolean
@@ -13,21 +13,21 @@
   }
   type OptionPropsWeControl = "aria-disabled" | "aria-selected" | "role" | "tabIndex"
 
-  export type ListboxOptionProps<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string> = Props<
-    TTag,
+  export type ListboxOptionOwnProps<TType = string> = {
+    element?: HTMLElement
+    id?: string
+    disabled?: boolean
+    value: TType
+  }
+
+  export type ListboxOptionProps<TType = string> = Props<
+    typeof DEFAULT_OPTION_TAG,
     OptionRenderPropArg,
-    OptionPropsWeControl,
-    {
-      id?: string
-      disabled?: boolean
-      value: TType
-    }
+    ListboxOptionOwnProps<TType>
   >
-
-  export type ListboxOptionChildren = Snippet<[OptionRenderPropArg]>
 </script>
 
-<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG">
+<script lang="ts" generics="TType">
   import { useId } from "../hooks/use-id.js"
   import {
     ActivationTrigger,
@@ -39,7 +39,7 @@
   } 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 { 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"
@@ -47,39 +47,45 @@
 
   const internalId = useId()
   let {
-    as = DEFAULT_OPTION_TAG as TTag,
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-listbox-option-${internalId}`,
     disabled = false,
     value,
     ...theirProps
-  }: { as?: TTag } & ListboxOptionProps<TTag, TType> = $props()
+  }: ListboxOptionProps<TType> = $props()
   const usedInSelectedOption = getContext<boolean>("SelectedOptionContext") === true
   const data = useData("ListboxOption")
   const actions = useActions("ListboxOption")
 
-  const active = $derived(data.activeOptionIndex !== null ? data.options[data.activeOptionIndex].id === id : false)
+  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
+      return element as HTMLElement
     },
   })
   const bag: ListboxOptionDataRef<TType>["current"] = $derived({
     disabled,
     value,
-    domRef: { current: ref || null },
+    domRef: { current: element || null },
     get textValue() {
       return getTextValue()
     },
   })
 
   $effect(() => {
-    if (!ref) {
-      data.listRef.current.delete(id)
+    if (usedInSelectedOption) return
+    if (!element) {
+      data.listElements.delete(id)
     } else {
-      data.listRef.current.set(id, ref)
+      data.listElements.set(id, element)
+    }
+
+    return () => {
+      if (element) data.listElements.delete(id)
     }
   })
 
@@ -89,7 +95,7 @@
     if (!active) return
     if (data.activationTrigger === ActivationTrigger.Pointer) return
     return disposables().requestAnimationFrame(() => {
-      ;(ref as HTMLElement)?.scrollIntoView?.({ block: "nearest" })
+      ;(element as HTMLElement)?.scrollIntoView?.({ block: "nearest" })
     })
   })
 
@@ -105,9 +111,9 @@
   const handleClick = (event: { preventDefault: Function }) => {
     if (disabled) return event.preventDefault()
     actions.onChange(value)
-    if (data.mode === ValueMode.Single) {
+    if (data.closeOnSelect === true || (data.closeOnSelect === undefined && data.mode === ValueMode.Single)) {
       actions.closeListbox()
-      data.buttonRef.current?.focus({ preventScroll: true })
+      data.buttonElement?.focus({ preventScroll: true })
     }
   }
 
@@ -173,5 +179,12 @@
 </script>
 
 {#if selected || !usedInSelectedOption}
-  <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_OPTION_TAG} name="Listbox" bind:ref />
+  <ElementOrComponent
+    {ourProps}
+    {theirProps}
+    slots={slot}
+    defaultTag={DEFAULT_OPTION_TAG}
+    name="Listbox"
+    bind:element
+  />
 {/if}

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

@@ -1,6 +1,6 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_OPTION_TAG: "div";
-type OptionRenderPropArg = {
+export type OptionRenderPropArg = {
     /** @deprecated use `focus` instead */
     active: boolean;
     focus: boolean;
@@ -8,43 +8,27 @@ 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 ListboxOptionOwnProps<TType = string> = {
+    element?: HTMLElement;
     id?: string;
     disabled?: boolean;
     value: TType;
-}>;
-export type ListboxOptionChildren = Snippet<[OptionRenderPropArg]>;
-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>, ("as" | "children" | "refName" | "class") | "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?: import("../utils/types.js").Children<OptionRenderPropArg> | 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: OptionRenderPropArg) => string) | undefined;
-    } : {}) & {
-        id?: string;
-        disabled?: boolean;
-        value: TType;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+};
+export type ListboxOptionProps<TType = string> = Props<typeof DEFAULT_OPTION_TAG, OptionRenderPropArg, ListboxOptionOwnProps<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']> & {
-        $$events?: ReturnType<__sveltets_Render<TType, TTag>['events']>;
-    }): 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;