@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.5

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

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.PopoverArrow = exports.PopoverWrapper = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _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");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+/**
+ * PopoverContainer component used for popover on SelectField, ComboBox, and PopoverMenu.
+*/
+var PopoverContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+      placement = props.placement,
+      arrowProps = props.arrowProps,
+      onClose = props.onClose,
+      isNotClosedOnBlur = props.isNotClosedOnBlur,
+      hasNoArrow = props.hasNoArrow,
+      isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
+      isNonModal = props.isNonModal,
+      isDismissable = props.isDismissable,
+      others = (0, _objectWithoutProperties2["default"])(props, ["children", "placement", "arrowProps", "onClose", "isNotClosedOnBlur", "hasNoArrow", "isKeyboardDismissDisabled", "isNonModal", "isDismissable"]);
+  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
+  }, 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
+};
+var PopoverWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+      className = props.className,
+      placement = props.placement,
+      arrowProps = props.arrowProps,
+      isOpen = props.isOpen,
+      hasNoArrow = props.hasNoArrow,
+      isNotClosedOnBlur = props.isNotClosedOnBlur,
+      isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
+      isNonModal = props.isNonModal,
+      isDismissable = props.isDismissable,
+      others = (0, _objectWithoutProperties2["default"])(props, ["children", "className", "placement", "arrowProps", "isOpen", "hasNoArrow", "isNotClosedOnBlur", "isKeyboardDismissDisabled", "isNonModal", "isDismissable"]);
+  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"
+  }), children, hasNoArrow ? null : (0, _react2.jsx)(PopoverArrow, arrowProps)));
+});
+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
+};
+PopoverWrapper.defaultProps = {
+  placement: 'bottom'
+};
+
+var PopoverArrow = function PopoverArrow(props) {
+  var others = (0, _extends2["default"])({}, props);
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    variant: "popoverMenu.arrow",
+    "data-popover-arrow": "arrow",
+    "data-testid": "popover-arrow"
+  }, others));
+};
+
+exports.PopoverArrow = PopoverArrow;
+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,38 @@
+"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 _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_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;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _PopoverContainer[key];
+    }
+  });
+});

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

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _defineProperty3 = _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 ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(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;
+
+  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
+  }, (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
+  }, 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,
+
+  /**
+   * 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;

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

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.isPressed = exports.DisabledItem = exports.NotClosedOnSelect = exports.NotFlippable = exports.Placement = exports.Controlled = exports.DefaultOpen = exports.Default = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'PopoverMenu',
+  component: _index.PopoverMenu,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    align: {},
+    direction: {},
+    isDefaultOpen: {},
+    isNotClosedOnSelect: {},
+    isNotFlippable: {},
+    isOpen: {
+      onClick: {
+        action: 'clicked'
+      },
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, args, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.Default = Default;
+
+var DefaultOpen = function DefaultOpen() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+      isDefaultOpen: true
+    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.DefaultOpen = DefaultOpen;
+
+var Controlled = function Controlled() {
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+      isOpen: isOpen,
+      onOpenChange: setIsOpen
+    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.Controlled = Controlled;
+
+var Placement = function Placement() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+      direction: "left"
+    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.Placement = Placement;
+
+var NotFlippable = function NotFlippable() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+      direction: "left",
+      isNotFlippable: true
+    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.NotFlippable = NotFlippable;
+
+var NotClosedOnSelect = function NotClosedOnSelect() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+      isNotClosedOnSelect: true
+    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.NotClosedOnSelect = NotClosedOnSelect;
+
+var DisabledItem = function DisabledItem() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction'),
+      disabledKeys: ['duplicate']
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.DisabledItem = DisabledItem;
+
+var isPressed = function isPressed() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction'),
+      disabledKeys: ['duplicate']
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit",
+      isPressed: true
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.isPressed = isPressed;