@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.11

package/dist/listbox/ListboxOptions.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">import { mergeProps, RenderFeatures } from "../utils/render.js";
+<script lang="ts" module>import { mergeProps, RenderFeatures } from "../utils/render.js";
 import {
   useFloatingPanel,
   useFloatingPanelProps,
@@ -8,7 +8,7 @@ const DEFAULT_OPTIONS_TAG = "div";
 let OptionsRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">import { useId } from "../hooks/use-id.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG">import { useId } from "../hooks/use-id.js";
 import { ListboxStates, useActions, useData, ValueMode } from "./Listbox.svelte";
 import { getOwnerDocument } from "../utils/owner.js";
 import { State, useOpenClosed } from "../internal/open-closed.js";
@@ -23,25 +23,26 @@ import { match } from "../utils/match.js";
 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 { getContext, setContext } from "svelte";
-import Hidden from "../internal/Hidden.svelte";
+import { setContext } from "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,
-  children,
-  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 = (() => {
+});
+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: {
@@ -135,22 +136,26 @@ const anchorOptions = (() => {
       index: selectedOptionIndex
     }
   };
-})();
-const floatingPanel = useFloatingPanel(anchorOptions);
-const { setFloating, style } = $derived(floatingPanel);
+});
+const floatingPanel = useFloatingPanel({
+  get placement() {
+    return anchorOptions ?? null;
+  }
+});
+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();
@@ -170,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" }):
@@ -195,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) {
@@ -211,35 +216,35 @@ 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,
-    ref: optionsRef,
     "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)
-  })
-);
+    tabindex: data.listboxState === ListboxStates.Open ? 0 : void 0,
+    style: [theirProps.style, styles, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; ")
+  }),
+  ...transitionDataAttributes(transitionData)
+});
 const derivedData = {
   ...data,
   get isSelected() {
@@ -247,21 +252,18 @@ const derivedData = {
   }
 };
 setContext("ListboxDataContext", derivedData);
+$inspect(styles);
 </script>
 
-<Portal enabled={portal ? isStatic || visible : false}>
-  {#if !panelEnabled && unmount && !isStatic}
-    <Hidden as="span" bind:ref aria-hidden="true" {...ourProps} />
-  {:else}
-    <svelte:element
-      this={as}
-      bind:this={ref}
-      {...ourProps}
-      {...theirProps}
-      hidden={isStatic || panelEnabled ? undefined : true}
-      style={isStatic || panelEnabled ? theirProps.style : "display: none;"}
-    >
-      {#if children}{@render children(slot)}{/if}
-    </svelte:element>
-  {/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

@@ -1,4 +1,4 @@
-import type { ElementType, HTMLElementType, Props } from "../utils/types.js";
+import type { ElementType, Props } from "../utils/types.js";
 import { type PropsForFeatures } from "../utils/render.js";
 import { type AnchorPropsWithSelection } from "../internal/floating.svelte.js";
 declare const DEFAULT_OPTIONS_TAG: "div";
@@ -8,16 +8,32 @@ type OptionsRenderPropArg = {
 type OptionsPropsWeControl = "aria-activedescendant" | "aria-labelledby" | "aria-multiselectable" | "aria-orientation" | "role" | "tabIndex";
 declare let OptionsRenderFeatures: number;
 export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, {
+    id?: string;
     anchor?: AnchorPropsWithSelection;
     portal?: boolean;
     modal?: boolean;
     transition?: boolean;
-    ref?: HTMLElementType<TTag> | null;
 } & PropsForFeatures<typeof OptionsRenderFeatures>>;
 export type ListboxOptionsChildren = Snippet<[OptionsRenderPropArg]>;
 import { type Snippet } from "svelte";
-declare class __sveltets_Render<TTag extends ElementType> {
-    props(): ListboxOptionsProps<TTag>;
+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;
+        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;
+        modal?: boolean;
+        transition?: boolean;
+    } & {
+        static?: boolean | undefined;
+        unmount?: boolean | undefined;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
@@ -26,14 +42,14 @@ declare class __sveltets_Render<TTag extends ElementType> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType>(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']>> & {
+    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>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+    <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']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const ListboxOptions: $$IsomorphicComponent;
-type ListboxOptions<TTag extends ElementType> = InstanceType<typeof ListboxOptions<TTag>>;
+type ListboxOptions<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = InstanceType<typeof ListboxOptions<TTag>>;
 export default ListboxOptions;

package/dist/listbox/ListboxSelectedOption.svelte

@@ -1,10 +1,11 @@
-<script lang="ts" context="module">const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment";
+<script lang="ts" module>const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType, TType">import { useData, ValueMode } from "./Listbox.svelte";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG">import { useData, ValueMode } from "./Listbox.svelte";
 import { setContext } from "svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 let {
-  as = DEFAULT_SELECTED_OPTION_TAG,
+  ref = $bindable(),
   options,
   placeholder,
   ...theirProps
@@ -16,10 +17,17 @@ const shouldShowPlaceholder = $derived(
 setContext("SelectedOptionContext", true);
 </script>
 
-<svelte:element this={as} {...theirProps}>
+{#snippet children()}
   {#if placeholder && shouldShowPlaceholder}
-    <svelte:component this={placeholder} />
+    {@render placeholder()}
   {:else}
-    <svelte:component this={options} />
+    {@render options()}
   {/if}
-</svelte:element>
+{/snippet}
+
+<ElementOrComponent
+  theirProps={{ ...theirProps, children }}
+  defaultTag={DEFAULT_SELECTED_OPTION_TAG}
+  name="ListboxSelectedOption"
+  bind:ref
+></ElementOrComponent>

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

@@ -1,30 +1,40 @@
 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;
-    placeholder?: Component;
+    options: Snippet;
+    placeholder?: Snippet;
 }>;
-declare class __sveltets_Render<TTag extends ElementType, TType> {
-    props(): ListboxSelectedOptionProps<TTag>;
+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;
+        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: Snippet;
+        placeholder?: Snippet;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType, TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TType>['props']>, ReturnType<__sveltets_Render<TTag, TType>['events']>, ReturnType<__sveltets_Render<TTag, TType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TType>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    <TTag extends ElementType, TType>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TType>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag, TType>['events']>;
-    }): ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    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']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const ListboxSelectedOption: $$IsomorphicComponent;
-type ListboxSelectedOption<TTag extends ElementType, TType> = InstanceType<typeof ListboxSelectedOption<TTag, TType>>;
+type ListboxSelectedOption<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = InstanceType<typeof ListboxSelectedOption<TTag>>;
 export default ListboxSelectedOption;

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

@@ -0,0 +1,75 @@
+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;
+    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) {
+        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("ListboxDataContext");
+    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;
+}