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

package/configure/src/root.jsx

@@ -2,16 +2,56 @@ import React from 'react';
 import { settings, layout, InputContainer, NumberTextField } from '@pie-lib/config-ui';
 import PropTypes from 'prop-types';
 import EditableHtml from '@pie-lib/editable-html';
-import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Info from '@material-ui/icons/Info';
-import Tooltip from '@material-ui/core/Tooltip';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Info from '@mui/icons-material/Info';
+import Tooltip from '@mui/material/Tooltip';
 import HotspotPalette from './hotspot-palette';
 import HotspotContainer from './hotspot-container';
 import { updateImageDimensions, generateValidationMessage, getUpdatedShapes, getAllShapes, groupShapes } from './utils';
 
 const { Panel, toggle, dropdown } = settings;
 
+const DimensionsContainer = styled('div')(({ theme }) => ({
+  display: 'flex',
+  marginBottom: theme.spacing(1.5),
+}));
+
+const FieldContainer = styled('div')({
+  flex: 1,
+  width: '90%',
+});
+
+const PromptContainer = styled(InputContainer)(({ theme }) => ({
+  paddingTop: theme.spacing(1),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  width: '100%',
+}));
+
+const SubHeading = styled(Typography)(({ theme }) => ({
+  marginRight: theme.spacing(1),
+}));
+
+const FlexContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const StyledTooltip = styled(Tooltip)(({ theme }) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px',
+  },
+}));
+
+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 {
   handleColorChange = (fieldType, color) => {
     const { onColorChanged } = this.props;
@@ -49,7 +89,6 @@ export class Root extends React.Component {
 
   render() {
     const {
-      classes,
       configuration,
       model,
       imageSupport,
@@ -144,7 +183,7 @@ export class Root extends React.Component {
         }
       >
         {teacherInstructionsEnabled && (
-          <InputContainer label={teacherInstructions.label} className={classes.promptContainer}>
+          <PromptContainer label={teacherInstructions.label}>
             <EditableHtml
               markup={model.teacherInstructions || ''}
               onChange={onTeacherInstructionsChanged}
@@ -160,12 +199,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>}
+          </PromptContainer>
         )}
 
         {promptEnabled && (
-          <InputContainer label={prompt.label} className={classes.promptContainer}>
+          <PromptContainer label={prompt.label}>
             <EditableHtml
               markup={model.prompt || ''}
               onChange={onPromptChanged}
@@ -181,24 +220,23 @@ 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>}
+          </PromptContainer>
         )}
 
-        <div className={classes.flexContainer}>
-          <Typography className={classes.subheading} variant="subheading">
+        <FlexContainer>
+          <SubHeading variant="h6">
             Define Hotspot
-          </Typography>
-          <Tooltip
-            classes={{ tooltip: classes.tooltip }}
+          </SubHeading>
+          <StyledTooltip
             disableFocusListener
             disableTouchListener
             placement={'left'}
             title={validationMessage}
           >
             <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }} />
-          </Tooltip>
-        </div>
+          </StyledTooltip>
+        </FlexContainer>
 
         <HotspotPalette
           hotspotColor={model.hotspotColor}
@@ -226,39 +264,41 @@ export class Root extends React.Component {
           preserveAspectRatioEnabled={preserveAspectRatio.enabled}
           insertImage={imageSupport && imageSupport.add}
         />
-        {shapesError && <div className={classes.errorText}>{shapesError}</div>}
-        {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}
+        {shapesError && <ErrorText>{shapesError}</ErrorText>}
+        {selectionsError && <ErrorText>{selectionsError}</ErrorText>}
 
         {model.imageUrl && (
           <React.Fragment>
-            <Typography variant="subheading">Image Dimensions</Typography>
+            <Typography variant="h6">Image Dimensions</Typography>
 
-            <div className={classes.dimensions}>
-              <NumberTextField
-                key="hotspot-manual-width"
-                label="Width"
-                value={model.dimensions.width}
-                min={0}
-                onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'width')}
-                showErrorWhenOutsideRange
-                className={classes.field}
-              />
+            <DimensionsContainer>
+              <FieldContainer>
+                <NumberTextField
+                  key="hotspot-manual-width"
+                  label="Width"
+                  value={model.dimensions.width}
+                  min={0}
+                  onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'width')}
+                  showErrorWhenOutsideRange
+                />
+              </FieldContainer>
 
-              <NumberTextField
-                key="hotspot-manual-height"
-                label="Height"
-                value={model.dimensions.height}
-                min={0}
-                onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'height')}
-                showErrorWhenOutsideRange
-                className={classes.field}
-              />
-            </div>
+              <FieldContainer>
+                <NumberTextField
+                  key="hotspot-manual-height"
+                  label="Height"
+                  value={model.dimensions.height}
+                  min={0}
+                  onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'height')}
+                  showErrorWhenOutsideRange
+                />
+              </FieldContainer>
+            </DimensionsContainer>
           </React.Fragment>
         )}
 
         {rationaleEnabled && (
-          <InputContainer label={rationale.label} className={classes.promptContainer}>
+          <PromptContainer label={rationale.label}>
             <EditableHtml
               markup={model.rationale || ''}
               onChange={onRationaleChanged}
@@ -273,49 +313,15 @@ export class Root extends React.Component {
               languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
               mathMlOptions={mathMlOptions}
             />
-            {rationaleError && <div className={classes.errorText}>{rationaleError}</div>}
-          </InputContainer>
+            {rationaleError && <ErrorText>{rationaleError}</ErrorText>}
+          </PromptContainer>
         )}
       </layout.ConfigLayout>
     );
   }
 }
 
-const styles = (theme) => ({
-  dimensions: {
-    display: 'flex',
-    marginBottom: theme.spacing.unit * 1.5,
-  },
-  field: {
-    flex: 1,
-    width: '90%',
-  },
-  promptContainer: {
-    paddingTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-    width: '100%',
-  },
-  subheading: {
-    marginRight: theme.spacing.unit,
-  },
-  flexContainer: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  tooltip: {
-    fontSize: theme.typography.fontSize - 2,
-    whiteSpace: 'pre',
-    maxWidth: '500px',
-  },
-  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({
@@ -337,4 +343,4 @@ Root.propTypes = {
   onTeacherInstructionsChanged: PropTypes.func.isRequired,
 };
 
-export default withStyles(styles)(Root);
+export default Root;

package/configure/src/upload-control.jsx

@@ -1,34 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles/index';
 
 import Button from './button';
 
-const UploadControl = ({ classNameButton, classNameSection, classes, label, onInputClick, onUploadImage, setRef }) => (
-  <div className={classNameSection}>
-    <Button className={classNameButton} label={label} onClick={onInputClick} />
+const UploadControl = ({ label, onInputClick, onUploadImage, setRef }) => (
+  <>
+    <Button label={label} onClick={onInputClick} />
     <input
       accept="image/*"
-      className={classes.input}
+      style={{ display: 'none' }}
       onChange={onUploadImage}
       ref={(ref) => {
         setRef(ref);
       }}
       type="file"
     />
-  </div>
+  </>
 );
 
-const styles = () => ({
-  input: {
-    display: 'none',
-  },
-});
-
 UploadControl.propTypes = {
-  classes: PropTypes.object.isRequired,
-  classNameButton: PropTypes.string,
-  classNameSection: PropTypes.string,
   label: PropTypes.string.isRequired,
   onInputClick: PropTypes.func.isRequired,
   onUploadImage: PropTypes.func.isRequired,
@@ -40,4 +30,4 @@ UploadControl.defaultProps = {
   classNameSection: '',
 };
 
-export default withStyles(styles)(UploadControl);
+export default UploadControl;

package/controller/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@6.3.2...@pie-element/hotspot-controller@6.3.3) (2025-11-27)
+
+
+### Bug Fixes
+
+* bump libs PD-5274, PD-5211, PD-5248 ([7610b25](https://github.com/pie-framework/pie-elements/commit/7610b25423956b6492f33322513b3430051fca77))
+
+
+
+
+
+## [6.3.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@6.3.1...@pie-element/hotspot-controller@6.3.2) (2025-10-22)
+
+
+### Bug Fixes
+
+* bump libs PD-5265 ([184a978](https://github.com/pie-framework/pie-elements/commit/184a978f57a2a84dc6ba87c1eba0b92d5cdd9eae))
+
+
+
+
+
+## [6.3.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@6.2.0...@pie-element/hotspot-controller@6.3.1) (2025-10-16)
+
+
+### Bug Fixes
+
+* bump pie-lib versions and pslb module versions ([393d39f](https://github.com/pie-framework/pie-elements/commit/393d39fb850ad055568f4d20464213e9043f208f))
+
+
+
+
+
+# [6.3.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@6.2.0...@pie-element/hotspot-controller@6.3.0) (2025-10-15)
+
+**Note:** Version bump only for package @pie-element/hotspot-controller
+
+
+
+
+
+# [6.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@6.0.1...@pie-element/hotspot-controller@6.2.0) (2025-10-10)
+
+
+### Features
+
+* update libs PD-5208, PD-5211, PD-5199, PD-5218, PD-5217 ([da327fa](https://github.com/pie-framework/pie-elements/commit/da327fa501f6e9eff1c0b30b5ef092426a91f78b))
+
+
+
+
+
 # [6.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@6.0.0...@pie-element/hotspot-controller@6.1.0) (2025-10-07)
 
 **Note:** Version bump only for package @pie-element/hotspot-controller