@orangesk/orange-design-system 2.0.0-beta.25 → 2.0.0-beta.27

package/src/components/Modal/Modal.static.ts

@@ -134,7 +134,21 @@ export default class Modal {
   }
 
   destroy(): void {
-    this.instance.destroy();
+    if (this.instance) {
+      // Don't call this.instance.destroy() because a11y-dialog's destroy
+      // does replaceWith(cloneNode(true)) which breaks React!
+      // Instead, just hide and let the instance be garbage collected
+      this.instance.hide();
+      // Cast to any to access private methods for cleanup
+      const dialog = this.instance as any;
+      document.removeEventListener("click", dialog.handleTriggerClicks, true);
+      document.body.removeEventListener("focus", dialog.maintainFocus, true);
+      this.element.removeEventListener("keydown", dialog.bindKeypress, true);
+
+      // Make sure scroll is unlocked when destroying
+      Modal.unlockBody();
+    }
+
     this.element.ODS_Modal = this;
   }
 
@@ -153,74 +167,48 @@ export default class Modal {
     }
   }
 
+  // Track if body is locked
+  private static isLocked = false;
+
   static lockBody(className?: string, root?: string): void {
+    if (Modal.isLocked) return;
+
     const actualClassName =
       className || (this as unknown as Modal).config?.classModalIsOpenBody;
-    const actualRoot = root || (this as unknown as Modal).config?.root;
-
-    const container = document.querySelector(actualRoot);
-    // store current scrollTop value
-    const scrollTop =
-      document.documentElement.scrollTop || document.body.scrollTop;
-    document.body.setAttribute("data-lock-scrolltop", scrollTop.toString());
-
-    // add locking styles to body
-    document.body.style.height = "100%";
-    document.body.style.width = "100%";
-    document.body.style.overflow = "hidden";
-    document.body.style.position = "fixed";
 
-    // add locking styles to scrollTop
-    if (container) {
-      (container as HTMLElement).style.height = "100%";
-      (container as HTMLElement).style.width = "100%";
-      (container as HTMLElement).style.overflow = "hidden";
-      (container as HTMLElement).style.position = "fixed";
-      // scroll page-container to scrollTop position
-      (container as HTMLElement).scrollTop = scrollTop;
-    }
+    // Store scroll position
+    const scrollY = window.scrollY;
+    document.body.setAttribute("data-lock-scrolltop", scrollY.toString());
+
+    // Lock body with position fixed and offset
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.left = "0";
+    document.body.style.right = "0";
 
     // add modal class
     document.body.classList.add(actualClassName);
-
-    // attempt to scroll top fixed position
-    window.requestAnimationFrame(() => {
-      window.scrollTo(0, scrollTop);
-    });
+    Modal.isLocked = true;
   }
 
   static unlockBody(className?: string, root?: string): void {
+    if (!Modal.isLocked) return;
+
     const actualClassName =
       className || (this as unknown as Modal).config?.classModalIsOpenBody;
-    const actualRoot = root || (this as unknown as Modal).config?.root;
-
-    const container = document.querySelector(actualRoot);
     const scrollTop = document.body.getAttribute("data-lock-scrolltop") || "0";
 
-    // remove locking styles from body
-    document.body.style.height = "";
-    document.body.style.width = "";
-    document.body.style.overflow = "";
+    // Remove lock styles
     document.body.style.position = "";
+    document.body.style.top = "";
+    document.body.style.left = "";
+    document.body.style.right = "";
 
-    // add modal class
+    // remove modal class
     document.body.classList.remove(actualClassName);
 
-    // remove locking styles from page-container
-    if (container) {
-      (container as HTMLElement).style.height = "";
-      (container as HTMLElement).style.width = "";
-      (container as HTMLElement).style.overflow = "";
-      (container as HTMLElement).style.position = "";
-    }
-
-    // set scroll position back
-    window.requestAnimationFrame(() => {
-      window.scrollTo({
-        left: 0,
-        top: parseInt(scrollTop, 10),
-        behavior: "instant" as ScrollBehavior,
-      });
-    });
+    // Restore scroll position
+    window.scrollTo(0, parseInt(scrollTop, 10));
+    Modal.isLocked = false;
   }
 }

package/src/components/Modal/Modal.tsx

@@ -7,8 +7,6 @@ import { useStatic } from "../../utils/hooks";
 import ConditionalWrapper from "../../utils/ConditionalWrapper";
 import { Button } from "../Button";
 import { Buttons } from "../Buttons";
-
-// Use JavaScript version for now, then convert to TypeScript later
 import ModalStatic from "./Modal.static";
 import { ModalCloseButton } from "./ModalCloseButton";
 import { ModalTitle } from "./ModalTitle";
@@ -31,8 +29,8 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   id: string;
   /** isActive controls if modal is opened or closed */
   isActive?: boolean;
-  /** Disable plugin initialization. */
-  noInit?: boolean;
+  /** Callback fired when modal is closed */
+  onHide?: () => void;
   /** Custom header renderer. Receives id as function param. Returned element(s) must contain a header with close button. */
   renderHeader?: (id: string) => React.ReactNode;
   /** Custom body renderer. Receives title as function param. Returned element(s) must contain a title. */
@@ -61,7 +59,6 @@ const defaultProps = {
       Zatvoriť
     </Button>,
   ],
-  noInit: false,
 };
 
 const Modal: React.FC<ModalProps> = ({
@@ -70,8 +67,8 @@ const Modal: React.FC<ModalProps> = ({
   children,
   hasStickyFooter,
   id,
-  noInit = defaultProps.noInit,
   isActive,
+  onHide,
   size,
   title,
   renderHeader,
@@ -86,8 +83,26 @@ const Modal: React.FC<ModalProps> = ({
   const [modalRef, instance] = useStatic(ModalStatic);
 
   useEffect(() => {
-    if (isActive && instance && (instance as any).current) {
-      (instance as any).current.show();
+    if (!instance.current || !onHide) return;
+
+    const handleHide = () => {
+      onHide();
+    };
+
+    instance.current.instance.on("hide", handleHide);
+
+    return () => {
+      instance.current?.instance.off("hide", handleHide);
+    };
+  }, [instance, onHide]);
+
+  useEffect(() => {
+    if (!instance.current) return;
+
+    if (isActive) {
+      instance.current.show();
+    } else if (isActive === false) {
+      instance.current.hide();
     }
   }, [instance, isActive]);
 
@@ -113,7 +128,7 @@ const Modal: React.FC<ModalProps> = ({
   return (
     <div
       id={id}
-      data-modal={!noInit}
+      data-modal
       className={CLASS_ROOT}
       ref={modalRef}
       role="dialog"
@@ -123,7 +138,6 @@ const Modal: React.FC<ModalProps> = ({
     >
       <div className="modal__overlay" tabIndex={-1} data-a11y-dialog-hide />
       <div className={dialogClasses} role="document" {...other}>
-        {}
         <div
           className={cx(`${CLASS_ROOT}__header`, {
             [`${CLASS_ROOT}__header--no-spacing`]: disableHeaderSpacing,