@pie-element/categorize 6.6.0 → 6.6.1-beta.587

package/lib/categorize/categories.js

@@ -1,19 +1,20 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Categories = void 0;
 Object.defineProperty(exports, "CategoryType", {
   enumerable: true,
   get: function get() {
     return _category.CategoryType;
   }
 });
-exports["default"] = exports.Categories = void 0;
+exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -45,9 +46,13 @@ var _gridContent = _interopRequireDefault(require("./grid-content"));
 
 var _category = _interopRequireWildcard(require("./category"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 Categories = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Categories, _React$Component);
@@ -69,9 +74,7 @@ var Categories = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props.disabled,
           _onDropChoice = _this$props.onDropChoice,
           onRemoveChoice = _this$props.onRemoveChoice;
-      var choicesPerRow = model.choicesPerRow,
-          categoriesPerRow = model.categoriesPerRow;
-      var columns = choicesPerRow / categoriesPerRow; // split categories into an array of arrays (inner array),
+      var categoriesPerRow = model.categoriesPerRow; // split categories into an array of arrays (inner array),
       // where each inner array represents how many categories should be displayed on one row
 
       var chunkedCategories = (0, _chunk["default"])(categories, categoriesPerRow);
@@ -79,13 +82,13 @@ var Categories = /*#__PURE__*/function (_React$Component) {
         columns: categoriesPerRow,
         className: classes.categories,
         rows: Math.ceil(categories.length / categoriesPerRow) * 2
-      }, chunkedCategories.map(function (cat) {
+      }, chunkedCategories.map(function (cat, rowIndex) {
         var items = []; // for each inner array of categories, create a row with category titles
 
-        cat.forEach(function (c) {
+        cat.forEach(function (c, columnIndex) {
           items.push( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
             className: classes.label,
-            key: "category-label-".concat(c.label)
+            key: "category-label-".concat(rowIndex, "-").concat(columnIndex)
           }, /*#__PURE__*/_react["default"].createElement("span", {
             dangerouslySetInnerHTML: {
               __html: c.label
@@ -93,26 +96,29 @@ var Categories = /*#__PURE__*/function (_React$Component) {
           })));
         }); // if the last row has less categories than max on a row, fill the spaces with divs
 
-        items = items.concat(Array(categoriesPerRow - cat.length).fill( /*#__PURE__*/_react["default"].createElement("div", null))); // for each inner array of categories, create a row with category containers
+        items = items.concat(Array(categoriesPerRow - cat.length).fill( /*#__PURE__*/_react["default"].createElement("div", null)).map(function (value, index) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            key: "fill-space-".concat(index)
+          });
+        })); // for each inner array of categories, create a row with category containers
 
-        cat.forEach(function (c, index) {
-          var rows = Math.floor(c.choices.length / columns) + 1;
+        cat.forEach(function (c, columnIndex) {
           items.push( /*#__PURE__*/_react["default"].createElement(_category["default"], (0, _extends2["default"])({
-            grid: {
-              rows: rows,
-              columns: columns
-            },
             onDropChoice: function onDropChoice(h) {
               return _onDropChoice(c.id, h);
             },
             onRemoveChoice: onRemoveChoice,
             disabled: disabled,
             className: classes.category,
-            key: index
+            key: "category-element-".concat(rowIndex, "-").concat(columnIndex)
           }, c)));
         }); // if the last row has less categories than max on a row, fill the spaces with divs
 
-        items = items.concat(Array(categoriesPerRow - cat.length).fill( /*#__PURE__*/_react["default"].createElement("div", null)));
+        items = items.concat(Array(categoriesPerRow - cat.length).fill( /*#__PURE__*/_react["default"].createElement("div", null)).map(function (value, index) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            key: "fill-space-final-".concat(index)
+          });
+        }));
         return items;
       }));
     }
@@ -125,8 +131,7 @@ exports.Categories = Categories;
   classes: _propTypes["default"].object.isRequired,
   categories: _propTypes["default"].arrayOf(_propTypes["default"].shape(_category.CategoryType)),
   model: _propTypes["default"].shape({
-    categoriesPerRow: _propTypes["default"].number,
-    choicesPerRow: _propTypes["default"].number
+    categoriesPerRow: _propTypes["default"].number
   }),
   disabled: _propTypes["default"].bool,
   onDropChoice: _propTypes["default"].func.isRequired,
@@ -134,19 +139,20 @@ exports.Categories = Categories;
 });
 (0, _defineProperty2["default"])(Categories, "defaultProps", {
   model: {
-    categoriesPerRow: 1,
-    choicesPerRow: 1
+    categoriesPerRow: 1
   }
 });
 
 var styles = function styles(theme) {
   return {
     categories: {
-      flex: 1
+      flex: 1,
+      padding: '8px'
     },
     label: {
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background(),
+      fontSize: theme.typography.fontSize,
       textAlign: 'center',
       paddingTop: theme.spacing.unit
     }

package/lib/categorize/categories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/categorize/categories.jsx"],"names":["Categories","props","classes","categories","model","disabled","onDropChoice","onRemoveChoice","choicesPerRow","categoriesPerRow","columns","chunkedCategories","Math","ceil","length","map","cat","items","forEach","c","push","label","__html","concat","Array","fill","index","rows","floor","choices","h","id","category","React","Component","PropTypes","object","isRequired","arrayOf","shape","CategoryType","number","bool","func","styles","theme","flex","color","text","backgroundColor","background","textAlign","paddingTop","spacing","unit"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport { color } from '@pie-lib/render-ui';\n\nimport chunk from 'lodash/chunk';\n\nimport GridContent from './grid-content';\nimport Category, { CategoryType } from './category';\n\nexport { CategoryType };\n\nexport class Categories extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    categories: PropTypes.arrayOf(PropTypes.shape(CategoryType)),\n    model: PropTypes.shape({\n      categoriesPerRow: PropTypes.number,\n      choicesPerRow: PropTypes.number,\n    }),\n    disabled: PropTypes.bool,\n    onDropChoice: PropTypes.func.isRequired,\n    onRemoveChoice: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {\n    model: {\n      categoriesPerRow: 1,\n      choicesPerRow: 1\n    }\n  };\n\n  render() {\n    const {\n      classes,\n      categories,\n      model,\n      disabled,\n      onDropChoice,\n      onRemoveChoice,\n    } = this.props;\n    const { choicesPerRow, categoriesPerRow } = model;\n\n    const columns = choicesPerRow / categoriesPerRow;\n\n    // split categories into an array of arrays (inner array),\n    // where each inner array represents how many categories should be displayed on one row\n    const chunkedCategories = chunk(categories, categoriesPerRow);\n\n    return (\n      <GridContent\n        columns={categoriesPerRow}\n        className={classes.categories}\n        rows={Math.ceil(categories.length / categoriesPerRow) * 2}\n      >\n        {\n          chunkedCategories.map(cat => {\n            let items = [];\n\n            // for each inner array of categories, create a row with category titles\n            cat.forEach(c => {\n              items.push((\n                <Typography className={classes.label} key={`category-label-${c.label}`}>\n                  <span dangerouslySetInnerHTML={{ __html: c.label }}/>\n                </Typography>));\n            });\n\n            // if the last row has less categories than max on a row, fill the spaces with divs\n            items = items.concat(Array(categoriesPerRow - cat.length).fill(<div/>));\n\n            // for each inner array of categories, create a row with category containers\n            cat.forEach((c, index) => {\n              const rows = Math.floor(c.choices.length / columns) + 1;\n\n              items.push(<Category\n                grid={{ rows, columns }}\n                onDropChoice={h => onDropChoice(c.id, h)}\n                onRemoveChoice={onRemoveChoice}\n                disabled={disabled}\n                className={classes.category}\n                key={index}\n                {...c}\n              />);\n            });\n\n            // if the last row has less categories than max on a row, fill the spaces with divs\n            items = items.concat(Array(categoriesPerRow - cat.length).fill(<div/>));\n\n            return items;\n          })\n        }\n      </GridContent>\n    );\n  }\n}\n\nconst styles = theme => ({\n  categories: {\n    flex: 1\n  },\n  label: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    textAlign: 'center',\n    paddingTop: theme.spacing.unit\n  }\n});\nexport default withStyles(styles)(Categories);\n"],"file":"categories.js"}
+{"version":3,"sources":["../../src/categorize/categories.jsx"],"names":["Categories","props","classes","categories","model","disabled","onDropChoice","onRemoveChoice","categoriesPerRow","chunkedCategories","Math","ceil","length","map","cat","rowIndex","items","forEach","c","columnIndex","push","label","__html","concat","Array","fill","value","index","h","id","category","React","Component","PropTypes","object","isRequired","arrayOf","shape","CategoryType","number","bool","func","styles","theme","flex","padding","color","text","backgroundColor","background","fontSize","typography","textAlign","paddingTop","spacing","unit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA;;AACA;;;;;;;;;;IAIaA,U;;;;;;;;;;;;WAkBX,kBAAS;AACP,wBAA+E,KAAKC,KAApF;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,UAAjB,eAAiBA,UAAjB;AAAA,UAA6BC,KAA7B,eAA6BA,KAA7B;AAAA,UAAoCC,QAApC,eAAoCA,QAApC;AAAA,UAA8CC,aAA9C,eAA8CA,YAA9C;AAAA,UAA4DC,cAA5D,eAA4DA,cAA5D;AACA,UAAQC,gBAAR,GAA6BJ,KAA7B,CAAQI,gBAAR,CAFO,CAIP;AACA;;AACA,UAAMC,iBAAiB,GAAG,uBAAMN,UAAN,EAAkBK,gBAAlB,CAA1B;AAEA,0BACE,gCAAC,uBAAD;AACE,QAAA,OAAO,EAAEA,gBADX;AAEE,QAAA,SAAS,EAAEN,OAAO,CAACC,UAFrB;AAGE,QAAA,IAAI,EAAEO,IAAI,CAACC,IAAL,CAAUR,UAAU,CAACS,MAAX,GAAoBJ,gBAA9B,IAAkD;AAH1D,SAKGC,iBAAiB,CAACI,GAAlB,CAAsB,UAACC,GAAD,EAAMC,QAAN,EAAmB;AACxC,YAAIC,KAAK,GAAG,EAAZ,CADwC,CAGxC;;AACAF,QAAAA,GAAG,CAACG,OAAJ,CAAY,UAACC,CAAD,EAAIC,WAAJ,EAAoB;AAC9BH,UAAAA,KAAK,CAACI,IAAN,eACE,gCAAC,sBAAD;AAAY,YAAA,SAAS,EAAElB,OAAO,CAACmB,KAA/B;AAAsC,YAAA,GAAG,2BAAoBN,QAApB,cAAgCI,WAAhC;AAAzC,0BACE;AAAM,YAAA,uBAAuB,EAAE;AAAEG,cAAAA,MAAM,EAAEJ,CAAC,CAACG;AAAZ;AAA/B,YADF,CADF;AAKD,SAND,EAJwC,CAYtC;;AACAL,QAAAA,KAAK,GAAGA,KAAK,CAACO,MAAN,CAAaC,KAAK,CAAChB,gBAAgB,GAAGM,GAAG,CAACF,MAAxB,CAAL,CAAqCa,IAArC,eAA0C,4CAA1C,EAAkDZ,GAAlD,CAAsD,UAACa,KAAD,EAAOC,KAAP;AAAA,8BAAiB;AAAK,YAAA,GAAG,uBAAgBA,KAAhB;AAAR,YAAjB;AAAA,SAAtD,CAAb,CAAR,CAbsC,CAexC;;AACAb,QAAAA,GAAG,CAACG,OAAJ,CAAY,UAACC,CAAD,EAAIC,WAAJ,EAAoB;AAC9BH,UAAAA,KAAK,CAACI,IAAN,eACE,gCAAC,oBAAD;AACE,YAAA,YAAY,EAAE,sBAACQ,CAAD;AAAA,qBAAOtB,aAAY,CAACY,CAAC,CAACW,EAAH,EAAOD,CAAP,CAAnB;AAAA,aADhB;AAEE,YAAA,cAAc,EAAErB,cAFlB;AAGE,YAAA,QAAQ,EAAEF,QAHZ;AAIE,YAAA,SAAS,EAAEH,OAAO,CAAC4B,QAJrB;AAKE,YAAA,GAAG,6BAAsBf,QAAtB,cAAkCI,WAAlC;AALL,aAMMD,CANN,EADF;AAUD,SAXD,EAhBwC,CA6BtC;;AACAF,QAAAA,KAAK,GAAGA,KAAK,CAACO,MAAN,CAAaC,KAAK,CAAChB,gBAAgB,GAAGM,GAAG,CAACF,MAAxB,CAAL,CAAqCa,IAArC,eAA0C,4CAA1C,EAAkDZ,GAAlD,CAAsD,UAACa,KAAD,EAAOC,KAAP;AAAA,8BAAgB;AAAK,YAAA,GAAG,6BAAsBA,KAAtB;AAAR,YAAhB;AAAA,SAAtD,CAAb,CAAR;AAEF,eAAOX,KAAP;AACD,OAjCA,CALH,CADF;AA0CD;;;EApE6Be,kBAAMC,S;;;iCAAzBhC,U,eACQ;AACjBE,EAAAA,OAAO,EAAE+B,sBAAUC,MAAV,CAAiBC,UADT;AAEjBhC,EAAAA,UAAU,EAAE8B,sBAAUG,OAAV,CAAkBH,sBAAUI,KAAV,CAAgBC,sBAAhB,CAAlB,CAFK;AAGjBlC,EAAAA,KAAK,EAAE6B,sBAAUI,KAAV,CAAgB;AACrB7B,IAAAA,gBAAgB,EAAEyB,sBAAUM;AADP,GAAhB,CAHU;AAMjBlC,EAAAA,QAAQ,EAAE4B,sBAAUO,IANH;AAOjBlC,EAAAA,YAAY,EAAE2B,sBAAUQ,IAAV,CAAeN,UAPZ;AAQjB5B,EAAAA,cAAc,EAAE0B,sBAAUQ,IAAV,CAAeN;AARd,C;iCADRnC,U,kBAYW;AACpBI,EAAAA,KAAK,EAAE;AACLI,IAAAA,gBAAgB,EAAE;AADb;AADa,C;;AA2DxB,IAAMkC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBxC,IAAAA,UAAU,EAAE;AACVyC,MAAAA,IAAI,EAAE,CADI;AAEVC,MAAAA,OAAO,EAAE;AAFC,KADa;AAKzBxB,IAAAA,KAAK,EAAE;AACLyB,MAAAA,KAAK,EAAEA,gBAAMC,IAAN,EADF;AAELC,MAAAA,eAAe,EAAEF,gBAAMG,UAAN,EAFZ;AAGLC,MAAAA,QAAQ,EAAEP,KAAK,CAACQ,UAAN,CAAiBD,QAHtB;AAILE,MAAAA,SAAS,EAAE,QAJN;AAKLC,MAAAA,UAAU,EAAEV,KAAK,CAACW,OAAN,CAAcC;AALrB;AALkB,GAAZ;AAAA,CAAf;;eAae,wBAAWb,MAAX,EAAmB1C,UAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport { color } from '@pie-lib/render-ui';\n\nimport chunk from 'lodash/chunk';\n\nimport GridContent from './grid-content';\nimport Category, { CategoryType } from './category';\n\nexport { CategoryType };\n\nexport class Categories extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    categories: PropTypes.arrayOf(PropTypes.shape(CategoryType)),\n    model: PropTypes.shape({\n      categoriesPerRow: PropTypes.number,\n    }),\n    disabled: PropTypes.bool,\n    onDropChoice: PropTypes.func.isRequired,\n    onRemoveChoice: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {\n    model: {\n      categoriesPerRow: 1,\n    },\n  };\n\n  render() {\n    const { classes, categories, model, disabled, onDropChoice, onRemoveChoice } = this.props;\n    const { categoriesPerRow } = model;\n\n    // split categories into an array of arrays (inner array),\n    // where each inner array represents how many categories should be displayed on one row\n    const chunkedCategories = chunk(categories, categoriesPerRow);\n\n    return (\n      <GridContent\n        columns={categoriesPerRow}\n        className={classes.categories}\n        rows={Math.ceil(categories.length / categoriesPerRow) * 2}\n      >\n        {chunkedCategories.map((cat, rowIndex) => {\n          let items = [];\n\n          // for each inner array of categories, create a row with category titles\n          cat.forEach((c, columnIndex) => {\n            items.push(\n              <Typography className={classes.label} key={`category-label-${rowIndex}-${columnIndex}`}>\n                <span dangerouslySetInnerHTML={{ __html: c.label }} />\n              </Typography>,\n            );\n          });\n\n            // if the last row has less categories than max on a row, fill the spaces with divs\n            items = items.concat(Array(categoriesPerRow - cat.length).fill(<div/>).map((value,index) => <div key={`fill-space-${index}`} />));\n\n          // for each inner array of categories, create a row with category containers\n          cat.forEach((c, columnIndex) => {\n            items.push(\n              <Category\n                onDropChoice={(h) => onDropChoice(c.id, h)}\n                onRemoveChoice={onRemoveChoice}\n                disabled={disabled}\n                className={classes.category}\n                key={`category-element-${rowIndex}-${columnIndex}`}\n                {...c}\n              />,\n            );\n          });\n\n            // if the last row has less categories than max on a row, fill the spaces with divs\n            items = items.concat(Array(categoriesPerRow - cat.length).fill(<div/>).map((value,index) =><div key={`fill-space-final-${index}`} />));\n\n          return items;\n        })}\n      </GridContent>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  categories: {\n    flex: 1,\n    padding: '8px'\n  },\n  label: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    fontSize: theme.typography.fontSize,\n    textAlign: 'center',\n    paddingTop: theme.spacing.unit,\n  },\n});\nexport default withStyles(styles)(Categories);\n"],"file":"categories.js"}

package/lib/categorize/category.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Category = exports.CategoryType = void 0;
+exports["default"] = exports.CategoryType = exports.Category = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -35,13 +35,13 @@ var _droppablePlaceholder = _interopRequireDefault(require("./droppable-placehol
 
 var _renderUi = require("@pie-lib/render-ui");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 CategoryType = {
   id: _propTypes["default"].string.isRequired,
@@ -70,7 +70,6 @@ var Category = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props.disabled,
           onDropChoice = _this$props.onDropChoice,
           onRemoveChoice = _this$props.onRemoveChoice,
-          grid = _this$props.grid,
           id = _this$props.id,
           correct = _this$props.correct;
       var names = (0, _classnames["default"])(classes.category, className);
@@ -78,9 +77,6 @@ var Category = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: names
       }, /*#__PURE__*/_react["default"].createElement(_droppablePlaceholder["default"], {
-        grid: _objectSpread(_objectSpread({}, grid), {}, {
-          rowsRepeatValue: 'minmax(60px, auto)'
-        }),
         onDropChoice: onDropChoice,
         disabled: disabled,
         className: placeholderNames
@@ -108,15 +104,22 @@ exports.Category = Category;
 }));
 (0, _defineProperty2["default"])(Category, "defaultProps", {});
 
-var styles = function styles() {
+var styles = function styles(theme) {
   return {
     incorrect: {
       border: "solid 2px ".concat(_renderUi.color.incorrect())
     },
     placeholder: {
-      minHeight: '60px',
-      flex: '1',
-      display: 'grid'
+      minHeight: '80px',
+      padding: theme.spacing.unit / 2,
+      borderRadius: theme.spacing.unit / 2,
+      gridColumnGap: 0,
+      gridRowGap: 0,
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      alignContent: 'flex-start'
     },
     category: {
       display: 'flex',

package/lib/categorize/category.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/categorize/category.jsx"],"names":["CategoryType","id","PropTypes","string","isRequired","categoryId","Category","props","classes","className","choices","disabled","onDropChoice","onRemoveChoice","grid","correct","names","category","placeholderNames","placeholder","incorrect","rowsRepeatValue","map","c","index","React","Component","bool","object","func","styles","border","color","minHeight","flex","display","flexDirection"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,EAAE,EAAEC,sBAAUC,MAAV,CAAiBC,UADK;AAE1BC,EAAAA,UAAU,EAAEH,sBAAUC;AAFI,CAArB;;;IAKMG,Q;;;;;;;;;;;;WAYX,kBAAS;AAAA,wBAWH,KAAKC,KAXF;AAAA,UAELC,OAFK,eAELA,OAFK;AAAA,UAGLC,SAHK,eAGLA,SAHK;AAAA,4CAILC,OAJK;AAAA,UAILA,OAJK,oCAIK,EAJL;AAAA,UAKLC,QALK,eAKLA,QALK;AAAA,UAMLC,YANK,eAMLA,YANK;AAAA,UAOLC,cAPK,eAOLA,cAPK;AAAA,UAQLC,IARK,eAQLA,IARK;AAAA,UASLb,EATK,eASLA,EATK;AAAA,UAULc,OAVK,eAULA,OAVK;AAaP,UAAMC,KAAK,GAAG,4BAAWR,OAAO,CAACS,QAAnB,EAA6BR,SAA7B,CAAd;AAEA,UAAMS,gBAAgB,GAAG,4BACvBV,OAAO,CAACW,WADe,EAEvBJ,OAAO,KAAK,KAAZ,IAAqBP,OAAO,CAACY,SAFN,CAAzB;AAKA,0BACE;AAAK,QAAA,SAAS,EAAEJ;AAAhB,sBACE,gCAAC,gCAAD;AACE,QAAA,IAAI,kCACCF,IADD;AAEFO,UAAAA,eAAe,EAAE;AAFf,UADN;AAKE,QAAA,YAAY,EAAET,YALhB;AAME,QAAA,QAAQ,EAAED,QANZ;AAOE,QAAA,SAAS,EAAEO;AAPb,SASGR,OAAO,CAACY,GAAR,CAAY,UAACC,CAAD,EAAIC,KAAJ;AAAA,4BACX,gCAAC,kBAAD;AACE,UAAA,cAAc,EAAEX,cADlB;AAEE,UAAA,QAAQ,EAAEF,QAFZ;AAGE,UAAA,GAAG,EAAEa,KAHP;AAIE,UAAA,WAAW,EAAEA,KAJf;AAKE,UAAA,UAAU,EAAEvB;AALd,WAMMsB,CANN,EADW;AAAA,OAAZ,CATH,CADF,CADF;AAwBD;;;EAxD2BE,kBAAMC,S;;;iCAAvBpB,Q,+CAENN,Y;AACHS,EAAAA,SAAS,EAAEP,sBAAUC,M;AACrBQ,EAAAA,QAAQ,EAAET,sBAAUyB,I;AACpBnB,EAAAA,OAAO,EAAEN,sBAAU0B,MAAV,CAAiBxB,U;AAC1BQ,EAAAA,YAAY,EAAEV,sBAAU2B,I;AACxBhB,EAAAA,cAAc,EAAEX,sBAAU2B;;iCAPjBvB,Q,kBAUW,E;;AAgDxB,IAAMwB,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBV,IAAAA,SAAS,EAAE;AACTW,MAAAA,MAAM,sBAAeC,gBAAMZ,SAAN,EAAf;AADG,KADS;AAIpBD,IAAAA,WAAW,EAAE;AACXc,MAAAA,SAAS,EAAE,MADA;AAEXC,MAAAA,IAAI,EAAE,GAFK;AAGXC,MAAAA,OAAO,EAAE;AAHE,KAJO;AASpBlB,IAAAA,QAAQ,EAAE;AACRkB,MAAAA,OAAO,EAAE,MADD;AAERC,MAAAA,aAAa,EAAE;AAFP;AATU,GAAP;AAAA,CAAf;;eAce,wBAAWN,MAAX,EAAmBxB,QAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Choice from './choice';\nimport PlaceHolder from './droppable-placeholder';\nimport { color } from '@pie-lib/render-ui';\n\nexport const CategoryType = {\n  id: PropTypes.string.isRequired,\n  categoryId: PropTypes.string,\n};\n\nexport class Category extends React.Component {\n  static propTypes = {\n    ...CategoryType,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    onDropChoice: PropTypes.func,\n    onRemoveChoice: PropTypes.func,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const {\n      classes,\n      className,\n      choices = [],\n      disabled,\n      onDropChoice,\n      onRemoveChoice,\n      grid,\n      id,\n      correct,\n    } = this.props;\n\n    const names = classNames(classes.category, className);\n\n    const placeholderNames = classNames(\n      classes.placeholder,\n      correct === false && classes.incorrect\n    );\n\n    return (\n      <div className={names}>\n        <PlaceHolder\n          grid={{\n            ...grid,\n            rowsRepeatValue: 'minmax(60px, auto)',\n          }}\n          onDropChoice={onDropChoice}\n          disabled={disabled}\n          className={placeholderNames}\n        >\n          {choices.map((c, index) => (\n            <Choice\n              onRemoveChoice={onRemoveChoice}\n              disabled={disabled}\n              key={index}\n              choiceIndex={index}\n              categoryId={id}\n              {...c}\n            />\n          ))}\n        </PlaceHolder>\n      </div>\n    );\n  }\n}\nconst styles = () => ({\n  incorrect: {\n    border: `solid 2px ${color.incorrect()}`,\n  },\n  placeholder: {\n    minHeight: '60px',\n    flex: '1',\n    display: 'grid',\n  },\n  category: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n});\nexport default withStyles(styles)(Category);\n"],"file":"category.js"}
+{"version":3,"sources":["../../src/categorize/category.jsx"],"names":["CategoryType","id","PropTypes","string","isRequired","categoryId","Category","props","classes","className","choices","disabled","onDropChoice","onRemoveChoice","correct","names","category","placeholderNames","placeholder","incorrect","map","c","index","React","Component","bool","object","func","styles","theme","border","color","minHeight","padding","spacing","unit","borderRadius","gridColumnGap","gridRowGap","display","flexWrap","justifyContent","alignItems","alignContent","flexDirection"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,EAAE,EAAEC,sBAAUC,MAAV,CAAiBC,UADK;AAE1BC,EAAAA,UAAU,EAAEH,sBAAUC;AAFI,CAArB;;;IAKMG,Q;;;;;;;;;;;;WAYX,kBAAS;AACP,wBAAkG,KAAKC,KAAvG;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,SAAjB,eAAiBA,SAAjB;AAAA,4CAA4BC,OAA5B;AAAA,UAA4BA,OAA5B,oCAAsC,EAAtC;AAAA,UAA0CC,QAA1C,eAA0CA,QAA1C;AAAA,UAAoDC,YAApD,eAAoDA,YAApD;AAAA,UAAkEC,cAAlE,eAAkEA,cAAlE;AAAA,UAAkFZ,EAAlF,eAAkFA,EAAlF;AAAA,UAAsFa,OAAtF,eAAsFA,OAAtF;AAEA,UAAMC,KAAK,GAAG,4BAAWP,OAAO,CAACQ,QAAnB,EAA6BP,SAA7B,CAAd;AACA,UAAMQ,gBAAgB,GAAG,4BAAWT,OAAO,CAACU,WAAnB,EAAgCJ,OAAO,KAAK,KAAZ,IAAqBN,OAAO,CAACW,SAA7D,CAAzB;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEJ;AAAhB,sBACE,gCAAC,gCAAD;AAAa,QAAA,YAAY,EAAEH,YAA3B;AAAyC,QAAA,QAAQ,EAAED,QAAnD;AAA6D,QAAA,SAAS,EAAEM;AAAxE,SACGP,OAAO,CAACU,GAAR,CAAY,UAACC,CAAD,EAAIC,KAAJ;AAAA,4BACX,gCAAC,kBAAD;AACE,UAAA,cAAc,EAAET,cADlB;AAEE,UAAA,QAAQ,EAAEF,QAFZ;AAGE,UAAA,GAAG,EAAEW,KAHP;AAIE,UAAA,WAAW,EAAEA,KAJf;AAKE,UAAA,UAAU,EAAErB;AALd,WAMMoB,CANN,EADW;AAAA,OAAZ,CADH,CADF,CADF;AAgBD;;;EAlC2BE,kBAAMC,S;;;iCAAvBlB,Q,+CAENN,Y;AACHS,EAAAA,SAAS,EAAEP,sBAAUC,M;AACrBQ,EAAAA,QAAQ,EAAET,sBAAUuB,I;AACpBjB,EAAAA,OAAO,EAAEN,sBAAUwB,MAAV,CAAiBtB,U;AAC1BQ,EAAAA,YAAY,EAAEV,sBAAUyB,I;AACxBd,EAAAA,cAAc,EAAEX,sBAAUyB;;iCAPjBrB,Q,kBAUW,E;;AA2BxB,IAAMsB,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBV,IAAAA,SAAS,EAAE;AACTW,MAAAA,MAAM,sBAAeC,gBAAMZ,SAAN,EAAf;AADG,KADc;AAIzBD,IAAAA,WAAW,EAAE;AACXc,MAAAA,SAAS,EAAE,MADA;AAEXC,MAAAA,OAAO,EAAEJ,KAAK,CAACK,OAAN,CAAcC,IAAd,GAAqB,CAFnB;AAGXC,MAAAA,YAAY,EAAEP,KAAK,CAACK,OAAN,CAAcC,IAAd,GAAqB,CAHxB;AAIXE,MAAAA,aAAa,EAAE,CAJJ;AAKXC,MAAAA,UAAU,EAAE,CALD;AAMXC,MAAAA,OAAO,EAAE,MANE;AAOXC,MAAAA,QAAQ,EAAE,MAPC;AAQXC,MAAAA,cAAc,EAAE,QARL;AASXC,MAAAA,UAAU,EAAE,QATD;AAUXC,MAAAA,YAAY,EAAE;AAVH,KAJY;AAgBzB3B,IAAAA,QAAQ,EAAE;AACRuB,MAAAA,OAAO,EAAE,MADD;AAERK,MAAAA,aAAa,EAAE;AAFP;AAhBe,GAAZ;AAAA,CAAf;;eAsBe,wBAAWhB,MAAX,EAAmBtB,QAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Choice from './choice';\nimport PlaceHolder from './droppable-placeholder';\nimport { color } from '@pie-lib/render-ui';\n\nexport const CategoryType = {\n  id: PropTypes.string.isRequired,\n  categoryId: PropTypes.string,\n};\n\nexport class Category extends React.Component {\n  static propTypes = {\n    ...CategoryType,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    onDropChoice: PropTypes.func,\n    onRemoveChoice: PropTypes.func,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { classes, className, choices = [], disabled, onDropChoice, onRemoveChoice, id, correct } = this.props;\n\n    const names = classNames(classes.category, className);\n    const placeholderNames = classNames(classes.placeholder, correct === false && classes.incorrect);\n\n    return (\n      <div className={names}>\n        <PlaceHolder onDropChoice={onDropChoice} disabled={disabled} className={placeholderNames}>\n          {choices.map((c, index) => (\n            <Choice\n              onRemoveChoice={onRemoveChoice}\n              disabled={disabled}\n              key={index}\n              choiceIndex={index}\n              categoryId={id}\n              {...c}\n            />\n          ))}\n        </PlaceHolder>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  incorrect: {\n    border: `solid 2px ${color.incorrect()}`,\n  },\n  placeholder: {\n    minHeight: '80px',\n    padding: theme.spacing.unit / 2,\n    borderRadius: theme.spacing.unit / 2,\n    gridColumnGap: 0,\n    gridRowGap: 0,\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignContent: 'flex-start',\n  },\n  category: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n});\n\nexport default withStyles(styles)(Category);\n"],"file":"category.js"}

package/lib/categorize/choice.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.spec = exports.Choice = exports.Layout = exports.ChoiceType = void 0;
+exports.spec = exports["default"] = exports.Layout = exports.ChoiceType = exports.Choice = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -39,13 +39,13 @@ var _renderUi = require("@pie-lib/render-ui");
 
 var _debug = _interopRequireDefault(require("debug"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var log = (0, _debug["default"])('@pie-ui:categorize:choice');
 var ChoiceType = {
@@ -102,22 +102,28 @@ exports.Layout = Layout;
 }));
 (0, _defineProperty2["default"])(Layout, "defaultProps", {});
 
-var styles = function styles() {
+var styles = function styles(theme) {
   return {
     choice: {
+      direction: 'initial',
       cursor: 'pointer',
-      height: '100%',
       width: '100%',
       '&.correct': {
         border: "solid 2px ".concat(_renderUi.color.correct())
       },
       '&.incorrect': {
         border: "solid 2px ".concat(_renderUi.color.incorrect())
-      }
+      },
+      borderRadius: '6px'
     },
     cardRoot: {
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background(),
+      fontSize: theme.typography.fontSize + 2,
+      '&:last-child': {
+        paddingBottom: theme.spacing.unit * 2
+      },
+      borderRadius: '4px',
       border: '1px solid'
     },
     disabled: {
@@ -156,12 +162,12 @@ var Choice = /*#__PURE__*/function (_React$Component2) {
           content = _this$props2.content,
           disabled = _this$props2.disabled,
           isDragging = _this$props2.isDragging,
-          correct = _this$props2.correct;
+          correct = _this$props2.correct,
+          extraStyle = _this$props2.extraStyle;
       return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          width: '100%',
-          height: 'max-content'
-        }
+        style: _objectSpread({
+          margin: '4px'
+        }, extraStyle)
       }, /*#__PURE__*/_react["default"].createElement(Styled, {
         id: id,
         content: content,
@@ -176,6 +182,7 @@ var Choice = /*#__PURE__*/function (_React$Component2) {
 
 exports.Choice = Choice;
 (0, _defineProperty2["default"])(Choice, "propTypes", _objectSpread(_objectSpread({}, ChoiceType), {}, {
+  extraStyle: _propTypes["default"].object,
   connectDragSource: _propTypes["default"].func.isRequired
 }));
 var spec = {

package/lib/categorize/choice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/categorize/choice.jsx"],"names":["log","ChoiceType","content","PropTypes","string","isRequired","id","Layout","props","classes","className","isDragging","disabled","correct","rootNames","choice","dragging","cardNames","card","root","cardRoot","__html","React","Component","object","bool","styles","cursor","height","width","border","color","incorrect","text","backgroundColor","background","opacity","Styled","Choice","connectDragSource","func","spec","canDrag","beginDrag","out","categoryId","choiceIndex","endDrag","monitor","didDrop","item","getItem","onRemoveChoice","DraggableChoice","uid","connect","dragSource","withUid"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { DragSource } from 'react-dnd';\nimport { uid } from '@pie-lib/drag';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport { color } from '@pie-lib/render-ui';\nimport debug from 'debug';\n\nconst log = debug('@pie-ui:categorize:choice');\n\nexport const ChoiceType = {\n  content: PropTypes.string.isRequired,\n  id: PropTypes.string\n};\n\nexport class Layout extends React.Component {\n  static propTypes = {\n    ...ChoiceType,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool\n  };\n  static defaultProps = {};\n  render() {\n    const {\n      classes,\n      className,\n      content,\n      isDragging,\n      disabled,\n      correct\n    } = this.props;\n\n    const rootNames = classNames(\n      correct === true && 'correct',\n      correct === false && 'incorrect',\n      classes.choice,\n      isDragging && classes.dragging,\n      disabled && classes.disabled,\n      className\n    );\n    const cardNames = classNames(classes.card);\n    return (\n      <div className={rootNames}>\n        <Card className={cardNames}>\n          <CardContent classes={{ root: classes.cardRoot }} dangerouslySetInnerHTML={{ __html: content }} />\n        </Card>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  choice: {\n    cursor: 'pointer',\n    height: '100%',\n    width: '100%',\n    '&.correct': {\n      border: `solid 2px ${color.correct()}`\n    },\n    '&.incorrect': {\n      border: `solid 2px ${color.incorrect()}`\n    }\n  },\n  cardRoot: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    border: '1px solid'\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    opacity: '0.6'\n  },\n  dragging: {\n    cursor: 'move'\n  },\n  card: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    width: '100%'\n  }\n});\n\nconst Styled = withStyles(styles)(Layout);\n\nexport class Choice extends React.Component {\n  static propTypes = {\n    ...ChoiceType,\n    connectDragSource: PropTypes.func.isRequired\n  };\n\n  render() {\n    const {\n      connectDragSource,\n      id,\n      content,\n      disabled,\n      isDragging,\n      correct\n    } = this.props;\n    return connectDragSource(\n      <div style={{ width: '100%', height: 'max-content' }}>\n        <Styled\n          id={id}\n          content={content}\n          disabled={disabled}\n          correct={correct}\n          isDragging={isDragging}\n        />\n      </div>\n    );\n  }\n}\n\nexport const spec = {\n  canDrag: props => !props.disabled,\n  beginDrag: props => {\n    const out = {\n      id: props.id,\n      categoryId: props.categoryId,\n      choiceIndex: props.choiceIndex\n    };\n    log('[beginDrag] out:', out);\n    return out;\n  },\n  endDrag: (props, monitor) => {\n    if (!monitor.didDrop()) {\n      const item = monitor.getItem();\n      if (item.categoryId) {\n        log('wasnt droppped - what to do?');\n        props.onRemoveChoice(item);\n      }\n    }\n  }\n};\n\nconst DraggableChoice = DragSource(\n  ({ uid }) => uid,\n  spec,\n  (connect, monitor) => ({\n    connectDragSource: connect.dragSource(),\n    isDragging: monitor.isDragging()\n  })\n)(Choice);\n\nexport default uid.withUid(DraggableChoice);\n"],"file":"choice.js"}
+{"version":3,"sources":["../../src/categorize/choice.jsx"],"names":["log","ChoiceType","content","PropTypes","string","isRequired","id","Layout","props","classes","className","isDragging","disabled","correct","rootNames","choice","dragging","cardNames","card","root","cardRoot","__html","React","Component","object","bool","styles","theme","direction","cursor","width","border","color","incorrect","borderRadius","text","backgroundColor","background","fontSize","typography","paddingBottom","spacing","unit","opacity","Styled","Choice","connectDragSource","extraStyle","margin","func","spec","canDrag","beginDrag","out","categoryId","choiceIndex","endDrag","monitor","didDrop","item","getItem","onRemoveChoice","DraggableChoice","uid","connect","dragSource","withUid"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { DragSource } from 'react-dnd';\nimport { uid } from '@pie-lib/drag';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport { color } from '@pie-lib/render-ui';\nimport debug from 'debug';\n\nconst log = debug('@pie-ui:categorize:choice');\n\nexport const ChoiceType = {\n  content: PropTypes.string.isRequired,\n  id: PropTypes.string,\n};\n\nexport class Layout extends React.Component {\n  static propTypes = {\n    ...ChoiceType,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n  };\n  static defaultProps = {};\n  render() {\n    const { classes, className, content, isDragging, disabled, correct } = this.props;\n\n    const rootNames = classNames(\n      correct === true && 'correct',\n      correct === false && 'incorrect',\n      classes.choice,\n      isDragging && classes.dragging,\n      disabled && classes.disabled,\n      className,\n    );\n    const cardNames = classNames(classes.card);\n    return (\n      <div className={rootNames}>\n        <Card className={cardNames}>\n          <CardContent classes={{ root: classes.cardRoot }} dangerouslySetInnerHTML={{ __html: content }} />\n        </Card>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  choice: {\n    direction: 'initial',\n    cursor: 'pointer',\n    width: '100%',\n    '&.correct': {\n      border: `solid 2px ${color.correct()}`,\n    },\n    '&.incorrect': {\n      border: `solid 2px ${color.incorrect()}`,\n    },\n    borderRadius: '6px',\n  },\n  cardRoot: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    fontSize: theme.typography.fontSize + 2,\n    '&:last-child': {\n      paddingBottom: theme.spacing.unit * 2,\n    },\n    borderRadius: '4px',\n    border: '1px solid',\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    opacity: '0.6',\n  },\n  dragging: {\n    cursor: 'move',\n  },\n  card: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    width: '100%',\n  },\n});\n\nconst Styled = withStyles(styles)(Layout);\n\nexport class Choice extends React.Component {\n  static propTypes = {\n    ...ChoiceType,\n    extraStyle: PropTypes.object,\n    connectDragSource: PropTypes.func.isRequired,\n  };\n\n  render() {\n    const { connectDragSource, id, content, disabled, isDragging, correct, extraStyle } = this.props;\n\n    return connectDragSource(\n      <div style={{ margin: '4px', ...extraStyle }}>\n        <Styled id={id} content={content} disabled={disabled} correct={correct} isDragging={isDragging} />\n      </div>,\n    );\n  }\n}\n\nexport const spec = {\n  canDrag: (props) => !props.disabled,\n  beginDrag: (props) => {\n    const out = {\n      id: props.id,\n      categoryId: props.categoryId,\n      choiceIndex: props.choiceIndex,\n    };\n    log('[beginDrag] out:', out);\n    return out;\n  },\n  endDrag: (props, monitor) => {\n    if (!monitor.didDrop()) {\n      const item = monitor.getItem();\n      if (item.categoryId) {\n        log('wasnt droppped - what to do?');\n        props.onRemoveChoice(item);\n      }\n    }\n  },\n};\n\nconst DraggableChoice = DragSource(\n  ({ uid }) => uid,\n  spec,\n  (connect, monitor) => ({\n    connectDragSource: connect.dragSource(),\n    isDragging: monitor.isDragging(),\n  }),\n)(Choice);\n\nexport default uid.withUid(DraggableChoice);\n"],"file":"choice.js"}

package/lib/categorize/choices.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -37,11 +37,15 @@ var _styles = require("@material-ui/core/styles");
 
 var _choice = _interopRequireWildcard(require("./choice"));
 
-var _gridContent = _interopRequireDefault(require("./grid-content"));
+var _droppablePlaceholder = _interopRequireDefault(require("./droppable-placeholder"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 Blank = function Blank() {
   return /*#__PURE__*/_react["default"].createElement("div", null);
@@ -66,6 +70,8 @@ var Choices = /*#__PURE__*/function (_React$Component) {
           choices = _this$props$choices === void 0 ? [] : _this$props$choices,
           model = _this$props.model,
           disabled = _this$props.disabled,
+          onDropChoice = _this$props.onDropChoice,
+          onRemoveChoice = _this$props.onRemoveChoice,
           choicePosition = _this$props.choicePosition;
       var style = {
         textAlign: 'center'
@@ -77,19 +83,29 @@ var Choices = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.wrapper
+      }, /*#__PURE__*/_react["default"].createElement(_droppablePlaceholder["default"], {
+        onDropChoice: onDropChoice,
+        onRemoveChoice: onRemoveChoice,
+        disabled: disabled,
+        style: {
+          background: 'none'
+        },
+        choiceBoard: true
       }, model.choicesLabel && model.choicesLabel !== '' && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.labelHolder
-      }, model.choicesLabel), /*#__PURE__*/_react["default"].createElement(_gridContent["default"], {
-        columns: model.choicesPerRow,
-        className: classes.choices,
-        extraStyle: style
-      }, choices.map(function (c, index) {
+        className: classes.labelHolder,
+        dangerouslySetInnerHTML: {
+          __html: model.choicesLabel
+        }
+      }), choices.map(function (c, index) {
         return c.empty ? /*#__PURE__*/_react["default"].createElement(Blank, {
           key: index
         }) : /*#__PURE__*/_react["default"].createElement(_choice["default"], (0, _extends2["default"])({
           disabled: disabled,
           className: classes.choice,
-          key: index
+          key: index,
+          extraStyle: {
+            maxWidth: "".concat(95 / model.categoriesPerRow, "%")
+          }
         }, c));
       })));
     }
@@ -104,7 +120,7 @@ exports.Choices = Choices;
     empty: _propTypes["default"].bool
   })])),
   model: _propTypes["default"].shape({
-    choicesPerRow: _propTypes["default"].number,
+    categoriesPerRow: _propTypes["default"].number,
     choicesLabel: _propTypes["default"].string
   }),
   disabled: _propTypes["default"].bool,
@@ -112,7 +128,7 @@ exports.Choices = Choices;
 });
 (0, _defineProperty2["default"])(Choices, "defaultProps", {
   model: {
-    choicesPerRow: 4,
+    categoriesPerRow: 1,
     choicesLabel: ''
   }
 });
@@ -121,11 +137,14 @@ var styles = function styles(theme) {
   return {
     wrapper: {
       flex: 1,
-      padding: theme.spacing.unit
+      padding: theme.spacing.unit,
+      touchAction: 'none'
     },
     choices: {
-      paddingTop: theme.spacing.unit,
-      paddingBottom: theme.spacing.unit
+      padding: theme.spacing.unit / 2,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
     },
     labelHolder: {
       margin: '0 auto',

package/lib/categorize/choices.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/categorize/choices.jsx"],"names":["Blank","Choices","props","classes","choices","model","disabled","choicePosition","style","textAlign","direction","wrapper","choicesLabel","labelHolder","choicesPerRow","map","c","index","empty","choice","React","Component","PropTypes","object","isRequired","arrayOf","oneOfType","shape","ChoiceType","bool","number","string","styles","theme","flex","padding","spacing","unit","paddingTop","paddingBottom","margin"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Choice, { ChoiceType } from './choice';\nexport { ChoiceType };\nimport GridContent from './grid-content';\n\nconst Blank = () => <div />;\n\nexport class Choices extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    choices: PropTypes.arrayOf(\n      PropTypes.oneOfType([\n        PropTypes.shape(ChoiceType),\n        PropTypes.shape({ empty: PropTypes.bool }),\n      ])\n    ),\n    model: PropTypes.shape({\n      choicesPerRow: PropTypes.number,\n      choicesLabel: PropTypes.string,\n    }),\n    disabled: PropTypes.bool,\n    choicePosition: PropTypes.string,\n  };\n\n  static defaultProps = {\n    model: {\n      choicesPerRow: 4,\n      choicesLabel: '',\n    },\n  };\n\n  render() {\n    const {\n      classes,\n      choices = [],\n      model,\n      disabled,\n      choicePosition,\n    } = this.props;\n    let style = {\n      textAlign: 'center',\n    };\n\n    if (choicePosition === 'left') {\n      style.direction = 'rtl';\n    }\n\n    return (\n      <div className={classes.wrapper}>\n        {model.choicesLabel && model.choicesLabel !== '' && (\n          <div className={classes.labelHolder}>{model.choicesLabel}</div>\n        )}\n        <GridContent\n          columns={model.choicesPerRow}\n          className={classes.choices}\n          extraStyle={style}\n        >\n          {choices.map((c, index) => {\n            return c.empty ? (\n              <Blank key={index} />\n            ) : (\n              <Choice\n                disabled={disabled}\n                className={classes.choice}\n                key={index}\n                {...c}\n              />\n            );\n          })}\n        </GridContent>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  wrapper: {\n    flex: 1,\n    padding: theme.spacing.unit,\n  },\n  choices: {\n    paddingTop: theme.spacing.unit,\n    paddingBottom: theme.spacing.unit,\n  },\n  labelHolder: {\n    margin: '0 auto',\n    textAlign: 'center',\n    paddingTop: theme.spacing.unit,\n  },\n});\n\nexport default withStyles(styles)(Choices);\n"],"file":"choices.js"}
+{"version":3,"sources":["../../src/categorize/choices.jsx"],"names":["Blank","Choices","props","classes","choices","model","disabled","onDropChoice","onRemoveChoice","choicePosition","style","textAlign","direction","wrapper","background","choicesLabel","labelHolder","__html","map","c","index","empty","choice","maxWidth","categoriesPerRow","React","Component","PropTypes","object","isRequired","arrayOf","oneOfType","shape","ChoiceType","bool","number","string","styles","theme","flex","padding","spacing","unit","touchAction","display","justifyContent","alignItems","margin","paddingTop"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Choice, { ChoiceType } from './choice';\nimport DroppablePlaceholder from './droppable-placeholder';\nexport { ChoiceType };\n\nconst Blank = () => <div />;\n\nexport class Choices extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    choices: PropTypes.arrayOf(\n      PropTypes.oneOfType([PropTypes.shape(ChoiceType), PropTypes.shape({ empty: PropTypes.bool })]),\n    ),\n    model: PropTypes.shape({\n      categoriesPerRow: PropTypes.number,\n      choicesLabel: PropTypes.string,\n    }),\n    disabled: PropTypes.bool,\n    choicePosition: PropTypes.string,\n  };\n\n  static defaultProps = {\n    model: {\n      categoriesPerRow: 1,\n      choicesLabel: '',\n    },\n  };\n\n  render() {\n    const {\n      classes,\n      choices = [],\n      model,\n      disabled,\n      onDropChoice,\n      onRemoveChoice,\n      choicePosition,\n    } = this.props;\n\n    let style = {\n      textAlign: 'center',\n    };\n\n    if (choicePosition === 'left') {\n      style.direction = 'rtl';\n    }\n\n    return (\n      <div className={classes.wrapper}>\n         <DroppablePlaceholder\n          onDropChoice={onDropChoice}\n          onRemoveChoice={onRemoveChoice}\n          disabled={disabled}\n          style={{background: 'none', }}\n          choiceBoard={true}\n          >\n        {model.choicesLabel && model.choicesLabel !== '' && (\n          <div className={classes.labelHolder} dangerouslySetInnerHTML={{ __html: model.choicesLabel }}></div>\n        )}\n          {choices.map((c, index) => {\n            return c.empty ? (\n              <Blank key={index} />\n            ) : (\n              <Choice\n                disabled={disabled}\n                className={classes.choice}\n                key={index}\n                extraStyle={{ maxWidth: `${95 / model.categoriesPerRow}%` }}\n                {...c}\n              />\n            );\n          })}\n        </DroppablePlaceholder>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  wrapper: {\n    flex: 1,\n    padding: theme.spacing.unit,\n    touchAction: 'none',\n  },\n  choices: {\n    padding: theme.spacing.unit / 2,\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  labelHolder: {\n    margin: '0 auto',\n    textAlign: 'center',\n    paddingTop: theme.spacing.unit,\n  },\n});\n\nexport default withStyles(styles)(Choices);\n"],"file":"choices.js"}

package/lib/categorize/droppable-placeholder.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.spec = exports.DroppablePlaceholder = void 0;
+exports.spec = exports["default"] = exports.DroppablePlaceholder = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -31,7 +31,7 @@ var _debug = _interopRequireDefault(require("debug"));
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var log = (0, _debug["default"])('@pie-ui:categorize:droppable-placeholder');
 
@@ -54,7 +54,8 @@ var DroppablePlaceholder = /*#__PURE__*/function (_React$Component) {
           isOver = _this$props.isOver,
           className = _this$props.className,
           grid = _this$props.grid,
-          disabled = _this$props.disabled;
+          disabled = _this$props.disabled,
+          choiceBoard = _this$props.choiceBoard;
       return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           flex: 1
@@ -63,7 +64,8 @@ var DroppablePlaceholder = /*#__PURE__*/function (_React$Component) {
         className: className,
         isOver: isOver,
         grid: grid,
-        disabled: disabled
+        disabled: disabled,
+        choiceBoard: choiceBoard
       }, children)));
     }
   }]);