"use client";
import * as React from "react";
import { useRenderElement } from "../../utils/useRenderElement.js";
import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.js";
import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
import { useBaseUiId } from "../../utils/useBaseUiId.js";
import { useNavigationMenuPositionerContext } from "../positioner/NavigationMenuPositionerContext.js";
import { useDirection } from "../../direction-provider/DirectionContext.js";
import { popupStateMapping } from "../../utils/popupStateMapping.js";
const stateAttributesMapping = {
  ...popupStateMapping,
  ...transitionStatusMapping
};
const NavigationMenuPopup = /* @__PURE__ */ React.forwardRef(function NavigationMenuPopup2(componentProps, forwardedRef) {
  const {
    className,
    render,
    id: idProp,
    ...elementProps
  } = componentProps;
  const {
    open,
    transitionStatus,
    setPopupElement
  } = useNavigationMenuRootContext();
  const positioning = useNavigationMenuPositionerContext();
  const direction = useDirection();
  const id = useBaseUiId(idProp);
  const state = React.useMemo(() => ({
    open,
    transitionStatus,
    side: positioning.side,
    align: positioning.align,
    anchorHidden: positioning.anchorHidden
  }), [open, transitionStatus, positioning.side, positioning.align, positioning.anchorHidden]);
  let isOriginSide = positioning.side === "top";
  let isPhysicalLeft = positioning.side === "left";
  if (direction === "rtl") {
    isOriginSide = isOriginSide || positioning.side === "inline-end";
    isPhysicalLeft = isPhysicalLeft || positioning.side === "inline-end";
  } else {
    isOriginSide = isOriginSide || positioning.side === "inline-start";
    isPhysicalLeft = isPhysicalLeft || positioning.side === "inline-start";
  }
  const element = useRenderElement("nav", componentProps, {
    state,
    ref: [forwardedRef, setPopupElement],
    props: [{
      id,
      tabIndex: -1,
      style: isOriginSide ? {
        position: "absolute",
        [positioning.side === "top" ? "bottom" : "top"]: "0",
        [isPhysicalLeft ? "right" : "left"]: "0"
      } : {}
    }, elementProps],
    stateAttributesMapping
  });
  return element;
});
if (process.env.NODE_ENV !== "production") NavigationMenuPopup.displayName = "NavigationMenuPopup";
export {
  NavigationMenuPopup
};
//# sourceMappingURL=NavigationMenuPopup.js.map
