survey-react 1.12.3 → 1.12.4

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 (14) hide show
  1. package/defaultV2.css +16 -39
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +23 -77
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +11 -17
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +58 -20
  12. package/survey.react.js +426 -163
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +3 -3
package/modern.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.12.3
2
+ * surveyjs - Survey JavaScript library v1.12.4
3
3
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -116,18 +116,12 @@ sv-popup {
116
116
 
117
117
  .sv-popup__container {
118
118
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
119
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
119
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
120
120
  border-radius: var(--sjs-corner-radius, 4px);
121
121
  position: absolute;
122
122
  padding: 0;
123
123
  }
124
124
 
125
- .sv-popup__shadow {
126
- width: 100%;
127
- height: 100%;
128
- border-radius: var(--sjs-corner-radius, 4px);
129
- }
130
-
131
125
  .sv-popup__body-content {
132
126
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
133
127
  border-radius: var(--sjs-corner-radius, 4px);
@@ -154,23 +148,17 @@ sv-popup {
154
148
  display: flex;
155
149
  }
156
150
 
157
- .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
158
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
151
+ .sv-popup--modal > .sv-popup__container > .sv-popup__body-content {
159
152
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
160
153
  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
161
154
  height: auto;
162
- }
163
- .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-popup__body-footer {
164
- padding-bottom: 2px;
155
+ gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
165
156
  }
166
157
 
167
158
  .sv-popup--modal .sv-popup__body-footer .sv-footer-action-bar {
168
159
  overflow: visible;
169
160
  }
170
161
 
171
- .sv-popup--confirm-delete .sv-popup__shadow {
172
- height: initial;
173
- }
174
162
  .sv-popup--confirm-delete .sv-popup__container {
175
163
  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
176
164
  }
@@ -182,7 +170,6 @@ sv-popup {
182
170
  }
183
171
  .sv-popup--confirm-delete .sv-popup__body-header {
184
172
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
185
- margin-bottom: 0;
186
173
  align-self: self-start;
187
174
  /* UI/Default */
188
175
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -196,7 +183,6 @@ sv-popup {
196
183
  display: none;
197
184
  }
198
185
  .sv-popup--confirm-delete .sv-popup__body-footer {
199
- padding-bottom: 0;
200
186
  max-width: max-content;
201
187
  }
202
188
  .sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
@@ -215,6 +201,7 @@ sv-popup {
215
201
  width: 100%;
216
202
  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
217
203
  border: unset;
204
+ box-shadow: unset;
218
205
  box-sizing: content-box;
219
206
  }
220
207
  .sv-popup--overlay .sv-popup__body-content {
@@ -222,32 +209,27 @@ sv-popup {
222
209
  max-width: 100vw;
223
210
  border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
224
211
  background: var(--sjs-general-backcolor, var(--background, #fff));
225
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
226
212
  padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
227
213
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
228
214
  }
229
215
  .sv-popup--overlay .sv-popup__scrolling-content {
230
216
  height: calc(100% - 10 * var(--base-unit, 8px));
231
217
  }
232
- .sv-popup--overlay .sv-popup__body-footer {
233
- margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
234
- }
235
218
  .sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
236
219
  width: 100%;
237
220
  }
238
221
  .sv-popup--overlay .sv-popup__body-footer-item {
239
222
  width: 100%;
240
223
  }
224
+ .sv-popup--overlay .sv-popup__body-footer .sv-action {
225
+ flex: 1 0 0;
226
+ }
241
227
  .sv-popup--overlay .sv-popup__button.sv-popup__button {
242
228
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
243
229
  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
244
230
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
245
231
  }
246
232
 
247
- .sv-popup--overlay .sv-popup__body-footer .sv-action {
248
- flex: 1 0 0;
249
- }
250
-
251
233
  .sv-popup--modal .sv-popup__scrolling-content {
252
234
  padding: 2px;
253
235
  margin: -2px;
@@ -322,23 +304,17 @@ sv-popup {
322
304
  line-height: calc(2 * (var(--sjs-font-size, 16px)));
323
305
  font-style: normal;
324
306
  font-weight: 700;
325
- margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
326
307
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
327
308
  }
328
309
 
329
310
  .sv-popup__body-footer {
330
311
  display: flex;
331
- margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
332
312
  }
333
313
 
334
314
  .sv-popup__body-footer .sv-action-bar {
335
315
  gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
336
316
  }
337
317
 
338
- .sv-popup__button {
339
- margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
340
- }
341
-
342
318
  .sv-popup--modal .sv-list__filter,
343
319
  .sv-popup--overlay .sv-list__filter {
344
320
  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -351,16 +327,13 @@ sv-popup {
351
327
  .sv-popup--dropdown .sv-list__filter {
352
328
  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
353
329
  }
354
- .sv-popup--dropdown .sv-popup__shadow {
355
- box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
356
- }
357
330
  .sv-popup--dropdown .sv-popup__body-content {
358
331
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
359
332
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
360
333
  height: 100%;
361
334
  }
362
335
 
363
- .sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-list {
336
+ .sv-popup--dropdown > .sv-popup__container > .sv-popup__body-content .sv-list {
364
337
  background-color: transparent;
365
338
  }
366
339
 
@@ -373,6 +346,7 @@ sv-popup {
373
346
 
374
347
  .sv-popup--overlay .sv-popup__body-content {
375
348
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
349
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
376
350
  }
377
351
 
378
352
  .sv-popup--dropdown-overlay {
@@ -393,7 +367,6 @@ sv-popup {
393
367
  box-shadow: none;
394
368
  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
395
369
  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
396
- margin: 0;
397
370
  }
398
371
  .sv-popup--dropdown-overlay .sv-popup__container {
399
372
  max-height: calc(var(--sv-popup-overlay-height, 100vh));
@@ -402,10 +375,10 @@ sv-popup {
402
375
  }
403
376
  .sv-popup--dropdown-overlay .sv-popup__body-content {
404
377
  height: calc(var(--sv-popup-overlay-height, 100vh));
378
+ gap: 0;
405
379
  }
406
380
  .sv-popup--dropdown-overlay .sv-popup__body-footer {
407
381
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
408
- margin-top: 0;
409
382
  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
410
383
  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
411
384
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
@@ -534,7 +507,7 @@ sv-popup {
534
507
  max-width: var(--sv-popup-overlay-max-width);
535
508
  border-radius: var(--sjs-corner-radius, 4px);
536
509
  overflow: hidden;
537
- margin: 0;
510
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
538
511
  }
539
512
  .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__content,
540
513
  .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__scrolling-content,
@@ -2954,18 +2927,12 @@ sv-popup {
2954
2927
 
2955
2928
  .sv-popup__container {
2956
2929
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
2957
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
2930
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
2958
2931
  border-radius: var(--sjs-corner-radius, 4px);
2959
2932
  position: absolute;
2960
2933
  padding: 0;
2961
2934
  }
2962
2935
 
2963
- .sv-popup__shadow {
2964
- width: 100%;
2965
- height: 100%;
2966
- border-radius: var(--sjs-corner-radius, 4px);
2967
- }
2968
-
2969
2936
  .sv-popup__body-content {
2970
2937
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2971
2938
  border-radius: var(--sjs-corner-radius, 4px);
@@ -2992,23 +2959,17 @@ sv-popup {
2992
2959
  display: flex;
2993
2960
  }
2994
2961
 
2995
- .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
2996
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
2962
+ .sv-popup--modal > .sv-popup__container > .sv-popup__body-content {
2997
2963
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
2998
2964
  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2999
2965
  height: auto;
3000
- }
3001
- .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-popup__body-footer {
3002
- padding-bottom: 2px;
2966
+ gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3003
2967
  }
3004
2968
 
3005
2969
  .sv-popup--modal .sv-popup__body-footer .sv-footer-action-bar {
3006
2970
  overflow: visible;
3007
2971
  }
3008
2972
 
3009
- .sv-popup--confirm-delete .sv-popup__shadow {
3010
- height: initial;
3011
- }
3012
2973
  .sv-popup--confirm-delete .sv-popup__container {
3013
2974
  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
3014
2975
  }
@@ -3020,7 +2981,6 @@ sv-popup {
3020
2981
  }
3021
2982
  .sv-popup--confirm-delete .sv-popup__body-header {
3022
2983
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3023
- margin-bottom: 0;
3024
2984
  align-self: self-start;
3025
2985
  /* UI/Default */
3026
2986
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -3034,7 +2994,6 @@ sv-popup {
3034
2994
  display: none;
3035
2995
  }
3036
2996
  .sv-popup--confirm-delete .sv-popup__body-footer {
3037
- padding-bottom: 0;
3038
2997
  max-width: max-content;
3039
2998
  }
3040
2999
  .sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
@@ -3053,6 +3012,7 @@ sv-popup {
3053
3012
  width: 100%;
3054
3013
  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3055
3014
  border: unset;
3015
+ box-shadow: unset;
3056
3016
  box-sizing: content-box;
3057
3017
  }
3058
3018
  .sv-popup--overlay .sv-popup__body-content {
@@ -3060,32 +3020,27 @@ sv-popup {
3060
3020
  max-width: 100vw;
3061
3021
  border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
3062
3022
  background: var(--sjs-general-backcolor, var(--background, #fff));
3063
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
3064
3023
  padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3065
3024
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3066
3025
  }
3067
3026
  .sv-popup--overlay .sv-popup__scrolling-content {
3068
3027
  height: calc(100% - 10 * var(--base-unit, 8px));
3069
3028
  }
3070
- .sv-popup--overlay .sv-popup__body-footer {
3071
- margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3072
- }
3073
3029
  .sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
3074
3030
  width: 100%;
3075
3031
  }
3076
3032
  .sv-popup--overlay .sv-popup__body-footer-item {
3077
3033
  width: 100%;
3078
3034
  }
3035
+ .sv-popup--overlay .sv-popup__body-footer .sv-action {
3036
+ flex: 1 0 0;
3037
+ }
3079
3038
  .sv-popup--overlay .sv-popup__button.sv-popup__button {
3080
3039
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3081
3040
  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
3082
3041
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
3083
3042
  }
3084
3043
 
3085
- .sv-popup--overlay .sv-popup__body-footer .sv-action {
3086
- flex: 1 0 0;
3087
- }
3088
-
3089
3044
  .sv-popup--modal .sv-popup__scrolling-content {
3090
3045
  padding: 2px;
3091
3046
  margin: -2px;
@@ -3160,23 +3115,17 @@ sv-popup {
3160
3115
  line-height: calc(2 * (var(--sjs-font-size, 16px)));
3161
3116
  font-style: normal;
3162
3117
  font-weight: 700;
3163
- margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3164
3118
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3165
3119
  }
3166
3120
 
3167
3121
  .sv-popup__body-footer {
3168
3122
  display: flex;
3169
- margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3170
3123
  }
3171
3124
 
3172
3125
  .sv-popup__body-footer .sv-action-bar {
3173
3126
  gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3174
3127
  }
3175
3128
 
3176
- .sv-popup__button {
3177
- margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3178
- }
3179
-
3180
3129
  .sv-popup--modal .sv-list__filter,
3181
3130
  .sv-popup--overlay .sv-list__filter {
3182
3131
  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -3189,16 +3138,13 @@ sv-popup {
3189
3138
  .sv-popup--dropdown .sv-list__filter {
3190
3139
  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3191
3140
  }
3192
- .sv-popup--dropdown .sv-popup__shadow {
3193
- box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
3194
- }
3195
3141
  .sv-popup--dropdown .sv-popup__body-content {
3196
3142
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
3197
3143
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
3198
3144
  height: 100%;
3199
3145
  }
3200
3146
 
3201
- .sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-list {
3147
+ .sv-popup--dropdown > .sv-popup__container > .sv-popup__body-content .sv-list {
3202
3148
  background-color: transparent;
3203
3149
  }
3204
3150
 
@@ -3211,6 +3157,7 @@ sv-popup {
3211
3157
 
3212
3158
  .sv-popup--overlay .sv-popup__body-content {
3213
3159
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3160
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3214
3161
  }
3215
3162
 
3216
3163
  .sv-popup--dropdown-overlay {
@@ -3231,7 +3178,6 @@ sv-popup {
3231
3178
  box-shadow: none;
3232
3179
  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3233
3180
  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3234
- margin: 0;
3235
3181
  }
3236
3182
  .sv-popup--dropdown-overlay .sv-popup__container {
3237
3183
  max-height: calc(var(--sv-popup-overlay-height, 100vh));
@@ -3240,10 +3186,10 @@ sv-popup {
3240
3186
  }
3241
3187
  .sv-popup--dropdown-overlay .sv-popup__body-content {
3242
3188
  height: calc(var(--sv-popup-overlay-height, 100vh));
3189
+ gap: 0;
3243
3190
  }
3244
3191
  .sv-popup--dropdown-overlay .sv-popup__body-footer {
3245
3192
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3246
- margin-top: 0;
3247
3193
  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
3248
3194
  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3249
3195
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
@@ -3372,7 +3318,7 @@ sv-popup {
3372
3318
  max-width: var(--sv-popup-overlay-max-width);
3373
3319
  border-radius: var(--sjs-corner-radius, 4px);
3374
3320
  overflow: hidden;
3375
- margin: 0;
3321
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
3376
3322
  }
3377
3323
  .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__content,
3378
3324
  .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__scrolling-content,