react-feedback-surveys 1.6.0 → 1.7.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 (5) hide show
  1. package/README.md +53 -5
  2. package/dist/index.css +2 -1
  3. package/dist/index.d.ts +43 -4
  4. package/dist/index.js +3735 -1000
  5. package/package.json +25 -23
package/README.md CHANGED
@@ -51,6 +51,7 @@
51
51
  - **Multiple scale styles** – emoji, stars, numbers, thumbs
52
52
  - **Flexible placement** – embed inline or display as popup overlay
53
53
  - **Follow-up feedback** – optional text input or multiple choice responses
54
+ - **Optional email collection** – close the loop by capturing a respondent's email when no user identity is known
54
55
  - **Fully customizable** – CSS variables and custom class names
55
56
  - **Zero dependencies**
56
57
  - **TypeScript support**
@@ -101,7 +102,8 @@ import 'react-feedback-surveys/index.css';
101
102
  maxLabel="Very satisfied"
102
103
  responseType="text"
103
104
  textQuestion="We'd love to hear your thoughts — what can we improve?"
104
- textButtonLabel="Send"
105
+ textButtonSendLabel="Send"
106
+ textButtonSkipLabel="Skip"
105
107
  thankYouMessage="Thanks for your feedback!"
106
108
  onScoreSubmit={({ value }) => {/* ... */}}
107
109
  onFeedbackSubmit={({ value, text }) => {/* ... */}}
@@ -130,7 +132,8 @@ import 'react-feedback-surveys/index.css';
130
132
  question="Are you satisfied with the result?"
131
133
  responseType="text"
132
134
  textQuestion="We'd love to hear your thoughts — what can we improve?"
133
- textButtonLabel="Send"
135
+ textButtonSendLabel="Send"
136
+ textButtonSkipLabel="Skip"
134
137
  thankYouMessage="Thank you for your feedback!"
135
138
  onScoreSubmit={({ value }) => {/* ... */}}
136
139
  onFeedbackSubmit={({ value, text }) => {/* ... */}}
@@ -163,7 +166,8 @@ import 'react-feedback-surveys/index.css';
163
166
  maxLabel="Very likely"
164
167
  responseType="text"
165
168
  textQuestion="We'd love to hear your thoughts — what can we improve?"
166
- textButtonLabel="Send"
169
+ textButtonSendLabel="Send"
170
+ textButtonSkipLabel="Skip"
167
171
  thankYouMessage="Thank you for your feedback!"
168
172
  onScoreSubmit={({ value }) => {/* ... */}}
169
173
  onFeedbackSubmit={({ value, text }) => {/* ... */}}
@@ -194,7 +198,8 @@ import 'react-feedback-surveys/index.css';
194
198
  maxLabel="Very easy"
195
199
  responseType="text"
196
200
  textQuestion="We'd love to hear your thoughts — what can we improve?"
197
- textButtonLabel="Send"
201
+ textButtonSendLabel="Send"
202
+ textButtonSkipLabel="Skip"
198
203
  thankYouMessage="Thank you for your feedback!"
199
204
  onScoreSubmit={({ value }) => {/* ... */}}
200
205
  onFeedbackSubmit={({ value, text }) => {/* ... */}}
@@ -296,9 +301,16 @@ Most props are shared across all survey widgets. Each widget differs only in its
296
301
  | `maxLabel` | `string` | - | Right label for the scale. |
297
302
  | `responseType` | `null \| 'text' \| 'choices'` | - | Enables optional follow-up feedback. |
298
303
  | `textQuestion` | `string` | - | Follow-up question displayed when `responseType` is defined. |
299
- | `textButtonLabel` | `string` | - | Submit label for the feedback screen. |
304
+ | `textButtonSendLabel` | `string` | - | Submit label for the feedback screen. |
305
+ | `textButtonSkipLabel` | `string` | - | Skip label for the feedback screen. |
300
306
  | `choiceOptions` | `string[] \| null` | - | Predefined choices (when `responseType === 'choices'`). |
301
307
  | `thankYouMessage` | `string` | required | Message shown after submission. |
308
+ | `collectContact` | `boolean` | - | Enables an optional email collection step before the success screen. |
309
+ | `userId` | `string` | - | Existing user identity. When provided, the email collection step is skipped. |
310
+ | `contactQuestion` | `string` | - | Question shown on the email collection screen. |
311
+ | `contactSubtext` | `string` | - | Descriptive text shown above the email input. |
312
+ | `contactButtonSendLabel` | `string` | - | Submit label for the email collection screen. |
313
+ | `contactButtonSkipLabel` | `string` | - | Skip label for the email collection screen. |
302
314
 
303
315
  #### ClassNamesConfig Type
304
316
 
@@ -311,6 +323,7 @@ interface ClassNamesConfig {
311
323
  body?: string; // Main content region (rating scale, feedback form or success)
312
324
  rating?: string; // Additional class applied when rating screen is active
313
325
  feedback?: string; // Additional class applied when feedback screen is active
326
+ contact?: string; // Additional class applied when email collection screen is active
314
327
  success?: string; // Additional class applied when success screen is active
315
328
  close?: string; // Close button
316
329
  };
@@ -331,12 +344,14 @@ interface ClassNamesConfig {
331
344
  |--------------------|---------------------------------------------------|----------|-------------------------------------------------------------------------------------------------------------|
332
345
  | `onScoreSubmit` | `(payload: ScorePayload) => void \| Promise<void>` | - | Fires immediately when a score is selected, before any follow-up feedback screen. Captures the raw rating. |
333
346
  | `onFeedbackSubmit` | `(payload: FeedbackPayload) => void \| Promise<void>` | - | Fires when feedback is submitted. Includes the selected score and the user's text(s). |
347
+ | `onContactSubmit` | `(payload: ContactPayload) => void \| Promise<void>` | - | Fires when the respondent submits an email on the optional email collection screen. Not called when the step is skipped or not shown. |
334
348
 
335
349
  **Event Payload Types:**
336
350
 
337
351
  ```typescript
338
352
  type ScorePayload = { value: number };
339
353
  type FeedbackPayload = { value: number; text?: string | string[] };
354
+ type ContactPayload = { value?: number; text?: string | string[]; email: string };
340
355
  ```
341
356
 
342
357
  > **Event behavior**
@@ -357,6 +372,8 @@ The actual `value` returned depends on the survey type:
357
372
  Invoked when the user completes the follow-up step and submits their feedback (only applies when `responseType` is `text` or `choices`).
358
373
  This callback provides both the original score and the user's input.
359
374
 
375
+ The feedback step is always optional: respondents can submit feedback or skip it via the `textButtonSkipLabel` button (or by submitting with empty input), and either action advances to the next screen. `onFeedbackSubmit` only fires when feedback text or choices are actually submitted; it is **not** called when the step is skipped.
376
+
360
377
  **Arguments:**
361
378
  - `value: number` — the same score previously passed to `onScoreSubmit`
362
379
  - `text: string | string[]` — depends on `responseType`:
@@ -368,6 +385,36 @@ You should listen to **both** `onScoreSubmit` and `onFeedbackSubmit`.
368
385
  A user may select a score but abandon the follow-up screen (close the widget, navigate away, refresh, etc.).
369
386
  Handling both events ensures you capture at least the rating even when additional feedback is not provided — and still receive extended data when it is.
370
387
 
388
+ #### `onContactSubmit`
389
+
390
+ When `collectContact` is `true` and no `userId` is provided, an optional email collection screen is shown after the rating/feedback screens and before the success screen. This lets you "close the feedback loop" by capturing an email for a respondent whose identity isn't already known to the host app.
391
+
392
+ - If `userId` is provided, the step is skipped entirely — the widget assumes identity is already known.
393
+ - The step is always optional: respondents can submit an email or skip it, and either action advances to the success screen.
394
+ - `onContactSubmit` only fires when the respondent actually submits an email; it is **not** called when the step is skipped or not shown.
395
+
396
+ **Arguments:**
397
+ - `value?: number` — the selected rating, if any.
398
+ - `text?: string | string[]` — the submitted feedback text or choices, if any.
399
+ - `email: string` — the email address entered by the respondent.
400
+
401
+ ```tsx
402
+ <CSAT5Survey
403
+ scaleStyle="numbers"
404
+ question="How would you rate your satisfaction with our product?"
405
+ responseType="text"
406
+ textQuestion="We'd love to hear your thoughts — what can we improve?"
407
+ thankYouMessage="Thanks for your feedback!"
408
+ collectContact
409
+ userId={currentUser?.id}
410
+ contactQuestion="Mind sharing your email so we can follow up?"
411
+ contactButtonSendLabel="Submit"
412
+ contactButtonSkipLabel="Skip"
413
+ onScoreSubmit={({ value }) => {/* ... */}}
414
+ onFeedbackSubmit={({ value, text }) => {/* ... */}}
415
+ onContactSubmit={({ value, text, email }) => {/* attribute the feedback to this email */}}
416
+ />
417
+ ```
371
418
 
372
419
  ### Scale Style Options
373
420
 
@@ -580,6 +627,7 @@ Reference: available keys
580
627
  | `base.body` | Main content region (rating scale, feedback form or success) |
581
628
  | `base.rating` | Additional class applied when rating screen is active |
582
629
  | `base.feedback` | Additional class applied when feedback screen is active |
630
+ | `base.contact` | Additional class applied when email collection screen is active |
583
631
  | `base.success` | Additional class applied when success screen is active |
584
632
  | `base.close` | Close button |
585
633
  | `scale.base` | Container around the scale style |
package/dist/index.css CHANGED
@@ -1 +1,2 @@
1
- :root,:host{--_color-text: var(--ft-color-text, 30 8% 14%);--_color-bg: var(--ft-color-bg, 0 0% 100%);--_color-muted: var(--ft-color-muted, 222 11% 46%);--_color-error: var(--ft-color-error, 32 95% 44%);--_color-border: var(--ft-color-border, 214 14% 83%);--_color-outline: var(--ft-color-outline, 218 14% 65%);--_color-shadow: var(--ft-color-shadow, 0 0% 0%);--_color-control: var(--ft-color-control, 214 20% 96%);--_popup-z-index: var(--ft-popup-z-index, 49);--_popup-head-offset: var(--ft-popup-head-offset, 0);--_surface-padding: var(--ft-surface-padding, 24px);--_surface-padding-mobile: var(--ft-surface-padding-mobile, 20px);--_surface-radius: var(--ft-surface-radius, 8px)}._base_d3jtv_1{position:relative;display:inline-block;padding:var(--_surface-padding);overflow:auto;background-color:hsl(var(--_color-bg)/100%);border-radius:var(--_surface-radius);box-shadow:0 0 10px hsl(var(--_color-shadow)/20%)}@media(max-width:399px){._base_d3jtv_1{padding:var(--_surface-padding-mobile)}}._base_1vr2h_1{--_popup-head-offset: 32px;position:fixed;z-index:var(--_popup-z-index);margin:0;display:flex;box-sizing:border-box;max-width:calc(100vw - var(--_surface-padding) * 2);max-height:calc(100vh - var(--_surface-padding) * 2);transform-origin:50% 100%}@media(max-width:399px){._base_1vr2h_1{max-width:calc(100vw - var(--_surface-padding-mobile) * 2);max-height:calc(100vh - var(--_surface-padding-mobile) * 2)}}._animated_1vr2h_19{opacity:0;animation:_fadeForward_1vr2h_1 .12s ease-in-out forwards}@keyframes _fadeForward_1vr2h_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_1vr2h_34{top:var(--_surface-padding);left:var(--_surface-padding)}@media(max-width:399px){._topLeft_1vr2h_34{top:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._topRight_1vr2h_45{top:var(--_surface-padding);right:var(--_surface-padding)}@media(max-width:399px){._topRight_1vr2h_45{top:var(--_surface-padding-mobile);right:var(--_surface-padding-mobile)}}._bottomRight_1vr2h_56{right:var(--_surface-padding);bottom:var(--_surface-padding)}@media(max-width:399px){._bottomRight_1vr2h_56{right:var(--_surface-padding-mobile);bottom:var(--_surface-padding-mobile)}}._bottomLeft_1vr2h_67{bottom:var(--_surface-padding);left:var(--_surface-padding)}@media(max-width:399px){._bottomLeft_1vr2h_67{bottom:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._close_1vr2h_78{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_1vr2h_78:disabled{cursor:default}._close_1vr2h_78{position:absolute;top:var(--_surface-padding);width:24px;height:24px;color:hsl(var(--_color-outline)/100%);transition:color .15s;inset-inline-end:var(--_surface-padding)}._close_1vr2h_78:hover{color:hsl(var(--_color-text)/100%)}._close_1vr2h_78:before,._close_1vr2h_78:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_1vr2h_78:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_1vr2h_78:after{margin:-8px 0 0 -1px;width:2px;height:16px}@media(max-width:399px){._close_1vr2h_78{top:var(--_surface-padding-mobile);inset-inline-end:var(--_surface-padding-mobile)}}._choices_174z3_1{margin:0 0 12px}._choice_174z3_1{display:flex}._choice_174z3_1+._choice_174z3_1{margin-top:12px}._label_174z3_12{position:relative;display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._sr_174z3_21{position:absolute;margin:-1px;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;border-width:0;clip-path:inset(50%)}._checkbox_174z3_33{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._check_174z3_33{height:20px;min-width:20px;border:1px solid hsl(var(--_color-border)/100%);border-radius:4px}._label_174z3_12:hover ._check_174z3_33{border-color:hsl(var(--_color-text)/100%)}._checkbox_174z3_33:checked+._check_174z3_33{position:relative;background-color:hsl(var(--_color-text)/100%);border-color:hsl(var(--_color-text)/100%)}._checkbox_174z3_33:checked+._check_174z3_33:after{position:absolute;top:50%;left:50%;width:10px;height:7px;content:"";border:2px solid;border-color:transparent transparent hsl(var(--_color-bg)/100%) hsl(var(--_color-bg)/100%);transform:translate(-45%,-75%) rotate(-45deg);pointer-events:none}._input_174z3_70{margin-top:8px;height:32px}._textarea_174z3_75{height:192px}._input_174z3_70,._textarea_174z3_75{width:100%;padding:8px 12px;box-sizing:border-box;font-size:16px;line-height:1.5;background-color:hsl(var(--_color-bg)/100%);border:1px solid hsl(var(--_color-border)/100%);border-radius:var(--_surface-radius);outline:0 solid hsl(var(--_color-outline)/14%);resize:none;transition:background-color .15s,border-color .15s,outline-width .2s}._input_174z3_70:focus,._textarea_174z3_75:focus{outline:4px solid hsl(var(--_color-outline)/14%)}._input_174z3_70._invalid_174z3_97,._textarea_174z3_75._invalid_174z3_97{border-color:hsl(var(--_color-error)/100%)}._submit_174z3_102{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._submit_174z3_102:disabled{cursor:default}._submit_174z3_102{padding:8px 32px;font-size:16px;font-weight:400;text-align:center;color:hsl(var(--_color-bg)/100%);background-color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);transition:opacity .2s}._submit_174z3_102:hover{opacity:.85}._submit_174z3_102{margin-top:16px;width:100%}._success_174z3_134{padding:16px 0 32px;font-size:16px;font-weight:600;line-height:1.5;text-align:center}._base_1ilpx_1{padding:0 24px;text-align:center}._icon_1ilpx_6{display:inline-block}._base_1xpqq_1{padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif;color:hsl(var(--_color-text)/100%)}._head_1xpqq_7{display:flex;gap:8px;padding-block:0 20px;padding-inline:0 var(--_popup-head-offset)}._title_1xpqq_14{flex:1 0;font-family:inherit;font-size:16px;font-weight:500;font-style:normal;line-height:1.4}._base_1e603_1{margin:12px 0 0;display:flex}._label_1e603_6{flex:0 0 50%;max-width:50%;font-size:14px;line-height:1.4286;color:hsl(var(--_color-muted)/100%)}._between_1e603_14{justify-content:space-between}._between_1e603_14 ._label_1e603_6{flex:0 0 50%;max-width:50%}._between_1e603_14 ._label_1e603_6:first-child{text-align:start}._between_1e603_14 ._label_1e603_6:last-child{text-align:end}._center_1e603_28 ._label_1e603_6{flex:0 0 50%;max-width:50%}._center_1e603_28 ._label_1e603_6:first-child{padding-right:8px;text-align:end}._center_1e603_28 ._label_1e603_6:last-child{padding-left:8px;text-align:start}._center_1e603_28 ._text_1e603_40{display:inline-block;min-width:56px;text-align:center}@media(max-width:599px){._center_1e603_28 ._text_1e603_40{min-width:48px}}._list_grany_1{display:flex;justify-content:center;gap:16px}._icon_grany_7{transition:transform .12s ease;transform:scale(1)}._button_grany_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_grany_12:disabled{cursor:default}._button_grany_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--_color-control)/100%);border-radius:50%}._button_grany_12:hover ._icon_grany_7{transform:scale(1.15)}._button_grany_12:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}@media(max-width:399px){._button_grany_12{width:48px;height:48px}}._list_1yzyr_1{display:flex;justify-content:center;gap:16px}._icon_1yzyr_7{transition:transform .12s ease;transform:scale(1)}._button_1yzyr_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1yzyr_12:disabled{cursor:default}._button_1yzyr_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--_color-control)/100%);border-radius:50%}._button_1yzyr_12:hover ._icon_1yzyr_7{transform:scale(1.15)}._button_1yzyr_12:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._base_113r0_1{max-width:100%}._rating_113r0_5,._feedback_113r0_6,._success_113r0_7{width:280px}@media(max-width:399px){._rating_113r0_5,._feedback_113r0_6,._success_113r0_7{width:100%}}._list_1vfe4_1{display:flex;justify-content:space-between}._icon_1vfe4_6{transition:transform .12s ease;transform:scale(1)}._button_1vfe4_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1vfe4_11:disabled{cursor:default}._button_1vfe4_11{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--_color-control)/100%);border-radius:50%}._button_1vfe4_11:hover ._icon_1vfe4_6{transform:scale(1.15)}._button_1vfe4_11:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}@media(max-width:399px){._button_1vfe4_11{width:48px;height:48px}}._list_16sag_1{display:flex;justify-content:space-between}._button_16sag_6{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_16sag_6:disabled{cursor:default}._button_16sag_6{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:18px;font-weight:700;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--_color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_16sag_6:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}._button_16sag_6:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._list_1kpxu_1{display:flex;justify-content:space-between}._icon_1kpxu_6{transition:transform .12s ease;transform:scale(1)}._button_1kpxu_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1kpxu_11:disabled{cursor:default}._button_1kpxu_11{display:flex;align-items:center;justify-content:center;width:40px;height:40px}._button_1kpxu_11:hover ._icon_1kpxu_6{transform:scale(1.1)}._button_1kpxu_11:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._base_m4qio_1{max-width:100%}._rating_m4qio_5,._feedback_m4qio_6,._success_m4qio_7{width:320px}@media(max-width:399px){._rating_m4qio_5,._feedback_m4qio_6,._success_m4qio_7{width:100%}}._list_whbas_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:599px){._list_whbas_1{flex-direction:column-reverse;gap:4px}}._button_whbas_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_whbas_13:disabled{cursor:default}._button_whbas_13{display:inline-block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--_color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_whbas_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media(max-width:599px){._button_whbas_13:hover{box-shadow:none}}._button_whbas_13:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._button_whbas_13 ._score_whbas_52{display:inline}._button_whbas_13 ._label_whbas_55{display:none}@media(max-width:599px){._button_whbas_13 ._label_whbas_55{display:inline}}@media(max-width:599px){._button_whbas_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:599px){._labels_whbas_75{display:none}}._base_12no3_1{max-width:100%}._rating_12no3_5{width:340px}@media(max-width:599px){._rating_12no3_5{width:280px}}@media(max-width:399px){._rating_12no3_5{width:100%}}._feedback_12no3_19,._success_12no3_20{width:280px}@media(max-width:599px){._feedback_12no3_19,._success_12no3_20{width:100%}}._list_divjm_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:599px){._list_divjm_1{flex-direction:column-reverse;gap:4px}}._button_divjm_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_divjm_13:disabled{cursor:default}._button_divjm_13{display:block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--_color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_divjm_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media(max-width:599px){._button_divjm_13:hover{box-shadow:none}}._button_divjm_13:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._button_divjm_13 ._score_divjm_52{display:inline}._button_divjm_13 ._label_divjm_55{display:none}@media(max-width:599px){._button_divjm_13 ._label_divjm_55{display:inline}}@media(max-width:599px){._button_divjm_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:599px){._labels_divjm_75{display:none}}._base_1invl_1{max-width:100%}._rating_1invl_5{width:520px}@media(max-width:599px){._rating_1invl_5{width:320px}}@media(max-width:399px){._rating_1invl_5{width:100%}}._feedback_1invl_19,._success_1invl_20{width:280px}@media(max-width:599px){._feedback_1invl_19,._success_1invl_20{width:100%}}
1
+ :root,:host{--_color-text:var(--ft-color-text,30 8% 14%);--_color-bg:var(--ft-color-bg,0 0% 100%);--_color-muted:var(--ft-color-muted,222 11% 46%);--_color-error:var(--ft-color-error,32 95% 44%);--_color-border:var(--ft-color-border,214 14% 83%);--_color-outline:var(--ft-color-outline,218 14% 65%);--_color-shadow:var(--ft-color-shadow,0 0% 0%);--_color-control:var(--ft-color-control,214 20% 96%);--_popup-z-index:var(--ft-popup-z-index,49);--_popup-head-offset:var(--ft-popup-head-offset,0);--_surface-padding:var(--ft-surface-padding,24px);--_surface-padding-mobile:var(--ft-surface-padding-mobile,20px);--_surface-radius:var(--ft-surface-radius,8px)}._base_d5qlz_1{padding:var(--_surface-padding);background-color:hsl(var(--_color-bg)/100%);border-radius:var(--_surface-radius);box-shadow:0 0 10px hsl(var(--_color-shadow)/20%);display:block;position:relative;overflow:auto}@media (width<=399px){._base_d5qlz_1{padding:var(--_surface-padding-mobile)}}._base_1vr2h_1{--_popup-head-offset:32px;z-index:var(--_popup-z-index);box-sizing:border-box;max-width:calc(100vw - var(--_surface-padding) * 2);max-height:calc(100vh - var(--_surface-padding) * 2);transform-origin:50% 100%;margin:0;display:flex;position:fixed}@media (width<=399px){._base_1vr2h_1{max-width:calc(100vw - var(--_surface-padding-mobile) * 2);max-height:calc(100vh - var(--_surface-padding-mobile) * 2)}}._animated_1vr2h_19{opacity:0;animation:.12s ease-in-out forwards _fadeForward_1vr2h_1}@keyframes _fadeForward_1vr2h_1{0%{opacity:0;transform:translateY(8px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}._topLeft_1vr2h_34{top:var(--_surface-padding);left:var(--_surface-padding)}@media (width<=399px){._topLeft_1vr2h_34{top:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._topRight_1vr2h_45{top:var(--_surface-padding);right:var(--_surface-padding)}@media (width<=399px){._topRight_1vr2h_45{top:var(--_surface-padding-mobile);right:var(--_surface-padding-mobile)}}._bottomRight_1vr2h_56{right:var(--_surface-padding);bottom:var(--_surface-padding)}@media (width<=399px){._bottomRight_1vr2h_56{right:var(--_surface-padding-mobile);bottom:var(--_surface-padding-mobile)}}._bottomLeft_1vr2h_67{bottom:var(--_surface-padding);left:var(--_surface-padding)}@media (width<=399px){._bottomLeft_1vr2h_67{bottom:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._close_1vr2h_78{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._close_1vr2h_78:disabled{cursor:default}._close_1vr2h_78{top:var(--_surface-padding);width:24px;height:24px;color:hsl(var(--_color-outline)/100%);transition:color .15s;position:absolute;inset-inline-end:var(--_surface-padding)}._close_1vr2h_78:hover{color:hsl(var(--_color-text)/100%)}._close_1vr2h_78:before,._close_1vr2h_78:after{content:"";background-color:currentColor;border-radius:1px;position:absolute;top:50%;left:50%;transform:rotate(45deg)}._close_1vr2h_78:before{width:16px;height:2px;margin:-1px 0 0 -8px}._close_1vr2h_78:after{width:2px;height:16px;margin:-8px 0 0 -1px}@media (width<=399px){._close_1vr2h_78{top:var(--_surface-padding-mobile);inset-inline-end:var(--_surface-padding-mobile)}}._sr_clg7k_1{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._subtext_clg7k_13{margin:0 0 16px;line-height:1.25}._input_clg7k_18{box-sizing:border-box;width:100%;color:hsl(var(--_color-text)/100%);background-color:hsl(var(--_color-bg)/100%);border:1px solid hsl(var(--_color-border)/100%);border-radius:var(--_surface-radius);outline:0 solid hsl(var(--_color-outline)/14%);padding:4px 12px;font-family:inherit;font-size:16px;line-height:1.5;transition:background-color .15s,border-color .15s,outline-width .2s}._input_clg7k_18:focus{outline:4px solid hsl(var(--_color-outline)/14%)}._input_clg7k_18._invalid_clg7k_35{border-color:hsl(var(--_color-error)/100%)}._input_clg7k_18._invalid_clg7k_35:focus{outline-color:hsl(var(--_color-error)/14%)}._submit_clg7k_42{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._submit_clg7k_42:disabled{cursor:default}._submit_clg7k_42{text-align:center;color:hsl(var(--_color-bg)/100%);background-color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);padding:8px 32px;font-size:16px;font-weight:400;transition:opacity .2s}._submit_clg7k_42:hover{opacity:.85}._submit_clg7k_42{width:100%;margin-top:16px}._skip_clg7k_74{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._skip_clg7k_74:disabled{cursor:default}._skip_clg7k_74{text-align:center;width:100%;color:hsl(var(--_color-muted)/100%);cursor:pointer;margin-top:8px;padding:4px;font-size:16px;font-weight:500;line-height:1.5;display:block}._skip_clg7k_74:hover{color:hsl(var(--_color-text)/100%)}._choices_nhux3_1{margin:0 0 12px}._choice_nhux3_1{display:flex}._choice_nhux3_1+._choice_nhux3_1{margin-top:12px}._label_nhux3_12{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:flex-start;gap:8px;display:inline-flex;position:relative}._sr_nhux3_21{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._checkbox_nhux3_33{white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}._check_nhux3_33{border:1px solid hsl(var(--_color-border)/100%);border-radius:4px;min-width:20px;height:20px}._label_nhux3_12:hover ._check_nhux3_33{border-color:hsl(var(--_color-text)/100%)}._checkbox_nhux3_33:focus-visible+._check_nhux3_33{outline:4px solid hsl(var(--_color-outline)/14%)}._checkbox_nhux3_33:checked+._check_nhux3_33{background-color:hsl(var(--_color-text)/100%);border-color:hsl(var(--_color-text)/100%);position:relative}._checkbox_nhux3_33:checked+._check_nhux3_33:after{content:"";border:2px solid;border-color:transparent transparent hsl(var(--_color-bg)/100%) hsl(var(--_color-bg)/100%);pointer-events:none;width:10px;height:4px;position:absolute;top:50%;left:50%;transform:translate(-45%,-75%)rotate(-45deg)}._input_nhux3_74{margin-top:8px;padding:4px 12px}._textarea_nhux3_79{height:120px;padding:8px 12px}._input_nhux3_74,._textarea_nhux3_79{box-sizing:border-box;width:100%;color:hsl(var(--_color-text)/100%);background-color:hsl(var(--_color-bg)/100%);border:1px solid hsl(var(--_color-border)/100%);border-radius:var(--_surface-radius);outline:0 solid hsl(var(--_color-outline)/14%);resize:none;font-family:inherit;font-size:16px;line-height:1.5;transition:background-color .15s,border-color .15s,outline-width .2s}._input_nhux3_74:focus,._textarea_nhux3_79:focus{outline:4px solid hsl(var(--_color-outline)/14%)}._submit_nhux3_104{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._submit_nhux3_104:disabled{cursor:default}._submit_nhux3_104{text-align:center;color:hsl(var(--_color-bg)/100%);background-color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);padding:8px 32px;font-size:16px;font-weight:400;transition:opacity .2s}._submit_nhux3_104:hover{opacity:.85}._submit_nhux3_104{width:100%;margin-top:16px}._skip_nhux3_136{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._skip_nhux3_136:disabled{cursor:default}._skip_nhux3_136{text-align:center;width:100%;color:hsl(var(--_color-muted)/100%);cursor:pointer;margin-top:8px;padding:4px;font-size:16px;font-weight:500;line-height:1.5;display:block}._skip_nhux3_136:hover{color:hsl(var(--_color-text)/100%)}._success_nhux3_166{text-align:center;padding:16px 0 32px;font-size:16px;font-weight:600;line-height:1.5}._base_1ilpx_1{text-align:center;padding:0 24px}._icon_1ilpx_6{display:inline-block}._base_1xpqq_1{color:hsl(var(--_color-text)/100%);padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif}._head_1xpqq_7{padding-block:0 20px;padding-inline:0 var(--_popup-head-offset);gap:8px;display:flex}._title_1xpqq_14{flex:1 0;font-family:inherit;font-size:16px;font-style:normal;font-weight:500;line-height:1.4}._base_nswpf_1{margin:12px 0 0;display:flex}._label_nswpf_6{box-sizing:border-box;max-width:50%;color:hsl(var(--_color-muted)/100%);flex:0 0 50%;font-size:14px;line-height:1.4286}._between_nswpf_15{justify-content:space-between}._between_nswpf_15 ._label_nswpf_6{flex:0 0 50%;max-width:50%}._between_nswpf_15 ._label_nswpf_6:first-child{text-align:start}._between_nswpf_15 ._label_nswpf_6:last-child{text-align:end}._center_nswpf_29 ._label_nswpf_6{flex:0 0 50%;max-width:50%}._center_nswpf_29 ._label_nswpf_6:first-child{text-align:end;padding-right:8px}._center_nswpf_29 ._label_nswpf_6:last-child{text-align:start;padding-left:8px}._center_nswpf_29 ._text_nswpf_41{text-align:center;min-width:56px;display:inline-block}@media (width<=599px){._center_nswpf_29 ._text_nswpf_41{min-width:48px}}._list_grany_1{justify-content:center;gap:16px;display:flex}._icon_grany_7{transition:transform .12s;transform:scale(1)}._button_grany_12{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_grany_12:disabled{cursor:default}._button_grany_12{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_grany_12:hover ._icon_grany_7{transform:scale(1.15)}._button_grany_12:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}@media (width<=399px){._button_grany_12{width:48px;height:48px}}._list_1yzyr_1{justify-content:center;gap:16px;display:flex}._icon_1yzyr_7{transition:transform .12s;transform:scale(1)}._button_1yzyr_12{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1yzyr_12:disabled{cursor:default}._button_1yzyr_12{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_1yzyr_12:hover ._icon_1yzyr_7{transform:scale(1.15)}._button_1yzyr_12:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._base_1nccq_1{max-width:100%}._rating_1nccq_5,._feedback_1nccq_6,._contact_1nccq_7,._success_1nccq_8{width:280px}@media (width<=399px){._rating_1nccq_5,._feedback_1nccq_6,._contact_1nccq_7,._success_1nccq_8{width:100%}}._list_1vfe4_1{justify-content:space-between;display:flex}._icon_1vfe4_6{transition:transform .12s;transform:scale(1)}._button_1vfe4_11{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1vfe4_11:disabled{cursor:default}._button_1vfe4_11{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_1vfe4_11:hover ._icon_1vfe4_6{transform:scale(1.15)}._button_1vfe4_11:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}@media (width<=399px){._button_1vfe4_11{width:48px;height:48px}}._list_16sag_1{justify-content:space-between;display:flex}._button_16sag_6{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_16sag_6:disabled{cursor:default}._button_16sag_6{width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:flex}._button_16sag_6:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}._button_16sag_6:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._list_1kpxu_1{justify-content:space-between;display:flex}._icon_1kpxu_6{transition:transform .12s;transform:scale(1)}._button_1kpxu_11{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1kpxu_11:disabled{cursor:default}._button_1kpxu_11{justify-content:center;align-items:center;width:40px;height:40px;display:flex}._button_1kpxu_11:hover ._icon_1kpxu_6{transform:scale(1.1)}._button_1kpxu_11:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._base_sfbnw_1{max-width:100%}._rating_sfbnw_5,._feedback_sfbnw_6,._contact_sfbnw_7,._success_sfbnw_8{width:320px}@media (width<=399px){._rating_sfbnw_5,._feedback_sfbnw_6,._contact_sfbnw_7,._success_sfbnw_8{width:100%}}._list_whbas_1{justify-content:space-between;gap:6px;display:flex}@media (width<=599px){._list_whbas_1{flex-direction:column-reverse;gap:4px}}._button_whbas_13{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_whbas_13:disabled{cursor:default}._button_whbas_13{text-align:center;width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:inline-block}._button_whbas_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media (width<=599px){._button_whbas_13:hover{box-shadow:none}}._button_whbas_13:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._button_whbas_13 ._score_whbas_52{display:inline}._button_whbas_13 ._label_whbas_55{display:none}@media (width<=599px){._button_whbas_13 ._label_whbas_55{display:inline}._button_whbas_13{border-radius:6px;width:100%;height:auto;padding:6px;font-size:14px;line-height:20px}._labels_whbas_75{display:none}}._base_tj93m_1{max-width:100%}._rating_tj93m_5{width:340px}@media (width<=599px){._rating_tj93m_5{width:280px}}@media (width<=399px){._rating_tj93m_5{width:100%}}._feedback_tj93m_19,._contact_tj93m_20,._success_tj93m_21{width:280px}@media (width<=599px){._feedback_tj93m_19,._contact_tj93m_20,._success_tj93m_21{width:100%}}._list_divjm_1{justify-content:space-between;gap:6px;display:flex}@media (width<=599px){._list_divjm_1{flex-direction:column-reverse;gap:4px}}._button_divjm_13{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_divjm_13:disabled{cursor:default}._button_divjm_13{text-align:center;width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:block}._button_divjm_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media (width<=599px){._button_divjm_13:hover{box-shadow:none}}._button_divjm_13:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._button_divjm_13 ._score_divjm_52{display:inline}._button_divjm_13 ._label_divjm_55{display:none}@media (width<=599px){._button_divjm_13 ._label_divjm_55{display:inline}._button_divjm_13{border-radius:6px;width:100%;height:auto;padding:6px;font-size:14px;line-height:20px}._labels_divjm_75{display:none}}._base_kj5ew_1{max-width:100%}._rating_kj5ew_5{width:520px}@media (width<=599px){._rating_kj5ew_5{width:320px}}@media (width<=399px){._rating_kj5ew_5{width:100%}}._feedback_kj5ew_19,._contact_kj5ew_20,._success_kj5ew_21{width:280px}@media (width<=599px){._feedback_kj5ew_19,._contact_kj5ew_20,._success_kj5ew_21{width:100%}}
2
+ /*$vite$:1*/
package/dist/index.d.ts CHANGED
@@ -7,6 +7,25 @@ export declare interface CES7SurveyProps extends SharedSurveyProps {
7
7
  scaleStyle: 'numbers';
8
8
  }
9
9
 
10
+ /**
11
+ * Callback function for contact submission
12
+ * @param payload - The collected contact data
13
+ * @returns void or Promise<void> for async operations
14
+ */
15
+ export declare type ContactCallback = (payload: ContactSubmitPayload) => void | Promise<void>;
16
+
17
+ /**
18
+ * Payload sent when submitting collected contact
19
+ */
20
+ export declare interface ContactSubmitPayload {
21
+ /** Selected rating value */
22
+ value?: number;
23
+ /** Submitted feedback text or selected choices */
24
+ text?: string | string[];
25
+ /** Respondent's email address */
26
+ email: string;
27
+ }
28
+
10
29
  export declare const CSAT2Survey: default_2.FC<CSAT2SurveyProps>;
11
30
 
12
31
  export declare interface CSAT2SurveyProps extends SharedSurveyProps {
@@ -57,6 +76,8 @@ export declare interface RootClassNames {
57
76
  rating?: string;
58
77
  /** Feedback screen wrapper */
59
78
  feedback?: string;
79
+ /** Contact screen wrapper */
80
+ contact?: string;
60
81
  /** Success screen wrapper */
61
82
  success?: string;
62
83
  /** Close button element */
@@ -103,15 +124,31 @@ export declare interface SharedSurveyProps {
103
124
  /** Follow-up feedback question (screen 2) */
104
125
  textQuestion?: string;
105
126
  /** Submit button text */
106
- textButtonLabel?: string;
127
+ textButtonSendLabel?: string;
128
+ /** Skip button text */
129
+ textButtonSkipLabel?: string;
107
130
  /** Optional predefined choices for feedback */
108
131
  choiceOptions?: string[] | null;
109
132
  /** Success message text */
110
133
  thankYouMessage: string;
134
+ /** Enables an optional email collection step before the success screen. Skipped when `userId` is already provided */
135
+ collectContact?: boolean;
136
+ /** Existing user identity, if already known. When provided, the email collection step is skipped */
137
+ userId?: string;
138
+ /** Question shown on the contact collection screen */
139
+ contactQuestion?: string;
140
+ /** Descriptive text shown above the email input */
141
+ contactSubtext?: string;
142
+ /** Submit button text for the contact collection screen */
143
+ contactButtonSendLabel?: string;
144
+ /** Skip button text for the contact collection screen */
145
+ contactButtonSkipLabel?: string;
111
146
  /** Callback when score data is submitted */
112
147
  onScoreSubmit?: SurveyCallback;
113
148
  /** Callback when survey data is submitted */
114
149
  onFeedbackSubmit?: SurveyCallback;
150
+ /** Callback when contact is submitted */
151
+ onContactSubmit?: ContactCallback;
115
152
  }
116
153
 
117
154
  export declare const Surface: React.FC<SurfaceProps>;
@@ -131,10 +168,12 @@ export declare type SurveyCallback = (payload: SurveySubmitPayload) => void | Pr
131
168
  export declare type SurveyScreen =
132
169
  /** Rating screen (first screen) */
133
170
  'rating'
134
- /** Final "thanks" message screen */
135
- | 'success'
136
171
  /** Feedback input screen */
137
- | 'feedback';
172
+ | 'feedback'
173
+ /** Optional email/contact collection screen */
174
+ | 'contact'
175
+ /** Final "thanks" message screen */
176
+ | 'success';
138
177
 
139
178
  /**
140
179
  * Payload sent when submitting survey data