@pie-lib/mask-markup 1.13.46 → 1.14.0-beta.1

package/src/components/blank.jsx

@@ -1,3 +1,4 @@
+import grey from '@material-ui/core/colors/grey';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
@@ -8,6 +9,7 @@ import { withStyles } from '@material-ui/core/styles';
 import Chip from '@material-ui/core/Chip';
 import classnames from 'classnames';
 import { color } from '@pie-lib/render-ui';
+
 const log = debug('pie-lib:mask-markup:blank');
 export const DRAG_TYPE = 'MaskBlank';
 
@@ -17,20 +19,19 @@ const useStyles = withStyles(() => ({
     minWidth: '200px',
     touchAction: 'none',
     overflow: 'hidden',
+    whiteSpace: 'nowrap', // Prevent line wrapping
   },
   chip: {
     backgroundColor: color.background(),
-    border: `1px solid ${color.text()}`,
+    border: `2px dashed ${color.text()}`,
     color: color.text(),
-    minWidth: '90px',
     fontSize: 'inherit',
-    minHeight: '32px',
-    height: 'auto',
     maxWidth: '374px',
     position: 'relative',
+    borderRadius: '3px',
   },
   chipLabel: {
-    whiteSpace: 'pre-wrap',
+    whiteSpace: 'normal',
     // Added for touch devices, for image content.
     // This will prevent the context menu from appearing and not allowing other interactions with the image.
     // If interactions with the image in the token will be requested we should handle only the context Menu.
@@ -39,6 +40,16 @@ const useStyles = withStyles(() => ({
       display: 'block',
       padding: '2px 0',
     },
+    // Remove default <p> margins to ensure consistent spacing across all wrapped content (p, span, div, math)
+    // Padding for top and bottom will instead be controlled by the container for consistent layout
+    // Ensures consistent behavior with pie-api-browser, where marginTop is already removed by a Bootstrap stylesheet
+    '& p': {
+      marginTop: '0',
+      marginBottom: '0',
+    },
+    '& mjx-frac': {
+      fontSize: '120% !important',
+    },
   },
   hidden: {
     color: 'transparent',
@@ -59,28 +70,44 @@ const useStyles = withStyles(() => ({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
   },
+  parentOver: {
+    border: `1px solid ${grey[500]}`,
+    backgroundColor: `${grey[300]}`,
+  },
 }));
 
 export class BlankContent extends React.Component {
-  static propTypes = {
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    disabled: PropTypes.bool,
-    duplicates: PropTypes.bool,
-    choice: PropTypes.object,
-    classes: PropTypes.object,
-    isOver: PropTypes.bool,
-    dragItem: PropTypes.object,
-    correct: PropTypes.bool,
-    onChange: PropTypes.func,
-  };
-
   constructor() {
     super();
     this.state = {
       height: 0,
+      width: 0,
     };
   }
 
+  handleImageLoad = () => {
+    this.updateDimensions();
+  };
+
+  handleElements() {
+    const imageElement = this.spanRef?.querySelector('img');
+
+    if (imageElement) {
+      imageElement.onload = this.handleImageLoad;
+    } else {
+      setTimeout(() => {
+        this.updateDimensions();
+      }, 300);
+    }
+  }
+
+  componentDidMount() {
+    this.handleElements();
+    if (this.rootRef) {
+      this.rootRef.addEventListener('touchstart', this.handleTouchStart, { passive: false });
+    }
+  }
+
   componentDidUpdate(prevProps) {
     renderMath(this.rootRef);
     const { choice: currentChoice } = this.props;
@@ -90,14 +117,59 @@ export class BlankContent extends React.Component {
       if (!currentChoice) {
         this.setState({
           height: 0,
+          width: 0,
         });
         return;
       }
-      setTimeout(() => {
-        this.setState({
-          height: this.spanRef.offsetHeight,
-        });
-      }, 300);
+      this.handleElements();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.rootRef) {
+      this.rootRef.removeEventListener('touchstart', this.handleTouchStart);
+    }
+  }
+
+  handleTouchStart = (e) => {
+    e.preventDefault();
+    this.touchStartTimer = setTimeout(() => {
+      this.startDrag();
+    }, 300); // Start drag after 300ms (touch and hold duration)
+  };
+
+  startDrag = () => {
+    const { connectDragSource, disabled } = this.props;
+    if (!disabled) {
+      connectDragSource(this.rootRef);
+    }
+  };
+
+  updateDimensions() {
+    if (this.spanRef && this.rootRef) {
+      // Temporarily set rootRef width to 'auto' for natural measurement
+      this.rootRef.style.width = 'auto';
+
+      // Get the natural dimensions of the content
+      const width = this.spanRef.offsetWidth || 0;
+      const height = this.spanRef.offsetHeight || 0;
+
+      const widthWithPadding = width + 24; // 12px padding on each side
+      const heightWithPadding = height + 24; // 12px padding on top and bottom
+
+      const responseAreaWidth = parseFloat(this.props.emptyResponseAreaWidth) || 0;
+      const responseAreaHeight = parseFloat(this.props.emptyResponseAreaHeight) || 0;
+
+      const adjustedWidth = widthWithPadding <= responseAreaWidth ? responseAreaWidth : widthWithPadding;
+      const adjustedHeight = heightWithPadding <= responseAreaHeight ? responseAreaHeight : heightWithPadding;
+
+      this.setState((prevState) => ({
+        width: adjustedWidth > responseAreaWidth ? adjustedWidth : prevState.width,
+        height: adjustedHeight > responseAreaHeight ? adjustedHeight : prevState.height,
+      }));
+
+      this.rootRef.style.width = `${adjustedWidth}px`;
+      this.rootRef.style.height = `${adjustedHeight}px`;
     }
   }
 
@@ -109,6 +181,29 @@ export class BlankContent extends React.Component {
     });
   }
 
+  getRootDimensions() {
+    // Handle potential non-numeric values
+    const responseAreaWidth = !isNaN(parseFloat(this.props.emptyResponseAreaWidth))
+      ? parseFloat(this.props.emptyResponseAreaWidth)
+      : 0;
+    const responseAreaHeight = !isNaN(parseFloat(this.props.emptyResponseAreaHeight))
+      ? parseFloat(this.props.emptyResponseAreaHeight)
+      : 0;
+
+    const rootStyle = {
+      height: this.state.height || responseAreaHeight,
+      width: this.state.width || responseAreaWidth,
+    };
+
+    // add minWidth, minHeight if width and height are not defined
+    // minWidth, minHeight will be also in model in the future
+    return {
+      ...rootStyle,
+      ...(responseAreaWidth ? {} : { minWidth: 90 }),
+      ...(responseAreaHeight ? {} : { minHeight: 32 }),
+    };
+  }
+
   render() {
     const { disabled, choice, classes, isOver, dragItem, correct } = this.props;
     const draggedLabel = dragItem && isOver && dragItem.choice.value;
@@ -158,22 +253,38 @@ export class BlankContent extends React.Component {
             )}
           </React.Fragment>
         }
-        className={classnames(classes.chip, isOver && classes.over, {
+        className={classnames(classes.chip, isOver && classes.over, isOver && classes.parentOver, {
           [classes.correct]: correct !== undefined && correct,
           [classes.incorrect]: correct !== undefined && !correct,
         })}
         variant={disabled ? 'outlined' : undefined}
         style={{
-          ...(this.state.height ? { height: this.state.height } : {}),
-        }}
-        classes={{
-          label: isOver && classes.over,
+          ...this.getRootDimensions(),
         }}
       />
     );
   }
 }
 
+BlankContent.defaultProps = {
+  emptyResponseAreaWidth: 0,
+  emptyResponseAreaHeight: 0,
+};
+
+BlankContent.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool,
+  duplicates: PropTypes.bool,
+  choice: PropTypes.object,
+  classes: PropTypes.object,
+  isOver: PropTypes.bool,
+  dragItem: PropTypes.object,
+  correct: PropTypes.bool,
+  onChange: PropTypes.func,
+  emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
 const StyledBlankContent = useStyles(BlankContent);
 
 const connectedBlankContent = useStyles(({ connectDragSource, connectDropTarget, ...props }) => {
@@ -231,7 +342,7 @@ const tileSource = {
     // this will be null if it did not drop
     const dropResult = monitor.getDropResult();
 
-    if (!dropResult || (dropResult.dropped && !props.duplicates)) {
+    if (!dropResult || dropResult.dropped) {
       const draggedItem = monitor.getItem();
 
       if (draggedItem.fromChoice) {

package/src/components/correct-input.jsx

@@ -37,6 +37,8 @@ export default withStyles(() => ({
   incorrect: correctStyle(color.incorrect()),
   box: {
     fontSize: 'inherit',
+    display: 'inline-block',
+    verticalAlign: 'middle',
   },
   outlinedInput: {
     padding: '2px',
@@ -60,8 +62,11 @@ export default withStyles(() => ({
     spellCheck,
     ...rest
   } = props;
+
   const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;
-  const inputProps = charactersLimit ? { maxLength: charactersLimit } : {};
+  const inputProps = charactersLimit
+    ? { maxLength: charactersLimit, 'aria-label': 'Enter answer' }
+    : { 'aria-label': 'Enter answer' };
 
   if (width) {
     inputProps.style = {

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);