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

package/lib/components/dropdown.js

@@ -1,349 +0,0 @@
-"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 _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; } }
-
-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 () {
-      return _this.setState({
-        anchorEl: null
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHighlight", function (index) {
-      var highlightedOptionId = "dropdown-option-".concat(_this.props.id, "-").concat(index);
-
-      _this.setState({
-        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 = {
-      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,
-          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(_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,
-          disabled: disabledClass
-        },
-        disabled: disabled,
-        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,
-        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,
-          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
-          }
-        }), /*#__PURE__*/_react["default"].createElement("span", {
-          className: classes.label,
-          dangerouslySetInnerHTML: {
-            __html: c.value === value ? ' ✓' : ''
-          }
-        }));
-      })));
-    }
-  }]);
-  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
-});
-
-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(),
-      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'
-      }
-    },
-    selected: {
-      color: "".concat(_renderUi.color.text(), " !important"),
-      backgroundColor: "".concat(_renderUi.color.background(), " !important"),
-      '&:hover': {
-        color: _renderUi.color.text(),
-        backgroundColor: "".concat(_renderUi.color.secondaryLight(), " !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.secondaryLight()
-      },
-      boxSizing: 'border-box',
-      padding: '25px',
-      '&:first-of-type': {
-        borderRadius: '3px 3px 0 0'
-      },
-      '&:last-of-type': {
-        borderRadius: '0 0 3px 3px'
-      }
-    },
-    label: {
-      fontSize: 'max(1rem, 14px)'
-    },
-    srOnly: {
-      position: 'absolute',
-      left: '-10000px',
-      top: 'auto',
-      width: '1px',
-      height: '1px',
-      overflow: 'hidden'
-    },
-    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

@@ -1 +0,0 @@
-{"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/components/input.js

@@ -1,57 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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"}

package/lib/constructed-response.js

@@ -1,116 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-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");
-
-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') {
-      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];
-      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),
-        disabled: showCorrectAnswer || disabled,
-        disableUnderline: true,
-        onChange: handleInputChange,
-        markup: finalValue || '',
-        charactersLimit: adjustedLimit ? width : 25,
-        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 +0,0 @@
-{"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

@@ -1,48 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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"}