@trackunit/react-drawer 2.6.47 → 2.6.48
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 +48 -44
- package/index.esm.js +49 -45
- package/package.json +4 -4
- package/src/components/Drawer/Drawer.variants.d.ts +90 -10
package/index.cjs.js
CHANGED
|
@@ -73,21 +73,22 @@ const setupLibraryTranslations = () => {
|
|
|
73
73
|
const Overlay = ({ open }) => {
|
|
74
74
|
return jsxRuntime.jsx("div", { "aria-hidden": open, className: cvaOverlayContainer({ open }), "data-testid": "drawer-overlay" });
|
|
75
75
|
};
|
|
76
|
-
const cvaOverlayContainer = cssClassVarianceUtilities.
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
76
|
+
const cvaOverlayContainer = cssClassVarianceUtilities.cva({
|
|
77
|
+
base: [
|
|
78
|
+
"absolute",
|
|
79
|
+
"flex",
|
|
80
|
+
"items-center",
|
|
81
|
+
"justify-center",
|
|
82
|
+
"inset-0",
|
|
83
|
+
"bg-black/50",
|
|
84
|
+
"transition-opacity",
|
|
85
|
+
// Match panel motion so backdrop and slide stay in sync.
|
|
86
|
+
"duration-400",
|
|
87
|
+
"[transition-timing-function:cubic-bezier(0.4,0,0.2,1)]",
|
|
88
|
+
"opacity-0",
|
|
89
|
+
// Parent viewport is pointer-events-none; re-enable so modal dismiss works.
|
|
90
|
+
"pointer-events-none",
|
|
91
|
+
],
|
|
91
92
|
variants: {
|
|
92
93
|
open: {
|
|
93
94
|
true: "z-overlay pointer-events-auto opacity-100",
|
|
@@ -111,14 +112,15 @@ const cvaOverlayContainer = cssClassVarianceUtilities.cvaMerge([
|
|
|
111
112
|
* within this local context, so their in-panel `z-overlay` still keeps the panel
|
|
112
113
|
* above the backdrop.
|
|
113
114
|
*/
|
|
114
|
-
const cvaDrawerViewport = cssClassVarianceUtilities.
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
115
|
+
const cvaDrawerViewport = cssClassVarianceUtilities.cva({
|
|
116
|
+
base: [
|
|
117
|
+
"inset-0",
|
|
118
|
+
"z-drawer",
|
|
119
|
+
"overflow-hidden",
|
|
120
|
+
"overscroll-none",
|
|
121
|
+
// Let non-modal drawers keep the page interactive; panel/overlay opt back in.
|
|
122
|
+
"pointer-events-none",
|
|
123
|
+
],
|
|
122
124
|
variants: {
|
|
123
125
|
portaled: {
|
|
124
126
|
true: ["fixed"],
|
|
@@ -129,26 +131,27 @@ const cvaDrawerViewport = cssClassVarianceUtilities.cvaMerge([
|
|
|
129
131
|
portaled: true,
|
|
130
132
|
},
|
|
131
133
|
});
|
|
132
|
-
const cvaDrawer = cssClassVarianceUtilities.
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
],
|
|
134
|
+
const cvaDrawer = cssClassVarianceUtilities.cva({
|
|
135
|
+
base: [
|
|
136
|
+
"z-overlay",
|
|
137
|
+
"pointer-events-auto",
|
|
138
|
+
"absolute",
|
|
139
|
+
"flex-col",
|
|
140
|
+
"bg-white",
|
|
141
|
+
// Transform + transition are applied via getDrawerMotionStyle (inline) so
|
|
142
|
+
// motion does not depend on host Tailwind picking up arbitrary utilities.
|
|
143
|
+
//
|
|
144
|
+
// Width contract: every drawer opens at the same width at the same viewport.
|
|
145
|
+
// On mobile the panel spans the viewport; from `sm` (480 px in this repo)
|
|
146
|
+
// up it locks to a fixed 28rem regardless of viewport size. Consumers that
|
|
147
|
+
// genuinely need a different width pass a width utility via `className` and
|
|
148
|
+
// `twMerge` (the wrapper's `onComplete` hook) lets the caller's utility win at its
|
|
149
|
+
// breakpoint. `max-w` is a safety cap so no override can exceed the
|
|
150
|
+
// viewport.
|
|
151
|
+
"w-full",
|
|
152
|
+
"sm:w-[28rem]",
|
|
153
|
+
"max-w-[100dvw]",
|
|
154
|
+
],
|
|
152
155
|
variants: {
|
|
153
156
|
position: {
|
|
154
157
|
left: ["left-0", "top-0", "h-full"],
|
|
@@ -167,7 +170,8 @@ const cvaDrawer = cssClassVarianceUtilities.cvaMerge([
|
|
|
167
170
|
mode: "closed",
|
|
168
171
|
},
|
|
169
172
|
});
|
|
170
|
-
const cvaDrawerContent = cssClassVarianceUtilities.
|
|
173
|
+
const cvaDrawerContent = cssClassVarianceUtilities.cva({
|
|
174
|
+
base: ["flex", "flex-col", "h-full"],
|
|
171
175
|
variants: {
|
|
172
176
|
position: {
|
|
173
177
|
left: "rounded-r-lg",
|
package/index.esm.js
CHANGED
|
@@ -3,7 +3,7 @@ import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-l
|
|
|
3
3
|
import { useMergeRefs, FloatingFocusManager, useFloating, useDismiss, useInteractions } from '@floating-ui/react';
|
|
4
4
|
import { useViewportBreakpoints, Portal, IconButton, Icon, MoreMenu } from '@trackunit/react-components';
|
|
5
5
|
import { useRef, useState, useReducer, useEffect, useLayoutEffect, useCallback, useMemo } from 'react';
|
|
6
|
-
import {
|
|
6
|
+
import { cva } from '@trackunit/css-class-variance-utilities';
|
|
7
7
|
import { twMerge } from 'tailwind-merge';
|
|
8
8
|
|
|
9
9
|
var defaultTranslations = {
|
|
@@ -71,21 +71,22 @@ const setupLibraryTranslations = () => {
|
|
|
71
71
|
const Overlay = ({ open }) => {
|
|
72
72
|
return jsx("div", { "aria-hidden": open, className: cvaOverlayContainer({ open }), "data-testid": "drawer-overlay" });
|
|
73
73
|
};
|
|
74
|
-
const cvaOverlayContainer =
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
74
|
+
const cvaOverlayContainer = cva({
|
|
75
|
+
base: [
|
|
76
|
+
"absolute",
|
|
77
|
+
"flex",
|
|
78
|
+
"items-center",
|
|
79
|
+
"justify-center",
|
|
80
|
+
"inset-0",
|
|
81
|
+
"bg-black/50",
|
|
82
|
+
"transition-opacity",
|
|
83
|
+
// Match panel motion so backdrop and slide stay in sync.
|
|
84
|
+
"duration-400",
|
|
85
|
+
"[transition-timing-function:cubic-bezier(0.4,0,0.2,1)]",
|
|
86
|
+
"opacity-0",
|
|
87
|
+
// Parent viewport is pointer-events-none; re-enable so modal dismiss works.
|
|
88
|
+
"pointer-events-none",
|
|
89
|
+
],
|
|
89
90
|
variants: {
|
|
90
91
|
open: {
|
|
91
92
|
true: "z-overlay pointer-events-auto opacity-100",
|
|
@@ -109,14 +110,15 @@ const cvaOverlayContainer = cvaMerge([
|
|
|
109
110
|
* within this local context, so their in-panel `z-overlay` still keeps the panel
|
|
110
111
|
* above the backdrop.
|
|
111
112
|
*/
|
|
112
|
-
const cvaDrawerViewport =
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
113
|
+
const cvaDrawerViewport = cva({
|
|
114
|
+
base: [
|
|
115
|
+
"inset-0",
|
|
116
|
+
"z-drawer",
|
|
117
|
+
"overflow-hidden",
|
|
118
|
+
"overscroll-none",
|
|
119
|
+
// Let non-modal drawers keep the page interactive; panel/overlay opt back in.
|
|
120
|
+
"pointer-events-none",
|
|
121
|
+
],
|
|
120
122
|
variants: {
|
|
121
123
|
portaled: {
|
|
122
124
|
true: ["fixed"],
|
|
@@ -127,26 +129,27 @@ const cvaDrawerViewport = cvaMerge([
|
|
|
127
129
|
portaled: true,
|
|
128
130
|
},
|
|
129
131
|
});
|
|
130
|
-
const cvaDrawer =
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
],
|
|
132
|
+
const cvaDrawer = cva({
|
|
133
|
+
base: [
|
|
134
|
+
"z-overlay",
|
|
135
|
+
"pointer-events-auto",
|
|
136
|
+
"absolute",
|
|
137
|
+
"flex-col",
|
|
138
|
+
"bg-white",
|
|
139
|
+
// Transform + transition are applied via getDrawerMotionStyle (inline) so
|
|
140
|
+
// motion does not depend on host Tailwind picking up arbitrary utilities.
|
|
141
|
+
//
|
|
142
|
+
// Width contract: every drawer opens at the same width at the same viewport.
|
|
143
|
+
// On mobile the panel spans the viewport; from `sm` (480 px in this repo)
|
|
144
|
+
// up it locks to a fixed 28rem regardless of viewport size. Consumers that
|
|
145
|
+
// genuinely need a different width pass a width utility via `className` and
|
|
146
|
+
// `twMerge` (the wrapper's `onComplete` hook) lets the caller's utility win at its
|
|
147
|
+
// breakpoint. `max-w` is a safety cap so no override can exceed the
|
|
148
|
+
// viewport.
|
|
149
|
+
"w-full",
|
|
150
|
+
"sm:w-[28rem]",
|
|
151
|
+
"max-w-[100dvw]",
|
|
152
|
+
],
|
|
150
153
|
variants: {
|
|
151
154
|
position: {
|
|
152
155
|
left: ["left-0", "top-0", "h-full"],
|
|
@@ -165,7 +168,8 @@ const cvaDrawer = cvaMerge([
|
|
|
165
168
|
mode: "closed",
|
|
166
169
|
},
|
|
167
170
|
});
|
|
168
|
-
const cvaDrawerContent =
|
|
171
|
+
const cvaDrawerContent = cva({
|
|
172
|
+
base: ["flex", "flex-col", "h-full"],
|
|
169
173
|
variants: {
|
|
170
174
|
position: {
|
|
171
175
|
left: "rounded-r-lg",
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-drawer",
|
|
3
|
-
"version": "2.6.
|
|
3
|
+
"version": "2.6.48",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
7
7
|
"node": ">=24.x"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@trackunit/react-components": "2.13.
|
|
11
|
-
"@trackunit/css-class-variance-utilities": "
|
|
12
|
-
"@trackunit/i18n-library-translation": "2.4.
|
|
10
|
+
"@trackunit/react-components": "2.13.1",
|
|
11
|
+
"@trackunit/css-class-variance-utilities": "2.0.0",
|
|
12
|
+
"@trackunit/i18n-library-translation": "2.4.42",
|
|
13
13
|
"@floating-ui/react": "^0.26.25",
|
|
14
14
|
"tailwind-merge": "^2.0.0"
|
|
15
15
|
},
|
|
@@ -13,13 +13,93 @@
|
|
|
13
13
|
* within this local context, so their in-panel `z-overlay` still keeps the panel
|
|
14
14
|
* above the backdrop.
|
|
15
15
|
*/
|
|
16
|
-
export declare const cvaDrawerViewport: (
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
16
|
+
export declare const cvaDrawerViewport: import("cva").CVAComponent<Omit<{
|
|
17
|
+
base: string[];
|
|
18
|
+
variants: {
|
|
19
|
+
portaled: {
|
|
20
|
+
true: string[];
|
|
21
|
+
false: string[];
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
defaultVariants: {
|
|
25
|
+
portaled: true;
|
|
26
|
+
};
|
|
27
|
+
}, "defaultVariants"> & {
|
|
28
|
+
variants: {
|
|
29
|
+
portaled: {
|
|
30
|
+
true: string[];
|
|
31
|
+
false: string[];
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
defaultVariants: Omit<{}, "portaled"> & {
|
|
35
|
+
portaled: true;
|
|
36
|
+
};
|
|
37
|
+
}, {
|
|
38
|
+
portaled: {
|
|
39
|
+
true: string[];
|
|
40
|
+
false: string[];
|
|
41
|
+
};
|
|
42
|
+
}>;
|
|
43
|
+
export declare const cvaDrawer: import("cva").CVAComponent<Omit<{
|
|
44
|
+
base: string[];
|
|
45
|
+
variants: {
|
|
46
|
+
position: {
|
|
47
|
+
left: string[];
|
|
48
|
+
right: string[];
|
|
49
|
+
};
|
|
50
|
+
mode: {
|
|
51
|
+
open: string[];
|
|
52
|
+
closed: string[];
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
defaultVariants: {
|
|
56
|
+
position: "left";
|
|
57
|
+
mode: "closed";
|
|
58
|
+
};
|
|
59
|
+
}, "defaultVariants"> & {
|
|
60
|
+
variants: {
|
|
61
|
+
position: {
|
|
62
|
+
left: string[];
|
|
63
|
+
right: string[];
|
|
64
|
+
};
|
|
65
|
+
mode: {
|
|
66
|
+
open: string[];
|
|
67
|
+
closed: string[];
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
defaultVariants: Omit<{}, "position" | "mode"> & {
|
|
71
|
+
position: "left";
|
|
72
|
+
mode: "closed";
|
|
73
|
+
};
|
|
74
|
+
}, {
|
|
75
|
+
position: {
|
|
76
|
+
left: string[];
|
|
77
|
+
right: string[];
|
|
78
|
+
};
|
|
79
|
+
mode: {
|
|
80
|
+
open: string[];
|
|
81
|
+
closed: string[];
|
|
82
|
+
};
|
|
83
|
+
}>;
|
|
84
|
+
export declare const cvaDrawerContent: import("cva").CVAComponent<Omit<{
|
|
85
|
+
base: string[];
|
|
86
|
+
variants: {
|
|
87
|
+
position: {
|
|
88
|
+
left: string;
|
|
89
|
+
right: string;
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
}, "defaultVariants"> & {
|
|
93
|
+
variants: {
|
|
94
|
+
position: {
|
|
95
|
+
left: string;
|
|
96
|
+
right: string;
|
|
97
|
+
};
|
|
98
|
+
};
|
|
99
|
+
defaultVariants: Omit<{}, never>;
|
|
100
|
+
}, {
|
|
101
|
+
position: {
|
|
102
|
+
left: string;
|
|
103
|
+
right: string;
|
|
104
|
+
};
|
|
105
|
+
}>;
|