bits-ui 1.0.0-next.8 → 1.0.0-next.81

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

@@ -1,22 +1,19 @@
 import { untrack } from "svelte";
-import { box } from "svelte-toolbelt";
-import { Previous } from "runed";
+import { afterTick, box, useRefById } from "svelte-toolbelt";
+import { Context, Previous } from "runed";
 import { getTabbableCandidates } from "../../internal/focus.js";
 import { getAriaExpanded, getAriaHidden, getDataDisabled, getDataOpenClosed, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
-import { createContext } from "../../internal/createContext.js";
-import { useId } from "../../internal/useId.js";
+import { useId } from "../../internal/use-id.js";
 import { kbd } from "../../internal/kbd.js";
-import { useArrowNavigation } from "../../internal/useArrowNavigation.js";
-import { boxAutoReset } from "../../internal/boxAutoReset.svelte.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { afterTick } from "../../internal/afterTick.js";
-import { noop } from "../../internal/callbacks.js";
-import { useRovingFocus } from "../../internal/useRovingFocus.svelte.js";
-const [setNavigationMenuRootContext] = createContext("NavigationMenu.Root");
-const [setNavigationMenuMenuContext, getNavigationMenuMenuContext] = createContext("NavigationMenu.Root or NavigationMenu.Sub");
-const [setNavigationMenuListContext, getNavigationMenuListContext] = createContext("NavigationMenu.List");
-const [setNavigationMenuItemContext, getNavigationMenuItemContext] = createContext("NavigationMenu.Item");
-const [setNavigationMenuContentContext, getNavigationMenuContentContext] = createContext("NavigationMenu.Content");
+import { useArrowNavigation } from "../../internal/use-arrow-navigation.js";
+import { boxAutoReset } from "../../internal/box-auto-reset.svelte.js";
+import { noop } from "../../internal/noop.js";
+import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
+const NavigationMenuRootContext = new Context("NavigationMenu.Root");
+const NavigationMenuMenuContext = new Context("NavigationMenu.Root | NavigationMenu.Sub");
+const NavigationMenuListContext = new Context("NavigationMenu.List");
+const NavigationMenuItemContext = new Context("NavigationMenu.Item");
+const NavigationMenuContentContext = new Context("NavigationMenu.Content");
 const ROOT_ATTR = "data-navigation-menu-root";
 const SUB_ATTR = "data-navigation-menu-sub";
 const ITEM_ATTR = "data-navigation-menu-item";
@@ -38,9 +35,9 @@ class NavigationMenuRootState {
     closeTimer = 0;
     skipDelayTimer = 0;
     isOpenDelayed = $state(false);
-    setValue = (v) => {
+    #setValue(v) {
         this.value.current = v;
-    };
+    }
     constructor(props) {
         this.id = props.id;
         this.delayDuration = props.delayDuration;
@@ -49,6 +46,12 @@ class NavigationMenuRootState {
         this.dir = props.dir;
         this.value = props.value;
         this.rootRef = props.ref;
+        this.onTriggerEnter = this.onTriggerEnter.bind(this);
+        this.onTriggerLeave = this.onTriggerLeave.bind(this);
+        this.onContentEnter = this.onContentEnter.bind(this);
+        this.onContentLeave = this.onContentLeave.bind(this);
+        this.onItemSelect = this.onItemSelect.bind(this);
+        this.onItemDismiss = this.onItemDismiss.bind(this);
         useRefById({
             id: this.id,
             ref: this.rootRef,
@@ -78,19 +81,19 @@ class NavigationMenuRootState {
             };
         });
     }
-    startCloseTimer = () => {
+    #startCloseTimer() {
         window.clearTimeout(this.closeTimer);
-        this.closeTimer = window.setTimeout(() => this.setValue(""), 150);
-    };
-    handleOpen = (itemValue) => {
+        this.closeTimer = window.setTimeout(() => this.#setValue(""), 150);
+    }
+    #handleOpen(itemValue) {
         window.clearTimeout(this.closeTimer);
-        this.setValue(itemValue);
-    };
-    handleClose = () => {
+        this.#setValue(itemValue);
+    }
+    handleClose() {
         this.onItemDismiss();
         this.onContentLeave();
-    };
-    handleDelayedOpen = (itemValue) => {
+    }
+    #handleDelayedOpen(itemValue) {
         const isOpenItem = this.value.current === itemValue;
         if (isOpenItem) {
             // If the item is already open (e.g. we're transitioning from the content to the trigger)
@@ -100,36 +103,36 @@ class NavigationMenuRootState {
         else {
             this.openTimer = window.setTimeout(() => {
                 window.clearTimeout(this.closeTimer);
-                this.setValue(itemValue);
+                this.#setValue(itemValue);
             }, this.delayDuration.current);
         }
-    };
-    onTriggerEnter = (itemValue) => {
+    }
+    onTriggerEnter(itemValue) {
         window.clearTimeout(this.openTimer);
         if (this.isOpenDelayed) {
-            this.handleDelayedOpen(itemValue);
+            this.#handleDelayedOpen(itemValue);
         }
         else {
-            this.handleOpen(itemValue);
+            this.#handleOpen(itemValue);
         }
-    };
-    onTriggerLeave = () => {
+    }
+    onTriggerLeave() {
         window.clearTimeout(this.openTimer);
-        this.startCloseTimer();
-    };
-    onContentEnter = () => {
+        this.#startCloseTimer();
+    }
+    onContentEnter() {
         window.clearTimeout(this.closeTimer);
-    };
-    onContentLeave = () => {
-        this.startCloseTimer();
-    };
-    onItemSelect = (itemValue) => {
+    }
+    onContentLeave() {
+        this.#startCloseTimer();
+    }
+    onItemSelect(itemValue) {
         const prevValue = this.value.current;
-        this.setValue(prevValue === itemValue ? "" : itemValue);
-    };
-    onItemDismiss = () => {
-        this.setValue("");
-    };
+        this.#setValue(prevValue === itemValue ? "" : itemValue);
+    }
+    onItemDismiss() {
+        this.#setValue("");
+    }
     props = $derived.by(() => ({
         id: this.id.current,
         "aria-label": "Main",
@@ -137,9 +140,6 @@ class NavigationMenuRootState {
         dir: this.dir.current,
         [ROOT_ATTR]: "",
     }));
-    createMenu(props) {
-        return new NavigationMenuMenuState(props, this);
-    }
 }
 class NavigationMenuMenuState {
     isRoot = $state(false);
@@ -174,28 +174,16 @@ class NavigationMenuMenuState {
         this.root = root;
         this.previousValue = props.previousValue;
     }
-    registerTrigger = (ref) => {
+    registerTrigger(ref) {
         this.triggerRefs.add(ref);
-    };
-    deRegisterTrigger = (ref) => {
+    }
+    deRegisterTrigger(ref) {
         this.triggerRefs.delete(ref);
-    };
-    getTriggerNodes = () => {
+    }
+    getTriggerNodes() {
         return Array.from(this.triggerRefs)
             .map((ref) => ref.current)
             .filter((node) => Boolean(node));
-    };
-    createList(props) {
-        return new NavigationMenuListState(props, this);
-    }
-    createIndicator(props) {
-        return new NavigationMenuIndicatorState(props, this);
-    }
-    createViewport(props) {
-        return new NavigationMenuViewportState(props, this);
-    }
-    createSubMenu(props) {
-        return new NavigationMenuSubState(props, this.root);
     }
 }
 class NavigationMenuSubState {
@@ -228,34 +216,22 @@ class NavigationMenuSubState {
             ref: this.ref,
         });
     }
-    onTriggerEnter = (itemValue) => {
+    onTriggerEnter(itemValue) {
         this.value.current = itemValue;
-    };
-    onItemSelect = (itemValue) => {
+    }
+    onItemSelect(itemValue) {
         this.value.current = itemValue;
-    };
-    onItemDismiss = () => {
-        this.value.current = "";
-    };
-    registerTrigger = (ref) => {
+    }
+    registerTrigger(ref) {
         this.triggerRefs.add(ref);
-    };
-    deRegisterTrigger = (ref) => {
+    }
+    deRegisterTrigger(ref) {
         this.triggerRefs.delete(ref);
-    };
-    getTriggerNodes = () => {
+    }
+    getTriggerNodes() {
         return Array.from(this.triggerRefs)
             .map((ref) => ref.current)
             .filter((node) => Boolean(node));
-    };
-    createList(props) {
-        return new NavigationMenuListState(props, this);
-    }
-    createIndicator(props) {
-        return new NavigationMenuIndicatorState(props, this);
-    }
-    createViewport(props) {
-        return new NavigationMenuViewportState(props, this);
     }
     props = $derived.by(() => ({
         id: this.id.current,
@@ -292,7 +268,7 @@ class NavigationMenuListState {
             onRefChange: (node) => {
                 this.menu.indicatorTrackNode = node;
             },
-            condition: () => Boolean(this.menu.root.value.current),
+            deps: () => Boolean(this.menu.root.value.current),
         });
     }
     indicatorTrackProps = $derived.by(() => ({
@@ -301,9 +277,6 @@ class NavigationMenuListState {
             position: "relative",
         },
     }));
-    createItem(props) {
-        return new NavigationMenuItemState(props, this, this.menu);
-    }
     props = $derived.by(() => ({
         id: this.#id.current,
         "data-orientation": getDataOrientation(this.menu.orientation.current),
@@ -329,12 +302,14 @@ class NavigationMenuItemState {
         this.value = props.value;
         this.menu = menu;
         this.list = list;
+        this.handleContentEntry = this.handleContentEntry.bind(this);
+        this.handleContentExit = this.handleContentExit.bind(this);
         useRefById({
             id: this.id,
             ref: this.#ref,
         });
     }
-    #handleContentEntry = (side = "start") => {
+    handleContentEntry(side = "start") {
         if (!this.contentNode)
             return;
         this.restoreContentTabOrder();
@@ -347,32 +322,23 @@ class NavigationMenuItemState {
                 candidates[candidates.length - 1]?.focus();
             }
         }
-    };
-    #handleContentExit = () => {
+    }
+    handleContentExit() {
         if (!this.contentNode)
             return;
         const candidates = getTabbableCandidates(this.contentNode);
         if (candidates.length) {
             this.restoreContentTabOrder = removeFromTabOrder(candidates);
         }
-    };
-    onEntryKeydown = this.#handleContentEntry;
-    onFocusProxyEnter = this.#handleContentEntry;
-    onContentFocusOutside = this.#handleContentExit;
-    onRootContentClose = this.#handleContentExit;
+    }
+    onEntryKeydown = this.handleContentEntry;
+    onFocusProxyEnter = this.handleContentEntry;
+    onContentFocusOutside = this.handleContentExit;
+    onRootContentClose = this.handleContentExit;
     props = $derived.by(() => ({
         id: this.id.current,
         [ITEM_ATTR]: "",
     }));
-    createTrigger(props) {
-        return new NavigationMenuTriggerState(props, this);
-    }
-    createContent(props) {
-        return new NavigationMenuContentState(props, this);
-    }
-    createLink(props) {
-        return new NavigationMenuLinkState(props, this);
-    }
 }
 class NavigationMenuTriggerState {
     #id;
@@ -404,7 +370,7 @@ class NavigationMenuTriggerState {
             onRefChange: (node) => {
                 this.item.focusProxyNode = node;
             },
-            condition: () => this.focusProxyMounted.current,
+            deps: () => this.focusProxyMounted.current,
         });
         $effect(() => {
             this.menu.registerTrigger(this.#ref);
@@ -412,12 +378,17 @@ class NavigationMenuTriggerState {
                 this.menu.deRegisterTrigger(this.#ref);
             };
         });
+        this.onpointerenter = this.onpointerenter.bind(this);
+        this.onpointermove = this.onpointermove.bind(this);
+        this.onpointerleave = this.onpointerleave.bind(this);
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
     }
-    #onpointerenter = () => {
+    onpointerenter(_) {
         this.wasClickClose = false;
         this.item.wasEscapeClose = false;
-    };
-    #onpointermove = (e) => {
+    }
+    onpointermove(e) {
         if (e.pointerType !== "mouse")
             return;
         if (this.disabled.current ||
@@ -427,15 +398,15 @@ class NavigationMenuTriggerState {
             return;
         this.menu.onTriggerEnter(this.item.value.current);
         this.hasPointerMoveOpened.current = true;
-    };
-    #onpointerleave = (e) => {
+    }
+    onpointerleave(e) {
         if (e.pointerType !== "mouse" || this.disabled.current)
             return;
         this.menu.onTriggerLeave?.();
         this.hasPointerMoveOpened.current = false;
-    };
-    #onclick = (_) => {
-        // if opened via pointer move, we prevent clicke event
+    }
+    onclick(_) {
+        // if opened via pointer move, we prevent clicked event
         if (this.hasPointerMoveOpened.current)
             return;
         if (this.open) {
@@ -445,8 +416,8 @@ class NavigationMenuTriggerState {
             this.menu.onItemSelect(this.item.value.current);
         }
         this.wasClickClose = this.open;
-    };
-    #onkeydown = (e) => {
+    }
+    onkeydown(e) {
         const verticalEntryKey = this.menu.dir.current === "rtl" ? kbd.ARROW_LEFT : kbd.ARROW_RIGHT;
         const entryKey = {
             horizontal: kbd.ARROW_DOWN,
@@ -458,7 +429,7 @@ class NavigationMenuTriggerState {
             return;
         }
         this.item.list.rovingFocusGroup.handleKeydown(this.#ref.current, e);
-    };
+    }
     props = $derived.by(() => ({
         id: this.#id.current,
         disabled: getDisabled(this.disabled.current),
@@ -467,11 +438,11 @@ class NavigationMenuTriggerState {
         "aria-expanded": getAriaExpanded(this.open),
         "aria-controls": this.item.contentNode ? this.item.contentNode.id : undefined,
         "data-value": this.item.value.current,
-        onpointerenter: this.#onpointerenter,
-        onpointermove: this.#onpointermove,
-        onpointerleave: this.#onpointerleave,
-        onclick: this.#onclick,
-        onkeydown: this.#onkeydown,
+        onpointerenter: this.onpointerenter,
+        onpointermove: this.onpointermove,
+        onpointerleave: this.onpointerleave,
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
         [TRIGGER_ATTR]: "",
     }));
     visuallyHiddenProps = $derived.by(() => ({
@@ -507,8 +478,10 @@ class NavigationMenuLinkState {
             id: this.#id,
             ref: this.#ref,
         });
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
     }
-    #onclick = (e) => {
+    onclick(e) {
         const linkSelectEvent = new CustomEvent("navigationMenu.linkSelect", {
             bubbles: true,
             cancelable: true,
@@ -517,18 +490,18 @@ class NavigationMenuLinkState {
         if (!linkSelectEvent.defaultPrevented && !e.metaKey) {
             //
         }
-    };
-    #onkeydown = (e) => {
+    }
+    onkeydown(e) {
         this.item.list.rovingFocusGroup.handleKeydown(this.#ref.current, e);
-    };
+    }
     props = $derived.by(() => ({
         id: this.#id.current,
         "data-active": this.active.current ? "" : undefined,
         "aria-current": this.active.current ? "page" : undefined,
         "data-list-link": this.content ? undefined : "",
-        onclick: this.#onclick,
+        onclick: this.onclick,
         onfocus: (_) => { },
-        onkeydown: this.content ? undefined : this.#onkeydown,
+        onkeydown: this.content ? undefined : this.onkeydown,
     }));
 }
 class NavigationMenuIndicatorState {
@@ -623,7 +596,7 @@ class NavigationMenuContentState {
             onRefChange: (node) => {
                 this.item.contentNode = node;
             },
-            condition: () => this.isMounted.current,
+            deps: () => this.isMounted.current,
         });
         $effect(() => {
             const items = this.menu.getTriggerNodes();
@@ -661,8 +634,12 @@ class NavigationMenuContentState {
             this.prevMotionAttribute = attribute;
             this.motionAttribute = attribute;
         });
+        this.onFocusOutside = this.onFocusOutside.bind(this);
+        this.onInteractOutside = this.onInteractOutside.bind(this);
+        this.onEscapeKeydown = this.onEscapeKeydown.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
     }
-    onFocusOutside = (e) => {
+    onFocusOutside(e) {
         this.item.onContentFocusOutside();
         const target = e.target;
         // only dismiss content when focus moves outside the menu
@@ -672,8 +649,8 @@ class NavigationMenuContentState {
         else {
             this.menu.root.handleClose();
         }
-    };
-    onInteractOutside = (e) => {
+    }
+    onInteractOutside(e) {
         if (e.defaultPrevented)
             return;
         const target = e.target;
@@ -682,7 +659,7 @@ class NavigationMenuContentState {
         if (isTrigger || isRootViewport || !this.menu.isRoot) {
             e.preventDefault();
         }
-    };
+    }
     onEscapeKeydown = (e) => {
         this.menu.root.handleClose();
         const target = e.target;
@@ -691,7 +668,7 @@ class NavigationMenuContentState {
         }
         this.item.wasEscapeClose = true;
     };
-    #onkeydown = (e) => {
+    onkeydown(e) {
         const isMetaKey = e.altKey || e.ctrlKey || e.metaKey;
         const isTabKey = e.key === kbd.TAB && !isMetaKey;
         const candidates = getTabbableCandidates(e.currentTarget);
@@ -722,9 +699,6 @@ class NavigationMenuContentState {
             enableIgnoredElement: true,
         });
         newSelectedElement?.focus();
-    };
-    createLink(props) {
-        return new NavigationMenuLinkState(props, this.item, this);
     }
     props = $derived.by(() => ({
         id: this.id.current,
@@ -736,7 +710,7 @@ class NavigationMenuContentState {
         style: {
             pointerEvents: !this.open && this.menu.isRoot ? "none" : undefined,
         },
-        onkeydown: this.#onkeydown,
+        onkeydown: this.onkeydown,
     }));
 }
 class NavigationMenuViewportState {
@@ -757,7 +731,7 @@ class NavigationMenuViewportState {
             onRefChange: (node) => {
                 this.menu.viewportNode = node;
             },
-            condition: () => this.open,
+            deps: () => this.open,
         });
         $effect(() => {
             this.open;
@@ -779,15 +753,17 @@ class NavigationMenuViewportState {
                 };
             }
         });
+        this.onpointerenter = this.onpointerenter.bind(this);
+        this.onpointerleave = this.onpointerleave.bind(this);
     }
-    #onpointerenter = () => {
+    onpointerenter(_) {
         this.menu.onContentEnter?.();
-    };
-    #onpointerleave = (e) => {
+    }
+    onpointerleave(e) {
         if (e.pointerType !== "mouse")
             return;
         this.menu.onContentLeave?.();
-    };
+    }
     props = $derived.by(() => ({
         id: this.id.current,
         "data-state": getDataOpenClosed(this.open),
@@ -801,13 +777,13 @@ class NavigationMenuViewportState {
                 ? `${this.size.height}px`
                 : undefined,
         },
-        onpointerenter: this.#onpointerenter,
-        onpointerleave: this.#onpointerleave,
+        onpointerenter: this.onpointerenter,
+        onpointerleave: this.onpointerleave,
     }));
 }
 export function useNavigationMenuRoot(props) {
     const rootState = new NavigationMenuRootState(props);
-    const menuState = rootState.createMenu({
+    const menuState = new NavigationMenuMenuState({
         rootNavigationId: rootState.id,
         dir: rootState.dir,
         orientation: rootState.orientation,
@@ -820,43 +796,35 @@ export function useNavigationMenuRoot(props) {
         onContentLeave: rootState.onContentLeave,
         onTriggerLeave: rootState.onTriggerLeave,
         previousValue: rootState.previousValue,
-    });
-    setNavigationMenuMenuContext(menuState);
-    return setNavigationMenuRootContext(rootState);
-}
-export function useNavigationMenuSub(props) {
-    const parentMenu = getNavigationMenuMenuContext();
-    if (parentMenu instanceof NavigationMenuMenuState) {
-        return setNavigationMenuMenuContext(parentMenu.createSubMenu(props));
-    }
-    throw new Error("useNavigationMenuSub must be used within a NavigationMenuMenu");
+    }, rootState);
+    NavigationMenuMenuContext.set(menuState);
+    return NavigationMenuRootContext.set(rootState);
 }
 export function useNavigationMenuList(props) {
-    const menuState = getNavigationMenuMenuContext();
-    return setNavigationMenuListContext(menuState.createList(props));
+    return NavigationMenuListContext.set(new NavigationMenuListState(props, NavigationMenuMenuContext.get()));
 }
 export function useNavigationMenuItem(props) {
-    const listState = getNavigationMenuListContext();
-    return setNavigationMenuItemContext(listState.createItem(props));
+    const listState = NavigationMenuListContext.get();
+    return NavigationMenuItemContext.set(new NavigationMenuItemState(props, listState, listState.menu));
 }
 export function useNavigationMenuTrigger(props) {
-    return getNavigationMenuItemContext().createTrigger(props);
+    return new NavigationMenuTriggerState(props, NavigationMenuItemContext.get());
 }
 export function useNavigationMenuContent(props) {
-    return setNavigationMenuContentContext(getNavigationMenuItemContext().createContent(props));
+    return NavigationMenuContentContext.set(new NavigationMenuContentState(props, NavigationMenuItemContext.get()));
 }
 export function useNavigationMenuViewport(props) {
-    return getNavigationMenuMenuContext().createViewport(props);
+    return new NavigationMenuViewportState(props, NavigationMenuMenuContext.get());
 }
 export function useNavigationMenuIndicator(props) {
-    return getNavigationMenuMenuContext().createIndicator(props);
+    return new NavigationMenuIndicatorState(props, NavigationMenuMenuContext.get());
 }
 export function useNavigationMenuLink(props) {
-    const content = getNavigationMenuContentContext(null);
+    const content = NavigationMenuContentContext.getOr(null);
     if (content) {
-        return content.createLink(props);
+        return new NavigationMenuLinkState(props, content.item, content);
     }
-    return getNavigationMenuItemContext().createLink(props);
+    return new NavigationMenuLinkState(props, NavigationMenuItemContext.get());
 }
 /// Utils
 function focusFirst(candidates) {