@pie-element/explicit-constructed-response 6.20.1-next.0 → 6.20.1-next.14

package/configure/package.json

@@ -8,7 +8,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.1",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "1.28.0",
+    "@pie-lib/pie-toolbox": "1.29.0",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",

package/controller/package.json

@@ -8,7 +8,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "1.28.0",
+    "@pie-lib/pie-toolbox": "1.29.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "type-of": "^2.0.1"

package/module/configure.js

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

package/module/element.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_react_dom, _dll_classnames, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.20.0/module/index.js";
-import {_dll_pie_lib__pie_toolbox_correct_answer_toggle, _dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.12.0/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_react_dom, _dll_classnames, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.21.1/module/index.js";
+import {_dll_pie_lib__pie_toolbox_correct_answer_toggle, _dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.23.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -19152,8 +19152,10 @@ var mathjaxScript = {};
 Object.defineProperty(mathjaxScript, "__esModule", {
   value: true
 });
-mathjaxScript.initializeMathJax = void 0;
+mathjaxScript.initializeMathJax = mathjaxScript.MathJaxVersion = void 0;
 var _renderMath = renderMath$2;
+var MathJaxVersion = '3.2.2';
+mathjaxScript.MathJaxVersion = MathJaxVersion;
 var initializeMathJax = function initializeMathJax(renderOpts) {
   if (renderOpts !== null && renderOpts !== void 0 && renderOpts.useSingleDollar) {
     console.warn('[math-rendering] using $ is not advisable, please use $$..$$ or \\(...\\)');
@@ -19224,7 +19226,7 @@ var initializeMathJax = function initializeMathJax(renderOpts) {
     };
     var script = document.createElement('script');
     script.type = 'text/javascript';
-    script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml-full.js';
+    script.src = ("https://cdn.jsdelivr.net/npm/mathjax@").concat(MathJaxVersion, "/es5/tex-chtml-full.js");
     script.async = true;
     document.body.appendChild(script);
   });
@@ -79053,7 +79055,7 @@ getDefaultExportFromCjs(mathRendering);
       fixMathElements(executeOn);
       adjustMathMLStyle(executeOn);
       var mathJaxCustomKey = getMathJaxCustomKey();
-      if (!window.MathJax && !window.mathjaxLoadedP || mathJaxCustomKey && mathJaxCustomKey !== mathRenderingAccessibleKEY) {
+      if ((!window.MathJax || window.MathJax.version !== _mathjaxScript.MathJaxVersion) && !window.mathjaxLoadedP || mathJaxCustomKey && mathJaxCustomKey !== mathRenderingAccessibleKEY) {
         renderOpts = renderOpts || defaultOpts();
         (0, _mathjaxScript.initializeMathJax)(renderOpts);
       }
@@ -122189,6 +122191,27 @@ const {findKey: require$$10$5} = _dll_lodash;
   var _findKey = _interopRequireDefault(require$$10$5);
   var _choice = _interopRequireDefault(choice$1);
   var _dragInTheBlankDp = _interopRequireDefault(dragInTheBlankDp);
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      (enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols));
+    }
+    return keys;
+  }
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+        (0, _defineProperty2["default"])(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+    return target;
+  }
   function _createSuper(Derived) {
     var hasNativeReflectConstruct = _isNativeReflectConstruct();
     return function _createSuperInternal() {
@@ -122259,7 +122282,9 @@ const {findKey: require$$10$5} = _dll_lodash;
           });
           return foundChoice === undefined;
         });
-        var elementStyle = this.getStyleForWrapper();
+        var elementStyle = _objectSpread(_objectSpread({}, this.getStyleForWrapper()), {}, {
+          minWidth: '100px'
+        });
         return _react["default"].createElement("div", {
           style: elementStyle
         }, _react["default"].createElement(_dragInTheBlankDp["default"], {
@@ -122301,12 +122326,12 @@ const require$$16 = _dll_classnames;
   });
   exports["default"] = exports.DRAG_TYPE = exports.BlankContent = void 0;
   var _objectWithoutProperties2 = _interopRequireDefault(objectWithoutProperties.exports);
+  var _defineProperty2 = _interopRequireDefault(defineProperty$4.exports);
   var _classCallCheck2 = _interopRequireDefault(classCallCheck$3.exports);
   var _createClass2 = _interopRequireDefault(createClass$2.exports);
   var _inherits2 = _interopRequireDefault(inherits$2.exports);
   var _possibleConstructorReturn2 = _interopRequireDefault(possibleConstructorReturn$2.exports);
   var _getPrototypeOf2 = _interopRequireDefault(getPrototypeOf$2.exports);
-  var _defineProperty2 = _interopRequireDefault(defineProperty$4.exports);
   var _react = _interopRequireDefault(require$$8$5);
   var _reactDom = _interopRequireDefault(require$$9$6);
   var _propTypes = _interopRequireDefault(require$$10$4);
@@ -122379,10 +122404,7 @@ const require$$16 = _dll_classnames;
         backgroundColor: _renderUi.color.background(),
         border: ("2px dashed ").concat(_renderUi.color.text()),
         color: _renderUi.color.text(),
-        minWidth: '90px',
         fontSize: 'inherit',
-        minHeight: '32px',
-        height: 'auto',
         maxWidth: '374px',
         position: 'relative',
         borderRadius: '3px'
@@ -122424,7 +122446,8 @@ const require$$16 = _dll_classnames;
       (0, _classCallCheck2["default"])(this, BlankContent);
       _this = _super.call(this);
       _this.state = {
-        height: 0
+        height: 0,
+        width: 0
       };
       return _this;
     }
@@ -122438,17 +122461,33 @@ const require$$16 = _dll_classnames;
         if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {
           if (!currentChoice) {
             this.setState({
-              height: 0
+              height: 0,
+              width: 0
             });
             return;
           }
           setTimeout(function () {
-            _this2.setState({
-              height: _this2.spanRef.offsetHeight
-            });
+            _this2.updateDimensions();
           }, 300);
         }
       }
+    }, {
+      key: "updateDimensions",
+      value: function updateDimensions() {
+        var _this$spanRef, _this$spanRef2;
+        var height = ((_this$spanRef = this.spanRef) === null || _this$spanRef === void 0 ? void 0 : _this$spanRef.offsetHeight) || 0;
+        var width = ((_this$spanRef2 = this.spanRef) === null || _this$spanRef2 === void 0 ? void 0 : _this$spanRef2.offsetWidth) || 0;
+        var responseAreaHeight = parseFloat(this.props.emptyResponseAreaHeight) || 0;
+        var responseAreaWidth = parseFloat(this.props.emptyResponseAreaWidth) || 0;
+        if (height > responseAreaHeight || width > responseAreaWidth) {
+          this.setState(function (prevState) {
+            return {
+              width: width > responseAreaWidth ? width : prevState.width,
+              height: height > responseAreaHeight ? height : prevState.height
+            };
+          });
+        }
+      }
     }, {
       key: "addDraggableFalseAttributes",
       value: function addDraggableFalseAttributes(parent) {
@@ -122458,6 +122497,19 @@ const require$$16 = _dll_classnames;
           }
         });
       }
+    }, {
+      key: "getRootDimensions",
+      value: function getRootDimensions() {
+        var rootStyle = {
+          height: this.state.height || this.props.emptyResponseAreaHeight,
+          width: this.state.width || this.props.emptyResponseAreaWidth
+        };
+        return _objectSpread(_objectSpread(_objectSpread({}, rootStyle), this.props.emptyResponseAreaWidth ? {} : {
+          minWidth: 90
+        }), this.props.emptyResponseAreaHeight ? {} : {
+          minHeight: 32
+        });
+      }
     }, {
       key: "render",
       value: function render() {
@@ -122493,9 +122545,7 @@ const require$$16 = _dll_classnames;
           }, ' ')),
           className: (0, _classnames3["default"])(classes.chip, isOver && classes.over, (_classnames2 = {}, (0, _defineProperty2["default"])(_classnames2, classes.correct, correct !== undefined && correct), (0, _defineProperty2["default"])(_classnames2, classes.incorrect, correct !== undefined && !correct), _classnames2)),
           variant: disabled ? 'outlined' : undefined,
-          style: _objectSpread({}, this.state.height ? {
-            height: this.state.height
-          } : {}),
+          style: _objectSpread({}, this.getRootDimensions()),
           classes: {
             label: isOver && classes.over
           }
@@ -122505,7 +122555,11 @@ const require$$16 = _dll_classnames;
     return BlankContent;
   })(_react["default"].Component);
   exports.BlankContent = BlankContent;
-  (0, _defineProperty2["default"])(BlankContent, "propTypes", {
+  BlankContent.defaultProps = {
+    emptyResponseAreaWidth: 0,
+    emptyResponseAreaHeight: 0
+  };
+  BlankContent.propTypes = {
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     disabled: _propTypes["default"].bool,
     duplicates: _propTypes["default"].bool,
@@ -122514,8 +122568,10 @@ const require$$16 = _dll_classnames;
     isOver: _propTypes["default"].bool,
     dragItem: _propTypes["default"].object,
     correct: _propTypes["default"].bool,
-    onChange: _propTypes["default"].func
-  });
+    onChange: _propTypes["default"].func,
+    emptyResponseAreaWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+    emptyResponseAreaHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  };
   var StyledBlankContent = useStyles(BlankContent);
   var connectedBlankContent = useStyles(function (_ref4) {
     var connectDragSource = _ref4.connectDragSource, connectDropTarget = _ref4.connectDropTarget, props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
@@ -122600,6 +122656,27 @@ const require$$9$5 = _dll_prop_types;
   var _choices = _interopRequireDefault(choices);
   var _blank = _interopRequireDefault(blank);
   var _withMask = withMask$1;
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      (enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols));
+    }
+    return keys;
+  }
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+        (0, _defineProperty2["default"])(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+    return target;
+  }
   function _createSuper(Derived) {
     var hasNativeReflectConstruct = _isNativeReflectConstruct();
     return function _createSuperInternal() {
@@ -122628,7 +122705,7 @@ const require$$9$5 = _dll_prop_types;
     return function (node, data, onChange) {
       var dataset = node.data ? node.data.dataset || ({}) : {};
       if (dataset.component === 'blank') {
-        var disabled = props.disabled, duplicates = props.duplicates, correctResponse = props.correctResponse, feedback = props.feedback, showCorrectAnswer = props.showCorrectAnswer;
+        var disabled = props.disabled, duplicates = props.duplicates, correctResponse = props.correctResponse, feedback = props.feedback, showCorrectAnswer = props.showCorrectAnswer, emptyResponseAreaWidth = props.emptyResponseAreaWidth, emptyResponseAreaHeight = props.emptyResponseAreaHeight;
         var choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
         var choice = choiceId && props.choices.find(function (c) {
           return c.id === choiceId;
@@ -122640,6 +122717,8 @@ const require$$9$5 = _dll_prop_types;
           duplicates: duplicates,
           choice: choice,
           id: dataset.id,
+          emptyResponseAreaWidth: emptyResponseAreaWidth,
+          emptyResponseAreaHeight: emptyResponseAreaHeight,
           onChange: onChange
         });
       }
@@ -122657,12 +122736,17 @@ const require$$9$5 = _dll_prop_types;
       _this = _super.call.apply(_super, [this].concat(args));
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPositionDirection", function (choicePosition) {
         var flexDirection;
+        var justifyContent;
+        var alignItems;
         switch (choicePosition) {
           case 'left':
             flexDirection = 'row';
+            alignItems = 'center';
             break;
           case 'right':
             flexDirection = 'row-reverse';
+            justifyContent = 'flex-end';
+            alignItems = 'center';
             break;
           case 'below':
             flexDirection = 'column-reverse';
@@ -122671,7 +122755,11 @@ const require$$9$5 = _dll_prop_types;
             flexDirection = 'column';
             break;
         }
-        return flexDirection;
+        return {
+          flexDirection: flexDirection,
+          justifyContent: justifyContent,
+          alignItems: alignItems
+        };
       });
       return _this;
     }
@@ -122691,12 +122779,12 @@ const require$$9$5 = _dll_prop_types;
       key: "render",
       value: function render() {
         var _this2 = this;
-        var _this$props = this.props, markup = _this$props.markup, duplicates = _this$props.duplicates, layout = _this$props.layout, value = _this$props.value, onChange = _this$props.onChange, choicesPosition = _this$props.choicesPosition, choices = _this$props.choices, correctResponse = _this$props.correctResponse, disabled = _this$props.disabled, feedback = _this$props.feedback, showCorrectAnswer = _this$props.showCorrectAnswer;
+        var _this$props = this.props, markup = _this$props.markup, duplicates = _this$props.duplicates, layout = _this$props.layout, value = _this$props.value, onChange = _this$props.onChange, choicesPosition = _this$props.choicesPosition, choices = _this$props.choices, correctResponse = _this$props.correctResponse, disabled = _this$props.disabled, feedback = _this$props.feedback, showCorrectAnswer = _this$props.showCorrectAnswer, emptyResponseAreaWidth = _this$props.emptyResponseAreaWidth, emptyResponseAreaHeight = _this$props.emptyResponseAreaHeight;
         var choicePosition = choicesPosition || 'below';
-        var style = {
+        var style = _objectSpread({
           display: 'flex',
-          flexDirection: this.getPositionDirection(choicePosition)
-        };
+          minWidth: '100px'
+        }, this.getPositionDirection(choicePosition));
         return _react["default"].createElement("div", {
           ref: function ref(_ref) {
             return _ref && (_this2.rootRef = _ref);
@@ -122718,7 +122806,9 @@ const require$$9$5 = _dll_prop_types;
           duplicates: duplicates,
           feedback: feedback,
           correctResponse: correctResponse,
-          showCorrectAnswer: showCorrectAnswer
+          showCorrectAnswer: showCorrectAnswer,
+          emptyResponseAreaWidth: emptyResponseAreaWidth,
+          emptyResponseAreaHeight: emptyResponseAreaHeight
         }));
       }
     }]);
@@ -122739,7 +122829,9 @@ const require$$9$5 = _dll_prop_types;
     disabled: _propTypes["default"].bool,
     feedback: _propTypes["default"].object,
     correctResponse: _propTypes["default"].object,
-    showCorrectAnswer: _propTypes["default"].bool
+    showCorrectAnswer: _propTypes["default"].bool,
+    emptyResponseAreaWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+    emptyResponseAreaHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
   });
 })(dragInTheBlank);
 getDefaultExportFromCjs(dragInTheBlank);

package/module/manifest.json

@@ -4,11 +4,11 @@
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
-      "version": "1.20.0"
+      "version": "1.21.1"
     },
     {
       "name": "@pie-lib/pie-toolbox-module",
-      "version": "4.12.0"
+      "version": "4.23.1"
     }
   ]
 }

package/module/print.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_react_dom, _dll_classnames, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.20.0/module/index.js";
-import {_dll_pie_lib__pie_toolbox_correct_answer_toggle, _dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.12.0/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_react_dom, _dll_classnames, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.21.1/module/index.js";
+import {_dll_pie_lib__pie_toolbox_correct_answer_toggle, _dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.23.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -19115,8 +19115,10 @@ var mathjaxScript = {};
 Object.defineProperty(mathjaxScript, "__esModule", {
   value: true
 });
-mathjaxScript.initializeMathJax = void 0;
+mathjaxScript.initializeMathJax = mathjaxScript.MathJaxVersion = void 0;
 var _renderMath = renderMath$2;
+var MathJaxVersion = '3.2.2';
+mathjaxScript.MathJaxVersion = MathJaxVersion;
 var initializeMathJax = function initializeMathJax(renderOpts) {
   if (renderOpts !== null && renderOpts !== void 0 && renderOpts.useSingleDollar) {
     console.warn('[math-rendering] using $ is not advisable, please use $$..$$ or \\(...\\)');
@@ -19187,7 +19189,7 @@ var initializeMathJax = function initializeMathJax(renderOpts) {
     };
     var script = document.createElement('script');
     script.type = 'text/javascript';
-    script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml-full.js';
+    script.src = ("https://cdn.jsdelivr.net/npm/mathjax@").concat(MathJaxVersion, "/es5/tex-chtml-full.js");
     script.async = true;
     document.body.appendChild(script);
   });
@@ -79016,7 +79018,7 @@ getDefaultExportFromCjs(mathRendering);
       fixMathElements(executeOn);
       adjustMathMLStyle(executeOn);
       var mathJaxCustomKey = getMathJaxCustomKey();
-      if (!window.MathJax && !window.mathjaxLoadedP || mathJaxCustomKey && mathJaxCustomKey !== mathRenderingAccessibleKEY) {
+      if ((!window.MathJax || window.MathJax.version !== _mathjaxScript.MathJaxVersion) && !window.mathjaxLoadedP || mathJaxCustomKey && mathJaxCustomKey !== mathRenderingAccessibleKEY) {
         renderOpts = renderOpts || defaultOpts();
         (0, _mathjaxScript.initializeMathJax)(renderOpts);
       }
@@ -122152,6 +122154,27 @@ const {findKey: require$$10$5} = _dll_lodash;
   var _findKey = _interopRequireDefault(require$$10$5);
   var _choice = _interopRequireDefault(choice$1);
   var _dragInTheBlankDp = _interopRequireDefault(dragInTheBlankDp);
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      (enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols));
+    }
+    return keys;
+  }
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+        (0, _defineProperty2["default"])(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+    return target;
+  }
   function _createSuper(Derived) {
     var hasNativeReflectConstruct = _isNativeReflectConstruct();
     return function _createSuperInternal() {
@@ -122222,7 +122245,9 @@ const {findKey: require$$10$5} = _dll_lodash;
           });
           return foundChoice === undefined;
         });
-        var elementStyle = this.getStyleForWrapper();
+        var elementStyle = _objectSpread(_objectSpread({}, this.getStyleForWrapper()), {}, {
+          minWidth: '100px'
+        });
         return _react["default"].createElement("div", {
           style: elementStyle
         }, _react["default"].createElement(_dragInTheBlankDp["default"], {
@@ -122264,12 +122289,12 @@ const require$$16 = _dll_classnames;
   });
   exports["default"] = exports.DRAG_TYPE = exports.BlankContent = void 0;
   var _objectWithoutProperties2 = _interopRequireDefault(objectWithoutProperties.exports);
+  var _defineProperty2 = _interopRequireDefault(defineProperty$4.exports);
   var _classCallCheck2 = _interopRequireDefault(classCallCheck$3.exports);
   var _createClass2 = _interopRequireDefault(createClass$2.exports);
   var _inherits2 = _interopRequireDefault(inherits$2.exports);
   var _possibleConstructorReturn2 = _interopRequireDefault(possibleConstructorReturn$2.exports);
   var _getPrototypeOf2 = _interopRequireDefault(getPrototypeOf$2.exports);
-  var _defineProperty2 = _interopRequireDefault(defineProperty$4.exports);
   var _react = _interopRequireDefault(require$$8$5);
   var _reactDom = _interopRequireDefault(require$$9$6);
   var _propTypes = _interopRequireDefault(require$$10$4);
@@ -122342,10 +122367,7 @@ const require$$16 = _dll_classnames;
         backgroundColor: _renderUi.color.background(),
         border: ("2px dashed ").concat(_renderUi.color.text()),
         color: _renderUi.color.text(),
-        minWidth: '90px',
         fontSize: 'inherit',
-        minHeight: '32px',
-        height: 'auto',
         maxWidth: '374px',
         position: 'relative',
         borderRadius: '3px'
@@ -122387,7 +122409,8 @@ const require$$16 = _dll_classnames;
       (0, _classCallCheck2["default"])(this, BlankContent);
       _this = _super.call(this);
       _this.state = {
-        height: 0
+        height: 0,
+        width: 0
       };
       return _this;
     }
@@ -122401,17 +122424,33 @@ const require$$16 = _dll_classnames;
         if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {
           if (!currentChoice) {
             this.setState({
-              height: 0
+              height: 0,
+              width: 0
             });
             return;
           }
           setTimeout(function () {
-            _this2.setState({
-              height: _this2.spanRef.offsetHeight
-            });
+            _this2.updateDimensions();
           }, 300);
         }
       }
+    }, {
+      key: "updateDimensions",
+      value: function updateDimensions() {
+        var _this$spanRef, _this$spanRef2;
+        var height = ((_this$spanRef = this.spanRef) === null || _this$spanRef === void 0 ? void 0 : _this$spanRef.offsetHeight) || 0;
+        var width = ((_this$spanRef2 = this.spanRef) === null || _this$spanRef2 === void 0 ? void 0 : _this$spanRef2.offsetWidth) || 0;
+        var responseAreaHeight = parseFloat(this.props.emptyResponseAreaHeight) || 0;
+        var responseAreaWidth = parseFloat(this.props.emptyResponseAreaWidth) || 0;
+        if (height > responseAreaHeight || width > responseAreaWidth) {
+          this.setState(function (prevState) {
+            return {
+              width: width > responseAreaWidth ? width : prevState.width,
+              height: height > responseAreaHeight ? height : prevState.height
+            };
+          });
+        }
+      }
     }, {
       key: "addDraggableFalseAttributes",
       value: function addDraggableFalseAttributes(parent) {
@@ -122421,6 +122460,19 @@ const require$$16 = _dll_classnames;
           }
         });
       }
+    }, {
+      key: "getRootDimensions",
+      value: function getRootDimensions() {
+        var rootStyle = {
+          height: this.state.height || this.props.emptyResponseAreaHeight,
+          width: this.state.width || this.props.emptyResponseAreaWidth
+        };
+        return _objectSpread(_objectSpread(_objectSpread({}, rootStyle), this.props.emptyResponseAreaWidth ? {} : {
+          minWidth: 90
+        }), this.props.emptyResponseAreaHeight ? {} : {
+          minHeight: 32
+        });
+      }
     }, {
       key: "render",
       value: function render() {
@@ -122456,9 +122508,7 @@ const require$$16 = _dll_classnames;
           }, ' ')),
           className: (0, _classnames3["default"])(classes.chip, isOver && classes.over, (_classnames2 = {}, (0, _defineProperty2["default"])(_classnames2, classes.correct, correct !== undefined && correct), (0, _defineProperty2["default"])(_classnames2, classes.incorrect, correct !== undefined && !correct), _classnames2)),
           variant: disabled ? 'outlined' : undefined,
-          style: _objectSpread({}, this.state.height ? {
-            height: this.state.height
-          } : {}),
+          style: _objectSpread({}, this.getRootDimensions()),
           classes: {
             label: isOver && classes.over
           }
@@ -122468,7 +122518,11 @@ const require$$16 = _dll_classnames;
     return BlankContent;
   })(_react["default"].Component);
   exports.BlankContent = BlankContent;
-  (0, _defineProperty2["default"])(BlankContent, "propTypes", {
+  BlankContent.defaultProps = {
+    emptyResponseAreaWidth: 0,
+    emptyResponseAreaHeight: 0
+  };
+  BlankContent.propTypes = {
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     disabled: _propTypes["default"].bool,
     duplicates: _propTypes["default"].bool,
@@ -122477,8 +122531,10 @@ const require$$16 = _dll_classnames;
     isOver: _propTypes["default"].bool,
     dragItem: _propTypes["default"].object,
     correct: _propTypes["default"].bool,
-    onChange: _propTypes["default"].func
-  });
+    onChange: _propTypes["default"].func,
+    emptyResponseAreaWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+    emptyResponseAreaHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  };
   var StyledBlankContent = useStyles(BlankContent);
   var connectedBlankContent = useStyles(function (_ref4) {
     var connectDragSource = _ref4.connectDragSource, connectDropTarget = _ref4.connectDropTarget, props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
@@ -122563,6 +122619,27 @@ const require$$9$5 = _dll_prop_types;
   var _choices = _interopRequireDefault(choices);
   var _blank = _interopRequireDefault(blank);
   var _withMask = withMask$1;
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      (enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols));
+    }
+    return keys;
+  }
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+        (0, _defineProperty2["default"])(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+    return target;
+  }
   function _createSuper(Derived) {
     var hasNativeReflectConstruct = _isNativeReflectConstruct();
     return function _createSuperInternal() {
@@ -122591,7 +122668,7 @@ const require$$9$5 = _dll_prop_types;
     return function (node, data, onChange) {
       var dataset = node.data ? node.data.dataset || ({}) : {};
       if (dataset.component === 'blank') {
-        var disabled = props.disabled, duplicates = props.duplicates, correctResponse = props.correctResponse, feedback = props.feedback, showCorrectAnswer = props.showCorrectAnswer;
+        var disabled = props.disabled, duplicates = props.duplicates, correctResponse = props.correctResponse, feedback = props.feedback, showCorrectAnswer = props.showCorrectAnswer, emptyResponseAreaWidth = props.emptyResponseAreaWidth, emptyResponseAreaHeight = props.emptyResponseAreaHeight;
         var choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
         var choice = choiceId && props.choices.find(function (c) {
           return c.id === choiceId;
@@ -122603,6 +122680,8 @@ const require$$9$5 = _dll_prop_types;
           duplicates: duplicates,
           choice: choice,
           id: dataset.id,
+          emptyResponseAreaWidth: emptyResponseAreaWidth,
+          emptyResponseAreaHeight: emptyResponseAreaHeight,
           onChange: onChange
         });
       }
@@ -122620,12 +122699,17 @@ const require$$9$5 = _dll_prop_types;
       _this = _super.call.apply(_super, [this].concat(args));
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPositionDirection", function (choicePosition) {
         var flexDirection;
+        var justifyContent;
+        var alignItems;
         switch (choicePosition) {
           case 'left':
             flexDirection = 'row';
+            alignItems = 'center';
             break;
           case 'right':
             flexDirection = 'row-reverse';
+            justifyContent = 'flex-end';
+            alignItems = 'center';
             break;
           case 'below':
             flexDirection = 'column-reverse';
@@ -122634,7 +122718,11 @@ const require$$9$5 = _dll_prop_types;
             flexDirection = 'column';
             break;
         }
-        return flexDirection;
+        return {
+          flexDirection: flexDirection,
+          justifyContent: justifyContent,
+          alignItems: alignItems
+        };
       });
       return _this;
     }
@@ -122654,12 +122742,12 @@ const require$$9$5 = _dll_prop_types;
       key: "render",
       value: function render() {
         var _this2 = this;
-        var _this$props = this.props, markup = _this$props.markup, duplicates = _this$props.duplicates, layout = _this$props.layout, value = _this$props.value, onChange = _this$props.onChange, choicesPosition = _this$props.choicesPosition, choices = _this$props.choices, correctResponse = _this$props.correctResponse, disabled = _this$props.disabled, feedback = _this$props.feedback, showCorrectAnswer = _this$props.showCorrectAnswer;
+        var _this$props = this.props, markup = _this$props.markup, duplicates = _this$props.duplicates, layout = _this$props.layout, value = _this$props.value, onChange = _this$props.onChange, choicesPosition = _this$props.choicesPosition, choices = _this$props.choices, correctResponse = _this$props.correctResponse, disabled = _this$props.disabled, feedback = _this$props.feedback, showCorrectAnswer = _this$props.showCorrectAnswer, emptyResponseAreaWidth = _this$props.emptyResponseAreaWidth, emptyResponseAreaHeight = _this$props.emptyResponseAreaHeight;
         var choicePosition = choicesPosition || 'below';
-        var style = {
+        var style = _objectSpread({
           display: 'flex',
-          flexDirection: this.getPositionDirection(choicePosition)
-        };
+          minWidth: '100px'
+        }, this.getPositionDirection(choicePosition));
         return _react["default"].createElement("div", {
           ref: function ref(_ref) {
             return _ref && (_this2.rootRef = _ref);
@@ -122681,7 +122769,9 @@ const require$$9$5 = _dll_prop_types;
           duplicates: duplicates,
           feedback: feedback,
           correctResponse: correctResponse,
-          showCorrectAnswer: showCorrectAnswer
+          showCorrectAnswer: showCorrectAnswer,
+          emptyResponseAreaWidth: emptyResponseAreaWidth,
+          emptyResponseAreaHeight: emptyResponseAreaHeight
         }));
       }
     }]);
@@ -122702,7 +122792,9 @@ const require$$9$5 = _dll_prop_types;
     disabled: _propTypes["default"].bool,
     feedback: _propTypes["default"].object,
     correctResponse: _propTypes["default"].object,
-    showCorrectAnswer: _propTypes["default"].bool
+    showCorrectAnswer: _propTypes["default"].bool,
+    emptyResponseAreaWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+    emptyResponseAreaHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
   });
 })(dragInTheBlank);
 getDefaultExportFromCjs(dragInTheBlank);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "6.20.1-next.0+ff5446dac",
+  "version": "6.20.1-next.14+6343d1b00",
   "description": "",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
@@ -12,7 +12,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "1.28.0",
+    "@pie-lib/pie-toolbox": "1.29.0",
     "classnames": "^2.2.5",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
@@ -21,7 +21,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "ff5446dacb8ea3150022128a9dfde6bf77a2bc7c",
+  "gitHead": "6343d1b00c5a4a3d88de70ed13a8aa5c1a43002d",
   "main": "lib/index.js",
   "module": "src/index.js",
   "exports": {