@atlaskit/modal-dialog/dist/cjs/modal-header.js

A modal dialog displays content that requires user interaction, in a layer above the page.

/* modal-header.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./modal-header.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireDefault(require("react"));
var _compiled = require("@atlaskit/primitives/compiled");
var _closeButton = require("./close-button");
var _hooks = require("./hooks");
var styles = {
  header: "_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1i6y _85i5pxbi _1q511ejb",
  flex: "_2lx21sbv _1bsb1osq",
  titleContainer: "_1ul9idpf"
};
/**
 * __Modal header__
 *
 * A modal header contains the title of the modal and can contain other React elements such as a close button.
 *
 * - [Examples](https://atlassian.design/components/modal-dialog/examples#modal-header)
 * - [Code](https://atlassian.design/components/modal-dialog/code#modal-header-props)
 * - [Usage](https://atlassian.design/components/modal-dialog/usage)
 */
var ModalHeader = function ModalHeader(props) {
  var children = props.children,
    userDefinedTestId = props.testId,
    _props$hasCloseButton = props.hasCloseButton,
    hasCloseButton = _props$hasCloseButton === void 0 ? false : _props$hasCloseButton;
  var _useModal = (0, _hooks.useModal)(),
    hasProvidedOnClose = _useModal.hasProvidedOnClose,
    onClose = _useModal.onClose,
    modalTestId = _useModal.testId;
  var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--header");

  // Only show if an onClose was provided for the modal dialog
  var shouldShowCloseButton = hasCloseButton && hasProvidedOnClose && onClose;
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-testid": testId,
    className: (0, _runtime.ax)([styles.header])
  }, shouldShowCloseButton ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
    gap: "space.200",
    justifyContent: "space-between",
    xcss: styles.flex
  }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
    justifyContent: "end"
  }, /*#__PURE__*/_react.default.createElement(_closeButton.CloseButton, {
    onClick: onClose,
    testId: modalTestId
  })), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
    justifyContent: "start",
    alignItems: "center",
    xcss: styles.titleContainer
  }, children)) : children);
};
var _default = exports.default = ModalHeader;