@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 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.0",
4
- "description": "Componentes Material-UI prontos para gerenciamento de consentimento LGPD/ANPD",
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.0"
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 src/index.ts --format esm,cjs --dts --clean",
66
- "dev": "cross-env NODE_ENV=development tsup src/index.ts --format esm,cjs --dts --watch",
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}\"",