pouncejs/dist/esm/components/Modal/Modal.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import { animated, useTransition } from 'react-spring';
import { DialogOverlay, DialogContent } from '@reach/dialog';
import { useId } from '@reach/auto-id';
import Box from '../Box';
import Card from '../Card';
import Heading from '../Heading';
import Flex from '../Flex';
import IconButton from '../IconButton';
var AnimatedDialogOverlay = animated(DialogOverlay);
var AnimatedDialogContent = animated(DialogContent);

/**
 * A dialog variation that helps with grabbing the user's attention by blurring the background and
 * presenting an element that requires action from the user
 */
var Modal = function Modal(_ref) {
  var title = _ref.title,
      children = _ref.children,
      open = _ref.open,
      onClose = _ref.onClose,
      onDismiss = _ref.onDismiss,
      showCloseButton = _ref.showCloseButton,
      _ref$overlayZIndex = _ref.overlayZIndex,
      overlayZIndex = _ref$overlayZIndex === void 0 ? 1000 : _ref$overlayZIndex,
      rest = _objectWithoutPropertiesLoose(_ref, ["title", "children", "open", "onClose", "onDismiss", "showCloseButton", "overlayZIndex"]);

  var transitions = useTransition(open, null, {
    from: {
      transform: 'translate3d(0, 25px, 0)',
      opacity: 0
    },
    enter: {
      transform: 'translate3d(0, 0, 0)',
      opacity: 1
    },
    leave: {
      transform: 'translate3d(0, 25px, 0)',
      opacity: 0,
      pointerEvents: 'none'
    }
  });
  var id = useId();
  return /*#__PURE__*/React.createElement(React.Fragment, null, transitions.map(function (_ref2) {
    var item = _ref2.item,
        key = _ref2.key,
        styles = _ref2.props;
    return item && /*#__PURE__*/React.createElement(AnimatedDialogOverlay, {
      key: key,
      "data-testid": "overlay",
      isOpen: item,
      onDismiss: onDismiss ? onDismiss : onClose,
      style: {
        overflow: 'visible',
        opacity: styles.opacity,
        zIndex: overlayZIndex
      },
      as: 'div'
    }, /*#__PURE__*/React.createElement(Flex, {
      justify: "center",
      align: "center",
      height: "100%"
    }, /*#__PURE__*/React.createElement(AnimatedDialogContent, _extends({
      "aria-labelledby": id,
      style: _extends({
        outline: 'none'
      }, styles),
      as: 'div'
    }, rest), /*#__PURE__*/React.createElement(Card, {
      minWidth: "400px",
      position: "relative",
      boxShadow: "dark200"
    }, title && /*#__PURE__*/React.createElement(Box, {
      as: "header",
      borderBottom: "1px solid",
      borderColor: "navyblue-300",
      py: 6
    }, /*#__PURE__*/React.createElement(Heading, {
      size: "x-small",
      textAlign: "center",
      id: id
    }, title)), showCloseButton && /*#__PURE__*/React.createElement(Box, {
      position: "absolute",
      top: 3,
      right: 3,
      zIndex: 1
    }, /*#__PURE__*/React.createElement(IconButton, {
      icon: "close",
      "aria-label": "Dismiss Dialog",
      variant: "ghost",
      variantColor: "navyblue-300",
      onClick: onClose
    })), /*#__PURE__*/React.createElement(Box, {
      p: 8
    }, children)))));
  }));
};

export default Modal;