@pie-lib/mask-markup 1.16.0 → 1.17.0

package/lib/componentize.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var REGEX = /\{\{(\d+)\}\}/g;
-
-var _default = function _default(s, t) {
-  if (!s) {
-    return {
-      markup: ''
-    };
-  }
-
-  var markup = s.replace(REGEX, function (match, g) {
-    return "<span data-component=\"".concat(t, "\" data-id=\"").concat(g, "\"></span>");
-  });
-  return {
-    markup: markup
-  };
-};
-
-exports["default"] = _default;
-//# sourceMappingURL=componentize.js.map

package/lib/componentize.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/componentize.js"],"names":["REGEX","s","t","markup","replace","match","g"],"mappings":";;;;;;AAAA,IAAMA,KAAK,GAAG,gBAAd;;eAEe,kBAACC,CAAD,EAAIC,CAAJ,EAAU;AACvB,MAAI,CAACD,CAAL,EAAQ;AACN,WAAO;AAAEE,MAAAA,MAAM,EAAE;AAAV,KAAP;AACD;;AAED,MAAMA,MAAM,GAAGF,CAAC,CAACG,OAAF,CAAUJ,KAAV,EAAiB,UAACK,KAAD,EAAQC,CAAR,EAAc;AAC5C,4CAAgCJ,CAAhC,0BAA+CI,CAA/C;AACD,GAFc,CAAf;AAIA,SAAO;AAAEH,IAAAA,MAAM,EAANA;AAAF,GAAP;AACD,C","sourcesContent":["const REGEX = /\\{\\{(\\d+)\\}\\}/g;\n\nexport default (s, t) => {\n  if (!s) {\n    return { markup: '' };\n  }\n\n  const markup = s.replace(REGEX, (match, g) => {\n    return `<span data-component=\"${t}\" data-id=\"${g}\"></span>`;\n  });\n\n  return { markup };\n};\n"],"file":"componentize.js"}

package/lib/components/blank.js

@@ -1,415 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.DRAG_TYPE = exports.BlankContent = void 0;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-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 _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _mathRendering = require("@pie-lib/math-rendering");
-
-var _debug = _interopRequireDefault(require("debug"));
-
-var _drag = require("@pie-lib/drag");
-
-var _styles = require("@material-ui/core/styles");
-
-var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));
-
-var _classnames3 = _interopRequireDefault(require("classnames"));
-
-var _index = require("./../shared/index");
-
-var _excluded = ["connectDragSource", "connectDropTarget"];
-
-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 log = (0, _debug["default"])('pie-lib:mask-markup:blank');
-var DRAG_TYPE = 'MaskBlank';
-exports.DRAG_TYPE = DRAG_TYPE;
-var useStyles = (0, _styles.withStyles)(function () {
-  return {
-    content: {
-      border: "solid 0px ".concat(_index.color.primary()),
-      minWidth: '200px',
-      touchAction: 'none',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap' // Prevent line wrapping
-
-    },
-    chip: {
-      backgroundColor: _index.color.background(),
-      border: "2px dashed ".concat(_index.color.text()),
-      color: _index.color.text(),
-      fontSize: 'inherit',
-      maxWidth: '374px',
-      position: 'relative',
-      borderRadius: '3px'
-    },
-    chipLabel: {
-      whiteSpace: 'normal',
-      // Added for touch devices, for image content.
-      // This will prevent the context menu from appearing and not allowing other interactions with the image.
-      // If interactions with the image in the token will be requested we should handle only the context Menu.
-      pointerEvents: 'none',
-      '& img': {
-        display: 'block',
-        padding: '2px 0'
-      },
-      // Remove default <p> margins to ensure consistent spacing across all wrapped content (p, span, div, math)
-      // Padding for top and bottom will instead be controlled by the container for consistent layout
-      // Ensures consistent behavior with pie-api-browser, where marginTop is already removed by a Bootstrap stylesheet
-      '& p': {
-        marginTop: '0',
-        marginBottom: '0'
-      },
-      '& mjx-frac': {
-        fontSize: '120% !important'
-      }
-    },
-    hidden: {
-      color: 'transparent',
-      opacity: 0
-    },
-    dragged: {
-      position: 'absolute',
-      left: 16,
-      maxWidth: '60px'
-    },
-    correct: {
-      border: "solid 1px ".concat(_index.color.correct())
-    },
-    incorrect: {
-      border: "solid 1px ".concat(_index.color.incorrect())
-    },
-    over: {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden'
-    },
-    parentOver: {
-      border: "1px solid ".concat(_grey["default"][500]),
-      backgroundColor: "".concat(_grey["default"][300])
-    }
-  };
-});
-
-var BlankContent = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(BlankContent, _React$Component);
-
-  var _super = _createSuper(BlankContent);
-
-  function BlankContent() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, BlankContent);
-    _this = _super.call(this);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleImageLoad", function () {
-      _this.updateDimensions();
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTouchStart", function (e) {
-      e.preventDefault();
-      _this.touchStartTimer = setTimeout(function () {
-        _this.startDrag();
-      }, 300); // Start drag after 300ms (touch and hold duration)
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startDrag", function () {
-      var _this$props = _this.props,
-          connectDragSource = _this$props.connectDragSource,
-          disabled = _this$props.disabled;
-
-      if (!disabled) {
-        connectDragSource(_this.rootRef);
-      }
-    });
-    _this.state = {
-      height: 0,
-      width: 0
-    };
-    return _this;
-  }
-
-  (0, _createClass2["default"])(BlankContent, [{
-    key: "handleElements",
-    value: function handleElements() {
-      var _this$spanRef,
-          _this2 = this;
-
-      var imageElement = (_this$spanRef = this.spanRef) === null || _this$spanRef === void 0 ? void 0 : _this$spanRef.querySelector('img');
-
-      if (imageElement) {
-        imageElement.onload = this.handleImageLoad;
-      } else {
-        setTimeout(function () {
-          _this2.updateDimensions();
-        }, 300);
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.handleElements();
-
-      if (this.rootRef) {
-        this.rootRef.addEventListener('touchstart', this.handleTouchStart, {
-          passive: false
-        });
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      (0, _mathRendering.renderMath)(this.rootRef);
-      var currentChoice = this.props.choice;
-      var prevChoice = prevProps.choice;
-
-      if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {
-        if (!currentChoice) {
-          this.setState({
-            height: 0,
-            width: 0
-          });
-          return;
-        }
-
-        this.handleElements();
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.rootRef) {
-        this.rootRef.removeEventListener('touchstart', this.handleTouchStart);
-      }
-    }
-  }, {
-    key: "updateDimensions",
-    value: function updateDimensions() {
-      if (this.spanRef && this.rootRef) {
-        // Temporarily set rootRef width to 'auto' for natural measurement
-        this.rootRef.style.width = 'auto'; // Get the natural dimensions of the content
-
-        var width = this.spanRef.offsetWidth || 0;
-        var height = this.spanRef.offsetHeight || 0;
-        var widthWithPadding = width + 24; // 12px padding on each side
-
-        var heightWithPadding = height + 24; // 12px padding on top and bottom
-
-        var responseAreaWidth = parseFloat(this.props.emptyResponseAreaWidth) || 0;
-        var responseAreaHeight = parseFloat(this.props.emptyResponseAreaHeight) || 0;
-        var adjustedWidth = widthWithPadding <= responseAreaWidth ? responseAreaWidth : widthWithPadding;
-        var adjustedHeight = heightWithPadding <= responseAreaHeight ? responseAreaHeight : heightWithPadding;
-        this.setState(function (prevState) {
-          return {
-            width: adjustedWidth > responseAreaWidth ? adjustedWidth : prevState.width,
-            height: adjustedHeight > responseAreaHeight ? adjustedHeight : prevState.height
-          };
-        });
-        this.rootRef.style.width = "".concat(adjustedWidth, "px");
-        this.rootRef.style.height = "".concat(adjustedHeight, "px");
-      }
-    }
-  }, {
-    key: "addDraggableFalseAttributes",
-    value: function addDraggableFalseAttributes(parent) {
-      parent.childNodes.forEach(function (elem) {
-        if (elem instanceof Element || elem instanceof HTMLDocument) {
-          elem.setAttribute('draggable', false);
-        }
-      });
-    }
-  }, {
-    key: "getRootDimensions",
-    value: function getRootDimensions() {
-      // Handle potential non-numeric values
-      var responseAreaWidth = !isNaN(parseFloat(this.props.emptyResponseAreaWidth)) ? parseFloat(this.props.emptyResponseAreaWidth) : 0;
-      var responseAreaHeight = !isNaN(parseFloat(this.props.emptyResponseAreaHeight)) ? parseFloat(this.props.emptyResponseAreaHeight) : 0;
-      var rootStyle = {
-        height: this.state.height || responseAreaHeight,
-        width: this.state.width || responseAreaWidth
-      }; // add minWidth, minHeight if width and height are not defined
-      // minWidth, minHeight will be also in model in the future
-
-      return _objectSpread(_objectSpread(_objectSpread({}, rootStyle), responseAreaWidth ? {} : {
-        minWidth: 90
-      }), responseAreaHeight ? {} : {
-        minHeight: 32
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this,
-          _classnames2;
-
-      var _this$props2 = this.props,
-          disabled = _this$props2.disabled,
-          choice = _this$props2.choice,
-          classes = _this$props2.classes,
-          isOver = _this$props2.isOver,
-          dragItem = _this$props2.dragItem,
-          correct = _this$props2.correct;
-      var draggedLabel = dragItem && isOver && dragItem.choice.value;
-      var label = choice && choice.value;
-      return (
-        /*#__PURE__*/
-        // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.
-        _react["default"].createElement(_Chip["default"], {
-          clickable: false,
-          disabled: true,
-          ref: function ref(_ref3) {
-            //eslint-disable-next-line
-            _this3.rootRef = _reactDom["default"].findDOMNode(_ref3);
-          },
-          component: "span",
-          label: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
-            className: (0, _classnames3["default"])(classes.chipLabel, isOver && classes.over, (0, _defineProperty2["default"])({}, classes.hidden, draggedLabel)),
-            ref: function ref(_ref) {
-              if (_ref) {
-                //eslint-disable-next-line
-                _this3.spanRef = _reactDom["default"].findDOMNode(_ref);
-                _ref.innerHTML = label || '';
-
-                _this3.addDraggableFalseAttributes(_ref);
-              }
-            }
-          }, ' '), draggedLabel && /*#__PURE__*/_react["default"].createElement("span", {
-            className: (0, _classnames3["default"])(classes.chipLabel, isOver && classes.over, classes.dragged),
-            ref: function ref(_ref2) {
-              if (_ref2) {
-                //eslint-disable-next-line
-                _this3.spanRef = _reactDom["default"].findDOMNode(_ref2);
-                _ref2.innerHTML = draggedLabel || '';
-
-                _this3.addDraggableFalseAttributes(_ref2);
-              }
-            }
-          }, ' ')),
-          className: (0, _classnames3["default"])(classes.chip, isOver && classes.over, isOver && classes.parentOver, (_classnames2 = {}, (0, _defineProperty2["default"])(_classnames2, classes.correct, correct !== undefined && correct), (0, _defineProperty2["default"])(_classnames2, classes.incorrect, correct !== undefined && !correct), _classnames2)),
-          variant: disabled ? 'outlined' : undefined,
-          style: _objectSpread({}, this.getRootDimensions())
-        })
-      );
-    }
-  }]);
-  return BlankContent;
-}(_react["default"].Component);
-
-exports.BlankContent = BlankContent;
-BlankContent.defaultProps = {
-  emptyResponseAreaWidth: 0,
-  emptyResponseAreaHeight: 0
-};
-BlankContent.propTypes = {
-  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  disabled: _propTypes["default"].bool,
-  duplicates: _propTypes["default"].bool,
-  choice: _propTypes["default"].object,
-  classes: _propTypes["default"].object,
-  isOver: _propTypes["default"].bool,
-  dragItem: _propTypes["default"].object,
-  correct: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  emptyResponseAreaWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  emptyResponseAreaHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
-};
-var StyledBlankContent = useStyles(BlankContent);
-var connectedBlankContent = useStyles(function (_ref4) {
-  var connectDragSource = _ref4.connectDragSource,
-      connectDropTarget = _ref4.connectDropTarget,
-      props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
-  var classes = props.classes,
-      isOver = props.isOver;
-  return connectDropTarget(connectDragSource( /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames3["default"])(classes.content, isOver && classes.over)
-  }, /*#__PURE__*/_react["default"].createElement(StyledBlankContent, props))));
-});
-var tileTarget = {
-  drop: function drop(props, monitor) {
-    var draggedItem = monitor.getItem();
-    log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);
-
-    if (draggedItem.id !== props.id) {
-      props.onChange(props.id, draggedItem.choice.id);
-    }
-
-    return {
-      dropped: draggedItem.id !== props.id
-    };
-  },
-  canDrop: function canDrop(props, monitor) {
-    var draggedItem = monitor.getItem();
-    return draggedItem.instanceId === props.instanceId;
-  }
-};
-var DropTile = (0, _drag.DropTarget)(DRAG_TYPE, tileTarget, function (connect, monitor) {
-  return {
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver(),
-    dragItem: monitor.getItem()
-  };
-})(connectedBlankContent);
-var tileSource = {
-  canDrag: function canDrag(props) {
-    return !props.disabled && !!props.choice;
-  },
-  beginDrag: function beginDrag(props) {
-    return {
-      id: props.id,
-      choice: props.choice,
-      instanceId: props.instanceId,
-      fromChoice: true
-    };
-  },
-  endDrag: function endDrag(props, monitor) {
-    // this will be null if it did not drop
-    var dropResult = monitor.getDropResult();
-
-    if (!dropResult || dropResult.dropped) {
-      var draggedItem = monitor.getItem();
-
-      if (draggedItem.fromChoice) {
-        props.onChange(props.id, undefined);
-      }
-    }
-  }
-};
-var DragDropTile = (0, _drag.DragSource)(DRAG_TYPE, tileSource, function (connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging()
-  };
-})(DropTile);
-var _default = DragDropTile;
-exports["default"] = _default;
-//# sourceMappingURL=blank.js.map

package/lib/components/blank.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/blank.jsx"],"names":["log","DRAG_TYPE","useStyles","content","border","color","primary","minWidth","touchAction","overflow","whiteSpace","chip","backgroundColor","background","text","fontSize","maxWidth","position","borderRadius","chipLabel","pointerEvents","display","padding","marginTop","marginBottom","hidden","opacity","dragged","left","correct","incorrect","over","parentOver","grey","BlankContent","updateDimensions","e","preventDefault","touchStartTimer","setTimeout","startDrag","props","connectDragSource","disabled","rootRef","state","height","width","imageElement","spanRef","querySelector","onload","handleImageLoad","handleElements","addEventListener","handleTouchStart","passive","prevProps","currentChoice","choice","prevChoice","JSON","stringify","setState","removeEventListener","style","offsetWidth","offsetHeight","widthWithPadding","heightWithPadding","responseAreaWidth","parseFloat","emptyResponseAreaWidth","responseAreaHeight","emptyResponseAreaHeight","adjustedWidth","adjustedHeight","prevState","parent","childNodes","forEach","elem","Element","HTMLDocument","setAttribute","isNaN","rootStyle","minHeight","classes","isOver","dragItem","draggedLabel","value","label","ref","ReactDOM","findDOMNode","innerHTML","addDraggableFalseAttributes","undefined","getRootDimensions","React","Component","defaultProps","propTypes","id","PropTypes","oneOfType","string","number","bool","duplicates","object","onChange","func","StyledBlankContent","connectedBlankContent","connectDropTarget","tileTarget","drop","monitor","draggedItem","getItem","instanceId","dropped","canDrop","DropTile","connect","dropTarget","tileSource","canDrag","beginDrag","fromChoice","endDrag","dropResult","getDropResult","DragDropTile","dragSource","isDragging"],"mappings":"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","sourcesContent":["import grey from '@material-ui/core/colors/grey';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\nimport { DragSource, DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport { color } from '../../../render-ui/src/index';\n\nconst log = debug('pie-lib:mask-markup:blank');\nexport const DRAG_TYPE = 'MaskBlank';\n\nconst useStyles = withStyles(() => ({\n  content: {\n    border: `solid 0px ${color.primary()}`,\n    minWidth: '200px',\n    touchAction: 'none',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap', // Prevent line wrapping\n  },\n  chip: {\n    backgroundColor: color.background(),\n    border: `2px dashed ${color.text()}`,\n    color: color.text(),\n    fontSize: 'inherit',\n    maxWidth: '374px',\n    position: 'relative',\n    borderRadius: '3px',\n  },\n  chipLabel: {\n    whiteSpace: 'normal',\n    // Added for touch devices, for image content.\n    // This will prevent the context menu from appearing and not allowing other interactions with the image.\n    // If interactions with the image in the token will be requested we should handle only the context Menu.\n    pointerEvents: 'none',\n    '& img': {\n      display: 'block',\n      padding: '2px 0',\n    },\n    // Remove default <p> margins to ensure consistent spacing across all wrapped content (p, span, div, math)\n    // Padding for top and bottom will instead be controlled by the container for consistent layout\n    // Ensures consistent behavior with pie-api-browser, where marginTop is already removed by a Bootstrap stylesheet\n    '& p': {\n      marginTop: '0',\n      marginBottom: '0',\n    },\n    '& mjx-frac': {\n      fontSize: '120% !important',\n    },\n  },\n  hidden: {\n    color: 'transparent',\n    opacity: 0,\n  },\n  dragged: {\n    position: 'absolute',\n    left: 16,\n    maxWidth: '60px',\n  },\n  correct: {\n    border: `solid 1px ${color.correct()}`,\n  },\n  incorrect: {\n    border: `solid 1px ${color.incorrect()}`,\n  },\n  over: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n  },\n  parentOver: {\n    border: `1px solid ${grey[500]}`,\n    backgroundColor: `${grey[300]}`,\n  },\n}));\n\nexport class BlankContent extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      height: 0,\n      width: 0,\n    };\n  }\n\n  handleImageLoad = () => {\n    this.updateDimensions();\n  };\n\n  handleElements() {\n    const imageElement = this.spanRef?.querySelector('img');\n\n    if (imageElement) {\n      imageElement.onload = this.handleImageLoad;\n    } else {\n      setTimeout(() => {\n        this.updateDimensions();\n      }, 300);\n    }\n  }\n\n  componentDidMount() {\n    this.handleElements();\n    if (this.rootRef) {\n      this.rootRef.addEventListener('touchstart', this.handleTouchStart, { passive: false });\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    renderMath(this.rootRef);\n    const { choice: currentChoice } = this.props;\n    const { choice: prevChoice } = prevProps;\n\n    if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {\n      if (!currentChoice) {\n        this.setState({\n          height: 0,\n          width: 0,\n        });\n        return;\n      }\n      this.handleElements();\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.rootRef) {\n      this.rootRef.removeEventListener('touchstart', this.handleTouchStart);\n    }\n  }\n\n  handleTouchStart = (e) => {\n    e.preventDefault();\n    this.touchStartTimer = setTimeout(() => {\n      this.startDrag();\n    }, 300); // Start drag after 300ms (touch and hold duration)\n  };\n\n  startDrag = () => {\n    const { connectDragSource, disabled } = this.props;\n    if (!disabled) {\n      connectDragSource(this.rootRef);\n    }\n  };\n\n  updateDimensions() {\n    if (this.spanRef && this.rootRef) {\n      // Temporarily set rootRef width to 'auto' for natural measurement\n      this.rootRef.style.width = 'auto';\n\n      // Get the natural dimensions of the content\n      const width = this.spanRef.offsetWidth || 0;\n      const height = this.spanRef.offsetHeight || 0;\n\n      const widthWithPadding = width + 24; // 12px padding on each side\n      const heightWithPadding = height + 24; // 12px padding on top and bottom\n\n      const responseAreaWidth = parseFloat(this.props.emptyResponseAreaWidth) || 0;\n      const responseAreaHeight = parseFloat(this.props.emptyResponseAreaHeight) || 0;\n\n      const adjustedWidth = widthWithPadding <= responseAreaWidth ? responseAreaWidth : widthWithPadding;\n      const adjustedHeight = heightWithPadding <= responseAreaHeight ? responseAreaHeight : heightWithPadding;\n\n      this.setState((prevState) => ({\n        width: adjustedWidth > responseAreaWidth ? adjustedWidth : prevState.width,\n        height: adjustedHeight > responseAreaHeight ? adjustedHeight : prevState.height,\n      }));\n\n      this.rootRef.style.width = `${adjustedWidth}px`;\n      this.rootRef.style.height = `${adjustedHeight}px`;\n    }\n  }\n\n  addDraggableFalseAttributes(parent) {\n    parent.childNodes.forEach((elem) => {\n      if (elem instanceof Element || elem instanceof HTMLDocument) {\n        elem.setAttribute('draggable', false);\n      }\n    });\n  }\n\n  getRootDimensions() {\n    // Handle potential non-numeric values\n    const responseAreaWidth = !isNaN(parseFloat(this.props.emptyResponseAreaWidth))\n      ? parseFloat(this.props.emptyResponseAreaWidth)\n      : 0;\n    const responseAreaHeight = !isNaN(parseFloat(this.props.emptyResponseAreaHeight))\n      ? parseFloat(this.props.emptyResponseAreaHeight)\n      : 0;\n\n    const rootStyle = {\n      height: this.state.height || responseAreaHeight,\n      width: this.state.width || responseAreaWidth,\n    };\n\n    // add minWidth, minHeight if width and height are not defined\n    // minWidth, minHeight will be also in model in the future\n    return {\n      ...rootStyle,\n      ...(responseAreaWidth ? {} : { minWidth: 90 }),\n      ...(responseAreaHeight ? {} : { minHeight: 32 }),\n    };\n  }\n\n  render() {\n    const { disabled, choice, classes, isOver, dragItem, correct } = this.props;\n    const draggedLabel = dragItem && isOver && dragItem.choice.value;\n    const label = choice && choice.value;\n\n    return (\n      // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.\n      <Chip\n        clickable={false}\n        disabled={true}\n        ref={(ref) => {\n          //eslint-disable-next-line\n          this.rootRef = ReactDOM.findDOMNode(ref);\n        }}\n        component=\"span\"\n        label={\n          <React.Fragment>\n            <span\n              className={classnames(classes.chipLabel, isOver && classes.over, {\n                [classes.hidden]: draggedLabel,\n              })}\n              ref={(ref) => {\n                if (ref) {\n                  //eslint-disable-next-line\n                  this.spanRef = ReactDOM.findDOMNode(ref);\n                  ref.innerHTML = label || '';\n                  this.addDraggableFalseAttributes(ref);\n                }\n              }}\n            >\n              {' '}\n            </span>\n            {draggedLabel && (\n              <span\n                className={classnames(classes.chipLabel, isOver && classes.over, classes.dragged)}\n                ref={(ref) => {\n                  if (ref) {\n                    //eslint-disable-next-line\n                    this.spanRef = ReactDOM.findDOMNode(ref);\n                    ref.innerHTML = draggedLabel || '';\n                    this.addDraggableFalseAttributes(ref);\n                  }\n                }}\n              >\n                {' '}\n              </span>\n            )}\n          </React.Fragment>\n        }\n        className={classnames(classes.chip, isOver && classes.over, isOver && classes.parentOver, {\n          [classes.correct]: correct !== undefined && correct,\n          [classes.incorrect]: correct !== undefined && !correct,\n        })}\n        variant={disabled ? 'outlined' : undefined}\n        style={{\n          ...this.getRootDimensions(),\n        }}\n      />\n    );\n  }\n}\n\nBlankContent.defaultProps = {\n  emptyResponseAreaWidth: 0,\n  emptyResponseAreaHeight: 0,\n};\n\nBlankContent.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  disabled: PropTypes.bool,\n  duplicates: PropTypes.bool,\n  choice: PropTypes.object,\n  classes: PropTypes.object,\n  isOver: PropTypes.bool,\n  dragItem: PropTypes.object,\n  correct: PropTypes.bool,\n  onChange: PropTypes.func,\n  emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nconst StyledBlankContent = useStyles(BlankContent);\n\nconst connectedBlankContent = useStyles(({ connectDragSource, connectDropTarget, ...props }) => {\n  const { classes, isOver } = props;\n\n  return connectDropTarget(\n    connectDragSource(\n      <span className={classnames(classes.content, isOver && classes.over)}>\n        <StyledBlankContent {...props} />\n      </span>,\n    ),\n  );\n});\n\nconst tileTarget = {\n  drop(props, monitor) {\n    const draggedItem = monitor.getItem();\n\n    log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);\n\n    if (draggedItem.id !== props.id) {\n      props.onChange(props.id, draggedItem.choice.id);\n    }\n\n    return {\n      dropped: draggedItem.id !== props.id,\n    };\n  },\n  canDrop(props, monitor) {\n    const draggedItem = monitor.getItem();\n\n    return draggedItem.instanceId === props.instanceId;\n  },\n};\n\nconst DropTile = DropTarget(DRAG_TYPE, tileTarget, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n  dragItem: monitor.getItem(),\n}))(connectedBlankContent);\n\nconst tileSource = {\n  canDrag(props) {\n    return !props.disabled && !!props.choice;\n  },\n  beginDrag(props) {\n    return {\n      id: props.id,\n      choice: props.choice,\n      instanceId: props.instanceId,\n      fromChoice: true,\n    };\n  },\n  endDrag(props, monitor) {\n    // this will be null if it did not drop\n    const dropResult = monitor.getDropResult();\n\n    if (!dropResult || dropResult.dropped) {\n      const draggedItem = monitor.getItem();\n\n      if (draggedItem.fromChoice) {\n        props.onChange(props.id, undefined);\n      }\n    }\n  },\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(DropTile);\n\nexport default DragDropTile;\n"],"file":"blank.js"}

package/lib/components/correct-input.js

@@ -1,118 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _OutlinedInput = _interopRequireDefault(require("@material-ui/core/OutlinedInput"));
-
-var _classnames3 = _interopRequireDefault(require("classnames"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _index = require("./../shared/index");
-
-var _excluded = ["correct", "charactersLimit", "classes", "disabled", "isBox", "isConstructedResponse", "width", "spellCheck"];
-
-var correctStyle = function correctStyle(color) {
-  return {
-    borderColor: "".concat(color, " !important")
-  };
-};
-
-var _default = (0, _styles.withStyles)(function () {
-  return {
-    input: {
-      color: _index.color.text(),
-      backgroundColor: _index.color.background(),
-      borderRadius: '4px !important',
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      padding: '10px 20px 10px 10px',
-      '&:disabled': {
-        opacity: 0.8,
-        cursor: 'not-allowed !important'
-      },
-      '&:hover': {
-        borderColor: _index.color.primary(),
-        '&:disabled': {
-          borderColor: 'initial'
-        }
-      },
-      '&:focus': {
-        borderColor: _index.color.primaryDark()
-      }
-    },
-    crInput: {
-      padding: '8px !important'
-    },
-    correct: correctStyle(_index.color.correct()),
-    incorrect: correctStyle(_index.color.incorrect()),
-    box: {
-      fontSize: 'inherit',
-      display: 'inline-block',
-      verticalAlign: 'middle'
-    },
-    outlinedInput: {
-      padding: '2px',
-      borderRadius: '4px',
-      '& fieldset': {
-        border: 0
-      }
-    },
-    notchedOutline: {
-      borderColor: _index.color.correct()
-    }
-  };
-})(function (props) {
-  var _classnames, _classnames2;
-
-  var correct = props.correct,
-      charactersLimit = props.charactersLimit,
-      classes = props.classes,
-      disabled = props.disabled,
-      isBox = props.isBox,
-      isConstructedResponse = props.isConstructedResponse,
-      width = props.width,
-      spellCheck = props.spellCheck,
-      rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var label = typeof correct === 'boolean' ? correct ? 'correct' : 'incorrect' : undefined;
-  var inputProps = charactersLimit ? {
-    maxLength: charactersLimit,
-    'aria-label': 'Enter answer'
-  } : {
-    'aria-label': 'Enter answer'
-  };
-
-  if (width) {
-    inputProps.style = {
-      width: "".concat(width + Math.round(width / 10) + 1, "ch") // added some extra space for capital letters
-
-    };
-  }
-
-  return /*#__PURE__*/_react["default"].createElement(_OutlinedInput["default"], (0, _extends2["default"])({
-    className: (0, _classnames3["default"])((_classnames = {}, (0, _defineProperty2["default"])(_classnames, classes.disabledInput, disabled), (0, _defineProperty2["default"])(_classnames, classes.box, isBox), (0, _defineProperty2["default"])(_classnames, classes.outlinedInput, true), _classnames)),
-    classes: {
-      input: (0, _classnames3["default"])((_classnames2 = {}, (0, _defineProperty2["default"])(_classnames2, classes.input, true), (0, _defineProperty2["default"])(_classnames2, classes[label], label), (0, _defineProperty2["default"])(_classnames2, classes.crInput, isConstructedResponse), _classnames2))
-    },
-    inputProps: inputProps,
-    labelWidth: 0,
-    disabled: disabled,
-    spellCheck: spellCheck
-  }, rest));
-});
-
-exports["default"] = _default;
-//# sourceMappingURL=correct-input.js.map

package/lib/components/correct-input.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/correct-input.jsx"],"names":["correctStyle","color","borderColor","input","text","backgroundColor","background","borderRadius","borderWidth","borderStyle","padding","opacity","cursor","primary","primaryDark","crInput","correct","incorrect","box","fontSize","display","verticalAlign","outlinedInput","border","notchedOutline","props","charactersLimit","classes","disabled","isBox","isConstructedResponse","width","spellCheck","rest","label","undefined","inputProps","maxLength","style","Math","round","disabledInput"],"mappings":"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","sourcesContent":["import React from 'react';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport classnames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '../../../render-ui/src/index';\n\nconst correctStyle = (color) => ({\n  borderColor: `${color} !important`,\n});\n\nexport default withStyles(() => ({\n  input: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    borderRadius: '4px !important',\n    borderWidth: '1px',\n    borderStyle: 'solid',\n    padding: '10px 20px 10px 10px',\n    '&:disabled': {\n      opacity: 0.8,\n      cursor: 'not-allowed !important',\n    },\n    '&:hover': {\n      borderColor: color.primary(),\n      '&:disabled': {\n        borderColor: 'initial',\n      },\n    },\n    '&:focus': {\n      borderColor: color.primaryDark(),\n    },\n  },\n  crInput: {\n    padding: '8px !important',\n  },\n  correct: correctStyle(color.correct()),\n  incorrect: correctStyle(color.incorrect()),\n  box: {\n    fontSize: 'inherit',\n    display: 'inline-block',\n    verticalAlign: 'middle',\n  },\n  outlinedInput: {\n    padding: '2px',\n    borderRadius: '4px',\n    '& fieldset': {\n      border: 0,\n    },\n  },\n  notchedOutline: {\n    borderColor: color.correct(),\n  },\n}))((props) => {\n  const {\n    correct,\n    charactersLimit,\n    classes,\n    disabled,\n    isBox,\n    isConstructedResponse,\n    width,\n    spellCheck,\n    ...rest\n  } = props;\n\n  const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;\n  const inputProps = charactersLimit\n    ? { maxLength: charactersLimit, 'aria-label': 'Enter answer' }\n    : { 'aria-label': 'Enter answer' };\n\n  if (width) {\n    inputProps.style = {\n      width: `${width + Math.round(width / 10) + 1}ch`, // added some extra space for capital letters\n    };\n  }\n\n  return (\n    <OutlinedInput\n      className={classnames({\n        [classes.disabledInput]: disabled,\n        [classes.box]: isBox,\n        [classes.outlinedInput]: true,\n      })}\n      classes={{\n        input: classnames({\n          [classes.input]: true,\n          [classes[label]]: label,\n          [classes.crInput]: isConstructedResponse,\n        }),\n      }}\n      inputProps={inputProps}\n      labelWidth={0}\n      disabled={disabled}\n      spellCheck={spellCheck}\n      {...rest}\n    />\n  );\n});\n"],"file":"correct-input.js"}