ps99-api 2.6.3 → 2.6.4

package/example-web/react2/src/components/CollectionConfigIndex.tsx

@@ -480,8 +480,16 @@ const CollectionConfigIndex: React.FC<CollectionConfigIndexProps> = () => {
   }, [isMobile, collectionName, finalItems.length]); // Re-evaluate on collection change or mobile resize, or items load
 
 
-  // Scroll Direction  // Header Logic
-  const { showHeader, handleScroll, scrollRef, headerRef, headerHeight, contentPadding } = useCollapsibleHeader({ deps: [loading] });
+  // Scroll Direction / Header Logic
+  // Check if content is short to disable collapsible header (prevents popping)
+  const ITEM_HEIGHT = viewMode === 'list' ? 100 : 150; // Approximate
+  const estimatedContentHeight = finalItems.length * ITEM_HEIGHT / (viewMode === 'grid' ? 2 : 1); // Rough estimate
+  const isShortContent = estimatedContentHeight < window.innerHeight * 1.5;
+
+  const { showHeader, handleScroll, scrollRef, headerRef, headerHeight, contentPadding } = useCollapsibleHeader({
+    deps: [loading, finalItems.length, viewMode],
+    disabled: isShortContent // Disable collapsing if content is short
+  });
 
   // Loading State
   if (loading) {
@@ -644,7 +652,7 @@ const CollectionConfigIndex: React.FC<CollectionConfigIndexProps> = () => {
         flexDirection: "column",
         overflow: "hidden",
         backgroundColor: "#ffffff",
-        height: "100%", // ensure it fills parent
+        height: "100dvh", // ensure it fills parent with dynamic viewport height
         position: 'relative' // Context for absolute header
       }}
     >
@@ -821,6 +829,7 @@ const CollectionConfigIndex: React.FC<CollectionConfigIndexProps> = () => {
                   width={width}
                   initialScrollOffset={initialScrollOffset}
                   onScroll={handleScroll}
+                  bottomPadding={120} // Account for Android footer/nav
                   itemData={{
                     items: finalItems,
                     navigate,
@@ -854,6 +863,7 @@ const CollectionConfigIndex: React.FC<CollectionConfigIndexProps> = () => {
                       initialScrollOffset={initialScrollOffset}
                       onScroll={handleScroll}
                       style={{ overflowX: "hidden" }}
+                      bottomPadding={120} // Account for Android footer/nav
                       itemData={{
                         items: finalItems,
                         columnCount: colCount,

package/example-web/react2/src/components/ReactWindowMock.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 
-export const FixedSizeList = ({ children, itemCount, itemSize, height, width, onScroll, initialScrollOffset, itemData }: any) => {
+export const FixedSizeList = ({ children, itemCount, itemSize, height, width, onScroll, initialScrollOffset, itemData, bottomPadding = 0 }: any) => {
     const items = [];
     for (let i = 0; i < itemCount; i++) {
         items.push(
@@ -25,11 +25,12 @@ export const FixedSizeList = ({ children, itemCount, itemSize, height, width, on
             onScroll={(e) => onScroll && onScroll({ scrollOffset: e.currentTarget.scrollTop })}
         >
             {items}
+            {bottomPadding > 0 && <div style={{ height: bottomPadding }} />}
         </div>
     );
 };
 
-export const FixedSizeGrid = ({ children, columnCount, rowCount, columnWidth, rowHeight, height, width, onScroll, initialScrollOffset, itemData, style }: any) => {
+export const FixedSizeGrid = ({ children, columnCount, rowCount, columnWidth, rowHeight, height, width, onScroll, initialScrollOffset, itemData, style, bottomPadding = 0 }: any) => {
     const items = [];
     for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
         for (let columnIndex = 0; columnIndex < columnCount; columnIndex++) {
@@ -65,7 +66,7 @@ export const FixedSizeGrid = ({ children, columnCount, rowCount, columnWidth, ro
             style={{ height, width, overflowY: "auto", overflowX: "hidden", position: 'relative', ...style }}
             onScroll={(e) => onScroll && onScroll({ scrollTop: e.currentTarget.scrollTop })}
         >
-            <div style={{ height: rowCount * rowHeight, width: columnWidth * columnCount }}>
+            <div style={{ height: rowCount * rowHeight + bottomPadding, width: columnWidth * columnCount }}>
                 {items}
             </div>
         </div>

package/example-web/react2/src/hooks/useCollapsibleHeader.ts

@@ -5,10 +5,11 @@ interface UseCollapsibleHeaderOptions {
     triggerStart?: number; // Scroll position to start checking
     threshold?: number;   // Scroll delta threshold
     deps?: any[];         // Dependencies to re-run the ResizeObserver effect
+    disabled?: boolean;   // Disable collapsing behavior
 }
 
 export const useCollapsibleHeader = (options: UseCollapsibleHeaderOptions = {}) => {
-    const { defaultHeight = 120, triggerStart = 50, threshold = 10, deps = [] } = options;
+    const { defaultHeight = 120, triggerStart = 50, threshold = 10, deps = [], disabled = false } = options;
 
     // Header Visibility Logic
     const [showHeader, setShowHeader] = useState(true);
@@ -16,6 +17,11 @@ export const useCollapsibleHeader = (options: UseCollapsibleHeaderOptions = {})
     const scrollRef = useRef<number>(0);
 
     const handleScroll = ({ scrollOffset, scrollTop }: { scrollOffset?: number, scrollTop?: number }) => {
+        if (disabled) {
+            setShowHeader(true);
+            return;
+        }
+
         const currentScrollTop = scrollTop ?? scrollOffset ?? 0;
         const scrollDelta = currentScrollTop - lastScrollTop.current;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ps99-api",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "description": "Pet Simulator Public API wrapper written in Typescript.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",