bits-ui 2.13.0 → 2.14.0

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { PopoverOverlayState } from "../popover.svelte.js";
+	import type { PopoverOverlayProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		forceMount = false,
+		child,
+		children,
+		ref = $bindable(null),
+		...restProps
+	}: PopoverOverlayProps = $props();
+
+	const overlayState = PopoverOverlayState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, overlayState.props));
+</script>
+
+<PresenceLayer open={overlayState.root.opts.open.current || forceMount} ref={overlayState.opts.ref}>
+	{#snippet presence()}
+		{#if child}
+			{@render child({ props: mergeProps(mergedProps), ...overlayState.snippetProps })}
+		{:else}
+			<div {...mergeProps(mergedProps)}>
+				{@render children?.(overlayState.snippetProps)}
+			</div>
+		{/if}
+	{/snippet}
+</PresenceLayer>

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

@@ -0,0 +1,4 @@
+import type { PopoverOverlayProps } from "../types.js";
+declare const PopoverOverlay: import("svelte").Component<PopoverOverlayProps, {}, "ref">;
+type PopoverOverlay = ReturnType<typeof PopoverOverlay>;
+export default PopoverOverlay;

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

@@ -5,4 +5,5 @@ export { default as ContentStatic } from "./components/popover-content-static.sv
 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, PopoverPortalProps as PortalProps, } from "./types.js";
+export { default as Overlay } from "./components/popover-overlay.svelte";
+export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, PopoverPortalProps as PortalProps, PopoverOverlayProps as OverlayProps, } from "./types.js";

package/dist/bits/popover/exports.js

@@ -5,3 +5,4 @@ export { default as ContentStatic } from "./components/popover-content-static.sv
 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 { default as Overlay } from "./components/popover-overlay.svelte";

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

@@ -87,4 +87,23 @@ export declare class PopoverCloseState {
         readonly type: "button";
     };
 }
+interface PopoverOverlayStateOpts extends WithRefOpts {
+}
+export declare class PopoverOverlayState {
+    static create(opts: PopoverOverlayStateOpts): PopoverOverlayState;
+    readonly opts: PopoverOverlayStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PopoverOverlayStateOpts, root: PopoverRootState);
+    readonly snippetProps: {
+        open: boolean;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly style: {
+            readonly pointerEvents: "auto";
+        };
+        readonly "data-state": "open" | "closed";
+    };
+}
 export {};

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

@@ -6,7 +6,7 @@ import { isElement } from "../../internal/is.js";
 import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 const popoverAttrs = createBitsAttrs({
     component: "popover",
-    parts: ["root", "trigger", "content", "close"],
+    parts: ["root", "trigger", "content", "close", "overlay"],
 });
 const PopoverRootContext = new Context("Popover.Root");
 export class PopoverRootState {
@@ -172,3 +172,26 @@ export class PopoverCloseState {
         ...this.attachment,
     }));
 }
+export class PopoverOverlayState {
+    static create(opts) {
+        return new PopoverOverlayState(opts, PopoverRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [popoverAttrs.overlay]: "",
+        style: {
+            pointerEvents: "auto",
+        },
+        "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...this.attachment,
+    }));
+}

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

@@ -4,6 +4,7 @@ import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildr
 import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
 import type { PortalProps } from "../../types.js";
+import type { PresenceLayerProps } from "../utilities/presence-layer/types.js";
 export type PopoverRootPropsWithoutHTML = WithChildren<{
     /**
      * The open state of the popover.
@@ -31,3 +32,8 @@ export type PopoverArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type PopoverArrowProps = ArrowProps;
 export type PopoverPortalPropsWithoutHTML = PortalProps;
 export type PopoverPortalProps = PortalProps;
+export type PopoverOverlaySnippetProps = {
+    open: boolean;
+};
+export type PopoverOverlayPropsWithoutHTML = WithChild<PresenceLayerProps, PopoverOverlaySnippetProps>;
+export type PopoverOverlayProps = PopoverOverlayPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverOverlayPropsWithoutHTML>;

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.js

@@ -193,6 +193,8 @@ function isValidEvent(e, node) {
     const targetIsContextMenuTrigger = Boolean(target.closest(`[${CONTEXT_MENU_TRIGGER_ATTR}]`));
     if ("button" in e && e.button > 0 && !targetIsContextMenuTrigger)
         return false;
+    if ("button" in e && e.button === 0 && targetIsContextMenuTrigger)
+        return true;
     const nodeIsContextMenu = Boolean(node.closest(`[${CONTEXT_MENU_CONTENT_ATTR}]`));
     if (targetIsContextMenuTrigger && nodeIsContextMenu)
         return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",