@trackunit/react-modal 0.0.1 → 0.0.2
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 +21 -2
- package/index.esm.js +21 -2
- package/package.json +3 -2
- package/src/modal/Modal.d.ts +1 -1
package/index.cjs.js
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
|
|
7
7
|
var reactComponents = require('@trackunit/react-components');
|
|
8
|
+
var reactCoreHooks = require('@trackunit/react-core-hooks');
|
|
8
9
|
var React = require('react');
|
|
9
10
|
var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
|
|
10
11
|
var usePortal = require('react-useportal');
|
|
@@ -74,7 +75,16 @@ const setupLibraryTranslations = () => {
|
|
|
74
75
|
i18nLibraryTranslation.registerTranslations(translations);
|
|
75
76
|
};
|
|
76
77
|
|
|
77
|
-
const cvaModalContainer = cssClassVarianceUtilities.cvaMerge([
|
|
78
|
+
const cvaModalContainer = cssClassVarianceUtilities.cvaMerge([
|
|
79
|
+
"h-full",
|
|
80
|
+
"w-full",
|
|
81
|
+
"flex",
|
|
82
|
+
"fixed",
|
|
83
|
+
"top-0",
|
|
84
|
+
"left-0",
|
|
85
|
+
"overflow-hidden",
|
|
86
|
+
"items-center",
|
|
87
|
+
]);
|
|
78
88
|
const cvaModalCard = cssClassVarianceUtilities.cvaMerge([
|
|
79
89
|
"m-auto",
|
|
80
90
|
"shadow-2xl",
|
|
@@ -91,7 +101,7 @@ const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
|
|
|
91
101
|
"left-0",
|
|
92
102
|
"w-full",
|
|
93
103
|
"h-full",
|
|
94
|
-
"z-
|
|
104
|
+
"z-overlay",
|
|
95
105
|
"invisible",
|
|
96
106
|
"opacity-0",
|
|
97
107
|
"transition-all",
|
|
@@ -133,6 +143,15 @@ const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
|
|
|
133
143
|
const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, className, role = "", noBackdropShadow = false, onDismissClick = () => {
|
|
134
144
|
return;
|
|
135
145
|
}, }, ref) => {
|
|
146
|
+
const { openModal, closeModal } = reactCoreHooks.useModalDialogContext();
|
|
147
|
+
React__namespace.useEffect(() => {
|
|
148
|
+
if (isOpen) {
|
|
149
|
+
openModal();
|
|
150
|
+
}
|
|
151
|
+
else {
|
|
152
|
+
closeModal();
|
|
153
|
+
}
|
|
154
|
+
}, [isOpen, openModal, closeModal]);
|
|
136
155
|
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 }));
|
|
137
156
|
});
|
|
138
157
|
Modal.displayName = "Modal";
|
package/index.esm.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { registerTranslations } from '@trackunit/i18n-library-translation';
|
|
3
3
|
import { Card } from '@trackunit/react-components';
|
|
4
|
+
import { useModalDialogContext } from '@trackunit/react-core-hooks';
|
|
4
5
|
import * as React from 'react';
|
|
5
6
|
import { useRef, useCallback } from 'react';
|
|
6
7
|
import { cvaMerge } from '@trackunit/css-class-variance-utilities';
|
|
@@ -48,7 +49,16 @@ const setupLibraryTranslations = () => {
|
|
|
48
49
|
registerTranslations(translations);
|
|
49
50
|
};
|
|
50
51
|
|
|
51
|
-
const cvaModalContainer = cvaMerge([
|
|
52
|
+
const cvaModalContainer = cvaMerge([
|
|
53
|
+
"h-full",
|
|
54
|
+
"w-full",
|
|
55
|
+
"flex",
|
|
56
|
+
"fixed",
|
|
57
|
+
"top-0",
|
|
58
|
+
"left-0",
|
|
59
|
+
"overflow-hidden",
|
|
60
|
+
"items-center",
|
|
61
|
+
]);
|
|
52
62
|
const cvaModalCard = cvaMerge([
|
|
53
63
|
"m-auto",
|
|
54
64
|
"shadow-2xl",
|
|
@@ -65,7 +75,7 @@ const cvaModalBackdrop = cvaMerge([
|
|
|
65
75
|
"left-0",
|
|
66
76
|
"w-full",
|
|
67
77
|
"h-full",
|
|
68
|
-
"z-
|
|
78
|
+
"z-overlay",
|
|
69
79
|
"invisible",
|
|
70
80
|
"opacity-0",
|
|
71
81
|
"transition-all",
|
|
@@ -107,6 +117,15 @@ const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
|
|
|
107
117
|
const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, role = "", noBackdropShadow = false, onDismissClick = () => {
|
|
108
118
|
return;
|
|
109
119
|
}, }, ref) => {
|
|
120
|
+
const { openModal, closeModal } = useModalDialogContext();
|
|
121
|
+
React.useEffect(() => {
|
|
122
|
+
if (isOpen) {
|
|
123
|
+
openModal();
|
|
124
|
+
}
|
|
125
|
+
else {
|
|
126
|
+
closeModal();
|
|
127
|
+
}
|
|
128
|
+
}, [isOpen, openModal, closeModal]);
|
|
110
129
|
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 }));
|
|
111
130
|
});
|
|
112
131
|
Modal.displayName = "Modal";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-modal",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
"@trackunit/react-components": "*",
|
|
12
12
|
"react": "^18.2.0",
|
|
13
13
|
"@trackunit/css-class-variance-utilities": "*",
|
|
14
|
-
"react-useportal": "1.0.18"
|
|
14
|
+
"react-useportal": "1.0.18",
|
|
15
|
+
"@trackunit/react-core-hooks": "*"
|
|
15
16
|
},
|
|
16
17
|
"module": "./index.esm.js",
|
|
17
18
|
"main": "./index.cjs.js"
|
package/src/modal/Modal.d.ts
CHANGED