@rubenpazch/drawer 1.0.0
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/README.md +3 -0
- package/dist/Drawer.d.ts +37 -0
- package/dist/Drawer.d.ts.map +1 -0
- package/dist/index.cjs.js +542 -0
- package/dist/index.d.ts +38 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.esm.js +540 -0
- package/dist/setupTests.d.ts +1 -0
- package/dist/setupTests.d.ts.map +1 -0
- package/package.json +42 -0
package/README.md
ADDED
package/dist/Drawer.d.ts
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type DrawerPosition = "left" | "right" | "top" | "bottom";
|
|
3
|
+
export type DrawerSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
4
|
+
export type DrawerAlign = "left" | "center" | "right" | "space-between";
|
|
5
|
+
export interface DrawerProps {
|
|
6
|
+
/** Whether the drawer is open */
|
|
7
|
+
isOpen: boolean;
|
|
8
|
+
/** Function to close the drawer */
|
|
9
|
+
onClose: () => void;
|
|
10
|
+
/** Position from which the drawer slides in */
|
|
11
|
+
position?: DrawerPosition;
|
|
12
|
+
/** Size of the drawer */
|
|
13
|
+
size?: DrawerSize;
|
|
14
|
+
/** Title displayed in the drawer header */
|
|
15
|
+
title?: string;
|
|
16
|
+
/** Content to render in the drawer */
|
|
17
|
+
children: React.ReactNode;
|
|
18
|
+
/** Whether to show overlay backdrop */
|
|
19
|
+
showOverlay?: boolean;
|
|
20
|
+
/** Whether clicking overlay closes the drawer */
|
|
21
|
+
closeOnOverlayClick?: boolean;
|
|
22
|
+
/** Whether pressing Escape closes the drawer */
|
|
23
|
+
closeOnEscape?: boolean;
|
|
24
|
+
/** Custom className for the drawer content */
|
|
25
|
+
className?: string;
|
|
26
|
+
/** Footer content (typically action buttons) */
|
|
27
|
+
footer?: React.ReactNode;
|
|
28
|
+
/** Header alignment (how to position title and close button) */
|
|
29
|
+
headerAlign?: DrawerAlign;
|
|
30
|
+
/** Footer alignment */
|
|
31
|
+
footerAlign?: DrawerAlign;
|
|
32
|
+
/** Whether the content (header, body, footer) should be contained in a max-width container */
|
|
33
|
+
contentContained?: boolean;
|
|
34
|
+
}
|
|
35
|
+
declare const Drawer: React.FC<DrawerProps>;
|
|
36
|
+
export default Drawer;
|
|
37
|
+
//# sourceMappingURL=Drawer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC5D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,eAAe,CAAC;AAExE,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gEAAgE;IAChE,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,uBAAuB;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,8FAA8F;IAC9F,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+MjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,542 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var require$$0 = require('react');
|
|
4
|
+
var icons = require('@rubenpazch/icons');
|
|
5
|
+
|
|
6
|
+
var jsxRuntime = {exports: {}};
|
|
7
|
+
|
|
8
|
+
var reactJsxRuntime_production = {};
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* @license React
|
|
12
|
+
* react-jsx-runtime.production.js
|
|
13
|
+
*
|
|
14
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
15
|
+
*
|
|
16
|
+
* This source code is licensed under the MIT license found in the
|
|
17
|
+
* LICENSE file in the root directory of this source tree.
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
var hasRequiredReactJsxRuntime_production;
|
|
21
|
+
|
|
22
|
+
function requireReactJsxRuntime_production () {
|
|
23
|
+
if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
|
|
24
|
+
hasRequiredReactJsxRuntime_production = 1;
|
|
25
|
+
var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
|
|
26
|
+
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
|
|
27
|
+
function jsxProd(type, config, maybeKey) {
|
|
28
|
+
var key = null;
|
|
29
|
+
void 0 !== maybeKey && (key = "" + maybeKey);
|
|
30
|
+
void 0 !== config.key && (key = "" + config.key);
|
|
31
|
+
if ("key" in config) {
|
|
32
|
+
maybeKey = {};
|
|
33
|
+
for (var propName in config)
|
|
34
|
+
"key" !== propName && (maybeKey[propName] = config[propName]);
|
|
35
|
+
} else maybeKey = config;
|
|
36
|
+
config = maybeKey.ref;
|
|
37
|
+
return {
|
|
38
|
+
$$typeof: REACT_ELEMENT_TYPE,
|
|
39
|
+
type: type,
|
|
40
|
+
key: key,
|
|
41
|
+
ref: void 0 !== config ? config : null,
|
|
42
|
+
props: maybeKey
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
|
|
46
|
+
reactJsxRuntime_production.jsx = jsxProd;
|
|
47
|
+
reactJsxRuntime_production.jsxs = jsxProd;
|
|
48
|
+
return reactJsxRuntime_production;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
var reactJsxRuntime_development = {};
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* @license React
|
|
55
|
+
* react-jsx-runtime.development.js
|
|
56
|
+
*
|
|
57
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
58
|
+
*
|
|
59
|
+
* This source code is licensed under the MIT license found in the
|
|
60
|
+
* LICENSE file in the root directory of this source tree.
|
|
61
|
+
*/
|
|
62
|
+
|
|
63
|
+
var hasRequiredReactJsxRuntime_development;
|
|
64
|
+
|
|
65
|
+
function requireReactJsxRuntime_development () {
|
|
66
|
+
if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
|
|
67
|
+
hasRequiredReactJsxRuntime_development = 1;
|
|
68
|
+
"production" !== process.env.NODE_ENV &&
|
|
69
|
+
(function () {
|
|
70
|
+
function getComponentNameFromType(type) {
|
|
71
|
+
if (null == type) return null;
|
|
72
|
+
if ("function" === typeof type)
|
|
73
|
+
return type.$$typeof === REACT_CLIENT_REFERENCE
|
|
74
|
+
? null
|
|
75
|
+
: type.displayName || type.name || null;
|
|
76
|
+
if ("string" === typeof type) return type;
|
|
77
|
+
switch (type) {
|
|
78
|
+
case REACT_FRAGMENT_TYPE:
|
|
79
|
+
return "Fragment";
|
|
80
|
+
case REACT_PROFILER_TYPE:
|
|
81
|
+
return "Profiler";
|
|
82
|
+
case REACT_STRICT_MODE_TYPE:
|
|
83
|
+
return "StrictMode";
|
|
84
|
+
case REACT_SUSPENSE_TYPE:
|
|
85
|
+
return "Suspense";
|
|
86
|
+
case REACT_SUSPENSE_LIST_TYPE:
|
|
87
|
+
return "SuspenseList";
|
|
88
|
+
case REACT_ACTIVITY_TYPE:
|
|
89
|
+
return "Activity";
|
|
90
|
+
}
|
|
91
|
+
if ("object" === typeof type)
|
|
92
|
+
switch (
|
|
93
|
+
("number" === typeof type.tag &&
|
|
94
|
+
console.error(
|
|
95
|
+
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
96
|
+
),
|
|
97
|
+
type.$$typeof)
|
|
98
|
+
) {
|
|
99
|
+
case REACT_PORTAL_TYPE:
|
|
100
|
+
return "Portal";
|
|
101
|
+
case REACT_CONTEXT_TYPE:
|
|
102
|
+
return type.displayName || "Context";
|
|
103
|
+
case REACT_CONSUMER_TYPE:
|
|
104
|
+
return (type._context.displayName || "Context") + ".Consumer";
|
|
105
|
+
case REACT_FORWARD_REF_TYPE:
|
|
106
|
+
var innerType = type.render;
|
|
107
|
+
type = type.displayName;
|
|
108
|
+
type ||
|
|
109
|
+
((type = innerType.displayName || innerType.name || ""),
|
|
110
|
+
(type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
|
|
111
|
+
return type;
|
|
112
|
+
case REACT_MEMO_TYPE:
|
|
113
|
+
return (
|
|
114
|
+
(innerType = type.displayName || null),
|
|
115
|
+
null !== innerType
|
|
116
|
+
? innerType
|
|
117
|
+
: getComponentNameFromType(type.type) || "Memo"
|
|
118
|
+
);
|
|
119
|
+
case REACT_LAZY_TYPE:
|
|
120
|
+
innerType = type._payload;
|
|
121
|
+
type = type._init;
|
|
122
|
+
try {
|
|
123
|
+
return getComponentNameFromType(type(innerType));
|
|
124
|
+
} catch (x) {}
|
|
125
|
+
}
|
|
126
|
+
return null;
|
|
127
|
+
}
|
|
128
|
+
function testStringCoercion(value) {
|
|
129
|
+
return "" + value;
|
|
130
|
+
}
|
|
131
|
+
function checkKeyStringCoercion(value) {
|
|
132
|
+
try {
|
|
133
|
+
testStringCoercion(value);
|
|
134
|
+
var JSCompiler_inline_result = !1;
|
|
135
|
+
} catch (e) {
|
|
136
|
+
JSCompiler_inline_result = true;
|
|
137
|
+
}
|
|
138
|
+
if (JSCompiler_inline_result) {
|
|
139
|
+
JSCompiler_inline_result = console;
|
|
140
|
+
var JSCompiler_temp_const = JSCompiler_inline_result.error;
|
|
141
|
+
var JSCompiler_inline_result$jscomp$0 =
|
|
142
|
+
("function" === typeof Symbol &&
|
|
143
|
+
Symbol.toStringTag &&
|
|
144
|
+
value[Symbol.toStringTag]) ||
|
|
145
|
+
value.constructor.name ||
|
|
146
|
+
"Object";
|
|
147
|
+
JSCompiler_temp_const.call(
|
|
148
|
+
JSCompiler_inline_result,
|
|
149
|
+
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
150
|
+
JSCompiler_inline_result$jscomp$0
|
|
151
|
+
);
|
|
152
|
+
return testStringCoercion(value);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
function getTaskName(type) {
|
|
156
|
+
if (type === REACT_FRAGMENT_TYPE) return "<>";
|
|
157
|
+
if (
|
|
158
|
+
"object" === typeof type &&
|
|
159
|
+
null !== type &&
|
|
160
|
+
type.$$typeof === REACT_LAZY_TYPE
|
|
161
|
+
)
|
|
162
|
+
return "<...>";
|
|
163
|
+
try {
|
|
164
|
+
var name = getComponentNameFromType(type);
|
|
165
|
+
return name ? "<" + name + ">" : "<...>";
|
|
166
|
+
} catch (x) {
|
|
167
|
+
return "<...>";
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
function getOwner() {
|
|
171
|
+
var dispatcher = ReactSharedInternals.A;
|
|
172
|
+
return null === dispatcher ? null : dispatcher.getOwner();
|
|
173
|
+
}
|
|
174
|
+
function UnknownOwner() {
|
|
175
|
+
return Error("react-stack-top-frame");
|
|
176
|
+
}
|
|
177
|
+
function hasValidKey(config) {
|
|
178
|
+
if (hasOwnProperty.call(config, "key")) {
|
|
179
|
+
var getter = Object.getOwnPropertyDescriptor(config, "key").get;
|
|
180
|
+
if (getter && getter.isReactWarning) return false;
|
|
181
|
+
}
|
|
182
|
+
return void 0 !== config.key;
|
|
183
|
+
}
|
|
184
|
+
function defineKeyPropWarningGetter(props, displayName) {
|
|
185
|
+
function warnAboutAccessingKey() {
|
|
186
|
+
specialPropKeyWarningShown ||
|
|
187
|
+
((specialPropKeyWarningShown = true),
|
|
188
|
+
console.error(
|
|
189
|
+
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
190
|
+
displayName
|
|
191
|
+
));
|
|
192
|
+
}
|
|
193
|
+
warnAboutAccessingKey.isReactWarning = true;
|
|
194
|
+
Object.defineProperty(props, "key", {
|
|
195
|
+
get: warnAboutAccessingKey,
|
|
196
|
+
configurable: true
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
function elementRefGetterWithDeprecationWarning() {
|
|
200
|
+
var componentName = getComponentNameFromType(this.type);
|
|
201
|
+
didWarnAboutElementRef[componentName] ||
|
|
202
|
+
((didWarnAboutElementRef[componentName] = true),
|
|
203
|
+
console.error(
|
|
204
|
+
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
205
|
+
));
|
|
206
|
+
componentName = this.props.ref;
|
|
207
|
+
return void 0 !== componentName ? componentName : null;
|
|
208
|
+
}
|
|
209
|
+
function ReactElement(type, key, props, owner, debugStack, debugTask) {
|
|
210
|
+
var refProp = props.ref;
|
|
211
|
+
type = {
|
|
212
|
+
$$typeof: REACT_ELEMENT_TYPE,
|
|
213
|
+
type: type,
|
|
214
|
+
key: key,
|
|
215
|
+
props: props,
|
|
216
|
+
_owner: owner
|
|
217
|
+
};
|
|
218
|
+
null !== (void 0 !== refProp ? refProp : null)
|
|
219
|
+
? Object.defineProperty(type, "ref", {
|
|
220
|
+
enumerable: false,
|
|
221
|
+
get: elementRefGetterWithDeprecationWarning
|
|
222
|
+
})
|
|
223
|
+
: Object.defineProperty(type, "ref", { enumerable: false, value: null });
|
|
224
|
+
type._store = {};
|
|
225
|
+
Object.defineProperty(type._store, "validated", {
|
|
226
|
+
configurable: false,
|
|
227
|
+
enumerable: false,
|
|
228
|
+
writable: true,
|
|
229
|
+
value: 0
|
|
230
|
+
});
|
|
231
|
+
Object.defineProperty(type, "_debugInfo", {
|
|
232
|
+
configurable: false,
|
|
233
|
+
enumerable: false,
|
|
234
|
+
writable: true,
|
|
235
|
+
value: null
|
|
236
|
+
});
|
|
237
|
+
Object.defineProperty(type, "_debugStack", {
|
|
238
|
+
configurable: false,
|
|
239
|
+
enumerable: false,
|
|
240
|
+
writable: true,
|
|
241
|
+
value: debugStack
|
|
242
|
+
});
|
|
243
|
+
Object.defineProperty(type, "_debugTask", {
|
|
244
|
+
configurable: false,
|
|
245
|
+
enumerable: false,
|
|
246
|
+
writable: true,
|
|
247
|
+
value: debugTask
|
|
248
|
+
});
|
|
249
|
+
Object.freeze && (Object.freeze(type.props), Object.freeze(type));
|
|
250
|
+
return type;
|
|
251
|
+
}
|
|
252
|
+
function jsxDEVImpl(
|
|
253
|
+
type,
|
|
254
|
+
config,
|
|
255
|
+
maybeKey,
|
|
256
|
+
isStaticChildren,
|
|
257
|
+
debugStack,
|
|
258
|
+
debugTask
|
|
259
|
+
) {
|
|
260
|
+
var children = config.children;
|
|
261
|
+
if (void 0 !== children)
|
|
262
|
+
if (isStaticChildren)
|
|
263
|
+
if (isArrayImpl(children)) {
|
|
264
|
+
for (
|
|
265
|
+
isStaticChildren = 0;
|
|
266
|
+
isStaticChildren < children.length;
|
|
267
|
+
isStaticChildren++
|
|
268
|
+
)
|
|
269
|
+
validateChildKeys(children[isStaticChildren]);
|
|
270
|
+
Object.freeze && Object.freeze(children);
|
|
271
|
+
} else
|
|
272
|
+
console.error(
|
|
273
|
+
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
274
|
+
);
|
|
275
|
+
else validateChildKeys(children);
|
|
276
|
+
if (hasOwnProperty.call(config, "key")) {
|
|
277
|
+
children = getComponentNameFromType(type);
|
|
278
|
+
var keys = Object.keys(config).filter(function (k) {
|
|
279
|
+
return "key" !== k;
|
|
280
|
+
});
|
|
281
|
+
isStaticChildren =
|
|
282
|
+
0 < keys.length
|
|
283
|
+
? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
|
|
284
|
+
: "{key: someKey}";
|
|
285
|
+
didWarnAboutKeySpread[children + isStaticChildren] ||
|
|
286
|
+
((keys =
|
|
287
|
+
0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
|
|
288
|
+
console.error(
|
|
289
|
+
'A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',
|
|
290
|
+
isStaticChildren,
|
|
291
|
+
children,
|
|
292
|
+
keys,
|
|
293
|
+
children
|
|
294
|
+
),
|
|
295
|
+
(didWarnAboutKeySpread[children + isStaticChildren] = true));
|
|
296
|
+
}
|
|
297
|
+
children = null;
|
|
298
|
+
void 0 !== maybeKey &&
|
|
299
|
+
(checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
|
|
300
|
+
hasValidKey(config) &&
|
|
301
|
+
(checkKeyStringCoercion(config.key), (children = "" + config.key));
|
|
302
|
+
if ("key" in config) {
|
|
303
|
+
maybeKey = {};
|
|
304
|
+
for (var propName in config)
|
|
305
|
+
"key" !== propName && (maybeKey[propName] = config[propName]);
|
|
306
|
+
} else maybeKey = config;
|
|
307
|
+
children &&
|
|
308
|
+
defineKeyPropWarningGetter(
|
|
309
|
+
maybeKey,
|
|
310
|
+
"function" === typeof type
|
|
311
|
+
? type.displayName || type.name || "Unknown"
|
|
312
|
+
: type
|
|
313
|
+
);
|
|
314
|
+
return ReactElement(
|
|
315
|
+
type,
|
|
316
|
+
children,
|
|
317
|
+
maybeKey,
|
|
318
|
+
getOwner(),
|
|
319
|
+
debugStack,
|
|
320
|
+
debugTask
|
|
321
|
+
);
|
|
322
|
+
}
|
|
323
|
+
function validateChildKeys(node) {
|
|
324
|
+
isValidElement(node)
|
|
325
|
+
? node._store && (node._store.validated = 1)
|
|
326
|
+
: "object" === typeof node &&
|
|
327
|
+
null !== node &&
|
|
328
|
+
node.$$typeof === REACT_LAZY_TYPE &&
|
|
329
|
+
("fulfilled" === node._payload.status
|
|
330
|
+
? isValidElement(node._payload.value) &&
|
|
331
|
+
node._payload.value._store &&
|
|
332
|
+
(node._payload.value._store.validated = 1)
|
|
333
|
+
: node._store && (node._store.validated = 1));
|
|
334
|
+
}
|
|
335
|
+
function isValidElement(object) {
|
|
336
|
+
return (
|
|
337
|
+
"object" === typeof object &&
|
|
338
|
+
null !== object &&
|
|
339
|
+
object.$$typeof === REACT_ELEMENT_TYPE
|
|
340
|
+
);
|
|
341
|
+
}
|
|
342
|
+
var React = require$$0,
|
|
343
|
+
REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
|
|
344
|
+
REACT_PORTAL_TYPE = Symbol.for("react.portal"),
|
|
345
|
+
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
|
|
346
|
+
REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
|
|
347
|
+
REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
|
|
348
|
+
REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
|
|
349
|
+
REACT_CONTEXT_TYPE = Symbol.for("react.context"),
|
|
350
|
+
REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
|
|
351
|
+
REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
|
|
352
|
+
REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
|
|
353
|
+
REACT_MEMO_TYPE = Symbol.for("react.memo"),
|
|
354
|
+
REACT_LAZY_TYPE = Symbol.for("react.lazy"),
|
|
355
|
+
REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
|
|
356
|
+
REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
|
|
357
|
+
ReactSharedInternals =
|
|
358
|
+
React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
|
|
359
|
+
hasOwnProperty = Object.prototype.hasOwnProperty,
|
|
360
|
+
isArrayImpl = Array.isArray,
|
|
361
|
+
createTask = console.createTask
|
|
362
|
+
? console.createTask
|
|
363
|
+
: function () {
|
|
364
|
+
return null;
|
|
365
|
+
};
|
|
366
|
+
React = {
|
|
367
|
+
react_stack_bottom_frame: function (callStackForError) {
|
|
368
|
+
return callStackForError();
|
|
369
|
+
}
|
|
370
|
+
};
|
|
371
|
+
var specialPropKeyWarningShown;
|
|
372
|
+
var didWarnAboutElementRef = {};
|
|
373
|
+
var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
|
|
374
|
+
React,
|
|
375
|
+
UnknownOwner
|
|
376
|
+
)();
|
|
377
|
+
var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
|
|
378
|
+
var didWarnAboutKeySpread = {};
|
|
379
|
+
reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
|
|
380
|
+
reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
|
|
381
|
+
var trackActualOwner =
|
|
382
|
+
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
|
|
383
|
+
return jsxDEVImpl(
|
|
384
|
+
type,
|
|
385
|
+
config,
|
|
386
|
+
maybeKey,
|
|
387
|
+
false,
|
|
388
|
+
trackActualOwner
|
|
389
|
+
? Error("react-stack-top-frame")
|
|
390
|
+
: unknownOwnerDebugStack,
|
|
391
|
+
trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
|
|
392
|
+
);
|
|
393
|
+
};
|
|
394
|
+
reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
|
|
395
|
+
var trackActualOwner =
|
|
396
|
+
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
|
|
397
|
+
return jsxDEVImpl(
|
|
398
|
+
type,
|
|
399
|
+
config,
|
|
400
|
+
maybeKey,
|
|
401
|
+
true,
|
|
402
|
+
trackActualOwner
|
|
403
|
+
? Error("react-stack-top-frame")
|
|
404
|
+
: unknownOwnerDebugStack,
|
|
405
|
+
trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
|
|
406
|
+
);
|
|
407
|
+
};
|
|
408
|
+
})();
|
|
409
|
+
return reactJsxRuntime_development;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
var hasRequiredJsxRuntime;
|
|
413
|
+
|
|
414
|
+
function requireJsxRuntime () {
|
|
415
|
+
if (hasRequiredJsxRuntime) return jsxRuntime.exports;
|
|
416
|
+
hasRequiredJsxRuntime = 1;
|
|
417
|
+
|
|
418
|
+
if (process.env.NODE_ENV === 'production') {
|
|
419
|
+
jsxRuntime.exports = requireReactJsxRuntime_production();
|
|
420
|
+
} else {
|
|
421
|
+
jsxRuntime.exports = requireReactJsxRuntime_development();
|
|
422
|
+
}
|
|
423
|
+
return jsxRuntime.exports;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
var jsxRuntimeExports = requireJsxRuntime();
|
|
427
|
+
|
|
428
|
+
const Drawer = ({ isOpen, onClose, position = "right", size = "md", title, children, showOverlay = true, closeOnOverlayClick = true, closeOnEscape = true, className = "", footer, headerAlign = "space-between", footerAlign = "right", contentContained = false, }) => {
|
|
429
|
+
const drawerRef = require$$0.useRef(null);
|
|
430
|
+
const [isAnimating, setIsAnimating] = require$$0.useState(false);
|
|
431
|
+
const [shouldRender, setShouldRender] = require$$0.useState(isOpen);
|
|
432
|
+
// Handle mount/unmount with animation
|
|
433
|
+
require$$0.useEffect(() => {
|
|
434
|
+
if (isOpen) {
|
|
435
|
+
setShouldRender(true);
|
|
436
|
+
// Small delay to trigger animation
|
|
437
|
+
requestAnimationFrame(() => {
|
|
438
|
+
requestAnimationFrame(() => {
|
|
439
|
+
setIsAnimating(true);
|
|
440
|
+
});
|
|
441
|
+
});
|
|
442
|
+
}
|
|
443
|
+
else {
|
|
444
|
+
setIsAnimating(false);
|
|
445
|
+
// Wait for animation to complete before unmounting
|
|
446
|
+
const timer = setTimeout(() => {
|
|
447
|
+
setShouldRender(false);
|
|
448
|
+
}, 300); // Match animation duration
|
|
449
|
+
return () => clearTimeout(timer);
|
|
450
|
+
}
|
|
451
|
+
}, [isOpen]);
|
|
452
|
+
const getPositionClasses = () => {
|
|
453
|
+
const base = "fixed bg-white shadow-xl transition-transform duration-300 ease-in-out";
|
|
454
|
+
const sizes = {
|
|
455
|
+
left: {
|
|
456
|
+
sm: "w-64",
|
|
457
|
+
md: "w-80",
|
|
458
|
+
lg: "w-96",
|
|
459
|
+
xl: "w-[32rem]",
|
|
460
|
+
full: "w-full",
|
|
461
|
+
},
|
|
462
|
+
right: {
|
|
463
|
+
sm: "w-64",
|
|
464
|
+
md: "w-80",
|
|
465
|
+
lg: "w-96",
|
|
466
|
+
xl: "w-[32rem]",
|
|
467
|
+
full: "w-full",
|
|
468
|
+
},
|
|
469
|
+
top: {
|
|
470
|
+
sm: "h-64",
|
|
471
|
+
md: "h-80",
|
|
472
|
+
lg: "h-96",
|
|
473
|
+
xl: "h-[32rem]",
|
|
474
|
+
full: "h-full",
|
|
475
|
+
},
|
|
476
|
+
bottom: {
|
|
477
|
+
sm: "h-64",
|
|
478
|
+
md: "h-80",
|
|
479
|
+
lg: "h-96",
|
|
480
|
+
xl: "h-[32rem]",
|
|
481
|
+
full: "h-full",
|
|
482
|
+
},
|
|
483
|
+
};
|
|
484
|
+
const positions = {
|
|
485
|
+
left: "left-0 top-0 h-full",
|
|
486
|
+
right: "right-0 top-0 h-full",
|
|
487
|
+
top: "top-0 left-0 w-full",
|
|
488
|
+
bottom: "bottom-0 left-0 w-full",
|
|
489
|
+
};
|
|
490
|
+
const transforms = {
|
|
491
|
+
left: isAnimating ? "translate-x-0" : "-translate-x-full",
|
|
492
|
+
right: isAnimating ? "translate-x-0" : "translate-x-full",
|
|
493
|
+
top: isAnimating ? "translate-y-0" : "-translate-y-full",
|
|
494
|
+
bottom: isAnimating ? "translate-y-0" : "translate-y-full",
|
|
495
|
+
};
|
|
496
|
+
return `${base} ${positions[position]} ${sizes[position][size]} ${transforms[position]} ${className}`;
|
|
497
|
+
};
|
|
498
|
+
require$$0.useEffect(() => {
|
|
499
|
+
if (!isOpen || !closeOnEscape)
|
|
500
|
+
return;
|
|
501
|
+
const handleEscape = (e) => {
|
|
502
|
+
if (e.key === "Escape") {
|
|
503
|
+
onClose();
|
|
504
|
+
}
|
|
505
|
+
};
|
|
506
|
+
document.addEventListener("keydown", handleEscape);
|
|
507
|
+
return () => document.removeEventListener("keydown", handleEscape);
|
|
508
|
+
}, [isOpen, closeOnEscape, onClose]);
|
|
509
|
+
require$$0.useEffect(() => {
|
|
510
|
+
if (isOpen) {
|
|
511
|
+
document.body.style.overflow = "hidden";
|
|
512
|
+
}
|
|
513
|
+
else {
|
|
514
|
+
document.body.style.overflow = "";
|
|
515
|
+
}
|
|
516
|
+
return () => {
|
|
517
|
+
document.body.style.overflow = "";
|
|
518
|
+
};
|
|
519
|
+
}, [isOpen]);
|
|
520
|
+
require$$0.useEffect(() => {
|
|
521
|
+
if (isAnimating && drawerRef.current) {
|
|
522
|
+
drawerRef.current.focus();
|
|
523
|
+
}
|
|
524
|
+
}, [isAnimating]);
|
|
525
|
+
const handleOverlayClick = () => {
|
|
526
|
+
if (closeOnOverlayClick) {
|
|
527
|
+
onClose();
|
|
528
|
+
}
|
|
529
|
+
};
|
|
530
|
+
// Don't render if not open and animation is complete
|
|
531
|
+
if (!shouldRender)
|
|
532
|
+
return null;
|
|
533
|
+
const footerAlignClass = {
|
|
534
|
+
left: "justify-start",
|
|
535
|
+
center: "justify-center",
|
|
536
|
+
right: "justify-end",
|
|
537
|
+
"space-between": "justify-between",
|
|
538
|
+
}[footerAlign];
|
|
539
|
+
return (jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-50", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? "drawer-title" : undefined, children: [showOverlay && (jsxRuntimeExports.jsx("div", { className: `fixed inset-0 bg-black/50 transition-opacity duration-300 ${isAnimating ? "opacity-100" : "opacity-0"}`, onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntimeExports.jsxs("div", { ref: drawerRef, tabIndex: -1, className: `${getPositionClasses()} flex flex-col`, children: [title && (jsxRuntimeExports.jsx("div", { className: `px-6 py-4 border-b border-gray-200 ${headerAlign === "center" ? "text-center" : ""}`, children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx("h2", { id: "drawer-title", className: "text-lg font-semibold text-gray-900 flex-1", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: "ml-4 p-1 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors", "aria-label": "Close drawer", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: "md" }) })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: contentContained ? (jsxRuntimeExports.jsx("div", { className: "max-w-5xl mx-auto", children: children })) : (children) }), footer && (jsxRuntimeExports.jsx("div", { className: `px-6 py-4 border-t border-gray-200 bg-gray-50 flex ${footerAlignClass}`, children: contentContained ? (jsxRuntimeExports.jsx("div", { className: "max-w-5xl mx-auto w-full", children: footer })) : (footer) }))] })] }));
|
|
540
|
+
};
|
|
541
|
+
|
|
542
|
+
module.exports = Drawer;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
type DrawerPosition = "left" | "right" | "top" | "bottom";
|
|
4
|
+
type DrawerSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
5
|
+
type DrawerAlign = "left" | "center" | "right" | "space-between";
|
|
6
|
+
interface DrawerProps {
|
|
7
|
+
/** Whether the drawer is open */
|
|
8
|
+
isOpen: boolean;
|
|
9
|
+
/** Function to close the drawer */
|
|
10
|
+
onClose: () => void;
|
|
11
|
+
/** Position from which the drawer slides in */
|
|
12
|
+
position?: DrawerPosition;
|
|
13
|
+
/** Size of the drawer */
|
|
14
|
+
size?: DrawerSize;
|
|
15
|
+
/** Title displayed in the drawer header */
|
|
16
|
+
title?: string;
|
|
17
|
+
/** Content to render in the drawer */
|
|
18
|
+
children: React.ReactNode;
|
|
19
|
+
/** Whether to show overlay backdrop */
|
|
20
|
+
showOverlay?: boolean;
|
|
21
|
+
/** Whether clicking overlay closes the drawer */
|
|
22
|
+
closeOnOverlayClick?: boolean;
|
|
23
|
+
/** Whether pressing Escape closes the drawer */
|
|
24
|
+
closeOnEscape?: boolean;
|
|
25
|
+
/** Custom className for the drawer content */
|
|
26
|
+
className?: string;
|
|
27
|
+
/** Footer content (typically action buttons) */
|
|
28
|
+
footer?: React.ReactNode;
|
|
29
|
+
/** Header alignment (how to position title and close button) */
|
|
30
|
+
headerAlign?: DrawerAlign;
|
|
31
|
+
/** Footer alignment */
|
|
32
|
+
footerAlign?: DrawerAlign;
|
|
33
|
+
/** Whether the content (header, body, footer) should be contained in a max-width container */
|
|
34
|
+
contentContained?: boolean;
|
|
35
|
+
}
|
|
36
|
+
declare const Drawer: React.FC<DrawerProps>;
|
|
37
|
+
|
|
38
|
+
export { Drawer as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,540 @@
|
|
|
1
|
+
import require$$0, { useRef, useState, useEffect } from 'react';
|
|
2
|
+
import { CloseIcon } from '@rubenpazch/icons';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = {exports: {}};
|
|
5
|
+
|
|
6
|
+
var reactJsxRuntime_production = {};
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* @license React
|
|
10
|
+
* react-jsx-runtime.production.js
|
|
11
|
+
*
|
|
12
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
13
|
+
*
|
|
14
|
+
* This source code is licensed under the MIT license found in the
|
|
15
|
+
* LICENSE file in the root directory of this source tree.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
var hasRequiredReactJsxRuntime_production;
|
|
19
|
+
|
|
20
|
+
function requireReactJsxRuntime_production () {
|
|
21
|
+
if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
|
|
22
|
+
hasRequiredReactJsxRuntime_production = 1;
|
|
23
|
+
var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
|
|
24
|
+
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
|
|
25
|
+
function jsxProd(type, config, maybeKey) {
|
|
26
|
+
var key = null;
|
|
27
|
+
void 0 !== maybeKey && (key = "" + maybeKey);
|
|
28
|
+
void 0 !== config.key && (key = "" + config.key);
|
|
29
|
+
if ("key" in config) {
|
|
30
|
+
maybeKey = {};
|
|
31
|
+
for (var propName in config)
|
|
32
|
+
"key" !== propName && (maybeKey[propName] = config[propName]);
|
|
33
|
+
} else maybeKey = config;
|
|
34
|
+
config = maybeKey.ref;
|
|
35
|
+
return {
|
|
36
|
+
$$typeof: REACT_ELEMENT_TYPE,
|
|
37
|
+
type: type,
|
|
38
|
+
key: key,
|
|
39
|
+
ref: void 0 !== config ? config : null,
|
|
40
|
+
props: maybeKey
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
|
|
44
|
+
reactJsxRuntime_production.jsx = jsxProd;
|
|
45
|
+
reactJsxRuntime_production.jsxs = jsxProd;
|
|
46
|
+
return reactJsxRuntime_production;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
var reactJsxRuntime_development = {};
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* @license React
|
|
53
|
+
* react-jsx-runtime.development.js
|
|
54
|
+
*
|
|
55
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
56
|
+
*
|
|
57
|
+
* This source code is licensed under the MIT license found in the
|
|
58
|
+
* LICENSE file in the root directory of this source tree.
|
|
59
|
+
*/
|
|
60
|
+
|
|
61
|
+
var hasRequiredReactJsxRuntime_development;
|
|
62
|
+
|
|
63
|
+
function requireReactJsxRuntime_development () {
|
|
64
|
+
if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
|
|
65
|
+
hasRequiredReactJsxRuntime_development = 1;
|
|
66
|
+
"production" !== process.env.NODE_ENV &&
|
|
67
|
+
(function () {
|
|
68
|
+
function getComponentNameFromType(type) {
|
|
69
|
+
if (null == type) return null;
|
|
70
|
+
if ("function" === typeof type)
|
|
71
|
+
return type.$$typeof === REACT_CLIENT_REFERENCE
|
|
72
|
+
? null
|
|
73
|
+
: type.displayName || type.name || null;
|
|
74
|
+
if ("string" === typeof type) return type;
|
|
75
|
+
switch (type) {
|
|
76
|
+
case REACT_FRAGMENT_TYPE:
|
|
77
|
+
return "Fragment";
|
|
78
|
+
case REACT_PROFILER_TYPE:
|
|
79
|
+
return "Profiler";
|
|
80
|
+
case REACT_STRICT_MODE_TYPE:
|
|
81
|
+
return "StrictMode";
|
|
82
|
+
case REACT_SUSPENSE_TYPE:
|
|
83
|
+
return "Suspense";
|
|
84
|
+
case REACT_SUSPENSE_LIST_TYPE:
|
|
85
|
+
return "SuspenseList";
|
|
86
|
+
case REACT_ACTIVITY_TYPE:
|
|
87
|
+
return "Activity";
|
|
88
|
+
}
|
|
89
|
+
if ("object" === typeof type)
|
|
90
|
+
switch (
|
|
91
|
+
("number" === typeof type.tag &&
|
|
92
|
+
console.error(
|
|
93
|
+
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
94
|
+
),
|
|
95
|
+
type.$$typeof)
|
|
96
|
+
) {
|
|
97
|
+
case REACT_PORTAL_TYPE:
|
|
98
|
+
return "Portal";
|
|
99
|
+
case REACT_CONTEXT_TYPE:
|
|
100
|
+
return type.displayName || "Context";
|
|
101
|
+
case REACT_CONSUMER_TYPE:
|
|
102
|
+
return (type._context.displayName || "Context") + ".Consumer";
|
|
103
|
+
case REACT_FORWARD_REF_TYPE:
|
|
104
|
+
var innerType = type.render;
|
|
105
|
+
type = type.displayName;
|
|
106
|
+
type ||
|
|
107
|
+
((type = innerType.displayName || innerType.name || ""),
|
|
108
|
+
(type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
|
|
109
|
+
return type;
|
|
110
|
+
case REACT_MEMO_TYPE:
|
|
111
|
+
return (
|
|
112
|
+
(innerType = type.displayName || null),
|
|
113
|
+
null !== innerType
|
|
114
|
+
? innerType
|
|
115
|
+
: getComponentNameFromType(type.type) || "Memo"
|
|
116
|
+
);
|
|
117
|
+
case REACT_LAZY_TYPE:
|
|
118
|
+
innerType = type._payload;
|
|
119
|
+
type = type._init;
|
|
120
|
+
try {
|
|
121
|
+
return getComponentNameFromType(type(innerType));
|
|
122
|
+
} catch (x) {}
|
|
123
|
+
}
|
|
124
|
+
return null;
|
|
125
|
+
}
|
|
126
|
+
function testStringCoercion(value) {
|
|
127
|
+
return "" + value;
|
|
128
|
+
}
|
|
129
|
+
function checkKeyStringCoercion(value) {
|
|
130
|
+
try {
|
|
131
|
+
testStringCoercion(value);
|
|
132
|
+
var JSCompiler_inline_result = !1;
|
|
133
|
+
} catch (e) {
|
|
134
|
+
JSCompiler_inline_result = true;
|
|
135
|
+
}
|
|
136
|
+
if (JSCompiler_inline_result) {
|
|
137
|
+
JSCompiler_inline_result = console;
|
|
138
|
+
var JSCompiler_temp_const = JSCompiler_inline_result.error;
|
|
139
|
+
var JSCompiler_inline_result$jscomp$0 =
|
|
140
|
+
("function" === typeof Symbol &&
|
|
141
|
+
Symbol.toStringTag &&
|
|
142
|
+
value[Symbol.toStringTag]) ||
|
|
143
|
+
value.constructor.name ||
|
|
144
|
+
"Object";
|
|
145
|
+
JSCompiler_temp_const.call(
|
|
146
|
+
JSCompiler_inline_result,
|
|
147
|
+
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
148
|
+
JSCompiler_inline_result$jscomp$0
|
|
149
|
+
);
|
|
150
|
+
return testStringCoercion(value);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
function getTaskName(type) {
|
|
154
|
+
if (type === REACT_FRAGMENT_TYPE) return "<>";
|
|
155
|
+
if (
|
|
156
|
+
"object" === typeof type &&
|
|
157
|
+
null !== type &&
|
|
158
|
+
type.$$typeof === REACT_LAZY_TYPE
|
|
159
|
+
)
|
|
160
|
+
return "<...>";
|
|
161
|
+
try {
|
|
162
|
+
var name = getComponentNameFromType(type);
|
|
163
|
+
return name ? "<" + name + ">" : "<...>";
|
|
164
|
+
} catch (x) {
|
|
165
|
+
return "<...>";
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
function getOwner() {
|
|
169
|
+
var dispatcher = ReactSharedInternals.A;
|
|
170
|
+
return null === dispatcher ? null : dispatcher.getOwner();
|
|
171
|
+
}
|
|
172
|
+
function UnknownOwner() {
|
|
173
|
+
return Error("react-stack-top-frame");
|
|
174
|
+
}
|
|
175
|
+
function hasValidKey(config) {
|
|
176
|
+
if (hasOwnProperty.call(config, "key")) {
|
|
177
|
+
var getter = Object.getOwnPropertyDescriptor(config, "key").get;
|
|
178
|
+
if (getter && getter.isReactWarning) return false;
|
|
179
|
+
}
|
|
180
|
+
return void 0 !== config.key;
|
|
181
|
+
}
|
|
182
|
+
function defineKeyPropWarningGetter(props, displayName) {
|
|
183
|
+
function warnAboutAccessingKey() {
|
|
184
|
+
specialPropKeyWarningShown ||
|
|
185
|
+
((specialPropKeyWarningShown = true),
|
|
186
|
+
console.error(
|
|
187
|
+
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
188
|
+
displayName
|
|
189
|
+
));
|
|
190
|
+
}
|
|
191
|
+
warnAboutAccessingKey.isReactWarning = true;
|
|
192
|
+
Object.defineProperty(props, "key", {
|
|
193
|
+
get: warnAboutAccessingKey,
|
|
194
|
+
configurable: true
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
function elementRefGetterWithDeprecationWarning() {
|
|
198
|
+
var componentName = getComponentNameFromType(this.type);
|
|
199
|
+
didWarnAboutElementRef[componentName] ||
|
|
200
|
+
((didWarnAboutElementRef[componentName] = true),
|
|
201
|
+
console.error(
|
|
202
|
+
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
203
|
+
));
|
|
204
|
+
componentName = this.props.ref;
|
|
205
|
+
return void 0 !== componentName ? componentName : null;
|
|
206
|
+
}
|
|
207
|
+
function ReactElement(type, key, props, owner, debugStack, debugTask) {
|
|
208
|
+
var refProp = props.ref;
|
|
209
|
+
type = {
|
|
210
|
+
$$typeof: REACT_ELEMENT_TYPE,
|
|
211
|
+
type: type,
|
|
212
|
+
key: key,
|
|
213
|
+
props: props,
|
|
214
|
+
_owner: owner
|
|
215
|
+
};
|
|
216
|
+
null !== (void 0 !== refProp ? refProp : null)
|
|
217
|
+
? Object.defineProperty(type, "ref", {
|
|
218
|
+
enumerable: false,
|
|
219
|
+
get: elementRefGetterWithDeprecationWarning
|
|
220
|
+
})
|
|
221
|
+
: Object.defineProperty(type, "ref", { enumerable: false, value: null });
|
|
222
|
+
type._store = {};
|
|
223
|
+
Object.defineProperty(type._store, "validated", {
|
|
224
|
+
configurable: false,
|
|
225
|
+
enumerable: false,
|
|
226
|
+
writable: true,
|
|
227
|
+
value: 0
|
|
228
|
+
});
|
|
229
|
+
Object.defineProperty(type, "_debugInfo", {
|
|
230
|
+
configurable: false,
|
|
231
|
+
enumerable: false,
|
|
232
|
+
writable: true,
|
|
233
|
+
value: null
|
|
234
|
+
});
|
|
235
|
+
Object.defineProperty(type, "_debugStack", {
|
|
236
|
+
configurable: false,
|
|
237
|
+
enumerable: false,
|
|
238
|
+
writable: true,
|
|
239
|
+
value: debugStack
|
|
240
|
+
});
|
|
241
|
+
Object.defineProperty(type, "_debugTask", {
|
|
242
|
+
configurable: false,
|
|
243
|
+
enumerable: false,
|
|
244
|
+
writable: true,
|
|
245
|
+
value: debugTask
|
|
246
|
+
});
|
|
247
|
+
Object.freeze && (Object.freeze(type.props), Object.freeze(type));
|
|
248
|
+
return type;
|
|
249
|
+
}
|
|
250
|
+
function jsxDEVImpl(
|
|
251
|
+
type,
|
|
252
|
+
config,
|
|
253
|
+
maybeKey,
|
|
254
|
+
isStaticChildren,
|
|
255
|
+
debugStack,
|
|
256
|
+
debugTask
|
|
257
|
+
) {
|
|
258
|
+
var children = config.children;
|
|
259
|
+
if (void 0 !== children)
|
|
260
|
+
if (isStaticChildren)
|
|
261
|
+
if (isArrayImpl(children)) {
|
|
262
|
+
for (
|
|
263
|
+
isStaticChildren = 0;
|
|
264
|
+
isStaticChildren < children.length;
|
|
265
|
+
isStaticChildren++
|
|
266
|
+
)
|
|
267
|
+
validateChildKeys(children[isStaticChildren]);
|
|
268
|
+
Object.freeze && Object.freeze(children);
|
|
269
|
+
} else
|
|
270
|
+
console.error(
|
|
271
|
+
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
272
|
+
);
|
|
273
|
+
else validateChildKeys(children);
|
|
274
|
+
if (hasOwnProperty.call(config, "key")) {
|
|
275
|
+
children = getComponentNameFromType(type);
|
|
276
|
+
var keys = Object.keys(config).filter(function (k) {
|
|
277
|
+
return "key" !== k;
|
|
278
|
+
});
|
|
279
|
+
isStaticChildren =
|
|
280
|
+
0 < keys.length
|
|
281
|
+
? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
|
|
282
|
+
: "{key: someKey}";
|
|
283
|
+
didWarnAboutKeySpread[children + isStaticChildren] ||
|
|
284
|
+
((keys =
|
|
285
|
+
0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
|
|
286
|
+
console.error(
|
|
287
|
+
'A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',
|
|
288
|
+
isStaticChildren,
|
|
289
|
+
children,
|
|
290
|
+
keys,
|
|
291
|
+
children
|
|
292
|
+
),
|
|
293
|
+
(didWarnAboutKeySpread[children + isStaticChildren] = true));
|
|
294
|
+
}
|
|
295
|
+
children = null;
|
|
296
|
+
void 0 !== maybeKey &&
|
|
297
|
+
(checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
|
|
298
|
+
hasValidKey(config) &&
|
|
299
|
+
(checkKeyStringCoercion(config.key), (children = "" + config.key));
|
|
300
|
+
if ("key" in config) {
|
|
301
|
+
maybeKey = {};
|
|
302
|
+
for (var propName in config)
|
|
303
|
+
"key" !== propName && (maybeKey[propName] = config[propName]);
|
|
304
|
+
} else maybeKey = config;
|
|
305
|
+
children &&
|
|
306
|
+
defineKeyPropWarningGetter(
|
|
307
|
+
maybeKey,
|
|
308
|
+
"function" === typeof type
|
|
309
|
+
? type.displayName || type.name || "Unknown"
|
|
310
|
+
: type
|
|
311
|
+
);
|
|
312
|
+
return ReactElement(
|
|
313
|
+
type,
|
|
314
|
+
children,
|
|
315
|
+
maybeKey,
|
|
316
|
+
getOwner(),
|
|
317
|
+
debugStack,
|
|
318
|
+
debugTask
|
|
319
|
+
);
|
|
320
|
+
}
|
|
321
|
+
function validateChildKeys(node) {
|
|
322
|
+
isValidElement(node)
|
|
323
|
+
? node._store && (node._store.validated = 1)
|
|
324
|
+
: "object" === typeof node &&
|
|
325
|
+
null !== node &&
|
|
326
|
+
node.$$typeof === REACT_LAZY_TYPE &&
|
|
327
|
+
("fulfilled" === node._payload.status
|
|
328
|
+
? isValidElement(node._payload.value) &&
|
|
329
|
+
node._payload.value._store &&
|
|
330
|
+
(node._payload.value._store.validated = 1)
|
|
331
|
+
: node._store && (node._store.validated = 1));
|
|
332
|
+
}
|
|
333
|
+
function isValidElement(object) {
|
|
334
|
+
return (
|
|
335
|
+
"object" === typeof object &&
|
|
336
|
+
null !== object &&
|
|
337
|
+
object.$$typeof === REACT_ELEMENT_TYPE
|
|
338
|
+
);
|
|
339
|
+
}
|
|
340
|
+
var React = require$$0,
|
|
341
|
+
REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
|
|
342
|
+
REACT_PORTAL_TYPE = Symbol.for("react.portal"),
|
|
343
|
+
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
|
|
344
|
+
REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
|
|
345
|
+
REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
|
|
346
|
+
REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
|
|
347
|
+
REACT_CONTEXT_TYPE = Symbol.for("react.context"),
|
|
348
|
+
REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
|
|
349
|
+
REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
|
|
350
|
+
REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
|
|
351
|
+
REACT_MEMO_TYPE = Symbol.for("react.memo"),
|
|
352
|
+
REACT_LAZY_TYPE = Symbol.for("react.lazy"),
|
|
353
|
+
REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
|
|
354
|
+
REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
|
|
355
|
+
ReactSharedInternals =
|
|
356
|
+
React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
|
|
357
|
+
hasOwnProperty = Object.prototype.hasOwnProperty,
|
|
358
|
+
isArrayImpl = Array.isArray,
|
|
359
|
+
createTask = console.createTask
|
|
360
|
+
? console.createTask
|
|
361
|
+
: function () {
|
|
362
|
+
return null;
|
|
363
|
+
};
|
|
364
|
+
React = {
|
|
365
|
+
react_stack_bottom_frame: function (callStackForError) {
|
|
366
|
+
return callStackForError();
|
|
367
|
+
}
|
|
368
|
+
};
|
|
369
|
+
var specialPropKeyWarningShown;
|
|
370
|
+
var didWarnAboutElementRef = {};
|
|
371
|
+
var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
|
|
372
|
+
React,
|
|
373
|
+
UnknownOwner
|
|
374
|
+
)();
|
|
375
|
+
var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
|
|
376
|
+
var didWarnAboutKeySpread = {};
|
|
377
|
+
reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
|
|
378
|
+
reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
|
|
379
|
+
var trackActualOwner =
|
|
380
|
+
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
|
|
381
|
+
return jsxDEVImpl(
|
|
382
|
+
type,
|
|
383
|
+
config,
|
|
384
|
+
maybeKey,
|
|
385
|
+
false,
|
|
386
|
+
trackActualOwner
|
|
387
|
+
? Error("react-stack-top-frame")
|
|
388
|
+
: unknownOwnerDebugStack,
|
|
389
|
+
trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
|
|
390
|
+
);
|
|
391
|
+
};
|
|
392
|
+
reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
|
|
393
|
+
var trackActualOwner =
|
|
394
|
+
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
|
|
395
|
+
return jsxDEVImpl(
|
|
396
|
+
type,
|
|
397
|
+
config,
|
|
398
|
+
maybeKey,
|
|
399
|
+
true,
|
|
400
|
+
trackActualOwner
|
|
401
|
+
? Error("react-stack-top-frame")
|
|
402
|
+
: unknownOwnerDebugStack,
|
|
403
|
+
trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
|
|
404
|
+
);
|
|
405
|
+
};
|
|
406
|
+
})();
|
|
407
|
+
return reactJsxRuntime_development;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
var hasRequiredJsxRuntime;
|
|
411
|
+
|
|
412
|
+
function requireJsxRuntime () {
|
|
413
|
+
if (hasRequiredJsxRuntime) return jsxRuntime.exports;
|
|
414
|
+
hasRequiredJsxRuntime = 1;
|
|
415
|
+
|
|
416
|
+
if (process.env.NODE_ENV === 'production') {
|
|
417
|
+
jsxRuntime.exports = requireReactJsxRuntime_production();
|
|
418
|
+
} else {
|
|
419
|
+
jsxRuntime.exports = requireReactJsxRuntime_development();
|
|
420
|
+
}
|
|
421
|
+
return jsxRuntime.exports;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
var jsxRuntimeExports = requireJsxRuntime();
|
|
425
|
+
|
|
426
|
+
const Drawer = ({ isOpen, onClose, position = "right", size = "md", title, children, showOverlay = true, closeOnOverlayClick = true, closeOnEscape = true, className = "", footer, headerAlign = "space-between", footerAlign = "right", contentContained = false, }) => {
|
|
427
|
+
const drawerRef = useRef(null);
|
|
428
|
+
const [isAnimating, setIsAnimating] = useState(false);
|
|
429
|
+
const [shouldRender, setShouldRender] = useState(isOpen);
|
|
430
|
+
// Handle mount/unmount with animation
|
|
431
|
+
useEffect(() => {
|
|
432
|
+
if (isOpen) {
|
|
433
|
+
setShouldRender(true);
|
|
434
|
+
// Small delay to trigger animation
|
|
435
|
+
requestAnimationFrame(() => {
|
|
436
|
+
requestAnimationFrame(() => {
|
|
437
|
+
setIsAnimating(true);
|
|
438
|
+
});
|
|
439
|
+
});
|
|
440
|
+
}
|
|
441
|
+
else {
|
|
442
|
+
setIsAnimating(false);
|
|
443
|
+
// Wait for animation to complete before unmounting
|
|
444
|
+
const timer = setTimeout(() => {
|
|
445
|
+
setShouldRender(false);
|
|
446
|
+
}, 300); // Match animation duration
|
|
447
|
+
return () => clearTimeout(timer);
|
|
448
|
+
}
|
|
449
|
+
}, [isOpen]);
|
|
450
|
+
const getPositionClasses = () => {
|
|
451
|
+
const base = "fixed bg-white shadow-xl transition-transform duration-300 ease-in-out";
|
|
452
|
+
const sizes = {
|
|
453
|
+
left: {
|
|
454
|
+
sm: "w-64",
|
|
455
|
+
md: "w-80",
|
|
456
|
+
lg: "w-96",
|
|
457
|
+
xl: "w-[32rem]",
|
|
458
|
+
full: "w-full",
|
|
459
|
+
},
|
|
460
|
+
right: {
|
|
461
|
+
sm: "w-64",
|
|
462
|
+
md: "w-80",
|
|
463
|
+
lg: "w-96",
|
|
464
|
+
xl: "w-[32rem]",
|
|
465
|
+
full: "w-full",
|
|
466
|
+
},
|
|
467
|
+
top: {
|
|
468
|
+
sm: "h-64",
|
|
469
|
+
md: "h-80",
|
|
470
|
+
lg: "h-96",
|
|
471
|
+
xl: "h-[32rem]",
|
|
472
|
+
full: "h-full",
|
|
473
|
+
},
|
|
474
|
+
bottom: {
|
|
475
|
+
sm: "h-64",
|
|
476
|
+
md: "h-80",
|
|
477
|
+
lg: "h-96",
|
|
478
|
+
xl: "h-[32rem]",
|
|
479
|
+
full: "h-full",
|
|
480
|
+
},
|
|
481
|
+
};
|
|
482
|
+
const positions = {
|
|
483
|
+
left: "left-0 top-0 h-full",
|
|
484
|
+
right: "right-0 top-0 h-full",
|
|
485
|
+
top: "top-0 left-0 w-full",
|
|
486
|
+
bottom: "bottom-0 left-0 w-full",
|
|
487
|
+
};
|
|
488
|
+
const transforms = {
|
|
489
|
+
left: isAnimating ? "translate-x-0" : "-translate-x-full",
|
|
490
|
+
right: isAnimating ? "translate-x-0" : "translate-x-full",
|
|
491
|
+
top: isAnimating ? "translate-y-0" : "-translate-y-full",
|
|
492
|
+
bottom: isAnimating ? "translate-y-0" : "translate-y-full",
|
|
493
|
+
};
|
|
494
|
+
return `${base} ${positions[position]} ${sizes[position][size]} ${transforms[position]} ${className}`;
|
|
495
|
+
};
|
|
496
|
+
useEffect(() => {
|
|
497
|
+
if (!isOpen || !closeOnEscape)
|
|
498
|
+
return;
|
|
499
|
+
const handleEscape = (e) => {
|
|
500
|
+
if (e.key === "Escape") {
|
|
501
|
+
onClose();
|
|
502
|
+
}
|
|
503
|
+
};
|
|
504
|
+
document.addEventListener("keydown", handleEscape);
|
|
505
|
+
return () => document.removeEventListener("keydown", handleEscape);
|
|
506
|
+
}, [isOpen, closeOnEscape, onClose]);
|
|
507
|
+
useEffect(() => {
|
|
508
|
+
if (isOpen) {
|
|
509
|
+
document.body.style.overflow = "hidden";
|
|
510
|
+
}
|
|
511
|
+
else {
|
|
512
|
+
document.body.style.overflow = "";
|
|
513
|
+
}
|
|
514
|
+
return () => {
|
|
515
|
+
document.body.style.overflow = "";
|
|
516
|
+
};
|
|
517
|
+
}, [isOpen]);
|
|
518
|
+
useEffect(() => {
|
|
519
|
+
if (isAnimating && drawerRef.current) {
|
|
520
|
+
drawerRef.current.focus();
|
|
521
|
+
}
|
|
522
|
+
}, [isAnimating]);
|
|
523
|
+
const handleOverlayClick = () => {
|
|
524
|
+
if (closeOnOverlayClick) {
|
|
525
|
+
onClose();
|
|
526
|
+
}
|
|
527
|
+
};
|
|
528
|
+
// Don't render if not open and animation is complete
|
|
529
|
+
if (!shouldRender)
|
|
530
|
+
return null;
|
|
531
|
+
const footerAlignClass = {
|
|
532
|
+
left: "justify-start",
|
|
533
|
+
center: "justify-center",
|
|
534
|
+
right: "justify-end",
|
|
535
|
+
"space-between": "justify-between",
|
|
536
|
+
}[footerAlign];
|
|
537
|
+
return (jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-50", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? "drawer-title" : undefined, children: [showOverlay && (jsxRuntimeExports.jsx("div", { className: `fixed inset-0 bg-black/50 transition-opacity duration-300 ${isAnimating ? "opacity-100" : "opacity-0"}`, onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntimeExports.jsxs("div", { ref: drawerRef, tabIndex: -1, className: `${getPositionClasses()} flex flex-col`, children: [title && (jsxRuntimeExports.jsx("div", { className: `px-6 py-4 border-b border-gray-200 ${headerAlign === "center" ? "text-center" : ""}`, children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx("h2", { id: "drawer-title", className: "text-lg font-semibold text-gray-900 flex-1", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: "ml-4 p-1 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors", "aria-label": "Close drawer", children: jsxRuntimeExports.jsx(CloseIcon, { size: "md" }) })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: contentContained ? (jsxRuntimeExports.jsx("div", { className: "max-w-5xl mx-auto", children: children })) : (children) }), footer && (jsxRuntimeExports.jsx("div", { className: `px-6 py-4 border-t border-gray-200 bg-gray-50 flex ${footerAlignClass}`, children: contentContained ? (jsxRuntimeExports.jsx("div", { className: "max-w-5xl mx-auto w-full", children: footer })) : (footer) }))] })] }));
|
|
538
|
+
};
|
|
539
|
+
|
|
540
|
+
export { Drawer as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=setupTests.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../src/setupTests.ts"],"names":[],"mappings":""}
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@rubenpazch/drawer",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Flexible drawer/sidebar component with multiple positions and animations",
|
|
5
|
+
"private": false,
|
|
6
|
+
"main": "dist/index.cjs.js",
|
|
7
|
+
"module": "dist/index.esm.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/rubenpazch/lbyte-ui-library.git",
|
|
12
|
+
"directory": "packages/drawer"
|
|
13
|
+
},
|
|
14
|
+
"author": "Ruben Paz Chuspe <rubenpazchuspe@outlook.com>",
|
|
15
|
+
"license": "MIT",
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"sideEffects": false,
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"import": "./dist/index.esm.js",
|
|
23
|
+
"require": "./dist/index.cjs.js",
|
|
24
|
+
"types": "./dist/index.d.ts"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"@rubenpazch/icons": "2.0.0"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"@types/react": "^19.0.2",
|
|
32
|
+
"@types/react-dom": "^19.0.2",
|
|
33
|
+
"@rubenpazch/typescript-config": "2.0.0"
|
|
34
|
+
},
|
|
35
|
+
"publishConfig": {
|
|
36
|
+
"access": "public"
|
|
37
|
+
},
|
|
38
|
+
"scripts": {
|
|
39
|
+
"build": "rollup -c",
|
|
40
|
+
"test": "jest --passWithNoTests"
|
|
41
|
+
}
|
|
42
|
+
}
|