@carbon/react/es/components/UIShell/HeaderGlobalAction.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import cx from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
import Button from '../Button/Button.js';
import '../Button/Button.Skeleton.js';
import { usePrefix } from '../../internal/usePrefix.js';

/**
 * HeaderGlobalAction is used as a part of the `HeaderGlobalBar`. It is
 * essentially an Icon Button with an additional state to indicate whether it is
 * "active". The active state comes from when a user clicks on the global action
 * which should trigger a panel to appear.
 *
 * Note: children passed to this component should be an Icon.
 */
const HeaderGlobalAction = /*#__PURE__*/React.forwardRef(function HeaderGlobalAction({
  'aria-label': ariaLabel,
  'aria-labelledby': ariaLabelledBy,
  children,
  className: customClassName,
  onClick,
  tooltipHighContrast = true,
  tooltipDropShadow,
  isActive,
  tooltipAlignment,
  ...rest
}, ref) {
  const prefix = usePrefix();
  const className = cx({
    [customClassName]: !!customClassName,
    [`${prefix}--header__action`]: true,
    [`${prefix}--header__action--active`]: isActive
  });
  const accessibilityLabel = {
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledBy
  };
  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, accessibilityLabel, {
    className: className,
    onClick: onClick,
    type: "button",
    hasIconOnly: true,
    size: "lg",
    kind: "ghost",
    iconDescription: ariaLabel,
    tooltipPosition: "bottom",
    tooltipAlignment: tooltipAlignment,
    tooltipDropShadow: tooltipDropShadow,
    tooltipHighContrast: tooltipHighContrast,
    ref: ref
  }), children);
});
HeaderGlobalAction.propTypes = {
  /**
   * Required props for the accessibility label of the button
   */
  ...AriaLabelPropType,
  /**
   * Provide a custom icon for this global action
   */
  children: PropTypes.node.isRequired,
  /**
   * Optionally provide a custom class name that is applied to the underlying
   * button
   */
  className: PropTypes.string,
  /**
   * Specify whether the action is currently active
   */
  isActive: PropTypes.bool,
  /**
   * Optionally provide an onClick handler that is called when the underlying
   * button fires it's onclick event
   */
  onClick: PropTypes.func,
  /**
   * Specify the alignment of the tooltip to the icon-only button.
   * Can be one of: start, center, or end.
   */
  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
  /**
   * Enable drop shadow for tooltips for icon-only buttons.
   */
  tooltipDropShadow: PropTypes.bool,
  /**
   * Render the tooltip using the high-contrast theme
   * Default is true
   */
  tooltipHighContrast: PropTypes.bool
};
HeaderGlobalAction.displayName = 'HeaderGlobalAction';

export { HeaderGlobalAction as default };