@trackunit/react-drawer 0.1.22 → 0.1.23
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 +8 -17
- package/index.esm.js +8 -17
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -91,7 +91,7 @@ const cvaOverlayContainer = cssClassVarianceUtilities.cvaMerge([
|
|
|
91
91
|
"bg-black/30",
|
|
92
92
|
"bg-opacity-50",
|
|
93
93
|
"transition-opacity",
|
|
94
|
-
"duration-
|
|
94
|
+
"duration-500",
|
|
95
95
|
"ease-[cubic-bezier(0.32,0.72,0,1)]",
|
|
96
96
|
"opacity-0",
|
|
97
97
|
], {
|
|
@@ -103,16 +103,7 @@ const cvaOverlayContainer = cssClassVarianceUtilities.cvaMerge([
|
|
|
103
103
|
},
|
|
104
104
|
});
|
|
105
105
|
|
|
106
|
-
const cvaDrawer = cssClassVarianceUtilities.cvaMerge([
|
|
107
|
-
"z-toast",
|
|
108
|
-
"pointer-events-auto",
|
|
109
|
-
"absolute",
|
|
110
|
-
"transform",
|
|
111
|
-
"flex-col",
|
|
112
|
-
"transition-transform",
|
|
113
|
-
"duration-300",
|
|
114
|
-
"ease-[cubic-bezier(0.32,0.72,0,1)]",
|
|
115
|
-
], {
|
|
106
|
+
const cvaDrawer = cssClassVarianceUtilities.cvaMerge(["z-toast", "pointer-events-auto", "absolute", "flex-col", "transition-all", "duration-500", "ease-in-out"], {
|
|
116
107
|
variants: {
|
|
117
108
|
position: {
|
|
118
109
|
left: ["left-0", "top-0", "h-full", "w-fit"],
|
|
@@ -121,20 +112,20 @@ const cvaDrawer = cssClassVarianceUtilities.cvaMerge([
|
|
|
121
112
|
bottom: ["bottom-0", "left-0", "right-0", "max-h-screen", "w-full", "pt-3"],
|
|
122
113
|
},
|
|
123
114
|
mode: {
|
|
124
|
-
open: "", // No additional classes needed; position determines translation
|
|
125
|
-
closed: "", // Translation handled in compoundVariants
|
|
115
|
+
open: ["opacity-100"], // No additional classes needed; position determines translation
|
|
116
|
+
closed: ["opacity-0"], // Translation handled in compoundVariants
|
|
126
117
|
},
|
|
127
118
|
},
|
|
128
119
|
compoundVariants: [
|
|
129
120
|
{
|
|
130
121
|
mode: "open",
|
|
131
122
|
position: "left",
|
|
132
|
-
className: "translate-x-0",
|
|
123
|
+
className: ["translate-x-0"],
|
|
133
124
|
},
|
|
134
125
|
{
|
|
135
126
|
mode: "closed",
|
|
136
127
|
position: "left",
|
|
137
|
-
className: "-translate-x-full",
|
|
128
|
+
className: ["-translate-x-full"],
|
|
138
129
|
},
|
|
139
130
|
{
|
|
140
131
|
mode: "open",
|
|
@@ -210,8 +201,8 @@ onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, data
|
|
|
210
201
|
setMode("closed");
|
|
211
202
|
}
|
|
212
203
|
}, [open]);
|
|
213
|
-
const handleAnimationEnd = react.useCallback(() => {
|
|
214
|
-
if (mode === "closed") {
|
|
204
|
+
const handleAnimationEnd = react.useCallback((transitionEvent) => {
|
|
205
|
+
if (mode === "closed" && transitionEvent.propertyName === "transform") {
|
|
215
206
|
setShouldRender(false);
|
|
216
207
|
}
|
|
217
208
|
}, [mode, setShouldRender]);
|
package/index.esm.js
CHANGED
|
@@ -89,7 +89,7 @@ const cvaOverlayContainer = cvaMerge([
|
|
|
89
89
|
"bg-black/30",
|
|
90
90
|
"bg-opacity-50",
|
|
91
91
|
"transition-opacity",
|
|
92
|
-
"duration-
|
|
92
|
+
"duration-500",
|
|
93
93
|
"ease-[cubic-bezier(0.32,0.72,0,1)]",
|
|
94
94
|
"opacity-0",
|
|
95
95
|
], {
|
|
@@ -101,16 +101,7 @@ const cvaOverlayContainer = cvaMerge([
|
|
|
101
101
|
},
|
|
102
102
|
});
|
|
103
103
|
|
|
104
|
-
const cvaDrawer = cvaMerge([
|
|
105
|
-
"z-toast",
|
|
106
|
-
"pointer-events-auto",
|
|
107
|
-
"absolute",
|
|
108
|
-
"transform",
|
|
109
|
-
"flex-col",
|
|
110
|
-
"transition-transform",
|
|
111
|
-
"duration-300",
|
|
112
|
-
"ease-[cubic-bezier(0.32,0.72,0,1)]",
|
|
113
|
-
], {
|
|
104
|
+
const cvaDrawer = cvaMerge(["z-toast", "pointer-events-auto", "absolute", "flex-col", "transition-all", "duration-500", "ease-in-out"], {
|
|
114
105
|
variants: {
|
|
115
106
|
position: {
|
|
116
107
|
left: ["left-0", "top-0", "h-full", "w-fit"],
|
|
@@ -119,20 +110,20 @@ const cvaDrawer = cvaMerge([
|
|
|
119
110
|
bottom: ["bottom-0", "left-0", "right-0", "max-h-screen", "w-full", "pt-3"],
|
|
120
111
|
},
|
|
121
112
|
mode: {
|
|
122
|
-
open: "", // No additional classes needed; position determines translation
|
|
123
|
-
closed: "", // Translation handled in compoundVariants
|
|
113
|
+
open: ["opacity-100"], // No additional classes needed; position determines translation
|
|
114
|
+
closed: ["opacity-0"], // Translation handled in compoundVariants
|
|
124
115
|
},
|
|
125
116
|
},
|
|
126
117
|
compoundVariants: [
|
|
127
118
|
{
|
|
128
119
|
mode: "open",
|
|
129
120
|
position: "left",
|
|
130
|
-
className: "translate-x-0",
|
|
121
|
+
className: ["translate-x-0"],
|
|
131
122
|
},
|
|
132
123
|
{
|
|
133
124
|
mode: "closed",
|
|
134
125
|
position: "left",
|
|
135
|
-
className: "-translate-x-full",
|
|
126
|
+
className: ["-translate-x-full"],
|
|
136
127
|
},
|
|
137
128
|
{
|
|
138
129
|
mode: "open",
|
|
@@ -208,8 +199,8 @@ onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, data
|
|
|
208
199
|
setMode("closed");
|
|
209
200
|
}
|
|
210
201
|
}, [open]);
|
|
211
|
-
const handleAnimationEnd = useCallback(() => {
|
|
212
|
-
if (mode === "closed") {
|
|
202
|
+
const handleAnimationEnd = useCallback((transitionEvent) => {
|
|
203
|
+
if (mode === "closed" && transitionEvent.propertyName === "transform") {
|
|
213
204
|
setShouldRender(false);
|
|
214
205
|
}
|
|
215
206
|
}, [mode, setShouldRender]);
|