bits-ui 1.0.0-next.18 → 1.0.0-next.19

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

@@ -38,7 +38,6 @@
 
 <PresenceLayer {...mergedProps} present={contentState.root.open.current || forceMount}>
 	{#snippet presence({ present })}
-		<ScrollLock {preventScroll} />
 		<FocusScope
 			loop
 			trapFocus={present.current && trapFocus}
@@ -69,6 +68,7 @@
 						}}
 					>
 						<TextSelectionLayer {...mergedProps} enabled={present.current}>
+							<ScrollLock {preventScroll} />
 							{#if child}
 								{@render child({
 									props: mergeProps(mergedProps, focusScopeProps),

package/dist/bits/slider/components/slider.svelte

@@ -12,7 +12,7 @@
 		ref = $bindable(null),
 		value = $bindable([]),
 		onValueChange = noop,
-		onValueChangeEnd = noop,
+		onValueCommit = noop,
 		disabled = false,
 		min = 0,
 		max = 100,
@@ -41,7 +41,7 @@
 				}
 			}
 		),
-		onValueChangeEnd: box.with(() => onValueChangeEnd),
+		onValueCommit: box.with(() => onValueCommit),
 		disabled: box.with(() => disabled),
 		min: box.with(() => min),
 		max: box.with(() => max),

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

@@ -13,7 +13,7 @@ type SliderRootStateProps = WithRefProps<ReadableBoxedValues<{
     step: number;
     dir: Direction;
     autoSort: boolean;
-    onValueChangeEnd: OnChangeFn<number[]>;
+    onValueCommit: OnChangeFn<number[]>;
 }> & WritableBoxedValues<{
     value: number[];
 }>>;
@@ -35,7 +35,7 @@ declare class SliderRootState {
     isActive: boolean;
     currentThumbIdx: number;
     direction: "rl" | "lr" | "tb" | "bt";
-    onValueChangeEnd: SliderRootStateProps["onValueChangeEnd"];
+    onValueCommit: SliderRootStateProps["onValueCommit"];
     constructor(props: SliderRootStateProps);
     applyPosition: ({ clientXY, activeThumbIdx, start, end, }: {
         clientXY: number;

package/dist/bits/slider/slider.svelte.js

@@ -38,7 +38,7 @@ class SliderRootState {
             return this.dir.current === "rtl" ? "tb" : "bt";
         }
     });
-    onValueChangeEnd;
+    onValueCommit;
     constructor(props) {
         this.id = props.id;
         this.ref = props.ref;
@@ -50,7 +50,7 @@ class SliderRootState {
         this.dir = props.dir;
         this.autoSort = props.autoSort;
         this.value = props.value;
-        this.onValueChangeEnd = props.onValueChangeEnd;
+        this.onValueCommit = props.onValueCommit;
         useRefById({
             id: this.id,
             ref: this.ref,
@@ -187,7 +187,7 @@ class SliderRootState {
     };
     handlePointerUp = () => {
         if (this.isActive) {
-            this.onValueChangeEnd.current(untrack(() => this.value.current));
+            this.onValueCommit.current(untrack(() => this.value.current));
         }
         this.isActive = false;
     };
@@ -477,7 +477,7 @@ class SliderThumbState {
                 }
                 break;
         }
-        this.#root.onValueChangeEnd.current(this.#root.value.current);
+        this.#root.onValueCommit.current(this.#root.value.current);
     };
     props = $derived.by(() => ({
         ...this.#root.thumbsPropsArr[this.#index.current],

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

@@ -17,9 +17,10 @@ export type SliderRootPropsWithoutHTML = WithChild<{
     onValueChange?: OnChangeFn<number[]>;
     /**
      * A callback function called when the user stops dragging the thumb,
-     * which is useful for knowing when the user has finished interacting with the slider.
+     * which is useful for knowing when the user has finished interacting with the
+     * slider and _commits_ the value.
      */
-    onValueChangeEnd?: OnChangeFn<number[]>;
+    onValueCommit?: OnChangeFn<number[]>;
     /**
      * Whether to automatically sort the values in the array when moving thumbs past
      * one another.

package/dist/bits/utilities/popper-layer/popper-layer.svelte

@@ -74,9 +74,7 @@
 			{customAnchor}
 		>
 			{#snippet content({ props: floatingProps })}
-				{#if preventScroll}
-					<ScrollLock {preventScroll} />
-				{/if}
+				<ScrollLock {preventScroll} />
 				<FocusScope
 					{id}
 					{onOpenAutoFocus}

package/dist/internal/date-time/calendar-helpers.svelte.js

@@ -62,7 +62,12 @@ function createMonth(props) {
         if (!startFrom) {
             startFrom = dateObj.add({ months: 1 }).set({ day: 1 });
         }
-        const extraDaysArray = Array.from({ length: extraDays }, (_, i) => {
+        let length = extraDays;
+        if (nextMonthDays.length === 0) {
+            length = extraDays - 1;
+            nextMonthDays.push(startFrom);
+        }
+        const extraDaysArray = Array.from({ length }, (_, i) => {
             const incr = i + 1;
             return startFrom.add({ days: incr });
         });

package/dist/internal/use-body-scroll-lock.svelte.js

@@ -1,10 +1,11 @@
 import { SvelteMap } from "svelte/reactivity";
 import { afterTick, box } from "svelte-toolbelt";
+import { Previous, watch } from "runed";
+import { untrack } from "svelte";
 import { isBrowser, isIOS } from "./is.js";
 import { addEventListener } from "./events.js";
 import { useId } from "./use-id.js";
 import { createSharedHook } from "./create-shared-hook.svelte.js";
-import { watch } from "./box.svelte.js";
 const useBodyLockStackCount = createSharedHook(() => {
     const map = new SvelteMap();
     const locked = $derived.by(() => {
@@ -15,6 +16,7 @@ const useBodyLockStackCount = createSharedHook(() => {
         }
         return false;
     });
+    const prevLocked = new Previous(() => locked);
     let initialBodyStyle = $state({});
     let stopTouchMoveListener = null;
     function resetBodyStyle() {
@@ -27,43 +29,43 @@ const useBodyLockStackCount = createSharedHook(() => {
         document.body.style.overflow = initialBodyStyle.overflow ?? "";
         isIOS && stopTouchMoveListener?.();
     }
-    watch(box.with(() => locked), (curr, prev) => {
-        if (!curr) {
-            if (prev) {
-                resetBodyStyle();
+    $effect(() => {
+        const curr = locked;
+        return untrack(() => {
+            if (!curr) {
+                return;
             }
-            return;
-        }
-        const bodyStyle = getComputedStyle(document.body);
-        initialBodyStyle.overflow = bodyStyle.overflow;
-        initialBodyStyle.paddingRight = bodyStyle.paddingRight;
-        initialBodyStyle.marginRight = bodyStyle.marginRight;
-        initialBodyStyle.pointerEvents = bodyStyle.pointerEvents;
-        // TODO: account for RTL direction, etc.
-        const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        const paddingRight = Number.parseInt(initialBodyStyle.paddingRight ?? "0", 10);
-        const config = {
-            padding: paddingRight + verticalScrollbarWidth,
-            margin: Number.parseInt(initialBodyStyle.marginRight ?? "0", 10),
-        };
-        if (verticalScrollbarWidth > 0) {
-            document.body.style.paddingRight = `${config.padding}px`;
-            document.body.style.marginRight = `${config.margin}px`;
-            document.body.style.setProperty("--scrollbar-width", `${verticalScrollbarWidth}px`);
-            document.body.style.overflow = "hidden";
-        }
-        if (isIOS) {
-            stopTouchMoveListener = addEventListener(document, "touchmove", (e) => {
-                if (e.target !== document.documentElement)
-                    return;
-                if (e.touches.length > 1)
-                    return;
-                e.preventDefault();
-            }, { passive: false });
-        }
-        afterTick(() => {
-            document.body.style.pointerEvents = "none";
-            document.body.style.overflow = "hidden";
+            const bodyStyle = getComputedStyle(document.body);
+            initialBodyStyle.overflow = bodyStyle.overflow;
+            initialBodyStyle.paddingRight = bodyStyle.paddingRight;
+            initialBodyStyle.marginRight = bodyStyle.marginRight;
+            initialBodyStyle.pointerEvents = bodyStyle.pointerEvents;
+            // TODO: account for RTL direction, etc.
+            const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            const paddingRight = Number.parseInt(initialBodyStyle.paddingRight ?? "0", 10);
+            const config = {
+                padding: paddingRight + verticalScrollbarWidth,
+                margin: Number.parseInt(initialBodyStyle.marginRight ?? "0", 10),
+            };
+            if (verticalScrollbarWidth > 0) {
+                document.body.style.paddingRight = `${config.padding}px`;
+                document.body.style.marginRight = `${config.margin}px`;
+                document.body.style.setProperty("--scrollbar-width", `${verticalScrollbarWidth}px`);
+                document.body.style.overflow = "hidden";
+            }
+            if (isIOS) {
+                stopTouchMoveListener = addEventListener(document, "touchmove", (e) => {
+                    if (e.target !== document.documentElement)
+                        return;
+                    if (e.touches.length > 1)
+                        return;
+                    e.preventDefault();
+                }, { passive: false });
+            }
+            afterTick(() => {
+                document.body.style.pointerEvents = "none";
+                document.body.style.overflow = "hidden";
+            });
         });
     });
     $effect(() => {
@@ -71,16 +73,25 @@ const useBodyLockStackCount = createSharedHook(() => {
             stopTouchMoveListener?.();
         };
     });
-    return map;
+    return {
+        get map() {
+            return map;
+        },
+        resetBodyStyle,
+    };
 });
 export function useBodyScrollLock(initialState) {
     const id = useId();
-    const map = useBodyLockStackCount();
-    map.set(id, initialState ?? false);
-    const locked = box.with(() => map.get(id) ?? false, (v) => map.set(id, v));
+    const countState = useBodyLockStackCount();
+    countState.map.set(id, initialState ?? false);
+    const locked = box.with(() => countState.map.get(id) ?? false, (v) => countState.map.set(id, v));
     $effect(() => {
         return () => {
-            map.delete(id);
+            countState.map.delete(id);
+            const length = Array.from(countState.map.values()).length;
+            if (length === 0) {
+                countState.resetBodyStyle();
+            }
         };
     });
     return locked;

package/package.json

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