@spaced-out/ui-design-system 0.1.7 → 0.1.8

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.8](https://github.com/spaced-out/ui-design-system/compare/v0.1.7...v0.1.8) (2023-04-05)
+
+
+### Bug Fixes
+
+* modal scroll fix ([47a2349](https://github.com/spaced-out/ui-design-system/commit/47a23496c8b9328ab6cbe3f7736635776fb4f797))
+* modal scroll fix ([c33b8bd](https://github.com/spaced-out/ui-design-system/commit/c33b8bd6b4a7cf4c4a51c2abe8a3211c829b054b))
+
 ### [0.1.7](https://github.com/spaced-out/ui-design-system/compare/v0.1.6...v0.1.7) (2023-04-05)
 
 

package/lib/components/Modal/Modal.js

@@ -67,6 +67,34 @@ const createPortalRoot = id => {
   return modalRoot;
 };
 const getModalRoot = id => document.getElementById(`modal-root-${id}`);
+function hasChildNode(nodeList) {
+  for (let i = 0, len = nodeList.length; i < len; i++) {
+    if (nodeList[i].firstChild !== null) {
+      return true;
+    }
+  }
+  return false;
+}
+const fixBody = bodyEl => {
+  document.getElementsByTagName('body')[0].classList.add('fixed');
+  bodyEl.style.overflow = 'hidden';
+};
+const unfixBody = bodyEl => {
+  document.getElementsByTagName('body')[0].classList.remove('fixed');
+  bodyEl.style.overflow = '';
+};
+const checkAndAddBodyOverflow = bodyEl => {
+  const nodes = document.querySelectorAll('[id^="modal-root"]');
+  let isParentModalPresent = false;
+  if (nodes.length) {
+    isParentModalPresent = hasChildNode(nodes);
+  }
+  if (isParentModalPresent) {
+    fixBody(bodyEl);
+  } else {
+    unfixBody(bodyEl);
+  }
+};
 const Modal = _ref4 => {
   let {
     classNames,
@@ -74,7 +102,6 @@ const Modal = _ref4 => {
     isOpen = false,
     onClose,
     hideBackdrop = false,
-    removeWhenClosed = true,
     tapOutsideToClose = true,
     initialFocus = -1
   } = _ref4;
@@ -97,7 +124,7 @@ const Modal = _ref4 => {
       portal.remove();
       // Ensure scroll overflow is removed
       if (bodyEl) {
-        bodyEl.style.overflow = '';
+        unfixBody(bodyEl);
       }
     };
   }, []);
@@ -107,11 +134,11 @@ const Modal = _ref4 => {
     const updatePageScroll = () => {
       if (isOpen) {
         if (bodyRef.current) {
-          bodyRef.current.style.overflow = 'hidden';
+          fixBody(bodyRef.current);
         }
       } else {
         if (bodyRef.current) {
-          bodyRef.current.style.overflow = '';
+          unfixBody(bodyRef.current);
         }
       }
     };
@@ -132,7 +159,14 @@ const Modal = _ref4 => {
       window.removeEventListener('keyup', onKeyPress);
     };
   }, [isOpen, onClose]);
-  if (!isTransitioning && removeWhenClosed && !isOpen) {
+  if (!isTransitioning && !isOpen) {
+    // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
+    // TODO(Nishant): Better way to do this?
+    setTimeout(() => {
+      if (bodyRef && !!bodyRef.current) {
+        checkAndAddBodyOverflow(bodyRef.current);
+      }
+    });
     return null;
   }
   const onBackdropClick = e => {

package/lib/components/Modal/Modal.js.flow

@@ -37,6 +37,7 @@ export type ModalProps = {
   isOpen?: boolean,
   onClose?: ?(SyntheticEvent<HTMLElement>) => mixed,
   hideBackdrop?: boolean,
+  // This prop is removed now
   removeWhenClosed?: boolean,
   tapOutsideToClose?: boolean,
   initialFocus?: number,
@@ -116,13 +117,44 @@ const createPortalRoot = (id: string) => {
 const getModalRoot = (id: string) =>
   document.getElementById(`modal-root-${id}`);
 
+function hasChildNode(nodeList) {
+  for (let i = 0, len = nodeList.length; i < len; i++) {
+    if (nodeList[i].firstChild !== null) {
+      return true;
+    }
+  }
+  return false;
+}
+
+const fixBody = (bodyEl: HTMLBodyElement) => {
+  document.getElementsByTagName('body')[0].classList.add('fixed');
+  bodyEl.style.overflow = 'hidden';
+};
+
+const unfixBody = (bodyEl: HTMLBodyElement) => {
+  document.getElementsByTagName('body')[0].classList.remove('fixed');
+  bodyEl.style.overflow = '';
+};
+
+const checkAndAddBodyOverflow = (bodyEl: HTMLBodyElement) => {
+  const nodes = document.querySelectorAll('[id^="modal-root"]');
+  let isParentModalPresent = false;
+  if (nodes.length) {
+    isParentModalPresent = hasChildNode(nodes);
+  }
+  if (isParentModalPresent) {
+    fixBody(bodyEl);
+  } else {
+    unfixBody(bodyEl);
+  }
+};
+
 export const Modal = ({
   classNames,
   children,
   isOpen = false,
   onClose,
   hideBackdrop = false,
-  removeWhenClosed = true,
   tapOutsideToClose = true,
   initialFocus = -1,
 }: ModalProps): React.Node => {
@@ -150,7 +182,7 @@ export const Modal = ({
       portal.remove();
       // Ensure scroll overflow is removed
       if (bodyEl) {
-        bodyEl.style.overflow = '';
+        unfixBody(bodyEl);
       }
     };
   }, []);
@@ -160,11 +192,11 @@ export const Modal = ({
     const updatePageScroll = () => {
       if (isOpen) {
         if (bodyRef.current) {
-          bodyRef.current.style.overflow = 'hidden';
+          fixBody(bodyRef.current);
         }
       } else {
         if (bodyRef.current) {
-          bodyRef.current.style.overflow = '';
+          unfixBody(bodyRef.current);
         }
       }
     };
@@ -189,7 +221,15 @@ export const Modal = ({
     };
   }, [isOpen, onClose]);
 
-  if (!isTransitioning && removeWhenClosed && !isOpen) {
+  if (!isTransitioning && !isOpen) {
+    // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
+    // TODO(Nishant): Better way to do this?
+    setTimeout(() => {
+      if (bodyRef && !!bodyRef.current) {
+        checkAndAddBodyOverflow(bodyRef.current);
+      }
+    });
+
     return null;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {