@wordpress/components/build/menu/popover.js

UI components for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Popover = void 0;
var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
var _element = require("@wordpress/element");
var Styled = _interopRequireWildcard(require("./styles"));
var _context = require("./context");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const Popover = exports.Popover = (0, _element.forwardRef)(function Popover({
  gutter,
  children,
  shift,
  modal = true,
  ...otherProps
}, ref) {
  const menuContext = (0, _element.useContext)(_context.Context);

  // Extract the side from the applied placement — useful for animations.
  // Using `currentPlacement` instead of `placement` to make sure that we
  // use the final computed placement (including "flips" etc).
  const appliedPlacementSide = Ariakit.useStoreState(menuContext?.store, 'currentPlacement')?.split('-')[0];
  const hideOnEscape = (0, _element.useCallback)(event => {
    // Pressing Escape can cause unexpected consequences (ie. exiting
    // full screen mode on MacOs, close parent modals...).
    event.preventDefault();
    // Returning `true` causes the menu to hide.
    return true;
  }, []);
  const computedDirection = Ariakit.useStoreState(menuContext?.store, 'rtl') ? 'rtl' : 'ltr';
  const wrapperProps = (0, _element.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__*/(0, _jsxRuntime.jsx)(Ariakit.Menu, {
    ...otherProps,
    ref: ref,
    modal: modal,
    store: menuContext.store
    // Root menu has an 8px distance from its trigger,
    // otherwise 0 (which causes the submenu to slightly overlap)
    ,
    gutter: gutter !== null && gutter !== void 0 ? gutter : menuContext.store.parent ? 0 : 8
    // Align nested menu by the same (but opposite) amount
    // as the menu container's padding.
    ,
    shift: shift !== null && shift !== void 0 ? shift : menuContext.store.parent ? -4 : 0,
    hideOnHoverOutside: false,
    "data-side": appliedPlacementSide,
    wrapperProps: wrapperProps,
    hideOnEscape: hideOnEscape,
    unmountOnHide: true,
    render: renderProps =>
    /*#__PURE__*/
    // 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.
    (0, _jsxRuntime.jsx)(Styled.PopoverOuterWrapper, {
      variant: menuContext.variant,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Styled.PopoverInnerWrapper, {
        ...renderProps
      })
    }),
    children: children
  });
});
//# sourceMappingURL=popover.js.map