@pie-lib/mask-markup 1.13.25-next.3 → 1.13.26-next.8

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.13.25](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.24...@pie-lib/mask-markup@1.13.25) (2023-05-01)
+
+
+### Bug Fixes
+
+* **drag-in-the-blank:** prevent image interaction in choice - this is creating difficulties for drag choices on touch devices PD-2770 ([aea5536](https://github.com/pie-framework/pie-lib/commit/aea5536c46b96b4c89f294d4cc3337c833bf87ee))
+
+
+
+
+
 ## [1.13.24](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.23...@pie-lib/mask-markup@1.13.24) (2023-04-25)
 
 **Note:** Version bump only for package @pie-lib/mask-markup

package/lib/choices/choice.js

@@ -66,7 +66,8 @@ var BlankContentComp = /*#__PURE__*/function (_React$Component) {
           connectDragSource = _this$props.connectDragSource,
           choice = _this$props.choice,
           classes = _this$props.classes,
-          disabled = _this$props.disabled;
+          disabled = _this$props.disabled; // 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.
+
       return connectDragSource( /*#__PURE__*/_react["default"].createElement("span", {
         className: (0, _classnames["default"])(classes.choice, disabled && classes.disabled)
       }, /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
@@ -111,7 +112,11 @@ var BlankContent = (0, _styles.withStyles)(function (theme) {
       fontSize: 'inherit',
       whiteSpace: 'pre-wrap',
       maxWidth: '374px',
-      margin: theme.spacing.unit / 2
+      margin: theme.spacing.unit / 2,
+      // 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'
     },
     chipLabel: {
       whiteSpace: 'pre-wrap',

package/lib/choices/choice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/choices/choice.jsx"],"names":["DRAG_TYPE","BlankContentComp","rootRef","props","connectDragSource","choice","classes","disabled","ref","ReactDOM","findDOMNode","chip","chipLabel","innerHTML","value","undefined","React","Component","PropTypes","bool","object","func","BlankContent","theme","border","palette","primary","main","alignItems","display","height","minHeight","fontSize","whiteSpace","maxWidth","margin","spacing","unit","padding","tileSource","canDrag","beginDrag","instanceId","DragDropTile","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport const DRAG_TYPE = 'MaskBlank';\n\nclass BlankContentComp extends React.Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    choice: PropTypes.object,\n    classes: PropTypes.object,\n    connectDragSource: PropTypes.func,\n  };\n\n  componentDidUpdate() {\n    renderMath(this.rootRef);\n  }\n\n  render() {\n    const { connectDragSource, choice, classes, disabled } = this.props;\n\n    return connectDragSource(\n      <span className={classnames(classes.choice, disabled && classes.disabled)}>\n        <Chip\n          clickable={false}\n          disabled={true}\n          ref={(ref) => {\n            //eslint-disable-next-line\n            this.rootRef = ReactDOM.findDOMNode(ref);\n          }}\n          className={classes.chip}\n          label={\n            <span\n              className={classes.chipLabel}\n              ref={(ref) => {\n                if (ref) {\n                  ref.innerHTML = choice.value || ' ';\n                }\n              }}\n            >\n              {' '}\n            </span>\n          }\n          variant={disabled ? 'outlined' : undefined}\n        />\n      </span>,\n      {},\n    );\n  }\n}\n\nexport const BlankContent = withStyles((theme) => ({\n  choice: {\n    border: `solid 0px ${theme.palette.primary.main}`,\n  },\n  chip: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    height: 'initial',\n    minHeight: '32px',\n    fontSize: 'inherit',\n    whiteSpace: 'pre-wrap',\n    maxWidth: '374px',\n    margin: theme.spacing.unit / 2,\n  },\n  chipLabel: {\n    whiteSpace: 'pre-wrap',\n    '& img': {\n      display: 'block',\n      padding: '2px 0',\n    },\n  },\n  disabled: {},\n}))(BlankContentComp);\n\nconst tileSource = {\n  canDrag(props) {\n    return !props.disabled;\n  },\n  beginDrag(props) {\n    return {\n      choice: props.choice,\n      instanceId: props.instanceId,\n    };\n  },\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(BlankContent);\n\nexport default DragDropTile;\n"],"file":"choice.js"}
+{"version":3,"sources":["../../src/choices/choice.jsx"],"names":["DRAG_TYPE","BlankContentComp","rootRef","props","connectDragSource","choice","classes","disabled","ref","ReactDOM","findDOMNode","chip","chipLabel","innerHTML","value","undefined","React","Component","PropTypes","bool","object","func","BlankContent","theme","border","palette","primary","main","alignItems","display","height","minHeight","fontSize","whiteSpace","maxWidth","margin","spacing","unit","pointerEvents","padding","tileSource","canDrag","beginDrag","instanceId","DragDropTile","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport const DRAG_TYPE = 'MaskBlank';\n\nclass BlankContentComp extends React.Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    choice: PropTypes.object,\n    classes: PropTypes.object,\n    connectDragSource: PropTypes.func,\n  };\n\n  componentDidUpdate() {\n    renderMath(this.rootRef);\n  }\n\n  render() {\n    const { connectDragSource, choice, classes, disabled } = this.props;\n\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\n    return connectDragSource(\n      <span className={classnames(classes.choice, disabled && classes.disabled)}>\n        <Chip\n          clickable={false}\n          disabled={true}\n          ref={(ref) => {\n            //eslint-disable-next-line\n            this.rootRef = ReactDOM.findDOMNode(ref);\n          }}\n          className={classes.chip}\n          label={\n            <span\n              className={classes.chipLabel}\n              ref={(ref) => {\n                if (ref) {\n                  ref.innerHTML = choice.value || ' ';\n                }\n              }}\n            >\n              {' '}\n            </span>\n          }\n          variant={disabled ? 'outlined' : undefined}\n        />\n      </span>,\n      {},\n    );\n  }\n}\n\nexport const BlankContent = withStyles((theme) => ({\n  choice: {\n    border: `solid 0px ${theme.palette.primary.main}`,\n  },\n  chip: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    height: 'initial',\n    minHeight: '32px',\n    fontSize: 'inherit',\n    whiteSpace: 'pre-wrap',\n    maxWidth: '374px',\n    margin: theme.spacing.unit / 2,\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  },\n  chipLabel: {\n    whiteSpace: 'pre-wrap',\n    '& img': {\n      display: 'block',\n      padding: '2px 0',\n    },\n  },\n  disabled: {},\n}))(BlankContentComp);\n\nconst tileSource = {\n  canDrag(props) {\n    return !props.disabled;\n  },\n  beginDrag(props) {\n    return {\n      choice: props.choice,\n      instanceId: props.instanceId,\n    };\n  },\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(BlankContent);\n\nexport default DragDropTile;\n"],"file":"choice.js"}

package/lib/components/blank.js

@@ -72,6 +72,10 @@ var useStyles = (0, _styles.withStyles)(function () {
     },
     chipLabel: {
       whiteSpace: 'pre-wrap',
+      // 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'
@@ -163,46 +167,50 @@ var BlankContent = /*#__PURE__*/function (_React$Component) {
           correct = _this$props.correct;
       var draggedLabel = dragItem && isOver && dragItem.choice.value;
       var label = choice && choice.value;
-      return /*#__PURE__*/_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);
+      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);
+          }, ' '), 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, (_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.state.height ? {
+            height: this.state.height
+          } : {}),
+          classes: {
+            label: isOver && classes.over
           }
-        }, ' ')),
-        className: (0, _classnames3["default"])(classes.chip, isOver && classes.over, (_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.state.height ? {
-          height: this.state.height
-        } : {}),
-        classes: {
-          label: isOver && classes.over
-        }
-      });
+        })
+      );
     }
   }]);
   return BlankContent;

package/lib/components/blank.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/blank.jsx"],"names":["log","DRAG_TYPE","useStyles","content","border","color","primary","minWidth","touchAction","overflow","chip","fontSize","minHeight","height","maxWidth","position","chipLabel","whiteSpace","display","padding","hidden","opacity","dragged","left","correct","incorrect","over","BlankContent","state","prevProps","rootRef","currentChoice","props","choice","prevChoice","JSON","stringify","setState","setTimeout","spanRef","offsetHeight","parent","childNodes","forEach","elem","Element","HTMLDocument","setAttribute","disabled","classes","isOver","dragItem","draggedLabel","value","label","ref","ReactDOM","findDOMNode","innerHTML","addDraggableFalseAttributes","undefined","React","Component","id","PropTypes","oneOfType","string","number","bool","duplicates","object","onChange","func","StyledBlankContent","connectedBlankContent","connectDragSource","connectDropTarget","tileTarget","drop","monitor","draggedItem","getItem","instanceId","dropped","canDrop","DropTile","connect","dropTarget","tileSource","canDrag","beginDrag","fromChoice","endDrag","dropResult","getDropResult","DragDropTile","dragSource","isDragging"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AACA,IAAMA,GAAG,GAAG,uBAAM,2BAAN,CAAZ;AACO,IAAMC,SAAS,GAAG,WAAlB;;AAEP,IAAMC,SAAS,GAAG,wBAAW;AAAA,SAAO;AAClCC,IAAAA,OAAO,EAAE;AACPC,MAAAA,MAAM,sBAAeC,gBAAMC,OAAN,EAAf,CADC;AAEPC,MAAAA,QAAQ,EAAE,OAFH;AAGPC,MAAAA,WAAW,EAAE,MAHN;AAIPC,MAAAA,QAAQ,EAAE;AAJH,KADyB;AAOlCC,IAAAA,IAAI,EAAE;AACJH,MAAAA,QAAQ,EAAE,MADN;AAEJI,MAAAA,QAAQ,EAAE,SAFN;AAGJC,MAAAA,SAAS,EAAE,MAHP;AAIJC,MAAAA,MAAM,EAAE,MAJJ;AAKJC,MAAAA,QAAQ,EAAE,OALN;AAMJC,MAAAA,QAAQ,EAAE;AANN,KAP4B;AAelCC,IAAAA,SAAS,EAAE;AACTC,MAAAA,UAAU,EAAE,UADH;AAET,eAAS;AACPC,QAAAA,OAAO,EAAE,OADF;AAEPC,QAAAA,OAAO,EAAE;AAFF;AAFA,KAfuB;AAsBlCC,IAAAA,MAAM,EAAE;AACNf,MAAAA,KAAK,EAAE,aADD;AAENgB,MAAAA,OAAO,EAAE;AAFH,KAtB0B;AA0BlCC,IAAAA,OAAO,EAAE;AACPP,MAAAA,QAAQ,EAAE,UADH;AAEPQ,MAAAA,IAAI,EAAE,EAFC;AAGPT,MAAAA,QAAQ,EAAE;AAHH,KA1ByB;AA+BlCU,IAAAA,OAAO,EAAE;AACPpB,MAAAA,MAAM,sBAAeC,gBAAMmB,OAAN,EAAf;AADC,KA/ByB;AAkClCC,IAAAA,SAAS,EAAE;AACTrB,MAAAA,MAAM,sBAAeC,gBAAMoB,SAAN,EAAf;AADG,KAlCuB;AAqClCC,IAAAA,IAAI,EAAE;AACJT,MAAAA,UAAU,EAAE,QADR;AAEJR,MAAAA,QAAQ,EAAE;AAFN;AArC4B,GAAP;AAAA,CAAX,CAAlB;;IA2CakB,Y;;;;;AAaX,0BAAc;AAAA;;AAAA;AACZ;AACA,UAAKC,KAAL,GAAa;AACXf,MAAAA,MAAM,EAAE;AADG,KAAb;AAFY;AAKb;;;;WAED,4BAAmBgB,SAAnB,EAA8B;AAAA;;AAC5B,qCAAW,KAAKC,OAAhB;AACA,UAAgBC,aAAhB,GAAkC,KAAKC,KAAvC,CAAQC,MAAR;AACA,UAAgBC,UAAhB,GAA+BL,SAA/B,CAAQI,MAAR;;AAEA,UAAIE,IAAI,CAACC,SAAL,CAAeL,aAAf,MAAkCI,IAAI,CAACC,SAAL,CAAeF,UAAf,CAAtC,EAAkE;AAChE,YAAI,CAACH,aAAL,EAAoB;AAClB,eAAKM,QAAL,CAAc;AACZxB,YAAAA,MAAM,EAAE;AADI,WAAd;AAGA;AACD;;AACDyB,QAAAA,UAAU,CAAC,YAAM;AACf,UAAA,MAAI,CAACD,QAAL,CAAc;AACZxB,YAAAA,MAAM,EAAE,MAAI,CAAC0B,OAAL,CAAaC;AADT,WAAd;AAGD,SAJS,EAIP,GAJO,CAAV;AAKD;AACF;;;WAED,qCAA4BC,MAA5B,EAAoC;AAClCA,MAAAA,MAAM,CAACC,UAAP,CAAkBC,OAAlB,CAA0B,UAACC,IAAD,EAAU;AAClC,YAAIA,IAAI,YAAYC,OAAhB,IAA2BD,IAAI,YAAYE,YAA/C,EAA6D;AAC3DF,UAAAA,IAAI,CAACG,YAAL,CAAkB,WAAlB,EAA+B,KAA/B;AACD;AACF,OAJD;AAKD;;;WAED,kBAAS;AAAA;AAAA;;AACP,wBAAiE,KAAKf,KAAtE;AAAA,UAAQgB,QAAR,eAAQA,QAAR;AAAA,UAAkBf,MAAlB,eAAkBA,MAAlB;AAAA,UAA0BgB,OAA1B,eAA0BA,OAA1B;AAAA,UAAmCC,MAAnC,eAAmCA,MAAnC;AAAA,UAA2CC,QAA3C,eAA2CA,QAA3C;AAAA,UAAqD3B,OAArD,eAAqDA,OAArD;AACA,UAAM4B,YAAY,GAAGD,QAAQ,IAAID,MAAZ,IAAsBC,QAAQ,CAAClB,MAAT,CAAgBoB,KAA3D;AACA,UAAMC,KAAK,GAAGrB,MAAM,IAAIA,MAAM,CAACoB,KAA/B;AAEA,0BACE,gCAAC,gBAAD;AACE,QAAA,SAAS,EAAE,KADb;AAEE,QAAA,QAAQ,EAAE,IAFZ;AAGE,QAAA,GAAG,EAAE,aAACE,KAAD,EAAS;AACZ;AACA,UAAA,MAAI,CAACzB,OAAL,GAAe0B,qBAASC,WAAT,CAAqBF,KAArB,CAAf;AACD,SANH;AAOE,QAAA,SAAS,EAAC,MAPZ;AAQE,QAAA,KAAK,eACH,gCAAC,iBAAD,CAAO,QAAP,qBACE;AACE,UAAA,SAAS,EAAE,6BAAWN,OAAO,CAACjC,SAAnB,EAA8BkC,MAAM,IAAID,OAAO,CAACvB,IAAhD,uCACRuB,OAAO,CAAC7B,MADA,EACSgC,YADT,EADb;AAIE,UAAA,GAAG,EAAE,aAACG,IAAD,EAAS;AACZ,gBAAIA,IAAJ,EAAS;AACP;AACA,cAAA,MAAI,CAAChB,OAAL,GAAeiB,qBAASC,WAAT,CAAqBF,IAArB,CAAf;AACAA,cAAAA,IAAG,CAACG,SAAJ,GAAgBJ,KAAK,IAAI,EAAzB;;AACA,cAAA,MAAI,CAACK,2BAAL,CAAiCJ,IAAjC;AACD;AACF;AAXH,WAaG,GAbH,CADF,EAgBGH,YAAY,iBACX;AACE,UAAA,SAAS,EAAE,6BAAWH,OAAO,CAACjC,SAAnB,EAA8BkC,MAAM,IAAID,OAAO,CAACvB,IAAhD,EAAsDuB,OAAO,CAAC3B,OAA9D,CADb;AAEE,UAAA,GAAG,EAAE,aAACiC,KAAD,EAAS;AACZ,gBAAIA,KAAJ,EAAS;AACP;AACA,cAAA,MAAI,CAAChB,OAAL,GAAeiB,qBAASC,WAAT,CAAqBF,KAArB,CAAf;AACAA,cAAAA,KAAG,CAACG,SAAJ,GAAgBN,YAAY,IAAI,EAAhC;;AACA,cAAA,MAAI,CAACO,2BAAL,CAAiCJ,KAAjC;AACD;AACF;AATH,WAWG,GAXH,CAjBJ,CATJ;AA0CE,QAAA,SAAS,EAAE,6BAAWN,OAAO,CAACvC,IAAnB,EAAyBwC,MAAM,IAAID,OAAO,CAACvB,IAA3C,qEACRuB,OAAO,CAACzB,OADA,EACUA,OAAO,KAAKoC,SAAZ,IAAyBpC,OADnC,kDAERyB,OAAO,CAACxB,SAFA,EAEYD,OAAO,KAAKoC,SAAZ,IAAyB,CAACpC,OAFtC,iBA1Cb;AA8CE,QAAA,OAAO,EAAEwB,QAAQ,GAAG,UAAH,GAAgBY,SA9CnC;AA+CE,QAAA,KAAK,oBACC,KAAKhC,KAAL,CAAWf,MAAX,GAAoB;AAAEA,UAAAA,MAAM,EAAE,KAAKe,KAAL,CAAWf;AAArB,SAApB,GAAoD,EADrD,CA/CP;AAkDE,QAAA,OAAO,EAAE;AACPyC,UAAAA,KAAK,EAAEJ,MAAM,IAAID,OAAO,CAACvB;AADlB;AAlDX,QADF;AAwDD;;;EA7G+BmC,kBAAMC,S;;;iCAA3BnC,Y,eACQ;AACjBoC,EAAAA,EAAE,EAAEC,sBAAUC,SAAV,CAAoB,CAACD,sBAAUE,MAAX,EAAmBF,sBAAUG,MAA7B,CAApB,CADa;AAEjBnB,EAAAA,QAAQ,EAAEgB,sBAAUI,IAFH;AAGjBC,EAAAA,UAAU,EAAEL,sBAAUI,IAHL;AAIjBnC,EAAAA,MAAM,EAAE+B,sBAAUM,MAJD;AAKjBrB,EAAAA,OAAO,EAAEe,sBAAUM,MALF;AAMjBpB,EAAAA,MAAM,EAAEc,sBAAUI,IAND;AAOjBjB,EAAAA,QAAQ,EAAEa,sBAAUM,MAPH;AAQjB9C,EAAAA,OAAO,EAAEwC,sBAAUI,IARF;AASjBG,EAAAA,QAAQ,EAAEP,sBAAUQ;AATH,C;AA+GrB,IAAMC,kBAAkB,GAAGvE,SAAS,CAACyB,YAAD,CAApC;AAEA,IAAM+C,qBAAqB,GAAGxE,SAAS,CAAC,iBAAwD;AAAA,MAArDyE,iBAAqD,SAArDA,iBAAqD;AAAA,MAAlCC,iBAAkC,SAAlCA,iBAAkC;AAAA,MAAZ5C,KAAY;AAC9F,MAAQiB,OAAR,GAA4BjB,KAA5B,CAAQiB,OAAR;AAAA,MAAiBC,MAAjB,GAA4BlB,KAA5B,CAAiBkB,MAAjB;AAEA,SAAO0B,iBAAiB,CACtBD,iBAAiB,eACf;AAAM,IAAA,SAAS,EAAE,6BAAW1B,OAAO,CAAC9C,OAAnB,EAA4B+C,MAAM,IAAID,OAAO,CAACvB,IAA9C;AAAjB,kBACE,gCAAC,kBAAD,EAAwBM,KAAxB,CADF,CADe,CADK,CAAxB;AAOD,CAVsC,CAAvC;AAYA,IAAM6C,UAAU,GAAG;AACjBC,EAAAA,IADiB,gBACZ9C,KADY,EACL+C,OADK,EACI;AACnB,QAAMC,WAAW,GAAGD,OAAO,CAACE,OAAR,EAApB;AAEAjF,IAAAA,GAAG,CAAC,kBAAD,EAAqBgC,KAAK,CAACkD,UAA3B,EAAuC,yBAAvC,EAAkEF,WAAW,CAACE,UAA9E,CAAH;;AAEA,QAAIF,WAAW,CAACjB,EAAZ,KAAmB/B,KAAK,CAAC+B,EAA7B,EAAiC;AAC/B/B,MAAAA,KAAK,CAACuC,QAAN,CAAevC,KAAK,CAAC+B,EAArB,EAAyBiB,WAAW,CAAC/C,MAAZ,CAAmB8B,EAA5C;AACD;;AAED,WAAO;AACLoB,MAAAA,OAAO,EAAEH,WAAW,CAACjB,EAAZ,KAAmB/B,KAAK,CAAC+B;AAD7B,KAAP;AAGD,GAbgB;AAcjBqB,EAAAA,OAdiB,mBAcTpD,KAdS,EAcF+C,OAdE,EAcO;AACtB,QAAMC,WAAW,GAAGD,OAAO,CAACE,OAAR,EAApB;AAEA,WAAOD,WAAW,CAACE,UAAZ,KAA2BlD,KAAK,CAACkD,UAAxC;AACD;AAlBgB,CAAnB;AAqBA,IAAMG,QAAQ,GAAG,sBAAWpF,SAAX,EAAsB4E,UAAtB,EAAkC,UAACS,OAAD,EAAUP,OAAV;AAAA,SAAuB;AACxEH,IAAAA,iBAAiB,EAAEU,OAAO,CAACC,UAAR,EADqD;AAExErC,IAAAA,MAAM,EAAE6B,OAAO,CAAC7B,MAAR,EAFgE;AAGxEC,IAAAA,QAAQ,EAAE4B,OAAO,CAACE,OAAR;AAH8D,GAAvB;AAAA,CAAlC,EAIbP,qBAJa,CAAjB;AAMA,IAAMc,UAAU,GAAG;AACjBC,EAAAA,OADiB,mBACTzD,KADS,EACF;AACb,WAAO,CAACA,KAAK,CAACgB,QAAP,IAAmB,CAAC,CAAChB,KAAK,CAACC,MAAlC;AACD,GAHgB;AAIjByD,EAAAA,SAJiB,qBAIP1D,KAJO,EAIA;AACf,WAAO;AACL+B,MAAAA,EAAE,EAAE/B,KAAK,CAAC+B,EADL;AAEL9B,MAAAA,MAAM,EAAED,KAAK,CAACC,MAFT;AAGLiD,MAAAA,UAAU,EAAElD,KAAK,CAACkD,UAHb;AAILS,MAAAA,UAAU,EAAE;AAJP,KAAP;AAMD,GAXgB;AAYjBC,EAAAA,OAZiB,mBAYT5D,KAZS,EAYF+C,OAZE,EAYO;AACtB;AACA,QAAMc,UAAU,GAAGd,OAAO,CAACe,aAAR,EAAnB;;AAEA,QAAI,CAACD,UAAD,IAAgBA,UAAU,CAACV,OAAX,IAAsB,CAACnD,KAAK,CAACqC,UAAjD,EAA8D;AAC5D,UAAMW,WAAW,GAAGD,OAAO,CAACE,OAAR,EAApB;;AAEA,UAAID,WAAW,CAACW,UAAhB,EAA4B;AAC1B3D,QAAAA,KAAK,CAACuC,QAAN,CAAevC,KAAK,CAAC+B,EAArB,EAAyBH,SAAzB;AACD;AACF;AACF;AAvBgB,CAAnB;AA0BA,IAAMmC,YAAY,GAAG,sBAAW9F,SAAX,EAAsBuF,UAAtB,EAAkC,UAACF,OAAD,EAAUP,OAAV;AAAA,SAAuB;AAC5EJ,IAAAA,iBAAiB,EAAEW,OAAO,CAACU,UAAR,EADyD;AAE5EC,IAAAA,UAAU,EAAElB,OAAO,CAACkB,UAAR;AAFgE,GAAvB;AAAA,CAAlC,EAGjBZ,QAHiB,CAArB;eAKeU,Y","sourcesContent":["import 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 '@pie-lib/render-ui';\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  },\n  chip: {\n    minWidth: '90px',\n    fontSize: 'inherit',\n    minHeight: '32px',\n    height: 'auto',\n    maxWidth: '374px',\n    position: 'relative',\n  },\n  chipLabel: {\n    whiteSpace: 'pre-wrap',\n    '& img': {\n      display: 'block',\n      padding: '2px 0',\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}));\n\nexport class BlankContent extends React.Component {\n  static 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  };\n\n  constructor() {\n    super();\n    this.state = {\n      height: 0,\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        });\n        return;\n      }\n      setTimeout(() => {\n        this.setState({\n          height: this.spanRef.offsetHeight,\n        });\n      }, 300);\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  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      <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, {\n          [classes.correct]: correct !== undefined && correct,\n          [classes.incorrect]: correct !== undefined && !correct,\n        })}\n        variant={disabled ? 'outlined' : undefined}\n        style={{\n          ...(this.state.height ? { height: this.state.height } : {}),\n        }}\n        classes={{\n          label: isOver && classes.over,\n        }}\n      />\n    );\n  }\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 && !props.duplicates)) {\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"}
+{"version":3,"sources":["../../src/components/blank.jsx"],"names":["log","DRAG_TYPE","useStyles","content","border","color","primary","minWidth","touchAction","overflow","chip","fontSize","minHeight","height","maxWidth","position","chipLabel","whiteSpace","pointerEvents","display","padding","hidden","opacity","dragged","left","correct","incorrect","over","BlankContent","state","prevProps","rootRef","currentChoice","props","choice","prevChoice","JSON","stringify","setState","setTimeout","spanRef","offsetHeight","parent","childNodes","forEach","elem","Element","HTMLDocument","setAttribute","disabled","classes","isOver","dragItem","draggedLabel","value","label","ref","ReactDOM","findDOMNode","innerHTML","addDraggableFalseAttributes","undefined","React","Component","id","PropTypes","oneOfType","string","number","bool","duplicates","object","onChange","func","StyledBlankContent","connectedBlankContent","connectDragSource","connectDropTarget","tileTarget","drop","monitor","draggedItem","getItem","instanceId","dropped","canDrop","DropTile","connect","dropTarget","tileSource","canDrag","beginDrag","fromChoice","endDrag","dropResult","getDropResult","DragDropTile","dragSource","isDragging"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AACA,IAAMA,GAAG,GAAG,uBAAM,2BAAN,CAAZ;AACO,IAAMC,SAAS,GAAG,WAAlB;;AAEP,IAAMC,SAAS,GAAG,wBAAW;AAAA,SAAO;AAClCC,IAAAA,OAAO,EAAE;AACPC,MAAAA,MAAM,sBAAeC,gBAAMC,OAAN,EAAf,CADC;AAEPC,MAAAA,QAAQ,EAAE,OAFH;AAGPC,MAAAA,WAAW,EAAE,MAHN;AAIPC,MAAAA,QAAQ,EAAE;AAJH,KADyB;AAOlCC,IAAAA,IAAI,EAAE;AACJH,MAAAA,QAAQ,EAAE,MADN;AAEJI,MAAAA,QAAQ,EAAE,SAFN;AAGJC,MAAAA,SAAS,EAAE,MAHP;AAIJC,MAAAA,MAAM,EAAE,MAJJ;AAKJC,MAAAA,QAAQ,EAAE,OALN;AAMJC,MAAAA,QAAQ,EAAE;AANN,KAP4B;AAelCC,IAAAA,SAAS,EAAE;AACTC,MAAAA,UAAU,EAAE,UADH;AAET;AACA;AACA;AACAC,MAAAA,aAAa,EAAE,MALN;AAMT,eAAS;AACPC,QAAAA,OAAO,EAAE,OADF;AAEPC,QAAAA,OAAO,EAAE;AAFF;AANA,KAfuB;AA0BlCC,IAAAA,MAAM,EAAE;AACNhB,MAAAA,KAAK,EAAE,aADD;AAENiB,MAAAA,OAAO,EAAE;AAFH,KA1B0B;AA8BlCC,IAAAA,OAAO,EAAE;AACPR,MAAAA,QAAQ,EAAE,UADH;AAEPS,MAAAA,IAAI,EAAE,EAFC;AAGPV,MAAAA,QAAQ,EAAE;AAHH,KA9ByB;AAmClCW,IAAAA,OAAO,EAAE;AACPrB,MAAAA,MAAM,sBAAeC,gBAAMoB,OAAN,EAAf;AADC,KAnCyB;AAsClCC,IAAAA,SAAS,EAAE;AACTtB,MAAAA,MAAM,sBAAeC,gBAAMqB,SAAN,EAAf;AADG,KAtCuB;AAyClCC,IAAAA,IAAI,EAAE;AACJV,MAAAA,UAAU,EAAE,QADR;AAEJR,MAAAA,QAAQ,EAAE;AAFN;AAzC4B,GAAP;AAAA,CAAX,CAAlB;;IA+CamB,Y;;;;;AAaX,0BAAc;AAAA;;AAAA;AACZ;AACA,UAAKC,KAAL,GAAa;AACXhB,MAAAA,MAAM,EAAE;AADG,KAAb;AAFY;AAKb;;;;WAED,4BAAmBiB,SAAnB,EAA8B;AAAA;;AAC5B,qCAAW,KAAKC,OAAhB;AACA,UAAgBC,aAAhB,GAAkC,KAAKC,KAAvC,CAAQC,MAAR;AACA,UAAgBC,UAAhB,GAA+BL,SAA/B,CAAQI,MAAR;;AAEA,UAAIE,IAAI,CAACC,SAAL,CAAeL,aAAf,MAAkCI,IAAI,CAACC,SAAL,CAAeF,UAAf,CAAtC,EAAkE;AAChE,YAAI,CAACH,aAAL,EAAoB;AAClB,eAAKM,QAAL,CAAc;AACZzB,YAAAA,MAAM,EAAE;AADI,WAAd;AAGA;AACD;;AACD0B,QAAAA,UAAU,CAAC,YAAM;AACf,UAAA,MAAI,CAACD,QAAL,CAAc;AACZzB,YAAAA,MAAM,EAAE,MAAI,CAAC2B,OAAL,CAAaC;AADT,WAAd;AAGD,SAJS,EAIP,GAJO,CAAV;AAKD;AACF;;;WAED,qCAA4BC,MAA5B,EAAoC;AAClCA,MAAAA,MAAM,CAACC,UAAP,CAAkBC,OAAlB,CAA0B,UAACC,IAAD,EAAU;AAClC,YAAIA,IAAI,YAAYC,OAAhB,IAA2BD,IAAI,YAAYE,YAA/C,EAA6D;AAC3DF,UAAAA,IAAI,CAACG,YAAL,CAAkB,WAAlB,EAA+B,KAA/B;AACD;AACF,OAJD;AAKD;;;WAED,kBAAS;AAAA;AAAA;;AACP,wBAAiE,KAAKf,KAAtE;AAAA,UAAQgB,QAAR,eAAQA,QAAR;AAAA,UAAkBf,MAAlB,eAAkBA,MAAlB;AAAA,UAA0BgB,OAA1B,eAA0BA,OAA1B;AAAA,UAAmCC,MAAnC,eAAmCA,MAAnC;AAAA,UAA2CC,QAA3C,eAA2CA,QAA3C;AAAA,UAAqD3B,OAArD,eAAqDA,OAArD;AACA,UAAM4B,YAAY,GAAGD,QAAQ,IAAID,MAAZ,IAAsBC,QAAQ,CAAClB,MAAT,CAAgBoB,KAA3D;AACA,UAAMC,KAAK,GAAGrB,MAAM,IAAIA,MAAM,CAACoB,KAA/B;AAEA;AAAA;AACE;AACA,wCAAC,gBAAD;AACE,UAAA,SAAS,EAAE,KADb;AAEE,UAAA,QAAQ,EAAE,IAFZ;AAGE,UAAA,GAAG,EAAE,aAACE,KAAD,EAAS;AACZ;AACA,YAAA,MAAI,CAACzB,OAAL,GAAe0B,qBAASC,WAAT,CAAqBF,KAArB,CAAf;AACD,WANH;AAOE,UAAA,SAAS,EAAC,MAPZ;AAQE,UAAA,KAAK,eACH,gCAAC,iBAAD,CAAO,QAAP,qBACE;AACE,YAAA,SAAS,EAAE,6BAAWN,OAAO,CAAClC,SAAnB,EAA8BmC,MAAM,IAAID,OAAO,CAACvB,IAAhD,uCACRuB,OAAO,CAAC7B,MADA,EACSgC,YADT,EADb;AAIE,YAAA,GAAG,EAAE,aAACG,IAAD,EAAS;AACZ,kBAAIA,IAAJ,EAAS;AACP;AACA,gBAAA,MAAI,CAAChB,OAAL,GAAeiB,qBAASC,WAAT,CAAqBF,IAArB,CAAf;AACAA,gBAAAA,IAAG,CAACG,SAAJ,GAAgBJ,KAAK,IAAI,EAAzB;;AACA,gBAAA,MAAI,CAACK,2BAAL,CAAiCJ,IAAjC;AACD;AACF;AAXH,aAaG,GAbH,CADF,EAgBGH,YAAY,iBACX;AACE,YAAA,SAAS,EAAE,6BAAWH,OAAO,CAAClC,SAAnB,EAA8BmC,MAAM,IAAID,OAAO,CAACvB,IAAhD,EAAsDuB,OAAO,CAAC3B,OAA9D,CADb;AAEE,YAAA,GAAG,EAAE,aAACiC,KAAD,EAAS;AACZ,kBAAIA,KAAJ,EAAS;AACP;AACA,gBAAA,MAAI,CAAChB,OAAL,GAAeiB,qBAASC,WAAT,CAAqBF,KAArB,CAAf;AACAA,gBAAAA,KAAG,CAACG,SAAJ,GAAgBN,YAAY,IAAI,EAAhC;;AACA,gBAAA,MAAI,CAACO,2BAAL,CAAiCJ,KAAjC;AACD;AACF;AATH,aAWG,GAXH,CAjBJ,CATJ;AA0CE,UAAA,SAAS,EAAE,6BAAWN,OAAO,CAACxC,IAAnB,EAAyByC,MAAM,IAAID,OAAO,CAACvB,IAA3C,qEACRuB,OAAO,CAACzB,OADA,EACUA,OAAO,KAAKoC,SAAZ,IAAyBpC,OADnC,kDAERyB,OAAO,CAACxB,SAFA,EAEYD,OAAO,KAAKoC,SAAZ,IAAyB,CAACpC,OAFtC,iBA1Cb;AA8CE,UAAA,OAAO,EAAEwB,QAAQ,GAAG,UAAH,GAAgBY,SA9CnC;AA+CE,UAAA,KAAK,oBACC,KAAKhC,KAAL,CAAWhB,MAAX,GAAoB;AAAEA,YAAAA,MAAM,EAAE,KAAKgB,KAAL,CAAWhB;AAArB,WAApB,GAAoD,EADrD,CA/CP;AAkDE,UAAA,OAAO,EAAE;AACP0C,YAAAA,KAAK,EAAEJ,MAAM,IAAID,OAAO,CAACvB;AADlB;AAlDX;AAFF;AAyDD;;;EA9G+BmC,kBAAMC,S;;;iCAA3BnC,Y,eACQ;AACjBoC,EAAAA,EAAE,EAAEC,sBAAUC,SAAV,CAAoB,CAACD,sBAAUE,MAAX,EAAmBF,sBAAUG,MAA7B,CAApB,CADa;AAEjBnB,EAAAA,QAAQ,EAAEgB,sBAAUI,IAFH;AAGjBC,EAAAA,UAAU,EAAEL,sBAAUI,IAHL;AAIjBnC,EAAAA,MAAM,EAAE+B,sBAAUM,MAJD;AAKjBrB,EAAAA,OAAO,EAAEe,sBAAUM,MALF;AAMjBpB,EAAAA,MAAM,EAAEc,sBAAUI,IAND;AAOjBjB,EAAAA,QAAQ,EAAEa,sBAAUM,MAPH;AAQjB9C,EAAAA,OAAO,EAAEwC,sBAAUI,IARF;AASjBG,EAAAA,QAAQ,EAAEP,sBAAUQ;AATH,C;AAgHrB,IAAMC,kBAAkB,GAAGxE,SAAS,CAAC0B,YAAD,CAApC;AAEA,IAAM+C,qBAAqB,GAAGzE,SAAS,CAAC,iBAAwD;AAAA,MAArD0E,iBAAqD,SAArDA,iBAAqD;AAAA,MAAlCC,iBAAkC,SAAlCA,iBAAkC;AAAA,MAAZ5C,KAAY;AAC9F,MAAQiB,OAAR,GAA4BjB,KAA5B,CAAQiB,OAAR;AAAA,MAAiBC,MAAjB,GAA4BlB,KAA5B,CAAiBkB,MAAjB;AAEA,SAAO0B,iBAAiB,CACtBD,iBAAiB,eACf;AAAM,IAAA,SAAS,EAAE,6BAAW1B,OAAO,CAAC/C,OAAnB,EAA4BgD,MAAM,IAAID,OAAO,CAACvB,IAA9C;AAAjB,kBACE,gCAAC,kBAAD,EAAwBM,KAAxB,CADF,CADe,CADK,CAAxB;AAOD,CAVsC,CAAvC;AAYA,IAAM6C,UAAU,GAAG;AACjBC,EAAAA,IADiB,gBACZ9C,KADY,EACL+C,OADK,EACI;AACnB,QAAMC,WAAW,GAAGD,OAAO,CAACE,OAAR,EAApB;AAEAlF,IAAAA,GAAG,CAAC,kBAAD,EAAqBiC,KAAK,CAACkD,UAA3B,EAAuC,yBAAvC,EAAkEF,WAAW,CAACE,UAA9E,CAAH;;AAEA,QAAIF,WAAW,CAACjB,EAAZ,KAAmB/B,KAAK,CAAC+B,EAA7B,EAAiC;AAC/B/B,MAAAA,KAAK,CAACuC,QAAN,CAAevC,KAAK,CAAC+B,EAArB,EAAyBiB,WAAW,CAAC/C,MAAZ,CAAmB8B,EAA5C;AACD;;AAED,WAAO;AACLoB,MAAAA,OAAO,EAAEH,WAAW,CAACjB,EAAZ,KAAmB/B,KAAK,CAAC+B;AAD7B,KAAP;AAGD,GAbgB;AAcjBqB,EAAAA,OAdiB,mBAcTpD,KAdS,EAcF+C,OAdE,EAcO;AACtB,QAAMC,WAAW,GAAGD,OAAO,CAACE,OAAR,EAApB;AAEA,WAAOD,WAAW,CAACE,UAAZ,KAA2BlD,KAAK,CAACkD,UAAxC;AACD;AAlBgB,CAAnB;AAqBA,IAAMG,QAAQ,GAAG,sBAAWrF,SAAX,EAAsB6E,UAAtB,EAAkC,UAACS,OAAD,EAAUP,OAAV;AAAA,SAAuB;AACxEH,IAAAA,iBAAiB,EAAEU,OAAO,CAACC,UAAR,EADqD;AAExErC,IAAAA,MAAM,EAAE6B,OAAO,CAAC7B,MAAR,EAFgE;AAGxEC,IAAAA,QAAQ,EAAE4B,OAAO,CAACE,OAAR;AAH8D,GAAvB;AAAA,CAAlC,EAIbP,qBAJa,CAAjB;AAMA,IAAMc,UAAU,GAAG;AACjBC,EAAAA,OADiB,mBACTzD,KADS,EACF;AACb,WAAO,CAACA,KAAK,CAACgB,QAAP,IAAmB,CAAC,CAAChB,KAAK,CAACC,MAAlC;AACD,GAHgB;AAIjByD,EAAAA,SAJiB,qBAIP1D,KAJO,EAIA;AACf,WAAO;AACL+B,MAAAA,EAAE,EAAE/B,KAAK,CAAC+B,EADL;AAEL9B,MAAAA,MAAM,EAAED,KAAK,CAACC,MAFT;AAGLiD,MAAAA,UAAU,EAAElD,KAAK,CAACkD,UAHb;AAILS,MAAAA,UAAU,EAAE;AAJP,KAAP;AAMD,GAXgB;AAYjBC,EAAAA,OAZiB,mBAYT5D,KAZS,EAYF+C,OAZE,EAYO;AACtB;AACA,QAAMc,UAAU,GAAGd,OAAO,CAACe,aAAR,EAAnB;;AAEA,QAAI,CAACD,UAAD,IAAgBA,UAAU,CAACV,OAAX,IAAsB,CAACnD,KAAK,CAACqC,UAAjD,EAA8D;AAC5D,UAAMW,WAAW,GAAGD,OAAO,CAACE,OAAR,EAApB;;AAEA,UAAID,WAAW,CAACW,UAAhB,EAA4B;AAC1B3D,QAAAA,KAAK,CAACuC,QAAN,CAAevC,KAAK,CAAC+B,EAArB,EAAyBH,SAAzB;AACD;AACF;AACF;AAvBgB,CAAnB;AA0BA,IAAMmC,YAAY,GAAG,sBAAW/F,SAAX,EAAsBwF,UAAtB,EAAkC,UAACF,OAAD,EAAUP,OAAV;AAAA,SAAuB;AAC5EJ,IAAAA,iBAAiB,EAAEW,OAAO,CAACU,UAAR,EADyD;AAE5EC,IAAAA,UAAU,EAAElB,OAAO,CAACkB,UAAR;AAFgE,GAAvB;AAAA,CAAlC,EAGjBZ,QAHiB,CAArB;eAKeU,Y","sourcesContent":["import 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 '@pie-lib/render-ui';\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  },\n  chip: {\n    minWidth: '90px',\n    fontSize: 'inherit',\n    minHeight: '32px',\n    height: 'auto',\n    maxWidth: '374px',\n    position: 'relative',\n  },\n  chipLabel: {\n    whiteSpace: 'pre-wrap',\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  },\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}));\n\nexport class BlankContent extends React.Component {\n  static 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  };\n\n  constructor() {\n    super();\n    this.state = {\n      height: 0,\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        });\n        return;\n      }\n      setTimeout(() => {\n        this.setState({\n          height: this.spanRef.offsetHeight,\n        });\n      }, 300);\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  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, {\n          [classes.correct]: correct !== undefined && correct,\n          [classes.incorrect]: correct !== undefined && !correct,\n        })}\n        variant={disabled ? 'outlined' : undefined}\n        style={{\n          ...(this.state.height ? { height: this.state.height } : {}),\n        }}\n        classes={{\n          label: isOver && classes.over,\n        }}\n      />\n    );\n  }\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 && !props.duplicates)) {\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "1.13.25-next.3+9bc09dc3",
+  "version": "1.13.26-next.8+19dabeb7",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -11,7 +11,7 @@
     "@material-ui/core": "^3.9.3",
     "@pie-lib/drag": "^2.1.18",
     "@pie-lib/math-rendering": "^2.5.14",
-    "@pie-lib/render-ui": "^4.14.23-next.3+9bc09dc3",
+    "@pie-lib/render-ui": "^4.14.24-next.8+19dabeb7",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "immutable": ">=3.8.1",
@@ -27,5 +27,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "9bc09dc319af7ba5b956ce5713d3c248f60440fd"
+  "gitHead": "19dabeb70004ac4c1d1b17ca79e75a8021178741"
 }

package/src/choices/choice.jsx

@@ -24,6 +24,8 @@ class BlankContentComp extends React.Component {
   render() {
     const { connectDragSource, choice, classes, disabled } = this.props;
 
+    // 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.
+
     return connectDragSource(
       <span className={classnames(classes.choice, disabled && classes.disabled)}>
         <Chip
@@ -67,6 +69,10 @@ export const BlankContent = withStyles((theme) => ({
     whiteSpace: 'pre-wrap',
     maxWidth: '374px',
     margin: theme.spacing.unit / 2,
+    // 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',
   },
   chipLabel: {
     whiteSpace: 'pre-wrap',

package/src/components/blank.jsx

@@ -28,6 +28,10 @@ const useStyles = withStyles(() => ({
   },
   chipLabel: {
     whiteSpace: 'pre-wrap',
+    // 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',
@@ -108,6 +112,7 @@ export class BlankContent extends React.Component {
     const label = choice && choice.value;
 
     return (
+      // 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.
       <Chip
         clickable={false}
         disabled={true}