@atlaskit/editor-common/dist/es2019/card/LinkToolbarButtonGroup.js

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

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { css, jsx } from '@emotion/react';
import ButtonGroup from '@atlaskit/button/button-group';
import { FloatingToolbarButton as Button } from '../ui';

/**
 * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
 */
const buttonStyle = css({
  pointerEvents: 'auto'
});
const buttonStyleNoneEvent = css({
  pointerEvents: 'none'
});
const DisallowedWrapper = ({
  disabled,
  children
}) => {
  return jsx("div", {
    css: disabled ? disallowedWrapperStyle : defaultWrapperStyle
  }, children);
};

/**
 * The button requires `pointer-events: none;` in order to fix the tooltip, hence
 * leaving us without a disabled cursor, the following fixes this:
 */
const defaultWrapperStyle = css({
  cursor: 'pointer'
});
const disallowedWrapperStyle = css({
  cursor: 'not-allowed'
});
export const LinkToolbarButtonGroup = ({
  options
}) => {
  return jsx(ButtonGroup, null, options.map(({
    onClick,
    selected,
    disabled,
    testId,
    tooltipContent,
    title,
    icon,
    areAnyNewToolbarFlagsEnabled
  }) => {
    const ButtonIcon = icon;
    return jsx(DisallowedWrapper, {
      key: testId,
      disabled: disabled
    }, jsx(Button, {
      css: disabled ? buttonStyleNoneEvent : buttonStyle,
      title: title,
      icon: jsx(ButtonIcon, {
        label: title,
        spacing: "spacious"
      }),
      selected: selected,
      onClick: onClick,
      testId: testId,
      disabled: disabled,
      tooltipContent: tooltipContent,
      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
    }));
  }));
};