bits-ui 1.0.0-next.8 → 1.0.0-next.81

package/dist/bits/popover/components/popover-content.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { PopoverContentProps } from "../types.js";
 	import { usePopoverContent } from "../popover.svelte.js";
-	import { PopperLayer } from "../../utilities/popper-layer/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		child,
@@ -20,7 +20,7 @@
 		trapFocus = true,
 		preventScroll = false,
 		...restProps
-	}: ContentProps = $props();
+	}: PopoverContentProps = $props();
 
 	const contentState = usePopoverContent({
 		id: box.with(() => id),
@@ -28,46 +28,68 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
+		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<PopperLayer
-	{...mergedProps}
-	present={contentState.root.open.current || forceMount}
-	{id}
-	onInteractOutside={(e) => {
-		onInteractOutside(e);
-		if (e.defaultPrevented) return;
-		contentState.root.close();
-	}}
-	onEscapeKeydown={(e) => {
-		onEscapeKeydown(e);
-		if (e.defaultPrevented) return;
-		contentState.root.close();
-	}}
-	onCloseAutoFocus={(e) => {
-		onCloseAutoFocus(e);
-		if (e.defaultPrevented) return;
-		e.preventDefault();
-		contentState.root.triggerNode?.focus();
-	}}
-	{trapFocus}
-	{preventScroll}
-	loop
-	{forceMount}
->
-	{#snippet popper({ props })}
-		{@const finalProps = mergeProps(props, {
-			style: getFloatingContentCSSVars("popover"),
-		})}
-		{#if child}
-			{@render child({ props: finalProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.(contentState.snippetProps)}
-			</div>
-		{/if}
-	{/snippet}
-</PopperLayer>
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		enabled={contentState.root.open.current}
+		{id}
+		onInteractOutside={contentState.handleInteractOutside}
+		onEscapeKeydown={contentState.handleEscapeKeydown}
+		onCloseAutoFocus={contentState.handleCloseAutoFocus}
+		{trapFocus}
+		{preventScroll}
+		loop
+		forceMount={true}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("popover"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		present={contentState.root.open.current}
+		{id}
+		onInteractOutside={contentState.handleInteractOutside}
+		onEscapeKeydown={contentState.handleEscapeKeydown}
+		onCloseAutoFocus={contentState.handleCloseAutoFocus}
+		{trapFocus}
+		{preventScroll}
+		loop
+		forceMount={false}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("popover"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/popover/components/popover-content.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { ContentProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PopoverContent: $$__sveltets_2_IsomorphicComponent<ContentProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type PopoverContent = InstanceType<typeof PopoverContent>;
+import type { PopoverContentProps } from "../types.js";
+declare const PopoverContent: import("svelte").Component<PopoverContentProps, {}, "ref">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
 export default PopoverContent;

package/dist/bits/popover/components/popover-trigger.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { TriggerProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { PopoverTriggerProps } from "../types.js";
 	import { usePopoverTrigger } from "../popover.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
-	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
+	import { useId } from "../../../internal/use-id.js";
+	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 
 	let {
 		children,
@@ -12,8 +11,9 @@
 		id = useId(),
 		ref = $bindable(null),
 		type = "button",
+		disabled = false,
 		...restProps
-	}: TriggerProps = $props();
+	}: PopoverTriggerProps = $props();
 
 	const triggerState = usePopoverTrigger({
 		id: box.with(() => id),
@@ -21,12 +21,13 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		disabled: box.with(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayer.Anchor {id}>
+<FloatingLayerAnchor {id}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}
@@ -34,4 +35,4 @@
 			{@render children?.()}
 		</button>
 	{/if}
-</FloatingLayer.Anchor>
+</FloatingLayerAnchor>

package/dist/bits/popover/components/popover-trigger.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { TriggerProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PopoverTrigger: $$__sveltets_2_IsomorphicComponent<TriggerProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type PopoverTrigger = InstanceType<typeof PopoverTrigger>;
+import type { PopoverTriggerProps } from "../types.js";
+declare const PopoverTrigger: import("svelte").Component<PopoverTriggerProps, {}, "ref">;
+type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
 export default PopoverTrigger;

package/dist/bits/popover/components/popover.svelte

@@ -1,32 +1,23 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import type { PopoverRootProps } from "../types.js";
 	import { usePopoverRoot } from "../popover.svelte.js";
-	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
 
-	let {
-		open = $bindable(false),
-		onOpenChange = noop,
-		controlledOpen = false,
-		children,
-	}: RootProps = $props();
+	let { open = $bindable(false), onOpenChange = noop, children }: PopoverRootProps = $props();
 
 	usePopoverRoot({
 		open: box.with(
 			() => open,
 			(v) => {
-				if (controlledOpen) {
-					onOpenChange(v);
-				} else {
-					open = v;
-					onOpenChange(v);
-				}
+				open = v;
+				onOpenChange(v);
 			}
 		),
 	});
 </script>
 
-<FloatingLayer.Root>
+<FloatingLayer>
 	{@render children?.()}
-</FloatingLayer.Root>
+</FloatingLayer>

package/dist/bits/popover/components/popover.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Popover: $$__sveltets_2_IsomorphicComponent<import("../types.js").PopoverRootPropsWithoutHTML, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "open">;
-type Popover = InstanceType<typeof Popover>;
+declare const Popover: import("svelte").Component<import("../types.js").PopoverRootPropsWithoutHTML, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/bits/popover/exports.d.ts

@@ -0,0 +1,9 @@
+export { default as Root } from "./components/popover.svelte";
+export { default as Arrow } from "./components/popover-arrow.svelte";
+export { default as Content } from "./components/popover-content.svelte";
+export { default as ContentStatic } from "./components/popover-content-static.svelte";
+export { default as Trigger } from "./components/popover-trigger.svelte";
+export { default as Close } from "./components/popover-close.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, } from "./types.js";
+export type { PortalProps } from "../utilities/portal/types.js";

package/dist/bits/popover/exports.js

@@ -0,0 +1,7 @@
+export { default as Root } from "./components/popover.svelte";
+export { default as Arrow } from "./components/popover-arrow.svelte";
+export { default as Content } from "./components/popover-content.svelte";
+export { default as ContentStatic } from "./components/popover-content-static.svelte";
+export { default as Trigger } from "./components/popover-trigger.svelte";
+export { default as Close } from "./components/popover-close.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";

package/dist/bits/popover/index.d.ts

@@ -1,9 +1 @@
-export { default as Root } from "./components/popover.svelte";
-export { default as Arrow } from "./components/popover-arrow.svelte";
-export { default as Content } from "./components/popover-content.svelte";
-export { default as ContentStatic } from "./components/popover-content-static.svelte";
-export { default as Trigger } from "./components/popover-trigger.svelte";
-export { default as Close } from "./components/popover-close.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, } from "./types.js";
-export type { PortalProps } from "../utilities/portal/types.js";
+export * as Popover from "./exports.js";

package/dist/bits/popover/index.js

@@ -1,7 +1 @@
-export { default as Root } from "./components/popover.svelte";
-export { default as Arrow } from "./components/popover-arrow.svelte";
-export { default as Content } from "./components/popover-content.svelte";
-export { default as ContentStatic } from "./components/popover-content-static.svelte";
-export { default as Trigger } from "./components/popover-trigger.svelte";
-export { default as Close } from "./components/popover-close.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
+export * as Popover from "./exports.js";

package/dist/bits/popover/popover.svelte.d.ts

@@ -1,58 +1,74 @@
+import { type ReadableBoxedValues } from "svelte-toolbelt";
 import type { WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { WithRefProps } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
 type PopoverRootStateProps = WritableBoxedValues<{
     open: boolean;
 }>;
 declare class PopoverRootState {
     open: PopoverRootStateProps["open"];
     contentNode: HTMLElement | null;
-    contentId: string | undefined;
     triggerNode: HTMLElement | null;
     constructor(props: PopoverRootStateProps);
-    toggleOpen: () => void;
-    close: () => void;
-    createTrigger: (props: PopoverTriggerStateProps) => PopoverTriggerState;
-    createContent: (props: PopoverContentStateProps) => PopoverContentState;
-    createClose: (props: PopoverCloseStateProps) => PopoverCloseState;
+    toggleOpen(): void;
+    handleClose(): void;
 }
-type PopoverTriggerStateProps = WithRefProps;
+type PopoverTriggerStateProps = WithRefProps & ReadableBoxedValues<{
+    disabled: boolean;
+}>;
 declare class PopoverTriggerState {
     #private;
     constructor(props: PopoverTriggerStateProps, root: PopoverRootState);
+    onclick(e: BitsMouseEvent): void;
+    onpointerdown(e: BitsPointerEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly id: string;
         readonly "aria-haspopup": "dialog";
-        readonly "aria-expanded": "false" | "true";
+        readonly "aria-expanded": "true" | "false";
         readonly "data-state": "open" | "closed";
         readonly "aria-controls": string | undefined;
         readonly "data-popover-trigger": "";
-        readonly onclick: () => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly disabled: boolean;
+        readonly onpointerdown: (e: BitsPointerEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly onclick: (e: BitsMouseEvent) => void;
     };
 }
-type PopoverContentStateProps = WithRefProps;
+type PopoverContentStateProps = WithRefProps & ReadableBoxedValues<{
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    onCloseAutoFocus: (e: Event) => void;
+}>;
 declare class PopoverContentState {
     #private;
     root: PopoverRootState;
     constructor(props: PopoverContentStateProps, root: PopoverRootState);
+    handleInteractOutside(e: PointerEvent): void;
+    handleEscapeKeydown(e: KeyboardEvent): void;
+    handleCloseAutoFocus(e: Event): void;
     snippetProps: {
         open: boolean;
     };
     props: {
-        id: string;
-        tabindex: number;
-        "data-state": "open" | "closed";
-        "data-popover-content": string;
+        readonly id: string;
+        readonly tabindex: -1;
+        readonly "data-state": "open" | "closed";
+        readonly "data-popover-content": "";
+        readonly style: {
+            readonly pointerEvents: "auto";
+        };
     };
 }
 type PopoverCloseStateProps = WithRefProps;
 declare class PopoverCloseState {
     #private;
     constructor(props: PopoverCloseStateProps, root: PopoverRootState);
+    onclick(_: BitsPointerEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly id: string;
-        readonly onclick: () => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onclick: (_: BitsPointerEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly type: "button";
         readonly "data-popover-close": "";
     };

package/dist/bits/popover/popover.svelte.js

@@ -1,41 +1,34 @@
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { useRefById } from "svelte-toolbelt";
+import { Context } from "runed";
 import { kbd } from "../../internal/kbd.js";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
-import { createContext } from "../../internal/createContext.js";
+import { isElement } from "../../internal/is.js";
 class PopoverRootState {
     open;
     contentNode = $state(null);
-    contentId = $state(undefined);
     triggerNode = $state(null);
     constructor(props) {
         this.open = props.open;
     }
-    toggleOpen = () => {
+    toggleOpen() {
         this.open.current = !this.open.current;
-    };
-    close = () => {
+    }
+    handleClose() {
         if (!this.open.current)
             return;
         this.open.current = false;
-    };
-    createTrigger = (props) => {
-        return new PopoverTriggerState(props, this);
-    };
-    createContent = (props) => {
-        return new PopoverContentState(props, this);
-    };
-    createClose = (props) => {
-        return new PopoverCloseState(props, this);
-    };
+    }
 }
 class PopoverTriggerState {
     #id;
     #ref;
+    #disabled;
     #root;
     constructor(props, root) {
         this.#id = props.id;
         this.#root = root;
         this.#ref = props.ref;
+        this.#disabled = props.disabled;
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -43,22 +36,40 @@ class PopoverTriggerState {
                 this.#root.triggerNode = node;
             },
         });
+        this.onclick = this.onclick.bind(this);
+        this.onpointerdown = this.onpointerdown.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
     }
-    #onclick = () => {
+    onclick(e) {
+        if (this.#disabled.current)
+            return;
+        if (e.button !== 0)
+            return;
         this.#root.toggleOpen();
-    };
-    #onkeydown = (e) => {
+    }
+    onpointerdown(e) {
+        if (this.#disabled.current)
+            return;
+        if (e.button !== 0)
+            return;
+        // We prevent default to prevent focus from moving to the trigger
+        // since this action will open the popover and focus will move to the content
+        e.preventDefault();
+    }
+    onkeydown(e) {
+        if (this.#disabled.current)
+            return;
         if (!(e.key === kbd.ENTER || e.key === kbd.SPACE))
             return;
         e.preventDefault();
         this.#root.toggleOpen();
-    };
-    #getAriaControls = () => {
-        if (this.#root.open.current && this.#root.contentId) {
-            return this.#root.contentId;
+    }
+    #getAriaControls() {
+        if (this.#root.open.current && this.#root.contentNode?.id) {
+            return this.#root.contentNode?.id;
         }
         return undefined;
-    };
+    }
     props = $derived.by(() => ({
         id: this.#id.current,
         "aria-haspopup": "dialog",
@@ -66,28 +77,62 @@ class PopoverTriggerState {
         "data-state": getDataOpenClosed(this.#root.open.current),
         "aria-controls": this.#getAriaControls(),
         "data-popover-trigger": "",
+        disabled: this.#disabled.current,
         //
-        onclick: this.#onclick,
-        onkeydown: this.#onkeydown,
+        onpointerdown: this.onpointerdown,
+        onkeydown: this.onkeydown,
+        onclick: this.onclick,
     }));
 }
 class PopoverContentState {
     #id;
     #ref;
     root;
+    #onInteractOutside;
+    #onEscapeKeydown;
+    #onCloseAutoFocus;
     constructor(props, root) {
         this.#id = props.id;
         this.root = root;
         this.#ref = props.ref;
+        this.#onEscapeKeydown = props.onEscapeKeydown;
+        this.#onInteractOutside = props.onInteractOutside;
+        this.#onCloseAutoFocus = props.onCloseAutoFocus;
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.root.open.current,
+            deps: () => this.root.open.current,
             onRefChange: (node) => {
                 this.root.contentNode = node;
-                this.root.contentId = node?.id;
             },
         });
+        this.handleInteractOutside = this.handleInteractOutside.bind(this);
+        this.handleEscapeKeydown = this.handleEscapeKeydown.bind(this);
+        this.handleCloseAutoFocus = this.handleCloseAutoFocus.bind(this);
+    }
+    handleInteractOutside(e) {
+        this.#onInteractOutside.current(e);
+        if (e.defaultPrevented)
+            return;
+        if (!isElement(e.target))
+            return;
+        const closestTrigger = e.target.closest(`[data-popover-trigger]`);
+        if (closestTrigger === this.root.triggerNode)
+            return;
+        this.root.handleClose();
+    }
+    handleEscapeKeydown(e) {
+        this.#onEscapeKeydown.current(e);
+        if (e.defaultPrevented)
+            return;
+        this.root.handleClose();
+    }
+    handleCloseAutoFocus(e) {
+        this.#onCloseAutoFocus.current(e);
+        if (e.defaultPrevented)
+            return;
+        e.preventDefault();
+        this.root.triggerNode?.focus();
     }
     snippetProps = $derived.by(() => ({ open: this.root.open.current }));
     props = $derived.by(() => ({
@@ -95,6 +140,9 @@ class PopoverContentState {
         tabindex: -1,
         "data-state": getDataOpenClosed(this.root.open.current),
         "data-popover-content": "",
+        style: {
+            pointerEvents: "auto",
+        },
     }));
 }
 class PopoverCloseState {
@@ -108,22 +156,24 @@ class PopoverCloseState {
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.#root.open.current,
+            deps: () => this.#root.open.current,
         });
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
     }
-    #onclick = () => {
-        this.#root.close();
-    };
-    #onkeydown = (e) => {
+    onclick(_) {
+        this.#root.handleClose();
+    }
+    onkeydown(e) {
         if (!(e.key === kbd.ENTER || e.key === kbd.SPACE))
             return;
         e.preventDefault();
-        this.#root.close();
-    };
+        this.#root.handleClose();
+    }
     props = $derived.by(() => ({
         id: this.#id.current,
-        onclick: this.#onclick,
-        onkeydown: this.#onkeydown,
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
         type: "button",
         "data-popover-close": "",
     }));
@@ -131,16 +181,16 @@ class PopoverCloseState {
 //
 // CONTEXT METHODS
 //
-const [setPopoverRootContext, getPopoverRootContext] = createContext("Popover.Root");
+const PopoverRootContext = new Context("Popover.Root");
 export function usePopoverRoot(props) {
-    return setPopoverRootContext(new PopoverRootState(props));
+    return PopoverRootContext.set(new PopoverRootState(props));
 }
 export function usePopoverTrigger(props) {
-    return getPopoverRootContext().createTrigger(props);
+    return new PopoverTriggerState(props, PopoverRootContext.get());
 }
 export function usePopoverContent(props) {
-    return getPopoverRootContext().createContent(props);
+    return new PopoverContentState(props, PopoverRootContext.get());
 }
 export function usePopoverClose(props) {
-    return getPopoverRootContext().createClose(props);
+    return new PopoverCloseState(props, PopoverRootContext.get());
 }