@atlaskit/editor-common/dist/es2019/ui/FloatingToolbar/Button.js

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

import _extends from "@babel/runtime/helpers/extends";
import React, { useCallback, useEffect, useState } from 'react';
import Button from '@atlaskit/button/custom-theme-button';
import Tooltip from '@atlaskit/tooltip';
import { Pulse } from '../Pulse/Pulse';
import { ButtonSpotlightCard } from './ButtonSpotlightCard';
import { getButtonStyles, iconOnlySpacing } from './styles';
export default (({
  title,
  icon,
  iconAfter,
  onClick,
  onKeyDown,
  onMouseEnter,
  onMouseLeave,
  onFocus,
  onBlur,
  onMount,
  onUnmount,
  selected,
  disabled,
  href,
  target,
  appearance = 'subtle',
  children,
  className,
  tooltipContent,
  tooltipStyle,
  testId,
  hideTooltipOnClick = true,
  ariaHasPopup,
  tabIndex,
  areaControls,
  ariaLabel,
  isRadioButton,
  pulse,
  spotlightConfig
}) => {
  // Check if there's only an icon and add additional styles
  const iconOnly = (icon || iconAfter) && !children;
  const customSpacing = iconOnly ? iconOnlySpacing : {};
  const isButtonPressed = ariaHasPopup ? undefined : selected;
  const ariaChecked = isRadioButton ? isButtonPressed : undefined;
  const ariaPressed = isRadioButton ? undefined : isButtonPressed;
  const [spotlightReferenceElement, setSpotlightReferenceElement] = useState(null);
  useEffect(() => {
    onMount === null || onMount === void 0 ? void 0 : onMount();
    return () => onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const onSpotlightTargetClick = spotlightConfig !== null && spotlightConfig !== void 0 && spotlightConfig.isSpotlightOpen ? spotlightConfig === null || spotlightConfig === void 0 ? void 0 : spotlightConfig.onTargetClick : undefined;
  const handleOnClick = useCallback(event => {
    // fire the spotlight onTargetClick callback if a spotlight is rendered and callback is provided
    onSpotlightTargetClick === null || onSpotlightTargetClick === void 0 ? void 0 : onSpotlightTargetClick();
    onClick === null || onClick === void 0 ? void 0 : onClick(event);
  }, [onClick, onSpotlightTargetClick]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip
  // Only fallback to title for tooltip if title is not shown
  , {
    content: tooltipContent || (iconOnly ? title : undefined),
    component: tooltipStyle,
    hideTooltipOnClick: hideTooltipOnClick,
    position: "top"
  }, /*#__PURE__*/React.createElement("div", {
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave
  }, /*#__PURE__*/React.createElement(Pulse, {
    pulse: pulse || (spotlightConfig === null || spotlightConfig === void 0 ? void 0 : spotlightConfig.pulse)
  }, /*#__PURE__*/React.createElement(Button
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
  , {
    className: className,
    ref: buttonElement => setSpotlightReferenceElement(buttonElement),
    theme: (adgTheme, themeProps) => {
      const {
        buttonStyles,
        ...rest
      } = adgTheme(themeProps);
      return {
        buttonStyles: {
          ...buttonStyles,
          ...customSpacing,
          ...(appearance === 'danger' && getButtonStyles({
            appearance,
            state: themeProps.state,
            mode: themeProps.mode
          }))
        },
        ...rest
      };
    },
    "aria-label": ariaLabel || title,
    "aria-pressed": ariaPressed,
    "aria-checked": ariaChecked,
    role: isRadioButton ? 'radio' : undefined,
    "aria-expanded": ariaHasPopup ? selected : undefined,
    "aria-controls": ariaHasPopup ? areaControls : undefined,
    spacing: 'compact',
    href: href,
    target: target,
    appearance: appearance,
    "aria-haspopup": ariaHasPopup,
    iconBefore: icon || undefined,
    iconAfter: iconAfter,
    onClick: handleOnClick,
    onKeyDown: onKeyDown,
    isSelected: selected,
    isDisabled: disabled,
    testId: testId,
    onFocus: onFocus,
    onBlur: onBlur
    // @ts-ignore
    // tabIndex set as 0 by default in the design system  ButtonBase component
    // this is not expected for all buttons, we have to use tabIndex={null} for some cases
    // should be fixed here https://a11y-internal.atlassian.net/browse/DST-287
    ,
    tabIndex: tabIndex
  }, children)))), (spotlightConfig === null || spotlightConfig === void 0 ? void 0 : spotlightConfig.isSpotlightOpen) && spotlightReferenceElement && /*#__PURE__*/React.createElement(ButtonSpotlightCard, _extends({
    referenceElement: spotlightReferenceElement
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
  }, spotlightConfig.spotlightCardOptions)));
});