@pie-element/inline-dropdown 4.7.1-beta.0 → 4.7.1-beta.1

package/lib/index.js

@@ -1,114 +0,0 @@
-"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 _mathRendering = require("@pie-lib/math-rendering");
-
-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,
-          onChange: _this.changeSession
-        });
-
-        _reactDom["default"].render(elem, (0, _assertThisInitialized2["default"])(_this), function () {
-          (0, _mathRendering.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._render();
-    }
-  }]);
-  return RootInlineDropdown;
-}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
-
-exports["default"] = RootInlineDropdown;
-//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.js"],"names":["RootInlineDropdown","_model","_session","elem","React","createElement","InlineDropdown","prompt","rationale","teacherInstructions","disabled","displayType","markup","mode","choices","value","feedback","onChange","changeSession","ReactDOM","render","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","session","dispatchChangedEvent","_render","m","ModelSetEvent","s","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEqBA,kB;;;;;AACnB,gCAAc;AAAA;;AAAA;AACZ;AADY,gGAwBJ,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,EAAE,MAAKC;AAX8B,SAApC,CAAX;;AAcAC,6BAASC,MAAT,CAAgBjB,IAAhB,kDAA4B,YAAM;AAChC;AACD,SAFD;AAGD;AACF,KA5Ca;AAAA,6GA8CS,YAAM;AAC3B,YAAKkB,aAAL,CAAmB,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoD,MAAKC,OAAL,IAAgB,CAAC,CAAC,MAAKA,OAAL,CAAaV,KAAnF,CAAnB;AACD,KAhDa;AAAA,sGAkDE,UAACA,KAAD,EAAW;AACzB,YAAKU,OAAL,CAAaV,KAAb,GAAqBA,KAArB;;AACA,YAAKW,oBAAL;;AACA,YAAKC,OAAL;AACD,KAtDa;AAEZ,UAAK1B,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,IAAhB;AAHY;AAIb;;;;SAED,aAAU0B,CAAV,EAAa;AACX,WAAK3B,MAAL,GAAc2B,CAAd;AACA,WAAKP,aAAL,CACE,IAAIQ,8BAAJ,CAAkB,KAAKN,OAAL,CAAaC,WAAb,EAAlB,EAA8C,KAAKC,OAAL,IAAgB,CAAC,CAAC,KAAKA,OAAL,CAAaV,KAA7E,EAAoF,CAAC,CAAC,KAAKd,MAA3F,CADF;;AAIA,WAAK0B,OAAL;AACD;;;SAOD,eAAc;AACZ,aAAO,KAAKzB,QAAZ;AACD,K;SAPD,aAAY4B,CAAZ,EAAe;AACb,WAAK5B,QAAL,GAAgB4B,CAAhB;;AACA,WAAKH,OAAL;AACD;;;WAsCD,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;kDA3D6CI,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/math-rendering';\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\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        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._render();\n  }\n}\n"],"file":"index.js"}

package/lib/inline-dropdown.js

@@ -1,216 +0,0 @@
-"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 = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
-
-var _maskMarkup = require("@pie-lib/mask-markup");
-
-var _renderUi = require("@pie-lib/render-ui");
-
-var _mathRendering = require("@pie-lib/math-rendering");
-
-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, _mathRendering.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;
-      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)
-        }
-      }, teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-        labels: {
-          hidden: 'Show Teacher Instructions',
-          visible: 'Hide Teacher Instructions'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: teacherInstructions
-      })), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-        show: showCorrectAnswerToggle,
-        toggled: showCorrectAnswer,
-        onToggle: this.toggleShowCorrect
-      }), showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement("br", null), prompt && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: prompt
-      }), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_maskMarkup.InlineDropdown, (0, _extends2["default"])({}, this.props, {
-        showCorrectAnswer: showCorrectAnswer
-      })), 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
-      })), choiceRationalesHaveText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-        labels: {
-          hidden: 'Show Rationale for choices',
-          visible: 'Hide Rationale for choices'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, choiceRationales.map(function (choices, index) {
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          key: index
-        }, choices && 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
-          }));
-        }), choices && choices.length > 0 && /*#__PURE__*/_react["default"].createElement("br", null));
-      })))));
-    }
-  }]);
-  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(),
-      padding: theme.spacing.unit
-    },
-    choiceRationale: {
-      display: 'flex',
-      whiteSpace: 'break-spaces'
-    },
-    choiceRationaleLabel: {
-      display: 'flex',
-      '&.correct': {
-        color: _renderUi.color.correct()
-      },
-      '&.incorrect': {
-        color: _renderUi.color.incorrect()
-      }
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(InlineDropdown);
-
-exports["default"] = _default;
-//# sourceMappingURL=inline-dropdown.js.map

package/lib/inline-dropdown.js.map

@@ -1 +0,0 @@
-{"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","showCorrectAnswerToggle","choiceRationalesHaveText","choiceRationales","Object","keys","map","key","reduce","acc","currentValue","push","mainContainer","display","hidden","visible","toggleShowCorrect","index","length","choice","choiceRationale","label","choiceRationaleLabel","correct","__html","React","Component","PropTypes","object","string","disabled","bool","markup","value","onChange","func","styles","theme","color","text","backgroundColor","background","padding","spacing","unit","whiteSpace","incorrect"],"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/correct-answer-toggle';\nimport { InlineDropdown as DropDown } from '@pie-lib/mask-markup';\nimport { color, Collapsible, hasText, PreviewPrompt } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\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 } = 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        return acc;\n      }, []),\n    );\n\n    return (\n      <div className={classes.mainContainer} style={{ display: `${displayType}` }}>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <React.Fragment>\n            <Collapsible labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}>\n              <PreviewPrompt prompt={teacherInstructions} />\n            </Collapsible>\n            <br />\n          </React.Fragment>\n        )}\n\n        <CorrectAnswerToggle\n          show={showCorrectAnswerToggle}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n        />\n        {showCorrectAnswerToggle && <br />}\n\n        {prompt && (\n          <React.Fragment>\n            <PreviewPrompt prompt={prompt} />\n            <br />\n          </React.Fragment>\n        )}\n        <DropDown {...this.props} showCorrectAnswer={showCorrectAnswer} />\n        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt prompt={rationale} />\n          </Collapsible>\n        )}\n        {choiceRationalesHaveText && (\n          <React.Fragment>\n            <br />\n            <Collapsible labels={{ hidden: 'Show Rationale for choices', visible: 'Hide Rationale for choices' }}>\n              <div>\n                {choiceRationales.map((choices, index) => (\n                  <div key={index}>\n                    {choices &&\n                      choices.length > 0 &&\n                      choices.map((choice) => (\n                        <div className={classes.choiceRationale} key={choice.label}>\n                          <div\n                            className={classNames(\n                              classes.choiceRationaleLabel,\n                              choice.correct ? 'correct' : 'incorrect',\n                            )}\n                            dangerouslySetInnerHTML={{ __html: `${choice.label}: ` }}\n                          />\n                          <PreviewPrompt prompt={choice.rationale} />\n                        </div>\n                      ))}\n                    {choices && choices.length > 0 && <br />}\n                  </div>\n                ))}\n              </div>\n            </Collapsible>\n          </React.Fragment>\n        )}\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  mainContainer: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: theme.spacing.unit,\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});\n\nexport default withStyles(styles)(InlineDropdown);\n"],"file":"inline-dropdown.js"}