@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.
- package/dist/checkbox/Checkbox.svelte.d.ts +10 -3
- package/dist/dialog/InternalDialog.svelte +6 -1
- package/dist/disclosure/Disclosure.svelte +5 -1
- package/dist/input/Input.svelte.d.ts +10 -3
- package/dist/internal/floating.svelte.d.ts +2 -2
- package/dist/listbox/Listbox.svelte.d.ts +10 -3
- package/dist/listbox/ListboxOption.svelte.d.ts +10 -3
- package/dist/listbox/ListboxOptions.svelte +7 -1
- package/dist/menu/context.svelte.js +0 -1
- package/dist/popover/PopoverGroup.svelte +1 -1
- package/dist/portal/InternalPortal.svelte +1 -1
- package/dist/radio-group/Radio.svelte +1 -1
- package/dist/radio-group/Radio.svelte.d.ts +10 -3
- package/dist/radio-group/RadioGroup.svelte +5 -1
- package/dist/radio-group/RadioGroup.svelte.d.ts +10 -3
- package/dist/radio-group/RadioOption.svelte +1 -1
- package/dist/radio-group/RadioOption.svelte.d.ts +10 -3
- package/dist/textarea/Textarea.svelte.d.ts +10 -3
- package/dist/transition/InternalTransitionChild.svelte +6 -6
- package/dist/utils/ElementOrComponent.svelte.d.ts +17 -24
- package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte +1 -1
- package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte +4 -56
- package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte.d.ts +1 -23
- package/dist/utils/floating-ui/svelte/components/context.svelte.d.ts +23 -0
- package/dist/utils/floating-ui/svelte/components/context.svelte.js +39 -0
- package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.js +1 -1
- package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.js +2 -2
- package/dist/utils/render.d.ts +1 -1
- package/package.json +10 -10
- /package/dist/radio-group/{contest.svelte.d.ts → context.svelte.d.ts} +0 -0
- /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():
|
|
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 {
|
|
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 {
|
|
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():
|
|
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
|
|
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
|
|
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():
|
|
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():
|
|
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 {
|
|
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
|
|
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 "./
|
|
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():
|
|
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 {
|
|
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():
|
|
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 "./
|
|
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():
|
|
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():
|
|
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
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
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
|
|
4
|
-
props
|
|
5
|
-
ourProps?: Expand<
|
|
6
|
-
|
|
7
|
-
|
|
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
|
|
9
|
+
features?: TFeature;
|
|
24
10
|
visible?: boolean;
|
|
25
11
|
name: string;
|
|
26
12
|
ref?: HTMLElement;
|
|
27
13
|
element?: HTMLElement;
|
|
28
|
-
value?: TValue
|
|
14
|
+
value?: TValue;
|
|
29
15
|
checked?: boolean;
|
|
30
16
|
};
|
|
31
|
-
|
|
32
|
-
|
|
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 "./
|
|
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 {
|
|
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/
|
|
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 "
|
|
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/
|
|
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) {
|
package/dist/utils/render.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pzerelles/headlessui-svelte",
|
|
3
|
-
"version": "2.1.3-next.
|
|
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.
|
|
304
|
+
"@sveltejs/kit": "^2.55.0",
|
|
305
305
|
"@sveltejs/package": "^2.5.7",
|
|
306
|
-
"@sveltejs/vite-plugin-svelte": "^
|
|
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": "^
|
|
314
|
-
"eslint-plugin-svelte": "^
|
|
313
|
+
"eslint-config-prettier": "^10.1.8",
|
|
314
|
+
"eslint-plugin-svelte": "^3.15.2",
|
|
315
315
|
"globals": "^17.4.0",
|
|
316
|
-
"jsdom": "^
|
|
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.
|
|
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": "^
|
|
329
|
-
"vitest": "^4.0
|
|
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.
|
|
336
|
+
"nanoid": "^5.1.7"
|
|
337
337
|
},
|
|
338
338
|
"svelte": "./dist/index.js",
|
|
339
339
|
"types": "./dist/index.d.ts",
|
|
File without changes
|
|
File without changes
|