@pie-element/inline-dropdown 8.3.4-next.0 → 9.0.0-beta.0

package/lib/inline-dropdown.js

@@ -1,248 +1,176 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.InlineDropdown = void 0;
-
+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", {
+var _styles = require("@mui/material/styles");
+const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background()
+});
+const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const ChoiceRationaleWrapper = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  '&:not(:last-child)': {
+    marginBottom: theme.spacing(2)
+  }
+}));
+const ChoiceRationale = (0, _styles.styled)('div')({
+  display: 'flex',
+  whiteSpace: 'break-spaces'
+});
+const ChoiceRationaleLabel = (0, _styles.styled)('div')(({
+  correct
+}) => ({
+  display: 'flex',
+  ...(correct ? {
+    color: _renderUi.color.correct()
+  } : {
+    color: _renderUi.color.incorrectWithIcon()
+  })
+}));
+const SrOnly = (0, _styles.styled)('h2')({
+  position: 'absolute',
+  left: '-10000px',
+  top: 'auto',
+  width: '1px',
+  height: '1px',
+  overflow: 'hidden'
+});
+class InlineDropdown extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
       showCorrectAnswer: false
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleShowCorrect", function () {
-      _this.setState({
-        showCorrectAnswer: !_this.state.showCorrectAnswer
+    (0, _defineProperty2.default)(this, "toggleShowCorrect", () => {
+      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,
-          model = _this$props.model,
-          rationale = _this$props.rationale,
-          teacherInstructions = _this$props.teacherInstructions,
-          choices = _this$props.choices,
-          displayType = _this$props.displayType,
-          language = _this$props.language;
-
-      var _ref = model || {},
-          extraCSSRules = _ref.extraCSSRules;
-
-      var showCorrectAnswerToggle = mode === 'evaluate';
-      var choiceRationalesHaveText = false;
-      var showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
-      var showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
-      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;
-        }, []);
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if ((0, _isEmpty.default)(nextProps.feedback)) {
+      this.setState({
+        showCorrectAnswer: false
       });
-      return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
-        extraCSSRules: extraCSSRules,
-        className: classes.mainContainer,
-        style: {
-          display: "".concat(displayType)
-        }
-      }, mode === 'gather' && /*#__PURE__*/_react["default"].createElement("h2", {
-        className: classes.srOnly
-      }, "Inline Dropdown Question"), showTeacherInstructions && /*#__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["default"], {
-        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
-          }));
-        }));
-      })), showRationale && /*#__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);
-
+  }
+  componentDidUpdate() {
+    // eslint-disable-next-line
+    const domNode = _reactDom.default.findDOMNode(this);
+    (0, _mathRendering.renderMath)(domNode);
+  }
+  render() {
+    const {
+      showCorrectAnswer
+    } = this.state;
+    const {
+      prompt,
+      mode,
+      model,
+      rationale,
+      teacherInstructions,
+      choices,
+      displayType,
+      language
+    } = this.props;
+    const {
+      extraCSSRules
+    } = model || {};
+    const showCorrectAnswerToggle = mode === 'evaluate';
+    let choiceRationalesHaveText = false;
+    const showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
+    const showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
+    const choiceRationales = (Object.keys(choices) || []).map(key => (choices[key] || []).reduce((acc, currentValue) => {
+      if (currentValue.rationale && (0, _renderUi.hasText)(currentValue.rationale)) {
+        choiceRationalesHaveText = true;
+        acc.push(currentValue);
+      }
+      return acc;
+    }, []));
+    return /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+      extraCSSRules: extraCSSRules,
+      style: {
+        display: `${displayType}`
+      }
+    }, mode === 'gather' && /*#__PURE__*/_react.default.createElement(SrOnly, null, "Inline Dropdown Question"), showTeacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      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.default, {
+      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(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Rationale for choices',
+        visible: 'Hide Rationale for choices'
+      }
+    }, choiceRationales.map((choices, index) => /*#__PURE__*/_react.default.createElement(ChoiceRationaleWrapper, {
+      key: index
+    }, choices?.length > 0 && choices.map(choice => /*#__PURE__*/_react.default.createElement(ChoiceRationale, {
+      key: choice.label
+    }, /*#__PURE__*/_react.default.createElement(ChoiceRationaleLabel, {
+      correct: choice.correct,
+      dangerouslySetInnerHTML: {
+        __html: `${choice.label}: `
+      }
+    }), /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: choice.rationale
+    })))))), showRationale && /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: rationale
+    })));
+  }
+}
 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,
-  model: _propTypes["default"].object.isRequired,
-  choices: _propTypes["default"].object,
-  value: _propTypes["default"].object,
-  feedback: _propTypes["default"].object,
-  onChange: _propTypes["default"].func,
-  language: _propTypes["default"].string
+(0, _defineProperty2.default)(InlineDropdown, "propTypes", {
+  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,
+  model: _propTypes.default.object.isRequired,
+  choices: _propTypes.default.object,
+  value: _propTypes.default.object,
+  feedback: _propTypes.default.object,
+  onChange: _propTypes.default.func,
+  language: _propTypes.default.string
 });
-(0, _defineProperty2["default"])(InlineDropdown, "defaultProps", {
+(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.incorrectWithIcon()
-      }
-    },
-    srOnly: {
-      position: 'absolute',
-      left: '-10000px',
-      top: 'auto',
-      width: '1px',
-      height: '1px',
-      overflow: 'hidden'
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(InlineDropdown);
-
-exports["default"] = _default;
+var _default = exports.default = InlineDropdown;
 //# sourceMappingURL=inline-dropdown.js.map

package/lib/inline-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/inline-dropdown.jsx"],"names":["InlineDropdown","showCorrectAnswer","setState","state","nextProps","feedback","domNode","ReactDOM","findDOMNode","props","classes","prompt","mode","model","rationale","teacherInstructions","choices","displayType","language","extraCSSRules","showCorrectAnswerToggle","choiceRationalesHaveText","showRationale","showTeacherInstructions","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","isRequired","value","onChange","func","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit","whiteSpace","incorrectWithIcon","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/correct-answer-toggle';\nimport { InlineDropdown as DropDown } from '@pie-lib/mask-markup';\nimport { color, Collapsible, hasText, hasMedia, PreviewPrompt, UiLayout } 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    model: PropTypes.object.isRequired,\n    choices: PropTypes.object,\n    value: PropTypes.object,\n    feedback: PropTypes.object,\n    onChange: PropTypes.func,\n    language: PropTypes.string,\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, model, rationale, teacherInstructions, choices, displayType, language } = this.props;\n    const { extraCSSRules } = model || {};\n    const showCorrectAnswerToggle = mode === 'evaluate';\n    let choiceRationalesHaveText = false;\n    const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));\n    const showTeacherInstructions =\n      teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));\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      <UiLayout extraCSSRules={extraCSSRules} className={classes.mainContainer} style={{ display: `${displayType}` }}>\n        {mode === 'gather' && <h2 className={classes.srOnly}>Inline Dropdown Question</h2>}\n\n        {showTeacherInstructions && (\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        {showRationale && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt prompt={rationale} />\n          </Collapsible>\n        )}\n      </UiLayout>\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.incorrectWithIcon(),\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"}
+{"version":3,"file":"inline-dropdown.js","names":["_react","_interopRequireDefault","require","_reactDom","_propTypes","_isEmpty","_correctAnswerToggle","_maskMarkup","_renderUi","_mathRendering","_styles","StyledUiLayout","styled","UiLayout","color","text","backgroundColor","background","StyledCollapsible","Collapsible","theme","marginBottom","spacing","ChoiceRationaleWrapper","ChoiceRationale","display","whiteSpace","ChoiceRationaleLabel","correct","incorrectWithIcon","SrOnly","position","left","top","width","height","overflow","InlineDropdown","React","Component","constructor","args","_defineProperty2","default","showCorrectAnswer","setState","state","UNSAFE_componentWillReceiveProps","nextProps","isEmpty","feedback","componentDidUpdate","domNode","ReactDOM","findDOMNode","renderMath","render","prompt","mode","model","rationale","teacherInstructions","choices","displayType","language","props","extraCSSRules","showCorrectAnswerToggle","choiceRationalesHaveText","showRationale","hasText","hasMedia","showTeacherInstructions","choiceRationales","Object","keys","map","key","reduce","acc","currentValue","push","createElement","style","labels","hidden","visible","PreviewPrompt","show","toggled","onToggle","toggleShowCorrect","_extends2","index","length","choice","label","dangerouslySetInnerHTML","__html","exports","PropTypes","string","disabled","bool","markup","object","isRequired","value","onChange","func","_default"],"sources":["../src/inline-dropdown.jsx"],"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, hasMedia, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { styled } from '@mui/material/styles';\n\nconst StyledUiLayout = styled(UiLayout)({\n  color: color.text(),\n  backgroundColor: color.background(),\n});\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nconst ChoiceRationaleWrapper = styled('div')(({ theme }) => ({\n  '&:not(:last-child)': {\n    marginBottom: theme.spacing(2),\n  },\n}));\n\nconst ChoiceRationale = styled('div')({\n  display: 'flex',\n  whiteSpace: 'break-spaces',\n});\n\nconst ChoiceRationaleLabel = styled('div')(({ correct }) => ({\n  display: 'flex',\n  ...(correct\n    ? {\n        color: color.correct(),\n      }\n    : {\n        color: color.incorrectWithIcon(),\n      }),\n}));\n\nconst SrOnly = styled('h2')({\n  position: 'absolute',\n  left: '-10000px',\n  top: 'auto',\n  width: '1px',\n  height: '1px',\n  overflow: 'hidden',\n});\n\nexport class InlineDropdown extends React.Component {\n  static propTypes = {\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    model: PropTypes.object.isRequired,\n    choices: PropTypes.object,\n    value: PropTypes.object,\n    feedback: PropTypes.object,\n    onChange: PropTypes.func,\n    language: PropTypes.string,\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 { prompt, mode, model, rationale, teacherInstructions, choices, displayType, language } = this.props;\n    const { extraCSSRules } = model || {};\n    const showCorrectAnswerToggle = mode === 'evaluate';\n    let choiceRationalesHaveText = false;\n    const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));\n    const showTeacherInstructions =\n      teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));\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      <StyledUiLayout extraCSSRules={extraCSSRules} style={{ display: `${displayType}` }}>\n        {mode === 'gather' && <SrOnly>Inline Dropdown Question</SrOnly>}\n\n        {showTeacherInstructions && (\n          <StyledCollapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </StyledCollapsible>\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          <StyledCollapsible\n            labels={{ hidden: 'Show Rationale for choices', visible: 'Hide Rationale for choices' }}\n          >\n            {choiceRationales.map((choices, index) => (\n              <ChoiceRationaleWrapper key={index}>\n                {choices?.length > 0 &&\n                  choices.map((choice) => (\n                    <ChoiceRationale key={choice.label}>\n                      <ChoiceRationaleLabel\n                        correct={choice.correct}\n                        dangerouslySetInnerHTML={{ __html: `${choice.label}: ` }}\n                      />\n                      <PreviewPrompt prompt={choice.rationale} />\n                    </ChoiceRationale>\n                  ))}\n              </ChoiceRationaleWrapper>\n            ))}\n          </StyledCollapsible>\n        )}\n\n        {showRationale && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt prompt={rationale} />\n          </Collapsible>\n        )}\n      </StyledUiLayout>\n    );\n  }\n}\n\nexport default InlineDropdown;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -4,27 +4,29 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "8.3.4-next.0+bb17c7e0a",
+  "version": "9.0.0-beta.0",
   "description": "",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "2.25.2",
-    "@pie-lib/mask-markup": "1.33.2",
-    "@pie-lib/math-rendering": "3.22.1",
-    "@pie-lib/render-ui": "4.35.2",
-    "classnames": "^2.2.5",
+    "@pie-lib/correct-answer-toggle": "2.25.4-next.0",
+    "@pie-lib/mask-markup": "1.33.4-next.0",
+    "@pie-lib/math-rendering": "3.22.3-next.0",
+    "@pie-lib/render-ui": "4.35.4-next.0",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "bb17c7e0a54b6b5ff139075cccf1e341cc6f859f",
+  "gitHead": "f7170c384c729616bce308c461c7443d6bc65ccc",
   "main": "lib/index.js",
   "module": "src/index.js"
 }