bits-ui 1.1.0 → 1.2.1

package/dist/bits/context-menu/components/context-menu-content-static.svelte

@@ -65,6 +65,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		side="right"
 		sideOffset={2}
@@ -96,6 +97,7 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		side="right"
 		sideOffset={2}

package/dist/bits/context-menu/components/context-menu-content.svelte

@@ -65,6 +65,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		side="right"
 		sideOffset={2}
 		align="start"
@@ -96,6 +97,7 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		side="right"
 		sideOffset={2}
 		align="start"

package/dist/bits/date-range-field/date-range-field.svelte.d.ts

@@ -41,13 +41,6 @@ export declare class DateRangeFieldRootState {
     startValueComplete: boolean;
     endValueComplete: boolean;
     rangeComplete: boolean;
-    mergedValues: {
-        start: undefined;
-        end: undefined;
-    } | {
-        start: DateValue;
-        end: DateValue;
-    };
     constructor(opts: DateRangeFieldRootStateProps);
     validationStatus: false | {
         readonly reason: "custom";

package/dist/bits/date-range-field/date-range-field.svelte.js

@@ -1,6 +1,5 @@
-import { untrack } from "svelte";
 import { box, onDestroyEffect, useRefById } from "svelte-toolbelt";
-import { Context } from "runed";
+import { Context, watch } from "runed";
 import { DateFieldInputState, useDateFieldRoot } from "../date-field/date-field.svelte.js";
 import { useId } from "../../internal/use-id.js";
 import { getDataDisabled, getDataInvalid } from "../../internal/attrs.js";
@@ -22,21 +21,6 @@ export class DateRangeFieldRootState {
     startValueComplete = $derived.by(() => this.opts.startValue.current !== undefined);
     endValueComplete = $derived.by(() => this.opts.endValue.current !== undefined);
     rangeComplete = $derived(this.startValueComplete && this.endValueComplete);
-    mergedValues = $derived.by(() => {
-        if (this.opts.startValue.current === undefined ||
-            this.opts.endValue.current === undefined) {
-            return {
-                start: undefined,
-                end: undefined,
-            };
-        }
-        else {
-            return {
-                start: this.opts.startValue.current,
-                end: this.opts.endValue.current,
-            };
-        }
-    });
     constructor(opts) {
         this.opts = opts;
         this.formatter = createFormatter(this.opts.locale.current);
@@ -54,48 +38,65 @@ export class DateRangeFieldRootState {
                 return;
             this.formatter.setLocale(this.opts.locale.current);
         });
-        $effect(() => {
-            const startValue = this.opts.value.current.start;
-            untrack(() => {
-                if (startValue)
-                    this.opts.placeholder.current = startValue;
-            });
-        });
-        $effect(() => {
-            const endValue = this.opts.value.current.end;
-            untrack(() => {
-                if (endValue)
-                    this.opts.placeholder.current = endValue;
-            });
+        /**
+         * Synchronize the start and end values with the `value` in case
+         * it is updated externally.
+         */
+        watch(() => this.opts.value.current, (value) => {
+            if (value.start && value.end) {
+                this.opts.startValue.current = value.start;
+                this.opts.endValue.current = value.end;
+            }
+            else if (value.start) {
+                this.opts.startValue.current = value.start;
+                this.opts.endValue.current = undefined;
+            }
+            else if (value.start === undefined && value.end === undefined) {
+                this.opts.startValue.current = undefined;
+                this.opts.endValue.current = undefined;
+            }
         });
         /**
-         * Sync values set programatically with the `startValue` and `endValue`
+         * Synchronize the placeholder value with the current start value
          */
-        $effect(() => {
-            const value = this.opts.value.current;
-            untrack(() => {
-                if (value.start !== undefined && value.start !== this.opts.startValue.current) {
-                    this.#setStartValue(value.start);
-                }
-                if (value.end !== undefined && value.end !== this.opts.endValue.current) {
-                    this.#setEndValue(value.end);
-                }
-            });
+        watch(() => this.opts.value.current, (value) => {
+            const startValue = value.start;
+            if (startValue && this.opts.placeholder.current !== startValue) {
+                this.opts.placeholder.current = startValue;
+            }
         });
-        // TODO: Handle description element
-        $effect(() => {
-            const placeholder = untrack(() => this.opts.placeholder.current);
-            const startValue = untrack(() => this.opts.startValue.current);
-            if (this.startValueComplete && placeholder !== startValue) {
-                untrack(() => {
-                    if (startValue) {
-                        this.opts.placeholder.current = startValue;
+        watch([() => this.opts.startValue.current, () => this.opts.endValue.current], ([startValue, endValue]) => {
+            if (this.opts.value.current &&
+                this.opts.value.current.start === startValue &&
+                this.opts.value.current.end === endValue) {
+                return;
+            }
+            if (startValue && endValue) {
+                this.#updateValue((prev) => {
+                    if (prev.start === startValue && prev.end === endValue) {
+                        return prev;
+                    }
+                    if (isBefore(endValue, startValue)) {
+                        const start = startValue;
+                        const end = endValue;
+                        this.#setStartValue(end);
+                        this.#setEndValue(start);
+                        return { start: endValue, end: startValue };
+                    }
+                    else {
+                        return {
+                            start: startValue,
+                            end: endValue,
+                        };
                     }
                 });
             }
-        });
-        $effect(() => {
-            this.opts.value.current = this.mergedValues;
+            else if (this.opts.value.current &&
+                this.opts.value.current.start &&
+                this.opts.value.current.end) {
+                this.opts.value.current.start = undefined;
+                this.opts.value.current.end = undefined;
+            }
         });
     }
     validationStatus = $derived.by(() => {
@@ -134,6 +135,11 @@ export class DateRangeFieldRootState {
             return false;
         return true;
     });
+    #updateValue(cb) {
+        const value = this.opts.value.current;
+        const newValue = cb(value);
+        this.opts.value.current = newValue;
+    }
     #setStartValue(value) {
         this.opts.startValue.current = value;
     }

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

@@ -1,5 +1,5 @@
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
 type DialogVariant = "alert-dialog" | "dialog";
 type DialogRootStateProps = WritableBoxedValues<{
     open: boolean;
@@ -42,7 +42,6 @@ declare class DialogTriggerState {
     readonly root: DialogRootState;
     constructor(opts: DialogTriggerStateProps, root: DialogRootState);
     onclick(e: BitsMouseEvent): void;
-    onpointerdown(e: BitsPointerEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly "data-state": "open" | "closed";
@@ -50,7 +49,6 @@ declare class DialogTriggerState {
         readonly "aria-haspopup": "dialog";
         readonly "aria-expanded": "true" | "false";
         readonly "aria-controls": string | undefined;
-        readonly onpointerdown: (e: BitsPointerEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly disabled: true | undefined;

package/dist/bits/dialog/dialog.svelte.js

@@ -51,9 +51,6 @@ class DialogTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        this.onclick = this.onclick.bind(this);
-        this.onpointerdown = this.onpointerdown.bind(this);
-        this.onkeydown = this.onkeydown.bind(this);
         useRefById({
             ...opts,
             onRefChange: (node) => {
@@ -62,7 +59,6 @@ class DialogTriggerState {
             },
         });
         this.onclick = this.onclick.bind(this);
-        this.onpointerdown = this.onpointerdown.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
     onclick(e) {
@@ -72,15 +68,6 @@ class DialogTriggerState {
             return;
         this.root.handleOpen();
     }
-    onpointerdown(e) {
-        if (this.opts.disabled.current)
-            return;
-        if (e.button > 0)
-            return;
-        // by default, it will attempt to focus this trigger on pointerdown
-        // since this also opens the dialog we want to prevent that behavior
-        e.preventDefault();
-    }
     onkeydown(e) {
         if (this.opts.disabled.current)
             return;
@@ -95,7 +82,6 @@ class DialogTriggerState {
         "aria-expanded": getAriaExpanded(this.root.opts.open.current),
         "aria-controls": this.root.contentId,
         [this.root.attrs.trigger]: "",
-        onpointerdown: this.onpointerdown,
         onkeydown: this.onkeydown,
         onclick: this.onclick,
         disabled: this.opts.disabled.current ? true : undefined,

package/dist/bits/dropdown-menu/components/dropdown-menu-content-static.svelte

@@ -51,6 +51,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -77,6 +78,7 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}

package/dist/bits/dropdown-menu/components/dropdown-menu-content.svelte

@@ -51,6 +51,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -78,6 +79,7 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}

package/dist/bits/link-preview/components/link-preview-content-static.svelte

@@ -6,14 +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
 	}: LinkPreviewContentStaticProps = $props();
@@ -24,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}
 		enabled={contentState.root.opts.open.current}
 		isStatic
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}
@@ -72,13 +60,10 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.root.opts.open.current}
 		isStatic
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -7,6 +7,7 @@
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 	import Mounted from "../../utilities/mounted.svelte";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		children,
@@ -21,8 +22,8 @@
 		sticky = "partial",
 		hideWhenDetached = false,
 		collisionPadding = 0,
-		onInteractOutside,
-		onEscapeKeydown,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
 	}: LinkPreviewContentProps = $props();
@@ -33,6 +34,8 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
 	});
 
 	const floatingProps = $derived({
@@ -47,29 +50,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}
@@ -93,12 +81,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}

package/dist/bits/link-preview/link-preview.svelte.d.ts

@@ -45,7 +45,10 @@ declare class LinkPreviewTriggerState {
         readonly onpointerleave: (e: BitsPointerEvent) => void;
     };
 }
-type LinkPreviewContentStateProps = WithRefProps;
+type LinkPreviewContentStateProps = WithRefProps & ReadableBoxedValues<{
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+}>;
 declare class LinkPreviewContentState {
     readonly opts: LinkPreviewContentStateProps;
     readonly root: LinkPreviewRootState;
@@ -53,6 +56,10 @@ declare class LinkPreviewContentState {
     onpointerdown(e: BitsPointerEvent): void;
     onpointerenter(e: BitsPointerEvent): void;
     onfocusout(e: BitsFocusEvent): void;
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    onOpenAutoFocus: (e: Event) => void;
+    onCloseAutoFocus: (e: Event) => void;
     snippetProps: {
         open: boolean;
     };
@@ -65,6 +72,12 @@ declare class LinkPreviewContentState {
         readonly onpointerenter: (e: BitsPointerEvent) => void;
         readonly onfocusout: (e: BitsFocusEvent) => void;
     };
+    popperProps: {
+        onInteractOutside: (e: PointerEvent) => void;
+        onEscapeKeydown: (e: KeyboardEvent) => void;
+        onOpenAutoFocus: (e: Event) => void;
+        onCloseAutoFocus: (e: Event) => void;
+    };
 }
 export declare function useLinkPreviewRoot(props: LinkPreviewRootStateProps): LinkPreviewRootState;
 export declare function useLinkPreviewTrigger(props: LinkPreviewTriggerStateProps): LinkPreviewTriggerState;

package/dist/bits/link-preview/link-preview.svelte.js

@@ -181,6 +181,24 @@ class LinkPreviewContentState {
     onfocusout(e) {
         e.preventDefault();
     }
+    onInteractOutside = (e) => {
+        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,
@@ -191,6 +209,12 @@ class LinkPreviewContentState {
         onpointerenter: this.onpointerenter,
         onfocusout: this.onfocusout,
     }));
+    popperProps = {
+        onInteractOutside: this.onInteractOutside,
+        onEscapeKeydown: this.onEscapeKeydown,
+        onOpenAutoFocus: this.onOpenAutoFocus,
+        onCloseAutoFocus: this.onCloseAutoFocus,
+    };
 }
 const LinkPreviewRootContext = new Context("LinkPreview.Root");
 export function useLinkPreviewRoot(props) {

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

@@ -54,6 +54,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -83,6 +84,7 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}

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

@@ -54,6 +54,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -84,6 +85,7 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}

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

@@ -74,12 +74,14 @@ declare class MenuContentState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onblur: (e: BitsFocusEvent) => void;
         readonly onfocus: (_: BitsFocusEvent) => void;
-        readonly onCloseAutoFocus: (e: Event) => void;
         readonly dir: Direction;
         readonly style: {
             readonly pointerEvents: "auto";
         };
     };
+    popperProps: {
+        onCloseAutoFocus: (e: Event) => void;
+    };
 }
 type MenuItemSharedStateProps = WithRefProps & ReadableBoxedValues<{
     disabled: boolean;

package/dist/bits/menu/menu.svelte.js

@@ -281,12 +281,14 @@ class MenuContentState {
         onkeydown: this.onkeydown,
         onblur: this.onblur,
         onfocus: this.onfocus,
-        onCloseAutoFocus: (e) => this.onCloseAutoFocus(e),
         dir: this.parentMenu.root.opts.dir.current,
         style: {
             pointerEvents: "auto",
         },
     }));
+    popperProps = {
+        onCloseAutoFocus: (e) => this.onCloseAutoFocus(e),
+    };
 }
 class MenuItemSharedState {
     opts;

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

@@ -33,12 +33,4 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<MenuContentStatic
-	bind:ref
-	{...mergedProps}
-	preventScroll={false}
-	onInteractOutside={contentState.onInteractOutside}
-	onFocusOutside={contentState.onFocusOutside}
-	onCloseAutoFocus={contentState.onCloseAutoFocus}
-	onOpenAutoFocus={contentState.onOpenAutoFocus}
-/>
+<MenuContentStatic bind:ref {...mergedProps} {...contentState.popperProps} preventScroll={false} />

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

@@ -33,12 +33,4 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<MenuContent
-	bind:ref
-	{...mergedProps}
-	preventScroll={false}
-	onInteractOutside={contentState.onInteractOutside}
-	onFocusOutside={contentState.onFocusOutside}
-	onCloseAutoFocus={contentState.onCloseAutoFocus}
-	onOpenAutoFocus={contentState.onOpenAutoFocus}
-/>
+<MenuContent bind:ref {...mergedProps} {...contentState.popperProps} preventScroll={false} />

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

@@ -103,10 +103,10 @@ declare class MenubarContentState {
     hasInteractedOutside: boolean;
     focusScopeContext: FocusScopeContextValue;
     constructor(opts: MenubarContentStateProps, menu: MenubarMenuState);
-    onCloseAutoFocus(e: Event): void;
-    onFocusOutside(e: FocusEvent): void;
-    onInteractOutside(e: PointerEvent): void;
-    onOpenAutoFocus(e: Event): void;
+    onCloseAutoFocus: (e: Event) => void;
+    onFocusOutside: (e: FocusEvent) => void;
+    onInteractOutside: (e: PointerEvent) => void;
+    onOpenAutoFocus: (e: Event) => void;
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly id: string;
@@ -121,6 +121,12 @@ declare class MenubarContentState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly "data-menu-content": "";
     };
+    popperProps: {
+        onCloseAutoFocus: (e: Event) => void;
+        onFocusOutside: (e: FocusEvent) => void;
+        onInteractOutside: (e: PointerEvent) => void;
+        onOpenAutoFocus: (e: Event) => void;
+    };
 }
 export declare function useMenubarRoot(props: MenubarRootStateProps): MenubarRootState;
 export declare function useMenubarMenu(props: MenubarMenuStateProps): MenubarMenuState;