@pie-lib/render-ui 4.35.3-next.0 → 4.35.3-next.155

package/src/response-indicators.jsx

@@ -1,31 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as icons from '@pie-lib/icons';
-import Popover from '@material-ui/core/Popover';
-import { withStyles } from '@material-ui/core/styles';
+import Popover from '@mui/material/Popover';
+import { styled } from '@mui/material/styles';
 import Feedback from './feedback';
 import debug from 'debug';
 
 const log = debug('pie-libs:render-ui:response-indicators');
 
-const styles = () => ({
-  responseIndicator: {
-    cursor: 'pointer',
-  },
-  paper: {
-    padding: '0',
-    borderRadius: '4px',
-  },
-  popover: {
-    cursor: 'pointer',
-  },
-  popperClose: {
-    cursor: 'pointer',
-  },
+const ResponseIndicatorContainer = styled('div')(({ hasFeedback }) => ({
+  cursor: hasFeedback ? 'pointer' : 'default',
+}));
+
+const StyledPopover = styled(Popover)({
+  cursor: 'pointer',
+});
+
+const PopoverPaper = styled('div')({
+  padding: '0',
+  borderRadius: '4px',
 });
 
 const BuildIndicator = (Icon, correctness) => {
-  class RawIndicator extends React.Component {
+  class Indicator extends React.Component {
     constructor(props) {
       super(props);
       this.state = {};
@@ -41,20 +38,17 @@ const BuildIndicator = (Icon, correctness) => {
     };
 
     render() {
-      const { feedback, classes } = this.props;
+      const { feedback } = this.props;
       const { anchorEl } = this.state;
       return (
-        <div className={feedback && classes.responseIndicator}>
+        <ResponseIndicatorContainer hasFeedback={!!feedback}>
           <span ref={(r) => (this.icon = r)} onClick={this.handlePopoverOpen}>
             <Icon />
           </span>
 
           {feedback && (
-            <Popover
-              className={classes.popover}
-              classes={{
-                paper: classes.paper,
-              }}
+            <StyledPopover
+              PaperComponent={PopoverPaper}
               open={!!anchorEl}
               anchorEl={anchorEl}
               anchorOrigin={{
@@ -68,19 +62,18 @@ const BuildIndicator = (Icon, correctness) => {
               onClose={this.handlePopoverClose}
             >
               <Feedback feedback={feedback} correctness={correctness} />
-            </Popover>
+            </StyledPopover>
           )}
-        </div>
+        </ResponseIndicatorContainer>
       );
     }
   }
 
-  RawIndicator.propTypes = {
+  Indicator.propTypes = {
     feedback: PropTypes.string,
-    classes: PropTypes.object.isRequired,
   };
 
-  return withStyles(styles)(RawIndicator);
+  return Indicator;
 };
 
 export const Correct = BuildIndicator(icons.Correct, 'correct');

package/src/ui-layout.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles';
+import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import AppendCSSRules from './append-css-rules';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   typography: {
-    useNextVariants: true,
     fontFamily: 'inherit',
   },
   palette: {
@@ -14,27 +13,50 @@ const theme = createMuiTheme({
       disabled: 'rgba(0, 0, 0, 0.54);',
     },
   },
-  overrides: {
+  components: {
     MuiTypography: {
-      root: { fontFamily: 'inherit' },
+      styleOverrides: {
+        root: { fontFamily: 'inherit' },
+      },
     },
+    MuiButton: {
+      styleOverrides: {
+        contained: {
+          backgroundColor: '#e0e0e0',
+          color: '#000000',
+          '&:hover': {
+            backgroundColor: '#bdbdbd',
+          },
+        },
+      },
+    },
+  },
+});
+
+const StyledContainer = styled('div')({
+  // need this because some browsers set their own style on table
+  '& table, th, td': {
+    fontSize: 'inherit' /* Ensure table elements inherit font size */,
   },
 });
 
 class UiLayout extends AppendCSSRules {
   static propTypes = {
-    classes: PropTypes.object,
     className: PropTypes.string,
     children: PropTypes.array,
     extraCSSRules: PropTypes.shape({
       names: PropTypes.arrayOf(PropTypes.string),
       rules: PropTypes.string,
     }),
+    classes: PropTypes.shape({
+      extraCSSRules: PropTypes.string,
+    }),
     fontSizeFactor: PropTypes.number,
   };
 
   static defaultProps = {
     extraCSSRules: {},
+    classes: {},
     fontSizeFactor: 1,
   };
 
@@ -50,36 +72,27 @@ class UiLayout extends AppendCSSRules {
     const bodyFontSize = getFontSize(document.body);
     const effectiveFontSize = Math.max(rootFontSize, bodyFontSize);
 
-    return fontSizeFactor !== 1 ? { fontSize: `${effectiveFontSize * fontSizeFactor}px` } : null;
+    // Handle null, undefined, or invalid values by defaulting to 1
+    const factor = fontSizeFactor != null && typeof fontSizeFactor === 'number' ? fontSizeFactor : 1;
+    return factor !== 1 ? { fontSize: `${effectiveFontSize * factor}px` } : null;
   }
 
   render() {
-    const { children, className, classes, fontSizeFactor, ...rest } = this.props;
+    const { children, className, fontSizeFactor, ...rest } = this.props;
 
-    const finalClass = classNames(className, classes.extraCSSRules, classes.uiLayoutContainer);
     const { extraCSSRules, ...restProps } = rest;
     const style = this.computeStyle(fontSizeFactor);
 
     return (
-      <MuiThemeProvider theme={theme}>
-        <div className={finalClass} {...restProps} {...(style && { style })}>
-          {children}
-        </div>
-      </MuiThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <StyledContainer className={className} {...restProps} {...(style && { style })}>
+            {children}
+          </StyledContainer>
+        </ThemeProvider>
+      </StyledEngineProvider>
     );
   }
 }
 
-const styles = {
-  extraCSSRules: {},
-  // need this because some browsers set their own style on table
-  uiLayoutContainer: {
-    '& table, th, td': {
-      fontSize: 'inherit' /* Ensure table elements inherit font size */,
-    },
-  },
-};
-
-const Styled = withStyles(styles)(UiLayout);
-
-export default Styled;
+export default UiLayout;

package/src/withUndoReset.jsx

@@ -1,41 +1,43 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core/styles';
-import Restore from '@material-ui/icons/Restore';
-import Undo from '@material-ui/icons/Undo';
-
-const styles = (theme) => ({
-  wrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  resetUndoContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  icon: {
-    width: '24px',
-    height: '24px',
-    color: 'gray',
-    marginRight: theme.spacing.unit,
-  },
-  buttonContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    marginLeft: theme.spacing.unit * 3,
-    marginRight: theme.spacing.unit * 3,
-  },
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import Restore from '@mui/icons-material/Restore';
+import Undo from '@mui/icons-material/Undo';
+
+const Wrapper = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const ResetUndoContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
 });
 
+const StyledIcon = styled('div')(({ theme }) => ({
+  width: '24px',
+  height: '24px',
+  color: 'gray',
+  marginRight: theme.spacing(1),
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  marginLeft: theme.spacing(3),
+  marginRight: theme.spacing(3),
+}));
+
 /**
  * HOC that adds undo and reset functionality for session values
  */
 const withUndoReset = (WrappedComponent) => {
   class WithUndoReset extends React.Component {
     static propTypes = {
-      classes: PropTypes.object,
       session: PropTypes.object,
       onSessionChange: PropTypes.func,
     };
@@ -81,36 +83,32 @@ const withUndoReset = (WrappedComponent) => {
     };
 
     render() {
-      const { classes, ...rest } = this.props;
+      const { ...rest } = this.props;
       const { changes, session } = this.state;
 
       return (
-        <div className={classes.wrapper}>
-          <div className={classes.resetUndoContainer}>
-            <Button
-              className={classes.buttonContainer}
-              color="primary"
-              disabled={changes.length === 0}
-              onClick={this.onUndo}
-            >
-              <Undo className={classes.icon} /> Undo
-            </Button>
-            <Button
-              className={classes.buttonContainer}
-              color="primary"
-              disabled={changes.length === 0}
-              onClick={this.onReset}
-            >
-              <Restore className={classes.icon} /> Start Over
-            </Button>
-          </div>
+        <Wrapper>
+          <ResetUndoContainer>
+            <StyledButton color="primary" disabled={changes.length === 0} onClick={this.onUndo}>
+              <StyledIcon>
+                <Undo />
+              </StyledIcon>
+              Undo
+            </StyledButton>
+            <StyledButton color="primary" disabled={changes.length === 0} onClick={this.onReset}>
+              <StyledIcon>
+                <Restore />
+              </StyledIcon>
+              Start Over
+            </StyledButton>
+          </ResetUndoContainer>
           <WrappedComponent {...rest} session={session} onSessionChange={this.onSessionChange} />
-        </div>
+        </Wrapper>
       );
     }
   }
 
-  return withStyles(styles)(WithUndoReset);
+  return WithUndoReset;
 };
 
 export default withUndoReset;

package/src/__tests__/__snapshots__/html-and-math.test.js.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`html-and-math render renders 1`] = `
-<div
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<p>hi</p>",
-    }
-  }
-/>
-`;

package/src/__tests__/__snapshots__/preview-prompt.test.jsx.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Prompt with Custom tag  renders with custom tag "span" correctly renders 1`] = `
-<PreviewPrompt
-  className="prompt"
-  classes={
-    Object {
-      "label": "PreviewPrompt-label-4",
-      "legend": "PreviewPrompt-legend-2",
-      "prompt": "PreviewPrompt-prompt-1",
-      "promptTable": "PreviewPrompt-promptTable-5",
-      "rationale": "PreviewPrompt-rationale-3",
-    }
-  }
-  onClick={[Function]}
-  prompt="Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>"
-  tagName="span"
-/>
-`;
-
-exports[`Prompt without Custom tag  default class with markup renders 1`] = `
-<PreviewPrompt
-  className=""
-  classes={
-    Object {
-      "label": "PreviewPrompt-label-4",
-      "legend": "PreviewPrompt-legend-2",
-      "prompt": "PreviewPrompt-prompt-1",
-      "promptTable": "PreviewPrompt-promptTable-5",
-      "rationale": "PreviewPrompt-rationale-3",
-    }
-  }
-  onClick={[Function]}
-  prompt="Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>"
-  tagName=""
-/>
-`;

package/src/__tests__/__snapshots__/purpose.test.jsx.snap

@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Purpose renders fine renders child unaltered 1`] = `
-<Purpose
-  purpose="passage"
->
-  <div
-    data-pie-purpose="passage"
-    key=".0"
-  >
-    text
-  </div>
-</Purpose>
-`;
-
-exports[`Purpose renders fine renders child unaltered without purpose prop 1`] = `
-<Purpose>
-  <div
-    key=".0"
-  >
-    text
-  </div>
-</Purpose>
-`;
-
-exports[`Purpose renders fine renders children unaltered 1`] = `
-<Purpose
-  purpose="something"
->
-  <div
-    data-pie-purpose="something"
-    key=".0"
-  >
-    <div>
-      text1
-    </div>
-    <div>
-      text2
-    </div>
-  </div>
-</Purpose>
-`;

package/src/__tests__/__snapshots__/readable.test.jsx.snap

@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Readable renders fine renders child unaltered 1`] = `
-<Readable>
-  <div
-    data-pie-readable={true}
-    key=".0"
-  >
-    text
-  </div>
-</Readable>
-`;
-
-exports[`Readable renders fine renders children unaltered 1`] = `
-<Readable>
-  <div
-    data-pie-readable={true}
-    key=".0"
-  >
-    <div>
-      text1
-    </div>
-    <div>
-      text2
-    </div>
-  </div>
-</Readable>
-`;
-
-exports[`Readable renders fine renders even with specific true tag 1`] = `
-<Readable
-  false={true}
->
-  <div
-    data-pie-readable={false}
-    key=".0"
-  >
-    <div>
-      text1
-    </div>
-    <div>
-      text2
-    </div>
-  </div>
-</Readable>
-`;
-
-exports[`Readable renders fine renders with false tag 1`] = `
-<Readable
-  false={true}
->
-  <div
-    data-pie-readable={false}
-    key=".0"
-  >
-    <div>
-      text1
-    </div>
-    <div>
-      text2
-    </div>
-  </div>
-</Readable>
-`;

package/src/__tests__/__snapshots__/response-indicators.test.jsx.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`response-indicators snapshot  - no feedback  1`] = `
-<div>
-  <span
-    onClick={[Function]}
-  >
-    <div>
-      correct
-    </div>
-  </span>
-</div>
-`;
-
-exports[`response-indicators snapshot  - with feedback  1`] = `
-<div
-  className="RawIndicator-responseIndicator-1"
->
-  <span
-    onClick={[Function]}
-  >
-    <div>
-      correct
-    </div>
-  </span>
-</div>
-`;

package/src/collapsible/__tests__/__snapshots__/index.test.jsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`collapsible snapshot renders 1`] = `
-<div>
-  <div
-    onClick={[Function]}
-  >
-    <span>
-      Show
-    </span>
-  </div>
-  <WithStyles(Collapse)
-    in={false}
-    timeout="auto"
-    unmountOnExit={true}
-  />
-</div>
-`;