@depict-ai/ui 4.2.0 → 4.2.2

package/server/latest/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.2.0";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.2.2";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1208,21 +1208,24 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
   outerRef_: outerRef_,
   animationDuration_: animationDuration_
 }) {
-  const variantToUse = display_?.variant_displays[display_?.variant_index];
-  const imageUrls = variantToUse?.image_urls;
-  const imageUrl = imageUrls?.[0];
-  const secondaryImageUrl = imageUrls?.[1];
+  const variantToUse = $5vyXB$solidjs.createMemo(() => {
+    const display = display_();
+    return display?.variant_displays[display?.variant_index];
+  });
+  const imageUrls = () => variantToUse()?.image_urls;
+  const imageUrl = $5vyXB$solidjs.createMemo(() => imageUrls()?.[0]);
+  const secondaryImageUrl = $5vyXB$solidjs.createMemo(() => imageUrls()?.[1]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $5vyXB$solidjs.createSignal($5vyXB$solidjs.untrack(isExpanded_));
   const [animationEffectExists, setAnimationEffectExists] = $5vyXB$solidjs.createSignal(false);
-  const [salePrice] = $5vyXB$solidjs.createResource(() => variantToUse?.sale_price);
-  const [originalPrice] = $5vyXB$solidjs.createResource(() => variantToUse?.original_price);
+  const [salePrice] = $5vyXB$solidjs.createResource(() => variantToUse()?.sale_price);
+  const [originalPrice] = $5vyXB$solidjs.createResource(() => variantToUse()?.original_price);
   const isOnSale = $5vyXB$solidjs.createMemo(() => salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   return $5vyXB$solidjsweb.ssrElement("a", $5vyXB$solidjsweb.mergeProps({
     "class": "look-item"
   }, () => isExpanded_() && !animationIsRunning() ? {
-    href: variantToUse?.page_url
+    href: variantToUse()?.page_url
   } : {}), () => ["<!--$-->", $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     when: imageUrl,
     get fallback() {
@@ -1231,19 +1234,37 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
       });
     },
     get children() {
-      return $5vyXB$solidjsweb.ssr($1ae437d7d388a66e$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
-        src: imageUrl,
-        get aspectRatio() {
-          return isExpanded_() ? 0.75 : 1;
+      return $5vyXB$solidjsweb.ssr($1ae437d7d388a66e$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+        get when() {
+          return imageUrl();
+        },
+        get fallback() {
+          return $5vyXB$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
+            aspectRatio: 1
+          });
         },
-        get autoAdjustAspectRatio() {
-          return isExpanded_() ? "smoothed" : false;
+        get children() {
+          return $5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
+            get src() {
+              return imageUrl();
+            },
+            get aspectRatio() {
+              return isExpanded_() ? 0.75 : 1;
+            },
+            get autoAdjustAspectRatio() {
+              return isExpanded_() ? "smoothed" : false;
+            }
+          });
         }
       })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-        when: secondaryImageUrl,
+        get when() {
+          return secondaryImageUrl();
+        },
         get children() {
           return $5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
-            src: secondaryImageUrl,
+            get src() {
+              return secondaryImageUrl();
+            },
             get aspectRatio() {
               return isExpanded_() ? 0.75 : 1;
             },
@@ -1260,10 +1281,10 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
       return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
     },
     get children() {
-      return $5vyXB$solidjsweb.ssr($1ae437d7d388a66e$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(variantToUse?.title) ?? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+      return $5vyXB$solidjsweb.ssr($1ae437d7d388a66e$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(variantToUse()?.title) ?? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
         height: "1em",
         width: "20ch"
-      })), `d-price ${isOnSale() ? "sale" : ""}`, !variantToUse || salePrice.loading ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+      })), `d-price ${isOnSale() ? "sale" : ""}`, !variantToUse() || salePrice.loading ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
         height: "1em",
         width: "20ch"
       })) : $5vyXB$solidjsweb.escape(salePrice()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
@@ -1271,7 +1292,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
           return isOnSale();
         },
         get children() {
-          return $5vyXB$solidjsweb.ssr($1ae437d7d388a66e$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), !variantToUse || originalPrice.loading ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+          return $5vyXB$solidjsweb.ssr($1ae437d7d388a66e$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), !variantToUse() || originalPrice.loading ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
           })) : $5vyXB$solidjsweb.escape(originalPrice()));
@@ -1329,7 +1350,7 @@ async function $b9e830d616d01b31$var$checkIfIsAffectedByChromeBug326498383() {
     // Passive to make it more likely to run the callback before our timeout if the browser is under high load during the test
     {
       once: true,
-      passive: true
+      passive: false
     });
     await timeoutPromise;
   } catch (e) {
@@ -1337,7 +1358,7 @@ async function $b9e830d616d01b31$var$checkIfIsAffectedByChromeBug326498383() {
   }
   return isAffected;
 }
-var $905010a06f9aeae5$var$_tmpl$ = ["<div", ' class="scroll-padding"><div class="', '" style="', '">', "</div></div>"];
+var $905010a06f9aeae5$var$_tmpl$ = ["<div", ' class="scroll-padding">', "</div>"];
 function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
   displays_: displays_,
   FavoriteButton_: FavoriteButton_,
@@ -1353,31 +1374,42 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
   // The following three signals just contain the state if the animations are actually running and should only be set by the respective animation code
   const textFadeInAnimationRunning = $5vyXB$solidjs.createSignal(false);
   const [getSecondPartAnimationRunning] = textFadeInAnimationRunning;
-  // These expanded variables are what's used to trigger the second and first phase animations
   $b9e830d616d01b31$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
   return $5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
     get children() {
       return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
         get when() {
-          return containerWidth_();
+          return containerWidth_() || !displays_;
         },
         get children() {
-          return $5vyXB$solidjsweb.ssr($905010a06f9aeae5$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `look-overlay ${userWantsExpanded() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`, $5vyXB$solidjsweb.ssrStyle(`--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.For), {
-            each: displays_,
-            children: (display, index) => $5vyXB$solidjsweb.createComponent((0, $1ae437d7d388a66e$export$b73ed90f0ee50dc3), {
-              animationDuration_: animationDuration_,
-              display_: display,
-              FavoriteButton_: FavoriteButton_,
-              isExpanded_: userWantsExpanded,
-              textFadeInAnimationRunning_: textFadeInAnimationRunning,
-              outerRef_: el => $5vyXB$solidjs.createEffect(() => {
-                if (index() !== 0) return;
-                const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
-                resizeObserver.observe(el);
-                $5vyXB$solidjs.onCleanup(() => resizeObserver.disconnect());
-              })
-            })
-          })));
+          return $5vyXB$solidjsweb.ssr($905010a06f9aeae5$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrElement("div", $5vyXB$solidjsweb.mergeProps({
+            get ["class"]() {
+              return `look-overlay ${userWantsExpanded() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`;
+            }
+          }, () => displays_ && {
+            style: `--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`
+          }), () => $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Index), {
+            get each() {
+              return displays_ || Array.from({
+                length: 4
+              });
+            },
+            children: (display, index) => {
+              return $5vyXB$solidjsweb.createComponent((0, $1ae437d7d388a66e$export$b73ed90f0ee50dc3), {
+                animationDuration_: animationDuration_,
+                display_: display,
+                FavoriteButton_: FavoriteButton_,
+                isExpanded_: userWantsExpanded,
+                textFadeInAnimationRunning_: textFadeInAnimationRunning,
+                outerRef_: el => $5vyXB$solidjs.createEffect(() => {
+                  if (index !== 0) return;
+                  const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
+                  resizeObserver.observe(el);
+                  $5vyXB$solidjs.onCleanup(() => resizeObserver.disconnect());
+                })
+              });
+            }
+          })), false));
         }
       });
     }
@@ -1403,18 +1435,22 @@ function $905010a06f9aeae5$var$scrollingFunctionForChrome(element, targetScrollY
   // Bootstrap our animation - it will get called right before next frame shall be rendered.
   requestAnimationFrame(step);
 }
-var $ad882bbe664dbd53$var$_tmpl$ = ["<div", ' class="look-card" style="', '"></div>'];
-function $ad882bbe664dbd53$export$44809a8a3e867e30(display, info, FavoriteButton_) {
+var $ad882bbe664dbd53$var$_tmpl$ = ["<div", ' class="', '"></div>'];
+function $ad882bbe664dbd53$export$44809a8a3e867e30({
+  display_: display_,
+  expandedLooksSignal_: [expandedLooks_, setExpandedLooks],
+  FavoriteButton_: FavoriteButton_,
+  placeholderImageAspectRatio_: placeholderImageAspectRatio_,
+  animationDuration_: animationDuration_
+}) {
   // TODO: shopify, run displayTransformers to get dynamic prices
   // TODO: format prices
-  const animationDuration_ = 300;
-  const [coverImage] = display?.image_urls || [];
+  const [coverImage] = display_?.image_urls || [];
   const useWantsExpandedSignal_ = $5vyXB$solidjs.createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
-  const [expandedLooks_, setExpandedLooks] = info?.expandedLooksSignal_ || [];
   const supportsHover_ = $b54e6192d0caa293$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
-  const container = $5vyXB$solidjsweb.ssr($ad882bbe664dbd53$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(`--animation-duration: ${animationDuration_}ms`));
+  const container = $5vyXB$solidjsweb.ssr($ad882bbe664dbd53$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `look-card ${!display_ ? "placeholder" : ""}`);
   const containerWidth_ = $f13855d1b951b24a$export$ebdc3711f7e02ccd(container);
   const clickHandler = $5vyXB$depictaiutilishared.catchify(({
     target: target
@@ -1425,7 +1461,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30(display, info, FavoriteButton
   });
   addEventListener("click", clickHandler);
   $5vyXB$solidjs.onCleanup(() => removeEventListener("click", clickHandler));
-  $5vyXB$solidjs.createEffect(() => setExpandedLooks?.(prev => {
+  $5vyXB$solidjs.createEffect(() => setExpandedLooks(prev => {
     if (userWantsExpanded()) {
       // Close the other expanded looks
       prev.clear();
@@ -1435,41 +1471,41 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30(display, info, FavoriteButton
     return prev;
   }));
   // Close us if another look expands
-  $5vyXB$solidjs.createEffect(() => expandedLooks_ && !expandedLooks_().has(us) && setUserWantsExpanded(false));
-  $5vyXB$solidjsweb.insert(container, () => $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-    when: display,
+  $5vyXB$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
+  $5vyXB$solidjsweb.insert(container, () => [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    when: display_,
     get fallback() {
       return $5vyXB$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
-        width: "100%",
-        height: "100%"
+        aspectRatio: placeholderImageAspectRatio_
       });
     },
     get children() {
-      return [$5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
+      return $5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
         src: coverImage,
-        aspectRatio: 0.75,
+        aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
-      }), $5vyXB$solidjsweb.createComponent((0, $905010a06f9aeae5$export$ebf0b1d4f90c09ae), {
-        get displays_() {
-          return display?.displays;
-        },
-        userWantsExpandedSignal_: useWantsExpandedSignal_,
-        containerWidth_: containerWidth_,
-        animationDuration_: animationDuration_,
-        supportsHover_: supportsHover_,
-        FavoriteButton_: FavoriteButton_
-      })];
+      });
     }
-  }));
+  }), $5vyXB$solidjsweb.createComponent((0, $905010a06f9aeae5$export$ebf0b1d4f90c09ae), {
+    get displays_() {
+      return display_?.displays;
+    },
+    userWantsExpandedSignal_: useWantsExpandedSignal_,
+    containerWidth_: containerWidth_,
+    animationDuration_: animationDuration_,
+    supportsHover_: supportsHover_,
+    FavoriteButton_: FavoriteButton_
+  })]);
   return container;
 }
-var $072863633018e322$var$_tmpl$ = ["<div", ' class="depict recommendations looks">', "</div>"];
+var $072863633018e322$var$_tmpl$ = ["<div", ' class="depict recommendations looks" style="', '">', "</div>"];
 let $072863633018e322$var$expandedLooksSignal_;
 function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
     $072863633018e322$var$expandedLooksSignal_ ||= $5vyXB$solidjs.createSignal(new Set(), {
       equals: false
     });
+    const expandingAnimationDuration = 240;
     const grid_spacing_override = $5vyXB$solidjs.createMemo(() => {
       const {
         gridSpacing_: gridSpacing_
@@ -1499,13 +1535,16 @@ function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
         return [];
       return decoded.listings;
     });
-    return $5vyXB$solidjsweb.ssr($072863633018e322$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+    return $5vyXB$solidjsweb.ssr($072863633018e322$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(`--animation-duration: ${expandingAnimationDuration}ms`), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
       get children() {
         return $363ce4d1d71041aa$export$d41d19e89346fa2({
-          product_card_template_: (display, info) => $ad882bbe664dbd53$export$44809a8a3e867e30(display, info ? {
-            ...info,
+          product_card_template_: (display, info) => $ad882bbe664dbd53$export$44809a8a3e867e30({
+            display_: display,
+            FavoriteButton_: props.FavoriteButton_,
+            placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
+            animationDuration_: expandingAnimationDuration,
             expandedLooksSignal_: $072863633018e322$var$expandedLooksSignal_
-          } : info, props.FavoriteButton_),
+          }),
           recommendations_resource_: looksResource,
           title_: () => props.title_,
           layout_options_: $5vyXB$solidjs.createMemo(() => ({
@@ -2598,10 +2637,6 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
 }
 function $ca1176b694a6ee2e$export$fe334901e8bebd57() {
   const cleanup_fns = [];
-  $5vyXB$depictaiutilishared.dlog("DISABLING SCROLLING");
-  $5vyXB$solidjs.onCleanup(() => {
-    console.log("RE-ENABLING SCROLLING");
-  });
   const cleanup = () => cleanup_fns.forEach(f => f());
   // use an animation to automatically retain the `overflow` values and all other styling
   for (const element of [document.documentElement, document.body]) {

package/server/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.2.0";
+export const version = "4.2.2";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -249,9 +249,10 @@ export function LooksSlider(props: {
   merchant_: string;
   market_: string;
   locale_: string;
+  imagePlaceholderAspectRatio_: number | string;
   title_?: JSX.Element;
   FavoriteButton_?: (props: {
-    display_: ModernDisplay | null | undefined;
+    display_: Accessor<ModernDisplay | null | undefined>;
   }) => JSX.Element;
 }): HTMLDivElement;
 export const prefixes_to_preserve_in_history_dot_state: Set<string>;