@rpg-engine/long-bow 0.5.30 → 0.5.32

package/dist/long-bow.cjs.development.js

@@ -13866,6 +13866,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     setDropPosition = _useState8[1];
   var dragContainer = React.useRef(null);
   var _useDragging = useDragging(),
+    draggingItem = _useDragging.item,
     setDraggingItem = _useDragging.setDraggingItem;
   var _useState9 = React.useState([]),
     contextActions = _useState9[0],
@@ -13910,6 +13911,9 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
         setItemShortcut(item, index);
       }
     }
+    // remove the class react-draggable-dragging from the element
+    // to prevent the item from being dragged again
+    target.classList.remove('react-draggable-dragging');
     if (wasDragged && item && !isSelectingShortcut) {
       var _e$target;
       //@ts-ignore
@@ -13971,7 +13975,6 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       return;
     }
     if (onDragStart && containerType) {
-      setDraggingItem(item);
       onDragStart(item, slotIndex, containerType);
     }
   };
@@ -13980,8 +13983,12 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       setWasDragged(true);
       setIsFocused(true);
     }
+    if (!draggingItem) {
+      setDraggingItem(item);
+    }
   };
   return React__default.createElement(Container$a, {
+    isDraggingItem: !!draggingItem,
     item: item,
     className: "rpgui-icon empty-slot",
     onMouseUp: function onMouseUp() {
@@ -14060,17 +14067,20 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
 var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.react-draggable-dragging{opacity:0;}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
-  var item = _ref2.item;
-  return rarityColor(item);
+})(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
+  var isDraggingItem = _ref2.isDraggingItem;
+  return isDraggingItem ? 0 : 1;
 }, function (_ref3) {
   var item = _ref3.item;
-  return "0 0 5px 2px " + rarityColor(item);
+  return rarityColor(item);
 }, function (_ref4) {
   var item = _ref4.item;
-  return "0 0 4px 3px " + rarityColor(item);
+  return "0 0 5px 2px " + rarityColor(item);
 }, function (_ref5) {
-  var isSelectingShortcut = _ref5.isSelectingShortcut;
+  var item = _ref5.item;
+  return "0 0 4px 3px " + rarityColor(item);
+}, function (_ref6) {
+  var isSelectingShortcut = _ref6.isSelectingShortcut;
   return isSelectingShortcut ? 'bg-color-change 1s infinite' : 'none';
 });
 var ItemContainer = /*#__PURE__*/styled.div.withConfig({