bits-ui 1.1.0 → 1.2.1

package/dist/bits/menubar/menubar.svelte.js

@@ -202,10 +202,6 @@ class MenubarContentState {
         this.menu = menu;
         this.root = menu.root;
         this.focusScopeContext = FocusScopeContext.get();
-        this.onCloseAutoFocus = this.onCloseAutoFocus.bind(this);
-        this.onFocusOutside = this.onFocusOutside.bind(this);
-        this.onInteractOutside = this.onInteractOutside.bind(this);
-        this.onOpenAutoFocus = this.onOpenAutoFocus.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
         useRefById({
             ...opts,
@@ -215,7 +211,7 @@ class MenubarContentState {
             deps: () => this.menu.open,
         });
     }
-    onCloseAutoFocus(e) {
+    onCloseAutoFocus = (e) => {
         this.opts.onCloseAutoFocus.current(e);
         if (e.defaultPrevented)
             return;
@@ -226,8 +222,8 @@ class MenubarContentState {
         }
         this.hasInteractedOutside = false;
         e.preventDefault();
-    }
-    onFocusOutside(e) {
+    };
+    onFocusOutside = (e) => {
         const target = e.target;
         const isMenubarTrigger = this.root
             .getTriggers()
@@ -235,17 +231,17 @@ class MenubarContentState {
         if (isMenubarTrigger)
             e.preventDefault();
         this.opts.onFocusOutside.current(e);
-    }
-    onInteractOutside(e) {
+    };
+    onInteractOutside = (e) => {
         this.hasInteractedOutside = true;
         this.opts.onInteractOutside.current(e);
-    }
-    onOpenAutoFocus(e) {
+    };
+    onOpenAutoFocus = (e) => {
         this.opts.onOpenAutoFocus.current(e);
         if (e.defaultPrevented)
             return;
         afterTick(() => this.opts.ref.current?.focus());
-    }
+    };
     onkeydown(e) {
         if (e.key !== kbd.ARROW_LEFT && e.key !== kbd.ARROW_RIGHT)
             return;
@@ -290,6 +286,12 @@ class MenubarContentState {
         onkeydown: this.onkeydown,
         "data-menu-content": "",
     }));
+    popperProps = {
+        onCloseAutoFocus: this.onCloseAutoFocus,
+        onFocusOutside: this.onFocusOutside,
+        onInteractOutside: this.onInteractOutside,
+        onOpenAutoFocus: this.onOpenAutoFocus,
+    };
 }
 const MenubarRootContext = new Context("Menubar.Root");
 const MenubarMenuContext = new Context("Menubar.Menu");

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

@@ -19,7 +19,6 @@
 		onInteractOutside = noop,
 		trapFocus = true,
 		preventScroll = false,
-
 		...restProps
 	}: PopoverContentStaticProps = $props();
 
@@ -40,12 +39,10 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={contentState.handleInteractOutside}
-		onEscapeKeydown={contentState.handleEscapeKeydown}
-		onCloseAutoFocus={contentState.handleCloseAutoFocus}
 		{trapFocus}
 		{preventScroll}
 		loop
@@ -67,12 +64,10 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={contentState.handleInteractOutside}
-		onEscapeKeydown={contentState.handleEscapeKeydown}
-		onCloseAutoFocus={contentState.handleCloseAutoFocus}
 		{trapFocus}
 		{preventScroll}
 		loop

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

@@ -39,11 +39,9 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={contentState.handleInteractOutside}
-		onEscapeKeydown={contentState.handleEscapeKeydown}
-		onCloseAutoFocus={contentState.handleCloseAutoFocus}
 		{trapFocus}
 		{preventScroll}
 		loop
@@ -67,11 +65,9 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={contentState.handleInteractOutside}
-		onEscapeKeydown={contentState.handleEscapeKeydown}
-		onCloseAutoFocus={contentState.handleCloseAutoFocus}
 		{trapFocus}
 		{preventScroll}
 		loop

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

@@ -45,9 +45,9 @@ declare class PopoverContentState {
     readonly opts: PopoverContentStateProps;
     readonly root: PopoverRootState;
     constructor(opts: PopoverContentStateProps, root: PopoverRootState);
-    handleInteractOutside(e: PointerEvent): void;
-    handleEscapeKeydown(e: KeyboardEvent): void;
-    handleCloseAutoFocus(e: Event): void;
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    onCloseAutoFocus: (e: Event) => void;
     snippetProps: {
         open: boolean;
     };
@@ -60,6 +60,11 @@ declare class PopoverContentState {
             readonly pointerEvents: "auto";
         };
     };
+    popperProps: {
+        onInteractOutside: (e: PointerEvent) => void;
+        onEscapeKeydown: (e: KeyboardEvent) => void;
+        onCloseAutoFocus: (e: Event) => void;
+    };
 }
 type PopoverCloseStateProps = WithRefProps;
 declare class PopoverCloseState {

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

@@ -92,11 +92,8 @@ class PopoverContentState {
                 this.root.contentNode = node;
             },
         });
-        this.handleInteractOutside = this.handleInteractOutside.bind(this);
-        this.handleEscapeKeydown = this.handleEscapeKeydown.bind(this);
-        this.handleCloseAutoFocus = this.handleCloseAutoFocus.bind(this);
     }
-    handleInteractOutside(e) {
+    onInteractOutside = (e) => {
         this.opts.onInteractOutside.current(e);
         if (e.defaultPrevented)
             return;
@@ -106,20 +103,20 @@ class PopoverContentState {
         if (closestTrigger === this.root.triggerNode)
             return;
         this.root.handleClose();
-    }
-    handleEscapeKeydown(e) {
+    };
+    onEscapeKeydown = (e) => {
         this.opts.onEscapeKeydown.current(e);
         if (e.defaultPrevented)
             return;
         this.root.handleClose();
-    }
-    handleCloseAutoFocus(e) {
+    };
+    onCloseAutoFocus = (e) => {
         this.opts.onCloseAutoFocus.current(e);
         if (e.defaultPrevented)
             return;
         e.preventDefault();
         this.root.triggerNode?.focus();
-    }
+    };
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -130,6 +127,11 @@ class PopoverContentState {
             pointerEvents: "auto",
         },
     }));
+    popperProps = {
+        onInteractOutside: this.onInteractOutside,
+        onEscapeKeydown: this.onEscapeKeydown,
+        onCloseAutoFocus: this.onCloseAutoFocus,
+    };
 }
 class PopoverCloseState {
     opts;

package/dist/bits/progress/components/progress.svelte

@@ -9,6 +9,7 @@
 		children,
 		value = 0,
 		max = 100,
+		min = 0,
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
@@ -17,6 +18,7 @@
 	const rootState = useProgressRootState({
 		value: box.with(() => value),
 		max: box.with(() => max),
+		min: box.with(() => min),
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -3,20 +3,22 @@ import type { WithRefProps } from "../../internal/types.js";
 type ProgressRootStateProps = WithRefProps<ReadableBoxedValues<{
     value: number | null;
     max: number;
+    min: number;
 }>>;
 declare class ProgressRootState {
     readonly opts: ProgressRootStateProps;
     constructor(opts: ProgressRootStateProps);
     props: {
-        readonly role: "meter";
+        readonly role: "progressbar";
         readonly value: number | null;
-        readonly max: number;
-        readonly "aria-valuemin": 0;
+        readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
-        readonly "aria-valuenow": number | null;
-        readonly "data-value": number | null;
+        readonly "aria-valuenow": number | undefined;
+        readonly "data-value": number | undefined;
         readonly "data-state": "indeterminate" | "loading" | "loaded";
         readonly "data-max": number;
+        readonly "data-min": number;
+        readonly "data-indeterminate": "" | undefined;
         readonly "data-progress-root": "";
     };
 }

package/dist/bits/progress/progress.svelte.js

@@ -7,15 +7,16 @@ class ProgressRootState {
         useRefById(opts);
     }
     props = $derived.by(() => ({
-        role: "meter",
+        role: "progressbar",
         value: this.opts.value.current,
-        max: this.opts.max.current,
-        "aria-valuemin": 0,
+        "aria-valuemin": this.opts.min.current,
         "aria-valuemax": this.opts.max.current,
-        "aria-valuenow": this.opts.value.current,
-        "data-value": this.opts.value.current,
+        "aria-valuenow": this.opts.value.current === null ? undefined : this.opts.value.current,
+        "data-value": this.opts.value.current === null ? undefined : this.opts.value.current,
         "data-state": getProgressDataState(this.opts.value.current, this.opts.max.current),
         "data-max": this.opts.max.current,
+        "data-min": this.opts.min.current,
+        "data-indeterminate": this.opts.value.current === null ? "" : undefined,
         [ROOT_ATTR]: "",
     }));
 }

package/dist/bits/progress/types.d.ts

@@ -4,12 +4,21 @@ export type ProgressRootPropsWithoutHTML = WithChild<{
     /**
      * The current value of the progress bar.
      * If `null`, the progress bar will be in an indeterminate state.
+     *
+     * @default 0
      */
     value?: number | null;
     /**
-     * The maximum value of the progress bar. Used to calculate the percentage
-     * of the progress bar along with the `value` prop.
+     * The maximum value of the progress bar.
+     *
+     * @default 100
      */
     max?: number;
+    /**
+     * The minimum value of the progress bar.
+     *
+     * @default 0
+     */
+    min?: number;
 }>;
 export type ProgressRootProps = ProgressRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ProgressRootPropsWithoutHTML>;

package/dist/bits/select/components/select-content-static.svelte

@@ -15,6 +15,7 @@
 		onEscapeKeydown = noop,
 		children,
 		child,
+		preventScroll = false,
 		...restProps
 	}: SelectContentStaticProps = $props();
 
@@ -24,39 +25,21 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-
-	function handleInteractOutside(e: PointerEvent) {
-		contentState.handleInteractOutside(e);
-		if (e.defaultPrevented) return;
-		onInteractOutside(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleEscapeKeydown(e: KeyboardEvent) {
-		onEscapeKeydown(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
 </script>
 
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
-		trapFocus={false}
-		loop={false}
-		preventScroll={false}
-		onPlaced={() => (contentState.isPositioned = true)}
+		{preventScroll}
 		forceMount={true}
 	>
 		{#snippet popper({ props })}
@@ -73,17 +56,11 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
-		trapFocus={false}
-		loop={false}
-		preventScroll={false}
-		onPlaced={() => (contentState.isPositioned = true)}
+		{preventScroll}
 		forceMount={false}
 	>
 		{#snippet popper({ props })}

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

@@ -26,37 +26,20 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-
-	function handleInteractOutside(e: PointerEvent) {
-		contentState.handleInteractOutside(e);
-		if (e.defaultPrevented) return;
-		onInteractOutside(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleEscapeKeydown(e: KeyboardEvent) {
-		onEscapeKeydown(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
 </script>
 
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		{side}
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
-		trapFocus={false}
-		loop={false}
 		{preventScroll}
 		onPlaced={() => (contentState.isPositioned = true)}
 		forceMount={true}
@@ -77,17 +60,11 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		{side}
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
-		trapFocus={false}
-		loop={false}
 		{preventScroll}
-		onPlaced={() => (contentState.isPositioned = true)}
 		forceMount={false}
 	>
 		{#snippet popper({ props, wrapperProps })}

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

@@ -151,7 +151,10 @@ declare class SelectTriggerState {
         readonly onpointerup: (e: BitsPointerEvent) => void;
     };
 }
-type SelectContentStateProps = WithRefProps;
+type SelectContentStateProps = WithRefProps & ReadableBoxedValues<{
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+}>;
 declare class SelectContentState {
     #private;
     readonly opts: SelectContentStateProps;
@@ -160,7 +163,10 @@ declare class SelectContentState {
     isPositioned: boolean;
     constructor(opts: SelectContentStateProps, root: SelectRootState);
     onpointermove(_: BitsPointerEvent): void;
-    handleInteractOutside(e: PointerEvent): void;
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    onOpenAutoFocus: (e: Event) => void;
+    onCloseAutoFocus: (e: Event) => void;
     snippetProps: {
         open: boolean;
     };
@@ -184,6 +190,15 @@ declare class SelectContentState {
         };
         readonly onpointermove: (_: BitsPointerEvent) => void;
     };
+    popperProps: {
+        onInteractOutside: (e: PointerEvent) => void;
+        onEscapeKeydown: (e: KeyboardEvent) => void;
+        onOpenAutoFocus: (e: Event) => void;
+        onCloseAutoFocus: (e: Event) => void;
+        trapFocus: boolean;
+        loop: boolean;
+        onPlaced: () => void;
+    };
 }
 type SelectItemStateProps = WithRefProps<ReadableBoxedValues<{
     value: string;

package/dist/bits/select/select.svelte.js

@@ -618,7 +618,6 @@ class SelectContentState {
             this.isPositioned = false;
         });
         this.onpointermove = this.onpointermove.bind(this);
-        this.handleInteractOutside = this.handleInteractOutside.bind(this);
     }
     onpointermove(_) {
         this.root.isUsingKeyboard = false;
@@ -633,11 +632,28 @@ class SelectContentState {
             [`${prefix}-anchor-height`]: "var(--bits-floating-anchor-height)",
         };
     });
-    handleInteractOutside(e) {
+    onInteractOutside = (e) => {
         if (e.target === this.root.triggerNode || e.target === this.root.inputNode) {
             e.preventDefault();
+            return;
         }
-    }
+        this.opts.onInteractOutside.current(e);
+        if (e.defaultPrevented)
+            return;
+        this.root.handleClose();
+    };
+    onEscapeKeydown = (e) => {
+        this.opts.onEscapeKeydown.current(e);
+        if (e.defaultPrevented)
+            return;
+        this.root.handleClose();
+    };
+    onOpenAutoFocus = (e) => {
+        e.preventDefault();
+    };
+    onCloseAutoFocus = (e) => {
+        e.preventDefault();
+    };
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -654,6 +670,17 @@ class SelectContentState {
         },
         onpointermove: this.onpointermove,
     }));
+    popperProps = {
+        onInteractOutside: this.onInteractOutside,
+        onEscapeKeydown: this.onEscapeKeydown,
+        onOpenAutoFocus: this.onOpenAutoFocus,
+        onCloseAutoFocus: this.onCloseAutoFocus,
+        trapFocus: false,
+        loop: false,
+        onPlaced: () => {
+            this.isPositioned = true;
+        },
+    };
 }
 class SelectItemState {
     opts;

package/dist/bits/select/types.d.ts

@@ -123,9 +123,9 @@ export type _SharedSelectContentProps = {
      */
     loop?: boolean;
 };
-export type SelectContentPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "onOpenAutoFocus" | "trapFocus"> & _SharedSelectContentProps, FloatingContentSnippetProps>>;
+export type SelectContentPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "onOpenAutoFocus" | "trapFocus" | "onCloseAutoFocus"> & _SharedSelectContentProps, FloatingContentSnippetProps>>;
 export type SelectContentProps = SelectContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectContentPropsWithoutHTML>;
-export type SelectContentStaticPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "onOpenAutoFocus" | "trapFocus"> & _SharedSelectContentProps, StaticContentSnippetProps>>;
+export type SelectContentStaticPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "onOpenAutoFocus" | "onCloseAutoFocus" | "trapFocus"> & _SharedSelectContentProps, StaticContentSnippetProps>>;
 export type SelectContentStaticProps = SelectContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectContentStaticPropsWithoutHTML>;
 export type SelectTriggerPropsWithoutHTML = WithChild;
 export type SelectTriggerProps = SelectTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, SelectTriggerPropsWithoutHTML>;

package/dist/bits/tooltip/components/tooltip-content-static.svelte

@@ -6,15 +6,15 @@
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		children,
 		child,
 		id = useId(),
 		ref = $bindable(null),
-
-		onInteractOutside,
-		onEscapeKeydown,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
 	}: TooltipContentStaticProps = $props();
@@ -25,33 +25,20 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-
-	function handleInteractOutside(e: PointerEvent) {
-		onInteractOutside?.(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleEscapeKeydown(e: KeyboardEvent) {
-		onEscapeKeydown?.(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
 </script>
 
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}
@@ -73,13 +60,10 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}

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

@@ -6,6 +6,7 @@
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		children,
@@ -20,8 +21,8 @@
 		sticky = "partial",
 		hideWhenDetached = false,
 		collisionPadding = 0,
-		onInteractOutside,
-		onEscapeKeydown,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
 	}: TooltipContentProps = $props();
@@ -32,6 +33,8 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
 	});
 
 	const floatingProps = $derived({
@@ -46,29 +49,14 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));
-
-	function handleInteractOutside(e: PointerEvent) {
-		onInteractOutside?.(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleEscapeKeydown(e: KeyboardEvent) {
-		onEscapeKeydown?.(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
 </script>
 
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}
@@ -92,12 +80,9 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}