@neynar/ui 0.4.0 → 1.0.0

package/dist/node_modules/@base-ui/react/esm/navigation-menu/trigger/NavigationMenuTrigger.js

@@ -0,0 +1,397 @@
+"use client";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { isTabbable } from "../../../../../tabbable/dist/index.esm.js";
+import { useStableCallback } from "../../../../utils/esm/useStableCallback.js";
+import { useIsoLayoutEffect } from "../../../../utils/esm/useIsoLayoutEffect.js";
+import { useTimeout } from "../../../../utils/esm/useTimeout.js";
+import { useAnimationFrame } from "../../../../utils/esm/useAnimationFrame.js";
+import { useValueAsRef } from "../../../../utils/esm/useValueAsRef.js";
+import { useNavigationMenuItemContext } from "../item/NavigationMenuItemContext.js";
+import { useNavigationMenuRootContext, useNavigationMenuTreeContext } from "../root/NavigationMenuRootContext.js";
+import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { ownerVisuallyHidden, PATIENT_CLICK_THRESHOLD } from "../../utils/constants.js";
+import { FocusGuard } from "../../utils/FocusGuard.js";
+import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
+import { isOutsideMenuEvent } from "../utils/isOutsideMenuEvent.js";
+import { useAnimationsFinished } from "../../utils/useAnimationsFinished.js";
+import { NavigationMenuPopupCssVars } from "../popup/NavigationMenuPopupCssVars.js";
+import { NavigationMenuPositionerCssVars } from "../positioner/NavigationMenuPositionerCssVars.js";
+import { CompositeItem } from "../../composite/item/CompositeItem.js";
+import { getCssDimensions } from "../../utils/getCssDimensions.js";
+import { NAVIGATION_MENU_TRIGGER_IDENTIFIER } from "../utils/constants.js";
+import { useNavigationMenuDismissContext } from "../list/NavigationMenuDismissContext.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useFloatingTree } from "../../floating-ui-react/components/FloatingTree.js";
+import { useFloatingRootContext } from "../../floating-ui-react/hooks/useFloatingRootContext.js";
+import { useHover } from "../../floating-ui-react/hooks/useHover.js";
+import { safePolygon } from "../../floating-ui-react/safePolygon.js";
+import { useClick } from "../../floating-ui-react/hooks/useClick.js";
+import { useInteractions } from "../../floating-ui-react/hooks/useInteractions.js";
+import { useButton } from "../../use-button/useButton.js";
+import { EMPTY_ARRAY } from "../../../../utils/esm/empty.js";
+import { isOutsideEvent, getPreviousTabbable, getNextTabbable } from "../../floating-ui-react/utils/tabbable.js";
+import { contains } from "../../floating-ui-react/utils/element.js";
+import { focusOut, triggerHover, triggerPress, listNavigation } from "../../utils/reason-parts.js";
+import { stopEvent } from "../../floating-ui-react/utils/event.js";
+const DEFAULT_SIZE = {
+  width: 0,
+  height: 0
+};
+const NavigationMenuTrigger = /* @__PURE__ */ React.forwardRef(function NavigationMenuTrigger2(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    nativeButton = true,
+    disabled,
+    ...elementProps
+  } = componentProps;
+  const {
+    value,
+    setValue,
+    mounted,
+    open,
+    positionerElement,
+    setActivationDirection,
+    setFloatingRootContext,
+    popupElement,
+    viewportElement,
+    rootRef,
+    beforeOutsideRef,
+    afterOutsideRef,
+    afterInsideRef,
+    beforeInsideRef,
+    prevTriggerElementRef,
+    delay,
+    closeDelay,
+    orientation,
+    setViewportInert,
+    nested
+  } = useNavigationMenuRootContext();
+  const {
+    value: itemValue
+  } = useNavigationMenuItemContext();
+  const nodeId = useNavigationMenuTreeContext();
+  const tree = useFloatingTree();
+  const dismissProps = useNavigationMenuDismissContext();
+  const stickIfOpenTimeout = useTimeout();
+  const focusFrame = useAnimationFrame();
+  const sizeFrame1 = useAnimationFrame();
+  const sizeFrame2 = useAnimationFrame();
+  const [triggerElement, setTriggerElement] = React.useState(null);
+  const [stickIfOpen, setStickIfOpen] = React.useState(true);
+  const [pointerType, setPointerType] = React.useState("");
+  const allowFocusRef = React.useRef(false);
+  const prevSizeRef = React.useRef(DEFAULT_SIZE);
+  const animationAbortControllerRef = React.useRef(null);
+  const isActiveItem = open && value === itemValue;
+  const isActiveItemRef = useValueAsRef(isActiveItem);
+  const interactionsEnabled = positionerElement ? true : !value;
+  const runOnceAnimationsFinish = useAnimationsFinished(popupElement);
+  React.useEffect(() => {
+    animationAbortControllerRef.current?.abort();
+  }, [isActiveItem]);
+  function setAutoSizes() {
+    if (!popupElement) {
+      return;
+    }
+    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, "auto");
+    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, "auto");
+  }
+  const handleValueChange = useStableCallback((currentWidth, currentHeight) => {
+    if (!popupElement || !positionerElement) {
+      return;
+    }
+    popupElement.style.removeProperty(NavigationMenuPopupCssVars.popupWidth);
+    popupElement.style.removeProperty(NavigationMenuPopupCssVars.popupHeight);
+    positionerElement.style.removeProperty(NavigationMenuPositionerCssVars.positionerWidth);
+    positionerElement.style.removeProperty(NavigationMenuPositionerCssVars.positionerHeight);
+    const {
+      width,
+      height
+    } = getCssDimensions(popupElement);
+    const measuredWidth = width || prevSizeRef.current.width;
+    const measuredHeight = height || prevSizeRef.current.height;
+    if (currentHeight === 0 || currentWidth === 0) {
+      currentWidth = measuredWidth;
+      currentHeight = measuredHeight;
+    }
+    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${currentWidth}px`);
+    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${currentHeight}px`);
+    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${measuredWidth}px`);
+    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${measuredHeight}px`);
+    sizeFrame1.request(() => {
+      popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${measuredWidth}px`);
+      popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${measuredHeight}px`);
+      sizeFrame2.request(() => {
+        animationAbortControllerRef.current = new AbortController();
+        runOnceAnimationsFinish(setAutoSizes, animationAbortControllerRef.current.signal);
+      });
+    });
+  });
+  React.useEffect(() => {
+    if (!open) {
+      stickIfOpenTimeout.clear();
+      sizeFrame1.cancel();
+      sizeFrame2.cancel();
+    }
+  }, [stickIfOpenTimeout, open, sizeFrame1, sizeFrame2]);
+  React.useEffect(() => {
+    if (!mounted) {
+      prevSizeRef.current = DEFAULT_SIZE;
+    }
+  }, [mounted]);
+  React.useEffect(() => {
+    if (!popupElement || typeof ResizeObserver !== "function") {
+      return void 0;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      prevSizeRef.current = {
+        width: popupElement.offsetWidth,
+        height: popupElement.offsetHeight
+      };
+    });
+    resizeObserver.observe(popupElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [popupElement]);
+  React.useEffect(() => {
+    if (!popupElement || !isActiveItem || typeof MutationObserver !== "function") {
+      return void 0;
+    }
+    const mutationObserver = new MutationObserver(() => {
+      animationAbortControllerRef.current?.abort();
+      handleValueChange(prevSizeRef.current.width, prevSizeRef.current.height);
+    });
+    mutationObserver.observe(popupElement, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [popupElement, positionerElement, isActiveItem, handleValueChange]);
+  React.useEffect(() => {
+    if (isActiveItem && open && popupElement && allowFocusRef.current) {
+      allowFocusRef.current = false;
+      focusFrame.request(() => {
+        beforeOutsideRef.current?.focus();
+      });
+    }
+    return () => {
+      focusFrame.cancel();
+    };
+  }, [beforeOutsideRef, focusFrame, handleValueChange, isActiveItem, open, popupElement]);
+  useIsoLayoutEffect(() => {
+    if (isActiveItemRef.current && open && popupElement) {
+      handleValueChange(0, 0);
+    }
+  }, [isActiveItemRef, open, popupElement, handleValueChange]);
+  function handleOpenChange(nextOpen, eventDetails) {
+    const isHover = eventDetails.reason === triggerHover;
+    if (!interactionsEnabled) {
+      return;
+    }
+    if (pointerType === "touch" && isHover) {
+      return;
+    }
+    if (!nextOpen && value !== itemValue) {
+      return;
+    }
+    function changeState() {
+      if (isHover) {
+        setStickIfOpen(true);
+        stickIfOpenTimeout.clear();
+        stickIfOpenTimeout.start(PATIENT_CLICK_THRESHOLD, () => {
+          setStickIfOpen(false);
+        });
+      }
+      if (nextOpen) {
+        setValue(itemValue, eventDetails);
+      } else {
+        setValue(null, eventDetails);
+        setPointerType("");
+      }
+    }
+    if (isHover) {
+      ReactDOM.flushSync(changeState);
+    } else {
+      changeState();
+    }
+  }
+  const context = useFloatingRootContext({
+    open,
+    onOpenChange: handleOpenChange,
+    elements: {
+      reference: triggerElement,
+      floating: positionerElement || viewportElement
+    }
+  });
+  const hover = useHover(context, {
+    move: false,
+    handleClose: safePolygon({
+      blockPointerEvents: pointerType !== "touch"
+    }),
+    restMs: mounted && positionerElement ? 0 : delay,
+    delay: {
+      close: closeDelay
+    }
+  });
+  const click = useClick(context, {
+    enabled: interactionsEnabled,
+    stickIfOpen,
+    toggle: isActiveItem
+  });
+  useIsoLayoutEffect(() => {
+    if (isActiveItem) {
+      setFloatingRootContext(context);
+      prevTriggerElementRef.current = triggerElement;
+    }
+  }, [isActiveItem, context, setFloatingRootContext, prevTriggerElementRef, triggerElement]);
+  const {
+    getReferenceProps
+  } = useInteractions([hover, click]);
+  function handleActivation(event) {
+    ReactDOM.flushSync(() => {
+      const prevTriggerRect = prevTriggerElementRef.current?.getBoundingClientRect();
+      if (mounted && prevTriggerRect && triggerElement) {
+        const nextTriggerRect = triggerElement.getBoundingClientRect();
+        const isMovingRight = nextTriggerRect.left > prevTriggerRect.left;
+        const isMovingDown = nextTriggerRect.top > prevTriggerRect.top;
+        if (orientation === "horizontal" && nextTriggerRect.left !== prevTriggerRect.left) {
+          setActivationDirection(isMovingRight ? "right" : "left");
+        } else if (orientation === "vertical" && nextTriggerRect.top !== prevTriggerRect.top) {
+          setActivationDirection(isMovingDown ? "down" : "up");
+        }
+      }
+      if (event.type !== "click") {
+        context.context.dataRef.current.openEvent = void 0;
+      }
+      if (pointerType === "touch" && event.type !== "click") {
+        return;
+      }
+      if (value != null) {
+        setValue(itemValue, createChangeEventDetails(event.type === "mouseenter" ? triggerHover : triggerPress, event.nativeEvent));
+      }
+    });
+  }
+  const handleOpenEvent = useStableCallback((event) => {
+    if (!popupElement || !positionerElement) {
+      handleActivation(event);
+      return;
+    }
+    const {
+      width,
+      height
+    } = getCssDimensions(popupElement);
+    handleActivation(event);
+    handleValueChange(width, height);
+  });
+  const state = React.useMemo(() => ({
+    open: isActiveItem
+  }), [isActiveItem]);
+  function handleSetPointerType(event) {
+    setPointerType(event.pointerType);
+  }
+  const defaultProps = {
+    tabIndex: 0,
+    onMouseEnter: handleOpenEvent,
+    onClick: handleOpenEvent,
+    onPointerEnter: handleSetPointerType,
+    onPointerDown: handleSetPointerType,
+    "aria-expanded": isActiveItem,
+    "aria-controls": isActiveItem ? popupElement?.id : void 0,
+    [NAVIGATION_MENU_TRIGGER_IDENTIFIER]: "",
+    onFocus() {
+      if (!isActiveItem) {
+        return;
+      }
+      setViewportInert(false);
+    },
+    onMouseMove() {
+      allowFocusRef.current = false;
+    },
+    onKeyDown(event) {
+      allowFocusRef.current = true;
+      if (nested) {
+        return;
+      }
+      const openHorizontal = orientation === "horizontal" && event.key === "ArrowDown";
+      const openVertical = orientation === "vertical" && event.key === "ArrowRight";
+      if (openHorizontal || openVertical) {
+        setValue(itemValue, createChangeEventDetails(listNavigation, event.nativeEvent));
+        handleOpenEvent(event);
+        stopEvent(event);
+      }
+    },
+    onBlur(event) {
+      if (positionerElement && popupElement && isOutsideMenuEvent({
+        currentTarget: event.currentTarget,
+        relatedTarget: event.relatedTarget
+      }, {
+        popupElement,
+        rootRef,
+        tree,
+        nodeId
+      })) {
+        setValue(null, createChangeEventDetails(focusOut, event.nativeEvent));
+      }
+    }
+  };
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    focusableWhenDisabled: true,
+    native: nativeButton
+  });
+  const referenceElement = positionerElement || viewportElement;
+  return /* @__PURE__ */ jsxs(React.Fragment, {
+    children: [/* @__PURE__ */ jsx(CompositeItem, {
+      tag: "button",
+      render,
+      className,
+      state,
+      stateAttributesMapping: pressableTriggerOpenStateMapping,
+      refs: [forwardedRef, setTriggerElement, buttonRef],
+      props: [getReferenceProps, dismissProps?.reference || EMPTY_ARRAY, defaultProps, elementProps, getButtonProps]
+    }), isActiveItem && /* @__PURE__ */ jsxs(React.Fragment, {
+      children: [/* @__PURE__ */ jsx(FocusGuard, {
+        ref: beforeOutsideRef,
+        onFocus: (event) => {
+          if (referenceElement && isOutsideEvent(event, referenceElement)) {
+            beforeInsideRef.current?.focus();
+          } else {
+            const prevTabbable = getPreviousTabbable(triggerElement);
+            prevTabbable?.focus();
+          }
+        }
+      }), /* @__PURE__ */ jsx("span", {
+        "aria-owns": viewportElement?.id,
+        style: ownerVisuallyHidden
+      }), /* @__PURE__ */ jsx(FocusGuard, {
+        ref: afterOutsideRef,
+        onFocus: (event) => {
+          if (referenceElement && isOutsideEvent(event, referenceElement)) {
+            const elementToFocus = afterInsideRef.current && isTabbable(afterInsideRef.current) ? afterInsideRef.current : triggerElement;
+            elementToFocus?.focus();
+          } else {
+            const nextTabbable = getNextTabbable(triggerElement);
+            nextTabbable?.focus();
+            if (!contains(rootRef.current, nextTabbable)) {
+              setValue(null, createChangeEventDetails(focusOut, event.nativeEvent));
+            }
+          }
+        }
+      })]
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+export {
+  NavigationMenuTrigger
+};
+//# sourceMappingURL=NavigationMenuTrigger.js.map

package/dist/node_modules/@base-ui/react/esm/navigation-menu/trigger/NavigationMenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenuTrigger.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/navigation-menu/trigger/NavigationMenuTrigger.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { isTabbable } from 'tabbable';\nimport { useStableCallback } from '@base-ui/utils/useStableCallback';\nimport { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';\nimport { useTimeout } from '@base-ui/utils/useTimeout';\nimport { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';\nimport { useValueAsRef } from '@base-ui/utils/useValueAsRef';\nimport { safePolygon, useClick, useFloatingRootContext, useFloatingTree, useHover, useInteractions } from \"../../floating-ui-react/index.js\";\nimport { contains, getNextTabbable, getPreviousTabbable, isOutsideEvent, stopEvent } from \"../../floating-ui-react/utils.js\";\nimport { useNavigationMenuItemContext } from \"../item/NavigationMenuItemContext.js\";\nimport { useNavigationMenuRootContext, useNavigationMenuTreeContext } from \"../root/NavigationMenuRootContext.js\";\nimport { createChangeEventDetails } from \"../../utils/createBaseUIEventDetails.js\";\nimport { REASONS } from \"../../utils/reasons.js\";\nimport { EMPTY_ARRAY, ownerVisuallyHidden, PATIENT_CLICK_THRESHOLD } from \"../../utils/constants.js\";\nimport { FocusGuard } from \"../../utils/FocusGuard.js\";\nimport { pressableTriggerOpenStateMapping } from \"../../utils/popupStateMapping.js\";\nimport { isOutsideMenuEvent } from \"../utils/isOutsideMenuEvent.js\";\nimport { useAnimationsFinished } from \"../../utils/useAnimationsFinished.js\";\nimport { NavigationMenuPopupCssVars } from \"../popup/NavigationMenuPopupCssVars.js\";\nimport { NavigationMenuPositionerCssVars } from \"../positioner/NavigationMenuPositionerCssVars.js\";\nimport { CompositeItem } from \"../../composite/item/CompositeItem.js\";\nimport { useButton } from \"../../use-button/index.js\";\nimport { getCssDimensions } from \"../../utils/getCssDimensions.js\";\nimport { NAVIGATION_MENU_TRIGGER_IDENTIFIER } from \"../utils/constants.js\";\nimport { useNavigationMenuDismissContext } from \"../list/NavigationMenuDismissContext.js\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst DEFAULT_SIZE = {\n  width: 0,\n  height: 0\n};\n\n/**\n * Opens the navigation menu popup when hovered or clicked, revealing the\n * associated content.\n * Renders a `<button>` element.\n *\n * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)\n */\nexport const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function NavigationMenuTrigger(componentProps, forwardedRef) {\n  const {\n    className,\n    render,\n    nativeButton = true,\n    disabled,\n    ...elementProps\n  } = componentProps;\n  const {\n    value,\n    setValue,\n    mounted,\n    open,\n    positionerElement,\n    setActivationDirection,\n    setFloatingRootContext,\n    popupElement,\n    viewportElement,\n    rootRef,\n    beforeOutsideRef,\n    afterOutsideRef,\n    afterInsideRef,\n    beforeInsideRef,\n    prevTriggerElementRef,\n    delay,\n    closeDelay,\n    orientation,\n    setViewportInert,\n    nested\n  } = useNavigationMenuRootContext();\n  const {\n    value: itemValue\n  } = useNavigationMenuItemContext();\n  const nodeId = useNavigationMenuTreeContext();\n  const tree = useFloatingTree();\n  const dismissProps = useNavigationMenuDismissContext();\n  const stickIfOpenTimeout = useTimeout();\n  const focusFrame = useAnimationFrame();\n  const sizeFrame1 = useAnimationFrame();\n  const sizeFrame2 = useAnimationFrame();\n  const [triggerElement, setTriggerElement] = React.useState(null);\n  const [stickIfOpen, setStickIfOpen] = React.useState(true);\n  const [pointerType, setPointerType] = React.useState('');\n  const allowFocusRef = React.useRef(false);\n  const prevSizeRef = React.useRef(DEFAULT_SIZE);\n  const animationAbortControllerRef = React.useRef(null);\n  const isActiveItem = open && value === itemValue;\n  const isActiveItemRef = useValueAsRef(isActiveItem);\n  const interactionsEnabled = positionerElement ? true : !value;\n  const runOnceAnimationsFinish = useAnimationsFinished(popupElement);\n  React.useEffect(() => {\n    animationAbortControllerRef.current?.abort();\n  }, [isActiveItem]);\n  function setAutoSizes() {\n    if (!popupElement) {\n      return;\n    }\n    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, 'auto');\n    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, 'auto');\n  }\n  const handleValueChange = useStableCallback((currentWidth, currentHeight) => {\n    if (!popupElement || !positionerElement) {\n      return;\n    }\n    popupElement.style.removeProperty(NavigationMenuPopupCssVars.popupWidth);\n    popupElement.style.removeProperty(NavigationMenuPopupCssVars.popupHeight);\n    positionerElement.style.removeProperty(NavigationMenuPositionerCssVars.positionerWidth);\n    positionerElement.style.removeProperty(NavigationMenuPositionerCssVars.positionerHeight);\n    const {\n      width,\n      height\n    } = getCssDimensions(popupElement);\n    const measuredWidth = width || prevSizeRef.current.width;\n    const measuredHeight = height || prevSizeRef.current.height;\n    if (currentHeight === 0 || currentWidth === 0) {\n      currentWidth = measuredWidth;\n      currentHeight = measuredHeight;\n    }\n    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${currentWidth}px`);\n    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${currentHeight}px`);\n    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${measuredWidth}px`);\n    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${measuredHeight}px`);\n    sizeFrame1.request(() => {\n      popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${measuredWidth}px`);\n      popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${measuredHeight}px`);\n      sizeFrame2.request(() => {\n        animationAbortControllerRef.current = new AbortController();\n        runOnceAnimationsFinish(setAutoSizes, animationAbortControllerRef.current.signal);\n      });\n    });\n  });\n  React.useEffect(() => {\n    if (!open) {\n      stickIfOpenTimeout.clear();\n      sizeFrame1.cancel();\n      sizeFrame2.cancel();\n    }\n  }, [stickIfOpenTimeout, open, sizeFrame1, sizeFrame2]);\n  React.useEffect(() => {\n    if (!mounted) {\n      prevSizeRef.current = DEFAULT_SIZE;\n    }\n  }, [mounted]);\n  React.useEffect(() => {\n    if (!popupElement || typeof ResizeObserver !== 'function') {\n      return undefined;\n    }\n    const resizeObserver = new ResizeObserver(() => {\n      // Using `getCssDimensions` here causes issues due to fractional values.\n      prevSizeRef.current = {\n        width: popupElement.offsetWidth,\n        height: popupElement.offsetHeight\n      };\n    });\n    resizeObserver.observe(popupElement);\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [popupElement]);\n  React.useEffect(() => {\n    if (!popupElement || !isActiveItem || typeof MutationObserver !== 'function') {\n      return undefined;\n    }\n    const mutationObserver = new MutationObserver(() => {\n      animationAbortControllerRef.current?.abort();\n      handleValueChange(prevSizeRef.current.width, prevSizeRef.current.height);\n    });\n    mutationObserver.observe(popupElement, {\n      childList: true,\n      subtree: true,\n      characterData: true\n    });\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, [popupElement, positionerElement, isActiveItem, handleValueChange]);\n  React.useEffect(() => {\n    if (isActiveItem && open && popupElement && allowFocusRef.current) {\n      allowFocusRef.current = false;\n      focusFrame.request(() => {\n        beforeOutsideRef.current?.focus();\n      });\n    }\n    return () => {\n      focusFrame.cancel();\n    };\n  }, [beforeOutsideRef, focusFrame, handleValueChange, isActiveItem, open, popupElement]);\n  useIsoLayoutEffect(() => {\n    if (isActiveItemRef.current && open && popupElement) {\n      handleValueChange(0, 0);\n    }\n  }, [isActiveItemRef, open, popupElement, handleValueChange]);\n  function handleOpenChange(nextOpen, eventDetails) {\n    const isHover = eventDetails.reason === REASONS.triggerHover;\n    if (!interactionsEnabled) {\n      return;\n    }\n    if (pointerType === 'touch' && isHover) {\n      return;\n    }\n    if (!nextOpen && value !== itemValue) {\n      return;\n    }\n    function changeState() {\n      if (isHover) {\n        // Only allow \"patient\" clicks to close the popup if it's open.\n        // If they clicked within 500ms of the popup opening, keep it open.\n        setStickIfOpen(true);\n        stickIfOpenTimeout.clear();\n        stickIfOpenTimeout.start(PATIENT_CLICK_THRESHOLD, () => {\n          setStickIfOpen(false);\n        });\n      }\n      if (nextOpen) {\n        setValue(itemValue, eventDetails);\n      } else {\n        setValue(null, eventDetails);\n        setPointerType('');\n      }\n    }\n    if (isHover) {\n      ReactDOM.flushSync(changeState);\n    } else {\n      changeState();\n    }\n  }\n  const context = useFloatingRootContext({\n    open,\n    onOpenChange: handleOpenChange,\n    elements: {\n      reference: triggerElement,\n      floating: positionerElement || viewportElement\n    }\n  });\n  const hover = useHover(context, {\n    move: false,\n    handleClose: safePolygon({\n      blockPointerEvents: pointerType !== 'touch'\n    }),\n    restMs: mounted && positionerElement ? 0 : delay,\n    delay: {\n      close: closeDelay\n    }\n  });\n  const click = useClick(context, {\n    enabled: interactionsEnabled,\n    stickIfOpen,\n    toggle: isActiveItem\n  });\n  useIsoLayoutEffect(() => {\n    if (isActiveItem) {\n      setFloatingRootContext(context);\n      prevTriggerElementRef.current = triggerElement;\n    }\n  }, [isActiveItem, context, setFloatingRootContext, prevTriggerElementRef, triggerElement]);\n  const {\n    getReferenceProps\n  } = useInteractions([hover, click]);\n  function handleActivation(event) {\n    ReactDOM.flushSync(() => {\n      const prevTriggerRect = prevTriggerElementRef.current?.getBoundingClientRect();\n      if (mounted && prevTriggerRect && triggerElement) {\n        const nextTriggerRect = triggerElement.getBoundingClientRect();\n        const isMovingRight = nextTriggerRect.left > prevTriggerRect.left;\n        const isMovingDown = nextTriggerRect.top > prevTriggerRect.top;\n        if (orientation === 'horizontal' && nextTriggerRect.left !== prevTriggerRect.left) {\n          setActivationDirection(isMovingRight ? 'right' : 'left');\n        } else if (orientation === 'vertical' && nextTriggerRect.top !== prevTriggerRect.top) {\n          setActivationDirection(isMovingDown ? 'down' : 'up');\n        }\n      }\n\n      // Reset the `openEvent` to `undefined` when the active item changes so that a\n      // `click` -> `hover` on new trigger -> `hover` back to old trigger doesn't unexpectedly\n      // cause the popup to remain stuck open when leaving the old trigger.\n      if (event.type !== 'click') {\n        context.context.dataRef.current.openEvent = undefined;\n      }\n      if (pointerType === 'touch' && event.type !== 'click') {\n        return;\n      }\n      if (value != null) {\n        setValue(itemValue, createChangeEventDetails(event.type === 'mouseenter' ? REASONS.triggerHover : REASONS.triggerPress, event.nativeEvent));\n      }\n    });\n  }\n  const handleOpenEvent = useStableCallback(event => {\n    // For nested scenarios without positioner/popup, we can still open the menu\n    // but we can't do size calculations\n    if (!popupElement || !positionerElement) {\n      handleActivation(event);\n      return;\n    }\n    const {\n      width,\n      height\n    } = getCssDimensions(popupElement);\n    handleActivation(event);\n    handleValueChange(width, height);\n  });\n  const state = React.useMemo(() => ({\n    open: isActiveItem\n  }), [isActiveItem]);\n  function handleSetPointerType(event) {\n    setPointerType(event.pointerType);\n  }\n  const defaultProps = {\n    tabIndex: 0,\n    onMouseEnter: handleOpenEvent,\n    onClick: handleOpenEvent,\n    onPointerEnter: handleSetPointerType,\n    onPointerDown: handleSetPointerType,\n    'aria-expanded': isActiveItem,\n    'aria-controls': isActiveItem ? popupElement?.id : undefined,\n    [NAVIGATION_MENU_TRIGGER_IDENTIFIER]: '',\n    onFocus() {\n      if (!isActiveItem) {\n        return;\n      }\n      setViewportInert(false);\n    },\n    onMouseMove() {\n      allowFocusRef.current = false;\n    },\n    onKeyDown(event) {\n      allowFocusRef.current = true;\n\n      // For nested (submenu) triggers, don't intercept arrow keys that are used for\n      // navigation in the parent content. The arrow keys should be handled by the\n      // parent's CompositeRoot for navigating between items.\n      if (nested) {\n        return;\n      }\n      const openHorizontal = orientation === 'horizontal' && event.key === 'ArrowDown';\n      const openVertical = orientation === 'vertical' && event.key === 'ArrowRight';\n      if (openHorizontal || openVertical) {\n        setValue(itemValue, createChangeEventDetails(REASONS.listNavigation, event.nativeEvent));\n        handleOpenEvent(event);\n        stopEvent(event);\n      }\n    },\n    onBlur(event) {\n      if (positionerElement && popupElement && isOutsideMenuEvent({\n        currentTarget: event.currentTarget,\n        relatedTarget: event.relatedTarget\n      }, {\n        popupElement,\n        rootRef,\n        tree,\n        nodeId\n      })) {\n        setValue(null, createChangeEventDetails(REASONS.focusOut, event.nativeEvent));\n      }\n    }\n  };\n  const {\n    getButtonProps,\n    buttonRef\n  } = useButton({\n    disabled,\n    focusableWhenDisabled: true,\n    native: nativeButton\n  });\n  const referenceElement = positionerElement || viewportElement;\n  return /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(CompositeItem, {\n      tag: \"button\",\n      render: render,\n      className: className,\n      state: state,\n      stateAttributesMapping: pressableTriggerOpenStateMapping,\n      refs: [forwardedRef, setTriggerElement, buttonRef],\n      props: [getReferenceProps, dismissProps?.reference || EMPTY_ARRAY, defaultProps, elementProps, getButtonProps]\n    }), isActiveItem && /*#__PURE__*/_jsxs(React.Fragment, {\n      children: [/*#__PURE__*/_jsx(FocusGuard, {\n        ref: beforeOutsideRef,\n        onFocus: event => {\n          if (referenceElement && isOutsideEvent(event, referenceElement)) {\n            beforeInsideRef.current?.focus();\n          } else {\n            const prevTabbable = getPreviousTabbable(triggerElement);\n            prevTabbable?.focus();\n          }\n        }\n      }), /*#__PURE__*/_jsx(\"span\", {\n        \"aria-owns\": viewportElement?.id,\n        style: ownerVisuallyHidden\n      }), /*#__PURE__*/_jsx(FocusGuard, {\n        ref: afterOutsideRef,\n        onFocus: event => {\n          if (referenceElement && isOutsideEvent(event, referenceElement)) {\n            const elementToFocus = afterInsideRef.current && isTabbable(afterInsideRef.current) ? afterInsideRef.current : triggerElement;\n            elementToFocus?.focus();\n          } else {\n            const nextTabbable = getNextTabbable(triggerElement);\n            nextTabbable?.focus();\n            if (!contains(rootRef.current, nextTabbable)) {\n              setValue(null, createChangeEventDetails(REASONS.focusOut, event.nativeEvent));\n            }\n          }\n        }\n      })]\n    })]\n  });\n});\nif (process.env.NODE_ENV !== \"production\") NavigationMenuTrigger.displayName = \"NavigationMenuTrigger\";"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;AAAqB;AACZ;AAET;AASY;AACV;AAAM;AACJ;AACA;AACe;AACf;AACG;AAEL;AAAM;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AAAM;AACG;AAET;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AAA0C;AAE5C;AACE;AACE;AAAA;AAEF;AACA;AAA6E;AAE/E;AACE;AACE;AAAA;AAEF;AACA;AACA;AACA;AACA;AAAM;AACJ;AACA;AAEF;AACA;AACA;AACE;AACA;AAAgB;AAElB;AACA;AACA;AACA;AACA;AACE;AACA;AACA;AACE;AACA;AAAgF;AACjF;AACF;AAEH;AACE;AACE;AACA;AACA;AAAiB;AACnB;AAEF;AACE;AACE;AAAsB;AACxB;AAEF;AACE;AACE;AAAO;AAET;AAEE;AAAsB;AACA;AACC;AAC7B;AAEI;AACA;AACE;AAAyB;AAC3B;AAEF;AACE;AACE;AAAO;AAET;AACE;AACA;AAAuE;AAEzE;AAAuC;AAC1B;AACF;AACM;AAEjB;AACE;AAA2B;AAC7B;AAEF;AACE;AACE;AACA;AACE;AAA+B;AAChC;AAEH;AACE;AAAiB;AACnB;AAEF;AACE;AACE;AAAsB;AACxB;AAEF;AACE;AACA;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAGE;AACA;AACA;AACE;AAAoB;AACrB;AAEH;AACE;AAAgC;AAEhC;AACA;AAAiB;AACnB;AAEF;AACE;AAA8B;AAE9B;AAAW;AACb;AAEF;AAAuC;AACrC;AACc;AACJ;AACG;AACoB;AACrC;AAEE;AAAgC;AACxB;AACmB;AACa;AACrC;AAC0C;AACpC;AACE;AACb;AAEE;AAAgC;AACrB;AACT;AACQ;AAEV;AACE;AACE;AACA;AAAgC;AAClC;AAEF;AAAM;AACJ;AAEF;AACE;AACE;AACA;AACE;AACA;AACA;AACA;AACE;AAAuD;AAEvD;AAAmD;AACrD;AAMF;AACE;AAA4C;AAE9C;AACE;AAAA;AAEF;AACE;AAA0I;AAC5I;AACD;AAEH;AAGE;AACE;AACA;AAAA;AAEF;AAAM;AACJ;AACA;AAEF;AACA;AAA+B;AAEjC;AAAmC;AAC3B;AAER;AACE;AAAgC;AAElC;AAAqB;AACT;AACI;AACL;AACO;AACD;AACE;AACkC;AACb;AAEpC;AACE;AAAA;AAEF;AAAsB;AACxB;AAEE;AAAwB;AAC1B;AAEE;AAKA;AACE;AAAA;AAEF;AACA;AACA;AACE;AACA;AACA;AAAe;AACjB;AACF;AAEE;AAA4D;AACrC;AACA;AACpB;AACD;AACA;AACA;AACA;AAEA;AAA4E;AAC9E;AACF;AAEF;AAAM;AACJ;AACA;AACY;AACZ;AACuB;AACf;AAEV;AACA;AAA0C;AACI;AACrC;AACL;AACA;AACA;AACwB;AACyB;AAC4D;AACxD;AACZ;AAClC;AAEH;AACE;AAA8B;AAE9B;AACA;AAAmB;AACrB;AACF;AAC4B;AACE;AACvB;AACyB;AAC3B;AAEH;AACE;AACA;AAAqB;AAErB;AACA;AACA;AACE;AAA4E;AAC9E;AACF;AACF;AACA;AACF;AAEN;AACA;;;;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/navigation-menu/utils/constants.js

@@ -0,0 +1,5 @@
+const NAVIGATION_MENU_TRIGGER_IDENTIFIER = "data-base-ui-navigation-menu-trigger";
+export {
+  NAVIGATION_MENU_TRIGGER_IDENTIFIER
+};
+//# sourceMappingURL=constants.js.map

package/dist/node_modules/@base-ui/react/esm/navigation-menu/utils/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/navigation-menu/utils/constants.js"],"sourcesContent":["export const OPEN_DELAY = 50;\nexport const CLOSE_DELAY = 50;\nexport const NAVIGATION_MENU_TRIGGER_IDENTIFIER = 'data-base-ui-navigation-menu-trigger';"],"names":[],"mappings":"AAEY,MAAC,qCAAqC;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/navigation-menu/utils/isOutsideMenuEvent.js

@@ -0,0 +1,24 @@
+import { getNodeChildren } from "../../floating-ui-react/utils/nodes.js";
+import { contains } from "../../floating-ui-react/utils/element.js";
+function isOutsideMenuEvent({
+  currentTarget,
+  relatedTarget
+}, params) {
+  const {
+    popupElement,
+    viewportElement,
+    rootRef,
+    tree,
+    nodeId
+  } = params;
+  const nodeChildrenContains = tree ? getNodeChildren(tree.nodesRef.current, nodeId).some((node) => contains(node.context?.elements.floating, relatedTarget)) : [];
+  if (!popupElement) {
+    return !contains(rootRef.current, relatedTarget) && !nodeChildrenContains;
+  }
+  const floatingElement = popupElement || viewportElement;
+  return !contains(floatingElement, currentTarget) && !contains(floatingElement, relatedTarget) && !contains(rootRef.current, relatedTarget) && !nodeChildrenContains && !(contains(floatingElement, relatedTarget) && relatedTarget?.hasAttribute("data-base-ui-focus-guard"));
+}
+export {
+  isOutsideMenuEvent
+};
+//# sourceMappingURL=isOutsideMenuEvent.js.map

package/dist/node_modules/@base-ui/react/esm/navigation-menu/utils/isOutsideMenuEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isOutsideMenuEvent.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/navigation-menu/utils/isOutsideMenuEvent.js"],"sourcesContent":["import { contains, getNodeChildren } from \"../../floating-ui-react/utils.js\";\nexport function isOutsideMenuEvent({\n  currentTarget,\n  relatedTarget\n}, params) {\n  const {\n    popupElement,\n    viewportElement,\n    rootRef,\n    tree,\n    nodeId\n  } = params;\n  const nodeChildrenContains = tree ? getNodeChildren(tree.nodesRef.current, nodeId).some(node => contains(node.context?.elements.floating, relatedTarget)) : [];\n\n  // For nested scenarios without popupElement, we need to be more lenient\n  // and only close if we're definitely outside the root\n  if (!popupElement) {\n    return !contains(rootRef.current, relatedTarget) && !nodeChildrenContains;\n  }\n\n  // Use popupElement as the primary floating element, but fall back to viewportElement if needed\n  const floatingElement = popupElement || viewportElement;\n  return !contains(floatingElement, currentTarget) && !contains(floatingElement, relatedTarget) && !contains(rootRef.current, relatedTarget) && !nodeChildrenContains && !(contains(floatingElement, relatedTarget) && relatedTarget?.hasAttribute('data-base-ui-focus-guard'));\n}"],"names":[],"mappings":";;AACO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAAG,QAAQ;AACT,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAM;AACJ,QAAM,uBAAuB,OAAO,gBAAgB,KAAK,SAAS,SAAS,MAAM,EAAE,KAAK,UAAQ,SAAS,KAAK,SAAS,SAAS,UAAU,aAAa,CAAC,IAAI,CAAA;AAI5J,MAAI,CAAC,cAAc;AACjB,WAAO,CAAC,SAAS,QAAQ,SAAS,aAAa,KAAK,CAAC;AAAA,EACvD;AAGA,QAAM,kBAAkB,gBAAgB;AACxC,SAAO,CAAC,SAAS,iBAAiB,aAAa,KAAK,CAAC,SAAS,iBAAiB,aAAa,KAAK,CAAC,SAAS,QAAQ,SAAS,aAAa,KAAK,CAAC,wBAAwB,EAAE,SAAS,iBAAiB,aAAa,KAAK,eAAe,aAAa,0BAA0B;AAC7Q;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/navigation-menu/utils/setFixedSize.js

@@ -0,0 +1,15 @@
+import { getCssDimensions } from "../../utils/getCssDimensions.js";
+import { NavigationMenuPopupCssVars } from "../popup/NavigationMenuPopupCssVars.js";
+import { NavigationMenuPositionerCssVars } from "../positioner/NavigationMenuPositionerCssVars.js";
+function setFixedSize(element, type) {
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  element.style.setProperty(type === "popup" ? NavigationMenuPopupCssVars.popupWidth : NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
+  element.style.setProperty(type === "popup" ? NavigationMenuPopupCssVars.popupHeight : NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
+}
+export {
+  setFixedSize
+};
+//# sourceMappingURL=setFixedSize.js.map

package/dist/node_modules/@base-ui/react/esm/navigation-menu/utils/setFixedSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setFixedSize.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/navigation-menu/utils/setFixedSize.js"],"sourcesContent":["import { getCssDimensions } from \"../../utils/getCssDimensions.js\";\nimport { NavigationMenuPopupCssVars } from \"../popup/NavigationMenuPopupCssVars.js\";\nimport { NavigationMenuPositionerCssVars } from \"../positioner/NavigationMenuPositionerCssVars.js\";\nexport function setFixedSize(element, type) {\n  const {\n    width,\n    height\n  } = getCssDimensions(element);\n  element.style.setProperty(type === 'popup' ? NavigationMenuPopupCssVars.popupWidth : NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);\n  element.style.setProperty(type === 'popup' ? NavigationMenuPopupCssVars.popupHeight : NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);\n}"],"names":[],"mappings":";;;AAGO,SAAS,aAAa,SAAS,MAAM;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACJ,IAAM,iBAAiB,OAAO;AAC5B,UAAQ,MAAM,YAAY,SAAS,UAAU,2BAA2B,aAAa,gCAAgC,iBAAiB,GAAG,KAAK,IAAI;AAClJ,UAAQ,MAAM,YAAY,SAAS,UAAU,2BAA2B,cAAc,gCAAgC,kBAAkB,GAAG,MAAM,IAAI;AACvJ;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/navigation-menu/viewport/NavigationMenuViewport.js

@@ -0,0 +1,108 @@
+"use client";
+import * as React from "react";
+import { useIsoLayoutEffect } from "../../../../utils/esm/useIsoLayoutEffect.js";
+import { useId } from "../../../../utils/esm/useId.js";
+import { inertValue } from "../../../../utils/esm/inertValue.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.js";
+import { FocusGuard } from "../../utils/FocusGuard.js";
+import { getEmptyRootContext } from "../../floating-ui-react/utils/getEmptyRootContext.js";
+import { useNavigationMenuPositionerContext } from "../positioner/NavigationMenuPositionerContext.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { contains } from "../../floating-ui-react/utils/element.js";
+import { isOutsideEvent, getNextTabbable, getPreviousTabbable } from "../../floating-ui-react/utils/tabbable.js";
+const EMPTY_ROOT_CONTEXT = getEmptyRootContext();
+function Guards({
+  children
+}) {
+  const {
+    beforeInsideRef,
+    beforeOutsideRef,
+    afterInsideRef,
+    afterOutsideRef,
+    positionerElement,
+    viewportElement,
+    floatingRootContext
+  } = useNavigationMenuRootContext();
+  const hasPositioner = Boolean(useNavigationMenuPositionerContext(true));
+  const referenceElement = positionerElement || viewportElement;
+  if (!floatingRootContext && !hasPositioner) {
+    return children;
+  }
+  return /* @__PURE__ */ jsxs(React.Fragment, {
+    children: [/* @__PURE__ */ jsx(FocusGuard, {
+      ref: beforeInsideRef,
+      onFocus: (event) => {
+        if (referenceElement && isOutsideEvent(event, referenceElement)) {
+          getNextTabbable(referenceElement)?.focus();
+        } else {
+          beforeOutsideRef.current?.focus();
+        }
+      }
+    }), children, /* @__PURE__ */ jsx(FocusGuard, {
+      ref: afterInsideRef,
+      onFocus: (event) => {
+        if (referenceElement && isOutsideEvent(event, referenceElement)) {
+          getPreviousTabbable(referenceElement)?.focus();
+        } else {
+          afterOutsideRef.current?.focus();
+        }
+      }
+    })]
+  });
+}
+const NavigationMenuViewport = /* @__PURE__ */ React.forwardRef(function NavigationMenuViewport2(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    children,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const id = useId(idProp);
+  const {
+    setViewportElement,
+    setViewportTargetElement,
+    floatingRootContext,
+    prevTriggerElementRef,
+    viewportInert,
+    setViewportInert
+  } = useNavigationMenuRootContext();
+  const hasPositioner = Boolean(useNavigationMenuPositionerContext(true));
+  const domReference = (floatingRootContext || EMPTY_ROOT_CONTEXT).useState("domReferenceElement");
+  useIsoLayoutEffect(() => {
+    if (domReference) {
+      prevTriggerElementRef.current = domReference;
+    }
+  }, [domReference, prevTriggerElementRef]);
+  const element = useRenderElement("div", componentProps, {
+    ref: [forwardedRef, setViewportElement],
+    props: [{
+      id,
+      onBlur(event) {
+        const relatedTarget = event.relatedTarget;
+        const currentTarget = event.currentTarget;
+        if (relatedTarget && !contains(currentTarget, relatedTarget) && relatedTarget !== domReference) {
+          setViewportInert(true);
+        }
+      },
+      ...!hasPositioner && viewportInert && {
+        inert: inertValue(true)
+      },
+      children: hasPositioner ? children : /* @__PURE__ */ jsx(Guards, {
+        children: /* @__PURE__ */ jsx("div", {
+          ref: setViewportTargetElement,
+          children
+        })
+      })
+    }, elementProps]
+  });
+  return hasPositioner ? /* @__PURE__ */ jsx(Guards, {
+    children: element
+  }) : element;
+});
+if (process.env.NODE_ENV !== "production") NavigationMenuViewport.displayName = "NavigationMenuViewport";
+export {
+  NavigationMenuViewport
+};
+//# sourceMappingURL=NavigationMenuViewport.js.map

package/dist/node_modules/@base-ui/react/esm/navigation-menu/viewport/NavigationMenuViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenuViewport.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/navigation-menu/viewport/NavigationMenuViewport.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';\nimport { useId } from '@base-ui/utils/useId';\nimport { inertValue } from '@base-ui/utils/inertValue';\nimport { useRenderElement } from \"../../utils/useRenderElement.js\";\nimport { useNavigationMenuRootContext } from \"../root/NavigationMenuRootContext.js\";\nimport { FocusGuard } from \"../../utils/FocusGuard.js\";\nimport { getNextTabbable, getPreviousTabbable, isOutsideEvent, contains } from \"../../floating-ui-react/utils.js\";\nimport { getEmptyRootContext } from \"../../floating-ui-react/utils/getEmptyRootContext.js\";\nimport { useNavigationMenuPositionerContext } from \"../positioner/NavigationMenuPositionerContext.js\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst EMPTY_ROOT_CONTEXT = getEmptyRootContext();\nfunction Guards({\n  children\n}) {\n  const {\n    beforeInsideRef,\n    beforeOutsideRef,\n    afterInsideRef,\n    afterOutsideRef,\n    positionerElement,\n    viewportElement,\n    floatingRootContext\n  } = useNavigationMenuRootContext();\n  const hasPositioner = Boolean(useNavigationMenuPositionerContext(true));\n  const referenceElement = positionerElement || viewportElement;\n  if (!floatingRootContext && !hasPositioner) {\n    return children;\n  }\n  return /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(FocusGuard, {\n      ref: beforeInsideRef,\n      onFocus: event => {\n        if (referenceElement && isOutsideEvent(event, referenceElement)) {\n          getNextTabbable(referenceElement)?.focus();\n        } else {\n          beforeOutsideRef.current?.focus();\n        }\n      }\n    }), children, /*#__PURE__*/_jsx(FocusGuard, {\n      ref: afterInsideRef,\n      onFocus: event => {\n        if (referenceElement && isOutsideEvent(event, referenceElement)) {\n          getPreviousTabbable(referenceElement)?.focus();\n        } else {\n          afterOutsideRef.current?.focus();\n        }\n      }\n    })]\n  });\n}\n\n/**\n * The clipping viewport of the navigation menu's current content.\n * Renders a `<div>` element.\n *\n * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)\n */\n\nexport const NavigationMenuViewport = /*#__PURE__*/React.forwardRef(function NavigationMenuViewport(componentProps, forwardedRef) {\n  const {\n    className,\n    render,\n    children,\n    id: idProp,\n    ...elementProps\n  } = componentProps;\n  const id = useId(idProp);\n  const {\n    setViewportElement,\n    setViewportTargetElement,\n    floatingRootContext,\n    prevTriggerElementRef,\n    viewportInert,\n    setViewportInert\n  } = useNavigationMenuRootContext();\n  const hasPositioner = Boolean(useNavigationMenuPositionerContext(true));\n  const domReference = (floatingRootContext || EMPTY_ROOT_CONTEXT).useState('domReferenceElement');\n  useIsoLayoutEffect(() => {\n    if (domReference) {\n      prevTriggerElementRef.current = domReference;\n    }\n  }, [domReference, prevTriggerElementRef]);\n  const element = useRenderElement('div', componentProps, {\n    ref: [forwardedRef, setViewportElement],\n    props: [{\n      id,\n      onBlur(event) {\n        const relatedTarget = event.relatedTarget;\n        const currentTarget = event.currentTarget;\n\n        // If focus is leaving the viewport and not going to the trigger, make it inert\n        // to prevent a focus loop.\n        if (relatedTarget && !contains(currentTarget, relatedTarget) && relatedTarget !== domReference) {\n          setViewportInert(true);\n        }\n      },\n      ...(!hasPositioner && viewportInert && {\n        inert: inertValue(true)\n      }),\n      children: hasPositioner ? children : /*#__PURE__*/_jsx(Guards, {\n        children: /*#__PURE__*/_jsx(\"div\", {\n          ref: setViewportTargetElement,\n          children: children\n        })\n      })\n    }, elementProps]\n  });\n  return hasPositioner ? /*#__PURE__*/_jsx(Guards, {\n    children: element\n  }) : element;\n});\nif (process.env.NODE_ENV !== \"production\") NavigationMenuViewport.displayName = \"NavigationMenuViewport\";"],"names":[],"mappings":";;;;;;;;;;;;;AAaA;AACA;AAAgB;AAEhB;AACE;AAAM;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACA;AACA;AACE;AAAO;AAET;AAA0C;AACC;AAClC;AAEH;AACE;AAAwC;AAExC;AAA+B;AACjC;AACF;AAC0C;AACrC;AAEH;AACE;AAA4C;AAE5C;AAA8B;AAChC;AACF;AACA;AAEN;AASY;AACV;AAAM;AACJ;AACA;AACA;AACI;AACD;AAEL;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACA;AAEF;AACA;AACA;AACE;AACE;AAAgC;AAClC;AAEF;AAAwD;AAChB;AAC9B;AACN;AAEE;AACA;AAIA;AACE;AAAqB;AACvB;AACF;AACuC;AACf;AAC9B;AACqE;AAC1B;AAC5B;AACL;AACD;AACF;AACY;AAEjB;AAAiD;AACrC;AAEd;AACA;;;;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/popover/description/PopoverDescription.js

@@ -0,0 +1,35 @@
+"use client";
+import * as React from "react";
+import { useIsoLayoutEffect } from "../../../../utils/esm/useIsoLayoutEffect.js";
+import { usePopoverRootContext } from "../root/PopoverRootContext.js";
+import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+const PopoverDescription = /* @__PURE__ */ React.forwardRef(function PopoverDescription2(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = usePopoverRootContext();
+  const id = useBaseUiId(elementProps.id);
+  useIsoLayoutEffect(() => {
+    store.set("descriptionElementId", id);
+    return () => {
+      store.set("descriptionElementId", void 0);
+    };
+  }, [store, id]);
+  const element = useRenderElement("p", componentProps, {
+    ref: forwardedRef,
+    props: [{
+      id
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") PopoverDescription.displayName = "PopoverDescription";
+export {
+  PopoverDescription
+};
+//# sourceMappingURL=PopoverDescription.js.map