@atlaskit/editor-plugin-extension/dist/esm/ui/ConfigPanel/NestedForms/RemovableField.js

editor-plugin-extension plugin for @atlaskit/editor-core

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

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import Tooltip from '@atlaskit/tooltip';
var removableFieldWrapperStyles = css({
  position: 'relative',
  marginBottom: 0
});
var wrapperWithMarginBottomStyles = css({
  marginBottom: "var(--ds-space-200, 16px)"
});
var removeButtonWrapperStyles = css({
  position: 'absolute',
  right: 0,
  top: 0,
  cursor: 'pointer',
  color: "var(--ds-icon-subtle, #505258)",
  '&:hover': {
    color: "var(--ds-icon-danger, #C9372C)"
  }
});
var RemovableField = function RemovableField(_ref) {
  var _children$props$field;
  var name = _ref.name,
    canRemoveField = _ref.canRemoveField,
    onClickRemove = _ref.onClickRemove,
    children = _ref.children,
    intl = _ref.intl,
    className = _ref.className;
  var onClickCallback = React.useCallback(function () {
    return onClickRemove && onClickRemove(name);
  }, [name, onClickRemove]);
  var hasMarginBottom = ((_children$props$field = children.props.field) === null || _children$props$field === void 0 ? void 0 : _children$props$field.type) !== 'expand';
  return jsx("div", {
    css: [removableFieldWrapperStyles, hasMarginBottom && wrapperWithMarginBottomStyles]
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: className
  }, children, canRemoveField && jsx("div", {
    role: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? 'button' : undefined,
    css: removeButtonWrapperStyles,
    "data-testid": "remove-field-".concat(name),
    onClick: onClickCallback,
    onKeyDown: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? onClickCallback : undefined,
    onFocus: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? onClickCallback : undefined,
    tabIndex: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? 0 : undefined
  }, jsx(Tooltip, {
    content: intl.formatMessage(messages.removeField),
    position: "left"
  }, jsx(CrossCircleIcon, {
    spacing: "none",
    label: intl.formatMessage(messages.removeField)
  }))));
};

// eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = injectIntl(RemovableField);
export default _default_1;