@react-lgpd-consent/mui 0.6.3 → 0.7.0

package/README.md

@@ -70,6 +70,40 @@ function App() {
 }
 ```
 
+## 🆕 Novidades v0.7.0
+
+### Callbacks de Lifecycle
+
+Monitore eventos para auditoria:
+
+```tsx
+import { ConsentProvider } from '@react-lgpd-consent/mui'
+
+<ConsentProvider
+  onConsentInit={(state) => console.log('Inicializado:', state)}
+  onConsentChange={(current, prev) => console.log('Mudou:', current)}
+  onAuditLog={(entry) => {
+    fetch('/api/audit', { method: 'POST', body: JSON.stringify(entry) })
+  }}
+>
+```
+
+### Presets ANPD
+
+```tsx
+import { createAnpdCategories } from '@react-lgpd-consent/mui'
+
+const categories = createAnpdCategories({
+  include: ['analytics', 'marketing']
+})
+
+<ConsentProvider categories={categories}>
+```
+
+📖 **Documentação completa:** [API.md](../react-lgpd-consent/API.md) | [TROUBLESHOOTING.md](../../TROUBLESHOOTING.md)
+
+---
+
 ### Uso Headless (Avançado)
 
 Se você quiser controle total sobre a UI:

package/dist/index.cjs

@@ -211,15 +211,16 @@ function CookieBanner({
     ] }),
     !hideBranding && /* @__PURE__ */ jsxRuntime.jsx(Branding, { variant: "banner" })
   ] }) });
-  const positionStyle = {
+  const resolveBannerZIndex = (theme) => designTokens?.layout?.zIndex?.banner ?? theme?.zIndex?.snackbar ?? 1400;
+  const positionStyle = (theme) => ({
     position: "fixed",
-    zIndex: 1300,
+    zIndex: resolveBannerZIndex(theme),
     ...designTokens?.layout?.position === "top" ? { top: 0 } : { bottom: 0 },
     left: 0,
     right: 0,
     width: designTokens?.layout?.width?.desktop ?? "100%",
     p: 2
-  };
+  });
   const backdropToken = designTokens?.layout?.backdrop;
   const resolveBackdropColor = (theme) => {
     if (backdropToken === false) return "transparent";
@@ -235,8 +236,8 @@ function CookieBanner({
   };
   const isSafeRoute = (() => {
     try {
-      if (typeof window === "undefined") return false;
-      const current = new URL(window.location.href);
+      if (globalThis?.window === void 0) return false;
+      const current = new URL(globalThis.window.location.href);
       const safeUrls = [policyLinkUrl, termsLinkUrl].filter(Boolean);
       return safeUrls.some((u) => {
         try {
@@ -263,12 +264,12 @@ function CookieBanner({
             right: 0,
             bottom: 0,
             backgroundColor: resolveBackdropColor(theme),
-            zIndex: 1299
+            zIndex: designTokens?.layout?.zIndex?.backdrop ?? (resolveBannerZIndex(theme) ? resolveBannerZIndex(theme) - 1 : 1299)
           }),
           "data-testid": "lgpd-cookie-banner-overlay"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: positionStyle, children: bannerContent })
+      /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: positionStyle, "data-testid": "lgpd-cookie-banner-wrapper", children: bannerContent })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -401,7 +402,8 @@ function PreferencesModal({
       });
     }
   }, [isModalOpen, getInitialPreferences]);
-  const open = DialogProps2?.open ?? isModalOpen ?? false;
+  const { open: dialogOpenProp, ...dialogRest } = DialogProps2 ?? {};
+  const open = dialogOpenProp ?? isModalOpen ?? false;
   const handleSave = () => {
     setPreferences(tempPreferences);
   };
@@ -418,7 +420,32 @@ function PreferencesModal({
     backgroundColor: designTokens?.colors?.background ?? theme.palette.background.paper,
     color: designTokens?.colors?.text ?? theme.palette.text.primary
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog__default.default, { "aria-labelledby": "cookie-pref-title", open, onClose: handleCancel, ...DialogProps2, children: [
+  const resolveModalZIndex = React3__namespace.useCallback(
+    (theme) => designTokens?.layout?.zIndex?.modal ?? (theme?.zIndex?.modal ?? 1300) + 10,
+    [designTokens?.layout?.zIndex?.modal]
+  );
+  const modalZIndexToken = designTokens?.layout?.zIndex?.modal;
+  const rootSx = [
+    DialogProps2?.slotProps?.root && DialogProps2.slotProps.root.sx,
+    (theme) => ({ zIndex: resolveModalZIndex(theme) })
+  ].filter(Boolean);
+  const rootSlotProps = {
+    ...dialogRest?.slotProps?.root,
+    sx: rootSx,
+    ...modalZIndexToken ? { style: { zIndex: modalZIndexToken } } : {},
+    "data-testid": dialogRest?.slotProps?.root?.["data-testid"] ?? "lgpd-preferences-modal-root"
+  };
+  const mergedDialogProps = {
+    open,
+    fullWidth: true,
+    maxWidth: "sm",
+    ...dialogRest,
+    slotProps: {
+      ...dialogRest?.slotProps,
+      root: rootSlotProps
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog__default.default, { "aria-labelledby": "cookie-pref-title", onClose: handleCancel, ...mergedDialogProps, children: [
     /* @__PURE__ */ jsxRuntime.jsx(DialogTitle__default.default, { id: "cookie-pref-title", sx: modalTitleSx, children: texts.modalTitle }),
     /* @__PURE__ */ jsxRuntime.jsxs(DialogContent__default.default, { dividers: true, sx: modalContentSx, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -452,7 +479,7 @@ function PreferencesModal({
           });
           const merged = [
             ...enrichedDescriptors,
-            ...namesFromGuidance.filter((n) => !enrichedDescriptors.find((d) => d.name === n)).map((n) => ({ name: n, purpose: "-", duration: "-", provider: "-" }))
+            ...namesFromGuidance.filter((n) => !enrichedDescriptors.some((d) => d.name === n)).map((n) => ({ name: n, purpose: "-", duration: "-", provider: "-" }))
           ];
           let mergedFinal = merged;
           try {

package/dist/index.d.cts

@@ -468,7 +468,7 @@ interface ConsentProviderProps extends ConsentProviderProps$1 {
  * @see {@link FloatingPreferencesButton} Para o botão flutuante usado por padrão
  * @see {@link https://mui.com/material-ui/customization/theming/ | MUI Theming Guide} Para customização de tema
  */
-declare function ConsentProvider({ disableDefaultModal, disableDefaultBanner, disableDefaultFloatingButton, PreferencesModalComponent, CookieBannerComponent, FloatingPreferencesButtonComponent, theme, hideBranding, cookieBannerProps, preferencesModalProps, floatingPreferencesButtonProps, children, ...coreProps }: ConsentProviderProps): react_jsx_runtime.JSX.Element;
+declare function ConsentProvider({ disableDefaultModal, disableDefaultBanner, disableDefaultFloatingButton, PreferencesModalComponent, CookieBannerComponent, FloatingPreferencesButtonComponent, theme, hideBranding, cookieBannerProps, preferencesModalProps, floatingPreferencesButtonProps, children, ...coreProps }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
 declare namespace ConsentProvider {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -468,7 +468,7 @@ interface ConsentProviderProps extends ConsentProviderProps$1 {
  * @see {@link FloatingPreferencesButton} Para o botão flutuante usado por padrão
  * @see {@link https://mui.com/material-ui/customization/theming/ | MUI Theming Guide} Para customização de tema
  */
-declare function ConsentProvider({ disableDefaultModal, disableDefaultBanner, disableDefaultFloatingButton, PreferencesModalComponent, CookieBannerComponent, FloatingPreferencesButtonComponent, theme, hideBranding, cookieBannerProps, preferencesModalProps, floatingPreferencesButtonProps, children, ...coreProps }: ConsentProviderProps): react_jsx_runtime.JSX.Element;
+declare function ConsentProvider({ disableDefaultModal, disableDefaultBanner, disableDefaultFloatingButton, PreferencesModalComponent, CookieBannerComponent, FloatingPreferencesButtonComponent, theme, hideBranding, cookieBannerProps, preferencesModalProps, floatingPreferencesButtonProps, children, ...coreProps }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
 declare namespace ConsentProvider {
     var displayName: string;
 }

package/dist/index.js

@@ -172,15 +172,16 @@ function CookieBanner({
     ] }),
     !hideBranding && /* @__PURE__ */ jsx(Branding, { variant: "banner" })
   ] }) });
-  const positionStyle = {
+  const resolveBannerZIndex = (theme) => designTokens?.layout?.zIndex?.banner ?? theme?.zIndex?.snackbar ?? 1400;
+  const positionStyle = (theme) => ({
     position: "fixed",
-    zIndex: 1300,
+    zIndex: resolveBannerZIndex(theme),
     ...designTokens?.layout?.position === "top" ? { top: 0 } : { bottom: 0 },
     left: 0,
     right: 0,
     width: designTokens?.layout?.width?.desktop ?? "100%",
     p: 2
-  };
+  });
   const backdropToken = designTokens?.layout?.backdrop;
   const resolveBackdropColor = (theme) => {
     if (backdropToken === false) return "transparent";
@@ -196,8 +197,8 @@ function CookieBanner({
   };
   const isSafeRoute = (() => {
     try {
-      if (typeof window === "undefined") return false;
-      const current = new URL(window.location.href);
+      if (globalThis?.window === void 0) return false;
+      const current = new URL(globalThis.window.location.href);
       const safeUrls = [policyLinkUrl, termsLinkUrl].filter(Boolean);
       return safeUrls.some((u) => {
         try {
@@ -224,12 +225,12 @@ function CookieBanner({
             right: 0,
             bottom: 0,
             backgroundColor: resolveBackdropColor(theme),
-            zIndex: 1299
+            zIndex: designTokens?.layout?.zIndex?.backdrop ?? (resolveBannerZIndex(theme) ? resolveBannerZIndex(theme) - 1 : 1299)
           }),
           "data-testid": "lgpd-cookie-banner-overlay"
         }
       ),
-      /* @__PURE__ */ jsx(Box2, { sx: positionStyle, children: bannerContent })
+      /* @__PURE__ */ jsx(Box2, { sx: positionStyle, "data-testid": "lgpd-cookie-banner-wrapper", children: bannerContent })
     ] });
   }
   return /* @__PURE__ */ jsx(
@@ -362,7 +363,8 @@ function PreferencesModal({
       });
     }
   }, [isModalOpen, getInitialPreferences]);
-  const open = DialogProps2?.open ?? isModalOpen ?? false;
+  const { open: dialogOpenProp, ...dialogRest } = DialogProps2 ?? {};
+  const open = dialogOpenProp ?? isModalOpen ?? false;
   const handleSave = () => {
     setPreferences(tempPreferences);
   };
@@ -379,7 +381,32 @@ function PreferencesModal({
     backgroundColor: designTokens?.colors?.background ?? theme.palette.background.paper,
     color: designTokens?.colors?.text ?? theme.palette.text.primary
   });
-  return /* @__PURE__ */ jsxs(Dialog, { "aria-labelledby": "cookie-pref-title", open, onClose: handleCancel, ...DialogProps2, children: [
+  const resolveModalZIndex = React3.useCallback(
+    (theme) => designTokens?.layout?.zIndex?.modal ?? (theme?.zIndex?.modal ?? 1300) + 10,
+    [designTokens?.layout?.zIndex?.modal]
+  );
+  const modalZIndexToken = designTokens?.layout?.zIndex?.modal;
+  const rootSx = [
+    DialogProps2?.slotProps?.root && DialogProps2.slotProps.root.sx,
+    (theme) => ({ zIndex: resolveModalZIndex(theme) })
+  ].filter(Boolean);
+  const rootSlotProps = {
+    ...dialogRest?.slotProps?.root,
+    sx: rootSx,
+    ...modalZIndexToken ? { style: { zIndex: modalZIndexToken } } : {},
+    "data-testid": dialogRest?.slotProps?.root?.["data-testid"] ?? "lgpd-preferences-modal-root"
+  };
+  const mergedDialogProps = {
+    open,
+    fullWidth: true,
+    maxWidth: "sm",
+    ...dialogRest,
+    slotProps: {
+      ...dialogRest?.slotProps,
+      root: rootSlotProps
+    }
+  };
+  return /* @__PURE__ */ jsxs(Dialog, { "aria-labelledby": "cookie-pref-title", onClose: handleCancel, ...mergedDialogProps, children: [
     /* @__PURE__ */ jsx(DialogTitle, { id: "cookie-pref-title", sx: modalTitleSx, children: texts.modalTitle }),
     /* @__PURE__ */ jsxs(DialogContent, { dividers: true, sx: modalContentSx, children: [
       /* @__PURE__ */ jsx(
@@ -413,7 +440,7 @@ function PreferencesModal({
           });
           const merged = [
             ...enrichedDescriptors,
-            ...namesFromGuidance.filter((n) => !enrichedDescriptors.find((d) => d.name === n)).map((n) => ({ name: n, purpose: "-", duration: "-", provider: "-" }))
+            ...namesFromGuidance.filter((n) => !enrichedDescriptors.some((d) => d.name === n)).map((n) => ({ name: n, purpose: "-", duration: "-", provider: "-" }))
           ];
           let mergedFinal = merged;
           try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-lgpd-consent/mui",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "Componentes Material-UI prontos para gerenciamento de consentimento LGPD/ANPD",
   "keywords": [
     "lgpd",
@@ -58,7 +58,7 @@
     }
   },
   "dependencies": {
-    "@react-lgpd-consent/core": "^0.6.3"
+    "@react-lgpd-consent/core": "^0.7.0"
   },
   "scripts": {
     "clean": "rimraf dist",