@trackunit/react-modal 0.0.9 → 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs.js +13 -2
- package/index.esm.js +13 -2
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -82,7 +82,9 @@ const cvaModalContainer = cssClassVarianceUtilities.cvaMerge([
|
|
|
82
82
|
"fixed",
|
|
83
83
|
"top-0",
|
|
84
84
|
"left-0",
|
|
85
|
-
"
|
|
85
|
+
"min-h-[100dvh]",
|
|
86
|
+
"min-w-[100dvw]",
|
|
87
|
+
"overflow-auto",
|
|
86
88
|
"items-center",
|
|
87
89
|
]);
|
|
88
90
|
const cvaModalCard = cssClassVarianceUtilities.cvaMerge([
|
|
@@ -93,12 +95,13 @@ const cvaModalCard = cssClassVarianceUtilities.cvaMerge([
|
|
|
93
95
|
"max-w-[min(100%-1rem,30%+600px)]",
|
|
94
96
|
]);
|
|
95
97
|
const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
|
|
96
|
-
"flex",
|
|
97
98
|
"justify-center",
|
|
98
99
|
"items-center",
|
|
99
100
|
"fixed",
|
|
100
101
|
"top-0",
|
|
101
102
|
"left-0",
|
|
103
|
+
"min-h-[100dvh]",
|
|
104
|
+
"min-w-[100dvw]",
|
|
102
105
|
"w-full",
|
|
103
106
|
"h-full",
|
|
104
107
|
"z-overlay",
|
|
@@ -152,6 +155,14 @@ const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, class
|
|
|
152
155
|
closeModal();
|
|
153
156
|
}
|
|
154
157
|
}, [isOpen, openModal, closeModal]);
|
|
158
|
+
React__namespace.useEffect(() => {
|
|
159
|
+
return () => {
|
|
160
|
+
if (isOpen) {
|
|
161
|
+
closeModal();
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
165
|
+
}, []); // Empty dependency array means this effect runs only on mount and unmount
|
|
155
166
|
return (jsxRuntime.jsx(ModalBackdrop, { isVisible: isOpen, noShadow: noBackdropShadow, onClick: onDismissClick, children: isOpen ? (jsxRuntime.jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsxRuntime.jsx(reactComponents.Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
|
|
156
167
|
});
|
|
157
168
|
Modal.displayName = "Modal";
|
package/index.esm.js
CHANGED
|
@@ -56,7 +56,9 @@ const cvaModalContainer = cvaMerge([
|
|
|
56
56
|
"fixed",
|
|
57
57
|
"top-0",
|
|
58
58
|
"left-0",
|
|
59
|
-
"
|
|
59
|
+
"min-h-[100dvh]",
|
|
60
|
+
"min-w-[100dvw]",
|
|
61
|
+
"overflow-auto",
|
|
60
62
|
"items-center",
|
|
61
63
|
]);
|
|
62
64
|
const cvaModalCard = cvaMerge([
|
|
@@ -67,12 +69,13 @@ const cvaModalCard = cvaMerge([
|
|
|
67
69
|
"max-w-[min(100%-1rem,30%+600px)]",
|
|
68
70
|
]);
|
|
69
71
|
const cvaModalBackdrop = cvaMerge([
|
|
70
|
-
"flex",
|
|
71
72
|
"justify-center",
|
|
72
73
|
"items-center",
|
|
73
74
|
"fixed",
|
|
74
75
|
"top-0",
|
|
75
76
|
"left-0",
|
|
77
|
+
"min-h-[100dvh]",
|
|
78
|
+
"min-w-[100dvw]",
|
|
76
79
|
"w-full",
|
|
77
80
|
"h-full",
|
|
78
81
|
"z-overlay",
|
|
@@ -126,6 +129,14 @@ const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, role
|
|
|
126
129
|
closeModal();
|
|
127
130
|
}
|
|
128
131
|
}, [isOpen, openModal, closeModal]);
|
|
132
|
+
React.useEffect(() => {
|
|
133
|
+
return () => {
|
|
134
|
+
if (isOpen) {
|
|
135
|
+
closeModal();
|
|
136
|
+
}
|
|
137
|
+
};
|
|
138
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
139
|
+
}, []); // Empty dependency array means this effect runs only on mount and unmount
|
|
129
140
|
return (jsx(ModalBackdrop, { isVisible: isOpen, noShadow: noBackdropShadow, onClick: onDismissClick, children: isOpen ? (jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsx(Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
|
|
130
141
|
});
|
|
131
142
|
Modal.displayName = "Modal";
|