feat(Modal): migrate to restart/ui

Author: kyletsang

package.json

@@ -60,6 +60,7 @@
     "@babel/runtime": "^7.14.0",
     "@restart/context": "^2.1.4",
     "@restart/hooks": "^0.3.26",
+    "@restart/ui": "^0.2.0",
     "@types/invariant": "^2.2.33",
     "@types/prop-types": "^15.7.3",
     "@types/react": ">=16.14.8",
@@ -70,7 +71,6 @@
     "invariant": "^2.2.4",
     "prop-types": "^15.7.2",
     "prop-types-extra": "^1.1.0",
-    "react-overlays": "^5.1.1",
     "react-transition-group": "^4.4.1",
     "uncontrollable": "^7.2.1",
     "warning": "^4.0.3"

src/BootstrapModalManager.tsx

@@ -1,7 +1,8 @@
+import addClass from 'dom-helpers/addClass';
 import css from 'dom-helpers/css';
 import qsa from 'dom-helpers/querySelectorAll';
-import getScrollbarSize from 'dom-helpers/scrollbarSize';
-import ModalManager from 'react-overlays/ModalManager';
+import removeClass from 'dom-helpers/removeClass';
+import ModalManager, { ContainerState } from '@restart/ui/ModalManager';
 
 const Selector = {
   FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
@@ -35,25 +36,30 @@ class BootstrapModalManager extends ModalManager {
     }
   }
 
-  setContainerStyle(containerState, container) {
-    super.setContainerStyle(containerState, container);
+  setContainerStyle(containerState: ContainerState) {
+    super.setContainerStyle(containerState);
 
-    if (!containerState.overflowing) return;
-    const size = getScrollbarSize();
+    const container = this.getElement();
+    addClass(container, 'modal-open');
+
+    if (!containerState.scrollBarWidth) return;
 
     qsa(container, Selector.FIXED_CONTENT).forEach((el) =>
-      this.adjustAndStore('paddingRight', el, size),
+      this.adjustAndStore('paddingRight', el, containerState.scrollBarWidth),
     );
     qsa(container, Selector.STICKY_CONTENT).forEach((el) =>
-      this.adjustAndStore('marginRight', el, -size),
+      this.adjustAndStore('marginRight', el, -containerState.scrollBarWidth),
     );
     qsa(container, Selector.NAVBAR_TOGGLER).forEach((el) =>
-      this.adjustAndStore('marginRight', el, size),
+      this.adjustAndStore('marginRight', el, containerState.scrollBarWidth),
     );
   }
 
-  removeContainerStyle(containerState, container) {
-    super.removeContainerStyle(containerState, container);
+  removeContainerStyle(containerState: ContainerState) {
+    super.removeContainerStyle(containerState);
+
+    const container = this.getElement();
+    removeClass(container, 'modal-open');
 
     qsa(container, Selector.FIXED_CONTENT).forEach((el) =>
       this.restore('paddingRight', el),

src/Modal.tsx

@@ -12,8 +12,8 @@ import transitionEnd from 'dom-helpers/transitionEnd';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
-import BaseModal, { BaseModalProps } from 'react-overlays/Modal';
-import { ModalInstance } from 'react-overlays/ModalManager';
+import BaseModal, { ModalProps as BaseModalProps } from '@restart/ui/Modal';
+import { ModalInstance } from '@restart/ui/ModalManager';
 import { getSharedManager } from './BootstrapModalManager';
 import Fade from './Fade';
 import ModalBody from './ModalBody';
@@ -305,9 +305,8 @@ const Modal: BsPrefixRefForwardingComponent<'div', ModalProps> =
       function updateDialogStyle(node) {
         if (!canUseDOM) return;
 
-        const containerIsOverflowing = getModalManager().isContainerOverflowing(
-          modal!,
-        );
+        const containerIsOverflowing =
+          getModalManager().getScrollbarWidth() > 0;
 
         const modalIsOverflowing =
           node.scrollHeight > ownerDocument(node).documentElement.clientHeight;
@@ -387,7 +386,7 @@ const Modal: BsPrefixRefForwardingComponent<'div', ModalProps> =
 
       const handleEscapeKeyDown = (e) => {
         if (!keyboard && backdrop === 'static') {
-          // Call preventDefault to stop modal from closing in react-overlays,
+          // Call preventDefault to stop modal from closing in restart ui,
           // then play our animation.
           e.preventDefault();
           handleStaticModalAnimation();
@@ -495,7 +494,6 @@ const Modal: BsPrefixRefForwardingComponent<'div', ModalProps> =
             onExiting={onExiting}
             onExited={handleExited}
             manager={getModalManager()}
-            containerClassName={`${bsPrefix}-open`}
             transition={animation ? DialogTransition : undefined}
             backdropTransition={animation ? BackdropTransition : undefined}
             renderBackdrop={renderBackdrop}

test/ModalSpec.js

@@ -1,6 +1,6 @@
 import { mount } from 'enzyme';
 import * as React from 'react';
-import ModalManager from 'react-overlays/ModalManager';
+import ModalManager from '@restart/ui/ModalManager';
 import Modal from '../src/Modal';
 
 describe('<Modal>', () => {