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

UI components for WordPress.

/**
 * External dependencies
 */
import * as Ariakit from '@ariakit/react';

/**
 * WordPress dependencies
 */
import { useContext, useMemo, forwardRef, useCallback } from '@wordpress/element';

/**
 * Internal dependencies
 */

import * as Styled from './styles';
import { Context } from './context';
import { jsx as _jsx } from "react/jsx-runtime";
export const Popover = forwardRef(function Popover({
  gutter,
  children,
  shift,
  modal = true,
  ...otherProps
}, ref) {
  const menuContext = useContext(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 = 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 = 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: 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.
    _jsx(Styled.PopoverOuterWrapper, {
      variant: menuContext.variant,
      children: /*#__PURE__*/_jsx(Styled.PopoverInnerWrapper, {
        ...renderProps
      })
    }),
    children: children
  });
});
//# sourceMappingURL=popover.js.map