survey-react 1.9.122 → 1.9.123

package/README.md

@@ -1,7 +1,7 @@
 # SurveyJS Form Library for React
 
 
-https://github.com/surveyjs/survey-library/assets/22315929/525f2ba6-21e8-4e82-a836-887fb2be4af3
+<video src="https://github.com/surveyjs/survey-library/assets/22315929/b24a68bf-d703-4096-835b-752f5f610aa6"></video>
 
 
 SurveyJS Form Library is a free and open-source MIT-licensed JavaScript form builder library that allows you to design dynamic, data-driven, multi-language survey forms and run them in your web applications.

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.122
+ * surveyjs - Survey JavaScript library v1.9.123
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1880,6 +1880,14 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
 }
 
+.sd-question--left > .sd-element__erbox--above-element {
+  margin-bottom: 0;
+}
+
+.sd-element--with-frame.sd-question--left > .sd-element__erbox--above-element {
+  margin-bottom: calc(1 * var(--sd-base-vertical-padding));
+}
+
 .sd-element--with-frame > .sd-question__erbox--below-question {
   margin-top: auto;
   border-radius: 0 0 var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px);
@@ -1932,7 +1940,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-question__header--location--left {
   display: inline-block;
   width: auto;
-  max-width: 50%;
   vertical-align: top;
   margin-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -1941,12 +1948,18 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
+  column-gap: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  row-gap: calc(0.25 * var(--sd-base-vertical-padding));
 }
 
 .sd-question__content--left {
   display: inline-block;
-  padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   flex: 1;
+  margin-top: calc(0.25 * var(--sd-base-vertical-padding)) 0;
+}
+
+.sd-element--with-frame > .sd-question__content--left {
+  margin: 0;
 }
 
 .sd-question__required-text {
@@ -2132,10 +2145,14 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
   font-size: var(--sjs-internal-font-editorfont-size);
   background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
-  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border: none;
   border-radius: var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px));
   text-align: start;
+  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+
+.sd-input:focus {
+  box-shadow: var(--sjs-shadow-inner-reset, inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-input.sd-input:focus {
@@ -2174,10 +2191,6 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
-.sd-input:focus {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
-}
-
 .sd-input--error {
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
 }
@@ -2406,14 +2419,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-checkbox__svg {
-  display: none;
+  display: block;
   width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-
-.sd-checkbox--checked .sd-checkbox__svg {
-  display: block;
+.sd-checkbox__svg use {
+  fill: transparent;
 }
+
 .sd-checkbox--checked .sd-checkbox__svg use {
   fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
@@ -3000,7 +3013,6 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   flex-direction: row;
   white-space: normal;
-  word-break: break-word;
 }
 
 .sd-title.sd-container-modern__title {
@@ -3101,7 +3113,6 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   font-size: var(--sjs-font-questiondescription-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-questiondescription-size, var(--sjs-font-size, 16px))));
   white-space: normal;
-  word-break: break-word;
 }
 
 .sd-description.sd-question__description--under-input {
@@ -3126,10 +3137,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
-  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border: none;
   flex-shrink: 0;
   margin-top: calc((1.5 * (var(--sjs-internal-font-editorfont-size)) - 3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
+  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-item--checked .sd-item__decorator {
@@ -3137,9 +3148,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-item__control:focus + .sd-item__decorator {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
   background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
   outline: none;
+  box-shadow: var(--sjs-shadow-inner-reset, inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator {
@@ -3160,7 +3171,6 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   font-size: var(--sjs-internal-font-editorfont-size);
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   white-space: normal;
-  word-break: break-word;
   width: 100%;
   text-align: left;
 }
@@ -3214,7 +3224,6 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-selectbase__column {
   display: block;
   box-sizing: border-box;
-  word-break: break-word;
   flex: 1 1 0px;
 }
 
@@ -3231,14 +3240,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-checkbox__svg {
-  display: none;
+  display: block;
   width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-
-.sd-checkbox--checked .sd-checkbox__svg {
-  display: block;
+.sd-checkbox__svg use {
+  fill: transparent;
 }
+
 .sd-checkbox--checked .sd-checkbox__svg use {
   fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
@@ -3254,6 +3263,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-radio__decorator {
   border-radius: 50%;
 }
+.sd-radio__decorator:after {
+  content: " ";
+  display: block;
+  width: var(--sjs-base-unit, var(--base-unit, 8px));
+  height: var(--sjs-base-unit, var(--base-unit, 8px));
+  border-radius: 50%;
+  background-color: transparent;
+}
 
 .sd-radio--checked .sd-radio__decorator:after {
   content: " ";
@@ -4363,7 +4380,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-question__content--left .sd-expression {
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
 
 .sd-progress {
@@ -4797,8 +4814,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-sizing: border-box;
   justify-content: center;
   align-items: center;
-  padding: 0 calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
+  container-type: inline-size;
+}
+
+.sd-file--answered .sd-file__decorator {
+  container-type: unset;
 }
 
 .sd-file__decorator--drag {
@@ -4815,13 +4836,35 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file__drag-area-placeholder {
   --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   text-align: center;
-  word-break: break-word;
   white-space: normal;
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   font-size: var(--sjs-internal-font-editorfont-size);
   line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
+  padding: 0 calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+@container (max-width: 496px) {
+  .sd-file__drag-area-placeholder {
+    padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
+  }
+}
+@container (max-width: 176px) {
+  .sd-file__drag-area-placeholder {
+    display: none;
+  }
+  .sd-file__decorator .sd-action {
+    padding: var(--sjs-base-unit, var(--base-unit, 8px));
+  }
+  .sd-file__decorator .sd-action .sv-svg-icon {
+    margin-left: 0;
+  }
+  .sd-file__decorator .sd-file__actions-container {
+    flex-direction: column;
+  }
+  .sd-file__decorator .sd-file__actions-container span {
+    display: none;
+  }
+}
 .sd-root-modern--mobile .sd-file__decorator {
   padding: 0 calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -4845,6 +4888,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-file__wrapper {
   width: max-content;
+  max-width: 100%;
 }
 
 .sd-question--answered .sd-file__drag-area-placeholder {
@@ -4853,6 +4897,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-file__actions-container {
   margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  flex-wrap: wrap;
+  justify-content: center;
 }
 .sd-file__actions-container .sv-action--hidden {
   display: none;
@@ -5466,7 +5512,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   max-width: 30%;
   padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
-  word-break: break-word;
   white-space: normal;
   color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }