@atlaskit/editor-plugin-help-dialog/dist/cjs/ui/ModalHeader.js

Help Dialog plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("@emotion/react");
var _reactIntl = require("react-intl");
var _messages = require("@atlaskit/editor-common/messages");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _heading = _interopRequireDefault(require("@atlaskit/heading"));
var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
var _modalDialog = require("@atlaskit/modal-dialog");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _styles = require("./styles");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var toolbarFocusStyles = (0, _react.css)({
  // In Firefox/Safari, when user clicks (as suppose to press Enter) on the help quick insert item, focus ring may not be present
  // Hence we manually force it
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
  'button:focus:not(:focus-visible)': {
    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)"),
    outlineOffset: "var(--ds-space-025, 2px)"
  }
});
var ModalHeader = (0, _reactIntl.injectIntl)(function (_ref) {
  var formatMessage = _ref.intl.formatMessage,
    onClose = _ref.onClose;
  return (
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    (0, _react.jsx)("div", {
      css: _styles.header
    }, (0, _react.jsx)(_heading.default, {
      size: "large"
    }, (0, _react.jsx)(_reactIntl.FormattedMessage
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
    , _messages.helpDialogMessages.editorHelp)), onClose ? (0, _react.jsx)("div", {
      css: toolbarFocusStyles
    }, (0, _react.jsx)(_tooltip.default, {
      content: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
      position: "top"
    }, (0, _react.jsx)(_modalDialog.CloseButton, {
      onClick: onClose,
      label: formatMessage(_messages.helpDialogMessages.closeHelpDialog)
    }))) : (0, _react.jsx)("div", null, (0, _react.jsx)(_uiMenu.ToolbarButton, {
      onClick: onClose,
      title: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
      spacing: "compact",
      iconBefore: (0, _react.jsx)(_cross.default, {
        label: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
        color: "currentColor",
        spacing: "spacious"
      })
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
      ,
      css: _styles.toolbarButton
    })))
  );
});
var _default = exports.default = ModalHeader;