@rpg-engine/long-bow 0.5.17 → 0.5.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.17",
+  "version": "0.5.19",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Abstractions/SlotsContainer.tsx

@@ -13,6 +13,7 @@ interface IProps {
   onOutsideClick?: () => void;
   initialPosition?: IPosition;
   scale?: number;
+  width?: string;
 }
 
 export const SlotsContainer: React.FC<IProps> = ({
@@ -25,6 +26,7 @@ export const SlotsContainer: React.FC<IProps> = ({
   onOutsideClick,
   initialPosition,
   scale,
+  width,
 }) => {
   return (
     <DraggableContainer
@@ -35,7 +37,7 @@ export const SlotsContainer: React.FC<IProps> = ({
           onClose();
         }
       }}
-      width="400px"
+      width={width ?? '415px'}
       cancelDrag=".item-container-body, #shortcuts_list"
       onPositionChange={({ x, y }) => {
         if (onPositionChange) {

package/src/components/Item/Inventory/ItemContainer.tsx

@@ -84,7 +84,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   const [quantitySelect, setQuantitySelect] = useState({
     isOpen: false,
     maxQuantity: 1,
-    callback: (_quantity: number) => { },
+    callback: (_quantity: number) => {},
   });
   const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
 
@@ -192,7 +192,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
                 setQuantitySelect({
                   isOpen: false,
                   maxQuantity: 1,
-                  callback: () => { },
+                  callback: () => {},
                 });
               }}
               onClose={() => {
@@ -200,7 +200,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
                 setQuantitySelect({
                   isOpen: false,
                   maxQuantity: 1,
-                  callback: () => { },
+                  callback: () => {},
                 });
               }}
             />
@@ -215,8 +215,10 @@ const ItemsContainer = styled.div`
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  max-height: 270px; /* Defina a altura máxima desejada */
-  overflow-y: auto; /* Adicione uma barra de rolagem vertical quando necessário */
+  max-height: 270px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 415px;
 `;
 
 const QuantitySelectorContainer = styled.div`

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -123,6 +123,13 @@ export const ItemSlot: React.FC<IProps> = observer(
     const [dropPosition, setDropPosition] = useState<IPosition | null>(null);
     const dragContainer = useRef<HTMLDivElement>(null);
 
+    useEffect(() => {
+      // 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';
+      }
+    }, []);
+
     const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
       []
     );
@@ -523,6 +530,12 @@ interface ContainerTypes {
 
 const Container = styled.div<ContainerTypes>`
   margin: 0.1rem;
+
+  .react-draggable-dragging {
+    opacity: 0.5; 
+  }
+  
+  
   .sprite-from-atlas-img--item {
     position: relative;
     top: 1.5rem;
@@ -563,10 +576,8 @@ const Container = styled.div<ContainerTypes>`
 `;
 
 const ItemContainer = styled.div<{ isFocused?: boolean }>`
-  width: 100%;
-  height: 100%;
-  position: relative;
-
+  width: 64px;
+  height: 64px;
   ${props => props.isFocused && 'z-index: 100; pointer-events: none;'}
 `;