@rpg-engine/long-bow 0.7.72 → 0.7.73

package/dist/long-bow.esm.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, Component, useRef, useContext, createContext, useMemo, useCallback, Fragment } from 'react';
+import React, { useState, useEffect, Component, useRef, useContext, createContext, useCallback, useMemo, Fragment } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 import { v4 } from 'uuid';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, isMobile, ItemSlotType, isMobileOrTablet, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { FaTimes } from 'react-icons/fa';
@@ -27539,188 +27539,6 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
   return React.createElement(React.Fragment, null, onRenderSlot(item));
 };
 
-var RelativeListMenu = function RelativeListMenu(_ref) {
-  var options = _ref.options,
-    onSelected = _ref.onSelected,
-    onOutsideClick = _ref.onOutsideClick,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize,
-    pos = _ref.pos;
-  var ref = useRef(null);
-  useOutsideClick(ref, 'relative-context-menu');
-  useEffect(function () {
-    document.addEventListener('clickOutside', function (event) {
-      var e = event;
-      if (e.detail.id === 'relative-context-menu') {
-        if (onOutsideClick) {
-          onOutsideClick();
-        }
-      }
-    });
-    return function () {
-      document.removeEventListener('clickOutside', function (_e) {});
-    };
-  }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$9, Object.assign({
-    fontSize: fontSize,
-    ref: ref
-  }, pos), React.createElement("ul", {
-    className: "rpgui-list-imp",
-    style: {
-      overflow: 'hidden'
-    }
-  }, options.map(function (params, index) {
-    return React.createElement(ListElement$2, {
-      key: (params == null ? void 0 : params.id) || index,
-      onPointerDown: function onPointerDown() {
-        onSelected(params == null ? void 0 : params.id);
-      }
-    }, (params == null ? void 0 : params.text) || 'No text');
-  }))));
-};
-var Container$9 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "RelativeListMenu__Container",
-  componentId: "sc-7hohf-0"
-})(["position:absolute;top:", "px;left:", "px;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
-  return props.y;
-}, function (props) {
-  return props.x;
-}, function (props) {
-  return props.fontSize;
-});
-var ListElement$2 = /*#__PURE__*/styled.li.withConfig({
-  displayName: "RelativeListMenu__ListElement",
-  componentId: "sc-7hohf-1"
-})(["margin-right:0.5rem;"]);
-
-var MobileItemTooltip = function MobileItemTooltip(_ref) {
-  var item = _ref.item,
-    atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON,
-    closeTooltip = _ref.closeTooltip,
-    equipmentSet = _ref.equipmentSet,
-    _ref$scale = _ref.scale,
-    scale = _ref$scale === void 0 ? 1 : _ref$scale,
-    options = _ref.options,
-    onSelected = _ref.onSelected;
-  var ref = useRef(null);
-  var handleFadeOut = function handleFadeOut() {
-    var _ref$current;
-    (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
-  };
-  return React.createElement(ModalPortal, null, React.createElement(Container$a, {
-    ref: ref,
-    onTouchEnd: function onTouchEnd() {
-      handleFadeOut();
-      setTimeout(function () {
-        closeTooltip();
-      }, 100);
-    },
-    scale: scale
-  }, React.createElement(ItemInfoDisplay, {
-    item: item,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet,
-    isMobile: true
-  }), React.createElement(OptionsContainer, null, options == null ? void 0 : options.map(function (option) {
-    return React.createElement(Option, {
-      key: option.id,
-      onTouchEnd: function onTouchEnd() {
-        handleFadeOut();
-        setTimeout(function () {
-          onSelected == null ? void 0 : onSelected(option.id);
-          closeTooltip();
-        }, 100);
-      }
-    }, option.text);
-  }))));
-};
-var Container$a = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MobileItemTooltip__Container",
-  componentId: "sc-ku4p1j-0"
-})(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:640px){flex-direction:column;}"]);
-var OptionsContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MobileItemTooltip__OptionsContainer",
-  componentId: "sc-ku4p1j-1"
-})(["display:flex;flex-direction:column;gap:0.5rem;flex-wrap:wrap;@media (max-width:640px){flex-direction:row;justify-content:center;}"]);
-var Option = /*#__PURE__*/styled.button.withConfig({
-  displayName: "MobileItemTooltip__Option",
-  componentId: "sc-ku4p1j-2"
-})(["padding:1rem;background-color:#333;color:white;border:none;border-radius:3px;width:8rem;transition:background-color 0.1s;&:hover{background-color:#555;}@media (max-width:640px){padding:1rem 0.5rem;}"]);
-
-var ItemSlotToolTips = function ItemSlotToolTips(_ref) {
-  var isTooltipVisible = _ref.isTooltipVisible,
-    isFocused = _ref.isFocused,
-    isContextMenuVisible = _ref.isContextMenuVisible,
-    isContextMenuDisabled = _ref.isContextMenuDisabled,
-    item = _ref.item,
-    contextActions = _ref.contextActions,
-    contextMenuPosition = _ref.contextMenuPosition,
-    dragScale = _ref.dragScale,
-    setIsContextMenuVisible = _ref.setIsContextMenuVisible,
-    setIsTooltipMobileVisible = _ref.setIsTooltipMobileVisible,
-    isTooltipMobileVisible = _ref.isTooltipMobileVisible,
-    _onSelected = _ref.onSelected,
-    atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON,
-    equipmentSet = _ref.equipmentSet;
-  return React.createElement(React.Fragment, null, isTooltipVisible && item && !isFocused && React.createElement(ItemTooltip, {
-    item: item,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet
-  }), isTooltipMobileVisible && item && React.createElement(MobileItemTooltip, {
-    item: item,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet,
-    closeTooltip: function closeTooltip() {
-      setIsTooltipMobileVisible(false);
-    },
-    scale: dragScale,
-    options: contextActions,
-    onSelected: function onSelected(optionId) {
-      setIsContextMenuVisible(false);
-      if (item) {
-        _onSelected == null ? void 0 : _onSelected(optionId, item);
-      }
-    }
-  }), !isContextMenuDisabled && isContextMenuVisible && contextActions && React.createElement(RelativeListMenu, {
-    options: contextActions,
-    onSelected: function onSelected(optionId) {
-      setIsContextMenuVisible(false);
-      if (item) {
-        _onSelected == null ? void 0 : _onSelected(optionId, item);
-      }
-    },
-    onOutsideClick: function onOutsideClick() {
-      setIsContextMenuVisible(false);
-    },
-    pos: contextMenuPosition
-  }));
-};
-
-var DraggingContext = /*#__PURE__*/createContext({
-  item: null,
-  setDraggingItem: function setDraggingItem() {}
-});
-var useDragging = function useDragging() {
-  return useContext(DraggingContext);
-};
-var DraggingProvider = function DraggingProvider(_ref) {
-  var children = _ref.children;
-  var _useState = useState(null),
-    item = _useState[0],
-    setDraggingItem = _useState[1];
-  return React.createElement(DraggingContext.Provider, {
-    value: {
-      item: item,
-      setDraggingItem: setDraggingItem
-    }
-  }, children);
-};
-
 var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
   var contextMenu = actionsByTypeList.map(function (action) {
     return {
@@ -27846,6 +27664,117 @@ var generateContextMenu = function generateContextMenu(item, itemContainerType,
   return contextActionMenu;
 };
 
+var initialDetailsState = {
+  item: null,
+  isTooltipVisible: false,
+  isTooltipMobileVisible: false,
+  isContextMenuVisible: false,
+  contextMenuPosition: {
+    x: 0,
+    y: 0
+  },
+  contextActions: [],
+  clearContextActions: function clearContextActions() {},
+  clearDetailsState: function clearDetailsState() {}
+};
+var ItemSlotDetailsContext = /*#__PURE__*/createContext({
+  detailsState: initialDetailsState,
+  updateDetailsState: function updateDetailsState() {},
+  clearDetailsState: function clearDetailsState() {},
+  setContextActions: function setContextActions() {},
+  clearContextActions: function clearContextActions() {}
+});
+var useItemSlotDetails = function useItemSlotDetails() {
+  return useContext(ItemSlotDetailsContext);
+};
+var ItemSlotDetailsProvider = function ItemSlotDetailsProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(initialDetailsState),
+    detailsState = _useState[0],
+    setDetailsState = _useState[1];
+  var updateDetailsState = useCallback(function (newState) {
+    setDetailsState(function (prevState) {
+      return _extends({}, prevState, newState);
+    });
+  }, []);
+  var clearDetailsState = useCallback(function () {
+    setDetailsState(initialDetailsState);
+  }, [setDetailsState]);
+  var setContextActions = useCallback(function (item, containerType, isDepotSystem) {
+    if (item && containerType) {
+      var newContextActions = generateContextMenu(item, containerType, isDepotSystem);
+      updateDetailsState({
+        contextActions: newContextActions
+      });
+    } else {
+      updateDetailsState({
+        contextActions: []
+      });
+    }
+  }, []);
+  var clearContextActions = useCallback(function () {
+    updateDetailsState({
+      contextActions: []
+    });
+  }, [updateDetailsState]);
+  var contextValue = useMemo(function () {
+    return {
+      detailsState: detailsState,
+      updateDetailsState: updateDetailsState,
+      clearDetailsState: clearDetailsState,
+      setContextActions: setContextActions,
+      clearContextActions: clearContextActions
+    };
+  }, [detailsState, updateDetailsState, clearDetailsState, setContextActions, clearContextActions]);
+  return React.createElement(ItemSlotDetailsContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
+var initialDraggingState = {
+  item: null,
+  isDragging: false,
+  position: {
+    x: 0,
+    y: 0
+  },
+  dropPosition: null,
+  isFocused: false,
+  draggingDistance: 0
+};
+var ItemSlotDraggingContext = /*#__PURE__*/createContext({
+  draggingState: initialDraggingState,
+  updateDraggingState: function updateDraggingState() {},
+  clearDraggingState: function clearDraggingState() {}
+});
+var useItemSlotDragging = function useItemSlotDragging() {
+  return useContext(ItemSlotDraggingContext);
+};
+var ItemSlotDraggingProvider = function ItemSlotDraggingProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(initialDraggingState),
+    draggingState = _useState[0],
+    setDraggingState = _useState[1];
+  var updateDraggingState = useCallback(function (newState) {
+    setDraggingState(function (prevState) {
+      return _extends({}, prevState, newState);
+    });
+  }, []);
+  var clearDraggingState = useCallback(function () {
+    setDraggingState(initialDraggingState);
+  }, []);
+  var contextValue = useMemo(function () {
+    return {
+      draggingState: draggingState,
+      updateDraggingState: updateDraggingState,
+      clearDraggingState: clearDraggingState
+    };
+  }, [draggingState, updateDraggingState, clearDraggingState]);
+  return React.createElement(ItemSlotDraggingContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
 var EquipmentSlotSpriteByType = {
   Neck: 'accessories/corruption-necklace.png',
   LeftHand: 'swords/broad-sword.png',
@@ -27866,7 +27795,6 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     _onMouseOver = _ref.onMouseOver,
     _onMouseOut = _ref.onMouseOut,
     onPointerDown = _ref.onPointerDown,
-    _onSelected = _ref.onSelected,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     _ref$isContextMenuDis = _ref.isContextMenuDisabled,
@@ -27880,69 +27808,39 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
     dragScale = _ref.dragScale,
     isSelectingShortcut = _ref.isSelectingShortcut,
-    equipmentSet = _ref.equipmentSet,
     setItemShortcut = _ref.setItemShortcut,
     isDepotSystem = _ref.isDepotSystem;
-  // Centralized state using a single useState hook
-  var _useState = useState({
-      isTooltipVisible: false,
-      isTooltipMobileVisible: false,
-      isContextMenuVisible: false,
-      contextMenuPosition: {
-        x: 0,
-        y: 0
-      },
-      isFocused: false,
-      wasDragged: false,
-      dragPosition: {
-        x: 0,
-        y: 0
-      },
-      dropPosition: null,
-      contextActions: [],
-      draggingDistance: 0
-    }),
-    state = _useState[0],
-    setState = _useState[1];
-  var isTooltipVisible = state.isTooltipVisible,
-    isTooltipMobileVisible = state.isTooltipMobileVisible,
-    isContextMenuVisible = state.isContextMenuVisible,
-    contextMenuPosition = state.contextMenuPosition,
-    isFocused = state.isFocused,
-    wasDragged = state.wasDragged,
-    dragPosition = state.dragPosition,
-    dropPosition = state.dropPosition,
-    contextActions = state.contextActions;
+  var _useItemSlotDetails = useItemSlotDetails(),
+    detailsState = _useItemSlotDetails.detailsState,
+    updateDetailsState = _useItemSlotDetails.updateDetailsState,
+    setContextActions = _useItemSlotDetails.setContextActions;
+  var isContextMenuVisible = detailsState.isContextMenuVisible,
+    clearContextActions = detailsState.clearContextActions;
   var dragContainer = useRef(null);
-  var _useDragging = useDragging(),
-    draggingItem = _useDragging.item,
-    setDraggingItem = _useDragging.setDraggingItem;
+  var _useItemSlotDragging = useItemSlotDragging(),
+    draggingState = _useItemSlotDragging.draggingState,
+    updateDraggingState = _useItemSlotDragging.updateDraggingState,
+    clearDraggingState = _useItemSlotDragging.clearDraggingState;
+  var isFocused = draggingState.isFocused,
+    dropPosition = draggingState.dropPosition,
+    isDragging = draggingState.isDragging,
+    draggingDistance = draggingState.draggingDistance;
   useEffect(function () {
     // Reset drag position and focus when item changes
-    setState(function (prevState) {
-      return _extends({}, prevState, {
-        dragPosition: {
-          x: 0,
-          y: 0
-        },
-        isFocused: false
-      });
+    updateDraggingState({
+      position: {
+        x: 0,
+        y: 0
+      },
+      isFocused: false
     });
     // Update context actions when item or depot system changes
-    if (item && containerType) {
-      setState(function (prevState) {
-        return _extends({}, prevState, {
-          contextActions: generateContextMenu(item, containerType, isDepotSystem)
-        });
-      });
+    if (item && containerType && !isContextMenuDisabled) {
+      setContextActions(item, containerType, isDepotSystem != null ? isDepotSystem : false);
     } else {
-      setState(function (prevState) {
-        return _extends({}, prevState, {
-          contextActions: []
-        });
-      });
+      clearContextActions();
     }
-  }, [item, isDepotSystem]);
+  }, [item, containerType, isDepotSystem, setContextActions, clearContextActions]);
   useEffect(function () {
     // Handle outside drop
     if (onDrop && item && dropPosition) {
@@ -27950,47 +27848,41 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     }
   }, [dropPosition]);
   var resetItem = function resetItem() {
-    setState(function (prevState) {
-      return _extends({}, prevState, {
-        isTooltipVisible: false,
-        wasDragged: false
-      });
+    clearDraggingState();
+    updateDetailsState({
+      item: item,
+      isTooltipVisible: false
     });
   };
   var onSuccessfulDrag = function onSuccessfulDrag(quantity) {
     resetItem();
     if (quantity === -1) {
-      setState(function (prevState) {
-        return _extends({}, prevState, {
-          dragPosition: {
-            x: 0,
-            y: 0
-          },
-          isFocused: false
-        });
+      updateDraggingState({
+        position: {
+          x: 0,
+          y: 0
+        },
+        isFocused: false
       });
     } else if (item) {
       onDragEnd == null ? void 0 : onDragEnd(quantity);
     }
   };
   var onDraggableStop = function onDraggableStop(e, data) {
-    console.log('>>> ON_DRAGGABLE_STOP');
-    // Stop the dragging state
-    console.log('setDraggingItem(null)');
-    setDraggingItem(null);
-    var target = e.target;
-    console.log('handleShortcutSetter(target)');
-    handleShortcutSetter(target);
-    console.log('removeDraggingClass(target)');
-    removeDraggingClass(target);
-    console.log('shouldHandleDraggedItem()');
-    if (shouldHandleDraggedItem()) {
-      console.log('handleDraggedItem(e, data)');
-      handleDraggedItem(e, data);
-    } else if (item && !wasDragged) {
-      console.log('handleContextMenuOrTooltip(e)');
-      handleContextMenuOrTooltip(e);
-    }
+    requestAnimationFrame(function () {
+      updateDraggingState({
+        item: null
+      });
+      var target = e.target;
+      handleShortcutSetter(target);
+      removeDraggingClass(target);
+      var shouldHandleDraggedItemResult = shouldHandleDraggedItem();
+      if (shouldHandleDraggedItemResult) {
+        handleDraggedItem(e, data);
+      } else if (item && !isDragging) {
+        handleContextMenuOrTooltip(e);
+      }
+    });
   };
   /**
    * Handles the shortcut setter logic if the target element is a shortcut setter.
@@ -28013,49 +27905,41 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
    * Determines whether the dragged item should be processed.
    */
   var shouldHandleDraggedItem = function shouldHandleDraggedItem() {
-    console.log("Debug: shouldHandleDraggedItem()", "wasDragged: " + wasDragged, "item: " + item, "isSelectingShortcut: " + isSelectingShortcut);
-    return !!(wasDragged && item && !isSelectingShortcut);
+    return !!(isDragging && draggingState.item && !isSelectingShortcut);
   };
   /**
    * Handles the logic when an item has been dragged.
    */
   var handleDraggedItem = function handleDraggedItem(e, data) {
-    var targetClasses = Array.from(e.target.classList);
-    var isOutsideDrop = targetClasses.some(function (elm) {
-      return elm.includes('rpgui-content');
-    }) || targetClasses.length === 0;
-    if (isOutsideDrop) {
-      setState(function (prevState) {
-        return _extends({}, prevState, {
+    requestAnimationFrame(function () {
+      var targetClasses = Array.from(e.target.classList);
+      var isOutsideDrop = targetClasses.some(function (elm) {
+        return elm.includes('rpgui-content');
+      }) || targetClasses.length === 0;
+      if (isOutsideDrop) {
+        updateDraggingState({
           dropPosition: {
             x: data.x,
             y: data.y
           }
         });
+      }
+      updateDraggingState({
+        isDragging: false
       });
-    }
-    setState(function (prevState) {
-      return _extends({}, prevState, {
-        wasDragged: false
-      });
-    });
-    var targetElement = dragContainer.current;
-    if (!targetElement) return;
-    var _getElementTransform = getElementTransform(targetElement),
-      x = _getElementTransform.x,
-      y = _getElementTransform.y;
-    setState(function (prevState) {
-      return _extends({}, prevState, {
-        dragPosition: {
+      var targetElement = dragContainer.current;
+      if (!targetElement) return;
+      var _getElementTransform = getElementTransform(targetElement),
+        x = _getElementTransform.x,
+        y = _getElementTransform.y;
+      updateDraggingState({
+        position: {
           x: x,
           y: y
         }
       });
-    });
-    // Delay to ensure state updates before proceeding
-    setTimeout(function () {
       processDragEnd(item);
-    }, 50);
+    });
   };
   /**
    * Retrieves the current transform position of the dragged element.
@@ -28072,29 +27956,21 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
    * Processes the end of a drag event, handling quantity selection or resetting state.
    */
   var processDragEnd = function processDragEnd(item) {
-    console.log("Debug: processDragEnd(item)", "item: " + item);
     if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved()) {
-      console.log("Debug: checkIfItemCanBeMoved()", "result: " + checkIfItemCanBeMoved());
       if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
-      console.log("Debug: checkIfItemShouldDragEnd()", "result: " + (checkIfItemShouldDragEnd == null ? void 0 : checkIfItemShouldDragEnd()));
       if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
-        console.log("Debug: openQuantitySelector(item.stackQty, onSuccessfulDrag)");
         openQuantitySelector(item.stackQty, onSuccessfulDrag);
       } else {
-        console.log("Debug: onSuccessfulDrag(item.stackQty)");
         onSuccessfulDrag(item.stackQty);
       }
     } else {
-      console.log("Debug: resetItem()");
       resetItem();
-      setState(function (prevState) {
-        return _extends({}, prevState, {
-          isFocused: false,
-          dragPosition: {
-            x: 0,
-            y: 0
-          }
-        });
+      updateDraggingState({
+        isFocused: false,
+        position: {
+          x: 0,
+          y: 0
+        }
       });
     }
   };
@@ -28102,24 +27978,25 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
    * Handles the context menu or tooltip display after dragging stops without a drop.
    */
   var handleContextMenuOrTooltip = function handleContextMenuOrTooltip(e) {
-    var isTouchEvent = false;
-    if (!isContextMenuDisabled && e.type === 'touchend' && !isSelectingShortcut) {
-      isTouchEvent = true;
-      setState(function (prevState) {
-        return _extends({}, prevState, {
-          isTooltipMobileVisible: true
-        });
+    var isTouchEvent = e.type === 'touchend';
+    var shouldShowMobileTooltip = !isContextMenuDisabled && isTouchEvent && !isSelectingShortcut;
+    var shouldToggleContextMenu = !isContextMenuDisabled && !isSelectingShortcut && !isTouchEvent;
+    if (shouldShowMobileTooltip) {
+      updateDetailsState({
+        item: item,
+        isTooltipMobileVisible: true,
+        isContextMenuVisible: false
       });
-    }
-    if (!isContextMenuDisabled && !isSelectingShortcut && !isTouchEvent) {
-      setState(function (prevState) {
-        return _extends({}, prevState, {
-          isContextMenuVisible: !prevState.isContextMenuVisible,
-          contextMenuPosition: {
-            x: e.clientX - 10,
-            y: e.clientY - 5
-          }
-        });
+    } else if (shouldToggleContextMenu) {
+      var mouseEvent = e;
+      updateDetailsState({
+        item: item,
+        isContextMenuVisible: !isContextMenuVisible && !isMobile(),
+        isTooltipMobileVisible: false,
+        contextMenuPosition: {
+          x: mouseEvent.clientX - 10,
+          y: mouseEvent.clientY - 5
+        }
       });
     }
     if (item) {
@@ -28136,25 +28013,23 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
   };
   var onDraggableProgress = function onDraggableProgress(_e, _data) {
     // increment draggingDistance by 1
-    setState(function (prevState) {
-      return _extends({}, prevState, {
-        draggingDistance: prevState.draggingDistance + 1
-      });
+    updateDraggingState({
+      draggingDistance: draggingState.draggingDistance + 1
     });
-    if (state.draggingDistance > 10) {
-      setState(function (prevState) {
-        return _extends({}, prevState, {
-          wasDragged: true,
-          isFocused: true
-        });
+    if (draggingDistance > 10) {
+      updateDraggingState({
+        isDragging: true,
+        isFocused: true
       });
     }
-    if (!draggingItem) {
-      setDraggingItem(item);
+    if (!draggingState.item) {
+      updateDraggingState({
+        item: item
+      });
     }
   };
-  return React.createElement(Container$b, {
-    isDraggingItem: !!draggingItem,
+  return React.createElement(Container$9, {
+    isDraggingItem: !!draggingState.item,
     item: item,
     className: "rpgui-icon empty-slot",
     onMouseUp: function onMouseUp() {
@@ -28185,7 +28060,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     onStop: onDraggableStop,
     onStart: onDraggableStart,
     onDrag: onDraggableProgress,
-    position: dragPosition,
+    position: draggingState.position,
     cancel: ".empty-slot",
     bounds: ".item-container-body, .equipment-container-body"
   }, React.createElement(ItemContainer, {
@@ -28198,17 +28073,15 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       if (_onMouseOut) _onMouseOut();
     },
     onMouseEnter: function onMouseEnter() {
-      setState(function (prevState) {
-        return _extends({}, prevState, {
-          isTooltipVisible: true
-        });
+      updateDetailsState({
+        item: item,
+        isTooltipVisible: true
       });
     },
     onMouseLeave: function onMouseLeave() {
-      setState(function (prevState) {
-        return _extends({}, prevState, {
-          isTooltipVisible: false
-        });
+      updateDetailsState({
+        item: item,
+        isTooltipVisible: false
       });
     }
   }, React.createElement(ItemSlotRenderer, {
@@ -28217,54 +28090,12 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     containerType: containerType
-  }))), React.createElement(ItemSlotToolTips, {
-    isTooltipVisible: isTooltipVisible,
-    isTooltipMobileVisible: isTooltipMobileVisible,
-    setIsTooltipMobileVisible: function setIsTooltipMobileVisible(value) {
-      return setState(function (prevState) {
-        return _extends({}, prevState, {
-          isTooltipMobileVisible: value
-        });
-      });
-    },
-    isFocused: isFocused,
-    isContextMenuVisible: isContextMenuVisible,
-    isContextMenuDisabled: isContextMenuDisabled,
-    item: item,
-    contextActions: contextActions,
-    contextMenuPosition: contextMenuPosition,
-    dragScale: dragScale,
-    setIsContextMenuVisible: function setIsContextMenuVisible(value) {
-      return setState(function (prevState) {
-        return _extends({}, prevState, {
-          isContextMenuVisible: value
-        });
-      });
-    },
-    onSelected: function onSelected(optionId, item) {
-      setState(function (prevState) {
-        return _extends({}, prevState, {
-          isContextMenuVisible: false
-        });
-      });
-      if (_onSelected) _onSelected(optionId, item);
-    },
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet,
-    setIsTooltipVisible: function setIsTooltipVisible(value) {
-      return setState(function (prevState) {
-        return _extends({}, prevState, {
-          isTooltipVisible: value
-        });
-      });
-    }
-  }));
+  }))));
 });
-var Container$b = /*#__PURE__*/styled.div.withConfig({
+var Container$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;*{border:1px solid blue;}.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) {
+})(["margin:0.1rem;*{border:1px solid yellow;}.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) {
@@ -28377,7 +28208,7 @@ var ItemInfo = function ItemInfo(_ref) {
     });
   };
   var skillName = (_item$minRequirements = item.minRequirements) == null ? void 0 : (_item$minRequirements2 = _item$minRequirements.skill) == null ? void 0 : _item$minRequirements2.name;
-  return React.createElement(Container$c, {
+  return React.createElement(Container$a, {
     item: item
   }, React.createElement(Header, null, React.createElement("div", null, React.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React.createElement(Rarity, {
     item: item
@@ -28391,7 +28222,7 @@ var ItemInfo = function ItemInfo(_ref) {
     "$isSpecial": true
   }, "Two handed"), React.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React.createElement(MissingStatistics, null, React.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
 };
-var Container$c = /*#__PURE__*/styled.div.withConfig({
+var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Container",
   componentId: "sc-1xm4q8k-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:18rem;@media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
@@ -28537,7 +28368,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$d, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$b, {
     ref: ref
   }, React.createElement(ItemInfoDisplay, {
     item: item,
@@ -28546,11 +28377,67 @@ var ItemTooltip = function ItemTooltip(_ref) {
     equipmentSet: equipmentSet
   })));
 };
-var Container$d = /*#__PURE__*/styled.div.withConfig({
+var Container$b = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemTooltip__Container",
   componentId: "sc-11d9r7x-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
 
+var MobileItemTooltip = function MobileItemTooltip(_ref) {
+  var item = _ref.item,
+    atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    closeTooltip = _ref.closeTooltip,
+    equipmentSet = _ref.equipmentSet,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? 1 : _ref$scale,
+    options = _ref.options,
+    onSelected = _ref.onSelected;
+  var ref = useRef(null);
+  var handleFadeOut = function handleFadeOut() {
+    var _ref$current;
+    (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
+  };
+  return React.createElement(ModalPortal, null, React.createElement(Container$c, {
+    ref: ref,
+    onTouchEnd: function onTouchEnd() {
+      handleFadeOut();
+      setTimeout(function () {
+        closeTooltip();
+      }, 100);
+    },
+    scale: scale
+  }, React.createElement(ItemInfoDisplay, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    isMobile: true
+  }), React.createElement(OptionsContainer, null, options == null ? void 0 : options.map(function (option) {
+    return React.createElement(Option, {
+      key: option.id,
+      onTouchEnd: function onTouchEnd() {
+        handleFadeOut();
+        setTimeout(function () {
+          onSelected == null ? void 0 : onSelected(option.id);
+          closeTooltip();
+        }, 100);
+      }
+    }, option.text);
+  }))));
+};
+var Container$c = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MobileItemTooltip__Container",
+  componentId: "sc-ku4p1j-0"
+})(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:640px){flex-direction:column;}"]);
+var OptionsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MobileItemTooltip__OptionsContainer",
+  componentId: "sc-ku4p1j-1"
+})(["display:flex;flex-direction:column;gap:0.5rem;flex-wrap:wrap;@media (max-width:640px){flex-direction:row;justify-content:center;}"]);
+var Option = /*#__PURE__*/styled.button.withConfig({
+  displayName: "MobileItemTooltip__Option",
+  componentId: "sc-ku4p1j-2"
+})(["padding:1rem;background-color:#333;color:white;border:none;border-radius:3px;width:8rem;transition:background-color 0.1s;&:hover{background-color:#555;}@media (max-width:640px){padding:1rem 0.5rem;}"]);
+
 var ItemInfoWrapper = function ItemInfoWrapper(_ref) {
   var children = _ref.children,
     atlasIMG = _ref.atlasIMG,
@@ -28905,7 +28792,7 @@ var Dropdown = function Dropdown(_ref) {
       onChange(selectedValue);
     }
   }, [selectedValue]);
-  return React.createElement(Container$e, {
+  return React.createElement(Container$d, {
     onMouseLeave: function onMouseLeave() {
       return setOpened(false);
     },
@@ -28933,7 +28820,7 @@ var Dropdown = function Dropdown(_ref) {
     }, option.option);
   })));
 };
-var Container$e = /*#__PURE__*/styled.div.withConfig({
+var Container$d = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dropdown__Container",
   componentId: "sc-8arn65-0"
 })(["position:relative;width:", ";"], function (props) {
@@ -29033,8 +28920,9 @@ var DraggedItem = function DraggedItem(_ref) {
   var atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     scale = _ref.scale;
-  var _useDragging = useDragging(),
-    item = _useDragging.item;
+  var _useItemSlotDragging = useItemSlotDragging(),
+    draggingState = _useItemSlotDragging.draggingState;
+  var item = draggingState.item;
   var _useCursorPosition = useCursorPosition({
       scale: scale
     }),
@@ -29049,7 +28937,7 @@ var DraggedItem = function DraggedItem(_ref) {
   var centeredX = x - OFFSET;
   var centeredY = y - OFFSET;
   var stackInfo = onRenderStackInfo((_item$_id = item == null ? void 0 : item._id) != null ? _item$_id : '', (_item$stackQty = item == null ? void 0 : item.stackQty) != null ? _item$stackQty : 0);
-  return React.createElement(Container$f, null, React.createElement(SpriteContainer, {
+  return React.createElement(Container$e, null, React.createElement(SpriteContainer, {
     x: centeredX,
     y: centeredY
   }, React.createElement(SpriteFromAtlas, {
@@ -29067,7 +28955,7 @@ var DraggedItem = function DraggedItem(_ref) {
   }), stackInfo));
 };
 var pulse = "\n  @keyframes pulse {\n    0%, 100% {\n      transform: scale(1) rotate(-3deg);\n    }\n    50% {\n      transform: scale(0.95) rotate(-3deg);\n    }\n  }\n";
-var Container$f = /*#__PURE__*/styled.div.withConfig({
+var Container$e = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggedItem__Container",
   componentId: "sc-mlzzcp-0"
 })(["position:relative;"]);
@@ -29083,11 +28971,128 @@ var SpriteContainer = /*#__PURE__*/styled.div.attrs(function (props) {
   componentId: "sc-mlzzcp-1"
 })(["", " position:absolute;z-index:100;pointer-events:none;width:", "px;height:", "px;transform:rotate(-3deg);filter:grayscale(100%);opacity:0.35;animation:pulse 2s infinite;.item-slot-qty{position:absolute;bottom:0;margin-left:0.8rem;}"], pulse, CONTAINER_SIZE, CONTAINER_SIZE);
 
+var RelativeListMenu = function RelativeListMenu(_ref) {
+  var options = _ref.options,
+    onSelected = _ref.onSelected,
+    onOutsideClick = _ref.onOutsideClick,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize,
+    pos = _ref.pos;
+  var ref = useRef(null);
+  useOutsideClick(ref, 'relative-context-menu');
+  useEffect(function () {
+    document.addEventListener('clickOutside', function (event) {
+      var e = event;
+      if (e.detail.id === 'relative-context-menu') {
+        if (onOutsideClick) {
+          onOutsideClick();
+        }
+      }
+    });
+    return function () {
+      document.removeEventListener('clickOutside', function (_e) {});
+    };
+  }, []);
+  return React.createElement(ModalPortal, null, React.createElement(Container$f, Object.assign({
+    fontSize: fontSize,
+    ref: ref
+  }, pos), React.createElement("ul", {
+    className: "rpgui-list-imp",
+    style: {
+      overflow: 'hidden'
+    }
+  }, options.map(function (params, index) {
+    return React.createElement(ListElement$2, {
+      key: (params == null ? void 0 : params.id) || index,
+      onPointerDown: function onPointerDown() {
+        onSelected(params == null ? void 0 : params.id);
+      }
+    }, (params == null ? void 0 : params.text) || 'No text');
+  }))));
+};
+var Container$f = /*#__PURE__*/styled.div.withConfig({
+  displayName: "RelativeListMenu__Container",
+  componentId: "sc-7hohf-0"
+})(["position:absolute;top:", "px;left:", "px;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
+  return props.y;
+}, function (props) {
+  return props.x;
+}, function (props) {
+  return props.fontSize;
+});
+var ListElement$2 = /*#__PURE__*/styled.li.withConfig({
+  displayName: "RelativeListMenu__ListElement",
+  componentId: "sc-7hohf-1"
+})(["margin-right:0.5rem;"]);
+
+var ItemSlotToolTips = function ItemSlotToolTips(_ref) {
+  var dragScale = _ref.dragScale,
+    _onSelected = _ref.onSelected,
+    atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    equipmentSet = _ref.equipmentSet,
+    isContextMenuDisabled = _ref.isContextMenuDisabled;
+  var _useItemSlotDetails = useItemSlotDetails(),
+    detailsState = _useItemSlotDetails.detailsState,
+    updateDetailsState = _useItemSlotDetails.updateDetailsState;
+  var isTooltipVisible = detailsState.isTooltipVisible,
+    isTooltipMobileVisible = detailsState.isTooltipMobileVisible,
+    isContextMenuVisible = detailsState.isContextMenuVisible,
+    contextMenuPosition = detailsState.contextMenuPosition,
+    contextActions = detailsState.contextActions,
+    item = detailsState.item;
+  var _useItemSlotDragging = useItemSlotDragging(),
+    draggingState = _useItemSlotDragging.draggingState;
+  var isFocused = draggingState.isFocused;
+  return React.createElement(React.Fragment, null, isTooltipVisible && item && !isFocused && React.createElement(ItemTooltip, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet
+  }), isTooltipMobileVisible && item && React.createElement(MobileItemTooltip, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    closeTooltip: function closeTooltip() {
+      updateDetailsState({
+        isTooltipMobileVisible: false
+      });
+    },
+    scale: dragScale,
+    options: contextActions,
+    onSelected: function onSelected(optionId) {
+      updateDetailsState({
+        isContextMenuVisible: false
+      });
+      if (item) {
+        _onSelected == null ? void 0 : _onSelected(optionId, item);
+      }
+    }
+  }), !isContextMenuDisabled && isContextMenuVisible && contextActions && contextActions.length > 0 && React.createElement(RelativeListMenu, {
+    options: contextActions,
+    onSelected: function onSelected(optionId) {
+      updateDetailsState({
+        isContextMenuVisible: false
+      });
+      if (item) {
+        _onSelected == null ? void 0 : _onSelected(optionId, item);
+      }
+    },
+    onOutsideClick: function onOutsideClick() {
+      updateDetailsState({
+        isContextMenuVisible: false
+      });
+    },
+    pos: contextMenuPosition
+  }));
+};
+
 var EquipmentSet = function EquipmentSet(_ref) {
   var equipmentSet = _ref.equipmentSet,
     onClose = _ref.onClose,
     _onMouseOver = _ref.onMouseOver,
-    _onSelected = _ref.onSelected,
+    onSelected = _ref.onSelected,
     onItemClick = _ref.onItemClick,
     atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
@@ -29133,9 +29138,6 @@ var EquipmentSet = function EquipmentSet(_ref) {
         onPointerDown: function onPointerDown(itemType, ContainerType) {
           if (onItemClick) onItemClick(itemType, item, ContainerType);
         },
-        onSelected: function onSelected(optionId) {
-          if (_onSelected) _onSelected(optionId);
-        },
         onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
           if (!item) {
             return;
@@ -29159,7 +29161,7 @@ var EquipmentSet = function EquipmentSet(_ref) {
       });
     });
   };
-  return React.createElement(DraggingProvider, null, React.createElement(DraggedItem, {
+  return React.createElement(ItemSlotDraggingProvider, null, React.createElement(ItemSlotDetailsProvider, null, React.createElement(DraggedItem, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     scale: scale
@@ -29177,7 +29179,14 @@ var EquipmentSet = function EquipmentSet(_ref) {
     onPositionChangeStart: onPositionChangeStart
   }, React.createElement(EquipmentSetContainer, {
     className: "equipment-container-body"
-  }, React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10)))));
+  }, React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10)))), React.createElement(ItemSlotToolTips, {
+    dragScale: scale,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    onSelected: onSelected,
+    isContextMenuDisabled: isMobile()
+  })));
 };
 var EquipmentSetContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "EquipmentSet__EquipmentSetContainer",
@@ -30593,11 +30602,11 @@ var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
 })(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
 
 var MIN_SLOTS_FOR_SCROLL = 20;
-var ItemContainer$1 = function ItemContainer(_ref) {
+var ItemContainer$1 = /*#__PURE__*/React.memo(function (_ref) {
   var itemContainer = _ref.itemContainer,
     onClose = _ref.onClose,
-    _onMouseOver = _ref.onMouseOver,
-    _onSelected = _ref.onSelected,
+    onMouseOver = _ref.onMouseOver,
+    onSelected = _ref.onSelected,
     onItemClick = _ref.onItemClick,
     type = _ref.type,
     atlasJSON = _ref.atlasJSON,
@@ -30639,11 +30648,11 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     }),
     startScrolling = _useScrollOnDrag.startScrolling,
     stopScrolling = _useScrollOnDrag.stopScrolling;
-  var handleSetShortcut = function handleSetShortcut(item, index) {
+  var handleSetShortcut = useCallback(function (item, index) {
     if (item.type === ItemType.Consumable || item.type === ItemType.Tool || item.subType === ItemSubType.Seed) {
       setItemShortcut == null ? void 0 : setItemShortcut(item.key, index);
     }
-  };
+  }, [setItemShortcut]);
   var handleMouseMove = useCallback(function (e) {
     startScrolling(e.clientY);
   }, [startScrolling]);
@@ -30652,50 +30661,55 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     document.addEventListener('pointerup', function () {
       stopScrolling();
       document.removeEventListener('pointermove', handleMouseMove);
+    }, {
+      once: true
     });
-  }, [handleMouseMove, onItemDragStart, stopScrolling]);
+  }, [handleMouseMove, stopScrolling]);
   var onDragEndScrollingEvents = useCallback(function () {
     stopScrolling();
     document.removeEventListener('pointermove', handleMouseMove);
-  }, [handleMouseMove, onItemDragStart, stopScrolling]);
-  var onDragStart = function onDragStart(item, slotIndex, itemContainerType) {
+  }, [handleMouseMove, stopScrolling]);
+  var onDragStartHandler = useCallback(function (item, slotIndex, itemContainerType) {
     if (onItemDragStart) {
       onItemDragStart(item, slotIndex, itemContainerType);
     }
     onDragStartScrollingEvents();
-  };
-  var onDragEnd = function onDragEnd(quantity) {
+  }, [onItemDragStart, onDragStartScrollingEvents]);
+  var onDragEndHandler = useCallback(function (quantity) {
     if (onItemDragEnd) {
       onItemDragEnd(quantity);
     }
     onDragEndScrollingEvents();
-  };
-  var onRenderSlots = function onRenderSlots() {
+  }, [onItemDragEnd, onDragEndScrollingEvents]);
+  // Memoize handleSetShortcut to prevent unnecessary re-renders
+  var memoizedHandleSetShortcut = useCallback(function (item, index) {
+    handleSetShortcut(item, index);
+  }, [handleSetShortcut]);
+  // Memoize onRenderSlots to prevent re-creating the slots array on every render
+  var onRenderSlots = useMemo(function () {
     var slots = [];
     for (var i = 0; i < itemContainer.slotQty; i++) {
       var _itemContainer$slots;
+      var currentItem = ((_itemContainer$slots = itemContainer.slots) == null ? void 0 : _itemContainer$slots[i]) || null;
       slots.push(React.createElement(ItemSlot, {
-        isContextMenuDisabled: disableContextMenu,
         key: i,
         slotIndex: i,
-        item: ((_itemContainer$slots = itemContainer.slots) == null ? void 0 : _itemContainer$slots[i]) || null,
+        item: currentItem,
         itemContainerType: type,
-        onMouseOver: function onMouseOver(event, slotIndex, item) {
-          if (_onMouseOver) _onMouseOver(event, slotIndex, item);
-        },
+        onMouseOver: onMouseOver ? function (event, slotIndex, item) {
+          return onMouseOver(event, slotIndex, item);
+        } : undefined,
+        onMouseOut: undefined,
         onPointerDown: function onPointerDown(itemType, containerType, item) {
           if (settingShortcutIndex !== -1) {
             setSettingShortcutIndex(-1);
-            handleSetShortcut(item, settingShortcutIndex);
+            memoizedHandleSetShortcut(item, settingShortcutIndex);
           } else if (onItemClick) {
             onItemClick(item, itemType, containerType);
           }
         },
-        onSelected: function onSelected(optionId, item) {
-          if (_onSelected) _onSelected(optionId, item);
-        },
-        onDragStart: onDragStart,
-        onDragEnd: onDragEnd,
+        onDragStart: onDragStartHandler,
+        onDragEnd: onDragEndHandler,
         dragScale: scale,
         checkIfItemCanBeMoved: checkIfItemCanBeMoved,
         checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
@@ -30724,13 +30738,13 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         atlasJSON: atlasJSON,
         isSelectingShortcut: settingShortcutIndex !== -1,
         equipmentSet: equipmentSet,
-        setItemShortcut: type === ItemContainerType.Inventory ? handleSetShortcut : undefined,
+        setItemShortcut: type === ItemContainerType.Inventory ? memoizedHandleSetShortcut : undefined,
         isDepotSystem: isDepotSystem
       }));
     }
     return slots;
-  };
-  return React.createElement(DraggingProvider, null, React.createElement(DraggedItem, {
+  }, [itemContainer.slotQty, itemContainer.slots, type, onMouseOver, settingShortcutIndex, memoizedHandleSetShortcut, onItemClick, onDragStartHandler, onDragEndHandler, scale, checkIfItemCanBeMoved, checkIfItemShouldDragEnd, onItemPlaceDrop, _onOutsideDrop, atlasIMG, atlasJSON, equipmentSet, isDepotSystem, onDragEndScrollingEvents]);
+  return React.createElement(ItemSlotDraggingProvider, null, React.createElement(ItemSlotDetailsProvider, null, React.createElement(DraggedItem, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     scale: scale
@@ -30755,11 +30769,18 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     ref: containerRef,
     isScrollable: itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL,
     isFullScreen: isFullScreen
-  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ItemQuantitySelectorModal, {
+  }, onRenderSlots)), quantitySelect.isOpen && React.createElement(ItemQuantitySelectorModal, {
     quantitySelect: quantitySelect,
     setQuantitySelect: setQuantitySelect
-  }));
-};
+  }), React.createElement(ItemSlotToolTips, {
+    dragScale: scale,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    isContextMenuDisabled: disableContextMenu,
+    onSelected: onSelected
+  })));
+});
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
   componentId: "sc-15y5p9l-0"