@pie-lib/mask-markup 1.13.47-next.1 → 1.14.0-beta.2

package/src/components/dropdown.jsx

@@ -1,10 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Select from '@material-ui/core/Select';
+import Button from '@material-ui/core/Button';
+import InputLabel from '@material-ui/core/InputLabel';
+import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
-import CorrectInput from './correct-input';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import Close from '@material-ui/icons/Close';
+import Check from '@material-ui/icons/Check';
 import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+
 import { color } from '@pie-lib/render-ui';
+import { renderMath } from '@pie-lib/math-rendering';
 
 class Dropdown extends React.Component {
   static propTypes = {
@@ -22,73 +29,148 @@ class Dropdown extends React.Component {
     super(props);
 
     this.state = {
-      showCheckmark: false,
-      open: false,
+      anchorEl: null,
+      highlightedOptionId: null,
     };
+
+    this.elementRefs = [];
   }
 
-  showCheckmarkAndOpen = () => {
-    this.setState({
-      showCheckmark: true,
-      open: true,
+  componentDidUpdate() {
+    this.elementRefs.forEach((ref) => {
+      if (ref) {
+        renderMath(ref);
+      }
     });
+  }
+
+  handleClick = (event) => this.setState({ anchorEl: event.currentTarget });
+
+  handleClose = () => this.setState({ anchorEl: null });
+
+  handleHighlight = (index) => {
+    const highlightedOptionId = `dropdown-option-${this.props.id}-${index}`;
+
+    this.setState({ highlightedOptionId });
   };
 
-  hideCheckmarkAndClose = () => {
-    this.setState({
-      showCheckmark: false,
-      open: false,
-    });
+  handleSelect = (value, index) => {
+    this.props.onChange(this.props.id, value);
+    this.handleHighlight(index);
+    this.handleClose();
   };
 
+  getLabel(choices, value) {
+    const found = (choices || []).find((choice) => choice.value === value);
+
+    return found ? found.label.trim() : undefined;
+  }
+
   render() {
-    const { classes, id, correct, disabled, value, onChange, choices, showCorrectAnswer } = this.props;
+    const { classes, id, correct, disabled, value, choices, showCorrectAnswer, singleQuery, correctValue } = this.props;
+
+    const { anchorEl } = this.state;
+    const open = Boolean(anchorEl);
+    const buttonId = `dropdown-button-${id}`;
+    const menuId = `dropdown-menu-${id}`;
+    const valueDisplayId = `dropdown-value-${id}`;
+
+    // Determine the class for disabled state, view mode and evaluate mode
+    let disabledClass;
+    // Reset elementRefs before each render to avoid stale references
+    this.elementRefs = [];
+
+    if (disabled && correct !== undefined) {
+      disabledClass = correct || showCorrectAnswer ? classes.disabledCorrect : classes.disabledIncorrect;
+    }
+
+    // Create distinct, visually hidden labels for each dropdown
+    const incrementedId = parseInt(id, 10) + 1;
+    const labelId = singleQuery ? 'Query-label' : `Query-label-${incrementedId}`;
+    const labelText = singleQuery ? 'Query' : `Query ${incrementedId}`;
+
+    // Changed from Select to Button for dropdown to enhance accessibility. This modification offers explicit control over aria attributes and focuses management, ensuring the dropdown is compliant with accessibility standards. The use of Button and Menu components allows for better handling of keyboard interactions and provides accessible labels and menus, aligning with WCAG guidelines and improving usability for assistive technology users.
 
-    const { showCheckmark, open } = this.state;
+    let correctnessIcon = null;
+    if (disabled && correct !== undefined) {
+      correctnessIcon =
+        correct || showCorrectAnswer ? (
+          <Check className={classNames(classes.correctnessIndicatorIcon, classes.correctIcon)} />
+        ) : (
+          <Close className={classNames(classes.correctnessIndicatorIcon, classes.incorrectIcon)} />
+        );
+    }
 
     return (
-      <Select
-        classes={{
-          root: classes.root,
-          icon: classes.icon,
-          selectMenu: classes.selectMenu,
-          select: classes.select,
-        }}
-        disabled={disabled}
-        value={value || ''}
-        onOpen={this.showCheckmarkAndOpen}
-        onClose={this.hideCheckmarkAndClose}
-        open={open}
-        input={<CorrectInput correct={showCorrectAnswer || correct} />}
-        MenuProps={{
-          keepMounted: true,
-          disablePortal: true,
-        }}
-        onChange={(e) => {
-          onChange(id, e.target.value);
-        }}
-      >
-        {(choices || []).map((c, index) => (
-          <MenuItem
-            classes={{ root: classes.menuRoot, selected: classes.selected }}
-            key={`${c.label}-${index}`}
-            value={c.value}
-          >
-            <span
-              className={classes.label}
-              dangerouslySetInnerHTML={{
-                __html: c.label,
-              }}
-            />
-            {showCheckmark && (
-              <span
-                className={classes.label}
-                dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}
-              />
-            )}
-          </MenuItem>
-        ))}
-      </Select>
+      <>
+        <InputLabel className={classes.srOnly} id={labelId}>
+          {labelText}
+        </InputLabel>
+        <Button
+          aria-controls={open ? menuId : undefined}
+          aria-haspopup="listbox"
+          aria-expanded={open ? 'true' : undefined}
+          aria-activedescendant={this.state.highlightedOptionId}
+          onClick={this.handleClick}
+          classes={{
+            root: classes.root,
+            disabled: disabledClass,
+          }}
+          disabled={disabled}
+          id={buttonId}
+          role="combobox"
+          aria-label="Select answer"
+          aria-labelledby={valueDisplayId}
+        >
+          {correctnessIcon}
+          <span
+            id={valueDisplayId}
+            className={classes.label}
+            dangerouslySetInnerHTML={{
+              __html: correctValue ? correctValue : this.getLabel(choices, value) ? this.getLabel(choices, value) : '',
+            }}
+          />
+          <ArrowDropDownIcon />
+        </Button>
+        <Menu
+          id={menuId}
+          anchorEl={anchorEl}
+          className={classes.selectMenu}
+          keepMounted
+          open={open}
+          onClose={this.handleClose}
+          MenuListProps={{
+            'aria-labelledby': buttonId,
+            role: 'listbox',
+          }}
+        >
+          {(choices || []).map((c, index) => {
+            const optionId = `dropdown-option-${id}-${index}`;
+
+            return (
+              <MenuItem
+                id={optionId}
+                classes={{ root: classes.menuRoot, selected: classes.selected }}
+                key={`${c.label}-${index}`}
+                value={c.value}
+                onClick={() => this.handleSelect(c.value, index)}
+                role="option"
+                aria-selected={this.state.highlightedOptionId === optionId ? 'true' : undefined}
+              >
+                <span
+                  ref={(ref) => (this.elementRefs[index] = ref)}
+                  className={classes.label}
+                  dangerouslySetInnerHTML={{ __html: c.label }}
+                />
+                <span
+                  className={classes.label}
+                  dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}
+                />
+              </MenuItem>
+            );
+          })}
+        </Menu>
+      </>
     );
   }
 }
@@ -96,34 +178,49 @@ class Dropdown extends React.Component {
 const styles = () => ({
   root: {
     color: color.text(),
+    border: `1px solid ${color.text()}`,
+    borderRadius: '4px',
+    justifyContent: 'space-between',
     backgroundColor: color.background(),
-    borderColor: color.secondaryLight(),
-    '& ul': {
-      paddingTop: 0,
-      paddingBottom: 0,
-      border: `1px solid ${color.text()}`,
-      borderRadius: '5px',
+    position: 'relative',
+    height: '45px',
+    width: 'fit-content',
+    margin: '2px',
+    textTransform: 'none',
+    '& span': {
+      paddingRight: '5px',
+    },
+    '& svg': {
+      position: 'absolute',
+      right: 0,
+      top: 'calc(50% - 12px)',
+      pointerEvents: 'none',
       color: color.text(),
-      backgroundColor: color.background(),
+      marginLeft: '5px',
     },
   },
-  select: {
-    '&:focus': {
-      borderRadius: '4px',
-    },
+  disabledCorrect: {
+    borderWidth: '2px',
+    borderColor: color.correct(),
+    color: `${color.text()} !important`,
+  },
+  disabledIncorrect: {
+    borderWidth: '2px',
+    borderColor: color.incorrectWithIcon(),
+    color: `${color.text()} !important`,
   },
   selectMenu: {
     backgroundColor: color.background(),
+    border: `1px solid ${color.correct()} !important`,
     '&:hover': {
+      border: `1px solid ${color.text()} `,
       borderColor: 'initial',
     },
     '&:focus': {
+      border: `1px solid ${color.text()}`,
       borderColor: 'initial',
     },
   },
-  icon: {
-    color: color.text(),
-  },
   selected: {
     color: `${color.text()} !important`,
     backgroundColor: `${color.background()} !important`,
@@ -155,6 +252,30 @@ const styles = () => ({
   label: {
     fontSize: 'max(1rem, 14px)',
   },
+  srOnly: {
+    position: 'absolute',
+    left: '-10000px',
+    top: 'auto',
+    width: '1px',
+    height: '1px',
+    overflow: 'hidden',
+  },
+  correctnessIndicatorIcon: {
+    color: `${color.white()} !important`,
+    position: 'absolute',
+    top: '-8px !important',
+    left: '-8px',
+    marginLeft: '0 !important',
+    borderRadius: '50%',
+    fontSize: '16px',
+    padding: '2px',
+  },
+  correctIcon: {
+    backgroundColor: color.correct(),
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon(),
+  },
 });
 
 export default withStyles(styles)(Dropdown);

package/src/constructed-response.jsx

@@ -1,34 +1,92 @@
 import React from 'react';
-import Input from './components/input';
+import { withStyles } from '@material-ui/core/styles';
+import classnames from 'classnames';
+
+import { color } from '@pie-lib/render-ui';
+import EditableHtml from '@pie-lib/editable-html';
 import { withMask } from './with-mask';
 
-// eslint-disable-next-line react/display-name
-export default withMask('input', (props) => (node, data, onChange) => {
-  const dataset = node.data ? node.data.dataset || {} : {};
-  if (dataset.component === 'input') {
-    // eslint-disable-next-line react/prop-types
-    const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;
+const styles = () => ({
+  editableHtmlCustom: {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    margin: '4px',
+    borderRadius: '4px',
+    border: `1px solid ${color.black()}`,
+  },
+  correct: {
+    border: `1px solid ${color.correct()}`,
+  },
+  incorrect: {
+    border: `1px solid ${color.incorrect()}`,
+  },
+});
 
-    // the first answer is the correct one
-    // eslint-disable-next-line react/prop-types
+const MaskedInput = (props) => (node, data) => {
+  const {
+    adjustedLimit,
+    disabled,
+    feedback,
+    showCorrectAnswer,
+    maxLength,
+    spellCheck,
+    classes,
+    pluginProps,
+    onChange,
+  } = props;
+  const dataset = node.data?.dataset || {};
+
+  if (dataset.component === 'input') {
     const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
     const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
     const width = maxLength && maxLength[dataset.id];
+    const feedbackStatus = feedback && feedback[dataset.id];
+    const isCorrect = showCorrectAnswer || feedbackStatus === 'correct';
+    const isIncorrect = !showCorrectAnswer && feedbackStatus === 'incorrect';
+
+    const handleInputChange = (newValue) => {
+      const updatedValue = {
+        ...data,
+        [dataset.id]: newValue,
+      };
+      onChange(updatedValue);
+    };
+
+    const handleKeyDown = (event) => {
+      // the keyCode value for the Enter/Return key is 13
+      if (event.key === 'Enter' || event.keyCode === 13) {
+        return false;
+      }
+    };
 
     return (
-      <Input
+      <EditableHtml
+        id={dataset.id}
         key={`${node.type}-input-${dataset.id}`}
-        correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
         disabled={showCorrectAnswer || disabled}
-        value={finalValue}
-        id={dataset.id}
-        onChange={onChange}
-        showCorrectAnswer={showCorrectAnswer}
-        width={width}
+        disableUnderline
+        onChange={handleInputChange}
+        markup={finalValue || ''}
         charactersLimit={adjustedLimit ? width : 25}
-        isConstructedResponse={true}
+        activePlugins={['languageCharacters']}
+        pluginProps={pluginProps}
+        languageCharactersProps={[{ language: 'spanish' }]}
         spellCheck={spellCheck}
+        width={`calc(${width}em + 42px)`} // added 42px for left and right padding of editable-html
+        onKeyDown={handleKeyDown}
+        autoWidthToolbar
+        toolbarOpts={{
+          minWidth: 'auto',
+          noBorder: true,
+          isHidden: !!pluginProps?.characters?.disabled,
+        }}
+        className={classnames(classes.editableHtmlCustom, {
+          [classes.correct]: isCorrect,
+          [classes.incorrect]: isIncorrect,
+        })}
       />
     );
   }
-});
+};
+
+export default withStyles(styles)(withMask('input', MaskedInput));

package/src/customizable.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+// import Input from './components/input';
+import { withMask } from './with-mask';
+
+// eslint-disable-next-line react/display-name
+export default withMask('input', (props) => (node, data, onChange) => {
+  const dataset = node.data ? node.data.dataset || {} : {};
+  if (dataset.component === 'input') {
+    // eslint-disable-next-line react/prop-types
+    // const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;
+
+    // the first answer is the correct one
+    // eslint-disable-next-line react/prop-types
+    // const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
+    // const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
+    // const width = maxLength && maxLength[dataset.id];
+
+    return props.customMarkMarkupComponent(dataset.id);
+    // return (
+    //   <Input
+    //     key={`${node.type}-input-${dataset.id}`}
+    //     correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
+    //     disabled={showCorrectAnswer || disabled}
+    //     value={finalValue}
+    //     id={dataset.id}
+    //     onChange={onChange}
+    //     showCorrectAnswer={showCorrectAnswer}
+    //     width={width}
+    //     charactersLimit={adjustedLimit ? width : 25}
+    //     isConstructedResponse={true}
+    //     spellCheck={spellCheck}
+    //   />
+    // );
+  }
+});

package/src/drag-in-the-blank.jsx

@@ -10,7 +10,15 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
   const dataset = node.data ? node.data.dataset || {} : {};
   if (dataset.component === 'blank') {
     // eslint-disable-next-line react/prop-types
-    const { disabled, duplicates, correctResponse, feedback, showCorrectAnswer } = props;
+    const {
+      disabled,
+      duplicates,
+      correctResponse,
+      feedback,
+      showCorrectAnswer,
+      emptyResponseAreaWidth,
+      emptyResponseAreaHeight,
+    } = props;
     const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
     // eslint-disable-next-line react/prop-types
     const choice = choiceId && props.choices.find((c) => c.id === choiceId);
@@ -23,6 +31,8 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
         duplicates={duplicates}
         choice={choice}
         id={dataset.id}
+        emptyResponseAreaWidth={emptyResponseAreaWidth}
+        emptyResponseAreaHeight={emptyResponseAreaHeight}
         onChange={onChange}
       />
     );
@@ -42,6 +52,8 @@ export default class DragInTheBlank extends React.Component {
     feedback: PropTypes.object,
     correctResponse: PropTypes.object,
     showCorrectAnswer: PropTypes.bool,
+    emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   };
 
   UNSAFE_componentWillReceiveProps() {
@@ -56,13 +68,18 @@ export default class DragInTheBlank extends React.Component {
 
   getPositionDirection = (choicePosition) => {
     let flexDirection;
+    let justifyContent;
+    let alignItems;
 
     switch (choicePosition) {
       case 'left':
         flexDirection = 'row';
+        alignItems = 'center';
         break;
       case 'right':
         flexDirection = 'row-reverse';
+        justifyContent = 'flex-end';
+        alignItems = 'center';
         break;
       case 'below':
         flexDirection = 'column-reverse';
@@ -73,7 +90,7 @@ export default class DragInTheBlank extends React.Component {
         break;
     }
 
-    return flexDirection;
+    return { flexDirection, justifyContent, alignItems };
   };
 
   render() {
@@ -89,12 +106,15 @@ export default class DragInTheBlank extends React.Component {
       disabled,
       feedback,
       showCorrectAnswer,
+      emptyResponseAreaWidth,
+      emptyResponseAreaHeight,
     } = this.props;
 
     const choicePosition = choicesPosition || 'below';
     const style = {
       display: 'flex',
-      flexDirection: this.getPositionDirection(choicePosition),
+      minWidth: '100px',
+      ...this.getPositionDirection(choicePosition),
     };
 
     return (
@@ -107,6 +127,7 @@ export default class DragInTheBlank extends React.Component {
           disabled={disabled}
         />
         <Masked
+          elementType={'drag-in-the-blank'}
           markup={markup}
           layout={layout}
           value={value}
@@ -117,6 +138,8 @@ export default class DragInTheBlank extends React.Component {
           feedback={feedback}
           correctResponse={correctResponse}
           showCorrectAnswer={showCorrectAnswer}
+          emptyResponseAreaWidth={emptyResponseAreaWidth}
+          emptyResponseAreaHeight={emptyResponseAreaHeight}
         />
       </div>
     );

package/src/index.js

@@ -1,7 +1,16 @@
 import { withMask, buildLayoutFromMarkup } from './with-mask';
 import DragInTheBlank from './drag-in-the-blank';
 import ConstructedResponse from './constructed-response';
+import Customizable from './customizable';
 import InlineDropdown from './inline-dropdown';
 import componentize from './componentize';
 
-export { withMask, buildLayoutFromMarkup, DragInTheBlank, ConstructedResponse, InlineDropdown, componentize };
+export {
+  withMask,
+  buildLayoutFromMarkup,
+  DragInTheBlank,
+  ConstructedResponse,
+  InlineDropdown,
+  componentize,
+  Customizable,
+};

package/src/inline-dropdown.jsx

@@ -17,10 +17,12 @@ export default withMask('dropdown', (props) => (node, data, onChange) => {
         correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
         disabled={disabled || showCorrectAnswer}
         value={finalChoice}
+        correctValue={showCorrectAnswer ? correctAnswer && correctAnswer.label : undefined}
         id={dataset.id}
         onChange={onChange}
         choices={choices[dataset.id]}
         showCorrectAnswer={showCorrectAnswer}
+        singleQuery={Object.keys(choices).length == 1}
       />
     );
   }

package/src/mask.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import { withStyles } from '@material-ui/core/styles';
 import { MARK_TAGS } from './serialization';
+import cx from 'classnames';
 
 const Paragraph = withStyles((theme) => ({
   para: {
@@ -11,6 +12,13 @@ const Paragraph = withStyles((theme) => ({
   },
 }))((props) => <div className={props.classes.para}>{props.children}</div>);
 
+const Spacer = withStyles(() => ({
+  spacer: {
+    display: 'inline-block',
+    width: '.75em',
+  },
+}))((props) => <span className={props.classes.spacer} />);
+
 const restrictWhitespaceTypes = ['tbody', 'tr'];
 
 const addText = (parentNode, text) => {
@@ -34,7 +42,7 @@ const getMark = (n) => {
   return null;
 };
 
-export const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode) => {
+export const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode, elementType) => {
   if (!value) {
     return null;
   }
@@ -59,6 +67,9 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
       const c = rootRenderChildren(n, value, onChange);
       if (c) {
         children.push(c);
+        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {
+          children.push(<Spacer key={`spacer-${index}`} />);
+        }
         return;
       }
     }
@@ -84,9 +95,12 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
         }
       } else if (content.length > 0) {
         children.push(content);
+        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {
+          children.push(<Spacer key={`spacer-${index}`} />);
+        }
       }
     } else {
-      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);
+      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);
       if (n.type === 'p' || n.type === 'paragraph') {
         children.push(<Paragraph key={key}>{subNodes}</Paragraph>);
       } else {
@@ -110,7 +124,17 @@ const MaskContainer = withStyles(() => ({
   main: {
     display: 'initial',
   },
-}))((props) => <div className={props.classes.main}>{props.children}</div>);
+  tableStyle: {
+    '&:not(.MathJax) table': {
+      borderCollapse: 'collapse',
+    },
+    // align table content to left as per STAR requirement PD-3687
+    '&:not(.MathJax) table td, &:not(.MathJax) table th': {
+      padding: '8px 12px',
+      textAlign: 'left',
+    },
+  },
+}))((props) => <div className={cx(props.classes.main, props.classes.tableStyle)}>{props.children}</div>);
 
 /**
  * Renders a layout that uses the slate.js Value model structure.
@@ -121,6 +145,7 @@ export default class Mask extends React.Component {
     layout: PropTypes.object,
     value: PropTypes.object,
     onChange: PropTypes.func,
+    elementType: PropTypes.string,
   };
 
   handleChange = (id, value) => {
@@ -129,8 +154,8 @@ export default class Mask extends React.Component {
   };
 
   render() {
-    const { value, layout } = this.props;
-    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
+    const { value, layout, elementType } = this.props;
+    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
 
     return <MaskContainer>{children}</MaskContainer>;
   }