@rpg-engine/long-bow 0.2.90 → 0.2.92

package/dist/long-bow.esm.js

@@ -5,10 +5,10 @@ import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import Draggable from 'react-draggable';
 import { v4 } from 'uuid';
-import 'rpgui/rpgui.min.css';
-import 'rpgui/rpgui.min.js';
 import { observer } from 'mobx-react-lite';
 import isMobile from 'is-mobile';
+import 'rpgui/rpgui.min.css';
+import 'rpgui/rpgui.min.js';
 import _ from 'lodash-es';
 import capitalize from 'lodash-es/capitalize';
 
@@ -32718,9 +32718,13 @@ var uiColors = {
   brownGreen: '#346524'
 };
 
+var _excluded$2 = ["innerRef"];
 var Input = function Input(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return React.createElement("input", Object.assign({}, props));
+  var rest = _objectWithoutPropertiesLoose(props, _excluded$2);
+  return React.createElement("input", Object.assign({}, rest, {
+    ref: props.innerRef
+  }));
 };
 
 var RPGUIContainerTypes;
@@ -32960,7 +32964,12 @@ var DraggableContainer = function DraggableContainer(_ref) {
     imgWidth = _ref$imgWidth === void 0 ? '20px' : _ref$imgWidth,
     cancelDrag = _ref.cancelDrag,
     onPositionChange = _ref.onPositionChange,
-    onOutsideClick = _ref.onOutsideClick;
+    onOutsideClick = _ref.onOutsideClick,
+    _ref$initialPosition = _ref.initialPosition,
+    initialPosition = _ref$initialPosition === void 0 ? {
+      x: 0,
+      y: 0
+    } : _ref$initialPosition;
   var draggableRef = useRef(null);
   useOutsideClick(draggableRef, 'item-container');
   useEffect(function () {
@@ -32985,7 +32994,8 @@ var DraggableContainer = function DraggableContainer(_ref) {
           y: data.y
         });
       }
-    }
+    },
+    defaultPosition: initialPosition
   }, React.createElement(Container$6, {
     ref: draggableRef,
     width: width,
@@ -33100,41 +33110,6 @@ var DropdownOptions = /*#__PURE__*/styled.ul.withConfig({
   return props.opened ? 'block' : 'none';
 });
 
-//@ts-ignore
-var _RPGUI = RPGUI;
-var RPGUIRoot = function RPGUIRoot(_ref) {
-  var children = _ref.children;
-  return React.createElement("div", {
-    className: "rpgui-content"
-  }, children);
-};
-
-var RPGUIForceRenderStart = function RPGUIForceRenderStart(_ref) {
-  var children = _ref.children,
-    elementDOMId = _ref.elementDOMId,
-    elementRenderedDOMKey = _ref.elementRenderedDOMKey,
-    RPGUICreateFunction = _ref.RPGUICreateFunction;
-  var _useState = useState(false),
-    isRendered = _useState[0],
-    setIsRendered = _useState[1];
-  useEffect(function () {
-    if (_RPGUI) {
-      var element = document.getElementById(elementDOMId);
-      // create an interval to wait for the element to be rendered
-      // if it's not, trigger the rendering forcefully
-      var interval = setInterval(function () {
-        var dropdown = document.querySelector(elementRenderedDOMKey);
-        if (!dropdown && !isRendered) {
-          _RPGUI.__create_funcs[RPGUICreateFunction](element);
-          setIsRendered(true);
-          clearInterval(interval);
-        }
-      }, 10);
-    }
-  }, []);
-  return React.createElement(React.Fragment, null, children);
-};
-
 var CraftBook = function CraftBook(_ref) {
   var atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
@@ -33179,16 +33154,10 @@ var CraftBook = function CraftBook(_ref) {
     name = modifiedWords.join(' ');
     return name;
   };
-  var handleClick = function handleClick() {
-    var element = document.querySelector("input[name='test']:checked");
-    var elementValue = element.value;
-    setCraftItem(elementValue);
+  var handleClick = function handleClick(value) {
+    setCraftItem(value);
   };
-  return React.createElement(RPGUIForceRenderStart, {
-    elementDOMId: "radioInput",
-    elementRenderedDOMKey: "rpgui-radio",
-    RPGUICreateFunction: "radio"
-  }, React.createElement(DraggableContainer, {
+  return React.createElement(DraggableContainer, {
     type: RPGUIContainerTypes.Framed,
     width: "500px",
     cancelDrag: ".equipment-container-body .arrow-selector",
@@ -33223,9 +33192,14 @@ var CraftBook = function CraftBook(_ref) {
       value: option.name,
       name: "test",
       disabled: !option.canCraft,
-      id: "radioInput"
+      checked: craftItem === option.key,
+      onChange: function onChange() {
+        return handleClick(option.key);
+      }
     }), React.createElement("label", {
-      onClick: handleClick,
+      onClick: function onClick() {
+        return handleClick(option.key);
+      },
       style: {
         display: 'flex',
         alignItems: 'center'
@@ -33260,7 +33234,7 @@ var CraftBook = function CraftBook(_ref) {
     onClick: function onClick() {
       return onCraftItem(craftItem);
     }
-  }, "Craft"))));
+  }, "Craft")));
 };
 var StyledItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftBook__StyledItem",
@@ -33494,26 +33468,57 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     slotSpriteMask = _ref.slotSpriteMask,
     _onMouseOver = _ref.onMouseOver,
     _onMouseOut = _ref.onMouseOut,
-    _onClick = _ref.onClick,
+    onClick = _ref.onClick,
     _onSelected = _ref.onSelected,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     _ref$isContextMenuDis = _ref.isContextMenuDisabled,
-    isContextMenuDisabled = _ref$isContextMenuDis === void 0 ? false : _ref$isContextMenuDis;
+    isContextMenuDisabled = _ref$isContextMenuDis === void 0 ? false : _ref$isContextMenuDis,
+    onDragEnd = _ref.onDragEnd,
+    onDragStart = _ref.onDragStart,
+    onPlaceDrop = _ref.onPlaceDrop,
+    onDrop = _ref.onOutsideDrop,
+    checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
+    openQuantitySelector = _ref.openQuantitySelector;
   var _useState = useState(false),
     isTooltipVisible = _useState[0],
     setTooltipVisible = _useState[1];
   var _useState2 = useState(false),
     isContextMenuVisible = _useState2[0],
     setIsContextMenuVisible = _useState2[1];
-  var _useState3 = useState([]),
-    contextActions = _useState3[0],
-    setContextActions = _useState3[1];
+  var _useState3 = useState(false),
+    isFocused = _useState3[0],
+    setIsFocused = _useState3[1];
+  var _useState4 = useState(false),
+    wasDragged = _useState4[0],
+    setWasDragged = _useState4[1];
+  var _useState5 = useState({
+      x: 0,
+      y: 0
+    }),
+    dragPosition = _useState5[0],
+    setDragPosition = _useState5[1];
+  var _useState6 = useState(null),
+    dropPosition = _useState6[0],
+    setDropPosition = _useState6[1];
+  var dragContainer = useRef(null);
+  var _useState7 = useState([]),
+    contextActions = _useState7[0],
+    setContextActions = _useState7[1];
   useEffect(function () {
+    setDragPosition({
+      x: 0,
+      y: 0
+    });
     if (item) {
       setContextActions(generateContextMenu(item, containerType));
     }
   }, [item]);
+  useEffect(function () {
+    if (onDrop && item && dropPosition) {
+      onDrop(item, dropPosition);
+    }
+  }, [dropPosition]);
   var getStackInfo = function getStackInfo(itemId, stackQty) {
     // if (itemToRender?.isStackable && itemToRender?.stackQty) {
     var isFractionalStackQty = stackQty % 1 !== 0;
@@ -33601,30 +33606,116 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
         return renderItem(itemToRender);
     }
   };
+  var resetItem = function resetItem() {
+    setTooltipVisible(false);
+    setIsFocused(false);
+    setWasDragged(false);
+  };
+  var onSuccesfulDrag = function onSuccesfulDrag(quantity) {
+    resetItem();
+    if (quantity === -1) setDragPosition({
+      x: 0,
+      y: 0
+    });else if (item) {
+      onDragEnd(quantity);
+      resetItem();
+    }
+  };
   return React.createElement(Container$a, {
     className: "rpgui-icon empty-slot",
+    onMouseUp: function onMouseUp() {
+      var data = item ? item : null;
+      if (onPlaceDrop) onPlaceDrop(data, slotIndex, containerType);
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      var _document$elementFrom;
+      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$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
+    }
+  }, React.createElement(Draggable, {
+    defaultClassName: item ? 'draggable' : 'empty-slot',
+    onStop: function onStop(e, data) {
+      if (wasDragged && item) {
+        var _e$target;
+        //@ts-ignore
+        var classes = Array.from((_e$target = e.target) == null ? void 0 : _e$target.classList);
+        console.log(classes);
+        var isOutsideDrop = classes.some(function (elm) {
+          //elm matches ItemContainer string
+          return elm.includes('rpgui-content');
+        });
+        if (isOutsideDrop) {
+          setDropPosition({
+            x: data.x,
+            y: data.y
+          });
+        }
+        setWasDragged(false);
+        var target = dragContainer.current;
+        if (!target || !wasDragged) return;
+        var style = window.getComputedStyle(target);
+        var matrix = new DOMMatrixReadOnly(style.transform);
+        var x = matrix.m41;
+        var y = matrix.m42;
+        setDragPosition({
+          x: x,
+          y: y
+        });
+        setTimeout(function () {
+          if (checkIfItemCanBeMoved()) {
+            if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) openQuantitySelector(item.stackQty, onSuccesfulDrag);else onSuccesfulDrag(item.stackQty);
+          } else {
+            resetItem();
+            setDragPosition({
+              x: 0,
+              y: 0
+            });
+          }
+        }, 100);
+      } else if (item) {
+        if (!isContextMenuDisabled) setIsContextMenuVisible(!isContextMenuVisible);
+        onClick(item.type, containerType, item);
+      }
+    },
+    onStart: function onStart() {
+      if (!item) {
+        return;
+      }
+      if (onDragStart) {
+        onDragStart(item, slotIndex, containerType);
+      }
+    },
+    onDrag: function onDrag() {
+      setWasDragged(true);
+      setIsFocused(true);
+    },
+    position: dragPosition,
+    cancel: ".empty-slot"
+  }, React.createElement(ItemContainer, {
+    ref: dragContainer,
+    isFocused: isFocused,
     onMouseOver: function onMouseOver(event) {
-      return _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
+      _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
     },
     onMouseOut: function onMouseOut() {
       if (_onMouseOut) _onMouseOut();
     },
     onMouseEnter: function onMouseEnter() {
-      return setTooltipVisible(true);
+      setTooltipVisible(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return setTooltipVisible(false);
-    },
-    onClick: function onClick() {
       setTooltipVisible(false);
-      if (item) {
-        if (!isContextMenuDisabled) {
-          setIsContextMenuVisible(!isContextMenuVisible);
-        }
-        _onClick(item.type, containerType, item);
-      }
     }
-  }, !isContextMenuDisabled && isContextMenuVisible && contextActions && React.createElement(RelativeListMenu, {
+  }, onRenderSlot(item))), isTooltipVisible && item && React.createElement(ItemTooltip, {
+    label: item.name
+  }), !isContextMenuDisabled && isContextMenuVisible && contextActions && React.createElement(RelativeListMenu, {
     options: contextActions,
     onSelected: function onSelected(optionId) {
       setIsContextMenuVisible(false);
@@ -33635,21 +33726,25 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     onOutsideClick: function onOutsideClick() {
       setIsContextMenuVisible(false);
     }
-  }), isTooltipVisible && item && React.createElement(ItemTooltip, {
-    label: item.name
-  }), onRenderSlot(item));
+  }));
 });
 var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
 })(["margin:0.1rem;.sprite-from-atlas-img{position:relative;top:1.5rem;left:1.5rem;}position:relative;"]);
+var ItemContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSlot__ItemContainer",
+  componentId: "sc-l2j5ef-1"
+})(["width:100%;height:100%;position:relative;", ""], function (props) {
+  return props.isFocused && 'z-index: 100; pointer-events: none;';
+});
 var ItemQtyContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__ItemQtyContainer",
-  componentId: "sc-l2j5ef-1"
-})(["position:relative;width:85%;height:16px;top:25px;left:2px;display:flex;justify-content:flex-end;"]);
+  componentId: "sc-l2j5ef-2"
+})(["position:relative;width:85%;height:16px;top:25px;left:2px;pointer-events:none;display:flex;justify-content:flex-end;"]);
 var ItemQty = /*#__PURE__*/styled.span.withConfig({
   displayName: "ItemSlot__ItemQty",
-  componentId: "sc-l2j5ef-2"
+  componentId: "sc-l2j5ef-3"
 })(["&.regular{font-size:", ";}&.small{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall);
 
 var EquipmentSet = function EquipmentSet(_ref) {
@@ -33659,7 +33754,12 @@ var EquipmentSet = function EquipmentSet(_ref) {
     _onSelected = _ref.onSelected,
     onItemClick = _ref.onItemClick,
     atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON;
+    atlasJSON = _ref.atlasJSON,
+    onItemDragEnd = _ref.onItemDragEnd,
+    onItemDragStart = _ref.onItemDragStart,
+    onItemPlaceDrop = _ref.onItemPlaceDrop,
+    onItemOutsideDrop = _ref.onItemOutsideDrop,
+    checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved;
   var neck = equipmentSet.neck,
     leftHand = equipmentSet.leftHand,
     ring = equipmentSet.ring,
@@ -33695,6 +33795,22 @@ var EquipmentSet = function EquipmentSet(_ref) {
         onSelected: function onSelected(optionId) {
           if (_onSelected) _onSelected(optionId);
         },
+        onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
+          if (!item) {
+            return;
+          }
+          if (onItemDragStart) onItemDragStart(item, slotIndex, itemContainerType);
+        },
+        onDragEnd: function onDragEnd(quantity) {
+          if (onItemDragEnd) onItemDragEnd(quantity);
+        },
+        checkIfItemCanBeMoved: checkIfItemCanBeMoved,
+        onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
+          if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
+        },
+        onOutsideDrop: function onOutsideDrop(item, position) {
+          if (onItemOutsideDrop) onItemOutsideDrop(item, position);
+        },
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON
       });
@@ -33715,11 +33831,11 @@ var EquipmentSet = function EquipmentSet(_ref) {
 var EquipmentSetContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "EquipmentSet__EquipmentSetContainer",
   componentId: "sc-1wuddg2-0"
-})(["width:inherit;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;"]);
+})(["width:inherit;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;touch-action:none;"]);
 var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
   displayName: "EquipmentSet__EquipmentColumn",
   componentId: "sc-1wuddg2-1"
-})(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;"]);
+})(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;touch-action:none;"]);
 
 var IS_MOBILE_OR_TABLET = /*#__PURE__*/isMobile({
   tablet: true
@@ -34268,7 +34384,8 @@ var SlotsContainer = function SlotsContainer(_ref) {
     title = _ref.title,
     onClose = _ref.onClose,
     _onPositionChange = _ref.onPositionChange,
-    onOutsideClick = _ref.onOutsideClick;
+    onOutsideClick = _ref.onOutsideClick,
+    initialPosition = _ref.initialPosition;
   return React.createElement(DraggableContainer, {
     title: title,
     type: RPGUIContainerTypes.Framed,
@@ -34289,11 +34406,168 @@ var SlotsContainer = function SlotsContainer(_ref) {
         });
       }
     },
-    onOutsideClick: onOutsideClick
+    onOutsideClick: onOutsideClick,
+    initialPosition: initialPosition
   }, children);
 };
 
-var ItemContainer = function ItemContainer(_ref) {
+var RangeSliderType;
+(function (RangeSliderType) {
+  RangeSliderType["Slider"] = "rpgui-slider";
+  RangeSliderType["GoldSlider"] = "rpgui-slider golden";
+})(RangeSliderType || (RangeSliderType = {}));
+var RangeSlider = function RangeSlider(_ref) {
+  var type = _ref.type,
+    valueMin = _ref.valueMin,
+    valueMax = _ref.valueMax,
+    width = _ref.width,
+    _onChange = _ref.onChange,
+    value = _ref.value;
+  var sliderId = v4();
+  var containerRef = useRef(null);
+  var _useState = useState(0),
+    left = _useState[0],
+    setLeft = _useState[1];
+  useEffect(function () {
+    var _containerRef$current;
+    var calculatedWidth = ((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.clientWidth) || 0;
+    setLeft(Math.max((value - valueMin) / (valueMax - valueMin) * (calculatedWidth - 35) + 10));
+  }, [value, valueMin, valueMax]);
+  var typeClass = type === RangeSliderType.GoldSlider ? 'golden' : '';
+  return React.createElement("div", {
+    style: {
+      width: width,
+      position: 'relative'
+    },
+    className: "rpgui-slider-container " + typeClass,
+    id: "rpgui-slider-" + sliderId,
+    ref: containerRef
+  }, React.createElement("div", {
+    style: {
+      pointerEvents: 'none'
+    }
+  }, React.createElement("div", {
+    className: "rpgui-slider-track " + typeClass
+  }), React.createElement("div", {
+    className: "rpgui-slider-left-edge " + typeClass
+  }), React.createElement("div", {
+    className: "rpgui-slider-right-edge " + typeClass
+  }), React.createElement("div", {
+    className: "rpgui-slider-thumb " + typeClass,
+    style: {
+      left: left
+    }
+  })), React.createElement(Input$1, {
+    type: "range",
+    style: {
+      width: width
+    },
+    min: valueMin,
+    max: valueMax,
+    onChange: function onChange(e) {
+      return _onChange(Number(e.target.value));
+    },
+    value: value,
+    className: "rpgui-cursor-point"
+  }));
+};
+var Input$1 = /*#__PURE__*/styled.input.withConfig({
+  displayName: "RangeSlider__Input",
+  componentId: "sc-v8mte9-0"
+})(["opacity:0;position:absolute;width:100%;height:100%;top:0;left:0;margin-top:-5px;"]);
+
+var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
+  var quantity = _ref.quantity,
+    onConfirm = _ref.onConfirm,
+    onClose = _ref.onClose;
+  var _useState = useState(quantity),
+    value = _useState[0],
+    setValue = _useState[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+      var closeSelector = function closeSelector(e) {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      };
+      document.addEventListener('keydown', closeSelector);
+      return function () {
+        document.removeEventListener('keydown', closeSelector);
+      };
+    }
+    return function () {};
+  }, []);
+  return React.createElement(StyledContainer, {
+    type: RPGUIContainerTypes.Framed,
+    width: "25rem"
+  }, React.createElement(CloseButton$2, {
+    className: "container-close",
+    onClick: onClose,
+    onTouchStart: onClose
+  }, "X"), React.createElement("h2", null, "Select quantity to move"), React.createElement(StyledForm, {
+    style: {
+      width: '100%'
+    },
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      var numberValue = Number(value);
+      if (Number.isNaN(numberValue)) {
+        return;
+      }
+      onConfirm(Math.max(1, Math.min(quantity, numberValue)));
+    },
+    noValidate: true
+  }, React.createElement(StyledInput, {
+    innerRef: inputRef,
+    placeholder: "Enter quantity",
+    type: "number",
+    min: 1,
+    max: quantity,
+    value: value,
+    onChange: function onChange(e) {
+      if (Number(e.target.value) >= quantity) {
+        setValue(quantity);
+        return;
+      }
+      setValue(e.target.value);
+    },
+    onBlur: function onBlur(e) {
+      var newValue = Math.max(1, Math.min(quantity, Number(e.target.value)));
+      setValue(newValue);
+    }
+  }), React.createElement(RangeSlider, {
+    type: RangeSliderType.Slider,
+    valueMin: 1,
+    valueMax: quantity,
+    width: "100%",
+    onChange: setValue,
+    value: value
+  }), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    type: "submit"
+  }, "Confirm")));
+};
+var StyledContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
+  displayName: "ItemQuantitySelector__StyledContainer",
+  componentId: "sc-yfdtpn-0"
+})(["display:flex;flex-direction:column;align-items:center;"]);
+var StyledForm = /*#__PURE__*/styled.form.withConfig({
+  displayName: "ItemQuantitySelector__StyledForm",
+  componentId: "sc-yfdtpn-1"
+})(["display:flex;flex-direction:column;align-items:center;width:100%;"]);
+var StyledInput = /*#__PURE__*/styled(Input).withConfig({
+  displayName: "ItemQuantitySelector__StyledInput",
+  componentId: "sc-yfdtpn-2"
+})(["text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"]);
+var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemQuantitySelector__CloseButton",
+  componentId: "sc-yfdtpn-3"
+})(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
+
+var ItemContainer$1 = function ItemContainer(_ref) {
   var itemContainer = _ref.itemContainer,
     onClose = _ref.onClose,
     _onMouseOver = _ref.onMouseOver,
@@ -34303,7 +34577,20 @@ var ItemContainer = function ItemContainer(_ref) {
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     _ref$disableContextMe = _ref.disableContextMenu,
-    disableContextMenu = _ref$disableContextMe === void 0 ? false : _ref$disableContextMe;
+    disableContextMenu = _ref$disableContextMe === void 0 ? false : _ref$disableContextMe,
+    onItemDragEnd = _ref.onItemDragEnd,
+    onItemDragStart = _ref.onItemDragStart,
+    onItemPlaceDrop = _ref.onItemPlaceDrop,
+    _onOutsideDrop = _ref.onOutsideDrop,
+    checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
+    initialPosition = _ref.initialPosition;
+  var _useState = useState({
+      isOpen: false,
+      maxQuantity: 1,
+      callback: function callback(_quantity) {}
+    }),
+    quantitySelect = _useState[0],
+    setQuantitySelect = _useState[1];
   var onRenderSlots = function onRenderSlots() {
     var slots = [];
     for (var i = 0; i < itemContainer.slotQty; i++) {
@@ -34323,109 +34610,66 @@ var ItemContainer = function ItemContainer(_ref) {
         onSelected: function onSelected(optionId, item) {
           if (_onSelected) _onSelected(optionId, item);
         },
+        onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
+          if (onItemDragStart) onItemDragStart(item, slotIndex, itemContainerType);
+        },
+        onDragEnd: function onDragEnd(quantity) {
+          if (onItemDragEnd) onItemDragEnd(quantity);
+        },
+        checkIfItemCanBeMoved: checkIfItemCanBeMoved,
+        openQuantitySelector: function openQuantitySelector(maxQuantity, callback) {
+          setQuantitySelect({
+            isOpen: true,
+            maxQuantity: maxQuantity,
+            callback: callback
+          });
+        },
+        onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
+          if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
+        },
+        onOutsideDrop: function onOutsideDrop(item, position) {
+          if (_onOutsideDrop) _onOutsideDrop(item, position);
+        },
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON
       }));
     }
     return slots;
   };
-  return React.createElement(SlotsContainer, {
+  return React.createElement(React.Fragment, null, React.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
-    onClose: onClose
+    onClose: onClose,
+    initialPosition: initialPosition
   }, React.createElement(ItemsContainer, {
     className: "item-container-body"
-  }, onRenderSlots()));
+  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
+    quantity: quantitySelect.maxQuantity,
+    onConfirm: function onConfirm(quantity) {
+      quantitySelect.callback(quantity);
+      setQuantitySelect({
+        isOpen: false,
+        maxQuantity: 1,
+        callback: function callback() {}
+      });
+    },
+    onClose: function onClose() {
+      quantitySelect.callback(-1);
+      setQuantitySelect({
+        isOpen: false,
+        maxQuantity: 1,
+        callback: function callback() {}
+      });
+    }
+  })));
 };
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
   componentId: "sc-15y5p9l-0"
 })(["max-width:280px;display:flex;justify-content:center;flex-wrap:wrap;"]);
-
-var ItemSelector = function ItemSelector(_ref) {
-  var atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON,
-    options = _ref.options,
-    onClose = _ref.onClose,
-    onSelect = _ref.onSelect;
-  var _useState = useState(),
-    selectedValue = _useState[0],
-    setSelectedValue = _useState[1];
-  var handleClick = function handleClick() {
-    var element = document.querySelector("input[name='test']:checked");
-    var elementValue = element.value;
-    setSelectedValue(elementValue);
-  };
-  useEffect(function () {
-    if (selectedValue) {
-      onSelect(selectedValue);
-    }
-  }, [selectedValue]);
-  return React.createElement(DraggableContainer, {
-    type: RPGUIContainerTypes.Framed,
-    width: "500px",
-    cancelDrag: ".equipment-container-body .arrow-selector",
-    onCloseButton: function onCloseButton() {
-      if (onClose) {
-        onClose();
-      }
-    }
-  }, React.createElement("div", {
-    style: {
-      width: '100%'
-    }
-  }, React.createElement(Title$2, null, 'Harvesting instruments'), React.createElement(Subtitle$1, null, 'Use the tool, you need it'), React.createElement("hr", {
-    className: "golden"
-  })), React.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
-    return React.createElement(RadioOptionsWrapper$1, {
-      key: index
-    }, React.createElement(SpriteAtlasWrapper$1, null, React.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
-      spriteKey: option.imageKey,
-      imgScale: 3
-    })), React.createElement("div", null, React.createElement("input", {
-      className: "rpgui-radio",
-      type: "radio",
-      value: option.name,
-      name: "test"
-    }), React.createElement("label", {
-      onClick: handleClick,
-      style: {
-        display: 'flex',
-        alignItems: 'center'
-      }
-    }, option.name, " ", React.createElement("br", null), option.description)));
-  })), React.createElement(ButtonWrapper$1, null, React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton,
-    onClick: onClose
-  }, "Cancel"), React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton
-  }, "Select")));
-};
-var Title$2 = /*#__PURE__*/styled.h1.withConfig({
-  displayName: "ItemSelector__Title",
-  componentId: "sc-gptoxp-0"
-})(["font-size:0.6rem;color:yellow !important;"]);
-var Subtitle$1 = /*#__PURE__*/styled.h1.withConfig({
-  displayName: "ItemSelector__Subtitle",
-  componentId: "sc-gptoxp-1"
-})(["font-size:0.4rem;color:yellow !important;"]);
-var RadioInputScroller$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSelector__RadioInputScroller",
-  componentId: "sc-gptoxp-2"
-})(["padding-left:15px;padding-top:10px;width:100%;margin-top:1rem;align-items:center;margin-left:20px;align-items:flex-start;overflow-y:scroll;height:360px;"]);
-var SpriteAtlasWrapper$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSelector__SpriteAtlasWrapper",
-  componentId: "sc-gptoxp-3"
-})(["margin-right:40px;"]);
-var RadioOptionsWrapper$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSelector__RadioOptionsWrapper",
-  componentId: "sc-gptoxp-4"
-})(["display:flex;align-items:stretch;margin-bottom:40px;"]);
-var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSelector__ButtonWrapper",
-  componentId: "sc-gptoxp-5"
-})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
+var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemContainer__QuantitySelectorContainer",
+  componentId: "sc-15y5p9l-1"
+})(["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 ListMenu = function ListMenu(_ref) {
   var options = _ref.options,
@@ -34562,7 +34806,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onTouchStart: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$3, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$2, null, React.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$9
   }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -34581,7 +34825,7 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React.createElement(QuestsContainer, null, React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$3, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$2, null, React.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$9
   }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -34628,7 +34872,7 @@ var TitleContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__TitleContainer",
   componentId: "sc-15s2boc-6"
 })(["width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:1rem;"]);
-var Title$3 = /*#__PURE__*/styled.h1.withConfig({
+var Title$2 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-15s2boc-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -34650,7 +34894,7 @@ var QuestList = function QuestList(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$4, null, "Quests"), React.createElement("hr", {
+  }, React.createElement(Title$3, null, "Quests"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
     return React.createElement("div", {
@@ -34671,7 +34915,7 @@ var QuestDraggableContainer$1 = /*#__PURE__*/styled(DraggableContainer).withConf
   displayName: "QuestList__QuestDraggableContainer",
   componentId: "sc-1a2vx6q-0"
 })([".container-close{top:10px;right:10px;}.quest-title{text-align:left;margin-left:44px;margin-top:20px;color:yellow;}.quest-desc{margin-top:12px;margin-left:44px;}.rpgui-progress{min-width:80%;margin:0 auto;}"]);
-var Title$4 = /*#__PURE__*/styled.h1.withConfig({
+var Title$3 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestList__Title",
   componentId: "sc-1a2vx6q-1"
 })(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
@@ -34684,6 +34928,15 @@ var NoQuestContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1a2vx6q-3"
 })(["text-align:center;p{margin-top:5px;}"]);
 
+//@ts-ignore
+var _RPGUI = RPGUI;
+var RPGUIRoot = function RPGUIRoot(_ref) {
+  var children = _ref.children;
+  return React.createElement("div", {
+    className: "rpgui-content"
+  }, children);
+};
+
 var InputRadio = function InputRadio(_ref) {
   var name = _ref.name,
     items = _ref.items,
@@ -34716,41 +34969,6 @@ var InputRadio = function InputRadio(_ref) {
   }));
 };
 
-var RangeSliderType;
-(function (RangeSliderType) {
-  RangeSliderType["Slider"] = "rpgui-slider";
-  RangeSliderType["GoldSlider"] = "rpgui-slider golden";
-})(RangeSliderType || (RangeSliderType = {}));
-var RangeSlider = function RangeSlider(_ref) {
-  var type = _ref.type,
-    valueMin = _ref.valueMin,
-    valueMax = _ref.valueMax,
-    width = _ref.width,
-    onChange = _ref.onChange;
-  var sliderId = v4();
-  var onHandleMouseUp = function onHandleMouseUp() {
-    var rpguiSlider = document.getElementById("rpgui-slider-" + sliderId);
-    var value = _RPGUI.get_value(rpguiSlider);
-    onChange(Number(value));
-  };
-  return React.createElement("div", {
-    onMouseUp: onHandleMouseUp
-  }, React.createElement(Input$1, {
-    className: type === RangeSliderType.Slider ? RangeSliderType.Slider : RangeSliderType.GoldSlider,
-    type: "range",
-    style: {
-      width: width
-    },
-    min: valueMin,
-    max: valueMax,
-    id: "rpgui-slider-" + sliderId
-  }));
-};
-var Input$1 = /*#__PURE__*/styled.input.withConfig({
-  displayName: "RangeSlider__Input",
-  componentId: "sc-v8mte9-0"
-})(["opacity:0;"]);
-
 var SimpleProgressBar = function SimpleProgressBar(_ref) {
   var value = _ref.value,
     _ref$bgColor = _ref.bgColor,
@@ -34920,7 +35138,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
   };
   return React.createElement(SkillsDraggableContainer, {
     title: "Skills"
-  }, onCloseButton && React.createElement(CloseButton$2, {
+  }, onCloseButton && React.createElement(CloseButton$3, {
     onClick: onCloseButton,
     onTouchStart: onCloseButton
   }, "X"), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "General"), React.createElement("hr", {
@@ -34950,7 +35168,7 @@ var SkillSplitDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__SkillSplitDiv",
   componentId: "sc-1g0c67q-1"
 })(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
-var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-2"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:0.7rem;"]);
@@ -34985,7 +35203,7 @@ var TimeWidget = function TimeWidget(_ref) {
   var onClose = _ref.onClose,
     TimeClock = _ref.TimeClock,
     periodOfDay = _ref.periodOfDay;
-  return React.createElement(Draggable, null, React.createElement(WidgetContainer, null, React.createElement(CloseButton$3, {
+  return React.createElement(Draggable, null, React.createElement(WidgetContainer, null, React.createElement(CloseButton$4, {
     onClick: onClose
   }, "X"), React.createElement(DayNightContainer, null, React.createElement(DayNightPeriod, {
     periodOfDay: periodOfDay
@@ -34999,7 +35217,7 @@ var Time = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
 })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
-var CloseButton$3 = /*#__PURE__*/styled.p.withConfig({
+var CloseButton$4 = /*#__PURE__*/styled.p.withConfig({
   displayName: "TimeWidget__CloseButton",
   componentId: "sc-1ja236h-2"
 })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);
@@ -35155,7 +35373,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$5, null, Capitalize(type), " Menu"), React.createElement("hr", {
+  }, React.createElement(Title$4, null, Capitalize(type), " Menu"), React.createElement("hr", {
     className: "golden"
   })), React.createElement(TradingComponentScrollWrapper, null, traderItems.map(function (tradeItem, index) {
     var _qtyMap$get;
@@ -35168,7 +35386,7 @@ var TradingMenu = function TradingMenu(_ref) {
       traderItem: tradeItem,
       selectedQty: (_qtyMap$get = qtyMap.get(tradeItem.key)) != null ? _qtyMap$get : 0
     }));
-  })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold)), React.createElement(TotalWrapper, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertWrapper, null, React.createElement("p", null, " Sorry, not enough money.")) : React.createElement(GoldWrapper, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold())), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
+  })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold)), React.createElement(TotalWrapper, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertWrapper, null, React.createElement("p", null, " Sorry, not enough money.")) : React.createElement(GoldWrapper, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold())), React.createElement(ButtonWrapper$1, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onClick: function onClick() {
@@ -35181,7 +35399,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$5 = /*#__PURE__*/styled.h1.withConfig({
+var Title$4 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -35205,7 +35423,7 @@ var AlertWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__AlertWrapper",
   componentId: "sc-1wjsz1l-5"
 })(["margin-top:1rem;display:flex;width:100%;justify-content:center;height:20px;p{color:red !important;}"]);
-var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__ButtonWrapper",
   componentId: "sc-1wjsz1l-6"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;margin-top:1rem;"]);
@@ -35226,5 +35444,91 @@ var Container$i = /*#__PURE__*/styled.div.withConfig({
   return props.maxLines;
 });
 
-export { Button, ButtonTypes, CharacterSelection, Chat, CheckButton, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIForceRenderStart, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
+var ItemSelector = function ItemSelector(_ref) {
+  var atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    options = _ref.options,
+    onClose = _ref.onClose,
+    onSelect = _ref.onSelect;
+  var _useState = useState(),
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
+  var handleClick = function handleClick() {
+    var element = document.querySelector("input[name='test']:checked");
+    var elementValue = element.value;
+    setSelectedValue(elementValue);
+  };
+  useEffect(function () {
+    if (selectedValue) {
+      onSelect(selectedValue);
+    }
+  }, [selectedValue]);
+  return React.createElement(DraggableContainer, {
+    type: RPGUIContainerTypes.Framed,
+    width: "500px",
+    cancelDrag: ".equipment-container-body .arrow-selector",
+    onCloseButton: function onCloseButton() {
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React.createElement(Title$5, null, 'Harvesting instruments'), React.createElement(Subtitle$1, null, 'Use the tool, you need it'), React.createElement("hr", {
+    className: "golden"
+  })), React.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
+    return React.createElement(RadioOptionsWrapper$1, {
+      key: index
+    }, React.createElement(SpriteAtlasWrapper$1, null, React.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: option.imageKey,
+      imgScale: 3
+    })), React.createElement("div", null, React.createElement("input", {
+      className: "rpgui-radio",
+      type: "radio",
+      value: option.name,
+      name: "test"
+    }), React.createElement("label", {
+      onClick: handleClick,
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, option.name, " ", React.createElement("br", null), option.description)));
+  })), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onClick: onClose
+  }, "Cancel"), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton
+  }, "Select")));
+};
+var Title$5 = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "ItemSelector__Title",
+  componentId: "sc-gptoxp-0"
+})(["font-size:0.6rem;color:yellow !important;"]);
+var Subtitle$1 = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "ItemSelector__Subtitle",
+  componentId: "sc-gptoxp-1"
+})(["font-size:0.4rem;color:yellow !important;"]);
+var RadioInputScroller$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__RadioInputScroller",
+  componentId: "sc-gptoxp-2"
+})(["padding-left:15px;padding-top:10px;width:100%;margin-top:1rem;align-items:center;margin-left:20px;align-items:flex-start;overflow-y:scroll;height:360px;"]);
+var SpriteAtlasWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__SpriteAtlasWrapper",
+  componentId: "sc-gptoxp-3"
+})(["margin-right:40px;"]);
+var RadioOptionsWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__RadioOptionsWrapper",
+  componentId: "sc-gptoxp-4"
+})(["display:flex;align-items:stretch;margin-bottom:40px;"]);
+var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__ButtonWrapper",
+  componentId: "sc-gptoxp-5"
+})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
+
+export { Button, ButtonTypes, CharacterSelection, Chat, CheckButton, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map