@pzerelles/headlessui-svelte 2.1.2-next.2 → 2.1.2-next.20

package/dist/listbox/Listbox.svelte

@@ -4,51 +4,20 @@ import { useDisabled } from "../hooks/use-disabled.js";
 import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
 import { FocusableMode, isFocusableElement, sortByDomNode } from "../utils/focus-management.js";
 import { match } from "../utils/match.js";
-import { useRef } from "../utils/ref.svelte.js";
-import { getContext, setContext } from "svelte";
+import { setContext } from "svelte";
+import { ActivationTrigger, ListboxStates, ValueMode } from "./context.svelte.js";
 let DEFAULT_LISTBOX_TAG = "svelte:fragment";
-export var ListboxStates = /* @__PURE__ */ ((ListboxStates2) => {
-  ListboxStates2[ListboxStates2["Open"] = 0] = "Open";
-  ListboxStates2[ListboxStates2["Closed"] = 1] = "Closed";
-  return ListboxStates2;
-})(ListboxStates || {});
-export var ValueMode = /* @__PURE__ */ ((ValueMode2) => {
-  ValueMode2[ValueMode2["Single"] = 0] = "Single";
-  ValueMode2[ValueMode2["Multi"] = 1] = "Multi";
-  return ValueMode2;
-})(ValueMode || {});
-export var ActivationTrigger = /* @__PURE__ */ ((ActivationTrigger2) => {
-  ActivationTrigger2[ActivationTrigger2["Pointer"] = 0] = "Pointer";
-  ActivationTrigger2[ActivationTrigger2["Other"] = 1] = "Other";
-  return ActivationTrigger2;
-})(ActivationTrigger || {});
-export function useActions(component) {
-  const context = getContext("ListboxActionsContext");
-  if (!context) {
-    let 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("ListboxData");
-  if (context === null) {
-    let err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useData);
-    throw err;
-  }
-  return context;
-}
+export * from "./context.svelte.js";
 </script>
 
 <script lang="ts" generics="TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG">import { disposables } from "../utils/disposables.js";
 import FormFields from "../internal/FormFields.svelte";
-import { createFloatingContext } from "../internal/floating.svelte.js";
+import { useFloatingProvider } from "../internal/floating.svelte.js";
 import { createOpenClosedContext, State } from "../internal/open-closed.js";
 import { useLabels } from "../label/context.svelte.js";
 import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { SvelteMap } from "svelte/reactivity";
 function adjustOrderedState(state, adjustment = (i) => i) {
   let currentActiveOption = state.activeOptionIndex !== null ? state.options[state.activeOptionIndex] : null;
   let sortedOptions = sortByDomNode(
@@ -202,11 +171,11 @@ const stateReducer = (initialState) => {
       _state2.searchQuery = "";
       return _state2;
     },
-    registerOption(action) {
-      let option = { id: action.id, dataRef: action.dataRef };
+    registerOption(id, dataRef) {
+      let option = { id, dataRef };
       let adjustedState = adjustOrderedState(_state2, (options) => [...options, option]);
       if (_state2.activeOptionIndex === null) {
-        if (isSelected(action.dataRef.current.value)) {
+        if (isSelected(dataRef.current.value)) {
           adjustedState.activeOptionIndex = adjustedState.options.indexOf(option);
         }
       }
@@ -214,9 +183,9 @@ const stateReducer = (initialState) => {
       _state2.activeOptionIndex = adjustedState.activeOptionIndex;
       return _state2;
     },
-    unregisterOption(action) {
+    unregisterOption(id) {
       let adjustedState = adjustOrderedState(_state2, (options) => {
-        let idx = options.findIndex((a) => a.id === action.id);
+        let idx = options.findIndex((a) => a.id === id);
         if (idx !== -1) options.splice(idx, 1);
         return options;
       });
@@ -227,14 +196,9 @@ const stateReducer = (initialState) => {
     }
   };
 };
-const listboxActionsContext = null;
-setContext("ListboxActionsContext", listboxActionsContext);
-const listboxDataContext = null;
-setContext("ListboxDataContext", listboxDataContext);
 let {
   ref = $bindable(),
-  as,
-  value: controlledValue,
+  value: controlledValue = $bindable(),
   defaultValue,
   form,
   name,
@@ -244,6 +208,7 @@ let {
   disabled: ownDisabled = false,
   horizontal = false,
   multiple = false,
+  closeOnSelect,
   __demoMode = false,
   ...theirProps
 } = $props();
@@ -254,6 +219,9 @@ const controllable = useControllable(
   {
     get controlledValue() {
       return controlledValue;
+    },
+    set controlledValue(value2) {
+      controlledValue = value2;
     }
   },
   controlledOnChange,
@@ -269,10 +237,10 @@ const _state = stateReducer({
   optionsVisible: false,
   __demoMode
 });
-const optionsPropsRef = useRef({ static: false, hold: false });
-const buttonRef = useRef(null);
-const optionsRef = useRef(null);
-const listRef = useRef(/* @__PURE__ */ new Map());
+const optionsProps = $state({ static: false, hold: false });
+let buttonElement = $state(null);
+let optionsElement = $state(null);
+const listElements = new SvelteMap();
 const compare = useByComparator(by);
 const isSelected = (compareValue) => match(data.mode, {
   [ValueMode.Multi]: () => {
@@ -316,36 +284,44 @@ const data = {
   get orientation() {
     return orientation;
   },
+  get closeOnSelect() {
+    return closeOnSelect;
+  },
   compare,
   isSelected,
-  get optionsPropsRef() {
-    return optionsPropsRef;
+  get optionsProps() {
+    return optionsProps;
+  },
+  get buttonElement() {
+    return buttonElement;
+  },
+  set buttonElement(value2) {
+    buttonElement = value2;
   },
-  get buttonRef() {
-    return buttonRef;
+  get optionsElement() {
+    return optionsElement;
   },
-  get optionsRef() {
-    return optionsRef;
+  set optionsElement(value2) {
+    optionsElement = value2;
   },
-  get listRef() {
-    return listRef;
+  get listElements() {
+    return listElements;
   }
 };
 setContext("ListboxDataContext", data);
-setContext("ListboxData", data);
 const outsideClickEnabled = $derived(data.listboxState === ListboxStates.Open);
 useOutsideClick({
   get enabled() {
     return outsideClickEnabled;
   },
   get containers() {
-    return [data.buttonRef, data.optionsRef];
+    return [data.buttonElement, data.optionsElement];
   },
   cb: (event, target) => {
     _state.closeListbox();
     if (!isFocusableElement(target, FocusableMode.Loose)) {
       event.preventDefault();
-      data.buttonRef.current?.focus();
+      data.buttonElement?.focus();
     }
   }
 });
@@ -377,8 +353,8 @@ const goToOption = (focus, id, trigger) => {
   });
 };
 const registerOption = (id, dataRef) => {
-  _state.registerOption({ id, dataRef });
-  return () => _state.unregisterOption({ id });
+  _state.registerOption(id, dataRef);
+  return () => _state.unregisterOption(id);
 };
 const onChange = (value2) => {
   return match(data.mode, {
@@ -408,7 +384,7 @@ setContext("ListboxActionsContext", {
   search: _state.search,
   clearSearch: _state.clearSearch
 });
-createFloatingContext();
+useFloatingProvider();
 const openClosed = $derived(
   match(data.listboxState, {
     [ListboxStates.Open]: State.Open,
@@ -424,7 +400,7 @@ useLabels({
   inherit: true,
   props: {
     get htmlFor() {
-      return data.buttonRef.current?.id;
+      return data.buttonElement?.id;
     }
   },
   slot: {

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

@@ -1,6 +1,4 @@
 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;
@@ -21,74 +19,16 @@ export type ListboxProps<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG,
     form?: string;
     name?: string;
     multiple?: boolean;
+    closeOnSelect?: 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;
+export * from "./context.svelte.js";
 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;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "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<[ListboxRenderPropArg<TType>, Record<string, any>]> | 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;
@@ -103,13 +43,14 @@ declare class __sveltets_Render<TType, TActualType, TTag extends ElementType = t
         form?: string;
         name?: string;
         multiple?: boolean;
+        closeOnSelect?: boolean;
         __demoMode?: boolean;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "ref";
+    bindings(): "ref" | "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/listbox/ListboxButton.svelte

@@ -1,12 +1,12 @@
 <script lang="ts" module>import { useId } from "../hooks/use-id.js";
-import { getIdContext } from "../utils/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 { useFloating } from "../internal/floating.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";
@@ -19,18 +19,18 @@ const DEFAULT_BUTTON_TAG = "button";
 <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();
+const providedId = useProvidedId();
 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();
+const { setReference } = useFloatingReference();
+const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps();
 $effect(() => {
-  data.buttonRef.current = ref || null;
+  data.buttonElement = ref || null;
   setReference(ref);
 });
 const disabled = $derived(data.disabled || ownDisabled);
@@ -62,7 +62,7 @@ const handleKeyUp = (event) => {
 const handleClick = (event) => {
   if (data.listboxState === ListboxStates.Open) {
     actions.closeListbox();
-    data.buttonRef.current?.focus({ preventScroll: true });
+    data.buttonElement?.focus({ preventScroll: true });
   } else {
     event.preventDefault();
     actions.openListbox();
@@ -104,10 +104,10 @@ const slot = $derived({
 });
 const buttonType = useResolveButtonType({
   get props() {
-    return { type: theirProps.type, as };
+    return { type: theirProps.type, as: theirProps.as };
   },
   get ref() {
-    return data.buttonRef;
+    return { current: data.buttonElement };
   }
 });
 const ourProps = $derived(
@@ -117,7 +117,7 @@ const ourProps = $derived(
       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,

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

@@ -1,4 +1,4 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
 import type { Snippet } from "svelte";
 declare const DEFAULT_BUTTON_TAG: "button";
 type ButtonRenderPropArg = {
@@ -13,7 +13,6 @@ type ButtonRenderPropArg = {
 };
 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;
 }>;
@@ -21,13 +20,12 @@ 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;
+    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "autofocus" | ButtonPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: Snippet<[ButtonRenderPropArg, Record<string, any>]> | 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;
+    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends 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?: PropsOf<TTag>["class"] | ((bag: ButtonRenderPropArg) => string) | undefined;
     } : {}) & {
-        id?: string;
         autofocus?: boolean;
         disabled?: boolean;
     };

package/dist/listbox/ListboxOption.svelte

@@ -18,7 +18,6 @@ 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,
@@ -28,7 +27,8 @@ let {
 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 { 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() {
@@ -44,11 +44,15 @@ const bag = $derived({
   }
 });
 $effect(() => {
+  if (usedInSelectedOption) return;
   if (!ref) {
-    data.listRef.current.delete(id);
+    data.listElements.delete(id);
   } else {
-    data.listRef.current.set(id, ref);
+    data.listElements.set(id, ref);
   }
+  return () => {
+    if (ref) data.listElements.delete(id);
+  };
 });
 $effect(() => {
   if (data.__demoMode) return;
@@ -71,9 +75,9 @@ onMount(() => {
 const handleClick = (event) => {
   if (disabled) return event.preventDefault();
   actions.onChange(value);
-  if (data.mode === ValueMode.Single) {
+  if (data.closeOnSelect === true || data.closeOnSelect === void 0 && data.mode === ValueMode.Single) {
     actions.closeListbox();
-    data.buttonRef.current?.focus({ preventScroll: true });
+    data.buttonElement?.focus({ preventScroll: true });
   }
 };
 const handleFocus = () => {

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

@@ -20,7 +20,7 @@ declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT
     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;
+        children?: Snippet<[OptionRenderPropArg, Record<string, any>]> | 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;