@instructure/quiz-core 22.16.1 → 22.17.0

package/lib/common/components/layout/sidebar/Stimulus/presenter.js

@@ -231,10 +231,28 @@ export var SidebarStimulus = /*#__PURE__*/ function(Component) {
                 };
             }
         },
+        {
+            key: "renderStimulusItems",
+            value: function renderStimulusItems() {
+                var _this_props = this.props, childEntries = _this_props.childEntries, displayPosition = _this_props.displayPosition, renderSidebarItem = _this_props.renderSidebarItem;
+                var nextDisplayPosition = displayPosition;
+                return childEntries.toArray().map(function(item, i) {
+                    var itemDisplayPosition = nextDisplayPosition;
+                    nextDisplayPosition += item.displayPositionSlots;
+                    return /*#__PURE__*/ jsx(View, {
+                        key: item.id,
+                        padding: "0 0 0 small",
+                        borderWidth: "0 0 small 0",
+                        borderColor: "primary",
+                        as: "div"
+                    }, renderSidebarItem(item, itemDisplayPosition, false));
+                });
+            }
+        },
         {
             key: "renderClosed",
             value: function renderClosed() {
-                return /*#__PURE__*/ jsx(View, {
+                var stimulusContainer = /*#__PURE__*/ jsx(View, {
                     borderWidth: "0 0 small 0",
                     borderColor: "primary",
                     as: "div"
@@ -246,6 +264,13 @@ export var SidebarStimulus = /*#__PURE__*/ function(Component) {
                     css: this.stimulusHoverCss(),
                     as: "div"
                 }, this.renderButton()), this.renderCollection());
+                // For passages or when dragging, just return the stimulus container
+                if (this.stimulusIsPassage() || this.props.isDragging) {
+                    return stimulusContainer;
+                }
+                // For non-passage stimuli in closed sidebar, return stimulus + child items separately
+                var childItems = this.renderStimulusItems();
+                return /*#__PURE__*/ jsx("div", null, stimulusContainer, childItems);
             }
         },
         {

package/{es/common/components/resources/quizSessionResult/Header → lib/common/components/resources/QuizSessionResult/QuizSessionResultHeader}/index.js

@@ -84,12 +84,6 @@ function _is_native_reflect_construct() {
         return !!result;
     })();
 }
-function _ts_decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -100,13 +94,13 @@ import t from '@instructure/quiz-i18n/format-message';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { withStyleOverrides } from '@instructure/quiz-common';
-export var QuizSessionResultHeader = /*#__PURE__*/ function(Component) {
+export var BaseQuizSessionResultHeader = /*#__PURE__*/ function(Component) {
     "use strict";
-    _inherits(QuizSessionResultHeader, Component);
-    function QuizSessionResultHeader() {
-        _class_call_check(this, QuizSessionResultHeader);
+    _inherits(BaseQuizSessionResultHeader, Component);
+    function BaseQuizSessionResultHeader() {
+        _class_call_check(this, BaseQuizSessionResultHeader);
         var _this;
-        _this = _call_super(this, QuizSessionResultHeader, arguments), _define_property(_this, "renderRegradeAlert", function() {
+        _this = _call_super(this, BaseQuizSessionResultHeader, arguments), _define_property(_this, "renderRegradeAlert", function() {
             if (_this.props.regradedSessionItemResults && _this.props.regradedSessionItemResults.size > 0) {
                 var questions = _this.props.regradedSessionItemResults.map(function(rsi) {
                     return rsi.position;
@@ -121,7 +115,7 @@ export var QuizSessionResultHeader = /*#__PURE__*/ function(Component) {
         });
         return _this;
     }
-    _create_class(QuizSessionResultHeader, [
+    _create_class(BaseQuizSessionResultHeader, [
         {
             key: "studentName",
             value: function studentName() {
@@ -143,27 +137,25 @@ export var QuizSessionResultHeader = /*#__PURE__*/ function(Component) {
                 }, t('Results'))), /*#__PURE__*/ jsx("div", {
                     css: this.props.styles.resultListDescription,
                     className: "fs-mask"
-                }, this.props.studentDescription || this.studentName()))), /*#__PURE__*/ jsx("div", {
+                }, this.props.studentDescription || this.studentName()))), !this.props.isSurvey && /*#__PURE__*/ jsx("div", {
                     css: this.props.styles.regradeAlert
                 }, this.renderRegradeAlert()));
             }
         }
     ]);
-    return QuizSessionResultHeader;
+    return BaseQuizSessionResultHeader;
 }(Component);
-_define_property(QuizSessionResultHeader, "displayName", 'QuizSessionResultHeader');
-_define_property(QuizSessionResultHeader, "componentId", "Quizzes".concat(QuizSessionResultHeader.displayName));
-_define_property(QuizSessionResultHeader, "propTypes", {
+_define_property(BaseQuizSessionResultHeader, "displayName", 'QuizSessionResultHeader');
+_define_property(BaseQuizSessionResultHeader, "componentId", "Quizzes".concat(BaseQuizSessionResultHeader.displayName));
+_define_property(BaseQuizSessionResultHeader, "propTypes", {
     quizSession: ImmutablePropTypes.record.isRequired,
     regradedSessionItemResults: ImmutablePropTypes.list,
     studentDescription: PropTypes.node,
-    styles: PropTypes.object
+    styles: PropTypes.object,
+    isSurvey: PropTypes.bool.isRequired
 });
-_define_property(QuizSessionResultHeader, "defaultProps", {
+_define_property(BaseQuizSessionResultHeader, "defaultProps", {
     regradedSessionItemResults: null,
     studentDescription: null
 });
-QuizSessionResultHeader = _ts_decorate([
-    withStyleOverrides(generateStyle, generateComponentTheme)
-], QuizSessionResultHeader);
-export default QuizSessionResultHeader;
+export var QuizSessionResultHeader = withStyleOverrides(generateStyle, generateComponentTheme)(BaseQuizSessionResultHeader);

package/lib/common/components/resources/QuizSessionResult/QuizSessionResultInfo/ScoreDisplay/components/LetterGrade.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { View } from '@instructure/ui-view';
+import { Text } from '@instructure/ui-text';
+import t from '@instructure/quiz-i18n/format-message';
+import { scoreToLetterGrade } from '@instructure/grading-utils';
+export var LetterGrade = function(param) {
+    var percentage = param.percentage, gradingScheme = param.gradingScheme;
+    var letterGrade = scoreToLetterGrade(percentage * 100, gradingScheme);
+    var gradeText = t('Grade for this attempt');
+    var alt = t('Grade for this attempt: { grade }', {
+        grade: letterGrade
+    });
+    return /*#__PURE__*/ React.createElement(AccessibleContent, {
+        alt: alt
+    }, /*#__PURE__*/ React.createElement(View, {
+        as: "div"
+    }, /*#__PURE__*/ React.createElement(Text, {
+        size: "xx-large",
+        weight: "bold",
+        color: "primary"
+    }, letterGrade)), /*#__PURE__*/ React.createElement(Text, {
+        color: "secondary"
+    }, gradeText));
+};
+LetterGrade.propTypes = {
+    percentage: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+    gradingScheme: PropTypes.arrayOf(PropTypes.shape({
+        name: PropTypes.string,
+        value: PropTypes.number
+    }))
+};

package/lib/common/components/resources/QuizSessionResult/QuizSessionResultInfo/ScoreDisplay/components/PointsDisplay.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { Text } from '@instructure/ui-text';
+import { Flex } from '@instructure/quiz-common';
+import t from '@instructure/quiz-i18n/format-message';
+import { isMissing } from '../../../../../../util/isMissing';
+var mainPointsText = function(points, pointsPossible) {
+    if (isMissing(points) && isMissing(pointsPossible)) {
+        return '--';
+    }
+    var valueToUse = !isMissing(points) ? points : pointsPossible;
+    return t.number(valueToUse);
+};
+var subPointsText = function(points, pointsPossible) {
+    if (!isMissing(points) && !isMissing(pointsPossible)) {
+        return t("Out of {\n      points, plural,\n      one {# point}\n      other {# points}\n    }", {
+            points: pointsPossible
+        });
+    }
+    if (!isMissing(points)) {
+        return t("Earned {points, plural,\n      one {point}\n      other {points}\n    }", {
+            points: points
+        });
+    }
+    // We use "Points Possible" when only points is present or when nothing is present
+    return t("{points, plural,\n    one {Point}\n    other {Points}\n  } possible", {
+        points: pointsPossible
+    });
+};
+var pointsText = function(points, pointsPossible) {
+    if (!isMissing(points) && !isMissing(pointsPossible)) {
+        return t("{points, number} out of {\n      total, plural,\n      one {# point}\n      other {# points}\n    }", {
+            points: points,
+            total: pointsPossible
+        });
+    }
+    if (!isMissing(points)) {
+        return t("Earned {points, plural,\n      one {# point}\n      other {# points}\n    }", {
+            points: points
+        });
+    }
+    // We use "Points Possible" when only points is present or when nothing is present
+    if (!isMissing(pointsPossible)) {
+        return t("{points, plural,\n      one {# point}\n      other {# points}\n    } possible", {
+            points: pointsPossible
+        });
+    }
+    return t('Unknown Score');
+};
+export var PointsDisplay = function(param) {
+    var points = param.points, pointsPossible = param.pointsPossible;
+    return /*#__PURE__*/ React.createElement(Flex, {
+        margin: "small",
+        padding: "0 0 0 small"
+    }, /*#__PURE__*/ React.createElement(AccessibleContent, {
+        alt: pointsText(points, pointsPossible)
+    }, /*#__PURE__*/ React.createElement(Text, {
+        as: "div",
+        color: "primary",
+        size: "xx-large",
+        weight: "bold"
+    }, mainPointsText(points, pointsPossible)), /*#__PURE__*/ React.createElement(Text, {
+        color: "secondary"
+    }, subPointsText(points, pointsPossible))));
+};
+PointsDisplay.propTypes = {
+    points: PropTypes.string,
+    pointsPossible: PropTypes.string
+};

package/lib/common/components/resources/QuizSessionResult/QuizSessionResultInfo/ScoreDisplay/components/Progress.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '@instructure/ui-text';
+import { Flex } from '@instructure/quiz-common';
+import t from '@instructure/quiz-i18n/format-message';
+import { ProgressCircle } from '@instructure/ui-progress';
+import { formatPercentMax2FractionDigits } from '@instructure/quiz-i18n';
+import { isMissing, UNKNOWN_PERCENTAGE_VALUE } from '../../../../../../util/isMissing';
+var progressTextFormatter = function(param) {
+    var valueNow = param.valueNow;
+    var percentageUnknown = valueNow === UNKNOWN_PERCENTAGE_VALUE;
+    return percentageUnknown ? t('Unknown Score') : t('Your score was {percentage}.', {
+        percentage: formatPercentMax2FractionDigits(valueNow)
+    });
+};
+var progressDisplayFormatter = function(param) {
+    var valueNow = param.valueNow;
+    var valueToShow = valueNow === UNKNOWN_PERCENTAGE_VALUE ? t({
+        id: 'progress_display',
+        default: '?',
+        description: 'placeholder for an unknown percentage value'
+    }) : formatPercentMax2FractionDigits(valueNow);
+    return /*#__PURE__*/ React.createElement(Text, {
+        size: "large",
+        weight: "bold",
+        "data-automation": "sdk-quiz-score-percentage"
+    }, valueToShow);
+};
+export var Progress = function(param) {
+    var percentage = param.percentage, points = param.points, pointsPossible = param.pointsPossible;
+    if (isMissing(points) || isMissing(pointsPossible)) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement(Flex, {
+        alignItems: "center",
+        height: "150px",
+        width: "150px",
+        margin: "small",
+        "data-automation": "sdk-info-score"
+    }, /*#__PURE__*/ React.createElement(ProgressCircle, {
+        shouldAnimateOnMount: true,
+        size: "large",
+        screenReaderLabel: t('Your Score'),
+        formatScreenReaderValue: progressTextFormatter,
+        renderValue: progressDisplayFormatter,
+        valueNow: percentage,
+        valueMax: 1
+    }));
+};
+Progress.propTypes = {
+    percentage: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+    points: PropTypes.string,
+    pointsPossible: PropTypes.string
+};

package/lib/common/components/resources/QuizSessionResult/QuizSessionResultInfo/ScoreDisplay/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { Flex } from '@instructure/quiz-common';
+import { Progress } from './components/Progress';
+import { PointsDisplay } from './components/PointsDisplay';
+import { LetterGrade } from './components/LetterGrade';
+import { UNKNOWN_PERCENTAGE_VALUE } from '../../../../../util/isMissing';
+export var ScoreDisplay = function(param) {
+    var isSurvey = param.isSurvey, restrictQuantitativeData = param.restrictQuantitativeData, quizSessionResult = param.quizSessionResult, gradingScheme = param.gradingScheme;
+    if (isSurvey) {
+        return null;
+    }
+    var ratio = quizSessionResult.percentage;
+    var percentage = isNaN(ratio) ? UNKNOWN_PERCENTAGE_VALUE : ratio;
+    if (restrictQuantitativeData) {
+        return /*#__PURE__*/ React.createElement(LetterGrade, {
+            percentage: percentage,
+            gradingScheme: gradingScheme
+        });
+    }
+    return /*#__PURE__*/ React.createElement(Flex, {
+        wrap: "wrap",
+        alignItems: "center",
+        justifyItems: "start"
+    }, /*#__PURE__*/ React.createElement(Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true
+    }, /*#__PURE__*/ React.createElement(Progress, {
+        percentage: percentage,
+        points: quizSessionResult.score,
+        pointsPossible: quizSessionResult.pointsPossible
+    })), /*#__PURE__*/ React.createElement(Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true
+    }, /*#__PURE__*/ React.createElement(PointsDisplay, {
+        points: quizSessionResult.score,
+        pointsPossible: quizSessionResult.pointsPossible
+    })));
+};
+ScoreDisplay.propTypes = {
+    isSurvey: PropTypes.bool.isRequired,
+    restrictQuantitativeData: PropTypes.bool,
+    quizSessionResult: ImmutablePropTypes.record,
+    gradingScheme: PropTypes.arrayOf(PropTypes.shape({
+        name: PropTypes.string,
+        value: PropTypes.number
+    }))
+};

package/lib/common/components/resources/QuizSessionResult/QuizSessionResultInfo/index.js

@@ -0,0 +1,118 @@
+/** @jsx jsx */ import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { AccessibleContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { Alert } from '@instructure/ui-alerts';
+import { Text } from '@instructure/ui-text';
+import { Heading } from '@instructure/ui-heading';
+import { View } from '@instructure/ui-view';
+import { jsx } from '@instructure/emotion';
+import { Flex } from '@instructure/quiz-common';
+import t from '@instructure/quiz-i18n/format-message';
+import FormattedDuration from '../../../shared/FormattedDuration';
+import { formatTime } from '../../../../util/formatTimespan';
+import { ScoreDisplay } from './ScoreDisplay/index';
+function GradingAlerts(param) {
+    var quizSessionResult = param.quizSessionResult, sessionItemResults = param.sessionItemResults;
+    var alerts = [];
+    if (quizSessionResult.isLoaded() && quizSessionResult.autogradingFailed()) {
+        var msg = t('There was a grading problem. Please inform your instructor.');
+        alerts.push(/*#__PURE__*/ jsx(Alert, {
+            key: "autograding_failed",
+            variant: "warning"
+        }, msg));
+    }
+    var ungradedCount = sessionItemResults.reduce(function(count, sessionItemResult) {
+        return sessionItemResult.getIn([
+            'scoredData',
+            'gradeStatus'
+        ]) === 'waiting' ? count + 1 : count;
+    }, 0);
+    if (ungradedCount > 0 && quizSessionResult.isLoaded()) {
+        var ungradedText = t("{\n        count, plural,\n        one {# question requires grading}\n        other {# questions require grading}\n      }", {
+            count: ungradedCount
+        });
+        alerts.push(/*#__PURE__*/ jsx(Alert, {
+            key: "manual_grading",
+            variant: "info"
+        }, ungradedText));
+    }
+    if (alerts.length === 0) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(Flex, {
+        direction: "row",
+        alignItems: "center",
+        justifyItems: "center",
+        margin: "x-small 0 0 0"
+    }, /*#__PURE__*/ jsx(Flex.Item, {
+        "data-automation": "sdk-results-requires-grading",
+        shouldGrow: false,
+        shouldShrink: true,
+        size: "33rem"
+    }, alerts));
+}
+function ElapsedTime(param) {
+    var elapsedTime = param.elapsedTime;
+    var attemptText = t('Time for this attempt');
+    var alt = t('Time for this attempt: { time }', {
+        time: formatTime(elapsedTime)
+    });
+    return /*#__PURE__*/ jsx(AccessibleContent, {
+        alt: alt
+    }, /*#__PURE__*/ jsx(View, {
+        as: "div"
+    }, /*#__PURE__*/ jsx(FormattedDuration, {
+        fontSize: "xx-large",
+        fontWeight: "bold",
+        seconds: elapsedTime
+    })), /*#__PURE__*/ jsx(Text, {
+        color: "secondary"
+    }, attemptText));
+}
+export function QuizSessionResultInfo(param) {
+    var _param_gradingScheme = param.gradingScheme, gradingScheme = _param_gradingScheme === void 0 ? [] : _param_gradingScheme, quizSession = param.quizSession, quizSessionResult = param.quizSessionResult, sessionItemResults = param.sessionItemResults, _param_restrictQuantitativeData = param.restrictQuantitativeData, restrictQuantitativeData = _param_restrictQuantitativeData === void 0 ? false : _param_restrictQuantitativeData, isSurvey = param.isSurvey;
+    return /*#__PURE__*/ jsx(View, null, /*#__PURE__*/ jsx(GradingAlerts, {
+        quizSessionResult: quizSessionResult,
+        sessionItemResults: sessionItemResults
+    }), /*#__PURE__*/ jsx(Flex, {
+        padding: "none",
+        margin: "none",
+        alignItems: "center",
+        justifyItems: "center"
+    }, /*#__PURE__*/ jsx(Flex, {
+        wrap: "wrap",
+        alignItems: "center",
+        justifyItems: "center",
+        className: "fs-mask"
+    }, /*#__PURE__*/ jsx(ScreenReaderContent, null, /*#__PURE__*/ jsx(Heading, {
+        level: "h2"
+    }, t('Assessment Statistics'))), /*#__PURE__*/ jsx(Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true
+    }, /*#__PURE__*/ jsx(ScoreDisplay, {
+        isSurvey: isSurvey,
+        restrictQuantitativeData: restrictQuantitativeData,
+        gradingScheme: gradingScheme,
+        quizSessionResult: quizSessionResult
+    })), /*#__PURE__*/ jsx(Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true,
+        margin: "small",
+        padding: "0 0 0 small"
+    }, /*#__PURE__*/ jsx(ElapsedTime, {
+        elapsedTime: quizSession.elapsedTime
+    })))));
+}
+QuizSessionResultInfo.propTypes = {
+    gradingScheme: PropTypes.arrayOf(PropTypes.shape({
+        name: PropTypes.string,
+        value: PropTypes.number
+    })),
+    quizSession: ImmutablePropTypes.record.isRequired,
+    quizSessionResult: ImmutablePropTypes.record.isRequired,
+    restrictQuantitativeData: PropTypes.bool,
+    sessionItemResults: ImmutablePropTypes.list.isRequired,
+    styles: PropTypes.object,
+    isSurvey: PropTypes.bool.isRequired
+};

package/lib/common/components/resources/item/ItemEdit/index.js

@@ -13,7 +13,7 @@ import { addError, screenreaderNotification } from '../../../../actions/alerts';
 import { updateItem } from '../../../../../building/api/items';
 import { interactionFileUpload, setOneAtATimeType } from '../../../../../building/api/quizzes';
 import { featureOn } from '../../../../util/featureCheck';
-import { getActiveQuizId, isActiveQuizWorkingInstanceOneQuestionAtATime } from '../../../../selectors/quizzes';
+import { getActiveQuiz, isActiveQuizWorkingInstanceOneQuestionAtATime } from '../../../../selectors/quizzes';
 export function mapStateToProps(state, props) {
     // Error Related:
     var workingItem = props.entry.getWorkingInstance();
@@ -25,6 +25,7 @@ export function mapStateToProps(state, props) {
         'outcomes',
         'contextUuid'
     ]) : props.contextUuid;
+    var quiz = getActiveQuiz(state);
     var _props_showCalculator;
     return {
         answerFeedbackEnabled: featureOn('answer_level_feedback'),
@@ -50,13 +51,14 @@ export function mapStateToProps(state, props) {
         ]),
         partialDeepScoringEnabled: featureOn('partial_deep_scoring'),
         partialScoringEnabled: featureOn('partial_scoring'),
-        quizId: getActiveQuizId(state),
+        quizId: quiz.id,
         scope: props.scope,
         rootAccountUuid: state.getIn([
             'outcomes',
             'externalAccountUuid'
         ]),
-        showCalculatorOption: (_props_showCalculator = props.showCalculator) !== null && _props_showCalculator !== void 0 ? _props_showCalculator : true
+        showCalculatorOption: (_props_showCalculator = props.showCalculator) !== null && _props_showCalculator !== void 0 ? _props_showCalculator : true,
+        isSurvey: quiz.isSurvey()
     };
 }
 function mapDispatchToProps(dispatch) {

package/lib/common/components/resources/item/ItemEdit/presenter.js

@@ -185,7 +185,7 @@ export var ItemEdit = /*#__PURE__*/ function(Component) {
                     }
                 }
                 var options = [];
-                if (this.props.outcomesEndpoint) {
+                if (!this.props.isSurvey && this.props.outcomesEndpoint) {
                     options.push({
                         key: 'outcomes',
                         title: /*#__PURE__*/ React.createElement("span", null, t('Align to Outcomes'), /*#__PURE__*/ React.createElement(OutcomeCount, _object_spread_props(_object_spread({
@@ -295,7 +295,8 @@ _define_property(ItemEdit, "propTypes", {
     separatorConfig: PropTypes.shape({
         decimalSeparator: PropTypes.string,
         thousandSeparator: PropTypes.string
-    })
+    }),
+    isSurvey: PropTypes.bool.isRequired
 });
 _define_property(ItemEdit, "defaultProps", {
     additionalOptions: [],

package/lib/common/components/resources/item/ItemShow/index.js

@@ -160,7 +160,8 @@ _define_property(ItemShow, "propTypes", {
     separatorConfig: PropTypes.shape({
         decimalSeparator: PropTypes.string,
         thousandSeparator: PropTypes.string
-    })
+    }),
+    isSurvey: PropTypes.bool.isRequired
 });
 _define_property(ItemShow, "defaultProps", {
     switchOnEditing: null

package/lib/common/components/resources/quiz/AddContent/Body/index.js

@@ -4,12 +4,14 @@ import { set } from '../../../../../actions/ui';
 import { screenreaderNotification } from '../../../../../actions/alerts';
 import AddContentBody from './presenter';
 import { getInteractionTypes } from '../../../../../selectors/interactionTypes';
-import { isEditingQuizEntry, getQuizEntryWithErrorsShowing } from '../../../../../selectors/quizzes';
+import { isEditingQuizEntry, getQuizEntryWithErrorsShowing, getActiveQuiz } from '../../../../../selectors/quizzes';
 var mapStateToProps = function(state) {
+    var activeQuiz = getActiveQuiz(state);
     return {
         editingQuizEntry: isEditingQuizEntry(state),
         interactionTypes: getInteractionTypes(state),
-        quizEntryWithErrorsShowing: getQuizEntryWithErrorsShowing(state)
+        quizEntryWithErrorsShowing: getQuizEntryWithErrorsShowing(state),
+        isSurvey: activeQuiz.isSurvey()
     };
 };
 var mapDispatchToProps = {

package/lib/common/components/resources/quiz/AddContent/Body/presenter.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */ import { jsx } from '@instructure/emotion';
 import { BUILD_TRAY_OPEN, BUILD_TRAY_POSITION, BUILD_TRAY_STIMULUS_ID, withStyleOverrides } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/format-message';
-import { Button, IconButton } from '@instructure/ui-buttons';
+import { Button, IconButton, CloseButton } from '@instructure/ui-buttons';
 import { Grid } from '@instructure/ui-grid';
 import { IconAiSolid, IconBankLine } from '@instructure/ui-icons';
 import { Text } from '@instructure/ui-text';
@@ -14,7 +14,9 @@ import InteractionTypes from '../../../../shared/InteractionTypes';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 function UnstyledAddContentBody(param) {
-    var allowStimulusCreation = param.allowStimulusCreation, createItem = param.createItem, createStimulus = param.createStimulus, editingQuizEntry = param.editingQuizEntry, interactionTypes = param.interactionTypes, _param_onOpenBankTray = param.onOpenBankTray, onOpenBankTray = _param_onOpenBankTray === void 0 ? function() {} : _param_onOpenBankTray, _param_onAddItem = param.onAddItem, onAddItem = _param_onAddItem === void 0 ? function() {} : _param_onAddItem, parentEntryId = param.parentEntryId, position = param.position, quizEntryWithErrorsShowing = param.quizEntryWithErrorsShowing, quizId = param.quizId, screenreaderNotification = param.screenreaderNotification, setNextQuizEntry = param.setNextQuizEntry, setUi = param.setUi, _param_showHeaderText = param.showHeaderText, showHeaderText = _param_showHeaderText === void 0 ? true : _param_showHeaderText, stimulusId = param.stimulusId, styles = param.styles, _param_slotProps = param.slotProps, slotProps = _param_slotProps === void 0 ? {} : _param_slotProps, _param_containerType = param.containerType, containerType = _param_containerType === void 0 ? 'popover' : _param_containerType;
+    var allowStimulusCreation = param.allowStimulusCreation, createItem = param.createItem, createStimulus = param.createStimulus, editingQuizEntry = param.editingQuizEntry, interactionTypes = param.interactionTypes, _param_isSurvey = param.isSurvey, isSurvey = _param_isSurvey === void 0 ? false : _param_isSurvey, _param_onOpenBankTray = param.onOpenBankTray, onOpenBankTray = _param_onOpenBankTray === void 0 ? function() {} : _param_onOpenBankTray, _param_onAddItem = param.onAddItem, onAddItem = _param_onAddItem === void 0 ? function() {} : _param_onAddItem, parentEntryId = param.parentEntryId, position = param.position, quizEntryWithErrorsShowing = param.quizEntryWithErrorsShowing, quizId = param.quizId, screenreaderNotification = param.screenreaderNotification, setNextQuizEntry = param.setNextQuizEntry, setUi = param.setUi, _param_showHeaderText = param.showHeaderText, showHeaderText = _param_showHeaderText === void 0 ? true : _param_showHeaderText, stimulusId = param.stimulusId, styles = param.styles, _param_slotProps = param.slotProps, slotProps = _param_slotProps === void 0 ? {} : _param_slotProps, _param_containerType = param.containerType, containerType = _param_containerType === void 0 ? 'popover' : _param_containerType, _param_renderCloseButton = param.// Close button is only shown when the popover is rendered standalone.
+    // Defaults to false to avoid showing two close buttons when inside a modal(especially on smaller screens).
+    renderCloseButton, renderCloseButton = _param_renderCloseButton === void 0 ? false : _param_renderCloseButton;
     var openBankTray = useCallback(function() {
         onOpenBankTray();
         setUi(BUILD_TRAY_OPEN, true);
@@ -26,6 +28,11 @@ function UnstyledAddContentBody(param) {
         position,
         parentEntryId
     ]);
+    var handleClose = useCallback(function() {
+        onAddItem();
+    }, [
+        onAddItem
+    ]);
     var addStimulus = useCallback(function(isPassage) {
         if (editingQuizEntry) {
             setNextQuizEntry(null, quizId, position);
@@ -89,15 +96,25 @@ function UnstyledAddContentBody(param) {
         var text = showHeaderText ? t('Insert Content') : '';
         return /*#__PURE__*/ jsx("div", {
             css: styles.popoverHeaderBox
-        }, /*#__PURE__*/ jsx("div", {
+        }, renderCloseButton && /*#__PURE__*/ jsx(View, {
+            as: "span",
+            display: "inline-block",
+            css: styles.closeButton
+        }, /*#__PURE__*/ jsx(CloseButton, {
+            screenReaderLabel: t('Close Insert Content'),
+            onClick: handleClose
+        })), /*#__PURE__*/ jsx("div", {
             css: styles.popoverHeader
         }, /*#__PURE__*/ jsx(Grid, {
             vAlign: "middle",
             colSpacing: "none",
             rowSpacing: "none"
-        }, /*#__PURE__*/ jsx(Grid.Row, null, /*#__PURE__*/ jsx(Grid.Col, null, /*#__PURE__*/ jsx(Text, {
+        }, /*#__PURE__*/ jsx(Grid.Row, null, /*#__PURE__*/ jsx(Grid.Col, null, /*#__PURE__*/ jsx(View, {
+            as: "div",
+            margin: "medium 0"
+        }, /*#__PURE__*/ jsx(Text, {
             color: "primary"
-        }, text)), /*#__PURE__*/ jsx(Grid.Col, {
+        }, text))), !isSurvey && /*#__PURE__*/ jsx(Grid.Col, {
             width: "auto"
         }, renderBankButton())))), ((_slotProps_quizGenerationButton = slotProps.quizGenerationButton) === null || _slotProps_quizGenerationButton === void 0 ? void 0 : _slotProps_quizGenerationButton.visible) && /*#__PURE__*/ jsx(View, {
             as: "div",
@@ -142,6 +159,7 @@ AddContentBody.propTypes = {
     createStimulus: PropTypes.func.isRequired,
     editingQuizEntry: PropTypes.bool,
     interactionTypes: ImmutablePropTypes.list,
+    isSurvey: PropTypes.bool,
     onOpenBankTray: PropTypes.func,
     onAddItem: PropTypes.func,
     parentEntryId: PropTypes.string,
@@ -156,6 +174,7 @@ AddContentBody.propTypes = {
     styles: PropTypes.object,
     slotProps: PropTypes.shape({
         quizGenerationButton: quizGenerationButtonPropTypes
-    })
+    }),
+    renderCloseButton: PropTypes.bool
 };
 export default AddContentBody;

package/lib/common/components/resources/quiz/AddContent/Body/styles.js

@@ -18,8 +18,15 @@ var generateStyle = function(componentTheme) {
     var _obj;
     return {
         popoverHeaderBox: {
+            position: 'relative',
             borderBottom: "solid ".concat(componentTheme.popoverHeaderBoxBorderWidth, " ").concat(componentTheme.popoverHeaderBoxBorderColor)
         },
+        closeButton: {
+            position: 'absolute',
+            top: '-0.8rem',
+            right: '-1.3rem',
+            zIndex: 1
+        },
         popoverHeader: {
             margin: '1rem',
             marginBottom: '0.25rem'

package/lib/common/components/resources/quiz/AddContent/Popover/presenter.js

@@ -120,6 +120,7 @@ function UnstyledAddContentPopover(param) {
             shouldContainFocus: true,
             renderTrigger: renderAddContentButton()
         }, /*#__PURE__*/ jsx(AddContentBody, {
+            renderCloseButton: true,
             allowStimulusCreation: allowStimulusCreation,
             onOpenBankTray: switchOffEditing,
             onAddItem: switchOffEditing,