@pzerelles/headlessui-svelte 2.1.2-next.7 → 2.1.2-next.8

package/dist/listbox/Listbox.svelte

@@ -1,624 +1,432 @@
-<script lang="ts" module>
-  import { useByComparator, type ByComparator } from "../hooks/use-by-comparator.js"
-  import { useControllable } from "../hooks/use-controllable.svelte.js"
-  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, type MutableRefObject } from "../utils/ref.svelte.js"
-  import type { ElementType, EnsureArray, Props } from "../utils/types.js"
-  import { getContext, setContext, type Snippet } from "svelte"
-  import { ActivationTrigger, ListboxStates, ValueMode } from "./ListboxStates.js"
-
-  let DEFAULT_LISTBOX_TAG = "svelte:fragment"
-  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 * from "./ListboxStates.js"
-
-  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 function useActions(component: string) {
-    const context = getContext<ListboxActionsContext>("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
+<script lang="ts" module>import { useByComparator } from "../hooks/use-by-comparator.js";
+import { useControllable } from "../hooks/use-controllable.svelte.js";
+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 { ActivationTrigger, ListboxStates, ValueMode } from "./ListboxStates.js";
+let DEFAULT_LISTBOX_TAG = "svelte:fragment";
+export * from "./ListboxStates.js";
+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;
   }
-
-  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 function useData(component: string) {
-    const context = getContext<ListboxDataContext>("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
+  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;
+}
 </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 { 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"
-
-  function adjustOrderedState<T>(
-    state: StateDefinition<T>,
-    adjustment: (options: StateDefinition<T>["options"]) => StateDefinition<T>["options"] = (i) => i
-  ) {
-    let currentActiveOption = state.activeOptionIndex !== null ? state.options[state.activeOptionIndex] : null
-
-    let sortedOptions = sortByDomNode(
-      adjustment(state.options.slice()),
-      (option) => option.dataRef.current.domRef.current
-    )
-
-    // If we inserted an option before the current active option then the active option index
-    // would be wrong. To fix this, we will re-lookup the correct index.
-    let adjustedActiveOptionIndex = currentActiveOption ? sortedOptions.indexOf(currentActiveOption) : null
-
-    // Reset to `null` in case the currentActiveOption was removed.
-    if (adjustedActiveOptionIndex === -1) {
-      adjustedActiveOptionIndex = null
-    }
-
-    return {
-      options: sortedOptions,
-      activeOptionIndex: adjustedActiveOptionIndex,
-    }
-  }
-
-  const stateReducer = (initialState: StateDefinition<TActualType>) => {
-    let _state = $state(initialState)
-    return {
-      get listboxState() {
-        return _state.listboxState
-      },
-      get options() {
-        return _state.options
-      },
-      get searchQuery() {
-        return _state.searchQuery
-      },
-      get activeOptionIndex() {
-        return _state.activeOptionIndex
-      },
-      get activationTrigger() {
-        return _state.activationTrigger
-      },
-      get __demoMode() {
-        return _state.__demoMode
-      },
-      closeListbox() {
-        if (disabled) return _state
-        if (_state.listboxState === ListboxStates.Closed) return _state
-        _state.activeOptionIndex = null
-        _state.listboxState = ListboxStates.Closed
-        _state.__demoMode = false
-        return _state
-      },
-      openListbox() {
-        if (disabled) return _state
-        if (_state.listboxState === ListboxStates.Open) return _state
-
-        // Check if we have a selected value that we can make active
-        let activeOptionIndex = _state.activeOptionIndex
-        let optionIdx = _state.options.findIndex((option) => isSelected(option.dataRef.current.value))
-
-        if (optionIdx !== -1) {
-          activeOptionIndex = optionIdx
-        }
-        _state.listboxState = ListboxStates.Open
-        _state.activeOptionIndex = activeOptionIndex
-        _state.__demoMode = false
-        return _state
-      },
-      goToOption(
-        action:
-          | { focus: Focus.Specific; id: string; trigger?: ActivationTrigger }
-          | { focus: Exclude<Focus, Focus.Specific>; trigger?: ActivationTrigger }
-      ) {
-        if (disabled) return _state
-        if (_state.listboxState === ListboxStates.Closed) return _state
-
-        _state.searchQuery = ""
-        _state.activationTrigger = action.trigger ?? ActivationTrigger.Other
-        _state.__demoMode = false
-
-        // Optimization:
-        //
-        // There is no need to sort the DOM nodes if we know that we don't want to focus anything
-        if (action.focus === Focus.Nothing) {
-          _state.activeOptionIndex = null
-          return _state
-        }
-
-        // Optimization:
-        //
-        // There is no need to sort the DOM nodes if we know exactly where to go
-        if (action.focus === Focus.Specific) {
-          _state.activeOptionIndex = _state.options.findIndex((o) => o.id === action.id)
-          return _state
-        }
-
-        // Optimization:
-        //
-        // If the current DOM node and the previous DOM node are next to each other,
-        // or if the previous DOM node is already the first DOM node, then we don't
-        // have to sort all the DOM nodes.
-        else if (action.focus === Focus.Previous) {
-          let activeOptionIdx = _state.activeOptionIndex
-          if (activeOptionIdx !== null) {
-            let currentDom = _state.options[activeOptionIdx].dataRef.current.domRef
-            let previousOptionIndex = calculateActiveIndex(action, {
-              resolveItems: () => _state.options,
-              resolveActiveIndex: () => _state.activeOptionIndex,
-              resolveId: (option) => option.id,
-              resolveDisabled: (option) => option.dataRef.current.disabled ?? false,
-            })
-            if (previousOptionIndex !== null) {
-              let previousDom = _state.options[previousOptionIndex].dataRef.current.domRef
-              if (
-                // Next to each other
-                currentDom.current?.previousElementSibling === previousDom?.current ||
-                // Or already the first element
-                previousDom.current?.previousElementSibling === null
-              ) {
-                _state.activeOptionIndex = previousOptionIndex
-                return _state
-              }
-            }
-          }
-        }
-
-        // Optimization:
-        //
-        // If the current DOM node and the next DOM node are next to each other, or
-        // if the next DOM node is already the last DOM node, then we don't have to
-        // sort all the DOM nodes.
-        else if (action.focus === Focus.Next) {
-          let activeOptionIdx = _state.activeOptionIndex
-          if (activeOptionIdx !== null) {
-            let currentDom = _state.options[activeOptionIdx].dataRef.current.domRef
-            let nextOptionIndex = calculateActiveIndex(action, {
-              resolveItems: () => _state.options,
-              resolveActiveIndex: () => _state.activeOptionIndex,
-              resolveId: (option) => option.id,
-              resolveDisabled: (option) => option.dataRef.current.disabled ?? false,
-            })
-            if (nextOptionIndex !== null) {
-              let nextDom = _state.options[nextOptionIndex].dataRef.current.domRef
-              if (
-                // Next to each other
-                currentDom.current?.nextElementSibling === nextDom.current ||
-                // Or already the last element
-                nextDom.current?.nextElementSibling === null
-              ) {
-                _state.activeOptionIndex = nextOptionIndex
-                return _state
-              }
-            }
-          }
-        }
-
-        // Slow path:
-        //
-        // Ensure all the options are correctly sorted according to DOM position
-        let adjustedState = adjustOrderedState(_state)
-        let activeOptionIndex = calculateActiveIndex(action, {
-          resolveItems: () => adjustedState.options,
-          resolveActiveIndex: () => adjustedState.activeOptionIndex,
-          resolveId: (option) => option.id,
-          resolveDisabled: (option) => option.dataRef.current.disabled ?? false,
-        })
-
-        _state.options = adjustedState.options
-        _state.activeOptionIndex = activeOptionIndex
-        return _state
-      },
-      search(value: string) {
-        if (disabled) return _state
-        if (_state.listboxState === ListboxStates.Closed) return _state
-
-        let wasAlreadySearching = _state.searchQuery !== ""
-        let offset = wasAlreadySearching ? 0 : 1
-
-        let searchQuery = _state.searchQuery + value.toLowerCase()
-
-        let reOrderedOptions =
-          _state.activeOptionIndex !== null
-            ? _state.options
-                .slice(_state.activeOptionIndex + offset)
-                .concat(_state.options.slice(0, _state.activeOptionIndex + offset))
-            : _state.options
-
-        let matchingOption = reOrderedOptions.find(
-          (option) => !option.dataRef.current.disabled && option.dataRef.current.textValue?.startsWith(searchQuery)
-        )
-
-        let matchIdx = matchingOption ? _state.options.indexOf(matchingOption) : -1
-
-        if (matchIdx === -1 || matchIdx === _state.activeOptionIndex) {
-          _state.searchQuery = searchQuery
-        } else {
-          _state.searchQuery = searchQuery
-          _state.activeOptionIndex = matchIdx
-          _state.activationTrigger = ActivationTrigger.Other
-        }
-        return _state
-      },
-      clearSearch() {
-        if (disabled) return _state
-        if (_state.listboxState === ListboxStates.Closed) return _state
-        if (_state.searchQuery === "") return _state
-        _state.searchQuery = ""
-        return _state
-      },
-      registerOption(action: { id: string; dataRef: ListboxOptionDataRef<TActualType> }) {
-        let option = { id: action.id, dataRef: action.dataRef }
-        let adjustedState = adjustOrderedState(_state, (options) => [...options, option])
-
-        // Check if we need to make the newly registered option active.
-        if (_state.activeOptionIndex === null) {
-          if (isSelected(action.dataRef.current.value as any)) {
-            adjustedState.activeOptionIndex = adjustedState.options.indexOf(option)
-          }
-        }
-
-        _state.options = adjustedState.options
-        _state.activeOptionIndex = adjustedState.activeOptionIndex
-        return _state
-      },
-      unregisterOption(action: { id: string }) {
-        let adjustedState = adjustOrderedState(_state, (options) => {
-          let idx = options.findIndex((a) => a.id === action.id)
-          if (idx !== -1) options.splice(idx, 1)
-          return options
-        })
-
-        _state.options = adjustedState.options
-        _state.activeOptionIndex = adjustedState.activeOptionIndex
-        _state.activationTrigger = ActivationTrigger.Other
-        return _state
-      },
-    }
+<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 { 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";
+function adjustOrderedState(state, adjustment = (i) => i) {
+  let currentActiveOption = state.activeOptionIndex !== null ? state.options[state.activeOptionIndex] : null;
+  let sortedOptions = sortByDomNode(
+    adjustment(state.options.slice()),
+    (option) => option.dataRef.current.domRef.current
+  );
+  let adjustedActiveOptionIndex = currentActiveOption ? sortedOptions.indexOf(currentActiveOption) : null;
+  if (adjustedActiveOptionIndex === -1) {
+    adjustedActiveOptionIndex = null;
   }
-
-  const listboxActionsContext: ListboxActionsContext | null = null
-  setContext("ListboxActionsContext", listboxActionsContext)
-
-  const listboxDataContext: ListboxDataContext | null = null
-  setContext("ListboxDataContext", listboxDataContext)
-
-  let {
-    ref = $bindable(),
-    as,
-    value: controlledValue,
-    defaultValue,
-    form,
-    name,
-    onchange: controlledOnChange,
-    by,
-    invalid = false,
-    disabled: ownDisabled = false,
-    horizontal = false,
-    multiple = false,
-    __demoMode = false,
-    ...theirProps
-  }: { as?: TTag } & ListboxProps<TTag, TType, TActualType> = $props()
-
-  const providedDisabled = useDisabled()
-  const disabled = $derived(providedDisabled.value || ownDisabled)
-
-  const orientation = horizontal ? "horizontal" : "vertical"
-  const controllable = useControllable<any>(
-    {
-      get controlledValue() {
-        return controlledValue
-      },
-    },
-    controlledOnChange,
-    defaultValue
-  )
-  const { value = multiple ? [] : undefined, onchange: theirOnChange } = $derived(controllable)
-
-  const _state = stateReducer({
-    listboxState: __demoMode ? ListboxStates.Open : ListboxStates.Closed,
-    options: [],
-    searchQuery: "",
-    activeOptionIndex: null,
-    activationTrigger: ActivationTrigger.Other,
-    optionsVisible: false,
-    __demoMode,
-  } as StateDefinition<TActualType>)
-
-  type _Data = ListboxDataContext
-
-  const optionsPropsRef = useRef<_Data["optionsPropsRef"]["current"]>({ static: false, hold: false })
-
-  const buttonRef = useRef<_Data["buttonRef"]["current"]>(null)
-  const optionsRef = useRef<_Data["optionsRef"]["current"]>(null)
-  const listRef = useRef<_Data["listRef"]["current"]>(new Map())
-
-  const compare = useByComparator(by)
-
-  const isSelected = (compareValue: TActualType): boolean =>
-    match(data.mode, {
-      [ValueMode.Multi]: () => {
-        return (value as EnsureArray<TType>).some((option) => compare(option, compareValue))
-      },
-      [ValueMode.Single]: () => {
-        return compare(value as TActualType, compareValue)
-      },
-    })
-
-  const data = {
+  return {
+    options: sortedOptions,
+    activeOptionIndex: adjustedActiveOptionIndex
+  };
+}
+const stateReducer = (initialState) => {
+  let _state2 = $state(initialState);
+  return {
     get listboxState() {
-      return _state.listboxState
+      return _state2.listboxState;
     },
     get options() {
-      return _state.options
+      return _state2.options;
     },
     get searchQuery() {
-      return _state.searchQuery
+      return _state2.searchQuery;
     },
     get activeOptionIndex() {
-      return _state.activeOptionIndex
+      return _state2.activeOptionIndex;
     },
     get activationTrigger() {
-      return _state.activationTrigger
+      return _state2.activationTrigger;
     },
     get __demoMode() {
-      return _state.__demoMode
-    },
-    get value() {
-      return value
-    },
-    get disabled() {
-      return disabled
-    },
-    get invalid() {
-      return invalid
-    },
-    get mode() {
-      return multiple ? ValueMode.Multi : ValueMode.Single
+      return _state2.__demoMode;
     },
-    get orientation() {
-      return orientation
+    closeListbox() {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Closed) return _state2;
+      _state2.activeOptionIndex = null;
+      _state2.listboxState = ListboxStates.Closed;
+      _state2.__demoMode = false;
+      return _state2;
     },
-    compare,
-    isSelected,
-    get optionsPropsRef() {
-      return optionsPropsRef
-    },
-    get buttonRef() {
-      return buttonRef
-    },
-    get optionsRef() {
-      return optionsRef
+    openListbox() {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Open) return _state2;
+      let activeOptionIndex = _state2.activeOptionIndex;
+      let optionIdx = _state2.options.findIndex((option) => isSelected(option.dataRef.current.value));
+      if (optionIdx !== -1) {
+        activeOptionIndex = optionIdx;
+      }
+      _state2.listboxState = ListboxStates.Open;
+      _state2.activeOptionIndex = activeOptionIndex;
+      _state2.__demoMode = false;
+      return _state2;
     },
-    get listRef() {
-      return listRef
+    goToOption(action) {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Closed) return _state2;
+      _state2.searchQuery = "";
+      _state2.activationTrigger = action.trigger ?? ActivationTrigger.Other;
+      _state2.__demoMode = false;
+      if (action.focus === Focus.Nothing) {
+        _state2.activeOptionIndex = null;
+        return _state2;
+      }
+      if (action.focus === Focus.Specific) {
+        _state2.activeOptionIndex = _state2.options.findIndex((o) => o.id === action.id);
+        return _state2;
+      } else if (action.focus === Focus.Previous) {
+        let activeOptionIdx = _state2.activeOptionIndex;
+        if (activeOptionIdx !== null) {
+          let currentDom = _state2.options[activeOptionIdx].dataRef.current.domRef;
+          let previousOptionIndex = calculateActiveIndex(action, {
+            resolveItems: () => _state2.options,
+            resolveActiveIndex: () => _state2.activeOptionIndex,
+            resolveId: (option) => option.id,
+            resolveDisabled: (option) => option.dataRef.current.disabled ?? false
+          });
+          if (previousOptionIndex !== null) {
+            let previousDom = _state2.options[previousOptionIndex].dataRef.current.domRef;
+            if (
+              // Next to each other
+              currentDom.current?.previousElementSibling === previousDom?.current || // Or already the first element
+              previousDom.current?.previousElementSibling === null
+            ) {
+              _state2.activeOptionIndex = previousOptionIndex;
+              return _state2;
+            }
+          }
+        }
+      } else if (action.focus === Focus.Next) {
+        let activeOptionIdx = _state2.activeOptionIndex;
+        if (activeOptionIdx !== null) {
+          let currentDom = _state2.options[activeOptionIdx].dataRef.current.domRef;
+          let nextOptionIndex = calculateActiveIndex(action, {
+            resolveItems: () => _state2.options,
+            resolveActiveIndex: () => _state2.activeOptionIndex,
+            resolveId: (option) => option.id,
+            resolveDisabled: (option) => option.dataRef.current.disabled ?? false
+          });
+          if (nextOptionIndex !== null) {
+            let nextDom = _state2.options[nextOptionIndex].dataRef.current.domRef;
+            if (
+              // Next to each other
+              currentDom.current?.nextElementSibling === nextDom.current || // Or already the last element
+              nextDom.current?.nextElementSibling === null
+            ) {
+              _state2.activeOptionIndex = nextOptionIndex;
+              return _state2;
+            }
+          }
+        }
+      }
+      let adjustedState = adjustOrderedState(_state2);
+      let activeOptionIndex = calculateActiveIndex(action, {
+        resolveItems: () => adjustedState.options,
+        resolveActiveIndex: () => adjustedState.activeOptionIndex,
+        resolveId: (option) => option.id,
+        resolveDisabled: (option) => option.dataRef.current.disabled ?? false
+      });
+      _state2.options = adjustedState.options;
+      _state2.activeOptionIndex = activeOptionIndex;
+      return _state2;
     },
-  }
-  setContext<ListboxDataContext>("ListboxDataContext", data)
-  setContext("ListboxData", data)
-
-  // Handle outside click
-  const outsideClickEnabled = $derived(data.listboxState === ListboxStates.Open)
-  useOutsideClick({
-    get enabled() {
-      return outsideClickEnabled
+    search(value2) {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Closed) return _state2;
+      let wasAlreadySearching = _state2.searchQuery !== "";
+      let offset = wasAlreadySearching ? 0 : 1;
+      let searchQuery = _state2.searchQuery + value2.toLowerCase();
+      let reOrderedOptions = _state2.activeOptionIndex !== null ? _state2.options.slice(_state2.activeOptionIndex + offset).concat(_state2.options.slice(0, _state2.activeOptionIndex + offset)) : _state2.options;
+      let matchingOption = reOrderedOptions.find(
+        (option) => !option.dataRef.current.disabled && option.dataRef.current.textValue?.startsWith(searchQuery)
+      );
+      let matchIdx = matchingOption ? _state2.options.indexOf(matchingOption) : -1;
+      if (matchIdx === -1 || matchIdx === _state2.activeOptionIndex) {
+        _state2.searchQuery = searchQuery;
+      } else {
+        _state2.searchQuery = searchQuery;
+        _state2.activeOptionIndex = matchIdx;
+        _state2.activationTrigger = ActivationTrigger.Other;
+      }
+      return _state2;
     },
-    get containers() {
-      return [data.buttonRef, data.optionsRef]
+    clearSearch() {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Closed) return _state2;
+      if (_state2.searchQuery === "") return _state2;
+      _state2.searchQuery = "";
+      return _state2;
     },
-    cb: (event, target) => {
-      _state.closeListbox()
-
-      if (!isFocusableElement(target, FocusableMode.Loose)) {
-        event.preventDefault()
-        data.buttonRef.current?.focus()
+    registerOption(action) {
+      let option = { id: action.id, dataRef: action.dataRef };
+      let adjustedState = adjustOrderedState(_state2, (options) => [...options, option]);
+      if (_state2.activeOptionIndex === null) {
+        if (isSelected(action.dataRef.current.value)) {
+          adjustedState.activeOptionIndex = adjustedState.options.indexOf(option);
+        }
       }
+      _state2.options = adjustedState.options;
+      _state2.activeOptionIndex = adjustedState.activeOptionIndex;
+      return _state2;
     },
-  })
-
-  const slot = $derived({
-    open: _state.listboxState === ListboxStates.Open,
-    disabled,
-    invalid,
-    value,
-  } satisfies ListboxRenderPropArg<TType>)
-
-  const selectOption = (id: string) => {
-    let option = _state.options.find((item) => item.id === id)
-    if (!option) return
-
-    //onchange(option.dataRef.current.value)
-  }
-
-  const selectActiveOption = () => {
-    if (_state.activeOptionIndex !== null) {
-      let { dataRef, id } = _state.options[_state.activeOptionIndex]
-      //onchange(dataRef.current.value)
-
-      // It could happen that the `activeOptionIndex` stored in state is actually null,
-      // but we are getting the fallback ace2437tive option back instead.424323
-      _state.goToOption({ focus: Focus.Specific, id })
+    unregisterOption(action) {
+      let adjustedState = adjustOrderedState(_state2, (options) => {
+        let idx = options.findIndex((a) => a.id === action.id);
+        if (idx !== -1) options.splice(idx, 1);
+        return options;
+      });
+      _state2.options = adjustedState.options;
+      _state2.activeOptionIndex = adjustedState.activeOptionIndex;
+      _state2.activationTrigger = ActivationTrigger.Other;
+      return _state2;
+    }
+  };
+};
+const listboxActionsContext = null;
+setContext("ListboxActionsContext", listboxActionsContext);
+const listboxDataContext = null;
+setContext("ListboxDataContext", listboxDataContext);
+let {
+  ref = $bindable(),
+  as,
+  value: controlledValue,
+  defaultValue,
+  form,
+  name,
+  onchange: controlledOnChange,
+  by,
+  invalid = false,
+  disabled: ownDisabled = false,
+  horizontal = false,
+  multiple = false,
+  __demoMode = false,
+  ...theirProps
+} = $props();
+const providedDisabled = useDisabled();
+const disabled = $derived(providedDisabled.value || ownDisabled);
+const orientation = horizontal ? "horizontal" : "vertical";
+const controllable = useControllable(
+  {
+    get controlledValue() {
+      return controlledValue;
     }
-    7
+  },
+  controlledOnChange,
+  defaultValue
+);
+const { value = multiple ? [] : void 0, onchange: theirOnChange } = $derived(controllable);
+const _state = stateReducer({
+  listboxState: __demoMode ? ListboxStates.Open : ListboxStates.Closed,
+  options: [],
+  searchQuery: "",
+  activeOptionIndex: null,
+  activationTrigger: ActivationTrigger.Other,
+  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 compare = useByComparator(by);
+const isSelected = (compareValue) => match(data.mode, {
+  [ValueMode.Multi]: () => {
+    return value.some((option) => compare(option, compareValue));
+  },
+  [ValueMode.Single]: () => {
+    return compare(value, compareValue);
   }
-
-  const d = disposables()
-  const goToOption = (focus: Focus, id: string, trigger: ActivationTrigger) => {
-    d.dispose()
-    d.microTask(() => {
-      if (focus === Focus.Specific) {
-        return _state.goToOption({ focus: Focus.Specific, id: id!, trigger })
-      }
-
-      return _state.goToOption({ focus, trigger })
-    })
+});
+const data = {
+  get listboxState() {
+    return _state.listboxState;
+  },
+  get options() {
+    return _state.options;
+  },
+  get searchQuery() {
+    return _state.searchQuery;
+  },
+  get activeOptionIndex() {
+    return _state.activeOptionIndex;
+  },
+  get activationTrigger() {
+    return _state.activationTrigger;
+  },
+  get __demoMode() {
+    return _state.__demoMode;
+  },
+  get value() {
+    return value;
+  },
+  get disabled() {
+    return disabled;
+  },
+  get invalid() {
+    return invalid;
+  },
+  get mode() {
+    return multiple ? ValueMode.Multi : ValueMode.Single;
+  },
+  get orientation() {
+    return orientation;
+  },
+  compare,
+  isSelected,
+  get optionsPropsRef() {
+    return optionsPropsRef;
+  },
+  get buttonRef() {
+    return buttonRef;
+  },
+  get optionsRef() {
+    return optionsRef;
+  },
+  get listRef() {
+    return listRef;
   }
-
-  const registerOption = (id: string, dataRef: ListboxOptionDataRef<TActualType>) => {
-    _state.registerOption({ id, dataRef })
-    return () => _state.unregisterOption({ id })
+};
+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];
+  },
+  cb: (event, target) => {
+    _state.closeListbox();
+    if (!isFocusableElement(target, FocusableMode.Loose)) {
+      event.preventDefault();
+      data.buttonRef.current?.focus();
+    }
   }
-
-  const onChange = (value: unknown) => {
-    return match(data.mode, {
-      [ValueMode.Single]() {
-        return theirOnChange?.(value as TType)
-      },
-      [ValueMode.Multi]() {
-        let copy = (data.value as TActualType[]).slice()
-
-        let idx = copy.findIndex((item) => compare(item, value as TActualType))
-        if (idx === -1) {
-          copy.push(value as TActualType)
-        } else {
-          copy.splice(idx, 1)
-        }
-
-        return theirOnChange?.(copy as unknown as TType[])
-      },
-    })
+});
+const slot = $derived({
+  open: _state.listboxState === ListboxStates.Open,
+  disabled,
+  invalid,
+  value
+});
+const selectOption = (id) => {
+  let option = _state.options.find((item) => item.id === id);
+  if (!option) return;
+};
+const selectActiveOption = () => {
+  if (_state.activeOptionIndex !== null) {
+    let { dataRef, id } = _state.options[_state.activeOptionIndex];
+    _state.goToOption({ focus: Focus.Specific, id });
   }
-
-  setContext<ListboxActionsContext>("ListboxActionsContext", {
-    onChange,
-    registerOption,
-    goToOption,
-    closeListbox: _state.closeListbox,
-    openListbox: _state.openListbox,
-    selectActiveOption,
-    selectOption,
-    search: _state.search,
-    clearSearch: _state.clearSearch,
-  })
-
-  createFloatingContext()
-
-  const openClosed = $derived(
-    match(data.listboxState, {
-      [ListboxStates.Open]: State.Open,
-      [ListboxStates.Closed]: State.Closed,
-    })
-  )
-  createOpenClosedContext({
-    get value() {
-      return openClosed
+  7;
+};
+const d = disposables();
+const goToOption = (focus, id, trigger) => {
+  d.dispose();
+  d.microTask(() => {
+    if (focus === Focus.Specific) {
+      return _state.goToOption({ focus: Focus.Specific, id, trigger });
+    }
+    return _state.goToOption({ focus, trigger });
+  });
+};
+const registerOption = (id, dataRef) => {
+  _state.registerOption({ id, dataRef });
+  return () => _state.unregisterOption({ id });
+};
+const onChange = (value2) => {
+  return match(data.mode, {
+    [ValueMode.Single]() {
+      return theirOnChange?.(value2);
     },
+    [ValueMode.Multi]() {
+      let copy = data.value.slice();
+      let idx = copy.findIndex((item) => compare(item, value2));
+      if (idx === -1) {
+        copy.push(value2);
+      } else {
+        copy.splice(idx, 1);
+      }
+      return theirOnChange?.(copy);
+    }
+  });
+};
+setContext("ListboxActionsContext", {
+  onChange,
+  registerOption,
+  goToOption,
+  closeListbox: _state.closeListbox,
+  openListbox: _state.openListbox,
+  selectActiveOption,
+  selectOption,
+  search: _state.search,
+  clearSearch: _state.clearSearch
+});
+createFloatingContext();
+const openClosed = $derived(
+  match(data.listboxState, {
+    [ListboxStates.Open]: State.Open,
+    [ListboxStates.Closed]: State.Closed
   })
-
-  useLabels({
-    inherit: true,
-    props: {
-      get htmlFor() {
-        return data.buttonRef.current?.id
-      },
-    },
-    slot: {
-      get open() {
-        return data.listboxState === ListboxStates.Open
-      },
-      get disabled() {
-        return disabled
-      },
+);
+createOpenClosedContext({
+  get value() {
+    return openClosed;
+  }
+});
+useLabels({
+  inherit: true,
+  props: {
+    get htmlFor() {
+      return data.buttonRef.current?.id;
+    }
+  },
+  slot: {
+    get open() {
+      return data.listboxState === ListboxStates.Open;
     },
-  })
-
-  const reset = () => {
-    if (defaultValue === undefined) return
-    return theirOnChange?.(defaultValue)
+    get disabled() {
+      return disabled;
+    }
   }
+});
+const reset = () => {
+  if (defaultValue === void 0) return;
+  return theirOnChange?.(defaultValue);
+};
 </script>
 
 {#if name && value}