bits-ui 1.0.0-next.79 → 1.0.0-next.80

package/dist/bits/index.d.ts

@@ -35,4 +35,5 @@ export { Toggle } from "./toggle/index.js";
 export { ToggleGroup } from "./toggle-group/index.js";
 export { Toolbar } from "./toolbar/index.js";
 export { Tooltip } from "./tooltip/index.js";
+export { IsUsingKeyboard } from "./utilities/is-using-keyboard/is-using-keyboard.svelte.js";
 export { default as Portal } from "./utilities/portal/portal.svelte";

package/dist/bits/index.js

@@ -35,4 +35,5 @@ export { Toggle } from "./toggle/index.js";
 export { ToggleGroup } from "./toggle-group/index.js";
 export { Toolbar } from "./toolbar/index.js";
 export { Tooltip } from "./tooltip/index.js";
+export { IsUsingKeyboard } from "./utilities/is-using-keyboard/is-using-keyboard.svelte.js";
 export { default as Portal } from "./utilities/portal/portal.svelte";

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

@@ -5,6 +5,7 @@ import { CustomEventDispatcher } from "../../internal/events.js";
 import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
 import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import type { Direction } from "../../shared/index.js";
+import { IsUsingKeyboard } from "../../index.js";
 export declare const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 type MenuVariant = "context-menu" | "dropdown-menu" | "menubar";
 export type MenuRootStateProps = ReadableBoxedValues<{
@@ -17,7 +18,7 @@ export declare const MenuOpenEvent: CustomEventDispatcher<unknown>;
 declare class MenuRootState {
     onClose: MenuRootStateProps["onClose"];
     variant: MenuRootStateProps["variant"];
-    isUsingKeyboard: boolean;
+    isUsingKeyboard: IsUsingKeyboard;
     dir: MenuRootStateProps["dir"];
     constructor(props: MenuRootStateProps);
     getAttr(name: string): string;

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

@@ -1,6 +1,5 @@
-import { afterTick, box, executeCallbacks, mergeProps, onDestroyEffect, useRefById, } from "svelte-toolbelt";
+import { afterTick, box, mergeProps, onDestroyEffect, useRefById } from "svelte-toolbelt";
 import { Context, IsFocusWithin, watch } from "runed";
-import { on } from "svelte/events";
 import { FIRST_LAST_KEYS, LAST_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, getCheckedState, isMouseEvent, } from "./utils.js";
 import { focusFirst } from "../../internal/focus.js";
 import { CustomEventDispatcher } from "../../internal/events.js";
@@ -10,6 +9,7 @@ import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import { kbd } from "../../internal/kbd.js";
 import { getAriaChecked, getAriaDisabled, getAriaExpanded, getAriaOrientation, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
 import { isPointerInGraceArea, makeHullFromElements } from "../../internal/polygon.js";
+import { IsUsingKeyboard } from "../../index.js";
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 const MenuRootContext = new Context("Menu.Root");
 const MenuMenuContext = new Context("Menu.Root | Menu.Sub");
@@ -23,37 +23,12 @@ export const MenuOpenEvent = new CustomEventDispatcher("bitsmenuopen", {
 class MenuRootState {
     onClose;
     variant;
-    isUsingKeyboard = $state(false);
+    isUsingKeyboard = new IsUsingKeyboard();
     dir;
     constructor(props) {
         this.onClose = props.onClose;
         this.dir = props.dir;
         this.variant = props.variant;
-        $effect(() => {
-            const callbacksToDispose = [];
-            const handlePointer = (_) => {
-                this.isUsingKeyboard = false;
-            };
-            const handleKeydown = (_) => {
-                this.isUsingKeyboard = true;
-                const disposePointerDown = on(document, "pointerdown", handlePointer, {
-                    capture: true,
-                    once: true,
-                });
-                const disposePointerMove = on(document, "pointermove", handlePointer, {
-                    capture: true,
-                    once: true,
-                });
-                callbacksToDispose.push(disposePointerDown, disposePointerMove);
-            };
-            const disposeKeydown = on(document, "keydown", handleKeydown, {
-                capture: true,
-            });
-            callbacksToDispose.push(disposeKeydown);
-            return () => {
-                executeCallbacks(callbacksToDispose);
-            };
-        });
     }
     getAttr(name) {
         return `data-${this.variant.current}-${name}`;
@@ -140,7 +115,7 @@ class MenuContentState {
                 return;
             const handler = () => {
                 afterTick(() => {
-                    if (!this.parentMenu.root.isUsingKeyboard)
+                    if (!this.parentMenu.root.isUsingKeyboard.current)
                         return;
                     this.rovingFocusGroup.focusFirstCandidate();
                 });
@@ -211,7 +186,7 @@ class MenuContentState {
         }
     }
     onfocus(_) {
-        if (!this.parentMenu.root.isUsingKeyboard)
+        if (!this.parentMenu.root.isUsingKeyboard.current)
             return;
         afterTick(() => this.rovingFocusGroup.focusFirstCandidate());
     }
@@ -386,7 +361,7 @@ class MenuItemState {
         this.#onSelect.current(selectEvent);
         afterTick(() => {
             if (selectEvent.defaultPrevented) {
-                this.#item.content.parentMenu.root.isUsingKeyboard = false;
+                this.#item.content.parentMenu.root.isUsingKeyboard.current = false;
                 return;
             }
             if (this.#closeOnSelect.current) {

package/dist/bits/range-calendar/range-calendar.svelte.js

@@ -1,7 +1,6 @@
 import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internationalized/date";
-import { untrack } from "svelte";
 import { useRefById } from "svelte-toolbelt";
-import { Context } from "runed";
+import { Context, watch } from "runed";
 import { CalendarRootContext } from "../calendar/calendar.svelte.js";
 import { useId } from "../../internal/use-id.js";
 import { getAriaDisabled, getAriaSelected, getDataDisabled, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
@@ -119,65 +118,61 @@ export class RangeCalendarRootState {
          * Synchronize the start and end values with the `value` in case
          * it is updated externally.
          */
-        $effect(() => {
-            const value = this.value.current;
-            untrack(() => {
-                if (value.start && value.end) {
-                    this.startValue.current = value.start;
-                    this.endValue.current = value.end;
-                }
-                else if (value.start) {
-                    this.startValue.current = value.start;
-                    this.endValue.current = undefined;
-                }
-            });
+        watch(() => this.value.current, (value) => {
+            if (value.start && value.end) {
+                this.startValue.current = value.start;
+                this.endValue.current = value.end;
+            }
+            else if (value.start) {
+                this.startValue.current = value.start;
+                this.endValue.current = undefined;
+            }
+            else if (value.start === undefined && value.end === undefined) {
+                this.startValue.current = undefined;
+                this.endValue.current = undefined;
+            }
         });
         /**
          * Synchronize the placeholder value with the current start value
          */
-        $effect(() => {
-            this.value.current;
-            untrack(() => {
-                const startValue = this.value.current.start;
-                if (startValue && this.placeholder.current !== startValue) {
-                    this.placeholder.current = startValue;
-                }
-            });
+        watch(() => this.value.current, (value) => {
+            const startValue = value.start;
+            if (startValue && this.placeholder.current !== startValue) {
+                this.placeholder.current = startValue;
+            }
         });
-        $effect(() => {
-            const startValue = this.startValue.current;
-            const endValue = this.endValue.current;
-            untrack(() => {
-                const value = this.value.current;
-                if (value && value.start === startValue && value.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,
-                            };
-                        }
-                    });
-                }
-                else if (value && value.start && value.end) {
-                    this.value.current = {
-                        start: undefined,
-                        end: undefined,
-                    };
-                }
-            });
+        watch([() => this.startValue.current, () => this.endValue.current], ([startValue, endValue]) => {
+            if (this.value.current &&
+                this.value.current.start === startValue &&
+                this.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,
+                        };
+                    }
+                });
+            }
+            else if (this.value.current &&
+                this.value.current.start &&
+                this.value.current.end) {
+                this.value.current.start = undefined;
+                this.value.current.end = undefined;
+            }
         });
         this.shiftFocus = this.shiftFocus.bind(this);
         this.handleCellClick = this.handleCellClick.bind(this);

package/dist/bits/utilities/is-using-keyboard/is-using-keyboard.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type AnyFn } from "svelte-toolbelt";
+/**
+ * Detects whether the user is currently using the keyboard
+ * or not by listening to keyboard and pointer events. Uses shared global
+ * state to avoid listener duplication.
+ */
+export declare class IsUsingKeyboard {
+    static _refs: number;
+    static _cleanup?: AnyFn;
+    constructor();
+    get current(): boolean;
+    set current(value: boolean);
+}

package/dist/bits/utilities/is-using-keyboard/is-using-keyboard.svelte.js

@@ -0,0 +1,51 @@
+import { executeCallbacks } from "svelte-toolbelt";
+import { on } from "svelte/events";
+// Using global state to avoid multiple listeners.
+let isUsingKeyboard = $state(false);
+/**
+ * Detects whether the user is currently using the keyboard
+ * or not by listening to keyboard and pointer events. Uses shared global
+ * state to avoid listener duplication.
+ */
+export class IsUsingKeyboard {
+    static _refs = 0; // Reference counting to avoid multiple listeners.
+    static _cleanup;
+    constructor() {
+        $effect(() => {
+            if (IsUsingKeyboard._refs === 0) {
+                IsUsingKeyboard._cleanup = $effect.root(() => {
+                    const callbacksToDispose = [];
+                    const handlePointer = (_) => {
+                        isUsingKeyboard = false;
+                    };
+                    const handleKeydown = (_) => {
+                        isUsingKeyboard = true;
+                    };
+                    callbacksToDispose.push(on(document, "pointerdown", handlePointer, {
+                        capture: true,
+                    }), on(document, "pointermove", handlePointer, {
+                        capture: true,
+                    }), on(document, "keydown", handleKeydown, {
+                        capture: true,
+                    }));
+                    // Don't forget to spread and call twice.
+                    return executeCallbacks(...callbacksToDispose);
+                });
+            }
+            IsUsingKeyboard._refs++;
+            return () => {
+                IsUsingKeyboard._refs--;
+                if (IsUsingKeyboard._refs === 0) {
+                    isUsingKeyboard = false;
+                    IsUsingKeyboard._cleanup?.();
+                }
+            };
+        });
+    }
+    get current() {
+        return isUsingKeyboard;
+    }
+    set current(value) {
+        isUsingKeyboard = value;
+    }
+}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, } from "./bits/index.js";
 export * from "./shared/index.js";
 export type * from "./shared/index.js";
 export * from "./types.js";

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, } from "./bits/index.js";
 export * from "./shared/index.js";
 export * from "./types.js";

package/package.json

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