@atlaskit/editor-common/dist/es2019/ui-menu/ToolbarButton/index.js

A package that contains common classes and components for editor and renderer

// If you make any change here, copy it to above file as well
// and notify about the change in #team-fc-editor-ai-dev channel.
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { useCallback } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { FabricChannel } from '@atlaskit/analytics-listeners/types';
import Tooltip from '@atlaskit/tooltip';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
import { ToolTipContent } from '../../keymaps';
import Button from './styles';
const buttonWrapper = css({
  display: 'flex',
  height: '100%'
});
const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    buttonId,
    testId,
    className = '',
    href,
    iconAfter,
    iconBefore,
    disabled,
    selected,
    spacing,
    target,
    children,
    hideTooltip,
    title,
    keymap,
    titlePosition = 'top',
    item,
    rel,
    'aria-label': ariaLabel,
    'aria-haspopup': ariaHasPopup,
    'aria-expanded': ariaExpanded,
    'aria-pressed': ariaPressed,
    'aria-keyshortcuts': ariaKeyShortcuts,
    'aria-controls': ariaControls,
    'data-ds--level': dataDsLevel,
    onClick,
    onKeyDown,
    onItemClick,
    onFocus,
    onBlur,
    onMouseEnter,
    onMouseLeave
  } = props;
  const handleClick = useCallback((event, analyticsEvent) => {
    if (disabled) {
      return;
    }
    if (buttonId) {
      analyticsEvent.update(payload => ({
        ...payload,
        action: ACTION.CLICKED,
        actionSubject: ACTION_SUBJECT.TOOLBAR_BUTTON,
        actionSubjectId: buttonId,
        eventType: EVENT_TYPE.UI
      })).fire(FabricChannel.editor);
    }
    if (onClick) {
      onClick(event);
    }
    if (item && onItemClick) {
      onItemClick(item);
    }
  }, [disabled, onClick, onItemClick, item, buttonId]);
  const button = jsx(Button, {
    ref: ref,
    appearance: "subtle",
    testId: testId
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: className,
    href: href,
    iconAfter: iconAfter,
    iconBefore: iconBefore,
    isDisabled: disabled,
    isSelected: selected,
    onClick: handleClick,
    spacing: spacing || 'default',
    target: target,
    shouldFitContainer: true,
    "aria-expanded": ariaExpanded,
    "aria-controls": ariaControls,
    "aria-haspopup": ariaHasPopup,
    "aria-label": ariaLabel,
    "aria-pressed": ariaPressed,
    "aria-keyshortcuts": ariaKeyShortcuts,
    onKeyDown: onKeyDown,
    onFocus: onFocus,
    onBlur: onBlur,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    "data-ds--level": dataDsLevel,
    rel: rel
  }, children);
  if (!title) {
    return button;
  }
  const tooltipContent = hideTooltip ? null : jsx(ToolTipContent, {
    description: title,
    keymap: keymap
  });
  return jsx(Tooltip, {
    content: tooltipContent,
    hideTooltipOnClick: true,
    position: titlePosition
  }, jsx("div", {
    css: buttonWrapper
  }, button));
});
export default ToolbarButton;