@pie-element/ebsr 12.3.4-next.0 → 13.0.0-beta.0

package/configure/node_modules/@pie-element/multiple-choice/lib/print.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"print.js","names":["_react","_interopRequireDefault","require","_client","_debounce","_cloneDeep","_main","_mathRendering","_debug","log","debug","preparePrintModel","model","opts","instr","role","prompt","promptEnabled","undefined","teacherInstructions","teacherInstructionsEnabled","showTeacherInstructions","alwaysShowCorrect","mode","disabled","animationsDisabled","lockChoiceOrder","choicesLayout","choices","cloneDeep","map","c","rationale","rationaleEnabled","hideTick","feedback","keyMode","choicePrefix","MultipleChoicePrint","HTMLElement","constructor","_options","_model","_session","_root","_rerender","debounce","printModel","element","React","createElement","Main","session","options","createRoot","render","queueMicrotask","renderMath","leading","trailing","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 cloneDeep from 'lodash/cloneDeep';\nimport Main from './main';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\n\nconst log = debug('pie-element:multiple-choice:print');\n\n/**\n * Live in same package as main element - so we can access some of the shared comps!\n *\n * - update pslb to build print if src/print.js is there\n * - update demo el\n * - get configure/controller building\n */\n\nconst preparePrintModel = (model, opts) => {\n  const instr = opts.role === 'instructor';\n\n  model.prompt = model.promptEnabled !== false ? model.prompt : undefined;\n  model.teacherInstructions =\n    instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;\n  model.showTeacherInstructions = instr;\n  model.alwaysShowCorrect = instr;\n  model.mode = instr ? 'evaluate' : model.mode;\n\n  model.disabled = true;\n  model.animationsDisabled = true;\n  model.lockChoiceOrder = true;\n  model.choicesLayout = model.choicesLayout || 'vertical';\n\n  const choices = cloneDeep(model.choices);\n\n  model.choices = choices.map((c) => {\n    c.rationale = instr && model.rationaleEnabled !== false ? c.rationale : undefined;\n    c.hideTick = instr;\n    c.feedback = undefined;\n    return c;\n  });\n\n  model.keyMode = model.choicePrefix || 'letters';\n\n  return model;\n};\n\nexport default class MultipleChoicePrint 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              model: printModel,\n              session: {},\n              options: this._options,\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":"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","ignoreList":[]}

package/configure/node_modules/@pie-element/multiple-choice/lib/session-updater.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateSessionMetadata = updateSessionMetadata;
+exports.updateSessionValue = updateSessionValue;
+function updateSessionValue(session, choiceMode, data) {
+  session.value = session.value || [];
+  if (choiceMode === 'checkbox') {
+    if (data.selected) {
+      session.value = Array.from(new Set([...session.value, data.value]));
+    } else {
+      session.value = session.value.filter(v => v !== data.value);
+    }
+  }
+  if (choiceMode === 'radio') {
+    if (data.selected) {
+      session.value = [data.value];
+    } else {
+      session.value = [];
+    }
+  }
+
+  //update session value metadata
+  session.selector = data.selector; //the input method used to select the choice (e.g. mouse, keyboard)
+}
+function updateSessionMetadata(session, metadata) {
+  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing
+  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing
+
+  if (!session.waitTime && session.audioStartTime && session.audioEndTime) {
+    // waitTime is elapsed time the user waited for auto-played audio to finish
+    session.waitTime = session.audioEndTime - session.audioStartTime;
+  }
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJ1cGRhdGVTZXNzaW9uVmFsdWUiLCJzZXNzaW9uIiwiY2hvaWNlTW9kZSIsImRhdGEiLCJ2YWx1ZSIsInNlbGVjdGVkIiwiQXJyYXkiLCJmcm9tIiwiU2V0IiwiZmlsdGVyIiwidiIsInNlbGVjdG9yIiwidXBkYXRlU2Vzc2lvbk1ldGFkYXRhIiwibWV0YWRhdGEiLCJhdWRpb1N0YXJ0VGltZSIsImF1ZGlvRW5kVGltZSIsIndhaXRUaW1lIl0sInNvdXJjZXMiOlsiLi4vc3JjL3Nlc3Npb24tdXBkYXRlci5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZnVuY3Rpb24gdXBkYXRlU2Vzc2lvblZhbHVlKHNlc3Npb24sIGNob2ljZU1vZGUsIGRhdGEpIHtcbiAgc2Vzc2lvbi52YWx1ZSA9IHNlc3Npb24udmFsdWUgfHwgW107XG4gIGlmIChjaG9pY2VNb2RlID09PSAnY2hlY2tib3gnKSB7XG4gICAgaWYgKGRhdGEuc2VsZWN0ZWQpIHtcbiAgICAgIHNlc3Npb24udmFsdWUgPSBBcnJheS5mcm9tKG5ldyBTZXQoWy4uLnNlc3Npb24udmFsdWUsIGRhdGEudmFsdWVdKSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHNlc3Npb24udmFsdWUgPSBzZXNzaW9uLnZhbHVlLmZpbHRlcih2ID0+IHYgIT09IGRhdGEudmFsdWUpO1xuICAgIH1cbiAgfVxuXG4gIGlmIChjaG9pY2VNb2RlID09PSAncmFkaW8nKSB7XG4gICAgaWYgKGRhdGEuc2VsZWN0ZWQpIHtcbiAgICAgIHNlc3Npb24udmFsdWUgPSBbZGF0YS52YWx1ZV07XG4gICAgfSBlbHNlIHtcbiAgICAgIHNlc3Npb24udmFsdWUgPSBbXTtcbiAgICB9XG4gIH1cbiAgXG4gIC8vdXBkYXRlIHNlc3Npb24gdmFsdWUgbWV0YWRhdGFcbiAgc2Vzc2lvbi5zZWxlY3RvciA9IGRhdGEuc2VsZWN0b3I7IC8vdGhlIGlucHV0IG1ldGhvZCB1c2VkIHRvIHNlbGVjdCB0aGUgY2hvaWNlIChlLmcuIG1vdXNlLCBrZXlib2FyZClcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHVwZGF0ZVNlc3Npb25NZXRhZGF0YShzZXNzaW9uLCBtZXRhZGF0YSkge1xuICBzZXNzaW9uLmF1ZGlvU3RhcnRUaW1lID0gc2Vzc2lvbi5hdWRpb1N0YXJ0VGltZSB8fCBtZXRhZGF0YS5hdWRpb1N0YXJ0VGltZTsgLy90aW1lc3RhbXAgd2hlbiBhdXRvLXBsYXllZCBhdWRpbyBzdGFydGVkIHBsYXlpbmdcbiAgc2Vzc2lvbi5hdWRpb0VuZFRpbWUgPSBzZXNzaW9uLmF1ZGlvRW5kVGltZSB8fCBtZXRhZGF0YS5hdWRpb0VuZFRpbWU7IC8vdGltZXN0YW1wIHdoZW4gYXV0by1wbGF5ZWQgYXVkaW8gY29tcGxldGVkIHBsYXlpbmdcbiAgXG4gIGlmKCFzZXNzaW9uLndhaXRUaW1lICYmIHNlc3Npb24uYXVkaW9TdGFydFRpbWUgJiYgc2Vzc2lvbi5hdWRpb0VuZFRpbWUpIHtcbiAgICAvLyB3YWl0VGltZSBpcyBlbGFwc2VkIHRpbWUgdGhlIHVzZXIgd2FpdGVkIGZvciBhdXRvLXBsYXllZCBhdWRpbyB0byBmaW5pc2hcbiAgICBzZXNzaW9uLndhaXRUaW1lID0gKHNlc3Npb24uYXVkaW9FbmRUaW1lIC0gc2Vzc2lvbi5hdWRpb1N0YXJ0VGltZSk7XG4gIH1cbn1cbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUFPLFNBQVNBLGtCQUFrQkEsQ0FBQ0MsT0FBTyxFQUFFQyxVQUFVLEVBQUVDLElBQUksRUFBRTtFQUM1REYsT0FBTyxDQUFDRyxLQUFLLEdBQUdILE9BQU8sQ0FBQ0csS0FBSyxJQUFJLEVBQUU7RUFDbkMsSUFBSUYsVUFBVSxLQUFLLFVBQVUsRUFBRTtJQUM3QixJQUFJQyxJQUFJLENBQUNFLFFBQVEsRUFBRTtNQUNqQkosT0FBTyxDQUFDRyxLQUFLLEdBQUdFLEtBQUssQ0FBQ0MsSUFBSSxDQUFDLElBQUlDLEdBQUcsQ0FBQyxDQUFDLEdBQUdQLE9BQU8sQ0FBQ0csS0FBSyxFQUFFRCxJQUFJLENBQUNDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFDckUsQ0FBQyxNQUFNO01BQ0xILE9BQU8sQ0FBQ0csS0FBSyxHQUFHSCxPQUFPLENBQUNHLEtBQUssQ0FBQ0ssTUFBTSxDQUFDQyxDQUFDLElBQUlBLENBQUMsS0FBS1AsSUFBSSxDQUFDQyxLQUFLLENBQUM7SUFDN0Q7RUFDRjtFQUVBLElBQUlGLFVBQVUsS0FBSyxPQUFPLEVBQUU7SUFDMUIsSUFBSUMsSUFBSSxDQUFDRSxRQUFRLEVBQUU7TUFDakJKLE9BQU8sQ0FBQ0csS0FBSyxHQUFHLENBQUNELElBQUksQ0FBQ0MsS0FBSyxDQUFDO0lBQzlCLENBQUMsTUFBTTtNQUNMSCxPQUFPLENBQUNHLEtBQUssR0FBRyxFQUFFO0lBQ3BCO0VBQ0Y7O0VBRUE7RUFDQUgsT0FBTyxDQUFDVSxRQUFRLEdBQUdSLElBQUksQ0FBQ1EsUUFBUSxDQUFDLENBQUM7QUFDcEM7QUFFTyxTQUFTQyxxQkFBcUJBLENBQUNYLE9BQU8sRUFBRVksUUFBUSxFQUFFO0VBQ3ZEWixPQUFPLENBQUNhLGNBQWMsR0FBR2IsT0FBTyxDQUFDYSxjQUFjLElBQUlELFFBQVEsQ0FBQ0MsY0FBYyxDQUFDLENBQUM7RUFDNUViLE9BQU8sQ0FBQ2MsWUFBWSxHQUFHZCxPQUFPLENBQUNjLFlBQVksSUFBSUYsUUFBUSxDQUFDRSxZQUFZLENBQUMsQ0FBQzs7RUFFdEUsSUFBRyxDQUFDZCxPQUFPLENBQUNlLFFBQVEsSUFBSWYsT0FBTyxDQUFDYSxjQUFjLElBQUliLE9BQU8sQ0FBQ2MsWUFBWSxFQUFFO0lBQ3RFO0lBQ0FkLE9BQU8sQ0FBQ2UsUUFBUSxHQUFJZixPQUFPLENBQUNjLFlBQVksR0FBR2QsT0FBTyxDQUFDYSxjQUFlO0VBQ3BFO0FBQ0YiLCJpZ25vcmVMaXN0IjpbXX0=

package/configure/node_modules/@pie-element/multiple-choice/lib/session-updater.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-updater.js","names":["updateSessionValue","session","choiceMode","data","value","selected","Array","from","Set","filter","v","selector","updateSessionMetadata","metadata","audioStartTime","audioEndTime","waitTime"],"sources":["../src/session-updater.js"],"sourcesContent":["export function updateSessionValue(session, choiceMode, data) {\n  session.value = session.value || [];\n  if (choiceMode === 'checkbox') {\n    if (data.selected) {\n      session.value = Array.from(new Set([...session.value, data.value]));\n    } else {\n      session.value = session.value.filter(v => v !== data.value);\n    }\n  }\n\n  if (choiceMode === 'radio') {\n    if (data.selected) {\n      session.value = [data.value];\n    } else {\n      session.value = [];\n    }\n  }\n  \n  //update session value metadata\n  session.selector = data.selector; //the input method used to select the choice (e.g. mouse, keyboard)\n}\n\nexport function updateSessionMetadata(session, metadata) {\n  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing\n  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing\n  \n  if(!session.waitTime && session.audioStartTime && session.audioEndTime) {\n    // waitTime is elapsed time the user waited for auto-played audio to finish\n    session.waitTime = (session.audioEndTime - session.audioStartTime);\n  }\n}\n"],"mappings":";;;;;;;AAAO,SAASA,kBAAkBA,CAACC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE;EAC5DF,OAAO,CAACG,KAAK,GAAGH,OAAO,CAACG,KAAK,IAAI,EAAE;EACnC,IAAIF,UAAU,KAAK,UAAU,EAAE;IAC7B,IAAIC,IAAI,CAACE,QAAQ,EAAE;MACjBJ,OAAO,CAACG,KAAK,GAAGE,KAAK,CAACC,IAAI,CAAC,IAAIC,GAAG,CAAC,CAAC,GAAGP,OAAO,CAACG,KAAK,EAAED,IAAI,CAACC,KAAK,CAAC,CAAC,CAAC;IACrE,CAAC,MAAM;MACLH,OAAO,CAACG,KAAK,GAAGH,OAAO,CAACG,KAAK,CAACK,MAAM,CAACC,CAAC,IAAIA,CAAC,KAAKP,IAAI,CAACC,KAAK,CAAC;IAC7D;EACF;EAEA,IAAIF,UAAU,KAAK,OAAO,EAAE;IAC1B,IAAIC,IAAI,CAACE,QAAQ,EAAE;MACjBJ,OAAO,CAACG,KAAK,GAAG,CAACD,IAAI,CAACC,KAAK,CAAC;IAC9B,CAAC,MAAM;MACLH,OAAO,CAACG,KAAK,GAAG,EAAE;IACpB;EACF;;EAEA;EACAH,OAAO,CAACU,QAAQ,GAAGR,IAAI,CAACQ,QAAQ,CAAC,CAAC;AACpC;AAEO,SAASC,qBAAqBA,CAACX,OAAO,EAAEY,QAAQ,EAAE;EACvDZ,OAAO,CAACa,cAAc,GAAGb,OAAO,CAACa,cAAc,IAAID,QAAQ,CAACC,cAAc,CAAC,CAAC;EAC5Eb,OAAO,CAACc,YAAY,GAAGd,OAAO,CAACc,YAAY,IAAIF,QAAQ,CAACE,YAAY,CAAC,CAAC;;EAEtE,IAAG,CAACd,OAAO,CAACe,QAAQ,IAAIf,OAAO,CAACa,cAAc,IAAIb,OAAO,CAACc,YAAY,EAAE;IACtE;IACAd,OAAO,CAACe,QAAQ,GAAIf,OAAO,CAACc,YAAY,GAAGd,OAAO,CAACa,cAAe;EACpE;AACF","ignoreList":[]}

package/configure/node_modules/@pie-element/multiple-choice/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@pie-element/multiple-choice",
+  "repository": "pie-framework/pie-elements",
+  "version": "11.2.0-mui-update.4",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-framework/pie-player-events": "^0.1.0",
+    "@pie-lib/correct-answer-toggle": "2.32.1-mui-update.0",
+    "@pie-lib/math-rendering": "3.33.1-mui-update.0",
+    "@pie-lib/render-ui": "4.42.1-mui-update.0",
+    "@pie-lib/translator": "2.31.1-mui-update.0",
+    "classnames": "^2.2.5",
+    "debug": "^4.1.1",
+    "enzyme-to-json": "^3.3.3",
+    "lodash": "^4.17.10",
+    "prop-types": "^15.6.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-test-renderer": "18.2.0",
+    "react-transition-group": "^2.3.1"
+  },
+  "gitHead": "0e14ff981bcdc8a89a0e58484026496701bfdbc3",
+  "scripts": {
+    "postpublish": "../../scripts/postpublish"
+  },
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./print": "./src/print.js",
+    "./configure/lib": "./configure/lib/index.js"
+  }
+}

package/configure/package.json

@@ -1,20 +1,23 @@
 {
   "name": "@pie-element/ebsr-configure",
   "private": true,
-  "version": "11.3.3",
+  "version": "12.0.0-beta.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "author": "",
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
-    "@pie-element/multiple-choice": "^11.4.3",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-element/multiple-choice": "12.0.0-beta.0",
     "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/config-ui": "11.30.2",
+    "@pie-lib/config-ui": "11.30.4-next.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "license": "ISC"
 }

package/configure/src/__tests__/index.test.js

@@ -1,23 +1,29 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { ModelUpdatedEvent } from '@pie-framework/pie-configure-events';
 import { choiceUtils as utils } from '@pie-lib/config-ui';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import defaults from '../defaults';
 import { Main } from '../main';
 import EbsrConfigure from '../index';
 
-jest.mock('react-dom', () => ({
-  render: jest.fn(),
+const mockRender = jest.fn();
+const mockUnmount = jest.fn();
+jest.mock('react-dom/client', () => ({
+  createRoot: jest.fn(() => ({
+    render: mockRender,
+    unmount: mockUnmount,
+  })),
 }));
 
 jest.mock('@pie-framework/pie-configure-events', () => ({
-  ModelUpdatedEvent: (update) => {
-    return {
-      update,
-      preventDefault: jest.fn(),
-      stopImmediatePropagation: jest.fn(),
-    };
+  ModelUpdatedEvent: class ModelUpdatedEvent {
+    constructor(update) {
+      this.update = update;
+      this.preventDefault = jest.fn();
+      this.stopImmediatePropagation = jest.fn();
+    }
   },
 }));
 
@@ -26,17 +32,19 @@ jest.mock('@pie-lib/config-ui', () => ({
     firstAvailableIndex: jest.fn(),
   },
   settings: {
-    Panel: (props) => <div {...props} />,
+    Panel: (props) => <div data-testid="settings-panel" {...props} />,
     toggle: jest.fn(),
     radio: jest.fn(),
     dropdown: jest.fn(),
   },
   layout: {
-    ConfigLayout: (props) => <div>{props.children}</div>,
+    ConfigLayout: (props) => <div data-testid="config-layout">{props.children}</div>,
   },
 }));
 
-jest.mock('@pie-element/multiple-choice/configure/lib', () => class MockConfigure {});
+jest.mock('@pie-element/multiple-choice/configure/lib', () => (class MockConfigure {}));
+
+const theme = createTheme();
 
 const PART_A = 'partA';
 const PART_B = 'partB';
@@ -110,65 +118,25 @@ describe('index', () => {
   let el;
   let onModelChanged = jest.fn();
   let onConfigurationChanged = jest.fn();
-  let main;
 
   beforeAll(() => {
     Def = require('../index').default;
+
+    // Register the custom element if not already registered
+    if (!customElements.get('ebsr-configure')) {
+      customElements.define('ebsr-configure', Def);
+    }
   });
 
   beforeEach(() => {
-    el = new Def();
+    jest.clearAllMocks();
+    el = document.createElement('ebsr-configure');
     el.model = model;
     el.configuration = defaults.configuration;
     el.onModelChanged = onModelChanged;
     el.onConfigurationChanged = onConfigurationChanged;
     el.connectedCallback();
     el.dispatchEvent = el.onModelUpdated;
-
-    main = mount(
-      <Main
-        classes={{}}
-        model={el._model}
-        configuration={defaults.configuration}
-        onConfigurationChanged={el.onConfigurationChanged}
-        onModelChanged={el.onModelChanged}
-      />,
-    );
-
-    // mock onModelChanged to dispatch a MODEL_UPDATED event (as multiple-choice does)
-    main.instance().partA.onModelChanged = (m) => {
-      const event = new ModelUpdatedEvent(m, false);
-
-      el.dispatchEvent({
-        ...event,
-        target: {
-          getAttribute: jest.fn().mockReturnValue('A'),
-        },
-      });
-    };
-    main.instance().partB.onModelChanged = (m) => {
-      const event = new ModelUpdatedEvent(m, false);
-
-      el.dispatchEvent({
-        ...event,
-        target: {
-          getAttribute: jest.fn().mockReturnValue('B'),
-        },
-      });
-    };
-  });
-
-  describe('createDefaultModel', () => {
-    it('default-snapshot', () => {
-      const m = EbsrConfigure.createDefaultModel({});
-      expect(m).toMatchSnapshot();
-    });
-    it('with-overrides-snapshot', () => {
-      const m = EbsrConfigure.createDefaultModel({
-        partA: { rationale: 'foo', teacherInstructions: 'ti' },
-      });
-      expect(m).toMatchSnapshot();
-    });
   });
 
   describe('set model', () => {
@@ -176,12 +144,26 @@ describe('index', () => {
       el.model = model;
 
       expect(el._model).toEqual(model);
-      expect(ReactDOM.render).toHaveBeenCalled();
+      expect(createRoot).toHaveBeenCalled();
+      expect(mockRender).toHaveBeenCalled();
     });
 
     it('should have set the model for partA and partB', () => {
-      expect(main.instance().partA._model).toEqual(model.partA);
-      expect(main.instance().partB._model).toEqual(model.partB);
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <Main
+            classes={{}}
+            model={el._model}
+            configuration={defaults.configuration}
+            onConfigurationChanged={el.onConfigurationChanged}
+            onModelChanged={el.onModelChanged}
+          />
+        </ThemeProvider>
+      );
+
+      expect(container).toBeInTheDocument();
+      expect(el._model.partA).toEqual(model.partA);
+      expect(el._model.partB).toEqual(model.partB);
     });
   });
 
@@ -189,24 +171,28 @@ describe('index', () => {
     it('calls ReactDOM.render', () => {
       el.configuration = defaults.configuration;
 
-      expect(ReactDOM.render).toHaveBeenCalled();
+      expect(createRoot).toHaveBeenCalled();
+      expect(mockRender).toHaveBeenCalled();
     });
 
     it('should have set the configuration for partA and partB', () => {
-      expect(main.instance().partA.configuration).toEqual({
-        ...defaults.configuration.partA,
-        partLabels: defaults.configuration.partLabels,
-        settingsPanelDisabled: true,
-      });
-      expect(main.instance().partB.configuration).toEqual({
-        ...defaults.configuration.partB,
-        partLabels: defaults.configuration.partLabels,
-        settingsPanelDisabled: true,
-      });
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <Main
+            classes={{}}
+            model={el._model}
+            configuration={defaults.configuration}
+            onConfigurationChanged={el.onConfigurationChanged}
+            onModelChanged={el.onModelChanged}
+          />
+        </ThemeProvider>
+      );
+
+      expect(container).toBeInTheDocument();
     });
   });
 
-  const assetOnModelUpdated = (label, key, updatedPart, expected) => {
+  const assertOnModelUpdated = (label, key, updatedPart, expected) => {
     it(label, () => {
       const event = new ModelUpdatedEvent(updatedPart, false);
 
@@ -217,22 +203,23 @@ describe('index', () => {
         },
       });
 
-      expect(ReactDOM.render).toBeCalled();
+      expect(createRoot).toBeCalled();
+      expect(mockRender).toBeCalled();
       expect(el._model[`part${key}`]).toEqual(expected);
     });
   };
 
   describe('onModelUpdated', () => {
-    assetOnModelUpdated('dispatching MODEL_UPDATED updates model.partA', 'A', { updatedA: true }, { updatedA: true });
-    assetOnModelUpdated('dispatching MODEL_UPDATED updates model.partB', 'B', { updatedB: true }, { updatedB: true });
+    assertOnModelUpdated('dispatching MODEL_UPDATED updates model.partA', 'A', { updatedA: true }, { updatedA: true });
+    assertOnModelUpdated('dispatching MODEL_UPDATED updates model.partB', 'B', { updatedB: true }, { updatedB: true });
 
-    assetOnModelUpdated(
+    assertOnModelUpdated(
       'dispatching MODEL_UPDATED with update undefined does not update model.partA',
       'A',
       undefined,
       createDefaultModel(model).partA,
     );
-    assetOnModelUpdated(
+    assertOnModelUpdated(
       'dispatching MODEL_UPDATED with update undefined does not update model.partB',
       'B',
       undefined,
@@ -240,34 +227,43 @@ describe('index', () => {
     );
   });
 
-  const assetPartUpdate = (label, key, updatedModel) => {
+  const assertPartUpdate = (label, key, updatedModel) => {
     it(`${key} - ${label}`, () => {
-      main.instance()[key].onModelChanged(updatedModel);
+      // Simulate the onModelChanged call for the specific part
+      const event = new ModelUpdatedEvent(updatedModel, false);
+
+      el.dispatchEvent({
+        ...event,
+        target: {
+          getAttribute: jest.fn().mockReturnValue(key === 'partA' ? 'A' : 'B'),
+        },
+      });
 
       expect(el._model[key]).toEqual(updatedModel);
-      expect(ReactDOM.render).toBeCalled();
+      expect(createRoot).toBeCalled();
+      expect(mockRender).toBeCalled();
     });
   };
 
   describe('part update', () => {
-    assetPartUpdate('Dispatching Model Updated Event will update Teacher Instructions', 'partA', {
+    assertPartUpdate('Dispatching Model Updated Event will update Teacher Instructions', 'partA', {
       ...model.partA,
       teacherInstructions: 'Part A Teacher Instructions',
     });
-    assetPartUpdate('Dispatching Model Updated Event will update Teacher Instructions', 'partB', {
+    assertPartUpdate('Dispatching Model Updated Event will update Teacher Instructions', 'partB', {
       ...model.partB,
       teacherInstructions: 'Part B Teacher Instructions',
     });
-    assetPartUpdate('Dispatching Model Updated Event will update Prompt', 'partA', {
+    assertPartUpdate('Dispatching Model Updated Event will update Prompt', 'partA', {
       ...model.partA,
       prompt: 'Prompt A',
     });
-    assetPartUpdate('Dispatching Model Updated Event will update Prompt', 'partB', {
+    assertPartUpdate('Dispatching Model Updated Event will update Prompt', 'partB', {
       ...model.partA,
       prompt: 'Prompt B',
     });
 
-    assetPartUpdate('Dispatching Model Updated Event will update Choices - ADD CHOICE', 'partA', {
+    assertPartUpdate('Dispatching Model Updated Event will update Choices - ADD CHOICE', 'partA', {
       ...model.partA,
       choices: [
         ...model.partA.choices,
@@ -283,7 +279,7 @@ describe('index', () => {
         },
       ],
     });
-    assetPartUpdate('Dispatching Model Updated Event will update Choices - ADD CHOICE', 'partB', {
+    assertPartUpdate('Dispatching Model Updated Event will update Choices - ADD CHOICE', 'partB', {
       ...model.partB,
       choices: [
         ...model.partB.choices,
@@ -299,15 +295,15 @@ describe('index', () => {
         },
       ],
     });
-    assetPartUpdate('Dispatching Model Updated Event will update Choices - REMOVE CHOICE', 'partA', {
+    assertPartUpdate('Dispatching Model Updated Event will update Choices - REMOVE CHOICE', 'partA', {
       ...model.partA,
       choices: model.partA.choices.splice(0, 2),
     });
-    assetPartUpdate('Dispatching Model Updated Event will update Choices - REMOVE CHOICE', 'partB', {
+    assertPartUpdate('Dispatching Model Updated Event will update Choices - REMOVE CHOICE', 'partB', {
       ...model.partB,
       choices: model.partB.choices.splice(0, 2),
     });
-    assetPartUpdate('Dispatching Model Updated Event will update Choices - CHANGE CHOICE', 'partA', {
+    assertPartUpdate('Dispatching Model Updated Event will update Choices - CHANGE CHOICE', 'partA', {
       ...model.partA,
       choices: model.partA.choices.splice(1, 1, {
         correct: true,
@@ -319,7 +315,7 @@ describe('index', () => {
         },
       }),
     });
-    assetPartUpdate('Dispatching Model Updated Event will update Choices - CHANGE CHOICE', 'partB', {
+    assertPartUpdate('Dispatching Model Updated Event will update Choices - CHANGE CHOICE', 'partB', {
       ...model.partB,
       choices: model.partB.choices.splice(1, 1, {
         correct: true,
@@ -332,40 +328,35 @@ describe('index', () => {
       }),
     });
 
-    assetPartUpdate('Dispatching Model Updated Event will update Choices', 'partA', { ...model.partA, choices: [] });
-    assetPartUpdate('Dispatching Model Updated Event will update Choices', 'partB', { ...model.partB, choices: [] });
+    assertPartUpdate('Dispatching Model Updated Event will update Choices', 'partA', { ...model.partA, choices: [] });
+    assertPartUpdate('Dispatching Model Updated Event will update Choices', 'partB', { ...model.partB, choices: [] });
   });
 });
 
 describe('main', () => {
   let Def;
   let el;
-  let main;
 
   beforeAll(() => {
     Def = require('../index').default;
+
+    // Register the custom element if not already registered
+    if (!customElements.get('ebsr-configure')) {
+      customElements.define('ebsr-configure', Def);
+    }
   });
 
   beforeEach(() => {
-    el = new Def();
+    jest.clearAllMocks();
+    el = document.createElement('ebsr-configure');
     el.model = model;
     el.configuration = defaults.configuration;
     el.dispatchEvent = el.onModelUpdated;
-
-    main = mount(
-      <Main
-        classes={{}}
-        model={el._model}
-        configuration={defaults.configuration}
-        onConfigurationChanged={el.onConfigurationChanged}
-        onModelChanged={el.onModelChanged}
-      />,
-    );
   });
 
   const assertOnModelChanged = (label, updatedModel, expected) => {
     it(label, () => {
-      main.instance().props.onModelChanged(updatedModel);
+      el.onModelChanged(updatedModel);
 
       expect(el._model).toEqual(createDefaultModel(model, expected));
     });

package/configure/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { ModelUpdatedEvent } from '@pie-framework/pie-configure-events';
 import MultipleChoiceConfigure from '@pie-element/multiple-choice/configure/lib';
 import defaults from 'lodash/defaults';
@@ -50,6 +50,7 @@ export default class EbsrConfigure extends HTMLElement {
 
   constructor() {
     super();
+    this._root = null;
 
     this._model = EbsrConfigure.createDefaultModel();
 
@@ -150,10 +151,6 @@ export default class EbsrConfigure extends HTMLElement {
     this._render();
   }
 
-  disconnectedCallback() {
-    this.removeEventListener(MODEL_UPDATED, this.onModelUpdated);
-  }
-
   _render() {
     let element = React.createElement(Main, {
       model: this._model,
@@ -162,6 +159,16 @@ export default class EbsrConfigure extends HTMLElement {
       onConfigurationChanged: this.onConfigurationChanged,
     });
 
-    ReactDOM.render(element, this);
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(element);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener(MODEL_UPDATED, this.onModelUpdated);
+    if (this._root) {
+      this._root.unmount();
+    }
   }
 }

package/configure/src/main.jsx

@@ -1,23 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { settings, layout } from '@pie-lib/config-ui';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
 const { Panel, toggle, radio, dropdown } = settings;
 
-const styles = (theme) => ({
-  partLabel: {
-    paddingBottom: theme.spacing.unit * 2,
-  },
-  divider: {
-    flex: 1,
-    height: theme.spacing.unit * 2.5,
-  },
-});
+const PartLabel = styled('div')(({ theme }) => ({
+  paddingBottom: theme.spacing(2),
+}));
+
+const Divider = styled('div')(({ theme }) => ({
+  flex: 1,
+  height: theme.spacing(2.5),
+}));
 
 export class Main extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     configuration: PropTypes.object,
     model: PropTypes.object,
     onModelChanged: PropTypes.func,
@@ -61,7 +59,7 @@ export class Main extends React.Component {
   };
 
   render() {
-    const { classes, model, configuration, onConfigurationChanged } = this.props;
+    const { model, configuration, onConfigurationChanged } = this.props;
     const { partLabelType, partA: modelPartA, partB: modelPartB, extraCSSRules } = model;
     const {
       contentDimensions = {},
@@ -188,7 +186,7 @@ export class Main extends React.Component {
           />
         }
       >
-        {model.partLabels && <div className={classes.partLabel}>{firstPart}</div>}
+        {model.partLabels && <PartLabel>{firstPart}</PartLabel>}
         <ebsr-multiple-choice-configure
           id="A"
           key="partA"
@@ -208,9 +206,9 @@ export class Main extends React.Component {
           }}
         />
 
-        <div className={classes.divider} />
+        <Divider />
 
-        {model.partLabels && <div className={classes.partLabel}>{secondPart}</div>}
+        {model.partLabels && <PartLabel>{secondPart}</PartLabel>}
         <ebsr-multiple-choice-configure
           id="B"
           key="partB"
@@ -234,6 +232,4 @@ export class Main extends React.Component {
   }
 }
 
-const Styled = withStyles(styles)(Main);
-
-export default Styled;
+export default Main;