@goldenpine/react-form-builder2 0.18.4-patch.1 → 0.20.3-build.10

package/lib/multi-column/grip.js

@@ -44,9 +44,8 @@ var Grip = function Grip(_ref) {
     className: "is-isolated fas fa-grip-vertical"
   })));
 };
-var _default = (0, _reactDnd.DragSource)(_ItemTypes["default"].BOX, gripSource, function (connect) {
+var _default = exports["default"] = (0, _reactDnd.DragSource)(_ItemTypes["default"].BOX, gripSource, function (connect) {
   return {
     connectDragSource: connect.dragSource()
   };
-})(Grip);
-exports["default"] = _default;
+})(Grip);

package/lib/preview.js

@@ -8,10 +8,9 @@ exports["default"] = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
@@ -19,28 +18,26 @@ var _store = _interopRequireDefault(require("./stores/store"));
 var _formDynamicEdit = _interopRequireDefault(require("./form-dynamic-edit"));
 var _sortableFormElements = _interopRequireDefault(require("./sortable-form-elements"));
 var _componentDragLayer = _interopRequireDefault(require("./form-elements/component-drag-layer"));
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /**
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
   * <Preview />
   */
 var PlaceHolder = _sortableFormElements["default"].PlaceHolder;
-var Preview = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Preview, _React$Component);
-  var _super = _createSuper(Preview);
+var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
   function Preview(props) {
     var _this;
     (0, _classCallCheck2["default"])(this, Preview);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+    _this = _callSuper(this, Preview, [props]);
+    (0, _defineProperty2["default"])(_this, "state", {
       data: [],
       answer_data: {}
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "editModeOff", function (e) {
+    (0, _defineProperty2["default"])(_this, "editModeOff", function (e) {
       if (_this.editForm.current && !_this.editForm.current.contains(e.target)) {
         _this.manualEditModeOff();
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "manualEditModeOff", function () {
+    (0, _defineProperty2["default"])(_this, "manualEditModeOff", function () {
       var editElement = _this.props.editElement;
       if (editElement && editElement.dirty) {
         editElement.dirty = false;
@@ -57,16 +54,17 @@ var Preview = /*#__PURE__*/function (_React$Component) {
       answer_data: {}
     };
     _this.seq = 0;
-    _this._onUpdate = _this._onChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.getDataById = _this.getDataById.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.moveCard = _this.moveCard.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.insertCard = _this.insertCard.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.setAsChild = _this.setAsChild.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.removeChild = _this.removeChild.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._onDestroy = _this._onDestroy.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._onUpdate = _this._onChange.bind(_this);
+    _this.getDataById = _this.getDataById.bind(_this);
+    _this.moveCard = _this.moveCard.bind(_this);
+    _this.insertCard = _this.insertCard.bind(_this);
+    _this.setAsChild = _this.setAsChild.bind(_this);
+    _this.removeChild = _this.removeChild.bind(_this);
+    _this._onDestroy = _this._onDestroy.bind(_this);
     return _this;
   }
-  (0, _createClass2["default"])(Preview, [{
+  (0, _inherits2["default"])(Preview, _React$Component);
+  return (0, _createClass2["default"])(Preview, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
@@ -377,15 +375,13 @@ var Preview = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react["default"].createElement(_componentDragLayer["default"], null));
     }
   }]);
-  return Preview;
 }(_react["default"].Component);
-exports["default"] = Preview;
 Preview.defaultProps = {
   showCorrectColumn: false,
   files: [],
   editMode: false,
   editElement: null,
-  className: 'col-md-9 react-form-builder-preview float-left',
+  className: 'col-md-9 react-form-builder-preview float-start',
   renderEditForm: function renderEditForm(props) {
     return /*#__PURE__*/_react["default"].createElement(_formDynamicEdit["default"], props);
   }

package/lib/sortable-element.js

@@ -5,25 +5,19 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = _default;
+exports["default"] = createDraggableCard;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactDom = require("react-dom");
 var _reactDnd = require("react-dnd");
 var _ItemTypes = _interopRequireDefault(require("./ItemTypes"));
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var _excluded = ["index", "id", "moveCard", "seq"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var style = {
   border: '1px dashed gray',
   padding: '0.5rem 1rem',
@@ -31,147 +25,179 @@ var style = {
   backgroundColor: 'white',
   cursor: 'pointer'
 };
-var cardSource = {
-  beginDrag: function beginDrag(props) {
-    return {
-      itemType: _ItemTypes["default"].CARD,
-      id: props.id,
-      index: props.index
-    };
-  }
-};
-var cardTarget = {
-  drop: function drop(props, monitor, component) {
-    if (!component) {
-      return;
-    }
-    var item = monitor.getItem();
-    var hoverIndex = props.index;
-    var dragIndex = item.index;
-    if (props.data && props.data.isContainer || item.itemType === _ItemTypes["default"].CARD) {
-      // console.log('cardTarget -  Drop', item.itemType);
-      return;
-    }
-    if (item.data && typeof item.setAsChild === 'function') {
-      // console.log('BOX', item);
-      if (dragIndex === -1) {
-        props.insertCard(item, hoverIndex, item.id);
-      }
-    }
-  },
-  hover: function hover(props, monitor, component) {
-    var _props$data, _item$data;
-    var item = monitor.getItem();
-    if (item.itemType === _ItemTypes["default"].BOX && item.index === -1) return;
-
-    // Don't replace multi-column component unless both drag & hover are multi-column
-    if ((_props$data = props.data) !== null && _props$data !== void 0 && _props$data.isContainer && !((_item$data = item.data) !== null && _item$data !== void 0 && _item$data.isContainer)) return;
-    var dragIndex = item.index;
-    var hoverIndex = props.index;
-
-    // Don't replace items with themselves
-    if (dragIndex === hoverIndex) {
-      return;
-    }
-    if (dragIndex === -1) {
-      if (props.data && props.data.isContainer) {
-        return;
+
+// Modern approach using a custom hook for DnD logic
+var useDragAndDrop = function useDragAndDrop(props) {
+  var _ref = (0, _react.useRef)(null);
+
+  // Setup drag
+  var _useDrag = (0, _reactDnd.useDrag)({
+      type: _ItemTypes["default"].CARD,
+      item: function item() {
+        return {
+          itemType: _ItemTypes["default"].CARD,
+          id: props.id,
+          index: props.index
+        };
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
       }
-      // console.log('CARD', item);
-      item.index = hoverIndex;
-      props.insertCard(item.onCreate(item.data), hoverIndex);
-    }
+    }),
+    _useDrag2 = (0, _slicedToArray2["default"])(_useDrag, 3),
+    isDragging = _useDrag2[0].isDragging,
+    drag = _useDrag2[1],
+    preview = _useDrag2[2];
 
-    // Determine rectangle on screen
-    var hoverBoundingRect = (0, _reactDom.findDOMNode)(component).getBoundingClientRect();
+  // Setup drop
+  var _useDrop = (0, _reactDnd.useDrop)({
+      accept: [_ItemTypes["default"].CARD, _ItemTypes["default"].BOX],
+      drop: function drop(item) {
+        // Don't handle drops if we're a container and this is a card drop
+        if (props.data && props.data.isContainer || item.itemType === _ItemTypes["default"].CARD) {
+          return;
+        }
+        var hoverIndex = props.index;
+        var dragIndex = item.index;
 
-    // Get vertical middle
-    var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+        // Handle box drops
+        if (item.data && typeof item.setAsChild === 'function') {
+          if (dragIndex === -1) {
+            props.insertCard(item, hoverIndex, item.id);
+          }
+        }
+      },
+      hover: function hover(item, monitor) {
+        var _props$data, _item$data;
+        // Don't replace items being dragged from box with index -1
+        if (item.itemType === _ItemTypes["default"].BOX && item.index === -1) return;
 
-    // Determine mouse position
-    var clientOffset = monitor.getClientOffset();
+        // Don't replace multi-column component unless both drag & hover are multi-column
+        if ((_props$data = props.data) !== null && _props$data !== void 0 && _props$data.isContainer && !((_item$data = item.data) !== null && _item$data !== void 0 && _item$data.isContainer)) return;
+        var dragIndex = item.index;
+        var hoverIndex = props.index;
 
-    // Get pixels to the top
-    var hoverClientY = clientOffset.y - hoverBoundingRect.top;
+        // Don't replace items with themselves
+        if (dragIndex === hoverIndex) {
+          return;
+        }
 
-    // Only perform the move when the mouse has crossed half of the items height
-    // When dragging downwards, only move when the cursor is below 50%
-    // When dragging upwards, only move when the cursor is above 50%
+        // Handle new items being created
+        if (dragIndex === -1) {
+          if (props.data && props.data.isContainer) {
+            return;
+          }
+          item.index = hoverIndex;
+          props.insertCard(item.onCreate(item.data), hoverIndex);
+          return;
+        }
 
-    // Dragging downwards
-    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-      return;
-    }
+        // Skip if no ref available
+        if (!_ref.current) {
+          return;
+        }
 
-    // Dragging upwards
-    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-      return;
-    }
+        // Determine rectangle on screen
+        var hoverBoundingRect = _ref.current.getBoundingClientRect();
 
-    // Time to actually perform the action
-    props.moveCard(dragIndex, hoverIndex);
+        // Get vertical middle
+        var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
 
-    // Note: we're mutating the monitor item here!
-    // Generally it's better to avoid mutations,
-    // but it's good here for the sake of performance
-    // to avoid expensive index searches.
+        // Determine mouse position
+        var clientOffset = monitor.getClientOffset();
+        if (!clientOffset) return;
 
-    // if (item.itemType == ItemTypes.BOX) item.cardIndex = hoverIndex;
-    // else
-    item.index = hoverIndex;
-  }
-};
+        // Get pixels to the top
+        var hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+        // Only perform the move when the mouse has crossed half of the items height
+        // When dragging downwards, only move when the cursor is below 50%
+        // When dragging upwards, only move when the cursor is above 50%
+
+        // Dragging downwards
+        if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+          return;
+        }
+
+        // Dragging upwards
+        if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+          return;
+        }
+
+        // Time to actually perform the action
+        props.moveCard(dragIndex, hoverIndex);
 
-// eslint-disable-next-line no-unused-vars
-function _default(ComposedComponent) {
-  var Card = /*#__PURE__*/function (_Component) {
-    (0, _inherits2["default"])(Card, _Component);
-    var _super = _createSuper(Card);
-    function Card() {
-      (0, _classCallCheck2["default"])(this, Card);
-      return _super.apply(this, arguments);
-    }
-    (0, _createClass2["default"])(Card, [{
-      key: "render",
-      value: function render() {
-        var _this$props = this.props,
-          isDragging = _this$props.isDragging,
-          connectDragPreview = _this$props.connectDragPreview,
-          connectDropTarget = _this$props.connectDropTarget;
-        var opacity = isDragging ? 0 : 1;
-        return connectDragPreview(connectDropTarget(/*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(ComposedComponent, (0, _extends2["default"])({}, this.props, {
-          style: _objectSpread(_objectSpread({}, style), {}, {
-            opacity: opacity
-          })
-        })))));
+        // Note: we're mutating the monitor item here!
+        // Generally it's better to avoid mutations,
+        // but it's good here for the sake of performance
+        // to avoid expensive index searches.
+        item.index = hoverIndex;
       }
-    }]);
-    return Card;
-  }(_react.Component);
-  (0, _defineProperty2["default"])(Card, "propTypes", {
-    connectDragSource: _propTypes["default"].func,
-    connectDragPreview: _propTypes["default"].func,
-    connectDropTarget: _propTypes["default"].func,
-    index: _propTypes["default"].number.isRequired,
-    isDragging: _propTypes["default"].bool,
-    id: _propTypes["default"].any.isRequired,
-    // text: PropTypes.string.isRequired,
-    moveCard: _propTypes["default"].func.isRequired,
-    seq: _propTypes["default"].number
-  });
-  (0, _defineProperty2["default"])(Card, "defaultProps", {
-    seq: -1
-  });
-  var x = (0, _reactDnd.DropTarget)([_ItemTypes["default"].CARD, _ItemTypes["default"].BOX], cardTarget, function (connect) {
-    return {
-      connectDropTarget: connect.dropTarget()
-    };
-  })(Card);
-  return (0, _reactDnd.DragSource)(_ItemTypes["default"].CARD, cardSource, function (connect, monitor) {
-    return {
-      connectDragSource: connect.dragSource(),
-      connectDragPreview: connect.dragPreview(),
-      isDragging: monitor.isDragging()
-    };
-  })(x);
+    }),
+    _useDrop2 = (0, _slicedToArray2["default"])(_useDrop, 2),
+    drop = _useDrop2[1];
+
+  // Connect the drag and drop refs to the same element
+  return {
+    ref: function ref(node) {
+      _ref.current = node;
+      drop(node);
+      drag(node);
+    },
+    previewRef: preview,
+    isDragging: isDragging
+  };
+};
+
+// Modern approach using a functional component wrapper instead of HOC
+var DraggableCard = function DraggableCard(props) {
+  var index = props.index,
+    id = props.id,
+    moveCard = props.moveCard,
+    _props$seq = props.seq,
+    seq = _props$seq === void 0 ? -1 : _props$seq,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useDragAndDrop = useDragAndDrop(props),
+    ref = _useDragAndDrop.ref,
+    previewRef = _useDragAndDrop.previewRef,
+    isDragging = _useDragAndDrop.isDragging;
+  var opacity = isDragging ? 0 : 1;
+
+  // Use the ComposedComponent passed in props
+  var ComposedComponent = props.component;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: previewRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/_react["default"].createElement(ComposedComponent, (0, _extends2["default"])({}, restProps, {
+    index: index,
+    id: id,
+    moveCard: moveCard,
+    seq: seq,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      opacity: opacity
+    })
+  }))));
+};
+DraggableCard.propTypes = {
+  component: _propTypes["default"].elementType.isRequired,
+  index: _propTypes["default"].number.isRequired,
+  isDragging: _propTypes["default"].bool,
+  id: _propTypes["default"].any.isRequired,
+  moveCard: _propTypes["default"].func.isRequired,
+  seq: _propTypes["default"].number
+};
+DraggableCard.defaultProps = {
+  seq: -1
+};
+
+// This replaces the HOC pattern with a component that takes the component as a prop
+function createDraggableCard(ComposedComponent) {
+  return function (props) {
+    return /*#__PURE__*/_react["default"].createElement(DraggableCard, (0, _extends2["default"])({}, props, {
+      component: ComposedComponent
+    }));
+  };
 }

package/lib/sortable-form-elements.js

@@ -62,5 +62,4 @@ FormElements.TwoColumnRow = (0, _sortableElement["default"])(_multiColumn.TwoCol
 FormElements.ThreeColumnRow = (0, _sortableElement["default"])(_multiColumn.ThreeColumnRow);
 FormElements.MultiColumnRow = (0, _sortableElement["default"])(_multiColumn.MultiColumnRow);
 FormElements.CustomElement = (0, _sortableElement["default"])(_customElement["default"]);
-var _default = FormElements;
-exports["default"] = _default;
+var _default = exports["default"] = FormElements;

package/lib/stores/store.js

@@ -135,5 +135,4 @@ store.setExternalHandler = function (onLoad, onPost) {
   _onLoad = onLoad;
   _onPost = onPost;
 };
-var _default = store;
-exports["default"] = _default;
+var _default = exports["default"] = store;

package/lib/toolbar-draggable-item.js

@@ -5,56 +5,51 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _reactDnd = require("react-dnd");
 var _ItemTypes = _interopRequireDefault(require("./ItemTypes"));
 var _UUID = _interopRequireDefault(require("./UUID"));
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /**
+/**
   * <ToolbarItem />
   */
-var cardSource = {
-  beginDrag: function beginDrag(props) {
-    return {
-      id: _UUID["default"].uuid(),
-      index: -1,
-      data: props.data,
-      onCreate: props.onCreate
-    };
-  }
-};
-var ToolbarItem = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(ToolbarItem, _React$Component);
-  var _super = _createSuper(ToolbarItem);
-  function ToolbarItem() {
-    (0, _classCallCheck2["default"])(this, ToolbarItem);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2["default"])(ToolbarItem, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        connectDragSource = _this$props.connectDragSource,
-        data = _this$props.data,
-        onClick = _this$props.onClick;
-      if (!connectDragSource) return null;
-      return connectDragSource(/*#__PURE__*/_react["default"].createElement("li", {
-        onClick: onClick
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: data.icon
-      }), data.name));
+
+var ToolbarItem = function ToolbarItem(_ref) {
+  var data = _ref.data,
+    onCreate = _ref.onCreate,
+    onClick = _ref.onClick;
+  // Setup drag functionality using the useDrag hook
+  var _useDrag = (0, _reactDnd.useDrag)({
+      type: _ItemTypes["default"].CARD,
+      item: function item() {
+        return {
+          id: _UUID["default"].uuid(),
+          index: -1,
+          data: data,
+          onCreate: onCreate
+        };
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    }),
+    _useDrag2 = (0, _slicedToArray2["default"])(_useDrag, 2),
+    isDragging = _useDrag2[0].isDragging,
+    drag = _useDrag2[1];
+
+  // Apply slight opacity while dragging for better UX
+  var opacity = isDragging ? 0.5 : 1;
+  return /*#__PURE__*/_react["default"].createElement("li", {
+    ref: drag,
+    onClick: onClick,
+    style: {
+      opacity: opacity,
+      cursor: 'move'
     }
-  }]);
-  return ToolbarItem;
-}(_react["default"].Component);
-var _default = (0, _reactDnd.DragSource)(_ItemTypes["default"].CARD, cardSource, function (connect) {
-  return {
-    connectDragSource: connect.dragSource()
-  };
-})(ToolbarItem);
-exports["default"] = _default;
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: data.icon
+  }), data.name);
+};
+var _default = exports["default"] = ToolbarItem;

package/lib/toolbar-group-item.js

@@ -8,8 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
   * <ToolbarGroupItem />
   */
@@ -36,5 +35,4 @@ function ToolbarGroupItem(props) {
     className: classShow
   }, /*#__PURE__*/_react["default"].createElement("ul", null, group.map(renderItem)))));
 }
-var _default = ToolbarGroupItem;
-exports["default"] = _default;
+var _default = exports["default"] = ToolbarGroupItem;