@pie-element/placement-ordering 12.3.4-next.0 → 13.0.0-beta.0

package/lib/tile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tile.jsx"],"names":["log","Holder","theme","number","width","fontSize","typography","textAlign","color","palette","common","black","classes","type","index","isOver","disabled","undefined","propTypes","PropTypes","string","bool","TileContent","over","opacity","tileContent","cursor","height","padding","boxSizing","overflow","border","grey","backgroundColor","background","transition","pointerEvents","secondary","dragging","secondaryLight","incorrect","correct","emptyTile","props","isDragging","empty","label","outcome","guideIndex","names","__html","Tile","e","preventDefault","ref","addEventListener","handleTouchStart","passive","removeEventListener","connectDragSource","connectDropTarget","id","name","title","dragSourceOpts","React","Component","func","isRequired","any","object","StyledTile","margin","tileTarget","drop","monitor","draggedItem","getItem","instanceId","onDropChoice","canDrop","DropTile","connect","dropTarget","tileSource","canDrag","draggable","beginDrag","value","endDrag","didDrop","onRemoveChoice","DragDropTile","dragSource"],"mappings":"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","sourcesContent":["import { DragSource, DropTarget } from 'react-dnd';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\nimport { PlaceHolder } from '@pie-lib/drag';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('pie-elements:placement-ordering:tile');\n\nconst Holder = withStyles((theme) => ({\n  number: {\n    width: '100%',\n    fontSize: theme.typography.fontSize + 4,\n    textAlign: 'center',\n    color: `rgba(${theme.palette.common.black}, 0.6)`,\n  },\n}))(({ classes, type, index, isOver, disabled }) => (\n  <PlaceHolder type={type} isOver={isOver} disabled={disabled}>\n    {type === 'target' && index !== undefined && <div className={classes.number}>{index}</div>}\n  </PlaceHolder>\n));\n\nHolder.propTypes = {\n  type: PropTypes.string,\n  index: PropTypes.number,\n  isOver: PropTypes.bool,\n  disabled: PropTypes.bool,\n};\n\nconst TileContent = withStyles((theme) => ({\n  over: {\n    opacity: 0.2,\n  },\n  tileContent: {\n    cursor: 'pointer',\n    width: '100%',\n    height: '100%',\n    padding: '10px',\n    boxSizing: 'border-box',\n    overflow: 'hidden',\n    border: `1px solid ${theme.palette.grey[400]}`,\n    backgroundColor: color.background(),\n    transition: 'opacity 200ms linear',\n    pointerEvents: 'none',\n    '&:hover': {\n      backgroundColor: color.secondary(),\n    },\n  },\n  dragging: {\n    backgroundColor: color.secondaryLight(),\n    opacity: 0.5,\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    '&:hover': {\n      backgroundColor: color.background(),\n    },\n  },\n  incorrect: {\n    border: `1px solid ${color.incorrect()}`,\n  },\n  correct: {\n    border: `1px solid ${color.correct()}`,\n  },\n  emptyTile: {\n    border: 'none',\n    '&:hover': {\n      backgroundColor: 'unset',\n    },\n  },\n}))((props) => {\n  const { type, classes, isDragging, empty, isOver, label, disabled, outcome, guideIndex } = props;\n\n  if (empty) {\n    return <Holder type={type} index={guideIndex} isOver={isOver} disabled={disabled} />;\n  } else {\n    const names = classNames(\n      classes.tileContent,\n      !label ? classes.emptyTile : null,\n      isDragging && !disabled && classes.dragging,\n      isOver && !disabled && classes.over,\n      disabled && classes.disabled,\n      outcome && classes[outcome],\n    );\n    return <div className={names} dangerouslySetInnerHTML={{ __html: label }} />;\n  }\n});\n\nexport class Tile extends React.Component {\n  static propTypes = {\n    connectDragSource: PropTypes.func.isRequired,\n    connectDropTarget: PropTypes.func.isRequired,\n    isDragging: PropTypes.bool.isRequired,\n    id: PropTypes.any,\n    label: PropTypes.string,\n    isOver: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    type: PropTypes.string,\n    empty: PropTypes.bool,\n    disabled: PropTypes.bool,\n    outcome: PropTypes.string,\n    index: PropTypes.number,\n    guideIndex: PropTypes.number,\n  };\n\n  componentDidMount() {\n    if (this.ref) {\n      this.ref.addEventListener('touchstart', this.handleTouchStart, { passive: false });\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.ref) {\n      this.ref.removeEventListener('touchstart', this.handleTouchStart);\n    }\n  }\n\n  handleTouchStart = (e) => {\n    e.preventDefault(); // Prevent the default touch event behavior\n  };\n\n  render() {\n    const {\n      label,\n      isDragging,\n      connectDragSource,\n      connectDropTarget,\n      classes,\n      isOver,\n      type,\n      id,\n      empty,\n      disabled,\n      outcome,\n      index,\n      guideIndex,\n    } = this.props;\n\n    log('[render], props: ', this.props);\n\n    const name = classNames(classes.title);\n\n    const dragSourceOpts = {\n      //dropEffect: moveOnDrag ? 'move' : 'copy'\n    };\n\n    return connectDragSource(\n      connectDropTarget(\n        <div className={name} ref={(ref) => (this.ref = ref)}>\n          <TileContent\n            label={label}\n            id={id}\n            empty={empty}\n            index={index}\n            guideIndex={guideIndex}\n            isOver={isOver}\n            isDragging={isDragging}\n            disabled={disabled}\n            outcome={outcome}\n            type={type}\n          />\n        </div>,\n      ),\n      dragSourceOpts,\n    );\n  }\n}\n\nconst StyledTile = withStyles({\n  title: {\n    boxSizing: 'border-box',\n    overflow: 'hidden',\n    margin: '0px',\n    padding: '0px',\n    textAlign: 'center',\n  },\n})(Tile);\n\nconst tileTarget = {\n  drop(props, monitor) {\n    const draggedItem = monitor.getItem();\n    log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);\n    if (draggedItem.instanceId === props.instanceId) {\n      props.onDropChoice(draggedItem, props.index);\n    }\n  },\n  canDrop(props, monitor) {\n    const draggedItem = monitor.getItem();\n    const canDrop = draggedItem.instanceId === props.instanceId;\n    return canDrop;\n  },\n};\n\nconst DropTile = DropTarget('Tile', tileTarget, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(StyledTile);\n\nconst tileSource = {\n  canDrag(props) {\n    return props.draggable && !props.disabled;\n  },\n  beginDrag(props) {\n    return {\n      id: props.id,\n      type: props.type,\n      instanceId: props.instanceId,\n      value: props.label,\n    };\n  },\n  endDrag(props, monitor) {\n    if (!monitor.didDrop()) {\n      if (props.type === 'target') {\n        props.onRemoveChoice(monitor.getItem());\n      }\n    }\n  },\n};\n\nconst DragDropTile = DragSource('Tile', tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(DropTile);\n\nexport default DragDropTile;\n"],"file":"tile.js"}
+{"version":3,"file":"tile.js","names":["_react","_interopRequireDefault","require","_propTypes","_debug","_core","_styles","_drag","_renderUi","log","debug","StyledNumberContainer","styled","theme","width","fontSize","typography","textAlign","color","palette","common","black","Holder","type","index","isOver","disabled","default","createElement","PlaceHolder","undefined","propTypes","PropTypes","string","number","bool","StyledTileContent","isDragging","outcome","label","cursor","height","padding","boxSizing","overflow","border","grey","backgroundColor","background","transition","pointerEvents","secondary","opacity","secondaryLight","incorrect","correct","TileContent","props","empty","guideIndex","dangerouslySetInnerHTML","__html","Tile","id","instanceId","draggable","attributes","listeners","setNodeRef","setDragRef","transform","useDraggable","data","value","setDropRef","dropIsOver","useDroppable","ref","React","useRef","useEffect","currentRef","current","handleTouchStart","e","preventDefault","addEventListener","passive","removeEventListener","setRefs","element","style","x","y","margin","_extends2","exports","any","_default"],"sources":["../src/tile.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debug from 'debug';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\n\nimport { PlaceHolder } from '@pie-lib/drag';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('pie-elements:placement-ordering:tile');\n\nconst StyledNumberContainer = styled('div')(({ theme }) => ({\n  width: '100%',\n  fontSize: theme.typography.fontSize + 4,\n  textAlign: 'center',\n  color: `rgba(${theme.palette.common.black}, 0.6)`,\n}));\n\nconst Holder = ({ type, index, isOver, disabled }) => (\n  <PlaceHolder type={type} isOver={isOver} disabled={disabled}>\n    {type === 'target' && index !== undefined && <StyledNumberContainer>{index}</StyledNumberContainer>}\n  </PlaceHolder>\n);\n\nHolder.propTypes = {\n  type: PropTypes.string,\n  index: PropTypes.number,\n  isOver: PropTypes.bool,\n  disabled: PropTypes.bool,\n};\n\nconst StyledTileContent = styled('div')(({ theme, isDragging, isOver, disabled, outcome, label }) => ({\n  cursor: 'pointer',\n  width: '100%',\n  height: '100%',\n  padding: '10px',\n  boxSizing: 'border-box',\n  overflow: 'hidden',\n  border: `1px solid ${theme.palette.grey[400]}`,\n  backgroundColor: color.background(),\n  transition: 'opacity 200ms linear',\n  pointerEvents: 'none',\n  '&:hover': {\n    backgroundColor: color.secondary(),\n  },\n\n  // Apply conditional styles based on props\n  ...(isOver && !disabled && {\n    opacity: 0.2,\n  }),\n\n  ...(isDragging && !disabled && {\n    opacity: 0.5,\n    backgroundColor: color.secondaryLight(),\n  }),\n\n  ...(disabled && {\n    cursor: 'not-allowed',\n    '&:hover': {\n      backgroundColor: color.background(),\n    },\n  }),\n\n  ...(outcome === 'incorrect' && {\n    border: `1px solid ${color.incorrect()}`,\n  }),\n\n  ...(outcome === 'correct' && {\n    border: `1px solid ${color.correct()}`,\n  }),\n\n  ...(!label && {\n    border: 'none',\n    '&:hover': {\n      backgroundColor: 'unset',\n    },\n  }),\n}));\n\nconst TileContent = (props) => {\n  const { type, isDragging, empty, isOver, label, disabled, outcome, guideIndex } = props;\n\n  if (empty) {\n    return <Holder type={type} index={guideIndex} isOver={isOver} disabled={disabled} />;\n  } else {\n    return (\n      <StyledTileContent\n        isDragging={isDragging}\n        isOver={isOver}\n        disabled={disabled}\n        outcome={outcome}\n        label={label}\n        dangerouslySetInnerHTML={{ __html: label }}\n      />\n    );\n  }\n};\n\nexport const Tile = (props) => {\n  const {\n    label,\n    type,\n    id,\n    empty,\n    disabled,\n    outcome,\n    index,\n    guideIndex,\n    instanceId,\n    draggable,\n  } = props;\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef: setDragRef,\n    transform,\n    isDragging,\n  } = useDraggable({\n    id: `tile-${id}-${instanceId}`,\n    data: {\n      id,\n      type,\n      instanceId,\n      value: label,\n      index\n    },\n    disabled: !draggable || disabled,\n  });\n\n  const {\n    setNodeRef: setDropRef,\n    isOver: dropIsOver,\n  } = useDroppable({\n    id: `drop-tile-${id ? id : index}-${instanceId}`,\n    data: {\n      id,\n      type,\n      instanceId,\n      value: label,\n      index\n    },\n  });\n\n  const ref = React.useRef(null);\n\n  React.useEffect(() => {\n    const currentRef = ref.current;\n\n    const handleTouchStart = (e) => {\n      e.preventDefault(); // Prevent the default touch event behavior\n    };\n\n    if (currentRef) {\n      currentRef.addEventListener('touchstart', handleTouchStart, { passive: false });\n    }\n\n    return () => {\n      if (currentRef) {\n        currentRef.removeEventListener('touchstart', handleTouchStart);\n      }\n    };\n  }, []);\n\n  const setRefs = (element) => {\n    ref.current = element;\n    setDragRef(element);\n    setDropRef(element);\n  };\n\n  log('[render], props: ', props);\n\n  const style = {\n    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,\n    boxSizing: 'border-box',\n    overflow: 'hidden',\n    padding: 0,\n    margin: 0,\n    textAlign: 'center',\n  };\n\n  return (\n    <div\n      ref={setRefs}\n      style={style}\n      {...(draggable && !disabled ? { ...listeners, ...attributes } : {})}\n    >\n      <TileContent\n        label={label}\n        id={id}\n        empty={empty}\n        index={index}\n        guideIndex={guideIndex}\n        isOver={dropIsOver}\n        isDragging={isDragging}\n        disabled={disabled}\n        outcome={outcome}\n        type={type}\n      />\n    </div>\n  );\n};\n\nTile.propTypes = {\n  id: PropTypes.any,\n  label: PropTypes.string,\n  isOver: PropTypes.bool,\n  type: PropTypes.string,\n  empty: PropTypes.bool,\n  disabled: PropTypes.bool,\n  outcome: PropTypes.string,\n  index: PropTypes.number,\n  guideIndex: PropTypes.number,\n  instanceId: PropTypes.any,\n  draggable: PropTypes.bool,\n};\n\nexport default Tile;\n"],"mappings":"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","ignoreList":[]}

package/lib/tiler.js

@@ -1,241 +1,163 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VerticalTiler = exports.HorizontalTiler = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
+var _styles = require("@mui/material/styles");
 var _tile = _interopRequireDefault(require("./tile"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-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 common = {
-  tiler: {
-    display: 'grid'
-  },
-  withGap: {
-    gridGap: '10px'
-  }
+const types = {
+  choiceLabel: _propTypes.default.string,
+  targetLabel: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  tiles: _propTypes.default.array.isRequired,
+  tileSize: _propTypes.default.string,
+  addGuide: _propTypes.default.bool
 };
-var types = {
-  choiceLabel: _propTypes["default"].string,
-  targetLabel: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  onDropChoice: _propTypes["default"].func.isRequired,
-  tiles: _propTypes["default"].array.isRequired,
-  tileSize: _propTypes["default"].string,
-  addGuide: _propTypes["default"].bool
-};
-var defaults = {
+const defaults = {
   tileSize: '1fr',
   disabled: false,
   addGuide: false
 };
-
-var buildTiles = function buildTiles(props) {
-  var T = function T(tile, index) {
-    tile.onDropChoice = function (source, index) {
-      return props.onDropChoice(tile, source, index);
-    };
-
-    tile.onRemoveChoice = function () {
-      return props.onRemoveChoice(tile);
-    };
-
+const buildTiles = props => {
+  const T = (tile, index) => {
     tile.instanceId = props.instanceId;
     tile.disabled = props.disabled;
     tile.guideIndex = props.addGuide ? tile.index + 1 : undefined;
-
     if (props.includeTargets) {
-      return /*#__PURE__*/_react["default"].createElement(_tile["default"], (0, _extends2["default"])({}, tile, {
+      return /*#__PURE__*/_react.default.createElement(_tile.default, (0, _extends2.default)({}, tile, {
         key: index
       }));
     } else {
-      return tile.type === 'choice' ? /*#__PURE__*/_react["default"].createElement(_tile["default"], (0, _extends2["default"])({}, tile, {
+      return tile.type === 'choice' ? /*#__PURE__*/_react.default.createElement(_tile.default, (0, _extends2.default)({}, tile, {
         key: index
-      })) : /*#__PURE__*/_react["default"].createElement(_tile["default"], (0, _extends2["default"])({}, tile, {
+      })) : /*#__PURE__*/_react.default.createElement(_tile.default, (0, _extends2.default)({}, tile, {
         label: "",
         key: index
       }));
     }
   };
-
-  T.propTypes = _objectSpread({}, types);
+  T.propTypes = {
+    ...types
+  };
   return T;
 };
-
-var HTiler = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(HTiler, _React$Component);
-
-  var _super = _createSuper(HTiler);
-
-  function HTiler() {
-    (0, _classCallCheck2["default"])(this, HTiler);
-    return _super.apply(this, arguments);
+const StyledHTilerContainer = (0, _styles.styled)('div')(({
+  theme,
+  includeTargets
+}) => ({
+  display: 'grid',
+  paddingBottom: theme.spacing(2),
+  ...(includeTargets && {
+    gridGap: '10px'
+  })
+}));
+const StyledChoiceLabel = (0, _styles.styled)('div')({
+  textAlign: 'center'
+});
+const StyledTargetLabel = (0, _styles.styled)('div')({
+  textAlign: 'center',
+  gridRow: '3/4'
+});
+const StyledVTilerContainer = (0, _styles.styled)('div')(({
+  includeTargets
+}) => ({
+  gridAutoFlow: 'column',
+  display: 'grid',
+  ...(includeTargets && {
+    gridGap: '10px'
+  })
+}));
+const StyledVChoiceLabel = (0, _styles.styled)('div')({
+  gridColumn: '1/2',
+  textAlign: 'center'
+});
+const StyledVTargetLabel = (0, _styles.styled)('div')({
+  gridColumn: '2/3',
+  textAlign: 'center'
+});
+class HorizontalTiler extends _react.default.Component {
+  render() {
+    const {
+      includeTargets,
+      choiceLabelEnabled,
+      choiceLabel,
+      targetLabel,
+      tiles,
+      tileSize
+    } = this.props;
+    const rows = includeTargets ? `auto ${tileSize} auto ${tileSize}` : `auto ${tileSize} auto`;
+    const columns = includeTargets ? tiles.length / 2 : tiles.length;
+    const style = {
+      gridTemplateColumns: includeTargets ? `repeat(${columns}, ${tileSize})` : `auto repeat(${Math.floor(columns / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`,
+      gridTemplateRows: rows
+    };
+    const labelStyle = {
+      gridColumn: `1/${columns + 1}`
+    };
+    return /*#__PURE__*/_react.default.createElement(StyledHTilerContainer, {
+      includeTargets: includeTargets,
+      style: style
+    }, /*#__PURE__*/_react.default.createElement(StyledChoiceLabel, {
+      style: labelStyle,
+      dangerouslySetInnerHTML: {
+        __html: choiceLabelEnabled ? choiceLabel : ''
+      }
+    }), includeTargets && /*#__PURE__*/_react.default.createElement(StyledTargetLabel, {
+      style: labelStyle,
+      dangerouslySetInnerHTML: {
+        __html: targetLabel
+      }
+    }), tiles.map(buildTiles(this.props)));
   }
-
-  (0, _createClass2["default"])(HTiler, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          includeTargets = _this$props.includeTargets,
-          choiceLabelEnabled = _this$props.choiceLabelEnabled,
-          choiceLabel = _this$props.choiceLabel,
-          targetLabel = _this$props.targetLabel,
-          tiles = _this$props.tiles,
-          classes = _this$props.classes,
-          tileSize = _this$props.tileSize;
-      var rows = includeTargets ? "auto ".concat(tileSize, " auto ").concat(tileSize) : "auto ".concat(tileSize, " auto");
-      var columns = includeTargets ? tiles.length / 2 : tiles.length;
-      var style = {
-        gridTemplateColumns: includeTargets ? "repeat(".concat(columns, ", ").concat(tileSize, ")") : "auto repeat(".concat(Math.floor(columns / 2) - 1, ", ").concat(tileSize, " 10px) ").concat(tileSize, " auto"),
-        gridTemplateRows: rows
-      };
-      var labelStyle = {
-        gridColumn: "1/".concat(columns + 1)
-      };
-      var names = (0, _classnames["default"])(classes.htiler, includeTargets ? classes.withGap : null);
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: names,
-        style: style
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.choiceLabel,
-        style: labelStyle,
-        dangerouslySetInnerHTML: {
-          __html: choiceLabelEnabled ? choiceLabel : ''
-        }
-      }), includeTargets && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.targetLabel,
-        style: labelStyle,
-        dangerouslySetInnerHTML: {
-          __html: targetLabel
-        }
-      }), tiles.map(buildTiles(this.props)));
-    }
-  }]);
-  return HTiler;
-}(_react["default"].Component);
-
-(0, _defineProperty2["default"])(HTiler, "propTypes", _objectSpread({}, types));
-(0, _defineProperty2["default"])(HTiler, "defaultProps", _objectSpread({}, defaults));
-
-var horizontalStyles = function horizontalStyles(theme) {
-  return {
-    htiler: _objectSpread(_objectSpread({}, common.tiler), {}, {
-      paddingBottom: theme.spacing.unit * 2
-    }),
-    paddingBottom: theme.spacing.unit * 4,
-    choiceLabel: {
-      textAlign: 'center'
-    },
-    targetLabel: {
-      textAlign: 'center',
-      gridRow: '3/4'
-    },
-    withGap: {
-      gridGap: '10px'
-    }
-  };
-};
-
-var HorizontalTiler = (0, _styles.withStyles)(horizontalStyles)(HTiler);
+}
 exports.HorizontalTiler = HorizontalTiler;
-
-var VTiler = /*#__PURE__*/function (_React$Component2) {
-  (0, _inherits2["default"])(VTiler, _React$Component2);
-
-  var _super2 = _createSuper(VTiler);
-
-  function VTiler() {
-    (0, _classCallCheck2["default"])(this, VTiler);
-    return _super2.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(VTiler, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          includeTargets = _this$props2.includeTargets,
-          choiceLabelEnabled = _this$props2.choiceLabelEnabled,
-          choiceLabel = _this$props2.choiceLabel,
-          targetLabel = _this$props2.targetLabel,
-          tiles = _this$props2.tiles,
-          classes = _this$props2.classes,
-          tileSize = _this$props2.tileSize;
-      var columns = includeTargets ? 2 : 1;
-      var rows = includeTargets ? tiles.length / 2 : tiles.length;
-      var style = {
-        gridTemplateColumns: "repeat(".concat(columns, ", ").concat(tileSize, ")"),
-        gridTemplateRows: includeTargets ? "auto repeat(".concat(rows, ", ").concat(tileSize, ")") : "auto auto repeat(".concat(Math.floor(rows / 2) - 1, ", ").concat(tileSize, " 10px) ").concat(tileSize, " auto")
-      };
-      var names = (0, _classnames["default"])(classes.vtiler, includeTargets ? classes.withGap : null);
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: names,
-        style: style
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.choiceLabel,
-        dangerouslySetInnerHTML: {
-          __html: choiceLabelEnabled ? choiceLabel : ''
-        }
-      }), includeTargets && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.targetLabel,
-        dangerouslySetInnerHTML: {
-          __html: targetLabel
-        }
-      }), tiles.map(buildTiles(this.props)));
-    }
-  }]);
-  return VTiler;
-}(_react["default"].Component);
-
-(0, _defineProperty2["default"])(VTiler, "propTypes", _objectSpread({}, types));
-(0, _defineProperty2["default"])(VTiler, "defaultProps", _objectSpread({}, defaults));
-var verticalStyles = {
-  vtiler: _objectSpread({
-    gridAutoFlow: 'column'
-  }, common.tiler),
-  choiceLabel: {
-    gridColumn: '1/2',
-    textAlign: 'center'
-  },
-  targetLabel: {
-    gridColumn: '2/3',
-    textAlign: 'center'
-  },
-  withGap: {
-    gridGap: '10px'
+(0, _defineProperty2.default)(HorizontalTiler, "propTypes", {
+  ...types
+});
+(0, _defineProperty2.default)(HorizontalTiler, "defaultProps", {
+  ...defaults
+});
+class VerticalTiler extends _react.default.Component {
+  render() {
+    const {
+      includeTargets,
+      choiceLabelEnabled,
+      choiceLabel,
+      targetLabel,
+      tiles,
+      tileSize
+    } = this.props;
+    const columns = includeTargets ? 2 : 1;
+    const rows = includeTargets ? tiles.length / 2 : tiles.length;
+    const style = {
+      gridTemplateColumns: `repeat(${columns}, ${tileSize})`,
+      gridTemplateRows: includeTargets ? `auto repeat(${rows}, ${tileSize})` : `auto auto repeat(${Math.floor(rows / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`
+    };
+    return /*#__PURE__*/_react.default.createElement(StyledVTilerContainer, {
+      includeTargets: includeTargets,
+      style: style
+    }, /*#__PURE__*/_react.default.createElement(StyledVChoiceLabel, {
+      dangerouslySetInnerHTML: {
+        __html: choiceLabelEnabled ? choiceLabel : ''
+      }
+    }), includeTargets && /*#__PURE__*/_react.default.createElement(StyledVTargetLabel, {
+      dangerouslySetInnerHTML: {
+        __html: targetLabel
+      }
+    }), tiles.map(buildTiles(this.props)));
   }
-};
-var VerticalTiler = (0, _styles.withStyles)(verticalStyles)(VTiler);
+}
 exports.VerticalTiler = VerticalTiler;
+(0, _defineProperty2.default)(VerticalTiler, "propTypes", {
+  ...types
+});
+(0, _defineProperty2.default)(VerticalTiler, "defaultProps", {
+  ...defaults
+});
 //# sourceMappingURL=tiler.js.map

package/lib/tiler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tiler.jsx"],"names":["common","tiler","display","withGap","gridGap","types","choiceLabel","PropTypes","string","targetLabel","disabled","bool","onDropChoice","func","isRequired","tiles","array","tileSize","addGuide","defaults","buildTiles","props","T","tile","index","source","onRemoveChoice","instanceId","guideIndex","undefined","includeTargets","type","propTypes","HTiler","choiceLabelEnabled","classes","rows","columns","length","style","gridTemplateColumns","Math","floor","gridTemplateRows","labelStyle","gridColumn","names","htiler","__html","map","React","Component","horizontalStyles","theme","paddingBottom","spacing","unit","textAlign","gridRow","HorizontalTiler","VTiler","vtiler","verticalStyles","gridAutoFlow","VerticalTiler"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport Tile from './tile';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nconst common = {\n  tiler: {\n    display: 'grid',\n  },\n  withGap: {\n    gridGap: '10px',\n  },\n};\n\nconst types = {\n  choiceLabel: PropTypes.string,\n  targetLabel: PropTypes.string,\n  disabled: PropTypes.bool,\n  onDropChoice: PropTypes.func.isRequired,\n  tiles: PropTypes.array.isRequired,\n  tileSize: PropTypes.string,\n  addGuide: PropTypes.bool,\n};\n\nconst defaults = {\n  tileSize: '1fr',\n  disabled: false,\n  addGuide: false,\n};\n\nconst buildTiles = (props) => {\n  const T = (tile, index) => {\n    tile.onDropChoice = (source, index) => props.onDropChoice(tile, source, index);\n    tile.onRemoveChoice = () => props.onRemoveChoice(tile);\n    tile.instanceId = props.instanceId;\n    tile.disabled = props.disabled;\n    tile.guideIndex = props.addGuide ? tile.index + 1 : undefined;\n\n    if (props.includeTargets) {\n      return <Tile {...tile} key={index} />;\n    } else {\n      return tile.type === 'choice' ? <Tile {...tile} key={index} /> : <Tile {...tile} label=\"\" key={index} />;\n    }\n  };\n\n  T.propTypes = { ...types };\n  return T;\n};\n\nclass HTiler extends React.Component {\n  static propTypes = { ...types };\n  static defaultProps = { ...defaults };\n  render() {\n    const { includeTargets, choiceLabelEnabled, choiceLabel, targetLabel, tiles, classes, tileSize } = this.props;\n\n    const rows = includeTargets ? `auto ${tileSize} auto ${tileSize}` : `auto ${tileSize} auto`;\n    const columns = includeTargets ? tiles.length / 2 : tiles.length;\n\n    const style = {\n      gridTemplateColumns: includeTargets\n        ? `repeat(${columns}, ${tileSize})`\n        : `auto repeat(${Math.floor(columns / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`,\n      gridTemplateRows: rows,\n    };\n\n    const labelStyle = {\n      gridColumn: `1/${columns + 1}`,\n    };\n\n    const names = classNames(classes.htiler, includeTargets ? classes.withGap : null);\n\n    return (\n      <div className={names} style={style}>\n        <div\n          className={classes.choiceLabel}\n          style={labelStyle}\n          dangerouslySetInnerHTML={{ __html: choiceLabelEnabled ? choiceLabel : '' }}\n        />\n\n        {includeTargets && (\n          <div className={classes.targetLabel} style={labelStyle} dangerouslySetInnerHTML={{ __html: targetLabel }} />\n        )}\n        {tiles.map(buildTiles(this.props))}\n      </div>\n    );\n  }\n}\n\nconst horizontalStyles = (theme) => ({\n  htiler: { ...common.tiler, paddingBottom: theme.spacing.unit * 2 },\n  paddingBottom: theme.spacing.unit * 4,\n  choiceLabel: {\n    textAlign: 'center',\n  },\n  targetLabel: {\n    textAlign: 'center',\n    gridRow: '3/4',\n  },\n  withGap: {\n    gridGap: '10px',\n  },\n});\n\nexport const HorizontalTiler = withStyles(horizontalStyles)(HTiler);\n\nclass VTiler extends React.Component {\n  static propTypes = { ...types };\n  static defaultProps = { ...defaults };\n  render() {\n    const { includeTargets, choiceLabelEnabled, choiceLabel, targetLabel, tiles, classes, tileSize } = this.props;\n\n    const columns = includeTargets ? 2 : 1;\n    const rows = includeTargets ? tiles.length / 2 : tiles.length;\n\n    const style = {\n      gridTemplateColumns: `repeat(${columns}, ${tileSize})`,\n      gridTemplateRows: includeTargets\n        ? `auto repeat(${rows}, ${tileSize})`\n        : `auto auto repeat(${Math.floor(rows / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`,\n    };\n\n    const names = classNames(classes.vtiler, includeTargets ? classes.withGap : null);\n\n    return (\n      <div className={names} style={style}>\n        <div\n          className={classes.choiceLabel}\n          dangerouslySetInnerHTML={{ __html: choiceLabelEnabled ? choiceLabel : '' }}\n        />\n\n        {includeTargets && <div className={classes.targetLabel} dangerouslySetInnerHTML={{ __html: targetLabel }} />}\n        {tiles.map(buildTiles(this.props))}\n      </div>\n    );\n  }\n}\n\nconst verticalStyles = {\n  vtiler: { gridAutoFlow: 'column', ...common.tiler },\n  choiceLabel: {\n    gridColumn: '1/2',\n    textAlign: 'center',\n  },\n  targetLabel: {\n    gridColumn: '2/3',\n    textAlign: 'center',\n  },\n  withGap: {\n    gridGap: '10px',\n  },\n};\n\nexport const VerticalTiler = withStyles(verticalStyles)(VTiler);\n"],"file":"tiler.js"}
+{"version":3,"file":"tiler.js","names":["_propTypes","_interopRequireDefault","require","_react","_styles","_tile","types","choiceLabel","PropTypes","string","targetLabel","disabled","bool","tiles","array","isRequired","tileSize","addGuide","defaults","buildTiles","props","T","tile","index","instanceId","guideIndex","undefined","includeTargets","default","createElement","_extends2","key","type","label","propTypes","StyledHTilerContainer","styled","theme","display","paddingBottom","spacing","gridGap","StyledChoiceLabel","textAlign","StyledTargetLabel","gridRow","StyledVTilerContainer","gridAutoFlow","StyledVChoiceLabel","gridColumn","StyledVTargetLabel","HorizontalTiler","React","Component","render","choiceLabelEnabled","rows","columns","length","style","gridTemplateColumns","Math","floor","gridTemplateRows","labelStyle","dangerouslySetInnerHTML","__html","map","exports","_defineProperty2","VerticalTiler"],"sources":["../src/tiler.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport { styled } from '@mui/material/styles';\n\nimport Tile from './tile';\n\nconst types = {\n  choiceLabel: PropTypes.string,\n  targetLabel: PropTypes.string,\n  disabled: PropTypes.bool,\n  tiles: PropTypes.array.isRequired,\n  tileSize: PropTypes.string,\n  addGuide: PropTypes.bool,\n};\n\nconst defaults = {\n  tileSize: '1fr',\n  disabled: false,\n  addGuide: false,\n};\n\nconst buildTiles = (props) => {\n  const T = (tile, index) => {\n    tile.instanceId = props.instanceId;\n    tile.disabled = props.disabled;\n    tile.guideIndex = props.addGuide ? tile.index + 1 : undefined;\n\n    if (props.includeTargets) {\n      return <Tile {...tile} key={index} />;\n    } else {\n      return tile.type === 'choice' ? <Tile {...tile} key={index} /> : <Tile {...tile} label=\"\" key={index} />;\n    }\n  };\n\n  T.propTypes = { ...types };\n  return T;\n};\n\nconst StyledHTilerContainer = styled('div')(({ theme, includeTargets }) => ({\n  display: 'grid',\n  paddingBottom: theme.spacing(2),\n  ...(includeTargets && {\n    gridGap: '10px',\n  }),\n}));\n\nconst StyledChoiceLabel = styled('div')({\n  textAlign: 'center',\n});\n\nconst StyledTargetLabel = styled('div')({\n  textAlign: 'center',\n  gridRow: '3/4',\n});\n\nconst StyledVTilerContainer = styled('div')(({ includeTargets }) => ({\n  gridAutoFlow: 'column',\n  display: 'grid',\n  ...(includeTargets && {\n    gridGap: '10px',\n  }),\n}));\n\nconst StyledVChoiceLabel = styled('div')({\n  gridColumn: '1/2',\n  textAlign: 'center',\n});\n\nconst StyledVTargetLabel = styled('div')({\n  gridColumn: '2/3',\n  textAlign: 'center',\n});\n\nexport class HorizontalTiler extends React.Component {\n  static propTypes = { ...types };\n  static defaultProps = { ...defaults };\n  render() {\n    const { includeTargets, choiceLabelEnabled, choiceLabel, targetLabel, tiles, tileSize } = this.props;\n\n    const rows = includeTargets ? `auto ${tileSize} auto ${tileSize}` : `auto ${tileSize} auto`;\n    const columns = includeTargets ? tiles.length / 2 : tiles.length;\n\n    const style = {\n      gridTemplateColumns: includeTargets\n        ? `repeat(${columns}, ${tileSize})`\n        : `auto repeat(${Math.floor(columns / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`,\n      gridTemplateRows: rows,\n    };\n\n    const labelStyle = {\n      gridColumn: `1/${columns + 1}`,\n    };\n\n    return (\n      <StyledHTilerContainer includeTargets={includeTargets} style={style}>\n        <StyledChoiceLabel\n          style={labelStyle}\n          dangerouslySetInnerHTML={{ __html: choiceLabelEnabled ? choiceLabel : '' }}\n        />\n        {includeTargets && (\n          <StyledTargetLabel style={labelStyle} dangerouslySetInnerHTML={{ __html: targetLabel }} />\n        )}\n        {tiles.map(buildTiles(this.props))}\n      </StyledHTilerContainer>\n    );\n  }\n}\n\nexport class VerticalTiler extends React.Component {\n  static propTypes = { ...types };\n  static defaultProps = { ...defaults };\n  render() {\n    const { includeTargets, choiceLabelEnabled, choiceLabel, targetLabel, tiles, tileSize } = this.props;\n\n    const columns = includeTargets ? 2 : 1;\n    const rows = includeTargets ? tiles.length / 2 : tiles.length;\n\n    const style = {\n      gridTemplateColumns: `repeat(${columns}, ${tileSize})`,\n      gridTemplateRows: includeTargets\n        ? `auto repeat(${rows}, ${tileSize})`\n        : `auto auto repeat(${Math.floor(rows / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`,\n    };\n\n    return (\n      <StyledVTilerContainer includeTargets={includeTargets} style={style}>\n        <StyledVChoiceLabel\n          dangerouslySetInnerHTML={{ __html: choiceLabelEnabled ? choiceLabel : '' }}\n        />\n\n        {includeTargets && <StyledVTargetLabel dangerouslySetInnerHTML={{ __html: targetLabel }} />}\n        {tiles.map(buildTiles(this.props))}\n      </StyledVTilerContainer>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/utils.js

@@ -4,27 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.haveSameValuesButDifferentOrder = void 0;
-
-var haveSameValuesButDifferentOrder = function haveSameValuesButDifferentOrder(arr1, arr2) {
+const haveSameValuesButDifferentOrder = (arr1, arr2) => {
   if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;
   if (arr1.length !== arr2.length) return false;
-
-  var toSortedJson = function toSortedJson(arr) {
-    return arr.map(function (item) {
-      return JSON.stringify(item);
-    }).sort();
-  };
-
-  var sortedArr1 = toSortedJson(arr1);
-  var sortedArr2 = toSortedJson(arr2);
-  var hasSameValues = sortedArr1.every(function (val, i) {
-    return val === sortedArr2[i];
-  });
-  var hasSameOrder = arr1.every(function (item, i) {
-    return JSON.stringify(item) === JSON.stringify(arr2[i]);
-  });
+  const toSortedJson = arr => arr.map(item => JSON.stringify(item)).sort();
+  const sortedArr1 = toSortedJson(arr1);
+  const sortedArr2 = toSortedJson(arr2);
+  const hasSameValues = sortedArr1.every((val, i) => val === sortedArr2[i]);
+  const hasSameOrder = arr1.every((item, i) => JSON.stringify(item) === JSON.stringify(arr2[i]));
   return hasSameValues && !hasSameOrder;
 };
-
 exports.haveSameValuesButDifferentOrder = haveSameValuesButDifferentOrder;
 //# sourceMappingURL=utils.js.map

package/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils.js"],"names":["haveSameValuesButDifferentOrder","arr1","arr2","Array","isArray","length","toSortedJson","arr","map","item","JSON","stringify","sort","sortedArr1","sortedArr2","hasSameValues","every","val","i","hasSameOrder"],"mappings":";;;;;;;AAAO,IAAMA,+BAA+B,GAAG,SAAlCA,+BAAkC,CAACC,IAAD,EAAOC,IAAP,EAAgB;AAC3D,MAAI,CAACC,KAAK,CAACC,OAAN,CAAcH,IAAd,CAAD,IAAwB,CAACE,KAAK,CAACC,OAAN,CAAcF,IAAd,CAA7B,EAAkD,OAAO,KAAP;AAClD,MAAID,IAAI,CAACI,MAAL,KAAgBH,IAAI,CAACG,MAAzB,EAAiC,OAAO,KAAP;;AAEjC,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,GAAD;AAAA,WACjBA,GAAG,CACEC,GADL,CACS,UAACC,IAAD;AAAA,aAAUC,IAAI,CAACC,SAAL,CAAeF,IAAf,CAAV;AAAA,KADT,EAEKG,IAFL,EADiB;AAAA,GAArB;;AAKA,MAAMC,UAAU,GAAGP,YAAY,CAACL,IAAD,CAA/B;AACA,MAAMa,UAAU,GAAGR,YAAY,CAACJ,IAAD,CAA/B;AAEA,MAAMa,aAAa,GAAGF,UAAU,CAACG,KAAX,CAAiB,UAACC,GAAD,EAAMC,CAAN;AAAA,WAAYD,GAAG,KAAKH,UAAU,CAACI,CAAD,CAA9B;AAAA,GAAjB,CAAtB;AACA,MAAMC,YAAY,GAAGlB,IAAI,CAACe,KAAL,CAAW,UAACP,IAAD,EAAOS,CAAP;AAAA,WAC5BR,IAAI,CAACC,SAAL,CAAeF,IAAf,MAAyBC,IAAI,CAACC,SAAL,CAAeT,IAAI,CAACgB,CAAD,CAAnB,CADG;AAAA,GAAX,CAArB;AAIA,SAAOH,aAAa,IAAI,CAACI,YAAzB;AACH,CAlBM","sourcesContent":["export const haveSameValuesButDifferentOrder = (arr1, arr2) => {\n    if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;\n    if (arr1.length !== arr2.length) return false;\n\n    const toSortedJson = (arr) =>\n        arr\n            .map((item) => JSON.stringify(item))\n            .sort();\n\n    const sortedArr1 = toSortedJson(arr1);\n    const sortedArr2 = toSortedJson(arr2);\n\n    const hasSameValues = sortedArr1.every((val, i) => val === sortedArr2[i]);\n    const hasSameOrder = arr1.every((item, i) =>\n        JSON.stringify(item) === JSON.stringify(arr2[i])\n    );\n\n    return hasSameValues && !hasSameOrder;\n};\n"],"file":"utils.js"}
+{"version":3,"file":"utils.js","names":["haveSameValuesButDifferentOrder","arr1","arr2","Array","isArray","length","toSortedJson","arr","map","item","JSON","stringify","sort","sortedArr1","sortedArr2","hasSameValues","every","val","i","hasSameOrder","exports"],"sources":["../src/utils.js"],"sourcesContent":["export const haveSameValuesButDifferentOrder = (arr1, arr2) => {\n    if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;\n    if (arr1.length !== arr2.length) return false;\n\n    const toSortedJson = (arr) =>\n        arr\n            .map((item) => JSON.stringify(item))\n            .sort();\n\n    const sortedArr1 = toSortedJson(arr1);\n    const sortedArr2 = toSortedJson(arr2);\n\n    const hasSameValues = sortedArr1.every((val, i) => val === sortedArr2[i]);\n    const hasSameOrder = arr1.every((item, i) =>\n        JSON.stringify(item) === JSON.stringify(arr2[i])\n    );\n\n    return hasSameValues && !hasSameOrder;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,+BAA+B,GAAGA,CAACC,IAAI,EAAEC,IAAI,KAAK;EAC3D,IAAI,CAACC,KAAK,CAACC,OAAO,CAACH,IAAI,CAAC,IAAI,CAACE,KAAK,CAACC,OAAO,CAACF,IAAI,CAAC,EAAE,OAAO,KAAK;EAC9D,IAAID,IAAI,CAACI,MAAM,KAAKH,IAAI,CAACG,MAAM,EAAE,OAAO,KAAK;EAE7C,MAAMC,YAAY,GAAIC,GAAG,IACrBA,GAAG,CACEC,GAAG,CAAEC,IAAI,IAAKC,IAAI,CAACC,SAAS,CAACF,IAAI,CAAC,CAAC,CACnCG,IAAI,CAAC,CAAC;EAEf,MAAMC,UAAU,GAAGP,YAAY,CAACL,IAAI,CAAC;EACrC,MAAMa,UAAU,GAAGR,YAAY,CAACJ,IAAI,CAAC;EAErC,MAAMa,aAAa,GAAGF,UAAU,CAACG,KAAK,CAAC,CAACC,GAAG,EAAEC,CAAC,KAAKD,GAAG,KAAKH,UAAU,CAACI,CAAC,CAAC,CAAC;EACzE,MAAMC,YAAY,GAAGlB,IAAI,CAACe,KAAK,CAAC,CAACP,IAAI,EAAES,CAAC,KACpCR,IAAI,CAACC,SAAS,CAACF,IAAI,CAAC,KAAKC,IAAI,CAACC,SAAS,CAACT,IAAI,CAACgB,CAAC,CAAC,CACnD,CAAC;EAED,OAAOH,aAAa,IAAI,CAACI,YAAY;AACzC,CAAC;AAACC,OAAA,CAAApB,+BAAA,GAAAA,+BAAA","ignoreList":[]}

package/package.json

@@ -1,32 +1,35 @@
 {
   "name": "@pie-element/placement-ordering",
-  "version": "12.3.4-next.0+bb17c7e0a",
+  "version": "13.0.0-beta.0",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
+    "@dnd-kit/core": "^6.1.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "2.25.2",
-    "@pie-lib/drag": "2.22.2",
-    "@pie-lib/math-rendering": "3.22.1",
-    "@pie-lib/render-ui": "4.35.2",
-    "@pie-lib/translator": "2.23.1",
+    "@pie-lib/correct-answer-toggle": "2.25.4-next.0",
+    "@pie-lib/drag": "2.22.4-next.0",
+    "@pie-lib/math-rendering": "3.22.3-next.0",
+    "@pie-lib/render-ui": "4.35.4-next.0",
+    "@pie-lib/translator": "2.23.3-next.0",
     "debug": "^4.1.1",
     "decimal.js": "^10.0.0",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
-    "react": "^16.8.1",
-    "react-dnd": "^14.0.5",
-    "react-dom": "^16.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-jss": "^8.4.0",
     "react-transition-group": "^2.3.1"
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "bb17c7e0a54b6b5ff139075cccf1e341cc6f859f",
+  "gitHead": "c47957cb243457f62111caf9d07deaad04b39545",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },