@rpg-engine/long-bow 0.8.219 → 0.8.220

package/package.json

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

package/src/components/DraggableContainer.tsx

@@ -12,12 +12,6 @@ export interface IDraggableContainerProps {
   height?: string;
   minWidth?: string;
   minHeight?: string;
-  /** CSS override for width applied below `mobileBreakpoint`. Useful for responsive sizing without JS detection. */
-  mobileWidth?: string;
-  /** CSS override for height applied below `mobileBreakpoint`. Useful for responsive sizing without JS detection. */
-  mobileHeight?: string;
-  /** Viewport width in px under which mobile overrides apply. Defaults to 768. */
-  mobileBreakpoint?: number;
   className?: string;
   type?: RPGUIContainerTypes;
   title?: string;
@@ -42,9 +36,6 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   height,
   minHeight,
   minWidth,
-  mobileWidth,
-  mobileHeight,
-  mobileBreakpoint = 768,
   className,
   type = RPGUIContainerTypes.FramedGold,
   onCloseButton,
@@ -126,9 +117,6 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
         height={height || 'auto'}
         minWidth={minWidth}
         minHeight={minHeight}
-        mobileWidth={mobileWidth}
-        mobileHeight={mobileHeight}
-        mobileBreakpoint={mobileBreakpoint}
         className={`rpgui-container ${type} ${className}`}
         isFullScreen={isFullScreen}
         opacity={opacity}
@@ -161,9 +149,6 @@ interface IContainerProps {
   height: string;
   minWidth?: string;
   minHeight?: string;
-  mobileWidth?: string;
-  mobileHeight?: string;
-  mobileBreakpoint?: number;
   isFullScreen?: boolean;
   opacity?: number;
 }
@@ -193,15 +178,6 @@ const Container = styled.div<IContainerProps>`
       align-content: flex-start;
     `}
 
-  ${({ mobileWidth, mobileHeight, mobileBreakpoint }) =>
-    (mobileWidth || mobileHeight) &&
-    css`
-      @media (max-width: ${mobileBreakpoint ?? 768}px) {
-        ${mobileWidth && `width: ${mobileWidth}; min-width: unset;`}
-        ${mobileHeight && `height: ${mobileHeight}; min-height: unset;`}
-      }
-    `}
-
   &.rpgui-container {
     padding-top: 1.5rem;
   }

package/src/components/Store/CartView.tsx

@@ -260,14 +260,17 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: 1rem;
+  height: 100%;
   padding: 1rem;
+  overflow: hidden;
+  box-sizing: border-box;
 `;
 
 const Header = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-shrink: 0;
 `;
 
 const Title = styled.h2`
@@ -293,8 +296,10 @@ const CartItems = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  flex: 1;
+  min-height: 0;
   overflow-y: auto;
-  max-height: 250px;
+  margin: 1rem 0;
   padding-right: 0.5rem;
 
   &::-webkit-scrollbar {

package/src/components/Store/MetadataCollector.tsx

@@ -1,48 +1,68 @@
-import { MetadataType } from "@rpg-engine/shared";
-import React, { useEffect } from "react";
-import { CharacterSkinSelectionModal } from "../Character/CharacterSkinSelectionModal";
+import { MetadataType } from '@rpg-engine/shared';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { CharacterSkinSelectionModal } from '../Character/CharacterSkinSelectionModal';
 
 export interface IMetadataCollectorProps {
-    metadataType: MetadataType;
-    config: Record<string, any>;
-    onCollect: (metadata: Record<string, any>) => void;
-    onCancel: () => void;
+  metadataType: MetadataType;
+  config: Record<string, any>;
+  onCollect: (metadata: Record<string, any>) => void;
+  onCancel: () => void;
 }
 
 export const MetadataCollector: React.FC<IMetadataCollectorProps> = ({
-    metadataType,
-    config,
-    onCollect,
-    onCancel,
+  metadataType,
+  config,
+  onCollect,
+  onCancel,
 }) => {
-    // Make sure we clean up if unmounted without collecting
-    useEffect(() => {
-        return () => {
-            // If we're unmounting without explicitly collecting or canceling,
-            // make sure to call onCancel to prevent any hanging promises
-            if (window.__metadataResolvers) {
-                onCancel();
-            }
-        };
-    }, [onCancel]);
-
-    // Use string comparison instead of direct property access
-    if (metadataType === 'CharacterSkin') {
-        return (
-            <CharacterSkinSelectionModal
-                isOpen={true}
-                onClose={onCancel}
-                onConfirm={(selectedSkin: any) => onCollect({ selectedSkin })}
-                availableCharacters={config.availableCharacters || []}
-                atlasJSON={config.atlasJSON}
-                atlasIMG={config.atlasIMG}
-                initialSelectedSkin={config.initialSelectedSkin}
-            />
-        );
-    } else {
-        console.warn(`No collector implemented for metadata type: ${metadataType}`);
-        // Auto-cancel for unhandled types to prevent hanging promises
-        setTimeout(onCancel, 0);
-        return null;
+  const isPendingRef = useRef(true);
+
+  const finalize = useCallback((callback: () => void) => {
+    if (!isPendingRef.current) {
+      return;
+    }
+
+    isPendingRef.current = false;
+    callback();
+  }, []);
+
+  const handleCollect = useCallback((metadata: Record<string, any>) => {
+    finalize(() => onCollect(metadata));
+  }, [finalize, onCollect]);
+
+  const handleCancel = useCallback(() => {
+    finalize(onCancel);
+  }, [finalize, onCancel]);
+
+  useEffect(() => {
+    return () => {
+      handleCancel();
+    };
+  }, [handleCancel]);
+
+  useEffect(() => {
+    if (metadataType === MetadataType.CharacterSkin) {
+      return undefined;
     }
+
+    const timer = window.setTimeout(handleCancel, 0);
+    return () => window.clearTimeout(timer);
+  }, [handleCancel, metadataType]);
+
+  if (metadataType === MetadataType.CharacterSkin) {
+    return (
+      <CharacterSkinSelectionModal
+        isOpen
+        onClose={handleCancel}
+        onConfirm={(selectedSkin: any) => handleCollect({ selectedSkin })}
+        availableCharacters={config.availableCharacters || []}
+        atlasJSON={config.atlasJSON}
+        atlasIMG={config.atlasIMG}
+        initialSelectedSkin={config.initialSelectedSkin}
+      />
+    );
+  }
+
+  console.warn(`No collector implemented for metadata type: ${metadataType}`);
+  return null;
 };