@primer/components/lib/Dialog.js

Primer react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _ButtonClose = _interopRequireDefault(require("./Button/ButtonClose"));

var _constants = require("./constants");

var _Box = _interopRequireDefault(require("./Box"));

var _useDialog = _interopRequireDefault(require("./hooks/useDialog"));

var _sx = _interopRequireDefault(require("./sx"));

var _Text = _interopRequireDefault(require("./Text"));

var _useCombinedRefs = require("./hooks/useCombinedRefs");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const noop = () => null;

const DialogBase = _styledComponents.default.div.withConfig({
  displayName: "Dialog__DialogBase",
  componentId: "sc-1vcjhsg-0"
})(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], (0, _constants.get)('shadows.shadow.large'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', _constants.LAYOUT, _constants.COMMON, _sx.default);

const DialogHeaderBase = (0, _styledComponents.default)(_Box.default).withConfig({
  displayName: "Dialog__DialogHeaderBase",
  componentId: "sc-1vcjhsg-1"
})(["border-radius:", " ", " 0px 0px;border-bottom:1px solid ", ";display:flex;@media screen and (max-width:750px){border-radius:0px;}", ";"], (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), _sx.default);

function DialogHeader({
  theme,
  children,
  backgroundColor = 'gray.1',
  ...rest
}) {
  if (_react.default.Children.toArray(children).every(ch => typeof ch === 'string')) {
    children = /*#__PURE__*/_react.default.createElement(_Text.default, {
      theme: theme,
      color: "fg.default",
      fontSize: 1,
      fontWeight: "bold",
      fontFamily: "sans-serif"
    }, children);
  }

  return /*#__PURE__*/_react.default.createElement(DialogHeaderBase, _extends({
    theme: theme,
    p: 3,
    backgroundColor: backgroundColor
  }, rest), children);
}

DialogHeader.displayName = "DialogHeader";

const Overlay = _styledComponents.default.span.withConfig({
  displayName: "Dialog__Overlay",
  componentId: "sc-1vcjhsg-2"
})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:", ";}"], (0, _constants.get)('colors.primer.canvas.backdrop'));

const Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
  children,
  onDismiss = noop,
  isOpen,
  initialFocusRef,
  returnFocusRef,
  ...props
}, forwardedRef) => {
  const overlayRef = (0, _react.useRef)(null);
  const modalRef = (0, _useCombinedRefs.useCombinedRefs)(forwardedRef);
  const closeButtonRef = (0, _react.useRef)(null);

  const onCloseClick = () => {
    onDismiss();

    if (returnFocusRef && returnFocusRef.current) {
      returnFocusRef.current.focus();
    }
  };

  const {
    getDialogProps
  } = (0, _useDialog.default)({
    modalRef,
    onDismiss: onCloseClick,
    isOpen,
    initialFocusRef,
    closeButtonRef,
    returnFocusRef,
    overlayRef
  });
  return isOpen ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Overlay, {
    ref: overlayRef
  }), /*#__PURE__*/_react.default.createElement(DialogBase, _extends({
    tabIndex: -1,
    ref: modalRef,
    role: "dialog",
    "aria-modal": "true"
  }, props, getDialogProps()), /*#__PURE__*/_react.default.createElement(_ButtonClose.default, {
    ref: closeButtonRef,
    onClick: onCloseClick,
    sx: {
      position: 'absolute',
      top: '16px',
      right: '16px'
    }
  }), children)) : null;
});
DialogHeader.defaultProps = {
  backgroundColor: 'bg.tertiary'
};
DialogHeader.propTypes = { ..._Box.default.propTypes
};
DialogHeader.displayName = 'Dialog.Header';
Dialog.displayName = 'Dialog';

var _default = Object.assign(Dialog, {
  Header: DialogHeader
});

exports.default = _default;