"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
