@primer/components/lib/ActionMenu2.js

Primer react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ActionMenu = void 0;

var _Button = _interopRequireDefault(require("./Button"));

var _react = _interopRequireDefault(require("react"));

var _AnchoredOverlay = require("./AnchoredOverlay");

var _useProvidedStateOrCreate = require("./hooks/useProvidedStateOrCreate");

var _hooks = require("./hooks");

var _Divider = require("./ActionList2/Divider");

var _MenuContext = require("./ActionList2/MenuContext");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const ActionMenuBase = ({
  anchorRef: externalAnchorRef,
  open,
  onOpenChange,
  overlayProps,
  children
}) => {
  const [combinedOpenState, setCombinedOpenState] = (0, _useProvidedStateOrCreate.useProvidedStateOrCreate)(open, onOpenChange, false);
  const anchorRef = (0, _hooks.useProvidedRefOrCreate)(externalAnchorRef);

  const onOpen = _react.default.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);

  const onClose = _react.default.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);

  let renderAnchor = null;
  const contents = [];

  _react.default.Children.map(children, child => {
    if (child.type === MenuButton || child.type === Anchor) {
      renderAnchor = anchorProps => /*#__PURE__*/_react.default.cloneElement(child, anchorProps);
    } else {
      contents.push(child);
    }
  });

  return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
    renderAnchor: renderAnchor,
    anchorRef: anchorRef,
    open: combinedOpenState,
    onOpen: onOpen,
    onClose: onClose,
    overlayProps: overlayProps
  }, /*#__PURE__*/_react.default.createElement(_MenuContext.MenuContext.Provider, {
    value: {
      parent: 'ActionMenu',
      listRole: 'menu',
      itemRole: 'menuitem',
      afterSelect: onClose
    }
  }, contents));
};

ActionMenuBase.displayName = "ActionMenuBase";

const Anchor = /*#__PURE__*/_react.default.forwardRef(({
  children,
  ...anchorProps
}, anchorRef) => {
  return /*#__PURE__*/_react.default.cloneElement(children, { ...anchorProps,
    ref: anchorRef
  });
});
/** this component is syntactical sugar 🍭 */


const MenuButton = /*#__PURE__*/_react.default.forwardRef((props, anchorRef) => {
  return /*#__PURE__*/_react.default.createElement(Anchor, {
    ref: anchorRef
  }, /*#__PURE__*/_react.default.createElement(_Button.default, props));
});

ActionMenuBase.displayName = 'ActionMenu';
const ActionMenu = Object.assign(ActionMenuBase, {
  Button: MenuButton,
  Anchor,
  Divider: _Divider.Divider
});
exports.ActionMenu = ActionMenu;