@mskcc/carbon-react/lib/components/MenuButton/index.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 React = require('react');
var PropTypes = require('prop-types');
var cx = require('classnames');
var usePrefix = require('../../internal/usePrefix.js');
var Menu = require('../Menu/Menu.js');
var useAttachedMenu = require('../../internal/useAttachedMenu.js');
var useId = require('../../internal/useId.js');
var useMergedRefs = require('../../internal/useMergedRefs.js');

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

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

var _aside;
const spacing = 4; // top and bottom spacing between the button and the menu. in px
// const validButtonKinds = ['primary', 'tertiary', 'ghost'];
// const defaultButtonKind = 'primary';

const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function MenuButton(_ref, forwardRef) {
  let {
    children,
    className,
    disabled,
    icon = '',
    label = '',
    size = 'lg',
    target,
    disableFocus = false,
    ...rest
  } = _ref;
  const id = useId.useId('MenuButton');
  const prefix = usePrefix.usePrefix();
  const triggerRef = React.useRef(null);
  const menuRef = React.useRef(null);
  const ref = useMergedRefs.useMergedRefs([forwardRef, triggerRef]);
  const [width, setWidth] = React.useState(0);
  const {
    open,
    x,
    y,
    handleClick: hookOnClick,
    handleMousedown,
    handleClose
  } = useAttachedMenu.useAttachedMenu(triggerRef);
  function handleClick() {
    if (triggerRef.current) {
      const {
        width: w
      } = triggerRef.current.getBoundingClientRect();
      setWidth(w);
      hookOnClick();
    }
  }
  function handleOpen() {
    menuRef.current.style.width = `${width}px`;
  }
  const triggerClasses = cx__default["default"](`${prefix}--btn ${prefix}--btn--ghost msk-menu-button`, {
    [`active`]: open
  });
  const iconSizeClass = `msk-icon msk-menu-button-top-icon ${size}`.trim();
  const parentClass = `msk-menu-button-container ${className ?? ''}`.trim();
  const mobileIconClass = `msk-menu-button-mobile-icon ${open ? 'open' : ''}`.trim();
  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
    ref: ref,
    "aria-owns": open ? id : null,
    className: parentClass
  }), /*#__PURE__*/React__default["default"].createElement("button", {
    disabled: disabled,
    type: "button",
    className: triggerClasses,
    "aria-haspopup": true,
    "aria-expanded": open,
    onClick: handleClick,
    onMouseDown: handleMousedown,
    "aria-controls": open ? id : null
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: 'msk-menu-button-content'
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: "msk-menu-button-label-container"
  }, /*#__PURE__*/React__default["default"].createElement("span", {
    className: mobileIconClass
  }), /*#__PURE__*/React__default["default"].createElement("span", {
    className: iconSizeClass
  }, icon), label ? /*#__PURE__*/React__default["default"].createElement("span", {
    className: "msk-menu-button-label"
  }, label) : null), _aside || (_aside = /*#__PURE__*/React__default["default"].createElement("aside", {
    className: "msk-menu-button-expand"
  }, /*#__PURE__*/React__default["default"].createElement("span", {
    className: "msk-icon msk-menu-button-expand-icon"
  }, "arrow_drop_down"))))), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
    target: target,
    ref: menuRef,
    id: id,
    label: label,
    size: size,
    open: open,
    onClose: handleClose,
    onOpen: handleOpen,
    x: x,
    y: [y[0] - spacing, y[1] + spacing],
    disableFocus: disableFocus
  }, children));
});
MenuButton.propTypes = {
  /**
   * A collection of MenuItems to be rendered as actions for this MenuButton.
   */
  children: PropTypes__default["default"].node.isRequired,
  /**
   * Additional CSS class names.
   */
  className: PropTypes__default["default"].string,
  /**
   * disable focus
   */
  disableFocus: PropTypes__default["default"].bool,
  /**
   * Specify whether the MenuButton should be disabled, or not.
   */
  disabled: PropTypes__default["default"].bool,
  /**
   * Specify the icon to render on top of the label.
   */
  icon: PropTypes__default["default"].string,
  /**
   * Provide the label to be renderd on the trigger button.
   */
  label: PropTypes__default["default"].node,
  /**
   * Provide a prefix, default is 'cds'.
   */
  // prefix: PropTypes.string,
  /**
   * Specify the size of the button and menu.
   */
  size: PropTypes__default["default"].oneOf(['md', 'lg']),
  /**
   * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
   */
  target: PropTypes__default["default"].object
};

exports.MenuButton = MenuButton;