@pie-element/multiple-choice 9.7.2-next.7 → 9.7.3-next.0

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.7.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/multiple-choice@9.7.1...@pie-element/multiple-choice@9.7.2) (2025-01-22)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4452, PD-3872, PD-4689, PD-4704, PD-4588, PD-4698, PD-4618 ([a97329c](https://github.com/pie-framework/pie-elements/commit/a97329cf73619a3a5aae8d492edb8d6e5c5730df))
+* **multiple-choice:** add minSelections default value and update events PD-4677 ([b8a1a22](https://github.com/pie-framework/pie-elements/commit/b8a1a22f3ea34aa8c03b03dd0bc1fbbc725c7a14))
+* **multiple-choice:** use session as source of truth for selected answers PD-4677 ([80a5d73](https://github.com/pie-framework/pie-elements/commit/80a5d7328a409b82e097c27a363afb77fead5491))
+
+
+
+
+
 ## [9.7.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/multiple-choice@9.7.0...@pie-element/multiple-choice@9.7.1) (2025-01-22)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.2.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/multiple-choice-configure@7.2.2...@pie-element/multiple-choice-configure@7.2.3) (2025-01-22)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4452, PD-3872, PD-4689, PD-4704, PD-4588, PD-4698, PD-4618 ([a97329c](https://github.com/pie-framework/pie-elements/commit/a97329cf73619a3a5aae8d492edb8d6e5c5730df))
+
+
+
+
+
 ## [7.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/multiple-choice-configure@7.2.1...@pie-element/multiple-choice-configure@7.2.2) (2025-01-22)
 
 

package/configure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/multiple-choice-configure",
-  "version": "7.2.2",
+  "version": "7.2.3",
   "private": true,
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -8,7 +8,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.1",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.6.1",
+    "@pie-lib/pie-toolbox": "2.7.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",

package/controller/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.4.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/multiple-choice-controller@5.4.2...@pie-element/multiple-choice-controller@5.4.3) (2025-01-22)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4452, PD-3872, PD-4689, PD-4704, PD-4588, PD-4698, PD-4618 ([a97329c](https://github.com/pie-framework/pie-elements/commit/a97329cf73619a3a5aae8d492edb8d6e5c5730df))
+
+
+
+
+
 ## [5.4.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/multiple-choice-controller@5.4.1...@pie-element/multiple-choice-controller@5.4.2) (2025-01-22)
 
 

package/controller/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@pie-element/multiple-choice-controller",
   "private": true,
-  "version": "5.4.2",
+  "version": "5.4.3",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.6.1",
+    "@pie-lib/pie-toolbox": "2.7.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15"
   }

package/lib/index.js

@@ -33,6 +33,8 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 var _debug = _interopRequireDefault(require("debug"));
 
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+
 var _mathRendering = require("@pie-lib/pie-toolbox/math-rendering");
 
 var _sessionUpdater = require("./session-updater");
@@ -50,7 +52,8 @@ var isComplete = function isComplete(session, model) {
 
   var _ref = model || {},
       choiceMode = _ref.choiceMode,
-      minSelections = _ref.minSelections,
+      _ref$minSelections = _ref.minSelections,
+      minSelections = _ref$minSelections === void 0 ? 1 : _ref$minSelections,
       maxSelections = _ref.maxSelections;
 
   var selections = session.value.length || 0;
@@ -108,28 +111,10 @@ var MultipleChoice = /*#__PURE__*/function (_HTMLElement) {
       trailing: true
     });
     _this._dispatchResponseChanged = (0, _debounce["default"])(function () {
-      console.log('>> dispatch event');
-      var event = new CustomEvent('session-changed', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          complete: isComplete(_this._session, _this._model),
-          component: _this.tagName.toLowerCase()
-        }
-      });
-
-      _this.dispatchEvent(event);
+      _this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(_this.tagName.toLowerCase(), isComplete(_this._session, _this._model)));
     });
     _this._dispatchModelSet = (0, _debounce["default"])(function () {
-      _this.dispatchEvent(new CustomEvent('model-set', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          complete: isComplete(_this._session, _this._model),
-          component: _this.tagName.toLowerCase(),
-          hasModel: _this._model !== undefined
-        }
-      }));
+      _this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(_this.tagName.toLowerCase(), isComplete(_this._session, _this._model), _this._model !== undefined));
     }, 50, {
       leading: false,
       trailing: true

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","model","value","choiceMode","minSelections","maxSelections","selections","length","MultipleChoice","_model","_session","_rerender","element","React","createElement","Main","onChoiceChanged","_onChange","bind","onShowCorrectToggle","setAttribute","setLangAttribute","ReactDOM","render","leading","trailing","_dispatchResponseChanged","console","event","CustomEvent","bubbles","composed","detail","complete","component","tagName","toLowerCase","dispatchEvent","_dispatchModelSet","hasModel","undefined","language","lang","slice","s","data","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { updateSessionValue } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session, model) => {\n  if (!session || !session.value) {\n    return false;\n  }\n\n  const { choiceMode, minSelections, maxSelections } = model || {};\n  const selections = session.value.length || 0;\n\n  if (choiceMode === 'radio') {\n    return !!selections;\n  }\n\n  if (selections < minSelections || selections > maxSelections) {\n    return false;\n  }\n\n  return true;\n};\n\nexport default class MultipleChoice extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          var element = React.createElement(Main, {\n            model: this._model,\n            session: this._session,\n            onChoiceChanged: this._onChange.bind(this),\n            onShowCorrectToggle: this.onShowCorrectToggle.bind(this),\n          });\n\n          //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender\n          this.setAttribute(\n            'aria-label',\n            this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',\n          );\n          this.setAttribute('role', 'region');\n          this.setLangAttribute();\n\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n\n    this._dispatchResponseChanged = debounce(() => {\n      console.log('>> dispatch event');\n      var event = new CustomEvent('session-changed', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          complete: isComplete(this._session, this._model),\n          component: this.tagName.toLowerCase(),\n        },\n      });\n\n      this.dispatchEvent(event);\n    });\n\n    this._dispatchModelSet = debounce(\n      () => {\n        this.dispatchEvent(\n          new CustomEvent('model-set', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              complete: isComplete(this._session, this._model),\n              component: this.tagName.toLowerCase(),\n              hasModel: this._model !== undefined,\n            },\n          }),\n        );\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n\n  onShowCorrectToggle() {\n    renderMath(this);\n  }\n\n  setLangAttribute() {\n    const language = this._model && typeof this._model.language ? this._model.language : '';\n    const lang = language ? language.slice(0, 2) : 'en';\n    this.setAttribute('lang', lang);\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n    this._dispatchModelSet();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  set session(s) {\n    this._session = s;\n    this._rerender();\n    //TODO: remove this session-changed should only be emit on user change\n    this._dispatchResponseChanged();\n  }\n\n  _onChange(data) {\n    updateSessionValue(this._session, this._model.choiceMode, data);\n    this._dispatchResponseChanged();\n    this._rerender();\n  }\n\n  connectedCallback() {\n    this._rerender();\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","model","value","choiceMode","minSelections","maxSelections","selections","length","MultipleChoice","_model","_session","_rerender","element","React","createElement","Main","onChoiceChanged","_onChange","bind","onShowCorrectToggle","setAttribute","setLangAttribute","ReactDOM","render","leading","trailing","_dispatchResponseChanged","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","_dispatchModelSet","ModelSetEvent","undefined","language","lang","slice","s","data","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { updateSessionValue } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session, model) => {\n  if (!session || !session.value) {\n    return false;\n  }\n\n  const { choiceMode, minSelections = 1, maxSelections } = model || {};\n  const selections = session.value.length || 0;\n\n  if (choiceMode === 'radio') {\n    return !!selections;\n  }\n\n  if (selections < minSelections || selections > maxSelections) {\n    return false;\n  }\n\n  return true;\n};\n\nexport default class MultipleChoice extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          var element = React.createElement(Main, {\n            model: this._model,\n            session: this._session,\n            onChoiceChanged: this._onChange.bind(this),\n            onShowCorrectToggle: this.onShowCorrectToggle.bind(this),\n          });\n\n          //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender\n          this.setAttribute(\n            'aria-label',\n            this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',\n          );\n          this.setAttribute('role', 'region');\n          this.setLangAttribute();\n\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n\n    this._dispatchResponseChanged = debounce(() => {\n      this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model)));\n    });\n\n    this._dispatchModelSet = debounce(\n      () => {\n        this.dispatchEvent(\n          new ModelSetEvent(\n            this.tagName.toLowerCase(),\n            isComplete(this._session, this._model),\n            this._model !== undefined,\n          ),\n        );\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n\n  onShowCorrectToggle() {\n    renderMath(this);\n  }\n\n  setLangAttribute() {\n    const language = this._model && typeof this._model.language ? this._model.language : '';\n    const lang = language ? language.slice(0, 2) : 'en';\n    this.setAttribute('lang', lang);\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n    this._dispatchModelSet();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  set session(s) {\n    this._session = s;\n    this._rerender();\n    //TODO: remove this session-changed should only be emit on user change\n    this._dispatchResponseChanged();\n  }\n\n  _onChange(data) {\n    updateSessionValue(this._session, this._model.choiceMode, data);\n    this._dispatchResponseChanged();\n    this._rerender();\n  }\n\n  connectedCallback() {\n    this._rerender();\n  }\n}\n"],"file":"index.js"}

package/lib/multiple-choice.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.MultipleChoice = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -110,29 +108,20 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
           value = _event$target.value,
           checked = _event$target.checked;
       var _this$props = _this.props,
-          choiceMode = _this$props.choiceMode,
           maxSelections = _this$props.maxSelections,
-          onChoiceChanged = _this$props.onChoiceChanged;
+          onChoiceChanged = _this$props.onChoiceChanged,
+          session = _this$props.session;
 
-      if (choiceMode === 'radio') {
+      if (session.value && session.value.length >= maxSelections) {
+        // show/hide max selections error when user select/deselect an answer
         _this.setState({
-          selectedValue: value
+          maxSelectionsErrorState: checked
         });
-      } else {
-        var selectedValues = _this.state.selectedValues;
 
-        if (checked && selectedValues.length >= maxSelections) {
+        if (checked) {
+          // prevent selecting more answers
           return;
         }
-
-        _this.setState(function (prevState) {
-          var selectedValues = checked ? [].concat((0, _toConsumableArray2["default"])(prevState.selectedValues), [value]) : prevState.selectedValues.filter(function (currentValue) {
-            return currentValue !== value;
-          });
-          return {
-            selectedValues: selectedValues
-          };
-        });
       }
 
       onChoiceChanged({
@@ -180,9 +169,8 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
       }
     });
     _this.state = {
-      selectedValue: null,
-      selectedValues: [],
-      showCorrect: _this.props.alwaysShowCorrect || false
+      showCorrect: _this.props.alwaysShowCorrect || false,
+      maxSelectionsErrorState: false
     };
     _this.onToggle = _this.onToggle.bind((0, _assertThisInitialized2["default"])(_this));
     return _this;
@@ -194,7 +182,6 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
       var sessionValue = this.props.session && this.props.session.value;
       return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;
     } // handleChange was added for accessibility. Please see comments and videos from PD-2441.
-    // TODO: Should only be removed if a better solution is found.
 
   }, {
     key: "UNSAFE_componentWillReceiveProps",
@@ -241,11 +228,7 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
         return choice.correct || false;
       }
 
-      if (this.isSelected(choice.value)) {
-        return true;
-      }
-
-      return this.props.choiceMode === 'radio' ? this.state.selectedValue === choice.value : this.state.selectedValues.includes(choice.value);
+      return this.isSelected(choice.value);
     } // renderHeading function was added for accessibility.
 
   }, {
@@ -292,7 +275,9 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
           minSelections = _this$props3.minSelections,
           maxSelections = _this$props3.maxSelections,
           session = _this$props3.session;
-      var showCorrect = this.state.showCorrect;
+      var _this$state = this.state,
+          showCorrect = _this$state.showCorrect,
+          maxSelectionsErrorState = _this$state.maxSelectionsErrorState;
       var isEvaluateMode = mode === 'evaluate';
       var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
       var columnsStyle = gridColumns > 1 ? {
@@ -358,7 +343,7 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
       }, translator.t("translation:multipleChoice:minSelections_".concat(minSelections === 1 ? 'one' : 'other'), {
         lng: language,
         minSelections: minSelections
-      })), choiceMode === 'checkbox' && selections >= maxSelections && /*#__PURE__*/_react["default"].createElement("div", {
+      })), choiceMode === 'checkbox' && maxSelectionsErrorState && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.errorText
       }, translator.t("translation:multipleChoice:maxSelections_".concat(maxSelections === 1 ? 'one' : 'other'), {
         lng: language,

package/lib/multiple-choice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/multiple-choice.jsx"],"names":["translator","Translator","styles","theme","main","color","text","backgroundColor","background","partLabel","display","fontSize","margin","fontWeight","paddingBottom","spacing","unit","teacherInstructions","marginBottom","horizontalLayout","flexDirection","flexWrap","gridLayout","fieldset","border","padding","minWidth","srOnly","position","left","top","width","height","overflow","errorText","typography","palette","error","paddingTop","MultipleChoice","props","event","target","value","checked","choiceMode","maxSelections","onChoiceChanged","setState","selectedValue","selectedValues","state","length","prevState","filter","currentValue","selected","mode","showCorrect","onShowCorrectToggle","choice","isCorrect","correct","isChecked","isSelected","undefined","alwaysShowCorrect","onToggle","bind","sessionValue","session","indexOf","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","includes","classes","disabled","className","choices","gridColumns","prompt","responseCorrect","animationsDisabled","language","isSelectionButtonBelow","minSelections","isEvaluateMode","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","selections","teacherInstructionsDiv","renderHeading","hidden","visible","choicesLayout","map","selectedAnswerBackgroundColor","handleChange","hideTick","getChecked","getCorrectness","indexToSymbol","t","lng","React","Component","PropTypes","string","oneOf","array","object","bool","func","isRequired","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport Translator from '@pie-lib/pie-toolbox/translator';\n\nimport StyledChoice from './choice';\n\n// MultipleChoice\n\nconst { translator } = Translator;\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    '& *': {\n      '-webkit-font-smoothing': 'antialiased',\n    },\n  },\n  partLabel: {\n    display: 'block',\n    fontSize: 'inherit',\n    margin: '0',\n    fontWeight: 'normal',\n    paddingBottom: theme.spacing.unit * 2,\n  },\n  teacherInstructions: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  horizontalLayout: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  gridLayout: {\n    display: 'grid',\n  },\n  fieldset: {\n    border: '0px',\n    padding: '0.01em 0 0 0',\n    margin: '0px',\n    minWidth: '0px',\n  },\n  srOnly: {\n    position: 'absolute',\n    left: '-10000px',\n    top: 'auto',\n    width: '1px',\n    height: '1px',\n    overflow: 'hidden',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit,\n  },\n});\n\nexport class MultipleChoice extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    mode: PropTypes.oneOf(['gather', 'view', 'evaluate']),\n    choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n    keyMode: PropTypes.oneOf(['numbers', 'letters', 'none']),\n    choices: PropTypes.array,\n    partLabel: PropTypes.string,\n    prompt: PropTypes.string,\n    teacherInstructions: PropTypes.string,\n    session: PropTypes.object,\n    disabled: PropTypes.bool,\n    onChoiceChanged: PropTypes.func,\n    responseCorrect: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    correctResponse: PropTypes.array,\n    choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n    gridColumns: PropTypes.string,\n    alwaysShowCorrect: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n    language: PropTypes.string,\n    selectedAnswerBackgroundColor: PropTypes.string,\n    onShowCorrectToggle: PropTypes.func,\n    isSelectionButtonBelow: PropTypes.bool,\n    minSelections: PropTypes.number,\n    maxSelections: PropTypes.number,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      selectedValue: null,\n      selectedValues: [],\n      showCorrect: this.props.alwaysShowCorrect || false,\n    };\n\n    this.onToggle = this.onToggle.bind(this);\n  }\n\n  isSelected(value) {\n    const sessionValue = this.props.session && this.props.session.value;\n\n    return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;\n  }\n\n  // handleChange was added for accessibility. Please see comments and videos from PD-2441.\n  // TODO: Should only be removed if a better solution is found.\n  handleChange = (event) => {\n    const { value, checked } = event.target;\n    const { choiceMode, maxSelections, onChoiceChanged } = this.props;\n\n    if (choiceMode === 'radio') {\n      this.setState({ selectedValue: value });\n    } else {\n      const { selectedValues } = this.state;\n\n      if (checked && selectedValues.length >= maxSelections) {\n        return;\n      }\n\n      this.setState((prevState) => {\n        const selectedValues = checked\n          ? [...prevState.selectedValues, value]\n          : prevState.selectedValues.filter((currentValue) => currentValue !== value);\n\n        return { selectedValues };\n      });\n    }\n\n    onChoiceChanged({ value, selected: checked });\n  };\n\n  onToggle = () => {\n    if (this.props.mode === 'evaluate') {\n      this.setState({ showCorrect: !this.state.showCorrect }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!nextProps.correctResponse && this.state.showCorrect !== false) {\n      this.setState({ showCorrect: false }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n\n    if (nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {\n      this.setState({ showCorrect: true }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n  }\n\n  indexToSymbol(index) {\n    if (this.props.keyMode === 'numbers') {\n      return `${index + 1}`;\n    }\n\n    if (this.props.keyMode === 'letters') {\n      return String.fromCharCode(97 + index).toUpperCase();\n    }\n\n    return '';\n  }\n\n  getCorrectness = (choice = {}) => {\n    const isCorrect = choice.correct;\n    const isChecked = this.isSelected(choice.value);\n\n    if (this.state.showCorrect) {\n      return isCorrect ? 'correct' : undefined;\n    }\n\n    if (isCorrect) {\n      if (isChecked) {\n        // A correct answer is selected: marked with a green checkmark\n        return 'correct';\n      } else {\n        // A correct answer is NOT selected: marked with an orange X\n        return 'incorrect';\n      }\n    } else {\n      if (isChecked) {\n        // An incorrect answer is selected: marked with an orange X\n        return 'incorrect';\n      } else {\n        // An incorrect answer is NOT selected: not marked\n        return undefined;\n      }\n    }\n  };\n\n  getChecked(choice) {\n    if (this.state.showCorrect) {\n      return choice.correct || false;\n    }\n\n    if (this.isSelected(choice.value)) {\n      return true;\n    }\n\n    return this.props.choiceMode === 'radio'\n      ? this.state.selectedValue === choice.value\n      : this.state.selectedValues.includes(choice.value);\n  }\n\n  // renderHeading function was added for accessibility.\n  renderHeading() {\n    const { mode, choiceMode, classes } = this.props;\n\n    if (mode !== 'gather') {\n      return null;\n    }\n\n    return choiceMode === 'radio' ? (\n      <h2 className={classes.srOnly}>Multiple Choice Question</h2>\n    ) : (\n      <h2 className={classes.srOnly}>Multiple Select Question</h2>\n    );\n  }\n\n  render() {\n    const {\n      mode,\n      disabled,\n      className,\n      choices = [],\n      choiceMode,\n      gridColumns,\n      partLabel,\n      prompt,\n      responseCorrect,\n      teacherInstructions,\n      classes,\n      alwaysShowCorrect,\n      animationsDisabled,\n      language,\n      isSelectionButtonBelow,\n      minSelections,\n      maxSelections,\n      session,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n    const columnsStyle = gridColumns > 1 ? { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` } : undefined;\n    const selections = (session.value && session.value.length) || 0;\n\n    const teacherInstructionsDiv = (\n      <PreviewPrompt\n        tagName=\"div\"\n        className=\"prompt\"\n        defaultClassName=\"teacher-instructions\"\n        prompt={teacherInstructions}\n      />\n    );\n\n    return (\n      <div className={classNames(classes.main, className, 'multiple-choice')}>\n        {partLabel && <h3 className={classes.partLabel}>{partLabel}</h3>}\n\n        {this.renderHeading()}\n\n        {teacherInstructions && (\n          <div className={classes.teacherInstructions}>\n            {!animationsDisabled ? (\n              <Collapsible\n                labels={{\n                  hidden: 'Show Teacher Instructions',\n                  visible: 'Hide Teacher Instructions',\n                }}\n              >\n                {teacherInstructionsDiv}\n              </Collapsible>\n            ) : (\n              teacherInstructionsDiv\n            )}\n          </div>\n        )}\n\n        <fieldset className={classes.fieldset}>\n          <PreviewPrompt className=\"prompt\" defaultClassName=\"prompt\" prompt={prompt} tagName={'legend'} />\n\n          {!alwaysShowCorrect && (\n            <CorrectAnswerToggle\n              show={showCorrectAnswerToggle}\n              toggled={showCorrect}\n              onToggle={this.onToggle.bind(this)}\n              language={language}\n            />\n          )}\n\n          <div\n            className={classNames({\n              [classes.gridLayout]: this.props.choicesLayout === 'grid',\n              [classes.horizontalLayout]: this.props.choicesLayout === 'horizontal',\n            })}\n            style={columnsStyle}\n          >\n            {choices.map((choice, index) => (\n              <StyledChoice\n                choicesLayout={this.props.choicesLayout}\n                selectedAnswerBackgroundColor={this.props.selectedAnswerBackgroundColor}\n                gridColumns={gridColumns}\n                key={`choice-${index}`}\n                choice={choice}\n                index={index}\n                choicesLength={choices.length}\n                showCorrect={showCorrect}\n                isEvaluateMode={isEvaluateMode}\n                choiceMode={choiceMode}\n                disabled={disabled}\n                onChoiceChanged={this.handleChange}\n                hideTick={choice.hideTick}\n                checked={this.getChecked(choice)}\n                correctness={isEvaluateMode ? this.getCorrectness(choice) : undefined}\n                displayKey={this.indexToSymbol(index)}\n                isSelectionButtonBelow={isSelectionButtonBelow}\n              />\n            ))}\n          </div>\n        </fieldset>\n\n        {choiceMode === 'checkbox' && selections < minSelections && (\n          <div className={classes.errorText}>\n            {translator.t(`translation:multipleChoice:minSelections_${minSelections === 1 ? 'one' : 'other'}`, {\n              lng: language,\n              minSelections,\n            })}\n          </div>\n        )}\n        {choiceMode === 'checkbox' && selections >= maxSelections && (\n          <div className={classes.errorText}>\n            {translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {\n              lng: language,\n              maxSelections,\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nMultipleChoice.defaultProps = {\n  session: {\n    value: [],\n  },\n};\n\nexport default withStyles(styles)(MultipleChoice);\n"],"file":"multiple-choice.js"}
+{"version":3,"sources":["../src/multiple-choice.jsx"],"names":["translator","Translator","styles","theme","main","color","text","backgroundColor","background","partLabel","display","fontSize","margin","fontWeight","paddingBottom","spacing","unit","teacherInstructions","marginBottom","horizontalLayout","flexDirection","flexWrap","gridLayout","fieldset","border","padding","minWidth","srOnly","position","left","top","width","height","overflow","errorText","typography","palette","error","paddingTop","MultipleChoice","props","event","target","value","checked","maxSelections","onChoiceChanged","session","length","setState","maxSelectionsErrorState","selected","mode","showCorrect","state","onShowCorrectToggle","choice","isCorrect","correct","isChecked","isSelected","undefined","alwaysShowCorrect","onToggle","bind","sessionValue","indexOf","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","choiceMode","classes","disabled","className","choices","gridColumns","prompt","responseCorrect","animationsDisabled","language","isSelectionButtonBelow","minSelections","isEvaluateMode","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","selections","teacherInstructionsDiv","renderHeading","hidden","visible","choicesLayout","map","selectedAnswerBackgroundColor","handleChange","hideTick","getChecked","getCorrectness","indexToSymbol","t","lng","React","Component","PropTypes","string","oneOf","array","object","bool","func","isRequired","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport Translator from '@pie-lib/pie-toolbox/translator';\n\nimport StyledChoice from './choice';\n\n// MultipleChoice\n\nconst { translator } = Translator;\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    '& *': {\n      '-webkit-font-smoothing': 'antialiased',\n    },\n  },\n  partLabel: {\n    display: 'block',\n    fontSize: 'inherit',\n    margin: '0',\n    fontWeight: 'normal',\n    paddingBottom: theme.spacing.unit * 2,\n  },\n  teacherInstructions: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  horizontalLayout: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  gridLayout: {\n    display: 'grid',\n  },\n  fieldset: {\n    border: '0px',\n    padding: '0.01em 0 0 0',\n    margin: '0px',\n    minWidth: '0px',\n  },\n  srOnly: {\n    position: 'absolute',\n    left: '-10000px',\n    top: 'auto',\n    width: '1px',\n    height: '1px',\n    overflow: 'hidden',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit,\n  },\n});\n\nexport class MultipleChoice extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    mode: PropTypes.oneOf(['gather', 'view', 'evaluate']),\n    choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n    keyMode: PropTypes.oneOf(['numbers', 'letters', 'none']),\n    choices: PropTypes.array,\n    partLabel: PropTypes.string,\n    prompt: PropTypes.string,\n    teacherInstructions: PropTypes.string,\n    session: PropTypes.object,\n    disabled: PropTypes.bool,\n    onChoiceChanged: PropTypes.func,\n    responseCorrect: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    correctResponse: PropTypes.array,\n    choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n    gridColumns: PropTypes.string,\n    alwaysShowCorrect: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n    language: PropTypes.string,\n    selectedAnswerBackgroundColor: PropTypes.string,\n    onShowCorrectToggle: PropTypes.func,\n    isSelectionButtonBelow: PropTypes.bool,\n    minSelections: PropTypes.number,\n    maxSelections: PropTypes.number,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showCorrect: this.props.alwaysShowCorrect || false,\n      maxSelectionsErrorState: false,\n    };\n\n    this.onToggle = this.onToggle.bind(this);\n  }\n\n  isSelected(value) {\n    const sessionValue = this.props.session && this.props.session.value;\n\n    return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;\n  }\n\n  // handleChange was added for accessibility. Please see comments and videos from PD-2441.\n  handleChange = (event) => {\n    const { value, checked } = event.target;\n    const { maxSelections, onChoiceChanged, session } = this.props;\n\n    if (session.value && session.value.length >= maxSelections) {\n      // show/hide max selections error when user select/deselect an answer\n      this.setState({ maxSelectionsErrorState: checked });\n\n      if (checked) {\n        // prevent selecting more answers\n        return;\n      }\n    }\n\n    onChoiceChanged({ value, selected: checked });\n  };\n\n  onToggle = () => {\n    if (this.props.mode === 'evaluate') {\n      this.setState({ showCorrect: !this.state.showCorrect }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!nextProps.correctResponse && this.state.showCorrect !== false) {\n      this.setState({ showCorrect: false }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n\n    if (nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {\n      this.setState({ showCorrect: true }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n  }\n\n  indexToSymbol(index) {\n    if (this.props.keyMode === 'numbers') {\n      return `${index + 1}`;\n    }\n\n    if (this.props.keyMode === 'letters') {\n      return String.fromCharCode(97 + index).toUpperCase();\n    }\n\n    return '';\n  }\n\n  getCorrectness = (choice = {}) => {\n    const isCorrect = choice.correct;\n    const isChecked = this.isSelected(choice.value);\n\n    if (this.state.showCorrect) {\n      return isCorrect ? 'correct' : undefined;\n    }\n\n    if (isCorrect) {\n      if (isChecked) {\n        // A correct answer is selected: marked with a green checkmark\n        return 'correct';\n      } else {\n        // A correct answer is NOT selected: marked with an orange X\n        return 'incorrect';\n      }\n    } else {\n      if (isChecked) {\n        // An incorrect answer is selected: marked with an orange X\n        return 'incorrect';\n      } else {\n        // An incorrect answer is NOT selected: not marked\n        return undefined;\n      }\n    }\n  };\n\n  getChecked(choice) {\n    if (this.state.showCorrect) {\n      return choice.correct || false;\n    }\n\n    return this.isSelected(choice.value);\n  }\n\n  // renderHeading function was added for accessibility.\n  renderHeading() {\n    const { mode, choiceMode, classes } = this.props;\n\n    if (mode !== 'gather') {\n      return null;\n    }\n\n    return choiceMode === 'radio' ? (\n      <h2 className={classes.srOnly}>Multiple Choice Question</h2>\n    ) : (\n      <h2 className={classes.srOnly}>Multiple Select Question</h2>\n    );\n  }\n\n  render() {\n    const {\n      mode,\n      disabled,\n      className,\n      choices = [],\n      choiceMode,\n      gridColumns,\n      partLabel,\n      prompt,\n      responseCorrect,\n      teacherInstructions,\n      classes,\n      alwaysShowCorrect,\n      animationsDisabled,\n      language,\n      isSelectionButtonBelow,\n      minSelections,\n      maxSelections,\n      session,\n    } = this.props;\n    const { showCorrect, maxSelectionsErrorState } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n    const columnsStyle = gridColumns > 1 ? { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` } : undefined;\n    const selections = (session.value && session.value.length) || 0;\n\n    const teacherInstructionsDiv = (\n      <PreviewPrompt\n        tagName=\"div\"\n        className=\"prompt\"\n        defaultClassName=\"teacher-instructions\"\n        prompt={teacherInstructions}\n      />\n    );\n\n    return (\n      <div className={classNames(classes.main, className, 'multiple-choice')}>\n        {partLabel && <h3 className={classes.partLabel}>{partLabel}</h3>}\n\n        {this.renderHeading()}\n\n        {teacherInstructions && (\n          <div className={classes.teacherInstructions}>\n            {!animationsDisabled ? (\n              <Collapsible\n                labels={{\n                  hidden: 'Show Teacher Instructions',\n                  visible: 'Hide Teacher Instructions',\n                }}\n              >\n                {teacherInstructionsDiv}\n              </Collapsible>\n            ) : (\n              teacherInstructionsDiv\n            )}\n          </div>\n        )}\n\n        <fieldset className={classes.fieldset}>\n          <PreviewPrompt className=\"prompt\" defaultClassName=\"prompt\" prompt={prompt} tagName={'legend'} />\n\n          {!alwaysShowCorrect && (\n            <CorrectAnswerToggle\n              show={showCorrectAnswerToggle}\n              toggled={showCorrect}\n              onToggle={this.onToggle.bind(this)}\n              language={language}\n            />\n          )}\n\n          <div\n            className={classNames({\n              [classes.gridLayout]: this.props.choicesLayout === 'grid',\n              [classes.horizontalLayout]: this.props.choicesLayout === 'horizontal',\n            })}\n            style={columnsStyle}\n          >\n            {choices.map((choice, index) => (\n              <StyledChoice\n                choicesLayout={this.props.choicesLayout}\n                selectedAnswerBackgroundColor={this.props.selectedAnswerBackgroundColor}\n                gridColumns={gridColumns}\n                key={`choice-${index}`}\n                choice={choice}\n                index={index}\n                choicesLength={choices.length}\n                showCorrect={showCorrect}\n                isEvaluateMode={isEvaluateMode}\n                choiceMode={choiceMode}\n                disabled={disabled}\n                onChoiceChanged={this.handleChange}\n                hideTick={choice.hideTick}\n                checked={this.getChecked(choice)}\n                correctness={isEvaluateMode ? this.getCorrectness(choice) : undefined}\n                displayKey={this.indexToSymbol(index)}\n                isSelectionButtonBelow={isSelectionButtonBelow}\n              />\n            ))}\n          </div>\n        </fieldset>\n\n        {choiceMode === 'checkbox' && selections < minSelections && (\n          <div className={classes.errorText}>\n            {translator.t(`translation:multipleChoice:minSelections_${minSelections === 1 ? 'one' : 'other'}`, {\n              lng: language,\n              minSelections,\n            })}\n          </div>\n        )}\n        {choiceMode === 'checkbox' && maxSelectionsErrorState && (\n          <div className={classes.errorText}>\n            {translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {\n              lng: language,\n              maxSelections,\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nMultipleChoice.defaultProps = {\n  session: {\n    value: [],\n  },\n};\n\nexport default withStyles(styles)(MultipleChoice);\n"],"file":"multiple-choice.js"}

package/module/configure.js

@@ -1,5 +1,5 @@
 import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.0.1/module/index.js";
-import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@5.7.1/module/index.js";
+import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@5.7.2/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;

package/module/element.js

@@ -1,5 +1,5 @@
 import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.0.1/module/index.js";
-import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.7.1/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.7.2/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -1381,8 +1381,8 @@ function createMuiTheme() {
 var _default$C = createMuiTheme;
 createMuiTheme$1.default = _default$C;
 var jssPreset$1 = {};
+var lib$8 = {};
 var lib$7 = {};
-var lib$6 = {};
 var getDynamicStyles = {};
 (function (exports) {
   Object.defineProperty(exports, "__esModule", {
@@ -3631,8 +3631,8 @@ getDefaultExportFromCjs(Jss);
     return new _Jss2['default'](options);
   };
   exports['default'] = create();
-})(lib$6);
-getDefaultExportFromCjs(lib$6);
+})(lib$7);
+getDefaultExportFromCjs(lib$7);
 (function (exports) {
   Object.defineProperty(exports, "__esModule", {
     value: true
@@ -3665,7 +3665,7 @@ getDefaultExportFromCjs(lib$6);
     };
   })();
   exports['default'] = jssGlobal;
-  var _jss = lib$6;
+  var _jss = lib$7;
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -3792,9 +3792,9 @@ getDefaultExportFromCjs(lib$6);
       onProcessRule: onProcessRule
     };
   }
-})(lib$7);
-getDefaultExportFromCjs(lib$7);
-var lib$5 = {};
+})(lib$8);
+getDefaultExportFromCjs(lib$8);
+var lib$6 = {};
 var warning = function () {};
 {
   warning = function (condition, format, args) {
@@ -3824,7 +3824,7 @@ var warning = function () {};
   };
 }
 var browser = warning;
-Object.defineProperty(lib$5, "__esModule", {
+Object.defineProperty(lib$6, "__esModule", {
   value: true
 });
 var _extends = Object.assign || (function (target) {
@@ -3838,7 +3838,7 @@ var _extends = Object.assign || (function (target) {
   }
   return target;
 });
-lib$5.default = jssNested;
+lib$6.default = jssNested;
 var _warning$6 = browser;
 var _warning2 = _interopRequireDefault$A(_warning$6);
 function _interopRequireDefault$A(obj) {
@@ -3916,7 +3916,7 @@ function jssNested() {
     onProcessStyle: onProcessStyle
   };
 }
-var lib$4 = {};
+var lib$5 = {};
 var uppercasePattern = /[A-Z]/g;
 var msPattern = /^ms-/;
 var cache = {};
@@ -3978,9 +3978,9 @@ var require$$0$6 = getAugmentedNamespace(hyphenateStyleName$1);
       onChangeValue: onChangeValue
     };
   }
-})(lib$4);
-getDefaultExportFromCjs(lib$4);
-var lib$3 = {};
+})(lib$5);
+getDefaultExportFromCjs(lib$5);
+var lib$4 = {};
 var defaultUnits = {};
 (function (exports) {
   Object.defineProperty(exports, "__esModule", {
@@ -4171,10 +4171,10 @@ getDefaultExportFromCjs(defaultUnits);
       onChangeValue: onChangeValue
     };
   }
-})(lib$3);
-getDefaultExportFromCjs(lib$3);
+})(lib$4);
+getDefaultExportFromCjs(lib$4);
+var lib$3 = {};
 var lib$2 = {};
-var lib$1 = {};
 var prefix = {};
 (function (exports) {
   Object.defineProperty(exports, "__esModule", {
@@ -4334,14 +4334,14 @@ getDefaultExportFromCjs(supportedValue);
   exports.prefix = _prefix2['default'];
   exports.supportedProperty = _supportedProperty2['default'];
   exports.supportedValue = _supportedValue2['default'];
-})(lib$1);
-getDefaultExportFromCjs(lib$1);
+})(lib$2);
+getDefaultExportFromCjs(lib$2);
 (function (exports) {
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
   exports['default'] = jssVendorPrefixer;
-  var _cssVendor = lib$1;
+  var _cssVendor = lib$2;
   var vendor = _interopRequireWildcard(_cssVendor);
   function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
@@ -4389,9 +4389,9 @@ getDefaultExportFromCjs(lib$1);
       onChangeValue: onChangeValue
     };
   }
-})(lib$2);
-getDefaultExportFromCjs(lib$2);
-var lib = {};
+})(lib$3);
+getDefaultExportFromCjs(lib$3);
+var lib$1 = {};
 (function (exports) {
   Object.defineProperty(exports, "__esModule", {
     value: true
@@ -4414,19 +4414,19 @@ var lib = {};
       onProcessStyle: onProcessStyle
     };
   }
-})(lib);
-getDefaultExportFromCjs(lib);
+})(lib$1);
+getDefaultExportFromCjs(lib$1);
 var _interopRequireDefault$z = interopRequireDefault.exports;
 Object.defineProperty(jssPreset$1, "__esModule", {
   value: true
 });
 jssPreset$1.default = void 0;
-var _jssGlobal = _interopRequireDefault$z(lib$7);
-var _jssNested = _interopRequireDefault$z(lib$5);
-var _jssCamelCase = _interopRequireDefault$z(lib$4);
-var _jssDefaultUnit = _interopRequireDefault$z(lib$3);
-var _jssVendorPrefixer = _interopRequireDefault$z(lib$2);
-var _jssPropsSort = _interopRequireDefault$z(lib);
+var _jssGlobal = _interopRequireDefault$z(lib$8);
+var _jssNested = _interopRequireDefault$z(lib$6);
+var _jssCamelCase = _interopRequireDefault$z(lib$5);
+var _jssDefaultUnit = _interopRequireDefault$z(lib$4);
+var _jssVendorPrefixer = _interopRequireDefault$z(lib$3);
+var _jssPropsSort = _interopRequireDefault$z(lib$1);
 function jssPreset() {
   return {
     plugins: [(0, _jssGlobal.default)(), (0, _jssNested.default)(), (0, _jssCamelCase.default)(), (0, _jssDefaultUnit.default)(), typeof window === 'undefined' ? null : (0, _jssVendorPrefixer.default)(), (0, _jssPropsSort.default)()]
@@ -5026,7 +5026,7 @@ var _propTypes$d = _interopRequireDefault$u(require$$10$4);
 var _warning$2 = _interopRequireDefault$u(warning_1);
 var _hoistNonReactStatics$2 = _interopRequireDefault$u(hoistNonReactStatics_cjs);
 var _utils$7 = require$$7$1;
-var _jss = lib$6;
+var _jss = lib$7;
 var _reactJssContext = _interopRequireDefault$u(reactJssContext);
 var _jssPreset = _interopRequireDefault$u(jssPreset$1);
 var _mergeClasses = _interopRequireDefault$u(mergeClasses$1);
@@ -8414,7 +8414,7 @@ var en = {};
       },
       imageClozeAssociation: {
         reachedLimit_one: 'You’ve reached the limit of {{count}} response per area. To add another response, one must first be removed.',
-        reachedLimit_other: 'You’ve reached the limit of {{count}} responses per area. To add another response, one must first be removed.'
+        reachedLimit_other: 'Full'
       },
       drawingResponse: {
         fillColor: 'Fill color',
@@ -8507,7 +8507,7 @@ var es = {};
       },
       imageClozeAssociation: {
         reachedLimit_one: 'Has alcanzado el límite de {{count}} respuesta por área. Para agregar otra respuesta, primero se debe eliminar una respuesta.',
-        reachedLimit_other: 'Has alcanzado el límite de {{count}} respuestas por área. Para agregar otra respuesta, primero se debe eliminar una respuesta.'
+        reachedLimit_other: 'Lleno'
       },
       drawingResponse: {
         fillColor: 'Color de relleno',
@@ -12666,9 +12666,8 @@ class MultipleChoice$1 extends React$2.Component {
     MultipleChoice$1.prototype.__init2.call(this);
     MultipleChoice$1.prototype.__init3.call(this);
     this.state = {
-      selectedValue: null,
-      selectedValues: [],
-      showCorrect: this.props.alwaysShowCorrect || false
+      showCorrect: this.props.alwaysShowCorrect || false,
+      maxSelectionsErrorState: false
     };
     this.onToggle = this.onToggle.bind(this);
   }
@@ -12679,22 +12678,14 @@ class MultipleChoice$1 extends React$2.Component {
   __init() {
     this.handleChange = event => {
       const {value, checked} = event.target;
-      const {choiceMode, maxSelections, onChoiceChanged} = this.props;
-      if (choiceMode === 'radio') {
+      const {maxSelections, onChoiceChanged, session} = this.props;
+      if (session.value && session.value.length >= maxSelections) {
         this.setState({
-          selectedValue: value
+          maxSelectionsErrorState: checked
         });
-      } else {
-        const {selectedValues} = this.state;
-        if (checked && selectedValues.length >= maxSelections) {
+        if (checked) {
           return;
         }
-        this.setState(prevState => {
-          const selectedValues = checked ? [...prevState.selectedValues, value] : prevState.selectedValues.filter(currentValue => currentValue !== value);
-          return {
-            selectedValues
-          };
-        });
       }
       onChoiceChanged({
         value,
@@ -12770,10 +12761,7 @@ class MultipleChoice$1 extends React$2.Component {
     if (this.state.showCorrect) {
       return choice.correct || false;
     }
-    if (this.isSelected(choice.value)) {
-      return true;
-    }
-    return this.props.choiceMode === 'radio' ? this.state.selectedValue === choice.value : this.state.selectedValues.includes(choice.value);
+    return this.isSelected(choice.value);
   }
   renderHeading() {
     const {mode, choiceMode, classes} = this.props;
@@ -12785,20 +12773,20 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 225
+        lineNumber: 209
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 227
+        lineNumber: 211
       }
     }, "Multiple Select Question");
   }
   render() {
     const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, session} = this.props;
-    const {showCorrect} = this.state;
+    const {showCorrect, maxSelectionsErrorState} = this.state;
     const isEvaluateMode = mode === 'evaluate';
     const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
     const columnsStyle = gridColumns > 1 ? {
@@ -12813,7 +12801,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 259
+        lineNumber: 243
       }
     });
     return React$2.createElement('div', {
@@ -12821,21 +12809,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 268
+        lineNumber: 252
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 269
+        lineNumber: 253
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 274
+        lineNumber: 258
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12845,14 +12833,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 276
+        lineNumber: 260
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 290
+        lineNumber: 274
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
@@ -12862,7 +12850,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 291
+        lineNumber: 275
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12872,7 +12860,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 294
+        lineNumber: 278
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12883,7 +12871,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 302
+        lineNumber: 286
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -12906,24 +12894,24 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 310
+        lineNumber: 294
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 334
+        lineNumber: 318
       }
     }, translator.t(`translation:multipleChoice:minSelections_${minSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
       minSelections
-    })), choiceMode === 'checkbox' && selections >= maxSelections && React$2.createElement('div', {
+    })), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 342
+        lineNumber: 326
       }
     }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
@@ -13015,6 +13003,43 @@ const Root = props => React$1.createElement(styles$b.MuiThemeProvider, {
     lineNumber: 59
   }
 }));
+var lib = {};
+Object.defineProperty(lib, "__esModule", {
+  value: true
+});
+class ModelSetEvent extends CustomEvent {
+  constructor(component, complete, hasModel) {
+    super(ModelSetEvent.TYPE, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        complete,
+        component,
+        hasModel
+      }
+    });
+    this.component = component;
+    this.complete = complete;
+  }
+}
+ModelSetEvent.TYPE = 'model-set';
+var ModelSetEvent_1 = lib.ModelSetEvent = ModelSetEvent;
+class SessionChangedEvent extends CustomEvent {
+  constructor(component, complete) {
+    super(SessionChangedEvent.TYPE, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        complete,
+        component
+      }
+    });
+    this.component = component;
+    this.complete = complete;
+  }
+}
+SessionChangedEvent.TYPE = 'session-changed';
+var SessionChangedEvent_1 = lib.SessionChangedEvent = SessionChangedEvent;
 const {concat: concat} = _dll_lodash;
 const {uniq: uniq} = _dll_lodash;
 const {without: without} = _dll_lodash;
@@ -13045,7 +13070,7 @@ const isComplete = (session, model) => {
   if (!session || !session.value) {
     return false;
   }
-  const {choiceMode, minSelections, maxSelections} = model || ({});
+  const {choiceMode, minSelections = 1, maxSelections} = model || ({});
   const selections = session.value.length || 0;
   if (choiceMode === 'radio') {
     return !!selections;
@@ -13083,27 +13108,10 @@ class MultipleChoice extends HTMLElement {
       trailing: true
     });
     this._dispatchResponseChanged = debounce(() => {
-      console.log('>> dispatch event');
-      var event = new CustomEvent('session-changed', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          complete: isComplete(this._session, this._model),
-          component: this.tagName.toLowerCase()
-        }
-      });
-      this.dispatchEvent(event);
+      this.dispatchEvent(new SessionChangedEvent_1(this.tagName.toLowerCase(), isComplete(this._session, this._model)));
     });
     this._dispatchModelSet = debounce(() => {
-      this.dispatchEvent(new CustomEvent('model-set', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          complete: isComplete(this._session, this._model),
-          component: this.tagName.toLowerCase(),
-          hasModel: this._model !== undefined
-        }
-      }));
+      this.dispatchEvent(new ModelSetEvent_1(this.tagName.toLowerCase(), isComplete(this._session, this._model), this._model !== undefined));
     }, 50, {
       leading: false,
       trailing: true

package/module/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/multiple-choice@9.7.1</title>
+      <title>@pie-element/multiple-choice@9.7.2</title>
       <script
         type="module"
         src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>

package/module/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/multiple-choice",
-  "version": "9.7.1",
+  "version": "9.7.2",
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
@@ -8,7 +8,7 @@
     },
     {
       "name": "@pie-lib/pie-toolbox-module",
-      "version": "5.7.1"
+      "version": "5.7.2"
     }
   ]
 }

package/module/print.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/multiple-choice@9.7.1</title>
+      <title>@pie-element/multiple-choice@9.7.2</title>
       <link
         href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
         rel="stylesheet"

package/module/print.js

@@ -1,5 +1,5 @@
 import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_pie_lib__pie_toolbox_math_rendering, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.0.1/module/index.js";
-import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.7.1/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.7.2/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -8414,7 +8414,7 @@ var en = {};
       },
       imageClozeAssociation: {
         reachedLimit_one: 'You’ve reached the limit of {{count}} response per area. To add another response, one must first be removed.',
-        reachedLimit_other: 'You’ve reached the limit of {{count}} responses per area. To add another response, one must first be removed.'
+        reachedLimit_other: 'Full'
       },
       drawingResponse: {
         fillColor: 'Fill color',
@@ -8507,7 +8507,7 @@ var es = {};
       },
       imageClozeAssociation: {
         reachedLimit_one: 'Has alcanzado el límite de {{count}} respuesta por área. Para agregar otra respuesta, primero se debe eliminar una respuesta.',
-        reachedLimit_other: 'Has alcanzado el límite de {{count}} respuestas por área. Para agregar otra respuesta, primero se debe eliminar una respuesta.'
+        reachedLimit_other: 'Lleno'
       },
       drawingResponse: {
         fillColor: 'Color de relleno',
@@ -12666,9 +12666,8 @@ class MultipleChoice extends React$2.Component {
     MultipleChoice.prototype.__init2.call(this);
     MultipleChoice.prototype.__init3.call(this);
     this.state = {
-      selectedValue: null,
-      selectedValues: [],
-      showCorrect: this.props.alwaysShowCorrect || false
+      showCorrect: this.props.alwaysShowCorrect || false,
+      maxSelectionsErrorState: false
     };
     this.onToggle = this.onToggle.bind(this);
   }
@@ -12679,22 +12678,14 @@ class MultipleChoice extends React$2.Component {
   __init() {
     this.handleChange = event => {
       const {value, checked} = event.target;
-      const {choiceMode, maxSelections, onChoiceChanged} = this.props;
-      if (choiceMode === 'radio') {
+      const {maxSelections, onChoiceChanged, session} = this.props;
+      if (session.value && session.value.length >= maxSelections) {
         this.setState({
-          selectedValue: value
+          maxSelectionsErrorState: checked
         });
-      } else {
-        const {selectedValues} = this.state;
-        if (checked && selectedValues.length >= maxSelections) {
+        if (checked) {
           return;
         }
-        this.setState(prevState => {
-          const selectedValues = checked ? [...prevState.selectedValues, value] : prevState.selectedValues.filter(currentValue => currentValue !== value);
-          return {
-            selectedValues
-          };
-        });
       }
       onChoiceChanged({
         value,
@@ -12770,10 +12761,7 @@ class MultipleChoice extends React$2.Component {
     if (this.state.showCorrect) {
       return choice.correct || false;
     }
-    if (this.isSelected(choice.value)) {
-      return true;
-    }
-    return this.props.choiceMode === 'radio' ? this.state.selectedValue === choice.value : this.state.selectedValues.includes(choice.value);
+    return this.isSelected(choice.value);
   }
   renderHeading() {
     const {mode, choiceMode, classes} = this.props;
@@ -12785,20 +12773,20 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 225
+        lineNumber: 209
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 227
+        lineNumber: 211
       }
     }, "Multiple Select Question");
   }
   render() {
     const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, session} = this.props;
-    const {showCorrect} = this.state;
+    const {showCorrect, maxSelectionsErrorState} = this.state;
     const isEvaluateMode = mode === 'evaluate';
     const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
     const columnsStyle = gridColumns > 1 ? {
@@ -12813,7 +12801,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 259
+        lineNumber: 243
       }
     });
     return React$2.createElement('div', {
@@ -12821,21 +12809,21 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 268
+        lineNumber: 252
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 269
+        lineNumber: 253
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 274
+        lineNumber: 258
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12845,14 +12833,14 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 276
+        lineNumber: 260
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 290
+        lineNumber: 274
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
@@ -12862,7 +12850,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 291
+        lineNumber: 275
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12872,7 +12860,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 294
+        lineNumber: 278
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12883,7 +12871,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 302
+        lineNumber: 286
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -12906,24 +12894,24 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 310
+        lineNumber: 294
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 334
+        lineNumber: 318
       }
     }, translator.t(`translation:multipleChoice:minSelections_${minSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
       minSelections
-    })), choiceMode === 'checkbox' && selections >= maxSelections && React$2.createElement('div', {
+    })), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 342
+        lineNumber: 326
       }
     }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@pie-element/multiple-choice",
   "repository": "pie-framework/pie-elements",
-  "version": "9.7.2-next.7+2e72baca5",
+  "version": "9.7.3-next.0+2a0a60cdf",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-lib/pie-toolbox": "2.6.1",
+    "@pie-framework/pie-player-events": "^0.1.0",
+    "@pie-lib/pie-toolbox": "2.7.0",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "enzyme-to-json": "^3.3.3",
@@ -18,7 +19,7 @@
     "react-test-renderer": "^16.3.2",
     "react-transition-group": "^2.3.1"
   },
-  "gitHead": "2e72baca5a8804c802a4bd5e45ff59feccee930e",
+  "gitHead": "2a0a60cdf75f18725a6db32733bfbc101efe0ee3",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },