@shopgate/pwa-common/components/Modal/index.js

Common library for the Shopgate Connect PWA.

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { createPortal } from 'react-dom';
import { useTrackModalState } from '@shopgate/engage/a11y/hooks';
import classNames from 'classnames';
import styles from "./style";

/**
 * The Modal component.
 * @param {Object} props The component props.
 * @param {Object} props.classes The component classes.
 * @returns {JSX.Element}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const Modal = /*#__PURE__*/forwardRef(({
  children,
  classes,
  ...props
}, ref) => {
  // Track modal visibility for accessibility purposes.
  useTrackModalState();
  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx("div", {
    className: classNames(styles.container, classes?.container, 'common__modal'),
    role: "alertdialog",
    "aria-modal": true,
    ...props,
    ref: ref,
    children: /*#__PURE__*/_jsx("div", {
      className: classNames(styles.layout, classes?.layout),
      children: /*#__PURE__*/_jsx("div", {
        className: classNames(styles.content, classes?.content),
        children: children
      })
    })
  }), document.getElementById('portals'));
});
Modal.defaultProps = {
  children: null,
  classes: {
    container: '',
    layout: '',
    content: ''
  }
};
export default Modal;