@pie-element/rubric 6.3.4-next.3 → 7.0.0-beta.0

package/lib/print.js

@@ -1,85 +1,49 @@
 "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"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
+exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
+var _client = require("react-dom/client");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
 var _main = _interopRequireDefault(require("./main"));
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
 var _debug = _interopRequireDefault(require("debug"));
-
-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; } }
-
-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; }
-
-var log = (0, _debug["default"])('pie-element:rubric:print');
-
-var preparePrintModel = function preparePrintModel(model, opts) {
-  var instr = opts.role === 'instructor';
-
+const log = (0, _debug.default)('pie-element:rubric:print');
+const preparePrintModel = (model, opts) => {
+  const instr = opts.role === 'instructor';
   if (!instr) {
     return {};
   }
-
-  model.value = _objectSpread({}, model);
+  model.value = {
+    ...model
+  };
   model.mode = 'evaluate';
   model.animationsDisabled = true;
   return model;
 };
-
-var RubricPrint = /*#__PURE__*/function (_HTMLElement) {
-  (0, _inherits2["default"])(RubricPrint, _HTMLElement);
-
-  var _super = _createSuper(RubricPrint);
-
-  function RubricPrint() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, RubricPrint);
-    _this = _super.call(this);
-    _this._options = null;
-    _this._model = null;
-    _this._session = [];
-    _this._rerender = (0, _debounce["default"])(function () {
-      if (_this._model && _this._session) {
-        var printModel = preparePrintModel(_this._model, _this._options);
-
-        var element = _this._options && /*#__PURE__*/_react["default"].createElement(_main["default"], _objectSpread({}, printModel));
-
-        _reactDom["default"].render(element, (0, _assertThisInitialized2["default"])(_this), function () {
+class RubricPrint extends HTMLElement {
+  constructor() {
+    super();
+    this._options = null;
+    this._model = null;
+    this._session = [];
+    this._root = null;
+    this._rerender = (0, _debounce.default)(() => {
+      if (this._model && this._session) {
+        const printModel = preparePrintModel(this._model, this._options);
+        const element = this._options && /*#__PURE__*/_react.default.createElement(_main.default, {
+          ...printModel
+        });
+        if (!this._root) {
+          this._root = (0, _client.createRoot)(this);
+        }
+        this._root.render(element);
+        queueMicrotask(() => {
           log('render complete - render math');
-          (0, _mathRendering.renderMath)((0, _assertThisInitialized2["default"])(_this));
+          (0, _mathRendering.renderMath)(this);
         });
       } else {
         log('skip');
@@ -88,27 +52,20 @@ var RubricPrint = /*#__PURE__*/function (_HTMLElement) {
       leading: false,
       trailing: true
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(RubricPrint, [{
-    key: "options",
-    set: function set(o) {
-      this._options = o;
-    }
-  }, {
-    key: "model",
-    set: function set(s) {
-      this._model = s;
-
-      this._rerender();
+  set options(o) {
+    this._options = o;
+  }
+  set model(s) {
+    this._model = s;
+    this._rerender();
+  }
+  connectedCallback() {}
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
     }
-  }, {
-    key: "connectedCallback",
-    value: function connectedCallback() {}
-  }]);
-  return RubricPrint;
-}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
-
-exports["default"] = RubricPrint;
+  }
+}
+exports.default = RubricPrint;
 //# sourceMappingURL=print.js.map

package/lib/print.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/print.js"],"names":["log","preparePrintModel","model","opts","instr","role","value","mode","animationsDisabled","RubricPrint","_options","_model","_session","_rerender","printModel","element","React","createElement","Main","ReactDOM","render","leading","trailing","o","s","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0BAAN,CAAZ;;AAEA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,KAAD,EAAQC,IAAR,EAAiB;AACzC,MAAMC,KAAK,GAAGD,IAAI,CAACE,IAAL,KAAc,YAA5B;;AAEA,MAAI,CAACD,KAAL,EAAY;AACV,WAAO,EAAP;AACD;;AAEDF,EAAAA,KAAK,CAACI,KAAN,qBAAmBJ,KAAnB;AACAA,EAAAA,KAAK,CAACK,IAAN,GAAa,UAAb;AACAL,EAAAA,KAAK,CAACM,kBAAN,GAA2B,IAA3B;AAEA,SAAON,KAAP;AACD,CAZD;;IAcqBO,W;;;;;AACnB,yBAAc;AAAA;;AAAA;AACZ;AACA,UAAKC,QAAL,GAAgB,IAAhB;AACA,UAAKC,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,EAAhB;AACA,UAAKC,SAAL,GAAiB,0BACf,YAAM;AACJ,UAAI,MAAKF,MAAL,IAAe,MAAKC,QAAxB,EAAkC;AAChC,YAAME,UAAU,GAAGb,iBAAiB,CAAC,MAAKU,MAAN,EAAc,MAAKD,QAAnB,CAApC;;AAEA,YAAMK,OAAO,GACX,MAAKL,QAAL,iBACAM,kBAAMC,aAAN,CAAoBC,gBAApB,oBACKJ,UADL,EAFF;;AAMAK,6BAASC,MAAT,CAAgBL,OAAhB,kDAA+B,YAAM;AACnCf,UAAAA,GAAG,CAAC,+BAAD,CAAH;AACA;AACD,SAHD;AAID,OAbD,MAaO;AACLA,QAAAA,GAAG,CAAC,MAAD,CAAH;AACD;AACF,KAlBc,EAmBf,EAnBe,EAoBf;AAAEqB,MAAAA,OAAO,EAAE,KAAX;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KApBe,CAAjB;AALY;AA2Bb;;;;SACD,aAAYC,CAAZ,EAAe;AACb,WAAKb,QAAL,GAAgBa,CAAhB;AACD;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKb,MAAL,GAAca,CAAd;;AACA,WAAKX,SAAL;AACD;;;WAED,6BAAoB,CAAE;;;kDAtCiBY,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport Main from './main';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\n\nconst log = debug('pie-element:rubric:print');\n\nconst preparePrintModel = (model, opts) => {\n  const instr = opts.role === 'instructor';\n\n  if (!instr) {\n    return {};\n  }\n\n  model.value = { ...model };\n  model.mode = 'evaluate';\n  model.animationsDisabled = true;\n\n  return model;\n};\n\nexport default class RubricPrint extends HTMLElement {\n  constructor() {\n    super();\n    this._options = null;\n    this._model = null;\n    this._session = [];\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          const printModel = preparePrintModel(this._model, this._options);\n\n          const element =\n            this._options &&\n            React.createElement(Main, {\n              ...printModel,\n            });\n\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n  set options(o) {\n    this._options = o;\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  connectedCallback() {}\n}\n"],"file":"print.js"}
+{"version":3,"file":"print.js","names":["_react","_interopRequireDefault","require","_client","_debounce","_main","_mathRendering","_debug","log","debug","preparePrintModel","model","opts","instr","role","value","mode","animationsDisabled","RubricPrint","HTMLElement","constructor","_options","_model","_session","_root","_rerender","debounce","printModel","element","React","createElement","Main","createRoot","render","queueMicrotask","renderMath","leading","trailing","options","o","s","connectedCallback","disconnectedCallback","unmount","exports","default"],"sources":["../src/print.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport debounce from 'lodash/debounce';\nimport Main from './main';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\n\nconst log = debug('pie-element:rubric:print');\n\nconst preparePrintModel = (model, opts) => {\n  const instr = opts.role === 'instructor';\n\n  if (!instr) {\n    return {};\n  }\n\n  model.value = { ...model };\n  model.mode = 'evaluate';\n  model.animationsDisabled = true;\n\n  return model;\n};\n\nexport default class RubricPrint extends HTMLElement {\n  constructor() {\n    super();\n    this._options = null;\n    this._model = null;\n    this._session = [];\n    this._root = null;\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          const printModel = preparePrintModel(this._model, this._options);\n\n          const element =\n            this._options &&\n            React.createElement(Main, {\n              ...printModel,\n            });\n\n          if (!this._root) {\n            this._root = createRoot(this);\n          }\n          this._root.render(element);\n          queueMicrotask(() => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n  set options(o) {\n    this._options = o;\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  connectedCallback() {}\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,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAN,sBAAA,CAAAC,OAAA;AAEA,MAAMM,GAAG,GAAG,IAAAC,cAAK,EAAC,0BAA0B,CAAC;AAE7C,MAAMC,iBAAiB,GAAGA,CAACC,KAAK,EAAEC,IAAI,KAAK;EACzC,MAAMC,KAAK,GAAGD,IAAI,CAACE,IAAI,KAAK,YAAY;EAExC,IAAI,CAACD,KAAK,EAAE;IACV,OAAO,CAAC,CAAC;EACX;EAEAF,KAAK,CAACI,KAAK,GAAG;IAAE,GAAGJ;EAAM,CAAC;EAC1BA,KAAK,CAACK,IAAI,GAAG,UAAU;EACvBL,KAAK,CAACM,kBAAkB,GAAG,IAAI;EAE/B,OAAON,KAAK;AACd,CAAC;AAEc,MAAMO,WAAW,SAASC,WAAW,CAAC;EACnDC,WAAWA,CAAA,EAAG;IACZ,KAAK,CAAC,CAAC;IACP,IAAI,CAACC,QAAQ,GAAG,IAAI;IACpB,IAAI,CAACC,MAAM,GAAG,IAAI;IAClB,IAAI,CAACC,QAAQ,GAAG,EAAE;IAClB,IAAI,CAACC,KAAK,GAAG,IAAI;IACjB,IAAI,CAACC,SAAS,GAAG,IAAAC,iBAAQ,EACvB,MAAM;MACJ,IAAI,IAAI,CAACJ,MAAM,IAAI,IAAI,CAACC,QAAQ,EAAE;QAChC,MAAMI,UAAU,GAAGjB,iBAAiB,CAAC,IAAI,CAACY,MAAM,EAAE,IAAI,CAACD,QAAQ,CAAC;QAEhE,MAAMO,OAAO,GACX,IAAI,CAACP,QAAQ,iBACbQ,cAAK,CAACC,aAAa,CAACC,aAAI,EAAE;UACxB,GAAGJ;QACL,CAAC,CAAC;QAEJ,IAAI,CAAC,IAAI,CAACH,KAAK,EAAE;UACf,IAAI,CAACA,KAAK,GAAG,IAAAQ,kBAAU,EAAC,IAAI,CAAC;QAC/B;QACA,IAAI,CAACR,KAAK,CAACS,MAAM,CAACL,OAAO,CAAC;QAC1BM,cAAc,CAAC,MAAM;UACnB1B,GAAG,CAAC,+BAA+B,CAAC;UACpC,IAAA2B,yBAAU,EAAC,IAAI,CAAC;QAClB,CAAC,CAAC;MACJ,CAAC,MAAM;QACL3B,GAAG,CAAC,MAAM,CAAC;MACb;IACF,CAAC,EACD,EAAE,EACF;MAAE4B,OAAO,EAAE,KAAK;MAAEC,QAAQ,EAAE;IAAK,CACnC,CAAC;EACH;EACA,IAAIC,OAAOA,CAACC,CAAC,EAAE;IACb,IAAI,CAAClB,QAAQ,GAAGkB,CAAC;EACnB;EAEA,IAAI5B,KAAKA,CAAC6B,CAAC,EAAE;IACX,IAAI,CAAClB,MAAM,GAAGkB,CAAC;IACf,IAAI,CAACf,SAAS,CAAC,CAAC;EAClB;EAEAgB,iBAAiBA,CAAA,EAAG,CAAC;EAErBC,oBAAoBA,CAAA,EAAG;IACrB,IAAI,IAAI,CAAClB,KAAK,EAAE;MACd,IAAI,CAACA,KAAK,CAACmB,OAAO,CAAC,CAAC;IACtB;EACF;AACF;AAACC,OAAA,CAAAC,OAAA,GAAA3B,WAAA","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/rubric",
-  "version": "6.3.4-next.3+1f5df43bb",
+  "version": "7.0.0-beta.0",
   "main": "lib/index.js",
   "module": "src/index.js",
   "description": "Rubric Scoring Interaction",
@@ -9,23 +9,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
-    "@pie-lib/math-rendering": "3.22.1",
-    "@pie-lib/render-ui": "4.35.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/math-rendering": "3.22.3-next.0",
+    "@pie-lib/render-ui": "4.35.4-next.0",
     "prop-types": "^15.7.2"
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "1f5df43bb21a7e04dbae9de66831b3d64d3ff5a8",
+  "gitHead": "f7170c384c729616bce308c461c7443d6bc65ccc",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
-  },
-  "exports": {
-    ".": "./src/index.js",
-    "./print": "./src/print.js",
-    "./esm": "./esm/element.js",
-    "./configure/esm": "./esm/configure.js",
-    "./controller/esm": "./esm/controller.js",
-    "./print/esm": "./esm/print.js"
   }
 }

package/src/__tests__/rubric-view.test.jsx

@@ -1,4 +1,5 @@
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import Rubric from '../main';
 
@@ -13,37 +14,24 @@ describe('rubric viewer', () => {
             },
         };
 
-        return mount(<Rubric {...props} />);
+        return render(<Rubric {...props} />);
     };
 
-    describe('snapshot', () => {
-        it('renders', () => {
-            const w = wrapper();
-            expect(w).toMatchSnapshot();
-        });
-    });
-
-    describe('expanded snapshot', () => {
-        it('renders', () => {
-            const w = wrapper();
-            w.find('#rubric-toggle').simulate('click');
-            expect(w).toMatchSnapshot();
-        });
-    });
-
     describe('exclude zeros', () => {
-        it('renders correctly with excluded zeroes', () => {
-            let w = wrapper({
+        it('renders correctly with excluded zeroes', async () => {
+            let result = wrapper({
                 excludeZero: true,
                 points: ['a teeny bit right', 'mostly right', 'bingo'],
                 sampleAnswers: ['just right', 'not left', null]
             });
-            w.find('#rubric-toggle').simulate('click');
-            expect(w.find('li').length).toEqual(5);
+            let toggle = result.container.querySelector('#rubric-toggle');
+            await userEvent.click(toggle);
+            expect(result.container.querySelectorAll('li').length).toEqual(5);
 
-            w = wrapper({excludeZero: false});
-            w.find('#rubric-toggle').simulate('click');
-            expect(w.find('li').length).toEqual(6);
+            result = wrapper({excludeZero: false});
+            toggle = result.container.querySelector('#rubric-toggle');
+            await userEvent.click(toggle);
+            expect(result.container.querySelectorAll('li').length).toEqual(6);
         });
     });
 });

package/src/index.js

@@ -1,6 +1,6 @@
 import Rubric from './main';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import debug from 'debug';
 import { renderMath } from '@pie-lib/math-rendering';
 
@@ -9,6 +9,7 @@ export default class RubricRender extends HTMLElement {
     super();
     debug.log('constructor called');
     this.onModelChanged = this.onModelChanged.bind(this);
+    this._root = null;
   }
 
   set model(s) {
@@ -27,11 +28,21 @@ export default class RubricRender extends HTMLElement {
 
   _render() {
     if (this._model) {
-      const el = <Rubric value={this._model} />;
+      const el = React.createElement(Rubric, { value: this._model });
 
-      ReactDOM.render(el, this, () => {
+      if (!this._root) {
+        this._root = createRoot(this);
+      }
+      this._root.render(el);
+      queueMicrotask(() => {
         renderMath(this);
       });
     }
   }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
 }

package/src/main.jsx

@@ -1,11 +1,87 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import ListItem from '@material-ui/core/ListItem';
-import List from '@material-ui/core/List';
-import Collapse from '@material-ui/core/Collapse';
+import { styled } from '@mui/material/styles';
+import ListItem from '@mui/material/ListItem';
+import List from '@mui/material/List';
+import Collapse from '@mui/material/Collapse';
 import { color, UiLayout } from '@pie-lib/render-ui';
 import PropTypes from 'prop-types';
 
+const StyledUiLayout = styled(UiLayout)({
+  color: color.text(),
+  backgroundColor: 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 = styled(ListItem)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  padding: '12px 0px',
+});
+
+const Text = styled('div')({
+  color: color.text(),
+});
+
+const TitleText = styled('h3')({
+  color: color.text(),
+  fontSize: '16px',
+  fontWeight: '700',
+  margin: 0,
+  paddingBottom: '6px',
+});
+
+const SampleTitleText = styled('h4')({
+  color: color.text(),
+  fontSize: '16px',
+  fontWeight: 'normal',
+  margin: 0,
+  paddingBottom: '6px',
+});
+
+const RubricToggle = styled('h2')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  userSelect: 'none',
+  fontSize: theme.typography.fontSize,
+  fontWeight: '500',
+  color: color.tertiary(),
+  margin: 0,
+}));
+
+const ChevronStyle = styled('span')({
+  display: 'inline-flex',
+  transition: 'transform 0.2s',
+  marginLeft: 2,
+  alignSelf: 'center',
+});
+
+const HiddenScreenReader = styled('h2')({
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0,0,0,0)',
+  border: 0,
+  whiteSpace: 'nowrap',
+});
+
 export const RubricType = PropTypes.shape({
   excludeZero: PropTypes.bool,
   points: PropTypes.arrayOf(PropTypes.string),
@@ -26,7 +102,6 @@ class Rubric extends React.Component {
   }
 
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     model: PropTypes.object.isRequired,
     animationsDisabled: PropTypes.bool,
     value: RubricType,
@@ -46,7 +121,7 @@ class Rubric extends React.Component {
   };
 
   render() {
-    const { model, value, classes } = this.props;
+    const { model, value } = this.props;
     let { animationsDisabled } = this.props;
     animationsDisabled = animationsDisabled || value.animationsDisabled;
 
@@ -65,20 +140,20 @@ class Rubric extends React.Component {
 
               return (
                 <React.Fragment key={index}>
-                  <ListItem key={`P${index}`} className={classes.listColumn}>
-                    <h3 className={classes.titleText}>
+                  <StyledListItem key={`P${index}`}>
+                    <TitleText>
                       {pointsLabel === 1 ? `${pointsLabel} PT` : `${pointsLabel} PTS`}
-                    </h3>
-                    <div className={classes.text} dangerouslySetInnerHTML={{ __html: desc }} />
-                  </ListItem>
+                    </TitleText>
+                    <Text dangerouslySetInnerHTML={{ __html: desc }} />
+                  </StyledListItem>
 
                   {sampleAnswers && sampleAnswers[index] && (
-                    <ListItem key={`S${index}`} className={classes.listColumn}>
-                      <h4 className={classes.titleText} style={{ fontWeight: 'normal' }}>
+                    <StyledListItem key={`S${index}`}>
+                      <SampleTitleText>
                         Sample Answer
-                      </h4>
-                      <div className={classes.text} dangerouslySetInnerHTML={{ __html: sampleAnswers[index] }} />
-                    </ListItem>
+                      </SampleTitleText>
+                      <Text dangerouslySetInnerHTML={{ __html: sampleAnswers[index] }} />
+                    </StyledListItem>
                   )}
                 </React.Fragment>
               );
@@ -87,14 +162,13 @@ class Rubric extends React.Component {
       );
 
       return (
-        <UiLayout extraCSSRules={extraCSSRules} className={classes.root}>
+        <StyledUiLayout extraCSSRules={extraCSSRules}>
           {/* screen reader only heading for navigation as per PD-5057 */}
-          <h2 className={classes.hiddenScreenReader}>Rubric</h2>
+          <HiddenScreenReader>Rubric</HiddenScreenReader>
           {!animationsDisabled ? (
             <React.Fragment>
-              <h2
+              <RubricToggle
                 id={'rubric-toggle'}
-                className={classes.rubricToggle}
                 tabIndex={0}
                 role="button"
                 aria-expanded={this.state.rubricOpen}
@@ -104,7 +178,7 @@ class Rubric extends React.Component {
                 }}
               >
                 {this.state.linkPrefix} Rubric
-                <span className={classes.chevronStyle} aria-hidden="true">
+                <ChevronStyle aria-hidden="true">
                   {this.state.rubricOpen ? (
                     <svg
                       width="20"
@@ -132,16 +206,16 @@ class Rubric extends React.Component {
                       <polyline points="6 9 12 15 18 9"></polyline>
                     </svg>
                   )}
-                </span>
-              </h2>
-              <Collapse in={this.state.rubricOpen} timeout="auto">
+                </ChevronStyle>
+              </RubricToggle>
+              <Collapse in={this.state.rubricOpen} timeout={{ enter: 225, exit: 195 }}>
                 {rubricList}
               </Collapse>
             </React.Fragment>
           ) : (
             rubricList
           )}
-        </UiLayout>
+        </StyledUiLayout>
       );
     } else {
       return null;
@@ -149,71 +223,4 @@ class Rubric extends React.Component {
   }
 }
 
-const styles = (theme) => ({
-  root: {
-    color: color.text(),
-    backgroundColor: 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: color.text(),
-  },
-  titleText: {
-    color: 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: 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',
-  },
-});
-
-export default withStyles(styles)(Rubric);
+export default Rubric;

package/src/print.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import debounce from 'lodash/debounce';
 import Main from './main';
 import { renderMath } from '@pie-lib/math-rendering';
@@ -27,6 +27,7 @@ export default class RubricPrint extends HTMLElement {
     this._options = null;
     this._model = null;
     this._session = [];
+    this._root = null;
     this._rerender = debounce(
       () => {
         if (this._model && this._session) {
@@ -38,7 +39,11 @@ export default class RubricPrint extends HTMLElement {
               ...printModel,
             });
 
-          ReactDOM.render(element, this, () => {
+          if (!this._root) {
+            this._root = createRoot(this);
+          }
+          this._root.render(element);
+          queueMicrotask(() => {
             log('render complete - render math');
             renderMath(this);
           });
@@ -60,4 +65,10 @@ export default class RubricPrint extends HTMLElement {
   }
 
   connectedCallback() {}
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
 }