@atlaskit/atlassian-navigation/dist/esm/components/IconButton/index.js

A horizontal navigation component for Atlassian apps.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["icon", "label", "testId", "tooltip", "component", "href", "id", "isDisabled", "isSelected", "onBlur", "onClick", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "target", "theme", "isTooltipAnnouncementDisabled"];
import React, { forwardRef } from 'react';
import Button from '@atlaskit/button/custom-theme-button';
import Tooltip from '@atlaskit/tooltip';
import { useTheme } from '../../theme';
import { getIconButtonTheme } from './styles';
/**
 * __Icon button__
 *
 * An icon button is used to create navigation items such as Help, Settings
 * and Notifications. You can use this component to create your own items to
 * pass into `AtlassianNavigation`'s render props, but where possible you should
 * rely on the defaults.
 *
 * @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
 */
export var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
  var icon = props.icon,
    label = props.label,
    testId = props.testId,
    tooltip = props.tooltip,
    component = props.component,
    href = props.href,
    id = props.id,
    isDisabled = props.isDisabled,
    isSelected = props.isSelected,
    onBlur = props.onBlur,
    onClick = props.onClick,
    onFocus = props.onFocus,
    onMouseDown = props.onMouseDown,
    onMouseEnter = props.onMouseEnter,
    onMouseLeave = props.onMouseLeave,
    onMouseUp = props.onMouseUp,
    target = props.target,
    theme = props.theme,
    _props$isTooltipAnnou = props.isTooltipAnnouncementDisabled,
    isTooltipAnnouncementDisabled = _props$isTooltipAnnou === void 0 ? false : _props$isTooltipAnnou,
    rest = _objectWithoutProperties(props, _excluded);
  var themeFromContext = useTheme();
  var button = /*#__PURE__*/React.createElement(Button, _extends({
    appearance: "primary",
    "aria-label": label,
    component: component,
    href: href,
    iconBefore: icon,
    id: id,
    isDisabled: isDisabled,
    isSelected: isSelected,
    onBlur: onBlur,
    onClick: onClick,
    onFocus: onFocus,
    onMouseDown: onMouseDown,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    onMouseUp: onMouseUp,
    ref: ref,
    target: target,
    testId: testId
    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
    ,
    theme: theme || getIconButtonTheme(themeFromContext)
    // These are all explicit, leaving it in just in case
  }, rest));
  if (tooltip) {
    return /*#__PURE__*/React.createElement(Tooltip, {
      content: tooltip,
      hideTooltipOnClick: true,
      isScreenReaderAnnouncementDisabled: isTooltipAnnouncementDisabled
    }, button);
  }
  return button;
});