@sis-cc/dotstatsuite-visions 6.6.0 → 6.6.1

package/lib/TableHtml5/subHeader.js

@@ -1,49 +1,64 @@
-"use strict";
-
-var _interopRequireDefault = require("/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+'use strict';
 
 exports.__esModule = true;
-exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
 
-var R = _interopRequireWildcard(require("ramda"));
+var _classnames2 = _interopRequireDefault(_classnames);
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _Typography = require('@material-ui/core/Typography');
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography2 = _interopRequireDefault(_Typography);
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require('@material-ui/core/styles');
 
-var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
+var _TableCell = require('@material-ui/core/TableCell');
 
-var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+var _TableCell2 = _interopRequireDefault(_TableCell);
 
-var _utils = require("../utils");
+var _TableRow = require('@material-ui/core/TableRow');
 
-var _flags = _interopRequireDefault(require("./flags"));
+var _TableRow2 = _interopRequireDefault(_TableRow);
 
-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); }
+var _utils = require('../utils');
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _flags = require('./flags');
+
+var _flags2 = _interopRequireDefault(_flags);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     columnsTitle: {
       backgroundColor: (0, _utils.getLight)(theme) || theme.palette.secondary.light,
       border: 'inherit',
-      borderBottom: "1px solid " + theme.palette.grey[500],
-      borderRight: "1px solid " + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + "px " + theme.spacing(1) + "px",
+      borderBottom: '1px solid ' + theme.palette.grey[500],
+      borderRight: '1px solid ' + theme.palette.grey[500],
+      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
       color: theme.palette.grey['A700'],
       verticalAlign: 'middle'
     },
     fillerCell: {
       backgroundColor: theme.palette.grey[200],
       border: 'inherit',
-      borderBottom: "1px solid " + theme.palette.grey[500],
-      borderRight: "1px solid " + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + "px " + theme.spacing(1) + "px",
+      borderBottom: '1px solid ' + theme.palette.grey[500],
+      borderRight: '1px solid ' + theme.palette.grey[500],
+      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
       verticalAlign: 'middle',
       textAlign: 'center',
       color: theme.palette.grey['A700']
@@ -59,55 +74,69 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     highlight: theme.mixins.table.cellHighlight
   };
 });
+
 var mapIndexed = R.addIndex(R.map);
 
-var SubHeader = _react.default.forwardRef(function (_ref, refs) {
+var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
   var headerData = _ref.headerData,
       xLayoutData = _ref.xLayoutData,
       activeCellIds = _ref.activeCellIds,
       subHeadCellsWidth = _ref.subHeadCellsWidth;
+
   var classes = useStyles();
-  return /*#__PURE__*/_react.default.createElement(_TableRow.default, null, mapIndexed(function (rowItem, index) {
-    return /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-      component: "th",
-      className: classes.columnsTitle,
-      key: index,
-      id: "subHeader_" + index,
-      style: {
-        position: 'sticky',
-        left: subHeadCellsWidth[index],
-        zIndex: 1
-      },
-      ref: function ref(element) {
-        return refs.current[index] = element;
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: classes.cellContent
-    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      variant: "body1",
-      tabIndex: 0,
-      className: classes.label
-    }, R.path(['dimension', 'label'], rowItem), /*#__PURE__*/_react.default.createElement(_flags.default, {
-      flags: R.path(['dimension', 'flags'], rowItem)
-    }))));
-  }, xLayoutData), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-    className: classes.fillerCell,
-    style: {
-      position: 'sticky',
-      left: R.last(subHeadCellsWidth)
-    }
-  }), mapIndexed(function (item, index) {
-    var _cx;
-
-    return /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-      key: index,
-      className: (0, _classnames.default)(classes.fillerCell, (_cx = {}, _cx[classes.highlight] = R.prop(index)(activeCellIds), _cx))
-    }, /*#__PURE__*/_react.default.createElement(_flags.default, {
-      flags: R.prop('flags', item)
-    }));
-  }, headerData));
+  return _react2.default.createElement(
+    _TableRow2.default,
+    null,
+    mapIndexed(function (rowItem, index) {
+      return _react2.default.createElement(
+        _TableCell2.default,
+        {
+          component: 'th',
+          className: classes.columnsTitle,
+          key: index,
+          id: 'subHeader_' + index,
+          style: { position: 'sticky', left: subHeadCellsWidth[index], zIndex: 1 },
+          ref: function ref(element) {
+            return refs.current[index] = element;
+          }
+        },
+        _react2.default.createElement(
+          'div',
+          { className: classes.cellContent },
+          _react2.default.createElement(
+            _Typography2.default,
+            { variant: 'body1', tabIndex: 0, className: classes.label },
+            R.path(['dimension', 'label'], rowItem),
+            _react2.default.createElement(_flags2.default, { flags: R.path(['dimension', 'flags'], rowItem) })
+          )
+        )
+      );
+    }, xLayoutData),
+    _react2.default.createElement(_TableCell2.default, {
+      className: classes.fillerCell,
+      style: { position: 'sticky', left: R.last(subHeadCellsWidth) }
+    }),
+    mapIndexed(function (item, index) {
+      var _cx;
+
+      return _react2.default.createElement(
+        _TableCell2.default,
+        {
+          key: index,
+          className: (0, _classnames2.default)(classes.fillerCell, (_cx = {}, _cx[classes.highlight] = R.prop(index)(activeCellIds), _cx))
+        },
+        _react2.default.createElement(_flags2.default, { flags: R.prop('flags', item) })
+      );
+    }, headerData)
+  );
 });
 
-var _default = SubHeader;
-exports.default = _default;
-module.exports = exports.default;
+SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
+  activeCellIds: _propTypes2.default.object,
+  headerData: _propTypes2.default.array,
+  xLayoutData: _propTypes2.default.array,
+  subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
+} : {};
+
+exports.default = SubHeader;
+module.exports = exports['default'];

package/lib/TableLayout/Box.js

@@ -1,35 +1,49 @@
-"use strict";
-
-var _interopRequireDefault = require("/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+'use strict';
 
 exports.__esModule = true;
-exports.useStyles = exports.default = void 0;
+exports.useStyles = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ramda = require('ramda');
 
-var _react = _interopRequireDefault(require("react"));
+var R = _interopRequireWildcard(_ramda);
 
-var R = _interopRequireWildcard(require("ramda"));
+var _Typography = require('@material-ui/core/Typography');
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography2 = _interopRequireDefault(_Typography);
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _Grid = require('@material-ui/core/Grid');
 
-var _styles = require("@material-ui/core/styles");
+var _Grid2 = _interopRequireDefault(_Grid);
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _styles = require('@material-ui/core/styles');
 
-var _reactBeautifulDnd = require("react-beautiful-dnd");
+var _classnames = require('classnames');
 
-var _DnDItem = _interopRequireDefault(require("./DnDItem"));
+var _classnames2 = _interopRequireDefault(_classnames);
 
-var _utils = require("../utils");
+var _reactBeautifulDnd = require('react-beautiful-dnd');
 
-var _constants = require("./constants");
+var _DnDItem = require('./DnDItem');
 
-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); }
+var _DnDItem2 = _interopRequireDefault(_DnDItem);
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _utils = require('../utils');
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var _constants = require('./constants');
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
   var _ref;
 
   return _ref = {
@@ -47,11 +61,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     canDrop: {
       borderStyle: 'dashed'
     }
-  }, _ref[_constants.BOX.sections + "Container"] = {
+  }, _ref[_constants.BOX.sections + 'Container'] = {
     borderColor: (0, _utils.getDark)(theme) || theme.palette.secondary.dark
-  }, _ref[_constants.BOX.rows + "Container"] = {
+  }, _ref[_constants.BOX.rows + 'Container'] = {
     borderColor: (0, _utils.getLight)(theme) || theme.palette.secondary.light
-  }, _ref[_constants.BOX.header + "Container"] = {
+  }, _ref[_constants.BOX.header + 'Container'] = {
     borderColor: theme.palette.primary.main
   }, _ref.iconTitle = {
     display: 'flex',
@@ -60,7 +74,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     flexFlow: 'nowrap'
   }, _ref.title = theme.typography.subtitle1, _ref;
 });
-exports.useStyles = useStyles;
 
 var Box = function Box(_ref2) {
   var items = _ref2.items,
@@ -72,40 +85,70 @@ var Box = function Box(_ref2) {
       itemButtonProps = _ref2.itemButtonProps,
       accessibility = _ref2.accessibility,
       md = _ref2.md;
+
   var classes = useStyles();
   var canDrag = R.equals(dropZoneLabel, _constants.BOX.rows) ? R.pipe(R.length, R.lt(1))(items) : R.T();
-  return /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    item: true,
-    xs: accessibility ? 4 : 12,
-    md: md
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.iconTitle
-  }, /*#__PURE__*/_react.default.createElement(Icon, null), /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.title
-  }, title), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "srOnly"
-  }, title)), /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.Droppable, {
-    droppableId: dropZoneLabel
-  }, function (provided, snapshot) {
-    var _cx;
-
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: provided.innerRef,
-      className: (0, _classnames.default)(classes.blockDnd, R.prop(dropZoneLabel + "Container")(classes), (_cx = {}, _cx[classes.canDrop] = snapshot.isDraggingOver, _cx))
-    }, R.addIndex(R.map)(function (item, index) {
-      return /*#__PURE__*/_react.default.createElement(_DnDItem.default, {
-        key: item.id,
-        index: index,
-        item: item,
-        itemRenderer: itemRenderer,
-        dropZoneLabel: dropZoneLabel,
-        onChangeLayout: onChangeLayout,
-        itemButtonProps: itemButtonProps,
-        canDrag: canDrag
-      });
-    })(R.values(items)), provided.placeholder);
-  }));
+
+  return _react2.default.createElement(
+    _Grid2.default,
+    { item: true, xs: accessibility ? 4 : 12, md: md },
+    _react2.default.createElement(
+      'div',
+      { className: classes.iconTitle },
+      _react2.default.createElement(Icon, null),
+      _react2.default.createElement(
+        'span',
+        { className: classes.title },
+        title
+      ),
+      _react2.default.createElement(
+        _Typography2.default,
+        { variant: 'srOnly' },
+        title
+      )
+    ),
+    _react2.default.createElement(
+      _reactBeautifulDnd.Droppable,
+      { droppableId: dropZoneLabel },
+      function (provided, snapshot) {
+        var _cx;
+
+        return _react2.default.createElement(
+          'div',
+          {
+            ref: provided.innerRef,
+            className: (0, _classnames2.default)(classes.blockDnd, R.prop(dropZoneLabel + 'Container')(classes), (_cx = {}, _cx[classes.canDrop] = snapshot.isDraggingOver, _cx))
+          },
+          R.addIndex(R.map)(function (item, index) {
+            return _react2.default.createElement(_DnDItem2.default, {
+              key: item.id,
+              index: index,
+              item: item,
+              itemRenderer: itemRenderer,
+              dropZoneLabel: dropZoneLabel,
+              onChangeLayout: onChangeLayout,
+              itemButtonProps: itemButtonProps,
+              canDrag: canDrag
+            });
+          })(R.values(items)),
+          provided.placeholder
+        );
+      }
+    )
+  );
 };
 
-var _default = Box;
-exports.default = _default;
+Box.propTypes = process.env.NODE_ENV !== "production" ? {
+  items: _propTypes2.default.array,
+  itemRenderer: _propTypes2.default.func,
+  dropZoneLabel: _propTypes2.default.string,
+  title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  Icon: _propTypes2.default.object,
+  onChangeLayout: _propTypes2.default.func,
+  putItem: _propTypes2.default.func,
+  itemButtonProps: _propTypes2.default.object,
+  accessibility: _propTypes2.default.bool,
+  md: _propTypes2.default.number
+} : {};
+
+exports.default = Box;

package/lib/TableLayout/DnDItem.js

@@ -1,37 +1,51 @@
-"use strict";
-
-var _interopRequireDefault = require("/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+'use strict';
 
 exports.__esModule = true;
-exports.useStyles = exports.default = void 0;
+exports.useStyles = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _extends2 = _interopRequireDefault(require("/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+var _ramda = require('ramda');
 
-var _react = _interopRequireWildcard(require("react"));
+var R = _interopRequireWildcard(_ramda);
 
-var R = _interopRequireWildcard(require("ramda"));
+var _classnames = require('classnames');
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _classnames2 = _interopRequireDefault(_classnames);
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require('@material-ui/core/styles');
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = require('@material-ui/core/Typography');
 
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+var _Typography2 = _interopRequireDefault(_Typography);
 
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _Select = require('@material-ui/core/Select');
 
-var _reactBeautifulDnd = require("react-beautiful-dnd");
+var _Select2 = _interopRequireDefault(_Select);
 
-var _utils = require("../utils");
+var _MenuItem = require('@material-ui/core/MenuItem');
 
-var _constants = require("./constants");
+var _MenuItem2 = _interopRequireDefault(_MenuItem);
 
-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); }
+var _reactBeautifulDnd = require('react-beautiful-dnd');
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _utils = require('../utils');
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var _constants = require('./constants');
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
   var _ref;
 
   return _ref = {
@@ -53,13 +67,13 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       opacity: 1,
       flexFlow: 'wrap'
     }
-  }, _ref[_constants.BOX.sections + "Item"] = {
+  }, _ref[_constants.BOX.sections + 'Item'] = {
     color: theme.palette.getContrastText((0, _utils.getDark)(theme) || theme.palette.secondary.dark),
     backgroundColor: (0, _utils.getDark)(theme) || theme.palette.secondary.dark
-  }, _ref[_constants.BOX.rows + "Item"] = {
+  }, _ref[_constants.BOX.rows + 'Item'] = {
     color: theme.palette.getContrastText((0, _utils.getLight)(theme) || theme.palette.secondary.light),
     backgroundColor: (0, _utils.getLight)(theme) || theme.palette.secondary.light
-  }, _ref[_constants.BOX.header + "Item"] = {
+  }, _ref[_constants.BOX.header + 'Item'] = {
     color: theme.palette.getContrastText(theme.palette.primary.main),
     backgroundColor: theme.palette.primary.main
   }, _ref.cantMove = {
@@ -79,7 +93,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     margin: theme.spacing(0, 1, 0, 0)
   }, _ref;
 });
-exports.useStyles = useStyles;
 
 var DnDItem = function DnDItem(_ref2) {
   var item = _ref2.item,
@@ -88,43 +101,70 @@ var DnDItem = function DnDItem(_ref2) {
       dropZoneLabel = _ref2.dropZoneLabel,
       itemButtonProps = _ref2.itemButtonProps,
       canDrag = _ref2.canDrag;
+
   var classes = useStyles();
   var selectItem = R.prop(item.id)(itemButtonProps);
-  return /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.Draggable, {
-    key: item.id,
-    draggableId: item.id,
-    index: index,
-    isDragDisabled: R.not(canDrag)
-  }, function (provided) {
-    var _cx, _cx2;
-
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-      ref: provided.innerRef
-    }, provided.draggableProps, provided.dragHandleProps, {
-      className: (0, _classnames.default)(classes.styledItemContainer, classes.containerButton, [R.prop(dropZoneLabel + "Item")(classes)], (_cx = {}, _cx[classes.cantMove] = R.not(canDrag), _cx)),
-      "aria-label": itemRenderer(item),
-      "aria-describedby": _constants.wcagId
-    }), /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      variant: 'body2',
-      className: (0, _classnames.default)(classes.text, (_cx2 = {}, _cx2[classes.spaceButton] = selectItem, _cx2))
-    }, itemRenderer(item)), selectItem && /*#__PURE__*/_react.default.createElement(_Select.default, {
-      id: item.id,
-      value: selectItem.value,
-      onChange: function onChange(e) {
-        return selectItem.onChange(e.target.value);
-      },
-      classes: {
-        root: classes.select
-      },
-      variant: "outlined"
-    }, R.map(function (v) {
-      return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-        key: v,
-        value: v
-      }, v);
-    })(selectItem.options))));
-  });
+  return _react2.default.createElement(
+    _reactBeautifulDnd.Draggable,
+    { key: item.id, draggableId: item.id, index: index, isDragDisabled: R.not(canDrag) },
+    function (provided) {
+      var _cx, _cx2;
+
+      return _react2.default.createElement(
+        'div',
+        _extends({
+          ref: provided.innerRef
+        }, provided.draggableProps, provided.dragHandleProps, {
+          className: (0, _classnames2.default)(classes.styledItemContainer, classes.containerButton, [R.prop(dropZoneLabel + 'Item')(classes)], (_cx = {}, _cx[classes.cantMove] = R.not(canDrag), _cx)),
+          'aria-label': itemRenderer(item),
+          'aria-describedby': _constants.wcagId
+        }),
+        _react2.default.createElement(
+          _react.Fragment,
+          null,
+          _react2.default.createElement(
+            _Typography2.default,
+            {
+              variant: 'body2',
+              className: (0, _classnames2.default)(classes.text, (_cx2 = {}, _cx2[classes.spaceButton] = selectItem, _cx2))
+            },
+            itemRenderer(item)
+          ),
+          selectItem && _react2.default.createElement(
+            _Select2.default,
+            {
+              id: item.id,
+              value: selectItem.value,
+              onChange: function onChange(e) {
+                return selectItem.onChange(e.target.value);
+              },
+              classes: { root: classes.select },
+              variant: 'outlined'
+            },
+            R.map(function (v) {
+              return _react2.default.createElement(
+                _MenuItem2.default,
+                { key: v, value: v },
+                v
+              );
+            })(selectItem.options)
+          )
+        )
+      );
+    }
+  );
 };
 
-var _default = DnDItem;
-exports.default = _default;
+DnDItem.propTypes = process.env.NODE_ENV !== "production" ? {
+  item: _propTypes2.default.object,
+  index: _propTypes2.default.number,
+  itemRenderer: _propTypes2.default.func,
+  dropZoneLabel: _propTypes2.default.string,
+  onChangeLayout: _propTypes2.default.func,
+  itemButtonProps: _propTypes2.default.object,
+  handleChangeBox: _propTypes2.default.func,
+  canDrag: _propTypes2.default.bool,
+  dropZoneIndex: _propTypes2.default.number
+} : {};
+
+exports.default = DnDItem;