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

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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)
+
+
+### Bug Fixes
+
+* added documentation for link ([b233ce2](https://github.com/spaced-out/ui-design-system/commit/b233ce236a2ef4d8297bf4a333cf280d24fb6c87))
+* modal fix ([a8bcb31](https://github.com/spaced-out/ui-design-system/commit/a8bcb318f23006c502f74b569fa268c44856bb9c))
+
 ### [0.1.6](https://github.com/spaced-out/ui-design-system/compare/v0.1.5...v0.1.6) (2023-04-05)
 
 

package/lib/components/Modal/Modal.js

@@ -10,6 +10,7 @@ var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
 var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
 var _motion = require("../../styles/variables/_motion");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _helpers = require("../../utils/helpers");
 var _Button = require("../Button/Button");
 var _Truncate = require("../Truncate/Truncate");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
@@ -60,11 +61,40 @@ const ModalFooter = _ref3 => {
   }, children)));
 };
 exports.ModalFooter = ModalFooter;
-const createPortalRoot = () => {
+const createPortalRoot = id => {
   const modalRoot = document.createElement('div');
-  modalRoot.setAttribute('id', 'modal-root');
+  modalRoot.setAttribute('id', `modal-root-${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,
@@ -72,7 +102,6 @@ const Modal = _ref4 => {
     isOpen = false,
     onClose,
     hideBackdrop = false,
-    removeWhenClosed = true,
     tapOutsideToClose = true,
     initialFocus = -1
   } = _ref4;
@@ -80,8 +109,9 @@ const Modal = _ref4 => {
     floating,
     context
   } = (0, _reactDomInteractions.useFloating)();
+  const modalId = (0, _helpers.uuid)();
   const bodyRef = React.useRef(document.querySelector('body'));
-  const portalRootRef = React.useRef(document.getElementById('modal-root') || createPortalRoot());
+  const portalRootRef = React.useRef(getModalRoot(modalId) || createPortalRoot(modalId));
   const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.motionDurationNormal));
 
   // Append portal root on mount
@@ -94,7 +124,7 @@ const Modal = _ref4 => {
       portal.remove();
       // Ensure scroll overflow is removed
       if (bodyEl) {
-        bodyEl.style.overflow = '';
+        unfixBody(bodyEl);
       }
     };
   }, []);
@@ -104,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);
         }
       }
     };
@@ -129,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

@@ -13,6 +13,7 @@ import {
 import useMountTransition from '../../hooks/useMountTransition';
 import {motionDurationNormal} from '../../styles/variables/_motion';
 import classify from '../../utils/classify';
+import {uuid} from '../../utils/helpers';
 import {Button} from '../Button/Button';
 import {Truncate} from '../Truncate/Truncate';
 
@@ -36,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,
@@ -105,28 +107,63 @@ export const ModalFooter = ({
   </>
 );
 
-const createPortalRoot = () => {
+const createPortalRoot = (id: string) => {
   const modalRoot = document.createElement('div');
-  modalRoot.setAttribute('id', 'modal-root');
+  modalRoot.setAttribute('id', `modal-root-${id}`);
 
   return modalRoot;
 };
 
+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 => {
   const {floating, context} = useFloating();
+  const modalId = uuid();
 
   const bodyRef = React.useRef(document.querySelector('body'));
   const portalRootRef = React.useRef(
-    document.getElementById('modal-root') || createPortalRoot(),
+    getModalRoot(modalId) || createPortalRoot(modalId),
   );
 
   const isTransitioning = useMountTransition(
@@ -145,7 +182,7 @@ export const Modal = ({
       portal.remove();
       // Ensure scroll overflow is removed
       if (bodyEl) {
-        bodyEl.style.overflow = '';
+        unfixBody(bodyEl);
       }
     };
   }, []);
@@ -155,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);
         }
       }
     };
@@ -184,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.6",
+  "version": "0.1.8",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {