@orangesk/orange-design-system 2.0.0-beta.26 → 2.0.0-beta.28

package/src/components/Modal/Modal.tsx

@@ -1,14 +1,12 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import cx from "classnames";
 
 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,
@@ -83,12 +80,38 @@ const Modal: React.FC<ModalProps> = ({
   disableFooterSpacing,
   ...other
 }) => {
-  const modalConfig = isActive !== undefined ? { disablePortal: true } : {};
+  // In React controlled mode (using isActive), we skip data-modal
+  // so vanilla JS won't initialize and move modal to #root-modals
+  // onHide alone works in uncontrolled mode - it's just a callback
+  const isReactControlled = isActive !== undefined;
+
+  const modalConfig = useMemo(
+    () => (isReactControlled ? { disablePortal: true } : {}),
+    [isReactControlled],
+  );
   const [modalRef, instance] = useStatic(ModalStatic, modalConfig);
 
   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]);
 
@@ -114,7 +137,7 @@ const Modal: React.FC<ModalProps> = ({
   return (
     <div
       id={id}
-      data-modal={!noInit}
+      {...(!isReactControlled && { "data-modal": true })}
       className={CLASS_ROOT}
       ref={modalRef}
       role="dialog"
@@ -124,7 +147,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,