@rpg-engine/long-bow 0.7.80 → 0.7.82

package/dist/hooks/useTouchTarget.d.ts

@@ -0,0 +1,5 @@
+interface IEventWithTarget {
+    target: EventTarget | null;
+}
+export declare function useTouchTarget(): (e: MouseEvent | TouchEvent | IEventWithTarget) => HTMLElement;
+export default useTouchTarget;

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

@@ -27377,6 +27377,23 @@ var Container$8 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-dgmp04-0"
 })(["position:static !important;"]);
 
+function useTouchTarget() {
+  var getTouchTarget = React.useCallback(function (e) {
+    // Check if it's a touch event
+    if ('changedTouches' in e || 'touches' in e) {
+      var _touchEvent$changedTo, _touchEvent$touches;
+      var touchEvent = e;
+      var touch = ((_touchEvent$changedTo = touchEvent.changedTouches) == null ? void 0 : _touchEvent$changedTo[0]) || ((_touchEvent$touches = touchEvent.touches) == null ? void 0 : _touchEvent$touches[0]);
+      if (touch) {
+        return document.elementFromPoint(touch.clientX, touch.clientY);
+      }
+    }
+    // If it's not a touch event or touch is not available, fallback to target
+    return e.target || document.body;
+  }, []);
+  return getTouchTarget;
+}
+
 var rarityColor = function rarityColor(item) {
   switch (item == null ? void 0 : item.rarity) {
     case shared.ItemRarities.Uncommon:
@@ -27820,7 +27837,9 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     detailsState = _useItemSlotDetails.detailsState,
     updateDetailsState = _useItemSlotDetails.updateDetailsState,
     setContextActions = _useItemSlotDetails.setContextActions;
+  var getTouchTarget = useTouchTarget();
   var isContextMenuVisible = detailsState.isContextMenuVisible,
+    clearDetailsState = detailsState.clearDetailsState,
     clearContextActions = detailsState.clearContextActions;
   var dragContainer = React.useRef(null);
   var _useItemSlotDragging = useItemSlotDragging(),
@@ -27840,12 +27859,17 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       isFocused: false
     });
   }, [containerType, isDepotSystem, setContextActions, clearContextActions, isContextMenuDisabled]);
+  React.useEffect(function () {
+    // Reset drag position and focus when item changes
+    clearDraggingState();
+    // Clear context actions when component unmounts or dependencies change
+    return function () {
+      clearContextActions();
+    };
+  }, [containerType, isDepotSystem, setContextActions, clearContextActions, isContextMenuDisabled, updateDraggingState]);
   var resetItem = function resetItem() {
     clearDraggingState();
-    updateDetailsState({
-      item: item,
-      isTooltipVisible: false
-    });
+    clearDetailsState();
   };
   var onSuccessfulDrag = function onSuccessfulDrag(quantity) {
     resetItem();
@@ -27870,6 +27894,9 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
         item: null
       });
       var target = e.target;
+      if (shared.isMobile()) {
+        target = getTouchTarget(e);
+      }
       handleShortcutSetter(target);
       removeDraggingClass(target);
       var shouldHandleDraggedItemResult = shouldHandleDraggedItem();
@@ -27951,12 +27978,12 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       y: matrix.m42
     };
   };
-  /**
-   * Processes the end of a drag event, handling quantity selection or resetting state.
-   */
-  var processDragEnd = function processDragEnd(item) {
+  var processDragEnd = React.useCallback(function (item) {
     if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved()) {
-      if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
+      if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) {
+        resetItem();
+        return;
+      }
       if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
         openQuantitySelector(item.stackQty, onSuccessfulDrag);
       } else {
@@ -27964,15 +27991,8 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       }
     } else {
       resetItem();
-      updateDraggingState({
-        isFocused: false,
-        position: {
-          x: 0,
-          y: 0
-        }
-      });
     }
-  };
+  }, [checkIfItemCanBeMoved, checkIfItemShouldDragEnd, openQuantitySelector, onSuccessfulDrag, resetItem]);
   /**
    * Handles the context menu or tooltip display after dragging stops without a drop.
    */