@pie-lib/mask-markup 1.20.0 → 1.22.0

package/lib/components/dropdown.js

@@ -0,0 +1,484 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
+
+var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+
+var _ArrowDropUp = _interopRequireDefault(require("@material-ui/icons/ArrowDropUp"));
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var _mathRendering = require("@pie-lib/math-rendering");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var Dropdown = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Dropdown, _React$Component);
+
+  var _super = _createSuper(Dropdown);
+
+  function Dropdown(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Dropdown);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (event) {
+      return _this.setState({
+        anchorEl: event.currentTarget
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClose", function () {
+      var value = _this.props.value;
+
+      _this.setState({
+        anchorEl: null,
+        previewValue: null,
+        highlightedOptionId: null
+      }); // clear displayed preview if no selection
+
+
+      if (!value && _this.previewRef.current) {
+        _this.previewRef.current.innerHTML = '';
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHighlight", function (index) {
+      var highlightedOptionId = "dropdown-option-".concat(_this.props.id, "-").concat(index); // preview on hover if nothing selected
+
+      var stateUpdate = {
+        highlightedOptionId: highlightedOptionId
+      };
+
+      if (!_this.props.value) {
+        stateUpdate.previewValue = _this.props.choices[index].value;
+      }
+
+      _this.setState(stateUpdate);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelect", function (value, index) {
+      _this.props.onChange(_this.props.id, value);
+
+      _this.handleHighlight(index);
+
+      _this.handleClose();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHover", function (index) {
+      var selectedValue = _this.props.value;
+      if (selectedValue) return;
+      var highlightedOptionId = "dropdown-option-".concat(_this.props.id, "-").concat(index);
+      var previewValue = _this.state.previewValue;
+
+      _this.setState({
+        highlightedOptionId: highlightedOptionId,
+        previewValue: previewValue
+      }, function () {
+        // On hover, preview the math-rendered content inside the button if no value is selected.
+        var ref = _this.elementRefs[index];
+        var preview = _this.previewRef.current;
+
+        if (ref && preview) {
+          preview.innerHTML = ref.innerHTML;
+        }
+      });
+    });
+    _this.state = {
+      anchorEl: null,
+      highlightedOptionId: null,
+      menuWidth: null,
+      previewValue: null
+    };
+    _this.hiddenRef = /*#__PURE__*/_react["default"].createRef();
+    _this.buttonRef = /*#__PURE__*/_react["default"].createRef();
+    _this.previewRef = /*#__PURE__*/_react["default"].createRef();
+    _this.elementRefs = [];
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Dropdown, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // measure hidden menu width once
+      if (this.hiddenRef.current && this.state.menuWidth === null) {
+        this.setState({
+          menuWidth: this.hiddenRef.current.clientWidth
+        });
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var hiddenEl = this.hiddenRef.current;
+      var dropdownJustOpened = !prevState.anchorEl && this.state.anchorEl;
+
+      if (dropdownJustOpened) {
+        this.elementRefs.forEach(function (ref) {
+          if (!ref) return;
+          var containsLatex = ref.querySelector('[data-latex], [data-raw]');
+          var hasMathJax = ref.querySelector('mjx-container');
+          var mathHandled = ref.querySelector('[data-math-handled="true"]');
+
+          if (containsLatex && (!mathHandled || !hasMathJax)) {
+            (0, _mathRendering.renderMath)(ref);
+          }
+        });
+      }
+
+      if (hiddenEl) {
+        var newWidth = hiddenEl.clientWidth;
+
+        if (newWidth !== this.state.menuWidth) {
+          this.elementRefs.forEach(function (ref) {
+            if (ref) (0, _mathRendering.renderMath)(ref);
+          });
+          (0, _mathRendering.renderMath)(hiddenEl);
+          this.setState({
+            menuWidth: newWidth
+          });
+        }
+      }
+    }
+  }, {
+    key: "getLabel",
+    value: function getLabel(choices, value) {
+      var found = (choices || []).find(function (choice) {
+        return choice.value === value;
+      });
+      return found ? found.label.trim() : undefined;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          id = _this$props.id,
+          correct = _this$props.correct,
+          disabled = _this$props.disabled,
+          value = _this$props.value,
+          choices = _this$props.choices,
+          showCorrectAnswer = _this$props.showCorrectAnswer,
+          singleQuery = _this$props.singleQuery,
+          correctValue = _this$props.correctValue;
+      var anchorEl = this.state.anchorEl;
+      var open = Boolean(anchorEl);
+      var buttonId = "dropdown-button-".concat(id);
+      var menuId = "dropdown-menu-".concat(id);
+      var valueDisplayId = "dropdown-value-".concat(id); // Determine the class for disabled state, view mode and evaluate mode
+
+      var 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
+
+
+      var incrementedId = parseInt(id, 10) + 1;
+      var labelId = singleQuery ? 'Query-label' : "Query-label-".concat(incrementedId);
+      var labelText = singleQuery ? 'Query' : "Query ".concat(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.
+
+      var correctnessIcon = null;
+
+      if (disabled && correct !== undefined) {
+        correctnessIcon = correct || showCorrectAnswer ? /*#__PURE__*/_react["default"].createElement(_Check["default"], {
+          className: (0, _classnames["default"])(classes.correctnessIndicatorIcon, classes.correctIcon)
+        }) : /*#__PURE__*/_react["default"].createElement(_Close["default"], {
+          className: (0, _classnames["default"])(classes.correctnessIndicatorIcon, classes.incorrectIcon)
+        });
+      }
+
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.hiddenRef,
+        style: {
+          position: 'absolute',
+          visibility: 'hidden',
+          top: 0,
+          left: 0
+        }
+      }, (choices || []).map(function (c, index) {
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          key: index,
+          classes: {
+            root: classes.menuRoot,
+            selected: classes.selected
+          }
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          className: classes.label,
+          dangerouslySetInnerHTML: {
+            __html: c.label
+          }
+        }));
+      })), /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], {
+        className: classes.srOnly,
+        id: labelId
+      }, labelText), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        ref: this.buttonRef,
+        style: _objectSpread(_objectSpread({}, this.state.menuWidth && {
+          minWidth: "calc(".concat(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,
+        "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, /*#__PURE__*/_react["default"].createElement("span", {
+        id: valueDisplayId,
+        ref: this.previewRef,
+        className: classes.label,
+        dangerouslySetInnerHTML: {
+          __html: correctValue ? correctValue : open && this.state.previewValue ? this.getLabel(choices, this.state.previewValue) : this.getLabel(choices, value) || ''
+        }
+      }), open ? /*#__PURE__*/_react["default"].createElement(_ArrowDropUp["default"], null) : /*#__PURE__*/_react["default"].createElement(_ArrowDropDown["default"], null)), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+        id: menuId,
+        anchorEl: anchorEl,
+        className: classes.selectMenu,
+        keepMounted: true,
+        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(function (c, index) {
+        var optionId = "dropdown-option-".concat(id, "-").concat(index);
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          id: optionId,
+          classes: {
+            root: classes.menuRoot,
+            selected: classes.selected
+          },
+          key: "".concat(c.label, "-").concat(index),
+          value: c.value,
+          onClick: function onClick() {
+            return _this2.handleSelect(c.value, index);
+          },
+          role: "option",
+          "aria-selected": _this2.state.highlightedOptionId === optionId ? 'true' : undefined,
+          onMouseOver: function onMouseOver() {
+            return _this2.handleHover(index);
+          }
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          ref: function ref(_ref) {
+            return _this2.elementRefs[index] = _ref;
+          },
+          className: classes.label,
+          dangerouslySetInnerHTML: {
+            __html: c.label
+          }
+        }), /*#__PURE__*/_react["default"].createElement("span", {
+          className: classes.selectedIndicator,
+          dangerouslySetInnerHTML: {
+            __html: c.value === value ? ' &check;' : ''
+          }
+        }));
+      })));
+    }
+  }]);
+  return Dropdown;
+}(_react["default"].Component);
+
+(0, _defineProperty2["default"])(Dropdown, "propTypes", {
+  id: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  classes: _propTypes["default"].object,
+  correct: _propTypes["default"].bool,
+  choices: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    value: _propTypes["default"].string,
+    label: _propTypes["default"].string
+  })),
+  showCorrectAnswer: _propTypes["default"].bool,
+  singleQuery: _propTypes["default"].bool,
+  correctValue: _propTypes["default"].string
+});
+
+var styles = function styles() {
+  return {
+    root: {
+      color: _renderUi.color.text(),
+      border: "1px solid ".concat(_renderUi.color.borderGray()),
+      borderRadius: '4px',
+      justifyContent: 'space-between',
+      backgroundColor: _renderUi.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: _renderUi.color.text(),
+        marginLeft: '5px'
+      }
+    },
+    disabledCorrect: {
+      borderWidth: '2px',
+      borderColor: _renderUi.color.correct(),
+      color: "".concat(_renderUi.color.text(), " !important")
+    },
+    disabledIncorrect: {
+      borderWidth: '2px',
+      borderColor: _renderUi.color.incorrectWithIcon(),
+      color: "".concat(_renderUi.color.text(), " !important")
+    },
+    selectMenu: {
+      backgroundColor: _renderUi.color.background(),
+      border: "1px solid ".concat(_renderUi.color.correct(), " !important"),
+      '&:hover': {
+        border: "1px solid ".concat(_renderUi.color.text(), " "),
+        borderColor: 'initial'
+      },
+      '&:focus': {
+        border: "1px solid ".concat(_renderUi.color.text()),
+        borderColor: 'initial'
+      },
+      // remove default padding on the inner list
+      '& .MuiList-root': {
+        padding: 0
+      }
+    },
+    selected: {
+      color: "".concat(_renderUi.color.text(), " !important"),
+      backgroundColor: "".concat(_renderUi.color.background(), " !important"),
+      '&:hover': {
+        color: _renderUi.color.text(),
+        backgroundColor: "".concat(_renderUi.color.dropdownBackground(), " !important")
+      }
+    },
+    menuRoot: {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background(),
+      '&:focus': {
+        color: _renderUi.color.text(),
+        backgroundColor: _renderUi.color.background()
+      },
+      '&:hover': {
+        color: _renderUi.color.text(),
+        backgroundColor: _renderUi.color.dropdownBackground()
+      },
+      boxSizing: 'border-box',
+      padding: '25px',
+      borderRadius: '4px'
+    },
+    label: {
+      fontSize: 'max(1rem, 14px)'
+    },
+    selectedIndicator: {
+      fontSize: 'max(1rem, 14px)',
+      position: 'absolute',
+      right: '10px'
+    },
+    srOnly: {
+      position: 'absolute',
+      left: '-10000px',
+      top: 'auto',
+      width: '1px',
+      height: '1px',
+      overflow: 'hidden'
+    },
+    correctnessIndicatorIcon: {
+      color: "".concat(_renderUi.color.white(), " !important"),
+      position: 'absolute',
+      top: '-8px !important',
+      left: '-8px',
+      marginLeft: '0 !important',
+      borderRadius: '50%',
+      fontSize: '16px',
+      padding: '2px'
+    },
+    correctIcon: {
+      backgroundColor: _renderUi.color.correct()
+    },
+    incorrectIcon: {
+      backgroundColor: _renderUi.color.incorrectWithIcon()
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(Dropdown);
+
+exports["default"] = _default;
+//# sourceMappingURL=dropdown.js.map

package/lib/components/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dropdown.jsx"],"names":["Dropdown","props","event","setState","anchorEl","currentTarget","value","previewValue","highlightedOptionId","previewRef","current","innerHTML","index","id","stateUpdate","choices","onChange","handleHighlight","handleClose","selectedValue","state","ref","elementRefs","preview","menuWidth","hiddenRef","React","createRef","buttonRef","clientWidth","prevProps","prevState","hiddenEl","dropdownJustOpened","forEach","containsLatex","querySelector","hasMathJax","mathHandled","newWidth","found","find","choice","label","trim","undefined","classes","correct","disabled","showCorrectAnswer","singleQuery","correctValue","open","Boolean","buttonId","menuId","valueDisplayId","disabledClass","disabledCorrect","disabledIncorrect","incrementedId","parseInt","labelId","labelText","correctnessIcon","correctnessIndicatorIcon","correctIcon","incorrectIcon","position","visibility","top","left","map","c","root","menuRoot","selected","__html","srOnly","minWidth","borderWidth","transition","handleClick","getLabel","selectMenu","vertical","horizontal","style","padding","role","disablePadding","optionId","handleSelect","handleHover","selectedIndicator","Component","PropTypes","string","bool","func","object","arrayOf","shape","styles","color","text","border","borderGray","borderRadius","justifyContent","backgroundColor","background","height","width","margin","textTransform","paddingRight","right","pointerEvents","marginLeft","borderColor","incorrectWithIcon","dropdownBackground","boxSizing","fontSize","overflow","white"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\nimport ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';\nimport Close from '@material-ui/icons/Close';\nimport Check from '@material-ui/icons/Check';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport isEqual from 'lodash/isEqual';\n\nimport { color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nclass Dropdown extends React.Component {\n  static propTypes = {\n    id: PropTypes.string,\n    value: PropTypes.string,\n    disabled: PropTypes.bool,\n    onChange: PropTypes.func,\n    classes: PropTypes.object,\n    correct: PropTypes.bool,\n    choices: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })),\n    showCorrectAnswer: PropTypes.bool,\n    singleQuery: PropTypes.bool,\n    correctValue: PropTypes.string,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      anchorEl: null,\n      highlightedOptionId: null,\n      menuWidth: null,\n      previewValue: null,\n    };\n    this.hiddenRef = React.createRef();\n    this.buttonRef = React.createRef();\n    this.previewRef = React.createRef();\n    this.elementRefs = [];\n  }\n\n  componentDidMount() {\n    // measure hidden menu width once\n    if (this.hiddenRef.current && this.state.menuWidth === null) {\n      this.setState({ menuWidth: this.hiddenRef.current.clientWidth });\n    }\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    const hiddenEl = this.hiddenRef.current;\n\n    const dropdownJustOpened = !prevState.anchorEl && this.state.anchorEl;\n    if (dropdownJustOpened) {\n      this.elementRefs.forEach((ref) => {\n        if (!ref) return;\n\n        const containsLatex = ref.querySelector('[data-latex], [data-raw]');\n        const hasMathJax = ref.querySelector('mjx-container');\n        const mathHandled = ref.querySelector('[data-math-handled=\"true\"]');\n\n        if (containsLatex && (!mathHandled || !hasMathJax)) {\n          renderMath(ref);\n        }\n      });\n    }\n\n    if (hiddenEl) {\n      const newWidth = hiddenEl.clientWidth;\n      if (newWidth !== this.state.menuWidth) {\n        this.elementRefs.forEach((ref) => {\n          if (ref) renderMath(ref);\n        });\n\n        renderMath(hiddenEl);\n        this.setState({ menuWidth: newWidth });\n      }\n    }\n  }\n\n  handleClick = (event) => this.setState({ anchorEl: event.currentTarget });\n\n  handleClose = () => {\n    const { value } = this.props;\n    this.setState({ anchorEl: null, previewValue: null, highlightedOptionId: null });\n    // clear displayed preview if no selection\n    if (!value && this.previewRef.current) {\n      this.previewRef.current.innerHTML = '';\n    }\n  };\n\n  handleHighlight = (index) => {\n    const highlightedOptionId = `dropdown-option-${this.props.id}-${index}`;\n\n    // preview on hover if nothing selected\n    const stateUpdate = { highlightedOptionId };\n    if (!this.props.value) {\n      stateUpdate.previewValue = this.props.choices[index].value;\n    }\n    this.setState(stateUpdate);\n  };\n\n  handleSelect = (value, index) => {\n    this.props.onChange(this.props.id, value);\n    this.handleHighlight(index);\n    this.handleClose();\n  };\n\n  handleHover = (index) => {\n    const selectedValue = this.props.value;\n\n    if (selectedValue) return;\n\n    const highlightedOptionId = `dropdown-option-${this.props.id}-${index}`;\n    const previewValue = this.state.previewValue;\n\n    this.setState({ highlightedOptionId, previewValue }, () => {\n      // On hover, preview the math-rendered content inside the button if no value is selected.\n      const ref = this.elementRefs[index];\n      const preview = this.previewRef.current;\n\n      if (ref && preview) {\n        preview.innerHTML = ref.innerHTML;\n      }\n    });\n  };\n\n  getLabel(choices, value) {\n    const found = (choices || []).find((choice) => choice.value === value);\n\n    return found ? found.label.trim() : undefined;\n  }\n\n  render() {\n    const { classes, id, correct, disabled, value, choices, showCorrectAnswer, singleQuery, correctValue } = this.props;\n    const { anchorEl } = this.state;\n    const open = Boolean(anchorEl);\n    const buttonId = `dropdown-button-${id}`;\n    const menuId = `dropdown-menu-${id}`;\n    const valueDisplayId = `dropdown-value-${id}`;\n\n    // Determine the class for disabled state, view mode and evaluate mode\n    let disabledClass;\n    // Reset elementRefs before each render to avoid stale references\n    this.elementRefs = [];\n\n    if (disabled && correct !== undefined) {\n      disabledClass = correct || showCorrectAnswer ? classes.disabledCorrect : classes.disabledIncorrect;\n    }\n\n    // Create distinct, visually hidden labels for each dropdown\n    const incrementedId = parseInt(id, 10) + 1;\n    const labelId = singleQuery ? 'Query-label' : `Query-label-${incrementedId}`;\n    const labelText = singleQuery ? 'Query' : `Query ${incrementedId}`;\n\n    // 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.\n    let correctnessIcon = null;\n    if (disabled && correct !== undefined) {\n      correctnessIcon =\n        correct || showCorrectAnswer ? (\n          <Check className={classNames(classes.correctnessIndicatorIcon, classes.correctIcon)} />\n        ) : (\n          <Close className={classNames(classes.correctnessIndicatorIcon, classes.incorrectIcon)} />\n        );\n    }\n\n    return (\n      <>\n        <div ref={this.hiddenRef} style={{ position: 'absolute', visibility: 'hidden', top: 0, left: 0 }}>\n          {(choices || []).map((c, index) => (\n            <MenuItem key={index} classes={{ root: classes.menuRoot, selected: classes.selected }}>\n              <span className={classes.label} dangerouslySetInnerHTML={{ __html: c.label }} />\n            </MenuItem>\n          ))}\n        </div>\n        <InputLabel className={classes.srOnly} id={labelId}>\n          {labelText}\n        </InputLabel>\n        <Button\n          ref={this.buttonRef}\n          style={{\n            ...(this.state.menuWidth && { minWidth: `calc(${this.state.menuWidth}px + 8px)` }),\n            borderWidth: open ? '2px' : '1px',\n            transition: 'border-width 0.2s ease-in-out',\n          }}\n          aria-controls={open ? menuId : undefined}\n          aria-haspopup=\"listbox\"\n          aria-expanded={open ? 'true' : undefined}\n          aria-activedescendant={this.state.highlightedOptionId}\n          onClick={this.handleClick}\n          classes={{\n            root: classes.root,\n            disabled: disabledClass,\n          }}\n          disabled={disabled}\n          id={buttonId}\n          role=\"combobox\"\n          aria-label=\"Select answer\"\n          aria-labelledby={valueDisplayId}\n        >\n          {correctnessIcon}\n          <span\n            id={valueDisplayId}\n            ref={this.previewRef}\n            className={classes.label}\n            dangerouslySetInnerHTML={{\n              __html: correctValue\n                ? correctValue\n                : open && this.state.previewValue\n                ? this.getLabel(choices, this.state.previewValue)\n                : this.getLabel(choices, value) || '',\n            }}\n          />\n          {open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}\n        </Button>\n        <Menu\n          id={menuId}\n          anchorEl={anchorEl}\n          className={classes.selectMenu}\n          keepMounted\n          open={open}\n          onClose={this.handleClose}\n          getContentAnchorEl={null}\n          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n          transformOrigin={{ vertical: 'top', horizontal: 'left' }}\n          PaperProps={this.state.menuWidth ? { style: { minWidth: this.state.menuWidth, padding: '4px' } } : undefined}\n          MenuListProps={{\n            'aria-labelledby': buttonId,\n            role: 'listbox',\n            disablePadding: true,\n          }}\n        >\n          {(choices || []).map((c, index) => {\n            const optionId = `dropdown-option-${id}-${index}`;\n\n            return (\n              <MenuItem\n                id={optionId}\n                classes={{ root: classes.menuRoot, selected: classes.selected }}\n                key={`${c.label}-${index}`}\n                value={c.value}\n                onClick={() => this.handleSelect(c.value, index)}\n                role=\"option\"\n                aria-selected={this.state.highlightedOptionId === optionId ? 'true' : undefined}\n                onMouseOver={() => this.handleHover(index)}\n              >\n                <span\n                  ref={(ref) => (this.elementRefs[index] = ref)}\n                  className={classes.label}\n                  dangerouslySetInnerHTML={{ __html: c.label }}\n                />\n                <span\n                  className={classes.selectedIndicator}\n                  dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}\n                />\n              </MenuItem>\n            );\n          })}\n        </Menu>\n      </>\n    );\n  }\n}\n\nconst styles = () => ({\n  root: {\n    color: color.text(),\n    border: `1px solid ${color.borderGray()}`,\n    borderRadius: '4px',\n    justifyContent: 'space-between',\n    backgroundColor: color.background(),\n    position: 'relative',\n    height: '45px',\n    width: 'fit-content',\n    margin: '2px',\n    textTransform: 'none',\n    '& span': {\n      paddingRight: '5px',\n    },\n    '& svg': {\n      position: 'absolute',\n      right: 0,\n      top: 'calc(50% - 12px)',\n      pointerEvents: 'none',\n      color: color.text(),\n      marginLeft: '5px',\n    },\n  },\n  disabledCorrect: {\n    borderWidth: '2px',\n    borderColor: color.correct(),\n    color: `${color.text()} !important`,\n  },\n  disabledIncorrect: {\n    borderWidth: '2px',\n    borderColor: color.incorrectWithIcon(),\n    color: `${color.text()} !important`,\n  },\n  selectMenu: {\n    backgroundColor: color.background(),\n    border: `1px solid ${color.correct()} !important`,\n    '&:hover': {\n      border: `1px solid ${color.text()} `,\n      borderColor: 'initial',\n    },\n    '&:focus': {\n      border: `1px solid ${color.text()}`,\n      borderColor: 'initial',\n    },\n    // remove default padding on the inner list\n    '& .MuiList-root': {\n      padding: 0,\n    },\n  },\n  selected: {\n    color: `${color.text()} !important`,\n    backgroundColor: `${color.background()} !important`,\n    '&:hover': {\n      color: color.text(),\n      backgroundColor: `${color.dropdownBackground()} !important`,\n    },\n  },\n  menuRoot: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    '&:focus': {\n      color: color.text(),\n      backgroundColor: color.background(),\n    },\n    '&:hover': {\n      color: color.text(),\n      backgroundColor: color.dropdownBackground(),\n    },\n    boxSizing: 'border-box',\n    padding: '25px',\n    borderRadius: '4px',\n  },\n  label: {\n    fontSize: 'max(1rem, 14px)',\n  },\n  selectedIndicator: {\n    fontSize: 'max(1rem, 14px)',\n    position: 'absolute',\n    right: '10px',\n  },\n  srOnly: {\n    position: 'absolute',\n    left: '-10000px',\n    top: 'auto',\n    width: '1px',\n    height: '1px',\n    overflow: 'hidden',\n  },\n  correctnessIndicatorIcon: {\n    color: `${color.white()} !important`,\n    position: 'absolute',\n    top: '-8px !important',\n    left: '-8px',\n    marginLeft: '0 !important',\n    borderRadius: '50%',\n    fontSize: '16px',\n    padding: '2px',\n  },\n  correctIcon: {\n    backgroundColor: color.correct(),\n  },\n  incorrectIcon: {\n    backgroundColor: color.incorrectWithIcon(),\n  },\n});\n\nexport default withStyles(styles)(Dropdown);\n"],"file":"dropdown.js"}

package/lib/components/input.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _correctInput = _interopRequireDefault(require("./correct-input"));
+
+var Input = function Input(_ref) {
+  var disabled = _ref.disabled,
+      correct = _ref.correct,
+      charactersLimit = _ref.charactersLimit,
+      id = _ref.id,
+      isConstructedResponse = _ref.isConstructedResponse,
+      value = _ref.value,
+      _onChange = _ref.onChange,
+      showCorrectAnswer = _ref.showCorrectAnswer,
+      spellCheck = _ref.spellCheck,
+      width = _ref.width;
+  return /*#__PURE__*/_react["default"].createElement(_correctInput["default"], {
+    disabled: disabled,
+    correct: showCorrectAnswer || correct,
+    charactersLimit: charactersLimit,
+    variant: "outlined",
+    value: value,
+    isConstructedResponse: isConstructedResponse,
+    spellCheck: spellCheck,
+    isBox: true,
+    width: width,
+    onChange: function onChange(e) {
+      _onChange(id, e.target.value);
+    }
+  });
+};
+
+Input.propTypes = {
+  id: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  onChange: _propTypes["default"].func,
+  disabled: _propTypes["default"].bool,
+  spellCheck: _propTypes["default"].bool,
+  correct: _propTypes["default"].bool,
+  showCorrectAnswer: _propTypes["default"].bool,
+  charactersLimit: _propTypes["default"].number,
+  width: _propTypes["default"].number,
+  isConstructedResponse: _propTypes["default"].bool
+};
+var _default = Input;
+exports["default"] = _default;
+//# sourceMappingURL=input.js.map

package/lib/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/input.jsx"],"names":["Input","disabled","correct","charactersLimit","id","isConstructedResponse","value","onChange","showCorrectAnswer","spellCheck","width","e","target","propTypes","PropTypes","string","func","bool","number"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAWR;AAAA,MAVJC,QAUI,QAVJA,QAUI;AAAA,MATJC,OASI,QATJA,OASI;AAAA,MARJC,eAQI,QARJA,eAQI;AAAA,MAPJC,EAOI,QAPJA,EAOI;AAAA,MANJC,qBAMI,QANJA,qBAMI;AAAA,MALJC,KAKI,QALJA,KAKI;AAAA,MAJJC,SAII,QAJJA,QAII;AAAA,MAHJC,iBAGI,QAHJA,iBAGI;AAAA,MAFJC,UAEI,QAFJA,UAEI;AAAA,MADJC,KACI,QADJA,KACI;AACJ,sBACE,gCAAC,wBAAD;AACE,IAAA,QAAQ,EAAET,QADZ;AAEE,IAAA,OAAO,EAAEO,iBAAiB,IAAIN,OAFhC;AAGE,IAAA,eAAe,EAAEC,eAHnB;AAIE,IAAA,OAAO,EAAC,UAJV;AAKE,IAAA,KAAK,EAAEG,KALT;AAME,IAAA,qBAAqB,EAAED,qBANzB;AAOE,IAAA,UAAU,EAAEI,UAPd;AAQE,IAAA,KAAK,EAAE,IART;AASE,IAAA,KAAK,EAAEC,KATT;AAUE,IAAA,QAAQ,EAAE,kBAACC,CAAD,EAAO;AACfJ,MAAAA,SAAQ,CAACH,EAAD,EAAKO,CAAC,CAACC,MAAF,CAASN,KAAd,CAAR;AACD;AAZH,IADF;AAgBD,CA5BD;;AA8BAN,KAAK,CAACa,SAAN,GAAkB;AAChBT,EAAAA,EAAE,EAAEU,sBAAUC,MADE;AAEhBT,EAAAA,KAAK,EAAEQ,sBAAUC,MAFD;AAGhBR,EAAAA,QAAQ,EAAEO,sBAAUE,IAHJ;AAIhBf,EAAAA,QAAQ,EAAEa,sBAAUG,IAJJ;AAKhBR,EAAAA,UAAU,EAAEK,sBAAUG,IALN;AAMhBf,EAAAA,OAAO,EAAEY,sBAAUG,IANH;AAOhBT,EAAAA,iBAAiB,EAAEM,sBAAUG,IAPb;AAQhBd,EAAAA,eAAe,EAAEW,sBAAUI,MARX;AAShBR,EAAAA,KAAK,EAAEI,sBAAUI,MATD;AAUhBb,EAAAA,qBAAqB,EAAES,sBAAUG;AAVjB,CAAlB;eAaejB,K","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectInput from './correct-input';\n\nconst Input = ({\n  disabled,\n  correct,\n  charactersLimit,\n  id,\n  isConstructedResponse,\n  value,\n  onChange,\n  showCorrectAnswer,\n  spellCheck,\n  width,\n}) => {\n  return (\n    <CorrectInput\n      disabled={disabled}\n      correct={showCorrectAnswer || correct}\n      charactersLimit={charactersLimit}\n      variant=\"outlined\"\n      value={value}\n      isConstructedResponse={isConstructedResponse}\n      spellCheck={spellCheck}\n      isBox={true}\n      width={width}\n      onChange={(e) => {\n        onChange(id, e.target.value);\n      }}\n    />\n  );\n};\n\nInput.propTypes = {\n  id: PropTypes.string,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  disabled: PropTypes.bool,\n  spellCheck: PropTypes.bool,\n  correct: PropTypes.bool,\n  showCorrectAnswer: PropTypes.bool,\n  charactersLimit: PropTypes.number,\n  width: PropTypes.number,\n  isConstructedResponse: PropTypes.bool,\n};\n\nexport default Input;\n"],"file":"input.js"}