@sis-cc/dotstatsuite-visions 6.4.3 → 6.6.0

package/lib/TableHtml5/subHeader.js

@@ -1,64 +1,49 @@
-'use strict';
+"use strict";
 
-exports.__esModule = true;
-
-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 _interopRequireDefault = require("/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _Typography = require('@material-ui/core/Typography');
+exports.__esModule = true;
+exports.default = void 0;
 
-var _Typography2 = _interopRequireDefault(_Typography);
+var _react = _interopRequireDefault(require("react"));
 
-var _styles = require('@material-ui/core/styles');
+var R = _interopRequireWildcard(require("ramda"));
 
-var _TableCell = require('@material-ui/core/TableCell');
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _TableCell2 = _interopRequireDefault(_TableCell);
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _TableRow = require('@material-ui/core/TableRow');
+var _styles = require("@material-ui/core/styles");
 
-var _TableRow2 = _interopRequireDefault(_TableRow);
+var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
 
-var _utils = require('../utils');
+var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
 
-var _flags = require('./flags');
+var _utils = require("../utils");
 
-var _flags2 = _interopRequireDefault(_flags);
+var _flags = _interopRequireDefault(require("./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 _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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 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']
@@ -74,60 +59,55 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     highlight: theme.mixins.table.cellHighlight
   };
 });
-
 var mapIndexed = R.addIndex(R.map);
 
-var SubHeader = function SubHeader(_ref) {
+var SubHeader = _react.default.forwardRef(function (_ref, refs) {
   var headerData = _ref.headerData,
       xLayoutData = _ref.xLayoutData,
-      activeCellIds = _ref.activeCellIds;
-
+      activeCellIds = _ref.activeCellIds,
+      subHeadCellsWidth = _ref.subHeadCellsWidth;
   var classes = useStyles();
-  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
-        },
-        _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 }),
-    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)
-  );
-};
-
-SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
-  activeCellIds: _propTypes2.default.object,
-  headerData: _propTypes2.default.array,
-  xLayoutData: _propTypes2.default.array
-} : {};
-
-exports.default = SubHeader;
-module.exports = exports['default'];
+  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));
+});
+
+var _default = SubHeader;
+exports.default = _default;
+module.exports = exports.default;

package/lib/TableLayout/Box.js

@@ -1,49 +1,35 @@
-'use strict';
+"use strict";
 
-exports.__esModule = true;
-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 _interopRequireDefault = require("/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
 
-var R = _interopRequireWildcard(_ramda);
-
-var _Typography = require('@material-ui/core/Typography');
-
-var _Typography2 = _interopRequireDefault(_Typography);
+exports.__esModule = true;
+exports.useStyles = exports.default = void 0;
 
-var _Grid = require('@material-ui/core/Grid');
+var _react = _interopRequireDefault(require("react"));
 
-var _Grid2 = _interopRequireDefault(_Grid);
+var R = _interopRequireWildcard(require("ramda"));
 
-var _styles = require('@material-ui/core/styles');
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _classnames = require('classnames');
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
 
-var _classnames2 = _interopRequireDefault(_classnames);
+var _styles = require("@material-ui/core/styles");
 
-var _reactBeautifulDnd = require('react-beautiful-dnd');
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _DnDItem = require('./DnDItem');
+var _reactBeautifulDnd = require("react-beautiful-dnd");
 
-var _DnDItem2 = _interopRequireDefault(_DnDItem);
+var _DnDItem = _interopRequireDefault(require("./DnDItem"));
 
-var _utils = require('../utils');
+var _utils = require("../utils");
 
-var _constants = require('./constants');
+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 _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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   var _ref;
 
   return _ref = {
@@ -61,11 +47,11 @@ var useStyles = exports.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',
@@ -74,6 +60,7 @@ var useStyles = exports.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,
@@ -85,70 +72,40 @@ 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 _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
-        );
-      }
-    )
-  );
+  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);
+  }));
 };
 
-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;
+var _default = Box;
+exports.default = _default;

package/lib/TableLayout/DnDItem.js

@@ -1,51 +1,37 @@
-'use strict';
+"use strict";
 
-exports.__esModule = true;
-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 _interopRequireDefault = require("/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
 
-var _ramda = require('ramda');
-
-var R = _interopRequireWildcard(_ramda);
-
-var _classnames = require('classnames');
+exports.__esModule = true;
+exports.useStyles = exports.default = void 0;
 
-var _classnames2 = _interopRequireDefault(_classnames);
+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 _styles = require('@material-ui/core/styles');
+var _react = _interopRequireWildcard(require("react"));
 
-var _Typography = require('@material-ui/core/Typography');
+var R = _interopRequireWildcard(require("ramda"));
 
-var _Typography2 = _interopRequireDefault(_Typography);
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Select = require('@material-ui/core/Select');
+var _styles = require("@material-ui/core/styles");
 
-var _Select2 = _interopRequireDefault(_Select);
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _MenuItem = require('@material-ui/core/MenuItem');
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
 
-var _MenuItem2 = _interopRequireDefault(_MenuItem);
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
 
-var _reactBeautifulDnd = require('react-beautiful-dnd');
+var _reactBeautifulDnd = require("react-beautiful-dnd");
 
-var _utils = require('../utils');
+var _utils = require("../utils");
 
-var _constants = require('./constants');
+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 _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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   var _ref;
 
   return _ref = {
@@ -67,13 +53,13 @@ var useStyles = exports.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 = {
@@ -93,6 +79,7 @@ var useStyles = exports.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,
@@ -101,70 +88,43 @@ 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 _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)
-          )
-        )
-      );
-    }
-  );
+  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))));
+  });
 };
 
-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;
+var _default = DnDItem;
+exports.default = _default;