@mskcc/carbon-react/lib/components/MskHeader/next/ControlMenuButton.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var useAttachedMenu = require('../../../internal/useAttachedMenu.js');
var useId = require('../../../internal/useId.js');
var MskIcon = require('../../Icon/MskIcon.js');
var Menu = require('../../Menu/Menu.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

const spacing = 0;

/**
 * @component AvatarMenu component creates a menu button that feature's the user's avatar
 * @see https://react.carbondesignsystem.com/?path=/story/components-menu--playground
 */
function ControlMenuButton(_ref) {
  let {
    icon,
    buttonContent,
    children,
    className,
    disabled,
    menuClassName,
    target,
    label = '',
    onClose,
    onOpen,
    onKeyDown,
    ...rest
  } = _ref;
  const id = useId.useId('ControlMenuButton');
  const triggerRef = React.useRef(null);
  const menuRef = React.useRef(null);
  const [width, setWidth] = React.useState(0);
  const [position, setPosition] = React.useState('bottom');
  const {
    open,
    x,
    y,
    handleClick,
    handleClose,
    handleMousedown
  } = useAttachedMenu.useAttachedMenu(triggerRef);
  const doClose = React.useCallback(() => {
    handleClose();
    onClose?.();
  }, [onClose, handleClose]);
  const doClick = React.useCallback(() => {
    if (!triggerRef.current) {
      return;
    }
    const {
      width: w
    } = triggerRef.current.getBoundingClientRect();
    setWidth(w);

    // TODO: this is a hack because onClose() not firing once handleMousedown() applied
    if (open) {
      doClose();
    }
    handleClick();
  }, [doClose, handleClick, open]);
  const doOpen = React.useCallback(() => {
    if (triggerRef.current && menuRef.current) {
      const {
        top: triggerTop,
        bottom: triggerBottom
      } = triggerRef.current.getBoundingClientRect();
      const {
        top: menuTop,
        bottom: menuBottom
      } = menuRef.current.getBoundingClientRect();
      if (triggerTop >= menuBottom && triggerTop > menuTop) {
        setPosition('top');
      } else if (menuTop >= triggerBottom) {
        setPosition('bottom');
      } else {
        setPosition('');
      }
      //   menuRef.current.style.width = `${width}px`;
    }

    onOpen?.();
  }, [onOpen, menuRef, triggerRef]);
  const triggerClasses = React.useMemo(() => cx__default["default"]('msk-header--control-button', {
    active: open
  }), [open]);
  const parentClass = `msk-header--control-button-container ${className ?? ''}`.trim();
  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
    ref: triggerRef,
    "aria-owns": open ? id : '',
    className: parentClass
  }), /*#__PURE__*/React__default["default"].createElement("button", {
    type: "button",
    disabled: disabled,
    className: triggerClasses,
    "aria-haspopup": true,
    "aria-expanded": open,
    onClick: doClick,
    onMouseDown: () => handleMousedown,
    "aria-controls": open ? id : ''
  }, buttonContent ?? /*#__PURE__*/React__default["default"].createElement(MskIcon.Icon, {
    icon: icon,
    className: "msk-header--control-button-icon"
  })), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
    className: cx__default["default"]('msk-header--control-button-menu', menuClassName),
    id: id,
    ref: menuRef,
    target: target,
    size: "lg",
    label: label,
    open: open,
    x: x,
    y: [y[0] - spacing, y[1] + spacing],
    onOpen: doOpen,
    onClose: doClose
  }, children));
}

/**
 * The display name of the component.
 *
 */
ControlMenuButton.displayName = 'AvatarMenu';
ControlMenuButton.propTypes = {
  children: PropTypes__default["default"].node,
  className: PropTypes__default["default"].string,
  disabled: PropTypes__default["default"].bool,
  id: PropTypes__default["default"].string,
  label: PropTypes__default["default"].string,
  level: PropTypes__default["default"].number,
  onClose: PropTypes__default["default"].func,
  onKeyDown: PropTypes__default["default"].func,
  onOpen: PropTypes__default["default"].func,
  open: PropTypes__default["default"].bool,
  target: PropTypes__default["default"].element,
  url: PropTypes__default["default"].string
};

exports.ControlMenuButton = ControlMenuButton;