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

package/lib/components/dropdown.js

@@ -25,16 +25,28 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+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 _correctInput = _interopRequireDefault(require("./correct-input"));
+var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+
+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 _renderUi = require("@pie-lib/render-ui");
 
+var _mathRendering = require("@pie-lib/math-rendering");
+
 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; } }
@@ -49,82 +61,164 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
 
     (0, _classCallCheck2["default"])(this, Dropdown);
     _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "showCheckmarkAndOpen", function () {
-      _this.setState({
-        showCheckmark: true,
-        open: true
+    (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 () {
+      return _this.setState({
+        anchorEl: null
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "hideCheckmarkAndClose", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHighlight", function (index) {
+      var highlightedOptionId = "dropdown-option-".concat(_this.props.id, "-").concat(index);
+
       _this.setState({
-        showCheckmark: false,
-        open: false
+        highlightedOptionId: highlightedOptionId
       });
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelect", function (value, index) {
+      _this.props.onChange(_this.props.id, value);
+
+      _this.handleHighlight(index);
+
+      _this.handleClose();
+    });
     _this.state = {
-      showCheckmark: false,
-      open: false
+      anchorEl: null,
+      highlightedOptionId: null
     };
+    _this.elementRefs = [];
     return _this;
   }
 
   (0, _createClass2["default"])(Dropdown, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.elementRefs.forEach(function (ref) {
+        if (ref) {
+          (0, _mathRendering.renderMath)(ref);
+        }
+      });
+    }
+  }, {
+    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,
-          _onChange = _this$props.onChange,
           choices = _this$props.choices,
-          showCorrectAnswer = _this$props.showCorrectAnswer;
-      var _this$state = this.state,
-          showCheckmark = _this$state.showCheckmark,
-          open = _this$state.open;
-      return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          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(_InputLabel["default"], {
+        className: classes.srOnly,
+        id: labelId
+      }, labelText), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        "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,
-          icon: classes.icon,
-          selectMenu: classes.selectMenu,
-          select: classes.select
+          disabled: disabledClass
         },
         disabled: disabled,
-        value: value || '',
-        onOpen: this.showCheckmarkAndOpen,
-        onClose: this.hideCheckmarkAndClose,
+        id: buttonId,
+        role: "combobox",
+        "aria-label": "Select answer",
+        "aria-labelledby": valueDisplayId
+      }, correctnessIcon, /*#__PURE__*/_react["default"].createElement("span", {
+        id: valueDisplayId,
+        className: classes.label,
+        dangerouslySetInnerHTML: {
+          __html: correctValue ? correctValue : this.getLabel(choices, value) ? this.getLabel(choices, value) : ''
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_ArrowDropDown["default"], null)), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+        id: menuId,
+        anchorEl: anchorEl,
+        className: classes.selectMenu,
+        keepMounted: true,
         open: open,
-        input: /*#__PURE__*/_react["default"].createElement(_correctInput["default"], {
-          correct: showCorrectAnswer || correct
-        }),
-        MenuProps: {
-          keepMounted: true,
-          disablePortal: true
-        },
-        onChange: function onChange(e) {
-          _onChange(id, e.target.value);
+        onClose: this.handleClose,
+        MenuListProps: {
+          'aria-labelledby': buttonId,
+          role: 'listbox'
         }
       }, (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
+          value: c.value,
+          onClick: function onClick() {
+            return _this2.handleSelect(c.value, index);
+          },
+          role: "option",
+          "aria-selected": _this2.state.highlightedOptionId === optionId ? 'true' : undefined
         }, /*#__PURE__*/_react["default"].createElement("span", {
+          ref: function ref(_ref) {
+            return _this2.elementRefs[index] = _ref;
+          },
           className: classes.label,
           dangerouslySetInnerHTML: {
             __html: c.label
           }
-        }), showCheckmark && /*#__PURE__*/_react["default"].createElement("span", {
+        }), /*#__PURE__*/_react["default"].createElement("span", {
           className: classes.label,
           dangerouslySetInnerHTML: {
             __html: c.value === value ? ' ✓' : ''
           }
         }));
-      }));
+      })));
     }
   }]);
   return Dropdown;
@@ -148,34 +242,49 @@ var styles = function styles() {
   return {
     root: {
       color: _renderUi.color.text(),
+      border: "1px solid ".concat(_renderUi.color.text()),
+      borderRadius: '4px',
+      justifyContent: 'space-between',
       backgroundColor: _renderUi.color.background(),
-      borderColor: _renderUi.color.secondaryLight(),
-      '& ul': {
-        paddingTop: 0,
-        paddingBottom: 0,
-        border: "1px solid ".concat(_renderUi.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: _renderUi.color.text(),
-        backgroundColor: _renderUi.color.background()
+        marginLeft: '5px'
       }
     },
-    select: {
-      '&:focus': {
-        borderRadius: '4px'
-      }
+    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'
       }
     },
-    icon: {
-      color: _renderUi.color.text()
-    },
     selected: {
       color: "".concat(_renderUi.color.text(), " !important"),
       backgroundColor: "".concat(_renderUi.color.background(), " !important"),
@@ -206,6 +315,30 @@ var styles = function styles() {
     },
     label: {
       fontSize: 'max(1rem, 14px)'
+    },
+    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()
     }
   };
 };

package/lib/components/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dropdown.jsx"],"names":["Dropdown","props","setState","showCheckmark","open","state","classes","id","correct","disabled","value","onChange","choices","showCorrectAnswer","root","icon","selectMenu","select","showCheckmarkAndOpen","hideCheckmarkAndClose","keepMounted","disablePortal","e","target","map","c","index","menuRoot","selected","label","__html","React","Component","PropTypes","string","bool","func","object","arrayOf","shape","styles","color","text","backgroundColor","background","borderColor","secondaryLight","paddingTop","paddingBottom","border","borderRadius","boxSizing","padding","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport CorrectInput from './correct-input';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\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  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showCheckmark: false,\n      open: false,\n    };\n  }\n\n  showCheckmarkAndOpen = () => {\n    this.setState({\n      showCheckmark: true,\n      open: true,\n    });\n  };\n\n  hideCheckmarkAndClose = () => {\n    this.setState({\n      showCheckmark: false,\n      open: false,\n    });\n  };\n\n  render() {\n    const { classes, id, correct, disabled, value, onChange, choices, showCorrectAnswer } = this.props;\n\n    const { showCheckmark, open } = this.state;\n\n    return (\n      <Select\n        classes={{\n          root: classes.root,\n          icon: classes.icon,\n          selectMenu: classes.selectMenu,\n          select: classes.select,\n        }}\n        disabled={disabled}\n        value={value || ''}\n        onOpen={this.showCheckmarkAndOpen}\n        onClose={this.hideCheckmarkAndClose}\n        open={open}\n        input={<CorrectInput correct={showCorrectAnswer || correct} />}\n        MenuProps={{\n          keepMounted: true,\n          disablePortal: true,\n        }}\n        onChange={(e) => {\n          onChange(id, e.target.value);\n        }}\n      >\n        {(choices || []).map((c, index) => (\n          <MenuItem\n            classes={{ root: classes.menuRoot, selected: classes.selected }}\n            key={`${c.label}-${index}`}\n            value={c.value}\n          >\n            <span\n              className={classes.label}\n              dangerouslySetInnerHTML={{\n                __html: c.label,\n              }}\n            />\n            {showCheckmark && (\n              <span\n                className={classes.label}\n                dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}\n              />\n            )}\n          </MenuItem>\n        ))}\n      </Select>\n    );\n  }\n}\n\nconst styles = () => ({\n  root: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    borderColor: color.secondaryLight(),\n    '& ul': {\n      paddingTop: 0,\n      paddingBottom: 0,\n      border: `1px solid ${color.text()}`,\n      borderRadius: '5px',\n      color: color.text(),\n      backgroundColor: color.background(),\n    },\n  },\n  select: {\n    '&:focus': {\n      borderRadius: '4px',\n    },\n  },\n  selectMenu: {\n    backgroundColor: color.background(),\n    '&:hover': {\n      borderColor: 'initial',\n    },\n    '&:focus': {\n      borderColor: 'initial',\n    },\n  },\n  icon: {\n    color: color.text(),\n  },\n  selected: {\n    color: `${color.text()} !important`,\n    backgroundColor: `${color.background()} !important`,\n    '&:hover': {\n      color: color.text(),\n      backgroundColor: `${color.secondaryLight()} !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.secondaryLight(),\n    },\n    boxSizing: 'border-box',\n    padding: '25px',\n    '&:first-of-type': {\n      borderRadius: '3px 3px 0 0',\n    },\n    '&:last-of-type': {\n      borderRadius: '0 0 3px 3px',\n    },\n  },\n  label: {\n    fontSize: 'max(1rem, 14px)',\n  },\n});\n\nexport default withStyles(styles)(Dropdown);\n"],"file":"dropdown.js"}
+{"version":3,"sources":["../../src/components/dropdown.jsx"],"names":["Dropdown","props","event","setState","anchorEl","currentTarget","index","highlightedOptionId","id","value","onChange","handleHighlight","handleClose","state","elementRefs","forEach","ref","choices","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","srOnly","handleClick","root","__html","getLabel","selectMenu","role","map","c","optionId","menuRoot","selected","handleSelect","React","Component","PropTypes","string","bool","func","object","arrayOf","shape","styles","color","text","border","borderRadius","justifyContent","backgroundColor","background","position","height","width","margin","textTransform","paddingRight","right","top","pointerEvents","marginLeft","borderWidth","borderColor","incorrectWithIcon","secondaryLight","boxSizing","padding","fontSize","left","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 Close from '@material-ui/icons/Close';\nimport Check from '@material-ui/icons/Check';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\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  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      anchorEl: null,\n      highlightedOptionId: null,\n    };\n\n    this.elementRefs = [];\n  }\n\n  componentDidUpdate() {\n    this.elementRefs.forEach((ref) => {\n      if (ref) {\n        renderMath(ref);\n      }\n    });\n  }\n\n  handleClick = (event) => this.setState({ anchorEl: event.currentTarget });\n\n  handleClose = () => this.setState({ anchorEl: null });\n\n  handleHighlight = (index) => {\n    const highlightedOptionId = `dropdown-option-${this.props.id}-${index}`;\n\n    this.setState({ highlightedOptionId });\n  };\n\n  handleSelect = (value, index) => {\n    this.props.onChange(this.props.id, value);\n    this.handleHighlight(index);\n    this.handleClose();\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\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\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        <InputLabel className={classes.srOnly} id={labelId}>\n          {labelText}\n        </InputLabel>\n        <Button\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            className={classes.label}\n            dangerouslySetInnerHTML={{\n              __html: correctValue ? correctValue : this.getLabel(choices, value) ? this.getLabel(choices, value) : '',\n            }}\n          />\n          <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          MenuListProps={{\n            'aria-labelledby': buttonId,\n            role: 'listbox',\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              >\n                <span\n                  ref={(ref) => (this.elementRefs[index] = ref)}\n                  className={classes.label}\n                  dangerouslySetInnerHTML={{ __html: c.label }}\n                />\n                <span\n                  className={classes.label}\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.text()}`,\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  },\n  selected: {\n    color: `${color.text()} !important`,\n    backgroundColor: `${color.background()} !important`,\n    '&:hover': {\n      color: color.text(),\n      backgroundColor: `${color.secondaryLight()} !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.secondaryLight(),\n    },\n    boxSizing: 'border-box',\n    padding: '25px',\n    '&:first-of-type': {\n      borderRadius: '3px 3px 0 0',\n    },\n    '&:last-of-type': {\n      borderRadius: '0 0 3px 3px',\n    },\n  },\n  label: {\n    fontSize: 'max(1rem, 14px)',\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/constructed-response.js

@@ -7,46 +7,110 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
-var _input = _interopRequireDefault(require("./components/input"));
+var _styles = require("@material-ui/core/styles");
+
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
 
 var _withMask = require("./with-mask");
 
-// eslint-disable-next-line react/display-name
-var _default = (0, _withMask.withMask)('input', function (props) {
-  return function (node, data, onChange) {
-    var dataset = node.data ? node.data.dataset || {} : {};
+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; }
+
+var styles = function styles() {
+  return {
+    editableHtmlCustom: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      margin: '4px',
+      borderRadius: '4px',
+      border: "1px solid ".concat(_renderUi.color.black())
+    },
+    correct: {
+      border: "1px solid ".concat(_renderUi.color.correct())
+    },
+    incorrect: {
+      border: "1px solid ".concat(_renderUi.color.incorrect())
+    }
+  };
+};
+
+var MaskedInput = function MaskedInput(props) {
+  return function (node, data) {
+    var _node$data;
+
+    var adjustedLimit = props.adjustedLimit,
+        disabled = props.disabled,
+        feedback = props.feedback,
+        showCorrectAnswer = props.showCorrectAnswer,
+        maxLength = props.maxLength,
+        spellCheck = props.spellCheck,
+        classes = props.classes,
+        pluginProps = props.pluginProps,
+        onChange = props.onChange;
+    var dataset = ((_node$data = node.data) === null || _node$data === void 0 ? void 0 : _node$data.dataset) || {};
 
     if (dataset.component === 'input') {
-      // eslint-disable-next-line react/prop-types
-      var adjustedLimit = props.adjustedLimit,
-          disabled = props.disabled,
-          feedback = props.feedback,
-          showCorrectAnswer = props.showCorrectAnswer,
-          maxLength = props.maxLength,
-          spellCheck = props.spellCheck; // the first answer is the correct one
-      // eslint-disable-next-line react/prop-types
+      var _pluginProps$characte, _classnames;
 
       var correctAnswer = (props.choices && dataset && props.choices[dataset.id] || [])[0];
       var finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
       var width = maxLength && maxLength[dataset.id];
-      return /*#__PURE__*/_react["default"].createElement(_input["default"], {
+      var feedbackStatus = feedback && feedback[dataset.id];
+      var isCorrect = showCorrectAnswer || feedbackStatus === 'correct';
+      var isIncorrect = !showCorrectAnswer && feedbackStatus === 'incorrect';
+
+      var handleInputChange = function handleInputChange(newValue) {
+        var updatedValue = _objectSpread(_objectSpread({}, data), {}, (0, _defineProperty2["default"])({}, dataset.id, newValue));
+
+        onChange(updatedValue);
+      };
+
+      var handleKeyDown = function handleKeyDown(event) {
+        // the keyCode value for the Enter/Return key is 13
+        if (event.key === 'Enter' || event.keyCode === 13) {
+          return false;
+        }
+      };
+
+      return /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        id: dataset.id,
         key: "".concat(node.type, "-input-").concat(dataset.id),
-        correct: feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct',
         disabled: showCorrectAnswer || disabled,
-        value: finalValue,
-        id: dataset.id,
-        onChange: onChange,
-        showCorrectAnswer: showCorrectAnswer,
-        width: width,
+        disableUnderline: true,
+        onChange: handleInputChange,
+        markup: finalValue || '',
         charactersLimit: adjustedLimit ? width : 25,
-        isConstructedResponse: true,
-        spellCheck: spellCheck
+        activePlugins: ['languageCharacters'],
+        pluginProps: pluginProps,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }],
+        spellCheck: spellCheck,
+        width: "calc(".concat(width, "em + 42px)") // added 42px for left and right padding of editable-html
+        ,
+        onKeyDown: handleKeyDown,
+        autoWidthToolbar: true,
+        toolbarOpts: {
+          minWidth: 'auto',
+          noBorder: true,
+          isHidden: !!(pluginProps !== null && pluginProps !== void 0 && (_pluginProps$characte = pluginProps.characters) !== null && _pluginProps$characte !== void 0 && _pluginProps$characte.disabled)
+        },
+        className: (0, _classnames2["default"])(classes.editableHtmlCustom, (_classnames = {}, (0, _defineProperty2["default"])(_classnames, classes.correct, isCorrect), (0, _defineProperty2["default"])(_classnames, classes.incorrect, isIncorrect), _classnames))
       });
     }
   };
-});
+};
+
+var _default = (0, _styles.withStyles)(styles)((0, _withMask.withMask)('input', MaskedInput));
 
 exports["default"] = _default;
 //# sourceMappingURL=constructed-response.js.map

package/lib/constructed-response.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constructed-response.jsx"],"names":["props","node","data","onChange","dataset","component","adjustedLimit","disabled","feedback","showCorrectAnswer","maxLength","spellCheck","correctAnswer","choices","id","finalValue","label","width","type"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;eACe,wBAAS,OAAT,EAAkB,UAACA,KAAD;AAAA,SAAW,UAACC,IAAD,EAAOC,IAAP,EAAaC,QAAb,EAA0B;AACpE,QAAMC,OAAO,GAAGH,IAAI,CAACC,IAAL,GAAYD,IAAI,CAACC,IAAL,CAAUE,OAAV,IAAqB,EAAjC,GAAsC,EAAtD;;AACA,QAAIA,OAAO,CAACC,SAAR,KAAsB,OAA1B,EAAmC;AACjC;AACA,UAAQC,aAAR,GAAwFN,KAAxF,CAAQM,aAAR;AAAA,UAAuBC,QAAvB,GAAwFP,KAAxF,CAAuBO,QAAvB;AAAA,UAAiCC,QAAjC,GAAwFR,KAAxF,CAAiCQ,QAAjC;AAAA,UAA2CC,iBAA3C,GAAwFT,KAAxF,CAA2CS,iBAA3C;AAAA,UAA8DC,SAA9D,GAAwFV,KAAxF,CAA8DU,SAA9D;AAAA,UAAyEC,UAAzE,GAAwFX,KAAxF,CAAyEW,UAAzE,CAFiC,CAIjC;AACA;;AACA,UAAMC,aAAa,GAAG,CAAEZ,KAAK,CAACa,OAAN,IAAiBT,OAAjB,IAA4BJ,KAAK,CAACa,OAAN,CAAcT,OAAO,CAACU,EAAtB,CAA7B,IAA2D,EAA5D,EAAgE,CAAhE,CAAtB;AACA,UAAMC,UAAU,GAAGN,iBAAiB,GAAGG,aAAa,IAAIA,aAAa,CAACI,KAAlC,GAA0Cd,IAAI,CAACE,OAAO,CAACU,EAAT,CAAJ,IAAoB,EAAlG;AACA,UAAMG,KAAK,GAAGP,SAAS,IAAIA,SAAS,CAACN,OAAO,CAACU,EAAT,CAApC;AAEA,0BACE,gCAAC,iBAAD;AACE,QAAA,GAAG,YAAKb,IAAI,CAACiB,IAAV,oBAAwBd,OAAO,CAACU,EAAhC,CADL;AAEE,QAAA,OAAO,EAAEN,QAAQ,IAAIA,QAAQ,CAACJ,OAAO,CAACU,EAAT,CAApB,IAAoCN,QAAQ,CAACJ,OAAO,CAACU,EAAT,CAAR,KAAyB,SAFxE;AAGE,QAAA,QAAQ,EAAEL,iBAAiB,IAAIF,QAHjC;AAIE,QAAA,KAAK,EAAEQ,UAJT;AAKE,QAAA,EAAE,EAAEX,OAAO,CAACU,EALd;AAME,QAAA,QAAQ,EAAEX,QANZ;AAOE,QAAA,iBAAiB,EAAEM,iBAPrB;AAQE,QAAA,KAAK,EAAEQ,KART;AASE,QAAA,eAAe,EAAEX,aAAa,GAAGW,KAAH,GAAW,EAT3C;AAUE,QAAA,qBAAqB,EAAE,IAVzB;AAWE,QAAA,UAAU,EAAEN;AAXd,QADF;AAeD;AACF,GA5BgC;AAAA,CAAlB,C","sourcesContent":["import React from 'react';\nimport Input from './components/input';\nimport { withMask } from './with-mask';\n\n// eslint-disable-next-line react/display-name\nexport default withMask('input', (props) => (node, data, onChange) => {\n  const dataset = node.data ? node.data.dataset || {} : {};\n  if (dataset.component === 'input') {\n    // eslint-disable-next-line react/prop-types\n    const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;\n\n    // the first answer is the correct one\n    // eslint-disable-next-line react/prop-types\n    const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];\n    const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';\n    const width = maxLength && maxLength[dataset.id];\n\n    return (\n      <Input\n        key={`${node.type}-input-${dataset.id}`}\n        correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}\n        disabled={showCorrectAnswer || disabled}\n        value={finalValue}\n        id={dataset.id}\n        onChange={onChange}\n        showCorrectAnswer={showCorrectAnswer}\n        width={width}\n        charactersLimit={adjustedLimit ? width : 25}\n        isConstructedResponse={true}\n        spellCheck={spellCheck}\n      />\n    );\n  }\n});\n"],"file":"constructed-response.js"}
+{"version":3,"sources":["../src/constructed-response.jsx"],"names":["styles","editableHtmlCustom","display","verticalAlign","margin","borderRadius","border","color","black","correct","incorrect","MaskedInput","props","node","data","adjustedLimit","disabled","feedback","showCorrectAnswer","maxLength","spellCheck","classes","pluginProps","onChange","dataset","component","correctAnswer","choices","id","finalValue","label","width","feedbackStatus","isCorrect","isIncorrect","handleInputChange","newValue","updatedValue","handleKeyDown","event","key","keyCode","type","language","minWidth","noBorder","isHidden","characters"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport classnames from 'classnames';\n\nimport { color } from '@pie-lib/render-ui';\nimport EditableHtml from '@pie-lib/editable-html';\nimport { withMask } from './with-mask';\n\nconst styles = () => ({\n  editableHtmlCustom: {\n    display: 'inline-block',\n    verticalAlign: 'middle',\n    margin: '4px',\n    borderRadius: '4px',\n    border: `1px solid ${color.black()}`,\n  },\n  correct: {\n    border: `1px solid ${color.correct()}`,\n  },\n  incorrect: {\n    border: `1px solid ${color.incorrect()}`,\n  },\n});\n\nconst MaskedInput = (props) => (node, data) => {\n  const {\n    adjustedLimit,\n    disabled,\n    feedback,\n    showCorrectAnswer,\n    maxLength,\n    spellCheck,\n    classes,\n    pluginProps,\n    onChange,\n  } = props;\n  const dataset = node.data?.dataset || {};\n\n  if (dataset.component === 'input') {\n    const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];\n    const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';\n    const width = maxLength && maxLength[dataset.id];\n    const feedbackStatus = feedback && feedback[dataset.id];\n    const isCorrect = showCorrectAnswer || feedbackStatus === 'correct';\n    const isIncorrect = !showCorrectAnswer && feedbackStatus === 'incorrect';\n\n    const handleInputChange = (newValue) => {\n      const updatedValue = {\n        ...data,\n        [dataset.id]: newValue,\n      };\n      onChange(updatedValue);\n    };\n\n    const handleKeyDown = (event) => {\n      // the keyCode value for the Enter/Return key is 13\n      if (event.key === 'Enter' || event.keyCode === 13) {\n        return false;\n      }\n    };\n\n    return (\n      <EditableHtml\n        id={dataset.id}\n        key={`${node.type}-input-${dataset.id}`}\n        disabled={showCorrectAnswer || disabled}\n        disableUnderline\n        onChange={handleInputChange}\n        markup={finalValue || ''}\n        charactersLimit={adjustedLimit ? width : 25}\n        activePlugins={['languageCharacters']}\n        pluginProps={pluginProps}\n        languageCharactersProps={[{ language: 'spanish' }]}\n        spellCheck={spellCheck}\n        width={`calc(${width}em + 42px)`} // added 42px for left and right padding of editable-html\n        onKeyDown={handleKeyDown}\n        autoWidthToolbar\n        toolbarOpts={{\n          minWidth: 'auto',\n          noBorder: true,\n          isHidden: !!pluginProps?.characters?.disabled,\n        }}\n        className={classnames(classes.editableHtmlCustom, {\n          [classes.correct]: isCorrect,\n          [classes.incorrect]: isIncorrect,\n        })}\n      />\n    );\n  }\n};\n\nexport default withStyles(styles)(withMask('input', MaskedInput));\n"],"file":"constructed-response.js"}

package/lib/customizable.js

@@ -0,0 +1,48 @@
+"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 _withMask = require("./with-mask");
+
+// import Input from './components/input';
+// eslint-disable-next-line react/display-name
+var _default = (0, _withMask.withMask)('input', function (props) {
+  return function (node, data, onChange) {
+    var dataset = node.data ? node.data.dataset || {} : {};
+
+    if (dataset.component === 'input') {
+      // eslint-disable-next-line react/prop-types
+      // const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;
+      // the first answer is the correct one
+      // eslint-disable-next-line react/prop-types
+      // const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
+      // const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
+      // const width = maxLength && maxLength[dataset.id];
+      return props.customMarkMarkupComponent(dataset.id); // return (
+      //   <Input
+      //     key={`${node.type}-input-${dataset.id}`}
+      //     correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
+      //     disabled={showCorrectAnswer || disabled}
+      //     value={finalValue}
+      //     id={dataset.id}
+      //     onChange={onChange}
+      //     showCorrectAnswer={showCorrectAnswer}
+      //     width={width}
+      //     charactersLimit={adjustedLimit ? width : 25}
+      //     isConstructedResponse={true}
+      //     spellCheck={spellCheck}
+      //   />
+      // );
+    }
+  };
+});
+
+exports["default"] = _default;
+//# sourceMappingURL=customizable.js.map

package/lib/customizable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/customizable.jsx"],"names":["props","node","data","onChange","dataset","component","customMarkMarkupComponent","id"],"mappings":";;;;;;;;;AAAA;;AAEA;;AADA;AAGA;eACe,wBAAS,OAAT,EAAkB,UAACA,KAAD;AAAA,SAAW,UAACC,IAAD,EAAOC,IAAP,EAAaC,QAAb,EAA0B;AACpE,QAAMC,OAAO,GAAGH,IAAI,CAACC,IAAL,GAAYD,IAAI,CAACC,IAAL,CAAUE,OAAV,IAAqB,EAAjC,GAAsC,EAAtD;;AACA,QAAIA,OAAO,CAACC,SAAR,KAAsB,OAA1B,EAAmC;AACjC;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA,aAAOL,KAAK,CAACM,yBAAN,CAAgCF,OAAO,CAACG,EAAxC,CAAP,CAViC,CAWjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF,GA7BgC;AAAA,CAAlB,C","sourcesContent":["import React from 'react';\n// import Input from './components/input';\nimport { withMask } from './with-mask';\n\n// eslint-disable-next-line react/display-name\nexport default withMask('input', (props) => (node, data, onChange) => {\n  const dataset = node.data ? node.data.dataset || {} : {};\n  if (dataset.component === 'input') {\n    // eslint-disable-next-line react/prop-types\n    // const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;\n\n    // the first answer is the correct one\n    // eslint-disable-next-line react/prop-types\n    // const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];\n    // const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';\n    // const width = maxLength && maxLength[dataset.id];\n\n    return props.customMarkMarkupComponent(dataset.id);\n    // return (\n    //   <Input\n    //     key={`${node.type}-input-${dataset.id}`}\n    //     correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}\n    //     disabled={showCorrectAnswer || disabled}\n    //     value={finalValue}\n    //     id={dataset.id}\n    //     onChange={onChange}\n    //     showCorrectAnswer={showCorrectAnswer}\n    //     width={width}\n    //     charactersLimit={adjustedLimit ? width : 25}\n    //     isConstructedResponse={true}\n    //     spellCheck={spellCheck}\n    //   />\n    // );\n  }\n});\n"],"file":"customizable.js"}