@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

package/lib/cjs/components/PopoverContainer/PopoverContainer.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.PopoverWrapper = exports.PopoverArrow = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _overlays = require("@react-aria/overlays");
+
+var _utils = require("@react-aria/utils");
+
+var _hooks = require("../../hooks");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "placement", "arrowProps", "arrowCrossOffset", "onClose", "isNotClosedOnBlur", "hasNoArrow", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction"],
+    _excluded2 = ["children", "className", "placement", "arrowProps", "arrowCrossOffset", "isOpen", "hasNoArrow", "isNotClosedOnBlur", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction", "sx"],
+    _excluded3 = ["arrowCrossOffset", "sx", "direction"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * PopoverContainer component used for popover on SelectField, ComboBox & PopoverMenu.
+*/
+var PopoverContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+      placement = props.placement,
+      arrowProps = props.arrowProps,
+      arrowCrossOffset = props.arrowCrossOffset,
+      onClose = props.onClose,
+      isNotClosedOnBlur = props.isNotClosedOnBlur,
+      hasNoArrow = props.hasNoArrow,
+      isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
+      isNonModal = props.isNonModal,
+      isDismissable = props.isDismissable,
+      width = props.width,
+      direction = props.direction,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return (0, _react2.jsx)(_overlays.OverlayContainer, null, (0, _react2.jsx)(PopoverWrapper, (0, _extends2["default"])({
+    ref: ref,
+    placement: placement,
+    arrowProps: arrowProps,
+    onClose: onClose,
+    isNotClosedOnBlur: isNotClosedOnBlur,
+    isKeyboardDismissDisabled: isKeyboardDismissDisabled,
+    hasNoArrow: hasNoArrow,
+    isNonModal: isNonModal,
+    isDismissable: isDismissable,
+    arrowCrossOffset: arrowCrossOffset,
+    width: width,
+    direction: direction
+  }, others), children));
+});
+PopoverContainer.propTypes = {
+  placement: _propTypes["default"].string,
+  arrowProps: _propTypes["default"].shape({}),
+  onClose: _propTypes["default"].func,
+  isNotClosedOnBlur: _propTypes["default"].bool,
+  hasNoArrow: _propTypes["default"].bool,
+  isKeyboardDismissDisabled: _propTypes["default"].bool,
+  isNonModal: _propTypes["default"].bool,
+  isDismissable: _propTypes["default"].bool,
+  width: _propTypes["default"].string,
+  arrowCrossOffset: _propTypes["default"].string,
+  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left'])
+};
+var PopoverWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+      className = props.className,
+      placement = props.placement,
+      arrowProps = props.arrowProps,
+      arrowCrossOffset = props.arrowCrossOffset,
+      isOpen = props.isOpen,
+      hasNoArrow = props.hasNoArrow,
+      isNotClosedOnBlur = props.isNotClosedOnBlur,
+      isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
+      isNonModal = props.isNonModal,
+      isDismissable = props.isDismissable,
+      width = props.width,
+      direction = props.direction,
+      sx = props.sx,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+  var popoverRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return popoverRef.current;
+  });
+
+  var _useOverlay = (0, _overlays.useOverlay)(_objectSpread(_objectSpread({}, props), {}, {
+    isDismissable: isDismissable && isOpen
+  }), popoverRef),
+      overlayProps = _useOverlay.overlayProps;
+
+  var _useModal = (0, _overlays.useModal)({
+    isDisabled: isNonModal
+  }),
+      modalProps = _useModal.modalProps;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isOpen: isOpen
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(_react["default"].Fragment, null, isOpen && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _utils.mergeProps)(others, overlayProps, modalProps), {
+    variant: "popoverMenu.container",
+    ref: popoverRef,
+    className: classNames,
+    role: "presentation",
+    "data-popover-placement": placement,
+    "data-testid": "popover-container",
+    sx: _objectSpread(_objectSpread({}, sx), {}, {
+      width: width
+    })
+  }), children, hasNoArrow ? null : (0, _react2.jsx)(PopoverArrow, (0, _extends2["default"])({}, arrowProps, {
+    arrowCrossOffset: arrowCrossOffset,
+    direction: direction
+  }))));
+});
+exports.PopoverWrapper = PopoverWrapper;
+PopoverWrapper.propTypes = {
+  placement: _propTypes["default"].string,
+  arrowProps: _propTypes["default"].shape({}),
+  isOpen: _propTypes["default"].bool,
+  hasNoArrow: _propTypes["default"].bool,
+  isNotClosedOnBlur: _propTypes["default"].bool,
+  isKeyboardDismissDisabled: _propTypes["default"].bool,
+  isNonModal: _propTypes["default"].bool,
+  isDismissable: _propTypes["default"].bool,
+  width: _propTypes["default"].string,
+  arrowCrossOffset: _propTypes["default"].string,
+  sx: _propTypes["default"].shape({}),
+  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left'])
+};
+PopoverWrapper.defaultProps = {
+  placement: 'bottom'
+};
+
+var PopoverArrow = function PopoverArrow(props) {
+  var arrowCrossOffset = props.arrowCrossOffset,
+      sx = props.sx,
+      direction = props.direction,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded3);
+  /* istanbul ignore next */
+
+  var calculateOffset = function calculateOffset() {
+    switch (true) {
+      case direction === 'top':
+      case direction === 'bottom':
+        return {
+          '&:before': {
+            left: "calc(50% - ".concat(arrowCrossOffset, ") !important")
+          }
+        };
+
+      case direction === 'left':
+      case direction === 'right':
+        return {
+          '&:before': {
+            top: "calc(50% - ".concat(arrowCrossOffset, ") !important")
+          }
+        };
+
+      default:
+        return {};
+    }
+  };
+
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    variant: "popoverMenu.arrow",
+    "data-popover-arrow": "arrow",
+    "data-testid": "popover-arrow"
+  }, others, {
+    sx: _objectSpread(_objectSpread({}, arrowCrossOffset && calculateOffset()), sx)
+  }));
+};
+
+exports.PopoverArrow = PopoverArrow;
+PopoverArrow.propTypes = {
+  width: _propTypes["default"].string,
+  arrowCrossOffset: _propTypes["default"].string,
+  sx: _propTypes["default"].shape({}),
+  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left'])
+};
+var _default = PopoverContainer;
+exports["default"] = _default;

package/lib/cjs/components/PopoverContainer/PopoverContainer.test.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _index = require("../../index");
+
+var _PopoverContainer = _interopRequireDefault(require("./PopoverContainer"));
+
+var _react2 = require("@emotion/react");
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_PopoverContainer["default"], props, (0, _react2.jsx)(_index.Box, null, "I am in a popover"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true
+  }, (0, _react2.jsx)(_PopoverContainer["default"], props, (0, _react2.jsx)(_index.Box, null, "I am in a popover"))));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('should render a popover with an arrow by default', function () {
+  getComponent({
+    isOpen: true
+  });
+
+  var arrow = _testWrapper.screen.queryByTestId('popover-arrow');
+
+  expect(arrow).toBeInTheDocument();
+});
+test('should render a popover with no arrow', function () {
+  getComponent({
+    isOpen: true,
+    hasNoArrow: true
+  });
+
+  var arrow = _testWrapper.screen.queryByTestId('popover-arrow');
+
+  expect(arrow).not.toBeInTheDocument();
+});
+test('popover will not open if wrapped in an overlayPanel', function () {
+  getComponentInOverlayPanel({
+    popoverProps: {
+      'data-test-id': 'popover-test'
+    }
+  });
+  expect(_testWrapper.screen.queryByTestId('popover-test')).not.toBeInTheDocument();
+});

package/lib/cjs/components/PopoverContainer/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _context;
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _exportNames = {};
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _PopoverContainer["default"];
+  }
+});
+
+var _PopoverContainer = _interopRequireWildcard(require("./PopoverContainer"));
+
+_forEachInstanceProperty(_context = _Object$keys(_PopoverContainer)).call(_context, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PopoverContainer[key]) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _PopoverContainer[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/cjs/components/PopoverMenu/PopoverMenu.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _overlays = require("@react-aria/overlays");
+
+var _focus = require("@react-aria/focus");
+
+var _interactions = require("@react-aria/interactions");
+
+var _menu = require("@react-aria/menu");
+
+var _menu2 = require("@react-stately/menu");
+
+var _PopoverContainer = _interopRequireDefault(require("../PopoverContainer"));
+
+var _MenuContext = require("../../context/MenuContext");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * The PopoverMenu serves as a wrapper around a Menu and its associated trigger, linking the Menu's
+ * open state with the trigger's press state and providing necessary overlay context.
+ *
+ * Primarily utilizes [useMenuTrigger](https://react-spectrum.adobe.com/react-aria/useMenuTrigger.html) from React Aria and [useMenuTriggerState](https://react-spectrum.adobe.com/react-stately/useMenuTriggerState.html) from React Stately.
+ */
+var PopoverMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _context;
+
+  var menuPopoverRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)();
+  var menuRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return menuPopoverRef.current;
+  });
+  var children = props.children,
+      align = props.align,
+      direction = props.direction,
+      isDefaultOpen = props.isDefaultOpen,
+      isNotFlippable = props.isNotFlippable,
+      isNotClosedOnSelect = props.isNotClosedOnSelect,
+      hasNoArrow = props.hasNoArrow,
+      isContainFocus = props.isContainFocus;
+
+  var _React$Children$toArr = _react["default"].Children.toArray(children),
+      _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
+      menuTrigger = _React$Children$toArr2[0],
+      menu = _React$Children$toArr2[1];
+
+  var state = (0, _menu2.useMenuTriggerState)(_objectSpread(_objectSpread({}, props), {}, {
+    defaultOpen: isDefaultOpen,
+    closeOnSelect: !isNotClosedOnSelect,
+    shouldFlip: !isNotFlippable
+  }));
+
+  var _useMenuTrigger = (0, _menu.useMenuTrigger)({}, state, triggerRef),
+      menuTriggerProps = _useMenuTrigger.menuTriggerProps,
+      menuProps = _useMenuTrigger.menuProps;
+
+  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+    targetRef: triggerRef,
+    overlayRef: menuPopoverRef,
+    scrollRef: menuRef,
+    offset: 15,
+    placement: (0, _concat["default"])(_context = "".concat(direction, " ")).call(_context, align),
+    // Our API preference is for default false so we invert this since it should be default true
+    shouldFlip: !isNotFlippable,
+    isOpen: state.isOpen,
+    onClose: state.close,
+    shouldUpdatePosition: true
+  }),
+      positionProps = _useOverlayPosition.overlayProps,
+      placement = _useOverlayPosition.placement;
+
+  var menuContext = _objectSpread(_objectSpread({}, menuProps), {}, {
+    ref: menuRef,
+    onClose: state.close,
+    // Our API preference is for default false so we invert this since it should be default true
+    closeOnSelect: !isNotClosedOnSelect,
+    autoFocus: state.focusStrategy || true
+  });
+
+  var contents = (0, _react2.jsx)(_focus.FocusScope, {
+    restoreFocus: true,
+    contain: isContainFocus
+  }, (0, _react2.jsx)(_overlays.DismissButton, {
+    onDismiss: state.close
+  }), menu, (0, _react2.jsx)(_overlays.DismissButton, {
+    onDismiss: state.close
+  }));
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_interactions.PressResponder, (0, _extends2["default"])({}, menuTriggerProps, {
+    ref: triggerRef,
+    isPressed: state.isOpen
+  }), menuTrigger), (0, _react2.jsx)(_MenuContext.MenuContext.Provider, {
+    value: menuContext
+  }, (0, _react2.jsx)(_PopoverContainer["default"], (0, _extends2["default"])({
+    isOpen: state.isOpen,
+    ref: menuPopoverRef,
+    placement: placement,
+    onClose: state.close,
+    hasNoArrow: hasNoArrow,
+    isDismissable: true,
+    isNonModal: true
+  }, positionProps, menuProps), contents)));
+});
+PopoverMenu.propTypes = {
+  /** Alignment of the popover menu relative to the trigger. */
+  align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
+
+  /** Where the popover menu opens relative to its trigger. */
+  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']),
+
+  /** Whether the overlay is open by default (controlled). */
+  isOpen: _propTypes["default"].bool,
+
+  /** Whether the overlay is open by default (uncontrolled). */
+  isDefaultOpen: _propTypes["default"].bool,
+
+  /** Whether the popover is prevented from closing when a selection is made. */
+  isNotClosedOnSelect: _propTypes["default"].bool,
+
+  /**
+   * Whether the popover is prevented from flipping directions when insufficient space is
+   * available for the given `direction` placement.
+   */
+  isNotFlippable: _propTypes["default"].bool,
+
+  /** Whether the PopoverMenu hides the arrow. */
+  hasNoArrow: _propTypes["default"].bool,
+
+  /** Whether the PopoverMenu contains focus inside the scope. */
+  isContainFocus: _propTypes["default"].bool,
+
+  /**
+   * Handler that is called when the overlay's open state changes.
+   *
+   * `(isOpen: boolean) => void`
+   */
+  onOpenChange: _propTypes["default"].func
+};
+PopoverMenu.defaultProps = {
+  align: 'middle',
+  direction: 'bottom',
+  isNotClosedOnSelect: false,
+  isNotFlippable: false,
+  hasNoArrow: true
+};
+PopoverMenu.displayName = 'PopoverMenu';
+var _default = PopoverMenu;
+exports["default"] = _default;