@pie-lib/drag 2.2.10-next.1 → 2.3.0-beta.1

package/CHANGELOG.md

@@ -3,18 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.2.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.8...@pie-lib/drag@2.2.9) (2023-10-03)
-
+# [2.3.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.9...@pie-lib/drag@2.3.0-beta.1) (2025-07-20)
 
-### Bug Fixes
-
-* revert to pie-lib/math-rendering that what working ([25660ea](https://github.com/pie-framework/pie-lib/commit/25660ea6595e800a71c5494bd3bb9eecd3609a5a))
+**Note:** Version bump only for package @pie-lib/drag
 
 
 
 
 
-## [2.2.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.7...@pie-lib/drag@2.2.8) (2023-10-01)
+# [2.3.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.9...@pie-lib/drag@2.3.0-beta.0) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/drag
 
@@ -22,71 +19,58 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [2.2.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.6...@pie-lib/drag@2.2.7) (2023-09-27)
+# [2.4.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.9...@pie-lib/drag@2.4.0-beta.0) (2025-07-15)
 
 **Note:** Version bump only for package @pie-lib/drag
 
+# [2.3.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.9...@pie-lib/drag@2.3.0-beta.0) (2025-07-15)
 
+**Note:** Version bump only for package @pie-lib/drag
+
+## [2.2.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.8...@pie-lib/drag@2.2.9) (2023-10-03)
 
+### Bug Fixes
 
+- revert to pie-lib/math-rendering that what working ([25660ea](https://github.com/pie-framework/pie-lib/commit/25660ea6595e800a71c5494bd3bb9eecd3609a5a))
 
-## [2.2.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.5...@pie-lib/drag@2.2.6) (2023-09-27)
+## [2.2.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.7...@pie-lib/drag@2.2.8) (2023-10-01)
 
 **Note:** Version bump only for package @pie-lib/drag
 
+## [2.2.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.6...@pie-lib/drag@2.2.7) (2023-09-27)
 
+**Note:** Version bump only for package @pie-lib/drag
 
+## [2.2.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.5...@pie-lib/drag@2.2.6) (2023-09-27)
 
+**Note:** Version bump only for package @pie-lib/drag
 
 ## [2.2.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.4...@pie-lib/drag@2.2.5) (2023-09-27)
 
-
 ### Bug Fixes
 
-* add required packages ([b0b6855](https://github.com/pie-framework/pie-lib/commit/b0b6855418a988ed6ea911c97425b89fbab2794d))
-
-
-
-
+- add required packages ([b0b6855](https://github.com/pie-framework/pie-lib/commit/b0b6855418a988ed6ea911c97425b89fbab2794d))
 
 ## [2.2.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.3...@pie-lib/drag@2.2.4) (2023-08-07)
 
-
 ### Bug Fixes
 
-* **drag:** create droppablePlaceholder for ICA PD-3050 ([b2e595e](https://github.com/pie-framework/pie-lib/commit/b2e595e66b331147064c6b72fa44ba756078f159))
-
-
-
-
+- **drag:** create droppablePlaceholder for ICA PD-3050 ([b2e595e](https://github.com/pie-framework/pie-lib/commit/b2e595e66b331147064c6b72fa44ba756078f159))
 
 ## [2.2.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.2...@pie-lib/drag@2.2.3) (2023-07-31)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 ## [2.2.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.1...@pie-lib/drag@2.2.2) (2023-07-24)
 
-
 ### Bug Fixes
 
-* **drag-in-the-blank:** add preview for draged items on touch backend, wip ([4e4bab6](https://github.com/pie-framework/pie-lib/commit/4e4bab63fb69e53d4cdff303d5bfd4fc18a5c7a0))
-
-
-
-
+- **drag-in-the-blank:** add preview for draged items on touch backend, wip ([4e4bab6](https://github.com/pie-framework/pie-lib/commit/4e4bab63fb69e53d4cdff303d5bfd4fc18a5c7a0))
 
 ## [2.2.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.0...@pie-lib/drag@2.2.1) (2023-06-24)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 # [2.2.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.19...@pie-lib/drag@2.2.0) (2023-06-12)
 
 ### Features

package/NEXT.CHANGELOG.json

@@ -0,0 +1 @@
+[]

package/lib/drag-in-the-blank-dp.js

@@ -9,7 +9,7 @@ exports.spec = exports["default"] = void 0;
 
 var _reactDnd = require("react-dnd");
 
-var _droppablePlaceholder = require("../lib/droppable-placeholder");
+var _droppablePlaceholder = require("./droppable-placeholder");
 
 var _dragType = _interopRequireDefault(require("./drag-type"));
 

package/lib/drag-in-the-blank-dp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/drag-in-the-blank-dp.jsx"],"names":["spec","canDrop","props","disabled","drop","dropped","WithTarget","dragType","types","db","connect","monitor","connectDropTarget","dropTarget","isOver","DroppablePlaceholder"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEO,IAAMA,IAAI,GAAG;AAClBC,EAAAA,OAAO,EAAE,iBAACC,KAAD,EAAW;AAClB,WAAO,CAACA,KAAK,CAACC,QAAd;AACD,GAHiB;AAIlBC,EAAAA,IAAI,EAAE;AAAA,WAAO;AACXC,MAAAA,OAAO,EAAE;AADE,KAAP;AAAA;AAJY,CAAb;;AASP,IAAMC,UAAU,GAAG,0BAAWC,qBAASC,KAAT,CAAeC,EAA1B,EAA8BT,IAA9B,EAAoC,UAACU,OAAD,EAAUC,OAAV;AAAA,SAAuB;AAC5EC,IAAAA,iBAAiB,EAAEF,OAAO,CAACG,UAAR,EADyD;AAE5EC,IAAAA,MAAM,EAAEH,OAAO,CAACG,MAAR;AAFoE,GAAvB;AAAA,CAApC,EAGfC,0CAHe,CAAnB;eAKeT,U","sourcesContent":["import { DropTarget } from 'react-dnd';\nimport { DroppablePlaceholder } from '../lib/droppable-placeholder';\nimport dragType from './drag-type';\n\nexport const spec = {\n  canDrop: (props) => {\n    return !props.disabled;\n  },\n  drop: () => ({\n    dropped: true,\n  }),\n};\n\nconst WithTarget = DropTarget(dragType.types.db, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"drag-in-the-blank-dp.js"}
+{"version":3,"sources":["../src/drag-in-the-blank-dp.jsx"],"names":["spec","canDrop","props","disabled","drop","dropped","WithTarget","dragType","types","db","connect","monitor","connectDropTarget","dropTarget","isOver","DroppablePlaceholder"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEO,IAAMA,IAAI,GAAG;AAClBC,EAAAA,OAAO,EAAE,iBAACC,KAAD,EAAW;AAClB,WAAO,CAACA,KAAK,CAACC,QAAd;AACD,GAHiB;AAIlBC,EAAAA,IAAI,EAAE;AAAA,WAAO;AACXC,MAAAA,OAAO,EAAE;AADE,KAAP;AAAA;AAJY,CAAb;;AASP,IAAMC,UAAU,GAAG,0BAAWC,qBAASC,KAAT,CAAeC,EAA1B,EAA8BT,IAA9B,EAAoC,UAACU,OAAD,EAAUC,OAAV;AAAA,SAAuB;AAC5EC,IAAAA,iBAAiB,EAAEF,OAAO,CAACG,UAAR,EADyD;AAE5EC,IAAAA,MAAM,EAAEH,OAAO,CAACG,MAAR;AAFoE,GAAvB;AAAA,CAApC,EAGfC,0CAHe,CAAnB;eAKeT,U","sourcesContent":["import { DropTarget } from 'react-dnd';\nimport { DroppablePlaceholder } from './droppable-placeholder';\nimport dragType from './drag-type';\n\nexport const spec = {\n  canDrop: (props) => {\n    return !props.disabled;\n  },\n  drop: () => ({\n    dropped: true,\n  }),\n};\n\nconst WithTarget = DropTarget(dragType.types.db, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"drag-in-the-blank-dp.js"}

package/lib/droppable-placeholder.js

@@ -30,13 +30,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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 preventInteractionStyle = {
-  flex: 1,
-  WebkitTouchCallout: 'none',
-  WebkitUserSelect: 'none',
-  KhtmlUserSelect: 'none',
-  MozUserSelect: 'none',
-  MsUserSelect: 'none',
-  UserSelect: 'none'
+  flex: 1
 };
 
 var DroppablePlaceholder = /*#__PURE__*/function (_React$Component) {
@@ -57,14 +51,18 @@ var DroppablePlaceholder = /*#__PURE__*/function (_React$Component) {
           connectDropTarget = _this$props.connectDropTarget,
           isOver = _this$props.isOver,
           disabled = _this$props.disabled,
-          classes = _this$props.classes;
+          classes = _this$props.classes,
+          isVerticalPool = _this$props.isVerticalPool,
+          minHeight = _this$props.minHeight;
       return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
         style: preventInteractionStyle
       }, /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
         disabled: disabled,
         isOver: isOver,
         choiceBoard: true,
-        className: classes
+        className: classes,
+        isVerticalPool: isVerticalPool,
+        minHeight: minHeight
       }, children)));
     }
   }]);
@@ -77,6 +75,8 @@ exports.DroppablePlaceholder = DroppablePlaceholder;
   connectDropTarget: _propTypes["default"].func.isRequired,
   isOver: _propTypes["default"].bool,
   children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
-  disabled: _propTypes["default"].bool
+  disabled: _propTypes["default"].bool,
+  isVerticalPool: _propTypes["default"].bool,
+  minHeight: _propTypes["default"].number
 });
 //# sourceMappingURL=droppable-placeholder.js.map

package/lib/droppable-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/droppable-placeholder.jsx"],"names":["preventInteractionStyle","flex","WebkitTouchCallout","WebkitUserSelect","KhtmlUserSelect","MozUserSelect","MsUserSelect","UserSelect","DroppablePlaceholder","props","children","connectDropTarget","isOver","disabled","classes","React","Component","PropTypes","object","func","isRequired","bool","oneOfType","arrayOf","node"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAEA,IAAMA,uBAAuB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,CADwB;AAE9BC,EAAAA,kBAAkB,EAAE,MAFU;AAG9BC,EAAAA,gBAAgB,EAAE,MAHY;AAI9BC,EAAAA,eAAe,EAAE,MAJa;AAK9BC,EAAAA,aAAa,EAAE,MALe;AAM9BC,EAAAA,YAAY,EAAE,MANgB;AAO9BC,EAAAA,UAAU,EAAE;AAPkB,CAAhC;;IAUaC,oB;;;;;;;;;;;;WASX,kBAAS;AACP,wBAAmE,KAAKC,KAAxE;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,iBAAlB,eAAkBA,iBAAlB;AAAA,UAAqCC,MAArC,eAAqCA,MAArC;AAAA,UAA6CC,QAA7C,eAA6CA,QAA7C;AAAA,UAAuDC,OAAvD,eAAuDA,OAAvD;AAEA,aAAOH,iBAAiB,eACtB;AAAK,QAAA,KAAK,EAAEX;AAAZ,sBACE,gCAAC,uBAAD;AAAa,QAAA,QAAQ,EAAEa,QAAvB;AAAiC,QAAA,MAAM,EAAED,MAAzC;AAAiD,QAAA,WAAW,EAAE,IAA9D;AAAoE,QAAA,SAAS,EAAEE;AAA/E,SACGJ,QADH,CADF,CADsB,CAAxB;AAOD;;;EAnBuCK,kBAAMC,S;;;iCAAnCR,oB,eACQ;AACjBM,EAAAA,OAAO,EAAEG,sBAAUC,MADF;AAEjBP,EAAAA,iBAAiB,EAAEM,sBAAUE,IAAV,CAAeC,UAFjB;AAGjBR,EAAAA,MAAM,EAAEK,sBAAUI,IAHD;AAIjBX,EAAAA,QAAQ,EAAEO,sBAAUK,SAAV,CAAoB,CAACL,sBAAUM,OAAV,CAAkBN,sBAAUO,IAA5B,CAAD,EAAoCP,sBAAUO,IAA9C,CAApB,EAAyEJ,UAJlE;AAKjBP,EAAAA,QAAQ,EAAEI,sBAAUI;AALH,C","sourcesContent":["import React from 'react';\nimport PlaceHolder from './placeholder';\nimport PropTypes from 'prop-types';\n\nconst preventInteractionStyle = {\n  flex: 1,\n  WebkitTouchCallout: 'none',\n  WebkitUserSelect: 'none',\n  KhtmlUserSelect: 'none',\n  MozUserSelect: 'none',\n  MsUserSelect: 'none',\n  UserSelect: 'none',\n};\n\nexport class DroppablePlaceholder extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    connectDropTarget: PropTypes.func.isRequired,\n    isOver: PropTypes.bool,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    disabled: PropTypes.bool,\n  };\n\n  render() {\n    const { children, connectDropTarget, isOver, disabled, classes } = this.props;\n\n    return connectDropTarget(\n      <div style={preventInteractionStyle}>\n        <PlaceHolder disabled={disabled} isOver={isOver} choiceBoard={true} className={classes}>\n          {children}\n        </PlaceHolder>\n      </div>,\n    );\n  }\n}\n"],"file":"droppable-placeholder.js"}
+{"version":3,"sources":["../src/droppable-placeholder.jsx"],"names":["preventInteractionStyle","flex","DroppablePlaceholder","props","children","connectDropTarget","isOver","disabled","classes","isVerticalPool","minHeight","React","Component","PropTypes","object","func","isRequired","bool","oneOfType","arrayOf","node","number"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAEA,IAAMA,uBAAuB,GAAG;AAC9BC,EAAAA,IAAI,EAAE;AADwB,CAAhC;;IAIaC,oB;;;;;;;;;;;;WAWX,kBAAS;AACP,wBAA8F,KAAKC,KAAnG;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,iBAAlB,eAAkBA,iBAAlB;AAAA,UAAqCC,MAArC,eAAqCA,MAArC;AAAA,UAA6CC,QAA7C,eAA6CA,QAA7C;AAAA,UAAuDC,OAAvD,eAAuDA,OAAvD;AAAA,UAAgEC,cAAhE,eAAgEA,cAAhE;AAAA,UAAgFC,SAAhF,eAAgFA,SAAhF;AAEA,aAAOL,iBAAiB,eACtB;AAAK,QAAA,KAAK,EAAEL;AAAZ,sBACE,gCAAC,uBAAD;AACE,QAAA,QAAQ,EAAEO,QADZ;AAEE,QAAA,MAAM,EAAED,MAFV;AAGE,QAAA,WAAW,EAAE,IAHf;AAIE,QAAA,SAAS,EAAEE,OAJb;AAKE,QAAA,cAAc,EAAEC,cALlB;AAME,QAAA,SAAS,EAAEC;AANb,SAQGN,QARH,CADF,CADsB,CAAxB;AAcD;;;EA5BuCO,kBAAMC,S;;;iCAAnCV,oB,eACQ;AACjBM,EAAAA,OAAO,EAAEK,sBAAUC,MADF;AAEjBT,EAAAA,iBAAiB,EAAEQ,sBAAUE,IAAV,CAAeC,UAFjB;AAGjBV,EAAAA,MAAM,EAAEO,sBAAUI,IAHD;AAIjBb,EAAAA,QAAQ,EAAES,sBAAUK,SAAV,CAAoB,CAACL,sBAAUM,OAAV,CAAkBN,sBAAUO,IAA5B,CAAD,EAAoCP,sBAAUO,IAA9C,CAApB,EAAyEJ,UAJlE;AAKjBT,EAAAA,QAAQ,EAAEM,sBAAUI,IALH;AAMjBR,EAAAA,cAAc,EAAEI,sBAAUI,IANT;AAOjBP,EAAAA,SAAS,EAAEG,sBAAUQ;AAPJ,C","sourcesContent":["import React from 'react';\nimport PlaceHolder from './placeholder';\nimport PropTypes from 'prop-types';\n\nconst preventInteractionStyle = {\n  flex: 1,\n};\n\nexport class DroppablePlaceholder extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    connectDropTarget: PropTypes.func.isRequired,\n    isOver: PropTypes.bool,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    disabled: PropTypes.bool,\n    isVerticalPool: PropTypes.bool,\n    minHeight: PropTypes.number,\n  };\n\n  render() {\n    const { children, connectDropTarget, isOver, disabled, classes, isVerticalPool, minHeight } = this.props;\n\n    return connectDropTarget(\n      <div style={preventInteractionStyle}>\n        <PlaceHolder\n          disabled={disabled}\n          isOver={isOver}\n          choiceBoard={true}\n          className={classes}\n          isVerticalPool={isVerticalPool}\n          minHeight={minHeight}\n        >\n          {children}\n        </PlaceHolder>\n      </div>,\n    );\n  }\n}\n"],"file":"droppable-placeholder.js"}

package/lib/placeholder.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.PlaceHolder = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _styles = require("@material-ui/core/styles");
@@ -17,6 +19,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
 
+var _renderUi = require("@pie-lib/render-ui");
+
+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 PlaceHolder = function PlaceHolder(props) {
   var children = props.children,
       classes = props.classes,
@@ -25,7 +33,10 @@ var PlaceHolder = function PlaceHolder(props) {
       type = props.type,
       grid = props.grid,
       disabled = props.disabled,
-      choiceBoard = props.choiceBoard;
+      choiceBoard = props.choiceBoard,
+      isCategorize = props.isCategorize,
+      isVerticalPool = props.isVerticalPool,
+      minHeight = props.minHeight;
   var names = (0, _classnames["default"])(classes.placeholder, disabled && classes.disabled, isOver && classes.over, classes[type], className);
   var style = {};
 
@@ -36,11 +47,23 @@ var PlaceHolder = function PlaceHolder(props) {
   if (grid && grid.rows) {
     var repeatValue = grid.rowsRepeatValue || '1fr';
     style.gridTemplateRows = "repeat(".concat(grid.rows, ", ").concat(repeatValue, ")");
+  } // The "type" is only sent through placement-ordering / placeholder
+  // It can be "choice" or "target"
+  // We apply a different style for the "choice" type
+  // For any other type, use a dashed black border and a white fill
+
+
+  if (type === 'choice') {
+    style.border = "1px solid ".concat(_renderUi.color.borderLight());
+    style.background = _renderUi.color.backgroundDark();
   }
 
+  var boardStyle = isCategorize ? classes.categorizeBoard : classes.board;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    style: style,
-    className: choiceBoard ? classes.board : names
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      minHeight: minHeight
+    }),
+    className: (0, _classnames["default"])(classes.noSelectStyles, choiceBoard ? boardStyle : names, isVerticalPool && classes.verticalPool)
   }, children);
 };
 
@@ -59,22 +82,33 @@ PlaceHolder.propTypes = {
   isOver: _propTypes["default"].bool,
   index: _propTypes["default"].number,
   type: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool
+  disabled: _propTypes["default"].bool,
+  isCategorize: _propTypes["default"].bool,
+  isVerticalPool: _propTypes["default"].bool,
+  minHeight: _propTypes["default"].number
 };
 
 var styles = function styles(theme) {
   return {
+    noSelectStyles: {
+      WebkitTouchCallout: 'none',
+      WebkitUserSelect: 'none',
+      KhtmlUserSelect: 'none',
+      MozUserSelect: 'none',
+      MsUserSelect: 'none',
+      userSelect: 'none'
+    },
     placeholder: {
       width: '100%',
       height: '100%',
-      background: theme.palette.grey[200],
-      border: '1px solid #D1D1D1',
+      background: _renderUi.color.white(),
       transition: 'background-color 200ms linear, border-color 200ms linear',
       boxSizing: 'border-box',
       display: 'grid',
       gridRowGap: "".concat(theme.spacing.unit, "px"),
       gridColumnGap: "".concat(theme.spacing.unit, "px"),
-      padding: theme.spacing.unit * 1
+      padding: theme.spacing.unit * 1,
+      border: "2px dashed ".concat(_renderUi.color.black())
     },
     disabled: {
       boxShadow: 'none',
@@ -85,15 +119,30 @@ var styles = function styles(theme) {
       backgroundColor: "".concat(_grey["default"][300])
     },
     board: {
-      border: '1px solid #D1D1D1',
       padding: theme.spacing.unit,
       display: 'flex',
       flexWrap: 'wrap',
       alignItems: 'center',
-      minHeight: '200px',
+      minHeight: '100px',
       justifyContent: 'center',
       overflow: 'hidden',
-      touchAction: 'none'
+      touchAction: 'none',
+      backgroundColor: _renderUi.color.backgroundDark()
+    },
+    categorizeBoard: {
+      padding: theme.spacing.unit / 2,
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      minHeight: '100px',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      touchAction: 'none',
+      backgroundColor: _renderUi.color.backgroundDark()
+    },
+    verticalPool: {
+      display: 'flex',
+      flexFlow: 'column wrap'
     }
   };
 };

package/lib/placeholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/placeholder.jsx"],"names":["PlaceHolder","props","children","classes","className","isOver","type","grid","disabled","choiceBoard","names","placeholder","over","style","columns","gridTemplateColumns","rows","repeatValue","rowsRepeatValue","gridTemplateRows","board","propTypes","PropTypes","object","isRequired","bool","shape","number","string","oneOfType","arrayOf","node","index","styles","theme","width","height","background","palette","grey","border","transition","boxSizing","display","gridRowGap","spacing","unit","gridColumnGap","padding","boxShadow","paper","backgroundColor","flexWrap","alignItems","minHeight","justifyContent","overflow","touchAction"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport grey from '@material-ui/core/colors/grey';\n\nexport const PlaceHolder = (props) => {\n  const { children, classes, className, isOver, type, grid, disabled, choiceBoard } = props;\n  const names = classNames(\n    classes.placeholder,\n    disabled && classes.disabled,\n    isOver && classes.over,\n    classes[type],\n    className,\n  );\n\n  const style = {};\n\n  if (grid && grid.columns) {\n    style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;\n  }\n  if (grid && grid.rows) {\n    const repeatValue = grid.rowsRepeatValue || '1fr';\n\n    style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;\n  }\n\n  return (\n    <div style={style} className={choiceBoard ? classes.board : names}>\n      {children}\n    </div>\n  );\n};\n\nPlaceHolder.propTypes = {\n  classes: PropTypes.object.isRequired,\n  choiceBoard: PropTypes.bool,\n  grid: PropTypes.shape({\n    columns: PropTypes.number,\n    rows: PropTypes.number,\n    // if a different value then 1fr is wanted\n    rowsRepeatValue: PropTypes.string,\n  }),\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n  className: PropTypes.string,\n  isOver: PropTypes.bool,\n  index: PropTypes.number,\n  type: PropTypes.string,\n  disabled: PropTypes.bool,\n};\n\nconst styles = (theme) => ({\n  placeholder: {\n    width: '100%',\n    height: '100%',\n    background: theme.palette.grey[200],\n    border: '1px solid #D1D1D1',\n    transition: 'background-color 200ms linear, border-color 200ms linear',\n    boxSizing: 'border-box',\n    display: 'grid',\n    gridRowGap: `${theme.spacing.unit}px`,\n    gridColumnGap: `${theme.spacing.unit}px`,\n    padding: theme.spacing.unit * 1,\n  },\n  disabled: {\n    boxShadow: 'none',\n    background: theme.palette.background.paper,\n  },\n  over: {\n    border: `1px solid ${grey[500]}`,\n    backgroundColor: `${grey[300]}`,\n  },\n  board: {\n    border: '1px solid #D1D1D1',\n    padding: theme.spacing.unit,\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    minHeight: '200px',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    touchAction: 'none',\n  },\n});\n\nexport default withStyles(styles)(PlaceHolder);\n"],"file":"placeholder.js"}
+{"version":3,"sources":["../src/placeholder.jsx"],"names":["PlaceHolder","props","children","classes","className","isOver","type","grid","disabled","choiceBoard","isCategorize","isVerticalPool","minHeight","names","placeholder","over","style","columns","gridTemplateColumns","rows","repeatValue","rowsRepeatValue","gridTemplateRows","border","color","borderLight","background","backgroundDark","boardStyle","categorizeBoard","board","noSelectStyles","verticalPool","propTypes","PropTypes","object","isRequired","bool","shape","number","string","oneOfType","arrayOf","node","index","styles","theme","WebkitTouchCallout","WebkitUserSelect","KhtmlUserSelect","MozUserSelect","MsUserSelect","userSelect","width","height","white","transition","boxSizing","display","gridRowGap","spacing","unit","gridColumnGap","padding","black","boxShadow","palette","paper","grey","backgroundColor","flexWrap","alignItems","justifyContent","overflow","touchAction","flexFlow"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAW;AACpC,MACEC,QADF,GAYID,KAZJ,CACEC,QADF;AAAA,MAEEC,OAFF,GAYIF,KAZJ,CAEEE,OAFF;AAAA,MAGEC,SAHF,GAYIH,KAZJ,CAGEG,SAHF;AAAA,MAIEC,MAJF,GAYIJ,KAZJ,CAIEI,MAJF;AAAA,MAKEC,IALF,GAYIL,KAZJ,CAKEK,IALF;AAAA,MAMEC,IANF,GAYIN,KAZJ,CAMEM,IANF;AAAA,MAOEC,QAPF,GAYIP,KAZJ,CAOEO,QAPF;AAAA,MAQEC,WARF,GAYIR,KAZJ,CAQEQ,WARF;AAAA,MASEC,YATF,GAYIT,KAZJ,CASES,YATF;AAAA,MAUEC,cAVF,GAYIV,KAZJ,CAUEU,cAVF;AAAA,MAWEC,SAXF,GAYIX,KAZJ,CAWEW,SAXF;AAcA,MAAMC,KAAK,GAAG,4BACZV,OAAO,CAACW,WADI,EAEZN,QAAQ,IAAIL,OAAO,CAACK,QAFR,EAGZH,MAAM,IAAIF,OAAO,CAACY,IAHN,EAIZZ,OAAO,CAACG,IAAD,CAJK,EAKZF,SALY,CAAd;AAQA,MAAMY,KAAK,GAAG,EAAd;;AAEA,MAAIT,IAAI,IAAIA,IAAI,CAACU,OAAjB,EAA0B;AACxBD,IAAAA,KAAK,CAACE,mBAAN,oBAAsCX,IAAI,CAACU,OAA3C;AACD;;AAED,MAAIV,IAAI,IAAIA,IAAI,CAACY,IAAjB,EAAuB;AACrB,QAAMC,WAAW,GAAGb,IAAI,CAACc,eAAL,IAAwB,KAA5C;AAEAL,IAAAA,KAAK,CAACM,gBAAN,oBAAmCf,IAAI,CAACY,IAAxC,eAAiDC,WAAjD;AACD,GAjCmC,CAmCpC;AACA;AACA;AACA;;;AACA,MAAId,IAAI,KAAK,QAAb,EAAuB;AACrBU,IAAAA,KAAK,CAACO,MAAN,uBAA4BC,gBAAMC,WAAN,EAA5B;AACAT,IAAAA,KAAK,CAACU,UAAN,GAAmBF,gBAAMG,cAAN,EAAnB;AACD;;AAED,MAAMC,UAAU,GAAGlB,YAAY,GAAGP,OAAO,CAAC0B,eAAX,GAA6B1B,OAAO,CAAC2B,KAApE;AAEA,sBACE;AACE,IAAA,KAAK,kCAAOd,KAAP;AAAcJ,MAAAA,SAAS,EAAEA;AAAzB,MADP;AAEE,IAAA,SAAS,EAAE,4BACTT,OAAO,CAAC4B,cADC,EAETtB,WAAW,GAAGmB,UAAH,GAAgBf,KAFlB,EAGTF,cAAc,IAAIR,OAAO,CAAC6B,YAHjB;AAFb,KAQG9B,QARH,CADF;AAYD,CA1DM;;;AA4DPF,WAAW,CAACiC,SAAZ,GAAwB;AACtB9B,EAAAA,OAAO,EAAE+B,sBAAUC,MAAV,CAAiBC,UADJ;AAEtB3B,EAAAA,WAAW,EAAEyB,sBAAUG,IAFD;AAGtB9B,EAAAA,IAAI,EAAE2B,sBAAUI,KAAV,CAAgB;AACpBrB,IAAAA,OAAO,EAAEiB,sBAAUK,MADC;AAEpBpB,IAAAA,IAAI,EAAEe,sBAAUK,MAFI;AAGpB;AACAlB,IAAAA,eAAe,EAAEa,sBAAUM;AAJP,GAAhB,CAHgB;AAStBtC,EAAAA,QAAQ,EAAEgC,sBAAUO,SAAV,CAAoB,CAACP,sBAAUQ,OAAV,CAAkBR,sBAAUS,IAA5B,CAAD,EAAoCT,sBAAUS,IAA9C,CAApB,EAAyEP,UAT7D;AAUtBhC,EAAAA,SAAS,EAAE8B,sBAAUM,MAVC;AAWtBnC,EAAAA,MAAM,EAAE6B,sBAAUG,IAXI;AAYtBO,EAAAA,KAAK,EAAEV,sBAAUK,MAZK;AAatBjC,EAAAA,IAAI,EAAE4B,sBAAUM,MAbM;AActBhC,EAAAA,QAAQ,EAAE0B,sBAAUG,IAdE;AAetB3B,EAAAA,YAAY,EAAEwB,sBAAUG,IAfF;AAgBtB1B,EAAAA,cAAc,EAAEuB,sBAAUG,IAhBJ;AAiBtBzB,EAAAA,SAAS,EAAEsB,sBAAUK;AAjBC,CAAxB;;AAoBA,IAAMM,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBf,IAAAA,cAAc,EAAE;AACdgB,MAAAA,kBAAkB,EAAE,MADN;AAEdC,MAAAA,gBAAgB,EAAE,MAFJ;AAGdC,MAAAA,eAAe,EAAE,MAHH;AAIdC,MAAAA,aAAa,EAAE,MAJD;AAKdC,MAAAA,YAAY,EAAE,MALA;AAMdC,MAAAA,UAAU,EAAE;AANE,KADS;AASzBtC,IAAAA,WAAW,EAAE;AACXuC,MAAAA,KAAK,EAAE,MADI;AAEXC,MAAAA,MAAM,EAAE,MAFG;AAGX5B,MAAAA,UAAU,EAAEF,gBAAM+B,KAAN,EAHD;AAIXC,MAAAA,UAAU,EAAE,0DAJD;AAKXC,MAAAA,SAAS,EAAE,YALA;AAMXC,MAAAA,OAAO,EAAE,MANE;AAOXC,MAAAA,UAAU,YAAKb,KAAK,CAACc,OAAN,CAAcC,IAAnB,OAPC;AAQXC,MAAAA,aAAa,YAAKhB,KAAK,CAACc,OAAN,CAAcC,IAAnB,OARF;AASXE,MAAAA,OAAO,EAAEjB,KAAK,CAACc,OAAN,CAAcC,IAAd,GAAqB,CATnB;AAUXtC,MAAAA,MAAM,uBAAgBC,gBAAMwC,KAAN,EAAhB;AAVK,KATY;AAqBzBxD,IAAAA,QAAQ,EAAE;AACRyD,MAAAA,SAAS,EAAE,MADH;AAERvC,MAAAA,UAAU,EAAEoB,KAAK,CAACoB,OAAN,CAAcxC,UAAd,CAAyByC;AAF7B,KArBe;AAyBzBpD,IAAAA,IAAI,EAAE;AACJQ,MAAAA,MAAM,sBAAe6C,iBAAK,GAAL,CAAf,CADF;AAEJC,MAAAA,eAAe,YAAKD,iBAAK,GAAL,CAAL;AAFX,KAzBmB;AA6BzBtC,IAAAA,KAAK,EAAE;AACLiC,MAAAA,OAAO,EAAEjB,KAAK,CAACc,OAAN,CAAcC,IADlB;AAELH,MAAAA,OAAO,EAAE,MAFJ;AAGLY,MAAAA,QAAQ,EAAE,MAHL;AAILC,MAAAA,UAAU,EAAE,QAJP;AAKL3D,MAAAA,SAAS,EAAE,OALN;AAML4D,MAAAA,cAAc,EAAE,QANX;AAOLC,MAAAA,QAAQ,EAAE,QAPL;AAQLC,MAAAA,WAAW,EAAE,MARR;AASLL,MAAAA,eAAe,EAAE7C,gBAAMG,cAAN;AATZ,KA7BkB;AAwCzBE,IAAAA,eAAe,EAAE;AACfkC,MAAAA,OAAO,EAAEjB,KAAK,CAACc,OAAN,CAAcC,IAAd,GAAqB,CADf;AAEfH,MAAAA,OAAO,EAAE,MAFM;AAGfY,MAAAA,QAAQ,EAAE,MAHK;AAIfC,MAAAA,UAAU,EAAE,QAJG;AAKf3D,MAAAA,SAAS,EAAE,OALI;AAMf4D,MAAAA,cAAc,EAAE,QAND;AAOfC,MAAAA,QAAQ,EAAE,QAPK;AAQfC,MAAAA,WAAW,EAAE,MARE;AASfL,MAAAA,eAAe,EAAE7C,gBAAMG,cAAN;AATF,KAxCQ;AAmDzBK,IAAAA,YAAY,EAAE;AACZ0B,MAAAA,OAAO,EAAE,MADG;AAEZiB,MAAAA,QAAQ,EAAE;AAFE;AAnDW,GAAZ;AAAA,CAAf;;eAyDe,wBAAW9B,MAAX,EAAmB7C,WAAnB,C","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport grey from '@material-ui/core/colors/grey';\nimport { color } from '@pie-lib/render-ui';\n\nexport const PlaceHolder = (props) => {\n  const {\n    children,\n    classes,\n    className,\n    isOver,\n    type,\n    grid,\n    disabled,\n    choiceBoard,\n    isCategorize,\n    isVerticalPool,\n    minHeight,\n  } = props;\n\n  const names = classNames(\n    classes.placeholder,\n    disabled && classes.disabled,\n    isOver && classes.over,\n    classes[type],\n    className,\n  );\n\n  const style = {};\n\n  if (grid && grid.columns) {\n    style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;\n  }\n\n  if (grid && grid.rows) {\n    const repeatValue = grid.rowsRepeatValue || '1fr';\n\n    style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;\n  }\n\n  // The \"type\" is only sent through placement-ordering / placeholder\n  // It can be \"choice\" or \"target\"\n  // We apply a different style for the \"choice\" type\n  // For any other type, use a dashed black border and a white fill\n  if (type === 'choice') {\n    style.border = `1px solid ${color.borderLight()}`;\n    style.background = color.backgroundDark();\n  }\n\n  const boardStyle = isCategorize ? classes.categorizeBoard : classes.board;\n\n  return (\n    <div\n      style={{ ...style, minHeight: minHeight }}\n      className={classNames(\n        classes.noSelectStyles,\n        choiceBoard ? boardStyle : names,\n        isVerticalPool && classes.verticalPool,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nPlaceHolder.propTypes = {\n  classes: PropTypes.object.isRequired,\n  choiceBoard: PropTypes.bool,\n  grid: PropTypes.shape({\n    columns: PropTypes.number,\n    rows: PropTypes.number,\n    // if a different value then 1fr is wanted\n    rowsRepeatValue: PropTypes.string,\n  }),\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n  className: PropTypes.string,\n  isOver: PropTypes.bool,\n  index: PropTypes.number,\n  type: PropTypes.string,\n  disabled: PropTypes.bool,\n  isCategorize: PropTypes.bool,\n  isVerticalPool: PropTypes.bool,\n  minHeight: PropTypes.number,\n};\n\nconst styles = (theme) => ({\n  noSelectStyles: {\n    WebkitTouchCallout: 'none',\n    WebkitUserSelect: 'none',\n    KhtmlUserSelect: 'none',\n    MozUserSelect: 'none',\n    MsUserSelect: 'none',\n    userSelect: 'none',\n  },\n  placeholder: {\n    width: '100%',\n    height: '100%',\n    background: color.white(),\n    transition: 'background-color 200ms linear, border-color 200ms linear',\n    boxSizing: 'border-box',\n    display: 'grid',\n    gridRowGap: `${theme.spacing.unit}px`,\n    gridColumnGap: `${theme.spacing.unit}px`,\n    padding: theme.spacing.unit * 1,\n    border: `2px dashed ${color.black()}`,\n  },\n  disabled: {\n    boxShadow: 'none',\n    background: theme.palette.background.paper,\n  },\n  over: {\n    border: `1px solid ${grey[500]}`,\n    backgroundColor: `${grey[300]}`,\n  },\n  board: {\n    padding: theme.spacing.unit,\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    minHeight: '100px',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    touchAction: 'none',\n    backgroundColor: color.backgroundDark(),\n  },\n  categorizeBoard: {\n    padding: theme.spacing.unit / 2,\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    minHeight: '100px',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    touchAction: 'none',\n    backgroundColor: color.backgroundDark(),\n  },\n  verticalPool: {\n    display: 'flex',\n    flexFlow: 'column wrap',\n  },\n});\n\nexport default withStyles(styles)(PlaceHolder);\n"],"file":"placeholder.js"}

package/lib/preview-component.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -29,21 +31,24 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var styles = {
   maskBlank: {
-    border: '1px solid black',
-    color: 'black',
-    minWidth: '90px',
+    // this style is applied only on small screens and for touch devices when dragging, for drag-in-the-blank.
+    // It is styled to be identical to the drag-in-the-blank chip
+    backgroundColor: _renderUi.color.white(),
+    border: "1px solid ".concat(_renderUi.color.text()),
+    color: _renderUi.color.text(),
+    alignItems: 'center',
+    display: 'inline-flex',
+    height: 'initial',
     minHeight: '32px',
-    height: 'auto',
+    fontSize: 'inherit',
+    whiteSpace: 'pre-wrap',
     maxWidth: '374px',
-    display: 'flex',
-    padding: '4px',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '16px'
+    borderRadius: '3px',
+    padding: '12px'
   },
   ica: {
     backgroundColor: _renderUi.color.background(),
-    border: "1px solid ".concat(_renderUi.color.primary()),
+    border: "1px solid ".concat(_renderUi.color.borderDark()),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -100,10 +105,17 @@ var getPrompt = function getPrompt(itemType, item) {
   }
 };
 
-var getCustomStyle = function getCustomStyle(itemType, item, style) {
-  var baseStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), itemType === 'MaskBlank' ? styles.maskBlank : {}), (item === null || item === void 0 ? void 0 : item.itemType) === 'categorize' ? styles.categorize : {}), itemType === 'Answer' ? styles.matchList : {}), itemType === 'Tile' ? styles.placementOrdering : {}), itemType === 'react-dnd-response' ? styles.ica : {});
-
-  return baseStyle;
+var getCustomStyle = function getCustomStyle(itemType, item, touchPosition, style) {
+  var transform = "translate(".concat(touchPosition.x, "px, ").concat(touchPosition.y, "px)");
+  var top = (style === null || style === void 0 ? void 0 : style.top) || 0;
+  var left = (style === null || style === void 0 ? void 0 : style.left) || 0;
+  var position = (style === null || style === void 0 ? void 0 : style.position) || 'fixed';
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    position: position,
+    top: top,
+    left: left,
+    transform: transform
+  }, itemType === 'MaskBlank' ? styles.maskBlank : {}), (item === null || item === void 0 ? void 0 : item.itemType) === 'categorize' ? styles.categorize : {}), itemType === 'Answer' ? styles.matchList : {}), itemType === 'Tile' ? styles.placementOrdering : {}), itemType === 'react-dnd-response' ? styles.ica : {});
 };
 
 var PreviewComponent = function PreviewComponent() {
@@ -114,18 +126,58 @@ var PreviewComponent = function PreviewComponent() {
       item = preview.item,
       style = preview.style,
       display = preview.display;
+
+  var _useState = (0, _react.useState)({
+    x: 0,
+    y: 0
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      touchPosition = _useState2[0],
+      setTouchPosition = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(1),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      zoomLevel = _useState4[0],
+      setZoomLevel = _useState4[1];
+
+  var handleTouchMove = (0, _react.useCallback)(function (event) {
+    if (event.touches.length > 0) {
+      var touch = event.touches[0];
+      var touchOffset = 1;
+      setTouchPosition({
+        x: (touch.clientX + touchOffset) / zoomLevel,
+        y: (touch.clientY + touchOffset) / zoomLevel
+      });
+    }
+  }, [zoomLevel]);
   var root = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (display && root.current) {
-      (0, _mathRendering.renderMath)(root.current);
+      (0, _mathRendering.renderMath)(root.current); // Adjusted for precise zoom level calculation in Online Testing, targeting the specific class pattern .asmt-zoomable.asmt-zoom-NR .asmt-question .padding
+
+      var zoomAffectedElement = document.querySelector('.padding') || document.body;
+      setZoomLevel(parseFloat(getComputedStyle(zoomAffectedElement).zoom) || 1);
     }
   }, [display, item === null || item === void 0 ? void 0 : (_item$choice2 = item.choice) === null || _item$choice2 === void 0 ? void 0 : _item$choice2.value, item === null || item === void 0 ? void 0 : item.value, itemType, item]);
+  (0, _react.useEffect)(function () {
+    var touchMoveListener = function touchMoveListener(event) {
+      return handleTouchMove(event);
+    };
+
+    if (display) {
+      window.addEventListener('touchmove', touchMoveListener);
+    }
+
+    return function () {
+      window.removeEventListener('touchmove', touchMoveListener);
+    };
+  }, [display, handleTouchMove]);
 
   if (!display) {
     return null;
   }
 
-  var customStyle = getCustomStyle(itemType, item, style);
+  var customStyle = getCustomStyle(itemType, item, touchPosition, style);
   var prompt = getPrompt(itemType, item);
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: root,

package/lib/preview-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/preview-component.jsx"],"names":["styles","maskBlank","border","color","minWidth","minHeight","height","maxWidth","display","padding","alignItems","justifyContent","borderRadius","ica","backgroundColor","background","primary","marginLeft","marginTop","width","categorize","text","matchList","boxSizing","placementOrdering","getPrompt","itemType","item","choice","value","undefined","getCustomStyle","style","baseStyle","PreviewComponent","preview","root","current","customStyle","prompt"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { usePreview } from 'react-dnd-multi-backend';\nimport { PreviewPrompt } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\n\nconst styles = {\n  maskBlank: {\n    border: '1px solid black',\n    color: 'black',\n    minWidth: '90px',\n    minHeight: '32px',\n    height: 'auto',\n    maxWidth: '374px',\n    display: 'flex',\n    padding: '4px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: '16px',\n  },\n  ica: {\n    backgroundColor: color.background(),\n    border: `1px solid ${color.primary()}`,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: '28px',\n    padding: '0 3px',\n    marginLeft: 2,\n    marginTop: 2,\n    width: 'fit-content',\n  },\n  categorize: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: '16px',\n    borderRadius: '4px',\n    border: '1px solid',\n  },\n  matchList: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: '10px',\n    boxSizing: 'border-box',\n    border: '1px solid #D1D1D1',\n  },\n  placementOrdering: {\n    padding: '10px',\n    boxSizing: 'border-box',\n    border: '1px solid #D1D1D1',\n    backgroundColor: color.background(),\n  },\n};\n\nconst getPrompt = (itemType, item) => {\n  switch (itemType) {\n    // DRAG-IN-THE-BLANK\n    case 'MaskBlank':\n      return item?.choice?.value;\n    // IMAGE-CLOZE-ASSOCIATION\n    case 'react-dnd-response':\n      return item?.value;\n    // MATCH-LIST\n    case 'Answer':\n      return item?.value;\n    // PLACEMENT-ORDERING\n    case 'Tile':\n      return item?.value;\n    default:\n      return item?.itemType === 'categorize' ? item?.value : undefined;\n  }\n};\n\nconst getCustomStyle = (itemType, item, style) => {\n  const baseStyle = {\n    ...style,\n    ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),\n    ...(item?.itemType === 'categorize' ? styles.categorize : {}),\n    ...(itemType === 'Answer' ? styles.matchList : {}),\n    ...(itemType === 'Tile' ? styles.placementOrdering : {}),\n    ...(itemType === 'react-dnd-response' ? styles.ica : {}),\n  };\n\n  return baseStyle;\n};\n\nconst PreviewComponent = () => {\n  const preview = usePreview();\n  const { itemType, item, style, display } = preview;\n\n  const root = useRef(null);\n\n  useEffect(() => {\n    if (display && root.current) {\n      renderMath(root.current);\n    }\n  }, [display, item?.choice?.value, item?.value, itemType, item]);\n\n  if (!display) {\n    return null;\n  }\n\n  const customStyle = getCustomStyle(itemType, item, style);\n\n  const prompt = getPrompt(itemType, item);\n\n  return (\n    <div ref={root} style={customStyle}>\n      <PreviewPrompt className=\"label\" prompt={prompt} tagName=\"span\" />\n    </div>\n  );\n};\n\nexport default PreviewComponent;\n"],"file":"preview-component.js"}
+{"version":3,"sources":["../src/preview-component.jsx"],"names":["styles","maskBlank","backgroundColor","color","white","border","text","alignItems","display","height","minHeight","fontSize","whiteSpace","maxWidth","borderRadius","padding","ica","background","borderDark","justifyContent","marginLeft","marginTop","width","categorize","matchList","boxSizing","placementOrdering","getPrompt","itemType","item","choice","value","undefined","getCustomStyle","touchPosition","style","transform","x","y","top","left","position","PreviewComponent","preview","setTouchPosition","zoomLevel","setZoomLevel","handleTouchMove","event","touches","length","touch","touchOffset","clientX","clientY","root","current","zoomAffectedElement","document","querySelector","body","parseFloat","getComputedStyle","zoom","touchMoveListener","window","addEventListener","removeEventListener","customStyle","prompt"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { usePreview } from 'react-dnd-multi-backend';\nimport { PreviewPrompt, color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst styles = {\n  maskBlank: {\n    // this style is applied only on small screens and for touch devices when dragging, for drag-in-the-blank.\n    // It is styled to be identical to the drag-in-the-blank chip\n    backgroundColor: color.white(),\n    border: `1px solid ${color.text()}`,\n    color: color.text(),\n    alignItems: 'center',\n    display: 'inline-flex',\n    height: 'initial',\n    minHeight: '32px',\n    fontSize: 'inherit',\n    whiteSpace: 'pre-wrap',\n    maxWidth: '374px',\n    borderRadius: '3px',\n    padding: '12px',\n  },\n  ica: {\n    backgroundColor: color.background(),\n    border: `1px solid ${color.borderDark()}`,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: '28px',\n    padding: '0 3px',\n    marginLeft: 2,\n    marginTop: 2,\n    width: 'fit-content',\n  },\n  categorize: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: '16px',\n    borderRadius: '4px',\n    border: '1px solid',\n  },\n  matchList: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: '10px',\n    boxSizing: 'border-box',\n    border: '1px solid #D1D1D1',\n  },\n  placementOrdering: {\n    padding: '10px',\n    boxSizing: 'border-box',\n    border: '1px solid #D1D1D1',\n    backgroundColor: color.background(),\n  },\n};\n\nconst getPrompt = (itemType, item) => {\n  switch (itemType) {\n    // DRAG-IN-THE-BLANK\n    case 'MaskBlank':\n      return item?.choice?.value;\n    // IMAGE-CLOZE-ASSOCIATION\n    case 'react-dnd-response':\n      return item?.value;\n    // MATCH-LIST\n    case 'Answer':\n      return item?.value;\n    // PLACEMENT-ORDERING\n    case 'Tile':\n      return item?.value;\n    default:\n      return item?.itemType === 'categorize' ? item?.value : undefined;\n  }\n};\n\nconst getCustomStyle = (itemType, item, touchPosition, style) => {\n  const transform = `translate(${touchPosition.x}px, ${touchPosition.y}px)`;\n  const top = style?.top || 0;\n  const left = style?.left || 0;\n  const position = style?.position || 'fixed';\n\n  return {\n    position,\n    top,\n    left,\n    transform,\n    ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),\n    ...(item?.itemType === 'categorize' ? styles.categorize : {}),\n    ...(itemType === 'Answer' ? styles.matchList : {}),\n    ...(itemType === 'Tile' ? styles.placementOrdering : {}),\n    ...(itemType === 'react-dnd-response' ? styles.ica : {}),\n  };\n};\n\nconst PreviewComponent = () => {\n  const preview = usePreview();\n  const { itemType, item, style, display } = preview;\n  const [touchPosition, setTouchPosition] = useState({ x: 0, y: 0 });\n  const [zoomLevel, setZoomLevel] = useState(1);\n\n  const handleTouchMove = useCallback(\n    (event) => {\n      if (event.touches.length > 0) {\n        const touch = event.touches[0];\n        const touchOffset = 1;\n        setTouchPosition({\n          x: (touch.clientX + touchOffset) / zoomLevel,\n          y: (touch.clientY + touchOffset) / zoomLevel,\n        });\n      }\n    },\n    [zoomLevel],\n  );\n\n  const root = useRef(null);\n\n  useEffect(() => {\n    if (display && root.current) {\n      renderMath(root.current);\n\n      // Adjusted for precise zoom level calculation in Online Testing, targeting the specific class pattern .asmt-zoomable.asmt-zoom-NR .asmt-question .padding\n      const zoomAffectedElement = document.querySelector('.padding') || document.body;\n\n      setZoomLevel(parseFloat(getComputedStyle(zoomAffectedElement).zoom) || 1);\n    }\n  }, [display, item?.choice?.value, item?.value, itemType, item]);\n\n  useEffect(() => {\n    const touchMoveListener = (event) => handleTouchMove(event);\n    if (display) {\n      window.addEventListener('touchmove', touchMoveListener);\n    }\n    return () => {\n      window.removeEventListener('touchmove', touchMoveListener);\n    };\n  }, [display, handleTouchMove]);\n\n  if (!display) {\n    return null;\n  }\n\n  const customStyle = getCustomStyle(itemType, item, touchPosition, style);\n\n  const prompt = getPrompt(itemType, item);\n\n  return (\n    <div ref={root} style={customStyle}>\n      <PreviewPrompt className=\"label\" prompt={prompt} tagName=\"span\" />\n    </div>\n  );\n};\n\nexport default PreviewComponent;\n"],"file":"preview-component.js"}

package/lib/with-drag-context.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactDndMultiBackend = _interopRequireWildcard(require("react-dnd-multi-backend"));
@@ -26,7 +28,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var backends = [{
-  backend: _reactDndHtml5Backend.HTML5Backend
+  backend: _reactDndHtml5Backend.HTML5Backend,
+  transition: _reactDndMultiBackend.MouseTransition
 }, {
   backend: _reactDndTouchBackend.TouchBackend,
   options: {
@@ -40,13 +43,15 @@ var backends = [{
 
 var _default = function _default(Component) {
   return function (props) {
-    return /*#__PURE__*/_react["default"].createElement(_reactDnd.DndProvider, {
+    var isClient = typeof window !== 'undefined';
+    return /*#__PURE__*/_react["default"].createElement(_reactDnd.DndProvider, (0, _extends2["default"])({
       backend: _reactDndMultiBackend["default"],
       options: {
         backends: backends
-      },
+      }
+    }, isClient && {
       context: window
-    }, /*#__PURE__*/_react["default"].createElement(Component, props), /*#__PURE__*/_react["default"].createElement(_previewComponent["default"], null));
+    }), /*#__PURE__*/_react["default"].createElement(Component, props), /*#__PURE__*/_react["default"].createElement(_previewComponent["default"], null));
   };
 };
 

package/lib/with-drag-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/with-drag-context.js"],"names":["backends","backend","HTML5Backend","TouchBackend","options","enableMouseEvents","enableTouchEvents","preview","transition","TouchTransition","skipDispatchOnTransition","Component","props","MultiBackend","window"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,IAAMA,QAAQ,GAAG,CACf;AAAEC,EAAAA,OAAO,EAAEC;AAAX,CADe,EAEf;AACED,EAAAA,OAAO,EAAEE,kCADX;AAEEC,EAAAA,OAAO,EAAE;AAAEC,IAAAA,iBAAiB,EAAE,IAArB;AAA2BC,IAAAA,iBAAiB,EAAE;AAA9C,GAFX;AAGEC,EAAAA,OAAO,EAAE,IAHX;AAIEC,EAAAA,UAAU,EAAEC,qCAJd;AAKEC,EAAAA,wBAAwB,EAAE;AAL5B,CAFe,CAAjB;;eAWe,kBAACC,SAAD;AAAA,SAAe,UAACC,KAAD;AAAA,wBAC5B,gCAAC,qBAAD;AAAa,MAAA,OAAO,EAAEC,gCAAtB;AAAoC,MAAA,OAAO,EAAE;AAAEb,QAAAA,QAAQ,EAARA;AAAF,OAA7C;AAA2D,MAAA,OAAO,EAAEc;AAApE,oBACE,gCAAC,SAAD,EAAeF,KAAf,CADF,eAEE,gCAAC,4BAAD,OAFF,CAD4B;AAAA,GAAf;AAAA,C","sourcesContent":["import React from 'react';\nimport MultiBackend, { TouchTransition } from 'react-dnd-multi-backend';\nimport { DndProvider } from 'react-dnd';\nimport { TouchBackend } from 'react-dnd-touch-backend';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nimport PreviewComponent from './preview-component';\n\nconst backends = [\n  { backend: HTML5Backend },\n  {\n    backend: TouchBackend,\n    options: { enableMouseEvents: true, enableTouchEvents: true },\n    preview: true,\n    transition: TouchTransition,\n    skipDispatchOnTransition: true,\n  },\n];\n\nexport default (Component) => (props) => (\n  <DndProvider backend={MultiBackend} options={{ backends }} context={window}>\n    <Component {...props} />\n    <PreviewComponent />\n  </DndProvider>\n);\n"],"file":"with-drag-context.js"}
+{"version":3,"sources":["../src/with-drag-context.js"],"names":["backends","backend","HTML5Backend","transition","MouseTransition","TouchBackend","options","enableMouseEvents","enableTouchEvents","preview","TouchTransition","skipDispatchOnTransition","Component","props","isClient","window","MultiBackend","context"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,IAAMA,QAAQ,GAAG,CACf;AACEC,EAAAA,OAAO,EAAEC,kCADX;AAEEC,EAAAA,UAAU,EAAEC;AAFd,CADe,EAKf;AACEH,EAAAA,OAAO,EAAEI,kCADX;AAEEC,EAAAA,OAAO,EAAE;AAAEC,IAAAA,iBAAiB,EAAE,IAArB;AAA2BC,IAAAA,iBAAiB,EAAE;AAA9C,GAFX;AAGEC,EAAAA,OAAO,EAAE,IAHX;AAIEN,EAAAA,UAAU,EAAEO,qCAJd;AAKEC,EAAAA,wBAAwB,EAAE;AAL5B,CALe,CAAjB;;eAce,kBAACC,SAAD;AAAA,SAAe,UAACC,KAAD,EAAW;AACvC,QAAMC,QAAQ,GAAG,OAAOC,MAAP,KAAkB,WAAnC;AAEA,wBACE,gCAAC,qBAAD;AAAa,MAAA,OAAO,EAAEC,gCAAtB;AAAoC,MAAA,OAAO,EAAE;AAAEhB,QAAAA,QAAQ,EAARA;AAAF;AAA7C,OAAgEc,QAAQ,IAAI;AAAEG,MAAAA,OAAO,EAAEF;AAAX,KAA5E,gBACE,gCAAC,SAAD,EAAeF,KAAf,CADF,eAEE,gCAAC,4BAAD,OAFF,CADF;AAMD,GATc;AAAA,C","sourcesContent":["import React from 'react';\nimport MultiBackend, { TouchTransition, MouseTransition } from 'react-dnd-multi-backend';\nimport { DndProvider } from 'react-dnd';\nimport { TouchBackend } from 'react-dnd-touch-backend';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nimport PreviewComponent from './preview-component';\n\nconst backends = [\n  {\n    backend: HTML5Backend,\n    transition: MouseTransition,\n  },\n  {\n    backend: TouchBackend,\n    options: { enableMouseEvents: true, enableTouchEvents: true },\n    preview: true,\n    transition: TouchTransition,\n    skipDispatchOnTransition: true,\n  },\n];\n\nexport default (Component) => (props) => {\n  const isClient = typeof window !== 'undefined';\n\n  return (\n    <DndProvider backend={MultiBackend} options={{ backends }} {...(isClient && { context: window })}>\n      <Component {...props} />\n      <PreviewComponent />\n    </DndProvider>\n  );\n};\n"],"file":"with-drag-context.js"}

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@pie-lib/drag",
-  "version": "2.2.10-next.1+23991a09",
+  "version": "2.3.0-beta.1",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
     "@material-ui/core": "^3.8.3",
-    "@pie-lib/math-rendering": "2.5.18",
-    "@pie-lib/render-ui": "^4.15.10-next.1+23991a09",
+    "@pie-lib/math-rendering": "latest",
+    "@pie-lib/render-ui": "latest",
     "classnames": "^2.2.6",
     "lodash": "^4.17.11",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.1",
     "react-dnd": "^14.0.5",
     "react-dnd-html5-backend": "^14.0.2",
     "react-dnd-multi-backend": "^6.0.2",
@@ -21,5 +23,5 @@
   "scripts": {},
   "author": "",
   "license": "ISC",
-  "gitHead": "23991a09b77492c24dcb5235049667cdcc211d80"
+  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453"
 }

package/src/__tests__/__snapshots__/placeholder.test.jsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`placeholder snapshot className 1`] = `
+<div
+  className="placeholder bar"
+  style={
+    Object {
+      "minHeight": undefined,
+    }
+  }
+>
+   Foo 
+</div>
+`;
+
+exports[`placeholder snapshot disabled: true 1`] = `
+<div
+  className="placeholder disabled"
+  style={
+    Object {
+      "minHeight": undefined,
+    }
+  }
+>
+   Foo 
+</div>
+`;
+
+exports[`placeholder snapshot isOver: true 1`] = `
+<div
+  className="placeholder over"
+  style={
+    Object {
+      "minHeight": undefined,
+    }
+  }
+>
+   Foo 
+</div>
+`;
+
+exports[`placeholder snapshot reqular 1`] = `
+<div
+  className="placeholder"
+  style={
+    Object {
+      "minHeight": undefined,
+    }
+  }
+>
+   Foo 
+</div>
+`;
+
+exports[`placeholder snapshot specific grid rowsRepeatValue 1`] = `
+<div
+  className="placeholder"
+  style={
+    Object {
+      "gridTemplateColumns": "repeat(1, 1fr)",
+      "gridTemplateRows": "repeat(2, min-content)",
+      "minHeight": undefined,
+    }
+  }
+>
+   Foo 
+</div>
+`;

package/src/__tests__/placeholder.test.jsx

@@ -0,0 +1,48 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { PlaceHolder } from '../placeholder';
+
+describe('placeholder', () => {
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {
+        placeholder: 'placeholder',
+        disabled: 'disabled',
+        over: 'over',
+        number: 'number',
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<PlaceHolder {...props}> Foo </PlaceHolder>);
+  };
+
+  describe('snapshot', () => {
+    it('reqular', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+
+    it('isOver: true', () => {
+      expect(wrapper({ isOver: true })).toMatchSnapshot();
+    });
+
+    it('disabled: true', () => {
+      expect(wrapper({ disabled: true })).toMatchSnapshot();
+    });
+
+    it('className', () => {
+      expect(wrapper({ className: 'bar' })).toMatchSnapshot();
+    });
+
+    it('specific grid rowsRepeatValue', () => {
+      const w = wrapper({
+        grid: {
+          rows: 2,
+          columns: 1,
+          rowsRepeatValue: 'min-content',
+        },
+      });
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/uid-context.test.jsx

@@ -0,0 +1,21 @@
+import { createContext, createElement } from 'react';
+import { withUid } from '../uid-context';
+
+jest.mock('react', () => ({
+  createElement: jest.fn((c) => c),
+  createContext: jest.fn().mockReturnValue({
+    Consumer: jest.fn((fn) => fn),
+    Provider: jest.fn(),
+  }),
+}));
+
+describe('id-context', () => {
+  describe('withUid', () => {
+    it('calls createElement', () => {
+      const Wrapped = withUid(() => ({}));
+
+      const Consumer = Wrapped({});
+      expect(createElement).toBeCalledWith(expect.any(Function), null, expect.anything());
+    });
+  });
+});

package/src/drag-in-the-blank-dp.jsx

@@ -1,5 +1,5 @@
 import { DropTarget } from 'react-dnd';
-import { DroppablePlaceholder } from '../lib/droppable-placeholder';
+import { DroppablePlaceholder } from './droppable-placeholder';
 import dragType from './drag-type';
 
 export const spec = {

package/src/droppable-placeholder.jsx

@@ -4,12 +4,6 @@ import PropTypes from 'prop-types';
 
 const preventInteractionStyle = {
   flex: 1,
-  WebkitTouchCallout: 'none',
-  WebkitUserSelect: 'none',
-  KhtmlUserSelect: 'none',
-  MozUserSelect: 'none',
-  MsUserSelect: 'none',
-  UserSelect: 'none',
 };
 
 export class DroppablePlaceholder extends React.Component {
@@ -19,14 +13,23 @@ export class DroppablePlaceholder extends React.Component {
     isOver: PropTypes.bool,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     disabled: PropTypes.bool,
+    isVerticalPool: PropTypes.bool,
+    minHeight: PropTypes.number,
   };
 
   render() {
-    const { children, connectDropTarget, isOver, disabled, classes } = this.props;
+    const { children, connectDropTarget, isOver, disabled, classes, isVerticalPool, minHeight } = this.props;
 
     return connectDropTarget(
       <div style={preventInteractionStyle}>
-        <PlaceHolder disabled={disabled} isOver={isOver} choiceBoard={true} className={classes}>
+        <PlaceHolder
+          disabled={disabled}
+          isOver={isOver}
+          choiceBoard={true}
+          className={classes}
+          isVerticalPool={isVerticalPool}
+          minHeight={minHeight}
+        >
           {children}
         </PlaceHolder>
       </div>,

package/src/placeholder.jsx

@@ -3,9 +3,23 @@ import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import grey from '@material-ui/core/colors/grey';
+import { color } from '@pie-lib/render-ui';
 
 export const PlaceHolder = (props) => {
-  const { children, classes, className, isOver, type, grid, disabled, choiceBoard } = props;
+  const {
+    children,
+    classes,
+    className,
+    isOver,
+    type,
+    grid,
+    disabled,
+    choiceBoard,
+    isCategorize,
+    isVerticalPool,
+    minHeight,
+  } = props;
+
   const names = classNames(
     classes.placeholder,
     disabled && classes.disabled,
@@ -19,14 +33,33 @@ export const PlaceHolder = (props) => {
   if (grid && grid.columns) {
     style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;
   }
+
   if (grid && grid.rows) {
     const repeatValue = grid.rowsRepeatValue || '1fr';
 
     style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;
   }
 
+  // The "type" is only sent through placement-ordering / placeholder
+  // It can be "choice" or "target"
+  // We apply a different style for the "choice" type
+  // For any other type, use a dashed black border and a white fill
+  if (type === 'choice') {
+    style.border = `1px solid ${color.borderLight()}`;
+    style.background = color.backgroundDark();
+  }
+
+  const boardStyle = isCategorize ? classes.categorizeBoard : classes.board;
+
   return (
-    <div style={style} className={choiceBoard ? classes.board : names}>
+    <div
+      style={{ ...style, minHeight: minHeight }}
+      className={classNames(
+        classes.noSelectStyles,
+        choiceBoard ? boardStyle : names,
+        isVerticalPool && classes.verticalPool,
+      )}
+    >
       {children}
     </div>
   );
@@ -47,20 +80,31 @@ PlaceHolder.propTypes = {
   index: PropTypes.number,
   type: PropTypes.string,
   disabled: PropTypes.bool,
+  isCategorize: PropTypes.bool,
+  isVerticalPool: PropTypes.bool,
+  minHeight: PropTypes.number,
 };
 
 const styles = (theme) => ({
+  noSelectStyles: {
+    WebkitTouchCallout: 'none',
+    WebkitUserSelect: 'none',
+    KhtmlUserSelect: 'none',
+    MozUserSelect: 'none',
+    MsUserSelect: 'none',
+    userSelect: 'none',
+  },
   placeholder: {
     width: '100%',
     height: '100%',
-    background: theme.palette.grey[200],
-    border: '1px solid #D1D1D1',
+    background: color.white(),
     transition: 'background-color 200ms linear, border-color 200ms linear',
     boxSizing: 'border-box',
     display: 'grid',
     gridRowGap: `${theme.spacing.unit}px`,
     gridColumnGap: `${theme.spacing.unit}px`,
     padding: theme.spacing.unit * 1,
+    border: `2px dashed ${color.black()}`,
   },
   disabled: {
     boxShadow: 'none',
@@ -71,15 +115,30 @@ const styles = (theme) => ({
     backgroundColor: `${grey[300]}`,
   },
   board: {
-    border: '1px solid #D1D1D1',
     padding: theme.spacing.unit,
     display: 'flex',
     flexWrap: 'wrap',
     alignItems: 'center',
-    minHeight: '200px',
+    minHeight: '100px',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    touchAction: 'none',
+    backgroundColor: color.backgroundDark(),
+  },
+  categorizeBoard: {
+    padding: theme.spacing.unit / 2,
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    minHeight: '100px',
     justifyContent: 'center',
     overflow: 'hidden',
     touchAction: 'none',
+    backgroundColor: color.backgroundDark(),
+  },
+  verticalPool: {
+    display: 'flex',
+    flexFlow: 'column wrap',
   },
 });
 

package/src/preview-component.jsx

@@ -1,26 +1,28 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { usePreview } from 'react-dnd-multi-backend';
-import { PreviewPrompt } from '@pie-lib/render-ui';
+import { PreviewPrompt, color } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
-import { color } from '@pie-lib/render-ui';
 
 const styles = {
   maskBlank: {
-    border: '1px solid black',
-    color: 'black',
-    minWidth: '90px',
+    // this style is applied only on small screens and for touch devices when dragging, for drag-in-the-blank.
+    // It is styled to be identical to the drag-in-the-blank chip
+    backgroundColor: color.white(),
+    border: `1px solid ${color.text()}`,
+    color: color.text(),
+    alignItems: 'center',
+    display: 'inline-flex',
+    height: 'initial',
     minHeight: '32px',
-    height: 'auto',
+    fontSize: 'inherit',
+    whiteSpace: 'pre-wrap',
     maxWidth: '374px',
-    display: 'flex',
-    padding: '4px',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '16px',
+    borderRadius: '3px',
+    padding: '12px',
   },
   ica: {
     backgroundColor: color.background(),
-    border: `1px solid ${color.primary()}`,
+    border: `1px solid ${color.borderDark()}`,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -71,36 +73,73 @@ const getPrompt = (itemType, item) => {
   }
 };
 
-const getCustomStyle = (itemType, item, style) => {
-  const baseStyle = {
-    ...style,
+const getCustomStyle = (itemType, item, touchPosition, style) => {
+  const transform = `translate(${touchPosition.x}px, ${touchPosition.y}px)`;
+  const top = style?.top || 0;
+  const left = style?.left || 0;
+  const position = style?.position || 'fixed';
+
+  return {
+    position,
+    top,
+    left,
+    transform,
     ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),
     ...(item?.itemType === 'categorize' ? styles.categorize : {}),
     ...(itemType === 'Answer' ? styles.matchList : {}),
     ...(itemType === 'Tile' ? styles.placementOrdering : {}),
     ...(itemType === 'react-dnd-response' ? styles.ica : {}),
   };
-
-  return baseStyle;
 };
 
 const PreviewComponent = () => {
   const preview = usePreview();
   const { itemType, item, style, display } = preview;
+  const [touchPosition, setTouchPosition] = useState({ x: 0, y: 0 });
+  const [zoomLevel, setZoomLevel] = useState(1);
+
+  const handleTouchMove = useCallback(
+    (event) => {
+      if (event.touches.length > 0) {
+        const touch = event.touches[0];
+        const touchOffset = 1;
+        setTouchPosition({
+          x: (touch.clientX + touchOffset) / zoomLevel,
+          y: (touch.clientY + touchOffset) / zoomLevel,
+        });
+      }
+    },
+    [zoomLevel],
+  );
 
   const root = useRef(null);
 
   useEffect(() => {
     if (display && root.current) {
       renderMath(root.current);
+
+      // Adjusted for precise zoom level calculation in Online Testing, targeting the specific class pattern .asmt-zoomable.asmt-zoom-NR .asmt-question .padding
+      const zoomAffectedElement = document.querySelector('.padding') || document.body;
+
+      setZoomLevel(parseFloat(getComputedStyle(zoomAffectedElement).zoom) || 1);
     }
   }, [display, item?.choice?.value, item?.value, itemType, item]);
 
+  useEffect(() => {
+    const touchMoveListener = (event) => handleTouchMove(event);
+    if (display) {
+      window.addEventListener('touchmove', touchMoveListener);
+    }
+    return () => {
+      window.removeEventListener('touchmove', touchMoveListener);
+    };
+  }, [display, handleTouchMove]);
+
   if (!display) {
     return null;
   }
 
-  const customStyle = getCustomStyle(itemType, item, style);
+  const customStyle = getCustomStyle(itemType, item, touchPosition, style);
 
   const prompt = getPrompt(itemType, item);
 

package/src/with-drag-context.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import MultiBackend, { TouchTransition } from 'react-dnd-multi-backend';
+import MultiBackend, { TouchTransition, MouseTransition } from 'react-dnd-multi-backend';
 import { DndProvider } from 'react-dnd';
 import { TouchBackend } from 'react-dnd-touch-backend';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -7,7 +7,10 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import PreviewComponent from './preview-component';
 
 const backends = [
-  { backend: HTML5Backend },
+  {
+    backend: HTML5Backend,
+    transition: MouseTransition,
+  },
   {
     backend: TouchBackend,
     options: { enableMouseEvents: true, enableTouchEvents: true },
@@ -17,9 +20,13 @@ const backends = [
   },
 ];
 
-export default (Component) => (props) => (
-  <DndProvider backend={MultiBackend} options={{ backends }} context={window}>
-    <Component {...props} />
-    <PreviewComponent />
-  </DndProvider>
-);
+export default (Component) => (props) => {
+  const isClient = typeof window !== 'undefined';
+
+  return (
+    <DndProvider backend={MultiBackend} options={{ backends }} {...(isClient && { context: window })}>
+      <Component {...props} />
+      <PreviewComponent />
+    </DndProvider>
+  );
+};

package/README.md

@@ -1,3 +0,0 @@
-# @pie-lib/drag
-
-Some shared components for drag.