survey-react 1.9.137 → 1.9.138

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.137
+ * surveyjs - Survey JavaScript library v1.9.138
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1996,6 +1996,17 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
     height: var(--animation-height);
   }
 }
+@keyframes overflowIn {
+  0% {
+    overflow: hidden;
+  }
+  99% {
+    overflow: hidden;
+  }
+  100% {
+    overflow: visible;
+  }
+}
 .sd-element {
   padding-left: var(--sv-element-add-padding-left, 0px);
   padding-right: var(--sv-element-add-padding-right, 0px);
@@ -2158,8 +2169,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   animation-name: elementMoveIn, fadeIn;
   animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
   animation-fill-mode: forwards;
-  animation-duration: var(--sjs-element-move-in-duration, 250ms), var(--sjs-element-fade-in-duration, 250ms);
-  animation-delay: 0s, var(--sjs-element-fade-in-delay, 0ms);
+  animation-duration: var(--sjs-element-move-in-duration, 250ms), var(--sjs-element-fade-in-duration, 500ms);
+  animation-delay: 0s, var(--sjs-element-fade-in-delay, 100ms);
   opacity: 0;
 }
 
@@ -2168,15 +2179,17 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
   animation-fill-mode: forwards;
   animation-direction: reverse;
-  animation-duration: var(--sjs-element-move-out-duration, 250ms), var(--sjs-element-fade-out-duration, 100ms);
+  animation-duration: var(--sjs-element-move-out-duration, 250ms), var(--sjs-element-fade-out-duration, 150ms);
   animation-delay: var(--sjs-element-move-out-delay, 0ms), 0s;
 }
 
 @keyframes paddingFadeIn {
   from {
     padding-top: 0;
+    padding-bottom: 0;
   }
   to {
+    padding-bottom: var(--animation-padding-bottom);
     padding-top: var(--animation-padding-top);
   }
 }
@@ -2184,24 +2197,30 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-sizing: border-box;
 }
 
+.sd-element__content--fade-in,
+.sd-element__content--fade-out {
+  --animation-padding-top: 0;
+  --animation-padding-bottom: 0;
+}
+
 .sd-element__content--fade-in {
-  animation-name: fadeIn, moveIn, paddingFadeIn;
+  animation-name: fadeIn, moveIn, paddingFadeIn, overflowIn;
   min-height: 0 !important;
   opacity: 0;
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
-  animation-duration: var(--sjs-expand-fade-in-duration, 100ms), var(--sjs-expand-move-in-duration, 200ms), var(--sjs-expand-move-in-duration, 200ms);
-  animation-delay: var(--sjs-collapse-fade-in-delay, 150ms), 0s, 0s;
+  animation-duration: var(--sjs-expand-fade-in-duration, 500ms), var(--sjs-expand-move-in-duration, 150ms), var(--sjs-expand-move-in-duration, 150ms), var(--sjs-expand-move-in-duration, 150ms);
+  animation-delay: var(--sjs-expand-fade-in-delay, 150ms), 0s, 0s, 0s;
 }
 
 .sd-element__content--fade-out {
-  animation-name: fadeIn, moveIn, paddingFadeIn;
+  animation-name: fadeIn, moveIn, paddingFadeIn, overflowIn;
   min-height: 0 !important;
   animation-direction: reverse;
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
-  animation-duration: var(--sjs-collapse-fade-out-duration, 100ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-collapse-move-out-duration, 250ms);
-  animation-delay: 0s, var(--sjs-collapse-move-out-delay, 0ms), var(--sjs-collapse-move-out-delay, 0ms);
+  animation-duration: var(--sjs-collapse-fade-out-duration, 150ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-expand-move-in-duration, 150ms);
+  animation-delay: 0s, var(--sjs-collapse-move-out-delay, 100ms), var(--sjs-collapse-move-out-delay, 100ms), var(--sjs-collapse-move-out-delay, 100ms);
 }
 
 .sd-element--expandable.sd-elemenet--expandable--animating > .sd-element__header:focus-within, .sd-element--expandable.sd-elemenet--expandable--animating > .sd-element__header:hover {
@@ -2216,28 +2235,28 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--expanded {
   transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
-  transition-duration: var(--sjs-expand-move-in-duration, 200ms);
+  transition-duration: var(--sjs-expand-move-in-duration, 150ms);
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--expanded > .sd-element__header {
   transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
-  transition-duration: var(--sjs-expand-move-in-duration, 200ms);
+  transition-duration: var(--sjs-expand-move-in-duration, 150ms);
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--expanded > .sd-element__header .sd-element__title:before {
-  transition-duration: var(--sjs-expand-move-in-duration, 200ms);
+  transition-duration: var(--sjs-expand-move-in-duration, 150ms);
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--collapsed {
   transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
   transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
-  transition-delay: var(--sjs-collapse-move-out-delay, 0ms);
+  transition-delay: var(--sjs-collapse-move-out-delay, 100ms);
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--collapsed > .sd-element__header {
   transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
   transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
-  transition-delay: var(--sjs-collapse-move-out-delay, 0ms);
+  transition-delay: var(--sjs-collapse-move-out-delay, 100ms);
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--collapsed > .sd-element__header .sd-element__title:before {
   transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
-  transition-delay: var(--sjs-collapse-move-out-delay, 0ms);
+  transition-delay: var(--sjs-collapse-move-out-delay, 100ms);
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--complex > .sd-element__header--location-top:after {
   display: block;
@@ -2783,6 +2802,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-panel.sd-element--nested > .sd-panel__content {
   padding-bottom: var(--sd-base-padding);
+  --animation-padding-top: var(--sd-base-padding);
 }
 
 .sd-panel__content {
@@ -3433,7 +3453,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-row--multiple > div {
   box-sizing: border-box;
-  --animation-padding-left: calcSize(2);
+  --animation-padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
   align-items: stretch;
@@ -3484,22 +3504,22 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-row--fade-in {
   animation-fill-mode: forwards;
-  animation-name: fadeIn, moveIn, marginFadeIn;
+  animation-name: fadeIn, moveIn, marginFadeIn, overflowIn;
   min-height: 0 !important;
   opacity: 0;
   animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
-  animation-delay: var(--sjs-row-fade-in-delay, 150ms), 0s, 0s;
-  animation-duration: var(--sjs-row-fade-in-duration, 100ms), var(--sjs-row-move-in-duration, 200ms), var(--sjs-row-move-in-duration, 200ms);
+  animation-delay: var(--sjs-row-fade-in-delay, 150ms), 0s, 0s, 0s;
+  animation-duration: var(--sjs-row-fade-in-duration, 500ms), var(--sjs-row-move-in-duration, 150ms), var(--sjs-row-move-in-duration, 150ms), var(--sjs-row-move-in-duration, 150ms);
 }
 
 .sd-row--fade-out {
-  animation-name: fadeIn, moveIn, marginFadeIn;
+  animation-name: fadeIn, moveIn, marginFadeIn, overflowIn;
   animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
   animation-fill-mode: forwards;
   animation-direction: reverse;
   min-height: 0 !important;
-  animation-delay: 0s, var(--sjs-row-move-out-delay, 0ms), var(--sjs-row-move-out-delay, 0ms);
-  animation-duration: var(--sjs-row-fade-out-duration, 100ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms);
+  animation-delay: 0s, var(--sjs-row-move-out-delay, 100ms), var(--sjs-row-move-out-delay, 100ms), var(--sjs-row-move-out-delay, 100ms);
+  animation-duration: var(--sjs-row-fade-out-duration, 150ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms);
 }
 
 .sd-row--fade-in .sd-element-wrapper--fade-in {