@pie-lib/mask-markup 1.14.1-beta.0 → 1.15.0

package/CHANGELOG.md

@@ -3,7 +3,159 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.14.1-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.1-beta.0) (2025-07-20)
+# [1.15.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.15.0) (2025-07-31)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.16.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.16.0) (2025-07-31)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.15.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.15.0) (2025-07-31)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.8) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.7) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.7) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.6) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.6) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.5) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.5) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.4) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.3) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.4) (2025-07-23)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.3) (2025-07-23)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.3) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.2) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.1) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.2) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.1) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+# [1.14.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.1) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/mask-markup
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "1.14.1-beta.0",
+  "version": "1.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,10 +10,9 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.2",
-    "@pie-lib/drag": "^2.3.1-beta.0",
-    "@pie-lib/editable-html": "beta",
-    "@pie-lib/math-rendering": "^3.3.1-beta.0",
-    "@pie-lib/render-ui": "^4.16.1-beta.0",
+    "@pie-lib/drag": "^2.5.0",
+    "@pie-lib/editable-html": "^11.4.0",
+    "@pie-lib/math-rendering": "^3.5.0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "immutable": ">=3.8.1",
@@ -31,5 +30,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453"
+  "gitHead": "889a13bfea2c768b8a3a6eabfc6fe7b7725aa832"
 }

package/src/choices/choice.jsx

@@ -6,7 +6,7 @@ import Chip from '@material-ui/core/Chip';
 import classnames from 'classnames';
 
 import { renderMath } from '@pie-lib/math-rendering';
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../../render-ui/src/index';
 import { DragSource } from '@pie-lib/drag';
 
 export const DRAG_TYPE = 'MaskBlank';

package/src/components/__tests__/__snapshots__/dropdown.test.js.snap

@@ -23,17 +23,18 @@ exports[`Dropdown render renders correctly with correct as true 1`] = `
   }
   classes={
     Object {
-      "correctIcon": "Dropdown-correctIcon-10",
-      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-9",
+      "correctIcon": "Dropdown-correctIcon-11",
+      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-10",
       "disabledCorrect": "Dropdown-disabledCorrect-2",
       "disabledIncorrect": "Dropdown-disabledIncorrect-3",
-      "incorrectIcon": "Dropdown-incorrectIcon-11",
+      "incorrectIcon": "Dropdown-incorrectIcon-12",
       "label": "Dropdown-label-7",
       "menuRoot": "Dropdown-menuRoot-6",
       "root": "Dropdown-root-1",
       "selectMenu": "Dropdown-selectMenu-4",
       "selected": "Dropdown-selected-5",
-      "srOnly": "Dropdown-srOnly-8",
+      "selectedIndicator": "Dropdown-selectedIndicator-8",
+      "srOnly": "Dropdown-srOnly-9",
     }
   }
   correct={true}
@@ -67,17 +68,18 @@ exports[`Dropdown render renders correctly with default props 1`] = `
   }
   classes={
     Object {
-      "correctIcon": "Dropdown-correctIcon-10",
-      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-9",
+      "correctIcon": "Dropdown-correctIcon-11",
+      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-10",
       "disabledCorrect": "Dropdown-disabledCorrect-2",
       "disabledIncorrect": "Dropdown-disabledIncorrect-3",
-      "incorrectIcon": "Dropdown-incorrectIcon-11",
+      "incorrectIcon": "Dropdown-incorrectIcon-12",
       "label": "Dropdown-label-7",
       "menuRoot": "Dropdown-menuRoot-6",
       "root": "Dropdown-root-1",
       "selectMenu": "Dropdown-selectMenu-4",
       "selected": "Dropdown-selected-5",
-      "srOnly": "Dropdown-srOnly-8",
+      "selectedIndicator": "Dropdown-selectedIndicator-8",
+      "srOnly": "Dropdown-srOnly-9",
     }
   }
   correct={false}
@@ -111,17 +113,18 @@ exports[`Dropdown render renders correctly with disabled prop as true 1`] = `
   }
   classes={
     Object {
-      "correctIcon": "Dropdown-correctIcon-10",
-      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-9",
+      "correctIcon": "Dropdown-correctIcon-11",
+      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-10",
       "disabledCorrect": "Dropdown-disabledCorrect-2",
       "disabledIncorrect": "Dropdown-disabledIncorrect-3",
-      "incorrectIcon": "Dropdown-incorrectIcon-11",
+      "incorrectIcon": "Dropdown-incorrectIcon-12",
       "label": "Dropdown-label-7",
       "menuRoot": "Dropdown-menuRoot-6",
       "root": "Dropdown-root-1",
       "selectMenu": "Dropdown-selectMenu-4",
       "selected": "Dropdown-selected-5",
-      "srOnly": "Dropdown-srOnly-8",
+      "selectedIndicator": "Dropdown-selectedIndicator-8",
+      "srOnly": "Dropdown-srOnly-9",
     }
   }
   correct={false}

package/src/components/blank.jsx

@@ -8,7 +8,7 @@ import { DragSource, DropTarget } from '@pie-lib/drag';
 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';
+import { color } from '../../../render-ui/src/index';
 
 const log = debug('pie-lib:mask-markup:blank');
 export const DRAG_TYPE = 'MaskBlank';

package/src/components/correct-input.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
 import classnames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../../render-ui/src/index';
 
 const correctStyle = (color) => ({
   borderColor: `${color} !important`,

package/src/components/dropdown.jsx

@@ -5,12 +5,14 @@ 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 ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
 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 isEqual from 'lodash/isEqual';
 
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../../render-ui/src/index';
 import { renderMath } from '@pie-lib/math-rendering';
 
 class Dropdown extends React.Component {
@@ -23,6 +25,8 @@ class Dropdown extends React.Component {
     correct: PropTypes.bool,
     choices: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })),
     showCorrectAnswer: PropTypes.bool,
+    singleQuery: PropTypes.bool,
+    correctValue: PropTypes.string,
   };
 
   constructor(props) {
@@ -31,27 +35,73 @@ class Dropdown extends React.Component {
     this.state = {
       anchorEl: null,
       highlightedOptionId: null,
+      menuWidth: null,
+      previewValue: null,
     };
-
+    this.hiddenRef = React.createRef();
+    this.buttonRef = React.createRef();
+    this.previewRef = React.createRef();
     this.elementRefs = [];
   }
 
-  componentDidUpdate() {
-    this.elementRefs.forEach((ref) => {
-      if (ref) {
-        renderMath(ref);
+  componentDidMount() {
+    // measure hidden menu width once
+    if (this.hiddenRef.current && this.state.menuWidth === null) {
+      this.setState({ menuWidth: this.hiddenRef.current.clientWidth });
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const hiddenEl = this.hiddenRef.current;
+
+    const dropdownJustOpened = !prevState.anchorEl && this.state.anchorEl;
+    if (dropdownJustOpened) {
+      this.elementRefs.forEach((ref) => {
+        if (!ref) return;
+
+        const containsLatex = ref.querySelector('[data-latex], [data-raw]');
+        const hasMathJax = ref.querySelector('mjx-container');
+        const mathHandled = ref.querySelector('[data-math-handled="true"]');
+
+        if (containsLatex && (!mathHandled || !hasMathJax)) {
+          renderMath(ref);
+        }
+      });
+    }
+
+    if (hiddenEl) {
+      const newWidth = hiddenEl.clientWidth;
+      if (newWidth !== this.state.menuWidth) {
+        this.elementRefs.forEach((ref) => {
+          if (ref) renderMath(ref);
+        });
+
+        renderMath(hiddenEl);
+        this.setState({ menuWidth: newWidth });
       }
-    });
+    }
   }
 
   handleClick = (event) => this.setState({ anchorEl: event.currentTarget });
 
-  handleClose = () => this.setState({ anchorEl: null });
+  handleClose = () => {
+    const { value } = this.props;
+    this.setState({ anchorEl: null, previewValue: null, highlightedOptionId: null });
+    // clear displayed preview if no selection
+    if (!value && this.previewRef.current) {
+      this.previewRef.current.innerHTML = '';
+    }
+  };
 
   handleHighlight = (index) => {
     const highlightedOptionId = `dropdown-option-${this.props.id}-${index}`;
 
-    this.setState({ highlightedOptionId });
+    // preview on hover if nothing selected
+    const stateUpdate = { highlightedOptionId };
+    if (!this.props.value) {
+      stateUpdate.previewValue = this.props.choices[index].value;
+    }
+    this.setState(stateUpdate);
   };
 
   handleSelect = (value, index) => {
@@ -60,6 +110,25 @@ class Dropdown extends React.Component {
     this.handleClose();
   };
 
+  handleHover = (index) => {
+    const selectedValue = this.props.value;
+
+    if (selectedValue) return;
+
+    const highlightedOptionId = `dropdown-option-${this.props.id}-${index}`;
+    const previewValue = this.state.previewValue;
+
+    this.setState({ highlightedOptionId, previewValue }, () => {
+      // On hover, preview the math-rendered content inside the button if no value is selected.
+      const ref = this.elementRefs[index];
+      const preview = this.previewRef.current;
+
+      if (ref && preview) {
+        preview.innerHTML = ref.innerHTML;
+      }
+    });
+  };
+
   getLabel(choices, value) {
     const found = (choices || []).find((choice) => choice.value === value);
 
@@ -68,7 +137,6 @@ class Dropdown extends React.Component {
 
   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}`;
@@ -90,7 +158,6 @@ class Dropdown extends React.Component {
     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.
-
     let correctnessIcon = null;
     if (disabled && correct !== undefined) {
       correctnessIcon =
@@ -103,10 +170,23 @@ class Dropdown extends React.Component {
 
     return (
       <>
+        <div ref={this.hiddenRef} style={{ position: 'absolute', visibility: 'hidden', top: 0, left: 0 }}>
+          {(choices || []).map((c, index) => (
+            <MenuItem key={index} classes={{ root: classes.menuRoot, selected: classes.selected }}>
+              <span className={classes.label} dangerouslySetInnerHTML={{ __html: c.label }} />
+            </MenuItem>
+          ))}
+        </div>
         <InputLabel className={classes.srOnly} id={labelId}>
           {labelText}
         </InputLabel>
         <Button
+          ref={this.buttonRef}
+          style={{
+            ...(this.state.menuWidth && { minWidth: `calc(${this.state.menuWidth}px + 8px)` }),
+            borderWidth: open ? '2px' : '1px',
+            transition: 'border-width 0.2s ease-in-out',
+          }}
           aria-controls={open ? menuId : undefined}
           aria-haspopup="listbox"
           aria-expanded={open ? 'true' : undefined}
@@ -125,12 +205,17 @@ class Dropdown extends React.Component {
           {correctnessIcon}
           <span
             id={valueDisplayId}
+            ref={this.previewRef}
             className={classes.label}
             dangerouslySetInnerHTML={{
-              __html: correctValue ? correctValue : this.getLabel(choices, value) ? this.getLabel(choices, value) : '',
+              __html: correctValue
+                ? correctValue
+                : open && this.state.previewValue
+                ? this.getLabel(choices, this.state.previewValue)
+                : this.getLabel(choices, value) || '',
             }}
           />
-          <ArrowDropDownIcon />
+          {open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
         </Button>
         <Menu
           id={menuId}
@@ -139,9 +224,14 @@ class Dropdown extends React.Component {
           keepMounted
           open={open}
           onClose={this.handleClose}
+          getContentAnchorEl={null}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+          PaperProps={this.state.menuWidth ? { style: { minWidth: this.state.menuWidth, padding: '4px' } } : undefined}
           MenuListProps={{
             'aria-labelledby': buttonId,
             role: 'listbox',
+            disablePadding: true,
           }}
         >
           {(choices || []).map((c, index) => {
@@ -156,6 +246,7 @@ class Dropdown extends React.Component {
                 onClick={() => this.handleSelect(c.value, index)}
                 role="option"
                 aria-selected={this.state.highlightedOptionId === optionId ? 'true' : undefined}
+                onMouseOver={() => this.handleHover(index)}
               >
                 <span
                   ref={(ref) => (this.elementRefs[index] = ref)}
@@ -163,7 +254,7 @@ class Dropdown extends React.Component {
                   dangerouslySetInnerHTML={{ __html: c.label }}
                 />
                 <span
-                  className={classes.label}
+                  className={classes.selectedIndicator}
                   dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}
                 />
               </MenuItem>
@@ -178,7 +269,7 @@ class Dropdown extends React.Component {
 const styles = () => ({
   root: {
     color: color.text(),
-    border: `1px solid ${color.text()}`,
+    border: `1px solid ${color.borderGray()}`,
     borderRadius: '4px',
     justifyContent: 'space-between',
     backgroundColor: color.background(),
@@ -220,13 +311,17 @@ const styles = () => ({
       border: `1px solid ${color.text()}`,
       borderColor: 'initial',
     },
+    // remove default padding on the inner list
+    '& .MuiList-root': {
+      padding: 0,
+    },
   },
   selected: {
     color: `${color.text()} !important`,
     backgroundColor: `${color.background()} !important`,
     '&:hover': {
       color: color.text(),
-      backgroundColor: `${color.secondaryLight()} !important`,
+      backgroundColor: `${color.dropdownBackground()} !important`,
     },
   },
   menuRoot: {
@@ -238,20 +333,20 @@ const styles = () => ({
     },
     '&:hover': {
       color: color.text(),
-      backgroundColor: color.secondaryLight(),
+      backgroundColor: color.dropdownBackground(),
     },
     boxSizing: 'border-box',
     padding: '25px',
-    '&:first-of-type': {
-      borderRadius: '3px 3px 0 0',
-    },
-    '&:last-of-type': {
-      borderRadius: '0 0 3px 3px',
-    },
+    borderRadius: '4px',
   },
   label: {
     fontSize: 'max(1rem, 14px)',
   },
+  selectedIndicator: {
+    fontSize: 'max(1rem, 14px)',
+    position: 'absolute',
+    right: '10px',
+  },
   srOnly: {
     position: 'absolute',
     left: '-10000px',

package/src/constructed-response.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
 
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../render-ui/src/index';
 import EditableHtml from '@pie-lib/editable-html';
 import { withMask } from './with-mask';