// packages/components/src/menu/popover.tsx
import * as Ariakit from "@ariakit/react";
import { useContext, useMemo, forwardRef, useCallback } from "@wordpress/element";
import * as Styled from "./styles.js";
import { Context } from "./context.js";
import { jsx as _jsx } from "react/jsx-runtime";
var Popover = forwardRef(function Popover2({
  gutter,
  children,
  shift,
  modal = true,
  ...otherProps
}, ref) {
  const menuContext = useContext(Context);
  const appliedPlacementSide = Ariakit.useStoreState(menuContext?.store, "currentPlacement")?.split("-")[0];
  const hideOnEscape = useCallback((event) => {
    event.preventDefault();
    return true;
  }, []);
  const computedDirection = Ariakit.useStoreState(menuContext?.store, "rtl") ? "rtl" : "ltr";
  const wrapperProps = useMemo(() => ({
    dir: computedDirection,
    style: {
      direction: computedDirection
    }
  }), [computedDirection]);
  if (!menuContext?.store) {
    throw new Error("Menu.Popover can only be rendered inside a Menu component");
  }
  return /* @__PURE__ */ _jsx(Ariakit.Menu, {
    ...otherProps,
    ref,
    modal,
    store: menuContext.store,
    gutter: gutter !== null && gutter !== void 0 ? gutter : menuContext.store.parent ? 0 : 8,
    shift: shift !== null && shift !== void 0 ? shift : menuContext.store.parent ? -4 : 0,
    hideOnHoverOutside: false,
    "data-side": appliedPlacementSide,
    wrapperProps,
    hideOnEscape,
    unmountOnHide: true,
    render: (renderProps) => (
      // Two wrappers are needed for the entry animation, where the menu
      // container scales with a different factor than its contents.
      // The {...renderProps} are passed to the inner wrapper, so that the
      // menu element is the direct parent of the menu item elements.
      /* @__PURE__ */ _jsx(Styled.PopoverOuterWrapper, {
        variant: menuContext.variant,
        children: /* @__PURE__ */ _jsx(Styled.PopoverInnerWrapper, {
          ...renderProps
        })
      })
    ),
    children
  });
});
export {
  Popover
};
//# sourceMappingURL=popover.js.map
