@mskcc/carbon-react/es/components/IconButton/IconButton.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import PropTypes from 'prop-types';
import React__default, { forwardRef } from 'react';
import Button from '../Button/Button.js';
import '../Button/Button.Skeleton.js';
import cx from 'classnames';
import '../Tooltip/DefinitionTooltip.js';
import { Tooltip } from '../Tooltip/Tooltip.js';
import { usePrefix } from '../../internal/usePrefix.js';

const IconButton = /*#__PURE__*/forwardRef(function IconButton(_ref, ref) {
  let {
    align,
    children,
    className,
    closeOnActivation = true,
    defaultOpen = false,
    disabled,
    enterDelayMs = 100,
    kind,
    label,
    leaveDelayMs = 100,
    wrapperClasses,
    size,
    disableTooltip = false,
    ...rest
  } = _ref;
  const prefix = usePrefix();
  const tooltipClasses = cx(wrapperClasses, `${prefix}--icon-tooltip`, {
    [`${prefix}--icon-tooltip--disabled`]: disabled
  });
  return /*#__PURE__*/React__default.createElement(Tooltip, {
    align: align,
    closeOnActivation: closeOnActivation,
    className: tooltipClasses,
    defaultOpen: defaultOpen,
    enterDelayMs: enterDelayMs,
    label: label,
    leaveDelayMs: leaveDelayMs,
    disabled: disableTooltip
  }, /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
    disabled: disabled,
    kind: kind,
    ref: ref,
    size: size,
    className: cx(`msk-btn--icon-only`, className)
  }), /*#__PURE__*/React__default.createElement("span", {
    className: "msk-icon msk-btn--icon"
  }, children)));
});
IconButton.propTypes = {
  /**
   * Specify how the trigger should align with the tooltip
   */
  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
  /**
   * Provide an icon or asset to be rendered inside of the IconButton
   */
  children: PropTypes.node,
  /**
   * Specify an optional className to be added to your Button
   */
  className: PropTypes.string,
  /**
   * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
   */
  closeOnActivation: PropTypes.bool,
  /**
   * Specify whether the tooltip should be open when it first renders
   */
  defaultOpen: PropTypes.bool,
  /**
   * Specify whether the tooltip should be disabled
   */
  disableTooltip: PropTypes.bool,
  /**
   * Specify whether the Button should be disabled, or not
   */
  disabled: PropTypes.bool,
  /**
   * Specify the duration in milliseconds to delay before displaying the tooltip
   */
  enterDelayMs: PropTypes.number,
  /**
   * Specify the type of button to be used as the base for the IconButton
   */
  kind: PropTypes.oneOf(['primary', 'secondary', 'danger', 'ghost', 'danger--primary', 'danger--ghost', 'danger--tertiary', 'tertiary']),
  /**
   * Provide the label to be rendered inside of the Tooltip. The label will use
   * `aria-labelledby` and will fully describe the child node that is provided.
   * This means that if you have text in the child node it will not be
   * announced to the screen reader.
   */
  label: PropTypes.node.isRequired,
  /**
   * Specify the duration in milliseconds to delay before hiding the tooltip
   */
  leaveDelayMs: PropTypes.number,
  /**
   * Specify the size of the Button. Defaults to `md`.
   */
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  /**
   * Specify an optional className to be added to your Tooltip wrapper
   */
  wrapperClasses: PropTypes.string
};

export { IconButton };