@pie-element/rubric 6.0.2-esm.0 → 6.2.0-mui-update.0

package/lib/index.js

@@ -1,94 +1,52 @@
 "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 _main = _interopRequireDefault(require("./main"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
+var _client = require("react-dom/client");
 var _debug = _interopRequireDefault(require("debug"));
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
-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 RubricRender = /*#__PURE__*/function (_HTMLElement) {
-  (0, _inherits2["default"])(RubricRender, _HTMLElement);
-
-  var _super = _createSuper(RubricRender);
-
-  function RubricRender() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, RubricRender);
-    _this = _super.call(this);
-
-    _debug["default"].log('constructor called');
-
-    _this.onModelChanged = _this.onModelChanged.bind((0, _assertThisInitialized2["default"])(_this));
-    return _this;
+class RubricRender extends HTMLElement {
+  constructor() {
+    super();
+    _debug.default.log('constructor called');
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this._root = null;
   }
-
-  (0, _createClass2["default"])(RubricRender, [{
-    key: "model",
-    set: function set(s) {
-      this._model = s;
-
-      this._render();
-    }
-  }, {
-    key: "onModelChanged",
-    value: function onModelChanged(m) {
-      this._model = m;
-
-      this._render();
-    }
-  }, {
-    key: "connectedCallback",
-    value: function connectedCallback() {
-      this._render();
-    }
-  }, {
-    key: "_render",
-    value: function _render() {
-      var _this2 = this;
-
-      if (this._model) {
-        var el = /*#__PURE__*/_react["default"].createElement(_main["default"], {
-          value: this._model
-        });
-
-        _reactDom["default"].render(el, this, function () {
-          (0, _mathRendering.renderMath)(_this2);
-        });
+  set model(s) {
+    this._model = s;
+    this._render();
+  }
+  onModelChanged(m) {
+    this._model = m;
+    this._render();
+  }
+  connectedCallback() {
+    this._render();
+  }
+  _render() {
+    if (this._model) {
+      const el = /*#__PURE__*/_react.default.createElement(_main.default, {
+        value: this._model
+      });
+      if (!this._root) {
+        this._root = (0, _client.createRoot)(this);
       }
+      this._root.render(el);
+      queueMicrotask(() => {
+        (0, _mathRendering.renderMath)(this);
+      });
     }
-  }]);
-  return RubricRender;
-}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
-
-exports["default"] = RubricRender;
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = RubricRender;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["RubricRender","debug","log","onModelChanged","bind","s","_model","_render","m","el","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEqBA,Y;;;;;AACnB,0BAAc;AAAA;;AAAA;AACZ;;AACAC,sBAAMC,GAAN,CAAU,oBAAV;;AACA,UAAKC,cAAL,GAAsB,MAAKA,cAAL,CAAoBC,IAApB,gDAAtB;AAHY;AAIb;;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;;AACA,WAAKE,OAAL;AACD;;;WAED,wBAAeC,CAAf,EAAkB;AAChB,WAAKF,MAAL,GAAcE,CAAd;;AACA,WAAKD,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKD,MAAT,EAAiB;AACf,YAAMG,EAAE,gBAAG,gCAAC,gBAAD;AAAQ,UAAA,KAAK,EAAE,KAAKH;AAApB,UAAX;;AAEAI,6BAASC,MAAT,CAAgBF,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,MAAX;AACD,SAFD;AAGD;AACF;;;kDA7BuCG,W","sourcesContent":["import Rubric from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport default class RubricRender extends HTMLElement {\n  constructor() {\n    super();\n    debug.log('constructor called');\n    this.onModelChanged = this.onModelChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = s;\n    this._render();\n  }\n\n  onModelChanged(m) {\n    this._model = m;\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model) {\n      const el = <Rubric value={this._model} />;\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_main","_interopRequireDefault","require","_react","_client","_debug","_mathRendering","RubricRender","HTMLElement","constructor","debug","log","onModelChanged","bind","_root","model","s","_model","_render","m","connectedCallback","el","React","createElement","Rubric","value","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import Rubric from './main';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport debug from 'debug';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport default class RubricRender extends HTMLElement {\n  constructor() {\n    super();\n    debug.log('constructor called');\n    this.onModelChanged = this.onModelChanged.bind(this);\n    this._root = null;\n  }\n\n  set model(s) {\n    this._model = s;\n    this._render();\n  }\n\n  onModelChanged(m) {\n    this._model = m;\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model) {\n      const el = React.createElement(Rubric, { value: this._model });\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,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AAEe,MAAMK,YAAY,SAASC,WAAW,CAAC;EACpDC,WAAWA,CAAA,EAAG;IACZ,KAAK,CAAC,CAAC;IACPC,cAAK,CAACC,GAAG,CAAC,oBAAoB,CAAC;IAC/B,IAAI,CAACC,cAAc,GAAG,IAAI,CAACA,cAAc,CAACC,IAAI,CAAC,IAAI,CAAC;IACpD,IAAI,CAACC,KAAK,GAAG,IAAI;EACnB;EAEA,IAAIC,KAAKA,CAACC,CAAC,EAAE;IACX,IAAI,CAACC,MAAM,GAAGD,CAAC;IACf,IAAI,CAACE,OAAO,CAAC,CAAC;EAChB;EAEAN,cAAcA,CAACO,CAAC,EAAE;IAChB,IAAI,CAACF,MAAM,GAAGE,CAAC;IACf,IAAI,CAACD,OAAO,CAAC,CAAC;EAChB;EAEAE,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACF,OAAO,CAAC,CAAC;EAChB;EAEAA,OAAOA,CAAA,EAAG;IACR,IAAI,IAAI,CAACD,MAAM,EAAE;MACf,MAAMI,EAAE,gBAAGC,cAAK,CAACC,aAAa,CAACC,aAAM,EAAE;QAAEC,KAAK,EAAE,IAAI,CAACR;MAAO,CAAC,CAAC;MAE9D,IAAI,CAAC,IAAI,CAACH,KAAK,EAAE;QACf,IAAI,CAACA,KAAK,GAAG,IAAAY,kBAAU,EAAC,IAAI,CAAC;MAC/B;MACA,IAAI,CAACZ,KAAK,CAACa,MAAM,CAACN,EAAE,CAAC;MACrBO,cAAc,CAAC,MAAM;QACnB,IAAAC,yBAAU,EAAC,IAAI,CAAC;MAClB,CAAC,CAAC;IACJ;EACF;EAEAC,oBAAoBA,CAAA,EAAG;IACrB,IAAI,IAAI,CAAChB,KAAK,EAAE;MACd,IAAI,CAACA,KAAK,CAACiB,OAAO,CAAC,CAAC;IACtB;EACF;AACF;AAACC,OAAA,CAAAC,OAAA,GAAA1B,YAAA","ignoreList":[]}

package/lib/main.js

@@ -1,270 +1,210 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.RubricType = 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"));
-
+exports.default = exports.RubricType = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
-
-var _List = _interopRequireDefault(require("@material-ui/core/List"));
-
-var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));
-
+var _styles = require("@mui/material/styles");
+var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
+var _List = _interopRequireDefault(require("@mui/material/List"));
+var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
 var _renderUi = require("@pie-lib/render-ui");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-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 RubricType = _propTypes["default"].shape({
-  excludeZero: _propTypes["default"].bool,
-  points: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  sampleAnswers: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  animationsDisabled: _propTypes["default"].bool
+const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)(({
+  theme
+}) => ({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  // apply styles to tables to match the rest of the UI
+  '&:not(.MathJax) table': {
+    borderCollapse: 'collapse'
+  },
+  '&:not(.MathJax) table td, &:not(.MathJax) table th': {
+    padding: '8px 12px',
+    textAlign: 'left'
+  },
+  // reset paragraph margins and line-height inside lists to override client styles
+  '& ul p, & ol p': {
+    marginBottom: 0,
+    marginTop: 0,
+    lineHeight: 'normal'
+  }
+}));
+const StyledListItem = (0, _styles.styled)(_ListItem.default)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  padding: '12px 0px'
 });
-
-exports.RubricType = RubricType;
-
-var Rubric = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Rubric, _React$Component);
-
-  var _super = _createSuper(Rubric);
-
-  function Rubric(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Rubric);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dudUrl", 'javascript:;');
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "shouldRenderPoint", function (index, value) {
+const Text = (0, _styles.styled)('div')({
+  color: _renderUi.color.text()
+});
+const TitleText = (0, _styles.styled)('h3')({
+  color: _renderUi.color.text(),
+  fontSize: '16px',
+  fontWeight: '700',
+  margin: 0,
+  paddingBottom: '6px'
+});
+const SampleTitleText = (0, _styles.styled)('h4')({
+  color: _renderUi.color.text(),
+  fontSize: '16px',
+  fontWeight: 'normal',
+  margin: 0,
+  paddingBottom: '6px'
+});
+const RubricToggle = (0, _styles.styled)('h2')(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  userSelect: 'none',
+  fontSize: theme.typography.fontSize,
+  fontWeight: '500',
+  color: _renderUi.color.tertiary(),
+  margin: 0
+}));
+const ChevronStyle = (0, _styles.styled)('span')({
+  display: 'inline-flex',
+  transition: 'transform 0.2s',
+  marginLeft: 2,
+  alignSelf: 'center'
+});
+const HiddenScreenReader = (0, _styles.styled)('h2')({
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0,0,0,0)',
+  border: 0,
+  whiteSpace: 'nowrap'
+});
+const RubricType = exports.RubricType = _propTypes.default.shape({
+  excludeZero: _propTypes.default.bool,
+  points: _propTypes.default.arrayOf(_propTypes.default.string),
+  sampleAnswers: _propTypes.default.arrayOf(_propTypes.default.string),
+  animationsDisabled: _propTypes.default.bool
+});
+class Rubric extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "dudUrl", 'javascript:;');
+    (0, _defineProperty2.default)(this, "shouldRenderPoint", (index, value) => {
       if (!value.excludeZero) {
         return true;
       } else {
         return index !== 0;
       }
     });
-    _this.state = {
+    this.state = {
       rubricOpen: false,
       linkPrefix: 'Show'
     };
-    _this.toggleRubric = _this.toggleRubric.bind((0, _assertThisInitialized2["default"])(_this));
-    return _this;
+    this.toggleRubric = this.toggleRubric.bind(this);
   }
-
-  (0, _createClass2["default"])(Rubric, [{
-    key: "toggleRubric",
-    value: function toggleRubric() {
-      this.setState({
-        rubricOpen: !this.state.rubricOpen
-      });
-      this.setState({
-        linkPrefix: this.state.rubricOpen ? 'Show' : 'Hide'
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          model = _this$props.model,
-          value = _this$props.value,
-          classes = _this$props.classes;
-      var animationsDisabled = this.props.animationsDisabled;
-      animationsDisabled = animationsDisabled || value.animationsDisabled;
-
-      if (value && value.points) {
-        var _ref = model || {},
-            extraCSSRules = _ref.extraCSSRules;
-
-        var points = value.points,
-            sampleAnswers = value.sampleAnswers;
-
-        var rubricList = /*#__PURE__*/_react["default"].createElement(_List["default"], {
-          component: "nav"
-        }, points.slice(0).reverse().map(function (desc, index) {
-          index = points.length - index - 1;
-          var pointsLabel = value.excludeZero ? index + 1 : index;
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-            key: index
-          }, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-            key: "P".concat(index),
-            className: classes.listColumn
-          }, /*#__PURE__*/_react["default"].createElement("h3", {
-            className: classes.titleText
-          }, pointsLabel === 1 ? "".concat(pointsLabel, " PT") : "".concat(pointsLabel, " PTS")), /*#__PURE__*/_react["default"].createElement("div", {
-            className: classes.text,
-            dangerouslySetInnerHTML: {
-              __html: desc
-            }
-          })), sampleAnswers && sampleAnswers[index] && /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-            key: "S".concat(index),
-            className: classes.listColumn
-          }, /*#__PURE__*/_react["default"].createElement("h4", {
-            className: classes.titleText,
-            style: {
-              fontWeight: 'normal'
-            }
-          }, "Sample Answer"), /*#__PURE__*/_react["default"].createElement("div", {
-            className: classes.text,
-            dangerouslySetInnerHTML: {
-              __html: sampleAnswers[index]
-            }
-          })));
-        }));
-
-        return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
-          extraCSSRules: extraCSSRules,
-          className: classes.root
-        }, /*#__PURE__*/_react["default"].createElement("h2", {
-          className: classes.hiddenScreenReader
-        }, "Rubric"), !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h2", {
-          id: 'rubric-toggle',
-          className: classes.rubricToggle,
-          tabIndex: 0,
-          role: "button",
-          "aria-expanded": this.state.rubricOpen,
-          onClick: this.toggleRubric,
-          onKeyPress: function onKeyPress(e) {
-            if (e.key === 'Enter' || e.key === ' ') _this2.toggleRubric();
+  toggleRubric() {
+    this.setState({
+      rubricOpen: !this.state.rubricOpen
+    });
+    this.setState({
+      linkPrefix: this.state.rubricOpen ? 'Show' : 'Hide'
+    });
+  }
+  render() {
+    const {
+      model,
+      value
+    } = this.props;
+    let {
+      animationsDisabled
+    } = this.props;
+    animationsDisabled = animationsDisabled || value.animationsDisabled;
+    if (value && value.points) {
+      const {
+        extraCSSRules
+      } = model || {};
+      const {
+        points,
+        sampleAnswers
+      } = value;
+      const rubricList = /*#__PURE__*/_react.default.createElement(_List.default, {
+        component: "nav"
+      }, points.slice(0).reverse().map((desc, index) => {
+        index = points.length - index - 1;
+        const pointsLabel = value.excludeZero ? index + 1 : index;
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: index
+        }, /*#__PURE__*/_react.default.createElement(StyledListItem, {
+          key: `P${index}`
+        }, /*#__PURE__*/_react.default.createElement(TitleText, null, pointsLabel === 1 ? `${pointsLabel} PT` : `${pointsLabel} PTS`), /*#__PURE__*/_react.default.createElement(Text, {
+          dangerouslySetInnerHTML: {
+            __html: desc
           }
-        }, this.state.linkPrefix, " Rubric", /*#__PURE__*/_react["default"].createElement("span", {
-          className: classes.chevronStyle,
-          "aria-hidden": "true"
-        }, this.state.rubricOpen ? /*#__PURE__*/_react["default"].createElement("svg", {
-          width: "20",
-          height: "20",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }, /*#__PURE__*/_react["default"].createElement("polyline", {
-          points: "18 15 12 9 6 15"
-        })) : /*#__PURE__*/_react["default"].createElement("svg", {
-          width: "20",
-          height: "20",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }, /*#__PURE__*/_react["default"].createElement("polyline", {
-          points: "6 9 12 15 18 9"
-        })))), /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
-          "in": this.state.rubricOpen,
-          timeout: "auto"
-        }, rubricList)) : rubricList);
-      } else {
-        return null;
-      }
+        })), sampleAnswers && sampleAnswers[index] && /*#__PURE__*/_react.default.createElement(StyledListItem, {
+          key: `S${index}`
+        }, /*#__PURE__*/_react.default.createElement(SampleTitleText, null, "Sample Answer"), /*#__PURE__*/_react.default.createElement(Text, {
+          dangerouslySetInnerHTML: {
+            __html: sampleAnswers[index]
+          }
+        })));
+      }));
+      return /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+        extraCSSRules: extraCSSRules
+      }, /*#__PURE__*/_react.default.createElement(HiddenScreenReader, null, "Rubric"), !animationsDisabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(RubricToggle, {
+        id: 'rubric-toggle',
+        tabIndex: 0,
+        role: "button",
+        "aria-expanded": this.state.rubricOpen,
+        onClick: this.toggleRubric,
+        onKeyPress: e => {
+          if (e.key === 'Enter' || e.key === ' ') this.toggleRubric();
+        }
+      }, this.state.linkPrefix, " Rubric", /*#__PURE__*/_react.default.createElement(ChevronStyle, {
+        "aria-hidden": "true"
+      }, this.state.rubricOpen ? /*#__PURE__*/_react.default.createElement("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }, /*#__PURE__*/_react.default.createElement("polyline", {
+        points: "18 15 12 9 6 15"
+      })) : /*#__PURE__*/_react.default.createElement("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }, /*#__PURE__*/_react.default.createElement("polyline", {
+        points: "6 9 12 15 18 9"
+      })))), /*#__PURE__*/_react.default.createElement(_Collapse.default, {
+        in: this.state.rubricOpen,
+        timeout: {
+          enter: 225,
+          exit: 195
+        }
+      }, rubricList)) : rubricList);
+    } else {
+      return null;
     }
-  }]);
-  return Rubric;
-}(_react["default"].Component);
-
-(0, _defineProperty2["default"])(Rubric, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  model: _propTypes["default"].object.isRequired,
-  animationsDisabled: _propTypes["default"].bool,
+  }
+}
+(0, _defineProperty2.default)(Rubric, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  animationsDisabled: _propTypes.default.bool,
   value: RubricType
 });
-
-var styles = function styles(theme) {
-  return {
-    root: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background(),
-      // apply styles to tables to match the rest of the UI
-      '&:not(.MathJax) table': {
-        borderCollapse: 'collapse'
-      },
-      '&:not(.MathJax) table td, &:not(.MathJax) table th': {
-        padding: '8px 12px',
-        textAlign: 'left'
-      },
-      // reset paragraph margins and line-height inside lists to override client styles
-      '& ul p, & ol p': {
-        marginBottom: 0,
-        marginTop: 0,
-        lineHeight: 'normal'
-      }
-    },
-    listColumn: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'flex-start',
-      padding: '12px 0px'
-    },
-    listColumnItem: {
-      padding: 0
-    },
-    text: {
-      color: _renderUi.color.text()
-    },
-    titleText: {
-      color: _renderUi.color.text(),
-      fontSize: '16px',
-      fontWeight: '700',
-      margin: 0,
-      paddingBottom: '6px'
-    },
-    rubricToggle: {
-      display: 'flex',
-      alignItems: 'center',
-      cursor: 'pointer',
-      userSelect: 'none',
-      fontSize: theme.typography.fontSize,
-      fontWeight: '500',
-      color: _renderUi.color.tertiary(),
-      margin: 0
-    },
-    chevronStyle: {
-      display: 'inline-flex',
-      transition: 'transform 0.2s',
-      marginLeft: 2,
-      alignSelf: 'center'
-    },
-    hiddenScreenReader: {
-      position: 'absolute',
-      width: '1px',
-      height: '1px',
-      padding: 0,
-      margin: '-1px',
-      overflow: 'hidden',
-      clip: 'rect(0,0,0,0)',
-      border: 0,
-      whiteSpace: 'nowrap'
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(Rubric);
-
-exports["default"] = _default;
+var _default = exports.default = Rubric;
 //# sourceMappingURL=main.js.map