@pzerelles/headlessui-svelte 2.1.2-next.5 → 2.1.2-next.50
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/button/Button.svelte +16 -19
- package/dist/button/Button.svelte.d.ts +8 -36
- package/dist/button/index.d.ts +1 -1
- package/dist/button/index.js +1 -1
- package/dist/checkbox/Checkbox.svelte +31 -27
- package/dist/checkbox/Checkbox.svelte.d.ts +17 -38
- package/dist/checkbox/index.d.ts +1 -1
- package/dist/checkbox/index.js +1 -1
- package/dist/close-button/CloseButton.svelte +4 -7
- package/dist/close-button/CloseButton.svelte.d.ts +3 -46
- package/dist/close-button/index.d.ts +1 -0
- package/dist/close-button/index.js +1 -0
- package/dist/data-interactive/DataInteractive.svelte +6 -22
- package/dist/data-interactive/DataInteractive.svelte.d.ts +9 -34
- package/dist/data-interactive/index.d.ts +1 -1
- package/dist/data-interactive/index.js +1 -1
- package/dist/description/Description.svelte +29 -24
- package/dist/description/Description.svelte.d.ts +9 -30
- package/dist/description/context.svelte.js +14 -16
- package/dist/description/index.d.ts +1 -1
- package/dist/dialog/Dialog.svelte +315 -31
- package/dist/dialog/Dialog.svelte.d.ts +7 -45
- package/dist/dialog/DialogBackdrop.svelte +11 -14
- package/dist/dialog/DialogBackdrop.svelte.d.ts +8 -33
- package/dist/dialog/DialogPanel.svelte +23 -19
- package/dist/dialog/DialogPanel.svelte.d.ts +8 -34
- package/dist/dialog/DialogTitle.svelte +17 -8
- package/dist/dialog/DialogTitle.svelte.d.ts +9 -30
- package/dist/dialog/context.svelte.js +2 -2
- package/dist/dialog/index.d.ts +4 -4
- package/dist/dialog/index.js +4 -4
- package/dist/disclosure/Disclosure.svelte +61 -0
- package/dist/disclosure/Disclosure.svelte.d.ts +14 -0
- package/dist/disclosure/DisclosureButton.svelte +191 -0
- package/dist/disclosure/DisclosureButton.svelte.d.ts +19 -0
- package/dist/disclosure/DisclosurePanel.svelte +98 -0
- package/dist/disclosure/DisclosurePanel.svelte.d.ts +16 -0
- package/dist/disclosure/context.svelte.d.ts +32 -0
- package/dist/disclosure/context.svelte.js +94 -0
- package/dist/disclosure/index.d.ts +3 -0
- package/dist/disclosure/index.js +3 -0
- package/dist/field/Field.svelte +27 -26
- package/dist/field/Field.svelte.d.ts +7 -34
- package/dist/field/index.d.ts +1 -1
- package/dist/fieldset/Fieldset.svelte +21 -20
- package/dist/fieldset/Fieldset.svelte.d.ts +8 -35
- package/dist/fieldset/index.d.ts +1 -1
- package/dist/focus-trap/FocusTrap.svelte +29 -36
- package/dist/focus-trap/FocusTrap.svelte.d.ts +8 -38
- package/dist/hooks/use-controllable.svelte.js +3 -2
- package/dist/hooks/use-did-element-move.svelte.js +5 -10
- package/dist/hooks/use-disabled.d.ts +6 -1
- package/dist/hooks/use-disabled.js +10 -5
- package/dist/hooks/use-element-size.svelte.js +1 -1
- package/dist/hooks/use-event-listener.svelte.d.ts +1 -1
- package/dist/hooks/use-event-listener.svelte.js +3 -1
- package/dist/hooks/use-focus-ring.svelte.js +1 -1
- package/dist/hooks/use-inert-others.svelte.js +10 -10
- package/dist/hooks/use-is-top-layer.svelte.js +2 -2
- package/dist/hooks/use-resolve-button-type.svelte.js +0 -1
- package/dist/hooks/use-root-containers.svelte.d.ts +2 -2
- package/dist/hooks/use-root-containers.svelte.js +5 -5
- package/dist/hooks/use-tab-direction.svelte.js +1 -1
- package/dist/hooks/use-transition.svelte.js +2 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.js +6 -2
- package/dist/input/Input.svelte +28 -21
- package/dist/input/Input.svelte.d.ts +16 -33
- package/dist/input/index.d.ts +1 -1
- package/dist/input/index.js +1 -1
- package/dist/internal/FloatingProvider.svelte +17 -0
- package/dist/internal/FloatingProvider.svelte.d.ts +8 -0
- package/dist/internal/FocusSentinel.svelte +33 -32
- package/dist/internal/FocusSentinel.svelte.d.ts +4 -18
- package/dist/internal/ForcePortalRoot.svelte.d.ts +4 -18
- package/dist/internal/FormFields.svelte +18 -13
- package/dist/internal/FormFields.svelte.d.ts +4 -18
- package/dist/internal/FormFieldsProvider.svelte +17 -0
- package/dist/internal/FormFieldsProvider.svelte.d.ts +7 -0
- package/dist/internal/FormResolver.svelte +6 -2
- package/dist/internal/FormResolver.svelte.d.ts +4 -18
- package/dist/internal/Hidden.svelte +10 -10
- package/dist/internal/Hidden.svelte.d.ts +6 -33
- package/dist/internal/MainTreeProvider.svelte +1 -1
- package/dist/internal/MainTreeProvider.svelte.d.ts +4 -18
- package/dist/internal/Portal.svelte.d.ts +4 -18
- package/dist/internal/floating-provider.svelte.d.ts +3 -0
- package/dist/internal/floating-provider.svelte.js +206 -0
- package/dist/internal/floating.svelte.d.ts +46 -22
- package/dist/internal/floating.svelte.js +90 -272
- package/dist/internal/form-fields.svelte.d.ts +10 -0
- package/dist/internal/form-fields.svelte.js +23 -0
- package/dist/internal/frozen.svelte.js +1 -1
- package/dist/label/Label.svelte +17 -13
- package/dist/label/Label.svelte.d.ts +8 -33
- package/dist/label/context.svelte.js +1 -1
- package/dist/label/index.d.ts +1 -1
- package/dist/legend/Legend.svelte +22 -15
- package/dist/legend/Legend.svelte.d.ts +10 -34
- package/dist/listbox/Listbox.svelte +79 -151
- package/dist/listbox/Listbox.svelte.d.ts +16 -91
- package/dist/listbox/ListboxButton.svelte +31 -29
- package/dist/listbox/ListboxButton.svelte.d.ts +8 -38
- package/dist/listbox/ListboxOption.svelte +40 -27
- package/dist/listbox/ListboxOption.svelte.d.ts +16 -32
- package/dist/listbox/ListboxOptions.svelte +126 -72
- package/dist/listbox/ListboxOptions.svelte.d.ts +8 -43
- package/dist/listbox/ListboxSelectedOption.svelte +24 -26
- package/dist/listbox/ListboxSelectedOption.svelte.d.ts +14 -39
- package/dist/listbox/context.svelte.d.ts +76 -0
- package/dist/listbox/context.svelte.js +36 -0
- package/dist/listbox/index.d.ts +5 -5
- package/dist/listbox/index.js +4 -4
- package/dist/menu/Menu.svelte +22 -266
- package/dist/menu/Menu.svelte.d.ts +7 -37
- package/dist/menu/MenuButton.svelte +29 -24
- package/dist/menu/MenuButton.svelte.d.ts +8 -39
- package/dist/menu/MenuHeading.svelte +12 -16
- package/dist/menu/MenuHeading.svelte.d.ts +7 -36
- package/dist/menu/MenuItem.svelte +18 -23
- package/dist/menu/MenuItem.svelte.d.ts +9 -39
- package/dist/menu/MenuItems.svelte +33 -34
- package/dist/menu/MenuItems.svelte.d.ts +8 -43
- package/dist/menu/MenuSection.svelte +9 -12
- package/dist/menu/MenuSection.svelte.d.ts +7 -33
- package/dist/menu/MenuSeparator.svelte +9 -12
- package/dist/menu/MenuSeparator.svelte.d.ts +7 -33
- package/dist/menu/context.svelte.d.ts +2 -1
- package/dist/menu/context.svelte.js +212 -2
- package/dist/menu/index.d.ts +7 -7
- package/dist/menu/index.js +3 -3
- package/dist/popover/Popover.svelte +228 -0
- package/dist/popover/Popover.svelte.d.ts +15 -0
- package/dist/popover/PopoverBackdrop.svelte +83 -0
- package/dist/popover/PopoverBackdrop.svelte.d.ts +17 -0
- package/dist/popover/PopoverButton.svelte +324 -0
- package/dist/popover/PopoverButton.svelte.d.ts +21 -0
- package/dist/popover/PopoverGroup.svelte +66 -0
- package/dist/popover/PopoverGroup.svelte.d.ts +9 -0
- package/dist/popover/PopoverPanel.svelte +359 -0
- package/dist/popover/PopoverPanel.svelte.d.ts +22 -0
- package/dist/popover/context.svelte.d.ts +51 -0
- package/dist/popover/context.svelte.js +108 -0
- package/dist/popover/index.d.ts +5 -0
- package/dist/popover/index.js +5 -0
- package/dist/portal/InternalPortal.svelte +17 -17
- package/dist/portal/InternalPortal.svelte.d.ts +6 -33
- package/dist/portal/Portal.svelte +7 -6
- package/dist/portal/Portal.svelte.d.ts +3 -22
- package/dist/portal/PortalGroup.svelte +6 -14
- package/dist/portal/PortalGroup.svelte.d.ts +5 -34
- package/dist/radio-group/Radio.svelte +142 -0
- package/dist/radio-group/Radio.svelte.d.ts +35 -0
- package/dist/radio-group/RadioGroup.svelte +222 -0
- package/dist/radio-group/RadioGroup.svelte.d.ts +34 -0
- package/dist/radio-group/RadioOption.svelte +145 -0
- package/dist/radio-group/RadioOption.svelte.d.ts +37 -0
- package/dist/radio-group/contest.svelte.d.ts +30 -0
- package/dist/radio-group/contest.svelte.js +40 -0
- package/dist/radio-group/index.d.ts +3 -0
- package/dist/radio-group/index.js +3 -0
- package/dist/select/Select.svelte +112 -0
- package/dist/select/Select.svelte.d.ts +21 -0
- package/dist/select/index.d.ts +1 -0
- package/dist/select/index.js +1 -0
- package/dist/switch/Switch.svelte +27 -28
- package/dist/switch/Switch.svelte.d.ts +9 -42
- package/dist/switch/SwitchGroup.svelte +5 -5
- package/dist/switch/SwitchGroup.svelte.d.ts +8 -30
- package/dist/switch/index.d.ts +1 -1
- package/dist/switch/index.js +1 -1
- package/dist/tabs/Tab.svelte +28 -31
- package/dist/tabs/Tab.svelte.d.ts +8 -36
- package/dist/tabs/TabGroup.svelte +42 -264
- package/dist/tabs/TabGroup.svelte.d.ts +7 -57
- package/dist/tabs/TabList.svelte +13 -16
- package/dist/tabs/TabList.svelte.d.ts +8 -31
- package/dist/tabs/TabPanel.svelte +20 -20
- package/dist/tabs/TabPanel.svelte.d.ts +8 -38
- package/dist/tabs/TabPanels.svelte +11 -9
- package/dist/tabs/TabPanels.svelte.d.ts +8 -30
- package/dist/tabs/context.svelte.d.ts +31 -0
- package/dist/tabs/context.svelte.js +134 -0
- package/dist/tabs/index.d.ts +5 -5
- package/dist/tabs/index.js +4 -4
- package/dist/textarea/Textarea.svelte +24 -20
- package/dist/textarea/Textarea.svelte.d.ts +18 -30
- package/dist/textarea/index.d.ts +1 -1
- package/dist/textarea/index.js +1 -1
- package/dist/transition/InternalTransitionChild.svelte +36 -22
- package/dist/transition/InternalTransitionChild.svelte.d.ts +6 -37
- package/dist/transition/Transition.svelte +16 -17
- package/dist/transition/Transition.svelte.d.ts +8 -38
- package/dist/transition/TransitionChild.svelte +13 -12
- package/dist/transition/TransitionChild.svelte.d.ts +11 -38
- package/dist/transition/context.svelte.js +11 -11
- package/dist/transition/index.d.ts +2 -2
- package/dist/transition/index.js +2 -2
- package/dist/utils/DisabledProvider.svelte +10 -0
- package/dist/utils/DisabledProvider.svelte.d.ts +8 -0
- package/dist/utils/ElementOrComponent.svelte +58 -17
- package/dist/utils/ElementOrComponent.svelte.d.ts +19 -30
- package/dist/utils/StableCollection.svelte.d.ts +4 -18
- package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte +32 -0
- package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte.d.ts +8 -0
- package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte +94 -0
- package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte.d.ts +26 -0
- package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.d.ts +6 -0
- package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.js +158 -0
- package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.d.ts +11 -0
- package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.js +53 -0
- package/dist/utils/floating-ui/svelte/hooks/useId.svelte.d.ts +9 -0
- package/dist/utils/floating-ui/svelte/hooks/useId.svelte.js +28 -0
- package/dist/utils/floating-ui/svelte/hooks/useInteractions.svelte.d.ts +23 -0
- package/dist/utils/floating-ui/svelte/hooks/useInteractions.svelte.js +72 -0
- package/dist/utils/floating-ui/svelte/index.d.ts +5 -0
- package/dist/utils/floating-ui/svelte/index.js +5 -0
- package/dist/utils/floating-ui/svelte/inner.svelte.d.ts +83 -0
- package/dist/utils/floating-ui/svelte/inner.svelte.js +178 -0
- package/dist/utils/floating-ui/svelte/types.d.ts +114 -0
- package/dist/utils/floating-ui/svelte/utils/createPubSub.d.ts +5 -0
- package/dist/utils/floating-ui/svelte/utils/createPubSub.js +14 -0
- package/dist/utils/floating-ui/svelte/utils/getFloatingFocusElement.d.ts +2 -0
- package/dist/utils/floating-ui/svelte/utils/getFloatingFocusElement.js +13 -0
- package/dist/utils/floating-ui/svelte/utils/log.d.ts +2 -0
- package/dist/utils/floating-ui/svelte/utils/log.js +19 -0
- package/dist/utils/floating-ui/svelte/utils.d.ts +19 -0
- package/dist/utils/floating-ui/svelte/utils.js +136 -0
- package/dist/utils/floating-ui/svelte-dom/arrow.d.ts +22 -0
- package/dist/utils/floating-ui/svelte-dom/arrow.js +29 -0
- package/dist/utils/floating-ui/svelte-dom/index.d.ts +2 -0
- package/dist/utils/floating-ui/svelte-dom/index.js +2 -0
- package/dist/utils/floating-ui/svelte-dom/types.d.ts +80 -0
- package/dist/utils/floating-ui/svelte-dom/types.js +3 -0
- package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.d.ts +6 -0
- package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.js +183 -0
- package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.d.ts +1 -0
- package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.js +50 -0
- package/dist/utils/floating-ui/svelte-dom/utils/getDPR.d.ts +1 -0
- package/dist/utils/floating-ui/svelte-dom/utils/getDPR.js +7 -0
- package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.d.ts +1 -0
- package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.js +5 -0
- package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.d.ts +4 -0
- package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.js +7 -0
- package/dist/utils/id.d.ts +1 -1
- package/dist/utils/id.js +1 -1
- package/dist/utils/index.d.ts +3 -0
- package/dist/utils/index.js +3 -0
- package/dist/utils/state.js +4 -4
- package/dist/utils/style.d.ts +2 -0
- package/dist/utils/style.js +6 -0
- package/dist/utils/types.d.ts +13 -19
- package/package.json +54 -53
- package/dist/combobox/Combobox.svelte +0 -53
- package/dist/combobox/Combobox.svelte.d.ts +0 -50
- package/dist/dialog/InternalDialog.svelte +0 -294
- package/dist/dialog/InternalDialog.svelte.d.ts +0 -42
- package/dist/internal/HoistFormFields.svelte +0 -14
- package/dist/internal/HoistFormFields.svelte.d.ts +0 -21
- package/dist/internal/id.d.ts +0 -8
- package/dist/internal/id.js +0 -11
- package/dist/listbox/ListboxStates.d.ts +0 -12
- package/dist/listbox/ListboxStates.js +0 -15
- package/dist/utils/Generic.svelte +0 -56
- package/dist/utils/Generic.svelte.d.ts +0 -35
- package/dist/utils/alternative-types.d.ts +0 -21
- /package/dist/utils/{alternative-types.js → floating-ui/svelte/types.js} +0 -0
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Props } from "./types.js";
|
|
2
2
|
import { RenderFeatures } from "./render.js";
|
|
3
|
-
declare class __sveltets_Render<TFeature extends RenderFeatures,
|
|
3
|
+
declare class __sveltets_Render<TFeature extends RenderFeatures, TSlot extends Record<string, any>, TValue> {
|
|
4
4
|
props(): {
|
|
5
|
-
ourProps?: Expand<{
|
|
6
|
-
|
|
7
|
-
[
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
} & {
|
|
12
|
-
class?: any;
|
|
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;
|
|
13
11
|
} & Expand<((TFeature extends RenderFeatures.Static ? {
|
|
14
12
|
static?: boolean;
|
|
15
13
|
} : {}) extends infer T ? T extends (TFeature extends RenderFeatures.Static ? {
|
|
@@ -19,38 +17,29 @@ declare class __sveltets_Render<TFeature extends RenderFeatures, TTag extends El
|
|
|
19
17
|
} : {}) extends infer T_1 ? T_1 extends (TFeature extends RenderFeatures.RenderStrategy ? {
|
|
20
18
|
unmount?: boolean;
|
|
21
19
|
} : {}) ? T_1 extends any ? (x: T_1) => any : never : never : never) extends (x: infer R) => any ? R : never>> | undefined;
|
|
22
|
-
theirProps:
|
|
23
|
-
as?: TTag | undefined;
|
|
24
|
-
children?: import("./types.js").Children<TSlot> | undefined;
|
|
25
|
-
ref?: HTMLElement | undefined;
|
|
26
|
-
class?: any;
|
|
27
|
-
};
|
|
28
|
-
slot?: TSlot | undefined;
|
|
20
|
+
theirProps: Expand<Props<any, TSlot_1, any>>;
|
|
29
21
|
slots?: TSlot | undefined;
|
|
30
|
-
defaultTag
|
|
22
|
+
defaultTag?: string;
|
|
31
23
|
features?: TFeature | undefined;
|
|
32
24
|
visible?: boolean;
|
|
33
25
|
name: string;
|
|
34
26
|
ref?: HTMLElement;
|
|
27
|
+
element?: HTMLElement;
|
|
35
28
|
value?: TValue | undefined;
|
|
36
29
|
checked?: boolean;
|
|
37
30
|
};
|
|
38
|
-
events(): {}
|
|
39
|
-
[evt: string]: CustomEvent<any>;
|
|
40
|
-
};
|
|
31
|
+
events(): {};
|
|
41
32
|
slots(): {};
|
|
42
|
-
bindings(): "
|
|
33
|
+
bindings(): "element" | "value" | "checked";
|
|
43
34
|
exports(): {};
|
|
44
35
|
}
|
|
45
36
|
interface $$IsomorphicComponent {
|
|
46
|
-
new <TFeature extends RenderFeatures,
|
|
47
|
-
$$bindings?: ReturnType<__sveltets_Render<TFeature,
|
|
48
|
-
} & ReturnType<__sveltets_Render<TFeature,
|
|
49
|
-
<TFeature extends RenderFeatures,
|
|
50
|
-
|
|
51
|
-
}): ReturnType<__sveltets_Render<TFeature, TTag, TSlot, TValue>['exports']>;
|
|
52
|
-
z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any>['bindings']>;
|
|
37
|
+
new <TFeature extends RenderFeatures, TSlot extends Record<string, any>, TValue>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['props']>, ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['events']>, ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['slots']>> & {
|
|
38
|
+
$$bindings?: ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['bindings']>;
|
|
39
|
+
} & ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['exports']>;
|
|
40
|
+
<TFeature extends RenderFeatures, TSlot extends Record<string, any>, TValue>(internal: unknown, props: ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['props']> & {}): ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['exports']>;
|
|
41
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
|
|
53
42
|
}
|
|
54
43
|
declare const ElementOrComponent: $$IsomorphicComponent;
|
|
55
|
-
type ElementOrComponent<TFeature extends RenderFeatures,
|
|
44
|
+
type ElementOrComponent<TFeature extends RenderFeatures, TSlot extends Record<string, any>, TValue> = InstanceType<typeof ElementOrComponent<TFeature, TSlot, TValue>>;
|
|
56
45
|
export default ElementOrComponent;
|
|
@@ -1,22 +1,8 @@
|
|
|
1
1
|
import { type Snippet } from "svelte";
|
|
2
2
|
export declare function useStableCollectionIndex(group: string): number;
|
|
3
|
-
|
|
4
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
5
|
-
$$bindings?: Bindings;
|
|
6
|
-
} & Exports;
|
|
7
|
-
(internal: unknown, props: Props & {
|
|
8
|
-
$$events?: Events;
|
|
9
|
-
$$slots?: Slots;
|
|
10
|
-
}): Exports & {
|
|
11
|
-
$set?: any;
|
|
12
|
-
$on?: any;
|
|
13
|
-
};
|
|
14
|
-
z_$$bindings?: Bindings;
|
|
15
|
-
}
|
|
16
|
-
declare const StableCollection: $$__sveltets_2_IsomorphicComponent<{
|
|
3
|
+
type $$ComponentProps = {
|
|
17
4
|
children: Snippet;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
type StableCollection = InstanceType<typeof StableCollection>;
|
|
5
|
+
};
|
|
6
|
+
declare const StableCollection: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
7
|
+
type StableCollection = ReturnType<typeof StableCollection>;
|
|
22
8
|
export default StableCollection;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { Snippet } from "svelte"
|
|
3
|
+
|
|
4
|
+
export interface FloatingNodeProps {
|
|
5
|
+
children?: Snippet
|
|
6
|
+
id: string
|
|
7
|
+
}
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
/**
|
|
12
|
+
* Provides parent node context for nested floating elements.
|
|
13
|
+
* @see https://floating-ui.com/docs/FloatingTree
|
|
14
|
+
*/
|
|
15
|
+
import { setContext } from "svelte"
|
|
16
|
+
import type { FloatingNodeType } from "../types.js"
|
|
17
|
+
import { useFloatingParentNodeId } from "./FloatingTree.svelte"
|
|
18
|
+
|
|
19
|
+
const { children, id }: FloatingNodeProps = $props()
|
|
20
|
+
|
|
21
|
+
const parentId = useFloatingParentNodeId()
|
|
22
|
+
setContext<FloatingNodeType>("FloatingNodeContext", {
|
|
23
|
+
get id() {
|
|
24
|
+
return id
|
|
25
|
+
},
|
|
26
|
+
get parentId() {
|
|
27
|
+
return parentId.value
|
|
28
|
+
},
|
|
29
|
+
})
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
{#if children}{@render children()}{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Snippet } from "svelte";
|
|
2
|
+
export interface FloatingNodeProps {
|
|
3
|
+
children?: Snippet;
|
|
4
|
+
id: string;
|
|
5
|
+
}
|
|
6
|
+
declare const FloatingNode: import("svelte").Component<FloatingNodeProps, {}, "">;
|
|
7
|
+
type FloatingNode = ReturnType<typeof FloatingNode>;
|
|
8
|
+
export default FloatingNode;
|
|
@@ -0,0 +1,94 @@
|
|
|
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
|
+
<script lang="ts">
|
|
58
|
+
/**
|
|
59
|
+
* Provides context for nested floating elements when they are not children of
|
|
60
|
+
* each other on the DOM.
|
|
61
|
+
* This is not necessary in all cases, except when there must be explicit communication between parent and child floating elements. It is necessary for:
|
|
62
|
+
* - The `bubbles` option in the `useDismiss()` Hook
|
|
63
|
+
* - Nested virtual list navigation
|
|
64
|
+
* - Nested floating elements that each open on hover
|
|
65
|
+
* - Custom communication between parent and child floating elements
|
|
66
|
+
* @see https://floating-ui.com/docs/FloatingTree
|
|
67
|
+
*/
|
|
68
|
+
import { setContext } from "svelte"
|
|
69
|
+
|
|
70
|
+
const { children }: FloatingTreeProps = $props()
|
|
71
|
+
|
|
72
|
+
const nodesRef = $state<MutableRefObject<Array<FloatingNodeType>>>({ current: [] })
|
|
73
|
+
|
|
74
|
+
const addNode = (node: FloatingNodeType) => {
|
|
75
|
+
nodesRef.current = [...nodesRef.current, node]
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
const removeNode = (node: FloatingNodeType) => {
|
|
79
|
+
nodesRef.current = nodesRef.current.filter((n) => n !== node)
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const events = createPubSub()
|
|
83
|
+
|
|
84
|
+
setContext<FloatingTreeType<ReferenceType>>("FloatingTreeContext", {
|
|
85
|
+
get nodesRef() {
|
|
86
|
+
return nodesRef
|
|
87
|
+
},
|
|
88
|
+
addNode,
|
|
89
|
+
removeNode,
|
|
90
|
+
events,
|
|
91
|
+
})
|
|
92
|
+
</script>
|
|
93
|
+
|
|
94
|
+
{#if children}{@render children()}{/if}
|
|
@@ -0,0 +1,26 @@
|
|
|
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
|
+
}
|
|
24
|
+
declare const FloatingTree: import("svelte").Component<FloatingTreeProps, {}, "">;
|
|
25
|
+
type FloatingTree = ReturnType<typeof FloatingTree>;
|
|
26
|
+
export default FloatingTree;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ReferenceType, UseFloatingOptions, UseFloatingReturn } from "../types.js";
|
|
2
|
+
/**
|
|
3
|
+
* Provides data to position a floating element and context to add interactions.
|
|
4
|
+
* @see https://floating-ui.com/docs/useFloating
|
|
5
|
+
*/
|
|
6
|
+
export declare function useFloating<RT extends ReferenceType = ReferenceType>(options?: UseFloatingOptions): UseFloatingReturn<RT>;
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import { useFloating as usePosition } from "../../svelte-dom/index.js";
|
|
2
|
+
import { isElement } from "@floating-ui/utils/dom";
|
|
3
|
+
import { useFloatingTree } from "../components/FloatingTree.svelte";
|
|
4
|
+
import { useFloatingRootContext } from "./useFloatingRootContext.svelte.js";
|
|
5
|
+
/**
|
|
6
|
+
* Provides data to position a floating element and context to add interactions.
|
|
7
|
+
* @see https://floating-ui.com/docs/useFloating
|
|
8
|
+
*/
|
|
9
|
+
export function useFloating(options = {}) {
|
|
10
|
+
const { nodeId } = $derived(options);
|
|
11
|
+
const internalRootContext = useFloatingRootContext({
|
|
12
|
+
get open() {
|
|
13
|
+
return options.open;
|
|
14
|
+
},
|
|
15
|
+
get onOpenChange() {
|
|
16
|
+
return options.onOpenChange;
|
|
17
|
+
},
|
|
18
|
+
get elements() {
|
|
19
|
+
return {
|
|
20
|
+
reference: null,
|
|
21
|
+
floating: null,
|
|
22
|
+
...options.elements,
|
|
23
|
+
};
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
const rootContext = $derived(options.rootContext || internalRootContext);
|
|
27
|
+
const computedElements = $derived(rootContext.elements);
|
|
28
|
+
let _domReference = $state(null);
|
|
29
|
+
const setDomReference = (value) => (_domReference = value);
|
|
30
|
+
let positionReference = $state(null);
|
|
31
|
+
const _setPositionReference = (value) => (positionReference = value ?? null);
|
|
32
|
+
const optionDomReference = $derived(computedElements?.reference);
|
|
33
|
+
const domReference = $derived((optionDomReference || _domReference));
|
|
34
|
+
const domReferenceRef = $state({ current: null });
|
|
35
|
+
const tree = useFloatingTree();
|
|
36
|
+
$effect(() => {
|
|
37
|
+
if (domReference) {
|
|
38
|
+
domReferenceRef.current = domReference;
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
const position = usePosition({
|
|
42
|
+
get placement() {
|
|
43
|
+
return options.placement;
|
|
44
|
+
},
|
|
45
|
+
get strategy() {
|
|
46
|
+
return options.strategy;
|
|
47
|
+
},
|
|
48
|
+
get middleware() {
|
|
49
|
+
return options.middleware;
|
|
50
|
+
},
|
|
51
|
+
get platform() {
|
|
52
|
+
return options.platform;
|
|
53
|
+
},
|
|
54
|
+
get whileElementsMounted() {
|
|
55
|
+
return options.whileElementsMounted;
|
|
56
|
+
},
|
|
57
|
+
get open() {
|
|
58
|
+
return options.open;
|
|
59
|
+
},
|
|
60
|
+
get transform() {
|
|
61
|
+
return options.transform;
|
|
62
|
+
},
|
|
63
|
+
get elements() {
|
|
64
|
+
return {
|
|
65
|
+
...computedElements,
|
|
66
|
+
...(positionReference && { reference: positionReference }),
|
|
67
|
+
};
|
|
68
|
+
},
|
|
69
|
+
});
|
|
70
|
+
const setPositionReference = (node) => {
|
|
71
|
+
const computedPositionReference = isElement(node)
|
|
72
|
+
? {
|
|
73
|
+
getBoundingClientRect: () => node.getBoundingClientRect(),
|
|
74
|
+
contextElement: node,
|
|
75
|
+
}
|
|
76
|
+
: (node ?? null);
|
|
77
|
+
// Store the positionReference in state if the DOM reference is specified externally via the
|
|
78
|
+
// `elements.reference` option. This ensures that it won't be overridden on future renders.
|
|
79
|
+
_setPositionReference(computedPositionReference);
|
|
80
|
+
position.refs.setReference(computedPositionReference);
|
|
81
|
+
};
|
|
82
|
+
const setReference = (node) => {
|
|
83
|
+
if (isElement(node) || !node) {
|
|
84
|
+
;
|
|
85
|
+
domReferenceRef.current = node ?? null;
|
|
86
|
+
setDomReference((node ?? null));
|
|
87
|
+
}
|
|
88
|
+
// Backwards-compatibility for passing a virtual element to `reference`
|
|
89
|
+
// after it has set the DOM reference.
|
|
90
|
+
if (isElement(position.refs.reference.current) ||
|
|
91
|
+
position.refs.reference.current === null ||
|
|
92
|
+
// Don't allow setting virtual elements using the old technique back to
|
|
93
|
+
// `null` to support `positionReference` + an unstable `reference`
|
|
94
|
+
// callback ref.
|
|
95
|
+
(node && !isElement(node))) {
|
|
96
|
+
position.refs.setReference(node ?? null);
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
const refs = $derived({
|
|
100
|
+
...position.refs,
|
|
101
|
+
setReference,
|
|
102
|
+
setPositionReference,
|
|
103
|
+
domReference: domReferenceRef,
|
|
104
|
+
});
|
|
105
|
+
const elements = $derived({
|
|
106
|
+
...position.elements,
|
|
107
|
+
domReference: domReference,
|
|
108
|
+
});
|
|
109
|
+
const context = $derived({
|
|
110
|
+
...position,
|
|
111
|
+
...rootContext,
|
|
112
|
+
refs,
|
|
113
|
+
elements,
|
|
114
|
+
nodeId,
|
|
115
|
+
});
|
|
116
|
+
$effect(() => {
|
|
117
|
+
rootContext.dataRef.current.floatingContext = context;
|
|
118
|
+
const node = tree?.nodesRef.current.find((node) => node.id === nodeId);
|
|
119
|
+
if (node) {
|
|
120
|
+
node.context = context;
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
return {
|
|
124
|
+
get placement() {
|
|
125
|
+
return position.placement;
|
|
126
|
+
},
|
|
127
|
+
get strategy() {
|
|
128
|
+
return position.strategy;
|
|
129
|
+
},
|
|
130
|
+
get middlewareData() {
|
|
131
|
+
return position.middlewareData;
|
|
132
|
+
},
|
|
133
|
+
get x() {
|
|
134
|
+
return position.x;
|
|
135
|
+
},
|
|
136
|
+
get y() {
|
|
137
|
+
return position.y;
|
|
138
|
+
},
|
|
139
|
+
get isPositioned() {
|
|
140
|
+
return position.isPositioned;
|
|
141
|
+
},
|
|
142
|
+
get update() {
|
|
143
|
+
return position.update;
|
|
144
|
+
},
|
|
145
|
+
get floatingStyles() {
|
|
146
|
+
return position.floatingStyles;
|
|
147
|
+
},
|
|
148
|
+
get context() {
|
|
149
|
+
return context;
|
|
150
|
+
},
|
|
151
|
+
get refs() {
|
|
152
|
+
return refs;
|
|
153
|
+
},
|
|
154
|
+
get elements() {
|
|
155
|
+
return elements;
|
|
156
|
+
},
|
|
157
|
+
};
|
|
158
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { FloatingRootContext } from "../types.js";
|
|
2
|
+
import type { OpenChangeReason } from "../types.js";
|
|
3
|
+
export interface UseFloatingRootContextOptions {
|
|
4
|
+
open?: boolean;
|
|
5
|
+
onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
|
|
6
|
+
elements: {
|
|
7
|
+
reference: Element | null;
|
|
8
|
+
floating: HTMLElement | null;
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
export declare function useFloatingRootContext(options: UseFloatingRootContextOptions): FloatingRootContext;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { isElement } from "@floating-ui/utils/dom";
|
|
2
|
+
//import { useEffectEvent } from "./utils/useEffectEvent"
|
|
3
|
+
import { createPubSub } from "../utils/createPubSub.js";
|
|
4
|
+
import { useId } from "./useId.svelte.js";
|
|
5
|
+
import { useFloatingParentNodeId } from "../components/FloatingTree.svelte";
|
|
6
|
+
import { error } from "../utils/log.js";
|
|
7
|
+
import { DEV } from "esm-env";
|
|
8
|
+
export function useFloatingRootContext(options) {
|
|
9
|
+
const { open = false, onOpenChange: onOpenChangeProp, elements: elementsProp } = options;
|
|
10
|
+
const floatingId = useId();
|
|
11
|
+
const dataRef = $state({ current: {} });
|
|
12
|
+
const events = createPubSub();
|
|
13
|
+
const nested = useFloatingParentNodeId() != null;
|
|
14
|
+
if (DEV) {
|
|
15
|
+
const optionDomReference = elementsProp.reference;
|
|
16
|
+
if (optionDomReference && !isElement(optionDomReference)) {
|
|
17
|
+
error("Cannot pass a virtual element to the `elements.reference` option,", "as it must be a real DOM element. Use `refs.setPositionReference()`", "instead.");
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
let positionReference = $state(elementsProp.reference);
|
|
21
|
+
const onOpenChange = (open, event, reason) => {
|
|
22
|
+
dataRef.current.openEvent = open ? event : undefined;
|
|
23
|
+
events.emit("openchange", { open, event, reason, nested });
|
|
24
|
+
onOpenChangeProp?.(open, event, reason);
|
|
25
|
+
};
|
|
26
|
+
const refs = {
|
|
27
|
+
setPositionReference: (value) => {
|
|
28
|
+
positionReference = value ?? null;
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
const elements = $derived({
|
|
32
|
+
reference: positionReference || elementsProp.reference || null,
|
|
33
|
+
floating: elementsProp.floating || null,
|
|
34
|
+
domReference: elementsProp.reference,
|
|
35
|
+
});
|
|
36
|
+
return {
|
|
37
|
+
get dataRef() {
|
|
38
|
+
return dataRef;
|
|
39
|
+
},
|
|
40
|
+
get open() {
|
|
41
|
+
return open;
|
|
42
|
+
},
|
|
43
|
+
onOpenChange,
|
|
44
|
+
get elements() {
|
|
45
|
+
return elements;
|
|
46
|
+
},
|
|
47
|
+
events,
|
|
48
|
+
get floatingId() {
|
|
49
|
+
return floatingId;
|
|
50
|
+
},
|
|
51
|
+
refs,
|
|
52
|
+
};
|
|
53
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
declare function useFloatingId(): string;
|
|
2
|
+
/**
|
|
3
|
+
* Uses React 18's built-in `useId()` when available, or falls back to a
|
|
4
|
+
* slightly less performant (requiring a double render) implementation for
|
|
5
|
+
* earlier React versions.
|
|
6
|
+
* @see https://floating-ui.com/docs/react-utils#useid
|
|
7
|
+
*/
|
|
8
|
+
export declare const useId: typeof useFloatingId;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
let serverHandoffComplete = false;
|
|
2
|
+
let count = 0;
|
|
3
|
+
const genId = () =>
|
|
4
|
+
// Ensure the id is unique with multiple independent versions of Floating UI
|
|
5
|
+
// on <React 18
|
|
6
|
+
`floating-ui-${Math.random().toString(36).slice(2, 6)}${count++}`;
|
|
7
|
+
function useFloatingId() {
|
|
8
|
+
/*let id = $state(serverHandoffComplete ? genId() : undefined)
|
|
9
|
+
|
|
10
|
+
$effect(() => {
|
|
11
|
+
if (id == null) {
|
|
12
|
+
id = genId()
|
|
13
|
+
}
|
|
14
|
+
})
|
|
15
|
+
|
|
16
|
+
$effect(() => {
|
|
17
|
+
serverHandoffComplete = true
|
|
18
|
+
})*/
|
|
19
|
+
return genId();
|
|
20
|
+
}
|
|
21
|
+
//const useReactId = SafeReact.useId as () => string
|
|
22
|
+
/**
|
|
23
|
+
* Uses React 18's built-in `useId()` when available, or falls back to a
|
|
24
|
+
* slightly less performant (requiring a double render) implementation for
|
|
25
|
+
* earlier React versions.
|
|
26
|
+
* @see https://floating-ui.com/docs/react-utils#useid
|
|
27
|
+
*/
|
|
28
|
+
export const useId = /*useReactId ||*/ useFloatingId;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
2
|
+
import type { ElementProps } from "../types.js";
|
|
3
|
+
declare const ACTIVE_KEY = "active";
|
|
4
|
+
declare const SELECTED_KEY = "selected";
|
|
5
|
+
export type ExtendedUserProps = {
|
|
6
|
+
[ACTIVE_KEY]?: boolean;
|
|
7
|
+
[SELECTED_KEY]?: boolean;
|
|
8
|
+
};
|
|
9
|
+
export interface UseInteractionsReturn {
|
|
10
|
+
getReferenceProps: (userProps?: HTMLAttributes<Element>) => Record<string, unknown>;
|
|
11
|
+
getFloatingProps: (userProps?: HTMLAttributes<HTMLElement>) => Record<string, unknown>;
|
|
12
|
+
getItemProps: (userProps?: Omit<HTMLAttributes<HTMLElement>, "selected" | "active"> & ExtendedUserProps) => Record<string, unknown>;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Merges an array of interaction hooks' props into prop getters, allowing
|
|
16
|
+
* event handler functions to be composed together without overwriting one
|
|
17
|
+
* another.
|
|
18
|
+
* @see https://floating-ui.com/docs/useInteractions
|
|
19
|
+
*/
|
|
20
|
+
export declare function useInteractions(options?: {
|
|
21
|
+
propsList: Array<ElementProps | void>;
|
|
22
|
+
}): UseInteractionsReturn;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { FOCUSABLE_ATTRIBUTE } from "../utils/getFloatingFocusElement.js";
|
|
2
|
+
const ACTIVE_KEY = "active";
|
|
3
|
+
const SELECTED_KEY = "selected";
|
|
4
|
+
function mergeProps(userProps, propsList, elementKey) {
|
|
5
|
+
const map = new Map();
|
|
6
|
+
const isItem = elementKey === "item";
|
|
7
|
+
let domUserProps = userProps;
|
|
8
|
+
if (isItem && userProps) {
|
|
9
|
+
const { [ACTIVE_KEY]: _, [SELECTED_KEY]: __, ...validProps } = userProps;
|
|
10
|
+
domUserProps = validProps;
|
|
11
|
+
}
|
|
12
|
+
return {
|
|
13
|
+
...(elementKey === "floating" && {
|
|
14
|
+
tabIndex: -1,
|
|
15
|
+
[FOCUSABLE_ATTRIBUTE]: "",
|
|
16
|
+
}),
|
|
17
|
+
...domUserProps,
|
|
18
|
+
...propsList
|
|
19
|
+
.map((value) => {
|
|
20
|
+
const propsOrGetProps = value ? value[elementKey] : null;
|
|
21
|
+
if (typeof propsOrGetProps === "function") {
|
|
22
|
+
return userProps ? propsOrGetProps(userProps) : null;
|
|
23
|
+
}
|
|
24
|
+
return propsOrGetProps;
|
|
25
|
+
})
|
|
26
|
+
.concat(userProps)
|
|
27
|
+
.reduce((acc, props) => {
|
|
28
|
+
if (!props) {
|
|
29
|
+
return acc;
|
|
30
|
+
}
|
|
31
|
+
Object.entries(props).forEach(([key, value]) => {
|
|
32
|
+
if (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
if (key.indexOf("on") === 0) {
|
|
36
|
+
if (!map.has(key)) {
|
|
37
|
+
map.set(key, []);
|
|
38
|
+
}
|
|
39
|
+
if (typeof value === "function") {
|
|
40
|
+
map.get(key)?.push(value);
|
|
41
|
+
acc[key] = (...args) => {
|
|
42
|
+
return map
|
|
43
|
+
.get(key)
|
|
44
|
+
?.map((fn) => fn(...args))
|
|
45
|
+
.find((val) => val !== undefined);
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
acc[key] = value;
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
return acc;
|
|
54
|
+
}, {}),
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Merges an array of interaction hooks' props into prop getters, allowing
|
|
59
|
+
* event handler functions to be composed together without overwriting one
|
|
60
|
+
* another.
|
|
61
|
+
* @see https://floating-ui.com/docs/useInteractions
|
|
62
|
+
*/
|
|
63
|
+
export function useInteractions(options = { propsList: [] }) {
|
|
64
|
+
const { propsList } = $derived(options);
|
|
65
|
+
//const referenceDeps = $derived(propsList.map((key) => key?.reference))
|
|
66
|
+
//const floatingDeps = $derived(propsList.map((key) => key?.floating))
|
|
67
|
+
//const itemDeps = $derived(propsList.map((key) => key?.item))
|
|
68
|
+
const getReferenceProps = (userProps) => mergeProps(userProps, propsList, "reference");
|
|
69
|
+
const getFloatingProps = (userProps) => mergeProps(userProps, propsList, "floating");
|
|
70
|
+
const getItemProps = (userProps) => mergeProps(userProps, propsList, "item");
|
|
71
|
+
return { getReferenceProps, getFloatingProps, getItemProps };
|
|
72
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export * from "./types.js";
|
|
2
|
+
export { useFloating } from "./hooks/useFloating.svelte.js";
|
|
3
|
+
export { useInteractions } from "./hooks/useInteractions.svelte.js";
|
|
4
|
+
export { arrow, autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size, } from "../svelte-dom/index.js";
|
|
5
|
+
export { inner, useInnerOffset, type InnerProps, type UseInnerOffsetProps } from "./inner.svelte.js";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export * from "./types.js";
|
|
2
|
+
export { useFloating } from "./hooks/useFloating.svelte.js";
|
|
3
|
+
export { useInteractions } from "./hooks/useInteractions.svelte.js";
|
|
4
|
+
export { arrow, autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size, } from "../svelte-dom/index.js";
|
|
5
|
+
export { inner, useInnerOffset } from "./inner.svelte.js";
|