@primer/components/lib-esm/ActionMenu2.js

Primer react components

import Button from './Button';
import React from 'react';
import { AnchoredOverlay } from './AnchoredOverlay';
import { useProvidedStateOrCreate } from './hooks/useProvidedStateOrCreate';
import { useProvidedRefOrCreate } from './hooks';
import { Divider } from './ActionList2/Divider';
import { MenuContext as ActionListMenuContext } from './ActionList2/MenuContext';

const ActionMenuBase = ({
  anchorRef: externalAnchorRef,
  open,
  onOpenChange,
  overlayProps,
  children
}) => {
  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false);
  const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
  const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
  const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
  let renderAnchor = null;
  const contents = [];
  React.Children.map(children, child => {
    if (child.type === MenuButton || child.type === Anchor) {
      renderAnchor = anchorProps => /*#__PURE__*/React.cloneElement(child, anchorProps);
    } else {
      contents.push(child);
    }
  });
  return /*#__PURE__*/React.createElement(AnchoredOverlay, {
    renderAnchor: renderAnchor,
    anchorRef: anchorRef,
    open: combinedOpenState,
    onOpen: onOpen,
    onClose: onClose,
    overlayProps: overlayProps
  }, /*#__PURE__*/React.createElement(ActionListMenuContext.Provider, {
    value: {
      parent: 'ActionMenu',
      listRole: 'menu',
      itemRole: 'menuitem',
      afterSelect: onClose
    }
  }, contents));
};

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

const MenuButton = /*#__PURE__*/React.forwardRef((props, anchorRef) => {
  return /*#__PURE__*/React.createElement(Anchor, {
    ref: anchorRef
  }, /*#__PURE__*/React.createElement(Button, props));
});
ActionMenuBase.displayName = 'ActionMenu';
export const ActionMenu = Object.assign(ActionMenuBase, {
  Button: MenuButton,
  Anchor,
  Divider
});