@pie-element/inline-dropdown 5.10.2-next.17 → 5.10.2-next.18

package/controller/lib/utils.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAllCorrectResponses = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var getAllCorrectResponses = function getAllCorrectResponses(_ref) {
+  var choices = _ref.choices,
+      alternateResponse = _ref.alternateResponse;
+  alternateResponse = alternateResponse || {};
+  var correctAnswers = {};
+  (0, _forEach["default"])(choices, function (respArea, key) {
+    if (!correctAnswers[key]) {
+      correctAnswers[key] = [];
+    }
+
+    if (respArea) {
+      respArea.forEach(function (choice) {
+        if (choice.correct) {
+          correctAnswers[key].push(choice.value);
+
+          if (alternateResponse[key]) {
+            correctAnswers[key] = [].concat((0, _toConsumableArray2["default"])(correctAnswers[key]), (0, _toConsumableArray2["default"])(alternateResponse[key]));
+          }
+        }
+      });
+    }
+  });
+  return correctAnswers;
+};
+
+exports.getAllCorrectResponses = getAllCorrectResponses;
+//# sourceMappingURL=utils.js.map

package/controller/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.js"],"names":["getAllCorrectResponses","choices","alternateResponse","correctAnswers","respArea","key","forEach","choice","correct","push","value"],"mappings":";;;;;;;;;;;AAAA;;AAEO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAyB,OAAoC;AAAA,MAAjCC,OAAiC,QAAjCA,OAAiC;AAAA,MAAxBC,iBAAwB,QAAxBA,iBAAwB;AACxEA,EAAAA,iBAAiB,GAAGA,iBAAiB,IAAI,EAAzC;AACA,MAAMC,cAAc,GAAG,EAAvB;AAEA,2BAAQF,OAAR,EAAiB,UAACG,QAAD,EAAWC,GAAX,EAAmB;AAClC,QAAI,CAACF,cAAc,CAACE,GAAD,CAAnB,EAA0B;AACxBF,MAAAA,cAAc,CAACE,GAAD,CAAd,GAAsB,EAAtB;AACD;;AAED,QAAID,QAAJ,EAAc;AACZA,MAAAA,QAAQ,CAACE,OAAT,CAAiB,UAACC,MAAD,EAAY;AAC3B,YAAIA,MAAM,CAACC,OAAX,EAAoB;AAClBL,UAAAA,cAAc,CAACE,GAAD,CAAd,CAAoBI,IAApB,CAAyBF,MAAM,CAACG,KAAhC;;AAEA,cAAIR,iBAAiB,CAACG,GAAD,CAArB,EAA4B;AAC1BF,YAAAA,cAAc,CAACE,GAAD,CAAd,iDAA0BF,cAAc,CAACE,GAAD,CAAxC,uCAAkDH,iBAAiB,CAACG,GAAD,CAAnE;AACD;AACF;AACF,OARD;AASD;AACF,GAhBD;AAkBA,SAAOF,cAAP;AACD,CAvBM","sourcesContent":["import forEach from 'lodash/forEach';\n\nexport const getAllCorrectResponses = ({ choices, alternateResponse }) => {\n  alternateResponse = alternateResponse || {};\n  const correctAnswers = {};\n\n  forEach(choices, (respArea, key) => {\n    if (!correctAnswers[key]) {\n      correctAnswers[key] = [];\n    }\n\n    if (respArea) {\n      respArea.forEach((choice) => {\n        if (choice.correct) {\n          correctAnswers[key].push(choice.value);\n\n          if (alternateResponse[key]) {\n            correctAnswers[key] = [...correctAnswers[key], ...alternateResponse[key]];\n          }\n        }\n      });\n    }\n  });\n\n  return correctAnswers;\n};\n"],"file":"utils.js"}

package/lib/index.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+
+var _mathRenderingAccessible = require("@pie-lib/pie-toolbox/math-rendering-accessible");
+
+var _inlineDropdown = _interopRequireDefault(require("./inline-dropdown"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var RootInlineDropdown = /*#__PURE__*/function (_HTMLElement) {
+  (0, _inherits2["default"])(RootInlineDropdown, _HTMLElement);
+
+  var _super = _createSuper(RootInlineDropdown);
+
+  function RootInlineDropdown() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, RootInlineDropdown);
+    _this = _super.call(this);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_render", function () {
+      if (_this._model && _this._session) {
+        var elem = /*#__PURE__*/_react["default"].createElement(_inlineDropdown["default"], {
+          prompt: _this._model.prompt,
+          rationale: _this._model.rationale,
+          teacherInstructions: _this._model.teacherInstructions,
+          disabled: _this._model.disabled,
+          displayType: _this._model.displayType,
+          markup: _this._model.markup,
+          mode: _this._model.mode,
+          choices: _this._model.choices,
+          value: _this._session.value,
+          feedback: _this._model.feedback,
+          language: _this._model.language,
+          onChange: _this.changeSession
+        });
+
+        _reactDom["default"].render(elem, (0, _assertThisInitialized2["default"])(_this), function () {
+          (0, _mathRenderingAccessible.renderMath)((0, _assertThisInitialized2["default"])(_this));
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dispatchChangedEvent", function () {
+      _this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(_this.tagName.toLowerCase(), _this.session && !!_this.session.value));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeSession", function (value) {
+      _this.session.value = value;
+
+      _this.dispatchChangedEvent();
+
+      _this._render();
+    });
+    _this._model = null;
+    _this._session = null;
+    return _this;
+  }
+
+  (0, _createClass2["default"])(RootInlineDropdown, [{
+    key: "model",
+    set: function set(m) {
+      this._model = m;
+      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.session && !!this.session.value, !!this._model));
+
+      this._render();
+    }
+  }, {
+    key: "session",
+    get: function get() {
+      return this._session;
+    },
+    set: function set(s) {
+      this._session = s;
+
+      this._render();
+    }
+  }, {
+    key: "connectedCallback",
+    value: function connectedCallback() {
+      this.setAttribute('aria-label', 'Inline Dropdown Question');
+      this.setAttribute('role', 'region');
+
+      this._render();
+    }
+  }]);
+  return RootInlineDropdown;
+}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
+
+exports["default"] = RootInlineDropdown;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.js"],"names":["RootInlineDropdown","_model","_session","elem","React","createElement","InlineDropdown","prompt","rationale","teacherInstructions","disabled","displayType","markup","mode","choices","value","feedback","language","onChange","changeSession","ReactDOM","render","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","session","dispatchChangedEvent","_render","m","ModelSetEvent","s","setAttribute","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEqBA,kB;;;;;AACnB,gCAAc;AAAA;;AAAA;AACZ;AADY,gGAuBJ,YAAM;AACd,UAAI,MAAKC,MAAL,IAAe,MAAKC,QAAxB,EAAkC;AAChC,YAAIC,IAAI,gBAAGC,kBAAMC,aAAN,CAAoBC,0BAApB,EAAoC;AAC7CC,UAAAA,MAAM,EAAE,MAAKN,MAAL,CAAYM,MADyB;AAE7CC,UAAAA,SAAS,EAAE,MAAKP,MAAL,CAAYO,SAFsB;AAG7CC,UAAAA,mBAAmB,EAAE,MAAKR,MAAL,CAAYQ,mBAHY;AAI7CC,UAAAA,QAAQ,EAAE,MAAKT,MAAL,CAAYS,QAJuB;AAK7CC,UAAAA,WAAW,EAAE,MAAKV,MAAL,CAAYU,WALoB;AAM7CC,UAAAA,MAAM,EAAE,MAAKX,MAAL,CAAYW,MANyB;AAO7CC,UAAAA,IAAI,EAAE,MAAKZ,MAAL,CAAYY,IAP2B;AAQ7CC,UAAAA,OAAO,EAAE,MAAKb,MAAL,CAAYa,OARwB;AAS7CC,UAAAA,KAAK,EAAE,MAAKb,QAAL,CAAca,KATwB;AAU7CC,UAAAA,QAAQ,EAAE,MAAKf,MAAL,CAAYe,QAVuB;AAW7CC,UAAAA,QAAQ,EAAG,MAAKhB,MAAL,CAAYgB,QAXsB;AAY7CC,UAAAA,QAAQ,EAAE,MAAKC;AAZ8B,SAApC,CAAX;;AAeAC,6BAASC,MAAT,CAAgBlB,IAAhB,kDAA4B,YAAM;AAChC;AACD,SAFD;AAGD;AACF,KA5Ca;AAAA,6GA8CS,YAAM;AAC3B,YAAKmB,aAAL,CAAmB,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoD,MAAKC,OAAL,IAAgB,CAAC,CAAC,MAAKA,OAAL,CAAaX,KAAnF,CAAnB;AACD,KAhDa;AAAA,sGAkDE,UAACA,KAAD,EAAW;AACzB,YAAKW,OAAL,CAAaX,KAAb,GAAqBA,KAArB;;AACA,YAAKY,oBAAL;;AACA,YAAKC,OAAL;AACD,KAtDa;AAEZ,UAAK3B,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,IAAhB;AAHY;AAIb;;;;SACD,aAAU2B,CAAV,EAAa;AACX,WAAK5B,MAAL,GAAc4B,CAAd;AACA,WAAKP,aAAL,CACE,IAAIQ,8BAAJ,CAAkB,KAAKN,OAAL,CAAaC,WAAb,EAAlB,EAA8C,KAAKC,OAAL,IAAgB,CAAC,CAAC,KAAKA,OAAL,CAAaX,KAA7E,EAAoF,CAAC,CAAC,KAAKd,MAA3F,CADF;;AAIA,WAAK2B,OAAL;AACD;;;SAOD,eAAc;AACZ,aAAO,KAAK1B,QAAZ;AACD,K;SAPD,aAAY6B,CAAZ,EAAe;AACb,WAAK7B,QAAL,GAAgB6B,CAAhB;;AACA,WAAKH,OAAL;AACD;;;WAuCD,6BAAoB;AAClB,WAAKI,YAAL,CAAkB,YAAlB,EAAgC,0BAAhC;AACA,WAAKA,YAAL,CAAkB,MAAlB,EAA0B,QAA1B;;AAEA,WAAKJ,OAAL;AACD;;;kDA9D6CK,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering-accessible';\nimport InlineDropdown from './inline-dropdown';\n\nexport default class RootInlineDropdown extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n  }\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(\n      new ModelSetEvent(this.tagName.toLowerCase(), this.session && !!this.session.value, !!this._model),\n    );\n\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  _render = () => {\n    if (this._model && this._session) {\n      let elem = React.createElement(InlineDropdown, {\n        prompt: this._model.prompt,\n        rationale: this._model.rationale,\n        teacherInstructions: this._model.teacherInstructions,\n        disabled: this._model.disabled,\n        displayType: this._model.displayType,\n        markup: this._model.markup,\n        mode: this._model.mode,\n        choices: this._model.choices,\n        value: this._session.value,\n        feedback: this._model.feedback,\n        language:  this._model.language,\n        onChange: this.changeSession,\n      });\n\n      ReactDOM.render(elem, this, () => {\n        renderMath(this);\n      });\n    }\n  };\n\n  dispatchChangedEvent = () => {\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.session && !!this.session.value));\n  };\n\n  changeSession = (value) => {\n    this.session.value = value;\n    this.dispatchChangedEvent();\n    this._render();\n  };\n\n  connectedCallback() {\n    this.setAttribute('aria-label', 'Inline Dropdown Question');\n    this.setAttribute('role', 'region');\n\n    this._render();\n  }\n}\n"],"file":"index.js"}

package/lib/inline-dropdown.js

@@ -0,0 +1,238 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.InlineDropdown = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _correctAnswerToggle = require("@pie-lib/pie-toolbox/correct-answer-toggle");
+
+var _maskMarkup = require("@pie-lib/pie-toolbox/mask-markup");
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
+var _mathRenderingAccessible = require("@pie-lib/pie-toolbox/math-rendering-accessible");
+
+var _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var InlineDropdown = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(InlineDropdown, _React$Component);
+
+  var _super = _createSuper(InlineDropdown);
+
+  function InlineDropdown() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, InlineDropdown);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      showCorrectAnswer: false
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleShowCorrect", function () {
+      _this.setState({
+        showCorrectAnswer: !_this.state.showCorrectAnswer
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(InlineDropdown, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if ((0, _isEmpty["default"])(nextProps.feedback)) {
+        this.setState({
+          showCorrectAnswer: false
+        });
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      // eslint-disable-next-line
+      var domNode = _reactDom["default"].findDOMNode(this);
+
+      (0, _mathRenderingAccessible.renderMath)(domNode);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var showCorrectAnswer = this.state.showCorrectAnswer;
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          prompt = _this$props.prompt,
+          mode = _this$props.mode,
+          rationale = _this$props.rationale,
+          teacherInstructions = _this$props.teacherInstructions,
+          choices = _this$props.choices,
+          displayType = _this$props.displayType,
+          language = _this$props.language;
+      var showCorrectAnswerToggle = mode === 'evaluate';
+      var choiceRationalesHaveText = false;
+      var choiceRationales = (Object.keys(choices) || []).map(function (key) {
+        return (choices[key] || []).reduce(function (acc, currentValue) {
+          if (currentValue.rationale && (0, _renderUi.hasText)(currentValue.rationale)) {
+            choiceRationalesHaveText = true;
+            acc.push(currentValue);
+          }
+
+          return acc;
+        }, []);
+      });
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.mainContainer,
+        style: {
+          display: "".concat(displayType)
+        }
+      }, mode === 'gather' && /*#__PURE__*/_react["default"].createElement("h2", {
+        className: classes.srOnly
+      }, "Inline Dropdown Question"), teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        className: classes.collapsible,
+        labels: {
+          hidden: 'Show Teacher Instructions',
+          visible: 'Hide Teacher Instructions'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: teacherInstructions
+      })), prompt && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: prompt
+      }), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle.CorrectAnswerToggle, {
+        show: showCorrectAnswerToggle,
+        toggled: showCorrectAnswer,
+        onToggle: this.toggleShowCorrect,
+        language: language
+      }), /*#__PURE__*/_react["default"].createElement(_maskMarkup.InlineDropdown, (0, _extends2["default"])({}, this.props, {
+        showCorrectAnswer: showCorrectAnswer
+      })), choiceRationalesHaveText && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        className: classes.collapsible,
+        labels: {
+          hidden: 'Show Rationale for choices',
+          visible: 'Hide Rationale for choices'
+        }
+      }, choiceRationales.map(function (choices, index) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: index,
+          className: classes.choiceRationaleWrapper
+        }, (choices === null || choices === void 0 ? void 0 : choices.length) > 0 && choices.map(function (choice) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.choiceRationale,
+            key: choice.label
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: (0, _classnames["default"])(classes.choiceRationaleLabel, choice.correct ? 'correct' : 'incorrect'),
+            dangerouslySetInnerHTML: {
+              __html: "".concat(choice.label, ": ")
+            }
+          }), /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+            prompt: choice.rationale
+          }));
+        }));
+      })), rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        labels: {
+          hidden: 'Show Rationale',
+          visible: 'Hide Rationale'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: rationale
+      })));
+    }
+  }]);
+  return InlineDropdown;
+}(_react["default"].Component);
+
+exports.InlineDropdown = InlineDropdown;
+(0, _defineProperty2["default"])(InlineDropdown, "propTypes", {
+  classes: _propTypes["default"].object,
+  prompt: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  markup: _propTypes["default"].string,
+  mode: _propTypes["default"].string,
+  displayType: _propTypes["default"].string,
+  rationale: _propTypes["default"].string,
+  teacherInstructions: _propTypes["default"].string,
+  choices: _propTypes["default"].object,
+  value: _propTypes["default"].object,
+  feedback: _propTypes["default"].object,
+  onChange: _propTypes["default"].func
+});
+(0, _defineProperty2["default"])(InlineDropdown, "defaultProps", {
+  value: {}
+});
+
+var styles = function styles(theme) {
+  return {
+    mainContainer: {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background()
+    },
+    collapsible: {
+      marginBottom: theme.spacing.unit * 2
+    },
+    choiceRationaleWrapper: {
+      '&:not(:last-child)': {
+        marginBottom: theme.spacing.unit * 2
+      }
+    },
+    choiceRationale: {
+      display: 'flex',
+      whiteSpace: 'break-spaces'
+    },
+    choiceRationaleLabel: {
+      display: 'flex',
+      '&.correct': {
+        color: _renderUi.color.correct()
+      },
+      '&.incorrect': {
+        color: _renderUi.color.incorrect()
+      }
+    },
+    srOnly: {
+      position: 'absolute',
+      left: '-10000px',
+      top: 'auto',
+      width: '1px',
+      height: '1px',
+      overflow: 'hidden'
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(InlineDropdown);
+
+exports["default"] = _default;
+//# sourceMappingURL=inline-dropdown.js.map

package/lib/inline-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/inline-dropdown.jsx"],"names":["InlineDropdown","showCorrectAnswer","setState","state","nextProps","feedback","domNode","ReactDOM","findDOMNode","props","classes","prompt","mode","rationale","teacherInstructions","choices","displayType","language","showCorrectAnswerToggle","choiceRationalesHaveText","choiceRationales","Object","keys","map","key","reduce","acc","currentValue","push","mainContainer","display","srOnly","collapsible","hidden","visible","toggleShowCorrect","index","choiceRationaleWrapper","length","choice","choiceRationale","label","choiceRationaleLabel","correct","__html","React","Component","PropTypes","object","string","disabled","bool","markup","value","onChange","func","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit","whiteSpace","incorrect","position","left","top","width","height","overflow"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport isEmpty from 'lodash/isEmpty';\nimport {CorrectAnswerToggle} from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport { InlineDropdown as DropDown } from '@pie-lib/pie-toolbox/mask-markup';\nimport { color, Collapsible, hasText, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering-accessible';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nexport class InlineDropdown extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    prompt: PropTypes.string,\n    disabled: PropTypes.bool,\n    markup: PropTypes.string,\n    mode: PropTypes.string,\n    displayType: PropTypes.string,\n    rationale: PropTypes.string,\n    teacherInstructions: PropTypes.string,\n    choices: PropTypes.object,\n    value: PropTypes.object,\n    feedback: PropTypes.object,\n    onChange: PropTypes.func,\n  };\n\n  static defaultProps = {\n    value: {},\n  };\n\n  state = {\n    showCorrectAnswer: false,\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (isEmpty(nextProps.feedback)) {\n      this.setState({ showCorrectAnswer: false });\n    }\n  }\n\n  componentDidUpdate() {\n    // eslint-disable-next-line\n    const domNode = ReactDOM.findDOMNode(this);\n\n    renderMath(domNode);\n  }\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  render() {\n    const { showCorrectAnswer } = this.state;\n    const { classes, prompt, mode, rationale, teacherInstructions, choices, displayType, language } = this.props;\n    const showCorrectAnswerToggle = mode === 'evaluate';\n    let choiceRationalesHaveText = false;\n\n    const choiceRationales = (Object.keys(choices) || []).map((key) =>\n      (choices[key] || []).reduce((acc, currentValue) => {\n        if (currentValue.rationale && hasText(currentValue.rationale)) {\n          choiceRationalesHaveText = true;\n\n          acc.push(currentValue);\n        }\n\n        return acc;\n      }, []),\n    );\n\n    return (\n      <div className={classes.mainContainer} style={{ display: `${displayType}` }}>\n        {mode === 'gather' && <h2 className={classes.srOnly}>Inline Dropdown Question</h2>}\n\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            className={classes.collapsible}\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt prompt={prompt} />}\n\n        <CorrectAnswerToggle\n          show={showCorrectAnswerToggle}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n          language={language}\n        />\n\n        <DropDown {...this.props} showCorrectAnswer={showCorrectAnswer} />\n\n        {choiceRationalesHaveText && (\n          <Collapsible\n            className={classes.collapsible}\n            labels={{ hidden: 'Show Rationale for choices', visible: 'Hide Rationale for choices' }}\n          >\n            {choiceRationales.map((choices, index) => (\n              <div key={index} className={classes.choiceRationaleWrapper}>\n                {choices?.length > 0 &&\n                  choices.map((choice) => (\n                    <div className={classes.choiceRationale} key={choice.label}>\n                      <div\n                        className={classNames(classes.choiceRationaleLabel, choice.correct ? 'correct' : 'incorrect')}\n                        dangerouslySetInnerHTML={{ __html: `${choice.label}: ` }}\n                      />\n                      <PreviewPrompt prompt={choice.rationale} />\n                    </div>\n                  ))}\n              </div>\n            ))}\n          </Collapsible>\n        )}\n\n        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt prompt={rationale} />\n          </Collapsible>\n        )}\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  mainContainer: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  choiceRationaleWrapper: {\n    '&:not(:last-child)': {\n      marginBottom: theme.spacing.unit * 2,\n    },\n  },\n  choiceRationale: {\n    display: 'flex',\n    whiteSpace: 'break-spaces',\n  },\n  choiceRationaleLabel: {\n    display: 'flex',\n    '&.correct': {\n      color: color.correct(),\n    },\n    '&.incorrect': {\n      color: color.incorrect(),\n    },\n  },\n  srOnly: {\n    position: 'absolute',\n    left: '-10000px',\n    top: 'auto',\n    width: '1px',\n    height: '1px',\n    overflow: 'hidden',\n  },\n});\n\nexport default withStyles(styles)(InlineDropdown);\n"],"file":"inline-dropdown.js"}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "5.10.2-next.17+255cf2630",
+  "version": "5.10.2-next.18+68e771afe",
   "description": "",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
@@ -21,7 +21,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "255cf26303caf1b71c4c4ca04762d48536141134",
+  "gitHead": "68e771afebc28a601d494c9cfba3b97b054481fc",
   "main": "lib/index.js",
   "module": "src/index.js"
 }