@trackunit/react-modal 1.3.56 → 1.3.60

package/index.cjs.js

@@ -144,15 +144,11 @@ const Modal = ({ isOpen, children, dataTestId, className, containerClassName, ro
         else {
             closeModal();
         }
-    }, [isOpen, openModal, closeModal]);
-    react.useEffect(() => {
+        // Return cleanup function that ensures modal is closed when component unmounts
         return () => {
-            if (isOpen) {
-                closeModal();
-            }
+            closeModal();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // Empty dependency array means this effect runs only on mount and unmount
+    }, [isOpen, openModal, closeModal]);
     return (jsxRuntime.jsx(ModalBackdrop, { isFastOpen: isFastOpen, isVisible: isOpen, noShadow: noBackdropShadow, onClick: onDismissClick, children: isOpen ? (jsxRuntime.jsx("div", { className: cvaModalContainer({ className: containerClassName }), ref: ref, role: role, children: jsxRuntime.jsx(reactComponents.Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
 };
 Modal.displayName = "Modal";
@@ -180,9 +176,8 @@ const useModal = ({ closeOnOutsideClick, bindTo, closeOnEsc = true } = {}) => {
         },
         bindTo,
     });
-    const PortalWrapper = (props) => (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Modal, { isOpen: isOpen, ref: modalRef, ...props }) }));
-    PortalWrapper.displayName = "Modal";
-    const WrappedModal = react.useCallback(PortalWrapper, [Portal, isOpen]);
+    const WrappedModal = react.useCallback(({ children, ...props }) => (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Modal, { isOpen: isOpen, ref: modalRef, ...props, children: children }) })), [Portal, isOpen, modalRef]);
+    WrappedModal.displayName = "Modal";
     return {
         Modal: WrappedModal,
         toggleModal: (e) => {

package/index.esm.js

@@ -142,15 +142,11 @@ const Modal = ({ isOpen, children, dataTestId, className, containerClassName, ro
         else {
             closeModal();
         }
-    }, [isOpen, openModal, closeModal]);
-    useEffect(() => {
+        // Return cleanup function that ensures modal is closed when component unmounts
         return () => {
-            if (isOpen) {
-                closeModal();
-            }
+            closeModal();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // Empty dependency array means this effect runs only on mount and unmount
+    }, [isOpen, openModal, closeModal]);
     return (jsx(ModalBackdrop, { isFastOpen: isFastOpen, isVisible: isOpen, noShadow: noBackdropShadow, onClick: onDismissClick, children: isOpen ? (jsx("div", { className: cvaModalContainer({ className: containerClassName }), ref: ref, role: role, children: jsx(Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
 };
 Modal.displayName = "Modal";
@@ -178,9 +174,8 @@ const useModal = ({ closeOnOutsideClick, bindTo, closeOnEsc = true } = {}) => {
         },
         bindTo,
     });
-    const PortalWrapper = (props) => (jsx(Portal, { children: jsx(Modal, { isOpen: isOpen, ref: modalRef, ...props }) }));
-    PortalWrapper.displayName = "Modal";
-    const WrappedModal = useCallback(PortalWrapper, [Portal, isOpen]);
+    const WrappedModal = useCallback(({ children, ...props }) => (jsx(Portal, { children: jsx(Modal, { isOpen: isOpen, ref: modalRef, ...props, children: children }) })), [Portal, isOpen, modalRef]);
+    WrappedModal.displayName = "Modal";
     return {
         Modal: WrappedModal,
         toggleModal: (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "1.3.56",
+  "version": "1.3.60",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,10 +9,10 @@
   "dependencies": {
     "react": "19.0.0",
     "react-useportal": "1.0.19",
-    "@trackunit/react-components": "1.4.51",
-    "@trackunit/react-core-hooks": "1.3.45",
-    "@trackunit/css-class-variance-utilities": "1.3.43",
-    "@trackunit/i18n-library-translation": "1.3.47"
+    "@trackunit/react-components": "1.4.54",
+    "@trackunit/react-core-hooks": "1.3.46",
+    "@trackunit/css-class-variance-utilities": "1.3.44",
+    "@trackunit/i18n-library-translation": "1.3.48"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/modal/useModal.d.ts

@@ -1,4 +1,4 @@
-import { BaseSyntheticEvent } from "react";
+import { BaseSyntheticEvent, ReactElement } from "react";
 import { ModalProps } from "./Modal";
 export interface UseModalProps {
     closeOnOutsideClick?: boolean;
@@ -12,9 +12,8 @@ export interface UseModalProps {
  * @returns {*} useModal return
  */
 export declare const useModal: ({ closeOnOutsideClick, bindTo, closeOnEsc }?: UseModalProps) => {
-    Modal: {
-        (props: ModalProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
+    Modal: ((props: ModalProps) => ReactElement) & {
+        displayName?: string;
     };
     toggleModal: (e?: BaseSyntheticEvent) => void;
     openModal: (e?: BaseSyntheticEvent) => void;