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

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

@@ -1,14 +1,12 @@
 import { type ByComparator } from "../hooks/use-by-comparator.js";
-import type { ElementType, Props } from "../utils/types.js";
-import { type Snippet } from "svelte";
-declare let DEFAULT_LISTBOX_TAG: string;
+import type { PropsAsChild } from "../utils/types.js";
 type ListboxRenderPropArg<T> = {
     open: boolean;
     disabled: boolean;
     invalid: boolean;
     value: T;
 };
-export type ListboxProps<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType> = Props<TTag, ListboxRenderPropArg<TType>, "value" | "defaultValue" | "onchange" | "by" | "disabled" | "horizontal" | "name" | "multiple", {
+export type ListboxProps<TType = string, TActualType = TType extends (infer U)[] ? U : TType> = PropsAsChild<ListboxRenderPropArg<TType>, {
     value?: TType;
     defaultValue?: TType;
     onchange?: (value: TType) => void;
@@ -23,42 +21,20 @@ export type ListboxProps<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG,
     __demoMode?: boolean;
 }>;
 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" | "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>;
-        }]> | undefined;
-        class?: string | ((bag: ListboxRenderPropArg<TType>) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        value?: TType | undefined;
-        defaultValue?: TType | undefined;
-        onchange?: ((value: TType) => void) | undefined;
-        by?: ByComparator<TActualType> | undefined;
-        disabled?: boolean;
-        invalid?: boolean;
-        horizontal?: boolean;
-        form?: string;
-        name?: string;
-        multiple?: boolean;
-        closeOnSelect?: boolean;
-        __demoMode?: boolean;
-    };
+declare class __sveltets_Render<TType = string, TActualType = TType extends (infer U)[] ? U : TType> {
+    props(): ListboxProps<TType, TActualType>;
     events(): {};
     slots(): {};
-    bindings(): "ref" | "value";
+    bindings(): "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TType, TActualType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TType, TActualType>['props']>, ReturnType<__sveltets_Render<TTag, TType, TActualType>['events']>, ReturnType<__sveltets_Render<TTag, TType, TActualType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TType, TActualType>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TType, TActualType>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TType, TActualType>['props']> & {}): ReturnType<__sveltets_Render<TTag, TType, TActualType>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+    new <TType = string, TActualType = TType extends (infer U)[] ? U : TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType, TActualType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType, TActualType>['props']>, ReturnType<__sveltets_Render<TType, TActualType>['events']>, ReturnType<__sveltets_Render<TType, TActualType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TType, TActualType>['bindings']>;
+    } & ReturnType<__sveltets_Render<TType, TActualType>['exports']>;
+    <TType = string, TActualType = TType extends (infer U)[] ? U : TType>(internal: unknown, props: ReturnType<__sveltets_Render<TType, TActualType>['props']> & {}): ReturnType<__sveltets_Render<TType, TActualType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const Listbox: $$IsomorphicComponent;
-type Listbox<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG, TType = string, TActualType = TType extends (infer U)[] ? U : TType> = InstanceType<typeof Listbox<TTag, TType, TActualType>>;
+type Listbox<TType = string, TActualType = TType extends (infer U)[] ? U : TType> = InstanceType<typeof Listbox<TType, TActualType>>;
 export default Listbox;

package/dist/listbox/ListboxButton.svelte

@@ -1,139 +1,186 @@
-<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>
+<script lang="ts" module>
+  import { useId } from "../hooks/use-id.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 { useFloatingReference, useFloatingReferenceProps } from "../internal/floating.svelte.js"
+  import { stateFromSlot } from "../utils/state.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
+  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" 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;
-  }
-};
-const handleKeyUp = (event) => {
-  switch (event.key) {
-    case " ":
-      event.preventDefault();
-      break;
+  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
   }
-};
-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;
+  type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup" | "aria-labelledby" | "disabled"
+
+  export type ListboxButtonProps = Props<
+    typeof DEFAULT_BUTTON_TAG,
+    ButtonRenderPropArg,
+    {
+      element?: HTMLElement
+      id?: string
+      autofocus?: boolean
+      disabled?: boolean
     }
+  >
+</script>
+
+<script lang="ts">
+  const data = useData("ListboxButton")
+  const actions = useActions("ListboxButton")
+
+  const internalId = useId()
+  const providedId = useProvidedId()
+  let {
+    element = $bindable(),
+    id = providedId || `headlessui-listbox-button-${internalId}`,
+    disabled: ownDisabled = false,
+    autofocus = false,
+    ...theirProps
+  }: ListboxButtonProps = $props()
+  const { setReference } = useFloatingReference()
+  const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps()
+  $effect(() => {
+    data.buttonElement = element || null
+    setReference(element)
   })
-);
-const { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
+
+  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 { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
+  }
+
+  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 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 };
   }
-});
-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 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()
+    }
+  }
+
+  // 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 ?? undefined, as: DEFAULT_BUTTON_TAG }
+    },
+    get ref() {
+      return { current: data.buttonElement }
     },
-    focusProps,
-    hoverProps,
-    pressProps,
-    stateFromSlot(slot)
+  })
+
+  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)
+    )
   )
-);
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="ListboxButton" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="ListboxButton" bind:element />

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

@@ -1,5 +1,4 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
-import type { Snippet } from "svelte";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_BUTTON_TAG: "button";
 type ButtonRenderPropArg = {
     disabled: boolean;
@@ -11,37 +10,11 @@ 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 ListboxButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, {
+    element?: HTMLElement;
+    id?: string;
     autofocus?: boolean;
     disabled?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "autofocus" | ButtonPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[{
-            slot: ButtonRenderPropArg;
-            props: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: ButtonRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        autofocus?: boolean;
-        disabled?: boolean;
-    };
-    events(): {};
-    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']> & {}): 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>>;
+declare const ListboxButton: import("svelte").Component<ListboxButtonProps, {}, "element">;
 export default ListboxButton;