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

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

import React, { forwardRef, useCallback, useEffect } from 'react';
import Button from '@atlaskit/button/custom-theme-button';
import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import Tooltip from '@atlaskit/tooltip';
import { Pulse } from '../Pulse/Pulse';
import { getButtonStyles, iconOnlySpacing } from './styles';
const customSizeAndPadding = {
  minWidth: "var(--ds-space-400, 32px)",
  padding: `0px ${"var(--ds-space-050, 4px)"}`
};
const FloatingToolbarButton = ({
  title,
  icon,
  iconAfter,
  onClick,
  onKeyDown,
  onMouseEnter,
  onMouseLeave,
  onFocus,
  onBlur,
  onMount,
  onUnmount,
  selected,
  disabled,
  href,
  target,
  appearance = 'subtle',
  children,
  className,
  tooltipContent,
  tooltipStyle,
  testId,
  interactionName,
  hideTooltipOnClick = true,
  ariaHasPopup,
  tabIndex,
  areaControls,
  ariaLabel,
  isRadioButton,
  pulse,
  areAnyNewToolbarFlagsEnabled
}, forwardedRef) => {
  // 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;
  /**
   * If it's a radio button, we need to reflect false values too, hence
   * we cast it as a Boolean
   */
  const ariaChecked = isRadioButton ? Boolean(isButtonPressed) : undefined;
  const ariaPressed = isRadioButton ? undefined : isButtonPressed;
  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 handleOnClick = useCallback(event => {
    onClick === null || onClick === void 0 ? void 0 : onClick(event);
  }, [onClick]);
  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: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? undefined : onMouseEnter,
    onMouseLeave: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? undefined : onMouseLeave
  }, /*#__PURE__*/React.createElement(Pulse, {
    pulse: !expValEquals('platform_editor_spotlight_migration', 'isEnabled', true) && pulse
  }, /*#__PURE__*/React.createElement(Button
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
  , {
    className: className
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    ref: buttonElement => {
      if (forwardedRef && editorExperiment('platform_synced_block', true)) {
        if (typeof forwardedRef === 'function') {
          forwardedRef(buttonElement);
        } else if (typeof forwardedRef === 'object') {
          forwardedRef.current = buttonElement;
        }
      }
    }
    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    theme: (adgTheme, themeProps) => {
      const {
        buttonStyles,
        ...rest
      } = adgTheme(themeProps);
      return {
        buttonStyles: {
          ...buttonStyles,
          ...customSpacing,
          ...(appearance === 'danger' && getButtonStyles({
            appearance,
            state: themeProps.state,
            mode: themeProps.mode
          })),
          ...(areAnyNewToolbarFlagsEnabled ? customSizeAndPadding : {})
        },
        ...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: areAnyNewToolbarFlagsEnabled ? 'default' : '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,
    interactionName: interactionName,
    onMouseEnter: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? onMouseEnter : undefined,
    onMouseLeave: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? onMouseLeave : undefined,
    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)))));
};

// eslint-disable-next-line @typescript-eslint/ban-types
const _default_1 = componentWithCondition(() => editorExperiment('platform_synced_block', true), /*#__PURE__*/forwardRef(FloatingToolbarButton), FloatingToolbarButton);
export default _default_1;