@rpg-engine/long-bow 0.5.17 → 0.5.19

package/dist/components/Abstractions/SlotsContainer.d.ts

@@ -10,6 +10,7 @@ interface IProps {
     onOutsideClick?: () => void;
     initialPosition?: IPosition;
     scale?: number;
+    width?: string;
 }
 export declare const SlotsContainer: React.FC<IProps>;
 export {};

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

@@ -13685,6 +13685,12 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     dropPosition = _useState8[0],
     setDropPosition = _useState8[1];
   var dragContainer = React.useRef(null);
+  React.useEffect(function () {
+    // This fixes an issue where if you drag an item inside of a scrollable container (overflow), its cut out
+    if (dragContainer.current) {
+      dragContainer.current.style.position = 'fixed';
+    }
+  }, []);
   var _useState9 = React.useState([]),
     contextActions = _useState9[0],
     setContextActions = _useState9[1];
@@ -13988,7 +13994,7 @@ var rarityColor = function rarityColor(item) {
 var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}position:relative;&::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;.react-draggable-dragging{opacity:0.5;}.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}position:relative;&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
   var item = _ref2.item;
   return rarityColor(item);
 }, function (_ref3) {
@@ -14004,7 +14010,7 @@ var Container$a = /*#__PURE__*/styled.div.withConfig({
 var ItemContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__ItemContainer",
   componentId: "sc-l2j5ef-1"
-})(["width:100%;height:100%;position:relative;", ""], function (props) {
+})(["width:64px;height:64px;", ""], function (props) {
   return props.isFocused && 'z-index: 100; pointer-events: none;';
 });
 var ItemQtyContainer = /*#__PURE__*/styled.div.withConfig({
@@ -15435,7 +15441,8 @@ var SlotsContainer = function SlotsContainer(_ref) {
     _onPositionChangeStart = _ref.onPositionChangeStart,
     onOutsideClick = _ref.onOutsideClick,
     initialPosition = _ref.initialPosition,
-    scale = _ref.scale;
+    scale = _ref.scale,
+    width = _ref.width;
   return React__default.createElement(DraggableContainer, {
     title: title,
     type: exports.RPGUIContainerTypes.Framed,
@@ -15444,7 +15451,7 @@ var SlotsContainer = function SlotsContainer(_ref) {
         onClose();
       }
     },
-    width: "400px",
+    width: width != null ? width : '415px',
     cancelDrag: ".item-container-body, #shortcuts_list",
     onPositionChange: function onPositionChange(_ref2) {
       var x = _ref2.x,
@@ -15853,7 +15860,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
   componentId: "sc-15y5p9l-0"
-})(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:auto;"]);
+})(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:auto;overflow-x:hidden;width:415px;"]);
 var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__QuantitySelectorContainer",
   componentId: "sc-15y5p9l-1"