@tapcart/mobile-components 0.12.9 → 0.12.11

package/dist/components/hooks/use-block-conditional-rendering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-block-conditional-rendering.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-block-conditional-rendering.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,YAAY,EAGb,MAAM,kBAAkB,CAAA;AAezB,eAAO,MAAM,4BAA4B,WAC/B;IACN,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,eAAe,EAAE,GAAG,CAAA;IACpB,iBAAiB,EAAE,GAAG,CAAA;CACvB,UACO,YAAY,6BACO,GAAG;;;CA4Q/B,CAAA"}
+{"version":3,"file":"use-block-conditional-rendering.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-block-conditional-rendering.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,YAAY,EAGb,MAAM,kBAAkB,CAAA;AAezB,eAAO,MAAM,4BAA4B,WAC/B;IACN,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,eAAe,EAAE,GAAG,CAAA;IACpB,iBAAiB,EAAE,GAAG,CAAA;CACvB,UACO,YAAY,6BACO,GAAG;;;CAiT/B,CAAA"}

package/dist/components/hooks/use-block-conditional-rendering.js

@@ -29,11 +29,7 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
     const { id: deviceId = "" } = deviceVariables || {};
     const productId = (_f = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("productId")) !== null && _f !== void 0 ? _f : undefined;
     const productHandle = (_g = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("productHandle")) !== null && _g !== void 0 ? _g : undefined;
-    const location = {
-        country,
-        language,
-        deviceId,
-    };
+    const location = useMemo(() => ({ country, language, deviceId }), [country, language, deviceId]);
     const productMetafieldsQuery = useMemo(() => {
         var _a;
         if (!isConditionalsEnabled) {
@@ -67,7 +63,7 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
     ]);
     const shouldFetchProduct = isConditionalsEnabled && (productId || productHandle);
     const useProducts = (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts) || mclUseProducts;
-    const useProductsArguments = (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts)
+    const useProductsArguments = useMemo(() => (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts)
         ? {
             productIds: productId ? [gidFromId(productId)] : [],
             productHandles: productHandle ? [productHandle] : [],
@@ -82,13 +78,20 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
                 language,
                 country,
             },
-        };
-    const useProductsSkipArguments = (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts)
-        ? {
-            skip: true,
-        }
-        : null;
-    const { products, error: useProductsError, isLoading: isProductsLoading, } = useProducts(shouldFetchProduct ? useProductsArguments : useProductsSkipArguments);
+        }, [
+        mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts,
+        productId,
+        productHandle,
+        apiUrl,
+        language,
+        country,
+        productMetafieldsQuery,
+    ]);
+    const useProductsSkipArguments = useMemo(() => (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts)
+        ? { skip: true }
+        : null, [mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts]);
+    const useProductsInput = useMemo(() => shouldFetchProduct ? useProductsArguments : useProductsSkipArguments, [shouldFetchProduct, useProductsArguments, useProductsSkipArguments]);
+    const { products, error: useProductsError, isLoading: isProductsLoading, } = useProducts(useProductsInput);
     const blockCollectionMetafields = useMemo(() => {
         var _a;
         if (!isConditionalsEnabled) {
@@ -144,20 +147,30 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
     const collectionHandle = (_j = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("collectionHandle")) !== null && _j !== void 0 ? _j : undefined;
     const shouldFetchCollection = isConditionalsEnabled && (collectionId || collectionHandle);
     const useCollection = (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useCollection) || mclUseCollection;
-    const { specificCollection = {}, error: useCollectionError, loading: isCollectionLoading, } = useCollection({
+    const useCollectionArguments = useMemo(() => ({
         appId,
         apiUrl,
         collectionId: shouldFetchCollection ? collectionId : undefined,
         collectionHandle: shouldFetchCollection ? collectionHandle : undefined,
         language: location === null || location === void 0 ? void 0 : location.language,
         metafields: shouldFetchCollection ? memoizedMetafields : undefined,
-    });
+    }), [
+        appId,
+        apiUrl,
+        shouldFetchCollection,
+        collectionId,
+        collectionHandle,
+        location === null || location === void 0 ? void 0 : location.language,
+        memoizedMetafields,
+    ]);
+    const { specificCollection = {}, error: useCollectionError, loading: isCollectionLoading, } = useCollection(useCollectionArguments);
     const isLoading = isProductsLoading || isCollectionLoading;
     if (useProductsError || useCollectionError) {
         console.error("Unable to load products in conditional block rendering hook: ", useProductsError !== null && useProductsError !== void 0 ? useProductsError : useCollectionError);
     }
+    const disabledResult = useMemo(() => ({ shouldShow: true, isLoading: false }), []);
     if (!isConditionalsEnabled) {
-        return { shouldShow: true, isLoading: false };
+        return disabledResult;
     }
     let shouldShow = true;
     const blockHasTags = countNumberOfTagsInState(blockState) > 0;
@@ -200,5 +213,5 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
         console.error("Error evaluating block visibility conditions:", e);
         shouldShow = true; // Fail-safe to show block
     }
-    return { shouldShow, isLoading };
+    return useMemo(() => ({ shouldShow, isLoading }), [shouldShow, isLoading]);
 };

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;IACR,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;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,wLAgBpB,sBAAsB,KAAG,uBAwR3B,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;IACR,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;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,wLAgBpB,sBAAsB,KAAG,uBAqS3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}

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

@@ -49,7 +49,7 @@ initialData, queryVariables: queryVariableProps,
 // Common props
 direction = "vertical", productLimit = Infinity, threshold = 0.01, interval = 33, // ~2 frames
 customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const searchParams = useSearchParams();
     const productCount = useRef(0);
     const isFirstRender = useRef(true);
@@ -102,7 +102,7 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
         return Object.assign(Object.assign({}, queryVariables), { cursorBlob: previousPageData.pageData.cursorBlob });
     };
     const apiFetcher = (body) => __awaiter(void 0, void 0, void 0, function* () {
-        var _f, _g;
+        var _g, _h;
         if (!(initialData === null || initialData === void 0 ? void 0 : initialData.apiURL)) {
             throw new Error("initialData.apiURL is required for API mode");
         }
@@ -111,7 +111,7 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
             body: JSON.stringify(body),
         });
         const data = yield res.json();
-        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;
+        productCount.current += (_h = (_g = data === null || data === void 0 ? void 0 : data.products) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0;
         return data;
     });
     // Return null from getKey to conditionally skip fetching
@@ -134,20 +134,23 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
         };
     const fetcher = usingSearchClient
         ? (...args) => __awaiter(void 0, void 0, void 0, function* () {
-            var _h, _j;
+            var _j, _k;
             if (!searchClientFetcher)
                 return null;
             const result = yield searchClientFetcher(...args);
-            productCount.current += (_j = (_h = result === null || result === void 0 ? void 0 : result.products) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : 0;
+            productCount.current += (_k = (_j = result === null || result === void 0 ? void 0 : result.products) === null || _j === void 0 ? void 0 : _j.length) !== null && _k !== void 0 ? _k : 0;
             return result;
         })
         : (...args) => __awaiter(void 0, void 0, void 0, function* () {
             const effectiveFetcher = customFetcher || apiFetcher;
             return effectiveFetcher(...args);
         });
+    // Check if caller provided pre-fetched products to display while SWR fetches
+    const hasInitialProducts = Boolean((_a = initialData === null || initialData === void 0 ? void 0 : initialData.products) === null || _a === void 0 ? void 0 : _a.length);
     const { data, error, size, setSize, isLoading, isValidating, mutate, } = useSWRInfinite(getKey, fetcher, {
         revalidateFirstPage: false,
         initialSize: 1,
+        keepPreviousData: true,
     });
     // Detect when params change and force cache invalidation
     useEffect(() => {
@@ -166,15 +169,19 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
             // 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 });
+                mutate();
             }
         }
         isFirstRender.current = false;
     }, [currentCollectionId, currentCollectionHandle, currentSearchQuery, mutate]);
-    const isLoadingInitialData = !data && !error;
+    // When we have pre-fetched products, don't report as "loading initial data"
+    // so the grid renders immediately with those products
+    const isLoadingInitialData = !data && !error && !hasInitialProducts;
     const isLoadingMore = isLoadingInitialData ||
         (size > 0 && data && typeof data[size - 1] === "undefined");
-    const isEmpty = ((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.products) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) === 0;
+    const isEmpty = data
+        ? ((_d = (_c = (_b = data === null || data === void 0 ? void 0 : data[0]) === null || _b === void 0 ? void 0 : _b.products) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) === 0
+        : !hasInitialProducts;
     let isEndPointer;
     if (!data) {
         isEndPointer = true;
@@ -183,7 +190,7 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
         isEndPointer = !(searchClient === null || searchClient === void 0 ? void 0 : searchClient.getHasMore());
     }
     else {
-        isEndPointer = !((_e = (_d = data[data.length - 1]) === null || _d === void 0 ? void 0 : _d.pageData) === null || _e === void 0 ? void 0 : _e.cursorBlob);
+        isEndPointer = !((_f = (_e = data[data.length - 1]) === null || _e === void 0 ? void 0 : _e.pageData) === null || _f === void 0 ? void 0 : _f.cursorBlob);
     }
     const isReachingEnd = isEmpty || isEndPointer;
     const isRefreshing = isValidating && data && data.length === size;
@@ -214,15 +221,20 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
             return;
         const unsubscribeAllChanges = searchClient.onSearchStateChange(() => {
             productCount.current = 0;
-            mutate(undefined, { revalidate: true });
+            mutate();
         });
         return unsubscribeAllChanges;
     }, [searchClient, mutate, usingSearchClient]);
     const products = useMemo(() => {
-        return data
-            ? data === null || data === void 0 ? void 0 : data.flatMap((page) => page === null || page === void 0 ? void 0 : page.products).slice(0, productLimit)
-            : [];
-    }, [data, productLimit]);
+        if (data) {
+            return data.flatMap((page) => page === null || page === void 0 ? void 0 : page.products).slice(0, productLimit);
+        }
+        // Use pre-fetched products while SWR fetches the real paginated data
+        if (hasInitialProducts) {
+            return initialData.products;
+        }
+        return [];
+    }, [data, productLimit, hasInitialProducts, initialData === null || initialData === void 0 ? void 0 : initialData.products]);
     // Collect all integration responses per page when using search client
     const integrationResponses = useMemo(() => {
         if (!usingSearchClient)

package/dist/components/hooks/use-infinite-wishlist.d.ts

@@ -1,16 +1,40 @@
+export type WishlistItemRef = {
+    productId: string;
+    variantId?: string;
+};
 type QueryVariables = {
     language?: string;
     country?: string;
     appId?: string;
     collectionId?: string;
 };
+/** Preferred: item-level refs. Legacy: parallel arrays (converted to initialItems internally). */
 type UseInFiniteProductsOptions = {
-    initialProductIds: string[];
+    /** Item-level refs (productId + optional variantId). Use this for multi-variant support. */
+    initialItems?: WishlistItemRef[];
+    /**
+     * @deprecated Use initialItems instead. If initialItems is not provided, these are converted to initialItems (with variantIds by position).
+     */
+    initialProductIds?: string[];
+    /**
+     * @deprecated Use initialItems instead. When using with initialProductIds, same-length array by position.
+     */
+    variantIds?: string[];
     chunkSize: number;
     apiUrl: string;
     shouldMock: boolean;
     queryVariables?: QueryVariables;
-    variantIds?: string[];
+};
+/** Return type of useInfiniteWishlist. Do not remove fields — forked blocks may depend on them. */
+export type UseInfiniteWishlistResult = {
+    products: Product[];
+    isLoading: boolean;
+    isLoadingMore: boolean;
+    error: Error | null;
+    hasMore: boolean;
+    loadMore: () => Promise<void>;
+    loadMoreRef: (node?: Element | null) => void;
+    reset: () => void;
 };
 type ProductVariant = {
     id: string;
@@ -49,15 +73,6 @@ type Product = {
         height: number;
     };
 };
-export declare function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shouldMock, queryVariables, variantIds, }: UseInFiniteProductsOptions): {
-    products: Product[];
-    isLoading: boolean;
-    isLoadingMore: boolean;
-    error: Error | null;
-    hasMore: boolean;
-    loadMore: () => Promise<void>;
-    loadMoreRef: (node?: Element | null | undefined) => void;
-    reset: () => void;
-};
+export declare function useInfiniteWishlist(options: UseInFiniteProductsOptions): UseInfiniteWishlistResult;
 export {};
 //# sourceMappingURL=use-infinite-wishlist.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-infinite-wishlist.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-wishlist.ts"],"names":[],"mappings":"AAOA,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,iBAAiB,EAAE,MAAM,EAAE,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACtB,CAAA;AAED,KAAK,cAAc,GAAG;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,cAAc,EAAE;QACd,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,gBAAgB,EAAE,OAAO,CAAA;IACzB,GAAG,EAAE,MAAM,CAAA;IACX,eAAe,EAAE,KAAK,CAAC;QACrB,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd,CAAC,CAAA;IACF,KAAK,CAAC,EAAE;QACN,GAAG,EAAE,MAAM,CAAA;QACX,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF,CAAA;AAED,KAAK,OAAO,GAAG;IACb,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,OAAO,CAAA;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,cAAc,EAAE,CAAA;IAC1B,aAAa,CAAC,EAAE;QACd,GAAG,EAAE,MAAM,CAAA;QACX,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF,CAAA;AAKD,wBAAgB,mBAAmB,CAAC,EAClC,iBAAiB,EACjB,SAAS,EACT,MAAM,EACN,UAAkB,EAClB,cAAmB,EACnB,UAAe,GAChB,EAAE,0BAA0B;;;;;;;;;EAsO5B"}
+{"version":3,"file":"use-infinite-wishlist.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-wishlist.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,eAAe,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEvE,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,kGAAkG;AAClG,KAAK,0BAA0B,GAAG;IAChC,4FAA4F;IAC5F,YAAY,CAAC,EAAE,eAAe,EAAE,CAAA;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,cAAc,CAAA;CAChC,CAAA;AAED,mGAAmG;AACnG,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,OAAO,CAAA;IACtB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC7B,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB,CAAA;AAED,KAAK,cAAc,GAAG;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,cAAc,EAAE;QACd,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,gBAAgB,EAAE,OAAO,CAAA;IACzB,GAAG,EAAE,MAAM,CAAA;IACX,eAAe,EAAE,KAAK,CAAC;QACrB,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd,CAAC,CAAA;IACF,KAAK,CAAC,EAAE;QACN,GAAG,EAAE,MAAM,CAAA;QACX,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF,CAAA;AAED,KAAK,OAAO,GAAG;IACb,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,OAAO,CAAA;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,cAAc,EAAE,CAAA;IAC1B,aAAa,CAAC,EAAE;QACd,GAAG,EAAE,MAAM,CAAA;QACX,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF,CAAA;AAgDD,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,0BAA0B,GAClC,yBAAyB,CAmW3B"}

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

@@ -8,20 +8,53 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useInView } from "react-intersection-observer";
-import { getProductGidsFromIds } from "../../lib/utils";
+import { getProductGidsFromIds, getVariantGidsFromIds } from "../../lib/utils";
 import { useCollection } from "./use-collection";
 const extractVariantId = (fullId) => fullId.split("/").pop() || "";
-export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shouldMock = false, queryVariables = {}, variantIds = [], }) {
+const ensureVariantGID = (id) => getVariantGidsFromIds([id])[0];
+const toItemKey = (item) => item.variantId
+    ? ensureVariantGID(item.variantId)
+    : getProductGidsFromIds([item.productId])[0];
+/** Unique key for a product card: variant GID when narrowed to one variant, else product GID. */
+const getProductOrVariantKey = (p) => { var _a; return ((_a = p === null || p === void 0 ? void 0 : p.variants) === null || _a === void 0 ? void 0 : _a.length) === 1 ? p.variants[0].id : p.id; };
+const buildIdSnapshot = (ids) => ({
+    ids,
+    key: ids.join("\0"),
+    set: new Set(ids),
+    indexMap: new Map(ids.map((id, i) => [id, i])),
+});
+/** Normalize options: prefer initialItems; fall back to legacy initialProductIds + variantIds. */
+function normalizeInitialItems(options) {
+    var _a, _b;
+    if (options.initialItems != null && Array.isArray(options.initialItems)) {
+        return options.initialItems;
+    }
+    const ids = (_a = options.initialProductIds) !== null && _a !== void 0 ? _a : [];
+    const variantIds = (_b = options.variantIds) !== null && _b !== void 0 ? _b : [];
+    return ids.map((productId, i) => ({
+        productId,
+        variantId: variantIds[i],
+    }));
+}
+export function useInfiniteWishlist(options) {
     var _a;
+    const { chunkSize, apiUrl, shouldMock = false, queryVariables = {} } = options;
+    const initialItems = normalizeInitialItems(options);
     const isInitialMount = useRef(true);
-    const [allProductIds, setAllProductIds] = useState(initialProductIds);
+    const itemKeys = initialItems.map(toItemKey);
+    const prevSnapshotRef = useRef(buildIdSnapshot(itemKeys));
+    const loadedIndexRef = useRef(0);
+    const [allItemKeys, setAllItemKeys] = useState(itemKeys);
     const [loadedIndex, setLoadedIndex] = useState(0);
     const [products, setProducts] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const loadingRef = useRef(false);
+    // Kept in sync via a dedicated effect so loadMore callbacks can detect
+    // whether the wishlist changed while an async fetch was in-flight.
+    const allItemKeysRef = useRef(allItemKeys);
     //Fetching collections are necessary only for the mock data. Since we pass the collectionId to the API, it will return the products for the collection.
     const { collections } = useCollection({
         apiUrl: apiUrl,
@@ -32,16 +65,83 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
         limit: 1,
     });
     const collectionToFetchID = (_a = collections[0]) === null || _a === void 0 ? void 0 : _a.id;
+    // Keep loadedIndexRef in sync so the delta-detection effect below can read
+    // the current value without adding loadedIndex as a dependency (which would
+    // cause the effect to re-run on every pagination step).
+    useEffect(() => {
+        loadedIndexRef.current = loadedIndex;
+    }, [loadedIndex]);
+    // Keep allItemKeysRef in sync so in-flight loadMore callbacks can bail out
+    // when the wishlist changes before their fetch completes.
+    useEffect(() => {
+        allItemKeysRef.current = allItemKeys;
+    }, [allItemKeys]);
+    // Stable key so the delta effect runs only when list content changes, not on every
+    // new initialItems reference (avoids CPU spike from repeated effect runs after removal).
+    const itemKeysKey = useMemo(() => initialItems.map(toItemKey).join("\0"), [initialItems]);
     useEffect(() => {
+        var _a;
+        const nextKeys = initialItems.map(toItemKey);
         if (isInitialMount.current) {
             isInitialMount.current = false;
+            prevSnapshotRef.current = buildIdSnapshot(nextKeys);
+            return;
         }
-        else {
-            setAllProductIds(initialProductIds);
-            setLoadedIndex(0);
-            setProducts([]);
+        // Webbridge data has no stable refs (JSON deserialization always produces
+        // new objects). Build a snapshot for the incoming item keys so all
+        // comparisons use O(1) Set/Map lookups rather than repeated array walks.
+        const prev = prevSnapshotRef.current;
+        const next = buildIdSnapshot(nextKeys);
+        prevSnapshotRef.current = next;
+        // O(1) same-content check via precomputed key — avoids walking the array
+        // on every variables/updated notification (cart, customer, etc.).
+        if (next.key === prev.key)
+            return;
+        const isPureRemoval = next.ids.length < prev.ids.length &&
+            next.ids.every((id) => prev.set.has(id)); // O(1) per lookup
+        const currentLoadedIndex = loadedIndexRef.current;
+        const isPureAddition = next.ids.length > prev.ids.length &&
+            prev.ids.every((id) => next.set.has(id));
+        if (isPureRemoval) {
+            // Filter removed items out of the current list without resetting,
+            // so the grid never goes to skeleton for a simple item removal.
+            const removedKeys = new Set(prev.ids.filter((k) => !next.set.has(k)));
+            setProducts((curr) => curr.filter((p) => !removedKeys.has(getProductOrVariantKey(p))));
+            setAllItemKeys(next.ids);
+            // Recalculate loadedIndex: count surviving keys that were already in the
+            // loaded range of the old array. O(1) per lookup via prev.indexMap.
+            const newLoadedIndex = next.ids.filter((id) => { var _a; return ((_a = prev.indexMap.get(id)) !== null && _a !== void 0 ? _a : Infinity) < currentLoadedIndex; }).length;
+            setLoadedIndex(newLoadedIndex);
+            return;
         }
-    }, [initialProductIds]);
+        if (isPureAddition) {
+            // Walk next.ids from the start to find the new contiguous loaded prefix.
+            // We stop at the first ID that either (a) wasn't fetched yet in the old
+            // list or (b) is one of the newly added items. Everything from that point
+            // onwards will be picked up by the next loadMore.
+            let newLoadedIndex = 0;
+            for (const id of next.ids) {
+                if (prev.set.has(id) &&
+                    ((_a = prev.indexMap.get(id)) !== null && _a !== void 0 ? _a : Infinity) < currentLoadedIndex) {
+                    newLoadedIndex++;
+                }
+                else {
+                    break;
+                }
+            }
+            setAllItemKeys(next.ids);
+            setLoadedIndex(newLoadedIndex);
+            // products are unchanged — scroll position preserved, no skeleton.
+            // The inView effect re-evaluates after these state updates and will
+            // auto-trigger loadMore if the sentinel is already in view.
+            return;
+        }
+        setAllItemKeys(next.ids);
+        setLoadedIndex(0);
+        setProducts([]);
+        // Intentionally depend on itemKeysKey (not initialItems) so we only run when list content changes, not on every new array ref
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [itemKeysKey]);
     const handleFetchError = (err, context) => {
         const error = err instanceof Error ? err : new Error(`Failed to ${context}`);
         setError(error);
@@ -84,14 +184,13 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
         queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.country,
         queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.appId,
     ]);
-    const fetchProducts = useCallback((ids) => __awaiter(this, void 0, void 0, function* () {
-        if (!ids.length)
+    const fetchProducts = useCallback((chunkItemKeys, chunkProductGids) => __awaiter(this, void 0, void 0, function* () {
+        if (!chunkItemKeys.length)
             return [];
         if (shouldMock)
             return fetchMockedProducts();
         const queryParams = new URLSearchParams();
-        queryParams.set("ids", getProductGidsFromIds(ids).join(","));
-        // Add country and language parameters for correct currency/pricing
+        queryParams.set("ids", chunkProductGids.join(","));
         if (queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.country) {
             queryParams.set("country", queryVariables.country);
         }
@@ -104,36 +203,47 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
             if (!response.ok) {
                 throw new Error(`HTTP error: ${response.status}`);
             }
-            const products = yield response.json();
-            if (variantIds.length > 0) {
-                return variantIds
-                    .map((variantId) => {
-                    var _a;
+            const products = (yield response.json());
+            // One card per item key, in chunkItemKeys order. Variant keys get
+            // product narrowed to that variant; product keys get product as-is.
+            const keyVariantId = (k) => { var _a; return (_a = k.split("/").pop()) !== null && _a !== void 0 ? _a : k; };
+            return chunkItemKeys
+                .map((key) => {
+                var _a;
+                const isVariantKey = key.includes("ProductVariant");
+                if (isVariantKey) {
+                    const keyId = keyVariantId(key);
                     const product = products.find((p) => {
                         var _a;
-                        return (_a = p.variants) === null || _a === void 0 ? void 0 : _a.some((v) => extractVariantId(v.id) === variantId);
+                        return (_a = p.variants) === null || _a === void 0 ? void 0 : _a.some((v) => v.id === key || keyVariantId(v.id) === keyId);
                     });
                     if (!product)
                         return null;
-                    const matchingVariant = (_a = product.variants) === null || _a === void 0 ? void 0 : _a.find((v) => extractVariantId(v.id) === variantId);
+                    const matchingVariant = (_a = product.variants) === null || _a === void 0 ? void 0 : _a.find((v) => v.id === key || keyVariantId(v.id) === keyId);
                     if (!matchingVariant)
                         return null;
                     return Object.assign(Object.assign({}, product), { variants: [matchingVariant] });
-                })
-                    .filter((p) => p !== null);
-            }
-            return products;
+                }
+                const product = products.find((p) => p.id === key);
+                return product !== null && product !== void 0 ? product : null;
+            })
+                .filter((p) => p !== null);
         }
         catch (err) {
             handleFetchError(err, "fetch products");
             return [];
         }
-    }), [apiUrl, shouldMock, fetchMockedProducts, variantIds, queryVariables]);
+    }), [apiUrl, shouldMock, fetchMockedProducts, queryVariables]);
+    const itemKeyToProductGid = useMemo(() => new Map(initialItems.map((item) => [
+        toItemKey(item),
+        getProductGidsFromIds([item.productId])[0],
+    ])), [initialItems]);
     const loadMore = useCallback(() => __awaiter(this, void 0, void 0, function* () {
         if (loadingRef.current ||
-            (!shouldMock && !(allProductIds.length - loadedIndex > 0))) {
+            (!shouldMock && !(allItemKeys.length - loadedIndex > 0))) {
             return;
         }
+        const capturedAllItemKeys = allItemKeysRef.current;
         loadingRef.current = true;
         setIsLoading(true);
         try {
@@ -145,13 +255,25 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
                 }
             }
             else {
-                const remainingItems = allProductIds.length - loadedIndex;
+                const remainingItems = allItemKeys.length - loadedIndex;
                 const loadCount = Math.min(remainingItems, chunkSize);
-                const nextChunkIds = allProductIds.slice(loadedIndex, loadedIndex + loadCount);
-                if (nextChunkIds.length === 0)
+                const chunkItemKeys = allItemKeys.slice(loadedIndex, loadedIndex + loadCount);
+                if (chunkItemKeys.length === 0)
                     return;
-                const newProducts = yield fetchProducts(nextChunkIds);
-                setProducts((prev) => [...prev, ...newProducts]);
+                const chunkProductGids = Array.from(new Set(chunkItemKeys.map((k) => itemKeyToProductGid.get(k))));
+                const newProducts = yield fetchProducts(chunkItemKeys, chunkProductGids);
+                if (allItemKeysRef.current !== capturedAllItemKeys)
+                    return;
+                setProducts((prev) => {
+                    const merged = new Map(prev.map((p) => [getProductOrVariantKey(p), p]));
+                    for (let i = 0; i < newProducts.length; i++) {
+                        merged.set(chunkItemKeys[i], newProducts[i]);
+                    }
+                    return capturedAllItemKeys.flatMap((key) => {
+                        const p = merged.get(key);
+                        return p ? [p] : [];
+                    });
+                });
                 setLoadedIndex((prev) => prev + loadCount);
             }
         }
@@ -164,11 +286,12 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
         }
     }), [
         shouldMock,
-        allProductIds,
+        allItemKeys,
         loadedIndex,
         chunkSize,
         fetchProducts,
         fetchMockedProducts,
+        itemKeyToProductGid,
     ]);
     useEffect(() => {
         if (shouldMock && collectionToFetchID && products.length === 0) {
@@ -182,16 +305,14 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
     useEffect(() => {
         if (inView &&
             !loadingRef.current &&
-            (shouldMock
-                ? products.length < 2
-                : allProductIds.length - loadedIndex > 0)) {
+            (shouldMock ? products.length < 2 : allItemKeys.length - loadedIndex > 0)) {
             loadMore();
         }
     }, [
         inView,
         shouldMock,
         products.length,
-        allProductIds.length,
+        allItemKeys.length,
         loadedIndex,
         loadMore,
     ]);
@@ -202,7 +323,7 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
         error,
         hasMore: shouldMock
             ? products.length < 2
-            : allProductIds.length - loadedIndex > 0,
+            : allItemKeys.length - loadedIndex > 0,
         loadMore,
         loadMoreRef,
         reset: () => {

package/dist/components/hooks/use-infinite-wishlist.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-infinite-wishlist.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-infinite-wishlist.test.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-wishlist.test.ts"],"names":[],"mappings":""}