@procore/core-react 11.22.0 → 11.23.0

package/dist/Modal/Modal.js

@@ -1,33 +1,28 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+var _excluded = ["children", "onClose", "qa"],
+  _excluded2 = ["children"],
+  _excluded3 = ["placement", "width"],
+  _excluded4 = ["children", "noSideSpacing"],
+  _excluded5 = ["children"],
+  _excluded6 = ["children"],
+  _excluded7 = ["aria-describedby", "aria-details", "aria-labelledby", "aria-label", "children", "howToClose", "id", "onClickOverlay", "onClose", "open", "placement", "role"],
+  _excluded8 = ["children", "headline", "onClose"];
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Clear } from '@procore/core-icons/dist';
 import { FocusScope } from '@react-aria/focus';
 import React, { useEffect } from 'react';
 import { Button } from '../Button/Button';
-import { CloseWithConfirmContext, useCloseWithConfirmContext, useCloseWithConfirmState, } from '../Form/closeWithConfirm';
+import { CloseWithConfirmContext, useCloseWithConfirmContext, useCloseWithConfirmState } from '../Form/closeWithConfirm';
 import { useModalDialogLike } from '../OverlayTrigger/a11yPresets';
 import { Portal } from '../Portal/Portal';
-import { Heading, LevelContext, Section, SectionProvider, } from '../Section/Section';
+import { Heading, LevelContext, Section, SectionProvider } from '../Section/Section';
 import { useDeprecation } from '../_hooks/Deprecation';
 import { useLayoutEventListener } from '../_hooks/EventListener';
 import { useI18nContext } from '../_hooks/I18n';
@@ -36,101 +31,164 @@ import { useScrollLock } from '../_hooks/ScrollLock';
 import { Visibility } from '../_hooks/Visibility';
 import { addSubcomponents } from '../_utils/addSubcomponents';
 import { mergeRefs } from '../_utils/mergeRefs';
-import { ChildRegistryProvider, useModalChildRegistryDispatch, } from './ChildRegistry.context';
-import { fadeInClassName, fadeOutClassName, StyledModal, StyledModalBody, StyledModalButtons, StyledModalCancel, StyledModalContainer, StyledModalContent, StyledModalFooter, StyledModalFooterNotation, StyledModalFooterSummary, StyledModalHeader, StyledModalHeading, StyledModalScrim, StyledModalWarningIcon, } from './Modal.styles';
+import { ChildRegistryProvider, useModalChildRegistryDispatch } from './ChildRegistry.context';
+import { fadeInClassName, fadeOutClassName, StyledModal, StyledModalBody, StyledModalButtons, StyledModalCancel, StyledModalContainer, StyledModalContent, StyledModalFooter, StyledModalFooterNotation, StyledModalFooterSummary, StyledModalHeader, StyledModalHeading, StyledModalScrim, StyledModalWarningIcon } from './Modal.styles';
 import { useInitializeModalFocus } from './useInitializeModalFocus';
-function noop() { }
+function noop() {}
 var defaultStartLevel = 2;
 var initialBodyLevel = 3;
+
 // TODO default in breaking
 var defaultHowToClose = ['scrim', 'x'];
-var ModalCloseContext = React.createContext({
-    howToClose: [],
-    onClose: undefined,
+var ModalCloseContext = /*#__PURE__*/React.createContext({
+  howToClose: [],
+  onClose: undefined
 });
-var ModalBodyScrollContext = React.createContext({
-    isBodyScrolled: false,
-    setIsBodyScrolled: noop,
+var ModalBodyScrollContext = /*#__PURE__*/React.createContext({
+  isBodyScrolled: false,
+  setIsBodyScrolled: noop
 });
-var ModalClosableHeader = React.forwardRef(function (_a, ref) {
-    var children = _a.children, externalOnClose = _a.onClose, qa = _a.qa, props = __rest(_a, ["children", "onClose", "qa"]);
-    var isBodyScrolled = React.useContext(ModalBodyScrollContext).isBodyScrolled;
-    var _b = React.useContext(ModalCloseContext), howToClose = _b.howToClose, onClose = _b.onClose;
-    var I18n = useI18nContext();
-    var modalClosableHeaderRef = React.useRef(null);
-    var closeWithConfirm = useCloseWithConfirmContext().closeWithConfirm;
-    var registerChildRef = useModalChildRegistryDispatch();
-    useEffect(function () {
-        registerChildRef({ child: 'header', ref: modalClosableHeaderRef });
-    }, []);
-    function onClickButton(e) {
-        if (onClose && (howToClose === null || howToClose === void 0 ? void 0 : howToClose.includes('x'))) {
-            closeWithConfirm(onClose)(e, 'x');
-            return;
-        }
-        closeWithConfirm(externalOnClose)(e);
+var ModalClosableHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    externalOnClose = _ref.onClose,
+    qa = _ref.qa,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _React$useContext = React.useContext(ModalBodyScrollContext),
+    isBodyScrolled = _React$useContext.isBodyScrolled;
+  var _React$useContext2 = React.useContext(ModalCloseContext),
+    howToClose = _React$useContext2.howToClose,
+    onClose = _React$useContext2.onClose;
+  var I18n = useI18nContext();
+  var modalClosableHeaderRef = React.useRef(null);
+  var _useCloseWithConfirmC = useCloseWithConfirmContext(),
+    closeWithConfirm = _useCloseWithConfirmC.closeWithConfirm;
+  var registerChildRef = useModalChildRegistryDispatch();
+  useEffect(function () {
+    registerChildRef({
+      child: 'header',
+      ref: modalClosableHeaderRef
+    });
+  }, []);
+  function onClickButton(e) {
+    if (onClose && howToClose !== null && howToClose !== void 0 && howToClose.includes('x')) {
+      closeWithConfirm(onClose)(e, 'x');
+      return;
     }
-    return (React.createElement(StyledModalHeader, __assign({ "$isBodyScrolled": isBodyScrolled }, props, { ref: mergeRefs(ref, modalClosableHeaderRef) }),
-        React.createElement(StyledModalHeading, null, children),
-        (onClose && (howToClose === null || howToClose === void 0 ? void 0 : howToClose.includes('x'))) || externalOnClose ? (React.createElement(StyledModalCancel, null,
-            React.createElement(Button, { "aria-label": I18n.t('core.modal.a11y.close'), "data-qa": qa === null || qa === void 0 ? void 0 : qa.closeButton, "data-internal": "close-button", onClick: onClickButton, icon: React.createElement(Clear, null), variant: "tertiary" }))) : null));
+    closeWithConfirm(externalOnClose)(e);
+  }
+  return /*#__PURE__*/React.createElement(StyledModalHeader, _extends({
+    $isBodyScrolled: isBodyScrolled
+  }, props, {
+    ref: mergeRefs(ref, modalClosableHeaderRef)
+  }), /*#__PURE__*/React.createElement(StyledModalHeading, null, children), onClose && howToClose !== null && howToClose !== void 0 && howToClose.includes('x') || externalOnClose ? /*#__PURE__*/React.createElement(StyledModalCancel, null, /*#__PURE__*/React.createElement(Button, {
+    "aria-label": I18n.t('core.modal.a11y.close'),
+    "data-qa": qa === null || qa === void 0 ? void 0 : qa.closeButton,
+    "data-internal": "close-button",
+    onClick: onClickButton,
+    icon: /*#__PURE__*/React.createElement(Clear, null),
+    variant: "tertiary"
+  })) : null);
 });
-var ModalClosableFooterButtons = React.forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    var _b = React.useContext(ModalCloseContext), howToClose = _b.howToClose, onClose = _b.onClose;
-    var I18n = useI18nContext();
-    var closeWithConfirm = useCloseWithConfirmContext().closeWithConfirm;
-    var modalClosableFooterButtonsRef = React.useRef(null);
-    var registerChildRef = useModalChildRegistryDispatch();
-    useEffect(function () {
-        registerChildRef({
-            child: 'closeableButtons',
-            ref: modalClosableFooterButtonsRef,
-        });
-    }, []);
-    function onClickButton(e) {
-        closeWithConfirm(onClose)(e, 'footer-button');
-    }
-    return (React.createElement(StyledModalButtons, __assign({}, props, { ref: mergeRefs(ref, modalClosableFooterButtonsRef) }),
-        (howToClose === null || howToClose === void 0 ? void 0 : howToClose.includes('footer-button')) && (React.createElement(Button, { onClick: onClickButton, variant: "tertiary" }, I18n.t('core.modal.cancel'))),
-        children));
+var ModalClosableFooterButtons = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var _React$useContext3 = React.useContext(ModalCloseContext),
+    howToClose = _React$useContext3.howToClose,
+    onClose = _React$useContext3.onClose;
+  var I18n = useI18nContext();
+  var _useCloseWithConfirmC2 = useCloseWithConfirmContext(),
+    closeWithConfirm = _useCloseWithConfirmC2.closeWithConfirm;
+  var modalClosableFooterButtonsRef = React.useRef(null);
+  var registerChildRef = useModalChildRegistryDispatch();
+  useEffect(function () {
+    registerChildRef({
+      child: 'closeableButtons',
+      ref: modalClosableFooterButtonsRef
+    });
+  }, []);
+  function onClickButton(e) {
+    closeWithConfirm(onClose)(e, 'footer-button');
+  }
+  return /*#__PURE__*/React.createElement(StyledModalButtons, _extends({}, props, {
+    ref: mergeRefs(ref, modalClosableFooterButtonsRef)
+  }), (howToClose === null || howToClose === void 0 ? void 0 : howToClose.includes('footer-button')) && /*#__PURE__*/React.createElement(Button, {
+    onClick: onClickButton,
+    variant: "tertiary"
+  }, I18n.t('core.modal.cancel')), children);
 });
-var ModalContainer = React.forwardRef(function (_a, ref) {
-    var placement = _a.placement, width = _a.width, props = __rest(_a, ["placement", "width"]);
-    var onClose = React.useContext(ModalCloseContext).onClose;
-    var modalContainerRef = React.useRef(null);
-    useInitializeModalFocus({ modalContainerRef: modalContainerRef, hasOnClose: !!onClose });
-    return (React.createElement(StyledModalContainer, __assign({}, props, { shadowStrength: 4, "$placement": placement, "$width": width, ref: mergeRefs(ref, modalContainerRef) })));
+var ModalContainer = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var placement = _ref3.placement,
+    width = _ref3.width,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  var _React$useContext4 = React.useContext(ModalCloseContext),
+    onClose = _React$useContext4.onClose;
+  var modalContainerRef = React.useRef(null);
+  useInitializeModalFocus({
+    modalContainerRef: modalContainerRef,
+    hasOnClose: !!onClose
+  });
+  return /*#__PURE__*/React.createElement(StyledModalContainer, _extends({}, props, {
+    shadowStrength: 4,
+    $placement: placement,
+    $width: width,
+    ref: mergeRefs(ref, modalContainerRef)
+  }));
 });
-var ModalBody = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.noSideSpacing, noSideSpacing = _b === void 0 ? false : _b, props = __rest(_a, ["children", "noSideSpacing"]);
-    var _c = useOverflowObserver(), isOverflowingY = _c.isOverflowingY, overflowRef = _c.ref;
-    var scrollRef = React.useRef(null);
-    var modalBodyRef = React.useRef(null);
-    var setIsBodyScrolled = React.useContext(ModalBodyScrollContext).setIsBodyScrolled;
-    var registerChildRef = useModalChildRegistryDispatch();
-    useEffect(function () {
-        registerChildRef({ child: 'body', ref: modalBodyRef });
-    }, []);
-    useLayoutEventListener({
-        event: 'scroll',
-        handler: function (e) {
-            setIsBodyScrolled(e.currentTarget.scrollTop > 0);
-        },
-        scope: scrollRef,
+var ModalBody = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
+  var children = _ref4.children,
+    _ref4$noSideSpacing = _ref4.noSideSpacing,
+    noSideSpacing = _ref4$noSideSpacing === void 0 ? false : _ref4$noSideSpacing,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  var _useOverflowObserver = useOverflowObserver(),
+    isOverflowingY = _useOverflowObserver.isOverflowingY,
+    overflowRef = _useOverflowObserver.ref;
+  var scrollRef = React.useRef(null);
+  var modalBodyRef = React.useRef(null);
+  var _React$useContext5 = React.useContext(ModalBodyScrollContext),
+    setIsBodyScrolled = _React$useContext5.setIsBodyScrolled;
+  var registerChildRef = useModalChildRegistryDispatch();
+  useEffect(function () {
+    registerChildRef({
+      child: 'body',
+      ref: modalBodyRef
     });
-    return (React.createElement(SectionProvider, null,
-        React.createElement(LevelContext.Provider, { value: initialBodyLevel },
-            React.createElement(StyledModalBody, __assign({}, props, { isOverflowingY: isOverflowingY, noSideSpacing: noSideSpacing, ref: mergeRefs(overflowRef, scrollRef, ref, modalBodyRef), tabIndex: 0 }), children))));
+  }, []);
+  useLayoutEventListener({
+    event: 'scroll',
+    handler: function handler(e) {
+      setIsBodyScrolled(e.currentTarget.scrollTop > 0);
+    },
+    scope: scrollRef
+  });
+  return /*#__PURE__*/React.createElement(SectionProvider, null, /*#__PURE__*/React.createElement(LevelContext.Provider, {
+    value: initialBodyLevel
+  }, /*#__PURE__*/React.createElement(StyledModalBody, _extends({}, props, {
+    isOverflowingY: isOverflowingY,
+    noSideSpacing: noSideSpacing,
+    ref: mergeRefs(overflowRef, scrollRef, ref, modalBodyRef),
+    tabIndex: 0
+  }), children)));
 });
-var ModalFooterSummary = React.forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (React.createElement(StyledModalFooterSummary, __assign({}, props, { ref: ref }), children));
+var ModalFooterSummary = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
+  var children = _ref5.children,
+    props = _objectWithoutProperties(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement(StyledModalFooterSummary, _extends({}, props, {
+    ref: ref
+  }), children);
 });
-var ModalFooterNotation = React.forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (React.createElement(StyledModalFooterNotation, __assign({ "aria-live": "polite", intent: "small", color: "gray45", italic: true }, props, { ref: ref }), children));
+var ModalFooterNotation = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
+  var children = _ref6.children,
+    props = _objectWithoutProperties(_ref6, _excluded6);
+  return /*#__PURE__*/React.createElement(StyledModalFooterNotation, _extends({
+    "aria-live": "polite",
+    intent: "small",
+    color: "gray45",
+    italic: true
+  }, props, {
+    ref: ref
+  }), children);
 });
+
 /**
 
  We use modals to present additional actions, information, or forms on pages
@@ -147,87 +205,132 @@ var ModalFooterNotation = React.forwardRef(function (_a, ref) {
  @see [Design Guidelines](https://design.procore.com/modal)
 
  */
-var Modal_ = React.forwardRef(function (_a, ref) {
-    var ariaDescribedby = _a["aria-describedby"], ariaDetails = _a["aria-details"], ariaLabelledby = _a["aria-labelledby"], ariaLabel = _a["aria-label"], children = _a.children, howToClose = _a.howToClose, id = _a.id, _b = _a.onClickOverlay, onClickOverlay = _b === void 0 ? noop : _b, onClose = _a.onClose, _c = _a.open, open = _c === void 0 ? false : _c, _d = _a.placement, placement = _d === void 0 ? 'center' : _d, role = _a.role, props = __rest(_a, ['aria-describedby', 'aria-details', 'aria-labelledby', 'aria-label', "children", "howToClose", "id", "onClickOverlay", "onClose", "open", "placement", "role"]);
-    useScrollLock(open);
-    var _e = React.useState(open), visible = _e[0], setVisible = _e[1];
-    var _f = React.useState(''), fadeType = _f[0], setFadeType = _f[1];
-    var closeWithConfirmState = useCloseWithConfirmState();
-    var closeWithConfirm = closeWithConfirmState.closeWithConfirm;
-    React.useEffect(function () {
-        if (open) {
-            setVisible(true);
-            setTimeout(function () {
-                setFadeType(fadeInClassName);
-            }, 0);
-        }
-        else {
-            setFadeType(fadeOutClassName);
-        }
-    }, [open]);
-    var onTransitionEnd = function () {
-        if (fadeType === fadeOutClassName) {
-            setVisible(false);
-        }
-    };
-    var handleKeyDown = function (e) {
-        if (!onClose)
-            return;
-        if (e.key === 'Escape') {
-            e.preventDefault();
-            e.stopPropagation();
-            closeWithConfirm(onClose)(e, 'x');
-        }
-    };
-    var dialogProps_ = useModalDialogLike({
-        'aria-describedby': ariaDescribedby,
-        'aria-details': ariaDetails,
-        'aria-labelledby': ariaLabelledby,
-        'aria-label': ariaLabel,
-        id: id,
-        isModal: false,
-        isOpen: open,
-        role: role,
-    }).dialogProps;
-    var dialogProps = onClose && role === 'dialog' ? dialogProps_ : {};
-    function onClickScrim(e) {
-        onClickOverlay(e);
-        if (onClose && (howToClose === null || howToClose === void 0 ? void 0 : howToClose.includes('scrim'))) {
-            closeWithConfirm(onClose)(e, 'scrim');
-        }
+var Modal_ = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
+  var ariaDescribedby = _ref7['aria-describedby'],
+    ariaDetails = _ref7['aria-details'],
+    ariaLabelledby = _ref7['aria-labelledby'],
+    ariaLabel = _ref7['aria-label'],
+    children = _ref7.children,
+    howToClose = _ref7.howToClose,
+    id = _ref7.id,
+    _ref7$onClickOverlay = _ref7.onClickOverlay,
+    onClickOverlay = _ref7$onClickOverlay === void 0 ? noop : _ref7$onClickOverlay,
+    onClose = _ref7.onClose,
+    _ref7$open = _ref7.open,
+    open = _ref7$open === void 0 ? false : _ref7$open,
+    _ref7$placement = _ref7.placement,
+    placement = _ref7$placement === void 0 ? 'center' : _ref7$placement,
+    role = _ref7.role,
+    props = _objectWithoutProperties(_ref7, _excluded7);
+  useScrollLock(open);
+  var _React$useState = React.useState(open),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    visible = _React$useState2[0],
+    setVisible = _React$useState2[1];
+  var _React$useState3 = React.useState(''),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    fadeType = _React$useState4[0],
+    setFadeType = _React$useState4[1];
+  var closeWithConfirmState = useCloseWithConfirmState();
+  var closeWithConfirm = closeWithConfirmState.closeWithConfirm;
+  React.useEffect(function () {
+    if (open) {
+      setVisible(true);
+      setTimeout(function () {
+        setFadeType(fadeInClassName);
+      }, 0);
+    } else {
+      setFadeType(fadeOutClassName);
     }
-    return visible ? (React.createElement(Portal, null,
-        React.createElement(ModalCloseContext.Provider, { value: { onClose: onClose, howToClose: howToClose } },
-            React.createElement(LevelContext.Provider, { value: defaultStartLevel },
-                React.createElement(ChildRegistryProvider, null,
-                    React.createElement(FocusScope
-                    // TODO breaking - always
-                    , { 
-                        // TODO breaking - always
-                        autoFocus: !!onClose, contain: !!onClose, restoreFocus: !!onClose },
-                        React.createElement(StyledModal, __assign({ className: fadeType, ref: ref, onTransitionEnd: onTransitionEnd, onKeyDown: handleKeyDown }, dialogProps),
-                            React.createElement(StyledModalScrim, { onClick: onClickScrim }),
-                            React.createElement(ModalContainer, __assign({}, props, { placement: placement }),
-                                React.createElement(StyledModalContent, null,
-                                    React.createElement(ModalBodyScrollObserver, null,
-                                        React.createElement(CloseWithConfirmContext.Provider, { value: closeWithConfirmState }, children))))))))))) : null;
+  }, [open]);
+  var onTransitionEnd = function onTransitionEnd() {
+    if (fadeType === fadeOutClassName) {
+      setVisible(false);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (!onClose) return;
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      closeWithConfirm(onClose)(e, 'x');
+    }
+  };
+  var _useModalDialogLike = useModalDialogLike({
+      'aria-describedby': ariaDescribedby,
+      'aria-details': ariaDetails,
+      'aria-labelledby': ariaLabelledby,
+      'aria-label': ariaLabel,
+      id: id,
+      isModal: false,
+      isOpen: open,
+      role: role
+    }),
+    dialogProps_ = _useModalDialogLike.dialogProps;
+  var dialogProps = onClose && role === 'dialog' ? dialogProps_ : {};
+  function onClickScrim(e) {
+    onClickOverlay(e);
+    if (onClose && howToClose !== null && howToClose !== void 0 && howToClose.includes('scrim')) {
+      closeWithConfirm(onClose)(e, 'scrim');
+    }
+  }
+  return visible ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalCloseContext.Provider, {
+    value: {
+      onClose: onClose,
+      howToClose: howToClose
+    }
+  }, /*#__PURE__*/React.createElement(LevelContext.Provider, {
+    value: defaultStartLevel
+  }, /*#__PURE__*/React.createElement(ChildRegistryProvider, null, /*#__PURE__*/React.createElement(FocusScope
+  // TODO breaking - always
+  , {
+    autoFocus: !!onClose,
+    contain: !!onClose,
+    restoreFocus: !!onClose
+  }, /*#__PURE__*/React.createElement(StyledModal, _extends({
+    className: fadeType,
+    ref: ref,
+    onTransitionEnd: onTransitionEnd,
+    onKeyDown: handleKeyDown
+  }, dialogProps), /*#__PURE__*/React.createElement(StyledModalScrim, {
+    onClick: onClickScrim
+  }), /*#__PURE__*/React.createElement(ModalContainer, _extends({}, props, {
+    placement: placement
+  }), /*#__PURE__*/React.createElement(StyledModalContent, null, /*#__PURE__*/React.createElement(ModalBodyScrollObserver, null, /*#__PURE__*/React.createElement(CloseWithConfirmContext.Provider, {
+    value: closeWithConfirmState
+  }, children)))))))))) : null;
 });
-function ModalBodyScrollObserver(_a) {
-    var children = _a.children;
-    var _b = React.useState(false), isBodyScrolled = _b[0], setIsBodyScrolled = _b[1];
-    return (React.createElement(ModalBodyScrollContext.Provider, { value: { isBodyScrolled: isBodyScrolled, setIsBodyScrolled: setIsBodyScrolled } }, children));
+function ModalBodyScrollObserver(_ref8) {
+  var children = _ref8.children;
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isBodyScrolled = _React$useState6[0],
+    setIsBodyScrolled = _React$useState6[1];
+  return /*#__PURE__*/React.createElement(ModalBodyScrollContext.Provider, {
+    value: {
+      isBodyScrolled: isBodyScrolled,
+      setIsBodyScrolled: setIsBodyScrolled
+    }
+  }, children);
 }
-export var ConfirmModal = React.forwardRef(function (_a, ref) {
-    var children = _a.children, headline = _a.headline, onClose = _a.onClose, props = __rest(_a, ["children", "headline", "onClose"]);
-    return (React.createElement(Modal, __assign({}, props, { ref: ref }),
-        React.createElement(ModalClosableHeader, { onClose: onClose },
-            React.createElement(StyledModalWarningIcon, { size: "lg" }),
-            headline),
-        children));
+export var ConfirmModal = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
+  var children = _ref9.children,
+    headline = _ref9.headline,
+    onClose = _ref9.onClose,
+    props = _objectWithoutProperties(_ref9, _excluded8);
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(ModalClosableHeader, {
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(StyledModalWarningIcon, {
+    size: "lg"
+  }), headline), children);
 });
 function ModalState(props) {
-    useDeprecation({ oldThing: 'Modal.State' });
-    return React.createElement(Visibility, __assign({}, props));
+  useDeprecation({
+    oldThing: 'Modal.State'
+  });
+  return /*#__PURE__*/React.createElement(Visibility, props);
 }
 Modal_.displayName = 'Modal';
 ConfirmModal.displayName = 'ConfirmModal';
@@ -246,18 +349,18 @@ var Overlay = StyledModal;
 var Scrim = StyledModalScrim;
 var State = ModalState;
 export var Modal = addSubcomponents({
-    Body: Body,
-    Container: Container,
-    Content: Content,
-    Footer: Footer,
-    FooterButtons: FooterButtons,
-    FooterNotation: FooterNotation,
-    FooterSummary: FooterSummary,
-    Header: Header,
-    Heading: Heading,
-    Overlay: Overlay,
-    Scrim: Scrim,
-    State: State,
-    Section: Section,
+  Body: Body,
+  Container: Container,
+  Content: Content,
+  Footer: Footer,
+  FooterButtons: FooterButtons,
+  FooterNotation: FooterNotation,
+  FooterSummary: FooterSummary,
+  Header: Header,
+  Heading: Heading,
+  Overlay: Overlay,
+  Scrim: Scrim,
+  State: State,
+  Section: Section
 }, Modal_);
 //# sourceMappingURL=Modal.js.map