@react-lgpd-consent/mui 0.7.1 → 0.8.0

package/dist/ui.js

@@ -1,7 +1,7 @@
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
-import { useConsentTexts, useDesignTokens, useConsent, logger, useConsentHydration, useCategories, getCookiesInfoForCategory, ConsentProvider as ConsentProvider$1 } from '@react-lgpd-consent/core';
-import * as React3 from 'react';
+import { useConsentTexts, resolveTexts, useDesignTokens, useConsent, logger, useConsentHydration, useCategories, getCookiesInfoForCategory, ConsentProvider as ConsentProvider$1 } from '@react-lgpd-consent/core';
+import * as React4 from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useTheme, ThemeProvider } from '@mui/material/styles';
 import Box2 from '@mui/material/Box';
@@ -48,11 +48,22 @@ var linkStyles = {
     textDecoration: "underline"
   }
 };
-var Branding = React3.memo(function Branding2({
+var Branding = React4.memo(function Branding2({
   variant,
-  hidden = false
+  hidden = false,
+  texts: textsProp,
+  language,
+  textVariant
 }) {
-  const texts = useConsentTexts();
+  const baseTexts = useConsentTexts();
+  const mergedTexts = React4.useMemo(
+    () => ({ ...baseTexts, ...textsProp ?? {} }),
+    [baseTexts, textsProp]
+  );
+  const texts = React4.useMemo(
+    () => resolveTexts(mergedTexts, { language, variant: textVariant }),
+    [mergedTexts, language, textVariant]
+  );
   const designTokens = useDesignTokens();
   if (hidden) return null;
   return /* @__PURE__ */ jsxs(
@@ -90,10 +101,21 @@ function CookieBanner({
   blocking = true,
   hideBranding = false,
   SnackbarProps,
-  PaperProps
+  PaperProps,
+  texts: textsProp,
+  language,
+  textVariant
 }) {
   const { consented, acceptAll, rejectAll, openPreferences } = useConsent();
-  const texts = useConsentTexts();
+  const baseTexts = useConsentTexts();
+  const mergedTexts = React4.useMemo(
+    () => ({ ...baseTexts, ...textsProp ?? {} }),
+    [baseTexts, textsProp]
+  );
+  const texts = React4.useMemo(
+    () => resolveTexts(mergedTexts, { language, variant: textVariant }),
+    [mergedTexts, language, textVariant]
+  );
   const isHydrated = useConsentHydration();
   const designTokens = useDesignTokens();
   const open = debug ? true : isHydrated && !consented;
@@ -168,7 +190,15 @@ function CookieBanner({
         }
       )
     ] }),
-    !hideBranding && /* @__PURE__ */ jsx(Branding, { variant: "banner" })
+    !hideBranding && /* @__PURE__ */ jsx(
+      Branding,
+      {
+        variant: "banner",
+        texts: textsProp,
+        language,
+        textVariant
+      }
+    )
   ] }) });
   const resolveBannerZIndex = (theme) => designTokens?.layout?.zIndex?.banner ?? theme?.zIndex?.snackbar ?? 1400;
   const positionStyle = (theme) => ({
@@ -268,13 +298,24 @@ function FloatingPreferencesButtonComponent({
   icon = /* @__PURE__ */ jsx(CookieOutlined, {}),
   tooltip,
   FabProps,
-  hideWhenConsented = false
+  hideWhenConsented = false,
+  texts: textsProp,
+  language,
+  textVariant
 }) {
   const { openPreferences, consented } = useConsent();
-  const texts = useConsentTexts();
+  const baseTexts = useConsentTexts();
+  const mergedTexts = React4.useMemo(
+    () => ({ ...baseTexts, ...textsProp ?? {} }),
+    [baseTexts, textsProp]
+  );
+  const texts = React4.useMemo(
+    () => resolveTexts(mergedTexts, { language, variant: textVariant }),
+    [mergedTexts, language, textVariant]
+  );
   const safeTheme = useThemeWithFallbacks();
   const designTokens = useDesignTokens();
-  const positionStyles = React3.useMemo(() => {
+  const positionStyles = React4.useMemo(() => {
     const styles = {
       position: "fixed",
       zIndex: 1200
@@ -325,7 +366,7 @@ function FloatingPreferencesButtonComponent({
     }
   ) });
 }
-var FloatingPreferencesButton = React3.memo(FloatingPreferencesButtonComponent);
+var FloatingPreferencesButton = React4.memo(FloatingPreferencesButtonComponent);
 FloatingPreferencesButton.displayName = "FloatingPreferencesButton";
 function PreferencesModal({
   DialogProps: DialogProps2,
@@ -333,26 +374,37 @@ function PreferencesModal({
   isModalOpen: isModalOpenProp,
   preferences: preferencesProp,
   setPreferences: setPreferencesProp,
-  closePreferences: closePreferencesProp
+  closePreferences: closePreferencesProp,
+  texts: textsProp,
+  language,
+  textVariant
 }) {
   const hookValue = useConsent();
   const preferences = preferencesProp ?? hookValue.preferences;
   const setPreferences = setPreferencesProp ?? hookValue.setPreferences;
   const closePreferences = closePreferencesProp ?? hookValue.closePreferences;
   const isModalOpen = isModalOpenProp ?? hookValue.isModalOpen;
-  const texts = useConsentTexts();
+  const baseTexts = useConsentTexts();
+  const mergedTexts = React4.useMemo(
+    () => ({ ...baseTexts, ...textsProp ?? {} }),
+    [baseTexts, textsProp]
+  );
+  const texts = React4.useMemo(
+    () => resolveTexts(mergedTexts, { language, variant: textVariant }),
+    [mergedTexts, language, textVariant]
+  );
   const designTokens = useDesignTokens();
   const { toggleableCategories, allCategories } = useCategories();
-  const getInitialPreferences = React3.useCallback(() => {
+  const getInitialPreferences = React4.useCallback(() => {
     const syncedPrefs = { necessary: true };
     toggleableCategories.forEach((category) => {
       syncedPrefs[category.id] = preferences[category.id] ?? false;
     });
     return syncedPrefs;
   }, [preferences, toggleableCategories]);
-  const [tempPreferences, setTempPreferences] = React3.useState(getInitialPreferences);
-  const wasOpenRef = React3.useRef(isModalOpen);
-  React3.useEffect(() => {
+  const [tempPreferences, setTempPreferences] = React4.useState(getInitialPreferences);
+  const wasOpenRef = React4.useRef(isModalOpen);
+  React4.useEffect(() => {
     const justOpened = isModalOpen && !wasOpenRef.current;
     wasOpenRef.current = isModalOpen;
     if (justOpened) {
@@ -370,6 +422,7 @@ function PreferencesModal({
     setTempPreferences(preferences);
     closePreferences();
   };
+  const descriptionId = "cookie-pref-description";
   const modalTitleSx = (theme) => ({
     fontSize: designTokens?.typography?.fontSize?.modal ?? void 0,
     color: designTokens?.colors?.text ?? theme.palette.text.primary
@@ -379,7 +432,7 @@ function PreferencesModal({
     backgroundColor: designTokens?.colors?.background ?? theme.palette.background.paper,
     color: designTokens?.colors?.text ?? theme.palette.text.primary
   });
-  const resolveModalZIndex = React3.useCallback(
+  const resolveModalZIndex = React4.useCallback(
     (theme) => designTokens?.layout?.zIndex?.modal ?? (theme?.zIndex?.modal ?? 1300) + 10,
     [designTokens?.layout?.zIndex?.modal]
   );
@@ -394,11 +447,13 @@ function PreferencesModal({
     ...modalZIndexToken ? { style: { zIndex: modalZIndexToken } } : {},
     "data-testid": dialogRest?.slotProps?.root?.["data-testid"] ?? "lgpd-preferences-modal-root"
   };
+  const ariaDescribedBy = dialogRest["aria-describedby"] ?? descriptionId;
   const mergedDialogProps = {
     open,
     fullWidth: true,
     maxWidth: "sm",
     ...dialogRest,
+    "aria-describedby": ariaDescribedBy,
     slotProps: {
       ...dialogRest?.slotProps,
       root: rootSlotProps
@@ -410,6 +465,7 @@ function PreferencesModal({
       /* @__PURE__ */ jsx(
         Typography,
         {
+          id: descriptionId,
           variant: "body2",
           sx: (theme) => ({
             mb: 2,
@@ -425,6 +481,10 @@ function PreferencesModal({
           const namesFromGuidance = full?.cookies ?? [];
           const used = globalThis.__LGPD_USED_INTEGRATIONS__ || [];
           const descriptors = getCookiesInfoForCategory(category.id, used);
+          const tableHeaders = texts.cookieDetails?.tableHeaders;
+          const toggleDetailsText = texts.cookieDetails?.toggleDetails?.expand ?? "Ver detalhes";
+          const scriptLabelPrefix = texts.cookieDetails?.scriptLabelPrefix ?? "(script) ";
+          const scriptPurpose = texts.cookieDetails?.scriptPurpose ?? "Script de integra\xE7\xE3o ativo";
           const enrichedDescriptors = descriptors.map((desc) => {
             if (desc.purpose && desc.duration && desc.provider) {
               return desc;
@@ -445,8 +505,8 @@ function PreferencesModal({
             if (merged.length === 0) {
               const gmap = globalThis.__LGPD_INTEGRATIONS_MAP__ || {};
               const scriptRows = Object.entries(gmap).filter(([, cat]) => cat === category.id).map(([id]) => ({
-                name: `(script) ${id}`,
-                purpose: "Script de integra\xE7\xE3o ativo",
+                name: `${scriptLabelPrefix}${id}`,
+                purpose: scriptPurpose,
                 duration: "-",
                 provider: "-"
               }));
@@ -472,13 +532,13 @@ function PreferencesModal({
               }
             ),
             /* @__PURE__ */ jsxs("details", { style: { marginLeft: 48 }, children: [
-              /* @__PURE__ */ jsx("summary", { children: "Ver detalhes" }),
+              /* @__PURE__ */ jsx("summary", { children: toggleDetailsText }),
               /* @__PURE__ */ jsx(Box2, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
                 /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                  /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Cookie" }),
-                  /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Finalidade" }),
-                  /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Dura\xE7\xE3o" }),
-                  /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Fornecedor" })
+                  /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: tableHeaders?.name ?? "Cookie" }),
+                  /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: tableHeaders?.purpose ?? "Finalidade" }),
+                  /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: tableHeaders?.duration ?? "Dura\xE7\xE3o" }),
+                  /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: tableHeaders?.provider ?? "Fornecedor" })
                 ] }) }),
                 /* @__PURE__ */ jsx("tbody", { children: mergedFinal.map((d, idx) => /* @__PURE__ */ jsxs("tr", { children: [
                   /* @__PURE__ */ jsx("td", { children: d.name }),
@@ -492,13 +552,13 @@ function PreferencesModal({
         }),
         /* @__PURE__ */ jsx(FormControlLabel, { control: /* @__PURE__ */ jsx(Switch, { checked: true, disabled: true }), label: texts.necessaryAlwaysOn }),
         /* @__PURE__ */ jsxs("details", { style: { marginLeft: 48 }, children: [
-          /* @__PURE__ */ jsx("summary", { children: "Ver detalhes" }),
+          /* @__PURE__ */ jsx("summary", { children: texts.cookieDetails?.toggleDetails?.expand ?? "Ver detalhes" }),
           /* @__PURE__ */ jsx(Box2, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
             /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-              /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Cookie" }),
-              /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Finalidade" }),
-              /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Dura\xE7\xE3o" }),
-              /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Fornecedor" })
+              /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: texts.cookieDetails?.tableHeaders?.name ?? "Cookie" }),
+              /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: texts.cookieDetails?.tableHeaders?.purpose ?? "Finalidade" }),
+              /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: texts.cookieDetails?.tableHeaders?.duration ?? "Dura\xE7\xE3o" }),
+              /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: texts.cookieDetails?.tableHeaders?.provider ?? "Fornecedor" })
             ] }) }),
             /* @__PURE__ */ jsx("tbody", { children: (() => {
               const used = globalThis.__LGPD_USED_INTEGRATIONS__ || [];
@@ -521,7 +581,7 @@ function PreferencesModal({
       /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleCancel, children: texts.close }),
       /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleSave, children: texts.save })
     ] }),
-    !hideBranding && /* @__PURE__ */ jsx(Branding, { variant: "modal" })
+    !hideBranding && /* @__PURE__ */ jsx(Branding, { variant: "modal", texts: textsProp, language, textVariant })
   ] });
 }
 function ConsentProvider({

package/package.json

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