@pie-element/ebsr 9.12.1-next.9 → 9.12.2-next.18

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/components/dropdown.jsx

@@ -0,0 +1,231 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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 ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import { withStyles } from '@material-ui/core/styles';
+import { color } from '../../render-ui';
+
+class Dropdown extends React.Component {
+  static propTypes = {
+    id: PropTypes.string,
+    value: PropTypes.string,
+    disabled: PropTypes.bool,
+    onChange: PropTypes.func,
+    classes: PropTypes.object,
+    correct: PropTypes.bool,
+    choices: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })),
+    showCorrectAnswer: PropTypes.bool,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      anchorEl: null,
+      highlightedOptionId: null,
+    };
+  }
+
+  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 });
+  };
+
+  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, 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;
+
+    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.
+
+    return (
+      <>
+        <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}
+        >
+          <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 className={classes.label} dangerouslySetInnerHTML={{ __html: c.label }} />
+                <span
+                  className={classes.label}
+                  dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}
+                />
+              </MenuItem>
+            );
+          })}
+        </Menu>
+      </>
+    );
+  }
+}
+
+const styles = () => ({
+  root: {
+    color: color.text(),
+    border: `1px solid ${color.text()}`,
+    borderRadius: '4px',
+    justifyContent: 'space-between',
+    backgroundColor: color.background(),
+    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(),
+      marginLeft: '5px',
+    },
+  },
+  disabledCorrect: {
+    borderColor: color.correct(),
+    color: `${color.text()} !important`,
+  },
+  disabledIncorrect: {
+    borderColor: color.incorrect(),
+    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',
+    },
+  },
+  selected: {
+    color: `${color.text()} !important`,
+    backgroundColor: `${color.background()} !important`,
+    '&:hover': {
+      color: color.text(),
+      backgroundColor: `${color.secondaryLight()} !important`,
+    },
+  },
+  menuRoot: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    '&:focus': {
+      color: color.text(),
+      backgroundColor: color.background(),
+    },
+    '&:hover': {
+      color: color.text(),
+      backgroundColor: color.secondaryLight(),
+    },
+    boxSizing: 'border-box',
+    padding: '25px',
+    '&:first-of-type': {
+      borderRadius: '3px 3px 0 0',
+    },
+    '&:last-of-type': {
+      borderRadius: '0 0 3px 3px',
+    },
+  },
+  label: {
+    fontSize: 'max(1rem, 14px)',
+  },
+  srOnly: {
+    position: 'absolute',
+    left: '-10000px',
+    top: 'auto',
+    width: '1px',
+    height: '1px',
+    overflow: 'hidden',
+  },
+});
+
+export default withStyles(styles)(Dropdown);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/components/input.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CorrectInput from './correct-input';
+
+const Input = ({
+  disabled,
+  correct,
+  charactersLimit,
+  id,
+  isConstructedResponse,
+  value,
+  onChange,
+  showCorrectAnswer,
+  spellCheck,
+  width,
+}) => {
+  return (
+    <CorrectInput
+      disabled={disabled}
+      correct={showCorrectAnswer || correct}
+      charactersLimit={charactersLimit}
+      variant="outlined"
+      value={value}
+      isConstructedResponse={isConstructedResponse}
+      spellCheck={spellCheck}
+      isBox={true}
+      width={width}
+      onChange={(e) => {
+        onChange(id, e.target.value);
+      }}
+    />
+  );
+};
+
+Input.propTypes = {
+  id: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  spellCheck: PropTypes.bool,
+  correct: PropTypes.bool,
+  showCorrectAnswer: PropTypes.bool,
+  charactersLimit: PropTypes.number,
+  width: PropTypes.number,
+  isConstructedResponse: PropTypes.bool,
+};
+
+export default Input;

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/constructed-response.jsx

@@ -0,0 +1,34 @@
+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 (
+      <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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/drag-in-the-blank.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { renderMath } from '../math-rendering-accessible';
+import Choices from './choices';
+import Blank from './components/blank';
+import { withMask } from './with-mask';
+
+// eslint-disable-next-line react/display-name
+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 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);
+
+    return (
+      <Blank
+        key={`${node.type}-${dataset.id}`}
+        correct={showCorrectAnswer || (feedback && feedback[dataset.id])}
+        disabled={disabled}
+        duplicates={duplicates}
+        choice={choice}
+        id={dataset.id}
+        onChange={onChange}
+      />
+    );
+  }
+});
+
+export default class DragInTheBlank extends React.Component {
+  static propTypes = {
+    markup: PropTypes.string,
+    layout: PropTypes.object,
+    choicesPosition: PropTypes.string,
+    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
+    value: PropTypes.object,
+    onChange: PropTypes.func,
+    duplicates: PropTypes.bool,
+    disabled: PropTypes.bool,
+    feedback: PropTypes.object,
+    correctResponse: PropTypes.object,
+    showCorrectAnswer: PropTypes.bool,
+  };
+
+  UNSAFE_componentWillReceiveProps() {
+    if (this.rootRef) {
+      renderMath(this.rootRef);
+    }
+  }
+
+  componentDidUpdate() {
+    renderMath(this.rootRef);
+  }
+
+  getPositionDirection = (choicePosition) => {
+    let flexDirection;
+
+    switch (choicePosition) {
+      case 'left':
+        flexDirection = 'row';
+        break;
+      case 'right':
+        flexDirection = 'row-reverse';
+        break;
+      case 'below':
+        flexDirection = 'column-reverse';
+        break;
+      default:
+        // above
+        flexDirection = 'column';
+        break;
+    }
+
+    return flexDirection;
+  };
+
+  render() {
+    const {
+      markup,
+      duplicates,
+      layout,
+      value,
+      onChange,
+      choicesPosition,
+      choices,
+      correctResponse,
+      disabled,
+      feedback,
+      showCorrectAnswer,
+    } = this.props;
+
+    const choicePosition = choicesPosition || 'below';
+    const style = {
+      display: 'flex',
+      flexDirection: this.getPositionDirection(choicePosition),
+    };
+
+    return (
+      <div ref={(ref) => ref && (this.rootRef = ref)} style={style}>
+        <Choices
+          choicePosition={choicePosition}
+          duplicates={duplicates}
+          choices={choices}
+          value={value}
+          disabled={disabled}
+        />
+        <Masked
+          markup={markup}
+          layout={layout}
+          value={value}
+          choices={choices}
+          onChange={onChange}
+          disabled={disabled}
+          duplicates={duplicates}
+          feedback={feedback}
+          correctResponse={correctResponse}
+          showCorrectAnswer={showCorrectAnswer}
+        />
+      </div>
+    );
+  }
+}

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/index.js

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

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/inline-dropdown.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Dropdown from './components/dropdown';
+import { withMask } from './with-mask';
+
+// eslint-disable-next-line react/display-name
+export default withMask('dropdown', (props) => (node, data, onChange) => {
+  const dataset = node.data ? node.data.dataset || {} : {};
+  if (dataset.component === 'dropdown') {
+    // eslint-disable-next-line react/prop-types
+    const { choices, disabled, feedback, showCorrectAnswer } = props;
+    const correctAnswer = choices && choices[dataset.id] && choices[dataset.id].find((c) => c.correct);
+    const finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];
+
+    return (
+      <Dropdown
+        key={`${node.type}-dropdown-${dataset.id}`}
+        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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/mask.jsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+import { withStyles } from '@material-ui/core/styles';
+import { MARK_TAGS } from './serialization';
+
+const Paragraph = withStyles((theme) => ({
+  para: {
+    paddingTop: 2 * theme.spacing.unit,
+    paddingBottom: 2 * theme.spacing.unit,
+  },
+}))((props) => <div className={props.classes.para}>{props.children}</div>);
+
+const restrictWhitespaceTypes = ['tbody', 'tr'];
+
+const addText = (parentNode, text) => {
+  const isWhitespace = text.trim() === '';
+  const parentType = parentNode && parentNode.type;
+
+  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {
+    return undefined;
+  } else {
+    return text;
+  }
+};
+
+const getMark = (n) => {
+  const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);
+
+  if (mark) {
+    return mark.marks[0];
+  }
+
+  return null;
+};
+
+export const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode) => {
+  if (!value) {
+    return null;
+  }
+
+  const children = [];
+
+  (layout.nodes || []).forEach((n, index) => {
+    const key = n.type ? `${n.type}-${index}` : `${index}`;
+
+    if (n.isMath) {
+      children.push(
+        <span
+          dangerouslySetInnerHTML={{
+            __html: `<math displaystyle="true">${n.nodes[0].innerHTML}</math>`,
+          }}
+        />,
+      );
+      return children;
+    }
+
+    if (rootRenderChildren) {
+      const c = rootRenderChildren(n, value, onChange);
+      if (c) {
+        children.push(c);
+        return;
+      }
+    }
+
+    if (n.object === 'text') {
+      const content = n.leaves.reduce((acc, l) => {
+        const t = l.text;
+        const extraText = addText(parentNode, t);
+        return extraText ? acc + extraText : acc;
+      }, '');
+      const mark = getMark(n);
+
+      if (mark) {
+        let markKey;
+
+        for (markKey in MARK_TAGS) {
+          if (MARK_TAGS[markKey] === mark.type) {
+            const Tag = markKey;
+
+            children.push(<Tag key={key}>{content}</Tag>);
+            break;
+          }
+        }
+      } else if (content.length > 0) {
+        children.push(content);
+      }
+    } else {
+      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);
+      if (n.type === 'p' || n.type === 'paragraph') {
+        children.push(<Paragraph key={key}>{subNodes}</Paragraph>);
+      } else {
+        const Tag = n.type;
+        if (n.nodes && n.nodes.length > 0) {
+          children.push(
+            <Tag key={key} {...n.data.attributes}>
+              {subNodes}
+            </Tag>,
+          );
+        } else {
+          children.push(<Tag key={key} {...n.data.attributes} />);
+        }
+      }
+    }
+  });
+  return children;
+};
+
+const MaskContainer = withStyles(() => ({
+  main: {
+    display: 'initial',
+  },
+}))((props) => <div className={props.classes.main}>{props.children}</div>);
+
+/**
+ * Renders a layout that uses the slate.js Value model structure.
+ */
+export default class Mask extends React.Component {
+  static propTypes = {
+    renderChildren: PropTypes.func,
+    layout: PropTypes.object,
+    value: PropTypes.object,
+    onChange: PropTypes.func,
+  };
+
+  handleChange = (id, value) => {
+    const data = { ...this.props.value, [id]: value };
+    this.props.onChange(data);
+  };
+
+  render() {
+    const { value, layout } = this.props;
+    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
+
+    return <MaskContainer>{children}</MaskContainer>;
+  }
+}