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

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

@@ -1,13 +1,39 @@
-import toJson from 'enzyme-to-json';
-import { shallow } from 'enzyme/build';
-import { Collapsible } from '../index';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Collapsible } from '../index';
 
 describe('collapsible', () => {
-  describe('snapshot', () => {
-    it('renders', () => {
-      const wrapper = shallow(<Collapsible classes={{}} />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders collapsible component', () => {
+      const { container } = render(<Collapsible classes={{}} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with default collapsed state', () => {
+      render(<Collapsible classes={{}} labels={{ hidden: 'Show More', visible: 'Show Less' }} />);
+      // Should show "Show More" when collapsed
+      expect(screen.queryByText('Show More')).toBeInTheDocument();
+    });
+
+    it('renders children when expanded', async () => {
+      const user = userEvent.setup();
+      render(
+        <Collapsible classes={{}}>
+          <div>Test Content</div>
+        </Collapsible>,
+      );
+
+      // Initially collapsed, children not visible
+      expect(screen.queryByText('Test Content')).not.toBeInTheDocument();
+
+      // Click to expand
+      const toggleButton = screen.getByText('Show');
+      await user.click(toggleButton);
+
+      // Wait for expansion animation and check children are visible
+      await screen.findByText('Test Content');
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
     });
   });
 });

package/src/collapsible/index.jsx

@@ -1,12 +1,21 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles/index';
-import Collapse from '@material-ui/core/Collapse/index';
+import { styled } from '@mui/material/styles';
+import Collapse from '@mui/material/Collapse';
 import { renderMath } from '@pie-lib/math-rendering';
 import PropTypes from 'prop-types';
 
+const Title = styled('span')(({ theme }) => ({
+  color: theme.palette.primary.light,
+  borderBottom: `1px dotted ${theme.palette.primary.light}`,
+  cursor: 'pointer',
+}));
+
+const StyledCollapse = styled(Collapse)(({ theme }) => ({
+  paddingTop: theme.spacing(2),
+}));
+
 export class Collapsible extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     children: PropTypes.object,
     labels: PropTypes.shape({
@@ -36,29 +45,20 @@ export class Collapsible extends React.Component {
   }
 
   render() {
-    const { classes, labels, children, className } = this.props;
+    const { labels, children, className } = this.props;
     const title = this.state.expanded ? labels.visible || 'Hide' : labels.hidden || 'Show';
 
     return (
       <div className={className} ref={(r) => (this.root = r)}>
         <div onClick={this.toggleExpanded}>
-          <span className={classes.title}>{title}</span>
+          <Title>{title}</Title>
         </div>
-        <Collapse in={this.state.expanded} timeout="auto" unmountOnExit className={classes.collapsible}>
+        <StyledCollapse in={this.state.expanded} timeout={{ enter: 225, exit: 195 }} unmountOnExit>
           {children}
-        </Collapse>
+        </StyledCollapse>
       </div>
     );
   }
 }
 
-export default withStyles((theme) => ({
-  title: {
-    color: theme.palette.primary.light,
-    borderBottom: `1px dotted ${theme.palette.primary.light}`,
-    cursor: 'pointer',
-  },
-  collapsible: {
-    paddingTop: theme.spacing.unit * 2,
-  },
-}))(Collapsible);
+export default Collapsible;

package/src/color.js

@@ -1,8 +1,4 @@
-import green from '@material-ui/core/colors/green';
-import orange from '@material-ui/core/colors/orange';
-import pink from '@material-ui/core/colors/pink';
-import indigo from '@material-ui/core/colors/indigo';
-import red from '@material-ui/core/colors/red';
+import { green, orange, pink, indigo, red } from '@mui/material/colors';
 
 export const defaults = {
   TEXT: 'black',

package/src/feedback.jsx

@@ -1,98 +1,94 @@
-/**
- * Lifted from multiple-choice - TODO: create a shared package for it.
- */
-import { withStyles } from '@material-ui/core/styles';
-
 import React from 'react';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import * as color from './color';
 
-const styleSheet = {
-  corespringFeedback: {
-    transformOrigin: '0% 0px 0px',
-    width: '100%',
-    display: 'block',
-    overflow: 'hidden',
-    '&:.incorrect': {
-      color: '#946202',
-    },
-  },
-  content: {
-    '-webkit-font-smoothing': 'antialiased',
-    backgroundColor: `var(--feedback-bg-color, ${color.disabled()})`,
-    borderRadius: '4px',
-    lineHeight: '25px',
-    margin: '0px',
-    padding: '10px',
-    verticalAlign: 'middle',
-    color: 'var(--feedback-color, white)',
+const FeedbackContainer = styled('div')({
+  transformOrigin: '0% 0px 0px',
+  width: '100%',
+  display: 'block',
+  overflow: 'hidden',
+  '&.incorrect': {
+    color: '#946202',
   },
-  correct: {
+});
+
+const FeedbackContent = styled('div')({
+  WebkitFontSmoothing: 'antialiased',
+  backgroundColor: `var(--feedback-bg-color, ${color.disabled()})`,
+  borderRadius: '4px',
+  lineHeight: '25px',
+  margin: '0px',
+  padding: '10px',
+  verticalAlign: 'middle',
+  color: 'var(--feedback-color, white)',
+  '&.correct': {
     backgroundColor: `var(--feedback-correct-bg-color, ${color.correct()})`,
   },
-  incorrect: {
+  '&.incorrect': {
     backgroundColor: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,
   },
-  feedbackEnter: {
+});
+
+const TransitionWrapper = styled('div')({
+  '&.feedback-enter': {
     height: '1px',
   },
-  feedbackEnterActive: {
+  '&.feedback-enter-active': {
     height: '45px',
     transition: 'height 500ms',
   },
-  feedbackLeave: {
+  '&.feedback-exit': {
     height: '45px',
   },
-  feedbackLeaveActive: {
+  '&.feedback-exit-active': {
     height: '1px',
     transition: 'height 200ms',
   },
-};
+});
 
 export class Feedback extends React.Component {
   static propTypes = {
     correctness: PropTypes.string,
     feedback: PropTypes.string,
-    classes: PropTypes.object.isRequired,
   };
 
-  render() {
-    const { correctness, feedback, classes } = this.props;
+  nodeRef = React.createRef();
 
-    function chooseFeedback(correctness) {
-      if (correctness && feedback) {
-        return (
-          <CSSTransition
-            classNames={{
-              enter: classes.feedbackEnter,
-              enterActive: classes.feedbackEnterActive,
-              leave: classes.feedbackLeave,
-              leaveActive: classes.feedbackLeaveActive,
-            }}
-            key="hasFeedback"
-            timeout={{ enter: 500, exit: 300 }}
-          >
-            <div className={classes.corespringFeedback}>
-              <div
-                className={classNames(classes.content, classes[correctness])}
-                dangerouslySetInnerHTML={{ __html: feedback }}
-              />
-            </div>
-          </CSSTransition>
-        );
-      } else {
-        return null;
-      }
-    }
+  renderFeedback() {
+    const { correctness, feedback } = this.props;
 
+    if (!correctness || !feedback) return null;
+
+    return (
+      <CSSTransition
+        key="hasFeedback"
+        nodeRef={this.nodeRef}
+        timeout={{ enter: 500, exit: 200 }}
+        classNames="feedback"
+      >
+        <TransitionWrapper ref={this.nodeRef}>
+          <FeedbackContainer>
+            <FeedbackContent
+              className={correctness}
+              dangerouslySetInnerHTML={{ __html: feedback }}
+            />
+          </FeedbackContainer>
+        </TransitionWrapper>
+      </CSSTransition>
+    );
+  }
+
+  render() {
     return (
       <div>
-        <TransitionGroup>{chooseFeedback(correctness)}</TransitionGroup>
+        <TransitionGroup>
+          {this.renderFeedback()}
+        </TransitionGroup>
       </div>
     );
   }
 }
 
-export default withStyles(styleSheet, { name: 'Feedback' })(Feedback);
+export default Feedback;

package/src/input-container.jsx

@@ -1,41 +1,50 @@
-import InputLabel from '@material-ui/core/InputLabel';
+import InputLabel from '@mui/material/InputLabel';
 import PropTypes from 'prop-types';
 import React from 'react';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import FormControl from '@material-ui/core/FormControl';
+import { styled } from '@mui/material/styles';
+import FormControl from '@mui/material/FormControl';
 
-const RawInputContainer = (props) => {
-  const { label, className, children, classes } = props;
-  const names = classNames(classes.formControl, className);
+const StyledFormControl = styled(FormControl)(({ theme }) => ({
+  margin: 0,
+  padding: 0,
+  flex: '1 0 auto',
+  minWidth: theme.spacing(4),
+}));
 
-  return (
-    <FormControl className={names}>
-      <InputLabel className={classes.label} shrink={true}>
-        {label}
-      </InputLabel>
-      {children}
-    </FormControl>
-  );
-};
+const StyledInputLabel = styled(InputLabel)(() => ({
+ fontSize: 'inherit',
+  whiteSpace: 'nowrap',
+  margin: 0,
+  padding: 0,
+  alignSelf: 'flex-start',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  transformOrigin: 'top left',
+  pointerEvents: 'none',
+  // override MUI's default transform styles
+  '&.MuiInputLabel-shrink': {
+    transform: 'scale(0.75) translate(0, -0.75em)',
+  },
+  '&:not(.MuiInputLabel-shrink)': {
+    transform: 'translate(0, 0)',
+  },
+}));
 
-RawInputContainer.propTypes = {
+const InputContainer = ({ label, className, children }) => (
+  <StyledFormControl className={className}>
+    <StyledInputLabel shrink>{label}</StyledInputLabel>
+    {children}
+  </StyledFormControl>
+);
+
+InputContainer.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  classes: PropTypes.object.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
 };
 
-export default withStyles((theme) => ({
-  formControl: {
-    marginLeft: 0,
-    marginRight: 0,
-    paddingBottom: theme.spacing.unit,
-    flex: '1 0 auto',
-    minWidth: theme.spacing.unit * 4,
-  },
-  label: {
-    fontSize: 'inherit',
-    whiteSpace: 'nowrap',
-  },
-}))(RawInputContainer);
+export default InputContainer;

package/src/preview-layout.jsx

@@ -1,13 +1,18 @@
 import React from 'react';
-import { withStyles } 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,32 +22,15 @@ class PreviewLayout extends React.Component {
   };
 
   render() {
-    const { children, classes, ariaLabel, role, extraCSSRules, fontSizeFactor } = this.props;
+    const { children, ariaLabel, role, extraCSSRules, fontSizeFactor, classes } = 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} classes={classes}>
         {children}
-      </UiLayout>
+      </StyledUiLayout>
     );
   }
 }
 
-const styles = () => ({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative',
-  },
-});
-
-const Styled = withStyles(styles)(PreviewLayout);
-
-const RootElem = (props) => <Styled {...props} />;
-
-export default RootElem;
+export default PreviewLayout;

package/src/preview-prompt.jsx

@@ -1,7 +1,58 @@
 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';
+import { renderMath } from '@pie-lib/math-rendering';
+
+const StyledPromptContainer = styled('div')(({ theme, tagName }) => ({
+  // Base promptTable styles
+  '&:not(.MathJax) > table': {
+    borderCollapse: 'collapse',
+  },
+  // Apply vertical striping when first column is a header (th) and NOT mixed with td
+  '&:not(.MathJax) > table:has(tbody tr > th:first-child):not(:has(tbody tr > td:first-child)) tbody td:nth-child(even)': {
+    backgroundColor: '#f6f8fa',
+    color: theme.palette.common.black,
+  },
+  // Apply horizontal striping for tables where first element is a data cell (td)
+  '&:not(.MathJax) > table:has(tbody tr > td:first-child) tbody tr:nth-child(even) td': {
+    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;
@@ -9,7 +60,6 @@ const NEWLINE_LATEX = '\\newline ';
 
 export class PreviewPrompt extends Component {
   static propTypes = {
-    classes: PropTypes.object,
     prompt: PropTypes.string,
     tagName: PropTypes.string,
     className: PropTypes.string,
@@ -141,16 +191,32 @@ export class PreviewPrompt extends Component {
   componentDidMount() {
     this.alignImages();
     this.addCustomAudioButtonControls();
+    this.setupMathRendering();
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     this.alignImages();
+
+    if (prevProps.prompt !== this.props.prompt) {
+      this.renderMathContent();
+    }
   }
 
   componentWillUnmount() {
     this.removeCustomAudioButtonListeners();
   }
 
+  setupMathRendering() {
+    this.renderMathContent();
+  }
+
+  renderMathContent() {
+    const container = document.getElementById('preview-prompt');
+    if (container && typeof renderMath === 'function') {
+      renderMath(container);
+    }
+  }
+
   alignImages() {
     const previewPrompts = document.querySelectorAll('#preview-prompt');
 
@@ -186,19 +252,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,51 +272,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:has(tbody tr > th:first-child):not(:has(tbody tr > td:first-child)) tbody td:nth-child(even)': {
-      backgroundColor: '#f6f8fa',
-      color: theme.palette.common.black,
-    },
-
-    '&:not(.MathJax) > table:has(tbody tr > td:first-child) tbody tr:nth-child(even) td': {
-      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;