Stackq/node_modules/bits-ui/dist/bits/navigation-menu/navigation-menu.svelte.js

/**
 * Based on Radix UI's Navigation Menu
 * https://www.radix-ui.com/docs/primitives/components/navigation-menu
 */
import { afterSleep, afterTick, attachRef, DOMContext, getWindow, simpleBox, boxWith, } from "svelte-toolbelt";
import { Context, useDebounce, watch } from "runed";
import { untrack } from "svelte";
import { SvelteMap } from "svelte/reactivity";
import { useId } from "../../shared/index.js";
import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed, } from "../../internal/attrs.js";
import { noop } from "../../internal/noop.js";
import { getTabbableCandidates } from "../../internal/focus.js";
import { kbd } from "../../internal/kbd.js";
import { CustomEventDispatcher } from "../../internal/events.js";
import { useArrowNavigation } from "../../internal/use-arrow-navigation.js";
import { boxAutoReset } from "../../internal/box-auto-reset.svelte.js";
import { isElement } from "../../internal/is.js";
import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
import { SvelteResizeObserver } from "../../internal/svelte-resize-observer.svelte.js";
const navigationMenuAttrs = createBitsAttrs({
    component: "navigation-menu",
    parts: [
        "root",
        "sub",
        "item",
        "list",
        "trigger",
        "content",
        "link",
        "viewport",
        "menu",
        "indicator",
    ],
});
const NavigationMenuProviderContext = new Context("NavigationMenu.Root");
export const NavigationMenuItemContext = new Context("NavigationMenu.Item");
const NavigationMenuListContext = new Context("NavigationMenu.List");
const NavigationMenuContentContext = new Context("NavigationMenu.Content");
const NavigationMenuSubContext = new Context("NavigationMenu.Sub");
class NavigationMenuProviderState {
    static create(opts) {
        return NavigationMenuProviderContext.set(new NavigationMenuProviderState(opts));
    }
    opts;
    indicatorTrackRef = simpleBox(null);
    viewportRef = simpleBox(null);
    viewportContent = new SvelteMap();
    onTriggerEnter;
    onTriggerLeave = noop;
    onContentEnter = noop;
    onContentLeave = noop;
    onItemSelect;
    onItemDismiss;
    activeItem = null;
    prevActiveItem = null;
    constructor(opts) {
        this.opts = opts;
        this.onTriggerEnter = opts.onTriggerEnter;
        this.onTriggerLeave = opts.onTriggerLeave ?? noop;
        this.onContentEnter = opts.onContentEnter ?? noop;
        this.onContentLeave = opts.onContentLeave ?? noop;
        this.onItemDismiss = opts.onItemDismiss;
        this.onItemSelect = opts.onItemSelect;
    }
    setActiveItem = (item) => {
        this.prevActiveItem = this.activeItem;
        this.activeItem = item;
    };
}
export class NavigationMenuRootState {
    static create(opts) {
        return new NavigationMenuRootState(opts);
    }
    opts;
    attachment;
    provider;
    previousValue = simpleBox("");
    isDelaySkipped;
    #derivedDelay = $derived.by(() => {
        const isOpen = this.opts?.value?.current !== "";
        if (isOpen || this.isDelaySkipped.current) {
            // 150 for user to switch trigger or move into content view
            return 100;
        }
        else {
            return this.opts.delayDuration.current;
        }
    });
    constructor(opts) {
        this.opts = opts;
        this.attachment = attachRef(this.opts.ref);
        this.isDelaySkipped = boxAutoReset(false, {
            afterMs: this.opts.skipDelayDuration.current,
            getWindow: () => getWindow(opts.ref.current),
        });
        this.provider = NavigationMenuProviderState.create({
            value: this.opts.value,
            previousValue: this.previousValue,
            dir: this.opts.dir,
            orientation: this.opts.orientation,
            rootNavigationMenuRef: this.opts.ref,
            isRootMenu: true,
            onTriggerEnter: (itemValue, itemState) => {
                this.#onTriggerEnter(itemValue, itemState);
            },
            onTriggerLeave: this.#onTriggerLeave,
            onContentEnter: this.#onContentEnter,
            onContentLeave: this.#onContentLeave,
            onItemSelect: this.#onItemSelect,
            onItemDismiss: this.#onItemDismiss,
        });
    }
    #debouncedFn = useDebounce((val, itemState) => {
        // passing `undefined` meant to reset the debounce timer
        if (typeof val === "string") {
            this.setValue(val, itemState);
        }
    }, () => this.#derivedDelay);
    #onTriggerEnter = (itemValue, itemState) => {
        this.#debouncedFn(itemValue, itemState);
    };
    #onTriggerLeave = () => {
        this.isDelaySkipped.current = false;
        this.#debouncedFn("", null);
    };
    #onContentEnter = () => {
        this.#debouncedFn(undefined, null);
    };
    #onContentLeave = () => {
        if (this.provider.activeItem &&
            this.provider.activeItem.opts.openOnHover.current === false) {
            return;
        }
        this.#debouncedFn("", null);
    };
    #onItemSelect = (itemValue, itemState) => {
        this.setValue(itemValue, itemState);
    };
    #onItemDismiss = () => {
        this.setValue("", null);
    };
    setValue = (newValue, itemState) => {
        this.previousValue.current = this.opts.value.current;
        this.opts.value.current = newValue;
        this.provider.setActiveItem(itemState);
        // When all menus are closed, we want to reset previousValue to prevent
        // weird transitions from old positions when opening fresh
        if (newValue === "") {
            this.previousValue.current = "";
        }
    };
    props = $derived.by(() => ({
        id: this.opts.id.current,
        "data-orientation": this.opts.orientation.current,
        dir: this.opts.dir.current,
        [navigationMenuAttrs.root]: "",
        [navigationMenuAttrs.menu]: "",
        ...this.attachment,
    }));
}
export class NavigationMenuSubState {
    static create(opts) {
        return new NavigationMenuSubState(opts, NavigationMenuProviderContext.get());
    }
    opts;
    context;
    previousValue = simpleBox("");
    subProvider;
    attachment;
    constructor(opts, context) {
        this.opts = opts;
        this.context = context;
        this.attachment = attachRef(this.opts.ref);
        this.subProvider = NavigationMenuProviderState.create({
            isRootMenu: false,
            value: this.opts.value,
            dir: this.context.opts.dir,
            orientation: this.opts.orientation,
            rootNavigationMenuRef: this.opts.ref,
            onTriggerEnter: this.setValue,
            onItemSelect: this.setValue,
            onItemDismiss: () => this.setValue("", null),
            previousValue: this.previousValue,
        });
    }
    setValue = (newValue, itemState) => {
        this.previousValue.current = this.opts.value.current;
        this.opts.value.current = newValue;
        this.subProvider.setActiveItem(itemState);
        // When all menus are closed, we want to reset previousValue to prevent
        // weird transitions from old positions when opening fresh
        if (newValue === "") {
            this.previousValue.current = "";
        }
    };
    props = $derived.by(() => ({
        id: this.opts.id.current,
        "data-orientation": this.opts.orientation.current,
        [navigationMenuAttrs.sub]: "",
        [navigationMenuAttrs.menu]: "",
        ...this.attachment,
    }));
}
export class NavigationMenuListState {
    static create(opts) {
        return NavigationMenuListContext.set(new NavigationMenuListState(opts, NavigationMenuProviderContext.get()));
    }
    wrapperId = simpleBox(useId());
    wrapperRef = simpleBox(null);
    opts;
    context;
    attachment;
    wrapperAttachment = attachRef(this.wrapperRef, (v) => (this.context.indicatorTrackRef.current = v));
    listTriggers = $state.raw([]);
    rovingFocusGroup;
    wrapperMounted = $state(false);
    constructor(opts, context) {
        this.opts = opts;
        this.context = context;
        this.attachment = attachRef(this.opts.ref);
        this.rovingFocusGroup = new RovingFocusGroup({
            rootNode: opts.ref,
            candidateSelector: `${navigationMenuAttrs.selector("trigger")}:not([data-disabled]), ${navigationMenuAttrs.selector("link")}:not([data-disabled])`,
            loop: boxWith(() => false),
            orientation: this.context.opts.orientation,
        });
    }
    registerTrigger(trigger) {
        if (trigger)
            this.listTriggers.push(trigger);
        return () => {
            this.listTriggers = this.listTriggers.filter((t) => t.id !== trigger.id);
        };
    }
    wrapperProps = $derived.by(() => ({
        id: this.wrapperId.current,
        ...this.wrapperAttachment,
    }));
    props = $derived.by(() => ({
        id: this.opts.id.current,
        "data-orientation": this.context.opts.orientation.current,
        [navigationMenuAttrs.list]: "",
        ...this.attachment,
    }));
}
export class NavigationMenuItemState {
    static create(opts) {
        return NavigationMenuItemContext.set(new NavigationMenuItemState(opts, NavigationMenuListContext.get()));
    }
    opts;
    attachment;
    listContext;
    contentNode = $state(null);
    triggerNode = $state(null);
    focusProxyNode = $state(null);
    restoreContentTabOrder = noop;
    wasEscapeClose = false;
    contentId = $derived.by(() => this.contentNode?.id);
    triggerId = $derived.by(() => this.triggerNode?.id);
    contentChildren = simpleBox(undefined);
    contentChild = simpleBox(undefined);
    contentProps = simpleBox({});
    domContext;
    constructor(opts, listContext) {
        this.opts = opts;
        this.listContext = listContext;
        this.domContext = new DOMContext(opts.ref);
        this.attachment = attachRef(this.opts.ref);
    }
    #handleContentEntry = (side = "start") => {
        if (!this.contentNode)
            return;
        this.restoreContentTabOrder();
        const candidates = getTabbableCandidates(this.contentNode);
        if (candidates.length)
            focusFirst(side === "start" ? candidates : candidates.reverse(), () => this.domContext.getActiveElement());
    };
    #handleContentExit = () => {
        if (!this.contentNode)
            return;
        const candidates = getTabbableCandidates(this.contentNode);
        if (candidates.length)
            this.restoreContentTabOrder = removeFromTabOrder(candidates);
    };
    onEntryKeydown = this.#handleContentEntry;
    onFocusProxyEnter = this.#handleContentEntry;
    onRootContentClose = this.#handleContentExit;
    onContentFocusOutside = this.#handleContentExit;
    props = $derived.by(() => ({
        id: this.opts.id.current,
        [navigationMenuAttrs.item]: "",
        ...this.attachment,
    }));
}
export class NavigationMenuTriggerState {
    static create(opts) {
        return new NavigationMenuTriggerState(opts, {
            provider: NavigationMenuProviderContext.get(),
            item: NavigationMenuItemContext.get(),
            list: NavigationMenuListContext.get(),
            sub: NavigationMenuSubContext.getOr(null),
        });
    }
    opts;
    attachment;
    focusProxyId = simpleBox(useId());
    focusProxyRef = simpleBox(null);
    focusProxyAttachment = attachRef(this.focusProxyRef, (v) => (this.itemContext.focusProxyNode = v));
    context;
    itemContext;
    listContext;
    hasPointerMoveOpened = simpleBox(false);
    wasClickClose = false;
    focusProxyMounted = $state(false);
    open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
    constructor(opts, context) {
        this.opts = opts;
        this.attachment = attachRef(this.opts.ref, (v) => (this.itemContext.triggerNode = v));
        this.hasPointerMoveOpened = boxAutoReset(false, {
            afterMs: 300,
            getWindow: () => getWindow(opts.ref.current),
        });
        this.context = context.provider;
        this.itemContext = context.item;
        this.listContext = context.list;
        watch(() => this.opts.ref.current, () => {
            const node = this.opts.ref.current;
            if (!node)
                return;
            return this.listContext.registerTrigger(node);
        });
    }
    onpointerenter = (_) => {
        this.wasClickClose = false;
        this.itemContext.wasEscapeClose = false;
    };
    onpointermove = whenMouse(() => {
        if (this.opts.disabled.current ||
            this.wasClickClose ||
            this.itemContext.wasEscapeClose ||
            this.hasPointerMoveOpened.current ||
            !this.itemContext.opts.openOnHover.current) {
            return;
        }
        this.context.onTriggerEnter(this.itemContext.opts.value.current, this.itemContext);
        this.hasPointerMoveOpened.current = true;
    });
    onpointerleave = whenMouse(() => {
        if (this.opts.disabled.current || !this.itemContext.opts.openOnHover.current)
            return;
        this.context.onTriggerLeave();
        this.hasPointerMoveOpened.current = false;
    });
    onclick = () => {
        // if opened via pointer move, we prevent the click event
        if (this.hasPointerMoveOpened.current)
            return;
        const shouldClose = this.open &&
            (!this.itemContext.opts.openOnHover.current || this.context.opts.isRootMenu);
        if (shouldClose) {
            this.context.onItemSelect("", null);
        }
        else if (!this.open) {
            this.context.onItemSelect(this.itemContext.opts.value.current, this.itemContext);
        }
        this.wasClickClose = shouldClose;
    };
    onkeydown = (e) => {
        const verticalEntryKey = this.context.opts.dir.current === "rtl" ? kbd.ARROW_LEFT : kbd.ARROW_RIGHT;
        const entryKey = { horizontal: kbd.ARROW_DOWN, vertical: verticalEntryKey }[this.context.opts.orientation.current];
        if (this.open && e.key === entryKey) {
            this.itemContext.onEntryKeydown();
            // prevent focus group from handling the event
            e.preventDefault();
            return;
        }
        this.itemContext.listContext.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
    };
    focusProxyOnFocus = (e) => {
        const content = this.itemContext.contentNode;
        const prevFocusedElement = e.relatedTarget;
        const wasTriggerFocused = this.opts.ref.current && prevFocusedElement === this.opts.ref.current;
        const wasFocusFromContent = content?.contains(prevFocusedElement);
        if (wasTriggerFocused || !wasFocusFromContent) {
            this.itemContext.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
        }
    };
    props = $derived.by(() => ({
        id: this.opts.id.current,
        disabled: this.opts.disabled.current,
        "data-disabled": boolToEmptyStrOrUndef(Boolean(this.opts.disabled.current)),
        "data-state": getDataOpenClosed(this.open),
        "data-value": this.itemContext.opts.value.current,
        "aria-expanded": boolToStr(this.open),
        "aria-controls": this.itemContext.contentId,
        [navigationMenuAttrs.trigger]: "",
        onpointermove: this.onpointermove,
        onpointerleave: this.onpointerleave,
        onpointerenter: this.onpointerenter,
        onclick: this.onclick,
        onkeydown: this.onkeydown,
        ...this.attachment,
    }));
    focusProxyProps = $derived.by(() => ({
        id: this.focusProxyId.current,
        tabindex: 0,
        onfocus: this.focusProxyOnFocus,
        ...this.focusProxyAttachment,
    }));
}
const LINK_SELECT_EVENT = new CustomEventDispatcher("bitsLinkSelect", {
    bubbles: true,
    cancelable: true,
});
const ROOT_CONTENT_DISMISS_EVENT = new CustomEventDispatcher("bitsRootContentDismiss", {
    cancelable: true,
    bubbles: true,
});
export class NavigationMenuLinkState {
    static create(opts) {
        return new NavigationMenuLinkState(opts, {
            provider: NavigationMenuProviderContext.get(),
            item: NavigationMenuItemContext.get(),
        });
    }
    opts;
    context;
    attachment;
    isFocused = $state(false);
    constructor(opts, context) {
        this.opts = opts;
        this.context = context;
        this.attachment = attachRef(this.opts.ref);
    }
    onclick = (e) => {
        const currTarget = e.currentTarget;
        LINK_SELECT_EVENT.listen(currTarget, (e) => this.opts.onSelect.current(e), { once: true });
        const linkSelectEvent = LINK_SELECT_EVENT.dispatch(currTarget);
        if (!linkSelectEvent.defaultPrevented && !e.metaKey) {
            ROOT_CONTENT_DISMISS_EVENT.dispatch(currTarget);
        }
    };
    onkeydown = (e) => {
        if (this.context.item.contentNode)
            return;
        this.context.item.listContext.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
    };
    onfocus = (_) => {
        this.isFocused = true;
    };
    onblur = (_) => {
        this.isFocused = false;
    };
    #handlePointerDismiss = () => {
        // only close submenu if this link is not inside the currently open submenu content
        const currentlyOpenValue = this.context.provider.opts.value.current;
        const isInsideOpenSubmenu = this.context.item.opts.value.current === currentlyOpenValue;
        const activeItem = this.context.item.listContext.context.activeItem;
        if (activeItem && !activeItem.opts.openOnHover.current)
            return;
        if (currentlyOpenValue && !isInsideOpenSubmenu) {
            this.context.provider.onItemDismiss();
        }
    };
    onpointerenter = () => {
        this.#handlePointerDismiss();
    };
    onpointermove = whenMouse(() => {
        this.#handlePointerDismiss();
    });
    props = $derived.by(() => ({
        id: this.opts.id.current,
        "data-active": this.opts.active.current ? "" : undefined,
        "aria-current": this.opts.active.current ? "page" : undefined,
        "data-focused": this.isFocused ? "" : undefined,
        onclick: this.onclick,
        onkeydown: this.onkeydown,
        onfocus: this.onfocus,
        onblur: this.onblur,
        onpointerenter: this.onpointerenter,
        onpointermove: this.onpointermove,
        [navigationMenuAttrs.link]: "",
        ...this.attachment,
    }));
}
export class NavigationMenuIndicatorState {
    static create() {
        return new NavigationMenuIndicatorState(NavigationMenuProviderContext.get());
    }
    context;
    isVisible = $derived.by(() => Boolean(this.context.opts.value.current));
    constructor(context) {
        this.context = context;
    }
}
export class NavigationMenuIndicatorImplState {
    static create(opts) {
        return new NavigationMenuIndicatorImplState(opts, {
            provider: NavigationMenuProviderContext.get(),
            list: NavigationMenuListContext.get(),
        });
    }
    opts;
    attachment;
    context;
    listContext;
    position = $state.raw(null);
    isHorizontal = $derived.by(() => this.context.opts.orientation.current === "horizontal");
    isVisible = $derived.by(() => !!this.context.opts.value.current);
    activeTrigger = $derived.by(() => {
        const items = this.listContext.listTriggers;
        const triggerNode = items.find((item) => item.getAttribute("data-value") === this.context.opts.value.current);
        return triggerNode ?? null;
    });
    shouldRender = $derived.by(() => this.position !== null);
    constructor(opts, context) {
        this.opts = opts;
        this.context = context.provider;
        this.listContext = context.list;
        this.attachment = attachRef(this.opts.ref);
        new SvelteResizeObserver(() => this.activeTrigger, this.handlePositionChange);
        new SvelteResizeObserver(() => this.context.indicatorTrackRef.current, this.handlePositionChange);
    }
    handlePositionChange = () => {
        if (!this.activeTrigger)
            return;
        this.position = {
            size: this.isHorizontal
                ? this.activeTrigger.offsetWidth
                : this.activeTrigger.offsetHeight,
            offset: this.isHorizontal
                ? this.activeTrigger.offsetLeft
                : this.activeTrigger.offsetTop,
        };
    };
    props = $derived.by(() => ({
        id: this.opts.id.current,
        "data-state": this.isVisible ? "visible" : "hidden",
        "data-orientation": this.context.opts.orientation.current,
        style: {
            position: "absolute",
            ...(this.isHorizontal
                ? {
                    left: 0,
                    width: `${this.position?.size}px`,
                    transform: `translateX(${this.position?.offset}px)`,
                }
                : {
                    top: 0,
                    height: `${this.position?.size}px`,
                    transform: `translateY(${this.position?.offset}px)`,
                }),
        },
        [navigationMenuAttrs.indicator]: "",
        ...this.attachment,
    }));
}
export class NavigationMenuContentState {
    static create(opts) {
        return NavigationMenuContentContext.set(new NavigationMenuContentState(opts, {
            provider: NavigationMenuProviderContext.get(),
            item: NavigationMenuItemContext.get(),
            list: NavigationMenuListContext.get(),
        }));
    }
    opts;
    context;
    itemContext;
    listContext;
    attachment;
    mounted = $state(false);
    open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
    value = $derived.by(() => this.itemContext.opts.value.current);
    // We persist the last active content value as the viewport may be animating out
    // and we want the content to remain mounted for the lifecycle of the viewport.
    isLastActiveValue = $derived.by(() => {
        if (this.context.viewportRef.current) {
            if (!this.context.opts.value.current && this.context.opts.previousValue.current) {
                return (this.context.opts.previousValue.current === this.itemContext.opts.value.current);
            }
        }
        return false;
    });
    constructor(opts, context) {
        this.opts = opts;
        this.context = context.provider;
        this.itemContext = context.item;
        this.listContext = context.list;
        this.attachment = attachRef(this.opts.ref, (v) => (this.itemContext.contentNode = v));
    }
    onpointerenter = (_) => {
        this.context.onContentEnter();
    };
    onpointerleave = whenMouse(() => {
        if (!this.itemContext.opts.openOnHover.current)
            return;
        this.context.onContentLeave();
    });
    props = $derived.by(() => ({
        id: this.opts.id.current,
        onpointerenter: this.onpointerenter,
        onpointerleave: this.onpointerleave,
        ...this.attachment,
    }));
}
export class NavigationMenuContentImplState {
    static create(opts, itemState) {
        return new NavigationMenuContentImplState(opts, itemState ?? NavigationMenuItemContext.get());
    }
    opts;
    itemContext;
    context;
    listContext;
    attachment;
    prevMotionAttribute = $state(null);
    motionAttribute = $derived.by(() => {
        const items = this.listContext.listTriggers;
        const values = items.map((item) => item.getAttribute("data-value")).filter(Boolean);
        if (this.context.opts.dir.current === "rtl")
            values.reverse();
        const index = values.indexOf(this.context.opts.value.current);
        const prevIndex = values.indexOf(this.context.opts.previousValue.current);
        const isSelected = this.itemContext.opts.value.current === this.context.opts.value.current;
        const wasSelected = prevIndex === values.indexOf(this.itemContext.opts.value.current);
        // When all menus are closed, we want to reset motion state to prevent residual animations
        if (!this.context.opts.value.current && !this.context.opts.previousValue.current) {
            untrack(() => (this.prevMotionAttribute = null));
            return null;
        }
        // We only want to update selected and the last selected content
        // this avoids animations being interrupted outside of that range
        if (!isSelected && !wasSelected)
            return untrack(() => this.prevMotionAttribute);
        const attribute = (() => {
            // Don't provide a direction on the initial open
            if (index !== prevIndex) {
                // If we're moving to this item from another
                if (isSelected && prevIndex !== -1)
                    return index > prevIndex ? "from-end" : "from-start";
                // If we're leaving this item for another
                if (wasSelected && index !== -1)
                    return index > prevIndex ? "to-start" : "to-end";
            }
            // Otherwise we're entering from closed or leaving the list
            // entirely and should not animate in any direction
            return null;
        })();
        untrack(() => (this.prevMotionAttribute = attribute));
        return attribute;
    });
    domContext;
    constructor(opts, itemContext) {
        this.opts = opts;
        this.attachment = attachRef(this.opts.ref);
        this.itemContext = itemContext;
        this.listContext = itemContext.listContext;
        this.context = itemContext.listContext.context;
        this.domContext = new DOMContext(opts.ref);
        watch([
            () => this.itemContext.opts.value.current,
            () => this.itemContext.triggerNode,
            () => this.opts.ref.current,
        ], () => {
            const content = this.opts.ref.current;
            if (!(content && this.context.opts.isRootMenu))
                return;
            const handleClose = () => {
                this.context.onItemDismiss();
                this.itemContext.onRootContentClose();
                if (content.contains(this.domContext.getActiveElement())) {
                    this.itemContext.triggerNode?.focus();
                }
            };
            const removeListener = ROOT_CONTENT_DISMISS_EVENT.listen(content, handleClose);
            return () => {
                removeListener();
            };
        });
    }
    onFocusOutside = (e) => {
        this.itemContext.onContentFocusOutside();
        const target = e.target;
        // only dismiss content when focus moves outside of the menu
        if (this.context.opts.rootNavigationMenuRef.current?.contains(target)) {
            e.preventDefault();
            return;
        }
        this.context.onItemDismiss();
    };
    onInteractOutside = (e) => {
        const target = e.target;
        const isTrigger = this.listContext.listTriggers.some((trigger) => trigger.contains(target));
        const isRootViewport = this.context.opts.isRootMenu && this.context.viewportRef.current?.contains(target);
        if (!this.context.opts.isRootMenu && !isTrigger) {
            this.context.onItemDismiss();
            return;
        }
        if (isTrigger || isRootViewport) {
            e.preventDefault();
            return;
        }
        if (!this.itemContext.opts.openOnHover.current) {
            this.context.onItemSelect("", null);
        }
    };
    onkeydown = (e) => {
        // prevent parent menus handling sub-menu keydown events
        const target = e.target;
        if (!isElement(target))
            return;
        if (target.closest(navigationMenuAttrs.selector("menu")) !==
            this.context.opts.rootNavigationMenuRef.current)
            return;
        const isMetaKey = e.altKey || e.ctrlKey || e.metaKey;
        const isTabKey = e.key === kbd.TAB && !isMetaKey;
        const candidates = getTabbableCandidates(e.currentTarget);
        if (isTabKey) {
            const focusedElement = this.domContext.getActiveElement();
            const index = candidates.findIndex((candidate) => candidate === focusedElement);
            const isMovingBackwards = e.shiftKey;
            const nextCandidates = isMovingBackwards
                ? candidates.slice(0, index).reverse()
                : candidates.slice(index + 1, candidates.length);
            if (focusFirst(nextCandidates, () => this.domContext.getActiveElement())) {
                // prevent browser tab keydown because we've handled focus
                e.preventDefault();
                return;
            }
            else {
                // If we can't focus that means we're at the edges
                // so focus the proxy and let browser handle
                // tab/shift+tab keypress on the proxy instead
                handleProxyFocus(this.itemContext.focusProxyNode);
                return;
            }
        }
        let activeEl = this.domContext.getActiveElement();
        if (this.itemContext.contentNode) {
            const focusedNode = this.itemContext.contentNode.querySelector("[data-focused]");
            if (focusedNode) {
                activeEl = focusedNode;
            }
        }
        if (activeEl === this.itemContext.triggerNode)
            return;
        const newSelectedElement = useArrowNavigation(e, activeEl, undefined, {
            itemsArray: candidates,
            candidateSelector: navigationMenuAttrs.selector("link"),
            loop: false,
            enableIgnoredElement: true,
        });
        newSelectedElement?.focus();
    };
    onEscapeKeydown = (_) => {
        this.context.onItemDismiss();
        this.itemContext.triggerNode?.focus();
        // prevent the dropdown from reopening after the escape key has been pressed
        this.itemContext.wasEscapeClose = true;
    };
    props = $derived.by(() => ({
        id: this.opts.id.current,
        "aria-labelledby": this.itemContext.triggerId,
        "data-motion": this.motionAttribute ?? undefined,
        "data-orientation": this.context.opts.orientation.current,
        "data-state": getDataOpenClosed(this.context.opts.value.current === this.itemContext.opts.value.current),
        onkeydown: this.onkeydown,
        [navigationMenuAttrs.content]: "",
        ...this.attachment,
    }));
}
export class NavigationMenuViewportState {
    static create(opts) {
        return new NavigationMenuViewportState(opts, NavigationMenuProviderContext.get());
    }
    opts;
    context;
    attachment;
    open = $derived.by(() => !!this.context.opts.value.current);
    viewportWidth = $derived.by(() => (this.size ? `${this.size.width}px` : undefined));
    viewportHeight = $derived.by(() => (this.size ? `${this.size.height}px` : undefined));
    activeContentValue = $derived.by(() => this.context.opts.value.current);
    size = $state(null);
    contentNode = $state(null);
    mounted = $state(false);
    constructor(opts, context) {
        this.opts = opts;
        this.context = context;
        this.attachment = attachRef(this.opts.ref, (v) => (this.context.viewportRef.current = v));
        watch([() => this.activeContentValue, () => this.open], () => {
            afterTick(() => {
                const currNode = this.context.viewportRef.current;
                if (!currNode)
                    return;
                const el = currNode.querySelector("[data-state=open]")
                    ?.children?.[0] ?? null;
                this.contentNode = el;
            });
        });
        /**
         * Update viewport size to match the active content node.
         * We prefer offset dimensions over `getBoundingClientRect` as the latter respects CSS transform.
         * For example, if content animates in from `scale(0.5)` the dimensions would be anything
         * from `0.5` to `1` of the intended size.
         */
        new SvelteResizeObserver(() => this.contentNode, () => {
            if (this.contentNode) {
                this.size = {
                    width: this.contentNode.offsetWidth,
                    height: this.contentNode.offsetHeight,
                };
            }
        });
        // reset size when viewport closes to prevent residual size animations
        watch(() => this.mounted, () => {
            if (!this.mounted && this.size) {
                this.size = null;
            }
        });
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        "data-state": getDataOpenClosed(this.open),
        "data-orientation": this.context.opts.orientation.current,
        style: {
            pointerEvents: !this.open && this.context.opts.isRootMenu ? "none" : undefined,
            "--bits-navigation-menu-viewport-width": this.viewportWidth,
            "--bits-navigation-menu-viewport-height": this.viewportHeight,
        },
        [navigationMenuAttrs.viewport]: "",
        onpointerenter: this.context.onContentEnter,
        onpointerleave: this.context.onContentLeave,
        ...this.attachment,
    }));
}
//
function focusFirst(candidates, getActiveElement) {
    const previouslyFocusedElement = getActiveElement();
    return candidates.some((candidate) => {
        // if focus is already where we want to go, we don't want to keep going through the candidates
        if (candidate === previouslyFocusedElement)
            return true;
        candidate.focus();
        return getActiveElement() !== previouslyFocusedElement;
    });
}
function removeFromTabOrder(candidates) {
    candidates.forEach((candidate) => {
        candidate.dataset.tabindex = candidate.getAttribute("tabindex") || "";
        candidate.setAttribute("tabindex", "-1");
    });
    return () => {
        candidates.forEach((candidate) => {
            const prevTabIndex = candidate.dataset.tabindex;
            candidate.setAttribute("tabindex", prevTabIndex);
        });
    };
}
function whenMouse(handler) {
    return (e) => (e.pointerType === "mouse" ? handler(e) : undefined);
}
/**
 *
 * We apply the `aria-hidden` attribute to elements that should not be visible to screen readers
 * under specific circumstances, mostly when in a "modal" context or when they are strictly for
 * utility purposes, like the focus guards.
 *
 * When these elements receive focus before we can remove the aria-hidden attribute, we need to
 * handle the focus in a way that does not cause an error to be logged.
 *
 * This function handles the focus of the guard element first by momentary removing the
 * `aria-hidden` attribute, focusing the guard (which will cause something else to focus), and then
 * restoring the attribute.
 */
function handleProxyFocus(guard, focusOptions) {
    if (!guard)
        return;
    const ariaHidden = guard.getAttribute("aria-hidden");
    guard.removeAttribute("aria-hidden");
    guard.focus(focusOptions);
    afterSleep(0, () => {
        if (ariaHidden === null) {
            guard.setAttribute("aria-hidden", "");
        }
        else {
            guard.setAttribute("aria-hidden", ariaHidden);
        }
    });
}