@pzerelles/headlessui-svelte 2.1.2-next.10 → 2.1.2-next.11

package/dist/listbox/ListboxOptions.svelte

@@ -24,9 +24,7 @@ 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 {
@@ -36,11 +34,15 @@ let {
   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;
@@ -48,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
@@ -58,7 +60,7 @@ const _transition = useTransition({
     return transition;
   },
   get element() {
-    return ref;
+    return localOptionsElement;
   },
   get show() {
     return show;
@@ -70,7 +72,7 @@ useOnDisappear({
     return visible;
   },
   get ref() {
-    return data.buttonRef.current;
+    return data.buttonElement;
   },
   get ondisappear() {
     return actions.closeListbox;
@@ -92,7 +94,7 @@ useInertOthers({
   },
   elements: {
     get allowed() {
-      return [data.buttonRef.current, data.optionsRef.current];
+      return [data.buttonElement, data.optionsElement];
     }
   }
 });
@@ -102,7 +104,7 @@ const didButtonMove = useDidElementMove({
     return didElementMoveEnabled;
   },
   get element() {
-    return data.buttonRef.current;
+    return data.buttonElement;
   }
 });
 const panelEnabled = $derived(didButtonMove.value ? false : visible);
@@ -115,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: {
@@ -140,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();
@@ -173,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" }):
@@ -198,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) {
@@ -214,34 +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,
     "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() {
@@ -249,20 +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}
-    <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/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;
+}

package/dist/menu/Menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
-import { createFloatingContext } from "../internal/floating.svelte.js";
+import { useFloatingProvider } from "../internal/floating.svelte.js";
 import { createOpenClosedContext, State } from "../internal/open-closed.js";
 import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
@@ -218,7 +218,7 @@ const slot = $derived({
   open: _state.menuState === MenuStates.Open,
   close: _state.closeMenu
 });
-createFloatingContext();
+useFloatingProvider();
 const openClosed = $derived(
   match(menuState, {
     [MenuStates.Open]: State.Open,

package/dist/menu/MenuButton.svelte

@@ -7,7 +7,7 @@ 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 { useHover } from "../hooks/use-hover.svelte.js";
 import { mergeProps } from "../utils/render.js";
 import { MenuStates, useMenuContext } from "./context.svelte.js";
@@ -22,7 +22,9 @@ let {
   ...theirProps
 } = $props();
 const _state = useMenuContext("MenuButton");
-const { setReference, getReferenceProps: getFloatingReferenceProps } = useFloating();
+const floatingReference = useFloatingReference();
+const { setReference } = $derived(floatingReference);
+const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps();
 $effect(() => {
   untrack(() => _state.setButtonElement(ref ? ref : null));
   setReference(ref);

package/dist/menu/MenuItems.svelte

@@ -36,18 +36,23 @@ let {
   transition = false,
   ...theirProps
 } = $props();
-const anchor = $derived(useResolvedAnchor(rawAnchor));
+const resolvedAnchor = useResolvedAnchor({
+  get anchor() {
+    return rawAnchor;
+  }
+});
+const { anchor } = $derived(resolvedAnchor);
 const _state = useMenuContext("MenuOptions");
 const floatingPanel = useFloatingPanel({
   get placement() {
     return anchor;
   }
 });
-const { setFloating, style } = $derived(floatingPanel);
+const { setFloating, styles } = $derived(floatingPanel);
 const getFloatingPanelProps = useFloatingPanelProps();
 $effect(() => {
-  untrack(() => _state.setItemsElement(ref || null));
-  if (anchor) setFloating(ref);
+  untrack(() => _state.setItemsElement(ref ?? null));
+  if (anchor) setFloating(ref ?? null);
 });
 const ownerDocument = $derived(getOwnerDocument(_state.itemsElement));
 $effect(() => {
@@ -211,8 +216,8 @@ const buttonSize = useElementSize({
   },
   unit: true
 });
-const ourProps = $derived(
-  mergeProps(anchor ? getFloatingPanelProps() : {}, {
+const ourProps = $derived({
+  ...mergeProps(anchor ? getFloatingPanelProps() : {}, {
     "aria-activedescendant": _state.activeItemIndex === null ? void 0 : _state.items[_state.activeItemIndex]?.id,
     "aria-labelledby": _state.buttonElement?.id,
     id,
@@ -223,11 +228,10 @@ const ourProps = $derived(
     // to skip focusing the `MenuItems` when pressing the tab key on an
     // open `Menu`, and go to the next focusable element.
     tabindex: _state.menuState === MenuStates.Open ? 0 : void 0,
-    ref,
-    style: [theirProps.style, style, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
-    ...transitionDataAttributes(transitionData)
-  })
-);
+    style: [theirProps.style, styles, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; ")
+  }),
+  ...transitionDataAttributes(transitionData)
+});
 </script>
 
 <Portal enabled={portal ? theirProps.static || visible : false}>

package/dist/tabs/TabGroup.svelte.d.ts

@@ -34,7 +34,7 @@ import type { MutableRefObject } from "../utils/ref.svelte.js";
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TABS_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "onchange" | "vertical" | "defaultIndex" | "selectedIndex" | "manual"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "onchange" | "vertical" | "manual" | "defaultIndex" | "selectedIndex"> 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<TabsRenderPropArg> | 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) ? {

package/dist/utils/ElementOrComponent.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" generics="TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue">import { mergePropsAdvanced, RenderFeatures, RenderStrategy } from "./render.js";
+<script lang="ts" generics="TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue">import { mergePropsAdvanced, RenderFeatures } from "./render.js";
 import Generic from "./Generic.svelte";
 let {
   ourProps,

package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { setContext } from "svelte";
+import { useFloatingParentNodeId } from "./FloatingTree.svelte";
+const { children, id } = $props();
+const parentId = useFloatingParentNodeId();
+setContext("FloatingNodeContext", {
+  get id() {
+    return id;
+  },
+  get parentId() {
+    return parentId.value;
+  }
+});
+</script>
+
+{#if children}{@render children()}{/if}

package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+export interface FloatingNodeProps {
+    children?: Snippet;
+    id: string;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FloatingNode: $$__sveltets_2_IsomorphicComponent<FloatingNodeProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type FloatingNode = InstanceType<typeof FloatingNode>;
+export default FloatingNode;

package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>import { getContext } from "svelte";
+import { useId } from "../hooks/useId.svelte.js";
+import { createPubSub } from "../utils/createPubSub.js";
+export const useFloatingParentNodeId = () => {
+  const context = getContext("FloatingNodeContext");
+  return {
+    get value() {
+      return context?.id ?? null;
+    }
+  };
+};
+export const useFloatingTree = () => getContext("FloatingTreeContext") ?? null;
+export function useFloatingNodeId(options) {
+  const { customParentId } = $derived(options);
+  const id = useId();
+  const tree = useFloatingTree();
+  const reactParentId = useFloatingParentNodeId();
+  const parentId = $derived(customParentId || reactParentId.value);
+  $effect(() => {
+    const node = { id, parentId };
+    tree?.addNode(node);
+    return () => {
+      tree?.removeNode(node);
+    };
+  });
+  return id;
+}
+</script>
+
+<script lang="ts">import { setContext } from "svelte";
+const { children } = $props();
+const nodesRef = $state({ current: [] });
+const addNode = (node) => {
+  nodesRef.current = [...nodesRef.current, node];
+};
+const removeNode = (node) => {
+  nodesRef.current = nodesRef.current.filter((n) => n !== node);
+};
+const events = createPubSub();
+setContext("FloatingTreeContext", {
+  get nodesRef() {
+    return nodesRef;
+  },
+  addNode,
+  removeNode,
+  events
+});
+</script>
+
+{#if children}{@render children()}{/if}

package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte.d.ts

@@ -0,0 +1,41 @@
+import { type Snippet } from "svelte";
+import type { FloatingTreeType, ReferenceType } from "../types.js";
+/**
+ * Returns the parent node id for nested floating elements, if available.
+ * Returns `null` for top-level floating elements.
+ */
+export declare const useFloatingParentNodeId: () => {
+    readonly value: string | null;
+};
+/**
+ * Returns the nearest floating tree context, if available.
+ */
+export declare const useFloatingTree: <RT extends ReferenceType = ReferenceType>() => FloatingTreeType<RT> | null;
+/**
+ * Registers a node into the `FloatingTree`, returning its id.
+ * @see https://floating-ui.com/docs/FloatingTree
+ */
+export declare function useFloatingNodeId(options: {
+    customParentId?: string;
+}): string;
+export interface FloatingTreeProps {
+    children?: Snippet;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FloatingTree: $$__sveltets_2_IsomorphicComponent<FloatingTreeProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type FloatingTree = InstanceType<typeof FloatingTree>;
+export default FloatingTree;

package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ReferenceType, UseFloatingOptions, UseFloatingReturn } from "../types.js";
+/**
+ * Provides data to position a floating element and context to add interactions.
+ * @see https://floating-ui.com/docs/useFloating
+ */
+export declare function useFloating<RT extends ReferenceType = ReferenceType>(options?: UseFloatingOptions): UseFloatingReturn<RT>;