@react-lgpd-consent/mui 0.6.3 → 0.7.1

package/README.md

@@ -28,6 +28,12 @@ pnpm add @react-lgpd-consent/mui @mui/material @mui/icons-material
 - `@mui/icons-material@^7.0.0 || ^6.0.0 || ^5.15.0` (opcional)
 - `react@^18.2.0 || ^19.0.0`, `react-dom@^18.2.0 || ^19.0.0`
 
+### Entradas de importação (evite ambiguidades)
+
+- `@react-lgpd-consent/mui/ui`: **apenas UI** (ConsentProvider MUI + componentes). Ideal para bundles menores e sem re-export do core.
+- `@react-lgpd-consent/mui`: compatibilidade total (re-exporta o core); use `headless` ou `ConsentProviderHeadless` daqui se precisar da lógica.
+- `@react-lgpd-consent/core`: headless puro, recomendado para hooks/utils na sua própria UI.
+
 ## 🚀 Uso Básico
 
 ```tsx
@@ -70,6 +76,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:
@@ -135,4 +175,3 @@ function CustomUI() {
 ## 📄 Licença
 
 MIT © [Luciano Édipo](https://github.com/lucianoedipo)
-

package/dist/index.cjs

@@ -42,6 +42,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var core__namespace = /*#__PURE__*/_interopNamespace(core);
 var Link__default = /*#__PURE__*/_interopDefault(Link);
 var Typography__default = /*#__PURE__*/_interopDefault(Typography);
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
@@ -211,15 +212,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 +237,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 +265,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 +403,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 +421,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 +480,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 {
@@ -587,6 +615,7 @@ Object.defineProperty(exports, "ConsentProviderHeadless", {
   enumerable: true,
   get: function () { return core.ConsentProvider; }
 });
+exports.headless = core__namespace;
 exports.Branding = Branding;
 exports.ConsentProvider = ConsentProvider;
 exports.CookieBanner = CookieBanner;

package/dist/index.d.cts

@@ -1,5 +1,7 @@
 import { ConsentProviderProps as ConsentProviderProps$1, ConsentPreferences } from '@react-lgpd-consent/core';
 export * from '@react-lgpd-consent/core';
+import * as core from '@react-lgpd-consent/core';
+export { core as headless };
 export { ConsentProvider as ConsentProviderHeadless } from '@react-lgpd-consent/core';
 import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -468,7 +470,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

@@ -1,5 +1,7 @@
 import { ConsentProviderProps as ConsentProviderProps$1, ConsentPreferences } from '@react-lgpd-consent/core';
 export * from '@react-lgpd-consent/core';
+import * as core from '@react-lgpd-consent/core';
+export { core as headless };
 export { ConsentProvider as ConsentProviderHeadless } from '@react-lgpd-consent/core';
 import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -468,7 +470,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

@@ -1,5 +1,7 @@
 import { useConsentTexts, useDesignTokens, useConsent, logger, useConsentHydration, useCategories, getCookiesInfoForCategory, ConsentProvider as ConsentProvider$1 } from '@react-lgpd-consent/core';
 export * from '@react-lgpd-consent/core';
+import * as core from '@react-lgpd-consent/core';
+export { core as headless };
 export { ConsentProvider as ConsentProviderHeadless } from '@react-lgpd-consent/core';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
@@ -172,15 +174,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 +199,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 +227,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 +365,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 +383,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 +442,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 {