@pie-element/drawing-response 10.1.0 → 10.2.0-mui-update.0

package/configure/package.json

@@ -1,22 +1,24 @@
 {
   "name": "@pie-element/drawing-response-configure",
   "private": true,
-  "version": "9.1.0",
+  "version": "9.2.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "author": "",
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "^11.25.0",
-    "@pie-lib/editable-html": "^11.17.0",
-    "classnames": "^2.2.6",
+    "@pie-lib/config-ui": "11.41.0-mui-update.0",
+    "@pie-lib/editable-html": "11.33.0-mui-update.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "license": "ISC"
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 jest.mock('@pie-lib/config-ui', () => ({
   choiceUtils: {
@@ -22,8 +22,13 @@ const model = () => ({
   },
 });
 
-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,
+  })),
 }));
 
 describe('index', () => {
@@ -44,7 +49,8 @@ describe('index', () => {
 
   describe('set model', () => {
     it('calls ReactDOM.render', () => {
-      expect(ReactDOM.render).toHaveBeenCalled();
+      expect(createRoot).toHaveBeenCalled();
+      expect(mockRender).toHaveBeenCalled();
     });
   });
 });

package/configure/src/button.jsx

@@ -1,43 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import Button from '@material-ui/core/Button';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 
-const RawButton = ({ classes, className, label, onClick, disabled }) => (
-  <Button
+const StyledButton = styled(Button)({
+  marginLeft: 8,
+});
+
+const CustomButton = ({ label, onClick, disabled }) => (
+  <StyledButton
     onClick={onClick}
     disabled={disabled}
-    className={classNames(classes.addButton, className)}
     size="small"
-    variant="contained"
-    color="default"
-  >
+    variant="contained">
     {label}
-  </Button>
+  </StyledButton>
 );
 
-RawButton.propTypes = {
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
+CustomButton.propTypes = {
   disabled: PropTypes.bool,
   label: PropTypes.string,
   onClick: PropTypes.func,
 };
 
-RawButton.defaultProps = {
+CustomButton.defaultProps = {
   className: '',
   disabled: false,
   label: 'Add',
-  onClick: () => {},
+  onClick: () => { },
 };
 
-const styles = () => ({
-  addButton: {
-    marginLeft: 8,
-  },
-});
-
-const ButtonStyled = withStyles(styles)(RawButton);
-
-export default ButtonStyled;
+export default CustomButton;

package/configure/src/image-container.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
 import Button from './button';
 
@@ -9,6 +9,61 @@ const isImage = (file) => {
   return file.type.match(imageType);
 };
 
+const BaseContainer = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(1),
+}));
+
+const Box = styled('div')(({ active }) => ({
+  border: active ? '1px solid #0032C2' : '1px solid #E0E1E6',
+  borderRadius: '5px',
+}));
+
+const CenteredDiv = styled('div')({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+});
+
+const DrawableHeight = styled('div')({
+  minHeight: 350,
+});
+
+const Image = styled('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+const StyledImageContainer = styled('div')({
+  position: 'relative',
+  width: 'fit-content',
+});
+
+const ResizeHandle = styled('div')({
+  borderBottom: '1px solid #727272',
+  borderRight: '1px solid #727272',
+  bottom: '-10px',
+  cursor: 'se-resize',
+  height: '10px',
+  position: 'absolute',
+  right: '-10px',
+  width: '10px',
+});
+
+const HiddenInput = styled('input')({
+  display: 'none',
+});
+
+const Toolbar = styled('div')({
+  backgroundColor: '#ECEDF1',
+  borderBottom: '1px solid #E0E1E6',
+  borderTopLeftRadius: '5px',
+  borderTopRightRadius: '5px',
+  display: 'flex',
+  padding: '12px 8px',
+});
+
 export class ImageContainer extends Component {
 
   static propTypes = {
@@ -176,14 +231,11 @@ export class ImageContainer extends Component {
   };
 
   renderUploadControl(label) {
-    const { classes } = this.props;
-
     return (
       <div>
         <Button label={label} onClick={this.handleInputClick} />
-        <input
+        <HiddenInput
           accept="image/*"
-          className={classes.input}
           onChange={this.handleUploadImage}
           ref={(ref) => {
             this.input = ref;
@@ -195,13 +247,13 @@ export class ImageContainer extends Component {
   }
 
   render() {
-    const { classes, imageUrl, imageDimensions } = this.props;
+    const { imageUrl, imageDimensions } = this.props;
     const { dropzoneActive, dragEnabled, maxImageHeight, maxImageWidth } = this.state;
 
     return (
-      <div className={classes.base}>
-        <div
-          className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}
+      <BaseContainer>
+        <Box
+          active={dropzoneActive}
           {...(dragEnabled
             ? {
                 onDragExit: this.handleOnDragExit,
@@ -211,18 +263,16 @@ export class ImageContainer extends Component {
               }
             : {})}
         >
-          <div className={classes.toolbar}>{this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}</div>
+          <Toolbar>{this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}</Toolbar>
 
-          <div
+          <DrawableHeight
             ref={(ref) => {
               this.imageSection = ref;
             }}
-            className={classes.drawableHeight}
           >
             {imageUrl ? (
-              <div className={classes.imageContainer}>
-                <img
-                  className={classes.image}
+              <StyledImageContainer>
+                <Image
                   height="auto"
                   onLoad={this.handleOnImageLoad}
                   ref={(ref) => {
@@ -236,85 +286,31 @@ export class ImageContainer extends Component {
                   }}
                   alt=""
                 />
-                <div
+                <ResizeHandle
                   ref={(ref) => {
                     this.resize = ref;
                   }}
-                  className={classes.resize}
                 />
-              </div>
+              </StyledImageContainer>
             ) : (
-              <div className={`${classes.drawableHeight} ${classes.centered}`}>
+              <DrawableHeight as={CenteredDiv}>
                 <label>Drag and drop or upload image from computer</label>
                 <br />
                 {this.renderUploadControl('Upload Image')}
-              </div>
+              </DrawableHeight>
             )}
-          </div>
-        </div>
-      </div>
+          </DrawableHeight>
+        </Box>
+      </BaseContainer>
     );
   }
 }
 
-const styles = (theme) => ({
-  base: {
-    marginTop: theme.spacing.unit,
-  },
-  box: {
-    border: '1px solid #E0E1E6',
-    borderRadius: '5px',
-  },
-  boxActive: {
-    border: '1px solid #0032C2',
-  },
-  centered: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-  },
-  drawableHeight: {
-    minHeight: 350,
-  },
-  image: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  imageContainer: {
-    position: 'relative',
-    width: 'fit-content',
-  },
-  resize: {
-    borderBottom: '1px solid #727272',
-    borderRight: '1px solid #727272',
-    bottom: '-10px',
-    cursor: 'se-resize',
-    height: '10px',
-    position: 'absolute',
-    right: '-10px',
-    width: '10px',
-  },
-  input: {
-    display: 'none',
-  },
-  toolbar: {
-    backgroundColor: '#ECEDF1',
-    borderBottom: '1px solid #E0E1E6',
-    borderTopLeftRadius: '5px',
-    borderTopRightRadius: '5px',
-    display: 'flex',
-    padding: '12px 8px',
-  },
-});
-
 ImageContainer.propTypes = {
-  classes: PropTypes.object.isRequired,
   imageUrl: PropTypes.string.isRequired,
   onImageUpload: PropTypes.func.isRequired,
   onUpdateImageDimension: PropTypes.func.isRequired,
   insertImage: PropTypes.func,
 };
 
-export default withStyles(styles)(ImageContainer);
+export default ImageContainer;

package/configure/src/index.js

@@ -7,7 +7,7 @@ import {
 } from '@pie-framework/pie-configure-events';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import debug from 'debug';
 
 import Root from './root';
@@ -33,6 +33,7 @@ export default class DrawableResponseConfigure extends HTMLElement {
 
   constructor() {
     super();
+    this._root = null;
     this._configuration = sensibleDefaults.configuration;
 
     // if configuration.withRubric.forceEnabled is true, then we
@@ -152,6 +153,15 @@ export default class DrawableResponseConfigure extends HTMLElement {
         delete: this.onDeleteSound.bind(this),
       },
     });
-    ReactDOM.render(element, this);
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(element);
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
   }
 }

package/configure/src/root.jsx

@@ -2,14 +2,27 @@ import React from 'react';
 import { settings, layout, InputContainer } from '@pie-lib/config-ui';
 import PropTypes from 'prop-types';
 import EditableHtml from '@pie-lib/editable-html';
-import Typography from '@material-ui/core/Typography';
-import { withStyles } from '@material-ui/core/styles';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
 
 import ImageContainer from './image-container';
 import cloneDeep from 'lodash/cloneDeep';
 
 const { Panel, toggle, dropdown } = settings;
 
+const PromptHolder = styled(InputContainer)(({ theme }) => ({
+  paddingTop: theme.spacing(1),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(1),
+  width: '100%',
+}));
+
+const ErrorText = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1),
+}));
+
 export class Root extends React.Component {
   onPromptChanged = (prompt) => {
     const { model, onModelChanged } = this.props;
@@ -37,7 +50,7 @@ export class Root extends React.Component {
   };
 
   render() {
-    const { classes, configuration, imageSupport, model, onConfigurationChanged, onModelChanged, uploadSoundSupport } =
+    const { configuration, imageSupport, model, onConfigurationChanged, onModelChanged, uploadSoundSupport } =
       this.props;
     const {
       baseInputConfiguration = {},
@@ -109,7 +122,7 @@ export class Root extends React.Component {
         }
       >
         {teacherInstructionsEnabled && (
-          <InputContainer label={teacherInstructions.label} className={classes.promptHolder}>
+          <PromptHolder label={teacherInstructions.label}>
             <EditableHtml
               markup={model.teacherInstructions || ''}
               onChange={this.onTeacherInstructionsChanged}
@@ -125,12 +138,12 @@ export class Root extends React.Component {
               languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
               mathMlOptions={mathMlOptions}
             />
-            {teacherInstructionsError && <div className={classes.errorText}>{teacherInstructionsError}</div>}
-          </InputContainer>
+            {teacherInstructionsError && <ErrorText>{teacherInstructionsError}</ErrorText>}
+          </PromptHolder>
         )}
 
         {promptEnabled && (
-          <InputContainer label="Item Stem" className={classes.promptHolder}>
+          <PromptHolder label="Item Stem">
             <EditableHtml
               markup={model.prompt}
               onChange={this.onPromptChanged}
@@ -145,13 +158,13 @@ export class Root extends React.Component {
               languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
               mathMlOptions={mathMlOptions}
             />
-            {promptError && <div className={classes.errorText}>{promptError}</div>}
-          </InputContainer>
+            {promptError && <ErrorText>{promptError}</ErrorText>}
+          </PromptHolder>
         )}
 
         {backgroundImageEnabled && (
           <React.Fragment>
-            <Typography variant="subheading">Define Background Image</Typography>
+            <Typography variant="h6">Define Background Image</Typography>
 
             <ImageContainer
               imageUrl={model.imageUrl}
@@ -167,21 +180,7 @@ export class Root extends React.Component {
   }
 }
 
-const styles = (theme) => ({
-  promptHolder: {
-    paddingTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-    width: '100%',
-  },
-  errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-    paddingTop: theme.spacing.unit,
-  },
-});
-
 Root.propTypes = {
-  classes: PropTypes.object.isRequired,
   configuration: PropTypes.object,
   model: PropTypes.object.isRequired,
   imageSupport: PropTypes.shape({
@@ -196,4 +195,4 @@ Root.propTypes = {
   onConfigurationChanged: PropTypes.func.isRequired,
 };
 
-export default withStyles(styles)(Root);
+export default Root;

package/controller/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@4.1.1...@pie-element/drawing-response-controller@4.2.1) (2025-10-16)
+
+**Note:** Version bump only for package @pie-element/drawing-response-controller
+
+
+
+
+
+# [4.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@4.1.1...@pie-element/drawing-response-controller@4.2.0) (2025-10-15)
+
+**Note:** Version bump only for package @pie-element/drawing-response-controller
+
+
+
+
+
+## [4.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@4.0.1...@pie-element/drawing-response-controller@4.1.1) (2025-10-10)
+
+**Note:** Version bump only for package @pie-element/drawing-response-controller
+
+
+
+
+
 # [4.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@4.0.0...@pie-element/drawing-response-controller@4.1.0) (2025-10-07)
 
 **Note:** Version bump only for package @pie-element/drawing-response-controller