@pzerelles/headlessui-svelte 2.1.3-next.1 → 2.1.3-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/checkbox/Checkbox.svelte.d.ts +10 -3
  2. package/dist/dialog/InternalDialog.svelte +6 -1
  3. package/dist/disclosure/Disclosure.svelte +5 -1
  4. package/dist/input/Input.svelte.d.ts +10 -3
  5. package/dist/internal/floating.svelte.d.ts +2 -2
  6. package/dist/listbox/Listbox.svelte.d.ts +10 -3
  7. package/dist/listbox/ListboxOption.svelte.d.ts +10 -3
  8. package/dist/listbox/ListboxOptions.svelte +7 -1
  9. package/dist/menu/context.svelte.js +0 -1
  10. package/dist/popover/PopoverGroup.svelte +1 -1
  11. package/dist/portal/InternalPortal.svelte +1 -1
  12. package/dist/radio-group/Radio.svelte +1 -1
  13. package/dist/radio-group/Radio.svelte.d.ts +10 -3
  14. package/dist/radio-group/RadioGroup.svelte +5 -1
  15. package/dist/radio-group/RadioGroup.svelte.d.ts +10 -3
  16. package/dist/radio-group/RadioOption.svelte +1 -1
  17. package/dist/radio-group/RadioOption.svelte.d.ts +10 -3
  18. package/dist/textarea/Textarea.svelte.d.ts +10 -3
  19. package/dist/transition/InternalTransitionChild.svelte +6 -6
  20. package/dist/utils/ElementOrComponent.svelte.d.ts +17 -24
  21. package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte +1 -1
  22. package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte +4 -56
  23. package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte.d.ts +1 -23
  24. package/dist/utils/floating-ui/svelte/components/context.svelte.d.ts +23 -0
  25. package/dist/utils/floating-ui/svelte/components/context.svelte.js +39 -0
  26. package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.js +1 -1
  27. package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.js +2 -2
  28. package/dist/utils/render.d.ts +1 -1
  29. package/package.json +10 -10
  30. /package/dist/radio-group/{contest.svelte.d.ts → context.svelte.d.ts} +0 -0
  31. /package/dist/radio-group/{contest.svelte.js → context.svelte.js} +0 -0
@@ -24,10 +24,17 @@ export type CheckboxOwnProps<TType = string> = {
24
24
  onchange?: (checked: boolean) => void;
25
25
  };
26
26
  export type CheckboxProps<TType = string> = Props<typeof DEFAULT_CHECKBOX_TAG, CheckboxRenderPropArg, CheckboxOwnProps<TType>>;
27
+ declare function $$render<TType>(): {
28
+ props: CheckboxProps<TType>;
29
+ exports: {};
30
+ bindings: "element" | "checked";
31
+ slots: {};
32
+ events: {};
33
+ };
27
34
  declare class __sveltets_Render<TType> {
28
- props(): CheckboxProps<TType>;
29
- events(): {};
30
- slots(): {};
35
+ props(): ReturnType<typeof $$render<TType>>['props'];
36
+ events(): ReturnType<typeof $$render<TType>>['events'];
37
+ slots(): ReturnType<typeof $$render<TType>>['slots'];
31
38
  bindings(): "element" | "checked";
32
39
  exports(): {};
33
40
  }
@@ -20,7 +20,12 @@
20
20
  import { DialogStates, type DialogContext, type StateDefinition } from "./context.svelte.js"
21
21
  import { useDescriptions } from "../description/context.svelte.js"
22
22
  import { BROWSER } from "esm-env"
23
- import { DEFAULT_DIALOG_TAG, DialogRenderFeatures, type DialogProps, type DialogRenderPropArg } from "./Dialog.svelte"
23
+ import {
24
+ DEFAULT_DIALOG_TAG,
25
+ DialogRenderFeatures,
26
+ type DialogProps,
27
+ type DialogRenderPropArg,
28
+ } from "./Dialog.svelte"
24
29
  import PortalWrapper from "../portal/PortalWrapper.svelte"
25
30
 
26
31
  const internalId = useId()
@@ -16,7 +16,11 @@
16
16
 
17
17
  <script lang="ts">
18
18
  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
19
- import { createDisclosureAPIContext, createDisclosureContext, DisclosureStates } from "./context.svelte.js"
19
+ import {
20
+ createDisclosureAPIContext,
21
+ createDisclosureContext,
22
+ DisclosureStates,
23
+ } from "./context.svelte.js"
20
24
  import { getOwnerDocument } from "../utils/owner.js"
21
25
  import { createOpenClosedContext, State } from "../internal/open-closed.js"
22
26
  import { createCloseContext } from "../hooks/use-close.svelte.js"
@@ -16,10 +16,17 @@ export type InputOwnProps<TValue = string> = {
16
16
  autofocus?: boolean;
17
17
  };
18
18
  export type InputProps<TValue = string> = Props<typeof DEFAULT_INPUT_TAG, InputRenderPropArg, InputOwnProps<TValue>>;
19
+ declare function $$render<TValue = string>(): {
20
+ props: InputProps<TValue>;
21
+ exports: {};
22
+ bindings: "element" | "value";
23
+ slots: {};
24
+ events: {};
25
+ };
19
26
  declare class __sveltets_Render<TValue = string> {
20
- props(): InputProps<TValue>;
21
- events(): {};
22
- slots(): {};
27
+ props(): ReturnType<typeof $$render<TValue>>['props'];
28
+ events(): ReturnType<typeof $$render<TValue>>['events'];
29
+ slots(): ReturnType<typeof $$render<TValue>>['slots'];
23
30
  bindings(): "element" | "value";
24
31
  exports(): {};
25
32
  }
@@ -57,9 +57,9 @@ export declare function useFloatingReference(): {
57
57
  readonly setReference: (node: import("../utils/floating-ui/svelte-dom/types.js").ReferenceType | null | undefined) => void;
58
58
  };
59
59
  export declare function useFloatingReferenceProps(): {
60
- readonly getReferenceProps: (userProps?: import("svelte/elements.js").HTMLAttributes<Element>) => Record<string, unknown>;
60
+ readonly getReferenceProps: (userProps?: import("svelte/elements").HTMLAttributes<Element>) => Record<string, unknown>;
61
61
  };
62
- export declare function useFloatingPanelProps(): (...args: Parameters<(userProps?: import("svelte/elements.js").HTMLAttributes<HTMLElement>) => Record<string, unknown>>) => Record<string, unknown> & {
62
+ export declare function useFloatingPanelProps(): (...args: Parameters<(userProps?: import("svelte/elements").HTMLAttributes<HTMLElement>) => Record<string, unknown>>) => Record<string, unknown> & {
63
63
  "data-anchor": Placement | "top start" | "top end" | "right start" | "right end" | "bottom start" | "bottom end" | "left start" | "left end" | "selection" | "selection start" | "selection end" | undefined;
64
64
  };
65
65
  export declare function useFloatingPanel(options?: {
@@ -21,10 +21,17 @@ export type ListboxOwnProps<TType = string, TActualType = TType extends (infer U
21
21
  __demoMode?: boolean;
22
22
  };
23
23
  export type ListboxProps<TType = string, TActualType = TType extends (infer U)[] ? U : TType> = PropsAsChild<ListboxRenderPropArg<TType>, ListboxOwnProps<TType, TActualType>>;
24
+ declare function $$render<TType = string, TActualType = TType extends (infer U)[] ? U : TType>(): {
25
+ props: ListboxProps<TType, TActualType>;
26
+ exports: {};
27
+ bindings: "value";
28
+ slots: {};
29
+ events: {};
30
+ };
24
31
  declare class __sveltets_Render<TType = string, TActualType = TType extends (infer U)[] ? U : TType> {
25
- props(): ListboxProps<TType, TActualType>;
26
- events(): {};
27
- slots(): {};
32
+ props(): ReturnType<typeof $$render<TType, TActualType>>['props'];
33
+ events(): ReturnType<typeof $$render<TType, TActualType>>['events'];
34
+ slots(): ReturnType<typeof $$render<TType, TActualType>>['slots'];
28
35
  bindings(): "value";
29
36
  exports(): {};
30
37
  }
@@ -15,10 +15,17 @@ export type ListboxOptionOwnProps<TType = string> = {
15
15
  value: TType;
16
16
  };
17
17
  export type ListboxOptionProps<TType = string> = Props<typeof DEFAULT_OPTION_TAG, OptionRenderPropArg, ListboxOptionOwnProps<TType>>;
18
+ declare function $$render<TType>(): {
19
+ props: ListboxOptionProps<TType>;
20
+ exports: {};
21
+ bindings: "element";
22
+ slots: {};
23
+ events: {};
24
+ };
18
25
  declare class __sveltets_Render<TType> {
19
- props(): ListboxOptionProps<TType>;
20
- events(): {};
21
- slots(): {};
26
+ props(): ReturnType<typeof $$render<TType>>['props'];
27
+ events(): ReturnType<typeof $$render<TType>>['events'];
28
+ slots(): ReturnType<typeof $$render<TType>>['slots'];
22
29
  bindings(): "element";
23
30
  exports(): {};
24
31
  }
@@ -37,7 +37,13 @@
37
37
 
38
38
  <script lang="ts">
39
39
  import { useId } from "../hooks/use-id.js"
40
- import { ListboxStates, useActions, useData, ValueMode, type ListboxDataContext } from "./context.svelte.js"
40
+ import {
41
+ ListboxStates,
42
+ useActions,
43
+ useData,
44
+ ValueMode,
45
+ type ListboxDataContext,
46
+ } from "./context.svelte.js"
41
47
  import { getOwnerDocument } from "../utils/owner.js"
42
48
  import { State, useOpenClosed } from "../internal/open-closed.js"
43
49
  import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js"
@@ -76,7 +76,6 @@ export const createMenuContext = (initialState) => {
76
76
  /* We can turn off demo mode once we re-open the `Menu` */
77
77
  _state.__demoMode = false;
78
78
  _state.menuState = MenuStates.Open;
79
- console.log("openMenu", _state.menuState, MenuStates.Open);
80
79
  return _state;
81
80
  },
82
81
  goToItem(action) {
@@ -12,7 +12,7 @@
12
12
  </script>
13
13
 
14
14
  <script lang="ts">
15
- import type { PopoverGroupContext, PopoverRegisterBag } from "./context.svelte"
15
+ import type { PopoverGroupContext, PopoverRegisterBag } from "./context.svelte.js"
16
16
  import MainTreeProvider from "../internal/MainTreeProvider.svelte"
17
17
  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
18
18
  import { getOwnerDocument } from "../utils/owner.js"
@@ -1,7 +1,7 @@
1
1
  <script lang="ts" module>
2
2
  import { usePortalRoot } from "../internal/portal-force-root.svelte.js"
3
3
  import { getOwnerDocument } from "../utils/owner.js"
4
- import { getContext, onMount, setContext } from "svelte"
4
+ import { getContext, onMount } from "svelte"
5
5
  import { env } from "../utils/env.js"
6
6
  import type { Props } from "../utils/types.js"
7
7
  import type { PortalGroupContext } from "./PortalGroup.svelte"
@@ -23,7 +23,7 @@
23
23
 
24
24
  <script lang="ts" generics="TType = ComponentProps<typeof RadioGroup>['value']">
25
25
  import { default as RadioGroup } from "./RadioGroup.svelte"
26
- import { useActions, useData } from "./contest.svelte.js"
26
+ import { useActions, useData } from "./context.svelte.js"
27
27
  import { useId } from "../hooks/use-id.js"
28
28
  import { useLabelledBy } from "../label/context.svelte.js"
29
29
  import { useDescribedBy } from "../description/context.svelte.js"
@@ -16,10 +16,17 @@ export type RadioOwnProps<TType> = {
16
16
  export type RadioProps<TType = string> = Props<typeof DEFAULT_RADIO_TAG, RadioRenderPropArg, RadioOwnProps<TType>>;
17
17
  import { default as RadioGroup } from "./RadioGroup.svelte";
18
18
  import { type ComponentProps } from "svelte";
19
+ declare function $$render<TType = ComponentProps<typeof RadioGroup>['value']>(): {
20
+ props: RadioProps<TType>;
21
+ exports: {};
22
+ bindings: "element";
23
+ slots: {};
24
+ events: {};
25
+ };
19
26
  declare class __sveltets_Render<TType = ComponentProps<typeof RadioGroup>['value']> {
20
- props(): RadioProps<TType>;
21
- events(): {};
22
- slots(): {};
27
+ props(): ReturnType<typeof $$render<TType>>['props'];
28
+ events(): ReturnType<typeof $$render<TType>>['events'];
29
+ slots(): ReturnType<typeof $$render<TType>>['slots'];
23
30
  bindings(): "element";
24
31
  exports(): {};
25
32
  }
@@ -27,7 +27,11 @@
27
27
  </script>
28
28
 
29
29
  <script lang="ts" generics="TType = string">
30
- import { createState, type RadioGroupActionsContext, type RadioGroupDataContext } from "./contest.svelte.js"
30
+ import {
31
+ createState,
32
+ type RadioGroupActionsContext,
33
+ type RadioGroupDataContext,
34
+ } from "./context.svelte.js"
31
35
  import { useId } from "../hooks/use-id.js"
32
36
  import { useDisabled } from "../hooks/use-disabled.js"
33
37
  import { useLabelledBy } from "../label/context.svelte.js"
@@ -15,10 +15,17 @@ export type RadioGroupOwnProps<TType = string> = {
15
15
  name?: string;
16
16
  };
17
17
  export type RadioGroupProps<TType = string> = Props<typeof DEFAULT_RADIO_GROUP_TAG, RadioGroupRenderPropArg<TType>, RadioGroupOwnProps<TType>>;
18
+ declare function $$render<TType = string>(): {
19
+ props: RadioGroupProps<TType>;
20
+ exports: {};
21
+ bindings: "element" | "value";
22
+ slots: {};
23
+ events: {};
24
+ };
18
25
  declare class __sveltets_Render<TType = string> {
19
- props(): RadioGroupProps<TType>;
20
- events(): {};
21
- slots(): {};
26
+ props(): ReturnType<typeof $$render<TType>>['props'];
27
+ events(): ReturnType<typeof $$render<TType>>['events'];
28
+ slots(): ReturnType<typeof $$render<TType>>['slots'];
22
29
  bindings(): "element" | "value";
23
30
  exports(): {};
24
31
  }
@@ -29,7 +29,7 @@
29
29
 
30
30
  <script lang="ts" generics="TType = ComponentProps<typeof RadioGroup>['value']">
31
31
  import { default as RadioGroup } from "./RadioGroup.svelte"
32
- import { useActions, useData } from "./contest.svelte.js"
32
+ import { useActions, useData } from "./context.svelte.js"
33
33
  import { useId } from "../hooks/use-id.js"
34
34
  import { useLabels } from "../label/context.svelte.js"
35
35
  import { useDescriptions } from "../description/context.svelte.js"
@@ -18,10 +18,17 @@ export type RadioOptionOwnProps<TType> = {
18
18
  export type RadioOptionProps<TType> = Props<typeof DEFAULT_OPTION_TAG, RadioOptionRenderPropArg, RadioOptionOwnProps<TType>>;
19
19
  import { default as RadioGroup } from "./RadioGroup.svelte";
20
20
  import { type ComponentProps } from "svelte";
21
+ declare function $$render<TType = ComponentProps<typeof RadioGroup>['value']>(): {
22
+ props: RadioOptionProps<TType>;
23
+ exports: {};
24
+ bindings: "element";
25
+ slots: {};
26
+ events: {};
27
+ };
21
28
  declare class __sveltets_Render<TType = ComponentProps<typeof RadioGroup>['value']> {
22
- props(): RadioOptionProps<TType>;
23
- events(): {};
24
- slots(): {};
29
+ props(): ReturnType<typeof $$render<TType>>['props'];
30
+ events(): ReturnType<typeof $$render<TType>>['events'];
31
+ slots(): ReturnType<typeof $$render<TType>>['slots'];
25
32
  bindings(): "element";
26
33
  exports(): {};
27
34
  }
@@ -16,10 +16,17 @@ export type TextareaOwnProps<TValue = string> = {
16
16
  autofocus?: boolean;
17
17
  };
18
18
  export type TextareaProps<TValue = string> = Props<typeof DEFAULT_TEXTAREA_TAG, TextareaRenderPropArg, TextareaOwnProps<TValue>>;
19
+ declare function $$render<TValue = string>(): {
20
+ props: TextareaProps<TValue>;
21
+ exports: {};
22
+ bindings: "element" | "value";
23
+ slots: {};
24
+ events: {};
25
+ };
19
26
  declare class __sveltets_Render<TValue = string> {
20
- props(): TextareaProps<TValue>;
21
- events(): {};
22
- slots(): {};
27
+ props(): ReturnType<typeof $$render<TValue>>['props'];
28
+ events(): ReturnType<typeof $$render<TValue>>['events'];
29
+ slots(): ReturnType<typeof $$render<TValue>>['slots'];
23
30
  bindings(): "element" | "value";
24
31
  exports(): {};
25
32
  }
@@ -41,12 +41,12 @@
41
41
  // If we have any of the enter/leave classes
42
42
  Boolean(
43
43
  props.enter ||
44
- props.enterFrom ||
45
- props.enterTo ||
46
- props.leave ||
47
- props.leaveFrom ||
48
- props.leaveTo ||
49
- props.class
44
+ props.enterFrom ||
45
+ props.enterTo ||
46
+ props.leave ||
47
+ props.leaveFrom ||
48
+ props.leaveTo ||
49
+ props.class
50
50
  ) ||
51
51
  // If the `as` prop is not a Fragment
52
52
  props.asChild
@@ -1,35 +1,28 @@
1
1
  import type { Props } from "./types.js";
2
- import { RenderFeatures } from "./render.js";
3
- declare class __sveltets_Render<TFeature extends RenderFeatures, TSlot extends Record<string, any>, TValue> {
4
- props(): {
5
- ourProps?: Expand<Omit<any, "asChild" | "children" | "class"> & {
6
- asChild?: boolean;
7
- children?: import("svelte").Snippet<[TSlot & {
8
- props?: Record<string, any>;
9
- }]> | undefined;
10
- class?: import("svelte/elements.js").ClassValue | ((bag: TSlot) => string) | null | undefined;
11
- } & Expand<((TFeature extends RenderFeatures.Static ? {
12
- static?: boolean;
13
- } : {}) extends infer T ? T extends (TFeature extends RenderFeatures.Static ? {
14
- static?: boolean;
15
- } : {}) ? T extends any ? (x: T) => any : never : never : never) | ((TFeature extends RenderFeatures.RenderStrategy ? {
16
- unmount?: boolean;
17
- } : {}) extends infer T_1 ? T_1 extends (TFeature extends RenderFeatures.RenderStrategy ? {
18
- unmount?: boolean;
19
- } : {}) ? T_1 extends any ? (x: T_1) => any : never : never : never) extends (x: infer R) => any ? R : never>> | undefined;
20
- theirProps: Expand<Props<any, TSlot_1, any>>;
21
- slots?: TSlot | undefined;
2
+ import { RenderFeatures, type PropsForFeatures } from "./render.js";
3
+ declare function $$render<TFeature extends RenderFeatures, TSlot extends Record<string, any>, TValue>(): {
4
+ props: {
5
+ ourProps?: Expand<Props<any, TSlot> & PropsForFeatures<TFeature>>;
6
+ theirProps: Expand<Props<any, TSlot, any>>;
7
+ slots?: TSlot;
22
8
  defaultTag?: string;
23
- features?: TFeature | undefined;
9
+ features?: TFeature;
24
10
  visible?: boolean;
25
11
  name: string;
26
12
  ref?: HTMLElement;
27
13
  element?: HTMLElement;
28
- value?: TValue | undefined;
14
+ value?: TValue;
29
15
  checked?: boolean;
30
16
  };
31
- events(): {};
32
- slots(): {};
17
+ exports: {};
18
+ bindings: "element" | "value" | "checked";
19
+ slots: {};
20
+ events: {};
21
+ };
22
+ declare class __sveltets_Render<TFeature extends RenderFeatures, TSlot extends Record<string, any>, TValue> {
23
+ props(): ReturnType<typeof $$render<TFeature, TSlot, TValue>>['props'];
24
+ events(): ReturnType<typeof $$render<TFeature, TSlot, TValue>>['events'];
25
+ slots(): ReturnType<typeof $$render<TFeature, TSlot, TValue>>['slots'];
33
26
  bindings(): "element" | "value" | "checked";
34
27
  exports(): {};
35
28
  }
@@ -14,7 +14,7 @@
14
14
  */
15
15
  import { setContext } from "svelte"
16
16
  import type { FloatingNodeType } from "../types.js"
17
- import { useFloatingParentNodeId } from "./FloatingTree.svelte"
17
+ import { useFloatingParentNodeId } from "./context.svelte.js"
18
18
 
19
19
  const { children, id }: FloatingNodeProps = $props()
20
20
 
@@ -1,59 +1,3 @@
1
- <script lang="ts" module>
2
- import { getContext, type Snippet } from "svelte"
3
- import { useId } from "../hooks/useId.svelte.js"
4
- import type { FloatingNodeType, FloatingTreeType, ReferenceType } from "../types.js"
5
- import { createPubSub } from "../utils/createPubSub.js"
6
- import type { MutableRefObject } from "../../../ref.svelte.js"
7
-
8
- //const FloatingNodeContext = React.createContext<FloatingNodeType | null>(null)
9
- //const FloatingTreeContext = React.createContext<FloatingTreeType | null>(null)
10
-
11
- /**
12
- * Returns the parent node id for nested floating elements, if available.
13
- * Returns `null` for top-level floating elements.
14
- */
15
- export const useFloatingParentNodeId = (): { readonly value: string | null } => {
16
- const context = getContext<FloatingNodeType>("FloatingNodeContext")
17
- return {
18
- get value() {
19
- return context?.id ?? null
20
- },
21
- }
22
- }
23
-
24
- /**
25
- * Returns the nearest floating tree context, if available.
26
- */
27
- export const useFloatingTree = <RT extends ReferenceType = ReferenceType>(): FloatingTreeType<RT> | null =>
28
- getContext<FloatingTreeType<RT>>("FloatingTreeContext") ?? null
29
-
30
- /**
31
- * Registers a node into the `FloatingTree`, returning its id.
32
- * @see https://floating-ui.com/docs/FloatingTree
33
- */
34
- export function useFloatingNodeId(options: { customParentId?: string }): string {
35
- const { customParentId } = $derived(options)
36
- const id = useId()
37
- const tree = useFloatingTree()
38
- const reactParentId = useFloatingParentNodeId()
39
- const parentId = $derived(customParentId || reactParentId.value)
40
-
41
- $effect(() => {
42
- const node = { id, parentId }
43
- tree?.addNode(node)
44
- return () => {
45
- tree?.removeNode(node)
46
- }
47
- }) //, [tree, id, parentId])
48
-
49
- return id
50
- }
51
-
52
- export interface FloatingTreeProps {
53
- children?: Snippet
54
- }
55
- </script>
56
-
57
1
  <script lang="ts">
58
2
  /**
59
3
  * Provides context for nested floating elements when they are not children of
@@ -66,6 +10,10 @@
66
10
  * @see https://floating-ui.com/docs/FloatingTree
67
11
  */
68
12
  import { setContext } from "svelte"
13
+ import { createPubSub } from "../utils/createPubSub.js"
14
+ import type { MutableRefObject } from "../../../ref.svelte.js"
15
+ import type { FloatingTreeProps } from "./context.svelte.js"
16
+ import type { FloatingNodeType, FloatingTreeType, ReferenceType } from "../types.js"
69
17
 
70
18
  const { children }: FloatingTreeProps = $props()
71
19
 
@@ -1,26 +1,4 @@
1
- import { type Snippet } from "svelte";
2
- import type { FloatingTreeType, ReferenceType } from "../types.js";
3
- /**
4
- * Returns the parent node id for nested floating elements, if available.
5
- * Returns `null` for top-level floating elements.
6
- */
7
- export declare const useFloatingParentNodeId: () => {
8
- readonly value: string | null;
9
- };
10
- /**
11
- * Returns the nearest floating tree context, if available.
12
- */
13
- export declare const useFloatingTree: <RT extends ReferenceType = ReferenceType>() => FloatingTreeType<RT> | null;
14
- /**
15
- * Registers a node into the `FloatingTree`, returning its id.
16
- * @see https://floating-ui.com/docs/FloatingTree
17
- */
18
- export declare function useFloatingNodeId(options: {
19
- customParentId?: string;
20
- }): string;
21
- export interface FloatingTreeProps {
22
- children?: Snippet;
23
- }
1
+ import type { FloatingTreeProps } from "./context.svelte.js";
24
2
  declare const FloatingTree: import("svelte").Component<FloatingTreeProps, {}, "">;
25
3
  type FloatingTree = ReturnType<typeof FloatingTree>;
26
4
  export default FloatingTree;
@@ -0,0 +1,23 @@
1
+ import { type Snippet } from "svelte";
2
+ import type { FloatingTreeType, ReferenceType } from "../types.js";
3
+ /**
4
+ * Returns the parent node id for nested floating elements, if available.
5
+ * Returns `null` for top-level floating elements.
6
+ */
7
+ export declare const useFloatingParentNodeId: () => {
8
+ readonly value: string | null;
9
+ };
10
+ /**
11
+ * Returns the nearest floating tree context, if available.
12
+ */
13
+ export declare const useFloatingTree: <RT extends ReferenceType = ReferenceType>() => FloatingTreeType<RT> | null;
14
+ /**
15
+ * Registers a node into the `FloatingTree`, returning its id.
16
+ * @see https://floating-ui.com/docs/FloatingTree
17
+ */
18
+ export declare function useFloatingNodeId(options: {
19
+ customParentId?: string;
20
+ }): string;
21
+ export interface FloatingTreeProps {
22
+ children?: Snippet;
23
+ }
@@ -0,0 +1,39 @@
1
+ import { getContext } from "svelte";
2
+ import { useId } from "../hooks/useId.svelte.js";
3
+ //const FloatingNodeContext = React.createContext<FloatingNodeType | null>(null)
4
+ //const FloatingTreeContext = React.createContext<FloatingTreeType | null>(null)
5
+ /**
6
+ * Returns the parent node id for nested floating elements, if available.
7
+ * Returns `null` for top-level floating elements.
8
+ */
9
+ export const useFloatingParentNodeId = () => {
10
+ const context = getContext("FloatingNodeContext");
11
+ return {
12
+ get value() {
13
+ return context?.id ?? null;
14
+ },
15
+ };
16
+ };
17
+ /**
18
+ * Returns the nearest floating tree context, if available.
19
+ */
20
+ export const useFloatingTree = () => getContext("FloatingTreeContext") ?? null;
21
+ /**
22
+ * Registers a node into the `FloatingTree`, returning its id.
23
+ * @see https://floating-ui.com/docs/FloatingTree
24
+ */
25
+ export function useFloatingNodeId(options) {
26
+ const { customParentId } = $derived(options);
27
+ const id = useId();
28
+ const tree = useFloatingTree();
29
+ const reactParentId = useFloatingParentNodeId();
30
+ const parentId = $derived(customParentId || reactParentId.value);
31
+ $effect(() => {
32
+ const node = { id, parentId };
33
+ tree?.addNode(node);
34
+ return () => {
35
+ tree?.removeNode(node);
36
+ };
37
+ }); //, [tree, id, parentId])
38
+ return id;
39
+ }
@@ -1,6 +1,6 @@
1
1
  import { useFloating as usePosition } from "../../svelte-dom/index.js";
2
2
  import { isElement } from "@floating-ui/utils/dom";
3
- import { useFloatingTree } from "../components/FloatingTree.svelte";
3
+ import { useFloatingTree } from "../components/context.svelte.js";
4
4
  import { useFloatingRootContext } from "./useFloatingRootContext.svelte.js";
5
5
  /**
6
6
  * Provides data to position a floating element and context to add interactions.
@@ -1,8 +1,8 @@
1
1
  import { isElement } from "@floating-ui/utils/dom";
2
- //import { useEffectEvent } from "./utils/useEffectEvent"
2
+ //import { useEffectEvent } from "../utils/useEffectEvent.js"
3
3
  import { createPubSub } from "../utils/createPubSub.js";
4
4
  import { useId } from "./useId.svelte.js";
5
- import { useFloatingParentNodeId } from "../components/FloatingTree.svelte";
5
+ import { useFloatingParentNodeId } from "../components/context.svelte.js";
6
6
  import { error } from "../utils/log.js";
7
7
  import { DEV } from "esm-env";
8
8
  export function useFloatingRootContext(options) {
@@ -1,4 +1,4 @@
1
- import type { Props } from "./types.js";
1
+ import type { Expand, Props } from "./types.js";
2
2
  export declare enum RenderFeatures {
3
3
  /** No features at all */
4
4
  None = 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pzerelles/headlessui-svelte",
3
- "version": "2.1.3-next.1",
3
+ "version": "2.1.3-next.2",
4
4
  "repository": {
5
5
  "url": "https://github.com/pzerelles/headlessui-svelte"
6
6
  },
@@ -301,39 +301,39 @@
301
301
  "@playwright/test": "^1.58.2",
302
302
  "@pzerelles/heroicons-svelte": "^2.2.3",
303
303
  "@sveltejs/adapter-auto": "^7.0.1",
304
- "@sveltejs/kit": "^2.53.4",
304
+ "@sveltejs/kit": "^2.55.0",
305
305
  "@sveltejs/package": "^2.5.7",
306
- "@sveltejs/vite-plugin-svelte": "^6.2.4",
306
+ "@sveltejs/vite-plugin-svelte": "^7.0.0",
307
307
  "@tailwindcss/vite": "^4.2.1",
308
308
  "@testing-library/jest-dom": "^6.9.1",
309
309
  "@testing-library/svelte": "^5.3.1",
310
310
  "@types/eslint": "^9.6.1",
311
311
  "@types/node": "^22.19.15",
312
312
  "eslint": "^9.39.4",
313
- "eslint-config-prettier": "^9.1.2",
314
- "eslint-plugin-svelte": "^2.46.1",
313
+ "eslint-config-prettier": "^10.1.8",
314
+ "eslint-plugin-svelte": "^3.15.2",
315
315
  "globals": "^17.4.0",
316
- "jsdom": "^28.1.0",
316
+ "jsdom": "^29.0.0",
317
317
  "outdent": "^0.8.0",
318
318
  "prettier": "^3.8.1",
319
319
  "prettier-plugin-svelte": "^3.5.1",
320
320
  "prettier-plugin-tailwindcss": "^0.7.2",
321
321
  "publint": "^0.3.18",
322
- "svelte": "^5.53.10",
322
+ "svelte": "^5.53.12",
323
323
  "svelte-check": "^4.4.5",
324
324
  "tailwindcss": "^4.2.1",
325
325
  "tslib": "^2.8.1",
326
326
  "typescript": "^5.9.3",
327
327
  "typescript-eslint": "^8.57.0",
328
- "vite": "^7.3.1",
329
- "vitest": "^4.0.18"
328
+ "vite": "^8.0.0",
329
+ "vitest": "^4.1.0"
330
330
  },
331
331
  "dependencies": {
332
332
  "@floating-ui/core": "^1.7.5",
333
333
  "@floating-ui/dom": "^1.7.6",
334
334
  "@floating-ui/utils": "^0.2.11",
335
335
  "esm-env": "^1.2.2",
336
- "nanoid": "^5.1.6"
336
+ "nanoid": "^5.1.7"
337
337
  },
338
338
  "svelte": "./dist/index.js",
339
339
  "types": "./dist/index.d.ts",