@redacto.io/consent-sdk-react 7.0.0 → 7.1.0

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.
Files changed (7) hide show
  1. package/.turbo/turbo-build.log +25 -24
  2. package/CHANGELOG.md +6 -0
  3. package/dist/index.js +228 -166
  4. package/dist/index.mjs +228 -166
  5. package/package.json +1 -1
  6. package/src/RedactoNoticeConsent/RedactoNoticeConsent.tsx +209 -155
  7. package/src/RedactoNoticeConsent/styles.ts +10 -1
package/dist/index.mjs CHANGED
@@ -683,7 +683,8 @@ var styles = {
683
683
  topSection: {
684
684
  display: "flex",
685
685
  justifyContent: "space-between",
686
- alignItems: "center",
686
+ alignItems: "flex-start",
687
+ gap: "10px",
687
688
  paddingBottom: "15px",
688
689
  borderBottom: "none",
689
690
  backgroundColor: "#ffffff",
@@ -695,6 +696,8 @@ var styles = {
695
696
  display: "flex",
696
697
  alignItems: "center",
697
698
  gap: "10px",
699
+ flex: "1 1 0",
700
+ minWidth: 0,
698
701
  margin: 0,
699
702
  padding: 0,
700
703
  boxSizing: "border-box"
@@ -702,7 +705,9 @@ var styles = {
702
705
  logo: {
703
706
  height: "32px",
704
707
  width: "auto",
708
+ maxWidth: "140px",
705
709
  objectFit: "contain",
710
+ flexShrink: 0,
706
711
  margin: 0,
707
712
  padding: 0,
708
713
  display: "block"
@@ -714,6 +719,10 @@ var styles = {
714
719
  letterSpacing: "0.2px",
715
720
  verticalAlign: "middle",
716
721
  color: "#101828",
722
+ flex: "1 1 auto",
723
+ minWidth: 0,
724
+ wordBreak: "normal",
725
+ overflowWrap: "anywhere",
717
726
  margin: 0,
718
727
  padding: 0,
719
728
  textAlign: "left"
@@ -2268,7 +2277,7 @@ var RedactoNoticeConsent = ({
2268
2277
  includeFullyConsentedData = false,
2269
2278
  reviewModeButtonText = "Continue"
2270
2279
  }) => {
2271
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
2280
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
2272
2281
  const propValidationError = useMemo(() => {
2273
2282
  if (!(noticeId == null ? void 0 : noticeId.trim())) {
2274
2283
  return "RedactoNoticeConsent: 'noticeId' prop is required and cannot be empty";
@@ -2415,6 +2424,15 @@ var RedactoNoticeConsent = ({
2415
2424
  height: isMobile ? "auto" : void 0,
2416
2425
  width: isMobile ? "auto" : void 0
2417
2426
  },
2427
+ topSection: {
2428
+ flexDirection: isMobile ? "column" : "row",
2429
+ alignItems: isMobile ? "stretch" : "flex-start",
2430
+ gap: isMobile ? "12px" : "10px"
2431
+ },
2432
+ logo: {
2433
+ maxWidth: isMobile ? "96px" : "140px",
2434
+ maxHeight: isMobile ? "28px" : "32px"
2435
+ },
2418
2436
  languageItem: {
2419
2437
  fontSize: isMobile ? "11px" : "12px",
2420
2438
  padding: isMobile ? "6px 10px" : "8px 12px"
@@ -4037,174 +4055,218 @@ var RedactoNoticeConsent = ({
4037
4055
  ]
4038
4056
  }
4039
4057
  ),
4040
- /* @__PURE__ */ jsxs("div", { style: { ...styles.topSection, ...sectionStyle }, children: [
4041
- /* @__PURE__ */ jsxs("div", { style: styles.topLeft, children: [
4042
- /* @__PURE__ */ jsx(
4043
- "img",
4044
- {
4045
- style: styles.logo,
4046
- src: (content == null ? void 0 : content.logo_url) || redacto_logo_default,
4047
- alt: "Redacto Logo"
4048
- }
4049
- ),
4050
- /* @__PURE__ */ jsx(
4051
- "h2",
4052
- {
4053
- id: "privacy-notice-title",
4054
- style: {
4055
- ...styles.title,
4056
- ...responsiveStyles.title,
4057
- ...componentHeadingStyle
4058
- },
4059
- children: getTranslatedText(
4060
- "notice_banner_heading",
4061
- (content == null ? void 0 : content.notice_banner_heading) || "Privacy Notice"
4062
- )
4063
- },
4064
- `privacy-notice-title-${selectedLanguage}`
4065
- )
4066
- ] }),
4067
- /* @__PURE__ */ jsxs("div", { style: styles.languageSelectorContainer, children: [
4068
- /* @__PURE__ */ jsxs(
4069
- "div",
4070
- {
4071
- style: {
4072
- display: "flex",
4073
- alignItems: "center",
4074
- gap: "8px"
4058
+ /* @__PURE__ */ jsx(
4059
+ "div",
4060
+ {
4061
+ style: {
4062
+ ...styles.topSection,
4063
+ ...responsiveStyles.topSection,
4064
+ ...sectionStyle
4065
+ },
4066
+ children: (() => {
4067
+ var _a2, _b2, _c2, _d2, _e2, _f2;
4068
+ const logoNode = /* @__PURE__ */ jsx(
4069
+ "img",
4070
+ {
4071
+ style: { ...styles.logo, ...responsiveStyles.logo },
4072
+ src: (content == null ? void 0 : content.logo_url) || redacto_logo_default,
4073
+ alt: "Redacto Logo"
4074
+ }
4075
+ );
4076
+ const titleNode = /* @__PURE__ */ jsx(
4077
+ "h2",
4078
+ {
4079
+ id: "privacy-notice-title",
4080
+ style: {
4081
+ ...styles.title,
4082
+ ...responsiveStyles.title,
4083
+ ...componentHeadingStyle
4084
+ },
4085
+ children: getTranslatedText(
4086
+ "notice_banner_heading",
4087
+ (content == null ? void 0 : content.notice_banner_heading) || "Privacy Notice"
4088
+ )
4075
4089
  },
4076
- children: [
4077
- isTTSAvailable && /* @__PURE__ */ jsx(
4078
- "button",
4079
- {
4080
- onClick: toggleAudio,
4081
- style: {
4082
- ...styles.topRight,
4083
- ...responsiveStyles.topRight,
4084
- ...languageSelectorStyle,
4085
- padding: "3px 9px",
4086
- display: "flex",
4087
- alignItems: "center",
4088
- justifyContent: "center"
4089
- },
4090
- "aria-label": isPlaying && !isPaused ? "Pause audio playback" : isPaused ? "Resume audio playback" : "Start audio playback",
4091
- title: isPlaying && !isPaused ? "Pause Talkback" : isPaused ? "Resume Talkback" : "Start Talkback",
4092
- children: isPlaying && !isPaused ? (
4093
- // Pause icon
4094
- /* @__PURE__ */ jsxs(
4095
- "svg",
4096
- {
4097
- xmlns: "http://www.w3.org/2000/svg",
4098
- width: "16",
4099
- height: "16",
4100
- viewBox: "0 0 24 24",
4101
- fill: "none",
4102
- stroke: ((_r = (_q = settings == null ? void 0 : settings.button) == null ? void 0 : _q.language) == null ? void 0 : _r.textColor) || "currentColor",
4103
- strokeWidth: "2",
4104
- strokeLinecap: "round",
4105
- strokeLinejoin: "round",
4106
- "aria-hidden": "true",
4107
- children: [
4108
- /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16" }),
4109
- /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16" })
4110
- ]
4111
- }
4112
- )
4113
- ) : (
4114
- // Play/Sound icon
4115
- /* @__PURE__ */ jsxs(
4116
- "svg",
4117
- {
4118
- xmlns: "http://www.w3.org/2000/svg",
4119
- width: "16",
4120
- height: "16",
4121
- viewBox: "0 0 24 24",
4122
- fill: "none",
4123
- stroke: ((_t = (_s = settings == null ? void 0 : settings.button) == null ? void 0 : _s.language) == null ? void 0 : _t.textColor) || "currentColor",
4124
- strokeWidth: "2",
4125
- strokeLinecap: "round",
4126
- strokeLinejoin: "round",
4127
- "aria-hidden": "true",
4128
- children: [
4129
- /* @__PURE__ */ jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
4130
- /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" })
4131
- ]
4132
- }
4133
- )
4134
- )
4135
- }
4136
- ),
4137
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
4138
- "button",
4139
- {
4140
- ref: firstFocusableRef,
4141
- style: {
4142
- ...styles.topRight,
4143
- ...responsiveStyles.topRight,
4144
- ...languageSelectorStyle
4090
+ `privacy-notice-title-${selectedLanguage}`
4091
+ );
4092
+ const controlsBlock = /* @__PURE__ */ jsxs("div", { style: styles.languageSelectorContainer, children: [
4093
+ /* @__PURE__ */ jsxs(
4094
+ "div",
4095
+ {
4096
+ style: {
4097
+ display: "flex",
4098
+ alignItems: "center",
4099
+ gap: "8px"
4100
+ },
4101
+ children: [
4102
+ isTTSAvailable && /* @__PURE__ */ jsx(
4103
+ "button",
4104
+ {
4105
+ onClick: toggleAudio,
4106
+ style: {
4107
+ ...styles.topRight,
4108
+ ...responsiveStyles.topRight,
4109
+ ...languageSelectorStyle,
4110
+ padding: "3px 9px",
4111
+ display: "flex",
4112
+ alignItems: "center",
4113
+ justifyContent: "center"
4114
+ },
4115
+ "aria-label": isPlaying && !isPaused ? "Pause audio playback" : isPaused ? "Resume audio playback" : "Start audio playback",
4116
+ title: isPlaying && !isPaused ? "Pause Talkback" : isPaused ? "Resume Talkback" : "Start Talkback",
4117
+ children: isPlaying && !isPaused ? (
4118
+ // Pause icon
4119
+ /* @__PURE__ */ jsxs(
4120
+ "svg",
4121
+ {
4122
+ xmlns: "http://www.w3.org/2000/svg",
4123
+ width: "16",
4124
+ height: "16",
4125
+ viewBox: "0 0 24 24",
4126
+ fill: "none",
4127
+ stroke: ((_b2 = (_a2 = settings == null ? void 0 : settings.button) == null ? void 0 : _a2.language) == null ? void 0 : _b2.textColor) || "currentColor",
4128
+ strokeWidth: "2",
4129
+ strokeLinecap: "round",
4130
+ strokeLinejoin: "round",
4131
+ "aria-hidden": "true",
4132
+ children: [
4133
+ /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16" }),
4134
+ /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16" })
4135
+ ]
4136
+ }
4137
+ )
4138
+ ) : (
4139
+ // Play/Sound icon
4140
+ /* @__PURE__ */ jsxs(
4141
+ "svg",
4142
+ {
4143
+ xmlns: "http://www.w3.org/2000/svg",
4144
+ width: "16",
4145
+ height: "16",
4146
+ viewBox: "0 0 24 24",
4147
+ fill: "none",
4148
+ stroke: ((_d2 = (_c2 = settings == null ? void 0 : settings.button) == null ? void 0 : _c2.language) == null ? void 0 : _d2.textColor) || "currentColor",
4149
+ strokeWidth: "2",
4150
+ strokeLinecap: "round",
4151
+ strokeLinejoin: "round",
4152
+ "aria-hidden": "true",
4153
+ children: [
4154
+ /* @__PURE__ */ jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
4155
+ /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" })
4156
+ ]
4157
+ }
4158
+ )
4159
+ )
4160
+ }
4161
+ ),
4162
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
4163
+ "button",
4164
+ {
4165
+ ref: firstFocusableRef,
4166
+ style: {
4167
+ ...styles.topRight,
4168
+ ...responsiveStyles.topRight,
4169
+ ...languageSelectorStyle
4170
+ },
4171
+ onClick: toggleLanguageDropdown,
4172
+ "aria-expanded": isLanguageDropdownOpen,
4173
+ "aria-haspopup": "listbox",
4174
+ "aria-controls": "language-listbox",
4175
+ "aria-label": `Select language. Current language: ${toNativeLabel(selectedLanguage)}`,
4176
+ children: [
4177
+ toNativeLabel(selectedLanguage),
4178
+ /* @__PURE__ */ jsx(
4179
+ "svg",
4180
+ {
4181
+ xmlns: "http://www.w3.org/2000/svg",
4182
+ width: "16",
4183
+ height: "16",
4184
+ viewBox: "0 0 16 16",
4185
+ fill: "none",
4186
+ stroke: ((_f2 = (_e2 = settings == null ? void 0 : settings.button) == null ? void 0 : _e2.language) == null ? void 0 : _f2.textColor) || "currentColor",
4187
+ strokeWidth: "2",
4188
+ strokeLinecap: "round",
4189
+ strokeLinejoin: "round",
4190
+ style: { flexShrink: 0, marginLeft: "4px" },
4191
+ "aria-hidden": "true",
4192
+ children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" })
4193
+ }
4194
+ )
4195
+ ]
4196
+ }
4197
+ ) })
4198
+ ]
4199
+ }
4200
+ ),
4201
+ isLanguageDropdownOpen && /* @__PURE__ */ jsx(
4202
+ "ul",
4203
+ {
4204
+ id: "language-listbox",
4205
+ style: {
4206
+ ...styles.languageDropdown,
4207
+ ...languageSelectorStyle
4208
+ },
4209
+ role: "listbox",
4210
+ "aria-label": "Select language",
4211
+ children: availableLanguages.map((lang) => /* @__PURE__ */ jsx(
4212
+ "li",
4213
+ {
4214
+ style: {
4215
+ ...styles.languageItem,
4216
+ ...responsiveStyles.languageItem,
4217
+ ...selectedLanguage === lang ? selectedLanguageItemStyle : languageSelectorStyle,
4218
+ listStyle: "none"
4219
+ },
4220
+ onClick: () => handleLanguageSelect(lang),
4221
+ role: "option",
4222
+ "aria-selected": selectedLanguage === lang,
4223
+ tabIndex: 0,
4224
+ "aria-label": `Select ${toNativeLabel(lang)} language`,
4225
+ children: toNativeLabel(lang)
4145
4226
  },
4146
- onClick: toggleLanguageDropdown,
4147
- "aria-expanded": isLanguageDropdownOpen,
4148
- "aria-haspopup": "listbox",
4149
- "aria-controls": "language-listbox",
4150
- "aria-label": `Select language. Current language: ${toNativeLabel(selectedLanguage)}`,
4151
- children: [
4152
- toNativeLabel(selectedLanguage),
4153
- /* @__PURE__ */ jsx(
4154
- "svg",
4155
- {
4156
- xmlns: "http://www.w3.org/2000/svg",
4157
- width: "16",
4158
- height: "16",
4159
- viewBox: "0 0 16 16",
4160
- fill: "none",
4161
- stroke: ((_v = (_u = settings == null ? void 0 : settings.button) == null ? void 0 : _u.language) == null ? void 0 : _v.textColor) || "currentColor",
4162
- strokeWidth: "2",
4163
- strokeLinecap: "round",
4164
- strokeLinejoin: "round",
4165
- style: { flexShrink: 0, marginLeft: "4px" },
4166
- "aria-hidden": "true",
4167
- children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" })
4168
- }
4169
- )
4170
- ]
4171
- }
4172
- ) })
4173
- ]
4174
- }
4175
- ),
4176
- isLanguageDropdownOpen && /* @__PURE__ */ jsx(
4177
- "ul",
4178
- {
4179
- id: "language-listbox",
4180
- style: {
4181
- ...styles.languageDropdown,
4182
- ...languageSelectorStyle
4183
- },
4184
- role: "listbox",
4185
- "aria-label": "Select language",
4186
- children: availableLanguages.map((lang) => /* @__PURE__ */ jsx(
4187
- "li",
4227
+ lang
4228
+ ))
4229
+ }
4230
+ )
4231
+ ] });
4232
+ return isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
4233
+ /* @__PURE__ */ jsxs(
4234
+ "div",
4188
4235
  {
4189
4236
  style: {
4190
- ...styles.languageItem,
4191
- ...responsiveStyles.languageItem,
4192
- ...selectedLanguage === lang ? selectedLanguageItemStyle : languageSelectorStyle,
4193
- listStyle: "none"
4237
+ display: "flex",
4238
+ alignItems: "center",
4239
+ gap: "10px",
4240
+ width: "100%"
4194
4241
  },
4195
- onClick: () => handleLanguageSelect(lang),
4196
- role: "option",
4197
- "aria-selected": selectedLanguage === lang,
4198
- tabIndex: 0,
4199
- "aria-label": `Select ${toNativeLabel(lang)} language`,
4200
- children: toNativeLabel(lang)
4201
- },
4202
- lang
4203
- ))
4204
- }
4205
- )
4206
- ] })
4207
- ] }),
4242
+ children: [
4243
+ logoNode,
4244
+ /* @__PURE__ */ jsx(
4245
+ "div",
4246
+ {
4247
+ style: {
4248
+ marginLeft: "auto",
4249
+ display: "flex",
4250
+ alignItems: "center",
4251
+ flexShrink: 0
4252
+ },
4253
+ children: controlsBlock
4254
+ }
4255
+ )
4256
+ ]
4257
+ }
4258
+ ),
4259
+ titleNode
4260
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
4261
+ /* @__PURE__ */ jsxs("div", { style: styles.topLeft, children: [
4262
+ logoNode,
4263
+ titleNode
4264
+ ] }),
4265
+ controlsBlock
4266
+ ] });
4267
+ })()
4268
+ }
4269
+ ),
4208
4270
  /* @__PURE__ */ jsxs(
4209
4271
  "div",
4210
4272
  {
@@ -4324,7 +4386,7 @@ var RedactoNoticeConsent = ({
4324
4386
  ))
4325
4387
  ] }) : (
4326
4388
  /* Regular consent UI */
4327
- /* @__PURE__ */ jsx("div", { style: styles.optionsContainer, children: (_w = content == null ? void 0 : content.purposes) == null ? void 0 : _w.map((purpose) => /* @__PURE__ */ jsx(
4389
+ /* @__PURE__ */ jsx("div", { style: styles.optionsContainer, children: (_q = content == null ? void 0 : content.purposes) == null ? void 0 : _q.map((purpose) => /* @__PURE__ */ jsx(
4328
4390
  PurposeItem,
4329
4391
  {
4330
4392
  purpose,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redacto.io/consent-sdk-react",
3
- "version": "7.0.0",
3
+ "version": "7.1.0",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",