@carbon/react/lib/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.
 */

'use strict';

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

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var React = require('react');
var PropTypes = require('prop-types');
var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
var Button = require('../Button/Button.js');
require('../Button/Button.Skeleton.js');
var usePrefix = require('../../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(({
  'aria-label': ariaLabel,
  'aria-labelledby': ariaLabelledBy,
  children,
  className: customClassName,
  onClick,
  tooltipHighContrast = true,
  tooltipDropShadow,
  isActive,
  tooltipAlignment,
  ...rest
}, ref) => {
  const prefix = usePrefix.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.default, _rollupPluginBabelHelpers.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
   */
  ...AriaPropTypes.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';

exports.default = HeaderGlobalAction;