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