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

package/dist/listbox/ListboxOptions.svelte

@@ -24,24 +24,25 @@ import { Focus } from "../utils/calculate-active-index.js";
 import { focusFrom, Focus as FocusManagementFocus } from "../utils/focus-management.js";
 import { useElementSize } from "../hooks/use-element-size.svelte.js";
 import { setContext } from "svelte";
-import Hidden from "../internal/Hidden.svelte";
 import Portal from "../portal/Portal.svelte";
-import { stateFromSlot } from "../utils/state.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 const internalId = useId();
 let {
-  as = DEFAULT_OPTIONS_TAG,
   ref = $bindable(),
   id = `headlessui-listbox-options-${internalId}`,
   anchor: rawAnchor,
   portal = false,
   modal = true,
   transition = false,
-  static: isStatic = false,
-  unmount = true,
   ...theirProps
 } = $props();
-const anchor = $derived(useResolvedAnchor(rawAnchor));
+const resolvedAnchor = useResolvedAnchor({
+  get anchor() {
+    return rawAnchor;
+  }
+});
+const { anchor } = $derived(resolvedAnchor);
+let localOptionsElement = $state();
 $effect(() => {
   if (anchor) {
     portal = true;
@@ -49,7 +50,7 @@ $effect(() => {
 });
 const data = useData("ListboxOptions");
 const actions = useActions("ListboxOptions");
-const ownerDocument = $derived(getOwnerDocument(data.optionsRef.current));
+const ownerDocument = $derived(getOwnerDocument(data.optionsElement));
 const usesOpenClosedState = useOpenClosed();
 const show = $derived(
   usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Open) === State.Open : data.listboxState === ListboxStates.Open
@@ -59,7 +60,7 @@ const _transition = useTransition({
     return transition;
   },
   get element() {
-    return ref;
+    return localOptionsElement;
   },
   get show() {
     return show;
@@ -71,7 +72,7 @@ useOnDisappear({
     return visible;
   },
   get ref() {
-    return data.buttonRef.current;
+    return data.buttonElement;
   },
   get ondisappear() {
     return actions.closeListbox;
@@ -93,7 +94,7 @@ useInertOthers({
   },
   elements: {
     get allowed() {
-      return [data.buttonRef.current, data.optionsRef.current];
+      return [data.buttonElement, data.optionsElement];
     }
   }
 });
@@ -103,7 +104,7 @@ const didButtonMove = useDidElementMove({
     return didElementMoveEnabled;
   },
   get element() {
-    return data.buttonRef.current;
+    return data.buttonElement;
   }
 });
 const panelEnabled = $derived(didButtonMove.value ? false : visible);
@@ -116,18 +117,18 @@ const frozenValue = useFrozenData({
     return data.value;
   }
 });
-const isSelected = (compareValue) => data.compare(frozenValue, compareValue);
-const selectedOptionIndex = () => {
+const isSelected = (compareValue) => data.compare(frozenValue.data, compareValue);
+const selectedOptionIndex = $derived.by(() => {
   if (anchor == null) return null;
   if (!anchor?.to?.includes("selection")) return null;
   let idx = data.options.findIndex((option) => isSelected(option.dataRef.current.value));
   if (idx === -1) idx = 0;
   return idx;
-};
+});
 const anchorOptions = $derived.by(() => {
   if (anchor == null) return void 0;
   if (selectedOptionIndex === null) return { ...anchor, inner: void 0 };
-  let elements = Array.from(data.listRef.current.values());
+  let elements = Array.from(data.listElements.values());
   return {
     ...anchor,
     inner: {
@@ -141,20 +142,20 @@ const floatingPanel = useFloatingPanel({
     return anchorOptions ?? null;
   }
 });
-const { setFloating, style } = $derived(floatingPanel);
+const { setFloating, styles } = $derived(floatingPanel);
 const getFloatingPanelProps = useFloatingPanelProps();
 $effect(() => {
-  data.optionsRef.current = ref || null;
-  if (anchor) setFloating(ref);
+  localOptionsElement = ref;
+  data.optionsElement = ref ?? null;
+  if (anchor) setFloating(ref ?? null);
 });
 const searchDisposables = useDisposables();
-const { listboxState, optionsRef } = $derived(data);
+const { listboxState, optionsElement } = $derived(data);
 $effect(() => {
-  let container = optionsRef.current;
-  if (!container) return;
+  if (!optionsElement) return;
   if (listboxState !== ListboxStates.Open) return;
-  if (container === getOwnerDocument(container)?.activeElement) return;
-  container?.focus({ preventScroll: true });
+  if (optionsElement === getOwnerDocument(optionsElement)?.activeElement) return;
+  optionsElement?.focus({ preventScroll: true });
 });
 const handleKeyDown = (event) => {
   searchDisposables.dispose();
@@ -174,7 +175,7 @@ const handleKeyDown = (event) => {
       }
       if (data.mode === ValueMode.Single) {
         actions.closeListbox();
-        data.buttonRef.current?.focus({ preventScroll: true });
+        data.buttonElement?.focus({ preventScroll: true });
       }
       break;
     case match(data.orientation, { vertical: "ArrowDown", horizontal: "ArrowRight" }):
@@ -199,13 +200,13 @@ const handleKeyDown = (event) => {
       event.preventDefault();
       event.stopPropagation();
       actions.closeListbox();
-      data.buttonRef.current?.focus({ preventScroll: true });
+      data.buttonElement?.focus({ preventScroll: true });
       return;
     case "Tab":
       event.preventDefault();
       event.stopPropagation();
       actions.closeListbox();
-      focusFrom(data.buttonRef.current, event.shiftKey ? FocusManagementFocus.Previous : FocusManagementFocus.Next);
+      focusFrom(data.buttonElement, event.shiftKey ? FocusManagementFocus.Previous : FocusManagementFocus.Next);
       break;
     default:
       if (event.key.length === 1) {
@@ -215,55 +216,108 @@ const handleKeyDown = (event) => {
       break;
   }
 };
-const labelledby = $derived(data.buttonRef.current?.id);
+const labelledby = $derived(data.buttonElement?.id);
 const slot = $derived({
   open: data.listboxState === ListboxStates.Open
 });
 const buttonSize = useElementSize({
   get element() {
-    return data.buttonRef.current;
+    return data.buttonElement;
   },
   unit: true
 });
-const ourProps = $derived(
-  mergeProps(anchor ? getFloatingPanelProps() : {}, {
+$effect(() => {
+  transitionData;
+});
+const ourProps = $derived({
+  ...mergeProps(anchor ? getFloatingPanelProps() : {}, {
     id,
     "aria-activedescendant": data.activeOptionIndex === null ? void 0 : data.options[data.activeOptionIndex]?.id,
     "aria-multiselectable": data.mode === ValueMode.Multi ? true : void 0,
     "aria-labelledby": labelledby,
     "aria-orientation": data.orientation,
-    onkeydown: handleKeyDown,
     role: "listbox",
     // When the `Listbox` is closed, it should not be focusable. This allows us
     // to skip focusing the `ListboxOptions` when pressing the tab key on an
     // open `Listbox`, and go to the next focusable element.
-    tabIndex: data.listboxState === ListboxStates.Open ? 0 : void 0,
-    style: [theirProps.style, style, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
-    ...transitionDataAttributes(transitionData),
-    ...stateFromSlot(slot)
-  })
-);
-const derivedData = {
+    tabindex: data.listboxState === ListboxStates.Open ? 0 : void 0,
+    style: [theirProps.style, styles, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; ")
+  }),
+  ...transitionDataAttributes(transitionData)
+});
+const derivedData = $derived({
   ...data,
   get isSelected() {
     return data.mode === ValueMode.Multi ? data.isSelected : isSelected;
   }
-};
-setContext("ListboxDataContext", derivedData);
+});
+setContext("ListboxDataContext", {
+  get value() {
+    return data.value;
+  },
+  get disabled() {
+    return data.disabled;
+  },
+  get invalid() {
+    return data.invalid;
+  },
+  get mode() {
+    return data.mode;
+  },
+  get orientation() {
+    return data.orientation;
+  },
+  get activeOptionIndex() {
+    return data.activeOptionIndex;
+  },
+  get closeOnSelect() {
+    return data.closeOnSelect;
+  },
+  get compare() {
+    return data.compare;
+  },
+  get isSelected() {
+    return data.mode === ValueMode.Multi ? data.isSelected : isSelected;
+  },
+  get optionsProps() {
+    return data.optionsProps;
+  },
+  get listElements() {
+    return data.listElements;
+  },
+  get buttonElement() {
+    return data.buttonElement;
+  },
+  get optionsElement() {
+    return data.optionsElement;
+  },
+  get listboxState() {
+    return data.listboxState;
+  },
+  get options() {
+    return data.options;
+  },
+  get searchQuery() {
+    return data.searchQuery;
+  },
+  get activationTrigger() {
+    return data.activationTrigger;
+  },
+  get __demoMode() {
+    return data.__demoMode;
+  }
+});
 </script>
 
-<Portal enabled={portal ? isStatic || visible : false}>
-  {#if !panelEnabled && unmount && !isStatic}
-    <Hidden as="span" bind:ref aria-hidden="true" {...ourProps} />
-  {:else}
-    <ElementOrComponent
-      {ourProps}
-      {theirProps}
-      slots={slot}
-      defaultTag={DEFAULT_OPTIONS_TAG}
-      features={OptionsRenderFeatures}
-      name="MenuItems"
-      bind:ref
-    />
-  {/if}
+<Portal enabled={portal ? theirProps.static || visible : false}>
+  <ElementOrComponent
+    {ourProps}
+    {theirProps}
+    slots={slot}
+    defaultTag={DEFAULT_OPTIONS_TAG}
+    features={OptionsRenderFeatures}
+    visible={panelEnabled}
+    name="ListboxOptions"
+    bind:ref
+  />
 </Portal>

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

@@ -14,17 +14,18 @@ export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTION
     modal?: boolean;
     transition?: boolean;
 } & PropsForFeatures<typeof OptionsRenderFeatures>>;
-export type ListboxOptionsChildren = Snippet<[OptionsRenderPropArg]>;
 import { type Snippet } from "svelte";
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "anchor" | "unmount" | "static" | "id" | "transition" | OptionsPropsWeControl | "portal" | "modal"> 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<OptionsRenderPropArg> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "anchor" | "unmount" | "static" | "id" | "transition" | OptionsPropsWeControl | "portal" | "modal"> 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: OptionsRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: OptionsRenderPropArg) => string) | null | 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: OptionsRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         id?: string;
         anchor?: AnchorPropsWithSelection;
         portal?: boolean;
@@ -34,9 +35,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_OPTION
         static?: boolean | undefined;
         unmount?: boolean | undefined;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -45,9 +44,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_OPTIONS_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_OPTIONS_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const ListboxOptions: $$IsomorphicComponent;

package/dist/listbox/ListboxSelectedOption.svelte

@@ -19,11 +19,9 @@ setContext("SelectedOptionContext", true);
 
 {#snippet children()}
   {#if placeholder && shouldShowPlaceholder}
-    {@const Component = placeholder}
-    <Component />
+    {@render placeholder()}
   {:else}
-    {@const Component = options}
-    <Component />
+    {@render options()}
   {/if}
 {/snippet}
 

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

@@ -1,27 +1,27 @@
 import type { ElementType, Props } from "../utils/types.js";
-import type { Component } from "svelte";
+import type { Snippet } from "svelte";
 declare const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment";
 type SelectedOptionRenderPropArg = {};
 type SelectedOptionPropsWeControl = never;
 export type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<TTag, SelectedOptionRenderPropArg, SelectedOptionPropsWeControl, {
-    options: Component<any, any>;
-    placeholder?: Component<any, any>;
+    options: Snippet;
+    placeholder?: Snippet;
 }>;
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "placeholder" | "options"> 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<SelectedOptionRenderPropArg> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "placeholder" | "options"> 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: SelectedOptionRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: SelectedOptionRenderPropArg) => string) | null | 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: SelectedOptionRenderPropArg) => string) | undefined;
-    } : {}) & {
-        options: Component<any, any>;
-        placeholder?: Component<any, any>;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
+    } & {
+        options: Snippet;
+        placeholder?: Snippet;
     };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -30,9 +30,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_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_SELECTED_OPTION_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const ListboxSelectedOption: $$IsomorphicComponent;

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

@@ -0,0 +1,76 @@
+import type { Focus } from "../utils/calculate-active-index.js";
+import type { MutableRefObject } from "../utils/ref.svelte.js";
+import type { SvelteMap } from "svelte/reactivity";
+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>;
+}>;
+export interface StateDefinition<T> {
+    listboxState: ListboxStates;
+    options: {
+        id: string;
+        dataRef: ListboxOptionDataRef<T>;
+    }[];
+    searchQuery: string;
+    activeOptionIndex: number | null;
+    activationTrigger: ActivationTrigger;
+    __demoMode: boolean;
+}
+export interface StateActions<T> {
+    openListbox(): void;
+    closeListbox(): void;
+    registerOption(id: string, dataRef: ListboxOptionDataRef<T>): void;
+    unregisterOption(id: string): void;
+    goToOption(action: {
+        focus: Focus.Specific;
+        id: string;
+        trigger?: ActivationTrigger;
+    } | {
+        focus: Exclude<Focus, Focus.Specific>;
+        trigger?: ActivationTrigger;
+    }): void;
+    search(query: string): void;
+    clearSearch(): void;
+}
+export type ListboxActionsContext<T = unknown> = {
+    registerOption(id: string, dataRef: ListboxOptionDataRef<T>): () => 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: T): void;
+} & Pick<StateActions<T>, "openListbox" | "closeListbox" | "search" | "clearSearch">;
+export declare function useActions<T>(component: string): ListboxActionsContext<T>;
+export type ListboxDataContext<T = unknown> = {
+    value: T;
+    disabled: boolean;
+    invalid: boolean;
+    mode: ValueMode;
+    orientation: "horizontal" | "vertical";
+    activeOptionIndex: number | null;
+    closeOnSelect?: boolean;
+    compare(a: T, z: T): boolean;
+    isSelected(value: T): boolean;
+    optionsProps: {
+        static: boolean;
+        hold: boolean;
+    };
+    listElements: SvelteMap<string, HTMLElement | null>;
+    buttonElement: HTMLElement | null;
+    optionsElement: HTMLElement | null;
+} & StateDefinition<T>;
+export declare function useData<T>(component: string): ListboxDataContext<T>;

package/dist/listbox/context.svelte.js

@@ -0,0 +1,36 @@
+import { getContext } from "svelte";
+export var ListboxStates;
+(function (ListboxStates) {
+    ListboxStates[ListboxStates["Open"] = 0] = "Open";
+    ListboxStates[ListboxStates["Closed"] = 1] = "Closed";
+})(ListboxStates || (ListboxStates = {}));
+export var ValueMode;
+(function (ValueMode) {
+    ValueMode[ValueMode["Single"] = 0] = "Single";
+    ValueMode[ValueMode["Multi"] = 1] = "Multi";
+})(ValueMode || (ValueMode = {}));
+export var ActivationTrigger;
+(function (ActivationTrigger) {
+    ActivationTrigger[ActivationTrigger["Pointer"] = 0] = "Pointer";
+    ActivationTrigger[ActivationTrigger["Other"] = 1] = "Other";
+})(ActivationTrigger || (ActivationTrigger = {}));
+export function useActions(component) {
+    const context = getContext("ListboxActionsContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useActions);
+        throw err;
+    }
+    return context;
+}
+export function useData(component) {
+    const context = getContext("ListboxDataContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useData);
+        throw err;
+    }
+    return context;
+}

package/dist/listbox/index.d.ts

@@ -1,5 +1,5 @@
-export { default as Listbox, type ListboxProps, type ListboxChildren } from "./Listbox.svelte";
-export { default as ListboxButton, type ListboxButtonProps, type ListboxButtonChildren } from "./ListboxButton.svelte";
-export { default as ListboxOption, type ListboxOptionProps, type ListboxOptionChildren } from "./ListboxOption.svelte";
-export { default as ListboxOptions, type ListboxOptionsProps, type ListboxOptionsChildren, } from "./ListboxOptions.svelte";
+export { default as Listbox, type ListboxProps } from "./Listbox.svelte";
+export { default as ListboxButton, type ListboxButtonProps } from "./ListboxButton.svelte";
+export { default as ListboxOption, type ListboxOptionProps } from "./ListboxOption.svelte";
+export { default as ListboxOptions, type ListboxOptionsProps } from "./ListboxOptions.svelte";
 export { default as ListboxSelectedOption, type ListboxSelectedOptionProps } from "./ListboxSelectedOption.svelte";

package/dist/listbox/index.js

@@ -1,5 +1,5 @@
 export { default as Listbox } from "./Listbox.svelte";
 export { default as ListboxButton } from "./ListboxButton.svelte";
 export { default as ListboxOption } from "./ListboxOption.svelte";
-export { default as ListboxOptions, } from "./ListboxOptions.svelte";
+export { default as ListboxOptions } from "./ListboxOptions.svelte";
 export { default as ListboxSelectedOption } from "./ListboxSelectedOption.svelte";