@rpg-engine/long-bow 0.7.53 → 0.7.61

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

@@ -27741,6 +27741,200 @@ var DraggingProvider = function DraggingProvider(_ref) {
   }, children);
 };
 
+var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
+  var isDepotSystem = _ref.isDepotSystem,
+    item = _ref.item,
+    onDrop = _ref.onDrop,
+    onDragEnd = _ref.onDragEnd,
+    checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
+    checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
+    setItemShortcut = _ref.setItemShortcut,
+    isSelectingShortcut = _ref.isSelectingShortcut,
+    onDragStart = _ref.onDragStart,
+    onPointerDown = _ref.onPointerDown,
+    containerType = _ref.containerType,
+    slotIndex = _ref.slotIndex,
+    openQuantitySelector = _ref.openQuantitySelector,
+    isContextMenuDisabled = _ref.isContextMenuDisabled,
+    setTooltipState = _ref.setTooltipState,
+    setContextMenuState = _ref.setContextMenuState;
+  var dragContainer = React.useRef(null);
+  var _useDragging = useDragging(),
+    draggingItem = _useDragging.item,
+    setDraggingItem = _useDragging.setDraggingItem;
+  var _useState = React.useState({
+      isFocused: false,
+      wasDragged: false,
+      position: {
+        x: 0,
+        y: 0
+      },
+      dropPosition: null
+    }),
+    dragState = _useState[0],
+    setDragState = _useState[1];
+  React.useEffect(function () {
+    setDragState(function (prev) {
+      return _extends({}, prev, {
+        position: {
+          x: 0,
+          y: 0
+        },
+        isFocused: false
+      });
+    });
+  }, [item, isDepotSystem]);
+  React.useEffect(function () {
+    if (onDrop && item && dragState.dropPosition) {
+      onDrop(item, dragState.dropPosition);
+      setDragState(function (prev) {
+        return _extends({}, prev, {
+          dropPosition: null
+        });
+      });
+    }
+  }, [dragState.dropPosition, item, onDrop]);
+  var getContainerBounds = React.useCallback(function () {
+    var container = dragContainer.current;
+    if (!container) return {
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0
+    };
+    var rect = container.getBoundingClientRect();
+    return {
+      left: rect.left,
+      top: rect.top,
+      right: window.innerWidth - rect.right,
+      bottom: window.innerHeight - rect.bottom
+    };
+  }, []);
+  var resetDragState = React.useCallback(function () {
+    setTooltipState(function (prev) {
+      return _extends({}, prev, {
+        visible: false
+      });
+    });
+    setDragState(function (prev) {
+      return _extends({}, prev, {
+        wasDragged: false,
+        isFocused: false,
+        position: {
+          x: 0,
+          y: 0
+        }
+      });
+    });
+  }, [setTooltipState]);
+  var handleSuccessfulDrag = React.useCallback(function (quantity) {
+    resetDragState();
+    if (quantity !== -1 && item) {
+      onDragEnd == null ? void 0 : onDragEnd(quantity);
+    }
+  }, [item, onDragEnd, resetDragState]);
+  var onDraggableStart = React.useCallback(function () {
+    if (!item || isSelectingShortcut) return;
+    if (onDragStart && containerType) {
+      onDragStart(item, slotIndex, containerType);
+    }
+  }, [item, isSelectingShortcut, onDragStart, containerType, slotIndex]);
+  var onDraggableProgress = React.useCallback(function (_e, data) {
+    var _dragState$position = dragState.position,
+      x = _dragState$position.x,
+      y = _dragState$position.y;
+    if (Math.abs(data.x - x) > 5 || Math.abs(data.y - y) > 5) {
+      setDragState(function (prev) {
+        return _extends({}, prev, {
+          wasDragged: true,
+          isFocused: true
+        });
+      });
+    }
+    if (!draggingItem) {
+      setDraggingItem(item);
+    }
+  }, [dragState.position, draggingItem, item, setDraggingItem]);
+  var onDraggableStop = React.useCallback(function (e, data) {
+    setTimeout(function () {
+      setDraggingItem(null);
+    }, 50);
+    var target = e.target;
+    if (!target) return;
+    target.classList.remove('react-draggable-dragging');
+    if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
+      var index = parseInt(target.id.split('_')[1]);
+      if (!isNaN(index)) {
+        setItemShortcut(item, index);
+      }
+    }
+    if (dragState.wasDragged && item && !isSelectingShortcut) {
+      var classes = Array.from(target.classList);
+      var isOutsideDrop = classes.some(function (elm) {
+        return elm.includes('rpgui-content');
+      }) || classes.length === 0;
+      if (isOutsideDrop) {
+        setDragState(function (prev) {
+          return _extends({}, prev, {
+            dropPosition: {
+              x: data.x,
+              y: data.y
+            }
+          });
+        });
+      }
+      setDragState(function (prev) {
+        return _extends({}, prev, {
+          wasDragged: false
+        });
+      });
+      setTimeout(function () {
+        if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved() && (!checkIfItemShouldDragEnd || checkIfItemShouldDragEnd())) {
+          if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
+            openQuantitySelector(item.stackQty, handleSuccessfulDrag);
+          } else {
+            handleSuccessfulDrag(item.stackQty);
+          }
+        } else {
+          resetDragState();
+        }
+      }, 50);
+    } else if (item) {
+      var isTouch = e.type === 'touchend';
+      if (!isContextMenuDisabled && isTouch && !isSelectingShortcut && !draggingItem) {
+        setTooltipState(function (prev) {
+          return _extends({}, prev, {
+            mobileVisible: true
+          });
+        });
+      } else if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
+        var event = e;
+        setContextMenuState(function (prev) {
+          return {
+            visible: !prev.visible,
+            position: {
+              x: event.clientX - 10,
+              y: event.clientY - 5
+            }
+          };
+        });
+      }
+      onPointerDown == null ? void 0 : onPointerDown(item.type, containerType != null ? containerType : null, item);
+    }
+  }, [dragState.wasDragged, item, isSelectingShortcut, checkIfItemCanBeMoved, checkIfItemShouldDragEnd, openQuantitySelector, handleSuccessfulDrag, resetDragState, isContextMenuDisabled, setTooltipState, setContextMenuState, onPointerDown, containerType, setItemShortcut]);
+  return {
+    dragContainer: dragContainer,
+    dragState: dragState,
+    draggingItem: draggingItem,
+    setDraggingItem: setDraggingItem,
+    getContainerBounds: getContainerBounds,
+    onDraggableStart: onDraggableStart,
+    onDraggableProgress: onDraggableProgress,
+    onDraggableStop: onDraggableStop,
+    resetItem: resetDragState
+  };
+};
+
 var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
   var contextMenu = actionsByTypeList.map(function (action) {
     return {
@@ -27884,7 +28078,7 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
     containerType = _ref.itemContainerType,
     slotSpriteMask = _ref.slotSpriteMask,
     _onMouseOver = _ref.onMouseOver,
-    _onMouseOut = _ref.onMouseOut,
+    onMouseOut = _ref.onMouseOut,
     onPointerDown = _ref.onPointerDown,
     _onSelected = _ref.onSelected,
     atlasJSON = _ref.atlasJSON,
@@ -27897,7 +28091,6 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
     onDrop = _ref.onOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     openQuantitySelector = _ref.openQuantitySelector,
-    checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
     dragScale = _ref.dragScale,
     isSelectingShortcut = _ref.isSelectingShortcut,
     equipmentSet = _ref.equipmentSet,
@@ -27918,318 +28111,113 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
     }),
     contextMenuState = _useState2[0],
     setContextMenuState = _useState2[1];
-  var _useState3 = React.useState({
-      isFocused: false,
-      wasDragged: false,
-      position: {
-        x: 0,
-        y: 0
-      },
-      dropPosition: null
+  var _useState3 = React.useState([]),
+    contextActions = _useState3[0],
+    setContextActions = _useState3[1];
+  var _useItemSlotDragAndDr = useItemSlotDragAndDrop({
+      isDepotSystem: !!isDepotSystem,
+      item: item,
+      onDrop: onDrop != null ? onDrop : function () {},
+      onDragEnd: onDragEnd,
+      checkIfItemCanBeMoved: checkIfItemCanBeMoved,
+      setItemShortcut: setItemShortcut,
+      isSelectingShortcut: isSelectingShortcut,
+      onDragStart: onDragStart,
+      onPointerDown: onPointerDown,
+      containerType: containerType,
+      slotIndex: slotIndex,
+      openQuantitySelector: openQuantitySelector != null ? openQuantitySelector : function () {},
+      isContextMenuDisabled: isContextMenuDisabled,
+      setTooltipState: setTooltipState,
+      contextMenuState: contextMenuState,
+      setContextMenuState: setContextMenuState
     }),
-    dragState = _useState3[0],
-    setDragState = _useState3[1];
-  var dragContainer = React.useRef(null);
-  var _useDragging = useDragging(),
-    draggingItem = _useDragging.item,
-    setDraggingItem = _useDragging.setDraggingItem;
-  var _useState4 = React.useState([]),
-    contextActions = _useState4[0],
-    setContextActions = _useState4[1];
-  var _useState5 = React.useState(null),
-    touchStartTime = _useState5[0],
-    setTouchStartTime = _useState5[1];
-  var _useState6 = React.useState(null),
-    touchStartPosition = _useState6[0],
-    setTouchStartPosition = _useState6[1];
-  var _useState7 = React.useState(false),
-    isDragging = _useState7[0],
-    setIsDragging = _useState7[1]; // New state to track dragging
+    dragContainer = _useItemSlotDragAndDr.dragContainer,
+    dragState = _useItemSlotDragAndDr.dragState,
+    draggingItem = _useItemSlotDragAndDr.draggingItem,
+    getContainerBounds = _useItemSlotDragAndDr.getContainerBounds,
+    onDraggableStart = _useItemSlotDragAndDr.onDraggableStart,
+    onDraggableProgress = _useItemSlotDragAndDr.onDraggableProgress,
+    onDraggableStop = _useItemSlotDragAndDr.onDraggableStop;
   React.useEffect(function () {
-    setDragState(function (prev) {
-      return _extends({}, prev, {
-        position: {
-          x: 0,
-          y: 0
-        },
-        isFocused: false
-      });
-    });
     if (item && containerType) {
       setContextActions(generateContextMenu(item, containerType, isDepotSystem));
     }
   }, [item, isDepotSystem]);
-  React.useEffect(function () {
-    if (onDrop && item && dragState.dropPosition) {
-      onDrop(item, dragState.dropPosition);
-      setDragState(function (prev) {
-        return _extends({}, prev, {
-          dropPosition: null
-        });
-      });
-    }
-  }, [dragState.dropPosition]);
-  var getContainerBounds = React.useCallback(function () {
-    var container = dragContainer.current;
-    if (!container) return {
-      left: 0,
-      top: 0,
-      right: 0,
-      bottom: 0
-    };
-    var rect = container.getBoundingClientRect();
-    return {
-      left: rect.left,
-      top: rect.top,
-      right: window.innerWidth - rect.right,
-      bottom: window.innerHeight - rect.bottom
-    };
-  }, [dragContainer]);
-  var resetItem = function resetItem() {
-    setTooltipState(function (prev) {
-      return _extends({}, prev, {
-        visible: false,
-        mobileVisible: false
-      });
-    });
-    setDragState(function (prev) {
-      return _extends({}, prev, {
-        wasDragged: false
-      });
-    });
-    setIsDragging(false); // Reset dragging flag
-  };
-  var onSuccessfulDrag = function onSuccessfulDrag(quantity) {
-    resetItem();
-    if (quantity === -1) {
-      setDragState(function (prev) {
-        return _extends({}, prev, {
-          position: {
-            x: 0,
-            y: 0
-          },
-          isFocused: false
-        });
-      });
-    } else if (item) {
-      onDragEnd == null ? void 0 : onDragEnd(quantity);
-    }
-  };
-  var onDraggableStop = function onDraggableStop(e, data) {
-    setDraggingItem(null);
-    var target = e.target;
-    if (!target) return;
-    if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
-      var index = parseInt(target.id.split('_')[1]);
-      if (!isNaN(index)) {
-        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');
-    var isTouch = e.type.startsWith('touch');
-    if (isTouch) {
-      var touchEvent = e;
-      var touch = touchEvent.changedTouches[0];
-      var touchEndTime = new Date().getTime();
-      var touchDuration = touchStartTime ? touchEndTime - touchStartTime : 0;
-      // Check if it's a short tap (less than 200ms) and hasn't moved much
-      var isShortTap = touchDuration < 200;
-      var hasMovedSignificantly = touchStartPosition && (Math.abs(touch.clientX - touchStartPosition.x) > 10 || Math.abs(touch.clientY - touchStartPosition.y) > 10);
-      if (isShortTap && !hasMovedSignificantly) {
-        // Handle as a tap/click
-        if (item) {
-          setTooltipState(function (prev) {
-            return _extends({}, prev, {
-              mobileVisible: true
-            });
-          });
-          onPointerDown(item.type, containerType != null ? containerType : null, item);
-        }
-        return;
-      }
-    }
-    // Threshold for considering a tap/click as a drag
-    var dragThreshold = 5; // pixels
-    var isDrag = Math.abs(data.x) > dragThreshold || Math.abs(data.y) > dragThreshold;
-    if (dragState.wasDragged && item && !isSelectingShortcut) {
-      var _e$target;
-      //@ts-ignore
-      var classes = Array.from((_e$target = e.target) == null ? void 0 : _e$target.classList);
-      var isOutsideDrop = classes.some(function (elm) {
-        return elm.includes('rpgui-content');
-      }) || classes.length === 0;
-      if (isOutsideDrop) {
-        setDragState(function (prev) {
-          return _extends({}, prev, {
-            dropPosition: {
-              x: data.x,
-              y: data.y
-            }
-          });
-        });
-      }
-      setDragState(function (prev) {
-        return _extends({}, prev, {
-          wasDragged: false
-        });
-      });
-      var _target = dragContainer.current;
-      if (!_target || !dragState.wasDragged) return;
-      var style = window.getComputedStyle(_target);
-      var matrix = new DOMMatrixReadOnly(style.transform);
-      var x = matrix.m41;
-      var y = matrix.m42;
-      setDragState(function (prev) {
-        return _extends({}, prev, {
-          position: {
-            x: x,
-            y: y
-          }
-        });
-      });
-      setTimeout(function () {
-        if (checkIfItemCanBeMoved && checkIfItemCanBeMoved()) {
-          if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
-          if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
-            openQuantitySelector(item.stackQty, onSuccessfulDrag);
-          } else onSuccessfulDrag(item.stackQty);
-        } else {
-          resetItem();
-          setDragState(function (prev) {
-            return _extends({}, prev, {
-              isFocused: false,
-              position: {
-                x: 0,
-                y: 0
-              }
-            });
-          });
-        }
-      }, 50);
-    } else if (item) {
-      if (isTouch && isDragging) {
-        // If it's a touch and we were dragging, do not show context menu
-        return;
-      } else if (isTouch && !isDrag) {
-        // Handle as a tap/click
-        setTooltipState(function (prev) {
-          return _extends({}, prev, {
-            mobileVisible: true
-          });
-        });
-        onPointerDown(item.type, containerType != null ? containerType : null, item);
-      } else if (!isTouch && !isContextMenuDisabled && !isSelectingShortcut) {
-        // Handle as context menu for mouse devices
-        setContextMenuState(function (prev) {
-          return _extends({}, prev, {
-            visible: !contextMenuState.visible
-          });
-        });
-        var event = e;
-        if (event.clientX && event.clientY) {
-          setContextMenuState(function (prev) {
-            return _extends({}, prev, {
-              position: {
-                x: event.clientX - 10,
-                y: event.clientY - 5
-              }
-            });
-          });
-        }
+  var bounds = getContainerBounds();
+  var handleInteraction = React.useCallback(function (event) {
+    event.stopPropagation();
+    var _ref2 = 'touches' in event ? event.touches[0] : event,
+      clientX = _ref2.clientX,
+      clientY = _ref2.clientY;
+    if (item && containerType) {
+      if (onPlaceDrop && draggingItem) {
+        onPlaceDrop(item, slotIndex, containerType);
       }
-      if (!isDrag && !isTouch) {
-        console.log('Calling onPointerDown');
-        onPointerDown(item.type, containerType != null ? containerType : null, item);
+      if (onPointerDown && onDragStart === undefined && onDragEnd === undefined) {
+        onPointerDown(item.type, containerType, item);
       }
     }
-    setDragState(function (prev) {
+    setTooltipState(function (prev) {
       return _extends({}, prev, {
-        wasDragged: false
+        visible: true
       });
     });
-    console.log('Final dragState:', dragState);
-  };
-  var onDraggableStart = function onDraggableStart() {
-    if (!item || isSelectingShortcut) {
-      return;
-    }
-    if (onDragStart && containerType) {
-      onDragStart(item, slotIndex, containerType);
-    }
-    setIsDragging(true); // Set dragging flag on start
-  };
-  var onDraggableProgress = function onDraggableProgress(_e, data) {
-    if (Math.abs(data.x - dragState.position.x) > 5 || Math.abs(data.y - dragState.position.y) > 5) {
-      setDragState(function (prev) {
-        return _extends({}, prev, {
-          wasDragged: true,
-          isFocused: true
-        });
+    _onMouseOver == null ? void 0 : _onMouseOver(event, slotIndex, item, clientX, clientY);
+  }, [item, containerType, slotIndex, onPlaceDrop, onPointerDown, _onMouseOver, onDragStart, onDragEnd]);
+  var handleInteractionEnd = React.useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    setTooltipState(function (prev) {
+      return _extends({}, prev, {
+        visible: false
       });
-    }
-    if (!draggingItem) {
-      setDraggingItem(item);
-    }
-  };
-  var onTouchStartHandler = function onTouchStartHandler(e) {
-    setTouchStartTime(new Date().getTime());
-    setTouchStartPosition({
-      x: e.touches[0].clientX,
-      y: e.touches[0].clientY
     });
-  };
-  var onTouchEndHandler = function onTouchEndHandler(e) {
-    // Only prevent default if not dragging
-    if (!isDragging) {
-      e.preventDefault();
-    }
-    var touch = e.changedTouches[0];
-    var touchEndTime = new Date().getTime();
-    var touchDuration = touchStartTime ? touchEndTime - touchStartTime : 0;
-    // Check if it's a short tap (less than 200ms) and hasn't moved much
-    var isShortTap = touchDuration < 200;
-    var hasMovedSignificantly = touchStartPosition && (Math.abs(touch.clientX - touchStartPosition.x) > 10 || Math.abs(touch.clientY - touchStartPosition.y) > 10);
-    if (isShortTap && !hasMovedSignificantly) {
-      // Handle as a tap/click
-      if (item) {
-        setTooltipState(function (prev) {
-          return _extends({}, prev, {
-            mobileVisible: true
-          });
-        });
-        onPointerDown(item.type, containerType != null ? containerType : null, item);
-      }
-    } else {
+    onMouseOut == null ? void 0 : onMouseOut();
+    if (event.type === 'touchend' && 'changedTouches' in event) {
       var _document$elementFrom;
-      // Handle as a drag end
+      var _event$changedTouches = event.changedTouches[0],
+        clientX = _event$changedTouches.clientX,
+        clientY = _event$changedTouches.clientY;
       var simulatedEvent = new MouseEvent('mouseup', {
-        clientX: touch.clientX,
-        clientY: touch.clientY,
+        clientX: clientX,
+        clientY: clientY,
         bubbles: true
       });
-      (_document$elementFrom = document.elementFromPoint(touch.clientX, touch.clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
+      (_document$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
     }
-    setIsDragging(false); // Reset dragging flag on touch end
-  };
-  var bounds = getContainerBounds();
+  }, [onMouseOut]);
   return React__default.createElement(Container$b, {
     isDraggingItem: !!draggingItem,
     item: item,
     className: "rpgui-icon empty-slot",
-    onMouseUp: function onMouseUp() {
+    isSelectingShortcut: isSelectingShortcut && ((item == null ? void 0 : item.type) === shared.ItemType.Consumable || (item == null ? void 0 : item.type) === shared.ItemType.Tool || (item == null ? void 0 : item.subType) === shared.ItemSubType.Seed),
+    onMouseDown: handleInteraction,
+    onTouchStart: handleInteraction,
+    onMouseUp: function onMouseUp(e) {
+      handleInteractionEnd(e);
       var data = item ? item : null;
-      if (onPlaceDrop && containerType) {
+      if (onPlaceDrop && containerType && draggingItem) {
         onPlaceDrop(data, slotIndex, containerType);
       }
     },
+    onTouchEnd: function onTouchEnd(e) {
+      var _document$elementFrom2;
+      handleInteractionEnd(e);
+      var _e$changedTouches$ = e.changedTouches[0],
+        clientX = _e$changedTouches$.clientX,
+        clientY = _e$changedTouches$.clientY;
+      var simulatedEvent = new MouseEvent('mouseup', {
+        clientX: clientX,
+        clientY: clientY,
+        bubbles: true
+      });
+      (_document$elementFrom2 = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom2.dispatchEvent(simulatedEvent);
+    },
     onPointerDown: onDragStart !== undefined && onDragEnd !== undefined ? undefined : function () {
       if (item) onPointerDown(item.type, containerType != null ? containerType : null, item);
     },
-    isSelectingShortcut: isSelectingShortcut && ((item == null ? void 0 : item.type) === shared.ItemType.Consumable || (item == null ? void 0 : item.type) === shared.ItemType.Tool || (item == null ? void 0 : item.subType) === shared.ItemSubType.Seed),
-    onTouchStart: onTouchStartHandler,
-    onTouchEnd: onTouchEndHandler
+    onMouseLeave: handleInteractionEnd
   }, React__default.createElement(Draggable, {
     axis: isSelectingShortcut ? 'none' : 'both',
     defaultClassName: item ? 'draggable' : 'empty-slot',
@@ -28247,9 +28235,7 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
     onMouseOver: function onMouseOver(event) {
       _onMouseOver == null ? void 0 : _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
     },
-    onMouseOut: function onMouseOut() {
-      if (_onMouseOut) _onMouseOut();
-    },
+    onMouseOut: onMouseOut,
     onMouseEnter: function onMouseEnter() {
       setTooltipState(function (prev) {
         return _extends({}, prev, {
@@ -28296,28 +28282,27 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
 var Container$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["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;
+})(["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 (_ref3) {
+  var isDraggingItem = _ref3.isDraggingItem;
   return isDraggingItem ? 0 : 1;
-}, function (_ref3) {
-  var item = _ref3.item;
-  return rarityColor(item);
 }, function (_ref4) {
   var item = _ref4.item;
-  return "0 0 5px 2px " + rarityColor(item);
+  return rarityColor(item);
 }, function (_ref5) {
   var item = _ref5.item;
-  return "0 0 4px 3px " + rarityColor(item);
+  return "0 0 5px 2px " + rarityColor(item);
 }, function (_ref6) {
-  var isSelectingShortcut = _ref6.isSelectingShortcut;
+  var item = _ref6.item;
+  return "0 0 4px 3px " + rarityColor(item);
+}, function (_ref7) {
+  var isSelectingShortcut = _ref7.isSelectingShortcut;
   return isSelectingShortcut ? 'bg-color-change 1s infinite' : 'none';
 });
 var ItemContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemSlot__ItemContainer",
   componentId: "sc-l2j5ef-1"
-})(["width:64px;height:64px;position:relative;", ";"], function (_ref7) {
-  var isFocused = _ref7.isFocused;
-  return isFocused ? 'z-index: 100; pointer-events: none;' : '';
+})(["width:64px;height:64px;position:relative;", ";"], function (props) {
+  return props.isFocused && 'z-index: 100; pointer-events: none;';
 });
 
 var statisticsToDisplay = [{
@@ -30640,7 +30625,6 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     _onOutsideDrop = _ref.onOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     initialPosition = _ref.initialPosition,
-    checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
     scale = _ref.scale,
     shortcuts = _ref.shortcuts,
     setItemShortcut = _ref.setItemShortcut,
@@ -30730,7 +30714,6 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         onDragEnd: onDragEnd,
         dragScale: scale,
         checkIfItemCanBeMoved: checkIfItemCanBeMoved,
-        checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
         openQuantitySelector: function openQuantitySelector(maxQuantity, callback) {
           setQuantitySelect({
             isOpen: true,