react-lgpd-consent 0.3.3 → 0.3.5
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/CHANGELOG.md +66 -3
- package/LICENSE +21 -21
- package/QUICKSTART.en.md +245 -0
- package/QUICKSTART.md +617 -0
- package/README.en.md +86 -0
- package/README.md +46 -81
- package/dist/{PreferencesModal-HTTMUZND.js → PreferencesModal-KAZMVPBD.js} +1 -1
- package/dist/{chunk-GPLNN3FD.js → chunk-MHCQFGRJ.js} +131 -218
- package/dist/index.cjs +226 -253
- package/dist/index.d.cts +36 -6
- package/dist/index.d.ts +36 -6
- package/dist/index.js +73 -2
- package/package.json +33 -17
|
@@ -181,88 +181,8 @@ function useCategoryStatus(categoryId) {
|
|
|
181
181
|
}
|
|
182
182
|
|
|
183
183
|
// src/context/ConsentContext.tsx
|
|
184
|
-
import * as
|
|
185
|
-
|
|
186
|
-
// src/utils/SafeThemeProvider.tsx
|
|
187
|
-
import * as React3 from "react";
|
|
188
|
-
import { ThemeProvider, createTheme } from "@mui/material/styles";
|
|
189
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
190
|
-
var createSafeTheme = (userTheme) => {
|
|
191
|
-
const baseTheme = createTheme({
|
|
192
|
-
palette: {
|
|
193
|
-
primary: {
|
|
194
|
-
main: "#1976d2",
|
|
195
|
-
dark: "#1565c0",
|
|
196
|
-
light: "#42a5f5",
|
|
197
|
-
contrastText: "#ffffff"
|
|
198
|
-
},
|
|
199
|
-
secondary: {
|
|
200
|
-
main: "#dc004e",
|
|
201
|
-
dark: "#9a0036",
|
|
202
|
-
light: "#e33371",
|
|
203
|
-
contrastText: "#ffffff"
|
|
204
|
-
},
|
|
205
|
-
background: {
|
|
206
|
-
default: "#fafafa",
|
|
207
|
-
paper: "#ffffff"
|
|
208
|
-
},
|
|
209
|
-
text: {
|
|
210
|
-
primary: "#333333",
|
|
211
|
-
secondary: "#666666"
|
|
212
|
-
}
|
|
213
|
-
},
|
|
214
|
-
transitions: {
|
|
215
|
-
duration: {
|
|
216
|
-
shortest: 150,
|
|
217
|
-
shorter: 200,
|
|
218
|
-
short: 250,
|
|
219
|
-
standard: 300,
|
|
220
|
-
complex: 375,
|
|
221
|
-
enteringScreen: 225,
|
|
222
|
-
leavingScreen: 195
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
});
|
|
226
|
-
if (!userTheme) {
|
|
227
|
-
return baseTheme;
|
|
228
|
-
}
|
|
229
|
-
return createTheme({
|
|
230
|
-
...baseTheme,
|
|
231
|
-
...userTheme,
|
|
232
|
-
palette: {
|
|
233
|
-
...baseTheme.palette,
|
|
234
|
-
...userTheme.palette,
|
|
235
|
-
primary: {
|
|
236
|
-
...baseTheme.palette.primary,
|
|
237
|
-
...userTheme.palette?.primary
|
|
238
|
-
},
|
|
239
|
-
secondary: {
|
|
240
|
-
...baseTheme.palette.secondary,
|
|
241
|
-
...userTheme.palette?.secondary
|
|
242
|
-
},
|
|
243
|
-
background: {
|
|
244
|
-
...baseTheme.palette.background,
|
|
245
|
-
...userTheme.palette?.background
|
|
246
|
-
},
|
|
247
|
-
text: {
|
|
248
|
-
...baseTheme.palette.text,
|
|
249
|
-
...userTheme.palette?.text
|
|
250
|
-
}
|
|
251
|
-
},
|
|
252
|
-
transitions: {
|
|
253
|
-
...baseTheme.transitions,
|
|
254
|
-
...userTheme.transitions,
|
|
255
|
-
duration: {
|
|
256
|
-
...baseTheme.transitions.duration,
|
|
257
|
-
...userTheme.transitions?.duration
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
});
|
|
261
|
-
};
|
|
262
|
-
function SafeThemeProvider({ theme, children }) {
|
|
263
|
-
const safeTheme = React3.useMemo(() => createSafeTheme(theme), [theme]);
|
|
264
|
-
return /* @__PURE__ */ jsx2(ThemeProvider, { theme: safeTheme, children });
|
|
265
|
-
}
|
|
184
|
+
import * as React4 from "react";
|
|
185
|
+
import { ThemeProvider } from "@mui/material/styles";
|
|
266
186
|
|
|
267
187
|
// src/utils/cookieUtils.ts
|
|
268
188
|
import Cookies from "js-cookie";
|
|
@@ -614,86 +534,18 @@ function getDefaultCategoryDefinition(category) {
|
|
|
614
534
|
return definitions[category];
|
|
615
535
|
}
|
|
616
536
|
|
|
617
|
-
// src/utils/theme.ts
|
|
618
|
-
import { createTheme as createTheme2 } from "@mui/material/styles";
|
|
619
|
-
var defaultConsentTheme = createTheme2({
|
|
620
|
-
palette: {
|
|
621
|
-
primary: {
|
|
622
|
-
main: "#1976d2",
|
|
623
|
-
contrastText: "#ffffff"
|
|
624
|
-
},
|
|
625
|
-
secondary: {
|
|
626
|
-
main: "#dc004e",
|
|
627
|
-
contrastText: "#ffffff"
|
|
628
|
-
},
|
|
629
|
-
background: {
|
|
630
|
-
default: "#fafafa",
|
|
631
|
-
paper: "#ffffff"
|
|
632
|
-
},
|
|
633
|
-
text: {
|
|
634
|
-
primary: "#333333",
|
|
635
|
-
secondary: "#666666"
|
|
636
|
-
},
|
|
637
|
-
action: {
|
|
638
|
-
hover: "rgba(25, 118, 210, 0.04)"
|
|
639
|
-
}
|
|
640
|
-
},
|
|
641
|
-
typography: {
|
|
642
|
-
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
|
643
|
-
body2: {
|
|
644
|
-
fontSize: "0.875rem",
|
|
645
|
-
lineHeight: 1.43
|
|
646
|
-
},
|
|
647
|
-
button: {
|
|
648
|
-
fontWeight: 500,
|
|
649
|
-
textTransform: "none"
|
|
650
|
-
}
|
|
651
|
-
},
|
|
652
|
-
components: {
|
|
653
|
-
MuiButton: {
|
|
654
|
-
styleOverrides: {
|
|
655
|
-
root: {
|
|
656
|
-
borderRadius: 8,
|
|
657
|
-
paddingX: 16,
|
|
658
|
-
paddingY: 8
|
|
659
|
-
},
|
|
660
|
-
contained: {
|
|
661
|
-
boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
|
|
662
|
-
"&:hover": {
|
|
663
|
-
boxShadow: "0 4px 8px rgba(0,0,0,0.15)"
|
|
664
|
-
}
|
|
665
|
-
}
|
|
666
|
-
}
|
|
667
|
-
},
|
|
668
|
-
MuiPaper: {
|
|
669
|
-
styleOverrides: {
|
|
670
|
-
root: {
|
|
671
|
-
borderRadius: 12
|
|
672
|
-
}
|
|
673
|
-
}
|
|
674
|
-
},
|
|
675
|
-
MuiDialog: {
|
|
676
|
-
styleOverrides: {
|
|
677
|
-
paper: {
|
|
678
|
-
borderRadius: 16
|
|
679
|
-
}
|
|
680
|
-
}
|
|
681
|
-
}
|
|
682
|
-
}
|
|
683
|
-
});
|
|
684
|
-
|
|
685
537
|
// src/context/DesignContext.tsx
|
|
686
|
-
import * as
|
|
687
|
-
import { jsx as
|
|
688
|
-
var DesignContext =
|
|
538
|
+
import * as React3 from "react";
|
|
539
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
540
|
+
var DesignContext = React3.createContext(void 0);
|
|
689
541
|
function DesignProvider({
|
|
690
542
|
tokens,
|
|
691
543
|
children
|
|
692
544
|
}) {
|
|
693
|
-
return /* @__PURE__ */
|
|
545
|
+
return /* @__PURE__ */ jsx2(DesignContext.Provider, { value: tokens, children });
|
|
694
546
|
}
|
|
695
547
|
function useDesignTokens() {
|
|
696
|
-
return
|
|
548
|
+
return React3.useContext(DesignContext);
|
|
697
549
|
}
|
|
698
550
|
|
|
699
551
|
// src/components/CookieBanner.tsx
|
|
@@ -708,7 +560,7 @@ import Link2 from "@mui/material/Link";
|
|
|
708
560
|
// src/components/Branding.tsx
|
|
709
561
|
import Link from "@mui/material/Link";
|
|
710
562
|
import Typography from "@mui/material/Typography";
|
|
711
|
-
import { jsx as
|
|
563
|
+
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
712
564
|
var brandingStyles = {
|
|
713
565
|
banner: {
|
|
714
566
|
fontSize: "0.65rem",
|
|
@@ -737,6 +589,7 @@ var linkStyles = {
|
|
|
737
589
|
};
|
|
738
590
|
function Branding({ variant, hidden = false }) {
|
|
739
591
|
const texts = useConsentTexts();
|
|
592
|
+
const designTokens = useDesignTokens();
|
|
740
593
|
if (hidden) return null;
|
|
741
594
|
return /* @__PURE__ */ jsxs(
|
|
742
595
|
Typography,
|
|
@@ -744,12 +597,12 @@ function Branding({ variant, hidden = false }) {
|
|
|
744
597
|
variant: "caption",
|
|
745
598
|
sx: (theme) => ({
|
|
746
599
|
...brandingStyles[variant],
|
|
747
|
-
color: theme.palette.text.secondary
|
|
600
|
+
color: designTokens?.colors?.text ?? theme.palette.text.secondary
|
|
748
601
|
}),
|
|
749
602
|
children: [
|
|
750
603
|
texts.brandingPoweredBy || "fornecido por",
|
|
751
604
|
" ",
|
|
752
|
-
/* @__PURE__ */
|
|
605
|
+
/* @__PURE__ */ jsx3(
|
|
753
606
|
Link,
|
|
754
607
|
{
|
|
755
608
|
href: "https://www.ledipo.eti.br",
|
|
@@ -757,7 +610,7 @@ function Branding({ variant, hidden = false }) {
|
|
|
757
610
|
rel: "noopener noreferrer",
|
|
758
611
|
sx: (theme) => ({
|
|
759
612
|
...linkStyles,
|
|
760
|
-
color: theme.palette.primary.main
|
|
613
|
+
color: designTokens?.colors?.primary ?? theme.palette.primary.main
|
|
761
614
|
}),
|
|
762
615
|
children: "L\xC9dipO.eti.br"
|
|
763
616
|
}
|
|
@@ -768,7 +621,7 @@ function Branding({ variant, hidden = false }) {
|
|
|
768
621
|
}
|
|
769
622
|
|
|
770
623
|
// src/components/CookieBanner.tsx
|
|
771
|
-
import { Fragment, jsx as
|
|
624
|
+
import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
772
625
|
function CookieBanner({
|
|
773
626
|
policyLinkUrl,
|
|
774
627
|
debug,
|
|
@@ -799,11 +652,11 @@ function CookieBanner({
|
|
|
799
652
|
borderRadius: designTokens?.spacing?.borderRadius?.banner,
|
|
800
653
|
fontFamily: designTokens?.typography?.fontFamily
|
|
801
654
|
};
|
|
802
|
-
const bannerContent = /* @__PURE__ */
|
|
655
|
+
const bannerContent = /* @__PURE__ */ jsx4(Paper, { elevation: 3, sx: bannerStyle, ...PaperProps, children: /* @__PURE__ */ jsxs2(Stack, { spacing: 1, children: [
|
|
803
656
|
/* @__PURE__ */ jsxs2(Typography2, { variant: "body2", sx: { fontSize: designTokens?.typography?.fontSize?.banner }, children: [
|
|
804
657
|
texts.bannerMessage,
|
|
805
658
|
" ",
|
|
806
|
-
policyLinkUrl && /* @__PURE__ */
|
|
659
|
+
policyLinkUrl && /* @__PURE__ */ jsx4(
|
|
807
660
|
Link2,
|
|
808
661
|
{
|
|
809
662
|
href: policyLinkUrl,
|
|
@@ -816,7 +669,7 @@ function CookieBanner({
|
|
|
816
669
|
)
|
|
817
670
|
] }),
|
|
818
671
|
/* @__PURE__ */ jsxs2(Stack, { direction: { xs: "column", sm: "row" }, spacing: 1, justifyContent: "flex-end", children: [
|
|
819
|
-
/* @__PURE__ */
|
|
672
|
+
/* @__PURE__ */ jsx4(
|
|
820
673
|
Button,
|
|
821
674
|
{
|
|
822
675
|
variant: "outlined",
|
|
@@ -828,7 +681,7 @@ function CookieBanner({
|
|
|
828
681
|
children: texts.declineAll
|
|
829
682
|
}
|
|
830
683
|
),
|
|
831
|
-
/* @__PURE__ */
|
|
684
|
+
/* @__PURE__ */ jsx4(
|
|
832
685
|
Button,
|
|
833
686
|
{
|
|
834
687
|
variant: "contained",
|
|
@@ -840,7 +693,7 @@ function CookieBanner({
|
|
|
840
693
|
children: texts.acceptAll
|
|
841
694
|
}
|
|
842
695
|
),
|
|
843
|
-
/* @__PURE__ */
|
|
696
|
+
/* @__PURE__ */ jsx4(
|
|
844
697
|
Button,
|
|
845
698
|
{
|
|
846
699
|
variant: "text",
|
|
@@ -853,7 +706,7 @@ function CookieBanner({
|
|
|
853
706
|
}
|
|
854
707
|
)
|
|
855
708
|
] }),
|
|
856
|
-
!hideBranding && /* @__PURE__ */
|
|
709
|
+
!hideBranding && /* @__PURE__ */ jsx4(Branding, { variant: "banner" })
|
|
857
710
|
] }) });
|
|
858
711
|
const positionStyle = {
|
|
859
712
|
position: "fixed",
|
|
@@ -864,10 +717,16 @@ function CookieBanner({
|
|
|
864
717
|
width: designTokens?.layout?.width?.desktop ?? "100%",
|
|
865
718
|
p: 2
|
|
866
719
|
};
|
|
867
|
-
|
|
720
|
+
let backdropColor = "rgba(0, 0, 0, 0.4)";
|
|
721
|
+
const backdropToken = designTokens?.layout?.backdrop;
|
|
722
|
+
if (backdropToken === false) {
|
|
723
|
+
backdropColor = "transparent";
|
|
724
|
+
} else if (typeof backdropToken === "string") {
|
|
725
|
+
backdropColor = backdropToken;
|
|
726
|
+
}
|
|
868
727
|
if (blocking) {
|
|
869
728
|
return /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
870
|
-
/* @__PURE__ */
|
|
729
|
+
/* @__PURE__ */ jsx4(
|
|
871
730
|
Box,
|
|
872
731
|
{
|
|
873
732
|
sx: {
|
|
@@ -881,10 +740,10 @@ function CookieBanner({
|
|
|
881
740
|
}
|
|
882
741
|
}
|
|
883
742
|
),
|
|
884
|
-
/* @__PURE__ */
|
|
743
|
+
/* @__PURE__ */ jsx4(Box, { sx: positionStyle, children: bannerContent })
|
|
885
744
|
] });
|
|
886
745
|
}
|
|
887
|
-
return /* @__PURE__ */
|
|
746
|
+
return /* @__PURE__ */ jsx4(
|
|
888
747
|
Snackbar,
|
|
889
748
|
{
|
|
890
749
|
open,
|
|
@@ -903,7 +762,7 @@ import CookieOutlined from "@mui/icons-material/CookieOutlined";
|
|
|
903
762
|
import Fab from "@mui/material/Fab";
|
|
904
763
|
import Tooltip from "@mui/material/Tooltip";
|
|
905
764
|
import { useTheme } from "@mui/material/styles";
|
|
906
|
-
import { jsx as
|
|
765
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
907
766
|
function useThemeWithFallbacks() {
|
|
908
767
|
const theme = useTheme();
|
|
909
768
|
logger.themeCompatibility(theme);
|
|
@@ -925,7 +784,7 @@ function useThemeWithFallbacks() {
|
|
|
925
784
|
function FloatingPreferencesButton({
|
|
926
785
|
position = "bottom-right",
|
|
927
786
|
offset = 24,
|
|
928
|
-
icon = /* @__PURE__ */
|
|
787
|
+
icon = /* @__PURE__ */ jsx5(CookieOutlined, {}),
|
|
929
788
|
tooltip,
|
|
930
789
|
FabProps,
|
|
931
790
|
hideWhenConsented = false
|
|
@@ -933,6 +792,7 @@ function FloatingPreferencesButton({
|
|
|
933
792
|
const { openPreferences, consented } = useConsent();
|
|
934
793
|
const texts = useConsentTexts();
|
|
935
794
|
const safeTheme = useThemeWithFallbacks();
|
|
795
|
+
const designTokens = useDesignTokens();
|
|
936
796
|
logger.componentRender("FloatingPreferencesButton", {
|
|
937
797
|
position,
|
|
938
798
|
offset,
|
|
@@ -964,7 +824,7 @@ function FloatingPreferencesButton({
|
|
|
964
824
|
return { ...styles, bottom: offset, right: offset };
|
|
965
825
|
}
|
|
966
826
|
};
|
|
967
|
-
return /* @__PURE__ */
|
|
827
|
+
return /* @__PURE__ */ jsx5(Tooltip, { title: tooltipText, placement: "top", children: /* @__PURE__ */ jsx5(
|
|
968
828
|
Fab,
|
|
969
829
|
{
|
|
970
830
|
size: "medium",
|
|
@@ -972,9 +832,9 @@ function FloatingPreferencesButton({
|
|
|
972
832
|
onClick: openPreferences,
|
|
973
833
|
sx: {
|
|
974
834
|
...getPosition(),
|
|
975
|
-
backgroundColor: safeTheme.palette.primary.main,
|
|
835
|
+
backgroundColor: designTokens?.colors?.primary ?? safeTheme.palette.primary.main,
|
|
976
836
|
"&:hover": {
|
|
977
|
-
backgroundColor: safeTheme.palette.primary.dark
|
|
837
|
+
backgroundColor: designTokens?.colors?.primary ? designTokens?.colors?.primary : safeTheme.palette.primary.dark
|
|
978
838
|
},
|
|
979
839
|
transition: `all ${safeTheme.transitions.duration.short}ms`
|
|
980
840
|
},
|
|
@@ -986,9 +846,9 @@ function FloatingPreferencesButton({
|
|
|
986
846
|
}
|
|
987
847
|
|
|
988
848
|
// src/context/ConsentContext.tsx
|
|
989
|
-
import { jsx as
|
|
990
|
-
var PreferencesModal =
|
|
991
|
-
() => import("./PreferencesModal-
|
|
849
|
+
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
850
|
+
var PreferencesModal = React4.lazy(
|
|
851
|
+
() => import("./PreferencesModal-KAZMVPBD.js").then((m) => ({
|
|
992
852
|
default: m.PreferencesModal
|
|
993
853
|
}))
|
|
994
854
|
);
|
|
@@ -1105,10 +965,10 @@ function reducer(state, action) {
|
|
|
1105
965
|
return state;
|
|
1106
966
|
}
|
|
1107
967
|
}
|
|
1108
|
-
var StateCtx =
|
|
1109
|
-
var ActionsCtx =
|
|
1110
|
-
var TextsCtx =
|
|
1111
|
-
var HydrationCtx =
|
|
968
|
+
var StateCtx = React4.createContext(null);
|
|
969
|
+
var ActionsCtx = React4.createContext(null);
|
|
970
|
+
var TextsCtx = React4.createContext(DEFAULT_TEXTS);
|
|
971
|
+
var HydrationCtx = React4.createContext(false);
|
|
1112
972
|
function ConsentProvider({
|
|
1113
973
|
initialState,
|
|
1114
974
|
categories,
|
|
@@ -1122,6 +982,8 @@ function ConsentProvider({
|
|
|
1122
982
|
FloatingPreferencesButtonComponent,
|
|
1123
983
|
floatingPreferencesButtonProps = {},
|
|
1124
984
|
disableFloatingPreferencesButton = false,
|
|
985
|
+
blocking = false,
|
|
986
|
+
blockingStrategy = "auto",
|
|
1125
987
|
hideBranding = false,
|
|
1126
988
|
onConsentGiven,
|
|
1127
989
|
onPreferencesSaved,
|
|
@@ -1129,18 +991,18 @@ function ConsentProvider({
|
|
|
1129
991
|
disableDeveloperGuidance,
|
|
1130
992
|
children
|
|
1131
993
|
}) {
|
|
1132
|
-
const texts =
|
|
1133
|
-
const cookie =
|
|
994
|
+
const texts = React4.useMemo(() => ({ ...DEFAULT_TEXTS, ...textsProp ?? {} }), [textsProp]);
|
|
995
|
+
const cookie = React4.useMemo(
|
|
1134
996
|
() => ({ ...DEFAULT_COOKIE_OPTS, ...cookieOpts ?? {} }),
|
|
1135
997
|
[cookieOpts]
|
|
1136
998
|
);
|
|
1137
|
-
const
|
|
1138
|
-
const finalCategoriesConfig =
|
|
999
|
+
const mergedTheme = theme;
|
|
1000
|
+
const finalCategoriesConfig = React4.useMemo(() => {
|
|
1139
1001
|
if (categories) return categories;
|
|
1140
1002
|
return DEFAULT_PROJECT_CATEGORIES;
|
|
1141
1003
|
}, [categories]);
|
|
1142
1004
|
useDeveloperGuidance(finalCategoriesConfig, disableDeveloperGuidance);
|
|
1143
|
-
const boot =
|
|
1005
|
+
const boot = React4.useMemo(() => {
|
|
1144
1006
|
if (initialState) return { ...initialState, isModalOpen: false };
|
|
1145
1007
|
return createFullConsentState(
|
|
1146
1008
|
false,
|
|
@@ -1150,9 +1012,9 @@ function ConsentProvider({
|
|
|
1150
1012
|
false
|
|
1151
1013
|
);
|
|
1152
1014
|
}, [initialState, finalCategoriesConfig]);
|
|
1153
|
-
const [state, dispatch] =
|
|
1154
|
-
const [isHydrated, setIsHydrated] =
|
|
1155
|
-
|
|
1015
|
+
const [state, dispatch] = React4.useReducer(reducer, boot);
|
|
1016
|
+
const [isHydrated, setIsHydrated] = React4.useState(false);
|
|
1017
|
+
React4.useEffect(() => {
|
|
1156
1018
|
if (!initialState) {
|
|
1157
1019
|
const saved = readConsentCookie(cookie.name);
|
|
1158
1020
|
if (saved?.consented) {
|
|
@@ -1165,17 +1027,17 @@ function ConsentProvider({
|
|
|
1165
1027
|
}
|
|
1166
1028
|
setIsHydrated(true);
|
|
1167
1029
|
}, [cookie.name, initialState, finalCategoriesConfig]);
|
|
1168
|
-
|
|
1030
|
+
React4.useEffect(() => {
|
|
1169
1031
|
if (state.consented) writeConsentCookie(state, finalCategoriesConfig, cookie);
|
|
1170
1032
|
}, [state, cookie, finalCategoriesConfig]);
|
|
1171
|
-
const prevConsented =
|
|
1172
|
-
|
|
1033
|
+
const prevConsented = React4.useRef(state.consented);
|
|
1034
|
+
React4.useEffect(() => {
|
|
1173
1035
|
if (!prevConsented.current && state.consented && onConsentGiven) {
|
|
1174
1036
|
setTimeout(() => onConsentGiven(state), 150);
|
|
1175
1037
|
}
|
|
1176
1038
|
prevConsented.current = state.consented;
|
|
1177
1039
|
}, [state, onConsentGiven]);
|
|
1178
|
-
const api =
|
|
1040
|
+
const api = React4.useMemo(() => {
|
|
1179
1041
|
const acceptAll = () => dispatch({ type: "ACCEPT_ALL", config: finalCategoriesConfig });
|
|
1180
1042
|
const rejectAll = () => dispatch({ type: "REJECT_ALL", config: finalCategoriesConfig });
|
|
1181
1043
|
const setPreference = (category, value) => dispatch({ type: "SET_CATEGORY", category, value });
|
|
@@ -1208,18 +1070,24 @@ function ConsentProvider({
|
|
|
1208
1070
|
resetConsent
|
|
1209
1071
|
};
|
|
1210
1072
|
}, [state, cookie, finalCategoriesConfig, onPreferencesSaved]);
|
|
1211
|
-
|
|
1073
|
+
React4.useEffect(() => {
|
|
1212
1074
|
_registerGlobalOpenPreferences(api.openPreferences);
|
|
1213
1075
|
return () => _unregisterGlobalOpenPreferences();
|
|
1214
1076
|
}, [api.openPreferences]);
|
|
1215
|
-
|
|
1077
|
+
const providerBackdropColor = React4.useMemo(() => {
|
|
1078
|
+
const backdrop = designTokens?.layout?.backdrop;
|
|
1079
|
+
if (backdrop === false) return "transparent";
|
|
1080
|
+
if (typeof backdrop === "string") return backdrop;
|
|
1081
|
+
return "rgba(0, 0, 0, 0.4)";
|
|
1082
|
+
}, [designTokens]);
|
|
1083
|
+
const content = /* @__PURE__ */ jsx6(StateCtx.Provider, { value: state, children: /* @__PURE__ */ jsx6(ActionsCtx.Provider, { value: api, children: /* @__PURE__ */ jsx6(TextsCtx.Provider, { value: texts, children: /* @__PURE__ */ jsx6(HydrationCtx.Provider, { value: isHydrated, children: /* @__PURE__ */ jsx6(DesignProvider, { tokens: designTokens, children: /* @__PURE__ */ jsxs3(
|
|
1216
1084
|
CategoriesProvider,
|
|
1217
1085
|
{
|
|
1218
1086
|
config: finalCategoriesConfig,
|
|
1219
1087
|
disableDeveloperGuidance,
|
|
1220
1088
|
children: [
|
|
1221
1089
|
children,
|
|
1222
|
-
/* @__PURE__ */
|
|
1090
|
+
/* @__PURE__ */ jsx6(React4.Suspense, { fallback: null, children: PreferencesModalComponent ? /* @__PURE__ */ jsx6(
|
|
1223
1091
|
PreferencesModalComponent,
|
|
1224
1092
|
{
|
|
1225
1093
|
preferences: api.preferences,
|
|
@@ -1229,8 +1097,24 @@ function ConsentProvider({
|
|
|
1229
1097
|
texts,
|
|
1230
1098
|
...preferencesModalProps
|
|
1231
1099
|
}
|
|
1232
|
-
) : /* @__PURE__ */
|
|
1233
|
-
!state.consented &&
|
|
1100
|
+
) : /* @__PURE__ */ jsx6(PreferencesModal, { hideBranding }) }),
|
|
1101
|
+
blocking && isHydrated && !state.consented && blockingStrategy === "provider" && /* @__PURE__ */ jsx6(
|
|
1102
|
+
"div",
|
|
1103
|
+
{
|
|
1104
|
+
style: {
|
|
1105
|
+
position: "fixed",
|
|
1106
|
+
top: 0,
|
|
1107
|
+
left: 0,
|
|
1108
|
+
right: 0,
|
|
1109
|
+
bottom: 0,
|
|
1110
|
+
backgroundColor: providerBackdropColor,
|
|
1111
|
+
zIndex: 1299
|
|
1112
|
+
},
|
|
1113
|
+
"data-testid": "lgpd-provider-overlay",
|
|
1114
|
+
"aria-hidden": true
|
|
1115
|
+
}
|
|
1116
|
+
),
|
|
1117
|
+
!state.consented && isHydrated && (CookieBannerComponent ? /* @__PURE__ */ jsx6(
|
|
1234
1118
|
CookieBannerComponent,
|
|
1235
1119
|
{
|
|
1236
1120
|
consented: api.consented,
|
|
@@ -1238,37 +1122,52 @@ function ConsentProvider({
|
|
|
1238
1122
|
rejectAll: api.rejectAll,
|
|
1239
1123
|
openPreferences: api.openPreferences,
|
|
1240
1124
|
texts,
|
|
1125
|
+
blocking,
|
|
1241
1126
|
...cookieBannerProps
|
|
1242
1127
|
}
|
|
1243
|
-
) : /* @__PURE__ */
|
|
1244
|
-
|
|
1128
|
+
) : /* @__PURE__ */ jsx6(
|
|
1129
|
+
CookieBanner,
|
|
1130
|
+
{
|
|
1131
|
+
blocking,
|
|
1132
|
+
hideBranding,
|
|
1133
|
+
...cookieBannerProps
|
|
1134
|
+
}
|
|
1135
|
+
)),
|
|
1136
|
+
state.consented && !disableFloatingPreferencesButton && (FloatingPreferencesButtonComponent ? /* @__PURE__ */ jsx6(
|
|
1245
1137
|
FloatingPreferencesButtonComponent,
|
|
1246
1138
|
{
|
|
1247
1139
|
openPreferences: api.openPreferences,
|
|
1248
1140
|
consented: api.consented,
|
|
1249
1141
|
...floatingPreferencesButtonProps
|
|
1250
1142
|
}
|
|
1251
|
-
) :
|
|
1143
|
+
) : (
|
|
1144
|
+
// Encaminha `floatingPreferencesButtonProps` para o componente padrão
|
|
1145
|
+
/* @__PURE__ */ jsx6(FloatingPreferencesButton, { ...floatingPreferencesButtonProps })
|
|
1146
|
+
))
|
|
1252
1147
|
]
|
|
1253
1148
|
}
|
|
1254
|
-
) }) }) }) }) })
|
|
1149
|
+
) }) }) }) }) });
|
|
1150
|
+
if (theme) {
|
|
1151
|
+
return /* @__PURE__ */ jsx6(ThemeProvider, { theme: mergedTheme, children: content });
|
|
1152
|
+
}
|
|
1153
|
+
return content;
|
|
1255
1154
|
}
|
|
1256
1155
|
function useConsentStateInternal() {
|
|
1257
|
-
const ctx =
|
|
1156
|
+
const ctx = React4.useContext(StateCtx);
|
|
1258
1157
|
if (!ctx) throw new Error("useConsentState must be used within ConsentProvider");
|
|
1259
1158
|
return ctx;
|
|
1260
1159
|
}
|
|
1261
1160
|
function useConsentActionsInternal() {
|
|
1262
|
-
const ctx =
|
|
1161
|
+
const ctx = React4.useContext(ActionsCtx);
|
|
1263
1162
|
if (!ctx) throw new Error("useConsentActions must be used within ConsentProvider");
|
|
1264
1163
|
return ctx;
|
|
1265
1164
|
}
|
|
1266
1165
|
function useConsentTextsInternal() {
|
|
1267
|
-
const ctx =
|
|
1166
|
+
const ctx = React4.useContext(TextsCtx);
|
|
1268
1167
|
return ctx;
|
|
1269
1168
|
}
|
|
1270
1169
|
function useConsentHydrationInternal() {
|
|
1271
|
-
return
|
|
1170
|
+
return React4.useContext(HydrationCtx);
|
|
1272
1171
|
}
|
|
1273
1172
|
var defaultTexts = DEFAULT_TEXTS;
|
|
1274
1173
|
|
|
@@ -1317,13 +1216,14 @@ function _unregisterGlobalOpenPreferences() {
|
|
|
1317
1216
|
}
|
|
1318
1217
|
|
|
1319
1218
|
// src/components/PreferencesModal.tsx
|
|
1320
|
-
import { jsx as
|
|
1219
|
+
import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1321
1220
|
function PreferencesModal2({
|
|
1322
1221
|
DialogProps: DialogProps2,
|
|
1323
1222
|
hideBranding = false
|
|
1324
1223
|
}) {
|
|
1325
1224
|
const { preferences, setPreferences, closePreferences, isModalOpen } = useConsent();
|
|
1326
1225
|
const texts = useConsentTexts();
|
|
1226
|
+
const designTokens = useDesignTokens();
|
|
1327
1227
|
const { toggleableCategories } = useCategories();
|
|
1328
1228
|
const [tempPreferences, setTempPreferences] = useState2(() => {
|
|
1329
1229
|
const initialPrefs = { necessary: true };
|
|
@@ -1350,14 +1250,28 @@ function PreferencesModal2({
|
|
|
1350
1250
|
closePreferences();
|
|
1351
1251
|
};
|
|
1352
1252
|
return /* @__PURE__ */ jsxs4(Dialog, { "aria-labelledby": "cookie-pref-title", open, onClose: handleCancel, ...DialogProps2, children: [
|
|
1353
|
-
/* @__PURE__ */
|
|
1354
|
-
|
|
1355
|
-
|
|
1253
|
+
/* @__PURE__ */ jsx7(
|
|
1254
|
+
DialogTitle,
|
|
1255
|
+
{
|
|
1256
|
+
id: "cookie-pref-title",
|
|
1257
|
+
sx: { fontSize: designTokens?.typography?.fontSize?.modal ?? void 0 },
|
|
1258
|
+
children: texts.modalTitle
|
|
1259
|
+
}
|
|
1260
|
+
),
|
|
1261
|
+
/* @__PURE__ */ jsxs4(DialogContent, { dividers: true, sx: { p: designTokens?.spacing?.padding?.modal ?? void 0 }, children: [
|
|
1262
|
+
/* @__PURE__ */ jsx7(
|
|
1263
|
+
Typography3,
|
|
1264
|
+
{
|
|
1265
|
+
variant: "body2",
|
|
1266
|
+
sx: { mb: 2, fontSize: designTokens?.typography?.fontSize?.modal ?? void 0 },
|
|
1267
|
+
children: texts.modalIntro
|
|
1268
|
+
}
|
|
1269
|
+
),
|
|
1356
1270
|
/* @__PURE__ */ jsxs4(FormGroup, { children: [
|
|
1357
|
-
toggleableCategories.map((category) => /* @__PURE__ */
|
|
1271
|
+
toggleableCategories.map((category) => /* @__PURE__ */ jsx7(
|
|
1358
1272
|
FormControlLabel,
|
|
1359
1273
|
{
|
|
1360
|
-
control: /* @__PURE__ */
|
|
1274
|
+
control: /* @__PURE__ */ jsx7(
|
|
1361
1275
|
Switch,
|
|
1362
1276
|
{
|
|
1363
1277
|
checked: tempPreferences[category.id] ?? false,
|
|
@@ -1371,14 +1285,14 @@ function PreferencesModal2({
|
|
|
1371
1285
|
},
|
|
1372
1286
|
category.id
|
|
1373
1287
|
)),
|
|
1374
|
-
/* @__PURE__ */
|
|
1288
|
+
/* @__PURE__ */ jsx7(FormControlLabel, { control: /* @__PURE__ */ jsx7(Switch, { checked: true, disabled: true }), label: texts.necessaryAlwaysOn })
|
|
1375
1289
|
] })
|
|
1376
1290
|
] }),
|
|
1377
1291
|
/* @__PURE__ */ jsxs4(DialogActions, { children: [
|
|
1378
|
-
/* @__PURE__ */
|
|
1379
|
-
/* @__PURE__ */
|
|
1292
|
+
/* @__PURE__ */ jsx7(Button2, { variant: "outlined", onClick: handleCancel, children: texts.close }),
|
|
1293
|
+
/* @__PURE__ */ jsx7(Button2, { variant: "contained", onClick: handleSave, children: texts.save })
|
|
1380
1294
|
] }),
|
|
1381
|
-
!hideBranding && /* @__PURE__ */
|
|
1295
|
+
!hideBranding && /* @__PURE__ */ jsx7(Branding, { variant: "modal" })
|
|
1382
1296
|
] });
|
|
1383
1297
|
}
|
|
1384
1298
|
|
|
@@ -1393,7 +1307,6 @@ export {
|
|
|
1393
1307
|
createProjectPreferences,
|
|
1394
1308
|
validateProjectPreferences,
|
|
1395
1309
|
getAllProjectCategories,
|
|
1396
|
-
defaultConsentTheme,
|
|
1397
1310
|
CookieBanner,
|
|
1398
1311
|
FloatingPreferencesButton,
|
|
1399
1312
|
ConsentProvider,
|