"use client";
import * as React from "react";
import { useScrollLock } from "../../../utils/esm/useScrollLock.js";
import { MenubarContext, useMenubarContext } from "./MenubarContext.js";
import { useOpenInteractionType } from "../utils/useOpenInteractionType.js";
import { CompositeRoot } from "../composite/root/CompositeRoot.js";
import { useBaseUiId } from "../utils/useBaseUiId.js";
import { jsx } from "react/jsx-runtime";
import { FloatingTree, useFloatingNodeId, useFloatingTree, FloatingNode } from "../floating-ui-react/components/FloatingTree.js";
const menubarStateAttributesMapping = {
  hasSubmenuOpen(value) {
    return {
      "data-has-submenu-open": value ? "true" : "false"
    };
  }
};
const Menubar = /* @__PURE__ */ React.forwardRef(function Menubar2(props, forwardedRef) {
  const {
    orientation = "horizontal",
    loopFocus = true,
    render,
    className,
    modal = true,
    disabled = false,
    id: idProp,
    ...elementProps
  } = props;
  const [contentElement, setContentElement] = React.useState(null);
  const [hasSubmenuOpen, setHasSubmenuOpen] = React.useState(false);
  const {
    openMethod,
    triggerProps: interactionTypeProps,
    reset: resetOpenInteractionType
  } = useOpenInteractionType(hasSubmenuOpen);
  React.useEffect(() => {
    if (!hasSubmenuOpen) {
      resetOpenInteractionType();
    }
  }, [hasSubmenuOpen, resetOpenInteractionType]);
  useScrollLock(modal && hasSubmenuOpen && openMethod !== "touch", contentElement);
  const id = useBaseUiId(idProp);
  const state = React.useMemo(() => ({
    orientation,
    modal,
    hasSubmenuOpen
  }), [orientation, modal, hasSubmenuOpen]);
  const contentRef = React.useRef(null);
  const allowMouseUpTriggerRef = React.useRef(false);
  const context = React.useMemo(() => ({
    contentElement,
    setContentElement,
    setHasSubmenuOpen,
    hasSubmenuOpen,
    modal,
    disabled,
    orientation,
    allowMouseUpTriggerRef,
    rootId: id
  }), [contentElement, hasSubmenuOpen, modal, disabled, orientation, id]);
  return /* @__PURE__ */ jsx(MenubarContext.Provider, {
    value: context,
    children: /* @__PURE__ */ jsx(FloatingTree, {
      children: /* @__PURE__ */ jsx(MenubarContent, {
        children: /* @__PURE__ */ jsx(CompositeRoot, {
          render,
          className,
          state,
          stateAttributesMapping: menubarStateAttributesMapping,
          refs: [forwardedRef, setContentElement, contentRef],
          props: [{
            role: "menubar",
            id
          }, interactionTypeProps, elementProps],
          orientation,
          loopFocus,
          highlightItemOnHover: hasSubmenuOpen
        })
      })
    })
  });
});
if (process.env.NODE_ENV !== "production") Menubar.displayName = "Menubar";
function MenubarContent(props) {
  const nodeId = useFloatingNodeId();
  const {
    events: menuEvents
  } = useFloatingTree();
  const rootContext = useMenubarContext();
  React.useEffect(() => {
    function onSubmenuOpenChange(details) {
      if (!details.nodeId || details.parentNodeId !== nodeId) {
        return;
      }
      if (details.open) {
        if (!rootContext.hasSubmenuOpen) {
          rootContext.setHasSubmenuOpen(true);
        }
      } else if (details.reason !== "sibling-open" && details.reason !== "list-navigation") {
        rootContext.setHasSubmenuOpen(false);
      }
    }
    menuEvents.on("menuopenchange", onSubmenuOpenChange);
    return () => {
      menuEvents.off("menuopenchange", onSubmenuOpenChange);
    };
  }, [menuEvents, nodeId, rootContext]);
  return /* @__PURE__ */ jsx(FloatingNode, {
    id: nodeId,
    children: props.children
  });
}
export {
  Menubar
};
//# sourceMappingURL=Menubar.js.map
