@atlaskit/modal-dialog/dist/esm/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.36.1 */
import "./modal-header.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Flex, xcss } from '@atlaskit/primitives';
import { CloseButton } from './close-button';
import { useModal } from './hooks';
var headerStyles = null;
var flexStyles = xcss({
  flexDirection: 'row-reverse',
  width: '100%'
});
/**
 * __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 = 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.createElement("div", {
    "data-testid": testId,
    className: ax(["_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rthmufe _85i5pxbi _1q511ejb"]),
    style: {
      "--_t7lu6v": ix("calc(-1 * ".concat("var(--ds-border-width-outline, 2px)", ")"))
    }
  }, shouldShowCloseButton ?
  /*#__PURE__*/
  // The reason we are putting the close button first in the DOM and then
  // reordering them is to ensure that users of assistive technology get
  // all the context of a modal when initial focus is placed on the close
  // button, since it's the first interactive element.
  React.createElement(Flex, {
    gap: "space.200",
    justifyContent: "space-between",
    xcss: flexStyles
  }, /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "end"
  }, /*#__PURE__*/React.createElement(CloseButton, {
    onClick: onClose,
    testId: modalTestId
  })), /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "start",
    alignItems: "center"
  }, children)) : children);
};
export default ModalHeader;