@pie-element/drawing-response 10.0.1 → 10.2.0-mui-update.0

package/lib/drawing-response/index.js

@@ -1,133 +1,91 @@
 "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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _container = _interopRequireDefault(require("./container"));
-
-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 DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(DrawingResponseComponent, _React$Component);
-
-  var _super = _createSuper(DrawingResponseComponent);
-
-  function DrawingResponseComponent(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, DrawingResponseComponent);
-    _this = _super.call(this, props);
-    _this.state = {
+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 ErrorDiv = (0, _styles.styled)('div')({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background()
+});
+class DrawingResponseComponent extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       showCorrect: false,
       hasError: false
     };
-    return _this;
   }
-
-  (0, _createClass2["default"])(DrawingResponseComponent, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          _this$props$model = _this$props.model,
-          extraCSSRules = _this$props$model.extraCSSRules,
-          disabled = _this$props$model.disabled,
-          imageDimensions = _this$props$model.imageDimensions,
-          imageUrl = _this$props$model.imageUrl,
-          prompt = _this$props$model.prompt,
-          mode = _this$props$model.mode,
-          teacherInstructions = _this$props$model.teacherInstructions,
-          backgroundImageEnabled = _this$props$model.backgroundImageEnabled,
-          language = _this$props$model.language,
-          session = _this$props.session,
-          onSessionChange = _this$props.onSessionChange,
-          classes = _this$props.classes;
-      var _this$state = this.state,
-          hasError = _this$state.hasError,
-          errorMessage = _this$state.errorMessage;
-      var isEvaluateMode = mode === 'evaluate';
-      return hasError ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.main
-      }, "An error occured: ", errorMessage) : /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
-        extraCSSRules: extraCSSRules,
-        className: classes.main
-      }, 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, {
-        tagName: "span",
-        prompt: prompt
-      }), /*#__PURE__*/_react["default"].createElement(_container["default"], {
-        session: session,
-        onSessionChange: onSessionChange,
-        isEvaluateMode: isEvaluateMode,
-        imageDimensions: imageDimensions,
-        imageUrl: imageUrl,
-        backgroundImageEnabled: backgroundImageEnabled,
-        disabled: disabled,
-        language: language
-      }));
-    }
-  }], [{
-    key: "getDerivedStateFromError",
-    value: function getDerivedStateFromError(error) {
-      return {
-        hasError: true,
-        errorMessage: error.message
-      };
-    }
-  }]);
-  return DrawingResponseComponent;
-}(_react["default"].Component);
-
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      errorMessage: error.message
+    };
+  }
+  render() {
+    const {
+      model: {
+        extraCSSRules,
+        disabled,
+        imageDimensions,
+        imageUrl,
+        prompt,
+        mode,
+        teacherInstructions,
+        backgroundImageEnabled,
+        language
+      },
+      session,
+      onSessionChange
+    } = this.props;
+    const {
+      hasError,
+      errorMessage
+    } = this.state;
+    const isEvaluateMode = mode === 'evaluate';
+    return hasError ? /*#__PURE__*/_react.default.createElement(ErrorDiv, null, "An error occured: ", errorMessage) : /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+      extraCSSRules: extraCSSRules
+    }, teacherInstructions && /*#__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, {
+      tagName: "span",
+      prompt: prompt
+    }), /*#__PURE__*/_react.default.createElement(_container.default, {
+      session: session,
+      onSessionChange: onSessionChange,
+      isEvaluateMode: isEvaluateMode,
+      imageDimensions: imageDimensions,
+      imageUrl: imageUrl,
+      backgroundImageEnabled: backgroundImageEnabled,
+      disabled: disabled,
+      language: language
+    }));
+  }
+}
 DrawingResponseComponent.propTypes = {
-  classes: _propTypes["default"].object,
-  model: _propTypes["default"].object.isRequired,
-  onSessionChange: _propTypes["default"].func.isRequired,
-  session: _propTypes["default"].object.isRequired
+  model: _propTypes.default.object.isRequired,
+  onSessionChange: _propTypes.default.func.isRequired,
+  session: _propTypes.default.object.isRequired
 };
-
-var styles = function styles(theme) {
-  return {
-    main: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background()
-    },
-    collapsible: {
-      marginBottom: theme.spacing.unit * 2
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(DrawingResponseComponent);
-
-exports["default"] = _default;
-//# sourceMappingURL=index.js.map
+var _default = exports.default = DrawingResponseComponent;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwicmVxdWlyZSIsIl9wcm9wVHlwZXMiLCJfcmVuZGVyVWkiLCJfc3R5bGVzIiwiX2NvbnRhaW5lciIsIlN0eWxlZFVpTGF5b3V0Iiwic3R5bGVkIiwiVWlMYXlvdXQiLCJjb2xvciIsInRleHQiLCJiYWNrZ3JvdW5kQ29sb3IiLCJiYWNrZ3JvdW5kIiwiU3R5bGVkQ29sbGFwc2libGUiLCJDb2xsYXBzaWJsZSIsInRoZW1lIiwibWFyZ2luQm90dG9tIiwic3BhY2luZyIsIkVycm9yRGl2IiwiRHJhd2luZ1Jlc3BvbnNlQ29tcG9uZW50IiwiUmVhY3QiLCJDb21wb25lbnQiLCJjb25zdHJ1Y3RvciIsInByb3BzIiwic3RhdGUiLCJzaG93Q29ycmVjdCIsImhhc0Vycm9yIiwiZ2V0RGVyaXZlZFN0YXRlRnJvbUVycm9yIiwiZXJyb3IiLCJlcnJvck1lc3NhZ2UiLCJtZXNzYWdlIiwicmVuZGVyIiwibW9kZWwiLCJleHRyYUNTU1J1bGVzIiwiZGlzYWJsZWQiLCJpbWFnZURpbWVuc2lvbnMiLCJpbWFnZVVybCIsInByb21wdCIsIm1vZGUiLCJ0ZWFjaGVySW5zdHJ1Y3Rpb25zIiwiYmFja2dyb3VuZEltYWdlRW5hYmxlZCIsImxhbmd1YWdlIiwic2Vzc2lvbiIsIm9uU2Vzc2lvbkNoYW5nZSIsImlzRXZhbHVhdGVNb2RlIiwiZGVmYXVsdCIsImNyZWF0ZUVsZW1lbnQiLCJsYWJlbHMiLCJoaWRkZW4iLCJ2aXNpYmxlIiwiUHJldmlld1Byb21wdCIsInRhZ05hbWUiLCJwcm9wVHlwZXMiLCJQcm9wVHlwZXMiLCJvYmplY3QiLCJpc1JlcXVpcmVkIiwiZnVuYyIsIl9kZWZhdWx0IiwiZXhwb3J0cyJdLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9kcmF3aW5nLXJlc3BvbnNlL2luZGV4LmpzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNvbG9yLCBDb2xsYXBzaWJsZSwgUHJldmlld1Byb21wdCwgVWlMYXlvdXQgfSBmcm9tICdAcGllLWxpYi9yZW5kZXItdWknO1xuaW1wb3J0IHsgc3R5bGVkIH0gZnJvbSAnQG11aS9tYXRlcmlhbC9zdHlsZXMnO1xuXG5pbXBvcnQgQ29udGFpbmVyIGZyb20gJy4vY29udGFpbmVyJztcblxuY29uc3QgU3R5bGVkVWlMYXlvdXQgPSBzdHlsZWQoVWlMYXlvdXQpKHtcbiAgY29sb3I6IGNvbG9yLnRleHQoKSxcbiAgYmFja2dyb3VuZENvbG9yOiBjb2xvci5iYWNrZ3JvdW5kKCksXG59KTtcblxuY29uc3QgU3R5bGVkQ29sbGFwc2libGUgPSBzdHlsZWQoQ29sbGFwc2libGUpKCh7IHRoZW1lIH0pID0+ICh7XG4gIG1hcmdpbkJvdHRvbTogdGhlbWUuc3BhY2luZygyKSxcbn0pKTtcblxuY29uc3QgRXJyb3JEaXYgPSBzdHlsZWQoJ2RpdicpKHtcbiAgY29sb3I6IGNvbG9yLnRleHQoKSxcbiAgYmFja2dyb3VuZENvbG9yOiBjb2xvci5iYWNrZ3JvdW5kKCksXG59KTtcblxuY2xhc3MgRHJhd2luZ1Jlc3BvbnNlQ29tcG9uZW50IGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHJvcHMpIHtcbiAgICBzdXBlcihwcm9wcyk7XG4gICAgdGhpcy5zdGF0ZSA9IHtcbiAgICAgIHNob3dDb3JyZWN0OiBmYWxzZSxcbiAgICAgIGhhc0Vycm9yOiBmYWxzZSxcbiAgICB9O1xuICB9XG5cbiAgc3RhdGljIGdldERlcml2ZWRTdGF0ZUZyb21FcnJvcihlcnJvcikge1xuICAgIHJldHVybiB7IGhhc0Vycm9yOiB0cnVlLCBlcnJvck1lc3NhZ2U6IGVycm9yLm1lc3NhZ2UgfTtcbiAgfVxuXG4gIHJlbmRlcigpIHtcbiAgICBjb25zdCB7XG4gICAgICBtb2RlbDoge1xuICAgICAgICBleHRyYUNTU1J1bGVzLFxuICAgICAgICBkaXNhYmxlZCxcbiAgICAgICAgaW1hZ2VEaW1lbnNpb25zLFxuICAgICAgICBpbWFnZVVybCxcbiAgICAgICAgcHJvbXB0LFxuICAgICAgICBtb2RlLFxuICAgICAgICB0ZWFjaGVySW5zdHJ1Y3Rpb25zLFxuICAgICAgICBiYWNrZ3JvdW5kSW1hZ2VFbmFibGVkLFxuICAgICAgICBsYW5ndWFnZSxcbiAgICAgIH0sXG4gICAgICBzZXNzaW9uLFxuICAgICAgb25TZXNzaW9uQ2hhbmdlLFxuICAgIH0gPSB0aGlzLnByb3BzO1xuICAgIGNvbnN0IHsgaGFzRXJyb3IsIGVycm9yTWVzc2FnZSB9ID0gdGhpcy5zdGF0ZTtcbiAgICBjb25zdCBpc0V2YWx1YXRlTW9kZSA9IG1vZGUgPT09ICdldmFsdWF0ZSc7XG5cbiAgICByZXR1cm4gaGFzRXJyb3IgPyAoXG4gICAgICA8RXJyb3JEaXY+QW4gZXJyb3Igb2NjdXJlZDoge2Vycm9yTWVzc2FnZX08L0Vycm9yRGl2PlxuICAgICkgOiAoXG4gICAgICA8U3R5bGVkVWlMYXlvdXQgZXh0cmFDU1NSdWxlcz17ZXh0cmFDU1NSdWxlc30+XG4gICAgICAgIHt0ZWFjaGVySW5zdHJ1Y3Rpb25zICYmIChcbiAgICAgICAgICA8U3R5bGVkQ29sbGFwc2libGVcbiAgICAgICAgICAgIGxhYmVscz17e1xuICAgICAgICAgICAgICBoaWRkZW46ICdTaG93IFRlYWNoZXIgSW5zdHJ1Y3Rpb25zJyxcbiAgICAgICAgICAgICAgdmlzaWJsZTogJ0hpZGUgVGVhY2hlciBJbnN0cnVjdGlvbnMnLFxuICAgICAgICAgICAgfX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8UHJldmlld1Byb21wdCBwcm9tcHQ9e3RlYWNoZXJJbnN0cnVjdGlvbnN9IC8+XG4gICAgICAgICAgPC9TdHlsZWRDb2xsYXBzaWJsZT5cbiAgICAgICAgKX1cblxuICAgICAgICB7cHJvbXB0ICYmIDxQcmV2aWV3UHJvbXB0IHRhZ05hbWU9XCJzcGFuXCIgcHJvbXB0PXtwcm9tcHR9IC8+fVxuXG4gICAgICAgIDxDb250YWluZXJcbiAgICAgICAgICBzZXNzaW9uPXtzZXNzaW9ufVxuICAgICAgICAgIG9uU2Vzc2lvbkNoYW5nZT17b25TZXNzaW9uQ2hhbmdlfVxuICAgICAgICAgIGlzRXZhbHVhdGVNb2RlPXtpc0V2YWx1YXRlTW9kZX1cbiAgICAgICAgICBpbWFnZURpbWVuc2lvbnM9e2ltYWdlRGltZW5zaW9uc31cbiAgICAgICAgICBpbWFnZVVybD17aW1hZ2VVcmx9XG4gICAgICAgICAgYmFja2dyb3VuZEltYWdlRW5hYmxlZD17YmFja2dyb3VuZEltYWdlRW5hYmxlZH1cbiAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgbGFuZ3VhZ2U9e2xhbmd1YWdlfVxuICAgICAgICAvPlxuICAgICAgPC9TdHlsZWRVaUxheW91dD5cbiAgICApO1xuICB9XG59XG5cbkRyYXdpbmdSZXNwb25zZUNvbXBvbmVudC5wcm9wVHlwZXMgPSB7XG4gIG1vZGVsOiBQcm9wVHlwZXMub2JqZWN0LmlzUmVxdWlyZWQsXG4gIG9uU2Vzc2lvbkNoYW5nZTogUHJvcFR5cGVzLmZ1bmMuaXNSZXF1aXJlZCxcbiAgc2Vzc2lvbjogUHJvcFR5cGVzLm9iamVjdC5pc1JlcXVpcmVkLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgRHJhd2luZ1Jlc3BvbnNlQ29tcG9uZW50O1xuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUEsSUFBQUEsTUFBQSxHQUFBQyxzQkFBQSxDQUFBQyxPQUFBO0FBQ0EsSUFBQUMsVUFBQSxHQUFBRixzQkFBQSxDQUFBQyxPQUFBO0FBQ0EsSUFBQUUsU0FBQSxHQUFBRixPQUFBO0FBQ0EsSUFBQUcsT0FBQSxHQUFBSCxPQUFBO0FBRUEsSUFBQUksVUFBQSxHQUFBTCxzQkFBQSxDQUFBQyxPQUFBO0FBRUEsTUFBTUssY0FBYyxHQUFHLElBQUFDLGNBQU0sRUFBQ0Msa0JBQVEsQ0FBQyxDQUFDO0VBQ3RDQyxLQUFLLEVBQUVBLGVBQUssQ0FBQ0MsSUFBSSxDQUFDLENBQUM7RUFDbkJDLGVBQWUsRUFBRUYsZUFBSyxDQUFDRyxVQUFVLENBQUM7QUFDcEMsQ0FBQyxDQUFDO0FBRUYsTUFBTUMsaUJBQWlCLEdBQUcsSUFBQU4sY0FBTSxFQUFDTyxxQkFBVyxDQUFDLENBQUMsQ0FBQztFQUFFQztBQUFNLENBQUMsTUFBTTtFQUM1REMsWUFBWSxFQUFFRCxLQUFLLENBQUNFLE9BQU8sQ0FBQyxDQUFDO0FBQy9CLENBQUMsQ0FBQyxDQUFDO0FBRUgsTUFBTUMsUUFBUSxHQUFHLElBQUFYLGNBQU0sRUFBQyxLQUFLLENBQUMsQ0FBQztFQUM3QkUsS0FBSyxFQUFFQSxlQUFLLENBQUNDLElBQUksQ0FBQyxDQUFDO0VBQ25CQyxlQUFlLEVBQUVGLGVBQUssQ0FBQ0csVUFBVSxDQUFDO0FBQ3BDLENBQUMsQ0FBQztBQUVGLE1BQU1PLHdCQUF3QixTQUFTQyxjQUFLLENBQUNDLFNBQVMsQ0FBQztFQUNyREMsV0FBV0EsQ0FBQ0MsS0FBSyxFQUFFO0lBQ2pCLEtBQUssQ0FBQ0EsS0FBSyxDQUFDO0lBQ1osSUFBSSxDQUFDQyxLQUFLLEdBQUc7TUFDWEMsV0FBVyxFQUFFLEtBQUs7TUFDbEJDLFFBQVEsRUFBRTtJQUNaLENBQUM7RUFDSDtFQUVBLE9BQU9DLHdCQUF3QkEsQ0FBQ0MsS0FBSyxFQUFFO0lBQ3JDLE9BQU87TUFBRUYsUUFBUSxFQUFFLElBQUk7TUFBRUcsWUFBWSxFQUFFRCxLQUFLLENBQUNFO0lBQVEsQ0FBQztFQUN4RDtFQUVBQyxNQUFNQSxDQUFBLEVBQUc7SUFDUCxNQUFNO01BQ0pDLEtBQUssRUFBRTtRQUNMQyxhQUFhO1FBQ2JDLFFBQVE7UUFDUkMsZUFBZTtRQUNmQyxRQUFRO1FBQ1JDLE1BQU07UUFDTkMsSUFBSTtRQUNKQyxtQkFBbUI7UUFDbkJDLHNCQUFzQjtRQUN0QkM7TUFDRixDQUFDO01BQ0RDLE9BQU87TUFDUEM7SUFDRixDQUFDLEdBQUcsSUFBSSxDQUFDcEIsS0FBSztJQUNkLE1BQU07TUFBRUcsUUFBUTtNQUFFRztJQUFhLENBQUMsR0FBRyxJQUFJLENBQUNMLEtBQUs7SUFDN0MsTUFBTW9CLGNBQWMsR0FBR04sSUFBSSxLQUFLLFVBQVU7SUFFMUMsT0FBT1osUUFBUSxnQkFDYjNCLE1BQUEsQ0FBQThDLE9BQUEsQ0FBQUMsYUFBQSxDQUFDNUIsUUFBUSxRQUFDLG9CQUFrQixFQUFDVyxZQUF1QixDQUFDLGdCQUVyRDlCLE1BQUEsQ0FBQThDLE9BQUEsQ0FBQUMsYUFBQSxDQUFDeEMsY0FBYztNQUFDMkIsYUFBYSxFQUFFQTtJQUFjLEdBQzFDTSxtQkFBbUIsaUJBQ2xCeEMsTUFBQSxDQUFBOEMsT0FBQSxDQUFBQyxhQUFBLENBQUNqQyxpQkFBaUI7TUFDaEJrQyxNQUFNLEVBQUU7UUFDTkMsTUFBTSxFQUFFLDJCQUEyQjtRQUNuQ0MsT0FBTyxFQUFFO01BQ1g7SUFBRSxnQkFFRmxELE1BQUEsQ0FBQThDLE9BQUEsQ0FBQUMsYUFBQSxDQUFDM0MsU0FBQSxDQUFBK0MsYUFBYTtNQUFDYixNQUFNLEVBQUVFO0lBQW9CLENBQUUsQ0FDNUIsQ0FDcEIsRUFFQUYsTUFBTSxpQkFBSXRDLE1BQUEsQ0FBQThDLE9BQUEsQ0FBQUMsYUFBQSxDQUFDM0MsU0FBQSxDQUFBK0MsYUFBYTtNQUFDQyxPQUFPLEVBQUMsTUFBTTtNQUFDZCxNQUFNLEVBQUVBO0lBQU8sQ0FBRSxDQUFDLGVBRTNEdEMsTUFBQSxDQUFBOEMsT0FBQSxDQUFBQyxhQUFBLENBQUN6QyxVQUFBLENBQUF3QyxPQUFTO01BQ1JILE9BQU8sRUFBRUEsT0FBUTtNQUNqQkMsZUFBZSxFQUFFQSxlQUFnQjtNQUNqQ0MsY0FBYyxFQUFFQSxjQUFlO01BQy9CVCxlQUFlLEVBQUVBLGVBQWdCO01BQ2pDQyxRQUFRLEVBQUVBLFFBQVM7TUFDbkJJLHNCQUFzQixFQUFFQSxzQkFBdUI7TUFDL0NOLFFBQVEsRUFBRUEsUUFBUztNQUNuQk8sUUFBUSxFQUFFQTtJQUFTLENBQ3BCLENBQ2EsQ0FDakI7RUFDSDtBQUNGO0FBRUF0Qix3QkFBd0IsQ0FBQ2lDLFNBQVMsR0FBRztFQUNuQ3BCLEtBQUssRUFBRXFCLGtCQUFTLENBQUNDLE1BQU0sQ0FBQ0MsVUFBVTtFQUNsQ1osZUFBZSxFQUFFVSxrQkFBUyxDQUFDRyxJQUFJLENBQUNELFVBQVU7RUFDMUNiLE9BQU8sRUFBRVcsa0JBQVMsQ0FBQ0MsTUFBTSxDQUFDQztBQUM1QixDQUFDO0FBQUMsSUFBQUUsUUFBQSxHQUFBQyxPQUFBLENBQUFiLE9BQUEsR0FFYTFCLHdCQUF3QiIsImlnbm9yZUxpc3QiOltdfQ==

package/lib/drawing-response/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/index.jsx"],"names":["DrawingResponseComponent","props","state","showCorrect","hasError","model","extraCSSRules","disabled","imageDimensions","imageUrl","prompt","mode","teacherInstructions","backgroundImageEnabled","language","session","onSessionChange","classes","errorMessage","isEvaluateMode","main","collapsible","hidden","visible","error","message","React","Component","propTypes","PropTypes","object","isRequired","func","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { color, Collapsible, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass DrawingResponseComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      hasError: false,\n    };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, errorMessage: error.message };\n  }\n\n  render() {\n    const {\n      model: {\n        extraCSSRules,\n        disabled,\n        imageDimensions,\n        imageUrl,\n        prompt,\n        mode,\n        teacherInstructions,\n        backgroundImageEnabled,\n        language,\n      },\n      session,\n      onSessionChange,\n      classes,\n    } = this.props;\n    const { hasError, errorMessage } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n\n    return hasError ? (\n      <div className={classes.main}>An error occured: {errorMessage}</div>\n    ) : (\n      <UiLayout extraCSSRules={extraCSSRules} className={classes.main}>\n        {teacherInstructions && (\n          <Collapsible\n            className={classes.collapsible}\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt tagName=\"span\" prompt={prompt} />}\n\n        <Container\n          session={session}\n          onSessionChange={onSessionChange}\n          isEvaluateMode={isEvaluateMode}\n          imageDimensions={imageDimensions}\n          imageUrl={imageUrl}\n          backgroundImageEnabled={backgroundImageEnabled}\n          disabled={disabled}\n          language={language}\n        />\n      </UiLayout>\n    );\n  }\n}\n\nDrawingResponseComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n});\n\nexport default withStyles(styles)(DrawingResponseComponent);\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_renderUi","_styles","_container","StyledUiLayout","styled","UiLayout","color","text","backgroundColor","background","StyledCollapsible","Collapsible","theme","marginBottom","spacing","ErrorDiv","DrawingResponseComponent","React","Component","constructor","props","state","showCorrect","hasError","getDerivedStateFromError","error","errorMessage","message","render","model","extraCSSRules","disabled","imageDimensions","imageUrl","prompt","mode","teacherInstructions","backgroundImageEnabled","language","session","onSessionChange","isEvaluateMode","default","createElement","labels","hidden","visible","PreviewPrompt","tagName","propTypes","PropTypes","object","isRequired","func","_default","exports"],"sources":["../../src/drawing-response/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { color, Collapsible, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\n\nimport Container from './container';\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 ErrorDiv = styled('div')({\n  color: color.text(),\n  backgroundColor: color.background(),\n});\n\nclass DrawingResponseComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      hasError: false,\n    };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, errorMessage: error.message };\n  }\n\n  render() {\n    const {\n      model: {\n        extraCSSRules,\n        disabled,\n        imageDimensions,\n        imageUrl,\n        prompt,\n        mode,\n        teacherInstructions,\n        backgroundImageEnabled,\n        language,\n      },\n      session,\n      onSessionChange,\n    } = this.props;\n    const { hasError, errorMessage } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n\n    return hasError ? (\n      <ErrorDiv>An error occured: {errorMessage}</ErrorDiv>\n    ) : (\n      <StyledUiLayout extraCSSRules={extraCSSRules}>\n        {teacherInstructions && (\n          <StyledCollapsible\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </StyledCollapsible>\n        )}\n\n        {prompt && <PreviewPrompt tagName=\"span\" prompt={prompt} />}\n\n        <Container\n          session={session}\n          onSessionChange={onSessionChange}\n          isEvaluateMode={isEvaluateMode}\n          imageDimensions={imageDimensions}\n          imageUrl={imageUrl}\n          backgroundImageEnabled={backgroundImageEnabled}\n          disabled={disabled}\n          language={language}\n        />\n      </StyledUiLayout>\n    );\n  }\n}\n\nDrawingResponseComponent.propTypes = {\n  model: PropTypes.object.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nexport default DrawingResponseComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/index.js

@@ -1,119 +1,68 @@
 "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"));
-
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
+var _client = require("react-dom/client");
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
 var _piePlayerEvents = require("@pie-framework/pie-player-events");
-
 var _drawingResponse = _interopRequireDefault(require("./drawing-response"));
-
-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 DrawingResponse = /*#__PURE__*/function (_HTMLElement) {
-  (0, _inherits2["default"])(DrawingResponse, _HTMLElement);
-
-  var _super = _createSuper(DrawingResponse);
-
-  function DrawingResponse() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, DrawingResponse);
-
-    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), "sessionChanged", function (update) {
-      _this._session.drawables = update.drawables;
-      _this._session.texts = update.texts;
-      _this._session.width = update.width;
-
-      _this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(_this.tagName.toLowerCase(), _this.isComplete()));
-
-      _this._render();
+class DrawingResponse extends HTMLElement {
+  constructor() {
+    super();
+    (0, _defineProperty2.default)(this, "sessionChanged", update => {
+      this._session.drawables = update.drawables;
+      this._session.texts = update.texts;
+      this._session.width = update.width;
+      this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
+      this._render();
     });
-    return _this;
+    this._root = null;
   }
-
-  (0, _createClass2["default"])(DrawingResponse, [{
-    key: "model",
-    set: function set(m) {
-      this._model = m;
-      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
-
-      this._render();
-    }
-  }, {
-    key: "isComplete",
-    value: function isComplete() {
-      return this._session && (!(0, _isEmpty["default"])(this._session.drawables) || !(0, _isEmpty["default"])(this._session.texts));
-    }
-  }, {
-    key: "session",
-    get: function get() {
-      return this._session;
-    },
-    set: function set(s) {
-      this._session = s;
-
-      this._render();
-    }
-  }, {
-    key: "connectedCallback",
-    value: function connectedCallback() {
-      this._render();
-    }
-  }, {
-    key: "_render",
-    value: function _render() {
-      var _this2 = this;
-
-      if (this._model && this._session) {
-        var el = /*#__PURE__*/_react["default"].createElement(_drawingResponse["default"], {
-          model: this._model,
-          session: this._session,
-          onSessionChange: this.sessionChanged
-        });
-
-        _reactDom["default"].render(el, this, function () {
-          (0, _mathRendering.renderMath)(_this2);
-        });
+  set model(m) {
+    this._model = m;
+    this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
+    this._render();
+  }
+  isComplete() {
+    return this._session && (!(0, _isEmpty.default)(this._session.drawables) || !(0, _isEmpty.default)(this._session.texts));
+  }
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+  get session() {
+    return this._session;
+  }
+  connectedCallback() {
+    this._render();
+  }
+  _render() {
+    if (this._model && this._session) {
+      const el = /*#__PURE__*/_react.default.createElement(_drawingResponse.default, {
+        model: this._model,
+        session: this._session,
+        onSessionChange: this.sessionChanged
+      });
+      if (!this._root) {
+        this._root = (0, _client.createRoot)(this);
       }
+      this._root.render(el);
+      queueMicrotask(() => {
+        (0, _mathRendering.renderMath)(this);
+      });
     }
-  }]);
-  return DrawingResponse;
-}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
-
-exports["default"] = DrawingResponse;
-//# sourceMappingURL=index.js.map
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = DrawingResponse;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwicmVxdWlyZSIsIl9jbGllbnQiLCJfaXNFbXB0eSIsIl9tYXRoUmVuZGVyaW5nIiwiX3BpZVBsYXllckV2ZW50cyIsIl9kcmF3aW5nUmVzcG9uc2UiLCJEcmF3aW5nUmVzcG9uc2UiLCJIVE1MRWxlbWVudCIsImNvbnN0cnVjdG9yIiwiX2RlZmluZVByb3BlcnR5MiIsImRlZmF1bHQiLCJ1cGRhdGUiLCJfc2Vzc2lvbiIsImRyYXdhYmxlcyIsInRleHRzIiwid2lkdGgiLCJkaXNwYXRjaEV2ZW50IiwiU2Vzc2lvbkNoYW5nZWRFdmVudCIsInRhZ05hbWUiLCJ0b0xvd2VyQ2FzZSIsImlzQ29tcGxldGUiLCJfcmVuZGVyIiwiX3Jvb3QiLCJtb2RlbCIsIm0iLCJfbW9kZWwiLCJNb2RlbFNldEV2ZW50IiwiaXNFbXB0eSIsInNlc3Npb24iLCJzIiwiY29ubmVjdGVkQ2FsbGJhY2siLCJlbCIsIlJlYWN0IiwiY3JlYXRlRWxlbWVudCIsIkRyYXdpbmdSZXNwb25zZUNvbXBvbmVudCIsIm9uU2Vzc2lvbkNoYW5nZSIsInNlc3Npb25DaGFuZ2VkIiwiY3JlYXRlUm9vdCIsInJlbmRlciIsInF1ZXVlTWljcm90YXNrIiwicmVuZGVyTWF0aCIsImRpc2Nvbm5lY3RlZENhbGxiYWNrIiwidW5tb3VudCIsImV4cG9ydHMiXSwic291cmNlcyI6WyIuLi9zcmMvaW5kZXguanMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNyZWF0ZVJvb3QgfSBmcm9tICdyZWFjdC1kb20vY2xpZW50JztcbmltcG9ydCBpc0VtcHR5IGZyb20gJ2xvZGFzaC9pc0VtcHR5JztcbmltcG9ydCB7IHJlbmRlck1hdGggfSBmcm9tICdAcGllLWxpYi9tYXRoLXJlbmRlcmluZyc7XG5pbXBvcnQgeyBNb2RlbFNldEV2ZW50LCBTZXNzaW9uQ2hhbmdlZEV2ZW50IH0gZnJvbSAnQHBpZS1mcmFtZXdvcmsvcGllLXBsYXllci1ldmVudHMnO1xuXG5pbXBvcnQgRHJhd2luZ1Jlc3BvbnNlQ29tcG9uZW50IGZyb20gJy4vZHJhd2luZy1yZXNwb25zZSc7XG5cbmV4cG9ydCBkZWZhdWx0IGNsYXNzIERyYXdpbmdSZXNwb25zZSBleHRlbmRzIEhUTUxFbGVtZW50IHtcbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgICB0aGlzLl9yb290ID0gbnVsbDtcbiAgfVxuXG4gIHNldCBtb2RlbChtKSB7XG4gICAgdGhpcy5fbW9kZWwgPSBtO1xuXG4gICAgdGhpcy5kaXNwYXRjaEV2ZW50KG5ldyBNb2RlbFNldEV2ZW50KHRoaXMudGFnTmFtZS50b0xvd2VyQ2FzZSgpLCB0aGlzLmlzQ29tcGxldGUoKSwgISF0aGlzLl9tb2RlbCkpO1xuICAgIHRoaXMuX3JlbmRlcigpO1xuICB9XG5cbiAgaXNDb21wbGV0ZSgpIHtcbiAgICByZXR1cm4gdGhpcy5fc2Vzc2lvbiAmJiAoIWlzRW1wdHkodGhpcy5fc2Vzc2lvbi5kcmF3YWJsZXMpIHx8ICFpc0VtcHR5KHRoaXMuX3Nlc3Npb24udGV4dHMpKTtcbiAgfVxuXG4gIHNlc3Npb25DaGFuZ2VkID0gKHVwZGF0ZSkgPT4ge1xuICAgIHRoaXMuX3Nlc3Npb24uZHJhd2FibGVzID0gdXBkYXRlLmRyYXdhYmxlcztcbiAgICB0aGlzLl9zZXNzaW9uLnRleHRzID0gdXBkYXRlLnRleHRzO1xuICAgIHRoaXMuX3Nlc3Npb24ud2lkdGggPSB1cGRhdGUud2lkdGg7XG5cbiAgICB0aGlzLmRpc3BhdGNoRXZlbnQobmV3IFNlc3Npb25DaGFuZ2VkRXZlbnQodGhpcy50YWdOYW1lLnRvTG93ZXJDYXNlKCksIHRoaXMuaXNDb21wbGV0ZSgpKSk7XG5cbiAgICB0aGlzLl9yZW5kZXIoKTtcbiAgfTtcblxuICBzZXQgc2Vzc2lvbihzKSB7XG4gICAgdGhpcy5fc2Vzc2lvbiA9IHM7XG4gICAgdGhpcy5fcmVuZGVyKCk7XG4gIH1cblxuICBnZXQgc2Vzc2lvbigpIHtcbiAgICByZXR1cm4gdGhpcy5fc2Vzc2lvbjtcbiAgfVxuXG4gIGNvbm5lY3RlZENhbGxiYWNrKCkge1xuICAgIHRoaXMuX3JlbmRlcigpO1xuICB9XG5cbiAgX3JlbmRlcigpIHtcbiAgICBpZiAodGhpcy5fbW9kZWwgJiYgdGhpcy5fc2Vzc2lvbikge1xuICAgICAgY29uc3QgZWwgPSBSZWFjdC5jcmVhdGVFbGVtZW50KERyYXdpbmdSZXNwb25zZUNvbXBvbmVudCwge1xuICAgICAgICBtb2RlbDogdGhpcy5fbW9kZWwsXG4gICAgICAgIHNlc3Npb246IHRoaXMuX3Nlc3Npb24sXG4gICAgICAgIG9uU2Vzc2lvbkNoYW5nZTogdGhpcy5zZXNzaW9uQ2hhbmdlZCxcbiAgICAgIH0pO1xuXG4gICAgICBpZiAoIXRoaXMuX3Jvb3QpIHtcbiAgICAgICAgdGhpcy5fcm9vdCA9IGNyZWF0ZVJvb3QodGhpcyk7XG4gICAgICB9XG4gICAgICB0aGlzLl9yb290LnJlbmRlcihlbCk7XG4gICAgICBxdWV1ZU1pY3JvdGFzaygoKSA9PiB7XG4gICAgICAgIHJlbmRlck1hdGgodGhpcyk7XG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBkaXNjb25uZWN0ZWRDYWxsYmFjaygpIHtcbiAgICBpZiAodGhpcy5fcm9vdCkge1xuICAgICAgdGhpcy5fcm9vdC51bm1vdW50KCk7XG4gICAgfVxuICB9XG59XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUEsSUFBQUEsTUFBQSxHQUFBQyxzQkFBQSxDQUFBQyxPQUFBO0FBQ0EsSUFBQUMsT0FBQSxHQUFBRCxPQUFBO0FBQ0EsSUFBQUUsUUFBQSxHQUFBSCxzQkFBQSxDQUFBQyxPQUFBO0FBQ0EsSUFBQUcsY0FBQSxHQUFBSCxPQUFBO0FBQ0EsSUFBQUksZ0JBQUEsR0FBQUosT0FBQTtBQUVBLElBQUFLLGdCQUFBLEdBQUFOLHNCQUFBLENBQUFDLE9BQUE7QUFFZSxNQUFNTSxlQUFlLFNBQVNDLFdBQVcsQ0FBQztFQUN2REMsV0FBV0EsQ0FBQSxFQUFHO0lB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

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["DrawingResponse","update","_session","drawables","texts","width","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","isComplete","_render","m","_model","ModelSetEvent","s","el","React","createElement","DrawingResponseComponent","model","session","onSessionChange","sessionChanged","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEqBA,e;;;;;;;;;;;;;;;uGAYF,UAACC,MAAD,EAAY;AAC3B,YAAKC,QAAL,CAAcC,SAAd,GAA0BF,MAAM,CAACE,SAAjC;AACA,YAAKD,QAAL,CAAcE,KAAd,GAAsBH,MAAM,CAACG,KAA7B;AACA,YAAKF,QAAL,CAAcG,KAAd,GAAsBJ,MAAM,CAACI,KAA7B;;AAEA,YAAKC,aAAL,CAAmB,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoD,MAAKC,UAAL,EAApD,CAAnB;;AAEA,YAAKC,OAAL;AACD,K;;;;;;SAnBD,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKN,aAAL,CAAmB,IAAIQ,8BAAJ,CAAkB,KAAKN,OAAL,CAAaC,WAAb,EAAlB,EAA8C,KAAKC,UAAL,EAA9C,EAAiE,CAAC,CAAC,KAAKG,MAAxE,CAAnB;;AACA,WAAKF,OAAL;AACD;;;WAED,sBAAa;AACX,aAAO,KAAKT,QAAL,KAAkB,CAAC,yBAAQ,KAAKA,QAAL,CAAcC,SAAtB,CAAD,IAAqC,CAAC,yBAAQ,KAAKD,QAAL,CAAcE,KAAtB,CAAxD,CAAP;AACD;;;SAiBD,eAAc;AACZ,aAAO,KAAKF,QAAZ;AACD,K;SAPD,aAAYa,CAAZ,EAAe;AACb,WAAKb,QAAL,GAAgBa,CAAhB;;AACA,WAAKJ,OAAL;AACD;;;WAMD,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKE,MAAL,IAAe,KAAKX,QAAxB,EAAkC;AAChC,YAAMc,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,2BAApB,EAA8C;AACvDC,UAAAA,KAAK,EAAE,KAAKP,MAD2C;AAEvDQ,UAAAA,OAAO,EAAE,KAAKnB,QAFyC;AAGvDoB,UAAAA,eAAe,EAAE,KAAKC;AAHiC,SAA9C,CAAX;;AAMAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,MAAX;AACD,SAFD;AAGD;AACF;;;kDA/C0CU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport isEmpty from 'lodash/isEmpty';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport DrawingResponseComponent from './drawing-response';\n\nexport default class DrawingResponse extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this._render();\n  }\n\n  isComplete() {\n    return this._session && (!isEmpty(this._session.drawables) || !isEmpty(this._session.texts));\n  }\n\n  sessionChanged = (update) => {\n    this._session.drawables = update.drawables;\n    this._session.texts = update.texts;\n    this._session.width = update.width;\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\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  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(DrawingResponseComponent, {\n        model: this._model,\n        session: this._session,\n        onSessionChange: this.sessionChanged,\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_isEmpty","_mathRendering","_piePlayerEvents","_drawingResponse","DrawingResponse","HTMLElement","constructor","_defineProperty2","default","update","_session","drawables","texts","width","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","isComplete","_render","_root","model","m","_model","ModelSetEvent","isEmpty","session","s","connectedCallback","el","React","createElement","DrawingResponseComponent","onSessionChange","sessionChanged","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","exports"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport isEmpty from 'lodash/isEmpty';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport DrawingResponseComponent from './drawing-response';\n\nexport default class DrawingResponse extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this._render();\n  }\n\n  isComplete() {\n    return this._session && (!isEmpty(this._session.drawables) || !isEmpty(this._session.texts));\n  }\n\n  sessionChanged = (update) => {\n    this._session.drawables = update.drawables;\n    this._session.texts = update.texts;\n    this._session.width = update.width;\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\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  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(DrawingResponseComponent, {\n        model: this._model,\n        session: this._session,\n        onSessionChange: this.sessionChanged,\n      });\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(el);\n      queueMicrotask(() => {\n        renderMath(this);\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AAEA,IAAAK,gBAAA,GAAAN,sBAAA,CAAAC,OAAA;AAEe,MAAMM,eAAe,SAASC,WAAW,CAAC;EACvDC,WAAWA,CAAA,EAAG;IACZ,KAAK,CAAC,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,0BAeQC,MAAM,IAAK;MAC3B,IAAI,CAACC,QAAQ,CAACC,SAAS,GAAGF,MAAM,CAACE,SAAS;MAC1C,IAAI,CAACD,QAAQ,CAACE,KAAK,GAAGH,MAAM,CAACG,KAAK;MAClC,IAAI,CAACF,QAAQ,CAACG,KAAK,GAAGJ,MAAM,CAACI,KAAK;MAElC,IAAI,CAACC,aAAa,CAAC,IAAIC,oCAAmB,CAAC,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,CAAC,EAAE,IAAI,CAACC,UAAU,CAAC,CAAC,CAAC,CAAC;MAE1F,IAAI,CAACC,OAAO,CAAC,CAAC;IAChB,CAAC;IAtBC,IAAI,CAACC,KAAK,GAAG,IAAI;EACnB;EAEA,IAAIC,KAAKA,CAACC,CAAC,EAAE;IACX,IAAI,CAACC,MAAM,GAAGD,CAAC;IAEf,IAAI,CAACR,aAAa,CAAC,IAAIU,8BAAa,CAAC,IAAI,CAACR,OAAO,CAACC,WAAW,CAAC,CAAC,EAAE,IAAI,CAACC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAACK,MAAM,CAAC,CAAC;IACnG,IAAI,CAACJ,OAAO,CAAC,CAAC;EAChB;EAEAD,UAAUA,CAAA,EAAG;IACX,OAAO,IAAI,CAACR,QAAQ,KAAK,CAAC,IAAAe,gBAAO,EAAC,IAAI,CAACf,QAAQ,CAACC,SAAS,CAAC,IAAI,CAAC,IAAAc,gBAAO,EAAC,IAAI,CAACf,QAAQ,CAACE,KAAK,CAAC,CAAC;EAC9F;EAYA,IAAIc,OAAOA,CAACC,CAAC,EAAE;IACb,IAAI,CAACjB,QAAQ,GAAGiB,CAAC;IACjB,IAAI,CAACR,OAAO,CAAC,CAAC;EAChB;EAEA,IAAIO,OAAOA,CAAA,EAAG;IACZ,OAAO,IAAI,CAAChB,QAAQ;EACtB;EAEAkB,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACT,OAAO,CAAC,CAAC;EAChB;EAEAA,OAAOA,CAAA,EAAG;IACR,IAAI,IAAI,CAACI,MAAM,IAAI,IAAI,CAACb,QAAQ,EAAE;MAChC,MAAMmB,EAAE,gBAAGC,cAAK,CAACC,aAAa,CAACC,wBAAwB,EAAE;QACvDX,KAAK,EAAE,IAAI,CAACE,MAAM;QAClBG,OAAO,EAAE,IAAI,CAAChB,QAAQ;QACtBuB,eAAe,EAAE,IAAI,CAACC;MACxB,CAAC,CAAC;MAEF,IAAI,CAAC,IAAI,CAACd,KAAK,EAAE;QACf,IAAI,CAACA,KAAK,GAAG,IAAAe,kBAAU,EAAC,IAAI,CAAC;MAC/B;MACA,IAAI,CAACf,KAAK,CAACgB,MAAM,CAACP,EAAE,CAAC;MACrBQ,cAAc,CAAC,MAAM;QACnB,IAAAC,yBAAU,EAAC,IAAI,CAAC;MAClB,CAAC,CAAC;IACJ;EACF;EAEAC,oBAAoBA,CAAA,EAAG;IACrB,IAAI,IAAI,CAACnB,KAAK,EAAE;MACd,IAAI,CAACA,KAAK,CAACoB,OAAO,CAAC,CAAC;IACtB;EACF;AACF;AAACC,OAAA,CAAAjC,OAAA,GAAAJ,eAAA","ignoreList":[]}

package/package.json

@@ -1,51 +1,36 @@
 {
   "name": "@pie-element/drawing-response",
-  "version": "10.0.1",
+  "version": "10.2.0-mui-update.0",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.3",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
     "@mdi/js": "^3.6.95",
     "@mdi/react": "^1.1.1",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/math-rendering": "^3.19.0",
-    "@pie-lib/render-ui": "^4.32.0",
-    "@pie-lib/translator": "^2.20.0",
-    "classnames": "^2.2.6",
+    "@pie-lib/math-rendering": "3.38.0-mui-update.0",
+    "@pie-lib/render-ui": "4.47.0-mui-update.0",
+    "@pie-lib/translator": "2.36.0-mui-update.0",
     "enzyme-to-json": "^3.3.5",
-    "konva": "^3.4.1",
+    "konva": "8.3.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.1",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1",
-    "react-konva": "^16.10.1-0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-konva": "18.1.0"
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "d82bdaf60534197ec8675bb5ebba1ad314075e58",
+  "gitHead": "0e14ff981bcdc8a89a0e58484026496701bfdbc3",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },
   "main": "lib/index.js",
-  "module": "src/index.js",
-  "exports": {
-    ".": {
-      "import": "./esm/element.js",
-      "require": "./lib/index.js",
-      "default": "./esm/element.js"
-    },
-    "./configure": {
-      "import": "./esm/configure.js",
-      "require": "./configure/lib/index.js",
-      "default": "./esm/configure.js"
-    },
-    "./controller": {
-      "import": "./esm/controller.js",
-      "require": "./controller/lib/index.js",
-      "default": "./esm/controller.js"
-    }
-  }
+  "module": "src/index.js"
 }

package/src/drawing-response/button.jsx

@@ -1,56 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import Button from '@material-ui/core/Button';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 
-const RawButton = ({ classes, className, label, onClick, disabled, title }) => (
-  <Button
+const StyledButton = styled(Button)({
+  fontSize: '0.9em',
+  marginLeft: 8,
+  minWidth: 32,
+  height: 32,
+
+  '& span': {
+    '& svg': {
+      width: '1.3em !important',
+      height: '1.3em !important',
+    },
+  },
+});
+
+const CustomButton = ({ label, onClick, disabled, title }) => (
+  <StyledButton
     title={title}
     onClick={onClick}
     disabled={disabled}
-    className={classNames(classes.addButton, className)}
     size="small"
-    variant="contained"
-    color="default"
-  >
+    variant="contained">
     {label}
-  </Button>
+  </StyledButton>
 );
 
-RawButton.propTypes = {
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
+CustomButton.propTypes = {
   disabled: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   onClick: PropTypes.func,
   title: PropTypes.string,
 };
 
-RawButton.defaultProps = {
-  className: '',
+CustomButton.defaultProps = {
   disabled: false,
   label: 'Add',
   onClick: () => {},
   title: '',
 };
 
-const styles = () => ({
-  addButton: {
-    fontSize: '0.9em',
-    marginLeft: 8,
-    minWidth: 32,
-    height: 32,
-
-    '& span': {
-      '& svg': {
-        width: '1.3em !important',
-        height: '1.3em !important',
-      },
-    },
-  },
-});
-
-const ButtonStyled = withStyles(styles)(RawButton);
-
-export default ButtonStyled;
+export default CustomButton;