@pie-lib/render-ui 4.32.6-esmbeta.0 → 4.33.0-mui-update.0

package/src/preview-layout.jsx

@@ -1,13 +1,18 @@
 import React from 'react';
-import { withStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import UiLayout from './ui-layout';
 
+const StyledUiLayout = styled(UiLayout)({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+});
+
 class PreviewLayout extends React.Component {
   static propTypes = {
     ariaLabel: PropTypes.string,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    classes: PropTypes.object,
     role: PropTypes.string,
     extraCSSRules: PropTypes.shape({
       names: PropTypes.arrayOf(PropTypes.string),
@@ -17,79 +22,15 @@ class PreviewLayout extends React.Component {
   };
 
   render() {
-    const { children, classes, ariaLabel, role, extraCSSRules, fontSizeFactor } = this.props;
+    const { children, ariaLabel, role, extraCSSRules, fontSizeFactor } = this.props;
     const accessibility = ariaLabel ? { 'aria-label': ariaLabel, role } : {};
 
     return (
-      <UiLayout
-        className={classes.container}
-        {...accessibility}
-        extraCSSRules={extraCSSRules}
-        fontSizeFactor={fontSizeFactor}
-      >
+      <StyledUiLayout {...accessibility} extraCSSRules={extraCSSRules} fontSizeFactor={fontSizeFactor}>
         {children}
-      </UiLayout>
+      </StyledUiLayout>
     );
   }
 }
 
-const styles = () => ({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative',
-  },
-});
-
-const theme = createMuiTheme({
-  typography: {
-    useNextVariants: true,
-  },
-  palette: {
-    action: {
-      disabled: 'rgba(0, 0, 0, 0.54);',
-    },
-  },
-  overrides: {
-    MuiRadio: {
-      root: {
-        '&$checked': {
-          color: '#3f51b5 !important',
-        },
-      },
-    },
-    MuiCheckbox: {
-      root: {
-        '&$checked': {
-          color: '#3f51b5 !important',
-        },
-      },
-    },
-    MuiTabs: {
-      root: {
-        borderBottom: '1px solid #eee',
-      },
-    },
-    MuiSwitch: {
-      root: {
-        '&$checked': {
-          color: '#3f51b5 !important',
-          '& + $bar': {
-            backgroundColor: '#3f51b5 !important',
-            opacity: 0.5,
-          },
-        },
-      },
-    },
-  },
-});
-
-const Styled = withStyles(styles)(PreviewLayout);
-
-const RootElem = (props) => (
-  <MuiThemeProvider theme={theme}>
-    <Styled {...props} />
-  </MuiThemeProvider>
-);
-
-export default RootElem;
+export default PreviewLayout;

package/src/preview-prompt.jsx

@@ -1,15 +1,68 @@
 import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as color from './color';
 
+const StyledPromptContainer = styled('div')(({ theme, tagName }) => ({
+  // Base promptTable styles
+  '&:not(.MathJax) > table': {
+    borderCollapse: 'collapse',
+  },
+  // Apply vertical striping only when first column is a header column (th)
+  '&:not(.MathJax) > table:has(tr:first-child th:first-child) td': {
+    '&:nth-child(2n)': {
+      backgroundColor: '#f6f8fa',
+      color: theme.palette.common.black,
+    },
+  },
+  // Apply horizontal striping for tables where first element is NOT a header (th)
+  '&:not(.MathJax) > table:not(:has(tr:first-child th:first-child)) tr': {
+    '&:nth-child(2n)': {
+      backgroundColor: '#f6f8fa',
+      color: theme.palette.common.black,
+    },
+  },
+  // align table content to left as per STAR requirement PD-3687
+  '&:not(.MathJax) table td, &:not(.MathJax) table th': {
+    padding: '.6em 1em',
+    textAlign: 'left',
+  },
+  // added this to fix alignment of text in prompt imported from studio (PD-3423)
+  '&:not(.MathJax) > table td > p.kds-indent': {
+    textAlign: 'initial',
+  },
+
+  // Conditional styles based on class names
+  '&.prompt': {
+    verticalAlign: 'middle',
+    color: color.text(),
+  },
+  '&.legend': {
+    width: '100%',
+    fontSize: 'inherit !important',
+  },
+  '&.rationale': {
+    paddingLeft: theme.spacing(4),
+    paddingBottom: theme.spacing(1),
+  },
+  '&.label': {
+    color: `${color.text()} !important`,
+    display: 'flex',
+    flexDirection: 'column',
+    verticalAlign: 'middle',
+    cursor: 'pointer',
+    '& > p': {
+      margin: '0 0 0 0 !important',
+    },
+  },
+}));
+
 //Used these below to replace \\embed{newLine} with \\newline from prompt which will get parsed in MathJax
 const NEWLINE_BLOCK_REGEX = /\\embed\{newLine\}\[\]/g;
 const NEWLINE_LATEX = '\\newline ';
 
 export class PreviewPrompt extends Component {
   static propTypes = {
-    classes: PropTypes.object,
     prompt: PropTypes.string,
     tagName: PropTypes.string,
     className: PropTypes.string,
@@ -186,19 +239,18 @@ export class PreviewPrompt extends Component {
   }
 
   render() {
-    const { prompt, classes, tagName, className, onClick, defaultClassName } = this.props;
-    const CustomTag = tagName || 'div';
-    // legend tag was added once with accessibility tasks, wee need extra style to make it work with images alignment
+    const { prompt, tagName, className, onClick, defaultClassName } = this.props;
+    // legend tag was added once with accessibility tasks, we need extra style to make it work with images alignment
     const legendClass = tagName === 'legend' ? 'legend' : '';
-    const customClasses = `${classes.promptTable} ${classes[className] || ''} ${defaultClassName || ''} ${classes[
-      legendClass
-    ] || ''}`;
+    const customClasses = `${className || ''} ${defaultClassName || ''} ${legendClass}`.trim();
 
     return (
-      <CustomTag
+      <StyledPromptContainer
+        as={tagName || 'div'}
         id={'preview-prompt'}
         onClick={onClick}
         className={customClasses}
+        tagName={tagName}
         dangerouslySetInnerHTML={{
           __html: this.parsedText(prompt || '').replace(NEWLINE_BLOCK_REGEX, NEWLINE_LATEX),
         }}
@@ -207,48 +259,4 @@ export class PreviewPrompt extends Component {
   }
 }
 
-const styles = (theme) => ({
-  prompt: {
-    verticalAlign: 'middle',
-    color: color.text(),
-  },
-  legend: {
-    width: '100%',
-    fontSize: 'inherit  !important',
-  },
-  rationale: {
-    paddingLeft: theme.spacing.unit * 4,
-    paddingBottom: theme.spacing.unit,
-  },
-  label: {
-    color: `${color.text()} !important`, //'var(--choice-input-color, black)',
-    display: 'flex',
-    flexDirection: 'column',
-    verticalAlign: 'middle',
-    cursor: 'pointer',
-    '& > p': {
-      margin: '0 0 0 0 !important',
-    },
-  },
-  promptTable: {
-    '&:not(.MathJax) > table': {
-      borderCollapse: 'collapse',
-    },
-    '&:not(.MathJax) > table tr': {
-      '&:nth-child(2n)': {
-        backgroundColor: '#f6f8fa',
-        color: theme.palette.common.black,
-      },
-    },
-    // align table content to left as per STAR requirement PD-3687
-    '&:not(.MathJax) table td, &:not(.MathJax) table th': {
-      padding: '.6em 1em',
-      textAlign: 'left',
-    },
-    // added this to fix alignment of text in prompt imported from studio (PD-3423)
-    '&:not(.MathJax) > table td > p.kds-indent': {
-      textAlign: 'initial',
-    },
-  },
-});
-export default withStyles(styles)(PreviewPrompt);
+export default PreviewPrompt;

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,75 @@
 import React from 'react';
-import { 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 = createTheme({
+  typography: {
+    fontFamily: 'inherit',
+  },
+  palette: {
+    action: {
+      disabled: 'rgba(0, 0, 0, 0.54);',
+    },
+  },
+  components: {
+    MuiTypography: {
+      styleOverrides: {
+        root: { fontFamily: 'inherit' },
+      },
+    },
+    MuiRadio: {
+      styleOverrides: {
+        root: {
+          '&.Mui-checked': {
+            color: '#3f51b5 !important',
+          },
+        },
+      },
+    },
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          '&.Mui-checked': {
+            color: '#3f51b5 !important',
+          },
+        },
+      },
+    },
+    MuiTabs: {
+      styleOverrides: {
+        root: {
+          borderBottom: '1px solid #eee',
+        },
+      },
+    },
+    MuiSwitch: {
+      styleOverrides: {
+        root: {
+          '&.Mui-checked': {
+            color: '#3f51b5 !important',
+            '& + .MuiSwitch-track': {
+              backgroundColor: '#3f51b5 !important',
+              opacity: 0.5,
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+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({
@@ -37,30 +100,21 @@ class UiLayout extends AppendCSSRules {
   }
 
   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 (
-      <div className={finalClass} {...restProps} {...(style && { style })}>
-        {children}
-      </div>
+      <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;