@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.2-next.2

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

@@ -0,0 +1,126 @@
+import { type ByComparator } from "../hooks/use-by-comparator.js";
+import { Focus } from "../utils/calculate-active-index.js";
+import { type MutableRefObject } from "../utils/ref.svelte.js";
+import type { ElementType, Props } from "../utils/types.js";
+import { type Snippet } from "svelte";
+declare let DEFAULT_LISTBOX_TAG: string;
+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", {
+    value?: TType;
+    defaultValue?: TType;
+    onchange?: (value: TType) => void;
+    by?: ByComparator<TActualType>;
+    disabled?: boolean;
+    invalid?: boolean;
+    horizontal?: boolean;
+    form?: string;
+    name?: string;
+    multiple?: boolean;
+    __demoMode?: boolean;
+}>;
+export type ListboxChildren<T> = Snippet<[ListboxRenderPropArg<T>]>;
+export declare enum ListboxStates {
+    Open = 0,
+    Closed = 1
+}
+export declare enum ValueMode {
+    Single = 0,
+    Multi = 1
+}
+export declare enum ActivationTrigger {
+    Pointer = 0,
+    Other = 1
+}
+export type ListboxOptionDataRef<T> = MutableRefObject<{
+    textValue?: string;
+    disabled: boolean;
+    value: T;
+    domRef: MutableRefObject<HTMLElement | null>;
+}>;
+interface StateDefinition<T> {
+    listboxState: ListboxStates;
+    options: {
+        id: string;
+        dataRef: ListboxOptionDataRef<T>;
+    }[];
+    searchQuery: string;
+    activeOptionIndex: number | null;
+    activationTrigger: ActivationTrigger;
+    __demoMode: boolean;
+}
+type ListboxActionsContext = {
+    openListbox(): void;
+    closeListbox(): void;
+    registerOption(id: string, dataRef: ListboxOptionDataRef<unknown>): () => void;
+    goToOption(focus: Focus.Specific, id: string, trigger?: ActivationTrigger): void;
+    goToOption(focus: Focus, id?: string, trigger?: ActivationTrigger): void;
+    selectOption(id: string): void;
+    selectActiveOption(): void;
+    onChange(value: unknown): void;
+    search(query: string): void;
+    clearSearch(): void;
+};
+export declare function useActions(component: string): ListboxActionsContext;
+export type ListboxDataContext = {
+    value: unknown;
+    disabled: boolean;
+    invalid: boolean;
+    mode: ValueMode;
+    orientation: "horizontal" | "vertical";
+    activeOptionIndex: number | null;
+    compare(a: unknown, z: unknown): boolean;
+    isSelected(value: unknown): boolean;
+    optionsPropsRef: MutableRefObject<{
+        static: boolean;
+        hold: boolean;
+    }>;
+    listRef: MutableRefObject<Map<string, HTMLElement | null>>;
+    buttonRef: MutableRefObject<HTMLElement | null>;
+    optionsRef: MutableRefObject<HTMLElement | null>;
+} & Omit<StateDefinition<unknown>, "dataRef">;
+export declare function useData(component: string): ListboxDataContext;
+declare class __sveltets_Render<TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "name" | "value" | "onchange" | "multiple" | "__demoMode" | "defaultValue" | "by" | "horizontal"> 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<ListboxRenderPropArg<TType>> | 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: ListboxRenderPropArg<TType>) => string) | undefined;
+    } : {}) & {
+        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;
+        __demoMode?: boolean;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType, TActualType, TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType, TActualType, TTag>['props']>, ReturnType<__sveltets_Render<TType, TActualType, TTag>['events']>, ReturnType<__sveltets_Render<TType, TActualType, TTag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TType, TActualType, TTag>['bindings']>;
+    } & ReturnType<__sveltets_Render<TType, TActualType, TTag>['exports']>;
+    <TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TType, TActualType, TTag>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<TType, TActualType, TTag>['events']>;
+    }): ReturnType<__sveltets_Render<TType, TActualType, TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const Listbox: $$IsomorphicComponent;
+type Listbox<TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG> = InstanceType<typeof Listbox<TType, TActualType, TTag>>;
+export default Listbox;

package/dist/listbox/ListboxButton.svelte

@@ -0,0 +1,139 @@
+<script lang="ts" module>import { useId } from "../hooks/use-id.js";
+import { getIdContext } 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 { useFloating } 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" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">const data = useData("ListboxButton");
+const actions = useActions("ListboxButton");
+const internalId = useId();
+const providedId = getIdContext();
+let {
+  as = DEFAULT_BUTTON_TAG,
+  ref = $bindable(),
+  id = providedId || `headlessui-listbox-button-${internalId}`,
+  disabled: ownDisabled = false,
+  autofocus = false,
+  ...theirProps
+} = $props();
+const { setReference, getReferenceProps: getFloatingReferenceProps } = useFloating();
+$effect(() => {
+  data.buttonRef.current = 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 handleClick = (event) => {
+  if (data.listboxState === ListboxStates.Open) {
+    actions.closeListbox();
+    data.buttonRef.current?.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;
+    }
+  })
+);
+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
+});
+const buttonType = useResolveButtonType({
+  get props() {
+    return { type: theirProps.type, as };
+  },
+  get ref() {
+    return data.buttonRef;
+  }
+});
+const ourProps = $derived(
+  mergeProps(
+    {
+      ...getFloatingReferenceProps(),
+      id,
+      type: buttonType.type,
+      "aria-haspopup": "listbox",
+      "aria-controls": data.optionsRef.current?.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
+    },
+    focusProps,
+    hoverProps,
+    pressProps,
+    stateFromSlot(slot)
+  )
+);
+</script>
+
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="ListboxButton" bind:ref />

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

@@ -0,0 +1,52 @@
+import type { ElementType, Props } from "../utils/types.js";
+import type { Snippet } from "svelte";
+declare const DEFAULT_BUTTON_TAG: "button";
+type ButtonRenderPropArg = {
+    disabled: boolean;
+    invalid: boolean;
+    hover: boolean;
+    focus: boolean;
+    autofocus: boolean;
+    open: boolean;
+    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, {
+    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 default ListboxButton;

package/dist/listbox/ListboxOption.svelte

@@ -0,0 +1,136 @@
+<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
+} 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 {
+  as = DEFAULT_OPTION_TAG,
+  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 active = $derived(data.activeOptionIndex !== null ? data.options[data.activeOptionIndex].id === id : false);
+const selected = $derived(data.isSelected(value));
+const getTextValue = useTextValue({
+  get element() {
+    return ref;
+  }
+});
+const bag = $derived({
+  disabled,
+  value,
+  domRef: { current: ref || null },
+  get textValue() {
+    return getTextValue();
+  }
+});
+$effect(() => {
+  if (!ref) {
+    data.listRef.current.delete(id);
+  } else {
+    data.listRef.current.set(id, ref);
+  }
+});
+$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.mode === ValueMode.Single) {
+    actions.closeListbox();
+    data.buttonRef.current?.focus({ preventScroll: true });
+  }
+};
+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}
+  <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_OPTION_TAG} name="Listbox" bind:ref />
+{/if}

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

@@ -0,0 +1,50 @@
+import type { ElementType, Props } from "../utils/types.js";
+declare const DEFAULT_OPTION_TAG: "div";
+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;
+}>;
+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>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    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']>;
+}
+declare const ListboxOption: $$IsomorphicComponent;
+type ListboxOption<TType, TTag extends ElementType = typeof DEFAULT_OPTION_TAG> = InstanceType<typeof ListboxOption<TType, TTag>>;
+export default ListboxOption;