@react-lgpd-consent/mui 0.7.0 → 0.7.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/README.md +6 -1
- package/dist/index.cjs +90 -32
- package/dist/index.d.cts +57 -4
- package/dist/index.d.ts +57 -4
- package/dist/index.js +90 -32
- package/dist/ui.cjs +673 -0
- package/dist/ui.d.cts +9 -0
- package/dist/ui.d.ts +9 -0
- package/dist/ui.js +628 -0
- package/package.json +10 -5
package/dist/ui.js
ADDED
|
@@ -0,0 +1,628 @@
|
|
|
1
|
+
import Link from '@mui/material/Link';
|
|
2
|
+
import Typography from '@mui/material/Typography';
|
|
3
|
+
import { useConsentTexts, resolveTexts, useDesignTokens, useConsent, logger, useConsentHydration, useCategories, getCookiesInfoForCategory, ConsentProvider as ConsentProvider$1 } from '@react-lgpd-consent/core';
|
|
4
|
+
import * as React4 from 'react';
|
|
5
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
6
|
+
import { useTheme, ThemeProvider } from '@mui/material/styles';
|
|
7
|
+
import Box2 from '@mui/material/Box';
|
|
8
|
+
import Button from '@mui/material/Button';
|
|
9
|
+
import Paper from '@mui/material/Paper';
|
|
10
|
+
import Snackbar from '@mui/material/Snackbar';
|
|
11
|
+
import Stack from '@mui/material/Stack';
|
|
12
|
+
import CookieOutlined from '@mui/icons-material/CookieOutlined';
|
|
13
|
+
import Fab from '@mui/material/Fab';
|
|
14
|
+
import Tooltip from '@mui/material/Tooltip';
|
|
15
|
+
import Dialog from '@mui/material/Dialog';
|
|
16
|
+
import DialogActions from '@mui/material/DialogActions';
|
|
17
|
+
import DialogContent from '@mui/material/DialogContent';
|
|
18
|
+
import DialogTitle from '@mui/material/DialogTitle';
|
|
19
|
+
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
20
|
+
import FormGroup from '@mui/material/FormGroup';
|
|
21
|
+
import Switch from '@mui/material/Switch';
|
|
22
|
+
|
|
23
|
+
// @react-lgpd-consent/mui - proxy build
|
|
24
|
+
|
|
25
|
+
var brandingStyles = {
|
|
26
|
+
banner: {
|
|
27
|
+
fontSize: "0.65rem",
|
|
28
|
+
textAlign: "right",
|
|
29
|
+
mt: 1,
|
|
30
|
+
opacity: 0.7,
|
|
31
|
+
fontStyle: "italic",
|
|
32
|
+
width: "100%"
|
|
33
|
+
},
|
|
34
|
+
modal: {
|
|
35
|
+
fontSize: "0.65rem",
|
|
36
|
+
textAlign: "right",
|
|
37
|
+
px: 3,
|
|
38
|
+
pb: 1,
|
|
39
|
+
opacity: 0.7,
|
|
40
|
+
fontStyle: "italic",
|
|
41
|
+
width: "100%"
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
var linkStyles = {
|
|
45
|
+
textDecoration: "none",
|
|
46
|
+
fontWeight: 500,
|
|
47
|
+
"&:hover": {
|
|
48
|
+
textDecoration: "underline"
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
var Branding = React4.memo(function Branding2({
|
|
52
|
+
variant,
|
|
53
|
+
hidden = false,
|
|
54
|
+
texts: textsProp,
|
|
55
|
+
language,
|
|
56
|
+
textVariant
|
|
57
|
+
}) {
|
|
58
|
+
const baseTexts = useConsentTexts();
|
|
59
|
+
const mergedTexts = React4.useMemo(
|
|
60
|
+
() => ({ ...baseTexts, ...textsProp ?? {} }),
|
|
61
|
+
[baseTexts, textsProp]
|
|
62
|
+
);
|
|
63
|
+
const texts = React4.useMemo(
|
|
64
|
+
() => resolveTexts(mergedTexts, { language, variant: textVariant }),
|
|
65
|
+
[mergedTexts, language, textVariant]
|
|
66
|
+
);
|
|
67
|
+
const designTokens = useDesignTokens();
|
|
68
|
+
if (hidden) return null;
|
|
69
|
+
return /* @__PURE__ */ jsxs(
|
|
70
|
+
Typography,
|
|
71
|
+
{
|
|
72
|
+
variant: "caption",
|
|
73
|
+
sx: (theme) => ({
|
|
74
|
+
...brandingStyles[variant],
|
|
75
|
+
color: designTokens?.colors?.text ?? theme.palette.text.secondary
|
|
76
|
+
}),
|
|
77
|
+
children: [
|
|
78
|
+
texts.brandingPoweredBy || "fornecido por",
|
|
79
|
+
" ",
|
|
80
|
+
/* @__PURE__ */ jsx(
|
|
81
|
+
Link,
|
|
82
|
+
{
|
|
83
|
+
href: "https://www.ledipo.eti.br",
|
|
84
|
+
target: "_blank",
|
|
85
|
+
rel: "noopener noreferrer",
|
|
86
|
+
sx: (theme) => ({
|
|
87
|
+
...linkStyles,
|
|
88
|
+
color: designTokens?.colors?.primary ?? theme.palette.primary.main
|
|
89
|
+
}),
|
|
90
|
+
children: "L\xC9dipO.eti.br"
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
);
|
|
96
|
+
});
|
|
97
|
+
function CookieBanner({
|
|
98
|
+
policyLinkUrl,
|
|
99
|
+
termsLinkUrl,
|
|
100
|
+
debug,
|
|
101
|
+
blocking = true,
|
|
102
|
+
hideBranding = false,
|
|
103
|
+
SnackbarProps,
|
|
104
|
+
PaperProps,
|
|
105
|
+
texts: textsProp,
|
|
106
|
+
language,
|
|
107
|
+
textVariant
|
|
108
|
+
}) {
|
|
109
|
+
const { consented, acceptAll, rejectAll, openPreferences } = useConsent();
|
|
110
|
+
const baseTexts = useConsentTexts();
|
|
111
|
+
const mergedTexts = React4.useMemo(
|
|
112
|
+
() => ({ ...baseTexts, ...textsProp ?? {} }),
|
|
113
|
+
[baseTexts, textsProp]
|
|
114
|
+
);
|
|
115
|
+
const texts = React4.useMemo(
|
|
116
|
+
() => resolveTexts(mergedTexts, { language, variant: textVariant }),
|
|
117
|
+
[mergedTexts, language, textVariant]
|
|
118
|
+
);
|
|
119
|
+
const isHydrated = useConsentHydration();
|
|
120
|
+
const designTokens = useDesignTokens();
|
|
121
|
+
const open = debug ? true : isHydrated && !consented;
|
|
122
|
+
logger.componentRender("CookieBanner", {
|
|
123
|
+
open,
|
|
124
|
+
consented,
|
|
125
|
+
isHydrated,
|
|
126
|
+
blocking,
|
|
127
|
+
hideBranding
|
|
128
|
+
});
|
|
129
|
+
if (!open) return null;
|
|
130
|
+
const bannerStyle = (theme) => ({
|
|
131
|
+
p: designTokens?.spacing?.padding?.banner ?? 2,
|
|
132
|
+
maxWidth: 720,
|
|
133
|
+
mx: "auto",
|
|
134
|
+
backgroundColor: designTokens?.colors?.background ?? theme.palette.background?.paper,
|
|
135
|
+
color: designTokens?.colors?.text ?? theme.palette.text?.primary,
|
|
136
|
+
borderRadius: designTokens?.spacing?.borderRadius?.banner,
|
|
137
|
+
fontFamily: designTokens?.typography?.fontFamily
|
|
138
|
+
});
|
|
139
|
+
const bannerContent = /* @__PURE__ */ jsx(Paper, { elevation: 3, sx: bannerStyle, ...PaperProps, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
|
|
140
|
+
/* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { fontSize: designTokens?.typography?.fontSize?.banner }, children: [
|
|
141
|
+
texts.bannerMessage,
|
|
142
|
+
" ",
|
|
143
|
+
policyLinkUrl && /* @__PURE__ */ jsx(
|
|
144
|
+
Link,
|
|
145
|
+
{
|
|
146
|
+
href: policyLinkUrl,
|
|
147
|
+
underline: "hover",
|
|
148
|
+
target: "_blank",
|
|
149
|
+
rel: "noopener noreferrer",
|
|
150
|
+
sx: { color: designTokens?.colors?.primary },
|
|
151
|
+
children: texts.policyLink ?? "Saiba mais"
|
|
152
|
+
}
|
|
153
|
+
)
|
|
154
|
+
] }),
|
|
155
|
+
/* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", sm: "row" }, spacing: 1, justifyContent: "flex-end", children: [
|
|
156
|
+
/* @__PURE__ */ jsx(
|
|
157
|
+
Button,
|
|
158
|
+
{
|
|
159
|
+
variant: "outlined",
|
|
160
|
+
onClick: () => {
|
|
161
|
+
logger.apiUsage("rejectAll", { source: "banner" });
|
|
162
|
+
rejectAll();
|
|
163
|
+
},
|
|
164
|
+
sx: { color: designTokens?.colors?.secondary },
|
|
165
|
+
children: texts.declineAll
|
|
166
|
+
}
|
|
167
|
+
),
|
|
168
|
+
/* @__PURE__ */ jsx(
|
|
169
|
+
Button,
|
|
170
|
+
{
|
|
171
|
+
variant: "contained",
|
|
172
|
+
onClick: () => {
|
|
173
|
+
logger.apiUsage("acceptAll", { source: "banner" });
|
|
174
|
+
acceptAll();
|
|
175
|
+
},
|
|
176
|
+
sx: { backgroundColor: designTokens?.colors?.primary },
|
|
177
|
+
children: texts.acceptAll
|
|
178
|
+
}
|
|
179
|
+
),
|
|
180
|
+
/* @__PURE__ */ jsx(
|
|
181
|
+
Button,
|
|
182
|
+
{
|
|
183
|
+
variant: "text",
|
|
184
|
+
onClick: () => {
|
|
185
|
+
logger.apiUsage("openPreferences", { source: "banner" });
|
|
186
|
+
openPreferences();
|
|
187
|
+
},
|
|
188
|
+
sx: { color: designTokens?.colors?.text },
|
|
189
|
+
children: texts.preferences
|
|
190
|
+
}
|
|
191
|
+
)
|
|
192
|
+
] }),
|
|
193
|
+
!hideBranding && /* @__PURE__ */ jsx(
|
|
194
|
+
Branding,
|
|
195
|
+
{
|
|
196
|
+
variant: "banner",
|
|
197
|
+
texts: textsProp,
|
|
198
|
+
language,
|
|
199
|
+
textVariant
|
|
200
|
+
}
|
|
201
|
+
)
|
|
202
|
+
] }) });
|
|
203
|
+
const resolveBannerZIndex = (theme) => designTokens?.layout?.zIndex?.banner ?? theme?.zIndex?.snackbar ?? 1400;
|
|
204
|
+
const positionStyle = (theme) => ({
|
|
205
|
+
position: "fixed",
|
|
206
|
+
zIndex: resolveBannerZIndex(theme),
|
|
207
|
+
...designTokens?.layout?.position === "top" ? { top: 0 } : { bottom: 0 },
|
|
208
|
+
left: 0,
|
|
209
|
+
right: 0,
|
|
210
|
+
width: designTokens?.layout?.width?.desktop ?? "100%",
|
|
211
|
+
p: 2
|
|
212
|
+
});
|
|
213
|
+
const backdropToken = designTokens?.layout?.backdrop;
|
|
214
|
+
const resolveBackdropColor = (theme) => {
|
|
215
|
+
if (backdropToken === false) return "transparent";
|
|
216
|
+
if (typeof backdropToken === "string") {
|
|
217
|
+
if (backdropToken.toLowerCase() === "auto") {
|
|
218
|
+
const isDark2 = theme?.palette?.mode === "dark";
|
|
219
|
+
return isDark2 ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.4)";
|
|
220
|
+
}
|
|
221
|
+
return backdropToken;
|
|
222
|
+
}
|
|
223
|
+
const isDark = theme?.palette?.mode === "dark";
|
|
224
|
+
return isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.4)";
|
|
225
|
+
};
|
|
226
|
+
const isSafeRoute = (() => {
|
|
227
|
+
try {
|
|
228
|
+
if (globalThis?.window === void 0) return false;
|
|
229
|
+
const current = new URL(globalThis.window.location.href);
|
|
230
|
+
const safeUrls = [policyLinkUrl, termsLinkUrl].filter(Boolean);
|
|
231
|
+
return safeUrls.some((u) => {
|
|
232
|
+
try {
|
|
233
|
+
const target = new URL(u, current.origin);
|
|
234
|
+
return target.pathname === current.pathname;
|
|
235
|
+
} catch {
|
|
236
|
+
return false;
|
|
237
|
+
}
|
|
238
|
+
});
|
|
239
|
+
} catch {
|
|
240
|
+
return false;
|
|
241
|
+
}
|
|
242
|
+
})();
|
|
243
|
+
const effectiveBlocking = blocking && !isSafeRoute;
|
|
244
|
+
if (effectiveBlocking) {
|
|
245
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
246
|
+
/* @__PURE__ */ jsx(
|
|
247
|
+
Box2,
|
|
248
|
+
{
|
|
249
|
+
sx: (theme) => ({
|
|
250
|
+
position: "fixed",
|
|
251
|
+
top: 0,
|
|
252
|
+
left: 0,
|
|
253
|
+
right: 0,
|
|
254
|
+
bottom: 0,
|
|
255
|
+
backgroundColor: resolveBackdropColor(theme),
|
|
256
|
+
zIndex: designTokens?.layout?.zIndex?.backdrop ?? (resolveBannerZIndex(theme) ? resolveBannerZIndex(theme) - 1 : 1299)
|
|
257
|
+
}),
|
|
258
|
+
"data-testid": "lgpd-cookie-banner-overlay"
|
|
259
|
+
}
|
|
260
|
+
),
|
|
261
|
+
/* @__PURE__ */ jsx(Box2, { sx: positionStyle, "data-testid": "lgpd-cookie-banner-wrapper", children: bannerContent })
|
|
262
|
+
] });
|
|
263
|
+
}
|
|
264
|
+
return /* @__PURE__ */ jsx(
|
|
265
|
+
Snackbar,
|
|
266
|
+
{
|
|
267
|
+
open,
|
|
268
|
+
anchorOrigin: {
|
|
269
|
+
vertical: designTokens?.layout?.position === "top" ? "top" : "bottom",
|
|
270
|
+
horizontal: "center"
|
|
271
|
+
},
|
|
272
|
+
...SnackbarProps,
|
|
273
|
+
children: bannerContent
|
|
274
|
+
}
|
|
275
|
+
);
|
|
276
|
+
}
|
|
277
|
+
function useThemeWithFallbacks() {
|
|
278
|
+
const theme = useTheme();
|
|
279
|
+
logger.themeCompatibility(theme);
|
|
280
|
+
return {
|
|
281
|
+
palette: {
|
|
282
|
+
primary: {
|
|
283
|
+
main: theme?.palette?.primary?.main || "#1976d2",
|
|
284
|
+
dark: theme?.palette?.primary?.dark || "#1565c0"
|
|
285
|
+
}
|
|
286
|
+
},
|
|
287
|
+
transitions: {
|
|
288
|
+
duration: {
|
|
289
|
+
shortest: theme?.transitions?.duration?.shortest || 150,
|
|
290
|
+
short: theme?.transitions?.duration?.short || 250
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
};
|
|
294
|
+
}
|
|
295
|
+
function FloatingPreferencesButtonComponent({
|
|
296
|
+
position = "bottom-right",
|
|
297
|
+
offset = 24,
|
|
298
|
+
icon = /* @__PURE__ */ jsx(CookieOutlined, {}),
|
|
299
|
+
tooltip,
|
|
300
|
+
FabProps,
|
|
301
|
+
hideWhenConsented = false,
|
|
302
|
+
texts: textsProp,
|
|
303
|
+
language,
|
|
304
|
+
textVariant
|
|
305
|
+
}) {
|
|
306
|
+
const { openPreferences, consented } = useConsent();
|
|
307
|
+
const baseTexts = useConsentTexts();
|
|
308
|
+
const mergedTexts = React4.useMemo(
|
|
309
|
+
() => ({ ...baseTexts, ...textsProp ?? {} }),
|
|
310
|
+
[baseTexts, textsProp]
|
|
311
|
+
);
|
|
312
|
+
const texts = React4.useMemo(
|
|
313
|
+
() => resolveTexts(mergedTexts, { language, variant: textVariant }),
|
|
314
|
+
[mergedTexts, language, textVariant]
|
|
315
|
+
);
|
|
316
|
+
const safeTheme = useThemeWithFallbacks();
|
|
317
|
+
const designTokens = useDesignTokens();
|
|
318
|
+
const positionStyles = React4.useMemo(() => {
|
|
319
|
+
const styles = {
|
|
320
|
+
position: "fixed",
|
|
321
|
+
zIndex: 1200
|
|
322
|
+
};
|
|
323
|
+
switch (position) {
|
|
324
|
+
case "bottom-left":
|
|
325
|
+
return { ...styles, bottom: offset, left: offset };
|
|
326
|
+
case "bottom-right":
|
|
327
|
+
return { ...styles, bottom: offset, right: offset };
|
|
328
|
+
case "top-left":
|
|
329
|
+
return { ...styles, top: offset, left: offset };
|
|
330
|
+
case "top-right":
|
|
331
|
+
return { ...styles, top: offset, right: offset };
|
|
332
|
+
default:
|
|
333
|
+
return { ...styles, bottom: offset, right: offset };
|
|
334
|
+
}
|
|
335
|
+
}, [position, offset]);
|
|
336
|
+
logger.componentRender("FloatingPreferencesButton", {
|
|
337
|
+
position,
|
|
338
|
+
offset,
|
|
339
|
+
hideWhenConsented,
|
|
340
|
+
consented
|
|
341
|
+
});
|
|
342
|
+
if (hideWhenConsented && consented) {
|
|
343
|
+
logger.debug(
|
|
344
|
+
"FloatingPreferencesButton: Hidden due to hideWhenConsented=true and consented=true"
|
|
345
|
+
);
|
|
346
|
+
return null;
|
|
347
|
+
}
|
|
348
|
+
const tooltipText = tooltip ?? texts.preferencesButton ?? "Gerenciar Prefer\xEAncias de Cookies";
|
|
349
|
+
return /* @__PURE__ */ jsx(Tooltip, { title: tooltipText, placement: "top", children: /* @__PURE__ */ jsx(
|
|
350
|
+
Fab,
|
|
351
|
+
{
|
|
352
|
+
size: "medium",
|
|
353
|
+
color: "primary",
|
|
354
|
+
onClick: openPreferences,
|
|
355
|
+
sx: {
|
|
356
|
+
...positionStyles,
|
|
357
|
+
backgroundColor: designTokens?.colors?.primary ?? safeTheme.palette.primary.main,
|
|
358
|
+
"&:hover": {
|
|
359
|
+
backgroundColor: designTokens?.colors?.primary ? designTokens?.colors?.primary : safeTheme.palette.primary.dark
|
|
360
|
+
},
|
|
361
|
+
transition: `all ${safeTheme.transitions.duration.short}ms`
|
|
362
|
+
},
|
|
363
|
+
"aria-label": tooltipText,
|
|
364
|
+
...FabProps,
|
|
365
|
+
children: icon
|
|
366
|
+
}
|
|
367
|
+
) });
|
|
368
|
+
}
|
|
369
|
+
var FloatingPreferencesButton = React4.memo(FloatingPreferencesButtonComponent);
|
|
370
|
+
FloatingPreferencesButton.displayName = "FloatingPreferencesButton";
|
|
371
|
+
function PreferencesModal({
|
|
372
|
+
DialogProps: DialogProps2,
|
|
373
|
+
hideBranding = false,
|
|
374
|
+
isModalOpen: isModalOpenProp,
|
|
375
|
+
preferences: preferencesProp,
|
|
376
|
+
setPreferences: setPreferencesProp,
|
|
377
|
+
closePreferences: closePreferencesProp,
|
|
378
|
+
texts: textsProp,
|
|
379
|
+
language,
|
|
380
|
+
textVariant
|
|
381
|
+
}) {
|
|
382
|
+
const hookValue = useConsent();
|
|
383
|
+
const preferences = preferencesProp ?? hookValue.preferences;
|
|
384
|
+
const setPreferences = setPreferencesProp ?? hookValue.setPreferences;
|
|
385
|
+
const closePreferences = closePreferencesProp ?? hookValue.closePreferences;
|
|
386
|
+
const isModalOpen = isModalOpenProp ?? hookValue.isModalOpen;
|
|
387
|
+
const baseTexts = useConsentTexts();
|
|
388
|
+
const mergedTexts = React4.useMemo(
|
|
389
|
+
() => ({ ...baseTexts, ...textsProp ?? {} }),
|
|
390
|
+
[baseTexts, textsProp]
|
|
391
|
+
);
|
|
392
|
+
const texts = React4.useMemo(
|
|
393
|
+
() => resolveTexts(mergedTexts, { language, variant: textVariant }),
|
|
394
|
+
[mergedTexts, language, textVariant]
|
|
395
|
+
);
|
|
396
|
+
const designTokens = useDesignTokens();
|
|
397
|
+
const { toggleableCategories, allCategories } = useCategories();
|
|
398
|
+
const getInitialPreferences = React4.useCallback(() => {
|
|
399
|
+
const syncedPrefs = { necessary: true };
|
|
400
|
+
toggleableCategories.forEach((category) => {
|
|
401
|
+
syncedPrefs[category.id] = preferences[category.id] ?? false;
|
|
402
|
+
});
|
|
403
|
+
return syncedPrefs;
|
|
404
|
+
}, [preferences, toggleableCategories]);
|
|
405
|
+
const [tempPreferences, setTempPreferences] = React4.useState(getInitialPreferences);
|
|
406
|
+
const wasOpenRef = React4.useRef(isModalOpen);
|
|
407
|
+
React4.useEffect(() => {
|
|
408
|
+
const justOpened = isModalOpen && !wasOpenRef.current;
|
|
409
|
+
wasOpenRef.current = isModalOpen;
|
|
410
|
+
if (justOpened) {
|
|
411
|
+
queueMicrotask(() => {
|
|
412
|
+
setTempPreferences(getInitialPreferences());
|
|
413
|
+
});
|
|
414
|
+
}
|
|
415
|
+
}, [isModalOpen, getInitialPreferences]);
|
|
416
|
+
const { open: dialogOpenProp, ...dialogRest } = DialogProps2 ?? {};
|
|
417
|
+
const open = dialogOpenProp ?? isModalOpen ?? false;
|
|
418
|
+
const handleSave = () => {
|
|
419
|
+
setPreferences(tempPreferences);
|
|
420
|
+
};
|
|
421
|
+
const handleCancel = () => {
|
|
422
|
+
setTempPreferences(preferences);
|
|
423
|
+
closePreferences();
|
|
424
|
+
};
|
|
425
|
+
const modalTitleSx = (theme) => ({
|
|
426
|
+
fontSize: designTokens?.typography?.fontSize?.modal ?? void 0,
|
|
427
|
+
color: designTokens?.colors?.text ?? theme.palette.text.primary
|
|
428
|
+
});
|
|
429
|
+
const modalContentSx = (theme) => ({
|
|
430
|
+
p: designTokens?.spacing?.padding?.modal ?? void 0,
|
|
431
|
+
backgroundColor: designTokens?.colors?.background ?? theme.palette.background.paper,
|
|
432
|
+
color: designTokens?.colors?.text ?? theme.palette.text.primary
|
|
433
|
+
});
|
|
434
|
+
const resolveModalZIndex = React4.useCallback(
|
|
435
|
+
(theme) => designTokens?.layout?.zIndex?.modal ?? (theme?.zIndex?.modal ?? 1300) + 10,
|
|
436
|
+
[designTokens?.layout?.zIndex?.modal]
|
|
437
|
+
);
|
|
438
|
+
const modalZIndexToken = designTokens?.layout?.zIndex?.modal;
|
|
439
|
+
const rootSx = [
|
|
440
|
+
DialogProps2?.slotProps?.root && DialogProps2.slotProps.root.sx,
|
|
441
|
+
(theme) => ({ zIndex: resolveModalZIndex(theme) })
|
|
442
|
+
].filter(Boolean);
|
|
443
|
+
const rootSlotProps = {
|
|
444
|
+
...dialogRest?.slotProps?.root,
|
|
445
|
+
sx: rootSx,
|
|
446
|
+
...modalZIndexToken ? { style: { zIndex: modalZIndexToken } } : {},
|
|
447
|
+
"data-testid": dialogRest?.slotProps?.root?.["data-testid"] ?? "lgpd-preferences-modal-root"
|
|
448
|
+
};
|
|
449
|
+
const mergedDialogProps = {
|
|
450
|
+
open,
|
|
451
|
+
fullWidth: true,
|
|
452
|
+
maxWidth: "sm",
|
|
453
|
+
...dialogRest,
|
|
454
|
+
slotProps: {
|
|
455
|
+
...dialogRest?.slotProps,
|
|
456
|
+
root: rootSlotProps
|
|
457
|
+
}
|
|
458
|
+
};
|
|
459
|
+
return /* @__PURE__ */ jsxs(Dialog, { "aria-labelledby": "cookie-pref-title", onClose: handleCancel, ...mergedDialogProps, children: [
|
|
460
|
+
/* @__PURE__ */ jsx(DialogTitle, { id: "cookie-pref-title", sx: modalTitleSx, children: texts.modalTitle }),
|
|
461
|
+
/* @__PURE__ */ jsxs(DialogContent, { dividers: true, sx: modalContentSx, children: [
|
|
462
|
+
/* @__PURE__ */ jsx(
|
|
463
|
+
Typography,
|
|
464
|
+
{
|
|
465
|
+
variant: "body2",
|
|
466
|
+
sx: (theme) => ({
|
|
467
|
+
mb: 2,
|
|
468
|
+
fontSize: designTokens?.typography?.fontSize?.modal ?? void 0,
|
|
469
|
+
color: designTokens?.colors?.text ?? theme.palette.text.primary
|
|
470
|
+
}),
|
|
471
|
+
children: texts.modalIntro
|
|
472
|
+
}
|
|
473
|
+
),
|
|
474
|
+
/* @__PURE__ */ jsxs(FormGroup, { children: [
|
|
475
|
+
toggleableCategories.map((category) => {
|
|
476
|
+
const full = allCategories.find((c) => c.id === category.id);
|
|
477
|
+
const namesFromGuidance = full?.cookies ?? [];
|
|
478
|
+
const used = globalThis.__LGPD_USED_INTEGRATIONS__ || [];
|
|
479
|
+
const descriptors = getCookiesInfoForCategory(category.id, used);
|
|
480
|
+
const tableHeaders = texts.cookieDetails?.tableHeaders;
|
|
481
|
+
const toggleDetailsText = texts.cookieDetails?.toggleDetails?.expand ?? "Ver detalhes";
|
|
482
|
+
const scriptLabelPrefix = texts.cookieDetails?.scriptLabelPrefix ?? "(script) ";
|
|
483
|
+
const scriptPurpose = texts.cookieDetails?.scriptPurpose ?? "Script de integra\xE7\xE3o ativo";
|
|
484
|
+
const enrichedDescriptors = descriptors.map((desc) => {
|
|
485
|
+
if (desc.purpose && desc.duration && desc.provider) {
|
|
486
|
+
return desc;
|
|
487
|
+
}
|
|
488
|
+
return {
|
|
489
|
+
name: desc.name,
|
|
490
|
+
purpose: desc.purpose || "-",
|
|
491
|
+
duration: desc.duration || "-",
|
|
492
|
+
provider: desc.provider || "-"
|
|
493
|
+
};
|
|
494
|
+
});
|
|
495
|
+
const merged = [
|
|
496
|
+
...enrichedDescriptors,
|
|
497
|
+
...namesFromGuidance.filter((n) => !enrichedDescriptors.some((d) => d.name === n)).map((n) => ({ name: n, purpose: "-", duration: "-", provider: "-" }))
|
|
498
|
+
];
|
|
499
|
+
let mergedFinal = merged;
|
|
500
|
+
try {
|
|
501
|
+
if (merged.length === 0) {
|
|
502
|
+
const gmap = globalThis.__LGPD_INTEGRATIONS_MAP__ || {};
|
|
503
|
+
const scriptRows = Object.entries(gmap).filter(([, cat]) => cat === category.id).map(([id]) => ({
|
|
504
|
+
name: `${scriptLabelPrefix}${id}`,
|
|
505
|
+
purpose: scriptPurpose,
|
|
506
|
+
duration: "-",
|
|
507
|
+
provider: "-"
|
|
508
|
+
}));
|
|
509
|
+
if (scriptRows.length > 0) mergedFinal = scriptRows;
|
|
510
|
+
}
|
|
511
|
+
} catch {
|
|
512
|
+
}
|
|
513
|
+
return /* @__PURE__ */ jsxs(Box2, { sx: { mb: 1 }, children: [
|
|
514
|
+
/* @__PURE__ */ jsx(
|
|
515
|
+
FormControlLabel,
|
|
516
|
+
{
|
|
517
|
+
control: /* @__PURE__ */ jsx(
|
|
518
|
+
Switch,
|
|
519
|
+
{
|
|
520
|
+
checked: tempPreferences[category.id] ?? false,
|
|
521
|
+
onChange: (e) => setTempPreferences((prev) => ({
|
|
522
|
+
...prev,
|
|
523
|
+
[category.id]: e.target.checked
|
|
524
|
+
}))
|
|
525
|
+
}
|
|
526
|
+
),
|
|
527
|
+
label: `${category.name} - ${category.description}`
|
|
528
|
+
}
|
|
529
|
+
),
|
|
530
|
+
/* @__PURE__ */ jsxs("details", { style: { marginLeft: 48 }, children: [
|
|
531
|
+
/* @__PURE__ */ jsx("summary", { children: toggleDetailsText }),
|
|
532
|
+
/* @__PURE__ */ jsx(Box2, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
|
|
533
|
+
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
|
|
534
|
+
/* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: tableHeaders?.name ?? "Cookie" }),
|
|
535
|
+
/* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: tableHeaders?.purpose ?? "Finalidade" }),
|
|
536
|
+
/* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: tableHeaders?.duration ?? "Dura\xE7\xE3o" }),
|
|
537
|
+
/* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: tableHeaders?.provider ?? "Fornecedor" })
|
|
538
|
+
] }) }),
|
|
539
|
+
/* @__PURE__ */ jsx("tbody", { children: mergedFinal.map((d, idx) => /* @__PURE__ */ jsxs("tr", { children: [
|
|
540
|
+
/* @__PURE__ */ jsx("td", { children: d.name }),
|
|
541
|
+
/* @__PURE__ */ jsx("td", { children: d.purpose }),
|
|
542
|
+
/* @__PURE__ */ jsx("td", { children: d.duration }),
|
|
543
|
+
/* @__PURE__ */ jsx("td", { children: d.provider })
|
|
544
|
+
] }, d.name + idx)) })
|
|
545
|
+
] }) })
|
|
546
|
+
] })
|
|
547
|
+
] }, category.id);
|
|
548
|
+
}),
|
|
549
|
+
/* @__PURE__ */ jsx(FormControlLabel, { control: /* @__PURE__ */ jsx(Switch, { checked: true, disabled: true }), label: texts.necessaryAlwaysOn }),
|
|
550
|
+
/* @__PURE__ */ jsxs("details", { style: { marginLeft: 48 }, children: [
|
|
551
|
+
/* @__PURE__ */ jsx("summary", { children: texts.cookieDetails?.toggleDetails?.expand ?? "Ver detalhes" }),
|
|
552
|
+
/* @__PURE__ */ jsx(Box2, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
|
|
553
|
+
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
|
|
554
|
+
/* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: texts.cookieDetails?.tableHeaders?.name ?? "Cookie" }),
|
|
555
|
+
/* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: texts.cookieDetails?.tableHeaders?.purpose ?? "Finalidade" }),
|
|
556
|
+
/* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: texts.cookieDetails?.tableHeaders?.duration ?? "Dura\xE7\xE3o" }),
|
|
557
|
+
/* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: texts.cookieDetails?.tableHeaders?.provider ?? "Fornecedor" })
|
|
558
|
+
] }) }),
|
|
559
|
+
/* @__PURE__ */ jsx("tbody", { children: (() => {
|
|
560
|
+
const used = globalThis.__LGPD_USED_INTEGRATIONS__ || [];
|
|
561
|
+
const necessaryCookies = getCookiesInfoForCategory(
|
|
562
|
+
"necessary",
|
|
563
|
+
used
|
|
564
|
+
);
|
|
565
|
+
return necessaryCookies.map((d, idx) => /* @__PURE__ */ jsxs("tr", { children: [
|
|
566
|
+
/* @__PURE__ */ jsx("td", { children: d.name }),
|
|
567
|
+
/* @__PURE__ */ jsx("td", { children: d.purpose || "-" }),
|
|
568
|
+
/* @__PURE__ */ jsx("td", { children: d.duration || "-" }),
|
|
569
|
+
/* @__PURE__ */ jsx("td", { children: d.provider || "-" })
|
|
570
|
+
] }, d.name + idx));
|
|
571
|
+
})() })
|
|
572
|
+
] }) })
|
|
573
|
+
] })
|
|
574
|
+
] })
|
|
575
|
+
] }),
|
|
576
|
+
/* @__PURE__ */ jsxs(DialogActions, { children: [
|
|
577
|
+
/* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleCancel, children: texts.close }),
|
|
578
|
+
/* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleSave, children: texts.save })
|
|
579
|
+
] }),
|
|
580
|
+
!hideBranding && /* @__PURE__ */ jsx(Branding, { variant: "modal", texts: textsProp, language, textVariant })
|
|
581
|
+
] });
|
|
582
|
+
}
|
|
583
|
+
function ConsentProvider({
|
|
584
|
+
disableDefaultModal = false,
|
|
585
|
+
disableDefaultBanner = false,
|
|
586
|
+
disableDefaultFloatingButton = false,
|
|
587
|
+
PreferencesModalComponent,
|
|
588
|
+
CookieBannerComponent,
|
|
589
|
+
FloatingPreferencesButtonComponent: FloatingPreferencesButtonComponent2,
|
|
590
|
+
theme,
|
|
591
|
+
hideBranding,
|
|
592
|
+
cookieBannerProps,
|
|
593
|
+
preferencesModalProps,
|
|
594
|
+
floatingPreferencesButtonProps,
|
|
595
|
+
children,
|
|
596
|
+
...coreProps
|
|
597
|
+
}) {
|
|
598
|
+
const modalComponent = disableDefaultModal ? PreferencesModalComponent : PreferencesModalComponent || PreferencesModal;
|
|
599
|
+
const bannerComponent = disableDefaultBanner ? CookieBannerComponent : CookieBannerComponent || CookieBanner;
|
|
600
|
+
const floatingButtonComponent = disableDefaultFloatingButton ? FloatingPreferencesButtonComponent2 : FloatingPreferencesButtonComponent2 || FloatingPreferencesButton;
|
|
601
|
+
const mergedCookieBannerProps = {
|
|
602
|
+
...cookieBannerProps,
|
|
603
|
+
hideBranding: cookieBannerProps?.hideBranding ?? hideBranding
|
|
604
|
+
};
|
|
605
|
+
const mergedPreferencesModalProps = {
|
|
606
|
+
...preferencesModalProps,
|
|
607
|
+
hideBranding: preferencesModalProps?.hideBranding ?? hideBranding
|
|
608
|
+
};
|
|
609
|
+
const provider = /* @__PURE__ */ jsx(
|
|
610
|
+
ConsentProvider$1,
|
|
611
|
+
{
|
|
612
|
+
...coreProps,
|
|
613
|
+
hideBranding,
|
|
614
|
+
cookieBannerProps: mergedCookieBannerProps,
|
|
615
|
+
preferencesModalProps: mergedPreferencesModalProps,
|
|
616
|
+
floatingPreferencesButtonProps,
|
|
617
|
+
CookieBannerComponent: bannerComponent,
|
|
618
|
+
PreferencesModalComponent: modalComponent,
|
|
619
|
+
FloatingPreferencesButtonComponent: floatingButtonComponent,
|
|
620
|
+
children
|
|
621
|
+
}
|
|
622
|
+
);
|
|
623
|
+
if (!theme) return provider;
|
|
624
|
+
return /* @__PURE__ */ jsx(ThemeProvider, { theme, children: provider });
|
|
625
|
+
}
|
|
626
|
+
ConsentProvider.displayName = "ConsentProvider(MUI)";
|
|
627
|
+
|
|
628
|
+
export { Branding, ConsentProvider, CookieBanner, FloatingPreferencesButton, PreferencesModal };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-lgpd-consent/mui",
|
|
3
|
-
"version": "0.7.
|
|
4
|
-
"description": "Componentes Material-UI prontos para gerenciamento de consentimento LGPD
|
|
3
|
+
"version": "0.7.2",
|
|
4
|
+
"description": "Componentes Material-UI prontos para gerenciamento de consentimento LGPD",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lgpd",
|
|
7
7
|
"anpd",
|
|
@@ -32,6 +32,11 @@
|
|
|
32
32
|
"import": "./dist/index.js",
|
|
33
33
|
"require": "./dist/index.cjs"
|
|
34
34
|
},
|
|
35
|
+
"./ui": {
|
|
36
|
+
"types": "./dist/ui.d.ts",
|
|
37
|
+
"import": "./dist/ui.js",
|
|
38
|
+
"require": "./dist/ui.cjs"
|
|
39
|
+
},
|
|
35
40
|
"./package.json": "./package.json"
|
|
36
41
|
},
|
|
37
42
|
"sideEffects": false,
|
|
@@ -58,12 +63,12 @@
|
|
|
58
63
|
}
|
|
59
64
|
},
|
|
60
65
|
"dependencies": {
|
|
61
|
-
"@react-lgpd-consent/core": "^0.7.
|
|
66
|
+
"@react-lgpd-consent/core": "^0.7.2"
|
|
62
67
|
},
|
|
63
68
|
"scripts": {
|
|
64
69
|
"clean": "rimraf dist",
|
|
65
|
-
"build": "cross-env NODE_ENV=production tsup
|
|
66
|
-
"dev": "cross-env NODE_ENV=development tsup
|
|
70
|
+
"build": "cross-env NODE_ENV=production tsup --config tsup.config.ts",
|
|
71
|
+
"dev": "cross-env NODE_ENV=development tsup --config tsup.config.ts --watch",
|
|
67
72
|
"lint": "eslint \"src/**/*.{ts,tsx}\" --cache",
|
|
68
73
|
"lint:ci": "eslint \"src/**/*.{ts,tsx}\" --cache --max-warnings=0",
|
|
69
74
|
"format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
|