@tapcart/mobile-components 0.11.3 → 0.11.4

package/dist/components/hooks/use-infinite-scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAmB,MAAM,iBAAiB,CAAA;AAE1E,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAE5D,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CACxC;AAED,UAAU,sBAAsB;IAE9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAGxC,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAGpC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAChD,YAAY,CAAC,EAAE,CACb,SAAS,EAAE,MAAM,EACjB,gBAAgB,EAAE,GAAG,GAAG,IAAI,EAC5B,GAAG,IAAI,EAAE,GAAG,EAAE,KACX,GAAG,CAAA;CACT;AAED,UAAU,uBAAuB;IAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,OAAO,CAAA;IACtB,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,oBAAoB,EAAE,GAAG,EAAE,CAAA;IAC3B,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,sCAAsC,iBACnC,uBAAuB,OAsBtC,CAAA;AAED,QAAA,MAAM,YAAY,WAAY,MAAM,WAGnC,CAAA;AAED,QAAA,MAAM,iBAAiB,kJAepB,sBAAsB,KAAG,uBAmP3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAmB,MAAM,iBAAiB,CAAA;AAE1E,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAE5D,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CACxC;AAED,UAAU,sBAAsB;IAE9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAGxC,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAGpC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAChD,YAAY,CAAC,EAAE,CACb,SAAS,EAAE,MAAM,EACjB,gBAAgB,EAAE,GAAG,GAAG,IAAI,EAC5B,GAAG,IAAI,EAAE,GAAG,EAAE,KACX,GAAG,CAAA;CACT;AAED,UAAU,uBAAuB;IAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,OAAO,CAAA;IACtB,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,oBAAoB,EAAE,GAAG,EAAE,CAAA;IAC3B,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,sCAAsC,iBACnC,uBAAuB,OAsBtC,CAAA;AAED,QAAA,MAAM,YAAY,WAAY,MAAM,WAGnC,CAAA;AAED,QAAA,MAAM,iBAAiB,kJAepB,sBAAsB,KAAG,uBAuR3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/hooks/use-infinite-scroll.js

@@ -52,6 +52,12 @@ customFetcher, customGetKey, }) => {
     var _a, _b, _c, _d, _e;
     const searchParams = useSearchParams();
     const productCount = useRef(0);
+    const isFirstRender = useRef(true);
+    const prevParamsRef = useRef({
+        collectionId: null,
+        collectionHandle: null,
+        searchQuery: null,
+    });
     const { ref, inView } = useInView({
         rootMargin: direction === "vertical" ? "600px" : "0px 420px 0px 0px",
         threshold: threshold,
@@ -60,26 +66,19 @@ customFetcher, customGetKey, }) => {
     const usingSearchClient = Boolean(searchClient);
     const { handle, id } = (searchClient === null || searchClient === void 0 ? void 0 : searchClient.getCollection()) || {};
     const query = searchClient === null || searchClient === void 0 ? void 0 : searchClient.getQuery();
+    // Extract current critical params
+    const currentCollectionId = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("collectionId")) || id || (queryVariableProps === null || queryVariableProps === void 0 ? void 0 : queryVariableProps.collectionId);
+    const currentCollectionHandle = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("collectionHandle")) ||
+        handle ||
+        (queryVariableProps === null || queryVariableProps === void 0 ? void 0 : queryVariableProps.collectionHandle);
+    const currentSearchQuery = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("searchQuery")) || query || (queryVariableProps === null || queryVariableProps === void 0 ? void 0 : queryVariableProps.searchQuery);
     // Determine whether we should skip fetching for search client approach
     const hasCollection = useMemo(() => {
-        return Boolean((searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("collectionId")) ||
-            (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("collectionHandle")) ||
-            handle ||
-            id ||
-            (queryVariableProps === null || queryVariableProps === void 0 ? void 0 : queryVariableProps.collectionId) ||
-            (queryVariableProps === null || queryVariableProps === void 0 ? void 0 : queryVariableProps.collectionHandle));
-    }, [
-        searchParams,
-        handle,
-        id,
-        queryVariableProps === null || queryVariableProps === void 0 ? void 0 : queryVariableProps.collectionId,
-        queryVariableProps === null || queryVariableProps === void 0 ? void 0 : queryVariableProps.collectionHandle,
-    ]);
+        return Boolean(currentCollectionId || currentCollectionHandle);
+    }, [currentCollectionId, currentCollectionHandle]);
     const hasQuery = useMemo(() => {
-        return (Boolean(searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("searchQuery")) ||
-            query ||
-            (queryVariableProps === null || queryVariableProps === void 0 ? void 0 : queryVariableProps.searchQuery));
-    }, [searchParams, query, queryVariableProps === null || queryVariableProps === void 0 ? void 0 : queryVariableProps.searchQuery]);
+        return Boolean(currentSearchQuery);
+    }, [currentSearchQuery]);
     const shouldSkipFetch = !hasCollection && !hasQuery;
     // Search client approach - getKey and fetcher
     const searchClientGetKey = useMemo(() => customGetKey || (searchClient === null || searchClient === void 0 ? void 0 : searchClient.getKey), [customGetKey, searchClient === null || searchClient === void 0 ? void 0 : searchClient.getKey]);
@@ -113,21 +112,25 @@ customFetcher, customGetKey, }) => {
         productCount.current += (_g = (_f = data === null || data === void 0 ? void 0 : data.products) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0;
         return data;
     });
-    // Determine which approach to use
+    // Return null from getKey to conditionally skip fetching
+    // When getKey returns null, SWR won't fetch and won't cache anything
+    // https://swr.vercel.app/docs/conditional-fetching
     const getKey = usingSearchClient
         ? (pageIndex, previousPageData) => {
+            if (shouldSkipFetch)
+                return null;
             if (!searchClientGetKey)
                 return null;
             return searchClientGetKey(pageIndex, previousPageData);
         }
         : (pageIndex, previousPageData) => {
+            if (shouldSkipFetch)
+                return null;
             return (customGetKey || apiGetKey)(pageIndex, previousPageData, queryVariables !== null && queryVariables !== void 0 ? queryVariables : {});
         };
     const fetcher = usingSearchClient
         ? (...args) => __awaiter(void 0, void 0, void 0, function* () {
             var _h, _j;
-            if (shouldSkipFetch)
-                return null;
             if (!searchClientFetcher)
                 return null;
             const result = yield searchClientFetcher(...args);
@@ -135,8 +138,6 @@ customFetcher, customGetKey, }) => {
             return result;
         })
         : (...args) => __awaiter(void 0, void 0, void 0, function* () {
-            if (shouldSkipFetch)
-                return null;
             const effectiveFetcher = customFetcher || apiFetcher;
             return effectiveFetcher(...args);
         });
@@ -144,6 +145,28 @@ customFetcher, customGetKey, }) => {
         revalidateFirstPage: false,
         initialSize: 1,
     });
+    // Detect when params change and force cache invalidation
+    useEffect(() => {
+        const prevParams = prevParamsRef.current;
+        const paramsChanged = prevParams.collectionId !== currentCollectionId ||
+            prevParams.collectionHandle !== currentCollectionHandle ||
+            prevParams.searchQuery !== currentSearchQuery;
+        if (paramsChanged) {
+            const hasValidCurrentParams = Boolean(currentCollectionId || currentCollectionHandle || currentSearchQuery);
+            // Update the ref
+            prevParamsRef.current = {
+                collectionId: currentCollectionId,
+                collectionHandle: currentCollectionHandle,
+                searchQuery: currentSearchQuery,
+            };
+            // Skip reset on first render, but force it for any subsequent transitions to valid params
+            if (!isFirstRender.current && hasValidCurrentParams) {
+                productCount.current = 0;
+                mutate(undefined, { revalidate: true });
+            }
+        }
+        isFirstRender.current = false;
+    }, [currentCollectionId, currentCollectionHandle, currentSearchQuery, mutate]);
     const isLoadingInitialData = !data && !error;
     const isLoadingMore = isLoadingInitialData ||
         (size > 0 && data && typeof data[size - 1] === "undefined");
@@ -204,7 +227,8 @@ customFetcher, customGetKey, }) => {
             return [];
         return data.map((page) => { var _a; return (_a = page === null || page === void 0 ? void 0 : page.integrationResponse) !== null && _a !== void 0 ? _a : null; });
     }, [data, usingSearchClient]);
-    // Elegant conditional overrides when skipping
+    // Safety fallback: When shouldSkipFetch is true, getKey returns null so SWR won't fetch
+    // This applySkip is a defensive fallback to ensure consistent return values
     const applySkip = useCallback((value, override) => (shouldSkipFetch ? override : value), [shouldSkipFetch]);
     return useMemo(() => ({
         data,

package/dist/styles.css

@@ -1009,6 +1009,9 @@ video {
 .h-20 {
   height: 5rem;
 }
+.h-24 {
+  height: 6rem;
+}
 .h-4 {
   height: 1rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.11.3",
+  "version": "0.11.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",