react-feedback-surveys 1.3.0 → 1.4.1

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 +12 -7
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.js +68 -61
  5. package/package.json +2 -1
package/README.md CHANGED
@@ -102,7 +102,7 @@ import 'react-feedback-surveys/index.css';
102
102
  textButtonLabel="Send"
103
103
  thankYouMessage="Thanks for your feedback!"
104
104
  onScoreSubmit={({ value }) => {/* ... */}}
105
- onFeedbackSubmit={({ value, comment }) => {/* ... */}}
105
+ onFeedbackSubmit={({ value, text }) => {/* ... */}}
106
106
  />
107
107
  ```
108
108
 
@@ -131,7 +131,7 @@ import 'react-feedback-surveys/index.css';
131
131
  textButtonLabel="Send"
132
132
  thankYouMessage="Thank you for your feedback!"
133
133
  onScoreSubmit={({ value }) => {/* ... */}}
134
- onFeedbackSubmit={({ value, comment }) => {/* ... */}}
134
+ onFeedbackSubmit={({ value, text }) => {/* ... */}}
135
135
  />
136
136
  ```
137
137
 
@@ -164,7 +164,7 @@ import 'react-feedback-surveys/index.css';
164
164
  textButtonLabel="Send"
165
165
  thankYouMessage="Thank you for your feedback!"
166
166
  onScoreSubmit={({ value }) => {/* ... */}}
167
- onFeedbackSubmit={({ value, comment }) => {/* ... */}}
167
+ onFeedbackSubmit={({ value, text }) => {/* ... */}}
168
168
  />
169
169
  ```
170
170
 
@@ -195,7 +195,7 @@ import 'react-feedback-surveys/index.css';
195
195
  textButtonLabel="Send"
196
196
  thankYouMessage="Thank you for your feedback!"
197
197
  onScoreSubmit={({ value }) => {/* ... */}}
198
- onFeedbackSubmit={({ value, comment }) => {/* ... */}}
198
+ onFeedbackSubmit={({ value, text }) => {/* ... */}}
199
199
  />
200
200
  ```
201
201
 
@@ -302,7 +302,7 @@ Most props are shared across all survey widgets. Each widget differs only in its
302
302
  | Prop | Type | Required | Description |
303
303
  |--------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-------------------------------------------------------------------------------------------------------------|
304
304
  | `onScoreSubmit` | `({ value: number }) => void \| Promise<void>` | - | Fires immediately when a score is selected, before any follow-up feedback screen. Captures the raw rating. |
305
- | `onFeedbackSubmit` | `({ value: number; comment?: string \| string[] }) => void \| Promise<void>` | - | Fires when feedback is submitted. Includes the selected score and the user’s comment(s). |
305
+ | `onFeedbackSubmit` | `({ value: number; text?: string \| string[] }) => void \| Promise<void>` | - | Fires when feedback is submitted. Includes the selected score and the user’s text(s). |
306
306
 
307
307
  > **Event behavior**
308
308
 
@@ -324,7 +324,7 @@ This callback provides both the original score and the user's input.
324
324
 
325
325
  **Arguments:**
326
326
  - `value: number` — the same score previously passed to `onScoreSubmit`
327
- - `comment: string | string[]` — depends on `responseType`:
327
+ - `text: string | string[]` — depends on `responseType`:
328
328
  - `text`: a single text comment
329
329
  - `choices`: an array of selected options (may include a free-text comment if enabled)
330
330
 
@@ -405,6 +405,11 @@ You can override colors and fonts via CSS variables:
405
405
  /* Z-index for popup overlay positioning */
406
406
  --ft-popup-z-index: 49;
407
407
 
408
+ /* Inline-end offset for survey head inside popups (right padding in LTR, left in RTL) */
409
+ /* Automatically set to 32px inside Popup to prevent title overlap with close button */
410
+ /* Set to 0 by default for inline surveys */
411
+ --ft-popup-head-offset: 0;
412
+
408
413
  /* Padding for Surface component container (desktop) */
409
414
  --ft-surface-padding: 24px;
410
415
 
@@ -567,7 +572,7 @@ import 'react-feedback-surveys/index.css';
567
572
  minLabel="Very unsatisfied"
568
573
  maxLabel="Very satisfied"
569
574
  onScoreSubmit={({ value }) => {/* ... */}}
570
- onFeedbackSubmit={({ value, comment }) => {/* ... */}}
575
+ onFeedbackSubmit={({ value, text }) => {/* ... */}}
571
576
  />
572
577
  ```
573
578
 
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- :root,:host{--ft-color-text: 30 8% 14%;--ft-color-bg: 0 0% 100%;--ft-color-muted: 222 11% 46%;--ft-color-error: 32 95% 44%;--ft-color-border: 214 14% 83%;--ft-color-outline: 218 14% 65%;--ft-color-shadow: 0 0% 0%;--ft-color-control: 214 20% 96%;--ft-popup-z-index: 49;--ft-surface-padding: 24px;--ft-surface-padding-mobile: 20px}body{margin:0;box-sizing:border-box;padding:0}*,*:before,*:after{margin:0;box-sizing:border-box;padding:0}._base_1nuw0_1{display:inline-block;position:relative;padding:var(--ft-surface-padding);overflow:auto;background-color:hsl(var(--ft-color-bg)/100%);border-radius:8px;box-shadow:0 0 10px hsl(var(--ft-color-shadow)/20%)}@media(max-width:400px){._base_1nuw0_1{padding:var(--ft-surface-padding-mobile)}}._base_xxwd2_1{position:fixed;margin:0;box-sizing:border-box;max-width:calc(100vw - var(--ft-surface-padding) * 2);max-height:calc(100vh - var(--ft-surface-padding) * 2);transform-origin:50% 100%;z-index:var(--ft-popup-z-index)}@media(max-width:400px){._base_xxwd2_1{max-width:calc(100vw - var(--ft-surface-padding-mobile) * 2);max-height:calc(100vh - var(--ft-surface-padding-mobile) * 2)}}._animated_xxwd2_17{opacity:0;animation:_fadeForward_xxwd2_1 .12s ease-in-out forwards}@keyframes _fadeForward_xxwd2_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_xxwd2_32{top:24px;left:24px}._top_xxwd2_32{top:24px}._topRight_xxwd2_41{top:24px;right:24px}._right_xxwd2_46{top:50%;right:24px;transform:translateY(-50%)}._bottomRight_xxwd2_52{right:24px;bottom:24px}._bottom_xxwd2_52{bottom:24px}._bottomLeft_xxwd2_61{bottom:24px;left:24px}._left_xxwd2_66{left:24px}._close_xxwd2_70{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_xxwd2_70:disabled{cursor:default}._close_xxwd2_70{position:absolute;top:var(--ft-surface-padding);inset-inline-end:var(--ft-surface-padding);width:24px;height:24px;color:hsl(var(--ft-color-outline)/100%);transition:color .15s}@media(max-width:400px){._close_xxwd2_70{top:var(--ft-surface-padding-mobile);inset-inline-end:var(--ft-surface-padding-mobile)}}._close_xxwd2_70:hover{color:hsl(var(--ft-color-text)/100%)}._close_xxwd2_70:before,._close_xxwd2_70:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_xxwd2_70:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_xxwd2_70:after{margin:-8px 0 0 -1px;width:2px;height:16px}._choices_1fbp9_1{margin:0 0 12px}._choice_1fbp9_1{display:flex}._choice_1fbp9_1+._choice_1fbp9_1{margin-top:12px}._label_1fbp9_12{position:relative;display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._sr_1fbp9_21{position:absolute;margin:-1px;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;border-width:0;clip:rect(0,0,0,0)}._checkbox_1fbp9_33{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._check_1fbp9_33{height:20px;min-width:20px;border:1px solid hsl(var(--ft-color-border)/100%);border-radius:4px}._label_1fbp9_12:hover ._check_1fbp9_33{border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33{position:relative;background-color:hsl(var(--ft-color-text)/100%);border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33:after{position:absolute;top:50%;left:50%;width:10px;height:7px;content:"";border:2px solid;border-color:transparent transparent hsl(var(--ft-color-bg)/100%) hsl(var(--ft-color-bg)/100%);transform:translate(-45%,-75%) rotate(-45deg);pointer-events:none}._input_1fbp9_70{margin-top:8px;height:32px}._textarea_1fbp9_75{height:192px}._input_1fbp9_70,._textarea_1fbp9_75{width:100%;padding:8px 12px;font-size:16px;line-height:1.5;background-color:hsl(var(--ft-color-bg)/100%);border:1px solid hsl(var(--ft-color-border)/100%);border-radius:8px;outline:0 solid hsl(var(--ft-color-outline)/14%);resize:none;transition:background-color .15s,border-color .15s,outline-width .2s}._input_1fbp9_70:focus,._textarea_1fbp9_75:focus{outline:4px solid hsl(var(--ft-color-outline)/14%)}._input_1fbp9_70._invalid_1fbp9_96,._textarea_1fbp9_75._invalid_1fbp9_96{border-color:hsl(var(--ft-color-error)/100%)}._submit_1fbp9_101{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._submit_1fbp9_101:disabled{cursor:default}._submit_1fbp9_101{padding:8px 32px;font-size:16px;font-weight:400;text-align:center;color:hsl(var(--ft-color-bg)/100%);background-color:hsl(var(--ft-color-text)/100%);border-radius:8px;transition:opacity .2s}._submit_1fbp9_101:hover{opacity:.85}._submit_1fbp9_101{margin-top:16px;width:100%}._success_1fbp9_133{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_1gt2q_1{padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif;color:hsl(var(--ft-color-text)/100%)}._head_1gt2q_7{display:flex;gap:8px;padding-block:0 20px;padding-inline:0 32px}._title_1gt2q_14{flex:1 0;font-family:inherit;font-size:16px;font-weight:500;font-style:normal;line-height:1.4}._base_1qyw7_1{margin:12px 0 0;display:flex;justify-content:space-between}._label_1qyw7_7{flex:0 0 50%;max-width:50%;font-size:14px;line-height:1.4286;color:hsl(var(--ft-color-muted)/100%)}._label_1qyw7_7:first-child{text-align:start}._label_1qyw7_7:last-child{text-align:end}._list_asa83_1{display:flex;justify-content:center;gap:16px}._icon_asa83_7{transition:transform .12s ease;transform:scale(1)}._button_asa83_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_asa83_12:disabled{cursor:default}._button_asa83_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:400px){._button_asa83_12{width:48px;height:48px}}._button_asa83_12:hover ._icon_asa83_7{transform:scale(1.15)}._button_asa83_12:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_1exln_1{display:flex;justify-content:center;gap:16px}._icon_1exln_7{transition:transform .12s ease;transform:scale(1)}._button_1exln_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1exln_12:disabled{cursor:default}._button_1exln_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}._button_1exln_12:hover ._icon_1exln_7{transform:scale(1.15)}._button_1exln_12:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._base_1oxyv_1{width:100%;max-width:310px}._list_t1g1q_1{display:flex;justify-content:space-between}._icon_t1g1q_6{transition:transform .12s ease;transform:scale(1)}._button_t1g1q_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_t1g1q_11:disabled{cursor:default}._button_t1g1q_11{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:400px){._button_t1g1q_11{width:48px;height:48px}}._button_t1g1q_11:hover ._icon_t1g1q_6{transform:scale(1.15)}._button_t1g1q_11:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_yy136_1{display:flex;justify-content:space-between}._button_yy136_6{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_yy136_6:disabled{cursor:default}._button_yy136_6{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:18px;font-weight:700;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_yy136_6:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}._button_yy136_6:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_20ac1_1{display:flex;justify-content:space-between}._icon_20ac1_6{transition:transform .12s ease;transform:scale(1)}._button_20ac1_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_20ac1_11:disabled{cursor:default}._button_20ac1_11{display:flex;align-items:center;justify-content:center;width:40px;height:40px}._button_20ac1_11:hover ._icon_20ac1_6{transform:scale(1.1)}._button_20ac1_11:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._base_14lcg_1{width:100%;max-width:320px}._list_1rcbg_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1rcbg_1{flex-direction:column-reverse;gap:4px}}._button_1rcbg_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1rcbg_13:disabled{cursor:default}._button_1rcbg_13{display:inline-block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1rcbg_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:575px){._button_1rcbg_13:hover{box-shadow:none}}._button_1rcbg_13:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._button_1rcbg_13 ._score_1rcbg_52{display:inline}._button_1rcbg_13 ._label_1rcbg_55{display:none}@media(max-width:575px){._button_1rcbg_13 ._label_1rcbg_55{display:inline}}@media(max-width:575px){._button_1rcbg_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1rcbg_75{display:none}}._base_cn8p7_1{width:100%;max-width:340px}._list_1vd7e_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1vd7e_1{flex-direction:column-reverse;gap:4px}}._button_1vd7e_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1vd7e_13:disabled{cursor:default}._button_1vd7e_13{display:block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1vd7e_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:575px){._button_1vd7e_13:hover{box-shadow:none}}._button_1vd7e_13:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._button_1vd7e_13 ._score_1vd7e_52{display:inline}._button_1vd7e_13 ._label_1vd7e_55{display:none}@media(max-width:575px){._button_1vd7e_13 ._label_1vd7e_55{display:inline}}@media(max-width:575px){._button_1vd7e_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1vd7e_75{display:none}}._base_1xgqd_1{width:100%;max-width:520px}
1
+ :root,:host{--ft-color-text: 30 8% 14%;--ft-color-bg: 0 0% 100%;--ft-color-muted: 222 11% 46%;--ft-color-error: 32 95% 44%;--ft-color-border: 214 14% 83%;--ft-color-outline: 218 14% 65%;--ft-color-shadow: 0 0% 0%;--ft-color-control: 214 20% 96%;--ft-popup-z-index: 49;--ft-popup-head-offset: 0;--ft-surface-padding: 24px;--ft-surface-padding-mobile: 20px}body{margin:0;box-sizing:border-box;padding:0}*,*:before,*:after{margin:0;box-sizing:border-box;padding:0}._base_1nuw0_1{display:inline-block;position:relative;padding:var(--ft-surface-padding);overflow:auto;background-color:hsl(var(--ft-color-bg)/100%);border-radius:8px;box-shadow:0 0 10px hsl(var(--ft-color-shadow)/20%)}@media(max-width:400px){._base_1nuw0_1{padding:var(--ft-surface-padding-mobile)}}._base_tnl80_1{position:fixed;margin:0;box-sizing:border-box;max-width:calc(100vw - var(--ft-surface-padding) * 2);max-height:calc(100vh - var(--ft-surface-padding) * 2);transform-origin:50% 100%;z-index:var(--ft-popup-z-index);--ft-popup-head-offset: 32px}@media(max-width:400px){._base_tnl80_1{max-width:calc(100vw - var(--ft-surface-padding-mobile) * 2);max-height:calc(100vh - var(--ft-surface-padding-mobile) * 2)}}._animated_tnl80_18{opacity:0;animation:_fadeForward_tnl80_1 .12s ease-in-out forwards}@keyframes _fadeForward_tnl80_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_tnl80_33{top:24px;left:24px}._top_tnl80_33{top:24px}._topRight_tnl80_42{top:24px;right:24px}._right_tnl80_47{top:50%;right:24px;transform:translateY(-50%)}._bottomRight_tnl80_53{right:24px;bottom:24px}._bottom_tnl80_53{bottom:24px}._bottomLeft_tnl80_62{bottom:24px;left:24px}._left_tnl80_67{left:24px}._close_tnl80_71{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_tnl80_71:disabled{cursor:default}._close_tnl80_71{position:absolute;top:var(--ft-surface-padding);inset-inline-end:var(--ft-surface-padding);width:24px;height:24px;color:hsl(var(--ft-color-outline)/100%);transition:color .15s}@media(max-width:400px){._close_tnl80_71{top:var(--ft-surface-padding-mobile);inset-inline-end:var(--ft-surface-padding-mobile)}}._close_tnl80_71:hover{color:hsl(var(--ft-color-text)/100%)}._close_tnl80_71:before,._close_tnl80_71:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_tnl80_71:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_tnl80_71:after{margin:-8px 0 0 -1px;width:2px;height:16px}._choices_1fbp9_1{margin:0 0 12px}._choice_1fbp9_1{display:flex}._choice_1fbp9_1+._choice_1fbp9_1{margin-top:12px}._label_1fbp9_12{position:relative;display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._sr_1fbp9_21{position:absolute;margin:-1px;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;border-width:0;clip:rect(0,0,0,0)}._checkbox_1fbp9_33{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._check_1fbp9_33{height:20px;min-width:20px;border:1px solid hsl(var(--ft-color-border)/100%);border-radius:4px}._label_1fbp9_12:hover ._check_1fbp9_33{border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33{position:relative;background-color:hsl(var(--ft-color-text)/100%);border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33:after{position:absolute;top:50%;left:50%;width:10px;height:7px;content:"";border:2px solid;border-color:transparent transparent hsl(var(--ft-color-bg)/100%) hsl(var(--ft-color-bg)/100%);transform:translate(-45%,-75%) rotate(-45deg);pointer-events:none}._input_1fbp9_70{margin-top:8px;height:32px}._textarea_1fbp9_75{height:192px}._input_1fbp9_70,._textarea_1fbp9_75{width:100%;padding:8px 12px;font-size:16px;line-height:1.5;background-color:hsl(var(--ft-color-bg)/100%);border:1px solid hsl(var(--ft-color-border)/100%);border-radius:8px;outline:0 solid hsl(var(--ft-color-outline)/14%);resize:none;transition:background-color .15s,border-color .15s,outline-width .2s}._input_1fbp9_70:focus,._textarea_1fbp9_75:focus{outline:4px solid hsl(var(--ft-color-outline)/14%)}._input_1fbp9_70._invalid_1fbp9_96,._textarea_1fbp9_75._invalid_1fbp9_96{border-color:hsl(var(--ft-color-error)/100%)}._submit_1fbp9_101{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._submit_1fbp9_101:disabled{cursor:default}._submit_1fbp9_101{padding:8px 32px;font-size:16px;font-weight:400;text-align:center;color:hsl(var(--ft-color-bg)/100%);background-color:hsl(var(--ft-color-text)/100%);border-radius:8px;transition:opacity .2s}._submit_1fbp9_101:hover{opacity:.85}._submit_1fbp9_101{margin-top:16px;width:100%}._success_1fbp9_133{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_q2v0p_1{padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif;color:hsl(var(--ft-color-text)/100%)}._head_q2v0p_7{display:flex;gap:8px;padding-block:0 20px;padding-inline:0 var(--ft-popup-head-offset)}._title_q2v0p_14{flex:1 0;font-family:inherit;font-size:16px;font-weight:500;font-style:normal;line-height:1.4}._base_1qyw7_1{margin:12px 0 0;display:flex;justify-content:space-between}._label_1qyw7_7{flex:0 0 50%;max-width:50%;font-size:14px;line-height:1.4286;color:hsl(var(--ft-color-muted)/100%)}._label_1qyw7_7:first-child{text-align:start}._label_1qyw7_7:last-child{text-align:end}._list_asa83_1{display:flex;justify-content:center;gap:16px}._icon_asa83_7{transition:transform .12s ease;transform:scale(1)}._button_asa83_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_asa83_12:disabled{cursor:default}._button_asa83_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:400px){._button_asa83_12{width:48px;height:48px}}._button_asa83_12:hover ._icon_asa83_7{transform:scale(1.15)}._button_asa83_12:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_1exln_1{display:flex;justify-content:center;gap:16px}._icon_1exln_7{transition:transform .12s ease;transform:scale(1)}._button_1exln_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1exln_12:disabled{cursor:default}._button_1exln_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}._button_1exln_12:hover ._icon_1exln_7{transform:scale(1.15)}._button_1exln_12:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._base_y1wf0_1{width:280px;max-width:100%}@media(max-width:400px){._base_y1wf0_1{width:100%}}._list_t1g1q_1{display:flex;justify-content:space-between}._icon_t1g1q_6{transition:transform .12s ease;transform:scale(1)}._button_t1g1q_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_t1g1q_11:disabled{cursor:default}._button_t1g1q_11{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:400px){._button_t1g1q_11{width:48px;height:48px}}._button_t1g1q_11:hover ._icon_t1g1q_6{transform:scale(1.15)}._button_t1g1q_11:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_yy136_1{display:flex;justify-content:space-between}._button_yy136_6{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_yy136_6:disabled{cursor:default}._button_yy136_6{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:18px;font-weight:700;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_yy136_6:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}._button_yy136_6:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_20ac1_1{display:flex;justify-content:space-between}._icon_20ac1_6{transition:transform .12s ease;transform:scale(1)}._button_20ac1_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_20ac1_11:disabled{cursor:default}._button_20ac1_11{display:flex;align-items:center;justify-content:center;width:40px;height:40px}._button_20ac1_11:hover ._icon_20ac1_6{transform:scale(1.1)}._button_20ac1_11:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._base_qx9qr_1{width:320px;max-width:100%}@media(max-width:400px){._base_qx9qr_1{width:100%}}._list_1rcbg_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1rcbg_1{flex-direction:column-reverse;gap:4px}}._button_1rcbg_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1rcbg_13:disabled{cursor:default}._button_1rcbg_13{display:inline-block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1rcbg_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:575px){._button_1rcbg_13:hover{box-shadow:none}}._button_1rcbg_13:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._button_1rcbg_13 ._score_1rcbg_52{display:inline}._button_1rcbg_13 ._label_1rcbg_55{display:none}@media(max-width:575px){._button_1rcbg_13 ._label_1rcbg_55{display:inline}}@media(max-width:575px){._button_1rcbg_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1rcbg_75{display:none}}._base_1y0v8_1{width:340px;max-width:100%}@media(max-width:575px){._base_1y0v8_1{width:100%}}._list_1vd7e_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1vd7e_1{flex-direction:column-reverse;gap:4px}}._button_1vd7e_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1vd7e_13:disabled{cursor:default}._button_1vd7e_13{display:block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1vd7e_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:575px){._button_1vd7e_13:hover{box-shadow:none}}._button_1vd7e_13:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._button_1vd7e_13 ._score_1vd7e_52{display:inline}._button_1vd7e_13 ._label_1vd7e_55{display:none}@media(max-width:575px){._button_1vd7e_13 ._label_1vd7e_55{display:inline}}@media(max-width:575px){._button_1vd7e_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1vd7e_75{display:none}}._base_1h9nm_1{width:520px;max-width:100%}@media(max-width:575px){._base_1h9nm_1{width:100%}}
package/dist/index.d.ts CHANGED
@@ -142,7 +142,7 @@ export declare interface SurveySubmitPayload {
142
142
  /** Selected rating value */
143
143
  value?: number;
144
144
  /** Optional text or array of selected choices */
145
- comment?: string | string[];
145
+ text?: string | string[];
146
146
  }
147
147
 
148
148
  export { }
package/dist/index.js CHANGED
@@ -14,7 +14,7 @@ const Q = "_base_1nuw0_1", X = {
14
14
  }, Z = ({
15
15
  className: t,
16
16
  children: l
17
- }) => /* @__PURE__ */ a("div", { className: i(X.base, t), children: l }), ee = "_base_xxwd2_1", te = "_animated_xxwd2_17", ae = "_fadeForward_xxwd2_1", re = "_topLeft_xxwd2_32", ne = "_top_xxwd2_32", le = "_topRight_xxwd2_41", oe = "_right_xxwd2_46", ie = "_bottomRight_xxwd2_52", se = "_bottom_xxwd2_52", ce = "_bottomLeft_xxwd2_61", pe = "_left_xxwd2_66", fe = "_close_xxwd2_70", N = {
17
+ }) => /* @__PURE__ */ a("div", { className: i(X.base, t), children: l }), ee = "_base_tnl80_1", te = "_animated_tnl80_18", ae = "_fadeForward_tnl80_1", re = "_topLeft_tnl80_33", ne = "_top_tnl80_33", le = "_topRight_tnl80_42", oe = "_right_tnl80_47", ie = "_bottomRight_tnl80_53", se = "_bottom_tnl80_53", ce = "_bottomLeft_tnl80_62", pe = "_left_tnl80_67", fe = "_close_tnl80_71", N = {
18
18
  base: ee,
19
19
  animated: te,
20
20
  fadeForward: ae,
@@ -202,7 +202,7 @@ const Q = "_base_1nuw0_1", X = {
202
202
  width: 84,
203
203
  height: 84
204
204
  }
205
- ) }), Ge = "_base_1gt2q_1", ve = "_head_1gt2q_7", we = "_title_1gt2q_14", G = {
205
+ ) }), Ge = "_base_q2v0p_1", ve = "_head_q2v0p_7", we = "_title_q2v0p_14", G = {
206
206
  base: Ge,
207
207
  head: ve,
208
208
  title: we
@@ -221,63 +221,70 @@ const Q = "_base_1nuw0_1", X = {
221
221
  onFeedback: h
222
222
  }) => {
223
223
  const u = P();
224
- return /* @__PURE__ */ E("div", { className: i(G.base, l, n?.base), dir: o, children: [
225
- /* @__PURE__ */ a("div", { className: i(G.head, n?.head), children: /* @__PURE__ */ E(
226
- "div",
227
- {
228
- "aria-level": 2,
229
- id: u,
230
- className: i(G.title, n?.title),
231
- role: "heading",
232
- children: [
233
- c === "main" && s,
234
- c === "feedback" && r,
235
- c === "success" && m
236
- ]
237
- }
238
- ) }),
239
- c === "main" && /* @__PURE__ */ a(
240
- "div",
241
- {
242
- "aria-label": "Rating selection",
243
- "aria-labelledby": u,
244
- className: i(G.body, n?.body),
245
- role: "region",
246
- children: t
247
- }
248
- ),
249
- c === "feedback" && /* @__PURE__ */ a(
250
- "div",
251
- {
252
- "aria-label": "Feedback form",
253
- "aria-labelledby": u,
254
- className: i(G.body, n?.body),
255
- role: "region",
256
- children: /* @__PURE__ */ a(
257
- ge,
224
+ return /* @__PURE__ */ E(
225
+ "div",
226
+ {
227
+ className: i(G.base, l, n?.base),
228
+ dir: o,
229
+ children: [
230
+ /* @__PURE__ */ a("div", { className: i(G.head, n?.head), children: /* @__PURE__ */ E(
231
+ "div",
258
232
  {
259
- buttonLabel: p,
260
- choiceOptions: f,
261
- responseType: d,
262
- onSubmit: h
233
+ "aria-level": 2,
234
+ id: u,
235
+ className: i(G.title, n?.title),
236
+ role: "heading",
237
+ children: [
238
+ c === "main" && s,
239
+ c === "feedback" && r,
240
+ c === "success" && m
241
+ ]
242
+ }
243
+ ) }),
244
+ c === "main" && /* @__PURE__ */ a(
245
+ "div",
246
+ {
247
+ "aria-label": "Rating selection",
248
+ "aria-labelledby": u,
249
+ className: i(G.body, n?.body),
250
+ role: "region",
251
+ children: t
252
+ }
253
+ ),
254
+ c === "feedback" && /* @__PURE__ */ a(
255
+ "div",
256
+ {
257
+ "aria-label": "Feedback form",
258
+ "aria-labelledby": u,
259
+ className: i(G.body, n?.body),
260
+ role: "region",
261
+ children: /* @__PURE__ */ a(
262
+ ge,
263
+ {
264
+ buttonLabel: p,
265
+ choiceOptions: f,
266
+ responseType: d,
267
+ onSubmit: h
268
+ }
269
+ )
270
+ }
271
+ ),
272
+ c === "success" && /* @__PURE__ */ a(
273
+ "div",
274
+ {
275
+ "aria-atomic": "true",
276
+ "aria-live": "polite",
277
+ "aria-label": m,
278
+ "aria-labelledby": u,
279
+ className: i(G.body, n?.body),
280
+ tabIndex: -1,
281
+ role: "status",
282
+ children: /* @__PURE__ */ a(Me, {})
263
283
  }
264
284
  )
265
- }
266
- ),
267
- c === "success" && /* @__PURE__ */ a(
268
- "div",
269
- {
270
- "aria-atomic": "true",
271
- "aria-live": "polite",
272
- "aria-label": m,
273
- "aria-labelledby": u,
274
- className: i(G.body, n?.body),
275
- tabIndex: -1,
276
- role: "status",
277
- children: /* @__PURE__ */ a(Me, {})
278
- }
279
- )
280
- ] });
285
+ ]
286
+ }
287
+ );
281
288
  }, j = ({
282
289
  responseType: t,
283
290
  onScoreSubmit: l,
@@ -307,7 +314,7 @@ const Q = "_base_1nuw0_1", X = {
307
314
  if (n) {
308
315
  c(!0);
309
316
  try {
310
- await n({ value: o, comment: y }), f(!0);
317
+ await n({ value: o, text: y }), f(!0);
311
318
  } catch (v) {
312
319
  p(v instanceof Error ? v : new Error("Failed to submit"));
313
320
  } finally {
@@ -427,7 +434,7 @@ const Q = "_base_1nuw0_1", X = {
427
434
  }
428
435
  )
429
436
  ] });
430
- }, Re = "_base_1oxyv_1", De = {
437
+ }, Re = "_base_y1wf0_1", De = {
431
438
  base: Re
432
439
  }, T1 = ({
433
440
  classNames: t,
@@ -639,7 +646,7 @@ const Q = "_base_1nuw0_1", X = {
639
646
  }
640
647
  )
641
648
  ] });
642
- }, c1 = "_base_14lcg_1", p1 = {
649
+ }, c1 = "_base_qx9qr_1", p1 = {
643
650
  base: c1
644
651
  }, $1 = ({
645
652
  classNames: t,
@@ -765,7 +772,7 @@ const Q = "_base_1nuw0_1", X = {
765
772
  }
766
773
  )
767
774
  ] });
768
- }, b1 = "_base_cn8p7_1", y1 = {
775
+ }, b1 = "_base_1y0v8_1", y1 = {
769
776
  base: b1
770
777
  }, q1 = ({
771
778
  classNames: t,
@@ -871,7 +878,7 @@ const Q = "_base_1nuw0_1", X = {
871
878
  }
872
879
  )
873
880
  ] });
874
- }, S1 = "_base_1xgqd_1", M1 = {
881
+ }, S1 = "_base_1h9nm_1", M1 = {
875
882
  base: S1
876
883
  }, N1 = ({
877
884
  classNames: t,
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "react-feedback-surveys",
3
3
  "description": "CSAT, CES, and NPS survey widgets for React",
4
4
  "private": false,
5
- "version": "1.3.0",
5
+ "version": "1.4.1",
6
6
  "license": "MIT",
7
7
  "repository": {
8
8
  "type": "git",
@@ -39,6 +39,7 @@
39
39
  "lint": "eslint .",
40
40
  "storybook": "storybook dev -p 6006",
41
41
  "build-storybook": "storybook build",
42
+ "typecheck": "tsc --noEmit",
42
43
  "stylelint": "stylelint --fix '**/*.scss'",
43
44
  "chromatic": "npx chromatic"
44
45
  },