@micromag/screen-quiz 0.3.360 → 0.3.362

package/assets/css/styles.css

@@ -1,4 +1,4 @@
-.micromag-screen-quiz-answers-emptyAnswer{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{font-size:.75em;height:40px;margin:0 auto;width:100%}.micromag-screen-quiz-answers-item{position:relative;-webkit-transition:opacity .15s ease-out;-o-transition:opacity .15s ease-out;transition:opacity .15s ease-out}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:1!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-otherAnswer{opacity:.7!important}.micromag-screen-quiz-answers-button{color:#fff;padding:10px;position:relative;width:100%}.micromag-screen-quiz-answers-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-answers-withIcon .micromag-screen-quiz-answers-button{padding-left:42px;padding-right:42px}.micromag-screen-quiz-answers-resultIcon{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:#ff2945;border:2px solid #1c1c1c;border-radius:50%;display:-ms-flexbox;display:flex;height:32px;justify-content:center;left:5px;margin-top:-16px;opacity:0;padding:5px;position:absolute;top:50%;-webkit-transition:opacity .15s ease;-o-transition:opacity .15s ease;transition:opacity .15s ease;width:32px}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-resultIcon{opacity:1}.micromag-screen-quiz-answers-rightAnswer .micromag-screen-quiz-answers-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-answers-resultIcon .micromag-screen-quiz-answers-faIcon{display:block}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
+.micromag-screen-quiz-answers-emptyAnswer{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{font-size:.75em;height:40px;margin:0 auto;width:100%}.micromag-screen-quiz-answers-item{margin:0;padding:0;position:relative;-webkit-transition:opacity .15s ease-out;-o-transition:opacity .15s ease-out;transition:opacity .15s ease-out}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:1!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-otherAnswer{opacity:.7!important}.micromag-screen-quiz-answers-button{color:#fff;padding:10px;position:relative;width:100%}.micromag-screen-quiz-answers-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-answers-withIcon .micromag-screen-quiz-answers-button{padding-left:42px;padding-right:42px}.micromag-screen-quiz-answers-resultIcon{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:#ff2945;border:2px solid #1c1c1c;border-radius:50%;display:-ms-flexbox;display:flex;height:32px;justify-content:center;left:5px;margin-top:-16px;opacity:0;padding:5px;position:absolute;top:50%;-webkit-transition:opacity .15s ease;-o-transition:opacity .15s ease;transition:opacity .15s ease;width:32px}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-resultIcon{opacity:1}.micromag-screen-quiz-answers-rightAnswer .micromag-screen-quiz-answers-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-answers-resultIcon .micromag-screen-quiz-answers-faIcon{display:block}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
 .micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-question{margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-index{display:block;margin-bottom:1em;text-align:center;width:100%}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-result{opacity:0;pointer-events:none;position:absolute;-webkit-transition:opacity .5s ease;-o-transition:opacity .5s ease;transition:opacity .5s ease;-webkit-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-resultContent{padding:20px 0}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{margin:0 auto;width:100%}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion{height:60px;margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{height:100px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-resultVisible .micromag-screen-quiz-question-result{opacity:1;pointer-events:all;position:relative}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder{padding:10px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder .micromag-screen-quiz-question-index{color:hsla(0,0%,100%,.6);font-size:8px;mix-blend-mode:difference}
 .micromag-screen-quiz-container .micromag-screen-quiz-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-quiz-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{padding:6px;position:relative}.micromag-screen-quiz-container .micromag-screen-quiz-background{z-index:0}.micromag-screen-quiz-container .micromag-screen-quiz-content{z-index:2}.micromag-screen-quiz-container.micromag-screen-quiz-disabled{pointer-events:none}.micromag-screen-quiz-reset{border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;-o-transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.micromag-screen-quiz-reset:hover{border:0;opacity:.8}.micromag-screen-quiz-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.micromag-screen-quiz-points{color:#fff;left:0;padding:10px;position:absolute;top:0;z-index:1000}.micromag-screen-quiz-layout{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-header.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-footer a{padding:0}.micromag-screen-quiz-footer.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-transition{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-intro,.micromag-screen-quiz-question,.micromag-screen-quiz-results{overflow:hidden}.micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enterActive,.micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-results.micromag-screen-quiz-enterActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-intro.micromag-screen-quiz-exit,.micromag-screen-quiz-question.micromag-screen-quiz-exit,.micromag-screen-quiz-results.micromag-screen-quiz-exit{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-results.micromag-screen-quiz-exitActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-background.micromag-screen-quiz-enter{opacity:0}.micromag-screen-quiz-background.micromag-screen-quiz-enterActive{opacity:1;-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;z-index:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{opacity:0;-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;z-index:0}
 .micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-title{margin-bottom:10px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{margin:0 auto;width:100%}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{height:60px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription{height:100px}.micromag-screen-quiz-results-container.micromag-screen-quiz-results-isPlaceholder{padding:10px}

package/es/index.js

@@ -42,6 +42,7 @@ var propTypes$5 = {
   withoutGoodAnswer: PropTypes$1.bool,
   withoutIcon: PropTypes$1.bool,
   focusable: PropTypes$1.bool,
+  animated: PropTypes$1.bool,
   collapsed: PropTypes$1.bool,
   onClick: PropTypes$1.func,
   onCollapse: PropTypes$1.func,
@@ -60,6 +61,7 @@ var defaultProps$5 = {
   withoutGoodAnswer: false,
   withoutIcon: false,
   focusable: false,
+  animated: false,
   collapsed: false,
   onClick: null,
   onCollapse: null,
@@ -68,7 +70,7 @@ var defaultProps$5 = {
   className: null
 };
 var Answers = function Answers(_ref) {
-  var _ref7;
+  var _ref8;
   var items = _ref.items,
     answeredIndex = _ref.answeredIndex,
     answersCollapseDelay = _ref.answersCollapseDelay,
@@ -80,6 +82,7 @@ var Answers = function Answers(_ref) {
     withoutGoodAnswer = _ref.withoutGoodAnswer,
     withoutIcon = _ref.withoutIcon,
     focusable = _ref.focusable,
+    collapseAnimated = _ref.animated,
     initialCollapsed = _ref.collapsed,
     onClick = _ref.onClick,
     onCollapse = _ref.onCollapse,
@@ -145,24 +148,25 @@ var Answers = function Answers(_ref) {
   }, [shouldCollapse, answersCollapsed, answersDidCollapse, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
   var itemsRefs = useRef([]);
   var listOfItems = isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items;
-
-  // let total = 0;
-  // const heights = listOfItems.reduce((acc, it, i) => {
-  //     acc.push(total);
-  //     if (itemsRefs.current[i]) {
-  //         const { height } = itemsRefs.current[i].getBoundingClientRect() || {};
-  //         total += height;
-  //     }
-  //     return acc;
-  // }, []);
-
+  var heights = useMemo(function () {
+    var allHeights = listOfItems.reduce(function (acc, it, i) {
+      if (itemsRefs.current[i] && collapseAnimated) {
+        var _ref4 = itemsRefs.current[i].getBoundingClientRect() || {},
+          _ref4$height = _ref4.height,
+          height = _ref4$height === void 0 ? 0 : _ref4$height;
+        acc.push(height);
+      }
+      return acc;
+    }, []);
+    return allHeights;
+  }, [answeredIndex, shouldCollapse, collapseAnimated, listOfItems]);
   var showAnimation = isView || isEdit;
   var filteredListOfItems = listOfItems.map(function (answer, answerI) {
-    // const y = heights[answerI] ? heights[answerI] : 0;
+    var height = heights[answerI] ? heights[answerI] : 0;
     var userAnswer = answerI === answeredIndex;
-    var _ref4 = answer || {},
-      _ref4$good = _ref4.good,
-      rightAnswer = _ref4$good === void 0 ? false : _ref4$good;
+    var _ref5 = answer || {},
+      _ref5$good = _ref5.good,
+      rightAnswer = _ref5$good === void 0 ? false : _ref5$good;
     var hidden = false;
     if (answeredIndex !== null && showAnimation && answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
       hidden = true;
@@ -173,71 +177,62 @@ var Answers = function Answers(_ref) {
     return _objectSpread(_objectSpread({}, answer), {}, {
       hidden: hidden,
       userAnswer: userAnswer,
-      index: answerI
+      index: answerI,
+      maxHeight: height
     });
   });
-
-  // let finalList = filteredListOfItems;
-  // if (answersCollapsed) {
-  //     finalList = [...filteredListOfItems].sort(({ hidden = false }) => (hidden ? 1 : -1));
-  //     console.log('da fuck', finalList);
-  // }
-
-  var transitions = useTransition(filteredListOfItems.map(function (data) {
-    return _objectSpread(_objectSpread({}, data), {}, {
-      hidden: data.hidden
-    });
-  }), {
-    key: function key(_ref5) {
-      var _ref5$index = _ref5.index,
-        index = _ref5$index === void 0 ? 0 : _ref5$index,
-        _ref5$label = _ref5.label,
-        label = _ref5$label === void 0 ? null : _ref5$label;
+  var transitions = useTransition(filteredListOfItems, {
+    key: function key(_ref6) {
+      var _ref6$index = _ref6.index,
+        index = _ref6$index === void 0 ? 0 : _ref6$index,
+        _ref6$label = _ref6.label,
+        label = _ref6$label === void 0 ? null : _ref6$label;
       return "key-".concat(index, "-").concat((label === null || label === void 0 ? void 0 : label.body) || null);
     },
-    update: function update(_ref6) {
-      var _ref6$hidden = _ref6.hidden,
-        hidden = _ref6$hidden === void 0 ? false : _ref6$hidden;
+    update: function update(_ref7) {
+      var _ref7$hidden = _ref7.hidden,
+        hidden = _ref7$hidden === void 0 ? false : _ref7$hidden,
+        _ref7$maxHeight = _ref7.maxHeight,
+        maxHeight = _ref7$maxHeight === void 0 ? 0 : _ref7$maxHeight;
       return {
         opacity: hidden && showAnimation && !withoutGoodAnswer ? 0 : 1,
-        height: hidden && showAnimation && !withoutGoodAnswer ? 0 : 'auto'
+        // Animate this, not height
+        maxHeight:
+        // eslint-disable-next-line no-nested-ternary
+        hidden && showAnimation && !withoutGoodAnswer ? 0 : maxHeight > 0 ? maxHeight : null
       };
     },
     config: config.gentle
-    // onRest: () => {
-    //     console.log('rest');
-    // },
   });
-
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, (_ref7 = {}, _defineProperty(_ref7, styles$4.answered, answered), _defineProperty(_ref7, styles$4.withIcon, !withoutIcon), _defineProperty(_ref7, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref7, className, className !== null), _ref7)])
+    className: classNames([styles$4.container, (_ref8 = {}, _defineProperty(_ref8, styles$4.answered, answered), _defineProperty(_ref8, styles$4.withIcon, !withoutIcon), _defineProperty(_ref8, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref8, className, className !== null), _ref8)])
   }, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
     className: styles$4.items
   }, transitions(function (style, answer, t, answerI) {
-    var _ref10;
+    var _ref11;
     var userAnswer = answerI === answeredIndex;
-    var _ref8 = answer || {},
-      _ref8$good = _ref8.good,
-      rightAnswer = _ref8$good === void 0 ? null : _ref8$good,
-      _ref8$label = _ref8.label,
-      label = _ref8$label === void 0 ? null : _ref8$label,
-      _ref8$buttonStyle = _ref8.buttonStyle,
-      answerButtonStyle = _ref8$buttonStyle === void 0 ? null : _ref8$buttonStyle,
-      _ref8$textStyle = _ref8.textStyle,
-      answerButtonTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
-    var _ref9 = label || {},
+    var _ref9 = answer || {},
+      _ref9$good = _ref9.good,
+      rightAnswer = _ref9$good === void 0 ? null : _ref9$good,
+      _ref9$label = _ref9.label,
+      label = _ref9$label === void 0 ? null : _ref9$label,
+      _ref9$buttonStyle = _ref9.buttonStyle,
+      answerButtonStyle = _ref9$buttonStyle === void 0 ? null : _ref9$buttonStyle,
       _ref9$textStyle = _ref9.textStyle,
-      textStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
+      answerButtonTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
+    var _ref10 = label || {},
+      _ref10$textStyle = _ref10.textStyle,
+      textStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
     var hasAnswer = isTextFilled(label);
     return /*#__PURE__*/React.createElement(animated.div, {
       key: "answer-".concat(answerI),
-      className: classNames([styles$4.item, (_ref10 = {}, _defineProperty(_ref10, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), _defineProperty(_ref10, styles$4.userAnswer, withoutGoodAnswer && userAnswer), _defineProperty(_ref10, styles$4.otherAnswer, withoutGoodAnswer && !userAnswer), _ref10)]),
-      style: _objectSpread({}, style),
+      className: classNames([styles$4.item, (_ref11 = {}, _defineProperty(_ref11, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), _defineProperty(_ref11, styles$4.userAnswer, withoutGoodAnswer && userAnswer), _defineProperty(_ref11, styles$4.otherAnswer, withoutGoodAnswer && !userAnswer), _ref11)]),
+      style: _objectSpread({}, style)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$4.itemContent,
       ref: function ref(el) {
         itemsRefs.current[answerI] = el;
       }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles$4.itemContent
     }, /*#__PURE__*/React.createElement(ScreenElement, {
       placeholder: "quizAnswer",
       placeholderProps: {
@@ -303,6 +298,7 @@ var propTypes$4 = {
   goodAnswerColor: PropTypes.color,
   badAnswerColor: PropTypes.color,
   focusable: PropTypes$1.bool,
+  animated: PropTypes$1.bool,
   layout: PropTypes$1.string,
   showInstantAnswer: PropTypes$1.bool,
   withResult: PropTypes$1.bool,
@@ -331,6 +327,7 @@ var defaultProps$4 = {
   goodAnswerColor: null,
   badAnswerColor: null,
   focusable: false,
+  animated: false,
   layout: null,
   showInstantAnswer: false,
   withResult: false,
@@ -360,6 +357,7 @@ var Question = function Question(_ref) {
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     focusable = _ref.focusable,
+    animated = _ref.animated,
     showInstantAnswer = _ref.showInstantAnswer,
     withResult = _ref.withResult,
     withoutGoodAnswer = _ref.withoutGoodAnswer,
@@ -446,6 +444,7 @@ var Question = function Question(_ref) {
     buttonsStyle: buttonsStyle,
     buttonsTextStyle: buttonsTextStyle,
     focusable: focusable,
+    animated: animated,
     transitions: transitions,
     transitionStagger: transitionStagger,
     transitionPlaying: transitionPlaying,
@@ -695,11 +694,11 @@ var QuizScreen = function QuizScreen(_ref) {
     className: classNames([styles$2.header, _defineProperty({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
     ref: headerRef,
     style: {
-      paddingTop: spacing,
+      paddingTop: spacing / 2,
       paddingLeft: spacing,
       paddingRight: spacing,
       paddingBottom: spacing,
-      transform: current && !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
+      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
     }
   }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Question, {
     question: question,
@@ -713,6 +712,7 @@ var QuizScreen = function QuizScreen(_ref) {
     withoutTrueFalse: withoutTrueFalse,
     withoutGoodAnswer: withoutGoodAnswer,
     focusable: current && isView,
+    animated: isView,
     showInstantAnswer: showInstantAnswer,
     withResult: true,
     layout: layout,
@@ -724,7 +724,7 @@ var QuizScreen = function QuizScreen(_ref) {
     className: styles$2.question,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
     } : null
   })), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
@@ -1118,7 +1118,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     _useDimensionObserver2 = _useDimensionObserver.height,
     headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
   var _useDimensionObserver3 = useDimensionObserver(),
-    callToActionRef = _useDimensionObserver3.ref,
+    footerRef = _useDimensionObserver3.ref,
     _useDimensionObserver4 = _useDimensionObserver3.height,
     callToActionHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
   var showInstantAnswer = isStatic || isCapture;
@@ -1345,11 +1345,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     className: classNames([styles$2.header, _defineProperty({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
     ref: headerRef,
     style: {
-      paddingTop: spacing,
+      paddingTop: spacing / 2,
       paddingLeft: spacing,
       paddingRight: spacing,
       paddingBottom: spacing,
-      transform: current && !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
+      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
     }
   }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Scroll, {
     verticalAlign: verticalAlign,
@@ -1431,14 +1431,14 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
     } : null
   }))) : null])), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    ref: callToActionRef,
+    ref: footerRef,
     className: classNames([styles$2.footer, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
     style: {
-      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
       paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
       paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
       paddingTop: spacing / 2,
-      paddingBottom: spacing / 2
+      paddingBottom: spacing / 2,
+      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
     }
   }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(TransitionGroup, null, /*#__PURE__*/React.createElement(CSSTransition, {
     key: backgroundKey,

package/lib/index.js

@@ -65,6 +65,7 @@ var propTypes$5 = {
   withoutGoodAnswer: PropTypes__default["default"].bool,
   withoutIcon: PropTypes__default["default"].bool,
   focusable: PropTypes__default["default"].bool,
+  animated: PropTypes__default["default"].bool,
   collapsed: PropTypes__default["default"].bool,
   onClick: PropTypes__default["default"].func,
   onCollapse: PropTypes__default["default"].func,
@@ -83,6 +84,7 @@ var defaultProps$5 = {
   withoutGoodAnswer: false,
   withoutIcon: false,
   focusable: false,
+  animated: false,
   collapsed: false,
   onClick: null,
   onCollapse: null,
@@ -91,7 +93,7 @@ var defaultProps$5 = {
   className: null
 };
 var Answers = function Answers(_ref) {
-  var _ref7;
+  var _ref8;
   var items = _ref.items,
     answeredIndex = _ref.answeredIndex,
     answersCollapseDelay = _ref.answersCollapseDelay,
@@ -103,6 +105,7 @@ var Answers = function Answers(_ref) {
     withoutGoodAnswer = _ref.withoutGoodAnswer,
     withoutIcon = _ref.withoutIcon,
     focusable = _ref.focusable,
+    collapseAnimated = _ref.animated,
     initialCollapsed = _ref.collapsed,
     onClick = _ref.onClick,
     onCollapse = _ref.onCollapse,
@@ -168,24 +171,25 @@ var Answers = function Answers(_ref) {
   }, [shouldCollapse, answersCollapsed, answersDidCollapse, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
   var itemsRefs = React.useRef([]);
   var listOfItems = isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray__default["default"](new Array(2)) : items;
-
-  // let total = 0;
-  // const heights = listOfItems.reduce((acc, it, i) => {
-  //     acc.push(total);
-  //     if (itemsRefs.current[i]) {
-  //         const { height } = itemsRefs.current[i].getBoundingClientRect() || {};
-  //         total += height;
-  //     }
-  //     return acc;
-  // }, []);
-
+  var heights = React.useMemo(function () {
+    var allHeights = listOfItems.reduce(function (acc, it, i) {
+      if (itemsRefs.current[i] && collapseAnimated) {
+        var _ref4 = itemsRefs.current[i].getBoundingClientRect() || {},
+          _ref4$height = _ref4.height,
+          height = _ref4$height === void 0 ? 0 : _ref4$height;
+        acc.push(height);
+      }
+      return acc;
+    }, []);
+    return allHeights;
+  }, [answeredIndex, shouldCollapse, collapseAnimated, listOfItems]);
   var showAnimation = isView || isEdit;
   var filteredListOfItems = listOfItems.map(function (answer, answerI) {
-    // const y = heights[answerI] ? heights[answerI] : 0;
+    var height = heights[answerI] ? heights[answerI] : 0;
     var userAnswer = answerI === answeredIndex;
-    var _ref4 = answer || {},
-      _ref4$good = _ref4.good,
-      rightAnswer = _ref4$good === void 0 ? false : _ref4$good;
+    var _ref5 = answer || {},
+      _ref5$good = _ref5.good,
+      rightAnswer = _ref5$good === void 0 ? false : _ref5$good;
     var hidden = false;
     if (answeredIndex !== null && showAnimation && answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
       hidden = true;
@@ -196,71 +200,62 @@ var Answers = function Answers(_ref) {
     return _objectSpread__default["default"](_objectSpread__default["default"]({}, answer), {}, {
       hidden: hidden,
       userAnswer: userAnswer,
-      index: answerI
+      index: answerI,
+      maxHeight: height
     });
   });
-
-  // let finalList = filteredListOfItems;
-  // if (answersCollapsed) {
-  //     finalList = [...filteredListOfItems].sort(({ hidden = false }) => (hidden ? 1 : -1));
-  //     console.log('da fuck', finalList);
-  // }
-
-  var transitions = web.useTransition(filteredListOfItems.map(function (data) {
-    return _objectSpread__default["default"](_objectSpread__default["default"]({}, data), {}, {
-      hidden: data.hidden
-    });
-  }), {
-    key: function key(_ref5) {
-      var _ref5$index = _ref5.index,
-        index = _ref5$index === void 0 ? 0 : _ref5$index,
-        _ref5$label = _ref5.label,
-        label = _ref5$label === void 0 ? null : _ref5$label;
+  var transitions = web.useTransition(filteredListOfItems, {
+    key: function key(_ref6) {
+      var _ref6$index = _ref6.index,
+        index = _ref6$index === void 0 ? 0 : _ref6$index,
+        _ref6$label = _ref6.label,
+        label = _ref6$label === void 0 ? null : _ref6$label;
       return "key-".concat(index, "-").concat((label === null || label === void 0 ? void 0 : label.body) || null);
     },
-    update: function update(_ref6) {
-      var _ref6$hidden = _ref6.hidden,
-        hidden = _ref6$hidden === void 0 ? false : _ref6$hidden;
+    update: function update(_ref7) {
+      var _ref7$hidden = _ref7.hidden,
+        hidden = _ref7$hidden === void 0 ? false : _ref7$hidden,
+        _ref7$maxHeight = _ref7.maxHeight,
+        maxHeight = _ref7$maxHeight === void 0 ? 0 : _ref7$maxHeight;
       return {
         opacity: hidden && showAnimation && !withoutGoodAnswer ? 0 : 1,
-        height: hidden && showAnimation && !withoutGoodAnswer ? 0 : 'auto'
+        // Animate this, not height
+        maxHeight:
+        // eslint-disable-next-line no-nested-ternary
+        hidden && showAnimation && !withoutGoodAnswer ? 0 : maxHeight > 0 ? maxHeight : null
       };
     },
     config: web.config.gentle
-    // onRest: () => {
-    //     console.log('rest');
-    // },
   });
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$4.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, styles$4.answered, answered), _defineProperty__default["default"](_ref7, styles$4.withIcon, !withoutIcon), _defineProperty__default["default"](_ref7, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref7, className, className !== null), _ref7)])
+    className: classNames__default["default"]([styles$4.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$4.answered, answered), _defineProperty__default["default"](_ref8, styles$4.withIcon, !withoutIcon), _defineProperty__default["default"](_ref8, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref8, className, className !== null), _ref8)])
   }, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$4.items
   }, transitions(function (style, answer, t, answerI) {
-    var _ref10;
+    var _ref11;
     var userAnswer = answerI === answeredIndex;
-    var _ref8 = answer || {},
-      _ref8$good = _ref8.good,
-      rightAnswer = _ref8$good === void 0 ? null : _ref8$good,
-      _ref8$label = _ref8.label,
-      label = _ref8$label === void 0 ? null : _ref8$label,
-      _ref8$buttonStyle = _ref8.buttonStyle,
-      answerButtonStyle = _ref8$buttonStyle === void 0 ? null : _ref8$buttonStyle,
-      _ref8$textStyle = _ref8.textStyle,
-      answerButtonTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
-    var _ref9 = label || {},
+    var _ref9 = answer || {},
+      _ref9$good = _ref9.good,
+      rightAnswer = _ref9$good === void 0 ? null : _ref9$good,
+      _ref9$label = _ref9.label,
+      label = _ref9$label === void 0 ? null : _ref9$label,
+      _ref9$buttonStyle = _ref9.buttonStyle,
+      answerButtonStyle = _ref9$buttonStyle === void 0 ? null : _ref9$buttonStyle,
       _ref9$textStyle = _ref9.textStyle,
-      textStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
+      answerButtonTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
+    var _ref10 = label || {},
+      _ref10$textStyle = _ref10.textStyle,
+      textStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
     var hasAnswer = utils.isTextFilled(label);
     return /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
       key: "answer-".concat(answerI),
-      className: classNames__default["default"]([styles$4.item, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), _defineProperty__default["default"](_ref10, styles$4.userAnswer, withoutGoodAnswer && userAnswer), _defineProperty__default["default"](_ref10, styles$4.otherAnswer, withoutGoodAnswer && !userAnswer), _ref10)]),
-      style: _objectSpread__default["default"]({}, style),
+      className: classNames__default["default"]([styles$4.item, (_ref11 = {}, _defineProperty__default["default"](_ref11, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), _defineProperty__default["default"](_ref11, styles$4.userAnswer, withoutGoodAnswer && userAnswer), _defineProperty__default["default"](_ref11, styles$4.otherAnswer, withoutGoodAnswer && !userAnswer), _ref11)]),
+      style: _objectSpread__default["default"]({}, style)
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: styles$4.itemContent,
       ref: function ref(el) {
         itemsRefs.current[answerI] = el;
       }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$4.itemContent
     }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
       placeholder: "quizAnswer",
       placeholderProps: {
@@ -326,6 +321,7 @@ var propTypes$4 = {
   goodAnswerColor: core.PropTypes.color,
   badAnswerColor: core.PropTypes.color,
   focusable: PropTypes__default["default"].bool,
+  animated: PropTypes__default["default"].bool,
   layout: PropTypes__default["default"].string,
   showInstantAnswer: PropTypes__default["default"].bool,
   withResult: PropTypes__default["default"].bool,
@@ -354,6 +350,7 @@ var defaultProps$4 = {
   goodAnswerColor: null,
   badAnswerColor: null,
   focusable: false,
+  animated: false,
   layout: null,
   showInstantAnswer: false,
   withResult: false,
@@ -383,6 +380,7 @@ var Question = function Question(_ref) {
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     focusable = _ref.focusable,
+    animated = _ref.animated,
     showInstantAnswer = _ref.showInstantAnswer,
     withResult = _ref.withResult,
     withoutGoodAnswer = _ref.withoutGoodAnswer,
@@ -469,6 +467,7 @@ var Question = function Question(_ref) {
     buttonsStyle: buttonsStyle,
     buttonsTextStyle: buttonsTextStyle,
     focusable: focusable,
+    animated: animated,
     transitions: transitions,
     transitionStagger: transitionStagger,
     transitionPlaying: transitionPlaying,
@@ -718,11 +717,11 @@ var QuizScreen = function QuizScreen(_ref) {
     className: classNames__default["default"]([styles$2.header, _defineProperty__default["default"]({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
     ref: headerRef,
     style: {
-      paddingTop: spacing,
+      paddingTop: spacing / 2,
       paddingLeft: spacing,
       paddingRight: spacing,
       paddingBottom: spacing,
-      transform: current && !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
+      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
     }
   }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(Question, {
     question: question,
@@ -736,6 +735,7 @@ var QuizScreen = function QuizScreen(_ref) {
     withoutTrueFalse: withoutTrueFalse,
     withoutGoodAnswer: withoutGoodAnswer,
     focusable: current && isView,
+    animated: isView,
     showInstantAnswer: showInstantAnswer,
     withResult: true,
     layout: layout,
@@ -747,7 +747,7 @@ var QuizScreen = function QuizScreen(_ref) {
     className: styles$2.question,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
     } : null
   })), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1141,7 +1141,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     _useDimensionObserver2 = _useDimensionObserver.height,
     headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
   var _useDimensionObserver3 = hooks.useDimensionObserver(),
-    callToActionRef = _useDimensionObserver3.ref,
+    footerRef = _useDimensionObserver3.ref,
     _useDimensionObserver4 = _useDimensionObserver3.height,
     callToActionHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
   var showInstantAnswer = isStatic || isCapture;
@@ -1368,11 +1368,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     className: classNames__default["default"]([styles$2.header, _defineProperty__default["default"]({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
     ref: headerRef,
     style: {
-      paddingTop: spacing,
+      paddingTop: spacing / 2,
       paddingLeft: spacing,
       paddingRight: spacing,
       paddingBottom: spacing,
-      transform: current && !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
+      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
     }
   }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
     verticalAlign: verticalAlign,
@@ -1454,14 +1454,14 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
     } : null
   }))) : null])), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: callToActionRef,
+    ref: footerRef,
     className: classNames__default["default"]([styles$2.footer, _defineProperty__default["default"]({}, styles$2.disabled, !scrolledBottom)]),
     style: {
-      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
       paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
       paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
       paddingTop: spacing / 2,
-      paddingBottom: spacing / 2
+      paddingBottom: spacing / 2,
+      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
     }
   }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
     key: backgroundKey,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.3.360",
+    "version": "0.3.362",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,18 +52,18 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.360",
-        "@micromag/data": "^0.3.360",
-        "@micromag/element-background": "^0.3.360",
-        "@micromag/element-button": "^0.3.360",
-        "@micromag/element-container": "^0.3.360",
-        "@micromag/element-footer": "^0.3.360",
-        "@micromag/element-header": "^0.3.360",
-        "@micromag/element-heading": "^0.3.360",
-        "@micromag/element-layout": "^0.3.360",
-        "@micromag/element-scroll": "^0.3.360",
-        "@micromag/element-text": "^0.3.360",
-        "@micromag/transforms": "^0.3.360",
+        "@micromag/core": "^0.3.362",
+        "@micromag/data": "^0.3.362",
+        "@micromag/element-background": "^0.3.362",
+        "@micromag/element-button": "^0.3.362",
+        "@micromag/element-container": "^0.3.362",
+        "@micromag/element-footer": "^0.3.362",
+        "@micromag/element-header": "^0.3.362",
+        "@micromag/element-heading": "^0.3.362",
+        "@micromag/element-layout": "^0.3.362",
+        "@micromag/element-scroll": "^0.3.362",
+        "@micromag/element-text": "^0.3.362",
+        "@micromag/transforms": "^0.3.362",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "classnames": "^2.2.6",
@@ -76,5 +76,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5531b1c55e0dd7e7a9c6eeee217ca28d985c7921"
+    "gitHead": "21619f51536d95517afabfdf316ef8fc345f6562"
 }