@pie-element/complex-rubric 2.16.8-next.21 → 2.16.8-next.24

package/module/element.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.19.2/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.20.0/module/index.js";
 import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.12.0/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
@@ -139198,6 +139198,7 @@ const require$$4$P = _dll_prop_types;
   var _classnames = _interopRequireDefault(require$$3$z);
   var _propTypes = _interopRequireDefault(require$$4$P);
   var _grey = _interopRequireDefault(grey$1);
+  var _renderUi = renderUi;
   var PlaceHolder = function PlaceHolder(props) {
     var children = props.children, classes = props.classes, className = props.className, isOver = props.isOver, type = props.type, grid = props.grid, disabled = props.disabled, choiceBoard = props.choiceBoard, isCategorize = props.isCategorize;
     var names = (0, _classnames["default"])(classes.placeholder, disabled && classes.disabled, isOver && classes.over, classes[type], className);
@@ -139209,6 +139210,10 @@ const require$$4$P = _dll_prop_types;
       var repeatValue = grid.rowsRepeatValue || '1fr';
       style.gridTemplateRows = ("repeat(").concat(grid.rows, ", ").concat(repeatValue, ")");
     }
+    if (type === 'choice') {
+      style.border = ("1px solid ").concat(_renderUi.color.borderLight());
+      style.background = _renderUi.color.backgroundDark();
+    }
     var boardStyle = isCategorize ? classes.categorizeBoard : classes.board;
     return _react["default"].createElement("div", {
       style: style,
@@ -139237,14 +139242,14 @@ const require$$4$P = _dll_prop_types;
       placeholder: {
         width: '100%',
         height: '100%',
-        background: theme.palette.grey[200],
-        border: '1px solid #D1D1D1',
+        background: _renderUi.color.white(),
         transition: 'background-color 200ms linear, border-color 200ms linear',
         boxSizing: 'border-box',
         display: 'grid',
         gridRowGap: ("").concat(theme.spacing.unit, "px"),
         gridColumnGap: ("").concat(theme.spacing.unit, "px"),
-        padding: theme.spacing.unit * 1
+        padding: theme.spacing.unit * 1,
+        border: ("2px dashed ").concat(_renderUi.color.black())
       },
       disabled: {
         boxShadow: 'none',
@@ -139255,18 +139260,17 @@ const require$$4$P = _dll_prop_types;
         backgroundColor: ("").concat(_grey["default"][300])
       },
       board: {
-        border: '1px solid #D1D1D1',
         padding: theme.spacing.unit,
         display: 'flex',
         flexWrap: 'wrap',
         alignItems: 'center',
-        minHeight: '200px',
+        minHeight: '100px',
         justifyContent: 'center',
         overflow: 'hidden',
-        touchAction: 'none'
+        touchAction: 'none',
+        backgroundColor: _renderUi.color.backgroundDark()
       },
       categorizeBoard: {
-        border: '1px solid #D1D1D1',
         padding: theme.spacing.unit / 2,
         display: 'flex',
         flexWrap: 'wrap',
@@ -139274,7 +139278,8 @@ const require$$4$P = _dll_prop_types;
         minHeight: '100px',
         justifyContent: 'center',
         overflow: 'hidden',
-        touchAction: 'none'
+        touchAction: 'none',
+        backgroundColor: _renderUi.color.backgroundDark()
       }
     };
   };
@@ -156507,7 +156512,7 @@ const require$$23 = _dll_classnames;
     }, {
       key: "render",
       value: function render() {
-        var _classNames, _this4 = this;
+        var _classNames, _value$document, _this4 = this, _value$document2;
         var _this$props2 = this.props, disabled = _this$props2.disabled, spellCheck = _this$props2.spellCheck, highlightShape = _this$props2.highlightShape, classes = _this$props2.classes, className = _this$props2.className, placeholder = _this$props2.placeholder, pluginProps = _this$props2.pluginProps, onKeyDown = _this$props2.onKeyDown;
         var _ref4 = pluginProps || ({});
         _ref4.customPlugins;
@@ -156516,14 +156521,19 @@ const require$$23 = _dll_classnames;
         log('[render] value: ', value);
         var sizeStyle = this.buildSizeStyle();
         var names = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.withBg, highlightShape), (0, _defineProperty2["default"])(_classNames, classes.toolbarOnTop, toolbarOpts.alwaysVisible && toolbarOpts.position === 'top'), (0, _defineProperty2["default"])(_classNames, classes.scheduled, scheduled), _classNames), className);
-        return _react["default"].createElement("div", {
+        var isResponseAreaEditor = names.includes('response-area-editor');
+        return _react["default"].createElement(_react["default"].Fragment, null, isResponseAreaEditor && _react["default"].createElement("label", {
+          htmlFor: ("editor-").concat(value === null || value === void 0 ? void 0 : (_value$document = value.document) === null || _value$document === void 0 ? void 0 : _value$document.key),
+          className: classes.srOnly
+        }, "Answer:"), _react["default"].createElement("div", {
           ref: function ref(_ref5) {
             return _this4.wrapperRef = _ref5;
           },
           style: {
             width: sizeStyle.width
           },
-          className: names
+          className: names,
+          id: ("editor-").concat(value === null || value === void 0 ? void 0 : (_value$document2 = value.document) === null || _value$document2 === void 0 ? void 0 : _value$document2.key)
         }, scheduled && _react["default"].createElement("div", {
           className: classes.uploading
         }, "Uploading image and then saving..."), _react["default"].createElement(_slateReact.Editor, {
@@ -156582,7 +156592,7 @@ const require$$23 = _dll_classnames;
           onConfirm: dialog.onConfirm,
           onConfirmText: dialog.onConfirmText,
           onCloseText: dialog.onCloseText
-        }));
+        })));
       }
     }]);
     return Editor;
@@ -156715,6 +156725,16 @@ const require$$23 = _dll_classnames;
       marginTop: '6px',
       padding: '20px',
       backgroundColor: 'rgba(0,0,0,0.06)'
+    },
+    srOnly: {
+      border: 0,
+      clip: 'rect(0, 0, 0, 0)',
+      height: '1px',
+      margin: '-1px',
+      overflow: 'hidden',
+      padding: 0,
+      position: 'absolute',
+      width: '1px'
     }
   };
   var _default = (0, _styles.withStyles)(styles)(Editor);

package/module/manifest.json

@@ -4,7 +4,7 @@
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
-      "version": "1.19.2"
+      "version": "1.20.0"
     },
     {
       "name": "@pie-lib/pie-toolbox-module",

package/module/print.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.19.2/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.20.0/module/index.js";
 import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.12.0/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
@@ -139198,6 +139198,7 @@ const require$$4$P = _dll_prop_types;
   var _classnames = _interopRequireDefault(require$$3$z);
   var _propTypes = _interopRequireDefault(require$$4$P);
   var _grey = _interopRequireDefault(grey$1);
+  var _renderUi = renderUi;
   var PlaceHolder = function PlaceHolder(props) {
     var children = props.children, classes = props.classes, className = props.className, isOver = props.isOver, type = props.type, grid = props.grid, disabled = props.disabled, choiceBoard = props.choiceBoard, isCategorize = props.isCategorize;
     var names = (0, _classnames["default"])(classes.placeholder, disabled && classes.disabled, isOver && classes.over, classes[type], className);
@@ -139209,6 +139210,10 @@ const require$$4$P = _dll_prop_types;
       var repeatValue = grid.rowsRepeatValue || '1fr';
       style.gridTemplateRows = ("repeat(").concat(grid.rows, ", ").concat(repeatValue, ")");
     }
+    if (type === 'choice') {
+      style.border = ("1px solid ").concat(_renderUi.color.borderLight());
+      style.background = _renderUi.color.backgroundDark();
+    }
     var boardStyle = isCategorize ? classes.categorizeBoard : classes.board;
     return _react["default"].createElement("div", {
       style: style,
@@ -139237,14 +139242,14 @@ const require$$4$P = _dll_prop_types;
       placeholder: {
         width: '100%',
         height: '100%',
-        background: theme.palette.grey[200],
-        border: '1px solid #D1D1D1',
+        background: _renderUi.color.white(),
         transition: 'background-color 200ms linear, border-color 200ms linear',
         boxSizing: 'border-box',
         display: 'grid',
         gridRowGap: ("").concat(theme.spacing.unit, "px"),
         gridColumnGap: ("").concat(theme.spacing.unit, "px"),
-        padding: theme.spacing.unit * 1
+        padding: theme.spacing.unit * 1,
+        border: ("2px dashed ").concat(_renderUi.color.black())
       },
       disabled: {
         boxShadow: 'none',
@@ -139255,18 +139260,17 @@ const require$$4$P = _dll_prop_types;
         backgroundColor: ("").concat(_grey["default"][300])
       },
       board: {
-        border: '1px solid #D1D1D1',
         padding: theme.spacing.unit,
         display: 'flex',
         flexWrap: 'wrap',
         alignItems: 'center',
-        minHeight: '200px',
+        minHeight: '100px',
         justifyContent: 'center',
         overflow: 'hidden',
-        touchAction: 'none'
+        touchAction: 'none',
+        backgroundColor: _renderUi.color.backgroundDark()
       },
       categorizeBoard: {
-        border: '1px solid #D1D1D1',
         padding: theme.spacing.unit / 2,
         display: 'flex',
         flexWrap: 'wrap',
@@ -139274,7 +139278,8 @@ const require$$4$P = _dll_prop_types;
         minHeight: '100px',
         justifyContent: 'center',
         overflow: 'hidden',
-        touchAction: 'none'
+        touchAction: 'none',
+        backgroundColor: _renderUi.color.backgroundDark()
       }
     };
   };
@@ -156507,7 +156512,7 @@ const require$$23 = _dll_classnames;
     }, {
       key: "render",
       value: function render() {
-        var _classNames, _this4 = this;
+        var _classNames, _value$document, _this4 = this, _value$document2;
         var _this$props2 = this.props, disabled = _this$props2.disabled, spellCheck = _this$props2.spellCheck, highlightShape = _this$props2.highlightShape, classes = _this$props2.classes, className = _this$props2.className, placeholder = _this$props2.placeholder, pluginProps = _this$props2.pluginProps, onKeyDown = _this$props2.onKeyDown;
         var _ref4 = pluginProps || ({});
         _ref4.customPlugins;
@@ -156516,14 +156521,19 @@ const require$$23 = _dll_classnames;
         log('[render] value: ', value);
         var sizeStyle = this.buildSizeStyle();
         var names = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.withBg, highlightShape), (0, _defineProperty2["default"])(_classNames, classes.toolbarOnTop, toolbarOpts.alwaysVisible && toolbarOpts.position === 'top'), (0, _defineProperty2["default"])(_classNames, classes.scheduled, scheduled), _classNames), className);
-        return _react["default"].createElement("div", {
+        var isResponseAreaEditor = names.includes('response-area-editor');
+        return _react["default"].createElement(_react["default"].Fragment, null, isResponseAreaEditor && _react["default"].createElement("label", {
+          htmlFor: ("editor-").concat(value === null || value === void 0 ? void 0 : (_value$document = value.document) === null || _value$document === void 0 ? void 0 : _value$document.key),
+          className: classes.srOnly
+        }, "Answer:"), _react["default"].createElement("div", {
           ref: function ref(_ref5) {
             return _this4.wrapperRef = _ref5;
           },
           style: {
             width: sizeStyle.width
           },
-          className: names
+          className: names,
+          id: ("editor-").concat(value === null || value === void 0 ? void 0 : (_value$document2 = value.document) === null || _value$document2 === void 0 ? void 0 : _value$document2.key)
         }, scheduled && _react["default"].createElement("div", {
           className: classes.uploading
         }, "Uploading image and then saving..."), _react["default"].createElement(_slateReact.Editor, {
@@ -156582,7 +156592,7 @@ const require$$23 = _dll_classnames;
           onConfirm: dialog.onConfirm,
           onConfirmText: dialog.onConfirmText,
           onCloseText: dialog.onCloseText
-        }));
+        })));
       }
     }]);
     return Editor;
@@ -156715,6 +156725,16 @@ const require$$23 = _dll_classnames;
       marginTop: '6px',
       padding: '20px',
       backgroundColor: 'rgba(0,0,0,0.06)'
+    },
+    srOnly: {
+      border: 0,
+      clip: 'rect(0, 0, 0, 0)',
+      height: '1px',
+      margin: '-1px',
+      overflow: 'hidden',
+      padding: 0,
+      position: 'absolute',
+      width: '1px'
     }
   };
   var _default = (0, _styles.withStyles)(styles)(Editor);

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@pie-element/complex-rubric",
   "repository": "pie-framework/pie-elements",
-  "version": "2.16.8-next.21+1e416a557",
+  "version": "2.16.8-next.24+ac34d93fc",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-element/multi-trait-rubric": "^3.16.8-next.21+1e416a557",
-    "@pie-element/rubric": "^3.16.7-next.21+1e416a557",
+    "@pie-element/multi-trait-rubric": "^3.16.8-next.24+ac34d93fc",
+    "@pie-element/rubric": "^3.16.7-next.24+ac34d93fc",
     "@pie-framework/pie-player-events": "^0.1.0",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2"
   },
-  "gitHead": "1e416a557b158c94c4c9e3575126d87a8a57e640",
+  "gitHead": "ac34d93fcc97e79cacddcd38c7509f3c96b69976",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },