@pie-element/hotspot 9.1.0 → 9.2.0-mui-update.0

package/lib/session-updater.js

@@ -5,39 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.updateSessionMetadata = updateSessionMetadata;
 exports.updateSessionValue = updateSessionValue;
-
 function updateSessionValue(session, model, data) {
-  var id = data.id,
-      selected = data.selected;
-
-  var _ref = model || {},
-      multipleCorrect = _ref.multipleCorrect;
-
+  const {
+    id,
+    selected
+  } = data;
+  const {
+    multipleCorrect
+  } = model || {};
   session.answers = session.answers || [];
-
   if (!selected) {
-    session.answers = session.answers.filter(function (answer) {
-      return answer.id !== id;
-    });
+    session.answers = session.answers.filter(answer => answer.id !== id);
   } else {
-    var item = {
-      id: id
+    const item = {
+      id
     };
-
     if (multipleCorrect) {
       session.answers.push(item);
     } else {
       session.answers = [item];
-    } //update session metadata
-
+    }
 
+    //update session metadata
     session.selector = data.selector;
   }
 }
-
 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) {
@@ -45,4 +39,4 @@ function updateSessionMetadata(session, metadata) {
     session.waitTime = session.audioEndTime - session.audioStartTime;
   }
 }
-//# sourceMappingURL=session-updater.js.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJ1cGRhdGVTZXNzaW9uVmFsdWUiLCJzZXNzaW9uIiwibW9kZWwiLCJkYXRhIiwiaWQiLCJzZWxlY3RlZCIsIm11bHRpcGxlQ29ycmVjdCIsImFuc3dlcnMiLCJmaWx0ZXIiLCJhbnN3ZXIiLCJpdGVtIiwicHVzaCIsInNlbGVjdG9yIiwidXBkYXRlU2Vzc2lvbk1ldGFkYXRhIiwibWV0YWRhdGEiLCJhdWRpb1N0YXJ0VGltZSIsImF1ZGlvRW5kVGltZSIsIndhaXRUaW1lIl0sInNvdXJjZXMiOlsiLi4vc3JjL3Nlc3Npb24tdXBkYXRlci5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZnVuY3Rpb24gdXBkYXRlU2Vzc2lvblZhbHVlKHNlc3Npb24sIG1vZGVsLCBkYXRhKSB7XG4gIGNvbnN0IHsgaWQsIHNlbGVjdGVkIH0gPSBkYXRhO1xuICBjb25zdCB7IG11bHRpcGxlQ29ycmVjdCB9ID0gbW9kZWwgfHwge307XG4gIHNlc3Npb24uYW5zd2VycyA9IHNlc3Npb24uYW5zd2VycyB8fCBbXTtcblxuICBpZiAoIXNlbGVjdGVkKSB7XG4gICAgc2Vzc2lvbi5hbnN3ZXJzID0gc2Vzc2lvbi5hbnN3ZXJzLmZpbHRlcigoYW5zd2VyKSA9PiBhbnN3ZXIuaWQgIT09IGlkKTtcbiAgfSBlbHNlIHtcbiAgICBjb25zdCBpdGVtID0geyBpZCB9O1xuICAgIGlmIChtdWx0aXBsZUNvcnJlY3QpIHtcbiAgICAgIHNlc3Npb24uYW5zd2Vycy5wdXNoKGl0ZW0pO1xuICAgIH0gZWxzZSB7XG4gICAgICBzZXNzaW9uLmFuc3dlcnMgPSBbaXRlbV07XG4gICAgfVxuXG4gICAgLy91cGRhdGUgc2Vzc2lvbiBtZXRhZGF0YVxuICAgIHNlc3Npb24uc2VsZWN0b3IgPSBkYXRhLnNlbGVjdG9yO1xuICB9XG59XG5cbmV4cG9ydCBmdW5jdGlvbiB1cGRhdGVTZXNzaW9uTWV0YWRhdGEoc2Vzc2lvbiwgbWV0YWRhdGEpIHtcbiAgc2Vzc2lvbi5hdWRpb1N0YXJ0VGltZSA9IHNlc3Npb24uYXVkaW9TdGFydFRpbWUgfHwgbWV0YWRhdGEuYXVkaW9TdGFydFRpbWU7IC8vdGltZXN0YW1wIHdoZW4gYXV0by1wbGF5ZWQgYXVkaW8gc3RhcnRlZCBwbGF5aW5nXG4gIHNlc3Npb24uYXVkaW9FbmRUaW1lID0gc2Vzc2lvbi5hdWRpb0VuZFRpbWUgfHwgbWV0YWRhdGEuYXVkaW9FbmRUaW1lOyAvL3RpbWVzdGFtcCB3aGVuIGF1dG8tcGxheWVkIGF1ZGlvIGNvbXBsZXRlZCBwbGF5aW5nXG5cbiAgaWYgKCFzZXNzaW9uLndhaXRUaW1lICYmIHNlc3Npb24uYXVkaW9TdGFydFRpbWUgJiYgc2Vzc2lvbi5hdWRpb0VuZFRpbWUpIHtcbiAgICAvLyB3YWl0VGltZSBpcyBlbGFwc2VkIHRpbWUgdGhlIHVzZXIgd2FpdGVkIGZvciBhdXRvLXBsYXllZCBhdWRpbyB0byBmaW5pc2hcbiAgICBzZXNzaW9uLndhaXRUaW1lID0gc2Vzc2lvbi5hdWRpb0VuZFRpbWUgLSBzZXNzaW9uLmF1ZGlvU3RhcnRUaW1lO1xuICB9XG59XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBTyxTQUFTQSxrQkFBa0JBLENBQUNDLE9BQU8sRUFBRUMsS0FBSyxFQUFFQyxJQUFJLEVBQUU7RUFDdkQsTUFBTTtJQUFFQyxFQUFFO0lBQUVDO0VBQVMsQ0FBQyxHQUFHRixJQUFJO0VBQzdCLE1BQU07SUFBRUc7RUFBZ0IsQ0FBQyxHQUFHSixLQUFLLElBQUksQ0FBQyxDQUFDO0VBQ3ZDRCxPQUFPLENBQUNNLE9BQU8sR0FBR04sT0FBTyxDQUFDTSxPQUFPLElBQUksRUFBRTtFQUV2QyxJQUFJLENBQUNGLFFBQVEsRUFBRTtJQUNiSixPQUFPLENBQUNNLE9BQU8sR0FBR04sT0FBTyxDQUFDTSxPQUFPLENBQUNDLE1BQU0sQ0FBRUMsTUFBTSxJQUFLQSxNQUFNLENBQUNMLEVBQUUsS0FBS0EsRUFBRSxDQUFDO0VBQ3hFLENBQUMsTUFBTTtJQUNMLE1BQU1NLElBQUksR0FBRztNQUFFTjtJQUFHLENBQUM7SUFDbkIsSUFBSUUsZUFBZSxFQUFFO01BQ25CTCxPQUFPLENBQUNNLE9BQU8sQ0FBQ0ksSUFBSSxDQUFDRCxJQUFJLENBQUM7SUFDNUIsQ0FBQyxNQUFNO01BQ0xULE9BQU8sQ0FBQ00sT0FBTyxHQUFHLENBQUNHLElBQUksQ0FBQztJQUMxQjs7SUFFQTtJQUNBVCxPQUFPLENBQUNXLFFBQVEsR0FBR1QsSUFBSSxDQUFDUyxRQUFRO0VBQ2xDO0FBQ0Y7QUFFTyxTQUFTQyxxQkFBcUJBLENBQUNaLE9BQU8sRUFBRWEsUUFBUSxFQUFFO0VBQ3ZEYixPQUFPLENBQUNjLGNBQWMsR0FBR2QsT0FBTyxDQUFDYyxjQUFjLElBQUlELFFBQVEsQ0FBQ0MsY0FBYyxDQUFDLENBQUM7RUFDNUVkLE9BQU8sQ0FBQ2UsWUFBWSxHQUFHZixPQUFPLENBQUNlLFlBQVksSUFBSUYsUUFBUSxDQUFDRSxZQUFZLENBQUMsQ0FBQzs7RUFFdEUsSUFBSSxDQUFDZixPQUFPLENBQUNnQixRQUFRLElBQUloQixPQUFPLENBQUNjLGNBQWMsSUFBSWQsT0FBTyxDQUFDZSxZQUFZLEVBQUU7SUFDdkU7SUFDQWYsT0FBTyxDQUFDZ0IsUUFBUSxHQUFHaEIsT0FBTyxDQUFDZSxZQUFZLEdBQUdmLE9BQU8sQ0FBQ2MsY0FBYztFQUNsRTtBQUNGIiwiaWdub3JlTGlzdCI6W119

package/lib/session-updater.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/session-updater.js"],"names":["updateSessionValue","session","model","data","id","selected","multipleCorrect","answers","filter","answer","item","push","selector","updateSessionMetadata","metadata","audioStartTime","audioEndTime","waitTime"],"mappings":";;;;;;;;AAAO,SAASA,kBAAT,CAA4BC,OAA5B,EAAqCC,KAArC,EAA4CC,IAA5C,EAAkD;AACvD,MAAQC,EAAR,GAAyBD,IAAzB,CAAQC,EAAR;AAAA,MAAYC,QAAZ,GAAyBF,IAAzB,CAAYE,QAAZ;;AACA,aAA4BH,KAAK,IAAI,EAArC;AAAA,MAAQI,eAAR,QAAQA,eAAR;;AACAL,EAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,IAAmB,EAArC;;AAEA,MAAI,CAACF,QAAL,EAAe;AACbJ,IAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,CAAgBC,MAAhB,CAAuB,UAACC,MAAD;AAAA,aAAYA,MAAM,CAACL,EAAP,KAAcA,EAA1B;AAAA,KAAvB,CAAlB;AACD,GAFD,MAEO;AACL,QAAMM,IAAI,GAAG;AAAEN,MAAAA,EAAE,EAAFA;AAAF,KAAb;;AACA,QAAIE,eAAJ,EAAqB;AACnBL,MAAAA,OAAO,CAACM,OAAR,CAAgBI,IAAhB,CAAqBD,IAArB;AACD,KAFD,MAEO;AACLT,MAAAA,OAAO,CAACM,OAAR,GAAkB,CAACG,IAAD,CAAlB;AACD,KANI,CAQL;;;AACAT,IAAAA,OAAO,CAACW,QAAR,GAAmBT,IAAI,CAACS,QAAxB;AACD;AACF;;AAEM,SAASC,qBAAT,CAA+BZ,OAA/B,EAAwCa,QAAxC,EAAkD;AACvDb,EAAAA,OAAO,CAACc,cAAR,GAAyBd,OAAO,CAACc,cAAR,IAA0BD,QAAQ,CAACC,cAA5D,CADuD,CACqB;;AAC5Ed,EAAAA,OAAO,CAACe,YAAR,GAAuBf,OAAO,CAACe,YAAR,IAAwBF,QAAQ,CAACE,YAAxD,CAFuD,CAEe;;AAEtE,MAAI,CAACf,OAAO,CAACgB,QAAT,IAAqBhB,OAAO,CAACc,cAA7B,IAA+Cd,OAAO,CAACe,YAA3D,EAAyE;AACvE;AACAf,IAAAA,OAAO,CAACgB,QAAR,GAAmBhB,OAAO,CAACe,YAAR,GAAuBf,OAAO,CAACc,cAAlD;AACD;AACF","sourcesContent":["export function updateSessionValue(session, model, data) {\n  const { id, selected } = data;\n  const { multipleCorrect } = model || {};\n  session.answers = session.answers || [];\n\n  if (!selected) {\n    session.answers = session.answers.filter((answer) => answer.id !== id);\n  } else {\n    const item = { id };\n    if (multipleCorrect) {\n      session.answers.push(item);\n    } else {\n      session.answers = [item];\n    }\n\n    //update session metadata\n    session.selector = data.selector;\n  }\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"],"file":"session-updater.js"}
+{"version":3,"file":"session-updater.js","names":["updateSessionValue","session","model","data","id","selected","multipleCorrect","answers","filter","answer","item","push","selector","updateSessionMetadata","metadata","audioStartTime","audioEndTime","waitTime"],"sources":["../src/session-updater.js"],"sourcesContent":["export function updateSessionValue(session, model, data) {\n  const { id, selected } = data;\n  const { multipleCorrect } = model || {};\n  session.answers = session.answers || [];\n\n  if (!selected) {\n    session.answers = session.answers.filter((answer) => answer.id !== id);\n  } else {\n    const item = { id };\n    if (multipleCorrect) {\n      session.answers.push(item);\n    } else {\n      session.answers = [item];\n    }\n\n    //update session metadata\n    session.selector = data.selector;\n  }\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,KAAK,EAAEC,IAAI,EAAE;EACvD,MAAM;IAAEC,EAAE;IAAEC;EAAS,CAAC,GAAGF,IAAI;EAC7B,MAAM;IAAEG;EAAgB,CAAC,GAAGJ,KAAK,IAAI,CAAC,CAAC;EACvCD,OAAO,CAACM,OAAO,GAAGN,OAAO,CAACM,OAAO,IAAI,EAAE;EAEvC,IAAI,CAACF,QAAQ,EAAE;IACbJ,OAAO,CAACM,OAAO,GAAGN,OAAO,CAACM,OAAO,CAACC,MAAM,CAAEC,MAAM,IAAKA,MAAM,CAACL,EAAE,KAAKA,EAAE,CAAC;EACxE,CAAC,MAAM;IACL,MAAMM,IAAI,GAAG;MAAEN;IAAG,CAAC;IACnB,IAAIE,eAAe,EAAE;MACnBL,OAAO,CAACM,OAAO,CAACI,IAAI,CAACD,IAAI,CAAC;IAC5B,CAAC,MAAM;MACLT,OAAO,CAACM,OAAO,GAAG,CAACG,IAAI,CAAC;IAC1B;;IAEA;IACAT,OAAO,CAACW,QAAQ,GAAGT,IAAI,CAACS,QAAQ;EAClC;AACF;AAEO,SAASC,qBAAqBA,CAACZ,OAAO,EAAEa,QAAQ,EAAE;EACvDb,OAAO,CAACc,cAAc,GAAGd,OAAO,CAACc,cAAc,IAAID,QAAQ,CAACC,cAAc,CAAC,CAAC;EAC5Ed,OAAO,CAACe,YAAY,GAAGf,OAAO,CAACe,YAAY,IAAIF,QAAQ,CAACE,YAAY,CAAC,CAAC;;EAEtE,IAAI,CAACf,OAAO,CAACgB,QAAQ,IAAIhB,OAAO,CAACc,cAAc,IAAId,OAAO,CAACe,YAAY,EAAE;IACvE;IACAf,OAAO,CAACgB,QAAQ,GAAGhB,OAAO,CAACe,YAAY,GAAGf,OAAO,CAACc,cAAc;EAClE;AACF","ignoreList":[]}

package/package.json

@@ -1,27 +1,30 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "9.1.0",
+  "version": "9.2.0-mui-update.0",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.3",
+    "@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.21.0",
-    "@pie-lib/math-rendering": "^3.18.0",
-    "@pie-lib/render-ui": "^4.31.0",
-    "@pie-lib/test-utils": "^0.18.0",
-    "konva": "^3.2.5",
+    "@pie-lib/correct-answer-toggle": "2.37.0-mui-update.0",
+    "@pie-lib/math-rendering": "3.38.0-mui-update.0",
+    "@pie-lib/render-ui": "4.47.0-mui-update.0",
+    "@pie-lib/test-utils": "0.34.0-mui-update.0",
+    "konva": "8.3.0",
     "prop-types": "^15.6.1",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1",
-    "react-konva": "^16.9.0-0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-konva": "18.1.0"
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "e6dde692b33cb1d42c6b2958fff7520dc40ca82c",
+  "gitHead": "0e14ff981bcdc8a89a0e58484026496701bfdbc3",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/hotspot/circle.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Circle, Group, Rect } from 'react-konva';
-import { withStyles } from '@material-ui/core/styles';
 import ImageComponent from './image-konva-tooltip';
 import { faCorrect, faWrong } from './icons';
 
@@ -44,7 +43,6 @@ class CircleComponent extends React.Component {
 
   render() {
     const {
-      classes,
       radius,
       hotspotColor,
       isCorrect,
@@ -105,7 +103,6 @@ class CircleComponent extends React.Component {
           />
         )}
         <Circle
-          classes={classes.base}
           radius={radius}
           fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
           onClick={this.handleClick}
@@ -117,6 +114,7 @@ class CircleComponent extends React.Component {
           onMouseEnter={this.handleMouseEnter}
           x={x}
           y={y}
+          opacity={0.5}
         />
         {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
@@ -124,16 +122,7 @@ class CircleComponent extends React.Component {
   }
 }
 
-const styles = () => ({
-  base: {
-    cursor: 'pointer',
-    opacity: 0.5,
-    position: 'relative',
-  },
-});
-
 CircleComponent.propTypes = {
-  classes: PropTypes.object.isRequired,
   radius: PropTypes.number.isRequired,
   hotspotColor: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
@@ -161,4 +150,4 @@ CircleComponent.defaultProps = {
   scale: 1,
 };
 
-export default withStyles(styles)(CircleComponent);
+export default CircleComponent;

package/src/hotspot/container.jsx

@@ -1,13 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Layer, Stage } from 'react-konva';
-import { withStyles } from '@material-ui/core/styles';
-import { color } from '@pie-lib/render-ui';
+import { styled } from '@mui/material/styles';
 
 import Rectangle from './rectangle';
 import Polygon from './polygon';
 import Circle from './circle';
 
+const BaseContainer = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  position: 'relative',
+  background: theme.palette.common.white,
+  border: `${theme.spacing(1)} solid ${theme.palette.common.white}`,
+  width: 'fit-content',
+}));
+
+const ImageContainer = styled('div')({
+  position: 'relative',
+  width: 'fit-content',
+});
+
+const Image = styled('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+const StyledStage = styled(Stage)({
+  left: 0,
+  top: 0,
+  position: 'absolute',
+});
+
 export class Container extends React.Component {
   isSelected(shape) {
     const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];
@@ -34,7 +59,6 @@ export class Container extends React.Component {
 
   render() {
     const {
-      classes,
       dimensions: { width: withProp, height: heightProp },
       disabled,
       hotspotColor,
@@ -54,21 +78,19 @@ export class Container extends React.Component {
     const height = heightProp * SCALE;
 
     return (
-      <div className={classes.base} style={{ padding: strokeWidth / 2 }}>
+      <BaseContainer style={{ padding: strokeWidth / 2 }}>
         {imageUrl ? (
-          <div className={classes.imageContainer}>
-            <img
+          <ImageContainer>
+            <Image
               alt="hotspot-image"
-              className={classes.image}
               height="auto"
               src={imageUrl}
               style={{ width, height, maxWidth: width, maxHeight: height }}
             />
-          </div>
+          </ImageContainer>
         ) : null}
 
-        <Stage
-          className={classes.stage}
+        <StyledStage
           height={height + strokeWidth}
           width={width + strokeWidth}
           x={strokeWidth / 2}
@@ -142,7 +164,6 @@ export class Container extends React.Component {
 
               return (
                 <Circle
-                  classes={classes}
                   scale={SCALE}
                   isEvaluateMode={isEvaluateMode}
                   isCorrect={isCorrect}
@@ -166,49 +187,13 @@ export class Container extends React.Component {
               );
             })}
           </Layer>
-        </Stage>
-      </div>
+        </StyledStage>
+      </BaseContainer>
     );
   }
 }
 
-const styles = (theme) => ({
-  base: {
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-    position: 'relative',
-    background: theme.palette.common.white,
-    border: `${theme.spacing.unit}px solid ${theme.palette.common.white}`,
-    width: 'fit-content',
-  },
-  image: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  imageContainer: {
-    position: 'relative',
-    width: 'fit-content',
-  },
-  stage: {
-    left: 0,
-    top: 0,
-    position: 'absolute',
-  },
-  resize: {
-    borderBottom: `1px solid ${color.disabled()}`,
-    borderRight: `1px solid ${color.disabled()}`,
-    bottom: '-10px',
-    cursor: 'se-resize',
-    height: '10px',
-    position: 'absolute',
-    right: '-10px',
-    width: '10px',
-  },
-});
-
 Container.propTypes = {
-  classes: PropTypes.object.isRequired,
   dimensions: PropTypes.object.isRequired,
   disabled: PropTypes.bool.isRequired,
   hotspotColor: PropTypes.string.isRequired,
@@ -229,4 +214,4 @@ Container.defaultProps = {
   scale: 1,
 };
 
-export default withStyles(styles)(Container);
+export default Container;

package/src/hotspot/index.jsx

@@ -2,10 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
 import { color, Collapsible, hasText, PreviewPrompt, UiLayout, hasMedia } from '@pie-lib/render-ui';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
 import Container from './container';
 
+const StyledUiLayout = styled(UiLayout)({
+  color: color.text(),
+  backgroundColor: color.background(),
+  position: 'relative',
+});
+
+const StyledCollapsible = styled(Collapsible)(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+}));
+
 class HotspotComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -81,7 +91,6 @@ class HotspotComponent extends React.Component {
         customAudioButton,
       },
       onSelectChoice,
-      classes,
     } = this.props;
     const { showCorrect } = this.state;
     const isEvaluateMode = mode === 'evaluate';
@@ -91,19 +100,17 @@ class HotspotComponent extends React.Component {
       teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));
 
     return (
-      <UiLayout
+      <StyledUiLayout
         extraCSSRules={extraCSSRules}
         id={'main-container'}
-        className={classes.main}
         fontSizeFactor={fontSizeFactor}
       >
         {showTeacherInstructions && (
-          <Collapsible
+          <StyledCollapsible
             labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}
-            className={classes.collapsible}
           >
             <PreviewPrompt className="prompt" prompt={teacherInstructions} />
-          </Collapsible>
+          </StyledCollapsible>
         )}
 
         {prompt && (
@@ -149,34 +156,15 @@ class HotspotComponent extends React.Component {
             <PreviewPrompt className="prompt" prompt={rationale} />
           </Collapsible>
         )}
-      </UiLayout>
+      </StyledUiLayout>
     );
   }
 }
 
 HotspotComponent.propTypes = {
-  classes: PropTypes.object,
   model: PropTypes.object.isRequired,
   onSelectChoice: PropTypes.func.isRequired,
   session: PropTypes.object.isRequired,
 };
 
-HotspotComponent.defaultProps = {
-  classes: {},
-};
-
-const styles = (theme) => ({
-  main: {
-    color: color.text(),
-    backgroundColor: color.background(),
-    position: 'relative',
-  },
-  collapsible: {
-    marginBottom: theme.spacing.unit * 2,
-  },
-  prompt: {
-    fontSize: 'inherit',
-  },
-});
-
-export default withStyles(styles)(HotspotComponent);
+export default HotspotComponent;

package/src/hotspot/polygon.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Line, Group, Rect } from 'react-konva';
-import { withStyles } from '@material-ui/core/styles';
 import ImageComponent from './image-konva-tooltip';
 import { faCorrect, faWrong } from './icons';
 
@@ -63,7 +62,6 @@ class PolygonComponent extends React.Component {
 
   render() {
     const {
-      classes,
       hotspotColor,
       isCorrect,
       isEvaluateMode,
@@ -152,7 +150,6 @@ class PolygonComponent extends React.Component {
         <Line
           points={pointsParsed}
           closed={true}
-          classes={classes.base}
           fill={selected && selectedHotspotColor? selectedHotspotColor : hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
@@ -161,6 +158,9 @@ class PolygonComponent extends React.Component {
           strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
           onMouseLeave={this.handleMouseLeave}
           onMouseEnter={this.handleMouseEnter}
+          opacity={0.5}
+          cursor='pointer'
+          position='relative'
         />
         {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
@@ -168,16 +168,7 @@ class PolygonComponent extends React.Component {
   }
 }
 
-const styles = () => ({
-  base: {
-    cursor: 'pointer',
-    opacity: 0.5,
-    position: 'relative',
-  },
-});
-
 PolygonComponent.propTypes = {
-  classes: PropTypes.object.isRequired,
   hotspotColor: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   isCorrect: PropTypes.bool.isRequired,
@@ -202,4 +193,4 @@ PolygonComponent.defaultProps = {
   scale: 1,
 };
 
-export default withStyles(styles)(PolygonComponent);
+export default PolygonComponent;

package/src/hotspot/rectangle.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Rect, Group } from 'react-konva';
-import { withStyles } from '@material-ui/core/styles';
 import ImageComponent from './image-konva-tooltip';
 import { faCorrect, faWrong } from './icons';
 
@@ -44,7 +43,6 @@ class RectComponent extends React.Component {
 
   render() {
     const {
-      classes,
       height,
       hotspotColor,
       hoverOutlineColor,
@@ -121,7 +119,6 @@ class RectComponent extends React.Component {
           />
         )}
         <Rect
-          classes={classes.base}
           width={width}
           height={height}
           fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
@@ -134,6 +131,9 @@ class RectComponent extends React.Component {
           onMouseEnter={this.handleMouseEnter}
           x={x}
           y={y}
+          opacity={0.5}
+          cursor="pointer"
+          position="relative"
         />
         {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
@@ -141,16 +141,7 @@ class RectComponent extends React.Component {
   }
 }
 
-const styles = () => ({
-  base: {
-    cursor: 'pointer',
-    opacity: 0.5,
-    position: 'relative',
-  },
-});
-
 RectComponent.propTypes = {
-  classes: PropTypes.object.isRequired,
   height: PropTypes.number.isRequired,
   hotspotColor: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
@@ -179,4 +170,4 @@ RectComponent.defaultProps = {
   scale: 1,
 };
 
-export default withStyles(styles)(RectComponent);
+export default RectComponent;

package/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { renderMath } from '@pie-lib/math-rendering';
 import { EnableAudioAutoplayImage } from '@pie-lib/render-ui';
 import { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';
@@ -14,6 +14,7 @@ export default class Hotspot extends HTMLElement {
     this._session = null;
     this._audioInitialized = false;
     this.audioComplete = false;
+    this._root = null;
   }
 
   set model(m) {
@@ -191,16 +192,6 @@ export default class Hotspot extends HTMLElement {
     observer.observe(this, { childList: true, subtree: true });
   }
 
-  disconnectedCallback() {
-    document.removeEventListener('click', this._enableAudio);
-
-    if (this._audio) {
-      this._audio.removeEventListener('playing', this._handlePlaying);
-      this._audio.removeEventListener('ended', this._handleEnded);
-      this._audio = null;
-    }
-  }
-
   _render() {
     if (this._model && this._session) {
       const el = React.createElement(HotspotComponent, {
@@ -209,9 +200,27 @@ export default class Hotspot extends HTMLElement {
         onSelectChoice: this.onSelectChoice.bind(this),
       });
 
-      ReactDOM.render(el, this, () => {
+      if (!this._root) {
+        this._root = createRoot(this);
+      }
+      this._root.render(el);
+      queueMicrotask(() => {
         renderMath(this);
       });
     }
   }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this._enableAudio);
+
+    if (this._audio) {
+      this._audio.removeEventListener('playing', this._handlePlaying);
+      this._audio.removeEventListener('ended', this._handleEnded);
+      this._audio = null;
+    }
+
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
 }

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.